@duetds/cli 3.0.49 → 3.0.51

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@duetds/cli",
-  "version": "3.0.49",
+  "version": "3.0.51",
   "description": "This package includes Duet Design System CLI.",
   "license": "SEE LICENSE IN LICENSE.md",
   "author": "LocalTapiola Services Ltd <duetdesignsystem@lahitapiola.fi>",
@@ -23,14 +23,14 @@
   },
   "dependencies": {
     "arg": "4.1.3",
-    "chalk": "3.0.0",
+    "chalk": "4.1.2",
     "esm": "3.2.25",
-    "inquirer": "7.2.0",
+    "inquirer": "8.2.3",
     "listr": "0.14.3",
     "ncp": "2.0.0"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "25d8b210a5cff486da46eb36763935c97d365921"
+  "gitHead": "fcd59bc7a2617a1497b452bca20d89d08252f21c"
 }

package/templates/eleventy/2.0.1/.eleventy.js

@@ -0,0 +1,38 @@
+/**
+ * DUET ELEVENTY CONFIGURATION
+ */
+module.exports = function (config) {
+  // Enable data deep merge https://www.11ty.dev/docs/data-deep-merge/
+  config.setDataDeepMerge(true)
+
+  // Dom diffing doesn't work well with shadow DOM.
+  config.setServerOptions({
+    domDiff: false,
+  })
+
+  // Copy static assets to dist on build.
+  // You can add more here if and when needed.
+  config.addPassthroughCopy("./src/assets")
+  config.addPassthroughCopy("./src/js")
+  config.addPassthroughCopy("./src/favicon.ico")
+  config.addPassthroughCopy("./src/manifest.json")
+
+  return {
+    // If your site lives in a different subdirectory, change this.
+    // Leading or trailing slashes are all normalized away, so don’t worry about it.
+    // If you don’t have a subdirectory, use "" or "/" (they do the same thing)
+    // This is only used for URLs (it does not affect your file structure)
+    pathPrefix: "/",
+    templateFormats: ["md", "njk", "html"],
+    markdownTemplateEngine: "njk",
+    htmlTemplateEngine: "njk",
+    dataTemplateEngine: false,
+    passthroughFileCopy: true,
+    dir: {
+      input: "src",
+      includes: "includes",
+      data: "data",
+      output: "dist",
+    },
+  }
+}

package/templates/eleventy/2.0.1/.prettierignore

@@ -0,0 +1,6 @@
+package.json
+package-lock.json
+src/includes/header.njk
+src/includes/footer.njk
+node_modules/**/*
+src/js/components/**/*

package/templates/eleventy/2.0.1/README.md

