├── .npmrc
├── .vscode
    ├── settings.json
    └── extensions.json
├── src
    ├── routes
    │   ├── (app)
    │   │   ├── dashboard
    │   │   │   └── +page.svelte
    │   │   └── profile
    │   │   │   └── +page.svelte
    │   ├── (pages)
    │   │   ├── +layout.svelte
    │   │   ├── +page.server.js
    │   │   ├── +page.svelte
    │   │   ├── contact
    │   │   │   ├── +page.server.js
    │   │   │   └── +page.svelte
    │   │   ├── about
    │   │   │   └── +page.svelte
    │   │   └── services
    │   │   │   └── +page.svelte
    │   ├── robots.txt
    │   │   └── +server.js
    │   ├── login
    │   │   ├── +page.svelte
    │   │   └── +page.server.js
    │   ├── blog
    │   │   ├── [id]
    │   │   │   ├── +page.js
    │   │   │   └── +page.svelte
    │   │   ├── +page.js
    │   │   └── +page.svelte
    │   ├── sitemap.xml
    │   │   └── +server.js
    │   ├── website
    │   │   └── +server.js
    │   ├── +layout.svelte
    │   └── api
    │   │   └── posts.json
    │   │       └── +server.js
    ├── app.d.ts
    ├── app.html
    ├── lib
    │   ├── Footer.svelte
    │   ├── icons
    │   │   ├── moon.svelte
    │   │   └── sun.svelte
    │   ├── Button.svelte
    │   ├── Seo.svelte
    │   ├── Contact.svelte
    │   ├── Hero.svelte
    │   ├── What.svelte
    │   └── Navbar.svelte
    └── hooks.server.js
├── static
    ├── favicon.png
    ├── company-logo.png
    └── style.css
├── .gitignore
├── svelte.config.js
├── vite.config.js
├── jsconfig.json
├── package.json
└── README.md


/.npmrc:
--------------------------------------------------------------------------------
1 | engine-strict=true
2 | 


--------------------------------------------------------------------------------
/.vscode/settings.json:
--------------------------------------------------------------------------------
1 | {
2 |     "window.zoomLevel": 4
3 | }


--------------------------------------------------------------------------------
/src/routes/(app)/dashboard/+page.svelte:
--------------------------------------------------------------------------------
1 | <div class="container">
2 |   <h1>Dashboard</h1>
3 | </div>
4 | 


--------------------------------------------------------------------------------
/src/routes/(app)/profile/+page.svelte:
--------------------------------------------------------------------------------
1 | <div class="container">
2 |   <h1>Profile</h1>
3 | </div>
4 | 


--------------------------------------------------------------------------------
/static/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sharu725/sveltekit-walkthrough-website/HEAD/static/favicon.png


--------------------------------------------------------------------------------
/static/company-logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sharu725/sveltekit-walkthrough-website/HEAD/static/company-logo.png


--------------------------------------------------------------------------------
/src/routes/(pages)/+layout.svelte:
--------------------------------------------------------------------------------
1 | <script>
2 |   import Hero from "$lib/Hero.svelte";
3 | </script>
4 | 
5 | <Hero />
6 | <slot />
7 | 


--------------------------------------------------------------------------------
/src/routes/robots.txt/+server.js:
--------------------------------------------------------------------------------
1 | export const GET = async () => {
2 |   const text = "hello";
3 | 
4 |   return new Response(String(text));
5 | };
6 | 


--------------------------------------------------------------------------------
/src/routes/login/+page.svelte:
--------------------------------------------------------------------------------
1 | <div class="container">
2 |   <h2>Login</h2>
3 | 
4 |   <form method="POST">
5 |     <button>Gain Access</button>
6 |   </form>
7 | </div>
8 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /build
 4 | /.svelte-kit
 5 | /package
 6 | .env
 7 | .env.*
 8 | !.env.example
 9 | vite.config.js.timestamp-*
10 | vite.config.ts.timestamp-*
11 | 


--------------------------------------------------------------------------------
/src/routes/login/+page.server.js:
--------------------------------------------------------------------------------
1 | /** @type {import('./$types').Actions} */
2 | export const actions = {
3 |   default: async ({ cookies }) => {
4 |     cookies.set("access", "true");
5 |   },
6 | };
7 | 


--------------------------------------------------------------------------------
/svelte.config.js:
--------------------------------------------------------------------------------
 1 | import adapter from '@sveltejs/adapter-auto';
 2 | 
 3 | /** @type {import('@sveltejs/kit').Config} */
 4 | const config = {
 5 | 	kit: {
 6 | 		adapter: adapter()
 7 | 	}
 8 | };
 9 | 
10 | export default config;
11 | 


--------------------------------------------------------------------------------
/src/routes/blog/[id]/+page.js:
--------------------------------------------------------------------------------
1 | export const load = async ({ fetch, params: { id } }) => {
2 |   const res = await fetch(`https://jsonplaceholder.typicode.com/posts/${id}`);
3 |   const post = await res.json();
4 | 
5 |   return {
6 |     post,
7 |   };
8 | };
9 | 


--------------------------------------------------------------------------------
/src/routes/sitemap.xml/+server.js:
--------------------------------------------------------------------------------
 1 | export const GET = async () => {
 2 |   const markup = "<xml><h1>Webjeda</h1></xml>";
 3 | 
 4 |   return new Response(markup, {
 5 |     headers: {
 6 |       "Content-Type": "application/xml",
 7 |     },
 8 |   });
 9 | };
10 | 


--------------------------------------------------------------------------------
/src/routes/website/+server.js:
--------------------------------------------------------------------------------
 1 | export const GET = async () => {
 2 |   const markup = "<html><body><h1>Webjeda</h1></body></html>";
 3 | 
 4 |   return new Response(markup, {
 5 |     headers: {
 6 |       "Content-Type": "text/html",
 7 |     },
 8 |   });
 9 | };
