Merge pull request #1 from nzzdev/release-v1.0.0

Release v1.0.0

.dockerignore

@@ -0,0 +1 @@
+node_modules

.gitignore

@@ -0,0 +1,5 @@
+.DS_Store
+node_modules
+dev.js
+scripts
+styles

.nvmrc

@@ -0,0 +1 @@
+14

.travis.yml

@@ -0,0 +1,24 @@
+dist: xenial
+sudo: true
+services:
+  - docker
+language: node_js
+node_js:
+  - "14"
+cache:
+  directories:
+    - node_modules
+install:
+  - npm install
+before_script:
+  - DOCKER_IMAGE_NAME="q-scroll-graphic"
+  - DOCKER_TAG=${TRAVIS_BRANCH//[^a-zA-Z0-9\_\-\.]/_}
+script:
+  - npm run build
+  - npm run test
+  - 'if [ "$TRAVIS_PULL_REQUEST" = "false" ]; then docker build -t $DOCKER_IMAGE_NAME:$DOCKER_TAG .; fi'
+after_success:
+  - 'if [ "$TRAVIS_PULL_REQUEST" = "false" ]; then echo $DOCKER_PASSWORD | docker login -u="$DOCKER_USERNAME" --password-stdin; docker tag $DOCKER_IMAGE_NAME:$DOCKER_TAG nzzonline/$DOCKER_IMAGE_NAME:$DOCKER_TAG; docker push nzzonline/$DOCKER_IMAGE_NAME:$DOCKER_TAG; fi'
+notifications:
+  slack:
+    secure: hkNyc9ThjnCfwstig62li65EvGHW67jsuYFVlZNKywoPLwmygM8aWGbuDlDAqVnCzBLWYHxeQlvP4xLRzYaUJ0eomOUceQSgpd45JA64GcZ1dVdWB5fphQUK8GNYTYbz6uyGsKC9SiQpWch9a4xDd1+UINxgZugaUNHn4E9aoZP8uqoWaQc/Yp28bj53wSNhBOvusHbI7uf4LVbXtkwRyeRnIARpspEJD2VEo1Nq/11d7Jek+2ZUJPYM5YTrxvmsAFXBQRL+8is0U06rLwxzABlbZwVC/Rz0a3xD4IyiOHsIsKgemrj2zef7t8tVXNSTIDoeNUUWGwFunG5p7z4auUGED9eNhczQAkFOTNJOXPVsqNW0YXB+nF2VQWSSJg67Yl/+DeV0x0zEAQxCYltq1nGWPnSiUz1ARgl9phRgP6CtH6XbtCHjbcbR6/fHxliw3TYK8ZiPraaTf11hz6E+MgJtdbgz4dv93FJzkOlyj0+QAnEuTaqRXu2tik4loVH7V+Z4nKsrgfvNEEb3KbfGXt42WjCo36+nHyBu3LwHDYknBfwOWQkEC9LbVJ5l6AKRBD7bGdW6qmLmCCLqe/cnH3Q/6Q3vA15RV0abGo/P48PhAii9aFfR7b6XvsQt1x4gzIZnmwNpa5Sl4xuh78YN8t+Ahwx0kO/Xlvdjnpf7zdM=

.vscode/launch.json

@@ -0,0 +1,15 @@
+{
+  // Use IntelliSense to learn about possible attributes.
+  // Hover to view descriptions of existing attributes.
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "type": "pwa-node",
+      "request": "launch",
+      "name": "Launch Program",
+      "skipFiles": ["<node_internals>/**"],
+      "program": "${workspaceFolder}/dev.js"
+    }
+  ]
+}

Dockerfile

@@ -0,0 +1,19 @@
+# Use following version of node alpine as the base image
+FROM node:14-alpine
+
+# Set work directory for run/cmd
+WORKDIR /app
+
+# Copy package.json and package-lock.json into work directory and install dependencies
+COPY package.json /app/package.json
+COPY package-lock.json /app/package-lock.json
+RUN npm install --production
+
+# Copy everthing else in work directory
+COPY . /app
+
+# Expose server port
+EXPOSE 3000
+
+# Run node
+CMD node index.js

LICENSE

@@ -17,5 +17,4 @@ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

README.md

