feat: HLS streaming, transcripts, agent course generation & landing-page course previews (#663)
New features: - HLS video encoding/streaming (hls routes, hls-encoder) and a media transcripts pipeline (transcripts route + media-transcript queries) - AI assistant chat vs. run model: agent-course-generation worker/queue, run-monitor pane, chat-changes card, content ask-ai bar - Per-theme course-page previews across org landing-page themes (bold, classic, corporate, editorial, etc.) with a shared course token/component set - View-as-student mode and login-link / link-invite invite flows Refactor: - Extract packages/core consolidating config (env, storage, dashboard-url), services and utils previously duplicated under apps/api/src/config - Remove legacy agent service modules (chat-tools, chat-context, context-window, document, fetch-url, lesson-content) - Relax Cross-Origin-Resource-Policy to allow cross-origin media embedding - Add format script to tenant-router so turbo run format covers it
This commit is contained in:
Rotimi Best
@@ -2,8 +2,6 @@
|
||||
import { goto } from '$app/navigation';
|
||||
import { page } from '$app/state';
|
||||
import { resolve } from '$app/paths';
|
||||
import { onMount } from 'svelte';
|
||||
import type { Component } from 'svelte';
|
||||
import { SvelteSet, SvelteURLSearchParams } from 'svelte/reactivity';
|
||||
|
||||
import { t } from '$lib/utils/functions/translations';
|
||||
@@ -13,10 +11,7 @@
|
||||
import { PoweredBy } from '$features/ui';
|
||||
import LibraryBigIcon from '@lucide/svelte/icons/library-big';
|
||||
import {
|
||||
importThemeCourseCard,
|
||||
importThemeNavHero,
|
||||
normalizeLandingPageSettings,
|
||||
themeCourseGridClass,
|
||||
themeHeaderShellClass,
|
||||
themeStyle,
|
||||
themeRendersNavInsideHero
|
||||
@@ -27,6 +22,7 @@
|
||||
import { Checkbox } from '@cio/ui/base/checkbox';
|
||||
import { Empty } from '@cio/ui/custom/empty';
|
||||
import { Separator } from '@cio/ui/base/separator';
|
||||
import * as Pagination from '@cio/ui/base/pagination';
|
||||
|
||||
let { data } = $props();
|
||||
|
||||
@@ -49,24 +45,11 @@
|
||||
const shellClass = $derived(`ui:min-h-screen ${themeHeaderShellClass(landingSettings.theme)}`);
|
||||
const shellStyle = $derived(themeStyle(landingSettings.theme));
|
||||
const navInsideHero = $derived(themeRendersNavInsideHero(landingSettings.theme));
|
||||
const courseGridClass = $derived(themeCourseGridClass(landingSettings.theme));
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
let NavComponent = $state<Component<any> | null>(null);
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
let HeroComponent = $state<Component<any> | null>(null);
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
let CourseCardComponent = $state<Component<any> | null>(null);
|
||||
|
||||
onMount(async () => {
|
||||
const [navHero, cardComponent] = await Promise.all([
|
||||
importThemeNavHero(landingSettings.theme),
|
||||
importThemeCourseCard(landingSettings.theme)
|
||||
]);
|
||||
NavComponent = navHero.NavComponent;
|
||||
HeroComponent = navHero.HeroComponent;
|
||||
CourseCardComponent = cardComponent;
|
||||
});
|
||||
const NavComponent = $derived(data.theme.Nav);
|
||||
const HeroComponent = $derived(data.theme.Hero);
|
||||
const CourseCardComponent = $derived(data.theme.CourseCard);
|
||||
const courseGridClass = $derived(data.theme.coursesGridClass);
|
||||
|
||||
const heroProps = $derived({
|
||||
...landingSettings.hero,
|
||||
@@ -83,6 +66,8 @@
|
||||
params.delete('tags');
|
||||
}
|
||||
|
||||
params.delete('page');
|
||||
|
||||
const query = params.toString();
|
||||
const suffix = query ? `?${query}` : '';
|
||||
|
||||
@@ -93,6 +78,25 @@
|
||||
});
|
||||
}
|
||||
|
||||
async function goToPage(nextPage: number) {
|
||||
if (nextPage === data.pagination.page) {
|
||||
return;
|
||||
}
|
||||
|
||||
const params = new SvelteURLSearchParams(page.url.searchParams);
|
||||
|
||||
if (nextPage > 1) {
|
||||
params.set('page', String(nextPage));
|
||||
} else {
|
||||
params.delete('page');
|
||||
}
|
||||
|
||||
const query = params.toString();
|
||||
const suffix = query ? `?${query}` : '';
|
||||
|
||||
await goto(resolve(`/courses${suffix}`, {}), { invalidateAll: true });
|
||||
}
|
||||
|
||||
function toggleTag(tagSlug: string, checked: boolean) {
|
||||
const next = new SvelteSet(selectedTags);
|
||||
if (checked) {
|
||||
@@ -142,27 +146,25 @@
|
||||
<PoweredBy />
|
||||
|
||||
<main class={shellClass} style={shellStyle}>
|
||||
{#if NavComponent && HeroComponent}
|
||||
{#if navInsideHero}
|
||||
<HeroComponent hero={heroProps} orgName={data.org.name}>
|
||||
{#snippet navigation()}
|
||||
<NavComponent
|
||||
orgName={data.org.name}
|
||||
logoUrl={data.org.avatarUrl ?? undefined}
|
||||
navItems={landingSettings.navItems}
|
||||
{authAction}
|
||||
/>
|
||||
{/snippet}
|
||||
</HeroComponent>
|
||||
{:else}
|
||||
<NavComponent
|
||||
orgName={data.org.name}
|
||||
logoUrl={data.org.avatarUrl ?? undefined}
|
||||
navItems={landingSettings.navItems}
|
||||
{authAction}
|
||||
/>
|
||||
<HeroComponent hero={heroProps} orgName={data.org.name} />
|
||||
{/if}
|
||||
{#if navInsideHero}
|
||||
<HeroComponent hero={heroProps} orgName={data.org.name} showActions={false}>
|
||||
{#snippet navigation()}
|
||||
<NavComponent
|
||||
orgName={data.org.name}
|
||||
logoUrl={data.org.avatarUrl ?? undefined}
|
||||
navItems={landingSettings.navItems}
|
||||
{authAction}
|
||||
/>
|
||||
{/snippet}
|
||||
</HeroComponent>
|
||||
{:else}
|
||||
<NavComponent
|
||||
orgName={data.org.name}
|
||||
logoUrl={data.org.avatarUrl ?? undefined}
|
||||
navItems={landingSettings.navItems}
|
||||
{authAction}
|
||||
/>
|
||||
<HeroComponent hero={heroProps} orgName={data.org.name} showActions={false} />
|
||||
{/if}
|
||||
|
||||
<section class="mx-auto w-full max-w-7xl px-4 py-8 md:px-6">
|
||||
@@ -172,58 +174,60 @@
|
||||
</LandingButton>
|
||||
</div>
|
||||
|
||||
<div class="grid gap-8 lg:grid-cols-[280px_minmax(0,1fr)]">
|
||||
<div class="grid grid-cols-[minmax(0,9.5rem)_minmax(0,1fr)] gap-4 lg:grid-cols-[280px_minmax(0,1fr)] lg:gap-8">
|
||||
<aside
|
||||
class="ui:bg-[var(--landing-card)] ui:text-[var(--landing-fg)] ui:border-[var(--landing-border)] space-y-4 rounded-lg border p-4"
|
||||
class="ui:bg-[var(--landing-card)] ui:text-[var(--landing-fg)] ui:border-[var(--landing-border)] sticky top-4 flex max-h-[calc(100dvh-2rem)] flex-col self-start rounded-lg border"
|
||||
>
|
||||
<div>
|
||||
<div class="p-4 pb-3">
|
||||
<h2 class="text-base font-semibold">{$t('public_courses.filters.title')}</h2>
|
||||
<p class="ui:text-[var(--landing-fg-muted)] text-xs">{$t('public_courses.filters.help')}</p>
|
||||
</div>
|
||||
|
||||
<Separator class="ui:bg-[var(--landing-border)]" />
|
||||
|
||||
{#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="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">
|
||||
{#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 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>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<div class="space-y-4">
|
||||
<div class="ui:@container space-y-4">
|
||||
{#if data.courses.length === 0}
|
||||
<Empty
|
||||
icon={LibraryBigIcon}
|
||||
@@ -231,12 +235,46 @@
|
||||
description={$t('public_courses.empty.description')}
|
||||
variant="page"
|
||||
/>
|
||||
{:else if CourseCardComponent}
|
||||
{:else}
|
||||
<div class={courseGridClass}>
|
||||
{#each data.courses as course, index (course.id)}
|
||||
<CourseCardComponent {course} {index} />
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
{#if data.pagination.totalPages > 1}
|
||||
<Pagination.Root
|
||||
count={data.pagination.total}
|
||||
perPage={data.pagination.perPage}
|
||||
page={data.pagination.page}
|
||||
onPageChange={goToPage}
|
||||
class="mt-8"
|
||||
>
|
||||
{#snippet children({ pages, currentPage })}
|
||||
<Pagination.Content>
|
||||
<Pagination.Item>
|
||||
<Pagination.PrevButton />
|
||||
</Pagination.Item>
|
||||
{#each pages as pageItem (pageItem.key)}
|
||||
{#if pageItem.type === 'ellipsis'}
|
||||
<Pagination.Item>
|
||||
<Pagination.Ellipsis />
|
||||
</Pagination.Item>
|
||||
{:else}
|
||||
<Pagination.Item>
|
||||
<Pagination.Link page={pageItem} isActive={currentPage === pageItem.value}>
|
||||
{pageItem.value}
|
||||
</Pagination.Link>
|
||||
</Pagination.Item>
|
||||
{/if}
|
||||
{/each}
|
||||
<Pagination.Item>
|
||||
<Pagination.NextButton />
|
||||
</Pagination.Item>
|
||||
</Pagination.Content>
|
||||
{/snippet}
|
||||
</Pagination.Root>
|
||||
{/if}
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user