From a2b976e44dd9ebb71c169dec21f28ad3075d302d Mon Sep 17 00:00:00 2001 From: CobusT Date: Fri, 27 Sep 2024 18:29:16 -0700 Subject: [PATCH 01/24] added made by logo and github links --- docs/.vitepress/config.ts | 17 +-- docs/.vitepress/theme/GitHub.vue | 60 ++++++++ docs/.vitepress/theme/MadeByObservable.vue | 136 ++++++++++++++++++ ...{CustomLayout.vue => ObservableLayout.vue} | 17 ++- docs/.vitepress/theme/index.ts | 3 +- docs/.vitepress/theme/stargazers.data.ts | 28 ++++ 6 files changed, 244 insertions(+), 17 deletions(-) create mode 100644 docs/.vitepress/theme/GitHub.vue create mode 100644 docs/.vitepress/theme/MadeByObservable.vue rename docs/.vitepress/theme/{CustomLayout.vue => ObservableLayout.vue} (65%) create mode 100644 docs/.vitepress/theme/stargazers.data.ts diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts index 7a8b9e91f8..149e3c2a7e 100644 --- a/docs/.vitepress/config.ts +++ b/docs/.vitepress/config.ts @@ -2,6 +2,7 @@ import {fileURLToPath, URL} from "node:url"; import path from "node:path"; import {defineConfig} from "vitepress"; import plot from "./markdown-it-plot.js"; +import {getStargazersCount} from "./theme/stargazers.data.js"; // https://vitepress.dev/reference/site-config // prettier-ignore @@ -17,6 +18,9 @@ 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), } }, markdown: { @@ -43,12 +47,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 +146,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/GitHub.vue b/docs/.vitepress/theme/GitHub.vue new file mode 100644 index 0000000000..074a253593 --- /dev/null +++ b/docs/.vitepress/theme/GitHub.vue @@ -0,0 +1,60 @@ + + + + + diff --git a/docs/.vitepress/theme/MadeByObservable.vue b/docs/.vitepress/theme/MadeByObservable.vue new file mode 100644 index 0000000000..da56609582 --- /dev/null +++ b/docs/.vitepress/theme/MadeByObservable.vue @@ -0,0 +1,136 @@ + + + diff --git a/docs/.vitepress/theme/CustomLayout.vue b/docs/.vitepress/theme/ObservableLayout.vue similarity index 65% rename from docs/.vitepress/theme/CustomLayout.vue rename to docs/.vitepress/theme/ObservableLayout.vue index 17511b6035..85479bb2a4 100644 --- a/docs/.vitepress/theme/CustomLayout.vue +++ b/docs/.vitepress/theme/ObservableLayout.vue @@ -1,11 +1,11 @@ diff --git a/docs/.vitepress/theme/index.ts b/docs/.vitepress/theme/index.ts index fd9606bd99..dd79869b00 100644 --- a/docs/.vitepress/theme/index.ts +++ b/docs/.vitepress/theme/index.ts @@ -4,11 +4,12 @@ import {watch} from "vue"; import PlotRender from "../../components/PlotRender.js"; import CustomLayout from "./CustomLayout.vue"; import VersionBadge from "./VersionBadge.vue"; +import ObservableLayout from "./ObservableLayout.vue"; import "./custom.css"; export default { extends: DefaultTheme, - Layout: CustomLayout, + Layout: ObservableLayout, enhanceApp({app, router}) { Object.defineProperty(app.config.globalProperties, "$dark", {get: () => useData().isDark.value}); app.component("PlotRender", PlotRender); 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(); +} From e695e45ff7d5e7036e6d71f875eb5b623cbd789c Mon Sep 17 00:00:00 2001 From: CobusT Date: Fri, 27 Sep 2024 18:57:43 -0700 Subject: [PATCH 02/24] colors for Github arrows --- docs/.vitepress/theme/GitHub.vue | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/docs/.vitepress/theme/GitHub.vue b/docs/.vitepress/theme/GitHub.vue index 074a253593..e55047257b 100644 --- a/docs/.vitepress/theme/GitHub.vue +++ b/docs/.vitepress/theme/GitHub.vue @@ -52,9 +52,11 @@ a[target="_blank"]:hover span { a[target="_blank"]::after { content: "\2197"; + color: var(--vp-c-text-2); + font-weight: 400; } a[target="_blank"]:not(:hover, :focus)::after { - color: var(--vp-c-text-2); + color: var(--vp-c-text-3); } From 3ffcdb8e787b51ddabbfec1d6800d70099cb6509 Mon Sep 17 00:00:00 2001 From: CobusT Date: Sat, 28 Sep 2024 15:32:34 -0700 Subject: [PATCH 03/24] cleaned up GitHub links --- docs/.vitepress/theme/GitHub.vue | 62 ---------------------- docs/.vitepress/theme/ObservableLayout.vue | 4 +- 2 files changed, 2 insertions(+), 64 deletions(-) delete mode 100644 docs/.vitepress/theme/GitHub.vue diff --git a/docs/.vitepress/theme/GitHub.vue b/docs/.vitepress/theme/GitHub.vue deleted file mode 100644 index e55047257b..0000000000 --- a/docs/.vitepress/theme/GitHub.vue +++ /dev/null @@ -1,62 +0,0 @@ - - - - - diff --git a/docs/.vitepress/theme/ObservableLayout.vue b/docs/.vitepress/theme/ObservableLayout.vue index 85479bb2a4..89197ef527 100644 --- a/docs/.vitepress/theme/ObservableLayout.vue +++ b/docs/.vitepress/theme/ObservableLayout.vue @@ -3,7 +3,7 @@ import DefaultTheme from "vitepress/theme-without-fonts"; import ExamplesGrid from "./ExamplesGrid.vue"; import ObservablePromo from "./ObservablePromo.vue"; import MadeByObservable from "./MadeByObservable.vue"; -import GitHub from "./GitHub.vue"; +import VersionAndStars from "./VersionAndStars.vue"; const {Layout} = DefaultTheme; @@ -18,7 +18,7 @@ const {Layout} = DefaultTheme; From 5df5543f04068ed7c76b725837aba0c3e23deeb9 Mon Sep 17 00:00:00 2001 From: CobusT Date: Sat, 28 Sep 2024 15:47:25 -0700 Subject: [PATCH 04/24] search button rounded corners --- docs/.vitepress/theme/ObservableLayout.vue | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/docs/.vitepress/theme/ObservableLayout.vue b/docs/.vitepress/theme/ObservableLayout.vue index 89197ef527..9a2416c03b 100644 --- a/docs/.vitepress/theme/ObservableLayout.vue +++ b/docs/.vitepress/theme/ObservableLayout.vue @@ -46,4 +46,13 @@ const {Layout} = DefaultTheme; .VPNavBarHamburger { display: none !important; } + +/* rounded corners for search field */ +@media (min-width: 768px) { + .DocSearch-Button { + border-radius: 1000px; + padding-right: 1rem; + height: 2rem; + } +} From af9bb96bc74e0bec03e7c8047e6b86ada0d62be1 Mon Sep 17 00:00:00 2001 From: CobusT Date: Sat, 28 Sep 2024 15:47:43 -0700 Subject: [PATCH 05/24] renamed component --- docs/.vitepress/theme/VersionAndStars.vue | 52 +++++++++++++++++++++++ 1 file changed, 52 insertions(+) create mode 100644 docs/.vitepress/theme/VersionAndStars.vue diff --git a/docs/.vitepress/theme/VersionAndStars.vue b/docs/.vitepress/theme/VersionAndStars.vue new file mode 100644 index 0000000000..0bcd3d3ebe --- /dev/null +++ b/docs/.vitepress/theme/VersionAndStars.vue @@ -0,0 +1,52 @@ + + + + + From 5b9f475e13fbf7b7ff3651baff97eefa6ebcf5f3 Mon Sep 17 00:00:00 2001 From: CobusT Date: Tue, 1 Oct 2024 10:58:16 -0700 Subject: [PATCH 06/24] made clickable popover for touch devices --- docs/.vitepress/config.ts | 1 - docs/.vitepress/theme/MadeByObservable.vue | 20 +++++++++++++++++++- 2 files changed, 19 insertions(+), 2 deletions(-) diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts index 149e3c2a7e..18b8096d0a 100644 --- a/docs/.vitepress/config.ts +++ b/docs/.vitepress/config.ts @@ -2,7 +2,6 @@ import {fileURLToPath, URL} from "node:url"; import path from "node:path"; import {defineConfig} from "vitepress"; import plot from "./markdown-it-plot.js"; -import {getStargazersCount} from "./theme/stargazers.data.js"; // https://vitepress.dev/reference/site-config // prettier-ignore diff --git a/docs/.vitepress/theme/MadeByObservable.vue b/docs/.vitepress/theme/MadeByObservable.vue index da56609582..d3f64f5e0a 100644 --- a/docs/.vitepress/theme/MadeByObservable.vue +++ b/docs/.vitepress/theme/MadeByObservable.vue @@ -1,6 +1,6 @@ + + From 863475da515d3c705abcd465b0daf997ce0a6d10 Mon Sep 17 00:00:00 2001 From: CobusT Date: Wed, 2 Oct 2024 12:07:35 -0700 Subject: [PATCH 08/24] button rendering in javascript --- docs/.vitepress/theme/MadeByObservable.vue | 88 ++++++++++++++-------- 1 file changed, 58 insertions(+), 30 deletions(-) diff --git a/docs/.vitepress/theme/MadeByObservable.vue b/docs/.vitepress/theme/MadeByObservable.vue index bb74bbb9de..601a251b9c 100644 --- a/docs/.vitepress/theme/MadeByObservable.vue +++ b/docs/.vitepress/theme/MadeByObservable.vue @@ -1,6 +1,7 @@ + + From 668c18e636a8c90b0d9341cc75f0a72de2302887 Mon Sep 17 00:00:00 2001 From: CobusT Date: Wed, 2 Oct 2024 14:39:34 -0700 Subject: [PATCH 09/24] after ui review --- docs/.vitepress/theme/MadeByObservable.vue | 71 +++++++++++----------- docs/.vitepress/theme/VersionAndStars.vue | 36 +++++++++-- 2 files changed, 66 insertions(+), 41 deletions(-) diff --git a/docs/.vitepress/theme/MadeByObservable.vue b/docs/.vitepress/theme/MadeByObservable.vue index 601a251b9c..7cbaa906de 100644 --- a/docs/.vitepress/theme/MadeByObservable.vue +++ b/docs/.vitepress/theme/MadeByObservable.vue @@ -1,5 +1,5 @@ - diff --git a/docs/.vitepress/theme/VersionAndStars.vue b/docs/.vitepress/theme/VersionAndStars.vue index 378e54d498..7ac97360d9 100644 --- a/docs/.vitepress/theme/VersionAndStars.vue +++ b/docs/.vitepress/theme/VersionAndStars.vue @@ -9,9 +9,27 @@ const version = __APP_VERSION__; {{ version }} - + GitHub️ {{ formattedStarCount }} + + + + + From f6edb095a7dc4b0a44b32107ec98d646d2885540 Mon Sep 17 00:00:00 2001 From: CobusT Date: Wed, 2 Oct 2024 15:48:08 -0700 Subject: [PATCH 10/24] tweaks --- docs/.vitepress/theme/MadeByObservable.vue | 12 +++++++++--- docs/.vitepress/theme/ObservableLayout.vue | 2 +- docs/.vitepress/theme/VersionAndStars.vue | 5 +++-- 3 files changed, 13 insertions(+), 6 deletions(-) diff --git a/docs/.vitepress/theme/MadeByObservable.vue b/docs/.vitepress/theme/MadeByObservable.vue index 7cbaa906de..d4459e787f 100644 --- a/docs/.vitepress/theme/MadeByObservable.vue +++ b/docs/.vitepress/theme/MadeByObservable.vue @@ -41,9 +41,11 @@ function renderButton(open, isMobile) { buttonIcon.style.paddingRight = "0px"; } else { buttonText.style.display = "block"; + buttonText.style.paddingLeft = isMobile ? "4px" : "8px"; buttonText.innerHTML = isMobile ? "Observable" : "Made by Observable"; buttonIcon.innerHTML = iconDownCaret; - buttonIcon.style.paddingRight = "8px"; + buttonIcon.style.paddingLeft = isMobile ? "2px" : "4px"; + buttonIcon.style.paddingRight = isMobile ? "4px" : "8px"; } } @@ -136,7 +138,6 @@ function onClick() { justify-content: center; text-wrap: nowrap; overflow: hidden; - gap: 4px; } .made-by-observable > .button > div:first-child { @@ -219,6 +220,11 @@ function onClick() { line-height: 24px; } +.made-by-observable a:hover, +.made-by-observable a:hover h2 { + transition: color 0.25s; +} + /* Mobile */ @media screen and (max-width: 640px) { .made-by-observable .popup-content { @@ -227,6 +233,6 @@ function onClick() { } .made-by-observable .popup a.section { width: 75vw; -} + } } diff --git a/docs/.vitepress/theme/ObservableLayout.vue b/docs/.vitepress/theme/ObservableLayout.vue index a1a9e3bc4c..5e25cf95b9 100644 --- a/docs/.vitepress/theme/ObservableLayout.vue +++ b/docs/.vitepress/theme/ObservableLayout.vue @@ -17,7 +17,7 @@ const {Layout} = DefaultTheme;