Merge pull request #34 from jlyheden/feature/module-info

Added detailed module view in frontend

Author: Ilja Bobkevic

lib/puppet_forge_server.rb

@@ -60,6 +60,7 @@ module Utils
     autoload :OptionParser, 'puppet_forge_server/utils/option_parser'
     autoload :Buffer, 'puppet_forge_server/utils/buffer'
     autoload :Http, 'puppet_forge_server/utils/http'
+    autoload :MarkdownRenderer, 'puppet_forge_server/utils/md_renderer'
   end
 
   module Http

lib/puppet_forge_server/api/v3/releases.rb

@@ -32,7 +32,8 @@ def get_releases(metadata)
             :tags => element.tags ? element.tags : [element.metadata.author, name],
             :file_uri => "/v3/files#{element.path}",
             :file_md5 => element.checksum,
-            :deleted_at => element.deleted_at
+            :deleted_at => element.deleted_at,
+            :readme => element.readme
         }
       end.uniq{|r| r[:version]}.sort_by { |r| Gem::Version.new(r[:version]) }
     end

lib/puppet_forge_server/app/frontend.rb

@@ -17,9 +17,11 @@
 require 'sinatra/base'
 require 'haml'
 require 'json'
+require 'tilt/haml'
 
 module PuppetForgeServer::App
   class Frontend < Sinatra::Base
+    include PuppetForgeServer::Utils::MarkdownRenderer
 
     configure do
       set :haml, :format => :html5
@@ -47,6 +49,23 @@ def initialize(root, http_client = PuppetForgeServer::Http::HttpClient.new)
       haml :modules, :locals => {:query => query, :modules => modules}
     end
 
