good enough

halkeye · Feb 28, 2024 · 3bf5bb7 · 3bf5bb7
1 parent 0a53c3b
commit 3bf5bb7
Show file tree

Hide file tree

Showing 8 changed files with 384 additions and 39 deletions.
diff --git a/.eleventy.js b/.eleventy.js
@@ -1,20 +1,25 @@
 const {DateTime} = require("luxon");
 const path = require('path');
 
+const postcss = require('postcss');
+const tailwindcss = require('tailwindcss');
+const autoprefixer = require('autoprefixer');
+
 const markdownItImage = require("markdown-it-eleventy-img");
 const Image = require("@11ty/eleventy-img");
 const pluginSyntaxHighlight = require("@11ty/eleventy-plugin-syntaxhighlight");
 const {EleventyHtmlBasePlugin} = require("@11ty/eleventy");
 
-const toImageTag = async (src = 'static/assets/noimage.jpg', alt = "", width = 300) => {
+const toImageTag = async (src = 'static/assets/noimage.jpg', alt = "", widths = [300], extraAttributes = {}) => {
   if (!src) {
     src = "static/assets/noimage.jpg";
   }
 
   let attributes = {
     src: src.replace('/assets/', 'static/assets/'),
-    widths: [width],
+    widths: widths,
     alt: alt || "",
+    ...extraAttributes
   }
   const imageOptions = {
     // We only need the original width and format
@@ -36,6 +41,16 @@ const toImageTag = async (src = 'static/assets/noimage.jpg', alt = "", width = 3
 };
 
 module.exports = eleventyConfig => {
+  eleventyConfig.addNunjucksAsyncFilter('postcss', (cssCode, done) => {
+    postcss([tailwindcss(require('./tailwind.config.js')), autoprefixer()])
+      .process(cssCode, {from: './_includes/tailwind.css'})
+      .then(
+        (r) => done(null, r.css),
+        (e) => done(e, null)
+      );
+  });
+  eleventyConfig.addWatchTarget('_includes/**/*.css');
+
   eleventyConfig.addPassthroughCopy({
     "./public/": "/",
     "./attachments/": "/assets/",
@@ -105,7 +120,7 @@ module.exports = eleventyConfig => {
   })
 
   eleventyConfig.addFilter("filterTagList", function filterTagList(tags) {
-    return (tags || []).filter(tag => ["all", "nav", "post", "posts"].indexOf(tag) === -1);
+    return (tags || []).filter(tag => ["all", "presentations"].indexOf(tag) === -1);
   });
 
   return {

diff --git a/_includes/layouts/base.njk b/_includes/layouts/base.njk
@@ -5,9 +5,7 @@
 		<meta name="viewport" content="width=device-width, initial-scale=1.0">
 		<title>{{ title or metadata.title }}</title>
 		<meta name="description" content="{{ description or metadata.description }}">
-		{#- Uncomment this if you’d like folks to know that you used Eleventy to build your site!  #}
 		<meta name="generator" content="{{ eleventy.generator }}">
-		<link rel="stylesheet" href="/tailwind.css"/>
 		<meta name="title" content="{{ title or metadata.title }}">
 
 		<meta property="og:type" content="website">
@@ -27,10 +25,10 @@
 		<meta name="twitter:image:alt" content="{{ title or metadata.title }}">
 		<link rel="canonical" href="{{ page.url | absoluteUrl }}">
 
-
-		<style>
-			{% include "public/css/index.css" %}
-		</style>
+		{% set css %}
+		{% include "../tailwind.css" %}
+		{% endset %}
+		<style>{{css | postcss | safe}}</style>
 	</head>
 	<body>
 		<header>

diff --git a/_includes/layouts/presentation.njk b/_includes/layouts/presentation.njk
@@ -11,9 +11,9 @@ layout: layouts/base.njk
   </a>
 
   <div class="h-full flex items-center justify-center">
-    <div class="card w-2/5 bg-base-100 shadow-xl">
+    <div class="card md:w-2/5 bg-slate-600 shadow-xl p-2">
       <figure>
-        <a href="{{link}}">{% toImageTag image, title, 300 %}</a>
+        <a href="{{link}}">{% toImageTag image, title, [300] %}</a>
       </figure>
       <div class="card-body">
         <h2 class="card-title">

diff --git a/_includes/presentationslist.njk b/_includes/presentationslist.njk
diff --git a/content/index.njk b/content/index.njk
@@ -2,18 +2,30 @@
 title: Presentations
 layout: layouts/home.njk
 ---
-<section>
-{% for p in collections.presentations %}
-  <div class="card">
-    <div class="card__img">
-      <a href="{{ p.url }}">
-        {% toImageTag p.data.image, p.data.title, 300 %}
-        <div class="card__overlay">
-          <h2>{{ p.data.title }}</h2>
-          <p>{{ p.data.tags | filterTagList | join(", ") }}</p>
-        </div>
-      </a>
+<div class="p-24 flex flex-wrap items-center justify-center">
+  {%- for p in collections.presentations %}
+  <div class="flex-initial card w-96 h-90 bg-slate-600 shadow-xl m-4 p-2">
+    <figure class="h-60">
+      <a href="{{ p.url }}">{% toImageTag p.data.image, p.data.title, [300] %}</a>
+    </figure>
+    <div class="card-body">
+      <h2 class="card-title">
+        <a href="{{ p.url }}">{{ p.data.title }}</a>
+      </h2>
+      <div class="card-actions justify-end">
+        {% for tag in p.data.tags | filterTagList %}
+        <div class="badge badge-outline">{{ tag | ucFirst }}</div>
+        {% endfor %}
+      </div>
+      {% if links %}
+      <div class="card-actions justify-end">
+        {% for link in p.data.links %}
+        <a role="button" href="{{link.url}}" class="btn {% if loop.first %}btn-primary{% else %}btn-secondary{% endif %}">{{ link.type | ucFirst }}</a>
+        {% endfor %}
+      </div>
+      {% endif %}
     </div>
   </div>
-{% endfor %}
-</section>
+  {%- endfor %}
+</div>
+