rayan/next-learn
1
0
Fork 0
mirror of https://github.com/vercel/next-learn.git synced 2026-06-11 09:51:47 +00:00
Code Issues Packages Projects Releases Wiki Activity

Moves prettier and lint to root of the project (#143)

Browse Source
This commit is contained in:
Michael Novotny
2023-09-06 12:57:56 -05:00
committed by GitHub
parent a657dd215b
commit 1725e58866
135 changed files with 6730 additions and 765 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
.eslintrc.js Normal file
View File

@@ -0,0 +1,10 @@
module.exports = {
extends: ['next/core-web-vitals', 'prettier'],
ignorePatterns: ['**/.next/**', '**/node_modules/**'],
root: true,
settings: {
next: {
rootDir: ['basics/*/', 'dashboard/*/', 'seo/'],
},
},
};

6
.github/dependabot.yml vendored Normal file
View File

@@ -0,0 +1,6 @@
version: 2
updates:
- package-ecosystem: 'github-actions'
directory: '/'
schedule:
interval: 'weekly'

30
.github/workflows/test.yml vendored Normal file
View File

@@ -0,0 +1,30 @@
name: test
on: pull_request
jobs:
test:
runs-on: ubuntu-latest
steps:
- name: Cancel running workflows
uses: styfle/cancel-workflow-action@0.11.0
with:
access_token: ${{ github.token }}
- name: Checkout repo
uses: actions/checkout@v3
- name: Setup pnpm
uses: pnpm/action-setup@v2
- name: Set node version
uses: actions/setup-node@v3
with:
cache: 'pnpm'
node-version-file: '.nvmrc'
- name: Cache node_modules
id: node-modules-cache
uses: actions/cache@v3
with:
path: '**/node_modules'
key: node-modules-cache-${{ hashFiles('**/pnpm-lock.yaml') }}
- name: Install dependencies
if: steps.node-modules-cache.outputs.cache-hit != 'true'
run: pnpm install
- name: Run tests
run: pnpm test

3
.gitignore vendored Normal file
View File

@@ -0,0 +1,3 @@
*.log
.DS_Store
node_modules

0
basics/.nvmrc → .nvmrc
View File

4
.prettierignore Normal file
View File

@@ -0,0 +1,4 @@
**/.next
**/node_modules
**/package-lock.json
**/pnpm-lock.yaml

5
basics/.gitignore vendored
View File

@@ -1,5 +0,0 @@
.next
node_modules
*.log
yarn.lock
package-lock.json

2
basics/.prettierignore
View File

@@ -1,2 +0,0 @@
.next
node_modules

7
basics/.prettierrc
View File

@@ -1,7 +0,0 @@
{
"singleQuote": true,
"semi": false,
"trailingComma": "none",
"arrowParens": "avoid",
"endOfLine": "auto"
}

6
basics/api-routes-starter/components/date.js
View File

@@ -1,6 +1,6 @@
import { parseISO, format } from 'date-fns'
import { parseISO, format } from 'date-fns';
export default function Date({ dateString }) {
const date = parseISO(dateString)
return <time dateTime={dateString}>{format(date, 'LLLL d, yyyy')}</time>
const date = parseISO(dateString);
return <time dateTime={dateString}>{format(date, 'LLLL d, yyyy')}</time>;
}

18
basics/api-routes-starter/components/layout.js
View File

@@ -1,11 +1,11 @@
import Head from 'next/head'
import Image from 'next/image'
import styles from './layout.module.css'
import utilStyles from '../styles/utils.module.css'
import Link from 'next/link'
import Head from 'next/head';
import Image from 'next/image';
import styles from './layout.module.css';
import utilStyles from '../styles/utils.module.css';
import Link from 'next/link';
const name = '[Your Name]'
export const siteTitle = 'Next.js Sample Website'
const name = '[Your Name]';
export const siteTitle = 'Next.js Sample Website';
export default function Layout({ children, home }) {
return (
@@ -19,7 +19,7 @@ export default function Layout({ children, home }) {
<meta
property="og:image"
content={`https://og-image.vercel.app/${encodeURI(
siteTitle
siteTitle,
)}.png?theme=light&md=0&fontSize=75px&images=https%3A%2F%2Fassets.zeit.co%2Fimage%2Fupload%2Ffront%2Fassets%2Fdesign%2Fnextjs-black-logo.svg`}
/>
<meta name="og:title" content={siteTitle} />
@@ -65,5 +65,5 @@ export default function Layout({ children, home }) {
</div>
)}
</div>
)
);
}

62
basics/api-routes-starter/lib/posts.js
View File

@@ -1,69 +1,69 @@
import fs from 'fs'
import path from 'path'
import matter from 'gray-matter'
import { remark } from 'remark'
import html from 'remark-html'
import fs from 'fs';
import path from 'path';
import matter from 'gray-matter';
import { remark } from 'remark';
import html from 'remark-html';
const postsDirectory = path.join(process.cwd(), 'posts')
const postsDirectory = path.join(process.cwd(), 'posts');
export function getSortedPostsData() {
// Get file names under /posts
const fileNames = fs.readdirSync(postsDirectory)
const allPostsData = fileNames.map(fileName => {
const fileNames = fs.readdirSync(postsDirectory);
const allPostsData = fileNames.map((fileName) => {
// Remove ".md" from file name to get id
const id = fileName.replace(/\.md$/, '')
const id = fileName.replace(/\.md$/, '');
// Read markdown file as string
const fullPath = path.join(postsDirectory, fileName)
const fileContents = fs.readFileSync(fullPath, 'utf8')
const fullPath = path.join(postsDirectory, fileName);
const fileContents = fs.readFileSync(fullPath, 'utf8');
// Use gray-matter to parse the post metadata section
const matterResult = matter(fileContents)
const matterResult = matter(fileContents);
// Combine the data with the id
return {
id,
...matterResult.data
}
})
...matterResult.data,
};
});
// Sort posts by date
return allPostsData.sort((a, b) => {
if (a.date < b.date) {
return 1
return 1;
} else {
return -1
return -1;
}
})
});
}
export function getAllPostIds() {
const fileNames = fs.readdirSync(postsDirectory)
return fileNames.map(fileName => {
const fileNames = fs.readdirSync(postsDirectory);
return fileNames.map((fileName) => {
return {
params: {
id: fileName.replace(/\.md$/, '')
}
}
})
id: fileName.replace(/\.md$/, ''),
},
};
});
}
export async function getPostData(id) {
const fullPath = path.join(postsDirectory, `${id}.md`)
const fileContents = fs.readFileSync(fullPath, 'utf8')
const fullPath = path.join(postsDirectory, `${id}.md`);
const fileContents = fs.readFileSync(fullPath, 'utf8');
// Use gray-matter to parse the post metadata section
const matterResult = matter(fileContents)
const matterResult = matter(fileContents);
// Use remark to convert markdown into HTML string
const processedContent = await remark()
.use(html)
.process(matterResult.content)
const contentHtml = processedContent.toString()
.process(matterResult.content);
const contentHtml = processedContent.toString();
// Combine the data with the id and contentHtml
return {
id,
contentHtml,
...matterResult.data
}
...matterResult.data,
};
}

8
basics/api-routes-starter/package.json
View File

@@ -1,11 +1,8 @@
{
"private": true,
"engines": {
"node": ">=18"
},
"scripts": {
"dev": "next dev",
"build": "next build",
"dev": "next dev",
"start": "next start"
},
"dependencies": {
@@ -16,5 +13,8 @@
"react-dom": "18.2.0",
"remark": "^14.0.2",
"remark-html": "^15.0.1"
},
"engines": {
"node": ">=18"
}
}

4
basics/api-routes-starter/pages/_app.js
View File

@@ -1,5 +1,5 @@
import '../styles/global.css'
import '../styles/global.css';
export default function App({ Component, pageProps }) {
return <Component {...pageProps} />
return <Component {...pageProps} />;
}

22
basics/api-routes-starter/pages/index.js
View File

@@ -1,9 +1,9 @@
import Head from 'next/head'
import Layout, { siteTitle } from '../components/layout'
import utilStyles from '../styles/utils.module.css'
import { getSortedPostsData } from '../lib/posts'
import Link from 'next/link'
import Date from '../components/date'
import Head from 'next/head';
import Layout, { siteTitle } from '../components/layout';
import utilStyles from '../styles/utils.module.css';
import { getSortedPostsData } from '../lib/posts';
import Link from 'next/link';
import Date from '../components/date';
export default function Home({ allPostsData }) {
return (
@@ -33,14 +33,14 @@ export default function Home({ allPostsData }) {
</ul>
</section>
</Layout>
)
);
}
export async function getStaticProps() {
const allPostsData = getSortedPostsData()
const allPostsData = getSortedPostsData();
return {
props: {
allPostsData
}
}
allPostsData,
},
};
}

26
basics/api-routes-starter/pages/posts/[id].js
View File

