meta

.vitepress/config.mts

@@ -4,6 +4,7 @@ import UnoCSS from "unocss/vite";
 import { presetUno, presetAttributify, presetIcons } from "unocss";
 import { meta } from "./constants";
 import { pwa } from "./pwa";
+import { generateMeta } from "./hooks/meta";
 
 export default withPwa(
   defineConfig({
@@ -20,27 +21,27 @@ export default withPwa(
       hostname: meta.hostname,
     },
     head: [
+
       ["meta", { name: "theme-color", content: "#7bc5e4" }],
       ["meta", { name: "og:type", content: "website" }],
       ["meta", { name: "og:locale", content: "en" }],
       ["meta", { property: "og:type", content: "website" }],
       ["meta", { property: "og:title", content: meta.name }],
-      // ["meta", { property: "og:image", content: ogImage }],
+      ["link", { rel: "icon", href: "/fmhy.ico", sizes: "any" }],
-      ["meta", { property: "og:description", content: meta.description }],
+      ["link", { rel: "icon", href: "/test.png", type: "image/svg+xml" }],
-      // ["meta", { property: "og:url", content: ogUrl }],
+      ["link", { rel: "mask-icon", href: "/test.png", color: "#7bc5e4" }],
-      ["link", { rel: "icon", href: "/favicon.ico", sizes: "any" }],
+      // pwa
-      ["link", { rel: "icon", href: "/logo.svg", type: "image/svg+xml" }],
+      ["link", { rel: "alternate icon", href: "/test.png" }],
-      ["link", { rel: "apple-touch-icon", href: "/apple-touch-icon.png" }],
+      ["link", { rel: "apple-touch-icon", href: "/fmhy.png", sizes: "192x192" }],
       ["meta", { name: "apple-mobile-web-app-status-bar-style", content: "black-translucent" }],
-      ["meta", { name: "author", content: "Joaquín Sánchez" }],
       ["meta", { name: "keywords", content: meta.keywords.join(" ") }],
       ["meta", { name: "twitter:description", content: meta.description }],
       ["meta", { name: "twitter:title", content: meta.name }],
       ["meta", { name: "twitter:card", content: "summary_large_image" }],
-      // ["meta", { name: "twitter:image", content: ogImage }],
       ["meta", { name: "twitter:site", content: meta.hostname }],
-      // ["meta", { name: "twitter:url", content: ogUrl }],
     ],
+   transformHead: async (context) => generateMeta(context, meta.hostname),
+
     vite: {
       plugins: [
         UnoCSS({
@@ -72,7 +73,6 @@ export default withPwa(
         { text: "Updates", link: "https://www.reddit.com/r/FREEMEDIAHECKYEAH/wiki/updates/" },
       ],
       sidebar: [
-        { text: "🏴‍☠️ Beginners Guide to Piracy", link: "/Beginners-Guide" },
         { text: "📛 Adblocking / Privacy", link: "/AdblockVPNGuide" },
         { text: "🤖 Artificial Intelligence", link: "/AI" },
         { text: "📺 Movies / TV / Anime", link: "/VideoPiracyGuide" },

.vitepress/hooks/meta.ts

@@ -0,0 +1,78 @@
+import type { HeadConfig, TransformContext } from "vitepress";
+
+export function generateMeta(context: TransformContext, hostname: string) {
+  const head: HeadConfig[] = [];
+  const { pageData } = context;
+
+  const url = `${hostname}/${pageData.relativePath.replace(/((^|\/)index)?\.md$/, "$2")}`;
+
+  head.push(["link", { rel: "canonical", href: url }]);
+  head.push(["meta", { property: "og:url", content: url }]);
+  head.push(["meta", { name: "twitter:url", content: url }]);
+  head.push(["meta", { name: "twitter:card", content: "summary_large_image" }]);
+
+  if (pageData.frontmatter.theme) {
+    head.push(["meta", { name: "theme-color", content: pageData.frontmatter.theme }]);
+  }
+  if (pageData.frontmatter.type) {
+    head.push(["meta", { property: "og:type", content: pageData.frontmatter.type }]);
+  }
+  if (pageData.frontmatter.description) {
+    head.push([
+      "meta",
+      {
+        property: "og:description",
+        content: pageData.frontmatter.description,
+      },
+    ]);
+    head.push([
+      "meta",
+      {
+        name: "twitter:description",
+        content: pageData.frontmatter.description,
+      },
+    ]);
+  }
+  head.push(["meta", { property: "og:title", content: pageData.frontmatter.title }]);
+  head.push(["meta", { name: "twitter:title", content: pageData.frontmatter.title }]);
+
+  if (pageData.frontmatter.image) {
+    head.push([
+      "meta",
+      {
+        property: "og:image",
+        content: `${hostname}/${pageData.frontmatter.image.replace(/^\//, "")}`,
+      },
+    ]);
+    head.push([
+      "meta",
+      {
+        name: "twitter:image",
+        content: `${hostname}/${pageData.frontmatter.image.replace(/^\//, "")}`,
+      },
+    ]);
+  }
+  if (pageData.frontmatter.tag) {
+    head.push(["meta", { property: "article:tag", content: pageData.frontmatter.tag }]);
+  }
+  if (pageData.frontmatter.date) {
+    head.push([
+      "meta",
+      {
+        property: "article:published_time",
+        content: pageData.frontmatter.date,
+      },
+    ]);
+  }
+  if (pageData.lastUpdated && pageData.frontmatter.lastUpdated !== false) {
+    head.push([
+      "meta",
+      {
+        property: "article:modified_time",
+        content: new Date(pageData.lastUpdated).toISOString(),
+      },
+    ]);
+  }
+
+  return head;
+}

.vitepress/pwa.ts

@@ -1,10 +1,16 @@
 import type { PwaOptions } from "@vite-pwa/vitepress";
 import { meta } from "./constants";
+import { resolve } from "pathe";
+import fg from "fast-glob";
 
 export const pwa = {
   outDir: ".vitepress/dist",
   registerType: "autoUpdate",
   includeManifestIcons: false,
+  includeAssets: fg.sync("**/*.{png,webp,svg,gif,ico,txt}", {
+    cwd: resolve(__dirname, "../public"),
+  }),
+
   manifest: {
     id: "/",
     name: meta.name,
@@ -18,19 +24,20 @@ export const pwa = {
     display: "standalone",
     display_override: ["window-controls-overlay"],
     categories: meta.keywords,
+    // TODO: replace with actual icons
     icons: [
       {
-        src: "pwa-64x64.png",
+        src: "test.png",
         sizes: "64x64",
         type: "image/png",
       },
       {
-        src: "pwa-192x192.png",
+        src: "test.png",
         sizes: "192x192",
         type: "image/png",
       },
       {
-        src: "pwa-512x512.png",
+        src: "test.png",
         sizes: "512x512",
         type: "image/png",
         purpose: "any",
@@ -55,6 +62,9 @@ export const pwa = {
   },
   workbox: {
     globPatterns: ["**/*.{css,js,html,svg,png,ico,txt,woff2,json}"],
+    globIgnores: ["**/404.html"],
+    navigateFallback: null,
+
     runtimeCaching: [
       {
         urlPattern: /^https:\/\/fonts\.googleapis\.com\/.*/i,
@@ -86,4 +96,8 @@ export const pwa = {
       },
     ],
   },
+  devOptions: {
+    enabled: true,
+    suppressWarnings: false,
+  },
 } satisfies PwaOptions;

package.json

@@ -8,6 +8,8 @@
     "format": "prettier -w ."
   },
   "dependencies": {
+    "fast-glob": "^3.3.1",
+    "pathe": "^1.1.1",
     "unocss": "^0.57.1",
     "vitepress": "1.0.0-rc.24",
     "vue": "^3.3.7",

pnpm-lock.yaml

@@ -5,6 +5,12 @@ settings:
   excludeLinksFromLockfile: false
 
 dependencies:
+  fast-glob:
+    specifier: ^3.3.1
+    version: 3.3.1
+  pathe:
+    specifier: ^1.1.1
+    version: 1.1.1
   unocss:
     specifier: ^0.57.1
     version: 0.57.1(postcss@8.4.31)(rollup@2.79.1)(vite@4.5.0)

public/_headers

@@ -1,3 +1,9 @@
 /assets/*
   cache-control: max-age=31536000
   cache-control: immutable
+
+/*
+    X-Robots-Tag: noarchive
+
+/manifest.webmanifest
+    Content-Type: application/manifest+json

public/robots.txt

@@ -0,0 +1,2 @@
+User-agent: *
+Allow: /