feat: introducing @classroomio/course-app (#490)
* feat: v1 templates * update nvm * working on the displaying the course content * working on the displaying the course content * displayed the content * finished with the logic for rendering the content for all the courses and lessons * post hog template UI is good to go * classic and minimalistic template UI is good to go * some refactoring * some refactoring * layout adjustments * update tsconfig * trying to get the filter to work well * this is working now * cleanup * cleanup * UI updates * course page UI for posthog * navbar and sidebar for course page in all templates complete * all templates course page showing lesson content from md file with mdsvex configured * wokring on sections * posthog lesson content done * all templates fetches the lesson content from the section * all templates properly typed * scaffolding the new template * finished the webflow-saas * done with the webflow saas UI * new calcom template * new calcom template * masonry layout for testitomonail section layout done * calcom UI done * UI all done * cleanup * trying to fix dark mode for the course page and home page * done with this * done with this * working on tests * migrated minimalistic template to svelte 5 * updated the syntax to svelte 5 for webflow * migrated classic to svelte 5 * migrated posthog to svelte 5 * used svelte 5 syntax in calcom * cli tool woks locally * rename to course-sites * use pnpm in root * calcom refactoring * remove unused files * chore: biggest refactoring in my life * add basic readme * refactoring on course page * restructure how courses are ordered * proper state propagation * add cf adapter * fix pnpm i issue * fix folder icon size * use 18.17 version * update npmrc * add engine to packagejson * pnpm install * add engine to cio-com * make it 18.x * remove sequence * move mdsvex to dependencies * update lock * mdsvex please work * replace fs with import from vite * add lock * styling improvements * fix styling * sidebar style improvements * fix: mobile concerns * fix spacing of course header on desktop * update header * top nav fix * feat: make cal template * setup another template * classic basic UI * fixed the /courses fetching wrong page content * fix breaking template cause of logo * adding some updates * improve styles theming * finished updates from reviews * updated the custom styling css * clean up posthog template * cli tool done, needs some cleaning though * moved components to home * improved the UI of the minimal template * Add CLI tool and course app site * prettier lint * improve CLI * ignore sveltekit folder * publish course app * fix tailwing theme + improve README * finish up course-app site * update README.md --------- Co-authored-by: emmanuel <[email protected]>
This commit is contained in:
Rotimi Best
@@ -0,0 +1,14 @@
|
||||
<script lang="ts">
|
||||
import { Toaster } from '$lib/components/ui/sonner';
|
||||
import { Navigation } from '$lib/components/navigation';
|
||||
|
||||
import '../app.css';
|
||||
|
||||
let { children } = $props();
|
||||
</script>
|
||||
|
||||
<Toaster />
|
||||
|
||||
<Navigation />
|
||||
|
||||
{@render children()}
|
||||
@@ -0,0 +1,185 @@
|
||||
<script lang="ts">
|
||||
import { toast } from 'svelte-sonner';
|
||||
|
||||
import { CardBody, CardContainer } from '$lib/components/animation/card';
|
||||
import { BlurFade } from '$lib/components/animation/blurfade';
|
||||
import { BlurIn } from '$lib/components/animation/blurin';
|
||||
import { Button } from '$lib/components/ui/button';
|
||||
import { TemplateCard } from '$lib/components/template-card';
|
||||
import { Meteors } from '$lib/components/animation/meteors';
|
||||
import { Separator } from '$lib/components/ui/separator';
|
||||
import { ShinnyText } from '$lib/components/animation/shinny-text';
|
||||
import { ShimmerButton } from '$lib/components/animation/shimmerbutton';
|
||||
import Copy from 'lucide-svelte/icons/copy';
|
||||
import { cn } from '$lib/utils';
|
||||
|
||||
const templates = [
|
||||
{
|
||||
name: 'Cal',
|
||||
image: 'https://cdn.courseapp.oncws.com/templates/cal-template.png',
|
||||
url: 'https://cal.courseapp.oncws.com',
|
||||
github: 'https://github.com/classroomio/classroomio'
|
||||
},
|
||||
{
|
||||
name: 'PostHog',
|
||||
image: 'https://cdn.courseapp.oncws.com/templates/posthog-template.png',
|
||||
url: 'https://posthog.courseapp.oncws.com',
|
||||
github: 'https://github.com/classroomio/classroomio'
|
||||
},
|
||||
{
|
||||
name: 'Classic',
|
||||
image: 'https://cdn.courseapp.oncws.com/templates/classic-template.png',
|
||||
url: 'https://classic.courseapp.oncws.com',
|
||||
github: 'https://github.com/classroomio/classroomio'
|
||||
},
|
||||
{
|
||||
name: 'Examprep',
|
||||
image: 'https://cdn.courseapp.oncws.com/templates/examprep-template.png',
|
||||
url: 'https://examprep.courseapp.oncws.com',
|
||||
github: 'https://github.com/classroomio/classroomio'
|
||||
},
|
||||
{
|
||||
name: 'Minimal',
|
||||
image: 'https://cdn.courseapp.oncws.com/templates/minimal.png',
|
||||
url: 'https://minimal.courseapp.oncws.com',
|
||||
github: 'https://github.com/classroomio/classroomio'
|
||||
}
|
||||
];
|
||||
</script>
|
||||
|
||||
<!-- Hero -->
|
||||
<section class="my-5 w-full md:mb-20 md:mt-0">
|
||||
<div class="">
|
||||
<CardContainer className="md:px-20">
|
||||
<CardBody
|
||||
className="max-w-4xl min-h-[50vh] flex flex-col justify-center px-30 gap-2 md:gap-5"
|
||||
>
|
||||
<BlurIn
|
||||
class="pointer-events-none flex max-w-2xl flex-col items-start whitespace-pre-wrap bg-gradient-to-b from-black to-gray-300/80 bg-clip-text text-4xl font-semibold leading-none tracking-tighter text-transparent md:mb-4 md:block md:text-6xl"
|
||||
>
|
||||
Create a <span class="font-mono italic text-blue-700">UNIVERSITY</span>
|
||||
<span>Site for your SAAS in</span>
|
||||
<span class="ml-1 font-mono italic text-blue-700">MINUTES</span>
|
||||
</BlurIn>
|
||||
|
||||
<BlurFade delay={0.25 * 2}>
|
||||
<p class="text-md">
|
||||
With our prebuilt templates, you can setup a fully functional customer educational site
|
||||
for your product in minutes.<br />
|
||||
<span>
|
||||
Similar to the likes of
|
||||
|
||||
<Button variant="link" class="h-fit p-0" href="https://university.webflow.com/">
|
||||
Webflow,
|
||||
</Button>
|
||||
<Button variant="link" class="h-fit p-0" href="https://academy.hubspot.com/">
|
||||
Hubspot,
|
||||
</Button>
|
||||
<Button
|
||||
variant="link"
|
||||
class="h-fit p-0"
|
||||
href="https://university.atlassian.com/student/activity/2227111-home#/page/670e8ce7a1887954d13a856a"
|
||||
>
|
||||
Atlassian &
|
||||
</Button>
|
||||
<Button variant="link" class="h-fit p-0" href="https://framer.university/"
|
||||
>Framer</Button
|
||||
>
|
||||
</span>
|
||||
</p>
|
||||
|
||||
<button
|
||||
onclick={() => {
|
||||
navigator.clipboard.writeText('pnpx @classroomio/course-app');
|
||||
toast('Copied to clipboard 😉');
|
||||
}}
|
||||
class={cn(
|
||||
'group z-10 mt-5 rounded-full border border-white/50 bg-neutral-700 transition-all ease-in hover:cursor-pointer hover:bg-neutral-700 hover:text-white'
|
||||
)}
|
||||
>
|
||||
<ShinnyText
|
||||
class="animate-gradient inline-flex items-center justify-center bg-gradient-to-r from-[#ffaa40] via-[#9c40ff] to-[#ffaa40] bg-[length:var(--bg-size)_100%] bg-clip-text px-4 py-1 text-transparent text-white transition ease-out hover:text-neutral-400 hover:duration-300"
|
||||
>
|
||||
<span>pnpx @classroomio/course-app</span>
|
||||
|
||||
<Copy class="ml-2 size-3" />
|
||||
</ShinnyText>
|
||||
</button>
|
||||
</BlurFade>
|
||||
</CardBody>
|
||||
</CardContainer>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Hero End -->
|
||||
|
||||
<!-- Templates -->
|
||||
<section id="templates" class="my-5 w-full pt-0 md:my-10 md:pt-24">
|
||||
<div class="container">
|
||||
<h2 class="mb-5 text-center text-3xl font-semibold md:mb-20 md:text-start md:text-5xl">
|
||||
Browser Templates
|
||||
</h2>
|
||||
|
||||
<div class="grid max-w-6xl grid-cols-1 place-items-center gap-4 sm:grid-cols-2 lg:grid-cols-3">
|
||||
{#each templates as template, index}
|
||||
<BlurFade delay={0.25 + index * 0.25}>
|
||||
<TemplateCard {template} />
|
||||
</BlurFade>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Templates End -->
|
||||
|
||||
<Separator class="my-20" />
|
||||
|
||||
<!-- Setup -->
|
||||
<section id="setup" class="mb-20 w-full">
|
||||
<BlurFade delay={0.25}>
|
||||
<div class="container">
|
||||
<!-- <h2 class="mb-10 text-center text-5xl font-semibold">
|
||||
Up & Running <span class="font-mono italic text-blue-700">MINUTES</span>
|
||||
</h2> -->
|
||||
|
||||
<div
|
||||
class="relative mx-auto h-fit w-full max-w-3xl overflow-hidden rounded-lg border bg-neutral-800 p-20 py-40 text-center shadow-2xl"
|
||||
>
|
||||
<Meteors number={30} />
|
||||
|
||||
<h1 class="mb-5 text-5xl font-semibold text-white">
|
||||
Start Customising Your University Site
|
||||
</h1>
|
||||
|
||||
<div class="z-10 flex items-center justify-center">
|
||||
<ShimmerButton
|
||||
onClick={() => {
|
||||
window.location.href =
|
||||
'https://github.com/classroomio/classroomio/blob/a6af412b2401a8dc3f871773b96a24b2fa764f52/packages/course-app/README.md';
|
||||
}}
|
||||
class="shadow-2xl"
|
||||
>
|
||||
<span
|
||||
class="whitespace-pre-wrap text-center text-sm font-medium leading-none tracking-tight text-white lg:text-lg dark:from-white dark:to-slate-900/10"
|
||||
>
|
||||
Go to Docs
|
||||
</span>
|
||||
</ShimmerButton>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</BlurFade>
|
||||
</section>
|
||||
|
||||
<!-- Setup End -->
|
||||
|
||||
<Separator class="mt-20" />
|
||||
|
||||
<!-- Footer -->
|
||||
<section class="my-10 w-full">
|
||||
<div class="container">
|
||||
<p class="text-center text-sm text-neutral-500">
|
||||
Made with ❤️ by <a href="https://git.new/class">classroomio</a>
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Footer End -->
|
||||
Reference in New Issue
Block a user