chore: favicons and OG image added

JayeshVP24 · Feb 14, 2024 · 19aab43 · 19aab43
1 parent 6df61f4
commit 19aab43
Show file tree

Hide file tree

Showing 21 changed files with 149 additions and 15 deletions.
diff --git a/.gitignore b/.gitignore
@@ -3,6 +3,7 @@ node_modules
 /build
 /.svelte-kit
 /.vercel
+/fonts
 /package
 .env
 .env.*

diff --git a/package.json b/package.json
@@ -33,6 +33,7 @@
         "prettier-plugin-svelte": "^3.1.2",
         "svelte": "^4.2.7",
         "svelte-check": "^3.6.0",
+        "svelte-seo": "^1.6.0",
         "tailwindcss": "^3.4.1",
         "tslib": "^2.4.1",
         "typescript": "^5.0.0",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/app.html b/src/app.html
@@ -1,20 +1,26 @@
 <!doctype html>
 <html lang="en">
-    <head>
-        <meta charset="utf-8" />
-        <link rel="icon" href="%sveltekit.assets%/favicon.png" />
-        <meta name="viewport" content="width=device-width, initial-scale=1" />
-        <link rel="preconnect" href="https://fonts.googleapis.com" />
-        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-        <link
-            href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap"
-            rel="stylesheet"
-        />
 
-        %sveltekit.head%
-    </head>
+<head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="%sveltekit.assets%/favicon.png" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet" />
+    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
+    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
+    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
+    <link rel="manifest" href="/site.webmanifest" />
+    <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#282828" />
+    <meta name="msapplication-TileColor" content="#ffffff" />
+    <meta name="theme-color" content="#ffffff" />
+
+    %sveltekit.head%
+</head>
+
+<body data-sveltekit-preload-data="hover">
+    <div style="display: contents">%sveltekit.body%</div>
+</body>
 
-    <body data-sveltekit-preload-data="hover">
-        <div style="display: contents">%sveltekit.body%</div>
-    </body>
 </html>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+    import SvelteSeo from 'svelte-seo';
     import { PUBLIC_POSTHOG_API_KEY } from '$env/static/public';
     import Footer from '$lib/components/Footer.svelte';
     import '../app.pcss';
@@ -15,6 +16,38 @@
     }
 </script>
 
+<SvelteSeo
+    title="FontAlt | Alternatives for your favorite fonts"
+    description="Tired of using the same boring font? Here are alternatives for your favourite fonts – whether it's Inter or Comic Sans"
+    canonical="https://fontalt.com/"
+    keywords="fonts, alternative fonts, font alternatives, alternative, best fonts"
+    openGraph={{
+        title: 'FontAlt | Alternatives for your favorite fonts',
+        description:
+            "Tired of using the same boring font? Here are alternatives for your favourite fonts – whether it's Inter or Comic Sans",
+        image: 'https://fontalt.com/fontalt-og.png',
+        url: 'https://fontalt.com/',
+        type: 'website',
+        images: [
+            {
+                url: 'https://fontalt.com/fontalt-og.png',
+                width: 1200,
+                height: 630,
+                alt: 'Alternative to your favorite fonts'
+            }
+        ],
+        site_name: 'Font Alt'
+    }}
+    twitter={{
+        card: 'summary_large_image',
+        site: '@kuxshl',
+        title: 'FontAlt | Alternatives for your favorite fonts',
+        description:
+            "Tired of using the same boring font? Here are alternatives for your favourite fonts – whether it's Inter or Comic Sans",
+        image: 'https://fontalt.com/fontalt-og.png'
+    }}
+/>
+
 <ModeWatcher />
 <slot />
 <Footer />
diff --git a/static/android-chrome-192x192.png b/static/android-chrome-192x192.png
diff --git a/static/android-chrome-512x512.png b/static/android-chrome-512x512.png
diff --git a/static/apple-touch-icon.png b/static/apple-touch-icon.png
diff --git a/static/browserconfig.xml b/static/browserconfig.xml
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+    <msapplication>
+        <tile>
+            <square150x150logo src="/mstile-150x150.png"/>
+            <TileColor>#ffffff</TileColor>
+        </tile>
+    </msapplication>
+</browserconfig>
diff --git a/static/favicon-16x16.png b/static/favicon-16x16.png
diff --git a/static/favicon-32x32.png b/static/favicon-32x32.png
diff --git a/static/favicon.ico b/static/favicon.ico
diff --git a/static/favicon.png b/static/favicon.png
diff --git a/static/fontalt-og.png b/static/fontalt-og.png
diff --git a/static/mstile-144x144.png b/static/mstile-144x144.png
diff --git a/static/mstile-150x150.png b/static/mstile-150x150.png
diff --git a/static/mstile-310x150.png b/static/mstile-310x150.png
diff --git a/static/mstile-310x310.png b/static/mstile-310x310.png
diff --git a/static/mstile-70x70.png b/static/mstile-70x70.png
diff --git a/static/safari-pinned-tab.svg b/static/safari-pinned-tab.svg
diff --git a/static/site.webmanifest b/static/site.webmanifest
@@ -0,0 +1,19 @@
+{
+    "name": "",
+    "short_name": "",
+    "icons": [
+        {
+            "src": "/android-chrome-192x192.png",
+            "sizes": "192x192",
+            "type": "image/png"
+        },
+        {
+            "src": "/android-chrome-512x512.png",
+            "sizes": "512x512",
+            "type": "image/png"
+        }
+    ],
+    "theme_color": "#ffffff",
+    "background_color": "#ffffff",
+    "display": "standalone"
+}
-Original file line number
+Diff line change
@@ Expand Up / @@ -3,6 +3,7 @@ node_modules @@
     /build
     /.svelte-kit
     /.vercel
+    /fonts
     /package
     .env
     .env.*
@@ Expand Down @@