* 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 <chifez1@gmail.com>
49 lines
1.1 KiB
Svelte
49 lines
1.1 KiB
Svelte
<script lang="ts">
|
|
import { Motion, AnimatePresence, useAnimation } from 'svelte-motion';
|
|
import { inview } from 'svelte-inview';
|
|
import { cn } from '$lib/utils';
|
|
|
|
let {
|
|
duration = 0.4,
|
|
delay = 0,
|
|
yOffset = 6,
|
|
inViewMargin = '-50px',
|
|
blur = '6px',
|
|
once = false,
|
|
class: className = ''
|
|
} = $props();
|
|
let id = $state(crypto.randomUUID().slice(0, 8));
|
|
let isInView = $state('hidden');
|
|
|
|
let defaultVariants = {
|
|
hidden: { opacity: 0, y: yOffset, filter: `blur(${blur})` },
|
|
visible: { opacity: 1, y: 0, filter: `blur(0px)` }
|
|
};
|
|
</script>
|
|
|
|
<AnimatePresence let:item list={[{ key: id }]}>
|
|
<Motion
|
|
initial="hidden"
|
|
animate={isInView}
|
|
exit="hidden"
|
|
variants={defaultVariants}
|
|
transition={{
|
|
delay: 0.04 + delay,
|
|
duration,
|
|
ease: 'easeOut'
|
|
}}
|
|
let:motion
|
|
>
|
|
<div
|
|
use:inview={{ rootMargin: inViewMargin, unobserveOnEnter: once }}
|
|
use:motion
|
|
on:inview_change={({ detail }) => {
|
|
isInView = detail.inView ? 'visible' : 'hidden';
|
|
}}
|
|
class={cn(className)}
|
|
>
|
|
<slot>Default</slot>
|
|
</div>
|
|
</Motion>
|
|
</AnimatePresence>
|