diff --git a/app/awesome/layout.tsx b/app/awesome/layout.tsx new file mode 100644 index 0000000..fb9be94 --- /dev/null +++ b/app/awesome/layout.tsx @@ -0,0 +1,15 @@ +export default function Layout({ children }: { children: React.ReactNode }) { + return ( +
+
+

+ Awesome things happening! +

+
+ Booya! +
+
+ {children} +
+ ); +} diff --git a/app/awesome/mix/page.tsx b/app/awesome/mix/page.tsx new file mode 100644 index 0000000..72c6c64 --- /dev/null +++ b/app/awesome/mix/page.tsx @@ -0,0 +1,19 @@ +export const metadata = { + title: 'Awesome Mixes!', +}; + +export default function Page() { + return ( + <> +
+

+ Awesome Mixes! +

+
+ Awesome Sauce! +
+
+
+ + ); +} diff --git a/app/awesome/mix/vol-1/page.tsx b/app/awesome/mix/vol-1/page.tsx new file mode 100644 index 0000000..e8e4ef0 --- /dev/null +++ b/app/awesome/mix/vol-1/page.tsx @@ -0,0 +1,19 @@ +export const metadata = { + title: 'Awesome Mix Vol. 2', +}; + +export default function Page() { + return ( + <> +
+

+ Awesome Mix Vol. 2 +

+
+ Awe yeah! +
+
+
+ + ); +} diff --git a/app/awesome/mix/vol-2/page.tsx b/app/awesome/mix/vol-2/page.tsx new file mode 100644 index 0000000..e04c9be --- /dev/null +++ b/app/awesome/mix/vol-2/page.tsx @@ -0,0 +1,19 @@ +export const metadata = { + title: 'Awesome Mix Vol. 1', +}; + +export default function Page() { + return ( + <> +
+

+ Awesome Mix Vol. 1 +

+
+ Woo +
+
+
+ + ); +} diff --git a/app/awesome/page.tsx b/app/awesome/page.tsx new file mode 100644 index 0000000..ee857eb --- /dev/null +++ b/app/awesome/page.tsx @@ -0,0 +1,19 @@ +export const metadata = { + title: 'I am awesome!', +}; + +export default function Home() { + return ( + <> +
+

+ I am awesome! +

+
+ Booya! +
+
+
+ + ); +} diff --git a/app/awesome/sauce/page.tsx b/app/awesome/sauce/page.tsx new file mode 100644 index 0000000..b0b7e5a --- /dev/null +++ b/app/awesome/sauce/page.tsx @@ -0,0 +1,19 @@ +export const metadata = { + title: 'I am awesome sauce!', +}; + +export default function Page() { + return ( + <> +
+

+ I am awesome sauce! +

+
+ Awesome Sauce! +
+
+
+ + ); +} diff --git a/app/awesome/totally/page.tsx b/app/awesome/totally/page.tsx new file mode 100644 index 0000000..ab74dea --- /dev/null +++ b/app/awesome/totally/page.tsx @@ -0,0 +1,19 @@ +export const metadata = { + title: `You're Totally Awesome!`, +}; + +export default function Page() { + return ( + <> +
+

+ {`You're Totally Awesome!`} +

+
+ Awesome Sauce! +
+
+
+ + ); +} diff --git a/app/breadcrumbs.tsx b/app/breadcrumbs.tsx new file mode 100644 index 0000000..e9a0ea6 --- /dev/null +++ b/app/breadcrumbs.tsx @@ -0,0 +1,70 @@ +'use client'; + +import Link from 'next/link'; +import { useSelectedLayoutSegments } from 'next/navigation'; +import { useMemo } from 'react'; + +export default function BreadCrumbs() { + const segments = useSelectedLayoutSegments(); + + const crumbs = useMemo(() => { + let curPath = '/'; + + return [ + { + name: 'Home', + href: curPath, + current: segments.length === 0, + }, + ...segments + .filter( + (segment) => !segment.startsWith('(') && !segment.startsWith('[') + ) + .map((segment, index) => { + curPath += segment; + + return { + name: segment, + href: curPath, + current: index === segments.length - 1, + }; + }), + ]; + }, [segments]); + + console.log(segments); + + return ( + + ); +} diff --git a/app/interactive/button.tsx b/app/interactive/button.tsx new file mode 100644 index 0000000..1a9c17a --- /dev/null +++ b/app/interactive/button.tsx @@ -0,0 +1,22 @@ +'use client'; + +import { useState } from 'react'; + +export default function Button() { + const [isSpun, setIsSpun] = useState(false); + + return ( + + ); +} diff --git a/app/interactive/page.tsx b/app/interactive/page.tsx new file mode 100644 index 0000000..43cb791 --- /dev/null +++ b/app/interactive/page.tsx @@ -0,0 +1,25 @@ +// transition-transform + +import Button from './button'; + +export const metadata = { + title: 'I am awesome!', +}; + +export default function Home() { + return ( + <> +
+

+ Interactivity +

