├── .gitignore
├── LICENSE
├── README.md
├── demo.png
├── nuxt.config.ts
├── package.json
├── pnpm-lock.yaml
├── src
    ├── app.vue
    ├── app
    │   └── router.options.ts
    ├── components
    │   ├── Button.vue
    │   ├── CLink.vue
    │   ├── Card
    │   │   └── CommunityProject.vue
    │   ├── FloatingButton.vue
    │   ├── Footer.vue
    │   ├── GradientBackground.vue
    │   ├── Highlight.vue
    │   ├── Loader.vue
    │   ├── Navbar.vue
    │   ├── Stargazers.vue
    │   └── content
    │   │   ├── ErrorTypes.vue
    │   │   ├── IntroductionResponse.vue
    │   │   ├── ListOpcodes.vue
    │   │   ├── NotFound.vue
    │   │   └── Pages.vue
    ├── composables
    │   └── useReadmeProjects.ts
    ├── content
    │   └── api
    │   │   ├── getting-user-presence.md
    │   │   ├── introduction.md
    │   │   ├── kv.md
    │   │   ├── quicklinks.md
    │   │   ├── self-hosting.md
    │   │   └── working-with-websockets.md
    ├── data
    │   ├── communityProjects.ts
    │   └── usedBy.ts
    ├── pages
    │   ├── api
    │   │   └── [...slug].vue
    │   └── index.vue
    └── public
    │   ├── icon.png
    │   └── social-image.png
├── tailwind.config.js
└── tsconfig.json


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | *.log*
3 | .nuxt
4 | .nitro
5 | .cache
6 | .output
7 | .env
8 | dist
9 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2022 Abdulbaki "EGGSY" Dursun
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Lanyard Website
 2 | 
 3 | [✨ Go to Lanyard's repository](https://github.com/phineas/lanyard)
 4 | 
 5 | <p align="center">
 6 |   <img src="/demo.png" alt="demo image" />
 7 | </p>
 8 | 
 9 | A new, beautiful and the-way-it-supposed-to-be way to review Lanyard, its community projects, websites that use Lanyard and the API Documentation in one place!
10 | 
11 | Built with [Nuxt 3](https://v3.nuxtjs.org), [Tailwind CSS](https://tailwindcss.com) and [VueUse](https://vueuse.org)
12 | 
13 | ## Add Your Website
14 | 
15 | To add your own website or project to show it off on here, you should go to the [main repository of Lanyard](https://github.com/phineas/lanyard) and follow the instructions there; this website parses that repository's readme file and updates itself automatically.
16 | 
17 | ### Sponsors
18 | 
19 | <p align="center">
20 |   <a href="https://github.com/sponsors/eggsy">
21 |     <img src='https://cdn.jsdelivr.net/gh/eggsy/.github/sponsors.svg'/>
22 |   </a>
23 | </p>
24 | 
25 | ### License
26 | 
27 | [MIT License](https://github.com/eggsy/lanyard-web/blob/main/LICENSE) © Abdulbaki "EGGSY" Dursun
28 | 


--------------------------------------------------------------------------------
/demo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/eggsy/lanyard-web/285050628a36b52c1eb8f9f3b6192e102bce001b/demo.png


--------------------------------------------------------------------------------
/nuxt.config.ts:
--------------------------------------------------------------------------------
 1 | // https://v3.nuxtjs.org/api/configuration/nuxt.config
 2 | export default defineNuxtConfig({
 3 |   compatibilityDate: "2024-08-12",
 4 | 
 5 |   rootDir: ".",
 6 |   srcDir: "./src",
 7 |   components: true,
 8 | 
 9 |   modules: [
10 |     "@nuxtjs/tailwindcss",
11 |     "@nuxt/content",
12 |     "@vueuse/motion/nuxt",
13 |     "@nuxt/icon",
14 |   ],
15 | 
16 |   content: {
17 |     highlight: {
18 |       theme: "one-dark-pro",
19 |     },
20 |   },
21 | 
22 |   runtimeConfig: {
23 |     public: {
24 |       DISCORD: "https://discord.gg/UrXF2cfJ7F",
25 |       API_BASE: "https://api.lanyard.rest/v1/users",
26 |       GITHUB_REPO: "https://github.com/eggsy/lanyard-web",
27 |     },
28 |   },
29 | 
30 |   tailwindcss: {
31 |     viewer: false,
32 |   },
33 | });
34 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "private": true,
 3 |   "scripts": {
 4 |     "build": "nuxt build",
 5 |     "dev": "nuxt dev",
 6 |     "generate": "nuxt generate",
 7 |     "preview": "nuxt preview"
 8 |   },
 9 |   "devDependencies": {
10 |     "@nuxt/content": "^2.13.2",
11 |     "@nuxt/icon": "^1.4.5",
12 |     "@tailwindcss/typography": "^0.5.14",
13 |     "@types/prismjs": "^1.26.4",
14 |     "nuxt": "^3.12.4",
15 |     "sass": "^1.77.8"
16 |   },
17 |   "dependencies": {
18 |     "@nuxtjs/tailwindcss": "^6.12.1",
19 |     "@vueuse/motion": "2.0.0-beta.18",
20 |     "@vueuse/shared": "^10.11.1",
21 |     "ipx": "^3.0.1",
22 |     "shiki": "^1.12.1"
23 |   }
24 | }
25 | 


--------------------------------------------------------------------------------
/src/app.vue:
--------------------------------------------------------------------------------
  1 | <script lang="ts" setup>
  2 | const small_title = "Lanyard API";
  3 | const title = "Lanyard";
  4 | const description =
  5 |   "Expose your Discord presence and activities to a RESTful API and WebSocket in less than 10 seconds";
  6 | 
  7 | useHead({
  8 |   title: "Home",
  9 |   htmlAttrs: {
 10 |     lang: "en",
 11 |   },
 12 |   bodyAttrs: {
 13 |     class: "bg-[#13131A]",
 14 |   },
 15 |   meta: [
 16 |     {
 17 |       name: "og:site_name",
 18 |       content: small_title,
 19 |     },
 20 | 
 21 |     {
 22 |       name: "title",
 23 |       content: title,
 24 |     },
 25 |     {
 26 |       name: "og:title",
 27 |       content: title,
 28 |     },
 29 |     {
 30 |       name: "twitter:title",
 31 |       content: title,
 32 |     },
 33 | 
 34 |     {
 35 |       name: "twitter:card",
 36 |       content: "summary",
 37 |     },
 38 |     {
 39 |       name: "og:image",
 40 |       content: "/social-image.png",
 41 |     },
 42 |     {
 43 |       name: "twitter:image",
 44 |       content: "/social-image.png",
 45 |     },
 46 | 
 47 |     {
 48 |       name: "description",
 49 |       content: description,
 50 |     },
 51 |     {
 52 |       name: "og:description",
 53 |       content: description,
 54 |     },
 55 |     {
 56 |       name: "twitter:description",
 57 |       content: description,
 58 |     },
 59 |   ].map((item) => {
 60 |     return {
 61 |       ...item,
 62 |       property: item.name,
 63 |     };
 64 |   }),
 65 |   link: [
 66 |     {
 67 |       rel: "icon",
 68 |       href: "/icon.png",
 69 |     },
 70 |   ],
 71 | });
 72 | </script>
 73 | 
 74 | <template>
 75 |   <div class="min-h-screen px-6 py-10 text-white lg:px-0">
 76 |     <Navbar />
 77 |     <NuxtPage class="container py-16 mx-auto lg:w-7/12" />
 78 |     <Footer />
 79 | 
 80 |     <!-- Absolute items -->
 81 |     <FloatingButton />
 82 |     <NuxtLoadingIndicator color="#D7BB87" />
 83 |     <GradientBackground />
 84 |   </div>
 85 | </template>
 86 | 
 87 | <style lang="scss">
 88 | html,
 89 | body {
 90 |   scroll-behavior: smooth;
 91 |   scrollbar-gutter: stable;
 92 |   scrollbar-width: thin;
 93 | 
 94 |   &::-webkit-scrollbar {
 95 |     @apply bg-brand/40;
 96 |     width: 8px;
 97 |   }
 98 | 
 99 |   &::-webkit-scrollbar-thumb {
100 |     @apply bg-brand;
101 |     border-radius: 4px;
102 |     box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
103 |   }
104 | }
105 | 
106 | code {
107 |   @apply bg-brand p-1 text-sm rounded-sm break-words;
108 | }
109 | 
110 | .no-scrollbar {
111 |   -ms-overflow-style: none;
112 |   scrollbar-width: none;
113 | 
114 |   &::-webkit-scrollbar {
115 |     width: 0;
116 |     height: 0;
117 |     background: transparent;
118 |   }
119 | }
120 | </style>
121 | 


--------------------------------------------------------------------------------
/src/app/router.options.ts:
--------------------------------------------------------------------------------
1 | import type { RouterConfig } from "@nuxt/schema";
2 | 
3 | export default <RouterConfig>{
4 |   scrollBehavior() {
5 |     window?.scrollTo(0, 0);
6 |   },
7 | };
8 | 


--------------------------------------------------------------------------------
/src/components/Button.vue:
--------------------------------------------------------------------------------
 1 | <script lang="ts" setup>
 2 | interface Props {
 3 |   icon?: string;
 4 |   label?: string;
 5 |   href?: string;
 6 |   blank?: boolean;
 7 | }
 8 | 
 9 | const { icon, label, href, blank } = defineProps<Props>();
10 | </script>
11 | 
12 | <template>
13 |   <Component
14 |     :is="href ? 'a' : 'button'"
15 |     :type="!href ? 'button' : null"
16 |     :href="href || null"
17 |     :target="href && blank ? '_blank' : null"
18 |     :rel="href && blank ? 'noopener noreferrer' : null"
19 |     class="flex items-center justify-center w-full text-center transition-colors rounded-lg cursor-pointer lg:w-max bg-brand/40 hover:bg-brand/50"
20 |     :class="{
21 |       'rounded-full p-3': !label && icon,
22 |       'px-8 py-3 space-x-2': label,
23 |     }"
24 |   >
25 |     <Icon :name="icon" />
26 |     <span class="text-sm font-bold">{{ label }}</span>
27 |   </Component>
28 | </template>
29 | 


--------------------------------------------------------------------------------
/src/components/CLink.vue:
--------------------------------------------------------------------------------
 1 | <script lang="ts" setup>
 2 | interface Props {
 3 |   external?: boolean;
 4 |   href: string;
 5 |   blank?: boolean;
 6 |   noDecoration?: boolean;
 7 | }
 8 | 
 9 | const { external, href, blank, noDecoration } = defineProps<Props>();
10 | </script>
11 | 
12 | <template>
13 |   <NuxtLink
14 |     :to="href"
15 |     :no-rel="external"
16 |     :target="blank ? '_blank' : null"
17 |     :class="{
18 |       'transition-colors w-max border-b border-dotted border-white/20 hover:border-white':
19 |         noDecoration === false,
20 |     }"
21 |   >
22 |     <slot />
23 |   </NuxtLink>
24 | </template>
25 | 


--------------------------------------------------------------------------------
/src/components/Card/CommunityProject.vue:
--------------------------------------------------------------------------------
 1 | <script lang="ts" setup>
 2 | interface Props {
 3 |   name: string;
 4 |   href: string;
 5 |   description: string;
 6 | }
 7 | 
 8 | const { name, href } = defineProps<Props>();
 9 | 
10 | const getNameSegments = computed(() => {
11 |   if (!href.includes("github.com"))
12 |     return {
13 |       repo: name,
14 |     };
15 | 
16 |   const [owner, repo] = href.replace("https://github.com/", "")?.split("/");
17 | 
18 |   return {
19 |     owner,
20 |     repo,
21 |   };
22 | });
23 | </script>
24 | 
25 | <template>
26 |   <div
27 |     class="bg-[#313336]/40 transition-colors flex-shrink-0 h-full p-4 rounded-lg w-80 snap-start"
28 |   >
29 |     <header class="flex flex-col space-y-2">
30 |       <div
31 |         class="flex flex-wrap items-start"
32 |         :class="{
33 |           'gap-1.5': getNameSegments.owner,
34 |         }"
35 |       >
36 |         <div
37 |           v-if="getNameSegments.owner"
38 |           class="flex items-center flex-shrink-0 space-x-2"
39 |           :class="{
40 |             'space-x-2': getNameSegments.owner,
41 |           }"
42 |         >
43 |           <img
44 |             :src="`https://github.com/${getNameSegments.owner}.png`"
45 |             loading="lazy"
46 |             alt="repo owner image"
47 |             class="flex-shrink-0 w-5 h-5 rounded-full"
48 |             @error="(e) => ((e.target as HTMLImageElement).src = '/icon.png')"
49 |           />
50 | 
51 |           <CLink
52 |             :href="`https://github.com/${getNameSegments.owner}`"
53 |             class="font-semibold text-white/25"
54 |             external
55 |             blank
56 |           >
57 |             {{ getNameSegments.owner }}
58 |           </CLink>
59 |         </div>
60 | 
61 |         <span v-if="getNameSegments.owner" class="text-sm text-white/50">
62 |           /
63 |         </span>
64 | 
65 |         <CLink :href="href" class="font-medium text-white/75" external blank>
66 |           {{ getNameSegments.repo }}
67 |         </CLink>
68 |       </div>
69 | 
70 |       <p class="text-white/50 line-clamp-3">{{ description }}</p>
71 |     </header>
72 |   </div>
73 | </template>
74 | 