@@ -1,8 +1,8 @@
import Layout from '../../components/layout'
import { getAllPostIds, getPostData } from '../../lib/posts'
import Head from 'next/head'
import Date from '../../components/date'
import utilStyles from '../../styles/utils.module.css'
import Layout from '../../components/layout';
import { getAllPostIds, getPostData } from '../../lib/posts';
import Head from 'next/head';
import Date from '../../components/date';
import utilStyles from '../../styles/utils.module.css';
export default function Post({ postData }) {
return (
@@ -18,22 +18,22 @@ export default function Post({ postData }) {
<div dangerouslySetInnerHTML={{ __html: postData.contentHtml }} />
</article>
</Layout>
)
);
}
export async function getStaticPaths() {
const paths = getAllPostIds()
const paths = getAllPostIds();
return {
paths,
fallback: false
}
fallback: false,
};
}
export async function getStaticProps({ params }) {
const postData = await getPostData(params.id)
const postData = await getPostData(params.id);
return {
props: {
postData
}
}
postData,
},
};
}

14
basics/api-routes-starter/styles/global.css
View File

@@ -2,8 +2,18 @@ html,
body {
padding: 0;
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
font-family:
-apple-system,
BlinkMacSystemFont,
Segoe UI,
Roboto,
Oxygen,
Ubuntu,
Cantarell,
Fira Sans,
Droid Sans,
Helvetica Neue,
sans-serif;
line-height: 1.6;
font-size: 18px;
}

8
basics/assets-metadata-css-starter/package.json
View File

@@ -1,16 +1,16 @@
{
"private": true,
"engines": {
"node": ">=18"
},
"scripts": {
"dev": "next dev",
"build": "next build",
"dev": "next dev",
"start": "next start"
},
"dependencies": {
"next": "latest",
"react": "18.2.0",
"react-dom": "18.2.0"
},
"engines": {
"node": ">=18"
}
}

30
basics/assets-metadata-css-starter/pages/index.js
View File

@@ -1,5 +1,5 @@
import Link from 'next/link';
import Head from 'next/head'
import Head from 'next/head';
import styles from '../styles/Home.module.css';
export default function Home() {
@@ -12,7 +12,7 @@ export default function Home() {
<main>
<h1 className={styles.title}>
Read <Link href='/posts/first-post'>this page!</Link>
Read <Link href="/posts/first-post">this page!</Link>
</h1>
<p className={styles.description}>
@@ -93,8 +93,15 @@ export default function Home() {
border-radius: 5px;
padding: 0.75rem;
font-size: 1.1rem;
font-family: Menlo, Monaco, Lucida Console, Liberation Mono,
DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace;
font-family:
Menlo,
Monaco,
Lucida Console,
Liberation Mono,
DejaVu Sans Mono,
Bitstream Vera Sans Mono,
Courier New,
monospace;
}
`}</style>
@@ -103,8 +110,17 @@ export default function Home() {
body {
padding: 0;
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue,
font-family:
-apple-system,
BlinkMacSystemFont,
Segoe UI,
Roboto,
Oxygen,
Ubuntu,
Cantarell,
Fira Sans,
Droid Sans,
Helvetica Neue,
sans-serif;
}
* {
@@ -112,5 +128,5 @@ export default function Home() {
}
`}</style>
</div>
)
);
}

4
basics/assets-metadata-css-starter/pages/posts/first-post.js
View File

@@ -1,4 +1,4 @@
import Link from 'next/link'
import Link from 'next/link';
export default function FirstPost() {
return (
@@ -8,5 +8,5 @@ export default function FirstPost() {
<Link href="/">Back to home</Link>
</h2>
</>
)
);
}

5
basics/assets-metadata-css-starter/styles/Home.module.css
View File

@@ -33,7 +33,6 @@
text-align: center;
}
.description {
line-height: 1.5;
font-size: 1.5rem;
@@ -58,7 +57,9 @@
text-decoration: none;
border: 1px solid #eaeaea;
border-radius: 10px;
transition: color 0.15s ease, border-color 0.15s ease;
transition:
color 0.15s ease,
border-color 0.15s ease;
}
.card:hover,

15
basics/assets-metadata-css-starter/styles/globals.css
View File

@@ -2,8 +2,19 @@ html,
body {
padding: 0;
margin: 0;
font-family: Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
font-family:
Inter,
-apple-system,
BlinkMacSystemFont,
Segoe UI,
Roboto,
Oxygen,
Ubuntu,
Cantarell,
Fira Sans,
Droid Sans,
Helvetica Neue,
sans-serif;
}
a {

6
basics/basics-final/components/date.js
View File

@@ -1,6 +1,6 @@
import { parseISO, format } from 'date-fns'
import { parseISO, format } from 'date-fns';
export default function Date({ dateString }) {
const date = parseISO(dateString)
return <time dateTime={dateString}>{format(date, 'LLLL d, yyyy')}</time>
const date = parseISO(dateString);
return <time dateTime={dateString}>{format(date, 'LLLL d, yyyy')}</time>;
}

20
basics/basics-final/components/layout.js
View File

@@ -1,13 +1,13 @@
import Head from 'next/head'
import Image from 'next/image'
import Script from 'next/script'
import Head from 'next/head';
import Image from 'next/image';
import Script from 'next/script';
import styles from './layout.module.css'
import utilStyles from '../styles/utils.module.css'
import Link from 'next/link'
import styles from './layout.module.css';
import utilStyles from '../styles/utils.module.css';
import Link from 'next/link';
const name = '[Your Name]'
export const siteTitle = 'Next.js Sample Website'
const name = '[Your Name]';
export const siteTitle = 'Next.js Sample Website';
export default function Layout({ children, home }) {
return (
@@ -21,7 +21,7 @@ export default function Layout({ children, home }) {
<meta
property="og:image"
content={`https://og-image.vercel.app/${encodeURI(
siteTitle
siteTitle,
)}.png?theme=light&md=0&fontSize=75px&images=https%3A%2F%2Fassets.zeit.co%2Fimage%2Fupload%2Ffront%2Fassets%2Fdesign%2Fnextjs-black-logo.svg`}
/>
<meta name="og:title" content={siteTitle} />
@@ -74,5 +74,5 @@ export default function Layout({ children, home }) {
</div>
)}
</div>
)
);
}

62
basics/basics-final/lib/posts.js
View File

@@ -1,69 +1,69 @@
import fs from 'fs'
import path from 'path'
import matter from 'gray-matter'
import { remark } from 'remark'
import html from 'remark-html'
import fs from 'fs';
import path from 'path';
import matter from 'gray-matter';
import { remark } from 'remark';
import html from 'remark-html';
const postsDirectory = path.join(process.cwd(), 'posts')
const postsDirectory = path.join(process.cwd(), 'posts');
export function getSortedPostsData() {
// Get file names under /posts
const fileNames = fs.readdirSync(postsDirectory)
const allPostsData = fileNames.map(fileName => {
const fileNames = fs.readdirSync(postsDirectory);
const allPostsData = fileNames.map((fileName) => {
// Remove ".md" from file name to get id
const id = fileName.replace(/\.md$/, '')
const id = fileName.replace(/\.md$/, '');
// Read markdown file as string
const fullPath = path.join(postsDirectory, fileName)
const fileContents = fs.readFileSync(fullPath, 'utf8')
const fullPath = path.join(postsDirectory, fileName);
const fileContents = fs.readFileSync(fullPath, 'utf8');
// Use gray-matter to parse the post metadata section
const matterResult = matter(fileContents)
const matterResult = matter(fileContents);
// Combine the data with the id
return {
id,
...matterResult.data
}
})
...matterResult.data,
};
});
// Sort posts by date
return allPostsData.sort((a, b) => {
if (a.date < b.date) {
return 1
return 1;
} else {
return -1
return -1;
}
})
});
}
export function getAllPostIds() {
const fileNames = fs.readdirSync(postsDirectory)
return fileNames.map(fileName => {
const fileNames = fs.readdirSync(postsDirectory);
return fileNames.map((fileName) => {
return {
params: {
id: fileName.replace(/\.md$/, '')
}
}
})
id: fileName.replace(/\.md$/, ''),
},
};
});
}
export async function getPostData(id) {
const fullPath = path.join(postsDirectory, `${id}.md`)
const fileContents = fs.readFileSync(fullPath, 'utf8')
const fullPath = path.join(postsDirectory, `${id}.md`);
const fileContents = fs.readFileSync(fullPath, 'utf8');
// Use gray-matter to parse the post metadata section
const matterResult = matter(fileContents)
const matterResult = matter(fileContents);
// Use remark to convert markdown into HTML string
const processedContent = await remark()
.use(html)
.process(matterResult.content)
const contentHtml = processedContent.toString()
.process(matterResult.content);
const contentHtml = processedContent.toString();
// Combine the data with the id and contentHtml
return {
id,
contentHtml,
...matterResult.data
}
...matterResult.data,
};
}

8
basics/basics-final/package.json
View File

@@ -1,11 +1,8 @@
{
"private": true,
"engines": {
"node": ">=18"
},
"scripts": {
"dev": "next dev",
"build": "next build",
"dev": "next dev",
"start": "next start"
},
"dependencies": {
@@ -16,5 +13,8 @@
"react-dom": "18.2.0",
"remark": "^14.0.2",
"remark-html": "^15.0.1"
},
"engines": {
"node": ">=18"
}
}

