topics submenu nnow accessible on stream hover, toValidID funcntion regex expression tweaked to catch parantheses

front/src/App.vue

@@ -169,6 +169,7 @@ export default {
 <style>
 :root {
   --back: white;
+  --pink: rgb(255, 133, 218);
 }
 
 html,

front/src/components/Content/Chapter.vue

@@ -22,9 +22,6 @@ export default {
   components: {
     Message,
   },
-  data() {
-    return {};
-  },
   props: ["topic", "show_message_data"],
   computed: {
     messagesToShow() {

front/src/components/Content/index.vue

@@ -7,28 +7,12 @@
       v-bind="$mdOpts" 
     >
     </vue3-markdown-it>
-    <ul class="index">
+    <Toc 
-      <li v-for="topic in sortedTopics" :key="topic.title">
+      :sortedTopics="sortedTopics"
-        <router-link
+    />
-          :to="`#${toValidID(topic.title)}`"
+    <Authors 
-          @click.stop="goTo(`#${toValidID(topic.title)}`)"
+      :authors="authors"
-        >
+    />
-          {{ topic.title }}
-        </router-link>
-      </li>
-    </ul>
-    <p class="authors">
-      <span 
-        class="author"
-        v-for="author in authors"
-        :key="author"
-      >
-        <span>{{ author }}</span>
-        <span v-if="isLast(author, authors)">.</span>
-        <span v-else-if="isBeforeLast(author, authors)"> and </span>
-        <span v-else>, </span>
-      </span>
-    </p>
     <Chapter
       v-for="topic in sortedTopics"
       :key="topic.title"
@@ -42,20 +26,23 @@
 
 <script>
 import { mapGetters, mapState } from "vuex";
-import Chapter from "./Chapter.vue";
+import Authors from './Authors';
+import Chapter from "./Chapter";
+import Toc from './Toc';
 
 export default {
   name: "Content",
   components: {
     Chapter,
+    Toc,
+    Authors,
   },
   props: ["print", "show_message_data"],
   computed: {
     ...mapState(["currentStream", "streams"]),
     ...mapGetters(["sortedTopics"]),
-    
     foundStream() {
-      return this.streams.find((s) => s.name == this.currentStream.name)
+      return this.streams.find(s => s.name == this.currentStream.name)
     },
     title() {
       return this.foundStream 
@@ -87,25 +74,13 @@ export default {
     toValidID(string) {
       return encodeURIComponent("ch-" + string)
         .toLowerCase()
-        .replace(/\.|%[0-9a-z]{2}/gi, "");
+        .replace(/\.|%[0-9a-z]{2}/gi, "")
+        .replace(/\(|\)/gi, "");
     },
-    goTo(id) {
-      document.querySelector(`${id}`).scrollIntoView({
-        behavior: "smooth",
-      });
-    },
-    isLast: (item, array) => (
-      array.indexOf(item) === array.length - 1
-    ),
-    isBeforeLast: (item, array) => (
-      array.indexOf(item) === array.length - 2
-    ),
   },
 };
 </script>
 
 <style scoped>
-.authors {
+
-  page-break-after: always;
-}
 </style>

front/src/components/Nav.vue

@@ -1,74 +0,0 @@
-.<template>
-  <nav>
-  
-    <ul class="collections">
-      <li 
-        v-for="collection in collections"
-        :key="collection.slug"  
-      > 
-        <router-link :to="collection.slug">
-          {{ collection.name }} 
-        </router-link>
-      </li>
-    </ul>
-    
-    <ul class="singles">
-      <li 
-        v-for="single in singles"
-        :key="single.slug"  
-      > 
-        <router-link :to="single.slug">
-          {{ single.name }} 
-        </router-link>
-      </li>
-    </ul>
-  
-  </nav>
-</template>
-
-<script>
-export default {
-  name: 'Nav',
-  data() {
-    return {
-      collections: [
-        {
-          name: 'resources',
-          slug: 'resources'
-        },
-        {
-          name: 'artworks',
-          slug: 'artworks'
-        },
-      ],
-      singles: [
-        {
-          name: 'about',
-          slug: 'about'
-        },
-        {
-          name: 'contact',
-          slug: 'contact'
-        },
-      ]
-    }
-  }
-}
-</script>
-
-<style>
-
-nav {
-  margin: 1em;
-}
-
-ul {
-  padding: 0;
-}
-
-li {
-  list-style: none;
-  padding: 0;
-}
-
-</style>

front/src/components/SemanticList.vue

@@ -1,65 +0,0 @@
-<template>
-  <div class="semanticList body">
-    <span :class="name + 's'">
-      <!-- <span v-if="title"> {{ title }} </span> -->
-      <span
-        :class="name"
-        v-for="item in list"
-        :key="item.hash"
-      >
-        <a
-          :href="`${$apiURL}/${item.url}`"
-          target="_blank"
-          class="name"
-        >{{ item.name }}</a>
-        <span v-if="title && isLast(item, list)">. </span>
-        <span v-else-if="isBeforeLast(item, list)"> and </span>
-        <span v-else-if="title">, </span>
-        <span v-else-if="!title && isLast(item, list)"> </span>
-        <span v-else  >, </span>
-      </span>
-    </span>
-  </div>
-</template>
-<script>
-
-export default {
-  name: 'SemanticList',
-  props: [
-    'list',
-    'name',
-    'collection'
-  ],
-  computed: {
-    title() {
-      return (
-        this.name   
-      )
-    },
-  },
-  methods: {
-    isLast: (item, array) => (
-      array.indexOf(item) === array.length - 1
-    ),
-    isBeforeLast: (item, array) => (
-      array.indexOf(item) === array.length - 2
-    ),
-    alphabetical: array => (
-      array.sort((a, b) => a.Name.length - b.Name.length)
-    ),
-  }
-}
-</script>
-
-<style>
-.semanticList {
-  font-size: inherit;
-}
-a,
-a:visited,
-a:active,
-a:hover {
-  /* color: unset; */
-  /* text-decoration: none; */
-}
-</style>

front/src/components/Streams/Stream.vue

@@ -1,36 +1,66 @@
 <template>
-  <div :class="{ selected: selected }">
+  <div :class="['li', { selected: isSelected }]">
     <p class="name">
       <router-link :to="stream.slug">
         {{ stream.name }}
       </router-link>
     </p>
+    <Toc 
+      v-if="isSelected"
+      :sortedTopics="sortedTopics"
+      :top="top"
+    />
     <!-- <p class="desc">{{ stream.description }}</p> -->
   </div>  
 </template>
 
 <script>
+import Toc from '../Content/Toc'
+import { mapGetters } from 'vuex'
+
 export default {
   name: 'Stream',
+  components: { Toc },
   props: [ 
-    'stream'
+    'stream', 
+    'isSelected',
   ],
-  computed: {
+  data() {
-    selected() { return this.$store.state.currentStream == this.stream.name }
+    return {
+      top: Number,
+    }
   },
+  computed: {
+    ...mapGetters([
+      "sortedTopics"
+    ]),
+  },
+  mounted() {
+    this.top = this.$el.offsetTop
+  }
 }
 </script>
 
 <style scoped>
-div {
+.li {
+  position: relative;
   padding: 0.5em;
 }
-div .selected {
+.li.selected {
-  background: rgb(247, 146, 247);
+  background: var(--pink);
 }
-div p {
+.li p {
   margin: 0;
 }
+.li p a {
+  max-width: 100%;
+  display: -webkit-box;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
 
 
 </style>

front/src/components/Streams/index.vue

@@ -1,7 +1,11 @@
 <template>
   <section class="streams">
-    <!-- <p class="title">{{ $.type.name }}</p> -->
+    <Stream 
-    <Stream v-for="stream in streams" :key="stream.id" :stream="stream" />
+      v-for="stream in streams" 
+      :key="stream.id" 
+      :stream="stream" 
+      :isSelected="currentStream.name == stream.name"
+    />
   </section>
 </template>
 
@@ -15,7 +19,10 @@ export default {
     Stream,
   },
   computed: {
-    ...mapState(["streams"]),
+    ...mapState([
+      "streams",
+      "currentStream"
+    ]),
   },
 };
 </script>

front/src/components/TagList.vue

@@ -1,49 +0,0 @@
-<template>
-  <div class="taglist body">
-    <span
-      v-for="item in list"
-      :key="item.slug"
-    >
-      <router-link 
-        :to="{
-          path: collection,
-          query: { tag: item.slug }
-        }"
-      >
-        {{ item.Name }}
-      </router-link>
-      <span v-if="!isLast(item, list)">, </span>
-    </span>
-  </div>
-</template>
-<script>
-
-export default {
-  name: 'SemanticList',
-  props: [
-    'list',
-    'name',
-    'collection'
-  ],
-  computed: {
-  },
-  methods: {
-    isLast: (item, array) => (
-      array.indexOf(item) === array.length - 1
-    ),
-  }
-}
-</script>
-
-<style>
-.semanticList {
-  font-size: inherit;
-}
-a,
-a:visited,
-a:active,
-a:hover {
-  /* color: unset; */
-  /* text-decoration: none; */
-}
-</style>