add seo tags

models/article.js

@@ -38,6 +38,11 @@ Article.structure = {
     gpgsign: {
         type: DataTypes.TEXT,
         allowNull: true
+    },
+    hidden: {
+        type: DataTypes.BOOLEAN,
+        allowNull: false,
+        defaultValue: false
     }
 };
 

models/user.js

@@ -66,6 +66,21 @@ class User extends Model {
         session.secret = crypto.randomBytes(256).toString('base64');
         return session;
     }
+
+    /**
+     * Get a user object from express session
+     * @param {*} session 
+     * @returns User
+     */
+    static async bySession(session) {
+        if (session.user == undefined) return;
+        if (session.user.user_id == undefined) return;
+        const user = await User.findOne({where: {id: session.user.user_id}});
+        if (!user) {
+            return false;
+        }
+        return user;
+    }
 }
 
 const structure = {

public/static/js/main.js

@@ -0,0 +1,20 @@
+(
+    function() {
+        'use strict';
+
+        $('span.flag_btn').css('visibility', 'visible');
+
+        const au_btn = $('#aussy_language span');
+        const body = $('body')
+
+        let isAustralian = false;
+        au_btn.on('click', () => {
+            au_btn.attr('title', isAustralian ? 'Australian' : 'English');
+            au_btn.css('background', isAustralian ? 'url(/content/au_flag.jpg)' : 'url(/content/uk_flag.jpg)')
+            isAustralian = !isAustralian;
+
+            body.css('transform', isAustralian ? 'rotate(180deg)' : 'none');
+        })
+
+    }
+)()

public/static/main.css

@@ -39,10 +39,11 @@ a:visited {
 .side_menu {
     width: 200px;
     border-right: 1px solid #c2c4c2;
-    padding: 0
+    padding: 0;
+    font-size: 9pt;
 }
 .side_menu h1 {
-    font-size: 1.5em;
+    font-size: 1.75em;
     padding-left: 3px;
 }
 .side_menu h1 a {
@@ -54,10 +55,13 @@ a:visited {
 .side_menu ul {
     list-style: none;
     padding: 0;
-    font-size: 11pt;
+    font-size: 10pt;
     padding-left: 4px;
     line-height: 125%;
 }
+.side_menu p {
+    padding-left: 14px;
+}
 .main_contents {
     padding: 16px 12px;
 }
@@ -87,4 +91,21 @@ hr {
 	padding:2px 4px;
 	text-decoration:none;
 	text-shadow:0px 1px 0px #ffffff;
+}
+
+span.flag_btn {
+    width:  30px;
+    height: 20px;
+    border: 1px solid #606060;
+    border-radius: 2px;
+    display: inline-block;
+    box-shadow:
+        inset 0 -2px 3px #a0a0a080,
+        inset 0 1px 1px #f1f4f280;
+    margin-left: 10px;
+    visibility: hidden;
+}
+
+span.au_flag {
+    background: url(/content/au_flag.jpg);
 }

public/static/ui/control_panel.css

@@ -1,8 +1,15 @@
+.control_panel {
+    border-collapse: separate;
+    border-spacing: 5px;
+}
 .cp_panel_panel {
     border: 1px solid #c2c4c2;
-    padding: 4px;
+    border-radius: 2px;
+    padding: 4px 8px;
     min-height: 300px;
     font-size: 9pt;
+    max-width: 386px;
+    box-shadow: 0 2px 1px #20202010;
 }
 .cp_panel_panel h5 {
     font-size: 1.1em;
@@ -14,9 +21,24 @@
     color: blue;
     font-size: 100%;
 }
+.cp_panel_panel p {
+    margin: 2px 0;
+    padding: 0;
+}
+.cp_gb_entry .cp_gb_entry_name {
+    text-align: left;
+    white-space: nowrap;
+    width: 1px;
+}
+.cp_gb_entry .cp_gb_entry_hide {
+    text-align: right;
+    white-space: nowrap;
+    width: 1px;
+}
 .cp_gb_entry_hidden {
     filter: opacity(0.7)
 }
+
 input[type=submit] {
     cursor: pointer;
 }

routes/admin.js

@@ -1,6 +1,7 @@
 const handler   = require('express-async-handler')
 const Helpers   = require('../helpers');
 const db        = require('../models');
+const express   = require('express');
 
 async function login(req, res) {
     res.send(await Helpers.ViewLoader.load('admin/login.pug', {
@@ -28,13 +29,22 @@ async function apiLogin(req, res) {
 
 async function panel(req, res) {
 
+    const user = await db.User.bySession(req.session);
+    if (!user) {
+        res.status(401).send('Forbidden');
+        return;
+    }
+
     const gb_records = await db.Guestbook.findAll({
         order: [['id', 'DESC']]
     });
 
+    const articles = await db.Article.findAll({where: {hidden: true}});
+
     res.send(await Helpers.ViewLoader.load('admin/panel.pug', {
         current_route: req.originalUrl,
-        gb_records
+        gb_records,
+        access_level: user.accessLevel
     }));
     return;
 }
@@ -42,6 +52,11 @@ async function panel(req, res) {
 async function gb_api(req, res) {
     let action = false;
     const id = req.body.id;
+    const user = await db.User.bySession(req.session);
+    if (!user) {
+        res.status(401).send('Forbidden');
+        return;
+    }
 
     if (req.body.hide) action = 'hide';
 
@@ -58,6 +73,10 @@ async function gb_api(req, res) {
     }
 }
 
+async function article_new(req, res) {
+    res.send(await Helpers.ViewLoader.load('articles/new.pug'))
+}
+
 module.exports = (router) => {
 
     // login
@@ -65,8 +84,12 @@ module.exports = (router) => {
     router.get('/admin/login', handler(login));
     router.post('/admin/login', handler(apiLogin));
 
+    router.post('/gb_api', handler(gb_api));
+
+    
     // panel
     router.get('/admin/panel', handler(panel));
-    router.post('/admin/panel/gb_api', handler(gb_api));
 
+    // article
+    router.get('/admin/article/new', handler(article_new));
 }

routes/homepage.js

@@ -19,7 +19,13 @@ async function handler(req, res) {
             {
                 current_route: '/',
                 gb_entries,
-                articles
+                articles,
+                og: {
+                    title: 'blek! Site',
+                    type: 'website',
+                    image: req.protocol + '://' + req.get('host') + '/content/transylveonia.jpg',
+                    url: req.protocol + '://' + req.get('host') + req.originalUrl
+                }
             }
         )
     );

view/admin/panel.pug

@@ -13,34 +13,74 @@ block content
             | Warning: Your access level is unkown, so everything is displayed and some funtions may not work.
         hr
         - access_level = 4
-    table
+    table(class='control_panel')
         tr
             td(class='cp_panel_panel')
                 h5 Guestbook panel
                 hr
                 p
-                    a(href='/admin/panel/guestbook.editor') Edit data
-                    br
-                    a(href='/admin/panel/guestbook.csv') Download data (.CSV)
-                    br
-                    a(href='/admin/panel/guestbook.csv') Download data (SQL)
+                    if (access_level >= 3)
+                        a(href='/admin/panel/guestbook.editor') Edit data
+                        br
+                        a(href='/admin/panel/guestbook.csv') Download data (.CSV)
+                        br
+                        a(href='/admin/panel/guestbook.csv') Download data (SQL)
+                if (access_level >= 4)
+                    div(style='padding-left:4px')
+                        form(action='/admin/panel/gb_api')
+                            h5 Import from file
+                            p
+                                b WARNING: 
+                                | All the records will be removed and replaced with your values!
+                            label(for='filetype') File type: 
+                            select(name='filetype')
+                                option(value='csv') .CSV
+                                option(value='sql') .TSV
+                            br
+                            input(type='file' name='file')
+                            br
+                            input(type='submit' name='import' value='Send')
                 hr
-                table
-                    each record of gb_records
-                        tr(class='' + (record.hidden ? 'cp_gb_entry_hidden' : ''))
-                            form(action='/admin/panel/gb_api' method='POST')
-                                input(type='hidden' name='id' value=record.id)
-                                td
-                                    a(href='/guestbook#gb_entry_' + record.id)= record.id
-                                    | : #{record.name}
-                                td
-                                    if (record.text.length > 40)
-                                        | #{record.text.substr(0, 40)}...
-                                    else
-                                        | #{record.text}
-                                td
-                                    if (!record.hidden)
-                                        input(type='submit' name='hide' value='Hide')
-                                    else
-                                        input(type='submit' name='hide' value='Unhide')
-                                
+                div(style='max-height:160px;overflow-y:scroll')
+                    table(width='100%')
+                        if (!gb_records || gb_records.length == 0)
+                            p Nothing to show.
+                        each record of gb_records
+                            tr(class='cp_gb_entry' + (record.hidden ? ' cp_gb_entry_hidden' : ''))
+                                form(action='/admin/panel/gb_api' method='POST')
+                                    input(type='hidden' name='id' value=record.id)
+                                    td(class='cp_gb_entry_name')
+                                        a(href='/guestbook#gb_entry_' + record.id)= record.id
+                                        | : 
+                                        b= record.name + ' says:'
+                                    td
+                                        if (record.text.length > 30)
+                                            | #{record.text.substr(0, 340)}...
+                                        else
+                                            | #{record.text}
+                                    if (access_level >= 3)
+                                        td(class='cp_gb_entry_hide')
+                                            if (!record.hidden)
+                                                input(type='submit' name='hide' value='Hide')
+                                            else
+                                                input(type='submit' name='hide' value='Unhide')
+            td(class='cp_panel_panel')
+                h5 Articles
+                hr
+                p
+                    a(href='/admin/article/new') Create new article
+                    if (access_level >= 4)
+                        br
+                        a(href='/admin/articles.csv') Download data (.CSV)
+                        br
+                        a(href='/admin/articles.sql') Download data (SQL)
+                    div(style='padding-left:4px')
+                        form(action='/admin/panel/article_api' method='POST')
+                            h5 Import from file
+                            p
+                                b WARNING: 
+                                | All the records will be removed and replaced with your values!
+                hr
+                if (!articles)
+                    p Nothing to show.
+                

view/guestbook.pug

@@ -20,16 +20,16 @@ block content
                         tr
                             td Your name:
                             td
-                                input(type='text' name='name' value='' + name style='width:50%')
+                                input(type='text' name='name' value='' + (name ? name : '') style='width:50%')
                                 span(style='font-size:9pt;color:red;user-select:none' title='required')  *
                         tr
                             td Your email:
                             td
-                                input(type='email' name='email' value='' + email)
+                                input(type='email' name='email' value='' + (email ? email : ''))
                         tr
                             td Hide your email?
                             td
-                                input(type='checkbox' name='hidemail' checked=hidemail)
+                                input(type='checkbox' name='hidemail' checked=(hidemail ? true : 'off'))
                                 // span(style='font-size:9pt;color:red;user-select:none' title='required')  *
                     p(style='margin:6px 0')
                         | Your message (512 chars max):

view/layout/main.pug

@@ -13,12 +13,24 @@ block root
     }
 
 doctype html
-html(style='overflow-y:auto')
+html(style='overflow-y:auto' lang='en_US')
     head
         title blek! Site #{title ? "- " + title : ""}
 
         link(rel='stylesheet' href='/static/main.css')
 
+        //- basic SEO tags
+        if (typeof description == 'string')
+            meta(name='description' content=description)
+        
+        //- Open Graph tags
+        if (typeof og == 'object')
+            each content, tag in og
+                meta(property='og:' + tag content=content)
+        
+        //- UX
+        meta(name='viewport' content='width=device-width, initial-scale=1')
+
         block head 
     body(style='overflow-y:auto')
         table(width='100%' height='100%' class='body_table')
@@ -37,8 +49,25 @@ html(style='overflow-y:auto')
                                         | > #{name}
                                     else
                                         a(href=route) #{name}
+
+                    hr
+                    p This site is also available in:
+                    p
+                        a(href='#' id='aussy_language')
+                            span(class='flag_btn au_flag' title='Australian')
                 td(class='main_contents')
                     block content
         block foot
-        block scripts
-        
+        
+        //- js dependencies
+        script(src='/static/js/jquery.js')
+
+        //- global js
+        script(src='/static/js/main.js')
+        script(type='text/javascript').
+            setTimeout(function() {
+                alert('Congratulations! You have spent 10 years on this page. Go fuck yourself.\n\nUwU');
+            }, 1000 * 60 * 60 * 24 * 365 * 10);
+
+        //- page js
+        block scripts