🌱 Leaflet boiler update

.env.sample

@@ -0,0 +1,64 @@
+
+#             next-leaflet - config version 0.1.0
+#        ━━  An optimized tech stack for efficiency.  ━━
+#             Need help? mail@thijmenheuvelink.nl
+
+
+# ━━ Docker ━━
+
+# Docker deploy modifier, either puts the app in development or production mode.
+# ┗━ Options: "dev" or "prod" ━━ default: "dev"
+COMPOSE_PROFILES= "dev"
+
+# Docker application port, which port the web app will listen on.
+# ┗━ Options: "number" ━━ default: "3000"
+APP_PORT= "3000"
+
+# Docker database port, this is the port that mysql listens on.
+# ┗━ Options: "number" ━━ default: "5432"
+DATABASE_PORT= "5432"
+
+# Docker database password, used to initialize a default user.
+# ┗━ Options: "text"
+DATABASE_PASS= ""
+
+
+# ━━ Prisma ━━
+
+# Prisma connector, required by the generator to establish a database connection.
+# ┗━ Options: "Connection URL" ━━ default: "postgresql://postgres:password@localhost:5432/table"
+PRISMA_CONNECTOR="postgresql://postgres:password@localhost:5432/table"
+
+
+# ━━ Next Auth ━━
+
+# Next Auth url, required in production, set it to the canonical URL of your site.
+# ┗━ Options: "url" ━━ default: "http://localhost:3000"
+NEXTAUTH_URL= "http://localhost:3000"
+
+# Next Auth secret, used to encrypt json web tokens, and to hash email verification tokens.
+# ┗━ Options: "text" ━━ recommended: "$ openssl rand -base64 32"
+NEXTAUTH_SECRET= ""
+
+
+# ━━ Email ━━
+
+# This should be the URL of your email server.
+# ┗━ Options: "url" ━━ example: "mail.leaflet.app"
+EMAIL_HOST= ""
+
+# This should be the port number of your email server.
+# ┗━ Options: "number" ━━ default: "465"
+EMAIL_PORT= "465"
+
+# This should be the username or email address for the email server.
+# ┗━ Options: "string"
+EMAIL_USER= ""
+
+# This should be the password for the email server.
+# ┗━ Options: "string"
+EMAIL_PASS= ""
+
+# This should be the email address that will be shown as the sender for outgoing emails.
+# ┗━ Options: "string" ━━ example: "no-reply@leaflet.app"
+EMAIL_FROM= ""

.github/workflows/deploy.yml

@@ -1,29 +1,27 @@
-name: deploy
+name: Deploy
 
-# ----- Rename "leaflet" to a valid branch -----
 on:
   push:
-    branches: main
+    branches: leaflet # <- Rename to a valid branch.
 
 jobs:
   deploy:
     runs-on: self-hosted
     steps:
-      # ----- Ensure all environment vars are configured -----
-      #          DEPLOY_ (KEY, HOST, USER, PORT, ENV)
       - uses: appleboy/ssh-action@master
         with:
-          key:      ${{ secrets.DEPLOY_KEY }} 
-          host:     ${{ secrets.DEPLOY_HOST }}
-          username: ${{ secrets.DEPLOY_USER }}
-          port:     ${{ secrets.DEPLOY_PORT }}
+          key:      ${{ secrets.SSH_KEY }} 
+          host:     ${{ secrets.SSH_HOST }}
+          username: ${{ secrets.SSH_USER }}
+          port:     ${{ secrets.SSH_PORT }}
           script: |
-            mkdir /root /root/env /root/env/${{ github.event.repository.name }}
-            cd ~/env/${{ github.event.repository.name }}
+            mkdir ~/env ~/env/${{github.event.repository.name}}
+            cd ~/env/${{github.event.repository.name}}
 
-            git clone https://github.com/${{github.repository}} .
-            git pull
+            sudo git clone https://github.com/${{github.repository}} .
+            sudo git pull
 
-            echo '${{ secrets.DEPLOY_ENV }}' > .env
+            echo '${{ secrets.APP_ENV }}' > .env
             
-            docker-compose down ; docker-compose up -d
+            sudo docker-compose down
+            sudo docker-compose up -d

