Skip to content
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Commit e4811a1

Browse files
chrisdel101mikeestocrandmck
authoredJul 22, 2024··
Express Blog (#1519)
* Issue #1483 - add blog post to header - add min height to posts page - add blog/posts index page * Issue #1483 - add single template style to posts page; will handle all post displays - build posts template styles * Issue #1483 - add futher posts index styles (based on shopify blog UI) - remove parens in liquid * Issue #1483 - liquid func to strip out top part of excerpt - add active to first item * Issue #1483 - add gutter links for tags - add JS to handle gutter tags - add CSS for gutter + posts - add blog specfic layout * Issue #1483 - add search bar style adjustments * Issue #1483 - adjust tags side menu and remove from workflow - add in second side menu - add How To write Post page - add more styles * Issue #1483 - add example post page layout - add all links to side menu * Issue #1483 - readd post width 100%; imgs are not all same size this way - add border to post - change menu text color - save 3 sample posts to use for preview - will need deletig * Issue #1483 - update file names * Issue #1483 - change file name * Issue #1483 - change updated file name - fix wrong example link - fix wrong div placement * PR #1519 - remove example post - add Posts menu to gutter * PR #1519 - add href to posts menu - add styles to post menu - adjust dark styles to post menu * PR #1519 - adjust posts filter author - add Welcome post * PR #1519 - small text changes * PR #1519 - revamp write a post instructions - re-name css variables - increase post font size - add custom image to blog - add comment about img * PR #1519 - adjust headings - small adjust content * PR #1519 - add new line about pre-approval * Update css/style.css Co-authored-by: Michael Esteban <[email protected]> * PR #1519 - add bullet about how to use preview feature * PR #1519 - fix typo * fix typo * Update 2024-05-25-welcome-post.md Some edits to the initial blog post. * Update 2024-05-25-welcome-post.md - Add blank subtitle * PR #1519 - remove image and related markup/css * Add blog to jekyll config, update blog layout template * PR #1519 - move more to config - add conds to all to avoid errors in layout - remove excerpt sep since it's not needed * PR #1519 - remove quotes - update write file * PR #1519 - lower transition fade time * Further changes, hopefully close to final * Fix issues that Chris raised, etc. * Add all posts to blog menu * Change link for Blog menu item to latest post * PR #1519 - add mobile styles to write.md image - remove unused cond in post.html - remove active class in post.md * PR #1519 Small styles remove dummies - remove dumm posts - move inline styles from post - remove css comments - add small margins * PR #1519 - Remove image - undo css first child change --------- Co-authored-by: Michael Esteban <[email protected]> Co-authored-by: Rand McKinney <[email protected]>
1 parent 0eff3bf commit e4811a1

File tree

12 files changed

+421
-34
lines changed

12 files changed

+421
-34
lines changed
 

‎_config.yml

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,15 @@
11
# Site settings
22

3+
defaults:
4+
-
5+
scope:
6+
path: "_posts"
7+
type: "posts"
8+
values:
9+
layout: "post"
10+
menu: blog
11+
lang: en
12+
313
# Build settings
414
markdown: kramdown
515

‎_includes/blog/posts-menu.md

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<div id="blog-side-menu-container">
2+
<h3>
3+
<a href="/{{ page.lang }}/blog/posts">Posts</a>
4+
</h3>
5+
<ul id="blog-side-menu">
6+
{% for post in site.posts %}
7+
<li>
8+
<a href="{{post.url}}">{{ post.title }}</a>
9+
</li>
10+
{% endfor %}
11+
</ul>
12+
</div>

‎_includes/blog/tags-menu.md

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<ul id="tags-side-menu">
2+
{% for tag in site.tags %}
3+
<li>{{ tag[0] }}</li>
4+
<ul
5+
{% for post in tag[1] %}
6+
<li><a href="{{ post.url }}">{{ post.title }}</a></li>
7+
{% endfor %}
8+
</ul>
9+
{% endfor %}
10+
</ul>

‎_includes/header/header-en.html

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -141,6 +141,23 @@
141141
</li>
142142
</ul>
143143
</li>
144+
<li>
145+
<ul id="blog-menu" class="menu">
146+
<li><a href="{{site.posts.first.url}}"{% if page.menu == 'blog' %} class="active"{% endif %}>Blog</a>
147+
<ul>
148+
<li>
149+
<a href="{{site.posts.first.url}}">Latest post</a>
150+
</li>
151+
<li>
152+
<a href="/{{ page.lang }}/blog/posts.html">All posts</a>
153+
</li>
154+
<li>
155+
<a href="/{{ page.lang }}/blog/write-post.html">Write a Post</a>
156+
</li>
157+
</ul>
158+
</li>
159+
</ul>
160+
</li>
144161
<!--
145162
<li>
146163
<ul id="changelog-menu" class="menu">

‎_layouts/post.html

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
<!DOCTYPE html>
2+
<!---
3+
Copyright (c) 2016 StrongLoop, IBM, and Express Contributors
4+
License: MIT
5+
-->
6+
<html lang="{{ page.lang }}">
7+
{% include head.html %}
8+
9+
<body>
10+
11+
<section class="content">
12+
13+
{% include header/header-{{ page.lang }}.html %}
14+
15+
{% include blog/posts-menu.md %}
16+
17+
<div id="overlay"></div>
18+
<div id="blog-doc" markdown="1">
19+
{% if page.title %}
20+
<h1>{{page.title}}</h1>
21+
{% endif %}
22+
{% if page.sub_title %}
23+
<h2>{{page.sub_title}}</h2>
24+
{% endif %}
25+
<div class="blog-details">
26+
{% if page.author %}
27+
<div class="blog-author">By {{page.author}}</div>
28+
{% endif %}
29+
<div class="blog-date">{{page.date| date: "%d %b %Y" }}</div>
30+
</div>
31+
{{ content }}
32+
</div>
33+
</section>
34+
35+
{% include footer/footer-{{ page.lang }}.html %}
36+
37+
</body>
38+
39+
</html>

‎_posts/2024-07-16-welcome-post.md

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
---
2+
title: Welcome to The Express Blog!
3+
tags: site-admin
4+
author: Rand McKinney and Chris Del
5+
---
6+
7+
Welcome to the new Express blog! The blog is meant to be a primary means of communication for the Express technical committee (TC). While we currently have other channels such as X, LinkedIn, and of course GitHub, there's no authoritative "soapbox" for announcements and general communication.
8+
9+
Initially, the Express blog will be a venue:
10+
- For periodic announcements of new releases, pre-releases, plans, and ongoing work on the project.
11+
- For the Express TC to discuss issues of particular importance to the Express community.
12+
- To highlight security issues or other urgent information.
13+
14+
Eventually, we hope the blog will evolve into a more general communication hub for the entire Express community; for example to share examples, tips, and experiences with the Express ecosystem and other information that's not simply technical documentation or GitHub discussion.
15+
16+
Initially, posts will be written by TC members (potentially collaborating others), mainly because we don't have bandwidth to review general posts from the broader community. Eventually, we would love to open up the blog for broader contributions, but for now the focus is on trying to release Express 5.0, and the reality of an open-source project is that everyone has finite time to contribute.
17+
18+
If you think you have a great idea for a post for future consideration, feel free to pitch the idea! The best approach is to open a new issue, and then after appropriate discussion, open a PR. We've also written up simple [instructions to create a blog post](/en/blog/write-post.html).

‎css/dark-theme.css

Lines changed: 44 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,14 @@
11
:root {
22
--main_dark_bg: #010409;
33
--second_dark_bg: #0d1117;
4+
--darker_hover: #171b20;;
45
--dark_hover: #383838;
56
--second_dark_hover: #484848;
6-
--dark_text: #e6edf3;
7+
--dark_inner_text: #888888;
78
--dark_header_text: silver;
8-
--dark_inner_text: grey;
9+
--dark_main_text: #e6edf3;
10+
--dark_bright_text: wheat;
11+
--dark_border: #ddd;
912
--link: #259dff;
1013
}
1114
#theme-icon-container {
@@ -40,24 +43,24 @@ html.dark-mode #theme-icon-container .hidden-dark {
4043
display: none;
4144
}
4245
html.dark-mode #theme-icon-container {
43-
color: var(--dark_text);
46+
color: var(--dark_main_text);
4447
background-color: var(--second_dark_bg);
4548
}
4649
html.dark-mode > body {
4750
background: var(--main_dark_bg);
48-
color: var(--dark_text);
51+
color: var(--dark_main_text);
4952
}
5053
html.dark-mode header {
5154
background-color: var(--second_dark_bg);
52-
color: var(--dark_text);
55+
color: var(--dark_main_text);
5356
}
5457
html.dark-mode #logo > a {
55-
color: var(--dark_text);
58+
color: var(--dark_main_text);
5659
}
5760
/* navbar links/drop down menu links */
5861
html.dark-mode #navbar ul#navmenu li a,
5962
html.dark-mode #navbar ul#navmenu li.dropit-trigger a {
60-
color: var(--dark_text);
63+
color: var(--dark_main_text);
6164
}
6265
/* first drop down link - some js is adding current class */
6366
html.dark-mode #navbar ul#navmenu li a.current {
@@ -82,12 +85,12 @@ html.dark-mode #navbar > span.algolia-autocomplete > input {
8285
}
8386
html.dark-mode #navbar > span.algolia-autocomplete > input,
8487
html.dark-mode #navbar > span.algolia-autocomplete > input::placeholder {
85-
color: var(--dark_text);
88+
color: var(--dark_main_text);
8689
}
8790
/* search bar french */
8891
:lang(fr) html.dark-mode #navbar ul#navmenu > span.algolia-autocomplete > input {
8992
background-color: var(--second_dark_bg);
90-
color: var(--dark_text);
93+
color: var(--dark_main_text);
9194
}
9295
/* search bar fixes uz, ru, de, fr */
9396
:lang(uz) span.algolia-autocomplete {
@@ -108,7 +111,7 @@ html.dark-mode #navbar > span.algolia-autocomplete > input::placeholder {
108111
max-width: 100%;
109112
}
110113
html.dark-mode #navbar ul#navmenu > span.algolia-autocomplete > input::placeholder {
111-
color: var(--dark_text);
114+
color: var(--dark_main_text);
112115
}
113116
html.dark-mode div#overlay {
114117
opacity: 0.5;
@@ -124,13 +127,13 @@ html.dark-mode div#overlay {
124127
/* mobile menu inner links hover */
125128
html.dark-mode div#navbar .menu ul.dropit-submenu a:hover {
126129
background: var(--second_dark_hover);
127-
color: var(--dark_text) !important;
130+
color: var(--dark_main_text) !important;
128131
}
129132
}
130133
html.dark-mode .doc-box.doc-info,
131134
html.dark-mode .doc-box.doc-notice,
132135
html.dark-mode .doc-box.doc-warn {
133-
color: var(--dark_text);
136+
color: var(--dark_main_text);
134137
background: var(--main_dark_bg);
135138
}
136139
html.dark-mode .doc-box.doc-info pre.language-javascript {
@@ -142,14 +145,14 @@ html.dark-mode h3,
142145
html.dark-mode code,
143146
html.dark-mode em,
144147
html.dark-mode strong {
145-
color: var(--dark_text);
148+
color: var(--dark_main_text);
146149
}
147150
html.dark-mode pre {
148151
background: var(--second_dark_bg);
149152
}
150153
/* index.html */
151154
html.dark-mode #description .express > a {
152-
color: var(--dark_text);
155+
color: var(--dark_main_text);
153156
}
154157
html.dark-mode #install-command {
155158
background: var(--main_dark_bg);
@@ -158,7 +161,7 @@ html.dark-mode #announcements {
158161
background: var(--main_dark_bg);
159162
}
160163
html.dark-mode #boxes div > h3 {
161-
color: var(--dark_text);
164+
color: var(--dark_main_text);
162165
}
163166
/* basic-routing.htlm */
164167
html.dark-mode [class*='language-'] {
@@ -171,11 +174,11 @@ html.dark-mode .token.operator {
171174
/* debugging.htlm */
172175
html.dark-mode table tr:first-child th {
173176
background-color: var(--second_dark_bg);
174-
color: var(--dark_text);
177+
color: var(--dark_main_text);
175178
}
176179
/* api pages */
177180
html.dark-mode #menu li > * {
178-
color: var(--dark_text);
181+
color: var(--dark_main_text);
179182
}
180183
html.dark-mode #menu li ul li > em {
181184
color: var(--dark_header_text);
@@ -197,14 +200,14 @@ html.dark-mode .ds-dropdown-menu .ds-dataset-1 {
197200
}
198201
html.dark-mode .ds-dropdown-menu .ds-dataset-1 .ds-suggestion a {
199202
background-color: var(--second_dark_bg);
200-
color: var(--dark_text);
203+
color: var(--dark_main_text);
201204
}
202205
html.dark-mode
203206
.ds-dropdown-menu
204207
.ds-dataset-1
205208
.ds-suggestions
206209
.algolia-docsearch-suggestion--category-header {
207-
color: var(--dark_text);
210+
color: var(--dark_main_text);
208211
}
209212
html.dark-mode
210213
.ds-dropdown-menu
@@ -220,15 +223,15 @@ html.dark-mode
220223
.ds-suggestions
221224
.algolia-docsearch-suggestion--wrapper
222225
.algolia-docsearch-suggestion--title {
223-
color: var(--dark_text);
226+
color: var(--dark_main_text);
224227
}
225228
html.dark-mode
226229
.ds-dropdown-menu
227230
.ds-dataset-1
228231
.ds-suggestions
229232
.algolia-docsearch-suggestion--wrapper
230233
.algolia-docsearch-suggestion--text {
231-
color: var(--dark_text);
234+
color: var(--dark_main_text);
232235
}
233236
html.dark-mode
234237
.ds-dropdown-menu
@@ -242,4 +245,23 @@ html.dark-mode .ds-suggestion.ds-cursor .algolia-docsearch-suggestion--title,
242245
html.dark-mode .ds-suggestion.ds-cursor .algolia-docsearch-suggestion--content{
243246
background-color: var(--dark_hover);
244247
}
245-
248+
html.dark-mode .blog-post{
249+
background-color: initial;
250+
border: 1px solid var(--dark_border);
251+
transition: 0.3s;
252+
}
253+
html.dark-mode .blog-post:hover{
254+
background-color: var(--darker_hover);
255+
}
256+
html.dark-mode .blog-title > a{
257+
color: var(--dark_main_text);
258+
}
259+
html.dark-mode .blog-excerpt{
260+
color: var(--dark_bright_text);
261+
}
262+
html.dark-mode #blog-side-menu-container h3 a{
263+
color: var(--dark_header_text);
264+
}
265+
html.dark-mode #blog-side-menu > li > a{
266+
color: var(--dark_inner_text);
267+
}

