Add changelog to /about (#24)

.env.example

@@ -0,0 +1 @@
+GITHUB_ACCESS_TOKEN=

components/changelog-list.tsx

@@ -0,0 +1,104 @@
+import {
+  CalendarIcon,
+  CodeBracketIcon,
+  UserCircleIcon,
+} from '@heroicons/react/24/outline'
+import clsx from 'clsx'
+import { format } from 'date-fns'
+import { motion, useAnimation, useInView } from 'framer-motion'
+import Link from 'next/link'
+import { useEffect, useRef } from 'react'
+import { ReleasesResponseData } from '../lib/github'
+import { Headline } from './headline'
+
+type ChangelogListProps = {
+  changelogEntries: ReleasesResponseData[]
+}
+
+const variants = {
+  hidden: {
+    opacity: 0,
+  },
+  visible: {
+    opacity: 1,
+    transition: {
+      delayChildren: 0,
+      staggerChildren: 0.2,
+    },
+  },
+}
+export const ChangelogList = ({ changelogEntries }: ChangelogListProps) => {
+  const controls = useAnimation()
+  const ref = useRef(null)
+  const isInView = useInView(ref)
+
+  useEffect(() => {
+    if (isInView) {
+      controls.start('visible')
+    }
+  }, [controls, isInView])
+
+  return (
+    <>
+      <motion.ul
+        ref={ref}
+        variants={variants}
+        initial="hidden"
+        animate={controls}
+      >
+        {changelogEntries.map((entry, index) => (
+          <motion.li key={entry.id} variants={variants}>
+            <ChangelogEntry entry={entry} latest={index === 0} />
+          </motion.li>
+        ))}
+      </motion.ul>
+    </>
+  )
+}
+
+type ChangelogEntryProps = {
+  entry: ReleasesResponseData
+  latest?: boolean
+}
+
+const ChangelogEntry = ({ entry, latest = false }: ChangelogEntryProps) => {
+  return (
+    <div className="bg-slate-100 p-4 rounded-xl mb-8">
+      <h3 className=" text-slate-800 flex items-center mb-2">
+        <div
+          className={clsx(
+            'font-semibold font-headline',
+            latest && 'text-lg',
+            !latest && 'text-sm'
+          )}
+        >
+          {entry.name}
+        </div>{' '}
+        {latest && (
+          <span className=" text-xs ml-2 px-2 py-1 pb-0.5 rounded-xl bg-blue-300 text-slate-50">
+            latest
+          </span>
+        )}
+      </h3>
+      <p className="text-sm text-slate-500">{entry.body}</p>
+      <div className="flex mt-4">
+        <p className="text-xs text-slate-500 mr-4 flex">
+          <UserCircleIcon className="inline h-3 w-3 mr-1" />
+          {entry.author.login}
+        </p>
+        <p className="text-xs text-slate-500 mr-4 flex">
+          <CalendarIcon className="inline h-3 w-3 mr-1" />
+          {format(new Date(entry.created_at.toString()), 'do MMMM, yyyy')}
+        </p>
+        <p className="text-xs text-blue-500 flex underline">
+          <Link
+            href={`https://github.com/Plsr/website-next/commit/${entry.target_commitish}`}
+          >
+            <CodeBracketIcon className="inline h-3 w-3 mr-1" />
+            {entry.target_commitish.slice(0, 8)}
+          </Link>
+        </p>
+      </div>
+    </div>
+  )
+}

components/headline.tsx

@@ -1,22 +1,29 @@
 import { ReactNode } from 'react'
 
-export const Headline = ({ level, children }: props) => {
+export const Headline = ({ level, children, id }: props) => {
   if (level === 2)
     return (
-      <h2 className="font-headline text-2xl font-bold mb-4 mt-8">{children}</h2>
+      <h2 id={id} className="font-headline text-2xl font-bold mb-4 mt-8">
+        {children}
+      </h2>
     )
   if (level === 3)
     return (
-      <h3 className="font-headline text-xl font-bold mb-4 mt-8">{children}</h3>
+      <h3 id={id} className="font-headline text-xl font-bold mb-4 mt-8">
+        {children}
+      </h3>
     )
   if (level === 4)
     return (
-      <h3 className="font-headline text-lg font-bold mb-4 mt-8">{children}</h3>
+      <h3 id={id} className="font-headline text-lg font-bold mb-4 mt-8">
+        {children}
+      </h3>
     )
   return null
 }
 
 type props = {
   level: 2 | 3 | 4
   children: ReactNode | ReactNode[]
+  id?: string
 }

lib/github.ts

@@ -0,0 +1,63 @@
+import { Octokit } from 'octokit'
+
+const octokit = new Octokit({
+  auth: process.env.GITHUB_ACCESS_TOKEN,
+})
+
+export const getWebsiteReleases = async (): Promise<ReleasesResponseData[]> => {
+  const releases = await octokit.request(
+    'GET /repos/{owner}/{repo}/releases{?per_page,page}',
+    {
+      owner: 'Plsr',
+      repo: 'website-next',
+    }
+  )
+
+  const releaseData = releases.data.filter((release: ReleasesResponseData) => {
+    return release.draft === false && release.prerelease === false
+  })
+
+  return releaseData
+}
+
+export type ReleasesResponseData = {
+  url: string
+  assets_url: string
+  upload_url: string
+  html_url: string
+  id: number
+  author: Author
+  node_id: string
+  tag_name: string
+  target_commitish: string
+  name: string
+  draft: boolean
+  prerelease: boolean
+  created_at: Date
+  published_at: Date
+  assets: any[]
+  tarball_url: string
+  zipball_url: string
+  body: string
+}
+
+type Author = {
+  login: string
+  id: number
+  node_id: string
+  avatar_url: string
+  gravatar_id: string
+  url: string
+  html_url: string
+  followers_url: string
+  following_url: string
+  gists_url: string
+  starred_url: string
+  subscriptions_url: string
+  organizations_url: string
+  repos_url: string
+  events_url: string
+  received_events_url: string
+  type: string
+  site_admin: boolean
+}