docs: udpate REAMD and open graph

README.md

@@ -1 +1,31 @@
-Access token generator for Akkoma, Pleroma, Mastodon, Misskey APIs.
+Generate access tokens for [Akkoma](https://akkoma.social/), [Pleroma](https://pleroma.social/), and [Mastodon](https://joinmastodon.org/) APIs with ease.
+
+**Features**:
+- Create an application
+- Obtain an account's access token
+
+Build with Next.js(13) and [shadcn/ui](https://ui.shadcn.com/)
+## Implemantaion
+
+| Software | Status     |
+| -------- | ---------- |
+| Akkoma   | ✅         |
+| Pleroma  | ✅         |
+| Mastodon | ✅         |
+| Misskey  | 🟡 Pending |
+
+
+Misskey's implementation is more complex and is currently pending due to this issue: [OAuth2 Provider実装](https://github.com/misskey-dev/misskey/issues/8262)
+
+## Use Cases for the Generated Data:
+- Utilize Mastodon, Pleroma, and Akkoma as OAuth2 Providers
+- Create your own bot!
+
+## Motivation
+
+Access tokens are frequently used in development, but Akkoma and Pleroma lack an intuitive way to obtain one, unlike Mastodon. The only way to create an application and get an account's access token is to mock HTTP requests using tools like Postman. Since the HTTP request body is highly flexible, it can contain typos or other errors, and changing authorization scopes is not convenient. Pleroma's available authorization scopes are not as clear as Mastodon's, which sometimes leads to setting overly broad permissions, compromising user security and violating the principle of minimal authorization scope.
+
+To address this issue, I wanted Akkoma to have an easy way to register a client app and obtain an access token for testing. I opened an issue on [Akkoma-fe](https://akkoma.dev/AkkomaGang/akkoma-fe/issues/296), but it has been pending for about a month without any response from the developer. As a result, I created this project.
+
+This app is inspired by the [Access Token Generator for Pleroma](https://tools.splat.soy/pleroma-access-token/) API, but offers more features, such as finer-grained admin scopes, no analytics, and no data storage in local storage, making it a safer option.
+

app/layout.tsx

@@ -11,6 +11,32 @@ export const metadata = {
     { media: "(prefers-color-scheme: light)", color: "white" },
     { media: "(prefers-color-scheme: dark)", color: "black" },
   ],
+  icons: {
+    icon: '/favicon.ico',
+    shortcut: '/favicon-16x16/png',
+    apple: "/apple-touch-icon.png",
+  },
+  openGraph: {
+    title: 'M-OAuth',
+    description: 'Access token generator for Akkoma, Pleroma, Mastodon, Misskey APIs.',
+    url: 'https://moauth.seviche.cc',
+    siteName: 'M-OAuth',
+    images: [
+      {
+        url: 'https://nextjs.org/og.png',
+        width: 800,
+        height: 600,
+      },
+      {
+        url: 'https://nextjs.org/og-alt.png',
+        width: 1800,
+        height: 1600,
+        alt: 'My custom alt',
+      },
+    ],
+    locale: 'en_US',
+    type: 'website',
+  },
 };
 
 export default function RootLayout({

components/Branding.tsx

@@ -18,7 +18,7 @@ const Brand = () => {
       <div className="grid md:grid-cols-3 items-end">
         <div className="col-span-2 "> 
           <p className="text-md ml-2 text-muted-foreground">
-            Access token generator for{" "}
+            Generate access tokens for {" "}
             <a
               href="https://akkoma.social/"
               className="text-primary underline-offset-4 hover:underline"
@@ -46,7 +46,7 @@ const Brand = () => {
             >
               Misskey
             </a>{" "} */}
-            APIs.
+            APIs with ease.
           </p>
           <a href="https://github.com/Sevichecc">
             <Button variant="link" className="rounded-full p-2">

components/CreatAppForm.tsx

@@ -113,7 +113,7 @@ const CreateAppForm: React.FC<CreateAppFormProps> = ({
                   <SelectItem value="mastodon" className="flex">
                     <span className="flex">
                       <Image
-                        src="https://cdn.simpleicons.org/mastodon"
+                        src="/mastodon.svg"
                         width="15"
                         height="15"
                         alt="Mastodon"
@@ -125,7 +125,7 @@ const CreateAppForm: React.FC<CreateAppFormProps> = ({
                   <SelectItem value="pleroma">
                     <span className="flex">
                       <Image
-                        src="https://cdn.simpleicons.org/pleroma"
+                        src="/pleroma.svg"
                         width="15"
                         height="15"
                         alt="Pleroma"

package.json

@@ -2,6 +2,7 @@
   "name": "m-oauth",
   "version": "0.0.1",
   "private": true,
+  "author": "SevicheCC",
   "scripts": {
     "dev": "next dev --turbo",
     "build": "NODE_ENV=production next build",
@@ -19,23 +20,16 @@
     "@radix-ui/react-select": "^1.2.2",
     "@radix-ui/react-slot": "^1.0.2",
     "@radix-ui/react-toast": "^1.1.4",
-    "@types/node": "20.2.5",
-    "@types/react": "18.2.7",
-    "@types/react-dom": "18.2.4",
-    "autoprefixer": "^10.4.14",
     "class-variance-authority": "^0.6.0",
     "clsx": "^1.2.1",
-    "eslint-config-next": "13.4.4",
     "lucide-react": "^0.240.0",
     "next": "13.4.4",
     "next-themes": "^0.2.1",
-    "postcss": "^8.4.24",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-hook-form": "^7.44.3",
     "tailwind-merge": "^1.13.0",
     "tailwindcss-animate": "^1.0.5",
-    "typescript": "5.0.4",
     "zod": "^3.21.4"
   },
   "devDependencies": {
@@ -45,6 +39,13 @@
     "lint-staged": "^13.2.2",
     "prettier": "^2.8.8",
     "prettier-plugin-tailwindcss": "^0.3.0",
-    "tailwindcss": "^3.3.2"
+    "tailwindcss": "^3.3.2",
+    "@types/node": "20.2.5",
+    "@types/react": "18.2.7",
+    "@types/react-dom": "18.2.4",
+    "eslint-config-next": "13.4.4",
+    "autoprefixer": "^10.4.14",
+    "postcss": "^8.4.24",
+    "typescript": "5.0.4"
   }
 }

public/mastodon.svg

@@ -0,0 +1 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Mastodon</title><path fill="#6364FF" d="M23.268 5.313c-.35-2.578-2.617-4.61-5.304-5.004C17.51.242 15.792 0 11.813 0h-.03c-3.98 0-4.835.242-5.288.309C3.882.692 1.496 2.518.917 5.127.64 6.412.61 7.837.661 9.143c.074 1.874.088 3.745.26 5.611.118 1.24.325 2.47.62 3.68.55 2.237 2.777 4.098 4.96 4.857 2.336.792 4.849.923 7.256.38.265-.061.527-.132.786-.213.585-.184 1.27-.39 1.774-.753a.057.057 0 0 0 .023-.043v-1.809a.052.052 0 0 0-.02-.041.053.053 0 0 0-.046-.01 20.282 20.282 0 0 1-4.709.545c-2.73 0-3.463-1.284-3.674-1.818a5.593 5.593 0 0 1-.319-1.433.053.053 0 0 1 .066-.054c1.517.363 3.072.546 4.632.546.376 0 .75 0 1.125-.01 1.57-.044 3.224-.124 4.768-.422.038-.008.077-.015.11-.024 2.435-.464 4.753-1.92 4.989-5.604.008-.145.03-1.52.03-1.67.002-.512.167-3.63-.024-5.545zm-3.748 9.195h-2.561V8.29c0-1.309-.55-1.976-1.67-1.976-1.23 0-1.846.79-1.846 2.35v3.403h-2.546V8.663c0-1.56-.617-2.35-1.848-2.35-1.112 0-1.668.668-1.67 1.977v6.218H4.822V8.102c0-1.31.337-2.35 1.011-3.12.696-.77 1.608-1.164 2.74-1.164 1.311 0 2.302.5 2.962 1.498l.638 1.06.638-1.06c.66-.999 1.65-1.498 2.96-1.498 1.13 0 2.043.395 2.74 1.164.675.77 1.012 1.81 1.012 3.12z"/></svg>

public/misskey.svg

@@ -0,0 +1 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Misskey</title><path d="M8.91076 16.8915c-1.03957.0038-1.93213-.6294-2.35267-1.366-.22516-.3217-.66989-.4364-.6761 0v2.0148c0 .8094-.29152 1.5097-.87581 2.1002-.56755.573-1.25977.8595-2.0779.8595-.80014 0-1.49298-.2865-2.07727-.8601C.28408 19.05 0 18.3497 0 17.5403V6.45968c0-.62378.17553-1.18863.52599-1.69455.36657-.52284.83426-.88582 1.4018-1.08769a2.84574 2.84574 0 0 1 1.00049-.17742c.90125 0 1.65239.35421 2.25281 1.06262l2.99713 3.51572c.06699.05016.263.43696.73192.43696.47016 0 .6916-.3868.75796-.43758l2.9717-3.5151c.6178-.70841 1.377-1.06262 2.2782-1.06262.3337 0 .6675.05893 1.0012.17742.5669.20187 1.0259.56422 1.377 1.08769.3665.50592.5501 1.07077.5501 1.69455V17.5403c0 .8094-.2915 1.5097-.8758 2.1002-.5675.573-1.2604.8595-2.0779.8595-.8008 0-1.493-.2865-2.0779-.8601-.5669-.5899-.8504-1.2902-.8504-2.0996v-2.0148c-.0496-.5499-.5303-.2032-.7009 0-.4503.8431-1.31369 1.3616-2.35264 1.366ZM21.447 8.60998c-.7009 0-1.3015-.24449-1.8019-.73348-.4838-.50571-.7257-1.11277-.7257-1.82118s.2419-1.30711.7257-1.79611c.5004-.50571 1.101-.75856 1.8019-.75856.7009 0 1.3017.25285 1.8025.75856.5003.489.7505 1.0877.7505 1.79611 0 .70841-.2502 1.31547-.7505 1.82118-.5008.48899-1.1016.73348-1.8025.73348Zm.0248.50655c.7009 0 1.2935.25285 1.7777.75856.5003.50571.7505 1.11301.7505 1.82181v6.2484c0 .7084-.2502 1.3155-.7505 1.8212-.4838.489-1.0764.7335-1.7777.7335-.7005 0-1.3011-.2445-1.8019-.7335-.5003-.5057-.7505-1.1128-.7505-1.8212v-6.2484c0-.7084.2502-1.3157.7505-1.82181.5004-.50571 1.101-.75856 1.8019-.75856Z"/></svg>

public/pleroma.svg

@@ -0,0 +1 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Pleroma</title><path fill="#FBA457" d="M6.36 0A1.868 1.868 0 004.49 1.868V24h5.964V0zm7.113 0v12h4.168a1.868 1.868 0 001.868-1.868V0zm0 18.036V24h4.168a1.868 1.868 0 001.868-1.868v-4.096Z"/></svg>