Initial commit.

.gitignore

@@ -0,0 +1,118 @@
+# ---> Node
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# Snowpack dependency directory (https://snowpack.dev/)
+web_modules/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+.env.test
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+.parcel-cache
+
+# Next.js build output
+.next
+out
+
+# Nuxt.js build / generate output
+.nuxt
+dist
+
+# Gatsby files
+.cache/
+# Comment in the public line in if your project uses Gatsby and not Next.js
+# https://nextjs.org/blog/next-9-1#public-directory-support
+# public
+
+# vuepress build output
+.vuepress/dist
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# TernJS port file
+.tern-port
+
+# Stores VSCode versions used for testing VSCode extensions
+.vscode-test
+
+# yarn v2
+.yarn/cache
+.yarn/unplugged
+.yarn/build-state.yml
+.yarn/install-state.gz
+.pnp.*
+

app.js

@@ -0,0 +1,41 @@
+var createError = require('http-errors');
+var express = require('express');
+var path = require('path');
+var cookieParser = require('cookie-parser');
+var logger = require('morgan');
+
+var indexRouter = require('./routes/index');
+var usersRouter = require('./routes/users');
+
+var app = express();
+
+// view engine setup
+app.set('views', path.join(__dirname, 'views'));
+app.set('view engine', 'ejs');
+
+app.use(logger('dev'));
+app.use(express.json());
+app.use(express.urlencoded({ extended: false }));
+app.use(cookieParser());
+app.use(express.static(path.join(__dirname, 'public')));
+
+app.use('/', indexRouter);
+app.use('/users', usersRouter);
+
+// catch 404 and forward to error handler
+app.use(function(req, res, next) {
+  next(createError(404));
+});
+
+// error handler
+app.use(function(err, req, res, next) {
+  // set locals, only providing error in development
+  res.locals.message = err.message;
+  res.locals.error = req.app.get('env') === 'development' ? err : {};
+
+  // render the error page
+  res.status(err.status || 500);
+  res.render('error');
+});
+
+module.exports = app;

bin/www

@@ -0,0 +1,90 @@
+#!/usr/bin/env node
+
+/**
+ * Module dependencies.
+ */
+
+var app = require('../app');
+var debug = require('debug')('socialbot:server');
+var http = require('http');
+
+/**
+ * Get port from environment and store in Express.
+ */
+
+var port = normalizePort(process.env.PORT || '3000');
+app.set('port', port);
+
+/**
+ * Create HTTP server.
+ */
+
+var server = http.createServer(app);
+
+/**
+ * Listen on provided port, on all network interfaces.
+ */
+
+server.listen(port);
+server.on('error', onError);
+server.on('listening', onListening);
+
+/**
+ * Normalize a port into a number, string, or false.
+ */
+
+function normalizePort(val) {
+  var port = parseInt(val, 10);
+
+  if (isNaN(port)) {
+    // named pipe
+    return val;
+  }
+
+  if (port >= 0) {
+    // port number
+    return port;
+  }
+
+  return false;
+}
+
+/**
+ * Event listener for HTTP server "error" event.
+ */
+
+function onError(error) {
+  if (error.syscall !== 'listen') {
+    throw error;
+  }
+
+  var bind = typeof port === 'string'
+    ? 'Pipe ' + port
+    : 'Port ' + port;
+
+  // handle specific listen errors with friendly messages
+  switch (error.code) {
+    case 'EACCES':
+      console.error(bind + ' requires elevated privileges');
+      process.exit(1);
+      break;
+    case 'EADDRINUSE':
+      console.error(bind + ' is already in use');
+      process.exit(1);
+      break;
+    default:
+      throw error;
+  }
+}
+
+/**
+ * Event listener for HTTP server "listening" event.
+ */
+
+function onListening() {
+  var addr = server.address();
+  var bind = typeof addr === 'string'
+    ? 'pipe ' + addr
+    : 'port ' + addr.port;
+  debug('Listening on ' + bind);
+}

index.html

