From 2a46eeb81aa407d8c32cacc73f2f8d52ceb30680 Mon Sep 17 00:00:00 2001 From: Pouya Saadeghi Date: Wed, 11 Oct 2023 05:14:04 +0300 Subject: [PATCH] docs: improve style asset performance --- src/docs/src/components/Ads.svelte | 85 --------- src/docs/src/components/Search.svelte | 58 ------ .../src/components/StyleDevelopment.svelte | 1 + .../src/components/StyleProduction.svelte | 1 + src/docs/src/global.css | 175 ++++++++++++++++++ src/docs/src/routes/(docs)/+layout.svelte | 40 +--- .../routes/(docs)/docs/changelog/+page.svelte | 9 - src/docs/src/routes/blog/+layout.svelte | 12 +- src/docs/vite.config.js | 2 +- 9 files changed, 198 insertions(+), 185 deletions(-) create mode 100644 src/docs/src/global.css diff --git a/src/docs/src/components/Ads.svelte b/src/docs/src/components/Ads.svelte index 0985fcec6f9..0315ffdab9c 100644 --- a/src/docs/src/components/Ads.svelte +++ b/src/docs/src/components/Ads.svelte @@ -113,88 +113,3 @@ {/if} - - diff --git a/src/docs/src/components/Search.svelte b/src/docs/src/components/Search.svelte index f00d807d5a5..089910ca817 100644 --- a/src/docs/src/components/Search.svelte +++ b/src/docs/src/components/Search.svelte @@ -87,61 +87,3 @@ {/if} - - diff --git a/src/docs/src/components/StyleDevelopment.svelte b/src/docs/src/components/StyleDevelopment.svelte index d1951cb9b72..65bc2b01923 100644 --- a/src/docs/src/components/StyleDevelopment.svelte +++ b/src/docs/src/components/StyleDevelopment.svelte @@ -9,4 +9,5 @@ const utilitiesUnstyled = import.meta.glob("../../../utilities/unstyled/*.css", { eager: true }) const utilitiesStyled = import.meta.glob("../../../utilities/styled/*.css", { eager: true }) import "tailwindcss/utilities.css" + import "../global.css" diff --git a/src/docs/src/components/StyleProduction.svelte b/src/docs/src/components/StyleProduction.svelte index a2a8d874cfc..60369d1d73f 100644 --- a/src/docs/src/components/StyleProduction.svelte +++ b/src/docs/src/components/StyleProduction.svelte @@ -1,3 +1,4 @@ diff --git a/src/docs/src/global.css b/src/docs/src/global.css new file mode 100644 index 00000000000..9e1befa3bc1 --- /dev/null +++ b/src/docs/src/global.css @@ -0,0 +1,175 @@ +/* carbon */ +#carbonads * { + margin: initial; + padding: initial; +} +#carbonads { + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, + "Helvetica Neue", Helvetica, Arial, sans-serif; +} +#carbonads { + display: flex; + max-width: 350px; + color: hsl(var(--bc)); + background-color: hsl(var(--b2)); + z-index: 100; + border-radius: 4px; + overflow: hidden; +} +#carbonads a { + color: inherit; + text-decoration: none; +} +#carbonads a:hover { + color: inherit; +} +#carbonads span { + position: relative; + display: block; + overflow: hidden; +} +#carbonads .carbon-wrap { + display: flex; +} +#carbonads .carbon-img { + display: block; + margin: 0; + line-height: 1; +} +#carbonads .carbon-img img { + display: block; +} +#carbonads .carbon-text { + font-size: 12px; + padding: 10px; + margin-bottom: 16px; + line-height: 1.3; + text-align: left; +} +#carbonads .carbon-poweredby { + display: block; + padding: 6px 8px; + background: hsl(var(--b3)); + text-align: center; + text-transform: uppercase; + letter-spacing: 0.5px; + font-weight: 600; + font-size: 8px; + line-height: 1; + border-top-left-radius: 3px; + position: absolute; + bottom: 0; + right: 0; +} +@media only screen and (min-width: 1280px) { + .carbon-text { + font-size: 12px; + padding: 8px 10px 4px 10px; + } + .carbonads-responsive #carbonads { + max-width: 130px; + } + .carbonads-responsive #carbonads .carbon-wrap { + flex-direction: column; + } + .carbonads-responsive #carbonads .carbon-poweredby { + position: absolute; + right: 0; + bottom: 0; + text-align: center; + border-radius: 0; + border-top-left-radius: 3px; + } +} + +/* search */ +.searchbox.searchbox [data-svelte-typeahead][data-svelte-typeahead] { + background-color: transparent; + width: 100%; + max-width: 100%; +} +[data-svelte-search][data-svelte-search] label { + display: none; +} +[data-svelte-search][data-svelte-search] input { + background-color: transparent; + color: inherit; + border: 2px solid transparent; + border-radius: var(--rounded-btn); + padding-left: 2.5em; +} +[data-svelte-search][data-svelte-search] input::placeholder { + color: inherit; +} +[data-svelte-search][data-svelte-search] input:focus { + outline: none; + outline-offset: 0; + border: 2px solid hsl(var(--bc) / 0.2); + background-color: hsl(var(--b1)); + color: hsl(var(--bc)); +} +[data-svelte-typeahead][data-svelte-typeahead].dropdown[aria-expanded="true"] + .svelte-typeahead-list { + transform: translateY(0.5em); + background: hsl(var(--b1) / 0.99); + border: 0 solid hsl(var(--bc) / 0.2); + border-radius: var(--rounded-box); + overflow: hidden; + padding: 0.5rem; + backdrop-filter: blur(1rem); + margin-top: 0.5rem; + box-shadow: + rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, + rgba(0, 0, 0, 0.3) 0px 8px 16px -8px; +} +[data-svelte-typeahead][data-svelte-typeahead] .svelte-typeahead-list .selected, +[data-svelte-typeahead][data-svelte-typeahead] .svelte-typeahead-list .selected:hover { + background: hsl(var(--n)); + color: hsl(var(--nc)); +} +[data-svelte-typeahead][data-svelte-typeahead] .svelte-typeahead-list li { + color: hsl(var(--bc)); + border-radius: var(--rounded-btn); +} +[data-svelte-typeahead][data-svelte-typeahead] .svelte-typeahead-list li:hover { + background: hsl(var(--b2)); + color: hsl(var(--bc)); +} +[data-svelte-typeahead][data-svelte-typeahead] .svelte-typeahead-list li:not(:last-of-type) { + border-bottom: none; +} + +/* prose */ +.prose code[class*="language-"], +.code-wrapper code[class*="language-"], +code[class*="language-"], +pre[class*="language-"] { + background: unset; +} +.prose pre[class*="language-"] { + max-width: clamp(20rem, calc(100vw - 4rem), 80ch); + background-color: hsl(var(--n)); + color: hsl(var(--nc)); + ::selection { + background-color: hsl(var(--nc)); + color: hsl(var(--n)); + } +} +@media (min-width: 1024px) { + .prose pre[class*="language-"] { + max-width: clamp(20rem, calc(100vw - 20rem - 4rem), 80ch); + } +} +@media (min-width: 1280px) { + .prose pre[class*="language-"] { + max-width: clamp(20rem, calc(100vw - 20rem - 4rem - 8rem), 80ch); + } +} + +/* changelog */ +.changelog-body h1#changelog + p { + display: none; +} +.changelog-body img { + @apply rounded-box border-base-content/10 border; +} diff --git a/src/docs/src/routes/(docs)/+layout.svelte b/src/docs/src/routes/(docs)/+layout.svelte index 65f67a506ae..8bf4cda2a6b 100644 --- a/src/docs/src/routes/(docs)/+layout.svelte +++ b/src/docs/src/routes/(docs)/+layout.svelte @@ -60,9 +60,17 @@ - - + + @@ -142,31 +150,3 @@ {/if} - - diff --git a/src/docs/src/routes/(docs)/docs/changelog/+page.svelte b/src/docs/src/routes/(docs)/docs/changelog/+page.svelte index 40d1e689a82..7bbf6d735ae 100644 --- a/src/docs/src/routes/(docs)/docs/changelog/+page.svelte +++ b/src/docs/src/routes/(docs)/docs/changelog/+page.svelte @@ -5,12 +5,3 @@
- - diff --git a/src/docs/src/routes/blog/+layout.svelte b/src/docs/src/routes/blog/+layout.svelte index cb165fdc993..6df651d84c7 100644 --- a/src/docs/src/routes/blog/+layout.svelte +++ b/src/docs/src/routes/blog/+layout.svelte @@ -45,9 +45,17 @@ type="application/rss+xml" title="daisyUI Blog" href="https://daisyui.com/blog/rss.xml" /> - - + + diff --git a/src/docs/vite.config.js b/src/docs/vite.config.js index 4fb47dc2a5c..179028c5531 100644 --- a/src/docs/vite.config.js +++ b/src/docs/vite.config.js @@ -3,7 +3,7 @@ import { defineConfig, splitVendorChunkPlugin } from "vite" import { sveltekit } from "@sveltejs/kit/vite" export default defineConfig({ - plugins: [splitVendorChunkPlugin(), sveltekit()], + plugins: [sveltekit(), splitVendorChunkPlugin()], resolve: { alias: { "@src": path.resolve("/src"),