-
Notifications
You must be signed in to change notification settings - Fork 5
/
index.jinja
203 lines (174 loc) · 7.04 KB
/
index.jinja
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
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
<!--
title: Static Shock
rss: false
-->
<!doctype html>
<html lang="en" data-theme="dark">
<head>
<meta charset="utf-8">
<title>{{ title }}</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
{{ components.headerResources() }}
<link rel="stylesheet" href="/styles/theme.css">
<link rel="stylesheet" href="/styles/base_layout.css">
<link rel="stylesheet" href="/styles/homepage.css">
</head>
<body>
{{ components.githubCornerLink() }}
<main>
{{ components.navbar({"title": title}) }}
<!-- Desktop header -->
<div class="show-desktop">
<section id="hero">
<!-- This is declared above "middle" so that mouse interaction hits the "middle" before this "bottom" section -->
<div class="bottom">
<!-- This area uses flex layout column-reverse, so the order is bottom to top -->
<div id="banner-built-with-static-shock">
<span class="message">This website was built with <span class="accent-text">Static Shock!</span></span>
</div>
<a href="https://github.com/Flutter-Bounty-Hunters/static_shock/" target="_blank" role="button" class="github btn btn-dark" style="z-index:9999;"><span class="fa fa-github"></span> GitHub</a>
</div>
<div class="middle">
<div class="featured">
<div class="row">
<div class="col">
<div class="tagline">
<span class="accent-text">*</span>THE<span class="accent-text">* Static Site<br>Generator</span> for Dart</span>
</div>
<span class="label supplemental-text">Activate Static Shock:</span>
<div id="activation-command">
<span class="cli">dart pub global activate <span class="accent-text">static_shock_cli</span></span>
<button class="btn btn-primary copy" type="submit" onclick="copyActivationToClipboard();">
<i class="fa fa-clone" style="color: black; font-size: 24px; font-weight: bold;"></i>
</button>
</div>
<span class="call-to-action supplemental-text"><a href="/quickstart">Get started with our Quickstart guide</a></span>
</div>
<div class="col col-auto logo">
<img src="images/logo_big.png" width="225">
</div>
</div>
</div>
</div>
</section>
</div>
<!-- Desktop header -->
<div class="show-tablet">
<section id="hero" style="padding-top: 96px;">
<div style="padding-left: 24px; padding-right: 24px;">
<div style="margin-bottom: 48px; text-align: center;">
<img src="images/logo_big.png" width="125">
</div>
<div class="tagline" style="text-align: center; text-wrap: balance;">
<span class="accent-text">*</span>THE<span class="accent-text">* Static Site<br>Generator</span> for Dart</span>
</div>
</div>
<div style="margin-bottom: 48px; text-align: center;">
<a href="https://github.com/Flutter-Bounty-Hunters/static_shock/" target="_blank" role="button" class="github btn btn-dark"><span class="fa fa-github"></span> GitHub</a>
</div>
<div id="banner-built-with-static-shock">
<span class="message">This website was built with <span class="accent-text">Static Shock!</span></span>
</div>
</section>
</div>
<section id="content">
{{
components.codeSample({
"title": "Copy static assets",
"description": "Directly copy images, fonts, HTML, CSS, and JavaScript from your source set to your final website build.",
"language": "language-dart",
"code": "void main() {
final staticShock = StaticShock()
..pick(DirectoryPicker.parse('images'))
..pick(DirectoryPicker.parse('fonts'))
..pick(FilePicker.parse('favicon.ico'));
staticShock.generateWebsite();
}"
})
}}
{{
components.codeSample({
"title": "Add plugins",
"description": "Select features that you want to add, like Markdown, Jinja templates, and pretty URLs.",
"language": "language-dart",
"code": "void main() {
final staticShock = StaticShock()
..plugin(const MarkdownPlugin())
..plugin(const JinjaPlugin())
..plugin(const PrettyUrlsPlugin())
..plugin(const SassPlugin());
staticShock.generateWebsite();
}"
})
}}
{{
components.codeSample({
"title": "Write articles with Markdown",
"description": "Enjoy the ease of writing with Markdown. Specify your desired layout, title, URL, and tags with Front Matter.",
"language": "language-markdown",
"code": "---
title: Quickstart
---
Static Shock is a static site generator, written in Dart.
To get started, activate the Static Shock command-line interface on your computer:
dart pub global activate static_shock_cli
Create a new static website project:
shock create"
})
}}
{{
components.codeSample({
"title": "Compose layouts with Jinja templates",
"description": "Insert values, insert content, and loop through pages, with the Jinja templates plugin.",
"language": "language-html",
"code": "<html>
<head>
<title>{{ title }}</title>
</head>
<body>
{{ content }}
</body>
</html>"
})
}}
{{
components.codeSample({
"title": "Compile Sass to CSS",
"description": "Save time by writing Sass, and then compile that Sass to CSS in your final website build, using the Sass plugin.",
"language": "language-scss",
"code": "#header {
.branding {
.title {
color: WHITE;
font-weight: bold;
}
}
}"
})
}}
</section>
<section style="max-width: 800px; margin: auto; margin-bottom: 200px;">
<h2 style="text-align: center; text-transform: uppercase;">Contributors</h2>
<p style="text-align: center; color: rgba(255, 255, 255, 0.5);">Built by the following contributors.</p>
<ol style="list-style-type: none; margin: 0; padding: 0; text-align: center;">
{% for contributor in github["flutter-bounty-hunters"].static_shock %}
<li style="display: inline-block; margin: 0; padding: 0;">
<a href="{{ contributor.userUrl }}" target="_blank" title="{{ contributor.userId }}">
<img src="{{ contributor.avatarUrl }}" style="display: inline-block; width: 64px; height: 64px; border-radius: 32px; margin: 16px;">
</a>
</li>
{% endfor %}
</ol>
</section>
</main>
<footer>
{{ components.footer() }}
</footer>
<script>
function copyActivationToClipboard() {
navigator.clipboard.writeText("dart pub global activate static_shock_cli");
}
</script>
{{ components.endBodyScripts() }}
</body>
</html>