Skip to content

Commit 714d921

Browse files
ThornWalliThornWalli
committed
fix(update): added new example; change level logic
1 parent 0fd9e49 commit 714d921

File tree

10 files changed

+202
-180
lines changed

10 files changed

+202
-180
lines changed

‎.npmignore

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
.vscode
2+
eslint.config.js
3+
eslint.ignores.js
4+
commitlint.config.mjs

‎docs/src/composables/use-content-headline.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
Optionally, the component [`<ContentHeadline>`](../components/content-headline) can also be used as a wrapper.
77
:::
88

9-
`useContentHEadline()` is used to display the headline structure.
9+
`useContentHeadline()` is used to display the headline structure.
1010

1111
Example: `h1`, `h2`, `h3`, `h4`, `h5`, `h6`
1212

‎package.json

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
"version": "1.0.0-next.2",
44
"description": "Helper for semantic HTML structure.",
55
"license": "MIT",
6+
"private": true,
67
"author": {
78
"name": "Thorn-Welf Walli",
89
"email": "[email protected]"
@@ -25,6 +26,9 @@
2526
}
2627
},
2728
"main": "./dist/index.js",
29+
"files": [
30+
"dist"
31+
],
2832
"scripts": {
2933
"prepack": "unbuild",
3034
"dev": "vite playground",

‎playground/src/App.vue

Lines changed: 149 additions & 156 deletions
Original file line numberDiff line numberDiff line change
@@ -1,188 +1,181 @@
11
<template>
22
<div>
3-
<!-- component example start -->
4-
5-
<DebugContainer debug>
6-
<div>
7-
<DebugHeadline>Headline</DebugHeadline>
8-
</div>
9-
<DebugContainer>
10-
<!-- Component 1 -->
11-
<DebugContainer>
12-
<DebugHeadline>Headline 1</DebugHeadline>
13-
14-
<DebugContainer>
15-
<DebugContainer>
16-
<DebugHeadline>Headline 1.1</DebugHeadline>
17-
</DebugContainer>
18-
<DebugContainer>
19-
<DebugHeadline>Headline 1.2</DebugHeadline>
20-
</DebugContainer>
21-
<DebugContainer>
22-
<DebugHeadline>Headline 1.3</DebugHeadline>
23-
24-
<DebugContainer>
25-
<DebugContainer>
26-
<DebugHeadline>Headline 1.3.1</DebugHeadline>
27-
</DebugContainer>
28-
<DebugContainer>
29-
<DebugHeadline>Headline 1.3.2</DebugHeadline>
30-
</DebugContainer>
31-
<DebugContainer>
32-
<DebugHeadline>Headline 1.3.3</DebugHeadline>
33-
34-
<DebugContainer>
35-
<DebugContainer>
36-
<DebugHeadline>Headline 1.3.3.1</DebugHeadline>
37-
</DebugContainer>
38-
<DebugContainer>
39-
<DebugHeadline>Headline 1.3.3.2</DebugHeadline>
40-
</DebugContainer>
41-
<DebugContainer>
42-
<DebugHeadline>Headline 1.3.3.3</DebugHeadline>
43-
44-
<DebugContainer>
45-
<DebugContainer>
46-
<DebugHeadline>Headline 1.3.3.3.1</DebugHeadline>
47-
</DebugContainer>
48-
<DebugContainer>
49-
<DebugHeadline>Headline 1.3.3.3.2</DebugHeadline>
50-
</DebugContainer>
51-
<DebugContainer>
52-
<DebugHeadline>Headline 1.3.3.3.3</DebugHeadline>
53-
</DebugContainer>
54-
</DebugContainer>
55-
</DebugContainer>
56-
</DebugContainer>
57-
</DebugContainer>
58-
</DebugContainer>
59-
</DebugContainer>
60-
</DebugContainer>
61-
</DebugContainer>
62-
63-
<!-- Component 2 -->
64-
<DebugContainer>
65-
<DebugHeadline>Headline 2</DebugHeadline>
66-
</DebugContainer>
67-
68-
<!-- Component 3 -->
69-
<DebugContainer>
70-
<DebugHeadline>Headline 3</DebugHeadline>
71-
</DebugContainer>
72-
</DebugContainer>
73-
</DebugContainer>
74-
75-
<!-- component example end -->
3+
<DefaultContentContainer debug>
4+
<header>
5+
<DebugHeadline>Stage</DebugHeadline>
6+
<p>
7+
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
8+
dolore magna aliquyam…
9+
</p>
10+
</header>
11+
<DefaultContentContainer>
12+
<DefaultContentContainer>
13+
<DebugHeadline>Text Component</DebugHeadline>
14+
<p>
15+
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
16+
dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
17+
clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet,
18+
consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
19+
sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
20+
sea takimata sanctus est Lorem ipsum dolor sit amet.
21+
</p>
22+
</DefaultContentContainer>
23+
<DefaultContentContainer>
24+
<DebugHeadline>Gallery Component</DebugHeadline>
25+
<p>
26+
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
27+
dolore magna aliquyam.
28+
</p>
29+
<div class="gallery columns-4">
30+
<div v-for="(item, index) in Array(4)" :key="index"></div>
31+
</div>
32+
</DefaultContentContainer>
33+
<DefaultContentContainer>
34+
<DebugHeadline>Teasers Component</DebugHeadline>
35+
<div class="columns-3">
36+
<DefaultContentContainer>
37+
<DebugHeadline>Teaser 1</DebugHeadline>
38+
<p>
39+
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
40+
labore et dolore magna aliquyam erat, sed diam voluptua.
41+
</p>
42+
</DefaultContentContainer>
43+
<DefaultContentContainer>
44+
<DebugHeadline>Teaser 2</DebugHeadline>
45+
<p>
46+
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
47+
labore et dolore magna aliquyam erat, sed diam voluptua.
48+
</p>
49+
</DefaultContentContainer>
50+
<DefaultContentContainer>
51+
<DebugHeadline>Teaser 3</DebugHeadline>
52+
<p>
53+
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
54+
labore et dolore magna aliquyam erat, sed diam voluptua.
55+
</p>
56+
</DefaultContentContainer>
57+
</div>
58+
</DefaultContentContainer>
59+
</DefaultContentContainer>
60+
</DefaultContentContainer>
7661

7762
<hr />
7863

79-
<!-- composable example start -->
80-
81-
<DebugContainerComposable debug>
82-
<div>
83-
<DebugHeadlineComposable>Headline</DebugHeadlineComposable>
84-
</div>
85-
<DebugContainerComposable>
86-
<!-- Component 1 -->
87-
<DebugContainerComposable>
88-
<DebugHeadlineComposable>Headline 1</DebugHeadlineComposable>
89-
90-
<DebugContainerComposable>
91-
<DebugContainerComposable>
92-
<DebugHeadlineComposable>Headline 1.1</DebugHeadlineComposable>
93-
</DebugContainerComposable>
94-
<DebugContainerComposable>
95-
<DebugHeadlineComposable>Headline 1.2</DebugHeadlineComposable>
96-
</DebugContainerComposable>
97-
<DebugContainerComposable>
98-
<DebugHeadlineComposable>Headline 1.3</DebugHeadlineComposable>
99-
100-
<DebugContainerComposable>
101-
<DebugContainerComposable>
102-
<DebugHeadlineComposable>Headline 1.3.1</DebugHeadlineComposable>
103-
</DebugContainerComposable>
104-
<DebugContainerComposable>
105-
<DebugHeadlineComposable>Headline 1.3.2</DebugHeadlineComposable>
106-
</DebugContainerComposable>
107-
<DebugContainerComposable>
108-
<DebugHeadlineComposable>Headline 1.3.3</DebugHeadlineComposable>
109-
110-
<DebugContainerComposable>
111-
<DebugContainerComposable>
112-
<DebugHeadlineComposable>Headline 1.3.3.1</DebugHeadlineComposable>
113-
</DebugContainerComposable>
114-
<DebugContainerComposable>
115-
<DebugHeadlineComposable>Headline 1.3.3.2</DebugHeadlineComposable>
116-
</DebugContainerComposable>
117-
<DebugContainerComposable>
118-
<DebugHeadlineComposable>Headline 1.3.3.3</DebugHeadlineComposable>
119-
120-
<DebugContainerComposable>
121-
<DebugContainerComposable>
122-
<DebugHeadlineComposable>Headline 1.3.3.3.1</DebugHeadlineComposable>
123-
</DebugContainerComposable>
124-
<DebugContainerComposable>
125-
<DebugHeadlineComposable>Headline 1.3.3.3.2</DebugHeadlineComposable>
126-
</DebugContainerComposable>
127-
<DebugContainerComposable>
128-
<DebugHeadlineComposable>Headline 1.3.3.3.3</DebugHeadlineComposable>
129-
</DebugContainerComposable>
130-
</DebugContainerComposable>
131-
</DebugContainerComposable>
132-
</DebugContainerComposable>
133-
</DebugContainerComposable>
134-
</DebugContainerComposable>
135-
</DebugContainerComposable>
136-
</DebugContainerComposable>
137-
</DebugContainerComposable>
138-
139-
<!-- Component 2 -->
140-
<DebugContainerComposable>
141-
<DebugHeadlineComposable>Headline 2</DebugHeadlineComposable>
142-
</DebugContainerComposable>
143-
144-
<!-- Component 3 -->
145-
<DebugContainerComposable>
146-
<DebugHeadlineComposable>Headline 3</DebugHeadlineComposable>
147-
</DebugContainerComposable>
148-
</DebugContainerComposable>
149-
</DebugContainerComposable>
150-
151-
<!-- composable example end -->
64+
<ArticleContentContainer debug>
65+
<ArticleContentContainer>
66+
<header>
67+
<DebugHeadline>Article Title</DebugHeadline>
68+
</header>
69+
70+
<ArticleContentContainer>
71+
<div>
72+
<DebugHeadline>Introduction</DebugHeadline>
73+
<p>
74+
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore
75+
et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
76+
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
77+
</p>
78+
</div>
79+
</ArticleContentContainer>
80+
81+
<ArticleContentContainer>
82+
<div>
83+
<DebugHeadline>Description</DebugHeadline>
84+
<p>
85+
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore
86+
et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
87+
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
88+
</p>
89+
</div>
90+
</ArticleContentContainer>
91+
92+
<ArticleContentContainer>
93+
<div>
94+
<DebugHeadline>More Articles</DebugHeadline>
95+
</div>
96+
<div class="columns-3">
97+
<ArticleContentContainer>
98+
<DebugHeadline>Article 1</DebugHeadline>
99+
<p>
100+
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
101+
labore et dolore magna aliquyam erat, sed diam voluptua.
102+
</p>
103+
</ArticleContentContainer>
104+
<ArticleContentContainer>
105+
<DebugHeadline>Article 2</DebugHeadline>
106+
<p>
107+
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
108+
labore et dolore magna aliquyam erat, sed diam voluptua.
109+
</p>
110+
</ArticleContentContainer>
111+
<ArticleContentContainer>
112+
<DebugHeadline>Article 3</DebugHeadline>
113+
<p>
114+
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
115+
labore et dolore magna aliquyam erat, sed diam voluptua.
116+
</p>
117+
</ArticleContentContainer>
118+
</div>
119+
</ArticleContentContainer>
120+
</ArticleContentContainer>
121+
</ArticleContentContainer>
152122

153123
<GithubCorner :url="GITHUB_URL" />
154124
</div>
155125
</template>
156126

157127
<script setup>
158-
import DebugContainer from '@/components/DebugContainer.vue';
159128
import DebugHeadline from '@/components/DebugHeadline.vue';
160-
import DebugContainerComposable from '@/components/composable/DebugContainer.vue';
161-
import DebugHeadlineComposable from '@/components/composable/DebugHeadline.vue';
162129
import GithubCorner from './components/GithubCorner.vue';
130+
import ArticleContentContainer from './components/ArticleContentContainer.vue';
131+
import DefaultContentContainer from './components/DefaultContentContainer.vue';
163132
164133
const GITHUB_URL = import.meta.env.VITE_GITHUB_URL;
165134
</script>
166135

167-
<style scoped>
136+
<style>
137+
:root {
138+
--factor: calc(1 / 2);
139+
}
140+
168141
h1 {
169-
font-size: 90px;
142+
font-size: calc(90px * var(--factor));
170143
}
171144
172145
h2 {
173-
font-size: 80px;
146+
font-size: calc(80px * var(--factor));
174147
}
175148
176149
h3 {
177-
font-size: 70px;
150+
font-size: calc(70px * var(--factor));
178151
}
179152
180153
h4 {
181-
font-size: 50px;
154+
font-size: calc(50px * var(--factor));
182155
}
183156
184157
[data-debug] {
185-
padding: 40px 10px;
186-
margin: 40px 10px;
158+
padding: 20px 10px;
159+
margin: 20px 10px;
160+
}
161+
162+
.columns-3 {
163+
display: flex;
164+
gap: 10px;
165+
166+
& > * {
167+
flex: 1;
168+
}
169+
}
170+
171+
.gallery {
172+
display: flex;
173+
gap: 10px;
174+
175+
& > * {
176+
flex: 1;
177+
height: 100px;
178+
background-color: #ccc;
179+
}
187180
}
188181
</style>

‎playground/src/components/composable/DebugContainer.vue renamed to ‎playground/src/components/ArticleContentContainer.vue

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,23 @@
11
<template>
2-
<component :is="tag" :data-debug="isDebug ? 'container' : undefined">
2+
<ContentContainer
3+
:contentTags="['article', 'section']"
4+
:rootTags="['main', 'article']"
5+
v-slot="{ parentLevel, currentLevel, currentTag }"
6+
:data-debug="isDebug ? 'container' : undefined">
37
<slot />
48
<pre
59
v-if="isDebug"
610
class="structure-debug"
711
:data-debug-parent-level="parentLevel"
8-
:data-debug-level="currentLevel"
12+
:data-debug-current-level="currentLevel"
913
:data-debug-current-tag="currentTag" />
10-
</component>
14+
</ContentContainer>
1115
</template>
1216

1317
<script setup>
1418
import { inject, provide } from 'vue';
15-
import useContentContainer from '../../../../src/useContentContainer';
19+
import { ContentContainer } from 'vue-semantic-structure';
1620
17-
const { parentLevel, currentLevel, currentTag } = useContentContainer();
1821
const props = defineProps({
1922
debug: {
2023
type: Boolean,

0 commit comments

Comments
 (0)