@@ -0,0 +1,64 @@
+# Duet Eleventy Template
+
+This is a [Eleventy](https://www.11ty.dev/) project template for [Duet Design System](https://www.duetds.com). This starter template comes with support for [Duet Web Components](https://www.duetds.com/components/). To learn more about Eleventy and what’s possible, see [Eleventy documentation](https://www.11ty.dev/docs/).
+
+## Features
+
+- Comes with [Duet Web Components](https://www.duetds.com/components/).
+- Supports [Duet Design Tokens](https://www.duetds.com/tokens/) in SCSS without additional configuration.
+- Comes with automated build and deploy steps for prototyping.
+- Additionally comes with [Duet Fonts](https://www.duetds.com/typography/) and [Duet CSS Framework](https://www.duetds.com/css-framework/) preconfigured.
+
+## Development
+
+Before moving further, please make sure you have [Node.js](https://nodejs.org/en/) 12.x or later installed on your machine. You can install the latest version through their website. Once you have Node.js installed, follow the below steps to get started.
+
+1. Run `npm install` in the root directory of this project to install the dependencies.
+2. Then run `npm start` to start up the server and development environment. This automatically opens up a new browser window showing `http://localhost:8000`.
+3. If you wish to test the production build, you can start up the server in production mode by running `npm run start:prod`. Please note that this makes Eleventy do JS+CSS minification with every change so it might slow down the development experience.
+4. This template ships with Prettier configuration. To enable HTML formatting for `.njk` templates, add the following to your VSCode settings.json:
+
+```json
+{
+  "files.associations": {
+    "*.njk": "html"
+  }
+}
+```
+
+## Integration Tests
+
+Run `npm run test` to run integration tests.
+
+## Building
+
+Run `npm run build` to build a static website under `dist` that can be deployed using GitHub Pages, Azure Cloud, or Amazon S3.
+
+## Project Structure
+
+```
+├─ src/
+│  ├─ assets/
+│  ├─ css/
+│  │  ├─ main.scss
+│  │  └─ partials/
+│  │     └─ example.scss
+│  ├─ data/
+│  ├─ includes/
+│  │  ├─ layout.njk
+│  │  ├─ header.njk
+│  │  └─ footer.njk
+│  ├─ js/
+│  ├─ index.njk
+│  └─ ...
+├─ .eleventy.js
+└─ gulpfile.js
+```
+
+## Usage
+
+For more usage instructions, please see [Duet Design System documentation](https://www.duetds.com).
+
+## Copyright
+
+Copyright © 2020 LocalTapiola Services Ltd. For license, please see LICENSE.md.

package/templates/eleventy/2.0.1/gulpfile.js

@@ -0,0 +1,60 @@
+/**
+ * DUET GULP CONFIGURATION
+ */
+const gulp = require("gulp")
+const sass = require("gulp-sass")(require("sass"))
+const concat = require("gulp-concat")
+const rename = require("gulp-rename")
+const terser = require("gulp-terser")
+const log = require("fancy-log")
+const color = require("ansi-colors")
+
+let baseHref
+if (process.env.DUET_TOKEN) {
+  baseHref = "./dist/" + process.env.DUET_TOKEN + "/"
+} else {
+  baseHref = "./dist/"
+}
+
+// A Task that generates JavaScript bundle
+gulp.task("js", function () {
+  return (
+    gulp
+      // You can add more scripts below if necessary
+      .src(["./src/js/scripts.js"])
+      .pipe(concat("scripts.concat.js"))
+      .pipe(gulp.dest(baseHref + "js"))
+      .pipe(rename("scripts.min.js"))
+      .pipe(terser())
+      .on("error", function (err) {
+        log(color.red("[Error]"), err.toString())
+      })
+      .pipe(gulp.dest(baseHref + "js"))
+  )
+})
+
+// A Task that generates CSS from Sass
+gulp.task("sass", function () {
+  return gulp
+    .src("./src/css/**/*.scss")
+    .pipe(
+      sass({
+        outputStyle: "compressed",
+      }).on("error", sass.logError)
+    )
+    .pipe(gulp.dest(baseHref + "css"))
+})
+
+// Define watch tasks
+gulp.task("sass:watch", function () {
+  gulp.watch("./src/css/**/*.scss", gulp.series("sass"))
+})
+gulp.task("js:watch", function () {
+  gulp.watch("./src/js/**/*.js", gulp.series("js"))
+})
+
+// Define the default task
+gulp.task("default", gulp.parallel("sass", "js", "sass:watch", "js:watch"))
+
+// Define the build task
+gulp.task("build", gulp.parallel("sass", "js"))

package/templates/eleventy/2.0.1/package.file

@@ -0,0 +1,51 @@
+{
+  "name": "duet-eleventy-template",
+  "version": "2.0.0",
+  "description": "This package includes Duet Eleventy Template project.",
+  "bugs": {
+    "email": "duetdesignsystem@lahitapiola.fi"
+  },
+  "license": "SEE LICENSE IN LICENSE.md",
+  "author": "LocalTapiola Services Ltd <duetdesignsystem@lahitapiola.fi>",
+  "main": "index.js",
+  "scripts": {
+    "build": "cross-env ELEVENTY_ENV=production npm-run-all --sequential copy:components \"gulp build\" eleventy",
+    "build:prototype": "cross-env ELEVENTY_ENV=production npm-run-all --sequential build:clean build:prepare build:login copy:components \"gulp build\" build:template build:encrypt",
+    "build:clean": "rm -rf ./dist",
+    "build:prepare": "mkdir -p ./dist",
+    "build:login": "ncp ./.github/workflows/login.template ./dist/index.html",
+    "build:template": "eleventy --input=./src --output=./dist/$DUET_TOKEN",
+    "build:encrypt": "node ./.github/workflows/encrypt.js $DUET_TOKEN passphrase",
+    "copy:components": "ncp ./node_modules/@duetds/components/lib ./src/js/components",
+    "eleventy": "eleventy",
+    "gulp": "gulp",
+    "server": "eleventy --serve --port=8000",
+    "start": "cross-env ELEVENTY_ENV=development npm-run-all --parallel copy:components gulp server",
+    "start:prod": "cross-env ELEVENTY_ENV=production npm-run-all --parallel copy:components gulp server",
+    "test": "npm-run-all --sequential \"gulp build\" \"eleventy --dryrun\""
+  },
+  "dependencies": {
+    "@11ty/eleventy": "2.0.1",
+    "@duetds/components": "latest",
+    "@duetds/css": "latest",
+    "@duetds/icons": "latest",
+    "@duetds/tokens": "latest",
+    "ansi-colors": "4.1.1",
+    "cross-env": "7.0.1",
+    "crypto-js": "4.0.0",
+    "fancy-log": "1.3.3",
+    "gulp": "4.0.2",
+    "gulp-concat": "2.6.1",
+    "gulp-rename": "2.0.0",
+    "gulp-sass": "5.1.0",
+    "gulp-terser": "1.2.0",
+    "html-minifier": "4.0.0",
+    "ncp": "2.0.0",
+    "npm-run-all": "4.1.5",
+    "prettier": "2.2.1",
+    "replace-in-file": "5.0.2",
+    "sass": "1.62.1",
+    "uglify-js": "3.8.0",
+    "yargs": "15.1.0"
+  }
+}

package/templates/eleventy/2.0.1/src/css/main.scss

@@ -0,0 +1,12 @@
+/* MAIN SCSS PARTIAL
+--------------------------------------------- */
+@charset "utf-8";
+
+// Import Duet Design Tokens
+@import "../../node_modules/@duetds/tokens/lib/tokens.scss";
+
+// Import Duet CSS Framework
+@import "../../node_modules/@duetds/css/lib/duet.min";
+
+// Import any custom SCSS partials below
+@import "partials/example.scss";

package/templates/eleventy/2.0.1/src/css/partials/_example.scss

@@ -0,0 +1,6 @@
+/* EXAMPLE PARTIAL
+--------------------------------------------- */
+
+.example {
+  color: $color-primary;
+}

package/templates/eleventy/2.0.1/src/data/duet.js

@@ -0,0 +1,18 @@
+/**
+ * DUET ELEVENTY DATA FILE
+ */
+
+// Create a random string for cache busting needs
+function chr4() {
+  return Math.random().toString(16).slice(-4)
+}
+
+const githubProject = process.env.DUET_PROJECT_NAME ? process.env.DUET_PROJECT_NAME.toLowerCase() : ""
+
+// Export environment variable and the current version so that
+// they can be used on our website.
+module.exports = {
+  environment: process.env.ELEVENTY_ENV,
+  baseHref: process.env.DUET_TOKEN ? `/${githubProject}/${process.env.DUET_TOKEN}` : "",
+  version: chr4() + "-" + chr4() + "-" + chr4(),
+}

package/templates/eleventy/2.0.1/src/includes/footer.njk

@@ -0,0 +1,15 @@
+<duet-footer
+  logo-href="{{ duet.baseHref }}"
+  language="fi"
+  items='[
+    { "label": "Hae korvausta", "href": "#", "icon": "navigation-make-claim" },
+    { "label": "Osta vakuutus", "href": "#", "icon": "action-buy-insurance" },
+    { "label": "Yhteystiedot", "href": "#", "icon": "form-tel" }
+  ]'
+  menu='[
+    { "label": "Turvallisuus ja käyttöehdot", "href": "#" },
+    { "label": "Evästeet", "href": "#" },
+    { "label": "Henkilötietojen käsittely", "href": "#" }
+  ]'
+>
+</duet-footer>

package/templates/eleventy/2.0.1/src/includes/header.njk

@@ -0,0 +1,24 @@
+<duet-header
+  language="fi"
+  skip-to-id="#content"
+  contact="Ota yhteyttä"
+  logo-href="{{ duet.baseHref }}"
+  current-href="{{ duet.baseHref }}{{ page.url }}"
+  items='[
+    { "label": "Etusivu", "href": "{{ duet.baseHref }}/" },
+    { "label": "Vakuutukset", "href": "{{ duet.baseHref }}/vakuutukset/" },
+    { "label": "Vahinkoasiat", "href": "{{ duet.baseHref }}/vahinkoasiat/" }
+  ]'
+  language-items='[
+    { "label": "Suomeksi", "country": "fi", "href": "#" },
+    { "label": "På Svenska", "country": "sv", "href": "#" },
+    { "label": "In English", "country": "en", "href": "#" }
+  ]'
+  contact-items='[
+    { "label": "Lähetä viesti", "href": "#" },
+    { "label": "Avaa chat", "href": "#" },
+    { "label": "Yhteystiedot", "href": "#" }
+  ]'
+  session='{ "label": "Kirjaudu ulos", "href": "#", "type": "logout" }'
+  user='{ "label": "Laura", "href": "#" }'>
+</duet-header>

package/templates/eleventy/2.0.1/src/includes/layout.njk

@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="fi" {% if html_class %}class="{{ html_class }}" {% endif %}>
+  <head>
+    <meta charset="utf-8" />
+    <meta name="author" content="LähiTapiola" />
+    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
+    <meta name="format-detection" content="telephone=no" />
+    <meta name="robots" content="noindex,nofollow" />
+    <title>{% if title %}{{ title }} | {% endif %}LähiTapiola</title>
+    <link rel="icon" href="{{ duet.baseHref }}/favicon.ico" />
+    <link rel="modulepreload" href="{{ duet.baseHref }}/js/components/duet/duet.esm.js?v={{ duet.version }}" />
+    <link rel="apple-touch-icon" href="{{ duet.baseHref }}/assets/img/apple-touch-icon-180x180.png" />
+    <link rel="stylesheet" href="https://cdn.duetds.com/api/fonts/1.3.12/lib/localtapiola.css" />
+    <link rel="stylesheet" href="https://cdn.duetds.com/api/fonts/1.3.12/lib/turva.css" />
+    <link rel="stylesheet" href="{{ duet.baseHref }}/css/main.css?v={{ duet.version }}" />
+    <link rel="manifest" href="{{ duet.baseHref }}/manifest.json" />
+    <script type="module" src="{{ duet.baseHref }}/js/components/duet/duet.esm.js?v={{ duet.version }}"></script>
+    <script nomodule src="{{ duet.baseHref }}/js/components/duet/duet.js?v={{ duet.version }}"></script>
+    <script src="{{ duet.baseHref }}/js/scripts.min.js?v={{ duet.version }}"></script>
+  </head>
+  <body>
+    {% include "header.njk" %}
+    {{ content | safe }}
+    {% include "footer.njk" %}
+  </body>
+</html>

package/templates/eleventy/2.0.1/src/index.njk

@@ -0,0 +1,58 @@
+---
+layout: layout.njk
+---
+
+<duet-hero
+  heading="Etusivu"
+  image="https://cdn.duetds.com/api/assets/illustrations/placeholder-light.svg"
+  button-label="Toimintopainike"
+  button-url="/"
+  margin="none"
+  id="content"
+  description="Tämä teksti on luotu Hero-komponentin description-asetuksella. Voit lisätä tähän esimerkiksi ingressin.">
+</duet-hero>
+<duet-layout sticky>
+  <div slot="main">
+    <duet-card padding="large">
+      <duet-heading level="h2">Pääpalsta</duet-heading>
+      <duet-paragraph>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+        magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
+        <duet-link url="#">ullamco laboris nisi ut aliquip</duet-link> ex ea commodo consequat. Duis aute irure dolor in
+        reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
+        non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+      </duet-paragraph>
+      <duet-paragraph>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+        magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+        consequat.
+      </duet-paragraph>
+      <duet-heading level="h3">Otsikko 3</duet-heading>
+      <duet-paragraph>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+        magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.
+      </duet-paragraph>
+      <duet-heading level="h4">Otsikko 4</duet-heading>
+      <duet-paragraph>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+        magna aliqua.
+      </duet-paragraph>
+      <duet-heading level="h5">Otsikko 5</duet-heading>
+      <duet-paragraph>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+        magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+        consequat.
+      </duet-paragraph>
+      <duet-heading level="h6">Otsikko 6</duet-heading>
+      <duet-paragraph>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+      </duet-paragraph>
+    </duet-card>
+  </div>
+  <div slot="sidebar">
+    <duet-card padding="large" heading="Sivupalsta">
+      Sivupalstaa voidaan käyttää pääsisältöön liittyvän tiedon näyttämiseen tai vaihtoehtoisesti nostamaan esiin
+      aiheeseen liittyvää muuta sisältöä.
+    </duet-card>
+  </div>
+</duet-layout>

package/templates/eleventy/2.0.1/src/js/scripts.js

@@ -0,0 +1 @@
+// Include any custom JavaScript here

package/templates/eleventy/2.0.1/src/manifest.json

@@ -0,0 +1,19 @@
+{
+  "icons": [
+    {
+      "src": "/assets/img/apple-touch-icon-180x180.png",
+      "sizes": "180x180",
+      "type": "image/png"
+    },
+    {
+      "src": "/assets/img/android-chrome-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "/assets/img/splash-screen-icon-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ]
+}

package/templates/eleventy/2.0.1/src/robots.txt

@@ -0,0 +1,8 @@
+# www.robotstxt.org/
+
+# Allow crawling of all content
+User-agent: *
+Disallow:
+
+User-agent: Twitterbot
+Disallow:

package/templates/eleventy/2.0.1/src/vahinkoasiat.njk

@@ -0,0 +1,43 @@
+---
+title: Vahinkoasiat
+layout: layout.njk
+html_class: "duet-bg-gradient"
+---
+
+<duet-layout center>
+  <div slot="main">
+    <duet-card padding="large">
+      <duet-heading level="h1" visual-level="h2">Vahinkoasiat</duet-heading>
+      <duet-paragraph>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+        magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
+        <duet-link url="#">ullamco laboris nisi ut aliquip</duet-link> ex ea commodo consequat. Duis aute irure dolor in
+        reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
+        non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+      </duet-paragraph>
+      <duet-paragraph>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+        magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+        consequat.
+      </duet-paragraph>
+      <duet-heading level="h3">Otsikko 3</duet-heading>
+      <duet-paragraph>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+        magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.
+      </duet-paragraph>
+      <duet-heading level="h4">Otsikko 4</duet-heading>
+      <duet-paragraph>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+        magna aliqua.
+      </duet-paragraph>
+      <duet-heading level="h5">Otsikko 5</duet-heading>
+      <duet-paragraph>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+        magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+        consequat.
+      </duet-paragraph>
+      <duet-heading level="h6">Otsikko 6</duet-heading>
+      <duet-paragraph>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</duet-paragraph>
+    </duet-card>
+  </div>
+</duet-layout>

package/templates/eleventy/2.0.1/src/vakuutukset.njk

@@ -0,0 +1,49 @@
+---
+title: Vakuutukset
+layout: layout.njk
+html_class: "duet-bg-gradient"
+---
+
+<duet-layout sticky id="content">
+  <div slot="main">
+    <duet-card padding="large">
+      <duet-heading level="h1" visual-level="h2">Vakuutukset</duet-heading>
+      <duet-paragraph>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+        magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
+        <duet-link url="#">ullamco laboris nisi ut aliquip</duet-link> ex ea commodo consequat. Duis aute irure dolor in
+        reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
+        non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+      </duet-paragraph>
+      <duet-paragraph>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+        magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+        consequat.
+      </duet-paragraph>
+      <duet-heading level="h3">Otsikko 3</duet-heading>
+      <duet-paragraph>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+        magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.
+      </duet-paragraph>
+      <duet-heading level="h4">Otsikko 4</duet-heading>
+      <duet-paragraph>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+        magna aliqua.
+      </duet-paragraph>
+      <duet-heading level="h5">Otsikko 5</duet-heading>
+      <duet-paragraph>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+        magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+        consequat.
+      </duet-paragraph>
+      <duet-heading level="h6">Otsikko 6</duet-heading>
+      <duet-paragraph>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</duet-paragraph>
+    </duet-card>
+  </div>
+  <div slot="sidebar">
+    <duet-card padding="large" heading="Sivupalsta">
+      Sivupalstaa voidaan käyttää pääsisältöön liittyvän tiedon näyttämiseen tai vaihtoehtoisesti nostamaan esiin
+      aiheeseen liittyvää muuta sisältöä.
+    </duet-card>
+  </div>
+</duet-layout>

package/templates/eleventy-ssr/2.0.1/.eleventy.js

@@ -0,0 +1,91 @@
+/**
+ * DUET ELEVENTY CONFIGURATION
+ */
+const hydrate = require("@duetds/components/hydrate")
+const htmlmin = require("html-minifier")
+const UglifyJS = require("uglify-js")
+
+module.exports = function (config) {
+  // Enable data deep merge https://www.11ty.dev/docs/data-deep-merge/
+  config.setDataDeepMerge(true)
+
+  // Dom diffing doesn't work well with shadow DOM.
+  config.setServerOptions({
+    domDiff: false,
+  })
+
+  // Copy static assets to dist on build.
+  // You can add more here if and when needed.
+  config.addPassthroughCopy("./src/assets")
+  config.addPassthroughCopy("./src/js")
+  config.addPassthroughCopy("./src/favicon.ico")
+  config.addPassthroughCopy("./src/manifest.json")
+
+  // Add JSMIN filter to Eleventy.
+  config.addFilter("jsmin", function (code) {
+    if (process.env.ELEVENTY_ENV == "production") {
+      let minified = UglifyJS.minify(code)
+      if (minified.error) {
+        console.log("UglifyJS error: ", minified.error)
+        return code
+      }
+      return minified.code
+    } else {
+      return code
+    }
+  })
+
+  // Server side render Duet’s components in production environment.
+  config.addTransform("hydrate", async (content, outputPath) => {
+    if (process.env.ELEVENTY_ENV == "production") {
+      if (outputPath.endsWith(".html")) {
+        try {
+          const results = await hydrate.renderToString(content, {
+            clientHydrateAnnotations: true,
+            removeScripts: false,
+            removeUnusedStyles: false,
+          })
+          return results.html
+        } catch (error) {
+          return error
+        }
+      }
+    }
+    return content
+  })
+
+  // Minify HTML in production environment.
+  config.addTransform("htmlmin", function (content, outputPath) {
+    if (process.env.ELEVENTY_ENV == "production") {
+      if (outputPath.endsWith(".html")) {
+        let minified = htmlmin.minify(content, {
+          useShortDoctype: true,
+          // Clientside hydration of components won’t work if comments are removed
+          removeComments: false,
+          collapseWhitespace: false,
+        })
+        return minified
+      }
+    }
+    return content
+  })
+
+  return {
+    // If your site lives in a different subdirectory, change this.
+    // Leading or trailing slashes are all normalized away, so don’t worry about it.
+    // If you don’t have a subdirectory, use "" or "/" (they do the same thing)
+    // This is only used for URLs (it does not affect your file structure)
+    pathPrefix: "/",
+    templateFormats: ["md", "njk", "html"],
+    markdownTemplateEngine: "njk",
+    htmlTemplateEngine: "njk",
+    dataTemplateEngine: false,
+    passthroughFileCopy: true,
+    dir: {
+      input: "src",
+      includes: "includes",
+      data: "data",
+      output: "dist",
+    },
+  }
+}

package/templates/eleventy-ssr/2.0.1/.prettierignore

@@ -0,0 +1,6 @@
+package.json
+package-lock.json
+src/includes/header.njk
+src/includes/footer.njk
+node_modules/**/*
+src/js/components/**/*

package/templates/eleventy-ssr/2.0.1/README.md

@@ -0,0 +1,64 @@
+# Duet Eleventy SSR Template
+
+This is a [Eleventy](https://www.11ty.dev/) SSR project template for [Duet Design System](https://www.duetds.com). This starter template comes with built in SSR (Server Side Rendering) support for [Duet Web Components](https://www.duetds.com/components/). To learn more about Eleventy and what’s possible, see [Eleventy documentation](https://www.11ty.dev/docs/).
+
+## Features
+
+- SSR (Server Side Rendering) support for [Duet Web Components](https://www.duetds.com/components/).
+- Supports [Duet Design Tokens](https://www.duetds.com/tokens/) in SCSS without additional configuration.
+- Comes with automated build and deploy steps for prototyping.
+- Additionally comes with [Duet Fonts](https://www.duetds.com/typography/) and [Duet CSS Framework](https://www.duetds.com/css-framework/) preconfigured.
+
+## Development
+
+Before moving further, please make sure you have [Node.js](https://nodejs.org/en/) 12.x or later installed on your machine. You can install the latest version through their website. Once you have Node.js installed, follow the below steps to get started.
+
+1. Run `npm install` in the root directory of this project to install the dependencies.
+2. Then run `npm start` to start up the server and development environment. This automatically opens up a new browser window showing `http://localhost:8000`.
+3. If you wish to test SSR, you can start up the server in production mode by running `npm run start:prod`. Please note that this makes Eleventy do server side rendering and JS+CSS minification with every change so it might slow down the development experience.
+4. This template ships with Prettier configuration. To enable HTML formatting for `.njk` templates, add the following to your VSCode settings.json:
+
+```json
+{
+  "files.associations": {
+    "*.njk": "html"
+  }
+}
+```
+
+## Integration Tests
+
+Run `npm run test` to run integration tests.
+
+## Building
+
+Run `npm run build` to build a static, server side rendered website under `dist` that can be deployed using GitHub Pages, Azure Cloud, or Amazon S3.
+
+## Project Structure
+
+```
+├─ src/
+│  ├─ assets/
+│  ├─ css/
+│  │  ├─ main.scss
+│  │  └─ partials/
+│  │     └─ example.scss
+│  ├─ data/
+│  ├─ includes/
+│  │  ├─ layout.njk
+│  │  ├─ header.njk
+│  │  └─ footer.njk
+│  ├─ js/
+│  ├─ index.njk
+│  └─ ...
+├─ .eleventy.js
+└─ gulpfile.js
+```
+
+## Usage
+
+For more usage instructions, please see [Duet Design System documentation](https://www.duetds.com).
+
+## Copyright
+
+Copyright © 2020 LocalTapiola Services Ltd. For license, please see LICENSE.md.

package/templates/eleventy-ssr/2.0.1/gulpfile.js

@@ -0,0 +1,60 @@
+/**
+ * DUET GULP CONFIGURATION
+ */
+const gulp = require("gulp")
+const sass = require("gulp-sass")(require("sass"))
+const concat = require("gulp-concat")
+const rename = require("gulp-rename")
+const terser = require("gulp-terser")
+const log = require("fancy-log")
+const color = require("ansi-colors")
+
+let baseHref
+if (process.env.DUET_TOKEN) {
+  baseHref = "./dist/" + process.env.DUET_TOKEN + "/"
+} else {
+  baseHref = "./dist/"
+}
+
+// A Task that generates JavaScript bundle
+gulp.task("js", function () {
+  return (
+    gulp
+      // You can add more scripts below if necessary
+      .src(["./src/js/scripts.js"])
+      .pipe(concat("scripts.concat.js"))
+      .pipe(gulp.dest(baseHref + "js"))
+      .pipe(rename("scripts.min.js"))
+      .pipe(terser())
+      .on("error", function (err) {
+        log(color.red("[Error]"), err.toString())
+      })
+      .pipe(gulp.dest(baseHref + "js"))
+  )
+})
+
+// A Task that generates CSS from Sass
+gulp.task("sass", function () {
+  return gulp
+    .src("./src/css/**/*.scss")
+    .pipe(
+      sass({
+        outputStyle: "compressed",
+      }).on("error", sass.logError)
+    )
+    .pipe(gulp.dest(baseHref + "css"))
+})
+
+// Define watch tasks
+gulp.task("sass:watch", function () {
+  gulp.watch("./src/css/**/*.scss", gulp.series("sass"))
+})
+gulp.task("js:watch", function () {
+  gulp.watch("./src/js/**/*.js", gulp.series("js"))
+})
+
+// Define the default task
+gulp.task("default", gulp.parallel("sass", "js", "sass:watch", "js:watch"))
+
+// Define the build task
+gulp.task("build", gulp.parallel("sass", "js"))

package/templates/eleventy-ssr/2.0.1/package.file

@@ -0,0 +1,51 @@
+{
+  "name": "duet-eleventy-template",
+  "version": "2.0.0",
+  "description": "This package includes Duet Eleventy SSR Template project.",
+  "bugs": {
+    "email": "duetdesignsystem@lahitapiola.fi"
+  },
+  "license": "SEE LICENSE IN LICENSE.md",
+  "author": "LocalTapiola Services Ltd <duetdesignsystem@lahitapiola.fi>",
+  "main": "index.js",
+  "scripts": {
+    "build": "cross-env ELEVENTY_ENV=production npm-run-all --sequential copy:components \"gulp build\" eleventy",
+    "build:prototype": "cross-env ELEVENTY_ENV=production npm-run-all --sequential build:clean build:prepare build:login copy:components \"gulp build\" build:template build:encrypt",
+    "build:clean": "rm -rf ./dist",
+    "build:prepare": "mkdir -p ./dist",
+    "build:login": "ncp ./.github/workflows/login.template ./dist/index.html",
+    "build:template": "eleventy --input=./src --output=./dist/$DUET_TOKEN",
+    "build:encrypt": "node ./.github/workflows/encrypt.js $DUET_TOKEN passphrase",
+    "copy:components": "ncp ./node_modules/@duetds/components/lib ./src/js/components",
+    "eleventy": "eleventy",
+    "gulp": "gulp",
+    "server": "eleventy --serve --port=8000",
+    "start": "cross-env ELEVENTY_ENV=development npm-run-all --parallel copy:components gulp server",
+    "start:prod": "cross-env ELEVENTY_ENV=production npm-run-all --parallel copy:components gulp server",
+    "test": "npm-run-all --sequential \"gulp build\" \"eleventy --dryrun\""
+  },
+  "dependencies": {
+    "@11ty/eleventy": "2.0.1",
+    "@duetds/components": "latest",
+    "@duetds/css": "latest",
+    "@duetds/icons": "latest",
+    "@duetds/tokens": "latest",
+    "ansi-colors": "4.1.1",
+    "cross-env": "7.0.1",
+    "crypto-js": "4.0.0",
+    "fancy-log": "1.3.3",
+    "gulp": "4.0.2",
+    "gulp-concat": "2.6.1",
+    "gulp-rename": "2.0.0",
+    "gulp-sass": "5.1.0",
+    "gulp-terser": "1.2.0",
+    "html-minifier": "4.0.0",
+    "ncp": "2.0.0",
+    "npm-run-all": "4.1.5",
+    "prettier": "2.2.1",
+    "replace-in-file": "5.0.2",
+    "sass": "1.62.1",
+    "uglify-js": "3.8.0",
+    "yargs": "15.1.0"
+  }
+}

package/templates/eleventy-ssr/2.0.1/src/css/main.scss

@@ -0,0 +1,12 @@
+/* MAIN SCSS PARTIAL
+--------------------------------------------- */
+@charset "utf-8";
+
+// Import Duet Design Tokens
+@import "../../node_modules/@duetds/tokens/lib/tokens.scss";
+
+// Import Duet CSS Framework
+@import "../../node_modules/@duetds/css/lib/duet.min";
+
+// Import any custom SCSS partials below
+@import "partials/example.scss";

package/templates/eleventy-ssr/2.0.1/src/css/partials/_example.scss

@@ -0,0 +1,6 @@
+/* EXAMPLE PARTIAL
+--------------------------------------------- */
+
+.example {
+  color: $color-primary;
+}

package/templates/eleventy-ssr/2.0.1/src/data/duet.js

@@ -0,0 +1,18 @@
+/**
+ * DUET ELEVENTY DATA FILE
+ */
+
+// Create a random string for cache busting needs
+function chr4() {
+  return Math.random().toString(16).slice(-4)
+}
+
+const githubProject = process.env.DUET_PROJECT_NAME ? process.env.DUET_PROJECT_NAME.toLowerCase() : ""
+
+// Export environment variable and the current version so that
+// they can be used on our website.
+module.exports = {
+  environment: process.env.ELEVENTY_ENV,
+  baseHref: process.env.DUET_TOKEN ? `/${githubProject}/${process.env.DUET_TOKEN}` : "",
+  version: chr4() + "-" + chr4() + "-" + chr4(),
+}

package/templates/eleventy-ssr/2.0.1/src/includes/footer.njk

@@ -0,0 +1,15 @@
+<duet-footer
+  logo-href="{{ duet.baseHref }}"
+  language="fi"
+  items='[
+    { "label": "Hae korvausta", "href": "#", "icon": "navigation-make-claim" },
+    { "label": "Osta vakuutus", "href": "#", "icon": "action-buy-insurance" },
+    { "label": "Yhteystiedot", "href": "#", "icon": "form-tel" }
+  ]'
+  menu='[
+    { "label": "Turvallisuus ja käyttöehdot", "href": "#" },
+    { "label": "Evästeet", "href": "#" },
+    { "label": "Henkilötietojen käsittely", "href": "#" }
+  ]'
+>
+</duet-footer>

package/templates/eleventy-ssr/2.0.1/src/includes/header.njk

@@ -0,0 +1,24 @@
+<duet-header
+  language="fi"
+  skip-to-id="#content"
+  contact="Ota yhteyttä"
+  logo-href="{{ duet.baseHref }}"
+  current-href="{{ duet.baseHref }}{{ page.url }}"
+  items='[
+    { "label": "Etusivu", "href": "{{ duet.baseHref }}/" },
+    { "label": "Vakuutukset", "href": "{{ duet.baseHref }}/vakuutukset/" },
+    { "label": "Vahinkoasiat", "href": "{{ duet.baseHref }}/vahinkoasiat/" }
+  ]'
+  language-items='[
+    { "label": "Suomeksi", "country": "fi", "href": "#" },
+    { "label": "På Svenska", "country": "sv", "href": "#" },
+    { "label": "In English", "country": "en", "href": "#" }
+  ]'
+  contact-items='[
+    { "label": "Lähetä viesti", "href": "#" },
+    { "label": "Avaa chat", "href": "#" },
+    { "label": "Yhteystiedot", "href": "#" }
+  ]'
+  session='{ "label": "Kirjaudu ulos", "href": "#", "type": "logout" }'
+  user='{ "label": "Laura", "href": "#" }'>
+</duet-header>

package/templates/eleventy-ssr/2.0.1/src/includes/layout.njk

@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="fi" {% if html_class %}class="{{ html_class }}" {% endif %}>
+  <head>
+    <meta charset="utf-8" />
+    <meta name="author" content="LähiTapiola" />
+    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
+    <meta name="format-detection" content="telephone=no" />
+    <meta name="robots" content="noindex,nofollow" />
+    <title>{% if title %}{{ title }} | {% endif %}LähiTapiola</title>
+    <link rel="icon" href="{{ duet.baseHref }}/favicon.ico" />
+    <link rel="modulepreload" href="{{ duet.baseHref }}/js/components/duet/duet.esm.js?v={{ duet.version }}" />
+    <link rel="apple-touch-icon" href="{{ duet.baseHref }}/assets/img/apple-touch-icon-180x180.png" />
+    <link rel="stylesheet" href="https://cdn.duetds.com/api/fonts/1.3.12/lib/localtapiola.css" />
+    <link rel="stylesheet" href="https://cdn.duetds.com/api/fonts/1.3.12/lib/turva.css" />
+    <link rel="stylesheet" href="{{ duet.baseHref }}/css/main.css?v={{ duet.version }}" />
+    <link rel="manifest" href="{{ duet.baseHref }}/manifest.json" />
+    <script type="module" src="{{ duet.baseHref }}/js/components/duet/duet.esm.js?v={{ duet.version }}"></script>
+    <script nomodule src="{{ duet.baseHref }}/js/components/duet/duet.js?v={{ duet.version }}"></script>
+    <script src="{{ duet.baseHref }}/js/scripts.min.js?v={{ duet.version }}"></script>
+  </head>
+  <body>
+    {% include "header.njk" %}
+    {{ content | safe }}
+    {% include "footer.njk" %}
+  </body>
+</html>

package/templates/eleventy-ssr/2.0.1/src/index.njk

@@ -0,0 +1,58 @@
+---
+layout: layout.njk
+---
+
+<duet-hero
+  heading="Etusivu"
+  image="https://cdn.duetds.com/api/assets/illustrations/placeholder-light.svg"
+  button-label="Toimintopainike"
+  button-url="#"
+  margin="none"
+  id="content"
+  description="Tämä teksti on luotu Hero-komponentin description-asetuksella. Voit lisätä tähän esimerkiksi ingressin.">
+</duet-hero>
+<duet-layout sticky>
+  <div slot="main">
+    <duet-card padding="large">
+      <duet-heading level="h2">Pääpalsta</duet-heading>
+      <duet-paragraph>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+        magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
+        <duet-link url="#">ullamco laboris nisi ut aliquip</duet-link> ex ea commodo consequat. Duis aute irure dolor in
+        reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
+        non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+      </duet-paragraph>
+      <duet-paragraph>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+        magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+        consequat.
+      </duet-paragraph>
+      <duet-heading level="h3">Otsikko 3</duet-heading>
+      <duet-paragraph>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+        magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.
+      </duet-paragraph>
+      <duet-heading level="h4">Otsikko 4</duet-heading>
+      <duet-paragraph>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+        magna aliqua.
+      </duet-paragraph>
+      <duet-heading level="h5">Otsikko 5</duet-heading>
+      <duet-paragraph>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+        magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+        consequat.
+      </duet-paragraph>
+      <duet-heading level="h6">Otsikko 6</duet-heading>
+      <duet-paragraph>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+      </duet-paragraph>
+    </duet-card>
+  </div>
+  <div slot="sidebar">
+    <duet-card padding="large" heading="Sivupalsta">
+      Sivupalstaa voidaan käyttää pääsisältöön liittyvän tiedon näyttämiseen tai vaihtoehtoisesti nostamaan esiin
+      aiheeseen liittyvää muuta sisältöä.
+    </duet-card>
+  </div>
+</duet-layout>

package/templates/eleventy-ssr/2.0.1/src/js/scripts.js

@@ -0,0 +1 @@
+// Include any custom JavaScript here

package/templates/eleventy-ssr/2.0.1/src/manifest.json

@@ -0,0 +1,19 @@
+{
+  "icons": [
+    {
+      "src": "/assets/img/apple-touch-icon-180x180.png",
+      "sizes": "180x180",
+      "type": "image/png"
+    },
+    {
+      "src": "/assets/img/android-chrome-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "/assets/img/splash-screen-icon-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ]
+}

package/templates/eleventy-ssr/2.0.1/src/robots.txt

@@ -0,0 +1,8 @@
+# www.robotstxt.org/
+
+# Allow crawling of all content
+User-agent: *
+Disallow:
+
+User-agent: Twitterbot
+Disallow:

package/templates/eleventy-ssr/2.0.1/src/vahinkoasiat.njk

@@ -0,0 +1,43 @@
+---
+title: Vahinkoasiat
+layout: layout.njk
+html_class: "duet-bg-gradient"
+---
+
+<duet-layout center>
+  <div slot="main">
+    <duet-card padding="large">
+      <duet-heading level="h1" visual-level="h2">Vahinkoasiat</duet-heading>
+      <duet-paragraph>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+        magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
+        <duet-link url="#">ullamco laboris nisi ut aliquip</duet-link> ex ea commodo consequat. Duis aute irure dolor in
+        reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
+        non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+      </duet-paragraph>
+      <duet-paragraph>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+        magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+        consequat.
+      </duet-paragraph>
+      <duet-heading level="h3">Otsikko 3</duet-heading>
+      <duet-paragraph>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+        magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.
+      </duet-paragraph>
+      <duet-heading level="h4">Otsikko 4</duet-heading>
+      <duet-paragraph>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+        magna aliqua.
+      </duet-paragraph>
+      <duet-heading level="h5">Otsikko 5</duet-heading>
+      <duet-paragraph>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+        magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+        consequat.
+      </duet-paragraph>
+      <duet-heading level="h6">Otsikko 6</duet-heading>
+      <duet-paragraph>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</duet-paragraph>
+    </duet-card>
+  </div>
+</duet-layout>

package/templates/eleventy-ssr/2.0.1/src/vakuutukset.njk

@@ -0,0 +1,49 @@
+---
+title: Vakuutukset
+layout: layout.njk
+html_class: "duet-bg-gradient"
+---
+
+<duet-layout sticky id="content">
+  <div slot="main">
+    <duet-card padding="large">
+      <duet-heading level="h1" visual-level="h2">Vakuutukset</duet-heading>
+      <duet-paragraph>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+        magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
+        <duet-link url="#">ullamco laboris nisi ut aliquip</duet-link> ex ea commodo consequat. Duis aute irure dolor in
+        reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
+        non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+      </duet-paragraph>
+      <duet-paragraph>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+        magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+        consequat.
+      </duet-paragraph>
+      <duet-heading level="h3">Otsikko 3</duet-heading>
+      <duet-paragraph>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+        magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.
+      </duet-paragraph>
+      <duet-heading level="h4">Otsikko 4</duet-heading>
+      <duet-paragraph>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+        magna aliqua.
+      </duet-paragraph>
+      <duet-heading level="h5">Otsikko 5</duet-heading>
+      <duet-paragraph>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+        magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+        consequat.
+      </duet-paragraph>
+      <duet-heading level="h6">Otsikko 6</duet-heading>
+      <duet-paragraph>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</duet-paragraph>
+    </duet-card>
+  </div>
+  <div slot="sidebar">
+    <duet-card padding="large" heading="Sivupalsta">
+      Sivupalstaa voidaan käyttää pääsisältöön liittyvän tiedon näyttämiseen tai vaihtoehtoisesti nostamaan esiin
+      aiheeseen liittyvää muuta sisältöä.
+    </duet-card>
+  </div>
+</duet-layout>