testio-tailwind 0.1.0

package/package.json

@@ -0,0 +1,66 @@
+{
+	"name": "testio-tailwind",
+	"version": "0.1.0",
+	"description": "Tailwind based design system for Test IO",
+	"scripts": {
+		"clean": "del dist",
+		"dev:cirro-postcss": "postcss src/assets/stylesheets/*.css -o src/static/app.compiled.css --watch --verbose --config src/assets/stylesheets/",
+		"dev:scripts": "webpack --watch --config webpack.config.js",
+		"dev:11ty": "eleventy --serve --watch",
+		"build:cirro-11ty": "ELEVENTY_ENV=production APP=cirro eleventy",
+		"build:cirro-postcss": "NODE_ENV=production postcss src/assets/stylesheets/app.css -o dist/static/app.compiled.css --config src/assets/stylesheets/",
+		"build:scripts": "NODE_ENV=production webpack --mode production --config webpack.config.js",
+		"build:icon-page": "node icon-classes-extractor.js; cp src/static/icons-cirro.json dist/static/icons-cirro.json;",
+		"build:copy_entry_file": "cp index.html dist",
+		"start": "cross-env APP=cirro run-p dev:* --print-label",
+		"build": "cross-env APP=cirro run-s clean build:* --print-label"
+	},
+	"author": "test IO",
+	"license": "",
+	"devDependencies": {
+		"@11ty/eleventy": "^2.0.1",
+		"@babel/core": "^7.17.10",
+		"@babel/plugin-proposal-class-properties": "^7.12.1",
+		"@babel/preset-env": "^7.17.10",
+		"autoprefixer": "^10.4.15",
+		"babel-loader": "^8.2.5",
+		"cross-env": "^7.0.3",
+		"css-loader": "^5.0.1",
+		"del-cli": "^3.0.1",
+		"html-minifier": "^4.0.0",
+		"luxon": "^1.25.0",
+		"npm-run-all": "^4.1.5",
+		"postcss": "^8.1.0",
+		"postcss-cli": "^8.0.0",
+		"postcss-import": "^12.0.1",
+		"postcss-loader": "^4.0.4",
+		"postcss-nesting": "^7.0.1",
+		"pug-frontmatter-html-loader": "^0.1.2",
+		"tailwindcss": "^2.2.16",
+		"webpack": "^5.x",
+		"webpack-cli": ">=4.x"
+	},
+	"dependencies": {
+		"@tailwindcss/forms": "^0.1.4",
+		"@tailwindcss/line-clamp": "^0.1.0",
+		"@tailwindcss/typography": "^0.4.0",
+		"autosize": "^5.0.1",
+		"dropzone": "^6.0.0-beta.2",
+		"echarts": "^5.6.0",
+		"hamljs": "^0.6.2",
+		"jquery": "^3.6.0",
+		"markdown-it": "^14.1.0",
+		"postcss-simple-vars": "^5.0.2",
+		"select2": "^4.1.0-rc.0",
+		"tailwindcss": "^2.2.16",
+		"tom-select": "^2.3.1",
+		"trix": "^2.0.7"
+	},
+	"peerDependencies": {
+		"autoprefixer": "^10.0.0",
+		"postcss": "^8.1.0",
+		"postcss-cli": "^9.0.1",
+		"tailwindcss": "^2.2.16",
+		"tom-select": "^2.3.1"
+	}
+}

package/src/_data/navigation.json

@@ -0,0 +1,44 @@
+{
+  "items": [
+    {
+      "text": "CI",
+      "url": "/ci/"
+    },
+    {
+      "text": "Colors",
+      "url": "/colors/"
+    },
+    {
+      "text": "Buttons",
+      "url": "/buttons/"
+    },
+    {
+      "text": "Components",
+      "url": "/components/"
+    },
+    {
+      "text": "Forms",
+      "url": "/forms/"
+    },
+    {
+      "text": "Charts",
+      "url": "/charts/"
+    },
+    {
+      "text": "Icons",
+      "url": "/icons/"
+    },
+    {
+      "text": "Layout",
+      "url": "/layout/"
+    },
+    {
+      "text": "Navigation",
+      "url": "/navigation/"
+    },
+    {
+      "text": "Typography",
+      "url": "/typography/"
+    }
+  ]
+}

