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
@@ -25,7 +25,7 @@
|
||||
</script>
|
||||
|
||||
<Card.Root
|
||||
class="ui:group ui:relative ui:overflow-hidden ui:bg-[var(--landing-bg)] ui:rounded-3xl ui:p-4 ui:flex-col ui:sm:flex-row ui:gap-6 ui:duration-300 ui:h-full ui:border-[var(--landing-border)]/50 {disableCourseLinks
|
||||
class="ui:group ui:@container ui:relative ui:overflow-hidden ui:bg-[var(--landing-bg)] ui:rounded-3xl ui:p-4 ui:duration-300 ui:h-full ui:border-[var(--landing-border)]/50 {disableCourseLinks
|
||||
? ''
|
||||
: 'ui:hover:shadow-xl ui:hover:shadow-primary/5 ui:transition-all'}"
|
||||
>
|
||||
@@ -35,65 +35,67 @@
|
||||
colorFrom="var(--landing-accent)"
|
||||
colorTo="color-mix(in oklab, var(--landing-accent) 65%, white)"
|
||||
/>
|
||||
{#if course.logo}
|
||||
<img
|
||||
src={course.logo}
|
||||
alt={course.title}
|
||||
class="ui:w-full ui:sm:w-48 ui:h-48 ui:object-cover ui:rounded-2xl ui:group-hover:scale-[1.02] ui:transition-transform ui:duration-500"
|
||||
/>
|
||||
{/if}
|
||||
<Card.Content class="ui:p-2 ui:flex ui:flex-col ui:justify-center ui:flex-1">
|
||||
<Card.Title class="ui:text-2xl ui:font-bold ui:mb-2">{course.title}</Card.Title>
|
||||
<Card.Description class="ui:mb-6 ui:line-clamp-2">{course.description}</Card.Description>
|
||||
<div class="ui:flex ui:h-full ui:flex-col ui:@lg:flex-row ui:gap-6">
|
||||
{#if course.logo}
|
||||
<img
|
||||
src={course.logo}
|
||||
alt={course.title}
|
||||
class="ui:w-full ui:@lg:w-48 ui:@lg:shrink-0 ui:h-48 ui:object-cover ui:rounded-2xl ui:group-hover:scale-[1.02] ui:transition-transform ui:duration-500"
|
||||
/>
|
||||
{/if}
|
||||
<Card.Content class="ui:p-2 ui:flex ui:flex-col ui:justify-center ui:flex-1">
|
||||
<Card.Title class="ui:text-2xl ui:font-bold ui:mb-2">{course.title}</Card.Title>
|
||||
<Card.Description class="ui:mb-6 ui:line-clamp-2">{course.description}</Card.Description>
|
||||
|
||||
<div class="ui:flex ui:items-center ui:gap-4 ui:text-sm ui:font-semibold ui:mb-6">
|
||||
{#if course.duration}
|
||||
<div
|
||||
class="ui:flex ui:items-center ui:gap-1.5 ui:text-[var(--landing-fg-muted)] ui:bg-[var(--landing-card-soft)] ui:px-2.5 ui:py-1 ui:rounded-md"
|
||||
>
|
||||
<ClockIcon class="ui:size-3.5" />
|
||||
<span>{course.duration}</span>
|
||||
</div>
|
||||
{/if}
|
||||
{#if courseTypeMeta}
|
||||
{@const TypeIcon = courseTypeMeta.icon}
|
||||
<div
|
||||
class="ui:flex ui:items-center ui:gap-1.5 ui:text-[var(--landing-fg)] ui:bg-[var(--landing-card-soft)] ui:px-2.5 ui:py-1 ui:rounded-md"
|
||||
>
|
||||
<TypeIcon class={courseTypeMeta.iconClass} />
|
||||
<span>{courseTypeMeta.label}</span>
|
||||
</div>
|
||||
{/if}
|
||||
{#if primaryTag}
|
||||
<div
|
||||
class="ui:flex ui:items-center ui:gap-1.5 ui:text-[var(--landing-fg)] ui:bg-[var(--landing-card-soft)] ui:px-2.5 ui:py-1 ui:rounded-md"
|
||||
>
|
||||
<TagIcon class="ui:size-3.5 ui:text-[var(--landing-accent)]" />
|
||||
{#if primaryTag.color}
|
||||
<span
|
||||
class="ui:inline-block ui:h-2 ui:w-2 ui:rounded-full"
|
||||
style={`background-color: ${primaryTag.color}`}
|
||||
aria-hidden="true"
|
||||
></span>
|
||||
{/if}
|
||||
<span>{primaryTag.name}</span>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="ui:flex ui:items-center ui:gap-4 ui:text-sm ui:font-semibold ui:mb-6">
|
||||
{#if course.duration}
|
||||
<div
|
||||
class="ui:flex ui:items-center ui:gap-1.5 ui:text-[var(--landing-fg-muted)] ui:bg-[var(--landing-card-soft)] ui:px-2.5 ui:py-1 ui:rounded-md"
|
||||
>
|
||||
<ClockIcon class="ui:size-3.5" />
|
||||
<span>{course.duration}</span>
|
||||
</div>
|
||||
{/if}
|
||||
{#if courseTypeMeta}
|
||||
{@const TypeIcon = courseTypeMeta.icon}
|
||||
<div
|
||||
class="ui:flex ui:items-center ui:gap-1.5 ui:text-[var(--landing-fg)] ui:bg-[var(--landing-card-soft)] ui:px-2.5 ui:py-1 ui:rounded-md"
|
||||
>
|
||||
<TypeIcon class={courseTypeMeta.iconClass} />
|
||||
<span>{courseTypeMeta.label}</span>
|
||||
</div>
|
||||
{/if}
|
||||
{#if primaryTag}
|
||||
<div
|
||||
class="ui:flex ui:items-center ui:gap-1.5 ui:text-[var(--landing-fg)] ui:bg-[var(--landing-card-soft)] ui:px-2.5 ui:py-1 ui:rounded-md"
|
||||
>
|
||||
<TagIcon class="ui:size-3.5 ui:text-[var(--landing-accent)]" />
|
||||
{#if primaryTag.color}
|
||||
<span
|
||||
class="ui:inline-block ui:h-2 ui:w-2 ui:rounded-full"
|
||||
style={`background-color: ${primaryTag.color}`}
|
||||
aria-hidden="true"
|
||||
></span>
|
||||
{/if}
|
||||
<span>{primaryTag.name}</span>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div class="ui:mt-auto ui:flex ui:items-center ui:justify-between">
|
||||
<span class="ui:font-black ui:text-lg">{course.price || formatCurrency(course.cost, course.currency)}</span>
|
||||
<Button
|
||||
href={disableCourseLinks ? undefined : course.link}
|
||||
variant="outline"
|
||||
class="ui:rounded-lg ui:font-bold ui:text-sm {disableCourseLinks
|
||||
? 'ui:pointer-events-none'
|
||||
: 'ui:hover:bg-[var(--landing-accent)] ui:hover:text-[var(--landing-accent-fg)] ui:group-hover:bg-[var(--landing-accent)] ui:group-hover:text-[var(--landing-accent-fg)] ui:transition-colors'}"
|
||||
aria-disabled={disableCourseLinks}
|
||||
tabindex={disableCourseLinks ? -1 : undefined}
|
||||
>
|
||||
{labels?.enrollLabel ?? 'Details'}
|
||||
</Button>
|
||||
</div>
|
||||
</Card.Content>
|
||||
<div class="ui:mt-auto ui:flex ui:items-center ui:justify-between">
|
||||
<span class="ui:font-black ui:text-lg">{course.price || formatCurrency(course.cost, course.currency)}</span>
|
||||
<Button
|
||||
href={disableCourseLinks ? undefined : course.link}
|
||||
variant="outline"
|
||||
class="ui:rounded-lg ui:font-bold ui:text-sm {disableCourseLinks
|
||||
? 'ui:pointer-events-none'
|
||||
: 'ui:hover:bg-[var(--landing-accent)] ui:hover:text-[var(--landing-accent-fg)] ui:group-hover:bg-[var(--landing-accent)] ui:group-hover:text-[var(--landing-accent-fg)] ui:transition-colors'}"
|
||||
aria-disabled={disableCourseLinks}
|
||||
tabindex={disableCourseLinks ? -1 : undefined}
|
||||
>
|
||||
{labels?.enrollLabel ?? 'Details'}
|
||||
</Button>
|
||||
</div>
|
||||
</Card.Content>
|
||||
</div>
|
||||
</Card.Root>
|
||||
|
||||
@@ -0,0 +1,42 @@
|
||||
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)]',
|
||||
heading:
|
||||
'ui:text-4xl ui:md:text-6xl ui:text-[var(--landing-fg)]' +
|
||||
' ui:[font-weight:var(--landing-heading-weight)]' +
|
||||
' ui:[letter-spacing:var(--landing-heading-tracking)]',
|
||||
socialProofShell: 'ui:py-10 ui:px-4 ui:bg-[var(--landing-fg)] ui:text-[var(--landing-bg)]',
|
||||
socialProofValue: 'ui:text-4xl ui:text-[var(--landing-bg)] ui:[font-weight:var(--landing-heading-weight)]',
|
||||
socialProofLabel: 'ui:text-xs ui:text-[var(--landing-bg)]/70 ui:[letter-spacing:var(--landing-eyebrow-tracking)]',
|
||||
socialProofDivider: 'ui:size-2 ui:rounded-full ui:bg-[var(--landing-accent)]',
|
||||
infoBlock:
|
||||
'ui:flex ui:flex-col ui:gap-3 ui:p-8 ui:border ui:border-[var(--landing-border)]/50' +
|
||||
' ui:[border-radius:var(--landing-radius-card)]',
|
||||
infoBlockHeading:
|
||||
'ui:text-3xl ui:text-[var(--landing-fg)] ui:[font-weight:var(--landing-heading-weight)] ui:[letter-spacing:var(--landing-heading-tracking)]',
|
||||
curriculumModule:
|
||||
'ui:mb-3 ui:p-6 ui:border ui:border-[var(--landing-border)]/50' + ' ui:[border-radius:var(--landing-radius-card)]',
|
||||
curriculumModuleTitle:
|
||||
'ui:text-xl ui:md:text-2xl ui:text-[var(--landing-fg)] ui:[font-weight:var(--landing-heading-weight)] ui:[letter-spacing:var(--landing-heading-tracking)]',
|
||||
curriculumModuleMeta:
|
||||
'ui:text-xs ui:font-medium ui:px-3 ui:py-1 ui:bg-[var(--landing-accent)] ui:text-[var(--landing-accent-fg)]' +
|
||||
' ui:[border-radius:var(--landing-radius-pill)]',
|
||||
instructorShell:
|
||||
'ui:flex ui:flex-col ui:md:flex-row ui:gap-6 ui:items-start ui:p-8' +
|
||||
' ui:border ui:border-[var(--landing-border)]/50 ui:[border-radius:var(--landing-radius-card)]',
|
||||
instructorAvatar: 'ui:size-28 ui:rounded-full ui:object-cover ui:ring-4 ui:ring-[var(--landing-accent)]',
|
||||
instructorName:
|
||||
'ui:text-3xl ui:text-[var(--landing-fg)] ui:[font-weight:var(--landing-heading-weight)] ui:[letter-spacing:var(--landing-heading-tracking)]',
|
||||
reviewCard: 'ui:p-6 ui:border ui:border-[var(--landing-border)]/50 ui:[border-radius:var(--landing-radius-card)]',
|
||||
pricingShell:
|
||||
'ui:p-8 ui:bg-[var(--landing-fg)] ui:text-[var(--landing-bg)]' +
|
||||
' ui:[border-radius:var(--landing-radius-card)] ui:[box-shadow:var(--landing-shadow-card)]',
|
||||
pricingAmount:
|
||||
'ui:text-5xl ui:md:text-6xl ui:text-[var(--landing-bg)]' +
|
||||
' ui:[font-weight:var(--landing-heading-weight)] ui:[letter-spacing:var(--landing-heading-tracking)]',
|
||||
pricingCurrency: 'ui:text-base ui:text-[var(--landing-bg)]/70 ui:ml-1',
|
||||
pricingDiscount: 'ui:text-base ui:text-[var(--landing-bg)]/60 ui:line-through',
|
||||
pricingEyebrow: 'ui:text-xs ui:text-[var(--landing-bg)]/70 ui:[letter-spacing:var(--landing-eyebrow-tracking)]',
|
||||
pricingFeature: 'ui:flex ui:items-center ui:gap-2 ui:text-sm ui:text-[var(--landing-bg)]/90'
|
||||
});
|
||||
@@ -0,0 +1,62 @@
|
||||
<script lang="ts">
|
||||
import type { CourseLandingPageProps } from '../types';
|
||||
import BoldNav from './nav.svelte';
|
||||
import BoldHero 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('bold')}
|
||||
>
|
||||
<BoldNav {orgName} {logoUrl} {navItems} {authAction} />
|
||||
|
||||
<main>
|
||||
<BoldHero hero={heroProps} />
|
||||
|
||||
<CourseSectionNav variant="bold" items={sectionNavItems} {labels} />
|
||||
<CourseSocialProof variant="bold" {socialProof} {labels} />
|
||||
<CourseInfoBlocks variant="bold" {info} {labels} />
|
||||
<CourseCurriculum variant="bold" {curriculum} {labels} />
|
||||
{#if chips}
|
||||
<CourseChips variant="bold" {chips} {labels} />
|
||||
{/if}
|
||||
<CourseInstructor variant="bold" {instructor} {labels} />
|
||||
<CourseReviews variant="bold" {reviews} {labels} />
|
||||
<CoursePricing variant="bold" {pricing} {labels} />
|
||||
</main>
|
||||
|
||||
<OrgLandingPageFooter {orgName} {logoUrl} {footer} variant="bold" />
|
||||
</div>
|
||||
@@ -6,9 +6,10 @@
|
||||
|
||||
interface Props {
|
||||
hero: OrgLandingPageProps['hero'];
|
||||
showActions?: boolean;
|
||||
}
|
||||
|
||||
let { hero }: Props = $props();
|
||||
let { hero, showActions = true }: Props = $props();
|
||||
</script>
|
||||
|
||||
<EditableLandingSection sectionKey="hero">
|
||||
@@ -16,25 +17,29 @@
|
||||
<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>
|
||||
<div class="ui:flex ui:flex-wrap ui:gap-4">
|
||||
<Button
|
||||
href={hero.primaryAction.href}
|
||||
disabled={hero.primaryAction.disabled ?? false}
|
||||
size="lg"
|
||||
class="ui:rounded-xl ui:px-8 ui:py-6 ui:text-base ui:font-bold ui:shadow-lg ui:shadow-[var(--landing-accent)]/20 ui:hover:-translate-y-1 ui:transition-all"
|
||||
>
|
||||
{hero.primaryAction.label}
|
||||
</Button>
|
||||
{#if hero.secondaryAction}
|
||||
<SecondaryActionButton href={hero.secondaryAction.href} label={hero.secondaryAction.label} variant="bold" />
|
||||
{/if}
|
||||
</div>
|
||||
{#if showActions}
|
||||
<div class="ui:flex ui:flex-wrap ui:gap-4">
|
||||
<Button
|
||||
href={hero.primaryAction.href}
|
||||
disabled={hero.primaryAction.disabled ?? false}
|
||||
size="lg"
|
||||
class="ui:rounded-xl ui:px-8 ui:py-6 ui:text-base ui:font-bold ui:shadow-lg ui:shadow-[var(--landing-accent)]/20 ui:hover:-translate-y-1 ui:transition-all"
|
||||
>
|
||||
{hero.primaryAction.label}
|
||||
</Button>
|
||||
{#if hero.secondaryAction}
|
||||
<SecondaryActionButton href={hero.secondaryAction.href} label={hero.secondaryAction.label} variant="bold" />
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{#if hero.image}
|
||||
<div
|
||||
class="ui:absolute ui:inset-0 ui:bg-[var(--landing-accent)]/5 ui:rounded-3xl ui:transform ui:translate-x-4 ui:translate-y-4"
|
||||
></div>
|
||||
<img src={hero.image} alt="Hero" class="ui:relative ui:rounded-3xl ui:w-full ui:h-[500px] ui:object-cover" />
|
||||
<div class="ui:relative">
|
||||
<div
|
||||
class="ui:absolute ui:inset-0 ui:bg-[var(--landing-accent)]/5 ui:rounded-3xl ui:translate-x-4 ui:translate-y-4"
|
||||
></div>
|
||||
<img src={hero.image} alt="Hero" class="ui:relative ui:rounded-3xl ui:w-full ui:h-[500px] ui:object-cover" />
|
||||
</div>
|
||||
{/if}
|
||||
</section>
|
||||
</EditableLandingSection>
|
||||
|
||||
@@ -0,0 +1,7 @@
|
||||
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:@2xl:grid-cols-2 ui:gap-6';
|
||||
@@ -0,0 +1,75 @@
|
||||
<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 BoldNav from './nav.svelte';
|
||||
import BoldHero from './hero.svelte';
|
||||
import BoldCourseCard from './course-card.svelte';
|
||||
import { Button } from '../../../base/button';
|
||||
import { DotPattern } from '../../animation/dot-pattern';
|
||||
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('bold')}
|
||||
>
|
||||
<BoldNav {orgName} {logoUrl} {navItems} {authAction} />
|
||||
|
||||
<main>
|
||||
<BoldHero {hero} />
|
||||
|
||||
<section class="ui:relative ui:bg-[var(--landing-card-soft)]/30 ui:px-6 ui:overflow-hidden ui:mb-12">
|
||||
<DotPattern class="ui:opacity-[0.15]" />
|
||||
<div class="ui:relative ui:max-w-7xl ui:mx-auto">
|
||||
<div class="ui:flex ui:items-end ui:justify-between ui:mb-12">
|
||||
<h2 class="ui:text-4xl ui:font-black ui:tracking-tight">{labels?.catalogHeading ?? 'Latest Courses'}</h2>
|
||||
</div>
|
||||
<div class="ui:grid ui:grid-cols-1 ui:md:grid-cols-2 ui:gap-8">
|
||||
{#each courses as course, index (course.id)}
|
||||
<BoldCourseCard {course} {disableCourseLinks} {labels} />
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
{#if hasMoreCourses}
|
||||
<div class="ui:mt-12 ui:flex ui:justify-center">
|
||||
<Button
|
||||
href={disableCourseLinks ? undefined : '/courses'}
|
||||
size="lg"
|
||||
class="ui:rounded-xl ui:px-8"
|
||||
disabled={disableCourseLinks}
|
||||
>
|
||||
{labels?.browseCoursesLabel ?? 'View more courses'}
|
||||
</Button>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<OrgLandingPageLinks {links} {labels} variant="bold" />
|
||||
|
||||
<OrgLandingPageEmbed {embed} {labels} variant="bold" />
|
||||
|
||||
<OrgLandingPageCallout {callout} {labels} variant="bold" />
|
||||
|
||||
<OrgLandingPageFooter {orgName} {logoUrl} {footer} variant="bold" />
|
||||
</div>
|
||||
@@ -0,0 +1,10 @@
|
||||
import { baseTokenVars, type LandingThemeVars } from '../theme-vars-base';
|
||||
|
||||
export const vars: LandingThemeVars = {
|
||||
...baseTokenVars,
|
||||
'--landing-heading-weight': '900',
|
||||
'--landing-heading-tracking': '-0.02em',
|
||||
'--landing-radius-card': '24px',
|
||||
'--landing-shadow-card': '0 8px 24px -20px color-mix(in oklab, var(--landing-fg), transparent 80%)',
|
||||
'--landing-divider': '1px solid var(--landing-border)'
|
||||
};
|
||||
Reference in New Issue
Block a user