feat: add og-image

unocss · Apr 5, 2023 · 396af45 · 396af45
1 parent ee96452
commit 396af45
Show file tree

Hide file tree

Showing 10 changed files with 44 additions and 21 deletions.
diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts
@@ -212,7 +212,7 @@ const SidebarConfig: DefaultTheme.SidebarItem[] = [
 ]
 
 const ogUrl = 'https://unocss.dev/'
-const ogImage = `${ogUrl}og-image.png`
+const ogImage = `${ogUrl}og.png`
 const title = 'UnoCSS'
 const description = 'The instant on-demand Atomic CSS engine'
 
@@ -223,7 +223,7 @@ export default defineConfig({
   description,
   outDir: './dist',
   head: [
-    ['link', { rel: 'icon', href: '/logo.svg', type: 'image/svg+xml' }],
+    ['link', { rel: 'icon', href: '/favicon.svg', type: 'image/svg+xml' }],
     ['link', { rel: 'alternate icon', href: '/favicon.ico', type: 'image/png', sizes: '16x16' }],
     ['meta', { name: 'author', content: 'Anthony Fu' }],
     ['meta', { property: 'og:type', content: 'website' }],
@@ -235,6 +235,7 @@ export default defineConfig({
     ['meta', { name: 'twitter:image', content: ogImage }],
     ['meta', { name: 'twitter:site', content: '@antfu7' }],
     ['meta', { name: 'twitter:url', content: ogUrl }],
+    ['link', { rel: 'search', type: 'application/opensearchdescription+xml', href: '/search.xml', title: 'UnoCSS' }],
   ],
   lastUpdated: true,
   cleanUrls: true,

diff --git a/docs/public/cover/default.png b/docs/public/cover/default.png
diff --git a/interactive/public/favicon.svg → docs/public/favicon.svg b/interactive/public/favicon.svg → docs/public/favicon.svg
diff --git a/docs/public/logo.svg b/docs/public/logo.svg
diff --git a/docs/public/og.png b/docs/public/og.png
diff --git a/interactive/public/robots.txt → docs/public/robots.txt b/interactive/public/robots.txt → docs/public/robots.txt
diff --git a/docs/public/search.xml b/docs/public/search.xml
@@ -0,0 +1,9 @@
+<OpenSearchDescription xmlns="http://a9.com/-/spec/opensearch/1.1/" xmlns:moz="http://www.mozilla.org/2006/browser/search/">
+  <ShortName>UnoCSS</ShortName>
+  <Description>UnoCSS Interactive Docs</Description>
+  <InputEncoding>UTF-8</InputEncoding>
+  <Image width="192" height="192">https://unocss.dev/favicon.svg</Image>
+  <Image width="512" height="512">https://unocss.dev/favicon.svg</Image>
+  <Image width="16" height="16">https://unocss.dev/favicon.svg</Image>
+  <Url type="text/html" template="https://unocss.dev/interactive/?s={searchTerms}"/>
+</OpenSearchDescription>
diff --git a/interactive/app.vue b/interactive/app.vue
@@ -3,15 +3,27 @@ import '@unocss/reset/antfu.css'
 import './markdown.css'
 import 'uno.css'
 
+const ogUrl = 'https://unocss.dev/'
+const ogImage = `${ogUrl}og.png`
+const title = 'UnoCSS Interactive Docs'
+const description = 'The instant on-demand Atomic CSS engine'
+
 useHead({
-  title: 'UnoCSS Interactive Docs',
+  title,
   htmlAttrs: [
     { lang: 'en-US' },
   ],
-  meta: [{
-    name: 'description',
-    content: 'UnoCSS Interactive Docs',
-  }],
+  meta: [
+    { property: 'og:type', content: 'website' },
+    { name: 'og:title', content: title },
+    { name: 'og:description', content: description },
+    { property: 'og:image', content: ogImage },
+    { name: 'twitter:title', content: title },
+    { name: 'twitter:card', content: 'summary_large_image' },
+    { name: 'twitter:image', content: ogImage },
+    { name: 'twitter:site', content: '@antfu7' },
+    { name: 'twitter:url', content: ogUrl },
+  ],
   link: [
     { rel: 'icon', type: 'image/svg+xml', href: '/favicon.svg' },
     { rel: 'search', type: 'application/opensearchdescription+xml', href: '/search.xml', title: 'UnoCSS' },

diff --git a/interactive/public/search.xml b/interactive/public/search.xml
diff --git a/playground/index.html b/playground/index.html
@@ -4,7 +4,17 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>UnoCSS Playground</title>
-    <link rel="icon" href="/favicon.svg" type="image/svg+xml">
+    <meta property="og:type" content="website">
+    <meta name="og:title" content="UnoCSS Playground">
+    <meta name="og:description" content="The instant on-demand Atomic CSS engine">
+    <meta property="og:image" content="https://unocss.dev/og.png">
+    <meta name="twitter:title" content="UnoCSS Playground">
+    <meta name="twitter:card" content="summary_large_image">
+    <meta name="twitter:image" content="https://unocss.dev/og.png">
+    <meta name="twitter:site" content="@antfu7">
+    <meta name="twitter:url" content="https://unocss.dev/playground/">
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg">
+    <link rel="search" type="application/opensearchdescription+xml" href="/search.xml" title="UnoCSS">
     <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@100;200;400&family=Fira+Code&display=swap" rel="stylesheet" />