add mastodon

.jest/__fixtures__/meta.json

@@ -10,6 +10,7 @@
         "email": "m@kretschmann.io",
         "uri": "https://matthiaskretschmann.com",
         "twitter": "https://twitter.com/kremalicious",
+        "mastodon": "https://mas.to/@krema",
         "github": "https://github.com/kremalicious",
         "facebook": "https://facebook.com/matthiaskretschmann",
         "bitcoin": "171qDmKEXm9YBgBLXyGjjPvopP5o9htQ1V",

config.ts

@@ -11,6 +11,7 @@ export default {
     email: 'm@kretschmann.io',
     uri: 'https://matthiaskretschmann.com',
     twitter: 'https://twitter.com/kremalicious',
+    mastodon: 'https://mas.to/@krema',
     github: 'https://github.com/kremalicious',
     bitcoin: '171qDmKEXm9YBgBLXyGjjPvopP5o9htQ1V',
     ether: '0xf50F267b5689b005FE107cfdb34619f24c014457'

src/components/atoms/HeadMeta/SchemaOrg.tsx

@@ -1,6 +1,6 @@
 import { ImageDataLike } from 'gatsby-plugin-image'
 import React, { ReactElement } from 'react'
-import { useSiteMetadata } from '../../../hooks/use-site-metadata'
+import { useSiteMetadata } from '../../../hooks/useSiteMetadata'
 
 type SchemaOrgProps = {
   post?: {

src/components/atoms/HeadMeta/index.tsx

@@ -1,7 +1,7 @@
 import React, { ReactElement } from 'react'
 import { graphql, useStaticQuery } from 'gatsby'
 import { getSrc, ImageDataLike } from 'gatsby-plugin-image'
-import { useSiteMetadata } from '../../../hooks/use-site-metadata'
+import { useSiteMetadata } from '../../../hooks/useSiteMetadata'
 import useDarkMode from '../../../hooks/useDarkMode'
 
 const query = graphql`

src/components/atoms/Icon.tsx

@@ -27,6 +27,7 @@ import {
 import { ReactComponent as Jsonfeed } from '../../images/jsonfeed.svg'
 import { ReactComponent as Bitcoin } from '../../images/bitcoin.svg'
 import { ReactComponent as Stopwatch } from '../../images/stopwatch.svg'
+import { ReactComponent as Mastodon } from '../../images/mastodon.svg'
 import * as styles from './Icon.module.css'
 
 const components: {
@@ -54,7 +55,8 @@ const components: {
   Camera,
   Aperture,
   Maximize,
-  Crosshair
+  Crosshair,
+  Mastodon
 }
 
 const Icon = ({ name, ...props }: { name: string }): ReactElement => {

src/components/molecules/Menu.tsx

@@ -2,7 +2,7 @@ import React, { ReactElement, useEffect, useState } from 'react'
 import { Link } from 'gatsby'
 import Hamburger from '../atoms/Hamburger'
 import * as styles from './Menu.module.css'
-import { useSiteMetadata } from '../../hooks/use-site-metadata'
+import { useSiteMetadata } from '../../hooks/useSiteMetadata'
 
 export default function Menu(): ReactElement {
   const [menuOpen, setMenuOpen] = useState(false)

src/components/molecules/Networks.tsx

@@ -5,7 +5,9 @@ import * as styles from './Networks.module.css'
 function NetworkIcon({ link }: { link: string }) {
   let IconComp
 
-  if (link.includes('twitter')) {
+  if (link.includes('mas.to')) {
+    IconComp = <Icon name="Mastodon" />
+  } else if (link.includes('twitter')) {
     IconComp = <Icon name="Twitter" />
   } else if (link.includes('github')) {
     IconComp = <Icon name="GitHub" />
@@ -28,7 +30,7 @@ export default function IconLinks({
   return (
     <p>
       {links.map((link: string) => (
-        <a key={link} className={styles.link} href={link} title={link}>
+        <a key={link} className={styles.link} href={link} title={link} rel="me">
           <NetworkIcon link={link} />
         </a>
       ))}

src/components/molecules/Vcard.tsx

@@ -3,7 +3,7 @@ import { graphql, useStaticQuery } from 'gatsby'
 import { getSrc } from 'gatsby-plugin-image'
 import IconLinks from './Networks'
 import * as styles from './Vcard.module.css'
-import { useSiteMetadata } from '../../hooks/use-site-metadata'
+import { useSiteMetadata } from '../../hooks/useSiteMetadata'
 
 const query = graphql`
   query Avatar {
@@ -27,9 +27,9 @@ const query = graphql`
 export default function Vcard(): ReactElement {
   const data = useStaticQuery<Queries.AvatarQuery>(query)
   const { author, rss, jsonfeed } = useSiteMetadata()
-  const { twitter, github, name, uri } = author
+  const { mastodon, twitter, github, name, uri } = author
   const avatar = getSrc(data.avatar.edges[0].node)
-  const links = [twitter, github, rss, jsonfeed]
+  const links = [mastodon, github, twitter, rss, jsonfeed]
 
   return (
     <>

src/components/organisms/Footer.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { Link } from 'gatsby'
 import Icon from '../atoms/Icon'
 import Vcard from '../molecules/Vcard'
-import { useSiteMetadata } from '../../hooks/use-site-metadata'
+import { useSiteMetadata } from '../../hooks/useSiteMetadata'
 import * as styles from './Footer.module.css'
 
 function Copyright() {

src/components/templates/Post/Actions.tsx

@@ -1,5 +1,5 @@
 import React, { ReactElement } from 'react'
-import { useSiteMetadata } from '../../../hooks/use-site-metadata'
+import { useSiteMetadata } from '../../../hooks/useSiteMetadata'
 import * as styles from './Actions.module.css'
 import Icon from '../../atoms/Icon'
 
@@ -22,22 +22,19 @@ const Action = ({ title, text, url, icon, onClick }: ActionProps) => {
 }
 
 export default function PostActions({
-  slug,
   githubLink
 }: {
-  slug: string
   githubLink: string
 }): ReactElement {
-  const { siteUrl } = useSiteMetadata()
-  const urlTwitter = `https://twitter.com/intent/tweet?text=@kremalicious&url=${siteUrl}${slug}`
+  const { author } = useSiteMetadata()
 
   return (
     <section className={styles.actions}>
       <Action
         title="Have a comment?"
-        text="Hit me up @kremalicious"
-        url={urlTwitter}
-        icon="Twitter"
+        text="Hit me up @krema@mas.to"
+        url={author.mastodon}
+        icon="Mastodon"
       />
       <Action
         title="Found something useful?"

src/components/templates/Post/Meta.tsx

@@ -2,7 +2,7 @@ import React, { ReactElement } from 'react'
 import { Link } from 'gatsby'
 import slugify from 'slugify'
 import Tag from '../../atoms/Tag'
-import { useSiteMetadata } from '../../../hooks/use-site-metadata'
+import { useSiteMetadata } from '../../../hooks/useSiteMetadata'
 import * as styles from './Meta.module.css'
 import PostDate from '../../molecules/PostDate'
 

src/components/templates/Post/index.tsx

@@ -14,7 +14,7 @@ import { Image } from '../../atoms/Image'
 import HeadMeta from '../../atoms/HeadMeta'
 import { PageContext } from '../../../@types/Post'
 import SchemaOrg from '../../atoms/HeadMeta/SchemaOrg'
-import { useSiteMetadata } from '../../../hooks/use-site-metadata'
+import { useSiteMetadata } from '../../../hooks/useSiteMetadata'
 
 export default function Post({
   data,
@@ -63,7 +63,7 @@ export default function Post({
 
         {type === 'link' && <PostLinkActions slug={slug} linkurl={linkurl} />}
         <PostMeta post={post} />
-        <PostActions slug={slug} githubLink={githubLink} />
+        <PostActions githubLink={githubLink} />
       </article>
 
       <RelatedPosts isPhotos={type === 'photo'} tags={tags as string[]} />

src/hooks/useSiteMetadata.ts

@@ -13,6 +13,7 @@ const query = graphql`
           email
           uri
           twitter
+          mastodon
           github
           bitcoin
           ether

src/images/mastodon.svg

@@ -0,0 +1,23 @@
+<svg
+  width="23px"
+  height="24px"
+  viewBox="0 0 23 24"
+  version="1.1"
+  xmlns="http://www.w3.org/2000/svg"
+  xmlns:xlink="http://www.w3.org/1999/xlink"
+>
+  <g
+    fill="none"
+    stroke="currentColor"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    stroke-width="2"
+  >
+    <path
+      d="M11.1389411,0.999993778 C15.1557741,1.01416416 16.7473788,1.23481315 17.1783883,1.29841985 C18.3313004,1.46747357 19.3937885,1.99097107 20.1999985,2.75158094 C20.9569508,3.46571922 21.4889781,4.39165318 21.6343115,5.43151763 C21.7813759,6.9318143 21.7037248,9.17597971 21.6679563,10.2556321 C21.6585475,10.5396299 21.6518868,10.7490424 21.6514688,10.858 C21.6514688,11.0030493 21.6307235,12.3326945 21.6235144,12.4640702 C21.5346485,13.8512834 21.113538,14.8729669 20.4649497,15.6015074 C19.6721555,16.4920303 18.5662158,16.9360768 17.4413768,17.1504279 C15.8427017,17.4616573 14.2437749,17.5358688 12.7278117,17.5783554 C12.3616974,17.5881184 11.9965584,17.588 11.6294688,17.588 C10.1478473,17.588 8.67097085,17.4142182 7.23018707,17.0694558 C6.8896014,16.9879577 6.55154219,16.8970272 6.21661506,16.7969957 C6.09537285,17.1716208 6.01671279,17.5677292 5.99836978,17.9995611 C5.96931605,18.6835454 6.09863964,19.2910625 6.3113228,19.8725181 C6.49802659,20.3459237 6.92996227,21.1938253 8.11240559,21.778932 C8.75896027,22.0988656 9.65840415,22.347 10.9225613,22.3469982 C12.1817178,22.3494 13.4378003,22.2400491 14.6760819,22.0206499 C14.3535619,22.2788961 13.9971636,22.3801671 13.6780342,22.4803277 C13.373536,22.5756477 13.1342459,22.6407565 12.896407,22.6955141 C10.668931,23.1980149 8.3433463,23.0768861 6.188872,22.3464624 C4.31619324,21.6953569 2.34808534,20.1334495 1.87201172,18.1971362 C1.58840543,17.0338698 1.38941398,15.8513738 1.27624754,14.6622133 C1.15337549,13.3291944 1.11298856,11.9935531 1.07192233,10.6561173 C1.05603947,10.1388479 1.04013554,9.62130953 1.01970724,9.1039792 C0.971894391,7.87959516 0.994224802,6.54288533 1.2527175,5.34365311 C1.48629333,4.29114993 2.07935638,3.39627026 2.86921016,2.7140337 C3.73726689,1.96424931 4.84307565,1.46792978 5.99949407,1.29842796 C6.69861883,1.17787985 7.74245158,1 11.1389411,0.999993778 Z"
+    ></path>
+    <path
+      d="M16.5659892,13.9105 L16.5659892,8.50060332 C16.5659892,7.36172349 15.8912746,5.91137004 14.2429876,5.91137004 C12.5947006,5.91137004 11.7668593,7.46873817 11.7668593,8.82599755 L11.7668593,11.7867371 L11.2918185,11.7867371 L11.2918185,8.82512751 C11.2918185,7.46786813 10.4692552,5.9105 8.81395009,5.9105 C7.15864498,5.9105 6.49268853,7.36172349 6.49094845,8.50060332 L6.49094845,13.9105"
+    ></path>
+  </g>
+</svg>

src/pages/thanks.tsx

@@ -1,5 +1,5 @@
 import React, { ReactElement } from 'react'
-import { useSiteMetadata } from '../hooks/use-site-metadata'
+import { useSiteMetadata } from '../hooks/useSiteMetadata'
 import Icon from '../components/atoms/Icon'
 import * as styles from './thanks.module.css'
 import Web3Donation from '../components/molecules/Web3Donation'