Extract footer, header and display app version

src/App.svelte

@@ -1,28 +1,22 @@
 <script>
   import SvelteSeo from "svelte-seo";
   import FileViewer from "./lib/FileViewer.svelte";
-  import MediaQuery from "./lib/MediaQuery.svelte";
-  import logo from "./assets/embroidery-viewer-logo.webp";
-  import logoMobile from "./assets/embroidery-viewer-logo-mobile.webp";
   import thumbnail from "./assets/thumbnail.webp";
+  import Footer from "./lib/Footer.svelte";
+  import Header from "./lib/Header.svelte";
 
-  function configsFor(matches) {
-    return matches
-      ? { src: logoMobile, width: 350, height: 96 }
-      : { src: logo, width: 460, height: 200 };
-  }
+  const title = "Embroidery Viewer";
+  const description = "A free online tool to view embroidery files.";
+  const keywords =
+    "Free Emrbroidery Viewer, embroidery design, sewing machine, preview .pes files, preview embroider designs, brother machine.";
 </script>
 
-<SvelteSeo
-  title="Embroidery Viewer"
-  description="A free online tool to view embroidery files."
-  keywords="Free Emrbroidery Viewer, embroidery design, sewing machine, preview .pes files, preview embroider designs, brother machine."
-/>
+<SvelteSeo {title} {description} {keywords} />
 
 <SvelteSeo
   openGraph={{
-    title: "Embroidery Viewer",
-    description: "A free online tool to view embroidery files.",
+    title,
+    description,
     url: "https://embroideryviewer.xyz/",
     type: "website",
     images: [
@@ -36,37 +30,13 @@
   }}
 />
 
-<header>
-  <a href="/">
-    <MediaQuery query="(min-width: 481px) and (max-width: 812px)" let:matches>
-      {@const configs = configsFor(matches)}
-      <img
-        class="logo"
-        alt="Embroidery viewer logo."
-        src={configs.src}
-        width={configs.width}
-        height={configs.height}
-      />
-    </MediaQuery>
-  </a>
-</header>
+<Header />
 <main>
   <FileViewer />
 </main>
-<footer>
-  <p>
-    Copyright © 2022 <a
-      href="https://leomurca.xyz"
-      target="_blank"
-      rel="noreferrer">Leonardo Murça</a
-    >.
-  </p>
-</footer>
+<Footer />
 
 <style>
-  .logo {
-    background-image: logo;
-  }
   main {
     display: flex;
     flex-direction: column;
@@ -75,11 +45,4 @@
     box-sizing: border-box;
     padding: 15px;
   }
-
-  @media only screen and (max-device-width: 812px) {
-    .logo {
-      width: 100%;
-      padding: 20px;
-    }
-  }
 </style>

src/lib/Footer.svelte

@@ -0,0 +1,25 @@
+<script>
+  import { appVersion } from "../utils/env";
+</script>
+
+<footer>
+  <p>
+    Copyright © 2022 <a
+      href="https://leomurca.xyz"
+      target="_blank"
+      rel="noreferrer">Leonardo Murça</a
+    >.
+  </p>
+  <p>
+    version: {appVersion()}
+  </p>
+</footer>
+
+<style>
+  footer {
+    bottom: 0;
+  }
+  p {
+    text-align: center;
+  }
+</style>

src/lib/Header.svelte

@@ -0,0 +1,39 @@
+<script>
+  import MediaQuery from "../lib/MediaQuery.svelte";
+  import logo from "../assets/embroidery-viewer-logo.webp";
+  import logoMobile from "../assets/embroidery-viewer-logo-mobile.webp";
+
+  const configsFor = (matches) => {
+    return matches
+      ? { src: logoMobile, width: 350, height: 96 }
+      : { src: logo, width: 460, height: 200 };
+  };
+</script>
+
+<header>
+  <a href="/">
+    <MediaQuery query="(min-width: 481px) and (max-width: 812px)" let:matches>
+      {@const configs = configsFor(matches)}
+      <img
+        class="logo"
+        alt="Embroidery viewer logo."
+        src={configs.src}
+        width={configs.width}
+        height={configs.height}
+      />
+    </MediaQuery>
+  </a>
+</header>
+
+<style>
+  .logo {
+    background-image: logo;
+  }
+
+  @media only screen and (max-device-width: 812px) {
+    .logo {
+      width: 100%;
+      padding: 20px;
+    }
+  }
+</style>