4
basics/basics-final/pages/_app.js
View File

@@ -1,5 +1,5 @@
import '../styles/global.css'
import '../styles/global.css';
export default function App({ Component, pageProps }) {
return <Component {...pageProps} />
return <Component {...pageProps} />;
}

4
basics/basics-final/pages/api/hello.js
View File

@@ -1,3 +1,3 @@
export default (req, res) => {
res.status(200).json({ text: 'Hello' })
}
res.status(200).json({ text: 'Hello' });
};

22
basics/basics-final/pages/index.js
View File

@@ -1,9 +1,9 @@
import Head from 'next/head'
import Layout, { siteTitle } from '../components/layout'
import utilStyles from '../styles/utils.module.css'
import { getSortedPostsData } from '../lib/posts'
import Link from 'next/link'
import Date from '../components/date'
import Head from 'next/head';
import Layout, { siteTitle } from '../components/layout';
import utilStyles from '../styles/utils.module.css';
import { getSortedPostsData } from '../lib/posts';
import Link from 'next/link';
import Date from '../components/date';
export default function Home({ allPostsData }) {
return (
@@ -33,14 +33,14 @@ export default function Home({ allPostsData }) {
</ul>
</section>
</Layout>
)
);
}
export async function getStaticProps() {
const allPostsData = getSortedPostsData()
const allPostsData = getSortedPostsData();
return {
props: {
allPostsData
}
}
allPostsData,
},
};
}

26
basics/basics-final/pages/posts/[id].js
View File

@@ -1,8 +1,8 @@
import Layout from '../../components/layout'
import { getAllPostIds, getPostData } from '../../lib/posts'
import Head from 'next/head'
import Date from '../../components/date'
import utilStyles from '../../styles/utils.module.css'
import Layout from '../../components/layout';
import { getAllPostIds, getPostData } from '../../lib/posts';
import Head from 'next/head';
import Date from '../../components/date';
import utilStyles from '../../styles/utils.module.css';
export default function Post({ postData }) {
return (
@@ -18,22 +18,22 @@ export default function Post({ postData }) {
<div dangerouslySetInnerHTML={{ __html: postData.contentHtml }} />
</article>
</Layout>
)
);
}
export async function getStaticPaths() {
const paths = getAllPostIds()
const paths = getAllPostIds();
return {
paths,
fallback: false
}
fallback: false,
};
}
export async function getStaticProps({ params }) {
const postData = await getPostData(params.id)
const postData = await getPostData(params.id);
return {
props: {
postData
}
}
postData,
},
};
}

14
basics/basics-final/styles/global.css
View File

@@ -2,8 +2,18 @@ html,
body {
padding: 0;
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
font-family:
-apple-system,
BlinkMacSystemFont,
Segoe UI,
Roboto,
Oxygen,
Ubuntu,
Cantarell,
Fira Sans,
Droid Sans,
Helvetica Neue,
sans-serif;
line-height: 1.6;
font-size: 18px;
}

18
basics/data-fetching-starter/components/layout.js
View File

@@ -1,11 +1,11 @@
import Head from 'next/head'
import Image from 'next/image'
import styles from './layout.module.css'
import utilStyles from '../styles/utils.module.css'
import Link from 'next/link'
import Head from 'next/head';
import Image from 'next/image';
import styles from './layout.module.css';
import utilStyles from '../styles/utils.module.css';
import Link from 'next/link';
const name = '[Your Name]'
export const siteTitle = 'Next.js Sample Website'
const name = '[Your Name]';
export const siteTitle = 'Next.js Sample Website';
export default function Layout({ children, home }) {
return (
@@ -19,7 +19,7 @@ export default function Layout({ children, home }) {
<meta
property="og:image"
content={`https://og-image.vercel.app/${encodeURI(
siteTitle
siteTitle,
)}.png?theme=light&md=0&fontSize=75px&images=https%3A%2F%2Fassets.zeit.co%2Fimage%2Fupload%2Ffront%2Fassets%2Fdesign%2Fnextjs-black-logo.svg`}
/>
<meta name="og:title" content={siteTitle} />
@@ -65,5 +65,5 @@ export default function Layout({ children, home }) {
</div>
)}
</div>
)
);
}

8
basics/data-fetching-starter/package.json
View File

@@ -1,16 +1,16 @@
{
"private": true,
"engines": {
"node": ">=18"
},
"scripts": {
"dev": "next dev",
"build": "next build",
"dev": "next dev",
"start": "next start"
},
"dependencies": {
"next": "latest",
"react": "18.2.0",
"react-dom": "18.2.0"
},
"engines": {
"node": ">=18"
}
}

4
basics/data-fetching-starter/pages/_app.js
View File

@@ -1,5 +1,5 @@
import '../styles/global.css'
import '../styles/global.css';
export default function App({ Component, pageProps }) {
return <Component {...pageProps} />
return <Component {...pageProps} />;
}

8
basics/data-fetching-starter/pages/index.js
View File

@@ -1,6 +1,6 @@
import Head from 'next/head'
import Layout, { siteTitle } from '../components/layout'
import utilStyles from '../styles/utils.module.css'
import Head from 'next/head';
import Layout, { siteTitle } from '../components/layout';
import utilStyles from '../styles/utils.module.css';
export default function Home() {
return (
@@ -16,5 +16,5 @@ export default function Home() {
</p>
</section>
</Layout>
)
);
}

8
basics/data-fetching-starter/pages/posts/first-post.js
View File

@@ -1,6 +1,6 @@
import Head from 'next/head'
import Link from 'next/link'
import Layout from '../../components/layout'
import Head from 'next/head';
import Link from 'next/link';
import Layout from '../../components/layout';
export default function FirstPost() {
return (
@@ -13,5 +13,5 @@ export default function FirstPost() {
<Link href="/">Back to home</Link>
</h2>
</Layout>
)
);
}

14
basics/data-fetching-starter/styles/global.css
View File

@@ -2,8 +2,18 @@ html,
body {
padding: 0;
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
font-family:
-apple-system,
BlinkMacSystemFont,
Segoe UI,
Roboto,
Oxygen,
Ubuntu,
Cantarell,
Fira Sans,
Droid Sans,
Helvetica Neue,
sans-serif;
line-height: 1.6;
font-size: 18px;
}

6
basics/demo/components/date.js
View File

@@ -1,6 +1,6 @@
import { parseISO, format } from 'date-fns'
import { parseISO, format } from 'date-fns';
export default function Date({ dateString }) {
const date = parseISO(dateString)
return <time dateTime={dateString}>{format(date, 'LLLL d, yyyy')}</time>
const date = parseISO(dateString);
return <time dateTime={dateString}>{format(date, 'LLLL d, yyyy')}</time>;
}

18
basics/demo/components/layout.js
View File

@@ -1,11 +1,11 @@
import Head from 'next/head'
import Image from 'next/image'
import styles from './layout.module.css'
import utilStyles from '../styles/utils.module.css'
import Link from 'next/link'
import Head from 'next/head';
import Image from 'next/image';
import styles from './layout.module.css';
import utilStyles from '../styles/utils.module.css';
import Link from 'next/link';
const name = 'Shu Uesugi'
export const siteTitle = 'Next.js Sample Website'
const name = 'Shu Uesugi';
export const siteTitle = 'Next.js Sample Website';
export default function Layout({ children, home }) {
return (
@@ -19,7 +19,7 @@ export default function Layout({ children, home }) {
<meta
property="og:image"
content={`https://og-image.vercel.app/${encodeURI(
siteTitle
siteTitle,
)}.png?theme=light&md=0&fontSize=75px&images=https%3A%2F%2Fassets.zeit.co%2Fimage%2Fupload%2Ffront%2Fassets%2Fdesign%2Fnextjs-black-logo.svg`}
/>
<meta name="og:title" content={siteTitle} />
@@ -65,5 +65,5 @@ export default function Layout({ children, home }) {
</div>
)}
</div>
)
);
}

62
basics/demo/lib/posts.js
View File

