fix(core): add structure components

example.env

@@ -0,0 +1,8 @@
+
+; SERVER_HOST=localhost
+; SERVER_PORT=8050
+; SERVER_SSL_KEY_PATH="<key-path>"
+; SERVER_SSL_CRT_PATH="<crt-path>"
+
+; BASE="/"
+; WEBSITE_HOST="http://localhost:8050"

packages/core/Headline/index.vue

@@ -1,21 +1,52 @@
 <template>
-  <document-heading v-font="font" v-bind="$attrs" v-on="$listeners">
+  <component
+    :is="`h${currentHeadlineLevel}`"
+    v-font="font"
+    v-bind="$attrs"
+    :title="`h${currentHeadlineLevel}`"
+    v-on="$listeners"
+  >
     <slot />
-  </document-heading>
+  </component>
 </template>
 
 <script>
 
 export default {
+
+  inject: {
+    parentLevel: {
+      from: 'parentLevel',
+      default: null
+    }
+  },
+
   inheritAttrs: false,
+
   props: {
     font: {
       type: [Object, Array],
       default () {
         return [];
       }
+    },
+    level: {
+      type: [Number],
+      default: null
+    }
+  },
+
+  computed: {
+    currentHeadlineLevel () {
+      console.log(this.level, this.parentLevel);
+      const result = this.level || this.parentLevel || 1;
+      return getMax(result);
     }
   }
 };
 
+function getMax (number) {
+  return Math.max(1, Math.min(number, 6));
+}
+
 </script>

packages/core/Structure/Layout.vue

@@ -0,0 +1,22 @@
+<template>
+  <base-structure tag="div" v-bind="$attrs" static v-on="$listeners">
+    <template #header>
+      <slot name="header" />
+    </template>
+    <template #default>
+      <slot name="default" />
+    </template>
+    <template #footer>
+      <slot name="footer" />
+    </template>
+  </base-structure>
+</template>
+<script>
+import BaseStructure from './index';
+export default {
+  components: {
+    BaseStructure
+  },
+  inheritAttrs: false
+};
+</script>

packages/core/Structure/Page.vue

@@ -0,0 +1,14 @@
+<template>
+  <base-structure tag="main" v-bind="$attrs" v-on="$listeners">
+    <slot />
+  </base-structure>
+</template>
+<script>
+import BaseStructure from './index';
+export default {
+  components: {
+    BaseStructure
+  },
+  inheritAttrs: false
+};
+</script>

packages/core/Structure/index.vue

