adding glossary to design system

docs/common/DocsPageTemplate/SideNav/index.vue

@@ -28,16 +28,14 @@
 
 <script>
 
-  import DocsFilter from '../../DocsFilter';
-  import { termList, matches } from '../../DocsFilter/utils';
   import NavSectionList from './NavSectionList';
+  import { termList, matches } from '~/common/DocsFilter/utils';
   import tableOfContents from '~/tableOfContents.js';
 
   export default {
     name: 'SideNav',
     components: {
       NavSectionList,
-      DocsFilter,
     },
     data() {
       return {

docs/pages/glossary/index.vue

@@ -0,0 +1,106 @@
+<template>
+
+  <DocsPageTemplate>
+
+    <DocsPageSection title="Overview" anchor="#overview">
+      <p>
+        Certain words have special meanings in the context of the Kolibri ecosystem which might be different or more specific than when used in general language. Additionally, many of the terms have been carefully chosen from among alternatives, and it's important to consistently use this terminology across the product ecosystem.
+      </p>
+      <p>
+        The glossary is stored in the <DocsExternalLink text="the TBX-Glossary format" href="http://www.ttt.org/tbxg/" /> format, and should be uploaded to all Crowdin projects so that translators have this context.
+      </p>
+    </DocsPageSection>
+
+    <DocsPageSection title="Terms" anchor="#terms" fullwidth>
+      <DocsFilter v-model="filterText" class="filter" />
+      <table style="max-width: 1000px">
+        <thead>
+          <tr>
+            <th style="min-width: 150px">
+              Term
+            </th>
+            <th>Part of speech</th>
+            <th class="stretch">
+              Description
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="(term, i) in visibleTerms" :key="i">
+            <th>{{ term.term }}</th>
+            <td><em>{{ term.note }}</em></td>
+            <td>{{ term.description }}</td>
+          </tr>
+        </tbody>
+      </table>
+    </DocsPageSection>
+
+  </DocsPageTemplate>
+
+</template>
+
+
+<script>
+
+  import sortBy from 'lodash/sortBy';
+  import tbxGlossary from './glossary.tbx';
+  import { termList, matches } from '~/common/DocsFilter/utils';
+
+  function tbxAttribute(element, name) {
+    return element[name] ? element[name][0]._ : '';
+  }
+
+  function tbxTerm(entry) {
+    const english = entry.langSet.find(lang => lang.$['xml:lang'] === 'en');
+    return {
+      term: tbxAttribute(english.tig[0], 'term'),
+      note: tbxAttribute(english.tig[0], 'termNote'),
+      description: tbxAttribute(english.tig[0], 'descrip'),
+    };
+  }
+
+  const glossaryTerms = sortBy(tbxGlossary.martif.text[0].body[0].termEntry.map(tbxTerm), ['term']);
+
+  export default {
+    data() {
+      return {
+        filterText: '',
+      };
+    },
+    computed: {
+      visibleTerms() {
+        return glossaryTerms.filter(term => matches(this.filterTerms, term.term));
+      },
+      filterTerms() {
+        return termList(this.filterText);
+      },
+    },
+  };
+
+</script>
+
+
+<style lang="scss" scoped>
+
+  td,
+  th {
+    padding: 8px;
+    text-align: left;
+    vertical-align: top;
+  }
+
+  th {
+    min-width: 50px;
+  }
+
+  .stretch {
+    width: 100%;
+    min-width: 150px;
+  }
+
+  .filter {
+    max-width: 300px;
+    margin-bottom: 8px;
+  }
+
+</style>

docs/pages/icons/IconTable.vue

@@ -34,7 +34,6 @@
 
   import IconBlock from './IconBlock';
   import { termList, matches } from '~/common/DocsFilter/utils';
-  import DocsFilter from '~/common/DocsFilter';
   import { KolibriIcons } from '~~/lib/KIcon/iconDefinitions.js';
 
   /**
@@ -86,7 +85,6 @@
   export default {
     components: {
       IconBlock,
-      DocsFilter,
     },
     data() {
       return {

docs/plugins/load-common-components.js

@@ -8,6 +8,7 @@ import DocsPageSection from '~/common/DocsPageSection';
 import DocsPageTemplate from '~/common/DocsPageTemplate';
 import DocsDoNot from '~/common/DocsDoNot';
 import DocsShow from '~/common/DocsShow';
+import DocsFilter from '~/common/DocsFilter';
 
 Vue.component('DocsPageTemplate', DocsPageTemplate);
 Vue.component('DocsPageSection', DocsPageSection);
@@ -16,5 +17,6 @@ Vue.component('DocsAnchorTarget', DocsAnchorTarget);
 Vue.component('DocsExternalLink', DocsExternalLink);
 Vue.component('DocsShow', DocsShow);
 Vue.component('DocsDoNot', DocsDoNot);
+Vue.component('DocsFilter', DocsFilter);
 
 Vue.use(VueSimpleMarkdown);

docs/tableOfContents.js

@@ -104,6 +104,10 @@ export default [
         path: '/writing',
         title: 'Writing',
       }),
+      new Page({
+        path: '/glossary',
+        title: 'Glossary',
+      }),
     ],
   }),
   new Section({

nuxt.config.js

@@ -42,6 +42,11 @@ export default {
         loader: 'svg-icon-inline-loader',
         exclude: /node_modules/,
       });
+      // used for glossary
+      config.module.rules.push({
+        test: /\.tbx$/,
+        loader: 'xml-loader',
+      });
       config.devtool = 'source-map';
     },
     cssSourceMap: true,

package.json

@@ -64,6 +64,7 @@
     "vue-meta": "^2.3.2",
     "vue-prism-component": "^1.1.1",
     "vue-simple-markdown": "^1.1.2",
-    "vue-template-compiler": "^2.5.17"
+    "vue-template-compiler": "^2.5.17",
+    "xml-loader": "^1.2.1"
   }
 }

yarn.lock

@@ -9279,7 +9279,7 @@ loader-utils@^0.2.16:
     json5 "^0.5.0"
     object-assign "^4.0.1"
 
-loader-utils@^1.0.1:
+loader-utils@^1.0.0, loader-utils@^1.0.1:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-1.4.0.tgz#c579b5e34cb34b1a74edc6c1fb36bfa371d5a613"
   integrity sha512-qH0WSMBtn/oHuwjy/NucEgbx5dbxxnxup9s4PVXJUDHZBQY+s0NWA9rJf53RBnQZxfch7euUui7hpoAPvALZdA==
@@ -13371,7 +13371,7 @@ sass-loader@^8.0.2:
     schema-utils "^2.6.1"
     semver "^6.3.0"
 
-sax@^1.2.4, sax@~1.2.1, sax@~1.2.4:
+sax@>=0.6.0, sax@^1.2.4, sax@~1.2.1, sax@~1.2.4:
   version "1.2.4"
   resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9"
   integrity sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==
@@ -16048,16 +16048,37 @@ x-is-string@^0.1.0:
   resolved "https://registry.yarnpkg.com/x-is-string/-/x-is-string-0.1.0.tgz#474b50865af3a49a9c4657f05acd145458f77d82"
   integrity sha1-R0tQhlrzpJqcRlfwWs0UVFj3fYI=
 
+xml-loader@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/xml-loader/-/xml-loader-1.2.1.tgz#03484da710c44d3610dd36c2af4094b35b4f7975"
+  integrity sha1-A0hNpxDETTYQ3TbCr0CUs1tPeXU=
+  dependencies:
+    loader-utils "^1.0.0"
+    xml2js "^0.4.16"
+
 xml-name-validator@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/xml-name-validator/-/xml-name-validator-3.0.0.tgz#6ae73e06de4d8c6e47f9fb181f78d648ad457c6a"
   integrity sha512-A5CUptxDsvxKJEU3yO6DuWBSJz/qizqzJKOMIfUJHETbBw/sFaDxgd6fxm1ewUaM0jZ444Fc5vC5ROYurg/4Pw==
 
+xml2js@^0.4.16:
+  version "0.4.23"
+  resolved "https://registry.yarnpkg.com/xml2js/-/xml2js-0.4.23.tgz#a0c69516752421eb2ac758ee4d4ccf58843eac66"
+  integrity sha512-ySPiMjM0+pLDftHgXY4By0uswI3SPKLDw/i3UXbnO8M/p28zqexCUoPmQFrYD+/1BzhGJSs2i1ERWKJAtiLrug==
+  dependencies:
+    sax ">=0.6.0"
+    xmlbuilder "~11.0.0"
+
 [email protected]:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/xml/-/xml-1.0.0.tgz#de3ee912477be2f250b60f612f34a8c4da616efe"
   integrity sha1-3j7pEkd74vJQtg9hLzSoxNphbv4=
 
+xmlbuilder@~11.0.0:
+  version "11.0.1"
+  resolved "https://registry.yarnpkg.com/xmlbuilder/-/xmlbuilder-11.0.1.tgz#be9bae1c8a046e76b31127726347d0ad7002beb3"
+  integrity sha512-fDlsI/kFEx7gLvbecc0/ohLG50fugQp8ryHzMTuW9vSa1GJ0XYWKnhsUx7oie3G98+r56aTQIUB4kht42R3JvA==
+
 xtend@^4.0.0, xtend@^4.0.1, xtend@~4.0.1:
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/xtend/-/xtend-4.0.2.tgz#bb72779f5fa465186b1f438f674fa347fdb5db54"