feat: add Visor to example site

binzcodes · binzcodes · commit 2d4ffa772eaf · 2024-10-25T17:17:04.000+01:00
diff --git a/examples/example-site/astro.config.mjs b/examples/example-site/astro.config.mjs
@@ -1,5 +1,5 @@
 // @ts-check
-import { defineConfig } from 'astro/config';
+import {defineConfig} from "astro/config";
 
 // https://astro.build/config
 export default defineConfig({});
diff --git a/examples/example-site/package.json b/examples/example-site/package.json
@@ -12,6 +12,7 @@
   "dependencies": {
     "astro": "^4.16.7",
     "@astrojs/check": "^0.9.4",
-    "typescript": "^5.6.3"
+    "typescript": "^5.6.3",
+    "@binz/visor": "workspace:*"
   }
 }
diff --git a/examples/example-site/src/images/Logo.svg b/examples/example-site/src/images/Logo.svg
@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 128 128">
+    <path d="M50.4 78.5a75.1 75.1 0 0 0-28.5 6.9l24.2-65.7c.7-2 1.9-3.2 3.4-3.2h29c1.5 0 2.7 1.2 3.4 3.2l24.2 65.7s-11.6-7-28.5-7L67 45.5c-.4-1.7-1.6-2.8-2.9-2.8-1.3 0-2.5 1.1-2.9 2.7L50.4 78.5Zm-1.1 28.2Zm-4.2-20.2c-2 6.6-.6 15.8 4.2 20.2a17.5 17.5 0 0 1 .2-.7 5.5 5.5 0 0 1 5.7-4.5c2.8.1 4.3 1.5 4.7 4.7.2 1.1.2 2.3.2 3.5v.4c0 2.7.7 5.2 2.2 7.4a13 13 0 0 0 5.7 4.9v-.3l-.2-.3c-1.8-5.6-.5-9.5 4.4-12.8l1.5-1a73 73 0 0 0 3.2-2.2 16 16 0 0 0 6.8-11.4c.3-2 .1-4-.6-6l-.8.6-1.6 1a37 37 0 0 1-22.4 2.7c-5-.7-9.7-2-13.2-6.2Z" />
+    <style>
+        path { fill: #000; }
+        @media (prefers-color-scheme: dark) {
+            path { fill: #FFF; }
+        }
+    </style>
+</svg>
diff --git a/examples/example-site/src/layouts/Layout.astro b/examples/example-site/src/layouts/Layout.astro
@@ -1,21 +1,30 @@
 ---
+import {Visor} from '@binz/visor';
+import logoSvgSrc from '../images/Logo.svg';
+
 interface Props {
-	title: string;
+  title: string;
 }
 
-const { title } = Astro.props;
+const { title: pageTitle } = Astro.props;
+const canonicalUrl = Astro.url; // requires `site` in astro.config.mjs
 ---
 
 <!doctype html>
 <html lang="en">
-	<head>
-		<meta charset="UTF-8" />
-		<meta name="description" content="Astro description" />
-		<meta name="viewport" content="width=device-width" />
-		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
-		<meta name="generator" content={Astro.generator} />
-		<title>{title}</title>
-	</head>
+  <Visor
+    author={{
+      name: "Joe Bloggs",
+      twitterHandle: "@joe_blogs"
+    }}
+    canonicalURL={canonicalUrl}
+    description="Built with visor"
+    defaultKeywords={[]}
+    siteName="Example Site"
+    siteFaviconSvg={logoSvgSrc}
+    socialImagePath="/social.jpg"
+    title={pageTitle}
+  />
 	<body>
 		<slot />
 	</body>
diff --git a/examples/example-site/src/pages/favicon.ico.ts b/examples/example-site/src/pages/favicon.ico.ts
@@ -0,0 +1,7 @@
+import type {APIRoute} from "astro";
+import Favicon from "@binz/visor/src/lib/favicon";
+import path from "node:path";
+
+const faviconSrc = path.resolve("src/images/Logo.svg");
+
+export const GET: APIRoute = Favicon({faviconSrc});
diff --git a/examples/example-site/src/pages/index.astro b/examples/example-site/src/pages/index.astro
@@ -33,7 +33,7 @@ import Card from '../components/Card.astro';
 				</linearGradient>
 			</defs>
 		</svg>
-		<h1>Welcome to <span class="text-gradient">Astro</span></h1>
+		<h1>Welcome to <span class="text-gradient">Visor</span></h1>
 		<p class="instructions">
 			To get started, open the directory <code>src/pages</code> in your project.<br />
 			<strong>Code Challenge:</strong> Tweak the "Welcome to Astro" message above.
diff --git a/examples/example-site/src/pages/manifest.json.ts b/examples/example-site/src/pages/manifest.json.ts
@@ -0,0 +1,21 @@
+import path from "node:path";
+import type {APIRoute} from "astro";
+import Manifest from "@binz/visor/src/lib/manifest";
+
+import favicon from "../images/favicon.ico";
+
+const faviconPngSizes = [192, 512];
+
+export const GET: APIRoute = Manifest({
+  name: "Example Site",
+  description: "An example site",
+  start_url: "/",
+  display: "standalone",
+  id: "example-com",
+  background_color: "#FFFFFF",
+  theme_color: "#B9FF66",
+  favicon: {
+    src: favicon,
+    faviconSizes: faviconPngSizes,
+  },
+});
diff --git a/packages/visor/src/components/Head.astro b/packages/visor/src/components/Head.astro
@@ -66,7 +66,7 @@ const appleTouchIcon = await getImage({
 })
 // const faviconSvg = await getImage({ src: siteFaviconSvg, format: 'svg' })
 
-const canonicalImageSrc = new URL(socialImage, Astro.site);
+const canonicalImageSrc = new URL(socialImage, canonicalURL)
 const sanitizedDescription = description.replace(/(<([^>]+)>)/gi, '');
 
 const keywords = Array.from(
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml

Original file line number	Diff line number	Diff line change
`@@ -12,6 +12,7 @@`
`12`	`12`	`"dependencies": {`
`13`	`13`	`"astro": "^4.16.7",`
`14`	`14`	`"@astrojs/check": "^0.9.4",`
`15`		`- "typescript": "^5.6.3"`
	`15`	`+ "typescript": "^5.6.3",`
	`16`	`+ "@binz/visor": "workspace:*"`
`16`	`17`	`}`
`17`	`18`	`}`