diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro index 99cfe0d..01a1b19 100644 --- a/src/layouts/BaseLayout.astro +++ b/src/layouts/BaseLayout.astro @@ -70,14 +70,12 @@ const { title, description = 'CC24-Guide - A comprehensive directory of digital } }); - // Make theme utils available globally (window as any).themeUtils = { initTheme, toggleTheme, getStoredTheme }; - // Tool helper functions (consolidated from toolHelpers.ts) function createToolSlug(toolName) { if (!toolName || typeof toolName !== 'string') { console.warn('[toolHelpers] Invalid toolName provided to createToolSlug:', toolName); @@ -107,6 +105,12 @@ const { title, description = 'CC24-Guide - A comprehensive directory of digital tool.projectUrl.trim() !== ""; } + // FIXED: Use type assertions to avoid TypeScript errors + // Make functions available globally for existing code compatibility + (window as any).createToolSlug = createToolSlug; + (window as any).findToolByIdentifier = findToolByIdentifier; + (window as any).isToolHosted = isToolHosted; + // Client-side auth functions (consolidated from client-auth.js) async function checkClientAuth() { try { @@ -157,6 +161,7 @@ const { title, description = 'CC24-Guide - A comprehensive directory of digital document.addEventListener('click', async (e) => { if (!e.target) return; + // FIXED: Properly cast EventTarget to Element for closest() method const button = (e.target as Element).closest(selector); if (!button) return; @@ -171,10 +176,7 @@ const { title, description = 'CC24-Guide - A comprehensive directory of digital }); } - // Make functions available globally - (window as any).createToolSlug = createToolSlug; - (window as any).findToolByIdentifier = findToolByIdentifier; - (window as any).isToolHosted = isToolHosted; + // Make auth functions available globally (window as any).checkClientAuth = checkClientAuth; (window as any).requireClientAuth = requireClientAuth; (window as any).showIfAuthenticated = showIfAuthenticated; @@ -184,7 +186,6 @@ const { title, description = 'CC24-Guide - A comprehensive directory of digital initTheme(); setupAuthButtons('[data-contribute-button]'); - // Initialize AI button visibility (moved from ToolFilters.astro to avoid race condition) const initAIButton = async () => { await showIfAuthenticated('#ai-view-toggle'); }; diff --git a/src/styles/global.css b/src/styles/global.css index 5b8574d..6c3178d 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -1729,4 +1729,118 @@ This will literally assault the user's retinas. They'll need sunglasses to look .share-btn svg { flex-shrink: 0; +} + +/* === LAYOUT UTILITIES === */ +.flex { display: flex; } +.flex-col { flex-direction: column; } +.flex-row { flex-direction: row; } +.flex-wrap { flex-wrap: wrap; } +.flex-1 { flex: 1; } +.flex-shrink-0 { flex-shrink: 0; } + +/* Alignment */ +.items-center { align-items: center; } +.items-start { align-items: flex-start; } +.items-end { align-items: flex-end; } +.justify-center { justify-content: center; } +.justify-between { justify-content: space-between; } +.justify-end { justify-content: flex-end; } +.text-center { text-align: center; } +.text-left { text-align: left; } +.text-right { text-align: right; } + +/* Grid */ +.grid { display: grid; } +.grid-cols-2 { grid-template-columns: repeat(2, 1fr); } +.grid-cols-3 { grid-template-columns: repeat(3, 1fr); } +.grid-auto-fit-sm { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } +.grid-auto-fit-md { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } + +/* === SPACING UTILITIES === */ +.gap-0 { gap: 0; } +.gap-1 { gap: 0.25rem; } +.gap-2 { gap: 0.5rem; } +.gap-3 { gap: 0.75rem; } +.gap-4 { gap: 1rem; } +.gap-5 { gap: 1.25rem; } +.gap-6 { gap: 1.5rem; } +.gap-8 { gap: 2rem; } + +/* Margin */ +.m-0 { margin: 0; } +.mb-0 { margin-bottom: 0; } +.mb-1 { margin-bottom: 0.25rem; } +.mb-2 { margin-bottom: 0.5rem; } +.mb-3 { margin-bottom: 0.75rem; } +.mb-4 { margin-bottom: 1rem; } +.mb-6 { margin-bottom: 1.5rem; } +.mb-8 { margin-bottom: 2rem; } +.mt-auto { margin-top: auto; } +.mr-2 { margin-right: 0.5rem; } +.mr-3 { margin-right: 0.75rem; } + +/* Padding */ +.p-0 { padding: 0; } +.p-4 { padding: 1rem; } +.p-6 { padding: 1.5rem; } +.p-8 { padding: 2rem; } + +/* === TYPOGRAPHY UTILITIES === */ +.text-xs { font-size: 0.75rem; } +.text-sm { font-size: 0.875rem; } +.text-base { font-size: 1rem; } +.text-lg { font-size: 1.125rem; } +.text-xl { font-size: 1.25rem; } +.text-2xl { font-size: 1.5rem; } + +.font-medium { font-weight: 500; } +.font-semibold { font-weight: 600; } +.font-bold { font-weight: 700; } + +/* === VISUAL UTILITIES === */ +.rounded { border-radius: 0.375rem; } +.rounded-md { border-radius: 0.5rem; } +.rounded-lg { border-radius: 0.75rem; } +.rounded-full { border-radius: 9999px; } + +.shadow-sm { box-shadow: var(--shadow-sm); } +.shadow-md { box-shadow: var(--shadow-md); } +.shadow-lg { box-shadow: var(--shadow-lg); } + +.border { border: 1px solid var(--color-border); } +.border-l-4 { border-left: 4px solid var(--color-border); } + +.bg-primary { background-color: var(--color-primary); } +.bg-secondary { background-color: var(--color-bg-secondary); } +.bg-tertiary { background-color: var(--color-bg-tertiary); } + +.text-primary { color: var(--color-primary); } +.text-secondary { color: var(--color-text-secondary); } +.text-white { color: white; } + +/* === POSITION & SIZING === */ +.relative { position: relative; } +.absolute { position: absolute; } +.fixed { position: fixed; } +.w-full { width: 100%; } +.h-full { height: 100%; } +.min-w-0 { min-width: 0; } +.overflow-hidden { overflow: hidden; } +.cursor-pointer { cursor: pointer; } + +/* === COMMON COMBINATIONS === */ +.flex-center { + display: flex; + align-items: center; + justify-content: center; +} +.flex-between { + display: flex; + align-items: center; + justify-content: space-between; +} +.flex-start { + display: flex; + align-items: center; } \ No newline at end of file diff --git a/src/utils/toolHelpers.ts b/src/utils/toolHelpers.ts index c18a665..54431b3 100644 --- a/src/utils/toolHelpers.ts +++ b/src/utils/toolHelpers.ts @@ -66,26 +66,4 @@ export function getToolCategory(tool: Tool): 'concept' | 'method' | 'hosted' | ' if (isToolHosted(tool)) return 'hosted'; if (tool.license && tool.license !== 'Proprietary') return 'oss'; return 'proprietary'; -} - -// BROWSER COMPATIBILITY LAYER -// Only assign to window if we're in a browser environment -if (typeof window !== 'undefined') { - // Make functions available globally for existing code compatibility - window.createToolSlug = createToolSlug; - window.findToolByIdentifier = findToolByIdentifier; - window.isToolHosted = isToolHosted; - - console.log('[toolHelpers] Consolidated tool utilities loaded and assigned to window'); -} - -// LEGACY NODE.JS COMPATIBILITY -// Support for older require() patterns if needed -if (typeof module !== 'undefined' && module.exports) { - module.exports = { - createToolSlug, - findToolByIdentifier, - isToolHosted, - getToolCategory - }; } \ No newline at end of file