Skip to content
This repository was archived by the owner on Jun 14, 2023. It is now read-only.

Commit b754892

Browse files
author
Thomas Bourrely
committed
feat(theme): add custom icons font.
1 parent 0001a3e commit b754892

Some content is hidden

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

76 files changed

+2711
-1
lines changed

Diff for: ‎.gitignore

+3
Original file line numberDiff line numberDiff line change
@@ -105,3 +105,6 @@ pages
105105

106106
# Exlcude theme from rules
107107
!/themes/ovh/static/**/dist/
108+
109+
# JS package management
110+
node_modules

Diff for: ‎README.md

+30-1
Original file line numberDiff line numberDiff line change
@@ -261,6 +261,13 @@ stored in the folder `themes/ovh`
261261
└── templates
262262
└── ... (jinja2 templates)
263263
```
264+
265+
#### Install
266+
267+
The theme relies on npm packages for some parts (iconfont generation, ...).
268+
In order to work on it, you should install the dependencies first using `yarn
269+
install`.
270+
264271
#### Templates
265272

266273
##### base.html
@@ -311,11 +318,33 @@ defined in config as direct template
311318
DIRECT_TEMPLATES = ['sitemap']
312319
SITEMAP_SAVE_AS = 'sitemap.xml'
313320
```
321+
#### Custom icons
322+
323+
You can use icons in guides content like so :
324+
325+
```md
326+
Test icon <i class="icons-ellipsis icons-masterbrand-blue"></i> <br>
327+
Test icon <i class="icons-ellipsis icons-border-rounded icons-masterbrand-blue"></i> <br>
328+
Test icon <i class="icons-eye-open icons-sky-blue"></i> <br>
329+
Test icon <i class="icons-eye-open icons-border-rounded icons-sky-blue"></i> <br>
330+
```
331+
332+
Available colors and custom CSS classes for icons can be found in the [iconfont template](https://github.com/ovh/docs-rendering/blob/master/themes/ovh/svgtofont/templates/icons.css.template).
333+
334+
The font is generated based on [themes/ovh/static/svg](https://github.com/ovh/docs-rendering/tree/master/themes/ovh/static/svg) content. Each icon will generate a corresponding CSS class named `icons-[filename]`.
335+
336+
##### Add new icons
337+
338+
Add a new svg file to the [themes/ovh/static/svg](https://github.com/ovh/docs-rendering/tree/master/themes/ovh/static/svg) folder.
339+
340+
Then run `yarn run font` from [themes/ovh/](https://github.com/ovh/docs-rendering/tree/master/themes/ovh/) folder in order to generate the icons font.
341+
342+
It should then generate new font files under [themes/ovh/static/fonts/icons](https://github.com/ovh/docs-rendering/tree/master/themes/ovh/static/fonts/icons/).
314343

315344
## Contributing
316345

317346
### Branch management
318347

319348
Please note that development branch is **develop**, all pull requests should be based on it.
320349

321-
Stable branch is **master**, changes need to pass by **develop** before going to **master**.
350+
Stable branch is **master**, changes need to pass by **develop** before going to **master**.

Diff for: ‎themes/ovh/package.json

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
{
2+
"name": "ovh-theme",
3+
"version": "1.0.0",
4+
"description": "pelican theme for ovhcloud",
5+
"main": "index.js",
6+
"license": "MIT",
7+
"scripts": {
8+
"optimize-svg": "svgo -f ./static/svg",
9+
"font": "yarn run optimize-svg && svgtofont --sources ./static/svg --output ./static/fonts/icons --fontName icons && yarn run clean-icons-font",
10+
"clean-icons-font": "rm ./static/fonts/icons/icons.symbol.svg"
11+
},
12+
"svgtofont": {
13+
"outSVGReact": false,
14+
"outSVGPath": false,
15+
"emptyDist": true,
16+
"website": false,
17+
"styleTemplates": "./svgtofont/templates/",
18+
"css": {
19+
"cssPath": "/theme/fonts/icons/"
20+
}
21+
},
22+
"dependencies": {},
23+
"devDependencies": {
24+
"svgo": "^2.8.0",
25+
"svgtofont": "^3.17.8"
26+
}
27+
}

Diff for: ‎themes/ovh/static/fonts/icons/icons.css

+128
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,128 @@
1+
@font-face {
2+
font-family: "icons";
3+
src: url('/theme/fonts/icons/icons.eot?t=1665739929615'); /* IE9*/
4+
src: url('/theme/fonts/icons/icons.eot?t=1665739929615#iefix') format('embedded-opentype'), /* IE6-IE8 */
5+
url("/theme/fonts/icons/icons.woff2?t=1665739929615") format("woff2"),
6+
url("/theme/fonts/icons/icons.woff?t=1665739929615") format("woff"),
7+
url('/theme/fonts/icons/icons.ttf?t=1665739929615') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
8+
url('/theme/fonts/icons/icons.svg?t=1665739929615#icons') format('svg'); /* iOS 4.1- */
9+
}
10+
11+
[class^="icons-"], [class*=" icons-"] {
12+
font-family: 'icons' !important;
13+
font-size:16px;
14+
font-style:normal;
15+
-webkit-font-smoothing: antialiased;
16+
-moz-osx-font-smoothing: grayscale;
17+
vertical-align: middle;
18+
19+
--color-masterbrand-blue: #000E9C;
20+
--color-sky-blue: #73E3FF;
21+
--color-sky-blue-light: #98E9FF;
22+
--color-sky-blue-dark: #50B7EA;
23+
--color-green: #A7D74D;
24+
--color-green-light: #BDE475;
25+
--color-green-dark: #7BB73C;
26+
--color-yellow: #FFD224;
27+
--color-yellow-light: #FFE16D;
28+
--color-yellow-dark: #FFBB22;
29+
--color-orange: #ED743E;
30+
--color-orange-light: #F4A17D;
31+
--color-orange-dark: #D85639;
32+
--color-gray-dark: #46464A;
33+
--color-gray-light: #D4D6DC;
34+
--color-gray: #87888C;
35+
}
36+
37+
38+
/* COLORS */
39+
.icons-masterbrand-blue { color: var(--color-masterbrand-blue); }
40+
.icons-sky-blue { color: var(--color-sky-blue); }
41+
.icons-sky-blue-light { color: var(--color-sky-blue-light); }
42+
.icons-sky-blue-dark { color: var(--color-sky-blue-dark); }
43+
.icons-green { color: var(--color-green); }
44+
.icons-green-light { color: var(--color-green-light); }
45+
.icons-green-dark { color: var(--color-green-dark); }
46+
.icons-yellow { color: var(--color-yellow); }
47+
.icons-yellow-light { color: var(--color-yellow-light); }
48+
.icons-yellow-dark { color: var(--color-yellow-dark); }
49+
.icons-orange { color: var(--color-orange); }
50+
.icons-orange-light { color: var(--color-orange-light); }
51+
.icons-orange-dark { color: var(--color-orange-dark); }
52+
.icons-gray { color: var(--color-gray); }
53+
.icons-gray-light { color: var(--color-gray-light); }
54+
.icons-gray-dark { color: var(--color-gray-dark); }
55+
56+
/* CUSTOM CLASSES */
57+
.icons-border-rounded {
58+
border: solid 1px;
59+
border-radius: 50%;
60+
padding: 0.2rem;
61+
}
62+
63+
/* ICONS */
64+
.icons-add:before { content: "\ea01"; }
65+
.icons-backToV4:before { content: "\ea02"; }
66+
.icons-bandwidth-concept:before { content: "\ea03"; }
67+
.icons-bar-chart:before { content: "\ea04"; }
68+
.icons-bell:before { content: "\ea05"; }
69+
.icons-bin:before { content: "\ea06"; }
70+
.icons-book:before { content: "\ea07"; }
71+
.icons-cart:before { content: "\ea08"; }
72+
.icons-certificate:before { content: "\ea09"; }
73+
.icons-check:before { content: "\ea0a"; }
74+
.icons-chevron-down:before { content: "\ea0b"; }
75+
.icons-chevron-left:before { content: "\ea0c"; }
76+
.icons-chevron-right:before { content: "\ea0d"; }
77+
.icons-chevron-up:before { content: "\ea0e"; }
78+
.icons-close:before { content: "\ea0f"; }
79+
.icons-cloud-essential-concept:before { content: "\ea10"; }
80+
.icons-cloud-package:before { content: "\ea11"; }
81+
.icons-cloud-root:before { content: "\ea12"; }
82+
.icons-cloudnas:before { content: "\ea13"; }
83+
.icons-copy:before { content: "\ea14"; }
84+
.icons-database:before { content: "\ea15"; }
85+
.icons-dedicatedCloud:before { content: "\ea16"; }
86+
.icons-dns-anycast-concept:before { content: "\ea17"; }
87+
.icons-domain:before { content: "\ea18"; }
88+
.icons-ellipsis-vertical:before { content: "\ea19"; }
89+
.icons-ellipsis:before { content: "\ea1a"; }
90+
.icons-error-circle:before { content: "\ea1b"; }
91+
.icons-error:before { content: "\ea1c"; }
92+
.icons-export-concept:before { content: "\ea1d"; }
93+
.icons-eye-closed:before { content: "\ea1e"; }
94+
.icons-eye-open:before { content: "\ea1f"; }
95+
.icons-file:before { content: "\ea20"; }
96+
.icons-filter:before { content: "\ea21"; }
97+
.icons-folder-concept:before { content: "\ea22"; }
98+
.icons-gear-concept:before { content: "\ea23"; }
99+
.icons-graph:before { content: "\ea24"; }
100+
.icons-hamburger:before { content: "\ea25"; }
101+
.icons-hashtag-concept:before { content: "\ea26"; }
102+
.icons-help-circle:before { content: "\ea27"; }
103+
.icons-hosting:before { content: "\ea28"; }
104+
.icons-import-concept:before { content: "\ea29"; }
105+
.icons-info-circle:before { content: "\ea2a"; }
106+
.icons-ip:before { content: "\ea2b"; }
107+
.icons-iplb:before { content: "\ea2c"; }
108+
.icons-key-concept:before { content: "\ea2d"; }
109+
.icons-mail:before { content: "\ea2e"; }
110+
.icons-message:before { content: "\ea2f"; }
111+
.icons-network:before { content: "\ea30"; }
112+
.icons-nutanix-concept:before { content: "\ea31"; }
113+
.icons-overTheBox:before { content: "\ea32"; }
114+
.icons-partner-platformsh-concept:before { content: "\ea33"; }
115+
.icons-pen:before { content: "\ea34"; }
116+
.icons-phone-concept:before { content: "\ea35"; }
117+
.icons-phone:before { content: "\ea36"; }
118+
.icons-print:before { content: "\ea37"; }
119+
.icons-reload-concept:before { content: "\ea38"; }
120+
.icons-search:before { content: "\ea39"; }
121+
.icons-server:before { content: "\ea3a"; }
122+
.icons-success-circle:before { content: "\ea3b"; }
123+
.icons-tasks:before { content: "\ea3c"; }
124+
.icons-telecom-ethernet:before { content: "\ea3d"; }
125+
.icons-user-ovh-font:before { content: "\ea3e"; }
126+
.icons-user:before { content: "\ea3f"; }
127+
.icons-windows:before { content: "\ea40"; }
128+

Diff for: ‎themes/ovh/static/fonts/icons/icons.eot

15.9 KB
Binary file not shown.

0 commit comments

Comments
 (0)