Basically works :D

2023-12-18 19:01:53 +00:00 · 2023-12-18 19:01:53 +00:00 · e574f3b4b5
commit e574f3b4b5
parent 8568dbcc2d
8 changed files with 1462 additions and 0 deletions
--- a/index.js
+++ b/index.js
@ -0,0 +1,108 @@
+const express = require("express"),
+path = require("path"),
+fs = require("fs"),
+fetch = require("node-fetch")
+
+var app = express()
+
+var statuses = {
+    "online": {
+        "text": "Online",
+        "color": "rgb(100, 255, 100)"
+    },
+    "dnd": {
+        "text": "DND",
+        "color": "rgb(255, 100, 100)"
+    },
+    "idle": {
+        "text": "Idle",
+        "color": "rgb(255, 255, 75)"
+    },
+    "offline": {
+        "text": "Offline",
+        "color": "rgb(125, 125, 125)"
+    }
+}
+
+const PORT = process.env.PORT || 8080
+
+app.use(express.static(path.join(__dirname, 'static')))
+
+app.listen(PORT, () => {
+    console.log("Now listening on PORT: " + PORT)
+})
+
+app.get('/embedCard', async (req, res) => {
+    var discID = req.query.discordid
+
+    res.header("Content-Type", "text/html")
+    var html = fs.readFileSync(path.join(__dirname, 'resources/embedCard.html')).toString()
+
+    var result = (await fetch(`https://api.lanyard.rest/v1/users/${discID}`).then(response => response.json())).data
+
+    var user = result.discord_user
+
+    var replacers = {
+        "DISPLAY_NAME": user.display_name || user.global_name,
+        "USERNAME": user.username,
+        "DISCORD_ID": user.id,
+        "STATUS": statuses[result.discord_status].text,
+        "STATUS_COLOR": statuses[result.discord_status].color,
+        "CUSTOM_STATUS": ""
+    }
+
+    if (result && result.activities.length > 0) {
+        if (result.activities[0].type == 4) {
+            replacers.CUSTOM_STATUS = `Custom Status: "${result.activities[0].state}"`
+        }
+    }
+
+    if (user.discriminator != 0) {
+        replacers.USERNAME += user.discriminator
+    }
+
+    for (let index = 0; index < Object.keys(replacers).length; index++) {
+        const key = Object.keys(replacers)[index]
+        const val = replacers[key];
+
+        while (html.includes("{" + key + "}")) {
+            html = html.replace("{" + key + "}", val)
+        }
+    }
+
+    res.send(html)
+})
+
+app.get('/getUser', async (req, res) => {
+    var discID = req.query.discordid
+
+    res.header("Content-Type", "text/html")
+    var html = fs.readFileSync(path.join(__dirname, 'resources/userPage.html')).toString()
+
+    var result = (await fetch(`https://api.lanyard.rest/v1/users/${discID}`).then(response => response.json())).data
+
+    var user = result.discord_user
+
+    var replacers = {
+        "DISPLAY_NAME": user.display_name || user.global_name,
+        "USERNAME": user.username,
+        "DISCORD_ID": user.id,
+        "STATUS": user.discord_status,
+        "BASE_LINK": "https://code-server-production-d69b.up.railway.app/proxy/8080/"
+    }
+
+    if (user.discriminator != 0) {
+        replacers.USERNAME += "#" + user.discriminator
+    }
+
+    for (let index = 0; index < Object.keys(replacers).length; index++) {
+        const key = Object.keys(replacers)[index]
+        const val = replacers[key];
+
+        while (html.includes("{" + key + "}")) {
+            html = html.replace("{" + key + "}", val)
+        }
+    }
+
+    res.send(html)
+})
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -0,0 +1,25 @@
+{
+  "name": "discordembedder",
+  "version": "1.0.0",
+  "description": "Wanna show off your cool profile to your friends? Insert your profile, and get a simple card you can embed on your site! Theme it how you want, embed it how you want, its up to you!",
+  "main": "index.js",
+  "scripts": {
+    "start": "node index.js"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://codeberg.org/Bingus_Violet/DiscordEmbedder"
+  },
+  "keywords": [
+    "discord",
+    "lanyard",
+    "embed",
+    "web"
+  ],
+  "author": "Violet",
+  "license": "LGPL-3.0-or-later",
+  "dependencies": {
+    "express": "^4.18.2",
+    "node-fetch": "^2.7.0"
+  }
+}
--- a/resources/embedCard.html
+++ b/resources/embedCard.html
@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+    <link rel="stylesheet" href="./embedStyle.css">
+
+    <title>{DISPLAY_NAME}</title>
+</head>
+
+<body>
+    <div id="card">
+        <h1>{DISPLAY_NAME}</h1>
+        <div style="display: flex; justify-content: center; align-items: center;">
+            <img style="border-color: {STATUS_COLOR}" src="https://api.lanyard.rest/534132311781015564.png" class="pfp">
+            <div>
+                <p>
+                    Status: <span style="color: {STATUS_COLOR}">{STATUS}</span><br>
+                    Username: {USERNAME}<br>
+                    {CUSTOM_STATUS}
+                </p>
+            </div>
+        </div>
+    </div>
+</body>
+
+</html>
--- a/resources/userPage.html
+++ b/resources/userPage.html
@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+    <link rel="stylesheet" href="./style.css">
+
+    <title>User - {DISPLAY_NAME}</title>
+</head>
+<body>
+    <h1>{DISPLAY_NAME}</h1>
+    <p style="color: gray">{USERNAME}</p>
+    <iframe style="width: 90%; max-width: 750px; height: 300px; overflow: visible;" src="./embedCard?discordid={DISCORD_ID}"></iframe>
+    <p>Code to embed:<br> <span style="font-family: Roboto;">&lt;iframe style="width: 90%; max-width: 750px; height: 300px;" src="{BASE_LINK}embedCard?discordid={DISCORD_ID}"&gt;&lt;/iframe&gt;</p></span>
+</body>
+</html>
--- a/static/embedStyle.css
+++ b/static/embedStyle.css
@ -0,0 +1,41 @@
+@import url("https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css");
+@import url('https://fonts.googleapis.com/css2?family=Rubik&family=Source+Code+Pro&display=swap');
+
+body, input {
+    font-family: 'Rubik', Verdana, Geneva, Tahoma, sans-serif;
+    text-align: center;
+    color: white;
+    background: transparent;
+}
+
+body {
+    max-width: 750px;
+    max-height: 400px;
+}
+
+#card {
+    background-color: rgb(40, 35, 45);
+    background: linear-gradient(45deg, rgb(30, 25, 35), rgb(50, 45, 55));
+    padding: 15px;
+    border: 2px darkgray solid;
+    border-radius: 15px;
+    max-width: 750px;
+    margin: auto;
+}
+
+.pfp {
+    border-radius: 15px;
+    border: darkgray 4px solid;
+    width: 60%;
+    transform: scale(0.9);
+    border-radius: 50%;
+    max-width: 135px;
+    margin: 15px;
+    transition: all 1.5s cubic-bezier(0.075, 0.82, 0.165, 1);
+}
+
+.pfp:hover {
+    transform: scale(1);
+    border-color: rgb(255, 200, 255);
+    object-fit: cover;
+}
--- a/static/index.html
+++ b/static/index.html
@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+    <link rel="stylesheet" href="./style.css">
+
+    <title>Discord Embedder</title>
+</head>
+<body>
+    <h1>Discord Embedder</h1>
+    <form action="./getUser">
+        <input type="text" name="discordid" placeholder="Your Discord ID">
+    </form>
+
+    <p>You can get your Discord ID by:</p>
+    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aspernatur odio dolores reiciendis recusandae ad explicabo repellendus possimus dignissimos quam quo necessitatibus error excepturi cumque sapiente quos, autem obcaecati quidem enim.</p>
+</body>
+</html>
--- a/static/style.css
+++ b/static/style.css
@ -0,0 +1,26 @@
+@import url("https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css");
+@import url('https://fonts.googleapis.com/css2?family=Rubik&display=swap');
+
+body {
+    background-color: rgb(40, 30, 60);
+    padding: 2.5%;
+}
+
+body, input {
+    font-family: 'Rubik', Verdana, Geneva, Tahoma, sans-serif;
+    text-align: center;
+    color: white;
+}
+
+input[type="text"] {
+    font-size: 1.5rem;
+    margin: 15vh auto;
+    padding: 15px;
+    width: 90%;
+    max-width: 500px;
+}
+
+input {
+    background-color: black;
+    border: 2px gray solid;
+}