Adding Bluesky icon to the Astropaper code
With the growing popularity of Bluesky, I found a great write-up on how to integrate it into Astropaper. Someone has already expressed interest in handling this via GitHub, so it might be included in an upcoming version.
There are only two areas where changes are needed:
src/assets/socialIcons.ts
The author provided two types of icons. I preferred the outline version (his second method). You can add it by inserting the following code directly after the Mastodon icon, just before the closing bracket:
Bluesky: `<svg class="icon-tabler" viewBox="0 0 55 55" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
<path fill="none" stroke width="4" d="M27.5,25.73c-1.6-3.1-5.94-8.89-9.98-11.74c-3.87-2.73-5.35-2.26-6.31-1.82c-1.12,0.51-1.32,2.23-1.32,3.24c0,1.01,0.55,8.3,0.92,9.51c1.2,4.02,5.45,5.38,9.37,4.94c0.2-0.03,0.4-0.06,0.61-0.08c-0.2,0.03-0.41,0.06-0.61,0.08c-5.74,0.85-10.85,2.94-4.15,10.39c7.36,7.62,10.09-1.63,11.49-6.33c1.4,4.69,3.01,13.61,11.35,6.33c6.27-6.33,1.72-9.54-4.02-10.39c-0.2-0.02-0.41-0.05-0.61-0.08c0.21,0.03,0.41,0.05,0.61,0.08c3.92,0.44,8.18-0.92,9.37-4.94c0.36-1.22,0.92-8.5,0.92-9.51c0-1.01-0.2-2.73-1.32-3.24c-0.97-0.44-2.44-0.91-6.31,1.82C33.44,16.85,29.1,22.63,27.5,25.73z" />
</svg>`
Next, open the following file:
src/config.ts
Scroll to the bottom where the other social icons are configured. Add the following code to the end, replacing the href section with your Bluesky profile URL:
{
name: 'Bluesky',
href: 'https://bsky.app/profile/hallm74.bsky.social',
linkTitle: `${SITE.title} on Bluesky`,
active: true
}