The last 10 posts tagged ssite are shown here. You can find a list of all posts tagged ssite here or subscribe to the RSS feed or Atom feed to be notified of future posts.

Unicode emojis in python-markdown

a small selection of emojis as rendered by Firefox
Firefox 71 rendering emojis with Twemoji

Took me only four years, but I finally published the first of a bunch of tricks around staticsite I am using: Proudly presenting python-markdown-unicodeemoji ๐Ÿคฉ๐ŸŽ‰

As the mouthful of a name suggests it is a python-markdown extension dealing with unicode and emojis. Specifically it searches in the markdown text for occurrences of shortcodes like :heart: and <3 and converts them to harder to type and remember unicode โค properly wrapped and annotated so they can be styled with CSS. For the most part this means specifying a font which can actually display them as most normal fonts aren't particularly good at it.

The difference between this and most other implementations like mdx_unimoji is that it is not using a) a small hardcoded list of emojis and shortcodes and b) no images involved, just unicode. The shortcodes come from JoyPixels (formerly EmojiOne) and Github as well as the unicode spec. The later means that you can browse for a character with e.g. gucharmap and insert it directly in your text without needing to figure out a shortcode.

Here, have some (the total list would be 3060 emojis currently) in three variants: no specified variant (default), text and emoji. Press Ctrl+Shift+I (or whatever the magic incarnation to open the HTML inspector in your browser is) and disable the font-override for .emoji to see how your browser would show them without which can vary even more than withโ€ฆ