10 | 


--------------------------------------------------------------------------------
/src/routes/blog/+page.js:
--------------------------------------------------------------------------------
 1 | export const load = async ({ fetch }) => {
 2 |   const res = await fetch("https://jsonplaceholder.typicode.com/posts");
 3 |   const allPosts = await res.json();
 4 |   const posts = allPosts.slice(0, 10);
 5 |   
 6 |   return {
 7 |     posts,
 8 |   };
 9 | };
10 | 


--------------------------------------------------------------------------------
/src/app.d.ts:
--------------------------------------------------------------------------------
 1 | // See https://kit.svelte.dev/docs/types#app
 2 | // for information about these interfaces
 3 | // and what to do when importing types
 4 | declare namespace App {
 5 | 	// interface Error {}
 6 | 	// interface Locals {}
 7 | 	// interface PageData {}
 8 | 	// interface Platform {}
 9 | }
10 | 


--------------------------------------------------------------------------------
/src/routes/(pages)/+page.server.js:
--------------------------------------------------------------------------------
 1 | export const load = async ({ fetch }) => {
 2 |   const getPosts = async () => {
 3 |     const res = await fetch("/api/posts.json");
 4 |     const data = await res.json();
 5 |     return data;
 6 |   };
 7 | 
 8 |   return {
 9 |     posts: getPosts(),
10 |   };
11 | };
12 | 


--------------------------------------------------------------------------------
/vite.config.js:
--------------------------------------------------------------------------------
 1 | import { sveltekit } from "@sveltejs/kit/vite";
 2 | 
 3 | /** @type {import('vite').UserConfig} */
 4 | const config = {
 5 |   plugins: [sveltekit()],
 6 |   server: {
 7 |     fs: {
 8 |       // Allow serving files from one level up to the project root
 9 |       allow: [".."],
10 |     },
11 |   },
12 | };
13 | 
14 | export default config;
15 | 


--------------------------------------------------------------------------------
/src/app.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en" data-theme="">
 3 | 
 4 | <head>
 5 | 	<meta charset="utf-8" />
 6 | 	<link rel="icon" href="%sveltekit.assets%/company-logo.png" />
 7 | 	<meta name="viewport" content="width=device-width" />
 8 | 	%sveltekit.head%
 9 | </head>
10 | 
11 | <div data-sveltekit-preload-data="hover">
12 | 	%sveltekit.body%
13 | </div>
14 | 
15 | </html>


--------------------------------------------------------------------------------
/src/routes/blog/[id]/+page.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 |   import Seo from "$lib/Seo.svelte";
 3 | 
 4 |   export let data;
 5 | 
 6 |   const { post } = data;
 7 | </script>
 8 | 
 9 | <div class="container">
10 |   <h1>{post.title}</h1>
11 |   <p>{post.body}</p>
12 | </div>
13 | 
14 | <Seo
15 |   title="{post.title} | Business Frontpage"
16 |   description={post.body}
17 |   type="BlogPosting"
18 | />
19 | 


--------------------------------------------------------------------------------
/src/lib/Footer.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 |   const year = new Date().getFullYear();
 3 | </script>
 4 | 
 5 | <footer>
 6 |   <div class="container">Copyright © Your Website {year}</div>
 7 | </footer>
 8 | 
 9 | <style>
10 |   footer {
11 |     margin-top: auto;
12 |     padding: 3em 0;
13 |     background-color: #343a40;
14 |     color: white;
15 |   }
16 |   .container {
17 |     text-align: center;
18 |   }
19 | </style>
20 | 


--------------------------------------------------------------------------------
/src/routes/+layout.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 |   import "../../static/style.css";
 3 |   import Footer from "$lib/Footer.svelte";
 4 |   import Navbar from "$lib/Navbar.svelte";
 5 | </script>
 6 | 
 7 | <div class="app">
 8 |   <Navbar />
 9 |   <slot />
10 |   <Footer />
11 | </div>
12 | 
13 | <style>
14 |   .app {
15 |     min-height: 100vh;
16 |     display: flex;
17 |     flex-direction: column;
18 |   }
19 | </style>
20 | 


--------------------------------------------------------------------------------
/.vscode/extensions.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	// See https://go.microsoft.com/fwlink/?LinkId=827846 to learn about workspace recommendations.
 3 | 	// Extension identifier format: ${publisher}.${name}. Example: vscode.csharp
 4 | 
 5 | 	// List of extensions which should be recommended for users of this workspace.
 6 | 	"recommendations": [
 7 | 		
 8 | 	],
 9 | 	// List of extensions recommended by VS Code that should not be recommended for users of this workspace.
10 | 	"unwantedRecommendations": [
11 | 		
12 | 	]
13 | }


--------------------------------------------------------------------------------
/src/lib/icons/moon.svelte:
--------------------------------------------------------------------------------
 1 | <svg
 2 |   xmlns="http://www.w3.org/2000/svg"
 3 |   width="1em"
 4 |   height="1em"
 5 |   viewBox="0 0 512 512"
 6 |   ><path
 7 |     d="M195 125c0-26.3 5.3-51.3 14.9-74.1C118.7 73 51 155.1 51 253c0 114.8 93.2 208 208 208 97.9 0 180-67.7 202.1-158.9-22.8 9.6-47.9 14.9-74.1 14.9-106 0-192-86-192-192z"
 8 |     fill="currentColor"
 9 |   /></svg
10 | >
11 | 
12 | <style>
13 |   svg {
14 |     transition-duration: 300ms;
15 |   }
16 |   svg:hover {
17 |     color: black;
18 |   }
19 | </style>
20 | 


