Skip to content

Commit 7edb4f0

Browse files
amir78729amir78729
authored
docs(vitepress): add icons (#339)
* docs: add icons to vitepress doc * refactor(docs): rename the function of getting sidebar item in vitepress * fix: remove single icon pages * feat: add modal view for icons * fix: make icons md file prettier * refactor: break icon grid component into multiple methods * fix: resolve comments * fix: revert changes * refactor: icon grid * refactor: getSvg
1 parent 64d4f99 commit 7edb4f0

File tree

13 files changed

+599
-117
lines changed

13 files changed

+599
-117
lines changed

‎.github/workflows/deploy.yml

+5-5
Original file line numberDiff line numberDiff line change
@@ -28,10 +28,10 @@ jobs:
2828
- name: Checkout
2929
uses: actions/checkout@v4
3030
with:
31-
fetch-depth: 0
31+
fetch-depth: 0
3232
- uses: pnpm/action-setup@v3
3333
with:
34-
version: 9
34+
version: 9
3535
- name: Setup Node
3636
uses: actions/setup-node@v4
3737
with:
@@ -41,8 +41,8 @@ jobs:
4141
uses: actions/configure-pages@v4
4242
- name: Install dependencies
4343
run: pnpm install
44-
- name: Analyze
45-
run: pnpm analyze
44+
- name: Building Packages
45+
run: pnpm packages:build
4646
- name: Build Docs
4747
run: pnpm docs:build
4848
- name: Upload artifact
@@ -60,4 +60,4 @@ jobs:
6060
steps:
6161
- name: Deploy to GitHub Pages
6262
id: deployment
63-
uses: actions/deploy-pages@v4
63+
uses: actions/deploy-pages@v4

‎docs/.vitepress/theme/custom.css

+79
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,37 @@
1313
flex-wrap: wrap;
1414
}
1515

16+
#usage {
17+
background: var(--vp-c-bg-soft);
18+
padding: 18px;
19+
border-radius: 8px;
20+
overflow: auto;
21+
font-size: 14px;
22+
}
23+
24+
#usage li {
25+
display: flex;
26+
align-items: center;
27+
}
28+
29+
:not(.dark) #usage pre span {
30+
color: var(--shiki-light, inherit);
31+
}
32+
33+
.dark #usage pre span {
34+
color: var(--shiki-dark, inherit);
35+
}
36+
37+
#usage pre {
38+
margin: 0;
39+
flex-shrink: 0;
40+
}
41+
42+
#usage strong {
43+
width: 90px;
44+
flex-shrink: 0;
45+
}
46+
1647
.table-wrapper {
1748
width: 100%;
1849
overflow: auto;
@@ -22,3 +53,51 @@
2253
min-width: 688px;
2354
display: table;
2455
}
56+
57+
.modal-overlay {
58+
position: fixed;
59+
background: var(--vp-backdrop-bg-color);
60+
backdrop-filter: blur(4px);
61+
62+
top: 0;
63+
right: 0;
64+
bottom: 0;
65+
left: 0;
66+
z-index: 100;
67+
68+
opacity: 0;
69+
pointer-events: none;
70+
transition: opacity 240ms;
71+
display: flex;
72+
align-items: center;
73+
justify-content: center;
74+
}
75+
76+
.modal-overlay.open {
77+
opacity: 1;
78+
pointer-events: auto;
79+
}
80+
81+
.modal {
82+
overflow: auto;
83+
background: var(--vp-c-bg);
84+
padding: 0 30px 30px;
85+
max-width: 90dvw;
86+
width: 500px;
87+
position: fixed;
88+
top: 50%;
89+
left: 50%;
90+
z-index: 101;
91+
transform: translate(-50%, -50%);
92+
opacity: 0;
93+
pointer-events: none;
94+
transition: opacity 240ms;
95+
border-radius: 16px;
96+
}
97+
98+
.modal.open {
99+
transform: translate(-50%, -50%);
100+
pointer-events: auto;
101+
opacity: 1;
102+
}
103+

‎docs/components/[component].md

-29
Original file line numberDiff line numberDiff line change
@@ -4,33 +4,4 @@ next: false
44
outline: "deep"
55
---
66

7-
<style>
8-
#usage {
9-
background: var(--vp-c-bg-soft);
10-
padding: 18px;
11-
border-radius: 8px;
12-
overflow: auto;
13-
font-size: 14px;
14-
}
15-
#usage li {
16-
display: flex;
17-
align-items: center;
18-
}
19-
:not(.dark) #usage pre span {
20-
color: var(--shiki-light, inherit);
21-
}
22-
.dark #usage pre span {
23-
color: var(--shiki-dark, inherit);
24-
}
25-
#usage pre {
26-
margin: 0;
27-
flex-shrink: 0;
28-
}
29-
#usage strong {
30-
width: 90px;
31-
32-
flex-shrink: 0;
33-
}
34-
</style>
35-
367
<!-- @content -->

‎docs/components/[component].paths.ts

