Allow relations between details entries

bin/dump-translations.js

@@ -2,26 +2,22 @@
 const fs = require('fs')
 
 const events = JSON.parse(fs.readFileSync('./src/store/events.json', 'utf8'))
+fs.mkdirSync(`./translations/en/events`, { recursive: true })
 events.forEach((event) => {
   const path = `./translations/en/events/${event.id}.md`
 
   if (fs.existsSync(path)) {
     return
   }
 
-  let data = `# ${event.id}\nBlurb\n`
-
-  if (event.details) {
-    data += '\n## Details\nDetails\n'
-  }
-
-  fs.writeFileSync(path, data)
+  fs.writeFileSync(path, `# ${event.id}\nBlurb\n\n## Details\nDetails\n`)
 
   console.log(`Created new translation file for event ${event.id}`)
 })
 
 function dump (type) {
   const entries = JSON.parse(fs.readFileSync(`./src/store/${type}.json`, 'utf8'))
+  fs.mkdirSync(`./translations/en/${type}`, { recursive: true })
   entries.forEach((entry) => {
     const path = `./translations/en/${type}/${entry.id}.md`
 

src/App.vue

@@ -59,7 +59,7 @@ export default {
         return
       }
 
-      if (this.$route.name === 'event' && this.$route.params.id === newEvent.id) {
+      if (this.$route.name === 'events' && this.$route.params.id === newEvent.id) {
         return
       }
 
@@ -81,7 +81,7 @@ export default {
 </script>
 
 <style lang="scss">
-@import url('https://fonts.googleapis.com/css2?family=Lora:wght@400;600&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&display=swap');
 
 body {
   margin: 0;
@@ -93,7 +93,7 @@ body {
 }
 
 #app {
-  font-family: 'Lora', serif;
+  font-family: 'Libre Baskerville', serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   position: absolute;
@@ -118,7 +118,7 @@ body {
 }
 
 button {
-  font-family: 'Lora', serif;
+  font-family: 'Libre Baskerville', serif;
 }
 
 .loading__fade {

src/components/EventCard.vue

@@ -2,7 +2,7 @@
   <div
     :class="[
       'event-card',
-      { 'event-card--image': event.image !== undefined, 'event-card--details-visible': $route.name === 'event' }
+      { 'event-card--image': event.image !== undefined, 'event-card--details-visible': $route.name === 'events' }
     ]"
   >
     <div class="event-card__content">
@@ -19,7 +19,7 @@
         :inline="true"
         class="event-card__text"
       >
-        <router-link v-if="event.details === true" :to="`/${$route.params.locale}/events/${event.id}`" class="event-card__read-more">
+        <router-link :to="`/${$route.params.locale}/events/${event.id}`" class="event-card__read-more">
           Read more
         </router-link>
       </Markdown>

src/components/Scrubber.vue

@@ -417,7 +417,7 @@ export default {
       font-size: 1em;
       padding: 4px 0;
       margin: 0;
-      font-family: 'Lora', serif;
+      font-family: 'Libre Baskerville', serif;
       cursor: pointer;
       outline: none;
       overflow: hidden;

src/components/editor/Editor.vue

@@ -862,7 +862,7 @@ export default {
 </script>
 
 <style lang="scss">
-@import url('https://fonts.googleapis.com/css2?family=Lora:wght@400;600&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&display=swap');
 
 .editor {
   display: flex;

src/components/editor/EventPreview.vue

@@ -90,7 +90,7 @@ export default {
   color: #242629;
   transition: all 0.2s ease-in-out;
   opacity: 1;
-  font-family: 'Lora', serif;
+  font-family: 'Libre Baskerville', serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 

src/components/editor/EventProperties.vue

@@ -23,11 +23,6 @@
 
       <label for="event-properties__id">ID</label>
       <input id="event-properties__id" v-model="event.id" type="text">
-      <label for="event-properties__has-details">
-        <input id="event-properties__has-details" v-model="event.details" type="checkbox">
-
-        Has Details
-      </label>
 
       <div class="event-properties__coordinates">
         <h3>

src/components/map/Map.vue

@@ -45,7 +45,7 @@ export default {
   },
   computed: {
     activeLocation () {
-      return this.transitions && this.$route.name === 'location' ? this.$store.state.mappings.location[this.$route.params.id] : null
+      return this.transitions && this.$route.name === 'location' ? this.$store.state.mappings.locations[this.$route.params.id] : null
     },
     activeEvent () {
       return this.transitions ? this.$store.state.activeEvent : null

src/routes.js

@@ -7,23 +7,19 @@ Vue.use(VueRouter)
 
 const detailRoutes = [
   {
-    name: 'event',
-    path: 'events',
+    name: 'events',
     specialAction: event => store.commit('selectEvent', event)
   },
   {
-    name: 'location',
-    path: 'locations',
+    name: 'locations',
     specialAction: () => store.commit('unselectEvent')
   },
   {
-    name: 'character',
-    path: 'characters',
+    name: 'characters',
     specialAction: () => store.commit('unselectEvent')
   },
   {
     name: 'misc',
-    path: 'misc',
     specialAction: () => store.commit('unselectEvent')
   }
 ]
@@ -35,7 +31,7 @@ const router = new VueRouter({
       path: '/:locale',
       children: detailRoutes.map(({ name, path, specialAction }) => ({
         name,
-        path: `${path}/:id`,
+        path: `${name}/:id`,
         meta: {
           details: true
         },

src/store/characters.json

@@ -1 +1,6 @@
-[ ]
+[
+    {
+        "id": "taravangian",
+        "image": "taravangian.jpg"
+    }
+]

src/store/events.json

@@ -34,7 +34,7 @@
         "date": [
             -6000
         ],
-        "tags": [],
+        "tags": [ ],
         "coordinates": {
             "x": 486.1,
             "y": 317.6
@@ -122,7 +122,7 @@
         "date": [
             1139
         ],
-        "tags": [],
+        "tags": [ ],
         "coordinates": {
             "x": 720.9,
             "y": 276.8
@@ -133,7 +133,7 @@
         "date": [
             1141
         ],
-        "tags": [],
+        "tags": [ ],
         "coordinates": {
             "x": 727,
             "y": 304.8
@@ -144,7 +144,7 @@
         "date": [
             1145
         ],
-        "tags": [],
+        "tags": [ ],
         "coordinates": {
             "x": 738.7,
             "y": 250.3
@@ -155,12 +155,11 @@
         "date": [
             1150
         ],
-        "tags": [],
+        "tags": [ ],
         "coordinates": {
             "x": 738.7,
             "y": 250.3
-        },
-        "details": true
+        }
     },
     {
         "id": "kaladin-birth",
@@ -203,7 +202,7 @@
         "date": [
             1162
         ],
-        "tags": [],
+        "tags": [ ],
         "coordinates": {
             "x": 734.7,
             "y": 196.8
@@ -229,7 +228,7 @@
             1166,
             3
         ],
-        "tags": [],
+        "tags": [ ],
         "coordinates": {
             "x": 293.2,
             "y": 263.9
@@ -241,7 +240,7 @@
             1166,
             8
         ],
-        "tags": [],
+        "tags": [ ],
         "coordinates": {
             "x": 754.2,
             "y": 352.1
@@ -253,7 +252,7 @@
             1166,
             10
         ],
-        "tags": [],
+        "tags": [ ],
         "coordinates": {
             "x": 734.7,
             "y": 196.8
@@ -265,7 +264,7 @@
             1167,
             9
         ],
-        "tags": [],
+        "tags": [ ],
         "coordinates": {
             "x": 627.5,
             "y": 256.1
@@ -277,7 +276,7 @@
             1167,
             10
         ],
-        "tags": [],
+        "tags": [ ],
         "coordinates": {
             "x": 738.6,
             "y": 250.3
@@ -289,7 +288,7 @@
             1168,
             7
         ],
-        "tags": [],
+        "tags": [ ],
         "coordinates": {
             "x": 484.9,
             "y": 332.6
@@ -301,7 +300,7 @@
             1168,
             10
         ],
-        "tags": [],
+        "tags": [ ],
         "coordinates": {
             "x": 734.7,
             "y": 196.8
@@ -320,7 +319,8 @@
         "coordinates": {
             "x": 484.5,
             "y": 332.4
-        }
+        },
+        "related": [ "characters/taravangian", "locations/valley" ]
     },
     {
         "id": "tien-death",
@@ -358,7 +358,7 @@
             1172,
             9
         ],
-        "tags": [],
+        "tags": [ ],
         "coordinates": {
             "x": 704.6,
             "y": 208.8
@@ -370,7 +370,7 @@
             1172,
             10
         ],
-        "tags": [],
+        "tags": [ ],
         "coordinates": {
             "x": 627.5,
             "y": 256.1
@@ -396,7 +396,7 @@
             1173,
             7
         ],
-        "tags": [],
+        "tags": [ ],
         "coordinates": {
             "x": 589.2,
             "y": 286.3

src/store/index.js

@@ -67,17 +67,17 @@ events.forEach((event) => {
 
 const mappings = {}
 
-mappings.event = events.reduce((acc, event) => ({
+mappings.events = events.reduce((acc, event) => ({
   ...acc,
   [event.id]: { type: 'events', ...event }
 }), {})
 
-mappings.location = baseLocations.reduce((acc, location) => ({
+mappings.locations = baseLocations.reduce((acc, location) => ({
   ...acc,
   [location.id]: { type: 'locations', ...location }
 }), {})
 
-mappings.character = baseCharacters.reduce((acc, character) => ({
+mappings.characters = baseCharacters.reduce((acc, character) => ({
   ...acc,
   [character.id]: { type: 'characters', ...character }
 }), {})
@@ -87,7 +87,7 @@ mappings.misc = baseMisc.reduce((acc, entry) => ({
   [entry.id]: { type: 'misc', ...entry }
 }), {})
 
-const locationsByMapId = Object.values(mappings.location).filter(location => location.mapId !== undefined).reduce((acc, location) => ({
+const locationsByMapId = Object.values(mappings.locations).filter(location => location.mapId !== undefined).reduce((acc, location) => ({
   ...acc,
   [location.mapId]: location
 }), {})

translations/en/characters/taravangian.md

@@ -0,0 +1,2 @@
+# taravangian
+Details

translations/en/locations/valley.md

@@ -1,2 +1,2 @@
-# Valley
+# The Valley
 Details