add harvest terms glossary

app/static/_scss/_uswds-theme-custom-styles.scss

@@ -22,6 +22,9 @@ i.e.
 
 @use "uswds-core" as *;
 
+@import "components/glossary";
+@import "components/icons";
+
 ul.menu {
   padding-inline-start: 0;
   li {
@@ -63,6 +66,11 @@ ul.menu {
   }
 }
 
+.container:first-child {
+  display: flex; 
+  justify-content: space-between;
+}
+
 .usa-table-container--scrollable {
   overflow: scroll;
 }

app/static/_scss/components/_glossary.scss

@@ -0,0 +1,49 @@
+#glossary {
+  transition: right 0.2s;
+  background-color: color('primary-dark');
+
+  &[aria-hidden="true"] {
+    right: -20rem;
+  }
+
+  div[aria-hidden="true"] {
+    display: none !important;
+  }
+
+  button {
+    color: white;
+    background: none;
+    border: 0;
+    @include u-text("left");
+  }
+
+  .glossary__definition {
+    @include u-font("sans", "xs");
+    @include u-line-height("sans", 6);
+    @include u-margin-y(2);
+    @include u-width("full");
+
+    a {
+      @include u-text('base-light');
+    }
+  }
+
+  .glossary__term {
+    @include u-border-bottom("1px");
+    @include u-border("base");
+    @include u-margin(0);
+    @include u-padding-y(1);
+    @include u-padding-left(0);
+    @include u-padding-right(3);
+    @include u-text("bold");
+    @include u-width("full");
+
+    background-image: url("data:image/svg+xml;charset=utf8, %3Csvg%20%20fill%3D%27%23ffffff%27%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M10%2020c5.523%200%2010-4.477%2010-10S15.523%200%2010%200%200%204.477%200%2010s4.477%2010%2010%2010zm4.208-9.063h-3.175v3.126a.945.945%200%200%201-.953.937.945.945%200%200%201-.952-.938v-3.124H5.953A.945.945%200%200%201%205%2010c0-.518.426-.938.953-.938h3.175V5.938c0-.518.426-.938.952-.938s.953.42.953.938v3.125h3.175c.526%200%20.952.42.952.937a.945.945%200%200%201-.952.938z%22%2F%3E%3C%2Fsvg%3E");
+    background-repeat: no-repeat;
+    background-position: 100% 50%;
+
+    &[aria-expanded="true"] {
+      background-image: url("data:image/svg+xml;charset=utf8, %3Csvg%20%20fill%3D%27%23ffffff%27%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M10%2020c5.523%200%2010-4.477%2010-10S15.523%200%2010%200%200%204.477%200%2010s4.477%2010%2010%2010zm1.033-9.125h-5.08A.945.945%200%200%201%205%209.937C5%209.42%205.426%209%205.953%209H14.208c.526%200%20.952.42.952.938a.945.945%200%200%201-.952.937h-3.175z%22%2F%3E%3C%2Fsvg%3E");
+    }
+  }
+}

app/static/_scss/components/_icons.scss

@@ -0,0 +1,21 @@
+.icon-glossary {
+  position: relative;
+  color: color('primary');
+  text-decoration: none;
+
+  svg {
+    @include u-text("primary-vivid");
+    fill: currentColor;
+    left: -20px;
+    position: absolute;
+    top: 5px;
+  }
+
+  &:hover {
+    text-decoration: none;
+  }
+
+  &:hover svg {
+    @include u-text("primary");
+  }
+}

app/static/_scss/styles.scss

@@ -1,5 +1,9 @@
 @use "uswds-core" with (
     $theme-show-notifications: false,
+    $theme-color-base-light: "gray-cool-5",
+    $theme-color-primary: "blue-70v",
+    $theme-color-primary-vivid: "blue-60v",
+    $theme-color-primary-dark: "blue-warm-70v",
 );
 
 @forward "uswds";

app/static/data/glossary.json

@@ -0,0 +1,34 @@
+[
+  {
+    "term": "Frequency",
+    "definition": "how often the harvest source is harvested ( i.e. extracted, transformed, and loaded into our catalog ). examples include \"weekly\", \"daily\", and \"manual\""
+  },
+  {
+    "term": "Source Type",
+    "definition": "either a single document ( e.g. data.json ) or a web-accessible folder with many documents"
+  },
+  {
+    "term": "Schema Type",
+    "definition": "the metadata standard of the document(s). examples include ISO19115-1, ISO19115-2, CSDGM, and DCAT-US. only 1 schema can be used per harvest source."
+  },
+  {
+    "term": "Records With CKAN ID",
+    "definition": "we use a combination of open source and in-house software in our harvesting. currently, our records are synchronized between these 2 systems by pairing the id of the record in our in-house database with our open source (i.e. CKAN) database. this term describes the number of records which have been synchronized between the 2 systems."
+  },
+  {
+    "term": "Notification Emails",
+    "definition": "email addresses to receive harvesting information"
+  },
+  {
+    "term": "Record Ignored",
+    "definition": "our harvesting process pulls data from our internal database and your external source and compares them to determine which records need to be created, updated, deleted, or ignored on our end. \"ignored\" means nothing needs to be done. we have the most recent copy of your record. in comparison to \"created\", let's say, where we don't have a copy of your record and need to create it on our end."
+  },
+  {
+    "term": "Job Errors",
+    "definition": "also known as \"critical\" errors are ones which prevent the harvester from determining which operations to run on records. for example, if the harvester receives a 404 http error code when attempting to download your document this would produce a \"Job Error\"."
+  },
+  {
+    "term": "Record Error",
+    "definition": "also known as \"non-critical\" errors are ones which occur at the record level after the harvester has determined which operations to run. examples include validation and transformation failure."
+  }
+]

app/static/gulpfile.js

@@ -1,8 +1,33 @@
 const { src, pipe, dest, series, parallel, watch } = require('gulp');
 const uswds = require("@uswds/compile");
 
+var browserify = require('browserify');
+var source = require('vinyl-source-stream');
+var buffer = require('vinyl-buffer');
+
+// file path vars
+const paths = {
+    js: {
+        src: './js/index.js',
+        dest: 'assets/js/bundle.js'
+    }
+}
+
+function jsTask() {
+    return browserify(`${paths.js.src}`)
+        .transform('babelify', {
+            presets: ['@babel/preset-env'],
+            plugins: ['@babel/plugin-transform-runtime']
+        })
+        .bundle()
+        .pipe(source(paths.js.dest))
+        .pipe(buffer())
+        .pipe(dest("./"));
+};
+
 const defaultTask = parallel(
     series(
+        jsTask,
         uswds.compile,
         uswds.copyAssets,
     )

app/static/js/glossary.js

@@ -0,0 +1,26 @@
+var Glossary = require("glossary-panel");
+var terms = require("../data/glossary.json");
+
+function decorator(glossary) {
+  var accordion = glossary.accordion;
+
+  accordion.opts.collapseOthers = true;
+  accordion.collapse = function (button) {
+    var content = document.getElementById(button.getAttribute("aria-controls"));
+    if (!content) return;
+    button.setAttribute("aria-expanded", "false");
+    content.setAttribute("aria-hidden", "true");
+    this.setStyles(content);
+  };
+}
+
+// add in source to description.
+var adjusted_terms = terms.map(function (t) {
+  return {
+    term: t.term,
+    definition: `<p>${t.definition}</p>`,
+  };
+});
+
+var g = new Glossary(adjusted_terms);
+decorator(g);

app/static/js/index.js

@@ -0,0 +1 @@
+require("./glossary.js");