+14-15
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,13 @@ import {
55
type Metadata,
66
} from "../../internals/doc-helpers/types.ts";
77
import { getFileMeta } from "../../scripts/utils.ts";
8-
import { codify, tabulateData } from "../utils/md.ts";
8+
import {
9+
codify,
10+
getFormattedImportUsageString,
11+
getFormattedTagUsageString,
12+
getUsageSectionMarkdown,
13+
tabulateData,
14+
} from "../utils/markdown.ts";
915

1016
export default {
1117
paths() {
@@ -43,7 +49,13 @@ const getComponentMarkdown = (component: Component) => {
4349

4450
res += `${component.summary}\n`;
4551

46-
res += getUsageMarkdown(component);
52+
res += getUsageSectionMarkdown([
53+
[
54+
"Import",
55+
getFormattedImportUsageString(component.importPaths.webComponents),
56+
],
57+
["Tag", getFormattedTagUsageString(component.tagName)],
58+
]);
4759

4860
res += getMembersMarkdown(component);
4961

@@ -95,19 +107,6 @@ ${slots
95107
return res;
96108
};
97109

98-
const getUsageMarkdown = (component: Component) => {
99-
let res = "";
100-
101-
res += "\n<ul id='usage'>\n";
102-
103-
res += `<li><strong>Import</strong><pre><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span> <span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"${component.importPaths.webComponents}"</span>;</pre></li>`;
104-
res += `<li><strong>Tag</strong><pre>&lt;<span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">${component.tagName}</span>&gt;&lt;/<span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">${component.tagName}</span>&gt;</pre></li>`;
105-
106-
res += "\n</ul>\n";
107-
108-
return res;
109-
};
110-
111110
const getMembersMarkdown = (component: Component) => {
112111
const members = component.members || [];
113112
let res = "";

‎docs/icons.md

+113
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,113 @@
1+
---
2+
prev: false
3+
next: false
4+
outline: false
5+
---
6+
7+
<style>
8+
9+
#icon-header {
10+
display: flex;
11+
justify-content: space-between;
12+
align-items: center;
13+
}
14+
15+
.icons-search-input {
16+
max-width: 200px;
17+
display: flex;
18+
height: 60px;
19+
border-radius: 8px;
20+
padding: 0 8px;
21+
background-color: var(--vp-c-bg-alt);
22+
margin-left: 20px;
23+
}
24+
25+
.DocSearch-MagnifierLabel {
26+
color: unset;
27+
}
28+
29+
.DocSearch-Input {
30+
font-size: 1em;
31+
height: 100%;
32+
outline: none;
33+
padding: 0 0 0 8px;
34+
width: 80%;
35+
}
36+
37+
#icons-grid {
38+
margin-top: 50px;
39+
display: flex;
40+
width: 100%;
41+
flex-wrap: wrap;
42+
gap: 12px;
43+
}
44+
45+
.icon-item {
46+
background-color: var(--vp-c-bg);
47+
border: 1px solid var(--vp-c-divider);
48+
color: var(--vp-c-text-1);
49+
height: 36px;
50+
width: 36px;
51+
display: flex;
52+
align-items: center;
53+
justify-content: center;
54+
border-radius: 8px;
55+
padding: 6px;
56+
}
57+
58+
.icon-item svg {
59+
color: currentcolor;
60+
fill: currentcolor;
61+
width: 100%;
62+
height: 100%;
63+
display: block;
64+
}
65+
66+
.tapsi-icon {
67+
height: 24px;
68+
width: 24px;
69+
fill: currentColor;
70+
}
71+
72+
#icon-wrapper {
73+
border-radius: 8px;
74+
background: var(--vp-c-bg-soft);
75+
height: 200px;
76+
display: flex;
77+
align-items: center;
78+
justify-content: center;
79+
padding: 50px;
80+
margin-top: 1rem;
81+
}
82+
83+
#icon-wrapper svg {
84+
width: 100%;
85+
height: 100%;
86+
max-width: 100px;
87+
max-height: 100px;
88+
}
89+
90+
</style>
91+
92+
<script setup>
93+
import './internals/components/DocIconGrid';
94+
</script>
95+
96+
# Icons
97+
98+
## Properties
99+
100+
<div class="table-wrapper">
101+
102+
103+
| Name | Description | Default Value |
104+
|------------|--------------------------------------------------------------------------------------------------------------------------------------------|-----------------|
105+
| `viewbox` | The viewBox of the SVG. Allows you to redefine what the coordinates without units mean inside an SVG element. | `0 0 24 24` |
106+
| `title` | Provides a human-readable title for the element that contains it. [More Info](https://www.w3.org/TR/SVG-access/#Equivalent) | - |
107+
| `size` | The size of the icon. If set to `"auto"`, the icon will get the parent's width and height. | `"auto"` |
108+
109+
</div>
110+
111+
## Explore Icons
112+
113+
<doc-icon-grid></doc-icon-grid>

0 commit comments

Comments
 (0)