mirror of
https://github.com/freeCodeCamp/freeCodeCamp.git
synced 2026-05-28 18:26:54 +00:00
feat: client overhaul proof of concept (#45844)
* chore: initial setup of web package This is *not* a workspace, yet, because it would be nice to use the latest React, but /client can't migrate (yet). Having two React versions creates issues in workspaces since /.bin/next gets hoisted to root... and finds the root React version :( * feat: add config for next * fix: use jsx-runtime for web linting * chore: init curriculum-server with json-server * chore: integrate curriculum-server with TS/eslint * feat: add patch script json-server doesn't like keys with '/'s in so, for now I'm just patching them out. This lets us keep a strong separation between this WIP and the rest of the code. * fix: use port 8000 to avoid conflicts * feat: crude ISR demo using challenge pages * feat: extend ISR demo to use params * feat: return props for specific superblocks * chore: re-organise folders * refactor: put data fetching in a single module * refactor: challenge page slightly * feat: add link to test ISR You can see that, if you run next dev, the linked page gets regenerated whenever you navigate to it. However, if you run next build that is no longer the case and the page has to be reloaded for the user to see the latest version. The implication is that we'll need another method (Web worker, probably) to detect if the page needs to be updated. * feat: render static paths for rwd * feat: add monaco Editor * feat: send less data via props Rather than sending superblocks, this now sends blocks. Next step, just the challenge! * fix: only send individual challenge's data * feat: send /learn/stuff/<id> to the challenge page * fix: redirect to path with trailing id * fix: handle all possible path prefixes * feat: add superblocks with trailing ids * chore: rename block -> blockOrId * chore: remove logs * fix: return notFound if page id is missing * chore: add a note about increasing TS strictness * feat: serverside redirects This should be a touch more performant, but mostly it separates the concerns. Since the server already has the responsibility of choosing what pages to render, redirects fit naturally with its concerns. * refactor: clean up param validation * feat: create list of blocks in superblock * feat: add challenge links to map * feat: link to full path, not just id * refactor: ensure props match getStaticProps By specifying the props for GetStaticProps we ensure that it returns the expected data and use InferGetStaticPropsType to get the type out again for use in the component * feat: improve and document dev experience * refactor: separate routing from rendering * refactor: extract routing logic into functions * refactor: naming consistency * refactor: move data wrangling into get-curriculum * refactor: align blockOrId and id * chore: remove the server from workspaces * chore: remove the lock * docs: paths Co-authored-by: Tom <20648924+moT01@users.noreply.github.com> * chore: install before linting * fix: create env.json before installing new client * chore: ignore generated json file Co-authored-by: Tom <20648924+moT01@users.noreply.github.com>
This commit is contained in:
Oliver Eyton-Williams
committed by
GitHub
GitHub
parent
fa59d4a107
commit
cf4b9a1557
@@ -0,0 +1 @@
|
||||
.next
|
||||
@@ -0,0 +1,41 @@
|
||||
# Getting Started
|
||||
|
||||
If you haven't installed freeCodeCamp proper yet, that needs to happen first.
|
||||
|
||||
Once that's done, the curriculum server and this package need installing. Then the prepare script will take care of the rest.
|
||||
|
||||
```sh
|
||||
cd ../curriculum-server
|
||||
npm i
|
||||
cd ../web
|
||||
npm i
|
||||
npm run dev
|
||||
```
|
||||
|
||||
Now the server should be running on port 3000 and the client on port 8000.
|
||||
|
||||
For now there's not much to see.
|
||||
|
||||
http://localhost:8000/learn/special-path
|
||||
|
||||
is the main entry point and
|
||||
|
||||
http://localhost:3000/responsive-web-design
|
||||
|
||||
is the curriculum data that is currently being used.
|
||||
|
||||
## Things of Note
|
||||
|
||||
Incremental static regeneration is working quite nicely. You can modify the curriculum data (in /curriculum-server/data/curriculum.json), refresh reload your browser and the changes will be reflected.
|
||||
|
||||
The trailing ids are a bit buggy, but you can replace them with a new page's mongo id and it ~should~ will refresh.
|
||||
|
||||
Also, mangled paths _mostly_ work. For example:
|
||||
|
||||
http://localhost:8000/learn/responsive-web-design/applied-an-element/587d774e367417b2b2512a9f
|
||||
|
||||
redirects you to
|
||||
|
||||
http://localhost:8000/learn/responsive-web-design/applied-accessibility/jump-straight-to-the-content-using-the-main-element/587d774e367417b2b2512a9f
|
||||
|
||||
but not all paths behave as desired.
|
||||
Vendored
+5
@@ -0,0 +1,5 @@
|
||||
/// <reference types="next" />
|
||||
/// <reference types="next/image-types/global" />
|
||||
|
||||
// NOTE: This file should not be edited
|
||||
// see https://nextjs.org/docs/basic-features/typescript for more information.
|
||||
@@ -0,0 +1,37 @@
|
||||
{
|
||||
"name": "@freecodecamp/web",
|
||||
"version": "0.0.1",
|
||||
"description": "The freeCodeCamp.org open-source codebase and curriculum",
|
||||
"license": "BSD-3-Clause",
|
||||
"private": true,
|
||||
"engines": {
|
||||
"node": ">=16",
|
||||
"npm": ">=8"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git+https://github.com/freeCodeCamp/freeCodeCamp.git"
|
||||
},
|
||||
"bugs": {
|
||||
"url": "https://github.com/freeCodeCamp/freeCodeCamp/issues"
|
||||
},
|
||||
"homepage": "https://github.com/freeCodeCamp/freeCodeCamp#readme",
|
||||
"author": "freeCodeCamp <team@freecodecamp.org>",
|
||||
"main": "none",
|
||||
"scripts": {
|
||||
"test": "echo \"Error: no test specified\" && exit 1",
|
||||
"develop-client": "next dev --port 8000",
|
||||
"dev": "concurrently \"npm:develop-curriculum-server\" \"npm:develop-client\"",
|
||||
"develop-curriculum-server": "npm --prefix ../curriculum-server run dev",
|
||||
"prepare": "npm --prefix ../ run build:curriculum && npm --prefix ../curriculum-server/ run source-curriculum"
|
||||
},
|
||||
"dependencies": {
|
||||
"@monaco-editor/react": "^4.4.2",
|
||||
"next": "^12.1.5",
|
||||
"react": "^18.0.0",
|
||||
"react-dom": "^18.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"concurrently": "^7.1.0"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,165 @@
|
||||
/*
|
||||
Eventually this module could be used as a cache (in memory or on-disk) for the
|
||||
curriculum, but for now it just fetches the data on demand.
|
||||
|
||||
A reasonably reliable approach would be as follows:
|
||||
1. Query the curriculum API for the latest version of the curriculum.
|
||||
2. If the API responds
|
||||
a. If the latest version is not cached, query the API for the latest version
|
||||
b. Otherwise use the cached value.
|
||||
3. If the API does not respond, use the cached value and log an error.
|
||||
|
||||
*/
|
||||
|
||||
// TODO: this should be { [superblock: string]: Superblock }
|
||||
export interface Curriculum {
|
||||
rwdBlocks: SuperBlock;
|
||||
jsBlocks: SuperBlock;
|
||||
}
|
||||
|
||||
export interface SuperBlock {
|
||||
[index: string]: Block;
|
||||
}
|
||||
|
||||
export interface Block {
|
||||
meta: {
|
||||
name: string;
|
||||
isUpcomingChange: boolean;
|
||||
dashedName: string;
|
||||
order: number;
|
||||
time: string;
|
||||
template: string;
|
||||
required: string[];
|
||||
superBlock: string;
|
||||
challengeOrder: [id: string, title: string][];
|
||||
};
|
||||
challenges: Challenge[];
|
||||
}
|
||||
|
||||
export interface Challenge {
|
||||
id: string;
|
||||
dashedName: string;
|
||||
description: string;
|
||||
challengeFiles: { contents: string; ext: string }[];
|
||||
}
|
||||
|
||||
export interface PathSegments {
|
||||
superblock: string;
|
||||
block?: string;
|
||||
dashedName?: string;
|
||||
id: string;
|
||||
}
|
||||
|
||||
export interface IdToDashedNameMap {
|
||||
[id: string]: string;
|
||||
}
|
||||
|
||||
interface SuperBlockToChallengeMap {
|
||||
[index: string]: (pathSegments: Required<PathSegments>) => Challenge;
|
||||
}
|
||||
|
||||
export async function getCurriculum() {
|
||||
const rwd = await fetch('http://localhost:3000/responsive-web-design');
|
||||
const js = await fetch(
|
||||
'http://localhost:3000/javascript-algorithms-and-data-structures'
|
||||
);
|
||||
const rwdBlocks = ((await rwd.json()) as { blocks: SuperBlock }).blocks;
|
||||
const jsBlocks = ((await js.json()) as { blocks: SuperBlock }).blocks;
|
||||
|
||||
return { rwdBlocks, jsBlocks };
|
||||
}
|
||||
|
||||
export function getIdToPathSegmentsMap({ rwdBlocks }: Curriculum) {
|
||||
// TODO: this is pretty inefficient. The curriculum server needs to return an
|
||||
// object with ids as keys and the superblock, block and dashedName as values.
|
||||
// i.e. enough info to recreate the full path.
|
||||
|
||||
// Also TODO: use params here and, instead of passing the map, just pass the
|
||||
// new path.
|
||||
const idToPathSegmentsMap: Record<string, PathSegments> = {};
|
||||
for (const blockName of Object.keys(rwdBlocks)) {
|
||||
const block = rwdBlocks[blockName];
|
||||
for (const challenge of block.challenges) {
|
||||
idToPathSegmentsMap[challenge.id] = {
|
||||
superblock: 'responsive-web-design',
|
||||
block: blockName,
|
||||
dashedName: challenge.dashedName,
|
||||
id: challenge.id
|
||||
};
|
||||
}
|
||||
}
|
||||
idToPathSegmentsMap['special-path'] = {
|
||||
superblock: 'responsive-web-design',
|
||||
id: 'special-path'
|
||||
};
|
||||
return idToPathSegmentsMap;
|
||||
}
|
||||
|
||||
type SuperBlockToBlockMap = {
|
||||
[superblock: string]: string[];
|
||||
};
|
||||
|
||||
export function getSuperBlockToBlockMap(
|
||||
curriculum: Curriculum
|
||||
): SuperBlockToBlockMap {
|
||||
return { 'responsive-web-design': Object.keys(curriculum.rwdBlocks) };
|
||||
}
|
||||
|
||||
export function getBlockNameToChallengeOrderMap(
|
||||
{ rwdBlocks }: Curriculum,
|
||||
blockNames: string[]
|
||||
): { [index: string]: [id: string, title: string] } {
|
||||
return blockNames.reduce(
|
||||
(prev, blockName) => ({
|
||||
...prev,
|
||||
...{ [blockName]: rwdBlocks[blockName].meta.challengeOrder }
|
||||
}),
|
||||
{}
|
||||
);
|
||||
}
|
||||
|
||||
// TODO: remove the hardcoding of superblock names. Also, the map generation is
|
||||
// a mess
|
||||
export function getChallengeData(
|
||||
{ rwdBlocks, jsBlocks }: Curriculum,
|
||||
pathSegments: Required<PathSegments>
|
||||
) {
|
||||
const superBlockToChallengeMap: SuperBlockToChallengeMap = {
|
||||
'responsive-web-design': (pathSegments: Required<PathSegments>) =>
|
||||
findChallenge(findBlock(rwdBlocks, pathSegments), pathSegments),
|
||||
'javascript-algorithms-and-data-structures': (
|
||||
pathSegments: Required<PathSegments>
|
||||
) => findChallenge(findBlock(jsBlocks, pathSegments), pathSegments)
|
||||
};
|
||||
return superBlockToChallengeMap[pathSegments.superblock](pathSegments);
|
||||
}
|
||||
|
||||
function findBlock(superblock: SuperBlock, params: Required<PathSegments>) {
|
||||
return superblock[params.block];
|
||||
}
|
||||
|
||||
function findChallenge(block: Block, params: PathSegments) {
|
||||
const challenge = block.challenges.find(
|
||||
(c: { dashedName: string }) => c.dashedName == params.dashedName
|
||||
);
|
||||
// TODO: is there a nicer way to handle missing challenges?
|
||||
if (!challenge) {
|
||||
throw new Error(`Challenge not found: ${params.id}`);
|
||||
}
|
||||
return challenge;
|
||||
}
|
||||
|
||||
// TODO: again, bit ugly. Would be better to get data in this shape from the
|
||||
// curriculum server.
|
||||
export function getIdToDashedNameMap({
|
||||
rwdBlocks
|
||||
}: Curriculum): IdToDashedNameMap {
|
||||
const idToDashedNameMap: Record<string, string> = {};
|
||||
for (const blockName of Object.keys(rwdBlocks)) {
|
||||
const block = rwdBlocks[blockName];
|
||||
for (const challenge of block.challenges) {
|
||||
idToDashedNameMap[challenge.id] = challenge.dashedName;
|
||||
}
|
||||
}
|
||||
return idToDashedNameMap;
|
||||
}
|
||||
@@ -0,0 +1,48 @@
|
||||
import { InferGetStaticPropsType } from 'next';
|
||||
import { useRouter } from 'next/router';
|
||||
import Editor from '@monaco-editor/react';
|
||||
import Link from 'next/link';
|
||||
|
||||
import type {
|
||||
getStaticProps,
|
||||
Challenge
|
||||
} from '../pages/learn/[superblock]/[blockOrId]/[dashedName]/[id]';
|
||||
|
||||
export default function ChallengeComponent({
|
||||
challengeData
|
||||
}: InferGetStaticPropsType<typeof getStaticProps>) {
|
||||
const { isFallback } = useRouter();
|
||||
if (isFallback) return <div>Loading...</div>;
|
||||
|
||||
return (
|
||||
<>
|
||||
<Main challengeData={challengeData} />
|
||||
<Link
|
||||
href={
|
||||
'/learn/responsive-web-design/basic-html-and-html5/say-hello-to-html-elements'
|
||||
}
|
||||
>
|
||||
Go here
|
||||
</Link>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
interface MainProps {
|
||||
challengeData: Challenge | null;
|
||||
}
|
||||
|
||||
function Main({ challengeData }: MainProps) {
|
||||
if (!challengeData || !challengeData?.challengeFiles) return null;
|
||||
|
||||
return (
|
||||
<>
|
||||
<div dangerouslySetInnerHTML={{ __html: challengeData.description }} />
|
||||
<Editor
|
||||
defaultLanguage={challengeData.challengeFiles[0].ext}
|
||||
height={'50vh'}
|
||||
defaultValue={challengeData.challengeFiles[0].contents}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,37 @@
|
||||
/* eslint-disable jsx-a11y/anchor-is-valid */
|
||||
import { InferGetStaticPropsType } from 'next';
|
||||
import Link from 'next/link';
|
||||
import { useRouter } from 'next/router';
|
||||
|
||||
// This is circular, but it's only types.
|
||||
import type { getStaticProps } from '../pages/learn/[superblock]/[blockOrId]';
|
||||
|
||||
export default function SuperBlock({
|
||||
blockNames,
|
||||
blockNameToChallengeOrderMap,
|
||||
idToDashedNameMap
|
||||
}: InferGetStaticPropsType<typeof getStaticProps>) {
|
||||
const { isFallback } = useRouter();
|
||||
if (isFallback) return <div>Loading...</div>;
|
||||
|
||||
return (
|
||||
<>
|
||||
{blockNames.map(blockName => (
|
||||
<ul key={blockName}>
|
||||
{blockName}
|
||||
<ul>
|
||||
{blockNameToChallengeOrderMap[blockName].map(([id, title]) => (
|
||||
<li key={id}>
|
||||
<Link
|
||||
href={`/learn/responsive-web-design/${blockName}/${idToDashedNameMap[id]}/${id}`}
|
||||
>
|
||||
<a>{title}</a>
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</ul>
|
||||
))}
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,56 @@
|
||||
import { GetStaticPaths, GetStaticProps } from 'next';
|
||||
import {
|
||||
getCurriculum,
|
||||
getIdToPathSegmentsMap,
|
||||
PathSegments
|
||||
} from '../../data-fetching/get-curriculum';
|
||||
|
||||
// Next expects there to be a React component to render the page. This never
|
||||
// happens because getStaticProps either redirects to a 404 or to another page,
|
||||
// but we still need to provide something:
|
||||
export default function Catch() {
|
||||
return null;
|
||||
}
|
||||
|
||||
export const getStaticProps: GetStaticProps = async ({ params }) => {
|
||||
const idToPathSegmentsMap = getIdToPathSegmentsMap(await getCurriculum());
|
||||
const uuid = params?.id?.slice(-1)[0];
|
||||
|
||||
if (!uuid) {
|
||||
return { notFound: true, revalidate: 10 };
|
||||
}
|
||||
// TODO: rather than using path segments, use the whole path. This makes this
|
||||
// more generic and it's easier to redirect to non-challenge pages. i.e. if we
|
||||
// have the id of a superblock, it won't have three path segments - it will have
|
||||
// one.
|
||||
const pathSegments = idToPathSegmentsMap[uuid];
|
||||
if (!pathSegments) {
|
||||
return { notFound: true, revalidate: 10 };
|
||||
}
|
||||
|
||||
return {
|
||||
redirect: {
|
||||
destination: getDestination(pathSegments),
|
||||
permanent: false
|
||||
},
|
||||
revalidate: 10
|
||||
};
|
||||
};
|
||||
|
||||
export const getDestination = (pathSegments: PathSegments) => {
|
||||
const { superblock, block, dashedName, id } = pathSegments;
|
||||
// Currently there are either
|
||||
if (block && dashedName) {
|
||||
// challenges:
|
||||
return `/learn/${superblock}/${block}/${dashedName}/${id}`;
|
||||
} else {
|
||||
// or superblocks:
|
||||
return `/learn/${superblock}/${id}`;
|
||||
}
|
||||
};
|
||||
|
||||
// As with the page component, even though we render 0 pages, this has to exist
|
||||
export const getStaticPaths: GetStaticPaths = () => ({
|
||||
paths: [],
|
||||
fallback: true
|
||||
});
|
||||
@@ -0,0 +1,93 @@
|
||||
import { ParsedUrlQuery } from 'querystring';
|
||||
import { GetStaticPaths, GetStaticProps } from 'next';
|
||||
import {
|
||||
getCurriculum,
|
||||
getIdToDashedNameMap,
|
||||
getIdToPathSegmentsMap,
|
||||
PathSegments,
|
||||
getSuperBlockToBlockMap,
|
||||
getBlockNameToChallengeOrderMap,
|
||||
Curriculum
|
||||
} from '../../../data-fetching/get-curriculum';
|
||||
import SuperBlock from '../../../page-templates/superblock';
|
||||
import { getDestination } from '../[...id]';
|
||||
|
||||
interface Props {
|
||||
blockNames: string[];
|
||||
blockNameToChallengeOrderMap: {
|
||||
[index: string]: [id: string, title: string];
|
||||
};
|
||||
idToDashedNameMap: { [index: string]: string };
|
||||
}
|
||||
|
||||
export default SuperBlock;
|
||||
|
||||
export const getStaticProps: GetStaticProps<Props> = async ({ params }) => {
|
||||
const curriculum = await getCurriculum();
|
||||
const idToPathSegmentsMap = getIdToPathSegmentsMap(curriculum);
|
||||
|
||||
// TODO: simplify once noUncheckedIndexedAccess is set.
|
||||
const pathSegments = idToPathSegmentsMap[params?.blockOrId as string] as
|
||||
| PathSegments
|
||||
| undefined;
|
||||
|
||||
if (!pathSegments) return fourOhFour();
|
||||
if (pathExists(pathSegments, params)) {
|
||||
const props = getProps(curriculum);
|
||||
return renderPage(props);
|
||||
} else {
|
||||
return redirect(pathSegments);
|
||||
}
|
||||
};
|
||||
|
||||
const getProps = (curriculum: Curriculum) => {
|
||||
const idToDashedNameMap = getIdToDashedNameMap(curriculum);
|
||||
const superBlockToBlockMap = getSuperBlockToBlockMap(curriculum);
|
||||
|
||||
// TODO: figure out how to generate string literal types for these. I think
|
||||
// the approach has to be to fetch the curriculum and use that to generate a
|
||||
// type declaration. This won't mean anything in production, but it will be
|
||||
// helpful when developing.
|
||||
const blockNames = superBlockToBlockMap['responsive-web-design'];
|
||||
const blockNameToChallengeOrderMap = getBlockNameToChallengeOrderMap(
|
||||
curriculum,
|
||||
blockNames
|
||||
);
|
||||
|
||||
return {
|
||||
blockNames,
|
||||
blockNameToChallengeOrderMap,
|
||||
idToDashedNameMap
|
||||
};
|
||||
};
|
||||
|
||||
const renderPage = (props: Props) => ({
|
||||
props,
|
||||
revalidate: 10
|
||||
});
|
||||
|
||||
const redirect = (pathSegments: PathSegments) => ({
|
||||
redirect: {
|
||||
destination: getDestination(pathSegments),
|
||||
permanent: false
|
||||
},
|
||||
revalidate: 10
|
||||
});
|
||||
|
||||
// DRY this with [id]'s version
|
||||
const fourOhFour = () => ({ notFound: true, revalidate: 10 } as const);
|
||||
|
||||
// DRY this with [id]'s version
|
||||
const pathExists = (pathSegments: PathSegments, params?: ParsedUrlQuery) => {
|
||||
const isChallenge = pathSegments.dashedName;
|
||||
const isExpectedSuperBlockParam =
|
||||
params?.superblock === pathSegments.superblock;
|
||||
return !isChallenge && isExpectedSuperBlockParam;
|
||||
};
|
||||
|
||||
export const getStaticPaths: GetStaticPaths = () => {
|
||||
return {
|
||||
paths: ['/learn/responsive-web-design/special-path'],
|
||||
fallback: true
|
||||
};
|
||||
};
|
||||
@@ -0,0 +1,122 @@
|
||||
import { ParsedUrlQuery } from 'querystring';
|
||||
import { GetStaticPaths, GetStaticProps } from 'next';
|
||||
|
||||
import {
|
||||
SuperBlock,
|
||||
Challenge,
|
||||
getCurriculum,
|
||||
getIdToPathSegmentsMap,
|
||||
PathSegments,
|
||||
getChallengeData,
|
||||
Curriculum
|
||||
} from '../../../../../data-fetching/get-curriculum';
|
||||
import ChallengeComponent from '../../../../../page-templates/challenge';
|
||||
import { getDestination } from '../../../[...id]';
|
||||
interface Props {
|
||||
challengeData: Challenge;
|
||||
}
|
||||
|
||||
export type { Challenge };
|
||||
|
||||
export default ChallengeComponent;
|
||||
|
||||
export const getStaticProps: GetStaticProps<Props> = async ({ params }) => {
|
||||
const curriculum = await getCurriculum();
|
||||
const idToPathSegmentsMap = getIdToPathSegmentsMap(curriculum);
|
||||
|
||||
// TODO: simplify once noUncheckedIndexedAccess is set.
|
||||
const pathSegments = idToPathSegmentsMap[params?.id as string] as
|
||||
| PathSegments
|
||||
| undefined;
|
||||
|
||||
if (!pathSegments) return fourOhFour();
|
||||
if (pathExists(pathSegments, params)) {
|
||||
const props = getProps(curriculum, pathSegments);
|
||||
return renderPage(props);
|
||||
} else {
|
||||
return redirect(pathSegments);
|
||||
}
|
||||
};
|
||||
|
||||
const getProps = (
|
||||
curriculum: Curriculum,
|
||||
pathSegments: Required<PathSegments>
|
||||
) => ({
|
||||
challengeData: getChallengeData(curriculum, pathSegments)
|
||||
});
|
||||
// DRY this with [blockOrId]'s version
|
||||
const fourOhFour = () => ({ notFound: true, revalidate: 10 } as const);
|
||||
|
||||
// DRY this with [blockOrId]'s version
|
||||
const pathExists = (
|
||||
pathSegments: PathSegments,
|
||||
params?: ParsedUrlQuery
|
||||
): pathSegments is Required<PathSegments> =>
|
||||
params?.superblock === pathSegments.superblock &&
|
||||
params?.blockOrId === pathSegments.block &&
|
||||
params?.dashedName === pathSegments.dashedName;
|
||||
|
||||
const renderPage = (props: Props) => ({
|
||||
props,
|
||||
revalidate: 10
|
||||
});
|
||||
|
||||
function redirect(pathSegments: PathSegments) {
|
||||
return {
|
||||
redirect: {
|
||||
destination: getDestination(pathSegments),
|
||||
permanent: false
|
||||
},
|
||||
revalidate: 10
|
||||
};
|
||||
}
|
||||
|
||||
export const getStaticPaths: GetStaticPaths = async () => {
|
||||
const { rwdBlocks } = await getCurriculum();
|
||||
|
||||
const rwdBlocknames = Object.keys(rwdBlocks);
|
||||
|
||||
// TODO: generalize to all superblocks... OR consider the merits of avoiding
|
||||
// this entirely. If we skip this the pro is quicker builds and the con is
|
||||
// that we'd more work onto the webserver. It's probably best to do as much
|
||||
// work upfront as possible. At least until that upfront work takes too long.
|
||||
const rwdPaths = rwdBlocknames
|
||||
.map(name =>
|
||||
rwdBlocks[name].meta.challengeOrder.map(([id]) =>
|
||||
toParams(
|
||||
'responsive-web-design',
|
||||
name,
|
||||
getDashedName(rwdBlocks, name, id),
|
||||
id
|
||||
)
|
||||
)
|
||||
)
|
||||
.flat();
|
||||
|
||||
return {
|
||||
paths: rwdPaths,
|
||||
fallback: true
|
||||
};
|
||||
};
|
||||
|
||||
function getDashedName(block: SuperBlock, blockName: string, id: string) {
|
||||
const challenge = block[blockName].challenges.find(c => c.id === id);
|
||||
if (!challenge) throw Error(`Challenge ${id} not found in ${blockName}`);
|
||||
return challenge.dashedName;
|
||||
}
|
||||
|
||||
function toParams(
|
||||
superblock: string,
|
||||
block: string,
|
||||
dashedName: string,
|
||||
id: string
|
||||
) {
|
||||
return {
|
||||
params: {
|
||||
superblock,
|
||||
blockOrId: block,
|
||||
dashedName,
|
||||
id
|
||||
}
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,13 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"lib": ["dom", "dom.iterable", "esnext"],
|
||||
"incremental": true,
|
||||
"module": "esnext",
|
||||
"isolatedModules": true,
|
||||
"jsx": "preserve"
|
||||
// "noUncheckedIndexedAccess": true TODO: add this when you've got time to clean up the code
|
||||
},
|
||||
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
|
||||
"exclude": ["node_modules"],
|
||||
"extends": "../tsconfig-base.json"
|
||||
}
|
||||
Reference in New Issue
Block a user