expressjs · crandmck · Jul 22, 2024 · Apr 26, 2024 · Apr 29, 2024 · May 4, 2024
diff --git a/_config.yml b/_config.yml
@@ -1,5 +1,15 @@
 # Site settings
 
+defaults:
+  -
+    scope:
+      path: "_posts" 
+      type: "posts"
+    values:
+      layout: "post"
+      menu: blog
+      lang: en
+
 # Build settings
 markdown: kramdown
 

diff --git a/_includes/blog/posts-menu.md b/_includes/blog/posts-menu.md
@@ -0,0 +1,12 @@
+<div id="blog-side-menu-container">
+  <h3>
+    <a href="/{{ page.lang }}/blog/posts">Posts</a>
+  </h3>
+  <ul id="blog-side-menu">
+      {% for post in site.posts %}
+    <li>
+      <a href="{{post.url}}">{{ post.title }}</a>
+    </li>
+      {% endfor %}
+  </ul>
+</div> 
diff --git a/_includes/blog/tags-menu.md b/_includes/blog/tags-menu.md
@@ -0,0 +1,10 @@
+<ul id="tags-side-menu">
+    {% for tag in site.tags %}
+  <li>{{ tag[0] }}</li>
+    <ul
+        {% for post in tag[1] %}
+        <li><a href="{{ post.url }}">{{ post.title }}</a></li>
+        {% endfor %}
+    </ul>
+{% endfor %}  
+</ul>
diff --git a/_includes/header/header-en.html b/_includes/header/header-en.html
@@ -141,6 +141,23 @@
                   </li>
               </ul>
           </li>
+          <li>
+              <ul id="blog-menu" class="menu">
+                  <li><a href="{{site.posts.first.url}}"{% if page.menu == 'blog' %} class="active"{% endif %}>Blog</a>
+                      <ul>
+                          <li>
+                            <a href="{{site.posts.first.url}}">Latest post</a> 
+                          </li>
+                          <li>
+                            <a href="/{{ page.lang }}/blog/posts.html">All posts</a> 
+                          </li>                          
+                          <li>
+                            <a href="/{{ page.lang }}/blog/write-post.html">Write a Post</a>
+                          </li>
+                      </ul>
+                  </li>
+              </ul>
+          </li>
           <!--
           <li>
               <ul id="changelog-menu" class="menu">

diff --git a/_layouts/post.html b/_layouts/post.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<!---
+ Copyright (c) 2016 StrongLoop, IBM, and Express Contributors
+ License: MIT
+-->
+<html lang="{{ page.lang }}">
+  {% include head.html %}
+
+  <body>
+
+    <section class="content">
+
+      {% include header/header-{{ page.lang }}.html %}
+
+      {% include blog/posts-menu.md %}
+
+      <div id="overlay"></div>
+      <div id="blog-doc" markdown="1">
+          {% if page.title %}
+          <h1>{{page.title}}</h1>
+          {% endif %} 
+          {% if page.sub_title %}
+          <h2>{{page.sub_title}}</h2>
+          {% endif %}
+          <div class="blog-details">
+            {% if page.author %}
+            <div class="blog-author">By {{page.author}}</div>
+            {% endif %}
+            <div class="blog-date">{{page.date| date: "%d %b %Y" }}</div>
+          </div>
+        {{ content }}
+      </div>
+    </section>
+
+    {% include footer/footer-{{ page.lang }}.html %}
+
+  </body>
+
+</html>
diff --git a/_posts/2024-07-16-welcome-post.md b/_posts/2024-07-16-welcome-post.md
@@ -0,0 +1,18 @@
+---
+title: Welcome to The Express Blog! 
+tags: site-admin
+author: Rand McKinney and Chris Del
+---
+
+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.
+
+Initially, the Express blog will be a venue:
+- For periodic announcements of new releases, pre-releases, plans, and ongoing work on the project.
+- For the Express TC to discuss issues of particular importance to the Express community.
+- To highlight security issues or other urgent information.
+
+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.
+
+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. 
+
+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). 
diff --git a/css/dark-theme.css b/css/dark-theme.css
@@ -1,11 +1,14 @@
 :root {
   --main_dark_bg: #010409;
   --second_dark_bg: #0d1117;
+  --darker_hover: #171b20;;
   --dark_hover: #383838;
   --second_dark_hover: #484848;
-  --dark_text: #e6edf3;
+  --dark_inner_text: #888888;
   --dark_header_text: silver;
-  --dark_inner_text: grey;
+  --dark_main_text: #e6edf3;
+  --dark_bright_text: wheat;
+  --dark_border: #ddd;
   --link: #259dff;
 }
 #theme-icon-container {
@@ -40,24 +43,24 @@ html.dark-mode #theme-icon-container .hidden-dark {
   display: none;
 }
 html.dark-mode #theme-icon-container {
-  color: var(--dark_text);
+  color: var(--dark_main_text);
   background-color: var(--second_dark_bg);
 }
 html.dark-mode > body {
   background: var(--main_dark_bg);
-  color: var(--dark_text);
+  color: var(--dark_main_text);
 }
 html.dark-mode header {
   background-color: var(--second_dark_bg);
-  color: var(--dark_text);
+  color: var(--dark_main_text);
 }
 html.dark-mode #logo > a {
-  color: var(--dark_text);
+  color: var(--dark_main_text);
 }
 /* navbar links/drop down menu links */
 html.dark-mode #navbar ul#navmenu li a,
 html.dark-mode #navbar ul#navmenu li.dropit-trigger a {
