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

feat: enable fonts by theme(courseapp)

Browse Source
This commit is contained in:
Rotimi Best
2025-06-01 04:45:16 +01:00
parent 830759d125
commit 9c1b0bb9c0
29 changed files with 179 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/course-app/src/routes/+page.svelte
+3 -4
View File
@@ -95,15 +95,14 @@
<BlurIn
class="pointer-events-none flex max-w-2xl flex-col items-center whitespace-pre-wrap bg-gradient-to-b from-black to-gray-300/80 bg-clip-text text-center text-2xl font-semibold leading-none tracking-tighter text-transparent md:mb-4 md:block md:text-4xl lg:text-6xl"
>
Create an <span class="font-mono italic text-blue-700">Academy</span>
<span>Site for your SAAS in</span>
Create a <span class="font-mono italic text-blue-700">Course</span>
<span>Site for your Product in</span>
<span class="ml-1 font-mono italic text-blue-700">MINUTES</span>
</BlurIn>
<BlurFade delay={0.25}>
<p class="text-md max-w-[500px] text-center">
With our prebuilt templates, you can setup a fully functional customer educational
website for your product & idea in minutes.<br />
With our prebuilt templates, you can setup a fully functional course website for your product & idea in minutes.<br />
<span>
Similar to the likes of
packages/course-app/lib/scaffoldTemplate.ts
+11 -9
View File
@@ -1,10 +1,10 @@
import chalk from 'chalk';
import ora from 'ora';
import fs from 'fs';
import path from 'path';
import { fileURLToPath } from 'url';
import { copyCoursesFolder } from '../utils/copyCoursesFolder';
import { copyFolderSync } from '../utils/copyFolder';
import { fileURLToPath } from 'url';
import fs from 'fs';
import ora from 'ora';
import path from 'path';
// Define the interface for function parameters
interface ScaffoldTemplateParams {
@@ -20,11 +20,9 @@ const __dirname = path.dirname(__filename);
const packageRoot = path.join(__dirname, '..');
const spinner = ora();
async function rewriteComponentsFile(filePath: string, template: string): Promise<void> {
const newContent = `export { components } from './${template}';`;
async function rewriteComponentsFile(filePath: string, content: string): Promise<void> {
try {
fs.writeFileSync(filePath, newContent);
fs.writeFileSync(filePath, content);
} catch (error) {
console.error(`Error writing to file: ${error}`);
}
@@ -80,7 +78,11 @@ export async function scaffoldTemplate({
// Update root import of components to reflect only selected template
const componentsIndex = path.join(projectPath, 'src', 'lib', 'components', 'index.ts');
await rewriteComponentsFile(componentsIndex, template);
await rewriteComponentsFile(
componentsIndex,
`export { components, utils } from './${template}';`
);
await rewriteComponentsFile(path.join(projectPath, '.env'), `VITE_TEMPLATE=${template}`);
// If the user wants demo courses, copy the courses folder
spinner.text = chalk.yellow('Setting up courses folder...');
packages/course-app/package.json
+1 -1
View File
@@ -1,6 +1,6 @@
{
"name": "@classroomio/course-app",
"version": "0.0.14",
"version": "0.0.15",
"private": false,
"main": "dist/create-template.js",
"scripts": {
packages/course-app/src/template/package.json
+1
View File
@@ -37,6 +37,7 @@
},
"dependencies": {
"carbon-icons-svelte": "^12.13.0",
"dotenv": "^16.5.0",
"rehype-slug": "^6.0.0",
"rehype-unwrap-images": "^1.0.0",
"remark-toc": "^9.0.0",
packages/course-app/src/template/src/app.css
+1 -3
View File
@@ -1,5 +1,3 @@
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&family=Roboto+Slab:[email protected]&display=swap');
@tailwind base;
@tailwind components;
@tailwind utilities;
@@ -92,7 +90,7 @@
@apply border-border;
}
body {
@apply bg-background text-foreground;
@apply bg-background text-foreground font-app;
}
}
packages/course-app/src/template/src/lib/components/bootcamp/CourseCard.svelte
+1 -1
View File
@@ -18,7 +18,7 @@
<div class="h-fit min-w-[250px] max-w-[350px] space-y-4 md:w-[300px] md:min-w-[300px]">
<div class="space-y-4 rounded-sm border border-gray-100 p-4 {className} w-full bg-gray-50">
<div class="flex items-center justify-between">
<p class="font-slab line-clamp-2 w-full text-lg font-normal capitalize">{title}</p>
<p class="line-clamp-2 w-full text-lg font-normal capitalize">{title}</p>
</div>
<div class="overflow-hidden rounded-sm">
packages/course-app/src/template/src/lib/components/bootcamp/TestimonialCard.svelte
+1 -1
View File
@@ -20,7 +20,7 @@
<!-- Card Content -->
<div
class={`font-roboto bubble-card relative h-[150px] max-h-[200px] flex-1 rounded-lg border border-gray-300 bg-white p-4 shadow-lg ${
class={`bubble-card relative h-[150px] max-h-[200px] flex-1 rounded-lg border border-gray-300 bg-white p-4 shadow-lg ${
index % 2 === 0 ? 'left-pointer md:ml-4' : 'right-pointer md:mr-4'
}`}
>
packages/course-app/src/template/src/lib/components/bootcamp/index.ts
+6 -2
View File
@@ -1,9 +1,9 @@
import Button from './PrimaryButton.svelte';
import type { Component } from 'svelte';
import CoursesPage from './pages/Course.svelte';
import Footer from './Footer.svelte';
import HomePage from './pages/Home.svelte';
import Navigation from './Navigation.svelte';
import Footer from './Footer.svelte';
import Button from './PrimaryButton.svelte';
import type { TemplateComponents } from '$lib/utils/types/template';
export const components: TemplateComponents = {
@@ -13,3 +13,7 @@ export const components: TemplateComponents = {
coursespage: CoursesPage as unknown as Component,
homepage: HomePage as unknown as Component
};
export const utils = {
fontLink: 'https://fonts.googleapis.com/css2?family=Roboto+Slab:[email protected]&display=swap'
};
packages/course-app/src/template/src/lib/components/bootcamp/pages/Course.svelte
+5 -5
View File
@@ -74,7 +74,7 @@
{section.header.settings.title}
</p>
<p class="font-roboto mx-auto w-full font-normal md:w-[70%]">
<p class="mx-auto w-full font-normal md:w-[70%]">
{section.header.settings.subtitle}
</p>
</div>
@@ -95,10 +95,10 @@
<div class="bg-white px-2 py-10 md:px-8">
<div class="mb-4 flex flex-col items-center justify-between md:flex-row">
<span class="mx-auto mb-4 space-y-2 text-center lg:mb-0">
<p class="font-slab mx-auto w-full text-2xl md:w-[60%] lg:text-3xl">
<p class="mx-auto w-full text-2xl md:w-[60%] lg:text-3xl">
{section.courses.settings.title}
</p>
<p class="font-roboto text-xs text-gray-400 lg:text-sm">
<p class="text-xs text-gray-400 lg:text-sm">
{section.courses.settings.subtitle}
</p>
</span>
@@ -107,7 +107,7 @@
{#if $courses.length > 0}
<div class="w-full items-start gap-6 lg:ml-[5%] lg:flex">
<div class="hidden w-fit lg:block">
<p class="font-slab mb-2 font-medium">Filter by</p>
<p class="mb-2 font-medium">Filter by</p>
<div class="flex w-fit flex-col space-y-2">
{#each filter as item}
<label
@@ -144,7 +144,7 @@
<div class="my-5 flex w-full items-center justify-center">
<PrimaryButton
label="VIEW MORE"
class="font-roboto rounded-none text-lg"
class="rounded-none text-lg"
onClick={() => (viewAll = !viewAll)}
/>
</div>
packages/course-app/src/template/src/lib/components/bootcamp/pages/Home.svelte
+8 -8
View File
@@ -26,11 +26,11 @@
<section class="flex min-h-full items-center justify-center bg-black/90 px-10 py-10 md:px-14">
<div class="mx-auto flex max-w-6xl flex-col items-center gap-10 text-center">
<div class="w-full space-y-6 text-white">
<p class="font-slab mx-auto w-full text-3xl font-normal md:w-[60%] md:text-4xl">
<p class="mx-auto w-full text-3xl font-normal md:w-[60%] md:text-4xl">
{content.settings.title}
</p>
<p class="font-roboto mx-auto w-full font-normal md:w-[70%] md:text-lg">
<p class="mx-auto w-full font-normal md:w-[70%] md:text-lg">
{content.settings.subtitle}
</p>
</div>
@@ -61,15 +61,15 @@
class="mx-auto flex max-w-6xl flex-col items-center justify-between gap-4 md:flex-row md:items-start"
>
<div class="mb-5 w-full md:mr-5 md:w-[60%] lg:mb-0 lg:w-[50%]">
<p class="font-slab mb-8 w-full text-2xl font-normal md:w-[90%] md:text-3xl lg:text-4xl">
<p class="mb-8 w-full text-2xl font-normal md:w-[90%] md:text-3xl lg:text-4xl">
{aboutSection.settings.title}
</p>
<div class="space-y-3">
{#each aboutSection.settings.benefits.list as items}
<div class="max-w-[579px] rounded-md border border-gray-100 bg-gray-50 p-8">
<p class="font-slab mb-2 line-clamp-2 w-[90%] text-xl md:text-2xl">{items.title}</p>
<p class="mb-2 line-clamp-2 w-[90%] text-xl md:text-2xl">{items.title}</p>
<p
class="font-roboto mb-4 line-clamp-5 w-[90%] text-sm text-gray-600 lg:line-clamp-4 lg:text-base"
class="mb-4 line-clamp-5 w-[90%] text-sm text-gray-600 lg:line-clamp-4 lg:text-base"
>
{items.subtitle}
</p>
@@ -94,7 +94,7 @@
<section id="course" class="h-full bg-white p-4 lg:p-20">
<div class="mx-4 mb-4">
<span class="mb-4 space-y-2 lg:mb-0">
<p class="font-slab text-2xl lg:text-3xl">{coursesSection.settings.title}</p>
<p class="text-2xl lg:text-3xl">{coursesSection.settings.title}</p>
<p class="w-[80%] text-gray-600">{coursesSection.settings.subtitle}</p>
</span>
</div>
@@ -113,7 +113,7 @@
<div class="my-5 flex w-full items-center justify-center">
<PrimaryButton
label="VIEW MORE"
class="font-roboto bg-bootcamp rounded-none text-lg"
class="bg-bootcamp rounded-none text-lg"
onClick={() => (viewAll = !viewAll)}
/>
</div>
@@ -149,7 +149,7 @@
{#if ctaSection?.show}
<section class="bg-bootcamp flex flex-col items-center justify-between px-6 py-20 lg:px-10">
<div class="flex w-full items-center justify-center">
<p class="font-slab w-full text-center text-4xl font-bold capitalize text-white lg:w-[70%]">
<p class="w-full text-center text-4xl font-bold capitalize text-white lg:w-[70%]">
{ctaSection.settings.title}
</p>
</div>
packages/course-app/src/template/src/lib/components/cal/index.ts
+6 -2
View File
@@ -1,9 +1,9 @@
import Button from './PrimaryButton.svelte';
import type { Component } from 'svelte';
import CoursesPage from './pages/Courses.svelte';
import Footer from './Footer.svelte';
import HomePage from './pages/Home.svelte';
import Navigation from './Navigation.svelte';
import Footer from './Footer.svelte';
import Button from './PrimaryButton.svelte';
import type { TemplateComponents } from '$lib/utils/types/template';
export const components: TemplateComponents = {
@@ -13,3 +13,7 @@ export const components: TemplateComponents = {
coursespage: CoursesPage as unknown as Component,
homepage: HomePage as unknown as Component
};
export const utils = {
fontLink: 'https://fonts.googleapis.com/css2?family=Cal+Sans&display=swap'
};
packages/course-app/src/template/src/lib/components/cal/pages/Home.svelte
+1 -1
View File
@@ -46,7 +46,7 @@
{@const content = getPageSection($homePage, SECTION.HERO)}
{#if content?.show}
<section
class="font-matter flex h-full items-start justify-center bg-[#F4F4F4] px-5 py-10 md:items-center lg:px-20 lg:py-20"
class="flex h-full items-start justify-center bg-[#F4F4F4] px-5 py-10 md:items-center lg:px-20 lg:py-20"
>
<section
class="flex flex-col-reverse items-center justify-center lg:flex-row lg:justify-between"
packages/course-app/src/template/src/lib/components/classic/index.ts
+7 -2
View File
@@ -1,9 +1,9 @@
import Button from './PrimaryButton.svelte';
import type { Component } from 'svelte';
import CoursesPage from './pages/Courses.svelte';
import Footer from './Footer.svelte';
import HomePage from './pages/Home.svelte';
import Navigation from './Navigation.svelte';
import Footer from './Footer.svelte';
import Button from './PrimaryButton.svelte';
import type { TemplateComponents } from '$lib/utils/types/template';
export const components: TemplateComponents = {
@@ -13,3 +13,8 @@ export const components: TemplateComponents = {
coursespage: CoursesPage as unknown as Component,
homepage: HomePage as unknown as Component
};
export const utils = {
fontLink:
'https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap'
};
packages/course-app/src/template/src/lib/components/classic/pages/Home.svelte
+6 -4
View File
@@ -31,13 +31,13 @@
<section class="flex h-full items-start justify-center px-6 pb-20 md:px-14">
<section class="flex flex-col-reverse items-center gap-10 md:flex-row md:justify-between">
<div class="flex h-full w-full flex-col gap-4 pt-4">
<p class="w-full text-4xl font-bold xl:w-[90%] xl:text-6xl">
{content.settings.title}
<span class="text-[#CE02CE]">
<p class="w-full max-w-[600px] text-4xl font-bold lg:text-5xl">
<span>{content.settings.title}</span><br />
<span class=" italic text-[#CE02CE]">
{content.settings.titleHighlight}
</span>
</p>
<p class="w-full text-[#878787] lg:w-[70%] xl:text-lg">
<p class="w-full max-w-[600px] text-[#878787] xl:text-lg">
{content.settings.subtitle}
</p>
<PrimaryButton
@@ -58,6 +58,8 @@
</div>
</section>
</section>
<hr class="border-classic-border mb-10 mt-5" />
{/if}
{/if}
packages/course-app/src/template/src/lib/components/examprep/CourseCard.svelte
+1 -1
View File
@@ -9,7 +9,7 @@
>
<div class="flex h-full w-full flex-col justify-between gap-4 rounded-lg">
<div class="flex-1 space-y-2">
<p class="text-examprep line-clamp-2 font-serif text-xl font-semibold uppercase">{title}</p>
<p class="text-examprep line-clamp-2 text-xl font-semibold uppercase">{title}</p>
<p class="font-inter line-clamp-4 text-gray-600">
{description}
</p>
packages/course-app/src/template/src/lib/components/examprep/index.ts
+7 -2
View File
@@ -1,9 +1,9 @@
import Button from './PrimaryButton.svelte';
import type { Component } from 'svelte';
import CoursesPage from './pages/Course.svelte';
import Footer from './Footer.svelte';
import HomePage from './pages/Home.svelte';
import Navigation from './Navigation.svelte';
import Footer from './Footer.svelte';
import Button from './PrimaryButton.svelte';
import type { TemplateComponents } from '$lib/utils/types/template';
export const components: TemplateComponents = {
@@ -13,3 +13,8 @@ export const components: TemplateComponents = {
coursespage: CoursesPage as unknown as Component,
homepage: HomePage as unknown as Component
};
export const utils = {
fontLink:
'https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Roboto+Mono:ital,wght@0,100..700;1,100..700&family=Roboto+Slab:[email protected]&display=swap'
};
packages/course-app/src/template/src/lib/components/examprep/pages/Course.svelte
+3 -5
View File
@@ -66,12 +66,10 @@
<main class="overflow-x-hidden">
{#if section.header?.show}
<section class="flex h-[50vh] items-center justify-center py-20">
<section class="flex h-[50vh] items-center justify-center bg-slate-100 py-20">
<section class="flex flex-col items-start gap-10 p-4 text-center md:items-center">
<div class="w-full space-y-6">
<p
class="mx-auto w-full font-serif text-3xl font-medium text-gray-800 md:w-[60%] md:text-4xl"
>
<p class="mx-auto w-full text-3xl font-medium text-gray-800 md:w-[60%] md:text-4xl">
{section.header.settings.title}
</p>
@@ -86,7 +84,7 @@
<div class="border-b bg-white px-2 py-10 md:px-10 lg:px-20">
<div class="mb-4 flex flex-col items-start justify-between md:flex-row md:items-center">
<span class="mb-4 space-y-2 px-4 text-start lg:mb-0">
<p class="mb-4 font-serif text-2xl md:text-3xl">{section.courses.settings.title}</p>
<p class="mb-4 text-2xl md:text-3xl">{section.courses.settings.title}</p>
<p class="w-full text-sm font-medium text-gray-500 md:w-[80%]">
{section.courses.settings.subtitle}
</p>
packages/course-app/src/template/src/lib/components/examprep/pages/Home.svelte
+5 -7
View File
@@ -140,7 +140,7 @@
<!-- Courses -->
{#if coursesSection?.show}
<section id="course" class="h-full bg-white px-4 py-20 md:px-20">
<h1 class="text-center font-serif text-3xl">{coursesSection.settings.title}</h1>
<h1 class="text-center text-3xl">{coursesSection.settings.title}</h1>
<p class="font-inter mx-auto mb-8 w-full text-center font-medium md:w-[50%]">
{coursesSection.settings.subtitle}
</p>
@@ -175,7 +175,7 @@
<!-- About -->
{#if aboutSection?.show}
<section id="course" class="h-full bg-white px-4 pb-20 pt-4 md:px-10">
<h1 class="mx-auto w-full text-center font-serif text-3xl text-gray-800 md:w-[50%]">
<h1 class="mx-auto w-full text-center text-3xl text-gray-800 md:w-[50%]">
{aboutSection.settings.title}
</h1>
<p class="text-inter mx-auto mb-8 w-[60%] text-center font-medium text-gray-500">
@@ -189,7 +189,7 @@
>
<span class="flex items-center gap-2">
<CheckmarkFilled size={24} class="fill-blue-800" />
<p class="font-serif text-xl">{item.title}</p>
<p class="text-xl">{item.title}</p>
</span>
<p class="font-inter text-base text-gray-400">{item.subtitle}</p>
</div>
@@ -204,7 +204,7 @@
<!-- faq -->
{#if faqSection?.show}
<section class="h-full space-y-5 bg-slate-100 px-4 pb-20 pt-8">
<h1 class="text-center font-serif text-3xl text-gray-700">{faqSection.settings.title}</h1>
<h1 class="text-center text-3xl text-gray-700">{faqSection.settings.title}</h1>
<section class="mx-auto w-full space-y-10 p-4 md:w-[80%]">
{#each faqSection.settings.questions as faq}
<Accordion title={faq.title} content={faq.content} />
@@ -219,9 +219,7 @@
class="flex flex-col items-center justify-between space-y-4 bg-blue-800 px-6 py-20 lg:px-10"
>
<div class="flex w-full items-center justify-center">
<p
class="w-full text-center font-serif text-4xl font-bold capitalize text-white lg:w-[70%]"
>
<p class="w-full text-center text-4xl font-bold capitalize text-white lg:w-[70%]">
{ctaSection.settings.title}
</p>
</div>
packages/course-app/src/template/src/lib/components/index.ts
+29 -10
View File
@@ -1,10 +1,10 @@
import { components as CalComponents } from './cal';
import { components as PosthogComponents } from './posthog';
import { components as ClassicComponents } from './classic';
import { components as MinimalComponents } from './minimal';
import { components as ExamprepComponents } from './examprep';
import { components as WebflowComponents } from './webflow';
import { components as BootcampComponents } from './bootcamp';
import { components as BootcampComponents, utils as BootcampUtils } from './bootcamp';
import { components as CalComponents, utils as CalUtils } from './cal';
import { components as ClassicComponents, utils as ClassicUtils } from './classic';
import { components as ExamprepComponents, utils as ExamprepUtils } from './examprep';
import { components as MinimalComponents, utils as MinimalUtils } from './minimal';
import { components as PosthogComponents, utils as PosthogUtils } from './posthog';
import { components as WebflowComponents, utils as WebflowUtils } from './webflow';
function getComponents() {
switch (import.meta.env.VITE_TEMPLATE) {
@@ -25,6 +25,25 @@ function getComponents() {
}
}
export const components = {
...getComponents()
};
export const components = getComponents();
function getUtils() {
switch (import.meta.env.VITE_TEMPLATE) {
case 'posthog':
return PosthogUtils;
case 'classic':
return ClassicUtils;
case 'minimal':
return MinimalUtils;
case 'examprep':
return ExamprepUtils;
case 'webflow':
return WebflowUtils;
case 'bootcamp':
return BootcampUtils;
default:
return CalUtils;
}
}
export const utils = getUtils();
packages/course-app/src/template/src/lib/components/minimal/index.ts
+7 -2
View File
@@ -1,9 +1,9 @@
import Button from './PrimaryButton.svelte';
import type { Component } from 'svelte';
import CoursesPage from './pages/Courses.svelte';
import Footer from './Footer.svelte';
import HomePage from './pages/Home.svelte';
import Navigation from './Navigation.svelte';
import Footer from './Footer.svelte';
import Button from './PrimaryButton.svelte';
import type { TemplateComponents } from '$lib/utils/types/template';
export const components: TemplateComponents = {
@@ -13,3 +13,8 @@ export const components: TemplateComponents = {
coursespage: CoursesPage as unknown as Component,
homepage: HomePage as unknown as Component
};
export const utils = {
fontLink:
'https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Roboto+Mono:ital,wght@0,100..700;1,100..700&family=Roboto+Slab:[email protected]&display=swap'
};
packages/course-app/src/template/src/lib/components/minimal/pages/Home.svelte
+1 -1
View File
@@ -30,7 +30,7 @@
class="flex max-h-full items-center justify-center px-5 py-5 md:h-[60vh] md:px-14 md:py-14"
>
<section class="mx-auto flex max-w-6xl items-center justify-between gap-4">
<div class="w-full max-w-[50%] space-y-6 text-white">
<div class="w-full space-y-6 p-5 text-white lg:max-w-[50%]">
<div class="w-fit rounded-sm bg-white px-3 py-1 md:border">
<p class="text-minimal text-center text-sm font-bold uppercase">
{content.settings?.title}
packages/course-app/src/template/src/lib/components/posthog/index.ts
+6 -2
View File
@@ -1,9 +1,9 @@
import Button from './PrimaryButton.svelte';
import type { Component } from 'svelte';
import CoursesPage from './pages/Courses.svelte';
import Footer from './Footer.svelte';
import HomePage from './pages/Home.svelte';
import Navigation from './Navigation.svelte';
import Footer from './Footer.svelte';
import Button from './PrimaryButton.svelte';
import type { TemplateComponents } from '$lib/utils/types/template';
export const components: TemplateComponents = {
@@ -13,3 +13,7 @@ export const components: TemplateComponents = {
coursespage: CoursesPage as unknown as Component,
homepage: HomePage as unknown as Component
};
export const utils = {
fontLink: ''
};
packages/course-app/src/template/src/lib/components/posthog/pages/Home.svelte
+7 -4
View File
@@ -30,7 +30,7 @@
{@const content = getPageSection($homePage, SECTION.HERO)}
{#if content?.show}
<section
class="font-matter flex min-h-full items-center justify-center overflow-hidden px-10 py-14 md:px-14"
class="flex min-h-full items-center justify-center overflow-hidden px-10 pt-24 md:px-14"
>
<section
class="flex flex-col-reverse items-center justify-center gap-5 text-center md:flex-col"
@@ -51,18 +51,18 @@
/>
</div>
<div class="relative flex w-full rounded-lg md:w-[800px] md:max-w-[80vw] lg:max-w-[80%]">
<div class="relative flex w-full rounded-lg md:max-w-[80vw] lg:max-w-[80%]">
<span class="absolute -top-14 left-3 h-2 w-2 rounded-full bg-red-500"></span>
<span class="absolute -left-10 top-10 h-2 w-2 rounded-full bg-white"></span>
<span class="absolute -right-3 -top-10 h-2 w-2 rounded-full bg-yellow-500"></span>
<span class="absolute -right-10 top-14 h-2 w-2 rounded-full bg-blue-800"></span>
<div class="flex h-full w-full items-center justify-center">
<img alt="Hero Banner" src={analytics} class="w-full rounded-lg object-cover" />
</div>
</div>
</section>
</section>
<hr class="border-posthog-border mb-10 mt-5" />
{/if}
{/if}
@@ -101,6 +101,7 @@
</div>
{/if}
</section>
<hr class="border-posthog-border mb-10" />
{/if}
<!-- about -->
@@ -130,6 +131,7 @@
</section>
</div>
</section>
<hr class="border-posthog-border mb-10" />
{/if}
<!-- faq -->
@@ -142,6 +144,7 @@
{/each}
</div>
</div>
<hr class="border-posthog-border my-10" />
{/if}
<!-- cta -->
packages/course-app/src/template/src/lib/components/webflow/index.ts
+7 -2
View File
@@ -1,9 +1,9 @@
import Button from './PrimaryButton.svelte';
import type { Component } from 'svelte';
import CoursesPage from './pages/Courses.svelte';
import Footer from './Footer.svelte';
import HomePage from './pages/Home.svelte';
import Navigation from './Navigation.svelte';
import Footer from './Footer.svelte';
import Button from './PrimaryButton.svelte';
import type { TemplateComponents } from '$lib/utils/types/template';
export const components: TemplateComponents = {
@@ -13,3 +13,8 @@ export const components: TemplateComponents = {
coursespage: CoursesPage as unknown as Component,
homepage: HomePage as unknown as Component
};
export const utils = {
fontLink:
'https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap'
};
packages/course-app/src/template/src/routes/+layout.svelte
+6 -2
View File
@@ -4,7 +4,7 @@
import { homePage, sharedPage } from '$lib/utils/stores/pages';
import { courses } from '$lib/utils/stores/course';
import { getPageSection } from '$lib/utils/helpers/page';
import { components } from '$lib/components';
import { components, utils } from '$lib/components';
import Transition from '$lib/components/ui/_custom/Transition.svelte';
import type { Page, Section } from '$lib/utils/types/page';
import type { Course } from '$lib/utils/types/course';
@@ -34,10 +34,14 @@
<svelte:head>
<title>{seo?.settings.title}</title>
<meta name="description" content={seo?.settings.description} />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="anonymous" />
<link rel="stylesheet" href={utils.fontLink} />
</svelte:head>
{#if $homePage.id}
<main>
<main class="font-{import.meta.env.VITE_TEMPLATE}">
<Transition>
{#if !$page.url.pathname.includes('course/')}
<components.navigation />
packages/course-app/src/template/svelte.config.js
+11 -5
View File
@@ -1,10 +1,11 @@
import { mdsvex, escapeSvelte } from 'mdsvex';
import { escapeSvelte, mdsvex } from 'mdsvex';
import adapter from '@sveltejs/adapter-auto';
import { createHighlighter } from 'shiki';
import rehypeSlug from 'rehype-slug';
import rehypeUnwrapImages from 'rehype-unwrap-images';
import remarkToc from 'remark-toc';
import rehypeSlug from 'rehype-slug';
import adapter from '@sveltejs/adapter-auto';
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
import { createHighlighter } from 'shiki';
/** @type {import('mdsvex').MdsvexOptions} */
const mdsvexOptions = {
@@ -26,7 +27,12 @@ const mdsvexOptions = {
/** @type {import('@sveltejs/kit').Config} */
const config = {
preprocess: [vitePreprocess(), mdsvex(mdsvexOptions)],
preprocess: [
vitePreprocess({
script: true
}),
mdsvex(mdsvexOptions)
],
kit: {
// adapter-auto only supports some environments, see https://svelte.dev/docs/kit/adapter-auto for a list.
packages/course-app/src/template/tailwind.config.ts
+25 -1
View File
@@ -1,7 +1,28 @@
import { fontFamily } from 'tailwindcss/defaultTheme';
import 'dotenv/config';
import type { Config } from 'tailwindcss';
import { fontFamily } from 'tailwindcss/defaultTheme';
import tailwindcssAnimate from 'tailwindcss-animate';
const getFont = (): string => {
switch (process.env.VITE_TEMPLATE) {
case 'posthog':
return 'Matter, sans-serif';
case 'classic':
return 'Inter, sans-serif';
case 'minimal':
return 'Inter, sans-serif';
case 'examprep':
return 'Playfair Display, serif';
case 'webflow':
return 'Lato, sans-serif';
case 'bootcamp':
return 'Roboto Slab, serif';
default:
return 'Cal Sans, sans-serif';
}
};
const config: Config = {
darkMode: ['class'],
content: ['./src/**/*.{html,js,svelte,ts}'],
@@ -118,6 +139,9 @@ const config: Config = {
'accordion-up': 'accordion-up 0.2s ease-out',
'caret-blink': 'caret-blink 1.25s ease-out infinite'
}
},
fontFamily: {
app: getFont()
}
},
plugins: [tailwindcssAnimate]
packages/course-app/templates.json
+4
View File
@@ -7,6 +7,10 @@
"name": "classic",
"description": "Classic template"
},
{
"name": "examprep",
"description": "Exam prep template"
},
{
"name": "minimal",
"description": "Minimal template"
packages/course-app/utils/copyFolder.ts
+1 -2
View File
@@ -1,7 +1,6 @@
import chalk from 'chalk';
import { CopyFolderParams } from './types';
import fs from 'fs';
import path from 'path';
import { CopyFolderParams } from './types';
export async function copyFolderSync({
from,