separate out static, api, and add layout

bjmckenz · Mar 11, 2024 · b3e8278 · b3e8278
1 parent 975b178
commit b3e8278
Show file tree

Hide file tree

Showing 5 changed files with 93 additions and 50 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,22 @@
+{
+    "workbench.colorCustomizations": {
+        "activityBar.activeBackground": "#f59944",
+        "activityBar.background": "#f59944",
+        "activityBar.foreground": "#15202b",
+        "activityBar.inactiveForeground": "#15202b99",
+        "activityBarBadge.background": "#e1fdee",
+        "activityBarBadge.foreground": "#15202b",
+        "commandCenter.border": "#15202b99",
+        "sash.hoverBorder": "#f59944",
+        "statusBar.background": "#f37e13",
+        "statusBar.foreground": "#15202b",
+        "statusBarItem.hoverBackground": "#c9650a",
+        "statusBarItem.remoteBackground": "#f37e13",
+        "statusBarItem.remoteForeground": "#15202b",
+        "titleBar.activeBackground": "#f37e13",
+        "titleBar.activeForeground": "#15202b",
+        "titleBar.inactiveBackground": "#f37e1399",
+        "titleBar.inactiveForeground": "#15202b99"
+    },
+    "peacock.color": "#f37e13"
+}
diff --git a/README.md b/README.md
@@ -1,38 +1,19 @@
-# create-svelte
 
-Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/main/packages/create-svelte).
+# Overview
 
-## Creating a project
+Simple Svelte project to show how a Svelte site can easily consume an API. This is the client side.
 
-If you're seeing this, you've probably already done this step. Congrats!
+API repo is https://github.com/bjmckenz/api0
 
-```bash
-# create a new project in the current directory
-npm create svelte@latest
+# How to Run
 
-# create a new project in my-app
-npm create svelte@latest my-app
-```
-
-## Developing
+*(Start the API project first -- see that project)*
 
-Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
 
-```bash
-npm run dev
-
-# or start the server and open the app in a new browser tab
-npm run dev -- --open
 ```
-
-## Building
-
-To create a production version of your app:
-
-```bash
-npm run build
+npm run dev -- --open
 ```
 
-You can preview the production build with `npm run preview`.
+# Wut
 
-> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.
+This exposes the client on port 5173. You can access it with Postman as well your browser.
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -0,0 +1,21 @@
+<h1>Svelte+API Starter Kit</h1>
+<slot />
+
+<hr/>
+<a href="/">Home</a>
+
+<style>
+    a {
+        margin-top: 20px;
+        margin-right: 10px;
+    }
+    h1 {
+        color: #e70fca;
+    }
+    p {
+        color: #4be4a7c3;
+    }
+    button {
+        margin-right: 10px;
+    }
+</style>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -1,34 +1,22 @@
 <script>
-    export let containers = [];
-
-    function showContainers() {
-        containers = [
-            { id: 1, name: 'Container 1' },
-            { id: 2, name: 'Container 2' },
-        ] ;
-    }
+    import { goto } from '$app/navigation';
 </script>
 
 
-<h1>Welcome to SvelteKit</h1>
-<p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>
+<h1>Welcome to simple Client/API site</h1>
+<p>Bits and pieces to get started in Svelte and API</p>
 
-<button on:click="{showContainers}">Show Containers</button>
+<p>Step 1: Understand how this route works.</p>
+<button on:click={() => {goto('/fromstatic')}}>Show hard-coded Containers</button>
 
-{#each containers as container}
-    <div>
-        <span class="id">{container.id}</span>
-        <span class="name">{container.name}</span></div>
-{/each}
+<p>Step 2: Display data from an API</p>
+<button on:click={() => {goto('/fromapi')}}>Show Containers via API</button>
 
-<a href="/fromapi">Fetch from API</a>
+<p>Step 3: Set up site-wide layout</p>
+<p class=note>(go look at +layout.svelte)</p>
 
 <style>
-    .id {
-        margin-right: 10px;
-        font-weight: bold;
-    }
-    .name {
-        color: #999;
+    .note {
+        font-style: italic;
     }
 </style>
diff --git a/src/routes/fromstatic/+page.svelte b/src/routes/fromstatic/+page.svelte
@@ -0,0 +1,31 @@
+<script>
+    export let containers = [];
+
+    function showContainers() {
+        containers = [
+            { id: 1, name: 'Container 1' },
+            { id: 2, name: 'Container 2' },
+        ] ;
+    }
+</script>
+
+
+<button on:click={showContainers}>Show Containers</button>
+
+
+{#each containers as container}
+    <div>
+        <span class="id">{container.id}</span>
+        <span class="name">{container.name}</span></div>
+{/each}
+
+
+<style>
+    .id {
+        margin-right: 10px;
+        font-weight: bold;
+    }
+    .name {
+        color: #999;
+    }
+</style>