--------------------------------------------------------------------------------
/src/components/FloatingButton.vue:
--------------------------------------------------------------------------------
 1 | <script lang="ts" setup>
 2 | const scrollHeight = ref(0);
 3 | const route = useRoute();
 4 | 
 5 | const handler = () => {
 6 |   scrollHeight.value = window.scrollY;
 7 | };
 8 | 
 9 | onMounted(() => {
10 |   window.addEventListener("scroll", handler);
11 | });
12 | 
13 | onBeforeUnmount(() => {
14 |   window.removeEventListener("scroll", handler);
15 | });
16 | </script>
17 | 
18 | <template>
19 |   <Transition name="slide-up" mode="out-in">
20 |     <Button
21 |       v-show="scrollHeight > 150 && route.path === '/'"
22 |       href="/api/introduction"
23 |       icon="tabler:package-import"
24 |       label="Documentation"
25 |       class="fixed inset-x-0 bottom-0 block m-6 mx-auto text-xl lg:hidden backdrop-blur-md w-max"
26 |     />
27 |   </Transition>
28 | </template>
29 | 
30 | <style>
31 | .slide-up-enter-active {
32 |   transition: all 0.3s ease-out;
33 | }
34 | 
35 | .slide-up-leave-active {
36 |   transition: all 0.2s cubic-bezier(1, 0.5, 0.8, 1);
37 | }
38 | 
39 | .slide-up-enter-from,
40 | .slide-up-leave-to {
41 |   transform: translateY(20px);
42 |   opacity: 0;
43 | }
44 | </style>
45 | 


--------------------------------------------------------------------------------
/src/components/Footer.vue:
--------------------------------------------------------------------------------
 1 | <script lang="ts" setup>
 2 | const {
 3 |   public: { GITHUB_REPO },
 4 | } = useRuntimeConfig();
 5 | </script>
 6 | 
 7 | <template>
 8 |   <footer
 9 |     class="container flex flex-col items-center justify-center pb-6 mx-auto mt-24 text-white/50"
10 |   >
11 |     <Icon name="tabler:heart" class="text-xl" />
12 | 
13 |     <span>
14 |       Lanyard by
15 |       <CLink href="https://github.com/phineas" external blank>@phineas</CLink>,
16 |       website by
17 |       <CLink href="https://github.com/eggsy" external blank>@eggsy</CLink>
18 |     </span>
19 | 
20 |     <CLink :href="GITHUB_REPO" external blank
21 |       >This website is open source on GitHub
22 |     </CLink>
23 |   </footer>
24 | </template>
25 | 


--------------------------------------------------------------------------------
/src/components/GradientBackground.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div
 3 |     v-motion-fade
 4 |     :delay="500"
 5 |     class="absolute inset-0 w-full h-full overflow-hidden bg-no-repeat pointer-events-none -z-10 lg:block"
 6 |     :style="{
 7 |       backgroundImage: `linear-gradient(
 8 |         to top left,
 9 |         #13131A,
10 |         #13131A,
11 |         #D7BB8725
12 |       )`,
13 |       backgroundSize: `60% 50%`,
14 |     }"
15 |   />
16 | </template>
17 | 


