Skip to content

Commit 8b10ff5

Browse files
committed
Improved Docs.
1 parent c1c87d0 commit 8b10ff5

File tree

9 files changed

+567
-13
lines changed

9 files changed

+567
-13
lines changed

docs/accordions.html

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<title>Windows UI</title>
6+
<meta charset="UTF-8" />
7+
<meta name="theme-color" content="#EEE" />
8+
<meta name="mobile-web-app-capable" content="yes" />
9+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
10+
<meta name="viewport" content="width=device-width, initial-scale=1" />
11+
<link rel="manifest" href="../manifest.json" />
12+
<link rel="stylesheet" href="./css/code-style.css" />
13+
<link rel="stylesheet" href="./css/code-block.css" />
14+
<link rel="shortcut icon" href="./public/favicon.ico" />
15+
<link rel="stylesheet" href="../dist/icons/fonts/fonts.min.css" />
16+
<link rel="stylesheet" type="text/css" href="../dist/config/app-config.css" />
17+
<link rel="stylesheet" type="text/css" href="../dist/windows-ui-11.min.css" />
18+
</head>
19+
20+
<body>
21+
<div id="app-navbar-wrap-id" class="app-navbar-wrap">
22+
<div class="app-navbar-topbar-mobile">
23+
<span class="app-navbar-toggle-button"></span>
24+
<div style="display: flex; justify-content: space-between; width: calc(100% - 60px);">
25+
<span class="app-navbar-name">Windows UI</span>
26+
<span class="app-navbar-name">Home</span>
27+
</div>
28+
</div>
29+
<nav class="animate">
30+
<div class="app-navbar-header">
31+
<span class="app-navbar-toggle-button"></span>
32+
<span class="app-navbar-name">Windows UI Web</span>
33+
</div>
34+
<ul class="app-navbar-list" id="app-navbar-list">
35+
<label class="app-navbar-theme-switch">
36+
<input id="app-navbar-theme-switch" type="checkbox" checked>
37+
<div class="app-navbar-theme-switch-view"></div>
38+
<span id="app-navbar-theme-switch-text">Day Mode</span>
39+
</label>
40+
</ul>
41+
</nav>
42+
<div class="app-navbar-overlay"></div>
43+
</div>
44+
<div class="app-section-container has-padding">
45+
<h1>Accordion</h1>
46+
<p>
47+
<span class="color-primary">Accordion</span> component used to show (and hide) content, it collapsed on hide and expand on show state.
48+
</p>
49+
<div class="app-accordion" style="width: 280px;">
50+
<div class="app-accordion-header">
51+
<div class="app-accordion-title">
52+
<span>Some Title</span>
53+
<i class="icons10-angle-down"></i>
54+
</div>
55+
</div>
56+
<div class="app-accordion-panel">
57+
<p>
58+
<Lorem>ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</Lorem>
59+
</p>
60+
</div>
61+
</div>
62+
<h2>Usage</h2>
63+
<pre><code id="code_view_1"></code></pre>
64+
</div>
65+
</body>
66+
<script src="./_navbar.js"></script>
67+
<script>init_navbar_ul("Kay", "subdir")</script>
68+
<script src="../dist/windows-ui.min.js"></script>
69+
<script src="./js/highlight.min.js"></script>
70+
<script>hljs.highlightAll()</script>
71+
<script>
72+
document.getElementById("code_view_1").innerHTML =
73+
hljs.highlightAuto(`
74+
<div class="app-accordion" style="width: 280px;">
75+
<div class="app-accordion-header">
76+
<div class="app-accordion-title">
77+
<span>Some Title</span><i class="icons10-angle-down"></i>
78+
</div>
79+
</div>
80+
<div class="app-accordion-panel">
81+
<p>
82+
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
83+
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
84+
Ut enim ad minim veniam,
85+
quis nostrud exercitation ullamco.
86+
</p>
87+
</div>
88+
</div>
89+
`).value;
90+
</script>
91+
92+
</html>

