Merge pull request #11 from bigbrozer/features/next

Workshop 2023-09-10
bigbrozer · Sep 10, 2023 · fcb3d4e · fcb3d4e
2 parents 9e39199 + 3122a0d
commit fcb3d4e
Show file tree

Hide file tree

Showing 31 changed files with 2,104 additions and 7,639 deletions.
diff --git a/.editorconfig b/.editorconfig
@@ -16,3 +16,6 @@ indent_style = tab
 
 [*.{yaml,yml}]
 indent_size = 2
+
+[*.hbs]
+indent_style = tab
diff --git a/.github/workflows/ci.yaml b/.github/workflows/ci.yaml
@@ -13,10 +13,10 @@ jobs:
     steps:
       - uses: "actions/checkout@v3"
 
-      - name: "Use Node.js 20.x"
+      - name: "Use Node.js LTS"
         uses: "actions/setup-node@v3"
         with:
-          node-version: "20.x"
+          node-version: "18.17.x"
           cache: "npm"
 
       - name: "Install dependencies"

diff --git a/.github/workflows/release.yaml b/.github/workflows/release.yaml
@@ -29,10 +29,10 @@ jobs:
           git config user.name "${GITHUB_ACTOR}"
           git config user.email "${GITHUB_ACTOR}@users.noreply.github.com"
 
-      - name: "Use Node.js 20.x"
+      - name: "Use Node.js LTS"
         uses: "actions/setup-node@v3"
         with:
-          node-version: "20.x"
+          node-version: "18.17.x"
           cache: "npm"
 
       - name: "Install dependencies"

diff --git a/.tool-versions b/.tool-versions
@@ -0,0 +1 @@
+nodejs 18.17.1
diff --git a/404.hbs b/404.hbs
@@ -1,11 +1,13 @@
 {{! 404 Error page; this file renders a 4040.html page; the "create404page" flag must be defined and enabled in config.json file within the "renderer" section }}
 {{> head}}
 {{> navbar}}
+
 <main>
-   <h1>{{ translate 'error.404' }}</h1>
-   <p>{{ translate 'error.message' }}</p>
-      <a href="{{@website.url}}">
-         {{ translate 'error.button' }}
-      </a>
+	<h1>{{ translate 'error.404' }}</h1>
+	<p>{{ translate 'error.message' }}</p>
+	<a href="{{@website.url}}">
+		{{ translate 'error.button' }}
+	</a>
 </main>
+
 {{> footer}}
