Skip to content

Commit 9debb31

Browse files
mrholekmrholek
committed
docs: improve layout
1 parent 9802ae6 commit 9debb31

File tree

9 files changed

+316
-233
lines changed

9 files changed

+316
-233
lines changed

‎packages/docs/.vuepress/theme-coreui/src/client/components/Banner.vue

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
<template>
2+
<div
3+
v-if="pro_component"
4+
class="bg-danger bg-opacity-10 border-start border-start-5 border-start-danger p-4 pb-3 mb-5"
5+
>
6+
<h3 class="mb-4">CoreUI PRO Component</h3>
7+
<p>
8+
To use this component you must have a CoreUI PRO license. Buy the
9+
<a href="https://coreui.io/pricing/?framework=vue&docs=coreui-banner-pro">CoreUI PRO</a>
10+
and get access to all PRO components, features, templates, and dedicated support.
11+
</p>
12+
</div>
13+
<div
14+
v-else
15+
class="bg-info bg-opacity-10 border-start border-start-5 border-start-info p-4 pb-3 mb-5"
16+
>
17+
<h3 class="mb-4">Support CoreUI Development</h3>
18+
<p>
19+
CoreUI is an MIT-licensed open source project and is completely free to use. However, the
20+
amount of effort needed to maintain and develop new features for the project is not
21+
sustainable without proper financial backing.
22+
</p>
23+
<p>You can support our Open Source software development in the following ways:</p>
24+
<ul>
25+
<li>
26+
Buy the
27+
<a href="https://coreui.io/pricing/?framework=vue&docs=coreui-banner-pro">CoreUI PRO</a>,
28+
and get access to PRO components, and dedicated support.
29+
</li>
30+
<li>
31+
<a href="https://opencollective.com/coreui" target="_blank">Became a sponsor</a>, and get
32+
your logo on BACKERS.md/README.md files or each site of this documentation
33+
</li>
34+
<li>
35+
Give us a star ⭐️ on
36+
<a href="https://github.com/coreui/coreui-vue" target="_blank">Github</a>.
37+
</li>
38+
</ul>
39+
</div>
40+
</template>
41+
42+
<script setup lang="ts">
43+
import { usePageFrontmatter } from '@vuepress/client'
44+
import type { DefaultThemePageFrontmatter } from '../../shared'
45+
46+
const frontmatter = usePageFrontmatter<DefaultThemePageFrontmatter>()
47+
const pro_component = frontmatter.value.pro_component
48+
</script>

‎packages/docs/.vuepress/theme-coreui/src/client/components/OtherFrameworks.vue

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
<template>
2+
<template v-if="frameworks">
3+
<h2>Other frameworks</h2>
4+
<p>
5+
CoreUI components are available as native Angular, Bootstrap (Vanilla JS), and React
6+
components. To learn more please visit the following pages.
7+
</p>
8+
<ul>
9+
<template v-for="framework in frameworks">
10+
<template v-for="(el, index) in Object.keys(otherFrameworks[framework])">
11+
<li v-if="el !== 'vue'" :key="index">
12+
<a :href="otherFrameworks[framework][el]"
13+
>{{ el[0].toUpperCase() + el.slice(1) }} {{ humanize(framework) }}</a
14+
>
15+
</li>
16+
</template>
17+
</template>
18+
</ul>
19+
</template>
20+
</template>
21+
<script setup lang="ts">
22+
import { usePageFrontmatter } from '@vuepress/client'
23+
import jsonData from '../components/other_frameworks.json'
24+
import type { DefaultThemePageFrontmatter } from '../../shared'
25+
26+
const props = defineProps({
27+
pro_component: Boolean,
28+
})
29+
const frontmatter = usePageFrontmatter<DefaultThemePageFrontmatter>()
30+
const frameworks = frontmatter.value.other_frameworks
31+
? frontmatter.value.other_frameworks.split(', ')
32+
: false
33+
const otherFrameworks = JSON.parse(JSON.stringify(jsonData))
34+
35+
const humanize = (text: string) => {
36+
const string = text
37+
.split('-')
38+
.reduce(
39+
(accumulator, currentValue) =>
40+
accumulator + ' ' + currentValue[0].toUpperCase() + currentValue.slice(1),
41+
)
42+
return string[0].toUpperCase() + string.slice(1)
43+
}
44+
</script>

‎packages/docs/.vuepress/theme-coreui/src/client/components/Page.vue

Lines changed: 0 additions & 111 deletions
This file was deleted.

‎packages/docs/.vuepress/theme-coreui/src/client/components/Toc.vue

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<template>
2+
<div class="docs-toc mt-4 mb-5 my-md-0 ps-xl-5 mb-lg-5 text-body-secondary">
3+
<button
4+
class="btn btn-link p-md-0 mb-2 mb-md-0 text-decoration-none docs-toc-toggle d-md-none"
5+
type="button"
6+
:aria-expanded="visible ? true : false"
7+
aria-controls="tocContents"
8+
@click="toggleVisible()"
9+
>
10+
On this page
11+
<svg
12+
xmlns="http://www.w3.org/2000/svg"
13+
class="icon d-md-none ms-2"
14+
aria-hidden="true"
15+
viewBox="0 0 512 512"
16+
>
17+
<polygon
18+
fill="var(--ci-primary-color, currentColor)"
19+
points="256 382.627 60.687 187.313 83.313 164.687 256 337.372 428.687 164.687 451.313 187.313 256 382.627"
20+
class="ci-primary"
21+
/>
22+
</svg>
23+
</button>
24+
<strong class="d-none d-md-block h6 mb-2 pb-2 border-bottom">On this page</strong>
25+
<CCollapse class="docs-toc-collapse" id="tocContents" :visible="visible">
26+
<Toc />
27+
</CCollapse>
28+
</div>
29+
</template>
30+
<script setup lang="ts">
31+
import { ref } from 'vue'
32+
const visible = ref(false)
33+
const toggleVisible = () => {
34+
visible.value = !visible.value
35+
}
36+
</script>

0 commit comments

Comments
 (0)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy