Adding socials to an about page in Ghost's Dawn theme

Here's some code I worked out for a new publisher I'm supporting. She's got an about page with her staff bios, and wanted to link each person's socials next to their name, sort of like this:

On my own staff page, I'm running some custom theme code (and should get around to adding our socials), but for her, I wanted a solution that she could implement without all her staff members actually being in Ghost, and without theme edits. So, here's some HTML that can go into an HTML card in the Ghost editor, that produces the code above.

To use it:

Add an HTML card (using the big + menu on the left side of the blank line in the post editor)

Paste in the code at the bottom of the page. Edit it to add your name and link, to remove any unwanted socials, and to use YOUR link for each social you're keeping. (Hint: Links are on line starting with href=.

⚠️Caution: It's going to look like a big blank space in the Ghost editor, but when you preview or publish, it should look just like the image above.

<div class="gh-author-meta" style="flex-wrap: wrap; display: flex; flex-direction: row; margin-bottom:-1em;">

    <!-- don't remove the line above -->
    
    <!-- feel free to remove an entire social chunk, in between html comments.-->
    <!-- for any socials you want to use, be sure to update the line starting with href!-->

<!-- this section is for your name and link to your author page or wherever -->
 <a 
 href="https://www.spectralwebservices.com">
 <em>Cathy Sarisky</em>
 </a>
 <!-- or you could use the one line below instead of the four lines above, if you don't want a link.
 <em>Cathy Sarisky</em>
-->
    <!-- X (Twitter) -->
    <a class="gh-author-social-link" 
       href="https://x.com/cat" 
       target="_blank" rel="noopener"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12.1626 1.5H14.3679L9.54994 7.00667L15.2179 14.5H10.7799L7.30394 9.95533L3.3266 14.5H1.11994L6.27327 8.61L0.835938 1.5H5.3866L8.5286 5.654L12.1626 1.5ZM11.3886 13.18H12.6106L4.7226 2.75067H3.41127L11.3886 13.18Z" fill="#888888"></path>
</svg></a>

    <!-- Facebook -->
    <a class="gh-author-social-link" 
       href="https://www.facebook.com/cat" 
       target="_blank" rel="noopener"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M16 8.04865C16 3.63065 12.418 0.048645 8 0.048645C3.582 0.048645 0 3.63065 0 8.04865C0 12.042 2.92533 15.3513 6.75 15.9513V10.3613H4.71867V8.04798H6.75V6.28665C6.75 4.28198 7.94467 3.17398 9.772 3.17398C10.6467 3.17398 11.5627 3.33065 11.5627 3.33065V5.29931H10.5533C9.55933 5.29931 9.24933 5.91598 9.24933 6.54865V8.04865H11.468L11.1133 10.362H9.24933V15.952C13.0747 15.3513 16 12.0413 16 8.04865Z" fill="#888888"></path>
</svg>
</a>

    <!-- LinkedIn -->
    <a class="gh-author-social-link" 
       href="https://www.linkedin.com/in/cat" 
       target="_blank" rel="noopener"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M14.8 0H1.2C0.881742 0 0.576516 0.126427 0.351476 0.351476C0.126427 0.576516 0 0.881742 0 1.2V14.8C0 15.1182 0.126427 15.4235 0.351476 15.6485C0.576516 15.8736 0.881742 16 1.2 16H14.8C15.1182 16 15.4235 15.8736 15.6485 15.6485C15.8736 15.4235 16 15.1182 16 14.8V1.2C16 0.881742 15.8736 0.576516 15.6485 0.351476C15.4235 0.126427 15.1182 0 14.8 0ZM4.8 13.6H2.4V6.4H4.8V13.6ZM3.6 5C3.32494 4.99214 3.05831 4.9034 2.8334 4.74486C2.6085 4.58633 2.43529 4.36503 2.33544 4.10862C2.23558 3.85221 2.2135 3.57206 2.27196 3.30317C2.3304 3.03429 2.4668 2.78859 2.66409 2.59678C2.86139 2.40497 3.11083 2.27555 3.38125 2.22469C3.65168 2.17383 3.93109 2.2038 4.18459 2.31084C4.43808 2.41787 4.65442 2.59724 4.80655 2.82652C4.95869 3.0558 5.03988 3.32484 5.04 3.6C5.03368 3.97628 4.87867 4.33476 4.60884 4.59709C4.33901 4.85942 3.97631 5.00428 3.6 5ZM13.6 13.6H11.2V9.808C11.2 8.672 10.72 8.264 10.096 8.264C9.91307 8.27618 9.73431 8.32436 9.57004 8.40587C9.40578 8.48729 9.2592 8.60044 9.13876 8.73867C9.0184 8.87698 8.9264 9.03769 8.86827 9.21156C8.81013 9.38542 8.78693 9.56907 8.8 9.752C8.796 9.78924 8.796 9.82676 8.8 9.864V13.6H6.4V6.4H8.72V7.44C8.95404 7.084 9.27556 6.79404 9.65378 6.59796C10.032 6.40187 10.4542 6.30613 10.88 6.32C12.12 6.32 13.568 7.008 13.568 9.248L13.6 13.6Z" fill="#888888"></path>
