diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts
index 7a8b9e91f8..1edd74a8cf 100644
--- a/docs/.vitepress/config.ts
+++ b/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 ISC License.",
copyright: `Copyright 2020–${new Date().getUTCFullYear()} Observable, Inc.`
diff --git a/docs/.vitepress/theme/CustomLayout.vue b/docs/.vitepress/theme/CustomLayout.vue
index 17511b6035..8cbd0f98d8 100644
--- a/docs/.vitepress/theme/CustomLayout.vue
+++ b/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;
+
+
+
+
+
+
@@ -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;
+ }
+}
+
diff --git a/docs/.vitepress/theme/VersionAndStars.vue b/docs/.vitepress/theme/VersionAndStars.vue
new file mode 100644
index 0000000000..0522b556cc
--- /dev/null
+++ b/docs/.vitepress/theme/VersionAndStars.vue
@@ -0,0 +1,82 @@
+
+
+
+
+ {{ version }}
+
+
+ GitHub️ {{ formattedStarCount }}
+
+
+
+
+
+
+
diff --git a/docs/.vitepress/theme/stargazers.data.ts b/docs/.vitepress/theme/stargazers.data.ts
new file mode 100644
index 0000000000..fabf38df8a
--- /dev/null
+++ b/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();
+}