adding a basic blog sample

holger1411 · May 4, 2021 · 5fcec05 · 5fcec05
1 parent 584f48a
commit 5fcec05
Show file tree

Hide file tree

Showing 16 changed files with 145 additions and 52 deletions.
diff --git a/.eleventy.js b/.eleventy.js
@@ -1,11 +1,24 @@
+const {
+  DateTime
+} = require("luxon");
+
 module.exports = function(eleventyConfig) {
   // Add a filter using the Config API
   eleventyConfig.addWatchTarget("./src/scss/");
   eleventyConfig.setBrowserSyncConfig({
-reloadDelay: 400
-});
-
-  // You can return your Config object (optional).
+    reloadDelay: 400
+  });
+  eleventyConfig.addFilter("readableDate", dateObj => {
+    return DateTime.fromJSDate(dateObj, {
+      zone: 'utc'
+    }).toFormat("dd LLL yyyy");
+  });
+  // https://html.spec.whatwg.org/multipage/common-microsyntaxes.html#valid-date-string
+  eleventyConfig.addFilter('htmlDateString', (dateObj) => {
+    return DateTime.fromJSDate(dateObj, {
+      zone: 'utc'
+    }).toFormat('yyyy-LL-dd');
+  });
   return {
     dir: {
       input: "src",

diff --git a/src/_data/metadata.json b/src/_data/metadata.json
@@ -1,3 +1,5 @@
 {
-  "title": "11straps - A Elevents and Bootstrap 5 static website geneerator boilerplate"
+  "title": "11straps - A Elevents and Bootstrap 5 static website geneerator boilerplate",
+  "author": "Holger Koenemann",
+  "description": "Combination of static site generator eleventy and CSS framework Bootstrap 5 into one solid boilerplate"
   }
diff --git a/src/_includes/layouts/base.njk b/src/_includes/layouts/base.njk
diff --git a/src/_includes/layouts/default.njk b/src/_includes/layouts/default.njk
@@ -0,0 +1,22 @@
+<!doctype html>
+<html class="h-100" lang="en">
+  <head>
+
+    {% include 'snippets/head.njk' %}
+
+  </head>
+  <body>
+
+    {% include 'snippets/navbar.njk' %}
+
+    {% include 'snippets/maincontent.njk' %}
+
+    <div class="container mb-5">
+    {% include 'snippets/postloop.njk' %}
+    </div>
+
+    {% include 'snippets/footer.njk' %}
+
+  </body>
+
+</html>
diff --git a/src/_includes/layouts/home.njk b/src/_includes/layouts/home.njk
@@ -1,4 +1,40 @@
----
-layout: layouts/base.njk
----
-{{ content | safe }}
+<!doctype html>
+<html class="h-100" lang="en">
+
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+  <meta name="description" content="Combination of static site generator eleventy and CSS framework Bootstrap 5 into one solid boilerplate">
+  <link rel="icon" type="image/png" sizes="96x96" href="/img/favicon.png">
+  <meta name="author" content="Holger Koenemann">
+  <meta name="generator" content="11straps">
+  <meta name="HandheldFriendly" content="true"/>
+  <title>{{ title or metadata.title }}</title>
+  <!-- build:css -->
+<link rel="stylesheet" href="{{ "/css/theme.css" | url }}">
+   <!-- endbuild -->
+</head>
+
+<body class="bg-dark">
+
+  <nav class="navbar navbar-expand-lg navbar-dark pt-0">
+  <div class="container">
+    <a class="navbar-brand mb-0 py-4 px-3 pt-5 text-center text-white bg-primary" href="#">11straps</a>
+  </div>
+</nav>
+
+    <main>
+        {{ content | safe }}
+    </main>
+<div class="container">
+    <footer class="row text-white-50">
+      <div class="col-12 py-5">
+        <p><img src="img/hkimg.png" alt="Holger Koenemann, UX designer and Frontend Engineer" width="60" height="60" class="float-left mt-1 me-3 gradient-rounded">A tiny sideproject by <a href="https://github.com/holger1411" class="link-fancy">Holger Koenemann</a>.
+          Made in lovely Hannover, Germany</p>
+      </div>
+    </footer>
+  </div>
+
+</body>
+
+</html>
diff --git a/src/_includes/snippets/footer.njk b/src/_includes/snippets/footer.njk
@@ -0,0 +1,9 @@
+<div class="container">
+    <footer class="row">
+      <div class="col-12 pb-5">
+        <hr/>
+        <p><img src="{{ '/img/hkimg.png' | url }}" alt="Holger Koenemann, UX designer and Frontend Engineer" width="60" height="60" class="float-left mt-1 me-3 gradient-rounded">A tiny sideproject by <a href="https://github.com/holger1411" class="link-fancy text-primary">Holger Koenemann</a>.
+          Made in lovely Hannover, Germany</p>
+      </div>
+    </footer>
+  </div>
diff --git a/src/_includes/snippets/head.njk b/src/_includes/snippets/head.njk
@@ -0,0 +1,11 @@
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+  <meta name="description" content="{{ metadata.description }}">
+  <link rel="icon" type="image/png" sizes="96x96" href="{{ '/img/favicon.png' | url }}">
+  <meta name="author" content="{{ metadata.author }}">
+  <meta name="generator" content="11straps">
+  <meta name="HandheldFriendly" content="true"/>
+  <title>{{ title or metadata.title }}</title>
+  <!-- build:css -->
+  <link rel="stylesheet" href="{{ '/css/theme.css' | url }}">
+   <!-- endbuild -->
diff --git a/src/_includes/snippets/maincontent.njk b/src/_includes/snippets/maincontent.njk
@@ -0,0 +1,4 @@
+<main class="container py-5">
+        <h1>{{ pageTitle }}</h1>
+  {{ content | safe }}
+</main>
diff --git a/src/_includes/snippets/navbar.njk b/src/_includes/snippets/navbar.njk
@@ -0,0 +1,5 @@
+<nav class="navbar navbar-expand-lg navbar-dark pt-0">
+  <div class="container">
+    <a class="navbar-brand mb-0 py-4 px-3 pt-5 text-center text-white bg-primary" href="#">11straps</a>
+  </div>
+</nav>
diff --git a/src/_includes/snippets/postloop.njk b/src/_includes/snippets/postloop.njk
@@ -0,0 +1,10 @@
+<div class="row">
+{% for post in collections.posts %}
+<div class="col-12 col-lg-6 py-4">
+<h2><a href="{{ post.url }}" class="text-dark text-decoration-none">{{ post.data.pageTitle }}</a></h2>
+    <time class="fw-bold" datetime="{{ post.date | htmlDateString }}">{{ post.date | readableDate }}</time>
+    <p>{{ post.data.lead }}</p>
+    <a href="{{ post.url }}">Read more...</a>
+</div>
+{% endfor %}
+</div>
diff --git a/src/default.njk b/src/default.njk
@@ -0,0 +1,3 @@
+---
+layout: layouts/default.njk
+---
diff --git a/src/index.njk b/src/index.njk
@@ -1,5 +1,5 @@
 ---
-layout: layouts/base.njk
+layout: layouts/home.njk
 ---
 
 <div class="container my-vh-6">

diff --git a/src/posts/post1.md b/src/posts/post1.md
@@ -0,0 +1,8 @@
+---
+layout: layouts/default.njk
+pageTitle: Lorem ipsum dolor
+date: Created
+lead: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
+---
+
+Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
diff --git a/src/posts/post2.md b/src/posts/post2.md
@@ -0,0 +1,8 @@
+---
+layout: layouts/default.njk
+pageTitle: Sit amet elitr
+date: Created
+lead: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
+---
+
+Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
diff --git a/src/posts/posts.json b/src/posts/posts.json
@@ -0,0 +1,4 @@
+{
+    "layout": "layouts/default.njk",
+    "tags": ["posts"]
+}
diff --git a/src/scss/themes/base/_variables-theme.scss b/src/scss/themes/base/_variables-theme.scss
@@ -6,8 +6,6 @@ $blue: #1717e5;
 $gray-800: #282828;
 $orange: #ff6200;
 $warning: $orange;
-$body-bg:  $gray-900;
-$body-color: $gray-300;
 $font-size-base:              1rem !default; // Assumes the browser default, typically `16px`
 $lead-font-weight:200;
 $font-weight-light:           200 !default;