</svg>
</a>

    <!-- Bluesky -->
    <a class="gh-author-social-link" 
       href="https://bsky.app/profile/cat" 
       target="_blank" rel="noopener"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8 7.57495C7.27575 6.08587 5.3025 3.31104 3.46825 1.94232C2.14475 0.954968 0 0.190746 0 2.6221C0 3.10748 0.279996 6.70127 0.4445 7.28468C1.0155 9.31289 3.09675 9.83019 4.948 9.51722C1.712 10.0645 0.889 11.8772 2.66675 13.69C6.043 17.1329 7.51947 12.8262 7.89753 11.7227C7.96749 11.5189 8 11.4243 8 11.508C8 11.4243 8.03251 11.5189 8.10247 11.7227C8.48053 12.8262 9.95699 17.1329 13.3333 13.69C15.111 11.8772 14.288 10.0645 11.052 9.51722C12.9032 9.83019 14.9845 9.31289 15.5555 7.28468C15.72 6.70127 16 3.10748 16 2.6221C16 0.190746 13.8555 0.954968 12.5318 1.94232C10.6975 3.31104 8.72425 6.08587 8 7.57495Z" fill="#888888"></path>
</svg></a>

    <!-- Threads -->
    <a class="gh-author-social-link" 
       href="https://www.threads.net/@cat" 
       target="_blank" rel="noopener"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12.1159 7.41573C12.0508 7.38263 11.9847 7.35087 11.9177 7.32043C11.8011 5.04485 10.6268 3.74208 8.655 3.72875C8.64608 3.72869 8.63723 3.72869 8.6283 3.72869C7.44894 3.72869 6.46805 4.26174 5.86433 5.23173L6.94875 6.0194C7.39976 5.29486 8.10757 5.1404 8.62882 5.1404C8.63479 5.1404 8.64084 5.1404 8.64681 5.14046C9.29608 5.14484 9.78599 5.34472 10.1031 5.7345C10.3338 6.01828 10.4881 6.41042 10.5645 6.90529C9.98892 6.80172 9.36642 6.76987 8.70094 6.8103C6.82626 6.92464 5.62108 8.08234 5.70202 9.691C5.74309 10.507 6.12701 11.209 6.783 11.6676C7.3376 12.0553 8.05197 12.2448 8.79436 12.2019C9.77478 12.145 10.5439 11.7489 11.0805 11.0247C11.488 10.4747 11.7457 9.76195 11.8596 8.86384C12.3268 9.16238 12.6731 9.55536 12.8643 10.0276C13.1895 10.8306 13.2085 12.15 12.1918 13.2257C11.3009 14.168 10.2301 14.5757 8.61186 14.5883C6.81678 14.5742 5.45917 13.9646 4.57649 12.7764C3.74993 11.6638 3.32277 10.0568 3.30683 8C3.32277 5.94315 3.74993 4.33613 4.57649 3.22355C5.45917 2.03541 6.81675 1.42583 8.61186 1.41171C10.42 1.42594 11.8012 2.03845 12.7177 3.23234C13.1671 3.8178 13.5058 4.55407 13.7292 5.41253L15 5.05352C14.7293 3.99685 14.3033 3.08631 13.7236 2.33117C12.5487 0.800554 10.8303 0.0162654 8.61629 0H8.60744C6.39789 0.0162029 4.69879 0.803481 3.55734 2.33994C2.54161 3.7072 2.01766 5.60964 2.00005 7.99438L2 8L2.00005 8.00562C2.01766 10.3903 2.54161 12.2928 3.55734 13.6601C4.69879 15.1965 6.39789 15.9838 8.60744 16H8.61629C10.5807 15.9856 11.9653 15.441 13.106 14.2342C14.5984 12.6555 14.5534 10.6766 14.0616 9.46178C13.7087 8.59059 13.0359 7.883 12.1159 7.41573ZM8.72416 10.7923C7.90258 10.8413 7.04898 10.4507 7.00687 9.61436C6.97567 8.99419 7.42365 8.3022 8.7746 8.21971C8.9293 8.21026 9.08113 8.20566 9.23023 8.20566C9.72095 8.20566 10.18 8.25616 10.5973 8.35278C10.4417 10.4112 9.52864 10.7455 8.72416 10.7923Z" fill="#888888"></path>
</svg></a>

    <!-- Mastodon -->
    <a class="gh-author-social-link" 
       href="https://cat.social/@cat" 
       target="_blank" rel="noopener"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M11.1371 12.1951C13.1419 11.9557 14.8874 10.7205 15.1068 9.59184C15.4525 7.8139 15.4239 5.25306 15.4239 5.25306C15.4239 1.78217 13.1499 0.764795 13.1499 0.764795C12.0033 0.23818 10.0344 0.0167234 7.9889 0H7.93864C5.89312 0.0167234 3.92553 0.23818 2.77886 0.764795C2.77886 0.764795 0.50473 1.78217 0.50473 5.25306C0.50473 5.46347 0.503643 5.68479 0.502511 5.91519C0.499366 6.55506 0.495878 7.26497 0.514385 8.00596C0.596968 11.4003 1.13669 14.7456 4.275 15.5762C5.72201 15.9592 6.96437 16.0394 7.96493 15.9844C9.77943 15.8838 10.798 15.3369 10.798 15.3369L10.7382 14.0204C10.7382 14.0204 9.44151 14.4292 7.98528 14.3794C6.54249 14.3299 5.01937 14.2238 4.78602 12.4524C4.76447 12.2968 4.75369 12.1304 4.75369 11.9557C4.75369 11.9557 6.17001 12.3019 7.96493 12.3841C9.06247 12.4345 10.0917 12.3198 11.1371 12.1951ZM12.7415 9.72498V5.52231C12.7415 4.66338 12.5228 3.98082 12.0836 3.47584C11.6305 2.97086 11.0373 2.71199 10.3009 2.71199C9.44881 2.71199 8.80358 3.03948 8.37704 3.69454L7.96223 4.38977L7.54751 3.69454C7.12089 3.03948 6.47566 2.71199 5.62362 2.71199C4.88719 2.71199 4.29394 2.97086 3.84094 3.47584C3.40165 3.98082 3.18295 4.66338 3.18295 5.52231V9.72498H4.84797V5.64584C4.84797 4.78596 5.20976 4.34951 5.93344 4.34951C6.73358 4.34951 7.13468 4.86725 7.13468 5.891V8.12375H8.78987V5.891C8.78987 4.86725 9.19089 4.34951 9.99103 4.34951C10.7147 4.34951 11.0765 4.78596 11.0765 5.64584V9.72498H12.7415Z" fill="#888888"></path>
