bam
/
my2
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Add internal styleguide page with HTTP Basic Auth 

- Create /internal/styleguide route with protected layout
- Add styleguide.vue layout with auth protection
- Configure internal pages auth credentials in .env.example
- Update nuxt.config for internal routes handling
main
Bastian Masanek 2 months ago
parent
a0121016b9
commit
e2e36ad7ae
4 changed files with 627 additions and 1 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 7
      .env.example
  2. 10
      app/layouts/styleguide.vue
  3. 605
      app/pages/internal/styleguide.vue
  4. 6
      nuxt.config.ts

7
.env.example
View File

@ -108,6 +108,13 @@ SMTP_FROM=noreply@experimenta.science
# SENTRY_DSN=https://xxx@sentry.io/xxx # SENTRY_DSN=https://xxx@sentry.io/xxx
# SENTRY_ENVIRONMENT=development # SENTRY_ENVIRONMENT=development
# ==============================================
# INTERNAL PAGES (Styleguide, Admin)
# ==============================================
# HTTP Basic Auth credentials for /internal/* routes
INTERNAL_AUTH_USERNAME=experimenta
INTERNAL_AUTH_PASSWORD=change-me-to-secure-password
# ============================================== # ==============================================
# DEVELOPMENT TOOLS # DEVELOPMENT TOOLS
# ============================================== # ==============================================

10
app/layouts/styleguide.vue
View File

@ -0,0 +1,10 @@
<script setup lang="ts">
// Styleguide layout - minimal, no header/footer
// Used for internal styleguide page
</script>
<template>
<div class="min-h-screen">
<slot />
</div>
</template>

605
app/pages/internal/styleguide.vue
View File

