Issue expressjs#1483

- adjust tags side menu and remove from workflow - add in second side menu - add How To write Post page - add more styles
chrisdel101 · May 17, 2024 · 35d7ff9 · 35d7ff9
1 parent 7eb4ddf
commit 35d7ff9
Show file tree

Hide file tree

Showing 8 changed files with 129 additions and 25 deletions.
diff --git a/_includes/blog/example-menu.md b/_includes/blog/example-menu.md
@@ -0,0 +1,5 @@
+<ul id="blog-side-menu">
+  <li>
+    <a href="/blog/write.html">Write a Post</a>
+  </li>
+</ul>
diff --git a/_includes/blog/menu.md → _includes/blog/tags-menu.md b/_includes/blog/menu.md → _includes/blog/tags-menu.md
@@ -1,7 +1,7 @@
-<ul id="blog-side-menu">
+<ul id="tags-side-menu">
     {% for tag in site.tags %}
-  <h3>{{ tag[0] }}</h3>
-    <ul>
+  <li>{{ tag[0] }}</li>
+    <ul
         {% for post in tag[1] %}
         <li><a href="{{ post.url }}">{{ post.title }}</a></li>
         {% endfor %}

diff --git a/_includes/header/header-en.html b/_includes/header/header-en.html
@@ -152,6 +152,12 @@
                           <li>
                             <a href="/{{ page.lang }}/blog/posts.html">Posts</a>
                           </li>
+                          <li>
+                            <a href="/{{ page.lang }}/blog/write.html">Write a Post</a>
+                          </li>
+                          <li>
+                            <a href="/{{ page.lang }}/blog/example.html">Example Post</a>
+                          </li>
                       </ul>
                   </li>
               </ul>

diff --git a/_layouts/blog-posts.html b/_layouts/blog-posts.html
@@ -9,16 +9,15 @@
   <body>
 
     <section class="content">
-      <h1>BLOG POSTS LAYOUT</h1>
 
       {% include header/header-{{ page.lang }}.html %}
 
-      {% include blog/menu.md %}
+      {% include blog/example-menu.md %}
 
       <div id="overlay"></div>
-
+      <div id="blog-doc" markdown="1">
       {{ content }}
-
+      </div>  
     </section>
 
     {% include footer/footer-{{ page.lang }}.html %}

diff --git a/css/style.css b/css/style.css
@@ -741,6 +741,7 @@ footer {
 /* secondary menu */
 
 #menu,
+#tags-side-menu,
 #blog-side-menu {
   position: fixed;
   margin: 0;
@@ -754,43 +755,53 @@ footer {
 }
 
 #menu em,
-#blog-side-menu em {
+#tags-side-menu em,
+#blog-side-menu em{
   font-weight: bold;
   color: #888;
 }
 
-#menu li,
-#blog-side-menu li {
+#menu li {
   list-style: none;
 }
+#tags-side-menu li {
+  list-style: none;
+  font-size: 15px;
+  font-weight: bold;
+}
 
 #menu ul,
-#blog-side-menu ul {
+#tags-side-menu ul {
   height: 0;
   overflow: hidden;
 }
 
 #menu ul.active,
-#blog-side-menu ul.active {
+#tags-side-menu ul.active {
   height: auto;
   padding: 0;
 }
 
 #menu > li > a,
+#tags-side-menu > li > a,
 #blog-side-menu > li > a {
   color: #353535;
   font-weight: bold;
   font-size: 15px;
 }
 
 #menu ul a,
-#blog-side-menu ul a {
+#tags-side-menu ul a {
   color: #555;
   padding-right: 7px;
 }
+#tags-side-menu ul a{
+  font-size: 13px;
+  font-weight:initial;
+}
 
 #menu ul a.active,
-#blog-side-menu ul a.active {
+#tags-side-menu ul a.active {
   color: #259dff;
 }
 
@@ -898,7 +909,7 @@ h2 a {
   }
 
   #menu,
-  #blog-side-menu {
+  #tags-side-menu {
     display: none;
   }
 
@@ -1217,7 +1228,8 @@ h2 a {
   color: #5E80F7;
   text-decoration: none;
 }
-#page-doc:has(> h1#express-blog) {
+#blog-doc:has(> h1#express-blog), 
+#blog-doc:has(> h1#write-a-blog-post) {
   min-height: 300px;
   overflow-y: scroll;
 }