๐Ÿ˜€ ๐Ÿ˜€๏ธŽ ๐Ÿ˜€๏ธ ๐Ÿ˜ƒ ๐Ÿ˜ƒ๏ธŽ ๐Ÿ˜ƒ๏ธ ๐Ÿ˜„ ๐Ÿ˜„๏ธŽ ๐Ÿ˜„๏ธ ๐Ÿ˜ ๐Ÿ˜๏ธŽ ๐Ÿ˜๏ธ ๐Ÿ˜† ๐Ÿ˜†๏ธŽ ๐Ÿ˜†๏ธ ๐Ÿ˜… ๐Ÿ˜…๏ธŽ ๐Ÿ˜…๏ธ ๐Ÿคฃ ๐Ÿคฃ๏ธŽ ๐Ÿคฃ๏ธ ๐Ÿ˜‚ ๐Ÿ˜‚๏ธŽ ๐Ÿ˜‚๏ธ ๐Ÿ™‚ ๐Ÿ™‚๏ธŽ ๐Ÿ™‚๏ธ ๐Ÿ™ƒ ๐Ÿ™ƒ๏ธŽ ๐Ÿ™ƒ๏ธ ๐Ÿ˜‰ ๐Ÿ˜‰๏ธŽ ๐Ÿ˜‰๏ธ ๐Ÿ˜Š ๐Ÿ˜Š๏ธŽ ๐Ÿ˜Š๏ธ ๐Ÿ˜‡ ๐Ÿ˜‡๏ธŽ ๐Ÿ˜‡๏ธ ๐Ÿฅฐ ๐Ÿฅฐ๏ธŽ ๐Ÿฅฐ๏ธ ๐Ÿ˜ ๐Ÿ˜๏ธŽ ๐Ÿ˜๏ธ ๐Ÿคฉ ๐Ÿคฉ๏ธŽ ๐Ÿคฉ๏ธ ๐Ÿ˜˜ ๐Ÿ˜˜๏ธŽ ๐Ÿ˜˜๏ธ ๐Ÿ˜— ๐Ÿ˜—๏ธŽ ๐Ÿ˜—๏ธ โ˜บ โ˜บ๏ธŽ โ˜บ๏ธ ๐Ÿ˜š ๐Ÿ˜š๏ธŽ ๐Ÿ˜š๏ธ ๐Ÿ˜™ ๐Ÿ˜™๏ธŽ ๐Ÿ˜™๏ธ ๐Ÿ˜‹ ๐Ÿ˜‹๏ธŽ ๐Ÿ˜‹๏ธ ๐Ÿ˜› ๐Ÿ˜›๏ธŽ ๐Ÿ˜›๏ธ ๐Ÿ˜œ ๐Ÿ˜œ๏ธŽ ๐Ÿ˜œ๏ธ ๐Ÿคช ๐Ÿคช๏ธŽ ๐Ÿคช๏ธ ๐Ÿ˜ ๐Ÿ˜๏ธŽ ๐Ÿ˜๏ธ ๐Ÿค‘ ๐Ÿค‘๏ธŽ ๐Ÿค‘๏ธ ๐Ÿค— ๐Ÿค—๏ธŽ ๐Ÿค—๏ธ ๐Ÿคญ ๐Ÿคญ๏ธŽ ๐Ÿคญ๏ธ ๐Ÿคซ ๐Ÿคซ๏ธŽ ๐Ÿคซ๏ธ ๐Ÿค” ๐Ÿค”๏ธŽ ๐Ÿค”๏ธ ๐Ÿค ๐Ÿค๏ธŽ ๐Ÿค๏ธ ๐Ÿคจ ๐Ÿคจ๏ธŽ ๐Ÿคจ๏ธ ๐Ÿ˜ ๐Ÿ˜๏ธŽ ๐Ÿ˜๏ธ ๐Ÿ˜‘ ๐Ÿ˜‘๏ธŽ ๐Ÿ˜‘๏ธ ๐Ÿ˜ถ ๐Ÿ˜ถ๏ธŽ ๐Ÿ˜ถ๏ธ ๐Ÿ˜ ๐Ÿ˜๏ธŽ ๐Ÿ˜๏ธ ๐Ÿ˜’ ๐Ÿ˜’๏ธŽ ๐Ÿ˜’๏ธ ๐Ÿ™„ ๐Ÿ™„๏ธŽ ๐Ÿ™„๏ธ ๐Ÿ˜ฌ ๐Ÿ˜ฌ๏ธŽ ๐Ÿ˜ฌ๏ธ ๐Ÿคฅ ๐Ÿคฅ๏ธŽ ๐Ÿคฅ๏ธ ๐Ÿ˜Œ ๐Ÿ˜Œ๏ธŽ ๐Ÿ˜Œ๏ธ ๐Ÿ˜” ๐Ÿ˜”๏ธŽ ๐Ÿ˜”๏ธ ๐Ÿ˜ช ๐Ÿ˜ช๏ธŽ ๐Ÿ˜ช๏ธ ๐Ÿคค ๐Ÿคค๏ธŽ ๐Ÿคค๏ธ ๐Ÿ˜ด ๐Ÿ˜ด๏ธŽ ๐Ÿ˜ด๏ธ ๐Ÿ˜ท ๐Ÿ˜ท๏ธŽ ๐Ÿ˜ท๏ธ ๐Ÿค’ ๐Ÿค’๏ธŽ ๐Ÿค’๏ธ ๐Ÿค• ๐Ÿค•๏ธŽ ๐Ÿค•๏ธ ๐Ÿคข ๐Ÿคข๏ธŽ ๐Ÿคข๏ธ ๐Ÿคฎ ๐Ÿคฎ๏ธŽ ๐Ÿคฎ๏ธ ๐Ÿคง ๐Ÿคง๏ธŽ ๐Ÿคง๏ธ ๐Ÿฅต ๐Ÿฅต๏ธŽ ๐Ÿฅต๏ธ ๐Ÿฅถ ๐Ÿฅถ๏ธŽ ๐Ÿฅถ๏ธ ๐Ÿฅด ๐Ÿฅด๏ธŽ ๐Ÿฅด๏ธ ๐Ÿ˜ต ๐Ÿ˜ต๏ธŽ ๐Ÿ˜ต๏ธ ๐Ÿคฏ ๐Ÿคฏ๏ธŽ ๐Ÿคฏ๏ธ ๐Ÿค  ๐Ÿค ๏ธŽ ๐Ÿค ๏ธ ๐Ÿฅณ ๐Ÿฅณ๏ธŽ ๐Ÿฅณ๏ธ ๐Ÿ˜Ž ๐Ÿ˜Ž๏ธŽ ๐Ÿ˜Ž๏ธ ๐Ÿค“ ๐Ÿค“๏ธŽ ๐Ÿค“๏ธ ๐Ÿง ๐Ÿง๏ธŽ ๐Ÿง๏ธ ๐Ÿ˜• ๐Ÿ˜•๏ธŽ ๐Ÿ˜•๏ธ ๐Ÿ˜Ÿ ๐Ÿ˜Ÿ๏ธŽ ๐Ÿ˜Ÿ๏ธ ๐Ÿ™ ๐Ÿ™๏ธŽ ๐Ÿ™๏ธ โ˜น โ˜น๏ธŽ โ˜น๏ธ ๐Ÿ˜ฎ ๐Ÿ˜ฎ๏ธŽ ๐Ÿ˜ฎ๏ธ ๐Ÿ˜ฏ ๐Ÿ˜ฏ๏ธŽ ๐Ÿ˜ฏ๏ธ ๐Ÿ˜ฒ ๐Ÿ˜ฒ๏ธŽ ๐Ÿ˜ฒ๏ธ ๐Ÿ˜ณ ๐Ÿ˜ณ๏ธŽ ๐Ÿ˜ณ๏ธ ๐Ÿฅบ ๐Ÿฅบ๏ธŽ ๐Ÿฅบ๏ธ ๐Ÿ˜ฆ ๐Ÿ˜ฆ๏ธŽ ๐Ÿ˜ฆ๏ธ ๐Ÿ˜ง ๐Ÿ˜ง๏ธŽ ๐Ÿ˜ง๏ธ ๐Ÿ˜จ ๐Ÿ˜จ๏ธŽ ๐Ÿ˜จ๏ธ ๐Ÿ˜ฐ ๐Ÿ˜ฐ๏ธŽ ๐Ÿ˜ฐ๏ธ ๐Ÿ˜ฅ ๐Ÿ˜ฅ๏ธŽ ๐Ÿ˜ฅ๏ธ ๐Ÿ˜ข ๐Ÿ˜ข๏ธŽ ๐Ÿ˜ข๏ธ ๐Ÿ˜ญ ๐Ÿ˜ญ๏ธŽ ๐Ÿ˜ญ๏ธ ๐Ÿ˜ฑ ๐Ÿ˜ฑ๏ธŽ ๐Ÿ˜ฑ๏ธ ๐Ÿ˜– ๐Ÿ˜–๏ธŽ ๐Ÿ˜–๏ธ ๐Ÿ˜ฃ ๐Ÿ˜ฃ๏ธŽ ๐Ÿ˜ฃ๏ธ ๐Ÿ˜ž ๐Ÿ˜ž๏ธŽ ๐Ÿ˜ž๏ธ ๐Ÿ˜“ ๐Ÿ˜“๏ธ ๐Ÿ˜ฉ ๐Ÿ˜ฉ๏ธŽ ๐Ÿ˜ฉ๏ธ ๐Ÿ˜ซ ๐Ÿ˜ซ๏ธŽ ๐Ÿ˜ซ๏ธ ๐Ÿฅฑ ๐Ÿฅฑ๏ธŽ ๐Ÿฅฑ๏ธ ๐Ÿ˜ค ๐Ÿ˜ค๏ธŽ ๐Ÿ˜ค๏ธ ๐Ÿ˜ก ๐Ÿ˜ก๏ธŽ ๐Ÿ˜ก๏ธ ๐Ÿ˜  ๐Ÿ˜ ๏ธŽ ๐Ÿ˜ ๏ธ ๐Ÿคฌ ๐Ÿคฌ๏ธŽ ๐Ÿคฌ๏ธ ๐Ÿ˜ˆ ๐Ÿ˜ˆ๏ธŽ ๐Ÿ˜ˆ๏ธ ๐Ÿ‘ฟ ๐Ÿ‘ฟ๏ธŽ ๐Ÿ‘ฟ๏ธ ๐Ÿ’€ ๐Ÿ’€๏ธŽ ๐Ÿ’€๏ธ โ˜  โ˜ ๏ธŽ โ˜ ๏ธ ๐Ÿ’ฉ ๐Ÿ’ฉ๏ธŽ ๐Ÿ’ฉ๏ธ ๐Ÿคก ๐Ÿคก๏ธŽ ๐Ÿคก๏ธ ๐Ÿ‘น ๐Ÿ‘น๏ธŽ ๐Ÿ‘น๏ธ ๐Ÿ‘บ ๐Ÿ‘บ๏ธŽ ๐Ÿ‘บ๏ธ ๐Ÿ‘ป ๐Ÿ‘ป๏ธŽ ๐Ÿ‘ป๏ธ ๐Ÿ‘ฝ ๐Ÿ‘ฝ๏ธŽ ๐Ÿ‘ฝ๏ธ ๐Ÿ‘พ ๐Ÿ‘พ๏ธŽ ๐Ÿ‘พ๏ธ ๐Ÿค– ๐Ÿค–๏ธŽ ๐Ÿค–๏ธ ๐Ÿ˜บ ๐Ÿ˜บ๏ธŽ ๐Ÿ˜บ๏ธ ๐Ÿ˜ธ ๐Ÿ˜ธ๏ธŽ ๐Ÿ˜ธ๏ธ ๐Ÿ˜น ๐Ÿ˜น๏ธŽ ๐Ÿ˜น๏ธ ๐Ÿ˜ป ๐Ÿ˜ป๏ธŽ ๐Ÿ˜ป๏ธ ๐Ÿ˜ผ ๐Ÿ˜ผ๏ธŽ ๐Ÿ˜ผ๏ธ ๐Ÿ˜ฝ ๐Ÿ˜ฝ๏ธŽ ๐Ÿ˜ฝ๏ธ ๐Ÿ™€ ๐Ÿ™€๏ธŽ ๐Ÿ™€๏ธ ๐Ÿ˜ฟ ๐Ÿ˜ฟ๏ธŽ ๐Ÿ˜ฟ๏ธ ๐Ÿ˜พ ๐Ÿ˜พ๏ธŽ ๐Ÿ˜พ๏ธ ๐Ÿ™ˆ ๐Ÿ™ˆ๏ธŽ ๐Ÿ™ˆ๏ธ ๐Ÿ™‰ ๐Ÿ™‰๏ธŽ ๐Ÿ™‰๏ธ ๐Ÿ™Š ๐Ÿ™Š๏ธŽ ๐Ÿ™Š๏ธ ๐Ÿ’‹ ๐Ÿ’‹๏ธŽ ๐Ÿ’‹๏ธ ๐Ÿ’Œ ๐Ÿ’Œ๏ธŽ ๐Ÿ’Œ๏ธ ๐Ÿ’˜ ๐Ÿ’˜๏ธŽ ๐Ÿ’˜๏ธ ๐Ÿ’ ๐Ÿ’๏ธŽ ๐Ÿ’๏ธ ๐Ÿ’– ๐Ÿ’–๏ธŽ ๐Ÿ’–๏ธ ๐Ÿ’— ๐Ÿ’—๏ธŽ ๐Ÿ’—๏ธ ๐Ÿ’“ ๐Ÿ’“๏ธŽ ๐Ÿ’“๏ธ ๐Ÿ’ž ๐Ÿ’ž๏ธŽ ๐Ÿ’ž๏ธ ๐Ÿ’• ๐Ÿ’•๏ธŽ ๐Ÿ’•๏ธ ๐Ÿ’Ÿ ๐Ÿ’Ÿ๏ธŽ ๐Ÿ’Ÿ๏ธ โฃ โฃ๏ธŽ โฃ๏ธ ๐Ÿ’” ๐Ÿ’”๏ธŽ ๐Ÿ’”๏ธ โค โค๏ธŽ โค๏ธ ๐Ÿงก ๐Ÿงก๏ธŽ ๐Ÿงก๏ธ ๐Ÿ’› ๐Ÿ’›๏ธŽ ๐Ÿ’›๏ธ ๐Ÿ’š ๐Ÿ’š๏ธŽ ๐Ÿ’š๏ธ ๐Ÿ’™ ๐Ÿ’™๏ธŽ ๐Ÿ’™๏ธ ๐Ÿ’œ ๐Ÿ’œ๏ธŽ ๐Ÿ’œ๏ธ ๐ŸคŽ ๐ŸคŽ๏ธŽ ๐ŸคŽ๏ธ ๐Ÿ–ค ๐Ÿ–ค๏ธŽ ๐Ÿ–ค๏ธ ๐Ÿค ๐Ÿค๏ธŽ ๐Ÿค๏ธ ๐Ÿ’ฏ ๐Ÿ’ฏ๏ธŽ ๐Ÿ’ฏ๏ธ ๐Ÿ’ข ๐Ÿ’ข๏ธŽ ๐Ÿ’ข๏ธ ๐Ÿ’ฅ ๐Ÿ’ฅ๏ธŽ ๐Ÿ’ฅ๏ธ ๐Ÿ’ซ ๐Ÿ’ซ๏ธŽ ๐Ÿ’ซ๏ธ ๐Ÿ’ฆ ๐Ÿ’ฆ๏ธŽ ๐Ÿ’ฆ๏ธ ๐Ÿ’จ ๐Ÿ’จ๏ธŽ ๐Ÿ’จ๏ธ ๐Ÿ•ณ ๐Ÿ•ณ๏ธŽ ๐Ÿ•ณ๏ธ ๐Ÿ’ฃ ๐Ÿ’ฃ๏ธŽ ๐Ÿ’ฃ๏ธ ๐Ÿ’ฌ ๐Ÿ’ฌ๏ธŽ ๐Ÿ’ฌ๏ธ ๐Ÿ‘โ€๐Ÿ—จ ๐Ÿ‘โ€๐Ÿ—จ๏ธŽ ๐Ÿ‘โ€๐Ÿ—จ๏ธ ๐Ÿ—จ ๐Ÿ—จ๏ธŽ ๐Ÿ—จ๏ธ ๐Ÿ—ฏ ๐Ÿ—ฏ๏ธŽ ๐Ÿ—ฏ๏ธ ๐Ÿ’ญ ๐Ÿ’ญ๏ธŽ ๐Ÿ’ญ๏ธ ๐Ÿ’ค ๐Ÿ’ค๏ธŽ ๐Ÿ’ค๏ธ ๐Ÿ‘‹ ๐Ÿ‘‹๏ธŽ ๐Ÿ‘‹๏ธ ๐Ÿ‘‹โ€๐Ÿป ๐Ÿ‘‹โ€๐Ÿป๏ธŽ ๐Ÿ‘‹โ€๐Ÿป๏ธ ๐Ÿ‘‹โ€๐Ÿผ ๐Ÿ‘‹โ€๐Ÿผ๏ธŽ ๐Ÿ‘‹โ€๐Ÿผ๏ธ ๐Ÿ‘‹โ€๐Ÿฝ ๐Ÿ‘‹โ€๐Ÿฝ๏ธŽ ๐Ÿ‘‹โ€๐Ÿฝ๏ธ ๐Ÿ‘‹โ€๐Ÿพ ๐Ÿ‘‹โ€๐Ÿพ๏ธŽ ๐Ÿ‘‹โ€๐Ÿพ๏ธ ๐Ÿ‘‹โ€๐Ÿฟ ๐Ÿ‘‹โ€๐Ÿฟ๏ธŽ ๐Ÿ‘‹โ€๐Ÿฟ๏ธ ๐Ÿคš ๐Ÿคš๏ธŽ ๐Ÿคš๏ธ ๐Ÿคšโ€๐Ÿป ๐Ÿคšโ€๐Ÿป๏ธŽ ๐Ÿคšโ€๐Ÿป๏ธ ๐Ÿคšโ€๐Ÿผ ๐Ÿคšโ€๐Ÿผ๏ธŽ ๐Ÿคšโ€๐Ÿผ๏ธ ๐Ÿคšโ€๐Ÿฝ ๐Ÿคšโ€๐Ÿฝ๏ธŽ ๐Ÿคšโ€๐Ÿฝ๏ธ ๐Ÿคšโ€๐Ÿพ ๐Ÿคšโ€๐Ÿพ๏ธŽ ๐Ÿคšโ€๐Ÿพ๏ธ ๐Ÿคšโ€๐Ÿฟ ๐Ÿคšโ€๐Ÿฟ๏ธŽ ๐Ÿคšโ€๐Ÿฟ๏ธ ๐Ÿ– ๐Ÿ–๏ธŽ ๐Ÿ–๏ธ ๐Ÿ–โ€๐Ÿป ๐Ÿ–โ€๐Ÿป๏ธŽ ๐Ÿ–โ€๐Ÿป๏ธ ๐Ÿ–โ€๐Ÿผ ๐Ÿ–โ€๐Ÿผ๏ธŽ ๐Ÿ–โ€๐Ÿผ๏ธ ๐Ÿ–โ€๐Ÿฝ ๐Ÿ–โ€๐Ÿฝ๏ธŽ ๐Ÿ–โ€๐Ÿฝ๏ธ ๐Ÿ–โ€๐Ÿพ ๐Ÿ–โ€๐Ÿพ๏ธŽ ๐Ÿ–โ€๐Ÿพ๏ธ ๐Ÿ–โ€๐Ÿฟ ๐Ÿ–โ€๐Ÿฟ๏ธŽ ๐Ÿ–โ€๐Ÿฟ๏ธ โœ‹ โœ‹๏ธŽ โœ‹๏ธ โœ‹โ€๐Ÿป โœ‹โ€๐Ÿป๏ธŽ โœ‹โ€๐Ÿป๏ธ โœ‹โ€๐Ÿผ โœ‹โ€๐Ÿผ๏ธŽ โœ‹โ€๐Ÿผ๏ธ โœ‹โ€๐Ÿฝ โœ‹โ€๐Ÿฝ๏ธŽ โœ‹โ€๐Ÿฝ๏ธ โœ‹โ€๐Ÿพ โœ‹โ€๐Ÿพ๏ธŽ โœ‹โ€๐Ÿพ๏ธ โœ‹โ€๐Ÿฟ โœ‹โ€๐Ÿฟ๏ธŽ โœ‹โ€๐Ÿฟ๏ธ ๐Ÿ–– ๐Ÿ––๏ธŽ ๐Ÿ––๏ธ ๐Ÿ––โ€๐Ÿป ๐Ÿ––โ€๐Ÿป๏ธŽ ๐Ÿ––โ€๐Ÿป๏ธ ๐Ÿ––โ€๐Ÿผ ๐Ÿ––โ€๐Ÿผ๏ธŽ ๐Ÿ––โ€๐Ÿผ๏ธ ๐Ÿ––โ€๐Ÿฝ ๐Ÿ––โ€๐Ÿฝ๏ธŽ ๐Ÿ––โ€๐Ÿฝ๏ธ ๐Ÿ––โ€๐Ÿพ ๐Ÿ––โ€๐Ÿพ๏ธŽ ๐Ÿ––โ€๐Ÿพ๏ธ ๐Ÿ––โ€๐Ÿฟ ๐Ÿ––โ€๐Ÿฟ๏ธŽ ๐Ÿ––โ€๐Ÿฟ๏ธ ๐Ÿ‘Œ ๐Ÿ‘Œ๏ธŽ ๐Ÿ‘Œ๏ธ ๐Ÿ‘Œโ€๐Ÿป ๐Ÿ‘Œโ€๐Ÿป๏ธŽ ๐Ÿ‘Œโ€๐Ÿป๏ธ ๐Ÿ‘Œโ€๐Ÿผ ๐Ÿ‘Œโ€๐Ÿผ๏ธŽ ๐Ÿ‘Œโ€๐Ÿผ๏ธ ๐Ÿ‘Œโ€๐Ÿฝ ๐Ÿ‘Œโ€๐Ÿฝ๏ธŽ ๐Ÿ‘Œโ€๐Ÿฝ๏ธ ๐Ÿ‘Œโ€๐Ÿพ ๐Ÿ‘Œโ€๐Ÿพ๏ธŽ ๐Ÿ‘Œโ€๐Ÿพ๏ธ ๐Ÿ‘Œโ€๐Ÿฟ ๐Ÿ‘Œโ€๐Ÿฟ๏ธŽ ๐Ÿ‘Œโ€๐Ÿฟ๏ธ ๐ŸŽ… ๐ŸŽ…๏ธŽ ๐ŸŽ…๏ธ ๐ŸŽ…โ€๐Ÿป ๐ŸŽ…โ€๐Ÿป๏ธŽ ๐ŸŽ…โ€๐Ÿป๏ธ ๐ŸŽ…โ€๐Ÿผ ๐ŸŽ…โ€๐Ÿผ๏ธŽ ๐ŸŽ…โ€๐Ÿผ๏ธ ๐ŸŽ…โ€๐Ÿฝ ๐ŸŽ…โ€๐Ÿฝ๏ธŽ ๐ŸŽ…โ€๐Ÿฝ๏ธ ๐ŸŽ…โ€๐Ÿพ ๐ŸŽ…โ€๐Ÿพ๏ธŽ ๐ŸŽ…โ€๐Ÿพ๏ธ ๐ŸŽ…โ€๐Ÿฟ ๐ŸŽ…โ€๐Ÿฟ๏ธŽ ๐ŸŽ…โ€๐Ÿฟ๏ธ ๐Ÿคถ ๐Ÿคถ๏ธŽ ๐Ÿคถ๏ธ ๐Ÿคถโ€๐Ÿป ๐Ÿคถโ€๐Ÿป๏ธŽ ๐Ÿคถโ€๐Ÿป๏ธ ๐Ÿคถโ€๐Ÿผ ๐Ÿคถโ€๐Ÿผ๏ธŽ ๐Ÿคถโ€๐Ÿผ๏ธ ๐Ÿคถโ€๐Ÿฝ ๐Ÿคถโ€๐Ÿฝ๏ธŽ ๐Ÿคถโ€๐Ÿฝ๏ธ ๐Ÿคถโ€๐Ÿพ ๐Ÿคถโ€๐Ÿพ๏ธŽ ๐Ÿคถโ€๐Ÿพ๏ธ ๐Ÿคถโ€๐Ÿฟ ๐Ÿคถโ€๐Ÿฟ๏ธŽ ๐Ÿคถโ€๐Ÿฟ๏ธ