</svg></a>

    <!-- TikTok -->
    <a class="gh-author-social-link" 
       href="https://www.tiktok.com/@cat" 
       target="_blank" rel="noopener"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6.79241 5.958V8.706C6.44632 8.61473 6.08416 8.60229 5.73262 8.6696C5.38108 8.73691 5.04913 8.88225 4.76124 9.09491C4.47334 9.30757 4.23684 9.58212 4.06916 9.89834C3.90149 10.2146 3.80691 10.5644 3.79241 10.922C3.77258 11.2299 3.81892 11.5385 3.9283 11.827C4.03767 12.1155 4.20756 12.3773 4.42652 12.5947C4.64549 12.8121 4.90846 12.98 5.19776 13.0873C5.48706 13.1946 5.79598 13.2387 6.10374 13.2167C6.41462 13.2405 6.72697 13.1966 7.01921 13.0879C7.31145 12.9792 7.57661 12.8084 7.79639 12.5873C8.01616 12.3661 8.18529 12.0999 8.29211 11.8069C8.39893 11.514 8.44088 11.2014 8.41507 10.8907V0H11.1331C11.5951 2.87667 13.0337 3.544 14.9597 3.852V6.60867C13.625 6.49921 12.3375 6.0643 11.2097 5.342V10.7867C11.2097 13.2533 9.74974 16 6.12507 16C5.44505 15.997 4.77246 15.8583 4.14673 15.592C3.521 15.3258 2.95472 14.9372 2.48109 14.4493C2.00746 13.9613 1.63601 13.3837 1.38851 12.7503C1.141 12.1169 1.02243 11.4405 1.03974 10.7607C1.06128 10.0529 1.23258 9.35776 1.54235 8.72103C1.85212 8.0843 2.29332 7.52046 2.83688 7.06666C3.38043 6.61287 4.014 6.27943 4.6958 6.08834C5.37761 5.89724 6.09218 5.85282 6.79241 5.958Z" fill="#888888"></path>
</svg></a>

    <!-- YouTube -->
    <a class="gh-author-social-link" 
       href="https://www.youtube.com/@cat" 
       target="_blank" rel="noopener"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M14.2509 2.38829C14.9397 2.60231 15.4811 3.2306 15.6654 4.0301C15.9986 5.47778 16 8.5 16 8.5C16 8.5 16 11.5223 15.6654 12.9699C15.4811 13.7694 14.9397 14.3977 14.2509 14.6117C13.0037 15 8 15 8 15C8 15 2.99637 15 1.74909 14.6117C1.06026 14.3977 0.518933 13.7694 0.334537 12.9699C0 11.5223 0 8.5 0 8.5C0 8.5 0 5.47778 0.334537 4.0301C0.518933 3.2306 1.06026 2.60231 1.74909 2.38829C2.99637 2 8 2 8 2C8 2 13.0037 2 14.2509 2.38829ZM10.6769 8.50023L6.32217 11.0235V5.97697L10.6769 8.50023Z" fill="#888888"></path>