package/src/_data/site.js

@@ -0,0 +1,12 @@
+module.exports = {
+  "title": "Test IO TailWind",
+  "description": "Tailwind based design system for Test IO",
+  "url": "https://test.io",
+  "author": "test IO",
+  "meta_data": {
+    "twitter": "",
+    "default_social_image": ""
+  },
+  "app": process.env.APP,
+  "env": process.env.ELEVENTY_ENV === 'production'
+}

package/src/_includes/card_popover.haml

@@ -0,0 +1,7 @@
+%details.popover-wrapper.dropright.card-info-popover
+  %summary
+  .btn.btn-sm.btn-square
+    .icon.icon-info
+  .popover-menu.info
+  .popover-title Popover title
+  .popover-content Popover content Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

package/src/_includes/example-header-customer.pug

@@ -0,0 +1,99 @@
+<header class="header customer">
+    <div class="navlinks logo-wrapper">
+        <a href="#" class="navlink header-logo"></a>
+    </div>
+    <div class="navlinks left">
+        <a href="#" class="navlink active responsive-label">
+            <span class="icon icon-user-profile"></span>Your profile</a>
+        <a href="#" class="navlink responsive-label">
+            <span class="icon icon-activity"></span>Activity</a>
+        <a href="#" class="navlink responsive-label">
+            <span class="icon icon-devices"></span>Devices</a>
+        <a href="#" class="navlink responsive-label">
+            <span class="icon icon-billing"></span>Billing</a>
+    </div>
+    <details class="mobile-links">
+        <summary class="mobile-menu-btn">
+            <div class="navlink">
+                <span class="sr-only">Open main menu</span>
+                <span ariahidden="true" class="icon icon-menu"></span>
+            </div>
+        </summary>
+        <div class="mobile-menu sidebar">
+            <div class="profilepicture-wrapper">
+                <details class="profilepicture-actions">
+                    <summary>
+                        <img src="/assets/images/testerlevel-medals/medal_testerlevel_1_md.png" class="testerlevel-medal" />
+                        <img src="/assets/images/placeholders/profile_supergirl.png" class="profilepicture" />
+                    </summary>
+                    <div class="popover-menu">
+                        <a href="#" class="popover-action">
+                            <span class="icon text-icon-default icon-cloud-upload mr-icon-spacing"></span>Upload picture</a>
+                        <a href="#" class="popover-action">
+                            <span class="icon text-icon-default icon-remove mr-icon-spacing"></span>Remove picture</a>
+                    </div>
+                </details>
+            </div>
+            <div class="sidebar-title">Anja Berger</div>
+            <div class="navlinks">
+                <a href="#" class="navlink">
+                    <span class="icon icon-home"></span>Dashboard</a>
+                <a href="#" class="navlink"><span class="icon icon-ranking"></span>Ranking</a>
+                <a href="#" class="navlink">
+                    <div class="icon-wrapper"><span class="icon icon-test"></span>
+                        <span class="icon icon-circle-sm-filled recording-icon"></span></div>
+                        <div class="text-wrapper">
+                            <div class="div">#123321 Customer</div>
+                            <div class="label-sm">Test Session active 00:15</div>
+                        </div>
+                </a>
+                <div class="sidebar-divider"></div>
+                <a href="#" class="navlink">
+                    <span class="icon icon-user-profile"></span>Your profile</a>
+                <a href="#" class="navlink">
+                    <span class="icon icon-activity"></span>Activity</a>
+                <a href="#" class="navlink">
+                    <span class="icon icon-devices"></span>Devices</a>
+                <a href="#" class="navlink">
+                    <span class="icon icon-billing"></span>Billing</a>
+            </div>
+
+        </div>
+    </details>
+    <div class="navlinks right">
+        <a href="#" class="navlink hidden-xs-down">
+            <span class="icon icon-user-outline-plus mr-0"></span></a>
+        <a href="#" class="navlink hidden-xs-down">
+            <span class="icon icon-academy"></span>99</a>
+        <a href="#" class="navlink hidden-xs-down">
+            <span class="icon icon-chat"></span>99</a>
+        <a href="#" class="navlink">
+            <span class="icon icon-bell"></span>99</a>
+        <a href="#" class="navlink hidden-xs-down">
+            <span class="icon icon-search mr-0"></span></a>
+        <details class="header-dropdown user-menu">
+            <summary class="btn-profile navlink">
+                <span class="sr-only">Open user menu</span>
+                <img src="/assets/images/placeholders/profile_supergirl.png" class="user-profile" />
+                <div class="user-details">
+                    <div class="profile-role">Tester</div>
+                    <div class="profile-name">Anja Berger</div>
+                </div>
+            </summary>
+            <div role="menu" ariaorientation="vertical" arialabelledby="user-menu" class="dropdown-menu profile-dropdown">
+                <a href="#" role="menuitem" class="dropdown-link hidden-sm-up">
+                    <span class="icon icon-user-outline-plus"></span>Refer a tester</a>
+                <a href="#" role="menuitem" class="dropdown-link hidden-sm-up">
+                    <span class="icon icon-chat"></span>Chat 99</a>
+                <a href="#" role="menuitem" class="dropdown-link hidden-sm-up">
+                    <span class="icon icon-academy"></span>Onboarding 99</a>
+                <a href="#" role="menuitem" class="dropdown-link hidden-sm-up">
+                    <span class="icon icon-search"></span>Search</a>
+                <a href="#" role="menuitem" class="dropdown-link">
+                    <span class="icon icon-cog"></span>Settings</a>
+                <a href="#" role="menuitem" class="dropdown-link">
+                    <span class="icon icon-shutdown"></span>Sign out</a>
+            </div>
+        </details>
+    </div>
+</header>

