Add contents list for section pages

content/about-hugo/_index.md

@@ -2,9 +2,9 @@
 title: Introduction to Hugo
 linktitle: Introduction to Hugo
 description: Hugo's features, roadmap, and license, as well as the motivation behind creating Hugo.
-date: 2016-02-01
-publishdate: 2016-02-01
-lastmod: 2016-02-01
+date: 2017-02-01
+publishdate: 2017-02-01
+lastmod: 2017-02-01
 layout: single
 weight: 01
 draft: false

content/content-management/_index.md

@@ -1,7 +1,7 @@
 ---
-title: "Content Management: Overview"
-linktitle: "Content Management: Overview"
-description: Content organization, summaries, archetypes, front matter, and supported formats.
+title: "Content Management: Introduction"
+linktitle: "Content Management: Introduction"
+description: An introduction to how Hugo expects you to organize your content.
 date: 2017-02-01
 publishdate: 2017-02-01
 lastmod: 2017-02-01

content/content-management/archetypes.md

@@ -14,7 +14,7 @@ aliases: []
 notes:
 ---
 
-**Archetypes** are content files in the [archetypes directory][] of your project that contain pre-configured [front matter][] for your website's [content types][]. Archetypes facilitate consistent metadata across your website content and allow content authors to quickly generate instances of a content type via the `hugo new` command.
+**Archetypes** are content files in the [archetypes directory][] of your project that contain preconfigured [front matter][] for your website's [content types][]. Archetypes facilitate consistent metadata across your website content and allow content authors to quickly generate instances of a content type via the `hugo new` command.
 
 Hugo's generator assumes your working directory is the content folder at the root of your project. Hugo is able to infer the appropriate archetype by assuming the content type from the content section passed to the CLI command:
 

content/content-management/content-sections.md

@@ -19,26 +19,27 @@ Hugo believes that you organize your content with a purpose. The same structure
 
 Following this pattern, Hugo uses the top level of your content organization as the **content section**.
 
-The [example site][] used throughout the Hugo docs includes three sections: "authors," "events," and "posts":
+The [example site][] used throughout the Hugo docs includes three sections: "authors," "events," and "posts". The following illustrates both the source organization and the default URL structure for the rendered files:
 
 ```bash
-./content
-    |—–authors
-        |––_index.md
-        |––jon-doe.md
-        |––jane-doe.md
-    |––events
-        |––_index.md
-        |––event-1.md
-        |––event-2.md
-        |––event-3.md
-    |––posts
-        |--_index.md
-        |––post-1.md
-        |––post-2.md
-        |––post-3.md
-        |––post-4.md
-        |––post-5.md
+.
+└── content
+    ├── authors
+    |   ├── _index.md     // <- example.com/authors/
+    |   ├── john-doe.md   // <- example.com/authors/john-doe/
+    |   └── jane-doe.md   // <- example.com/authors/jane-doe/
+    └── events
+    |   ├── _index.md     // <- example.com/events/
+    |   ├── event-1.md    // <- example.com/events/event-1/
+    |   ├── event-2.md    // <- example.com/events/event-2/
+    |   └── event-3.md    // <- example.com/events/event-3/
+    └── posts
+    |   ├── _index.md     // <- example.com/posts/
+    |   ├── event-1.md    // <- example.com/posts/event-1/
+    |   ├── event-2.md    // <- example.com/posts/event-2/
+    |   ├── event-3.md    // <- example.com/posts/event-3/
+    |   ├── event-4.md    // <- example.com/posts/event-4/
+    |   └── event-5.md    // <- example.com/posts/event-5/
 ```
 
 ## Content Section Lists
@@ -48,14 +49,15 @@ Hugo will automatically create pages for each section root that list all of the
 As of Hugo v0.18, section pages can also have a content file and front matter. These section content files must be placed in their corresponding section folder and named `_index.md` in order for Hugo to correctly render the front matter and content.
 
 {{% warning "`index.md` vs `_index.md`" %}}