‎css/style.css

Lines changed: 190 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -739,7 +739,9 @@ footer {
739739

740740
/* secondary menu */
741741

742-
#menu {
742+
#menu,
743+
#tags-side-menu,
744+
#blog-side-menu-container {
743745
position: fixed;
744746
margin: 0;
745747
padding: 0 10px 0 0;
@@ -751,37 +753,77 @@ footer {
751753
overflow-y: auto;
752754
}
753755

754-
#menu em {
756+
#blog-side-menu-container {
757+
max-width: 210px;
758+
}
759+
760+
#blog-side-menu-container li {
761+
max-width: 100%;
762+
margin-bottom: 5px;
763+
}
764+
765+
#blog-side-menu {
766+
list-style: none;
767+
padding: 0;
768+
}
769+
770+
#menu em,
771+
#tags-side-menu em,
772+
#blog-side-menu em{
755773
font-weight: bold;
756774
color: #888;
757775
}
758776

759777
#menu li {
760778
list-style: none;
761779
}
780+
#tags-side-menu li {
781+
list-style: none;
782+
font-size: 15px;
783+
font-weight: bold;
784+
}
762785

763-
#menu ul {
786+
#menu ul,
787+
#tags-side-menu ul {
764788
height: 0;
765789
overflow: hidden;
766790
}
767791

