Merge pull request #22 from randombenj/feature/upload-and-help-page

Add upload and help page
docat-org · Nov 21, 2019 · b06e624 · b06e624
2 parents 88a9285 + 41bf801
commit b06e624
Show file tree

Hide file tree

Showing 17 changed files with 529 additions and 39 deletions.
diff --git a/Dockerfile b/Dockerfile
@@ -1,7 +1,10 @@
 # building frontend
 FROM node:13.1 as build-deps
 COPY web ./
+# fix docker not following symlinks
+COPY doc/getting-started.md ./src/assets/
 RUN yarn install
+RUN yarn lint
 RUN yarn build
 
 # production

diff --git a/backend/README.md b/backend/README.md
@@ -18,28 +18,4 @@ pipenv install
 
 ## Usage
 
-### Add documentation
-
-You can uppload any static html site by zipping it and 
-then posting the file to the backend. 
-
-For example to upload the file `docs.zip` as version `1.0.0` for awesome-project.
-
-```sh
-curl -X POST -F "file=@docs.zip" http://localhost:5000/api/awesome-project/1.0.0
-```
-
-Any other file type is uploaded as well. 
-An uploaded pdf would be available as 
-`http://localhost:5000/api/awesome-project/1.0.0/my_awesome.pdf` 
-
-### Tag documentation
-
-After this you can tag a version, this can be usefull when
-the latest version should be available as `http://localhost:5000/docs/awesome-project/latest`
-
-If you want to tag the version `1.0.0` as `latest` for awesome-project.
-
-```sh
-curl -X PUT http://localhost:5000/api/awesome-project/1.0.0/tags/latest
-```
+See [Help.md](Help.md)
diff --git a/doc/getting-started.md b/doc/getting-started.md
@@ -0,0 +1,31 @@
+## Getting started with DOCAT
+
+### Upload your documentation
+
+You can upload any static html site by zipping it and
+then posting the file to the backend.
+
+For example to upload the file `docs.zip` as version `1.0.0` for `awesome-project`.
+
+```sh
+curl -X POST -F "file=@docs.zip" http://localhost:8000/api/awesome-project/1.0.0
+```
+
+Any other file type is uploaded as well.
+An uploaded pdf could be viewed like this:
+
+`http://localhost/#/awesome-project/1.0.0/my_awesome.pdf`
+
+You can also manually upload your documentation.
+A very simple web form can be found under [upload](#/upload).
+
+### Tag documentation
+
+After this you can tag a version, this can be usefull when
+the latest version should be available as `http://localhost:5000/docs/awesome-project/latest`
+
+If you want to tag the version `1.0.0` as `latest` for awesome-project.
+
+```sh
+curl -X PUT http://localhost:5000/api/awesome-project/1.0.0/tags/latest
+```
diff --git a/web/package.json b/web/package.json
@@ -8,10 +8,14 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "babel-runtime": "^6.26.0",
     "core-js": "^3.3.2",
+    "html-loader": "^0.5.5",
     "node-sass": "^4.13.0",
     "sass-loader": "^8.0.0",
-    "vue": "^2.6.10"
+    "vue": "^2.6.10",
+    "vue-markdown": "^2.2.4",
+    "vuelidate": "^0.7.4"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "^4.0.0",

diff --git a/web/public/index.html b/web/public/index.html
@@ -5,6 +5,7 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
     <title>docat</title>
   </head>
   <body>

diff --git a/web/src/assets/getting-started.md b/web/src/assets/getting-started.md
@@ -0,0 +1 @@
+../../../doc/getting-started.md
diff --git a/web/src/components/Help.vue b/web/src/components/Help.vue
@@ -0,0 +1,23 @@
+<template>
+  <vue-markdown>
+    {{ help }}
+  </vue-markdown>
+</template>
+
+<script>
+import VueMarkdown from 'vue-markdown'
+
+import help from '@/assets/getting-started.md'
+
+export default {
+  name: 'help',
+  components: {
+    VueMarkdown
+  },
+  data() {
+    return {
+      help,
+    }
+  }
+}
+</script>
diff --git a/web/src/components/Layout.vue b/web/src/components/Layout.vue
@@ -18,6 +18,9 @@
         <div v-if="!fullscreen" class="md-layout-item md-size-15 md-small-hide"></div>
         <div class="md-layout-item">
           <slot></slot>
+          <div class="help">
+            <router-link to="/help" v-if="!fullscreen">help</router-link>
+          </div>
         </div>
         <div v-if="!fullscreen" class="md-layout-item md-size-15 md-small-hide"></div>
       </div>
@@ -66,4 +69,19 @@ body,
   height: 100%;
 }
 
+a {
+  /* TODO: remove hack */
+  color: #742a47 !important;
+}
+
+.help {
+  width: 100%;
+  border-top: 1px solid #e8e8e8;
+  padding-top: 16px;
+  margin-top: 16px;
+
+  a {
+    margin-left: 50%;
+  }
+}
 </style>