-Hugo themes developed before v0.18 often used an `index.md` in a content section as a workaround to emulate the behavior of `_index.md`. The workaround works...*sometimes*. The order of page rendering can be unpredictable in Hugo. What works now may fail to render appropriately once you begin adding more content to your site. It is *strongly advised* to use the *preferred* content section organization and `_index.md`.
+Hugo themes developed before v0.18 often used an `index.md` in a content section as a hack to emulate the behavior of `_index.md`. The hack may work...*sometimes*. The order of page rendering can be unpredictable in Hugo. What works now may fail to render appropriately once you begin adding more content to your site. It is *strongly advised* to use `_index.md` the *preferred* content section index page. **Note:** `_index.md`'s layout is a [list template](/templates/list-and-section-templates/).
 {{% /warning %}}
 
-## Content Section and Content Types
+## Content Section vs Content Types
 
-By default, everything created within a section will use the content type that matches the section name. For example, Hugo will assume that `posts/post-1.md` has a `posts` content type and if using an [archetype][] will generate front matter according to `archetypes/posts.md`.
+By default, everything created within a section will use the [content type][] that matches the section name. For example, Hugo will assume that `posts/post-1.md` has a `posts` content type and if using an [archetype][] will generate front matter according to `archetypes/posts.md`.
 
 [archetype]: /content-management/archetypes/
+[content type]: /content-management/content-types/
 [example site]: /getting-started/
 [directory structure]: /project-organization/directory-structure/
 

content/content-management/content-types.md

@@ -14,13 +14,58 @@ aliases: [/content/types]
 notes:
 ---
 
-Hugo provides full support for content types. A content type can have a unique set of metadata (i.e., [front matter][]) or customized [template][] and can be created by the `hugo new` command via content [archetypes][].
+Hugo provides full support for sites with multiple content types. A **content type** can have a unique set of metadata (i.e., [front matter][]) or customized [template][] and can be created by the `hugo new` command via content [archetypes][].
+
+A good example of when multiple types are needed is to look at [Tumblr][]. A piece of "content" could be a photo, quote or post, each with different meta data and rendered differently.
+
+## Assigning a content type
+
+Hugo assumes that your site will be organized into [sections](/content/sections/)
+and each section will use the corresponding type. If you are taking advantage of
+this, then each new piece of content you place into a section will automatically
+inherit the type.
+
+Alternatively, you can set the type in the meta data under the key "`type`".
 
 
+## Creating New Content of a Specific Type
+
+You can manually add files to your content directories, but Hugo has the ability to create and populate a new content file with preconfigured front matter via [archetypes][].
 
 
+## Defining a content type
 
+Creating a new content type is easy in Hugo. You simply provide the templates and archetype
+that the new type will use. You only need to define the templates, archetypes and/or views
+unique to that content type. Hugo will fall back to using the general templates and default archetype
+whenever a specific file is not present.
+
+*Remember, all of the following are optional:*
+
+### Create Type Directory
+
+Create a directory with the name of the type in `/layouts`. Type is always singular.  *E.g. `/layouts/post`*.
+
+### Create single template
+
+Create a file called `single.html` inside your directory. *E.g. `/layouts/post/single.html`*.
+
+### Create list template
+
+Create a file called `post.html` inside the section lists template directory, `/layouts/section`. *E.g. `/layouts/section/post.html`*.
+
+### Create views
+
+Many sites support rendering content in a few different ways, for instance, a single page view and a summary view to be used when displaying a [list of contents on a single page][]. Hugo makes no assumptions about how you want to display your content and will support as many different views of a content type as your site requires. All that is required for these additional views is that a template exists in each `/layouts/TYPE` directory with the same name.
+
+### Create a corresponding archetype
+
+Create a file called <code><em>type</em>.md</code> in the `/archetypes` directory. *E.g. `/archetypes/post.md`*.
+
+More details about archetypes can be found at the [archetypes docs](/content/archetypes/).
 
 [archetypes]: /content-management/archetypes/
 [front matter]: /content-management/front-matter/
-[template]: /templates/
+[list of contents on a single page]: /templates/list-and-section-templates/
+[template]: /templates/
+[Tumblr]: https://www.tumblr.com/

content/templates/list-and-section-templates.md

@@ -1,6 +1,6 @@
 ---
-title: List and Section Page Templates
-linktitle: List and Section Page Templates
+title: List and Section Templates
+linktitle: List and Section Templates
 description:
 date: 2017-02-01
 publishdate: 2017-02-01