package/src/_includes/example-header-manager.njk

@@ -0,0 +1,54 @@
+<nav class="header teamleader">
+<div class="navlinks logo-wrapper">
+<a href="#" class="navlink header-logo"></a></div>
+<div class="navlinks left">
+<a href="#" class="navlink active">
+<span class="navlink-badge icon icon-home"></span>Navlink active</a>
+<a href="#" class="navlink">Navlink</a>
+<a href="#" class="navlink">
+<span class="icon icon-check-circle-filled"></span>Navlink</a>
+<details class="header-dropdown">
+<summary class="navlink">Collapsable</summary>
+<div class="dropdown-menu">
+<a href="#" role="menuitem" class="navlink">
+<span class="icon icon-user"></span>Dropdown-item</a>
+<a href="#" role="menuitem" class="navlink">
+<span class="icon icon-cog"></span>Dropdown-item</a>
+<a href="#" role="menuitem" class="navlink">
+<span class="icon icon-shutdown"></span>Dropdown-item with a longer text to see how things break and behave</a></div></details></div>
+<details class="mobile-links">
+<summary class="mobile-menu-btn">
+<div class="navlink">
+<span class="sr-only">Open main menu</span>
+<span ariahidden="true" class="icon icon-menu"></span></div></summary>
+<div class="mobile-menu sidebar">
+<a href="#" class="navlink active">
+<span class="navlink-badge icon icon-home"></span>Navlink active</a>
+<a href="#" class="navlink">
+<span class="navlink-badge icon icon-plus"></span>Add project</a>
+<details>
+<summary class="navlink">
+<span class="icon icon-product"></span>Collapsable</summary>
+<a href="#" class="navlink">
+<span class="icon icon-test"></span>Navlink child</a>
+<a href="#" class="navlink">
+<span class="icon icon-test"></span>Navlink child</a>
+<a href="#" class="navlink">
+<span class="icon icon-test"></span>Navlink child</a>
+<a href="#" class="navlink active">
+<span class="icon icon-test"></span>Active child</a></details></div></details>
+<div class="navlinks right">
+<details class="header-dropdown user-menu">
+<summary class="btn-profile navlink">
+<span class="sr-only">Open user menu</span>
+<img src="/assets/images/placeholders/profile_supergirl.png" class="user-profile">
+<div class="user-details">
+<div class="profile-role">Admin</div>
+<div class="profile-name">Anja Berger</div></div></summary>
+<div role="menu" ariaorientation="vertical" arialabelledby="user-menu" class="dropdown-menu profile-dropdown">
+<a href="#" role="menuitem" class="navlink">
+<span class="icon icon-user"></span>Your Profile</a>
+<a href="#" role="menuitem" class="navlink">
+<span class="icon icon-cog"></span>Settings</a>
+<a href="#" role="menuitem" class="navlink">
+<span class="icon icon-shutdown"></span>Sign out</a></div></details></div></nav>