</svg></a>

    <!-- Instagram -->
    <a class="gh-author-social-link" 
       href="https://www.instagram.com/cat" 
       target="_blank" rel="noopener"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8.00033 1.98784C9.95833 1.98784 10.1903 1.99517 10.9637 2.0305C11.4286 2.03592 11.8891 2.12139 12.325 2.28317C12.6437 2.40057 12.9319 2.58808 13.1683 2.83184C13.4121 3.0683 13.5996 3.35651 13.717 3.67517C13.8788 4.11107 13.9642 4.57158 13.9697 5.0365C14.005 5.80984 14.0123 6.04184 14.0123 7.99984C14.0123 9.95784 14.005 10.1898 13.9697 10.9632C13.9642 11.4281 13.8788 11.8886 13.717 12.3245C13.5949 12.6408 13.408 12.9281 13.1683 13.1678C12.9286 13.4076 12.6413 13.5945 12.325 13.7165C11.8891 13.8783 11.4286 13.9638 10.9637 13.9692C10.1903 14.0045 9.95833 14.0118 8.00033 14.0118C6.04233 14.0118 5.81033 14.0045 5.03699 13.9692C4.57207 13.9638 4.11156 13.8783 3.67566 13.7165C3.357 13.5991 3.06879 13.4116 2.83233 13.1678C2.58857 12.9314 2.40106 12.6432 2.28366 12.3245C2.12188 11.8886 2.03641 11.4281 2.03099 10.9632C1.99566 10.1898 1.98833 9.95784 1.98833 7.99984C1.98833 6.04184 1.99566 5.80984 2.03099 5.0365C2.03641 4.57158 2.12188 4.11107 2.28366 3.67517C2.40106 3.35651 2.58857 3.0683 2.83233 2.83184C3.06879 2.58808 3.357 2.40057 3.67566 2.28317C4.11156 2.12139 4.57207 2.03592 5.03699 2.0305C5.81033 1.99517 6.04233 1.98784 8.00033 1.98784ZM8.00033 0.666504C6.00899 0.666504 5.75899 0.675171 4.97699 0.710504C4.36872 0.723075 3.76693 0.838249 3.19699 1.05117C2.70936 1.23995 2.26659 1.52863 1.89713 1.89866C1.52767 2.2687 1.23968 2.71191 1.05166 3.19984C0.838737 3.76977 0.723563 4.37156 0.710992 4.97984C0.675659 5.7585 0.666992 6.0085 0.666992 7.99984C0.666992 9.99117 0.675659 10.2412 0.710992 11.0232C0.723563 11.6314 0.838737 12.2332 1.05166 12.8032C1.24044 13.2908 1.52912 13.7336 1.89915 14.103C2.26919 14.4725 2.7124 14.7605 3.20033 14.9485C3.77026 15.1614 4.37205 15.2766 4.98033 15.2892C5.75899 15.3245 6.00899 15.3332 8.00033 15.3332C9.99166 15.3332 10.2417 15.3245 11.0237 15.2892C11.6319 15.2766 12.2337 15.1614 12.8037 14.9485C13.2913 14.7597 13.7341 14.471 14.1035 14.101C14.473 13.731 14.761 13.2878 14.949 12.7998C15.1619 12.2299 15.2771 11.6281 15.2897 11.0198C15.325 10.2412 15.3337 9.99117 15.3337 7.99984C15.3337 6.0085 15.325 5.7585 15.2897 4.9765C15.2771 4.36823 15.1619 3.76644 14.949 3.1965C14.7602 2.70887 14.4715 2.2661 14.1015 1.89664C13.7315 1.52718 13.2883 1.23919 12.8003 1.05117C12.2304 0.838249 11.6286 0.723075 11.0203 0.710504C10.2417 0.675171 9.99166 0.666504 8.00033 0.666504Z" fill="#888888"></path>
<path d="M8.00038 4.23389C7.25553 4.23389 6.52741 4.45476 5.9081 4.86857C5.28878 5.28239 4.80609 5.87055 4.52105 6.5587C4.23601 7.24685 4.16143 8.00406 4.30674 8.7346C4.45205 9.46513 4.81073 10.1362 5.33741 10.6629C5.8641 11.1895 6.53513 11.5482 7.26567 11.6935C7.9962 11.8388 8.75342 11.7643 9.44156 11.4792C10.1297 11.1942 10.7179 10.7115 11.1317 10.0922C11.5455 9.47285 11.7664 8.74473 11.7664 7.99989C11.7664 7.00108 11.3696 6.04318 10.6633 5.33692C9.95708 4.63066 8.99918 4.23389 8.00038 4.23389ZM8.00038 10.4446C7.51687 10.4446 7.04422 10.3012 6.64219 10.0326C6.24017 9.76393 5.92683 9.38212 5.7418 8.93542C5.55677 8.48872 5.50836 7.99717 5.60268 7.52296C5.69701 7.04874 5.92984 6.61314 6.27174 6.27125C6.61363 5.92935 7.04923 5.69652 7.52345 5.60219C7.99767 5.50787 8.48921 5.55628 8.93591 5.74131C9.38261 5.92634 9.76442 6.23968 10.033 6.6417C10.3017 7.04373 10.445 7.51638 10.445 7.99989C10.445 8.64825 10.1875 9.27006 9.72902 9.72853C9.27055 10.187 8.64874 10.4446 8.00038 10.4446Z" fill="#888888"></path>
<path d="M11.9152 4.96508C12.4012 4.96508 12.7952 4.57109 12.7952 4.08508C12.7952 3.59907 12.4012 3.20508 11.9152 3.20508C11.4291 3.20508 11.0352 3.59907 11.0352 4.08508C11.0352 4.57109 11.4291 4.96508 11.9152 4.96508Z" fill="#888888"></path>
</svg></a>

<!-- dont' remove the line below-->
</div>