feat: main page layout #17

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.

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

Merged

rockyroed merged 23 commits into main from feat/layout

Oct 6, 2025

.github/workflows/lint.yml → .github/workflows/ci.yml

            
                      Original file line number
                      Diff line number
                      Diff line change
                  
    @@ -1,4 +1,4 @@
  
    name: Lint

    name: CI

    on:

      push:

    @@ -9,40 +9,39 @@ on:
  
          - main

    jobs:

      lint:

      ci:

        runs-on: ubuntu-latest

        strategy:

          matrix:

            node-version: [20, 22, 24]

        steps:

          # Checkout the repository

          - name: Checkout code

            uses: actions/checkout@v3

          # Set up Node.js

          - name: Set up Node.js

            uses: actions/setup-node@v3

            with:

              node-version: ${{ matrix.node-version }}

          # Install pnpm

          - name: Install pnpm

            uses: pnpm/action-setup@v4

            with:

              version: 10.18.0

          # Install dependencies

          - name: Install dependencies

            run: pnpm install

          # Run lint

          - name: Run lint

            run: pnpm lint

          # Run prettier

          - name: Run prettier

            run: pnpm prettier:check

          # Run type checking

          - name: Run type checking

            run: pnpm tsc --noEmit

          - name: Run build

            run: pnpm build

          - name: Run tests

            run: pnpm test:all

app/app.vue

-Original file line number
+Diff line change
@@ -1,5 +1,7 @@
     <template>
-      <div>
-        <h1 class="text-3xl font-bold underline">Hello World!</h1>
-      </div>
+      <UApp>
+        <NuxtLayout>
+          <NuxtPage />
+        </NuxtLayout>
+      </UApp>
     </template>

app/assets/css/main.css

-Original file line number
+Diff line change
@@ -1 +1,6 @@
     @import 'tailwindcss';
+    @import '@nuxt/ui';
+    * {
+      font-family: Poppins, sans-serif;
+    }

app/components/Header/index.vue

-Original file line number
+Diff line change
@@ -0,0 +1,57 @@
+    <script setup>
+    import { dark, experimental__simple } from '@clerk/themes';
+    const colorMode = useColorMode();
+    </script>
+    <template>
+      <div class="flex justify-between items-center px-4 md:px-8 lg:px-28 py-4">
+        <UButton class="cursor-pointer" variant="ghost" :square="true" color="neutral" to="/">
+          <ClientOnly>
+            <NuxtImg
+              :src="colorMode.value === 'dark' ? '/lystra-logo-dark.svg' : '/lystra-logo-light.svg'"
+              alt="Lystra logo"
+              width="40"
+              height="40"
+              fit="contain"
+              background="transparent"
+            />
+            <template #fallback>
+              <NuxtImg
+                src="/lystra-logo-light.svg"
+                alt="Lystra logo"
+                width="40"
+                height="40"
+                fit="contain"
+                background="transparent"
+              />
+            </template>
+          </ClientOnly>
+          <h1 class="text-gray-900 dark:text-white text-lg font-bold">Lystra</h1>
+        </UButton>
+        <div class="flex items-center gap-1.5">
+          <UColorModeButton class="cursor-pointer">
+            <template #fallback>
+              <UButton loading variant="ghost" color="neutral" />
+            </template>
+          </UColorModeButton>
+          <SignedOut>
+            <SignInButton>
+              <UButton
+                class="cursor-pointer"
+                variant="ghost"
+                size="md"
+                icon="lucide:log-in"
+                :square="true"
+                color="neutral"
+              />
+            </SignInButton>
+          </SignedOut>
+          <SignedIn>
+            <UserButton
+              :appearance="{ baseTheme: colorMode.value === 'dark' ? dark : experimental__simple }"
+            />
+          </SignedIn>
+        </div>
+      </div>
+    </template>

app/layouts/default.vue

-Original file line number
+Diff line change
@@ -0,0 +1,6 @@
+    <template>
+      <div class="flex flex-col min-h-screen">
+        <Header />
+        <slot />
+      </div>
+    </template>

app/pages/index.vue

-Original file line number
+Diff line change
@@ -0,0 +1,3 @@
+    <template>
+      <div></div>
+    </template>

nuxt.config.ts

            
                      Original file line number
                      Diff line number
                      Diff line change
                  
    @@ -7,15 +7,25 @@ export default defineNuxtConfig({
  
      modules: [

        '@nuxt/ui',

        '@nuxt/fonts',

        '@nuxt/test-utils',

        '@nuxt/test-utils/module',

        '@nuxt/image',

        '@nuxt/eslint',

        '@pinia/nuxt',

        '@clerk/nuxt',

        ...(process.env.NODE_ENV !== 'test' ? ['@clerk/nuxt'] : []),

      ],

      css: ['~/assets/css/main.css'],

      vite: {

        plugins: [tailwindcss()],

      },

      app: {

        head: {

          htmlAttrs: {

            style: 'background-color: #0E172B;',

          },

        },

      },

    });

package.json

-Original file line number
+Diff line change
@@ Expand Up / @@ -12,13 +12,18 @@ @@
         "prettier:write": "prettier --write .",
         "lint": "eslint .",
         "lint:fix": "eslint . --fix",
+        "test:watch": "vitest --watch",
+        "test:e2e": "vitest --project e2e",
+        "test:unit": "vitest --project nuxt",
+        "test:all": "vitest run",
         "prepare": "husky"
       },
       "dependencies": {
         "@clerk/nuxt": "^1.9.3",
+        "@clerk/themes": "^2.4.24",
         "@nuxt/eslint": "1.9.0",
+        "@nuxt/fonts": "0.11.4",
         "@nuxt/image": "1.11.0",
-        "@nuxt/test-utils": "3.19.2",
         "@nuxt/ui": "4.0.0",
         "@pinia/nuxt": "0.11.2",
         "@tailwindcss/vite": "^4.1.14",
@@ Expand All / @@ -33,9 +38,14 @@ @@
       "devDependencies": {
         "@commitlint/cli": "^20.1.0",
         "@commitlint/config-conventional": "^20.0.0",
+        "@nuxt/test-utils": "3.19.2",
+        "@vue/test-utils": "^2.4.6",
+        "happy-dom": "^19.0.2",
         "husky": "^9.1.7",
         "lint-staged": "^16.2.3",
-        "prettier": "3.6.2"
+        "playwright-core": "^1.55.1",
+        "prettier": "3.6.2",
+        "vitest": "^3.2.4"
       },
       "lint-staged": {
         "*.{js,ts,vue}": [
@@ Expand Down @@

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: main page layout #17

Uh oh!

Diff view

Diff view

There are no files selected for viewing

Uh oh!