2024-11-19

.eleventy.js

@@ -2,12 +2,20 @@ const handlebarsPlugin = require("@11ty/eleventy-plugin-handlebars");
 const handlebars = require('handlebars');
 const sass = require("sass");
 const pluginRss = require("@11ty/eleventy-plugin-rss");
+const handlebarsHelpers = require('handlebars-helpers')
+const markdownit = require('markdown-it')
+const md = markdownit()
+const htmlmin = require("html-minifier");
 require('dotenv').config();
 
 module.exports = function(eleventyConfig) {
   // Passthrough episodes directory to include both markdown and audio files
   eleventyConfig.addPassthroughCopy("content/episodes/*/*.mp3");
+  eleventyConfig.addPassthroughCopy("content/episodes/**/*.jpg");
+  eleventyConfig.addPassthroughCopy("content/episodes/**/*.webp");
+  eleventyConfig.addPassthroughCopy("content/episodes/**/*.png");
   eleventyConfig.addPassthroughCopy("content/images/*.jpg");
+  eleventyConfig.addPassthroughCopy("content/images/*.webp");
   eleventyConfig.addPassthroughCopy("content/feeds/*.jpg");
   eleventyConfig.addPlugin(handlebarsPlugin);
   eleventyConfig.addPlugin(pluginRss);
@@ -23,6 +31,10 @@ module.exports = function(eleventyConfig) {
     // return `S${seasonNumber}E${episodeNumber}`;
   });
 