diff --git a/README.md b/README.md
@@ -9,6 +9,7 @@ Contents:
 * [Getting Started](#getting-started)
 * [Usage](#usage)
   * [Adding a portfolio image](#adding-a-portfolio-image)
+  * [Adding a post index page](#adding-a-post-index-page)
   * [Theme settings](#theme-settings)
 * [Acknowledgements](#acknowledgements)
 * [License](#license)
@@ -26,10 +27,16 @@ Once the theme is installed, read following sections to know how to use and conf
 
 ### Adding a portfolio image
 
-The portfolio (index page) is composed of posts with only a `title`, a `featured image` and ensure `Other options ➔ Post template ➔ Image for the portfolio` is set.
+The portfolio (on homepage) is composed of posts with only a `title`, a `featured image` and ensure `Other options ➔ Post template ➔ Image for the portfolio` is set.
 
 This combination will show the picture with a lightbox effect. The `title` is used as the image caption.
 
+### Adding a post index page
+
+To generate a post index page where you can list all available posts, create a new post with a title like **Post index**, hide it and tag it `post-index`.
+
+You will see a link appearing below the **Readings** section from homepage to access the post index page.
+
 ### Theme settings
 
 From Publii, navigate to `Theme ➔ Custom settings` to customize the theme behavior.

diff --git a/assets/images/about-me-image.png b/assets/images/about-me-image.png
diff --git a/assets/images/about-me-image.webp b/assets/images/about-me-image.webp
diff --git a/assets/images/about-me-image_orig.png b/assets/images/about-me-image_orig.png
diff --git a/assets/images/coeurseur-mini.png b/assets/images/coeurseur-mini.png
diff --git a/assets/scss/main.scss b/assets/scss/main.scss
@@ -2,7 +2,7 @@
 FONT FACES
 ====*/
 
-@import url(https://fonts.bunny.net/css?family=acme:400);
+@import url(https://fonts.bunny.net/css?family=acme:250);
 
 @font-face
 {
@@ -26,8 +26,9 @@ FONT FACES
 VARIABLE OVERRIDES
 ====*/
 
+$global-font-size: 18px !default;
 $global-background: #000000 !default;
-$global-color: rgba(0, 255, 53, 0.85) !default;
+$global-color: #f626eed9 !default;
 $global-emphasis-color: #f626eed9 !default;
 $global-font-family: "Acme", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
 $global-secondary-background: #691066d9 !default;
@@ -49,12 +50,13 @@ body, a {
     cursor: url(../images/coeurseur-mini.png), auto !important;
 }
 
-h1 {
-    font-family: "Basteleur Bold"
+h1.uk-article-title {
+    font-family: "Basteleur Moonlight";
+    color: rgba(0, 255, 53, 0.85) !important;
 }
 
 h2, h3 {
-    font-family: "Optiker-K"
+    font-family: "Basteleur Bold";
 }
 
 .uk-overlay-primary h1 {
@@ -65,6 +67,10 @@ footer {
     background-color: $navbar-background;
 }
 
+.uk-navbar-nav > li > a, .uk-navbar-item, .uk-navbar-toggle {
+    min-height: 0 !important;
+}
+
 /* IMAGES */
 
 [class*='post__image'] > img {

diff --git a/author.hbs b/author.hbs
@@ -4,28 +4,26 @@
 {{> navbar}}
 
 {{#author}}
-   <div
-      class="uk-section uk-background-cover uk-background-top-right"
-      style="background-image: url({{asset "images/about-me-image.png"}})"
-      uk-height-viewport="expand: true"
-      uk-scrollspy="cls: uk-animation-fade">
-      <a id="about-me"></a>
-
-      <div
-         class="uk-container uk-container-expand"
-         uk-height-match=".uk-overlay-primary > div">
-         <div class="uk-grid-large uk-child-width-1-2@m" uk-grid>
-               <div>
-                  <div class="uk-padding uk-overlay-primary" uk-scrollspy="cls: uk-animation-slide-left; delay: 500">
-                     <h2 class="uk-heading-divider">{{name}}</h2>
-
-                     <div class="uk-hidden@m">{{{description}}}</div>
-                     <div class="uk-visible@m uk-text-large">{{{description}}}</div>
-                  </div>
-               </div>
-         </div>
-      </div>
-   </div>
+<div
+	class="uk-section"
+	uk-scrollspy="cls: uk-animation-fade"
+>
+	<div class="uk-container">
+		<div class="uk-grid-large uk-child-width-expand@s uk-flex-center" uk-grid>
+			<div
+				class=""
+				uk-scrollspy="cls: uk-animation-slide-left; delay: 500"
+			>
+				<h2 class="uk-heading-divider">{{name}}</h2>
+				<div class="uk-hidden@m">{{{description}}}</div>
+				<div class="uk-visible@m">{{{description}}}</div>
+			</div>
+			<div class="">
+				<img  class="uk-align-center" src="{{asset "images/about-me-image.webp"}}" />
+			</div>
+		</div>
+	</div>
+</div>
 {{/author}}
 
 {{> footer}}
diff --git a/config.json b/config.json
@@ -137,6 +137,7 @@
         }
     ],
     "postTemplates": {
+        "index": "Show the index of all posts",
         "portfolio": "Image for the portfolio"
     },
     "postConfig": [
@@ -158,10 +159,7 @@
         }
     ],
     "files": {
-        "ignoreAssets": [
-            "scss",
-            ".DS_Store"
-        ],
+        "ignoreAssets": ["scss", ".DS_Store"],
         "assetsPath": "assets",
         "partialsPath": "partials",
         "responsiveImages": {

diff --git a/index.hbs b/index.hbs
@@ -4,40 +4,70 @@
 {{> navbar}}
 
 
-{{! Hero }}
-<div class="uk-section uk-background-cover uk-background-top-right" style="background-image: url({{asset "images/about-me-image.png"}})" uk-scrollspy="cls: uk-animation-fade">
-    <a id="about-me"></a>
-
-    <div class="uk-container uk-container-expand uk-height-large" uk-height-match=".uk-overlay-primary > div" uk-height-viewport="min-height: 600">
-        <div class="uk-grid-large uk-child-width-1-2@s" uk-grid>
-            <div>
-                <div class="uk-padding uk-overlay-primary" uk-scrollspy="cls: uk-animation-slide-left; delay: 500">
-                    <h2 class="uk-heading-divider">{{@config.custom.heroTitle}}</h2>
-
-                    <div class="uk-hidden@m">{{{@config.custom.heroBody}}}</div>
-                    <div class="uk-visible@m uk-text-large">{{{@config.custom.heroBody}}}</div>
-                    {{#getAuthor 1}}
-                    <a href="{{url}}" class="uk-button uk-button-text">Read more</a>
-                    {{/getAuthor}}
-                </div>
-            </div>
-        </div>
-    </div>
-</div>
-{{! /Hero }}
-
 {{! Portfolio }}
 <div class="uk-section">
     <a id="portfolio"></a>
 
-    <div class="uk-container uk-dark" uk-scrollspy="cls: uk-animation-slide-right">
-        <h2 class="uk-heading-divider">Portfolio</h2>
+    <div
+		class="uk-container uk-dark"
+		uk-scrollspy="cls: uk-animation-slide-right"
+	>
+        <h2 class="uk-heading-divider uk-text-center">Portfolio</h2>
 
         {{> portfolio}}
     </div>
 </div>
 {{! /Portfolio }}
 
-{{> readings }}
+{{! Posts }}
+<div class="uk-section uk-padding-small">
+    <a id="readings"></a>
+
+    <div class="uk-container uk-dark" uk-scrollspy="cls: uk-animation-slide-right">
+        <h2 class="uk-heading-divider uk-text-center">Readings</h2>
+		{{> readings posts=posts featuredOnly=true }}
+		{{#getPostByTags "post-index" ""}}
+			<div class="uk-margin uk-flex uk-flex-right">
+    			<div>
+					<a class="uk-button uk-button-text" href="{{url}}">Show all articles</a>
+				</div>
+			</div>
+		{{/getPostByTags}}
+	</div>
+</div>
+{{! /Posts }}
+
+{{! Hero }}
+<div
+	class="uk-section uk-padding-small"
+	uk-scrollspy="cls: uk-animation-fade"
+>
+    <a id="about-me"></a>
+
+    <div class="uk-container">
+        <div class="uk-grid uk-child-width-expand@s uk-flex-center uk-flex-middle" uk-grid>
+            <div uk-scrollspy="cls: uk-animation-slide-left; delay: 500">
+				<h2 class="uk-heading-divider">{{@config.custom.heroTitle}}</h2>
+
+				<div>{{{@config.custom.heroBody}}}</div>
+				{{#getAuthor 1}}
+				<a href="{{url}}" class="uk-button uk-button-text">Read more</a>
+				{{/getAuthor}}
+            </div>
+			<div>
+				<img
+					class="uk-align-center uk-object-contain"
+					width="600"
+					height="600"
+					alt=""
+					style="aspect-ratio: 1 / 1;"
+					src="{{asset "images/about-me-image.webp"}}" />
+			</div>
+        </div>
+    </div>
+</div>
+{{! /Hero }}
 
+{{! Footer }}
 {{> footer}}
+{{! /Footer }}
diff --git a/luci.lang.json b/luci.lang.json
@@ -1,44 +1,43 @@
 {
-   "partials": {
+    "partials": {
+        "pagination": {
+            "prev": "Previous",
+            "next": "Next"
+        },
 
-      "pagination": {
-         "prev": "Previous",
-         "next": "Next"
-      },
+        "sidebar": {
+            "selectedPosts": "Selected posts",
+            "featuredPosts": "Featured posts",
+            "authors": "Authors"
+        }
+    },
 
-      "sidebar": {
-         "selectedPosts": "Selected posts",
-         "featuredPosts": "Featured posts",
-         "authors": "Authors"
-      }
-   },
+    "post": {
+        "publishedBy": "Written by ",
+        "publishedDate": "on ",
+        "mainTag": "Posted in ",
+        "lastUpdatedDate": "Last updated on ",
+        "previousPost": "Previous",
+        "nextPost": "Next",
+        "relatedPosts": "Author: "
+    },
 
-   "post": {
-      "publishedBy": "Written by ",
-      "publishedDate": "on ",
-      "mainTag": "Posted in ",
-      "lastUpdatedDate": "Last updated on ",
-      "previousPost": "Previous",
-      "nextPost": "Next",
-      "relatedPosts": "Author: "
-   },
+    "tags": {
+        "tagsPageTitle": "Tags",
+        "description": "Collection of all tags",
+        "post": {
+            "1": "Post",
+            "default": "Posts"
+        }
+    },
 
-   "tags": {
-      "tagsPageTitle": "Tags",
-      "description": "Collection of all tags",
-      "post": {
-       "1": "Post",
-          "default": "Posts"
-      }
-  },
+    "author": {
+        "visitWebsite": "Visit website"
+    },
 
-  "author": {
-    "visitWebsite": "Visit website"
-  },
-
-   "error": {
-       "404": "Error 404",
-       "message": "The page you were looking for appears to have been moved, deleted or does not exist. You could go back to where you were or head straight to our home page.",
-       "button": "Go Home"
-   }
+    "error": {
+        "404": "Error 404",
+        "message": "The page you were looking for appears to have been moved, deleted or does not exist. You could go back to where you were or head straight to our home page.",
+        "button": "Go Home"
+    }
 }