From b967016fbbf2bd02a21cf5f28efc545cf7872e70 Mon Sep 17 00:00:00 2001 From: Alex Patterson Date: Sun, 22 Oct 2023 15:02:55 -0400 Subject: [PATCH 1/4] redirect with 303 to not use POST (#492) Co-authored-by: Alex Patterson --- apps/codingcatdev/src/routes/(protected)/+layout.server.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/codingcatdev/src/routes/(protected)/+layout.server.ts b/apps/codingcatdev/src/routes/(protected)/+layout.server.ts index f02cd3957..ef068db13 100644 --- a/apps/codingcatdev/src/routes/(protected)/+layout.server.ts +++ b/apps/codingcatdev/src/routes/(protected)/+layout.server.ts @@ -7,7 +7,7 @@ export const prerender = false; export const load = async ({ url, parent }) => { const data = await parent(); if (!allowLocal && !data?.user?.uid) { - throw redirect(307, `/login?redirectTo=${url.pathname}`); + throw redirect(303, `/login?redirectTo=${url.pathname}`); } if (data?.user?.stripeRole && url.searchParams.has('redirectTo')) { throw redirect(303, url.searchParams.get('redirectTo') || '/'); From 7d1e30945f43a8f87aa82b7276de75669424532f Mon Sep 17 00:00:00 2001 From: Alex Patterson Date: Wed, 25 Oct 2023 14:43:29 -0400 Subject: [PATCH 2/4] 3-16 podcast (#493) * 3-16 podcast * change to md * add author * add button example --------- Co-authored-by: Alex Patterson --- .../src/lib/components/content/Button.svelte | 4 +- .../(non-course)/guest/pngwn/+page.md | 14 ++ .../podcast/3-16-MDSvex-with-pngwn/+page.md | 137 ++++++++++++++++++ .../+page.md | 6 - 4 files changed, 154 insertions(+), 7 deletions(-) create mode 100644 apps/codingcatdev/src/routes/(content-single)/(non-course)/guest/pngwn/+page.md create mode 100644 apps/codingcatdev/src/routes/(content-single)/(non-course)/podcast/3-16-MDSvex-with-pngwn/+page.md diff --git a/apps/codingcatdev/src/lib/components/content/Button.svelte b/apps/codingcatdev/src/lib/components/content/Button.svelte index 25e0ea1ba..01402e356 100644 --- a/apps/codingcatdev/src/lib/components/content/Button.svelte +++ b/apps/codingcatdev/src/lib/components/content/Button.svelte @@ -2,4 +2,6 @@ let count = 0; - + diff --git a/apps/codingcatdev/src/routes/(content-single)/(non-course)/guest/pngwn/+page.md b/apps/codingcatdev/src/routes/(content-single)/(non-course)/guest/pngwn/+page.md new file mode 100644 index 000000000..12d598b37 --- /dev/null +++ b/apps/codingcatdev/src/routes/(content-single)/(non-course)/guest/pngwn/+page.md @@ -0,0 +1,14 @@ +--- +type: guest +cover: https://media.codingcat.dev/image/upload/v1698251838/main-codingcatdev-photo/podcast-guest/b5mz5aTv_400x400.png +name: pngwn +published: published +slug: pngwn +start: January 1, 2000 +socials: + twitter: https://twitter.com/evilpingwin +--- + +## About + +🐧 brrrrrrr! diff --git a/apps/codingcatdev/src/routes/(content-single)/(non-course)/podcast/3-16-MDSvex-with-pngwn/+page.md b/apps/codingcatdev/src/routes/(content-single)/(non-course)/podcast/3-16-MDSvex-with-pngwn/+page.md new file mode 100644 index 000000000..718663a1b --- /dev/null +++ b/apps/codingcatdev/src/routes/(content-single)/(non-course)/podcast/3-16-MDSvex-with-pngwn/+page.md @@ -0,0 +1,137 @@ +--- +type: podcast +authors: + - alex-patterson +episode: 16 +recording_date: May 4, 2023 2:15 PM +season: 3 +published: published +podcast: CodingCat.dev +chapters_done: true +cloudinary_convert: false +cover: https://media.codingcat.dev/image/upload/v1683829447/main-codingcatdev-photo/MDSvex-with-pngwn.jpg +devto: +excerpt: 'Pngwn joins Alex to show discuss his program MDSvex and to walk Alex through how to use it on his own Coding Cat site.' +guests: + - pngwn +hashnode: +picks: + [ + { author: 'pngwn', name: 'Hugging Face', site: 'https://huggingface.co/chat/' }, + { author: 'pngwn', name: 'Open Assitant', site: 'https://open-assistant.io/' }, + { author: 'alex-patterson', name: 'Xata', site: 'https://xata.io' } + ] +slug: 3-16-MDSvex-with-pngwn +sponsors: + - storyblok +spotify: https://open.spotify.com/episode/2dkxDnNqCPvsOwBTUhu0bD?si=_wknx6m5RVa4r1q0uTyvew +start: June 14, 2023 +title: 'MDSvex with pngwn' +youtube: https://youtu.be/0ukXs_xUbJ8 +--- + + + +## What is mdsvex + +[mdsvex](https://mdsvex.pngwn.io/) is a file format that combines the best of Markdown and Svelte. It allows you to write content in Markdown, but also includes the ability to embed Svelte components into your posts. This can be useful for adding interactive elements to your blog, such as polls, quizzes, and code editors. + +### Benefits of using mdsvex + +There are several benefits to using mdsvex: + +- **Simplicity:** mdsvex files are just regular Markdown files, with the addition of the `.svx` extension. This means that you can use any Markdown editor to write your posts, and you don't need to learn any new syntax. +- **Power:** Svelte is a powerful JavaScript framework that allows you to create interactive web components. With mdsvex, you can embed these components directly into your Markdown posts. This opens up a whole new range of possibilities for your blog. +- **Flexibility:** mdsvex is compatible with any SvelteKit project. This means that you can use it to create a blog from scratch, or to add interactive elements to an existing blog. + +### How to use mdsvex + +To use mdsvex, you first need to install the `mdsvex` package. You can do this with npm or yarn: + +```sh +npm install mdsvex +``` + +```sh +yarn add mdsvex +``` + +Once you have installed the package, you need to add it to your SvelteKit project's `svelte.config.js` file: + +```ts +import mdsvex from 'mdsvex'; + +export default { + plugins: [mdsvex()] +}; +``` + +CodingCat.dev's `svelte.config.js` + +```ts +import preprocess from 'svelte-preprocess'; +import adapter from '@sveltejs/adapter-auto'; +import { mdsvex } from 'mdsvex'; + +// TODO: remove .svx and .md from production builds + +/** @type {import('@sveltejs/kit').Config} */ +console.log(`Using ${process.env.NODE_ENV} config`); +const config = { + kit: { + adapter: adapter(), + prerender: { + handleMissingId: 'warn', + handleHttpError: ({ path, referrer, message }) => { + // if nothing refers to it we don't care + // most likely this is a draft in production + // TODO: can we make this better? + if (referrer === null) { + console.debug('SKIPPING 404 ISSUE', path); + return; + } + + // otherwise fail the build + throw new Error(message); + } + } + }, + extensions: ['.svelte', '.svx', '.md'], + preprocess: [ + mdsvex({ extensions: ['.svx', '.md'] }), + preprocess({ + postcss: true + }) + ] +}; + +export default config; +``` + +Now, you can start writing mdsvex files! To do this, simply create a new file with the `.svx` or `.md` extension. You can then write Markdown in the file, and embed Svelte components using the ` + + + {:else} + + {/if} +{:else} + + {#if $saved?.savedComplete} + + {:else} + + {/if} +{/if} diff --git a/apps/codingcatdev/src/routes/(content-single)/course/ProSaved.svelte b/apps/codingcatdev/src/routes/(content-single)/course/ProSaved.svelte new file mode 100644 index 000000000..f412ceafd --- /dev/null +++ b/apps/codingcatdev/src/routes/(content-single)/course/ProSaved.svelte @@ -0,0 +1,52 @@ + + + +{#if $saved?.savedComplete} + +{:else} + +{/if} diff --git a/apps/codingcatdev/src/routes/(protected)/+layout.server.ts b/apps/codingcatdev/src/routes/(protected)/+layout.server.ts index ef068db13..623294abd 100644 --- a/apps/codingcatdev/src/routes/(protected)/+layout.server.ts +++ b/apps/codingcatdev/src/routes/(protected)/+layout.server.ts @@ -2,7 +2,7 @@ import { allowLocal } from '$lib/server/content'; import { getStripeProducts } from '$lib/server/firebase'; import { redirect } from '@sveltejs/kit'; -export const prerender = false; +//export const prerender = false; export const load = async ({ url, parent }) => { const data = await parent(); diff --git a/apps/codingcatdev/src/routes/(protected)/account/+page.server.ts b/apps/codingcatdev/src/routes/(protected)/account/+page.server.ts index e0bb4a6b5..96402780b 100644 --- a/apps/codingcatdev/src/routes/(protected)/account/+page.server.ts +++ b/apps/codingcatdev/src/routes/(protected)/account/+page.server.ts @@ -1,30 +1,8 @@ -import { - ccdValidateSessionCookie, - getUser, - updateUser, - type UserSettings -} from '$lib/server/firebase'; -import { fail } from '@sveltejs/kit'; +//export const prerender = false; -export const prerender = false; - -export const load = async ({ url, parent }) => { +export const load = async ({ parent }) => { const data = await parent(); return { - ...(await getUser(data?.user?.uid)) + data }; }; - -export const actions = { - default: async ({ request, cookies }) => { - const data = await request.formData(); - const ccdsession = cookies.get('session'); - if (!ccdsession) { - return fail(401, { user: 'missing' }); - } - const user = await ccdValidateSessionCookie(ccdsession); - const settings = Object.fromEntries(data.entries()); - - await updateUser(user?.uid, { settings }); - } -}; diff --git a/apps/codingcatdev/src/routes/(protected)/account/+page.svelte b/apps/codingcatdev/src/routes/(protected)/account/+page.svelte index 4c3ffe989..d661c2911 100644 --- a/apps/codingcatdev/src/routes/(protected)/account/+page.svelte +++ b/apps/codingcatdev/src/routes/(protected)/account/+page.svelte @@ -5,6 +5,10 @@ import AccountCard from './AccountCard.svelte'; import MembershipCard from './MembershipCard.svelte'; import UserSettings from './UserSettings.svelte'; + import { auth } from '$lib/client/firebase'; + import { userStore } from 'sveltefire'; + + const user = userStore(auth); @@ -17,7 +21,9 @@
- + {#if $user?.uid} + + {/if}
diff --git a/apps/codingcatdev/src/routes/(protected)/account/UserSettings.svelte b/apps/codingcatdev/src/routes/(protected)/account/UserSettings.svelte index ccd14230e..4c246e767 100644 --- a/apps/codingcatdev/src/routes/(protected)/account/UserSettings.svelte +++ b/apps/codingcatdev/src/routes/(protected)/account/UserSettings.svelte @@ -1,7 +1,32 @@
@@ -12,21 +37,19 @@
-
+
updateShowDrafts(e)} >
Show Drafts
Pro Feature
 -
- -
- +
diff --git a/apps/codingcatdev/src/routes/(protected)/dashboard/+page.svelte b/apps/codingcatdev/src/routes/(protected)/dashboard/+page.svelte index 4effd20d9..34b1526c1 100644 --- a/apps/codingcatdev/src/routes/(protected)/dashboard/+page.svelte +++ b/apps/codingcatdev/src/routes/(protected)/dashboard/+page.svelte @@ -1,12 +1,19 @@
@@ -22,33 +29,13 @@ {/if}
+ + + {#if $user?.uid} + + + {/if} -
-

✨ New and Featured

-
- -
-
-
-

📅 Coming Soon

-
- {#if !data?.user?.stripeRole} -
-
You must be a Pro member to preview upcoming courses.
- -
- {:else if data?.showDrafts} - - {:else} -
-
- You have chosen to not show drafts, if you would like to start seeing them again go - to your Account. -
-
- {/if} -
-
diff --git a/apps/codingcatdev/src/routes/(protected)/dashboard/DashboardBookmarks.svelte b/apps/codingcatdev/src/routes/(protected)/dashboard/DashboardBookmarks.svelte new file mode 100644 index 000000000..c6119df48 --- /dev/null +++ b/apps/codingcatdev/src/routes/(protected)/dashboard/DashboardBookmarks.svelte @@ -0,0 +1,82 @@ + + +
+
+
+

Bookmarks

+
+ {#if !data?.user?.stripeRole} +
+
You must be a Pro member to view bookmarks.
+ +
+ {:else if $user?.uid} +
+
+
+ {#each $bookmarked as bookmark (bookmark)} +
+ + {#if bookmark?.cover} + {bookmark.title + {:else} + {bookmark.title + {/if} +
+
+

+ {bookmark.title} +

+
+
+ + {#if bookmark?.lesson} +
+ +
+ {/if} + +
+ {/each} +
+
+
+ {/if} +
diff --git a/apps/codingcatdev/src/routes/(protected)/dashboard/DashboardComingSoon.svelte b/apps/codingcatdev/src/routes/(protected)/dashboard/DashboardComingSoon.svelte new file mode 100644 index 000000000..08d458ca2 --- /dev/null +++ b/apps/codingcatdev/src/routes/(protected)/dashboard/DashboardComingSoon.svelte @@ -0,0 +1,31 @@ + + +
+
+
+

Coming Soon

+
+ {#if !data?.user?.stripeRole} +
+
You must be a Pro member to preview upcoming courses.
+ +
+ {:else if data?.showDrafts} + + {:else} +
+
+ You have chosen to not show drafts, if you would like to start seeing them again go to your Account. +
+
+ {/if} +
diff --git a/apps/codingcatdev/src/routes/(protected)/dashboard/DashboardCompleted.svelte b/apps/codingcatdev/src/routes/(protected)/dashboard/DashboardCompleted.svelte new file mode 100644 index 000000000..43288b3c6 --- /dev/null +++ b/apps/codingcatdev/src/routes/(protected)/dashboard/DashboardCompleted.svelte @@ -0,0 +1,82 @@ + + +
+
+
+

Completed

+
+ {#if !data?.user?.stripeRole} +
+
You must be a Pro member to view completed lessons.
+ +
+ {:else if $user?.uid} +
+
+
+ {#each $completed as completed (completed)} +
+ + {#if completed?.cover} + {completed.title + {:else} + {completed.title + {/if} +
+
+

+ {completed.title} +

+
+
+ + {#if completed?.lesson} +
+ +
+ {/if} + +
+ {/each} +
+
+
+ {/if} +
diff --git a/apps/codingcatdev/src/routes/(protected)/dashboard/DashboardNewFeatured.svelte b/apps/codingcatdev/src/routes/(protected)/dashboard/DashboardNewFeatured.svelte new file mode 100644 index 000000000..3e518d7c6 --- /dev/null +++ b/apps/codingcatdev/src/routes/(protected)/dashboard/DashboardNewFeatured.svelte @@ -0,0 +1,15 @@ + + +
+
+
+

New and Featured

+
+ +
diff --git a/apps/codingcatdev/src/routes/+layout.server.ts b/apps/codingcatdev/src/routes/+layout.server.ts index 43d9106f5..3a05f6105 100644 --- a/apps/codingcatdev/src/routes/+layout.server.ts +++ b/apps/codingcatdev/src/routes/+layout.server.ts @@ -1,8 +1,10 @@ -import { listContent, getContentTypeDirectory } from '$lib/server/content'; +import { listContent, getContentTypeDirectory, allowLocal } from '$lib/server/content'; import { ccdValidateSessionCookie, validateStripeRole } from '$lib/server/firebase'; import { type Content, ContentType } from '$lib/types'; import type { Cookies } from '@sveltejs/kit'; -export const prerender = false; +import { preview } from '$lib/server/content'; + +//export const prerender = false; export const load = async ({ cookies }: { cookies: Cookies }) => { try { // Get latest podcast @@ -16,7 +18,8 @@ export const load = async ({ cookies }: { cookies: Cookies }) => { const ccdsession = cookies.get('session'); if (!ccdsession) { return { - podcasts + podcasts, + preview }; } const user = await ccdValidateSessionCookie(ccdsession); @@ -29,12 +32,13 @@ export const load = async ({ cookies }: { cookies: Cookies }) => { ...user, stripeRole }, - podcasts + podcasts, + preview }; } catch (error) { cookies.set('session', '', { expires: new Date(0) }); console.error(error); - return {}; + return { preview }; } }; diff --git a/apps/codingcatdev/src/routes/+layout.svelte b/apps/codingcatdev/src/routes/+layout.svelte index 3523d6704..faeb206fe 100644 --- a/apps/codingcatdev/src/routes/+layout.svelte +++ b/apps/codingcatdev/src/routes/+layout.svelte @@ -1,6 +1,5 @@