{
	"version": "https://jsonfeed.org/version/1",
	"title": "Site Title",
	"home_page_url": "https://example.com",
	"feed_url": "https://example.com/feed.json",
	"description": "Description of this site",
	"author": {
		"name": "Name Surname",
		"url": "https://example.com/about",
		"avatar": "static/asset/filler/avatar.png"
	},
	"favicon": "/favicon.ico",
	"icon": "/favicon.ico",
	"items": [
		{
			"id": "https://example.com/blog/article/formatting-examples/",
			"url": "https://example.com/blog/article/formatting-examples/",
			"title": "Formatting Examples",
			"content_html":"<h2 id=\"table-of-contents\" tabindex=\"-1\"><a class=\"header-anchor\" href=\"#table-of-contents\"><a href=\"https://github.com/nagaozen/markdown-it-toc-done-right\">Table of Contents</a></a></h2>\n<details>\n<summary><span class=\"details-marker\"></span>Expand to see all sections</summary><nav id=\"toc\" class=\"c-nav__wrapper table-of-contents\"><ul class=\"c-nav -typeTree c-nav__submenu\"><li class=\"c-nav__item\"><a class=\"c-nav__anchor\" href=\"#table-of-contents\">Table of Contents</a></li><li class=\"c-nav__item\"><a class=\"c-nav__anchor\" href=\"#headings\">Headings</a></li><li class=\"c-nav__item\"><a class=\"c-nav__anchor\" href=\"#typography\">Typography</a><ul class=\"c-nav -typeTree c-nav__submenu\"><li class=\"c-nav__item\"><a class=\"c-nav__anchor\" href=\"#subscript-%2F-superscript\">Subscript / Superscript</a></li><li class=\"c-nav__item\"><a class=\"c-nav__anchor\" href=\"#%3Cins%3E\">&lt;ins&gt;</a></li><li class=\"c-nav__item\"><a class=\"c-nav__anchor\" href=\"#footnotes\">Footnotes</a></li><li class=\"c-nav__item\"><a class=\"c-nav__anchor\" href=\"#%3Cmark%3E\">&lt;mark&gt;</a></li><li class=\"c-nav__item\"><a class=\"c-nav__anchor\" href=\"#keyboard-input-element\">Keyboard Input Element</a></li><li class=\"c-nav__item\"><a class=\"c-nav__anchor\" href=\"#attributes\">Attributes</a></li><li class=\"c-nav__item\"><a class=\"c-nav__anchor\" href=\"#typographic-replacements\">Typographic replacements</a></li><li class=\"c-nav__item\"><a class=\"c-nav__anchor\" href=\"#emojis\">Emojis</a></li></ul></li><li class=\"c-nav__item\"><a class=\"c-nav__anchor\" href=\"#emphasis\">Emphasis</a></li><li class=\"c-nav__item\"><a class=\"c-nav__anchor\" href=\"#blockquotes\">Blockquotes</a></li><li class=\"c-nav__item\"><a class=\"c-nav__anchor\" href=\"#lists\">Lists</a></li><li class=\"c-nav__item\"><a class=\"c-nav__anchor\" href=\"#code\">Code</a></li><li class=\"c-nav__item\"><a class=\"c-nav__anchor\" href=\"#tables\">Tables</a><ul class=\"c-nav -typeTree c-nav__submenu\"><li class=\"c-nav__item\"><a class=\"c-nav__anchor\" href=\"#tables-with-multimd-syntax\">Tables with MultiMD Syntax</a></li></ul></li><li class=\"c-nav__item\"><a class=\"c-nav__anchor\" href=\"#links\">Links</a></li><li class=\"c-nav__item\"><a class=\"c-nav__anchor\" href=\"#images\">Images</a></li><li class=\"c-nav__item\"><a class=\"c-nav__anchor\" href=\"#horizontal-rules\">Horizontal Rules</a></li><li class=\"c-nav__item\"><a class=\"c-nav__anchor\" href=\"#media%2Fembed\">Media/Embed</a><ul class=\"c-nav -typeTree c-nav__submenu\"><li class=\"c-nav__item\"><a class=\"c-nav__anchor\" href=\"#local-video\">Local Video</a></li><li class=\"c-nav__item\"><a class=\"c-nav__anchor\" href=\"#local-audio\">Local Audio</a></li><li class=\"c-nav__item\"><a class=\"c-nav__anchor\" href=\"#youtube-embed\">YouTube Embed</a></li></ul></li><li class=\"c-nav__item\"><a class=\"c-nav__anchor\" href=\"#miscelleneous\">Miscelleneous</a><ul class=\"c-nav -typeTree c-nav__submenu\"><li class=\"c-nav__item\"><a class=\"c-nav__anchor\" href=\"#custom-containers\">Custom containers</a></li><li class=\"c-nav__item\"><a class=\"c-nav__anchor\" href=\"#definition-lists\">Definition lists</a></li><li class=\"c-nav__item\"><a class=\"c-nav__anchor\" href=\"#abbreviations\">Abbreviations</a></li><li class=\"c-nav__item\"><a class=\"c-nav__anchor\" href=\"#summary%2Flegend\">Summary/Legend</a></li></ul></li></ul></nav></details>\n<pre><code>[toc]\n</code></pre>\n<!--more-->\n<h2 id=\"headings\" tabindex=\"-1\"><a class=\"header-anchor\" href=\"#headings\">Headings</a></h2>\n<pre class=\"language-md\"><code class=\"language-md\"><span class=\"token title important\"><span class=\"token punctuation\">#</span> h1 Heading</span>\n<span class=\"token title important\"><span class=\"token punctuation\">##</span> h2 Heading</span>\n<span class=\"token title important\"><span class=\"token punctuation\">###</span> h3 Heading</span>\n<span class=\"token title important\"><span class=\"token punctuation\">####</span> h4 Heading</span>\n<span class=\"token title important\"><span class=\"token punctuation\">#####</span> h5 Heading</span>\n<span class=\"token title important\"><span class=\"token punctuation\">######</span> h6 Heading</span></code></pre>\n<h2 id=\"typography\" tabindex=\"-1\"><a class=\"header-anchor\" href=\"#typography\">Typography</a></h2>\n<h3 id=\"subscript-%2F-superscript\" tabindex=\"-1\"><a class=\"header-anchor\" href=\"#subscript-%2F-superscript\"><a href=\"https://github.com/markdown-it/markdown-it-sub\">Subscript</a> / <a href=\"https://github.com/markdown-it/markdown-it-sup\">Superscript</a></a></h3>\n<ul>\n<li>19<sup>th</sup></li>\n<li>H<sub>2</sub>O</li>\n</ul>\n<pre class=\"language-md\"><code class=\"language-md\"><span class=\"token list punctuation\">-</span> 19^th^\n<span class=\"token list punctuation\">-</span> H<span class=\"token strike\"><span class=\"token punctuation\">~</span><span class=\"token content\">2</span><span class=\"token punctuation\">~</span></span>O</code></pre>\n<h3 id=\"%3Cins%3E\" tabindex=\"-1\"><a class=\"header-anchor\" href=\"#%3Cins%3E\"><a href=\"https://github.com/markdown-it/markdown-it-ins\">&lt;ins&gt;</a></a></h3>\n<p><ins>Inserted text</ins></p>\n<pre class=\"language-md\"><code class=\"language-md\">++Inserted text++</code></pre>\n<h3 id=\"footnotes\" tabindex=\"-1\"><a class=\"header-anchor\" href=\"#footnotes\"><a href=\"https://github.com/markdown-it/markdown-it-footnote\">Footnotes</a></a></h3>\n<p>Footnote 1 link<sup class=\"footnote-ref\"><a href=\"#fn1\" id=\"fnref1\">[1]</a></sup>.</p>\n<p>Footnote 2 link<sup class=\"footnote-ref\"><a href=\"#fn2\" id=\"fnref2\">[2]</a></sup>.</p>\n<p>Inline footnote<sup class=\"footnote-ref\"><a href=\"#fn3\" id=\"fnref3\">[3]</a></sup> definition.</p>\n<p>Duplicated footnote reference<sup class=\"footnote-ref\"><a href=\"#fn2\" id=\"fnref2:1\">[2:1]</a></sup>.</p>\n<pre class=\"language-md\"><code class=\"language-md\">Footnote 1 link[^first].\n\nFootnote 2 link[^second].\n\nInline footnote^[Text of inline footnote] definition.\n\nDuplicated footnote reference[^second].\n\n<span class=\"token url-reference url\"><span class=\"token punctuation\">[</span><span class=\"token variable\">^first</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">:</span> Footnote</span> <span class=\"token bold\"><span class=\"token punctuation\">**</span><span class=\"token content\">can have markup</span><span class=\"token punctuation\">**</span></span>\n\n<span class=\"token code keyword\">    and multiple paragraphs.</span>\n\n<span class=\"token url-reference url\"><span class=\"token punctuation\">[</span><span class=\"token variable\">^second</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">:</span> Footnote</span> text.</code></pre>\n<h3 id=\"%3Cmark%3E\" tabindex=\"-1\"><a class=\"header-anchor\" href=\"#%3Cmark%3E\"><a href=\"https://github.com/markdown-it/markdown-it-mark\">&lt;mark&gt;</a></a></h3>\n<p><mark>Marked text</mark></p>\n<pre class=\"language-md\"><code class=\"language-md\">==Marked text==</code></pre>\n<h3 id=\"keyboard-input-element\" tabindex=\"-1\"><a class=\"header-anchor\" href=\"#keyboard-input-element\"><a href=\"https://github.com/jGleitz/markdown-it-kbd\">Keyboard Input Element</a></a></h3>\n<p><kbd>↑</kbd><kbd>↑</kbd><kbd>↓</kbd><kbd>↓</kbd><kbd>←</kbd><kbd>→</kbd><kbd>←</kbd><kbd>→</kbd><kbd>B</kbd><kbd>A</kbd> ; sometimes <kbd>Start</kbd> or <kbd>Select</kbd> is added to the sequence.</p>\n<pre class=\"language-md\"><code class=\"language-md\">[[↑]][[↑]][[↓]][[↓]][[←]][[→]][[←]][[→]][[B]][[A]]<span class=\"token entity named-entity\" title=\"&nbsp;\">&amp;nbsp;</span>; sometimes [[Start]] or [[Select]] is added to the sequence.</code></pre>\n<h3 id=\"attributes\" tabindex=\"-1\"><a class=\"header-anchor\" href=\"#attributes\"><a href=\"https://github.com/arve0/markdown-it-attrs\">Attributes</a></a></h3>\n<p>paragraph <em class=\"u-txtRed\">style me</em> more text</p>\n<pre><code>paragraph *style me*{.u-txtRed} more text\n</code></pre>\n<h3 id=\"typographic-replacements\" tabindex=\"-1\"><a class=\"header-anchor\" href=\"#typographic-replacements\">Typographic replacements</a></h3>\n<p>Enable typographer option to see result.</p>\n<p>© © ® ® ™ ™ (p) (P) ±</p>\n<p>test… test… test… test?.. test!..</p>\n<p>!!! ??? ,  – —</p>\n<p>“Smartypants, double quotes” and ‘single quotes’</p>\n<pre class=\"language-md\"><code class=\"language-md\">Enable typographer option to see result.\n\n(c) (C) (r) (R) (tm) (TM) (p) (P) +-\n\ntest.. test... test..... test?..... test!....\n\n!!!!!! ???? ,,  -- ---\n\n\"Smartypants, double quotes\" and 'single quotes'</code></pre>\n<h3 id=\"emojis\" tabindex=\"-1\"><a class=\"header-anchor\" href=\"#emojis\"><a href=\"https://github.com/markdown-it/markdown-it-emoji\">Emojis</a></a></h3>\n<blockquote>\n<p>Classic markup: 😉 😢 😆 😋</p>\n<p>Shortcuts (emoticons): 😃 😦 😎 😉</p>\n</blockquote>\n<pre class=\"language-md\"><code class=\"language-md\"><span class=\"token blockquote punctuation\">></span> Classic markup: :wink: :cry: :laughing: :yum:\n<span class=\"token blockquote punctuation\">></span>\n<span class=\"token blockquote punctuation\">></span> Shortcuts (emoticons): :-) :-( 8-) ;)</code></pre>\n<p>see <a href=\"https://github.com/markdown-it/markdown-it-emoji#change-output\">how to change output</a> with twemoji.</p>\n<h2 id=\"emphasis\" tabindex=\"-1\"><a class=\"header-anchor\" href=\"#emphasis\">Emphasis</a></h2>\n<p><strong>This is bold text</strong></p>\n<p><strong>This is bold text</strong></p>\n<p><em>This is italic text</em></p>\n<p><em>This is italic text</em></p>\n<p><s>Strikethrough</s></p>\n<pre class=\"language-md\"><code class=\"language-md\"><span class=\"token bold\"><span class=\"token punctuation\">**</span><span class=\"token content\">This is bold text</span><span class=\"token punctuation\">**</span></span>\n\n<span class=\"token bold\"><span class=\"token punctuation\">__</span><span class=\"token content\">This is bold text</span><span class=\"token punctuation\">__</span></span>\n\n<span class=\"token italic\"><span class=\"token punctuation\">*</span><span class=\"token content\">This is italic text</span><span class=\"token punctuation\">*</span></span>\n\n<span class=\"token italic\"><span class=\"token punctuation\">_</span><span class=\"token content\">This is italic text</span><span class=\"token punctuation\">_</span></span>\n\n<span class=\"token strike\"><span class=\"token punctuation\">~~</span><span class=\"token content\">Strikethrough</span><span class=\"token punctuation\">~~</span></span></code></pre>\n<h2 id=\"blockquotes\" tabindex=\"-1\"><a class=\"header-anchor\" href=\"#blockquotes\">Blockquotes</a></h2>\n<blockquote>\n<p>Blockquotes can also be nested…</p>\n<blockquote>\n<p>…by using additional greater-than signs right next to each other…</p>\n<blockquote>\n<p>…or with spaces between arrows.</p>\n</blockquote>\n</blockquote>\n</blockquote>\n<pre class=\"language-md\"><code class=\"language-md\"><span class=\"token blockquote punctuation\">></span> Blockquotes can also be nested...\n<span class=\"token blockquote punctuation\">>></span> ...by using additional greater-than signs right next to each other...\n<span class=\"token blockquote punctuation\">> > ></span> ...or with spaces between arrows.</code></pre>\n<h2 id=\"lists\" tabindex=\"-1\"><a class=\"header-anchor\" href=\"#lists\">Lists</a></h2>\n<p>Unordered</p>\n<ul>\n<li>Create a list by starting a line with <code>+</code>, <code>-</code>, or <code>*</code></li>\n<li>Sub-lists are made by indenting 2 spaces:\n<ul>\n<li>Marker character change forces new list start:\n<ul>\n<li>Ac tristique libero volutpat at</li>\n</ul>\n<ul>\n<li>Facilisis in pretium nisl aliquet</li>\n</ul>\n<ul>\n<li>Nulla volutpat aliquam velit</li>\n</ul>\n</li>\n</ul>\n</li>\n<li>Very easy!</li>\n</ul>\n<p>Ordered</p>\n<ol>\n<li>\n<p>Lorem ipsum dolor sit amet</p>\n</li>\n<li>\n<p>Consectetur adipiscing elit</p>\n</li>\n<li>\n<p>Integer molestie lorem at massa</p>\n</li>\n<li>\n<p>You can use sequential numbers…</p>\n</li>\n<li>\n<p>…or keep all the numbers as <code>1.</code></p>\n</li>\n</ol>\n<p>Start numbering with offset:</p>\n<ol start=\"57\">\n<li>foo</li>\n<li>bar</li>\n</ol>\n<p><a href=\"https://github.com/revin/markdown-it-task-lists\">Checkbox List (Unordered)</a></p>\n<ul class=\"contains-task-list\">\n<li class=\"task-list-item\"><input class=\"task-list-item-checkbox\" disabled=\"\" type=\"checkbox\"> List Item 1 unchecked</li>\n<li class=\"task-list-item\"><input class=\"task-list-item-checkbox\" checked=\"\" disabled=\"\" type=\"checkbox\"> List Item 2 checked</li>\n<li class=\"task-list-item\"><input class=\"task-list-item-checkbox\" checked=\"\" disabled=\"\" type=\"checkbox\"> List Item 3 checked\n<ul class=\"contains-task-list\">\n<li class=\"task-list-item\"><input class=\"task-list-item-checkbox\" disabled=\"\" type=\"checkbox\"> Sub List Item 1 unchecked</li>\n<li class=\"task-list-item\"><input class=\"task-list-item-checkbox\" checked=\"\" disabled=\"\" type=\"checkbox\"> Sub List Item 1 checked</li>\n</ul>\n</li>\n</ul>\n<pre class=\"language-md\"><code class=\"language-md\">Unordered\n\n<span class=\"token list punctuation\">+</span> Create a list by starting a line with <span class=\"token code-snippet code keyword\">`+`</span>, <span class=\"token code-snippet code keyword\">`-`</span>, or <span class=\"token code-snippet code keyword\">`*`</span>\n<span class=\"token list punctuation\">+</span> Sub-lists are made by indenting 2 spaces:\n  <span class=\"token list punctuation\">-</span> Marker character change forces new list start:\n    <span class=\"token list punctuation\">*</span> Ac tristique libero volutpat at\n    <span class=\"token list punctuation\">+</span> Facilisis in pretium nisl aliquet\n    <span class=\"token list punctuation\">-</span> Nulla volutpat aliquam velit\n<span class=\"token list punctuation\">+</span> Very easy!\n\nOrdered\n\n<span class=\"token list punctuation\">1.</span> Lorem ipsum dolor sit amet\n<span class=\"token list punctuation\">2.</span> Consectetur adipiscing elit\n<span class=\"token list punctuation\">3.</span> Integer molestie lorem at massa\n\n\n<span class=\"token list punctuation\">1.</span> You can use sequential numbers...\n<span class=\"token list punctuation\">1.</span> ...or keep all the numbers as <span class=\"token code-snippet code keyword\">`1.`</span>\n\nStart numbering with offset:\n\n<span class=\"token list punctuation\">57.</span> foo\n<span class=\"token list punctuation\">1.</span> bar\n\nCheckbox List (Unordered)\n\n<span class=\"token list punctuation\">-</span> [ ] List Item 1 unchecked\n<span class=\"token list punctuation\">-</span> [x] List Item 2 checked\n<span class=\"token list punctuation\">-</span> [x] List Item 3 checked\n  <span class=\"token list punctuation\">-</span> [ ] Sub List Item 1 unchecked\n  <span class=\"token list punctuation\">-</span> [x] Sub List Item 1 checked</code></pre>\n<h2 id=\"code\" tabindex=\"-1\"><a class=\"header-anchor\" href=\"#code\">Code</a></h2>\n<p>Inline <code>code</code></p>\n<p>Indented code</p>\n<p>// Some comments<br>\nline 1 of code<br>\nline 2 of code<br>\nline 3 of code</p>\n<p><em>Named</em> code block fences</p>\n<pre class=\"language-js named-fence-block\"><code class=\"language-js\">console<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span><span class=\"token string\">\"Hello World!\"</span><span class=\"token punctuation\">)</span></code><div class=\"named-fence-filename\">hello.js</div></pre>\n<p>Block code “fences”</p>\n<pre><code>Sample text here...\n</code></pre>\n<p>Syntax highlighting</p>\n<pre class=\"language-js\"><code class=\"language-js\"><span class=\"token keyword\">var</span> <span class=\"token function-variable function\">foo</span> <span class=\"token operator\">=</span> <span class=\"token keyword\">function</span> <span class=\"token punctuation\">(</span><span class=\"token parameter\">bar</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n  <span class=\"token keyword\">return</span> bar<span class=\"token operator\">++</span><span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">;</span>\n\nconsole<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span><span class=\"token function\">foo</span><span class=\"token punctuation\">(</span><span class=\"token number\">5</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span></code></pre>\n<p>Syntax highlighting</p>\n<pre class=\"language-js\"><code class=\"language-js\"><span class=\"token keyword\">var</span> <span class=\"token function-variable function\">foo</span> <span class=\"token operator\">=</span> <span class=\"token keyword\">function</span> <span class=\"token punctuation\">(</span><span class=\"token parameter\">bar</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n  <span class=\"token keyword\">return</span> bar<span class=\"token operator\">++</span><span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">;</span>\n\nconsole<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span><span class=\"token function\">foo</span><span class=\"token punctuation\">(</span><span class=\"token number\">5</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span></code></pre>\n<h2 id=\"tables\" tabindex=\"-1\"><a class=\"header-anchor\" href=\"#tables\">Tables</a></h2>\n<table>\n<thead>\n<tr>\n<th>Option</th>\n<th>Description</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>data</td>\n<td>path to data files to supply the data that will be passed into templates.</td>\n</tr>\n<tr>\n<td>engine</td>\n<td>engine to be used for processing templates. Handlebars is the default.</td>\n</tr>\n<tr>\n<td>ext</td>\n<td>extension to be used for dest files.</td>\n</tr>\n</tbody>\n</table>\n<p>Right aligned columns</p>\n<table>\n<thead>\n<tr>\n<th style=\"text-align:right\">Option</th>\n<th style=\"text-align:right\">Description</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td style=\"text-align:right\">data</td>\n<td style=\"text-align:right\">path to data files to supply the data that will be passed into templates.</td>\n</tr>\n<tr>\n<td style=\"text-align:right\">engine</td>\n<td style=\"text-align:right\">engine to be used for processing templates. Handlebars is the default.</td>\n</tr>\n<tr>\n<td style=\"text-align:right\">ext</td>\n<td style=\"text-align:right\">extension to be used for dest files.</td>\n</tr>\n</tbody>\n</table>\n<pre class=\"language-md\"><code class=\"language-md\"><span class=\"token table\"><span class=\"token table-header-row\"><span class=\"token punctuation\">|</span><span class=\"token table-header important\"> Option </span><span class=\"token punctuation\">|</span><span class=\"token table-header important\"> Description </span><span class=\"token punctuation\">|</span>\n</span><span class=\"token table-line\"><span class=\"token punctuation\">|</span> <span class=\"token punctuation\">------</span> <span class=\"token punctuation\">|</span> <span class=\"token punctuation\">-----------</span> <span class=\"token punctuation\">|</span>\n</span><span class=\"token table-data-rows\"><span class=\"token punctuation\">|</span><span class=\"token table-data\"> data   </span><span class=\"token punctuation\">|</span><span class=\"token table-data\"> path to data files to supply the data that will be passed into templates. </span><span class=\"token punctuation\">|</span>\n<span class=\"token punctuation\">|</span><span class=\"token table-data\"> engine </span><span class=\"token punctuation\">|</span><span class=\"token table-data\"> engine to be used for processing templates. Handlebars is the default. </span><span class=\"token punctuation\">|</span>\n<span class=\"token punctuation\">|</span><span class=\"token table-data\"> ext    </span><span class=\"token punctuation\">|</span><span class=\"token table-data\"> extension to be used for dest files. </span><span class=\"token punctuation\">|</span>\n</span></span>\nRight aligned columns\n\n<span class=\"token table\"><span class=\"token table-header-row\"><span class=\"token punctuation\">|</span><span class=\"token table-header important\"> Option </span><span class=\"token punctuation\">|</span><span class=\"token table-header important\"> Description </span><span class=\"token punctuation\">|</span>\n</span><span class=\"token table-line\"><span class=\"token punctuation\">|</span> <span class=\"token punctuation\">------:</span><span class=\"token punctuation\">|</span> <span class=\"token punctuation\">-----------:</span><span class=\"token punctuation\">|</span>\n</span><span class=\"token table-data-rows\"><span class=\"token punctuation\">|</span><span class=\"token table-data\"> data   </span><span class=\"token punctuation\">|</span><span class=\"token table-data\"> path to data files to supply the data that will be passed into templates. </span><span class=\"token punctuation\">|</span>\n<span class=\"token punctuation\">|</span><span class=\"token table-data\"> engine </span><span class=\"token punctuation\">|</span><span class=\"token table-data\"> engine to be used for processing templates. Handlebars is the default. </span><span class=\"token punctuation\">|</span>\n<span class=\"token punctuation\">|</span><span class=\"token table-data\"> ext    </span><span class=\"token punctuation\">|</span><span class=\"token table-data\"> extension to be used for dest files. </span><span class=\"token punctuation\">|</span>\n</span></span></code></pre>\n<h3 id=\"tables-with-multimd-syntax\" tabindex=\"-1\"><a class=\"header-anchor\" href=\"#tables-with-multimd-syntax\"><a href=\"https://github.com/redbug312/markdown-it-multimd-table\">Tables with MultiMD Syntax</a></a></h3>\n<table>\n<caption id=\"prototypetable\" style=\"caption-side: bottom\">Prototype table</caption>\n<thead>\n<tr>\n<th></th>\n<th style=\"text-align:center\" colspan=\"2\">Grouping</th>\n</tr>\n<tr>\n<th>First Header</th>\n<th style=\"text-align:center\">Second Header</th>\n<th style=\"text-align:right\">Third Header</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>Content</td>\n<td style=\"text-align:center\" colspan=\"2\"><em>Long Cell</em></td>\n</tr>\n<tr>\n<td>Content</td>\n<td style=\"text-align:center\"><strong>Cell</strong></td>\n<td style=\"text-align:right\">Cell</td>\n</tr>\n</tbody>\n<tbody>\n<tr>\n<td>New section</td>\n<td style=\"text-align:center\">More</td>\n<td style=\"text-align:right\">Data</td>\n</tr>\n<tr>\n<td>And more</td>\n<td style=\"text-align:center\" colspan=\"2\">With an escaped ‘\\|’</td>\n</tr>\n</tbody>\n</table>\n<table>\n<caption id=\"netatpyieldsperhexose\" style=\"caption-side: bottom\">Net ATP yields per hexose</caption>\n<thead>\n<tr>\n<th style=\"text-align:right\">Stage</th>\n<th style=\"text-align:right\">Direct Products</th>\n<th style=\"text-align:right\">ATP Yields</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td style=\"text-align:right\" rowspan=\"2\">Glycolysis</td>\n<td style=\"text-align:right\" colspan=\"2\">2 ATP</td>\n</tr>\n<tr>\n<td style=\"text-align:right\">2 NADH</td>\n<td style=\"text-align:right\">3–5 ATP</td>\n</tr>\n<tr>\n<td style=\"text-align:right\">Pyruvaye oxidation</td>\n<td style=\"text-align:right\">2 NADH</td>\n<td style=\"text-align:right\">5 ATP</td>\n</tr>\n<tr>\n<td style=\"text-align:right\" rowspan=\"3\">Citric acid cycle</td>\n<td style=\"text-align:right\" colspan=\"2\">2 ATP</td>\n</tr>\n<tr>\n<td style=\"text-align:right\">6 NADH</td>\n<td style=\"text-align:right\">15 ATP</td>\n</tr>\n<tr>\n<td style=\"text-align:right\">2 FADH2</td>\n<td style=\"text-align:right\">3 ATP</td>\n</tr>\n<tr>\n<td style=\"text-align:right\" colspan=\"3\"><strong>30–32</strong> ATP</td>\n</tr>\n</tbody>\n</table>\n<table>\n<tbody>\n<tr>\n<td>♜</td>\n<td></td>\n<td>♝</td>\n<td>♛</td>\n<td>♚</td>\n<td>♝</td>\n<td>♞</td>\n<td>♜</td>\n</tr>\n<tr>\n<td></td>\n<td>♟</td>\n<td>♟</td>\n<td>♟</td>\n<td></td>\n<td>♟</td>\n<td>♟</td>\n<td>♟</td>\n</tr>\n<tr>\n<td>♟</td>\n<td></td>\n<td>♞</td>\n<td></td>\n<td></td>\n<td></td>\n<td></td>\n<td></td>\n</tr>\n<tr>\n<td></td>\n<td>♗</td>\n<td></td>\n<td></td>\n<td>♟</td>\n<td></td>\n<td></td>\n<td></td>\n</tr>\n<tr>\n<td></td>\n<td></td>\n<td></td>\n<td></td>\n<td>♙</td>\n<td></td>\n<td></td>\n<td></td>\n</tr>\n<tr>\n<td></td>\n<td></td>\n<td></td>\n<td></td>\n<td></td>\n<td>♘</td>\n<td></td>\n<td></td>\n</tr>\n<tr>\n<td>♙</td>\n<td>♙</td>\n<td>♙</td>\n<td>♙</td>\n<td></td>\n<td>♙</td>\n<td>♙</td>\n<td>♙</td>\n</tr>\n<tr>\n<td>♖</td>\n<td>♘</td>\n<td>♗</td>\n<td>♕</td>\n<td>♔</td>\n<td></td>\n<td></td>\n<td>♖</td>\n</tr>\n</tbody>\n</table>\n<pre class=\"language-md\"><code class=\"language-md\">|             |          Grouping           ||\n<span class=\"token table\"><span class=\"token table-header-row\"><span class=\"token table-header important\">First Header  </span><span class=\"token punctuation\">|</span><span class=\"token table-header important\"> Second Header </span><span class=\"token punctuation\">|</span><span class=\"token table-header important\"> Third Header </span><span class=\"token punctuation\">|</span>\n</span><span class=\"token table-line\"> <span class=\"token punctuation\">------------</span> <span class=\"token punctuation\">|</span> <span class=\"token punctuation\">:-----------:</span> <span class=\"token punctuation\">|</span> <span class=\"token punctuation\">-----------:</span> <span class=\"token punctuation\">|</span>\n</span><span class=\"token table-data-rows\"></span></span>Content       |          <span class=\"token italic\"><span class=\"token punctuation\">*</span><span class=\"token content\">Long Cell</span><span class=\"token punctuation\">*</span></span>        ||\nContent       |   <span class=\"token bold\"><span class=\"token punctuation\">**</span><span class=\"token content\">Cell</span><span class=\"token punctuation\">**</span></span>    |         Cell |\n\nNew section   |     More      |         Data |\nAnd more      | With an escaped '\\\\|'       ||\n[Prototype table]\n\n<span class=\"token table\"><span class=\"token table-header-row\"><span class=\"token table-header important\">Stage </span><span class=\"token punctuation\">|</span><span class=\"token table-header important\"> Direct Products </span><span class=\"token punctuation\">|</span><span class=\"token table-header important\"> ATP Yields</span>\n</span><span class=\"token table-line\"><span class=\"token punctuation\">----:</span> <span class=\"token punctuation\">|</span> <span class=\"token punctuation\">--------------:</span> <span class=\"token punctuation\">|</span> <span class=\"token punctuation\">---------:</span>\n</span><span class=\"token table-data-rows\"></span></span>Glycolysis | 2 ATP ||\n^^ | 2 NADH | 3--5 ATP |\nPyruvaye oxidation | 2 NADH | 5 ATP |\nCitric acid cycle | 2 ATP ||\n^^ | 6 NADH | 15 ATP |\n^^ | 2 FADH2 | 3 ATP |\n<span class=\"token bold\"><span class=\"token punctuation\">**</span><span class=\"token content\">30--32</span><span class=\"token punctuation\">**</span></span> ATP |||\n[Net ATP yields per hexose]\n\n|--|--|--|--|--|--|--|--|\n|♜|  |♝|♛|♚|♝|♞|♜|\n|  |♟|♟|♟|  |♟|♟|♟|\n|♟|  |♞|  |  |  |  |  |\n|  |♗|  |  |♟|  |  |  |\n|  |  |  |  |♙|  |  |  |\n|  |  |  |  |  |♘|  |  |\n|♙|♙|♙|♙|  |♙|♙|♙|\n|♖|♘|♗|♕|♔|  |  |♖|</code></pre>\n<h2 id=\"links\" tabindex=\"-1\"><a class=\"header-anchor\" href=\"#links\">Links</a></h2>\n<p><a href=\"http://dev.nodeca.com\">link text</a></p>\n<p><a href=\"http://nodeca.github.io/pica/demo/\" title=\"title text!\">link with title</a></p>\n<p><a href=\"/\">text with non-external link</a></p>\n<p>Autoconverted link <a href=\"https://github.com/nodeca/pica\">https://github.com/nodeca/pica</a> (enable linkify to see)</p>\n<pre class=\"language-md\"><code class=\"language-md\"><span class=\"token url\">[<span class=\"token content\">link text</span>](<span class=\"token url\">http://dev.nodeca.com</span>)</span>\n\n<span class=\"token url\">[<span class=\"token content\">link with title</span>](<span class=\"token url\">http://nodeca.github.io/pica/demo/</span> <span class=\"token string\">\"title text!\"</span>)</span>\n\n<span class=\"token url\">[<span class=\"token content\">text with non-external link</span>](<span class=\"token url\">/</span>)</span>\n\nAutoconverted link https://github.com/nodeca/pica (enable linkify to see)</code></pre>\n<h2 id=\"images\" tabindex=\"-1\"><a class=\"header-anchor\" href=\"#images\">Images</a></h2>\n<p><img src=\"https://octodex.github.com/images/minion.png\" alt=\"Minion\"><br>\n<img src=\"https://octodex.github.com/images/stormtroopocat.jpg\" alt=\"Stormtroopocat\" title=\"The Stormtroopocat\"></p>\n<pre class=\"language-md\"><code class=\"language-md\"><span class=\"token url\"><span class=\"token operator\">!</span>[<span class=\"token content\">Minion</span>](<span class=\"token url\">https://octodex.github.com/images/minion.png</span>)</span>\n<span class=\"token url\"><span class=\"token operator\">!</span>[<span class=\"token content\">Stormtroopocat</span>](<span class=\"token url\">https://octodex.github.com/images/stormtroopocat.jpg</span> <span class=\"token string\">\"The Stormtroopocat\"</span>)</span></code></pre>\n<p>Like links, Images also have a footnote style syntax</p>\n<figure><img src=\"https://octodex.github.com/images/dojocat.jpg\" alt=\"Alt text\" title=\"The Dojocat\"></figure>\n<p>With a reference later in the document defining the URL location:</p>\n<pre class=\"language-md\"><code class=\"language-md\"><span class=\"token url\"><span class=\"token operator\">!</span>[<span class=\"token content\">Alt text</span>][<span class=\"token variable\">id</span>]</span>\n\nWith a reference later in the document defining the URL location:\n\n<span class=\"token url-reference url\"><span class=\"token punctuation\">[</span><span class=\"token variable\">id</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">:</span> https://octodex.github.com/images/dojocat.jpg  <span class=\"token string\">\"The Dojocat\"</span></span></code></pre>\n<h2 id=\"horizontal-rules\" tabindex=\"-1\"><a class=\"header-anchor\" href=\"#horizontal-rules\">Horizontal Rules</a></h2>\n<hr>\n<hr>\n<hr>\n<pre class=\"language-md\"><code class=\"language-md\">___\n\n<span class=\"token hr punctuation\">---</span>\n\n<span class=\"token hr punctuation\">***</span></code></pre>\n<h2 id=\"media%2Fembed\" tabindex=\"-1\"><a class=\"header-anchor\" href=\"#media%2Fembed\">Media/Embed</a></h2>\n<p>Provided by the newest fork of <a href=\"https://github.com/vrcd-community/markdown-it-video\">markdown-it-video</a> so far.<br>\nUsing plain <abbr title=\"Hyper Text Markup Language\">HTML</abbr> for embeds works too.</p>\n<h3 id=\"local-video\" tabindex=\"-1\"><a class=\"header-anchor\" href=\"#local-video\">Local Video</a></h3>\n<p><div class=\"video-file-player\"><video controls src=\"/media/Big-buck-bunny_trailer.webm\"></video></div></p>\n<pre class=\"language-md\"><code class=\"language-md\">@<span class=\"token url\">[<span class=\"token content\">video</span>](<span class=\"token url\">/media/Big-buck-bunny_trailer.webm</span>)</span></code></pre>\n<h3 id=\"local-audio\" tabindex=\"-1\"><a class=\"header-anchor\" href=\"#local-audio\">Local Audio</a></h3>\n<p><div class=\"audio-file-player\"><audio controls src=\"/media/Title Screen JP Version - Sonic the Hedgehog.mp3\"></audio></div></p>\n<pre class=\"language-md\"><code class=\"language-md\">@[audio](/media/Title Screen JP Version - Sonic the Hedgehog.mp3)</code></pre>\n<h3 id=\"youtube-embed\" tabindex=\"-1\"><a class=\"header-anchor\" href=\"#youtube-embed\">YouTube Embed</a></h3>\n<p><div class=\"embed-responsive embed-responsive-16by9\"><iframe class=\"embed-responsive-item youtube-player\" type=\"text/html\" width=\"640\" height=\"390\" src=\"https://www.youtube.com/embed/9bZkp7q19f0\" frameborder=\"0\" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></div></p>\n<pre class=\"language-md\"><code class=\"language-md\">@<span class=\"token url\">[<span class=\"token content\">youtube</span>](<span class=\"token url\">9bZkp7q19f0</span>)</span></code></pre>\n<p>More options <a href=\"https://github.com/vrcd-community/markdown-it-video\">here</a>…</p>\n<h2 id=\"miscelleneous\" tabindex=\"-1\"><a class=\"header-anchor\" href=\"#miscelleneous\">Miscelleneous</a></h2>\n<p><code>markdown-it</code> has support for various <a href=\"https://www.npmjs.org/browse/keyword/markdown-it-plugin\">syntax plugins</a>.</p>\n<h3 id=\"custom-containers\" tabindex=\"-1\"><a class=\"header-anchor\" href=\"#custom-containers\"><a href=\"https://github.com/markdown-it/markdown-it-container\">Custom containers</a></a></h3>\n<div class=\"warning\">\n<p><em>here be dragons</em></p>\n</div>\n<pre class=\"language-md\"><code class=\"language-md\">::: warning\n<span class=\"token italic\"><span class=\"token punctuation\">*</span><span class=\"token content\">here be dragons</span><span class=\"token punctuation\">*</span></span>\n:::</code></pre>\n<p>Note: The plugin requires adding definition for each type of container you need in config like ‘warning’.</p>\n<h3 id=\"definition-lists\" tabindex=\"-1\"><a class=\"header-anchor\" href=\"#definition-lists\"><a href=\"https://github.com/markdown-it/markdown-it-deflist\">Definition lists</a></a></h3>\n<dl>\n<dt>Term 1</dt>\n<dd>Definition 1<br>\nwith lazy continuation.</dd>\n</dl>\n<!-- Term 2 with *inline markup* -->\n<!---->\n<!-- :   Definition 2 -->\n<!---->\n<!--         { some code, part of Definition 2 } -->\n<!---->\n<!--     Third paragraph of definition 2. -->\n<p><em>Compact style:</em></p>\n<dl>\n<dt>Term 1</dt>\n<dd>Definition 1</dd>\n<dt>Term 2</dt>\n<dd>Definition 2a</dd>\n<dd>Definition 2b</dd>\n</dl>\n<pre class=\"language-md\"><code class=\"language-md\"><span class=\"token italic\"><span class=\"token punctuation\">_</span><span class=\"token content\">Compact style:</span><span class=\"token punctuation\">_</span></span>\n\nTerm 1\n  ~ Definition 1\n\nTerm 2\n  <span class=\"token strike\"><span class=\"token punctuation\">~</span><span class=\"token content\"> Definition 2a\n  </span><span class=\"token punctuation\">~</span></span> Definition 2b</code></pre>\n<h3 id=\"abbreviations\" tabindex=\"-1\"><a class=\"header-anchor\" href=\"#abbreviations\"><a href=\"https://github.com/markdown-it/markdown-it-abbr\">Abbreviations</a></a></h3>\n<p>This is <abbr title=\"Hyper Text Markup Language\">HTML</abbr> abbreviation example.</p>\n<p>It converts “<abbr title=\"Hyper Text Markup Language\">HTML</abbr>”, but keep intact partial entries like “xxxHTMLyyy” and so on.</p>\n<pre class=\"language-md\"><code class=\"language-md\">This is HTML abbreviation example.\n\nIt converts \"HTML\", but keep intact partial entries like \"xxxHTMLyyy\" and so on.\n\n*<span class=\"token url-reference url\"><span class=\"token punctuation\">[</span><span class=\"token variable\">HTML</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">:</span> Hyper</span> Text Markup Language</code></pre>\n<h3 id=\"summary%2Flegend\" tabindex=\"-1\"><a class=\"header-anchor\" href=\"#summary%2Flegend\"><a href=\"https://github.com/bioruebe/markdown-it-collapsible\">Summary/Legend</a></a></h3>\n<details>\n<summary><span class=\"details-marker\"></span>Click me!</summary><p>Hidden text</p>\n</details>\n<pre class=\"language-md\"><code class=\"language-md\">+++ Click me!\nHidden text\n+++</code></pre>\n<hr class=\"footnotes-sep\">\n<section class=\"footnotes\">\n<ol class=\"footnotes-list\">\n<li id=\"fn1\" class=\"footnote-item\"><p>Footnote <strong>can have markup</strong></p>\n<p>and multiple paragraphs. <a href=\"#fnref1\" class=\"footnote-backref\">↩︎</a></p>\n</li>\n<li id=\"fn2\" class=\"footnote-item\"><p>Footnote text. <a href=\"#fnref2\" class=\"footnote-backref\">↩︎</a> <a href=\"#fnref2:1\" class=\"footnote-backref\">↩︎</a></p>\n</li>\n<li id=\"fn3\" class=\"footnote-item\"><p>Text of inline footnote <a href=\"#fnref3\" class=\"footnote-backref\">↩︎</a></p>\n</li>\n</ol>\n</section>",
			"date_published": "2024-01-08T12:30:00+00:00"
		},
		{
			"id": "https://example.com/blog/article/post-with-square-image-and-alt-text/",
			"url": "https://example.com/blog/article/post-with-square-image-and-alt-text/",
			"title": "Timeless Journey with Camel: A Musical Odyssey",
			"content_html":"<figure><img src=\"/media/camel-moonmadness-vinyl-cover.webp\" alt=\"Vinyl cover of Moonmadness album by Camel\" title=\"Camel - Moonmadness\"></figure>\n<p>Camel, the legendary progressive rock band, has left an indelible mark on the music landscape with their unique blend of intricate melodies and mesmerizing compositions. Formed in London in the early 1970s, the band has navigated the ever-evolving currents of the music industry, creating a distinctive sound that transcends time and trends.</p>\n<h2 id=\"the-genesis-of-camel%E2%80%99s-sound\" tabindex=\"-1\"><a class=\"header-anchor\" href=\"#the-genesis-of-camel%E2%80%99s-sound\">The Genesis of Camel’s Sound</a></h2>\n<p>Camel’s sonic tapestry is woven with threads of progressive rock, jazz, and classical influences. The band’s debut album, <em>Camel</em> (1973), showcased their virtuosity and set the stage for a prolific career. Known for their instrumental prowess, Camel’s music is a journey through intricate time signatures, dynamic shifts, and atmospheric landscapes. Tracks like “Lady Fantasy” and “Rhayader” became anthems of the progressive rock movement.</p>\n<h2 id=\"evolution-and-endurance\" tabindex=\"-1\"><a class=\"header-anchor\" href=\"#evolution-and-endurance\">Evolution and Endurance</a></h2>\n<p>As the years unfolded, Camel continued to evolve. The album <em>Moonmadness</em> (1976) marked a high point in their discography, displaying a perfect synergy of musicality and experimentation. Despite lineup changes, Camel’s core members, including Andrew Latimer, maintained a commitment to musical excellence. Their enduring appeal is evident in later works like <em>Dust and Dreams</em> (1991) and <em>Rajaz</em> (1999), proving that Camel’s music is not bound by the constraints of time.</p>\n<h2 id=\"legacy-and-influence\" tabindex=\"-1\"><a class=\"header-anchor\" href=\"#legacy-and-influence\">Legacy and Influence</a></h2>\n<p>Camel’s influence extends beyond their genre, inspiring generations of musicians and captivating audiences worldwide. With a discography that spans decades, the band’s commitment to artistic expression has solidified their place in the pantheon of progressive rock. Whether revisiting the classics or discovering hidden gems, the journey with Camel is a testament to the timeless power of music.</p>\n<p><em>Explore Camel’s discography and embark on a musical odyssey that transcends generations. From the ethereal landscapes of their early works to the mature reflections of later albums, Camel’s legacy is a testament to the enduring power of progressive rock.</em></p>",
			"date_published": "2023-04-15T12:00:00+00:00"
		},
		{
			"id": "https://example.com/blog/article/post-with-codeblocks/",
			"url": "https://example.com/blog/article/post-with-codeblocks/",
			"title": "Exploring the @scope Feature in CSS for Modular Styling",
			"content_html":"<p>CSS, the cornerstone of web styling, constantly evolves to meet the demands of modern web development. One of the recent additions that has caught the attention of developers is the <code>@scope</code> feature. This feature introduces a new way of handling styles, promoting modular and encapsulated styling practices.</p>\n<h2 id=\"understanding-%40scope-in-css\" tabindex=\"-1\"><a class=\"header-anchor\" href=\"#understanding-%40scope-in-css\">Understanding @scope in CSS</a></h2>\n<p>The <code>@scope</code> feature allows developers to create a scoped styling context within a specific block or component, preventing the styles from affecting the rest of the document. This is particularly useful in large projects where maintaining a modular and isolated styling approach is crucial for code organization and reusability.</p>\n<h2 id=\"example-implementation\" tabindex=\"-1\"><a class=\"header-anchor\" href=\"#example-implementation\">Example Implementation</a></h2>\n<p>To grasp the practical application of the <code>@scope</code> feature, consider the following example:</p>\n<pre class=\"language-html\"><code class=\"language-html\"><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>div</span> <span class=\"token attr-name\">class</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>container<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>h2</span> <span class=\"token attr-name\">@scope</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>.container<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span>Scoped Heading<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>h2</span><span class=\"token punctuation\">></span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>div</span><span class=\"token punctuation\">></span></span></code></pre>\n<pre class=\"language-css\"><code class=\"language-css\"><span class=\"token atrule\"><span class=\"token rule\">@scope</span> .container</span> <span class=\"token punctuation\">{</span>\n  <span class=\"token selector\">h2</span> <span class=\"token punctuation\">{</span>\n    <span class=\"token property\">color</span><span class=\"token punctuation\">:</span> #3498db<span class=\"token punctuation\">;</span>\n  <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span></code></pre>\n<p>In this example, the heading inside the container has a scoped style applied, ensuring that the color change is isolated within the container without affecting other elements on the page.</p>\n<h2 id=\"benefits-of-%40scope-in-css\" tabindex=\"-1\"><a class=\"header-anchor\" href=\"#benefits-of-%40scope-in-css\">Benefits of @scope in CSS</a></h2>\n<ul>\n<li>Modularity: Encourages the creation of modular and reusable styles.</li>\n<li>Isolation: Prevents unintended style leaks and conflicts by scoping styles to specific elements.</li>\n<li>Readability: Enhances code readability by clearly defining the styling context.</li>\n</ul>\n<h2 id=\"conclusion\" tabindex=\"-1\"><a class=\"header-anchor\" href=\"#conclusion\">Conclusion</a></h2>\n<p>As web development continues to advance, features like @scope in CSS provide developers with powerful tools to enhance code organization and maintainability. By embracing modular styling practices, developers can create more robust and scalable web applications.</p>\n<p>Explore more on <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS\">CSS</a>, <a href=\"https://developer.mozilla.org/en-US/docs/Learn\">web development</a>, and <a href=\"https://developer.mozilla.org/en-US/docs/Learn/Front-end_web_developer\">front-end development</a>.</p>",
			"date_published": "2022-08-12T10:30:00.000Z"
		},
		{
			"id": "https://example.com/blog/article/plain-text-with-footnotes/",
			"url": "https://example.com/blog/article/plain-text-with-footnotes/",
			"title": "Navigating the Paradox: A Philosophical Exploration of the Ship of Theseus",
			"content_html":"<p>The Ship of Theseus<sup class=\"footnote-ref\"><a href=\"#fn1\" id=\"fnref1\">[1]</a></sup>, a classic thought experiment in metaphysics, poses intriguing questions about identity and continuity. Imagine a ship whose every part is replaced over time. Is it still the same ship? I recently delved into the heart of this paradox, pondering its implications on existence and transformation.</p>\n<!--more-->\n<h2 id=\"sailing-through-experience\" tabindex=\"-1\"><a class=\"header-anchor\" href=\"#sailing-through-experience\">Sailing Through Experience</a></h2>\n<p>On a serene afternoon, I found myself standing at the harbor, gazing at a ship undergoing gradual restoration. The sight triggered a cascade of philosophical musings. As each plank and sail was meticulously replaced, I couldn’t help but question the essence of identity. How much change can an object undergo before it loses its fundamental nature? Is identity a product of the parts or an intangible quality that transcends physicality?</p>\n<h2 id=\"the-crew-of-perspectives\" tabindex=\"-1\"><a class=\"header-anchor\" href=\"#the-crew-of-perspectives\">The Crew of Perspectives</a></h2>\n<p>Engaging in conversations with shipwrights, historians, and fellow onlookers added layers to my contemplation. Each perspective seemed to echo the philosophical debates surrounding the Ship of Theseus. Some argued that identity lies in the collective arrangement of parts, while others believed it resides in the continuous experience and narrative. The ship became a metaphor<sup class=\"footnote-ref\"><a href=\"#fn2\" id=\"fnref2\">[2]</a></sup> for the diversity of human thought, and its evolution symbolized the evolving nature of philosophical discourse.</p>\n<h2 id=\"nautical-metaphors-in-everyday-life\" tabindex=\"-1\"><a class=\"header-anchor\" href=\"#nautical-metaphors-in-everyday-life\">Nautical Metaphors in Everyday Life</a></h2>\n<p>As I continued my exploration, I couldn’t help but notice the Ship of Theseus paradox mirrored in various aspects of life. Personal identity, societal structures, and even technological advancements all seemed to grapple with the tension between continuity and change. The philosophical ripples from this ancient thought experiment extended far beyond the harbor, resonating with the constant flux inherent in the human experience.</p>\n<h2 id=\"navigating-the-uncharted-waters\" tabindex=\"-1\"><a class=\"header-anchor\" href=\"#navigating-the-uncharted-waters\">Navigating the Uncharted Waters</a></h2>\n<p>Standing at the crossroads of tradition and transformation, the Ship of Theseus forces us to confront the fluid nature of existence. This philosophical journey reminded me that identity is not a fixed destination but a dynamic voyage. As the ship sailed into the horizon, its paradoxical nature lingered in my thoughts, inviting further exploration into the mysteries of being.</p>\n<p><em>Explore more on philosophy, Ship of Theseus, identity, and metaphysics.</em></p>\n<hr class=\"footnotes-sep\">\n<section class=\"footnotes\">\n<ol class=\"footnotes-list\">\n<li id=\"fn1\" class=\"footnote-item\"><p>Check out <a href=\"https://en.wikipedia.org/wiki/Ship_of_Theseus\">Wikipedia page</a> <a href=\"#fnref1\" class=\"footnote-backref\">↩︎</a></p>\n</li>\n<li id=\"fn2\" class=\"footnote-item\"><p>(noun) met·​a·​phor - ˈme-tə-ˌfȯr - also -fər - a figure of speech in which a word or phrase literally denoting one kind of object or idea is used in place of another to suggest a likeness or analogy between them (as in drowning in money)<br>\nbroadly : figurative language. <a href=\"#fnref2\" class=\"footnote-backref\">↩︎</a></p>\n</li>\n</ol>\n</section>",
			"date_published": "2021-08-21T12:30:00.000Z"
		},
		{
			"id": "https://example.com/blog/article/youtube-embed-example/",
			"url": "https://example.com/blog/article/youtube-embed-example/",
			"title": "About the First Jam, Our Experience, Our Result + Linux Support with Mac",
			"content_html":"<iframe width=\"560\" height=\"315\" src=\"https://www.youtube-nocookie.com/embed/FHjQLIaeWR8\" title=\"YouTube video player\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen></iframe>\n<blockquote>\n<p>This article is a devlog where I write about our general progress and what happened to us after the game we entered in Cave Jam #3, Down Up Purgatory. You can reach the original <a href=\"https://zukachi.itch.io/the-ups-and-downs-of-purgatory/devlog/276677/lk-jam-hakknda-deneyimimiz-sonucumuz-mac-ile-linux-destei\">here</a>.</p>\n</blockquote>\n<p>Yes, greetings, I’m Ege. As the first “devblog” or even status update, I wanted to write a little bit about our first jam experience, jam results and I wanted to share what we added/edited on the game page.</p>\n<!--more-->\n<p>During the jam, as a team with my friend Batu and the people we came across/recently met while searching for a team, we made a 2D platformer game set in a heaven/hell as a result of brainstorming and concept elimination on a good or bad theme in 3 days (+4 hours). It’s not the first rodeo of two people in the team (khenzur &amp; Salmir), but relying on our past experiences and interests, we saw what it’s like to sweat about teamwork and game development in the first jam.</p>\n<h2 id=\"for-those-who-are-thinking-about-joining-a-game-jam%E2%80%A6\" tabindex=\"-1\"><a class=\"header-anchor\" href=\"#for-those-who-are-thinking-about-joining-a-game-jam%E2%80%A6\">For those who are thinking about joining a game jam…</a></h2>\n<p>Let’s not assume that people who will be attending a jam for the first time will read this, but let’s not say that no matter what happens, whether your knee bleeds while running, or you are let down halfway, or you can’t finish the game, or there is a conflict within the team… It’s normal for a lot of these things to happen, and I’ve listened to a lot of young people like me, people of the same age, on Discord, what they’ve been through, what they’ve been through, and what they’ve been through. Lesser things, worse things. In the same way, there were things that I didn’t like within the team, setbacks outside my expectations, things that I would be demotivated, but at the same time, I didn’t stop myself from trying to try new things when necessary by going out of my comfort zone, I continued. At times, I rarely slept with that ambition, which is not new for me, I had the same feeling when I was studying for university finals. I say never make excuses, know how to use the internet, and don’t stop yourself from trying new things. As a physical jam, of course, I am also curious about what kind of an environment would be created, but we also ran a horse in a Jam that is both online and the most popular in Turkey.</p>\n<p>If you think that life is too short to give 4 minutes of reading time <strong>Now after this chapter</strong>, you can go to the bottom of the page and check our Mac+Linux announcement and be free.</p>\n<h2 id=\"about-cave-jam-%233\" tabindex=\"-1\"><a class=\"header-anchor\" href=\"#about-cave-jam-%233\">About Cave Jam #3</a></h2>\n<p>Regarding the results; <a href=\"http://itch.io\">itch.io</a>’s own algorithm and public voting and then at0m + experienced moderators will select the top 50 (+11) games from 600 or even 542 (because he forgot to remove the remaining ~60 from the draft, MAKE THIS PAGE PUBLIC) games and the top 5 games will be selected before the final juries and their teams will be rewarded.</p>\n<p>Between the numbers announced at the beginning and the current ones (notice the numbers I put in brackets), there have been slight changes in the plan, there have been a lot of people giving each other low stars in the public voting, creating bot accounts and posting 5 stars and positive comments under the jam posts of their own games. what at0m meant was quite expected, but I think it was a bit worse than he expected. The only explanation of how long the moderation and partners have been looking at 542 games and analyzing them in depth is only explained in one short sentence. Maybe it was a really tiring organization, maybe they really didn’t want to bother, but of course none of this is 100% true, it’s just a thought.</p>\n<p>The only thing I cared about was that despite the crappy algorithm on <a href=\"http://itch.io\">itch.io</a>, dozens of games that I expected to at least stand out made it into the top 60. In fact, until the actual list was announced, I told everyone many times that if a certain percentage of the games I expected to make the rankings didn’t, I was quitting this jam, but many people in many jams like me had big concerns like that.</p>\n<p>Since <a href=\"http://itch.io\">itch.io</a>’s algorithm puts games with less than 10 votes in the top 10, there were a lot of people who couldn’t focus on the fact that the algorithm was broken and said “wow, where did I go wrong, wow, what efforts did I spend”. If the median of the number of votes of all games is taken, if <strong>9</strong> of your friends give 5 stars to all criteria, if there are those who comment “it’s very nice, I played for 6 hours”, that game becomes the 1st and grabs 10,000 liras. This is the algorithm in short, friends.</p>",
			"date_published": "2021-07-23T16:35:52.000Z"
		},
		{
			"id": "https://example.com/blog/article/soundcloud-embed-example/",
			"url": "https://example.com/blog/article/soundcloud-embed-example/",
			"title": "Funky Fish &amp; Raina - Artificial Sweetener: A Chiptune Delight",
			"content_html":"<iframe width=\"100%\" height=\"166\" scrolling=\"no\" frameborder=\"no\" allow=\"autoplay\" src=\"https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/173345326&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true\"></iframe><div style=\"font-size: 10px; color: #cccccc;line-break: anywhere;word-break: normal;overflow: hidden;white-space: nowrap;text-overflow: ellipsis; font-family: Interstate,Lucida Grande,Lucida Sans Unicode,Lucida Sans,Garuda,Verdana,Tahoma,sans-serif;font-weight: 100;\"><a href=\"https://soundcloud.com/funkyfish8bit\" title=\"FunkyFish8bit\" target=\"_blank\" style=\"color: #cccccc; text-decoration: none;\">FunkyFish8bit</a> · <a href=\"https://soundcloud.com/funkyfish8bit/funky-fish-raina-artificial-sweetener\" title=\"Funky Fish &amp; Raina - Artificial Sweetener[2006]\" target=\"_blank\" style=\"color: #cccccc; text-decoration: none;\">Funky Fish &amp; Raina - Artificial Sweetener[2006]</a></div>\n<p>Chiptune enthusiasts, rejoice! The collaboration between Funky Fish and Raina has birthed a musical gem that transcends the boundaries of the digital world. “Artificial Sweetener,” a mesmerizing chiptune composition, offers a nostalgic trip into the golden era of video game music while injecting a modern flair that captivates the contemporary audience.</p>\n<!--more-->\n<p><strong>The Sonic Journey:</strong><br>\nDiving into “Artificial Sweetener” feels like embarking on a sonic journey through a pixelated wonderland. The synergy between Funky Fish’s masterful manipulation of chip sounds and Raina’s melodic prowess creates a harmonious blend that evokes emotions ranging from euphoria to introspection. The catchy 8-bit melodies interweave with modern electronic beats, crafting a sonic landscape that is both familiar and refreshingly new. Listeners will find themselves transported to a virtual realm where the boundaries between reality and digital escapism blur seamlessly.</p>\n<p><strong>Innovation Meets Nostalgia:</strong><br>\nWhat sets “Artificial Sweetener” apart is its ability to blend innovation with nostalgia. Funky Fish and Raina skillfully balance the vintage charm of chiptune with contemporary production techniques, resulting in a track that appeals to seasoned chiptune enthusiasts and newcomers alike. The meticulous attention to detail is evident in every beep and boop, creating a sonic tapestry that unfolds with surprises at every turn. Whether you’re a fan of classic video game soundtracks or modern electronic music, this collaboration offers a sweet spot that resonates with a diverse audience.</p>",
			"date_published": "2020-06-11T12:30:00.000Z"
		},
		{
			"id": "https://example.com/blog/article/big-image-example-stockholm/",
			"url": "https://example.com/blog/article/big-image-example-stockholm/",
			"title": "Stockholm: A Journey into Scandinavian Splendor",
			"content_html":"<figure><img src=\"/media/stockholm.jpg\" alt=\"\"></figure>\n<p>Stockholm, the enchanting capital of Sweden, welcomed me with open arms, offering a blend of rich history, modernity, and breathtaking natural beauty. My journey began in Gamla Stan, the charming old town characterized by cobblestone streets and colorful buildings. Wandering through the narrow alleys, I explored the Royal Palace, where the changing of the guard ceremony left me in awe. The historic ambiance was complemented by quaint cafes, serving traditional Swedish fika – a delightful coffee break accompanied by delicious pastries.</p>\n<!--more-->\n<p>Moving beyond the historic heart of the city, I ventured to Djurgården, an island oasis that houses some of Stockholm’s most iconic attractions. The Vasa Museum showcased the remarkably preserved Vasa warship, providing a fascinating glimpse into maritime history. A leisurely stroll through Skansen, the world’s oldest open-air museum, allowed me to witness traditional Swedish life with historic buildings, craftsmen, and a captivating zoo.</p>\n<h2 id=\"culinary-delights-and-modern-marvels\" tabindex=\"-1\"><a class=\"header-anchor\" href=\"#culinary-delights-and-modern-marvels\">Culinary Delights and Modern Marvels</a></h2>\n<p>Stockholm’s culinary scene proved to be a gastronomic adventure. I savored classic Swedish dishes like gravlax, meatballs, and herring at local eateries. The trendy district of Södermalm offered a hip atmosphere, with quirky boutiques and vibrant street art. Here, I explored Fotografiska, a contemporary photography museum, and marveled at the stunning views of the city from the panoramic SkyView.</p>\n<p>As the sun set over the archipelago, I embarked on a memorable dinner cruise, enjoying a delectable Nordic feast while sailing through the scenic waterways. The blend of traditional and modern experiences made my visit to Stockholm truly unforgettable.</p>\n<h3 id=\"practical-information%3A\" tabindex=\"-1\"><a class=\"header-anchor\" href=\"#practical-information%3A\">Practical Information:</a></h3>\n<p><strong>Naval Ensign of Sweden:</strong><br>\n<img src=\"/media/naval-ensign-of-sweden.svg\" alt=\"\"></p>\n<ul>\n<li><strong>Currency:</strong> Swedish Krona (SEK)</li>\n<li><strong>Language:</strong> Swedish, but English is widely spoken</li>\n<li><strong>Transportation:</strong> Efficient public transport system, including buses, trams, and the Stockholm metro</li>\n</ul>\n<h3 id=\"must-visit-places%3A\" tabindex=\"-1\"><a class=\"header-anchor\" href=\"#must-visit-places%3A\">Must-Visit Places:</a></h3>\n<ol>\n<li>Gamla Stan</li>\n<li>Vasa Museum</li>\n<li>Skansen</li>\n<li>Södermalm</li>\n<li>Djurgården</li>\n</ol>\n<h3 id=\"pro-tips%3A\" tabindex=\"-1\"><a class=\"header-anchor\" href=\"#pro-tips%3A\">Pro Tips:</a></h3>\n<ul>\n<li><strong>Weather:</strong> Check the weather forecast and dress in layers, as Stockholm experiences varying temperatures.</li>\n<li><strong>Swedish Etiquette:</strong> Embrace the Swedish custom of removing your shoes when entering someone’s home.</li>\n</ul>",
			"date_published": "2020-03-09T07:45:00.000Z"
		},
		{
			"id": "https://example.com/blog/article/some-dummy-post/",
			"url": "https://example.com/blog/article/some-dummy-post/",
			"title": "Mastering Motion Design: A Creative Journey",
			"content_html":"<figure><img src=\"/media/flyhorse.gif\" alt=\"\"></figure>\n<p>Motion design is a captivating realm where art meets technology, and creativity takes center stage. In the dynamic landscape of digital content, motion design plays a pivotal role in conveying messages and captivating audiences. Whether it’s a sleek logo animation, a visually stunning video intro, or an immersive user interface transition, mastering motion design requires a blend of artistic prowess and technical finesse.</p>\n<!--more-->\n<h2 id=\"the-creative-process-unveiled\" tabindex=\"-1\"><a class=\"header-anchor\" href=\"#the-creative-process-unveiled\">The Creative Process Unveiled</a></h2>\n<p>At the heart of compelling motion design lies a meticulous creative process. <strong>Storyboarding</strong> serves as the initial blueprint, outlining the visual narrative and key elements. Once the direction is set, designers delve into the world of <strong>animation principles</strong>, leveraging techniques like squash and stretch, anticipation, and follow-through to breathe life into static elements. Tools like <strong>Adobe After Effects</strong> and <strong>Cinema 4D</strong> become the virtual canvas, where designers manipulate time and space to craft seamless and engaging motion sequences.</p>\n<h2 id=\"visual-storytelling-in-motion\" tabindex=\"-1\"><a class=\"header-anchor\" href=\"#visual-storytelling-in-motion\">Visual Storytelling in Motion</a></h2>\n<p>Motion design is more than just moving graphics; it’s a form of visual storytelling. The judicious use of <strong>color palettes</strong> and <strong>typography</strong> enhances the emotional impact, guiding the viewer through a captivating journey. <strong>Sound design</strong> further elevates the experience, synchronizing with the visuals to create a multisensory masterpiece. From product animations that showcase functionality to animated infographics that simplify complex data, motion design has the power to communicate messages in a way that resonates and lingers.</p>\n<h2 id=\"pushing-boundaries-and-staying-relevant\" tabindex=\"-1\"><a class=\"header-anchor\" href=\"#pushing-boundaries-and-staying-relevant\">Pushing Boundaries and Staying Relevant</a></h2>\n<p>As technology evolves, so does the landscape of motion design. Staying relevant in this dynamic field requires a commitment to continuous learning. Embracing emerging tools and techniques, exploring new design trends, and collaborating with other creatives are essential steps on the journey to mastering motion design. The fusion of art and technology in motion design opens doors to endless possibilities, making it an exciting and ever-evolving discipline.</p>\n<p><em>Explore the limitless potential of motion design and embark on a creative journey where every frame tells a story.</em></p>",
			"date_published": "2019-08-15T12:30:00.000Z"
		},
		{
			"id": "https://example.com/blog/article/another-post-with-footnotes/",
			"url": "https://example.com/blog/article/another-post-with-footnotes/",
			"title": "Unlocking the Secrets to Optimal Body Health",
			"content_html":"<figure><img src=\"/media/alexander-redl-d3bYmnZ0ank-unsplash.jpg\" alt=\"\"></figure>\n<p>Maintaining a healthy body is crucial for a fulfilling life. The journey to optimal well-being involves a holistic approach that encompasses <strong>nutrition</strong>, <strong>exercise</strong>, and the often overlooked aspect of the <strong>mind-body connection</strong>. Striking a balance among these elements is the key to unlocking the secrets of sustained health.</p>\n<!--more-->\n<h2 id=\"nourish-your-body-from-within\" tabindex=\"-1\"><a class=\"header-anchor\" href=\"#nourish-your-body-from-within\">Nourish Your Body from Within</a></h2>\n<p>Proper nutrition forms the foundation of a healthy body. Incorporate a diverse range of nutrient-rich foods into your diet, including fruits, vegetables, whole grains, and lean proteins. Hydration is equally important; ensure you drink an adequate amount of water throughout the day. Consider consulting with a nutritionist to tailor a diet plan that suits your individual needs and goals.</p>\n<h2 id=\"move-your-body%2C-ignite-your-energy\" tabindex=\"-1\"><a class=\"header-anchor\" href=\"#move-your-body%2C-ignite-your-energy\">Move Your Body, Ignite Your Energy</a></h2>\n<p>Regular exercise is a cornerstone of optimal body health<sup class=\"footnote-ref\"><a href=\"#fn1\" id=\"fnref1\">[1]</a></sup>. Engage in activities that you enjoy, whether it’s a brisk walk, a yoga session, or a high-intensity workout. Physical activity not only helps maintain a healthy weight but also releases endorphins, promoting a positive mood. Remember, finding an exercise routine that you love increases the likelihood of long-term commitment.</p>\n<h2 id=\"cultivate-a-strong-mind-body-connection\" tabindex=\"-1\"><a class=\"header-anchor\" href=\"#cultivate-a-strong-mind-body-connection\">Cultivate a Strong Mind-Body Connection</a></h2>\n<p>A holistic approach to health includes nurturing the connection between your mind and body. Practice mindfulness through techniques such as meditation<sup class=\"footnote-ref\"><a href=\"#fn2\" id=\"fnref2\">[2]</a></sup> and deep breathing. Manage stress by incorporating relaxation exercises into your daily routine. A resilient mind contributes to better decision-making, improved sleep, and overall well-being.</p>\n<p>In conclusion, achieving optimal body health requires a harmonious blend of nutrition, exercise, and a strong mind-body connection. Embrace a lifestyle that prioritizes these elements, and witness the transformative effects on your physical and mental well-being.</p>\n<hr class=\"footnotes-sep\">\n<section class=\"footnotes\">\n<ol class=\"footnotes-list\">\n<li id=\"fn1\" class=\"footnote-item\"><p>This is a footnote description. <a href=\"#fnref1\" class=\"footnote-backref\">↩︎</a></p>\n</li>\n<li id=\"fn2\" class=\"footnote-item\"><p>This is another footnote description. <a href=\"#fnref2\" class=\"footnote-backref\">↩︎</a></p>\n</li>\n</ol>\n</section>",
			"date_published": "2019-05-15T10:30:00.000Z"
		},
		{
			"id": "https://example.com/blog/article/post-with-portrait-featured-image/",
			"url": "https://example.com/blog/article/post-with-portrait-featured-image/",
			"title": "Unraveling the Marvels of Quartz Watches",
			"content_html":"<figure><img src=\"/media/greg-rakozy-Vwi2hXmC-jQ-unsplash.jpg\" alt=\"\"></figure>\n<p>In the world of horology, quartz watches have emerged as a technological marvel, revolutionizing timekeeping with precision and efficiency. Unlike their mechanical counterparts, quartz watches are powered by a small piece of quartz crystal, bringing a new era of accuracy to wristwear.</p>\n<h2 id=\"the-heart-of-quartz\" tabindex=\"-1\"><a class=\"header-anchor\" href=\"#the-heart-of-quartz\">The Heart of Quartz</a></h2>\n<p><strong>Quartz crystals</strong> play a pivotal role in the functionality of these watches. When an electrical current is applied to the crystal, it vibrates at a precise frequency, serving as the heartbeat of the timepiece. This reliable oscillation ensures that quartz watches maintain exceptional accuracy, often outperforming their mechanical counterparts.</p>\n<h2 id=\"unmatched-precision\" tabindex=\"-1\"><a class=\"header-anchor\" href=\"#unmatched-precision\">Unmatched Precision</a></h2>\n<p>One of the standout features of quartz watches is their unparalleled precision. With an accuracy rate measured in seconds per month, these timepieces are a reliable companion for those who value punctuality. The precision of quartz watches makes them ideal for various settings, from professional environments to outdoor adventures.</p>\n<h2 id=\"stylish-and-affordable\" tabindex=\"-1\"><a class=\"header-anchor\" href=\"#stylish-and-affordable\">Stylish and Affordable</a></h2>\n<p>Beyond their technical prowess, quartz watches come in a wide range of styles, catering to diverse tastes. From sleek and modern designs to classic and timeless aesthetics, quartz watches offer versatility without compromising on affordability. This makes them a popular choice for both watch enthusiasts and casual wearers.</p>\n<h2 id=\"embracing-the-future\" tabindex=\"-1\"><a class=\"header-anchor\" href=\"#embracing-the-future\">Embracing the Future</a></h2>\n<p>As technology continues to advance, quartz watches remain at the forefront of innovation. With features like solar-powered movements and smartwatch capabilities, these timepieces are adapting to the needs of the modern era while preserving the essence of accurate timekeeping.</p>\n<h3 id=\"in-conclusion\" tabindex=\"-1\"><a class=\"header-anchor\" href=\"#in-conclusion\">In Conclusion</a></h3>\n<p>Quartz watches have undoubtedly left an indelible mark on the world of horology. Their precision, affordability, and adaptability make them a timeless choice for those who appreciate both the art and science of timekeeping.</p>\n<p><em>Explore the world of quartz watches and experience the perfect blend of style and accuracy!</em></p>",
			"date_published": "2018-03-05T12:30:00.000Z"
		},
		{
			"id": "https://example.com/blog/article/post-about-astrology/",
			"url": "https://example.com/blog/article/post-about-astrology/",
			"title": "Unlocking the Mysteries of the Cosmos: A Journey into Astrology",
			"content_html":"<figure><img src=\"/media/viva-luna-studios-r_-onuwuWAU-unsplash.jpg\" alt=\"\"></figure>\n<p>Have you ever gazed up at the night sky and wondered about the celestial dance unfolding above? Astrology, an ancient and mystical practice, offers a unique lens through which we can explore the interconnectedness of the cosmos and our lives. Rooted in the belief that the positions and movements of celestial bodies influence human affairs and natural events, astrology has captivated minds for centuries.</p>\n<!--more-->\n<h2 id=\"the-cosmic-symphony\" tabindex=\"-1\"><a class=\"header-anchor\" href=\"#the-cosmic-symphony\">The Cosmic Symphony</a></h2>\n<p><strong>Astrology Basics:</strong><br>\nAstrology divides the sky into twelve sections, known as the zodiac, each associated with specific personality traits and characteristics. Your birth chart, a personalized map of the celestial bodies at the moment of your birth, serves as a cosmic fingerprint. It comprises the positions of the sun, moon, planets, and other celestial points, offering insights into your strengths, challenges, and life’s purpose.</p>\n<p><strong>Zodiac Signs Decoded:</strong><br>\nDiscover the unique qualities of each zodiac sign, from the adventurous Aries to the compassionate Pisces. Dive into the elements (fire, earth, air, and water) and modalities (cardinal, fixed, and mutable) that further define these astrological archetypes. Understanding your sun sign is just the beginning – explore the influence of your moon sign, rising sign, and planetary placements for a more nuanced cosmic perspective.</p>\n<p>Embark on a cosmic journey and unlock the profound wisdom that astrology holds. Whether you’re a seasoned stargazer or a curious newcomer, the celestial realm awaits with its timeless secrets.</p>",
			"date_published": "2017-02-21T12:30:00.000Z"
		},
		{
			"id": "https://example.com/blog/article/post-with-spoilers/",
			"url": "https://example.com/blog/article/post-with-spoilers/",
			"title": "Unveiling Thaedus: A Deep Dive into Invincible’s Mysterious Character",
			"content_html":"<figure><img src=\"/media/thaedus-from-invincible.png\" alt=\"\"></figure>\n<p>Thaedus, a character shrouded in mystery within the Invincible comic book series, has captivated readers with his enigmatic persona and formidable abilities. Created by writer Robert Kirkman and artist Cory Walker, Thaedus first made his appearance in Invincible #75, leaving fans eager to uncover the secrets behind this intriguing figure.</p>\n<h2 id=\"the-enigma-of-thaedus\" tabindex=\"-1\"><a class=\"header-anchor\" href=\"#the-enigma-of-thaedus\">The Enigma of Thaedus</a></h2>\n<p>Thaedus, also known as “The Unseen,” possesses powers that transcend traditional superhero capabilities. His ability to manipulate time and space sets him apart as a formidable force within the Invincible universe. The character’s intricate backstory unfolds as readers delve into the complex narrative, revealing connections to pivotal events <span class=\"spoiler\">(spoiler alert: such as the Viltrumite War)</span> that have shaped the Invincible storyline.</p>\n<p>Intricately woven into the narrative fabric of Invincible, Thaedus raises numerous questions that keep fans speculating about his true motives and origin. Is he a hero, a villain, or something entirely different? The suspense surrounding Thaedus adds an extra layer of excitement to the already gripping narrative, leaving readers on the edge of their seats as they anticipate the next revelation in this epic superhero saga.</p>\n<!--more-->\n<h2 id=\"exploring-thaedus%E2%80%99s-impact\" tabindex=\"-1\"><a class=\"header-anchor\" href=\"#exploring-thaedus%E2%80%99s-impact\">Exploring Thaedus’s Impact</a></h2>\n<p>Thaedus’s presence in the Invincible universe has had a profound impact on the characters and overarching plot. As readers follow Invincible’s journey, they encounter unexpected twists and turns influenced by the actions of this mysterious figure. The dynamic interplay between Thaedus and other key characters elevates the storytelling to new heights, creating a rich and engaging reading experience for fans of the series.</p>\n<p>In conclusion, Thaedus stands as a testament to the storytelling prowess of Kirkman and Walker, adding depth and complexity to the Invincible universe. As readers continue to uncover the layers of Thaedus’s character, they find themselves immersed in a world where the line between hero and villain becomes increasingly blurred.</p>\n<p><em>Explore more thrilling Invincible revelations.</em></p>\n<ul>\n<li><a href=\"https://www.skybound.com/invincible/\">Invincible Official Website</a></li>\n</ul>\n<p><em>Join the conversation on social media.</em></p>\n<ul>\n<li>Follow <a href=\"https://twitter.com/InvincibleHQ\">@InvincibleHQ</a> on Twitter</li>\n<li>Like <a href=\"https://www.facebook.com/InvincibleHQ\">Invincible on Facebook</a></li>\n</ul>\n<p><em>Discover other compelling comic book characters.</em></p>\n<ul>\n<li><a href=\"https://www.heroesdb.com/\">Comic Book Heroes Database</a></li>\n</ul>\n<p><em>Stay updated on the latest in the comic book world.</em></p>\n<ul>\n<li><a href=\"https://www.comicbooknewshub.com/\">Comic Book News Hub</a></li>\n</ul>",
			"date_published": "2015-08-15T16:45:00.000Z"
		},
		{
			"id": "https://example.com/blog/article/post-with-featured-image/",
			"url": "https://example.com/blog/article/post-with-featured-image/",
			"title": "Level Up Your Game: A Deep Dive into Video Game Development",
			"content_html":"<figure><img src=\"/media/video-games-team-fortress-2-pyro-character-engineer-character-wallpaper.jpg\" alt=\"\"></figure>\n<p>Embark on a thrilling adventure through the world of video game development, where creativity meets technology to bring virtual worlds to life. Whether you’re a seasoned game developer or a newcomer to the scene, understanding the nuances of game development is essential for crafting engaging and immersive gaming experiences. In this comprehensive guide, we’ll explore the key aspects of video game development, from the fundamentals of coding to the intricacies of game design. Get ready to level up your skills and create games that captivate players around the globe.</p>\n<!--more-->\n<h2 id=\"video-game-development-fundamentals\" tabindex=\"-1\"><a class=\"header-anchor\" href=\"#video-game-development-fundamentals\">Video Game Development Fundamentals</a></h2>\n<p>Video game development is a multifaceted journey that involves a fusion of coding, artistry, and storytelling. Begin your quest by delving into programming languages like C++ or UnityScript, the backbone of many game development engines. Familiarize yourself with popular game development frameworks such as Unity or Unreal Engine, which provide powerful tools and resources to streamline the development process. In this post, we’ll unravel the mysteries of game architecture, guiding you through the creation of characters, environments, and the interactive elements that make games come alive.</p>\n<h2 id=\"crafting-immersive-gameplay-experiences\" tabindex=\"-1\"><a class=\"header-anchor\" href=\"#crafting-immersive-gameplay-experiences\">Crafting Immersive Gameplay Experiences</a></h2>\n<p>Immersive gameplay experiences are at the heart of successful video games. Dive into the realm of game design, exploring the principles that govern player engagement and satisfaction. Understand the importance of creating compelling narratives, captivating visuals, and responsive user interfaces. We’ll also explore the significance of playtesting and user feedback in refining your game, ensuring it resonates with your target audience. Mastering these elements will not only elevate the quality of your games but also contribute to building a dedicated and enthusiastic player community.</p>\n<h2 id=\"conclusion%3A-level-up-your-game\" tabindex=\"-1\"><a class=\"header-anchor\" href=\"#conclusion%3A-level-up-your-game\">Conclusion: Level Up Your Game</a></h2>\n<p>In conclusion, video game development is a thrilling endeavor that invites you to become a digital storyteller and world creator. Stay tuned for practical insights, coding tips, and expert advice that will guide you through the challenges and triumphs of crafting memorable gaming experiences. Whether you’re creating indie gems or AAA titles, mastering video game development is the key to unlocking the full potential of your creative vision. Join us on this epic journey, and let’s level up the world of gaming together.</p>",
			"date_published": "2015-01-01T12:00:00.000Z"
		},
		{
			"id": "https://example.com/blog/article/local-audio-post/",
			"url": "https://example.com/blog/article/local-audio-post/",
			"title": "Surprising Parallels: Sonic the Hedgehog and Neon Genesis Evangelion",
			"content_html":"<p><div class=\"audio-file-player\"><audio controls src=\"/media/title-music-jp-version-sonic-the-hedgehog.mp3\"></audio></div></p>\n<p>Have you ever imagined a crossover between the high-speed adventures of Sonic the Hedgehog and the existential complexities of Neon Genesis Evangelion? At first glance, these two franchises seem worlds apart, one dominated by anthropomorphic animals and the other by giant mechs and psychological drama. However, a deeper dive into their narratives reveals surprising parallels that suggest a closer connection than one might expect.</p>\n<p>Both Sonic the Hedgehog and Neon Genesis Evangelion revolve around protagonists burdened with immense responsibilities. Sonic, the iconic blue blur, embodies speed and freedom as he races to thwart the plans of the nefarious Dr. Robotnik. Meanwhile, Shinji Ikari of Evangelion finds himself reluctantly piloting massive bio-mechanical constructs known as Evangelions to defend humanity against mysterious alien entities known as Angels. <span class=\"spoiler\">Fans of both series will notice that Sonic and Shinji share similar themes of isolation, identity crises, and the weight of their respective destinies.</span></p>\n<p>Delving further into their narratives, another striking similarity emerges: the presence of enigmatic organizations with hidden agendas. In Sonic’s world, the enigmatic Dr. Robotnik, also known as Eggman, manipulates events behind the scenes, employing advanced technology and legions of robots to achieve his goals. Similarly, in the world of Evangelion, the shadowy organization NERV pulls the strings, conducting experiments and engaging in political machinations to further its mysterious objectives. <span class=\"spoiler\">Both series feature protagonists who must navigate these murky waters while confronting their own inner demons and insecurities.</span></p>\n<p>As unexpected as it may seem, the parallels between Sonic the Hedgehog and Neon Genesis Evangelion offer intriguing insights into the universality of certain themes and motifs in storytelling. Whether it’s the struggle against overwhelming odds, the search for one’s place in the world, or the exploration of existential questions, these two seemingly disparate worlds ultimately converge on common ground, resonating with audiences in profound and unexpected ways. So next time you’re immersed in the adventures of Sonic or contemplating the mysteries of Evangelion, take a moment to appreciate the deeper connections that bind these iconic franchises together.</p>",
			"date_published": "2010-10-10T07:10:10.000Z"
		},
		{
			"id": "https://example.com/blog/article/local-video-post/",
			"url": "https://example.com/blog/article/local-video-post/",
			"title": "Big Buck BUNNY - Trailer",
			"content_html":"<p><video controls=\"\"><source src=\"/media/Big-buck-bunny_trailer.webm\" type=\"audio/mpeg\"></video></p>\n<p>In the thick and undisturbed forest, sparkling spring has finally arrived, and all creatures, big or small, enjoy life. However, Big Buck Bunny–an enormous, fluffy, and utterly adorable rabbit–is facing a crisis: the ruthless, loud, bullying gang of a flying squirrel is heartlessly harassing him, determined to squash his happiness. Now, this means war. But who will win? <a href=\"https://www.imdb.com/title/tt1254207/\">(Source)</a></p>",
			"date_published": "2008-04-10T10:30:00.000Z"
		}]
}
