Merging of SEO optimizations, sitemap and robots.txt

.github/workflows/unlighthouse.yaml

@@ -29,32 +29,45 @@ jobs:
       - name: Checkout repository
         uses: actions/[email protected]
 
+      - name: Setup pnpm
+        uses: pnpm/[email protected]
+        with:
+          version: latest
+
       - name: Use Node.js ${{ matrix.node-version }}
         uses: actions/[email protected]
         with:
           node-version: ${{ matrix.node-version }}
+          cache: 'pnpm'
 
-      - name: Install dependencies
-        run: npm install
-
-      - name: Build production
-        run: npm run build
+      - name: Retrieve Vercel Preview URL
+        uses: zentered/[email protected]
+        id: vercel_preview_url
+        env:
+          VERCEL_TOKEN: ${{ secrets.VERCEL_TOKEN }}
+        with:
+          vercel_project_id: ${{ vars.VERCEL_PROJECT_ID }}
 
-      - name: Start Preview and Get Preview URL
-        run: npm run preview -- --port=${{ env.PORT }} & echo $! > preview_pid
+      - name: Await Vercel Deployment
+        uses: UnlyEd/[email protected]
+        env:
+          VERCEL_TOKEN: ${{ secrets.VERCEL_TOKEN }}
+        with:
+          deployment-url: ${{ steps.vercel_preview_url.outputs.preview_url }}
+          timeout: 120
 
       - name: Install Dependencies
-        run: npm add -g @unlighthouse/cli puppeteer
+        run: pnpm install -g @unlighthouse/cli puppeteer
 
       - name: Run Unlighthouse
         run: |
           unlighthouse-ci \
-            --site "http://localhost:${{ env.PORT }}" \
+            --site "${{ steps.vercel_preview_url.outputs.preview_url }}" \
             --reporter jsonExpanded \
             --build-static
 
       - name: Upload report to Cloudflare pages
-        uses: cloudflare/wrangler-action@v3.3.2
+        uses: cloudflare/wrangler-action@2.0.0
         with:
           apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
           command: pages deploy .unlighthouse --project-name="${{ env.CLOUDFLARE_PROJECT }}" --branch=${{ env.CLOUDFLARE_BRANCH }}

src/app.html

@@ -8,7 +8,7 @@
 		<link rel="icon" type="image/png" sizes="32x32" href="%sveltekit.assets%/favicon-32x32.png" />
 		<link rel="icon" type="image/png" sizes="16x16" href="%sveltekit.assets%/favicon-16x16.png" />
 		<link rel="manifest" href="%sveltekit.assets%/site.webmanifest" />
-		<link rel="mask-icon" href="%sveltekit.assets%/safari-pinned-tab.svg" color="#5bbad5" />
+		<link rel="mask-icon" href="%sveltekit.assets%/safari-pinned-tab.svg" color="#000000" />
 		<meta name="msapplication-TileColor" content="#da532c" />
 		<meta name="theme-color" content="#ffffff" />
 		<title></title>

src/lib/components/Header.svelte

@@ -20,7 +20,7 @@
 <AppBar background="">
 	<svelte:fragment slot="lead">
 		<a href="/" class="md:ml-4 ml-1">
-			<img src="./[email protected]" alt="hellob.art logo" class="max-h-8" />
+			<img width="212" height="32" src="./[email protected]" alt="hellob.art logo" />
 		</a>
 	</svelte:fragment>
 

src/lib/site-config.ts

@@ -0,0 +1,4 @@
+export const SITE_URL = 'https://hellob.art';
+export const SITE_TITLE = 'hellob.art';
+export const SITE_DESCRIPTION = '';
+export const DEFAULT_OG_IMAGE = '';

src/routes/+layout.svelte

@@ -5,6 +5,11 @@
 	import Footer from '../lib/components/Footer.svelte';
 	import Navigation from '../lib/components/Navigation.svelte';
 	import Header from '$lib/components/Header.svelte';
+	import { fade } from 'svelte/transition';
+
+	export let data;
+
+	$: ({ pathname } = data);
 
 	import { dev } from '$app/environment';
 	import { inject } from '@vercel/analytics';
@@ -47,7 +52,11 @@
 		<Header {progress} />
 	</svelte:fragment>
 
