feat: about page

package.json

@@ -48,7 +48,8 @@
         "zod": "^3.23.8"
     },
     "devDependencies": {
-        "@actcoding/eslint-config": "^0.0.8",
+        "@actcoding/eslint-config": "^0.0.9",
+        "@tailwindcss/typography": "^0.5.15",
         "@tanstack/eslint-plugin-query": "^5.61.4",
         "@tanstack/react-query-devtools": "^5.61.5",
         "@tanstack/router-devtools": "^1.70.0",
@@ -61,7 +62,7 @@
         "@types/react-dom": "^18.3.0",
         "@vitejs/plugin-react": "^4.3.2",
         "autoprefixer": "^10.4.20",
-        "eslint": "^9.11.1",
+        "eslint": "^9.16.0",
         "postcss": "^8.4.47",
         "tailwindcss": "^3.4.14",
         "type-fest": "^4.26.1",

src/components/AppLogo.tsx

@@ -0,0 +1,16 @@
+import { asset } from '@/lib/url'
+import { cn } from '@/lib/utils'
+import { HTMLAttributes } from 'react'
+
+type Props = HTMLAttributes<HTMLImageElement>
+
+export default function AppLogo(props: Props) {
+    return (
+        <img
+            {...props}
+            src={asset('icon-192.png')}
+            alt='mjml.app logo'
+            className={cn(props.className)}
+        />
+    )
+}

src/components/layout/Header.tsx

@@ -0,0 +1,34 @@
+import { Link } from '@tanstack/react-router'
+import AppLogo from '../AppLogo'
+import AppSettingsDialog from '../AppSettingsDialog'
+import AppTemplatesDialog from '../AppTemplatesDialog'
+
+export default function Header() {
+    return (
+        <header className="fixed inset-x-0 top-0 z-50 h-16 bg-mjml-500 text-white">
+            <div className="container mx-auto flex h-full flex-row flex-nowrap items-center gap-x-4">
+                <AppLogo className='size-12' />
+                <p className="text-2xl font-bold">
+                    mjml.app
+                </p>
+
+                <Link to='/'>
+                    Editor
+                </Link>
+                <Link to='/about'>
+                    About
+                </Link>
+
+                <div className="grow"></div>
+
+                <AppTemplatesDialog />
+                <AppSettingsDialog />
+                {/* <DarkModeToggle /> */}
+
+                <p className="ml-8 text-xs italic">
+                    Not affiliated with Mailjet or mjml.io
+                </p>
+            </div>
+        </header>
+    )
+}

src/pages/PageAbout.tsx

@@ -0,0 +1,40 @@
+import AppLogo from '@/components/AppLogo'
+import pkg from '@/package'
+
+export default function PageAbout() {
+    return (
+        <div className="w-screen overflow-y-scroll py-16">
+            <div className="container prose mx-auto max-w-lg space-y-8 md:prose-xl ">
+                <AppLogo className='mx-auto' />
+
+                <div className='flex flex-row items-end justify-center gap-x-2 *:m-0'>
+                    <h1>{pkg.name}</h1>
+                    <h3>{pkg.version}</h3>
+                </div>
+
+                <blockquote>{pkg.description}</blockquote>
+
+                <hr />
+
+                <p>
+                    This playground was crafted out of the need for rapid MJML prototyping.
+                </p>
+
+                <p>
+                    While the <a href="https://mjml.io/try-it-live">official editor</a> technically works,
+                    it is limited to the html/xml syntax. I&apos;m working with the json syntax at work and
+                    didn&apos;t find a editor that suited my likings. So I decided to build my own editor.
+                </p>
+
+                <p>Lorem ipsum</p>
+                <p>Lorem ipsum</p>
+                <p>Lorem ipsum</p>
+                <p>Lorem ipsum</p>
+                <p>Lorem ipsum</p>
+                <p>Lorem ipsum</p>
+                <p>Lorem ipsum</p>
+                <p>Lorem ipsum</p>
+            </div>
+        </div>
+    )
+}

src/routes/__root.tsx

@@ -1,30 +1,11 @@
-import AppSettingsDialog from '@/components/AppSettingsDialog'
-import AppTemplatesDialog from '@/components/AppTemplatesDialog'
 import Devtools from '@/components/Devtools'
+import Header from '@/components/layout/Header'
 import { Toaster } from '@/components/ui/toaster'
-import { asset } from '@/lib/url'
 import { createRootRoute, Outlet } from '@tanstack/react-router'
 
 export const Route = createRootRoute({
     component: () => (<>
-        <header className="fixed inset-x-0 top-0 z-50 h-16 bg-mjml-500 text-white">
-            <div className="container mx-auto flex h-full flex-row flex-nowrap items-center gap-x-4">
-                <img src={asset('icon-192.png')} className='size-12' />
-                <p className="text-2xl font-bold">
-                    mjml.app
-                </p>
-
-                <div className="grow"></div>
-
-                <AppTemplatesDialog />
-                <AppSettingsDialog />
-                {/* <DarkModeToggle /> */}
-
-                <p className="ml-8 text-xs italic">
-                    Not affiliated with Mailjet or mjml.io
-                </p>
-            </div>
-        </header>
+        <Header />
 
         <main className="flex h-full flex-row flex-nowrap pt-16">
             <Outlet />

src/routes/about.lazy.tsx

@@ -0,0 +1,6 @@
+import PageAbout from '@/pages/PageAbout'
+import { createLazyFileRoute } from '@tanstack/react-router'
+
+export const Route = createLazyFileRoute('/about')({
+    component: () => <PageAbout />,
+})

tailwind.config.js

@@ -1,4 +1,5 @@
 import pluginAnimate from 'tailwindcss-animate'
+import pluginTypography from '@tailwindcss/typography'
 
 /** @type {import('tailwindcss').Config} */
 export default {
@@ -73,5 +74,6 @@ export default {
     },
     plugins: [
         pluginAnimate,
+        pluginTypography,
     ],
 }