commit 20a4c7dd18545bd3e84643430abc393fb9742e9a · dunkirk.sh/zera

content/blog/2024-10-11_example_post.md

···

       158
       158
        
       ---

     

       159
       159
        
       

     

       160
       160
        
       But these should be used sparingly, if at all.

     

       161
       161
       +
       

     

       162
       162
       +
       You can also use emojis inline from the hackclub slack like this :yay:! This is just done by writing `:emoji:` and it gets progressively enhanced with a bit of js as long as the emoji is in cachet!

+32

sass/css/_emoji-inline.scss

···

       1
       1
       +
       .emoji-inline--wrapper {

     

       2
       2
       +
         vertical-align: baseline;

     

       3
       3
       +
         height: auto;

     

       4
       4
       +
         position: relative;

     

       5
       5
       +
         overflow: visible;

     

       6
       6
       +
         vertical-align: top;

     

       7
       7
       +
         object-fit: contain;

     

       8
       8
       +
         align-items: center;

     

       9
       9
       +
         display: inline-flex;

     

       10
       10
       +
         overflow: hidden;

     

       11
       11
       +
         width: 22px;

     

       12
       12
       +
         height: 22px;

     

       13
       13
       +
       }

     

       14
       14
       +
       

     

       15
       15
       +
       .emoji-inline--wrapper img {

     

       16
       16
       +
         object-fit: contain;

     

       17
       17
       +
         position: absolute;

     

       18
       18
       +
         top: 50%;

     

       19
       19
       +
         overflow: hidden;

     

       20
       20
       +
         width: 22px !important;

     

       21
       21
       +
         height: 22px !important;

     

       22
       22
       +
         margin-top: -11px;

     

       23
       23
       +
         margin-left: 0 !important;

     

       24
       24
       +
         margin-right: 0 !important;

     

       25
       25
       +
         margin-bottom: 0 !important;

     

       26
       26
       +
         border: none !important;

     

       27
       27
       +
         border-radius: 0 !important;

     

       28
       28
       +
         padding: 0 !important;

     

       29
       29
       +
         opacity: 1 !important;

     

       30
       30
       +
         max-width: 22px !important;

     

       31
       31
       +
         display: inline !important;

     

       32
       32
       +
       }

sass/css/main.scss

···

       6
       6
        
       

     

       7
       7
        
       @use "copy-button";

     

       8
       8
        
       @use "view-transitions";

     

       9
       9
       +
       @use "emoji-inline";

+65

static/js/emoji-replace.js

···

       1
       1
       +
       document.addEventListener("DOMContentLoaded", () => {

     

       2
       2
       +
       	const content = document.querySelector("main");

     

       3
       3
       +
       	if (!content) return;

     

       4
       4
       +
       

     

       5
       5
       +
       	const walker = document.createTreeWalker(content, NodeFilter.SHOW_TEXT, {

     

       6
       6
       +
       		acceptNode: (node) => {

     

       7
       7
       +
       			// Skip code blocks, pre tags, and script/style tags

     

       8
       8
       +
       			let parent = node.parentElement;

     

       9
       9
       +
       			while (parent) {

     

       10
       10
       +
       				const tag = parent.tagName.toLowerCase();

     

       11
       11
       +
       				if (

     

       12
       12
       +
       					tag === "code" ||

     

       13
       13
       +
       					tag === "pre" ||

     

       14
       14
       +
       					tag === "script" ||

     

       15
       15
       +
       					tag === "style"

     

       16
       16
       +
       				) {

     

       17
       17
       +
       					return NodeFilter.FILTER_REJECT;

     

       18
       18
       +
       				}

     

       19
       19
       +
       				parent = parent.parentElement;

     

       20
       20
       +
       			}

     

       21
       21
       +
       			return NodeFilter.FILTER_ACCEPT;

     

       22
       22
       +
       		},

     

       23
       23
       +
       	});

     

       24
       24
       +
       

     

       25
       25
       +
       	const nodesToReplace = [];

     

       26
       26
       +
       	while (walker.nextNode()) {

     

       27
       27
       +
       		const node = walker.currentNode;

     

       28
       28
       +
       		if (/:[\w-]+:/.test(node.textContent)) {

     

       29
       29
       +
       			nodesToReplace.push(node);

     

       30
       30
       +
       		}

     

       31
       31
       +
       	}

     

       32
       32
       +
       

     

       33
       33
       +
       	nodesToReplace.forEach((node) => {

     

       34
       34
       +
       		const frag = document.createDocumentFragment();

     

       35
       35
       +
       		const parts = node.textContent.split(/(:[\w-]+:)/);

     

       36
       36
       +
       

     

       37
       37
       +
       		parts.forEach((part) => {

     

       38
       38
       +
       			if (/^:[\w-]+:$/.test(part)) {

     

       39
       39
       +
       				const name = part.slice(1, -1);

     

       40
       40
       +
       

     

       41
       41
       +
       				const span = document.createElement("span");

     

       42
       42
       +
       				span.className = "emoji-inline--wrapper";

     

       43
       43
       +
       

     

       44
       44
       +
       				const img = document.createElement("img");

     

       45
       45
       +
       				img.src = `https://cachet.dunkirk.sh/emojis/${name}/r`;

     

       46
       46
       +
       				img.alt = part;

     

       47
       47
       +
       				img.className = "emoji-inline";

     

       48
       48
       +
       				img.loading = "lazy";

     

       49
       49
       +
       				img.setAttribute("aria-label", `${name} emoji`);

     

       50
       50
       +
       

     

       51
       51
       +
       				// Fallback: if image fails to load, show original text

     

       52
       52
       +
       				img.onerror = () => {

     

       53
       53
       +
       					span.replaceWith(document.createTextNode(part));

     

       54
       54
       +
       				};

     

       55
       55
       +
       

     

       56
       56
       +
       				span.appendChild(img);

     

       57
       57
       +
       				frag.appendChild(span);

     

       58
       58
       +
       			} else if (part) {

     

       59
       59
       +
       				frag.appendChild(document.createTextNode(part));

     

       60
       60
       +
       			}

     

       61
       61
       +
       		});

     

       62
       62
       +
       

     

       63
       63
       +
       		node.replaceWith(frag);

     

       64
       64
       +
       	});

     

       65
       65
       +
       });

templates/head.html

···

       86
       86
        
         defer

     

       87
       87
        
       ></script>

     

       88
       88
        
       

     

       89
       89
       +
       {% set emojiJsHash = get_hash(path="js/emoji-replace.js", sha_type=256,

     

       90
       90
       +
       base64=true) %}

     

       91
       91
       +
       <script

     

       92
       92
       +
         src="{{ get_url(path='js/emoji-replace.js?' ~ emojiJsHash, trailing_slash=false) | safe }}"

     

       93
       93
       +
         defer

     

       94
       94
       +
       ></script>

     

       95
       95
       +
       

     

       89
       96
        
       <script type="speculationrules">

     

       90
       97
        
       {

     

       91
       98
        
         "prerender": [