@@ -0,0 +1,105 @@
+<!DOCTYPE html>
+<html class="dark">
+
+<head>
+  <title>Social Robot</title>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="stylesheet" href="dist/style.css">
+</head>
+
+<body class="bg-white dark:bg-gray-800 dark:text-white">
+  <div class="lg:px-24 mx-auto">
+
+    <div class="lg:flex mt-2">
+      <div class="lg:w-1/4">
+        <form method="GET">
+          <div class="relative text-gray-600 focus-within:text-gray-400">
+            <span class="absolute inset-y-0 left-0 flex items-center pl-2">
+              <button type="submit" class="p-1 focus:outline-none focus:shadow-outline">
+                <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" class="w-6 h-6"><path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
+              </button>
+            </span>
+            <input type="search" name="q" class="w-full py-2 text-sm dark:text-white dark:bg-gray-900 rounded-md pl-10 focus:outline-none dark:focus:bg-white dark:focus:text-gray-900" placeholder="Search..." autocomplete="off">
+          </div>
+        </form>
+        <div class="flex items-center text-sm mt-5">
+          <img src="https://i.pravatar.cc/48" alt="John Doe" class="rounded-md mr-2">
+          John Doe
+        </div>
+        <div class="my-4">
+          <form action="">
+            <textarea class="w-full p-1 dark:text-white dark:bg-gray-900 rounded-md focus:outline-none dark:focus:bg-white dark:focus:text-gray-900" name="body" id="" cols="20" placeholder="What's on your mind?"></textarea>
+            <hr class="my-4">
+            <div class="flex justify-end">
+              <button class="place-content-end bg-blue-500 rounded-md shadow py-2 px-2 text-white" type="submit">TOOT!</button>
+            </div>
+            
+          </form>
+        </div>
+      </div>
+
+      <div class="lg:flex-1 lg:mx-10">
+        <div class="dark:bg-gray-700 flex p-4">
+          <div class="mr-4 flex-shrink-0">
+            <img src="https://i.pravatar.cc/48" alt="John Doe" class="rounded-md">
+          </div>
+          <div>
+            <h5 class="font-bold mb-4">John Doe</h5>
+
+            <p>There are so many programs configurable in #Lua. I am making a list.</p>
+
+            <p>I revisited the tiling window manager topic. #awesomewm is configurable in Lua, but for now I think I will rewrite my #bspwm config in Lua and learn how to do more advanced customization with conditionals.</p>
+              
+            <p>Found out that #conky's visualizations are done in Lua with the Cairo graphics library. That looks really cool and I hope to do some with that soon. </p>
+              
+            <p>Set terminal text and bspwm to #gruvbox colors.</p>
+              
+            <p>#RetroEdgeTechStack</p>
+          </div>
+        </div>
+      </div>
+
+      <div class="lg:w-1/4">
+        <ul>
+          <li>
+            <a class="font-bold text-lg mb-4 block">Home</a>
+          </li>
+          <li>
+            <a class="font-bold text-lg mb-4 block">Notifications</a>
+          </li>
+          <li>
+            <a class="font-bold text-lg mb-4 block">Local</a>
+          </li>
+          <li>
+            <a class="font-bold text-lg mb-4 block">Federated</a>
+          </li>
+          <li>
+            <a class="font-bold text-lg mb-4 block">Direct messages</a>
+          </li>
+          <li>
+            <a class="font-bold text-lg mb-4 block">Favourites</a>
+          </li>
+          <li>
+            <a class="font-bold text-lg mb-4 block">Bookmarks</a>
+          </li>
+          <li>
+            <a class="font-bold text-lg mb-4 block">Lists</a>
+          </li>
+          <li>
+            <a class="font-bold text-lg mb-4 block">Profile directory</a>
+          </li>
+          <li>
+            <a class="font-bold text-lg mb-4 block">Preferences</a>
+          </li>
+          <li>
+            <a class="font-bold text-lg mb-4 block">Follows and followers</a>
+          </li>
+        </ul>
+      </div>
+
+    </div>
+  </div>
+</body>
+
+</html>

package.json