-	<slot />
+	{#key pathname}
+		<div in:fade={{ duration: 300, delay: 400 }} out:fade={{ duration: 300 }}>
+			<slot />
+		</div>
+	{/key}
 
 	<svelte:fragment slot="pageFooter">
 		<Footer />

src/routes/+layout.ts

@@ -0,0 +1,7 @@
+export const load = ({ url }) => {
+	const { pathname } = url;
+
+	return {
+		pathname
+	};
+};

src/routes/+page.svelte

@@ -21,7 +21,6 @@
 			<div class="h-64 overflow-hidden rounded-lg bg-gray-100 shadow-lg md:h-auto sticky top-10">
 				<img
 					src={bartvdbraakImage}
-					loading="lazy"
 					alt="Bart van der Braak with a noire effect"
 					class="h-full w-full object-cover profile-fit"
 				/>

src/routes/projects/projects-cards.ts

@@ -31,9 +31,8 @@ const projects: Project[] = [
 		headerImage: keyweaveImage,
 		headerSubTitle: 'Open Source Project',
 		title: 'Keyweave',
-		description: `Keyweave is an open-source tool crafted to seamlessly fetch secrets from Azure Key Vault 
-			and weave them into a convenient .env file. Developed in Rust, Keyweave stands out for its efficiency 
-			and user-friendly design, making it an ideal choice for managing your application's secrets.`,
+		description: `Keyweave is an open-source tool crafted in Rust to seamlessly fetch secrets from Azure Key Vault 
+			and weave them into a convenient .env file.`,
 		logo: keyweaveLogo,
 		contributors: [],
 		date: '11-05-2023'

src/routes/sitemap.xml/+server.ts

@@ -0,0 +1,41 @@
+import { SITE_URL } from '$lib/site-config';
+
+/** @type {import('@sveltejs/kit').RequestHandler} */
+export async function GET() {
+	const pages = ['projects', 'toolbox'];
+	const body = sitemap(pages);
+
+	return new Response(body, {
+		headers: {
+			'Cache-Control': `public, max-age=${86400}`, // 24 hours
+			'Content-Type': 'application/xml'
+		}
+	});
+}
+
+const sitemap = (pages: string[]) => `<?xml version="1.0" encoding="UTF-8" ?>
+  <urlset
+    xmlns="https://www.sitemaps.org/schemas/sitemap/0.9"
+    xmlns:news="https://www.google.com/schemas/sitemap-news/0.9"
+    xmlns:xhtml="https://www.w3.org/1999/xhtml"
+    xmlns:mobile="https://www.google.com/schemas/sitemap-mobile/1.0"
+    xmlns:image="https://www.google.com/schemas/sitemap-image/1.1"
+    xmlns:video="https://www.google.com/schemas/sitemap-video/1.1"
+  >
+    <url>
+      <loc>${SITE_URL}</loc>
+      <changefreq>daily</changefreq>
+      <priority>0.7</priority>
+    </url>
+    ${pages
+			.map(
+				(page) => `
+    <url>
+      <loc>${SITE_URL}/${page}</loc>
+      <changefreq>daily</changefreq>
+      <priority>0.7</priority>
+    </url>
+    `
+			)
+			.join('')}
+  </urlset>`;

src/routes/toolbox/+page.svelte

@@ -27,23 +27,25 @@
 			</p>
 		</div>
 		<div class="md:col-span-1 flex justify-end">
-			<div class="h-60 w-full">
+			<div class="h-60 md:h-full w-full">
 				<Canvas>
 					<Scene />
 				</Canvas>
 			</div>
 		</div>
 	</div>
 
-	<div class="columns-1 md:columns-2 lg:columns-3 gap-6 w-full mb-12">
+	<ul class="columns-1 md:columns-2 lg:columns-3 gap-6 w-full mb-12">
 		{#each tools as tool}
-			<ToolCard
-				name={tool.name}
-				title={tool.title}
-				description={tool.description}
-				logo={tool.logo}
-				toolUrl={tool.toolUrl}
-			/>
+			<li>
+				<ToolCard
+					name={tool.name}
+					title={tool.title}
+					description={tool.description}
+					logo={tool.logo}
+					toolUrl={tool.toolUrl}
+				/>
+			</li>
 		{/each}
-	</div>
+	</ul>
 </div>

src/routes/toolbox/ToolCard.svelte

@@ -14,7 +14,12 @@
 >
 	<div class="flex flex-col gap-6">
 		<div class="flex gap-6">
-			<img src={logo} alt={name + ' logo'} class="h-12 w-12 rounded-sm object-contain" />
+			<img
+				src={logo}
+				alt={name + ' logo'}
+				class="h-12 w-12 rounded-sm object-contain"
+				loading="lazy"
+			/>
 			<div class="grow">
 				<h4 class="mb-0">{name}</h4>
 				<p class="text-faded text-sm font-normal">{title}</p>

static/robots.txt

@@ -0,0 +1,6 @@
+Sitemap: https://hellob.art/sitemap.xml
+
+# https://developers.google.com/search/docs/advanced/sitemaps/build-sitemap#addsitemap
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:

static/site.webmanifest

@@ -1,19 +1,19 @@
 {
-    "name": "",
-    "short_name": "",
-    "icons": [
-        {
-            "src": "/android-chrome-192x192.png",
-            "sizes": "192x192",
-            "type": "image/png"
-        },
-        {
-            "src": "/android-chrome-512x512.png",
-            "sizes": "512x512",
-            "type": "image/png"
-        }
-    ],
-    "theme_color": "#ffffff",
-    "background_color": "#ffffff",
-    "display": "standalone"
+	"name": "",
+	"short_name": "",
+	"icons": [
+		{
+			"src": "/android-chrome-192x192.png",
+			"sizes": "192x192",
+			"type": "image/png"
+		},
+		{
+			"src": "/android-chrome-512x512.png",
+			"sizes": "512x512",
+			"type": "image/png"
+		}
+	],
+	"theme_color": "#ffffff",
+	"background_color": "#ffffff",
+	"display": "standalone"
 }