-
Notifications
You must be signed in to change notification settings - Fork 1
/
template.ejs
99 lines (93 loc) · 3.29 KB
/
template.ejs
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
<!doctype html>
<html class="psg-theme" lang="en">
<head>
<meta charset="UTF-8">
<title><%= projectName %></title>
<style><%- codeStyle %><%- tmplStyle %><%- processedCSS %></style>
</head>
<body>
<div class="psg-wrapper">
<nav class="psg-menu">
<h1 class="psg-projectName"><%= projectName %></h1>
<%
var d = new Date();
var n = function(num) {
num += '';
if (num.length === 1) {
num = '0' + num;
}
return num;
};
var m = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
var year = d.getFullYear();
var month = m[d.getMonth()];
var date = n(d.getDate());
var hours = n(d.getHours());
var minutes = n(d.getMinutes());
var updatedTime = month + ' ' + date + ', ' + year + ' at ' + hours + ":" + minutes;
%>
<p class="psg-updatedTime">Last updated on: <time><%= updatedTime %></time></p>
<ul class="psg-componentList">
<% if (Array.isArray(colorPalette) && colorPalette.length !== 0) { %>
<a href="#color-palette" class="psg-componentList-item">
<li>Color Palette</li>
</a>
<% } %>
<% maps.forEach(function (map) { %>
<% if (map.link.title !== null) { %>
<a href="#<%= map.link.id %>" class="psg-componentList-item">
<li>
<%= map.link.title %>
</li>
</a>
<% } %>
<% }) %>
</ul>
</nav>
<div class="psg-main">
<div class="psg-container">
<% if (Array.isArray(colorPalette) && colorPalette.length !== 0) { %>
<section class="psg-component">
<h2 id="color-palette" class="psg-componentTitle">Color Palette</h2>
<div class="psg-contents">
<div class="psg-colorPalette">
<% colorPalette.forEach(function (palette) { %>
<div class="psg-colorBox">
<div class="psg-colorBox-sample" style="background-color: <%= palette.color %>">
</div>
<div class="psg-colorBox-color">
Color: <strong><%= palette.color %></strong>
</div>
<div class="psg-colorBox-name">
Name: <strong><%= palette.name %></strong>
</div>
</div>
<% }) %>
</div>
</div>
</section>
<hr class="psg-separator">
<% } %>
<% maps.forEach(function (map) { %>
<section class="psg-component">
<h2 id="<%= map.link.id %>" class="psg-componentTitle"><%= map.link.title %></h2>
<div class="psg-contents">
<div class="psg-contents-html">
<%- map.html %>
</div>
<div class="psg-contents-rule">
<pre><code class="lang-css"><%- map.rule %></code></pre>
</div>
</div>
</section>
<hr class="psg-separator">
<% }) %>
<div class="psg-footer">
<p>Generated by <a href="https://github.com/morishitter/postcss-style-guide" target="_blank">postcss-style-guide</a> |
Theme: <strong>Minimal</strong></p>
</div>
</div>
</div>
</div>
</body>
</html>