@@ -0,0 +1,20 @@
+{
+  "name": "socialbot",
+  "version": "0.0.0",
+  "private": true,
+  "scripts": {
+    "start": "node ./bin/www"
+  },
+  "dependencies": {
+    "cookie-parser": "~1.4.4",
+    "debug": "~2.6.9",
+    "ejs": "~2.6.1",
+    "express": "~4.16.1",
+    "http-errors": "~1.6.3",
+    "morgan": "~1.9.1"
+  },
+  "devDependencies": {
+    "postcss": "^8.4.6",
+    "tailwindcss": "^3.0.18"
+  }
+}

routes/index.js

@@ -0,0 +1,9 @@
+var express = require('express');
+var router = express.Router();
+
+/* GET home page. */
+router.get('/', function(req, res, next) {
+  res.render('index', { title: 'Express' });
+});
+
+module.exports = router;

routes/users.js

@@ -0,0 +1,9 @@
+var express = require('express');
+var router = express.Router();
+
+/* GET users listing. */
+router.get('/', function(req, res, next) {
+  res.send('respond with a resource');
+});
+
+module.exports = router;

src/style.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

tailwind.config.js

@@ -0,0 +1,7 @@
+module.exports = {
+  content: ["./src/**/*.{html,js}", "./*.{html,js}", "./views/**/*.{ejs,js,html}"],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}

views/error.ejs

@@ -0,0 +1,3 @@
+<h1><%= message %></h1>
+<h2><%= error.status %></h2>
+<pre><%= error.stack %></pre>

views/index.ejs