@@ -1,69 +1,69 @@
import fs from 'fs'
import path from 'path'
import matter from 'gray-matter'
import { remark } from 'remark'
import html from 'remark-html'
import fs from 'fs';
import path from 'path';
import matter from 'gray-matter';
import { remark } from 'remark';
import html from 'remark-html';
const postsDirectory = path.join(process.cwd(), 'posts')
const postsDirectory = path.join(process.cwd(), 'posts');
export function getSortedPostsData() {
// Get file names under /posts
const fileNames = fs.readdirSync(postsDirectory)
const allPostsData = fileNames.map(fileName => {
const fileNames = fs.readdirSync(postsDirectory);
const allPostsData = fileNames.map((fileName) => {
// Remove ".md" from file name to get id
const id = fileName.replace(/\.md$/, '')
const id = fileName.replace(/\.md$/, '');
// Read markdown file as string
const fullPath = path.join(postsDirectory, fileName)
const fileContents = fs.readFileSync(fullPath, 'utf8')
const fullPath = path.join(postsDirectory, fileName);
const fileContents = fs.readFileSync(fullPath, 'utf8');
// Use gray-matter to parse the post metadata section
const matterResult = matter(fileContents)
const matterResult = matter(fileContents);
// Combine the data with the id
return {
id,
...matterResult.data
}
})
...matterResult.data,
};
});
// Sort posts by date
return allPostsData.sort((a, b) => {
if (a.date < b.date) {
return 1
return 1;
} else {
return -1
return -1;
}
})
});
}
export function getAllPostIds() {
const fileNames = fs.readdirSync(postsDirectory)
return fileNames.map(fileName => {
const fileNames = fs.readdirSync(postsDirectory);
return fileNames.map((fileName) => {
return {
params: {
id: fileName.replace(/\.md$/, '')
}
}
})
id: fileName.replace(/\.md$/, ''),
},
};
});
}
export async function getPostData(id) {
const fullPath = path.join(postsDirectory, `${id}.md`)
const fileContents = fs.readFileSync(fullPath, 'utf8')
const fullPath = path.join(postsDirectory, `${id}.md`);
const fileContents = fs.readFileSync(fullPath, 'utf8');
// Use gray-matter to parse the post metadata section
const matterResult = matter(fileContents)
const matterResult = matter(fileContents);
// Use remark to convert markdown into HTML string
const processedContent = await remark()
.use(html)
.process(matterResult.content)
const contentHtml = processedContent.toString()
.process(matterResult.content);
const contentHtml = processedContent.toString();
// Combine the data with the id and contentHtml
return {
id,
contentHtml,
...matterResult.data
}
...matterResult.data,
};
}

8
basics/demo/package.json
View File

@@ -1,11 +1,8 @@
{
"private": true,
"engines": {
"node": ">=18"
},
"scripts": {
"dev": "next dev",
"build": "next build",
"dev": "next dev",
"start": "next start"
},
"dependencies": {
@@ -16,5 +13,8 @@
"react-dom": "18.2.0",
"remark": "^14.0.2",
"remark-html": "^15.0.1"
},
"engines": {
"node": ">=18"
}
}

4
basics/demo/pages/_app.js
View File

@@ -1,5 +1,5 @@
import '../styles/global.css'
import '../styles/global.css';
export default function App({ Component, pageProps }) {
return <Component {...pageProps} />
return <Component {...pageProps} />;
}

4
basics/demo/pages/api/hello.js
View File

@@ -1,3 +1,3 @@
export default (req, res) => {
res.status(200).json({ text: 'Hello' })
}
res.status(200).json({ text: 'Hello' });
};

22
basics/demo/pages/index.js
View File

@@ -1,9 +1,9 @@
import Head from 'next/head'
import Layout, { siteTitle } from '../components/layout'
import utilStyles from '../styles/utils.module.css'
import { getSortedPostsData } from '../lib/posts'
import Link from 'next/link'
import Date from '../components/date'
import Head from 'next/head';
import Layout, { siteTitle } from '../components/layout';
import utilStyles from '../styles/utils.module.css';
import { getSortedPostsData } from '../lib/posts';
import Link from 'next/link';
import Date from '../components/date';
export default function Home({ allPostsData }) {
return (
@@ -37,14 +37,14 @@ export default function Home({ allPostsData }) {
</ul>
</section>
</Layout>
)
);
}
export async function getStaticProps() {
const allPostsData = getSortedPostsData()
const allPostsData = getSortedPostsData();
return {
props: {
allPostsData
}
}
allPostsData,
},
};
}

26
basics/demo/pages/posts/[id].js
View File

@@ -1,8 +1,8 @@
import Layout from '../../components/layout'
import { getAllPostIds, getPostData } from '../../lib/posts'
import Head from 'next/head'
import Date from '../../components/date'
import utilStyles from '../../styles/utils.module.css'
import Layout from '../../components/layout';
import { getAllPostIds, getPostData } from '../../lib/posts';
import Head from 'next/head';
import Date from '../../components/date';
import utilStyles from '../../styles/utils.module.css';
export default function Post({ postData }) {
return (
@@ -18,22 +18,22 @@ export default function Post({ postData }) {
<div dangerouslySetInnerHTML={{ __html: postData.contentHtml }} />
</article>
</Layout>
)
);
}
export async function getStaticPaths() {
const paths = getAllPostIds()
const paths = getAllPostIds();
return {
paths,
fallback: false
}
fallback: false,
};
}
export async function getStaticProps({ params }) {
const postData = await getPostData(params.id)
const postData = await getPostData(params.id);
return {
props: {
postData
}
}
postData,
},
};
}

14
basics/demo/styles/global.css
View File

@@ -2,8 +2,18 @@ html,
body {
padding: 0;
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
font-family:
-apple-system,
BlinkMacSystemFont,
Segoe UI,
Roboto,
Oxygen,
Ubuntu,
Cantarell,
Fira Sans,
Droid Sans,
Helvetica Neue,
sans-serif;
line-height: 1.6;
font-size: 18px;
}

18
basics/dynamic-routes-starter/components/layout.js
View File

@@ -1,11 +1,11 @@
import Head from 'next/head'
import Image from 'next/image'
import styles from './layout.module.css'
import utilStyles from '../styles/utils.module.css'
import Link from 'next/link'
import Head from 'next/head';
import Image from 'next/image';
import styles from './layout.module.css';
import utilStyles from '../styles/utils.module.css';
import Link from 'next/link';
const name = '[Your Name]'
export const siteTitle = 'Next.js Sample Website'
const name = '[Your Name]';
export const siteTitle = 'Next.js Sample Website';
export default function Layout({ children, home }) {
return (
@@ -19,7 +19,7 @@ export default function Layout({ children, home }) {
<meta
property="og:image"
content={`https://og-image.vercel.app/${encodeURI(
siteTitle
siteTitle,
)}.png?theme=light&md=0&fontSize=75px&images=https%3A%2F%2Fassets.zeit.co%2Fimage%2Fupload%2Ffront%2Fassets%2Fdesign%2Fnextjs-black-logo.svg`}
/>
<meta name="og:title" content={siteTitle} />
@@ -65,5 +65,5 @@ export default function Layout({ children, home }) {
</div>
)}
</div>
)
);
}

32
basics/dynamic-routes-starter/lib/posts.js
View File

@@ -1,35 +1,35 @@
import fs from 'fs'
import path from 'path'
import matter from 'gray-matter'
import fs from 'fs';
import path from 'path';
import matter from 'gray-matter';
const postsDirectory = path.join(process.cwd(), 'posts')
const postsDirectory = path.join(process.cwd(), 'posts');
export function getSortedPostsData() {
// Get file names under /posts
const fileNames = fs.readdirSync(postsDirectory)
const allPostsData = fileNames.map(fileName => {
const fileNames = fs.readdirSync(postsDirectory);
const allPostsData = fileNames.map((fileName) => {
// Remove ".md" from file name to get id
const id = fileName.replace(/\.md$/, '')
const id = fileName.replace(/\.md$/, '');
// Read markdown file as string
const fullPath = path.join(postsDirectory, fileName)
const fileContents = fs.readFileSync(fullPath, 'utf8')
const fullPath = path.join(postsDirectory, fileName);
const fileContents = fs.readFileSync(fullPath, 'utf8');
// Use gray-matter to parse the post metadata section
const matterResult = matter(fileContents)
const matterResult = matter(fileContents);
// Combine the data with the id
return {
id,
...matterResult.data
}
})
...matterResult.data,
};
});
// Sort posts by date
return allPostsData.sort((a, b) => {
if (a.date < b.date) {
return 1
return 1;
} else {
return -1
return -1;
}
})
});
}

8
basics/dynamic-routes-starter/package.json
View File

@@ -1,11 +1,8 @@
{
"private": true,
"engines": {
"node": ">=18"
},
"scripts": {
"dev": "next dev",
"build": "next build",
"dev": "next dev",
"start": "next start"
},
"dependencies": {
@@ -13,5 +10,8 @@
"next": "latest",
"react": "18.2.0",
"react-dom": "18.2.0"
},
"engines": {
"node": ">=18"
}
}

4
basics/dynamic-routes-starter/pages/_app.js
View File

@@ -1,5 +1,5 @@
import '../styles/global.css'
import '../styles/global.css';
export default function App({ Component, pageProps }) {
return <Component {...pageProps} />
return <Component {...pageProps} />;
}

18
basics/dynamic-routes-starter/pages/index.js
View File

@@ -1,7 +1,7 @@
import Head from 'next/head'
import Layout, { siteTitle } from '../components/layout'
import utilStyles from '../styles/utils.module.css'
import { getSortedPostsData } from '../lib/posts'
import Head from 'next/head';
import Layout, { siteTitle } from '../components/layout';
import utilStyles from '../styles/utils.module.css';
import { getSortedPostsData } from '../lib/posts';
export default function Home({ allPostsData }) {
return (
@@ -27,14 +27,14 @@ export default function Home({ allPostsData }) {
</ul>
</section>
</Layout>
)
);
}
export async function getStaticProps() {
const allPostsData = getSortedPostsData()
const allPostsData = getSortedPostsData();
return {
props: {
allPostsData
}
}
allPostsData,
},
};
}

