add opengraph stuff

client/comment.js

@@ -7,7 +7,6 @@ let db = await initDb();
 let main = new Route([auth], async function (req, res, input) {
     let {route} = req.params;
     let {id} = req.query;
-    let { username } = input;
 
     let comments = await db.all('SELECT * FROM comment WHERE targetType = ? AND targetId = ? ORDER BY date DESC', [
         route,

client/e404.js

@@ -2,9 +2,8 @@ import Route from "../route.js";
 import auth from "../form/auth.js";
 
 let main = new Route([auth], async function (req, res, input) {
-    let { username } = input;
     return res.render('404', {
-        username
+        ...input
     });
 });
 

client/login.js

@@ -3,7 +3,6 @@ import auth from "../form/auth.js";
 
 // TODO: rewrite
 let main = new Route([auth], async function (req, res, input) {
-    let { username } = input;
     return res.render('form', {
         data: [
             { label: "Username", type: "text", name: "user" },
@@ -11,7 +10,7 @@ let main = new Route([auth], async function (req, res, input) {
         ],
         'route': '/api/form/login?redirect=' + req.query.redirect,
         'title': 'Login',
-        username
+        ...input
     });
 });
 

client/main.js

@@ -12,7 +12,7 @@ let main = new Route([auth], async function (req, res, input) {
         username
     ]);
     return res.render('main', {
-        username,
+        ...input,
         videos,
         videosFollow
     });

client/player.js

@@ -12,7 +12,8 @@ let main = new Route([comment], async function (req, res, input) {
     videoData = videoData[0];
     return res.render('player', {
         ...input,
-        videoData
+        videoData,
+        ogType: 'video'
     });
 });
 

client/settings.js

@@ -3,7 +3,6 @@ import auth from "../form/auth.js";
 
 // TODO: rewrite
 let main = new Route([auth], async function (req, res, input) {
-    let { username } = input;
     return res.render('form', {
         data: [
             { label: "Description", type: "textarea", name: "desc" },
@@ -11,7 +10,7 @@ let main = new Route([auth], async function (req, res, input) {
         ],
         'route': '/api/upload/settings',
         'title': 'User Settings',
-        username
+        ...input
     }); /* todo: form in not a file */
 });
 

client/tou.js

@@ -2,9 +2,8 @@ import Route from "../route.js";
 import auth from "../form/auth.js";
 
 let main = new Route([auth], async function (req, res, input) {
-    let { username } = input;
     return res.render('guidelines', {
-        username
+        ...input
     });
 });
 

client/upload.js

@@ -3,7 +3,6 @@ import auth from "../form/auth.js";
 
 // TODO: rewrite
 let main = new Route([auth], async function (req, res, input) {
-    let { username } = input;
     return res.render('form', {
         data: [
             { label: "Video file", type: "file", name: "file" },
@@ -12,7 +11,7 @@ let main = new Route([auth], async function (req, res, input) {
         ],
         'route': '/api/upload/upload',
         'title': 'Upload Content',
-        username
+        ...input
     });
 });
 

client/user.js

@@ -28,7 +28,8 @@ let main = new Route([comment], async function (req, res, input) {
         videos,
         followers,
         following,
-        user
+        user,
+        icon: `${process.env.URL}/pfp/${id}.png`
     });
 });
 

form/auth.js

@@ -4,6 +4,9 @@ import initDb from "../db.js";
 let db = await initDb();
 
 let main = new Route([], async function (req, res, input) {
+    let {route} = req.params;
+    let {id} = req.query;
+
     let body = { ...req.cookies, ...req.body };
 
     let { token } = body;
@@ -20,7 +23,11 @@ let main = new Route([], async function (req, res, input) {
 
     return {
         username,
-        valid: valid[0] ? valid[0].valid : 'noexist'
+        valid: valid[0] ? valid[0].valid : 'noexist',
+        url: `${process.env.URL}/client/${route}?id=${id || ''}`,
+        icon: `${process.env.URL}/static/img/logo.png`,
+        rootUrl: process.env.URL,
+        ogType: 'website'
     };
 });
 

static/img/logo.svg

@@ -9,6 +9,9 @@
    id="svg1"
    inkscape:version="1.4 (e7c3feb100, 2024-10-09)"
    sodipodi:docname="logo.svg"
+   inkscape:export-filename="logo.png"
+   inkscape:export-xdpi="452.63"
+   inkscape:export-ydpi="452.63"
    xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
    xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
    xmlns="http://www.w3.org/2000/svg"
@@ -24,7 +27,7 @@
      inkscape:deskcolor="#d1d1d1"
      inkscape:document-units="mm"
      inkscape:zoom="1"
-     inkscape:cx="112.5"
+     inkscape:cx="112"
      inkscape:cy="86.5"
      inkscape:window-width="1918"
      inkscape:window-height="1056"

views/header.ejs

@@ -2,12 +2,16 @@
 <html>
 
 <head>
-    <meta charset="UTF-8">
     <title>BiglyChat</title>
-    <meta name="description" content="Collab on videos... make creative animations... and more!">
     <script src='/static/main.js'></script>
     <link rel='stylesheet' href='/static/main.css'>
+    <meta charset="UTF-8">
+    <meta name="description" content="Collab on videos... make creative animations... and more!">
     <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta property="og:title" content="BiglyChat" />
+    <meta property="og:type" content="<%= ogType %>" />
+    <meta property="og:url" content="<%= url %>" />
+    <meta property="og:image" content="<%= icon %>" />
 </head>
 
 <body>

views/player.ejs

@@ -1,4 +1,5 @@
 <%- include('header.ejs') -%>
+    <meta property="og:video" content="<%= rootUrl %>/videos/<%= videoData.id %>.webm" />
     <div class='video-wrapper'>
         <video class='player' src='/videos/<%= videoData.id %>.webm'></video>
         <div class="progressbar">