Nuša Pukšič
5 months ago
committed by
buttercat1791
26 changed files with 2766 additions and 125 deletions
@ -1,12 +1,29 @@
@@ -1,12 +1,29 @@
|
||||
export { default as AThemeToggleMini } from "./primitives/AThemeToggleMini.svelte"; |
||||
// Alexandria Component Library - Main Export File
|
||||
|
||||
// Primitive Components
|
||||
export { default as AAlert } from "./primitives/AAlert.svelte"; |
||||
export { default as ADetails } from "./primitives/ADetails.svelte"; |
||||
export { default as AInput } from "./primitives/AInput.svelte"; |
||||
export { default as ANostrBadge } from "./primitives/ANostrBadge.svelte"; |
||||
export { default as ANostrBadgeRow } from "./primitives/ANostrBadgeRow.svelte"; |
||||
export { default as ANostrUser } from "./primitives/ANostrUser.svelte"; |
||||
export { default as APagination } from "./primitives/APagination.svelte"; |
||||
export { default as AThemeToggleMini } from "./primitives/AThemeToggleMini.svelte"; |
||||
|
||||
// Navigation Components
|
||||
export { default as ANavbar } from "./nav/ANavbar.svelte"; |
||||
export { default as AFooter } from "./nav/AFooter.svelte"; |
||||
|
||||
// Form Components
|
||||
export { default as ACommentForm } from "./forms/ACommentForm.svelte"; |
||||
export { default as AMarkupForm } from "./forms/AMarkupForm.svelte"; |
||||
export { default as ASearchForm } from "./forms/ASearchForm.svelte"; |
||||
export { default as ATextareaWithPreview } from "./forms/ATextareaWithPreview.svelte"; |
||||
|
||||
// Card Components
|
||||
export { default as AEventPreview } from "./cards/AEventPreview.svelte"; |
||||
export { default as AProfilePreview } from "./cards/AProfilePreview.svelte"; |
||||
|
||||
// Reader Components
|
||||
export { default as ATechBlock } from "./reader/ATechBlock.svelte"; |
||||
export { default as ATechToggle } from "./reader/ATechToggle.svelte"; |
||||
|
||||
@ -0,0 +1,368 @@
@@ -0,0 +1,368 @@
|
||||
#!/usr/bin/env node
|
||||
|
||||
import fs from 'fs'; |
||||
import path from 'path'; |
||||
import { fileURLToPath } from 'url'; |
||||
|
||||
const __filename = fileURLToPath(import.meta.url); |
||||
const __dirname = path.dirname(__filename); |
||||
|
||||
/** |
||||
* @typedef {Object} PropDefinition |
||||
* @property {string} name |
||||
* @property {string[]} type |
||||
* @property {string | null | undefined} default |
||||
* @property {string} description |
||||
* @property {boolean} required |
||||
*/ |
||||
|
||||
/** |
||||
* @typedef {Object} ExampleDefinition |
||||
* @property {string} name |
||||
* @property {string} code |
||||
*/ |
||||
|
||||
/** |
||||
* @typedef {Object} ComponentDefinition |
||||
* @property {string} name |
||||
* @property {string} description |
||||
* @property {string} category |
||||
* @property {PropDefinition[]} props |
||||
* @property {string[]} events |
||||
* @property {string[]} slots |
||||
* @property {ExampleDefinition[]} examples |
||||
* @property {string[]} features |
||||
* @property {string[]} accessibility |
||||
* @property {string} since |
||||
*/ |
||||
|
||||
/** |
||||
* Parse TSDoc comments from Svelte component files |
||||
*/ |
||||
class ComponentParser { |
||||
constructor() { |
||||
/** @type {ComponentDefinition[]} */ |
||||
this.components = []; |
||||
} |
||||
|
||||
/** |
||||
* Extract TSDoc block from script content |
||||
* @param {string} content |
||||
* @returns {string | null} |
||||
*/ |
||||
extractTSDoc(content) { |
||||
const scriptMatch = content.match(/<script[^>]*>([\s\S]*?)<\/script>/); |
||||
if (!scriptMatch) return null; |
||||
|
||||
const scriptContent = scriptMatch[1]; |
||||
const tsDocMatch = scriptContent.match(/\/\*\*\s*([\s\S]*?)\*\//); |
||||
if (!tsDocMatch) return null; |
||||
|
||||
return tsDocMatch[1]; |
||||
} |
||||
|
||||
/** |
||||
* Parse TSDoc content into structured data |
||||
* @param {string} tsDocContent |
||||
* @returns {ComponentDefinition} |
||||
*/ |
||||
parseTSDoc(tsDocContent) { |
||||
const lines = tsDocContent |
||||
.split("\n") |
||||
.map((line) => line.replace(/^\s*\*\s?/, "").trim()); |
||||
|
||||
/** @type {ComponentDefinition} */ |
||||
const component = { |
||||
name: "", |
||||
description: "", |
||||
category: "", |
||||
props: [], |
||||
events: [], |
||||
slots: [], |
||||
examples: [], |
||||
features: [], |
||||
accessibility: [], |
||||
since: "1.0.0", // Default version
|
||||
}; |
||||
|
||||
let currentSection = "description"; |
||||
let currentExample = ""; |
||||
let inCodeBlock = false; |
||||
|
||||
for (let i = 0; i < lines.length; i++) { |
||||
const line = lines[i]; |
||||
|
||||
// Skip empty lines
|
||||
if (!line) continue; |
||||
|
||||
// Handle @tags
|
||||
if (line.startsWith("@fileoverview")) { |
||||
const nameMatch = line.match(/@fileoverview\s+(\w+)\s+Component/); |
||||
if (nameMatch) { |
||||
component.name = nameMatch[1]; |
||||
} |
||||
const descMatch = lines |
||||
.slice(i + 1) |
||||
.find((l) => l && !l.startsWith("@")) |
||||
?.trim(); |
||||
if (descMatch) { |
||||
component.description = descMatch; |
||||
} |
||||
continue; |
||||
} |
||||
|
||||
if (line.startsWith("@category")) { |
||||
component.category = line.replace("@category", "").trim(); |
||||
continue; |
||||
} |
||||
|
||||
if (line.startsWith("@prop")) { |
||||
const prop = this.parseProp(line); |
||||
if (prop) component.props.push(prop); |
||||
continue; |
||||
} |
||||
|
||||
if (line.startsWith("@example")) { |
||||
currentSection = "example"; |
||||
currentExample = line.replace("@example", "").trim(); |
||||
if (currentExample) { |
||||
currentExample += "\n"; |
||||
} |
||||
continue; |
||||
} |
||||
|
||||
if (line.startsWith("@features")) { |
||||
currentSection = "features"; |
||||
continue; |
||||
} |
||||
|
||||
if (line.startsWith("@accessibility")) { |
||||
currentSection = "accessibility"; |
||||
continue; |
||||
} |
||||
|
||||
if (line.startsWith("@since")) { |
||||
component.since = line.replace("@since", "").trim(); |
||||
continue; |
||||
} |
||||
|
||||
// Handle content based on current section
|
||||
if (currentSection === "example") { |
||||
if (line === "```svelte" || line === "```") { |
||||
inCodeBlock = !inCodeBlock; |
||||
if (!inCodeBlock && currentExample.trim()) { |
||||
component.examples.push({ |
||||
name: currentExample.split("\n")[0] || "Example", |
||||
code: currentExample.trim(), |
||||
}); |
||||
currentExample = ""; |
||||
} |
||||
continue; |
||||
} |
||||
if (inCodeBlock) { |
||||
currentExample += line + "\n"; |
||||
} else if (line.startsWith("@")) { |
||||
// New section started
|
||||
i--; // Reprocess this line
|
||||
currentSection = "description"; |
||||
} else if (line && !line.startsWith("```")) { |
||||
currentExample = line + "\n"; |
||||
} |
||||
continue; |
||||
} |
||||
|
||||
if (currentSection === "features" && line.startsWith("-")) { |
||||
component.features.push(line.substring(1).trim()); |
||||
continue; |
||||
} |
||||
|
||||
if (currentSection === "accessibility" && line.startsWith("-")) { |
||||
component.accessibility.push(line.substring(1).trim()); |
||||
} |
||||
} |
||||
|
||||
return component; |
||||
} |
||||
|
||||
/** |
||||
* Parse a @prop line into structured prop data |
||||
* @param {string} propLine |
||||
* @returns {PropDefinition | null} |
||||
*/ |
||||
parseProp(propLine) { |
||||
// First, extract the type by finding balanced braces
|
||||
const propMatch = propLine.match(/@prop\s+\{/); |
||||
if (!propMatch || propMatch.index === undefined) return null; |
||||
|
||||
// Find the closing brace for the type
|
||||
let braceCount = 1; |
||||
let typeEndIndex = propMatch.index + propMatch[0].length; |
||||
const lineAfterType = propLine.substring(typeEndIndex); |
||||
|
||||
for (let i = 0; i < lineAfterType.length; i++) { |
||||
if (lineAfterType[i] === "{") braceCount++; |
||||
if (lineAfterType[i] === "}") braceCount--; |
||||
if (braceCount === 0) { |
||||
typeEndIndex += i; |
||||
break; |
||||
} |
||||
} |
||||
|
||||
const typeStr = propLine |
||||
.substring(propMatch.index + propMatch[0].length, typeEndIndex) |
||||
.trim(); |
||||
const restOfLine = propLine.substring(typeEndIndex + 1).trim(); |
||||
|
||||
// Parse the rest: [name=default] or name - description
|
||||
const restMatch = restOfLine.match( |
||||
/(\[?)([^[\]\s=-]+)(?:=([^\]]*))?]?\s*-?\s*(.*)/, |
||||
); |
||||
|
||||
if (!restMatch) return null; |
||||
|
||||
const [, isOptional, name, defaultValue, description] = restMatch; |
||||
|
||||
// Parse type - handle union types like "xs" | "s" | "m" | "l"
|
||||
let type = [typeStr.trim()]; |
||||
if (typeStr.includes("|") && !typeStr.includes("<")) { |
||||
type = typeStr.split("|").map((t) => t.trim().replace(/"/g, "")); |
||||
} else if (typeStr.includes('"') && !typeStr.includes("<")) { |
||||
// Handle quoted literal types
|
||||
const literals = typeStr.match(/"[^"]+"/g); |
||||
if (literals) { |
||||
type = literals.map((l) => l.replace(/"/g, "")); |
||||
} |
||||
} |
||||
|
||||
return { |
||||
name: name.trim(), |
||||
type: type, |
||||
default: defaultValue |
||||
? defaultValue.trim() |
||||
: isOptional |
||||
? undefined |
||||
: null, |
||||
description: description.trim(), |
||||
required: !isOptional, |
||||
}; |
||||
} |
||||
|
||||
/** |
||||
* Process a single Svelte file |
||||
* @param {string} filePath |
||||
* @returns {ComponentDefinition | null} |
||||
*/ |
||||
processFile(filePath) { |
||||
try { |
||||
const content = fs.readFileSync(filePath, "utf-8"); |
||||
const tsDocContent = this.extractTSDoc(content); |
||||
|
||||
if (!tsDocContent) { |
||||
console.warn(`No TSDoc found in ${filePath}`); |
||||
return null; |
||||
} |
||||
|
||||
const component = this.parseTSDoc(tsDocContent); |
||||
|
||||
// If no name was extracted, use filename
|
||||
if (!component.name) { |
||||
component.name = path.basename(filePath, ".svelte"); |
||||
} |
||||
|
||||
return component; |
||||
} catch (error) { |
||||
const errorMessage = error instanceof Error ? error.message : String(error); |
||||
console.error(`Error processing ${filePath}:`, errorMessage); |
||||
return null; |
||||
} |
||||
} |
||||
|
||||
/** |
||||
* Process all Svelte files in a directory recursively |
||||
* @param {string} dirPath |
||||
*/ |
||||
processDirectory(dirPath) { |
||||
const items = fs.readdirSync(dirPath); |
||||
|
||||
for (const item of items) { |
||||
const itemPath = path.join(dirPath, item); |
||||
const stat = fs.statSync(itemPath); |
||||
|
||||
if (stat.isDirectory()) { |
||||
this.processDirectory(itemPath); |
||||
} else if (item.endsWith(".svelte")) { |
||||
const component = this.processFile(itemPath); |
||||
if (component) { |
||||
this.components.push(component); |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
/** |
||||
* Generate the final JSON output |
||||
*/ |
||||
generateOutput() { |
||||
// Sort components by category and name
|
||||
this.components.sort((a, b) => { |
||||
if (a.category !== b.category) { |
||||
return a.category.localeCompare(b.category); |
||||
} |
||||
return a.name.localeCompare(b.name); |
||||
}); |
||||
|
||||
return { |
||||
library: "Alexandria Component Library", |
||||
version: "1.0.0", |
||||
generated: new Date().toISOString(), |
||||
totalComponents: this.components.length, |
||||
categories: [...new Set(this.components.map((c) => c.category))].sort(), |
||||
components: this.components, |
||||
}; |
||||
} |
||||
} |
||||
|
||||
/** |
||||
* Main execution |
||||
*/ |
||||
function main() { |
||||
const parser = new ComponentParser(); |
||||
const aFolderPath = __dirname; |
||||
|
||||
console.log('Parsing Alexandria components...'); |
||||
console.log(`Source directory: ${aFolderPath}`); |
||||
|
||||
if (!fs.existsSync(aFolderPath)) { |
||||
console.error(`Directory not found: ${aFolderPath}`); |
||||
process.exit(1); |
||||
} |
||||
|
||||
// Process all components
|
||||
parser.processDirectory(aFolderPath); |
||||
|
||||
// Generate output
|
||||
const output = parser.generateOutput(); |
||||
|
||||
// Write to file in the same directory (/a folder)
|
||||
const outputPath = path.join(__dirname, 'alexandria-components.json'); |
||||
fs.writeFileSync(outputPath, JSON.stringify(output, null, 2)); |
||||
|
||||
console.log(`\n✅ Successfully parsed ${output.totalComponents} components`); |
||||
console.log(`📁 Categories: ${output.categories.join(', ')}`); |
||||
console.log(`💾 Output saved to: ${outputPath}`); |
||||
|
||||
// Print summary
|
||||
console.log('\n📊 Component Summary:'); |
||||
/** @type {Record<string, number>} */ |
||||
const categoryCounts = {}; |
||||
output.components.forEach(c => { |
||||
categoryCounts[c.category] = (categoryCounts[c.category] || 0) + 1; |
||||
}); |
||||
|
||||
Object.entries(categoryCounts).forEach(([category, count]) => { |
||||
console.log(` ${category}: ${count} components`); |
||||
}); |
||||
} |
||||
|
||||
// Run the script
|
||||
main(); |
||||
@ -0,0 +1,266 @@
@@ -0,0 +1,266 @@
|
||||
@layer components { |
||||
/* ======================================== |
||||
Base Card Styles |
||||
======================================== */ |
||||
|
||||
/* Main card leather theme */ |
||||
.card-leather { |
||||
@apply shadow-none text-primary-1000 border-s-4 bg-highlight |
||||
border-primary-200 has-[:hover]:border-primary-700; |
||||
@apply dark:bg-primary-1000 dark:border-primary-800 |
||||
dark:has-[:hover]:bg-primary-950 dark:has-[:hover]:border-primary-500; |
||||
} |
||||
|
||||
.card-leather h1, |
||||
.card-leather h2, |
||||
.card-leather h3, |
||||
.card-leather h4, |
||||
.card-leather h5, |
||||
.card-leather h6 { |
||||
@apply text-gray-900 hover:text-primary-600 dark:text-gray-100 |
||||
dark:hover:text-primary-400; |
||||
} |
||||
|
||||
.card-leather .font-thin { |
||||
@apply text-gray-900 hover:text-primary-700 dark:text-gray-100 |
||||
dark:hover:text-primary-300; |
||||
} |
||||
|
||||
/* Main card leather (used in profile previews) */ |
||||
.main-leather { |
||||
@apply bg-primary-50 dark:bg-primary-1000 text-gray-900 dark:text-gray-100; |
||||
} |
||||
|
||||
/* ======================================== |
||||
Responsive Card Styles |
||||
======================================== */ |
||||
|
||||
.responsive-card { |
||||
@apply w-full min-w-0 overflow-hidden; |
||||
} |
||||
|
||||
.responsive-card-content { |
||||
@apply break-words overflow-hidden; |
||||
} |
||||
|
||||
/* ======================================== |
||||
Article Box Styles (Blog & Publication Cards) |
||||
======================================== */ |
||||
|
||||
.ArticleBox { |
||||
@apply shadow-none text-primary-1000 border-s-4 bg-highlight |
||||
border-primary-200 has-[:hover]:border-primary-700; |
||||
@apply dark:bg-primary-1000 dark:border-primary-800 |
||||
dark:has-[:hover]:bg-primary-950 dark:has-[:hover]:border-primary-500; |
||||
} |
||||
|
||||
.ArticleBox h1, |
||||
.ArticleBox h2, |
||||
.ArticleBox h3, |
||||
.ArticleBox h4, |
||||
.ArticleBox h5, |
||||
.ArticleBox h6 { |
||||
@apply text-gray-900 hover:text-primary-600 dark:text-gray-100 |
||||
dark:hover:text-primary-400; |
||||
} |
||||
|
||||
.ArticleBox .font-thin { |
||||
@apply text-gray-900 hover:text-primary-700 dark:text-gray-100 |
||||
dark:hover:text-primary-300; |
||||
} |
||||
|
||||
/* Article box image transitions */ |
||||
.ArticleBox.grid .ArticleBoxImage { |
||||
@apply max-h-0; |
||||
transition: max-height 0.5s ease; |
||||
} |
||||
|
||||
.ArticleBox.grid.active .ArticleBoxImage { |
||||
@apply max-h-40; |
||||
} |
||||
|
||||
/* ======================================== |
||||
Event Preview Card Styles |
||||
======================================== */ |
||||
|
||||
/* Event preview card hover state */ |
||||
.event-preview-card { |
||||
@apply hover:bg-highlight dark:bg-primary-900/70 bg-primary-50 |
||||
dark:hover:bg-primary-800 border-primary-400 border-s-4 |
||||
transition-colors cursor-pointer |
||||
focus:outline-none focus:ring-2 focus:ring-primary-500 shadow-none; |
||||
} |
||||
|
||||
/* Event metadata badges */ |
||||
.event-kind-badge { |
||||
@apply text-[10px] px-1.5 py-0.5 rounded |
||||
bg-gray-200 dark:bg-gray-700 |
||||
text-gray-700 dark:text-gray-300; |
||||
} |
||||
|
||||
.event-label { |
||||
@apply text-xs uppercase tracking-wide |
||||
text-gray-500 dark:text-gray-400; |
||||
} |
||||
|
||||
/* Community badge */ |
||||
.community-badge { |
||||
@apply inline-flex items-center gap-1 |
||||
text-[10px] px-1.5 py-0.5 rounded |
||||
bg-yellow-100 dark:bg-yellow-900 |
||||
text-yellow-700 dark:text-yellow-300; |
||||
} |
||||
|
||||
/* ======================================== |
||||
Profile Card Styles |
||||
======================================== */ |
||||
|
||||
/* Profile verification badge (NIP-05) */ |
||||
.profile-nip05-badge { |
||||
@apply px-2 py-0.5 !mb-0 rounded |
||||
bg-green-100 dark:bg-green-900 |
||||
text-green-700 dark:text-green-300 text-xs; |
||||
} |
||||
|
||||
/* Community status indicator */ |
||||
.community-status-indicator { |
||||
@apply flex-shrink-0 w-4 h-4 |
||||
bg-yellow-100 dark:bg-yellow-900 |
||||
rounded-full flex items-center justify-center; |
||||
} |
||||
|
||||
.community-status-icon { |
||||
@apply w-3 h-3 |
||||
text-yellow-600 dark:text-yellow-400; |
||||
} |
||||
|
||||
/* User list status indicator (heart) */ |
||||
.user-list-indicator { |
||||
@apply flex-shrink-0 w-4 h-4 |
||||
bg-red-100 dark:bg-red-900 |
||||
rounded-full flex items-center justify-center; |
||||
} |
||||
|
||||
.user-list-icon { |
||||
@apply w-3 h-3 |
||||
text-red-600 dark:text-red-400; |
||||
} |
||||
|
||||
/* ======================================== |
||||
Card Content Styles |
||||
======================================== */ |
||||
|
||||
/* Card content sections */ |
||||
.card-header { |
||||
@apply flex items-start w-full p-4; |
||||
} |
||||
|
||||
.card-body { |
||||
@apply px-4 pb-3 flex flex-col gap-2; |
||||
} |
||||
|
||||
.card-footer { |
||||
@apply px-4 pt-2 pb-3 |
||||
border-t border-primary-200 dark:border-primary-700 |
||||
flex items-center gap-2 flex-wrap; |
||||
} |
||||
|
||||
/* Card content text styles */ |
||||
.card-summary { |
||||
@apply text-sm text-primary-900 dark:text-primary-200 line-clamp-2; |
||||
} |
||||
|
||||
.card-content { |
||||
@apply text-sm text-gray-800 dark:text-gray-200 |
||||
line-clamp-3 break-words mb-4; |
||||
} |
||||
|
||||
.card-about { |
||||
@apply text-sm text-gray-700 dark:text-gray-300 line-clamp-3; |
||||
} |
||||
|
||||
/* Deferral link styling */ |
||||
.deferral-link { |
||||
@apply underline |
||||
text-primary-700 dark:text-primary-400 |
||||
hover:text-primary-900 dark:hover:text-primary-200 |
||||
break-all cursor-pointer; |
||||
} |
||||
|
||||
/* ======================================== |
||||
Tags and Badges |
||||
======================================== */ |
||||
|
||||
.tags span { |
||||
@apply bg-primary-50 text-primary-800 |
||||
text-sm font-medium me-2 px-2.5 py-0.5 |
||||
rounded-sm |
||||
dark:bg-primary-900 dark:text-primary-200; |
||||
} |
||||
|
||||
/* ======================================== |
||||
Card Image Styles |
||||
======================================== */ |
||||
|
||||
.card-image-container { |
||||
@apply w-full bg-primary-200 dark:bg-primary-800 relative; |
||||
} |
||||
|
||||
.card-banner { |
||||
@apply w-full h-60 object-cover; |
||||
} |
||||
|
||||
.card-avatar-container { |
||||
@apply absolute w-fit top-[-56px]; |
||||
} |
||||
|
||||
/* ======================================== |
||||
Utility Classes for Cards |
||||
======================================== */ |
||||
|
||||
/* Prose styling within cards - extends prose class when applied */ |
||||
.card-prose { |
||||
@apply max-w-none text-gray-900 dark:text-gray-100 |
||||
break-words min-w-0; |
||||
overflow-wrap: anywhere; |
||||
} |
||||
|
||||
/* Card metadata grid */ |
||||
.card-metadata-grid { |
||||
@apply grid grid-cols-1 gap-y-2; |
||||
} |
||||
|
||||
.card-metadata-label { |
||||
@apply font-semibold min-w-[120px] flex-shrink-0; |
||||
} |
||||
|
||||
.card-metadata-value { |
||||
@apply min-w-0 break-words; |
||||
} |
||||
|
||||
/* ======================================== |
||||
Interactive Card States |
||||
======================================== */ |
||||
|
||||
/* Clickable card states */ |
||||
.card-clickable { |
||||
@apply cursor-pointer transition-colors |
||||
focus:outline-none focus:ring-2 focus:ring-primary-500; |
||||
} |
||||
|
||||
.card-clickable:hover { |
||||
@apply bg-primary-100 dark:bg-primary-800; |
||||
} |
||||
|
||||
/* ======================================== |
||||
Skeleton Loader for Cards |
||||
======================================== */ |
||||
|
||||
.skeleton-leather div { |
||||
@apply bg-primary-100 dark:bg-primary-800; |
||||
} |
||||
|
||||
.skeleton-leather { |
||||
@apply h-48; |
||||
} |
||||
} |
||||
Loading…
Reference in new issue