nextjs + new client id

.github/workflows/pages.yml

@@ -16,4 +16,4 @@ jobs:
         uses: JamesIves/github-pages-deploy-action@4.1.4
         with:
           branch: gh-pages
-          folder: src/web
+          folder: src/web-old

.vscode/settings.json

@@ -4,7 +4,7 @@
         {
             "format": "expanded",
             "extensionName": ".css",
-            "savePath": "/src/web/dist"
+            "savePath": "/src/web/styles/css"
         }
     ]
 }

README.md

@@ -4,4 +4,4 @@
 
 Discord bot for reaction roles that works with [Cloudflare Workers](https://workers.cloudflare.com/).
 
-You can add the bot to your server, just click [here](https://discord.com/api/oauth2/authorize?client_id=905540851718037565&permissions=268435456&scope=bot%20applications.commands).
+You can add the bot to your server, just click [here](https://discord.com/api/oauth2/authorize?client_id=923267906941370368&permissions=268435456&scope=bot%20applications.commands).

formats.js

@@ -1,4 +1,4 @@
-{
+module.exports = {
     "message": "lol",
     "channel": "862700556438732851",
     "roles": [

src/web/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

src/web/.gitignore

@@ -0,0 +1,37 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo

src/web/README.md

@@ -0,0 +1,34 @@
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file.
+
+[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.ts`.
+
+The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

src/web/next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

src/web/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "web",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "next": "12.0.7",
+    "react": "17.0.2",
+    "react-dom": "17.0.2"
+  },
+  "devDependencies": {
+    "@types/node": "17.0.2",
+    "@types/react": "17.0.37",
+    "eslint": "8.5.0",
+    "eslint-config-next": "12.0.7",
+    "typescript": "4.5.4"
+  }
+}

src/web/pages/_app.tsx

@@ -0,0 +1,6 @@
+import '../styles/css/style.css';
+import type { AppProps } from 'next/app';
+
+export default function MyApp({ Component, pageProps }: AppProps) {
+  return <Component {...pageProps} />
+}

src/web/pages/index.tsx

@@ -0,0 +1,31 @@
+import Head from "next/head";
+
+export default function Home() {
+  return (
+    <div>
+      <Head>
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.3.1/styles/default.min.css" />
+      </Head>
+      <section className="flex-container">
+        <div className="container animate__animated animate__fadeIn">
+            <h1>Generate</h1>
+            <form>
+                <input placeholder="Your Message" name="message" id="message"/><br />
+                <input placeholder="Channel Id" name="channel" id="channel"/>
+            </form>
+            <button id="addRole">Add Role</button>
+            <button id="buttonCopy">Copy</button>
+            <img src="slash.png" className="responsive" />
+            <pre className={`hljs language-json copy`} id="jsonPre"><code id="json" className="code"></code></pre>
+        </div>
+      </section>
+
+      <script src="https://kit.fontawesome.com/5acf4d9e80.js" crossOrigin="anonymous"></script>
+      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
+      <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.3.1/highlight.min.js"></script>
+      <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
+      <script src="script.js"></script>
+      <script>hljs.initHighlightingOnLoad();</script>
+    </div>
+  )
+}

src/web/public/script.js

@@ -1,68 +1,68 @@
-let json = {
+let json = {
-    roles: []
+    roles: []
-}
+}
-
+
-$('input').change((e) => {
+$('input').change((e) => {
-    json[e.currentTarget.id] = e.currentTarget.value;
+    json[e.currentTarget.id] = e.currentTarget.value;
-
+
-    document.getElementById('json').innerHTML = hljs.highlight(JSON.stringify(json), { language: 'json' }).value;
+    document.getElementById('json').innerHTML = hljs.highlight(JSON.stringify(json), { language: 'json' }).value;
-})
+})
-
+
-$('button[id=addRole]').click((e) => {
+$('button[id=addRole]').click((e) => {
-    Swal.fire({
+    Swal.fire({
-        title: 'Add Role',
+        title: 'Add Role',
-        html:
+        html:
-            '<input id="swal-input1" class="swal2-input" placeholder="Button Label*" required>' +
+            '<input id="swal-input1" class="swal2-input" placeholder="Button Label*" required />' +
-            '<input id="swal-input2" class="swal2-input" placeholder="Role Id*" required>' +
+            '<input id="swal-input2" class="swal2-input" placeholder="Role Id*" required />' +
-            '<input id="swal-input3" class="swal2-input" placeholder="Emoji">',
+            '<input id="swal-input3" class="swal2-input" placeholder="Emoji" />',
-        preConfirm: function () {
+        preConfirm: function () {
-            return new Promise(function (resolve) {
+            return new Promise(function (resolve) {
-                resolve([
+                resolve([
-                    $('#swal-input1').val(),
+                    $('#swal-input1').val(),
-                    $('#swal-input2').val(),
+                    $('#swal-input2').val(),
-                    $('#swal-input3').val()
+                    $('#swal-input3').val()
-                ])
+                ])
-            })
+            })
-        },
+        }
-    }).then(function (result) {
+    }).then(function (result) {
-        if (result.value?.[0] && result.value?.[1]) {
+        if (result.value?.[0] && result.value?.[1]) {
-            json.roles.push({
+            json.roles.push({
-                id: result.value[1],
+                id: result.value[1],
-                label: result.value[0],
+                label: result.value[0],
-                emoji: result.value[2] || null
+                emoji: result.value[2] || null
-            })
+            })
-
+
-            document.getElementById('json').innerHTML = hljs.highlight(JSON.stringify(json), { language: 'json' }).value;
+            document.getElementById('json').innerHTML = hljs.highlight(JSON.stringify(json), { language: 'json' }).value;
-        } else Swal.fire('Missing parameters')
+        } else Swal.fire('Missing parameters')
-    }).catch(swal.noop)
+    }).catch(swal.noop)
-})
+})
-
+
-$('pre[id=jsonPre].copy').click((e) => {
+$('pre[id=jsonPre].copy').click((e) => {
-    navigator.clipboard.writeText(e?.currentTarget?.textContent || e.textContent);
+    navigator.clipboard.writeText(e?.currentTarget?.textContent || e.textContent);
-
+
-    Swal.fire({
+    Swal.fire({
-        position: 'top-end',
+        position: 'top-end',
-        icon: 'success',
+        icon: 'success',
-        title: 'Copied!',
+        title: 'Copied!',
-        showConfirmButton: false,
+        showConfirmButton: false,
-        timer: 1500
+        timer: 1500
-    })
+    })
-})
+})
-
+
-$('button[id=buttonCopy]').click((e) => {
+$('button[id=buttonCopy]').click((e) => {
-    const element = $('pre[id=jsonPre].copy')[0];
+    const element = $('pre[id=jsonPre].copy')[0];
-    navigator.clipboard.writeText(element?.currentTarget?.textContent || element.textContent);
+    navigator.clipboard.writeText(element?.currentTarget?.textContent || element.textContent);
-
+
-    Swal.fire({
+    Swal.fire({
-        position: 'top-end',
+        position: 'top-end',
-        icon: 'success',
+        icon: 'success',
-        title: 'Copied!',
+        title: 'Copied!',
-        showConfirmButton: false,
+        showConfirmButton: false,
-        timer: 1500
+        timer: 1500
-    })
+    })
-})
+})
-
+
-$(window).on('load', () => {
+$(window).on('load', () => {
-    $('input').toArray().forEach((i) => i.value = '');
+    $('input').toArray().forEach((i) => i.value = '');
-    document.getElementById('json').innerHTML = hljs.highlight(JSON.stringify(json), { language: 'json' }).value;
+    document.getElementById('json').innerHTML = hljs.highlight(JSON.stringify(json), { language: 'json' }).value;
 })

src/web/styles/css/style.css.map

@@ -2,12 +2,12 @@
     "version": 3,
     "mappings": "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",
     "sources": [
-        "../app/scss/style.scss",
+        "../scss/style.scss",
-        "../app/scss/_globals.scss",
+        "../scss/_globals.scss",
-        "../app/scss/_vars.scss",
+        "../scss/_vars.scss",
-        "../app/scss/_containers.scss",
+        "../scss/_containers.scss",
-        "../app/scss/_textstyle.scss",
+        "../scss/_textstyle.scss",
-        "../app/scss/_forumstyle.scss"
+        "../scss/_forumstyle.scss"
     ],
     "names": [],
     "file": "style.css"

src/web/styles/scss/_containers.scss

@@ -1,37 +1,37 @@
-.flex-container{
+.flex-container{
-    height: 100vh;
+    height: 100vh;
-    display: flex;
+    display: flex;
-    justify-content: center;
+    justify-content: center;
-    align-items: center;
+    align-items: center;
-    flex-direction: column;
+    flex-direction: column;
-    //border-style: dashed;
+    //border-style: dashed;
-    //border-color: white;
+    //border-color: white;
-}
+}
-
+
-.container {
+.container {
-    background-color: #0e0e0e;
+    background-color: #0e0e0e;
-    filter: drop-shadow(0 0 0.75rem #0e0e0e);
+    filter: drop-shadow(0 0 0.75rem #0e0e0e);
-    display: flex;
+    display: flex;
-    justify-content: center;
+    justify-content: center;
-    align-items: center;
+    align-items: center;
-    flex-direction: column;
+    flex-direction: column;
-    padding: 4rem 8rem;
+    padding: 4rem 8rem;
-    border-radius: 1.2rem;
+    border-radius: 1.2rem;
-    //border-style: dashed;
+    //border-style: dashed;
-    //border-color: white;
+    //border-color: white;
-}
+}
-
+
-form{
+form{
-    flex-direction: column;
+    flex-direction: column;
-    //border-style: dashed;
+    //border-style: dashed;
-    //border-color: white;
+    //border-color: white;
-}
+}
-
+
-@media screen and (max-width:600px) {
+@media screen and (max-width:600px) {
-    .container {
+    .container {
-        padding: 1rem 1.2rem;
+        padding: 1rem 1.2rem;
-        border-radius: 1.2rem;
+        border-radius: 1.2rem;
-        //border-style: dashed;
+        //border-style: dashed;
-        //border-color: white;
+        //border-color: white;
-    }
+    }
 }

src/web/styles/scss/_forumstyle.scss

@@ -1,53 +1,53 @@
-button {
+button {
-    background-color: var(--yellow);
+    background-color: var(--yellow);
-    border-radius: .2rem;
+    border-radius: .2rem;
-    border-style: none;
+    border-style: none;
-    margin-top: .8rem;
+    margin-top: .8rem;
-    font-size: 1.2rem;
+    font-size: 1.2rem;
-    padding: .2rem .8rem;
+    padding: .2rem .8rem;
-    filter: drop-shadow(0 0 0.75rem #363636);
+    filter: drop-shadow(0 0 0.75rem #363636);
-    transition: .2s;
+    transition: .2s;
-    cursor: pointer;
+    cursor: pointer;
-
+
-    &:hover{
+    &:hover{
-        background-color: var(--yellow-dark); 
+        background-color: var(--yellow-dark); 
-    }
+    }
-}
+}
-
+
-input {
+input {
-    color: white;
+    color: white;
-    padding: .2rem .5rem;
+    padding: .2rem .5rem;
-    background-color: var(--codeblock);
+    background-color: var(--codeblock);
-    margin-top: .3rem;
+    margin-top: .3rem;
-    font-size: 1.2rem;
+    font-size: 1.2rem;
-    border-style: none;
+    border-style: none;
-    border-radius: .2rem;
+    border-radius: .2rem;
-}
+}
-
+
-.code{
+.code{
-max-width: 900px;
+max-width: 900px;
-}
+}
-
+
-.copy {
+.copy {
-    cursor: pointer;
+    cursor: pointer;
-}
+}
-
+
-.responsive {
+.responsive {
-    width: 100%;
+    width: 100%;
-    padding: 10px;
+    padding: 10px;
-    max-width: 100rem;
+    max-width: 100rem;
-    height: auto;
+    height: auto;
-}
+}
-
+
-@media screen and (max-width:600px) {
+@media screen and (max-width:600px) {
-    input {
+    input {
-        font-size: 1rem;
+        font-size: 1rem;
-    }
+    }
-    button {
+    button {
-        font-size: 1rem;
+        font-size: 1rem;
-        padding: .1rem .5rem;
+        padding: .1rem .5rem;
-    }
+    }
-    .code{
+    .code{
-        max-width: 300px;
+        max-width: 300px;
-        }
+        }
 }

src/web/styles/scss/_globals.scss

@@ -1,17 +1,17 @@
-html {
+html {
-  font-size: 100%;
+  font-size: 100%;
-  box-sizing: border-box;
+  box-sizing: border-box;
-}
+}
-*,
+*,
-*::before,
+*::before,
-*::after {
+*::after {
-  box-sizing: inherit;
+  box-sizing: inherit;
-}
+}
-body {
+body {
-  font-family: Arial, Helvetica, sans-serif;
+  font-family: Arial, Helvetica, sans-serif;
-  line-height: 1.3;
+  line-height: 1.3;
-  margin: 0;
+  margin: 0;
-  padding: 0;
+  padding: 0;
-  background-color: var(--darkmode);
+  background-color: var(--darkmode);
-  color: white;
+  color: white;
-}
+}

src/web/styles/scss/_textstyle.scss

@@ -1,26 +1,26 @@
-p {
+p {
-    font-family: 'Open Sans', sans-serif;
+    font-family: 'Open Sans', sans-serif;
-    //color: white;
+    //color: white;
-    font-size: 1rem;
+    font-size: 1rem;
-    font-weight: 200;
+    font-weight: 200;
-}
+}
-h1{
+h1{
-    font-family: 'Open Sans', sans-serif;
+    font-family: 'Open Sans', sans-serif;
-    color: white;
+    color: white;
-    font-size: 2rem;
+    font-size: 2rem;
-    font-weight: 800;
+    font-weight: 800;
-}
+}
-a{
+a{
-    font-family: 'Open Sans', sans-serif;
+    font-family: 'Open Sans', sans-serif;
-    color: white;
+    color: white;
-    font-size: 1rem;
+    font-size: 1rem;
-    text-decoration: none;
+    text-decoration: none;
-    font-weight: 400;
+    font-weight: 400;
-}
+}
-button {
+button {
-    font-family: 'Open Sans', sans-serif;
+    font-family: 'Open Sans', sans-serif;
-    color: white;
+    color: white;
-    font-size: 1rem;
+    font-size: 1rem;
-    text-decoration: none; 
+    text-decoration: none; 
-    font-weight: 400;
+    font-weight: 400;
 }

src/web/styles/scss/_vars.scss

@@ -1,7 +1,7 @@
-:root {
+:root {
-    --hyro: #eeee32;
+    --hyro: #eeee32;
-    --yellow: #ead800;
+    --yellow: #ead800;
-    --yellow-dark: #d8a603;
+    --yellow-dark: #d8a603;
-    --darkmode: #151515;
+    --darkmode: #151515;
-    --codeblock: #242424;
+    --codeblock: #242424;
 }

src/web/styles/scss/style.scss

@@ -1,6 +1,6 @@
-@import "globals";
+@import "globals";
-@import "vars";
+@import "vars";
-@import "containers";
+@import "containers";
-@import "textstyle";
+@import "textstyle";
-@import "forumstyle";
+@import "forumstyle";
 @import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,500;0,600;0,800;1,300;1,600;1,700&display=swap'); //font-family: 'Open Sans', sans-serif;

src/web/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules"]
+}