Add the Made by Observable button to the top nav (#2191)

* added made by logo and github links

* colors for Github arrows

* cleaned up GitHub links

* search button rounded corners

* renamed component

* made clickable popover for touch devices

* content close to done

* button rendering in javascript

* after ui review

* tweaks

* using external component

* using external component

* cleaned up

* cleaned up changes to package.json and yarn.lock

* renamed

* add custom element to config

* remote made-by-observable

* changed component source to static site

* fixed component name

* prettier

* prettier

* prettier

* remove unnecessary style

* updated comment

---------

Co-authored-by: Mike Bostock <[email protected]>

Author: CobusT

docs/.vitepress/config.ts

@@ -6,7 +6,7 @@ import plot from "./markdown-it-plot.js";
 // https://vitepress.dev/reference/site-config
 // prettier-ignore
 export default defineConfig({
-  title: "Observable Plot",
+  title: "Plot",
   description: "The JavaScript library for exploratory data visualization",
   appearance: "force-auto",
   base: "/plot/",
@@ -17,6 +17,16 @@ export default defineConfig({
         {find: "@observablehq/plot", replacement: path.resolve("./src/index.js")},
         {find: /^.*\/VPFooter\.vue$/, replacement: fileURLToPath(new URL("./theme/CustomFooter.vue", import.meta.url))}
       ]
+    },
+    define: {
+      __APP_VERSION__: JSON.stringify(process.env.npm_package_version)
+    }
+  },
+  vue: {
+    template: {
+      compilerOptions: {
+        isCustomElement: (tag) => tag.startsWith("observable-")
+      }
     }
   },
   markdown: {
@@ -31,10 +41,11 @@ export default defineConfig({
     ["link", {rel: "apple-touch-icon", href: "https://static.observablehq.com/favicon-512.0667824687f99c942a02e06e2db1a060911da0bf3606671676a255b1cf97b4fe.png"}],
     ["link", {rel: "icon", type: "image/png", href: "https://static.observablehq.com/favicon-512.0667824687f99c942a02e06e2db1a060911da0bf3606671676a255b1cf97b4fe.png", sizes: "512x512"}],
     ["script", {async: "", src: "https://www.googletagmanager.com/gtag/js?id=G-9B88TP6PKQ"}],
-    ["script", {}, "window.dataLayer=window.dataLayer||[];\nfunction gtag(){dataLayer.push(arguments);}\ngtag('js',new Date());\ngtag('config','G-9B88TP6PKQ');"]
+    ["script", {}, "window.dataLayer=window.dataLayer||[];\nfunction gtag(){dataLayer.push(arguments);}\ngtag('js',new Date());\ngtag('config','G-9B88TP6PKQ');"],
+    ["script", {async: "", defer: "", src: "https://static.observablehq.com/assets/components/observable-made-by.js"}],
   ],
   sitemap: {
-    hostname: 'https://observablehq.com/plot/'
+    hostname: "https://observablehq.com/plot/"
   },
   themeConfig: {
     // https://vitepress.dev/reference/default-theme-config
@@ -43,12 +54,6 @@ export default defineConfig({
       light: "/observable-light.svg",
       dark: "/observable-dark.svg"
     },
-    nav: [
-      {text: "Home", link: "/"},
-      {text: "Examples", link: "https://observablehq.com/@observablehq/plot-gallery"},
-      {text: "Community", link: "/community"},
-      {text: "D3", link: "https://d3js.org"}
-    ],
     sidebar: [
       {
         text: "Introduction",
@@ -148,13 +153,6 @@ export default defineConfig({
     search: {
       provider: "local"
     },
-    socialLinks: [
-      {icon: "github", link: "https://github.com/observablehq/plot"},
-      {icon: "x", link: "https://twitter.com/observablehq"},
-      {icon: "slack", link: "https://observablehq.com/slack/join"},
-      {icon: "linkedin", link: "https://www.linkedin.com/company/observable"},
-      {icon: "youtube", link: "https://www.youtube.com/c/Observablehq"}
-    ],
     footer: {
       message: "Library released under <a style='text-decoration:underline;' href='https://github.com/observablehq/plot/blob/main/LICENSE'>ISC License</a>.",
       copyright: `Copyright 2020–${new Date().getUTCFullYear()} Observable, Inc.`

docs/.vitepress/theme/CustomLayout.vue

@@ -3,6 +3,7 @@
 import DefaultTheme from "vitepress/theme-without-fonts";
 import ExamplesGrid from "./ExamplesGrid.vue";
 import ObservablePromo from "./ObservablePromo.vue";
+import VersionAndStars from "./VersionAndStars.vue";
 
 const {Layout} = DefaultTheme;
 
@@ -16,6 +17,12 @@ const {Layout} = DefaultTheme;
     <template #home-features-after>
       <ObservablePromo />
     </template>
+    <template #nav-bar-content-after>
+      <div style="display: flex; gap: 1rem;">
+        <VersionAndStars />
+        <observable-made-by />
+      </div>
+    </template>
   </Layout>
 </template>
 
@@ -35,4 +42,19 @@ const {Layout} = DefaultTheme;
   background-color: rgba(37, 37, 41, 0.5);
 }
 
+/* Remove unnecessary elements that are empty in our implementation */
+.VPNavBarExtra,
+.VPNavBarHamburger {
+  display: none !important;
+}
+
+/* rounded corners for search field */
+@media (min-width: 768px) {
+  .DocSearch-Button {
+    border-radius: 1000px;
+    padding-right: 0.75rem;
+    height: 2rem;
+  }
+}
+
 </style>

docs/.vitepress/theme/VersionAndStars.vue

@@ -0,0 +1,82 @@
+<script setup>
+
+import {formatPrefix} from "d3-format";
+import {data} from "./stargazers.data";
+
+const formattedStarCount = data ? formatPrefix(".1s", 1000)(data) : "";
+const version = __APP_VERSION__;
+
+</script>
+
+<template>
+  <a target="_blank" :title="version.concat(' release notes')" href="https://github.com/observablehq/plot/releases">
+    <span>{{ version }}</span>
+  </a>
+  <a
+    target="_blank"
+    data-decoration="&#x2605;"
+    :title="data.toLocaleString('en-US').concat(' GitHub stars')"
+    href="https://github.com/observablehq/plot"
+  >
+    <span>GitHub️ {{ formattedStarCount }}</span>
+  </a>
+  <a
+    class="mobile"
+    target="_blank"
+    :title="data.toLocaleString('en-US').concat(' GitHub stars')"
+    href="https://github.com/observablehq/plot"
+  >
+    <svg xmlns="http://www.w3.org/2000/svg" width="21" height="21" viewBox="0 0 21 21" fill="none">
+      <path
+        d="M19.625 5.60534C18.7083 4.03477 17.4649 2.79135 15.8945 1.87479C14.3238 0.958185 12.6091 0.5 10.7492 0.5C8.88947 0.5 7.17422 0.958325 5.60388 1.87479C4.0333 2.7913 2.78997 4.03477 1.87332 5.60534C0.956814 7.17587 0.498535 8.89089 0.498535 10.7504C0.498535 12.984 1.15021 14.9926 2.4539 16.7766C3.75744 18.5607 5.44142 19.7952 7.50571 20.4803C7.746 20.5249 7.92388 20.4936 8.03954 20.387C8.15524 20.2804 8.21302 20.1467 8.21302 19.9868C8.21302 19.9601 8.21073 19.7199 8.20629 19.266C8.20171 18.8122 8.19956 18.4162 8.19956 18.0783L7.89256 18.1315C7.69682 18.1673 7.44989 18.1825 7.15178 18.1782C6.8538 18.174 6.54446 18.1428 6.22419 18.0847C5.90377 18.0272 5.60575 17.8937 5.32988 17.6846C5.05416 17.4755 4.85842 17.2018 4.74272 16.8639L4.60925 16.5568C4.52029 16.3523 4.38023 16.1251 4.18888 15.8761C3.99754 15.6269 3.80405 15.458 3.60831 15.369L3.51486 15.3021C3.45259 15.2577 3.39481 15.204 3.34138 15.1418C3.28799 15.0796 3.24802 15.0173 3.22132 14.955C3.19458 14.8926 3.21674 14.8414 3.28804 14.8012C3.35933 14.761 3.48817 14.7416 3.67512 14.7416L3.94196 14.7814C4.11993 14.8171 4.34007 14.9236 4.60266 15.1017C4.86511 15.2796 5.08085 15.5109 5.24994 15.7956C5.4547 16.1605 5.7014 16.4385 5.99072 16.6299C6.27982 16.8212 6.5713 16.9167 6.86488 16.9167C7.15846 16.9167 7.41203 16.8945 7.62567 16.8502C7.83908 16.8057 8.0393 16.7388 8.22625 16.6499C8.30633 16.0535 8.52437 15.5953 8.88017 15.275C8.37304 15.2217 7.9171 15.1414 7.51212 15.0347C7.10736 14.9278 6.6891 14.7544 6.25761 14.5139C5.82589 14.2738 5.46774 13.9756 5.18309 13.6198C4.89839 13.2639 4.66474 12.7966 4.48247 12.2183C4.3001 11.6399 4.20889 10.9726 4.20889 10.2163C4.20889 9.13941 4.56044 8.22304 5.26341 7.46665C4.93411 6.65705 4.96519 5.74947 5.35676 4.744C5.61482 4.66382 5.9975 4.72399 6.50463 4.92412C7.01186 5.12434 7.38323 5.29587 7.61912 5.43808C7.85502 5.58024 8.04402 5.70071 8.18642 5.79842C9.01411 5.56715 9.86825 5.45149 10.7491 5.45149C11.6299 5.45149 12.4843 5.56715 13.312 5.79842L13.8192 5.47823C14.166 5.26459 14.5756 5.06881 15.0469 4.89083C15.5185 4.71295 15.8791 4.66396 16.1284 4.74414C16.5286 5.74966 16.5643 6.65719 16.2349 7.46679C16.9378 8.22318 17.2895 9.13978 17.2895 10.2164C17.2895 10.9727 17.198 11.6421 17.0159 12.225C16.8336 12.808 16.5979 13.2749 16.3088 13.6265C16.0194 13.9781 15.659 14.274 15.2275 14.5141C14.7959 14.7544 14.3775 14.9278 13.9728 15.0347C13.5678 15.1415 13.1119 15.2219 12.6047 15.2752C13.0673 15.6755 13.2986 16.3073 13.2986 17.1704V19.9864C13.2986 20.1464 13.3542 20.2799 13.4656 20.3867C13.5768 20.4932 13.7524 20.5246 13.9927 20.4799C16.0573 19.7949 17.7413 18.5603 19.0448 16.7762C20.3481 14.9922 21 12.9837 21 10.75C20.9996 8.89075 20.541 7.17587 19.625 5.60534Z"
+        fill="currentColor"
+      />
+    </svg>
+  </a>
+</template>
+
+<style scoped>
+
+a {
+  font-size: 14px;
+  font-weight: 500;
+  text-wrap: nowrap;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+a[target="_blank"] {
+  align-items: center;
+  gap: 0.25rem;
+  text-decoration: none;
+}
+
+a[target="_blank"]:hover span,
+a[target="_blank"][data-decoration]::after {
+  color: var(--vp-c-brand);
+  transition: color 0.25s;
+}
+
+a[target="_blank"][data-decoration]::after {
+  content: attr(data-decoration);
+}
+
+a[target="_blank"]:not(:hover, :focus)::after {
+  color: inherit;
+}
+
+a.mobile {
+  display: none;
+}
+
+@media screen and (max-width: 560px) {
+  a {
+    display: none;
+  }
+  a.mobile {
+    display: flex;
+  }
+}
+
+</style>

docs/.vitepress/theme/stargazers.data.ts

@@ -0,0 +1,28 @@
+const REPO = "observablehq/plot";
+
+export default {
+  async load() {
+    let stargazers_count;
+    try {
+      ({stargazers_count} = await github(`/repos/${REPO}`));
+    } catch (error) {
+      if (process.env.CI) throw error;
+      stargazers_count = NaN;
+    }
+    return stargazers_count;
+  }
+};
+
+async function github(
+  path,
+  {
+    authorization = process.env.GITHUB_TOKEN && `token ${process.env.GITHUB_TOKEN}`,
+    accept = "application/vnd.github.v3+json"
+  } = {}
+) {
+  const url = new URL(path, "https://api.github.com");
+  const headers = {...(authorization && {authorization}), accept};
+  const response = await fetch(url, {headers});
+  if (!response.ok) throw new Error(`fetch error: ${response.status} ${url}`);
+  return await response.json();
+}