💄 add tailwind scripts (plus typography)

.eleventy.js

@@ -31,7 +31,6 @@ module.exports = function(eleventyConfig) {
       });
 
     collection.forEach((post) => {
-      console.log(post, "post")
       post.url = stripDomain(post.url);
       post.primary_author.url = stripDomain(post.primary_author.url);
 

_includes/layouts/post.njk

@@ -5,17 +5,21 @@
 {% set codeinjection_foot = post.codeinjection_foot %}
 
 {% block content %}
-    <article class="content">
+    <article class="h-entry prose lg:prose-lg dark:prose-invert" role="article">
+        <header>
+            <h1 class="p-name">{{ title }}</h1>
+            <time class="dt-published" datetime={{ post.published_at }} pubdate><a class="u-url text-gray-500 text-sm" href={{ post.url }}>{{ post.published_at }}</a></time>
+        </header>
         {% if post.feature_image %}
-            <figure class="post-feature-image">
-                <img src="{{ post.feature_image }}" alt="{{ title }}">
+            <figure class="md:-mx-12">
+                <img class="u-featured rounded-md shadow-md w-full" src="{{ post.feature_image }}" alt="{{ title }}">
             </figure>
         {% endif %}
-        <section class="post-full-content">
-            <h1 class="content-title">{{ title }}</h1>
-            <section class="content-body load-external-scripts">
-                {{ content | safe }}
-            </section>
+        <section class="e-content load-external-scripts">
+            {{ content | safe}}
         </section>
+        <footer class="flex flex-row not-prose">
+            
+        </footer>
     </article>
 {% endblock %}

index.njk

@@ -8,14 +8,16 @@ pagination:
 {% block content %}
   {% set postslist = collections.posts %}
 
-  {% for post in postslist  %}
-    <article class="h-entry">
-      <h2 class="p-name">
-        <a href="{{ post.url }}">{{ post.title }}</a>
-      </h2>
-      <div class="e-content">
-        {{ post.excerpt | safe }}
-      </div>
-    </article>
-  {% endfor %}
+  <section class="h-feed prose">
+    {% for post in postslist  %}
+      <article class="h-entry">
+        <h2 class="p-name">
+          <a href="{{ post.url }}">{{ post.title }}</a>
+        </h2>
+        <div class="e-content">
+          {{ post.excerpt | safe }}
+        </div>
+      </article>
+    {% endfor %}
+  </section>
 {% endblock %}

package.json

@@ -3,8 +3,13 @@
   "version": "1.0.0",
   "description": "The new blog. Just like the old blog.",
   "scripts": {
-    "build": "eleventy",
-    "start": "eleventy --serve --watch"
+    "build": "run-s clean prod css:prod",
+    "clean": "rimraf ./_site",
+    "css:prod": "tailwindcss -i ./css/style.css -o ./_site/css/style.css --minify",
+    "css:dev": "tailwindcss -i ./css/style.css -o ./_site/css/style.css --watch",
+    "dev": "eleventy --serve --watch",
+    "prod": "eleventy",
+    "start": "run-p clean css:dev dev"
   },
   "author": {
     "name": "James Walker",
@@ -16,8 +21,11 @@
     "@11ty/eleventy": "^1.0.1",
     "@11ty/eleventy-navigation": "^0.3.3",
     "@11ty/eleventy-plugin-rss": "^1.0.9",
+    "@tailwindcss/typography": "^0.5.2",
     "@tryghost/content-api": "^1.9.4",
     "dotenv": "^16.0.1",
+    "npm-run-all": "^4.1.5",
+    "rimraf": "^3.0.2",
     "tailwindcss": "^3.0.24"
   }
-}
+}

tailwind.config.js

@@ -5,5 +5,7 @@ module.exports = {
   theme: {
     extend: {},
   },
-  plugins: [],
+  plugins: [
+    require('@tailwindcss/typography'),
+  ],
 }