From d2d17ff208e39c5aa165a22de782c1275147ebaa Mon Sep 17 00:00:00 2001 From: ThornWalli Date: Thu, 12 Dec 2024 10:00:42 +0000 Subject: [PATCH] deploy: d93d377eb47019f461eb6903268c7a9af32914ce --- 404.html | 2 +- ...duction.md.B4hXtU6b.js => introduction.md.K4WmSoIH.js} | 2 +- ....B4hXtU6b.lean.js => introduction.md.K4WmSoIH.lean.js} | 2 +- assets/{setup.md.BbRKDSCq.js => setup.md.8YbwR3TW.js} | 2 +- ...etup.md.BbRKDSCq.lean.js => setup.md.8YbwR3TW.lean.js} | 2 +- assets/{usage.md.CtRcorsj.js => usage.md.Diz_axoQ.js} | 4 ++-- ...sage.md.CtRcorsj.lean.js => usage.md.Diz_axoQ.lean.js} | 4 ++-- components/content-container.html | 2 +- components/content-headline.html | 2 +- composables/use-content-container.html | 2 +- composables/use-content-headline.html | 2 +- hashmap.json | 2 +- index.html | 2 +- introduction.html | 6 +++--- setup.html | 6 +++--- usage.html | 8 ++++---- 16 files changed, 25 insertions(+), 25 deletions(-) rename assets/{introduction.md.B4hXtU6b.js => introduction.md.K4WmSoIH.js} (98%) rename assets/{introduction.md.B4hXtU6b.lean.js => introduction.md.K4WmSoIH.lean.js} (98%) rename assets/{setup.md.BbRKDSCq.js => setup.md.8YbwR3TW.js} (72%) rename assets/{setup.md.BbRKDSCq.lean.js => setup.md.8YbwR3TW.lean.js} (72%) rename assets/{usage.md.CtRcorsj.js => usage.md.Diz_axoQ.js} (97%) rename assets/{usage.md.CtRcorsj.lean.js => usage.md.Diz_axoQ.lean.js} (97%) diff --git a/404.html b/404.html index e830c41..0e64fca 100644 --- a/404.html +++ b/404.html @@ -22,7 +22,7 @@
- + \ No newline at end of file diff --git a/assets/introduction.md.B4hXtU6b.js b/assets/introduction.md.K4WmSoIH.js similarity index 98% rename from assets/introduction.md.B4hXtU6b.js rename to assets/introduction.md.K4WmSoIH.js index e1b58cf..0d54b4b 100644 --- a/assets/introduction.md.B4hXtU6b.js +++ b/assets/introduction.md.K4WmSoIH.js @@ -1,4 +1,4 @@ -import{_ as t,c as n,j as i,a as l,t as h,a0 as e,o as k}from"./chunks/framework.DlEm4oa2.js";const u=JSON.parse('{"title":"Introduction","description":"","frontmatter":{"title":"Introduction"},"headers":[],"relativePath":"introduction.md","filePath":"introduction.md"}'),p={name:"introduction.md"},E={id:"frontmatter-title",tabindex:"-1"};function r(a,s,d,g,y,o){return k(),n("div",null,[i("h1",E,[l(h(a.$frontmatter.title)+" ",1),s[0]||(s[0]=i("a",{class:"header-anchor",href:"#frontmatter-title","aria-label":'Permalink to "{{$frontmatter.title}}"'},"​",-1))]),s[1]||(s[1]=e(`

What does Vue Structural Headings do? ​

It provides two components and optionally compoasables to help you build semantic HTML structure.

ComponentComposable
ContentContaineruseContentContainer
ContentHeadlineuseContentHeadline

ContentContainer ​

The ContentContainer is used to display the depth of the page structure.

With each nested ContentContainer, the page structure becomes one level deeper (level).

The appropriate HTML element for the page structure is determined based on the level.

ContentHeadline ​

The ContentHeadline is used to display the heading structure.

The ContentHeadline takes the level from the ContentContainer and sets the appropriate HTML element for the heading.

Example ​

vue
<template>
+import{_ as t,c as n,j as i,a as l,t as h,a0 as e,o as k}from"./chunks/framework.DlEm4oa2.js";const u=JSON.parse('{"title":"Introduction","description":"","frontmatter":{"title":"Introduction"},"headers":[],"relativePath":"introduction.md","filePath":"introduction.md"}'),p={name:"introduction.md"},E={id:"frontmatter-title",tabindex:"-1"};function r(a,s,d,g,y,o){return k(),n("div",null,[i("h1",E,[l(h(a.$frontmatter.title)+" ",1),s[0]||(s[0]=i("a",{class:"header-anchor",href:"#frontmatter-title","aria-label":'Permalink to "{{$frontmatter.title}}"'},"​",-1))]),s[1]||(s[1]=e(`
What does Vue Structural Headings do? ​
It provides two components and optionally compoasables to help you build semantic HTML structure.
ComponentComposable
ContentContaineruseContentContainer
ContentHeadlineuseContentHeadline
ContentContainer ​
The ContentContainer is used to display the depth of the page structure.
With each nested ContentContainer, the page structure becomes one level deeper (level).
The appropriate HTML element for the page structure is determined based on the level.
ContentHeadline ​
The ContentHeadline is used to display the heading structure.
The ContentHeadline takes the level from the ContentContainer and sets the appropriate HTML element for the heading.
Example ​
vue
<template>
   <div>
     <header>Header</header>
     <ContentContainer>
diff --git a/assets/introduction.md.B4hXtU6b.lean.js b/assets/introduction.md.K4WmSoIH.lean.js
similarity index 98%
rename from assets/introduction.md.B4hXtU6b.lean.js
rename to assets/introduction.md.K4WmSoIH.lean.js
index e1b58cf..0d54b4b 100644
--- a/assets/introduction.md.B4hXtU6b.lean.js
+++ b/assets/introduction.md.K4WmSoIH.lean.js
@@ -1,4 +1,4 @@
-import{_ as t,c as n,j as i,a as l,t as h,a0 as e,o as k}from"./chunks/framework.DlEm4oa2.js";const u=JSON.parse('{"title":"Introduction","description":"","frontmatter":{"title":"Introduction"},"headers":[],"relativePath":"introduction.md","filePath":"introduction.md"}'),p={name:"introduction.md"},E={id:"frontmatter-title",tabindex:"-1"};function r(a,s,d,g,y,o){return k(),n("div",null,[i("h1",E,[l(h(a.$frontmatter.title)+" ",1),s[0]||(s[0]=i("a",{class:"header-anchor",href:"#frontmatter-title","aria-label":'Permalink to "{{$frontmatter.title}}"'},"​",-1))]),s[1]||(s[1]=e(`
What does Vue Structural Headings do? ​
It provides two components and optionally compoasables to help you build semantic HTML structure.
ComponentComposable
ContentContaineruseContentContainer
ContentHeadlineuseContentHeadline
ContentContainer ​
The ContentContainer is used to display the depth of the page structure.
With each nested ContentContainer, the page structure becomes one level deeper (level).
The appropriate HTML element for the page structure is determined based on the level.
ContentHeadline ​
The ContentHeadline is used to display the heading structure.
The ContentHeadline takes the level from the ContentContainer and sets the appropriate HTML element for the heading.
Example ​
vue
<template>
+import{_ as t,c as n,j as i,a as l,t as h,a0 as e,o as k}from"./chunks/framework.DlEm4oa2.js";const u=JSON.parse('{"title":"Introduction","description":"","frontmatter":{"title":"Introduction"},"headers":[],"relativePath":"introduction.md","filePath":"introduction.md"}'),p={name:"introduction.md"},E={id:"frontmatter-title",tabindex:"-1"};function r(a,s,d,g,y,o){return k(),n("div",null,[i("h1",E,[l(h(a.$frontmatter.title)+" ",1),s[0]||(s[0]=i("a",{class:"header-anchor",href:"#frontmatter-title","aria-label":'Permalink to "{{$frontmatter.title}}"'},"​",-1))]),s[1]||(s[1]=e(`
What does Vue Structural Headings do? ​
It provides two components and optionally compoasables to help you build semantic HTML structure.
ComponentComposable
ContentContaineruseContentContainer
ContentHeadlineuseContentHeadline
ContentContainer ​
The ContentContainer is used to display the depth of the page structure.
With each nested ContentContainer, the page structure becomes one level deeper (level).
The appropriate HTML element for the page structure is determined based on the level.
ContentHeadline ​
The ContentHeadline is used to display the heading structure.
The ContentHeadline takes the level from the ContentContainer and sets the appropriate HTML element for the heading.
Example ​
vue
<template>
   <div>
     <header>Header</header>
     <ContentContainer>
diff --git a/assets/setup.md.BbRKDSCq.js b/assets/setup.md.8YbwR3TW.js
similarity index 72%
rename from assets/setup.md.BbRKDSCq.js
rename to assets/setup.md.8YbwR3TW.js
index db75b70..c69d3ca 100644
--- a/assets/setup.md.BbRKDSCq.js
+++ b/assets/setup.md.8YbwR3TW.js
@@ -1 +1 @@
-import{_ as e,c as i,j as t,a as n,t as l,a0 as p,o as r}from"./chunks/framework.DlEm4oa2.js";const v=JSON.parse('{"title":"Setup","description":"","frontmatter":{"title":"Setup"},"headers":[],"relativePath":"setup.md","filePath":"setup.md"}'),d={name:"setup.md"},o={id:"frontmatter-title",tabindex:"-1"};function h(s,a,c,u,b,k){return r(),i("div",null,[t("h1",o,[n(l(s.$frontmatter.title)+" ",1),a[0]||(a[0]=t("a",{class:"header-anchor",href:"#frontmatter-title","aria-label":'Permalink to "{{$frontmatter.title}}"'},"​",-1))]),a[1]||(a[1]=p('
Installation ​
Install vue-semantic-structure as a dependency to your project:
bash
yarn add vue-semantic-structure
bash
npm install vue-semantic-structure
bash
pnpm add vue-semantic-structure
',3))])}const m=e(d,[["render",h]]);export{v as __pageData,m as default};
+import{_ as e,c as i,j as t,a as n,t as l,a0 as p,o as d}from"./chunks/framework.DlEm4oa2.js";const m=JSON.parse('{"title":"Setup","description":"","frontmatter":{"title":"Setup"},"headers":[],"relativePath":"setup.md","filePath":"setup.md"}'),r={name:"setup.md"},o={id:"frontmatter-title",tabindex:"-1"};function h(s,a,c,u,k,b){return d(),i("div",null,[t("h1",o,[n(l(s.$frontmatter.title)+" ",1),a[0]||(a[0]=t("a",{class:"header-anchor",href:"#frontmatter-title","aria-label":'Permalink to "{{$frontmatter.title}}"'},"​",-1))]),a[1]||(a[1]=p('
Installation ​
Install vue-semantic-structure as a dependency to your project:
bash
yarn add vue-semantic-structure
bash
npm install vue-semantic-structure
bash
pnpm add vue-semantic-structure
',3))])}const v=e(r,[["render",h]]);export{m as __pageData,v as default};
diff --git a/assets/setup.md.BbRKDSCq.lean.js b/assets/setup.md.8YbwR3TW.lean.js
similarity index 72%
rename from assets/setup.md.BbRKDSCq.lean.js
rename to assets/setup.md.8YbwR3TW.lean.js
index db75b70..c69d3ca 100644
--- a/assets/setup.md.BbRKDSCq.lean.js
+++ b/assets/setup.md.8YbwR3TW.lean.js
@@ -1 +1 @@
-import{_ as e,c as i,j as t,a as n,t as l,a0 as p,o as r}from"./chunks/framework.DlEm4oa2.js";const v=JSON.parse('{"title":"Setup","description":"","frontmatter":{"title":"Setup"},"headers":[],"relativePath":"setup.md","filePath":"setup.md"}'),d={name:"setup.md"},o={id:"frontmatter-title",tabindex:"-1"};function h(s,a,c,u,b,k){return r(),i("div",null,[t("h1",o,[n(l(s.$frontmatter.title)+" ",1),a[0]||(a[0]=t("a",{class:"header-anchor",href:"#frontmatter-title","aria-label":'Permalink to "{{$frontmatter.title}}"'},"​",-1))]),a[1]||(a[1]=p('
Installation ​
Install vue-semantic-structure as a dependency to your project:
bash
yarn add vue-semantic-structure
bash
npm install vue-semantic-structure
bash
pnpm add vue-semantic-structure
',3))])}const m=e(d,[["render",h]]);export{v as __pageData,m as default};
+import{_ as e,c as i,j as t,a as n,t as l,a0 as p,o as d}from"./chunks/framework.DlEm4oa2.js";const m=JSON.parse('{"title":"Setup","description":"","frontmatter":{"title":"Setup"},"headers":[],"relativePath":"setup.md","filePath":"setup.md"}'),r={name:"setup.md"},o={id:"frontmatter-title",tabindex:"-1"};function h(s,a,c,u,k,b){return d(),i("div",null,[t("h1",o,[n(l(s.$frontmatter.title)+" ",1),a[0]||(a[0]=t("a",{class:"header-anchor",href:"#frontmatter-title","aria-label":'Permalink to "{{$frontmatter.title}}"'},"​",-1))]),a[1]||(a[1]=p('
Installation ​
Install vue-semantic-structure as a dependency to your project:
bash
yarn add vue-semantic-structure
bash
npm install vue-semantic-structure
bash
pnpm add vue-semantic-structure
',3))])}const v=e(r,[["render",h]]);export{m as __pageData,v as default};
diff --git a/assets/usage.md.CtRcorsj.js b/assets/usage.md.Diz_axoQ.js
similarity index 97%
rename from assets/usage.md.CtRcorsj.js
rename to assets/usage.md.Diz_axoQ.js
index 7b188fa..4c5150d 100644
--- a/assets/usage.md.CtRcorsj.js
+++ b/assets/usage.md.Diz_axoQ.js
@@ -1,4 +1,4 @@
-import{_ as t,c as n,j as i,a as h,t as l,a0 as e,o as k}from"./chunks/framework.DlEm4oa2.js";const u=JSON.parse('{"title":"Usage","description":"","frontmatter":{"title":"Usage"},"headers":[],"relativePath":"usage.md","filePath":"usage.md"}'),p={name:"usage.md"},E={id:"frontmatter-title",tabindex:"-1"};function r(a,s,d,g,o,y){return k(),n("div",null,[i("h1",E,[h(l(a.$frontmatter.title)+" ",1),s[0]||(s[0]=i("a",{class:"header-anchor",href:"#frontmatter-title","aria-label":'Permalink to "{{$frontmatter.title}}"'},"​",-1))]),s[1]||(s[1]=e(`
The standard behavior of vue-semantic-structure defines the most common approach for the use of HTML structure components.
In this structure, the main content contains different modules (example: Stage (Hero), Text-Image, Gallery, etc.).
The main structure is in the <main> tag, which contains the main components.
vue
<template>
+import{_ as t,c as n,j as i,a as h,t as l,a0 as e,o as k}from"./chunks/framework.DlEm4oa2.js";const u=JSON.parse('{"title":"Usage","description":"","frontmatter":{"title":"Usage"},"headers":[],"relativePath":"usage.md","filePath":"usage.md"}'),p={name:"usage.md"},E={id:"frontmatter-title",tabindex:"-1"};function r(a,s,d,g,o,y){return k(),n("div",null,[i("h1",E,[h(l(a.$frontmatter.title)+" ",1),s[0]||(s[0]=i("a",{class:"header-anchor",href:"#frontmatter-title","aria-label":'Permalink to "{{$frontmatter.title}}"'},"​",-1))]),s[1]||(s[1]=e(`
The standard behavior of vue-semantic-structure defines the most common approach for the use of HTML structure components.
In this structure, the main content contains different modules (example: Stage (Hero), Text-Image, Gallery, etc.).
The main structure is in the <main> tag, which contains the main components.
vue
<template>
   <ContentContainer>
     <header class="hero">…</header>
     <ContentContainer class="text-image">…</ContentContainer>
@@ -20,7 +20,7 @@ import{_ as t,c as n,j as i,a as h,t as l,a0 as e,o as k}from"./chunks/framework
 
 <script setup>
 import { ContentContainer } from 'vue-semantic-structure';
-</script>
In comparison to the basic application, the entire content is enclosed in another CustomContentContainer (e.g. ContentContainer), which represents the <article> tag.
vue
<template>
+</script>
In comparison to the basic application, the entire content is enclosed in another CustomContentContainer (e.g. ContentContainer), which represents the <article> tag.
vue
<template>
   <CustomContentContainer>
     <CustomContentContainer>
       <header class="hero">…</header>
diff --git a/assets/usage.md.CtRcorsj.lean.js b/assets/usage.md.Diz_axoQ.lean.js
similarity index 97%
rename from assets/usage.md.CtRcorsj.lean.js
rename to assets/usage.md.Diz_axoQ.lean.js
index 7b188fa..4c5150d 100644
--- a/assets/usage.md.CtRcorsj.lean.js
+++ b/assets/usage.md.Diz_axoQ.lean.js
@@ -1,4 +1,4 @@
-import{_ as t,c as n,j as i,a as h,t as l,a0 as e,o as k}from"./chunks/framework.DlEm4oa2.js";const u=JSON.parse('{"title":"Usage","description":"","frontmatter":{"title":"Usage"},"headers":[],"relativePath":"usage.md","filePath":"usage.md"}'),p={name:"usage.md"},E={id:"frontmatter-title",tabindex:"-1"};function r(a,s,d,g,o,y){return k(),n("div",null,[i("h1",E,[h(l(a.$frontmatter.title)+" ",1),s[0]||(s[0]=i("a",{class:"header-anchor",href:"#frontmatter-title","aria-label":'Permalink to "{{$frontmatter.title}}"'},"​",-1))]),s[1]||(s[1]=e(`
The standard behavior of vue-semantic-structure defines the most common approach for the use of HTML structure components.
In this structure, the main content contains different modules (example: Stage (Hero), Text-Image, Gallery, etc.).
The main structure is in the <main> tag, which contains the main components.
vue
<template>
+import{_ as t,c as n,j as i,a as h,t as l,a0 as e,o as k}from"./chunks/framework.DlEm4oa2.js";const u=JSON.parse('{"title":"Usage","description":"","frontmatter":{"title":"Usage"},"headers":[],"relativePath":"usage.md","filePath":"usage.md"}'),p={name:"usage.md"},E={id:"frontmatter-title",tabindex:"-1"};function r(a,s,d,g,o,y){return k(),n("div",null,[i("h1",E,[h(l(a.$frontmatter.title)+" ",1),s[0]||(s[0]=i("a",{class:"header-anchor",href:"#frontmatter-title","aria-label":'Permalink to "{{$frontmatter.title}}"'},"​",-1))]),s[1]||(s[1]=e(`
The standard behavior of vue-semantic-structure defines the most common approach for the use of HTML structure components.
In this structure, the main content contains different modules (example: Stage (Hero), Text-Image, Gallery, etc.).
The main structure is in the <main> tag, which contains the main components.
vue
<template>
   <ContentContainer>
     <header class="hero">…</header>
     <ContentContainer class="text-image">…</ContentContainer>
@@ -20,7 +20,7 @@ import{_ as t,c as n,j as i,a as h,t as l,a0 as e,o as k}from"./chunks/framework
 
 <script setup>
 import { ContentContainer } from 'vue-semantic-structure';
-</script>
In comparison to the basic application, the entire content is enclosed in another CustomContentContainer (e.g. ContentContainer), which represents the <article> tag.
vue
<template>
+</script>
In comparison to the basic application, the entire content is enclosed in another CustomContentContainer (e.g. ContentContainer), which represents the <article> tag.
vue
<template>
   <CustomContentContainer>
     <CustomContentContainer>
       <header class="hero">…</header>
diff --git a/components/content-container.html b/components/content-container.html
index 810d955..a373761 100644
--- a/components/content-container.html
+++ b/components/content-container.html
@@ -51,7 +51,7 @@
     </section>
   </article>
 </main>

-    
+    
     
   
 
\ No newline at end of file
diff --git a/components/content-headline.html b/components/content-headline.html
index b78d1fb..0940ca2 100644
--- a/components/content-headline.html
+++ b/components/content-headline.html
@@ -51,7 +51,7 @@
     </section>
   </article>
 </main>

-    
+    
     
   
 
\ No newline at end of file
diff --git a/composables/use-content-container.html b/composables/use-content-container.html
index 57da4ca..b2fe36c 100644
--- a/composables/use-content-container.html
+++ b/composables/use-content-container.html
@@ -36,7 +36,7 @@
 
 const { currentTag } = useContentContainer();
 </script>
Options ​
PropertyTypeDescriptionDefault Value
tagStringCan be used to overwrite the tag.undefined
contentTagsArrayAvailable tags for the content structure.inject('semanticStructure_contentTags', ['article', 'section'])
rootTagsArrayAvailable tags for the root structure.inject('semanticStructure_rootTags', ['main'])
levelNumberCan be used to overwrite the level.undefined
Return ​
PropertyTypeDescription
currentTagStringGet current html tag.
parentLevelNumberGet parent level.
currentLevelNumberGet current level.
- + \ No newline at end of file diff --git a/composables/use-content-headline.html b/composables/use-content-headline.html index 8a53902..9bc53a9 100644 --- a/composables/use-content-headline.html +++ b/composables/use-content-headline.html @@ -35,7 +35,7 @@ const { currentTag } = useContentHeadline(); </script>

Options ​

PropertyTypeDescriptionDefault Value
tagStringTag for the elementundefined

Return ​

PropertyTypeDescription
currentTagStringGet current html tag.
currentLevelNumberGet current level.
- + \ No newline at end of file diff --git a/hashmap.json b/hashmap.json index 786a7ea..572a5a0 100644 --- a/hashmap.json +++ b/hashmap.json @@ -1 +1 @@ -{"components_content-container.md":"CluwDXWg","components_content-headline.md":"YDMjpzkl","composables_use-content-container.md":"BDxjWSRN","composables_use-content-headline.md":"CymvAm8X","index.md":"DaLHBZPf","introduction.md":"B4hXtU6b","setup.md":"BbRKDSCq","usage.md":"CtRcorsj"} +{"components_content-container.md":"CluwDXWg","components_content-headline.md":"YDMjpzkl","composables_use-content-container.md":"BDxjWSRN","composables_use-content-headline.md":"CymvAm8X","index.md":"DaLHBZPf","introduction.md":"K4WmSoIH","setup.md":"8YbwR3TW","usage.md":"Diz_axoQ"} diff --git a/index.html b/index.html index 7cba66a..e78cc8c 100644 --- a/index.html +++ b/index.html @@ -25,7 +25,7 @@

Appearance

Vue Semantic Structure

Helper for semantic HTML structure.

Introduction
Live Example
VitePress

Automated

Automatic heading levels (`h1`, `h2`, `h3`, `h4`, `h5`, `h6`)

Standard

Standardize the headline structure on large projects.

HTML Structure

Easy way to build sematic html structure (`main`, `article`, `section`)

- + \ No newline at end of file diff --git a/introduction.html b/introduction.html index b942291..1519188 100644 --- a/introduction.html +++ b/introduction.html @@ -12,7 +12,7 @@ - + @@ -24,7 +24,7 @@ -

Appearance

Introduction ​

What does Vue Structural Headings do? ​

It provides two components and optionally compoasables to help you build semantic HTML structure.

ComponentComposable
ContentContaineruseContentContainer
ContentHeadlineuseContentHeadline

ContentContainer ​

The ContentContainer is used to display the depth of the page structure.

With each nested ContentContainer, the page structure becomes one level deeper (level).

The appropriate HTML element for the page structure is determined based on the level.

ContentHeadline ​

The ContentHeadline is used to display the heading structure.

The ContentHeadline takes the level from the ContentContainer and sets the appropriate HTML element for the heading.

Example ​

vue
<template>
+    
Appearance
Introduction ​
What does Vue Structural Headings do? ​
It provides two components and optionally compoasables to help you build semantic HTML structure.
ComponentComposable
ContentContaineruseContentContainer
ContentHeadlineuseContentHeadline
ContentContainer ​
The ContentContainer is used to display the depth of the page structure.
With each nested ContentContainer, the page structure becomes one level deeper (level).
The appropriate HTML element for the page structure is determined based on the level.
ContentHeadline ​
The ContentHeadline is used to display the heading structure.
The ContentHeadline takes the level from the ContentContainer and sets the appropriate HTML element for the heading.
Example ​
vue
<template>
   <div>
     <header>Header</header>
     <ContentContainer>
@@ -83,7 +83,7 @@
   </main>
   <footer>Footer</footer>
 </div>

-    
+    
     
   
 
\ No newline at end of file
diff --git a/setup.html b/setup.html
index fe202fa..91d34af 100644
--- a/setup.html
+++ b/setup.html
@@ -12,7 +12,7 @@
     
     
     
-    
+    
     
     
     
@@ -24,8 +24,8 @@
     
   
   
-    
Appearance
Setup ​
Installation ​
Install vue-semantic-structure as a dependency to your project:
bash
yarn add vue-semantic-structure
bash
npm install vue-semantic-structure
bash
pnpm add vue-semantic-structure

-    
+    
Appearance
Setup ​
Installation ​
Install vue-semantic-structure as a dependency to your project:
bash
yarn add vue-semantic-structure
bash
npm install vue-semantic-structure
bash
pnpm add vue-semantic-structure

+    
     
   
 
\ No newline at end of file
diff --git a/usage.html b/usage.html
index 33c9a05..2920390 100644
--- a/usage.html
+++ b/usage.html
@@ -12,7 +12,7 @@
     
     
     
-    
+    
     
     
     
@@ -24,7 +24,7 @@
     
   
   
-    
Appearance
Usage ​
The standard behavior of vue-semantic-structure defines the most common approach for the use of HTML structure components.
In this structure, the main content contains different modules (example: Stage (Hero), Text-Image, Gallery, etc.).
The main structure is in the <main> tag, which contains the main components.
vue
<template>
+    
Appearance
Usage ​
The standard behavior of vue-semantic-structure defines the most common approach for the use of HTML structure components.
In this structure, the main content contains different modules (example: Stage (Hero), Text-Image, Gallery, etc.).
The main structure is in the <main> tag, which contains the main components.
vue
<template>
   <ContentContainer>
     <header class="hero">…</header>
     <ContentContainer class="text-image">…</ContentContainer>
@@ -46,7 +46,7 @@
 
 <script setup>
 import { ContentContainer } from 'vue-semantic-structure';
-</script>
In comparison to the basic application, the entire content is enclosed in another CustomContentContainer (e.g. ContentContainer), which represents the <article> tag.
vue
<template>
+</script>
In comparison to the basic application, the entire content is enclosed in another CustomContentContainer (e.g. ContentContainer), which represents the <article> tag.
vue
<template>
   <CustomContentContainer>
     <CustomContentContainer>
       <header class="hero">…</header>
@@ -65,7 +65,7 @@
     <section class="gallery">…</section>
   </article>
 </main>

-    
+    
     
   
 
\ No newline at end of file