Update documentation for single page website layout

COMMUNITY-FEATURES.md

@@ -19,3 +19,7 @@ eg:
 - **Portfolio** (https://github.com/Louisload/hugo-theme-terminal-portfolio)
   - Allows you to create a portfolio page (or several). Supports icons and subsections.
   - Luís Rodrigues Alves (Louisload), a game dev and musician.
+
+- **Single Page Website** (https://github.com/justinnuwin/hugo-theme-terminal)
+  - Allows the theme to natively support a single-page-website layout where the navigation menu links correspond to sections on the homepage
+  - Justin Nguyen, a software developer working on cool projects like satellites, IoT, and edge-ML

README.md

@@ -145,6 +145,29 @@ paginate = 5
   # it's set to `true` by default
   # oneHeadingSize = false
 
+  # Single Page Sites have the links in their navigation menu point to sections on the
+  # main-single page. If `singlePageSite` is enabled the following will occur:
+  # - Sections will appear on the homepage corresponding to nav menu items with a url
+  #   beginning with "/#". These sections draw their content from the homepage content
+  #   type directory (content/homepage/<somesection>.md).
+  # - Nav menu items not beginning with "/#" will be also be rendered as sections on the
+  #   homepage either as paginated lists or also as sections depending on what the url is
+  #   pointing to.
+  # - Nav menu items with their identifier in the `homepageNavEntriesDontRender` list will
+  #   not be rendered on the homepage.
+  # The homepage sections will be rendered in the order of the nav menu entries.
+
+  # enable the sngle page site mode described above
+  singlePageSite = false
+
+  # for collections rendered on the hompage, you may want them to be paginated at a different
+  # (usually smaller) count compared to the actual list pages
+  homepagePaginateCount = 2
+
+  # If there is a nav menu entry you dont want rendered on the homepage, add the identifier here
+  homepageNavEntriesDontRender = ["showcase"]
+
+
 [params.twitter]
   # set Twitter handles for Twitter cards
   # see https://developer.twitter.com/en/docs/tweets/optimize-with-cards/guides/getting-started#card-and-content-attribution
@@ -169,6 +192,8 @@ paginate = 5
     [languages.en.params.logo]
       logoText = "Terminal"
       logoHomeLink = "/"
+      # If your logo text is long, you can have it split on a certain substring when the screen is narrow
+      # logoSplit = ""
 
     [languages.en.menu]
       [[languages.en.menu.main]]
@@ -189,6 +214,16 @@ to `config.toml` file in your Hugo root directory and change params fields. In c
 
 See the basic `post` file params supported by the theme — https://github.com/panr/hugo-theme-terminal/blob/master/archetypes/posts.md
 
+## Section archetype
+
+Similar to the `post` archetype, but only the title and cover parameters are used.
+
+A `layout` parameter is available which supports three values:
+
+- `2col-right`: 2 column layout where the cover image is displayed on the left and the front-matter on the right
+- `2col-left`: 2 column layout where the cover image is displayed on the right and the front-matter on the left
+- `default`: The default layout matching the post layout with the cover image appearing above the front-matter in a single column
+
 ## Add-ons
 
 - **Comments** — for adding comments to your blog posts please take a look at `layouts/partials/comments.html` https://github.com/panr/hugo-theme-terminal/blob/master/layouts/partials/comments.html.

USERS.md

@@ -47,6 +47,7 @@
 - https://markopolo123.github.io **Markopolo** (DevOps Engineer)
 - https://mcwertgaming.github.io **Damon Leven** (Student & Software Developer)
 - https://sethsimmons.me **Seth Simmons** (Information Security Engineer, Cryptocurrency Writer)
+- https://justinnuwin.com **Justin Nguyen** (Software Developer)
 
 <!--
  TEMPLATE:

archetypes/homepage-section.md

@@ -1,5 +1,5 @@
 +++
 title = "{{ replace .TranslationBaseName "-" " " | title }}"
 cover = ""
-layout = "post"     # Can be post (1 column), 2col-left, 2col-right
+layout = "default"
 +++

assets/css/section.css

@@ -21,10 +21,6 @@
         position: relative;
         margin: auto;
         
-        /* Vertical Align */
-        top: 50%;
-        transform: translateY(-50%);
-        
         /* Resize */
         display: block;
         max-height: 80em;
@@ -77,6 +73,13 @@
     
 }
 
+/* Shift section image down by half to be in the middle of the text column */
+.section-2col .section-cover {
+    /* Vertical Align */
+    top: 50%;
+    transform: translateY(-50%);
+}
+
 .section > .post {
     margin-top: 0;
     padding-top: 0;

exampleSite/config.toml

@@ -9,12 +9,8 @@ paginate = 10
   showMenuItems = 2
   fullWidthTheme = false
   centerTheme = false
-
+  singlePageSite = false
-  # singlePageSite moves pages from the main nav menu to sections on the homepage.
+  homepageNavEntriesDontRender = ["showcase"]   
-  # Only menu items with a url starting with "/#" will be displayed using the
-  # front matter defined in "homepage/". The standard collection is displayed for other menu items.
-  singlePageSite = true
-  homepagePaginateCount = 10    # If you want the homepage to paginate a different numebr of items
 
 [languages]
   [languages.en]
@@ -32,9 +28,9 @@ paginate = 10
 
     [languages.en.menu]
       [[languages.en.menu.main]]
-        identifier = "homepage-info"
+        identifier = "section"
         name = "Homepage Section"
-        url = "#/section"
+        url = "/#section"
       [[languages.en.menu.main]]
         identifier = "about"
         name = "About"

exampleSite/content/homepage/section.md

@@ -4,9 +4,9 @@ cover = "img/hello.jpg"
 layout = "2col-right"
 +++
 
-**Hi there!** This is a section dedicated for a homepage.
+This is a section dedicated for a single-page-site homepage.
 There are 3 layouts supported for the homepage sections:
 
-- `2col-right` - The layout for this section with the cover image appearing on the left and the front-matter on the right
+- `2col-right` - Two column layout for this section with the cover image appearing on the left and the front-matter on the right
-- `2col-left`  - The layout for this section has the cover image on the right and front-matter on the left
+- `2col-left`  - Two column layout for this section has the cover image on the right and front-matter on the left
-- `default`    - The default layout for the section matching the post layout with the image appearing above the front-matter
+- `default`    - The default layout for the section matching the post layout with the cover image appearing above the front-matter in a single column

exampleSite/content/post/hello.md

@@ -2,7 +2,7 @@
 title = "Hello Friend"
 date = "2019-01-25"
 author = "Lorem Ipsum"
-cover = "hello.jpg"
+cover = "img/hello.jpg"
 description = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec interdum metus. Aenean rutrum ligula sodales ex auctor, sed tempus dui mollis. Curabitur ipsum dui, aliquet nec commodo at, tristique eget ante."
 +++
 

layouts/_default/index.html

@@ -20,34 +20,42 @@
 {{ if $.Site.Params.singlePageSite }}
   <div class="sections">
     {{ range .Site.Menus.main }}
-      <section id="{{ .Identifier }}" class="posts section">
+      {{ if not (in $.Site.Params.homepageNavEntriesDontRender .Identifier) }} 
-        {{ if eq (first 2 .URL) "/#" }}
+        <section id="{{ .Identifier }}" class="posts section">
-          <h1 class="section-header">{{ .Name }}<a href="#{{ .Identifier }}" class="hanchor" arialabel="Anchor">⌗</a></h1>
+          {{ if eq (first 2 .URL) "/#" }}
-          <div class="post">
+            <h1 class="section-header">{{ .Name }}<a href="#{{ .Identifier }}" class="hanchor" arialabel="Anchor">⌗</a></h1>
-            {{ $section := path.Join "homepage" .Identifier }}
+            <div class="post">
-            {{ with $.Site.GetPage $section }}
+              {{ $section := path.Join "homepage" .Identifier }}
-              {{ partial "section.html" . }}
+              {{ with $.Site.GetPage $section }}
-            {{ end }}
+                {{ partial "section.html" . }}
-          </div>
+              {{ end }}
-        {{ else }}
-          <h1 class="section-header">{{ .Name }}<a href="{{ .URL }}" class="hanchor" arialabel="Anchor">⌗</a></h1>
-          {{ $thisSectionsPages := where $PageContext.RegularPages "Type" .Identifier }}
-          {{ range first $.Site.Params.homepagePaginateCount $thisSectionsPages.ByDate.Reverse }}
-            {{ partial "collection.html" . }}
-          {{ end }}
-          <div class="pagination">
-            <div class="pagination__buttons">
-              <span class="button previous">
-                <a href="{{ .URL }}">
-                  <span class="button__icon">→</span>
-                  <span class="button__text">See more {{ .Name | pluralize }}</span>
-                </a>
-              </span>
             </div>
-          </div>
+          {{ else }}
-        {{ end }}
+            <h1 class="section-header">{{ .Name }}<a href="{{ .URL }}" class="hanchor" arialabel="Anchor">⌗</a></h1>
-      </section>
+            {{ $thisSectionsPages := where $PageContext.RegularPages "Type" .Identifier }}
-      <hr class="section-separator">
+            {{ if len $thisSectionsPages }}
+              {{ range first $.Site.Params.homepagePaginateCount $thisSectionsPages.ByDate.Reverse }}
+                {{ partial "collection.html" . }}
+              {{ end }}
+              <div class="pagination">
+                <div class="pagination__buttons">
+                  <span class="button previous">
+                    <a href="{{ .URL }}">
+                      <span class="button__icon">→</span>
+                      <span class="button__text">See more {{ .Name | pluralize }}</span>
+                    </a>
+                  </span>
+                </div>
+              </div>
+            {{ else }}
+              {{ with $.Site.GetPage .URL }}
+                {{ partial "section.html" . }}
+              {{ end }}
+            {{ end }}
+          {{ end }}
+        </section>
+        <hr class="section-separator">
+      {{ end }}
     {{ end }}
   </div>
 {{ else }}

layouts/partials/footer.html

@@ -7,8 +7,12 @@
       <div class="copyright">
         <span>© {{ now.Year }} Powered by <a href="http://gohugo.io">Hugo</a></span>
     {{ end }}
-    <span>::</span>
+    {{ if not $.Site.Params.singlePageSite }}
-    <span>Theme originally by <a href="https://twitter.com/panr">panr</a> and extended by <a href="https://github.com/justinnuwin/hugo-theme-terminal/">yours truly</a>.</span>
+        <span>:: Theme made by <a href="https://twitter.com/panr">panr</a></span>
+    {{ else }}
+        <span>::</span>
+        <span>Theme made by <a href="https://twitter.com/panr">panr</a> and single-page layout by <a href="https://justinnuwin.com">justinnuwin</a>.</span>
+    {{ end }}
       </div>
   </div>
 </footer>