@@ -1231,6 +1243,13 @@ h2 a {
   background-color: #eee;
   display: flex;
   padding: 10px;
+  box-shadow: 2px 3px #E0E0E0;
+  border-radius: 5px;
+  transition: 0.3s;
+}
+.blog-post:hover {
+  background-color: #D3D3D3;
+  border: 1px solid grey;
 }
 .blog-post.active {
   height: 300px;

diff --git a/css/theme.css b/css/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_header_text: silver;
   --dark_inner_text: grey;
+  --dark_bright_text: wheat;
+  --dark_border: #ddd;
   --link: #259dff;
 }
 #theme-icon-container {
@@ -163,6 +166,9 @@ body.dark-mode #menu li ul li > em {
 body.dark-mode #menu li ul li > a {
   color: var(--dark_inner_text);
 }
+body.dark-mode #tags-side-menu ul li > a  {
+  color: var(--dark_inner_text);
+}
 body.dark-mode #api-doc > h3 {
   color: var(--dark_header_text);
 }
@@ -222,4 +228,23 @@ body.dark-mode .ds-suggestion.ds-cursor .algolia-docsearch-suggestion--title,
 body.dark-mode .ds-suggestion.ds-cursor .algolia-docsearch-suggestion--content{
   background-color: var(--dark_hover);
 }
-
+body.dark-mode .blog-post{
+  background-color: initial;
+  border: 1px solid var(--dark_border);
+  transition: 0.3s;
+} 
+body.dark-mode .blog-post:hover{
+  background-color: var(--darker_hover);
+}
+body.dark-mode .blog-title > a{
+  color: var(--dark_text);
+} 
+body.dark-mode .blog-title > a{
+  color: var(--dark_text);
+} 
+body.dark-mode .blog-excerpt{
+  color: var(--dark_bright_text);
+} 
+body.dark-mode #blog-side-menu > li > a{
+  color: var(--dark_header_text);
+}
diff --git a/en/blog/write.md b/en/blog/write.md
@@ -0,0 +1,53 @@
+---
+layout: blog-posts
+title: Write a Blog Post
+menu: blog
+lang: en
+redirect_from: "/blog/write.html"
+---
+
+# Write A Blog Post
+
+## Have an idea for a blog post? Write a post and make a PR.
+
+Check out an example [post](/{{ page.lang }}/blog/example.html)
+
+- ### Setup the Repository 
+A local installation will be required it you want to preview your post. [Here](https://github.com/expressjs/expressjs.com?tab=readme-ov-file#expressjscom) are the instructions for running locally. 
+
+- ### Create a new file in the `_posts` directory
+Create a new file and save it following the format: `YYYY-MM-DD-title.md`. The date should be the date of your post.
+
+- ### Adding the Required Front Matter
+    The following front matter are required for each post. At the top of the file you just created, add the following:
+
+    ```yaml
+    ---
+    layout: blog-post
+    title: "<your-title>"
+    sub_title: "<your-sub-title>"
+    menu: blog
+    date: <date-matching_filename>
+    tags: <white-space-seperated-topics>
+    author: <your-name>
+    img: <path-or-url-to-image>
+    lang: en
+    excerpt_separator: <!--more-->
+    ---
+    ```
+
+- ### Add your Content
+    Finally, start writing your content. Format your content as follows, including the title and subtitle, and the `<!--more-->` following your first paragraph.
+
+    ```markdown
+    {% raw %}
+    # {{page.title}}
+
+    ### {{page.sub_title}}
+    {% endraw %}
+    Lorem ipsum dolor sit amet...
+    <!--more-->
+
+    ivamus lacinia sollicitudin turpis sed porta. Ut commodo, orci eget congue dictum, sapien est scelerisque ante, 
+    vehicula ultricies ipsum justo in quam. Aliquam pretium diam vitae neque eleifend laoreet. 
+    ```
diff --git a/js/app.js b/js/app.js
@@ -152,14 +152,11 @@ $(function(){
     }
 
   })
-  // show/hide blog side menu link
-  if (window.location.pathname.includes('/blog/posts.html')) {
-    $('#blog-side-menu').find('h3').on('click', function() {
-        // Remove prev 'active's 
-        $(this).next().siblings().removeClass('active');
-        $(this).next().addClass('active')
-      })
-  }
+  $('#tags-side-menu li').on('click', function() {
+      // Remove prev 'active's 
+      $(this).next().siblings().removeClass('active');
+      $(this).next().addClass('active')
+    })
 
   // show mobile menu
   $('#nav-button, #overlay').click(function () {