Skip to content

Commit 57f038d

Browse files
caizelincaizelin
committed
Updated docs.
Signed-off-by: Zelin Cai <zelin@makerdiary.com>
1 parent a738b16 commit 57f038d

File tree

24 files changed

+310
-275
lines changed

24 files changed

+310
-275
lines changed

‎docs/.overrides/blog.html‎

Lines changed: 108 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -8,32 +8,59 @@
88
{{ super() }}
99
{% endblock %}
1010

11-
<!-- Content -->
12-
{% block content %}
11+
<!-- Page content -->
12+
{% block container %}
1313
<style>
14-
.md-typeset .grid {
14+
.blog__newsletter {
15+
text-align: center;
16+
margin-top: 3rem;
17+
padding-bottom: 2rem;
18+
}
19+
@media screen and (max-width:59.9375em) {
20+
.blog__newsletter {
21+
padding-right: 2rem;
22+
padding-left: 2rem;
23+
}
24+
}
25+
@media screen and (min-width:60em) {
26+
.blog__newsletter {
27+
padding-right: 12rem;
28+
padding-left: 12rem;
29+
}
30+
}
31+
.blog__newsletter p {
32+
font-size: .9rem;
33+
color: var(--md-default-fg-color--light);
34+
}
35+
.md-post__grid {
1536
grid-gap: 1.6rem 1.4rem;
1637
display: grid;
1738
grid-template-columns: repeat(auto-fit,minmax(16rem,1fr));
1839
margin: 1em 0
1940
}
2041

21-
.md-typeset .grid.cards>ol,.md-typeset .grid.cards>ul {
42+
.md-post__grid.md-post__cards>ol,.md-post__grid.md-post__cards>ul {
2243
display: contents
2344
}
2445

25-
.md-typeset .grid.cards h3 {
26-
margin: 0.5rem 0;
27-
font-size: 0.9rem;
46+
.md-post__grid.md-post__cards h2 {
47+
margin: 0.5rem 0;
48+
font-size: 0.9rem;
49+
font-weight: 700;
50+
}
51+
52+
.md-post__grid.md-post__cards a {
53+
color: var(--md-default-fg-color);
54+
}
55+
.md-post__grid.md-post__cards a:hover {
56+
color: var(--md-primary-fg-color);
2857
}
2958

30-
.md-typeset .grid.cards .md-button {
31-
width: 100%;
32-
text-align: center;
33-
margin-bottom: 0.6rem;
59+
.article_link:hover .twemoji {
60+
transform: translateX(0.2rem);
3461
}
3562

36-
.md-typeset .grid.cards>ol>li,.md-typeset .grid.cards>ul>li,.md-typeset .grid>.card {
63+
.md-post__grid.md-post__cards>ol>li,.md-post__grid.md-post__cards>ul>li,.md-post__grid>.md-post__card {
3764
border: .05rem solid var(--md-default-fg-color--lightest);
3865
border-radius: .1rem;
3966
display: block;
@@ -42,76 +69,89 @@
4269
transition: border .25s,box-shadow .25s
4370
}
4471

45-
.md-typeset .grid.cards>ol>li:focus-within,.md-typeset .grid.cards>ol>li:hover,.md-typeset .grid.cards>ul>li:focus-within,.md-typeset .grid.cards>ul>li:hover,.md-typeset .grid>.card:focus-within,.md-typeset .grid>.card:hover {
72+
.md-post__grid.md-post__cards>ol>li:focus-within,.md-post__grid.md-post__cards>ol>li:hover,.md-post__grid.md-post__cards>ul>li:focus-within,.md-post__grid.md-post__cards>ul>li:hover,.md-post__grid>.md-post__card:focus-within,.md-post__grid>.md-post__card:hover {
4673
border-color: #0000;
4774
box-shadow: var(--md-shadow-z2)
4875
}
49-
.blog__newsletter {
50-
text-align: center;
51-
margin-top: 3rem;
52-
padding-bottom: 2rem;
53-
}
54-
@media screen and (max-width:59.9375em) {
55-
.blog__newsletter {
56-
padding-right: 2rem;
57-
padding-left: 2rem;
58-
}
76+
77+
.md-typeset .md-post__grid .md-tags {
78+
margin-top: 0.5rem;
79+
margin-bottom: -0.5rem;
5980
}
60-
@media screen and (min-width:60em) {
61-
.blog__newsletter {
62-
padding-right: 12rem;
63-
padding-left: 12rem;
64-
}
81+
82+
.md-typeset .md-post__meta {
83+
margin: 0.5rem 0;
6584
}
66-
.blog__newsletter p {
67-
font-size: .9rem;
68-
color: var(--md-default-fg-color--light);
85+
86+
.md-typeset .md-draft {
87+
margin-left: 0.25rem;
6988
}
7089
</style>
7190

72-
{% if config.theme.blog %}
73-
{% if config.theme.blog.heading %}
74-
<h1>{{ config.theme.blog.heading }}</h1>
75-
{% endif %}
76-
{% if config.theme.blog.articles %}
77-
<div class="grid cards">
91+
<div class="md-content" data-md-component="content">
92+
<div class="md-content__inner md-typeset">
93+
94+
<!-- Header -->
95+
<header class="md-typeset">
96+
{{ page.content }}
97+
</header>
98+
99+
<!-- Posts -->
100+
<div class="md-post__grid md-post__cards">
78101
<ul>
79-
{% for article in config.theme.blog.articles %}
102+
{% for post in posts %}
80103
<li>
81-
<img src="{{ article.cover | url }}" alt="{{ article.title | e }}" loading="lazy">
82-
<h3>{{ article.title }}</h3>
83-
<small>
84-
<span class="twemoji">{% include ".icons/octicons/calendar-24.svg" %}</span>
85-
{{ article.date }} ·
86-
<span class="twemoji">{% include ".icons/octicons/clock-24.svg" %}</span>
87-
{{ article.reading_time }} read
88-
</small>
89-
<p>{{ article.excerpt }}</p>
90-
<p>
91-
<a class="article_link" href="{{ article.link | url }}">
92-
Continue reading
93-
<span class="twemoji">
94-
{% include ".icons/octicons/arrow-right-24.svg" %}
104+
{% set cover = "/" ~ post.url ~ post.meta.cover %}
105+
<img src="{{ cover }}" alt="{{ post.meta.title | e }}" loading="lazy">
106+
<h2><a href="{{ post.url | url }}" class="toclink">{{ post.meta.title }}</a></h2>
107+
<p>{{ post.meta.description }}</p>
108+
<div class="md-post__meta md-meta">
109+
<div class="md-meta__list">
110+
<!-- Post Date-->
111+
<div class="md-meta__item">
112+
<span class="twemoji">{% include ".icons/octicons/calendar-24.svg" %}</span>
113+
<time datetime="{{ post.config.date.created }}">
114+
{{- post.config.date.created | date -}}
115+
</time>
116+
{#- Collapse whitespace -#}
117+
</div>
118+
<!-- Post readtime -->
119+
{% if post.config.readtime %}
120+
{% set time = post.config.readtime %}
121+
<div class="md-meta__item">
122+
{% if time == 1 %}
123+
{{ lang.t("readtime.one") }}
124+
{% else %}
125+
{{ lang.t("readtime.other") | replace("#", time) }}
126+
{% endif %}
127+
</div>
128+
{% endif %}
129+
</div>
130+
<!-- Draft marker -->
131+
{% if post.config.draft %}
132+
<span class="md-draft">
133+
{{ lang.t("blog.draft") }}
95134
</span>
96-
</a>
97-
</p>
135+
{% endif %}
136+
</div>
98137
</li>
99138
{% endfor %}
100139
</ul>
101140
</div>
102-
{% if config.theme.blog.newsletter %}
103-
<div class="blog__newsletter">
104-
<hr>
105-
<h2>Subscribe to our newsletter</h2>
106-
<p>Be the first to know about recent updates to our projects, as well as preview upcoming features and beta releases.</p>
107-
<a href="{{ config.theme.blog.newsletter | url }}" class="md-button md-button--primary"> Subscribe to our newsletter </a>
108-
</div>
141+
142+
<!-- Pagination -->
143+
{% if pagination %}
144+
{% block pagination %}
145+
{% include "partials/pagination.html" %}
146+
{% endblock %}
109147
{% endif %}
110-
{% endif %}
111-
{% endif %}
112-
{% endblock %}
113-
114-
<!-- Application footer -->
115-
{% block footer %}
116-
{{ super() }}
148+
149+
<div class="blog__newsletter">
150+
<hr>
151+
<h2>Subscribe to our newsletter</h2>
152+
<p>Be the first to know about recent updates to our projects, as well as preview upcoming features and beta releases.</p>
153+
<a href="https://makerdiary.com/newsletter" class="md-button md-button--primary"> Subscribe to our newsletter </a>
154+
</div>
155+
</div>
156+
</div>
117157
{% endblock %}

‎docs/.overrides/home.html‎

Lines changed: 79 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -121,32 +121,39 @@
121121
box-shadow: 0 0 0 .05rem var(--md-primary-bg-color)
122122
}
123123

124-
.mdx-featured-blog__viewall {
124+
.mdx-updates__viewall {
125125
margin-top: 1.5rem;
126126
text-align: center;
127127
}
128128

129-
.md-typeset .grid {
129+
.md-post__grid {
130130
grid-gap: 1.6rem 1.4rem;
131131
display: grid;
132132
grid-template-columns: repeat(auto-fit,minmax(16rem,1fr));
133133
margin: 1em 0
134134
}
135135

136-
.md-typeset .grid.cards>ol,.md-typeset .grid.cards>ul {
136+
.md-post__grid.md-post__cards>ol,.md-post__grid.md-post__cards>ul {
137137
display: contents
138138
}
139139

140-
.md-typeset .grid.cards h3 {
141-
margin: 0.5rem 0;
142-
font-size: 0.9rem;
140+
.md-post__grid.md-post__cards h2 {
141+
margin: 0.5rem 0;
142+
font-size: 0.9rem;
143+
}
144+
145+
.md-post__grid.md-post__cards a {
146+
color: var(--md-default-fg-color);
147+
}
148+
.md-post__grid.md-post__cards a:hover {
149+
color: var(--md-primary-fg-color);
143150
}
144151

145152
.article_link:hover .twemoji {
146153
transform: translateX(0.2rem);
147154
}
148155

149-
.md-typeset .grid.cards>ol>li,.md-typeset .grid.cards>ul>li,.md-typeset .grid>.card {
156+
.md-post__grid.md-post__cards>ol>li,.md-post__grid.md-post__cards>ul>li,.md-post__grid>.md-post__card {
150157
border: .05rem solid var(--md-default-fg-color--lightest);
151158
border-radius: .1rem;
152159
display: block;
@@ -155,11 +162,24 @@
155162
transition: border .25s,box-shadow .25s
156163
}
157164

158-
.md-typeset .grid.cards>ol>li:focus-within,.md-typeset .grid.cards>ol>li:hover,.md-typeset .grid.cards>ul>li:focus-within,.md-typeset .grid.cards>ul>li:hover,.md-typeset .grid>.card:focus-within,.md-typeset .grid>.card:hover {
165+
.md-post__grid.md-post__cards>ol>li:focus-within,.md-post__grid.md-post__cards>ol>li:hover,.md-post__grid.md-post__cards>ul>li:focus-within,.md-post__grid.md-post__cards>ul>li:hover,.md-post__grid>.md-post__card:focus-within,.md-post__grid>.md-post__card:hover {
159166
border-color: #0000;
160167
box-shadow: var(--md-shadow-z2)
161168
}
162169

170+
.md-typeset .md-post__grid .md-tags {
171+
margin-top: 0.5rem;
172+
margin-bottom: -0.5rem;
173+
}
174+
175+
.md-typeset .md-post__meta {
176+
margin: 0.5rem 0;
177+
}
178+
179+
.md-typeset .md-draft {
180+
margin-left: 0.25rem;
181+
}
182+
163183
</style>
164184

165185
<!-- Hero for landing page -->
@@ -191,43 +211,57 @@ <h1>{{ config.theme.home.hero.title }}</h1>
191211
{% endif %}
192212
{% endblock %}
193213

194-
<!-- Content -->
195-
{% block content %}
196-
{% if config.theme.blog %}
197-
<h1 id="#latest-updates">Latest updates<a class="headerlink" href="#latest-updates" title="Permanent link"></a></h1>
198-
{% if config.theme.blog.articles %}
199-
<div class="grid cards">
200-
<ul>
201-
{% for article in config.theme.blog.articles %}
202-
{% if loop.index < 4 %}
203-
<li>
204-
<img src="{{ article.cover | url }}" alt="{{ article.title | e }}" loading="lazy">
205-
<h3>{{ article.title }}</h3>
206-
<small>
207-
<span class="twemoji">{% include ".icons/octicons/calendar-24.svg" %}</span>
208-
{{ article.date }} ·
209-
<span class="twemoji">{% include ".icons/octicons/clock-24.svg" %}</span>
210-
{{ article.reading_time }} read
211-
</small>
212-
<p>{{ article.excerpt }}</p>
213-
<p>
214-
<a class="article_link" href="{{ article.link | url }}">
215-
Continue reading
216-
<span class="twemoji">
217-
{% include ".icons/octicons/arrow-right-24.svg" %}
218-
</span>
219-
</a>
220-
</p>
221-
</li>
222-
{% endif %}
223-
{% endfor %}
224-
</ul>
225-
</div>
226-
<div class="md-typeset mdx-featured-blog__viewall">
227-
<a href="{{ config.theme.blog.catalog | url }}" class="md-button md-button--primary"> View all </a>
228-
</div>
229-
{% endif %}
230-
{% endif %}
214+
<!-- Page content -->
215+
{% block container %}
216+
<div class="md-content" data-md-component="content">
217+
<div class="md-content__inner md-typeset">
218+
<!-- Header -->
219+
<header class="md-typeset">
220+
{{ page.content }}
221+
</header>
222+
{% if config.theme.home.news %}
223+
<div class="md-post__grid md-post__cards">
224+
<ul>
225+
{% for post in config.theme.home.news.posts %}
226+
{% if loop.index < 4 %}
227+
<li>
228+
<img src="{{ post.cover | url }}" alt="{{ post.title | e }}" loading="lazy">
229+
<h2><a href="{{ post.url | url }}" class="toclink">{{ post.title }}</a></h2>
230+
<p>{{ post.excerpt }}</p>
231+
<div class="md-post__meta md-meta">
232+
<div class="md-meta__list">
233+
<!-- Post Date-->
234+
<div class="md-meta__item">
235+
<span class="twemoji">{% include ".icons/octicons/calendar-24.svg" %}</span>
236+
<time datetime="{{ post.date }}">
237+
{{- post.date | date -}}
238+
</time>
239+
{#- Collapse whitespace -#}
240+
</div>
241+
<!-- Post readtime -->
242+
{% if post.readtime %}
243+
{% set time = post.readtime %}
244+
<div class="md-meta__item">
245+
{% if time == 1 %}
246+
{{ lang.t("readtime.one") }}
247+
{% else %}
248+
{{ lang.t("readtime.other") | replace("#", time) }}
249+
{% endif %}
250+
</div>
251+
{% endif %}
252+
</div>
253+
</div>
254+
</li>
255+
{% endif %}
256+
{% endfor %}
257+
</ul>
258+
</div>
259+
<div class="md-typeset mdx-updates__viewall">
260+
<a href="{{ config.theme.home.news.viewall | url }}" class="md-button md-button--primary"> View all </a>
261+
</div>
262+
{% endif %}
263+
</div>
264+
</div>
231265
{% endblock %}
232266

233267
<!-- Application footer -->

‎docs/index.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,3 +5,5 @@ hide:
55
- navigation
66
- toc
77
---
8+
9+
# What's new

0 commit comments

Comments
 (0)