chore(playground): added vue-semantic-structure

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.11",
     "wicg-inert": "3.1.3"
   }
 }

playground/components/PreviewContainer.vue

@@ -1,22 +1,23 @@
 <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, ContentHeadline } from 'vue-semantic-structure';
 const { $getFont } = useBoosterFonts();
 </script>
 

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,16 @@
         />
       </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, ContentHeadline } from 'vue-semantic-structure';
 import { useBoosterFonts } from '#imports';
 
 const { $getFont } = useBoosterFonts();

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';
 import SvgChevronDown from '@/assets/svg/chevron-down.svg';
 import { useBoosterFonts } from '#imports';
 import { ref, onMounted } from 'vue';

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,16 @@
     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, ContentHeadline } from 'vue-semantic-structure';
 
 const { $getFont } = useBoosterFonts();
 const ready = ref(false);

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,16 @@
         })
       ]"
     >
-      <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, ContentHeadline } from 'vue-semantic-structure';
 
 const { $getFont } = useBoosterFonts();
 const ready = ref(false);

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';
 import { useBoosterFonts } from '#imports';
 
 const { $getFont } = useBoosterFonts();

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';
 import { useBoosterFonts } from '#imports';
 
 const { $getFont } = useBoosterFonts();

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';
 import { defineAsyncComponent, ref, computed } from 'vue';
 const hydrate = useBoosterHydrate();