Express Blog

[chrisdel101]

So hoping you can live preview this before making it live. With that in mind, I've not added any photos.

The feature includes the /posts page, the /write-posts page, and the /example-post page. The last two are very similar. If they are too similiar we can get rid of the latter. You can visit the individual posts themselves by clicking on the title Review item: Would you rather have the entire div clickable? Or okay as is?

There are some changes made to the search bar to make it fit with added list items. It's only been tested on mac, so hopefully it works on windows.

The gutter menu is just another listing of the blog links. There is also a menu for tags, but since there are not enough tags, this isn't super useful right now. If it's okay to just leave this unused, great. Else, we can delete it from the code base.

Last, there are 3 dummy posts used to populate the posts page. After preview reviewing is complete, we will need to delete those as they are only for the purposes of review. Those are the ones entitled sample-post.

If there are no posts this is what displays

Let me know if you find any bugs :) PS - I have no idea what those build errors mean. PSS - I added some comments to the files so you know what they are doing (I seriously hope you did not get notifications for all of those! If you did, sorry!) Also, I assigned you guys to this PR. I hope that's okay :)

[netlify[bot]]

✅ Deploy Preview for expressjscom-preview ready!

Name	Link
🔨 Latest commit	bfa2fc75f93389ce58ec8866244189404e97b53c
🔍 Latest deploy log	https://app.netlify.com/sites/expressjscom-preview/deploys/669725d372aaad0008bc2203
😎 Deploy Preview	https://deploy-preview-1519--expressjscom-preview.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[crandmck]

This is great @chrisdel101 thanks for all the work! I think this PR will take a while to land, but it will be an excellent addition to the site.

Unfortunately, landing #1521 has caused some merge conflicts, which you'll need to fix. Sorry about that...

The feature includes the /posts page, the /write-posts page, and the /example-post page. The last two are very similar. If they are too similiar we can get rid of the latter.

I think /write-posts is sufficient, and looks good. You can omit /example-post IMO. I should probably put this inline, but "A local installation will be required it you want to preview your post" is no longer true since we now have Netlify previews on PRs. Could you please add that?

You can visit the individual posts themselves by clicking on the title Review item: Would you rather have the entire div clickable? Or okay as is?

It's fine as is IMO.

Also, I had in mind listing the posts somewhere, for example in the left gutter, under "Posts" but indented a bit? Then I guess "Write a post" would be at the top. LMK if that's unclear.

There are some changes made to the search bar to make it fit with added list items. It's only been tested on mac, so hopefully it works on windows.

I don't have access to a Windows machine, but maybe we can find someone who does before landing this.

The gutter menu is just another listing of the blog links.

All I see is: Posts Write a Post Example Post

It should list the titles of all the posts, e.g. Express And AI: Using LLMs, etc.

There is also a menu for tags, but since there are not enough tags, this isn't super useful right now. If it's okay to just leave this unused, great. Else, we can delete it from the code base.

In the long run, having tags will be useful so lets keep it for now. I didn't get a chance to review this part of the PR yet, but I will at some point.

Last, there are 3 dummy posts used to populate the posts page. After preview reviewing is complete, we will need to delete those as they are only for the purposes of review. Those are the ones entitled sample-post.

Yes, that makes total sense.

I think before landing this we should also have a first "real" post that's just a simple "Welcome to the Express blog" that you & I can write jointly. I'd like to explain the goals of the blog and explain that initially posts will be written by TC members (potentially with others), purely for the reason that we don't have bandwidth to review general posts from the broader community atm. Eventually, we want to, but for now the focus is on trying to release 5.0, and everyone just has finite time to work on the project. IMO others can potentially contribute to a post written by one or more TC members, (for example, this initial post). The @expressjs/express-tc discussed the blog previously, but I'd like to discuss the specifics a bit more the next time we have a chance.

For example: What are the goals of the blog?

I propose that it can be an avenue:

• For the Express TC to discuss issues of particular importance to the Express community other than social media (X/Twitter, etc).
• For periodic information on new releases, pre-releases, plans, and ongoing work on the project.
• To highlight security issues or other urgent info.

[chrisdel101]

I fixed most of what that you suggested. And I added a Welcome Post. I wasn't totally sure what to write there, so feel free to critique that.

The contribution process content is not fixed. I don't really understand this. Can you explain how people will submit posts? It requires a branch/fork to PR from, so I'm not totally clear on that. Once you explain it I'll make that change.

One small issue on FF for mac. At a certain point in the resizing the search bar is squished. I'm not sure I can do much about this here, unless we want to do a navbar re-vamp. Can we get away with this?

[crandmck]

Thanks @chrisdel101

Sorry I haven't had a chance to comment on this, just been slammed at work.

Re the content of the first post, would you mind if I edited it in your branch/fork? That would probably be the easiest way to collaborate on it.

Here is some background from earlier discussion: https://github.com/expressjs/expressjs.com/issues/1500#issuecomment-2089542343

The contribution process content is not fixed. I don't really understand this. Can you explain how people will submit posts? It requires a branch/fork to PR from, so I'm not totally clear on that. Once you explain it I'll make that change.

Basically, it's the same process as any PR. But I think we should ask people to open an issue first so the topic can be discussed. And only after it's been informally approved in the issue, then open a PR. What we don't want is a bunch of contributions of posts on random topics that require a lot of time for the TC to work on, as we have just don't have the bandwidth for that.

One small issue on FF for mac. At a certain point in the resizing the search bar is squished. I'm not sure I can do much about this here, unless we want to do a navbar re-vamp. Can we get away with this?

I think it's OK, because as you narrow the window the layout quickly changes to the narrow/mobile one with the hamburger menu. Also I wonder if this would obviate this problem: https://github.com/expressjs/expressjs.com/pull/1522 ?

One other small comment which I thought I mentioned before but just got lost along the way... In Write A Blog Post/ Setup the Repository:

A local installation will be required it you want to preview your post....

This is no longer true now that we have deploy previews. Once you open a PR you can see how it looks in the deploy preview.

[chrisdel101]

So I've

• redone the instructions about how to create a post, but I'm still not sure if that is correct. Please review the text on the write-post page, bullet point 1.

  • If it's not correct, perhaps you could write this section? The problem I think is mainly with bullet point 1. All the rest should be okay.

• I added a point about how to include an image too, which we would expect every post to have. Posts must include a valid image in the img field. Either put your image (jpg or png) file into the /images/blog/ directory, or reference it via URL.

  • It can get very finicky with the way images look, but I thought to be as low maintenance as possible meaning they can all kind of look the same (on /blog/posts). If we wanted them all the same, this would require hard-coding width and height (I believe).

• I fixed the gutter to be more appropriate, and just adjusted the color a bit there to be a lighter dark gray/

• I increased the font size of the actual post itself by around 1 px since it seemed hard to read (to me).

• I re-vamped the headers in each post to make them more varied (h1, h2, h4).

Do no hesitate to point out errors or corrections :)

[chrisdel101]

Also, I just pushed a new first line to the /write-post instructions. We might want to consider adding a blog-post to the issues types, if this becomes the accepted workflow.

1. Propose your Post

Before taking the time to write a post, please confirm that we will be able to publish it. We're looking for topics related very specifically to Express, and so we want to pre-approve all posts. For the moment, this means we aren't excepting any unsolicited posts.

• If you have an idea, please ask for approval first by opening an issue entitled Blog Post Idea <your idea>.

[chrisdel101]

@crandmck Just added another bullet about how we can use the preview feature as a development tool for authors. Let me know if it's not going to work.

If you do not have the app running locally, this is where you will be able to preview your results. After you make your PR, there will be a section on the page entitled Deploy Preview for expressjscom-preview ready! Click here to see your work.

You can use this feature over multiple commits to refine your post, just make sure to open your pull request as a draft. Once it’s ready for review, switch it to a formal PR.