-  color: var(--dark_text);
+  color: var(--dark_main_text);
 }
 /* first drop down link - some js is adding current class */
 html.dark-mode #navbar ul#navmenu li a.current {
@@ -82,12 +85,12 @@ html.dark-mode #navbar > span.algolia-autocomplete > input {
 }
 html.dark-mode #navbar > span.algolia-autocomplete > input,
 html.dark-mode #navbar > span.algolia-autocomplete > input::placeholder {
-  color: var(--dark_text);
+  color: var(--dark_main_text);
 }
 /* search bar french */
 :lang(fr) html.dark-mode #navbar ul#navmenu > span.algolia-autocomplete > input {
   background-color: var(--second_dark_bg);
-  color: var(--dark_text);
+  color: var(--dark_main_text);
 }
 /* search bar fixes uz, ru, de, fr  */
 :lang(uz) span.algolia-autocomplete {
@@ -108,7 +111,7 @@ html.dark-mode #navbar > span.algolia-autocomplete > input::placeholder {
   max-width: 100%;
 }
 html.dark-mode #navbar ul#navmenu > span.algolia-autocomplete > input::placeholder {
-  color: var(--dark_text);
+  color: var(--dark_main_text);
 }
 html.dark-mode div#overlay {
   opacity: 0.5;
@@ -124,13 +127,13 @@ html.dark-mode div#overlay {
     /* mobile menu inner links hover */
   html.dark-mode div#navbar .menu ul.dropit-submenu a:hover {
     background: var(--second_dark_hover);
-    color: var(--dark_text) !important;
+    color: var(--dark_main_text) !important;
   }
 }
 html.dark-mode .doc-box.doc-info,
 html.dark-mode .doc-box.doc-notice,
 html.dark-mode .doc-box.doc-warn {
-  color: var(--dark_text);
+  color: var(--dark_main_text);
   background: var(--main_dark_bg);
 }
 html.dark-mode .doc-box.doc-info pre.language-javascript {
@@ -142,14 +145,14 @@ html.dark-mode h3,
 html.dark-mode code,
 html.dark-mode em,
 html.dark-mode strong  {
-  color: var(--dark_text);
+  color: var(--dark_main_text);
 }
 html.dark-mode pre {
   background: var(--second_dark_bg);
 }
 /* index.html */
 html.dark-mode #description .express > a {
-  color: var(--dark_text);
+  color: var(--dark_main_text);
 }
 html.dark-mode #install-command {
   background: var(--main_dark_bg);
@@ -158,7 +161,7 @@ html.dark-mode #announcements {
   background: var(--main_dark_bg);
 }
 html.dark-mode #boxes div > h3 {
-  color: var(--dark_text);
+  color: var(--dark_main_text);
 }
 /* basic-routing.htlm */
 html.dark-mode [class*='language-'] {
@@ -171,11 +174,11 @@ html.dark-mode .token.operator {
 /* debugging.htlm */
 html.dark-mode table tr:first-child th {
   background-color: var(--second_dark_bg);
-  color: var(--dark_text);
+  color: var(--dark_main_text);
 }
 /* api pages */
 html.dark-mode #menu li > * {
-  color: var(--dark_text);
+  color: var(--dark_main_text);
 }
 html.dark-mode #menu li ul li > em {
   color: var(--dark_header_text);
@@ -197,14 +200,14 @@ html.dark-mode .ds-dropdown-menu .ds-dataset-1 {
 }
 html.dark-mode .ds-dropdown-menu .ds-dataset-1 .ds-suggestion a {
   background-color: var(--second_dark_bg);
-  color: var(--dark_text);
+  color: var(--dark_main_text);
 }
 html.dark-mode
   .ds-dropdown-menu
   .ds-dataset-1
   .ds-suggestions
   .algolia-docsearch-suggestion--category-header {
-  color: var(--dark_text);
+  color: var(--dark_main_text);
 }
 html.dark-mode
   .ds-dropdown-menu
@@ -220,15 +223,15 @@ html.dark-mode
   .ds-suggestions
   .algolia-docsearch-suggestion--wrapper
   .algolia-docsearch-suggestion--title {
-  color: var(--dark_text);
+  color: var(--dark_main_text);
 }
 html.dark-mode
   .ds-dropdown-menu
   .ds-dataset-1
   .ds-suggestions
   .algolia-docsearch-suggestion--wrapper
   .algolia-docsearch-suggestion--text {
-  color: var(--dark_text);
+  color: var(--dark_main_text);
 }
 html.dark-mode
   .ds-dropdown-menu
@@ -242,4 +245,23 @@ html.dark-mode .ds-suggestion.ds-cursor .algolia-docsearch-suggestion--title,
 html.dark-mode .ds-suggestion.ds-cursor .algolia-docsearch-suggestion--content{
   background-color: var(--dark_hover);
 }
-
+html.dark-mode .blog-post{
+  background-color: initial;
+  border: 1px solid var(--dark_border);
+  transition: 0.3s;
+} 
+html.dark-mode .blog-post:hover{
+  background-color: var(--darker_hover);
+}
+html.dark-mode .blog-title > a{
+  color: var(--dark_main_text);
+} 
+html.dark-mode .blog-excerpt{
+  color: var(--dark_bright_text);
+} 
+html.dark-mode #blog-side-menu-container h3 a{
+  color: var(--dark_header_text);
+}
+html.dark-mode #blog-side-menu > li > a{
+  color: var(--dark_inner_text);
+}