Setup initial phototag page, add navbar with explicit AppWrapper component

package.json

@@ -9,7 +9,9 @@
     "start": "next start"
   },
   "dependencies": {
+    "@headlessui/react": "^1.7.7",
     "@kodingdotninja/use-tailwind-breakpoint": "^0.0.5",
+    "@tailwindcss/typography": "^0.5.8",
     "@tanstack/react-query": "^4.16.0",
     "@trpc/client": "^10.0.0",
     "@trpc/next": "^10.0.0",

src/components/AppWrapper.tsx

@@ -0,0 +1,84 @@
+import {FunctionComponent, ReactNode} from "react";
+import {Disclosure} from '@headlessui/react'
+import {HiBars3, HiXMark} from "react-icons/hi2";
+import {classNames} from "../utils/helpers";
+import Link from "next/link";
+
+const navigation = [
+    {name: 'Home', href: '/', current: true},
+    {name: 'Projects', href: '/projects', current: false},
+    {name: 'Contact', href: '/contact', current: false},
+]
+
+type WrapperProps = {
+    children: ReactNode | ReactNode[];
+};
+
+const AppWrapper: FunctionComponent<WrapperProps> = ({children}: WrapperProps) => {
+    return <div className="min-h-screen bg-zinc-800 text-zinc-50">
+        <Disclosure as="nav" className="bg-zinc-900">
+            {({open}) => (
+                <>
+                    <div className="mx-auto max-w-7xl px-2 sm:px-6 lg:px-8">
+                        <div className="relative flex h-16 items-center justify-between">
+                            <div className="absolute inset-y-0 left-0 flex items-center sm:hidden">
+                                {/* Mobile menu button*/}
+                                <Disclosure.Button
+                                    className="inline-flex items-center justify-center rounded-md p-2 text-gray-400 hover:bg-zinc-700 hover:text-white focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white">
+                                    <span className="sr-only">Open main menu</span>
+                                    {open ? (
+                                        <HiXMark className="block h-6 w-6" aria-hidden="true"/>
+                                    ) : (
+                                        <HiBars3 className="block h-6 w-6" aria-hidden="true"/>
+                                    )}
+                                </Disclosure.Button>
+                            </div>
+                            <div className="flex flex-1 items-center justify-center sm:items-stretch sm:justify-start">
+                                <div className="hidden sm:ml-6 sm:block">
+                                    <div className="flex space-x-4">
+                                        {navigation.map((item) => (
+                                            <Link
+                                                key={item.name}
+                                                href={item.href}
+                                                className={classNames(
+                                                    item.current ? 'bg-zinc-900 text-white' : 'text-gray-300 hover:bg-zinc-700 hover:text-white',
+                                                    'px-3 py-2 rounded-md text-sm font-medium'
+                                                )}
+                                                aria-current={item.current ? 'page' : undefined}
+                                            >
+                                                {item.name}
+                                            </Link>
+                                        ))}
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <Disclosure.Panel className="sm:hidden">
+                        <div className="space-y-1 px-2 pt-2 pb-3">
+                            {navigation.map((item) => (
+                                <Link href={item.href}>
+                                    <Disclosure.Button
+                                        key={item.name}
+                                        as="a"
+                                        className={classNames(
+                                            item.current ? 'bg-zinc-900 text-white' : 'text-gray-300 hover:bg-zinc-700 hover:text-white',
+                                            'block px-3 py-2 rounded-md text-base font-medium'
+                                        )}
+                                        aria-current={item.current ? 'page' : undefined}
+                                    >
+                                        {item.name}
+                                    </Disclosure.Button>
+                                </Link>
+                            ))}
+                        </div>
+                    </Disclosure.Panel>
+                </>
+            )}
+        </Disclosure>
+        {children}
+    </div>
+}
+
+export default AppWrapper;

src/pages/phototag.tsx

@@ -0,0 +1,63 @@
+import {NextPage} from "next";
+import Head from "next/head";
+import Image from "next/image";
+import {BsGithub} from "react-icons/bs";
+import Link from "next/link";
+import AppWrapper from "../components/AppWrapper";
+
+const PhototagPage: NextPage = () => {
+    return <>
+        <Head>
+            <title>Phototag | Xevion.dev</title>
+        </Head>
+        <AppWrapper>
+
+            <div className="bg-zinc-900 text-zinc-50 w-full overflow-auto h-full min-h-screen flex justify-center">
+                <div className="relative my-10 p-3 px-6 w-full max-w-screen-md">
+                    <div className="pb-2 flex justify-between">
+                        <div className="text-2xl font-semibold">
+                            Phototag
+                        </div>
+                        <div className="flex items-center justify-end space-x-1.5">
+                            <Link href="https://github.com/Xevion/phototag" target="_blank">
+                                <BsGithub className="w-5 h-5 hover:text-zinc-200"/>
+                            </Link>
+                        </div>
+                    </div>
+                    <div className="relative">
+                        <Image fill sizes="100vw" src="/phototag.png" alt=""
+                               className="!relative pointer-events-none min-h-[10rem] rounded-md object-cover"/>
+                    </div>
+                    <div className="mt-3 w-full prose prose-invert prose-lg">
+
+                        <p>Phototag is a powerful tool that helps you quickly and easily add rich, descriptive tags to
+                            your
+                            photos. Using Google's Vision API, Phototag automatically generates tags based on the visual
+                            content
+                            of your photos, making it easier than ever to organize and find your photos.</p>
+                        <p>
+                            With support for IPTC metadata and Adobe XMP Sidecar files, you can easily integrate
+                            Phototag
+                            into
+                            your existing
+                            workflow on Windows. Whether you're a professional photographer or a casual snapshot taker,
+                            Phototag
+                            is the perfect tool for adding clarity and context to your photos.
+                        </p>
+                        <ul className="md:columns-2">
+                            <li>Simple, but configurable</li>
+                            <li>Fully automatic</li>
+                            <li>Leverages compression to reduce network load</li>
+                            <li>Supports JPEG, PNG, GIF etc.</li>
+                            <li>Supports IPTC metadata</li>
+                            <li>Supports Adobe XMP sidecar files</li>
+                        </ul>
+                    </div>
+                </div>
+            </div>
+        </AppWrapper>
+
+    </>
+}
+
+export default PhototagPage;

tailwind.config.cjs

@@ -1,17 +1,22 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  content: ["./src/**/*.{js,ts,jsx,tsx}"],
+    content: ["./src/**/*.{js,ts,jsx,tsx}"],
-  theme: {
+    theme: {
-    extend: {
+        extend: {
-      fontFamily: {
+            colors: {
-        manrope: ["\"Manrope\"", "sans-serif"],
+              zinc: {
-        opensans: ["\"Open Sans\"", "sans-serif"],
+                  850: "#1D1D20"
-        inter: ["\"Inter\"", "sans-serif"],
+              }
-        mono: ["\"Roboto Mono\"", "monospace"],
+            },
-        raleway: ["\"Raleway\"", "sans-serif"],
+            fontFamily: {
-        roboto: ["\"Roboto\""],
+                manrope: ["\"Manrope\"", "sans-serif"],
-      },
+                opensans: ["\"Open Sans\"", "sans-serif"],
+                inter: ["\"Inter\"", "sans-serif"],
+                mono: ["\"Roboto Mono\"", "monospace"],
+                raleway: ["\"Raleway\"", "sans-serif"],
+                roboto: ["\"Roboto\""],
+            },
+        },
     },
-  },
+    plugins: [require('@tailwindcss/typography')],
-  plugins: [],
 };

yarn.lock

@@ -32,6 +32,13 @@
     minimatch "^3.1.2"
     strip-json-comments "^3.1.1"
 
+"@headlessui/react@^1.7.7":
+  version "1.7.7"
+  resolved "https://registry.yarnpkg.com/@headlessui/react/-/react-1.7.7.tgz#d6f8708d8943ae8ebb1a6929108234e4515ac7e8"
+  integrity sha512-BqDOd/tB9u2tA0T3Z0fn18ktw+KbVwMnkxxsGPIH2hzssrQhKB5n/6StZOyvLYP/FsYtvuXfi9I0YowKPv2c1w==
+  dependencies:
+    client-only "^0.0.1"
+
 "@humanwhocodes/config-array@^0.11.6":
   version "0.11.7"
   resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.11.7.tgz#38aec044c6c828f6ed51d5d7ae3d9b9faf6dbb0f"
@@ -166,6 +173,16 @@
   dependencies:
     tslib "^2.4.0"
 
+"@tailwindcss/typography@^0.5.8":
+  version "0.5.8"
+  resolved "https://registry.yarnpkg.com/@tailwindcss/typography/-/typography-0.5.8.tgz#8fb31db5ab0590be6dfa062b1535ac86ad9d12bf"
+  integrity sha512-xGQEp8KXN8Sd8m6R4xYmwxghmswrd0cPnNI2Lc6fmrC3OojysTBJJGSIVwPV56q4t6THFUK3HJ0EaWwpglSxWw==
+  dependencies:
+    lodash.castarray "^4.4.0"
+    lodash.isplainobject "^4.0.6"
+    lodash.merge "^4.6.2"
+    postcss-selector-parser "6.0.10"
+
 "@tanstack/query-core@4.20.2":
   version "4.20.2"
   resolved "https://registry.yarnpkg.com/@tanstack/query-core/-/query-core-4.20.2.tgz#147f7dc7eecd0e21fea4926c0dd16163a8170ef9"
@@ -640,7 +657,7 @@ chownr@^1.1.1:
   resolved "https://registry.yarnpkg.com/chownr/-/chownr-1.1.4.tgz#6fc9d7b42d32a583596337666e7d08084da2cc6b"
   integrity sha512-jJ0bqzaylmJtVnNgzTeSOs8DPavpbYgEr/b0YL8/2GO3xJEhInFmhKMUnEJQjZumK7KXGFhUy89PrsJWlakBVg==
 
-client-only@0.0.1:
+client-only@0.0.1, client-only@^0.0.1:
   version "0.0.1"
   resolved "https://registry.yarnpkg.com/client-only/-/client-only-0.0.1.tgz#38bba5d403c41ab150bff64a95c85013cf73bca1"
   integrity sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==
@@ -1678,6 +1695,16 @@ locate-path@^6.0.0:
   dependencies:
     p-locate "^5.0.0"
 
+lodash.castarray@^4.4.0:
+  version "4.4.0"
+  resolved "https://registry.yarnpkg.com/lodash.castarray/-/lodash.castarray-4.4.0.tgz#c02513515e309daddd4c24c60cfddcf5976d9115"
+  integrity sha512-aVx8ztPv7/2ULbArGJ2Y42bG1mEQ5mGjpdvrbJcJFU3TbYybe+QlLS4pst9zV52ymy2in1KpFPiZnAOATxD4+Q==
+
+lodash.isplainobject@^4.0.6:
+  version "4.0.6"
+  resolved "https://registry.yarnpkg.com/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz#7c526a52d89b45c45cc690b88163be0497f550cb"
+  integrity sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA==
+
 lodash.merge@^4.6.2:
   version "4.6.2"
   resolved "https://registry.yarnpkg.com/lodash.merge/-/lodash.merge-4.6.2.tgz#558aa53b43b661e1925a0afdfa36a9a1085fe57a"
@@ -2268,6 +2295,14 @@ postcss-nested@6.0.0:
   dependencies:
     postcss-selector-parser "^6.0.10"
 
+postcss-selector-parser@6.0.10:
+  version "6.0.10"
+  resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.0.10.tgz#79b61e2c0d1bfc2602d549e11d0876256f8df88d"
+  integrity sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==
+  dependencies:
+    cssesc "^3.0.0"
+    util-deprecate "^1.0.2"
+
 postcss-selector-parser@^6.0.10:
   version "6.0.11"
   resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.0.11.tgz#2e41dc39b7ad74046e1615185185cd0b17d0c8dc"