mirror of
https://github.com/d3/d3.git
synced 2025-12-08 19:46:24 +00:00
adds Made by Observable button (#3932)
This commit is contained in:
CobusT
GitHub
parent
f138b40865
commit
009a2d1ffe
@ -6,13 +6,15 @@ import {defineConfig} from "vitepress";
|
||||
export default defineConfig({
|
||||
title: "D3 by Observable",
|
||||
description: "The JavaScript library for bespoke data visualization",
|
||||
appearance: "force-auto",
|
||||
cleanUrls: true,
|
||||
sitemap: {
|
||||
hostname: "https://d3js.org"
|
||||
},
|
||||
head: [
|
||||
["link", {rel: "apple-touch-icon", href: "/logo.png"}],
|
||||
["link", {rel: "icon", type: "image/png", href: "/logo.png"}]
|
||||
["link", {rel: "icon", type: "image/png", href: "/logo.png"}],
|
||||
["script", {async: "", defer: "", src: "https://static.observablehq.com/assets/components/observable-made-by.js"}],
|
||||
],
|
||||
markdown: {
|
||||
externalLinks: {
|
||||
@ -25,18 +27,22 @@ export default defineConfig({
|
||||
{find: "d3", replacement: path.resolve("./dist/d3.mjs")},
|
||||
{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-")
|
||||
}
|
||||
}
|
||||
},
|
||||
themeConfig: {
|
||||
// https://vitepress.dev/reference/default-theme-config
|
||||
logo: "/logo.svg",
|
||||
siteTitle: "",
|
||||
nav: [
|
||||
{text: "Home", link: "/"},
|
||||
{text: "Examples", link: "https://observablehq.com/@d3/gallery?utm_source=d3js-org&utm_medium=nav&utm_campaign=try-observable", rel: "external"},
|
||||
{text: "Community", link: "/community"},
|
||||
{text: "Plot", link: "https://observablehq.com/plot?utm_source=d3js-org&utm_medium=nav&utm_campaign=try-observable", rel: "external"}
|
||||
],
|
||||
siteTitle: "D3",
|
||||
sidebar: [
|
||||
{
|
||||
text: "Introduction",
|
||||
@ -265,14 +271,6 @@ export default defineConfig({
|
||||
search: {
|
||||
provider: "local"
|
||||
},
|
||||
socialLinks: [
|
||||
{icon: "github", link: "https://github.com/d3"},
|
||||
{icon: "twitter", link: "https://twitter.com/observablehq"},
|
||||
{icon: "mastodon", link: "https://vis.social/@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/d3/d3/blob/main/LICENSE'>ISC License</a>.",
|
||||
copyright: `Copyright 2010–${new Date().getUTCFullYear()} Mike Bostock`
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -10,19 +11,18 @@ const {Layout} = DefaultTheme;
|
||||
|
||||
<template>
|
||||
<Layout>
|
||||
<template #nav-bar-title-after>
|
||||
by
|
||||
<svg viewBox="0 0 25 28" width="24" height="24" aria-label="Observable" fill="currentColor" style="margin-left: 4px; margin-right: 4px;">
|
||||
<path d="M12.5 22.6667C11.3458 22.6667 10.3458 22.4153 9.5 21.9127C8.65721 21.412 7.98339 20.7027 7.55521 19.8654C7.09997 18.9942 6.76672 18.0729 6.56354 17.1239C6.34796 16.0947 6.24294 15.0483 6.25 14C6.25 13.1699 6.30417 12.3764 6.41354 11.6176C6.52188 10.8598 6.72292 10.0894 7.01563 9.30748C7.30833 8.52555 7.68542 7.84763 8.14479 7.27274C8.62304 6.68378 9.24141 6.20438 9.95208 5.87163C10.6979 5.51244 11.5458 5.33333 12.5 5.33333C13.6542 5.33333 14.6542 5.58467 15.5 6.08733C16.3428 6.588 17.0166 7.29733 17.4448 8.13459C17.8969 8.99644 18.2271 9.9103 18.4365 10.8761C18.6448 11.841 18.75 12.883 18.75 14C18.75 14.8301 18.6958 15.6236 18.5865 16.3824C18.4699 17.1702 18.2639 17.9446 17.9719 18.6925C17.6698 19.4744 17.2948 20.1524 16.8427 20.7273C16.3906 21.3021 15.7927 21.7692 15.0479 22.1284C14.3031 22.4876 13.4542 22.6667 12.5 22.6667ZM14.7063 16.2945C15.304 15.6944 15.6365 14.864 15.625 14C15.625 13.1073 15.326 12.3425 14.7292 11.7055C14.1313 11.0685 13.3885 10.75 12.5 10.75C11.6115 10.75 10.8688 11.0685 10.2708 11.7055C9.68532 12.3123 9.36198 13.1405 9.375 14C9.375 14.8927 9.67396 15.6575 10.2708 16.2945C10.8688 16.9315 11.6115 17.25 12.5 17.25C13.3885 17.25 14.124 16.9315 14.7063 16.2945ZM12.5 27C19.4031 27 25 21.1792 25 14C25 6.82075 19.4031 1 12.5 1C5.59687 1 0 6.82075 0 14C0 21.1792 5.59687 27 12.5 27Z" fill="currentColor"></path>
|
||||
</svg>
|
||||
Observable
|
||||
</template>
|
||||
<template #home-features-before>
|
||||
<ExamplesGrid />
|
||||
</template>
|
||||
<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>
|
||||
|
||||
@ -46,4 +46,17 @@ const {Layout} = DefaultTheme;
|
||||
background-color: rgba(37, 37, 41, 0.5);
|
||||
}
|
||||
|
||||
.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>
|
||||
|
||||
77
docs/.vitepress/theme/VersionAndStars.vue
Normal file
77
docs/.vitepress/theme/VersionAndStars.vue
Normal file
@ -0,0 +1,77 @@
|
||||
<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/d3/d3/releases">
|
||||
<span>{{ version }}</span>
|
||||
</a>
|
||||
<a
|
||||
target="_blank"
|
||||
data-decoration="★"
|
||||
:title="data.toLocaleString('en-US').concat(' GitHub stars')"
|
||||
href="https://github.com/d3/d3"
|
||||
>
|
||||
<span>GitHub️ {{ formattedStarCount }}</span>
|
||||
</a>
|
||||
<a
|
||||
class="mobile"
|
||||
target="_blank"
|
||||
:title="data.toLocaleString('en-US').concat(' GitHub stars')"
|
||||
href="https://github.com/d3/d3"
|
||||
>
|
||||
<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>
|
||||
28
docs/.vitepress/theme/stargazers.data.ts
Normal file
28
docs/.vitepress/theme/stargazers.data.ts
Normal file
@ -0,0 +1,28 @@
|
||||
const REPO = "d3/d3";
|
||||
|
||||
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();
|
||||
}
|
||||
@ -76,7 +76,7 @@
|
||||
"mocha": "^10.3.0",
|
||||
"rollup": "^3.29.4",
|
||||
"topojson-client": "^3.1.0",
|
||||
"vitepress": "^1.0.0-beta.2"
|
||||
"vitepress": "^1.4.0"
|
||||
},
|
||||
"scripts": {
|
||||
"test": "mocha 'test/**/*-test.js' && eslint src test",
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user