Portable stories (#57)

* New structure for stories: single markdown with assest dir next to them.
* Refactor usecase -> story
* Use remark-directive to split markdown in chapters
* Use nuxt directives for parsing panels to markdown
* Remove sectionize proof-of-concept
* Add search functionality to index page
* Incorporate #56 (add composit map to heave_precip story)
* Improve README
* Add licences
* Add citation.cff

Author: Peter9192

CITATION.cff

@@ -0,0 +1,43 @@
+# YAML 1.2
+# More than one affiliation:
+# https://github.com/citation-file-format/citation-file-format/issues/268
+---
+title: EUCP Storyboard viewer
+keywords:
+  - climate
+  - EUCP
+repository-code: "https://github.com/eucp-project/storyboards"
+license: "Apache-2.0"
+message: "If you use this software, please cite it using these metadata."
+cff-version: "1.2.0"
+authors:
+  -
+    family-names: Kalverla
+    given-names: Peter
+    orcid: "https://orcid.org/0000-0002-5025-7862"
+    affiliation: "Netherlands eScience Center"
+  -
+    family-names: Alidoost
+    given-names: Fakhereh
+    orcid: "https://orcid.org/0000-0001-8407-6472"
+    affiliation: "Netherlands eScience Center"
+  -
+    family-names: Liu
+    given-names: Yang
+    orcid: "https://orcid.org/0000-0002-1966-8460"
+    affiliation: "Netherlands eScience Center"
+  -
+    family-names: Verhoeven
+    given-names: Stefan
+    orcid: "https://orcid.org/0000-0002-5821-2060"
+    affiliation: "Netherlands eScience Center"
+  -
+    family-names: Vreede
+    given-names: Barbara
+    orcid: "https://orcid.org/0000-0002-5023-4601"
+    affiliation: "Netherlands eScience Center"
+identifiers:
+  - type: doi
+    value: ''
+    description: The concept DOI of the work.
+...

LICENSE

@@ -0,0 +1,18 @@
+
+Apache Software License 2.0
+
+Copyright (c) 2022, Netherlands eScience Center
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+
+This license file does not apply to the content of /stories. A separate license file is included in that directory.

README.md

@@ -1,69 +1,117 @@
-# usecases
+# Storyboards
 
-## Build Setup
+This repository contains the source code for the
+[EUCP](https://www.eucp-project.eu/) [Storyboard
+website](https://eucp-project.github.io/storyboards/).
 
-```bash
-# install dependencies
-$ npm install
+The website has been built with [Nuxt](https://nuxtjs.org), using
+[nuxt-content](https://content.nuxtjs.org/) for authoring stories and
+[tailwindcss](https://tailwindcss.com/docs/installation) + [tailwind
+typography](https://tailwindcss.com/docs/typography-plugin) for styling. It is
+hosted on [GitHub pages](https://nuxtjs.org/deployments/github-pages/).
 
-# serve with hot reload at localhost:3000
-$ npm run dev
-
-# build for production and launch server
-$ npm run build
-$ npm run start
+## Writing a story
 
-# generate static project
-$ npm run generate
-```
+All stories are stored in the `static/stories` folder. Each story consists of a
+markdown file and a folder with some assets (images, etc.) belonging to the
+story. In addition to standard markdown, the `:::Chapter{}` directive is used to
+break the story into parts that can be displayed individually.
 
-For detailed explanation on how things work, check out the [documentation](https://nuxtjs.org).
+An example story might look like this:
 
-## Special Directories
+`static/stories/example-story.md`
+```markdown
+---
+title: Example story
+author: Peter Kalverla et al., Netherlands eScience Center
+thumbnail: "intro.png"
+category: EUCP data and products
+trl: high
+id: 13
+---
+:::Chapter{headline="Introduction" image="intro.png"}
+## This is the first Chapter
+You can format text using markdown.
 
-You can create the following extra directories, some of which have special behaviors. Only `pages` is required; you can delete them if you don't want to use their functionality.
+The headline property will be used for the chapter navigation blocks.
 
-### `assets`
+The image property will be used for the main display image of this chapter.
 
-The assets directory contains your uncompiled assets such as Stylus or Sass files, images, or fonts.
+Even though it's called 'image', you can also add standalone HTML pages, such as
+an exported mapbox file.
 
-More information about the usage of this directory in [the documentation](https://nuxtjs.org/docs/2.x/directory-structure/assets).
+The three colons below mark the end of the first chapter.
+:::
 
-### `components`
+:::Chapter{headline="Methods" image="concept.png"}
+## This is the second Chapter
 
-The components directory contains your Vue.js components. Components make up the different parts of your page and can be reused and imported into your pages, layouts and even other components.
+and so on...
+:::
+```
 
-More information about the usage of this directory in [the documentation](https://nuxtjs.org/docs/2.x/directory-structure/components).
+This produces the following layout:
 
-### `layouts`
+![Screenshot of example-story](example-story.png)
 
-Layouts are a great help when you want to change the look and feel of your Nuxt app, whether you want to include a sidebar or have distinct layouts for mobile and desktop.
+The images should be stored in a directory with the same name as the story, but
+with a leading underscore, like so:
 
-More information about the usage of this directory in [the documentation](https://nuxtjs.org/docs/2.x/directory-structure/layouts).
+```bash
+- static/
+  - stories/
+    - example-story.md
+    - _example-story/
+      - intro.png
+      - concept.png
+```
 
+The frontmatter (title, author, etc.) will be used to show the story on the
+stories overview page. The ID and TRL (technical readiness level) properties are
+currently not used, but they are still here for legacy reasons.
 
-### `pages`
+## Adding your story to our collection
 
-This directory contains your application views and routes. Nuxt will read all the `*.vue` files inside this directory and setup Vue Router automatically.
+If you want your story to be included on
+[eucp-project.github.io/storyboards](https://eucp-project.github.io/storyboards),
+you can make a pull request to this repository. We will review it and if
+everything is okay, we'll merge the story into the main branch. Continous
+deployment will then automatically update the site.
 
-More information about the usage of this directory in [the documentation](https://nuxtjs.org/docs/2.x/get-started/routing).
+If you want to add a story but are unsure about the github workflow, please
+don't hesitate to get in touch. We are happy to help.
 
-### `plugins`
+## Serving the site locally
 
-The plugins directory contains JavaScript plugins that you want to run before instantiating the root Vue.js Application. This is the place to add Vue plugins and to inject functions or constants. Every time you need to use `Vue.use()`, you should create a file in `plugins/` and add its path to plugins in `nuxt.config.js`.
+You can also make a local build of the site, if you want to check that your
+story is formatted correctly before making a pull request. The following
+instructions are the default instructions from a new nuxt project. After cloning
+the repository:
 
-More information about the usage of this directory in [the documentation](https://nuxtjs.org/docs/2.x/directory-structure/plugins).
+```bash
+# install dependencies
+$ npm install
 
-### `static`
+# serve with hot reload at localhost:3000
+$ npm run dev
 
-This directory contains your static files. Each file inside this directory is mapped to `/`.
+# build for production and launch server
+$ npm run build
+$ npm run start
 
-Example: `/static/robots.txt` is mapped as `/robots.txt`.
+# generate static project
+$ npm run generate
+```
 
-More information about the usage of this directory in [the documentation](https://nuxtjs.org/docs/2.x/directory-structure/static).
+For detailed explanation on how things work, check out the [documentation](https://nuxtjs.org).
 
-### `store`
+# Reusing the storyboards format for a different project
 
-This directory contains your Vuex store files. Creating a file in this directory automatically activates Vuex.
+The source code (excluding the stories content) is licenced under Apache 2. You
+can fork this repo and add your own content, modify the styling, and do whatever
+you want. We'd appreciate it if you inform us about your re-using the software.
+We're also happy to help setting it up for you.
 
-More information about the usage of this directory in [the documentation](https://nuxtjs.org/docs/2.x/directory-structure/store).
+# Reusing the storyboard materials
+The content of the storyboards is licenced under CC-BY 4.0. Please don't
+hesitate to contact the storyboard authors if you're interested in their work.

components/StoryCard.vue

@@ -0,0 +1,26 @@
+<template>
+  <NuxtLink :to="url">
+    <!-- relative parent needed for absolute positioning of svg badges-->
+    <div class="relative">
+      <div class="flex flex-row bg-white shadow-xl max-w-xl rounded-lg h-48">
+        <!-- story cards -->
+        <div class="prose m-4">
+          <h4>
+            {{ title }}
+          </h4>
+          <p>
+            {{ author }}
+          </p>
+        </div>
+        <img :src="thumbnail" alt="storyboard preview" class="max-w-xs rounded-r-lg">
+      </div>
+    </div>
+  </NuxtLink>
+</template>
+
+<script>
+
+export default {
+  props: ['title', 'author', 'thumbnail', 'url']
+}
+</script>