Add sitemap and OG image to site (#1347)

* Add sitemap generation

* Add og image

* Fix links

* remove comments

docs/.vitepress/config.ts

@@ -1,13 +1,22 @@
 import { fileURLToPath, URL } from 'node:url'
 import path from 'path';
 import { defineConfig } from 'vitepress'
+import { createWriteStream } from 'node:fs'
+import { resolve } from 'node:path'
+import { SitemapStream } from 'sitemap'
 import sidebar from './sidebar';
 
+const links = []
+
+
+const title = "Lucide Icons";
+const description = "Beautiful & consistent icon toolkit made by the community."
+
 // https://vitepress.dev/reference/site-config
 export default defineConfig({
+  title,
+  description,
   cleanUrls: true,
-  title: "Lucide",
-  description: "Beautiful & consistent icon toolkit made by the community.",
   outDir: '.vercel/output/static',
   vite: {
     resolve: {
@@ -28,14 +37,67 @@ export default defineConfig({
     }
   },
   head: [
-    [
-      'script',
-      {
-        src: 'https://plausible.io/js/script.js',
-        'data-domain': 'lucide.dev',
-        defer: ''
-      }
-    ],
+    [ 'script', {
+      src: 'https://plausible.io/js/script.js',
+      'data-domain': 'lucide.dev',
+      defer: ''
+    }],
+    [ 'meta', {
+      property:"og:locale",
+      content:"en_US"
+    }],
+    [ 'meta', {
+      property:"og:type",
+      content:"website"
+    }],
+    [ 'meta', {
+      property:"og:site_name",
+      content: title,
+    }],
+    [ 'meta', {
+      property:"og:title",
+      content: title,
+    }],
+    [ 'meta', {
+      property:"og:description",
+      content: description
+    }],
+    [ 'meta', {
+      property:"og:url",
+      content:"https://lucide.dev"
+    }],
+    [ 'meta', {
+      property:"og:image",
+      content: "https://lucide.dev/og.png"
+    }],
+    [ 'meta', {
+      property:"og:image:width",
+      content:"1200"
+    }],
+    [ 'meta', {
+      property:"og:image:height",
+      content:"630"
+    }],
+    [ 'meta', {
+      property:"og:image:type",
+      content:"image/png"
+    }],
+    [ 'meta', {
+      property:"twitter:card",
+      content:"summary_large_image"
+    }],
+    [ 'meta', {
+      property:"twitter:title",
+      content: title,
+    }],
+    [ 'meta', {
+      property:"twitter:description",
+      content: description
+    }],
+    [ 'meta', {
+      property:"twitter:image",
+      content:"https://lucide.dev/og.png"
+    }],
   ],
   themeConfig: {
     // https://vitepress.dev/reference/default-theme-config
@@ -44,7 +106,7 @@ export default defineConfig({
       dark: '/logo.dark.svg'
     },
     nav: [
-      { text: 'Icons', link: '/icons/index.md' },
+      { text: 'Icons', link: '/icons/' },
       { text: 'Guide', link: '/guide/' },
       { text: 'Packages', link: '/packages' },
       { text: 'License', link: '/license' },
@@ -61,5 +123,37 @@ export default defineConfig({
     editLink: {
       pattern: 'https://github.com/lucide-icons/lucide/edit/main/docs/:path'
     },
-  }
+  },
+  transformHtml: (_, id, { pageData }) => {
+    if (/[\\/]404\.html$/.test(id)) {
+      return
+    }
+
+    if (pageData.relativePath === 'index.md') {
+      console.log('Home!');
+    }
+
+    if (pageData.relativePath.startsWith('icons/')) {
+      links.push({
+        url: pageData.relativePath.replace(/((^|\/)index)?\.md$/, '$2'),
+        lastmod: pageData?.params?.changedRelease?.date
+      })
+      return
+    }
+
+    links.push({
+      url: pageData.relativePath.replace(/((^|\/)index)?\.md$/, '$2'),
+      lastmod: pageData.lastUpdated
+    })
+  },
+  buildEnd: async ({ outDir }) => {
+    const sitemap = new SitemapStream({
+      hostname: 'https://lucide.dev/'
+    })
+    const writeStream = createWriteStream(resolve(outDir, 'sitemap.xml'))
+    sitemap.pipe(writeStream)
+    links.forEach((link) => sitemap.write(link))
+    sitemap.end()
+    await new Promise((r) => writeStream.on('finish', r))
+  },
 })

docs/index.md

@@ -13,10 +13,10 @@ hero:
   actions:
     - theme: brand
       text: View all icons
-      link: icons/index
+      link: icons/
     - theme: alt
       text: Get Started
-      link: guide/index
+      link: guide/
     - theme: alt
       text: GitHub
       link: https://github.com/lucide-icons/lucide

docs/package.json

@@ -46,6 +46,7 @@
     "shiki": "^0.14.2",
     "shiki-processor": "^0.1.3",
     "simple-git": "^3.18.0",
+    "sitemap": "^7.1.1",
     "svg-pathdata": "^6.0.3",
     "svgson": "^5.2.1",
     "vue": "^3.2.47"

pnpm-lock.yaml

@@ -108,6 +108,9 @@ importers:
       simple-git:
         specifier: ^3.18.0
         version: 3.18.0
+      sitemap:
+        specifier: ^7.1.1
+        version: 7.1.1
       svg-pathdata:
         specifier: ^6.0.3
         version: 6.0.3
@@ -6204,12 +6207,15 @@ packages:
 
   /@types/node@12.11.1:
     resolution: {integrity: sha512-TJtwsqZ39pqcljJpajeoofYRfeZ7/I/OMUQ5pR4q5wOKf2ocrUvBAZUMhWsOvKx3dVc/aaV5GluBivt0sWqA5A==}
-    dev: true
 
   /@types/node@16.9.1:
     resolution: {integrity: sha512-QpLcX9ZSsq3YYUUnD3nFDY8H7wctAhQj/TFKL8Ya8v5fMm3CFXxo8zStsLAl780ltoYoo1WvKUVGBQK+1ifr7g==}
     dev: false
 
+  /@types/node@17.0.45:
+    resolution: {integrity: sha512-w+tIMs3rq2afQdsPJlODhoUEKzFP1ayaoyl1CcnwtIlsVe7K7bA1NGm4s3PraqTLlXnbIN84zuBlxBWo1u9BLw==}
+    dev: false
+
   /@types/parse-json@4.0.0:
     resolution: {integrity: sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==}
     dev: true
@@ -6282,6 +6288,12 @@ packages:
       '@types/node': 12.11.1
     dev: true
 
+  /@types/sax@1.2.4:
+    resolution: {integrity: sha512-pSAff4IAxJjfAXUG6tFkO7dsSbTmf8CtUpfhhZ5VhkRpC4628tJhh3+V6H1E+/Gs9piSzYKT5yzHO5M4GG9jkw==}
+    dependencies:
+      '@types/node': 12.11.1
+    dev: false
+
   /@types/scheduler@0.16.2:
     resolution: {integrity: sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==}
     dev: true
@@ -7528,6 +7540,10 @@ packages:
     resolution: {integrity: sha512-58S9QDqG0Xx27YwPSt9fJxivjYl432YCwfDMfZ+71RAqUrZef7LrKQZ3LHLOwCS4FLNBplP533Zx895SeOCHvA==}
     dev: true
 
+  /arg@5.0.2:
+    resolution: {integrity: sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==}
+    dev: false
+
   /argparse@1.0.10:
     resolution: {integrity: sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==}
     dependencies:
@@ -17849,6 +17865,17 @@ packages:
     resolution: {integrity: sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg==}
     dev: true
 
+  /sitemap@7.1.1:
+    resolution: {integrity: sha512-mK3aFtjz4VdJN0igpIJrinf3EO8U8mxOPsTBzSsy06UtjZQJ3YY3o3Xa7zSc5nMqcMrRwlChHZ18Kxg0caiPBg==}
+    engines: {node: '>=12.0.0', npm: '>=5.6.0'}
+    hasBin: true
+    dependencies:
+      '@types/node': 17.0.45
+      '@types/sax': 1.2.4
+      arg: 5.0.2
+      sax: 1.2.4
+    dev: false
+
   /slash@3.0.0:
     resolution: {integrity: sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==}
     engines: {node: '>=8'}