From 74a4e7451836644db7ca0c50515a9adea92c581c Mon Sep 17 00:00:00 2001
From: Tiago Porto <tiago@tiagoporto.com>
Date: Wed, 13 Nov 2024 22:10:30 -0300
Subject: [PATCH] docs: fill OG tags

---
 .storybook/manager-head.html | 41 ++++++++++++++----------------------
 .storybook/manager.ts        |  4 ++--
 demo/manifest.json           |  2 +-
 src/Index.story.mdx          |  2 +-
 4 files changed, 20 insertions(+), 29 deletions(-)

diff --git a/.storybook/manager-head.html b/.storybook/manager-head.html
index 4f8d1f2..5208a6f 100644
--- a/.storybook/manager-head.html
+++ b/.storybook/manager-head.html
@@ -3,10 +3,25 @@
   content="Lib to dynamic replace SVG in &lt;image&gt; and &lt;object&gt; tags, by SVG inline."
 />
 
+<meta property="og:type" content="website" />
+<meta property="og:url" content="https://tiagoporto.github.io/svg-to-inline/" />
+<meta property="og:title" content="SVG to Inline" />
+<meta
+  property="og:description"
+  content="Web Component to fetch an external SVG file and use it inline."
+/>
+<meta
+  property="og:image"
+  content="https://socialify.git.ci/tiagoporto/svg-to-inline/image?description=1&font=Jost&logo=https://raw.githubusercontent.com/tiagoporto/svg-to-inline/refs/heads/main/docs/webcomponents%252Bsvg.svg?token=1&owner=1&pattern=Signal"
+/>
+<meta property="og:image:width" content="1280" />
+<meta property="og:image:height" content="640" />
+<meta property="og:locale" content="en" />
+
 <link rel="manifest" href="/manifest.json" />
 
 <!-- Add to homescreen for Chrome on Android -->
-<meta name="theme-color" content="#000000" />
+<meta name="theme-color" content="#FFFFFF" />
 <meta name="mobile-web-app-capable" content="yes" />
 <link
   rel="icon"
@@ -22,27 +37,3 @@
 />
 <meta name="apple-mobile-web-app-title" content="SVG to Inline" />
 <link rel="apple-touch-icon" href="images/touch/apple-touch-icon.png" />
-
-<meta property="og:type" content="website" />
-<meta property="og:url" content="https://example.com/page.html" />
-<meta property="og:title" content="Content Title" />
-<meta
-  property="og:image"
-  content="https://socialify.git.ci/tiagoporto/svg-to-inline/png?description=1&font=Jost&logo=https%3A%2F%2Fraw.githubusercontent.com%2Ftiagoporto%2Fsvg-to-inline%2Frefs%2Fheads%2Fmain%2Fdocs%2Fwebcomponents%252Bsvg.svg%3Ftoken%3D53453564&owner=1&pattern=Signal"
-/>
-<meta property="og:image:width" content="1280" />
-<meta property="og:image:height" content="640" />
-<meta property="og:description" content="Description Here" />
-<meta property="og:site_name" content="Site Name" />
-<meta property="og:locale" content="en" />
-
-<meta name="twitter:card" content="summary" />
-<meta name="twitter:site" content="@site_account" />
-<meta name="twitter:creator" content="@individual_account" />
-<meta name="twitter:url" content="https://example.com/page.html" />
-<meta name="twitter:title" content="Content Title" />
-<meta
-  name="twitter:description"
-  content="Content description less than 200 characters"
-/>
-<meta name="twitter:image" content="https://example.com/image.jpg" />
diff --git a/.storybook/manager.ts b/.storybook/manager.ts
index a555e63..b498341 100644
--- a/.storybook/manager.ts
+++ b/.storybook/manager.ts
@@ -1,6 +1,6 @@
 import { addons } from '@storybook/manager-api'
-import { themes } from '@storybook/theming'
+import { create } from '@storybook/theming/create'
 
 addons.setConfig({
-  theme: themes.light,
+  theme: create({ base: 'light', brandTitle: 'svg-to-inline' }),
 })
diff --git a/demo/manifest.json b/demo/manifest.json
index e34bbbf..d248e48 100644
--- a/demo/manifest.json
+++ b/demo/manifest.json
@@ -1,6 +1,6 @@
 {
   "name": "SVG to Inline",
-  "short_name": "",
+  "short_name": "SVG2Inline",
   "icons": [
     {
       "src": "images/touch/icon-128x128.png",
diff --git a/src/Index.story.mdx b/src/Index.story.mdx
index 8307212..ec218a3 100644
--- a/src/Index.story.mdx
+++ b/src/Index.story.mdx
@@ -1,6 +1,6 @@
 import ReadMe from '../README.md?raw'
 import { Markdown, Meta } from '@storybook/blocks'
 
-<Meta title="SVG to Inline/README" />
+<Meta title="README" />
 
 <Markdown>{ReadMe}</Markdown>