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,29 @@
|
||||
import { tokenize, type CourseLandingTokens } from '../course-tokens-base';
|
||||
|
||||
export const courseTokens: CourseLandingTokens = tokenize({
|
||||
sectionShell: 'ui:py-12 ui:md:py-14 ui:px-4 ui:bg-[var(--landing-bg)]',
|
||||
infoGrid: 'ui:grid ui:grid-cols-1 ui:md:grid-cols-2 ui:gap-6',
|
||||
infoBlock:
|
||||
'ui:flex ui:flex-col ui:gap-3 ui:p-8' +
|
||||
' ui:border ui:border-[var(--landing-border)] ui:[border-radius:var(--landing-radius-card)]',
|
||||
reviewsGrid: 'ui:grid ui:grid-cols-1 ui:md:grid-cols-3 ui:gap-4',
|
||||
reviewCard: 'ui:p-6 ui:border ui:border-[var(--landing-border)] ui:[border-radius:var(--landing-radius-card)]',
|
||||
curriculumContainer:
|
||||
'ui:border ui:border-[var(--landing-border)]' + ' ui:[border-radius:var(--landing-radius-card)] ui:overflow-hidden',
|
||||
curriculumModule: 'ui:border-t ui:border-[var(--landing-border)] ui:first:border-t-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',
|
||||
curriculumLessonRow:
|
||||
'ui:flex ui:items-center ui:gap-3 ui:px-6 ui:py-3' + ' ui:border-t ui:border-[var(--landing-border)]/60',
|
||||
socialProofShell: 'ui:py-8 ui:px-4 ui:border-y ui:border-[var(--landing-border)]',
|
||||
pricingShell:
|
||||
'ui:p-8 ui:border ui:border-[var(--landing-border)]' +
|
||||
' ui:[border-radius:var(--landing-radius-card)] ui:[box-shadow:var(--landing-shadow-card)]',
|
||||
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)] ui:[border-radius:var(--landing-radius-card)]',
|
||||
instructorAvatarWrap: 'ui:shrink-0',
|
||||
instructorBodyWrap: 'ui:flex-1',
|
||||
instructorAvatar: 'ui:size-24 ui:rounded-full ui:object-cover ui:border ui:border-[var(--landing-border)]',
|
||||
instructorBody: 'ui:text-sm ui:text-[var(--landing-fg-muted)] ui:leading-relaxed ui:mt-3'
|
||||
});
|
||||
@@ -0,0 +1,64 @@
|
||||
<script lang="ts">
|
||||
import type { CourseLandingPageProps } from '../types';
|
||||
import SaasNav from './nav.svelte';
|
||||
import SaasHero 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('saas')}
|
||||
>
|
||||
<main>
|
||||
<SaasHero hero={heroProps}>
|
||||
{#snippet navigation()}
|
||||
<SaasNav {orgName} {logoUrl} {navItems} {authAction} />
|
||||
{/snippet}
|
||||
</SaasHero>
|
||||
|
||||
<CourseSectionNav variant="saas" items={sectionNavItems} {labels} />
|
||||
<CourseSocialProof variant="saas" {socialProof} {labels} />
|
||||
<CourseInfoBlocks variant="saas" {info} {labels} />
|
||||
<CourseCurriculum variant="saas" {curriculum} {labels} />
|
||||
{#if chips}
|
||||
<CourseChips variant="saas" {chips} {labels} />
|
||||
{/if}
|
||||
<CourseInstructor variant="saas" {instructor} {labels} />
|
||||
<CourseReviews variant="saas" {reviews} {labels} />
|
||||
<CoursePricing variant="saas" {pricing} {labels} />
|
||||
</main>
|
||||
|
||||
<OrgLandingPageFooter {orgName} {logoUrl} {footer} variant="saas" />
|
||||
</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">
|
||||
@@ -32,19 +33,21 @@
|
||||
{hero.subheading}
|
||||
</p>
|
||||
|
||||
<div class="ui:flex ui:items-center ui:justify-center ui:gap-2.5">
|
||||
<Button
|
||||
href={hero.primaryAction.href}
|
||||
disabled={hero.primaryAction.disabled ?? false}
|
||||
size="lg"
|
||||
class="ui:rounded-full ui:px-6"
|
||||
>
|
||||
{hero.primaryAction.label}
|
||||
</Button>
|
||||
{#if hero.secondaryAction}
|
||||
<SecondaryActionButton href={hero.secondaryAction.href} label={hero.secondaryAction.label} variant="saas" />
|
||||
{/if}
|
||||
</div>
|
||||
{#if showActions}
|
||||
<div class="ui:flex ui:items-center ui:justify-center ui:gap-2.5">
|
||||
<Button
|
||||
href={hero.primaryAction.href}
|
||||
disabled={hero.primaryAction.disabled ?? false}
|
||||
size="lg"
|
||||
class="ui:rounded-full ui:px-6"
|
||||
>
|
||||
{hero.primaryAction.label}
|
||||
</Button>
|
||||
{#if hero.secondaryAction}
|
||||
<SecondaryActionButton href={hero.secondaryAction.href} label={hero.secondaryAction.label} variant="saas" />
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if hero.image}
|
||||
<div class="ui:mt-16 ui:max-w-4xl ui:mx-auto">
|
||||
|
||||
@@ -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:gap-px ui:bg-[var(--landing-border)] ui:border ui:border-[var(--landing-border)]';
|
||||
@@ -0,0 +1,218 @@
|
||||
<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 SaasNav from './nav.svelte';
|
||||
import SaasHero from './hero.svelte';
|
||||
import SaasCourseCard 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="saas-root ui:min-h-screen ui:bg-[var(--landing-bg)] ui:text-[var(--landing-fg)] ui:font-sans"
|
||||
style={themeStyle('saas')}
|
||||
>
|
||||
<div class="frame">
|
||||
<SaasHero {hero}>
|
||||
{#snippet navigation()}
|
||||
<SaasNav {orgName} {logoUrl} {navItems} {authAction} />
|
||||
{/snippet}
|
||||
</SaasHero>
|
||||
|
||||
{#if courses.length > 0}
|
||||
<div class="plus-row"></div>
|
||||
|
||||
<section class="ui:py-12 ui:md:py-20 ui:px-4 ui:md:px-6">
|
||||
<div class="ui:max-w-[1180px] ui:mx-auto">
|
||||
<div
|
||||
class="ui:flex ui:flex-col ui:md:flex-row ui:md:items-end ui:md:justify-between ui:gap-4 ui:mb-8 ui:md:mb-12"
|
||||
>
|
||||
<div>
|
||||
<p
|
||||
class="ui:text-xs ui:font-semibold ui:tracking-widest ui:uppercase ui:text-[var(--landing-accent)] ui:mb-3"
|
||||
>
|
||||
{labels?.catalogEyebrow ?? 'Catalog'}
|
||||
</p>
|
||||
<h2 class="ui:text-3xl ui:md:text-4xl ui:font-bold ui:tracking-tight">
|
||||
{labels?.catalogHeading ?? 'Featured programs.'}
|
||||
</h2>
|
||||
</div>
|
||||
{#if hasMoreCourses}
|
||||
<Button
|
||||
href={disableCourseLinks ? undefined : '/courses'}
|
||||
variant="outline"
|
||||
class="ui:rounded-full ui:self-start ui:md:self-auto"
|
||||
disabled={disableCourseLinks}
|
||||
>
|
||||
{labels?.browseCoursesLabel ?? 'Browse catalog'}
|
||||
</Button>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div class="course-grid ui:relative">
|
||||
{#each courses as course, index (course.id)}
|
||||
<SaasCourseCard {course} {disableCourseLinks} {labels} />
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{/if}
|
||||
|
||||
{#if links && links.cards.length > 0}
|
||||
<div class="plus-row"></div>
|
||||
<OrgLandingPageLinks {links} {labels} variant="saas" />
|
||||
{/if}
|
||||
|
||||
{#if embed}
|
||||
<div class="plus-row"></div>
|
||||
<OrgLandingPageEmbed {embed} {labels} variant="saas" />
|
||||
{/if}
|
||||
|
||||
{#if callout}
|
||||
<div class="plus-row"></div>
|
||||
<OrgLandingPageCallout {callout} {labels} variant="saas" />
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<OrgLandingPageFooter {orgName} {logoUrl} {footer} variant="saas" />
|
||||
</div>
|
||||
|
||||
<style>
|
||||
/* ============ FRAME (vertical lines + dotted bg) ============ */
|
||||
.saas-root :global(.frame) {
|
||||
position: relative;
|
||||
max-width: 1180px;
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
background-image: radial-gradient(
|
||||
circle at center,
|
||||
color-mix(in oklab, var(--landing-fg) 5%, transparent) 1px,
|
||||
transparent 1.5px
|
||||
);
|
||||
background-size: 24px 24px;
|
||||
}
|
||||
.saas-root :global(.frame::before),
|
||||
.saas-root :global(.frame::after) {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 1px;
|
||||
background: var(--landing-border);
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
}
|
||||
.saas-root :global(.frame::before) {
|
||||
left: 0;
|
||||
}
|
||||
.saas-root :global(.frame::after) {
|
||||
right: 0;
|
||||
}
|
||||
.saas-root :global(.frame > *) {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* ============ PLUS-ROW (dashed divider + + markers) ============ */
|
||||
.saas-root :global(.plus-row) {
|
||||
position: relative;
|
||||
height: 0;
|
||||
border-top: 1px dashed var(--landing-border);
|
||||
margin: 0;
|
||||
}
|
||||
.saas-root :global(.plus-row::before),
|
||||
.saas-root :global(.plus-row::after) {
|
||||
content: '+';
|
||||
position: absolute;
|
||||
top: -8px;
|
||||
font-family: ui-monospace, SFMono-Regular, monospace;
|
||||
font-size: 13px;
|
||||
font-weight: 400;
|
||||
color: var(--landing-fg-muted);
|
||||
line-height: 1;
|
||||
background: var(--landing-bg);
|
||||
padding: 1px 3px;
|
||||
z-index: 2;
|
||||
}
|
||||
.saas-root :global(.plus-row::before) {
|
||||
left: -8px;
|
||||
}
|
||||
.saas-root :global(.plus-row::after) {
|
||||
right: -8px;
|
||||
}
|
||||
|
||||
/* ============ LINE-SEPARATED COURSE GRID (mobile-first) ============ */
|
||||
.saas-root :global(.course-grid) {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 1px;
|
||||
border: 1px solid var(--landing-border);
|
||||
}
|
||||
@media (min-width: 640px) {
|
||||
.saas-root :global(.course-grid) {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
}
|
||||
@media (min-width: 1024px) {
|
||||
.saas-root :global(.course-grid) {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
}
|
||||
.saas-root :global(.course-grid > .course-card-wrap) {
|
||||
grid-column: span 2;
|
||||
}
|
||||
/* 1 course → centered card (drops line frame) */
|
||||
.saas-root :global(.course-grid:has(> .course-card-wrap:only-child)) {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
background: transparent;
|
||||
border: none;
|
||||
gap: 0;
|
||||
}
|
||||
.saas-root :global(.course-grid:has(> .course-card-wrap:only-child) > .course-card-wrap) {
|
||||
width: 100%;
|
||||
max-width: 520px;
|
||||
}
|
||||
.saas-root :global(.course-grid:has(> .course-card-wrap:only-child) .course-card) {
|
||||
border: 1px solid var(--landing-border);
|
||||
border-radius: 0.5rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
/* 2 courses → halves */
|
||||
.saas-root :global(.course-grid:has(> .course-card-wrap:nth-child(2):last-child) > .course-card-wrap) {
|
||||
grid-column: span 3;
|
||||
}
|
||||
/* 4 courses → 2 × 2 halves */
|
||||
.saas-root :global(.course-grid:has(> .course-card-wrap:nth-child(4):last-child) > .course-card-wrap) {
|
||||
grid-column: span 3;
|
||||
}
|
||||
/* 6+ courses → all thirds */
|
||||
.saas-root :global(.course-grid:has(> .course-card-wrap:nth-child(6)) > .course-card-wrap) {
|
||||
grid-column: span 2;
|
||||
}
|
||||
.saas-root :global(.course-card-wrap) {
|
||||
display: flex;
|
||||
}
|
||||
.saas-root :global(.course-card-wrap > a) {
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,10 @@
|
||||
import { baseTokenVars, type LandingThemeVars } from '../theme-vars-base';
|
||||
|
||||
export const vars: LandingThemeVars = {
|
||||
...baseTokenVars,
|
||||
'--landing-heading-weight': '700',
|
||||
'--landing-heading-tracking': '-0.01em',
|
||||
'--landing-radius-card': '12px',
|
||||
'--landing-shadow-card': '0 8px 24px -16px color-mix(in oklab, var(--landing-fg), transparent 85%)',
|
||||
'--landing-divider': '1px solid var(--landing-border)'
|
||||
};
|
||||
Reference in New Issue
Block a user