Website Vlog Update - 03 // Blog previews, GitHub Code QL
A running progress track of how I'm building this site.
TikTok link & Readme.mdยง
TikTok โ Feels a little weird to write about adding a link, but it was the right time to bring TikTok to the About page. Good things are happening over there. โ @rushinglabs
Readme โ I hope I can remember to continue keeping the README updated. Not much to say here; it's all over there ๐
Check the About page!
Blog previewยง
I wanted to be able to show a preview of the post's content directly inline with the list of blog posts. This is commonly done on blogs, but I just hadn't taken the time to finish this feature. A slight quirk though, I am using gray-matter to parse the frontmatter metadata packaged with each post. Which means this frontmatter is a block of YAML.
I quickly figured out that line breaks aren't valid in YAML properties by themselves. However, with a little
bit of special syntax (see the |-
next to preview
) the line breaks are completely fine. This
StackOverflow
post has a good reference for multi-line YAML:
https://stackoverflow.com/questions/3790454/how-do-i-break-a-string-in-yaml-over-multiple-lines/21699210
---
date: "2021-12-17"
title: "Website Vlog Update - 03"
section: ''
preview: |-
Tracking progress, learning quite a bit.
---
In addition to this "preview", there's also a new "Read More" link below the preview for each post. This is the same link that the post title has, but it felt like it made sense to include a call to action here.
The preview and 'Read More' link are on every post listing now.
Code QLยง
Code QL โ https://codeql.github.com/
Code QL is a free SAST tool from GitHub, and available to integrate directly within your repo(s). I haven't started to dive into it yet, but I made sure to incorporate it into the site so it's there. Integrating it is easy too, just head to the "Security" tab on your GitHub repo, click "Set up this workflow", and the commit is already written for you.
The Code QL workflow runs automatically on every pull request, although depending on what language and how much code, it could take some time to complete the scan.
Expect to see more of this in later posts ๐
You can find this on the 'Security' tab for GitHub repos.
Check out the video to see moreยง
Referencesยง
- gray-matter: https://www.npmjs.com/package/gray-matter
- StackOverflow, YAML multi-lines: https://stackoverflow.com/questions/3790454/how-do-i-break-a-string-in-yaml-over-multiple-lines/21699210
- CodeQL: https://codeql.github.com/