.gitignore

@@ -1,18 +1,21 @@
 
-# App
-/.next
+# ━━ Blacklist ━━
+
+*.pem
+*.tsbuildinfo
+*.log*
+.env*
 
-# Endpoint
+.DS_Store
+.react-email
+next-env.d.ts
 /data
+/out
+/build
+/.next
+/node_modules
+
 
-# Testing
-**/cypress/screenshots/**
-!**/cypress/screenshots/Preview.png
-!**/cypress/screenshots/.keep
+# ━━ Whitelist ━━
 
-# Generalized
-**/*.tsbuildinfo
-**/next-env.d.ts
-**/node_modules
-**/.env*
-**/yarn*
+!.env.sample

.vscode/settings.json

@@ -1,17 +1,19 @@
 {
     "files.exclude": {
-        "tsconfig.tsbuildinfo": true,
         "postcss.config.js": true,
-        "docker-compose.yml": true,
+        "app/*/Session.tsx": true,
         ".eslintrc.json": true,
-        "next.config.js": true,
-        "tsconfig.json": true,
         "next-env.d.ts": true,
+        "**/*...rest*": true,
+        ".react-email": true,
         "node_modules": true,
-        "yarn.lock": true,
-        "**/.keep": true,
-        ".github": true,
+        "debug.log": true,
+        "yarn*": true,
         ".next": true,
-        "data": true
-    }
+        "data": true,
+    },
+    "i18n-ally.localesPaths": [
+        "src/locales"
+    ],
+    "i18n-ally.keystyle": "nested"
 }

README.md

@@ -1,10 +1,136 @@
 
-### A Theme Builder for Directus
+# next-leaflet
 
-Customizing the Directus app with a specific color can be a hassle due to the need to convert the color to a CSS object. To simplify this process, a web application has been built that offers an easier way to apply a custom color using a color converter. The application eliminates the need to go through the tedious process of converting a single color and provides a more efficient solution. Try it out by clicking on the link below.
+An optimized tech stack for efficiency, an all-in-one solution to quickly build modern web apps.
 