package/src/_includes/example-header-tester.njk

@@ -0,0 +1,99 @@
+<header class="header tester">
+    <div class="navlinks logo-wrapper">
+        <a href="#" class="navlink header-logo"></a>
+    </div>
+    <div class="navlinks left">
+        <a href="#" class="navlink active responsive-label">
+            <span class="icon icon-user-profile"></span>Your profile</a>
+        <a href="#" class="navlink responsive-label">
+            <span class="icon icon-activity"></span>Activity</a>
+        <a href="#" class="navlink responsive-label">
+            <span class="icon icon-devices"></span>Devices</a>
+        <a href="#" class="navlink responsive-label">
+            <span class="icon icon-billing"></span>Billing</a>
+    </div>
+    <details class="mobile-links">
+        <summary class="mobile-menu-btn">
+            <div class="navlink">
+                <span class="sr-only">Open main menu</span>
+                <span ariahidden="true" class="icon icon-menu"></span>
+            </div>
+        </summary>
+        <div class="mobile-menu sidebar">
+            <div class="profilepicture-wrapper">
+                <details class="profilepicture-actions">
+                    <summary>
+                        <img src="/assets/images/testerlevel-medals/medal_testerlevel_1_md.png" class="testerlevel-medal" />
+                        <img src="/assets/images/placeholders/profile_supergirl.png" class="profilepicture" />
+                    </summary>
+                    <div class="popover-menu">
+                        <a href="#" class="popover-action">
+                            <span class="icon text-icon-default icon-cloud-upload mr-icon-spacing"></span>Upload picture</a>
+                        <a href="#" class="popover-action">
+                            <span class="icon text-icon-default icon-remove mr-icon-spacing"></span>Remove picture</a>
+                    </div>
+                </details>
+            </div>
+            <div class="sidebar-title">Anja Berger</div>
+            <div class="navlinks">
+                <a href="#" class="navlink">
+                    <span class="icon icon-home"></span>Dashboard</a>
+                <a href="#" class="navlink"><span class="icon icon-ranking"></span>Ranking</a>
+                <a href="#" class="navlink">
+                    <div class="icon-wrapper"><span class="icon icon-test"></span>
+                        <span class="icon icon-circle-sm-filled recording-icon"></span></div>
+                        <div class="text-wrapper">
+                            <div class="div">#123321 Customer</div>
+                            <div class="label-sm">Test Session active 00:15</div>
+                        </div>
+                </a>
+                <div class="sidebar-divider"></div>
+                <a href="#" class="navlink">
+                    <span class="icon icon-user-profile"></span>Your profile</a>
+                <a href="#" class="navlink">
+                    <span class="icon icon-activity"></span>Activity</a>
+                <a href="#" class="navlink">
+                    <span class="icon icon-devices"></span>Devices</a>
+                <a href="#" class="navlink">
+                    <span class="icon icon-billing"></span>Billing</a>
+            </div>
+
+        </div>
+    </details>
+    <div class="navlinks right">
+        <a href="#" class="navlink hidden-xs-down">
+            <span class="icon icon-user-outline-plus mr-0"></span></a>
+        <a href="#" class="navlink hidden-xs-down">
+            <span class="icon icon-academy"></span>99</a>
+        <a href="#" class="navlink hidden-xs-down">
+            <span class="icon icon-chat"></span>99</a>
+        <a href="#" class="navlink">
+            <span class="icon icon-bell"></span>99</a>
+        <a href="#" class="navlink hidden-xs-down">
+            <span class="icon icon-search mr-0"></span></a>
+        <details class="header-dropdown user-menu">
+            <summary class="btn-profile navlink">
+                <span class="sr-only">Open user menu</span>
+                <img src="/assets/images/placeholders/profile_supergirl.png" class="user-profile" />
+                <div class="user-details">
+                    <div class="profile-role">Tester</div>
+                    <div class="profile-name">Anja Berger</div>
+                </div>
+            </summary>
+            <div role="menu" ariaorientation="vertical" arialabelledby="user-menu" class="dropdown-menu profile-dropdown">
+                <a href="#" role="menuitem" class="dropdown-link hidden-sm-up">
+                    <span class="icon icon-user-outline-plus"></span>Refer a tester</a>
+                <a href="#" role="menuitem" class="dropdown-link hidden-sm-up">
+                    <span class="icon icon-chat"></span>Chat 99</a>
+                <a href="#" role="menuitem" class="dropdown-link hidden-sm-up">
+                    <span class="icon icon-academy"></span>Onboarding 99</a>
+                <a href="#" role="menuitem" class="dropdown-link hidden-sm-up">
+                    <span class="icon icon-search"></span>Search</a>
+                <a href="#" role="menuitem" class="dropdown-link">
+                    <span class="icon icon-cog"></span>Settings</a>
+                <a href="#" role="menuitem" class="dropdown-link">
+                    <span class="icon icon-shutdown"></span>Sign out</a>
+            </div>
+        </details>
+    </div>
+</header>

