mirror of
https://github.com/NohamR/lanyard-profile-readme.git
synced 2026-05-26 04:17:19 +00:00
Merge branch 'hexaaagon/main'
feat: new landing, cleaner code, etc
This commit is contained in:
Conrad Crawford
@@ -1,7 +0,0 @@
|
|||||||
{
|
|
||||||
"extends": ["next", "next/core-web-vitals"],
|
|
||||||
"rules": {
|
|
||||||
"react/no-unescaped-entities": "off",
|
|
||||||
"@next/next/no-img-element": "off"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
7
.eslintrc.json
Normal file
7
.eslintrc.json
Normal file
@@ -0,0 +1,7 @@
|
|||||||
|
{
|
||||||
|
"extends": ["next", "next/core-web-vitals"],
|
||||||
|
"rules": {
|
||||||
|
"react/no-unescaped-entities": "off",
|
||||||
|
"@next/next/no-img-element": "off"
|
||||||
|
}
|
||||||
|
}
|
||||||
13
.gitignore
vendored
13
.gitignore
vendored
@@ -1,11 +1,10 @@
|
|||||||
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
|
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
|
||||||
.env
|
|
||||||
|
|
||||||
# dependencies
|
# dependencies
|
||||||
/node_modules
|
/node_modules
|
||||||
/.yarn
|
|
||||||
/.pnp
|
/.pnp
|
||||||
.pnp.js
|
.pnp.js
|
||||||
|
.yarn/install-state.gz
|
||||||
|
|
||||||
# testing
|
# testing
|
||||||
/coverage
|
/coverage
|
||||||
@@ -27,10 +26,12 @@ yarn-debug.log*
|
|||||||
yarn-error.log*
|
yarn-error.log*
|
||||||
|
|
||||||
# local env files
|
# local env files
|
||||||
.env.local
|
.env*.local
|
||||||
.env.development.local
|
.env
|
||||||
.env.test.local
|
|
||||||
.env.production.local
|
|
||||||
|
|
||||||
# vercel
|
# vercel
|
||||||
.vercel
|
.vercel
|
||||||
|
|
||||||
|
# typescript
|
||||||
|
*.tsbuildinfo
|
||||||
|
next-env.d.ts
|
||||||
@@ -1 +0,0 @@
|
|||||||
src/renderCard.tsx
|
|
||||||
15
.prettierrc
15
.prettierrc
@@ -1,9 +1,10 @@
|
|||||||
{
|
{
|
||||||
"quoteProps": "consistent",
|
"plugins": ["prettier-plugin-tailwindcss"],
|
||||||
"printWidth": 120,
|
"quoteProps": "consistent",
|
||||||
"bracketSpacing": true,
|
"printWidth": 120,
|
||||||
"singleQuote": false,
|
"bracketSpacing": true,
|
||||||
"useTabs": false,
|
"singleQuote": false,
|
||||||
"arrowParens": "avoid",
|
"useTabs": false,
|
||||||
"tabWidth": 4
|
"arrowParens": "avoid",
|
||||||
|
"tabWidth": 2
|
||||||
}
|
}
|
||||||
|
|||||||
20
components.json
Normal file
20
components.json
Normal file
@@ -0,0 +1,20 @@
|
|||||||
|
{
|
||||||
|
"$schema": "https://ui.shadcn.com/schema.json",
|
||||||
|
"style": "new-york",
|
||||||
|
"rsc": true,
|
||||||
|
"tsx": true,
|
||||||
|
"tailwind": {
|
||||||
|
"config": "tailwind.config.ts",
|
||||||
|
"css": "src/app/globals.css",
|
||||||
|
"baseColor": "stone",
|
||||||
|
"cssVariables": false,
|
||||||
|
"prefix": ""
|
||||||
|
},
|
||||||
|
"aliases": {
|
||||||
|
"components": "@/components",
|
||||||
|
"utils": "@/lib/utils",
|
||||||
|
"ui": "@/components/ui",
|
||||||
|
"lib": "@/lib",
|
||||||
|
"hooks": "@/hooks"
|
||||||
|
}
|
||||||
|
}
|
||||||
2
next-env.d.ts
vendored
2
next-env.d.ts
vendored
@@ -2,4 +2,4 @@
|
|||||||
/// <reference types="next/image-types/global" />
|
/// <reference types="next/image-types/global" />
|
||||||
|
|
||||||
// NOTE: This file should not be edited
|
// NOTE: This file should not be edited
|
||||||
// see https://nextjs.org/docs/basic-features/typescript for more information.
|
// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.
|
||||||
|
|||||||
@@ -1,3 +0,0 @@
|
|||||||
module.exports = {
|
|
||||||
reactStrictMode: true
|
|
||||||
}
|
|
||||||
4
next.config.mjs
Normal file
4
next.config.mjs
Normal file
@@ -0,0 +1,4 @@
|
|||||||
|
/** @type {import('next').NextConfig} */
|
||||||
|
const nextConfig = {};
|
||||||
|
|
||||||
|
export default nextConfig;
|
||||||
50
package.json
50
package.json
@@ -1,35 +1,41 @@
|
|||||||
{
|
{
|
||||||
"name": "next-app",
|
"name": "lanyard-profile-readme",
|
||||||
"version": "0.1.0",
|
"version": "0.1.0",
|
||||||
"private": true,
|
"private": true,
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"dev": "next dev",
|
"dev": "next dev --turbopack -p 3001",
|
||||||
"build": "next build",
|
"build": "next build",
|
||||||
"start": "next start",
|
"start": "next start -p 3001",
|
||||||
"lint": "next lint"
|
"lint": "next lint"
|
||||||
},
|
},
|
||||||
|
"packageManager": "pnpm@9.11.0",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@types/escape-html": "^1.0.1",
|
"@radix-ui/react-popover": "^1.1.2",
|
||||||
"@types/ioredis": "^4.28.8",
|
"@types/escape-html": "^1.0.4",
|
||||||
"@types/styled-components": "^5.1.10",
|
"class-variance-authority": "^0.7.0",
|
||||||
"axios": "^0.21.1",
|
"clsx": "^2.1.1",
|
||||||
|
"cmdk": "1.0.0",
|
||||||
"escape-html": "^1.0.3",
|
"escape-html": "^1.0.3",
|
||||||
"framer-motion": "^4.1.17",
|
"framer-motion": "12.0.0-alpha.1",
|
||||||
"image-to-base64": "^2.2.0",
|
"ioredis": "^5.4.1",
|
||||||
"ioredis": "^4.28.5",
|
"lucide-react": "^0.453.0",
|
||||||
"next": "12.2.5",
|
"next": "15.0.3",
|
||||||
"react": "18.2.0",
|
"react": "18.3.1",
|
||||||
"react-dom": "18.2.0",
|
"react-dom": "18.3.1",
|
||||||
"styled-components": "^5.3.0",
|
"swr": "^2.2.5",
|
||||||
"use-smooth-count": "^0.3.0"
|
"tailwind-merge": "^2.5.4",
|
||||||
|
"tailwindcss-animate": "^1.0.7"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@types/escape-html": "^1.0.1",
|
"@types/node": "^20",
|
||||||
"@types/image-to-base64": "^2.1.0",
|
"@types/react": "18.3.12",
|
||||||
"@types/react": "^18.2.45",
|
"@types/react-dom": "18.3.1",
|
||||||
"eslint": "7.28.0",
|
"eslint": "^8",
|
||||||
"eslint-config-next": "11.0.0",
|
"eslint-config-next": "15.0.1",
|
||||||
"prettier": "^2.3.1",
|
"postcss": "^8",
|
||||||
"typescript": "4.3.3"
|
"prettier": "^3.3.3",
|
||||||
|
"prettier-plugin-tailwindcss": "^0.6.8",
|
||||||
|
"tailwindcss": "^3.4.1",
|
||||||
|
"typescript": "^5"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,18 +0,0 @@
|
|||||||
import type { AppProps } from "next/app";
|
|
||||||
import Head from "next/head";
|
|
||||||
|
|
||||||
export default function LanyardReadMe({ Component, pageProps }: AppProps) {
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<Head>
|
|
||||||
<link rel="apple-touch-icon" sizes="180x180" href="/favicon/apple-touch-icon.png" />
|
|
||||||
<link rel="icon" type="image/png" sizes="32x32" href="/favicon/favicon-32x32.png" />
|
|
||||||
<link rel="icon" type="image/png" sizes="16x16" href="/favicon/favicon-16x16.png" />
|
|
||||||
<link rel="mask-icon" href="/favicon/safari-pinned-tab.svg" color="#5bbad5" />
|
|
||||||
<meta name="msapplication-TileColor" content="#191d28" />
|
|
||||||
<meta name="theme-color" content="#191d28" />
|
|
||||||
</Head>
|
|
||||||
<Component {...pageProps} />
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,29 +0,0 @@
|
|||||||
import Document from "next/document";
|
|
||||||
import { ServerStyleSheet } from "styled-components";
|
|
||||||
|
|
||||||
export default class MyDocument extends Document {
|
|
||||||
static async getInitialProps(ctx: any) {
|
|
||||||
const sheet = new ServerStyleSheet(),
|
|
||||||
originalRenderPage = ctx.renderPage;
|
|
||||||
|
|
||||||
try {
|
|
||||||
ctx.renderPage = () =>
|
|
||||||
originalRenderPage({
|
|
||||||
enhanceApp: (App: any) => (props: any) => sheet.collectStyles(<App {...props} />),
|
|
||||||
});
|
|
||||||
|
|
||||||
const initialProps = await Document.getInitialProps(ctx);
|
|
||||||
return {
|
|
||||||
...initialProps,
|
|
||||||
styles: (
|
|
||||||
<>
|
|
||||||
{initialProps.styles}
|
|
||||||
{sheet.getStyleElement()}
|
|
||||||
</>
|
|
||||||
),
|
|
||||||
};
|
|
||||||
} finally {
|
|
||||||
sheet.seal();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,67 +0,0 @@
|
|||||||
import type { NextApiRequest, NextApiResponse } from "next";
|
|
||||||
import renderCard from "../../src/renderCard";
|
|
||||||
import { isSnowflake } from "../../src/snowflake";
|
|
||||||
import redis from "../../src/redis";
|
|
||||||
|
|
||||||
type Data = {
|
|
||||||
id?: string | string[];
|
|
||||||
error?: any;
|
|
||||||
code?: string;
|
|
||||||
};
|
|
||||||
|
|
||||||
type Parameters = {
|
|
||||||
theme?: string;
|
|
||||||
bg?: string;
|
|
||||||
hideStatus?: string;
|
|
||||||
hideTimestamp?: string;
|
|
||||||
hideDiscrim?: string;
|
|
||||||
borderRadius?: string;
|
|
||||||
animated?: string;
|
|
||||||
};
|
|
||||||
|
|
||||||
export default async function handler(req: NextApiRequest, res: NextApiResponse<Data>) {
|
|
||||||
let getUser: any = {};
|
|
||||||
|
|
||||||
if (!req.query.id)
|
|
||||||
return res.send({
|
|
||||||
error: `No ID provided.`,
|
|
||||||
});
|
|
||||||
|
|
||||||
const params: Parameters = req.query,
|
|
||||||
userId = req.query.id[0];
|
|
||||||
|
|
||||||
if (!isSnowflake(userId))
|
|
||||||
return res.send({
|
|
||||||
error: `That is not a valid snowflake ID!`,
|
|
||||||
});
|
|
||||||
|
|
||||||
try {
|
|
||||||
getUser.data = await fetch(`https://api.lanyard.rest/v1/users/${userId}`).then(res => res.json());
|
|
||||||
} catch (error: any) {
|
|
||||||
if (error.response.data && error.response.data.error.message)
|
|
||||||
return res
|
|
||||||
.status(404)
|
|
||||||
.send({ error: error.response.data.error.message, code: error.response.data.error.code });
|
|
||||||
|
|
||||||
if (error.response.status === 404) return res.status(404).send({ error: "Invalid user!" });
|
|
||||||
|
|
||||||
console.log(error); // Only console log the error if its not a 404
|
|
||||||
|
|
||||||
return res.status(400).send({
|
|
||||||
error: `Something went wrong! If everything looks correct and this still occurs, please contact @notcnrad on Twitter.`,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
try {
|
|
||||||
let user = await redis.hget("users", userId);
|
|
||||||
if (!user) await redis.hset("users", userId, "true");
|
|
||||||
} catch {
|
|
||||||
null;
|
|
||||||
}
|
|
||||||
|
|
||||||
res.setHeader("Content-Type", "image/svg+xml; charset=utf-8");
|
|
||||||
res.setHeader("content-security-policy", "default-src 'none'; img-src * data:; style-src 'unsafe-inline'");
|
|
||||||
|
|
||||||
const svg = await renderCard(getUser.data, params);
|
|
||||||
res.status(200).send(svg as any);
|
|
||||||
}
|
|
||||||
@@ -1,9 +0,0 @@
|
|||||||
import type { NextApiRequest, NextApiResponse } from "next";
|
|
||||||
import redis from "../../src/redis";
|
|
||||||
|
|
||||||
export default async function handler(req: NextApiRequest, res: NextApiResponse) {
|
|
||||||
let users = await redis.hgetall("users");
|
|
||||||
let count = Object.keys(users);
|
|
||||||
|
|
||||||
res.status(200).send({ count: count.length });
|
|
||||||
}
|
|
||||||
264
pages/index.tsx
264
pages/index.tsx
@@ -1,264 +0,0 @@
|
|||||||
import Head from "next/head";
|
|
||||||
import styled, { createGlobalStyle } from "styled-components";
|
|
||||||
import { useState, useEffect, useRef } from "react";
|
|
||||||
import axios from "axios";
|
|
||||||
import { useSmoothCount } from "use-smooth-count";
|
|
||||||
|
|
||||||
export default function Home({ userCount }: { userCount: number }) {
|
|
||||||
const [userId, setUserId] = useState<null | string>(null);
|
|
||||||
const [userError, setUserError] = useState<string>();
|
|
||||||
const [copyState, setCopyState] = useState("Copy");
|
|
||||||
|
|
||||||
const countRef = useRef<HTMLDivElement | null>(null);
|
|
||||||
const counter = useSmoothCount({ ref: countRef, target: userCount, duration: 3, curve: [0, 1, 0, 1] });
|
|
||||||
|
|
||||||
const copy = () => {
|
|
||||||
navigator.clipboard.writeText(
|
|
||||||
`[](https://discord.com/users/${userId})`
|
|
||||||
);
|
|
||||||
setCopyState("Copied!");
|
|
||||||
|
|
||||||
setTimeout(() => setCopyState("Copy"), 1500);
|
|
||||||
};
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
(async () => {
|
|
||||||
try {
|
|
||||||
await axios.get(`/api/${userId}`);
|
|
||||||
setUserError(undefined);
|
|
||||||
} catch (error: any) {
|
|
||||||
console.log(error.response);
|
|
||||||
if (error.response.status === 404 && error.response.data.code == "user_not_monitored")
|
|
||||||
setUserError(`User not monitored by Lanyard, click to join the discord`);
|
|
||||||
}
|
|
||||||
})();
|
|
||||||
}, [userId]);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<GlobalStyle />
|
|
||||||
<Head>
|
|
||||||
<link rel="preconnect" href="https://fonts.gstatic.com" />
|
|
||||||
<link
|
|
||||||
href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,200;1,300;1,400&display=swap"
|
|
||||||
rel="stylesheet"
|
|
||||||
/>
|
|
||||||
<title>Lanyard for GitHub Profile</title>
|
|
||||||
<meta property="og:title" content="Lanyard for GitHub Profile" key="title" />
|
|
||||||
<meta
|
|
||||||
name="description"
|
|
||||||
content="Utilize Lanyard to display your Discord Presence in your GitHub Profile"
|
|
||||||
/>
|
|
||||||
<meta
|
|
||||||
name="og:description"
|
|
||||||
content="Utilize Lanyard to display your Discord Presence in your GitHub Profile"
|
|
||||||
/>
|
|
||||||
</Head>
|
|
||||||
<Main>
|
|
||||||
<Container>
|
|
||||||
<Title>lanyard profile readme 🏷️</Title>
|
|
||||||
<Paragraph>Utilize Lanyard to display your Discord Presence in your GitHub Profile</Paragraph>
|
|
||||||
<br />
|
|
||||||
<Input onChange={el => setUserId(el.target.value)} placeholder="Enter your Discord ID" />
|
|
||||||
{userId ? (
|
|
||||||
<>
|
|
||||||
<Output>
|
|
||||||
[](https://discord.com/users/{userId})
|
|
||||||
</Output>
|
|
||||||
<ActionButton onClick={copy}>{copyState}</ActionButton>
|
|
||||||
<a
|
|
||||||
href="https://github.com/cnrad/lanyard-profile-readme#options"
|
|
||||||
target="_blank"
|
|
||||||
rel="noreferrer"
|
|
||||||
>
|
|
||||||
<ActionButton>Options</ActionButton>
|
|
||||||
</a>
|
|
||||||
<a
|
|
||||||
style={{ textDecoration: "none" }}
|
|
||||||
target="_blank"
|
|
||||||
href={userError && "https://discord.gg/lanyard"}
|
|
||||||
rel="noreferrer"
|
|
||||||
>
|
|
||||||
<Example
|
|
||||||
src={`/api/${userId}`}
|
|
||||||
alt={`${userError || "Please provide a valid user ID!"}`}
|
|
||||||
style={{ color: "#ff8787" }}
|
|
||||||
/>
|
|
||||||
</a>
|
|
||||||
</>
|
|
||||||
) : null}
|
|
||||||
</Container>
|
|
||||||
</Main>
|
|
||||||
<FooterStat>
|
|
||||||
Lanyard Profile Readme has <div style={{ fontWeight: "bold", width: "3.2rem" }} ref={countRef} /> total
|
|
||||||
users!
|
|
||||||
</FooterStat>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function getServerSideProps(ctx: any) {
|
|
||||||
let userCount = await axios
|
|
||||||
.get("https://lanyard.cnrad.dev/api/getUserCount", { timeout: 1000 })
|
|
||||||
.then(res => res.data.count)
|
|
||||||
.catch(() => 1000);
|
|
||||||
|
|
||||||
return {
|
|
||||||
props: { userCount },
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
const GlobalStyle = createGlobalStyle`
|
|
||||||
*, *::before, *::after {
|
|
||||||
box-sizing: border-box;
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
font-family: 'Poppins', sans-serif;
|
|
||||||
}
|
|
||||||
|
|
||||||
::-webkit-scrollbar {
|
|
||||||
width: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
::-webkit-scrollbar-thumb {
|
|
||||||
background: rgb(64 68 78);
|
|
||||||
border-radius: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
::-webkit-scrollbar-track {
|
|
||||||
background: rgb(24 28 39);
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
|
|
||||||
const Main = styled.div`
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: start;
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
box-sizing: border-box;
|
|
||||||
max-width: 100vw;
|
|
||||||
min-height: 100vh;
|
|
||||||
background: #010103;
|
|
||||||
background-size: cover;
|
|
||||||
`;
|
|
||||||
|
|
||||||
const Container = styled.div`
|
|
||||||
border-radius: 7px;
|
|
||||||
margin-top: 60px;
|
|
||||||
width: 80%;
|
|
||||||
max-width: 450px;
|
|
||||||
`;
|
|
||||||
|
|
||||||
const Title = styled.h1`
|
|
||||||
text-align: left;
|
|
||||||
font-size: 2rem;
|
|
||||||
font-weight: 600;
|
|
||||||
margin: 5px 0;
|
|
||||||
color: #cecece;
|
|
||||||
`;
|
|
||||||
|
|
||||||
const Paragraph = styled.p`
|
|
||||||
color: #aaabaf;
|
|
||||||
font-size: 1rem;
|
|
||||||
`;
|
|
||||||
|
|
||||||
const Input = styled.input`
|
|
||||||
text-align: left;
|
|
||||||
border-radius: 8px;
|
|
||||||
border: none;
|
|
||||||
width: 100%;
|
|
||||||
font-size: 0.9rem;
|
|
||||||
padding: 0.45rem 0.75rem;
|
|
||||||
color: #aaabaf;
|
|
||||||
border: solid 1px rgba(255, 255, 255, 0.2);
|
|
||||||
background: #000;
|
|
||||||
box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.2);
|
|
||||||
transition: all ease-in-out 0.1s;
|
|
||||||
|
|
||||||
&:focus {
|
|
||||||
outline: 0;
|
|
||||||
border-color: rgba(255, 255, 255, 0.5);
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
|
|
||||||
const Output = styled.div`
|
|
||||||
margin: 15px 0;
|
|
||||||
color: #aaabaf;
|
|
||||||
word-break: break-word;
|
|
||||||
border-radius: 8px;
|
|
||||||
border: solid 1px #333;
|
|
||||||
padding: 8px;
|
|
||||||
background: #000;
|
|
||||||
box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.2);
|
|
||||||
font-family: Monospace, sans-serif;
|
|
||||||
`;
|
|
||||||
|
|
||||||
const ActionButton = styled.button`
|
|
||||||
font-size: 0.9rem;
|
|
||||||
padding: 5px 25px;
|
|
||||||
margin-right: 10px;
|
|
||||||
border-radius: 6px;
|
|
||||||
cursor: pointer;
|
|
||||||
color: #888;
|
|
||||||
border: solid 1px #333;
|
|
||||||
background: transparent;
|
|
||||||
transition: all ease-in-out 0.1s;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
color: #e6e6e6;
|
|
||||||
border-color: #e6e6e6;
|
|
||||||
}
|
|
||||||
&:active {
|
|
||||||
color: #fff;
|
|
||||||
border-color: #fff;
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
|
|
||||||
const Example = styled.img`
|
|
||||||
display: block;
|
|
||||||
margin: 30px auto 0px;
|
|
||||||
max-width: 100%;
|
|
||||||
`;
|
|
||||||
|
|
||||||
const FooterStat = styled.div`
|
|
||||||
position: absolute;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
line-height: 1rem;
|
|
||||||
bottom: 1rem;
|
|
||||||
left: 50%;
|
|
||||||
transform: translate(-50%, 0);
|
|
||||||
background: #000;
|
|
||||||
padding: 1rem 1.25rem;
|
|
||||||
color: #fff;
|
|
||||||
border-radius: 0.55rem;
|
|
||||||
text-align: center;
|
|
||||||
box-shadow: 0 2px 15px -10px #a21caf;
|
|
||||||
min-width: 400px;
|
|
||||||
|
|
||||||
@media (max-width: 400px) {
|
|
||||||
font-size: 14px;
|
|
||||||
min-width: 365px;
|
|
||||||
padding: 0.75rem 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:before {
|
|
||||||
content: "";
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
bottom: 0;
|
|
||||||
border-radius: 0.55rem;
|
|
||||||
border: 2px solid transparent;
|
|
||||||
background: linear-gradient(45deg, #be123c, #6b21a8, #3730a3) border-box;
|
|
||||||
-webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
|
|
||||||
-webkit-mask-composite: xor;
|
|
||||||
mask-composite: exclude;
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
4739
pnpm-lock.yaml
generated
Normal file
4739
pnpm-lock.yaml
generated
Normal file
File diff suppressed because it is too large
Load Diff
8
postcss.config.mjs
Normal file
8
postcss.config.mjs
Normal file
@@ -0,0 +1,8 @@
|
|||||||
|
/** @type {import('postcss-load-config').Config} */
|
||||||
|
const config = {
|
||||||
|
plugins: {
|
||||||
|
tailwindcss: {},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
export default config;
|
||||||
@@ -1,4 +0,0 @@
|
|||||||
<svg width="283" height="64" viewBox="0 0 283 64" fill="none"
|
|
||||||
xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path d="M141.04 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.46 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM248.72 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.45 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM200.24 34c0 6 3.92 10 10 10 4.12 0 7.21-1.87 8.8-4.92l7.68 4.43c-3.18 5.3-9.14 8.49-16.48 8.49-11.05 0-19-7.2-19-18s7.96-18 19-18c7.34 0 13.29 3.19 16.48 8.49l-7.68 4.43c-1.59-3.05-4.68-4.92-8.8-4.92-6.07 0-10 4-10 10zm82.48-29v46h-9V5h9zM36.95 0L73.9 64H0L36.95 0zm92.38 5l-27.71 48L73.91 5H84.3l17.32 30 17.32-30h10.39zm58.91 12v9.69c-1-.29-2.06-.49-3.2-.49-5.81 0-10 4-10 10V51h-9V17h9v9.2c0-5.08 5.91-9.2 13.2-9.2z" fill="#000"/>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 1.1 KiB |
79
src/app/api/[...id]/route.ts
Normal file
79
src/app/api/[...id]/route.ts
Normal file
@@ -0,0 +1,79 @@
|
|||||||
|
import redis from "@/utils/redis";
|
||||||
|
import renderCard, { Parameters } from "@/utils/renderCard";
|
||||||
|
import { isSnowflake } from "@/utils/snowflake";
|
||||||
|
import { NextRequest } from "next/server";
|
||||||
|
|
||||||
|
export const dynamic = "force-dynamic";
|
||||||
|
|
||||||
|
export async function GET(req: NextRequest, options: { params: Promise<{ id: string[] }> }) {
|
||||||
|
const userId = (await options.params).id.join("/");
|
||||||
|
|
||||||
|
if (!userId)
|
||||||
|
return Response.json(
|
||||||
|
{
|
||||||
|
data: {
|
||||||
|
error: "No ID provided.",
|
||||||
|
},
|
||||||
|
success: false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
status: 400,
|
||||||
|
},
|
||||||
|
);
|
||||||
|
|
||||||
|
if (!isSnowflake(userId))
|
||||||
|
return Response.json(
|
||||||
|
{
|
||||||
|
data: {
|
||||||
|
error: "The ID you provide is not a valid snowflake.",
|
||||||
|
},
|
||||||
|
success: false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
status: 400,
|
||||||
|
},
|
||||||
|
);
|
||||||
|
|
||||||
|
let getUser: any = {};
|
||||||
|
|
||||||
|
getUser.data = await fetch(`https://api.lanyard.rest/v1/users/${userId}`, {
|
||||||
|
cache: "no-store",
|
||||||
|
}).then(async res => {
|
||||||
|
const data = await res.json();
|
||||||
|
|
||||||
|
if (!data.success) {
|
||||||
|
getUser.error = data.error;
|
||||||
|
}
|
||||||
|
|
||||||
|
return data;
|
||||||
|
});
|
||||||
|
|
||||||
|
if (getUser.error) {
|
||||||
|
return Response.json(
|
||||||
|
{
|
||||||
|
data: getUser.error,
|
||||||
|
success: false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
status: 400,
|
||||||
|
},
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const params: Parameters = Object.fromEntries(req.nextUrl.searchParams.entries());
|
||||||
|
|
||||||
|
try {
|
||||||
|
let user = await redis.hget("users", userId);
|
||||||
|
if (!user) await redis.hset("users", userId, "true");
|
||||||
|
} catch {
|
||||||
|
null;
|
||||||
|
}
|
||||||
|
|
||||||
|
return new Response(await renderCard(getUser.data, params), {
|
||||||
|
headers: {
|
||||||
|
"Content-Type": "image/svg+xml; charset=utf-8",
|
||||||
|
"content-security-policy": "default-src 'none'; img-src * data:; style-src 'unsafe-inline'",
|
||||||
|
},
|
||||||
|
status: 200,
|
||||||
|
});
|
||||||
|
}
|
||||||
BIN
src/app/favicon.ico
Normal file
BIN
src/app/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.3 KiB |
42
src/app/globals.css
Normal file
42
src/app/globals.css
Normal file
@@ -0,0 +1,42 @@
|
|||||||
|
@tailwind base;
|
||||||
|
@tailwind components;
|
||||||
|
@tailwind utilities;
|
||||||
|
|
||||||
|
:root {
|
||||||
|
--background: #010103;
|
||||||
|
--foreground: #171717;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
color: var(--foreground);
|
||||||
|
background: var(--background);
|
||||||
|
font-family: "Poppins", sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
@layer base {
|
||||||
|
:root {
|
||||||
|
--radius: 0.5rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* width */
|
||||||
|
::-webkit-scrollbar {
|
||||||
|
width: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Track */
|
||||||
|
::-webkit-scrollbar-track {
|
||||||
|
background: #131313;
|
||||||
|
border-radius: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Handle */
|
||||||
|
::-webkit-scrollbar-thumb {
|
||||||
|
background: #525252;
|
||||||
|
border-radius: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Handle on hover */
|
||||||
|
::-webkit-scrollbar-thumb:hover {
|
||||||
|
background: #303030;
|
||||||
|
}
|
||||||
34
src/app/layout.tsx
Normal file
34
src/app/layout.tsx
Normal file
@@ -0,0 +1,34 @@
|
|||||||
|
import type { Metadata } from "next";
|
||||||
|
import "./globals.css";
|
||||||
|
|
||||||
|
import { Poppins } from "next/font/google";
|
||||||
|
|
||||||
|
const poppins = Poppins({
|
||||||
|
weight: ["400", "500", "600", "700"],
|
||||||
|
subsets: ["latin"],
|
||||||
|
display: "swap",
|
||||||
|
});
|
||||||
|
|
||||||
|
export const metadata: Metadata = {
|
||||||
|
title: "Lanyard for GitHub Profile",
|
||||||
|
description: "Display your Discord Presence anywhere, using Lanyard",
|
||||||
|
openGraph: {
|
||||||
|
title: "Lanyard for GitHub Profile",
|
||||||
|
description: "Display your Discord Presence anywhere, using Lanyard",
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
export default function RootLayout({
|
||||||
|
children,
|
||||||
|
}: Readonly<{
|
||||||
|
children: React.ReactNode;
|
||||||
|
}>) {
|
||||||
|
return (
|
||||||
|
<html lang="en" suppressHydrationWarning>
|
||||||
|
{/* Supress Hydration Warning that caused by some extensions such as Colorzilla, do not remove this. */}
|
||||||
|
<body className={`${poppins.className} antialiased`} suppressHydrationWarning>
|
||||||
|
{children}
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
);
|
||||||
|
}
|
||||||
365
src/app/page.tsx
Normal file
365
src/app/page.tsx
Normal file
@@ -0,0 +1,365 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import React, { useState, JSX, useRef, useEffect } from "react";
|
||||||
|
import { motion } from "framer-motion";
|
||||||
|
import useSWR from "swr";
|
||||||
|
import { getUserCount } from "@/utils/actions";
|
||||||
|
import { isSnowflake } from "@/utils/snowflake";
|
||||||
|
import Link from "next/link";
|
||||||
|
import { PARAMETER_INFO } from "@/utils/parameters";
|
||||||
|
import * as Icon from "lucide-react";
|
||||||
|
import { Popover, PopoverContent, PopoverTrigger } from "@/components/popover";
|
||||||
|
import { cn, filterLetters } from "@/lib/utils";
|
||||||
|
|
||||||
|
export default function Home() {
|
||||||
|
const ORIGIN_URL = process.env.NODE_ENV === "development" ? "http://localhost:3000" : "https://lanyard.cnrad.dev";
|
||||||
|
|
||||||
|
const [userId, setUserId] = useState("");
|
||||||
|
const [userError, setUserError] = useState<string | JSX.Element>();
|
||||||
|
const [copyState, setCopyState] = useState("Copy");
|
||||||
|
const [outputType, setOutputType] = useState<"markdown" | "html" | "url">("markdown");
|
||||||
|
const [isLoaded, setIsLoaded] = useState(false);
|
||||||
|
const [options, setOptions] = useState<Record<string, string | boolean>>({});
|
||||||
|
|
||||||
|
const userCount = useSWR("getUserCount", getUserCount);
|
||||||
|
|
||||||
|
async function onLoadDiscordId(userId: string) {
|
||||||
|
setUserId(userId);
|
||||||
|
setIsLoaded(false);
|
||||||
|
setUserError(undefined);
|
||||||
|
|
||||||
|
if (userId.length < 1) return;
|
||||||
|
if (userId.length > 0 && !isSnowflake(userId)) return setUserError("Invalid Discord ID");
|
||||||
|
}
|
||||||
|
|
||||||
|
const url = `${ORIGIN_URL}/api/${userId}${
|
||||||
|
Object.keys(options).length > 0
|
||||||
|
? `?${Object.keys(options)
|
||||||
|
.map(option => `${option}=${options[option]}`)
|
||||||
|
.join("&")}`
|
||||||
|
: ""
|
||||||
|
}`;
|
||||||
|
|
||||||
|
const copyContent = {
|
||||||
|
markdown: `[](https://discord.com/users/${userId})`,
|
||||||
|
html: `<a href="https://discord.com/users/${userId}"><img src="${url}" /></a>`,
|
||||||
|
url: `${url}`,
|
||||||
|
};
|
||||||
|
|
||||||
|
const [isOptionsOpen, setIsOptionsOpen] = useState(false);
|
||||||
|
const optionsTriggerRef = useRef<HTMLButtonElement | null>(null);
|
||||||
|
const optionsContentRef = useRef<HTMLDivElement | null>(null);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
function handleOptionsClickOutside(event: MouseEvent) {
|
||||||
|
if (
|
||||||
|
isOptionsOpen &&
|
||||||
|
optionsContentRef.current &&
|
||||||
|
!optionsContentRef.current.contains(event.target as Node) &&
|
||||||
|
!optionsTriggerRef.current?.contains(event.target as Node)
|
||||||
|
) {
|
||||||
|
setIsOptionsOpen(false);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
document.addEventListener("mousedown", handleOptionsClickOutside);
|
||||||
|
return () => {
|
||||||
|
document.removeEventListener("mousedown", handleOptionsClickOutside);
|
||||||
|
};
|
||||||
|
}, [isOptionsOpen]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<main className="flex min-h-screen max-w-[100vw] flex-col items-center">
|
||||||
|
<div className="relative mt-16 flex w-[80%] max-w-[28rem] flex-col gap-2 rounded-md">
|
||||||
|
<p className="text-left text-3xl font-semibold text-[#cecece]">🏷️ lanyard-profile-readme </p>
|
||||||
|
<p className="mb-2 text-sm text-[#aaabaf]">
|
||||||
|
Uses{" "}
|
||||||
|
<a
|
||||||
|
href="https://github.com/Phineas/lanyard"
|
||||||
|
target="_blank"
|
||||||
|
rel="noreferrer noopener"
|
||||||
|
className="text-white underline decoration-transparent underline-offset-2 transition-colors duration-150 ease-out hover:decoration-white"
|
||||||
|
>
|
||||||
|
Lanyard
|
||||||
|
</a>{" "}
|
||||||
|
to display your Discord Presence anywhere.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div className="flex h-[2.25rem] w-full flex-row gap-2">
|
||||||
|
<input
|
||||||
|
className="w-full rounded-lg border border-white/10 bg-transparent px-2.5 py-1.5 font-mono text-sm text-gray-200 transition-colors duration-150 ease-out focus:border-white/50 focus:outline-none"
|
||||||
|
onChange={e => onLoadDiscordId(e.target.value)}
|
||||||
|
value={userId || ""}
|
||||||
|
placeholder="Enter your Discord ID"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<button
|
||||||
|
ref={optionsTriggerRef}
|
||||||
|
onClick={() => setIsOptionsOpen(p => !p)}
|
||||||
|
className="group flex min-h-[2.25rem] min-w-[2.25rem] items-center justify-center rounded-lg border border-white/10 bg-stone-900/50 transition-colors duration-150 ease-out hover:border-white/40"
|
||||||
|
>
|
||||||
|
<Icon.Settings size={18} className="text-white/40 group-hover:text-white/60" />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<motion.div
|
||||||
|
initial={{
|
||||||
|
scale: 0.98,
|
||||||
|
opacity: isOptionsOpen ? 1 : 0,
|
||||||
|
display: isOptionsOpen ? "block" : "none",
|
||||||
|
}}
|
||||||
|
animate={{
|
||||||
|
scale: isOptionsOpen ? 1 : 0.98,
|
||||||
|
opacity: isOptionsOpen ? 1 : 0,
|
||||||
|
display: isOptionsOpen ? "block" : "none",
|
||||||
|
}}
|
||||||
|
ref={optionsContentRef}
|
||||||
|
transition={{ duration: 0.2, ease: [0, 0.6, 0.4, 1] }}
|
||||||
|
className={cn(
|
||||||
|
"absolute top-32 z-[2] flex h-auto flex-col overflow-hidden rounded-lg border border-white/5 bg-black/75 p-4 text-white shadow-[0_6px_50px_-25px_rgba(180,177,255,0.2)] backdrop-blur-xl max-sm:h-[30rem] max-sm:w-full max-sm:overflow-y-scroll sm:-left-[1rem] sm:w-[30rem] sm:max-w-[30rem]",
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<div className="grid-rows-auto mb-4 flex w-full flex-col gap-2.5 sm:grid sm:grid-cols-2">
|
||||||
|
{PARAMETER_INFO.filter(item => item.type !== "boolean").map(item => {
|
||||||
|
return (
|
||||||
|
<div key={item.parameter} className="flex flex-col gap-1.5">
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<p className="text-sm text-gray-300">{item.title}</p>
|
||||||
|
<Popover>
|
||||||
|
<PopoverTrigger>
|
||||||
|
<Icon.InfoIcon
|
||||||
|
size={16}
|
||||||
|
className="rounded-md text-zinc-700 transition hover:text-gray-400"
|
||||||
|
/>
|
||||||
|
</PopoverTrigger>
|
||||||
|
<PopoverContent side="top" className="text-sm">
|
||||||
|
{item.description}
|
||||||
|
</PopoverContent>
|
||||||
|
</Popover>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{item.type === "string" && (
|
||||||
|
<input
|
||||||
|
className="relative h-8 w-full appearance-none rounded-md border border-white/10 bg-transparent px-2 py-0.5 text-sm outline-none transition-all duration-150 ease-out placeholder:text-white/30 focus:border-white/50 disabled:cursor-not-allowed disabled:opacity-50"
|
||||||
|
placeholder={item.options?.placeholder || "..."}
|
||||||
|
onChange={e => {
|
||||||
|
const filteredValue = encodeURIComponent(
|
||||||
|
filterLetters(
|
||||||
|
e.target.value,
|
||||||
|
(PARAMETER_INFO.find(p => p.parameter === item.parameter) as any).options.omit,
|
||||||
|
),
|
||||||
|
);
|
||||||
|
|
||||||
|
setOptions(prev => ({
|
||||||
|
...prev,
|
||||||
|
[item.parameter]: filteredValue,
|
||||||
|
}));
|
||||||
|
}}
|
||||||
|
value={decodeURIComponent((options[item.parameter] as string) || "")}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{item.type === "list" && (
|
||||||
|
<div className="relative">
|
||||||
|
<select
|
||||||
|
value={(options[item.parameter] as string) || ""}
|
||||||
|
onChange={e =>
|
||||||
|
setOptions(prev => ({
|
||||||
|
...prev,
|
||||||
|
[item.parameter]: e.target.value,
|
||||||
|
}))
|
||||||
|
}
|
||||||
|
className={cn(
|
||||||
|
"relative h-8 w-full appearance-none rounded-md border border-white/10 bg-transparent px-2 py-0.5 text-sm outline-none transition-all duration-150 ease-out placeholder:text-white/30 focus:border-white/50 disabled:cursor-not-allowed disabled:opacity-50",
|
||||||
|
{
|
||||||
|
"text-white/30": !options[item.parameter] || options[item.parameter] === "",
|
||||||
|
},
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<option value="" className="bg-background">
|
||||||
|
None
|
||||||
|
</option>
|
||||||
|
{item.options.list.map(option => (
|
||||||
|
<option value={option.value} key={option.value} className="bg-background">
|
||||||
|
{option.name}
|
||||||
|
</option>
|
||||||
|
))}
|
||||||
|
</select>
|
||||||
|
<Icon.ChevronDown
|
||||||
|
size={14}
|
||||||
|
className="absolute right-2 top-0 my-auto flex h-full text-white/50"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Separated for easier styling/readability */}
|
||||||
|
<div className="sm:grid-rows-auto flex flex-col gap-2 sm:grid sm:grid-cols-2">
|
||||||
|
{PARAMETER_INFO.filter(item => item.type === "boolean").map(item => {
|
||||||
|
return (
|
||||||
|
<div key={item.parameter} className="flex flex-row items-start gap-2.5 text-sm">
|
||||||
|
<input
|
||||||
|
type="checkbox"
|
||||||
|
className={cn(
|
||||||
|
"mt-0.5 max-h-4 min-h-4 min-w-4 max-w-4 cursor-pointer appearance-none before:overflow-clip before:rounded-[0.25rem] after:absolute after:h-4 after:w-4 after:rounded-[0.25rem] after:border after:border-white/10 after:transition-all after:duration-150 after:ease-out",
|
||||||
|
{
|
||||||
|
"after:border-gray-200/50 after:bg-gray-500/40": options[item.parameter] === "true",
|
||||||
|
"after:bg-zinc-700/10 after:hover:bg-zinc-700/25": options[item.parameter] !== "true",
|
||||||
|
},
|
||||||
|
)}
|
||||||
|
checked={options[item.parameter] === "true"}
|
||||||
|
onChange={e =>
|
||||||
|
setOptions(prev => ({
|
||||||
|
...prev,
|
||||||
|
[item.parameter]: e.target.checked.toString(),
|
||||||
|
}))
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<p
|
||||||
|
className="text-gray-300"
|
||||||
|
style={{
|
||||||
|
textDecoration: PARAMETER_INFO.find(p => p.parameter === item.parameter)?.deprecated
|
||||||
|
? "line-through"
|
||||||
|
: "none",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{item.title}
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<Popover>
|
||||||
|
<PopoverTrigger>
|
||||||
|
<Icon.InfoIcon
|
||||||
|
size={16}
|
||||||
|
className="mt-0.5 rounded-md text-zinc-700 transition hover:text-gray-400"
|
||||||
|
/>
|
||||||
|
</PopoverTrigger>
|
||||||
|
<PopoverContent side="top" className="text-sm">
|
||||||
|
{item.description}
|
||||||
|
</PopoverContent>
|
||||||
|
</Popover>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
|
||||||
|
{!isLoaded ? (
|
||||||
|
<motion.p
|
||||||
|
variants={{
|
||||||
|
open: { opacity: 1, display: "block" },
|
||||||
|
closed: { opacity: 0, display: "none" },
|
||||||
|
}}
|
||||||
|
initial="closed"
|
||||||
|
animate={userError ? "open" : "closed"}
|
||||||
|
className="mt-1 text-sm text-red-500"
|
||||||
|
transition={{ duration: 0.15 }}
|
||||||
|
>
|
||||||
|
{userError}
|
||||||
|
</motion.p>
|
||||||
|
) : null}
|
||||||
|
|
||||||
|
<motion.div
|
||||||
|
variants={{
|
||||||
|
loaded: {
|
||||||
|
opacity: 1,
|
||||||
|
},
|
||||||
|
waiting: {
|
||||||
|
opacity: 0,
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
initial="waiting"
|
||||||
|
animate={isLoaded ? "loaded" : "waiting"}
|
||||||
|
transition={{ duration: 0.15 }}
|
||||||
|
className="mt-2 flex flex-col gap-2"
|
||||||
|
>
|
||||||
|
<img
|
||||||
|
src={url}
|
||||||
|
height={280}
|
||||||
|
width={500}
|
||||||
|
alt="Your Lanyard Banner"
|
||||||
|
onLoad={() => setIsLoaded(true)}
|
||||||
|
onError={() =>
|
||||||
|
userId.length > 0 && isSnowflake(userId)
|
||||||
|
? setUserError(
|
||||||
|
<>
|
||||||
|
User is not monitored by Lanyard, please join{" "}
|
||||||
|
<Link href="https://discord.gg/lanyard" target="_blank" className="inline underline">
|
||||||
|
the server
|
||||||
|
</Link>{" "}
|
||||||
|
and try again.
|
||||||
|
</>,
|
||||||
|
)
|
||||||
|
: null
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<div className="mt-4 grid grid-cols-3 gap-1">
|
||||||
|
{(["markdown", "html", "url"] as const).map(type => (
|
||||||
|
<button
|
||||||
|
key={type}
|
||||||
|
className={cn(
|
||||||
|
"rounded-md border border-white/10 px-1.5 py-1 font-mono text-sm font-medium uppercase tracking-wide text-white/50 transition-colors duration-100 ease-out",
|
||||||
|
{
|
||||||
|
"border-white/20 bg-white/10 font-semibold text-white/75": outputType === type,
|
||||||
|
"hover:border-white/15 hover:bg-white/5": outputType !== type,
|
||||||
|
},
|
||||||
|
)}
|
||||||
|
onClick={() => setOutputType(type)}
|
||||||
|
>
|
||||||
|
{type}
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="break-all rounded-lg border border-white/10 bg-zinc-950 px-3 py-2 font-mono text-sm text-blue-400">
|
||||||
|
{copyContent[outputType]}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex gap-2">
|
||||||
|
<button
|
||||||
|
className="rounded-md border border-white/10 px-3 py-1 font-mono text-sm font-medium text-white/50 transition-colors duration-75 ease-out hover:border-white/20 hover:text-white/75"
|
||||||
|
onClick={() => {
|
||||||
|
navigator.clipboard.writeText(copyContent[outputType]);
|
||||||
|
setCopyState("Copied!");
|
||||||
|
setTimeout(() => setCopyState("Copy"), 1500);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{copyState}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
{userCount.data && (
|
||||||
|
<motion.div
|
||||||
|
initial={{
|
||||||
|
scale: 0.99,
|
||||||
|
opacity: 0,
|
||||||
|
transform: "translateY(10px) translateX(-50%)",
|
||||||
|
}}
|
||||||
|
animate={{
|
||||||
|
scale: 1,
|
||||||
|
opacity: 1,
|
||||||
|
transform: "translateY(0) translateX(-50%)",
|
||||||
|
}}
|
||||||
|
transition={{ duration: 1.25, ease: [0, 0.4, 0.2, 1] }}
|
||||||
|
className={cn(
|
||||||
|
"fixed bottom-0 left-1/2 mb-8 flex h-min w-min min-w-[10rem] flex-row items-center justify-center whitespace-nowrap rounded-full border border-white/5 bg-[#2A2A2A]/15 px-4 py-2.5 text-center text-sm leading-[1rem] text-white/50 shadow-[0_4px_45px_-20px_#b390ff] max-sm:hidden",
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
Currently at
|
||||||
|
<span className="bg-gradient-to-tr from-red-500 to-purple-700 bg-clip-text font-semibold text-transparent drop-shadow-[0_0_8px_#a931ff]">
|
||||||
|
{userCount.data?.toLocaleString()}
|
||||||
|
</span>
|
||||||
|
total users!
|
||||||
|
</motion.div>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
29
src/components/popover.tsx
Normal file
29
src/components/popover.tsx
Normal file
@@ -0,0 +1,29 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import * as React from "react";
|
||||||
|
import * as PopoverPrimitive from "@radix-ui/react-popover";
|
||||||
|
import { cn } from "@/lib/utils";
|
||||||
|
|
||||||
|
const Popover = PopoverPrimitive.Root;
|
||||||
|
const PopoverTrigger = PopoverPrimitive.Trigger;
|
||||||
|
const PopoverAnchor = PopoverPrimitive.Anchor;
|
||||||
|
const PopoverContent = React.forwardRef<
|
||||||
|
React.ElementRef<typeof PopoverPrimitive.Content>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
|
||||||
|
>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
|
||||||
|
<PopoverPrimitive.Portal>
|
||||||
|
<PopoverPrimitive.Content
|
||||||
|
ref={ref}
|
||||||
|
align={align}
|
||||||
|
sideOffset={sideOffset}
|
||||||
|
className={cn(
|
||||||
|
"z-50 w-72 rounded-md border border-white/10 bg-black/50 p-4 text-stone-50 shadow-md outline-none backdrop-blur-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
</PopoverPrimitive.Portal>
|
||||||
|
));
|
||||||
|
PopoverContent.displayName = PopoverPrimitive.Content.displayName;
|
||||||
|
|
||||||
|
export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor };
|
||||||
@@ -1,19 +0,0 @@
|
|||||||
export const getFlags = (flag: number): string[] => {
|
|
||||||
let flags: string[] = [];
|
|
||||||
|
|
||||||
// In the order they appear on profiles
|
|
||||||
if (flag & 1) flags.push("Discord_Employee"); // 1 << 0
|
|
||||||
if (flag & 262144) flags.push("Discord_Certified_Moderator"); // 1 << 18
|
|
||||||
if (flag & 2) flags.push("Partnered_Server_Owner"); // 1 << 1
|
|
||||||
if (flag & 4) flags.push("HypeSquad_Events"); // 1 << 2
|
|
||||||
if (flag & 64) flags.push("House_Bravery"); // 1 << 6
|
|
||||||
if (flag & 128) flags.push("House_Brilliance"); // 1 << 7
|
|
||||||
if (flag & 256) flags.push("House_Balance"); // 1 << 8
|
|
||||||
if (flag & 8) flags.push("Bug_Hunter_Level_1"); // 1 << 3
|
|
||||||
if (flag & 16384) flags.push("Bug_Hunter_Level_2"); // 1 << 14
|
|
||||||
if (flag & 4194304) flags.push("Active_Developer"); // 1 << 22
|
|
||||||
if (flag & 131072) flags.push("Early_Verified_Bot_Developer"); // 1 << 17
|
|
||||||
if (flag & 512) flags.push("Early_Supporter"); // 1 << 9
|
|
||||||
|
|
||||||
return flags;
|
|
||||||
};
|
|
||||||
13
src/lib/utils.ts
Normal file
13
src/lib/utils.ts
Normal file
@@ -0,0 +1,13 @@
|
|||||||
|
import { clsx, type ClassValue } from "clsx";
|
||||||
|
import { twMerge } from "tailwind-merge";
|
||||||
|
|
||||||
|
export function cn(...inputs: ClassValue[]) {
|
||||||
|
return twMerge(clsx(inputs));
|
||||||
|
}
|
||||||
|
|
||||||
|
export function filterLetters(str: string, lettersToRemove: string[] = []) {
|
||||||
|
lettersToRemove.forEach((letter) => {
|
||||||
|
str = str.replaceAll(letter, "");
|
||||||
|
});
|
||||||
|
return str;
|
||||||
|
}
|
||||||
@@ -1,578 +0,0 @@
|
|||||||
// probably the messiest code i've ever written but it works so :)
|
|
||||||
|
|
||||||
import { Badges } from "../public/assets/badges/BadgesEncoded";
|
|
||||||
import { getFlags } from "./getFlags";
|
|
||||||
import * as LanyardTypes from "./LanyardTypes";
|
|
||||||
import { encodeBase64 } from "./toBase64";
|
|
||||||
import escape from "escape-html";
|
|
||||||
|
|
||||||
type Parameters = {
|
|
||||||
theme?: string;
|
|
||||||
bg?: string;
|
|
||||||
clanbg?: string;
|
|
||||||
animated?: string;
|
|
||||||
animatedDecoration?: string;
|
|
||||||
hideDiscrim?: string;
|
|
||||||
hideStatus?: string;
|
|
||||||
hideTimestamp?: string;
|
|
||||||
hideBadges?: string;
|
|
||||||
hideProfile?: string;
|
|
||||||
hideActivity?: string;
|
|
||||||
hideSpotify?: string;
|
|
||||||
hideClan?: string;
|
|
||||||
hideDecoration?: string;
|
|
||||||
ignoreAppId?: string;
|
|
||||||
showDisplayName?: string;
|
|
||||||
borderRadius?: string;
|
|
||||||
idleMessage?: string;
|
|
||||||
};
|
|
||||||
|
|
||||||
const parseBool = (string: string | undefined): boolean => string === "true" ? true : false;
|
|
||||||
|
|
||||||
const parseAppId = (string: string | undefined): Array<string> => {
|
|
||||||
if (string === undefined) return [];
|
|
||||||
return string.split(",");
|
|
||||||
}
|
|
||||||
|
|
||||||
const elapsedTime = (timestamp: any) => {
|
|
||||||
let startTime = timestamp;
|
|
||||||
let endTime = Number(new Date());
|
|
||||||
let difference = (endTime - startTime) / 1000;
|
|
||||||
|
|
||||||
// we only calculate them, but we don't display them.
|
|
||||||
// this fixes a bug in the Discord API that does not send the correct timestamp to presence.
|
|
||||||
let daysDifference = Math.floor(difference / 60 / 60 / 24);
|
|
||||||
difference -= daysDifference * 60 * 60 * 24;
|
|
||||||
|
|
||||||
let hoursDifference = Math.floor(difference / 60 / 60);
|
|
||||||
difference -= hoursDifference * 60 * 60;
|
|
||||||
|
|
||||||
let minutesDifference = Math.floor(difference / 60);
|
|
||||||
difference -= minutesDifference * 60;
|
|
||||||
|
|
||||||
let secondsDifference = Math.floor(difference);
|
|
||||||
|
|
||||||
return `${hoursDifference >= 1 ? ("0" + hoursDifference).slice(-2) + ":" : ""}${("0" + minutesDifference).slice(
|
|
||||||
-2
|
|
||||||
)}:${("0" + secondsDifference).slice(-2)}`;
|
|
||||||
};
|
|
||||||
|
|
||||||
const renderCard = async (body: LanyardTypes.Root, params: Parameters): Promise<string> => {
|
|
||||||
let { data } = body;
|
|
||||||
|
|
||||||
let avatarBorderColor: string = "#747F8D",
|
|
||||||
avatarExtension: string = "webp",
|
|
||||||
statusExtension: string = "webp",
|
|
||||||
activity: any = false,
|
|
||||||
backgroundColor: string = "1a1c1f",
|
|
||||||
theme = "dark",
|
|
||||||
borderRadius = "10px",
|
|
||||||
idleMessage = "I'm not currently doing anything!";
|
|
||||||
|
|
||||||
let hideStatus = parseBool(params.hideStatus);
|
|
||||||
let hideTimestamp = parseBool(params.hideTimestamp);
|
|
||||||
let hideBadges = parseBool(params.hideBadges);
|
|
||||||
let hideProfile = parseBool(params.hideProfile);
|
|
||||||
let hideActivity = params.hideActivity ?? "false";
|
|
||||||
let hideSpotify = parseBool(params.hideSpotify);
|
|
||||||
let hideClan = parseBool(params.hideClan);
|
|
||||||
let hideDecoration = parseBool(params.hideDecoration);
|
|
||||||
let ignoreAppId = parseAppId(params.ignoreAppId);
|
|
||||||
let hideDiscrim = parseBool(params.hideDiscrim);
|
|
||||||
let showDisplayName = parseBool(params.showDisplayName);
|
|
||||||
|
|
||||||
if (!data.discord_user.avatar_decoration_data) hideDecoration = true;
|
|
||||||
if (parseBool(params.hideDiscrim) || body.data.discord_user.discriminator === "0") hideDiscrim = true;
|
|
||||||
if (!body.data.discord_user.clan) hideClan = true;
|
|
||||||
if (data.activities[0]?.emoji?.animated) statusExtension = "gif";
|
|
||||||
if (data.discord_user.avatar && data.discord_user.avatar.startsWith("a_")) avatarExtension = "gif";
|
|
||||||
if (params.animated === "false") avatarExtension = "webp";
|
|
||||||
if (params.theme === "light") {
|
|
||||||
backgroundColor = "#eee";
|
|
||||||
theme = "light";
|
|
||||||
}
|
|
||||||
if (params.bg) backgroundColor = params.bg;
|
|
||||||
let clanBackgroundColor: string = theme === "light" ? "#e0dede" : "#111214";
|
|
||||||
if (params.clanbg) clanBackgroundColor = params.clanbg;
|
|
||||||
if (params.idleMessage) idleMessage = params.idleMessage;
|
|
||||||
if (params.borderRadius) borderRadius = params.borderRadius;
|
|
||||||
|
|
||||||
let avatar: string;
|
|
||||||
if (data.discord_user.avatar) {
|
|
||||||
avatar = await encodeBase64(
|
|
||||||
`https://cdn.discordapp.com/avatars/${data.discord_user.id}/${
|
|
||||||
data.discord_user.avatar
|
|
||||||
}.${avatarExtension}?size=${avatarExtension === "gif" ? "64" : "256"}`
|
|
||||||
);
|
|
||||||
} else {
|
|
||||||
avatar = await encodeBase64(
|
|
||||||
`https://cdn.discordapp.com/embed/avatars/${data.discord_user.discriminator === "0"
|
|
||||||
? ((Number(BigInt(data.discord_user.id) >> BigInt(22))) % 6)
|
|
||||||
: Number(data.discord_user.discriminator) % 5}.png`
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
let clanBadge: string;
|
|
||||||
if (data.discord_user.clan) {
|
|
||||||
clanBadge = await encodeBase64(
|
|
||||||
`https://cdn.discordapp.com/clan-badges/${data.discord_user.clan.identity_guild_id}/${data.discord_user.clan.badge}.png?size=16`
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
let avatarDecoration: string;
|
|
||||||
if (data.discord_user.avatar_decoration_data) {
|
|
||||||
avatarDecoration = await encodeBase64(
|
|
||||||
`https://cdn.discordapp.com/avatar-decoration-presets/${data.discord_user.avatar_decoration_data.asset}.png?size=64&passthrough=${params.animatedDecoration || "true"}`
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
switch (data.discord_status) {
|
|
||||||
case "online":
|
|
||||||
avatarBorderColor = "#43B581";
|
|
||||||
break;
|
|
||||||
case "idle":
|
|
||||||
avatarBorderColor = "#FAA61A";
|
|
||||||
break;
|
|
||||||
case "dnd":
|
|
||||||
avatarBorderColor = "#F04747";
|
|
||||||
break;
|
|
||||||
case "offline":
|
|
||||||
avatarBorderColor = "#747F8D";
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
|
|
||||||
let flags: string[] = getFlags(data.discord_user.public_flags);
|
|
||||||
if (data.discord_user.avatar && data.discord_user.avatar.includes("a_")) flags.push("Nitro");
|
|
||||||
|
|
||||||
let userStatus: Record<string, any> | null = null;
|
|
||||||
if (data.activities[0] && data.activities[0].type === 4) userStatus = data.activities[0];
|
|
||||||
|
|
||||||
const activities = data.activities
|
|
||||||
// Filter only type 0
|
|
||||||
.filter(activity => activity.type === 0)
|
|
||||||
// Filter ignored app ID
|
|
||||||
.filter(activity => !ignoreAppId.includes(activity.application_id ?? ""));
|
|
||||||
|
|
||||||
// Take the highest one
|
|
||||||
activity = Array.isArray(activities) ? activities[0] : activities;
|
|
||||||
|
|
||||||
// Calculate height of parent SVG element
|
|
||||||
const svgHeight = (): string => {
|
|
||||||
if (hideProfile) return "130";
|
|
||||||
if (hideActivity === "true") return "91";
|
|
||||||
if (hideActivity === "whenNotUsed" && !activity && !data.listening_to_spotify) return "91";
|
|
||||||
if (hideSpotify && data.listening_to_spotify) return "210";
|
|
||||||
return "210";
|
|
||||||
}
|
|
||||||
|
|
||||||
// Calculate height of main div element
|
|
||||||
const divHeight = (): string => {
|
|
||||||
if (hideProfile) return "120";
|
|
||||||
if (hideActivity === "true") return "81";
|
|
||||||
if (hideActivity === "whenNotUsed" && !activity && !data.listening_to_spotify) return "81";
|
|
||||||
if (hideSpotify && data.listening_to_spotify) return "200";
|
|
||||||
return "200";
|
|
||||||
}
|
|
||||||
|
|
||||||
return `
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xhtml="http://www.w3.org/1999/xhtml" width="410px" height="${svgHeight()}px">
|
|
||||||
<defs>
|
|
||||||
<style>
|
|
||||||
.hover-opacity:hover {
|
|
||||||
opacity: 0.25;
|
|
||||||
}
|
|
||||||
|
|
||||||
.transition {
|
|
||||||
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
|
|
||||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
||||||
transition-duration: 200ms;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</defs>
|
|
||||||
<foreignObject x="0" y="0" width="410" height="${svgHeight()}">
|
|
||||||
<div xmlns="http://www.w3.org/1999/xhtml" style="
|
|
||||||
position: absolute;
|
|
||||||
width: 400px;
|
|
||||||
height: ${divHeight()}px;
|
|
||||||
inset: 0;
|
|
||||||
background-color: #${backgroundColor};
|
|
||||||
color: ${theme === "dark" ? "#fff" : "#000"};
|
|
||||||
font-family: 'Century Gothic', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
|
|
||||||
font-size: 16px;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
padding: 5px;
|
|
||||||
border-radius: ${borderRadius};
|
|
||||||
">
|
|
||||||
|
|
||||||
${
|
|
||||||
hideProfile ? "" : `
|
|
||||||
<div style="
|
|
||||||
width: 400px;
|
|
||||||
height: 100px;
|
|
||||||
inset: 0;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
padding-bottom: 5px;
|
|
||||||
${hideActivity !== "false" && !activity && !data.listening_to_spotify ?
|
|
||||||
""
|
|
||||||
: `border-bottom: solid 0.5px ${theme === "dark" ?
|
|
||||||
"hsl(0, 0%, 100%, 10%)"
|
|
||||||
: "hsl(0, 0%, 0%, 10%)"
|
|
||||||
}`
|
|
||||||
}
|
|
||||||
">
|
|
||||||
<div style="
|
|
||||||
display: flex;
|
|
||||||
position: relative;
|
|
||||||
flex-direction: row;
|
|
||||||
height: 80px;
|
|
||||||
width: 80px;
|
|
||||||
">
|
|
||||||
<img src="data:image/png;base64,${avatar}"
|
|
||||||
style="
|
|
||||||
border-radius: 50%;
|
|
||||||
width: 50px;
|
|
||||||
height: 50px;
|
|
||||||
position: relative;
|
|
||||||
top: 50%;
|
|
||||||
left: 50%;
|
|
||||||
transform: translate(-50%, -50%);
|
|
||||||
"/>
|
|
||||||
${hideDecoration || !data.discord_user.avatar_decoration_data ? "" : `
|
|
||||||
<img src="data:image/png;base64,${avatarDecoration!}"
|
|
||||||
class="hover-opacity transition"
|
|
||||||
style="
|
|
||||||
display: block;
|
|
||||||
width: 64px;
|
|
||||||
height: 64px;
|
|
||||||
position: absolute;
|
|
||||||
top: 50%;
|
|
||||||
left: 50%;
|
|
||||||
transform: translate(-50%, -50%);
|
|
||||||
"/>
|
|
||||||
`}
|
|
||||||
<span style="
|
|
||||||
position: absolute;
|
|
||||||
bottom: 14px;
|
|
||||||
right: 14px;
|
|
||||||
height: 13px;
|
|
||||||
width: 13px;
|
|
||||||
background-color: ${avatarBorderColor};
|
|
||||||
border-radius: 50%;
|
|
||||||
border: 3px solid #${backgroundColor};
|
|
||||||
" />
|
|
||||||
</div>
|
|
||||||
<div style="
|
|
||||||
height: 80px;
|
|
||||||
width: 260px;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: center;
|
|
||||||
">
|
|
||||||
<div style="
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
height: 25px;
|
|
||||||
">
|
|
||||||
<h1 style="
|
|
||||||
font-size: 1.15rem;
|
|
||||||
margin: 0 12px 0 0;
|
|
||||||
white-space: nowrap;
|
|
||||||
">
|
|
||||||
${escape(showDisplayName ? data.discord_user.global_name : data.discord_user.username)}${
|
|
||||||
!hideDiscrim && !showDisplayName
|
|
||||||
? `<span style="color: ${theme === "dark" ? "#ccc" : "#666"}; font-weight: lighter;">#${
|
|
||||||
data.discord_user.discriminator
|
|
||||||
}</span>`
|
|
||||||
: ""
|
|
||||||
}
|
|
||||||
</h1>
|
|
||||||
|
|
||||||
${hideClan || !data.discord_user.clan?.tag && !data.discord_user.clan?.badge ? "" : `
|
|
||||||
<span style="
|
|
||||||
background-color: ${clanBackgroundColor};
|
|
||||||
border-radius: 0.375rem;
|
|
||||||
padding-left: 0.5rem;
|
|
||||||
padding-right: 0.5rem;
|
|
||||||
margin-left: -6px;
|
|
||||||
margin-right: 12px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 0.25rem;
|
|
||||||
font-size: 16px;
|
|
||||||
font-weight: 500;
|
|
||||||
height: 100%;
|
|
||||||
">
|
|
||||||
<img src="data:image/png;base64,${clanBadge!}" />
|
|
||||||
<p style="margin-bottom: 1.1rem">${escape(data.discord_user.clan!.tag)}</p>
|
|
||||||
</span>
|
|
||||||
`}
|
|
||||||
|
|
||||||
${hideBadges ? "" : flags.map(v => `
|
|
||||||
<img src="data:image/png;base64,${Badges[v]}" style="
|
|
||||||
width: auto;
|
|
||||||
height: 20px;
|
|
||||||
position: relative;
|
|
||||||
top: 50%;
|
|
||||||
transform: translate(0%, -50%);
|
|
||||||
margin-right: 7px;
|
|
||||||
" />`).join("")
|
|
||||||
}
|
|
||||||
</div>
|
|
||||||
${showDisplayName ?
|
|
||||||
`<h2 style="
|
|
||||||
font-size: 0.95rem;
|
|
||||||
margin: 0;
|
|
||||||
white-space: nowrap;
|
|
||||||
font-weight: 400;
|
|
||||||
">
|
|
||||||
${escape(data.discord_user.username)}
|
|
||||||
</h2>`
|
|
||||||
: ``
|
|
||||||
}
|
|
||||||
${
|
|
||||||
userStatus && !hideStatus ? `
|
|
||||||
<p style="
|
|
||||||
font-size: 0.9rem;
|
|
||||||
margin: 0;
|
|
||||||
color: ${theme === "dark" ? "#aaa" : "#333"};
|
|
||||||
font-weight: 400;
|
|
||||||
overflow: hidden;
|
|
||||||
white-space: nowrap;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
">
|
|
||||||
${
|
|
||||||
userStatus.emoji?.id ? `
|
|
||||||
<img src="data:image/png;base64,${await encodeBase64(
|
|
||||||
`https://cdn.discordapp.com/emojis/${userStatus.emoji.id}.${statusExtension}`
|
|
||||||
)}"
|
|
||||||
style="
|
|
||||||
width: 15px;
|
|
||||||
height: 15px;
|
|
||||||
position: relative;
|
|
||||||
top: 10px;
|
|
||||||
transform: translate(0%, -50%);
|
|
||||||
margin: 0 2px 0 0;
|
|
||||||
" />` : ''
|
|
||||||
}
|
|
||||||
${
|
|
||||||
userStatus.state && userStatus.emoji?.name && !userStatus.emoji.id
|
|
||||||
? `${userStatus.emoji.name} ${escape(userStatus.state)}`
|
|
||||||
: userStatus.state
|
|
||||||
? escape(userStatus.state)
|
|
||||||
: !userStatus.state && userStatus.emoji?.name && !userStatus.emoji.id
|
|
||||||
? escape(userStatus.emoji.name)
|
|
||||||
: ''
|
|
||||||
}
|
|
||||||
</p>` : ``
|
|
||||||
}
|
|
||||||
</div>
|
|
||||||
</div>`
|
|
||||||
}
|
|
||||||
|
|
||||||
${
|
|
||||||
activity ? `
|
|
||||||
<div style="
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
height: 120px;
|
|
||||||
margin-left: 15px;
|
|
||||||
font-size: 0.75rem;
|
|
||||||
padding-top: 18px;
|
|
||||||
">
|
|
||||||
<div style="
|
|
||||||
margin-right: 15px;
|
|
||||||
width: auto;
|
|
||||||
height: auto;
|
|
||||||
">
|
|
||||||
${
|
|
||||||
activity.assets?.large_image ? `
|
|
||||||
<img src="data:image/png;base64,${await encodeBase64(
|
|
||||||
activity.assets.large_image.startsWith("mp:external/")
|
|
||||||
? `https://media.discordapp.net/external/${activity.assets.large_image.replace("mp:external/", "")}`
|
|
||||||
: `https://cdn.discordapp.com/app-assets/${activity.application_id}/${activity.assets.large_image}.webp`
|
|
||||||
)}"
|
|
||||||
style="
|
|
||||||
width: 80px;
|
|
||||||
height: 80px;
|
|
||||||
border: solid 0.5px #222;
|
|
||||||
border-radius: 10px;
|
|
||||||
"/>
|
|
||||||
` : `
|
|
||||||
<img src="data:image/png;base64,${await encodeBase64(
|
|
||||||
`https://lanyard-profile-readme.vercel.app/assets/unknown.png`
|
|
||||||
)}" style="
|
|
||||||
width: 70px;
|
|
||||||
height: 70px;
|
|
||||||
margin-top: 4px;
|
|
||||||
filter: invert(100);
|
|
||||||
"/>
|
|
||||||
`}
|
|
||||||
${
|
|
||||||
activity.assets?.small_image ? `
|
|
||||||
<img src="data:image/png;base64,${await encodeBase64(
|
|
||||||
activity.assets.small_image.startsWith("mp:external/")
|
|
||||||
? `https://media.discordapp.net/external/${activity.assets.small_image.replace("mp:external/", "")}`
|
|
||||||
: `https://cdn.discordapp.com/app-assets/${activity.application_id}/${activity.assets.small_image}.webp`
|
|
||||||
)}"
|
|
||||||
style="
|
|
||||||
width: 30px;
|
|
||||||
height: 30px;
|
|
||||||
border-radius: 50%;
|
|
||||||
margin-left: -26px;
|
|
||||||
margin-bottom: -8px;
|
|
||||||
"/>` : ``
|
|
||||||
}
|
|
||||||
</div>
|
|
||||||
<div style="
|
|
||||||
color: #999;
|
|
||||||
margin-top: ${
|
|
||||||
activity.timestamps?.start && !hideTimestamp
|
|
||||||
? "-6px"
|
|
||||||
: "5px"
|
|
||||||
};
|
|
||||||
line-height: 1;
|
|
||||||
width: 279px;
|
|
||||||
">
|
|
||||||
<p style="
|
|
||||||
color: ${theme === "dark" ? "#fff" : "#000"};
|
|
||||||
font-size: 0.85rem;
|
|
||||||
font-weight: bold;
|
|
||||||
overflow: hidden;
|
|
||||||
white-space: nowrap;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
height: 15px;
|
|
||||||
margin: 7px 0;
|
|
||||||
">${escape(activity.name)}</p>
|
|
||||||
${
|
|
||||||
activity.details
|
|
||||||
? `
|
|
||||||
<p style="
|
|
||||||
color: ${theme === "dark" ? "#ccc" : "#777"};
|
|
||||||
overflow: hidden;
|
|
||||||
white-space: nowrap;
|
|
||||||
font-size: 0.85rem;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
height: 15px;
|
|
||||||
margin: 7px 0;
|
|
||||||
">${escape(activity.details)}</p>`
|
|
||||||
: ``
|
|
||||||
}
|
|
||||||
${
|
|
||||||
activity.state
|
|
||||||
? `
|
|
||||||
<p style="
|
|
||||||
color: ${theme === "dark" ? "#ccc" : "#777"};
|
|
||||||
overflow: hidden;
|
|
||||||
white-space: nowrap;
|
|
||||||
font-size: 0.85rem;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
height: 15px;
|
|
||||||
margin: 7px 0;
|
|
||||||
">${escape(activity.state)}${
|
|
||||||
activity.party?.size
|
|
||||||
? ` (${activity.party.size[0]} of ${activity.party.size[1]})`
|
|
||||||
: ""
|
|
||||||
}</p>` : ``
|
|
||||||
}
|
|
||||||
${
|
|
||||||
activity.timestamps?.start && !hideTimestamp ? `
|
|
||||||
<p style="
|
|
||||||
color: ${theme === "dark" ? "#ccc" : "#777"};
|
|
||||||
overflow: hidden;
|
|
||||||
white-space: nowrap;
|
|
||||||
font-size: 0.85rem;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
height: 15px;
|
|
||||||
margin: 7px 0;
|
|
||||||
">${elapsedTime(new Date(activity.timestamps.start).getTime())} elapsed</p>`
|
|
||||||
: ``
|
|
||||||
}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
` : ``
|
|
||||||
}
|
|
||||||
|
|
||||||
${
|
|
||||||
data.listening_to_spotify && !activity && !hideSpotify && data.activities[Object.keys(data.activities).length - 1].type === 2
|
|
||||||
? `
|
|
||||||
<div style="
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
height: 120px;
|
|
||||||
margin-left: 15px;
|
|
||||||
font-size: 0.8rem;
|
|
||||||
padding-top: 18px;
|
|
||||||
">
|
|
||||||
<img src="${await (async () => {
|
|
||||||
const album = await encodeBase64(data.spotify.album_art_url);
|
|
||||||
if (album) return `data:image/png;base64,${album}" style="border: solid 0.5px #222;`;
|
|
||||||
return 'https://lanyard-profile-readme.vercel.app/assets/unknown.png" style="filter: invert(100);';
|
|
||||||
})()}
|
|
||||||
width: 80px;
|
|
||||||
height: 80px;
|
|
||||||
border-radius: 10px;
|
|
||||||
margin-right: 15px;
|
|
||||||
"/>
|
|
||||||
|
|
||||||
<div style="
|
|
||||||
color: #999;
|
|
||||||
margin-top: -3px;
|
|
||||||
line-height: 1;
|
|
||||||
width: 279px;
|
|
||||||
">
|
|
||||||
<p style="font-size: 0.75rem; font-weight: bold; color: ${
|
|
||||||
theme === "dark" ? "#1CB853" : "#0d943d"
|
|
||||||
}; margin-bottom: 15px;">LISTENING TO SPOTIFY...</p>
|
|
||||||
<p style="
|
|
||||||
height: 15px;
|
|
||||||
color: ${theme === "dark" ? "#fff" : "#000"};
|
|
||||||
font-weight: bold;
|
|
||||||
font-size: 0.85rem;
|
|
||||||
overflow: hidden;
|
|
||||||
white-space: nowrap;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
margin: 7px 0;
|
|
||||||
">${escape(data.spotify.song)}</p>
|
|
||||||
<p style="
|
|
||||||
margin: 7px 0;
|
|
||||||
height: 15px;
|
|
||||||
overflow: hidden;
|
|
||||||
white-space: nowrap;
|
|
||||||
font-size: 0.85rem;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
color: ${theme === "dark" ? "#ccc" : "#777"};
|
|
||||||
">By ${escape(data.spotify.artist)}</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
` : ``
|
|
||||||
}
|
|
||||||
${
|
|
||||||
!activity && (!data.listening_to_spotify || hideSpotify) && hideActivity === "false"
|
|
||||||
? `<div style="
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
height: 150px;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
">
|
|
||||||
<p style="
|
|
||||||
font-style: italic;
|
|
||||||
font-size: 0.8rem;
|
|
||||||
color: ${theme === "dark" ? "#aaa" : "#444"};
|
|
||||||
height: auto;
|
|
||||||
text-align: center;
|
|
||||||
">
|
|
||||||
${escape(idleMessage)}
|
|
||||||
</p>
|
|
||||||
</div>` : ``
|
|
||||||
}
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</foreignObject>
|
|
||||||
</svg>
|
|
||||||
`;
|
|
||||||
};
|
|
||||||
|
|
||||||
export default renderCard;
|
|
||||||
@@ -1,13 +0,0 @@
|
|||||||
import imageToBase64 from "image-to-base64";
|
|
||||||
|
|
||||||
export const encodeBase64 = async (url: string): Promise<string> => {
|
|
||||||
let response = "";
|
|
||||||
|
|
||||||
try {
|
|
||||||
response = await imageToBase64(url);
|
|
||||||
} catch (e) {
|
|
||||||
console.log(e);
|
|
||||||
}
|
|
||||||
|
|
||||||
return response;
|
|
||||||
};
|
|
||||||
9
src/utils/actions.ts
Normal file
9
src/utils/actions.ts
Normal file
@@ -0,0 +1,9 @@
|
|||||||
|
"use server";
|
||||||
|
import redis from "@/utils/redis";
|
||||||
|
|
||||||
|
export async function getUserCount() {
|
||||||
|
let users = await redis.hgetall("users");
|
||||||
|
let count = Object.keys(users);
|
||||||
|
|
||||||
|
return count.length;
|
||||||
|
}
|
||||||
26
src/utils/helpers.ts
Normal file
26
src/utils/helpers.ts
Normal file
@@ -0,0 +1,26 @@
|
|||||||
|
import type { renderToStaticMarkup as _renderToStaticMarkup } from "react-dom/server";
|
||||||
|
|
||||||
|
export let renderToStaticMarkup: typeof _renderToStaticMarkup;
|
||||||
|
import("react-dom/server").then(module => {
|
||||||
|
renderToStaticMarkup = module.renderToStaticMarkup;
|
||||||
|
});
|
||||||
|
|
||||||
|
export const getFlags = (flag: number): string[] => {
|
||||||
|
let flags: string[] = [];
|
||||||
|
|
||||||
|
// In the order they appear on profiles
|
||||||
|
if (flag & 1) flags.push("Discord_Employee"); // 1 << 0
|
||||||
|
if (flag & 262144) flags.push("Discord_Certified_Moderator"); // 1 << 18
|
||||||
|
if (flag & 2) flags.push("Partnered_Server_Owner"); // 1 << 1
|
||||||
|
if (flag & 4) flags.push("HypeSquad_Events"); // 1 << 2
|
||||||
|
if (flag & 64) flags.push("House_Bravery"); // 1 << 6
|
||||||
|
if (flag & 128) flags.push("House_Brilliance"); // 1 << 7
|
||||||
|
if (flag & 256) flags.push("House_Balance"); // 1 << 8
|
||||||
|
if (flag & 8) flags.push("Bug_Hunter_Level_1"); // 1 << 3
|
||||||
|
if (flag & 16384) flags.push("Bug_Hunter_Level_2"); // 1 << 14
|
||||||
|
if (flag & 4194304) flags.push("Active_Developer"); // 1 << 22
|
||||||
|
if (flag & 131072) flags.push("Early_Verified_Bot_Developer"); // 1 << 17
|
||||||
|
if (flag & 512) flags.push("Early_Supporter"); // 1 << 9
|
||||||
|
|
||||||
|
return flags;
|
||||||
|
};
|
||||||
193
src/utils/parameters.ts
Normal file
193
src/utils/parameters.ts
Normal file
@@ -0,0 +1,193 @@
|
|||||||
|
export type Parameters = {
|
||||||
|
theme?: string;
|
||||||
|
bg?: string;
|
||||||
|
clanbg?: string;
|
||||||
|
animated?: string;
|
||||||
|
animatedDecoration?: string;
|
||||||
|
hideDiscrim?: string;
|
||||||
|
hideStatus?: string;
|
||||||
|
hideTimestamp?: string;
|
||||||
|
hideBadges?: string;
|
||||||
|
hideProfile?: string;
|
||||||
|
hideActivity?: string;
|
||||||
|
hideSpotify?: string;
|
||||||
|
hideClan?: string;
|
||||||
|
hideDecoration?: string;
|
||||||
|
ignoreAppId?: string;
|
||||||
|
showDisplayName?: string;
|
||||||
|
borderRadius?: string;
|
||||||
|
idleMessage?: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
export type IParameterInfo = Array<
|
||||||
|
{ deprecated?: boolean } & (
|
||||||
|
| {
|
||||||
|
parameter: string;
|
||||||
|
type: "boolean";
|
||||||
|
title: string;
|
||||||
|
description?: string;
|
||||||
|
options?: {
|
||||||
|
defaultBool?: boolean;
|
||||||
|
};
|
||||||
|
}
|
||||||
|
| {
|
||||||
|
parameter: string;
|
||||||
|
type: "string";
|
||||||
|
title: string;
|
||||||
|
description?: string;
|
||||||
|
options?: {
|
||||||
|
placeholder?: string;
|
||||||
|
omit?: string[];
|
||||||
|
};
|
||||||
|
}
|
||||||
|
| {
|
||||||
|
parameter: string;
|
||||||
|
type: "list";
|
||||||
|
title: string;
|
||||||
|
description?: string;
|
||||||
|
options: {
|
||||||
|
list: Array<{
|
||||||
|
name: string;
|
||||||
|
value: string;
|
||||||
|
}>;
|
||||||
|
};
|
||||||
|
}
|
||||||
|
)
|
||||||
|
>;
|
||||||
|
|
||||||
|
export const PARAMETER_INFO: IParameterInfo = [
|
||||||
|
{
|
||||||
|
parameter: "theme",
|
||||||
|
type: "list",
|
||||||
|
title: "Theme",
|
||||||
|
description: "Changes the background and text colors. Can be overridden with the `bg` parameter.",
|
||||||
|
options: {
|
||||||
|
list: [
|
||||||
|
{
|
||||||
|
name: "Light",
|
||||||
|
value: "light",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Dark",
|
||||||
|
value: "dark",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
parameter: "bg",
|
||||||
|
type: "string",
|
||||||
|
title: "Background Color",
|
||||||
|
description: "Changes the background color to a hex color (no octothorpe).",
|
||||||
|
options: {
|
||||||
|
placeholder: "1A1C1F",
|
||||||
|
omit: ["#"],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
parameter: "borderRadius",
|
||||||
|
type: "string",
|
||||||
|
title: "Border Radius",
|
||||||
|
description: "Changes the border radius of the card. Follows the CSS <length> spec (px, rem, etc.).",
|
||||||
|
options: {
|
||||||
|
placeholder: "10px",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
parameter: "animated",
|
||||||
|
type: "boolean",
|
||||||
|
title: "Disable Animated Avatar",
|
||||||
|
description: "Disables an animated avatar.",
|
||||||
|
options: {
|
||||||
|
defaultBool: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
parameter: "idleMessage",
|
||||||
|
type: "string",
|
||||||
|
title: "Idle Message",
|
||||||
|
description: 'Changes the idle message. Defaults to "I\'m not currently doing anything!".',
|
||||||
|
options: {
|
||||||
|
placeholder: "I'm not currently doing anything!",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
parameter: "showDisplayName",
|
||||||
|
type: "boolean",
|
||||||
|
title: "Show Display Name",
|
||||||
|
description: "Shows your global display name alongside your username.",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
parameter: "animatedDecoration",
|
||||||
|
type: "boolean",
|
||||||
|
title: "Disable Animated Avatar Decoration",
|
||||||
|
description: "Disables animated avatar decorations.",
|
||||||
|
options: {
|
||||||
|
defaultBool: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
parameter: "hideDecoration",
|
||||||
|
type: "boolean",
|
||||||
|
title: "Hide Avatar Decoration",
|
||||||
|
description: "Hides any avatar decorations.",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
parameter: "hideStatus",
|
||||||
|
type: "boolean",
|
||||||
|
title: "Hide Status",
|
||||||
|
description: "Hides your custom Discord status.",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
parameter: "hideTimestamp",
|
||||||
|
type: "boolean",
|
||||||
|
title: "Hide Activity Time",
|
||||||
|
description: "Hides the time spent on an activity.",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
parameter: "hideClan",
|
||||||
|
type: "boolean",
|
||||||
|
title: "Hide Clan Tag",
|
||||||
|
description: "Hides your Guild Tag (formerly Clan Tag)",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
parameter: "hideBadges",
|
||||||
|
type: "boolean",
|
||||||
|
title: "Hide Badges",
|
||||||
|
description: "Hides your profile badges.",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
parameter: "hideProfile",
|
||||||
|
type: "boolean",
|
||||||
|
title: "Hide Profile",
|
||||||
|
description: "Hides your profile, keeps your activity.",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
parameter: "hideActivity",
|
||||||
|
type: "boolean",
|
||||||
|
title: "Hide Activity",
|
||||||
|
description: "Hides your activity, keeps your profile.",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
parameter: "hideSpotify",
|
||||||
|
type: "boolean",
|
||||||
|
title: "Hide Spotify",
|
||||||
|
description: "Hides your Spotify activity only.",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
parameter: "ignoreAppId",
|
||||||
|
type: "string",
|
||||||
|
title: "Hide App by ID",
|
||||||
|
description: "Hide apps by their respective ID, as a comma-separated list.",
|
||||||
|
options: {
|
||||||
|
placeholder: "1302143410907648071, 1302132259368861759",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
parameter: "hideDiscrim",
|
||||||
|
type: "boolean",
|
||||||
|
title: "Hide Discriminator",
|
||||||
|
description: "Hides your discriminator. (DEPRECATED, RIP)",
|
||||||
|
deprecated: true,
|
||||||
|
},
|
||||||
|
].sort((a, b) => b.type.localeCompare(a.type)) as IParameterInfo;
|
||||||
@@ -1,6 +1,6 @@
|
|||||||
import Redis from "ioredis";
|
import Redis from "ioredis";
|
||||||
|
|
||||||
const redis = new Redis(process.env.REDIS_URL, {
|
const redis = new Redis(process.env.REDIS_URL!, {
|
||||||
connectTimeout: 1000,
|
connectTimeout: 1000,
|
||||||
lazyConnect: false,
|
lazyConnect: false,
|
||||||
maxRetriesPerRequest: 1,
|
maxRetriesPerRequest: 1,
|
||||||
663
src/utils/renderCard.tsx
Normal file
663
src/utils/renderCard.tsx
Normal file
@@ -0,0 +1,663 @@
|
|||||||
|
"use server";
|
||||||
|
|
||||||
|
import { Badges } from "#/public/assets/badges/BadgesEncoded";
|
||||||
|
import { getFlags, renderToStaticMarkup } from "@/utils/helpers";
|
||||||
|
import * as LanyardTypes from "@/utils/LanyardTypes";
|
||||||
|
import { encodeBase64 } from "@/utils/toBase64";
|
||||||
|
import { DetailedHTMLProps, HTMLAttributes } from "react";
|
||||||
|
|
||||||
|
export type Parameters = {
|
||||||
|
theme?: string;
|
||||||
|
bg?: string;
|
||||||
|
clanbg?: string;
|
||||||
|
animated?: string;
|
||||||
|
animatedDecoration?: string;
|
||||||
|
hideDiscrim?: string;
|
||||||
|
hideStatus?: string;
|
||||||
|
hideTimestamp?: string;
|
||||||
|
hideBadges?: string;
|
||||||
|
hideProfile?: string;
|
||||||
|
hideActivity?: string;
|
||||||
|
hideSpotify?: string;
|
||||||
|
hideClan?: string;
|
||||||
|
hideDecoration?: string;
|
||||||
|
ignoreAppId?: string;
|
||||||
|
showDisplayName?: string;
|
||||||
|
borderRadius?: string;
|
||||||
|
idleMessage?: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
const parseBool = (string: string | undefined): boolean => (string === "true" ? true : false);
|
||||||
|
|
||||||
|
const parseAppId = (string: string | undefined): Array<string> => {
|
||||||
|
if (string === undefined) return [];
|
||||||
|
return string.split(",");
|
||||||
|
};
|
||||||
|
|
||||||
|
const elapsedTime = (timestamp: any): string => {
|
||||||
|
let startTime = timestamp;
|
||||||
|
let endTime = Number(new Date());
|
||||||
|
let difference = (endTime - startTime) / 1000;
|
||||||
|
|
||||||
|
// we only calculate them, but we don't display them.
|
||||||
|
// this fixes a bug in the Discord API that does not send the correct timestamp to presence.
|
||||||
|
let daysDifference = Math.floor(difference / 60 / 60 / 24);
|
||||||
|
difference -= daysDifference * 60 * 60 * 24;
|
||||||
|
|
||||||
|
let hoursDifference = Math.floor(difference / 60 / 60);
|
||||||
|
difference -= hoursDifference * 60 * 60;
|
||||||
|
|
||||||
|
let minutesDifference = Math.floor(difference / 60);
|
||||||
|
difference -= minutesDifference * 60;
|
||||||
|
|
||||||
|
let secondsDifference = Math.floor(difference);
|
||||||
|
|
||||||
|
return `${hoursDifference >= 1 ? ("0" + hoursDifference).slice(-2) + ":" : ""}${("0" + minutesDifference).slice(
|
||||||
|
-2,
|
||||||
|
)}:${("0" + secondsDifference).slice(-2)}`;
|
||||||
|
};
|
||||||
|
|
||||||
|
async function renderCard(body: LanyardTypes.Root, params: Parameters): Promise<string> {
|
||||||
|
let { data } = body;
|
||||||
|
|
||||||
|
let avatarBorderColor: string = "#747F8D",
|
||||||
|
avatarExtension: string = "webp",
|
||||||
|
statusExtension: string = "webp",
|
||||||
|
activity: any = false,
|
||||||
|
backgroundColor: string = "1a1c1f",
|
||||||
|
theme = "dark",
|
||||||
|
borderRadius = "10px",
|
||||||
|
idleMessage = "I'm not currently doing anything!";
|
||||||
|
|
||||||
|
let hideStatus = parseBool(params.hideStatus);
|
||||||
|
let hideTimestamp = parseBool(params.hideTimestamp);
|
||||||
|
let hideBadges = parseBool(params.hideBadges);
|
||||||
|
let hideProfile = parseBool(params.hideProfile);
|
||||||
|
let hideActivity = params.hideActivity ?? "false";
|
||||||
|
let hideSpotify = parseBool(params.hideSpotify);
|
||||||
|
let hideClan = parseBool(params.hideClan);
|
||||||
|
let hideDecoration = parseBool(params.hideDecoration);
|
||||||
|
let ignoreAppId = parseAppId(params.ignoreAppId);
|
||||||
|
let hideDiscrim = parseBool(params.hideDiscrim);
|
||||||
|
let showDisplayName = parseBool(params.showDisplayName);
|
||||||
|
|
||||||
|
if (!data.discord_user.avatar_decoration_data) hideDecoration = true;
|
||||||
|
if (parseBool(params.hideDiscrim) || body.data.discord_user.discriminator === "0") hideDiscrim = true;
|
||||||
|
if (!body.data.discord_user.clan) hideClan = true;
|
||||||
|
if (data.activities[0]?.emoji?.animated) statusExtension = "gif";
|
||||||
|
if (data.discord_user.avatar && data.discord_user.avatar.startsWith("a_")) avatarExtension = "gif";
|
||||||
|
if (params.animated === "false") avatarExtension = "webp";
|
||||||
|
if (params.theme === "light") {
|
||||||
|
backgroundColor = "eee";
|
||||||
|
theme = "light";
|
||||||
|
}
|
||||||
|
if (params.bg) backgroundColor = params.bg;
|
||||||
|
let clanBackgroundColor: string = theme === "light" ? "#e0dede" : "#111214";
|
||||||
|
if (params.clanbg) clanBackgroundColor = params.clanbg;
|
||||||
|
if (params.idleMessage) idleMessage = params.idleMessage;
|
||||||
|
if (params.borderRadius) borderRadius = params.borderRadius;
|
||||||
|
|
||||||
|
let avatar: string;
|
||||||
|
if (data.discord_user.avatar) {
|
||||||
|
avatar = await encodeBase64(
|
||||||
|
`https://cdn.discordapp.com/avatars/${data.discord_user.id}/${
|
||||||
|
data.discord_user.avatar
|
||||||
|
}.${avatarExtension}?size=${avatarExtension === "gif" ? "64" : "256"}`,
|
||||||
|
);
|
||||||
|
} else {
|
||||||
|
avatar = await encodeBase64(
|
||||||
|
`https://cdn.discordapp.com/embed/avatars/${
|
||||||
|
data.discord_user.discriminator === "0"
|
||||||
|
? Number(BigInt(data.discord_user.id) >> BigInt(22)) % 6
|
||||||
|
: Number(data.discord_user.discriminator) % 5
|
||||||
|
}.png`,
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
let clanBadge: string;
|
||||||
|
if (data.discord_user.clan) {
|
||||||
|
clanBadge = await encodeBase64(
|
||||||
|
`https://cdn.discordapp.com/clan-badges/${data.discord_user.clan.identity_guild_id}/${data.discord_user.clan.badge}.png?size=16`,
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
let avatarDecoration: string;
|
||||||
|
if (data.discord_user.avatar_decoration_data) {
|
||||||
|
avatarDecoration = await encodeBase64(
|
||||||
|
`https://cdn.discordapp.com/avatar-decoration-presets/${data.discord_user.avatar_decoration_data.asset}.png?size=64&passthrough=${params.animatedDecoration || "true"}`,
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
switch (data.discord_status) {
|
||||||
|
case "online":
|
||||||
|
avatarBorderColor = "#43B581";
|
||||||
|
break;
|
||||||
|
case "idle":
|
||||||
|
avatarBorderColor = "#FAA61A";
|
||||||
|
break;
|
||||||
|
case "dnd":
|
||||||
|
avatarBorderColor = "#F04747";
|
||||||
|
break;
|
||||||
|
case "offline":
|
||||||
|
avatarBorderColor = "#747F8D";
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
|
||||||
|
let flags: string[] = getFlags(data.discord_user.public_flags);
|
||||||
|
if (data.discord_user.avatar && data.discord_user.avatar.includes("a_")) flags.push("Nitro");
|
||||||
|
|
||||||
|
let userStatus: Record<string, any> | null = null;
|
||||||
|
if (data.activities[0] && data.activities[0].type === 4) userStatus = data.activities[0];
|
||||||
|
|
||||||
|
const activities = data.activities
|
||||||
|
// Filter only type 0
|
||||||
|
.filter(activity => activity.type === 0)
|
||||||
|
// Filter ignored app ID
|
||||||
|
.filter(activity => !ignoreAppId.includes(activity.application_id ?? ""));
|
||||||
|
|
||||||
|
// Take the highest one
|
||||||
|
activity = Array.isArray(activities) ? activities[0] : activities;
|
||||||
|
|
||||||
|
// Calculate height of parent SVG element
|
||||||
|
const svgHeight = (): string => {
|
||||||
|
if (hideProfile) return "130";
|
||||||
|
if (hideActivity === "true") return "91";
|
||||||
|
if (hideActivity === "whenNotUsed" && !activity && !data.listening_to_spotify) return "91";
|
||||||
|
if (hideSpotify && data.listening_to_spotify) return "210";
|
||||||
|
return "210";
|
||||||
|
};
|
||||||
|
|
||||||
|
// Calculate height of main div element
|
||||||
|
const divHeight = (): string => {
|
||||||
|
if (hideProfile) return "120";
|
||||||
|
if (hideActivity === "true") return "81";
|
||||||
|
if (hideActivity === "whenNotUsed" && !activity && !data.listening_to_spotify) return "81";
|
||||||
|
if (hideSpotify && data.listening_to_spotify) return "200";
|
||||||
|
return "200";
|
||||||
|
};
|
||||||
|
|
||||||
|
const ForeignDiv = (props: DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> & { xmlns: string }) => (
|
||||||
|
<div {...props}>{props.children}</div>
|
||||||
|
);
|
||||||
|
|
||||||
|
const renderedSVG = (
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="410px" height={svgHeight()}>
|
||||||
|
<defs>
|
||||||
|
<style>
|
||||||
|
{`.hover-opacity:hover {
|
||||||
|
opacity: 0.25;
|
||||||
|
}
|
||||||
|
|
||||||
|
.transition {
|
||||||
|
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
|
||||||
|
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
|
transition-duration: 200ms;
|
||||||
|
}`}
|
||||||
|
</style>
|
||||||
|
</defs>
|
||||||
|
<foreignObject x="0" y="0" width="410" height={svgHeight()}>
|
||||||
|
<ForeignDiv
|
||||||
|
xmlns="http://www.w3.org/1999/xhtml"
|
||||||
|
style={{
|
||||||
|
position: "absolute",
|
||||||
|
width: "400px",
|
||||||
|
height: `${divHeight()}px`,
|
||||||
|
inset: 0,
|
||||||
|
backgroundColor: `#${backgroundColor}`,
|
||||||
|
color: theme === "dark" ? "#fff" : "#000",
|
||||||
|
fontFamily: `'Century Gothic', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif`,
|
||||||
|
fontSize: "16px",
|
||||||
|
display: "flex",
|
||||||
|
flexDirection: "column",
|
||||||
|
padding: "5px",
|
||||||
|
borderRadius: borderRadius,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{!hideProfile ? (
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
width: "400px",
|
||||||
|
height: "100px",
|
||||||
|
inset: 0,
|
||||||
|
display: "flex",
|
||||||
|
flexDirection: "row",
|
||||||
|
paddingBottom: "5px",
|
||||||
|
borderBottom:
|
||||||
|
hideActivity !== "false" && !activity && !data.listening_to_spotify
|
||||||
|
? ""
|
||||||
|
: `solid 0.5px ${theme === "dark" ? "hsl(0, 0%, 100%, 10%)" : "hsl(0, 0%, 0%, 10%)"}`,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
display: "flex",
|
||||||
|
position: "relative",
|
||||||
|
flexDirection: "row",
|
||||||
|
height: "80px",
|
||||||
|
width: "80px",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<img
|
||||||
|
src={`data:image/png;base64,${avatar}`}
|
||||||
|
alt="User Avatar"
|
||||||
|
style={{
|
||||||
|
borderRadius: "50%",
|
||||||
|
width: "50px",
|
||||||
|
height: "50px",
|
||||||
|
position: "relative",
|
||||||
|
top: "50%",
|
||||||
|
left: "50%",
|
||||||
|
transform: "translate(-50%, -50%)",
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
|
||||||
|
{hideDecoration || !data.discord_user.avatar_decoration_data ? null : (
|
||||||
|
<>
|
||||||
|
<img
|
||||||
|
src={`data:image/png;base64,${avatarDecoration!}`}
|
||||||
|
alt="Avatar Decoration"
|
||||||
|
style={{
|
||||||
|
display: "block",
|
||||||
|
width: "64px",
|
||||||
|
height: "64px",
|
||||||
|
position: "absolute",
|
||||||
|
top: " 50%",
|
||||||
|
left: "50%",
|
||||||
|
transform: "translate(-50%, -50%)",
|
||||||
|
}}
|
||||||
|
className="hover-opacity transition"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<span
|
||||||
|
style={{
|
||||||
|
position: "absolute",
|
||||||
|
bottom: "14px",
|
||||||
|
right: "14px",
|
||||||
|
height: "13px",
|
||||||
|
width: "13px",
|
||||||
|
backgroundColor: avatarBorderColor,
|
||||||
|
borderRadius: "50%",
|
||||||
|
border: `3px solid #${backgroundColor}`,
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
height: "80px",
|
||||||
|
width: "260px",
|
||||||
|
display: "flex",
|
||||||
|
flexDirection: "column",
|
||||||
|
justifyContent: "center",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
display: "flex",
|
||||||
|
flexDirection: "row",
|
||||||
|
height: "25px",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<h1
|
||||||
|
style={{
|
||||||
|
fontSize: "1.15rem",
|
||||||
|
margin: "0 12px 0 0",
|
||||||
|
whiteSpace: "nowrap",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{showDisplayName && data.discord_user.global_name
|
||||||
|
? data.discord_user.global_name
|
||||||
|
: data.discord_user.username}
|
||||||
|
|
||||||
|
{!hideDiscrim && !showDisplayName ? (
|
||||||
|
<span style={{ color: theme === "dark" ? "#ccc" : "#666", fontWeight: "lighter" }}>
|
||||||
|
#{data.discord_user.discriminator}
|
||||||
|
</span>
|
||||||
|
) : null}
|
||||||
|
</h1>
|
||||||
|
|
||||||
|
{hideClan || (!data.discord_user.clan?.tag && !data.discord_user.clan?.badge) ? null : (
|
||||||
|
<span
|
||||||
|
style={{
|
||||||
|
backgroundColor: clanBackgroundColor,
|
||||||
|
borderRadius: " 0.375rem",
|
||||||
|
paddingLeft: "0.5rem",
|
||||||
|
paddingRight: "0.5rem",
|
||||||
|
marginLeft: "-6px",
|
||||||
|
marginRight: "12px",
|
||||||
|
display: "flex",
|
||||||
|
alignItems: "center",
|
||||||
|
gap: "0.25rem",
|
||||||
|
fontSize: "16px",
|
||||||
|
fontWeight: "500",
|
||||||
|
fontFamily: `-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif`,
|
||||||
|
height: "100%",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<img src={`data:image/png;base64,${clanBadge!}`} alt="Clan Badge" />
|
||||||
|
<p style={{ marginBottom: "1.1rem" }}>{data.discord_user.clan!.tag}</p>
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{!!hideBadges
|
||||||
|
? null
|
||||||
|
: flags.map(v => (
|
||||||
|
<img
|
||||||
|
key={v}
|
||||||
|
alt={v}
|
||||||
|
src={`data:image/png;base64,${Badges[v]}`}
|
||||||
|
style={{
|
||||||
|
width: "auto",
|
||||||
|
height: "20px",
|
||||||
|
position: "relative",
|
||||||
|
top: "50%",
|
||||||
|
transform: "translate(0%, -50%)",
|
||||||
|
marginRight: "7px",
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{showDisplayName ? (
|
||||||
|
<h2
|
||||||
|
style={{
|
||||||
|
fontSize: "0.95rem",
|
||||||
|
margin: 0,
|
||||||
|
whiteSpace: "nowrap",
|
||||||
|
fontWeight: "400",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{data.discord_user.username}
|
||||||
|
</h2>
|
||||||
|
) : null}
|
||||||
|
{userStatus && !hideStatus ? (
|
||||||
|
<p
|
||||||
|
style={{
|
||||||
|
fontSize: "0.9rem",
|
||||||
|
margin: 0,
|
||||||
|
color: theme === "dark" ? "#aaa" : "#333",
|
||||||
|
fontWeight: 400,
|
||||||
|
overflow: "hidden",
|
||||||
|
whiteSpace: "nowrap",
|
||||||
|
textOverflow: "ellipsis",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{userStatus.emoji?.id ? (
|
||||||
|
<img
|
||||||
|
src={`data:image/png;base64,${await encodeBase64(
|
||||||
|
`https://cdn.discordapp.com/emojis/${userStatus.emoji.id}.${statusExtension}`,
|
||||||
|
)}`}
|
||||||
|
alt="User Status Emoji"
|
||||||
|
style={{
|
||||||
|
width: "15px",
|
||||||
|
height: "15px",
|
||||||
|
position: "relative",
|
||||||
|
top: "10px",
|
||||||
|
transform: "translate(0%, -50%)",
|
||||||
|
margin: "0 2px 0 0",
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
) : null}
|
||||||
|
|
||||||
|
{userStatus.state && userStatus.emoji?.name && !userStatus.emoji.id
|
||||||
|
? `${userStatus.emoji.name} ${userStatus.state}`
|
||||||
|
: userStatus.state
|
||||||
|
? userStatus.state
|
||||||
|
: !userStatus.state && userStatus.emoji?.name && !userStatus.emoji.id
|
||||||
|
? userStatus.emoji.name
|
||||||
|
: null}
|
||||||
|
</p>
|
||||||
|
) : null}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
) : null}
|
||||||
|
|
||||||
|
{activity ? (
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
display: "flex",
|
||||||
|
flexDirection: "row",
|
||||||
|
height: "120px",
|
||||||
|
marginLeft: "15px",
|
||||||
|
fontSize: "0.75rem",
|
||||||
|
paddingTop: "18px",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
marginRight: "15px",
|
||||||
|
width: "auto",
|
||||||
|
height: "auto",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{activity.assets?.large_image ? (
|
||||||
|
<img
|
||||||
|
src={`data:image/png;base64,${await encodeBase64(
|
||||||
|
activity.assets.large_image.startsWith("mp:external/")
|
||||||
|
? `https://media.discordapp.net/external/${activity.assets.large_image.replace("mp:external/", "")}`
|
||||||
|
: `https://cdn.discordapp.com/app-assets/${activity.application_id}/${activity.assets.large_image}.webp`,
|
||||||
|
)}`}
|
||||||
|
alt="Activity Large Image"
|
||||||
|
style={{
|
||||||
|
width: "80px",
|
||||||
|
height: "80px",
|
||||||
|
border: "solid 0.5px #222",
|
||||||
|
borderRadius: "10px",
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<img
|
||||||
|
src={`data:image/png;base64,${await encodeBase64(
|
||||||
|
`https://lanyard-profile-readme.vercel.app/assets/unknown.png`,
|
||||||
|
)}`}
|
||||||
|
alt="Unknown Icon"
|
||||||
|
style={{
|
||||||
|
width: "70px",
|
||||||
|
height: "70px",
|
||||||
|
marginTop: "4px",
|
||||||
|
filter: "invert(100)",
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{activity.assets?.small_image ? (
|
||||||
|
<img
|
||||||
|
src={`data:image/png;base64,${await encodeBase64(
|
||||||
|
activity.assets.small_image.startsWith("mp:external/")
|
||||||
|
? `https://media.discordapp.net/external/${activity.assets.small_image.replace("mp:external/", "")}`
|
||||||
|
: `https://cdn.discordapp.com/app-assets/${activity.application_id}/${activity.assets.small_image}.webp`,
|
||||||
|
)}`}
|
||||||
|
alt="Activity Small Image"
|
||||||
|
style={{
|
||||||
|
width: "30px",
|
||||||
|
height: "30px",
|
||||||
|
borderRadius: "50%",
|
||||||
|
marginLeft: "-26px",
|
||||||
|
marginBottom: "-8px",
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
) : null}
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
color: "#999",
|
||||||
|
marginTop: activity.timestamps?.start && !hideTimestamp ? "-6px" : "5px",
|
||||||
|
lineHeight: "1",
|
||||||
|
width: "279px",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<p
|
||||||
|
style={{
|
||||||
|
color: theme === "dark" ? "#fff" : "#000",
|
||||||
|
fontSize: "0.85rem",
|
||||||
|
fontWeight: "bold",
|
||||||
|
overflow: "hidden",
|
||||||
|
whiteSpace: "nowrap",
|
||||||
|
textOverflow: "ellipsis",
|
||||||
|
height: "15px",
|
||||||
|
margin: "7px 0",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{activity.name}
|
||||||
|
</p>
|
||||||
|
{activity.details ? (
|
||||||
|
<p
|
||||||
|
style={{
|
||||||
|
color: theme === "dark" ? "#ccc" : "#777",
|
||||||
|
overflow: "hidden",
|
||||||
|
whiteSpace: "nowrap",
|
||||||
|
fontSize: "0.85rem",
|
||||||
|
textOverflow: "ellipsis",
|
||||||
|
height: "15px",
|
||||||
|
margin: "7px 0",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{activity.details}
|
||||||
|
</p>
|
||||||
|
) : null}
|
||||||
|
{activity.state ? (
|
||||||
|
<p
|
||||||
|
style={{
|
||||||
|
color: theme === "dark" ? "#ccc" : "#777",
|
||||||
|
overflow: "hidden",
|
||||||
|
whiteSpace: "nowrap",
|
||||||
|
fontSize: "0.85rem",
|
||||||
|
textOverflow: "ellipsis",
|
||||||
|
height: "15px",
|
||||||
|
margin: "7px 0",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{activity.state}
|
||||||
|
{activity.party?.size ? ` (${activity.party.size[0]} of ${activity.party.size[1]})` : null}
|
||||||
|
</p>
|
||||||
|
) : null}
|
||||||
|
{activity.timestamps?.start && !hideTimestamp ? (
|
||||||
|
<p
|
||||||
|
style={{
|
||||||
|
color: theme === "dark" ? "#ccc" : "#777",
|
||||||
|
overflow: "hidden",
|
||||||
|
whiteSpace: "nowrap",
|
||||||
|
fontSize: "0.85rem",
|
||||||
|
textOverflow: "ellipsis",
|
||||||
|
height: "15px",
|
||||||
|
margin: "7px 0",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{elapsedTime(new Date(activity.timestamps.start).getTime())} elapsed
|
||||||
|
</p>
|
||||||
|
) : null}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
) : null}
|
||||||
|
{data.listening_to_spotify &&
|
||||||
|
!activity &&
|
||||||
|
!hideSpotify &&
|
||||||
|
data.activities[Object.keys(data.activities).length - 1].type === 2 ? (
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
display: "flex",
|
||||||
|
flexDirection: "row",
|
||||||
|
height: "120px",
|
||||||
|
marginLeft: "15px",
|
||||||
|
fontSize: "0.8rem",
|
||||||
|
paddingTop: "18px",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<img
|
||||||
|
src={await (async () => {
|
||||||
|
const album = await encodeBase64(data.spotify.album_art_url);
|
||||||
|
if (album) return `data:image/png;base64,${album}`;
|
||||||
|
return "https://lanyard-profile-readme.vercel.app/assets/unknown.png";
|
||||||
|
})()}
|
||||||
|
alt="Album Cover"
|
||||||
|
style={{
|
||||||
|
border: data.spotify.album_art_url ? "border: solid 0.5px #222" : undefined,
|
||||||
|
filter: !data.spotify.album_art_url ? "invert(100)" : undefined,
|
||||||
|
width: "80px",
|
||||||
|
height: "80px",
|
||||||
|
borderRadius: "10px",
|
||||||
|
marginRight: "15px",
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
color: "#999",
|
||||||
|
marginTop: "-3px",
|
||||||
|
lineHeight: "1",
|
||||||
|
width: "279px",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<p
|
||||||
|
style={{
|
||||||
|
fontSize: "0.75rem",
|
||||||
|
fontWeight: "bold",
|
||||||
|
color: theme === "dark" ? "#1CB853" : "#0d943d",
|
||||||
|
marginBottom: "15px",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
LISTENING TO SPOTIFY...
|
||||||
|
</p>
|
||||||
|
<p
|
||||||
|
style={{
|
||||||
|
height: "15px",
|
||||||
|
color: theme === "dark" ? "#fff" : "#000",
|
||||||
|
fontWeight: "bold",
|
||||||
|
fontSize: "0.85rem",
|
||||||
|
overflow: "hidden",
|
||||||
|
whiteSpace: "nowrap",
|
||||||
|
textOverflow: "ellipsis",
|
||||||
|
margin: "7px 0",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{data.spotify.song}
|
||||||
|
</p>
|
||||||
|
<p
|
||||||
|
style={{
|
||||||
|
margin: "7px 0",
|
||||||
|
height: "15px",
|
||||||
|
overflow: "hidden",
|
||||||
|
whiteSpace: "nowrap",
|
||||||
|
fontSize: "0.85rem",
|
||||||
|
textOverflow: "ellipsis",
|
||||||
|
color: theme === "dark" ? "#ccc" : "#777",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
By {data.spotify.artist}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
) : null}
|
||||||
|
{!activity && (!data.listening_to_spotify || hideSpotify) && hideActivity === "false" ? (
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
display: "flex",
|
||||||
|
flexDirection: "row",
|
||||||
|
height: "150px",
|
||||||
|
justifyContent: "center",
|
||||||
|
alignItems: "center",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<p
|
||||||
|
style={{
|
||||||
|
fontStyle: "italic",
|
||||||
|
fontSize: "0.8rem",
|
||||||
|
color: theme === "dark" ? "#aaa" : "#444",
|
||||||
|
height: "auto",
|
||||||
|
textAlign: "center",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{idleMessage}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
) : null}
|
||||||
|
</ForeignDiv>
|
||||||
|
</foreignObject>
|
||||||
|
</svg>
|
||||||
|
);
|
||||||
|
|
||||||
|
return renderToStaticMarkup(renderedSVG);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default renderCard;
|
||||||
@@ -4,6 +4,8 @@ const EPOCH = 1420070400000; // Discord's EPOCH
|
|||||||
export function isSnowflake(snowflake: number | string): boolean {
|
export function isSnowflake(snowflake: number | string): boolean {
|
||||||
snowflake = Number(snowflake);
|
snowflake = Number(snowflake);
|
||||||
return (
|
return (
|
||||||
Number.isInteger(+snowflake) && snowflake > 4194304 && !isNaN(new Date(snowflake / 4194304 + EPOCH).getTime())
|
Number.isInteger(+snowflake) &&
|
||||||
|
snowflake > 4194304 &&
|
||||||
|
!isNaN(new Date(snowflake / 4194304 + EPOCH).getTime())
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
18
src/utils/toBase64.ts
Normal file
18
src/utils/toBase64.ts
Normal file
@@ -0,0 +1,18 @@
|
|||||||
|
export const encodeBase64 = async (url: string): Promise<string> => {
|
||||||
|
let response = "";
|
||||||
|
|
||||||
|
try {
|
||||||
|
response = await fetch(url, {
|
||||||
|
cache: "no-store",
|
||||||
|
})
|
||||||
|
.then((res) => res.blob())
|
||||||
|
.then(async (blob) => {
|
||||||
|
const buffer = Buffer.from(await blob.arrayBuffer());
|
||||||
|
return buffer.toString("base64");
|
||||||
|
});
|
||||||
|
} catch (e) {
|
||||||
|
console.log(e);
|
||||||
|
}
|
||||||
|
|
||||||
|
return response;
|
||||||
|
};
|
||||||
20
tailwind.config.ts
Normal file
20
tailwind.config.ts
Normal file
@@ -0,0 +1,20 @@
|
|||||||
|
import type { Config } from "tailwindcss";
|
||||||
|
|
||||||
|
const config: Config = {
|
||||||
|
darkMode: ["class"],
|
||||||
|
content: [
|
||||||
|
"./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
|
||||||
|
"./src/components/**/*.{js,ts,jsx,tsx,mdx}",
|
||||||
|
"./src/app/**/*.{js,ts,jsx,tsx,mdx}",
|
||||||
|
],
|
||||||
|
theme: {
|
||||||
|
extend: {
|
||||||
|
colors: {
|
||||||
|
background: "var(--background)",
|
||||||
|
foreground: "var(--foreground)",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
plugins: [require("tailwindcss-animate")],
|
||||||
|
};
|
||||||
|
export default config;
|
||||||
@@ -1,6 +1,5 @@
|
|||||||
{
|
{
|
||||||
"compilerOptions": {
|
"compilerOptions": {
|
||||||
"target": "es5",
|
|
||||||
"lib": [
|
"lib": [
|
||||||
"dom",
|
"dom",
|
||||||
"dom.iterable",
|
"dom.iterable",
|
||||||
@@ -9,20 +8,34 @@
|
|||||||
"allowJs": true,
|
"allowJs": true,
|
||||||
"skipLibCheck": true,
|
"skipLibCheck": true,
|
||||||
"strict": true,
|
"strict": true,
|
||||||
"forceConsistentCasingInFileNames": true,
|
|
||||||
"noEmit": true,
|
"noEmit": true,
|
||||||
"esModuleInterop": true,
|
"esModuleInterop": true,
|
||||||
"module": "esnext",
|
"module": "esnext",
|
||||||
"moduleResolution": "node",
|
"moduleResolution": "bundler",
|
||||||
"resolveJsonModule": true,
|
"resolveJsonModule": true,
|
||||||
"isolatedModules": true,
|
"isolatedModules": true,
|
||||||
"jsx": "preserve"
|
"jsx": "preserve",
|
||||||
|
"incremental": true,
|
||||||
|
"plugins": [
|
||||||
|
{
|
||||||
|
"name": "next"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"paths": {
|
||||||
|
"@/*": [
|
||||||
|
"./src/*"
|
||||||
|
],
|
||||||
|
"#/*": [
|
||||||
|
"./*"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"target": "ES2017"
|
||||||
},
|
},
|
||||||
"include": [
|
"include": [
|
||||||
"next-env.d.ts",
|
"next-env.d.ts",
|
||||||
"**/*.ts",
|
"**/*.ts",
|
||||||
"**/*.tsx",
|
"**/*.tsx",
|
||||||
"pages/_document.tsx"
|
".next/types/**/*.ts"
|
||||||
],
|
],
|
||||||
"exclude": [
|
"exclude": [
|
||||||
"node_modules"
|
"node_modules"
|
||||||
|
|||||||
Reference in New Issue
Block a user