768-
#menu ul.active {
792+
#menu ul.active,
793+
#tags-side-menu ul.active {
769794
height: auto;
770795
padding: 0;
771796
}
772797

773-
#menu > li > a {
774-
color: #353535;
798+
#menu > li > a,
799+
#tags-side-menu > li > a,
800+
#blog-side-menu > li > a {
775801
font-weight: bold;
776-
font-size: 15px;
802+
font-size: 13px;
803+
}
804+
805+
#blog-side-menu > li > a {
806+
color: #666
777807
}
778808

779-
#menu ul a {
809+
#blog-side-menu-container > h3 > a {
810+
color: #353535
811+
}
812+
813+
814+
815+
#menu ul a,
816+
#tags-side-menu ul a {
780817
color: #555;
781818
padding-right: 7px;
782819
}
820+
#tags-side-menu ul a{
821+
font-size: 13px;
822+
font-weight:initial;
823+
}
783824

784-
#menu ul a.active {
825+
#menu ul a.active,
826+
#tags-side-menu ul a.active {
785827
color: #259dff;
786828
}
787829

@@ -794,19 +836,26 @@ h2 a {
794836
#q {
795837
display: none;
796838
height: 2.5em;
797-
min-width: 100%;
839+
max-width: 100%;
798840
padding: 5px;
799841
}
800842