package/src/_includes/example-header.njk

@@ -0,0 +1,50 @@
+<header class="header">
+    <div class="navlinks logo-wrapper"><a class="navlink header-logo" href="#"></a></div> 
+    <div class="navlinks left">
+        <a class="navlink active" href="#">Navlink active</a>
+        <a class="navlink" href="#">Navlink</a>
+        <a class="navlink" href="#"><span class="icon icon-check-circle-filled mr-icon-spacing"></span>Navlink</a>
+        <details class="header-dropdown">
+            <summary class="navlink">Collapsable</summary>
+            <div class="dropdown-menu">
+                <a class="navlink active" href="#">Navlink active</a>
+                <a class="navlink" href="#">Navlink</a>
+                <a class="navlink" href="#"><span class="icon icon-check-circle-filled mr-icon-spacing"></span>Navlink</a>
+            </div>
+        </details>
+    </div>
+    <details class="mobile-links">
+        <summary class="mobile-menu-btn">
+            <div class="navlink"><span class="sr-only">Open main menu</span><span class="text-icon-default icon icon-menu" aria-hidden="true"></span></div>
+        </summary>
+        <div class="mobile-menu sidebar">
+            <a class="navlink active" href="#">Navlink active</a>
+            <a class="navlink" href="#">Navlink</a>
+            <a class="navlink" href="#"><span class="icon icon-check-circle-filled"></span>Navlink</a>
+            <details class="header-dropdown">
+                <summary class="navlink">Collapsable</summary>
+                <div class="dropdown-menu">
+                    <a class="navlink active" href="#">Navlink active</a>
+                    <a class="navlink" href="#">Navlink</a>
+                    <a class="navlink" href="#"><span class="icon icon-check-circle-filled mr-icon-spacing"></span>Navlink</a>
+                </div>
+            </details>
+        </div>
+    </details>
+    <div class="navlinks right">
+        <details class="header-dropdown user-menu" href="#">
+            <summary class="btn-profile navlink">
+                <img class="user-profile" src="/assets/images/placeholders/profile_supergirl.png">
+                <div class="user-details">
+                    <div class="profile-role">Admin</div>
+                    <div class="profile-name">Anja Berger</div>
+                </div>
+            </summary>
+            <div class="dropdown-menu profile-dropdown">
+                <a class="dropdown-link" href="#"><span class="icon icon-user text-icon-default mr-icon-spacing"></span>Your Profile</a>
+                <a class="dropdown-link" href="#"><span class="icon icon-cog text-icon-default mr-icon-spacing"></span>Settings</a>
+                <a class="dropdown-link" href="#"><span class="icon icon-shutdown text-icon-default mr-icon-spacing"></span>Sign out</a>
+            </div>
+        </details>
+    </div>
+</header>

