Move config into code.

.github/workflows/format.yml

@@ -7,7 +7,6 @@ env:
   PUBLIC_SUPABASE_ANON_KEY: 'fake_anon_key'
   PRIVATE_SUPABASE_SERVICE_ROLE: 'fake_service_role'
   PRIVATE_STRIPE_API_KEY: 'fake_strip_api_key'
-  PUBLIC_SITE_NAME: 'SaaS Starter Build Test'
 
 jobs:
   build_and_test:

.github/workflows/linting.yml

@@ -7,7 +7,6 @@ env:
   PUBLIC_SUPABASE_ANON_KEY: 'fake_anon_key'
   PRIVATE_SUPABASE_SERVICE_ROLE: 'fake_service_role'
   PRIVATE_STRIPE_API_KEY: 'fake_strip_api_key'
-  PUBLIC_SITE_NAME: 'SaaS Starter Build Test'
 
 jobs:
   build_and_test:

.github/workflows/tests.yml

@@ -7,7 +7,6 @@ env:
   PUBLIC_SUPABASE_ANON_KEY: 'fake_anon_key'
   PRIVATE_SUPABASE_SERVICE_ROLE: 'fake_service_role'
   PRIVATE_STRIPE_API_KEY: 'fake_strip_api_key'
-  PUBLIC_SITE_NAME: 'SaaS Starter Build Test'
 
 jobs:
   build_and_test:

README.md

@@ -219,7 +219,7 @@ Finally: if you find build, formatting or linting rules too tedious, you can dis
 Cloudflare Pages and Workers is one of the most popular options for deploying SvelteKit and we recommend it. [Follow Cloudflare’s instructions](https://developers.cloudflare.com/pages/framework-guides/deploy-a-svelte-site/#deploy-with-cloudflare-pages) to deploy in a few clicks. Be sure to select “SvelteKit” as framework, and the rest of the defaults will work.
 
 When prompted: add environment variables for your production environment (PUBLIC_SUPABASE_URL, 
-PUBLIC_SUPABASE_ANON_KEY, PRIVATE_SUPABASE_SERVICE_ROLE, PRIVATE_STRIPE_API_KEY, and PUBLIC_SITE_NAME).
+PUBLIC_SUPABASE_ANON_KEY, PRIVATE_SUPABASE_SERVICE_ROLE, and PRIVATE_STRIPE_API_KEY).
 
 Optional: enable [Cloudflare Analytics](https://www.cloudflare.com/en-ca/application-services/products/analytics/) for usage metrics.
 
@@ -232,7 +232,7 @@ If you prefer another host you can explore alternatives:
 
 After the steps above, you’ll have a working version like the demo page. However, it’s not branded, and doesn’t have your content. The following checklist helps you customize the template to make a SaaS homepage for your company.
 
-- Set the PUBLIC_SITE_NAME to your company name in `.env.local` and your production environment. 
+- Set a name for your site in `src/config.ts:WebsiteName`
 - Content
   - Add actual content for marketing homepage
   - Add actual content for your blog (or delete the blog) 
@@ -241,7 +241,7 @@ After the steps above, you’ll have a working version like the demo page. Howev
   - Add any pages you want on top of our boiler plate (about, terms of service, etc). Be sure to add links to them in the header, mobile menu header, and footer as appropriate (`src/routes/(marketing)/+layout.svelte`).
   - Note: if you add any dynamic content to the main marketing page, pricing page or blog, be sure to set `prerender = false` in the appropriate `+page.ts` file. These are currently pre-rendered and served as static assets for performance reasons, but that will break if you add server side rendering requirements.
 - Update SEO content
-  - Update title and meta description tags for every public page. We include generic ones using your site name (PUBLIC_SITE_NAME), but the more specific these are the better.
+  - Update title and meta description tags for every public page. We include generic ones using your site name (`src/config.ts:WebsiteName`), but the more specific these are the better.
   - This done automatically for blog posts from `posts.ts` metadata
 - Style
   - Create a new DaisyUI Theme matching your brand or use one of the built in themes from DaisyUI (see `tailwind.config.js`)

local_env_template

@@ -2,4 +2,3 @@ PUBLIC_SUPABASE_URL='https://REPLACE_ME.supabase.co'
 PUBLIC_SUPABASE_ANON_KEY='REPLACE_ME'
 PRIVATE_SUPABASE_SERVICE_ROLE='REPLACE_ME'
 PRIVATE_STRIPE_API_KEY='REPLACE_ME'
-PUBLIC_SITE_NAME='REPLACE_ME'

src/config.ts

@@ -0,0 +1 @@
+export const WebsiteName: string = "SaaS Starter"

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

@@ -1,4 +1,6 @@
 <script lang="ts">
+  import { WebsiteName } from "./../../config"
+
   const features = [
     {
       name: "Free to host",
@@ -160,13 +162,11 @@
 <path d="M17 4C17 3.05719 17 2.58579 17.2929 2.29289C17.5858 2 18.0572 2 19 2C19.9428 2 20.4142 2 20.7071 2.29289C21 2.58579 21 3.05719 21 4V17C21 17.9428 21 18.4142 20.7071 18.7071C20.4142 19 19.9428 19 19 19C18.0572 19 17.5858 19 17.2929 18.7071C17 18.4142 17 17.9428 17 17V4Z" stroke="#1C274C" stroke-width="1.5"/>`,
     },
   ]
-
-  import { PUBLIC_SITE_NAME } from "$env/static/public"
 </script>
 
 <svelte:head>
-  <title>{PUBLIC_SITE_NAME}</title>
-  <meta name="description" content="{PUBLIC_SITE_NAME} Home Page" />
+  <title>{WebsiteName}</title>
+  <meta name="description" content="{WebsiteName} Home Page" />
 </svelte:head>
 
 <div class="hero min-h-[60vh]">

src/routes/(marketing)/blog/(posts)/+layout.svelte

@@ -2,7 +2,7 @@
   import { page } from "$app/stores"
   import { error } from "@sveltejs/kit"
   import { sortedBlogPosts, type BlogPost } from "./../posts"
-  import { PUBLIC_SITE_NAME } from "$env/static/public"
+  import { WebsiteName } from "../../../../config"
 
   let currentPost: BlogPost | null = null
   for (const post of sortedBlogPosts) {
@@ -32,7 +32,7 @@
   <!-- Facebook -->
   <meta property="og:title" content={pageTitle} />
   <meta property="og:description" content={pageDescription} />
-  <meta property="og:site_name" content={PUBLIC_SITE_NAME} />
+  <meta property="og:site_name" content={WebsiteName} />
   <meta property="og:url" content={pageUrl} />
   <!-- <meta property="og:image" content="https://samplesite.com/image.jpg"> -->
 

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

@@ -1,11 +1,11 @@
 <script lang="ts">
   import PricingModule from "./pricing_module.svelte"
-  import { PUBLIC_SITE_NAME } from "$env/static/public"
+  import { WebsiteName } from "./../../../config"
 </script>
 
 <svelte:head>
   <title>Pricing</title>
-  <meta name="description" content="Pricing details for {PUBLIC_SITE_NAME}" />
+  <meta name="description" content="Pricing details for {WebsiteName}" />
 </svelte:head>
 
 <div class="min-h-[70vh] pb-8 pt-[5vh] px-4">