From 2f0355da1f604cfc6e56979e03f47632e0a71656 Mon Sep 17 00:00:00 2001
From: Thorn Walli <lammpee@gmail.com>
Date: Thu, 26 Sep 2024 19:08:30 +0200
Subject: [PATCH] chore(playground): added `vue-semantic-structure`

---
 package-lock.json                              |  8 ++++++++
 package.json                                   |  1 +
 playground/components/PreviewContainer.vue     | 10 ++++++----
 playground/components/modules/ImageText.vue    |  8 +++++---
 playground/components/modules/Stage.vue        |  9 +++++----
 playground/components/modules/TextFontA.vue    |  8 +++++---
 playground/components/modules/TextFontB.vue    |  8 +++++---
 playground/components/modules/VideoVimeo.vue   |  8 ++++++--
 playground/components/modules/VideoYoutube.vue |  8 ++++++--
 playground/layouts/default.vue                 |  5 +++--
 10 files changed, 50 insertions(+), 23 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index fb2bfb9820..c1d5eb7574 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -58,6 +58,7 @@
         "vite-svg-loader": "5.1.0",
         "vitepress": "1.3.4",
         "vitest": "2.1.1",
+        "vue-semantic-structure": "^1.0.0-next.9",
         "wicg-inert": "3.1.3"
       }
     },
@@ -24037,6 +24038,13 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/vue-semantic-structure": {
+      "version": "1.0.0-next.9",
+      "resolved": "https://registry.npmjs.org/vue-semantic-structure/-/vue-semantic-structure-1.0.0-next.9.tgz",
+      "integrity": "sha512-JtHqtpyovHknBotoaR+3cZj/dXEGbUchemr0aKyofNZ442qPObX6Tc6gwPb0IqQB1TuW+dQD2C1gsM/HYW+hxg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/w3c-xmlserializer": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-5.0.0.tgz",
diff --git a/package.json b/package.json
index 0aa5fcac25..8c170d2a7b 100644
--- a/package.json
+++ b/package.json
@@ -100,6 +100,7 @@
     "vite-svg-loader": "5.1.0",
     "vitepress": "1.3.4",
     "vitest": "2.1.1",
+    "vue-semantic-structure": "^1.0.0-next.9",
     "wicg-inert": "3.1.3"
   }
 }
diff --git a/playground/components/PreviewContainer.vue b/playground/components/PreviewContainer.vue
index 793b477060..a46d953dcc 100644
--- a/playground/components/PreviewContainer.vue
+++ b/playground/components/PreviewContainer.vue
@@ -1,22 +1,24 @@
 <template>
-  <section class="preview-container">
+  <content-container class="preview-container">
     <div class="preview">
       <div>
         <slot name="default" />
       </div>
     </div>
-    <h2 class="info">
+    <content-headline class="info">
       <span v-font="$getFont('Quicksand', 400, 'normal')">
         <slot name="title">
           <p>Preview Info</p>
         </slot>
       </span>
-    </h2>
-  </section>
+    </content-headline>
+  </content-container>
 </template>
 
 <script setup>
 import { useBoosterFonts } from '#imports';
+import ContentContainer from 'vue-semantic-structure/ContentContainer.vue';
+import ContentHeadline from 'vue-semantic-structure/ContentHeadline.vue';
 const { $getFont } = useBoosterFonts();
 </script>
 
diff --git a/playground/components/modules/ImageText.vue b/playground/components/modules/ImageText.vue
index bc7f5332b3..6db4217258 100644
--- a/playground/components/modules/ImageText.vue
+++ b/playground/components/modules/ImageText.vue
@@ -1,5 +1,5 @@
 <template>
-  <section
+  <content-container
     v-font="[
       $getFont('Merriweather', 300, 'normal'),
       $getFont('Montserrat Alternates', 700, 'normal', { selector: 'h2' })
@@ -17,15 +17,17 @@
         />
       </div>
       <div class="text">
-        <h2>{{ headline }}</h2>
+        <content-headline>{{ headline }}</content-headline>
         <div v-html="content" />
       </div>
     </div>
-  </section>
+  </content-container>
 </template>
 
 <script setup>
 import BoosterPicture from '#booster/components/BoosterPicture';
+import ContentContainer from 'vue-semantic-structure/ContentContainer.vue';
+import ContentHeadline from 'vue-semantic-structure/ContentHeadline.vue';
 import { useBoosterFonts } from '#imports';
 
 const { $getFont } = useBoosterFonts();
diff --git a/playground/components/modules/Stage.vue b/playground/components/modules/Stage.vue
index fc99796830..998bba7105 100644
--- a/playground/components/modules/Stage.vue
+++ b/playground/components/modules/Stage.vue
@@ -1,12 +1,12 @@
 <template>
-  <section class="component-stage" :level="-1">
+  <header class="component-stage" :level="-1">
     <booster-picture
       class="background"
       :title="picture.title"
       :alt="picture.alt"
       :sources="picture.sources"
     />
