Skip to content

Commit b423c84

Browse files
vedangimittalvedangimittal
authored
Implemented Vitepress (#438)
* Implemented Vitepress - Imlemented Vitepress - Jira story: https://jsw.ibm.com/browse/PFEBMC-3190 Signed-off-by: Vedangi Mittal <[email protected]> * Removed vuepress folder - Removed vuepress folder * Updated links - Updated links * Removed cache folder - Removed cache folder --------- Signed-off-by: Vedangi Mittal <[email protected]>
1 parent 9d97e81 commit b423c84

File tree

37 files changed

+2220
-625
lines changed

37 files changed

+2220
-625
lines changed

‎docs/.vuepress/components/colors/all.vue‎ renamed to ‎docs/.vitepress/components/colors/all.vue‎

Lines changed: 7 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
11
<template>
22
<div>
33
<div class="color-tile-container">
4-
<div v-for="item in baseColors">
4+
<div v-for="item in baseColors" :key="item.variable">
55
<div
66
:style="{ backgroundColor: item.hex }"
77
:class="{ 'color-tile--border': item.border }"
88
class="color-tile"
99
></div>
1010
<dl class="color-tile-desc">
1111
<dt>Variable:</dt>
12-
<dd>${{ item.name }}</dd>
12+
<dd>{{ '$' + item.name }}</dd>
1313
</dl>
1414
<dl class="color-tile-desc">
1515
<dt>Color Variable:</dt>
@@ -20,11 +20,9 @@
2020
</div>
2121
</template>
2222

23-
<script>
24-
export default {
25-
data() {
26-
return {
27-
baseColors: [
23+
<script setup>
24+
import { ref } from 'vue';
25+
const baseColors = ref([
2826
{
2927
name: 'blue',
3028
variable: '$blue-500',
@@ -45,12 +43,9 @@ export default {
4543
variable: '$yellow-500',
4644
hex: '#efc100'
4745
}
48-
]
49-
};
50-
}
51-
};
46+
])
5247
</script>
5348

54-
<style lang="scss">
49+
<style lang="scss" scoped>
5550
@import "./colors.scss";
5651
</style>

‎docs/.vuepress/components/colors/blues.vue‎ renamed to ‎docs/.vitepress/components/colors/blues.vue‎

Lines changed: 7 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
11
<template>
22
<div>
33
<div class="color-tile-container">
4-
<div v-for="color in colors">
4+
<div v-for="color in colors" :key="color.variable">
55
<div
66
:style="{ backgroundColor: color.hex }"
77
:class="{ 'color-tile--border': color.border }"
88
class="color-tile"
99
></div>
1010
<dl class="color-tile-desc">
1111
<dt>Color variable:</dt>
12-
<dd>${{ color.variable }}</dd>
12+
<dd>{{ '$' + color.variable }}</dd>
1313
</dl>
1414
<dl class="color-tile-desc">
1515
<dt>Hex:</dt>
@@ -20,21 +20,16 @@
2020
</div>
2121
</template>
2222

23-
<script>
24-
export default {
25-
data() {
26-
return {
27-
colors: [
23+
<script setup>
24+
import { ref } from 'vue';
25+
const colors = ref([
2826
{
2927
variable: 'blue-500',
3028
hex: '#2d60e5'
3129
}
32-
]
33-
};
34-
}
35-
};
30+
]);
3631
</script>
3732

38-
<style lang="scss">
33+
<style lang="scss" scoped>
3934
@import "./colors.scss";
4035
</style>

‎docs/.vuepress/components/colors/colors.scss‎ renamed to ‎docs/.vitepress/components/colors/colors.scss‎

File renamed without changes.

‎docs/.vuepress/components/colors/grays.vue‎ renamed to ‎docs/.vitepress/components/colors/grays.vue‎

Lines changed: 7 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
11
<template>
22
<div>
33
<div class="color-tile-container">
4-
<div v-for="color in colors">
4+
<div v-for="color in colors" :key="color.variable">
55
<div
66
:style="{ backgroundColor: color.hex }"
77
:class="{ 'color-tile--border': color.border }"
88
class="color-tile"
99
></div>
1010
<dl class="color-tile-desc">
1111
<dt>Color variable:</dt>
12-
<dd>${{ color.variable }}</dd>
12+
<dd>{{ '$' + color.variable }}</dd>
1313
</dl>
1414
<dl class="color-tile-desc">
1515
<dt>Hex:</dt>
@@ -20,11 +20,9 @@
2020
</div>
2121
</template>
2222

23-
<script>
24-
export default {
25-
data() {
26-
return {
27-
colors: [
23+
<script setup>
24+
import { ref } from 'vue';
25+
const colors = ref([
2826
{
2927
variable: 'gray-100',
3028
hex: '#f4f4f4',
@@ -62,12 +60,9 @@ export default {
6260
variable: 'gray-900',
6361
hex: '#161616'
6462
}
65-
]
66-
};
67-
}
68-
};
63+
])
6964
</script>
7065

71-
<style lang="scss">
66+
<style lang="scss" scoped>
7267
@import "./colors.scss";
7368
</style>

‎docs/.vuepress/components/colors/greens.vue‎ renamed to ‎docs/.vitepress/components/colors/greens.vue‎

Lines changed: 7 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
11
<template>
22
<div>
33
<div class="color-tile-container">
4-
<div v-for="color in colors">
4+
<div v-for="color in colors" :key="color.variable">
55
<div
66
:style="{ backgroundColor: color.hex }"
77
:class="{ 'color-tile--border': color.border }"
88
class="color-tile"
99
></div>
1010
<dl class="color-tile-desc">
1111
<dt>Color variable:</dt>
12-
<dd>${{ color.variable }}</dd>
12+
<dd>{{ '$' + color.variable }}</dd>
1313
</dl>
1414
<dl class="color-tile-desc">
1515
<dt>Hex:</dt>
@@ -20,21 +20,16 @@
2020
</div>
2121
</template>
2222

23-
<script>
24-
export default {
25-
data() {
26-
return {
27-
colors: [
23+
<script setup>
24+
import { ref } from 'vue';
25+
const colors = ref([
2826
{
2927
variable: 'green-500',
3028
hex: '#0a7d06'
3129
}
32-
]
33-
};
34-
}
35-
};
30+
])
3631
</script>
3732

38-
<style lang="scss">
33+
<style lang="scss" scoped>
3934
@import "./colors.scss";
4035
</style>

‎docs/.vuepress/components/colors/reds.vue‎ renamed to ‎docs/.vitepress/components/colors/reds.vue‎

Lines changed: 6 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
11
<template>
22
<div>
33
<div class="color-tile-container">
4-
<div v-for="color in colors">
4+
<div v-for="color in colors" :key="color.variable">
55
<div
66
:style="{ backgroundColor: color.hex }"
77
:class="{ 'color-tile--border': color.border }"
88
class="color-tile"
99
></div>
1010
<dl class="color-tile-desc">
1111
<dt>Color variable:</dt>
12-
<dd>${{ color.variable }}</dd>
12+
<dd>{{ '$' + color.variable }}</dd>
1313
</dl>
1414
<dl class="color-tile-desc">
1515
<dt>Hex:</dt>
@@ -20,21 +20,15 @@
2020
</div>
2121
</template>
2222

23-
<script>
24-
export default {
25-
data() {
26-
return {
27-
colors: [
23+
<script setup>
24+
const colors = ref([
2825
{
2926
variable: 'red-500',
3027
hex: '#da1416'
3128
}
32-
]
33-
};
34-
}
35-
};
29+
])
3630
</script>
3731

38-
<style lang="scss">
32+
<style lang="scss" scoped>
3933
@import "./colors.scss";
4034
</style>

‎docs/.vuepress/components/colors/theme.vue‎ renamed to ‎docs/.vitepress/components/colors/theme.vue‎

Lines changed: 8 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,28 @@
11
<template>
22
<div>
33
<div class="color-tile-container">
4-
<div v-for="item in themeColors">
4+
<div v-for="item in themeColors" :key="item.variable">
55
<div
66
:style="{ backgroundColor: item.hex }"
77
:class="{ 'color-tile--border': item.border }"
88
class="color-tile"
99
></div>
1010
<dl class="color-tile-desc">
1111
<dt>Color variable:</dt>
12-
<dd>${{ item.name }}</dd>
12+
<dd>{{ '$' + item.name }}</dd>
1313
</dl>
1414
<dl class="color-tile-desc">
1515
<dt>Color variable:</dt>
16-
<dd>${{ item.variable }}</dd>
16+
<dd>{{ '$' + item.variable }}</dd>
1717
</dl>
1818
</div>
1919
</div>
2020
</div>
2121
</template>
2222

23-
<script>
24-
export default {
25-
data() {
26-
return {
27-
themeColors: [
23+
<script setup>
24+
import { ref } from 'vue';
25+
const themeColors = ref([
2826
{
2927
name: "primary",
3028
variable: "blue",
@@ -66,12 +64,9 @@ export default {
6664
variable: 'red',
6765
hex: '#da1416'
6866
}
69-
]
70-
};
71-
}
72-
};
67+
])
7368
</script>
7469

75-
<style lang="scss">
70+
<style lang="scss" scoped>
7671
@import "./colors.scss";
7772
</style>

‎docs/.vuepress/components/colors/yellows.vue‎ renamed to ‎docs/.vitepress/components/colors/yellows.vue‎

Lines changed: 5 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
11
<template>
22
<div>
33
<div class="color-tile-container">
4-
<div v-for="color in colors">
4+
<div v-for="color in colors" :key="color.variable">
55
<div
66
:style="{ backgroundColor: color.hex }"
77
:class="{ 'color-tile--border': color.border }"
88
class="color-tile"
99
></div>
1010
<dl class="color-tile-desc">
1111
<dt>Color variable:</dt>
12-
<dd>${{ color.variable }}</dd>
12+
<dd>{{ '$' + color.variable }}</dd>
1313
</dl>
1414
<dl class="color-tile-desc">
1515
<dt>Hex:</dt>
@@ -21,20 +21,14 @@
2121
</template>
2222

2323
<script>
24-
export default {
25-
data() {
26-
return {
27-
colors: [
24+
const colors = ref([
2825
{
2926
variable: 'yellow-500',
3027
hex: '#efc100'
3128
}
32-
]
33-
};
34-
}
35-
};
29+
])
3630
</script>
3731

38-
<<style lang="scss">
32+
<style lang="scss" scoped>
3933
@import "./colors.scss";
4034
</style>

0 commit comments

Comments
 (0)