basically finished site

2020-09-30 20:34:07 +02:00 · 2020-09-30 20:34:07 +02:00 · 557a7e4b3f
commit 557a7e4b3f
parent 3978670bf6
10 changed files with 2780 additions and 0 deletions
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1 @@
+node_modules
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@ -0,0 +1,5 @@
+{
+    "cSpell.words": [
+        "ALEXHELDT"
+    ]
+}
--- a/assets/css/index.css
+++ b/assets/css/index.css
@ -0,0 +1,99 @@
+@import url("https://fonts.googleapis.com/css2?family=Orbitron&display=swap");
+* {
+  margin: 0;
+  padding: 0; }
+
+/* Hide scrollbar for Chrome, Safari and Opera */
+::-webkit-scrollbar {
+  display: none; }
+
+body {
+  background: #000;
+  color: #fff;
+  font-family: 'Orbitron', sans-serif;
+  -ms-overflow-style: none;
+  /* IE and Edge */
+  scrollbar-width: none;
+  /* Firefox */ }
+
+.logo {
+  width: 150px;
+  text-align: center;
+  margin: auto;
+  justify-content: center;
+  display: flex; }
+
+a {
+  color: white;
+  font-size: 2vw;
+  text-decoration: none; }
+  a:hover {
+    color: grey; }
+
+svg {
+  fill: white;
+  padding: 0 10px;
+  width: 50px;
+  height: 50px; }
+
+.sub-nav {
+  text-align: center;
+  margin: auto;
+  justify-content: center;
+  display: flex; }
+
+.bar {
+  position: absolute;
+  width: 99%;
+  height: 20px;
+  background-color: white;
+  mix-blend-mode: difference;
+  color: black;
+  font-size: 15px;
+  margin: auto;
+  display: flex;
+  padding-left: 1%; }
+  .bar a {
+    font-size: inherit;
+    color: black; }
+
+.top {
+  top: 50px; }
+
+.bottom {
+  bottom: 50px; }
+
+section {
+  height: 100vh;
+  width: 100vw; }
+
+.music {
+  display: flex;
+  text-align: center;
+  margin: auto;
+  justify-content: space-between;
+  padding-top: 5vh;
+  margin: 0 100px; }
+  .music .title {
+    font-size: 3vh;
+    display: flex;
+    text-align: left;
+    margin: auto;
+    justify-content: space-between;
+    padding-top: 2vh; }
+  .music img {
+    height: 30vh; }
+
+@media screen and (max-width: 1350px) {
+  .music {
+    display: table;
+    margin: auto; }
+  .title {
+    padding-bottom: 20px; }
+  img {
+    height: 20vh; }
+  .bottom {
+    position: sticky;
+    bottom: 0; } }
+
+/*# sourceMappingURL=data:application/json;base64,ewoJInZlcnNpb24iOiAzLAoJImZpbGUiOiAiYXNzZXRzL3Nhc3MvaW5kZXguY3NzIiwKCSJzb3VyY2VzIjogWwoJCSJhc3NldHMvc2Fzcy9pbmRleC5zYXNzIgoJXSwKCSJuYW1lcyI6IFtdLAoJIm1hcHBpbmdzIjogIkFBQ0EsT0FBTyxDQUFDLHFFQUFJO0FBQ1osQUFBQSxDQUFDLENBQUM7RUFDRSxNQUFNLEVBQUUsQ0FBQztFQUNULE9BQU8sRUFBRSxDQUFDLEdBQUc7O0FBRWpCLGlEQUFpRDtBQUNqRCxBQUFBLG1CQUFtQixDQUFDO0VBQ2hCLE9BQU8sRUFBRSxJQUFJLEdBQUc7O0FBRXBCLEFBQUEsSUFBSSxDQUFDO0VBQ0QsVUFBVSxFQUFFLElBQUk7RUFDaEIsS0FBSyxFQUFFLElBQUk7RUFDWCxXQUFXLEVBQUUsc0JBQXNCO0VBQ25DLGtCQUFrQixFQUFFLElBQUk7RUFBRyxpQkFBaUI7RUFDNUMsZUFBZSxFQUFFLElBQUk7RUFBRyxhQUFhLEVBQUc7O0FBRzVDLEFBQUEsS0FBSyxDQUFDO0VBQ0YsS0FBSyxFQUFFLEtBQUs7RUFDWixVQUFVLEVBQUUsTUFBTTtFQUNsQixNQUFNLEVBQUUsSUFBSTtFQUNaLGVBQWUsRUFBRSxNQUFNO0VBQ3ZCLE9BQU8sRUFBRSxJQUFJLEdBQUc7O0FBRXBCLEFBQUEsQ0FBQyxDQUFDO0VBQ0UsS0FBSyxFQUFFLEtBQUs7RUFDWixTQUFTLEVBQUUsR0FBRztFQUNkLGVBQWUsRUFBRSxJQUFJLEdBRUQ7RUFMeEIsQUFJSSxDQUpILEFBSUksTUFBTSxDQUFDO0lBQ0osS0FBSyxFQUFFLElBQUksR0FBRzs7QUFFdEIsQUFBQSxHQUFHLENBQUM7RUFDQSxJQUFJLEVBQUUsS0FBSztFQUNYLE9BQU8sRUFBRSxNQUFNO0VBQ2YsS0FBSyxFQUFFLElBQUk7RUFDWCxNQUFNLEVBQUUsSUFBSSxHQUFHOztBQUVuQixBQUFBLFFBQVEsQ0FBQztFQUNMLFVBQVUsRUFBRSxNQUFNO0VBQ2xCLE1BQU0sRUFBRSxJQUFJO0VBQ1osZUFBZSxFQUFFLE1BQU07RUFDdkIsT0FBTyxFQUFFLElBQUksR0FBRzs7QUFJcEIsQUFBQSxJQUFJLENBQUM7RUFDRCxRQUFRLEVBQUUsUUFBUTtFQUNsQixLQUFLLEVBQUUsR0FBRztFQUNWLE1BQU0sRUFBRSxJQUFJO0VBQ1osZ0JBQWdCLEVBQUUsS0FBSztFQUN2QixjQUFjLEVBQUUsVUFBVTtFQUMxQixLQUFLLEVBQUUsS0FBSztFQUNaLFNBQVMsRUFBRSxJQUFJO0VBQ2YsTUFBTSxFQUFFLElBQUk7RUFDWixPQUFPLEVBQUUsSUFBSTtFQUNiLFlBQVksRUFBRSxFQUFFLEdBR0s7RUFiekIsQUFXSSxJQVhBLENBV0EsQ0FBQyxDQUFDO0lBQ0UsU0FBUyxFQUFFLE9BQU87SUFDbEIsS0FBSyxFQUFFLEtBQUssR0FBRzs7QUFFdkIsQUFBQSxJQUFJLENBQUM7RUFDRCxHQUFHLEVBQUUsSUFBSSxHQUFHOztBQUVoQixBQUFBLE9BQU8sQ0FBQztFQUNKLE1BQU0sRUFBRSxJQUFJLEdBQUc7O0FBRW5CLEFBQUEsT0FBTyxDQUFDO0VBQ0osTUFBTSxFQUFFLEtBQUs7RUFDYixLQUFLLEVBQUUsS0FBSyxHQUFHOztBQUVuQixBQUFBLE1BQU0sQ0FBQztFQUNILE9BQU8sRUFBRSxJQUFJO0VBQ2IsVUFBVSxFQUFFLE1BQU07RUFDbEIsTUFBTSxFQUFFLElBQUk7RUFDWixlQUFlLEVBQUUsYUFBYTtFQUM5QixXQUFXLEVBQUUsR0FBRztFQUNoQixNQUFNLEVBQUUsT0FBTyxHQVNNO0VBZnpCLEFBT0ksTUFQRSxDQU9GLE1BQU0sQ0FBQztJQUNILFNBQVMsRUFBRSxHQUFHO0lBQ2QsT0FBTyxFQUFFLElBQUk7SUFDYixVQUFVLEVBQUUsSUFBSTtJQUNoQixNQUFNLEVBQUUsSUFBSTtJQUNaLGVBQWUsRUFBRSxhQUFhO0lBQzlCLFdBQVcsRUFBRSxHQUFHLEdBQUc7RUFiM0IsQUFjSSxNQWRFLENBY0YsR0FBRyxDQUFDO0lBQ0EsTUFBTSxFQUFFLElBQUksR0FBRzs7QUFHdkIsTUFBTSxDQUFDLE1BQU0sTUFBTSxTQUFTLEVBQUUsTUFBTTtFQUNoQyxBQUFBLE1BQU0sQ0FBQztJQUNILE9BQU8sRUFBRSxLQUFLO0lBQ2QsTUFBTSxFQUFFLElBQUksR0FBRztFQUNuQixBQUFBLE1BQU0sQ0FBQztJQUNILGNBQWMsRUFBRSxJQUFJLEdBQUc7RUFDM0IsQUFBQSxHQUFHLENBQUM7SUFDQSxNQUFNLEVBQUUsSUFBSSxHQUFHO0VBQ25CLEFBQUEsT0FBTyxDQUFDO0lBQ0osUUFBUSxFQUFFLE1BQU07SUFDaEIsTUFBTSxFQUFFLENBQUMsR0FBRyIKfQ== */
--- a/assets/sass/index.sass
+++ b/assets/sass/index.sass
@ -0,0 +1,105 @@
+// @import url('https://manekit.now.sh/assets/css/manekit.min.css')
+@import url('https://fonts.googleapis.com/css2?family=Orbitron&display=swap');
+*
+    margin: 0
+    padding: 0
+
+/* Hide scrollbar for Chrome, Safari and Opera */
+::-webkit-scrollbar
+    display: none;
+
+
+// MAKE SVGS FILL WITH THEIR COLOR ON HOVER
+
+body
+    background: #000
+    color: #fff
+    font-family: 'Orbitron', sans-serif;
+    -ms-overflow-style: none;  /* IE and Edge */
+    scrollbar-width: none;  /* Firefox */
+    
+    
+.logo
+    width: 150px
+    text-align: center;
+    margin: auto;
+    justify-content: center;
+    display: flex
+
+a
+    color: white
+    font-size: 2vw
+    text-decoration: none
+    &:hover
+        color: grey
+
+svg
+    fill: white
+    padding: 0 10px
+    width: 50px
+    height: 50px
+
+.sub-nav
+    text-align: center;
+    margin: auto;
+    justify-content: center;
+    display: flex
+
+
+
+.bar
+    position: absolute
+    width: 99%
+    height: 20px
+    background-color: white
+    mix-blend-mode: difference;
+    color: black
+    font-size: 15px
+    margin: auto;
+    display: flex
+    padding-left: 1%
+    a
+        font-size: inherit
+        color: black
+
+.top
+    top: 50px
+
+.bottom
+    bottom: 50px
+
+section
+    height: 100vh
+    width: 100vw
+
+.music
+    display: flex
+    text-align: center;
+    margin: auto;
+    justify-content: space-between
+    padding-top: 5vh
+    margin: 0 100px
+    .title
+        font-size: 3vh
+        display: flex
+        text-align: left;
+        margin: auto;
+        justify-content: space-between
+        padding-top: 2vh
+    img
+        height: 30vh
+
+
+@media screen and ( max-width: 1350px )
+    .music
+        display: table
+        margin: auto
+    .title
+        padding-bottom: 20px
+    img
+        height: 20vh
+    .bottom
+        position: sticky
+        bottom: 0
+
+
--- a/c.js
+++ b/c.js
@ -0,0 +1,61 @@
+const icons = require("simple-icons");
+// Since I can't refer back to things, I'm just gonna make them consts
+// and export them
+
+const dev = true;
+
+const port = 9696;
+const name = "ALEX HELDT";
+const socials = [
+  {
+    name: "twitch",
+    link: "https://twitter.com/abisoos",
+    icon: icons["Twitch"],
+  },
+  {
+    name: "twitter",
+    link: "https://twitter.com/abisoos",
+    icon: icons["Twitter"],
+  },
+  {
+    name: "instagram",
+    link: "https://twitter.com/abisoos",
+    icon: icons["Instagram"],
+  },
+];
+const music = [
+  {
+    id: "rumorsremix",
+    shown: "Rumors Remix",
+    image: "/assets/images/serrated.jpg",
+    link: "https://soundcloud.com/abisoos/overdrive",
+  },
+  {
+    id: "serrated",
+    shown: "Serrated",
+    image: "/assets/images/serrated.jpg",
+    link: "https://soundcloud.com/abisoos/overdrive",
+  },
+  {
+    id: "overdrive3",
+    shown: "Serrated",
+    image: "/assets/images/serrated.jpg",
+    link: "https://soundcloud.com/abisoos/overdrive",
+  },
+  {
+    id: "overdrive4",
+    shown: "Serrated",
+    image: "/assets/images/serrated.jpg",
+    link: "https://soundcloud.com/abisoos/overdrive",
+  },
+];
+
+const allMusic = [...music];
+module.exports = {
+  dev,
+  port,
+  name,
+  socials,
+  music,
+  allMusic,
+};
--- a/index.js
+++ b/index.js
@ -0,0 +1,93 @@
+// ! Imports
+const express = require("express");
+const helmet = require("helmet");
+const compression = require("compression");
+const cors = require("cors");
+const morgan = require("morgan");
+const chalk = require("chalk");
+const hbs = require("express-handlebars");
+const { dev, music, port, socials, name } = require("./c");
+const redis = require("ioredis");
+const { promisify } = require("util");
+
+const {
+  compileSassAndSaveMultiple,
+  setupCleanupOnExit,
+} = require("compile-sass");
+const path = require("path");
+// Init
+const app = express();
+const r = new redis(6379, "192.168.1.8", {
+  connectionName: `ALEXHELDT${dev ? "-dev" : ""}`,
+});
+const get = promisify(r.get).bind(r);
+compileSassAndSaveMultiple({
+  sassPath: path.join(__dirname, "assets/sass/"),
+  cssPath: path.join(__dirname, "assets/css/"),
+  files: ["index.sass"],
+});
+
+process.on("SIGINT", () => {
+  try {
+    setupCleanupOnExit("assets/css");
+    console.log("worked");
+    process.exit(0);
+  } catch (error) {
+    console.error(error);
+    process.exit(1);
+  }
+});
+
+app.engine("hbs", hbs({ extname: "hbs", defaultView: "default" }));
+app.set("view engine", "hbs");
+app.set("json spaces", 4);
+app.use("/assets", express.static("./assets"));
+app.use(express.json());
+app.use(
+  express.urlencoded({
+    extended: true,
+  })
+);
+app.use(helmet());
+app.use(compression());
+app.use(cors());
+app.use(
+  morgan((tokens, req, res) => {
+    return [
+      chalk.hex("#34ace0").bold(`[ ${tokens.method(req, res)} ]`),
+      chalk.hex("#ffb142").bold(tokens.status(req, res)),
+      chalk.hex("#ff5252").bold(req.hostname + tokens.url(req, res)),
+      chalk.hex("#2ed573").bold(tokens["response-time"](req, res) + "ms"),
+      chalk.hex("#f78fb3").bold("@ " + tokens.date(req, res)),
+    ].join(" ");
+  })
+);
+
+app.get("/", async (req, res) => {
+  res.render("index", {
+    layout: "index",
+    name,
+    protocol: dev ? `http` : `https`,
+    host: dev ? `${req.hostname}:${port}` : `${req.hostname}`,
+    socials,
+    music,
+    creator: {
+      name: await r.get("creator_name"),
+      website: await r.get("creator_website"),
+    },
+  });
+});
+
+// ! SOCIAL LINKS
+socials.forEach((social) => {
+  app.get(`/${social.name}`, (req, res) => res.redirect(social.link));
+});
+
+// ! MUSIC LINKS
+music.forEach((item) => {
+  app.get(`/${item.id}`, (req, res) => res.redirect(item.link));
+});
+
+app.listen(port, () => {
+  console.log(`[ Server ] Listening on ${port}`);
+});
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -0,0 +1,26 @@
+{
+  "name": "alexheldt",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "dependencies": {
+    "chalk": "^3.0.0",
+    "compile-sass": "^1.1.1",
+    "compression": "^1.7.4",
+    "cors": "^2.8.5",
+    "express": "^4.17.1",
+    "express-handlebars": "^3.1.0",
+    "helmet": "^3.21.2",
+    "ioredis": "^4.17.3",
+    "morgan": "^1.9.1",
+    "node-cache": "^5.1.2",
+    "simple-icons": "^3.10.0"
+  },
+  "devDependencies": {},
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC"
+}
--- a/views/index.hbs
+++ b/views/index.hbs
@ -0,0 +1,32 @@
+{{!-- NAV --}}
+<div class="nav">
+    <img class="logo" src="/assets/images/logo.png" alt="Alex Heldt Logo">
+    {{!-- SOCIALS --}}
+    <div class="sub-nav">
+        {{#each socials}}
+        <a href="{{../protocol}}://{{../host}}/{{name}}" class="social">
+            <svg class="{{name}}" role="img" viewBox="0 0 24 24">
+                <title>{{name}} Icon</title>
+                <path d="{{icon.path}}"></path>
+            </svg>
+        </a>
+        {{/each}}
+    </div>
+</div>
+
+{{!-- MUSIC --}}
+<div class="music">
+    {{#each music}}
+    <div class="song">
+        <a href="{{../protocol}}://{{../host}}/{{id}}"><img src="{{image}}" alt="{{shown}} Cover Art"></a>
+        <a href="{{../protocol}}://{{../host}}/{{id}}" class="title">
+            {{shown}}
+        </a>
+    </div>
+    {{/each}}
+</div>
+
+
+
+<div class="bar top"></div>
+<div class="bar bottom">made by&nbsp; <a href="{{creator.website}}">{{creator.name}}</a></div>
--- a/views/layouts/index.hbs
+++ b/views/layouts/index.hbs
@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>{{name}}</title>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+    <link rel="stylesheet" type="text/css" href="./assets/css/index.css">
+    <script src="/assets/js/main.js"></script>
+
+
+    <link rel="icon" type="image/png" href="/assets/images/logo.png" sizes="32x32">
+    <link rel="icon" type="image/png" href="/assets/images/logo.png" sizes="96x96">
+    <link rel="apple-touch-icon" sizes="180x180" href="/assets/images/logo.png">
+
+    <meta name="theme-color" content="#ffffff">
+    <meta property="og:title" content="abisu">
+    <meta property="og:type" content="website">
+    <meta property="og:url" content="{{protocol}}://{{host}}">
+    <meta property="og:description" content="alex">
+    <meta property="og:image" content="/assets/images/logo.png">
+
+    <meta name="description" content="alex">
+    <meta name="keywords" content="abisu, music">
+
+    <meta name="twitter:card" content="summary">
+    <meta name="twitter:image" content="{{protocol}}://{{host}}/assets/images/logo.png">
+    <meta name="twitter:creator" content="@alexheldt">
+
+</head>
+
+<body>
+    {{{body}}}
+</body>
+
+
+</html>