@@ -0,0 +1,136 @@
+<!DOCTYPE html>
+<html class="dark">
+
+<head>
+  <title>Social Robot</title>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="stylesheet" href="/stylesheets/style.css">
+  <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">
+</head>
+
+<body class="bg-white dark:bg-gray-800 dark:text-white">
+  <div class="lg:px-24 mx-auto">
+
+    <div class="lg:flex mt-2">
+
+      <div class="lg:w-1/4 lg:overflow-y-scroll ">
+        <form method="GET">
+          <div class="relative text-gray-600 focus-within:text-gray-400">
+            <span class="absolute inset-y-0 left-0 flex items-center pl-2">
+              <button type="submit" class="p-1 focus:outline-none focus:shadow-outline">
+                <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                  viewBox="0 0 24 24" class="w-6 h-6">
+                  <path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
+                </svg>
+              </button>
+            </span>
+            <input type="search" name="q"
+              class="w-full py-2 text-sm dark:text-white dark:bg-gray-900 pl-10 focus:outline-none dark:focus:bg-white dark:focus:text-gray-900"
+              placeholder="Search..." autocomplete="off">
+          </div>
+        </form>
+        <div class="flex items-center text-sm mt-5">
+          <img src="https://i.pravatar.cc/48" alt="John Doe" class="rounded-md mr-2">
+          John Doe
+        </div>
+        <div class="my-4">
+          <form action="">
+            <textarea
+              class="w-full p-1 dark:text-white dark:bg-gray-900 focus:outline-none dark:focus:bg-white dark:focus:text-gray-900"
+              name="body" id="" cols="20" placeholder="What's on your mind?"></textarea>
+            <hr class="my-4">
+            <div class="flex justify-end">
+              <button class="place-content-end bg-blue-500 shadow py-2 px-2 text-white" type="submit">TOOT!</button>
+            </div>
+          </form>
+        </div>
+      </div>
+
+      <div class="lg:flex-1 lg:mx-3 bg-gray-600 text-white" style="max-width: 580px;">
+        <div class="bg-gray-900 text-white p-4 flex justify-between absolute w-full z-50" style="max-width: 580px;">
+          <div><i class="fa fa-home mr-2"></i>Home</div>
+          <div><i class="fa fa-sliders"></i></div>
+        </div>
+
+        <div class="lg:overflow-y-scroll lg:h-screen">
+          <div class="max-h-40 overflow-y-hidden align-bottom mt-14">
+            <img class="object-none object-center" src="images/e3c4a6d5b1f352ee.jpg" alt="paralax">
+          </div>
+          <div class="flex justify-between">
+            <div class="flex-shrink-0 max-h-10 relative -top-10 px-4">
+              <img src="https://i.pravatar.cc/94" alt="John Doe" class="rounded-md overflow-visible">
+            </div>
+            <div class="flex items-center pt-3 px-2 mx-2">
+              <button class="bg-blue-600 py-2 px-5 rounded-md mr-3 focus:outline-none focus:shadow-outline"
+                type="submit">Follow</button>
+              <button
+                class="bg-gray-600 border border-b-gray-400 py-2 px-5 rounded-md focus:outline-none focus:shadow-outline shadow-xl"
+                type="submit"><i class="fa fa-ellipsis-v"></i></button>
+            </div>
+          </div>
+
+          <div class="p-4">
+            <div>
+              <h4 class="font-bold">John Doe</h4>
+              <p class="text-sm text-gray-400">john.doe@uplink.si</p>
+            </div>
+            <div class="text-sm text-gray-400 mt-3">
+              <p>Joined Dec 28, 2021</p>
+              <div class="flex">
+                <div class="pr-5"><span class="text-white">5</span> Posts</div>
+                <div class="pr-5"><span class="text-white">3</span> Following</div>
+                <div class="pr-5"><span class="text-white">7</span> Followers</div>
+              </div>
+            </div>
+          </div>
+          <% for(var i=0; i < 8; i++) {%>
+            <%- include('partials/_toot') %>
+          <% } %>
+        </div>
+      </div>
+
+      <div class="lg:w-1/4 lg:overflow-y-scroll">
+        <ul class="p-5">
+          <li>
+            <a class="font-bold text-lg mb-4 block"><i class="fa fa-home mr-2"></i>Home</a>
+          </li>
+          <li>
+            <a class="font-bold text-lg mb-4 block"><i class="fa fa-bell mr-2"></i>Notifications</a>
+          </li>
+          <li>
+            <a class="font-bold text-lg mb-4 block"><i class="fa fa-group mr-2"></i>Local</a>
+          </li>
+          <li>
+            <a class="font-bold text-lg mb-4 block"><i class="fa fa-globe mr-2"></i>Federated</a>
+          </li>
+          <li>
+            <a class="font-bold text-lg mb-4 block"><i class="fa fa-envelope mr-2"></i>Direct messages</a>
+          </li>
+          <li>
+            <a class="font-bold text-lg mb-4 block"><i class="fa fa-star mr-2"></i>Favourites</a>
+          </li>
+          <li>
+            <a class="font-bold text-lg mb-4 block"><i class="fa fa-bookmark mr-2"></i>Bookmarks</a>
+          </li>
+          <li>
+            <a class="font-bold text-lg mb-4 block"><i class="fa fa-list mr-2"></i>Lists</a>
+          </li>
+          <li>
+            <a class="font-bold text-lg mb-4 block"><i class="fa fa-address-book mr-2"></i>Profile directory</a>
+          </li>
+          <li>
+            <a class="font-bold text-lg mb-4 block"><i class="fa fa-cog mr-2"></i>Preferences</a>
+          </li>
+          <li>
+            <a class="font-bold text-lg mb-4 block"><i class="fa fa-group mr-2"></i>Follows and followers</a>
+          </li>
+        </ul>
+      </div>
+
+    </div>
+  </div>
+</body>
+
+</html>

views/partials/_toot.ejs

@@ -0,0 +1,18 @@
+<div class="dark:bg-gray-700 flex p-4 border-b border-b-gray-400">
+    <div class="mr-4 flex-shrink-0">
+      <img src="https://i.pravatar.cc/48" alt="John Doe" class="rounded-md">
+    </div>
+    <div>
+      <h5 class="font-bold mb-4">John Doe</h5>
+
+      <p>There are so many programs configurable in #Lua. I am making a list.</p>
+
+      <p>I revisited the tiling window manager topic. #awesomewm is configurable in Lua, but for now I think I will rewrite my #bspwm config in Lua and learn how to do more advanced customization with conditionals.</p>
+        
+      <p>Found out that #conky's visualizations are done in Lua with the Cairo graphics library. That looks really cool and I hope to do some with that soon. </p>
+        
+      <p>Set terminal text and bspwm to #gruvbox colors.</p>
+        
+      <p>#RetroEdgeTechStack</p>
+    </div>
+  </div>