standard static files for add-to-homescreen pwa, and app.html fixes

README.md

@@ -1,78 +1,83 @@
-<p align="center">
-    <img width="350px" src="https://i.imgur.com/6r83blS.png">
-</p>
-<p align="center">
-    <a href="https://github.com/vtempest/Serverless-DOCS-Stack/discussions">
-    <img alt="GitHub Discussions"
-        src="https://img.shields.io/github/discussions/vtempest/Serverless-DOCS-Stack">
-    </a>
-    <a href="http://makeapullrequest.com">
-        <img src="https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square" alt="PRs Welcome">
-    </a>
-    <a href="https://codespaces.new/vtempest/Serverless-DOCS-Stack">
-    <img src="https://github.com/codespaces/badge.svg" width="150" height="20">
-    </a>
-</p>
-<h3 align="center">
-  <a href="https://serverless-docs-stack.vtempest.workers.dev">Live Demo </a>
-</h3>
-
-### ⚒️ Serverless DOCS Stack: Drizzle OAuth Cloudflare Svelte 
-
-- 📚 [Drizzle ORM](https://orm.drizzle.team/kit-docs/quick) - lightweight ORM compatible with Cloudflare D1 and drizzle-kit  to manage schema migrations
-
-- 👤 [OAuth Lucia](https://github.com/lucia-auth/lucia) - Google oAuth sign-in and/or email signup via Resend mailer api, with 4 email templates: reset password, change email, verify email, welcome. Settings and admin panel for users.
-
-- ☁️ [Cloudflare for Svelte](https://developers.cloudflare.com/pages/framework-guides/deploy-a-svelte-site/) - serverless autoscaling API and D1 database, great hosting platform with free tier
-
-- 🖼️ [SvelteKit](https://github.com/sveltejs/kit) - full stack interface and API routes framework. Many developers prefer [Svelte over React](https://shakuro.com/blog/svelte-vs-react).
+![](https://i.imgur.com/6r83blS.png)
 
-### 🧩 Interface Components:
+![GitHub Discussions](https://img.shields.io/github/discussions/vtempest/Serverless-DOCS-Stack)![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)![](https://github.com/codespaces/badge.svg)
+
+### [Live Demo](https://serverless-docs-stack.vtempest.workers.dev) 
+
+### ⚒️ Serverless DOCS Stack: Drizzle OAuth Cloudflare Svelte
+
+📚 [Drizzle ORM](https://orm.drizzle.team/kit-docs/quick) - lightweight ORM compatible with Cloudflare D1 and drizzle-kit to manage schema migrations
 
-- 🎨 [Tailwind CSS](https://github.com/tailwindlabs/tailwindcss) + [Bits UI](https://github.com/huntabyte/bits-ui) +
- [shadcn-svelte](https://github.com/huntabyte/shadcn-svelte) - popular UI components, with demos like [Sidebar examples](https://next.shadcn-svelte.com/blocks) and  [Magic UI Animations](https://animation-svelte.vercel.app/magic)
+👤 [OAuth Lucia](https://github.com/lucia-auth/lucia) - Google oAuth sign-in and/or email signup via Resend mailer api, with 4 email templates: reset password, change email, verify email, welcome. Settings and admin panel for users.
+
+☁️ [Cloudflare for Svelte](https://developers.cloudflare.com/pages/framework-guides/deploy-a-svelte-site/) - serverless autoscaling API and D1 database, great hosting platform with free tier
+
+🖼️ [SvelteKit](https://github.com/sveltejs/kit) - full stack interface and API routes framework. Many developers prefer [Svelte over React](https://shakuro.com/blog/svelte-vs-react).
+
+### 🧩 Interface Components:
 
-- 📝 [formsnap](https://github.com/svecosystem/formsnap) + [sveltekit-superforms](https://github.com/ciscoheat/sveltekit-superforms) + [zod](https://github.com/colinhacks/zod) - forms with Zod validation and [rate-limiting](https://github.com/ciscoheat/sveltekit-rate-limiter) in server-memory 
+🎨 [Tailwind CSS](https://github.com/tailwindlabs/tailwindcss) + [Bits UI](https://github.com/huntabyte/bits-ui) +  
+[shadcn-svelte](https://github.com/huntabyte/shadcn-svelte) - popular UI components, with demos like [Sidebar examples](https://next.shadcn-svelte.com/blocks) and [Magic UI Animations](https://animation-svelte.vercel.app/magic)
 
-- 📱 [lucide](https://github.com/lucide-icons/lucide) -  icons
+📝 [formsnap](https://github.com/svecosystem/formsnap) + [sveltekit-superforms](https://github.com/ciscoheat/sveltekit-superforms) + [zod](https://github.com/colinhacks/zod) - forms with Zod validation and [rate-limiting](https://github.com/ciscoheat/sveltekit-rate-limiter) in server-memory
 
-- 🛣️ [vite-plugin-kit-routes](https://github.com/jycouet/kitql/tree/main/packages/vite-plugin-kit-routes) - url routes
+📱 [lucide](https://github.com/lucide-icons/lucide) - icons
 
-- 🌲 [pino](https://github.com/pinojs/pino) - logging
+🛣️ [vite-plugin-kit-routes](https://github.com/jycouet/kitql/tree/main/packages/vite-plugin-kit-routes) - url routes
 
-- ✅ [Vitest](https://vitest.dev/guide/ui) - unit testing web UI
+🌲 [pino](https://github.com/pinojs/pino) - logging
 
-- ⭐ *Extra Alternatives*: [List of Svelte Libraries](https://github.com/TheComputerM/awesome-svelte#ui-libraries), [Material UI](https://sveltematerialui.com/INSTALL.md),  [SkeletonUI](https://www.skeleton.dev/components/app-rail), [Flowbite](https://flowbite-svelte.com/docs/pages/introduction),  [Icon sets](https://www.svgrepo.com/collections)
+✅ [Vitest](https://vitest.dev/guide/ui) - unit testing web UI
 
-### Sreenshots
+⭐ _Extra Alternatives_: [List of Svelte Libraries](https://github.com/TheComputerM/awesome-svelte#ui-libraries), [Material UI](https://sveltematerialui.com/INSTALL.md), [SkeletonUI](https://www.skeleton.dev/components/app-rail), [Flowbite](https://flowbite-svelte.com/docs/pages/introduction), [Icon sets](https://www.svgrepo.com/collections)
 
-<img width="600px" src="https://i.imgur.com/jIaL6yP.png" />
+### 🖼️ Sreenshots
 
-<img  width="600px" src="https://i.imgur.com/NlkjlWI.png" />
+![](https://i.imgur.com/jIaL6yP.png)![](https://i.imgur.com/NlkjlWI.png)
 
 ### ⬇️ Installation
 
-1. Install prerequisites Node.js or Bun `curl -fsSL https://bun.sh/install | bash`.  Optional: Setup shell with dev tools like nvim, fish, system info with [Server-Shell-Setup](https://github.com/vtempest/Server-Shell-Setup)
-2. Clone to localhost or server `git clone https://github.com/vtempest/Serverless-DOCS-Stack`. 
-    Optional: Press `.` when on the Github repo page to fork and run in Github Workspaces.
-3. CD to project directory `cd docs-stack-starter`.
-4. Install dependencies `bun install`.
-5. `mv .env.example .env ; mv wrangler.example.toml wrangler.toml` and set the domain and API keys in `.env`.
-6. Auth providers, get id/secret from [Google](https://console.cloud.google.com/apis/credentials).
-7. Set OAuth origin `http://localhost` and `http://localhost:5173` on local or `https://domain.com` on server.
-8. Set redirect `http://localhost:5173/auth/oauth/google/callback` or `https://api.domain.com/auth/oauth/google/callback`.
-9. Optional: For email auth, get API from [Resend](https://resend.com/api-keys) mailer and verify domain.
-10. Log in with your Cloudflare account by running: `bunx wrangler login`.
-11. Create your D1 database via dashboard or with `bunx wrangler d1 create my-db-prod`.
-12. Copy the console output database_name and database_id.
-13. Go to `wrangler.toml` and change `database_name` and `database_id`.
-14. Go to `drizzle.config.ts` and change db name in `dbName`.
-15. Go to `package.json` and change db name in `db:push:*` and `db:backup:prod`.
-16. Generate and migrate the schema to dev or prod db: `bun run db:migrate; bun run db:push:dev; bun run db:push:prod`.
-17. Develop on local with `bun dev`.
-18. Deploy to prod  with `bun serve`.
-
-19. Domain: [Cloudflare Dashboard](https://dash.cloudflare.com) -> Workers and Pages -> [your worker name] -> Settings 
-20. Add-to-Home on Mobile Web: Design logo and generate icons for  with [PWA Asset Generator](https://github.com/elegantapp/pwa-asset-generator) or [Favicon.io](https://favicon.io)
-21. User Analytics: Get Google Analytics ID from [Google Analytics](https://support.google.com/analytics/answer/9539598?hl=en) or [SimpleAnalytics](https://www.simpleanalytics.com) and add to `app.html`.
-22. Email Forwarding: Setup [Cloudflare Email Routing](https://blog.cloudflare.com/introducing-email-routing/) and [GMail's Send From Verification](https://support.google.com/mail/answer/22370?hl=en)
+Install prerequisites Node.js or Bun `curl -fsSL https://bun.sh/install | bash`. Optional: Setup shell with dev tools like nvim, fish, system info with [Server-Shell-Setup](https://github.com/vtempest/Server-Shell-Setup)
+
+Clone to localhost or server `git clone https://github.com/vtempest/Serverless-DOCS-Stack`.  
+Optional: Press `.` when on the Github repo page to fork and run in Github Workspaces.
+
+CD to project directory `cd docs-stack-starter`.
+
+Install dependencies `bun install`.
+
+`mv .env.example .env ; mv wrangler.example.toml wrangler.toml` and set the domain and API keys in `.env`.
+
+Auth providers, get id/secret from [Google](https://console.cloud.google.com/apis/credentials).
+
+Set OAuth origin `http://localhost` and `http://localhost:5173` on local or `https://domain.com` on server.
+
+Set redirect `http://localhost:5173/auth/oauth/google/callback` or `https://api.domain.com/auth/oauth/google/callback`.
+
+Optional: For email auth, get API from [Resend](https://resend.com/api-keys) mailer and verify domain.
+
+Log in with your Cloudflare account by running: `bunx wrangler login`.
+
+Create your D1 database via dashboard or with `bunx wrangler d1 create my-db-prod`.
+
+Copy the console output database\_name and database\_id.
+
+Go to `wrangler.toml` and change `database_name` and `database_id`.
+
+Go to `drizzle.config.ts` and change db name in `dbName`.
+
+Go to `package.json` and change db name in `db:push:*` and `db:backup:prod`.
+
+Generate and migrate the schema to dev or prod db: `bun run db:migrate; bun run db:push:dev; bun run db:push:prod`.
+
+Develop on local with `bun dev`.
+
+Deploy to prod with `bun serve`.
+
+Domain: [Cloudflare Dashboard](https://dash.cloudflare.com) -> Workers and Pages -> \[your worker name\] -> Settings
+
+Add-to-Home on Mobile Web: Design logo and generate icons for with [PWA Asset Generator](https://github.com/elegantapp/pwa-asset-generator) or [Favicon.io](https://favicon.io)
+
+User Analytics: Get Google Analytics ID from [Google Analytics](https://support.google.com/analytics/answer/9539598?hl=en) or [SimpleAnalytics](https://www.simpleanalytics.com) and add to `app.html`.
+
+Email Forwarding: Setup [Cloudflare Email Routing](https://blog.cloudflare.com/introducing-email-routing/) and [GMail's Send From Verification](https://support.google.com/mail/answer/22370?hl=en)

src/app.html

@@ -1,17 +1,19 @@
-<!doctype html>
-<html lang="%paraglide.lang%" dir="%paraglide.textDirection%">
-  <head>
-    <meta charset="utf-8" />
-    <link rel="icon" href="%sveltekit.assets%/favicon.png" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    %sveltekit.head%
-  </head>
-  <body data-sveltekit-preload-data="hover">
-    <div style="display: contents">%sveltekit.body%</div>
-    <script
-      defer
-      src="https://static.cloudflareinsights.com/beacon.min.js"
-      data-cf-beacon='{"token": "%sveltekit.env.PUBLIC_CLOUDFLARE_ANALYTICS_KEY%"}'
-    ></script>
-  </body>
-</html>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <title>%sveltekit.title%</title>
+  %sveltekit.head%
+  <!-- Mobile-Web Add-to-Home -->
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <link rel="apple-touch-icon" href="/icons/apple-touch-icon.png">
+  <link rel="manifest" href="/site.webmanifest">
+  <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />
+
+  <!-- Google Analytics -->
+  <!-- SimpleAnalytics.com -->
+  <script async defer src="https://scripts.simpleanalyticscdn.com/latest.js"></script>
+</head>
+<body>
+  <div>%sveltekit.body%</div>
+</body>
+</html>

src/lib/components/layout/logo.svelte

@@ -10,6 +10,6 @@
 </script>
 
 <a {href} class="flex items-center gap-3">
-  <img src="/logo.png" class="size-9" alt={`${APP_NAME} logo`} />
+  <img src="/icons/apple-touch-icon.png" class="size-9" alt={`${APP_NAME} logo`} />
   <span class="text-xl font-bold text-black dark:text-white" class:hidden class:sm:block={hidden}>{APP_NAME}</span>
 </a>