+
+ Woo! +
+
+
+
+ + ); +} diff --git a/app/interactive/x-page.tsx b/app/interactive/x-page.tsx new file mode 100644 index 0000000..196b408 --- /dev/null +++ b/app/interactive/x-page.tsx @@ -0,0 +1,30 @@ +// This won't work! + +export const metadata = { + title: 'I am awesome!', +}; + +export default function Home() { + return ( + <> +
+

+ Interactivity +

+
+ Woo! +
+
+
+ +
+ + ); +} diff --git a/app/layout.tsx b/app/layout.tsx index 02020db..dc16058 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -1,11 +1,16 @@ +import Link from 'next/link'; import './globals.css'; import { Inter } from 'next/font/google'; +import BreadCrumbs from './breadcrumbs'; const inter = Inter({ subsets: ['latin'] }); export const metadata = { - title: 'Create Next App', - description: 'Generated by create next app', + title: { + template: '%s | Next.js App Router Example', + default: 'Home Page', + }, + description: `We're doing things!`, }; export default function RootLayout({ @@ -17,15 +22,54 @@ export default function RootLayout({
-
+

Next.js App Router Example

-
Hello!
+
+ {new Date().toLocaleTimeString()} +
+ {children} +
+ +
diff --git a/app/page.tsx b/app/page.tsx index 7b0fb91..2abf9df 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -1,12 +1,15 @@ -export default function Home() { +export default function Page() { return ( -
+ <>

I am the home page!

-
We're home!
+
+ We're home! +
-
+
+ ); } diff --git a/package.json b/package.json index 14bced9..f23c6da 100644 --- a/package.json +++ b/package.json @@ -9,6 +9,8 @@ "lint": "next lint" }, "dependencies": { + "@faker-js/faker": "^8.0.2", + "@tailwindcss/typography": "^0.5.9", "@types/node": "20.2.5", "@types/react": "18.2.7", "@types/react-dom": "18.2.4", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 79fe5ed..476e494 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -5,6 +5,12 @@ settings: excludeLinksFromLockfile: false dependencies: + '@faker-js/faker': + specifier: ^8.0.2 + version: 8.0.2 + '@tailwindcss/typography': + specifier: ^0.5.9 + version: 0.5.9(tailwindcss@3.3.2) '@types/node': specifier: 20.2.5 version: 20.2.5 @@ -93,6 +99,11 @@ packages: engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} dev: false + /@faker-js/faker@8.0.2: + resolution: {integrity: sha512-Uo3pGspElQW91PCvKSIAXoEgAUlRnH29sX2/p89kg7sP1m2PzCufHINd0FhTXQf6DYGiUlVncdSPa2F9wxed2A==} + engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0, npm: '>=6.14.13'} + dev: false + /@humanwhocodes/config-array@0.11.10: resolution: {integrity: sha512-KVVjQmNUepDVGXNuoRRdmmEjruj0KfiGSbS8LVc12LMsWDQzRXJ0qdhN8L8uUigKpfEHRhlaQFY0ib1tnUbNeQ==} engines: {node: '>=10.10.0'} @@ -281,6 +292,18 @@ packages: tslib: 2.5.2 dev: false + /@tailwindcss/typography@0.5.9(tailwindcss@3.3.2): + resolution: {integrity: sha512-t8Sg3DyynFysV9f4JDOVISGsjazNb48AeIYQwcL+Bsq5uf4RYL75C1giZ43KISjeDGBaTN3Kxh7Xj/vRSMJUUg==} + peerDependencies: + tailwindcss: '>=3.0.0 || insiders' + dependencies: + lodash.castarray: 4.4.0 + lodash.isplainobject: 4.0.6 + lodash.merge: 4.6.2 + postcss-selector-parser: 6.0.10 + tailwindcss: 3.3.2 + dev: false + /@types/json5@0.0.29: resolution: {integrity: sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==} dev: false @@ -1779,6 +1802,14 @@ packages: p-locate: 5.0.0 dev: false + /lodash.castarray@4.4.0: + resolution: {integrity: sha512-aVx8ztPv7/2ULbArGJ2Y42bG1mEQ5mGjpdvrbJcJFU3TbYybe+QlLS4pst9zV52ymy2in1KpFPiZnAOATxD4+Q==} + dev: false + + /lodash.isplainobject@4.0.6: + resolution: {integrity: sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA==} + dev: false + /lodash.merge@4.6.2: resolution: {integrity: sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==} dev: false @@ -2161,6 +2192,14 @@ packages: postcss-selector-parser: 6.0.13 dev: false + /postcss-selector-parser@6.0.10: + resolution: {integrity: sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==} + engines: {node: '>=4'} + dependencies: + cssesc: 3.0.0 + util-deprecate: 1.0.2 + dev: false + /postcss-selector-parser@6.0.13: resolution: {integrity: sha512-EaV1Gl4mUEV4ddhDnv/xtj7sxwrwxdetHdWUGnT4VJQf+4d05v6lHYZr8N573k5Z0BViss7BDhfWtKS3+sfAqQ==} engines: {node: '>=4'} diff --git a/tailwind.config.js b/tailwind.config.js index 8c4d1b2..8672e0d 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -14,5 +14,5 @@ module.exports = { }, }, }, - plugins: [], -} + plugins: [require('@tailwindcss/typography')], +};