diff --git a/.eslintrc.js b/.eslintrc.js index 8287402..b02df03 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -1,10 +1,10 @@ module.exports = { - extends: ["next/core-web-vitals", "prettier"], - ignorePatterns: ["**/.next/**", "**/node_modules/**"], + extends: ['next/core-web-vitals', 'prettier'], + ignorePatterns: ['**/.next/**', '**/node_modules/**'], root: true, settings: { next: { - rootDir: ["basics/*/", "dashboard/*/", "seo/"], + rootDir: ['basics/*/', 'dashboard/*/', 'seo/'], }, }, }; diff --git a/.github/dependabot.yml b/.github/dependabot.yml index c6c4ec9..b18fd29 100644 --- a/.github/dependabot.yml +++ b/.github/dependabot.yml @@ -1,6 +1,6 @@ version: 2 updates: - - package-ecosystem: "github-actions" - directory: "/" - schedule: - interval: "weekly" + - package-ecosystem: 'github-actions' + directory: '/' + schedule: + interval: 'weekly' diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml index e5a97ec..b47ed14 100644 --- a/.github/workflows/test.yml +++ b/.github/workflows/test.yml @@ -1,30 +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 + 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 diff --git a/basics/api-routes-starter/README.md b/basics/api-routes-starter/README.md index 02695bc..1a60afb 100644 --- a/basics/api-routes-starter/README.md +++ b/basics/api-routes-starter/README.md @@ -1 +1 @@ -This is a starter template for [Learn Next.js](https://nextjs.org/learn). \ No newline at end of file +This is a starter template for [Learn Next.js](https://nextjs.org/learn). diff --git a/basics/api-routes-starter/components/date.js b/basics/api-routes-starter/components/date.js index 0ec71d3..f9e5891 100644 --- a/basics/api-routes-starter/components/date.js +++ b/basics/api-routes-starter/components/date.js @@ -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 + const date = parseISO(dateString); + return ; } diff --git a/basics/api-routes-starter/components/layout.js b/basics/api-routes-starter/components/layout.js index a6246e3..21f7ada 100644 --- a/basics/api-routes-starter/components/layout.js +++ b/basics/api-routes-starter/components/layout.js @@ -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 }) { @@ -65,5 +65,5 @@ export default function Layout({ children, home }) { )} - ) + ); } diff --git a/basics/api-routes-starter/lib/posts.js b/basics/api-routes-starter/lib/posts.js index be54bb2..f32c755 100644 --- a/basics/api-routes-starter/lib/posts.js +++ b/basics/api-routes-starter/lib/posts.js @@ -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, + }; } diff --git a/basics/api-routes-starter/package.json b/basics/api-routes-starter/package.json index ac56f9f..4125396 100644 --- a/basics/api-routes-starter/package.json +++ b/basics/api-routes-starter/package.json @@ -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" } } diff --git a/basics/api-routes-starter/pages/_app.js b/basics/api-routes-starter/pages/_app.js index 7e66efc..b0ac743 100644 --- a/basics/api-routes-starter/pages/_app.js +++ b/basics/api-routes-starter/pages/_app.js @@ -1,5 +1,5 @@ -import '../styles/global.css' +import '../styles/global.css'; export default function App({ Component, pageProps }) { - return + return ; } diff --git a/basics/api-routes-starter/pages/index.js b/basics/api-routes-starter/pages/index.js index c1501e8..677dc81 100644 --- a/basics/api-routes-starter/pages/index.js +++ b/basics/api-routes-starter/pages/index.js @@ -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 }) { - ) + ); } export async function getStaticProps() { - const allPostsData = getSortedPostsData() + const allPostsData = getSortedPostsData(); return { props: { - allPostsData - } - } + allPostsData, + }, + }; } diff --git a/basics/api-routes-starter/pages/posts/[id].js b/basics/api-routes-starter/pages/posts/[id].js index 28faaad..efc338e 100644 --- a/basics/api-routes-starter/pages/posts/[id].js +++ b/basics/api-routes-starter/pages/posts/[id].js @@ -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 }) {
- ) + ); } 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, + }, + }; } diff --git a/basics/api-routes-starter/styles/global.css b/basics/api-routes-starter/styles/global.css index 9e1b0fb..c350934 100644 --- a/basics/api-routes-starter/styles/global.css +++ b/basics/api-routes-starter/styles/global.css @@ -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; } diff --git a/basics/assets-metadata-css-starter/README.md b/basics/assets-metadata-css-starter/README.md index 02695bc..1a60afb 100644 --- a/basics/assets-metadata-css-starter/README.md +++ b/basics/assets-metadata-css-starter/README.md @@ -1 +1 @@ -This is a starter template for [Learn Next.js](https://nextjs.org/learn). \ No newline at end of file +This is a starter template for [Learn Next.js](https://nextjs.org/learn). diff --git a/basics/assets-metadata-css-starter/package.json b/basics/assets-metadata-css-starter/package.json index ac9b5ce..d2e255f 100644 --- a/basics/assets-metadata-css-starter/package.json +++ b/basics/assets-metadata-css-starter/package.json @@ -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" } } diff --git a/basics/assets-metadata-css-starter/pages/index.js b/basics/assets-metadata-css-starter/pages/index.js index a4e4a64..b1dd3ec 100644 --- a/basics/assets-metadata-css-starter/pages/index.js +++ b/basics/assets-metadata-css-starter/pages/index.js @@ -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() {

- Read this page! + Read this page!

@@ -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; } `} @@ -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() { } `}

