From b253e06e59ece6e0505b72bff82fc554da605d68 Mon Sep 17 00:00:00 2001 From: Xevion Date: Fri, 30 Dec 2022 16:10:05 -0600 Subject: [PATCH] Setup initial phototag page, add navbar with explicit AppWrapper component --- package.json | 2 + src/components/AppWrapper.tsx | 84 +++++++++++++++++++++++++++++++++++ src/pages/phototag.tsx | 63 ++++++++++++++++++++++++++ tailwind.config.cjs | 31 +++++++------ yarn.lock | 37 ++++++++++++++- 5 files changed, 203 insertions(+), 14 deletions(-) create mode 100644 src/components/AppWrapper.tsx create mode 100644 src/pages/phototag.tsx diff --git a/package.json b/package.json index 4a7e9f3..8fd612a 100644 --- a/package.json +++ b/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", diff --git a/src/components/AppWrapper.tsx b/src/components/AppWrapper.tsx new file mode 100644 index 0000000..07bd209 --- /dev/null +++ b/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 = ({children}: WrapperProps) => { + return
+ + {({open}) => ( + <> +
+
+
+ {/* Mobile menu button*/} + + Open main menu + {open ? ( + +
+
+
+
+ {navigation.map((item) => ( + + {item.name} + + ))} +
+
+
+
+
+ + +
+ {navigation.map((item) => ( + + + {item.name} + + + ))} +
+ + + )} + + {children} +
+} + +export default AppWrapper; \ No newline at end of file diff --git a/src/pages/phototag.tsx b/src/pages/phototag.tsx new file mode 100644 index 0000000..abd1f92 --- /dev/null +++ b/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 <> + + Phototag | Xevion.dev + + + +
+
+
+
+ Phototag +
+
+ + + +
+
+
+ +
+
+ +

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.

+

+ 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. +

+
    +
  • Simple, but configurable
    • +
  • Fully automatic
    • +
  • Leverages compression to reduce network load
    • +
  • Supports JPEG, PNG, GIF etc.
    • +
  • Supports IPTC metadata
    • +
  • Supports Adobe XMP sidecar files
    • +
+
+
+
+ + + +} + +export default PhototagPage; \ No newline at end of file diff --git a/tailwind.config.cjs b/tailwind.config.cjs index 969a253..58d660b 100644 --- a/tailwind.config.cjs +++ b/tailwind.config.cjs @@ -1,17 +1,22 @@ /** @type {import('tailwindcss').Config} */ module.exports = { - content: ["./src/**/*.{js,ts,jsx,tsx}"], - theme: { - extend: { - fontFamily: { - manrope: ["\"Manrope\"", "sans-serif"], - opensans: ["\"Open Sans\"", "sans-serif"], - inter: ["\"Inter\"", "sans-serif"], - mono: ["\"Roboto Mono\"", "monospace"], - raleway: ["\"Raleway\"", "sans-serif"], - roboto: ["\"Roboto\""], - }, + content: ["./src/**/*.{js,ts,jsx,tsx}"], + theme: { + extend: { + colors: { + zinc: { + 850: "#1D1D20" + } + }, + fontFamily: { + manrope: ["\"Manrope\"", "sans-serif"], + opensans: ["\"Open Sans\"", "sans-serif"], + inter: ["\"Inter\"", "sans-serif"], + mono: ["\"Roboto Mono\"", "monospace"], + raleway: ["\"Raleway\"", "sans-serif"], + roboto: ["\"Roboto\""], + }, + }, }, - }, - plugins: [], + plugins: [require('@tailwindcss/typography')], }; diff --git a/yarn.lock b/yarn.lock index 721462f..5eee2cd 100644 --- a/yarn.lock +++ b/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"