Skip to content

Commit

Permalink
fix(update): added new example; change level logic
Browse files Browse the repository at this point in the history
  • Loading branch information
@ThornWalli
ThornWalli committed Sep 24, 2024
1 parent 0fd9e49 commit 714d921
Show file tree
Hide file tree
Showing 10 changed files with 202 additions and 180 deletions.
4 changes: 4 additions & 0 deletions .npmignore
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
.vscode
eslint.config.js
eslint.ignores.js
commitlint.config.mjs
2 changes: 1 addition & 1 deletion docs/src/composables/use-content-headline.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
Optionally, the component [`<ContentHeadline>`](../components/content-headline) can also be used as a wrapper.
:::

`useContentHEadline()` is used to display the headline structure.
`useContentHeadline()` is used to display the headline structure.

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

Expand Down
4 changes: 4 additions & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
"version": "1.0.0-next.2",
"description": "Helper for semantic HTML structure.",
"license": "MIT",
"private": true,
"author": {
"name": "Thorn-Welf Walli",
"email": "[email protected]"
Expand All @@ -25,6 +26,9 @@
}
},
"main": "./dist/index.js",
"files": [
"dist"
],
"scripts": {
"prepack": "unbuild",
"dev": "vite playground",
Expand Down
305 changes: 149 additions & 156 deletions playground/src/App.vue
View file
Original file line number Diff line number Diff line change
@@ -1,188 +1,181 @@
<template>
<div>
<!-- component example start -->

<DebugContainer debug>
<div>
<DebugHeadline>Headline</DebugHeadline>
</div>
<DebugContainer>
<!-- Component 1 -->
<DebugContainer>
<DebugHeadline>Headline 1</DebugHeadline>

<DebugContainer>
<DebugContainer>
<DebugHeadline>Headline 1.1</DebugHeadline>
</DebugContainer>
<DebugContainer>
<DebugHeadline>Headline 1.2</DebugHeadline>
</DebugContainer>
<DebugContainer>
<DebugHeadline>Headline 1.3</DebugHeadline>

<DebugContainer>
<DebugContainer>
<DebugHeadline>Headline 1.3.1</DebugHeadline>
</DebugContainer>
<DebugContainer>
<DebugHeadline>Headline 1.3.2</DebugHeadline>
</DebugContainer>
<DebugContainer>
<DebugHeadline>Headline 1.3.3</DebugHeadline>

<DebugContainer>
<DebugContainer>
<DebugHeadline>Headline 1.3.3.1</DebugHeadline>
</DebugContainer>
<DebugContainer>
<DebugHeadline>Headline 1.3.3.2</DebugHeadline>
</DebugContainer>
<DebugContainer>
<DebugHeadline>Headline 1.3.3.3</DebugHeadline>

<DebugContainer>
<DebugContainer>
<DebugHeadline>Headline 1.3.3.3.1</DebugHeadline>
</DebugContainer>
<DebugContainer>
<DebugHeadline>Headline 1.3.3.3.2</DebugHeadline>
</DebugContainer>
<DebugContainer>
<DebugHeadline>Headline 1.3.3.3.3</DebugHeadline>
</DebugContainer>
</DebugContainer>
</DebugContainer>
</DebugContainer>
</DebugContainer>
</DebugContainer>
</DebugContainer>
</DebugContainer>
</DebugContainer>

<!-- Component 2 -->
<DebugContainer>
<DebugHeadline>Headline 2</DebugHeadline>
</DebugContainer>

<!-- Component 3 -->
<DebugContainer>
<DebugHeadline>Headline 3</DebugHeadline>
</DebugContainer>
</DebugContainer>
</DebugContainer>

<!-- component example end -->
<DefaultContentContainer debug>
<header>
<DebugHeadline>Stage</DebugHeadline>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
dolore magna aliquyam…
</p>
</header>
<DefaultContentContainer>
<DefaultContentContainer>
<DebugHeadline>Text Component</DebugHeadline>
<p>
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.
</p>
</DefaultContentContainer>
<DefaultContentContainer>
<DebugHeadline>Gallery Component</DebugHeadline>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
dolore magna aliquyam.
</p>
<div class="gallery columns-4">
<div v-for="(item, index) in Array(4)" :key="index"></div>
</div>
</DefaultContentContainer>
<DefaultContentContainer>
<DebugHeadline>Teasers Component</DebugHeadline>
<div class="columns-3">
<DefaultContentContainer>
<DebugHeadline>Teaser 1</DebugHeadline>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
labore et dolore magna aliquyam erat, sed diam voluptua.
</p>
</DefaultContentContainer>
<DefaultContentContainer>
<DebugHeadline>Teaser 2</DebugHeadline>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
labore et dolore magna aliquyam erat, sed diam voluptua.
</p>
</DefaultContentContainer>
<DefaultContentContainer>
<DebugHeadline>Teaser 3</DebugHeadline>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
labore et dolore magna aliquyam erat, sed diam voluptua.
</p>
</DefaultContentContainer>
</div>
</DefaultContentContainer>
</DefaultContentContainer>
</DefaultContentContainer>

<hr />

<!-- composable example start -->

<DebugContainerComposable debug>
<div>
<DebugHeadlineComposable>Headline</DebugHeadlineComposable>
</div>
<DebugContainerComposable>
<!-- Component 1 -->
<DebugContainerComposable>
<DebugHeadlineComposable>Headline 1</DebugHeadlineComposable>

<DebugContainerComposable>
<DebugContainerComposable>
<DebugHeadlineComposable>Headline 1.1</DebugHeadlineComposable>
</DebugContainerComposable>
<DebugContainerComposable>
<DebugHeadlineComposable>Headline 1.2</DebugHeadlineComposable>
</DebugContainerComposable>
<DebugContainerComposable>
<DebugHeadlineComposable>Headline 1.3</DebugHeadlineComposable>

<DebugContainerComposable>
<DebugContainerComposable>
<DebugHeadlineComposable>Headline 1.3.1</DebugHeadlineComposable>
</DebugContainerComposable>
<DebugContainerComposable>
<DebugHeadlineComposable>Headline 1.3.2</DebugHeadlineComposable>
</DebugContainerComposable>
<DebugContainerComposable>
<DebugHeadlineComposable>Headline 1.3.3</DebugHeadlineComposable>

<DebugContainerComposable>
<DebugContainerComposable>
<DebugHeadlineComposable>Headline 1.3.3.1</DebugHeadlineComposable>
</DebugContainerComposable>
<DebugContainerComposable>
<DebugHeadlineComposable>Headline 1.3.3.2</DebugHeadlineComposable>
</DebugContainerComposable>
<DebugContainerComposable>
<DebugHeadlineComposable>Headline 1.3.3.3</DebugHeadlineComposable>

<DebugContainerComposable>
<DebugContainerComposable>
<DebugHeadlineComposable>Headline 1.3.3.3.1</DebugHeadlineComposable>
</DebugContainerComposable>
<DebugContainerComposable>
<DebugHeadlineComposable>Headline 1.3.3.3.2</DebugHeadlineComposable>
</DebugContainerComposable>
<DebugContainerComposable>
<DebugHeadlineComposable>Headline 1.3.3.3.3</DebugHeadlineComposable>
</DebugContainerComposable>
</DebugContainerComposable>
</DebugContainerComposable>
</DebugContainerComposable>
</DebugContainerComposable>
</DebugContainerComposable>
</DebugContainerComposable>
</DebugContainerComposable>
</DebugContainerComposable>

<!-- Component 2 -->
<DebugContainerComposable>
<DebugHeadlineComposable>Headline 2</DebugHeadlineComposable>
</DebugContainerComposable>

<!-- Component 3 -->
<DebugContainerComposable>
<DebugHeadlineComposable>Headline 3</DebugHeadlineComposable>
</DebugContainerComposable>
</DebugContainerComposable>
</DebugContainerComposable>

<!-- composable example end -->
<ArticleContentContainer debug>
<ArticleContentContainer>
<header>
<DebugHeadline>Article Title</DebugHeadline>
</header>

<ArticleContentContainer>
<div>
<DebugHeadline>Introduction</DebugHeadline>
<p>
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.
</p>
</div>
</ArticleContentContainer>

<ArticleContentContainer>
<div>
<DebugHeadline>Description</DebugHeadline>
<p>
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.
</p>
</div>
</ArticleContentContainer>

<ArticleContentContainer>
<div>
<DebugHeadline>More Articles</DebugHeadline>
</div>
<div class="columns-3">
<ArticleContentContainer>
<DebugHeadline>Article 1</DebugHeadline>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
labore et dolore magna aliquyam erat, sed diam voluptua.
</p>
</ArticleContentContainer>
<ArticleContentContainer>
<DebugHeadline>Article 2</DebugHeadline>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
labore et dolore magna aliquyam erat, sed diam voluptua.
</p>
</ArticleContentContainer>
<ArticleContentContainer>
<DebugHeadline>Article 3</DebugHeadline>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
labore et dolore magna aliquyam erat, sed diam voluptua.
</p>
</ArticleContentContainer>
</div>
</ArticleContentContainer>
</ArticleContentContainer>
</ArticleContentContainer>

<GithubCorner :url="GITHUB_URL" />
</div>
</template>

<script setup>
import DebugContainer from '@/components/DebugContainer.vue';
import DebugHeadline from '@/components/DebugHeadline.vue';
import DebugContainerComposable from '@/components/composable/DebugContainer.vue';
import DebugHeadlineComposable from '@/components/composable/DebugHeadline.vue';
import GithubCorner from './components/GithubCorner.vue';
import ArticleContentContainer from './components/ArticleContentContainer.vue';
import DefaultContentContainer from './components/DefaultContentContainer.vue';
const GITHUB_URL = import.meta.env.VITE_GITHUB_URL;
</script>

<style scoped>
<style>
:root {
--factor: calc(1 / 2);
}
h1 {
font-size: 90px;
font-size: calc(90px * var(--factor));
}
h2 {
font-size: 80px;
font-size: calc(80px * var(--factor));
}
h3 {
font-size: 70px;
font-size: calc(70px * var(--factor));
}
h4 {
font-size: 50px;
font-size: calc(50px * var(--factor));
}
[data-debug] {
padding: 40px 10px;
margin: 40px 10px;
padding: 20px 10px;
margin: 20px 10px;
}
.columns-3 {
display: flex;
gap: 10px;
& > * {
flex: 1;
}
}
.gallery {
display: flex;
gap: 10px;
& > * {
flex: 1;
height: 100px;
background-color: #ccc;
}
}
</style>
13 changes: 8 additions & 5 deletions .../components/composable/DebugContainer.vue → ...rc/components/ArticleContentContainer.vue
View file
Original file line number Diff line number Diff line change
@@ -1,20 +1,23 @@
<template>
<component :is="tag" :data-debug="isDebug ? 'container' : undefined">
<ContentContainer
:contentTags="['article', 'section']"
:rootTags="['main', 'article']"
v-slot="{ parentLevel, currentLevel, currentTag }"
:data-debug="isDebug ? 'container' : undefined">
<slot />
<pre
v-if="isDebug"
class="structure-debug"
:data-debug-parent-level="parentLevel"
:data-debug-level="currentLevel"
:data-debug-current-level="currentLevel"
:data-debug-current-tag="currentTag" />
</component>
</ContentContainer>
</template>

<script setup>
import { inject, provide } from 'vue';
import useContentContainer from '../../../../src/useContentContainer';
import { ContentContainer } from 'vue-semantic-structure';
const { parentLevel, currentLevel, currentTag } = useContentContainer();
const props = defineProps({
debug: {
type: Boolean,
Expand Down
Loading

0 comments on commit 714d921

Please sign in to comment.