Heavy, Engine, Ear
Published on

Hello world

Had to add the Mastodon logo to the theme, which was straightforward and it also gives me an excuse to take this new blog for a test drive. https://github.com/timlrx/tailwind-nextjs-starter-blog


Go here: https://simpleicons.org/?q=mastodon and download the Mastodon svg into components/social-icons.

Add to Nextjs

To make the icon available it needs to be added to components/social-icons/index.tsx:

const components = {
  mail: Mail,
  github: Github,
  facebook: Facebook,
  youtube: Youtube,
  linkedin: Linkedin,
  twitter: Twitter,
  mastodon: Mastodon,

Site metadata

Add Mastodon as an option in data/siteMetadata.js:

  github: 'https://github.com/heavyengineer',
  mastodon: 'https://defcon.social/@heavyengineer',
  // twitter: 'https://twitter.com/Twitter',
  // facebook: 'https://facebook.com',
  // youtube: 'https://youtube.com',
  linkedin: 'https://www.linkedin.com/in/steevpower/',

And now it should be available to include in your pages. For example to add it to the footer edit components/Footer.tsx and add a line for Mastodon:

 <SocialIcon kind="github" href={siteMetadata.github} size={6} />
          <SocialIcon kind="mastodon" href={siteMetadata.mastodon} size={6} />
          {/* <SocialIcon kind="youtube" href={siteMetadata.youtube} size={6} /> */}

Author content type

To add it to the author page you need to add it to the Author type first. The types are controlled from this file: contentlayer.config.ts and you need to add a new property for mastodon:

  export const Authors = defineDocumentType(() => ({
  name: 'Authors',
  filePathPattern: 'authors/**/*.mdx',
  contentType: 'mdx',
  fields: {
    name: { type: 'string', required: true },
    avatar: { type: 'string' },
    occupation: { type: 'string' },
    company: { type: 'string' },
    email: { type: 'string' },
    twitter: { type: 'string' },
    mastodon: { type: 'string' },
    linkedin: { type: 'string' },
    github: { type: 'string' },
    layout: { type: 'string' },

Introduce the variable to the Authorlayout here: layouts/AuthorLayout.tsx

export default function AuthorLayout({ children, content }: Props) {
  const { name, avatar, occupation, company, email, mastodon, linkedin, github } = content

Then add the line to data/authors/default.mdx:

github: https://github.com/heavyengineer
mastodon: https://defcon.social/@heavyengineer
linkedin: https://www.linkedin.com/in/steevpower/

And now you should have Mastodon logos and links in your 'about' page and in your footer:

Your page should now have a Mastodon logo and link

There is lots to see and do, but i have had the pleasure of spending an afternoon working on this software and using https://vercel.com/ to easily publish it. Good stuff!