restructure comopnents

codercatdev · codercatdev · commit fe8d146f753f · 2023-04-11T14:44:51.000-04:00
diff --git a/apps/codingcatdev/src/app.postcss b/apps/codingcatdev/src/app.postcss
@@ -3,3 +3,4 @@
 @import './styles/app.css';
 @import './styles/nav-list.css';
 @import './styles/grid-card.css';
+@import './styles/markdown.css';
diff --git a/apps/codingcatdev/src/routes/(content-list)/ContentCards.svelte b/apps/codingcatdev/src/routes/(content-list)/ContentCards.svelte
diff --git a/apps/codingcatdev/src/routes/(content-list)/blog/+page.svelte b/apps/codingcatdev/src/routes/(content-list)/blog/+page.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import ContentCards from '$lib/components/content/ContentCards.svelte';
+	import ContentCards from '../ContentCards.svelte';
 	import { ContentType } from '$lib/types/index';
 	import type { PageData } from './$types';
 	export let data: PageData;
diff --git a/apps/codingcatdev/src/routes/(content-list)/courses/+page.svelte b/apps/codingcatdev/src/routes/(content-list)/courses/+page.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import ContentCards from '$lib/components/content/ContentCards.svelte';
+	import ContentCards from '../ContentCards.svelte';
 	import { ContentType } from '$lib/types/index';
 	import type { PageData } from './$types';
 	export let data: PageData;
diff --git a/apps/codingcatdev/src/routes/(content-list)/frameworks/+page.svelte b/apps/codingcatdev/src/routes/(content-list)/frameworks/+page.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import ContentCards from '$lib/components/content/ContentCards.svelte';
+	import ContentCards from '../ContentCards.svelte';
 	import { ContentType } from '$lib/types/index';
 	import type { PageData } from './$types';
 	export let data: PageData;
diff --git a/apps/codingcatdev/src/routes/(content-list)/languages/+page.svelte b/apps/codingcatdev/src/routes/(content-list)/languages/+page.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import ContentCards from '$lib/components/content/ContentCards.svelte';
+	import ContentCards from '../ContentCards.svelte';
 	import { ContentType } from '$lib/types/index';
 	import type { PageData } from './$types';
 	export let data: PageData;
diff --git a/apps/codingcatdev/src/routes/(content-list)/podcasts/+page.svelte b/apps/codingcatdev/src/routes/(content-list)/podcasts/+page.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import ContentCards from '$lib/components/content/ContentCards.svelte';
+	import ContentCards from '../ContentCards.svelte';
 	import { ContentType } from '$lib/types/index';
 	import type { PageData } from './$types';
 	export let data: PageData;
diff --git a/apps/codingcatdev/src/routes/(content-list)/schedule/+page.svelte b/apps/codingcatdev/src/routes/(content-list)/schedule/+page.svelte
@@ -1,5 +1,5 @@
 <script>
-	import ContentCards from '$lib/components/content/ContentCards.svelte';
+	import ContentCards from '../ContentCards.svelte';
 	import { ContentType } from '$lib/types/index';
 
 	/** @type {import('./$types').PageData} */
diff --git a/apps/codingcatdev/src/routes/(content-list)/tutorials/+page.svelte b/apps/codingcatdev/src/routes/(content-list)/tutorials/+page.svelte
@@ -1,5 +1,5 @@
 <script>
-	import ContentCards from '$lib/components/content/ContentCards.svelte';
+	import ContentCards from '../ContentCards.svelte';
 	import { ContentType } from '$lib/types/index';
 
 	/** @type {import('./$types').PageData} */