content/templates/view-templates.md

@@ -1,5 +1,5 @@
 ---
-title: Template Views
+title: View Templates
 linktitle:
 description:
 date: 2017-02-01

themes/hugodocs/layouts/_default/section.html

@@ -9,6 +9,7 @@
 	</header>
 	<div class="body-copy">
 	{{.Content}}
+	{{partial "contents-list.html" .}}
 	</div>
 	{{partial "content-footer.html" . }}
 	{{partial "table-of-contents.html" . }}

themes/hugodocs/layouts/_default/taxonomy.html

@@ -4,18 +4,7 @@
 		<h1 class="page-title"><a href="{{.Site.BaseURL}}{{.Data.Plural}}"><i class="icon-{{.Data.Plural}}"></i>{{.Data.Plural}}:</a>&nbsp;{{ .Title }}</h1>
 	</header>
 	<div class="body-copy taxonomies">
-		{{range .Data.Pages}}
-		<article class="taxonomy">
-			<header>
-				<a href="{{.Permalink}}"><h2>{{.Title}}</h2></a>
-				<div class="list-header-image-wrapper">
-					<img src="{{.Site.BaseURL}}images/{{.Section}}.svg" alt="">
-					<!-- <span>{{replace .Section "-" " " | title}}</span> -->
-				</div>
-			</header>
-			<p>{{.Description}}</p>
-		</article>
-		{{end}}
+		{{partial "contents-list.html" . }}
 	</div>
 </main>
 {{ end }}

themes/hugodocs/layouts/partials/content-footer.html

@@ -1,13 +1,14 @@
 <footer id="content-footer">
+{{$section := replace (replace .Section "-" " " | title) "And" "and"}}
 {{ if .NextInSection }}
-<a href="{{.NextInSection.Permalink}}" data-tooltip="{{.Section}}: {{.NextInSection.Title}}" class="tooltip prev-and-next-link prev-page">
+<a href="{{.NextInSection.Permalink}}" data-tooltip="{{$section}}: {{.NextInSection.Title}}" class="tooltip prev-and-next-link prev-page">
 	<div>
 		<span><i class="fa fa-chevron-left"></i> Previous</span>
 	</div>
 </a>
 {{ else if eq .Kind "page" }}
 	{{ with .Site.GetPage "section" .Section }}
-	<a href="{{.Permalink}}" data-tooltip="{{.Section}}: {{.Title}}" class="tooltip prev-and-next-link prev-page">
+	<a href="{{.Permalink}}" data-tooltip="{{$section}}: {{.Title}}" class="tooltip prev-and-next-link prev-page">
 		<div>
 			<span><i class="fa fa-chevron-left"></i> Previous</span>
 		</div>
@@ -16,7 +17,7 @@
 {{ end }}
 <span class="last-modified">Last Updated: {{with .Lastmod}}{{.Format "2006-01-02"}}{{else}}{{.PublishDate.Format "2006-01-02"}}{{end}}</span>
 {{ with .PrevInSection }}
-<a href="{{.Permalink}}" data-tooltip="{{.Section}}: {{.Title}}" class="tooltip prev-and-next-link next-page">
+<a href="{{.Permalink}}" data-tooltip="{{$section}}: {{.Title}}" class="tooltip prev-and-next-link next-page">
 	<div>
 		<span>Next <i class="fa fa-chevron-right"></i></span>
 	</div>
@@ -24,7 +25,7 @@
 {{ end }}
 {{if eq .Kind "section"}}
 {{ range first 1 .Data.Pages }}
-<a href="{{.Permalink}}" data-tooltip="{{.Section}}: {{.Title}}" class="tooltip prev-and-next-link next-page">
+<a href="{{.Permalink}}" data-tooltip="{{$section}}: {{.Title}}" class="tooltip prev-and-next-link next-page">
 	<div>
 		<span>Next <i class="fa fa-chevron-right"></i></span>
 	</div>

themes/hugodocs/layouts/partials/contents-list.html

