diff --git a/404.html b/404.html index 074f9d9..ac59931 100644 --- a/404.html +++ b/404.html @@ -22,7 +22,7 @@
- + \ No newline at end of file diff --git a/assets/introduction.md.C8JnTklw.js b/assets/introduction.md.C_iCmQ9U.js similarity index 98% rename from assets/introduction.md.C8JnTklw.js rename to assets/introduction.md.C_iCmQ9U.js index 99a34fb..567e95f 100644 --- a/assets/introduction.md.C8JnTklw.js +++ b/assets/introduction.md.C_iCmQ9U.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.BZ-jlz8c.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.BZ-jlz8c.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>
@@ -56,4 +56,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
     </article>
   </main>
   <footer>Footer</footer>
-</div>
`,12))])}const D=t(p,[["render",r]]);export{u as __pageData,D as default};
+</div>
`,12))])}const A=t(p,[["render",r]]);export{u as __pageData,A as default}; diff --git a/assets/introduction.md.C8JnTklw.lean.js b/assets/introduction.md.C_iCmQ9U.lean.js similarity index 98% rename from assets/introduction.md.C8JnTklw.lean.js rename to assets/introduction.md.C_iCmQ9U.lean.js index 99a34fb..567e95f 100644 --- a/assets/introduction.md.C8JnTklw.lean.js +++ b/assets/introduction.md.C_iCmQ9U.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.BZ-jlz8c.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.BZ-jlz8c.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>
@@ -56,4 +56,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
     </article>
   </main>
   <footer>Footer</footer>
-</div>
`,12))])}const D=t(p,[["render",r]]);export{u as __pageData,D as default};
+</div>
`,12))])}const A=t(p,[["render",r]]);export{u as __pageData,A as default}; diff --git a/assets/setup.md.CKNs609I.js b/assets/setup.md.6mMvtVQ-.js similarity index 76% rename from assets/setup.md.CKNs609I.js rename to assets/setup.md.6mMvtVQ-.js index 2c5b915..d63e3d3 100644 --- a/assets/setup.md.CKNs609I.js +++ b/assets/setup.md.6mMvtVQ-.js @@ -1 +1 @@ -import{_ as e,c as i,j as t,a as n,t as l,a0 as p,o as d}from"./chunks/framework.BZ-jlz8c.js";const g=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{g as __pageData,v as default}; +import{_ as e,c as i,j as t,a as l,t as n,a0 as p,o as d}from"./chunks/framework.BZ-jlz8c.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,[l(n(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.CKNs609I.lean.js b/assets/setup.md.6mMvtVQ-.lean.js similarity index 76% rename from assets/setup.md.CKNs609I.lean.js rename to assets/setup.md.6mMvtVQ-.lean.js index 2c5b915..d63e3d3 100644 --- a/assets/setup.md.CKNs609I.lean.js +++ b/assets/setup.md.6mMvtVQ-.lean.js @@ -1 +1 @@ -import{_ as e,c as i,j as t,a as n,t as l,a0 as p,o as d}from"./chunks/framework.BZ-jlz8c.js";const g=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{g as __pageData,v as default}; +import{_ as e,c as i,j as t,a as l,t as n,a0 as p,o as d}from"./chunks/framework.BZ-jlz8c.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,[l(n(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.D9zalVo3.js b/assets/usage.md.DcYQrKGu.js similarity index 97% rename from assets/usage.md.D9zalVo3.js rename to assets/usage.md.DcYQrKGu.js index 9677483..88be874 100644 --- a/assets/usage.md.D9zalVo3.js +++ b/assets/usage.md.DcYQrKGu.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.BZ-jlz8c.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.BZ-jlz8c.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.D9zalVo3.lean.js b/assets/usage.md.DcYQrKGu.lean.js
similarity index 97%
rename from assets/usage.md.D9zalVo3.lean.js
rename to assets/usage.md.DcYQrKGu.lean.js
index 9677483..88be874 100644
--- a/assets/usage.md.D9zalVo3.lean.js
+++ b/assets/usage.md.DcYQrKGu.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.BZ-jlz8c.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.BZ-jlz8c.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 5855af7..1b2803a 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 8311c7f..cfc2364 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 1e3c71b..54100a8 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 26fc479..a199067 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 9e64df2..6df757f 100644 --- a/hashmap.json +++ b/hashmap.json @@ -1 +1 @@ -{"components_content-container.md":"Ckcane11","components_content-headline.md":"Ddze9sNO","composables_use-content-container.md":"CK9LWECO","composables_use-content-headline.md":"KsS_g5WC","index.md":"CHP_zj8S","introduction.md":"C8JnTklw","setup.md":"CKNs609I","usage.md":"D9zalVo3"} +{"components_content-container.md":"Ckcane11","components_content-headline.md":"Ddze9sNO","composables_use-content-container.md":"CK9LWECO","composables_use-content-headline.md":"KsS_g5WC","index.md":"CHP_zj8S","introduction.md":"C_iCmQ9U","setup.md":"6mMvtVQ-","usage.md":"DcYQrKGu"} diff --git a/index.html b/index.html index 36ad16c..4f840c1 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 0de28b2..098226e 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/playground/assets/index-BvyZMD_3.css b/playground/assets/index-Bnq0QmiT.css
similarity index 100%
rename from playground/assets/index-BvyZMD_3.css
rename to playground/assets/index-Bnq0QmiT.css
diff --git a/playground/assets/index-Cxhb0K0t.js b/playground/assets/index-C89gE6iS.js
similarity index 100%
rename from playground/assets/index-Cxhb0K0t.js
rename to playground/assets/index-C89gE6iS.js
diff --git a/playground/index.html b/playground/index.html
index 0651996..d058746 100644
--- a/playground/index.html
+++ b/playground/index.html
@@ -5,8 +5,8 @@
     
     
     Vite + Vue
-    
-    
+    
+    
   
   
     

diff --git a/setup.html b/setup.html
index afa45aa..5c8322c 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 7e1c14a..75a9b79 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