story-content: Fixed fictional dates not being UTC in chapter title fallback.

Dockerfile

@@ -26,6 +26,9 @@ RUN rm -rf .static
 RUN rm -rf .cache
 RUN rm -rf .git
 
+# Build templates (when that works)
+# RUN node build.js
+
 ## 2. Regroup
 FROM node:10-alpine
 RUN apk add --no-cache ca-certificates

build.js

@@ -0,0 +1,53 @@
+const build = require("./builder")
+
+// Setup global environment
+require("marko/node-require").install()
+require("es6-promise").polyfill()
+
+// Configure lasso
+require("lasso").configure({
+  plugins: [
+    "lasso-marko",
+    "lasso-less",
+  ],
+  outputDir: "./.static",
+  bundlingEnabled: true,
+  minify: true,
+  fingerprintsEnabled: true,
+
+  require: {
+    builtins: {
+      fs: require.resolve("empty-module"),
+    },
+
+    transforms: [
+      {
+        transform: "lasso-babel-transform",
+        config: {
+          extensions: [".js", ".es6"], // Enabled file extensions. Default: [".js", ".es6"]
+          babelOptions: {
+            presets: [ "es2015" ]
+          }
+        }
+      }
+    ]
+  }
+})
+
+// Render templates
+async function buildAll() {
+  await build("./marko/page/story/list.marko")
+  await build("./marko/page/story/tag-list.marko", {tags: []})
+  await build("./marko/page/logs/list.marko")
+  await build("./marko/page/data/channels.marko", {channels: [], user: {}})
+  await build("./marko/page/data/characters.marko", {characters: [], user: {}})
+  await build("./marko/page/story-content/view.marko", {story: {chapters: []}})
+  await build("./marko/page/logs-content/view.marko", {log: {posts: [], channel: {}}})
+}
+
+buildAll().then(() => {
+  console.log("Done!")
+}).catch(err => {
+  console.error(err)
+  process.exit(1)
+})

builder.js

@@ -0,0 +1,15 @@
+module.exports = function build(path, data) {
+  console.log("Building", path)
+
+  return new Promise((resolve, reject) => {
+    const render = require(path).render(data)
+    render.once("error", err => reject)
+
+    const interval = setInterval(() => {
+      if (render._remaining === 0) {
+        clearInterval(interval)
+        resolve()
+      }
+    }, 500)
+  })
+}

config.js

