Auth tweaks

README.md

@@ -1,122 +1,72 @@
-# README
+# Portfolio Website
+## Setup
+### Domain Records
+Create two A records, one for the web side of the website and one for the api side of the website. Ideally, the records should look something like `myportfolio.example.com` for the web side and `api.myportfolio.example.com`, but it is not important.
+### Reverse Proxy
+- It doesn't matter what reverse proxy you use (Nginx, Apache, Traefik, Caddy, etc)
+1. Point the web domain to the web port (default: 8910)
+2. Point the api domain to the api port (default: 8911)
+### Gmail App Password
+1. Go to your Google [account dashboard](https://myaccount.google.com)
+2. Go to Security > 2-Step Verification > App Passwords > Create a new app password
+3. Copy the 16 character password
+### [Docker Compose](./docker-compose.yml)
+```yaml
+version: '3.8'
 
-Welcome to [RedwoodJS](https://redwoodjs.com)!
+services:
+  portfolio:
+    container_name: portfolio
+    image: git.altaiar.dev/ahmed/portfolio:latest
+    environment:
+      - NODE_ENV=production
+      - API_PROXY_TARGET=http://localhost:8911
+      - MAX_HTTP_CONNECTIONS_PER_MINUTE=60
+      - SESSION_SECRET=super_secret_session_key_change_me_in_production_please
+      - DATABASE_URL=postgresql://redwood:redwood@db:5432/portfolio
+      - FIRST_NAME=first name                               # Your first name
+      - LAST_NAME=lastname                                  # Your last name
+      - GMAIL=example@gmail.com                             # The Gmail address associated with the app password created earlier
+      - GMAIL_SMTP_PASSWORD=aaaa bbbb cccc dddd             # The app password created earlier
+      - DOMAIN=portfolio.example.com
+      - API_DOMAIN=api.portfolio.example.com
+                                                            # Careful, addresses below must not end with a '/'
+      - ADDRESS_PROD=https://portfolio.example.com          # https://DOMAIN
+      - API_ADDRESS_PROD=https://api.portfolio.example.com  # https://API_DOMAIN
+    ports:
+      - '8910:8910' # Web
+      - '8911:8911' # API
+    depends_on:
+      - db
+    command: >
+      /bin/sh -c "
+      yarn rw build &&
+      yarn rw prisma migrate deploy &&
+      yarn rw prisma db seed &&
+      yarn rw serve"
 
-> **Prerequisites**
->
-> - Redwood requires [Node.js](https://nodejs.org/en/) (=20.x) and [Yarn](https://yarnpkg.com/)
-> - Are you on Windows? For best results, follow our [Windows development setup](https://redwoodjs.com/docs/how-to/windows-development-setup) guide
 
-Start by installing dependencies:
+  db:
+    container_name: portfolio-db
+    image: postgres:16-bookworm
+    environment:
+      POSTGRES_USER: redwood
+      POSTGRES_PASSWORD: redwood
+      POSTGRES_DB: portfolio
+    ports:
+      - '5432:5432'
+    volumes:
+      - postgres:/var/lib/postgresql/data
 
+volumes:
+  postgres:
 ```
-yarn install
-```
+## Logging In
+- Once the container is up and running, head to `/login` (`https://portfolio.example.com/login`), default credentials are below
+- If you would like to change the password, head to `/forgot-password` (`https://portfolio.example.com/forgot-password`), the username is `admin`
+  - If you correctly set up the Gmail app password, you should receive an email from yourself
+  - It contains the link needed to change your password
+### Default Credentials
+**Username:** `admin`
 
-Then start the development server:
-
-```
-yarn redwood dev
-```
-
-Your browser should automatically open to [http://localhost:8910](http://localhost:8910) where you'll see the Welcome Page, which links out to many great resources.
-
-> **The Redwood CLI**
->
-> Congratulations on running your first Redwood CLI command! From dev to deploy, the CLI is with you the whole way. And there's quite a few commands at your disposal:
->
-> ```
-> yarn redwood --help
-> ```
->
-> For all the details, see the [CLI reference](https://redwoodjs.com/docs/cli-commands).
-
-## Prisma and the database
-
-Redwood wouldn't be a full-stack framework without a database. It all starts with the schema. Open the [`schema.prisma`](api/db/schema.prisma) file in `api/db` and replace the `UserExample` model with the following `Post` model:
-
-```prisma
-model Post {
-  id        Int      @id @default(autoincrement())
-  title     String
-  body      String
-  createdAt DateTime @default(now())
-}
-```
-
-Redwood uses [Prisma](https://www.prisma.io/), a next-gen Node.js and TypeScript ORM, to talk to the database. Prisma's schema offers a declarative way of defining your app's data models. And Prisma [Migrate](https://www.prisma.io/migrate) uses that schema to make database migrations hassle-free:
-
-```
-yarn rw prisma migrate dev
-
-# ...
-
-? Enter a name for the new migration: › create posts
-```
-
-> `rw` is short for `redwood`
-
-You'll be prompted for the name of your migration. `create posts` will do.
-
-Now let's generate everything we need to perform all the CRUD (Create, Retrieve, Update, Delete) actions on our `Post` model:
-
-```
-yarn redwood generate scaffold post
-```
-
-Navigate to [http://localhost:8910/posts/new](http://localhost:8910/posts/new), fill in the title and body, and click "Save".
-
-Did we just create a post in the database? Yup! With `yarn rw generate scaffold <model>`, Redwood created all the pages, components, and services necessary to perform all CRUD actions on our posts table.
-
-## Frontend first with Storybook
-
-Don't know what your data models look like? That's more than ok—Redwood integrates Storybook so that you can work on design without worrying about data. Mockup, build, and verify your React components, even in complete isolation from the backend:
-
-```
-yarn rw storybook
-```
-
-Seeing "Couldn't find any stories"? That's because you need a `*.stories.{tsx,jsx}` file. The Redwood CLI makes getting one easy enough—try generating a [Cell](https://redwoodjs.com/docs/cells), Redwood's data-fetching abstraction:
-
-```
-yarn rw generate cell examplePosts
-```
-
-The Storybook server should hot reload and now you'll have four stories to work with. They'll probably look a little bland since there's no styling. See if the Redwood CLI's `setup ui` command has your favorite styling library:
-
-```
-yarn rw setup ui --help
-```
-
-## Testing with Jest
-
-It'd be hard to scale from side project to startup without a few tests. Redwood fully integrates Jest with both the front- and back-ends, and makes it easy to keep your whole app covered by generating test files with all your components and services:
-
-```
-yarn rw test
-```
-
-To make the integration even more seamless, Redwood augments Jest with database [scenarios](https://redwoodjs.com/docs/testing#scenarios)  and [GraphQL mocking](https://redwoodjs.com/docs/testing#mocking-graphql-calls).
-
-## Ship it
-
-Redwood is designed for both serverless deploy targets like Netlify and Vercel and serverful deploy targets like Render and AWS:
-
-```
-yarn rw setup deploy --help
-```
-
-Don't go live without auth! Lock down your app with Redwood's built-in, database-backed authentication system ([dbAuth](https://redwoodjs.com/docs/authentication#self-hosted-auth-installation-and-setup)), or integrate with nearly a dozen third-party auth providers:
-
-```
-yarn rw setup auth --help
-```
-
-## Next Steps
-
-The best way to learn Redwood is by going through the comprehensive [tutorial](https://redwoodjs.com/docs/tutorial/foreword) and joining the community (via the [Discourse forum](https://community.redwoodjs.com) or the [Discord server](https://discord.gg/redwoodjs)).
-
-## Quick Links
-
-- Stay updated: read [Forum announcements](https://community.redwoodjs.com/c/announcements/5), follow us on [Twitter](https://twitter.com/redwoodjs), and subscribe to the [newsletter](https://redwoodjs.com/newsletter)
-- [Learn how to contribute](https://redwoodjs.com/docs/contributing)
+**Password:** [`GMAIL_SMTP_PASSWORD`](#gmail-app-password)

api/src/functions/auth.ts

@@ -111,9 +111,7 @@ ${domain}/reset-password?resetToken=${resetToken}
     // the database. Returning anything truthy will automatically log the user
     // in. Return `false` otherwise, and in the Reset Password page redirect the
     // user to the login page.
-    handler: (_user) => {
-      return true
-    },
+    handler: (_user) => false,
 
     // If `false` then the new password MUST be different from the current one
     allowReusedPassword: true,

api/src/lib/email.ts

@@ -15,15 +15,14 @@ const transporter = nodemailer.createTransport({
   },
 })
 
-export const sendEmail = async ({ to, subject, text, html }: Options) => {
-  return await transporter.sendMail({
+export const sendEmail = async ({ to, subject, text, html }: Options) =>
+  await transporter.sendMail({
     from: `"${process.env.FIRST_NAME} ${process.env.LAST_NAME} (noreply)" <${process.env.GMAIL}>`,
     to: Array.isArray(to) ? to : [to],
     subject,
     text,
     html,
   })
-}
 
 export const censorEmail = (email: string): string => {
   const [localPart, domain] = email.split('@')

docker-compose.dev.yml

@@ -1,58 +0,0 @@
-services:
-  redwood:
-    build:
-      context: .
-      dockerfile: ./Dockerfile
-      target: base
-    command: yarn rw dev
-    volumes:
-      - .:/home/node/app
-      - node_modules:/home/node/app/node_modules
-    ports:
-      - '8910:8910'
-    depends_on:
-      - db
-    environment:
-      - DATABASE_URL=postgresql://redwood:redwood@db:5432/redwood
-      - TEST_DATABASE_URL=postgresql://redwood:redwood@db:5432/redwood_test
-      - SESSION_SECRET=super_secret_session_key_change_me_in_production_please
-      - CI=
-      - NODE_ENV=development
-      - REDWOOD_API_HOST=0.0.0.0
-
-  db:
-    image: postgres:16-bookworm
-    environment:
-      POSTGRES_USER: redwood
-      POSTGRES_PASSWORD: redwood
-      POSTGRES_DB: redwood
-    ports:
-      - '5432:5432'
-    volumes:
-      - postgres:/var/lib/postgresql/data
-
-  # After starting with `docker compose -f ./docker-compose.dev.yml up`,
-  # use the console to run commands in the container:
-  #
-  # ```
-  # docker compose -f ./docker-compose.dev.yml run --rm -it console /bin/bash
-  # root@...:/home/node/app# yarn rw prisma migrate dev
-  # ```
-  console:
-    user: root
-    build:
-      context: .
-      dockerfile: ./Dockerfile
-      target: console
-    tmpfs:
-      - /tmp
-    command: 'true'
-    environment:
-      - DATABASE_URL=postgresql://redwood:redwood@db:5432/redwood
-      - TEST_DATABASE_URL=postgresql://redwood:redwood@db:5432/redwood_test
-    depends_on:
-      - db
-
-volumes:
-  node_modules:
-  postgres:

docker-compose.prod.yml

@@ -1,63 +0,0 @@
-services:
-  api:
-    build:
-      context: .
-      dockerfile: ./Dockerfile
-      target: api_serve
-    # Without a command specified, the Dockerfile's api_serve CMD will be used.
-    # If you are using a custom server file, you should either use the following
-    # command to launch your server or update the Dockerfile to do so.
-    # This is important if you intend to configure GraphQL to use Realtime.
-    # command: "./api/dist/server.js"
-    ports:
-      - '8911:8911'
-    depends_on:
-      - db
-    environment:
-      - DATABASE_URL=postgresql://redwood:redwood@db:5432/redwood
-      - TEST_DATABASE_URL=postgresql://redwood:redwood@db:5432/redwood_test
-      - SESSION_SECRET=super_secret_session_key_change_me_in_production_please
-
-  web:
-    build:
-      context: .
-      dockerfile: ./Dockerfile
-      target: web_serve
-    ports:
-      - '8910:8910'
-    depends_on:
-      - api
-    environment:
-      - API_PROXY_TARGET=http://api:8911
-
-  db:
-    image: postgres:16-bookworm
-    environment:
-      POSTGRES_USER: redwood
-      POSTGRES_PASSWORD: redwood
-      POSTGRES_DB: redwood
-    ports:
-      - '5432:5432'
-    volumes:
-      - ./postgres:/var/lib/postgresql/data
-
-  # After starting with `docker compose -f ./docker-compose.prod.yml up`,
-  # use the console to run commands in the container:
-  #
-  # ```
-  # docker compose -f ./docker-compose.prod.yml run --rm -it console /bin/bash
-  # ```
-  console:
-    user: root
-    build:
-      context: .
-      dockerfile: ./Dockerfile
-      target: console
-    tmpfs:
-      - /tmp
-    command: 'true'
-    environment:
-      - DATABASE_URL=postgresql://redwood:redwood@db:5432/redwood
-      - TEST_DATABASE_URL=postgresql://redwood:redwood@db:5432/redwood_test
-    depends_on:
-      - db

docker-compose.yml

@@ -0,0 +1,48 @@
+version: '3.8'
+
+services:
+  portfolio:
+    container_name: portfolio
+    image: git.altaiar.dev/ahmed/portfolio:latest
+    environment:
+      - NODE_ENV=production
+      - API_PROXY_TARGET=http://localhost:8911
+      - MAX_HTTP_CONNECTIONS_PER_MINUTE=60
+      - SESSION_SECRET=super_secret_session_key_change_me_in_production_please
+      - DATABASE_URL=postgresql://redwood:redwood@db:5432/portfolio
+      - FIRST_NAME=first name                               # Your first name
+      - LAST_NAME=lastname                                  # Your last name
+      - GMAIL=example@gmail.com                             # The Gmail address associated with the app password created earlier
+      - GMAIL_SMTP_PASSWORD=aaaa bbbb cccc dddd             # The app password created earlier
+      - DOMAIN=portfolio.example.com
+      - API_DOMAIN=api.portfolio.example.com
+                                                            # Careful, addresses below must not end with a '/'
+      - ADDRESS_PROD=https://portfolio.example.com          # https://DOMAIN
+      - API_ADDRESS_PROD=https://api.portfolio.example.com  # https://API_DOMAIN
+    ports:
+      - '8910:8910' # Web
+      - '8911:8911' # API
+    depends_on:
+      - db
+    command: >
+      /bin/sh -c "
+      yarn rw build &&
+      yarn rw prisma migrate deploy &&
+      yarn rw prisma db seed &&
+      yarn rw serve"
+
+
+  db:
+    container_name: portfolio-db
+    image: postgres:16-bookworm
+    environment:
+      POSTGRES_USER: redwood
+      POSTGRES_PASSWORD: redwood
+      POSTGRES_DB: portfolio
+    ports:
+      - '5432:5432'
+    volumes:
+      - postgres:/var/lib/postgresql/data
+
+volumes:
+  postgres:

scripts/seed.ts

@@ -15,40 +15,32 @@ export default async () => {
 
     const [hashedPassword, salt] = hashPassword(admin.password)
 
-    await db.user.upsert({
+    const existingAdmin = await db.user.findFirst({
       where: {
         email: admin.email,
       },
-      create: {
-        username: admin.username,
-        email: admin.email,
-        hashedPassword,
-        salt,
-      },
-      update: {
-        username: admin.username,
-        hashedPassword,
-        salt,
-      },
     })
 
+    if (!existingAdmin)
+      await db.user.create({
+        data: {
+          username: admin.username,
+          email: admin.email,
+          hashedPassword,
+          salt,
+        },
+      })
+
     const titles = await db.titles.findFirst()
 
-    await db.titles.upsert({
-      where: {
-        id: 1,
-      },
-      create: {
-        titles: Array.from({ length: MAX_TITLES }).map(
-          (_, i) => `a title ${i + 1}`
-        ),
-      },
-      update: {
-        titles:
-          titles?.titles ||
-          Array.from({ length: MAX_TITLES }).map((_, i) => `a title ${i + 1}`),
-      },
-    })
+    if (!titles)
+      await db.titles.create({
+        data: {
+          titles: Array.from({ length: MAX_TITLES }).map(
+            (_, i) => `a title ${i + 1}`
+          ),
+        },
+      })
   } catch (error) {
     console.error(error)
   }

web/config/tailwind.config.js

@@ -141,7 +141,7 @@ export const theme = {
 }
 
 export const darkMode = ['class', '[data-theme="dark"]']
-export const plugins = [require('daisyui')]
+export const plugins = [require('@tailwindcss/typography'), require('daisyui')]
 export const daisyui = {
   themes: [
     'light',

web/package.json

@@ -19,6 +19,13 @@
     "@redwoodjs/router": "8.3.0",
     "@redwoodjs/web": "8.3.0",
     "@redwoodjs/web-server": "8.3.0",
+    "@tailwindcss/typography": "^0.5.15",
+    "@tiptap/extension-link": "^2.8.0",
+    "@tiptap/extension-text-style": "^2.8.0",
+    "@tiptap/extension-underline": "^2.8.0",
+    "@tiptap/pm": "^2.8.0",
+    "@tiptap/react": "^2.8.0",
+    "@tiptap/starter-kit": "^2.8.0",
     "@uppy/compressor": "^2.0.1",
     "@uppy/core": "^4.1.0",
     "@uppy/dashboard": "^4.0.2",
@@ -33,12 +40,14 @@
     "react": "18.3.1",
     "react-colorful": "^5.6.1",
     "react-dom": "18.3.1",
+    "react-html-parser": "^2.0.2",
     "react-typed": "^2.0.12"
   },
   "devDependencies": {
     "@redwoodjs/vite": "8.3.0",
     "@types/react": "^18.2.55",
     "@types/react-dom": "^18.2.19",
+    "@types/react-html-parser": "^2",
     "autoprefixer": "^10.4.20",
     "daisyui": "^4.12.10",
     "postcss": "^8.4.41",

web/src/App.tsx

@@ -5,7 +5,6 @@ import { AuthProvider, useAuth } from 'src/auth'
 import FatalErrorPage from 'src/pages/FatalErrorPage'
 import Routes from 'src/Routes'
 
-import 'src/scaffold.css'
 import 'src/index.css'
 
 const App = () => (

web/src/components/PDF/PDF.tsx

@@ -0,0 +1,19 @@
+interface PDFProps {
+  url: string
+  form?: boolean
+}
+
+const PDF = ({ url, form = false }: PDFProps) => (
+  <embed
+    src={url}
+    title="PDF"
+    type="application/pdf"
+    style={{
+      width: 'calc(100vw - 1rem)',
+      height: `calc(100vh - ${form ? '8.5rem' : '6rem'})`,
+    }}
+    className="rounded-xl"
+  />
+)
+
+export default PDF

web/src/components/Portrait/PortraitForm/PortraitForm.tsx

@@ -102,7 +102,7 @@ const PortraitForm = ({ portrait }: PortraitFormProps) => {
     return (
       <div className="mx-auto w-fit space-y-2">
         <img
-          className="aspect-portrait max-w-2xl rounded-xl object-cover"
+          className="aspect-portrait max-w-80 sm:max-w-sm md:max-w-md lg:max-w-lg xl:max-w-xl 2xl:max-w-2xl rounded-xl object-cover"
           src={portrait?.fileId}
           alt={`${process.env.FIRST_NAME} Portrait`}
         />

web/src/components/Project/AdminProject/AdminProject.tsx

@@ -1,3 +1,4 @@
+import parseHtml from 'react-html-parser'
 import type {
   DeleteProjectMutation,
   DeleteProjectMutationVariables,
@@ -68,7 +69,11 @@ const AdminProject = ({ project }: Props) => {
               </tr>
               <tr>
                 <th>Description</th>
-                <td>{project.description}</td>
+                <td>
+                  <article className="prose">
+                    {parseHtml(project.description)}
+                  </article>
+                </td>
               </tr>
               <tr>
                 <th>Date</th>

web/src/components/Project/Project/Project.tsx

@@ -1,6 +1,7 @@
 import { mdiLinkVariant } from '@mdi/js'
 import Icon from '@mdi/react'
 import { format, isAfter, startOfToday } from 'date-fns'
+import parseHtml from 'react-html-parser'
 import type { FindProjectById } from 'types/graphql'
 
 import { calculateLuminance } from 'src/lib/color'
@@ -41,7 +42,9 @@ const Project = ({ project }: Props) => {
             ))}
           </div>
         )}
-        {project.description && <p>{project.description}</p>}
+        {project.description && (
+          <article className="prose">{parseHtml(project.description)}</article>
+        )}
         {project.links.length > 0 && (
           <>
             <h2 className="font-bold text-3xl w-fit">Links</h2>

web/src/components/Project/ProjectForm/ProjectForm.tsx

@@ -2,6 +2,10 @@ import { useEffect, useMemo, useRef, useState } from 'react'
 
 import { mdiCalendar, mdiDelete, mdiFormatTitle, mdiLinkVariant } from '@mdi/js'
 import Icon from '@mdi/react'
+import Link from '@tiptap/extension-link'
+import Underline from '@tiptap/extension-underline'
+import { useEditor } from '@tiptap/react'
+import StarterKit from '@tiptap/starter-kit'
 import { Meta, UploadResult } from '@uppy/core'
 import { format, isAfter, startOfToday } from 'date-fns'
 import type {
@@ -11,18 +15,12 @@ import type {
 } from 'types/graphql'
 
 import type { RWGqlError } from '@redwoodjs/forms'
-import {
-  Form,
-  FieldError,
-  Label,
-  TextField,
-  Submit,
-  TextAreaField,
-} from '@redwoodjs/forms'
+import { Form, FieldError, Label, TextField, Submit } from '@redwoodjs/forms'
 import { toast } from '@redwoodjs/web/toast'
 
 import DatePicker from 'src/components/DatePicker'
 import FormTextList from 'src/components/FormTextList'
+import RichTextEditor from 'src/components/RichTextEditor/RichTextEditor'
 import TagsSelectorCell from 'src/components/Tag/TagsSelectorCell'
 import Uploader from 'src/components/Uploader'
 import { batchDelete } from 'src/lib/tus'
@@ -39,6 +37,20 @@ interface ProjectFormProps {
 const ProjectForm = (props: ProjectFormProps) => {
   const today = startOfToday()
 
+  const descEditor = useEditor({
+    extensions: [
+      StarterKit,
+      Underline,
+      Link.configure({
+        openOnClick: false,
+        autolink: true,
+        linkOnPaste: true,
+        defaultProtocol: 'https',
+      }),
+    ],
+    content: props.project?.description || '',
+  })
+
   const [links, setLinks] = useState<string[]>(props.project?.links || [])
   const [linkErrors, setLinkErrors] = useState<boolean[]>([])
   const [pickerVisible, setPickerVisible] = useState<boolean>(false)
@@ -87,7 +99,7 @@ const ProjectForm = (props: ProjectFormProps) => {
     props.onSave(
       {
         title: data.title,
-        description: data.description,
+        description: descEditor.getHTML(),
         date: date.toISOString(),
         links: links.filter((link) => link.trim().length > 0),
         images: fileIds,
@@ -144,21 +156,7 @@ const ProjectForm = (props: ProjectFormProps) => {
         </div>
       </Label>
 
-      <Label name="description" className="form-control w-full">
-        <TextAreaField
-          name="description"
-          defaultValue={props.project?.description}
-          className="textarea textarea-bordered"
-          errorClassName="textarea textarea-bordered textarea-error"
-          placeholder="Description"
-        />
-        <div className="label">
-          <FieldError
-            name="description"
-            className="text-xs font-semibold text-error"
-          />
-        </div>
-      </Label>
+      <RichTextEditor editor={descEditor} />
 
       <div className="form-control w-full">
         <Label

web/src/components/Project/Projects/Projects.tsx

@@ -1,6 +1,7 @@
 import { mdiDotsVertical } from '@mdi/js'
 import Icon from '@mdi/react'
 import { isAfter } from 'date-fns'
+import parseHtml from 'react-html-parser'
 import type {
   DeleteProjectMutation,
   DeleteProjectMutationVariables,
@@ -94,7 +95,11 @@ const ProjectsList = ({ projects }: FindProjects) => {
               return (
                 <tr key={project.id}>
                   <td>{truncate(project.title)}</td>
-                  <td className="max-w-72">{truncate(project.description)}</td>
+                  <td className="max-w-72">
+                    <article className="prose text-sm line-clamp-3">
+                      {parseHtml(project.description)}
+                    </article>
+                  </td>
                   <td className="max-w-36">{timeTag(project.date)}</td>
                   <td>{`${project.images.length} ${project.images.length === 1 ? 'image' : 'images'}`}</td>
                   <td>

web/src/components/Project/ProjectsShowcase/ProjectsShowcase.tsx

@@ -1,6 +1,7 @@
 import { useLayoutEffect, useRef, useState } from 'react'
 
 import { format, isAfter, startOfToday } from 'date-fns'
+import parseHtml from 'react-html-parser'
 import { FindProjects } from 'types/graphql'
 
 import { Link, routes } from '@redwoodjs/router'
@@ -56,7 +57,11 @@ const ProjectsShowcase = ({ projects }: FindProjects) => {
                   <div className="card-title overflow-auto">
                     <p className="whitespace-nowrap">{project.title}</p>
                   </div>
-                  <div className="line-clamp-5">{project.description}</div>
+                  <div className="line-clamp-5">
+                    <article className="prose text-sm">
+                      {parseHtml(project.description)}
+                    </article>
+                  </div>
                   <div className="card-actions justify-between">
                     <div className="flex gap-2">
                       {isAfter(new Date(project.date), startOfToday()) && (

web/src/components/Resume/Resume/Resume.tsx

@@ -1,26 +1,11 @@
-import { useState } from 'react'
-
 import { Resume as ResumeType } from 'types/graphql'
 
+import PDF from 'src/components/PDF/PDF'
+
 interface ResumeProps {
   resume?: ResumeType
 }
 
-const Resume = ({ resume }: ResumeProps) => {
-  const [fileId] = useState<string>(resume?.fileId)
-
-  return (
-    <object
-      data={fileId}
-      type="application/pdf"
-      aria-label="Resume PDF"
-      style={{
-        width: 'calc(100vw - 1rem)',
-        height: 'calc(100vh - 6rem)',
-      }}
-      className="rounded-xl"
-    />
-  )
-}
+const Resume = ({ resume }: ResumeProps) => <PDF url={resume?.fileId} />
 
 export default Resume

web/src/components/Resume/ResumeForm/ResumeForm.tsx

@@ -14,6 +14,7 @@ import type {
 import { TypedDocumentNode, useMutation } from '@redwoodjs/web'
 import { toast } from '@redwoodjs/web/toast'
 
+import PDF from 'src/components/PDF/PDF'
 import Uploader from 'src/components/Uploader/Uploader'
 import { deleteFile, handleBeforeUnload } from 'src/lib/tus'
 
@@ -100,16 +101,7 @@ const ResumeForm = ({ resume }: ResumeFormProps) => {
   if (resume?.fileId)
     return (
       <div className="mx-auto w-fit space-y-2">
-        <object
-          data={resume?.fileId}
-          type="application/pdf"
-          aria-label="Resume PDF"
-          style={{
-            width: 'calc(100vw - 1rem)',
-            height: 'calc(100vh - 10rem)',
-          }}
-          className="rounded-xl"
-        />
+        <PDF form url={resume?.fileId} />
         <div className="flex justify-center">
           <button
             type="button"
@@ -143,16 +135,7 @@ const ResumeForm = ({ resume }: ResumeFormProps) => {
             />
           </>
         ) : (
-          <object
-            data={fileId}
-            type="application/pdf"
-            aria-label="Resume PDF"
-            style={{
-              width: 'calc(100vw - 1rem)',
-              height: 'calc(100vh - 10rem)',
-            }}
-            className="rounded-xl"
-          />
+          <PDF form url={fileId} />
         )}
         {fileId && (
           <div className="flex justify-center space-x-2">

web/src/components/RichTextEditor/RichTextEditor.tsx

@@ -0,0 +1,165 @@
+import { useCallback } from 'react'
+
+import {
+  mdiCodeBracesBox,
+  mdiFormatBold,
+  mdiFormatClear,
+  mdiFormatItalic,
+  mdiFormatListBulleted,
+  mdiFormatListNumbered,
+  mdiFormatQuoteClose,
+  mdiFormatStrikethrough,
+  mdiFormatUnderline,
+  mdiLinkVariant,
+  mdiLinkVariantOff,
+  mdiRedoVariant,
+  mdiUndoVariant,
+  mdiXml,
+} from '@mdi/js'
+import Icon from '@mdi/react'
+import { EditorContent } from '@tiptap/react'
+import type { Editor } from '@tiptap/react'
+
+interface RichTextEditorProps {
+  editor: Editor
+}
+
+const RichTextEditor = ({ editor }: RichTextEditorProps) => {
+  const setLink = useCallback(() => {
+    const previousUrl = editor.getAttributes('link').href
+    const url = window.prompt('URL', previousUrl)
+
+    if (url === null) return
+
+    if (url === '') {
+      editor.chain().focus().extendMarkRange('link').unsetLink().run()
+      return
+    }
+
+    editor.chain().focus().extendMarkRange('link').setLink({ href: url }).run()
+  }, [editor])
+
+  if (!editor) return null
+
+  return (
+    <div className="flex flex-col gap-2">
+      <div className="flex flex-wrap gap-2 justify-center">
+        <button
+          type="button"
+          className={`btn btn-sm btn-square ${editor.isActive('link') ? 'btn-primary' : ''}`}
+          onClick={setLink}
+        >
+          <Icon path={mdiLinkVariant} className="size-5" />
+        </button>
+        <button
+          type="button"
+          className="btn btn-sm btn-square"
+          onClick={() => editor.chain().focus().unsetLink().run()}
+          disabled={!editor.isActive('link')}
+        >
+          <Icon path={mdiLinkVariantOff} className="size-5" />
+        </button>
+        <button
+          type="button"
+          className={`btn btn-sm btn-square ${editor.isActive('bulletList') ? 'btn-primary' : ''}`}
+          onClick={() => editor.chain().focus().toggleBulletList().run()}
+        >
+          <Icon path={mdiFormatListBulleted} className="size-5" />
+        </button>
+        <button
+          type="button"
+          className={`btn btn-sm btn-square ${editor.isActive('orderedList') ? 'btn-primary' : ''}`}
+          onClick={() => editor.chain().focus().toggleOrderedList().run()}
+        >
+          <Icon path={mdiFormatListNumbered} className="size-5" />
+        </button>
+        <button
+          type="button"
+          className="btn btn-sm btn-square"
+          onClick={() => editor.chain().focus().unsetAllMarks().run()}
+        >
+          <Icon path={mdiFormatClear} className="size-5" />
+        </button>
+        <button
+          type="button"
+          className="btn btn-sm btn-square"
+          onClick={() => editor.chain().focus().undo().run()}
+          disabled={!editor.can().chain().focus().undo().run()}
+        >
+          <Icon path={mdiUndoVariant} className="size-5" />
+        </button>
+        <button
+          type="button"
+          className="btn btn-sm btn-square"
+          onClick={() => editor.chain().focus().redo().run()}
+          disabled={!editor.can().chain().focus().redo().run()}
+        >
+          <Icon path={mdiRedoVariant} className="size-5" />
+        </button>
+      </div>
+      <div className="flex flex-wrap gap-2 justify-center">
+        <button
+          type="button"
+          className={`btn btn-sm btn-square ${editor.isActive('bold') ? 'btn-primary' : ''}`}
+          onClick={() => editor.chain().focus().toggleBold().run()}
+          disabled={!editor.can().chain().focus().toggleBold().run()}
+        >
+          <Icon path={mdiFormatBold} className="size-5" />
+        </button>
+        <button
+          type="button"
+          className={`btn btn-sm btn-square ${editor.isActive('italic') ? 'btn-primary' : ''}`}
+          onClick={() => editor.chain().focus().toggleItalic().run()}
+          disabled={!editor.can().chain().focus().toggleItalic().run()}
+        >
+          <Icon path={mdiFormatItalic} className="size-5" />
+        </button>
+        <button
+          type="button"
+          className={`btn btn-sm btn-square ${editor.isActive('underline') ? 'btn-primary' : ''}`}
+          onClick={() => editor.chain().focus().toggleUnderline().run()}
+          disabled={!editor.can().chain().focus().toggleUnderline().run()}
+        >
+          <Icon path={mdiFormatUnderline} className="size-5" />
+        </button>
+        <button
+          type="button"
+          className={`btn btn-sm btn-square ${editor.isActive('static') ? 'btn-primary' : ''}`}
+          onClick={() => editor.chain().focus().toggleStrike().run()}
+          disabled={!editor.can().chain().focus().toggleStrike().run()}
+        >
+          <Icon path={mdiFormatStrikethrough} className="size-5" />
+        </button>
+        <button
+          type="button"
+          className={`btn btn-sm btn-square ${editor.isActive('code') ? 'btn-primary' : ''}`}
+          onClick={() => editor.chain().focus().toggleCode().run()}
+          disabled={!editor.can().chain().focus().toggleCode().run()}
+        >
+          <Icon path={mdiXml} className="size-5" />
+        </button>
+        <button
+          type="button"
+          className={`btn btn-sm btn-square ${editor.isActive('codeBlock') ? 'btn-primary' : ''}`}
+          onClick={() => editor.chain().focus().toggleCodeBlock().run()}
+          disabled={!editor.can().chain().focus().toggleCodeBlock().run()}
+        >
+          <Icon path={mdiCodeBracesBox} className="size-5" />
+        </button>
+        <button
+          type="button"
+          className={`btn btn-sm btn-square ${editor.isActive('blockquote') ? 'btn-primary' : ''}`}
+          onClick={() => editor.chain().focus().toggleBlockquote().run()}
+        >
+          <Icon path={mdiFormatQuoteClose} className="size-5" />
+        </button>
+      </div>
+      <EditorContent
+        editor={editor}
+        className="textarea textarea-bordered font-normal prose"
+      />
+    </div>
+  )
+}
+
+export default RichTextEditor

web/src/components/Title/TitlesForm/TitlesForm.tsx

@@ -97,7 +97,7 @@ const TitlesForm = ({ titles }: TitlesFormProps) => {
       <nav className="my-2 flex justify-center space-x-2">
         <button
           type="button"
-          className="btn btn-sm"
+          className="btn btn-sm uppercase"
           onClick={() => setPreview(!preview)}
         >
           {preview ? 'Hide' : 'Show'} Preview

web/src/index.css

@@ -19,3 +19,7 @@
 .image-full-no-overlay::before {
   background: none !important;
 }
+
+.ProseMirror:focus {
+  outline: none;
+}

web/src/pages/FatalErrorPage/FatalErrorPage.tsx

@@ -13,45 +13,6 @@ import { DevFatalErrorPage } from '@redwoodjs/web/dist/components/DevFatalErrorP
 export default DevFatalErrorPage ||
   (() => (
     <main>
-      <style
-        dangerouslySetInnerHTML={{
-          __html: `
-              html, body {
-                margin: 0;
-              }
-              html * {
-                box-sizing: border-box;
-              }
-              main {
-                display: flex;
-                align-items: center;
-                font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
-                text-align: center;
-                background-color: #E2E8F0;
-                height: 100vh;
-              }
-              section {
-                background-color: white;
-                border-radius: 0.25rem;
-                width: 32rem;
-                padding: 1rem;
-                margin: 0 auto;
-                box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
-              }
-              h1 {
-                font-size: 2rem;
-                margin: 0;
-                font-weight: 500;
-                line-height: 1;
-                color: #2D3748;
-              }
-            `,
-        }}
-      />
-      <section>
-        <h1>
-          <span>Something went wrong</span>
-        </h1>
-      </section>
+      <span>Something went wrong</span>
     </main>
   ))

web/src/pages/ForgotPasswordPage/ForgotPasswordPage.tsx

@@ -72,7 +72,9 @@ const ForgotPasswordPage = () => {
           <FieldError name="username" className="text-sm text-error" />
 
           <div className="flex w-full">
-            <Submit className="btn btn-primary btn-sm mx-auto">Submit</Submit>
+            <Submit className="btn btn-primary btn-sm mx-auto uppercase">
+              Submit
+            </Submit>
           </div>
         </Form>
       </div>

web/src/pages/HomePage/HomePage.tsx

@@ -5,6 +5,7 @@ import { Link, routes } from '@redwoodjs/router'
 import { Metadata } from '@redwoodjs/web'
 
 import TitlesCell from 'src/components/Title/TitlesCell'
+import { getLogoComponent } from 'src/lib/handle'
 
 const HomePage = () => (
   <>
@@ -33,6 +34,16 @@ const HomePage = () => (
         </div>
       </div>
     </div>
+    <div className="fixed bottom-2 left-2 z-10">
+      <a
+        href="https://git.altaiar.dev/ahmed/portfolio"
+        target="_blank"
+        rel="noreferrer"
+        className="btn btn-square"
+      >
+        {getLogoComponent('gitea')}
+      </a>
+    </div>
   </>
 )
 

web/src/pages/LoginPage/LoginPage.tsx

@@ -103,7 +103,9 @@ const LoginPage = () => {
           <FieldError name="password" className="text-sm text-error" />
 
           <div className="flex w-full">
-            <Submit className="btn btn-primary btn-sm mx-auto">Log In</Submit>
+            <Submit className="btn btn-primary btn-sm mx-auto uppercase">
+              Log In
+            </Submit>
           </div>
         </Form>
       </div>

web/src/pages/ResetPasswordPage/ResetPasswordPage.tsx

@@ -102,7 +102,7 @@ const ResetPasswordPage = ({ resetToken }: { resetToken: string }) => {
 
           <div className="flex w-full">
             <Submit
-              className={`btn btn-primary btn-sm mx-auto ${
+              className={`btn btn-primary btn-sm uppercase mx-auto ${
                 !enabled ? 'btn-disabled' : ''
               }`}
               disabled={!enabled}

web/src/scaffold.css

@@ -1,243 +0,0 @@
-.rw-scaffold {
-  @apply bg-white text-gray-600;
-}
-.rw-scaffold h1,
-.rw-scaffold h2 {
-  @apply m-0;
-}
-.rw-scaffold a {
-  @apply bg-transparent;
-}
-.rw-scaffold ul {
-  @apply m-0 p-0;
-}
-.rw-scaffold input:-ms-input-placeholder {
-  @apply text-gray-500;
-}
-.rw-scaffold input::-ms-input-placeholder {
-  @apply text-gray-500;
-}
-.rw-scaffold input::placeholder {
-  @apply text-gray-500;
-}
-.rw-header {
-  @apply flex justify-between px-8 py-4;
-}
-.rw-main {
-  @apply mx-4 pb-4;
-}
-.rw-segment {
-  @apply w-full overflow-hidden rounded-lg border border-gray-200;
-  scrollbar-color: theme('colors.zinc.400') transparent;
-}
-.rw-segment::-webkit-scrollbar {
-  height: initial;
-}
-.rw-segment::-webkit-scrollbar-track {
-  @apply rounded-b-[10px] rounded-t-none border-0 border-t border-solid border-gray-200 bg-transparent p-[2px];
-}
-.rw-segment::-webkit-scrollbar-thumb {
-  @apply rounded-full border-[3px] border-solid border-transparent bg-zinc-400 bg-clip-content;
-}
-.rw-segment-header {
-  @apply bg-gray-200 px-4 py-3 text-gray-700;
-}
-.rw-segment-main {
-  @apply bg-gray-100 p-4;
-}
-.rw-link {
-  @apply text-blue-400 underline;
-}
-.rw-link:hover {
-  @apply text-blue-500;
-}
-.rw-forgot-link {
-  @apply mt-1 text-right text-xs text-gray-400 underline;
-}
-.rw-forgot-link:hover {
-  @apply text-blue-500;
-}
-.rw-heading {
-  @apply font-semibold;
-}
-.rw-heading.rw-heading-primary {
-  @apply text-xl;
-}
-.rw-heading.rw-heading-secondary {
-  @apply text-sm;
-}
-.rw-heading .rw-link {
-  @apply text-gray-600 no-underline;
-}
-.rw-heading .rw-link:hover {
-  @apply text-gray-900 underline;
-}
-.rw-cell-error {
-  @apply text-sm font-semibold;
-}
-.rw-form-wrapper {
-  @apply -mt-4 text-sm;
-}
-.rw-cell-error,
-.rw-form-error-wrapper {
-  @apply my-4 rounded border border-red-100 bg-red-50 p-4 text-red-600;
-}
-.rw-form-error-title {
-  @apply m-0 font-semibold;
-}
-.rw-form-error-list {
-  @apply mt-2 list-inside list-disc;
-}
-.rw-button {
-  @apply flex cursor-pointer justify-center rounded border-0 bg-gray-200 px-4 py-1 text-xs font-semibold uppercase leading-loose tracking-wide text-gray-500 no-underline transition duration-100;
-}
-.rw-button:hover {
-  @apply bg-gray-500 text-white;
-}
-.rw-button.rw-button-small {
-  @apply rounded-sm px-2 py-1 text-xs;
-}
-.rw-button.rw-button-green {
-  @apply bg-green-500 text-white;
-}
-.rw-button.rw-button-green:hover {
-  @apply bg-green-700;
-}
-.rw-button.rw-button-blue {
-  @apply bg-blue-500 text-white;
-}
-.rw-button.rw-button-blue:hover {
-  @apply bg-blue-700;
-}
-.rw-button.rw-button-red {
-  @apply bg-red-500 text-white;
-}
-.rw-button.rw-button-red:hover {
-  @apply bg-red-700 text-white;
-}
-.rw-button-icon {
-  @apply mr-1 text-xl leading-5;
-}
-.rw-button-group {
-  @apply mx-2 my-3 flex justify-center;
-}
-.rw-button-group .rw-button {
-  @apply mx-1;
-}
-.rw-form-wrapper .rw-button-group {
-  @apply mt-8;
-}
-.rw-label {
-  @apply mt-6 block text-left font-semibold text-gray-600;
-}
-.rw-label.rw-label-error {
-  @apply text-red-600;
-}
-.rw-input {
-  @apply mt-2 block w-full rounded border border-gray-200 bg-white p-2 outline-none;
-}
-.rw-check-radio-items {
-  @apply flex justify-items-center;
-}
-.rw-check-radio-item-none {
-  @apply text-gray-600;
-}
-.rw-input[type='checkbox'],
-.rw-input[type='radio'] {
-  @apply ml-0 mr-1 mt-1 inline w-4;
-}
-.rw-input:focus {
-  @apply border-gray-400;
-}
-.rw-input-error {
-  @apply border-red-600 text-red-600;
-}
-.rw-input-error:focus {
-  @apply border-red-600 outline-none;
-  box-shadow: 0 0 5px #c53030;
-}
-.rw-field-error {
-  @apply mt-1 block text-xs font-semibold uppercase text-red-600;
-}
-.rw-table-wrapper-responsive {
-  @apply overflow-x-auto;
-}
-.rw-table-wrapper-responsive .rw-table {
-  min-width: 48rem;
-}
-.rw-table {
-  @apply w-full text-sm;
-}
-.rw-table th,
-.rw-table td {
-  @apply p-3;
-}
-.rw-table td {
-  @apply bg-white text-gray-900;
-}
-.rw-table tr:nth-child(odd) td,
-.rw-table tr:nth-child(odd) th {
-  @apply bg-gray-50;
-}
-.rw-table thead tr {
-  @apply bg-gray-200 text-gray-600;
-}
-.rw-table th {
-  @apply text-left font-semibold;
-}
-.rw-table thead th {
-  @apply text-left;
-}
-.rw-table tbody th {
-  @apply text-right;
-}
-@media (min-width: 768px) {
-  .rw-table tbody th {
-    @apply w-1/5;
-  }
-}
-.rw-table tbody tr {
-  @apply border-t border-gray-200;
-}
-.rw-table input {
-  @apply ml-0;
-}
-.rw-table-actions {
-  @apply flex h-4 items-center justify-end pr-1;
-}
-.rw-table-actions .rw-button {
-  @apply bg-transparent;
-}
-.rw-table-actions .rw-button:hover {
-  @apply bg-gray-500 text-white;
-}
-.rw-table-actions .rw-button-blue {
-  @apply text-blue-500;
-}
-.rw-table-actions .rw-button-blue:hover {
-  @apply bg-blue-500 text-white;
-}
-.rw-table-actions .rw-button-red {
-  @apply text-red-600;
-}
-.rw-table-actions .rw-button-red:hover {
-  @apply bg-red-600 text-white;
-}
-.rw-text-center {
-  @apply text-center;
-}
-.rw-login-container {
-  @apply mx-auto my-16 flex w-96 flex-wrap items-center justify-center;
-}
-.rw-login-container .rw-form-wrapper {
-  @apply w-full text-center;
-}
-.rw-login-link {
-  @apply mt-4 w-full text-center text-sm text-gray-600;
-}
-.rw-webauthn-wrapper {
-  @apply mx-4 mt-6 leading-6;
-}
-.rw-webauthn-wrapper h2 {
-  @apply mb-4 text-xl font-bold;
-}