Add preview cards (#2)

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

Co-authored-by: nikurasu <publicmail@nikurasu.gay>
Reviewed-on: #2

.prettierrc.toml

@@ -0,0 +1 @@
+tabWidth = 4

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

dev/docker/stacks/dev/docker-entrypoint.sh

@@ -1,3 +1,4 @@
 cd /app
 yarn
+yarn build
 yarn dev

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}`
+    )
+);

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>