@@ -0,0 +1,17 @@
+{{$kind := .Kind}}
+{{if eq $kind "section"}}
+<h2 class="section-heading">In {{replace (replace .Section "-" " " | title) "And" "and"}}:</h2>
+{{end}}
+{{range .Data.Pages}}
+<article class="contents-list {{$kind}}">
+	<header>
+		<a href="{{.Permalink}}"><h3>{{.Title}}</h3></a>
+		{{if eq $kind "taxonomy"}}
+		<div class="contents-list-image-wrapper">
+			<img src="{{.Site.BaseURL}}images/{{.Section}}.svg" alt="">
+		</div>
+		{{end}}
+	</header>
+	<p>{{.Description}}</p>
+</article>
+{{end}}

themes/hugodocs/layouts/partials/site-navigation.html

@@ -12,8 +12,9 @@
 		{{$.Scratch.Set "url" .URL }}
 		{{range $item, $params := sort ($.Site.Data.sitenavigation) "order"}}
 		{{$section := $params.url}}
-		<li class="top-menu-item"><a class="top-menu-item-link {{$params.haschildren}}{{if eq ($.Scratch.Get "currentsection") $section }} active-section{{end}}" href="{{if $params.haschildren}}#{{else}}{{$base}}{{$params.url}}{{end}}">{{$params.title}}</a>
-		{{if $params.haschildren}}&raquo;
+		<li class="top-menu-item"><a class="top-menu-item-link {{$params.haschildren}}{{if eq ($.Scratch.Get "currentsection") $section }} active-section{{end}}" href="{{if $params.haschildren}}#{{else}}{{$base}}{{$params.url}}{{end}}">{{$params.title}}
+		{{if $params.haschildren}}
+		<i class="fa fa-angle-double-right" aria-hidden="true"></i></a>
 			<ul class="submenu">
 				{{- if eq $params.sortsubpagesby "title"}}
 					{{range (where $.Site.Pages "Section" $section).ByTitle}}
@@ -25,6 +26,8 @@
 					{{end}}
 				{{- end }}
 			</ul>
+		{{else}}
+		</a>
 		{{end}}
 		</li>
 		{{end}}

themes/hugodocs/pipeline/js/scripts/add-icons-to-external-links-and-pdfs-anchors.js

