From 6b9fbc0316250a91ccfa0dccdd0f721f49d32a13 Mon Sep 17 00:00:00 2001
From: Nikurasu <publicmail@nikurasu.gay>
Date: Sun, 14 May 2023 11:39:53 +0200
Subject: [PATCH] Add preview cards (#2)

Added preview cards for Twitter, Mastodon, Discord, etc.

Co-authored-by: nikurasu <publicmail@nikurasu.gay>
Reviewed-on: https://dev.cat-enby.club/Nikurasu/socialtree/pulls/2
---
 .prettierrc.toml                           |  1 +
 assets/config/config.yml.example           |  2 +
 dev/docker/stacks/dev/docker-entrypoint.sh |  1 +
 src/index.js                               | 62 +++++++++++++---------
 src/views/partials/head.ejs                | 11 ++++
 5 files changed, 52 insertions(+), 25 deletions(-)
 create mode 100644 .prettierrc.toml

diff --git a/.prettierrc.toml b/.prettierrc.toml
new file mode 100644
index 0000000..0e18e31
--- /dev/null
+++ b/.prettierrc.toml
@@ -0,0 +1 @@
+tabWidth = 4
\ No newline at end of file
diff --git a/assets/config/config.yml.example b/assets/config/config.yml.example
index 8b64954..507d93a 100644
--- a/assets/config/config.yml.example
+++ b/assets/config/config.yml.example
@@ -1,6 +1,8 @@
 name: "Nikurasu"                                # The name on the linktree
 # summaryText: 'A simple sample text'           # A short summary for what you do, will appear if uncommened
 # profilePic:                                   # uncomment and set this if your profile pic has a custom name
+url: "https://links.nikurasu.gay"               # URL of your SocialTree
+siteName: 'NikuHost'                            # Name of the site visible in embeds, used for Link previews
 roundPB: false                                  # Set true if you want a round profile picture
 theme: '98'                                     # Your theme
 links:                                          # the links to your social accounts
diff --git a/dev/docker/stacks/dev/docker-entrypoint.sh b/dev/docker/stacks/dev/docker-entrypoint.sh
index 1e7532a..9e48d2a 100644
--- a/dev/docker/stacks/dev/docker-entrypoint.sh
+++ b/dev/docker/stacks/dev/docker-entrypoint.sh
@@ -1,3 +1,4 @@
 cd /app
 yarn
+yarn build
 yarn dev
\ No newline at end of file
diff --git a/src/index.js b/src/index.js
index aec9fa5..9c7feb7 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,36 +1,48 @@
-import express from 'express'
-import yaml from 'js-yaml'
-import fs from 'node:fs'
-import * as dotenv from 'dotenv'
+import express from "express";
+import yaml from "js-yaml";
+import fs from "node:fs";
+import * as dotenv from "dotenv";
 
-console.log('🔧 Configuring socialtree...')
+console.log("🔧 Configuring socialtree...");
 
-dotenv.config()
-const app = express()
-const port = process.env.PORT || 3000
-const engine = 'ejs'
+dotenv.config();
+const app = express();
+const port = process.env.PORT || 3000;
+const engine = "ejs";
 
-const customMainPartialThemes = [ // Array of themes that require a custom main partial
-    '98'
-]
+const customMainPartialThemes = [
+    // Array of themes that require a custom main partial
+    "98",
+];
 
-app.set('view engine', engine)
-app.set('views', './src/views')
-app.use(express.static('src/dist'))
-app.use(express.static('assets'))
+app.set("view engine", engine);
+app.set("views", "./src/views");
+app.use(express.static("src/dist"));
+app.use(express.static("assets"));
 
-app.get('/', (req, res) => {
-    let config = yaml.load(fs.readFileSync('assets/config/config.yml'), 'utf8')
-    res.render('index', {
+app.get("/", (req, res) => {
+    let config = yaml.load(fs.readFileSync("assets/config/config.yml"), "utf8");
+    res.render("index", {
         name: config.name,
-        filenameProfilePic: config.profilePic ? config.profilePic : 'profilepic.jpg',
-        summaryText: config.summaryText ? config.summaryText: '',
+        url: config.url,
+        filenameProfilePic: config.profilePic
+            ? config.profilePic
+            : "profilepic.jpg",
+        summaryText: config.summaryText ? config.summaryText : "",
         links: config.links,
         smallLinks: config.smallLinks,
         theme: config.theme,
         roundPB: config.roundPB,
-        customMainPartialThemes: customMainPartialThemes
-    })
-})
+        customMainPartialThemes: customMainPartialThemes,
+        metaDescription: config.summaryText
+            ? config.summaryText
+            : config.links.map((link) => link.text).join(" | "),
+        siteName: config.siteName ? config.siteName : "SocialTree",
+    });
+});
 
-app.listen(port, () => console.log(`🚀 Socialtree started on port ${port}, with view engine ${engine}`))
+app.listen(port, () =>
+    console.log(
+        `🚀 Socialtree started on port ${port}, with view engine ${engine}`
+    )
+);
diff --git a/src/views/partials/head.ejs b/src/views/partials/head.ejs
index bebef90..1a70fc7 100644
--- a/src/views/partials/head.ejs
+++ b/src/views/partials/head.ejs
@@ -10,4 +10,15 @@
     <% if(roundPB) { %>
         <link rel="stylesheet" href="style/round-pb.css">
     <% } %>
+    <title><%= name %> - SocialTree</title>
+    <meta property="og:title" content="<%= name %> - SocialTree">
+    <meta property="og:image" content="img/<%= filenameProfilePic %>">
+    <meta property="description" content="<%= metaDescription %>">
+    <meta property="og:description" content="<%= metaDescription %>">
+    <meta property="og:site_name" content="<%= siteName %>">
+    <meta property="og:url" content="<%= url %>">
+    <meta property="twitter:image:src" content="img/<%= filenameProfilePic %>">
+    <meta property="twitter:card" content="summary">
+    <meta property="twitter:title" content="<%= name %> - SocialTree">
+    <meta property="twitter:description" content="<%= metaDescription %>">
 </head>