| title | date | tags | author | previewText | |||
|---|---|---|---|---|---|---|---|
How to write blogposts |
2024-02-01 |
|
Timo |
Blogposts are a cool way of presenting content. In this article you will learn how to easily create your own blogposts using Markdown. |
- New blogposts should be placed under
website-new/blogposts/ - Each file represents one blogpost
- The file has to be named
{postId}.mdin order to be recognized by the Markdown renderer - The
postIdwill also be used as an url segment for the link to the post:unit214.de/blog/{postId}. Therefore,- use a meaningful name
- use Kebab Case for the
postId, e.g.how-to-write-blogposts.md
- After creating a new file or renaming an existing file, please restart the dev server. After changing something in the file, reloading the page is sufficient.
Every blogpost requires a frontmatter, containing its metadata:
---
title: 'Mastering Full-Stack Development: Bridging Frontend and Backend Excellence'
date: '2024-01-03'
tags: ['Tag 1', 'Tag 2']
author: 'Timo'
previewImage: '/blogposts/preview/mastering-full-stack-development.png'
previewText: Unlock secrets of seamless Full-Stack Development. Harmonize frontend and backend technologies for robust, dynamic web applications.
---
// file content
title: string: Title of the post, will be displayed in the preview and on top of the blog post pagedate: string: Date of the post, will be displayed in the preview and on top of the blog post page.- All blogposts will be sorted by their dates. A click on "Next Post" at the bottom of a post reveals the next recent blogpost. A click on "Previous Post" reveals the most previous blogpost.
- If you have multiple blogposts on the same day you can use a more specific date string with time (e.g.
2024-01-02T12:00:00) to sort them.
tags: [string]: Tags of the post, will be displayed on top of the blog post pageauthor: string: Author of the post, will be displayed in the preview and on top of the blog post pagepreviewImage: string (optional): Path to the image that will be displayed in the preview on the home page. It's recommended to place the preview image into/public/blogposts/previewand name it as the blogpost's.mdfile. If nopreviewImageis specified,default.jpgwill be used.previewText: string: Text that will be displayed in the preview of the home page. Describe what your post is about.
- After the required metadata on the top, the post content will be rendered.
- Hereby you are free to create your own structure and styling using Markdown. The Markdown renderer supports GitHub flavoured markdown meaning that everything that works on GitHub should also work here.
- As the title of the blogpost defined in the metadata is rendered as a
<h1>element, consider starting with h2 (##) in your content (not mandatory). - Headline links used as anchor links (e.g. for TOC) are autogenerated during render process. It's normally the headline name in Kepab Case.
- You can write the markdown file with the editor of your choice. However, before releasing it make sure to render it once using the dev server of the website (see README.md) to check if everything works and looks as intended.
- Use
feat(blog)as a commit type.
To help you write your blogpost you can find a Markdown Cheatsheet in the following:
# H1
## H2
### H3
#### H4
##### H5
###### H6
Alternatively, for H1 and H2, an underline-ish style:
Alt-H1
======
Alt-H2
------
Alternatively, for H1 and H2, an underline-ish style:
Emphasis, aka italics, with *asterisks* or _underscores_.
Strong emphasis, aka bold, with **asterisks** or __underscores__.
Combined emphasis with **asterisks and _underscores_**.
Strikethrough uses two tildes. ~~Scratch this.~~
Emphasis, aka italics, with asterisks or underscores.
Strong emphasis, aka bold, with asterisks or underscores.
Combined emphasis with asterisks and underscores.
Strikethrough uses two tildes. Scratch this.
(In this example, leading and trailing spaces are shown with with dots: ⋅)
1. First ordered list item
2. Another item
⋅⋅⋅* Unordered sub-list.
1. Actual numbers don't matter, just that it's a number
⋅⋅⋅1. Ordered sub-list
4. And another item.
⋅⋅⋅You can have properly indented paragraphs within list items. Notice the blank line above, and the leading spaces (at least one, but we'll use three here to also align the raw Markdown).
⋅⋅⋅To have a line break without a paragraph, you will need to use two trailing spaces.⋅⋅
⋅⋅⋅Note that this line is separate, but within the same paragraph.⋅⋅
⋅⋅⋅(This is contrary to the typical GFM line break behaviour, where trailing spaces are not required.)
* Unordered list can use asterisks
- Or minuses
+ Or pluses
-
First ordered list item
-
Another item
- Unordered sub-list.
-
Actual numbers don't matter, just that it's a number
- Ordered sub-list
-
And another item.
You can have properly indented paragraphs within list items. Notice the blank line above, and the leading spaces (at least one, but we'll use three here to also align the raw Markdown).
You have a line break without a paragraph, you will need to use two trailing spaces.
Note that this line is separate, but within the same paragraph.
(This is contrary to the typical GFM line break behaviour, where trailing spaces are not required.)
- Unordered list can use asterisks
- Or minuses
- Or pluses
* [ ] to do
* [x] done
- [ ] to do
- [x] done
- to do
- done
- to do
- done
[I'm an inline-style link](https://www.google.com)
[I'm an inline-style link with title](https://www.google.com "Google's Homepage")
[I'm a reference-style link][Arbitrary case-insensitive reference text]
[I'm a relative reference to another blogpost](/blog/example-1)
[You can use numbers for reference-style link definitions][1]
Or leave it empty and use the [link text itself].
URLs and URLs in angle brackets will automatically get turned into links.
www.example.com, https://example.com, and [email protected].
Some text to show that the reference links can follow later.
[arbitrary case-insensitive reference text]: https://www.mozilla.org
[1]: http://slashdot.org
[link text itself]: http://www.reddit.com
I'm an inline-style link with title
I'm a relative reference to another blogpost
You can use numbers for reference-style link definitions
Or leave it empty and use the link text itself.
URLs and URLs in angle brackets will automatically get turned into links. www.example.com, https://example.com, and [email protected].
Some text to show that the reference links can follow later.
Here's our logo (hover to see the title text), taken from the public folder of the repo:
Inline-style:
Reference-style:
![alt text][logo]
[logo]: /blogposts/preview/default.jpg "Logo Title Text 2"
To change an images size use the `<img>` element:
<img src="/blogposts/preview/default.jpg" width="200" height="100"></img>
You can also use external links as images:
Like links, Images also have a footnote style syntax
![Alt text][id]
With a reference later in the document defining the URL location:
[id]: https://octodex.github.com/images/dojocat.jpg "The Dojocat"
Here's our logo (hover to see the title text), taken from the public folder of the repo:
Inline-style:
Reference-style:
To change an images size use the <img> element:
You can also use external links as images:
Like links, Images also have a footnote style syntax
With a reference later in the document defining the URL location:
Footnote 1 link[^first].
Footnote 2 link[^second].
Duplicated footnote reference[^second].
[^first]: Footnote **can have markup**
and multiple paragraphs.
[^second]: Footnote text.
Footnote 1 link1.
Footnote 2 link2.
Duplicated footnote reference2.
Inline `code` has `back-ticks around` it.
Inline code has back-ticks around it.
using System.IO.Compression;
#pragma warning disable 414, 3021
namespace MyApplication
{
[Obsolete("...")]
class Program : IInterface
{
public static List<int> JustDoIt(int count)
{
Console.WriteLine($"Hello {Name}!");
return new List<int>(new int[] { 1, 2, 3 })
}
}
}@font-face {
font-family: Chunkfive;
src: url('Chunkfive.otf');
}
body,
.usertext {
color: #f0f0f0;
background: #600;
font-family: Chunkfive, sans;
}
@import url(print.css);
@media print {
a[href^='http']::after {
content: attr(href);
}
}function $initHighlight(block, cls) {
try {
if (cls.search(/\bno\-highlight\b/) != -1)
return process(block, true, 0x0F) +
` class="${cls}"`;
} catch (e) {
/* handle exception */
}
for (var i = 0 / 2; i < classes.length; i++) {
if (checkCondition(classes[i]) === undefined)
console.log('undefined');
}
}
export $initHighlight;require_once 'Zend/Uri/Http.php';
namespace Location\Web;
interface Factory
{
static function _factory();
}
abstract class URI extends BaseURI implements Factory
{
abstract function test();
public static $st1 = 1;
const ME = "Yo";
var $list = NULL;
private $var;
/**
* Returns a URI
*
* @return URI
*/
static public function _factory($stats = array(), $uri = 'http')
{
echo __METHOD__;
$uri = explode(':', $uri, 0b10);
$schemeSpecific = isset($uri[1]) ? $uri[1] : '';
$desc = 'Multi
line description';
// Security check
if (!ctype_alnum($scheme)) {
throw new Zend_Uri_Exception('Illegal scheme');
}
$this->var = 0 - self::$st;
$this->list = list(Array("1"=> 2, 2=>self::ME, 3 => \Location\Web\URI::class));
return [
'uri' => $uri,
'value' => null,
];
}
}
echo URI::ME . URI::$st1;
__halt_compiler () ; datahere
datahere
datahere */
datahereColons can be used to align columns.
| Tables | Are | Cool |
| ------------- |:-------------:| -----:|
| col 3 is | right-aligned | $1600 |
| col 2 is | centered | $12 |
| zebra stripes | are neat | $1 |
There must be at least 3 dashes separating each header cell.
The outer pipes (|) are optional, and you don't need to make the
raw Markdown line up prettily. You can also use inline Markdown.
Markdown | Less | Pretty
--- | --- | ---
*Still* | `renders` | **nicely**
1 | 2 | 3
| First Header | Second Header |
| ------------- | ------------- |
| Content Cell | Content Cell |
| Content Cell | Content Cell |
| Command | Description |
| --- | --- |
| git status | List all new or modified files |
| git diff | Show file differences that haven't been staged |
| Command | Description |
| --- | --- |
| `git status` | List all *new or modified* files |
| `git diff` | Show file differences that **haven't been** staged |
| Left-aligned | Center-aligned | Right-aligned |
| :--- | :---: | ---: |
| git status | git status | git status |
| git diff | git diff | git diff |
| Name | Character |
| --- | --- |
| Backtick | ` |
| Pipe | \| |
Colons can be used to align columns.
| Tables | Are | Cool |
|---|---|---|
| col 3 is | right-aligned | $1600 |
| col 2 is | centered | $12 |
| zebra stripes | are neat | $1 |
There must be at least 3 dashes separating each header cell. The outer pipes (|) are optional, and you don't need to make the raw Markdown line up prettily. You can also use inline Markdown.
| Markdown | Less | Pretty |
|---|---|---|
| Still | renders |
nicely |
| 1 | 2 | 3 |
| First Header | Second Header |
|---|---|
| Content Cell | Content Cell |
| Content Cell | Content Cell |
| Command | Description |
|---|---|
| git status | List all new or modified files |
| git diff | Show file differences that haven't been staged |
| Command | Description |
|---|---|
git status |
List all new or modified files |
git diff |
Show file differences that haven't been staged |
| Left-aligned | Center-aligned | Right-aligned |
|---|---|---|
| git status | git status | git status |
| git diff | git diff | git diff |
| Name | Character |
|---|---|
| Backtick | ` |
| Pipe | | |
> Blockquotes are very handy in email to emulate reply text.
> This line is part of the same quote.
Quote break.
> This is a very long line that will still be quoted properly when it wraps. Oh boy let's keep writing to make sure this is long enough to actually wrap for everyone. Oh, you can *put* **Markdown** into a blockquote.
> Blockquotes can also be nested...
>> ...by using additional greater-than signs right next to each other...
> > > ...or with spaces between arrows.
Blockquotes are very handy in email to emulate reply text. This line is part of the same quote.
Quote break.
This is a very long line that will still be quoted properly when it wraps. Oh boy let's keep writing to make sure this is long enough to actually wrap for everyone. Oh, you can put Markdown into a blockquote.
Blockquotes can also be nested...
...by using additional greater-than signs right next to each other...
...or with spaces between arrows.
<dl>
<dt>Definition list</dt>
<dd>Is something people use sometimes.</dd>
<dt>Markdown in HTML</dt>
<dd>Does *not* work **very** well. Use HTML <em>tags</em>.</dd>
</dl>
- Definition list
- Is something people use sometimes.
- Markdown in HTML
- Does *not* work **very** well. Use HTML tags.
Three or more...
---
Hyphens
***
Asterisks
___
Underscores
Three or more...
Hyphens
Asterisks
Underscores
They can't be added directly but you can add an image with a link to the video like this:
<a href="http://www.youtube.com/watch?feature=player_embedded&v=YOUTUBE_VIDEO_ID_HERE" target="_blank">
<img src="http://img.youtube.com/vi/YOUTUBE_VIDEO_ID_HERE/0.jpg" alt="IMAGE ALT TEXT HERE" width="240" height="180" border="10" />
</a>
Or, in pure Markdown, but losing the image sizing and border:
[](http://www.youtube.com/watch?v=YOUTUBE_VIDEO_ID_HERE)