-    <h1 class="headline">
+    <content-headline class="headline">
       <span
         v-font="[
           $getFont('Montserrat Alternates', 700, 'normal', {
@@ -18,19 +18,20 @@
         <span class="content">{{ content }}</span>
         <span class="claim">{{ claim }}</span>
       </span>
-    </h1>
+    </content-headline>
 
     <transition name="fade">
       <span v-if="ready" class="arrow"><svg-chevron-down /></span>
     </transition>
 
     <booster-image class="logo" v-bind="image" :loading-spinner="null" />
-  </section>
+  </header>
 </template>
 
 <script setup>
 import BoosterPicture from '#booster/components/BoosterPicture';
 import BoosterImage from '#booster/components/BoosterImage';
+import ContentHeadline from 'vue-semantic-structure/ContentHeadline.vue';
 import SvgChevronDown from '@/assets/svg/chevron-down.svg';
 import { useBoosterFonts } from '#imports';
 import { ref, onMounted } from 'vue';
diff --git a/playground/components/modules/TextFontA.vue b/playground/components/modules/TextFontA.vue
index 37c0f95dc2..693c9ce4bf 100644
--- a/playground/components/modules/TextFontA.vue
+++ b/playground/components/modules/TextFontA.vue
@@ -1,5 +1,5 @@
 <template>
-  <section
+  <content-container
     v-font="[
       $getFont('Merriweather', 300, 'normal'),
       $getFont('Merriweather', 700, 'normal', { selector: 'h1,h2' }),
@@ -13,15 +13,17 @@
     class="component-text-font-a"
   >
     <div>
-      <h2>{{ headline }}</h2>
+      <content-headline>{{ headline }}</content-headline>
       <div v-html="content" />
     </div>
-  </section>
+  </content-container>
 </template>
 
 <script setup>
 import { useBoosterFonts } from '#imports';
 import { ref, onMounted } from 'vue';
+import ContentContainer from 'vue-semantic-structure/ContentContainer.vue';
+import ContentHeadline from 'vue-semantic-structure/ContentHeadline.vue';
 
 const { $getFont } = useBoosterFonts();
 const ready = ref(false);
diff --git a/playground/components/modules/TextFontB.vue b/playground/components/modules/TextFontB.vue
index 95fb0943c4..ff8ff1a5cd 100644
--- a/playground/components/modules/TextFontB.vue
+++ b/playground/components/modules/TextFontB.vue
@@ -1,5 +1,5 @@
 <template>
-  <section :class="{ ready }" class="component-text-font-b">
+  <content-container :class="{ ready }" class="component-text-font-b">
     <div
       v-font="[
         $getFont('Montserrat Alternates', 300, 'normal'),
@@ -13,15 +13,17 @@
         })
       ]"
     >
-      <h2>{{ headline }}</h2>
+      <content-headline>{{ headline }}</content-headline>
       <div v-html="content" />
     </div>
-  </section>
+  </content-container>
 </template>
 
 <script setup>
 import { useBoosterFonts } from '#imports';
 import { ref, onMounted } from 'vue';
+import ContentContainer from 'vue-semantic-structure/ContentContainer.vue';
+import ContentHeadline from 'vue-semantic-structure/ContentHeadline.vue';
 
 const { $getFont } = useBoosterFonts();
 const ready = ref(false);
diff --git a/playground/components/modules/VideoVimeo.vue b/playground/components/modules/VideoVimeo.vue
index 1e4365516e..c7452d886d 100644
--- a/playground/components/modules/VideoVimeo.vue
+++ b/playground/components/modules/VideoVimeo.vue
@@ -1,5 +1,8 @@
 <template>
-  <section v-font="[$getFont('Merriweather', 400)]" class="video-vimeo">
+  <content-container
+    v-font="[$getFont('Merriweather', 400)]"
+    class="video-vimeo"
+  >
     <booster-vimeo v-bind="$attrs">
       <template #default="{ videoData }">
         <div class="description" v-html="videoData && videoData.description" />
@@ -8,12 +11,13 @@
         <weak-hardware-overlay />
       </template>
     </booster-vimeo>
-  </section>
+  </content-container>
 </template>
 
 <script setup>
 import BoosterVimeo from '#booster/components/BoosterVimeo';
 import WeakHardwareOverlay from '@/components/WeakHardwareOverlay';
+import ContentContainer from 'vue-semantic-structure/ContentContainer.vue';
 import { useBoosterFonts } from '#imports';
 
 const { $getFont } = useBoosterFonts();
diff --git a/playground/components/modules/VideoYoutube.vue b/playground/components/modules/VideoYoutube.vue
index 78f534c9bb..8aeded0b4f 100644
--- a/playground/components/modules/VideoYoutube.vue
+++ b/playground/components/modules/VideoYoutube.vue
@@ -1,17 +1,21 @@
 <template>
-  <section v-font="[$getFont('Merriweather', 400)]" class="video-youtube">
+  <content-container
+    v-font="[$getFont('Merriweather', 400)]"
+    class="video-youtube"
+  >
     <booster-youtube v-bind="$attrs">
       <template #afterPlayer>
         <weak-hardware-overlay />
       </template>
     </booster-youtube>
     <p v-if="text" v-html="text" />
-  </section>
+  </content-container>
 </template>
 
 <script setup>
 import BoosterYoutube from '#booster/components/BoosterYoutube';
 import WeakHardwareOverlay from '@/components/WeakHardwareOverlay';
+import ContentContainer from 'vue-semantic-structure/ContentContainer.vue';
 import { useBoosterFonts } from '#imports';
 
 const { $getFont } = useBoosterFonts();
diff --git a/playground/layouts/default.vue b/playground/layouts/default.vue
index 2772822df8..0f35324c34 100644
--- a/playground/layouts/default.vue
+++ b/playground/layouts/default.vue
@@ -1,9 +1,9 @@
 <template>
   <div>
     <page-header v-model="menuOpened" v-bind="pageHeaderData" />
-    <main :inert="menuOpened">
+    <content-container :inert="menuOpened">
       <slot />
-    </main>
+    </content-container>
     <info-layer v-if="!$config.public.disableInfoLayer" critical />
     <github-corner :url="$config.public.githubRepoUrl" />
   </div>
@@ -12,6 +12,7 @@
 <script setup>
 import 'wicg-inert';
 import { useBoosterHydrate, useRoute, useHead } from '#imports';
+import ContentContainer from 'vue-semantic-structure/ContentContainer.vue';
 import { defineAsyncComponent, ref, computed } from 'vue';
 const hydrate = useBoosterHydrate();