Adding OG and twitter card, cleaning up images

docs/src/_data/site.js

@@ -0,0 +1,9 @@
+export default {
+  title: "Basecoat",
+  description: "A components library built with Tailwind CSS that works with any web stack.",
+  author: {
+    name: "Ronan Berder",
+    x: "@hunvreus"
+  },
+  url: process.env.ELEVENTY_ENV === 'development' ? "http://localhost:8080" : "https://basecoatui.com"
+};

docs/src/_data/site.json

@@ -1,4 +0,0 @@
-{
-  "title": "Basecoat",
-  "description": "shadcn/ui for the rest of us"
-}

docs/src/_includes/layouts/base.njk

@@ -45,15 +45,34 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
 
   <!-- Title & Description -->
-  <title>{{ site.title + ": " + title if page.url === "/" else title + " - " + site.title }}</title>
-  <meta name="description" content="{{ description or site.description }}"/>
-  <meta name="title" content="{{ title }} | Basecoat">
-  <meta name="description" content="{{ description }}">
+  {% set meta_title = title ~ ' | ' ~ site.title  if title else site.title %}
+  {% set meta_description = description or site.description %}
+  <title>{{ meta_title }}</title>
+  <meta name="description" content="{{ meta_description }}"/>
+  <meta name="title" content="{{ meta_title }}">
 
   <!-- Favicon -->
   <link rel="icon" type="image/svg+xml" href="/assets/favicon.svg">
   <link rel="apple-touch-icon" sizes="180x180" href="/assets/apple-touch-icon.png">
 
+   <!-- Open Graph / Facebook -->
+  <meta property="og:type" content="website">
+  <meta property="og:url" content="{{ site.url }}{{ page.url }}">
+  <meta property="og:title" content="{{ meta_title }}">
+  <meta property="og:description" content="{{ meta_description }}">
+  <meta property="og:image" content="{{ site.url }}/assets/social.png">
+  <meta property="og:site_name" content="{{ site.title }}">
+  <meta property="og:locale" content="en_US">
+  <meta property="og:author" content="{{ site.author.name }}">
+
+  <!-- X/Twitter -->
+  <meta name="twitter:card" content="summary_large_image">
+  <meta name="twitter:url" content="{{ site.url }}{{ page.url }}">
+  <meta name="twitter:title" content="{{ title if title else site.title }}">
+  <meta name="twitter:description" content="{{ meta_description }}">
+  <meta name="twitter:image" content="{{ site.url }}/assets/social.png">
+  <meta name="twitter:creator" content="{{ site.author.x }}">
+
   <!-- CSS -->
   <link rel="preconnect" href="https://rsms.me/">
   <link rel="stylesheet" href="https://rsms.me/inter/inter.css">

docs/src/assets/styles.css

@@ -498,9 +498,6 @@
   .w-max {
     width: max-content;
   }
-  .max-w-80 {
-    max-width: calc(var(--spacing) * 80);
-  }
   .max-w-\[75\%\] {
     max-width: 75%;
   }

package.json

@@ -46,7 +46,7 @@
     "build": "node ./scripts/build.js",
     "docs:build": "tailwindcss -i ./docs/css/styles.css -o ./docs/src/assets/styles.css --minify && eleventy",
     "docs:dev:css": "tailwindcss -i ./docs/css/styles.css -o ./docs/src/assets/styles.css --watch",
-    "docs:dev:eleventy": "eleventy --serve",
+    "docs:dev:eleventy": "ELEVENTY_ENV=prod eleventy --serve",
     "docs:dev": "concurrently \"npm:docs:dev:css\" \"npm:docs:dev:eleventy\""
   },
   "devDependencies": {