web: reusable meowbalt component & page placeholders

web/src/components/meowbalt/MeowbaltLoaf.svelte

@@ -0,0 +1,14 @@
+<img
+    id="meowbalt-loaf"
+    src="/meowbalt/loaf.png"
+    height="152"
+    width="141"
+    alt="black and white cat smiling and loafing"
+/>
+<style>
+    #meowbalt-loaf {
+        display: block;
+        margin: 0;
+        object-fit: cover;
+    }
+</style>

web/src/components/misc/Placeholder.svelte

@@ -0,0 +1,16 @@
+<script>
+    import MeowbaltLoaf from "../meowbalt/MeowbaltLoaf.svelte";
+    export let pageName;
+</script>
+
+<div id="placeholder-container" class="center-column-container">
+    <MeowbaltLoaf />
+    <div>{pageName} page is not ready yet!</div>
+</div>
+
+<style>
+    #placeholder-container {
+        gap: var(--padding);
+        text-align: center;
+    }
+</style>

web/src/routes/+layout.svelte

@@ -80,6 +80,14 @@
         background-color: var(--button-hover);
     }
 
+    :global(.center-column-container) {
+        display: flex;
+        width: 100%;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+    }
+
     #cobalt {
         height: 100vh;
         display: grid;

web/src/routes/+page.svelte

@@ -1,15 +1,11 @@
 <script>
     import Omnibox from "../components/save/Omnibox.svelte";
+    import MeowbaltLoaf from "../components/meowbalt/MeowbaltLoaf.svelte";
 </script>
 
-<div id="cobalt-save-container">
+<div id="cobalt-save-container" class="center-column-container">
     <main id="cobalt-save">
-        <img
-            id="meowbalt-smile"
-            src="/meowbalt/smile.png"
-            height="152"
-            alt="black and white cat smiling and loafing"
-        />
+        <MeowbaltLoaf />
         <Omnibox />
     </main>
     <div id="terms-note">
@@ -18,12 +14,6 @@
 </div>
 
 <style>
-    #cobalt-save-container {
-        display: flex;
-        width: 100%;
-        flex-direction: column;
-    }
-
     #cobalt-save {
         display: flex;
         flex-direction: column;
@@ -34,11 +24,6 @@
         gap: 24px;
     }
 
-    #meowbalt-smile {
-        display: block;
-        margin: 0;
-    }
-
     #terms-note {
         bottom: 0;
         color: var(--gray);

web/src/routes/about/+page.svelte

@@ -1,2 +1,5 @@
-<!-- about page -->
-<div>about</div>
+<script>
+    import Placeholder from "../../components/misc/Placeholder.svelte";
+</script>
+
+<Placeholder pageName="about" />

web/src/routes/convert/+page.svelte

@@ -1,2 +1,5 @@
-<!-- convert page -->
-<div>convert</div>
+<script>
+    import Placeholder from "../../components/misc/Placeholder.svelte";
+</script>
+
+<Placeholder pageName="convert" />

web/src/routes/crop/+page.svelte

@@ -1,2 +1,5 @@
-<!-- crop page -->
-<div>crop</div>
+<script>
+    import Placeholder from "../../components/misc/Placeholder.svelte";
+</script>
+
+<Placeholder pageName="crop" />

web/src/routes/donate/+page.svelte

@@ -1,2 +1,5 @@
-<!-- donate page -->
-<div>donate</div>
+<script>
+    import Placeholder from "../../components/misc/Placeholder.svelte";
+</script>
+
+<Placeholder pageName="donate" />

web/src/routes/settings/+page.svelte

@@ -1,2 +1,5 @@
-<!-- settings page -->
-<div>settings</div>
+<script>
+    import Placeholder from "../../components/misc/Placeholder.svelte";
+</script>
+
+<Placeholder pageName="settings" />

web/src/routes/trim/+page.svelte

@@ -1,2 +1,5 @@
-<!-- trim page -->
-<div>trim</div>
+<script>
+    import Placeholder from "../../components/misc/Placeholder.svelte";
+</script>
+
+<Placeholder pageName="trim" />

web/src/routes/updates/+page.svelte

@@ -1,2 +1,5 @@
-<!-- updates (changelog) page -->
-<div>updates</div>
+<script>
+    import Placeholder from "../../components/misc/Placeholder.svelte";
+</script>
+
+<Placeholder pageName="updates" />