Chore/UI rework

.changeset/green-cups-divide.md

@@ -0,0 +1,5 @@
+---
+"create-docubase": patch
+---
+
+UI Update website

astro.config.mjs

@@ -34,7 +34,6 @@ export default defineConfig({
     rehypePlugins: [rehypeSlug],
     shikiConfig: {
       theme: 'github-dark',
-      wrap: true,
     },
   },
 });

template/astro.config.mjs

@@ -32,7 +32,6 @@ export default defineConfig({
     rehypePlugins: [rehypeSlug],
     shikiConfig: {
       theme: 'github-dark',
-      wrap: true,
     },
   },
 });

template/src/components/BlogCard.astro

@@ -27,7 +27,3 @@ const { title, description, date, readTime = DEFAULTS.BLOG_CARD.readTime, image,
     </div>
   </div>
 </a>
-
-<script>
-  import 'iconify-icon';
-</script>

template/src/components/BottomNav.astro

@@ -128,7 +128,3 @@ const defaultFallbackLinks: NavTarget[] = fallbackLinks || [
     </div>
   )}
 </div>
-
-<script>
-  import 'iconify-icon';
-</script>

template/src/components/Button.astro

@@ -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) {
     margin-bottom: 0 !important;
   }
 
@@ -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 {
@@ -118,7 +127,3 @@ const Tag = href ? 'a' : 'button';
       inset 0 1px 0 rgba(255, 255, 255, 0.15);
   }
 </style>
-
-<script>
-  import 'iconify-icon';
-</script>

template/src/components/DocNav.astro

@@ -37,7 +37,3 @@ const { prev, next } = Astro.props;
     <div></div>
   )}
 </nav>
-
-<script>
-  import 'iconify-icon';
-</script>

template/src/components/FeatureCard.astro

@@ -16,7 +16,7 @@ const Tag = href ? 'a' : 'div';
   ]}
 >
   <div class="flex flex-col items-center text-center">
-    <div class="text-gray-700 dark:text-gray-300" set:html={iconHtml} />
+    <div class="text-gray-700 dark:text-gray-300 mb-4" set:html={iconHtml} />
     <h3 class="font-semibold text-gray-900 dark:text-white mb-4">{title}</h3>
     <div class="w-full h-px bg-gray-200 dark:bg-gray-700 mb-5"></div>
     <p class="text-sm text-gray-600 dark:text-gray-400 leading-relaxed">{description}</p>

template/src/components/FlipCard.astro

@@ -193,7 +193,3 @@ const { title, description, icon } = Astro.props as Props;
     z-index: 1;
   }
 </style>
-
-<script>
-  import 'iconify-icon';
-</script>

template/src/components/Footer.astro

@@ -29,7 +29,3 @@ const currentYear = new Date().getFullYear();
     </div>
   </div>
 </footer>
-
-<script>
-  import 'iconify-icon';
-</script>

template/src/components/Header.astro

@@ -92,10 +92,6 @@ const navLinks = NAV_LINKS;
   </div>
 </header>
 
