Skip to content

Commit 9e6a80b

Browse files
codercatdevajcwebdevalex-fusionauth
authored
COURSE: SolidJS (#464)
* initial setup * add anthony's content * fix createEffect link * first rough draft * create solidstart section * add cover images * complete first draft of entire course * fix locked courses --------- Co-authored-by: Anthony Campolo <12433465+ajcwebdev@users.noreply.github.com> Co-authored-by: Alex Patterson <alex.patterson@fusionauth.io>
1 parent b3f6c19 commit 9e6a80b

File tree

14 files changed

+910
-129
lines changed

14 files changed

+910
-129
lines changed

‎apps/codingcatdev/src/routes/(content-single)/(non-course)/author/anthony-campolo/+page.md

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
---
2+
type: guest
3+
cover: 'https://media.codingcat.dev/image/upload/v1682988657/main-codingcatdev-photo/podcast-guest/ajcwebdev'
4+
name: Anthony Campolo
5+
published: published
6+
slug: anthony-campolo
7+
start: January 1, 2000
8+
picks: https://www.notion.so/Bo-Burnham-The-Inside-Outtakes-cac7d53f969a424d92a97a11f0f0fa59
9+
socials:
10+
github: 'https://github.com/ajcwebdev'
11+
twitter: 'https://twitter.com/ajcwebdev'
12+
websites:
13+
- https://ajcwebdev.com/
14+
---
15+
16+
### Profile
17+
18+
Web developer, writer, speaker, and advocate.

‎apps/codingcatdev/src/routes/(content-single)/course/+layout.server.ts

Lines changed: 61 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -1,49 +1,65 @@
1-
import { error } from '@sveltejs/kit';
2-
import { filterContent, getContentTypePath } from '$lib/server/content';
1+
import { error, redirect } from '@sveltejs/kit';
2+
import { allowLocal, filterContent, getContentTypePath } from '$lib/server/content';
33
import { ContentType, type Course, type Author, type Sponsor } from '$lib/types';
44

55
export const prerender = false;
66

7-
export const load = (async (params) => {
8-
try {
9-
const splitPath = params.url.pathname.split('/');
10-
const courseSlug = splitPath.at(2);
11-
const lessonSlug = splitPath.at(4);
12-
13-
if (!courseSlug) throw error(404);
14-
const md = await getContentTypePath<Course>(ContentType.course, courseSlug);
15-
16-
if (!md) throw error(404);
17-
const contentItems = await filterContent({ contentItems: [md] })
18-
const course = contentItems?.at(0);
19-
if (!course) throw error(404);
20-
21-
// Content is good, fetch surrounding items
22-
const authors: Author[] = [];
23-
if (course?.authors) {
24-
for (const authorSlug of course.authors) {
25-
const author = await getContentTypePath<Author>(ContentType.author, authorSlug);
26-
if (author) authors.push(author)
27-
}
28-
}
29-
30-
const sponsors: Sponsor[] = [];
31-
if (course?.sponsors) {
32-
for (const sponsorSlug of course.sponsors) {
33-
const sponsor = await getContentTypePath<Sponsor>(ContentType.sponsor, sponsorSlug);
34-
if (sponsor) sponsors.push(sponsor)
35-
}
36-
}
37-
38-
return {
39-
content: course.lesson?.find(l => l.slug === lessonSlug),
40-
course,
41-
authors,
42-
sponsors
43-
}
44-
}
45-
catch (e) {
46-
console.error(e)
47-
throw error(404)
48-
}
49-
})
7+
export const load = async ({ url, parent }) => {
8+
const data = await parent();
9+
10+
try {
11+
const splitPath = url.pathname.split('/');
12+
const courseSlug = splitPath.at(2);
13+
const lessonSlug = splitPath.at(4);
14+
15+
if (!courseSlug) throw error(404);
16+
const md = await getContentTypePath<Course>(ContentType.course, courseSlug);
17+
18+
if (!md) throw error(404);
19+
const contentItems = await filterContent({ contentItems: [md] });
20+
const course = contentItems?.at(0);
21+
if (!course) throw error(404);
22+
23+
// Content is good, fetch surrounding items
24+
const authors: Author[] = [];
25+
if (course?.authors) {
26+
for (const authorSlug of course.authors) {
27+
const author = await getContentTypePath<Author>(ContentType.author, authorSlug);
28+
if (author) authors.push(author);
29+
}
30+
}
31+
32+
const sponsors: Sponsor[] = [];
33+
if (course?.sponsors) {
34+
for (const sponsorSlug of course.sponsors) {
35+
const sponsor = await getContentTypePath<Sponsor>(ContentType.sponsor, sponsorSlug);
36+
if (sponsor) sponsors.push(sponsor);
37+
}
38+
}
39+
40+
const content = course.lesson?.find((l) => l.slug === lessonSlug);
41+
if (
42+
lessonSlug &&
43+
content?.locked &&
44+
!allowLocal &&
45+
(!data?.user?.uid || !data?.user?.stripeRole)
46+
) {
47+
throw 'app:redirect';
48+
}
49+
50+
return {
51+
content,
52+
course,
53+
authors,
54+
sponsors
55+
};
56+
} catch (e) {
57+
console.error(e);
58+
59+
if (e === 'app:redirect') {
60+
throw redirect(307, `/login?redirectTo=${url.pathname}`);
61+
}
62+
63+
throw error(404);
64+
}
65+
};

‎apps/codingcatdev/src/routes/(content-single)/course/intro-to-solid-js/+page.md

Lines changed: 42 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,48 @@
11
---
22
type: course
33
authors:
4-
- alex-patterson
4+
- anthony-campolo
55
cloudinary_convert: false
6-
published: draft
6+
cover: https://media.codingcat.dev/image/upload/v1684518966/main-codingcatdev-photo/courses/solidjs-intro/SolidJSCourse.png
7+
excerpt: 'In this course, you will learn everything you need to know to build user interfaces with SolidJS.'
8+
published: published
79
slug: intro-to-solid-js
8-
start: December 20, 2022 11:15 AM
10+
section: Intro
11+
start: May 19, 2023 11:15 AM
912
title: Intro to SolidJS
10-
updated: October 26, 2022 11:15 AM
11-
---
13+
updated:
14+
weight: 1
15+
---
16+
17+
## What is Solid?
18+
19+
SolidJS is a modern JavaScript library for building user interfaces. It was created by Ryan Carniato in 2018 and has gained a strong following in the open source JavaScript and web development community. SolidJS is based on the idea of reactive state, which means that components are only updated when their state changes.
20+
21+
### What are the Benefits of Solid?
22+
23+
It is designed to be efficient, flexible, and easy to use. SolidJS's reactivity gives SolidJS an advantage when it comes to performance, even for large applications. With support for a wide range of features including custom hooks, SSR, and Suspense, SolidJS is a great choice for building a wide variety of web apps.
24+
25+
The framework aims to have a simple API that is similar to React and easy to learn. If you are already familiar with React, you will be able to pick up SolidJS fairly quickly after learning a few quirks in their differences.
26+
27+
In this course, you will learn everything you need to know to build user interfaces with SolidJS. You will learn the basics of SolidJS's syntax and router along with more advanced topics, such as custom hooks, state management, SSR, and Suspense. By the end of this course, you will be able to build performant, flexible, and intuitive user interfaces with SolidJS.
28+
29+
**What you will learn:**
30+
31+
- The basics of SolidJS
32+
- State management
33+
- Routing
34+
- Custom hooks
35+
- Server-side rendering
36+
- Suspense
37+
38+
**Who is this course for?**
39+
40+
This course is for web developers who want to learn how to build user interfaces with SolidJS. If you are already familiar with React, you will be able to pick up SolidJS quickly.
41+
42+
**What you will need:**
43+
44+
- A basic understanding of JavaScript
45+
- A text editor or IDE (preferably VSCode)
46+
- A Node.js environment
47+
48+
**Go Pro and start learning SolidJS today!**

‎apps/codingcatdev/src/routes/(content-single)/course/intro-to-solid-js/lesson/01-intro/+page.md

Lines changed: 0 additions & 12 deletions
This file was deleted.

‎apps/codingcatdev/src/routes/(content-single)/course/intro-to-solid-js/lesson/02-locked/+page.md

Lines changed: 0 additions & 13 deletions
This file was deleted.

0 commit comments

Comments
 (0)