From de605d87a06df5661dd5df57c69454f12be16633 Mon Sep 17 00:00:00 2001 From: Simon Smale Date: Tue, 9 Jan 2024 09:17:38 +0000 Subject: [PATCH] docs: adds blog post for how to add a social icon (#221) * docs: adds blog post for how to add a social icon * refactor: update the blog post --------- Co-authored-by: Sat Naing --- .../blog/how-to-add-a-new-social-icon.md | 125 ++++++++++++++++++ 1 file changed, 125 insertions(+) create mode 100644 src/content/blog/how-to-add-a-new-social-icon.md diff --git a/src/content/blog/how-to-add-a-new-social-icon.md b/src/content/blog/how-to-add-a-new-social-icon.md new file mode 100644 index 0000000..b1d25a8 --- /dev/null +++ b/src/content/blog/how-to-add-a-new-social-icon.md @@ -0,0 +1,125 @@ +--- +author: Simon Smale +pubDatetime: 2024-01-08T18:16:00.000Z +modDatetime: +title: How to add a new Social Icon to AstroPaper +featured: false +draft: false +tags: + - FAQ +description: How to add a new social icon to AstroPaper +--- + +Hot new platform? Niche corner of the internet? Or one specific to your area? This post will guide you through how to add a new social icon to the theme. + +## Table of contents + +## Merging back to the theme + +The maintainer of the theme [Sat Naing](https://github.com/satnaing) has said that he intends to only + +> keep the project supporting only a specific set of popular social icons. + +So there is a chance that your icon will not be in the repo, but fear not, it is very easy to add your own! + +## Getting things to match + +The icon set used by the theme come from [Tabler](https://tabler.io/icons) and there are a quite a few brands on there. + +## Adding your icon, by example + +For this guide we are going to use the StackOverflow icon as our example. + +### Find the icon + +> In this case, we are going to use the `StackOverflow` as an example. + +Searching on Tabler for 'StackOverflow' we get a single icon , we are going to need the svg code, so save it for later. + +```html + + + + + + + + +``` + +### Clean up + +We need to do some tidy up on what the theme provides us. + +1. remove all classes other than `icon-tabler` +2. remove width & height +3. remove the viewBox +4. remove the stroke-width +5. remove the stroke +6. remove the fill + +This should leave you with the following + +```html + + + + + + + + +``` + +Now we can add the clean svg code to the `src/assets/socialIcons.ts` file in `SocialIcons`. + +```typescript +const socialIcons = { + /* others */ + StackOverflow: ` + + + + + + + `, +}; +``` + +Finally we can configure it for our blog in `src/config.ts` under `SOCIALS`. Setting `active: true` to add it to the site. + +```typescript +export const SOCIALS: SocialObjects = [ + /* others */ + { + name: "StackOverflow", + href: "https://stackoverflow.com/search?q=astropaper", + linkTitle: `See what questions there are about ${SITE.title} on StackOverflow`, + active: true, + }, +]; +``` + +> Ensure that `href` and `linkTitle` are updated for the corresponding link and label. + +Full code for the above steps can be found in [this pull request](https://github.com/satnaing/astro-paper/pull/216/files)