diff --git a/check-links.js b/check-links.js index 34a3a17..793c1bb 100644 --- a/check-links.js +++ b/check-links.js @@ -6,6 +6,32 @@ import fetch from 'node-fetch'; const __dirname = path.dirname(fileURLToPath(import.meta.url)); +// URLs to ignore during external link checking +const IGNORED_URLS = [ + 'https://deploystack.io', + 'https://deploystack.io/*', + 'https://cloud.deploystack.io' +]; + +// Check if a URL should be ignored +const shouldIgnoreUrl = (url) => { + for (const pattern of IGNORED_URLS) { + if (pattern.endsWith('/*')) { + // Handle wildcard patterns + const baseUrl = pattern.slice(0, -2); // Remove /* + if (url === baseUrl || url.startsWith(baseUrl + '/')) { + return true; + } + } else { + // Handle exact matches + if (url === pattern) { + return true; + } + } + } + return false; +}; + // Read a markdown file and extract all markdown links const extractLinks = (content) => { const linkRegex = /\[([^\]]+)\]\(([^)]+)\)/g; @@ -82,6 +108,12 @@ const checkExternalUrl = async (url) => { return true; } + // Check if URL should be ignored + if (shouldIgnoreUrl(url)) { + console.log(` ➡️ ${url} (ignored)`); + return true; + } + try { const response = await fetch(url, { method: 'HEAD', diff --git a/docs/development/frontend/index.mdx b/docs/development/frontend/index.mdx index a0ca6f6..7a2bcdb 100644 --- a/docs/development/frontend/index.mdx +++ b/docs/development/frontend/index.mdx @@ -74,6 +74,17 @@ For table-specific implementations, refer to the [Table Design System](/developm The frontend uses **TailwindCSS** for styling with **shadcn-vue** component library for consistent UI elements. For comprehensive styling guidelines, component patterns, and design standards, see the [UI Design System](/development/frontend/ui-design-system) documentation. +### ⚠️ **Mandatory Design Patterns** + +All structured information displays must follow the **[Structured Data Display Pattern](/development/frontend/ui-design-system-structured-data)**. This includes: +- User profiles and settings +- Form layouts +- Configuration displays +- Installation details +- Any information presented in label-value pairs + +This pattern ensures visual consistency across the entire application. + ## Environment Configuration The frontend uses a sophisticated environment variable system that works seamlessly across development and production environments. For complete details on configuring and using environment variables, see the dedicated [Environment Variables Guide](/development/frontend/environment-variables). @@ -115,6 +126,7 @@ Continue reading the detailed guides: - [Frontend Architecture](/development/frontend/architecture) - Application architecture, patterns, and development principles - [UI Design System](/development/frontend/ui-design-system) - Component patterns, styling guidelines, and design standards +- **[Structured Data Display Pattern](/development/frontend/ui-design-system-structured-data)** - **Mandatory pattern** for consistent information display - [Environment Variables](/development/frontend/environment-variables) - Complete environment configuration guide - [Global Event Bus](/development/frontend/event-bus) - Cross-component communication system - [Internationalization (i18n)](/development/frontend/internationalization) - Multi-language support diff --git a/docs/development/frontend/ui-design-system-structured-data.mdx b/docs/development/frontend/ui-design-system-structured-data.mdx new file mode 100644 index 0000000..e3f0c86 --- /dev/null +++ b/docs/development/frontend/ui-design-system-structured-data.mdx @@ -0,0 +1,490 @@ +--- +title: Structured Data Display Pattern +description: Mandatory design pattern for displaying structured information consistently throughout the DeployStack frontend using description lists. +sidebar: Structured Data +--- + +# Structured Data Display Pattern + +This document establishes the **mandatory pattern** for displaying structured information throughout the DeployStack frontend. All structured data displays - whether read-only information or form layouts - must follow this consistent description list pattern. + +## Design Principle + +**Every piece of structured information must use the same visual pattern**: label on the left, content on the right, with consistent spacing and typography. + +This creates a cohesive, professional appearance across the entire application and eliminates visual inconsistency between different pages and components. + +## The Mandatory Pattern + +All structured data displays must use this HTML structure: + +```html +
+

Section Title

+

Section description

+
+ +
+
+
+
Field Label
+
+ Field Content +
+
+
+
+``` + +### Pattern Components + +| Element | Classes | Purpose | +|---------|---------|---------| +| `
` | `text-sm/6 font-medium text-gray-900` | Field label (left column) | +| `
` | `mt-1 text-sm/6 text-gray-700 sm:col-span-2 sm:mt-0` | Field content (right column) | +| Container | `px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0` | Responsive grid layout | +| List | `divide-y divide-gray-100` | Visual separation between fields | + +## When to Use This Pattern + +### ✅ **Required For** +- User profile information +- Server configuration details +- Installation information +- Settings pages +- Form layouts +- Team management displays +- Any structured data presentation + +### ❌ **Not Required For** +- Simple text content +- Marketing pages +- Dashboard cards (unless showing structured data) +- Navigation elements +- Alerts and notifications + +## Implementation Examples + +### Read-Only Information Display + +```html + +``` + +### Form Input Layout + +```html +