showcase.md (10037B)
1 --- 2 title: "Showcase" 3 date: "2018-07-18" 4 author: "Hello Robot" 5 toc: true 6 LiveDoc: true 7 lastmod: "2024-08-25" 8 cover: /img/BoyWithMachine.png 9 --- 10 11 # Header 1: Some Formatting 12 13 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec interdum 14 metus. Aenean rutrum ligula sodales ex auctor, sed tempus dui mollis. Curabitur 15 ipsum dui, aliquet nec commodo at, tristique eget ante. **Donec quis dolor nec 16 nunc mollis interdum vel in purus**. Sed vitae leo scelerisque, sollicitudin 17 elit sed, congue ante. In augue nisl, vestibulum commodo est a, tristique 18 porttitor est. Proin laoreet iaculis ornare. Nullam ut neque quam. 19 20 > Fusce pharetra suscipit orci nec tempor. Quisque vitae sem sit amet sem mollis 21 > consequat. Sed at imperdiet lorem. Vestibulum pharetra faucibus odio, ac 22 > feugiat tellus sollicitudin at. Pellentesque varius tristique mi imperdiet 23 > dapibus. Duis orci odio, sodales lacinia venenatis sit amet, feugiat et diam. 24 25 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec interdum 26 metus. Aenean rutrum ligula sodales ex auctor, sed tempus dui mollis. Curabitur 27 ipsum dui, aliquet nec commodo at, tristique eget ante. **Donec quis dolor nec 28 nunc mollis interdum vel in purus**. Sed vitae leo scelerisque, sollicitudin 29 elit sed, congue ante. In augue nisl, vestibulum commodo est a, tristique 30 porttitor est. Proin laoreet iaculis ornare. Nullam ut neque quam. 31 32 ## Header 2: Tabbed Containers 33 34 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec interdum 35 metus. Aenean rutrum ligula sodales ex auctor, sed tempus dui mollis. Curabitur 36 ipsum dui, aliquet nec commodo at, tristique eget ante. **Donec quis dolor nec 37 nunc mollis interdum vel in purus**. Sed vitae leo scelerisque, sollicitudin 38 elit sed, congue ante. In augue nisl, vestibulum commodo est a, tristique 39 porttitor est. Proin laoreet iaculis ornare. Nullam ut neque quam. 40 41 {{< tabbed >}} 42 {{% tab name="english" %}} 43 > [I]t is unquestionable, as we remarked above, that every human action has its 44 starting-point in a dissatisfaction, and thereby in a feeling of absence. We 45 should not act if we did not set before ourselves an end, and we seek a thing 46 only because we feel the lack of it. Our action proceeds thus from "nothing" to 47 "something," and its very essence is to embroider "something" on the canvas of 48 "nothing." The truth is that the "nothing" concerned here is the absence not so 49 much of a thing as of a utility. If I bring a visitor into a room that I have 50 not yet furnished, I say to him that "there is nothing in it." Yet I know the 51 room is full of air; but, as we do not sit on air, the room truly contains 52 nothing that at this moment, for the visitor and for myself, counts for 53 anything. In a general way, human work consists in creating utility; and, as 54 long as the work is not done, there is "nothing"-nothing that we want. Our life 55 is thus spent in filling voids, which our intellect conceives under the 56 influence, by no means intellectual, of desire and of regret, under the pressure 57 of vital necessities; and if we mean by void an absence of utility and not of 58 things, we may say, in this quite relative sense, that we are constantly going 59 from the void to the full: such is the direction which our action takes. 60 {{% /tab %}} 61 {{% tab name="deutsch" %}} 62 > Nun ist es aber unbestreitbar, daß, wie | schon oben bemerkt, jede menschliche 63 Handlung ihren Ausgangspunkt in einer Unbefriedigtheit nimmt und also folglich 64 in einem Gefühl von Abwesenheit. Man würde nicht handeln, wenn man nicht ein 65 Ziel vor Augen hätte, und man sucht ein Ding nur zu erreichen, weil man spürt, 66 daß es einem fehlt. Unsere Handlung schreitet also von »nichts« zu »etwas«, und 67 ihr Wesen selbst besteht darin, »etwas« auf das Gitterleinen des »Nichts« zu 68 sticken. Tatsächlich jedoch ist das Nichts, von dem hier die Rede ist, weniger 69 die Abwesenheit eines Dinges als die einer Nützlichkeit. Wenn ich einen Besucher 70 in ein noch unmöbliertes Zimmer führe, dann warne ich ihn vor, »daß es dort 71 nichts gibt«. Ich weiß dabei sehr wohl, daß das Zimmer voll Luft ist, doch 72 nachdem man auf Luft nicht sitzen kann, enthält das Zimmer tatsächlich nichts 73 von dem, was in diesem Moment für den Besucher und für mich selbst irgend etwas 74 zählen würde. Generell besteht menschliche Arbeit darin , Nützlichkeit zu 75 erzeugen; und bis die Arbeit getan ist, gibt es »nichts« - nichts von dem, was 76 man erreichen wollte. So verbringen wir unser Leben damit, von unserer 77 Intelligenz unter dem außer-intellektuellen Einfluß des Verlangens und des 78 Vermissens, unter dem Druck der vitalen Erfordernisse gedachte Leeren 79 auszufüllen: Und wenn man unter Leere eine Abwesenheit von Nützlichkeit und 80 nicht von Dingen versteht, dann darf m an in diesem ganz relativen Sinn sagen, 81 daß wir beständig vom Leeren zum Vollen schreiten. Das ist die Richtung, in der 82 sich unsere Handlung bewegt. 83 {{% /tab %}} 84 {{< /tabbed >}} 85 86 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec interdum 87 metus. Aenean rutrum ligula sodales ex auctor, sed tempus dui mollis. Curabitur 88 ipsum dui, aliquet nec commodo at, tristique eget ante. **Donec quis dolor nec 89 nunc mollis interdum vel in purus**. Sed vitae leo scelerisque, sollicitudin 90 elit sed, congue ante. In augue nisl, vestibulum commodo est a, tristique 91 porttitor est. Proin laoreet iaculis ornare. Nullam ut neque quam. 92 93 ### Header 3: Show Casing Syntax Highlighting 94 95 Nulla libero turpis, lacinia vitae cursus ut, auctor dictum nisl. Fusce varius felis nec sem ullamcorper, at convallis nisi vestibulum. Duis risus odio, porta sit amet placerat mollis, tincidunt non mauris. Suspendisse fringilla, `odio a dignissim pharetra`, est urna sollicitudin urna, eu scelerisque magna ex vitae tellus. 96 97 {{< code language="css" title="Really cool snippet" id="1" expand="Show" collapse="Hide" isCollapsed="true" >}} 98 pre { 99 background: #1a1a1d; 100 padding: 20px; 101 border-radius: 8px; 102 font-size: 1rem; 103 overflow: auto; 104 105 @media (--phone) { 106 white-space: pre-wrap; 107 word-wrap: break-word; 108 } 109 110 code { 111 background: none !important; 112 color: #ccc; 113 padding: 0; 114 font-size: inherit; 115 } 116 } 117 {{< /code >}} 118 119 Nulla libero turpis, lacinia vitae cursus ut, auctor dictum nisl. Fusce varius felis nec sem ullamcorper, at convallis nisi vestibulum. Duis risus odio, porta sit amet placerat mollis, tincidunt non mauris. Suspendisse fringilla, `odio a dignissim pharetra`, est urna sollicitudin urna, eu scelerisque magna ex vitae tellus. 120 121 ```common-lisp 122 (defun test (str) 123 (declare ignore str) 124 (print "Hello World")) 125 126 (defun ich-bin-neu () 127 (test "hi")) 128 ``` 129 130 131 ```bash 132 #!/bin/bash 133 134 # This script takes on Argument, checks whether that Argument is an existing 135 # file ending in .pdf and if both conditions are met, rids it of any annotations 136 # saving a copy of the original file with _(clean) atteached to the name. 137 138 if [ -f "$1" ]; then 139 if [ ${1: -4} == ".pdf" ]; then 140 filename="${1/.pdf/_clean.pdf}" 141 pdftk "$1" output uncompressed.pdf uncompress 142 LANG=C sed -n '/^\/Annots/!p' uncompressed.pdf > stripped.pdf 143 pdftk stripped.pdf output "$filename" compress 144 rm uncompressed.pdf 145 rm stripped.pdf 146 echo Done! 147 else 148 echo "$1" is not a pdf 149 exit 1 150 fi 151 else 152 echo "$1" does not exist 153 exit 1 154 fi 155 ``` 156 157 ```css 158 /* PostCSS code */ 159 160 pre { 161 background: #1a1a1d; 162 padding: 20px; 163 border-radius: 8px; 164 font-size: 1rem; 165 overflow: auto; 166 167 @media (--phone) { 168 white-space: pre-wrap; 169 word-wrap: break-word; 170 } 171 172 code { 173 background: none !important; 174 color: #ccc; 175 padding: 0; 176 font-size: inherit; 177 } 178 } 179 ``` 180 181 ```js 182 // JS code 183 184 const menuTrigger = document.querySelector('.menu-trigger') 185 const menu = document.querySelector('.menu') 186 const mobileQuery = getComputedStyle(document.body).getPropertyValue('--phoneWidth') 187 const isMobile = () => window.matchMedia(mobileQuery).matches 188 const isMobileMenu = () => { 189 menuTrigger.classList.toggle('hidden', !isMobile()) 190 menu.classList.toggle('hidden', isMobile()) 191 } 192 193 isMobileMenu() 194 195 menuTrigger.addEventListener('click', () => menu.classList.toggle('hidden')) 196 197 window.addEventListener('resize', isMobileMenu) 198 ``` 199 200 ```html 201 <!-- HTML code --> 202 203 <section id="main"> 204 <div> 205 <h1 id="title">{{ .Title }}</h1> 206 {{ range .Pages }} 207 {{ .Render "summary"}} 208 {{ end }} 209 </div> 210 </section> 211 ``` 212 213 ```c 214 /*Some C code*/ 215 216 void 217 commitinfo_free(struct commitinfo *ci) 218 { 219 size_t i; 220 221 if (!ci) 222 return; 223 if (ci->deltas) 224 for (i = 0; i < ci->ndeltas; i++) 225 deltainfo_free(ci->deltas[i]); 226 227 free(ci->deltas); 228 git_diff_free(ci->diff); 229 git_tree_free(ci->commit_tree); 230 git_tree_free(ci->parent_tree); 231 git_commit_free(ci->commit); 232 git_commit_free(ci->parent); 233 memset(ci, 0, sizeof(*ci)); 234 free(ci); 235 } 236 ``` 237 238 #### Header 4 239 240 Curabitur scelerisque felis viverra varius scelerisque. Ut enim libero, molestie gravida blandit at, mollis ornare tellus. Cras arcu mi, ultrices vel pulvinar vel, volutpat eu tortor. Nullam nec eros quis massa ultrices iaculis sed in metus. Praesent sollicitudin sem sit amet orci tempor gravida. 241 242 - Maecenas elementum vitae nibh vitae porttitor. 243 - Aenean consequat, risus ut cursus placerat, arcu nulla sodales risus, ut molestie tellus tellus et dui. 244 - Integer imperdiet turpis vitae lacus imperdiet, ut ornare ligula auctor. Integer in mi eu velit vehicula suscipit eget vulputate nulla. 245 - Etiam vitae enim quis velit lobortis placerat a ut sem. 246 - Curabitur lobortis ante sit amet orci pulvinar, sollicitudin viverra nunc accumsan. 247 - Praesent fermentum orci quis leo facilisis posuere. 248 249 Aliquam erat volutpat. In hac habitasse platea dictumst. Nunc ut tincidunt mauris. Sed at gravida risus, id semper magna. Nullam vitae enim mattis, sodales neque non, pharetra elit. Cras sit amet sagittis augue, et finibus turpis. Ut tempus tincidunt diam vel pharetra. Nulla porttitor odio sit amet nulla scelerisque, quis aliquam mi imperdiet. Sed tincidunt dui vel tellus vestibulum rhoncus. Donec tempus ultrices velit. 250