--------------------------------------------------------------------------------
/src/lib/Button.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 |   export let size = "medium";
 3 | </script>
 4 | 
 5 | <button
 6 |   class:small={size === "small"}
 7 |   class:medium={size === "medium"}
 8 |   {...$$restProps}
 9 | >
10 |   <slot />
11 | </button>
12 | 
13 | <style>
14 |   button {
15 |     border: none;
16 |     border-radius: 0.25em;
17 |     background-color: var(--primary-color);
18 |     color: white;
19 |     font-size: 1em;
20 |     cursor: pointer;
21 |   }
22 |   .medium {
23 |     padding: 0.5em 1.5em;
24 |   }
25 | 
26 |   .small {
27 |     padding: 0.25em 0.5em;
28 |   }
29 | </style>
30 | 


--------------------------------------------------------------------------------
/src/lib/Seo.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 |   import { page } from "$app/stores";
 3 | 
 4 |   export let title;
 5 |   export let description;
 6 |   export let type;
 7 | 
 8 |   $: url = $page.url.href;
 9 | </script>
10 | 
11 | <svelte:head>
12 |   <title>{title}</title>
13 |   <meta name="description" content={description} />
14 |   {@html `<script type="application/ld+json">
15 | {
16 |     "@context": "http://schema.org",
17 |     "@type": "${type}",
18 |       "name": "${title}",
19 |       "description": "${description}",
20 |       "url": "${url}",
21 |     }
22 |   </script>`}
23 | </svelte:head>
24 | 


--------------------------------------------------------------------------------
/src/hooks.server.js:
--------------------------------------------------------------------------------
 1 | import { redirect } from "@sveltejs/kit";
 2 | 
 3 | /** @type {import('@sveltejs/kit').Handle} */
 4 | export const handle = async ({ event, resolve }) => {
 5 |   const access = event.cookies.get("access") === "true";
 6 | 
 7 |   if (!access && event.route.id?.startsWith("/(app)")) {
 8 |     throw redirect(302, "/login");
 9 |   }
10 | 
11 |   const theme = event.cookies.get("siteTheme");
12 | 
13 |   const response = await resolve(event, {
14 |     transformPageChunk: ({ html }) =>
15 |       html.replace('data-theme=""', `data-theme="${theme}"`),
16 |   });
17 |   return response;
18 | };
19 | 


--------------------------------------------------------------------------------
/jsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"extends": "./.svelte-kit/tsconfig.json",
 3 | 	"compilerOptions": {
 4 | 		"allowJs": true,
 5 | 		"checkJs": true,
 6 | 		"esModuleInterop": true,
 7 | 		"forceConsistentCasingInFileNames": true,
 8 | 		"resolveJsonModule": true,
 9 | 		"skipLibCheck": true,
10 | 		"sourceMap": true,
11 | 		"strict": true
12 | 	}
13 | 	// Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias and https://kit.svelte.dev/docs/configuration#files
14 | 	//
15 | 	// If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
16 | 	// from the referenced tsconfig.json - TypeScript does not merge them in
17 | }
18 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"name": "sveltekit-walkthrough",
 3 | 	"version": "0.0.1",
 4 | 	"private": true,
 5 | 	"scripts": {
 6 | 		"dev": "vite dev",
 7 | 		"build": "vite build",
 8 | 		"preview": "vite preview",
 9 | 		"check": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json",
10 | 		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json --watch"
11 | 	},
12 | 	"devDependencies": {
13 | 		"@sveltejs/adapter-auto": "^1.0.0",
14 | 		"@sveltejs/kit": "^1.0.0",
15 | 		"svelte": "^3.54.0",
16 | 		"svelte-check": "^2.9.2",
17 | 		"typescript": "^4.9.3",
18 | 		"vite": "^4.0.0",
19 | 		"yup": "^0.32.11"
20 | 	},
21 | 	"type": "module"
22 | }
23 | 


--------------------------------------------------------------------------------
/src/routes/blog/+page.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 |   import Seo from "$lib/Seo.svelte";
 3 | 
 4 |   export let data;
 5 | 
 6 |   const { posts } = data;
 7 | </script>
 8 | 
 9 | <div class="container">