@@ -0,0 +1,142 @@
+# Q-scroll-graphic [![Build Status](https://travis-ci.com/nzzdev/Q-scroll-graphic.svg?branch=dev)](https://travis-ci.com/nzzdev/Q-scroll-graphic)
+
+**maintainer**: [manuelroth](https://github.com/manuelroth)
+
+Q scroll graphic is one tool of the Q toolbox to create a visual element where the graphic is fixed to the viewport and the text scrolls on top of the graphic. See a more details definition of a scroll graphic in [our styleguide](https://nzzdev.github.io/Storytelling-Styleguide/#/grafikabfolge).
+
+## Table of contents
+
+- [Installation](#installation)
+- [Configuration](#configuration)
+- [Development](#development)
+- [Testing](#testing)
+- [Deployment](#deployment)
+- [Functionality](#functionality)
+- [License](#license)
+
+## Installation
+
+```
+git clone [email protected]:nzzdev/Q-scroll-graphic.git
+cd ./Q-scroll-graphic
+nvm use
+npm install
+npm run build
+```
+
+[to the top](#table-of-contents)
+
+## Configuration
+
+There is one env variable `IMAGE_SERVICE_URL` to be defined. It should contain a URL with 3 parameters that will get replaced before the URL is used to load the images.
+`{key}` will be replaced by the string Q-server stored as the key when the file got uploaded through Q-servers `/file` endpoint provided by the [file plugin](https://github.com/nzzdev/Q-server/blob/dev/plugins/file/index.js)
+`{width}` is replaced by the width the image should be loaded
+`{format}` will be `png` or `webp`
+Example: `https://example.com/{key}?width={width}&format={format}`
+
+## Development
+
+Start the Q dev server:
+
+```
+npx @nzz/q-cli server
+```
+
+Run the Q tool:
+
+```
+npm run dev
+```
+
+[to the top](#table-of-contents)
+
+## Testing
+
+The testing framework used in this repository is [Code](https://github.com/hapijs/code).
+
+Run the tests:
+
+```
+npm run test
+```
+
+### Implementing a new test
+
+When changing or implementing...
+
+- A `route`, it needs to be tested in the `e2e-tests.js` file
+- Something on the frontend, it needs to be tested in the `dom-tests.js` file
+
+[to the top](#table-of-contents)
+
+## Deployment
+
+We provide automatically built docker images at https://hub.docker.com/r/nzzonline/q-scroll-graphic/.
+There are three options for deployment:
+
+- Use the provided images
+- Build your own docker images
+- Deploy the service using another technology
+
+### Use the provided docker images
+
+1. Deploy `nzzonline/q-scroll-graphic` to a docker environment
+2. Set the ENV variables as described in the [configuration section](#configuration)
+
+[to the top](#table-of-contents)
+
+## Functionality
+
+The tool structure follows the general structure of each Q tool. Further information can be found in [Q server documentation - Developing tools](https://nzzdev.github.io/Q-server/developing-tools.html).
+
+This tool was built using [Svelte](https://svelte.dev/). The title, subtitle and footer are rendered on server side. The scroll graphic is rendered on client side. The [svelte-scroller](https://github.com/sveltejs/svelte-scroller) component is used to keep track of the steps.
+
+#### Features
+
+A scroll graphic consists of multiple steps. Each step has multiple graphic variants, a text and highlighted texts. Highlighted texts can be used to highlight sections of the text. There are multiple highlight types to choose from background, underline and bold. The highlight colors are defined in a separate array. Colors are referenced using the index of the color in the array. See the example graphic below:
+
+```json
+{
+  "title": "FIXTURE: Two variants per step and highlighted text",
+  "subtitle": "Subtitle",
+  "steps": [
+    {
+      "variants": [
+        {
+          "asset": {
+            "url": "..."
+          }
+        },
+        {
+          "minWidth": 500,
+          "asset": {
+            "url": "..."
+          }
+        }
+      ],
+      "text": "So kennen Sie die Schweiz mit ihren 26 Kantonen. Würde man die Grenzen jedoch anhand von Facebook-Freundschaften neu ziehen, ergäbe sich, je nach Kanton, ein ganz anderes Bild.",
+      "highlightedTexts": [
+        {
+          "type": "background", // one of background, underline and bold
+          "preventLineBreak": false,
+          "text": "Schweiz",
+          "color": 0
+        }
+      ]
+    }
+  ],
+  "highlightedTextColors": [
+    {
+      "color": "#3852EE"
+    }
+  ]
+}
+```
+
+[to the top](#table-of-contents)
+
+## License
+
+Copyright (c) Neue Zürcher Zeitung. All rights reserved.
+
+This software is published under the MIT license.

index.js

@@ -0,0 +1,37 @@
+const Hapi = require("@hapi/hapi");
+const Joi = require("joi");
+
+const server = Hapi.server({
+  port: process.env.PORT || 3000,
+  routes: {
+    cors: true,
+  },
+});
+server.validator(Joi);
+
+const routes = require("./routes/routes.js");
+
+async function init() {
+  await server.register(require("@hapi/inert"));
+  server.route(routes);
+  await server.start();
+  console.log("server running ", server.info.uri);
+}
+
+async function gracefullyStop() {
+  console.log("stopping hapi server");
+  try {
+    await server.stop({ timeout: 10000 });
+    console.log("hapi server stopped");
+  } catch (err) {
+    console.log(err);
+    process.exit(1);
+  }
+  process.exit(0);
+}
+
+// listen on SIGINT and SIGTERM signal and gracefully stop the server
+process.on("SIGINT", gracefullyStop);
+process.on("SIGTERM", gracefullyStop);
+
+init();