8
basics/dynamic-routes-starter/pages/posts/first-post.js
View File

@@ -1,6 +1,6 @@
import Head from 'next/head'
import Link from 'next/link'
import Layout from '../../components/layout'
import Head from 'next/head';
import Link from 'next/link';
import Layout from '../../components/layout';
export default function FirstPost() {
return (
@@ -13,5 +13,5 @@ export default function FirstPost() {
<Link href="/">Back to home</Link>
</h2>
</Layout>
)
);
}

14
basics/dynamic-routes-starter/styles/global.css
View File

@@ -2,8 +2,18 @@ html,
body {
padding: 0;
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
font-family:
-apple-system,
BlinkMacSystemFont,
Segoe UI,
Roboto,
Oxygen,
Ubuntu,
Cantarell,
Fira Sans,
Droid Sans,
Helvetica Neue,
sans-serif;
line-height: 1.6;
font-size: 18px;
}

18
basics/dynamic-routes-step-1/components/layout.js
View File

@@ -1,11 +1,11 @@
import Head from 'next/head'
import Image from 'next/image'
import styles from './layout.module.css'
import utilStyles from '../styles/utils.module.css'
import Link from 'next/link'
import Head from 'next/head';
import Image from 'next/image';
import styles from './layout.module.css';
import utilStyles from '../styles/utils.module.css';
import Link from 'next/link';
const name = '[Your Name]'
export const siteTitle = 'Next.js Sample Website'
const name = '[Your Name]';
export const siteTitle = 'Next.js Sample Website';
export default function Layout({ children, home }) {
return (
@@ -19,7 +19,7 @@ export default function Layout({ children, home }) {
<meta
property="og:image"
content={`https://og-image.vercel.app/${encodeURI(
siteTitle
siteTitle,
)}.png?theme=light&md=0&fontSize=75px&images=https%3A%2F%2Fassets.zeit.co%2Fimage%2Fupload%2Ffront%2Fassets%2Fdesign%2Fnextjs-black-logo.svg`}
/>
<meta name="og:title" content={siteTitle} />
@@ -65,5 +65,5 @@ export default function Layout({ children, home }) {
</div>
)}
</div>
)
);
}

54
basics/dynamic-routes-step-1/lib/posts.js
View File

@@ -1,60 +1,60 @@
import fs from 'fs'
import path from 'path'
import matter from 'gray-matter'
import fs from 'fs';
import path from 'path';
import matter from 'gray-matter';
const postsDirectory = path.join(process.cwd(), 'posts')
const postsDirectory = path.join(process.cwd(), 'posts');
export function getSortedPostsData() {
// Get file names under /posts
const fileNames = fs.readdirSync(postsDirectory)
const allPostsData = fileNames.map(fileName => {
const fileNames = fs.readdirSync(postsDirectory);
const allPostsData = fileNames.map((fileName) => {
// Remove ".md" from file name to get id
const id = fileName.replace(/\.md$/, '')
const id = fileName.replace(/\.md$/, '');
// Read markdown file as string
const fullPath = path.join(postsDirectory, fileName)
const fileContents = fs.readFileSync(fullPath, 'utf8')
const fullPath = path.join(postsDirectory, fileName);
const fileContents = fs.readFileSync(fullPath, 'utf8');
// Use gray-matter to parse the post metadata section
const matterResult = matter(fileContents)
const matterResult = matter(fileContents);
// Combine the data with the id
return {
id,
...matterResult.data
}
})
...matterResult.data,
};
});
// Sort posts by date
return allPostsData.sort((a, b) => {
if (a.date < b.date) {
return 1
return 1;
} else {
return -1
return -1;
}
})
});
}
export function getAllPostIds() {
const fileNames = fs.readdirSync(postsDirectory)
return fileNames.map(fileName => {
const fileNames = fs.readdirSync(postsDirectory);
return fileNames.map((fileName) => {
return {
params: {
id: fileName.replace(/\.md$/, '')
}
}
})
id: fileName.replace(/\.md$/, ''),
},
};
});
}
export function getPostData(id) {
const fullPath = path.join(postsDirectory, `${id}.md`)
const fileContents = fs.readFileSync(fullPath, 'utf8')
const fullPath = path.join(postsDirectory, `${id}.md`);
const fileContents = fs.readFileSync(fullPath, 'utf8');
// Use gray-matter to parse the post metadata section
const matterResult = matter(fileContents)
const matterResult = matter(fileContents);
// Combine the data with the id
return {
id,
...matterResult.data
}
...matterResult.data,
};
}

8
basics/dynamic-routes-step-1/package.json
View File

@@ -1,11 +1,8 @@
{
"private": true,
"engines": {
"node": ">=18"
},
"scripts": {
"dev": "next dev",
"build": "next build",
"dev": "next dev",
"start": "next start"
},
"dependencies": {
@@ -13,5 +10,8 @@
"next": "latest",
"react": "18.2.0",
"react-dom": "18.2.0"
},
"engines": {
"node": ">=18"
}
}

4
basics/dynamic-routes-step-1/pages/_app.js
View File

@@ -1,5 +1,5 @@
import '../styles/global.css'
import '../styles/global.css';
export default function App({ Component, pageProps }) {
return <Component {...pageProps} />
return <Component {...pageProps} />;
}

18
basics/dynamic-routes-step-1/pages/index.js
View File

@@ -1,7 +1,7 @@
import Head from 'next/head'
import Layout, { siteTitle } from '../components/layout'
import utilStyles from '../styles/utils.module.css'
import { getSortedPostsData } from '../lib/posts'
import Head from 'next/head';
import Layout, { siteTitle } from '../components/layout';
import utilStyles from '../styles/utils.module.css';
import { getSortedPostsData } from '../lib/posts';
export default function Home({ allPostsData }) {
return (
@@ -27,14 +27,14 @@ export default function Home({ allPostsData }) {
</ul>
</section>
</Layout>
)
);
}
export async function getStaticProps() {
const allPostsData = getSortedPostsData()
const allPostsData = getSortedPostsData();
return {
props: {
allPostsData
}
}
allPostsData,
},
};
}

20
basics/dynamic-routes-step-1/pages/posts/[id].js
View File

@@ -1,5 +1,5 @@
import Layout from '../../components/layout'
import { getAllPostIds, getPostData } from '../../lib/posts'
import Layout from '../../components/layout';
import { getAllPostIds, getPostData } from '../../lib/posts';
export default function Post({ postData }) {
return (
@@ -10,22 +10,22 @@ export default function Post({ postData }) {
<br />
{postData.date}
</Layout>
)
);
}
export async function getStaticPaths() {
const paths = getAllPostIds()
const paths = getAllPostIds();
return {
paths,
fallback: false
}
fallback: false,
};
}
export async function getStaticProps({ params }) {
const postData = getPostData(params.id)
const postData = getPostData(params.id);
return {
props: {
postData
}
}
postData,
},
};
}

14
basics/dynamic-routes-step-1/styles/global.css
View File

@@ -2,8 +2,18 @@ html,
body {
padding: 0;
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
font-family:
-apple-system,
BlinkMacSystemFont,
Segoe UI,
Roboto,
Oxygen,
Ubuntu,
Cantarell,
Fira Sans,
Droid Sans,
Helvetica Neue,
sans-serif;
line-height: 1.6;
font-size: 18px;
}

8
basics/learn-starter/package.json
View File

@@ -1,16 +1,16 @@
{
"private": true,
"engines": {
"node": ">=18"
},
"scripts": {
"dev": "next dev",
"build": "next build",
"dev": "next dev",
"start": "next start"
},
"dependencies": {
"next": "latest",
"react": "18.2.0",
"react-dom": "18.2.0"
},
"engines": {
"node": ">=18"
}
}

26
basics/learn-starter/pages/index.js
View File

@@ -92,8 +92,15 @@ export default function Home() {
border-radius: 5px;
padding: 0.75rem;
font-size: 1.1rem;
font-family: Menlo, Monaco, Lucida Console, Liberation Mono,
DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace;
font-family:
Menlo,
Monaco,
Lucida Console,
Liberation Mono,
DejaVu Sans Mono,
Bitstream Vera Sans Mono,
Courier New,
monospace;
}
`}</style>
@@ -102,8 +109,17 @@ export default function Home() {
body {
padding: 0;
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue,
font-family:
-apple-system,
BlinkMacSystemFont,
Segoe UI,
Roboto,
Oxygen,
Ubuntu,
Cantarell,
Fira Sans,
Droid Sans,
Helvetica Neue,
sans-serif;
}
* {
@@ -111,5 +127,5 @@ export default function Home() {
}
`}</style>
</div>
)
);
}

5
basics/learn-starter/styles/Home.module.css
View File

@@ -33,7 +33,6 @@
text-align: center;
}
.description {
line-height: 1.5;
font-size: 1.5rem;
@@ -58,7 +57,9 @@
text-decoration: none;
border: 1px solid #eaeaea;
border-radius: 10px;
transition: color 0.15s ease, border-color 0.15s ease;
transition:
color 0.15s ease,
border-color 0.15s ease;
}
.card:hover,

