Add customized signature and banner onto README and link preview (#254)

* Add customized signature and banner onto README and link preview Fixes #253 * Update title * Update self picture
ryuuart · Sep 26, 2023 · 21c945e · 21c945e
1 parent e841237
commit 21c945e
Show file tree

Hide file tree

Showing 16 changed files with 84 additions and 3 deletions.
diff --git a/README.md b/README.md
@@ -1,5 +1,7 @@
 # MANAWAVE
 
+![MANAWAVE Forum Signature](./assets/signature.jpg)
+
 MANAWAVE is a zero-dependency, customizable, and omnidirectional marquee library for vanilla javascript.
 
 Artistically, it's the website [manawave.art](https://manawave.art) that uses the MANAWAVE library. The website contains a lot of artistic and visual experimentation by [ryuuart](https://github.com/ryuuart).

diff --git a/assets/signature.jpg b/assets/signature.jpg
diff --git a/web/public/android-chrome-192x192.png b/web/public/android-chrome-192x192.png
diff --git a/web/public/android-chrome-256x256.png b/web/public/android-chrome-256x256.png
diff --git a/web/public/apple-touch-icon.png b/web/public/apple-touch-icon.png
diff --git a/web/public/browserconfig.xml b/web/public/browserconfig.xml
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+    <msapplication>
+        <tile>
+            <square150x150logo src="/mstile-150x150.png"/>
+            <TileColor>#2b5797</TileColor>
+        </tile>
+    </msapplication>
+</browserconfig>
diff --git a/web/public/favicon-16x16.png b/web/public/favicon-16x16.png
diff --git a/web/public/favicon-32x32.png b/web/public/favicon-32x32.png
diff --git a/web/public/favicon.ico b/web/public/favicon.ico
diff --git a/web/public/mstile-150x150.png b/web/public/mstile-150x150.png
diff --git a/web/public/safari-pinned-tab.svg b/web/public/safari-pinned-tab.svg
diff --git a/web/public/site.webmanifest b/web/public/site.webmanifest
@@ -0,0 +1,19 @@
+{
+    "name": "",
+    "short_name": "",
+    "icons": [
+        {
+            "src": "/android-chrome-192x192.png",
+            "sizes": "192x192",
+            "type": "image/png"
+        },
+        {
+            "src": "/android-chrome-256x256.png",
+            "sizes": "256x256",
+            "type": "image/png"
+        }
+    ],
+    "theme_color": "#000000",
+    "background_color": "#000000",
+    "display": "standalone"
+}
diff --git a/web/public/social-share.png b/web/public/social-share.png
diff --git a/web/src/assets/img/self.webp b/web/src/assets/img/self.webp
diff --git a/web/src/layouts/Layout.astro b/web/src/layouts/Layout.astro
@@ -14,11 +14,33 @@ const { title, tabcolor = "black" } = Astro.props;
     <meta charset="UTF-8" />
     <meta name="description" content="ambient infinity" />
     <meta name="viewport" content="width=device-width" />
-    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <meta name="theme-color" content={tabcolor} />
-    <link rel="stylesheet" href="/styles/global.css" />
     <meta name="generator" content={Astro.generator} />
+    <link rel="stylesheet" href="/styles/global.css" />
+
+    <!-- Favicon -->
+    <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="#0039c9">
+    <meta name="msapplication-TileColor" content="#2b5797">
+    <meta name="theme-color" content="#000000">
+
+    <!-- Open Graph -->
+    <meta property="og:title" content="MANAWAVE">
+    <meta property="og:type" content="website" />
+    <meta property="og:description" content="Controllable, configurable, and omnidirectional marquee defined with only HTML & CSS.">
+    <meta property="og:image" content="https://manawave.art/social-share.png">
+    <meta property="og:url" content="https://manawave.art/">
+    <meta name="twitter:card" content="summary_large_image">
+
+    <!-- Site Metadata -->
     <title>{title}</title>
+    <meta
+      name="description"
+      content="MANAWAVE is a controllable, configurable, and omnidirectional marquee defined with only HTML & CSS. It has zero dependencies and is built on vanilla JavaScript."
+    />
   </head>
   <body>
     <slot />

diff --git a/web/src/pages/index.astro b/web/src/pages/index.astro
@@ -10,7 +10,7 @@ import GodText from "../components/home/hero/GodText.astro";
 import Starlight from "../components/home/hero/Starlight.astro";
 ---
 
-<Layout title="manawave">
+<Layout title="MANAWAVE">
   <main>
     <Spacer size="4rem" />
     <HR semantic={false} />