Skip to content

COURSE: SolidJS #464

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 10 commits into from
Oct 13, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
---
type: guest
cover: 'https://media.codingcat.dev/image/upload/v1682988657/main-codingcatdev-photo/podcast-guest/ajcwebdev'
name: Anthony Campolo
published: published
slug: anthony-campolo
start: January 1, 2000
picks: https://www.notion.so/Bo-Burnham-The-Inside-Outtakes-cac7d53f969a424d92a97a11f0f0fa59
socials:
github: 'https://github.com/ajcwebdev'
twitter: 'https://twitter.com/ajcwebdev'
websites:
- https://ajcwebdev.com/
---

### Profile

Web developer, writer, speaker, and advocate.
106 changes: 61 additions & 45 deletions apps/codingcatdev/src/routes/(content-single)/course/+layout.server.ts
Original file line number Diff line number Diff line change
@@ -1,49 +1,65 @@
import { error } from '@sveltejs/kit';
import { filterContent, getContentTypePath } from '$lib/server/content';
import { error, redirect } from '@sveltejs/kit';
import { allowLocal, filterContent, getContentTypePath } from '$lib/server/content';
import { ContentType, type Course, type Author, type Sponsor } from '$lib/types';

export const prerender = false;

export const load = (async (params) => {
try {
const splitPath = params.url.pathname.split('/');
const courseSlug = splitPath.at(2);
const lessonSlug = splitPath.at(4);

if (!courseSlug) throw error(404);
const md = await getContentTypePath<Course>(ContentType.course, courseSlug);

if (!md) throw error(404);
const contentItems = await filterContent({ contentItems: [md] })
const course = contentItems?.at(0);
if (!course) throw error(404);

// Content is good, fetch surrounding items
const authors: Author[] = [];
if (course?.authors) {
for (const authorSlug of course.authors) {
const author = await getContentTypePath<Author>(ContentType.author, authorSlug);
if (author) authors.push(author)
}
}

const sponsors: Sponsor[] = [];
if (course?.sponsors) {
for (const sponsorSlug of course.sponsors) {
const sponsor = await getContentTypePath<Sponsor>(ContentType.sponsor, sponsorSlug);
if (sponsor) sponsors.push(sponsor)
}
}

return {
content: course.lesson?.find(l => l.slug === lessonSlug),
course,
authors,
sponsors
}
}
catch (e) {
console.error(e)
throw error(404)
}
})
export const load = async ({ url, parent }) => {
const data = await parent();

try {
const splitPath = url.pathname.split('/');
const courseSlug = splitPath.at(2);
const lessonSlug = splitPath.at(4);

if (!courseSlug) throw error(404);
const md = await getContentTypePath<Course>(ContentType.course, courseSlug);

if (!md) throw error(404);
const contentItems = await filterContent({ contentItems: [md] });
const course = contentItems?.at(0);
if (!course) throw error(404);

// Content is good, fetch surrounding items
const authors: Author[] = [];
if (course?.authors) {
for (const authorSlug of course.authors) {
const author = await getContentTypePath<Author>(ContentType.author, authorSlug);
if (author) authors.push(author);
}
}

const sponsors: Sponsor[] = [];
if (course?.sponsors) {
for (const sponsorSlug of course.sponsors) {
const sponsor = await getContentTypePath<Sponsor>(ContentType.sponsor, sponsorSlug);
if (sponsor) sponsors.push(sponsor);
}
}

const content = course.lesson?.find((l) => l.slug === lessonSlug);
if (
lessonSlug &&
content?.locked &&
!allowLocal &&
(!data?.user?.uid || !data?.user?.stripeRole)
) {
throw 'app:redirect';
}

return {
content,
course,
authors,
sponsors
};
} catch (e) {
console.error(e);

if (e === 'app:redirect') {
throw redirect(307, `/login?redirectTo=${url.pathname}`);
}

throw error(404);
}
};
Original file line number Diff line number Diff line change
@@ -1,11 +1,48 @@
---
type: course
authors:
- alex-patterson
- anthony-campolo
cloudinary_convert: false
published: draft
cover: https://media.codingcat.dev/image/upload/v1684518966/main-codingcatdev-photo/courses/solidjs-intro/SolidJSCourse.png
excerpt: 'In this course, you will learn everything you need to know to build user interfaces with SolidJS.'
published: published
slug: intro-to-solid-js
start: December 20, 2022 11:15 AM
section: Intro
start: May 19, 2023 11:15 AM
title: Intro to SolidJS
updated: October 26, 2022 11:15 AM
---
updated:
weight: 1
---

## What is Solid?

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.

### What are the Benefits of Solid?

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.

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.

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.

**What you will learn:**

- The basics of SolidJS
- State management
- Routing
- Custom hooks
- Server-side rendering
- Suspense

**Who is this course for?**

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.

**What you will need:**

- A basic understanding of JavaScript
- A text editor or IDE (preferably VSCode)
- A Node.js environment

**Go Pro and start learning SolidJS today!**

This file was deleted.

This file was deleted.

Loading