15
basics/learn-starter/styles/globals.css
View File

@@ -2,8 +2,19 @@ html,
body {
padding: 0;
margin: 0;
font-family: Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
font-family:
Inter,
-apple-system,
BlinkMacSystemFont,
Segoe UI,
Roboto,
Oxygen,
Ubuntu,
Cantarell,
Fira Sans,
Droid Sans,
Helvetica Neue,
sans-serif;
}
a {

8
basics/navigate-between-pages-starter/package.json
View File

@@ -1,16 +1,16 @@
{
"private": true,
"engines": {
"node": ">=18"
},
"scripts": {
"dev": "next dev",
"build": "next build",
"dev": "next dev",
"start": "next start"
},
"dependencies": {
"next": "latest",
"react": "18.2.0",
"react-dom": "18.2.0"
},
"engines": {
"node": ">=18"
}
}

28
basics/navigate-between-pages-starter/pages/index.js
View File

@@ -1,4 +1,4 @@
import Head from 'next/head'
import Head from 'next/head';
import styles from '../styles/Home.module.css';
export default function Home() {
@@ -92,8 +92,15 @@ export default function Home() {
border-radius: 5px;
padding: 0.75rem;
font-size: 1.1rem;
font-family: Menlo, Monaco, Lucida Console, Liberation Mono,
DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace;
font-family:
Menlo,
Monaco,
Lucida Console,
Liberation Mono,
DejaVu Sans Mono,
Bitstream Vera Sans Mono,
Courier New,
monospace;
}
`}</style>
@@ -102,8 +109,17 @@ export default function Home() {
body {
padding: 0;
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue,
font-family:
-apple-system,
BlinkMacSystemFont,
Segoe UI,
Roboto,
Oxygen,
Ubuntu,
Cantarell,
Fira Sans,
Droid Sans,
Helvetica Neue,
sans-serif;
}
* {
@@ -111,5 +127,5 @@ export default function Home() {
}
`}</style>
</div>
)
);
}

5
basics/navigate-between-pages-starter/styles/Home.module.css
View File

@@ -33,7 +33,6 @@
text-align: center;
}
.description {
line-height: 1.5;
font-size: 1.5rem;
@@ -58,7 +57,9 @@
text-decoration: none;
border: 1px solid #eaeaea;
border-radius: 10px;
transition: color 0.15s ease, border-color 0.15s ease;
transition:
color 0.15s ease,
border-color 0.15s ease;
}
.card:hover,

15
basics/navigate-between-pages-starter/styles/globals.css
View File

@@ -2,8 +2,19 @@ html,
body {
padding: 0;
margin: 0;
font-family: Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
font-family:
Inter,
-apple-system,
BlinkMacSystemFont,
Segoe UI,
Roboto,
Oxygen,
Ubuntu,
Cantarell,
Fira Sans,
Droid Sans,
Helvetica Neue,
sans-serif;
}
a {

17
basics/package.json
View File

@@ -1,17 +0,0 @@
{
"private": true,
"engines": {
"node": ">=18"
},
"license": "MIT",
"husky": {
"hooks": {
"pre-commit": "pretty-quick --staged"
}
},
"devDependencies": {
"prettier": "^2.0.2",
"pretty-quick": "2.0.1",
"husky": "4.2.3"
}
}

4
basics/snippets/link-classname-example.js
View File

@@ -1,12 +1,12 @@
// Example: Adding className with <Link>
import Link from 'next/link'
import Link from 'next/link';
export default function LinkClassnameExample() {
return (
<Link href="/" className="foo" target="_blank" rel="noopener noreferrer">
Hello World
</Link>
)
);
}
// Take a look at https://nextjs.org/docs/api-reference/next/link

6
basics/typescript-final/components/date.tsx
View File

@@ -1,6 +1,6 @@
import { parseISO, format } from 'date-fns'
import { parseISO, format } from 'date-fns';
export default function Date({ dateString }: { dateString: string }) {
const date = parseISO(dateString)
return <time dateTime={dateString}>{format(date, 'LLLL d, yyyy')}</time>
const date = parseISO(dateString);
return <time dateTime={dateString}>{format(date, 'LLLL d, yyyy')}</time>;
}

24
basics/typescript-final/components/layout.tsx
View File

@@ -1,18 +1,18 @@
import Head from 'next/head'
import Image from 'next/image'
import styles from './layout.module.css'
import utilStyles from '../styles/utils.module.css'
import Link from 'next/link'
import Head from 'next/head';
import Image from 'next/image';
import styles from './layout.module.css';
import utilStyles from '../styles/utils.module.css';
import Link from 'next/link';
const name = '[Your Name]'
export const siteTitle = 'Next.js Sample Website'
const name = '[Your Name]';
export const siteTitle = 'Next.js Sample Website';
export default function Layout({
children,
home
home,
}: {
children: React.ReactNode
home?: boolean
children: React.ReactNode;
home?: boolean;
}) {
return (
<div className={styles.container}>
@@ -25,7 +25,7 @@ export default function Layout({
<meta
property="og:image"
content={`https://og-image.vercel.app/${encodeURI(
siteTitle
siteTitle,
)}.png?theme=light&md=0&fontSize=75px&images=https%3A%2F%2Fassets.zeit.co%2Fimage%2Fupload%2Ffront%2Fassets%2Fdesign%2Fnextjs-black-logo.svg`}
/>
<meta name="og:title" content={siteTitle} />
@@ -71,5 +71,5 @@ export default function Layout({
</div>
)}
</div>
)
);
}

4
basics/typescript-final/global.d.ts vendored
View File

@@ -1,4 +1,4 @@
declare module 'remark-html' {
const html: any
export default html
const html: any;
export default html;
}

62
basics/typescript-final/lib/posts.ts
View File

@@ -1,69 +1,69 @@
import fs from 'fs'
import path from 'path'
import matter from 'gray-matter'
import { remark } from 'remark'
import html from 'remark-html'
import fs from 'fs';
import path from 'path';
import matter from 'gray-matter';
import { remark } from 'remark';
import html from 'remark-html';
const postsDirectory = path.join(process.cwd(), 'posts')
const postsDirectory = path.join(process.cwd(), 'posts');
export function getSortedPostsData() {
// Get file names under /posts
const fileNames = fs.readdirSync(postsDirectory)
const allPostsData = fileNames.map(fileName => {
const fileNames = fs.readdirSync(postsDirectory);
const allPostsData = fileNames.map((fileName) => {
// Remove ".md" from file name to get id
const id = fileName.replace(/\.md$/, '')
const id = fileName.replace(/\.md$/, '');
// Read markdown file as string
const fullPath = path.join(postsDirectory, fileName)
const fileContents = fs.readFileSync(fullPath, 'utf8')
const fullPath = path.join(postsDirectory, fileName);
const fileContents = fs.readFileSync(fullPath, 'utf8');
// Use gray-matter to parse the post metadata section
const matterResult = matter(fileContents)
const matterResult = matter(fileContents);
// Combine the data with the id
return {
id,
...(matterResult.data as { date: string; title: string })
}
})
...(matterResult.data as { date: string; title: string }),
};
});
// Sort posts by date
return allPostsData.sort((a, b) => {
if (a.date < b.date) {
return 1
return 1;
} else {
return -1
return -1;
}
})
});
}
export function getAllPostIds() {
const fileNames = fs.readdirSync(postsDirectory)
return fileNames.map(fileName => {
const fileNames = fs.readdirSync(postsDirectory);
return fileNames.map((fileName) => {
return {
params: {
id: fileName.replace(/\.md$/, '')
}
}
})
id: fileName.replace(/\.md$/, ''),
},
};
});
}
export async function getPostData(id: string) {
const fullPath = path.join(postsDirectory, `${id}.md`)
const fileContents = fs.readFileSync(fullPath, 'utf8')
const fullPath = path.join(postsDirectory, `${id}.md`);
const fileContents = fs.readFileSync(fullPath, 'utf8');
// Use gray-matter to parse the post metadata section
const matterResult = matter(fileContents)
const matterResult = matter(fileContents);
// Use remark to convert markdown into HTML string
const processedContent = await remark()
.use(html)
.process(matterResult.content)
const contentHtml = processedContent.toString()
.process(matterResult.content);
const contentHtml = processedContent.toString();
// Combine the data with the id and contentHtml
return {
id,
contentHtml,
...(matterResult.data as { date: string; title: string })
}
...(matterResult.data as { date: string; title: string }),
};
}

8
basics/typescript-final/package.json
View File

@@ -1,11 +1,8 @@
{
"private": true,
"engines": {
"node": ">=18"
},
"scripts": {
"dev": "next dev",
"build": "next build",
"dev": "next dev",
"start": "next start"
},
"dependencies": {
@@ -21,5 +18,8 @@
"@types/node": "^18.11.9",
"@types/react": "^18.0.25",
"typescript": "^4.8.4"
},
"engines": {
"node": ">=18"
}
}

6
basics/typescript-final/pages/_app.tsx
View File