@ -0,0 +1,605 @@
<script setup lang="ts">
/**
* experimenta Design System Styleguide
* Internal page showing all design tokens and components
* Protected by Basic Auth via server/middleware/internal-auth.ts
*/
definePageMeta({
layout: 'styleguide',
})
// Sample button click handler for interactive examples
const handleClick = () => {
console.log('Button clicked!')
}
// Copy code snippet to clipboard
const copyCode = async (code: string) => {
try {
await navigator.clipboard.writeText(code)
alert('Code copied to clipboard!')
} catch (err) {
console.error('Failed to copy:', err)
}
}
</script>
<template>
<div class="min-h-screen py-12 px-4 sm:px-6 lg:px-8">
<div class="max-w-7xl mx-auto">
<!-- Header -->
<header class="mb-12">
<h1 class="text-5xl font-bold mb-4 text-experimenta-primary">my.experimenta Design System</h1>
<p class="text-xl text-white/90 mb-6">
Component library and design tokens for my.experimenta.science
</p>
<div class="flex gap-4">
<a href="/" class="link-accent">← Back to Homepage</a>
</div>
</header>
<!-- Table of Contents -->
<nav class="card-glass mb-12">
<h2 class="text-2xl font-semibold mb-4">Contents</h2>
<ul class="grid grid-cols-2 md:grid-cols-4 gap-4 text-white/90">
<li><a href="#overview" class="link-primary">Overview</a></li>
<li><a href="#colors" class="link-primary">Colors</a></li>
<li><a href="#typography" class="link-primary">Typography</a></li>
<li><a href="#buttons" class="link-primary">Buttons</a></li>
<li><a href="#cards" class="link-primary">Cards</a></li>
<li><a href="#forms" class="link-primary">Forms</a></li>
<li><a href="#links" class="link-primary">Links</a></li>
<li><a href="#status" class="link-primary">Status Messages</a></li>
<li><a href="#progress" class="link-primary">Progress Bars</a></li>
<li><a href="#components" class="link-primary">Components</a></li>
</ul>
</nav>
<!-- Overview Section -->
<section id="overview" class="mb-16">
<h2 class="text-4xl font-bold mb-6 text-experimenta-accent">Overview</h2>
<div class="card-info card-accent-border">
<h3 class="text-xl font-semibold mb-4">Design Principles</h3>
<ul class="list-disc list-inside space-y-2 text-white/90">
<li><strong>Mobile-First:</strong> All components optimized for mobile, then scaled up</li>
<li><strong>Accessibility:</strong> WCAG 2.1 AA compliance, keyboard navigation</li>
<li><strong>Brand Consistency:</strong> experimenta color palette and typography</li>
<li><strong>8px Grid:</strong> Spacing system based on 8px increments</li>
<li><strong>Dark Theme:</strong> Purple gradient background with high contrast text</li>
</ul>
</div>
</section>
<!-- Colors Section -->
<section id="colors" class="mb-16">
<h2 class="text-4xl font-bold mb-6 text-experimenta-accent">Colors</h2>
<!-- Primary Colors -->
<div class="card-glass mb-8">
<h3 class="text-2xl font-semibold mb-4 text-white">Primary Colors</h3>
<div class="grid grid-cols-2 md:grid-cols-4 gap-4">
<div>
<div class="h-24 rounded-lg bg-experimenta-primary mb-2"></div>
<p class="font-mono text-sm text-white/90">#e6007e</p>
<p class="text-sm text-white/70">experimenta-primary</p>
</div>
<div>
<div class="h-24 rounded-lg bg-experimenta-accent mb-2"></div>
<p class="font-mono text-sm text-white/90">#f59d24</p>
<p class="text-sm text-white/70">experimenta-accent</p>
</div>
<div>
<div class="h-24 rounded-lg bg-experimenta-red mb-2"></div>
<p class="font-mono text-sm text-white/90">#e40521</p>
<p class="text-sm text-white/70">experimenta-red</p>
</div>
<div>
<div class="h-24 rounded-lg bg-white mb-2"></div>
<p class="font-mono text-sm text-black">#ffffff</p>
<p class="text-sm text-white/70">white</p>
</div>
</div>
</div>
<!-- Background Colors -->
<div class="card-glass mb-8">
<h3 class="text-2xl font-semibold mb-4 text-white">Background Colors (Purple Gradient)</h3>
<div class="grid grid-cols-2 md:grid-cols-3 gap-4">
<div>
<div class="h-24 rounded-lg bg-purple-950 mb-2 border border-white/20"></div>
<p class="font-mono text-sm text-white/90">#2e1065</p>
<p class="text-sm text-white/70">purple-950</p>
</div>
<div>
<div class="h-24 rounded-lg bg-purple-975 mb-2 border border-white/20"></div>
<p class="font-mono text-sm text-white/90">#1a0a3a</p>
<p class="text-sm text-white/70">purple-975</p>
</div>
<div>
<div class="h-24 rounded-lg bg-purple-990 mb-2 border border-white/20"></div>
<p class="font-mono text-sm text-white/90">#0f051d</p>
<p class="text-sm text-white/70">purple-990</p>
</div>
</div>
</div>
<!-- Semantic Colors -->
<div class="card-glass">
<h3 class="text-2xl font-semibold mb-4 text-white">Semantic Colors</h3>
<div class="grid grid-cols-2 md:grid-cols-4 gap-4">
<div>
<div class="h-24 rounded-lg bg-success mb-2"></div>
<p class="font-mono text-sm text-white/90">#10b981</p>
<p class="text-sm text-white/70">success</p>
</div>
<div>
<div class="h-24 rounded-lg bg-warning mb-2"></div>
<p class="font-mono text-sm text-white/90">#f59e0b</p>
<p class="text-sm text-white/70">warning</p>
</div>
<div>
<div class="h-24 rounded-lg bg-error mb-2"></div>
<p class="font-mono text-sm text-white/90">#ef4444</p>
<p class="text-sm text-white/70">error</p>
</div>
<div>
<div class="h-24 rounded-lg bg-info mb-2"></div>
<p class="font-mono text-sm text-white/90">#3b82f6</p>
<p class="text-sm text-white/70">info</p>
</div>
</div>
</div>
</section>
<!-- Typography Section -->
<section id="typography" class="mb-16">
<h2 class="text-4xl font-bold mb-6 text-experimenta-accent">Typography</h2>
<div class="card-glass mb-8">
<h3 class="text-2xl font-semibold mb-4 text-white">Font Family</h3>
<p class="text-lg text-white/90 mb-2">
<strong>Roboto Variable Font</strong> - Locally hosted, weights 100-900
</p>
<p class="text-white/70">
Loaded from <code class="font-mono bg-white/10 px-2 py-1 rounded">/public/fonts/roboto/</code>
</p>
</div>
<div class="card-glass mb-8">
<h3 class="text-2xl font-semibold mb-4 text-white">Headings</h3>
<div class="space-y-4">
<div>
<h1 class="text-4xl font-bold">Heading 1 - 4xl Bold</h1>
<code class="text-sm text-white/70">text-4xl font-bold</code>
</div>
<div>
<h2 class="text-3xl font-bold">Heading 2 - 3xl Bold</h2>
<code class="text-sm text-white/70">text-3xl font-bold</code>
</div>
<div>
<h3 class="text-2xl font-semibold">Heading 3 - 2xl Semibold</h3>
<code class="text-sm text-white/70">text-2xl font-semibold</code>
</div>
<div>
<h4 class="text-xl font-semibold">Heading 4 - xl Semibold</h4>
<code class="text-sm text-white/70">text-xl font-semibold</code>
</div>
</div>
</div>
<div class="card-glass">
<h3 class="text-2xl font-semibold mb-4 text-white">Body Text</h3>
<div class="space-y-4">
<div>
<p class="text-lg">Body Large - text-lg (1.125rem / 18px)</p>
<code class="text-sm text-white/70">text-lg</code>
</div>
<div>
<p class="text-base">Body Regular - text-base (1rem / 16px)</p>
<code class="text-sm text-white/70">text-base</code>
</div>
<div>
<p class="text-sm">Body Small - text-sm (0.875rem / 14px)</p>
<code class="text-sm text-white/70">text-sm</code>
</div>
<div>
<p class="text-xs">Body Extra Small - text-xs (0.75rem / 12px)</p>
<code class="text-sm text-white/70">text-xs</code>
</div>
</div>
</div>
</section>
<!-- Buttons Section -->
<section id="buttons" class="mb-16">
<h2 class="text-4xl font-bold mb-6 text-experimenta-accent">Buttons</h2>
<!-- experimenta Button -->
<div class="card-glass mb-8">
<h3 class="text-2xl font-semibold mb-4 text-white">experimenta Button (Official)</h3>
<p class="mb-6 text-white/90">
The official experimenta button with animated gradient effect (pink to red on hover).
</p>
<div class="flex flex-wrap gap-4 items-center mb-6">
<UiButton variant="experimenta" size="experimenta" @click="handleClick">
experimenta Button
</UiButton>
<UiButton variant="experimenta" size="experimenta" as="a" href="https://www.experimenta.science/">
As Link
</UiButton>
</div>
<details class="bg-white/5 p-4 rounded-lg">
<summary class="cursor-pointer text-white/90 font-semibold">Show Code</summary>
<pre class="mt-4 text-sm text-white/80 overflow-x-auto"><code>&lt;UiButton variant="experimenta" size="experimenta" @click="handleClick"&gt;
experimenta Button
&lt;/UiButton&gt;</code></pre>
</details>
</div>
<!-- shadcn-nuxt Button Variants -->
<div class="card-glass">
<h3 class="text-2xl font-semibold mb-4 text-white">shadcn-nuxt Button Variants</h3>
<p class="mb-6 text-white/90">All button variants from shadcn-nuxt component library:</p>
<div class="flex flex-wrap gap-4 mb-6">
<UiButton variant="default" @click="handleClick">Default</UiButton>
<UiButton variant="destructive" @click="handleClick">Destructive</UiButton>
<UiButton variant="outline" @click="handleClick">Outline</UiButton>
<UiButton variant="secondary" @click="handleClick">Secondary</UiButton>
<UiButton variant="ghost" @click="handleClick">Ghost</UiButton>
<UiButton variant="link" @click="handleClick">Link</UiButton>
</div>
<details class="bg-white/5 p-4 rounded-lg">
<summary class="cursor-pointer text-white/90 font-semibold">Show Code</summary>
<pre class="mt-4 text-sm text-white/80 overflow-x-auto"><code>&lt;UiButton variant="default"&gt;Default&lt;/UiButton&gt;
&lt;UiButton variant="destructive"&gt;Destructive&lt;/UiButton&gt;
&lt;UiButton variant="outline"&gt;Outline&lt;/UiButton&gt;
&lt;UiButton variant="secondary"&gt;Secondary&lt;/UiButton&gt;
&lt;UiButton variant="ghost"&gt;Ghost&lt;/UiButton&gt;
&lt;UiButton variant="link"&gt;Link&lt;/UiButton&gt;</code></pre>
</details>
</div>
</section>
<!-- Cards Section -->
<section id="cards" class="mb-16">
<h2 class="text-4xl font-bold mb-6 text-experimenta-accent">Cards</h2>
<!-- Glass Card -->
<div class="card-glass mb-8">
<h3 class="text-2xl font-semibold mb-4 text-white">Glass Card (.card-glass)</h3>
<p class="text-white/90">
Semi-transparent card with glassmorphism effect. Perfect for content containers.
</p>
</div>
<!-- Info Card -->
<div class="card-info card-accent-border mb-8">
<h3 class="text-xl font-semibold mb-2 text-experimenta-accent">Info Card (.card-info .card-accent-border)</h3>
<p>Info section with Safrangold left border accent. Used for notices and information blocks.</p>
</div>
<!-- Progress Card -->
<div class="card-progress card-accent-border mb-8">
<div class="progress-header">
<h3 class="progress-title">Progress Card (.card-progress)</h3>
<div class="progress-stats">2963 / 4931</div>
</div>
<div class="progress-bar-wrapper">
<div class="progress-bar" style="width: 60.1%"></div>
<div class="progress-percentage">60.1%</div>
</div>
</div>
<!-- White Info Cards (like experimenta.science) -->
<div class="mb-8">
<h3 class="text-2xl font-semibold mb-6 text-white">White Info Cards (.card-white)</h3>
<p class="text-white/90 mb-6">
White content cards like on experimenta.science homepage. With pink links that have chevron arrows and hover
to orange.
</p>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="card-white">
<h3>Öffnungszeiten</h3>
<p>
Du möchtest nur in unsere Ausstellung, den Science Dome oder in die Sonderausstellung?
Oder doch lieber alles erleben? Weisst aber nicht wann? Hier findest du eine Übersicht
über unsere Öffnungszeiten.
</p>
<a href="#">Unsere Öffnungszeiten</a>
</div>
<div class="card-white">
<h3>Preise</h3>
<p>
Hier findest du einen Überblick über alle unsere Tickets, Preise und Ermäßigungen.
Wir haben verschiedene Angebote für dich – je nach dem, wie oft du zu uns kommen und
was du erleben möchtest.
</p>
<a href="#">Zur Preisübersicht</a>
</div>
<div class="card-white">
<h3>Ticketshop</h3>
<p>
Du hast dich für ein Ticket entschieden? Dann kannst du es hier buchen.
Wir freuen uns auf deinen Besuch!
</p>
<a href="#">Jetzt Ticket kaufen</a>
</div>
<div class="card-white">
<h3>Anfahrt</h3>
<p>
Ob mit dem Auto, dem Zug, dem Reisebus oder der Stadtbahn: Es gibt viele Möglichkeiten
zu uns zu kommen. Hier haben wir für dich alle Informationen zur Anreise zusammengestellt.
</p>
<a href="#">Zur Anreise</a>
</div>
</div>
</div>
<details class="bg-white/5 p-4 rounded-lg card-glass">
<summary class="cursor-pointer text-white/90 font-semibold">Show Code</summary>
<pre class="mt-4 text-sm text-white/80 overflow-x-auto"><code>&lt;!-- Glass Card --&gt;
&lt;div class="card-glass"&gt;
&lt;h3&gt;Title&lt;/h3&gt;
&lt;p&gt;Content&lt;/p&gt;
&lt;/div&gt;
&lt;!-- Info Card with Accent Border --&gt;
&lt;div class="card-info card-accent-border"&gt;
&lt;h3&gt;Title&lt;/h3&gt;
&lt;p&gt;Content&lt;/p&gt;
&lt;/div&gt;
&lt;!-- Progress Card --&gt;
&lt;div class="card-progress card-accent-border"&gt;
&lt;div class="progress-header"&gt;
&lt;h3 class="progress-title"&gt;Title&lt;/h3&gt;
&lt;div class="progress-stats"&gt;2963 / 4931&lt;/div&gt;
&lt;/div&gt;
&lt;div class="progress-bar-wrapper"&gt;
&lt;div class="progress-bar" style="width: 60.1%"&gt;&lt;/div&gt;
&lt;div class="progress-percentage"&gt;60.1%&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;!-- White Info Card --&gt;
&lt;div class="card-white"&gt;
&lt;h3&gt;Card Title&lt;/h3&gt;
&lt;p&gt;
Card description text goes here. Links automatically get
pink color with chevron arrow and hover to orange.
&lt;/p&gt;
&lt;a href="#"&gt;Link Text&lt;/a&gt;
&lt;/div&gt;</code></pre>
</details>
</section>
<!-- Forms Section -->
<section id="forms" class="mb-16">
<h2 class="text-4xl font-bold mb-6 text-experimenta-accent">Forms</h2>
<div class="card-glass">
<h3 class="text-2xl font-semibold mb-6 text-white">Form Elements</h3>
<div class="space-y-6">
<!-- Text Input -->
<div>
<label class="form-label">Text Input (.form-input)</label>
<input type="text" class="form-input" placeholder="Enter text..." />
</div>
<!-- Email Input -->
<div>
<label class="form-label">Email Input</label>
<input type="email" class="form-input" placeholder="email@example.com" />
</div>
<!-- Textarea -->
<div>
<label class="form-label">Textarea</label>
<textarea class="form-input" rows="4" placeholder="Enter message..."></textarea>
</div>
<!-- Checkbox -->
<div>
<label class="flex items-center gap-3">
<input type="checkbox" class="form-checkbox" checked />
<span class="text-white/90">Checkbox (.form-checkbox)</span>
</label>
</div>
<!-- Radio Buttons -->
<div>
<label class="form-label">Radio Buttons</label>
<div class="flex gap-4">
<label class="flex items-center gap-2">
<input type="radio" name="demo" class="form-checkbox" checked />
<span class="text-white/90">Option 1</span>
</label>
<label class="flex items-center gap-2">
<input type="radio" name="demo" class="form-checkbox" />
<span class="text-white/90">Option 2</span>
</label>
</div>
</div>
</div>
<details class="bg-white/5 p-4 rounded-lg mt-6">
<summary class="cursor-pointer text-white/90 font-semibold">Show Code</summary>
<pre class="mt-4 text-sm text-white/80 overflow-x-auto"><code>&lt;label class="form-label"&gt;Text Input&lt;/label&gt;
&lt;input type="text" class="form-input" placeholder="Enter text..." /&gt;
&lt;label class="flex items-center gap-3"&gt;
&lt;input type="checkbox" class="form-checkbox" /&gt;
&lt;span&gt;Checkbox Label&lt;/span&gt;
&lt;/label&gt;</code></pre>
</details>
</div>
</section>
<!-- Links Section -->
<section id="links" class="mb-16">
<h2 class="text-4xl font-bold mb-6 text-experimenta-accent">Links</h2>
<div class="card-glass">
<h3 class="text-2xl font-semibold mb-6 text-white">Link Styles</h3>
<div class="space-y-4">
<div>
<a href="#" class="link-primary">Primary Link (.link-primary)</a>
<p class="text-sm text-white/70 mt-1">Orange color, used for general navigation (WCAG AA compliant, 4.62:1
contrast)</p>
</div>
<div>
<a href="#" class="link-accent">Accent Link (.link-accent)</a>
<p class="text-sm text-white/70 mt-1">Orange color, used for emphasis</p>
</div>
</div>
<details class="bg-white/5 p-4 rounded-lg mt-6">
<summary class="cursor-pointer text-white/90 font-semibold">Show Code</summary>
<pre class="mt-4 text-sm text-white/80 overflow-x-auto"><code>&lt;a href="#" class="link-primary"&gt;Primary Link&lt;/a&gt;
&lt;a href="#" class="link-accent"&gt;Accent Link&lt;/a&gt;</code></pre>
</details>
</div>
</section>
<!-- Status Messages Section -->
<section id="status" class="mb-16">
<h2 class="text-4xl font-bold mb-6 text-experimenta-accent">Status Messages</h2>
<div class="card-glass">
<h3 class="text-2xl font-semibold mb-6 text-white">Status Indicators</h3>
<div class="space-y-4">
<div class="status-message status-success">
<span class="status-icon">✓</span>
<span>Success message</span>
</div>
<div class="status-message status-warning">
<span class="status-icon">⚠</span>
<span>Warning message</span>
</div>
<div class="status-message status-error">
<span class="status-icon">✕</span>
<span>Error message</span>
</div>
<div class="status-message status-info">
<span class="status-icon">ⓘ</span>
<span>Info message</span>
</div>
</div>
<details class="bg-white/5 p-4 rounded-lg mt-6">
<summary class="cursor-pointer text-white/90 font-semibold">Show Code</summary>
<pre class="mt-4 text-sm text-white/80 overflow-x-auto"><code>&lt;div class="status-message status-success"&gt;
&lt;span class="status-icon"&gt;✓&lt;/span&gt;
&lt;span&gt;Success message&lt;/span&gt;
&lt;/div&gt;</code></pre>
</details>
</div>
</section>
<!-- Progress Bars Section -->
<section id="progress" class="mb-16">
<h2 class="text-4xl font-bold mb-6 text-experimenta-accent">Progress Bars</h2>
<div class="card-glass">
<h3 class="text-2xl font-semibold mb-6 text-white">Progress Indicators</h3>
<div class="space-y-6">
<div>
<p class="text-sm text-white/90 mb-2">25% Progress</p>
<div class="progress-bar-wrapper">
<div class="progress-bar" style="width: 25%"></div>
</div>
</div>
<div>
<p class="text-sm text-white/90 mb-2">50% Progress</p>
<div class="progress-bar-wrapper">
<div class="progress-bar" style="width: 50%"></div>
</div>
</div>
<div>
<p class="text-sm text-white/90 mb-2">75% Progress</p>
<div class="progress-bar-wrapper">
<div class="progress-bar" style="width: 75%"></div>
</div>
</div>
<div>
<p class="text-sm text-white/90 mb-2">100% Progress</p>
<div class="progress-bar-wrapper">
<div class="progress-bar" style="width: 100%"></div>
</div>
</div>
</div>
<details class="bg-white/5 p-4 rounded-lg mt-6">
<summary class="cursor-pointer text-white/90 font-semibold">Show Code</summary>
<pre class="mt-4 text-sm text-white/80 overflow-x-auto"><code>&lt;div class="progress-bar-wrapper"&gt;
&lt;div class="progress-bar" style="width: 60%"&gt;&lt;/div&gt;
&lt;/div&gt;</code></pre>
</details>
</div>
</section>
<!-- Components Section -->
<section id="components" class="mb-16">
<h2 class="text-4xl font-bold mb-6 text-experimenta-accent">Components</h2>
<div class="card-info card-accent-border">
<h3 class="text-xl font-semibold mb-2 text-experimenta-accent">Available Components</h3>
<ul class="list-disc list-inside space-y-2 text-white/90">
<li><strong>CommonHeader</strong> - Main navigation header with experimenta logo</li>
<li><strong>CommonFooter</strong> - Footer with 4-column grid (links, contact, legal, social)</li>
<li><strong>UiButton</strong> - shadcn-nuxt Button component with 7 variants</li>
</ul>
<p class="mt-4 text-sm text-white/70">
See individual component files in <code
class="font-mono bg-white/10 px-2 py-1 rounded">/app/components/</code>
</p>
</div>
</section>
<!-- Footer -->
<footer class="mt-16 pt-8 border-t border-white/20 text-center text-white/70">
<p>my.experimenta Design System &copy; 2025</p>
<p class="text-sm mt-2">
For questions or updates, see
<a href="/docs/DESIGN_SYSTEM.md" class="link-primary" target="_blank">DESIGN_SYSTEM.md</a>
</p>
</footer>
</div>
</div>
</template>
<style scoped>
/* Additional scoped styles for styleguide page */
details summary {
transition: opacity 0.2s;
}
details summary:hover {
opacity: 0.8;
}
details[open] summary {
margin-bottom: 1rem;
}
</style>

6
nuxt.config.ts
View File

@ -2,7 +2,9 @@
export default defineNuxtConfig({ export default defineNuxtConfig({
compatibilityDate: '2025-01-29', compatibilityDate: '2025-01-29',
devtools: { enabled: true }, devtools: {
enabled: ['true', '1'].includes(process.env.NUXT_DEVTOOLS_ENABLED || ''),
},
// App configuration // App configuration
app: { app: {
@ -36,6 +38,8 @@ export default defineNuxtConfig({
databaseUrl: process.env.DATABASE_URL, databaseUrl: process.env.DATABASE_URL,
redisHost: process.env.REDIS_HOST || 'localhost', redisHost: process.env.REDIS_HOST || 'localhost',
redisPort: process.env.REDIS_PORT || '6379', redisPort: process.env.REDIS_PORT || '6379',
internalAuthUsername: process.env.INTERNAL_AUTH_USERNAME || '',
internalAuthPassword: process.env.INTERNAL_AUTH_PASSWORD || '',
// Public (exposed to client) // Public (exposed to client)
public: { public: {

Write Preview
Loading…
Cancel
Save