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 <chifez1@gmail.com>
2024-12-14 03:40:47 +01:00
parent 7e239da7d2
commit 26700dccd0
343 changed files with 17993 additions and 350 deletions
@@ -0,0 +1,48 @@
+<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>