docs optimizations
This commit is contained in:
Pouya Saadeghi
parent
742c50a3a9
commit
0811fffc4f
|
|
@ -13,8 +13,8 @@
|
|||
// import ThemeChange from "$components/ThemeChange.svelte"
|
||||
// import LangChange from "$components/LangChange.svelte"
|
||||
// import Search from "$components/Search.svelte"
|
||||
import LogoContextMenu from "$components/LogoContextMenu.svelte"
|
||||
import ChangelogMenu from "$components/ChangelogMenu.svelte"
|
||||
// import LogoContextMenu from "$components/LogoContextMenu.svelte"
|
||||
// import ChangelogMenu from "$components/ChangelogMenu.svelte"
|
||||
|
||||
let contextMenuEl
|
||||
|
||||
|
|
@ -38,36 +38,40 @@
|
|||
</script>
|
||||
|
||||
<svelte:window bind:scrollY />
|
||||
|
||||
<div class="bg-base-200 hidden flex justify-center rounded-sm p-1">
|
||||
<a
|
||||
href="/store/"
|
||||
class="alert hover:bg-base-300 text-base-content/70 flex max-w-xl justify-center rounded-full p-2 text-center text-xs transition-colors duration-300 ease-out">
|
||||
<p class=" leading-relaxed [text-wrap:balance]">
|
||||
Use <code class="text-base-content/70 font-mono tracking-wide">BLACKFRIDAY</code>
|
||||
code to get 50% discount on daisyUI store
|
||||
<Countdown
|
||||
from={new Date("2023-11-30T00:00:00.000000Z").toLocaleString("en-GB", dateFormat)}
|
||||
dateFormat="DD/MM/YYYY, HH:mm:ss"
|
||||
let:remaining>
|
||||
{#if remaining.done === false}
|
||||
<span class="border-base-content/20 rounded-full border border-dashed px-2 py-1">
|
||||
<date
|
||||
datetime={new Date("2023-11-30T00:00:00.000000Z").toLocaleString("en-GB", dateFormat)}
|
||||
class="countdown font-mono text-xs">
|
||||
{remaining.days * 24 + remaining.hours}h
|
||||
<span style={`--value:${remaining.minutes}`}></span>
|
||||
m
|
||||
<span style={`--value:${remaining.seconds}`}></span>
|
||||
s
|
||||
</date>
|
||||
remaining
|
||||
</span>
|
||||
{/if}
|
||||
</Countdown>
|
||||
</p>
|
||||
</a>
|
||||
</div>
|
||||
{#if false}
|
||||
<div class="bg-base-200 flex justify-center rounded-sm p-1">
|
||||
<a
|
||||
href="/store/"
|
||||
class="alert hover:bg-base-300 text-base-content/70 flex max-w-xl justify-center rounded-full p-2 text-center text-xs transition-colors duration-300 ease-out">
|
||||
<p class=" leading-relaxed [text-wrap:balance]">
|
||||
Use <code class="text-base-content/70 font-mono tracking-wide">BLACKFRIDAY</code>
|
||||
code to get 50% discount on daisyUI store
|
||||
<Countdown
|
||||
from={new Date("2023-11-30T00:00:00.000000Z").toLocaleString("en-GB", dateFormat)}
|
||||
dateFormat="DD/MM/YYYY, HH:mm:ss"
|
||||
let:remaining>
|
||||
{#if remaining.done === false}
|
||||
<span class="border-base-content/20 rounded-full border border-dashed px-2 py-1">
|
||||
<date
|
||||
datetime={new Date("2023-11-30T00:00:00.000000Z").toLocaleString(
|
||||
"en-GB",
|
||||
dateFormat
|
||||
)}
|
||||
class="countdown font-mono text-xs">
|
||||
{remaining.days * 24 + remaining.hours}h
|
||||
<span style={`--value:${remaining.minutes}`}></span>
|
||||
m
|
||||
<span style={`--value:${remaining.seconds}`}></span>
|
||||
s
|
||||
</date>
|
||||
remaining
|
||||
</span>
|
||||
{/if}
|
||||
</Countdown>
|
||||
</p>
|
||||
</a>
|
||||
</div>
|
||||
{/if}
|
||||
<div
|
||||
class={`
|
||||
bg-base-100 text-base-content sticky top-0 z-30 flex h-16 w-full justify-center bg-opacity-90 backdrop-blur transition-shadow duration-100 [transform:translate3d(0,0,0)]
|
||||
|
|
@ -122,9 +126,13 @@
|
|||
|
||||
<span class="font-title text-base-content text-lg md:text-2xl">daisyUI</span>
|
||||
</a>
|
||||
<LogoContextMenu bind:this={contextMenuEl} />
|
||||
{#await import("./LogoContextMenu.svelte") then Module}
|
||||
<Module.default bind:this={contextMenuEl} />
|
||||
{/await}
|
||||
{#if showVersion}
|
||||
<ChangelogMenu />
|
||||
{#await import("./ChangelogMenu.svelte") then Module}
|
||||
<Module.default />
|
||||
{/await}
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
<script>
|
||||
import { page } from "$app/stores"
|
||||
// import Search from "$components/Search.svelte"
|
||||
import LogoContextMenu from "$components/LogoContextMenu.svelte"
|
||||
// import LogoContextMenu from "$components/LogoContextMenu.svelte"
|
||||
import SidebarMenuItem from "$components/SidebarMenuItem.svelte"
|
||||
import ChangelogMenu from "$components/ChangelogMenu.svelte"
|
||||
// import ChangelogMenu from "$components/ChangelogMenu.svelte"
|
||||
let contextMenuEl
|
||||
|
||||
export let closeDrawer
|
||||
|
|
@ -38,8 +38,13 @@
|
|||
|
||||
<div class="font-title inline-flex text-lg md:text-2xl">daisyUI</div>
|
||||
</a>
|
||||
<LogoContextMenu bind:this={contextMenuEl} />
|
||||
<ChangelogMenu />
|
||||
|
||||
{#await import("./LogoContextMenu.svelte") then Module}
|
||||
<Module.default bind:this={contextMenuEl} />
|
||||
{/await}
|
||||
{#await import("./ChangelogMenu.svelte") then Module}
|
||||
<Module.default />
|
||||
{/await}
|
||||
</div>
|
||||
|
||||
{#if innerWidth < 1024}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,119 @@
|
|||
<script>
|
||||
import { t } from "$lib/i18n"
|
||||
export let contributors
|
||||
export let backers
|
||||
</script>
|
||||
|
||||
<div class="w-full overflow-hidden px-2 py-40 lg:px-10">
|
||||
<div class="text-center">
|
||||
<div class="h-6" />
|
||||
<div>
|
||||
<img
|
||||
loading="lazy"
|
||||
width="80"
|
||||
height="80"
|
||||
alt="heart emoji"
|
||||
src="/images/emoji/heart-on-fire@80.webp"
|
||||
srcset={`/images/emoji/heart-on-fire.webp 2x`}
|
||||
class="pointer-events-none inline-block h-20 w-20 align-bottom" />
|
||||
</div>
|
||||
<div class="h-20" />
|
||||
<h2
|
||||
class="font-title relative z-[2] mx-auto text-[clamp(2rem,6vw,4.5rem)] font-black leading-none">
|
||||
{$t("Free and open-source")}
|
||||
<br />
|
||||
<span class="font-light">{$t("Built by the community")}</span>
|
||||
</h2>
|
||||
<div class="h-12" />
|
||||
<p class="font-title font-light md:text-2xl">
|
||||
<a
|
||||
href="https://github.com/saadeghi/daisyui/blob/master/.github/CONTRIBUTING.md"
|
||||
rel="noopener, noreferrer"
|
||||
target="_blank"
|
||||
class="link link-hover text-base-content/70">
|
||||
{$t("daisyUI welcomes contributions from developers around the world")}
|
||||
</a>
|
||||
</p>
|
||||
<div class="flex w-full justify-center">
|
||||
<div class="flex w-full max-w-5xl flex-wrap justify-center gap-3 p-10">
|
||||
{#each contributors as contributor}
|
||||
<div class="tooltip" data-tip={contributor.login}>
|
||||
<div class="avatar">
|
||||
<div class="mask mask-squircle w-8">
|
||||
<img
|
||||
loading="lazy"
|
||||
src={`${contributor.avatar_url}&s=32`}
|
||||
srcset={`${contributor.avatar_url}&s=64 2x, ${contributor.avatar_url}&s=96 3x`}
|
||||
alt={contributor.login}
|
||||
width="32"
|
||||
height="32"
|
||||
class="pointer-events-none transition-all duration-500 ease-in-out" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="h-6" />
|
||||
<div class="text-center">
|
||||
<p class="font-title font-light md:text-2xl">
|
||||
<a
|
||||
href="https://opencollective.com/daisyui"
|
||||
rel="noopener, noreferrer"
|
||||
target="_blank"
|
||||
class="link link-hover text-base-content/70">
|
||||
{$t("Sponsors and backers")}
|
||||
</a>
|
||||
</p>
|
||||
<div class="flex w-full justify-center">
|
||||
<div class="flex w-full max-w-5xl flex-wrap justify-center gap-3 p-10">
|
||||
{#each backers as backer}
|
||||
<div class="tooltip" data-tip={backer.name}>
|
||||
{#if backer.image}
|
||||
<div class="avatar">
|
||||
<div class="mask mask-squircle w-8">
|
||||
<img
|
||||
loading="lazy"
|
||||
src={backer.image.replace("?default=404", "?default=identicon")}
|
||||
alt={backer.name}
|
||||
width="32"
|
||||
height="32"
|
||||
class="pointer-events-none transition-all duration-500 ease-in-out" />
|
||||
</div>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="avatar placeholder">
|
||||
<div
|
||||
class="mask mask-squircle w-8 text-black"
|
||||
style={`background-color:hsl(${Math.floor(Math.random() * 360)} 10% 80%)`}>
|
||||
<span class="select-none font-mono text-xs uppercase">
|
||||
{backer.name
|
||||
.split(" ")
|
||||
.map((n, i, arr) => (i === 0 || i === arr.length - 1 ? n[0] : ""))
|
||||
.join("")}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
<a
|
||||
href="https://opencollective.com/daisyui"
|
||||
rel="noopener, noreferrer"
|
||||
target="_blank"
|
||||
class="btn">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
class="h-4 w-4 text-teal-700">
|
||||
<path
|
||||
d="M9.653 16.915l-.005-.003-.019-.01a20.759 20.759 0 01-1.162-.682 22.045 22.045 0 01-2.582-1.9C4.045 12.733 2 10.352 2 7.5a4.5 4.5 0 018-2.828A4.5 4.5 0 0118 7.5c0 2.852-2.044 5.233-3.885 6.82a22.049 22.049 0 01-3.744 2.582l-.019.01-.005.003h-.002a.739.739 0 01-.69.001l-.002-.001z" />
|
||||
</svg>
|
||||
{$t("Become a sponsor")}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
<script>
|
||||
export let tweets
|
||||
</script>
|
||||
|
||||
<div>
|
||||
<div class="h-32" />
|
||||
<div
|
||||
class="mx-auto grid max-w-5xl grid-cols-1 gap-6 px-10 md:grid-cols-2 lg:grid-cols-3 lg:[&>*:nth-child(3n-1)]:translate-y-16">
|
||||
{#each tweets as tweet, index}
|
||||
<div class="card border-base-content/5 card-compact border text-start">
|
||||
<div class="card-body">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="avatar">
|
||||
<a
|
||||
href={`https://twitter.com/${tweet.username}/status/${tweet.id}`}
|
||||
target="_blank"
|
||||
rel="noopener, noreferrer"
|
||||
class="w-12">
|
||||
<img
|
||||
loading="lazy"
|
||||
src={`/twitter-profile-pics/${tweet.username}-72.webp`}
|
||||
alt={tweet.name}
|
||||
width="48"
|
||||
height="48"
|
||||
class="pointer-events-none rounded-full" />
|
||||
</a>
|
||||
</div>
|
||||
<div class="flex flex-col items-start text-xs">
|
||||
<div class="text-base-content font-bold">{tweet.name}</div>
|
||||
<div class="text-base-content/70">{tweet.bio}</div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-base-content">{tweet.content}</p>
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1,19 +1,19 @@
|
|||
<script>
|
||||
import { onMount } from "svelte"
|
||||
// import { onMount } from "svelte"
|
||||
import Countup from "svelte-countup"
|
||||
import SEO from "$components/SEO.svelte"
|
||||
import Ads from "$components/Ads.svelte"
|
||||
import HomepageInstall from "$components/homepage/Install.svelte"
|
||||
// import HomepageInstall from "$components/homepage/Install.svelte"
|
||||
import Footer from "$components/Footer.svelte"
|
||||
import { t } from "$lib/i18n"
|
||||
|
||||
// import ComponentsPreview from "$components/homepage/ComponentsPreview.svelte"
|
||||
let ComponentsPreview
|
||||
// let ComponentsPreview
|
||||
// const sleep = (ms) => new Promise((f) => setTimeout(f, ms))
|
||||
onMount(async () => {
|
||||
// await sleep(1000)
|
||||
ComponentsPreview = (await import("../../components/homepage/ComponentsPreview.svelte")).default
|
||||
})
|
||||
// onMount(async () => {
|
||||
// await sleep(1000)
|
||||
// ComponentsPreview = (await import("../../components/homepage/ComponentsPreview.svelte")).default
|
||||
// })
|
||||
|
||||
export let data
|
||||
|
||||
|
|
@ -1397,11 +1397,9 @@
|
|||
<div
|
||||
class="border-base-200 flex w-full items-stretch justify-center gap-6 rounded-2xl border p-6 xl:h-[40rem] xl:justify-normal"
|
||||
style={`--tw-border-opacity:${animateValue(section["themes"], [10, 15], [0, 1])}`}>
|
||||
<svelte:component
|
||||
this={ComponentsPreview}
|
||||
{animateValue}
|
||||
section={section["themes"]}
|
||||
{index} />
|
||||
{#await import("../../components/homepage/ComponentsPreview.svelte") then Module}
|
||||
<Module.default {animateValue} section={section["themes"]} {index} />
|
||||
{/await}
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
|
|
@ -1710,154 +1708,13 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="h-32" />
|
||||
<div
|
||||
class="mx-auto grid max-w-5xl grid-cols-1 gap-6 px-10 md:grid-cols-2 lg:grid-cols-3 lg:[&>*:nth-child(3n-1)]:translate-y-16">
|
||||
{#each data.tweets as tweet, index}
|
||||
<div class="card border-base-content/5 card-compact border text-start">
|
||||
<div class="card-body">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="avatar">
|
||||
<a
|
||||
href={`https://twitter.com/${tweet.username}/status/${tweet.id}`}
|
||||
target="_blank"
|
||||
rel="noopener, noreferrer"
|
||||
class="w-12">
|
||||
<img
|
||||
loading="lazy"
|
||||
src={`/twitter-profile-pics/${tweet.username}-72.webp`}
|
||||
alt={tweet.name}
|
||||
width="48"
|
||||
height="48"
|
||||
class="pointer-events-none rounded-full" />
|
||||
</a>
|
||||
</div>
|
||||
<div class="flex flex-col items-start text-xs">
|
||||
<div class="text-base-content font-bold">{tweet.name}</div>
|
||||
<div class="text-base-content/70">{tweet.bio}</div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-base-content">{tweet.content}</p>
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
{#await import("../../components/homepage/Tweets.svelte") then Module}
|
||||
<Module.default tweets={data.tweets} />
|
||||
{/await}
|
||||
|
||||
<div class="w-full overflow-hidden px-2 py-40 lg:px-10">
|
||||
<div class="text-center">
|
||||
<div class="h-6" />
|
||||
<div>
|
||||
<img
|
||||
loading="lazy"
|
||||
width="80"
|
||||
height="80"
|
||||
alt="heart emoji"
|
||||
src="/images/emoji/heart-on-fire@80.webp"
|
||||
srcset={`/images/emoji/heart-on-fire.webp 2x`}
|
||||
class="pointer-events-none inline-block h-20 w-20 align-bottom" />
|
||||
</div>
|
||||
<div class="h-20" />
|
||||
<h2
|
||||
class="font-title relative z-[2] mx-auto text-[clamp(2rem,6vw,4.5rem)] font-black leading-none">
|
||||
{$t("Free and open-source")}
|
||||
<br />
|
||||
<span class="font-light">{$t("Built by the community")}</span>
|
||||
</h2>
|
||||
<div class="h-12" />
|
||||
<p class="font-title font-light md:text-2xl">
|
||||
<a
|
||||
href="https://github.com/saadeghi/daisyui/blob/master/.github/CONTRIBUTING.md"
|
||||
rel="noopener, noreferrer"
|
||||
target="_blank"
|
||||
class="link link-hover text-base-content/70">
|
||||
{$t("daisyUI welcomes contributions from developers around the world")}
|
||||
</a>
|
||||
</p>
|
||||
<div class="flex w-full justify-center">
|
||||
<div class="flex w-full max-w-5xl flex-wrap justify-center gap-3 p-10">
|
||||
{#each data.contributors as contributor}
|
||||
<div class="tooltip" data-tip={contributor.login}>
|
||||
<div class="avatar">
|
||||
<div class="mask mask-squircle w-8">
|
||||
<img
|
||||
loading="lazy"
|
||||
src={`${contributor.avatar_url}&s=32`}
|
||||
srcset={`${contributor.avatar_url}&s=64 2x, ${contributor.avatar_url}&s=96 3x`}
|
||||
alt={contributor.login}
|
||||
width="32"
|
||||
height="32"
|
||||
class="pointer-events-none transition-all duration-500 ease-in-out" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="h-6" />
|
||||
<div class="text-center">
|
||||
<p class="font-title font-light md:text-2xl">
|
||||
<a
|
||||
href="https://opencollective.com/daisyui"
|
||||
rel="noopener, noreferrer"
|
||||
target="_blank"
|
||||
class="link link-hover text-base-content/70">
|
||||
{$t("Sponsors and backers")}
|
||||
</a>
|
||||
</p>
|
||||
<div class="flex w-full justify-center">
|
||||
<div class="flex w-full max-w-5xl flex-wrap justify-center gap-3 p-10">
|
||||
{#each data.backers as backer}
|
||||
<div class="tooltip" data-tip={backer.name}>
|
||||
{#if backer.image}
|
||||
<div class="avatar">
|
||||
<div class="mask mask-squircle w-8">
|
||||
<img
|
||||
loading="lazy"
|
||||
src={backer.image.replace("?default=404", "?default=identicon")}
|
||||
alt={backer.name}
|
||||
width="32"
|
||||
height="32"
|
||||
class="pointer-events-none transition-all duration-500 ease-in-out" />
|
||||
</div>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="avatar placeholder">
|
||||
<div
|
||||
class="mask mask-squircle w-8 text-black"
|
||||
style={`background-color:hsl(${Math.floor(Math.random() * 360)} 10% 80%)`}>
|
||||
<span class="select-none font-mono text-xs uppercase">
|
||||
{backer.name
|
||||
.split(" ")
|
||||
.map((n, i, arr) => (i === 0 || i === arr.length - 1 ? n[0] : ""))
|
||||
.join("")}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
<a
|
||||
href="https://opencollective.com/daisyui"
|
||||
rel="noopener, noreferrer"
|
||||
target="_blank"
|
||||
class="btn">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
class="h-4 w-4 text-teal-700">
|
||||
<path
|
||||
d="M9.653 16.915l-.005-.003-.019-.01a20.759 20.759 0 01-1.162-.682 22.045 22.045 0 01-2.582-1.9C4.045 12.733 2 10.352 2 7.5a4.5 4.5 0 018-2.828A4.5 4.5 0 0118 7.5c0 2.852-2.044 5.233-3.885 6.82a22.049 22.049 0 01-3.744 2.582l-.019.01-.005.003h-.002a.739.739 0 01-.69.001l-.002-.001z" />
|
||||
</svg>
|
||||
{$t("Become a sponsor")}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
{#await import("../../components/homepage/Opensource.svelte") then Module}
|
||||
<Module.default contributors={data.contributors} backers={data.backers} />
|
||||
{/await}
|
||||
|
||||
<div class="min-h-[150vh] py-20" bind:this={section["try"]}>
|
||||
<div class="sticky top-0 w-full px-2 pt-40 lg:px-10">
|
||||
|
|
@ -1948,5 +1805,7 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<HomepageInstall />
|
||||
{#await import("../../components/homepage/Install.svelte") then Module}
|
||||
<Module.default />
|
||||
{/await}
|
||||
<Footer />
|
||||
|
|
|
|||
Loading…
Reference in New Issue