zoriya/v10
1
0
Fork 0
mirror of https://github.com/zoriya/v10.git synced 2026-08-16 02:45:09 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(website): init dark mode

Browse Source
This commit is contained in:
Darius Cepulis
2025-10-22 10:32:35 -07:00
parent 99afc51e94
commit 4502fe43ad
31 changed files with 280 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files
website/src/pages/blog/[...page].astro
+1 -1
View File
@@ -48,7 +48,7 @@ const jsonLdSchema = createBlogCollectionSchema({
<JsonLd slot="head" schema={jsonLdSchema} />
<header class="mb-10 md:mb-20 w-full max-w-3xl mx-auto">
<h1 class="text-h4 md:text-h2 mb-2">Video.js Blog</h1>
<p class="text-md font-medium md:text-h5 text-dark-40">
<p class="text-md font-medium md:text-h5 text-dark-40 dark:text-light-40">
{page.data.length === 0 ? 'Coming soon' : 'Articles, announcements, news, updates, and more'}
</p>
</header>
website/src/pages/blog/[...slug].astro
+6 -3
View File
@@ -39,14 +39,17 @@ const jsonLdSchema = createBlogPostingSchema({
<Blog title={[post.data.title, 'Blog']} description={post.data.description}>
<JsonLd slot="head" schema={jsonLdSchema} />
<article class="@container">
<header class="border-b border-light-40 max-w-3xl mx-auto pb-10 mb-10">
<time datetime={post.data.pubDate.toISOString()} class="font-medium md:text-md text-dark-40 flex gap-4 mb-1">
<header class="border-b border-light-40 dark:border-dark-80 max-w-3xl mx-auto pb-10 mb-10">
<time
datetime={post.data.pubDate.toISOString()}
class="font-medium md:text-md text-dark-40 dark:text-light-40 flex gap-4 mb-1"
>
<FormattedDate date={post.data.pubDate} />
<span>&bull;</span>
<span>{remarkPluginFrontmatter.minutesRead}</span>
</time>
<h1 class="text-h4 md:text-h2 mb-2">{post.data.title}</h1>
<div class="font-medium md:text-md text-dark-40">
<div class="font-medium md:text-md text-dark-40 dark:text-light-40">
By {
new Intl.ListFormat('en', { style: 'long', type: 'conjunction' })
.formatToParts(authors.map((author) => author.data.name))
website/src/pages/blog/authors/[author].astro
+2 -2
View File
@@ -56,12 +56,12 @@ const jsonLdSchema = createProfilePageSchema({
<img
src={author.data.avatar}
alt={author.data.name}
class="w-24 h-24 md:w-36 md:h-36 rounded-full border border-light-40 bg-light-100 row-span-3"
class="w-24 h-24 md:w-36 md:h-36 rounded-full border border-light-40 dark:border-dark-80 bg-light-100 dark:bg-dark-110 row-span-3"
/>
)
}
<h1 class="text-h2 mb-1">{author.data.name}</h1>
{author.data.bio && <p class="text-md text-dark-80 mb-4">{author.data.bio}</p>}
{author.data.bio && <p class="text-md text-dark-80 dark:text-light-80 mb-4">{author.data.bio}</p>}
{
author.data.socialLinks && (
<AuthorSocialLinks client:idle socialLinks={author.data.socialLinks} className="flex gap-2" />
website/src/pages/docs/framework/[framework]/style/[style]/[...slug].astro
+1 -1
View File
@@ -119,7 +119,7 @@ const jsonLdSchema = createTechArticleSchema({
</div>
<div class="@container px-6 lg:px-12 flex flex-col" style="grid-area: article;">
<article class="mb-18 flex-1">
<header class="border-b border-light-40 max-w-3xl mx-auto py-8 mb-8">
<header class="border-b border-light-40 dark:border-dark-80 max-w-3xl mx-auto py-8 mb-8">
<H3 as="h1" class="mt-0 mb-2">{doc.data.title}</H3>
<p class="@lg:font-medium">{doc.data.description}</p>
</header>
website/src/pages/index.astro
+10 -6
View File
@@ -30,7 +30,11 @@ const poster = `https://image.mux.com/${PLAYBACK_ID}/thumbnail.webp?time=0`;
</p>
</div>
<div class="vjs relative z-10 w-full -mb-11 md:-mb-21 lg:-mb-32 grid grid-cols-1 grid-rows-1">
<HeroVideo client:load className="aspect-video rounded-3xl bg-dark-80 shadow-2xl" poster={poster} />
<HeroVideo
client:load
className="aspect-video rounded-3xl bg-dark-80 dark:bg-dark-40 shadow-2xl"
poster={poster}
/>
</div>
</div>
<div class="absolute bottom-0 left-0 right-0 h-28 md:h-67 grid grid-rows-4">
@@ -57,7 +61,7 @@ const poster = `https://image.mux.com/${PLAYBACK_ID}/thumbnail.webp?time=0`;
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-6">
<section class="flex gap-3 rounded-xl border border-light-40 p-6">
<section class="flex gap-3 rounded-xl border border-light-40 dark:border-dark-80 p-6">
<CircleCheck size={24} className="flex-shrink-0" />
<div>
<h3 class="font-semibold text-md">Preview</h3>
@@ -65,17 +69,17 @@ const poster = `https://image.mux.com/${PLAYBACK_ID}/thumbnail.webp?time=0`;
<p class="max-w-3xl">First public look, with limited features. Not production ready.</p>
</div>
</section>
<section class="flex gap-3 rounded-xl border border-light-40 p-6">
<section class="flex gap-3 rounded-xl border border-light-40 dark:border-dark-80 p-6">
<div>
<Clock size={24} className="flex-shrink-0" />
</div>
<div>
<h3 class="font-semibold text-md">Beta</h3>
<p class="font-medium mb-3">December 2025</p>
<p class="font-medium mb-3">February 2025</p>
<p class="max-w-3xl">Core features, like basic controls and adaptive streaming. Bugs likely.</p>
</div>
</section>
<section class="flex gap-3 rounded-xl border border-light-40 p-6">
<section class="flex gap-3 rounded-xl border border-light-40 dark:border-dark-80 p-6">
<div>
<Clock size={24} className="flex-shrink-0" />
</div>
@@ -85,7 +89,7 @@ const poster = `https://image.mux.com/${PLAYBACK_ID}/thumbnail.webp?time=0`;
<p class="max-w-3xl">Stable release. Fundamental v8 feature parity.</p>
</div>
</section>
<section class="flex gap-3 rounded-xl border border-light-40 p-6">
<section class="flex gap-3 rounded-xl border border-light-40 dark:border-dark-80 p-6">
<div>
<Clock size={24} className="flex-shrink-0" />
</div>