801843
.algolia-autocomplete {
802-
min-width: 12em;
844+
max-width: 9em;
803845
top: -0.2em;
804846
margin-right: 3px;
805847
}
806848

807849
.algolia-autocomplete #q {
808850
display: initial
809851
}
852+
/* search-bar desktop re-sizing */
853+
@media all and (min-width: 950px) {
854+
.algolia-autocomplete {
855+
margin-right:15px;
856+
max-width: 12em;
857+
}
858+
}
810859

811860
/* responsive */
812861

@@ -882,7 +931,9 @@ h2 a {
882931
font-weight: normal;
883932
}
884933

885-
#menu {
934+
#menu,
935+
#tags-side-menu,
936+
#blog-side-menu-container {
886937
display: none;
887938
}
888939

@@ -1195,3 +1246,130 @@ h2 a {
11951246
#mw-list ul li {
11961247
margin-left: -20px;
11971248
}
1249+
/* Blog page styles*/
1250+
#blog-doc {
1251+
margin: 0 10px;
1252+
}
1253+
#blog-doc:has(> h1#express-blog),
1254+
#blog-doc:has(> h1#write-a-blog-post) {
1255+
min-height: 300px;
1256+
}
1257+
#blog-doc .blog-details ~ p > img {
1258+
width: 200px;
1259+
float: right;
1260+
}
1261+
#blog-doc p {
1262+
font-size: 1.1em;
1263+
}
1264+
.blog-posts {
1265+
display: flex;
1266+
flex-direction: column;
1267+
row-gap: 10px;
1268+
}
1269+
.blog-post {
1270+
width: 100%;
1271+
background-color: #eee;
1272+
display: flex;
1273+
padding: 10px;
1274+
flex-direction: column;
1275+
justify-content: space-between;
1276+
box-shadow: 2px 3px #E0E0E0;
1277+
border-radius: 5px;
1278+
border: 1px solid #808080;
1279+
transition: 0.1s;
1280+
}
1281+
.blog-post:hover {
1282+
background-color: #D3D3D3;
1283+
border: 1px solid #303030;
1284+
}
1285+
.blog-post img {
1286+
max-width: 100%;
1287+
max-height: 100%;
1288+
object-fit: cover;
1289+
}
1290+
.blog-post .blog-details {
1291+
display: flex;
1292+
flex-direction: column;
1293+
}
1294+
.blog-details div:first-child {
1295+
margin-bottom: 5px;
1296+
}
1297+
.blog-tag {
1298+
font-size: 12px;
1299+
}
1300+
.blog-title {
1301+
font-size: 1.3rem;
1302+
line-height: 1.5rem;
1303+
font-weight: 500;
1304+
padding-right: .2em;
1305+
}
1306+
.blog-title a {
1307+
color: #000;
1308+
}
1309+
.blog-excerpt {
1310+
color: initial;
1311+
font-size: .75rem;
1312+
}
1313+
.blog-img {
1314+
max-width: 100%;
1315+
margin: auto;
1316+
}
1317+
.blog-author {
1318+
font-style: italic;
1319+
}
1320+
.blog-date {
1321+
font-weight: bold;
1322+
font-size: 85%;
1323+
}
1324+
/* mobile-only */
1325+
@media (max-width: 500px) {
1326+
#blog-doc {
1327+
display: flex;
1328+
flex-direction: column;
1329+
align-items: center;
1330+
margin: 0;
1331+
padding-right: 10px;
1332+
}
1333+
#blog-doc .blog-details + p {
1334+
display: flex;
1335+
flex-direction: column;
1336+
align-items: center;
1337+
}
1338+
#blog-doc .blog-details + p > img {
1339+
margin-bottom: 15px;
1340+
}
1341+
}
1342+
/* blog tablet and up*/
1343+
@media (min-width: 768px) {
1344+
.blog-post {
1345+
margin: auto;
1346+
}
1347+
.blog-tags {
1348+
margin-bottom: 20px;
1349+
}
1350+
.blog-title {
1351+
font-size: 1.3rem;
1352+
margin-bottom: 20px;
1353+
line-height: 1.5rem;
1354+
}
1355+
.blog-post .blog-details {
1356+
display: flex;
1357+
flex-direction: row;
1358+
margin-left: 1rem;
1359+
font-size: 90%;
1360+
}
1361+
.blog-post .blog-details div:first-child {
1362+
margin-right: 20px;
1363+
}
1364+
.blog-details {
1365+
font-size: 1rem;
1366+
}
1367+
.blog-excerpt {
1368+
line-height: initial;
1369+
font-size: .85rem;
1370+
font-weight: 300;
1371+
margin-top: auto;
1372+
margin-bottom: 10px;
1373+
max-width: 80%;
1374+
}
1375+
}

