diff --git a/README.md b/README.md index 384991c..c579f81 100644 --- a/README.md +++ b/README.md @@ -1,34 +1,36 @@ -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). + +# lanyard-profile-readme -## Getting Started +🏷️ Utilize Lanyard in your GitHub Profile -First, run the development server: +_Special thanks to [@Phineas](github.com/Phineas/) for creating Lanyard, and making this project possible_ -```bash -npm run dev -# or -yarn dev +## Usage + +_(Make sure you're in the Lanyard [Discord](discord.gg/wscam7vngf) for this to work!_ + +In a `README.md` file, include the following, replacing `:id` with your Discord user ID. + +```md +[![Discord Presence](https://lanyard-profile-readme.vercel.app/api/:id)](https://discord.com/users/:id) ``` -Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. +It should display something similar the following (I am using my Discord user ID as an example): -You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file. +[![Discord Presence](https://lanyard-profile-readme.vercel.app/api/705665813994012695)](https://discord.com/users/705665813994012695) -[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.tsx`. +## Options (wip) -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. +There are a few options to customize this display using query parameters: -## Learn More +### ___Theme___ -To learn more about Next.js, take a look at the following resources: +Append the query param `theme=:theme` to the end of the URL, replacing `:theme` with either `light` or `dark`. This will change the background and the font colors, but the background can be overridden with the ___Background Color___ parameter. -- [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. +### ___Background Color___ -You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome! +Append the query param `bg=:color` to the end of the URL, replacing `:color` with a hex color of your choice (omit the #) -## Deploy on Vercel +### ___Toggle Animated Avatar___ -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. +If you have an animated avatar, append the query param `animated=:bool` to the end of the URL, replacing `:bool` with `true` or `false`. This is set to `true` by default.