+  handlebarsHelpers({
+    handlebars
+  })
+
   eleventyConfig.addFilter("seasonEpisodeFormat", function (season, episode, separator="") {
     const seasonNumber = parseInt(season, 10).toString().padStart(2, '0');
     const episodeNumber = parseInt(episode, 10).toString().padStart(2, '0');
@@ -30,6 +42,40 @@ module.exports = function(eleventyConfig) {
 		return value;
 	});
 
+  // Shortcodes
+  eleventyConfig.addPairedShortcode(
+    "prologue", 
+    function(content) { return `<h2>Prologue</h2><section class="prologue">${md.render(content)}</section>` }
+  );
+  eleventyConfig.addPairedShortcode(
+    "masthead", 
+    function(content) { 
+      return `<hgroup class="masthead" markdown="1">${md.render(content)}<time datetime="${this.page.date.toISOString()}">${this.page.date.toLocaleDateString()}</time></hgroup>` }
+  );
+  eleventyConfig.addPairedShortcode(
+    "headline", 
+    function(content) { 
+      return `
+      <hgroup class="headline">${md.render(content.trim())}</hgroup>` }
+  );
+  eleventyConfig.addPairedShortcode(
+    "alternateTitles", 
+    function(content) { return `<section class="alternate-titles"><h2>Alternate Titles</h2>${md.render(content)}</section>` }
+  );
+
+  eleventyConfig.addTransform("htmlmin", (content, outputPath) => {
+    if (outputPath.endsWith(".html")) {
+      return htmlmin.minify(content, {
+        collapseWhitespace: true,
+        removeComments: true,  
+        useShortDoctype: true,
+      });
+    }
+
+    return content;
+  });
+
+  // Register Helpers
   handlebars.registerHelper('ifEquals', function(arg1, arg2, options) {
     return (arg1 == arg2) ? options.fn(this) : options.inverse(this);
   });
@@ -42,15 +88,14 @@ module.exports = function(eleventyConfig) {
   eleventyConfig.addTemplateFormats("scss");
 	eleventyConfig.addExtension("scss", {
 		outputFileExtension: "css", // optional, default: "html"
-
 		// `compile` is called once per .scss file in the input directory
 		compile: async function (inputContent) {
-			let result = sass.compileString(inputContent);
+			let result = sass.compileString(inputContent, {
+				loadPaths: ["node_modules/bootstrap/scss", ] 
+			});
 
 			// This is the render function, `data` is the full data cascade
-			return async (data) => {
-				return result.css;
-			};
+			return async (data) => result.css;
 		},
 	});
 

.gitignore

@@ -2,4 +2,5 @@ node_modules
 **/.obsidian
 dist
 *.mp3
-.env
+.env
+.DS_Store

.vscode/launch.json

@@ -0,0 +1,33 @@
+{
+  // Use IntelliSense to learn about possible attributes.
+  // Hover to view descriptions of existing attributes.
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+  "version": "0.2.0",
+  "configurations": [
+
+
+    {
+      "type": "node",
+      "request": "launch",
+      "name": "Launch Eleventy --serve",
+      "skipFiles": [
+        "<node_internals>/**"
+      ],
+      "runtimeExecutable": "npx",
+      "args": ["@11ty/eleventy","--output","dist", "--serve"],
+    },
+    {
+      "type": "node",
+      "request": "launch",
+      "name": "Debug Eleventy --serve",
+      "skipFiles": [
+        "<node_internals>/**"
+      ],
+      "env": {
+        "DEBUG":"Eleventy*"
+      },
+      "runtimeExecutable": "npx",
+      "args": ["@11ty/eleventy", "--output", "dist", "--serve"],
+    }
+  ]
+}

.vscode/settings.json

@@ -0,0 +1,6 @@
+{
+  "files.exclude": {
+    // "dist/": true
+    "**/.obsidian/": true
+  }
+}

.vscode/tasks.json

@@ -0,0 +1,20 @@
+{
+  "version": "2.0.0",
+  "tasks": [
+      {
+          "label": "Simple Browser",
+          "command": "${input:openSimpleBrowser}",
+          "problemMatcher": []
+      }
+  ],
+  "inputs": [
+      {
+          "id": "openSimpleBrowser",
+          "type": "command",
+          "command": "simpleBrowser.show",
+          "args": [
+              "http://localhost:8081"
+          ]
+      }
+  ]
+}

content/campaigns/campaigns.hbs

@@ -1,21 +1,17 @@
 ---
-layout: "base"
+layout: "base-with-heading"
 override:tags: []
 ---
 
 <h1>Campaigns</h1>
 <ul class="campaigns">
   {{#each collections.campaign}}
-      <li>
-        <h1>{{data.title}}</h1>
-        <p>
-          {{#each data.seasons}}
-          <a href="/episodes/s0{{this}}">Season {{this}}</a>
-          {{/each}}
-          <a href="{{this.url}}">All</a>
-        </p>
-        <p>System: {{data.system.name}}</p>
-        <a href="{{{this.url}}}">Details...</a>
-      </li>
+    <div class="card m-2">
+      <div class="card-body">
+        <h4 class="card-title">{{data.title}}</h1>
+        <h6 class="card-subtitle mb-2 text-muted">{{data.system.name}}</h6>
+        <a class= "card-link" href="{{{this.url}}}">Details...</a>
+      </div>
+    </div>
   {{/each}}
 </ul>

content/css/s04.scss

@@ -0,0 +1,97 @@
+.season-4, .season-1 {
+  --newspaper-background-texture-image: url(/images/starwars.jpg);
+  --newspaper-headline-font: 'Noticia Text';
+  --newspaper-base-font: 'EB Garamond';
+  --newspaper-name-font: 'UnifrakturCook';
+  font-family: "Libre Franklin";
+
+  section.prologue {
+    padding: 20px;
+    margin: 20px;
+    border: black solid 1 px;
+    border-radius: 10px;
+    background: var(--newspaper-background-texture-image);
+    background-repeat:repeat;
+    background-position:center top;
+    background-color:black;
+
+    color:#ffd54e;
+    font-size:larger;
+    div {
+      width:80%;
+      margin:-2em auto 4.5em auto;
+      transform:perspective(300px) rotateX(10deg);
+    }
+
+    h1 {
+      text-transform:uppercase;
+      text-align:center;
+      border-bottom:none;
+      font-size:inherit;
+      line-height:1.5em;
+    }
+
+    h2 {
+      text-transform:uppercase;
+      text-align:center;
+      // font-family:trade-gothic-lt-condensed-no-18;
+      padding-bottom: 8px;
+      border-bottom:solid white 1.1px;
+      font-size:1.5em;
+    }
+
+    strong {
+      text-transform: uppercase;
+      font-weight:bold;
+      padding-right:.5em;
+      font-size:1.2em
+    }
+
+    h2 {
+      text-align: center;
+    }
+  
+    p {
+      text-align: justify;
+      text-align:justify;
+      margin-bottom: 1em;
+      line-height:1.35em;
+    }
+  }
+  
+  
+
+}
+
+#JournalSheet-JournalEntry-oAthntGlaRbGfoHK p a.content-link {
+	background: inherit;
+	text-transform: uppercase;
+    border: none;
+    font-weight: 900;
+}
+
+
+// #JournalSheet-JournalEntry-oAthntGlaRbGfoHK p a.mention, 
+// #JournalSheet-JournalEntry-oAthntGlaRbGfoHK p a.entity-mention,
+// #JournalSheet-JournalEntry-oAthntGlaRbGfoHK p a.mention em, 
+// #JournalSheet-JournalEntry-oAthntGlaRbGfoHK p a.entity-mention em{
+//     color: inherit;
+// 	text-transform: uppercase;
+// 	font-style: inherit;
+// 	font-weight: 900;
+// }
+
+
+// #JournalSheet-JournalEntry-oAthntGlaRbGfoHK article p{
+// 	text-align:justify;
+//     margin-bottom: 1em;
+// 	line-height:1.35em;
+// }
+
+// #JournalSheet-JournalEntry-oAthntGlaRbGfoHK article {
+// 	color:#ffd54e;
+// 	font-size:larger;
+// 	width:80%;
+// 	margin:auto;
+// 	transform:perspective(300px) rotateX(10deg)
+// }

content/css/s05.scss

@@ -0,0 +1,60 @@
+.season-5 {
+  --newspaper-background-texture-image: url(/images/parchment.jpg);
+  --newspaper-headline-font: 'Noticia Text';
+  --newspaper-base-font: 'EB Garamond';
+  --newspaper-name-font: 'UnifrakturCook';
+  
+  section.prologue {
+    font-family: var(--newspaper-base-font);
+    padding: 20px;
+    border: black solid 1 px;
+    border-radius: 10px;
+    background: var(--newspaper-background-texture-image);
+    text-align: justify;
+
+    p {
+      columns: 2;
+    }
+
+    h1, h2, h3 {
+      text-align: center;
+    }
+
+    // Newspaper Name
+    h1:first-child {
+      text-align: center;
+      font-family: var(--newspaper-name-font);
+      margin: inherit;
+      column-count: 1;
+      font-size: 5em;
+      margin: 8px;
+      text-align: center;
+    }
+
+    // Newspaper Tagline
+    h1:first-child + p {
+      columns: 1;
+      text-align: center;
+      font-style: italic;
+      border: solid;
+      margin: 0;
+      margin-bottom: 1em;
+    }
+
+    // Headline
+    h1 ~ h1 {
+      font-weight:bold;
+      text-transform: uppercase;
+    }
+
+    p:has(img) {
+      columns: 1;
+      text-align: center;
+    }
+    img {
+      height:400px;
+    }
+
+  }
+
+}

content/css/style.scss

@@ -1,13 +1,20 @@
 $primary-color: #333;
 $secondary-color: #f0f0f0;
-
+@import "bootstrap";
+@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css");
 @import url('https://fonts.googleapis.com/css2?family=Noticia+Text:ital,wght@0,400;0,700;1,400;1,700&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=UnifrakturCook:wght@700&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400..800;1,400..800&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=Didact+Gothic&family=Libre+Franklin:ital,wght@0,100..900;1,100..900&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&display=swap');
 
 body {
-  font-family: Helvetica, sans-serif, sans-serif;
+  .navbar-brand {
+    font-family: Oswald;
+    text-transform: uppercase;
+  }
+
+  font-family: "Libre Franklin", Helvetica, sans-serif, sans-serif;
   background-color: $secondary-color;
   color: $primary-color;
 
@@ -62,103 +69,6 @@ body {
     a.active {
     }
   }
-
-  h1 {
-    text-align: center;
-  }
-
-  &.season-5 {
-    --newspaper-background-texture-image: url(../images/parchment.jpg);
-    --newspaper-headline-font: 'Noticia Text';
-    --newspaper-base-font: 'EB Garamond';
-    --newspaper-name-font: 'UnifrakturCook';
-    font-family: var(--newspaper-base-font);
-
-    section.prologue {
-      padding: 20px;
-      margin: 20px;
-      border: black solid 1 px;
-      border-radius: 10px;
-      background: var(--newspaper-background-texture-image);
-      background-color: green;
-    }
-
-    hgroup{
-      h1 {
-        text-transform: uppercase;
-        margin: inherit;
-      }
-      h2 {
-        margin: inherit;
-      }
-      &.masthead {
-      text-align: center;
-      h1, h2 {
-        text-transform: inherit;
-        border-bottom: 0px;
-        font-family: var(--newspaper-headline-font);
-        line-height: 85%;
-      }
-      h1 {
-        column-count: 1;
-        font-family: var(--newspaper-name-font);
-        font-size: 5em;
-        margin: 8px;
-        text-align: center;
-      }
-      p {
-        font-style: italic;
-      }
-    }
-  }
-    h2 {
-      text-align: center;
-    }
-
-    article p {
-      text-align: justify;
-    }
-  }
-
-  &.season-4 {
-    --newspaper-background-texture-image: url(../images/starwars.jpg);
-    --newspaper-headline-font: 'Noticia Text';
-    --newspaper-base-font: 'EB Garamond';
-    --newspaper-name-font: 'UnifrakturCook';
-    font-family: "Libre Franklin";
-
-    section.prologue {
-      padding: 20px;
-      margin: 20px;
-      border: black solid 1 px;
-      border-radius: 10px;
-      background: var(--newspaper-background-texture-image);
-      background-color: black;
-      color: yellow;
-    }
-
-    hgroup{
-      text-align: center;
-      text-transform: uppercase;
-      h1 {
-        margin: inherit;
-      }
-      h2 {
-        margin: inherit;
-      }
-      
-  }
-    strong {
-      text-transform: uppercase;
-    }
-    h2 {
-      text-align: center;
-    }
-
-    article p {
-      text-align: justify;
-    }
-  }
 }
 
 header {

content/data/site.js

@@ -1,6 +1,7 @@
 require('dotenv').config();
 module.exports = function () {
 	return {
-		url: process.env.SITE_URL
+		url: process.env.SITE_URL,
+		cdn: process.env.CDN_URL
 	};
 }

content/data/site.json

@@ -3,5 +3,5 @@
     "name": "Anthony Correa",
     "email": "a@correa.co"
   },
-  "url": "http://localhost:8080"
+  "title": "Crew of the Kahuna"
 }

content/episodes/seasons.hbs

@@ -1,11 +1,12 @@
 ---
-layout: "base"
+title: Seasons
+layout: "base-with-heading"
 permalink: "/seasons/"
 override:tags: []
 ---
 
 <ul>
-  {{#each collections.season}}
+  {{#each (sort collections.season)}}
     <li>
       <h1><a href="{{this.url}}">Season {{this.data.season}}</a></h1>
       {{{content}}}

content/index.md

@@ -1,4 +1,8 @@
 ---
 layout: index
+title: Crew of the Kahuna
+heroImage: /images/ffgsw-dice.webp
+links: 
+  podcastRss: /feeds/podcast.xml
 ---
 We are a group of adventurers, storytellers, and dice-rolling enthusiasts who gather weekly to dive into epic campaigns and tell stories together. Whether it's battling ancient dragons,       solving mysterious puzzles, or navigating treacherous political intrigues, we bring our characters to life and make unforgettable memories!

layouts/base-with-heading.hbs

@@ -0,0 +1,9 @@
+---
+layout: base
+---
+
+<div class="my-3">
+  <h1>{{title}}</h1>
+</div>
+
+{{{content}}}

layouts/base.hbs

@@ -3,20 +3,30 @@
   <meta charset="utf-8">
   <title>{{#if title }}{{ title }}{{else}}{{ site.title }}{{/if}} - {{ site.name }}</title>
   <link rel="stylesheet" href="{{site.url}}/css/style.css">
+  {{#each stylesheets}}
+  <link rel="stylesheet" href="{{site.url}}{{this}}">
+  {{/each}}
 </head>
 <body class="{{{bodyClasses}}}">
-  <header>
-    <div>rpg.ascorrea.com</div>
-    <nav>
-      <ul>
-        <li><a href="{{site.url}}">Home</a></li>
-        <li><a href="{{site.url}}/campaigns">Campaigns</a></li>
-        <li><a href="{{site.url}}/seasons">Seasons</a></li>
+  <nav class="navbar navbar-expand-lg bg-body-tertiary">
+  <div class="container-fluid">
+    <a class="navbar-brand" href="{{site.url}}"><i class="bi bi-dice-4-fill"></i>Kahuna</a>
+    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+      <span class="navbar-toggler-icon"></span>
+    </button>
+    <div class="collapse navbar-collapse" id="navbarSupportedContent">
+      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
+        <li class="nav-item"><a class="nav-link" href="{{site.url}}/campaigns">Campaigns</a></li>
+        <li class="nav-item"><a class="nav-link" href="{{site.url}}/seasons">Seasons</a></li>
       </ul>
-    </nav>
-  </header>
-  <main>
+    </div>
+  </div>
+</nav>
+  <main class="container">
     {{{content}}}
   </main>
+<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" 
+	integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" 
+	crossorigin="anonymous" webc:keep></script>
 </body>
 </html>

layouts/campaign.hbs

@@ -1,7 +1,7 @@
 ---
 layout: base
 ---
-<h1>{{title}}</h1>
+
 {{{content}}}
 <p>{{season}}</p>
 <h1>Episodes</h1>

layouts/episode.hbs

@@ -5,4 +5,26 @@ eleventyComputed:
   bodyClasses: "episode season-{{season}}"
 ---
 
-{{{content}}}
+<div class="container py-5">
+  <div class="bg-body-tertiary p-4 my-2 rounded">
+    <div class="row">
+      <div class="col"><img src="{{{this.url}}}../image.jpg" class="img-fluid"></div>
+      <div class="col">
+        <h1>{{{title}}}<a href="{{{site.cdn}}}/s0{{{season}}}e{{{episode}}}.mp3" ><i class="bi bi-download m-1"></i></a></h1>
+        <audio controls>
+          <source src="{{{site.cdn}}}/s0{{{season}}}e{{{episode}}}.mp3" type="audio/mpeg">
+        Your browser does not support the audio element.
+        </audio>
+      <div class="d-flex felx-wrap m-1 gap-1">
+        {{#each tags}}
+          <div class="badge text-bg-dark fw-light rounded-1">{{{this}}}</div>
+        {{/each}}
+      </div>
+      </div>
+      
+    </div>
+  </div>
+  
+  {{{content}}}
+
+</div>

layouts/index.hbs

@@ -1,7 +1,38 @@
+---js
+{
+  layout: "base",
+  latest_episodes: function(episodes) {
+    return episodes.sort().reverse().slice(0,3)
+  }
+}
 ---
-layout: base
----
-
-<section>
-  {{{content}}}
-</section>
+<div class="p-5 my-5 text-center bg-body-tertiary">
+    <div>
+      <h1 class="text-uppercase">{{title}}</h1>
+      <section>
+        {{{content}}}
+      </section>
+      <section>
+        {{#if links.podcastRss}}
+          <a href="{{{site.url}}}{{{links.podcastRss}}}" class="btn btn-outline-primary"><i class="bi bi-rss-fill me-1"></i>RSS</a>
+        {{/if}}
+      </section>
+    </div>
+</div>
+<section class="py-5">
+  <h1>Latest Episodes</h1>
+    <div class="row row-cols-1 row-cols-md-3 g-1">
+      {{#each (latest_episodes collections.episode)}}
+        <div class="col">
+          <div class="card m-2">
+                <img src="{{this.url}}../image.jpg" class="card-img-left">
+                <div class="card-body">
+                  <h5 class="card-title"><a href={{{this.url}}}>{{{data.title}}}</a></h5>
+                  <h6 class="card-subtitle mb-2 text-body-secondary"> Season {{{data.season}}}</h6>
+                  <span class="card-subtitle mb-2 text-body-secondary"> {{{date this.date "ddd, MMM D, YYYY, LT"}}}</h6>
+                </div>
+          </div>
+        </div>
+      {{/each}}
+    </div>
+  </section>

layouts/podcast.11ty.js

@@ -53,7 +53,9 @@ class PodcastFeed {
   
     items.forEach(episode=>{
       const episode_data = episode.data
-      const zero_pad_season = episode_data.season.toString().padStart(2, '0')
+      var zero_pad_season
+
+      zero_pad_season = episode_data.season.toString().padStart(2, '0')
       // const duration = getMp3Duration(`../episodes/s${zero_pad_season}/s${zero_pad_season}e${episode_data.episode}.mp3`)
        /* loop over data and add to feed */
       feed.addItem({

package.json

@@ -15,9 +15,14 @@
     "@11ty/eleventy-navigation": "^0.3.5",
     "@11ty/eleventy-plugin-handlebars": "^1.0.0",
     "@11ty/eleventy-plugin-rss": "^2.0.2",
+    "bootstrap": "^5.3.3",
+    "bootstrap-icons": "^1.11.3",
     "dotenv": "^16.4.5",
+    "handlebars-helpers": "^0.10.0",
+    "html-minifier": "^4.0.0",
     "markdown-it": "^14.1.0",
     "music-metadata": "^10.5.1",
+    "npx": "^10.2.2",
     "podcast": "^2.0.1",
     "sass": "^1.80.3"
   }