Fix for preview images

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

.prettierrc.toml

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

README.md

@@ -17,6 +17,7 @@
 - [ ] more themes
 - [ ] more variations of the themes in version 1.0
 - [X] Dockerize
+- [ ] Redirection with Routes (your-domain.xyz/mastodon redirects to your mastodon account)
 
 ### TODO until 1.0:
 - [X] Import my themes from the old socialtree
@@ -29,7 +30,7 @@
 A up to date docker image is provided at my gitea, but you can also build it yourself.
 
 ### Build
-1. Clone the repository `git clone https://git.oishi-ra.men/Nikurasu/socialtree-js.git`
+1. Clone the repository `git clone https://dev.cat-enby.club/Nikurasu/socialtree.git`
 2. Copy .env.example to .env and edit it to your needs
 3. Build the image. For unix like systems I provide a bash script in `dev/shell/docker-prod.sh`. I hated the hassle to type the full command every time ;)
 
@@ -53,4 +54,4 @@ If you want a completely new layout that requires another layout in the HTML you
 3. Write your own layout. You can see the available variables and their names in `src/index.js`
 4. Do the Stuff needed for a SCSS only theme.
 
-To use your themes in Docker you have to rebuild the image.
+To use your themes in Docker you have to rebuild the image.

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/images/main/Dockerfile

@@ -2,9 +2,7 @@ FROM node:lts-alpine
 LABEL maintainer="nikurasu_tan publicmail@nikurasu.gay"
 WORKDIR /app
 COPY src/ ./src
-COPY package.json ./
+COPY package.json yarn.loc[k] .en[v] ./
-COPY yarn.lock ./
-COPY .env ./.env
 COPY assets /assets
 RUN mv /assets/config/config.yml.example /assets/config/config.yml
 COPY dev/shell/entrypoint.sh /entrypoint.sh

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

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

dev/docker/stacks/main/compose.yml

@@ -1,7 +1,7 @@
 version: '3'
 services:
   app:
-    image: git.oishi-ra.men/nikurasu/socialtree-js:latest
+    image: dev.cat-enby.club/nikurasu/socialtree:latest
     container_name: socialtree
     environment:
       PORT: 3000

dev/shell/docker-prod.sh

@@ -1,2 +1,2 @@
-docker build -t dev.cat-enby.club/nikurasu/socialtree-js:latest -f dev/docker/images/main/Dockerfile --no-cache .
+docker build -t dev.cat-enby.club/nikurasu/socialtree:latest -f dev/docker/images/main/Dockerfile --no-cache .
-docker build -t dev.cat-enby.club/nikurasu/socialtree-js:$1 -f dev/docker/images/main/Dockerfile .
+docker build -t dev.cat-enby.club/nikurasu/socialtree:$1 -f dev/docker/images/main/Dockerfile .

package.json

@@ -1,6 +1,6 @@
 {
   "name": "socialtree",
-  "version": "0.3.0",
+  "version": "1.0.0",
   "description": "The awesome and damn simple, selfhosted alternative to linktree",
   "main": "src/index.js",
   "author": "nikurasu",

src/index.js

@@ -1,36 +1,48 @@
-import express from 'express'
+import express from "express";
-import yaml from 'js-yaml'
+import yaml from "js-yaml";
-import fs from 'node:fs'
+import fs from "node:fs";
-import * as dotenv from 'dotenv'
+import * as dotenv from "dotenv";
 
-console.log('🔧 Configuring socialtree...')
+console.log("🔧 Configuring socialtree...");
 
-dotenv.config()
+dotenv.config();
-const app = express()
+const app = express();
-const port = process.env.PORT || 3000
+const port = process.env.PORT || 3000;
-const engine = 'ejs'
+const engine = "ejs";
 
-const customMainPartialThemes = [ // Array of themes that require a custom main partial
+const customMainPartialThemes = [
-    '98'
+    // Array of themes that require a custom main partial
-]
+    "98",
+];
 
-app.set('view engine', engine)
+app.set("view engine", engine);
-app.set('views', './src/views')
+app.set("views", "./src/views");
-app.use(express.static('src/dist'))
+app.use(express.static("src/dist"));
-app.use(express.static('assets'))
+app.use(express.static("assets"));
 
-app.get('/', (req, res) => {
+app.get("/", (req, res) => {
-    let config = yaml.load(fs.readFileSync('assets/config/config.yml'), 'utf8')
+    let config = yaml.load(fs.readFileSync("assets/config/config.yml"), "utf8");
-    res.render('index', {
+    res.render("index", {
         name: config.name,
-        filenameProfilePic: config.profilePic ? config.profilePic : 'profilepic.jpg',
+        url: config.url,
-        summaryText: config.summaryText ? config.summaryText: '',
+        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

@@ -1,13 +1,35 @@
 <!DOCTYPE html>
 <html>
-<head>
+    <head>
-    <meta name="viewport" content="width=device-width, initial-scale=1">
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fork-awesome@1.2.0/css/fork-awesome.min.css" integrity="sha256-XoaMnoYC5TH6/+ihMEnospgm0J1PM/nioxbOUdnM8HY=" crossorigin="anonymous">
+        <link
-    <link rel="stylesheet" href="style/<%= theme %>.css">
+            rel="stylesheet"
-    <% if(theme === '98') { %>
+            href="https://cdn.jsdelivr.net/npm/fork-awesome@1.2.0/css/fork-awesome.min.css"
-        <link rel="stylesheet" href="https://unpkg.com/98.css">
+            integrity="sha256-XoaMnoYC5TH6/+ihMEnospgm0J1PM/nioxbOUdnM8HY="
-    <% } %>
+            crossorigin="anonymous"
-    <% if(roundPB) { %>
+        />
-        <link rel="stylesheet" href="style/round-pb.css">
+        <link rel="stylesheet" href="style/<%= theme %>.css" />
-    <% } %>
+        <% if(theme === '98') { %>
-</head>
+        <link rel="stylesheet" href="https://unpkg.com/98.css" />
+        <% } %> <% 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="<%= url %>/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"
+            content="<%= url %>/img/<%= filenameProfilePic %>"
+        />
+        <meta property="twitter:card" content="summary" />
+        <meta property="twitter:title" content="<%= name %> - SocialTree" />
+        <meta property="twitter:description" content="<%= metaDescription %>" />
+    </head>
+</html>