Skip to content

Main → Prod #34

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
Sithumli wants to merge 27 commits into from
Closed

Main → Prod #34

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
27 commits
Select commit Hold shift + click to select a range
78773de
chore: update ASSETS_CDN_BASE to use the main branch for asset hostin…
Sithumli Jan 31, 2026
cf41e41
feat: enhance dark mode support across components and styles
Sithumli Feb 1, 2026
9b56504
feat: implement theme toggle functionality and enhance dark mode support
Sithumli Feb 1, 2026
6420e72
feat: add dark mode support with theme toggle functionality
Sithumli Feb 1, 2026
dbe6d1e
feat: refactor theme and mobile menu toggle functionality for improve…
Sithumli Feb 1, 2026
3512a6b
Merge pull request #26 from Sithumli/feat/dark-mode
Sithumli Feb 1, 2026
95c3127
chore: release package (#27)
github-actions[bot] Feb 1, 2026
f28bbfb
chore: remove glow effect from neon border in FlipCard component
Sithumli Feb 2, 2026
b366200
Merge pull request #29 from Sithumli/chore/ui-rework
Sithumli Feb 3, 2026
351d571
chore: remove shikiConfig from markdown settings and update table sty…
Sithumli Feb 5, 2026
4e72e7a
chore: adjust step line height and fix CSS selector for last step
Sithumli Feb 5, 2026
ebbcbe2
chore: update icon size and margin in Button component for better ali…
Sithumli Feb 5, 2026
e2991ce
chore: remove unused iconify-icon imports from multiple components
Sithumli Feb 5, 2026
8f797b4
chore: refactor Button components for improved readability in install…
Sithumli Feb 5, 2026
a05a871
chore: update Button component styles and adjust link styles for bett…
Sithumli Feb 5, 2026
5e618ad
chore: enhance abbr styles for better text decoration consistency
Sithumli Feb 5, 2026
c8a6641
chore: remove abbr and anchor text decoration styles for cleaner design
Sithumli Feb 5, 2026
38ea59d
chore: update Button component styles to use 'glass' variant for impr…
Sithumli Feb 5, 2026
0733b2e
chore: update button styles in prose for consistency and improved design
Sithumli Feb 5, 2026
23e2b96
chore: refactor button layout for improved readability in installatio…
Sithumli Feb 5, 2026
9c218b2
chore: replace button components with markdown links for improved rea…
Sithumli Feb 5, 2026
44a2d55
chore: add margin to icon div for improved spacing in FeatureCard com…
Sithumli Feb 5, 2026
f9ab419
chore: update markdown theme to 'github-dark' and enhance tab styles …
Sithumli Feb 5, 2026
707a3c8
chore: add initial changeset for UI update to website
Sithumli Feb 5, 2026
c10c344
Merge branch 'main' into chore/ui-rework
Sithumli Feb 5, 2026
818e04d
Merge pull request #32 from Sithumli/chore/ui-rework
Sithumli Feb 5, 2026
33362ff
chore: release package (#33)
github-actions[bot] Feb 5, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 12 additions & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,17 @@
# create-docubase

## 1.1.1

### Patch Changes

- 707a3c8: UI Update website

## 1.1.0

### Minor Changes

- 6420e72: Add dark mode support with theme toggle functionality

## 1.0.2

### Patch Changes
Expand Down
1 change: 0 additions & 1 deletion astro.config.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,6 @@ export default defineConfig({
rehypePlugins: [rehypeSlug],
shikiConfig: {
theme: 'github-dark',
wrap: true,
},
},
});
2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "create-docubase",
"version": "1.0.2",
"version": "1.1.1",
"description": "Create a new DocuBase documentation site",
"type": "module",
"bin": {
Expand Down
1 change: 0 additions & 1 deletion template/astro.config.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,6 @@ export default defineConfig({
rehypePlugins: [rehypeSlug],
shikiConfig: {
theme: 'github-dark',
Copy link

Copilot AI Feb 5, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The wrap: true configuration has been removed from the Shiki syntax highlighting config. This means code blocks will no longer wrap long lines and will show horizontal scrollbars instead. This is a significant UX change that affects code readability, especially on mobile devices.

If this change is intentional to improve code formatting, consider:

  1. Adding CSS to handle overflow gracefully
  2. Documenting this change in the CHANGELOG
  3. Ensuring horizontal scroll is accessible and visible

If unintentional, consider restoring the wrap: true setting.

Suggested change
theme: 'github-dark',
theme: 'github-dark',
wrap: true,

Copilot uses AI. Check for mistakes.
wrap: true,
},
},
});
14 changes: 5 additions & 9 deletions template/src/components/BlogCard.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,18 +7,18 @@ const { title, description, date, readTime = DEFAULTS.BLOG_CARD.readTime, image,

<a
href={href}
class="flex gap-6 p-4 bg-white border border-gray-200 rounded-2xl hover:border-gray-300 hover:shadow-sm transition-all"
class="flex gap-6 p-4 bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-2xl hover:border-gray-300 dark:hover:border-gray-600 hover:shadow-sm transition-all"
>
{image && (
<div class="w-32 h-24 bg-gray-100 rounded-lg shrink-0">
<div class="w-32 h-24 bg-gray-100 dark:bg-gray-800 rounded-lg shrink-0">
<img src={image} alt={title} class="w-full h-full object-cover rounded-lg" />
</div>
)}

<div class="flex-1 min-w-0 pt-2">
<h3 class="font-semibold text-gray-900 mb-1">{title}</h3>
<p class="text-xs text-gray-600 mb-2">{description}</p>
<div class="flex items-center gap-3 text-xs text-gray-400">
<h3 class="font-semibold text-gray-900 dark:text-white mb-1">{title}</h3>
<p class="text-xs text-gray-600 dark:text-gray-400 mb-2">{description}</p>
<div class="flex items-center gap-3 text-xs text-gray-400 dark:text-gray-500">
<span>{date}</span>
<span class="flex items-center gap-1">
<iconify-icon icon="mdi:clock-outline" width="14" height="14"></iconify-icon>
Expand All @@ -27,7 +27,3 @@ const { title, description, date, readTime = DEFAULTS.BLOG_CARD.readTime, image,
</div>
</div>
</a>

<script>
import 'iconify-icon';
</script>
78 changes: 27 additions & 51 deletions template/src/components/BottomNav.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,20 +20,20 @@ const defaultFallbackLinks: NavTarget[] = fallbackLinks || [
];
---

<div class="bottom-nav pt-8 mt-8 not-prose" style="border-top: 1px solid rgb(229 231 235) !important;">
<div class="bottom-nav pt-8 mt-8 not-prose border-t border-gray-200 dark:border-gray-700">
{showProgress && (
<div class="mb-4 text-xs font-medium" style="color: rgb(55 65 81) !important;">
<div class="mb-4 text-xs font-medium">
<div class="flex items-center justify-between mb-1.5">
<span style="color: rgb(55 65 81) !important;">
<span class="text-gray-600 dark:text-gray-400">
Page {context.currentIndex} of {context.totalInBlock}
{context.blockTitle && ` in ${context.blockTitle}`}
</span>
<span style="color: rgb(55 65 81) !important;">{Math.round((context.currentIndex / context.totalInBlock) * 100)}% complete</span>
<span class="text-gray-600 dark:text-gray-400">{Math.round((context.currentIndex / context.totalInBlock) * 100)}% complete</span>
</div>
<div class="w-full rounded-full h-1" style="background-color: rgb(229 231 235) !important;">
<div class="w-full rounded-full h-1 bg-gray-200 dark:bg-gray-700">
<div
class="h-1 rounded-full transition-all duration-300"
style={`width: ${(context.currentIndex / context.totalInBlock) * 100}%; background-color: rgb(79 70 229) !important;`}
class="h-1 rounded-full transition-all duration-300 bg-indigo-600 dark:bg-indigo-500"
style={`width: ${(context.currentIndex / context.totalInBlock) * 100}%;`}
></div>
</div>
</div>
Expand All @@ -44,13 +44,12 @@ const defaultFallbackLinks: NavTarget[] = fallbackLinks || [
{prev ? (
<a
href={prev.href}
class="group flex items-center gap-3 px-4 py-3 rounded-lg transition-all"
style="border: 1px solid rgb(229 231 235) !important;"
class="group flex items-center gap-3 px-4 py-3 rounded-lg transition-all border border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600"
>
<iconify-icon icon="mdi:chevron-left" width="20" height="20" style="color: rgb(17 24 39) !important;" class="shrink-0"></iconify-icon>
<iconify-icon icon="mdi:chevron-left" width="20" height="20" class="shrink-0 text-gray-900 dark:text-gray-100"></iconify-icon>
<div class="flex flex-col">
<span class="text-xs" style="color: rgb(55 65 81) !important;">Previous</span>
<span class="text-sm font-semibold transition-colors" style="color: rgb(17 24 39) !important;">
<span class="text-xs text-gray-600 dark:text-gray-400">Previous</span>
<span class="text-sm font-semibold transition-colors text-gray-900 dark:text-gray-100">
{prev.title}
</span>
</div>
Expand All @@ -62,44 +61,42 @@ const defaultFallbackLinks: NavTarget[] = fallbackLinks || [
{next ? (
<a
href={next.href}
class="group flex items-center gap-3 px-4 py-3 rounded-lg transition-all ml-auto"
style="border: 1px solid rgb(229 231 235) !important;"
class="group flex items-center gap-3 px-4 py-3 rounded-lg transition-all ml-auto border border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600"
>
<div class="flex flex-col text-right">
<span class="text-xs" style="color: rgb(55 65 81) !important;">Next</span>
<span class="text-sm font-semibold transition-colors" style="color: rgb(17 24 39) !important;">
<span class="text-xs text-gray-600 dark:text-gray-400">Next</span>
<span class="text-sm font-semibold transition-colors text-gray-900 dark:text-gray-100">
{next.title}
</span>
</div>
<iconify-icon icon="mdi:chevron-right" width="20" height="20" style="color: rgb(17 24 39) !important;" class="shrink-0"></iconify-icon>
<iconify-icon icon="mdi:chevron-right" width="20" height="20" class="shrink-0 text-gray-900 dark:text-gray-100"></iconify-icon>
</a>
) : (
<div></div>
)}
</nav>
) : showFallback ? (
<div class="text-center py-6">
<div class="inline-flex items-center justify-center w-12 h-12 rounded-full mb-3" style="background-color: rgb(224 231 255) !important;">
<iconify-icon icon="mdi:check-circle" width="24" height="24" style="color: rgb(79 70 229) !important;"></iconify-icon>
<div class="inline-flex items-center justify-center w-12 h-12 rounded-full mb-3 bg-indigo-100 dark:bg-indigo-900/50">
<iconify-icon icon="mdi:check-circle" width="24" height="24" class="text-indigo-600 dark:text-indigo-400"></iconify-icon>
</div>
<h3 class="text-lg font-semibold mb-1" style="color: rgb(17 24 39) !important;">
<h3 class="text-lg font-semibold mb-1 text-gray-900 dark:text-gray-100">
You've reached the end!
</h3>
<p class="text-sm mb-4" style="color: rgb(55 65 81) !important;">
<p class="text-sm mb-4 text-gray-600 dark:text-gray-400">
Explore other content to continue your journey
</p>
<div class="grid grid-cols-1 md:grid-cols-3 gap-3 max-w-2xl mx-auto">
{defaultFallbackLinks.map((link) => (
<a
href={link.href}
class="group p-3 rounded-lg transition-all"
style="border: 1px solid rgb(229 231 235) !important;"
class="group p-3 rounded-lg transition-all border border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600"
>
<div class="text-sm font-semibold transition-colors mb-0.5" style="color: rgb(17 24 39) !important;">
<div class="text-sm font-semibold transition-colors mb-0.5 text-gray-900 dark:text-gray-100">
{link.title}
</div>
{link.description && (
<div class="text-xs" style="color: rgb(55 65 81) !important;">
<div class="text-xs text-gray-600 dark:text-gray-400">
{link.description}
</div>
)}
Expand All @@ -113,42 +110,21 @@ const defaultFallbackLinks: NavTarget[] = fallbackLinks || [
<div class="mt-4">
<a
href={nextBlock.href}
class="group flex items-center gap-3 px-4 py-3 rounded-lg transition-all"
style="border: 2px dashed rgb(199 210 254) !important;"
class="group flex items-center gap-3 px-4 py-3 rounded-lg transition-all border-2 border-dashed border-indigo-200 dark:border-indigo-800 hover:border-indigo-300 dark:hover:border-indigo-700"
>
<div class="flex-1">
<div class="text-xs mb-0.5 font-semibold" style="color: rgb(79 70 229) !important;">Up Next</div>
<div class="text-sm font-semibold transition-colors" style="color: rgb(17 24 39) !important;">
<div class="text-xs mb-0.5 font-semibold text-indigo-600 dark:text-indigo-400">Up Next</div>
<div class="text-sm font-semibold transition-colors text-gray-900 dark:text-gray-100">
{nextBlock.title}
</div>
{nextBlock.description && (
<div class="text-xs mt-0.5" style="color: rgb(55 65 81) !important;">
<div class="text-xs mt-0.5 text-gray-600 dark:text-gray-400">
{nextBlock.description}
</div>
)}
</div>
<iconify-icon icon="mdi:arrow-right" width="20" height="20" style="color: rgb(79 70 229) !important;" class="shrink-0"></iconify-icon>
<iconify-icon icon="mdi:arrow-right" width="20" height="20" class="shrink-0 text-indigo-600 dark:text-indigo-400"></iconify-icon>
</a>
</div>
)}
</div>

<style>
.bottom-nav * {
color: rgb(17 24 39) !important;
}
.bottom-nav span,
.bottom-nav div:not(.bg-indigo-600):not(.bg-indigo-500) {
color: rgb(17 24 39) !important;
}
.bottom-nav .text-xs {
color: rgb(55 65 81) !important;
}
.bottom-nav a {
text-decoration: none !important;
}
</style>

<script>
import 'iconify-icon';
</script>
8 changes: 4 additions & 4 deletions template/src/components/Breadcrumb.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,16 +4,16 @@ import type { BreadcrumbProps } from '@/types';
const { items } = Astro.props as BreadcrumbProps;
---

<nav class="relative z-10 flex items-center gap-2 text-sm text-gray-500 mb-4">
<nav class="relative z-10 flex items-center gap-2 text-sm text-gray-500 dark:text-gray-400 mb-4">
{items.map((item, index) => (
<>
{index > 0 && <span class="text-gray-400">&gt;</span>}
{index > 0 && <span class="text-gray-400 dark:text-gray-500">&gt;</span>}
{item.href ? (
<a href={item.href} class="inline-block hover:text-gray-900 transition-colors">
<a href={item.href} class="inline-block hover:text-gray-900 dark:hover:text-gray-100 transition-colors">
{item.label}
</a>
) : (
<span class="text-gray-900 font-medium">{item.label}</span>
<span class="text-gray-900 dark:text-gray-100 font-medium">{item.label}</span>
)}
</>
))}
Expand Down
55 changes: 47 additions & 8 deletions template/src/components/Button.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,16 +23,16 @@ const Tag = href ? 'a' : 'button';
class:list={['btn', `btn-${variant}`, className]}
>
{icon && iconPosition === 'left' && (
<iconify-icon icon={icon} class="mr-1.5" width="14" height="14" />
<iconify-icon icon={icon} class="mr-2" width="18" height="18" />
)}
<slot />
{icon && iconPosition === 'right' && (
<iconify-icon icon={icon} class="ml-1.5" width="14" height="14" />
<iconify-icon icon={icon} class="ml-2" width="18" height="18" />
)}
</Tag>

<style>
.btn :global(p) {
<style is:global>
.btn :is(p) {
Copy link

Copilot AI Feb 5, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The style tag has been changed from <style> to <style is:global>. However, the selector .btn :is(p) (changed from .btn :global(p)) is now less specific. With is:global, all styles are global, so the :global() pseudo-class is no longer needed and :is() is correct. However, :is(p) is equivalent to just p in this context, making the change semantically neutral but potentially confusing. Consider simplifying to .btn p for clarity.

Suggested change
.btn :is(p) {
.btn p {

Copilot uses AI. Check for mistakes.
margin-bottom: 0 !important;
}

Expand All @@ -45,6 +45,15 @@ const Tag = href ? 'a' : 'button';
font-weight: 500;
border-radius: 9999px;
transition: all 0.2s ease;
text-decoration: none;
border: none;
cursor: pointer;
white-space: nowrap;
}

.btn iconify-icon {
display: inline-flex;
flex-shrink: 0;
}

.btn-primary {
Expand All @@ -56,6 +65,14 @@ const Tag = href ? 'a' : 'button';
background: rgb(8 145 178);
}

:global(html.dark) .btn-primary {
background: rgb(8 145 178);
}

:global(html.dark) .btn-primary:hover {
background: rgb(6 182 212);
}

.btn-secondary {
background: rgb(229 231 235);
color: rgb(17 24 39);
Expand All @@ -65,6 +82,15 @@ const Tag = href ? 'a' : 'button';
background: rgb(209 213 219);
}

:global(html.dark) .btn-secondary {
background: rgb(55 65 81);
color: rgb(243 244 246);
}

:global(html.dark) .btn-secondary:hover {
background: rgb(75 85 99);
}

.btn-glass {
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(12px);
Expand All @@ -83,8 +109,21 @@ const Tag = href ? 'a' : 'button';
0 6px 20px rgba(0, 0, 0, 0.12),
inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
</style>

<script>
import 'iconify-icon';
</script>
:global(html.dark) .btn-glass {
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.15);
color: rgb(243 244 246);
box-shadow:
0 4px 16px rgba(0, 0, 0, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

:global(html.dark) .btn-glass:hover {
background: rgba(255, 255, 255, 0.15);
border-color: rgba(255, 255, 255, 0.25);
box-shadow:
0 6px 20px rgba(0, 0, 0, 0.4),
inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
</style>
26 changes: 22 additions & 4 deletions template/src/components/Cloud.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,16 +5,24 @@ const { class: className = "" } = Astro.props as CloudProps;
---

<div class={`relative ${className}`}>
<!-- Mobile cloud (simplified, fewer circles) -->
<svg class="absolute -inset-4 w-[calc(100%+2rem)] h-[calc(100%+2rem)] overflow-visible md:hidden" viewBox="0 0 300 140" preserveAspectRatio="xMidYMid slice" style="filter: blur(4px);">
<!-- Mobile cloud (simplified, fewer circles) - Light mode -->
<svg class="absolute -inset-4 w-[calc(100%+2rem)] h-[calc(100%+2rem)] overflow-visible md:hidden dark:hidden" viewBox="0 0 300 140" preserveAspectRatio="xMidYMid slice" style="filter: blur(4px);">
<circle cx="40" cy="75" r="60" fill="#d4eef7" />
<circle cx="120" cy="60" r="65" fill="#d4eef7" />
<circle cx="200" cy="75" r="60" fill="#d4eef7" />
<circle cx="270" cy="60" r="55" fill="#d4eef7" />
</svg>

<!-- Desktop cloud (full version) -->
<svg class="absolute inset-0 w-full h-full overflow-visible hidden md:block" viewBox="0 0 600 160" preserveAspectRatio="xMidYMid meet" style="filter: blur(4px);">
<!-- Mobile cloud (simplified, fewer circles) - Dark mode -->
<svg class="absolute -inset-4 w-[calc(100%+2rem)] h-[calc(100%+2rem)] overflow-visible hidden dark:block dark:md:hidden" viewBox="0 0 300 140" preserveAspectRatio="xMidYMid slice" style="filter: blur(4px);">
<circle cx="40" cy="75" r="60" fill="#1e3a5f" />
<circle cx="120" cy="60" r="65" fill="#1e3a5f" />
<circle cx="200" cy="75" r="60" fill="#1e3a5f" />
<circle cx="270" cy="60" r="55" fill="#1e3a5f" />
</svg>

<!-- Desktop cloud (full version) - Light mode -->
<svg class="absolute inset-0 w-full h-full overflow-visible hidden md:block dark:md:hidden" viewBox="0 0 600 160" preserveAspectRatio="xMidYMid meet" style="filter: blur(4px);">
<circle cx="50" cy="85" r="80" fill="#d4eef7" />
<circle cx="150" cy="65" r="85" fill="#d4eef7" />
<circle cx="260" cy="85" r="90" fill="#d4eef7" />
Expand All @@ -23,6 +31,16 @@ const { class: className = "" } = Astro.props as CloudProps;
<circle cx="570" cy="65" r="85" fill="#d4eef7" />
</svg>

<!-- Desktop cloud (full version) - Dark mode -->
<svg class="absolute inset-0 w-full h-full overflow-visible hidden dark:md:block" viewBox="0 0 600 160" preserveAspectRatio="xMidYMid meet" style="filter: blur(4px);">
<circle cx="50" cy="85" r="80" fill="#1e3a5f" />
<circle cx="150" cy="65" r="85" fill="#1e3a5f" />
<circle cx="260" cy="85" r="90" fill="#1e3a5f" />
<circle cx="380" cy="70" r="95" fill="#1e3a5f" />
<circle cx="490" cy="85" r="90" fill="#1e3a5f" />
<circle cx="570" cy="65" r="85" fill="#1e3a5f" />
</svg>

<div class="relative z-10 flex items-center justify-center min-h-[120px] md:min-h-[160px] px-6 sm:px-10 md:px-16 py-6 md:py-10">
<div class="max-w-lg text-center">
<slot />
Expand Down
4 changes: 0 additions & 4 deletions template/src/components/DocNav.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,3 @@ const { prev, next } = Astro.props;
<div></div>
)}
</nav>

<script>
import 'iconify-icon';
</script>
Loading
Loading