--------------------------------------------------------------------------------
/src/components/Highlight.vue:
--------------------------------------------------------------------------------
 1 | <script lang="ts" setup>
 2 | interface Props {
 3 |   code: string;
 4 | }
 5 | 
 6 | const props = defineProps<Props>();
 7 | 
 8 | const getHighlightedJson = computed(() => {
 9 |   let json = props.code
10 |     .replace(/&/g, "&amp;")
11 |     .replace(/</g, "&lt;")
12 |     .replace(/>/g, "&gt;");
13 | 
14 |   return json.replace(
15 |     /("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g,
16 |     function (match) {
17 |       let cls = "number";
18 |       if (/^"/.test(match)) cls = /:$/.test(match) ? "key" : "string";
19 |       else if (/true|false/.test(match)) cls = "boolean";
20 |       else if (/null/.test(match)) cls = "null";
21 |       return '<span class="' + cls + '">' + match + "</span>";
22 |     }
23 |   );
24 | });
25 | </script>
26 | 
27 | <template>
28 |   <pre
29 |     v-html="getHighlightedJson"
30 |     class="w-full p-4 overflow-x-auto overflow-y-auto text-sm rounded-lg resize-none no-scrollbar bg-brand/40 h-96"
31 |   />
32 | </template>
33 | 
34 | <style>
35 | .string {
36 |   color: #98c379;
37 | }
38 | .number {
39 |   color: #d19a66;
40 | }
41 | .boolean {
42 |   color: #c678dd;
43 | }
44 | .null {
45 |   color: #61afef;
46 | }
47 | .key {
48 |   color: #e06c75;
49 | }
50 | </style>
51 | 


--------------------------------------------------------------------------------
/src/components/Loader.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="flex items-center justify-center">
 3 |     <svg xmlns="http://www.w3.org/2000/svg" class="w-8 h-8" viewBox="0 0 24 24">
 4 |       <path
 5 |         fill="#888888"
 6 |         d="M12 2A10 10 0 1 0 22 12A10 10 0 0 0 12 2Zm0 18a8 8 0 1 1 8-8A8 8 0 0 1 12 20Z"
 7 |         opacity=".5"
 8 |       ></path>
 9 | 
10 |       <path
11 |         fill="currentColor"
12 |         d="M20 12h2A10 10 0 0 0 12 2V4A8 8 0 0 1 20 12Z"
13 |       >
14 |         <animateTransform
15 |           attributeName="transform"
16 |           dur="1s"
17 |           from="0 12 12"
18 |           repeatCount="indefinite"
19 |           to="360 12 12"
20 |           type="rotate"
21 |         ></animateTransform>
22 |       </path>
23 |     </svg>
24 |   </div>
25 | </template>
26 | 


--------------------------------------------------------------------------------
/src/components/Navbar.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <nav
 3 |     v-motion-fade
 4 |     class="container flex flex-col items-center justify-between gap-4 mx-auto lg:flex-row lg:w-7/12"
 5 |   >
 6 |     <NuxtLink to="/">
 7 |       <img
 8 |         src="https://storage.googleapis.com/lanyard/static/lanyardtemplogo.png"
 9 |         alt="logo"
10 |         class="w-44 lg:w-36"
11 |       />
12 |     </NuxtLink>
13 | 
14 |     <ul class="items-center hidden space-x-6 lg:flex">
15 |       <li class="flex items-center space-x-2">
16 |         <Icon name="tabler:home" />
17 |         <CLink href="/" internal>Home</CLink>
18 |       </li>
19 | 
20 |       <li class="flex items-center space-x-2">
21 |         <Icon name="tabler:package-import" />
22 |         <CLink href="/api/introduction" internal>API</CLink>
23 |       </li>
24 |     </ul>
25 |   </nav>
26 | </template>
27 | 


--------------------------------------------------------------------------------
/src/components/Stargazers.vue:
--------------------------------------------------------------------------------
 1 | <script lang="ts" setup>
 2 | interface IGithubResponse {
 3 |   login: string;
 4 |   avatar_url: string;
 5 |   html_url: string;
 6 | }
 7 | 
 8 | const {
 9 |   public: { GITHUB_REPO },
10 | } = useRuntimeConfig();
11 | 
12 | const {
13 |   data: stargazers,
14 |   pending,
15 |   error,
16 | } = await useFetch<IGithubResponse[]>(
17 |   () => "https://api.github.com/repos/eggsy/lanyard-web/stargazers",
18 | );
19 | </script>
20 | 
21 | <template>
22 |   <section v-motion-fade-visible-once class="py-8 space-y-4">
23 |     <div class="flex justify-between space-x-4">
24 |       <h2 class="text-2xl font-bold leading-tight">Stargazers</h2>
25 | 
26 |       <CLink
27 |         :href="GITHUB_REPO"
28 |         class="flex items-center space-x-2 text-sm transition-colors text-white/50 hover:text-white"
29 |         no-decoration
30 |         external
31 |         blank
32 |       >
33 |         <Icon name="tabler:star" class="w-4 h-4" />
34 |         <span>Star on GitHub</span>
35 |       </CLink>
36 |     </div>
37 | 
38 |     <Loader v-if="pending" class="h-24" />
39 | 
40 |     <p v-else-if="error !== null">An error occured.</p>
41 | 
42 |     <div v-else class="flex flex-wrap items-center gap-2">
43 |       <CLink
44 |         v-for="(profile, index) in stargazers"
45 |         :key="`stargazer-${index}`"
46 |         :href="profile.html_url"
47 |         :title="profile.login"
48 |         external
49 |         blank
50 |         no-decoration
51 |       >
52 |         <img
53 |           :src="profile.avatar_url"
54 |           class="w-12 h-12 transition-all rounded-full hover:grayscale-0 lg:grayscale hover:ring-1 ring-white/20"
55 |           loading="lazy"
56 |           alt="user profile picture"
57 |         />
58 |       </CLink>
59 |     </div>
60 |   </section>
61 | </template>
62 | 


--------------------------------------------------------------------------------
/src/components/content/ErrorTypes.vue:
--------------------------------------------------------------------------------
 1 | <script lang="ts" setup>
 2 | const errorTypes = [
 3 |   {
 4 |     name: "Invalid/Unknown Opcode",
 5 |     code: 4004,
 6 |     data: "unknown_upcode",
 7 |   },
 8 |   {
 9 |     name: "Opcode Requires Data",
10 |     code: 4005,
11 |     data: "requires_data_object",
12 |   },
13 |   {
14 |     name: "Invalid Payload",
15 |     code: 4006,
16 |     data: "invalid_payload",
17 |   },
18 | ];
19 | </script>
20 | 
21 | <template>
22 |   <div class="space-y-2">
23 |     <div
24 |       v-for="item in errorTypes"
25 |       :key="item.data"
26 |       class="flex flex-col p-4 rounded-lg gap-x-4 gap-y-2 lg:items-center lg:justify-between lg:flex-row bg-brand/20"
27 |     >
28 |       <div class="flex items-center">
29 |         <span class="px-2 py-1 text-sm rounded-lg bg-red-600/40">
30 |           {{ item.code }}
31 |         </span>
32 | 
33 |         <h3 class="m-0 ml-2 text-base leading-none">{{ item.name }}</h3>
34 |       </div>
35 | 
36 |       <span class="p-2 text-sm rounded-lg bg-brand/40 text-white/50">
37 |         {{ item.data }}
38 |       </span>
39 |     </div>
40 |   </div>
41 | </template>
42 | 


--------------------------------------------------------------------------------
/src/components/content/IntroductionResponse.vue:
--------------------------------------------------------------------------------
 1 | <script lang="ts" setup>
 2 | const userIdInput = ref("162969778699501569");
 3 | const {
 4 |   public: { API_BASE },
 5 | } = useRuntimeConfig();
 6 | 
 7 | const { refresh, data } = await useAsyncData(() =>
 8 |   $fetch(`${API_BASE}/${userIdInput.value}`),
 9 | );
10 | </script>
11 | 
12 | <template>
13 |   <div class="flex flex-col items-center gap-2 lg:flex-row">
14 |     <input
15 |       v-model="userIdInput"
16 |       class="w-full px-4 py-2 transition-all rounded-lg outline-none placeholder-white/50 text-white/90 ring-white/10 focus:ring-1 bg-brand/40"
17 |       placeholder="User ID"
18 |       @keydown.enter="refresh()"
19 |     />
20 | 
21 |     <Button label="Run" icon="tabler:settings" @click.native="refresh()" />
22 |   </div>
23 | 
24 |   <Highlight :code="JSON.stringify(data, null, 2)" />
25 | </template>
26 | 


--------------------------------------------------------------------------------
/src/components/content/ListOpcodes.vue:
--------------------------------------------------------------------------------
 1 | <script lang="ts" setup>
 2 | const opCodes = [
 3 |   {
 4 |     name: "Event",
 5 |     description:
 6 |       "This is the default opcode when receiving core events from Lanyard, like `INIT_STATE`",
 7 |     type: "Receive",
 8 |   },
 9 |   {
10 |     name: "Hello",
11 |     description:
12 |       "Lanyard sends this when clients initially connect, and it includes the heartbeat interval",
13 |     type: "Receive Only",
14 |   },
15 |   {
16 |     name: "Initialize",
17 |     description:
18 |       "This is what the client sends when receiving Opcode 1 from Lanyard - it should contain an array of user IDs to subscribe to",
19 |     type: "Send only",
20 |   },
21 |   {
22 |     name: "Heartbeat",
23 |     description:
24 |       "Clients should send Opcode 3 every 30 seconds (or whatever the Hello Opcode says to heartbeat at)",
25 |     type: "Send only",
26 |   },
27 | ];
28 | </script>
29 | 
30 | <template>
31 |   <div class="space-y-2">
32 |     <div
33 |       v-for="(code, index) in opCodes"
34 |       class="w-full p-6 rounded-lg bg-brand/20"
35 |     >
36 |       <div class="flex items-center justify-between">
37 |         <div class="flex items-center leading-none">
38 |           <span
39 |             class="flex items-center justify-center w-8 h-8 p-1 text-sm rounded-lg bg-brand/60"
40 |           >
41 |             {{ index }}
42 |           </span>
43 | 
44 |           <h3 class="m-0 ml-2 text-base leading-none">{{ code.name }}</h3>
45 |         </div>
46 | 
47 |         <span class="px-2 py-1 text-sm rounded-md bg-brand/60">
48 |           {{ code.type }}
49 |         </span>
50 |       </div>
51 | 
52 |       <p class="m-0 mt-4">{{ code.description }}</p>
53 |     </div>
54 |   </div>
55 | </template>
56 | 


--------------------------------------------------------------------------------
/src/components/content/NotFound.vue:
--------------------------------------------------------------------------------
 1 | <script lang="ts" setup>
 2 | useHead({
 3 |   title: "Lanyard",
 4 | });
 5 | </script>
 6 | 
 7 | <template>
 8 |   <div v-motion-fade :delay="150" class="space-y-4">
 9 |     <h1 class="flex items-center space-x-2 text-2xl font-semibold text-white">
10 |       <div class="p-1 rounded-full bg-red-600/50">
11 |         <Icon name="tabler:x" />
12 |       </div>
13 | 
14 |       <span>Not Found</span>
15 |     </h1>
16 | 
17 |     <p class="text-lg text-white/50 lg:w-2/3">
18 |       The document you're looking for doesn't exist, check whether you made a
19 |       typo or it exists.
20 |       <CLink href="/api/" internal>
21 |         Click here to go back to documentation homepage </CLink
22 |       >.
23 |     </p>
24 | 
25 |     <Button href="/" icon="tabler:home" label="Go Back Homepage" />
26 |   </div>
27 | </template>
28 | 


--------------------------------------------------------------------------------
/src/components/content/Pages.vue:
--------------------------------------------------------------------------------
 1 | <script lang="ts" setup>
 2 | const getOrderedList = (list: any) => {
 3 |   return list.sort((a: any, b: any) => {
 4 |     const [orderA, orderB] = [a.order || 0, b.order || 0];
 5 |     return orderB - orderA;
 6 |   });
 7 | };
 8 | </script>
 9 | 
10 | <template>
11 |   <ul class="flex flex-col p-0 space-y-2 list-none">
12 |     <ContentList v-slot="{ list }">
13 |       <template v-if="list">
14 |         <li
15 |           v-for="article in getOrderedList(list)"
16 |           :key="article._path"
17 |           class="p-0 m-0 list-none"
18 |         >
19 |           <NuxtLink
20 |             :to="article._path"
21 |             class="flex items-center w-full px-4 py-2 space-x-2 transition-colors rounded-lg lg:w-1/2 bg-brand/40 text-white/50 hover:text-white hover:bg-brand-75"
22 |           >
23 |             <Icon name="tabler:file-code-2" class="flex-shrink-0" />
24 |             <span class="truncate">{{ article.title }}</span>
25 |           </NuxtLink>
26 |         </li>
27 |       </template>
28 | 
29 |       <template v-else>Anan Yani</template>
30 |     </ContentList>
31 |   </ul>
32 | </template>
33 | 


--------------------------------------------------------------------------------
/src/composables/useReadmeProjects.ts:
--------------------------------------------------------------------------------
 1 | import { ref, onMounted, reactive } from "vue";
 2 | 
 3 | export const useReadmeProjects = () => {
 4 |   const loading = ref(true);
 5 |   const error = ref(false);
 6 | 
 7 |   const websites = ref<string[]>([]);
 8 |   const projects = ref<{ name: string; href: string; description: string }[]>(
 9 |     [],
10 |   );
11 | 
12 |   onMounted(async () => {
13 |     const readme: { content: string } = await fetch(
14 |       "https://api.github.com/repos/phineas/lanyard/readme",
15 |       {
16 |         headers: {
17 |           "User-Agent": "Lanyard Web",
18 |         },
19 |       },
20 |     )
21 |       .then((r) => r.json())
22 |       .catch(() => {
23 |         error.value = true;
24 |         loading.value = false;
25 |       });
26 | 
27 |     const text = atob(readme.content).toString();
28 |     const regexMatch = /\[(.*?)\]\((.*?)\)/;
29 | 
30 |     /* Community Projects */
31 |     const projectsText = text.split("## Community Projects")[1].split("\n")[2];
32 |     const communityProjectsDown = text.split(projectsText)[1];
33 | 
34 |     console.log(projectsText);
35 | 
36 |     projects.value = communityProjectsDown
37 |       .split("##")[0]
38 |       .trim()
39 |       .split("\\")
40 |       .map((item) => {
41 |         const [link, description] = item.replace(/\n/g, "").split(" - ");
42 |         const match = link.match(regexMatch) ?? link;
43 | 
44 |         return {
45 |           name: match[1],
46 |           href: match[2],
47 |           description,
48 |         };
49 |       });
50 | 
51 |     const websitesText = text.split("## Showcase")[1].split("\n")[2];
52 |     const websitesDown = text?.split(websitesText)?.[1];
53 | 
54 |     websites.value = websitesDown
55 |       .split("##")[0]
56 |       .trim()
57 |       .split("\n")
58 |       .map((item) => {
59 |         const match = item.match(regexMatch);
60 |         return match?.[1] ?? item;
61 |       });
62 | 
63 |     loading.value = false;
64 |   });
65 | 
66 |   return reactive({
67 |     projects,
68 |     websites,
69 |     loading,
70 |     error,
71 |   });
72 | };
73 | 


--------------------------------------------------------------------------------
/src/content/api/getting-user-presence.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | head:
 3 |   meta:
 4 |     - name: "og:title"
 5 |       property: "og:title"
 6 |       content: "Getting User Presence Data"
 7 |     - name: "twitter:title"
 8 |       property: "twitter:title"
 9 |       content: "Getting User Presence Data"
10 | 
11 |     - name: "description"
12 |       property: "description"
13 |       content: "Get a user's Discord presence data from REST API via a GET request."
14 |     - name: "og:description"
15 |       property: "og:description"
16 |       content: "Get a user's Discord presence data from REST API via a GET request."
17 |     - name: "twitter:description"
18 |       property: "twitter:description"
19 |       content: "Get a user's Discord presence data from REST API via a GET request."
20 | ---
21 | 
22 | # Getting User Presence Data
23 | 
24 | Simply send a GET request to users endpoint with your `user ID`. This is for the REST API, if you want to check the WebSocket documentation to get real-time updates, [click here](/api/working-with-websockets).
25 | 
26 | ### JavaScript Code
27 | 
28 | ```js
29 | fetch("https://api.lanyard.rest/v1/users/162969778699501569")
30 |   .then((res) => res.json())
31 |   .then(console.log);
32 | ```
33 | 
34 | ### Interactive Playground
35 | 
36 | `GET https://api.lanyard.rest/v1/users/:user_id`
37 | 
38 | ::introduction-response
39 | ::
40 | 


--------------------------------------------------------------------------------
/src/content/api/introduction.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | order: 1
 3 | head:
 4 |   meta:
 5 |     - name: "og:title"
 6 |       property: "og:title"
 7 |       content: "API Introduction"
 8 |     - name: "twitter:title"
 9 |       property: "twitter:title"
10 |       content: "API Introduction"
11 | 
12 |     - name: "description"
13 |       property: "description"
14 |       content: "Learn how you can deal with Lanyard's API using REST and WebSockets."
15 |     - name: "og:description"
16 |       property: "og:description"
17 |       content: "Learn how you can deal with Lanyard's API using REST and WebSockets."
18 |     - name: "twitter:description"
19 |       property: "twitter:description"
20 |       content: "Learn how you can deal with Lanyard's API using REST and WebSockets."
21 | ---
22 | 
23 | # Introduction
24 | 
25 | Welcome to Lanyard API `v1` documentation. Please keep in mind that this is **_not the official_** documentation for Lanyard. This website (as a whole) was created because Lanyard itself didn't had one. Hopefully, this page will be maintained and become the official documentation.
26 | 
27 | ## API Base
28 | 
29 | Current API base is `https://api.lanyard.rest/v1`.
30 | 
31 | ## Choose a Sub-Page
32 | 
33 | Please choose a sub-page to see the relevant documentation.
34 | 
35 | ::pages
36 | ::
37 | 


--------------------------------------------------------------------------------
/src/content/api/kv.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | head:
 3 |   meta:
 4 |     - name: "og:title"
 5 |       property: "og:title"
 6 |       content: "Key-Value Store"
 7 |     - name: "twitter:title"
 8 |       property: "twitter:title"
 9 |       content: "Key-Value Store"
10 | 
11 |     - name: "description"
12 |       property: "description"
13 |       content: "Use Lanyard KV to display dynamic and real-time updated data through Lanyard API."
14 |     - name: "og:description"
15 |       property: "og:description"
16 |       content: "Use Lanyard KV to display dynamic and real-time updated data through Lanyard API."
17 |     - name: "twitter:description"
18 |       property: "twitter:description"
19 |       content: "Use Lanyard KV to display dynamic and real-time updated data through Lanyard API."
20 | ---
21 | 
22 | # Key-Value Store
23 | 
24 | Lanyard KV is a a dynamic, **real-time** key->value store which is added to the Lanyard user API response. When a KV pair is updated, a `PRESENCE_UPDATE` for the user will also be emitted through the Lanyard socket.
25 | 
26 | ### Use Cases
27 | 
28 | - Configuration values for your website
29 | - Configuration values for Lanyard 3rd party projects
30 | - Dynamic data for your website/profile (e.g. current location)
31 | 
32 | ### Limits
33 | 
34 | 1. Keys and values can only be strings
35 | 2. Values can be 30,000 characters maximum
36 | 3. Keys must be alphanumeric (a-zA-Z0-9) and 255 characters max length
37 | 4. Your user can have a maximum of 512 key->value pairs linked
38 | 
39 | ### Getting an API Key
40 | 
41 | DM the Lanyard bot (`Lanyard#5766`) with `.apikey` to get your API key.
42 | 
43 | When making Lanyard KV API requests, set an `Authorization` header with the API key you received from the Lanyard bot as the value.
44 | 
45 | ### Setting a key->value pair
46 | 
47 | #### Discord
48 | 
49 | `.set <key> <value>`{lang=ts}
50 | 
51 | #### HTTP
52 | 
53 | `PUT https://api.lanyard.rest/v1/users/:user_id/kv/:key`
54 | The value will be set to the body of the request. The body can be any type of data, but it will be string-encoded when set in Lanyard KV.
55 | 
56 | ### Setting multiple key->value pairs
57 | 
58 | #### Discord
59 | 
60 | Not yet implemented
61 | 
62 | #### HTTP
63 | 
64 | `PATCH https://api.lanyard.rest/v1/users/:user_id/kv`
65 | The user's KV store will be merged with the body of the request. Conflicting keys will be overwritten. The body must be keyvalue pair object with a maximum depth of 1.
66 | 
67 | ### Deleting a key
68 | 
69 | #### Discord
70 | 
71 | `.del <key>`{lang=ts}
72 | 
73 | #### HTTP
74 | 
75 | `DELETE https://api.lanyard.rest/v1/users/:user_id/kv/:key`
76 | 


--------------------------------------------------------------------------------
/src/content/api/quicklinks.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | head:
 3 |   meta:
 4 |     - name: "og:title"
 5 |       property: "og:title"
 6 |       content: "Quicklinks"
 7 |     - name: "twitter:title"
 8 |       property: "twitter:title"
 9 |       content: "Quicklinks"
10 | 
11 |     - name: "description"
12 |       property: "description"
13 |       content: "Use Lanyard Quicklinks to easily access resources from Discord such as profile pictures."
14 |     - name: "og:description"
15 |       property: "og:description"
16 |       content: "Use Lanyard Quicklinks to easily access resources from Discord such as profile pictures."
17 |     - name: "twitter:description"
18 |       property: "twitter:description"
19 |       content: "Use Lanyard Quicklinks to easily access resources from Discord such as profile pictures."
20 | ---
21 | 
22 | # Quicklinks
23 | 
24 | Lanyard quicklinks allow you to easily access resources from Discord, such as profile pictures.
25 | 
26 | ### User Icons
27 | 
28 | `https://api.lanyard.rest/<id>.<file_type>`
29 | Where `id` is the Discord user ID. `file_type` can be one of: `png`, `gif`, `webp`, `jpg`, or `jpeg`
30 | 


--------------------------------------------------------------------------------
/src/content/api/self-hosting.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | head:
 3 |   meta:
 4 |     - name: "og:title"
 5 |       property: "og:title"
 6 |       content: "Self-Hosting Lanyard"
 7 |     - name: "twitter:title"
 8 |       property: "twitter:title"
 9 |       content: "Self-Hosting Lanyard"
10 | 
11 |     - name: "description"
12 |       property: "description"
13 |       content: "Build Lanyard from source and self-host it using the Docker image."
14 |     - name: "og:description"
15 |       property: "og:description"
16 |       content: "Build Lanyard from source and self-host it using the Docker image."
17 |     - name: "twitter:description"
18 |       property: "twitter:description"
19 |       content: "Build Lanyard from source and self-host it using the Docker image."
20 | ---
21 | 
22 | # Self-Hosting Lanyard
23 | 
24 | Build the Docker image by cloning this repo and running:
25 | 
26 | ```bash
27 | # The latest version is already on the docker hub, you can skip this step unless you would like to run a modified version.
28 | docker build -t phineas/lanyard:latest .
29 | ```
30 | 
31 | If you don't already have a redis server you'll need to run one, here's the docker command to run one:
32 | 
33 | ```bash
34 | docker run -d --name lanyard-redis -v docker_mount_location_on_host:/data redis
35 | ```
36 | 
37 | And run Lanyard API server using:
38 | 
39 | ```bash
40 | docker run --rm -it -p 4001:4001 -e REDIS_HOST=redis -e BOT_TOKEN=<token> --link lanyard-redis:redis phineas/lanyard:latest
41 | ```
42 | 
43 | You'll be able to access the API using **port 4001**.
44 | 
45 | You also need to create a Discord bot and use its token above.
46 | 
47 | Create a bot here: [https://discord.com/developers/applications](https://discord.com/developers/applications)
48 | 
49 | **Make sure you enable** these settings in your bot settings:
50 | 
51 | - Privileged Gateway Intents > **PRESENCE INTENT**
52 | - Privileged Gateway Intents > **SERVER MEMBERS INTENT**
53 | 
54 | If you'd like to run Lanyard with `docker-compose`, here's an example:
55 | 
56 | ```yaml
57 | version: "3.8"
58 | 
59 | services:
60 |   redis:
61 |     image: redis
62 |     restart: always
63 |     container_name: lanyard_redis
64 |   lanyard:
65 |     image: phineas/lanyard:latest
66 |     restart: always
67 |     container_name: lanyard
68 |     depends_on:
69 |       - redis
70 |     ports:
71 |       - 4001:4001
72 |     environment:
73 |       BOT_TOKEN: <token>
74 |       REDIS_HOST: redis
75 | ```
76 | 
77 | Note, that you're **hosting a http server, not https**. You'll need to use a **reverse proxy** such as [traefik](https://traefik.io/traefik/) if you want to secure your API endpoint.
78 | 


--------------------------------------------------------------------------------
/src/content/api/working-with-websockets.md:
--------------------------------------------------------------------------------
  1 | ---
  2 | head:
  3 |   meta:
  4 |     - name: "og:title"
  5 |       property: "og:title"
  6 |       content: "Working with WebSockets"
  7 |     - name: "twitter:title"
  8 |       property: "twitter:title"
  9 |       content: "Working with WebSockets"
 10 | 
 11 |     - name: "description"
 12 |       property: "description"
 13 |       content: "Use Lanyard with WebSockets to achieve real-time presence updates."
 14 |     - name: "og:description"
 15 |       property: "og:description"
 16 |       content: "Use Lanyard with WebSockets to achieve real-time presence updates."
 17 |     - name: "twitter:description"
 18 |       property: "twitter:description"
 19 |       content: "Use Lanyard with WebSockets to achieve real-time presence updates."
 20 | ---
 21 | 
 22 | # Working with WebSockets
 23 | 
 24 | The WebSocket server acts like a "real-time update data" server, each time a presence update is triggered, you'll receive the new data from the WS server. The Lanyard WebSocket is available at `wss://api.lanyard.rest/socket`. If you would like to use compression, please specify `?compression=zlib_json` at the end of the URL. [You can read more about WebSockets for web here](https://developer.mozilla.org/en-US/docs/Web/API/WebSocket).
 25 | 
 26 | Once connected, you will receive `Opcode 1: Hello` which will contain heartbeat_interval in the data field. You should set a repeating interval for the time specified in heartbeat_interval which should send `Opcode 3: Heartbeat` on the interval.
 27 | 
 28 | You should send `Opcode 2: Initialize` immediately after receiving Opcode 1.
 29 | 
 30 | Example of `Opcode 2: Initialize`:
 31 | 
 32 | ```js
 33 | {
 34 |   op: 2,
 35 |   d: {
 36 |     // subscribe_to_ids should be an array of user IDs you want to subscribe to presences from
 37 |     // if Lanyard doesn't monitor an ID specified, it won't be included in INIT_STATE
 38 |     subscribe_to_ids: ["162969778699501569"]
 39 |   }
 40 | }
 41 | ```
 42 | 
 43 | #### Subscribing to multiple user presences
 44 | 
 45 | To subscribe to multiple presences, send `subscribe_to_ids` in the data object with a `string[]` list of user IDs to subscribe to. Then, INIT_STATE's data object will contain a user_id->presence map. You can find examples below.
 46 | 
 47 | #### Subscribing to a single user presence
 48 | 
 49 | If you just want to subscribe to one user, you can send `subscribe_to_id` instead with a string of a single user ID to subscribe to. Then, the INIT_STATE's data will just contain the presence object for the user you've subscribed to instead of a user_id->presence map.
 50 | 
 51 | #### Subscribing to every user presence
 52 | 
 53 | If you want to subscribe to every presence being monitored by Lanyard, you can specify `subscribe_to_all` with (bool) `true` in the data object, and you will then receive a user_id->presence map with every user presence in INIT_STATE, and their respective PRESENCE_UPDATES when they happen.
 54 | 
 55 | Once Op 2 is sent, you should immediately receive an `INIT_STATE` event payload if connected successfully. If not, you will be disconnected with an error (see below).
 56 | 
 57 | ### List of Opcodes
 58 | 
 59 | ::ListOpcodes
 60 | ::
 61 | 
 62 | ### Events
 63 | 
 64 | Events are received on `Opcode 0: Event` - the event type will be part of the root message object under the `t` key.
 65 | 
 66 | #### Example Event Message Objects
 67 | 
 68 | `INIT_STATE`
 69 | 
 70 | ```js
 71 | {
 72 |   op: 0,
 73 |   seq: 1,
 74 |   t: "INIT_STATE",
 75 |   d: {
 76 |     "162969778699501569": {
 77 |       // Full Lanyard presence (see API docs above for example)
 78 |     }
 79 |   }
 80 | }
 81 | ```
 82 | 
 83 | `PRESENCE_UPDATE`
 84 | 
 85 | ```js
 86 | {
 87 |   op: 0,
 88 |   seq: 2,
 89 |   t: "PRESENCE_UPDATE",
 90 |   d: {
 91 |     // Full Lanyard presence and an extra "user_id" field
 92 |   }
 93 | }
 94 | ```
 95 | 
 96 | ### Error Codes
 97 | 
 98 | Lanyard can disconnect clients for multiple reasons, usually to do with messages being badly formatted. Please refer to your WebSocket client to see how you should handle errors - they do not get received as regular messages.
 99 | 
100 | #### Types of Errors
101 | 
102 | ::error-types
103 | ::
104 | 


--------------------------------------------------------------------------------
/src/data/communityProjects.ts:
--------------------------------------------------------------------------------
 1 | /*
 2 |   I will keep this file in case Lanyard updates readme and my script
 3 |   fails to parse it, I will revert back to this then.
 4 | */
 5 | 
 6 | interface CommunityProject {
 7 |   name: string;
 8 |   description: string;
 9 |   href?: string;
10 |   owner?: string;
11 | }
12 | 
13 | export const communityProjects: CommunityProject[] = [
14 |   // add your project here
15 |   {
16 |     name: "cnrad/lanyard-profile-readme",
17 |     description:
18 |       "Utilize Lanyard to display your Discord Presence in your GitHub Profile",
19 |     href: "https://github.com/cnrad/lanyard-profile-readme",
20 |   },
21 |   {
22 |     name: "eggsy/vue-lanyard",
23 |     description:
24 |       "Lanyard API plugin for Vue which supports REST and WebSocket methods.",
25 |     href: "https://github.com/eggsy/vue-lanyard",
26 |   },
27 |   {
28 |     name: "barbarbar338/react-use-lanyard",
29 |     description: "React hook for Lanyard - supports REST & WebSocket",
30 |     href: "https://github.com/barbarbar338/react-use-lanyard",
31 |   },
32 |   {
33 |     name: "alii/use-lanyard",
34 |     description: "Another React hook for Lanyard that uses SWR",
35 |     href: "https://github.com/alii/use-lanyard",
36 |   },
37 |   {
38 |     name: "eggsy/lanyard-visualizer",
39 |     description: "Beautifully display your Discord presence on a website",
40 |     href: "https://lanyard-visualizer.netlify.app",
41 |   },
42 |   {
43 |     name: "5elenay/hawser",
44 |     description:
45 |       "Lanyard API wrapper for python. Supports both REST and WebSocket.",
46 |     href: "https://github.com/5elenay/hawser",
47 |   },
48 |   {
49 |     name: "xaronnn/js-lanyard",
50 |     description: "Use Lanyard in your Web App.",
51 |     href: "https://github.com/xaronnn/js-lanyard/",
52 |   },
53 |   {
54 |     name: "barbarbar338/go-lanyard",
55 |     description: "Lanyard API wrapper for GoLang - supports REST & WebSocket",
56 |     href: "https://github.com/barbarbar338/go-lanyard",
57 |   },
58 |   {
59 |     name: "LeonardSSH/use-lanyard",
60 |     description:
61 |       "Lanyard with Composition API for Vue. Supports REST and WebSocket methods",
62 |     href: "https://github.com/LeonardSSH/use-lanyard",
63 |   },
64 |   {
65 |     name: "punctuations/use-listen-along",
66 |     description:
67 |       "Mock the discord 'Listen Along' feature within a react hook powered by the Lanyard API.",
68 |     href: "https://github.com/punctuations/use-listen-along",
69 |   },
70 |   {
71 |     name: "CesiumLabs/lanyard-graphql",
72 |     description: "A GraphQL port of the Lanyard API.",
73 |     href: "CesiumLabs/lanyard-graphql",
74 |   },
75 |   {
76 |     name: "iGalaxyYT/svelte-lanyard",
77 |     description: "A Lanyard API wrapper for Svelte. Supports REST & WebSocket.",
78 |     href: "https://github.com/iGalaxyYT/svelte-lanyard",
79 |   },
80 |   {
81 |     name: "xHyroM/denyard",
82 |     description: "Lanyard API wrapper for Deno - Supports REST & WebSocket.",
83 |     href: "https://github.com/xHyroM/denyard",
84 |   },
85 |   {
86 |     name: "pxseu/lanyard-ui",
87 |     description: "Lanyard visualizer focused on the KV aspect",
88 |     href: "https://lanyard.sakurajima.cloud",
89 |   },
90 |   {
91 |     name: "CompeyDev/discord-status-action",
92 |     description:
93 |       "Updates a file to include your discord status using the Lanyard API.",
94 |     href: "https://github.com/CompeyDev/discord-status-action",
95 |   },
96 | ];
97 | 


--------------------------------------------------------------------------------
/src/data/usedBy.ts:
--------------------------------------------------------------------------------
 1 | /*
 2 |   I will keep this file in case Lanyard updates readme and my script
 3 |   fails to parse it, I will revert back to this then.
 4 | */
 5 | 
 6 | export const usedBy = [
 7 |   // add your website to the bottom of the list
 8 |   "alistair.cloud",
 9 |   "timcole.me",
10 |   "dstn.to",
11 |   "phineas.io",
12 |   "slayter.dev",
13 |   "cnrad.dev",
14 |   "dont-ping.me",
15 |   "eggsy.xyz",
16 |   "crugg.de",
17 |   "igalaxy.dev",
18 |   "itspolar.dev",
19 |   "vasc.dev",
20 |   "eri.gg",
21 |   "voided.dev",
22 |   "thicc-thighs.de",
23 |   "chezzer.dev",
24 |   "looskie.com",
25 |   "barbarbar338.fly.dev",
26 |   "5elenay.github.io",
27 |   "notnick.io",
28 |   "kevinthomas.codes",
29 |   "loom4k.me",
30 |   "presence.im",
31 |   "jackbailey.dev",
32 |   "345dev.me",
33 |   "d3r1n.com",
34 |   "vops.cc",
35 |   "emirkabal.com",
36 |   "wosleyv.dev",
37 |   "aidan.pw",
38 |   "anaxes.codes",
39 |   "avyanshralph.xyz",
40 |   "maki.cafe",
41 |   "cenap.js.org",
42 |   "rexulec.com",
43 |   "isaackogan.com",
44 |   "krypton.ninja",
45 |   "voltages.me",
46 |   "tysm.dev",
47 |   "ggorg.tk",
48 |   "hexiaq.cf",
49 |   "darkshiny.me",
50 |   "noirs.me",
51 |   "2m4u.netlify.app",
52 |   "eleven.js.org",
53 |   "roxza.me",
54 |   "keaton.codes",
55 |   "itsmebravo.dev",
56 |   "cimok.co.uk",
57 |   "winnerose.live",
58 |   "alysum.vercel.app",
59 |   "rovi.me",
60 |   "snazzah.com",
61 |   "itsnp.cf",
62 |   "sayanzyx.netlify.app",
63 |   "lanyard-card-example.netlify.app",
64 |   "niskii.denkylabs.com",
65 |   "falsis.ga",
66 |   "sundei.de",
67 |   "sanct.me",
68 |   "leonard.sh",
69 |   "ithundxr.dev",
70 |   "callumdev.xyz",
71 |   "jvsh.me",
72 | ];
73 | 


--------------------------------------------------------------------------------
/src/pages/api/[...slug].vue:
--------------------------------------------------------------------------------
  1 | <script lang="ts" setup>
  2 | import NotFound from "@/components/content/NotFound.vue";
  3 | 
  4 | const {
  5 |   public: { GITHUB_REPO },
  6 | } = useRuntimeConfig();
  7 | const route = useRoute();
  8 | 
  9 | const hasDocument = await queryContent().only("_path").find();
 10 | const hasThisDocument = computed(() => {
 11 |   const mappedItems = hasDocument.map((doc) => doc._path);
 12 |   return mappedItems.includes(route.fullPath);
 13 | });
 14 | 
 15 | onMounted(() => {
 16 |   const windowHash = location.hash;
 17 |   if (!windowHash) return;
 18 | 
 19 |   const element = document.querySelector(windowHash);
 20 |   if (!element) return;
 21 | 
 22 |   element.scrollIntoView({
 23 |     behavior: "smooth",
 24 |   });
 25 | });
 26 | </script>
 27 | 
 28 | <template>
 29 |   <div>
 30 |     <div
 31 |       v-motion-fade
 32 |       v-if="route.params.slug && !$route.params.slug?.includes('introduction')"
 33 |       class="hidden float-left lg:block -ml-14 top-10"
 34 |     >
 35 |       <NuxtLink to="/api/introduction">
 36 |         <Button icon="tabler:arrow-big-left" />
 37 |       </NuxtLink>
 38 |     </div>
 39 | 
 40 |     <main v-motion-fade :delay="200">
 41 |       <article class="prose-base">
 42 |         <ContentDoc
 43 |           :path="!$route.params.slug ? `api/introduction` : $route.path"
 44 |         >
 45 |           <template #not-found>
 46 |             <NotFound />
 47 |           </template>
 48 |         </ContentDoc>
 49 |       </article>
 50 |     </main>
 51 | 
 52 |     <template v-if="hasThisDocument">
 53 |       <hr class="my-8 border-dashed border-brand/20" />
 54 | 
 55 |       <Button
 56 |         v-motion-fade
 57 |         :delay="200"
 58 |         :href="`${GITHUB_REPO}/edit/main/src/content/api/${$route.params.slug}.md`"
 59 |         icon="tabler:brand-github"
 60 |         label="Edit this page on GitHub"
 61 |         blank
 62 |       />
 63 |     </template>
 64 |   </div>
 65 | </template>
 66 | 
 67 | <style lang="scss" scoped>
 68 | :deep(.prose-base) {
 69 |   p a {
 70 |     @apply border-b border-white/10 border-dashed transition-colors hover:border-white/40;
 71 |   }
 72 | 
 73 |   ul,
 74 |   ol {
 75 |     list-style-type: unset;
 76 |   }
 77 | 
 78 |   p,
 79 |   li {
 80 |     @apply text-white/50;
 81 |   }
 82 | 
 83 |   pre {
 84 |     @apply bg-brand/20 w-full rounded-lg overflow-x-auto px-4 py-6;
 85 |     -ms-overflow-style: none;
 86 |     scrollbar-width: none;
 87 | 
 88 |     &::-webkit-scrollbar {
 89 |       width: 0;
 90 |       height: 0;
 91 |       background: transparent;
 92 |     }
 93 | 
 94 |     code {
 95 |       @apply bg-transparent p-0;
 96 |       font-size: 1em !important;
 97 |     }
 98 |   }
 99 | }
100 | </style>
101 | 


--------------------------------------------------------------------------------
/src/pages/index.vue:
--------------------------------------------------------------------------------
  1 | <script lang="ts" setup>
  2 | import { useDebounceFn } from "@vueuse/shared";
  3 | import { useReadmeProjects } from "../composables/useReadmeProjects";
  4 | 
  5 | const pageData = useReadmeProjects();
  6 | const scrollContainer = ref<HTMLElement | null>(null);
  7 | const playgroundInput = ref("");
  8 | const magicPreviewError = ref(false);
  9 | const result = reactive<any>({ lanyard: {} });
 10 | const {
 11 |   public: { API_BASE, DISCORD },
 12 | } = useRuntimeConfig();
 13 | 
 14 | useHead({
 15 |   title: "Home",
 16 | });
 17 | 
 18 | const handleClick = (direction: "prev" | "next") => {
 19 |   scrollContainer.value.scrollBy({
 20 |     left: direction === "prev" ? -200 : 200,
 21 |     behavior: "smooth",
 22 |   });
 23 | };
 24 | 
 25 | const getStatus = computed<{ color: string; name: string }>(
 26 |   () =>
 27 |     ({
 28 |       online: { color: "bg-green-600", name: "Online" },
 29 |       dnd: { color: "bg-red-600", name: "Do Not Disturb" },
 30 |       idle: { color: "bg-yellow-600", name: "Idle" },
 31 |       offline: { color: "bg-gray-200", name: "Offline" },
 32 |     })[result.lanyard?.data?.discord_status || "offline"],
 33 | );
 34 | 
 35 | const handleSearch = useDebounceFn(async () => {
 36 |   if (playgroundInput.value === "") return;
 37 | 
 38 |   const response = await fetch(`${API_BASE}/${playgroundInput.value}`);
 39 |   const data = await response.json();
 40 | 
 41 |   result.lanyard = data;
 42 | }, 150);
 43 | </script>
 44 | 
 45 | <template>
 46 |   <main class="flex flex-col gap-y-10">
 47 |     <header class="pb-8 space-y-8 lg:pb-14 lg:pt-10">
 48 |       <h1
 49 |         v-motion-fade
 50 |         :delay="150"
 51 |         class="text-3xl font-bold leading-snug text-center text-transparent lg:text-left lg:text-5xl bg-gradient-to-bl from-pink-600 via-red-600 to-yellow-600 bg-clip-text"
 52 |       >
 53 |         Expose your Discord activities to a RESTful API and WebSocket
 54 |       </h1>
 55 | 
 56 |       <div
 57 |         v-motion-fade
 58 |         :delay="250"
 59 |         class="flex flex-wrap min-h-[140px] items-start justify-center lg:justify-start gap-x-4 gap-y-2 no-scrollbar"
 60 |       >
 61 |         <img
 62 |           preload
 63 |           src="https://i.imgur.com/ZgjFF3m.png"
 64 |           class="w-full rounded-md lg:w-72 xl:w-80"
 65 |           alt="lanyard profile readme"
 66 |         />
 67 | 
 68 |         <img
 69 |           preload
 70 |           src="https://i.imgur.com/mbaEnBi.png"
 71 |           class="w-full rounded-md lg:w-72 xl:w-80"
 72 |           alt="lanyard visualizer"
 73 |         />
 74 |       </div>
 75 | 
 76 |       <div
 77 |         v-motion-fade
 78 |         :delay="300"
 79 |         class="grid place-items-center lg:flex gap-x-4 gap-y-2 lg:place-items-start lg:grid-cols-2"
 80 |       >
 81 |         <Button
 82 |           :href="DISCORD"
 83 |           icon="tabler:login"
 84 |           label="Join Discord Server"
 85 |           blank
 86 |         />
 87 | 
 88 |         <Button
 89 |           href="https://github.com/phineas/lanyard"
 90 |           icon="tabler:brand-github"
 91 |           label="Open Source"
 92 |           blank
 93 |         />
 94 |       </div>
 95 |     </header>
 96 | 
 97 |     <hr v-motion-fade :delay="350" class="border-brand/50" />
 98 | 
 99 |     <section v-motion-fade :delay="400" class="py-8 space-y-10">
100 |       <div class="space-y-2">
101 |         <h2 class="text-2xl font-bold">How?</h2>
102 | 
103 |         <p class="text-white/50">
104 |           Lanyard is a service that makes it super easy to export your live
105 |           Discord presence to an API endpoint
106 |           <code>(api.lanyard.rest/v1/users/:your_id)</code> and to a WebSocket
107 |           for you to use wherever you want. It is fully open-source and
108 |           powerful. You can use the API without deploying anything yourself -
109 |           but if you want to self host it, you have the option to, though it'll
110 |           require a tiny bit of configuration.
111 |         </p>
112 |       </div>
113 | 
114 |       <div class="space-y-2">
115 |         <h2 class="text-2xl font-bold">How Does Monitoring Work?</h2>
116 | 
117 |         <p class="text-white/50">
118 |           Lanyard uses a basic Discord Bot (which is open source as well) and
119 |           monitors every user in
120 |           <CLink :href="DISCORD" external blank> its Discord server</CLink>. On
121 |           each presence change, Lanyard sends a WS signal to update the API
122 |           response.
123 |         </p>
124 |       </div>
125 |     </section>
126 | 
127 |     <hr v-motion-fade-visible-once class="border-brand/50" />
128 | 
129 |     <section v-motion-fade-visible-once class="py-8 space-y-4">
130 |       <h2 class="text-2xl font-bold leading-tight">Try It Yourself</h2>
131 | 
132 |       <div class="grid gap-4 lg:grid-cols-2">
133 |         <div class="flex flex-col space-y-4">
134 |           <input
135 |             v-model="playgroundInput"
136 |             type="text"
137 |             class="w-full px-4 py-2 transition-all rounded-lg outline-none appearance-none ring-white/30 focus:ring-1 bg-brand/40"
138 |             placeholder="Enter user ID..."
139 |             @keyup.capture="handleSearch"
140 |           />
141 | 
142 |           <div class="space-y-2">
143 |             <!-- Name -->
144 |             <div class="flex items-center space-x-2">
145 |               <span class="text-white/50">User</span>
146 |               <span>
147 |                 {{ result.lanyard.data?.discord_user?.username || "Unknown" }}
148 |               </span>
149 |             </div>
150 | 
151 |             <!-- User status -->
152 |             <div class="flex items-center space-x-2">
153 |               <span class="text-white/50">User is</span>
154 |               <div
155 |                 class="w-3 h-3 transition-colors rounded-full"
156 |                 :class="getStatus.color"
157 |               />
158 |               <span>{{ getStatus.name }}</span>
159 |             </div>
160 | 
161 |             <!-- Listening to Spotify -->
162 |             <div class="flex items-center space-x-2">
163 |               <span class="text-white/50">Listening to Spotify</span>
164 |               <span>
165 |                 {{ result.lanyard.data?.listening_to_spotify ? "Yes" : "No" }}
166 |               </span>
167 |             </div>
168 |           </div>
169 | 
170 |           <div
171 |             v-motion-fade
172 |             v-if="result.lanyard.error?.code === 'user_not_monitored'"
173 |             class="flex flex-col space-y-2"
174 |           >
175 |             <Button
176 |               :href="DISCORD"
177 |               icon="tabler:login"
178 |               label="Join Discord Server"
179 |               blank
180 |             />
181 | 
182 |             <span class="text-xs text-brand">
183 |               Did you join the Discord server?
184 |             </span>
185 |           </div>
186 |         </div>
187 | 
188 |         <div class="overflow-hidden">
189 |           <Highlight :code="JSON.stringify(result.lanyard, null, 2)" />
190 |         </div>
191 |       </div>
192 |     </section>
193 | 
194 |     <hr v-motion-fade-visible-once class="border-brand/50" />
195 | 
196 |     <section
197 |       v-motion-fade-visible-once
198 |       class="grid py-8 gap-y-6 gap-x-10 lg:grid-cols-2 lg:justify-between"
199 |     >
200 |       <div class="space-y-4 lg:pb-4">
201 |         <h2 class="text-2xl font-bold leading-tight">The magic</h2>
202 | 
203 |         <p class="text-white/50">
204 |           Lanyard API is meant to create whatever you want using the data it
205 |           provides. People have already started creating amazing projects. Let's
206 |           preview one of them,
207 |           <CLink
208 |             href="https://github.com/cnrad/lanyard-profile-readme"
209 |             external
210 |             blank
211 |             >lanyard-profile-readme</CLink
212 |           >. You can embed the result in your website or GitHub-like readme.
213 |         </p>
214 | 
215 |         <div class="space-y-1">
216 |           <Button
217 |             href="/api/introduction"
218 |             label="Read more about the API"
219 |             icon="tabler:api"
220 |           />
221 | 
222 |           <p class="text-xs text-white/50">
223 |             {{
224 |               playgroundInput && magicPreviewError === false
225 |                 ? "🤯 Now, isn't that cool?"
226 |                 : "✨ Enter user ID to see the magic"
227 |             }}
228 |           </p>
229 |         </div>
230 |       </div>
231 | 
232 |       <div class="space-y-4">
233 |         <input
234 |           v-model="playgroundInput"
235 |           type="text"
236 |           class="w-full px-4 py-2 transition-all rounded-lg outline-none appearance-none ring-white/30 focus:ring-1 bg-brand/40"
237 |           placeholder="Enter user ID to see the magic"
238 |           @keyup.capture="handleSearch"
239 |         />
240 | 
241 |         <img
242 |           v-show="playgroundInput && magicPreviewError === false"
243 |           v-motion-fade
244 |           :src="`https://lanyard.cnrad.dev/api/${playgroundInput}`"
245 |           alt="lanyard profile readme"
246 |           @error="magicPreviewError = true"
247 |           @load="magicPreviewError = false"
248 |         />
249 | 
250 |         <p
251 |           v-if="magicPreviewError && playgroundInput !== ''"
252 |           v-motion-fade
253 |           class="text-sm leading-tight text-white/50"
254 |         >
255 |           Make sure you put the right ID and you joined Lanyard's Discord
256 |           server.
257 |         </p>
258 |       </div>
259 |     </section>
260 | 
261 |     <hr v-motion-fade-visible-once class="border-brand/50" />
262 | 
263 |     <section v-motion-fade-visible-once class="py-8 space-y-4">
264 |       <div
265 |         class="flex flex-col justify-between leading-tight lg:items-center lg:flex-row"
266 |       >
267 |         <h2 class="text-2xl font-bold leading-tight">Community Projects</h2>
268 | 
269 |         <div class="flex items-center space-x-2">
270 |           <p v-if="!pageData.loading" class="text-sm text-white/50">
271 |             {{ `${pageData.projects.length} in total` }}
272 |           </p>
273 | 
274 |           <div class="items-center hidden space-x-1 lg:flex">
275 |             <button
276 |               type="button"
277 |               class="p-1 transition-colors rounded-full bg-brand hover:bg-brand/50"
278 |               @click="handleClick('prev')"
279 |             >
280 |               <Icon name="tabler:chevron-left" />
281 |             </button>
282 | 
283 |             <button
284 |               type="button"
285 |               class="p-1 transition-colors rounded-full bg-brand hover:bg-brand/50"
286 |               @click="handleClick('next')"
287 |             >
288 |               <Icon name="tabler:chevron-right" />
289 |             </button>
290 |           </div>
291 |         </div>
292 |       </div>
293 | 
294 |       <div
295 |         ref="scrollContainer"
296 |         class="grid grid-flow-col overflow-x-auto no-scrollbar snap-x snap-mandatory gap-x-4"
297 |       >
298 |         <Loader v-if="pageData.loading" class="w-full h-24" />
299 | 
300 |         <p v-else-if="pageData.error" class="text-white/50">
301 |           An error occured.
302 |         </p>
303 | 
304 |         <CardCommunityProject
305 |           v-else
306 |           v-for="(project, index) in pageData.projects"
307 |           :key="`community-project-${index}`"
308 |           v-bind="project"
309 |         />
310 |       </div>
311 |     </section>
312 | 
313 |     <hr v-motion-fade-visible-once class="border-brand/50" />
314 | 
315 |     <section v-motion-fade-visible-once class="py-8 space-y-4">
316 |       <h2 class="text-2xl font-bold leading-tight">Used By</h2>
317 | 
318 |       <div class="flex flex-wrap items-center gap-x-4 gap-y-2 text-white/50">
319 |         <Loader v-if="pageData.loading" class="w-full h-40" />
320 | 
321 |         <p v-else-if="pageData.error" class="text-white/50">
322 |           An error occured.
323 |         </p>
324 | 
325 |         <CLink
326 |           v-else
327 |           v-for="website in pageData.websites"
328 |           :key="`used-by-${website}`"
329 |           :href="`https://${website}`"
330 |           external
331 |           blank
332 |         >
333 |           {{ website }}
334 |         </CLink>
335 |       </div>
336 |     </section>
337 | 
338 |     <hr v-motion-fade-visible-once class="border-brand/50" />
339 | 
340 |     <Stargazers />
341 |   </main>
342 | </template>
343 | 


--------------------------------------------------------------------------------
/src/public/icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/eggsy/lanyard-web/285050628a36b52c1eb8f9f3b6192e102bce001b/src/public/icon.png


--------------------------------------------------------------------------------
/src/public/social-image.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/eggsy/lanyard-web/285050628a36b52c1eb8f9f3b6192e102bce001b/src/public/social-image.png


--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   theme: {
 3 |     extend: {
 4 |       colors: {
 5 |         brand: "#313336",
 6 |       },
 7 |     },
 8 |   },
 9 |   plugins: [require("@tailwindcss/typography")],
10 | };
11 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 |   // https://v3.nuxtjs.org/concepts/typescript
3 |   "extends": "./.nuxt/tsconfig.json"
4 | }
5 | 


--------------------------------------------------------------------------------