+    get '/module' do
+      module_v3_name = params[:name].gsub(/\//, '-')
+      releases = get("#{request.base_url}/v3/modules/#{module_v3_name}")['releases']
+      if params.has_key? 'version'
+        module_uri = releases.find {|r| r['version'] == params['version']}['uri']
+        module_metadata = get("#{request.base_url}#{module_uri}")
+      else
+        module_metadata = get("#{request.base_url}#{releases[0]['uri']}")
+      end
+      begin
+        readme_markdown = markdown(module_metadata['readme'])
+      rescue
+        readme_markdown = ''
+      end
+      haml :module, :locals => { :module_metadata => module_metadata, :base_url => request.base_url, :readme_markdown => readme_markdown, :releases => releases }
+    end
+
     get '/upload' do
       haml :upload, :locals => {:upload_status => ''}
     end

lib/puppet_forge_server/app/public/css/puppetlabs.css

@@ -215,6 +215,214 @@ h3.search-results-title {
   margin: 0;
   border-bottom: solid 1px #cccccc;
 }
+.module-header {
+  position: relative;
+  float: left;
+  width: 90%;
+  min-height: 77px;
+  padding: 1em;
+  background-color: #f4f4f4;
+}
+.module-header.supported {
+  background-image: url("/assets/41dfc34/images/supported-tag-upper-right.png");
+  background-repeat: no-repeat;
+  background-position: top right;
+}
+.module-header.approved {
+  background-image: url("/assets/41dfc34/images/approved-tag-upper-right.png");
+  background-repeat: no-repeat;
+  background-position: top right;
+}
+.module-header .author,
+.module-header .tag-section {
+  padding-top: 0.25em;
+}
+.module-header .popular {
+  display: inline;
+  margin-left: 0;
+}
+.module-header .tags {
+  display: inline;
+  margin-left: 0;
+}
+.module-header .endorsement-trigger {
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 77px;
+  height: 77px;
+}
+.module-header .details {
+  font-size: 0.95em;
+}
+.module-header .details table {
+  width: 100%;
+  position: relative;
+}
+.module-header .details .gravatar {
+  float: left;
+  width: 77px;
+}
+.module-header .details .gravatar .avatar {
+  margin: 0;
+  padding: 0;
+}
+.module-header .details .module-info-basic {
+  margin-left: 93px;
+  /* width of gravatar (77) + 1em (16) */
+}
+.module-header .details .module-info-basic .module-info-header {
+  margin: 0;
+  padding-right: 45px;
+}
+.module-header .details .module-info-basic .module-info-header a:hover {
+  text-decoration: underline;
+}
+.module-header .details .module-info-basic .module-info-header h2 {
+  display: inline-block;
+  margin: 0 10px 0 0;
+  line-height: 1.1rem;
+}
+@media (max-width: 1150px) {
+  .module-header .details .module-info-basic .module-info-header h2 .namespace {
+    display: none;
+  }
+}
+.module-header .details .module-info-basic .module-info-header .module-info-author {
+  display: inline-block;
+  margin-right: 15px;
+  font-size: 12px;
+  white-space: nowrap;
+}
+.module-header .details .module-info-basic .module-info-header .module-links {
+  display: inline-block;
+  font-size: 12px;
+}
+.module-header .details .module-info-basic .module-info-header .module-links li {
+  display: inline-block;
+  margin-bottom: 0;
+  margin-right: 15px;
+}
+.module-header .details .module-info-basic > div {
+  padding-bottom: 0.35em;
+}
+.module-header .details .module-info-basic ul {
+  margin: 0;
+  list-style-type: none;
+}
+.module-header .details .module-info-basic ul.release-os-compat li {
+  display: inline;
+  margin-right: 5px;
+}
+.module-header .details .module-info-basic ul.release-os-compat span[data-releases] {
+  border-bottom: 1px dotted;
+  cursor: default;
+}
+.module-header .details .module-info-basic .module-info-summary {
+  margin-bottom: 1em;
+}
+.module-header .details .module-info-basic .module-info-tags {
+  font-size: 0.85em;
+  margin-top: 1.75em;
+  width: 85%;
+}
+.module-header .details .module-info-basic .compatibility {
+  background-color: #ffffff;
+  padding: 0.5em;
+  margin-top: 0.25em;
+}
+.module-header .details .module-info-basic .compatibility ul.bullets {
+  list-style-type: disc;
+  margin-left: 1.5em;
+}
+.module-header .details .module-info-basic .compatibility ul.bullets li {
+  margin-bottom: 0;
+  padding-bottom: 0;
+}
+.module-header .download-info {
+  padding-top: 1em;
+  margin-top: 1em;
+  border-top: 1px #ccc solid;
+}
+.module-header .download-info > div {
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+.module-header .download-info .installation {
+  float: left;
+  width: 75%;
+}
+.module-header .download-info .installation small {
+  display: block;
+  float: left;
+  width: 50%;
+  font-size: 11px;
+}
+.module-header .download-info .installation small.download-link {
+  text-align: right;
+  font-weight: bold;
+}
+.module-header .download-info .download-counts {
+  float: left;
+  width: 25%;
+  padding-top: 36px;
+  padding-right: 5%;
+  text-align: right;
+  font-size: 1.1em;
+  line-height: 1em;
+  font-weight: bold;
+}
+.module-header .download-info .download-counts small {
+  font-size: 11px;
+  font-weight: normal;
+  color: #6c6d6d;
+}
+.module-header .download-info .pe-only {
+  padding-left: 93px;
+}
+.module-header .download-info .pe-only input[type=text] {
+  box-sizing: border-box;
+  max-width: none;
+  width: 100%;
+}
+.module-header .download-info .pe-only p {
+  margin-bottom: 0.5em;
+}
+.module-header-sidebar {
+  float: right;
+  width: 22%;
+}
+.module-meta-info ul.release-dependencies {
+  margin-top: 1.25em;
+}
+#module-release-header {
+  overflow: auto;
+  margin-top: 20px;
+  margin-bottom: 10px;
+}
+#module-release-header #module-release-title {
+  float: left;
+  font-size: 1.2em;
+}
+#module-release-header #module-release-switcher {
+  float: right;
+  padding-top: 3px;
+  text-align: right;
+  font-size: 13px;
+}
+#module-release-header #module-release-switcher label {
+  display: inline-block;
+  font-weight: normal;
+}
+#module-release-header #module-release-switcher a {
+  display: inline-block;
+  margin-left: 6px;
+  padding: 3px 9px;
+  min-width: 60px;
+  border-radius: 4px;
+  background-color: #f4f4f4;
+  text-align: center;
+}
 ul, ol, dl {
   margin-bottom: 1.5em;
   margin-left: 0;
@@ -249,6 +457,11 @@ li.private {
   background-repeat: no-repeat;
   background-position: right top;
 }
+section.private {
+  background-image: url("/img/endorsement-private.png");
+  background-repeat: no-repeat;
+  background-position: right top;
+}
 p {
   margin: 0;
 }
@@ -277,3 +490,25 @@ a.module-link {
   color: #0095dd;
   font-size: 0.9em;
 }
+.installation input.paste-code {
+  display: block;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  margin-top: 0.5em;
+  margin-bottom: 3px;
+  width: 100%;
+  max-width: none;
+  padding: 0.75em;
+  border: 0;
+  background: #e5e5e5;
+  color: #5d5e59;
+  font-family: Monaco, "Liberation Mono", Courier, monospace;
+}
+pre {
+  border-radius: .25em;
+  background: #f5f2f0;
+  border: 1px solid #DDD;
+  padding: .5em 1em;
+  overflow: auto;
+  display: block;
+}

lib/puppet_forge_server/app/views/layout.haml

@@ -61,4 +61,4 @@
       .side-width.clearfix
         = yield
     %script{ :src => 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js' }
-    %script{ :src => 'js/internal.js' }
+    %script{ :src => 'js/internal.js' }

lib/puppet_forge_server/app/views/module.haml

@@ -0,0 +1,70 @@
+-# -*- encoding: utf-8 -*-
+-#
+-# Copyright 2015 North Development AB
+-#
+-# Licensed under the Apache License, Version 2.0 (the "License");
+-# you may not use this file except in compliance with the License.
+-# You may obtain a copy of the License at
+-#
+-# http://www.apache.org/licenses/LICENSE-2.0
+-#
+-# Unless required by applicable law or agreed to in writing, software
+-# distributed under the License is distributed on an "AS IS" BASIS,
+-# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+-# See the License for the specific language governing permissions and
+-# limitations under the License.
+
+- if !module_metadata.has_key? 'metadata'
+  %section{:id => 'content'}
+    %div{:class => 'site-width clearfix'}
+      %section{:id => 'body', :class => ' '}
+        No such module
+- else
+  %section{:id => 'content'}
+    %div{:class => 'site-width clearfix'}
+      %section{:id => 'body', :class => ' '}
+        %div{:class => 'module-header-container clearfix'}
+          %section{:class => module_metadata['private'] ? 'module-header private' : 'module-header'}
+            %section{:class => 'details clearfix'}
+              %div{:class => 'module-info-basic'}
+                %div{:class => 'module-info-header'}
+                  %h2
+                    %span{:class => 'namespace'}= module_metadata['metadata']['name']
+                  %div{:class => 'module-info-author'}= "by: #{module_metadata['metadata']['author']}"
+                  %ul{:class => 'module-links'}
+                    %li
+                      %a{:href => module_metadata['metadata']['homepage_url']}= 'Project URL'
+                    %li
+                      %a{:href => module_metadata['metadata']['issues_url']}= 'Report issues'
+                %div{:class => 'module-info-summary'}= module_metadata['metadata']['summary']
+            %div{:class => 'download-info clearfix'}
+              %div{:class => 'installation'}
+                %div{:class => 'pmt-option clearfix'}
+                  %strong= 'Use this command to install the latest compatible version:'
+                  %input{:type => 'text', :class => 'paste-code', :value => "puppet module install --module_repository=#{base_url} #{module_metadata['metadata']['name']}", :onclick => 'this.select()'}
+            %div{:class => 'module-meta-info clearfix'}
+              %h3= 'Module dependencies'
+              %ul.release-dependencies
+                - module_metadata['metadata']['dependencies'].each do |dep|
+                  %li
+                    %a{:href => "/module?name=#{dep['name']}"}= dep['name']
+                    = "(#{dep['version_requirement']})"
+        %section{:id => 'module-release-info'}
+          %div
+            %div{:id => 'module-release-header'}
+              %div{:id => 'module-release-title'}
+                Version
+                %strong= module_metadata['metadata']['version']
+              %div{:id => 'module-release-switcher'}
+                %label= 'Select another release: '
+                %select{:id => 'module-release-selector', :onchange => "location = this.options[this.selectedIndex].value;"}
+                  - releases.each do |release|
+                    %option{:value => "/module?name=#{module_metadata['metadata']['name']}&version=#{release['version']}", :selected => module_metadata['metadata']['version'] == release['version']}= release['version']
+                %a{:class => 'module-release-download', :href => module_metadata['file_uri'], :title => 'Download module'}= 'Download'
+            %div{:id => 'release-info-tabs', :class => 'module-meta-info'}
+              %div{:class => 'tabbed content'}
+                %div
+                  %div
+                    %section{:class => 'markdown'}
+                      :preserve
+                        #{readme_markdown}

lib/puppet_forge_server/app/views/modules.haml

@@ -20,7 +20,7 @@
     - modules.each do |element|
       %li{:class => element['private'] ? 'clearfix private' : 'clearfix'}
         .col
-          %h3= "#{element['owner']['username']}/#{element['name']}"
+          %a{:class => "h3", :href => "/module?name=#{element['current_release']['metadata']['name']}" }= "#{element['owner']['username']}/#{element['name']}"
           %p= element['current_release']['metadata']['summary']
           %span.release-info= "Version #{element['current_release']['metadata']['version']}"
           - if element['current_release']['metadata']['issues_url']