add: routing and seo files (#38)

.nvmrc

@@ -1 +1 @@
-18
+20

.prettierignore

@@ -10,4 +10,3 @@ out
 node_modules
 .next
 build
-.contentlayer

.vscode/extensions.json

@@ -0,0 +1,3 @@
+{
+  "recommendations": ["bradlc.vscode-tailwindcss"]
+}

.vscode/settings.json

@@ -0,0 +1,6 @@
+{
+  "tailwindCSS.experimental.classRegex": [
+    ["cva\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"],
+    ["cn\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"]
+  ]
+}

app/error.tsx

@@ -0,0 +1,26 @@
+'use client'
+
+import { useEffect } from 'react'
+
+import { Button } from '@/components/ui/button'
+
+export default function Error({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string }
+  reset: () => void
+}) {
+  useEffect(() => {
+    console.error(error)
+  }, [error])
+
+  return (
+    <div className="flex h-screen flex-col items-center justify-center text-center">
+      <h2 className="scroll-m-20 pb-2 text-3xl font-semibold tracking-tight transition-colors first:mt-0">
+        Something went wrong!
+      </h2>
+      <Button onClick={() => reset()}>Try again</Button>
+    </div>
+  )
+}

app/layout.tsx

@@ -2,29 +2,29 @@ import '@/app/globals.css'
 
 import type { Metadata } from 'next'
 
+import { siteConfig } from '@/config/site'
 import { fontSans } from '@/lib/fonts'
 import { cn } from '@/lib/utils'
 
-const url = 'https://next-station-starter.vercel.app'
-const title = 'Next Station Starter'
-const description = 'An image gallery starter built with Next.js'
-
 export const metadata: Metadata = {
-  metadataBase: new URL(url),
-  title: title,
-  description: description,
+  metadataBase: new URL(siteConfig.url),
+  title: {
+    default: siteConfig.name,
+    template: `%s | ${siteConfig.name}`,
+  },
+  description: siteConfig.description,
   icons: {
     icon: '/favicon.ico',
   },
   openGraph: {
-    title: title,
-    description: description,
-    url: url,
+    title: siteConfig.name,
+    description: siteConfig.description,
+    url: siteConfig.url,
     locale: 'en_US',
     type: 'website',
   },
   twitter: {
-    title: title,
+    title: siteConfig.name,
     card: 'summary_large_image',
   },
 }

app/not-found.tsx

@@ -0,0 +1,21 @@
+import Link from 'next/link'
+
+import { buttonVariants } from '@/components/ui/button'
+
+export default function NotFound() {
+  return (
+    <div className="flex h-screen flex-col items-center justify-center text-center">
+      <p className="text-sm text-muted-foreground">404</p>
+      <h2 className="scroll-m-20 pb-2 text-3xl font-semibold tracking-tight transition-colors first:mt-0">
+        Page not found
+      </h2>
+      <p className="mb-4 leading-7 [&:not(:first-child)]:mt-6">
+        Sorry, we could not find the page you are looking for.
+      </p>
+      <Link href="/" className={buttonVariants()}>
+        {' '}
+        Go back home
+      </Link>
+    </div>
+  )
+}

app/page.tsx

@@ -1,14 +1,12 @@
+import Link from 'next/link'
+
+import { siteConfig } from '@/config/site'
 import Cobe from '@/components/Cobe'
 import Gallery from '@/components/Gallery'
 