docs/source/accordions.pug

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
include common/head.pug
4+
<body>
5+
include common/navbar.pug
6+
7+
<div class="app-section-container has-padding">
8+
<h1>Accordion</h1>
9+
<p>
10+
<span class="color-primary">Accordion</span> component used to show (and hide) content, it collapsed on hide and expand on show state.
11+
</p>
12+
13+
<div class="app-accordion" style="width: 280px;">
14+
<div class="app-accordion-header">
15+
<div class="app-accordion-title">
16+
<span>Some Title</span><i class="icons10-angle-down"></i>
17+
</div>
18+
</div>
19+
<div class="app-accordion-panel">
20+
<p>
21+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
22+
</p>
23+
</div>
24+
</div>
25+
26+
<h2>Usage</h2>
27+
<pre><code id="code_view_1"></code></pre>
28+
</div>
29+
</body>
30+
include common/footer.pug
31+
+importing('Kay')
32+
script.
33+
document.getElementById("code_view_1").innerHTML =
34+
hljs.highlightAuto(`
35+
<div class="app-accordion" style="width: 280px;">
36+
<div class="app-accordion-header">
37+
<div class="app-accordion-title">
38+
<span>Some Title</span><i class="icons10-angle-down"></i>
39+
</div>
40+
</div>
41+
<div class="app-accordion-panel">
42+
<p>
43+
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
44+
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
45+
Ut enim ad minim veniam,
46+
quis nostrud exercitation ullamco.
47+
</p>
48+
</div>
49+
</div>
50+
`).value;
51+
</html>

docs/source/common/footer.pug

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
mixin importing(current_active)
2+
script(src='./_navbar.js')
3+
script.
4+
init_navbar_ul("#{current_active}", "subdir")
5+
script(src='../dist/windows-ui.min.js')
6+
script(src='./js/highlight.min.js')
7+
script.
8+
hljs.highlightAll()

docs/source/common/head.pug

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<head>
2+
<title>Windows UI</title>
3+
<meta charset="UTF-8" />
4+
<meta name="theme-color" content="#EEE" />
5+
<meta name="mobile-web-app-capable" content="yes" />
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
7+
<meta name="viewport" content="width=device-width, initial-scale=1" />
8+
9+
<link rel="manifest" href="../manifest.json" />
10+
<link rel="stylesheet" href="./css/code-style.css" />
11+
<link rel="stylesheet" href="./css/code-block.css" />
12+
<link rel="shortcut icon" href="./public/favicon.ico" />
13+
<link rel="stylesheet" href="../dist/icons/fonts/fonts.min.css" />
14+
<link rel="stylesheet" type="text/css" href="../dist/config/app-config.css" />
15+
<link rel="stylesheet" type="text/css" href="../dist/windows-ui-11.min.css" />
16+
</head>

docs/source/common/navbar.pug

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<div id="app-navbar-wrap-id" class="app-navbar-wrap">
2+
<div class="app-navbar-topbar-mobile">
3+
<span class="app-navbar-toggle-button"></span>
4+
<div style="display: flex; justify-content: space-between; width: calc(100% - 60px);">
5+
<span class="app-navbar-name">Windows UI</span>
6+
<span class="app-navbar-name">Home</span>
7+
</div>
8+
</div>
9+
<nav class="animate">
10+
<div class="app-navbar-header">
11+
<span class="app-navbar-toggle-button"></span>
12+
<span class="app-navbar-name">Windows UI Web</span>
13+
</div>
14+
<ul class="app-navbar-list" id="app-navbar-list">
15+
<label class="app-navbar-theme-switch">
16+
<input id="app-navbar-theme-switch" type="checkbox" checked>
17+
<div class="app-navbar-theme-switch-view"></div>
18+
<span id="app-navbar-theme-switch-text">Day Mode</span>
19+
</label>
20+
</ul>
21+
</nav>
22+
<div class="app-navbar-overlay"></div>
23+
</div>

docs/source/hellow.pug

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

gulpfile.js

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ const { src, dest } = require("gulp");
22
const minifyJs = require("gulp-uglify");
33
const concat = require("gulp-concat");
44
const pug = require("gulp-pug");
5+
const formatHtml = require("gulp-format-html");
56

67
const jsFiles = ["./src/js/api/**/*.js", "./src/js/components/**/*.js"]
78

@@ -13,8 +14,9 @@ const bundleJs = () => {
1314
}
1415

1516
const compilePug = () => {
16-
return src(['./docs/source/**/*.pug'])
17+
return src(['./docs/source/**/*.pug', '!./docs/source/common/**/*.pug'])
1718
.pipe(pug({pretty: true}))
19+
.pipe(formatHtml())
1820
.pipe(dest("./docs"));
1921
}
2022

0 commit comments

Comments
 (0)