create-atsdc-stack 1.1.0 → 1.2.1

package/app/src/pages/index.astro

@@ -1,87 +1,87 @@
----
-/**
- * Home Page
- * Demonstrates SCSS architecture:
- * - No inline styles
- * - All styles imported from external SCSS file
- * - Component-specific styles in separate files
- */
-import Layout from '@/layouts/Layout.astro';
-import { siteConfig } from '@/lib/config';
-
-// Import component-specific styles
-import '@/styles/components/button.scss';
-import '@/styles/pages/index.scss';
----
-
-<Layout pageTitle="Home">
-    <main class="home">
-        <div class="container">
-            <header class="home__header">
-                <h1 class="home__title">Welcome to {siteConfig.stackName}</h1>
-                <p class="home__subtitle">
-                    A production-ready full-stack framework combining the best modern web technologies
-                </p>
-            </header>
-
-            <section class="home__features">
-                <div class="home__feature card">
-                    <h3>⚡ Astro</h3>
-                    <p>Lightning-fast static site generation with dynamic capabilities</p>
-                </div>
-
-                <div class="home__feature card">
-                    <h3>📘 TypeScript</h3>
-                    <p>Full type safety across your entire application</p>
-                </div>
-
-                <div class="home__feature card">
-                    <h3>🗄️ Drizzle ORM</h3>
-                    <p>Type-safe database operations with PostgreSQL</p>
-                </div>
-
-                <div class="home__feature card">
-                    <h3>🔐 Clerk</h3>
-                    <p>Complete authentication and user management</p>
-                </div>
-
-                <div class="home__feature card">
-                    <h3>🎨 SCSS</h3>
-                    <p>Powerful styling with variables, mixins, and modules</p>
-                </div>
-
-                <div class="home__feature card">
-                    <h3>✅ Zod</h3>
-                    <p>Runtime validation for API routes and forms</p>
-                </div>
-
-                <div class="home__feature card">
-                    <h3>🤖 Vercel AI SDK</h3>
-                    <p>Seamless integration with AI language models</p>
-                </div>
-
-                <div class="home__feature card">
-                    <h3>🔑 NanoID</h3>
-                    <p>Secure, URL-friendly unique identifiers</p>
-                </div>
-
-                <div class="home__feature card">
-                    <h3>📱 PWA</h3>
-                    <p>Progressive Web App with offline capabilities</p>
-                </div>
-            </section>
-
-            <section class="home__cta">
-                <h2>Get Started</h2>
-                <div class="home__cta-buttons">
-                    <a href={siteConfig.docsUrl} class="btn btn-primary btn-lg">
-                        Read Documentation
-                    </a>
-                    <a href={siteConfig.githubUrl} class="btn btn-secondary btn-lg">
-                        View on GitHub
-                    </a>
-                </div>
-            </section>
-        </div>
-    </main>
-</Layout>
+---
+/**
+ * Home Page
+ * Demonstrates SCSS architecture:
+ * - No inline styles
+ * - All styles imported from external SCSS file
+ * - Component-specific styles in separate files
+ */
+import Layout from '@/layouts/Layout.astro';
+import { siteConfig } from '@/lib/config';
+
+// Import component-specific styles
+import '@/styles/components/button.scss';
+import '@/styles/pages/index.scss';
+---
+
+<Layout pageTitle="Home">
+    <main class="home">
+        <div class="container">
+            <header class="home__header">
+                <h1 class="home__title">Welcome to {siteConfig.stackName}</h1>
+                <p class="home__subtitle">
+                    A production-ready full-stack framework combining the best modern web technologies
+                </p>
+            </header>
+
+            <section class="home__features">
+                <div class="home__feature card">
+                    <h3>⚡ Astro</h3>
+                    <p>Lightning-fast static site generation with dynamic capabilities</p>
+                </div>
+
+                <div class="home__feature card">
+                    <h3>📘 TypeScript</h3>
+                    <p>Full type safety across your entire application</p>
+                </div>
+
+                <div class="home__feature card">
+                    <h3>🗄️ Drizzle ORM</h3>
+                    <p>Type-safe database operations with PostgreSQL</p>
+                </div>
+
+                <div class="home__feature card">
+                    <h3>🔐 Clerk</h3>
+                    <p>Complete authentication and user management</p>
+                </div>
+
+                <div class="home__feature card">
+                    <h3>🎨 SCSS</h3>
+                    <p>Powerful styling with variables, mixins, and modules</p>
+                </div>
+
+                <div class="home__feature card">
+                    <h3>✅ Zod</h3>
+                    <p>Runtime validation for API routes and forms</p>
+                </div>
+
+                <div class="home__feature card">
+                    <h3>🤖 Vercel AI SDK</h3>
+                    <p>Seamless integration with AI language models</p>
+                </div>
+
+                <div class="home__feature card">
+                    <h3>🔑 NanoID</h3>
+                    <p>Secure, URL-friendly unique identifiers</p>
+                </div>
+
+                <div class="home__feature card">
+                    <h3>📱 PWA</h3>
+                    <p>Progressive Web App with offline capabilities</p>
+                </div>
+            </section>
+
+            <section class="home__cta">
+                <h2>Get Started</h2>
+                <div class="home__cta-buttons">
+                    <a href={siteConfig.docsUrl} class="btn btn-primary btn-lg">
+                        Read Documentation
+                    </a>
+                    <a href={siteConfig.githubUrl} class="btn btn-secondary btn-lg">
+                        View on GitHub
+                    </a>
+                </div>
+            </section>
+        </div>
+    </main>
+</Layout>

