Removed grid layout to make pages more dynamic

Added eleventy config to add public folder passthrough, updated pack.json to serve content instead of compile, added plugins/metadata to rendering engine

.gitignore

@@ -1,3 +1,6 @@
 # @11ty/eleventy output
 src/_site/
-_site/
+_site/
+
+# MacOS files
+.DS_Store

eleventy.config.js

@@ -0,0 +1,6 @@
+/** @param {import("@11ty/eleventy").UserConfig} eleventyConfig */
+export default async function(eleventyConfig) {
+  eleventyConfig.addPassthroughCopy(
+    {'./public/': '/'}
+  )
+}

package.json

@@ -3,7 +3,8 @@
   "version": "1.0.0",
   "description": "My personal blog",
   "scripts": {
-    "start": "npx @11ty/eleventy --input ./src",
+    "start": "npx @11ty/eleventy --input ./src --serve",
+    "build": "npx @11ty/eleventy --input .src",
     "clean": "rm -rf {_site,./src/_site}"
   },
   "repository": {
@@ -13,5 +14,5 @@
   "keywords": ["blog", "@11ty/eleventy", "eleventy"],
   "author": "Cyper",
   "license": "ISC",
-  "type": "commonjs"
+  "type": "module"
 }

public/css/style.css

@@ -0,0 +1,133 @@
+:root {
+  --navbar-height: 96px;
+  --footer-height: 24px;
+
+  --teal: 162, 223, 203;
+  --black: 25, 23, 30;
+  --brown: 81, 73, 65;
+  --tan: 158, 144, 112;
+  --lightblue: 147, 225, 242;
+
+  --background-color: white;
+  --header-color: white;
+  --footer-color: rgba(var(--teal));
+  --borders: 1px solid rgba(var(--black), .86);
+}
+
+html, body {
+  height: 100vh;
+  width: 100vw;
+  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
+}
+
+html, body, p, h1, h2, h3, h4, h5, h6 {
+  padding: 0;
+  margin: 0;
+}
+
+body {
+  /* display: grid;
+  grid-template-rows: var(--navbar-height) calc(100% - var(--navbar-height) - var(--footer-height)) var(--footer-height); */
+  background-color: var(--background-color);
+}
+body > * {
+  box-sizing: border-box;
+}
+
+header {
+  background-color: var(--header-color);
+  border-bottom: var(--borders);
+  font-variant: small-caps;
+  height: var(--navbar-height);
+}
+main {
+  padding: 1rem;
+  height: calc(100% - var(--navbar-height) - var(--footer-height));
+}
+footer {
+  background-color: var(--footer-color);
+  border-top: var(--borders);
+  height: var(--footer-height);
+}
+
+.container {
+  max-width: 1200px;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.h-100 {
+  height: 100%;
+}
+
+nav {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.nav-logo > img {
+  width: 64px;
+  height: 64px;
+}
+
+.nav-logo > p {
+  color: red;
+}
+.nav-logo > p > span {
+  color: blue;
+}
+
+.nav-title {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+}
+.nav-title > ul {
+  list-style: none;
+  margin: 0.5rem 0;
+  padding: 0;
+}
+.nav-title > ul > li {
+  display: inline;
+  float: left;
+}
+.nav-title > ul > li > a {
+  padding: 0 1rem;
+}
+
+.nav-socials > a > svg {
+  padding: 0.5rem;
+  border: var(--borders);
+}
+
+/* -xs */
+@media (min-width: 576px) {
+  .container {
+    max-width: 540px;
+  }
+}
+/* -sm */
+@media (min-width: 768px) {
+  .container {
+    max-width: 720px;
+  }
+}
+/* -md */
+@media (min-width: 992px) {
+  .container {
+    max-width: 960px;
+  }
+}
+/* -lg */
+@media (min-width: 1200px) {
+  .container {
+    max-width: 1140px;
+  }
+}
+/* -xl */
+@media (min-width: 1400px) {
+  .container {
+    max-width: 1320px;
+  }
+}

src/_data/metadata.js

@@ -0,0 +1,20 @@
+const date = new Date();
+const formattedDate = date.toLocaleDateString('en-GB', {
+  day: '2-digit',
+  month: 'short',
+  year: 'numeric'
+});
+
+export default {
+	author: {
+		name: "Cyper",
+		url: "https://cyper.cc"
+	},
+  
+	title: "Cy by Side!",
+	url: "https://cy.cyper.cc/",
+	language: "en",
+	description: "Cy by Side with Cyper: Tangents, Tech, and Thoughtful Takes.",
+  date: formattedDate,
+  year: date.getFullYear()
+}

src/_data/wordCount.js

@@ -0,0 +1,11 @@
+export default function (data) {
+  if (typeof data.content === 'string') {
+    const words = data.content.trim().split(/\s+/).length;
+    const minutes = Math.ceil(words / 200); // avg reading speed
+    data.wordCount = words;
+    data.readingTime = `${minutes} min read`;
+    data.readingTimeMinutes = minutes;
+  }
+
+  return data;
+}

src/_includes/layout.html

@@ -3,15 +3,49 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Document</title>
+  <meta name="generator" content="{{ eleventy.generator }}">
+
+  <!-- TODO: Meta tags for embedding -->
+
+  <link rel="stylesheet" href="css/style.css">
+
+  <title>CyBySide - Cyper's Blog</title>
 </head>
 <body>
   <header>
-    <h1>{{ title | default: "Bloggy" }}</h1>
+    <nav class="container h-100">
+      <div class="nav-logo">
+        <img class="site-logo" src="/img/logo.png" alt="CyBySide logo" />
+      </div>
+      <div class="nav-title">
+        <h1>{{ metadata.title }}</h1>
+        <ul>
+          <li><a href="/">Home</a></li>
+          <li><a href="/posts">Posts</a></li>
+          <li><a href="/about">About</a></li>
+        </ul>
+      </div>
+      <div class="nav-socials">
+        <a href="#"><i data-lucide="twitter"></i></a>
+        <a href="#"><i data-lucide="youtube"></i></a>
+        <a href="#"><i data-lucide="rss"></i></a>
+      </div>
+    </nav>
   </header>
   <main>
-    {{ content }}
+    <div class="container">
+      {{ content }}
+    </div>
   </main>
-  <footer></footer>
+  <footer>
+    <div class="container">
+      <a style="text-decoration: none;" href="{{ metadata.author.url }}">{{ metadata.author.name }}</a> &copy; {{ metadata.year }}
+    </div>
+  </footer>
+
+  <script src="https://unpkg.com/lucide@latest"></script>
+  <script>
+    lucide.createIcons();
+  </script>
 </body>
 </html>