Add manifest

README.md

@@ -58,8 +58,11 @@ theme: jekyll-theme-tallneck
     - [privacy.md](privacy.md)
     - [terms.md](terms.md)
 
-4. Create the `assets/image` folder and put a replacement for the default image named `default.webp` or change its name in the `_config.yml` file.
-5. In the same folder, put also a replacement for `favicon.ico`, `favicon.svg` and `logo.svg` (logo.svg will be used as the home button).
+4. Create the `assets/image` folder and put a replacement for the following images:
+    - `favicon.ico` and `favicon.svg` that will be used as the favicon.
+    - `logo.svg` that will be used as the home button.
+    - `pwa_icon.svg`, `pwa_icon_x512.png`, `pwa_icon_x96.png` that will be used as the PWA icon. ([https://maskable.app/editor](https://maskable.app/editor) can be used to create the maskable icon)
+5. In the `assets` folder, create the sitemanifest.json file and edit it to your liking.
 6. [Optional] Customize the theme by creating the `_sass` folder and editing `custom_variables.scss` and `custom_styles.scss` files.
 7. Edit the `_config.yml` file to your liking (you can use the [config](/_config.yml) file in this repo as a template).
 

_config.yml

@@ -6,7 +6,7 @@ copyright: "Copyright (c) 2024 John Toniutti"
 author: John Toniutti
 keywords: "tallneck, test, jekyll, theme, jekyll-theme-tallneck"
 tagline: "Tallneck test | This a tagline"
-description: "This is a description"
+description: "Preview for the theme Tallneck for Jeckyll."
 url: "https://jotonedev.github.io/tallneck-test"
 
 social: true

_includes/head.html

@@ -7,6 +7,7 @@
     <meta content="#252525" media="(prefers-color-scheme: dark)" name="theme-color">
     <meta content="yes" name="apple-mobile-web-app-capable">
     <meta content="black-translucent" name="apple-mobile-web-app-status-bar-style">
+    <link rel="manifest" href="/assets/sitemanifest.json">
     <meta name="theme-color" content="#282828"/>
 
     {% if page.private %}
@@ -34,8 +35,8 @@
     <link rel="stylesheet" href="{{ "/assets/css/print.css" | relative_url }}" media="print" fetchpriority="low">
 
     <!-- Favicon -->
-    <link rel="icon" href="{{ site.favicon_ico | relative_url }}" sizes="any">
-    <link rel="icon" href="{{ site.favicon | relative_url }}" type="image/svg+xml">
+    <link rel="icon" href="{{ /assets/image/favicon.ico | relative_url }}" sizes="any">
+    <link rel="icon" href="{{ /assets/image/favicon.svg | relative_url }}" type="image/svg+xml">
 
     <!-- Analytics -->
     {% if site.cloudflare %}

assets/sitemanifest.json

@@ -0,0 +1,28 @@
+{
+    "name": "Tallneck preview",
+    "short_name": "Tallneck",
+    "lang": "en",
+    "description": "Preview for the theme Tallneck for Jeckyll.",
+    "categories": ["personalization", "utilities", "medical"],
+    "start_url": "/tallneck-test",
+    "icons": [
+        {
+            "src": "/assets/image/pwa_icon.svg",
+            "sizes": "any",
+            "type": "image/svg+xml"
+        },
+        {
+            "src": "/assets/image/pwa_icon_x96.png",
+            "sizes": "96x96",
+            "type": "image/png"
+        },
+        {
+            "src": "/assets/image/pwa_icon_x512.png",
+            "sizes": "512x512",
+            "type": "image/png"
+        }
+    ],
+    "theme_color": "#282828",
+    "background_color": "#282828",
+    "display": "standalone"
+}