@@ -0,0 +1,170 @@
+<template>
+  <component
+    :is="currentTag"
+    :data-debug-parent-level="parentLevel"
+    :data-debug-parent-tag-level="parentTagLevel"
+    :data-debug-level="currentLevel"
+    :data-debug-tag-level="tagLevel"
+    :data-debug-tag="currentTag"
+  >
+    <header v-if="$slots.header || $scopedSlots.header">
+      <slot name="header" />
+    </header>
+    <slot />
+    <footer v-if="$slots.footer || $scopedSlots.footer">
+      <slot name="footer" />
+    </footer>
+  </component>
+</template>
+
+<script>
+
+export default {
+  provide () {
+    return {
+      parentLevel: this.currentLevel,
+      parentTagLevel: this.tagLevel
+    };
+  },
+  inject: {
+    parentLevel: {
+      from: 'parentLevel',
+      default: 0
+    },
+    parentTagLevel: {
+      from: 'parentTagLevel',
+      default: 0
+    }
+  },
+
+  inheritAttrs: false,
+
+  props: {
+    /**
+     * Wenn gesetzt, werden Context und Tag Level vom Parent übernommen.
+     * Einsatz: Layout und erste Seiten Komponente
+     */
+    static: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * Wenn gesetzt, wird Context vom Parent übernommen.
+     */
+    embed: {
+      type: Boolean,
+      default: false
+    },
+    tag: {
+      type: String,
+      default: null
+    },
+    tags: {
+      type: Array,
+      default () {
+        return ['article', 'section'];
+      }
+    }
+  },
+
+  computed: {
+    currentLevel () {
+      if (this.static || this.embed) {
+        return this.parentLevel;
+      }
+      return this.parentLevel + 1;
+    },
+
+    tagLevel () {
+      if (this.static) {
+        return this.parentTagLevel;
+      }
+      return this.parentTagLevel + 1;
+    },
+
+    currentTag () {
+      if (this.tag) {
+        return this.tag;
+      }
+
+      const level = this.tagLevel;
+
+      return this.tags[level % this.tags.length];
+    }
+  }
+};
+</script>
+
+<style lang="postcss" scoped>
+main,
+article,
+section {
+  position: relative;
+
+  &::before {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 10000;
+    box-sizing: border-box;
+    pointer-events: none;
+    content: "";
+    border: solid var(--tag-color) 4px;
+  }
+
+  &::after {
+    position: absolute;
+    z-index: 10000;
+    padding: 0.8em 0.4em;
+    font-family: monospace;
+    font-size: 11px;
+    color: white;
+    pointer-events: none;
+    content:
+      attr(data-debug-tag) " - pLevel: " attr(data-debug-parent-level) " - pTagLevel: "
+      attr(data-debug-parent-tag-level) " - Level: " attr(data-debug-level);
+    background: var(--tag-color);
+  }
+
+}
+
+header {
+  border: solid blue 2px;
+}
+
+footer {
+  border: solid orange 2px;
+}
+
+article {
+  --tag-color: green;
+
+  &::after {
+    top: 0;
+    right: 0;
+  }
+}
+
+section {
+  --tag-color: red;
+
+  &::after {
+    top: auto;
+    bottom: 0;
+    left: 0;
+    transform: translateY(100%);
+  }
+}
+
+main {
+  --tag-color: magenta;
+
+  &::after {
+    top: 0;
+    left: 0%;
+  }
+}
+
+</style>

packages/sample/nuxt.config.js

@@ -1,10 +1,13 @@
 
 import { join, resolve } from 'path';
 import fs from 'fs';
+import nuxtBabelPresetApp from '@nuxt/babel-preset-app';
 import dotenv from 'dotenv';
 
 import { BundleAnalyzerPlugin } from 'webpack-bundle-analyzer';
-import * as functions from './src/globals/postcss/functions';
+
+import * as postcssPresetEnvImportFrom from './src/globals/postcss/preset-env/importFrom';
+import * as postcssFunctions from './src/globals/postcss/functions';
 
 dotenv.config({ path: resolve(__dirname, '../../.env') });
 
@@ -21,8 +24,8 @@ export default {
     timing: false,
     https: (function () {
       const dir = './env/cert';
-      const key = join(dir, 'server.key');
-      const crt = join(dir, 'server.crt');
+      const key = process.env.SERVER_SSL_KEY_PATH || join(dir, 'server.key');
+      const crt = process.env.SERVER_SSL_CRT_PATH || join(dir, 'server.crt');
 
       if (fs.existsSync(key) && fs.existsSync(crt)) {
         return { key: fs.readFileSync(key), cert: fs.readFileSync(crt) };
@@ -94,7 +97,7 @@ export default {
         };
         return [
           [
-            require.resolve('@nuxt/babel-preset-app'), {
+            nuxtBabelPresetApp, {
               targets: envTargets[String(envName)],
               useBuiltIns: envUseBuiltins[String(envName)],
               // #####
@@ -119,16 +122,14 @@ export default {
         'postcss-preset-env': {
           preserve: true,
           stage: 0,
-          importFrom: [
-            'src/globals/postcss.js'
-          ]
+          importFrom: postcssPresetEnvImportFrom
         },
         'postcss-normalize': {},
         'postcss-momentum-scrolling': [
           'scroll'
         ],
         'postcss-functions': {
-          functions
+          functions: postcssFunctions
         },
         'rucksack-css': {},
         lost: {
@@ -535,11 +536,11 @@ export default {
 };
 
 function getHost () {
-  return process.env.npm_config_host || process.env.HOST || 'localhost';
+  return process.env.npm_config_host || process.env.SERVER_HOST || 'localhost';
 }
 
 function getPort () {
-  return process.env.npm_config_port || process.env.PORT || 3000;
+  return process.env.npm_config_port || process.env.SERVER_PORT || 3000;
 }
 
 function getBasePath () {