One common thing I see is where blogs are just a bunch of articles stacked in a list, like on microlink.io. I really don't think this is the best way to go about it, especially as the number of blog articles scales. The blog should not only be searchable, but also have topics to select from in some sort of way that effectively communicates which topics are available, like on kentcdodds.com. Search bars are a great tool for the right scenarios, but some people won't know what to search for, hence why we give them a "preview" of what's available with the topic selectors.
With the above said, let's still have a list of article (as table rows) and update the rows based on the tags/topic selectors and search bar.
Content Page
This is where the actual blog content will go. It will have a title, some sort of tiny display between the title and content for publish date and maybe tags, and the markdown renderer and article content. That's really it, aside from the header/footer.
Header/Footer
Will apply to all content pages and either the whole thing or parts of it will apply to the homepage.
MVP To Do
[x] Set up subdomain (DNS record, Vercel project)
[x] Decide on a markdown preprocessor or renderer. Do I want to support MDX? Can use mdsvex as my preprocessor if so.
Update: definitely want to use mdsvex. Benefits are that I have a feeling I would end up using dynamic content in my markdown if it helps to educate a concept better. For example, including a chart or graph, or maybe a moving graph. When the benefits are strong and there are no cons (i.e., no performance overhead because of no runtime (everything is compiled at build time) and you can opt-in to components, i.e., regular markdown's simplicity remains).
mdsvex also supports remark plugins, and one I am keen on integrating is remark-gfm which would support all the features I love from GFM on my own site.
[x] Initial Implementation
[ ] Link in my personal GitHub README bio
Notes
Make use of Svelte's HTML tag (<p>{@html string}</p>) to insert the generated HTML
camball
commented
1 month ago
Design
Landing Page
One common thing I see is where blogs are just a bunch of articles stacked in a list, like on microlink.io. I really don't think this is the best way to go about it, especially as the number of blog articles scales. The blog should not only be searchable, but also have topics to select from in some sort of way that effectively communicates which topics are available, like on kentcdodds.com. Search bars are a great tool for the right scenarios, but some people won't know what to search for, hence why we give them a "preview" of what's available with the topic selectors.
With the above said, let's still have a list of article (as table rows) and update the rows based on the tags/topic selectors and search bar.
Content Page
This is where the actual blog content will go. It will have a title, some sort of tiny display between the title and content for publish date and maybe tags, and the markdown renderer and article content. That's really it, aside from the header/footer.
Header/Footer
Will apply to all content pages and either the whole thing or parts of it will apply to the homepage.
MVP To Do
[x] Set up subdomain (DNS record, Vercel project)
[x] Decide on a markdown preprocessor or renderer. Do I want to support MDX? Can use
mdsvexas my preprocessor if so.Update: definitely want to use
mdsvex. Benefits are that I have a feeling I would end up using dynamic content in my markdown if it helps to educate a concept better. For example, including a chart or graph, or maybe a moving graph. When the benefits are strong and there are no cons (i.e., no performance overhead because of no runtime (everything is compiled at build time) and you can opt-in to components, i.e., regular markdown's simplicity remains).mdsvexalso supports remark plugins, and one I am keen on integrating isremark-gfmwhich would support all the features I love from GFM on my own site.[x] Initial Implementation
[ ] Link in my personal GitHub README bio
Notes
<p>{@html string}</p>) to insert the generated HTML