CR feedback

README.md

@@ -21,7 +21,7 @@
 
 # SaaS Starter: A SvelteKit Boilerplate/Template
 
-- [Feature Rich](#features): user auth, user dashboard, marketing site, blog engine, billing/subscriptions, pricing page, and more.
+- [Feature Rich](#features): user auth, user dashboard, marketing site, blog engine, billing/subscriptions, pricing page, search, emails, and more.
 - [Lightning Performance](#performance--best-practices): fast pre-rendered pages which score 100/100 on Google PageSpeed.
 - [Delighful Developer Experience](#tech-stack): tools you'll love working with, including SvelteKit, Tailwind, DaisyUI, Postgres, and Supabase.
 - Extensible: all the tools you need to make additional marketing pages, UI components, user dashboards, admin portals, database backends, API endpoints, and more.
@@ -63,9 +63,11 @@ Everything you need to get started for a SaaS company:
 - User Authentication: Sign up, sign out, forgot password, email verification, and oAuth. Powered by Supabase Auth. GDPR cookie warning for European users.
 - Marketing Page with SEO optimization
 - Blog engine with rich formatting, RSS and SEO optimization.
-- User Dashboard with user profile, user settings, update email/password, billing, and more.
+- User Dashboard with user profile, user settings, update email/password, billing, and more
 - Subscriptions powered by Stripe Checkout
 - Pricing page
+- Emails: send emails to users, including template support
+- Search: lightning fast site search, without a backend
 - Contact-us form
 - Billing portal: self serve to change card, upgrade, cancel, or download receipts
 - Onboarding flow after signup: collect user data, and select a payment plan

src/routes/(marketing)/+page.svelte

@@ -106,6 +106,17 @@
 <path d="M11 20V20.75H11.75V20H11ZM14 19.25C13.5858 19.25 13.25 19.5858 13.25 20C13.25 20.4142 13.5858 20.75 14 20.75V19.25ZM17.5 5.25C17.0858 5.25 16.75 5.58579 16.75 6C16.75 6.41421 17.0858 6.75 17.5 6.75V5.25ZM7 5.25C6.58579 5.25 6.25 5.58579 6.25 6C6.25 6.41421 6.58579 6.75 7 6.75V5.25ZM9 19.25C8.58579 19.25 8.25 19.5858 8.25 20C8.25 20.4142 8.58579 20.75 9 20.75V19.25ZM15 20.75C15.4142 20.75 15.75 20.4142 15.75 20C15.75 19.5858 15.4142 19.25 15 19.25V20.75ZM10.25 11.25V20H11.75V11.25H10.25ZM11 19.25H4.23256V20.75H11V19.25ZM2.75 17.3953V11.25H1.25V17.3953H2.75ZM4.23256 19.25C3.51806 19.25 2.75 18.5323 2.75 17.3953H1.25C1.25 19.1354 2.48104 20.75 4.23256 20.75V19.25ZM6.5 6.75C8.46677 6.75 10.25 8.65209 10.25 11.25H11.75C11.75 8.04892 9.50379 5.25 6.5 5.25V6.75ZM6.5 5.25C3.49621 5.25 1.25 8.04892 1.25 11.25H2.75C2.75 8.65209 4.53323 6.75 6.5 6.75V5.25ZM21.25 11.25V17.4253H22.75V11.25H21.25ZM19.7931 19.25H14V20.75H19.7931V19.25ZM21.25 17.4253C21.25 18.5457 20.4934 19.25 19.7931 19.25V20.75C21.5305 20.75 22.75 19.1488 22.75 17.4253H21.25ZM22.75 11.25C22.75 8.04892 20.5038 5.25 17.5 5.25V6.75C19.4668 6.75 21.25 8.65209 21.25 11.25H22.75ZM7 6.75H18V5.25H7V6.75ZM9 20.75H15V19.25H9V20.75Z" fill="#1C274C"/>
 <path d="M5 16H8" stroke="#1C274C" stroke-width="1.5" stroke-linecap="round"/>
 <path d="M16 9.88432V5.41121M16 5.41121V2.63519C16 2.39905 16.1676 2.19612 16.3994 2.15144L16.8855 2.05779C17.4738 1.94443 18.0821 1.99855 18.6412 2.214L18.7203 2.24451C19.2746 2.4581 19.8807 2.498 20.4582 2.35891C20.7343 2.2924 21 2.50168 21 2.78573V5.00723C21 5.2442 20.8376 5.45031 20.6073 5.5058L20.5407 5.52184C19.9095 5.67387 19.247 5.63026 18.6412 5.39679C18.0821 5.18135 17.4738 5.12722 16.8855 5.24058L16 5.41121Z" stroke="#1C274C" stroke-width="1.5" stroke-linecap="round"/>`,
+    },
+    {
+      name: "Search",
+      link: "/search",
+      description: "Lighting fast site search, without a backend.",
+      svgContent: `
+<path d="M22 13V12C22 8.22876 22 6.34315 20.8284 5.17157C19.6569 4 17.7712 4 14 4H10C6.22876 4 4.34315 4 3.17157 5.17157C2 6.34315 2 8.22876 2 12C2 15.7712 2 17.6569 3.17157 18.8284C4.34315 20 6.22876 20 10 20H13" stroke="#1C274C" stroke-width="1.5" stroke-linecap="round"/>
+<path d="M10 16H6" stroke="#1C274C" stroke-width="1.5" stroke-linecap="round"/>
+<path d="M2 10L22 10" stroke="#1C274C" stroke-width="1.5" stroke-linecap="round"/>
+<circle cx="18" cy="17" r="3" stroke="#1C274C" stroke-width="1.5"/>
+<path d="M20.5 19.5L21.5 20.5" stroke="#1C274C" stroke-width="1.5" stroke-linecap="round"/>`,
     },
     {
       name: "Email",

src/routes/(marketing)/blog/posts.ts

@@ -9,14 +9,8 @@ export type BlogPost = {
   title: string
   description: string
   parsedDate?: Date // Optional because it's added dynamically
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  component: any
 }
 
-import ExampleBlogPost from "./(posts)/example_blog_post/+page.svelte"
-import HowWeBuiltOur41kbSaaSWebsite from "./(posts)/how_we_built_our_41kb_saas_website/+page.svelte"
-import AwesomePost from "./(posts)/awesome_post/+page.svelte"
-
 // Update this list with the actual blog post list
 // Create a page in the "(posts)" directory for each entry
 const blogPosts: BlogPost[] = [
@@ -25,21 +19,18 @@ const blogPosts: BlogPost[] = [
     description: "How to use this template you to bootstrap your own site.",
     link: "/blog/how_we_built_our_41kb_saas_website",
     date: "2024-03-10",
-    component: HowWeBuiltOur41kbSaaSWebsite,
   },
   {
     title: "Example Blog Post 2",
     description: "Even more example content!",
     link: "/blog/awesome_post",
     date: "2022-9-23",
-    component: AwesomePost,
   },
   {
     title: "Example Blog Post",
     description: "A sample blog post, showing our blog engine",
     link: "/blog/example_blog_post",
     date: "2023-03-13",
-    component: ExampleBlogPost,
   },
 ]
 

src/routes/(marketing)/search/+page.svelte

@@ -15,20 +15,21 @@
 
   let loading = true
   onMount(async () => {
-    // load search index and data
-    // static index in the /static folder in dev mode
-    // in prod mode, the index is built at build time and written to the /client folder
-    const searchData = await (await fetch("/search/api")).json()
-    if (searchData && searchData.index && searchData.indexData) {
-      try {
+    try {
+      const response = await fetch("/search/api")
+      if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`)
+      }
+      const searchData = await response.json()
+      if (searchData && searchData.index && searchData.indexData) {
         const index = Fuse.parseIndex(searchData.index)
         fuse = new Fuse<Result>(searchData.indexData, fuseOptions, index)
-      } catch (e) {
-        console.log("Blog search indexing error", e)
       }
+    } catch (error) {
+      console.error("Failed to load search data", error)
+    } finally {
+      loading = false
     }
-    loading = false
-    document.getElementById("search-input")?.focus()
   })
 
   type Result = {
@@ -50,7 +51,7 @@
   }
   // Update the URL hash when searchQuery changes so the browser can bookmark/share the search results
   $: {
-    if (browser) {
+    if (browser && window.location.hash.slice(1) !== searchQuery) {
       goto("#" + searchQuery, { keepFocus: true })
     }
   }
@@ -78,6 +79,7 @@
       class="grow"
       placeholder="Search"
       bind:value={searchQuery}
+      aria-label="Search input"
     />
   </label>
 

src/routes/(marketing)/search/api/+server.ts

@@ -1,9 +1,11 @@
 import { buildSearchIndex } from "$lib/build_index"
 
 export async function GET() {
-  console.log("Search API")
   const searchData = await buildSearchIndex()
-  return new Response(JSON.stringify(searchData))
+
+  return new Response(JSON.stringify(searchData), {
+    headers: { "Content-Type": "application/json" },
+  })
 }
 
 export const prerender = true