Merge pull request #71 from gorzelinski/support-me

feat: Support me

app/[lang]/blog/[slug]/page.tsx

@@ -39,6 +39,7 @@ import {
   Section,
   Small,
   Socials,
+  SupportMe,
   verticalRhythm
 } from '@/design-system'
 import avatar from '@/public/images/logo.png'
@@ -195,6 +196,7 @@ export default async function Blog({
         </footer>
       </Article>
       <Pagination prev={prev} next={next} dictionary={component.pagination} />
+      <SupportMe lang={lang} dictionary={section.supportMe} />
       <Newsletter lang={lang} dictionary={section.newsletter} />
       {relatedPosts.length > 0 && (
         <Section columns="1">

app/[lang]/blog/page.tsx

@@ -7,7 +7,14 @@ import { COOKIES, LINKS } from '@/constants'
 import { getDictionary, getMDXes } from '@/scripts'
 import { generateAlternateLinks, getMetaImage, localizePath } from '@/lib'
 import { openGraph, twitter } from '@/app/shared-metadata'
-import { H1, Header, Newsletter, Post, Section } from '@/design-system'
+import {
+  H1,
+  Header,
+  Newsletter,
+  Post,
+  Section,
+  SupportMe
+} from '@/design-system'
 import { small } from '@/design-system/elements/small'
 
 export async function generateMetadata({
@@ -86,6 +93,7 @@ export default async function Blog({ params: { lang } }: PageProps) {
           />
         ))}
       </Section>
+      <SupportMe lang={lang} dictionary={section.supportMe} />
       <Newsletter lang={lang} dictionary={section.newsletter} />
     </>
   )

app/[lang]/page.tsx

@@ -173,6 +173,7 @@ export default async function Home({ params: { lang } }: PageProps) {
         justifyItems="center"
         alignItems="center"
         textAlign="center"
+        marginX="auto"
       >
         <H2>{page.home.contact.heading}</H2>
         <P>{page.home.contact.description}</P>

constants/links.ts

@@ -31,7 +31,9 @@ export const LINKS = {
   subscriptionConfirmed: '/subscription-confirmed/',
   email: '[email protected]',
   content: 'content',
-  logo: '/images/logo.png'
+  logo: '/images/logo.png',
+  buyMeACoffee: 'https://buymeacoffee.com/gorzelinski',
+  buyCoffeeTo: 'https://buycoffee.to/gorzelinski/'
 } as const
 
 export const CRAWLABLE = [

content/uses/index.mdx

@@ -59,7 +59,7 @@ type: 'page'
 - [MSI Afterburner](https://www.msi.com/Landing/afterburner/graphics-cards) - software for manually overclocking GPU.
 - [Razer Synapse](https://www.razer.com/eu-en/synapse-3) - an app for configuring my mouse and other Razer stuff.
 - [Origin](https://www.origin.com/gbr/en-us/store/download) - I use it mainly for the Battlefield series and some EA titles.
-- [Ubisfot Connect](https://ubisoftconnect.com/en-US/) - I like some Ubisoft series (Assassin's Creed, Splinter Cell, Watch Dogs).
+- [Ubisoft Connect](https://ubisoftconnect.com/en-US/) - I like some Ubisoft series (Assassin's Creed, Splinter Cell, Watch Dogs).
 - [Steam](https://store.steampowered.com/) - I have other games on Steam.
 - [Discord](https://discord.com/) - for communication.
 

design-system/components/link-or-a/link-or-a.tsx

@@ -1,11 +1,11 @@
-import { isInternal } from '@/lib'
+import { isInternalURL } from '@/lib'
 import { LinkOrAProps } from './link-or-a.types'
 import { A, Link } from '../../elements'
 
 export const LinkOrA = (props: LinkOrAProps) => {
   const { children, href, ...linkOrAVariantProps } = props
 
-  return isInternal(href) ? (
+  return isInternalURL(href) ? (
     <Link href={href} {...linkOrAVariantProps}>
       {children}
     </Link>

design-system/icons/icon.styles.tsx

@@ -1,10 +1,8 @@
 import { cva } from '@/styled-system/css'
-import { sharedTransitionProperties } from '../utils'
 
 export const icon = cva({
   base: {
-    display: 'inline-block',
-    ...sharedTransitionProperties
+    display: 'inline-block'
   },
   variants: {
     color: {

design-system/index.tsx

@@ -107,7 +107,8 @@ export {
   Main,
   Navbar,
   Newsletter,
-  Section
+  Section,
+  SupportMe
 } from './sections'
 
 export { verticalRhythm } from './utils'

design-system/sections/footer/footer.tsx

@@ -1,10 +1,10 @@
 import { LINKS } from '@/constants'
-import { localizePath } from '@/lib'
+import { getCoffeeURL, localizePath } from '@/lib'
 import { footer } from './footer.styles'
 import { FooterProps } from './footer.types'
 import { HStack, VStack } from '@/styled-system/jsx'
 import { ButtonAnchor, ButtonLink, Small, navigation } from '../../elements'
-import { Cafe, Heart, Mail } from '../../icons'
+import { Cafe, Mail } from '../../icons'
 import { LanguageSwitch, Socials } from '../../components'
 
 export const Footer = ({ lang, dictionary }: FooterProps) => {
@@ -35,11 +35,21 @@ export const Footer = ({ lang, dictionary }: FooterProps) => {
         </VStack>
       </HStack>
       <HStack justifyContent="space-between" flexWrap="wrap-reverse" gap="l">
-        <Small>
-          © {new Date().getFullYear()} {layout.root.metadata.author} •{' '}
-          {section.footer.note} <Heart color="danger" verticalAlign="bottom" />{' '}
-          <Cafe color="warning" verticalAlign="bottom" />
-        </Small>
+        <HStack flexWrap="wrap-reverse" gap="s">
+          <Small>
+            © {new Date().getFullYear()} {layout.root.metadata.author} •{' '}
+            {section.footer.note}{' '}
+          </Small>
+          <ButtonAnchor
+            variant="text"
+            align="left"
+            size="s"
+            target="_blank"
+            href={getCoffeeURL(lang)}
+          >
+            <Cafe verticalAlign="bottom" /> {links.coffee}
+          </ButtonAnchor>
+        </HStack>
         <div className={navigation({ align: 'left' })}>
           <ButtonLink
             variant="nav"

design-system/sections/index.tsx

@@ -5,3 +5,4 @@ export { Main } from './main'
 export { Navbar } from './navbar'
 export { Newsletter } from './newsletter'
 export { Section } from './section'
+export { SupportMe } from './support-me'

design-system/sections/section/section.styles.tsx

@@ -1,5 +1,5 @@
 import { cva } from '@/styled-system/css'
-import { verticalRhythm } from '../../utils'
+import { verticalRhythm, sharedTransitionProperties } from '../../utils'
 
 export const section = cva({
   base: {
@@ -27,6 +27,22 @@ export const section = cva({
             md: 'auto'
           }
         }
+      },
+      bleed: {
+        marginX: {
+          base: 'calc(-50vw + 100% / 2)',
+          xl: 'calc((-50vw + 100% / 2) + token(sizes.scrollbar.width) / 2)'
+        },
+        paddingX: 'm',
+        ...verticalRhythm.paddingY.m,
+        borderTop: 'gray.subtle',
+        borderBottom: 'gray.subtle',
+        backgroundColor: 'gray.800',
+        ...sharedTransitionProperties,
+        transitionProperty: 'background-color, border-color',
+        '& > *': {
+          maxWidth: 'breakpoint-xl'
+        }
       }
     },
     columns: {
@@ -82,15 +98,5 @@ export const section = cva({
         justifyItems: 'end'
       }
     }
-  },
-  compoundVariants: [
-    {
-      alignItems: 'center',
-      justifyItems: 'center',
-      textAlign: 'center',
-      css: {
-        marginX: 'auto'
-      }
-    }
-  ]
+  }
 })

design-system/sections/support-me/__tests__/support-me.test.tsx

@@ -0,0 +1,17 @@
+import { render, screen } from '@testing-library/react'
+import { SupportMe } from '../support-me'
+import dictionary from '@/dictionaries/en.json'
+
+describe('SupportMe', () => {
+  it('renders correctly', () => {
+    render(<SupportMe lang={'en'} dictionary={dictionary.section.supportMe} />)
+
+    const heading = screen.getByRole('heading', { name: 'Support me' })
+    const paragraph = screen.getByRole('paragraph')
+    const link = screen.getByRole('link', { name: 'Buy me a coffee' })
+
+    expect(heading).toBeInTheDocument()
+    expect(paragraph).toBeInTheDocument()
+    expect(link).toBeInTheDocument()
+  })
+})

design-system/sections/support-me/index.tsx

@@ -0,0 +1 @@
+export { SupportMe } from './support-me'

design-system/sections/support-me/support-me.tsx

@@ -0,0 +1,33 @@
+import { SupportMeProps } from './support-me.types'
+import { Section } from '../section'
+import { ButtonAnchor, H2, P } from '../../elements'
+import { Cafe } from '../../icons'
+import { getCoffeeURL } from '@/lib'
+
+export const SupportMe = ({ lang, dictionary }: SupportMeProps) => {
+  return (
+    <Section
+      columns="1"
+      alignItems="center"
+      justifyItems="center"
+      textAlign="center"
+      variant="bleed"
+    >
+      <H2>{dictionary.heading}</H2>
+      <P color="subtle" size="l">
+        {dictionary.description}
+      </P>
+      <ButtonAnchor
+        target="_blank"
+        _hover={{
+          '& > span': {
+            animation: 'bouncing'
+          }
+        }}
+        href={getCoffeeURL(lang)}
+      >
+        <Cafe verticalAlign="bottom" /> {dictionary.button}
+      </ButtonAnchor>
+    </Section>
+  )
+}

design-system/sections/support-me/support-me.types.tsx

@@ -0,0 +1,7 @@
+import { Locale } from '@/i18n.config'
+import { Dictionary } from '@/scripts'
+
+export type SupportMeProps = {
+  dictionary: Dictionary['section']['supportMe']
+  lang: Locale
+}

design-system/utils/spacing.tsx

@@ -86,5 +86,31 @@ export const verticalRhythm = {
         '2xl': 'verticalRhythm.s.2xl'
       }
     })
+  },
+  paddingY: {
+    l: css.raw({
+      paddingY: {
+        base: 'verticalRhythm.l.base',
+        md: 'verticalRhythm.l.md',
+        lg: 'verticalRhythm.l.lg',
+        '2xl': 'verticalRhythm.l.2xl'
+      }
+    }),
+    m: css.raw({
+      paddingY: {
+        base: 'verticalRhythm.m.base',
+        md: 'verticalRhythm.m.md',
+        lg: 'verticalRhythm.m.lg',
+        '2xl': 'verticalRhythm.m.2xl'
+      }
+    }),
+    s: css.raw({
+      paddingY: {
+        base: 'verticalRhythm.s.base',
+        md: 'verticalRhythm.s.md',
+        lg: 'verticalRhythm.s.lg',
+        '2xl': 'verticalRhythm.s.2xl'
+      }
+    })
   }
 }

dictionaries/en.json

@@ -7,7 +7,8 @@
     "blog": "Blog",
     "contact": "Contact",
     "newsletter": "Newsletter",
-    "rss": "RSS"
+    "rss": "RSS",
+    "coffee": "Buy me a coffee"
   },
   "component": {
     "avatar": {
@@ -35,7 +36,7 @@
       "email": "Write me an email",
       "socials": "Find me elsewhere",
       "language": "Change language",
-      "note": "I have created this site with love (and coffee)"
+      "note": "I've created this site with love (and coffee)"
     },
     "navbar": {
       "navigation": {
@@ -66,6 +67,11 @@
         "heading": "Something went wrong",
         "description": "There was an issue trying to submit. Check your email and try again."
       }
+    },
+    "supportMe": {
+      "heading": "Support me",
+      "description": "My website is powered by Next.js, and I'm powered by coffee. You can buy me one to keep this carbon-silicon system working. But don't feel obliged to. Thanks!",
+      "button": "Buy me a coffee"
     }
   },
   "layout": {

dictionaries/pl.json

@@ -7,7 +7,8 @@
     "blog": "Blog",
     "contact": "Kontakt",
     "newsletter": "Newsletter",
-    "rss": "RSS"
+    "rss": "RSS",
+    "coffee": "Postaw mi kawę"
   },
   "component": {
     "avatar": {
@@ -66,6 +67,11 @@
         "heading": "Coś poszło nie tak",
         "description": "Podczas wysyłania wystąpił problem. Sprawdź email i spróbuj ponownie."
       }
+    },
+    "supportMe": {
+      "heading": "Wesprzyj mnie",
+      "description": "Moją stronę napędza Next.js, a mnie napędza kawa. Możesz mi postawić jedną, jeżeli chcesz utrzymać ten węglowo-krzemowy system w działaniu. Ale nie czuj się do tego zobligowany. Dzięki!",
+      "button": "Postaw mi kawę"
     }
   },
   "layout": {

e2e/navigation.spec.ts

@@ -146,6 +146,11 @@ test.describe('Navigation tests', () => {
     await expect(linkedin).toHaveAttribute('target', '_blank')
     await expect(linkedin).toHaveAttribute('href', link.linkedin)
 
+    const coffee = page.getByRole('link', { name: links.coffee })
+    await expect(coffee).toBeVisible()
+    await expect(coffee).toHaveAttribute('target', '_blank')
+    await expect(coffee).toHaveAttribute('href', link.buyMeACoffee)
+
     const githubPagePromise = page.waitForEvent('popup')
     await github.click()
     const githubPage = await githubPagePromise

e2e/reading.spec.ts

@@ -16,6 +16,7 @@ test.describe('Reading tests', () => {
     const internalLink = page.getByText("I'm an engineer")
 
     const share = page.getByText('Share via')
+    const bluesky = page.getByRole('link', { name: 'Bluesky' }).first()
     const twitter = page.getByRole('link', { name: 'Twitter' }).first()
     const facebook = page.getByRole('link', { name: 'Facebook' }).first()
     const linkedin = page.getByRole('link', { name: 'LinkedIn' }).first()
@@ -24,6 +25,10 @@ test.describe('Reading tests', () => {
     const prev = page.locator('a[rel="prev"]')
     const next = page.locator('a[rel="next"]')
 
+    const coffee = page
+      .getByRole('link', { name: section.supportMe.button })
+      .first()
+
     const newsletter = page.getByText(section.newsletter.heading)
 
     const related = page.getByRole('link', { name: component.post.button })
@@ -44,6 +49,8 @@ test.describe('Reading tests', () => {
     await expect(internalLink).not.toHaveAttribute('target')
 
     await expect(share).toBeVisible()
+    await expect(bluesky).toBeVisible()
+    await expect(bluesky).toHaveAttribute('target', '_blank')
     await expect(twitter).toBeVisible()
     await expect(twitter).toHaveAttribute('target', '_blank')
     await expect(facebook).toBeVisible()
@@ -54,7 +61,12 @@ test.describe('Reading tests', () => {
     await expect(email).toHaveAttribute('target', '_blank')
 
     await expect(next).toBeVisible()
+
+    await expect(coffee).toBeVisible()
+    await expect(coffee).toHaveAttribute('target', '_blank')
+
     await expect(newsletter).toBeVisible()
+
     await expect(await related.count()).toBeGreaterThan(0)
 
     await next.scrollIntoViewIfNeeded()