@@ -1,6 +1,6 @@
 $('document').ready(function() {
   $('.body-copy a[href$=".pdf"]').append('<i class="icon-pdf"></i>');
-  $('.body-copy > h2,.body-copy > h3').each(function() {
+  $('.body-copy > h2:not(.section-heading),.body-copy > h3').each(function() {
     var id = $(this).attr('id'),
       baseurl = window.location.origin,
       path = window.location.pathname,

themes/hugodocs/pipeline/js/scripts/highlight.pack.js

@@ -350,7 +350,7 @@ hljs.registerLanguage("bash", function(e) {
   var t = { cN: "variable", v: [{ b: /\$[\w\d#@][\w\d_]*/ }, { b: /\$\{(.*?)}/ }] },
     s = { cN: "string", b: /"/, e: /"/, c: [e.BE, t, { cN: "variable", b: /\$\(/, e: /\)/, c: [e.BE] }] },
     a = { cN: "string", b: /'/, e: /'/ };
-  return { aliases: ["sh", "zsh"], l: /-?[a-z\._]+/, k: { keyword: "hugo if then else elif fi for while in do done case esac function", literal: "true false", built_in: "break cd continue eval exec exit export getopts hash pwd readonly new return shift test times trap umask unset alias bind builtin caller command declare echo enable help let local logout mapfile printf read readarray source type typeset ulimit unalias set shopt autoload bg bindkey bye cap chdir clone comparguments compcall compctl compdescribe compfiles compgroups compquote comptags comptry compvalues dirs disable disown echotc echoti emulate fc fg float functions getcap getln history integer jobs kill limit log noglob popd print pushd pushln rehash sched setcap setopt stat suspend ttyctl unfunction unhash unlimit unsetopt vared wait whence where which zcompile zformat zftp zle zmodload zparseopts zprof zpty zregexparse zsocket zstyle ztcp", _: "-ne -eq -lt -gt -f -d -e -s -l -a" }, c: [{ cN: "meta", b: /^#![^\n]+sh\s*$/, r: 10 }, { cN: "function", b: /\w[\w\d_]*\s*\(\s*\)\s*\{/, rB: !0, c: [e.inherit(e.TM, { b: /\w[\w\d_]*/ })], r: 0 }, e.HCM, s, a, t] }
+  return { aliases: ["sh", "zsh"], l: /-?[a-z\._]+/, k: { keyword: "hugo if \| then else elif fi for while in do done case esac function yoursite.com", literal: "true false posts events authors", built_in: "break cd continue eval exec exit export getopts hash pwd readonly new return shift test times trap umask unset alias bind builtin caller command declare echo enable help let local logout mapfile printf read readarray source type typeset ulimit unalias set shopt autoload bg bindkey bye cap chdir clone comparguments compcall compctl compdescribe compfiles compgroups compquote comptags comptry compvalues dirs disable disown echotc echoti emulate fc fg float functions getcap getln history integer jobs kill limit log noglob popd print pushd pushln rehash sched setcap setopt stat suspend ttyctl unfunction unhash unlimit unsetopt vared wait whence where which yoursite zcompile zformat zftp zle zmodload zparseopts zprof zpty zregexparse zsocket zstyle ztcp", _: "-ne -eq -lt -gt -f -d -e -s -l -a" }, c: [{ cN: "meta", b: /^#![^\n]+sh\s*$/, r: 10 }, { cN: "function", b: /\w[\w\d_]*\s*\(\s*\)\s*\{/, rB: !0, c: [e.inherit(e.TM, { b: /\w[\w\d_]*/ })], r: 0 }, e.HCM, s, a, t] }
 });
 hljs.registerLanguage("http", function(e) {
   var t = "HTTP/[0-9\\.]+";

themes/hugodocs/pipeline/scss/_variables.scss

@@ -67,7 +67,8 @@ $site-navigation-width: 280px;
 $content-max-width: 35em;
 $site-navigation-bg-color:$hugo-gray-ultra-light;
 $breadcrumb-navigation-bg-color:$site-navigation-bg-color;
-$breadcrumb-navigation-bg-color-active:$hugo-pink-light;
+$breadcrumb-navigation-bg-color-active:$hugo-blue-light;
+$breadcrumb-navigation-text-color-active:$hugo-white;
 
 //Header
 $site-header-height:50px;

themes/hugodocs/pipeline/scss/components/_anchors.scss

@@ -27,7 +27,7 @@ a.tooltip {
     white-space: nowrap;
     text-transform: none;
     font-weight: normal;
-    border-radius:.25em;
+    border-radius: .25em;
   }
   &.edit-link:hover {
     &::after {
@@ -54,23 +54,6 @@ a.tooltip {
 
 /* '' */
 
-//heading links are added on the client (see pipeline/js/scripts/add-icons-to-external-links-and-pdfs-anchors.js)
-a.heading-link {
-  color: lighten($base-font-color, 50%);
-  font-size: .8em;
-  position: relative;
-  display: inline;
-  top: -.1em;
-  right: 0px;
-  &:before,
-  &:after {
-    display: none;
-  }
-  &:hover {
-    color: $default-anchor-underline-color;
-  }
-}
-
 .body-copy {
   a {
     text-decoration: none;
@@ -110,4 +93,20 @@ a.heading-link {
       border-bottom: 1px solid $default-anchor-underline-color;
     }
   }
+  //heading links are added on the client (see pipeline/js/scripts/add-icons-to-external-links-and-pdfs-anchors.js)
+  a.heading-link {
+    color: lighten($base-font-color, 50%);
+    font-size: .8em;
+    position: relative;
+    display: inline;
+    top: -.1em;
+    right: 0px;
+    &:before,
+    &:after {
+      display: none;
+    }
+    &:hover {
+      color: $default-anchor-underline-color;
+    }
+  }
 }

themes/hugodocs/pipeline/scss/components/_breadcrumb.scss

@@ -18,6 +18,7 @@
       font-size: 14px;
       img {
         @include size(20px);
+        filter:grayscale(100%);
       }
       span {
         margin-left:4px;
@@ -76,8 +77,12 @@
         border-color: transparent;
         border-left-color: $hugo-gray-ultra-light;
       }
-      &:hover,&:active {
+      &:hover {
         background-color: $breadcrumb-navigation-bg-color-active;
+        color:$breadcrumb-navigation-text-color-active;
+        img {
+          filter:grayscale(0%);
+        }
         &:before {
           border-color: $breadcrumb-navigation-bg-color-active;
           border-left-color: transparent;

themes/hugodocs/pipeline/scss/components/_content-footer.scss

@@ -2,11 +2,10 @@
   height: 40px;
   line-height: 40px;
   vertical-align: middle;
-  display:flex;
-  flex-direction:row;
-  align-items:flex-start;
-  border-top:2px solid $base-font-color;
-  margin-bottom:3em;
+  display:block;
+  border-top: 2px solid $base-font-color;
+  margin-bottom: 3em;
+  width:100%;
   .prev-and-next-link {
     // background-color: orange;
     width: 100%;
@@ -25,10 +24,13 @@
       }
     }
     &.prev-page {
-      text-align:left;
+      text-align: left;
+      float:left;
     }
     &.next-page {
-      text-align:right;
+      text-align: right;
+      float: right;
+      margin-right: 0px;
     }
   }
 }
@@ -40,6 +42,8 @@
   width: 200px;
   max-width: 200px;
   font-size: .8em;
+  position: absolute;
+  left: calc(50% - 100px);
   font-weight: normal;
   text-align: center;
 }

themes/hugodocs/pipeline/scss/components/_taxonomy-lists.scss

@@ -1,54 +1,59 @@
-.taxonomies {
-  .taxonomy {
-    box-shadow: none;
-    background-color: transparent;
+.contents-list {
+  box-shadow: none;
+  background-color: transparent;
+  color: $base-font-color;
+  margin-bottom: 1em;
+  position: relative;
+  a {
+    width: 100%;
     color: $base-font-color;
-    margin-bottom: 1em;
-    position: relative;
-    a {
-      width:100%;
-      color:$base-font-color;
-      &:before,
-      &:after,
-      &:hover {
-        background-color: transparent;
-        border: none;
-        color: $base-font-color;
-      }
+    &:before,
+    &:after,
+    &:hover {
+      background-color: transparent;
+      border: none;
+      color: $base-font-color;
     }
-    h2 {
+  }
+  h3 {
+    padding-bottom: 2px;
+  }
+  &.taxonomy {
+    h3 {
       padding-bottom: 2px;
       border-bottom: 2px solid $base-font-color;
     }
-    p {
-      margin-bottom: 0px;
-    }
   }
-  .taxonomy-term {
-    font-size: 1.3em;
-    display: inline-block;
-    width: auto;
-    clear: both;
-  }
-  .list-header-image-wrapper {
-    max-width: 30px;
-    position: absolute;
-    top: 4px;
-    right: 0px;
-    img {
-      max-width: 30px;
-      min-width: 30px;
-      margin-bottom: 0px;
-      margin-left: auto;
-      margin-right: auto;
-      display: block;
-    }
-    span {
-      font-size: .7em;
-      display: block;
-      margin-top: 0px;
-      text-align: center;
-      line-height: 1.2;
-    }
+  p {
+    margin-bottom: 0px;
+  }
+}
+
+.taxonomy-term {
+  font-size: 1.3em;
+  display: inline-block;
+  width: auto;
+  clear: both;
+}
+
+.contents-list-image-wrapper {
+  max-width: 30px;
+  position: absolute;
+  top: 0px;
+  right: 0px;
+  img {
+    max-width: 1.5em;
+    min-width: 1.5em;
+    margin-bottom: 0px;
+    margin-left: auto;
+    margin-right: auto;
+    display: block;
+  }
+  span {
+    font-size: .7em;
+    display: block;
+    margin-top: 0px;
+    text-align: center;
+    line-height: 1.2;
   }
 }

themes/hugodocs/pipeline/scss/layout/_site-navigation.scss

@@ -45,7 +45,7 @@
     a.top-menu-item-link {
       font-size: 16px;
       &.active-section {
-        color: $active-color;
+        color: $hugo-pink;
         // border-bottom: 1px solid $active-color;
         font-weight: 700;
         + ul.submenu {