Skip to content

Commit 06f5a00

Browse files
gioboagioboa
committed
add vuepress to manage docs
1 parent e2cdead commit 06f5a00

File tree

260 files changed

+22016
-223
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

260 files changed

+22016
-223
lines changed

‎apps/docs/.env.example‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
VITE_DOCS_BASEPATH=/v2/
2+
VITE_DOCS_EXAMPLES_REACT_PATH=http://localhost:3002
3+
VITE_DOCS_EXAMPLES_VUE_PATH=http://localhost:3001

‎apps/docs/.gitignore‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
pids
2+
logs
3+
node_modules
4+
npm-debug.log
5+
coverage/
6+
run
7+
dist
8+
.DS_Store
9+
.nyc_output
10+
.basement
11+
config.local.js
12+
basement_dist
13+
dist/
14+
.env
15+

‎apps/docs/.vuepress/components/ColorPalette.vue‎

Lines changed: 115 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,115 @@
1+
<template>
2+
<div class="custom-block">
3+
<div v-for="color in Object.keys(colors)" :key="color" class="grid grid-cols-10 gap-4">
4+
<h4 class="w-full capitalize col-span-10 mt-8 text-xl">{{ color }}</h4>
5+
<ColorPaletteBlock
6+
v-for="shade in Object.keys(colors[color])"
7+
:key="shade"
8+
class="col-span-5 md:col-span-3 xl:col-span-2"
9+
:rgb-color="colors[color][shade]"
10+
:name="`${color}-${shade}`"
11+
/>
12+
</div>
13+
</div>
14+
</template>
15+
16+
<script>
17+
import ColorPaletteBlock from './ColorPaletteBlock.vue';
18+
// copied over from: packages/config/tailwind/index.ts
19+
const colors = {
20+
primary: {
21+
'50': '240 253 244',
22+
'100': '220 252 231',
23+
'200': '187 247 208',
24+
'300': '134 239 172',
25+
'400': '74 222 128',
26+
'500': '2 198 82',
27+
'600': '10 171 69',
28+
'700': '1 137 55',
29+
'800': '22 101 52',
30+
'900': '20 83 45',
31+
},
32+
secondary: {
33+
'50': '245 243 255',
34+
'100': '237 233 254',
35+
'200': '221 214 254',
36+
'300': '196 181 253',
37+
'400': '167 139 250',
38+
'500': '135 92 246',
39+
'600': '111 64 236',
40+
'700': '97 49 221',
41+
'800': '83 30 211',
42+
'900': '68 21 178',
43+
},
44+
positive: {
45+
'50': '240 253 244',
46+
'100': '220 252 231',
47+
'200': '187 247 208',
48+
'300': '134 239 172',
49+
'400': '74 222 128',
50+
'500': '2 198 82',
51+
'600': '10 171 69',
52+
'700': '1 137 55',
53+
'800': '22 101 52',
54+
'900': '20 83 45',
55+
},
56+
negative: {
57+
'50': '255 241 242',
58+
'100': '255 228 230',
59+
'200': '254 205 211',
60+
'300': '253 164 175',
61+
'400': '251 113 133',
62+
'500': '244 63 94',
63+
'600': '225 29 72',
64+
'700': '190 18 60',
65+
'800': '159 18 57',
66+
'900': '136 19 55',
67+
},
68+
warning: {
69+
'50': '254 252 232',
70+
'100': '254 249 195',
71+
'200': '254 240 138',
72+
'300': '253 224 71',
73+
'400': '250 204 21',
74+
'500': '234 179 8',
75+
'600': '202 138 4',
76+
'700': '161 98 7',
77+
'800': '133 77 14',
78+
'900': '113 63 18',
79+
},
80+
neutral: {
81+
'50': '250 250 250',
82+
'100': '244 244 245',
83+
'200': '228 228 231',
84+
'300': '212 212 216',
85+
'400': '161 161 170',
86+
'500': '113 113 122',
87+
'600': '82 82 91',
88+
'700': '63 63 70',
89+
'800': '39 39 42',
90+
'900': '24 24 27',
91+
},
92+
disabled: {
93+
'50': '250 250 250',
94+
'100': '244 244 245',
95+
'200': '228 228 231',
96+
'300': '212 212 216',
97+
'400': '161 161 170',
98+
'500': '113 113 122',
99+
'600': '82 82 91',
100+
'700': '63 63 70',
101+
'800': '39 39 42',
102+
'900': '24 24 27',
103+
},
104+
};
105+
export default {
106+
components: {
107+
ColorPaletteBlock,
108+
},
109+
data() {
110+
return {
111+
colors,
112+
};
113+
},
114+
};
115+
</script>

