upgrade to bliss 2.3.4 (#46)

README.md

@@ -10,7 +10,9 @@ It is a modified and improved version of the theme running [Offbeat Bits - my pe
 - **sharing buttons for popular social media** (including Mastodon!) + copying post URL to clipboard
 - **Mastodon integration:** generating `.well-known/webfinger` file + automatic generation of `<link rel="me">` tags for site ownership verification
 - **translation ready** (support for custom language tags + separate file with static phrases)
+- **automatic favicon generation**
 - **manifest file** for PWA
+- **automatic OpenGraph image generation**
 - **code syntax highlighting** with PrismJS using [Eleventy syntax highlighting plugin](https://www.11ty.dev/docs/plugins/syntaxhighlight/)
 - **HTML, JS, JSON, CSS** optimizations
 - **RSS, JSON, Twtxt.txt** feeds + JSON-LD data
@@ -20,15 +22,9 @@ It is a modified and improved version of the theme running [Offbeat Bits - my pe
 - custom disclaimers alongside post content
 - and more
 
-**Features I'm currently exploring (no promises or anything yet ;)):**
+## Live demo
 
-- improved OpenGraph support (automatic generation + support for custom images)
-
-## Live demos
-
-On Netlify: https://eleventy-bliss.netlify.app/
-
-On Vercel: https://eleventy-bliss.vercel.app/
+https://eleventy-bliss.lkmt.us/
 
 ## Instant deploy
 
@@ -40,6 +36,10 @@ Vercel:
 
 [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/lwojcik/eleventy-template-bliss)
 
+Render:
+
+[![Deploy to Render](https://render.com/images/deploy-to-render-button.svg)](https://render.com/deploy?repo=https://github.com/lwojcik/eleventy-template-bliss)
+
 ## Configuration
 
 See [`siteConfig.js`](./content/_data/siteConfig.js). Inline documentation is available in the file.
@@ -58,15 +58,37 @@ Non-exhaustive list of steps to make the template **your own**. Some of them are
 - [ ] Modify color palette to your liking - edit relevant variables in [`_variables.scss`](./src/styles/_variables.scss)
 - [ ] If you changed the color palette - modify theme color and background color for PWA manifest - see [`siteConfig.js`](./content/_data/siteConfig.js)
 - [ ] If you changed the color palette - modify base color for RSS XSL stylesheet - see [`siteConfig.js`](./content/_data/siteConfig.js)
+- [ ] Enable automatic OpenGraph image generation - note that they only work for pages and posts
 - [ ] Add your own posts - use the existing placeholder posts as a reference
 - [ ] If you use post disclaimers at the beginning of your posts - consider using the built-in disclaimer feature - see [`06-10-sample-post-33-disclaimer.md`](./content/posts/2023/06-10-sample-post-33-disclaimer.md) or [`05-31-sample-post-32-linked-disclaimer.md`](./content/posts/2023/05-31-sample-post-32-linked-disclaimer.md) for reference
 - [ ] Add your own pages - use one of the existing placeholder pages as a reference
 - [ ] Add / remove meta pages in the footer - see [`siteConfig.js`](./content/_data/siteConfig.js)
-- [ ] Replace favicon files (`favicon.ico`, `favicon.svg`, `icon-192.png`, `icon-512.png`, `apple-touch-icon.png`) with ones relevant to your site
+- [ ] Replace a favicon file (`favicon.svg`) with your own - only one file is needed, the remaining ones will be generated on build
 - [ ] Replace OpenGraph images with ones relevant to your site
+- [ ] Decide if you want to use automated OpenGragh image generation + consider modifying their appearance to suit your taste (see `siteConfig.js` for more info)
 - [ ] Copy your existing static assets to `assets` folder. Note that the top of `assets` folder corresponds to the _root directory_ of your site (`_site`)
 - [ ] Modify anything else you don't like about the theme to match your preferences
-- [ ] Enjoy! :)
+- [ ] Enjoy! 😊
+
+## Optional customizations
+
+### Make titles optional + use file slugs for permalinks
+
+By default, the template assumes each post and each page to have a title and generates a permalink out using a `slugify` function. In other words, it converts `A title like this!` into `a-title-like-this`.
+
+If you want your posts to have no title, open `content/posts/posts.json` file and modify the following line:
+
+```json
+  "permalink": "{% if customPermalink %}{{ customPermalink }}{% else %}/{{ title | slugify }}/{% endif %}",
+```
+
+into the following:
+
+```json
+  "permalink": "{% if customPermalink %}{{ customPermalink }}{% else %}/{{ page.fileSlug }}/{% endif %}",
+```
+
+You can do the same for pages by modifying `content/pages/pages.json` file.
 
 ## Contributions
 

_11ty/collections/tagList.js

@@ -1,5 +1,8 @@
 const moduleName = require('../helpers/moduleName');
 const { EXCLUDED_TAGS } = require('../constants');
+const siteConfig = require('../../content/_data/siteConfig');
+
+const { language, options } = siteConfig.localeSort;
 
 module.exports = {
   name: moduleName(__filename),
@@ -11,6 +14,8 @@ module.exports = {
         .filter((tag) => !EXCLUDED_TAGS.includes(tag))
         .forEach((tag) => tagsSet.add(tag));
     });
-    return Array.from(tagsSet).sort();
+    return Array.from(tagsSet).sort((a, b) =>
+      a.localeCompare(b, language, options)
+    );
   },
 };

_11ty/constants.js

@@ -18,7 +18,7 @@ module.exports = {
   POST_COLLECTION_TAG_NAME: 'post',
   PAGE_COLLECTION_TAG_NAME: 'page',
   POSTS_PER_TAG_PAGE: siteConfig.tags.postsPerPage,
-  IS_PRODUCTION: process.env.NODE_ENV === 'production',
+  IS_PRODUCTION: process.env.ELEVENTY_ENV === 'production',
   SLUGIFY_CONFIG: {
     replacement: '-',
     lower: true,

_11ty/events.js

@@ -0,0 +1,7 @@
+const socialImages = require('./events/socialImages');
+
+const afterBuildEvents = [socialImages];
+
+module.exports = {
+  after: afterBuildEvents,
+};

_11ty/events/socialImages.js

@@ -0,0 +1,39 @@
+const fs = require('fs');
+const path = require('path');
+const Image = require('@11ty/eleventy-img');
+const siteConfig = require('../../content/_data/siteConfig');
+
+const SOCIAL_PREVIEW_IMAGES_DIR = path.join('_site', 'images', 'share');
+const OUTPUT_IMAGE_EXTENSION = 'jpg';
+
+module.exports = () => {
+  const files = fs.readdirSync(SOCIAL_PREVIEW_IMAGES_DIR);
+
+  if (siteConfig.opengraph.enableImageGeneration) {
+    if (files && files.length > 0) {
+      files.forEach(async (filename) => {
+        if (filename.endsWith('.svg')) {
+          const imageUrl = path.join(SOCIAL_PREVIEW_IMAGES_DIR, filename);
+
+          await Image(imageUrl, {
+            formats: ['jpeg'],
+            outputDir: path.join('.', SOCIAL_PREVIEW_IMAGES_DIR),
+            filenameFormat: () => {
+              const outputFilename = filename.substring(0, filename.length - 4);
+
+              return `${outputFilename}.${OUTPUT_IMAGE_EXTENSION}`;
+            },
+          });
+
+          // we no longer need SVG files after converting to JPG so we remove them
+
+          // fs.unlinkSync(imageUrl);
+        }
+      });
+    }
+  } else {
+    // If OG image generation is off, SVG files are not needed,
+    // so we remove them from the build
+    fs.rmSync(SOCIAL_PREVIEW_IMAGES_DIR, { recursive: true, force: true });
+  }
+};

_11ty/filters/splitlines.js

@@ -0,0 +1,30 @@
+const moduleName = require('../helpers/moduleName');
+
+const CHARACTERS_PER_LINE = 14;
+
+const body = (input) => {
+  const parts = input.split(' ');
+
+  const lines = parts.reduce((prev, current) => {
+    if (!prev.length) {
+      return [current];
+    }
+
+    const lastOne = prev[prev.length - 1];
+
+    if (lastOne.length + current.length > CHARACTERS_PER_LINE) {
+      return [...prev, current];
+    }
+
+    prev[prev.length - 1] = lastOne + ' ' + current;
+
+    return prev;
+  }, []);
+
+  return lines;
+};
+
+module.exports = {
+  name: moduleName(__filename),
+  body,
+};

_11ty/helpers/getCollectionKeyValues.js

@@ -1,4 +1,7 @@
 const slugifyString = require('./slugifyString');
+const siteConfig = require('../../content/_data/siteConfig');
+
+const { language, options } = siteConfig.localeSort;
 
 /**
  * Returns array of unique key values for passed collection
@@ -12,7 +15,7 @@ const uniqueKeyValues = (collection, key) => {
   let collectionKeyValues = collection
     .filter((item) => key in item.data)
     .flatMap((item) => item.data[key])
-    .sort((a, b) => a.localeCompare(b, 'en', { sensitivity: 'base' }));
+    .sort((a, b) => a.localeCompare(b, language, options));
 
   // dedupe
   let uniqueValues = [...new Set(collectionKeyValues)];

_11ty/index.js

@@ -7,6 +7,7 @@ const shortcodes = requireDir('./shortcodes');
 const filters = requireDir('./filters');
 const plugins = require('./plugins');
 const constants = require('./constants');
+const events = require('./events');
 
 module.exports = {
   initialSetup,
@@ -17,4 +18,5 @@ module.exports = {
   filters,
   plugins,
   constants,
+  events,
 };

_11ty/plugins.js

@@ -1,12 +1,13 @@
-/* eslint-disable indent */
 const { IS_PRODUCTION } = require('./constants');
+const siteConfig = require('../content/_data/siteConfig');
 const pluginRss = require('@11ty/eleventy-plugin-rss');
 const { EleventyHtmlBasePlugin } = require('@11ty/eleventy');
 const pluginEmoji = require('eleventy-plugin-emoji');
 const eleventyNavigationPlugin = require('@11ty/eleventy-navigation');
 const srcSet = require('./plugins/srcset');
 const pluginPWA = require('eleventy-plugin-pwa-v2');
 const syntaxHighlight = require('@11ty/eleventy-plugin-syntaxhighlight');
+const faviconsPlugin = require('eleventy-plugin-gen-favicons');
 
 const productionPlugins = IS_PRODUCTION
   ? [
@@ -16,6 +17,32 @@ const productionPlugins = IS_PRODUCTION
     ]
   : [];
 
+const pwaPluginConfig = siteConfig.enablePWA
+  ? [
+      {
+        body: pluginPWA,
+        options: {
+          cacheId: siteConfig.site.title,
+          runtimeCaching: [
+            {
+              urlPattern: /\/$/,
+              handler: 'NetworkFirst',
+            },
+            {
+              urlPattern: /\.html$/,
+              handler: 'NetworkFirst',
+            },
+            {
+              urlPattern:
+                /^.*\.(jpg|png|mp4|gif|webp|ico|svg|woff2|woff|eot|ttf|otf|ttc|json)$/,
+              handler: 'StaleWhileRevalidate',
+            },
+          ],
+        },
+      },
+    ]
+  : [];
+
 const plugins = [
   {
     body: EleventyHtmlBasePlugin,
@@ -30,11 +57,25 @@ const plugins = [
     body: eleventyNavigationPlugin,
   },
   {
-    body: pluginPWA,
+    body: syntaxHighlight,
   },
   {
-    body: syntaxHighlight,
+    body: faviconsPlugin,
+    options: {
+      manifestData: {
+        name: siteConfig.site.title,
+        lang: siteConfig.site.language,
+        short_name: siteConfig.site.title,
+        description: siteConfig.site.description,
+        start_url: '/',
+        scope: '/',
+        display: 'standalone',
+        theme_color: siteConfig.manifestJson.themeColor,
+        background_color: siteConfig.manifestJson.backgroundColor,
+        orientation: 'any',
+      },
+    },
   },
 ];
 
-module.exports = [...plugins, ...productionPlugins];
+module.exports = [...plugins, ...pwaPluginConfig, ...productionPlugins];

_11ty/transforms/minifyHTML.js

@@ -1,4 +1,3 @@
-const moduleName = require('../helpers/moduleName');
 const TerserHTML = require('html-minifier-terser');
 const { IS_PRODUCTION } = require('../constants');
 
@@ -16,14 +15,9 @@ const HTML_MINIFIER_OPTIONS = {
   removeStyleLinkTypeAttributes: true,
 };
 
-const body = (content, outputPath) => {
+module.exports = (content, outputPath) => {
   if (IS_PRODUCTION && outputPath && outputPath.endsWith('.html')) {
     return TerserHTML.minify(content, HTML_MINIFIER_OPTIONS);
   }
   return content;
 };
-
-module.exports = {
-  name: moduleName(__filename),
-  body,
-};

_11ty/transforms/minifyJS.js

@@ -1,21 +1,15 @@
-const moduleName = require('../helpers/moduleName');
 const { minify } = require('terser');
 const { IS_PRODUCTION } = require('../constants');
 
 const JS_MINIFIER_OPTIONS = {
   mangle: true,
 };
 
-const body = async (content, outputPath) => {
+module.exports = async (content, outputPath) => {
   if (IS_PRODUCTION && outputPath && outputPath.endsWith('.js')) {
     const minified = await minify(content, JS_MINIFIER_OPTIONS);
     return minified.code;
   } else {
     return content;
   }
 };
-
-module.exports = {
-  name: moduleName(__filename),
-  body,
-};

_11ty/transforms/minifyJSON.js

@@ -1,15 +1,9 @@
 const jsonminify = require('jsonminify');
 const { IS_PRODUCTION } = require('../constants');
-const moduleName = require('../helpers/moduleName');
 
-const body = (content, outputPath) => {
+module.exports = (content, outputPath) => {
   if (IS_PRODUCTION && outputPath && outputPath.endsWith('.json')) {
     return jsonminify(content);
   }
   return content;
 };
-
-module.exports = {
-  name: moduleName(__filename),
-  body,
-};

_11ty/transforms/minifyXML.js

@@ -1,20 +1,16 @@
-const moduleName = require('../helpers/moduleName');
-const minifyXML = require('minify-xml').minify;
+const minifyXML = import('minify-xml');
 const { IS_PRODUCTION } = require('../constants');
 
 const XML_MINIFIER_OPTIONS = {
   trimWhitespaceFromTexts: true,
   collapseWhitespaceInTexts: true,
 };
 
-const body = (content, outputPath) => {
+module.exports = async (content, outputPath) => {
   if (IS_PRODUCTION && outputPath && outputPath.endsWith('.xml')) {
-    return minifyXML(content, XML_MINIFIER_OPTIONS);
+    const minifier = await minifyXML;
+    const { minify } = minifier;
+    return minify(content, XML_MINIFIER_OPTIONS);
   }
   return content;
 };
-
-module.exports = {
-  name: moduleName(__filename),
-  body,
-};

assets/_headers

@@ -25,6 +25,6 @@
 /apple-touch-icon.png
   cache-control: max-age=31536000,public,immutable
 
-/manifest.json
+/manifest.webmanifest
   Content-Type: application/manifest+json
   cache-control: max-age=31536000,public,immutable