Merge pull request #129 from scaife-viewer/feature/about-url

Add support for an about url

README.md

@@ -72,3 +72,7 @@ For convenience, `heroku.yml` and `heroku.dockerfile` can be used to deploy the
 - `heroku.dockerfile` is used to build the frontend and backend into a single image.  Frontend static assets are served via Django and Whitenoise at the application root (`/`).  See [Building docker images with heroku.yml](https://devcenter.heroku.com/articles/build-docker-images-heroku-yml) for more information.
 
 Customize `app.json` and `herok.yml` as-needed for projects derived from this repo.
+
+## Nav
+
+- Set `VUE_APP_ABOUT_URL` and `VUE_APP_ABOUT_TEXT` to add a link to an about page

frontend/src/App.vue

@@ -1,9 +1,20 @@
 <template>
   <div id="app">
+    <Nav />
     <router-view></router-view>
   </div>
 </template>
 
+<script>
+  import Nav from './components/Nav.vue';
+
+  export default {
+    components: {
+      Nav,
+    },
+  };
+</script>
+
 <style lang="scss">
   @import './styles/variables';
 

frontend/src/components/Nav.vue

@@ -0,0 +1,31 @@
+<template>
+  <div v-if="$options.aboutUrl" class="top-nav u-flex">
+    <a :href="$options.aboutUrl">{{ $options.aboutText }}</a>
+  </div>
+</template>
+<script>
+  export default {
+    name: 'Nav',
+    aboutUrl: process.env.VUE_APP_ABOUT_URL,
+    aboutText: process.env.VUE_APP_ABOUT_TEXT || 'About',
+  };
+</script>
+
+<style lang="scss">
+  .top-nav {
+    border-bottom: 1px solid $gray-300;
+    color: $white;
+    flex-direction: row;
+    justify-content: end;
+    padding: 1em 0;
+    width: 100%;
+    z-index: 100;
+    > * {
+      margin-right: 2em;
+    }
+    a {
+      color: $gray-700;
+      text-decoration: none;
+    }
+  }
+</style>

heroku.dockerfile

@@ -10,6 +10,7 @@ COPY ./frontend/package.json ./frontend/yarn.lock ./
 RUN yarn install
 
 COPY ./frontend .
+ENV VUE_APP_ABOUT_URL="https://pdldatajournal.pubpub.org/pub/el65xygp"
 RUN yarn build
 
 # # # # # # # # # # # # # # # # # # # # # # # #