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
@@ -0,0 +1,58 @@
|
||||
import { tokenize, type CourseLandingTokens } from '../course-tokens-base';
|
||||
|
||||
export const courseTokens: CourseLandingTokens = tokenize({
|
||||
sectionShell: 'ui:py-14 ui:md:py-16 ui:px-4 ui:bg-[var(--landing-bg)]',
|
||||
sectionNavItem: 'ui:font-mono',
|
||||
eyebrow:
|
||||
'ui:text-xs ui:font-mono ui:text-[var(--landing-accent)]' +
|
||||
' ui:[letter-spacing:var(--landing-eyebrow-tracking)]' +
|
||||
' ui:[text-transform:var(--landing-eyebrow-case)]',
|
||||
heading:
|
||||
'ui:text-3xl ui:md:text-5xl ui:text-[var(--landing-fg)]' +
|
||||
' ui:[font-weight:var(--landing-heading-weight)]' +
|
||||
' ui:[letter-spacing:var(--landing-heading-tracking)]',
|
||||
body: 'ui:text-base ui:text-[var(--landing-fg-muted)] ui:leading-relaxed ui:font-mono',
|
||||
socialProofShell: 'ui:py-8 ui:px-4 ui:border-y ui:border-dashed ui:border-[var(--landing-border)]',
|
||||
socialProofValue:
|
||||
'ui:text-3xl ui:font-mono ui:text-[var(--landing-accent)]' + ' ui:[font-weight:var(--landing-heading-weight)]',
|
||||
socialProofLabel:
|
||||
'ui:text-xs ui:font-mono ui:text-[var(--landing-fg-muted)]' +
|
||||
' ui:[letter-spacing:var(--landing-eyebrow-tracking)]' +
|
||||
' ui:[text-transform:var(--landing-eyebrow-case)]',
|
||||
socialProofDivider: 'ui:text-[var(--landing-fg-muted)] ui:font-mono',
|
||||
infoGrid: 'ui:grid ui:grid-cols-1 ui:md:grid-cols-2 ui:border-t ui:border-l ui:border-[var(--landing-border)]',
|
||||
infoBlock: 'ui:flex ui:flex-col ui:gap-3 ui:p-8 ui:border-r ui:border-b ui:border-[var(--landing-border)]',
|
||||
infoBlockEyebrow:
|
||||
'ui:text-xs ui:font-mono ui:text-[var(--landing-accent)]' + ' ui:[letter-spacing:var(--landing-eyebrow-tracking)]',
|
||||
curriculumContainer: 'ui:border-t ui:border-l ui:border-[var(--landing-border)]',
|
||||
curriculumModule: 'ui:border-r ui:border-b ui:border-[var(--landing-border)] ui:py-0',
|
||||
curriculumModuleHeader:
|
||||
'ui:flex ui:flex-col ui:items-start ui:gap-2 ui:px-6 ui:py-4 ui:cursor-pointer ui:text-left ui:md:flex-row ui:md:items-center ui:md:justify-between ui:md:gap-4',
|
||||
curriculumModuleMeta:
|
||||
'ui:text-xs ui:font-mono ui:text-[var(--landing-accent)] ui:px-2 ui:py-1' +
|
||||
' ui:border ui:border-[var(--landing-border)]',
|
||||
curriculumLessonRow:
|
||||
'ui:flex ui:items-center ui:gap-3 ui:px-6 ui:py-3 ui:border-t ui:border-dashed ui:border-[var(--landing-border)]',
|
||||
curriculumLessonPrefix: 'ui:text-xs ui:text-[var(--landing-fg-muted)] ui:font-mono',
|
||||
reviewsGrid: 'ui:grid ui:grid-cols-1 ui:md:grid-cols-3 ui:border-t ui:border-l ui:border-[var(--landing-border)]',
|
||||
reviewCard: 'ui:p-6 ui:border-r ui:border-b ui:border-[var(--landing-border)] ui:bg-[var(--landing-bg)]',
|
||||
reviewName: 'ui:text-sm ui:font-mono ui:text-[var(--landing-fg)] ui:font-medium',
|
||||
reviewDate: 'ui:text-xs ui:font-mono ui:text-[var(--landing-fg-muted)]',
|
||||
chip:
|
||||
'ui:inline-flex ui:items-center ui:px-3 ui:py-1.5 ui:text-xs ui:font-mono' +
|
||||
' ui:bg-transparent ui:text-[var(--landing-fg)] ui:border ui:border-[var(--landing-border)]' +
|
||||
' ui:hover:border-[var(--landing-accent)] ui:hover:text-[var(--landing-accent)]' +
|
||||
' ui:transition-colors',
|
||||
chipsShowAll:
|
||||
'ui:text-xs ui:font-mono ui:text-[var(--landing-accent)]' +
|
||||
' ui:[letter-spacing:var(--landing-eyebrow-tracking)]' +
|
||||
' ui:[text-transform:var(--landing-eyebrow-case)]' +
|
||||
' ui:cursor-pointer ui:ml-2 ui:bg-transparent ui:border-0',
|
||||
instructorShell:
|
||||
'ui:grid ui:grid-cols-1 ui:md:grid-cols-[auto_1fr] ui:border-t ui:border-l ui:border-[var(--landing-border)]',
|
||||
instructorAvatarWrap:
|
||||
'ui:border-r ui:border-b ui:border-[var(--landing-border)] ui:p-6 ui:flex ui:items-center ui:justify-center',
|
||||
instructorAvatar: 'ui:size-24 ui:object-cover ui:rounded-none',
|
||||
pricingShell: 'ui:p-6 ui:border ui:border-[var(--landing-border)] ui:bg-[var(--landing-card)]',
|
||||
pricingAmount: 'ui:text-5xl ui:font-mono ui:text-[var(--landing-fg)] ui:[font-weight:var(--landing-heading-weight)]'
|
||||
});
|
||||
@@ -0,0 +1,64 @@
|
||||
<script lang="ts">
|
||||
import type { CourseLandingPageProps } from '../types';
|
||||
import TechNav from './nav.svelte';
|
||||
import TechHero from './hero.svelte';
|
||||
import OrgLandingPageFooter from '../landing-page-footer.svelte';
|
||||
import CourseSocialProof from '../course-social-proof.svelte';
|
||||
import CourseInfoBlocks from '../course-info-blocks.svelte';
|
||||
import CourseCurriculum from '../course-curriculum.svelte';
|
||||
import CourseChips from '../course-chips.svelte';
|
||||
import CourseSectionNav from '../course-section-nav.svelte';
|
||||
import CourseInstructor from '../course-instructor.svelte';
|
||||
import CourseReviews from '../course-reviews.svelte';
|
||||
import CoursePricing from '../course-pricing.svelte';
|
||||
import { themeStyle } from '../theme-style';
|
||||
import { alignHeroCtaWithPricing, buildCourseSectionNavItems } from '../course-landing-page.helpers';
|
||||
|
||||
let {
|
||||
orgName,
|
||||
logoUrl,
|
||||
navItems,
|
||||
authAction,
|
||||
hero,
|
||||
socialProof,
|
||||
info,
|
||||
curriculum,
|
||||
chips,
|
||||
instructor,
|
||||
reviews,
|
||||
pricing,
|
||||
footer,
|
||||
labels
|
||||
}: CourseLandingPageProps = $props();
|
||||
|
||||
const heroProps = $derived(alignHeroCtaWithPricing(hero, pricing));
|
||||
const sectionNavItems = $derived(
|
||||
buildCourseSectionNavItems({ info, curriculum, chips, instructor, reviews }, labels)
|
||||
);
|
||||
</script>
|
||||
|
||||
<div
|
||||
class="ui:min-h-screen ui:bg-[var(--landing-bg)] ui:text-[var(--landing-fg)] ui:font-sans"
|
||||
style={themeStyle('tech')}
|
||||
>
|
||||
<main>
|
||||
<TechHero hero={heroProps}>
|
||||
{#snippet navigation()}
|
||||
<TechNav {orgName} {logoUrl} {navItems} {authAction} />
|
||||
{/snippet}
|
||||
</TechHero>
|
||||
|
||||
<CourseSectionNav variant="tech" items={sectionNavItems} {labels} />
|
||||
<CourseSocialProof variant="tech" {socialProof} {labels} />
|
||||
<CourseInfoBlocks variant="tech" {info} {labels} />
|
||||
<CourseCurriculum variant="tech" {curriculum} {labels} />
|
||||
{#if chips}
|
||||
<CourseChips variant="tech" {chips} {labels} />
|
||||
{/if}
|
||||
<CourseInstructor variant="tech" {instructor} {labels} />
|
||||
<CourseReviews variant="tech" {reviews} {labels} />
|
||||
<CoursePricing variant="tech" {pricing} {labels} />
|
||||
</main>
|
||||
|
||||
<OrgLandingPageFooter {orgName} {logoUrl} {footer} variant="tech" />
|
||||
</div>
|
||||
@@ -8,9 +8,10 @@
|
||||
interface Props {
|
||||
hero: OrgLandingPageProps['hero'];
|
||||
navigation: Snippet;
|
||||
showActions?: boolean;
|
||||
}
|
||||
|
||||
let { hero, navigation }: Props = $props();
|
||||
let { hero, navigation, showActions = true }: Props = $props();
|
||||
</script>
|
||||
|
||||
<EditableLandingSection sectionKey="hero">
|
||||
@@ -45,20 +46,26 @@
|
||||
>
|
||||
{hero.subheading}
|
||||
</p>
|
||||
<div class="ui:flex ui:flex-wrap ui:items-center ui:gap-3">
|
||||
<Button
|
||||
href={hero.primaryAction.href}
|
||||
disabled={hero.primaryAction.disabled ?? false}
|
||||
size="lg"
|
||||
variant="secondary"
|
||||
class="ui:rounded-none ui:px-7 ui:font-semibold ui:bg-[var(--landing-accent-fg)] ui:text-[var(--landing-accent)] ui:hover:bg-[var(--landing-accent-fg)]/90"
|
||||
>
|
||||
{hero.primaryAction.label}
|
||||
</Button>
|
||||
{#if hero.secondaryAction}
|
||||
<SecondaryActionButton href={hero.secondaryAction.href} label={hero.secondaryAction.label} variant="tech" />
|
||||
{/if}
|
||||
</div>
|
||||
{#if showActions}
|
||||
<div class="ui:flex ui:flex-wrap ui:items-center ui:gap-3">
|
||||
<Button
|
||||
href={hero.primaryAction.href}
|
||||
disabled={hero.primaryAction.disabled ?? false}
|
||||
size="lg"
|
||||
variant="secondary"
|
||||
class="ui:rounded-none ui:px-7 ui:font-semibold ui:bg-[var(--landing-accent-fg)] ui:text-[var(--landing-accent)] ui:hover:bg-[var(--landing-accent-fg)]/90"
|
||||
>
|
||||
{hero.primaryAction.label}
|
||||
</Button>
|
||||
{#if hero.secondaryAction}
|
||||
<SecondaryActionButton
|
||||
href={hero.secondaryAction.href}
|
||||
label={hero.secondaryAction.label}
|
||||
variant="tech"
|
||||
/>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
{#if hero.image}
|
||||
|
||||
@@ -0,0 +1,8 @@
|
||||
export { default as nav } from './nav.svelte';
|
||||
export { default as hero } from './hero.svelte';
|
||||
export { default as courseCard } from './course-card.svelte';
|
||||
export { default as org } from './org.svelte';
|
||||
export { default as course } from './course.svelte';
|
||||
|
||||
export const coursesGridClass =
|
||||
'ui:grid ui:grid-cols-1 ui:@xl:grid-cols-2 ui:@4xl:grid-cols-3 ui:border-t ui:border-l ui:border-[var(--landing-border)]';
|
||||
@@ -0,0 +1,86 @@
|
||||
<script lang="ts">
|
||||
import type { OrgLandingPageProps } from '../types';
|
||||
import OrgLandingPageEmbed from '../embed.svelte';
|
||||
import OrgLandingPageLinks from '../links.svelte';
|
||||
import OrgLandingPageCallout from '../callout.svelte';
|
||||
import OrgLandingPageFooter from '../landing-page-footer.svelte';
|
||||
import TechNav from './nav.svelte';
|
||||
import TechHero from './hero.svelte';
|
||||
import TechCourseCard from './course-card.svelte';
|
||||
import { Button } from '../../../base/button';
|
||||
import { themeStyle } from '../theme-style';
|
||||
|
||||
let {
|
||||
orgName,
|
||||
logoUrl,
|
||||
navItems,
|
||||
authAction,
|
||||
hero,
|
||||
courses,
|
||||
hasMoreCourses = false,
|
||||
disableCourseLinks = false,
|
||||
embed,
|
||||
callout,
|
||||
links,
|
||||
footer,
|
||||
labels
|
||||
}: OrgLandingPageProps = $props();
|
||||
</script>
|
||||
|
||||
<div
|
||||
class="ui:min-h-screen ui:bg-[var(--landing-bg)] ui:text-[var(--landing-fg)] ui:font-sans"
|
||||
style={themeStyle('tech')}
|
||||
>
|
||||
<main>
|
||||
<TechHero {hero}>
|
||||
{#snippet navigation()}
|
||||
<TechNav {orgName} {logoUrl} {navItems} {authAction} />
|
||||
{/snippet}
|
||||
</TechHero>
|
||||
|
||||
{#if courses.length > 0}
|
||||
<section class="ui:py-24 ui:px-6">
|
||||
<div class="ui:max-w-[1280px] ui:mx-auto">
|
||||
<div class="ui:flex ui:items-end ui:justify-between ui:flex-wrap ui:gap-4 ui:mb-14">
|
||||
<div>
|
||||
<p
|
||||
class="ui:font-mono ui:text-xs ui:tracking-widest ui:uppercase ui:text-[var(--landing-accent)] ui:mb-3"
|
||||
>
|
||||
{labels?.catalogEyebrow ?? '// catalog'}
|
||||
</p>
|
||||
<h2 class="ui:text-4xl ui:lg:text-5xl ui:font-extrabold ui:tracking-tight ui:m-0">
|
||||
{labels?.catalogHeading ?? 'Latest courses'}
|
||||
</h2>
|
||||
</div>
|
||||
{#if hasMoreCourses}
|
||||
<Button
|
||||
href={disableCourseLinks ? undefined : '/courses'}
|
||||
variant="outline"
|
||||
class="ui:rounded-none ui:font-mono ui:text-sm"
|
||||
disabled={disableCourseLinks}
|
||||
>
|
||||
{labels?.browseCoursesLabel ?? 'view all →'}
|
||||
</Button>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="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)]"
|
||||
>
|
||||
{#each courses as course, index (course.id)}
|
||||
<TechCourseCard {course} {disableCourseLinks} {labels} />
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{/if}
|
||||
</main>
|
||||
|
||||
<OrgLandingPageLinks {links} {labels} variant="tech" />
|
||||
|
||||
<OrgLandingPageEmbed {embed} {labels} variant="tech" />
|
||||
|
||||
<OrgLandingPageCallout {callout} {labels} variant="tech" />
|
||||
|
||||
<OrgLandingPageFooter {orgName} {logoUrl} {footer} variant="tech" />
|
||||
</div>
|
||||
@@ -0,0 +1,13 @@
|
||||
import { baseTokenVars, type LandingThemeVars } from '../theme-vars-base';
|
||||
|
||||
export const vars: LandingThemeVars = {
|
||||
...baseTokenVars,
|
||||
'--landing-heading-weight': '800',
|
||||
'--landing-heading-tracking': '-0.01em',
|
||||
'--landing-eyebrow-tracking': '0.18em',
|
||||
'--landing-eyebrow-case': 'uppercase',
|
||||
'--landing-radius-card': '0px',
|
||||
'--landing-radius-pill': '0px',
|
||||
'--landing-divider': '1px dashed var(--landing-border)',
|
||||
'--landing-mono-family': 'ui-monospace, "JetBrains Mono", "Fira Code", monospace'
|
||||
};
|
||||
Reference in New Issue
Block a user