- ) -} \ No newline at end of file + ); +} diff --git a/basics/assets-metadata-css-starter/pages/posts/first-post.js b/basics/assets-metadata-css-starter/pages/posts/first-post.js index 23cb95e..afd8c68 100644 --- a/basics/assets-metadata-css-starter/pages/posts/first-post.js +++ b/basics/assets-metadata-css-starter/pages/posts/first-post.js @@ -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() { Back to home - ) + ); } diff --git a/basics/assets-metadata-css-starter/styles/Home.module.css b/basics/assets-metadata-css-starter/styles/Home.module.css index b825756..cb4a976 100644 --- a/basics/assets-metadata-css-starter/styles/Home.module.css +++ b/basics/assets-metadata-css-starter/styles/Home.module.css @@ -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, diff --git a/basics/assets-metadata-css-starter/styles/globals.css b/basics/assets-metadata-css-starter/styles/globals.css index 95bfb35..fbf4c07 100644 --- a/basics/assets-metadata-css-starter/styles/globals.css +++ b/basics/assets-metadata-css-starter/styles/globals.css @@ -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 { diff --git a/basics/basics-final/README.md b/basics/basics-final/README.md index 02695bc..1a60afb 100644 --- a/basics/basics-final/README.md +++ b/basics/basics-final/README.md @@ -1 +1 @@ -This is a starter template for [Learn Next.js](https://nextjs.org/learn). \ No newline at end of file +This is a starter template for [Learn Next.js](https://nextjs.org/learn). diff --git a/basics/basics-final/components/date.js b/basics/basics-final/components/date.js index 0ec71d3..f9e5891 100644 --- a/basics/basics-final/components/date.js +++ b/basics/basics-final/components/date.js @@ -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 + const date = parseISO(dateString); + return ; } diff --git a/basics/basics-final/components/layout.js b/basics/basics-final/components/layout.js index 5049dfc..821d043 100644 --- a/basics/basics-final/components/layout.js +++ b/basics/basics-final/components/layout.js @@ -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 }) { @@ -74,5 +74,5 @@ export default function Layout({ children, home }) { )} - ) + ); } diff --git a/basics/basics-final/lib/posts.js b/basics/basics-final/lib/posts.js index be54bb2..f32c755 100644 --- a/basics/basics-final/lib/posts.js +++ b/basics/basics-final/lib/posts.js @@ -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, + }; } diff --git a/basics/basics-final/package.json b/basics/basics-final/package.json index ac56f9f..4125396 100644 --- a/basics/basics-final/package.json +++ b/basics/basics-final/package.json @@ -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" } } diff --git a/basics/basics-final/pages/_app.js b/basics/basics-final/pages/_app.js index 7e66efc..b0ac743 100644 --- a/basics/basics-final/pages/_app.js +++ b/basics/basics-final/pages/_app.js @@ -1,5 +1,5 @@ -import '../styles/global.css' +import '../styles/global.css'; export default function App({ Component, pageProps }) { - return + return ; } diff --git a/basics/basics-final/pages/api/hello.js b/basics/basics-final/pages/api/hello.js index 2e22ab3..e91bdc1 100644 --- a/basics/basics-final/pages/api/hello.js +++ b/basics/basics-final/pages/api/hello.js @@ -1,3 +1,3 @@ export default (req, res) => { - res.status(200).json({ text: 'Hello' }) -} + res.status(200).json({ text: 'Hello' }); +}; diff --git a/basics/basics-final/pages/index.js b/basics/basics-final/pages/index.js index c1501e8..677dc81 100644 --- a/basics/basics-final/pages/index.js +++ b/basics/basics-final/pages/index.js @@ -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 }) { - ) + ); } export async function getStaticProps() { - const allPostsData = getSortedPostsData() + const allPostsData = getSortedPostsData(); return { props: { - allPostsData - } - } + allPostsData, + }, + }; } diff --git a/basics/basics-final/pages/posts/[id].js b/basics/basics-final/pages/posts/[id].js index 28faaad..efc338e 100644 --- a/basics/basics-final/pages/posts/[id].js +++ b/basics/basics-final/pages/posts/[id].js @@ -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 }) {
- ) + ); } 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, + }, + }; } diff --git a/basics/basics-final/styles/global.css b/basics/basics-final/styles/global.css index 9e1b0fb..c350934 100644 --- a/basics/basics-final/styles/global.css +++ b/basics/basics-final/styles/global.css @@ -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; } diff --git a/basics/data-fetching-starter/README.md b/basics/data-fetching-starter/README.md index 02695bc..1a60afb 100644 --- a/basics/data-fetching-starter/README.md +++ b/basics/data-fetching-starter/README.md @@ -1 +1 @@ -This is a starter template for [Learn Next.js](https://nextjs.org/learn). \ No newline at end of file +This is a starter template for [Learn Next.js](https://nextjs.org/learn). diff --git a/basics/data-fetching-starter/components/layout.js b/basics/data-fetching-starter/components/layout.js index a6246e3..21f7ada 100644 --- a/basics/data-fetching-starter/components/layout.js +++ b/basics/data-fetching-starter/components/layout.js @@ -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 }) { @@ -65,5 +65,5 @@ export default function Layout({ children, home }) {
)} - ) + ); } diff --git a/basics/data-fetching-starter/package.json b/basics/data-fetching-starter/package.json index ac9b5ce..d2e255f 100644 --- a/basics/data-fetching-starter/package.json +++ b/basics/data-fetching-starter/package.json @@ -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" } } diff --git a/basics/data-fetching-starter/pages/_app.js b/basics/data-fetching-starter/pages/_app.js index 7e66efc..b0ac743 100644 --- a/basics/data-fetching-starter/pages/_app.js +++ b/basics/data-fetching-starter/pages/_app.js @@ -1,5 +1,5 @@ -import '../styles/global.css' +import '../styles/global.css'; export default function App({ Component, pageProps }) { - return + return ; } diff --git a/basics/data-fetching-starter/pages/index.js b/basics/data-fetching-starter/pages/index.js index fec3d5f..d738fba 100644 --- a/basics/data-fetching-starter/pages/index.js +++ b/basics/data-fetching-starter/pages/index.js @@ -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() {

