From 067ce7e0634e0919f6888eefba83ff65325f5351 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Joaqu=C3=ADn=20S=C3=A1nchez?= Date: Thu, 2 Nov 2023 14:58:52 +0100 Subject: [PATCH] docs: fix VP rc24 styles (#4416) --- docs/.vitepress/config.ts | 4 +- docs/.vitepress/scripts/pwa.ts | 7 +++- docs/.vitepress/style/main.css | 76 ++++++++++++++++++++++++++++++++++ docs/.vitepress/style/vars.css | 63 ++++++++++++++-------------- docs/index.md | 4 ++ docs/package.json | 1 + netlify.toml | 5 --- pnpm-lock.yaml | 3 ++ 8 files changed, 122 insertions(+), 41 deletions(-) diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts index 6367cd20b..e57a1424d 100644 --- a/docs/.vitepress/config.ts +++ b/docs/.vitepress/config.ts @@ -54,8 +54,8 @@ export default withPwa(defineConfig({ lastUpdated: true, markdown: { theme: { - light: 'vitesse-light', - dark: 'vitesse-dark', + light: 'github-light', + dark: 'github-dark', }, }, themeConfig: { diff --git a/docs/.vitepress/scripts/pwa.ts b/docs/.vitepress/scripts/pwa.ts index afd49f99f..fdca7e50d 100644 --- a/docs/.vitepress/scripts/pwa.ts +++ b/docs/.vitepress/scripts/pwa.ts @@ -65,7 +65,9 @@ export const pwa: PwaOptions = { }, workbox: { navigateFallbackDenylist: [/^\/new$/], - globPatterns: ['**/*.{css,js,html,png,svg,ico,txt,woff2}'], + // warning: sponsors/antfu.svg is 2.51 MB, and won't be precached + maximumFileSizeToCacheInBytes: 3 * 1024 * 1024, // <== 3MB + globPatterns: ['**/*.{css,js,html,png,svg,ico,txt,woff2,json}'], runtimeCaching: [ { urlPattern: pwaFontsRegex, @@ -111,4 +113,7 @@ export const pwa: PwaOptions = { }, ], }, + experimental: { + includeAllowlist: true, + }, } diff --git a/docs/.vitepress/style/main.css b/docs/.vitepress/style/main.css index 1c603ea7e..7b57691c6 100644 --- a/docs/.vitepress/style/main.css +++ b/docs/.vitepress/style/main.css @@ -8,10 +8,86 @@ html:not(.dark) [img-dark] { /* Overrides */ +.sp .sp-link.link:hover, +.sp .sp-link.link:focus { + background-color: var(--vitest-c-sponsor-hover) !important; +} + +/* outline styles for buttons and VPButton anchors */ +button:focus, +button:focus-visible, +.DocSearch-Button:focus, +.DocSearch-Button:focus-visible, +a:focus-visible, +a:focus { + border-radius: 2px; + outline: 2px solid var(--vp-c-text-1); +} + +a:focus:not(:focus-visible), +button:focus:not(:focus-visible) { + outline: none !important; +} + +/* custom block styles */ +html:not(.dark) .custom-block.tip code { + color: var(--vitest-custom-block-tip-code-text) !important; +} +html:not(.dark) .custom-block.info code { + color: var(--vitest-custom-block-info-code-text) !important; +} +.custom-block.tip a:hover, +.vp-doc .custom-block.tip a:hover > code { + color: var(--vp-c-brand-1) !important; + opacity: 1; +} +.custom-block.info a:hover, +.vp-doc .custom-block.info a:hover > code { + color: var(--vp-c-brand-1) !important; + opacity: 1; +} +html:not(.dark) .custom-block.info a:hover, +html:not(.dark) .vp-doc .custom-block.info a:hover > code { + color: var(--vitest-custom-block-info-code-text) !important; + opacity: 1; +} +.custom-block.warning a:hover, +.vp-doc .custom-block.warning a:hover > code { + color: var(--vp-c-warning-1) !important; + opacity: 1; +} +.custom-block.danger a:hover, +.vp-doc .custom-block.danger a:hover > code { + color: var(--vp-c-danger-1) !important; + opacity: 1; +} + +/* search # styles */ +:not(.dark) .title-icon { + opacity: 1 !important; +} +.dark .title-icon { + opacity: 0.67 !important; +} + .VPSocialLink { transform: scale(0.9); } +.vp-doc a { + text-decoration-style: dotted; +} +.custom-block a:focus, +.custom-block a:active, +.custom-block a:hover, +.custom-block a:active, +.vp-doc a:focus, +.vp-doc a:active, +.vp-doc a:hover, +.vp-doc a:active { + text-decoration: underline; +} + .vp-doc th, .vp-doc td { padding: 6px 10px; border: 1px solid #8882; diff --git a/docs/.vitepress/style/vars.css b/docs/.vitepress/style/vars.css index eca8f6b73..5814c2ca3 100644 --- a/docs/.vitepress/style/vars.css +++ b/docs/.vitepress/style/vars.css @@ -3,47 +3,44 @@ * -------------------------------------------------------------------------- */ :root { - --vp-c-accent: #dab40b; - --vp-c-brand: #6da13f; - --vp-c-brand-1: var(--vp-c-brand-dark); - --vp-c-brand-2: var(--vp-c-brand-darker); - --vp-c-brand-light: #7ec242; - --vp-c-brand-lighter: #93d31c; - --vp-c-brand-dark: #668d11; - --vp-c-brand-darker: #52730d; - --vp-c-text-code: #5d6f5d; - --vp-code-block-bg: rgba(125,125,125,0.04); - --vp-c-text-light-2: rgba(56 56 56 / 70%); - /* fix contrast: lang name on gray code block */ - --vp-c-text-dark-3: rgba(180, 180, 180, 0.7); - --vp-code-copy-code-bg: rgba(125,125,125,0.1); - --vp-code-copy-code-hover-bg: rgba(125,125,125,0.2); - --vp-c-disabled-bg: rgba(125,125,125,0.2); + --vp-c-brand-1: #52730d; + --vp-c-brand-2: #57791b; + --vp-c-brand-3: #506e10; + --vp-c-sponsor: #ca2971; + --vitest-c-sponsor-hover: #c13071; } .dark { - --vp-code-block-bg: rgba(0,0,0,0.2); - --vp-c-text-code: #c0cec0; - /* fix contrast on gray cards: check the same above (this is the default) */ - --vp-c-text-dark-2: rgba(235, 235, 235, 0.60); - /* fix lang name: check the same above (this is the default) */ - --vp-c-text-dark-3: rgba(235, 235, 235, 0.38); + --vp-c-brand-1: #add467; + --vp-c-brand-2: #a7cc66; + --vp-c-brand-3: #acd268; + --vp-c-sponsor: #ee4e95; + --vitest-c-sponsor-hover: #e51370; } + /** - * Component: Button + * Component: Custom Block * -------------------------------------------------------------------------- */ - :root { - --vp-button-brand-border: var(--vp-c-brand-light); - --vp-button-brand-text: var(--vp-c-text-dark-1); - --vp-button-brand-bg: var(--vp-c-brand); - --vp-button-brand-hover-border: var(--vp-c-brand-light); - --vp-button-brand-hover-text: var(--vp-c-text-dark-1); - --vp-button-brand-hover-bg: var(--vp-c-brand-light); - --vp-button-brand-active-border: var(--vp-c-brand-light); - --vp-button-brand-active-text: var(--vp-c-text-dark-1); - --vp-button-brand-active-bg: var(--vp-button-brand-bg); + --vp-custom-block-tip-code-bg: var(--vp-c-brand-soft); + --vp-custom-block-danger-code-bg: #a79fa029; + --vitest-custom-block-tip-code-text: #4a680c; + --vitest-custom-block-info-code-text: #394f0c +} + +.dark { + --vp-custom-block-tip-code-bg: var(--vp-c-brand-soft); + --vp-custom-block-danger-code-bg: #6c6a6a2b; +} + +/** + * Component: Button + * -------------------------------------------------------------------------- */ +.dark { + --vp-button-brand-text: #243600; + --vp-button-brand-active-text: #243600; + --vp-button-brand-hover-text: #243600; } /** diff --git a/docs/index.md b/docs/index.md index 8bfbc3825..14bed543a 100644 --- a/docs/index.md +++ b/docs/index.md @@ -28,11 +28,15 @@ hero: features: - title: Vite Powered + icon: details: Reuse Vite's config and plugins - consistent across your app and tests. But it's not required to use Vitest! - title: Jest Compatible + icon: details: Expect, snapshot, coverage, and more - migrating from Jest is straightforward. - title: Smart & instant watch mode + icon: ⚡ details: Only rerun the related changes, just like HMR for tests! - title: ESM, TypeScript, JSX + icon: details: Out-of-box ESM, TypeScript and JSX support powered by esbuild. --- diff --git a/docs/package.json b/docs/package.json index 906a85b1b..5278f075d 100644 --- a/docs/package.json +++ b/docs/package.json @@ -18,6 +18,7 @@ }, "devDependencies": { "@iconify-json/carbon": "^1.1.21", + "@iconify-json/logos": "^1.1.37", "@unocss/reset": "^0.53.4", "@vite-pwa/assets-generator": "^0.0.10", "@vite-pwa/vitepress": "^0.2.3", diff --git a/netlify.toml b/netlify.toml index d4a8d2889..4e1a606e9 100755 --- a/netlify.toml +++ b/netlify.toml @@ -13,11 +13,6 @@ to = "https://stackblitz.com/fork/github/vitest-dev/vitest/tree/main/examples/basic?initialPath=__vitest__/" status = 302 -[[redirects]] - from = "/*" - to = "/index.html" - status = 200 - [[headers]] for = "/manifest.webmanifest" [headers.values] diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index ed7acbcae..c9d7d39e8 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -126,6 +126,9 @@ importers: '@iconify-json/carbon': specifier: ^1.1.21 version: 1.1.21 + '@iconify-json/logos': + specifier: ^1.1.37 + version: 1.1.37 '@unocss/reset': specifier: ^0.53.4 version: 0.53.4 -- 2.51.2