Initial Commit

2018-09-13 21:15:47 +02:00
commit 09f406cba7
84 changed files with 6920 additions and 0 deletions
@@ -0,0 +1,16 @@
+<lasso-page package-path="../browser.json"/>
+
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8"/>
+    <title>${input.title ? `${input.title} - Aite RP` : "Aite RP"}</title>
+    <lasso-head/>
+  </head>
+  <body style={backgroundColor: "black"} class=("theme-" + input.site)>
+    <layout-navbar site=input.site />
+    <include(input.body) />
+    <lasso-body/>
+    <browser-refresh/>
+  </body>
+</html>
@@ -0,0 +1,13 @@
+import moment from "moment"
+
+<content-list>
+  <content-list-item for(log in input.logs)
+                     key=log.shortId
+                     icon="L"
+                     link=("/logs/" + log.id)
+                     description=log.description
+                     name=(log.title || (log.channelName + " - " + moment(log.date).format("MMMM D, YYYY")))
+                     tags=[{kind: "Location", name: log.channelName}, {kind: "Event", name: log.event}]
+                     enableAllTags=true
+                     createdDate=log.date />
+</content-list>
@@ -0,0 +1,10 @@
+<menu user=input.user>
+  <menu-header>Logs</menu-header>
+  <menu-link selected=input.selected.index icon="L" href="/logs/">All</menu-link>
+  <menu-gap />
+  <menu-header>Filters</menu-header>
+  <menu-gap />
+  <menu-header>Data</menu-header>
+  <menu-link selected=input.selected.channels icon="C" href="/logs/characters/">Characters</menu-link>
+  <menu-link selected=input.selected.channels icon="#" href="/logs/channels">Channels</menu-link>
+</menu>
@@ -0,0 +1,15 @@
+const {logHeaderApi} = require("../../../../../rpdata/api/LogHeader")
+
+module.exports = class {
+  onCreate(input) {
+    this.state = {
+      logs: input.logs
+    }
+  }
+
+  onMount() {
+    logHeaderApi.list({limit: 0}).then(logs => {
+      this.state.logs = logs
+    })
+  }
+}
@@ -0,0 +1,5 @@
+<background src="/assets/images/bg.png" opacity=0.25 />
+<logs-menu key="menu" selected=(input.selected || {}) user=input.user />
+<main>
+  <logs-list logs=state.logs />
+</main>
@@ -0,0 +1,6 @@
+<include("../layout", {title: "Logs", site: "logs"})>
+  <@body>
+    <!-- Page needed to get component.js functionality -->
+    <page logs=input.logs user=input.user selected=input.selected />
+  </@body>
+</include>
@@ -0,0 +1,52 @@
+const moment = require("moment")
+
+module.exports = class {
+  onCreate({kind, weak, value, updated}) {
+    this.state = {text: null, color: "color-menu", href: null, tooltip: null}
+
+    if (value == null || value == "") {
+      return
+    }
+
+    switch (kind) {
+      case "date": {
+        const m = moment(value)
+        if (m.year() < 2) {
+          break
+        }
+
+        if (!weak) {
+          this.state.tooltip = `See all stories set during ${m.format("MMMM YYYY")}`
+          this.state.href = `/story/by-month/${m.format("YYYY-MM")}/`
+        }
+
+        const dateStr = m.format("MMM D, YYYY")
+
+        this.state.text = dateStr
+
+        if (updated != null && Date.parse(updated) > Date.parse(value)) {
+          const m2 = moment(updated)
+          this.state.tooltip = "Originally posted: " + dateStr
+          this.state.text = m2.format("MMM D, YYYY") + " *"
+        }
+
+        break
+      }
+  
+      case "author": {
+        this.state.text = value
+        this.state.tooltip = "See all stories by " + value
+        this.state.href = `/story/by-author/${value}/`
+
+        break
+      }
+  
+      default: {
+        this.state.color = "color-menu"
+        this.state.text = value
+
+        break
+      }
+    }
+  }
+}
@@ -0,0 +1,6 @@
+<if(state.text != null && state.text != "")>
+  <div class=["chapter-meta", input.kind, state.color, input.weak ? "weak" : null] title=state.tooltip>
+    <a if(state.href != null) href=state.href>${state.text}</a>
+    <span else>${state.text}</span>
+  </div>
+</if>
@@ -0,0 +1,20 @@
+div.chapter-meta {
+  display: inline-block;
+  padding: 0;
+  padding-right: 1em;
+  margin: 0;
+
+  user-select: none;
+
+  a {
+    color: inherit;
+    border-bottom: 0.25px dotted;
+  }
+  a:hover {
+    border-bottom: 0.5px solid;    
+  }
+}
+
+div.chapter-meta.weak {
+  opacity: 0.5;
+}
@@ -0,0 +1,5 @@
+module.exports = class {
+  onCreate(input) {
+    this.state = Object.assign({}, input.chapter)
+  }
+}
@@ -0,0 +1,10 @@
+<div class="story-chapter">
+  <a class="anchor" id=state.id />
+  <div class="metadata">
+    <chapter-meta kind="title" value=state.title />
+    <chapter-meta kind="date" value=state.fictionalDate />
+    <chapter-meta weak kind="date" value=state.createdDate />
+    <chapter-meta weak kind="author" value=state.author />
+  </div>
+  <markdown class="chapter-content" source=state.source />
+</div>
@@ -0,0 +1,14 @@
+.story-chapter {
+  padding-bottom: 1em;
+
+  .metadata {
+    padding: 0;
+    margin: 0;
+  }
+
+  a.anchor {
+    display: block;
+    position: relative;
+    top: -8em;
+  }
+}
@@ -0,0 +1,8 @@
+<story-content-menu story=input.story selected=(input.selected || {}) user=input.user />
+<main>
+  <div class="story-content">
+    <h1 class="color-primary">${input.story.name}</h1>
+    <story-tags tags=input.story.tags />
+    <chapter for(chapter in input.story.chapters) key=chapter.id chapter=chapter />
+  </div>
+</main>
@@ -0,0 +1,9 @@
+.story-content {
+  width: 90%;
+  max-width: 75ch;
+  margin: auto;
+
+  h1 {
+    text-align: center;
+  }
+}
@@ -0,0 +1,40 @@
+const moment = require("moment")
+
+module.exports = class {
+  onCreate(input) {
+    this.state = {
+      chapterTitles: {},
+      fdateLink: "",
+      fdate: "",
+      selectedChapter: ""
+    }
+  }
+
+  onMount() {
+    this.state.selectedChapter = (window.location.hash||"#").slice(1)
+  }
+
+  onInput(input) {
+    if (input.story.fictionalDate && input.story.fictionalDate.getUTCFullYear() > 10) {
+      const fdate = input.story.fictionalDate
+      
+      this.state.fdateLink = `/story/by-month/${moment(fdate).format("YYYY-MM")}`
+      this.state.fdate = moment(fdate).format("MMM D, YYYY")
+    }
+
+    for (const chapter of input.story.chapters) {
+      let title = "Chapter " + input.story.chapters.indexOf(chapter) + 1
+      if (chapter.title) {
+        title = chapter.title
+      } else if (chapter.fictionalDate && chapter.fictionalDate.getUTCFullYear() > 1) {
+        title = moment(chapter.fictionalDate).format("MMM D, YYYY")
+      }
+
+      this.state.chapterTitles[chapter.id] = title
+    }
+  }
+
+  selectChapter(id) {
+    this.state.selectedChapter = id
+  }
+}
@@ -0,0 +1,9 @@
+<menu user=input.user>
+  <if(input.story.chapters.length > 1)>
+    <menu-header>${input.story.name}</menu-header>
+    <for(chapter in input.story.chapters | status-var=loop)>
+      <menu-link on-click("selectChapter", chapter.id) href=("#" + chapter.id) selected=(state.selectedChapter === chapter.id) icon=(loop.getIndex()+1)>${state.chapterTitles[chapter.id]}</menu-link>
+    </for>
+    <menu-gap />
+  </if>
+</menu>
@@ -0,0 +1,3 @@
+<div class="story-tags">
+  <a for(tag in input.tags) href=("/story/by-tag/" + tag.kind + "/" + encodeURIComponent(tag.name)) class=["tag", "color-tag-" + tag.kind.toLowerCase()]>${tag.name}</a>
+</div>
@@ -0,0 +1,20 @@
+div.story-tags {
+  text-align: center;
+  margin-bottom: 1em;
+  margin-top: -1em;
+
+  a.tag {
+    display: inline-block;
+    margin: 0.5em 0.5ch;
+    padding: 0.0625em 0.5ch;
+
+    outline: 1px solid;
+    opacity: 0.75;
+    
+    user-select: none;
+  }
+  a.tag:hover {
+    opacity: 1;
+    cursor: pointer;
+  }
+}
@@ -0,0 +1,6 @@
+<include("../layout", {title: "Stories", site: "story"})>
+  <@body>
+    <background src="/assets/images/bg.png" opacity=0.25 />
+    <page story=input.story user=input.user selected=input.selected />
+  </@body>
+</include>
@@ -0,0 +1,11 @@
+<content-list>
+  <content-list-item for(story in input.stories)
+                     icon=story.category.charAt(0)
+                     link=("/story/" + story.id)
+                     name=story.name
+                     createdDate=story.createdDate
+                     fictionalDate=story.fictionalDate
+                     updatedDate=story.updatedDate
+                     tags=story.tags
+                     author=story.author />
+</content-list>
@@ -0,0 +1,11 @@
+<menu user=input.user>
+  <menu-header>Story</menu-header>
+  <menu-link selected=input.selected.index icon="S" href="/story/">Stories</menu-link>
+  <menu-gap />
+  <menu-header>Categories</menu-header>
+  <menu-link for(category in (input.categories||[])) selected=(input.selected.category == category.name) href=`/story/by-category/${category.name}` icon=category.name.charAt(0)>${category.name}</menu-link>
+  <menu-gap />
+  <menu-header>Tags</menu-header>
+  <menu-link for(tag in (input.menuTags||[])) selected=(input.selected.tag === `${tag.kind}:${tag.name}`) href=`/story/by-tag/${tag.kind}/${tag.name}` textClass=`color-tag-${tag.kind.toLowerCase()}` icon=tag.kind.charAt(0)>${tag.name}</menu-link>
+  <menu-link selected=input.selected.tags icon="T" href="/story/tag-list/">Tags</menu-link>
+</menu>
@@ -0,0 +1,9 @@
+<include("../layout", {title: "Stories", site: "story"})>
+  <@body>
+    <background src="/assets/images/bg.png" opacity=0.25 />
+    <story-menu categories=input.categories selected=(input.selected || {}) menuTags=input.menuTags user=input.user />
+    <main>
+      <story-list stories=input.stories />
+    </main>
+  </@body>
+</include>
@@ -0,0 +1,8 @@
+<include("../layout", {title: "Stories", site: "story"})>
+  <@body>
+    <background src="/assets/images/bg.png" opacity=0.25 />
+    <story-menu categories=input.categories selected=(input.selected || {}) menuTags=input.menuTags user=input.user />
+    <main>
+    </main>
+  </@body>
+</include>