Skip to content

Commit 2115f10

Browse files
AugustinMauroyJakobJingleheimer
AugustinMauroy
and
JakobJingleheimer
authored
Website fundamental (#2)
Co-authored-by: Jacob Smith <[email protected]>
1 parent 92a3023 commit 2115f10

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

67 files changed

+8698
-0
lines changed

‎.editorconfig

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
root = true
2+
3+
[*]
4+
indent_style = tab
5+
end_of_line = lf
6+
charset = utf-8
7+
trim_trailing_whitespace = true
8+
insert_final_newline = true
9+
tab_width = 4
10+
11+
[*.json]
12+
indent_style = space
13+
indent_size = 2
14+
max_line_length = 50
15+
16+
[*.{yaml,yml}]
17+
indent_style = space
18+
19+
[*.css]
20+
indent_style = tab
21+
ident_size = 2

‎.gitattributes

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
# Auto detect text files and perform LF normalization
2+
* text=auto eol=lf

‎.github/workflows/deploy.yaml

+76
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
# yaml-language-server: $schema=https://json.schemastore.org/github-workflow.json
2+
3+
name: Build and Deploy to GitHub Pages
4+
5+
on:
6+
push:
7+
branches:
8+
- main
9+
10+
# Allows you to run this workflow manually from the Actions tab
11+
workflow_dispatch:
12+
13+
permissions:
14+
contents: read
15+
pages: write
16+
id-token: write
17+
18+
jobs:
19+
build:
20+
name: Build for GitHub Pages
21+
runs-on: ubuntu-latest
22+
23+
steps:
24+
- name: Git Checkout
25+
uses: actions/checkout@v4
26+
with:
27+
fetch-depth: 2
28+
29+
- name: Set up Node.js
30+
uses: actions/setup-node@v4
31+
with:
32+
node-version-file: '.nvmrc'
33+
cache: npm
34+
35+
- name: Install NPM packages
36+
run: npm ci
37+
38+
- name: Setup GitHub Pages
39+
uses: actions/configure-pages@v5
40+
41+
- name: Restore Cache
42+
uses: actions/cache/restore@v4
43+
with:
44+
path: .next/cache
45+
key: build-${{ hashFiles('**/package-lock.json') }}
46+
restore-keys: |
47+
build-${{ hashFiles('**/package-lock.json') }}
48+
enableCrossOsArchive: true
49+
50+
- name: Build Next.js
51+
run: node --run build
52+
- name: Save Cache
53+
uses: actions/cache/save@v4
54+
with:
55+
path: .next/cache
56+
key: build-${{ hashFiles('**/package-lock.json') }}
57+
enableCrossOsArchive: true
58+
59+
- name: Upload Artifact
60+
uses: actions/upload-pages-artifact@v3
61+
with:
62+
path: ./out # next.js build output
63+
64+
deploy:
65+
name: Deploy to GitHub Pages
66+
runs-on: ubuntu-latest
67+
needs: build
68+
69+
environment:
70+
name: github-pages
71+
url: ${{ steps.deployment.outputs.page_url }}
72+
73+
steps:
74+
- name: Deploy to GitHub Pages
75+
id: deployment
76+
uses: actions/deploy-pages@v4

‎.gitignore

+33
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2+
3+
# dependencies
4+
/node_modules
5+
6+
# next.js
7+
/.next/
8+
/out/
9+
10+
# production
11+
/build
12+
13+
# misc
14+
.DS_Store
15+
16+
# private keys
17+
*.pem
18+
19+
# debug
20+
*.log*
21+
22+
# local env files
23+
.env*.local
24+
25+
# vercel
26+
.vercel
27+
28+
# typescript
29+
*.tsbuildinfo
30+
next-env.d.ts
31+
32+
# Test coverage
33+
coverage.lcov

‎.nvmrc

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
23

‎.vscode/extensions.json

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"recommendations": ["biomejs.biome"]
3+
}

‎.vscode/settings.json

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
{
2+
"editor.formatOnSave": true,
3+
"javascript.updateImportsOnFileMove.enabled": "always",
4+
"typescript.updateImportsOnFileMove.enabled": "always",
5+
"editor.formatOnPaste": true,
6+
"editor.wordWrap": "wordWrapColumn",
7+
"editor.wordWrapColumn": 100,
8+
"[markdown]": {
9+
"editor.wordWrap": "off"
10+
}
11+
}

‎README.md

+28
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,30 @@
11
# nodejs-loaders.github.io
2+
23
A showcase website for the `nodejs-loader` project
4+
5+
## Development
6+
7+
THis will start a development server on `http://localhost:3000`.
8+
9+
```bash
10+
npm install
11+
node --run dev
12+
```
13+
14+
## Build
15+
16+
This will build the website into the `out` directory.
17+
18+
```bash
19+
npm ci
20+
node --run build
21+
```
22+
23+
## Preview
24+
25+
This environment simulates what will be deployed to github pages.
26+
27+
```bash
28+
npm ci
29+
node --run preview
30+
```

‎TODO.md

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
# TODO:
2+
3+
- Write the `what-is-nodejs-loaders` post
4+
- Write a "how to digest a nodejs-loader" post
5+
- Write a use case for react unit testing can be based on https://augustinmauroy.github.io/en/blog/post/how-to-test-react-app-with-node-test-runner
6+
- Write use case how to handle diffent jsx than react
7+
- CI with GA for pr
8+
- Add documentation of the project (this repo)
9+
- Add a `CONTRIBUTING.md` file
10+
- Design OG image for the project
11+
- Create engine to generate static OG images
12+
- `sitemap.xml` generation
13+
- `rss` feed generation
14+
- Add GH pr template
15+
- Add GH issue template
16+
- Add openSSF scorecard
17+
- Add dependabot
18+
- Add metata (title, description) _SEO_

