Auto-generate favicons (#183)

.gitignore

@@ -7,3 +7,7 @@ node_modules
 # Build output
 dist
 stats.html
+
+# Favicon generation
+public/favicons
+*.generated.astro

.prettierignore

@@ -1,13 +0,0 @@
-# Dependencies
-node_modules
-
-# OS
-.DS_Store
-
-# Build output
-dist
-stats.html
-
-# Favicon generation output
-**/favicons/**
-*.auto-generated*

package-lock.json

@@ -7,6 +7,7 @@
     "": {
       "name": "devscard",
       "version": "0.0.1",
+      "hasInstallScript": true,
       "dependencies": {
         "@floating-ui/dom": "1.1.0",
         "iconify-icon": "1.0.2",

package.json

@@ -10,13 +10,14 @@
     "pnpm": "please-use-npm"
   },
   "scripts": {
+    "postinstall": "npm run generate-favicons",
     "dev": "astro dev",
-    "build": "astro build",
+    "build": "npm run generate-favicons && astro build",
     "preview": "astro preview",
     "generate-pdf": "ts-node scripts/generate-pdf.ts",
     "generate-favicons": "ts-node scripts/generate-favicons.ts",
-    "prettier:check": "prettier --check .",
+    "prettier:check": "prettier --check . --ignore-path .gitignore",
-    "prettier:write": "prettier --write .",
+    "prettier:write": "prettier --write . --ignore-path .gitignore",
     "astro:check": "astro check",
     "ts:check": "tsc --jsx preserve --skipLibCheck",
     "check": "concurrently npm:*:check"

public/favicons/manifest.webmanifest

@@ -1,26 +0,0 @@
-{
-  "name": "Mark Freeman - Senior React Developer",
-  "short_name": "Mark Freeman - Senior React Developer",
-  "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sodales ac dui at vestibulum. In condimentum metus id dui tincidunt, in blandit mi vehicula.",
-  "dir": "auto",
-  "lang": "en-US",
-  "display": "standalone",
-  "orientation": "any",
-  "start_url": ".",
-  "background_color": "#fff",
-  "theme_color": "#fff",
-  "icons": [
-    {
-      "src": "/favicons/android-chrome-192x192.png",
-      "sizes": "192x192",
-      "type": "image/png",
-      "purpose": "any"
-    },
-    {
-      "src": "/favicons/android-chrome-512x512.png",
-      "sizes": "512x512",
-      "type": "image/png",
-      "purpose": "any"
-    }
-  ]
-}

scripts/generate-favicons.ts

@@ -3,17 +3,11 @@ import config from '../src/data/config';
 import { mkdir, writeFile, rm } from 'fs/promises';
 import { existsSync } from 'fs';
 
-const faviconsDirectory = './public/favicons';
+const FAVICONS_DIR = './public/favicons';
+const ASTRO_FILE_PATH = './src/web/head/favicons.generated.astro';
 
-const saveFile = async (file: FaviconFile | FaviconImage) => {
+const generateFavicons = () =>
-  await writeFile(`${faviconsDirectory}/${file.name}`, file.contents);
+  favicons(`.${config.meta.faviconPath}`, {
-  console.log(`${file.name} has been created successfully`);
-};
-
-(async () => {
-  const { faviconPath } = config.meta;
-
-  const response = await favicons(`.${faviconPath}`, {
     ...faviconsConfig.defaults,
     path: '/favicons',
     appName: config.meta.title,
@@ -31,23 +25,41 @@ const saveFile = async (file: FaviconFile | FaviconImage) => {
     },
   });
 
-  if (existsSync(faviconsDirectory)) {
+const clearFaviconsDir = async () => {
-    await rm(faviconsDirectory, { recursive: true });
+  if (existsSync(FAVICONS_DIR)) {
+    await rm(FAVICONS_DIR, { recursive: true });
   }
 
-  await mkdir(faviconsDirectory);
+  await mkdir(FAVICONS_DIR);
+};
 
-  await Promise.all([...response.images, ...response.files].map(saveFile));
+const saveFaviconAsset = async (file: FaviconFile | FaviconImage) => {
+  await writeFile(`${FAVICONS_DIR}/${file.name}`, file.contents);
 
+  console.log(`${file.name} has been created successfully`);
+};
+
+const generateAstroFile = async (html: string[]) => {
   const comments = [
     '<!-- This file is auto-generated. Do not edit it manually. -->\n',
     '<!-- In order to apply changes to it, adjust configuration object in generate-favicons.ts script and run it -->\n',
   ];
 
-  const formattedHtml = response.html.map((line) => line.replace('>', '/>')).join('\n');
+  const formattedHtml = html.map((line) => line.replace('>', '/>')).join('\n');
 
-  const pathToFaviconsFile = './src/web/head/favicons.auto-generated.astro';
+  await writeFile(ASTRO_FILE_PATH, [...comments, formattedHtml, '\n']);
 
-  await writeFile(pathToFaviconsFile, [...comments, formattedHtml, '\n']);
+  console.log(`${ASTRO_FILE_PATH} has been updated successfully`);
-  console.log(`${pathToFaviconsFile} has been updated successfully`);
+};
-})();
+
+const main = async () => {
+  const { images, files, html } = await generateFavicons();
+
+  await clearFaviconsDir();
+
+  await Promise.all([...images, ...files].map(saveFaviconAsset));
+
+  await generateAstroFile(html);
+};
+
+main();

src/web/head/favicons.auto-generated.astro

@@ -1,12 +0,0 @@
-<!-- This file is auto-generated. Do not edit it manually. -->
-<!-- In order to apply changes to it, adjust configuration object in generate-favicons.ts script and run it -->
-<link rel="icon" type="image/x-icon" href="/favicons/favicon.ico"/>
-<link rel="icon" type="image/png" sizes="16x16" href="/favicons/favicon-16x16.png"/>
-<link rel="icon" type="image/png" sizes="32x32" href="/favicons/favicon-32x32.png"/>
-<link rel="manifest" href="/favicons/manifest.webmanifest"/>
-<meta name="mobile-web-app-capable" content="yes"/>
-<meta name="theme-color" content="#fff"/>
-<meta name="application-name" content="Mark Freeman - Senior React Developer"/>
-<meta name="apple-mobile-web-app-capable" content="yes"/>
-<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
-<meta name="apple-mobile-web-app-title" content="Mark Freeman - Senior React Developer"/>

src/web/head/head.astro

@@ -1,7 +1,7 @@
 ---
 import Fonts from '@/components/fonts.astro';
 import type { MetaConfig } from '@/types/config/meta-config.types';
-import Favicons from './favicons.auto-generated.astro';
+import Favicons from './favicons.generated.astro';
 import InitialTheme from './initial-theme.astro';
 import Meta from './meta.astro';