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]>

_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
 

_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> 

_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>

_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">

_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>

_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). 

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);
+}