-const title = 'NEXT STATION STARTER'
-const description = 'An image gallery starter built with Next.js.'
-const author = 'AREA44'
-const authorURL = 'https://github.com/AREA44/next-station-starter'
-
 export default function Home() {
   return (
-    <>
+    <div>
       <main className="mx-auto max-w-[1960px] p-4">
         <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4">
           <div className="relative col-span-1 row-span-3 flex flex-col items-center justify-end gap-4 overflow-hidden rounded-lg border bg-card px-6 pb-16 pt-64 text-center after:pointer-events-none after:absolute after:inset-0 after:rounded-lg sm:col-span-2 lg:col-span-1 lg:row-span-2 lg:pt-0">
@@ -18,30 +16,32 @@ export default function Home() {
               </span>
               <span className="absolute inset-x-0 bottom-0 h-[400px] bg-gradient-to-b from-card/0 via-card to-card"></span>
             </div>
-            <h1 className="scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl">
-              {title}
+            <h1 className="scroll-m-20 text-4xl font-extrabold uppercase tracking-tight lg:text-5xl">
+              {siteConfig.name}
             </h1>
-            <p className="text-xl text-muted-foreground">{description}</p>
+            <p className="text-xl text-muted-foreground">
+              {siteConfig.description}
+            </p>
           </div>
           <Gallery />
         </div>
       </main>
       <footer className="border-t py-6 md:px-8 md:py-0">
         <div className="container flex flex-col items-center justify-between gap-4 md:h-24 md:flex-row">
           <p className="text-center text-sm leading-loose text-muted-foreground">
-            Made with love by{' '}
-            <a
-              href={authorURL}
+            Built by AREA44. The source code is available on{' '}
+            <Link
+              href={siteConfig.links.github}
               target="_blank"
               className="font-medium underline underline-offset-4"
               rel="noreferrer"
             >
-              {author}
-            </a>
+              GitHub
+            </Link>
             .
           </p>
         </div>
       </footer>
-    </>
+    </div>
   )
 }

app/robots.ts

@@ -0,0 +1,13 @@
+import { MetadataRoute } from 'next'
+
+import { siteConfig } from '@/config/site'
+
+export default function robots(): MetadataRoute.Robots {
+  return {
+    rules: {
+      userAgent: '*',
+      allow: '/',
+    },
+    sitemap: `${siteConfig.url}/sitemap.xml`,
+  }
+}

app/sitemap.ts

@@ -0,0 +1,14 @@
+import { MetadataRoute } from 'next'
+
+import { siteConfig } from '@/config/site'
+
+export default function sitemap(): MetadataRoute.Sitemap {
+  return [
+    {
+      url: siteConfig.url,
+      lastModified: new Date(),
+      changeFrequency: 'yearly',
+      priority: 1,
+    },
+  ]
+}

components/ui/button.tsx

@@ -0,0 +1,56 @@
+import * as React from 'react'
+import { Slot } from '@radix-ui/react-slot'
+import { cva, type VariantProps } from 'class-variance-authority'
+
+import { cn } from '@/lib/utils'
+
+const buttonVariants = cva(
+  'inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
+  {
+    variants: {
+      variant: {
+        default: 'bg-primary text-primary-foreground hover:bg-primary/90',
+        destructive:
+          'bg-destructive text-destructive-foreground hover:bg-destructive/90',
+        outline:
+          'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
+        secondary:
+          'bg-secondary text-secondary-foreground hover:bg-secondary/80',
+        ghost: 'hover:bg-accent hover:text-accent-foreground',
+        link: 'text-primary underline-offset-4 hover:underline',
+      },
+      size: {
+        default: 'h-10 px-4 py-2',
+        sm: 'h-9 rounded-md px-3',
+        lg: 'h-11 rounded-md px-8',
+        icon: 'h-10 w-10',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  },
+)
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : 'button'
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    )
+  },
+)
+Button.displayName = 'Button'
+
+export { Button, buttonVariants }

components/ui/dialog.tsx

@@ -10,11 +10,8 @@ const Dialog = DialogPrimitive.Root
 
 const DialogTrigger = DialogPrimitive.Trigger
 
-const DialogPortal = ({
-  className,
-  ...props
-}: DialogPrimitive.DialogPortalProps) => (
-  <DialogPrimitive.Portal className={cn(className)} {...props} />
+const DialogPortal = ({ ...props }: DialogPrimitive.DialogPortalProps) => (
+  <DialogPrimitive.Portal {...props} />
 )
 DialogPortal.displayName = DialogPrimitive.Portal.displayName
 

config/site.ts

@@ -0,0 +1,10 @@
+export const siteConfig = {
+  name: 'Next Station Starter',
+  url: 'https://next-station-starter.vercel.app',
+  description: 'An image gallery starter built with Next.js.',
+  links: {
+    github: 'https://github.com/AREA44/next-station-starter',
+  },
+}
+
+export type SiteConfig = typeof siteConfig

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@area44/next-station-starter",
-  "version": "23.9.28",
+  "version": "23.9.30",
   "private": true,
   "description": "An image gallery starter built with Next.js",
   "author": "AREA44",
@@ -14,14 +14,16 @@
   },
   "dependencies": {
     "@radix-ui/react-aspect-ratio": "^1.0.3",
-    "@radix-ui/react-dialog": "^1.0.4",
+    "@radix-ui/react-dialog": "^1.0.5",
+    "@radix-ui/react-slot": "^1.0.2",
     "autoprefixer": "^10.4.16",
+    "class-variance-authority": "^0.7.0",
     "clsx": "^2.0.0",
     "cobe": "^0.6.3",
-    "glob": "^10.3.6",
+    "glob": "^10.3.10",
     "lucide-react": "^0.279.0",
     "next": "^13.5.3",
-    "postcss": "^8.4.30",
+    "postcss": "^8.4.31",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "sharp": "^0.32.6",
@@ -31,18 +33,18 @@
   },
   "devDependencies": {
     "@ianvs/prettier-plugin-sort-imports": "^4.1.0",
-    "@types/node": "^20.6.4",
-    "@types/react": "^18.2.22",
-    "@types/react-dom": "^18.2.7",
-    "@typescript-eslint/parser": "^6.7.2",
+    "@types/node": "^20.8.0",
+    "@types/react": "^18.2.23",
+    "@types/react-dom": "^18.2.8",
+    "@typescript-eslint/parser": "^6.7.3",
     "eslint": "^8.50.0",
-    "eslint-config-next": "^13.5.2",
+    "eslint-config-next": "^13.5.3",
     "eslint-config-prettier": "^9.0.0",
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-tailwindcss": "^3.13.0",
     "prettier": "^3.0.3",
     "prettier-plugin-tailwindcss": "^0.5.4",
     "typescript": "^5.2.2"
   },
-  "packageManager": "pnpm@8.7.6"
+  "packageManager": "pnpm@8.8.0"
 }