- ) + ); } diff --git a/basics/data-fetching-starter/pages/posts/first-post.js b/basics/data-fetching-starter/pages/posts/first-post.js index 6bbd8dd..4ffe71d 100644 --- a/basics/data-fetching-starter/pages/posts/first-post.js +++ b/basics/data-fetching-starter/pages/posts/first-post.js @@ -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() { Back to home - ) + ); } diff --git a/basics/data-fetching-starter/styles/global.css b/basics/data-fetching-starter/styles/global.css index 9e1b0fb..c350934 100644 --- a/basics/data-fetching-starter/styles/global.css +++ b/basics/data-fetching-starter/styles/global.css @@ -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; } diff --git a/basics/demo/README.md b/basics/demo/README.md index 6140cd9..8dcb710 100644 --- a/basics/demo/README.md +++ b/basics/demo/README.md @@ -1 +1 @@ -This is a final template for [Learn Next.js](https://nextjs.org/learn). \ No newline at end of file +This is a final template for [Learn Next.js](https://nextjs.org/learn). diff --git a/basics/demo/components/date.js b/basics/demo/components/date.js index 0ec71d3..f9e5891 100644 --- a/basics/demo/components/date.js +++ b/basics/demo/components/date.js @@ -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 + const date = parseISO(dateString); + return ; } diff --git a/basics/demo/components/layout.js b/basics/demo/components/layout.js index b7a3a0e..26ad73c 100644 --- a/basics/demo/components/layout.js +++ b/basics/demo/components/layout.js @@ -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 }) { @@ -65,5 +65,5 @@ export default function Layout({ children, home }) { )} - ) + ); } diff --git a/basics/demo/lib/posts.js b/basics/demo/lib/posts.js index be54bb2..f32c755 100644 --- a/basics/demo/lib/posts.js +++ b/basics/demo/lib/posts.js @@ -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, + }; } diff --git a/basics/demo/package.json b/basics/demo/package.json index ac56f9f..4125396 100644 --- a/basics/demo/package.json +++ b/basics/demo/package.json @@ -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" } } diff --git a/basics/demo/pages/_app.js b/basics/demo/pages/_app.js index 7e66efc..b0ac743 100644 --- a/basics/demo/pages/_app.js +++ b/basics/demo/pages/_app.js @@ -1,5 +1,5 @@ -import '../styles/global.css' +import '../styles/global.css'; export default function App({ Component, pageProps }) { - return + return ; } diff --git a/basics/demo/pages/api/hello.js b/basics/demo/pages/api/hello.js index 2e22ab3..e91bdc1 100644 --- a/basics/demo/pages/api/hello.js +++ b/basics/demo/pages/api/hello.js @@ -1,3 +1,3 @@ export default (req, res) => { - res.status(200).json({ text: 'Hello' }) -} + res.status(200).json({ text: 'Hello' }); +}; diff --git a/basics/demo/pages/index.js b/basics/demo/pages/index.js index e91425b..6fffb6a 100644 --- a/basics/demo/pages/index.js +++ b/basics/demo/pages/index.js @@ -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 }) { - ) + ); } export async function getStaticProps() { - const allPostsData = getSortedPostsData() + const allPostsData = getSortedPostsData(); return { props: { - allPostsData - } - } + allPostsData, + }, + }; } diff --git a/basics/demo/pages/posts/[id].js b/basics/demo/pages/posts/[id].js index 28faaad..efc338e 100644 --- a/basics/demo/pages/posts/[id].js +++ b/basics/demo/pages/posts/[id].js @@ -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 }) {
- ) + ); } 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, + }, + }; } diff --git a/basics/demo/styles/global.css b/basics/demo/styles/global.css index 9e1b0fb..c350934 100644 --- a/basics/demo/styles/global.css +++ b/basics/demo/styles/global.css @@ -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; } diff --git a/basics/dynamic-routes-starter/README.md b/basics/dynamic-routes-starter/README.md index 02695bc..1a60afb 100644 --- a/basics/dynamic-routes-starter/README.md +++ b/basics/dynamic-routes-starter/README.md @@ -1 +1 @@ -This is a starter template for [Learn Next.js](https://nextjs.org/learn). \ No newline at end of file +This is a starter template for [Learn Next.js](https://nextjs.org/learn). diff --git a/basics/dynamic-routes-starter/components/layout.js b/basics/dynamic-routes-starter/components/layout.js index a6246e3..21f7ada 100644 --- a/basics/dynamic-routes-starter/components/layout.js +++ b/basics/dynamic-routes-starter/components/layout.js @@ -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 }) { @@ -65,5 +65,5 @@ export default function Layout({ children, home }) {
)} - ) + ); } diff --git a/basics/dynamic-routes-starter/lib/posts.js b/basics/dynamic-routes-starter/lib/posts.js index 46d820c..648d48d 100644 --- a/basics/dynamic-routes-starter/lib/posts.js +++ b/basics/dynamic-routes-starter/lib/posts.js @@ -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; } - }) + }); } diff --git a/basics/dynamic-routes-starter/package.json b/basics/dynamic-routes-starter/package.json index f669f0b..1bd2c3a 100644 --- a/basics/dynamic-routes-starter/package.json +++ b/basics/dynamic-routes-starter/package.json @@ -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" } } diff --git a/basics/dynamic-routes-starter/pages/_app.js b/basics/dynamic-routes-starter/pages/_app.js index 7e66efc..b0ac743 100644 --- a/basics/dynamic-routes-starter/pages/_app.js +++ b/basics/dynamic-routes-starter/pages/_app.js @@ -1,5 +1,5 @@ -import '../styles/global.css' +import '../styles/global.css'; export default function App({ Component, pageProps }) { - return + return ; } diff --git a/basics/dynamic-routes-starter/pages/index.js b/basics/dynamic-routes-starter/pages/index.js index 24ba2c6..de46225 100644 --- a/basics/dynamic-routes-starter/pages/index.js +++ b/basics/dynamic-routes-starter/pages/index.js @@ -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 }) { - ) + ); } export async function getStaticProps() { - const allPostsData = getSortedPostsData() + const allPostsData = getSortedPostsData(); return { props: { - allPostsData - } - } + allPostsData, + }, + }; } diff --git a/basics/dynamic-routes-starter/pages/posts/first-post.js b/basics/dynamic-routes-starter/pages/posts/first-post.js index 6bbd8dd..4ffe71d 100644 --- a/basics/dynamic-routes-starter/pages/posts/first-post.js +++ b/basics/dynamic-routes-starter/pages/posts/first-post.js @@ -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() { Back to home - ) + ); } diff --git a/basics/dynamic-routes-starter/styles/global.css b/basics/dynamic-routes-starter/styles/global.css index 9e1b0fb..c350934 100644 --- a/basics/dynamic-routes-starter/styles/global.css +++ b/basics/dynamic-routes-starter/styles/global.css @@ -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; } diff --git a/basics/dynamic-routes-step-1/README.md b/basics/dynamic-routes-step-1/README.md index 02695bc..1a60afb 100644 --- a/basics/dynamic-routes-step-1/README.md +++ b/basics/dynamic-routes-step-1/README.md @@ -1 +1 @@ -This is a starter template for [Learn Next.js](https://nextjs.org/learn). \ No newline at end of file +This is a starter template for [Learn Next.js](https://nextjs.org/learn). diff --git a/basics/dynamic-routes-step-1/components/layout.js b/basics/dynamic-routes-step-1/components/layout.js index a6246e3..21f7ada 100644 --- a/basics/dynamic-routes-step-1/components/layout.js +++ b/basics/dynamic-routes-step-1/components/layout.js @@ -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 }) { @@ -65,5 +65,5 @@ export default function Layout({ children, home }) { )} - ) + ); } diff --git a/basics/dynamic-routes-step-1/lib/posts.js b/basics/dynamic-routes-step-1/lib/posts.js index edba4e0..ee20ec5 100644 --- a/basics/dynamic-routes-step-1/lib/posts.js +++ b/basics/dynamic-routes-step-1/lib/posts.js @@ -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, + }; } diff --git a/basics/dynamic-routes-step-1/package.json b/basics/dynamic-routes-step-1/package.json index f669f0b..1bd2c3a 100644 --- a/basics/dynamic-routes-step-1/package.json +++ b/basics/dynamic-routes-step-1/package.json @@ -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" } } diff --git a/basics/dynamic-routes-step-1/pages/_app.js b/basics/dynamic-routes-step-1/pages/_app.js index 7e66efc..b0ac743 100644 --- a/basics/dynamic-routes-step-1/pages/_app.js +++ b/basics/dynamic-routes-step-1/pages/_app.js @@ -1,5 +1,5 @@ -import '../styles/global.css' +import '../styles/global.css'; export default function App({ Component, pageProps }) { - return + return ; } diff --git a/basics/dynamic-routes-step-1/pages/index.js b/basics/dynamic-routes-step-1/pages/index.js index 24ba2c6..de46225 100644 --- a/basics/dynamic-routes-step-1/pages/index.js +++ b/basics/dynamic-routes-step-1/pages/index.js @@ -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 }) { - ) + ); } export async function getStaticProps() { - const allPostsData = getSortedPostsData() + const allPostsData = getSortedPostsData(); return { props: { - allPostsData - } - } + allPostsData, + }, + }; } diff --git a/basics/dynamic-routes-step-1/pages/posts/[id].js b/basics/dynamic-routes-step-1/pages/posts/[id].js index 89b7f6f..067772f 100644 --- a/basics/dynamic-routes-step-1/pages/posts/[id].js +++ b/basics/dynamic-routes-step-1/pages/posts/[id].js @@ -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 }) {
{postData.date} - ) + ); } 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, + }, + }; } diff --git a/basics/dynamic-routes-step-1/styles/global.css b/basics/dynamic-routes-step-1/styles/global.css index 9e1b0fb..c350934 100644 --- a/basics/dynamic-routes-step-1/styles/global.css +++ b/basics/dynamic-routes-step-1/styles/global.css @@ -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; } diff --git a/basics/learn-starter/README.md b/basics/learn-starter/README.md index 02695bc..1a60afb 100644 --- a/basics/learn-starter/README.md +++ b/basics/learn-starter/README.md @@ -1 +1 @@ -This is a starter template for [Learn Next.js](https://nextjs.org/learn). \ No newline at end of file +This is a starter template for [Learn Next.js](https://nextjs.org/learn). diff --git a/basics/learn-starter/package.json b/basics/learn-starter/package.json index ac9b5ce..d2e255f 100644 --- a/basics/learn-starter/package.json +++ b/basics/learn-starter/package.json @@ -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" } } diff --git a/basics/learn-starter/pages/index.js b/basics/learn-starter/pages/index.js index 51c838e..a465e1d 100644 --- a/basics/learn-starter/pages/index.js +++ b/basics/learn-starter/pages/index.js @@ -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; } `} @@ -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() { } `} - ) + ); } diff --git a/basics/learn-starter/styles/Home.module.css b/basics/learn-starter/styles/Home.module.css index b825756..cb4a976 100644 --- a/basics/learn-starter/styles/Home.module.css +++ b/basics/learn-starter/styles/Home.module.css @@ -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, diff --git a/basics/learn-starter/styles/globals.css b/basics/learn-starter/styles/globals.css index 95bfb35..fbf4c07 100644 --- a/basics/learn-starter/styles/globals.css +++ b/basics/learn-starter/styles/globals.css @@ -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 { diff --git a/basics/navigate-between-pages-starter/README.md b/basics/navigate-between-pages-starter/README.md index 02695bc..1a60afb 100644 --- a/basics/navigate-between-pages-starter/README.md +++ b/basics/navigate-between-pages-starter/README.md @@ -1 +1 @@ -This is a starter template for [Learn Next.js](https://nextjs.org/learn). \ No newline at end of file +This is a starter template for [Learn Next.js](https://nextjs.org/learn). diff --git a/basics/navigate-between-pages-starter/package.json b/basics/navigate-between-pages-starter/package.json index ac9b5ce..d2e255f 100644 --- a/basics/navigate-between-pages-starter/package.json +++ b/basics/navigate-between-pages-starter/package.json @@ -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" } } diff --git a/basics/navigate-between-pages-starter/pages/index.js b/basics/navigate-between-pages-starter/pages/index.js index 0647b88..5a4ea36 100644 --- a/basics/navigate-between-pages-starter/pages/index.js +++ b/basics/navigate-between-pages-starter/pages/index.js @@ -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; } `} @@ -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() { } `} - ) + ); } diff --git a/basics/navigate-between-pages-starter/styles/Home.module.css b/basics/navigate-between-pages-starter/styles/Home.module.css index b825756..cb4a976 100644 --- a/basics/navigate-between-pages-starter/styles/Home.module.css +++ b/basics/navigate-between-pages-starter/styles/Home.module.css @@ -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, diff --git a/basics/navigate-between-pages-starter/styles/globals.css b/basics/navigate-between-pages-starter/styles/globals.css index 95bfb35..fbf4c07 100644 --- a/basics/navigate-between-pages-starter/styles/globals.css +++ b/basics/navigate-between-pages-starter/styles/globals.css @@ -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 { diff --git a/basics/snippets/link-classname-example.js b/basics/snippets/link-classname-example.js index 3f2e979..460fa8b 100644 --- a/basics/snippets/link-classname-example.js +++ b/basics/snippets/link-classname-example.js @@ -1,12 +1,12 @@ // Example: Adding className with -import Link from 'next/link' +import Link from 'next/link'; export default function LinkClassnameExample() { return ( Hello World - ) + ); } // Take a look at https://nextjs.org/docs/api-reference/next/link diff --git a/basics/typescript-final/README.md b/basics/typescript-final/README.md index 02695bc..1a60afb 100644 --- a/basics/typescript-final/README.md +++ b/basics/typescript-final/README.md @@ -1 +1 @@ -This is a starter template for [Learn Next.js](https://nextjs.org/learn). \ No newline at end of file +This is a starter template for [Learn Next.js](https://nextjs.org/learn). diff --git a/basics/typescript-final/components/date.tsx b/basics/typescript-final/components/date.tsx index 70662ea..d783749 100644 --- a/basics/typescript-final/components/date.tsx +++ b/basics/typescript-final/components/date.tsx @@ -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 + const date = parseISO(dateString); + return ; } diff --git a/basics/typescript-final/components/layout.tsx b/basics/typescript-final/components/layout.tsx index dcaec0f..a502745 100644 --- a/basics/typescript-final/components/layout.tsx +++ b/basics/typescript-final/components/layout.tsx @@ -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 (
@@ -25,7 +25,7 @@ export default function Layout({ @@ -71,5 +71,5 @@ export default function Layout({
)} - ) + ); } diff --git a/basics/typescript-final/global.d.ts b/basics/typescript-final/global.d.ts index b681c31..d34d80e 100644 --- a/basics/typescript-final/global.d.ts +++ b/basics/typescript-final/global.d.ts @@ -1,4 +1,4 @@ declare module 'remark-html' { - const html: any - export default html + const html: any; + export default html; } diff --git a/basics/typescript-final/lib/posts.ts b/basics/typescript-final/lib/posts.ts index ee8aec8..075f138 100644 --- a/basics/typescript-final/lib/posts.ts +++ b/basics/typescript-final/lib/posts.ts @@ -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 }), + }; } diff --git a/basics/typescript-final/package.json b/basics/typescript-final/package.json index 993d8d0..29562ff 100644 --- a/basics/typescript-final/package.json +++ b/basics/typescript-final/package.json @@ -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" } } diff --git a/basics/typescript-final/pages/_app.tsx b/basics/typescript-final/pages/_app.tsx index 6cdcdc2..0ecb97e 100644 --- a/basics/typescript-final/pages/_app.tsx +++ b/basics/typescript-final/pages/_app.tsx @@ -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 + return ; } diff --git a/basics/typescript-final/pages/api/hello.ts b/basics/typescript-final/pages/api/hello.ts index 7cf37be..7d39ece 100644 --- a/basics/typescript-final/pages/api/hello.ts +++ b/basics/typescript-final/pages/api/hello.ts @@ -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' }); +}; diff --git a/basics/typescript-final/pages/index.tsx b/basics/typescript-final/pages/index.tsx index 2b5a7a5..ec04ee2 100644 --- a/basics/typescript-final/pages/index.tsx +++ b/basics/typescript-final/pages/index.tsx @@ -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 ( @@ -42,14 +42,14 @@ export default function Home({ - ) + ); } export const getStaticProps: GetStaticProps = async () => { - const allPostsData = getSortedPostsData() + const allPostsData = getSortedPostsData(); return { props: { - allPostsData - } - } -} + allPostsData, + }, + }; +}; diff --git a/basics/typescript-final/pages/posts/[id].tsx b/basics/typescript-final/pages/posts/[id].tsx index 2d969e8..88ea7f1 100644 --- a/basics/typescript-final/pages/posts/[id].tsx +++ b/basics/typescript-final/pages/posts/[id].tsx @@ -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 ( @@ -27,22 +27,22 @@ export default function Post({
- ) + ); } 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, + }, + }; +}; diff --git a/basics/typescript-final/styles/global.css b/basics/typescript-final/styles/global.css index 9e1b0fb..c350934 100644 --- a/basics/typescript-final/styles/global.css +++ b/basics/typescript-final/styles/global.css @@ -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; } diff --git a/dashboard/15-final/app/dashboard/customers/page.tsx b/dashboard/15-final/app/dashboard/customers/page.tsx index cfffe27..6752b37 100644 --- a/dashboard/15-final/app/dashboard/customers/page.tsx +++ b/dashboard/15-final/app/dashboard/customers/page.tsx @@ -1,9 +1,9 @@ -import CustomersTable from "@/app/ui/customers/table"; +import CustomersTable from '@/app/ui/customers/table'; export default function Page() { return (
- ) + ); } diff --git a/dashboard/15-final/app/dashboard/invoices/[id]/edit/page.tsx b/dashboard/15-final/app/dashboard/invoices/[id]/edit/page.tsx index 9a179ca..0939c16 100644 --- a/dashboard/15-final/app/dashboard/invoices/[id]/edit/page.tsx +++ b/dashboard/15-final/app/dashboard/invoices/[id]/edit/page.tsx @@ -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; diff --git a/dashboard/15-final/app/dashboard/invoices/create/page.tsx b/dashboard/15-final/app/dashboard/invoices/create/page.tsx index 74a2a0d..180ecc0 100644 --- a/dashboard/15-final/app/dashboard/invoices/create/page.tsx +++ b/dashboard/15-final/app/dashboard/invoices/create/page.tsx @@ -1,4 +1,4 @@ -import InvoiceForm from "@/app/ui/invoices/form"; +import InvoiceForm from '@/app/ui/invoices/form'; export default function Page() { return ; diff --git a/dashboard/15-final/app/dashboard/invoices/page.tsx b/dashboard/15-final/app/dashboard/invoices/page.tsx index 393ab7d..30cb6f7 100644 --- a/dashboard/15-final/app/dashboard/invoices/page.tsx +++ b/dashboard/15-final/app/dashboard/invoices/page.tsx @@ -1,4 +1,4 @@ -import InvoicesTable from "@/app/ui/invoices/table"; +import InvoicesTable from '@/app/ui/invoices/table'; export default function Page() { return ( diff --git a/dashboard/15-final/app/dashboard/layout.tsx b/dashboard/15-final/app/dashboard/layout.tsx index b657563..f80441b 100644 --- a/dashboard/15-final/app/dashboard/layout.tsx +++ b/dashboard/15-final/app/dashboard/layout.tsx @@ -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 ( diff --git a/dashboard/15-final/app/dashboard/page.tsx b/dashboard/15-final/app/dashboard/page.tsx index 848bf1b..0a65819 100644 --- a/dashboard/15-final/app/dashboard/page.tsx +++ b/dashboard/15-final/app/dashboard/page.tsx @@ -1,4 +1,4 @@ -import DashboardOverview from "@/app/ui/dashboard/overview"; +import DashboardOverview from '@/app/ui/dashboard/overview'; export default function Page() { return ( diff --git a/dashboard/15-final/app/layout.tsx b/dashboard/15-final/app/layout.tsx index cc89e10..e597742 100644 --- a/dashboard/15-final/app/layout.tsx +++ b/dashboard/15-final/app/layout.tsx @@ -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({ diff --git a/dashboard/15-final/app/lib/actions.tsx b/dashboard/15-final/app/lib/actions.tsx index 92e37c0..571de0f 100644 --- a/dashboard/15-final/app/lib/actions.tsx +++ b/dashboard/15-final/app/lib/actions.tsx @@ -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'); } diff --git a/dashboard/15-final/app/lib/calculations.tsx b/dashboard/15-final/app/lib/calculations.tsx index a31aef9..7f90579 100644 --- a/dashboard/15-final/app/lib/calculations.tsx +++ b/dashboard/15-final/app/lib/calculations.tsx @@ -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', }); }; diff --git a/dashboard/15-final/app/lib/definitions.tsx b/dashboard/15-final/app/lib/definitions.tsx index 0e4cb89..ef22934 100644 --- a/dashboard/15-final/app/lib/definitions.tsx +++ b/dashboard/15-final/app/lib/definitions.tsx @@ -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; }; diff --git a/dashboard/15-final/app/lib/dummy-data.tsx b/dashboard/15-final/app/lib/dummy-data.tsx index 933a940..0b0f2ed 100644 --- a/dashboard/15-final/app/lib/dummy-data.tsx +++ b/dashboard/15-final/app/lib/dummy-data.tsx @@ -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 }, ]; diff --git a/dashboard/15-final/app/login/page.tsx b/dashboard/15-final/app/login/page.tsx index 522ecd1..7fe5643 100644 --- a/dashboard/15-final/app/login/page.tsx +++ b/dashboard/15-final/app/login/page.tsx @@ -1,4 +1,4 @@ -import LoginForm from "@/app/ui/login-form"; +import LoginForm from '@/app/ui/login-form'; export default function Page() { return ( diff --git a/dashboard/15-final/app/page.tsx b/dashboard/15-final/app/page.tsx index 76bab6f..f3bbd67 100644 --- a/dashboard/15-final/app/page.tsx +++ b/dashboard/15-final/app/page.tsx @@ -1,4 +1,4 @@ -import Hero from "@/app/ui/hero"; +import Hero from '@/app/ui/hero'; export default function Page() { return ( diff --git a/dashboard/15-final/app/ui/customers/table.tsx b/dashboard/15-final/app/ui/customers/table.tsx index ceb36ff..c69d8af 100644 --- a/dashboard/15-final/app/ui/customers/table.tsx +++ b/dashboard/15-final/app/ui/customers/table.tsx @@ -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() { {calculateCustomerInvoices( invoices, - "pending", + 'pending', customer.id, )} - {calculateCustomerInvoices(invoices, "paid", customer.id)} + {calculateCustomerInvoices(invoices, 'paid', customer.id)} ))} diff --git a/dashboard/15-final/app/ui/dashboard/card.tsx b/dashboard/15-final/app/ui/dashboard/card.tsx index 66b274f..49d9652 100644 --- a/dashboard/15-final/app/ui/dashboard/card.tsx +++ b/dashboard/15-final/app/ui/dashboard/card.tsx @@ -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]; diff --git a/dashboard/15-final/app/ui/dashboard/latest-invoices.tsx b/dashboard/15-final/app/ui/dashboard/latest-invoices.tsx index 6a832f5..d5011b1 100644 --- a/dashboard/15-final/app/ui/dashboard/latest-invoices.tsx +++ b/dashboard/15-final/app/ui/dashboard/latest-invoices.tsx @@ -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({ >
{customer?.name
@@ -38,10 +38,10 @@ export default function LatestInvoices({

- +{" "} - {(invoice.amount / 100).toLocaleString("en-US", { - style: "currency", - currency: "USD", + +{' '} + {(invoice.amount / 100).toLocaleString('en-US', { + style: 'currency', + currency: 'USD', })}

diff --git a/dashboard/15-final/app/ui/dashboard/overview.tsx b/dashboard/15-final/app/ui/dashboard/overview.tsx index 173005b..f3c011e 100644 --- a/dashboard/15-final/app/ui/dashboard/overview.tsx +++ b/dashboard/15-final/app/ui/dashboard/overview.tsx @@ -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; diff --git a/dashboard/15-final/app/ui/dashboard/revenue-chart.tsx b/dashboard/15-final/app/ui/dashboard/revenue-chart.tsx index 289c3d5..781d200 100644 --- a/dashboard/15-final/app/ui/dashboard/revenue-chart.tsx +++ b/dashboard/15-final/app/ui/dashboard/revenue-chart.tsx @@ -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 (

Revenue

-
+
{/* y-axis */}
diff --git a/dashboard/15-final/app/ui/dashboard/topnav.tsx b/dashboard/15-final/app/ui/dashboard/topnav.tsx index 485a697..9b8a09d 100644 --- a/dashboard/15-final/app/ui/dashboard/topnav.tsx +++ b/dashboard/15-final/app/ui/dashboard/topnav.tsx @@ -1,4 +1,4 @@ -import Search from "@/app/ui/dashboard/search"; +import Search from '@/app/ui/dashboard/search'; export default function TopNav() { return ( diff --git a/dashboard/15-final/app/ui/hero.tsx b/dashboard/15-final/app/ui/hero.tsx index 19d8550..359e812 100644 --- a/dashboard/15-final/app/ui/hero.tsx +++ b/dashboard/15-final/app/ui/hero.tsx @@ -1,4 +1,4 @@ -import BackgroundBlur from "@/app/ui/background-blur"; +import BackgroundBlur from '@/app/ui/background-blur'; export default function Hero() { return ( diff --git a/dashboard/15-final/app/ui/invoices/delete-invoice-button.tsx b/dashboard/15-final/app/ui/invoices/delete-invoice-button.tsx index 2b271f4..9b28e09 100644 --- a/dashboard/15-final/app/ui/invoices/delete-invoice-button.tsx +++ b/dashboard/15-final/app/ui/invoices/delete-invoice-button.tsx @@ -1,8 +1,8 @@ -"use client"; +'use client'; -import { TrashIcon } from "@heroicons/react/24/outline"; -import { useTransition } from "react"; -import { deleteInvoice } from "@/app/lib/actions"; +import { TrashIcon } from '@heroicons/react/24/outline'; +import { useTransition } from 'react'; +import { deleteInvoice } from '@/app/lib/actions'; export default function DeleteInvoice({ id }: { id: number }) { const [isPending, startTransition] = useTransition(); diff --git a/dashboard/15-final/app/ui/invoices/form.tsx b/dashboard/15-final/app/ui/invoices/form.tsx index 96295b3..377be38 100644 --- a/dashboard/15-final/app/ui/invoices/form.tsx +++ b/dashboard/15-final/app/ui/invoices/form.tsx @@ -1,8 +1,8 @@ -"use client"; +'use client'; -import { Invoice } from "@/app/lib/definitions"; -import { customers } from "@/app/lib/dummy-data"; -import { useState, FormEvent } from "react"; +import { Invoice } from '@/app/lib/definitions'; +import { customers } from '@/app/lib/dummy-data'; +import { useState, FormEvent } from 'react'; // import { addOrUpdateInvoice } from "@/app/lib/actions"; // export const dynamic = "force-dynamic"; @@ -11,7 +11,7 @@ export default function InvoiceForm({ type, invoice, }: { - type: "new" | "edit"; + type: 'new' | 'edit'; invoice?: Invoice; }) { // TO DO: Replace state and handleSubmit with a Server Action @@ -20,11 +20,11 @@ export default function InvoiceForm({ ); const initialCustomer = customer ? customer.id : 0; const initialAmount = invoice?.amount ? invoice.amount / 100 : 0; - const initialStatus = invoice?.status || "pending"; + const initialStatus = invoice?.status || 'pending'; const [selectedCustomer, setSelectedCustomer] = useState(initialCustomer); const [amount, setAmount] = useState(initialAmount); - const [status, setStatus] = useState<"pending" | "paid">(initialStatus); + const [status, setStatus] = useState<'pending' | 'paid'>(initialStatus); const handleSubmit = (e: FormEvent) => { e.preventDefault(); @@ -37,18 +37,18 @@ export default function InvoiceForm({ // These would be generated on the server id: 1, // Record ID will be automatically incremented status: status, // Default status for a new invoice - date: new Date().toISOString().split("T")[0], + date: new Date().toISOString().split('T')[0], }; // TODO: Add this invoice to the database - console.log("New Invoice:", newInvoice); + console.log('New Invoice:', newInvoice); } }; return (

- {type === "new" ? "New Invoice" : "Edit Invoice"} + {type === 'new' ? 'New Invoice' : 'Edit Invoice'}

@@ -89,7 +89,7 @@ export default function InvoiceForm({
- {type === "edit" ? ( + {type === 'edit' ? (