npm - @nzz/q-cli - Versions diffs - 1.5.4 → 1.6.0 - Mend

@nzz/q-cli 1.5.4 → 1.6.0

Files changed (53) hide show

package/skeletons/custom-code-skeleton/package.json CHANGED Viewed

@@ -2,21 +2,29 @@
   "name": "custom-code-skeleton",
   "version": "1.0.0",
   "devDependencies": {
+    "@nzz/nzz.ch-static": "github:nzzdev/nzz.ch-static#v1.0.0",
     "@nzz/q-cli": "^1.4.11",
-    "@rollup/plugin-buble": "^0.21.3",
-    "@rollup/plugin-commonjs": "^17.1.0",
-    "@rollup/plugin-html": "^0.2.3",
+    "@rollup/plugin-alias": "^3.1.9",
+    "@rollup/plugin-commonjs": "^21.0.0",
+    "@rollup/plugin-html": "^0.2.4",
+    "@rollup/plugin-image": "^2.1.1",
     "@rollup/plugin-json": "^4.1.0",
-    "@rollup/plugin-node-resolve": "^11.2.1",
+    "@rollup/plugin-node-resolve": "^13.0.5",
+    "@rollup/plugin-typescript": "^8.3.2",
+    "@tsconfig/svelte": "^3.0.0",
+    "autoprefixer": "^10.4.0",
+    "cssnano": "^5.0.10",
     "npm-run-all": "^4.1.5",
+    "postcss": "^8.3.11",
     "rollup": "^2.50.1",
-    "rollup-plugin-css-only": "^3.1.0",
-    "rollup-plugin-livereload": "^2.0.0",
+    "rollup-plugin-livereload": "^2.0.5",
+    "rollup-plugin-scss": "^3.0.0",
     "rollup-plugin-svelte": "^7.1.0",
-    "rollup-plugin-svg": "^2.0.0",
     "rollup-plugin-terser": "^7.0.2",
+    "sass": "^1.43.4",
     "sirv-cli": "^1.0.12",
-    "svelte": "^3.38.2"
+    "svelte": "^3.43.1",
+    "typescript": "^4.6.4"
   },
   "scripts": {
     "update-all": "npm run build && Q update-item",
@@ -24,9 +32,11 @@
     "update-staging": "npm run build && Q update-item -e staging",
     "update-test": "npm run build && Q update-item -e test",
     "build": "rollup -c",
-    "autobuild": "rollup -c -w",
-    "dev": "run-p start:dev autobuild",
-    "start": "sirv public",
-    "start:dev": "sirv public --dev"
+    "start": "npm run start-regular",
+    "start-regular": "LAYOUT=regular run-p serve rollup",
+    "start-ls": "LAYOUT=longform-standard run-p serve rollup",
+    "start-lv": "LAYOUT=longform-visual run-p serve rollup",
+    "rollup": "rollup -c -w",
+    "serve": "sirv public --dev --port 5555 --host 0.0.0.0"
   }
 }

package/skeletons/custom-code-skeleton/q.config.json CHANGED Viewed

