✨ add localImages plugin

.eleventy.js

@@ -3,6 +3,7 @@ require("dotenv").config();
 const GhostContentAPI = require("@tryghost/content-api");
 const pluginNavigation = require("@11ty/eleventy-navigation");
 const pluginRss = require("@11ty/eleventy-plugin-rss");
+const localImages = require('eleventy-plugin-local-images');
 
 const api = new GhostContentAPI({
   url: process.env.GHOST_API_URL,
@@ -20,6 +21,13 @@ module.exports = function(eleventyConfig) {
 
   eleventyConfig.addPassthroughCopy("css");
 
+  eleventyConfig.addPlugin(localImages, {
+    distPath: '_site',
+    assetPath: '/assets/images',
+    selector: 'img',
+    verbose: false
+  });
+
   eleventyConfig.addCollection("posts", async function (collection) {
     collection = await api.posts
       .browse({

docker-compose.yml

@@ -1,11 +1,24 @@
 version: "3"
 services:
   ghost:
-    image: ghost:4-alpine
+    image: ghost:5-alpine
     ports:
       - 2368:2368
+    environment:
+      # see https://ghost.org/docs/config/#configuration-options
+      database__client: mysql
+      database__connection__host: db
+      database__connection__user: root
+      database__connection__password: password
+      database__connection__database: ghost
+      url: http://localhost:2368
     restart: unless-stopped
     volumes:
       - ghost:/var/lib/ghost/content
+  db:
+    image: mysql:8.0
+    restart: always
+    environment:
+      MYSQL_ROOT_PASSWORD: password
 volumes:
   ghost:

index.njk

@@ -8,7 +8,7 @@ pagination:
 {% block content %}
   {% set postslist = collections.posts %}
 
-  <section class="h-feed prose">
+  <section class="h-feed prose dark:prose-invert">
     {% for post in postslist  %}
       <article class="h-entry">
         <h2 class="p-name">

package.json

@@ -24,6 +24,7 @@
     "@tailwindcss/typography": "^0.5.2",
     "@tryghost/content-api": "^1.9.4",
     "dotenv": "^16.0.1",
+    "eleventy-plugin-local-images": "^0.4.1",
     "npm-run-all": "^4.1.5",
     "rimraf": "^3.0.2",
     "tailwindcss": "^3.0.24"