Merge pull request #17 from Mgkusumaputra/pp-46-readme-docs

PP 46 readme docs

.env.example

@@ -1,4 +1,4 @@
-# See detailed setup guide at 
+# See detailed setup guide at https://mgkusumaputra.my.id/linktion/guide
 
 # Notion Credentials
 NEXT_PUBLIC_NOTION_INTEGRATION_SECRET=

.prettierignore

@@ -35,7 +35,8 @@ yarn-error.log*
 # vercel
 .vercel
 
-# changelog
+# markdown
 CHANGELOG.md
+README.md
 
 pnpm-lock.yaml

README.md

@@ -1,36 +1,43 @@
-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
-# or
-pnpm dev
-# or
-bun dev
-```
-
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
-
-You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
-
-This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
-
-## 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.
+<div align="center">
+    <a href="https://linktion.mgkusumaputra.me">
+        <img src="https://res.cloudinary.com/dspkhqhkv/image/upload/v1721612393/Linktion/Logo_rzo2u8.png" width="90" height="90"/>
+    </a>
+    <h1>Linktion</h1>
+    <p>Self-hosted, open-source link-in-bio website with Notion integration.</p>
+    <p>
+    <a href="https://linktion.mgkusumaputra.me"><strong>Demo</strong></a> · <a href="https://github.com/mgkusumputra/linktion/issues"><strong>Add Issues</strong></a> · <a href="https://tally.so/r/w4jyOo"><strong>Feature Request</strong></a>
+  </p>
+  <a href="https://github.com/mgkusumaputra/linktion/stargazers">
+    <img alt="GitHub Repo stars" src="https://img.shields.io/github/stars/mgkusumaputra/linktion?style=flat&labelColor=FFFFF&color=000000">
+  </a>
+  <a href="https://github.com/mgkusumaputra/linktion/network/members">
+    <img alt="GitHub forks" src="https://img.shields.io/github/forks/mgkusumaputra/linktion?style=flat&labelColor=FFFFF&color=000000">
+  </a>
+  <a href="https://github.com/Mgkusumaputra/linktion/deployments/activity_log?environment=Production">
+    <img alt="GitHub deployments" src="https://img.shields.io/github/deployments/mgkusumaputra/linktion/production?label=deployement&style=flat&labelColor=FFFFF&color=000000">
+  </a>
+  <a href="https://github.com/Mgkusumaputra/linktion/issues">
+    <img alt="GitHub issues" src="https://img.shields.io/github/issues/mgkusumaputra/linktion?style=flat&labelColor=FFFFF&color=000000">
+  </a>
+  <a href="https://github.com/Mgkusumaputra/linktion/releases">
+    <img alt="GitHub package.json version (branch)" src="https://img.shields.io/github/package-json/v/mgkusumaputra/linktion/master?label=version&style=flat&labelColor=FFFFF&color=000000">
+  </a>
+</div>
+
+## Installation Guide 🛠
+Read the full guide installation for using Linktion on [this notion page](https://mgkusumaputra.my.id/linktion/guide)
+
+Please follow all steps in the tutorial to minimize missing configurations. Deploy with vercel below
+
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2FMgkusumaputra%2Flinktion&env=NEXT_PUBLIC_NOTION_INTEGRATION_SECRET,NEXT_PUBLIC_NOTION_CONFIG_DATABASE_ID,NEXT_PUBLIC_NOTION_TREE_DATABASE_ID&project-name=my-linktion&repository-name=my-linktion&demo-title=Linktion%20Kit&demo-description=A%20template%20for%20using%20Linktion&demo-url=https%3A%2F%2Flinks.mgkusumaputra.me%2FLinktion-Vercel&demo-image=https%3A%2F%2Fres.cloudinary.com%2Fdspkhqhkv%2Fimage%2Fupload%2Fv1721612396%2FLinktion%2FOG_Banner_-_Linktion_ims8np.png)
+
+## Features 🧱
+- 🏆 Unlimited Linktree
+- 🔐 Self-hostable with your own domain
+- ⚙ Using Notion as a powerful CMS
+- 📊 Linktree click count statistics
+- 🛠 No hard coding, all configuration from Notion
+- 🎨 Custom themes
+
+### Themes
+See the full list of available themes on [this notion page](https://mgkusumaputra.my.id/linktion/theme)

app/layout.tsx

@@ -10,8 +10,22 @@ import { getConfigData } from '../lib/notion';
 const plusJakartaSans = Plus_Jakarta_Sans({ subsets: ['latin'] });
 
 export const metadata: Metadata = {
-  title: 'Create Next App',
-  description: 'Generated by create next app',
+  metadataBase: new URL('https://linktion.mgkusumaputra.me'),
+  title: 'Linktion - Linktree Built With Notion',
+  description:
+    'self-hosted, open-source link-in-bio website with Notion integration.',
+  openGraph: {
+    title: 'Linktion - Linktree Built With Notion',
+    description:
+      'self-hosted, open-source link-in-bio website with Notion integration.',
+    url: 'https://linktion.mgkusumaputra.me',
+    siteName: 'Linktion - Linktree Built With Notion',
+    type: 'website',
+  },
+  twitter: {
+    title: 'Linktion - Linktree Built With Notion',
+    card: 'summary_large_image',
+  },
 };
 
 async function fetchConfigData() {