Add archive page (#304) (#305)

Add archive page Co-authored-by: Teppo <[email protected]>
Lednerb · Dec 10, 2021 · 30fdae1 · 30fdae1
1 parent 77abc38
commit 30fdae1
Show file tree

Hide file tree

Showing 12 changed files with 110 additions and 7 deletions.
diff --git a/README.md b/README.md
@@ -29,8 +29,8 @@ Here's a live [demo site](https://lednerb.github.io/bilberry-hugo-theme) to see
       - [Manual Upload](#manual-upload)
       - [Automated Upload](#automated-upload)
   - [Keyboard Shortcuts](#keyboard-shortcuts)
-  - [Reposting an Article / Duplicated Content [SEO]](#reposting-an-article--duplicated-content-seo)
-  - [Overwrite the calculated reading time](#overwrite-the-calculated-reading-time)
+  - [Reposted Article/Duplicated Content](#reposted-articleduplicated-content)
+  - [Calculated Reading Rime](#calculated-reading-time)
   - [Summary Splits](#summary-splits)
     - [Automatic Summary Split](#automatic-summary-split)
     - [Manual Summary Split](#manual-summary-split)
@@ -53,10 +53,11 @@ Here's a live [demo site](https://lednerb.github.io/bilberry-hugo-theme) to see
   - [Raw HTML](#raw-html)
 - [Favicons](#favicons)
 - [Custom 404 Page](#custom-404-page)
+- [Archive Page](#archive-page)
 - [Custom Post Types](#custom-post-types)
 - [External Images](#external-images)
 - [Customizing Individual Posts](#customizing-individual-posts)
-- [Custom colors and fonts](#custom-colors-and-fonts)
+- [Custom Colors and Fonts](#custom-colors-and-fonts)
 - [CSS and JS modules](#css-and-js-modules)
   - [Add Cookie Disclaimer](#add-cookie-disclaimer)
 - [Translations](#translations)
@@ -454,6 +455,20 @@ Also, check out this [tutorial](https://www.kiroule.com/article/add-favicon-to-h
 ## Custom 404 Page
 To customize your 404 page, copy the `themes/bilberry-hugo-theme/layouts/404.html` file to your site's `layouts/404.html` and edit the file according to your needs, for example, change the message, icon class etc.
 
+## Archive Page
+The archive page will be available at `<site-base-url>/archive/` as soon as you copy the `themes/bilberry-hugo-theme/exampleSite/content/archive.md` file to `content` directory of your site. 
+By default, the published content is grouped by year. 
+To group the content by year and month, set the `archiveDateGrouping` parameter to the `2006-01` value.
+
+To display the archive link in the footer, set the `showArchive` parameter to `true`. 
+
+To add the archive link to the top navigation bar, create a new page with the following command:
+```shell
+hugo new page/archive.md
+```
+
+Then, in the newly created `content/page/archive.md` file, set the `link` front matter variable to the `/archive/` value and completely remove the `target` variable.
+
 
 ## Custom Post Types
 With Bilberry theme, you can create new post types easily. 
@@ -505,7 +520,7 @@ The `pinOnlyToFirstPage` parameter allows you to choose whether to display pinne
 Otherwise, your changes will be overwritten when you update the theme to the latest version.
 
 
-## Custom colors and fonts
+## Custom Colors and Fonts
 Bilberry uses SCSS for styling and NPM with [Laravel Mix](https://laravel-mix.com/) for the dependency management.
 
 To change any colors or fonts, you have to follow these steps:

diff --git a/assets/sass/_articles.scss b/assets/sass/_articles.scss
@@ -130,6 +130,37 @@ article {
             }
         }
 
+        .archive-list {
+            ul {
+                list-style: none;
+                margin-top: 1.25em;
+
+                li {
+                    border-bottom: 1px solid #eee;
+                    padding-right: 10px;
+                }
+
+                a {
+                    position: relative;
+                    left: 0;
+                    display: inline-block;
+                    transition: left 0.3s ease-in-out;
+                    color: $highlight-color;
+                    font-family: $content-font;
+                    font-style: normal;
+
+                    span {
+                        color: $meta-text-color;
+                    }
+
+                    &:hover {
+                        left: 10px;
+                        color: $base-color;
+                    }
+                }
+            }
+        }
+
         blockquote {
             background-color: #f6f6f6;
             font-family: $headline-font;

diff --git a/assets/sass/_footer.scss b/assets/sass/_footer.scss
@@ -90,6 +90,7 @@ footer {
 
                 margin-left: 0;
 
+                margin-bottom: 2em;
                 a {
                     text-transform: uppercase;
                     color: $highlight-color;
@@ -110,6 +111,12 @@ footer {
                 }
             }
 
+            .archive {
+                width: 100%;
+
+                margin-left: 0;
+            }
+
             strong {
                 display: block;
             }

diff --git a/exampleSite/config.toml b/exampleSite/config.toml
@@ -133,6 +133,12 @@ disqusShortname = ""
     # social media profile urls for the footer links
     showSocialMedia = true
 
+    # show an archive link in the footer
+    showArchive = false
+
+    # archive grouping: "2006" by year, "2006-01" by month
+    archiveDateGrouping = "2006-01"
+
     # define your links with FontAwesome 5 (only free icons are supported)
     # all icons https://fontawesome.com/icons?d=gallery&m=free
     # brand icons https://fontawesome.com/icons?d=gallery&s=brands&m=free

diff --git a/exampleSite/content/archive.md b/exampleSite/content/archive.md
@@ -0,0 +1,4 @@
+---
+title: "Archive page"
+type: archive
+---
diff --git a/i18n/de.toml b/i18n/de.toml
@@ -35,3 +35,5 @@ other = "Andere Sprachen"
 one = "1 Min. lesen"
 other = "{{.Count}} Min. lesen"
 
+[archive]
+other = "Archiv"
diff --git a/i18n/en.toml b/i18n/en.toml
@@ -40,3 +40,6 @@ other = "Table of Contents"
 
 [series]
 other = "Series"
+
+[archive]
+other = "Archive"
diff --git a/layouts/archive/single.html b/layouts/archive/single.html
@@ -0,0 +1,29 @@
+{{ define "main" }}
+<div class="content">
+    <div class="article-wrapper u-cf single">
+        <a class="bubble" href="{{ "/archive/" | relLangURL}}">
+            <i class="fa fa-fw fa-archive"></i>
+        </a>
+
+        <article class="article">
+            <div class="content">
+                <h3>{{ i18n "archive" }}</h3>
+                <hr>
+
+                <div class="archive-list">
+                    {{ range (where .Site.RegularPages "Type" "not in" (slice "page" "archive" "status" ) ).GroupByPublishDate (.Site.Params.archiveDateGrouping | default "2006-01") }}
+                    <h4>{{ .Key }}</h4>
+                    <ul>
+                        {{ range .Pages }}
+                        <li>
+                            <a href="{{ .Permalink }}">{{ .Title }} <span>({{ .PublishDate.Format (.Site.Params.DateFormat | default "2006-01-02") }})</span></a>
+                        </li>
+                        {{ end }}
+                    </ul>
+                    {{ end }}
+                </div>
+            </div>
+        </article>
+    </div>
+</div>
+{{ end }}
diff --git a/layouts/index.rss.xml b/layouts/index.rss.xml
@@ -12,7 +12,7 @@
     {{ with .OutputFormats.Get "RSS" }}
         {{ printf "<atom:link href=%q rel=\"self\" type=%q />" .Permalink .MediaType | safeHTML }}
     {{ end }}
-    {{ range (where .Site.RegularPages "Type" "!=" "page") }}
+    {{ range (where .Site.RegularPages "Type" "not in" (slice "page" "archive" )) }}
     <item>
       <title>{{ .Title }}</title>
       <link>{{ .Permalink }}</link>

diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html
@@ -54,6 +54,12 @@
                 {{ end }}
             </div>
             {{ end }}
+
+            {{ if .Site.Params.showArchive | default true }}
+            <div class="archive">
+                <a href="{{ "/archive/" | relLangURL }}"><strong>{{ i18n "archive" }}</strong></a>
+            </div>
+            {{ end }}
         </div>
     </div>
 </footer>

diff --git a/static/theme.css b/static/theme.css
diff --git a/static/theme.js b/static/theme.js