‎apps/docs/.vuepress/components/ColorPaletteBlock.vue‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
<template>
2+
<div role="button" tabindex="0" @click="copyColorToClipboard" @keydown.enter="copyColorToClipboard">
3+
<div
4+
class="h-10 rounded border dark:border-zinc-700 mb-1"
5+
:style="{
6+
backgroundColor: `rgb(${rgbColor})`,
7+
}"
8+
/>
9+
<p v-if="copied" class="flex items-center text-xs">
10+
<iconify-icon icon="ri:check-line" height="16" class="text-green" />
11+
Copied
12+
</p>
13+
<p v-else class="text-xs flex items-center justify-between">
14+
<span>{{ name }}</span>
15+
<span class="font-mono">{{ hex }}</span>
16+
</p>
17+
</div>
18+
</template>
19+
20+
<script>
21+
function componentToHex(c) {
22+
var hex = parseInt(c).toString(16);
23+
return hex.length == 1 ? '0' + hex : hex;
24+
}
25+
export default {
26+
props: {
27+
rgbColor: {
28+
type: String,
29+
required: true,
30+
},
31+
name: {
32+
type: String,
33+
required: true,
34+
},
35+
},
36+
data() {
37+
return {
38+
copied: false,
39+
};
40+
},
41+
methods: {
42+
async copyColorToClipboard() {
43+
await navigator.clipboard.writeText(this.name);
44+
this.copied = true;
45+
setTimeout(() => {
46+
this.copied = false;
47+
}, 1000);
48+
},
49+
},
50+
computed: {
51+
hex() {
52+
const [r, g, b] = this.rgbColor.split(' ');
53+
return '#' + componentToHex(r) + componentToHex(g) + componentToHex(b);
54+
},
55+
},
56+
};
57+
</script>

‎apps/docs/.vuepress/components/ComponentList.vue‎

Lines changed: 95 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
<template>
2+
<div class="mt-16 custom-block">
3+
<div class="relative grid grid-cols-12 gap-8">
4+
<RouterLink
5+
v-for="componentName in components"
6+
:key="componentName"
7+
class="col-span-12 overflow-hidden transition-all border rounded-lg hover:-translate-y-1 hover:shadow-md md:col-span-6 lg:col-span-4 hover:border-black dark:hover:border-white dark:border-zinc-700"
8+
:to="generateComponentPath(framework, componentName, type)"
9+
>
10+
<div v-if="!hideThumbnail" class="flex items-center justify-center w-full bg-gray-100">
11+
<img
12+
:src="$withBase(`/thumbnails/${type}/${componentName.replace('Sf', '')}.png`)"
13+
class="object-cover w-full h-full"
14+
:alt="componentName"
15+
/>
16+
</div>
17+
<div class="p-4">
18+
<h4 class="font-bold">{{ componentName.replace('Sf', '') }}</h4>
19+
<p v-if="type === 'blocks'" class="mt-2 text-sm">{{ blockCount(componentName) }} blocks</p>
20+
<p v-if="!hideDescription" class="mt-2 text-sm">{{ componentDescription(componentName) }}</p>
21+
</div>
22+
</RouterLink>
23+
<template v-if="type === 'blocks'">
24+
<div
25+
v-for="componentName in futureBlocks"
26+
:key="componentName"
27+
class="col-span-12 overflow-hidden transition-all border rounded-lg opacity-60 md:col-span-6 lg:col-span-4 dark:border-zinc-700"
28+
>
29+
<div v-if="!hideThumbnail" class="flex items-center justify-center w-full bg-gray-100">
30+
<img
31+
:src="$withBase(`/thumbnails/${type}/${componentName.replace('Sf', '')}.png`)"
32+
class="object-cover w-full h-full"
33+
:alt="componentName"
34+
/>
35+
</div>
36+
<div class="p-4">
37+
<h4 class="font-bold">{{ componentName.replace('Sf', '') }}</h4>
38+
<p class="mt-2 text-sm">Coming Soon</p>
39+
</div>
40+
</div>
41+
</template>
42+
</div>
43+
</div>
44+
</template>
45+
46+
<script>
47+
import components from '../../utils/components.json';
48+
import blocks from '../../utils/blocks.json';
49+
import futureBlocks from '../../utils/future-blocks.json';
50+
import hooks from '../../utils/hooks.json';
51+
import { generateComponentPath } from '../utils/path.util';
52+
53+
export default {
54+
props: {
55+
framework: {
56+
type: String,
57+
required: true,
58+
},
59+
type: {
60+
type: String,
61+
default: 'components',
62+
},
63+
hideThumbnail: {
64+
type: Boolean,
65+
default: false,
66+
},
67+
hideDescription: {
68+
type: Boolean,
69+
default: false,
70+
},
71+
},
72+
computed: {
73+
components() {
74+
const files = this.type === 'blocks' ? blocks : this.type === 'hooks' ? hooks : components;
75+
const list = this.framework === 'react' ? files.react : files.vue;
76+
return list;
77+
},
78+
},
79+
methods: {
80+
componentDescription(componentName) {
81+
const componentPath = `/${this.framework}/${this.type}/${componentName.replace('Sf', '').toLowerCase()}.html`;
82+
83+
return this.$site.pages.find((page) => page.path.toLowerCase() === componentPath)?.frontmatter?.description;
84+
},
85+
blockCount(componentName) {
86+
const componentPath = `/${this.framework}/${this.type}/${componentName.replace('Sf', '').toLowerCase()}.html`;
87+
88+
return this.$site.pages.find((page) => page.path.toLowerCase() === componentPath)?.frontmatter?.blockCount;
89+
},
90+
},
91+
data() {
92+
return { generateComponentPath, futureBlocks };
93+
},
94+
};
95+
</script>

