Articles

Article 1 Customizing Vuetify Example 1
{
  "article-1": {
    "title": "Article 1",
    "slug": "article-1",
    "tags": [
      "tag 1aa",
      "tag 2aa",
      "tag 3",
      "tag 4",
      "tag 5"
    ],
    "html": "<h1 id=\"heading-1!asss\">Heading 1!asss</h1>\n<p><code>inline code test</code></p>\n<h2 id=\"i-can%E2%80%99t-lie.-this-isss-amazing!!!\">I can’t lie. This isss amazing!!! 💻  😄</h2>\n<hr>\n<div class=\"warning custom-block\"><p class=\"custom-block-title\">WARNING</p>\n<p>⚠️ Something you should know about</p>\n</div>\n<div class=\"tip custom-block\"><p class=\"custom-block-title\">TIP</p>\n<p>👍 Something that’s will be the key to your success</p>\n</div>\n<h1 id=\"heading-1sss\">heading 1sss</h1>\n<h2 id=\"heading-2ssss\">heading 2ssss</h2>\n<h1 id=\"heading-2\">heading 2</h1>\n<ul>\n<li>item 1</li>\n<li>item 2\n<ul>\n<li>item 1</li>\n</ul>\n</li>\n<li>item 3wss</li>\n</ul>\n<div class=\"tip custom-block\"><p class=\"custom-block-title\">TIP</p>\n<p>This is a tip</p>\n</div>\n<div class=\"warning custom-block\"><p class=\"custom-block-title\">WARNING</p>\n<p>This is a warning</p>\n</div>\n<p>abqaa</p>\n<div class=\"danger custom-block\"><p class=\"custom-block-title\">WARNING</p>\n<p>This is a dangerous warning</p>\n</div>\n<div class=\"danger custom-block\"><p class=\"custom-block-title\">STOP :wrench:</p>\n<p>Danger zone, do not proceed!</p>\n</div>\n<h1 id=\"head-1\">head 1</h1>\n<p><a href=\"https://www.google.com\" target=\"_blank\" rel=\"noopener\">I’m an inline-style link</a></p>\n<!-- \n![Image Test](~/assets/hero1.png) -->\n<h1 id=\"heading-1as\">heading 1as</h1>\n<h2 id=\"heading-2aaass\">Heading 2aaass</h2>\n<p>ssss</p>\n<p>😄</p>\n<h1 id=\"heading-1cb\">heading 1cb</h1>\n<h2 id=\"heading-2b\">heading 2b</h2>\n<h2 id=\"heading-2-2\">heading 2</h2>\n<h3 id=\"heading-3\">heading 3</h3>\n",
    "date": "12-04-2019",
    "description": "Some basic description for this article to use as aan excerpt. It should include good info to entice someones to click to read more."
  },
  "customizing-vuetify": {
    "title": "Customizing Vuetify",
    "slug": "customizing-vuetify",
    "tags": [],
    "html": "<p>After much searching, researching, and trial and error, I was able to get a working version of customizing Vuetify.</p>\n<p>If for example you use <code>create-nuxt-app</code>, you can override the default values for the variables before requiring the Vuetify <code>app.styl</code> file.</p>\n<pre class=\"language-stylus\"><code class=\"language-stylus\"><span class=\"token variable-declaration\"><span class=\"token variable\">$font-size-root</span> <span class=\"token operator\">=</span> <span class=\"token number\">15</span>px</span>\n<span class=\"token variable-declaration\"><span class=\"token variable\">$body-font-family</span> <span class=\"token operator\">=</span> <span class=\"token string\">'Open Sans'</span></span>\n<span class=\"token variable-declaration\"><span class=\"token variable\">$alert-font-size</span> <span class=\"token operator\">=</span> <span class=\"token number\">18</span>px</span>\n<span class=\"token variable-declaration\"><span class=\"token variable\">$button-font-size</span> <span class=\"token operator\">=</span> <span class=\"token number\">16</span>px</span>\n\n<span class=\"token atrule-declaration\"><span class=\"token atrule\">@require</span> <span class=\"token string\">'~vuetify/src/stylus/app.styl'</span></span>\n\n<span class=\"token selector\">body</span>\n  <span class=\"token property-declaration\"><span class=\"token property\">font-family</span><span class=\"token punctuation\">:</span> $body-font-family</span>\n  <span class=\"token property-declaration\"><span class=\"token property\">font-size</span><span class=\"token punctuation\">:</span> $font-size-root</span>\n  <span class=\"token property-declaration\"><span class=\"token property\">font-weight</span><span class=\"token punctuation\">:</span> $font-weights<span class=\"token operator\">.</span>regular</span>\n  <span class=\"token property-declaration\"><span class=\"token property\">line-height</span><span class=\"token punctuation\">:</span> $line-height-root</span>\n</code></pre>\n<pre class=\"language-js\"><code class=\"language-js\">  <span class=\"token function\">asyncData</span><span class=\"token punctuation\">(</span><span class=\"token parameter\"><span class=\"token punctuation\">{</span> $cmsApi<span class=\"token punctuation\">,</span> params <span class=\"token punctuation\">}</span></span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n    <span class=\"token keyword\">const</span> article <span class=\"token operator\">=</span> $cmsApi<span class=\"token punctuation\">.</span><span class=\"token function\">get</span><span class=\"token punctuation\">(</span><span class=\"token string\">'articles'</span><span class=\"token punctuation\">,</span> params<span class=\"token punctuation\">.</span>slug<span class=\"token punctuation\">)</span>\n    <span class=\"token keyword\">return</span> <span class=\"token punctuation\">{</span> article <span class=\"token punctuation\">}</span>\n  <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n</code></pre>\n"
  },
  "example-1": {
    "title": "Example 1",
    "slug": "example-1",
    "tags": [],
    "html": "<p><strong>Advertisement 😃</strong></p>\n<h1 id=\"example-1\">EXAMPLE 1</h1>\n<div class=\"warning custom-block\"><p class=\"custom-block-title\">WARNING</p>\n<p><em>here be dragons</em></p>\n</div>\n<ul>\n<li><strong><a href=\"https://nodeca.github.io/pica/demo/\" target=\"_blank\" rel=\"noopener\">pica</a></strong> - high quality and fast image<br>\nresize in browser.</li>\n<li><strong><a href=\"https://github.com/nodeca/babelfish/\" target=\"_blank\" rel=\"noopener\">babelfish</a></strong> - developer friendly<br>\ni18n with plurals support and easy syntax.</li>\n</ul>\n<p>You will like those projects!</p>\n<hr>\n<ul>\n<li>item asssss</li>\n<li>item</li>\n<li>item 12dsssss</li>\n<li>item 12dsssss</li>\n<li>item 2\n<ul>\n<li>item abde</li>\n</ul>\n</li>\n<li>item</li>\n</ul>\n<h1 id=\"h1-heading-ss\">h1 Heading 😎 sS</h1>\n<h2 id=\"h2-heading\">h2 Heading</h2>\n<h3 id=\"h3-heading\">h3 Heading</h3>\n<h4 id=\"h4-heading\">h4 Heading</h4>\n<h5 id=\"h5-heading\">h5 Heading</h5>\n<h6 id=\"h6-heading\">h6 Heading</h6>\n<h2 id=\"horizontal-rules\">Horizontal Rules</h2>\n<hr>\n<h2 id=\"typographic-replacements\">Typographic replacements</h2>\n<p>Enable typographer option to see result.</p>\n<p>© © ® ® ™ ™ § § ±</p>\n<p>test… test… test… test?.. test!..</p>\n<p>!!! ??? ,  – —</p>\n<p>“Smartypants, double quotes” and ‘single quotes’</p>\n<h2 id=\"emphasis\">Emphasis</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<h2 id=\"blockquotes\">Blockquotes</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<h2 id=\"lists\">Lists</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<h2 id=\"code\">Code</h2>\n<p>Inline <code>code</code></p>\n<p>Indented code</p>\n<pre><code>// Some comments\nline 1 of code\nline 2 of code\nline 3 of code\n</code></pre>\n<p>Block code “fences”</p>\n<pre class=\"language-jsx\"><code class=\"language-jsx\"><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>template</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>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>h1</span> <span class=\"token attr-name\">v-text</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">\"</span>project.title<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>div</span> <span class=\"token attr-name\">v-html</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">\"</span>project.html<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>div</span><span class=\"token punctuation\">></span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>template</span><span class=\"token punctuation\">></span></span>\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>\n</code></pre>\n<h2 id=\"tables\">Tables</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<hr>\n<p>Left &amp; Right aligned columns</p>\n<table>\n<thead>\n<tr>\n<th style=\"text-align:left\">Option</th>\n<th style=\"text-align:right\">Description</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td style=\"text-align:left\">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:left\">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:left\">ext</td>\n<td style=\"text-align:right\">extension to be used for dest files.</td>\n</tr>\n</tbody>\n</table>\n<h2 id=\"links\">Links</h2>\n<p><a href=\"http://dev.nodeca.com\" target=\"_blank\" rel=\"noopener\">link text</a></p>\n<p><a href=\"http://nodeca.github.io/pica/demo/\" title=\"title text!\" target=\"_blank\" rel=\"noopener\">link with title</a></p>\n<p>Autoconverted link <a href=\"https://github.com/nodeca/pica\" target=\"_blank\" rel=\"noopener\">https://github.com/nodeca/pica</a> (enable linkify to see)</p>\n<h2 id=\"images\">Images</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<p>Like links, Images also have a footnote style syntax</p>\n<p><img src=\"https://octodex.github.com/images/dojocat.jpg\" alt=\"Alt text\" title=\"The Dojocat\"></p>\n<p>With a reference later in the document defining the URL location:</p>\n<h2 id=\"plugins\">Plugins</h2>\n<p>The killer feature of <code>markdown-it</code> is very effective support of<br>\n<a href=\"https://www.npmjs.org/browse/keyword/markdown-it-plugin\" target=\"_blank\" rel=\"noopener\">syntax plugins</a>.</p>\n<h3 id=\"emojies\"><a href=\"https://github.com/markdown-it/markdown-it-emoji\" target=\"_blank\" rel=\"noopener\">Emojies</a></h3>\n<blockquote>\n<p>Classic markup: 😉 :crush: 😢 :tear: 😆 😋</p>\n<p>Shortcuts (emoticons): 😃 😦 😎 😉</p>\n</blockquote>\n<p>see <a href=\"https://github.com/markdown-it/markdown-it-emoji#change-output\" target=\"_blank\" rel=\"noopener\">how to change output</a> with twemoji.</p>\n<!-- ### [Subscript](https://github.com/markdown-it/markdown-it-sub) / [Superscript](https://github.com/markdown-it/markdown-it-sup)\n\n- 19^th^\n- H~2~O -->\n<!-- ### [\\<ins>](https://github.com/markdown-it/markdown-it-ins)\n\n++Inserted text++\n\n\n### [\\<mark>](https://github.com/markdown-it/markdown-it-mark)\n\n==Marked text== -->\n<!-- ### [Footnotes](https://github.com/markdown-it/markdown-it-footnote)\n\nFootnote 1 link[^first].\n\nFootnote 2 link[^second].\n\nInline footnote^[Text of inline footnote] definition.\n\nDuplicated footnote reference[^second].\n\n[^first]: Footnote **can have markup**\n\n    and multiple paragraphs.\n\n[^second]: Footnote text. -->\n<h3 id=\"definition-lists\"><a href=\"https://github.com/markdown-it/markdown-it-deflist\" target=\"_blank\" rel=\"noopener\">Definition lists</a></h3>\n<dl>\n<dt>Term 1</dt>\n<dd>\n<p>Definition 1<br>\nwith lazy continuation.</p>\n</dd>\n<dt>Term 2 with <em>inline markup</em></dt>\n<dd>\n<p>Definition 2</p>\n<pre><code>  { some code, part of Definition 2 }\n</code></pre>\n<p>Third paragraph of definition 2.</p>\n</dd>\n</dl>\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<h3 id=\"abbreviations\"><a href=\"https://github.com/markdown-it/markdown-it-abbr\" target=\"_blank\" rel=\"noopener\">Abbreviations</a></h3>\n<p>This is HTML abbreviation example.</p>\n<p>It converts “HTML”, but keep intact partial entries like “xxxHTMLyyy” and so on.</p>\n<p>*[HTML]: Hyper Text Markup Language</p>\n<h3 id=\"custom-containers\"><a href=\"https://github.com/markdown-it/markdown-it-container\" target=\"_blank\" rel=\"noopener\">Custom containers</a></h3>\n<div class=\"warning custom-block\"><p class=\"custom-block-title\">WARNING</p>\n<p><em>here be dragons</em></p>\n</div>\n"
  }
}