Complete code refactor, updated theming to match werefox-cafe site.

README.md

@@ -1,68 +1,38 @@
-This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
 
-## Available Scripts
+## Getting Started
 
-In the project directory, you can run:
+First, run the development server:
 
-### `npm start`
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+```
 
-Runs the app in the development mode.<br />
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
-Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
 
-The page will reload if you make edits.<br />
+You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file.
-You will also see any lint errors in the console.
 
-### `npm test`
+[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.ts`.
 
-Launches the test runner in the interactive watch mode.<br />
+The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
-See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
 
-### `npm run build`
+This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
-
-Builds the app for production to the `build` folder.<br />
-It correctly bundles React in production mode and optimizes the build for the best performance.
-
-The build is minified and the filenames include the hashes.<br />
-Your app is ready to be deployed!
-
-See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
-
-### `npm run eject`
-
-**Note: this is a one-way operation. Once you `eject`, you can’t go back!**
-
-If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
-
-Instead, it will copy all the configuration files and the transitive dependencies (Webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
-
-You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
 
 ## Learn More
 
-You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
+To learn more about Next.js, take a look at the following resources:
 
-To learn React, check out the [React documentation](https://reactjs.org/).
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
 
-### Code Splitting
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
 
-This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting
+## Deploy on Vercel
 
-### Analyzing the Bundle Size
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
 
-This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
-
-### Making a Progressive Web App
-
-This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app
-
-### Advanced Configuration
-
-This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration
-
-### Deployment
-
-This section has moved here: https://facebook.github.io/create-react-app/docs/deployment
-
-### `npm run build` fails to minify
-
-This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify

archive/package.json

@@ -1,7 +1,7 @@
 {
-  "name": "react-doodles",
+  "name": "letter-werefox-cafe",
-  "version": "0.1.0",
+  "version": "0.2.0",
-  "homepage": "https://letter.werefox.dev",
+  "homepage": "https://letter.werefox.cafe",
   "private": true,
   "dependencies": {
     "@testing-library/jest-dom": "^4.2.4",

deploy.sh

@@ -0,0 +1,36 @@
+#!/bin/bash
+
+set -xe
+
+APP_FOLDER=letter
+CONTAINER_NAME=letter-werefox-cafe
+
+MODE=$1
+x=$(APP_FOLDER=$APP_FOLDER MODE=$MODE docker compose ps | grep $CONTAINER_NAME | wc -l)
+
+if [ "$MODE" == "" ] || [ "$MODE" != "build" && "$MODE" != "dev" && "$MODE" != "start" ]; then
+    echo "Please use 'dev', 'build', or 'start' as an argument."
+    exit 1
+fi
+
+if [ $x -eq 1 ]; then
+    APP_FOLDER=$APP_FOLDER MODE=$MODE docker compose rm -sf
+fi
+
+if [ ! -d "$(pwd)/src/$APP_FOLDER" ]; then
+    APP_FOLDER=$APP_FOLDER MODE=$MODE docker compose run $CONTAINER_NAME sh -c "npm install --silent create-next-app && \
+        npx create-next-app /usr/src/app/$APP_FOLDER --ts --eslint && \
+        cd $APP_FOLDER && npm install tailwindcss autoprefixer &&  npx tailwindcss init -p && \
+        cd /usr/src/app && rm -rf node_modules package.json package-lock.json"
+fi
+
+
+APP_FOLDER=$APP_FOLDER MODE=$MODE docker compose run $CONTAINER_NAME sh -c "cd $APP_FOLDER && npm install --silent"
+APP_FOLDER=$APP_FOLDER MODE=$MODE docker compose run $CONTAINER_NAME sh -c "cd $APP_FOLDER && npx next telemetry disable"
+
+if [ "$MODE" == "build" ]; then
+    APP_FOLDER=$APP_FOLDER MODE=$MODE docker compose run $CONTAINER_NAME sh -c "cd $APP_FOLDER && npm run build"
+elif [ "$MODE" == "dev" ] || [ "$MODE" == "start" ]; then
+    APP_FOLDER=$APP_FOLDER MODE=$MODE docker compose up -d
+    APP_FOLDER=$APP_FOLDER MODE=$MODE docker compose logs -f
+fi

docker-compose.yml

@@ -0,0 +1,13 @@
+---
+version: "3"
+
+services:
+  "letter-werefox-cafe":
+    image: node:alpine
+    volumes:
+      - ./src:/usr/src/app/
+    ports:
+      - "3469:3000"
+    user: "1000:1000"
+    working_dir: "/usr/src/app"
+    command: 'sh -c "cd $APP_FOLDER && npm run $MODE"'

src/letter/.eslintrc.json

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

src/letter/.gitignore

@@ -0,0 +1,36 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

src/letter/cache/config.json

@@ -0,0 +1,6 @@
+{
+	"telemetry": {
+		"notifiedAt": "1676393087252",
+		"enabled": false
+	}
+}

src/letter/next.config.js

@@ -0,0 +1,6 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  reactStrictMode: true,
+}
+
+module.exports = nextConfig

src/letter/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "letter",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@next/font": "13.1.6",
+    "@types/node": "18.13.0",
+    "@types/react": "18.0.28",
+    "@types/react-dom": "18.0.10",
+    "autoprefixer": "^10.4.13",
+    "eslint": "8.34.0",
+    "eslint-config-next": "13.1.6",
+    "next": "13.1.6",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "tailwindcss": "^3.2.6",
+    "typescript": "4.9.5"
+  }
+}

src/letter/postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

src/letter/src/pages/_app.tsx

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

src/letter/src/pages/_document.tsx

@@ -0,0 +1,13 @@
+import { Html, Head, Main, NextScript } from 'next/document'
+
+export default function Document() {
+  return (
+    <Html lang="en">
+      <Head />
+      <body>
+        <Main />
+        <NextScript />
+      </body>
+    </Html>
+  )
+}

src/letter/src/pages/api/hello.ts

@@ -0,0 +1,13 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import type { NextApiRequest, NextApiResponse } from 'next'
+
+type Data = {
+  name: string
+}
+
+export default function handler(
+  req: NextApiRequest,
+  res: NextApiResponse<Data>
+) {
+  res.status(200).json({ name: 'John Doe' })
+}

src/letter/src/pages/index.tsx

@@ -0,0 +1,71 @@
+import Head from "next/head";
+import Image from "next/image";
+
+function MakePoem() {
+  return (
+    <div className="flex flex-col space-y-4 mx-4 py-4">
+      <div>
+        <p>
+          You are important. I wrote a small poem I hope will help you today.
+        </p>
+        <p>
+          It&#39;s not very long, but I&#39;m doing my best, and so are you.
+        </p>
+      </div>
+      <div>
+        <p>You are the moon, you are the stars</p>
+        <p>Im glad you&#39;re here, whomever you are.</p>
+        <p>We&#39;ve been through much; in this life it&#39;s true,</p>
+        <p>But in the end, you will come through.</p>
+      </div>
+      <div>
+        <p>Much like life, this poem is short</p>
+        <p>It doesn&#39;t always rhyme, or have a nice beat;</p>
+        <p>It might seem wrong, or incomplete;</p>
+        <p>It might go on, or so it seems;</p>
+        <p>It might feel like you&#39;re in a dream.</p>
+      </div>
+      <div>
+        <p>That&#39;s not the point, I know in my heart</p>
+        <p>I&#39;m glad you&#39;re here, whomever you are.</p>
+      </div>
+    </div>
+  );
+}
+
+export default function Letter() {
+  return (
+    <div className="min-h-screen font-nerd bg-alice-werefox-grey-light dark:bg-alice-werefox-grey">
+      <Head>
+        <title>Happy Valentine&#39;s Day</title>
+        <link rel="icon" href="/favicon.ico" />
+      </Head>
+      <div className="container space-y-4 mx-auto p-4">
+        <div className="flex justify-center py-8">
+          <div className="animate-growshrink">
+            <div className="relative h-48 w-48">
+              <Image
+                src="/images/heart-icon.png"
+                className=""
+                alt="logo"
+                fill
+              />
+            </div>
+          </div>
+        </div>
+        <div className="flex-col space-y-4">
+          <p className="mx-auto max-w-fit flex justify-center bg-alice-werefox-grey-lightest dark:bg-alice-werefox-grey-dark border-4 border-alice-werefox-red-dark dark:border-alice-werefox-red text-alice-werefox-red-dark dark:text-alice-werefox-red-light p-4">
+            You are important and loved
+          </p>
+
+          <details className="mx-auto max-w-fit space-y-4 bg-alice-werefox-grey-lightest dark:bg-alice-werefox-grey-dark border-4 border-alice-werefox-red-dark dark:border-alice-werefox-red text-alice-werefox-red-dark dark:text-alice-werefox-red-light p-4">
+            <summary className="flex justify-center border-4 bg-alice-werefox-grey-lightest dark:bg-alice-werefox-grey-dark border-4 border-alice-werefox-red-dark dark:border-alice-werefox-red text-alice-werefox-red-dark dark:text-alice-werefox-red-light p-4">
+              Tell Me More
+            </summary>
+            <MakePoem />
+          </details>
+        </div>
+      </div>
+    </div>
+  );
+}

src/letter/src/styles/globals.css

@@ -0,0 +1,8 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@font-face {
+  font-family: "DejaVuSansMono";
+  src: url("/fonts/DejaVuSansMono-Nerd-Font-Complete-Mono.ttf");
+}

src/letter/tailwind.config.js

@@ -0,0 +1,112 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    "./app/**/*.{js,ts,jsx,tsx}",
+    "./pages/**/*.{js,ts,jsx,tsx}",
+    "./components/**/*.{js,ts,jsx,tsx}",
+
+    // Or if using `src` directory:
+    "./src/**/*.{js,ts,jsx,tsx}",
+  ],
+  theme: {
+    extend: {
+      fontFamily: {
+        nerd: ["DejaVuSansMono"],
+      },
+      colors: {
+        "ada-werefox-cyan": {
+          light: "#AAFFFF",
+          DEFAULT: "#50FFFF",
+          dark: "#008888",
+        },
+        "ada-werefox-grey": {
+          lightest: "#EEE",
+          lighter: "#DBDBDB",
+          light: "#CCC",
+          DEFAULT: "#424242",
+          dark: "#242424",
+          darker: "#121212",
+        },
+        "skye-werefox-blue": {
+          light: "#94C2FF",
+          DEFAULT: "#75B1FF",
+          dark: "#0052B8",
+          darker: "#00377A",
+          darkest: "#00326B",
+        },
+        "skye-werefox-pink": {
+          DEFAULT: "#FF84CA",
+          dark: "#9E0054",
+          darker: "#8A0040",
+          darkest: "#75003F",
+        },
+        "skye-werefox-grey": {
+          lightest: "#EEE",
+          lighter: "#DBDBDB",
+          light: "#CCC",
+          DEFAULT: "#424242",
+          dark: "#242424",
+          darker: "#121212",
+        },
+        "alice-werefox-grey": {
+          lightest: "#EEE",
+          lighter: "#DBDBDB",
+          light: "#CCC",
+          DEFAULT: "#242424",
+          dark: "#121212",
+          darker: "#000",
+        },
+        "alice-werefox-red": {
+          light: "#E08587",
+          DEFAULT: "#c93439",
+          dark: "#800008",
+          darker: "#550006",
+          darkest: "#7A0000",
+        },
+        "alice-werefox-blue": {
+          light: "#9197F3",
+          DEFAULT: "#1b29e0",
+          dark: "#3300FF",
+          darker: "#2C00DB",
+          darkest: "#2700C2",
+        },
+      },
+      keyframes: {
+        growshrink: {
+          "0%": {
+            transform: "scale(0.5)",
+          },
+          "40%": {
+            transform: "scale(1.2)",
+          },
+          "60%": {
+            transform: "scale(1.2)",
+          },
+          "100% ": {
+            transform: "scale(0.5)",
+          },
+        },
+        wiggle: {
+          "0%, 100%": { transform: "rotate(-1deg)" },
+          "50%": { transform: "rotate(1deg)" },
+        },
+        jiggle: {
+          "0%, 100%": { transform: "rotate(0deg)" },
+          "25%": { transform: "rotate(-10deg)" },
+          "75%": { transform: "rotate(10deg)" },
+        },
+        yip: {
+          "0%, 100%": { transform: "scale(1, 1)" },
+          "50%": { transform: "scale(1.01, 1.01)" },
+        },
+      },
+      animation: {
+        wiggle: "wiggle 7s ease-in-out infinite",
+        jiggle: "jiggle 5s cubic-bezier(0.75,0.25,0.25,0.75) infinite",
+        yip: "yip 0.1s ease-in-out",
+        growshrink: "growshrink 2s cubic-bezier(1, 0, 0, 1) infinite",
+      },
+    },
+  },
+  plugins: [],
+};

src/letter/tsconfig.json

@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules"]
+}