package/src/_includes/footer-scripts.njk

@@ -0,0 +1 @@
+<script src="/static/app.bundled.js"></script>

package/src/_includes/head.njk

@@ -0,0 +1,72 @@
+<!--
+  Maintained with the excellent knowledge from https://htmlhead.dev
+  These comments will be removed in production
+
+  ========================
+
+  The following 2 meta tags *must* come first in the <head>
+  to consistently ensure proper document rendering.
+  Any other head element should come *after* these tags.
+-->
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+
+<!-- Set the base URL for all relative URLs within the document -->
+<base href="{{ page.url }}">
+
+<!-- 
+  Short description of the document (limit to 150 characters)
+  This content *may* be used as a part of search engine results. 
+-->
+<meta name="description" content="{% if description %}{{ description }}{% else %}{{ site.description }}{% endif %}">
+
+<!-- Control the behavior of search engine crawling and indexing -->
+<meta name="robots" content="index,follow"><!-- All Search Engines -->
+<meta name="googlebot" content="index,follow"><!-- Google Specific -->
+
+<!-- Tells Google not to show the sitelinks search box -->
+<meta name="google" content="nositelinkssearchbox">
+<!-- Tells Google not to provide a translation for this document -->
+<meta name="google" content="notranslate">
+
+<!-- Identify the software used to build the document, Eleventy ftw! -->
+<meta name="generator" content="eleventy">
+
+<!-- Disable automatic detection and formatting of possible phone numbers -->
+<meta name="format-detection" content="telephone=no">
+
+<!-- Helps prevent duplicate content issues -->
+<link rel="canonical" href="{{ site.url }}{{ page.url }}">
+
+<title>{% if title %}{{ title }} - {% endif %}{{ site.title }}</title>
+
+<!-- Links to information about the author(s) of the document -->
+<link rel="author" href="humans.txt">
+
+<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
+<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
+<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
+<link rel="manifest" href="/site.webmanifest">
+<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
+<meta name="msapplication-TileColor" content="#000000">
+<meta name="theme-color" content="#ffffff">
+
+<!-- Facebook Open Graph meta -->
+<meta property="og:url" content="{{ site.url}}{{ page.url }}">
+<meta property="og:type" content="website">
+<meta property="og:title" content="{% if title %}{{ title }}{% else %}{{ site.title }}{% endif %}">
+{% if site.meta_data.default_social_image or featured_image %}
+  <meta property="og:image" content="{% if env == 'production' %}{{ site.url }}{% endif %}{% if featured_image  %}{{ featured_image }}{% else %}{{ site.meta_data.default_social_image }}{% endif %}" />
+{% endif %}
+<meta property="og:description" content="{% if description %}{{ description }}{% else %}{{ site.description }}{% endif %}" />
+<meta property="og:site_name" content="{{ site.title }}">
+<meta property="og:locale" content="en_US">
+<meta property="article:author" content="{{ site.author }}">
+
+<!-- Twitter Open Graph meta -->
+<meta name="twitter:card" content="summary_large_image">
+<meta name="twitter:site" content="{{ site.meta_data.twitter }}">
+<meta name="twitter:creator" content="{{ site.meta_data.twitter }}">
+
+<!-- disallow Twitter from using your site's info for personalization purposes -->
+<meta name="twitter:dnt" content="on">

package/src/_includes/page-with-sidebar-nocode.njk