I know what you are thinkingโ€ฆ I have no smartphone or social media account, so that is probably the reason.

Switching from ikiwiki to staticsite

mouse and keyboard in front of a monitor with a website and its design alongside it
Image by kreatikar on pixabay

Earlier this year Enrico Zini experimented with static site generators and ended up with writing his own in python via component reuse. I was running ikiwiki until now myself, which is okay, but I never became ultra happy with it. One of the factors was that I don't speak Perl โ€“ but I don't speak Python either. The biggest annoyance of ikiwiki is that it supports so many many features which I don't want/need like online editing and other changes are very hard to do like working on the theme.

staticsite (aka ssite) on the other hand provides very little in terms of features in comparison, but that just means I had less to disable and could play a bit with python, markdown and jinja2 on my own to implement what I really wanted to have (which mostly isn't available in ikiwiki either, so I would have to anyway) and I like playing with such small features compared to rolling my own static site generator in perfect NIH fashion. So, what features? Thanks for asking!

Tag cloud

ssite supports tags just fine and clouds are a display thing, so that is a matter of the template โ€“ or so I thought at least. Counting is a bit hard as reassignments aren't easy and jinja2 tries to print what it can. So what I use at the moment looks like a scary hack, but it seems to work for me for now:

{%- for taxonomy in taxonomies() -%}
<ul class="tags">
  {%- set total_tag_number = [ 0 ] -%}
  {%- for t in taxonomy.items -%}
    {%- if total_tag_number.append(total_tag_number.pop() + 1) -%}{%- endif -%}
  {%- endfor -%}
  {%- for key in taxonomy.items.keys()|sort -%}
    {%- set t = taxonomy.items[key] -%}
<li data-rate="{{((10/total_tag_number[0])*(t.pages|length))|round(0,'ceil')|int}}"><a href="{{url_for_tags(t)}}">{{t.name}}</a></li>
  {%- endfor -%}
</ul>
{%- endfor -%}

The resulting unordered list can be styled at will with CSS, I opted for changing the font-size based on the data-rate field โ€“ manually for now as support for attr() isn't completely there yet โ€“ and making the list look less like a list.

ul li[data-rate] a { font-size: 80%; }
ul li[data-rate="1"] a { font-size: 90%; }
ul li[data-rate="2"] a { font-size: 100%; }
ul li[data-rate="3"] a { font-size: 110%; }
โ€ฆ
ul.tags, ul.tags li {
    list-style-type: none;
    display: inline;
}
ul.tags li:after { content: ", "; }
ul.tags li:last-child:after { content: ""; }

The result can be seen in the sidebar of this blog. Not completely happy yet, but a good first draft.

Smilies, Emojis, Emoticons and Unicode

ikiwiki has a plugin which uses a markdown list to define which text is mapped to other markdown text (usually an image). That is okayish, but results in a wild mixture of picture styles. It just looks strange if you have a blogpost and one of your smilies has a 3D effect and the other hasn't. Additionally, those are a bunch of small image filesโ€ฆ for what is effectively a bit of text โ€“ or one (displayed) character: UTF-8 supports all kinds of smilies and other lovely pictures. Or, at least if the font you are using does, but that might be the topic of another post. Assuming good support you can do many cool things with UTF-8. The usual smilies like ๐Ÿ™‚ ๐Ÿ˜‰ ๐Ÿ˜„ ๐Ÿ˜Ž the absolutely needed cat variants like ๐Ÿฑ ๐Ÿ˜ธ places on a ๐Ÿ—บ like the ๐Ÿ—ฝ and of course also various people like ๐Ÿ‘จ ๐Ÿ‘ฉ ๐Ÿ’‚โ€โ™‚ ๐Ÿ‘ง and ๐Ÿ‘ฆ who can travel to those places by ๐Ÿš— or ๐Ÿš‚ And some of those unicodes can be Fitzpatrick-skinned so that ๐Ÿ‘ becomes ๐Ÿ‘โ€๐Ÿป ๐Ÿ‘โ€๐Ÿผ ๐Ÿ‘โ€๐Ÿฝ ๐Ÿ‘โ€๐Ÿพ ๐Ÿ‘โ€๐Ÿฟ โฃ

That feature isn't really ssite specific: It is implemented as a simple python-markdown extension replacing things like :) with ๐Ÿ™‚ โ€“ just many many more of those replaces. You would think there are many pre-existing extensions dealing with this, but I couldn't really find one to my liking. Most of them are actually doing the same as the ikiwiki plugin: Mapping text to tiny images: Honorable mention is githubemoji which hotlinks the emojis github supports (& has replacement images for). There are others which do similar (hot)linking of images, but a small supported character range is common and funky stuff like the mentioned fitzpatrick or region letters creating flags ( ๐Ÿ‡ฉ + ๐Ÿ‡ช = ๐Ÿ‡ฉโ€๐Ÿ‡ช ) stuff isn't supported in any. So, you guessed it: I implemented it myself. Partly at least. I am still working on making this great while learning python with it, so that will take some time still as I have basically reimplemented it a few times alreadyโ€ฆ and there is also this problem that support for this isn't even close to be universal so something needs to be done about that, too.

Theme of the site

ssite comes by default with a bootstrap-based theme. That is okay, but that also means it looks like nearly every other page on the planet in terms of colors and stuff. It also means I have to include hundreds of kilobytes of frameworks in CSS and JavaScript (preferably via some CDN) to get that. And then I have to change the HTML to drop classes everywhere which control look and feel of the elements I have styled with them. That is okayish for large projects I guess. I used it myself in the past but perhaps the conversion of bootstrap2 to 3 I did as part of a university project some time ago distorts my feeling in the negative direction. I kinda like fiddling with CSS and Javascript (after all, I created my own Firefox extension to fiddle with them on all sites I visit: dotPageMod) on the other hand this is a personal page I don't have much problem if it isn't working in IE8 or what not, so the theme is a personal creation. Very minimal as I actually liked that property in ikwiki but with less ugly changes in the ikiwiki specific template syntax and more with jinja2 which is its own template syntax, but at least an independent engine used by others as well, so I might stumble over it again and it feels overall more powerful & natural.

So, perhaps not pretty and not a maximum in browser compatibility, but mine and that makes me happy. ๐Ÿ˜„ Various things I want/might change in this section as well, but a website is never really done anyhowโ€ฆ ๐Ÿšง ๐Ÿ‘ท.

anything else?

Not much actually. Enrico implemented a markdown jinja2-filter based on a proof-of-concept patch from me and fixed some bugs I had reported really quickly. All in all the journey so far was quite enjoyable and it will be interesting to see how my impression is next year! As mentioned I have some ideas still, but I wanted to make a cut now and declare it version 1โ€ฆ

Also: One last far well to ikiwiki. I leave you for a younger & prettier alternative, but don't you worry: You served me well (and still do in some places) and there are many others which still depend on you and who knows, perhaps I will leap back if I ever want to get into perl. After all, one of the reasons I opted for ikiwiki back then was that I might learn some perl in the process. Didn't work, but perhaps next time. So long and thanks for all the fish, ikiwiki!