From 5eb454060062f76119a405ba169ac2d5668b8cfa Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Leonardo=20Mur=C3=A7a?= <leo@leomurca.xyz>
Date: Tue, 3 Jan 2023 16:19:45 -0300
Subject: [PATCH] Extract svelte seo to a component

---
 src/App.svelte     | 32 ++++----------------------------
 src/lib/Seo.svelte | 28 ++++++++++++++++++++++++++++
 2 files changed, 32 insertions(+), 28 deletions(-)
 create mode 100644 src/lib/Seo.svelte

diff --git a/src/App.svelte b/src/App.svelte
index effc214..01914bd 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -1,35 +1,11 @@
 <script>
-  import SvelteSeo from "svelte-seo";
-  import FileViewer from "./lib/FileViewer.svelte";
-  import thumbnail from "./assets/thumbnail.webp";
-  import Footer from "./lib/Footer.svelte";
+  import Seo from "./lib/Seo.svelte";
   import Header from "./lib/Header.svelte";
-
-  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.";
+  import FileViewer from "./lib/FileViewer.svelte";
+  import Footer from "./lib/Footer.svelte";
 </script>
 
-<SvelteSeo {title} {description} {keywords} />
-
-<SvelteSeo
-  openGraph={{
-    title,
-    description,
-    url: "https://embroideryviewer.xyz/",
-    type: "website",
-    images: [
-      {
-        url: thumbnail,
-        width: 1200,
-        height: 630,
-        alt: "Embroidery viewer thumbnail.",
-      },
-    ],
-  }}
-/>
-
+<Seo />
 <Header />
 <main>
   <FileViewer />
diff --git a/src/lib/Seo.svelte b/src/lib/Seo.svelte
new file mode 100644
index 0000000..94a4526
--- /dev/null
+++ b/src/lib/Seo.svelte
@@ -0,0 +1,28 @@
+<script>
+  import SvelteSeo from "svelte-seo";
+  import thumbnail from "../assets/thumbnail.webp";
+
+  const title = "Embroidery Viewer";
+  const description = "A free online tool to view embroidery files.";
+  const url = "https://embroideryviewer.xyz/";
+  const type = "website";
+  const keywords =
+    "Free Emrbroidery Viewer, embroidery design, sewing machine, preview .pes files, preview embroider designs, brother machine.";
+  const embroideryViewerThumbnail = {
+    url: thumbnail,
+    width: 1200,
+    height: 630,
+    alt: "Embroidery viewer thumbnail.",
+  };
+</script>
+
+<SvelteSeo {title} {description} {keywords} />
+<SvelteSeo
+  openGraph={{
+    title,
+    description,
+    url,
+    type,
+    images: [embroideryViewerThumbnail],
+  }}
+/>