@@ -4,11 +4,11 @@
       "environments": [
         {
           "name": "staging",
-          "id": ""
+          "id": "staging-id-not-set"
         },
         {
           "name": "production",
-          "id": ""
+          "id": "prod-id-not-set"
         }
       ],
       "item": {

package/skeletons/custom-code-skeleton/rollup.config.js CHANGED Viewed

@@ -1,17 +1,28 @@
-import resolve from "@rollup/plugin-node-resolve";
+import * as fs from "fs";
+import * as path from "path";
+import nodeResolve from "@rollup/plugin-node-resolve";
 import commonjs from "@rollup/plugin-commonjs";
-import buble from "@rollup/plugin-buble";
 import json from "@rollup/plugin-json";
-import svg from "rollup-plugin-svg";
 import html from "@rollup/plugin-html";
 import svelte from "rollup-plugin-svelte";
 import { terser } from "rollup-plugin-terser";
-import css from "rollup-plugin-css-only";
 import livereload from "rollup-plugin-livereload";
-import packageConfig from "./package.json";
+import scss from "rollup-plugin-scss";
+import postcss from "postcss";
+import cssnano from "cssnano";
+import autoprefixer from "autoprefixer";
 import qConfig from "./q.config.json";
+import typescript from '@rollup/plugin-typescript';
+import image from '@rollup/plugin-image';
+import alias from '@rollup/plugin-alias';
+import { createContentWidthQElement, createFullwidthQElement, getHtml, createSubtitle, createParagraph  } from '@nzz/nzz.ch-static';
+// Which nzz layout to use?
+const LAYOUT = process.env.LAYOUT;
+const builtCssFilename = 'bundle';
 const production = !process.env.ROLLUP_WATCH;
+const projectRootDir = path.resolve(__dirname);
 function getOutputConfigs() {
   const outputConfigs = [];
@@ -31,82 +42,126 @@ function getOutputConfigs() {
   return outputConfigs;
 }
-function getTemplate(options) {
-  return `<!DOCTYPE html>
-<html lang="de">
-  <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width">
-    <title>${packageConfig.name}</title>
-    <link rel="stylesheet" href="https://context-service.st.nzz.ch/stylesheet/all/nzz.ch.css" />
-    <link rel="stylesheet" href="https://service.sophie.nzz.ch/bundle/sophie-q@^1,sophie-input@^1,sophie-font@^1,sophie-color@^1,sophie-viz-color@^1,sophie-legend@^1.css" />
-    <link rel="stylesheet" href="bundle.css" />
-  </head>
-  <!-- we have four different article templates, since the article itself has the same structure in each template
-  we can use either of these classes: regular, longformstandard, regular, opinion
-  if one changes the class attached to body tag one should change the class in section tag accordingly (maybe further adjustments needed too) -->
-  <body class="regular">
-    <div id="__nzz">
-      <div id="__layout">
-        <div class="page--article-id">
-          <div class="pageholder">
-            <div class="nzz-container">
-              <div class="nzz-page-transition">
-                <div class="article">
-                  <!-- also here change layout--{template} accordingly -->
-                  <section class="container container--article layout--regular">
-                    <!-- default = content width, for fullwidth, small left/right one has to add one of
-                      the following classes accordingly: widget--fullwidth, widget--left, widget--right-->
-                    <div class="articlecomponent q-embed widget--qembed regwalled">
-                      <div>
-                        <div class="s-q-item" id="container"></div>
-                        <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=Map,URL,Promise,fetch,URLSearchParams,Array.prototype.find,Array.prototype.findIndex,Object.entries,Array.prototype.includes,CustomEvent,Array.from,String.prototype.startsWith&flags=gated&unknown=polyfill"></script>
-                        <script src="${options.files.js[0].fileName}"></script>
-                      </div>
-                    </div>
-                  </section>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </body>
-</html>`;
-}
 function getHtmlOptions() {
   return {
-    fileName: "index.html",
-    template: function (options) {
-      return getTemplate(options);
-    },
+      fileName: 'index.html',
+      template: function (options) {
+          return getHtml({
+              // These 3 options are the most important. Without them the static website will not function.
+              layout: LAYOUT, // Type of layout.
+              builtCssFilename, // Will be appended at the end of <head>.
+              builtJsFilename: options.files.js[0].fileName, // Will appended to the end of <body>.
+              // Create mock elements to simulate your article.
+              content: `
+                  ${createSubtitle('Test Subtitle')}
+                  ${createParagraph('Test paragraph')}
+                  ${createFullwidthQElement('custom-code-fw')}
+                  ${createContentWidthQElement('custom-code-cw')}
+              `,
+              // Other options.
+              author: 'Max Musterman',
+              lead: 'Test lead.',
+              title: 'Test title',
+              // Links to other css files that need to be loaded.
+              // Will be appended to <head> but before the bundled css file of your app.
+              customCssLinks: [
+                  'https://service.sophie.nzz.ch/bundle/sophie-q@^1,sophie-input@^1,sophie-font@^1,sophie-color@^1,sophie-viz-color@^1,sophie-legend@^1.css',
+              ],
+              // Links to other js filed that need to be loaded.
+              // Will be appended at the end of the body, but before the built js file for the app.
+              customJsLinks: [
+                  'https://cdn.polyfill.io/v2/polyfill.min.js?features=Map,URL,Promise,fetch,URLSearchParams,Array.prototype.find,Array.prototype.findIndex,Object.entries,Array.prototype.includes,CustomEvent,Array.from,String.prototype.startsWith&flags=gated&unknown=polyfill'
+              ],
+          });
+      },
   };
 }
+function getPostcssPlugins(isProduction) {
+  const postcssPlugins = [autoprefixer];
+  if (isProduction) {
+    postcssPlugins.push(cssnano);
+  }
+  return postcssPlugins;
+}
+function createOutputCssFunction() {
+  const outputCssFunction = (styles, styleNodes) => {
+    const publicDir = "public";
+    if (!fs.existsSync(publicDir)) {
+      fs.mkdirSync(publicDir);
+    }
+    fs.writeFileSync(`${publicDir}/${builtCssFilename}.css`, styles);
+  };
+  return outputCssFunction;
+}
+function getSassConfig(isProduction) {
+  const config = {
+    outputStyle: isProduction ? "compressed" : "expanded",
+    // Sourcemap generation (specifically writing the file to system) is currently not supported by rollup-plugin-sass (but soon!)
+    // See: https://github.com/thgh/rollup-plugin-scss/issues/7
+    // outFile: path.join(__dirname, "/public/default.css"), // <- Uncomment after: https://github.com/thgh/rollup-plugin-scss/issues/7
+    sourceMap: !isProduction,
+    sourceMapEmbed: !isProduction, // Remove after: https://github.com/thgh/rollup-plugin-scss/issues/7
+    failOnError: !isProduction,
+    watch: [path.join(__dirname, "/src")],
+    processor: (css) =>
+      postcss(getPostcssPlugins(isProduction))
+        .process(css, {
+          from: path.join(__dirname, `/public/${builtCssFilename}.css`),
+          to: path.join(__dirname, `/public/${builtCssFilename}.css`),
+          map: isProduction ? false : { inline: true }, // Set to false after: https://github.com/thgh/rollup-plugin-scss/issues/7
+        })
+        .then((result) => result.css),
+    output: createOutputCssFunction(),
+  };
+  return config;
+}
 export default {
-  input: production ? "src/main-prod.js" : "src/main.js",
+  input: production ? "src/main-prod.ts" : "src/main.ts",
   output: getOutputConfigs(),
   plugins: [
+    alias({
+      entries: [
+        { find: '@src', replacement: path.resolve(projectRootDir, 'src') },
+        { find: '@interfaces', replacement: path.resolve(projectRootDir, 'src/interfaces.ts') },
+      ]
+    }),
+    typescript({ sourceMap: !production }),
     json(),
-    svg({ base64: true }),
+    image(),
     svelte({
       compilerOptions: {
         // enable run-time checks when not in production
         dev: !production,
       },
     }),
-    // we'll extract any component CSS out into
-    // a separate file - better for performance
-    css({ output: "bundle.css" }),
+    // All styles have to be written in .scss files (inside '/src')
+    // Sass files (except partials) have to be imported in main.scss file (Use '@use' instead of '@import')
+    // Partials are placed in '/src/styles' (e.g. _variables.scss, _helpers.scss)
+    // Partials are imported directly in other sass files (e.g. _variables.scss -> '@use "variables"')
+    scss({ ...getSassConfig(production) }),
     // If you have external dependencies installed from
     // npm, you'll most likely need these plugins. In
     // some cases you'll need additional configuration —
     // consult the documentation for details:
     // https://github.com/rollup/rollup-plugin-commonjs
-    resolve({ browser: true }),
+    nodeResolve({ browser: true }),
     commonjs(),
     // Generate a index.html file when not building for production
@@ -114,16 +169,7 @@ export default {
     // Watch the `public` directory and refresh the
     // browser on changes when not in production
-    !production && livereload("public"),
-    // If we're building for production (npm run build
-    // instead of npm run dev), transpile and minify
-    production &&
-      buble({
-        transforms: {
-          dangerousForOf: true,
-        },
-      }),
+    !production && livereload({ watch: ["public"], delay: 800 }),
     production && terser(),
   ],
   watch: {

package/skeletons/custom-code-skeleton/src/App.scss ADDED Viewed

@@ -0,0 +1,5 @@
+.custom-code-item {
+  color: salmon;
+  border: 1px solid #000;
+  margin-bottom: 20px;
+}

package/skeletons/custom-code-skeleton/src/App.svelte CHANGED Viewed

@@ -2,10 +2,6 @@
   export let name;
 </script>
-<style>
-  .title {
-    color: brown;
-  }
-</style>
-<h1 class="title s-font-title">Custom Code {name}</h1>
+<div class="custom-code-item">
+  Custom Code {name}
+</div>

package/skeletons/custom-code-skeleton/src/interfaces.ts ADDED Viewed

File without changes

package/skeletons/custom-code-skeleton/src/{main-prod.js → main-prod.ts} RENAMED Viewed

@@ -1,3 +1,4 @@
 // file is used for the production since the initializing of the app will happen in Q
 import App from "./App.svelte";
+import "./main.scss";
 export default App;

package/skeletons/custom-code-skeleton/src/main.scss ADDED Viewed

	@@ -0,0 +1 @@
1	+ @use "App.scss";

package/skeletons/custom-code-skeleton/src/main.ts ADDED Viewed

@@ -0,0 +1,18 @@
+import App from "./App.svelte";
+import "./main.scss";
+const app = new App({
+  target: document.querySelector("#custom-code-fw"),
+  props: {
+    name: "custom-code-skeleton - Fullwidth",
+  },
+});
+new App({
+  target: document.querySelector("#custom-code-cw"),
+  props: {
+    name: "custom-code-skeleton - Content Width",
+  },
+});
+export default app;

package/skeletons/custom-code-skeleton/tsconfig.json ADDED Viewed

@@ -0,0 +1,15 @@
+{
+    "extends": "@tsconfig/svelte/tsconfig.json",
+    "include": ["src/**/*"],
+    "exclude": ["node_modules/*", "__sapper__/*", "public/*"],
+    "compilerOptions": {
+        "lib": ["es2015", "DOM"],
+        "types": ["svelte"],
+        "outDir": "public",
+        "declaration": false,
+        "paths": {
+            "@src": ["./src/"],
+            "@interfaces": ["./src/interfaces.ts"]
+        }
+    }
+}

package/skeletons/server-skeleton/auth/routes.js CHANGED Viewed

@@ -12,9 +12,6 @@ module.exports = [
           password: Joi.string().required(),
         },
       },
-      cors: {
-        credentials: true,
-      },
     },
     handler: async (request, h) => {
       if (
@@ -33,9 +30,6 @@ module.exports = [
     method: "GET",
     config: {
       auth: "q-auth",
-      cors: {
-        credentials: true,
-      },
     },
     handler: (request, h) => {
       if (!request.auth.isAuthenticated) {
@@ -83,9 +77,6 @@ module.exports = [
           allowUnknown: true,
         },
       },
-      cors: {
-        credentials: true,
-      },
     },
     handler: async (request, h) => {
       return "ok";

package/skeletons/server-skeleton/index.js CHANGED Viewed

@@ -57,9 +57,7 @@ async function start() {
         tools: toolsConfig,
         targets: require("./config/targets.js"),
       },
-      routes: {
-        cors: true,
-      },
+      routes: {},
     };
     server = Hapi.server(hapiOptions);

package/skeletons/tool-skeleton/.nvmrc CHANGED Viewed

	@@ -1 +1 @@
1	- 14
1	+ 16

package/skeletons/tool-skeleton/.travis.yml ADDED Viewed

@@ -0,0 +1,26 @@
+dist: trusty
+sudo: true
+services:
+  - docker
+language: node_js
+node_js:
+  - "16"
+cache:
+  directories:
+    - node_modules
+install:
+  - npm install
+before_script:
+  # TODO: Rename 'q-your-tool' to 'q-<tool-name>'
+  - DOCKER_IMAGE_NAME="q-your-tool"
+  - 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'
+# TODO: Create token for slack notifications with the slack bot, then insert below & uncomment lines
+# notifications:
+# slack:
+# secure: <Slack-Token>

package/skeletons/tool-skeleton/.vscode/settings.json ADDED Viewed

@@ -0,0 +1,5 @@
+{
+  "[svelte]": {
+    "editor.defaultFormatter": "svelte.svelte-vscode"
+  }
+}

package/skeletons/tool-skeleton/Dockerfile CHANGED Viewed

@@ -1,5 +1,5 @@
 # Use following version of node alpine as the base image
-FROM node:14-alpine
+FROM node:16-alpine
 # Set work directory for run/cmd
 WORKDIR /app

package/skeletons/tool-skeleton/LICENSE ADDED Viewed

@@ -0,0 +1,20 @@
+MIT License
+Copyright (c) 2021 NZZ
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+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.

package/skeletons/tool-skeleton/README.md CHANGED Viewed

@@ -41,7 +41,7 @@ npx @nzz/q-cli server
 Run the Q tool:
 ```
-node index.js
+npm run dev
 ```
 [to the top](#table-of-contents)

package/skeletons/tool-skeleton/index.js CHANGED Viewed

@@ -1,12 +1,7 @@
 const Hapi = require("@hapi/hapi");
 const Joi = require("joi");
-const server = Hapi.server({
-  port: process.env.PORT || 3000,
-  routes: {
-    cors: true,
-  },
-});
+const server = Hapi.server({ port: process.env.PORT || 3000 });
 server.validator(Joi);
 const routes = require("./routes/routes.js");