@@ -1,6 +1,6 @@
import '../styles/global.css'
import { AppProps } from 'next/app'
import '../styles/global.css';
import { AppProps } from 'next/app';
export default function App({ Component, pageProps }: AppProps) {
return <Component {...pageProps} />
return <Component {...pageProps} />;
}

6
basics/typescript-final/pages/api/hello.ts
View File

@@ -1,5 +1,5 @@
import { NextApiRequest, NextApiResponse } from 'next'
import { NextApiRequest, NextApiResponse } from 'next';
export default (_: NextApiRequest, res: NextApiResponse) => {
res.status(200).json({ text: 'Hello' })
}
res.status(200).json({ text: 'Hello' });
};

36
basics/typescript-final/pages/index.tsx
View File

@@ -1,19 +1,19 @@
import Head from 'next/head'
import Layout, { siteTitle } from '../components/layout'
import utilStyles from '../styles/utils.module.css'
import { getSortedPostsData } from '../lib/posts'
import Link from 'next/link'
import Date from '../components/date'
import { GetStaticProps } from 'next'
import Head from 'next/head';
import Layout, { siteTitle } from '../components/layout';
import utilStyles from '../styles/utils.module.css';
import { getSortedPostsData } from '../lib/posts';
import Link from 'next/link';
import Date from '../components/date';
import { GetStaticProps } from 'next';
export default function Home({
allPostsData
allPostsData,
}: {
allPostsData: {
date: string
title: string
id: string
}[]
date: string;
title: string;
id: string;
}[];
}) {
return (
<Layout home>
@@ -42,14 +42,14 @@ export default function Home({
</ul>
</section>
</Layout>
)
);
}
export const getStaticProps: GetStaticProps = async () => {
const allPostsData = getSortedPostsData()
const allPostsData = getSortedPostsData();
return {
props: {
allPostsData
}
}
}
allPostsData,
},
};
};

42
basics/typescript-final/pages/posts/[id].tsx
View File

@@ -1,18 +1,18 @@
import Layout from '../../components/layout'
import { getAllPostIds, getPostData } from '../../lib/posts'
import Head from 'next/head'
import Date from '../../components/date'
import utilStyles from '../../styles/utils.module.css'
import { GetStaticProps, GetStaticPaths } from 'next'
import Layout from '../../components/layout';
import { getAllPostIds, getPostData } from '../../lib/posts';
import Head from 'next/head';
import Date from '../../components/date';
import utilStyles from '../../styles/utils.module.css';
import { GetStaticProps, GetStaticPaths } from 'next';
export default function Post({
postData
postData,
}: {
postData: {
title: string
date: string
contentHtml: string
}
title: string;
date: string;
contentHtml: string;
};
}) {
return (
<Layout>
@@ -27,22 +27,22 @@ export default function Post({
<div dangerouslySetInnerHTML={{ __html: postData.contentHtml }} />
</article>
</Layout>
)
);
}
export const getStaticPaths: GetStaticPaths = async () => {
const paths = getAllPostIds()
const paths = getAllPostIds();
return {
paths,
fallback: false
}
}
fallback: false,
};
};
export const getStaticProps: GetStaticProps = async ({ params }) => {
const postData = await getPostData(params?.id as string)
const postData = await getPostData(params?.id as string);
return {
props: {
postData
}
}
}
postData,
},
};
};

14
basics/typescript-final/styles/global.css
View File

@@ -2,8 +2,18 @@ html,
body {
padding: 0;
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
font-family:
-apple-system,
BlinkMacSystemFont,
Segoe UI,
Roboto,
Oxygen,
Ubuntu,
Cantarell,
Fira Sans,
Droid Sans,
Helvetica Neue,
sans-serif;
line-height: 1.6;
font-size: 18px;
}

3
dashboard/15-final/.eslintrc.json
View File

@@ -1,3 +0,0 @@
{
"extends": "next/core-web-vitals"
}

4
dashboard/15-final/app/dashboard/customers/page.tsx
View File

@@ -1,9 +1,9 @@
import CustomersTable from "@/app/ui/customers/table";
import CustomersTable from '@/app/ui/customers/table';
export default function Page() {
return (
<div>
<CustomersTable />
</div>
)
);
}

6
dashboard/15-final/app/dashboard/invoices/[id]/edit/page.tsx
View File

