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

feat: course-app v0.0.11 (#523)

Browse Source 
* chore: remove bin

* fix: restore bin

* change dist to bin

* publish only dist folder

* publish with src folder.

* fix ci

* merge steps in CI

* update workflow

* deploy with src

* update to v9

* delete unused code

* complete landing page

* complete landing page

* feat: webflow template (#518)

* created a new branch for webflow from debug/course-app

* added webflow and reverted neccessary changes

* fixed commit issues

* clean up posthog

* clean up classic

* clean up minimal

* clean up posthog

* clean up webflow

* v0.0.10

* markdown lint

* feat: add prep template (#522)

* working on the ielts template

* working on the ielts template

* finished the ielts template

---------

Co-authored-by: emmanuel <chifez1@gmail.com>

* clean up examprep

* v0.0.11

---------

Co-authored-by: Em_Dev <Chifez1@gmail.com>
This commit is contained in:
Rotimi Best
2024-12-17 04:06:03 +01:00
committed by GitHub
co-authored by emmanuel
parent 5c83034a01
commit 3ee7cf10e3
208 changed files with 7211 additions and 7003 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/course-app/src/app.css
+28 -23
View File
@@ -1,73 +1,78 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
@font-face {
font-family: 'Virgil';
src: url('/fonts/Virgil.woff2');
}
@layer base {
:root {
--background: 0 0% 100%;
--foreground: 240 10% 3.9%;
--muted: 240 4.8% 95.9%;
--muted-foreground: 240 3.8% 46.1%;
--popover: 0 0% 100%;
--popover-foreground: 240 10% 3.9%;
--card: 0 0% 100%;
--card-foreground: 240 10% 3.9%;
--border: 240 5.9% 90%;
--input: 240 5.9% 90%;
--primary: 240 5.9% 10%;
--primary-foreground: 0 0% 98%;
--secondary: 240 4.8% 95.9%;
--secondary-foreground: 240 5.9% 10%;
--accent: 240 4.8% 95.9%;
--accent-foreground: 240 5.9% 10%;
--destructive: 0 72.2% 50.6%;
--destructive-foreground: 0 0% 98%;
--ring: 240 10% 3.9%;
--radius: 0.5rem;
}
.dark {
--background: 240 10% 3.9%;
--foreground: 0 0% 98%;
--muted: 240 3.7% 15.9%;
--muted-foreground: 240 5% 64.9%;
--popover: 240 10% 3.9%;
--popover-foreground: 0 0% 98%;
--card: 240 10% 3.9%;
--card-foreground: 0 0% 98%;
--border: 240 3.7% 15.9%;
--input: 240 3.7% 15.9%;
--primary: 0 0% 98%;
--primary-foreground: 240 5.9% 10%;
--secondary: 240 3.7% 15.9%;
--secondary-foreground: 0 0% 98%;
--accent: 240 3.7% 15.9%;
--accent-foreground: 0 0% 98%;
--destructive: 0 62.8% 30.6%;
--destructive-foreground: 0 0% 98%;
--ring: 240 4.9% 83.9%;
}
}
@layer base {
* {
@apply border-border;
@@ -75,4 +80,4 @@
body {
@apply bg-background text-foreground;
}
}
}
apps/course-app/src/app.html
+3 -4
View File
@@ -15,7 +15,7 @@
<!-- Facebook Meta Tags -->
<meta property="og:url" content="https://www.courseapp.oncws.com/" />
<meta property="og:image" itemprop="image" content="https://cdn.courseapp.oncws.com/courseapp-og-image.png" />
<meta property="og:image" itemprop="image" content="https://cdn.courseapp.oncws.com/courseapp-og.png" />
<meta property="og:title" content="Courseapp by ClassroomIO –&nbsp;Create your SAAS Academy in Minutes" />
<meta property="og:description"
content="Series of templates available for you to clone, customise and launch your SAAS Academy. Scale your customer education effort today." />
@@ -24,8 +24,7 @@
<meta property="og:image:type" content="image/png" />
<meta property="og:image:width" content="1920" />
<meta property="og:image:height" content="1080" />
<meta property="og:image:secure_url" itemprop="image"
content="https://cdn.courseapp.oncws.com/courseapp-og-image.png" />
<meta property="og:image:secure_url" itemprop="image" content="https://cdn.courseapp.oncws.com/courseapp-og.png" />
<meta name="twitter:card" content="summary_large_image" />
<meta property="twitter:domain" content="courseapp.oncws.com" />
@@ -33,7 +32,7 @@
<meta name="twitter:title" content="Courseapp by ClassroomIO –&nbsp;Create your SAAS Academy in Minutes" />
<meta name="twitter:description"
content="Series of templates available for you to clone, customise and launch your SAAS Academy. Scale your customer education effort today." />
<meta name="twitter:image" content="https://cdn.courseapp.oncws.com/courseapp-og-image.png" />
<meta name="twitter:image" content="https://cdn.courseapp.oncws.com/courseapp-og.png" />
%sveltekit.head%
</head>
apps/course-app/src/lib/components/animation/shimmerbutton/shimmerbutton.svelte
+8 -4
View File
@@ -1,17 +1,19 @@
<script lang="ts">
import { cn } from '$lib/utils';
export let href: string;
export let target: string = '';
export let rel: string = '';
export let shimmerColor = '#ffffff';
export let shimmerSize = '0.05em';
export let shimmerDuration = '3s';
export let borderRadius = '100px';
export let background = 'rgba(0, 0, 0, 1)';
export let onClick: () => void;
let className: any = '';
export { className as class };
</script>
<button
<a
style:--spread="90deg"
style:--shimmer-color={shimmerColor}
style:--radius={borderRadius}
@@ -23,7 +25,9 @@
'transform-gpu transition-transform duration-300 ease-in-out active:translate-y-[1px]',
className
)}
on:click={onClick}
{href}
{target}
{rel}
>
<div class={cn('-z-30 blur-[2px]', 'absolute inset-0 overflow-visible [container-type:size]')}>
<div
@@ -59,4 +63,4 @@
'absolute -z-20 [background:var(--bg)] [border-radius:var(--radius)] [inset:var(--cut)]'
)}
></div>
</button>
</a>
apps/course-app/src/lib/components/animation/sparkle/index.ts
+1
View File
@@ -0,0 +1 @@
export { default as Sparkle } from './sparkle-text.svelte';
apps/course-app/src/lib/components/animation/sparkle/sparkle-text.svelte
+73
View File
@@ -0,0 +1,73 @@
<script lang="ts">
interface TSparkle {
id: string;
x: string;
y: string;
color: string;
delay: number;
scale: number;
lifespan: number;
}
export let text: string = 'Hello World';
export let colors = {
first: '#9E7AFF',
second: '#FE8BBB'
};
export let sparklesCount = 5;
let className = '';
export { className as class };
let sparkles: TSparkle[] = [];
import { onMount, onDestroy } from 'svelte';
import Sparkle from './sparkle.svelte';
let generateStar = () => {
let starX = `${Math.random() * 100}%`;
let starY = `${Math.random() * 100}%`;
let color = Math.random() > 0.5 ? colors.first : colors.second;
let delay = Math.random() * 4;
let scale = Math.random() * 1 + 0.3;
let lifespan = Math.random() * 10 + 5;
let id = `${starX}-${starY}-${Date.now()}`;
return { id, x: starX, y: starY, color, delay, scale, lifespan };
};
let initializeStars = async () => {
let newSparkles = Array.from({ length: sparklesCount }, generateStar);
sparkles = newSparkles;
};
const updateStars = () => {
let temp = sparkles.map((star) => {
if (star.lifespan <= 0) {
return generateStar();
} else {
return { ...star, lifespan: star.lifespan - 0.1 };
}
});
sparkles = temp;
};
let interval: NodeJS.Timer;
onMount(async () => {
initializeStars();
interval = setInterval(updateStars, 100);
});
onDestroy(() => clearInterval(interval));
</script>
<div
style:--sparkles-first-color="{colors.first};"
style:--sparkles-second-color="{colors.second};"
class={className}
{...$$restProps}
>
<span class="relative inline-block">
{#each sparkles as item, _}
<Sparkle {...item} />
{/each}
<strong>{text}</strong>
</span>
</div>
apps/course-app/src/lib/components/animation/sparkle/sparkle.svelte
+35
View File
@@ -0,0 +1,35 @@
<script lang="ts">
import { Motion } from "svelte-motion";
export let id;
export let x;
export let y;
export let color;
export let delay;
export let scale;
</script>
<Motion
initial={{ opacity: 0, left: x, top: y }}
animate={{
opacity: [0, 1, 0],
scale: [0, scale, 0],
rotate: [75, 120, 150],
}}
transition={{ duration: 0.8, repeat: Infinity, delay }}
let:motion
>
<svg
{id}
use:motion
class="pointer-events-none absolute z-20"
width="21"
height="21"
viewBox="0 0 21 21"
>
<path
d="M9.82531 0.843845C10.0553 0.215178 10.9446 0.215178 11.1746 0.843845L11.8618 2.72026C12.4006 4.19229 12.3916 6.39157 13.5 7.5C14.6084 8.60843 16.8077 8.59935 18.2797 9.13822L20.1561 9.82534C20.7858 10.0553 20.7858 10.9447 20.1561 11.1747L18.2797 11.8618C16.8077 12.4007 14.6084 12.3916 13.5 13.5C12.3916 14.6084 12.4006 16.8077 11.8618 18.2798L11.1746 20.1562C10.9446 20.7858 10.0553 20.7858 9.82531 20.1562L9.13819 18.2798C8.59932 16.8077 8.60843 14.6084 7.5 13.5C6.39157 12.3916 4.19225 12.4007 2.72023 11.8618L0.843814 11.1747C0.215148 10.9447 0.215148 10.0553 0.843814 9.82534L2.72023 9.13822C4.19225 8.59935 6.39157 8.60843 7.5 7.5C8.60843 6.39157 8.59932 4.19229 9.13819 2.72026L9.82531 0.843845Z"
fill={color}
/>
</svg>
</Motion>
apps/course-app/src/lib/components/navigation/navigation.svelte
+17 -5
View File
@@ -1,11 +1,12 @@
<script lang="ts">
import { page } from '$app/stores';
import ArrowUpRight from 'lucide-svelte/icons/arrow-up-right';
const getClass = (active: boolean) => (active ? 'text-foreground' : 'text-foreground/60');
let activeClass = $derived({
template: getClass($page.url.href.includes('#templates')),
setup: getClass($page.url.href.includes('#setup'))
features: getClass($page.url.href.includes('#features'))
});
</script>
@@ -36,10 +37,10 @@
</p>
<div class="container flex h-14 max-w-screen-2xl items-center">
<div class="mr-4 flex">
<a href="/" class="mr-6 flex items-center space-x-2">
<a href="/" class="mr-6 flex items-center">
<img src="/logo-512.png" alt="Course App" class="h-8 w-8" />
{' '}
<span class="inline-block font-bold">courseapp</span>
<span class="inline-block font-bold">ourseapp</span>
</a>{' '}
<nav class="hidden items-center gap-6 text-sm md:flex">
<a
@@ -48,8 +49,19 @@
>
Templates
</a>{' '}
<a href="#setup" class="hover:text-foreground/80 {activeClass.setup} transition-colors">
Setup
<a
href="#features"
class="hover:text-foreground/80 {activeClass.features} transition-colors"
>
Features
</a>{' '}
<a
href="/npm"
target="_blank"
rel="noopener noreferrer"
class="hover:text-foreground/80 text-foreground/60 flex items-center gap-1 transition-colors"
>
NPM <ArrowUpRight class="h-4 w-4" />
</a>{' '}
<!-- <a
href="https://github.com/classroomio/classroomio"
apps/course-app/src/lib/components/template-card/template-card.svelte
+2 -2
View File
@@ -19,7 +19,7 @@
variant="link"
target="_blank"
rel="noopener noreferrer"
class="border-stroke-primary relative h-80 min-w-60 overflow-hidden rounded-md border border-solid p-0 transition-all duration-500 lg:h-96"
class="border-stroke-primary relative h-80 min-w-60 overflow-hidden rounded-md border border-solid p-0 transition-all duration-500"
>
<span
class="absolute inset-0 flex items-center justify-center bg-black/50 opacity-0 transition-all duration-500 hover:opacity-80"
@@ -28,7 +28,7 @@
</span>
<img
src={template.image}
class="h-full w-full object-contain hover:opacity-10"
class="h-full w-full rounded-lg object-contain hover:opacity-10"
alt={template.name}
/>
</Button>
apps/course-app/src/routes/(redirects)/npm/+page.server.ts
+5
View File
@@ -0,0 +1,5 @@
import { redirect } from '@sveltejs/kit';
export const load = () => {
throw redirect(307, 'https://www.npmjs.com/package/@classroomio/course-app');
};
apps/course-app/src/routes/+page.svelte
+100 -50
View File
@@ -10,6 +10,7 @@
import { Separator } from '$lib/components/ui/separator';
import { ShinnyText } from '$lib/components/animation/shinny-text';
import { ShimmerButton } from '$lib/components/animation/shimmerbutton';
import { Sparkle } from '$lib/components/animation/sparkle';
import Copy from 'lucide-svelte/icons/copy';
import { cn } from '$lib/utils';
@@ -26,6 +27,12 @@
url: 'https://posthog.courseapp.oncws.com',
github: 'https://github.com/classroomio/classroomio'
},
{
name: 'Webflow',
image: 'https://cdn.courseapp.oncws.com/templates/webflow-template.png',
url: 'https://webflow.courseapp.oncws.com',
github: 'https://github.com/classroomio/classroomio'
},
{
name: 'Classic',
image: 'https://cdn.courseapp.oncws.com/templates/classic-template.png',
@@ -40,16 +47,49 @@
},
{
name: 'Minimal',
image: 'https://cdn.courseapp.oncws.com/templates/minimal.png',
image: 'https://cdn.courseapp.oncws.com/templates/minimal-template.png',
url: 'https://minimal.courseapp.oncws.com',
github: 'https://github.com/classroomio/classroomio'
},
{
name: 'Bootcamps',
image: 'https://cdn.courseapp.oncws.com/templates/bootcamp-template.png',
url: 'https://bootcamp.courseapp.oncws.com',
github: 'https://github.com/classroomio/classroomio'
}
];
const features = [
'Beautiful templates you can choose from',
'Create as many courses as you want',
'Write courses with Markdown',
'Embed videos, slides, and other media',
'Deploy to Vercel, Netlify or wherever you want.'
];
const examples = [
{
name: 'Webflow',
url: 'https://university.webflow.com'
},
{
name: 'Hubspot',
url: 'https://academy.hubspot.com'
},
{
name: 'Atlassian',
url: 'https://university.atlassian.com'
},
{
name: 'Framer',
url: 'https://framer.university/'
}
];
</script>
<!-- Hero -->
<section class="my-5 w-full md:mb-20 md:mt-0">
<div class="">
<section class="my-5 w-full md:my-0">
<div>
<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"
@@ -64,27 +104,22 @@
<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 />
With our prebuilt templates, you can setup a fully functional customer educational
website 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
>
{#each examples as example}
<Button
variant="link"
target="_blank"
rel="noopener noreferrer"
class="mx-1 h-fit p-0 underline"
href={example.url}
>
{example.name}
</Button>
{/each}
</span>
</p>
@@ -113,10 +148,10 @@
<!-- Hero End -->
<!-- Templates -->
<section id="templates" class="my-5 w-full pt-0 md:my-10 md:pt-24">
<section id="templates" class="my-5 w-full pt-0 md:my-0 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
Browse Templates
</h2>
<div class="grid max-w-6xl grid-cols-1 place-items-center gap-4 sm:grid-cols-2 lg:grid-cols-3">
@@ -128,13 +163,32 @@
</div>
</div>
</section>
<!-- Templates End -->
<Separator class="my-20" />
<Separator class="my-5 md:mt-20" />
<!-- Setup -->
<section id="setup" class="mb-20 w-full">
<!-- Features -->
<section id="features" class="my-5 w-full px-4 pt-0 md:mb-10 md:mt-0 md:pt-24">
<div class="font-drawn container mx-auto flex max-w-4xl flex-col items-center">
<h2 class="mb-2 text-center text-3xl font-semibold md:mb-10 md:text-start md:text-5xl">
Features
</h2>
<ul>
{#each features as feature}
<li class="text-md mb-2 list-decimal md:text-2xl">
<Sparkle text={feature} />
</li>
{/each}
</ul>
</div>
</section>
<!-- Features End -->
<Separator class="my-5 md:my-20" />
<!-- Home CTA -->
<section class="mb-20 w-full">
<BlurFade delay={0.25}>
<div class="container">
<!-- <h2 class="mb-10 text-center text-5xl font-semibold">
@@ -142,43 +196,39 @@
</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"
class="relative mx-auto h-fit w-full overflow-hidden rounded-lg border bg-neutral-800 px-10 py-20 text-center shadow-2xl md:max-w-3xl md:px-20 md:py-40"
>
<Meteors number={30} />
<div class="z-20">
<h1 class="mb-5 text-2xl font-semibold text-white md:text-5xl">
Kickstart Your Customer Education Journey
</h1>
<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 class=" flex items-center justify-center">
<ShimmerButton href="/npm" target="_blank" rel="noopener noreferrer" 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"
>
Learn More
</span>
</ShimmerButton>
</div>
</div>
</div>
</div>
</BlurFade>
</section>
<!-- Home CTA End -->
<!-- Setup End -->
<Separator class="mt-20" />
<Separator class="mt-5 md: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>
Made with ❤️ by <a href="https://git.new/class" target="_blank" rel="noopener noreferrer">
classroomio
</a>
</p>
</div>
</section>