feat: course-app v0.0.11 (#523)
* 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 <[email protected]> * clean up examprep * v0.0.11 --------- Co-authored-by: Em_Dev <[email protected]>
This commit is contained in:
Rotimi Best
@@ -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>
|
||||
|
||||
@@ -0,0 +1 @@
|
||||
export { default as Sparkle } from './sparkle-text.svelte';
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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"
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user