Heavy, Engine, Ear
HeavyEngineer
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

SimpleIcons

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:

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:

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:

components/Footer.tsx
 <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:

contentlayer.config.ts
  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' },
  },
  computedFields,
}))

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

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:

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!