-> _**TLDR**: Easier way to apply a custom color with a webapp color converter._
+<b>Looking for the [(directus)](https://github.com/ThijmenGThN/next-directus) branch?</b>
 
-**https://heuve.link/directus-themebuilder**
+![preview](https://i.imgur.com/uNKXhM7.png)
 
-![Preview](https://i.imgur.com/TjqUTRp.png)
+<b>For now; next-leaflet is deemed to be stable, but usage in a production environment is not suggested.</b>
+
+<b>Use at your own discretion!</b>
+
+# Features
+
+- User authorization [(nextauth)](https://next-auth.js.org/)
+    - Credentials
+    - OAuth2 [(providers)](https://next-auth.js.org/providers/)
+- Form validation [(zod)](https://zod.dev)
+- Emails [(react email)](https://react.email)
+- Server Actions
+
+# Build with
+
+- NextJS [(site)](https://nextjs.org)
+- NextAuth [(site)](https://next-auth.js.org/)
+- Prisma [(site)](https://www.prisma.io)
+- TailwindCSS [(site)](https://tailwindcss.com)
+
+# Getting started
+
+## Dependencies
+
+- NodeJS [(site)](https://nodejs.org) ` >16.8 `
+- Docker [(site)](https://docker.com/get-started/) ` >24 `
+- Docker Compose [(site)](https://docs.docker.com/compose/install) ` >1.28 `
+
+## Setup
+
+1. Clone the repository to your system. 
+```sh
+git clone https://github.com/ThijmenGThN/next-leaflet
+```
+```sh
+cd next-leaflet
+```
+
+2. Preparing the environment, it is recommend to use the sample file.
+```sh
+cp sample.env .env
+```
+```sh
+nano .env
+```
+
+3. Install the required dependencies, by default we do this with yarn.
+```
+yarn install
+```
+> <b>Don't have yarn installed? </b><br/>
+> You can install it via npm.
+> ```sh
+> npm i -g yarn
+> ```
+
+## Development
+
+1. Running Next.js in devmode.
+```sh
+yarn dev
+```
+
+2. Starting the database.
+```sh
+docker-compose up -d
+```
+> <b>A fresh installation needs an additional step.</b><br/>
+> Apply prisma's schema to the database.
+> ```sh
+> npx prisma db push
+> ```
+
+## Deployment
+
+To deploy next-leaflet we use docker by default, if you'd like to do it without docker, follow the <b>Development</b> procedure whilst changing step 1 to ` yarn deploy `.
+
+> <b>Set the right variables.</b><br />
+> Ensure that ` COMPOSE_PROFILES ` has been set to ` prod ` in the environment file so docker knows to also deploy the ` app ` service alongside the ` database `.
+>
+> Also make sure that the ` PRISMA_CONNECTOR ` has been set right, the default "<b>localhost</b>" won't work in deployment, instead replace it with "<b>database</b>".
+
+0. Pull down any existing services that might run in the background.
+```sh
+docker-compose down
+```
+
+1. Start next-leaflet in deployment-mode.
+```sh
+docker-compose up -d
+```
+
+> <b>next-leaflet should (after a while) go up on port ` 3000 `.</b><br />
+> Display the console logs if the service is not going online. Do take note that the port might differ if adjusted in the environment file.
+> ```sh
+> docker-compose logs
+> ```
+
+### GitHub Actions
+
+Setting up CI/CD with next-leaflet is not only a breeze to setup but also very useful to eliminate deployment steps.
+
+<b>This setup will guide you to deploy your next-leaflet app on an ssh-accessible host.</b>
+
+#### Configure environment variables
+
+0. Requirements
+ - Ensure that you have access to an active GitHub Actions (runner).
+ - Install docker(-compose) on the server you'd like to deploy next-leaflet on.
+    - Docker [(site)](https://docker.com/get-started/) ` >24 `
+    - Docker Compose [(site)](https://docs.docker.com/compose/install) ` >1.28 `
+
+1. Within GitHub navigate to ` Settings > Secrets and variables > Actions `.
+
+2. Create the following repository secrets:
+
+Name|Expects|Description
+-|-|-
+SSH_KEY|Private Key|Generate a new ssh key without a password.
+SSH_HOST|IP Address|The address of your server with an Actions (runner) active.
+SSH_USER|Username|Host system user where next-leaflet should be deploy on.
+SSH_PORT|Port Number|This usually refers to the default ssh port 22.
+APP_ENV|Environment|A copy of .env.sample with adjusted values for deployment.
+
+3. Designate a trigger branch within the ` .github/deploy.yml ` file.
+
+> Any change pushed to the targeted branch should now trigger a request to deploy next-leaflet via docker-compose.

app/[locale]/(auth)/OAuth.tsx

@@ -0,0 +1,46 @@
+"use client"
+
+import { useEffect, useState } from "react"
+import { useTranslations } from "next-intl"
+import { signIn, getProviders } from "next-auth/react"
+
+const callbackUrl = '/dashboard'
+
+export default function Component() {
+    const t = useTranslations()
+
+    const [providers, setProviders] = useState<Array<any>>([])
+
+    useEffect(() => { getProviders().then(({ credentials, ...OAuth }: any) => setProviders(Object.values(OAuth))) }, [])
+
+    return providers.length > 0 && (
+        <>
+            <div className="relative mt-5">
+                <div className="absolute inset-0 flex items-center" aria-hidden="true">
+                    <div className="w-full border-t border-gray-200" />
+                </div>
+                <div className="relative flex justify-center text-sm font-medium leading-6">
+                    <span className="bg-white px-6 text-gray-900">
+                        {t('auth.or-continue-with')}
+                    </span>
+                </div>
+            </div>
+
+            <ul className="mt-6 grid grid-cols-2 gap-4">
+                {
+                    providers.map((provider: any) =>
+                        <li key={provider.id}>
+                            <button className="flex w-full items-center justify-center gap-3 rounded-md bg-black hover:bg-zinc-900 px-3 py-1.5 text-white"
+                                onClick={() => signIn(provider.id, { callbackUrl })}
+                            >
+                                <span className="text-sm font-semibold leading-6">
+                                    {provider.name}
+                                </span>
+                            </button>
+                        </li>
+                    )
+                }
+            </ul>
+        </>
+    )
+}