noham/lanyard-profile-readme
1
0
Fork 0
mirror of https://github.com/NohamR/lanyard-profile-readme.git synced 2026-05-25 20:00:40 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add actual readme

Browse Source
This commit is contained in:
Conrad Crawford
2021-06-19 21:30:44 -04:00
committed by GitHub
parent 97212365c4
commit b3b683c272
1 changed files with 22 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
README.md
View File

@@ -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).
<!-- markdownlint-disable -->
# 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.