diff --git a/apps/codingcatdev/src/routes/(content-single)/(non-course)/+layout.server.ts b/apps/codingcatdev/src/routes/(content-single)/(non-course)/+layout.server.ts
@@ -0,0 +1,12 @@
+import { listContent } from '$lib/server/content';
+import { ContentType } from '$lib/types';
+import type { LayoutServerLoad } from './$types';
+
+export const load = (async () => {
+    return {
+        course: await (await listContent({ contentType: ContentType.course, limit: 3 })).content,
+        tutorial: await (await listContent({ contentType: ContentType.tutorial, limit: 3 })).content,
+        podcast: await (await listContent({ contentType: ContentType.podcast, limit: 3 })).content,
+        post: await (await listContent({ contentType: ContentType.post, limit: 3 })).content
+    };
+}) satisfies LayoutServerLoad;
diff --git a/apps/codingcatdev/src/routes/(content-single)/(non-course)/Content.svelte b/apps/codingcatdev/src/routes/(content-single)/(non-course)/Content.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
 	import 'prism-themes/themes/prism-shades-of-purple.min.css';
-	import RecentPostsList from '$lib/components/content/RecentPostsList.svelte';
-	import LessonList from '$lib/components/content/LessonList.svelte';
+	import RecentPostsList from './RecentPostsList.svelte';
 	import {
 		ContentType,
 		type Content,
@@ -22,8 +21,8 @@
 
 {#if data?.content}
 	<div class="flex justify-center">
-		<section class="justify-center p-1 content-single xl:p-8 sm:flex">
-			<div class="p-1">
+		<section class="flex gap-8 justify-center p-1 xl:p-8">
+			<div class="">
 				{#if data?.content?.youtube}
 					<Video
 						sources={[
@@ -34,12 +33,12 @@
 						]}
 					/>
 				{/if}
-				<section class="flex-grow w-full prose lg:prose-xl xl:prose-2xl">
+				<section class="flex-grow w-full markdown">
 					{@html data.content.html}
 				</section>
 			</div>
 
-			<div class="hidden xl:block">
+			<div class="hidden xl:flex flex-col gap-6">
 				<RecentPostsList contentType={ContentType.course} list={data.course} />
 				<RecentPostsList contentType={ContentType.tutorial} list={data.tutorial} />
 				<RecentPostsList contentType={ContentType.podcast} list={data.podcast} />
diff --git a/apps/codingcatdev/src/routes/(content-single)/(non-course)/RecentPostsList.svelte b/apps/codingcatdev/src/routes/(content-single)/(non-course)/RecentPostsList.svelte
@@ -1,12 +1,16 @@
 <script lang="ts">
 	import type { Content, ContentType } from '$lib/types';
+	import { pluralize } from '$lib/utils';
 
 	export let list: Content[];
 	export let contentType: ContentType;
+	$: title = pluralize({ type: contentType } as Content);
 </script>
 
-<div class="pt-2">
-	<ul class="card w-96 p-2 bg-base-content shadow-xl">
+<div class="bcu-card">
+	<header class="bcu-card-header capitalize pb-2 text-xl font-bold">{title}</header>
+	<hr />
+	<ul class="w-96 p-2 bg-base-content shadow-xl">
 		{#each list as content}
 			<li class={`list-none cursor-pointer p-1 rounded m-1 flex flex-col justify-between`}>
 				<a href={`/${contentType}/${content.slug}`} class="link-primary">
diff --git a/apps/codingcatdev/src/routes/(content-single)/(non-course)/framework/[slug]/+page.server.ts b/apps/codingcatdev/src/routes/(content-single)/(non-course)/framework/[slug]/+page.server.ts
diff --git a/apps/codingcatdev/src/routes/(content-single)/(non-course)/framework/[slug]/+page.svelte b/apps/codingcatdev/src/routes/(content-single)/(non-course)/framework/[slug]/+page.svelte
@@ -1,5 +1,5 @@
 <script>
-	import Content from '$lib/components/content/Content.svelte';
+	import Content from '../../Content.svelte';
 	/** @type {import('./$types').PageData} */
 	export let data;
 </script>
diff --git a/apps/codingcatdev/src/routes/(content-single)/(non-course)/language/[slug]/+page.server.ts b/apps/codingcatdev/src/routes/(content-single)/(non-course)/language/[slug]/+page.server.ts
diff --git a/apps/codingcatdev/src/routes/(content-single)/(non-course)/language/[slug]/+page.svelte b/apps/codingcatdev/src/routes/(content-single)/(non-course)/language/[slug]/+page.svelte
@@ -1,5 +1,5 @@
 <script>
-	import Content from '$lib/components/content/Content.svelte';
+	import Content from '../../Content.svelte';
 	/** @type {import('./$types').PageData} */
 	export let data;
 </script>
diff --git a/apps/codingcatdev/src/routes/(content-single)/(non-course)/podcast/[slug]/+page.server.ts b/apps/codingcatdev/src/routes/(content-single)/(non-course)/podcast/[slug]/+page.server.ts
diff --git a/apps/codingcatdev/src/routes/(content-single)/(non-course)/podcast/[slug]/+page.svelte b/apps/codingcatdev/src/routes/(content-single)/(non-course)/podcast/[slug]/+page.svelte
@@ -1,5 +1,5 @@
 <script>
-	import Content from '$lib/components/content/Content.svelte';
+	import Content from '../../Content.svelte';
 	/** @type {import('./$types').PageData} */
 	export let data;
 </script>
diff --git a/apps/codingcatdev/src/routes/(content-single)/(non-course)/post/[slug]/+page.server.ts b/apps/codingcatdev/src/routes/(content-single)/(non-course)/post/[slug]/+page.server.ts
diff --git a/apps/codingcatdev/src/routes/(content-single)/(non-course)/post/[slug]/+page.svelte b/apps/codingcatdev/src/routes/(content-single)/(non-course)/post/[slug]/+page.svelte
@@ -1,5 +1,5 @@
 <script>
-	import Content from '$lib/components/content/Content.svelte';
+	import Content from '../../Content.svelte';
 	/** @type {import('./$types').PageData} */
 	export let data;
 </script>
diff --git a/apps/codingcatdev/src/routes/(content-single)/(non-course)/tutorial/[slug]/+page.server.ts b/apps/codingcatdev/src/routes/(content-single)/(non-course)/tutorial/[slug]/+page.server.ts
diff --git a/apps/codingcatdev/src/routes/(content-single)/(non-course)/tutorial/[slug]/+page.svelte b/apps/codingcatdev/src/routes/(content-single)/(non-course)/tutorial/[slug]/+page.svelte
@@ -0,0 +1,7 @@
+<script>
+	import Content from '../../Content.svelte';
+	/** @type {import('./$types').PageData} */
+	export let data;
+</script>
+
+<Content {data} />
diff --git a/apps/codingcatdev/src/routes/(content-single)/course/Course.svelte b/apps/codingcatdev/src/routes/(content-single)/course/Course.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import 'prism-themes/themes/prism-shades-of-purple.min.css';
-	import LessonList from '$lib/components/content/LessonList.svelte';
+	import LessonList from './LessonList.svelte';
 	import Video from '$lib/components/content/Video.svelte';
 	import type { Lesson } from '$lib/types';
 	export let data: {
@@ -10,7 +10,7 @@
 </script>
 
 {#if data?.content}
-	<div class="flex justify-center">
+	<div class="flex justify-center !text-token">
 		<section class="justify-center p-1 content-single xl:p-8 sm:flex">
 			<div class="p-1">
 				{#if data?.content?.youtube}
diff --git a/apps/codingcatdev/src/routes/(content-single)/course/LessonList.svelte b/apps/codingcatdev/src/routes/(content-single)/course/LessonList.svelte
@@ -5,8 +5,10 @@
 	export let courseSlug: string;
 </script>
 
-<div class="pt-2">
-	<ul class="card w-96 p-2 bg-base-content shadow-xl">
+<div class="bcu-card">
+	<header class="bcu-card-header capitalize pb-2 text-xl font-bold">Lessons</header>
+	<hr />
+	<ul class="w-96 p-2 bg-base-content shadow-xl">
 		{#each lesson as l}
 			<li class={`list-none cursor-pointer p-1 rounded m-1 flex flex-col justify-between`}>
 				<a href={`/course/${courseSlug}/lesson/${l.slug}`} class="link-primary">
diff --git a/apps/codingcatdev/src/routes/(content-single)/course/[slug]/+page.svelte b/apps/codingcatdev/src/routes/(content-single)/course/[slug]/+page.svelte
@@ -1,5 +1,5 @@
 <script>
-	import Course from '$lib/components/content/Course.svelte';
+	import Course from '../Course.svelte';
 	/** @type {import('./$types').PageData} */
 	export let data;
 </script>
diff --git a/apps/codingcatdev/src/routes/(content-single)/course/[slug]/lesson/Lesson.svelte b/apps/codingcatdev/src/routes/(content-single)/course/[slug]/lesson/Lesson.svelte
diff --git a/apps/codingcatdev/src/routes/(content-single)/podcast/[slug]/+page.svelte b/apps/codingcatdev/src/routes/(content-single)/podcast/[slug]/+page.svelte
diff --git a/apps/codingcatdev/src/routes/(layout-partials)/CcdAppBar.svelte b/apps/codingcatdev/src/routes/(layout-partials)/CcdAppBar.svelte
@@ -23,7 +23,7 @@
 	import LogoutButton from '../login/LogoutButton.svelte';
 
 	$: classesActive = (href: string) =>
-		$storeCurrentUrl?.split('/').at(-1) === href ? 'bg-primary-active-token' : '';
+		$storeCurrentUrl?.split('/').at(-1) === href ? 'bg-primary-active-token hover:text-token' : '';
 </script>
 
 <!-- NOTE: using stopPropagation to override Chrome for Windows search shortcut -->
diff --git a/apps/codingcatdev/src/styles/markdown.css b/apps/codingcatdev/src/styles/markdown.css
@@ -0,0 +1,8 @@
+@layer components {
+	.markdown code {
+		@apply !overflow-auto;
+	}
+	.markdown p {
+		@apply !text-lg md:!text-2xl;
+	}
+}
diff --git a/apps/codingcatdev/src/styles/theme.css b/apps/codingcatdev/src/styles/theme.css
@@ -90,17 +90,17 @@
 	--color-error-700: 179 51 51; /* ⬅ #b33333 */
 	--color-error-800: 143 41 41; /* ⬅ #8f2929 */
 	--color-error-900: 117 33 33; /* ⬅ #752121 */
-	/* surface | #5e1286 */
-	--color-surface-50: 231 219 237; /* ⬅ #e7dbed */
-	--color-surface-100: 223 208 231; /* ⬅ #dfd0e7 */
-	--color-surface-200: 215 196 225; /* ⬅ #d7c4e1 */
-	--color-surface-300: 191 160 207; /* ⬅ #bfa0cf */
-	--color-surface-400: 142 89 170; /* ⬅ #8e59aa */
-	--color-surface-500: 94 18 134; /* ⬅ #5e1286 */
-	--color-surface-600: 85 16 121; /* ⬅ #551079 */
-	--color-surface-700: 71 14 101; /* ⬅ #470e65 */
-	--color-surface-800: 56 11 80; /* ⬅ #380b50 */
-	--color-surface-900: 46 9 66; /* ⬅ #2e0942 */
+	/* surface | #512DA8 */
+	--color-surface-50: 229 224 242; /* ⬅ #e5e0f2 */
+	--color-surface-100: 220 213 238; /* ⬅ #dcd5ee */
+	--color-surface-200: 212 203 233; /* ⬅ #d4cbe9 */
+	--color-surface-300: 185 171 220; /* ⬅ #b9abdc */
+	--color-surface-400: 133 108 194; /* ⬅ #856cc2 */
+	--color-surface-500: 81 45 168; /* ⬅ #512DA8 */
+	--color-surface-600: 73 41 151; /* ⬅ #492997 */
+	--color-surface-700: 61 34 126; /* ⬅ #3d227e */
+	--color-surface-800: 49 27 101; /* ⬅ #311b65 */
+	--color-surface-900: 40 22 82; /* ⬅ #281652 */
 }
 
 [data-theme='codingcatdev'] h1,
