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

feat(courses): add type, search, and pricing filters to org landing page

Browse Source 
- Add Types section to the Filter sidebar with all 4 course types
- Add full-text search input centered in the hero (title + description)
- Add Pricing section (Free / Paid) based on course cost
- Compact hero prop across all 10 themes to halve vertical padding
- Children snippet support in all hero themes for the search input
- All filters are URL-driven (?types=, ?search=, ?tags=, ?pricing=)
- Full-stack: validation schema, DB queries, service, API route, server load, UI
This commit is contained in:
Rotimi Best
2026-07-01 10:36:53 +01:00
parent 8d2f2a6d2d
commit 78a2b85ad3
27 changed files with 464 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/api/src/routes/organization/organization.ts
+12 -6
View File
@@ -383,15 +383,21 @@ export const organizationRouter = new Hono()
*/
.get('/courses/public', zValidator('query', ZGetCoursesBySiteName), async (c) => {
try {
const { siteName, tags, page, limit } = c.req.valid('query');
const tagSlugs = tags
?.split(',')
.map((value) => value.trim())
.filter(Boolean);
const { siteName, tags, types, search, pricing, page, limit } = c.req.valid('query');
const splitParam = (param: string | undefined) =>
param
?.split(',')
.map((v) => v.trim())
.filter(Boolean);
const tagSlugs = splitParam(tags);
const courseTypes = splitParam(types);
const pagination = page !== undefined || limit !== undefined ? { page, limit } : undefined;
const courses = await getPublicCourses(
siteName,
tagSlugs && tagSlugs.length > 0 ? tagSlugs : undefined,
tagSlugs?.length ? tagSlugs : undefined,
courseTypes?.length ? courseTypes : undefined,
search || undefined,
pricing || undefined,
pagination
);
apps/api/src/services/organization.ts
+19 -2
View File
@@ -256,6 +256,9 @@ export async function removeAudienceMember(orgId: string, memberId: number, remo
export async function getPublicCourses(
siteName: string,
tagSlugs?: string[],
courseTypes?: string[],
search?: string,
pricing?: 'free' | 'paid',
pagination?: { page?: number; limit?: number }
) {
try {
@@ -286,8 +289,22 @@ export async function getPublicCourses(
}
}
const totalCourses = await countPublishedCoursesBySiteName(siteName, filteredCourseIds);
const courses = await getPublishedCoursesBySiteName(siteName, filteredCourseIds, limit, offset);
const totalCourses = await countPublishedCoursesBySiteName(
siteName,
filteredCourseIds,
courseTypes,
search,
pricing
);
const courses = await getPublishedCoursesBySiteName(
siteName,
filteredCourseIds,
courseTypes,
search,
pricing,
limit,
offset
);
const tagsByCourseId = await getCourseTagsByCourseIdsForOrganization(
org.id,
courses.map((course) => course.id)
apps/dashboard/src/lib/utils/translations/da.json
+7 -1
View File
@@ -3741,7 +3741,13 @@
"filters": {
"title": "Filtrer efter tags",
"help": "Vælg et eller flere tags for at filtrere kurser",
"empty": "Ingen tags tilgængelige endnu"
"empty": "Ingen tags tilgængelige endnu",
"tags_title": "Tags",
"types_title": "Typer",
"search_placeholder": "Søg efter kurser...",
"pricing_title": "Prissætning",
"pricing_free": "Gratis",
"pricing_paid": "Betalt"
}
},
"tags_admin": {
apps/dashboard/src/lib/utils/translations/de.json
+7 -1
View File
@@ -3741,7 +3741,13 @@
"filters": {
"title": "Nach Tags filtern",
"help": "Wählen Sie einen oder mehrere Tags aus, um Kurse zu filtern",
"empty": "Noch keine Tags verfügbar"
"empty": "Noch keine Tags verfügbar",
"tags_title": "Schlagworte",
"types_title": "Typen",
"search_placeholder": "Kurse suchen...",
"pricing_title": "Preise",
"pricing_free": "Kostenlos",
"pricing_paid": "Bezahlt"
}
},
"tags_admin": {
apps/dashboard/src/lib/utils/translations/en.json
+9 -3
View File
@@ -1218,9 +1218,15 @@
"subtitle": "Browse all published courses",
"clear_filters": "Clear Filters",
"filters": {
"title": "Filter by Tags",
"help": "Select one or more tags to filter courses",
"empty": "No tags available yet"
"title": "Filter",
"help": "Filter courses by type, tags, or search by name",
"tags_title": "Tags",
"types_title": "Types",
"pricing_title": "Pricing",
"pricing_free": "Free",
"pricing_paid": "Paid",
"empty": "No tags available yet",
"search_placeholder": "Search courses..."
},
"empty": {
"title": "No courses found",
apps/dashboard/src/lib/utils/translations/es.json
+7 -1
View File
@@ -3741,7 +3741,13 @@
"filters": {
"title": "Filtrar por etiquetas",
"help": "Seleccione una o más etiquetas para filtrar cursos",
"empty": "Aún no hay etiquetas disponibles"
"empty": "Aún no hay etiquetas disponibles",
"tags_title": "Etiquetas",
"types_title": "Tipos",
"search_placeholder": "Buscar cursos...",
"pricing_title": "Precios",
"pricing_free": "Gratis",
"pricing_paid": "Pagado"
}
},
"tags_admin": {
apps/dashboard/src/lib/utils/translations/fr.json
+7 -1
View File
@@ -3741,7 +3741,13 @@
"filters": {
"title": "Filtrer par balises",
"help": "Sélectionnez une ou plusieurs balises pour filtrer les cours",
"empty": "Aucun tag disponible pour l'instant"
"empty": "Aucun tag disponible pour l'instant",
"tags_title": "Balises",
"types_title": "Espèces",
"search_placeholder": "Rechercher des cours...",
"pricing_title": "Tarifs",
"pricing_free": "Gratuit",
"pricing_paid": "Payé"
}
},
"tags_admin": {
apps/dashboard/src/lib/utils/translations/hi.json
+7 -1
View File
@@ -3741,7 +3741,13 @@
"filters": {
"title": "टैग द्वारा फ़िल्टर करें",
"help": "पाठ्यक्रमों को फ़िल्टर करने के लिए एक या अधिक टैग चुनें",
"empty": "अभी तक कोई टैग उपलब्ध नहीं है"
"empty": "अभी तक कोई टैग उपलब्ध नहीं है",
"tags_title": "टैग",
"types_title": "प्रकार",
"search_placeholder": "पाठ्यक्रम खोजें...",
"pricing_title": "मूल्य निर्धारण",
"pricing_free": "निःशुल्क",
"pricing_paid": "भुगतान किया गया"
}
},
"tags_admin": {
apps/dashboard/src/lib/utils/translations/pl.json
+7 -1
View File
@@ -3741,7 +3741,13 @@
"filters": {
"title": "Filtruj według tagów",
"help": "Wybierz jeden lub więcej tagów, aby filtrować kursy",
"empty": "Brak dostępnych tagów"
"empty": "Brak dostępnych tagów",
"tags_title": "Tagi",
"types_title": "Typy",
"search_placeholder": "Wyszukaj kursy...",
"pricing_title": "Ceny",
"pricing_free": "Bezpłatny",
"pricing_paid": "Płatny"
}
},
"tags_admin": {
apps/dashboard/src/lib/utils/translations/pt.json
+7 -1
View File
@@ -3741,7 +3741,13 @@
"filters": {
"title": "Filtrar por tags",
"help": "Selecione uma ou mais tags para filtrar cursos",
"empty": "Nenhuma tag disponível ainda"
"empty": "Nenhuma tag disponível ainda",
"tags_title": "Etiquetas",
"types_title": "Tipos",
"search_placeholder": "Pesquisar cursos...",
"pricing_title": "Preços",
"pricing_free": "Grátis",
"pricing_paid": "Pago"
}
},
"tags_admin": {
apps/dashboard/src/lib/utils/translations/ru.json
+7 -1
View File
@@ -3741,7 +3741,13 @@
"filters": {
"title": "Фильтровать по тегам",
"help": "Выберите один или несколько тегов, чтобы отфильтровать курсы.",
"empty": "Тегов пока нет"
"empty": "Тегов пока нет",
"tags_title": "Теги",
"types_title": "Типы",
"search_placeholder": "Искать курсы...",
"pricing_title": "Цены",
"pricing_free": "Бесплатно",
"pricing_paid": "Платный"
}
},
"tags_admin": {
apps/dashboard/src/lib/utils/translations/vi.json
+7 -1
View File
@@ -3741,7 +3741,13 @@
"filters": {
"title": "Lọc theo thẻ",
"help": "Chọn một hoặc nhiều thẻ để lọc các khóa học",
"empty": "Chưa có thẻ nào"
"empty": "Chưa có thẻ nào",
"tags_title": "Thẻ",
"types_title": "Các loại",
"search_placeholder": "Tìm kiếm khóa học...",
"pricing_title": "Định giá",
"pricing_free": "miễn phí",
"pricing_paid": "Đã trả tiền"
}
},
"tags_admin": {
apps/dashboard/src/routes/(org-site)/courses/+page.server.ts
+15 -1
View File
@@ -32,6 +32,14 @@ export const load = async ({ parent, url }) => {
const normalizedTags = normalizeTagsParam(url.searchParams.get('tags'));
const normalizedTagsQuery = normalizedTags.length > 0 ? normalizedTags.join(',') : undefined;
const normalizedTypes = normalizeTagsParam(url.searchParams.get('types'));
const normalizedTypesQuery = normalizedTypes.length > 0 ? normalizedTypes.join(',') : undefined;
const activeSearch = url.searchParams.get('search')?.trim() ?? '';
const rawPricing = url.searchParams.get('pricing');
const activePricing = rawPricing === 'free' || rawPricing === 'paid' ? rawPricing : undefined;
const requestedPage = Number(url.searchParams.get('page'));
const currentPage = Number.isInteger(requestedPage) && requestedPage > 0 ? requestedPage : 1;
@@ -41,7 +49,10 @@ export const load = async ({ parent, url }) => {
query: {
siteName,
page: String(currentPage),
...(normalizedTagsQuery ? { tags: normalizedTagsQuery } : {})
...(normalizedTagsQuery ? { tags: normalizedTagsQuery } : {}),
...(normalizedTypesQuery ? { types: normalizedTypesQuery } : {}),
...(activeSearch ? { search: activeSearch } : {}),
...(activePricing ? { pricing: activePricing } : {})
}
})
),
@@ -89,6 +100,9 @@ export const load = async ({ parent, url }) => {
courses: courseData.courses,
tagGroups: tagsResult.ok ? tagsResult.body.data : [],
activeTags: normalizedTags,
activeTypes: normalizedTypes,
activeSearch,
activePricing,
pagination: {
page: courseData.page,
perPage: courseData.limit,
apps/dashboard/src/routes/(org-site)/courses/+page.svelte
+198 -50
View File
@@ -10,6 +10,7 @@
import { PoweredBy } from '$features/ui';
import LibraryBigIcon from '@lucide/svelte/icons/library-big';
import XIcon from '@lucide/svelte/icons/x';
import {
normalizeLandingPageSettings,
themeHeaderShellClass,
@@ -20,6 +21,7 @@
import { LandingButton, OrgLandingPageFooter } from '@cio/ui/custom/org-landing-page';
import { Checkbox } from '@cio/ui/base/checkbox';
import { Input } from '@cio/ui/base/input';
import { Empty } from '@cio/ui/custom/empty';
import { Separator } from '@cio/ui/base/separator';
import * as Pagination from '@cio/ui/base/pagination';
@@ -27,6 +29,21 @@
let { data } = $props();
let selectedTags = $derived<string[]>(data.activeTags || []);
let selectedTypes = $derived<string[]>(data.activeTypes || []);
let activeSearch = $derived(data.activeSearch || '');
let activePricing = $derived<'free' | 'paid' | undefined>(data.activePricing);
let searchInput = $state('');
$effect(() => {
searchInput = activeSearch;
});
const COURSE_TYPES = [
{ value: 'SELF_PACED', label: t.get('analytics.popularTypes.types.SELF_PACED') },
{ value: 'LIVE_CLASS', label: t.get('analytics.popularTypes.types.LIVE_CLASS') },
{ value: 'COMPLIANCE', label: t.get('analytics.popularTypes.types.COMPLIANCE') },
{ value: 'PUBLIC', label: t.get('analytics.popularTypes.types.PUBLIC') }
] as const;
const landingSettings = $derived(normalizeLandingPageSettings(data.org.landingpage));
@@ -57,15 +74,22 @@
image: ''
});
async function applyTagFilters(nextTags: string[]) {
async function applyFilters(next: {
tags?: string[];
types?: string[];
search?: string;
pricing?: 'free' | 'paid' | null;
}) {
const params = new SvelteURLSearchParams(page.url.searchParams);
const nextTags = next.tags ?? selectedTags;
const nextTypes = next.types ?? selectedTypes;
const nextSearch = next.search !== undefined ? next.search : activeSearch;
const nextPricing = 'pricing' in next ? next.pricing : activePricing;
if (nextTags.length > 0) {
params.set('tags', nextTags.join(','));
} else {
params.delete('tags');
}
nextTags.length ? params.set('tags', nextTags.join(',')) : params.delete('tags');
nextTypes.length ? params.set('types', nextTypes.join(',')) : params.delete('types');
nextSearch ? params.set('search', nextSearch) : params.delete('search');
nextPricing ? params.set('pricing', nextPricing) : params.delete('pricing');
params.delete('page');
const query = params.toString();
@@ -105,15 +129,47 @@
next.delete(tagSlug);
}
applyTagFilters(Array.from(next));
applyFilters({ tags: Array.from(next) });
}
function toggleType(typeValue: string, checked: boolean) {
const next = new SvelteSet(selectedTypes);
if (checked) {
next.add(typeValue);
} else {
next.delete(typeValue);
}
applyFilters({ types: Array.from(next) });
}
function clearFilters() {
if (selectedTags.length === 0) {
if (selectedTags.length === 0 && selectedTypes.length === 0 && !activeSearch && !activePricing) {
return;
}
applyTagFilters([]);
searchInput = '';
applyFilters({ tags: [], types: [], search: '', pricing: null });
}
let searchDebounce: ReturnType<typeof setTimeout>;
function onSearchInput(value: string) {
searchInput = value;
clearTimeout(searchDebounce);
searchDebounce = setTimeout(() => applyFilters({ search: value }), 300);
}
function onSearchKeydown(e: KeyboardEvent) {
if (e.key === 'Enter') {
clearTimeout(searchDebounce);
applyFilters({ search: searchInput });
}
}
function clearSearch() {
searchInput = '';
clearTimeout(searchDebounce);
applyFilters({ search: '' });
}
function isTagSelected(tagSlug: string) {
@@ -141,13 +197,17 @@
tags: tagsByGroupId[group.id] ?? []
}));
});
const hasActiveFilters = $derived(
selectedTags.length > 0 || selectedTypes.length > 0 || !!activeSearch || !!activePricing
);
</script>
<PoweredBy />
<main class={shellClass} style={shellStyle}>
{#if navInsideHero}
<HeroComponent hero={heroProps} orgName={data.org.name} showActions={false}>
<HeroComponent hero={heroProps} orgName={data.org.name} showActions={false} compact={true}>
{#snippet navigation()}
<NavComponent
orgName={data.org.name}
@@ -156,6 +216,28 @@
{authAction}
/>
{/snippet}
{#snippet children()}
<div class="ui:w-full ui:max-w-xl ui:mx-auto relative">
<Input
type="text"
value={searchInput}
oninput={(e) => onSearchInput(e.currentTarget.value)}
onkeydown={onSearchKeydown}
placeholder={$t('public_courses.filters.search_placeholder')}
class="ui:pr-8"
/>
{#if searchInput}
<button
type="button"
onclick={clearSearch}
class="ui:text-muted-foreground ui:hover:text-foreground absolute top-1/2 right-2 -translate-y-1/2"
aria-label="Clear search"
>
<XIcon class="ui:size-4" />
</button>
{/if}
</div>
{/snippet}
</HeroComponent>
{:else}
<NavComponent
@@ -164,12 +246,35 @@
navItems={landingSettings.navItems}
{authAction}
/>
<HeroComponent hero={heroProps} orgName={data.org.name} showActions={false} />
<HeroComponent hero={heroProps} orgName={data.org.name} showActions={false} compact={true}>
{#snippet children()}
<div class="ui:w-full ui:max-w-xl ui:mx-auto relative">
<Input
type="text"
value={searchInput}
oninput={(e) => onSearchInput(e.currentTarget.value)}
onkeydown={onSearchKeydown}
placeholder={$t('public_courses.filters.search_placeholder')}
class="ui:pr-8"
/>
{#if searchInput}
<button
type="button"
onclick={clearSearch}
class="ui:text-muted-foreground ui:hover:text-foreground absolute top-1/2 right-2 -translate-y-1/2"
aria-label="Clear search"
>
<XIcon class="ui:size-4" />
</button>
{/if}
</div>
{/snippet}
</HeroComponent>
{/if}
<section class="mx-auto w-full max-w-7xl px-4 py-8 md:px-6">
<div class="mb-6 flex items-center justify-end gap-4">
<LandingButton variant="secondary" onclick={clearFilters} disabled={selectedTags.length === 0}>
<LandingButton variant="secondary" onclick={clearFilters} disabled={!hasActiveFilters}>
{$t('public_courses.clear_filters')}
</LandingButton>
</div>
@@ -186,44 +291,87 @@
<Separator class="ui:bg-[var(--landing-border)]" />
<div class="flex-1 overflow-y-auto p-4">
{#if displayTagGroups.length === 0}
<p class="ui:text-[var(--landing-fg-muted)] text-sm">{$t('public_courses.filters.empty')}</p>
{:else}
<div class="space-y-5">
{#each displayTagGroups as group (group.id)}
<div class="space-y-2">
<div class="space-y-1">
<h3 class="text-sm font-semibold">{group.name}</h3>
{#if group.description}
<p class="ui:text-[var(--landing-fg-muted)] text-xs">{group.description}</p>
{/if}
</div>
<div class="space-y-2">
{#each group.tags as tag (tag.id)}
<label
class="ui:border-[var(--landing-border)] ui:hover:bg-[var(--landing-card-soft)] flex cursor-pointer items-center justify-between rounded-md border px-3 py-2"
>
<div class="flex items-center gap-2">
<Checkbox
checked={isTagSelected(tag.slug)}
onCheckedChange={(checked) => toggleTag(tag.slug, Boolean(checked))}
/>
<span
class="inline-block h-2.5 w-2.5 rounded-full border"
style={`background-color: ${tag.color}`}
aria-hidden="true"
></span>
<span class="text-sm">{tag.name}</span>
</div>
<span class="ui:text-[var(--landing-fg-muted)] text-xs">{tag.courseCount}</span>
</label>
{/each}
</div>
</div>
{/each}
<div class="space-y-5">
<div class="space-y-2">
<h3 class="text-sm font-semibold">{$t('public_courses.filters.types_title')}</h3>
<div class="space-y-2">
{#each COURSE_TYPES as courseType (courseType.value)}
<label
class="ui:border-[var(--landing-border)] ui:hover:bg-[var(--landing-card-soft)] flex cursor-pointer items-center gap-2 rounded-md border px-3 py-2"
>
<Checkbox
checked={selectedTypes.includes(courseType.value)}
onCheckedChange={(checked) => toggleType(courseType.value, Boolean(checked))}
/>
<span class="text-sm">{courseType.label}</span>
</label>
{/each}
</div>
</div>
{/if}
<Separator class="ui:bg-[var(--landing-border)]" />
<div class="space-y-2">
<h3 class="text-sm font-semibold">{$t('public_courses.filters.pricing_title')}</h3>
<div class="space-y-2">
{#each [{ value: 'free', label: $t('public_courses.filters.pricing_free') }, { value: 'paid', label: $t('public_courses.filters.pricing_paid') }] as option (option.value)}
<label
class="ui:border-[var(--landing-border)] ui:hover:bg-[var(--landing-card-soft)] flex cursor-pointer items-center gap-2 rounded-md border px-3 py-2"
>
<Checkbox
checked={activePricing === option.value}
onCheckedChange={(checked) =>
applyFilters({ pricing: checked ? (option.value as 'free' | 'paid') : null })}
/>
<span class="text-sm">{option.label}</span>
</label>
{/each}
</div>
</div>
{#if displayTagGroups.length > 0}
<Separator class="ui:bg-[var(--landing-border)]" />
<div class="space-y-2">
<h3 class="text-sm font-semibold">{$t('public_courses.filters.tags_title')}</h3>
</div>
<div class="space-y-5">
{#each displayTagGroups as group (group.id)}
<div class="space-y-2">
<div class="space-y-1">
<h3 class="text-sm font-semibold">{group.name}</h3>
{#if group.description}
<p class="ui:text-[var(--landing-fg-muted)] text-xs">{group.description}</p>
{/if}
</div>
<div class="space-y-2">
{#each group.tags as tag (tag.id)}
<label
class="ui:border-[var(--landing-border)] ui:hover:bg-[var(--landing-card-soft)] flex cursor-pointer items-center justify-between rounded-md border px-3 py-2"
>
<div class="flex items-center gap-2">
<Checkbox
checked={isTagSelected(tag.slug)}
onCheckedChange={(checked) => toggleTag(tag.slug, Boolean(checked))}
/>
<span
class="inline-block h-2.5 w-2.5 rounded-full border"
style={`background-color: ${tag.color}`}
aria-hidden="true"
></span>
<span class="text-sm">{tag.name}</span>
</div>
<span class="ui:text-[var(--landing-fg-muted)] text-xs">{tag.courseCount}</span>
</label>
{/each}
</div>
</div>
{/each}
</div>
{/if}
</div>
</div>
</aside>
packages/db/src/queries/course/course.ts
+41 -2
View File
@@ -11,7 +11,7 @@ import {
TNewCourseSection,
TProfile
} from '@db/types';
import { and, count, desc, eq, ilike, inArray, isNotNull, isNull, or, sql } from 'drizzle-orm';
import { and, count, desc, eq, gt, ilike, inArray, isNotNull, isNull, or, sql } from 'drizzle-orm';
import { ROLE } from '@cio/utils/constants';
import { db, type DbOrTxClient } from '@db/drizzle';
@@ -59,6 +59,9 @@ export interface TStudentCourse extends TBaseCourse {
export const getPublishedCoursesBySiteName = async (
siteName: string,
courseIds?: string[],
courseTypes?: string[],
search?: string,
pricing?: 'free' | 'paid',
limit?: number,
offset?: number
): Promise<TBaseCourse[]> => {
@@ -77,6 +80,21 @@ export const getPublishedCoursesBySiteName = async (
conditions.push(inArray(schema.course.id, courseIds));
}
if (courseTypes && courseTypes.length > 0) {
conditions.push(inArray(schema.course.type, courseTypes as (typeof schema.courseType.enumValues)[number][]));
}
if (search) {
const pattern = `%${search}%`;
conditions.push(or(ilike(schema.course.title, pattern), ilike(schema.course.description, pattern))!);
}
if (pricing === 'free') {
conditions.push(eq(schema.course.cost, 0));
} else if (pricing === 'paid') {
conditions.push(gt(schema.course.cost, 0));
}
const exerciseCountSql = sql<number>`(
SELECT COUNT(*)::bigint
FROM ${schema.exercise} as ex
@@ -127,7 +145,13 @@ export const getPublishedCoursesBySiteName = async (
}
};
export const countPublishedCoursesBySiteName = async (siteName: string, courseIds?: string[]): Promise<number> => {
export const countPublishedCoursesBySiteName = async (
siteName: string,
courseIds?: string[],
courseTypes?: string[],
search?: string,
pricing?: 'free' | 'paid'
): Promise<number> => {
try {
if (courseIds && courseIds.length === 0) {
return 0;
@@ -143,6 +167,21 @@ export const countPublishedCoursesBySiteName = async (siteName: string, courseId
conditions.push(inArray(schema.course.id, courseIds));
}
if (courseTypes && courseTypes.length > 0) {
conditions.push(inArray(schema.course.type, courseTypes as (typeof schema.courseType.enumValues)[number][]));
}
if (search) {
const pattern = `%${search}%`;
conditions.push(or(ilike(schema.course.title, pattern), ilike(schema.course.description, pattern))!);
}
if (pricing === 'free') {
conditions.push(eq(schema.course.cost, 0));
} else if (pricing === 'paid') {
conditions.push(gt(schema.course.cost, 0));
}
const [result] = await db
.select({
total: count(schema.course.id)
packages/ui/src/custom/org-landing-page/bold/hero.svelte
+12 -2
View File
@@ -1,5 +1,6 @@
<script lang="ts">
import type { OrgLandingPageProps } from '../types';
import type { Snippet } from 'svelte';
import SecondaryActionButton from '../secondary-action-button.svelte';
import { Button } from '../../../base/button';
import EditableLandingSection from '../editable-section.svelte';
@@ -7,16 +8,25 @@
interface Props {
hero: OrgLandingPageProps['hero'];
showActions?: boolean;
compact?: boolean;
children?: Snippet;
}
let { hero, showActions = true }: Props = $props();
let { hero, showActions = true, compact = false, children }: Props = $props();
</script>
<EditableLandingSection sectionKey="hero">
<section class="ui:py-10 ui:px-6 ui:max-w-7xl ui:mx-auto ui:grid ui:lg:grid-cols-2 ui:gap-16 ui:items-center">
<section
class="{compact
? 'ui:py-5'
: 'ui:py-10'} ui:px-6 ui:max-w-7xl ui:mx-auto ui:grid ui:lg:grid-cols-2 ui:gap-16 ui:items-center"
>
<div>
<h1 class="ui:text-5xl ui:lg:text-7xl ui:font-black ui:leading-[1.1] ui:tracking-tighter">{hero.heading}</h1>
<p class="ui:text-xl ui:text-[var(--landing-fg-muted)] ui:mb-10 ui:leading-relaxed">{hero.subheading}</p>
{#if children}
<div class="ui:mt-6">{@render children()}</div>
{/if}
{#if showActions}
<div class="ui:flex ui:flex-wrap ui:gap-4">
<Button
packages/ui/src/custom/org-landing-page/classic/hero.svelte
+10 -2
View File
@@ -1,5 +1,6 @@
<script lang="ts">
import type { OrgLandingPageProps } from '../types';
import type { Snippet } from 'svelte';
import SecondaryActionButton from '../secondary-action-button.svelte';
import { Button } from '../../../base/button';
import { BlurIn } from '../../animation/blurin';
@@ -9,14 +10,18 @@
interface Props {
hero: OrgLandingPageProps['hero'];
showActions?: boolean;
compact?: boolean;
children?: Snippet;
}
let { hero, showActions = true }: Props = $props();
let { hero, showActions = true, compact = false, children }: Props = $props();
</script>
<EditableLandingSection sectionKey="hero">
<section
class="ui:relative ui:bg-[var(--landing-fg)] ui:text-[var(--landing-bg)] ui:overflow-hidden ui:py-24 ui:sm:py-32 ui:px-6 ui:lg:px-8"
class="ui:relative ui:bg-[var(--landing-fg)] ui:text-[var(--landing-bg)] ui:overflow-hidden {compact
? 'ui:py-12 ui:sm:py-16'
: 'ui:py-24 ui:sm:py-32'} ui:px-6 ui:lg:px-8"
>
{#if hero.image}
<div class="ui:absolute ui:inset-0 ui:opacity-10">
@@ -31,6 +36,9 @@
{hero.heading}
</BlurIn>
<p class="ui:text-lg ui:sm:text-xl ui:text-[var(--landing-bg)]/80 ui:mb-10">{hero.subheading}</p>
{#if children}
<div class="ui:flex ui:justify-center ui:w-full ui:mb-8">{@render children()}</div>
{/if}
{#if showActions}
<div class="ui:flex ui:flex-col ui:sm:flex-row ui:justify-center ui:gap-4">
<Button
packages/ui/src/custom/org-landing-page/corporate/hero.svelte
+9 -2
View File
@@ -10,9 +10,11 @@
hero: OrgLandingPageProps['hero'];
navigation: Snippet;
showActions?: boolean;
compact?: boolean;
children?: Snippet;
}
let { orgName, hero, navigation, showActions = true }: Props = $props();
let { orgName, hero, navigation, showActions = true, compact = false, children }: Props = $props();
const stats = $derived(hero.stats ?? []);
</script>
@@ -20,7 +22,9 @@
{@render navigation()}
<EditableLandingSection sectionKey="hero">
<section class="ui:px-6 ui:pt-12 ui:pb-24 ui:md:pt-16 ui:md:pb-28">
<section
class="ui:px-6 {compact ? 'ui:pt-6 ui:pb-12 ui:md:pt-8 ui:md:pb-14' : 'ui:pt-12 ui:pb-24 ui:md:pt-16 ui:md:pb-28'}"
>
<div class="ui:max-w-[1120px] ui:mx-auto">
<div class="ui:flex ui:items-center ui:gap-4 ui:pb-5 ui:mb-10 ui:border-b ui:border-[var(--landing-border)]">
<span class="ui:text-[11px] ui:font-semibold ui:tracking-[0.2em] ui:uppercase ui:text-[var(--landing-fg)]">
@@ -48,6 +52,9 @@
{hero.subheading}
</p>
{#if children}
<div class="ui:mt-6">{@render children()}</div>
{/if}
{#if showActions}
<div class="ui:flex ui:flex-wrap ui:items-center ui:gap-3">
<Button
packages/ui/src/custom/org-landing-page/editorial/hero.svelte
+11 -2
View File
@@ -12,9 +12,11 @@
labels?: OrgLandingPageProps['labels'];
navigation: Snippet;
showActions?: boolean;
compact?: boolean;
children?: Snippet;
}
let { hero, courses = [], labels, navigation, showActions = true }: Props = $props();
let { hero, courses = [], labels, navigation, showActions = true, compact = false, children }: Props = $props();
const featured = $derived(courses[0]);
const featuredTypeMeta = $derived(featured ? getCourseTypeLandingMeta(featured) : undefined);
@@ -38,7 +40,11 @@
{@render navigation()}
<EditableLandingSection sectionKey="hero">
<section class="ui:px-6 ui:md:px-8 ui:pt-16 ui:md:pt-20 ui:pb-12 ui:bg-[var(--landing-bg)]">
<section
class="ui:px-6 ui:md:px-8 {compact
? 'ui:pt-8 ui:md:pt-10 ui:pb-6'
: 'ui:pt-16 ui:md:pt-20 ui:pb-12'} ui:bg-[var(--landing-bg)]"
>
<div class="ui:max-w-[1240px] ui:mx-auto">
<div
class="ui:grid ui:grid-cols-1 ui:gap-12 ui:lg:gap-14 ui:items-start {featured
@@ -72,6 +78,9 @@
{hero.subheading}
</p>
{#if children}
<div class="ui:mt-6 {featured ? '' : 'ui:flex ui:justify-center'}">{@render children()}</div>
{/if}
{#if showActions}
<div class="ui:flex ui:flex-wrap ui:items-center ui:gap-2.5 {featured ? '' : 'ui:justify-center'}">
<Button
packages/ui/src/custom/org-landing-page/minimal/hero.svelte
+8 -3
View File
@@ -11,9 +11,11 @@
hero: OrgLandingPageProps['hero'];
navigation: Snippet;
showActions?: boolean;
compact?: boolean;
children?: Snippet;
}
let { hero, navigation, showActions = true }: Props = $props();
let { hero, navigation, showActions = true, compact = false, children }: Props = $props();
const heroGradientBackground = `
radial-gradient(
@@ -32,7 +34,7 @@
<EditableLandingSection sectionKey="hero">
<section
class="ui:relative ui:overflow-hidden ui:px-4 ui:pt-4 ui:pb-16 ui:md:pb-24"
class="ui:relative ui:overflow-hidden ui:px-4 ui:pt-4 {compact ? 'ui:pb-8 ui:md:pb-12' : 'ui:pb-16 ui:md:pb-24'}"
style={`background: ${heroGradientBackground};`}
>
<DotPattern class="ui:opacity-[0.08]" />
@@ -40,7 +42,7 @@
{@render navigation()}
</div>
<div class="ui:relative ui:py-20 ui:text-center ui:max-w-4xl ui:mx-auto">
<div class="ui:relative {compact ? 'ui:py-10' : 'ui:py-20'} ui:text-center ui:max-w-4xl ui:mx-auto">
<h1 class="ui:text-5xl ui:md:text-6xl ui:font-semibold ui:tracking-tight ui:mb-6">{hero.heading}</h1>
<ShinnyText
shimmerWidth={120}
@@ -48,6 +50,9 @@
>
{hero.subheading}
</ShinnyText>
{#if children}
<div class="ui:flex ui:justify-center ui:w-full ui:mb-8">{@render children()}</div>
{/if}
{#if showActions}
<div class="ui:flex ui:items-center ui:justify-center ui:gap-4">
<Button
packages/ui/src/custom/org-landing-page/saas/hero.svelte
+12 -3
View File
@@ -9,18 +9,24 @@
hero: OrgLandingPageProps['hero'];
navigation: Snippet;
showActions?: boolean;
compact?: boolean;
children?: Snippet;
}
let { hero, navigation, showActions = true }: Props = $props();
let { hero, navigation, showActions = true, compact = false, children }: Props = $props();
</script>
<EditableLandingSection sectionKey="hero">
<section class="ui:relative ui:px-6 ui:pt-4 ui:pb-20 ui:md:pb-24">
<section class="ui:relative ui:px-6 ui:pt-4 {compact ? 'ui:pb-10 ui:md:pb-12' : 'ui:pb-20 ui:md:pb-24'}">
<div class="ui:relative ui:max-w-[1180px] ui:mx-auto ui:sticky ui:top-4 ui:z-50">
{@render navigation()}
</div>
<div class="ui:relative ui:max-w-[1180px] ui:mx-auto ui:pt-16 ui:md:pt-20 ui:text-center">
<div
class="ui:relative ui:max-w-[1180px] ui:mx-auto {compact
? 'ui:pt-8 ui:md:pt-10'
: 'ui:pt-16 ui:md:pt-20'} ui:text-center"
>
<h1
class="ui:text-4xl ui:md:text-5xl ui:lg:text-[56px] ui:font-bold ui:tracking-tight ui:leading-[1.05] ui:max-w-3xl ui:mx-auto ui:mb-5"
>
@@ -33,6 +39,9 @@
{hero.subheading}
</p>
{#if children}
<div class="ui:flex ui:justify-center ui:w-full ui:mb-8">{@render children()}</div>
{/if}
{#if showActions}
<div class="ui:flex ui:items-center ui:justify-center ui:gap-2.5">
<Button
packages/ui/src/custom/org-landing-page/studio/hero.svelte
+11 -2
View File
@@ -10,9 +10,11 @@
courses: OrgLandingPageProps['courses'];
navigation: Snippet;
showActions?: boolean;
compact?: boolean;
children?: Snippet;
}
let { hero, courses = [], navigation, showActions = true }: Props = $props();
let { hero, courses = [], navigation, showActions = true, compact = false, children }: Props = $props();
const coursesCount = $derived(courses.length);
@@ -29,7 +31,11 @@
{@render navigation()}
<EditableLandingSection sectionKey="hero">
<section class="ui:relative ui:overflow-hidden ui:px-6 ui:pt-20 ui:pb-20 ui:md:pt-24 ui:md:pb-24">
<section
class="ui:relative ui:overflow-hidden ui:px-6 {compact
? 'ui:pt-10 ui:pb-10 ui:md:pt-12 ui:md:pb-12'
: 'ui:pt-20 ui:pb-20 ui:md:pt-24 ui:md:pb-24'}"
>
<div
class="ui:pointer-events-none ui:absolute ui:-top-32 ui:-left-24 ui:h-[520px] ui:w-[520px] ui:rounded-full ui:opacity-60 ui:blur-3xl"
style="background: radial-gradient(circle, color-mix(in oklab, var(--landing-accent) 35%, transparent) 0%, transparent 70%);"
@@ -59,6 +65,9 @@
{hero.subheading}
</p>
{#if children}
<div class="ui:mt-6">{@render children()}</div>
{/if}
{#if showActions}
<div class="ui:flex ui:flex-wrap ui:items-center ui:gap-2">
<Button
packages/ui/src/custom/org-landing-page/tech/hero.svelte
+12 -3
View File
@@ -9,14 +9,18 @@
hero: OrgLandingPageProps['hero'];
navigation: Snippet;
showActions?: boolean;
compact?: boolean;
children?: Snippet;
}
let { hero, navigation, showActions = true }: Props = $props();
let { hero, navigation, showActions = true, compact = false, children }: Props = $props();
</script>
<EditableLandingSection sectionKey="hero">
<section
class="ui:relative ui:bg-[var(--landing-accent)] ui:text-[var(--landing-accent-fg)] ui:overflow-hidden ui:px-6 ui:pt-2 ui:pb-20"
class="ui:relative ui:bg-[var(--landing-accent)] ui:text-[var(--landing-accent-fg)] ui:overflow-hidden ui:px-6 ui:pt-2 {compact
? 'ui:pb-10'
: 'ui:pb-20'}"
>
<!-- subtle grid overlay -->
<div
@@ -30,7 +34,9 @@
</div>
<div
class="ui:relative ui:max-w-[1280px] ui:mx-auto ui:py-16 ui:lg:py-24 ui:grid ui:lg:grid-cols-2 ui:gap-12 ui:items-center"
class="ui:relative ui:max-w-[1280px] ui:mx-auto {compact
? 'ui:py-8 ui:lg:py-12'
: 'ui:py-16 ui:lg:py-24'} ui:grid ui:lg:grid-cols-2 ui:gap-12 ui:items-center"
>
<div>
<p
@@ -46,6 +52,9 @@
>
{hero.subheading}
</p>
{#if children}
<div class="ui:mt-6">{@render children()}</div>
{/if}
{#if showActions}
<div class="ui:flex ui:flex-wrap ui:items-center ui:gap-3">
<Button
packages/ui/src/custom/org-landing-page/terminal/hero.svelte
+9 -2
View File
@@ -10,9 +10,11 @@
courses: OrgLandingPageProps['courses'];
navigation: Snippet;
showActions?: boolean;
compact?: boolean;
children?: Snippet;
}
let { orgName = '', hero, courses = [], navigation, showActions = true }: Props = $props();
let { orgName = '', hero, courses = [], navigation, showActions = true, compact = false, children }: Props = $props();
const coursesCount = $derived(courses.length);
const learnersCount = $derived(courses.reduce((sum, course) => sum + (course.totalStudents ?? 0), 0));
@@ -63,7 +65,9 @@
<EditableLandingSection sectionKey="hero">
<section
class="ui:relative ui:overflow-hidden ui:px-6 ui:pt-16 ui:pb-16 ui:md:pt-20 ui:md:pb-20 ui:bg-[var(--landing-bg)]"
class="ui:relative ui:overflow-hidden ui:px-6 {compact
? 'ui:pt-8 ui:pb-8 ui:md:pt-10 ui:md:pb-10'
: 'ui:pt-16 ui:pb-16 ui:md:pt-20 ui:md:pb-20'} ui:bg-[var(--landing-bg)]"
>
<div
class="ui:pointer-events-none ui:absolute ui:inset-x-0 ui:-top-32 ui:h-[680px] ui:opacity-90"
@@ -118,6 +122,9 @@
{hero.subheading}
</p>
{#if children}
<div class="ui:flex ui:justify-center ui:w-full ui:mb-8">{@render children()}</div>
{/if}
{#if coursesCount > 0}
<span
class="ui:inline-flex ui:items-center ui:gap-3 ui:px-4 ui:py-2 ui:rounded-full ui:font-mono ui:text-[13px] ui:text-[var(--landing-fg-muted)]"
packages/ui/src/custom/org-landing-page/vibrant/hero.svelte
+9 -2
View File
@@ -10,16 +10,20 @@
labels?: OrgLandingPageProps['labels'];
navigation: Snippet;
showActions?: boolean;
compact?: boolean;
children?: Snippet;
}
let { hero, labels, navigation, showActions = true }: Props = $props();
let { hero, labels, navigation, showActions = true, compact = false, children }: Props = $props();
</script>
{@render navigation()}
<EditableLandingSection sectionKey="hero">
<section
class="ui:relative ui:px-6 ui:md:px-8 ui:pt-20 ui:md:pt-24 ui:pb-20 ui:md:pb-24 ui:bg-[var(--landing-bg)] ui:text-center"
class="ui:relative ui:px-6 ui:md:px-8 {compact
? 'ui:pt-10 ui:md:pt-12 ui:pb-10 ui:md:pb-12'
: 'ui:pt-20 ui:md:pt-24 ui:pb-20 ui:md:pb-24'} ui:bg-[var(--landing-bg)] ui:text-center"
>
<div class="ui:max-w-[1320px] ui:mx-auto">
<h1
@@ -36,6 +40,9 @@
{hero.subheading}
</p>
{#if children}
<div class="ui:flex ui:justify-center ui:w-full ui:mb-8">{@render children()}</div>
{/if}
{#if showActions}
<div class="ui:inline-flex ui:flex-wrap ui:justify-center ui:items-center ui:gap-3">
<Button
packages/ui/src/output.css
+1 -1
View File
File diff suppressed because one or more lines are too long
packages/utils/src/validation/organization/organization.ts
+3
View File
@@ -19,6 +19,9 @@ export type TGetOrganizations = z.infer<typeof ZGetOrganizations>;
export const ZGetCoursesBySiteName = z.object({
siteName: z.string().min(1),
tags: z.string().optional(),
types: z.string().optional(),
search: z.string().trim().optional(),
pricing: z.enum(['free', 'paid']).optional(),
page: z.coerce.number().int().min(1).optional(),
limit: z.coerce.number().int().min(1).max(100).optional()
});