So as far as I can tell, there is no possible way to authors to write a post without forking the repo. The only step they do not need to complete, that a developer would, is actually getting the app running. They still need to have the code to make the PR, but can use this draft PR method to avoid running things locally.

[chrisdel101]

Added updated content to Welcome Post based on #1500

Sorry to keep updating things. Keep finding improvements. Hopefully this will be the last.

[crandmck]

OK, it's coming along nicely... I edited the first post in your fork/branch. I removed the subtitle from this post, as it didn't seem to add anything.

One thing that I question is the requirement to have an image for each blog post. Images are great, but should they really be required?

[chrisdel101]

I've removed the image. I think it has to be either/or considering our simple setup.

Re: sub title. You'll have noticed that removing the sub title makes the characters "##" render on the page. It would need logic code to block this. Example:

Without adding code to the post templates, which authors would also need to add, we cannot have optional fields (Technically it might be possible but probably not worth it for such a feature). The templates should probably be markdown only (i.e. not have any code in them)

So all fields are mandatory. I should prob put an instruction stating this in the guide

Do we want sub title removed overall then? Otherwise your post has to have it.

[chrisdel101]

and i need to remove all the stuff related to image ( maybe subtitle) from the text still too. once you review it.

[crandmck]

Sorry it's taken me so long to get to this. Life...

Anyway, I made a few more commits to the fork/branch. As you can see, I updated the layout to do some of the work, so you no longer have to put the title & subtitle in two places, and subtitle is optional. I update the site config to set some defaults. I want to make a few more tweaks along these lines, but don't have time atm.

I'll try to work on it again within the next couple days. I think we're getting close, just a little more polish and it should be good for a first cut.

[crandmck]

@chrisdel101 Could you please resolve the merge conflicts in css/theme.css? Then we can see the changes in the deploy preview. I guess this is a result of some other PR that was recently merged ...

[carlosstenzel]

I tried to help, but I'm not allowed to resolve conflicts :(

I can create a view-only PR if that helps

https://github.com/expressjs/expressjs.com/pull/1529

[chrisdel101]

Good idea using the layout to solve the problem. I moved all the logic there expect the basic stuff. I updated the writing guide too. The CSS on the hover state could be a bit nicer, so I can try work on that. unless you're good at nice hover UIs.

[chrisdel101]

lowered transition time and I think it looks better.

[crandmck]

Just a note to say that I want to work with this, and I have a few final changes in mind, but I've been down and out with Covid for the last week.
This PR is getting close to being good to go.

[crandmck]

I made a bunch more changes to the fork/branch:

• Changed the blog menu to link to the most recent post, not list of all posts (which is no longer used, but I left blog/posts.md there for now. There might be a better way to do this, but for now it should suffice. For several reasons, I think the main blog page should show only the most recent post; for example SEO. The sidebar posts menu provides access to all the other posts.
• Made some general cleanup edits to "How to write a blog post" and added a small illustration (generated with Adobe Firefly).
• For now, let's assume blog posts won't be translated. I think I removed all the lang refs, but need to check for consistency.

Currently, there's an error in the terminal when the image is loaded

ERROR `/images/[email protected]' not found.

I assume this is something to do with media queries. Not sure if it's anything we need to fix or if we can just ignore it.

At this point, I think this PR is "done enough" to prepare it for final review and merging:

1. Remove the "dummy" posts from _posts
2. Change the date in _posts/2024-05-25-welcome-post.md and perhaps change the file name as well.
3. Any other final edits?

[chrisdel101]

These are some significant changes. By removing the conditional statement from the post.html the subtitle shows up on the main page. I don't think we want this.

But if your wanting to get rid of the blog posts main listing page entirely, /posts, then the above issue doesn't matter. Otherwise we need that conditional, or another piece of logic.

For me, a link called posts in the nav, linking to a single post, is misleading, while the side menu link also called posts links to a lists of all posts? Posts should have one meaning.
Perhaps removing the dropdown would be the way to go? Then only access would be to the newest post from there by clicking blog. And access all others via the side menu - however, this side menu is not visible in mobile - so what then? Also we'd need to add the "write a post" link on each post individually, via the template.

I personally think we should either

• link directly to the all posts from the nav bar, like it is was.
• Or remove the all post page entirely and have the menu show up on each individual post. (Again, how would we navigate on mobile?) Both are some extra work to achieve. But I don't see the point of an all posts page that is not the main entry point to the blog.

We could also keep the all posts page and change the name in the nav bar to like Current Post. But still not sure how we'd navigate to any pages on mobile.

Good idea to add lang back in. This was missing.

Let me know how you want to do it.

Also the nav bar link appears to be broken at the moment in preview.

[chrisdel101]

OR:

• we could list all the posts in the dropdown (and get rid of the all posts page). This would solve navigation.

[crandmck]

Sorry for the scope of the changes @chrisdel101; I just thought it would be easier to demonstrate what I had in mind rather than explain and discuss it. Essentially, the "home page" of a blog should be like the home page/front page of a news site, which always shows the latest/current headline, and not a chronological list of articles like an archive. It's not an exact analogy, since the blog only has one latest article (not a bunch every day like a newspaper), but I think you get the idea.

I modified the /posts page to remove the extra heading, and added a new link to the Blog menu for "All posts". I believe this addresses the mobile access concern, too.

I fixed broken link in the menu, which seems to have been a artifact of how I was linking it.

So, I think I addressed all the concerns you raised. LMK.

I'd love to see a few more styling changes, which I didn't get a chance to do... Otherwise I think we're getting close to being done:

• In the "All posts" listing, it would be nice if the entire div containing the post excerpt was a link (not just the title).
• In the article view, the title of the one you're viewing should be bolded in the sidebar listing

[chrisdel101]

1. So that console issue seems to be related to retinaJS. There other instances in images with 2x in the folder seem to be used elsewhere. I've tried to find a way to stop this from erroring, like using the no-retina tag, but it doesn't work. I've spent some time on this and can't find any simple way to turn this off.

2. remove the active class on the list of posts since we're no longer targeting the first post item.

3. The subtitle issue seems to be fixed. So I deleted the conditional in page.html.

4. Moved out the inline styles on the new image you added into the css file as a best practice. Hope this is okay.

5. The image wasn't looking to good on mobile so I added some styles to fix that. Below is mobile and normal desktop

I'll address the rest of your issues in another commit.

I wanted to post something here to keep the progress from stalling. Now it's me whose sorry this is taking so long. I couldn't find a dev job so I'm spending 40 hours a week doing clerical work. (I'm finding it so much hardeh r to find time to contribute to FOSS after being locked out of tech).

[crandmck]

No worries @chrisdel101, thanks for checking in... Sorry about your situation, but don't lose heart... I wish you best of luck and appreciate your contributions.

This all looks good. Let's make a final TO DO list, and then send this PR off! We can always add more polish, etc., in future PRs.

TO DO BEFORE MERGE:

• Add bolding of post title in sidebar -- blog-post layout.
• Remove 3 "dummy posts"
• Change the date of _posts/2024-05-25-welcome-post.md to to current(ish) date and perhaps change the file name as well.
• ?

LMK if you have any others.

[chrisdel101]

I've made those changes and things are looking pretty good in the preview. A made a few other minor changes, mostly small amounts of margin, and moved some inline styles into the css file for maintainability.

If you see anything out of place let me know and I can fix it before it goes live.

I'll look for a fix to that retina error down the road.

[crandmck]

I think this is ready to merge, thanks so much for all your work @chrisdel101 ....

@UlisesGascon I'm not sure why the check-translation test is failing? Can you help?

Initially, the blog will be English-only and IMO we shouldn't hold it up for i18n. I would just land it, but ideally would like to understand what's going on with this test failure.

[crandmck]

We'll figure out the failing tests later. Thanks for all your work on this @chrisdel101 !