‎apps/docs/.vuepress/components/FigmaLink.vue‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<template>
2+
<div class="custom-block border flex items-center p-4 rounded dark:border-zinc-700">
3+
<iconify-icon icon="logos:figma" height="24" class="mr-4" />
4+
<p>
5+
All coded components are available in the SFUI
6+
<a :href="$themeConfig.FIGMA_URL" target="_blank" class="text-green underline"> Figma file. </a>
7+
</p>
8+
</div>
9+
</template>
10+
11+
<script></script>

‎apps/docs/.vuepress/components/Generate.vue‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
<template>
2+
<div class="custom-block border bg-white mt-4" :class="{ generate: !showcasePath }">
3+
<iframe :src="exampleUrl" :allow="allow" class="w-full h-full" ref="iframeRef"/>
4+
</div>
5+
</template>
6+
7+
<script>
8+
import components from '../../utils/components.json';
9+
10+
export default {
11+
props: {
12+
showcasePath: {
13+
type: String,
14+
default: undefined,
15+
},
16+
noPaddings: {
17+
type: Boolean,
18+
default: false
19+
},
20+
allow: {
21+
type: String,
22+
default: undefined,
23+
},
24+
},
25+
data: () => {
26+
return {
27+
iframeRef: undefined
28+
}
29+
},
30+
mounted: function() {
31+
const iframeElement = this.$refs.iframeRef;
32+
window.addEventListener('message', (e) => {
33+
if(e.data === 'loaded' && this.noPaddings) {
34+
iframeElement?.contentWindow?.postMessage('no-paddings', "*")
35+
}
36+
}, false);
37+
},
38+
computed: {
39+
frameworkName() {
40+
return this.$route.path.split('/')[1];
41+
},
42+
urlBasePath() {
43+
return this.frameworkName === 'react'
44+
? this.$themeConfig.DOCS_EXAMPLES_REACT_PATH
45+
: this.$themeConfig.DOCS_EXAMPLES_VUE_PATH;
46+
},
47+
componentName() {
48+
return this.$route.path.split('/').pop()?.split('.')[0];
49+
},
50+
exampleUrl() {
51+
const componentNameFull = components[this.frameworkName].find((component) =>
52+
component.toLowerCase().includes('sf' + this.componentName),
53+
);
54+
55+
return `${this.urlBasePath}/${this.showcasePath ? `showcases/${this.showcasePath}` : `examples/${componentNameFull}`}`;
56+
},
57+
},
58+
};
59+
</script>
60+
61+
<style scoped>
62+
.generate {
63+
height: 500px;
64+
}
65+
</style>

0 commit comments

Comments
 (0)