‎app/article/[[...categories]]/page.module.css

+44
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
.page {
2+
@apply container
3+
mx-auto
4+
px-4
5+
py-8;
6+
7+
h1 {
8+
@apply mb-4
9+
font-bold
10+
text-3xl
11+
lg:text-4xl;
12+
}
13+
14+
p {
15+
@apply mb-4
16+
max-w-screen-md
17+
text-gray-500
18+
dark:text-gray-400;
19+
}
20+
21+
.noArticles {
22+
@apply mt-8;
23+
24+
p {
25+
@apply bg-gradient-to-r
26+
from-green-300
27+
to-green-800
28+
bg-clip-text
29+
text-center
30+
font-black
31+
text-3xl
32+
text-transparent;
33+
}
34+
35+
.Articles {
36+
@apply grid
37+
grid-cols-1
38+
justify-center
39+
gap-4
40+
md:grid-cols-2
41+
lg:grid-cols-3;
42+
}
43+
}
44+
}

‎app/article/[[...categories]]/page.tsx

+76
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
import { CategoriesSelector } from '~/components/Common/CategoriesSelector/index.tsx';
2+
import { ArticleCard } from '~/components/Post/ArticleCard/index.tsx';
3+
import { getPostsMetadata } from '~/lib/post.ts';
4+
import styles from './page.module.css';
5+
import type { FC } from 'react';
6+
7+
type CategoriesParams = {
8+
categories?: string[];
9+
};
10+
11+
type PageProps = {
12+
params: Promise<CategoriesParams>;
13+
};
14+
15+
/**
16+
* List of available categories
17+
*/
18+
const CATEGORIES = [
19+
{
20+
category: 'All articles',
21+
slug: '',
22+
},
23+
{
24+
category: 'Information',
25+
slug: 'information',
26+
},
27+
{
28+
category: 'Use cases',
29+
slug: 'use-cases',
30+
},
31+
{
32+
category: 'Releases',
33+
slug: 'releases',
34+
},
35+
];
36+
37+
export const generateStaticParams = () => {
38+
const params = [
39+
{ categories: [] }, // For the base route without any categories
40+
...CATEGORIES.slice(1).map(category => ({ categories: [category.slug] })), // For each individual category
41+
];
42+
43+
return params;
44+
};
45+
46+
const Page: FC<PageProps> = async ({ params }) => {
47+
const currentCategories = (await params).categories || [];
48+
const postsMetadata = await getPostsMetadata(currentCategories[0]);
49+
50+
return (
51+
<main className={styles.page}>
52+
<h1>Article list</h1>
53+
<p>
54+
Here you can find all the articles available on the website. You can
55+
filter them by category using the dropdown below.
56+
</p>
57+
<CategoriesSelector
58+
currentCategories={currentCategories}
59+
categories={CATEGORIES}
60+
/>
61+
{postsMetadata.length === 0 ? (
62+
<div className={styles.noArticles}>
63+
<p>No articles here for now</p>
64+
</div>
65+
) : (
66+
<div className={styles.articles}>
67+
{postsMetadata.map(post => (
68+
<ArticleCard key={post.slug} {...post} />
69+
))}
70+
</div>
71+
)}
72+
</main>
73+
);
74+
};
75+
76+
export default Page;

‎app/article/post/[article]/page.module.css

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
.page {
2+
@apply container
3+
mx-auto
4+
px-4;
5+
}

‎app/article/post/[article]/page.tsx

+49
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
import { notFound } from 'next/navigation';
2+
import { getContent } from '~/lib/content.ts';
3+
import { getAllPosts } from '~/lib/post.ts';
4+
import { ArticleHeader } from '~/components/Post/ArticleHeader/index.tsx';
5+
import styles from './page.module.css';
6+
import type { FC } from 'react';
7+
import type { PostFrontmatter } from '~/types/frontmatter';
8+
import '~/styles/markdown.css';
9+
10+
type PostParams = {
11+
article: string;
12+
};
13+
14+
type PageProps = {
15+
params: Promise<PostParams>;
16+
};
17+
18+
export async function generateStaticParams() {
19+
const posts = await getAllPosts();
20+
21+
return posts.map(post => {
22+
const article = post.split('.').slice(0, -1).join('.');
23+
return { article };
24+
});
25+
}
26+
27+
const Page: FC<PageProps> = async ({ params }) => {
28+
const article = (await params).article;
29+
const slugs = ['post', article];
30+
31+
const mdxResult = await getContent<PostFrontmatter>(slugs);
32+
33+
if (!mdxResult) notFound();
34+
35+
const { content, frontmatter } = mdxResult;
36+
37+
return (
38+
<main className={styles.page}>
39+
<ArticleHeader
40+
title={frontmatter.title}
41+
description={frontmatter.description}
42+
authors={frontmatter.authors}
43+
/>
44+
<article className="md-content">{content}</article>
45+
</main>
46+
);
47+
};
48+
49+
export default Page;

‎app/layout.tsx

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import classNames from 'classnames';
2+
import { GeistSans } from 'geist/font/sans';
3+
import { GeistMono } from 'geist/font/mono';
4+
import { Header } from '~/components/Sections/Header/index.tsx';
5+
import type { FC, PropsWithChildren } from 'react';
6+
import '~/styles/globals.css';
7+
8+
const RootLayout: FC<PropsWithChildren> = ({ children }) => (
9+
<html lang="en">
10+
<body className={classNames(GeistSans.className, GeistMono.className)}>
11+
<Header />
12+
{children}
13+
</body>
14+
</html>
15+
);
16+
17+
export default RootLayout;

0 commit comments

Comments
 (0)