@@ -1,6 +1,6 @@
import InvoiceForm from "@/app/ui/invoices/form";
import { invoices } from "@/app/lib/dummy-data";
import { notFound } from "next/navigation";
import InvoiceForm from '@/app/ui/invoices/form';
import { invoices } from '@/app/lib/dummy-data';
import { notFound } from 'next/navigation';
export default function Page({ params }: { params: { id: string } }) {
const id = params.id ? parseInt(params.id) : null;

2
dashboard/15-final/app/dashboard/invoices/create/page.tsx
View File

@@ -1,4 +1,4 @@
import InvoiceForm from "@/app/ui/invoices/form";
import InvoiceForm from '@/app/ui/invoices/form';
export default function Page() {
return <InvoiceForm type="new" />;

2
dashboard/15-final/app/dashboard/invoices/page.tsx
View File

@@ -1,4 +1,4 @@
import InvoicesTable from "@/app/ui/invoices/table";
import InvoicesTable from '@/app/ui/invoices/table';
export default function Page() {
return (

4
dashboard/15-final/app/dashboard/layout.tsx
View File

@@ -1,5 +1,5 @@
import TopNav from "@/app/ui/dashboard/topnav";
import SideNav from "@/app/ui/dashboard/sidenav";
import TopNav from '@/app/ui/dashboard/topnav';
import SideNav from '@/app/ui/dashboard/sidenav';
export default function Layout({ children }: { children: React.ReactNode }) {
return (

2
dashboard/15-final/app/dashboard/page.tsx
View File

@@ -1,4 +1,4 @@
import DashboardOverview from "@/app/ui/dashboard/overview";
import DashboardOverview from '@/app/ui/dashboard/overview';
export default function Page() {
return (

12
dashboard/15-final/app/layout.tsx
View File

@@ -1,11 +1,11 @@
import "./globals.css";
import type { Metadata } from "next";
import { Inter } from "next/font/google";
const inter = Inter({ subsets: ["latin"] });
import './globals.css';
import type { Metadata } from 'next';
import { Inter } from 'next/font/google';
const inter = Inter({ subsets: ['latin'] });
export const metadata: Metadata = {
title: "Create Next App",
description: "Generated by create next app",
title: 'Create Next App',
description: 'Generated by create next app',
};
export default function RootLayout({

6
dashboard/15-final/app/lib/actions.tsx
View File

@@ -1,11 +1,11 @@
"use server";
'use server';
export async function deleteInvoice(id: number) {
// TO DO: Add delete invoice logic
console.log("Delete invoice", id);
console.log('Delete invoice', id);
}
export async function addOrUpdateInvoice(formData: FormData) {
// TO DO: Add create/update invoice logic
console.log("Edit Invoice");
console.log('Edit Invoice');
}

18
dashboard/15-final/app/lib/calculations.tsx
View File

@@ -1,30 +1,30 @@
import { Invoice, Revenue } from "./definitions";
import { Invoice, Revenue } from './definitions';
export const calculateAllInvoices = (
invoices: Invoice[],
status: "pending" | "paid",
status: 'pending' | 'paid',
) => {
return invoices
.filter((invoice) => !status || invoice.status === status)
.reduce((total, invoice) => total + invoice.amount / 100, 0)
.toLocaleString("en-US", {
style: "currency",
currency: "USD",
.toLocaleString('en-US', {
style: 'currency',
currency: 'USD',
});
};
export const calculateCustomerInvoices = (
invoices: Invoice[],
status: "pending" | "paid",
status: 'pending' | 'paid',
customerId: number,
) => {
return invoices
.filter((invoice) => invoice.customerId === customerId)
.filter((invoice) => !status || invoice.status === status)
.reduce((total, invoice) => total + invoice.amount / 100, 0)
.toLocaleString("en-US", {
style: "currency",
currency: "USD",
.toLocaleString('en-US', {
style: 'currency',
currency: 'USD',
});
};

2
dashboard/15-final/app/lib/definitions.tsx
View File

@@ -19,7 +19,7 @@ export type Invoice = {
id: number;
customerId: number;
amount: number;
status: "pending" | "paid"; // In TypeScript, this is called a string union type.
status: 'pending' | 'paid'; // In TypeScript, this is called a string union type.
// It means that the "status" property can only be one of the two strings.
date: string;
};

88
dashboard/15-final/app/lib/dummy-data.tsx
View File

@@ -1,39 +1,39 @@
import { User, Customer, Invoice, Revenue } from "./definitions";
import { User, Customer, Invoice, Revenue } from './definitions';
// This file contains dummy data that you'll be replacing with real data in Chapter 7.
export const users: User[] = [
{
id: 1,
name: "User",
email: "user@nextmail.com",
password: "123456",
name: 'User',
email: 'user@nextmail.com',
password: '123456',
},
];
export const customers: Customer[] = [
{
id: 1,
name: "Ada Lovelace",
email: "ada@lovelace.com",
imageUrl: "/customers/ada-lovelace.png",
name: 'Ada Lovelace',
email: 'ada@lovelace.com',
imageUrl: '/customers/ada-lovelace.png',
},
{
id: 2,
name: "Grace Hopper",
email: "grace@hopper.com",
imageUrl: "/customers/grace-hopper.png",
name: 'Grace Hopper',
email: 'grace@hopper.com',
imageUrl: '/customers/grace-hopper.png',
},
{
id: 3,
name: "Hedy Lammar",
email: "hedy@lammar.com",
imageUrl: "/customers/hedy-lammar.png",
name: 'Hedy Lammar',
email: 'hedy@lammar.com',
imageUrl: '/customers/hedy-lammar.png',
},
{
id: 4,
name: "Margaret Hamilton",
email: "margaret@hamilton.com",
imageUrl: "/customers/margaret-hamilton.png",
name: 'Margaret Hamilton',
email: 'margaret@hamilton.com',
imageUrl: '/customers/margaret-hamilton.png',
},
];
@@ -42,71 +42,71 @@ export const invoices: Invoice[] = [
id: 1,
customerId: 1,
amount: 15795,
status: "pending",
date: "2023-12-01",
status: 'pending',
date: '2023-12-01',
},
{
id: 2,
customerId: 2,
amount: 20348,
status: "pending",
date: "2023-11-01",
status: 'pending',
date: '2023-11-01',
},
{
id: 3,
customerId: 3,
amount: 3040,
status: "paid",
date: "2023-10-01",
status: 'paid',
date: '2023-10-01',
},
{
id: 4,
customerId: 4,
amount: 44800,
status: "paid",
date: "2023-09-01",
status: 'paid',
date: '2023-09-01',
},
{
id: 5,
customerId: 1,
amount: 34577,
status: "pending",
date: "2023-08-01",
status: 'pending',
date: '2023-08-01',
},
{
id: 6,
customerId: 2,
amount: 54246,
status: "pending",
date: "2023-07-01",
status: 'pending',
date: '2023-07-01',
},
{
id: 7,
customerId: 3,
amount: 8945,
status: "pending",
date: "2023-06-01",
status: 'pending',
date: '2023-06-01',
},
{
id: 8,
customerId: 4,
amount: 32545,
status: "paid",
date: "2023-06-01",
status: 'paid',
date: '2023-06-01',
},
];
export const revenue: Revenue[] = [
{ month: "Jan", revenue: 2000 },
{ month: "Feb", revenue: 1800 },
{ month: "Mar", revenue: 2200 },
{ month: "Apr", revenue: 2500 },
{ month: "May", revenue: 2300 },
{ month: "Jun", revenue: 3200 },
{ month: "Jul", revenue: 3500 },
{ month: "Aug", revenue: 3700 },
{ month: "Sep", revenue: 2500 },
{ month: "Oct", revenue: 2800 },
{ month: "Nov", revenue: 3000 },
{ month: "Dec", revenue: 4800 },
{ month: 'Jan', revenue: 2000 },
{ month: 'Feb', revenue: 1800 },
{ month: 'Mar', revenue: 2200 },
{ month: 'Apr', revenue: 2500 },
{ month: 'May', revenue: 2300 },
{ month: 'Jun', revenue: 3200 },
{ month: 'Jul', revenue: 3500 },
{ month: 'Aug', revenue: 3700 },
{ month: 'Sep', revenue: 2500 },
{ month: 'Oct', revenue: 2800 },
{ month: 'Nov', revenue: 3000 },
{ month: 'Dec', revenue: 4800 },
];

2
dashboard/15-final/app/login/page.tsx
View File

@@ -1,4 +1,4 @@
import LoginForm from "@/app/ui/login-form";
import LoginForm from '@/app/ui/login-form';
export default function Page() {
return (

2
dashboard/15-final/app/page.tsx
View File

@@ -1,4 +1,4 @@
import Hero from "@/app/ui/hero";
import Hero from '@/app/ui/hero';
export default function Page() {
return (

8
dashboard/15-final/app/ui/customers/table.tsx
View File

@@ -1,8 +1,8 @@
import { customers, invoices } from "@/app/lib/dummy-data";
import { customers, invoices } from '@/app/lib/dummy-data';
import {
countCustomerInvoices,
calculateCustomerInvoices,
} from "@/app/lib/calculations";
} from '@/app/lib/calculations';
export default function CustomersTable() {
return (
@@ -60,12 +60,12 @@ export default function CustomersTable() {
<td className="whitespace-nowrap px-3 py-4 text-sm">
{calculateCustomerInvoices(
invoices,
"pending",
'pending',
customer.id,
)}
</td>
<td className="whitespace-nowrap px-3 py-4 text-sm">
{calculateCustomerInvoices(invoices, "paid", customer.id)}
{calculateCustomerInvoices(invoices, 'paid', customer.id)}
</td>
</tr>
))}

4
dashboard/15-final/app/ui/dashboard/card.tsx
View File

@@ -3,7 +3,7 @@ import {
ClockIcon,
UserGroupIcon,
InboxIcon,
} from "@heroicons/react/24/outline";
} from '@heroicons/react/24/outline';
const iconMap = {
collected: BanknotesIcon,
@@ -19,7 +19,7 @@ export default function Card({
}: {
title: string;
value: number | string;
type: "invoices" | "customers" | "pending" | "collected";
type: 'invoices' | 'customers' | 'pending' | 'collected';
}) {
const Icon = iconMap[type];

16
dashboard/15-final/app/ui/dashboard/latest-invoices.tsx
View File

@@ -1,6 +1,6 @@
// InvoiceList.tsx
import { Customer, Invoice } from "@/app/lib/definitions";
import { findLatestInvoices } from "@/app/lib/calculations";
import { Customer, Invoice } from '@/app/lib/definitions';
import { findLatestInvoices } from '@/app/lib/calculations';
export default function LatestInvoices({
invoices,
@@ -26,8 +26,8 @@ export default function LatestInvoices({
>
<div className="flex items-center">
<img
src={customer?.imageUrl || ""}
alt={customer?.name || ""}
src={customer?.imageUrl || ''}
alt={customer?.name || ''}
className="mr-4 h-8 w-8 rounded-full"
/>
<div className="min-w-0">
@@ -38,10 +38,10 @@ export default function LatestInvoices({
</div>
</div>
<p className="truncate font-medium sm:text-lg">
+{" "}
{(invoice.amount / 100).toLocaleString("en-US", {
style: "currency",
currency: "USD",
+{' '}
{(invoice.amount / 100).toLocaleString('en-US', {
style: 'currency',
currency: 'USD',
})}
</p>
</div>

14
dashboard/15-final/app/ui/dashboard/overview.tsx
View File

@@ -1,12 +1,12 @@
import Card from "@/app/ui/dashboard/card";
import { invoices, customers, revenue } from "@/app/lib/dummy-data";
import { calculateAllInvoices } from "@/app/lib/calculations";
import RevenueChart from "@/app/ui/dashboard/revenue-chart";
import LatestInvoices from "@/app/ui/dashboard/latest-invoices";
import Card from '@/app/ui/dashboard/card';
import { invoices, customers, revenue } from '@/app/lib/dummy-data';
import { calculateAllInvoices } from '@/app/lib/calculations';
import RevenueChart from '@/app/ui/dashboard/revenue-chart';
import LatestInvoices from '@/app/ui/dashboard/latest-invoices';
export default function DashboardOverview() {
const totalPaidInvoices = calculateAllInvoices(invoices, "paid");
const totalPendingInvoices = calculateAllInvoices(invoices, "pending");
const totalPaidInvoices = calculateAllInvoices(invoices, 'paid');
const totalPendingInvoices = calculateAllInvoices(invoices, 'pending');
const numberOfInvoices = invoices.length;
const numberOfCustomers = customers.length;

6
dashboard/15-final/app/ui/dashboard/revenue-chart.tsx
View File

@@ -1,5 +1,5 @@
import { Revenue } from "@/app/lib/definitions";
import { generateYAxis } from "@/app/lib/calculations";
import { Revenue } from '@/app/lib/definitions';
import { generateYAxis } from '@/app/lib/calculations';
// This component is representational only.
// For data visualization UI, check out:
@@ -17,7 +17,7 @@ export default function RevenueChart({ revenue }: { revenue: Revenue[] }) {
return (
<div className="rounded-xl border p-6 shadow-sm md:col-span-5">
<h2 className="font-semibold">Revenue</h2>
<div className="mt-4 grid grid-cols-12 items-end gap-2 sm:grid-cols-13 md:gap-4">
<div className="sm:grid-cols-13 mt-4 grid grid-cols-12 items-end gap-2 md:gap-4">
{/* y-axis */}
<div
className="mb-6 hidden flex-col justify-between text-sm text-gray-400 sm:flex"

4
dashboard/15-final/app/ui/dashboard/search.tsx
View File

@@ -1,8 +1,8 @@
import { MagnifyingGlassIcon } from "@heroicons/react/24/outline";
import { MagnifyingGlassIcon } from '@heroicons/react/24/outline';
export default function Search() {
async function submitForm(formData: FormData) {
"use server";
'use server';
// TODO: Implement search
}
return (

Some files were not shown because too many files have changed in this diff Show More