package/app/src/styles/components/button.scss

@@ -1,152 +1,152 @@
-@use 'sass:color';
-@use '../variables/globals' as *;
-@use '../variables/mixins' as *;
-
-// Button component styles
-// Usage (preferred): <button class="btn" data-variant="primary" data-size="lg">Click me</button>
-// Usage (alternative): <button class="btn primary lg">Class chaining</button>
-
-.btn {
-    @include button-base;
-
-    // Variant modifiers using data attributes (preferred for state/variants)
-    &[data-variant='primary'] {
-        @include button-primary;
-    }
-
-    &[data-variant='secondary'] {
-        @include button-secondary;
-    }
-
-    &[data-variant='danger'] {
-        background-color: $error-color;
-        color: $text-inverse;
-
-        &:hover:not(:disabled) {
-            background-color: color.adjust($error-color, $lightness: -10%);
-        }
-    }
-
-    &[data-variant='success'] {
-        background-color: $success-color;
-        color: $text-inverse;
-
-        &:hover:not(:disabled) {
-            background-color: color.adjust($success-color, $lightness: -10%);
-        }
-    }
-
-    // Size modifiers using data attributes
-    &[data-size='small'] {
-        padding: $spacing-extra-small $spacing-small;
-        font-size: $font-size-small;
-    }
-
-    &[data-size='large'] {
-        padding: $spacing-medium $spacing-extra-large;
-        font-size: $font-size-large;
-    }
-
-    // State modifiers using data attributes
-    &[data-state='loading'] {
-        position: relative;
-        color: transparent;
-        pointer-events: none;
-
-        &::after {
-            content: '';
-            position: absolute;
-            width: 1rem;
-            height: 1rem;
-            top: 50%;
-            left: 50%;
-            margin-left: -0.5rem;
-            margin-top: -0.5rem;
-            border: 2px solid transparent;
-            border-top-color: currentColor;
-            border-radius: 50%;
-            animation: button-spin 0.6s linear infinite;
-        }
-    }
-
-    &[data-state='active'] {
-        box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
-    }
-
-    // Layout modifiers using data attributes
-    &[data-width='full'] {
-        width: 100%;
-    }
-
-    &[data-has-icon='true'] {
-        display: inline-flex;
-        align-items: center;
-        gap: $spacing-small;
-
-        svg {
-            width: 1.25rem;
-            height: 1.25rem;
-        }
-    }
-
-    // Alternative: Class chaining for variants when data attributes aren't appropriate
-    // Use this when you need CSS-only solutions or when data attributes feel verbose
-    &.primary {
-        @include button-primary;
-    }
-
-    &.secondary {
-        @include button-secondary;
-    }
-
-    &.danger {
-        background-color: $error-color;
-        color: $text-inverse;
-
-        &:hover:not(:disabled) {
-            background-color: color.adjust($error-color, $lightness: -10%);
-        }
-    }
-
-    &.success {
-        background-color: $success-color;
-        color: $text-inverse;
-
-        &:hover:not(:disabled) {
-            background-color: color.adjust($success-color, $lightness: -10%);
-        }
-    }
-
-    // Size class chaining alternatives
-    &.small {
-        padding: $spacing-extra-small $spacing-small;
-        font-size: $font-size-small;
-    }
-
-    &.large {
-        padding: $spacing-medium $spacing-extra-large;
-        font-size: $font-size-large;
-    }
-
-    // Layout class chaining alternatives
-    &.full {
-        width: 100%;
-    }
-
-    &.with-icon {
-        display: inline-flex;
-        align-items: center;
-        gap: $spacing-small;
-
-        svg {
-            width: 1.25rem;
-            height: 1.25rem;
-        }
-    }
-}
-
-@keyframes button-spin {
-    to {
-        transform: rotate(360deg);
-    }
-}
+@use 'sass:color';
+@use '../variables/globals' as *;
+@use '../variables/mixins' as *;
+
+// Button component styles
+// Usage (preferred): <button class="btn" data-variant="primary" data-size="lg">Click me</button>
+// Usage (alternative): <button class="btn primary lg">Class chaining</button>
+
+.btn {
+    @include button-base;
+
+    // Variant modifiers using data attributes (preferred for state/variants)
+    &[data-variant='primary'] {
+        @include button-primary;
+    }
+
+    &[data-variant='secondary'] {
+        @include button-secondary;
+    }
+
+    &[data-variant='danger'] {
+        background-color: $error-color;
+        color: $text-inverse;
+
+        &:hover:not(:disabled) {
+            background-color: color.adjust($error-color, $lightness: -10%);
+        }
+    }
+
+    &[data-variant='success'] {
+        background-color: $success-color;
+        color: $text-inverse;
+
+        &:hover:not(:disabled) {
+            background-color: color.adjust($success-color, $lightness: -10%);
+        }
+    }
+
+    // Size modifiers using data attributes
+    &[data-size='small'] {
+        padding: $spacing-extra-small $spacing-small;
+        font-size: $font-size-small;
+    }
+
+    &[data-size='large'] {
+        padding: $spacing-medium $spacing-extra-large;
+        font-size: $font-size-large;
+    }
+
+    // State modifiers using data attributes
+    &[data-state='loading'] {
+        position: relative;
+        color: transparent;
+        pointer-events: none;
+
+        &::after {
+            content: '';
+            position: absolute;
+            width: 1rem;
+            height: 1rem;
+            top: 50%;
+            left: 50%;
+            margin-left: -0.5rem;
+            margin-top: -0.5rem;
+            border: 2px solid transparent;
+            border-top-color: currentColor;
+            border-radius: 50%;
+            animation: button-spin 0.6s linear infinite;
+        }
+    }
+
+    &[data-state='active'] {
+        box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
+    }
+
+    // Layout modifiers using data attributes
+    &[data-width='full'] {
+        width: 100%;
+    }
+
+    &[data-has-icon='true'] {
+        display: inline-flex;
+        align-items: center;
+        gap: $spacing-small;
+
+        svg {
+            width: 1.25rem;
+            height: 1.25rem;
+        }
+    }
+
+    // Alternative: Class chaining for variants when data attributes aren't appropriate
+    // Use this when you need CSS-only solutions or when data attributes feel verbose
+    &.primary {
+        @include button-primary;
+    }
+
+    &.secondary {
+        @include button-secondary;
+    }
+
+    &.danger {
+        background-color: $error-color;
+        color: $text-inverse;
+
+        &:hover:not(:disabled) {
+            background-color: color.adjust($error-color, $lightness: -10%);
+        }
+    }
+
+    &.success {
+        background-color: $success-color;
+        color: $text-inverse;
+
+        &:hover:not(:disabled) {
+            background-color: color.adjust($success-color, $lightness: -10%);
+        }
+    }
+
+    // Size class chaining alternatives
+    &.small {
+        padding: $spacing-extra-small $spacing-small;
+        font-size: $font-size-small;
+    }
+
+    &.large {
+        padding: $spacing-medium $spacing-extra-large;
+        font-size: $font-size-large;
+    }
+
+    // Layout class chaining alternatives
+    &.full {
+        width: 100%;
+    }
+
+    &.with-icon {
+        display: inline-flex;
+        align-items: center;
+        gap: $spacing-small;
+
+        svg {
+            width: 1.25rem;
+            height: 1.25rem;
+        }
+    }
+}
+
+@keyframes button-spin {
+    to {
+        transform: rotate(360deg);
+    }
+}