diff --git a/docs/.vitepress/navigation.js b/docs/.vitepress/navigation.js
index e2871e8..6c59f8c 100644
--- a/docs/.vitepress/navigation.js
+++ b/docs/.vitepress/navigation.js
@@ -10,7 +10,8 @@ export default {
text: 'Guide',
items: [
{ text: 'Introduction', link: '/introduction' },
- { text: 'Setup', link: '/setup' }
+ { text: 'Setup', link: '/setup' },
+ { text: 'Usage', link: '/usage' }
]
},
{
diff --git a/docs/src/introduction.md b/docs/src/introduction.md
index dfaaed3..44f8c50 100644
--- a/docs/src/introduction.md
+++ b/docs/src/introduction.md
@@ -33,27 +33,22 @@ If `ContentContainer` is level 2, `ContentHeadline` level 2 is rendered as `h2`.
-
+
+
Secondary Headline 1 (h2)
-
- Tertiary Headline 1.1 (h3)
-
-
- Tertiary Headline 1.2 (h3)
-
+ Tertiary Headline 1.1 (h3)
+
+
+ Tertiary Headline 1.2 (h3)
-
Secondary Headline 2 (h2)
-
- Tertiary Headline 2.1 (h3)
-
+ Tertiary Headline 2.1 (h3)
@@ -66,26 +61,22 @@ If `ContentContainer` is level 2, `ContentHeadline` level 2 is rendered as `h2`.
-
+
+
Secondary Headline 1 (h2)
-
- Tertiary Headline 1.1 (h3)
-
-
- Tertiary Headline 1.2 (h3)
-
+ Tertiary Headline 1.1 (h3)
+
+
+ Tertiary Headline 1.2 (h3)
Secondary Headline 2 (h2)
-
- Tertiary Headline 2.1 (h3)
-
+ Tertiary Headline 2.1 (h3)
diff --git a/docs/src/usage.md b/docs/src/usage.md
new file mode 100644
index 0000000..68ad986
--- /dev/null
+++ b/docs/src/usage.md
@@ -0,0 +1,85 @@
+---
+title: Usage
+---
+
+# {{$frontmatter.title}}
+
+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 `
` tag, which contains the main components.
+
+::: code-group
+
+```html [HTML]
+
+
+
+
+
+```
+
+```vue [Vue]
+
+
+
+ …
+ …
+
+
+```
+
+:::
+
+## Advance Usage
+
+The behavior of the `ContentContainer` can also be adapted for blog article pages.
+
+Here, an `` is often used in the `` tag, for which the `ContentContainer` must be adapted.
+
+The `rootTags` property must be extended by an `` (e.g. `['main', 'article']`).
+
+It is recommended to create a separate component that extends the `ContentContainer`.
+
+### `CustomContentContainer.vue`
+
+```vue
+
+
+
+
+
+
+
+```
+
+In comparison to the basic application, the entire content is enclosed in another `CustomContentContainer` (e.g. `ContentContainer`), which represents the `` tag.
+
+::: code-group
+
+```html [HTML]
+
+
+
+
+
+
+
+```
+
+```vue [Vue]
+
+
+
+
+ …
+ …
+
+
+
+```
+
+:::
diff --git a/playground/src/App.vue b/playground/src/App.vue
index 250dff7..27512e4 100644
--- a/playground/src/App.vue
+++ b/playground/src/App.vue
@@ -1,6 +1,6 @@
-
+
-
-
- Text Component
-
- Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
- dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
- clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet,
- consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
- sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
- sea takimata sanctus est Lorem ipsum dolor sit amet.
-
-
-
- Gallery Component
-
- Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
- dolore magna aliquyam.
-
-
-
-
- Teasers Component
-
-
- Teaser 1
-
- Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
- labore et dolore magna aliquyam erat, sed diam voluptua.
-
-
-
- Teaser 2
-
- Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
- labore et dolore magna aliquyam erat, sed diam voluptua.
-
-
-
- Teaser 3
-
- Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
- labore et dolore magna aliquyam erat, sed diam voluptua.
-
-
-
-
-
-
+
+ Text Component
+
+ Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
+ dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
+ clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet,
+ consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
+ sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
+ takimata sanctus est Lorem ipsum dolor sit amet.
+
+
+
+ Gallery Component
+
+ Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
+ dolore magna aliquyam.
+
+
+
+
+ Teasers Component
+
+
+ Teaser 1
+
+ Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore
+ et dolore magna aliquyam erat, sed diam voluptua.
+
+
+
+ Teaser 2
+
+ Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore
+ et dolore magna aliquyam erat, sed diam voluptua.
+
+
+
+ Teaser 3
+
+ Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore
+ et dolore magna aliquyam erat, sed diam voluptua.
+
+
+
+
+
@@ -130,7 +128,7 @@
import DebugHeadline from '@/components/DebugHeadline.vue';
import GithubCorner from './components/GithubCorner.vue';
import ArticleContentContainer from './components/ArticleContentContainer.vue';
-import DefaultContentContainer from './components/DefaultContentContainer.vue';
+import BasicContentContainer from './components/BasicContentContainer.vue';
const GITHUB_URL = import.meta.env.VITE_GITHUB_URL;
diff --git a/playground/src/components/ArticleContentContainer.vue b/playground/src/components/ArticleContentContainer.vue
index 2ca84b1..12dd461 100644
--- a/playground/src/components/ArticleContentContainer.vue
+++ b/playground/src/components/ArticleContentContainer.vue
@@ -1,6 +1,5 @@
diff --git a/playground/src/components/DefaultContentContainer.vue b/playground/src/components/BasicContentContainer.vue
similarity index 89%
rename from playground/src/components/DefaultContentContainer.vue
rename to playground/src/components/BasicContentContainer.vue
index 3ca8e8b..1368dc6 100644
--- a/playground/src/components/DefaultContentContainer.vue
+++ b/playground/src/components/BasicContentContainer.vue
@@ -1,7 +1,6 @@
diff --git a/src/ContentContainer.vue b/src/ContentContainer.vue
index 56f4270..9fee59c 100644
--- a/src/ContentContainer.vue
+++ b/src/ContentContainer.vue
@@ -34,13 +34,13 @@ export default {
contentTags: {
type: Array,
default() {
- return ['section', 'article'];
+ return ['article', 'section'];
}
},
rootTags: {
type: Array,
default() {
- return ['main', null];
+ return ['main'];
}
},
level: {
diff --git a/src/useContentContainer.js b/src/useContentContainer.js
index 02aa781..d15a070 100644
--- a/src/useContentContainer.js
+++ b/src/useContentContainer.js
@@ -2,13 +2,12 @@ import { provide, inject, computed } from 'vue';
export default function useContentContainer({ tag, contentTags, rootTags, level } = {}) {
tag = tag || null;
- contentTags = contentTags || ['section', 'article'];
- rootTags = rootTags || ['main', null];
+ contentTags = contentTags || ['article', 'section'];
+ rootTags = rootTags || ['main'];
level = level || undefined;
- const parentLevel = inject('parentLevel', 0);
+ const parentLevel = inject('parentLevel', 0);
const currentLevel = computed(() => (level !== undefined ? level : parentLevel + 1));
-
const currentTag = computed(() => {
if (tag) {
return tag;
@@ -16,7 +15,6 @@ export default function useContentContainer({ tag, contentTags, rootTags, level
if (Number(parentLevel) in rootTags) {
return rootTags[Number(parentLevel)];
}
-
return contentTags[currentLevel.value % contentTags.length];
});
diff --git a/src/useContentHeadline.js b/src/useContentHeadline.js
index 2b4e840..3c2edba 100644
--- a/src/useContentHeadline.js
+++ b/src/useContentHeadline.js
@@ -3,7 +3,7 @@ import { inject, computed } from 'vue';
export default function useContentHeadline({ tag } = {}) {
const parentLevel = inject('parentLevel', 1) + 1;
const rootLevel = inject('rootLevel', 1);
- const getMax = number => Math.max(1, Math.min(number, 6));
+
const currentLevel = computed(() => getMax(parentLevel - rootLevel));
const currentTag = computed(() => tag || `h${currentLevel.value}`);
@@ -12,3 +12,5 @@ export default function useContentHeadline({ tag } = {}) {
currentTag
};
}
+
+const getMax = number => Math.max(1, Math.min(number, 6));
diff --git a/test/contentContainer.test.js b/test/contentContainer.test.js
index 474c913..6723cf4 100644
--- a/test/contentContainer.test.js
+++ b/test/contentContainer.test.js
@@ -29,7 +29,7 @@ describe('ContentContainer', () => {
const wrapper = mount(root);
expect(wrapper.find(`main>article>section>article>section`).text()).toBe('Test');
- const needsd = ['main', null, 'article'];
+ const needsd = ['main', 'article'];
needsd.forEach((tag, index) => {
if (tag) {
expect(wrapper.find(`[data-current-level="${index + 1}"]`).attributes('data-parent-level')).toBe(String(index));
diff --git a/test/contentHeadline.test.js b/test/contentHeadline.test.js
index 3c338ed..05dc1e1 100644
--- a/test/contentHeadline.test.js
+++ b/test/contentHeadline.test.js
@@ -15,6 +15,7 @@ describe('contentHeadline', () => {
components: { ContentContainer, ContentHeadline: DebugContentHeadline },
template: `
+
@@ -25,9 +26,6 @@ describe('contentHeadline', () => {
-
-
-
diff --git a/test/useContentContainer.test.js b/test/useContentContainer.test.js
index 6191756..221c461 100644
--- a/test/useContentContainer.test.js
+++ b/test/useContentContainer.test.js
@@ -36,7 +36,7 @@ describe('useContentContainer', () => {
const wrapper = mount(root);
expect(wrapper.find(`main>article>section>article>section`).text()).toBe('Test');
- const needsd = ['main', null, 'article'];
+ const needsd = ['main', 'article'];
needsd.forEach((tag, index) => {
if (tag) {
expect(wrapper.find(`[data-current-level="${index + 1}"]`).attributes('data-parent-level')).toBe(String(index));
diff --git a/test/useContentHeadline.test.js b/test/useContentHeadline.test.js
index 4a38814..8205b29 100644
--- a/test/useContentHeadline.test.js
+++ b/test/useContentHeadline.test.js
@@ -26,7 +26,6 @@ describe('useContentHeadline', () => {
const root = defineComponent({
components: { ContentContainer, ContentHeadline },
template: `
-
@@ -44,12 +43,10 @@ describe('useContentHeadline', () => {
-
- `
+ `
});
const wrapper = mount(root);
- console.log(wrapper.html());
expect(wrapper.find('main > h1').text()).toBe(String('h1'));
expect(wrapper.find('main > article > h2').text()).toBe(String('h2'));
expect(wrapper.find('main > article > section > h3').text()).toBe(String('h3'));
@@ -59,9 +56,132 @@ describe('useContentHeadline', () => {
expect(
wrapper
.find(
- '[data-current-level="1"] > [data-current-level="3"] > [data-current-level="4"] > [data-current-level="5"] > [data-current-level="6"] > [data-current-level="7"] > h6'
+ '[data-current-level="1"] > [data-current-level="2"] > [data-current-level="3"] > [data-current-level="4"] > [data-current-level="5"] > [data-current-level="6"] > h6'
)
.text()
).toBe(String('h6'));
});
});
+
+describe('useContentHeadline (rootTags)', () => {
+ test('Structure Value Check', () => {
+ const ContentContainer = defineComponent({
+ template: `
+ `,
+ setup() {
+ const { currentTag, currentLevel, parentLevel } = useContentContainer({
+ rootTags: ['main', 'article']
+ });
+ return { currentTag, currentLevel, parentLevel };
+ }
+ });
+
+ const ContentHeadline = defineComponent({
+ template: '{{currentTag}}',
+ setup() {
+ const { currentTag, level } = useContentHeadline();
+ return { currentTag, level };
+ }
+ });
+
+ const root = defineComponent({
+ components: { ContentContainer, ContentHeadline },
+ template: `
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ `
+ });
+
+ const wrapper = mount(root);
+
+ expect(wrapper.find('main > article > h1').text()).toBe(String('h1'));
+ expect(wrapper.find('main > article > section > h2').text()).toBe(String('h2'));
+ expect(wrapper.find('main > article > section > article > h3').text()).toBe(String('h3'));
+ expect(wrapper.find('main > article > section > article > section > h4').text()).toBe(String('h4'));
+ expect(wrapper.find('main > article > section > article > section > article > h5').text()).toBe(String('h5'));
+ expect(wrapper.find('main > article > section > article > section > article > section > h6').text()).toBe(
+ String('h6')
+ );
+ expect(
+ wrapper
+ .find(
+ '[data-current-level="1"] > [data-current-level="2"] > [data-current-level="3"] > [data-current-level="4"] > [data-current-level="5"] > [data-current-level="6"] > [data-current-level="7"] > h6'
+ )
+ .text()
+ ).toBe(String('h6'));
+ });
+});
+
+describe('useContentHeadline (contentTags)', () => {
+ test('Structure Value Check', () => {
+ const ContentContainer = defineComponent({
+ template: `
+ `,
+ setup() {
+ const { currentTag, currentLevel, parentLevel } = useContentContainer({
+ rootTags: ['ul'],
+ contentTags: ['li', 'ul']
+ });
+ return { currentTag, currentLevel, parentLevel };
+ }
+ });
+
+ const ContentHeadline = defineComponent({
+ template: '{{currentTag}}',
+ setup() {
+ const { currentTag, level } = useContentHeadline();
+ return { currentTag, level };
+ }
+ });
+
+ const root = defineComponent({
+ components: { ContentContainer, ContentHeadline },
+ template: `
+
+
+ Item 1.
+
+
+ Item 1.1.
+
+
+ Item 1.1.1.
+
+
+
+
+
+ `
+ });
+
+ const wrapper = mount(root);
+
+ expect(wrapper.find('ul > li > span').text()).toBe(String('Item 1.'));
+ expect(wrapper.find('ul > li > ul > li > span').text()).toBe(String('Item 1.1.'));
+ expect(wrapper.find('ul > li > ul > li > ul > li > span').text()).toBe(String('Item 1.1.1.'));
+ expect(
+ wrapper
+ .find(
+ '[data-current-level="1"] > [data-current-level="2"] > [data-current-level="3"] > [data-current-level="4"] > [data-current-level="5"] > [data-current-level="6"] > span'
+ )
+ .text()
+ ).toBe(String('Item 1.1.1.'));
+ });
+});