‎en/blog/posts.md

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
---
2+
layout: post
3+
title: Express Blog Posts
4+
menu: blog
5+
lang: en
6+
redirect_from: "/blog/posts.html"
7+
---
8+
9+
Want to write a post? See the submission [guidelines.](/en/blog/write-post.html)
10+
11+
{% if site.posts.size != 0 %}
12+
<div class="blog-posts">
13+
{% for post in site.posts %}
14+
<div class="blog-post">
15+
<div class="blog-title">
16+
<a href="{{ post.url }}"> {{ post.title }}</a>
17+
</div>
18+
<div class="blog-details">
19+
<div>By {{ post.author }}</div>
20+
<div >{{ post.date | date:"%b %d, %Y" }}</div>
21+
</div>
22+
<div class="blog-excerpt"> {{post.excerpt | truncate: 240 | markdownify }} </div>
23+
</div>
24+
{% endfor %}
25+
</div>
26+
{% else %}
27+
There are currently no blog posts.
28+
{% endif %}

‎en/blog/write-post.md

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
---
2+
layout: post
3+
title: How to write a blog post
4+
menu: blog
5+
lang: en
6+
redirect_from: "/blog/write.html"
7+
---
8+
9+
![Blogger]({{site.url}}/images/blogger.jpg)
10+
11+
If you have an idea for a blog post, follow these steps to propose it and potentially get it published!
12+
13+
1. ### Propose your post
14+
Before taking the time to write a post, please confirm that we will be able to publish it. We're looking for topics specifically related to Express, and so we want to pre-approve all posts. For the moment, this means we aren't accepting any unsolicited posts. To propose a blog post, [open an issue](https://github.com/expressjs/expressjs.com/issues) entitled `Blog post proposal: <your idea>`.
15+
16+
17+
1. ### Fork the repository
18+
If the Express TC accepts your proposal, start to write your post by forking the [expressjs.com](https://github.com/expressjs/expressjs.com) repository and cloning it to your local machine. Once you open a pull request, you'll be able to preview your post on GitHub. See step six below.
19+
20+
Optional: To run the site locally and preview your post before opening a PR, see the [setup instructions in the README](https://github.com/expressjs/expressjs.com?tab=readme-ov-file#expressjscom).
21+
{: .doc-box .doc-info}
22+
23+
1. ### Create a new file
24+
Create a new file in the `_posts` directory named using following the format: `YYYY-MM-DD-title.md`.
25+
26+
1. ### Add the required front matter
27+
Copy the following front matter, including the dotted lines, and paste it at the top of file you just created. Replace the placeholder values with as desired.
28+
29+
```yaml
30+
---
31+
title: <your-title>
32+
sub_title: <your-optional-sub-title>
33+
date: <date-matching_filename>
34+
tags: <white-space-separated-topics>
35+
author: <your-name>
36+
---
37+
```
38+
2. ### Add your content
39+
Finally, start writing your content below the front matter. Use standard markdown formatting.
40+
41+
1. ### Open a pull request (PR)
42+
Once you open a PR, you will be able to preview your results: There will be a section on the page entitled `Deploy Preview for expressjscom-preview ready!` Click the link to see the site rendered from your fork/branch.
43+
44+
You can use this feature over multiple commits to refine your post by making a `draft` pull request. Once it's ready for review, switch it to a formal PR.
45+
46+

‎images/blogger.jpg

416 KB
Loading

‎js/app.js

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -152,6 +152,11 @@ $(function(){
152152
}
153153

154154
})
155+
$('#tags-side-menu li').on('click', function() {
156+
// Remove prev 'active's
157+
$(this).next().siblings().removeClass('active');
158+
$(this).next().addClass('active')
159+
})
155160

156161
// show mobile menu
157162
$('#nav-button').click(function () {
@@ -173,6 +178,7 @@ $(function(){
173178
$('#guide-menu').dropit({ action: 'click' })
174179
$('#advanced-topics-menu').dropit({ action: 'click' })
175180
$('#resources-menu').dropit({ action: 'click' })
181+
$('#blog-menu').dropit({ action: 'click' })
176182
$('#lb-menu').dropit({ action: 'click' })
177183
$('#changelog-menu').dropit({ action: 'click' })
178184
}
@@ -182,6 +188,7 @@ $(function(){
182188
$('#guide-menu').dropit({ action: 'mouseenter' })
183189
$('#advanced-topics-menu').dropit({ action: 'mouseenter' })
184190
$('#resources-menu').dropit({ action: 'mouseenter' })
191+
$('#blog-menu').dropit({ action: 'mouseenter' })
185192
$('#lb-menu').dropit({ action: 'mouseenter' })
186193
$('#changelog-menu').dropit({ action: 'mouseenter' })
187194
}

0 commit comments

Comments
 (0)
Please sign in to comment.