@@ -0,0 +1,46 @@
+
+<nav class="sidebar manager">
+  <div class="navlinks">
+  {% for section in collection %}
+    <a class="navlink" href="#{{ section.data.title }}">{{ section.data.title }}</a>
+  {% endfor %}
+  </div>
+</nav>
+
+<main tabindex="-1" id="main-content" class="main-content main-content-padding">
+  <article class="">
+
+    {% for item in navigation.items %}
+      {% if page.url == item.url %}
+        <h1>{{ item.text }}</h1>
+      {% endif %}
+    {% endfor %}
+
+    {%- for section in collection -%}
+      <section class="section" id="{{ section.data.title }}">
+        <div class="section-header">
+          <h4 class="section-title">{{ section.data.title }}</h2>
+        </div>
+
+        {% if section.data.type == 'block' %}
+          {% set direction = 'y' %}
+        {% else %}
+          {% set direction = 'x' %}
+        {% endif %}
+        {{ section.templateContent | safe }}
+
+        <details class="mt-3">
+          <summary class="btn btn-sm btn-secondary">
+            <span class="icon icon-format-code mr-icon-spacing"></span>
+            <span>Show source</span>
+          </summary>
+          <div class="prose max-w-none bg-gray-light p-2 rounded mt-1 mb-1">
+            <pre><code class="code html-preview">{{ section.templateContent | trim }}</code></pre>
+          </div>
+        </details>
+      </section>
+    {%- endfor -%}
+  </article>
+</main>
+
+

package/src/_includes/page-with-sidebar.njk

@@ -0,0 +1,46 @@
+
+<nav class="sidebar manager">
+  <div class="navlinks">
+  {% for section in collection %}
+    <a class="navlink" href="#{{ section.data.title }}">{{ section.data.title }}</a>
+  {% endfor %}
+  </div>
+</nav>
+
+<main tabindex="-1" id="main-content" class="main-content main-content-padding">
+  <article class="">
+
+    {% for item in navigation.items %}
+      {% if page.url == item.url %}
+        <h1>{{ item.text }}</h1>
+      {% endif %}
+    {% endfor %}
+
+    {%- for section in collection -%}
+      <section class="section" id="{{ section.data.title }}">
+        <div class="section-header">
+          <h4 class="section-title">{{ section.data.title }}</h2>
+        </div>
+
+        {% if section.data.type == 'block' %}
+          {% set direction = 'y' %}
+        {% else %}
+          {% set direction = 'x' %}
+        {% endif %}
+        {{ section.templateContent | safe }}
+
+        <details class="mt-3">
+          <summary class="btn btn-sm btn-gray">
+            <span class="icon icon-format-code mr-icon-spacing"></span>
+            <span>Show source</span>
+          </summary>
+          <div class="ds-code-preview">
+            <pre><code class="code html-preview">{{ section.templateContent | trim }}</code></pre>
+          </div>
+        </details>
+      </section>
+    {%- endfor -%}
+  </article>
+</main>
+
+

package/src/_includes/page.njk

@@ -0,0 +1,39 @@
+<main tabindex="-1" id="main-content" class="main-content main-content-padding">
+  <article class="space-y-12">
+
+    {% for item in navigation.items %}
+      {% if page.url == item.url %}
+        <h1>{{ item.text }}</h1>
+      {% endif %}
+    {% endfor %}
+
+    {%- for section in collection -%}
+      <section class="space-y-6" id="{{ section.data.title }}">
+        <div class="heading-divider left thick">
+          <div class="heading-divider-line"></div>
+          <div class="heading-divider-text">
+            <h2>{{ section.data.title }}</h2>
+          </div>
+        </div>
+
+        {% if section.data.type == 'block' %}
+          {% set direction = 'y' %}
+        {% else %}
+          {% set direction = 'x' %}
+        {% endif %}
+        <div>
+          {{ section.templateContent | safe }}
+        </div>
+
+        <details>
+          <summary class="btn btn-primary mb-2">
+            Show source
+          </summary>
+          <div class="ds-code-preview">
+            <pre><code class="html-preview">{{ section.templateContent | trim }}</code></pre>
+          </div>
+        </details>
+      </section>
+    {%- endfor -%}
+  </article>
+</main>