ulivargas/classroomio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: preview templates, thumbnail features, 2 new org templates

Browse Source
This commit is contained in:
Rotimi Best
2026-05-23 12:24:57 +01:00
parent 4fdd4115b9
commit 78ab13f54b
106 changed files with 8320 additions and 2040 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/dashboard/src/lib/features/org/utils/landing-page-components.ts
+16 -4
View File
@@ -8,6 +8,9 @@ import {
CorporateLandingHero,
CorporateLandingNav,
CorporateLandingPage,
EditorialLandingHero,
EditorialLandingNav,
EditorialLandingPage,
MinimalLandingHero,
MinimalLandingNav,
MinimalLandingPage,
@@ -22,7 +25,10 @@ import {
TechLandingPage,
TerminalLandingHero,
TerminalLandingNav,
TerminalLandingPage
TerminalLandingPage,
VibrantLandingHero,
VibrantLandingNav,
VibrantLandingPage
} from '@cio/ui/custom/org-landing-page';
export const landingPageThemeComponents = {
@@ -33,7 +39,9 @@ export const landingPageThemeComponents = {
tech: TechLandingPage,
studio: StudioLandingPage,
corporate: CorporateLandingPage,
terminal: TerminalLandingPage
terminal: TerminalLandingPage,
editorial: EditorialLandingPage,
vibrant: VibrantLandingPage
} as const;
export const landingPageNavComponents = {
@@ -44,7 +52,9 @@ export const landingPageNavComponents = {
tech: TechLandingNav,
studio: StudioLandingNav,
corporate: CorporateLandingNav,
terminal: TerminalLandingNav
terminal: TerminalLandingNav,
editorial: EditorialLandingNav,
vibrant: VibrantLandingNav
} as const;
export const landingPageHeroComponents = {
@@ -55,5 +65,7 @@ export const landingPageHeroComponents = {
tech: TechLandingHero,
studio: StudioLandingHero,
corporate: CorporateLandingHero,
terminal: TerminalLandingHero
terminal: TerminalLandingHero,
editorial: EditorialLandingHero,
vibrant: VibrantLandingHero
} as const;
apps/dashboard/src/lib/features/org/utils/landing-page.ts
+150 -1
View File
@@ -27,7 +27,9 @@ export const landingPageThemes = [
'tech',
'studio',
'corporate',
'terminal'
'terminal',
'editorial',
'vibrant'
] as const satisfies OrgLandingPageTheme[];
export const defaultLandingPageHero: OrgLandingPageHero = {
@@ -724,7 +726,154 @@ export function importThemeComponent(theme: LandingPageThemeKey) {
return import('@cio/ui/custom/org-landing-page/corporate.svelte');
case 'terminal':
return import('@cio/ui/custom/org-landing-page/terminal.svelte');
case 'editorial':
return import('@cio/ui/custom/org-landing-page/editorial.svelte');
case 'vibrant':
return import('@cio/ui/custom/org-landing-page/vibrant.svelte');
default:
return import('@cio/ui/custom/org-landing-page/minimal.svelte');
}
}
const NAV_SNIPPET_THEMES: ReadonlySet<LandingPageThemeKey> = new Set([
'minimal',
'saas',
'tech',
'studio',
'corporate',
'terminal',
'editorial',
'vibrant'
]);
export function themeRendersNavInsideHero(theme: LandingPageThemeKey): boolean {
return NAV_SNIPPET_THEMES.has(theme);
}
export function themeHeaderShellClass(_theme: LandingPageThemeKey): string {
return 'ui:bg-[var(--landing-bg)] ui:text-[var(--landing-fg)] ui:font-sans';
}
export { themeStyle } from '@cio/ui/custom/org-landing-page/theme-style';
export async function importThemeCourseCard(theme: LandingPageThemeKey) {
switch (theme) {
case 'bold':
return (await import('@cio/ui/custom/org-landing-page/bold/course-card.svelte')).default;
case 'classic':
return (await import('@cio/ui/custom/org-landing-page/classic/course-card.svelte')).default;
case 'saas':
return (await import('@cio/ui/custom/org-landing-page/saas/course-card.svelte')).default;
case 'tech':
return (await import('@cio/ui/custom/org-landing-page/tech/course-card.svelte')).default;
case 'studio':
return (await import('@cio/ui/custom/org-landing-page/studio/course-card.svelte')).default;
case 'corporate':
return (await import('@cio/ui/custom/org-landing-page/corporate/course-card.svelte')).default;
case 'terminal':
return (await import('@cio/ui/custom/org-landing-page/terminal/course-card.svelte')).default;
case 'editorial':
return (await import('@cio/ui/custom/org-landing-page/editorial/course-card.svelte')).default;
case 'vibrant':
return (await import('@cio/ui/custom/org-landing-page/vibrant/course-card.svelte')).default;
default:
return (await import('@cio/ui/custom/org-landing-page/minimal/course-card.svelte')).default;
}
}
export function themeCourseGridClass(theme: LandingPageThemeKey): string {
switch (theme) {
case 'corporate':
case 'tech':
return 'ui:grid ui:grid-cols-1 ui:md:grid-cols-2 ui:lg:grid-cols-3 ui:border-t ui:border-l ui:border-[var(--landing-border)]';
case 'saas':
return 'ui:grid ui:grid-cols-1 ui:md:grid-cols-2 ui:lg:grid-cols-3 ui:gap-px ui:bg-[var(--landing-border)] ui:border ui:border-[var(--landing-border)]';
case 'minimal':
return 'ui:grid ui:grid-cols-1 ui:md:grid-cols-2 ui:gap-6';
case 'studio':
return 'ui:grid ui:grid-cols-1 ui:md:grid-cols-2 ui:lg:grid-cols-3 ui:gap-3';
case 'terminal':
return 'ui:grid ui:grid-cols-1 ui:md:grid-cols-2 ui:lg:grid-cols-3 ui:gap-[14px]';
case 'editorial':
return 'ui:grid ui:grid-cols-1 ui:md:grid-cols-2 ui:lg:grid-cols-3 ui:gap-4';
case 'vibrant':
return 'ui:grid ui:grid-cols-1 ui:md:grid-cols-2 ui:lg:grid-cols-3 ui:gap-5';
default:
return 'ui:grid ui:grid-cols-1 ui:md:grid-cols-2 ui:lg:grid-cols-3 ui:gap-6';
}
}
export async function importThemeNavHero(theme: LandingPageThemeKey) {
switch (theme) {
case 'bold': {
const [nav, hero] = await Promise.all([
import('@cio/ui/custom/org-landing-page/bold/nav.svelte'),
import('@cio/ui/custom/org-landing-page/bold/hero.svelte')
]);
return { NavComponent: nav.default, HeroComponent: hero.default };
}
case 'classic': {
const [nav, hero] = await Promise.all([
import('@cio/ui/custom/org-landing-page/classic/nav.svelte'),
import('@cio/ui/custom/org-landing-page/classic/hero.svelte')
]);
return { NavComponent: nav.default, HeroComponent: hero.default };
}
case 'saas': {
const [nav, hero] = await Promise.all([
import('@cio/ui/custom/org-landing-page/saas/nav.svelte'),
import('@cio/ui/custom/org-landing-page/saas/hero.svelte')
]);
return { NavComponent: nav.default, HeroComponent: hero.default };
}
case 'tech': {
const [nav, hero] = await Promise.all([
import('@cio/ui/custom/org-landing-page/tech/nav.svelte'),
import('@cio/ui/custom/org-landing-page/tech/hero.svelte')
]);
return { NavComponent: nav.default, HeroComponent: hero.default };
}
case 'studio': {
const [nav, hero] = await Promise.all([
import('@cio/ui/custom/org-landing-page/studio/nav.svelte'),
import('@cio/ui/custom/org-landing-page/studio/hero.svelte')
]);
return { NavComponent: nav.default, HeroComponent: hero.default };
}
case 'corporate': {
const [nav, hero] = await Promise.all([
import('@cio/ui/custom/org-landing-page/corporate/nav.svelte'),
import('@cio/ui/custom/org-landing-page/corporate/hero.svelte')
]);
return { NavComponent: nav.default, HeroComponent: hero.default };
}
case 'terminal': {
const [nav, hero] = await Promise.all([
import('@cio/ui/custom/org-landing-page/terminal/nav.svelte'),
import('@cio/ui/custom/org-landing-page/terminal/hero.svelte')
]);
return { NavComponent: nav.default, HeroComponent: hero.default };
}
case 'editorial': {
const [nav, hero] = await Promise.all([
import('@cio/ui/custom/org-landing-page/editorial/nav.svelte'),
import('@cio/ui/custom/org-landing-page/editorial/hero.svelte')
]);
return { NavComponent: nav.default, HeroComponent: hero.default };
}
case 'vibrant': {
const [nav, hero] = await Promise.all([
import('@cio/ui/custom/org-landing-page/vibrant/nav.svelte'),
import('@cio/ui/custom/org-landing-page/vibrant/hero.svelte')
]);
return { NavComponent: nav.default, HeroComponent: hero.default };
}
default: {
const [nav, hero] = await Promise.all([
import('@cio/ui/custom/org-landing-page/minimal/nav.svelte'),
import('@cio/ui/custom/org-landing-page/minimal/hero.svelte')
]);
return { NavComponent: nav.default, HeroComponent: hero.default };
}
}
}