10 |   <h1>Blog Posts</h1>
11 | 
12 |   {#each posts as post}
13 |     <a href="/blog/{post.id}">
14 |       <h2>{post.title}</h2>
15 |     </a>
16 |   {/each}
17 | </div>
18 | 
19 | <Seo
20 |   title="Blog | Business Frontpage"
21 |   description="This is blog"
22 |   type="WebPage"
23 | />
24 | 
25 | <style>
26 |   a {
27 |     text-decoration: underline;
28 |     color: var(--color);
29 |   }
30 |   a:hover {
31 |     color: var(--primary-color);
32 |   }
33 | </style>
34 | 


--------------------------------------------------------------------------------
/static/style.css:
--------------------------------------------------------------------------------
 1 | :root {
 2 |   --primary-color: #6495ed;
 3 |   --bg-color: white;
 4 |   --color: #333;
 5 | }
 6 | 
 7 | [data-theme="dark"] {
 8 |   --primary-color: #2b3f63;
 9 |   --bg-color: #000;
10 |   --color: #ddd;
11 | }
12 | 
13 | body {
14 |   margin: 0;
15 |   font-family: -apple-system, BlinkMacSystemFont, segoe ui, Roboto,
16 |     helvetica neue, Arial, noto sans, sans-serif, apple color emoji,
17 |     segoe ui emoji, segoe ui symbol, noto color emoji;
18 |   background-color: var(--bg-color);
19 |   color: var(--color);
20 | }
21 | 
22 | .container {
23 |   max-width: 960px;
24 |   margin: 0 auto;
25 | }
26 | 
27 | input, textarea {
28 |   background-color: transparent;
29 | }
30 | 


--------------------------------------------------------------------------------
/src/lib/Contact.svelte:
--------------------------------------------------------------------------------
 1 | <div class="contact">
 2 |   <h3>Contact Us</h3>
 3 |   <p><strong>Start Bootstrap</strong></p>
 4 |   <p>3481 Melrose Place</p>
 5 |   <p>Beverly Hills, CA 90210</p>
 6 |   <p>P: (123) 456-7890</p>
 7 |   <p>E:<a href="mailto:name@example.com">name@example.com</a></p>
 8 | </div>
 9 | 
10 | <style>
11 |   .contact {
12 |     grid-column: span 4;
13 |   }
14 |   h3 {
15 |     padding-bottom: 0.5em;
16 |     margin-bottom: 0.5em;
17 |     font-size: 2em;
18 |     font-weight: 500;
19 |     border-bottom: 1px solid #ddd;
20 |   }
21 |   a {
22 |     text-decoration: none;
23 |     color: var(--primary-color);
24 |   }
25 |   a:hover {
26 |     text-decoration: underline;
27 |   }
28 | </style>
29 | 


--------------------------------------------------------------------------------
/src/lib/Hero.svelte:
--------------------------------------------------------------------------------
 1 | <div class="hero">
 2 |   <div class="container">
 3 |     <h2>Business Name or Tagline</h2>
 4 |     <p>
 5 |       Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non possimus ab
 6 |       labore provident mollitia. Id assumenda voluptate earum corporis facere
 7 |       quibusdam quisquam iste ipsa cumque unde nisi, totam quas ipsam.
 8 |     </p>
 9 |   </div>
10 | </div>
11 | 
12 | <style>
13 |   .hero {
14 |     padding: 5em 0;
15 |     background-color: var(--primary-color);
16 |     color: white;
17 |   }
18 |   h2 {
19 |     margin: 0;
20 |     font-size: 3.5em;
21 |     font-weight: 500;
22 |   }
23 |   p {
24 |     color: #ddd;
25 |     font-size: 1.1em;
26 |     line-height: 1.6;
27 |   }
28 | </style>
29 | 


--------------------------------------------------------------------------------
/src/routes/(pages)/+page.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 |   import Seo from "$lib/Seo.svelte";
 3 |   import What from "$lib/What.svelte";
 4 | 
 5 |   export let data;
 6 | 
 7 |   const { posts } = data;
 8 | </script>
 9 | 
10 | <What />
11 | 
12 | <div class="container">
13 |   <div class="grid">
14 |     {#each posts as { id, title, image, body }}
15 |       <div>
16 |         <h2>{title.substring(0, 20)}</h2>
17 |         <img src={image} alt={title} />
18 |         <p>{body.substring(0, 80)}</p>
19 |       </div>
20 |     {/each}
21 |   </div>
22 | </div>
23 | 
24 | <Seo title="Business Frontpage" description="This is homepage" type="WebSite" />
25 | 
26 | <style>
27 |   .grid {
28 |     display: grid;
29 |     grid-template-columns: repeat(3, 1fr);
30 |     gap: 2em;
31 |     padding: 2em 0;
32 |   }
33 |   img {
34 |     height: 300px;
35 |     width: 100%;
36 |     object-fit: cover;
37 |     object-position: center;
38 |   }
39 | </style>
40 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # create-svelte
 2 | 
 3 | Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/master/packages/create-svelte).
 4 | 
 5 | ## Creating a project
 6 | 
 7 | If you're seeing this, you've probably already done this step. Congrats!
 8 | 
 9 | ```bash
10 | # create a new project in the current directory
11 | npm create svelte@latest
12 | 
13 | # create a new project in my-app
14 | npm create svelte@latest my-app
15 | ```
16 | 
17 | ## Developing
18 | 
19 | Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
20 | 
21 | ```bash
22 | npm run dev
23 | 
24 | # or start the server and open the app in a new browser tab
25 | npm run dev -- --open
26 | ```
27 | 
28 | ## Building
29 | 
30 | To create a production version of your app:
31 | 
32 | ```bash
33 | npm run build
34 | ```
35 | 
36 | You can preview the production build with `npm run preview`.
37 | 
38 | > To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.
39 | 


--------------------------------------------------------------------------------
/src/routes/api/posts.json/+server.js:
--------------------------------------------------------------------------------
 1 | import { json } from "@sveltejs/kit";
 2 | 
 3 | export const GET = async () => {
 4 |   const posts = [
 5 |     {
 6 |       id: 1,
 7 |       title:
 8 |         "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
 9 |       image: "https://picsum.photos/id/10/800/500",
10 |       body: "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto",
11 |     },
12 |     {
13 |       id: 2,
14 |       title: "qui est esse",
15 |       image: "https://picsum.photos/id/17/800/500",
16 |       body: "est rerum tempore vitae\nsequi sint nihil reprehenderit dolor beatae ea dolores neque\nfugiat blanditiis voluptate porro vel nihil molestiae ut reiciendis\nqui aperiam non debitis possimus qui neque nisi nulla",
17 |     },
18 |     {
19 |       id: 3,
20 |       title: "ea molestias quasi exercitationem repellat qui ipsa sit aut",
21 |       image: "https://picsum.photos/id/49/800/500",
22 |       body: "et iusto sed quo iure\nvoluptatem occaecati omnis eligendi aut ad\nvoluptatem doloribus vel accusantium quis pariatur\nmolestiae porro eius odio et labore et velit aut",
23 |     },
24 |   ];
25 | 
26 |   return json(posts)
27 | };
28 | 


--------------------------------------------------------------------------------
/src/lib/What.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 |   import Button from "$lib/Button.svelte";
 3 |   import Contact from "./Contact.svelte";
 4 | </script>
 5 | 
 6 | <div class="container grid">
 7 |   <div class="what">
 8 |     <h3>What We Do?</h3>
 9 |     <p>
10 |       Lorem ipsum dolor sit amet, consectetur adipisicing elit. A deserunt neque
11 |       tempore recusandae animi soluta quasi? Asperiores rem dolore eaque vel,
12 |       porro, soluta unde debitis aliquam laboriosam. Repellat explicabo,
13 |       maiores!
14 |     </p>
15 |     <p>
16 |       Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis optio
17 |       neque consectetur consequatur magni in nisi, natus beatae quidem quam odit
18 |       commodi ducimus totam eum, alias, adipisci nesciunt voluptate. Voluptatum.
19 |     </p>
20 | 
21 |     <Button class="secondary" id="a-button" size="medium"
22 |       >Call To Action >></Button
23 |     >
24 |   </div>
25 |   <Contact />
26 | </div>
27 | 
28 | <style>
29 |   .grid {
30 |     display: grid;
31 |     grid-template-columns: repeat(12, 1fr);
32 |     gap: 2em;
33 |   }
34 |   .what {
35 |     grid-column: span 8;
36 |   }
37 | 
38 |   h3 {
39 |     padding-bottom: 0.5em;
40 |     margin-bottom: 0.5em;
41 |     font-size: 2em;
42 |     font-weight: 500;
43 |     border-bottom: 1px solid #ddd;
44 |   }
45 | 
46 | </style>
47 | 


--------------------------------------------------------------------------------
/src/lib/icons/sun.svelte:
--------------------------------------------------------------------------------
 1 | <svg
 2 |   xmlns="http://www.w3.org/2000/svg"
 3 |   width="1em"
 4 |   height="1em"
 5 |   viewBox="0 0 24 24"
 6 |   ><path
 7 |     fill="currentColor"
 8 |     d="M12 5q-.425 0-.712-.288Q11 4.425 11 4V2q0-.425.288-.713Q11.575 1 12 1t.713.287Q13 1.575 13 2v2q0 .425-.287.712Q12.425 5 12 5Zm4.95 2.05q-.275-.275-.275-.688q0-.412.275-.712l1.4-1.425q.3-.3.712-.3q.413 0 .713.3q.275.275.275.7q0 .425-.275.7L18.35 7.05q-.275.275-.7.275q-.425 0-.7-.275ZM20 13q-.425 0-.712-.288Q19 12.425 19 12t.288-.713Q19.575 11 20 11h2q.425 0 .712.287q.288.288.288.713t-.288.712Q22.425 13 22 13Zm-8 10q-.425 0-.712-.288Q11 22.425 11 22v-2q0-.425.288-.712Q11.575 19 12 19t.713.288Q13 19.575 13 20v2q0 .425-.287.712Q12.425 23 12 23ZM5.65 7.05l-1.425-1.4q-.3-.3-.3-.725t.3-.7q.275-.275.7-.275q.425 0 .7.275L7.05 5.65q.275.275.275.7q0 .425-.275.7q-.3.275-.7.275q-.4 0-.7-.275Zm12.7 12.725l-1.4-1.425q-.275-.3-.275-.712q0-.413.275-.688q.275-.275.688-.275q.412 0 .712.275l1.425 1.4q.3.275.287.7q-.012.425-.287.725q-.3.3-.725.3t-.7-.3ZM2 13q-.425 0-.712-.288Q1 12.425 1 12t.288-.713Q1.575 11 2 11h2q.425 0 .713.287Q5 11.575 5 12t-.287.712Q4.425 13 4 13Zm2.225 6.775q-.275-.275-.275-.7q0-.425.275-.7L5.65 16.95q.275-.275.688-.275q.412 0 .712.275q.3.3.3.713q0 .412-.3.712l-1.4 1.4q-.3.3-.725.3t-.7-.3ZM12 18q-2.5 0-4.25-1.75T6 12q0-2.5 1.75-4.25T12 6q2.5 0 4.25 1.75T18 12q0 2.5-1.75 4.25T12 18Z"
 9 |   /></svg
10 | >
11 | 
12 | <style>
13 |   svg {
14 |     transition-duration: 300ms;
15 |   }
16 |   svg:hover {
17 |     color: yellow;
18 |   }
19 | </style>
20 | 


--------------------------------------------------------------------------------
/src/routes/(pages)/contact/+page.server.js:
--------------------------------------------------------------------------------
 1 | import { fail } from "@sveltejs/kit";
 2 | import { object, string, number, date, InferType } from "yup";
 3 | 
 4 | export const actions = {
 5 |   default: async ({ request }) => {
 6 |     const formData = await request.formData();
 7 |     const name = formData.get("name");
 8 |     const email = formData.get("email");
 9 |     const message = formData.get("message");
10 | 
11 |     const contactFormSchema = object({
12 |       name: string().min(2, "too short").required("We only accept named users"),
13 |       email: string().required().email(),
14 |       message: string().required(),
15 |     });
16 | 
17 |     try {
18 |       const result = await contactFormSchema.validate(
19 |         { name, email, message },
20 |         { abortEarly: false }
21 |       );
22 | 
23 |       const prefilledLink = `https://docs.google.com/forms/d/e/1FAIpQLSeOGNYx08uzHGf3HASA_CDn6z6adFT4_N0w6OvZduCBxMRfEw/formResponse?usp=pp_url&entry.190919771=${name}&entry.543063817=${email}&entry.2120037074=${message}&submit=Submit`;
24 | 
25 |       const res = await fetch(prefilledLink);
26 | 
27 |       return {
28 |         success: true,
29 |         status: "Form is submitted",
30 |       };
31 |     } catch (error) {
32 |       console.log({ error });
33 |       const errors = error.inner.reduce((acc, err) => {
34 |         return { ...acc, [err.path]: err.message };
35 |       }, {});
36 | 
37 |       return {
38 |         errors,
39 |         name,
40 |         email,
41 |         message,
42 |       };
43 |     }
44 |   },
45 | };
46 | 


--------------------------------------------------------------------------------
/src/routes/(pages)/about/+page.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 |   import Seo from "$lib/Seo.svelte";
 3 |   import Contact from "$lib/Contact.svelte";
 4 | </script>
 5 | 
 6 | <div class="container grid">
 7 |   <div class="what">
 8 |     <h3>About Us</h3>
 9 |     <p>
10 |       Lorem ipsum dolor sit amet, consectetur adipisicing elit. A deserunt neque
11 |       tempore recusandae animi soluta quasi? Asperiores rem dolore eaque vel,
12 |       porro, soluta unde debitis aliquam laboriosam. Repellat explicabo,
13 |       maiores!
14 |     </p>
15 | 
16 |     <p>
17 |       Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis optio
18 |       neque consectetur consequatur magni in nisi, natus beatae quidem quam odit
19 |       commodi ducimus totam eum, alias, adipisci nesciunt voluptate. Voluptatum.
20 |     </p>
21 | 
22 |     <p>
23 |       Lorem ipsum dolor sit amet, consectetur adipisicing elit. A deserunt neque
24 |       tempore recusandae animi soluta quasi? Asperiores rem dolore eaque vel,
25 |       porro, soluta unde debitis aliquam laboriosam. Repellat explicabo,
26 |       maiores!
27 |     </p>
28 |     <p>
29 |       Lorem ipsum dolor sit amet, consectetur adipisicing elit. A deserunt neque
30 |       tempore recusandae animi soluta quasi? Asperiores rem dolore eaque vel,
31 |       porro, soluta unde debitis aliquam laboriosam. Repellat explicabo,
32 |       maiores!
33 |     </p>
34 |     <p>
35 |       Lorem ipsum dolor sit amet, consectetur adipisicing elit. A deserunt neque
36 |       tempore recusandae animi soluta quasi? Asperiores rem dolore eaque vel,
37 |       porro, soluta unde debitis aliquam laboriosam. Repellat explicabo,
38 |       maiores!
39 |     </p>
40 |     <p>
41 |       Lorem ipsum dolor sit amet, consectetur adipisicing elit. A deserunt neque
42 |       tempore recusandae animi soluta quasi? Asperiores rem dolore eaque vel,
43 |       porro, soluta unde debitis aliquam laboriosam. Repellat explicabo,
44 |       maiores!
45 |     </p>
46 |   </div>
47 |   <Contact />
48 | </div>
49 | 
50 | <style>
51 |   .grid {
52 |     display: grid;
53 |     grid-template-columns: repeat(12, 1fr);
54 |     gap: 2em;
55 |   }
56 |   .what {
57 |     grid-column: span 8;
58 |   }
59 | 
60 |   h3 {
61 |     padding-bottom: 0.5em;
62 |     margin-bottom: 0.5em;
63 |     font-size: 2em;
64 |     font-weight: 500;
65 |     border-bottom: 1px solid #ddd;
66 |   }
67 | </style>
68 | <Seo title="About | Business Frontpage" description="This is about page" type="WebPage" />


--------------------------------------------------------------------------------
/src/lib/Navbar.svelte:
--------------------------------------------------------------------------------
  1 | <script>
  2 |   import { page } from "$app/stores";
  3 |   import { onMount } from "svelte";
  4 |   import Moon from "./icons/moon.svelte";
  5 |   import Sun from "./icons/sun.svelte";
  6 | 
  7 |   const navs = [
  8 |     {
  9 |       title: "Home",
 10 |       href: "/",
 11 |     },
 12 |     {
 13 |       title: "About",
 14 |       href: "/about",
 15 |     },
 16 |     {
 17 |       title: "Services",
 18 |       href: "/services",
 19 |     },
 20 |     {
 21 |       title: "Contact",
 22 |       href: "/contact",
 23 |     },
 24 |     {
 25 |       title: "Blog",
 26 |       href: "/blog",
 27 |     },
 28 |   ];
 29 | 
 30 |   let currentTheme = "";
 31 | 
 32 |   onMount(() => {
 33 |     // currentTheme = document.documentElement.dataset.theme;
 34 |     const userPrefersDarkMode = window.matchMedia(
 35 |       "(prefers-color-scheme: dark)"
 36 |     ).matches;
 37 | 
 38 |     const hasUserSetDarkModeManually =
 39 |       document.documentElement.dataset.theme == "dark";
 40 | 
 41 |     if (!hasUserSetDarkModeManually) {
 42 |       setTheme(userPrefersDarkMode ? "dark" : "light");
 43 |     }
 44 |   });
 45 | 
 46 |   const setTheme = (theme) => {
 47 |     document.documentElement.dataset.theme = theme;
 48 |     document.cookie = `siteTheme=${theme};max-age=31536000;path="/"`;
 49 |     currentTheme = theme;
 50 |   };
 51 | 
 52 |   $: url = $page.url.href;
 53 |   $: routeId = $page.url.pathname;
 54 | </script>
 55 | 
 56 | <nav>
 57 |   <div class="container">
 58 |     <a class="logo" href="/">
 59 |       <h1>Start Bootstrap</h1>
 60 |     </a>
 61 |     <ul>
 62 |       {#each navs as { title, href }}
 63 |         <li>
 64 |           <a
 65 |             {href}
 66 |             class:active={href === "/" ? routeId === "/" : url.includes(href)}
 67 |             {title}>{title}</a
 68 |           >
 69 |         </li>
 70 |       {/each}
 71 |       <li class="relative">
 72 |         {#if currentTheme == "light"}
 73 |           <a class="moon" href={"#"} on:click={() => setTheme("dark")}>
 74 |             <Moon />
 75 |           </a>
 76 |         {:else}
 77 |           <a class="sun" href={"#"} on:click={() => setTheme("light")}>
 78 |             <Sun />
 79 |           </a>
 80 |         {/if}
 81 |       </li>
 82 |     </ul>
 83 |   </div>
 84 | </nav>
 85 | 
 86 | <style>
 87 |   nav {
 88 |     padding: 0.5em;
 89 |     background-color: #343a40;
 90 |     color: white;
 91 |   }
 92 | 
 93 |   .container {
 94 |     display: flex;
 95 |     align-items: center;
 96 |   }
 97 | 
 98 |   ul {
 99 |     display: flex;
100 |     margin: 0;
101 |     margin-left: auto;
102 |     list-style: none;
103 |     font-size: 1em;
104 |   }
105 |   li {
106 |     margin-right: 20px;
107 |   }
108 |   h1 {
109 |     margin: 0;
110 |     font-size: 1.3em;
111 |     font-weight: normal;
112 |   }
113 |   a {
114 |     text-decoration: none;
115 |     color: #aaa;
116 |   }
117 |   .logo {
118 |     color: white;
119 |   }
120 |   .active {
121 |     color: white;
122 |   }
123 | </style>
124 | 


--------------------------------------------------------------------------------
/src/routes/(pages)/contact/+page.svelte:
--------------------------------------------------------------------------------
  1 | <script>
  2 |   import { enhance, applyAction } from "$app/forms";
  3 |   import Button from "$lib/Button.svelte";
  4 |   import Seo from "$lib/Seo.svelte";
  5 | 
  6 |   export let form;
  7 | 
  8 | </script>
  9 | 
 10 | <div class="container">
 11 |   <h2>Contact us</h2>
 12 |   {#if form?.success}
 13 |     <p class="success">{form?.status || ""}</p>
 14 |   {:else}
 15 |     <form
 16 |       method="POST"
 17 |       use:enhance={() => {
 18 |         return async ({ result }) => {
 19 |           await applyAction(result);
 20 |         };
 21 |       }}
 22 |     >
 23 |       <div class="form-group">
 24 |         <label class="col-md-3 control-label" for="name">Name</label>
 25 |         <div class="col-md-9">
 26 |           <input
 27 |             id="name"
 28 |             name="name"
 29 |             type="text"
 30 |             placeholder="Your name"
 31 |             class="form-control"
 32 |             value={form?.name || ""}
 33 |             class:error={form?.errors?.name}
 34 |           />
 35 |           {#if form?.errors?.name}
 36 |             <p class="red">{form?.errors?.name}</p>
 37 |           {/if}
 38 |         </div>
 39 |       </div>
 40 | 
 41 |       <div class="form-group">
 42 |         <label class="col-md-3 control-label" for="email">Your E-mail</label>
 43 |         <div class="col-md-9">
 44 |           <input
 45 |             id="email"
 46 |             name="email"
 47 |             type="text"
 48 |             placeholder="Your email"
 49 |             class="form-control"
 50 |             value={form?.email || ""}
 51 |             class:error={form?.errors?.email}
 52 |           />
 53 |           {#if form?.errors?.email}
 54 |             <p class="red">{form?.errors?.email}</p>
 55 |           {/if}
 56 |         </div>
 57 |       </div>
 58 | 
 59 |       <div class="form-group">
 60 |         <label class="col-md-3 control-label" for="message">Your message</label>
 61 |         <div class="col-md-9">
 62 |           <textarea
 63 |             class="form-control"
 64 |             id="message"
 65 |             name="message"
 66 |             placeholder="Please enter your message here..."
 67 |             rows="5"
 68 |             value={form?.message || ""}
 69 |             class:error={form?.errors?.message}
 70 |           />
 71 |           {#if form?.errors?.message}
 72 |             <p class="red">{form?.errors?.message}</p>
 73 |           {/if}
 74 |         </div>
 75 |       </div>
 76 | 
 77 |       <div class="form-group">
 78 |         <div class="col-md-12">
 79 |           <Button type="submit">Submit</Button>
 80 |         </div>
 81 |       </div>
 82 |     </form>
 83 |   {/if}
 84 | </div>
 85 | <Seo
 86 |   title="Contact | Business Frontpage"
 87 |   description="This is contact page"
 88 |   type="WebPage"
 89 | />
 90 | 
 91 | <style>
 92 |   .container {
 93 |     width: 100%;
 94 |     padding: 2em 0;
 95 |   }
 96 |   h2 {
 97 |     font-weight: 500;
 98 |     font-size: 2em;
 99 |   }
100 |   input,
101 |   textarea {
102 |     width: 100%;
103 |     padding: 0.75em 1em;
104 |     border-radius: 0.25em;
105 |     border: 1px solid #999;
106 |   }
107 |   .form-group {
108 |     margin-bottom: 1.5em;
109 |   }
110 |   label {
111 |     display: block;
112 |     padding-bottom: 0.5em;
113 |   }
114 |   .success {
115 |     color: lightgreen;
116 |   }
117 |   .error {
118 |     border: 1px solid red;
119 |   }
120 |   .red {
121 |     color: red;
122 |   }
123 | </style>
124 | 


--------------------------------------------------------------------------------
/src/routes/(pages)/services/+page.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 |   import Seo from "$lib/Seo.svelte";
 3 | </script>
 4 | 
 5 | <div class="container">
 6 |   <h3>Full length services page</h3>
 7 |   <p>
 8 |     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec molestie eu
 9 |     turpis eu semper. Aliquam sed tempor ex. Curabitur pretium auctor tellus.
10 |     Nulla vel nisl vulputate, ornare sem convallis, mollis eros. Pellentesque in
11 |     lacus eros. Aliquam non turpis eu ex auctor varius eget vel orci. Aliquam
12 |     pharetra leo sed risus mattis, at aliquet diam sagittis. Curabitur finibus
13 |     malesuada ligula, sit amet fermentum ligula cursus nec. Praesent elit dolor,
14 |     porttitor sit amet egestas a, aliquet sit amet velit. Cras ac dictum urna,
15 |     at dictum nibh. Etiam ornare eleifend ultrices. Sed non condimentum urna.
16 |     Sed lacinia ante quis nisl ultrices, nec tempor quam interdum. Duis sagittis
17 |     fermentum nunc in tincidunt. Maecenas fringilla cursus laoreet.
18 |   </p>
19 |   <p>
20 |     Etiam convallis purus a ornare facilisis. Sed sodales accumsan mauris, ut
21 |     congue sapien pretium id. Duis viverra consectetur posuere. Integer feugiat
22 |     nulla ac elit pretium gravida. Donec laoreet porttitor dolor nec accumsan.
23 |     Maecenas fringilla felis sodales nisl mattis, id congue sem volutpat. Nam ut
24 |     dolor a ante iaculis porttitor ultricies et nisl. Maecenas sed sapien ac
25 |     turpis aliquam elementum. Aliquam at eleifend metus. Curabitur ut fermentum
26 |     turpis. Nulla tempus rutrum purus, non bibendum ante vulputate at. Nulla vel
27 |     viverra nulla. Duis libero risus, ultricies non rhoncus at, tristique id
28 |     velit. Duis ac ex tortor. Curabitur dui metus, ornare eu ornare vel,
29 |     scelerisque in augue. Aliquam eget consectetur justo, ac hendrerit lectus.
30 |   </p>
31 |   <p>
32 |     Fusce ullamcorper nisl eros. Mauris sed urna mattis, mattis velit non,
33 |     dignissim massa. Aenean maximus ligula sed diam tincidunt, sed tempor metus
34 |     finibus. Morbi ut nisi id sapien viverra malesuada ut ut dui. Mauris ut
35 |     mollis magna, viverra fermentum metus. Proin ac ipsum quis mauris interdum
36 |     sagittis. Fusce id massa eu dolor pharetra efficitur a sed nisi. Quisque
37 |     quis gravida purus. Morbi facilisis sapien et tellus convallis, eu mattis
38 |     nisl volutpat. Aliquam quis vehicula leo. Phasellus posuere dui orci, eu
39 |     luctus neque sollicitudin sit amet. Donec nunc massa, posuere quis leo eget,
40 |     porta dapibus velit. Maecenas quis pulvinar orci.
41 |   </p>
42 |   <p>
43 |     Nunc varius sit amet ante id laoreet. Integer sapien nisl, accumsan dictum
44 |     tempor eu, tempus at mi. Duis sit amet tellus elit. Aliquam tincidunt tellus
45 |     eros, sed placerat ligula aliquam a. Morbi dapibus congue mauris, id dapibus
46 |     lectus hendrerit at. Aliquam et porttitor metus. Lorem ipsum dolor sit amet,
47 |     consectetur adipiscing elit. Praesent imperdiet elit eu libero facilisis,
48 |     sit amet vulputate leo rhoncus.
49 |   </p>
50 |   <p>
51 |     Suspendisse accumsan ipsum nunc, sed fringilla metus hendrerit nec. Nulla
52 |     gravida ante ac laoreet fermentum. Nunc aliquam nibh diam, id elementum urna
53 |     convallis et. Duis mattis lacinia pharetra. Mauris ac lorem venenatis,
54 |     ultricies nisl a, efficitur mauris. Etiam lacinia fermentum lectus, ac
55 |     blandit nisi bibendum quis. Curabitur sit amet pharetra elit. Class aptent
56 |     taciti sociosqu ad litora torquent per conubia nostra, per inceptos
57 |     himenaeos. Phasellus ut tincidunt nulla. Vivamus fermentum sapien semper ex
58 |     convallis hendrerit. Sed id eleifend justo.
59 |   </p>
60 |   <p>
61 |     Nunc quam sem, condimentum ut nibh vitae, facilisis laoreet ligula.
62 |     Vestibulum ultrices sapien at nulla ullamcorper eleifend. Duis quam elit,
63 |     pulvinar et aliquam a, porttitor sit amet sem. Suspendisse potenti. Maecenas
64 |     et mollis enim. Morbi vel scelerisque felis. Maecenas ultrices sem eget
65 |     neque suscipit, eget consequat magna efficitur.
66 |   </p>
67 |   <p>
68 |     Vestibulum suscipit diam tortor, ut semper dolor elementum pulvinar.
69 |     Curabitur vitae lacus ut augue viverra venenatis non non libero. Nullam
70 |     vitae pharetra felis. Integer a turpis non libero posuere dictum eget id
71 |     massa. Nulla ac lorem dictum, facilisis lectus a, pellentesque nisi.
72 |     Phasellus sapien enim, rhoncus et mattis eu, facilisis sed est. Maecenas
73 |     faucibus ultrices varius.
74 |   </p>
75 | </div>
76 | <Seo
77 |   title="Services | Business Frontpage"
78 |   description="This is service page"
79 |   type="WebPage"
80 | />
81 | 
82 | <style>
83 |   h3 {
84 |     padding-bottom: 0.5em;
85 |     margin-bottom: 0.5em;
86 |     font-size: 2em;
87 |     font-weight: 500;
88 |     border-bottom: 1px solid #ddd;
89 |   }
90 | </style>
91 | 


--------------------------------------------------------------------------------