-<script>
-  import 'iconify-icon';
-</script>
-
 <script>
   (function() {
     if ((window as any).__headerInitialized) return;

template/src/components/ReadTime.astro

@@ -8,7 +8,3 @@ const { minutes } = Astro.props as ReadTimeProps;
   <iconify-icon icon="mdi:clock-outline" width="16" height="16"></iconify-icon>
   <span>{minutes} min read</span>
 </div>
-
-<script>
-  import 'iconify-icon';
-</script>

template/src/components/Step.astro

@@ -6,7 +6,7 @@ const { title } = Astro.props as StepProps;
 
 <div class="step relative [counter-increment:step]">
   <div class="absolute -left-[calc(1.5rem+1px)] -translate-x-1/2 w-8 h-8 rounded-full bg-transparent border-2 border-primary-500 flex items-center justify-center text-sm font-semibold text-primary-700 dark:text-primary-300 before:content-[counter(step)] z-10" />
-  <div class="step-line absolute -left-[calc(1.5rem+1px)] -translate-x-1/2 top-10 w-0.5 rounded-full bg-gray-300 dark:bg-gray-700" style="height: calc(100% - 0.5rem);" />
+  <div class="step-line absolute -left-[calc(1.5rem+1px)] -translate-x-1/2 top-10 w-0.5 rounded-full bg-gray-300 dark:bg-gray-700" style="height: calc(100% - 2rem);" />
   <div>
     <h3 class="font-semibold text-lg mb-2 mt-0 leading-8">{title}</h3>
     <div class="text-gray-700 dark:text-gray-300 [&>p]:mb-3 [&>p:last-child]:mb-0">
@@ -16,7 +16,7 @@ const { title } = Astro.props as StepProps;
 </div>
 
 <style>
-  .step:last-child .step-line {
+  .step:last-of-type .step-line {
     display: none;
   }
 </style>

template/src/components/Table.astro

@@ -4,10 +4,10 @@ import type { TableProps } from '@/types';
 const { headers, rows, striped = true } = Astro.props as TableProps;
 ---
 
-<div class="my-6 inline-block min-w-[280px] max-w-full overflow-x-auto rounded-xl border border-white/20 dark:border-white/10 bg-white/60 dark:bg-gray-900/40 backdrop-blur-md shadow-lg shadow-gray-200/50 dark:shadow-black/20">
+<div class="my-6 inline-block min-w-[280px] max-w-full overflow-x-auto rounded-xl border border-gray-300/60 dark:border-white/10 bg-white/60 dark:bg-gray-900/40 backdrop-blur-md shadow-lg shadow-gray-200/50 dark:shadow-black/20">
   <table class="text-sm border-collapse">
     <thead>
-      <tr class="bg-white/50 dark:bg-white/5">
+      <tr class="bg-gray-100/80 dark:bg-white/5">
         {headers.map((header, i) => (
           <th class={`px-5 py-3 text-left font-semibold text-gray-950 dark:text-white whitespace-nowrap ${i === 0 ? 'rounded-tl-xl' : ''} ${i === headers.length - 1 ? 'rounded-tr-xl' : ''}`}>
             {header}
@@ -21,7 +21,7 @@ const { headers, rows, striped = true } = Astro.props as TableProps;
           {rowIndex !== 0 && !striped && (
             <tr>
               <td colspan={row.length} class="px-5 py-0">
-                <div class="border-t border-gray-300/40 dark:border-white/10"></div>
+                <div class="border-t border-gray-300/70 dark:border-white/10"></div>
               </td>
             </tr>
           )}

template/src/components/Tabs.astro

@@ -24,7 +24,7 @@ const tabsId = id || `tabs-${hashString(labels.join('-'))}`;
             'focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-inset',
             index === defaultIndex
               ? 'text-primary-600 dark:text-white bg-gray-100 dark:bg-gray-800'
-              : 'text-gray-700 dark:text-gray-400 bg-transparent hover:text-gray-900 dark:hover:text-gray-200',
+              : 'text-gray-700 dark:text-gray-400 bg-transparent hover:text-primary-700 dark:hover:text-gray-200',
           ]}
           data-tab-index={index}
           aria-selected={index === defaultIndex}
@@ -53,7 +53,7 @@ const tabsId = id || `tabs-${hashString(labels.join('-'))}`;
     (window as any).__tabsInitialized = true;
 
     const TAB_ACTIVE_CLASSES = ['text-primary-600', 'dark:text-white', 'bg-gray-100', 'dark:bg-gray-800'];
-    const TAB_INACTIVE_CLASSES = ['text-gray-700', 'dark:text-gray-400'];
+    const TAB_INACTIVE_CLASSES = ['text-gray-700', 'dark:text-gray-400', 'bg-transparent'];
 
     function activateTab(container: Element, index: number) {
       const tabs = Array.from(container.querySelectorAll('.tab-button')) as HTMLElement[];

template/src/content/docs/installation/index.mdx

@@ -322,17 +322,9 @@ Check the changelog before updating to review any breaking changes.
 
 Now that you have DocuBase installed, here's what to do next:
 
-<div class="flex flex-wrap gap-3 mt-4">
-  <Button href="/docs/getting-started" variant="primary" icon="mdi:rocket-launch">
-    Getting Started
-  </Button>
-  <Button href="/docs/core-concepts" variant="secondary" icon="mdi:book-open-page-variant">
-    Core Concepts
-  </Button>
-  <Button href="/docs/components" variant="secondary" icon="mdi:puzzle">
-    Components
-  </Button>
-</div>
+- [Getting Started](/docs/getting-started) - Learn the basics and start building your documentation
+- [Core Concepts](/docs/core-concepts) - Understand how DocuBase works under the hood
+- [Components](/docs/components) - Explore all available components and how to use them
 
 <Callout type="info" title="Need help?">
 If you run into any issues during installation, check the troubleshooting section above or visit our [GitHub repository](https://github.com/Sithumli/DocuBase/issues) to report a bug.

template/src/layouts/BaseLayout.astro

@@ -22,6 +22,7 @@ const siteTitle = SITE_TITLE;
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin />
     <link rel="dns-prefetch" href="https://cdn.jsdelivr.net" />
+    <script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js" defer></script>
     <script is:inline>
       (function() {
         const theme = localStorage.getItem('theme') ||

template/src/styles/global.css

@@ -68,16 +68,23 @@ html, body {
   line-height: 1.75;
 }
 
-:where(article.prose) a {
+:where(article.prose) a:not(.btn) {
   color: rgb(6 182 212);
   text-decoration: underline;
   text-underline-offset: 2px;
 }
 
-:where(article.prose) a:hover {
+:where(article.prose) a:not(.btn):hover {
   color: rgb(8 145 178);
 }
 
+:where(article.prose) .btn,
+:where(article.prose) a.btn {
+  text-decoration: none;
+  margin: 0;
+  padding: 0.5rem 1.25rem;
+}
+
 :where(article.prose) strong {
   color: rgb(17 24 39);
   font-weight: 600;
@@ -104,26 +111,27 @@ html, body {
   margin: 2rem 0;
 }
 
-:where(article.prose) table {
+/* Exclude custom Table component from prose table styles */
+:where(article.prose) table:not(.text-sm) {
   width: 100%;
   border-collapse: collapse;
   margin: 1.5rem 0;
 }
 
-:where(article.prose) th,
-:where(article.prose) td {
+:where(article.prose) table:not(.text-sm) th,
+:where(article.prose) table:not(.text-sm) td {
   border: 1px solid rgb(229 231 235);
   padding: 0.75rem;
   text-align: left;
 }
 
-:where(article.prose) th {
+:where(article.prose) table:not(.text-sm) th {
   background: rgb(249 250 251);
   font-weight: 600;
   color: rgb(17 24 39);
 }
 
-:where(article.prose) td {
+:where(article.prose) table:not(.text-sm) td {
   color: rgb(55 65 81);
 }
 
@@ -164,14 +172,20 @@ html, body {
   color: rgb(209 213 219);
 }
 
-:where(html.dark article.prose) a {
+:where(html.dark article.prose) a:not(.btn) {
   color: rgb(34 211 238);
 }
 
-:where(html.dark article.prose) a:hover {
+:where(html.dark article.prose) a:not(.btn):hover {
   color: rgb(103 232 249);
 }
 
+/* Protect buttons from prose styles in dark mode */
+:where(html.dark article.prose) .btn,
+:where(html.dark article.prose) a.btn {
+  text-decoration: none;
+}
+
 :where(html.dark article.prose) strong {
   color: rgb(243 244 246);
 }
@@ -190,17 +204,18 @@ html, body {
   border-color: rgb(55 65 81);
 }
 
-:where(html.dark article.prose) th,
-:where(html.dark article.prose) td {
+/* Exclude custom Table component from prose table styles in dark mode */
+:where(html.dark article.prose) table:not(.text-sm) th,
+:where(html.dark article.prose) table:not(.text-sm) td {
   border-color: rgb(55 65 81);
 }
 
-:where(html.dark article.prose) th {
+:where(html.dark article.prose) table:not(.text-sm) th {
   background: rgb(31 41 55);
   color: rgb(243 244 246);
 }
 
-:where(html.dark article.prose) td {
+:where(html.dark article.prose) table:not(.text-sm) td {
   color: rgb(209 213 219);
 }