My Blog

<div class="min-h-screen flex flex-col"> <main class="flex-1 w-10/12 max-w-screen-sm md:max-w-screen-md mx-auto"> <p class="text-5xl md:text-6xl font-black py-10 md:py-20 leading-tight"> Mainstream Sheep Records&lt;br&gt;主流羊音盤 </p> <nav> <ul class="flex py-2 border-b-2 mb-6"> <li class="mr-6"><a href="/">Home</a></li> <li class="mr-6"><a href="/tags">Tags</a></li> <li class="mr-6"><a href="/about">About</a></li> <li class="mr-6"><span class="cursor-pointer" id="toggleDarkMode">Dark mode</spam></li> </ul> </nav> &lt;div class=&quot;py-4&quot;&gt; &lt;p&gt; &lt;span class=&quot;text-2xl sm:text-4xl font-bold hover:text-blue-700 leading-tight&quot;&gt;&lt;a href=&quot;/posts/2020/07/Kotlin/&quot;&gt;Kotlin&lt;/a&gt;&lt;/span&gt; &lt;span class=&quot;text-base sm:text-2xl font-normal&quot;&gt; &amp;middot; &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum&lt;/p&gt; &lt;!-- excerpt --&gt; &lt;h1&gt;h1 Heading&lt;/h1&gt; &lt;h2&gt;h2 Heading&lt;/h2&gt; &lt;h3&gt;h3 Heading&lt;/h3&gt; &lt;h4&gt;h4 Heading&lt;/h4&gt; &lt;h5&gt;h5 Heading&lt;/h5&gt; &lt;h6&gt;h6 Heading&lt;/h6&gt; &lt;h2&gt;Horizontal Rules&lt;/h2&gt; &lt;hr&gt; &lt;h2&gt;Emphasis&lt;/h2&gt; &lt;p&gt;&lt;strong&gt;This is bold text&lt;/strong&gt;&lt;/p&gt; &lt;p&gt;&lt;strong&gt;This is bold text&lt;/strong&gt;&lt;/p&gt; &lt;p&gt;&lt;em&gt;This is italic text&lt;/em&gt;&lt;/p&gt; &lt;p&gt;&lt;em&gt;This is italic text&lt;/em&gt;&lt;/p&gt; &lt;p&gt;&lt;s&gt;Strikethrough&lt;/s&gt;&lt;/p&gt; &lt;h2&gt;Blockquotes&lt;/h2&gt; &lt;blockquote&gt; &lt;p&gt;Blockquotes can also be nested...&lt;/p&gt; &lt;blockquote&gt; &lt;p&gt;...by using additional greater-than signs right next to each other...&lt;/p&gt; &lt;blockquote&gt; &lt;p&gt;...or with spaces between arrows.&lt;/p&gt; &lt;/blockquote&gt; &lt;/blockquote&gt; &lt;/blockquote&gt; &lt;h2&gt;Lists&lt;/h2&gt; &lt;p&gt;Unordered&lt;/p&gt; &lt;ul&gt; &lt;li&gt;Create a list by starting a line with &lt;code&gt;+&lt;/code&gt;, &lt;code&gt;-&lt;/code&gt;, or &lt;code&gt;*&lt;/code&gt;&lt;/li&gt; &lt;li&gt;Sub-lists are made by indenting 2 spaces: &lt;ul&gt; &lt;li&gt;Marker character change forces new list start: &lt;ul&gt; &lt;li&gt;Ac tristique libero volutpat at&lt;/li&gt; &lt;/ul&gt; &lt;ul&gt; &lt;li&gt;Facilisis in pretium nisl aliquet&lt;/li&gt; &lt;/ul&gt; &lt;ul&gt; &lt;li&gt;Nulla volutpat aliquam velit&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;li&gt;Very easy!&lt;/li&gt; &lt;/ul&gt; &lt;p&gt;Ordered&lt;/p&gt; &lt;ol&gt; &lt;li&gt; &lt;p&gt;Lorem ipsum dolor sit amet&lt;/p&gt; &lt;/li&gt; &lt;li&gt; &lt;p&gt;Consectetur adipiscing elit&lt;/p&gt; &lt;/li&gt; &lt;li&gt; &lt;p&gt;Integer molestie lorem at massa&lt;/p&gt; &lt;/li&gt; &lt;li&gt; &lt;p&gt;You can use sequential numbers...&lt;/p&gt; &lt;/li&gt; &lt;li&gt; &lt;p&gt;...or keep all the numbers as &lt;code&gt;1.&lt;/code&gt;&lt;/p&gt; &lt;/li&gt; &lt;/ol&gt; &lt;p&gt;Start numbering with offset:&lt;/p&gt; &lt;ol start=&quot;57&quot;&gt; &lt;li&gt;foo&lt;/li&gt; &lt;li&gt;bar&lt;/li&gt; &lt;/ol&gt; &lt;h2&gt;Code&lt;/h2&gt; &lt;p&gt;Inline &lt;code&gt;code&lt;/code&gt;&lt;/p&gt; &lt;p&gt;Indented code&lt;/p&gt; &lt;pre&gt;&lt;code&gt;// Some comments line 1 of code line 2 of code line 3 of code &lt;/code&gt;&lt;/pre&gt; &lt;p&gt;Block code &amp;quot;fences&amp;quot;&lt;/p&gt; &lt;pre&gt;&lt;code&gt;Sample text here... &lt;/code&gt;&lt;/pre&gt; &lt;p&gt;Syntax highlighting&lt;/p&gt; &lt;pre&gt;&lt;code class=&quot;language-js&quot;&gt;var foo = function (bar) { return bar++; }; console.log(foo(5)); &lt;/code&gt;&lt;/pre&gt; &lt;h2&gt;Tables&lt;/h2&gt; &lt;table&gt; &lt;thead&gt; &lt;tr&gt; &lt;th&gt;Option&lt;/th&gt; &lt;th&gt;Description&lt;/th&gt; &lt;/tr&gt; &lt;/thead&gt; &lt;tbody&gt; &lt;tr&gt; &lt;td&gt;data&lt;/td&gt; &lt;td&gt;path to data files to supply the data that will be passed into templates.&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;engine&lt;/td&gt; &lt;td&gt;engine to be used for processing templates. Handlebars is the default.&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;ext&lt;/td&gt; &lt;td&gt;extension to be used for dest files.&lt;/td&gt; &lt;/tr&gt; &lt;/tbody&gt; &lt;/table&gt; &lt;p&gt;Right aligned columns&lt;/p&gt; &lt;table&gt; &lt;thead&gt; &lt;tr&gt; &lt;th style=&quot;text-align:right&quot;&gt;Option&lt;/th&gt; &lt;th style=&quot;text-align:right&quot;&gt;Description&lt;/th&gt; &lt;/tr&gt; &lt;/thead&gt; &lt;tbody&gt; &lt;tr&gt; &lt;td style=&quot;text-align:right&quot;&gt;data&lt;/td&gt; &lt;td style=&quot;text-align:right&quot;&gt;path to data files to supply the data that will be passed into templates.&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td style=&quot;text-align:right&quot;&gt;engine&lt;/td&gt; &lt;td style=&quot;text-align:right&quot;&gt;engine to be used for processing templates. Handlebars is the default.&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td style=&quot;text-align:right&quot;&gt;ext&lt;/td&gt; &lt;td style=&quot;text-align:right&quot;&gt;extension to be used for dest files.&lt;/td&gt; &lt;/tr&gt; &lt;/tbody&gt; &lt;/table&gt; &lt;h2&gt;Links&lt;/h2&gt; &lt;p&gt;&lt;a href=&quot;http://dev.nodeca.com&quot;&gt;link text&lt;/a&gt;&lt;/p&gt; &lt;p&gt;&lt;a href=&quot;http://nodeca.github.io/pica/demo/&quot; title=&quot;title text!&quot;&gt;link with title&lt;/a&gt;&lt;/p&gt; &lt;p&gt;Autoconverted link https://github.com/nodeca/pica (enable linkify to see)&lt;/p&gt; min read&lt;/span&gt; &lt;/p&gt; &lt;em&gt;2020-07-01&lt;/em&gt; &lt;p class=&quot;mt-4&quot;&gt;...&lt;/p&gt; &lt;div class=&quot;flex justify-between items-center mt-4&quot;&gt; &lt;div class=&quot;flex-1 pr-4&quot;&gt; &lt;a href=&quot;/tags/kotlin&quot; class=&quot;&quot;&gt; &lt;div class=&quot;post-tag&quot;&gt;kotlin&lt;/div&gt; &lt;/a&gt; &lt;a href=&quot;/tags/android&quot; class=&quot;&quot;&gt; &lt;div class=&quot;post-tag&quot;&gt;android&lt;/div&gt; &lt;/a&gt; &lt;/div&gt; &lt;a class=&quot;flex-none hover:underline font-semibold text-blue-700&quot; href=&quot;/posts/2020/07/Kotlin/&quot;&gt;Read this post &amp;rarr;&lt;/a&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class=&quot;py-4&quot;&gt; &lt;p&gt; &lt;span class=&quot;text-2xl sm:text-4xl font-bold hover:text-blue-700 leading-tight&quot;&gt;&lt;a href=&quot;/posts/2020/07/Flutter/&quot;&gt;Flutter&lt;/a&gt;&lt;/span&gt; &lt;span class=&quot;text-base sm:text-2xl font-normal&quot;&gt; &amp;middot; &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.&lt;/p&gt; &lt;!-- excerpt --&gt; &lt;h1&gt;h1 Heading&lt;/h1&gt; &lt;h2&gt;h2 Heading&lt;/h2&gt; &lt;h3&gt;h3 Heading&lt;/h3&gt; &lt;h4&gt;h4 Heading&lt;/h4&gt; &lt;h5&gt;h5 Heading&lt;/h5&gt; &lt;h6&gt;h6 Heading&lt;/h6&gt; &lt;h2&gt;Horizontal Rules&lt;/h2&gt; &lt;hr&gt; &lt;h2&gt;Emphasis&lt;/h2&gt; &lt;p&gt;&lt;strong&gt;This is bold text&lt;/strong&gt;&lt;/p&gt; &lt;p&gt;&lt;strong&gt;This is bold text&lt;/strong&gt;&lt;/p&gt; &lt;p&gt;&lt;em&gt;This is italic text&lt;/em&gt;&lt;/p&gt; &lt;p&gt;&lt;em&gt;This is italic text&lt;/em&gt;&lt;/p&gt; &lt;p&gt;&lt;s&gt;Strikethrough&lt;/s&gt;&lt;/p&gt; &lt;h2&gt;Blockquotes&lt;/h2&gt; &lt;blockquote&gt; &lt;p&gt;Blockquotes can also be nested...&lt;/p&gt; &lt;blockquote&gt; &lt;p&gt;...by using additional greater-than signs right next to each other...&lt;/p&gt; &lt;blockquote&gt; &lt;p&gt;...or with spaces between arrows.&lt;/p&gt; &lt;/blockquote&gt; &lt;/blockquote&gt; &lt;/blockquote&gt; &lt;h2&gt;Lists&lt;/h2&gt; &lt;p&gt;Unordered&lt;/p&gt; &lt;ul&gt; &lt;li&gt;Create a list by starting a line with &lt;code&gt;+&lt;/code&gt;, &lt;code&gt;-&lt;/code&gt;, or &lt;code&gt;*&lt;/code&gt;&lt;/li&gt; &lt;li&gt;Sub-lists are made by indenting 2 spaces: &lt;ul&gt; &lt;li&gt;Marker character change forces new list start: &lt;ul&gt; &lt;li&gt;Ac tristique libero volutpat at&lt;/li&gt; &lt;/ul&gt; &lt;ul&gt; &lt;li&gt;Facilisis in pretium nisl aliquet&lt;/li&gt; &lt;/ul&gt; &lt;ul&gt; &lt;li&gt;Nulla volutpat aliquam velit&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;li&gt;Very easy!&lt;/li&gt; &lt;/ul&gt; &lt;p&gt;Ordered&lt;/p&gt; &lt;ol&gt; &lt;li&gt; &lt;p&gt;Lorem ipsum dolor sit amet&lt;/p&gt; &lt;/li&gt; &lt;li&gt; &lt;p&gt;Consectetur adipiscing elit&lt;/p&gt; &lt;/li&gt; &lt;li&gt; &lt;p&gt;Integer molestie lorem at massa&lt;/p&gt; &lt;/li&gt; &lt;li&gt; &lt;p&gt;You can use sequential numbers...&lt;/p&gt; &lt;/li&gt; &lt;li&gt; &lt;p&gt;...or keep all the numbers as &lt;code&gt;1.&lt;/code&gt;&lt;/p&gt; &lt;/li&gt; &lt;/ol&gt; &lt;p&gt;Start numbering with offset:&lt;/p&gt; &lt;ol start=&quot;57&quot;&gt; &lt;li&gt;foo&lt;/li&gt; &lt;li&gt;bar&lt;/li&gt; &lt;/ol&gt; &lt;h2&gt;Code&lt;/h2&gt; &lt;p&gt;Inline &lt;code&gt;code&lt;/code&gt;&lt;/p&gt; &lt;p&gt;Indented code&lt;/p&gt; &lt;pre&gt;&lt;code&gt;// Some comments line 1 of code line 2 of code line 3 of code &lt;/code&gt;&lt;/pre&gt; &lt;p&gt;Block code &amp;quot;fences&amp;quot;&lt;/p&gt; &lt;pre&gt;&lt;code&gt;Sample text here... &lt;/code&gt;&lt;/pre&gt; &lt;p&gt;Syntax highlighting&lt;/p&gt; &lt;pre&gt;&lt;code class=&quot;language-js&quot;&gt;var foo = function (bar) { return bar++; }; console.log(foo(5)); &lt;/code&gt;&lt;/pre&gt; &lt;h2&gt;Tables&lt;/h2&gt; &lt;table&gt; &lt;thead&gt; &lt;tr&gt; &lt;th&gt;Option&lt;/th&gt; &lt;th&gt;Description&lt;/th&gt; &lt;/tr&gt; &lt;/thead&gt; &lt;tbody&gt; &lt;tr&gt; &lt;td&gt;data&lt;/td&gt; &lt;td&gt;path to data files to supply the data that will be passed into templates.&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;engine&lt;/td&gt; &lt;td&gt;engine to be used for processing templates. Handlebars is the default.&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;ext&lt;/td&gt; &lt;td&gt;extension to be used for dest files.&lt;/td&gt; &lt;/tr&gt; &lt;/tbody&gt; &lt;/table&gt; &lt;p&gt;Right aligned columns&lt;/p&gt; &lt;table&gt; &lt;thead&gt; &lt;tr&gt; &lt;th style=&quot;text-align:right&quot;&gt;Option&lt;/th&gt; &lt;th style=&quot;text-align:right&quot;&gt;Description&lt;/th&gt; &lt;/tr&gt; &lt;/thead&gt; &lt;tbody&gt; &lt;tr&gt; &lt;td style=&quot;text-align:right&quot;&gt;data&lt;/td&gt; &lt;td style=&quot;text-align:right&quot;&gt;path to data files to supply the data that will be passed into templates.&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td style=&quot;text-align:right&quot;&gt;engine&lt;/td&gt; &lt;td style=&quot;text-align:right&quot;&gt;engine to be used for processing templates. Handlebars is the default.&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td style=&quot;text-align:right&quot;&gt;ext&lt;/td&gt; &lt;td style=&quot;text-align:right&quot;&gt;extension to be used for dest files.&lt;/td&gt; &lt;/tr&gt; &lt;/tbody&gt; &lt;/table&gt; &lt;h2&gt;Links&lt;/h2&gt; &lt;p&gt;&lt;a href=&quot;http://dev.nodeca.com&quot;&gt;link text&lt;/a&gt;&lt;/p&gt; &lt;p&gt;&lt;a href=&quot;http://nodeca.github.io/pica/demo/&quot; title=&quot;title text!&quot;&gt;link with title&lt;/a&gt;&lt;/p&gt; &lt;p&gt;Autoconverted link https://github.com/nodeca/pica (enable linkify to see)&lt;/p&gt; min read&lt;/span&gt; &lt;/p&gt; &lt;em&gt;2020-07-01&lt;/em&gt; &lt;p class=&quot;mt-4&quot;&gt;...&lt;/p&gt; &lt;div class=&quot;flex justify-between items-center mt-4&quot;&gt; &lt;div class=&quot;flex-1 pr-4&quot;&gt; &lt;a href=&quot;/tags/android&quot; class=&quot;&quot;&gt; &lt;div class=&quot;post-tag&quot;&gt;android&lt;/div&gt; &lt;/a&gt; &lt;a href=&quot;/tags/flutter&quot; class=&quot;&quot;&gt; &lt;div class=&quot;post-tag&quot;&gt;flutter&lt;/div&gt; &lt;/a&gt; &lt;/div&gt; &lt;a class=&quot;flex-none hover:underline font-semibold text-blue-700&quot; href=&quot;/posts/2020/07/Flutter/&quot;&gt;Read this post &amp;rarr;&lt;/a&gt; &lt;/div&gt; &lt;/div&gt; &lt;nav class=&quot;flex justify-center mt-8&quot;&gt; &lt;div class=&quot;inline-flex&quot;&gt; &lt;button class=&quot;paginator-text cursor-not-allowed&quot;&gt; First &lt;/button&gt; &lt;button class=&quot;py-2 px-4 cursor-not-allowed&quot;&gt; &lt;img src=&quot;/assets/img/chevron-left.svg&quot; alt=&quot;prev&quot;&gt; &lt;/button&gt; &lt;a href=&quot;/&quot; aria-current=&quot;page&quot;&gt; &lt;button class=&quot;border bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-2 px-4&quot;&gt; 1 &lt;/button&gt; &lt;/a&gt; &lt;button class=&quot;py-2 px-4 cursor-not-allowed&quot;&gt; &lt;img src=&quot;/assets/img/chevron-right.svg&quot; alt=&quot;next&quot;&gt; &lt;/button&gt; &lt;button class=&quot;paginator-text cursor-not-allowed&quot;&gt; Last &lt;/button&gt; &lt;/div&gt; &lt;/nav&gt; </main> <footer class="mt-8 bg-gray-200 dark:bg-gray-900 py-8 flex-shrink-0"> <div class="max-w-screen-sm md:max-w-screen-md mx-auto px-8"> <p class="text-sm py-2 text-right"> <a href=https://github.io/kohrongying>Github</a> · <a href=https://www.linkedin.com/in/rongyingkoh/>LinkedIn</a> </p> </div> </footer> </div>