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]>
2024-12-14 03:40:47 +01:00
parent 7e239da7d2
commit 26700dccd0
343 changed files with 17993 additions and 350 deletions
@@ -0,0 +1,62 @@
+<script lang="ts">
+  import { cn } from '$lib/utils';
+
+  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
+  style:--spread="90deg"
+  style:--shimmer-color={shimmerColor}
+  style:--radius={borderRadius}
+  style:--speed={shimmerDuration}
+  style:--cut={shimmerSize}
+  style:--bg={background}
+  class={cn(
+    'group relative z-0 flex cursor-pointer items-center justify-center overflow-hidden whitespace-nowrap border border-white/10 px-6 py-3 text-white [background:var(--bg)] [border-radius:var(--radius)] dark:text-white',
+    'transform-gpu transition-transform duration-300 ease-in-out active:translate-y-[1px]',
+    className
+  )}
+  on:click={onClick}
+>
+  <div class={cn('-z-30 blur-[2px]', 'absolute inset-0 overflow-visible [container-type:size]')}>
+    <div
+      class="animate-magicslide absolute inset-0 h-[100cqh] [aspect-ratio:1] [border-radius:0] [mask:none]"
+    >
+      <!--  spark before  -->
+      <div
+        class="animate-spin-around absolute inset-[-100%] w-auto rotate-0 [background:conic-gradient(from_calc(270deg-(var(--spread)*0.5)),transparent_0,var(--shimmer-color)_var(--spread),transparent_var(--spread))] [translate:0_0]"
+      />
+    </div>
+  </div>
+  <slot>Shimmer Button</slot>
+  <!-- Highlight -->
+  <div
+    class={cn(
+      'insert-0 absolute h-full w-full',
+
+      'rounded-2xl px-4 py-1.5 text-sm font-medium shadow-[inset_0_-8px_10px_#ffffff1f]',
+
+      // transition
+      'transform-gpu transition-all duration-300 ease-in-out',
+
+      // on hover
+      'group-hover:shadow-[inset_0_-6px_10px_#ffffff3f]',
+
+      // on click
+      'group-active:shadow-[inset_0_-10px_10px_#ffffff3f]'
+    )}
+  ></div>
+  <!-- backdrop -->
+  <div
+    class={cn(
+      'absolute -z-20 [background:var(--bg)] [border-radius:var(--radius)] [inset:var(--cut)]'
+    )}
+  ></div>
+</button>