diff --git a/web/src/components/ProjectOverview.vue b/web/src/components/ProjectOverview.vue
@@ -6,17 +6,21 @@
       v-bind:key="project.name"
       :project="project.name"
     />
+    <Help v-if="!projects.length" />
   </div>
 </template>
 
 <script>
+import Help from '@/components/Help.vue'
 import Project from '@/components/Project.vue'
+
 import ProjectRepository from '@/repositories/ProjectRepository'
 
 export default {
   name: 'ProjectOverview',
   components: {
-    Project
+    Project,
+    Help
   },
   data() {
     return {

diff --git a/web/src/components/UploadButton.vue b/web/src/components/UploadButton.vue
@@ -0,0 +1,14 @@
+<template>
+  <md-button to="/upload" class="md-fab md-primary">
+    <md-icon>backup</md-icon>
+    <md-tooltip md-direction="left">upload documentation</md-tooltip>
+  </md-button>
+</template>
+
+<script>
+export default {
+  name: 'UploadButton'
+}
+</script>
+
+
diff --git a/web/src/main.js b/web/src/main.js
@@ -4,13 +4,18 @@ import App from '@/App.vue'
 // configure vue material (https://vuematerial.io/getting-started/)
 import {
   MdCard,
+  MdButton,
   MdAvatar,
   MdApp,
   MdToolbar,
   MdContent,
   MdList,
   MdField,
-  MdMenu
+  MdMenu,
+  MdProgress,
+  MdSnackbar,
+  MdIcon,
+  MdTooltip
 } from 'vue-material/dist/components'
 import 'vue-material/dist/vue-material.min.css'
 import 'vue-material/dist/theme/default.css'
@@ -23,6 +28,16 @@ Vue.use(MdList)
 Vue.use(MdToolbar)
 Vue.use(MdCard)
 Vue.use(MdAvatar)
+Vue.use(MdProgress)
+Vue.use(MdSnackbar)
+Vue.use(MdButton)
+Vue.use(MdIcon)
+Vue.use(MdTooltip)
+
+// configure to use vue-markdown (https://github.com/miaolz123/vue-markdown)
+import VueMarkdown from 'vue-markdown'
+
+Vue.use(VueMarkdown);
 
 // configure vue router (https://router.vuejs.org/installation.html)
 import VueRouter from 'vue-router'
@@ -32,10 +47,14 @@ Vue.use(VueRouter)
 // configure the app's routing
 import Home from '@/pages/Home.vue'
 import Docs from '@/pages/Docs.vue'
+import Help from '@/pages/Help.vue'
+import Upload from '@/pages/Upload.vue'
 
 const routes = [
   { path: '/', component: Home },
-  { path: '/:project/:version/:location?', component: Docs }
+  { path: '/:project/:version/:location?', component: Docs },
+  { path: '/help', component: Help },
+  { path: '/upload', component: Upload },
 ]
 
 const router = new VueRouter({

diff --git a/web/src/pages/Help.vue b/web/src/pages/Help.vue
@@ -0,0 +1,23 @@
+<template>
+  <div>
+    <Layout>
+      <Help class="spacing" />
+    </Layout>
+    <UploadButton class="upload-button" />
+  </div>
+</template>
+
+<script>
+import Layout from '@/components/Layout.vue'
+import Help from '@/components/Help.vue'
+import UploadButton from '@/components/UploadButton.vue'
+
+export default {
+  name: 'help-page',
+  components: {
+    Layout,
+    Help,
+    UploadButton
+  }
+}
+</script>
diff --git a/web/src/pages/Home.vue b/web/src/pages/Home.vue
@@ -1,18 +1,23 @@
 <template>
-  <Layout>
-    <ProjectOverview class="spacing" />
-  </Layout>
+  <div>
+    <Layout>
+      <ProjectOverview class="spacing" />
+    </Layout>
+    <UploadButton class="upload-button" />
+  </div>
 </template>
 
 <script>
 import ProjectOverview from '@/components/ProjectOverview.vue'
 import Layout from '@/components/Layout.vue'
+import UploadButton from '@/components/UploadButton.vue'
 
 export default {
   name: 'home',
   components: {
     ProjectOverview,
-    Layout
+    Layout,
+    UploadButton
   }
 }
 </script>
@@ -30,4 +35,20 @@ export default {
 .spacing {
   padding-top: 20px;
 }
+
+.upload-button {
+  position: fixed;
+  bottom: 16px;
+}
+
+@media all and (max-width: 959px) {
+  .upload-button {
+    right: 16px;
+  }
+}
+@media all and (min-width: 959px) {
+  .upload-button {
+    right: 15%;
+  }
+}
 </style>