@@ -5,6 +5,7 @@ const config = {
   playgroundEndpoint: "http://127.0.0.1:17000/playground",
   port: 8080,
   root: "http://localhost:8080",
+  trustedProxy: null,
   auth0: {
     secret: "INVALID_SECRET",
     clientId: "",

marko/components/content-list-item/components/item-meta/component.js

@@ -1,7 +1,7 @@
 const moment = require("moment")
 
 module.exports = class {
-  onCreate({kind, value, updated}) {
+  onCreate({kind, value, updated, utc}) {
     this.state = {text: null, color: "color-menu", tooltip: null}
 
     if (value == null || value == "") {
@@ -10,7 +10,7 @@ module.exports = class {
 
     switch (kind) {
       case "date": {
-        const m = moment(value)
+        const m = utc ? moment.utc(value) : moment(value)
         if (m.year() < 2) {
           break
         }

marko/components/content-list-item/index.marko

@@ -15,7 +15,7 @@
     </div>
     <div class="meta">
       <item-meta kind="date" value=input.createdDate updated=input.updatedDate />
-      <item-meta kind="date" value=input.fictionalDate />
+      <item-meta kind="date" value=input.fictionalDate utc=true />
       <item-tag-list tags=input.tags enableAllTags=input.enableAllTags />
       <item-meta kind="author" value=input.author />
     </div>

marko/components/modal/style.less

@@ -7,7 +7,7 @@ div.overlay {
   padding-top: 1em;
   z-index: 999;
 
-  background-color: rgba(0, 0, 0, 0.90);
+  background-color: rgba(0, 0, 0, 0.95);
 
   overflow-y: scroll;
 

marko/page/logs-content/components/page/index.marko

@@ -16,12 +16,13 @@
         so you can still read it (or back it up) before leaving the page.
       </p>
     </annotation>
-    <post for(post in state.log.posts)
+    <post for(post in state.log.posts | status-var=loop)
           key=post.id
           on-move("movePost", post)
           on-remove("removePost", post)
           on-edited("postEdited")
           user=input.user
+          prev=(state.log.posts[loop.getIndex() - 1] || {})
           post=post
           characters=state.log.characters
           last=(post.position === state.log.posts.length)

marko/page/logs-content/components/page/style.less

@@ -1,6 +1,6 @@
 div.logs-content {
   width: 90%;
-  max-width: 75ch;
+  max-width: 95ch;
   margin: auto;
 
   div.header {

marko/page/logs-content/components/post/index.marko

@@ -1,4 +1,6 @@
-<div if(!state.removed) class=["post", component.kindClass("post-type")]>
+$ const multipart = (input.post.nick == input.prev.nick && input.prev.multipart !== false);
+
+<div if(!state.removed) class=["post", component.kindClass("post-type"), multipart ? "multipart" : null]>
   <div class="post-meta-row">
     <div class="options color-menu">
       <if-permitted user=input.user permission="post.move">
@@ -24,7 +26,8 @@
     <markdown class="post-content post-scene" source=state.text />
   </div>
   <div if(input.post.kind === "action") class="post-body color-text">
-    <markdown class="post-content post-action" source=(state.shortName + state.nameSuffix + " " + state.text) />
+    $ const prefix = (!multipart ? state.shortName + state.nameSuffix + " " : "");
+    <markdown class="post-content post-action" source=(prefix + state.text) />
   </div>
    <div if(input.post.kind === "text") class="post-body color-text">
     <markdown class="post-content post-text" source=state.text />

marko/page/logs-content/components/post/style.less

@@ -10,7 +10,7 @@ div.post {
     position: absolute;
     text-align: right;
     width: calc(100% - 35.5ch);
-    max-width: 75ch;
+    max-width: 95ch;
 
     a {
       display: inline-block;
@@ -54,3 +54,13 @@ div.post {
     padding-top: 0;
   }
 }
+
+div.post.multipart {
+  margin-top: -1.25em;
+
+  div.post-meta {
+    span {
+      display: none;
+    }
+  }
+}

marko/page/logs-content/view.marko

@@ -1,6 +1,6 @@
 <include("../layout", {title: "Logs", site: "logs"})>
   <@body>
-    <background src="/assets/images/bg.png" opacity=0.25 />
+    <background src="/assets/images/bg.png" opacity=0.125 />
     <page log=input.log user=input.user selected=input.selected />
   </@body>
 </include>

marko/page/story-content/components/chapter-meta/component.js

@@ -11,7 +11,7 @@ module.exports = class {
     }
   }
 
-  updateState({kind, weak, value, updated}) {
+  updateState({kind, weak, value, utc, updated}) {
     this.state = {text: null, color: "color-menu", href: null, tooltip: null}
 
     if (value == null || value == "") {
@@ -20,7 +20,7 @@ module.exports = class {
 
     switch (kind) {
       case "date": {
-        const m = moment(value)
+        const m = utc ? moment.utc(value) : moment(value)
         if (m.year() < 2) {
           break
         }

marko/page/story-content/components/chapter/index.marko

@@ -12,7 +12,7 @@ import moment from "moment"
       </if-permitted>
     </div>
     <chapter-meta kind="title" value=input.chapter.title />
-    <chapter-meta kind="date" value=input.chapter.fictionalDate />
+    <chapter-meta kind="date" utc=true value=input.chapter.fictionalDate />
     <chapter-meta weak kind="date" value=input.chapter.createdDate />
     <chapter-meta weak kind="author" value=input.chapter.author />
   </div>

marko/page/story-content/components/chapter/style.less

@@ -16,7 +16,7 @@
     position: absolute;
     text-align: right;
     width: calc(100% - 35.5ch);
-    max-width: 75ch;
+    max-width: 95ch;
 
     pointer-events: none;
 

marko/page/story-content/components/page/style.less

@@ -1,6 +1,6 @@
 .story-content {
   width: 90%;
-  max-width: 75ch;
+  max-width: 95ch;
   margin: auto;
 
   h1 {

marko/page/story-content/components/story-content-menu/component.js

@@ -16,7 +16,7 @@ module.exports = class {
     if (chapter.title) {
       title = chapter.title
     } else if (chapter.fictionalDate && chapter.fictionalDate.getUTCFullYear() > 1) {
-      title = moment(chapter.fictionalDate).format("MMM D, YYYY")
+      title = moment.utc(chapter.fictionalDate).format("MMM D, YYYY")
     }
 
     return title

marko/page/story-content/view.marko

@@ -1,6 +1,6 @@
 <include("../layout", {title: "Stories", site: "story"})>
   <@body>
-    <background src="/assets/images/bg.png" opacity=0.25 />
+    <background src="/assets/images/bg.png" opacity=0.125 />
     <page story=input.story categories=input.categories user=input.user selected=input.selected />
   </@body>
 </include>

marko/page/story/components/tags-page/style.less

@@ -9,7 +9,7 @@ div.tags-page {
   }
 
   div.groups {
-    column-count: 4;
+    column-count: 5;
     padding: 0.5em;
 
     div.group {
@@ -43,7 +43,15 @@ div.tags-page {
   }
 }
 
-@media screen and (max-width: 1900px) {
+@media screen and (max-width: 2000px) {
+  div.tags-page {
+    div.groups {
+      column-count: 4;
+    }
+  }
+}
+
+@media screen and (max-width: 1400px) {
   div.tags-page {
     div.groups {
       column-count: 3;
@@ -51,7 +59,7 @@ div.tags-page {
   }
 }
 
-@media screen and (max-width: 1300px) {
+@media screen and (max-width: 1000px) {
   div.tags-page {
     div.groups {
       column-count: 2;
@@ -59,7 +67,7 @@ div.tags-page {
   }
 }
 
-@media screen and (max-width: 1000px) {
+@media screen and (max-width: 900px) {
   div.tags-page {
     div.groups {
       column-count: 1;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gisle/rpdata-frontend",
-  "version": "1.0.0",
+  "version": "1.0.7",
   "description": "RPData (www.aiterp.net) frontend/proxy",
   "main": "./index.js",
   "scripts": {

routes/auth.js

@@ -17,7 +17,7 @@ router.get("/login", saveReferer, passport.authenticate("auth0", {scope: "openid
   res.redirect("/")
 })
 
-router.get("/callback", passport.authenticate("auth0", { failureRedirect: "/auth/login" }), (req, res) => {
+router.get("/callback", passport.authenticate("auth0"), (req, res) => {
   if (req.user == null) {
     throw new Error("user null");
   }

server.js

@@ -1,16 +1,19 @@
 // Setup global environment
 require("marko/node-require").install()
-require("marko/express")
 require("es6-promise").polyfill()
 
 // Load server config
 const config = require("./config")
 
+// Load utilities
+const build = require("./builder")
+
 // Express depedencies
 const express = require("express")
 const proxy = require("express-http-proxy")
 const lasso = require("lasso")
 const lassoMiddleware = require("lasso/middleware")
+const markoExpress = require("marko/express")
 const bodyParser = require("body-parser")
 
 // Load middleware
@@ -51,7 +54,13 @@ lasso.configure({
   }
 })
 
+// Set trusted proxy
+if (config.trustedProxy != null) {
+  app.set('trust proxy', config.trustedProxy)
+}
+
 // Apply middleware
+app.use(markoExpress())
 app.use(session)
 app.use(passport.initialize())
 app.use(passport.session())
@@ -79,7 +88,7 @@ app.use("/story/by-author/", require("./routes/story/by-author"))
 app.use("/story/tag-list/", require("./routes/story/tag-list"))
 app.use("/story/:id(S[0-9a-z]{15})/", require("./routes/story-content"))
 app.use("/logs/", require("./routes/logs"))
-app.use("/logs/:id([0-9]{4}-[0-1][0-9]-[0-3][0-9]_[0-9]{9}_[A-Za-z\,\']{2,})/", require("./routes/logs-content"))
+app.use("/logs/:id([0-9]{4}-[0-1][0-9]-[0-3][0-9]_[0-9]{9}_[A-Za-z0-9\,\']{2,})/", require("./routes/logs-content"))
 app.use("/logs/:id(L[0-9]{0,7})/", require("./routes/logs-content"))
 app.use("/data/", require("./routes/data"))
 app.use("/data/characters/", require("./routes/data/characters"))
@@ -90,24 +99,33 @@ app.get("/", function(req, res) {
   res.redirect("/story/")
 })
 
-// Render common templates
-require("./marko/page/story/list.marko").render()
-require("./marko/page/story/tag-list.marko").render({tags: []})
-require("./marko/page/logs/list.marko").render()
-require("./marko/page/data/channels.marko").render({channels: [], user: {}})
-require("./marko/page/data/characters.marko").render({characters: [], user: {}})
-require("./marko/page/story-content/view.marko").render({story: {chapters: []}})
-require("./marko/page/logs-content/view.marko").render({log: {posts: [], channel: {}}})
-
-// Start server
-app.listen(config.port, function() {
-  console.log("Server started: http://localhost:" + config.port + "/")
-
-  if (process.send) {
-    setTimeout(() => process.send("online"), 500)
+async function main() {
+  // Build templates
+  if (isProduction) {
+    await build("./marko/page/story/list.marko")
+    await build("./marko/page/story/tag-list.marko", {tags: []})
+    await build("./marko/page/logs/list.marko")
+    await build("./marko/page/data/channels.marko", {channels: [], user: {}})
+    await build("./marko/page/data/characters.marko", {characters: [], user: {}})
+    await build("./marko/page/story-content/view.marko", {story: {chapters: []}})
+    await build("./marko/page/logs-content/view.marko", {log: {posts: [], channel: {}}})
   }
-})
+
+  // Start server
+  app.listen(config.port, function() {
+    console.log("Server started: http://localhost:" + config.port + "/")
+
+    if (process.send) {
+      setTimeout(() => process.send("online"), 100)
+    }
+  })
+}
 
 // Handle shutdown signals (Docker needs this to shutdown quickly)
 process.on('SIGINT', () => process.exit(0))
 process.on('SIGTERM', () => process.exit(0))
+
+main().catch(err => {
+  console.error(err)
+  process.exit(1)
+})