💄 Revamped endpoints UI

web/components/endpoint.tsx

@@ -0,0 +1,45 @@
+import clsx from 'clsx'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import Link from 'next/link'
+import type { FunctionComponent } from 'react'
+import type { IconProp } from '@fortawesome/fontawesome-svg-core'
+
+type Props = {
+  href: string
+  title: string
+  width?: number
+  height?: number
+  rowStart?: number
+  colStart?: number
+  className?: string
+  icon?: IconProp
+}
+
+const Endpoint: FunctionComponent<Props> = ({ className, href, title, children, width, height, rowStart, colStart, icon }) => {
+  return (
+    <Link href={`/api/${href}`} passHref>
+      <a
+        className={clsx(
+          'flex flex-col justify-end rounded-xl px-4 py-8 text-white hover:shadow-xl',
+          className,
+        )}
+        style={{
+          gridColumn: typeof width !== 'undefined' && `span ${width} / span ${width}`,
+          gridRow: typeof height !== 'undefined' && `span ${height} / span ${height}`,
+          gridColumnStart: colStart,
+          gridRowStart: rowStart,
+        }}
+      >
+        {icon && (
+          <span>
+            <FontAwesomeIcon icon={icon} fixedWidth className="p-4 mb-4 text-lg sm:text-xl lg:text-2xl rounded-full bg-white bg-opacity-10" />
+          </span>
+        )}
+        <h3 className="text-2xl font-bold sm:text-3xl lg:text-4xl">{title}</h3>
+        <p className="mt-2 sm:mt-3 sm:text-lg">{children}</p>
+      </a>
+    </Link>
+  )
+}
+
+export default Endpoint

web/components/nav.tsx

@@ -10,7 +10,7 @@ const Nav: FunctionComponent = () => {
           <Link href="/" passHref>
             <a className="inline-flex items-center text-current no-underline hover:opacity-80 font-bold">
               DfE Attendance Scraper
-              <span className="bg-blue-600 rounded-lg text-white py-1 px-2 uppercase tracking-widest font-mono text-xs font-bold ml-4">Unofficial</span>
+              <span className="bg-gradient-to-r from-orange-500 via-rose-500 to-violet-700 rounded-lg text-white py-1 px-2 uppercase tracking-widest font-mono text-xs font-bold ml-4">Unofficial</span>
             </a>
           </Link>
         </div>

web/package.json

@@ -11,6 +11,7 @@
     "adm-zip": "^0.5.9",
     "axios": "^0.24.0",
     "cheerio": "^1.0.0-rc.10",
+    "clsx": "^1.1.1",
     "immer": "^9.0.7",
     "next": "12.0.7",
     "next-themes": "^0.0.15",

web/pages/index.tsx

@@ -1,52 +1,34 @@
-import type { GetStaticProps } from 'next'
 import type { FunctionComponent } from 'react'
-import Link from 'next/link'
 import Nav from '@/c/nav'
+import Endpoint from '@/c/endpoint'
+import { faCalendarDay } from '@fortawesome/pro-solid-svg-icons'
 
-export const getStaticProps: GetStaticProps = async () => {
-  const { endpoints } = await import('../data/endpoints.json')
-
-  return {
-    props: {
-      endpoints,
-    },
-  }
-}
-
-type Props = {
-  endpoints: {
-    href: string
-    title: string
-    desc: string
-  }[]
-}
-
-const Home: FunctionComponent<Props> & { title?: string } = ({ endpoints }) => {
+const Home: FunctionComponent & { title?: string } = () => {
   return (
     <>
       <Nav />
-      <main className="py-16 flex flex-col justify-center items-center">
-        <h1 className="text-6xl text-center font-extrabold">
-          DfE Attendance Scraper
-        </h1>
-
-        <p className="text-2xl text-center my-16">
-          API endpoints for obtaining attendance data scraped from the DfE&apos;s statistics website!
-          <br /><br />
-          <span className="font-semibold">
-            This website is not affiliated or associated with the DfE!
-          </span>
-        </p>
-
-        <div className="flex flex-col w-full sm:flex-row items-center justify-center flex-wrap max-w-3xl">
-          {endpoints.map(({ href, title, desc }) => <Link key={href} href={`/api/${href}`} passHref>
-            <a className="m-4 p-6 text-left text-inherit no-underline border border-slate-200 max-w-xs rounded-lg hover:text-blue-600 hover:border-blue-600">
-              <h2 className="mb-4 text-2xl font-bold">{title} &rarr;</h2>
-              <p className="text-xl font-medium">{desc}</p>
+      <section className="px-4 py-16 sm:px-6 sm:py-24 lg:px-8 dark:text-white dark:bg-black">
+        <div className="box-border max-w-screen-xl mx-auto px-6 md:px-8 gap-20 w-full">
+          <div className="mx-auto text-center max-w-screen-lg">
+            <h2 className="text-5xl font-extrabold tracking-tight sm:text-6xl lg:text-7xl">
+              Access national attendance data <span className="bg-clip-text text-transparent bg-gradient-to-tr from-orange-500 via-rose-500 to-violet-700 gradient-fix">programmatically</span>
+            </h2>
+            <p className="max-w-lg mx-auto my-6 sm:my-8 lg:my-10 text-lg font-medium leading-tight text-center text-gray-500 dark:text-gray-200 sm:max-w-4xl sm:text-xl lg:text-2xl">
+              API endpoints for obtaining attendance data scraped from the DfE&apos;s statistics website! <em>This site is not affiliated with nor endorsed by the DfE!</em>
+            </p>
+            <a href="https://github.com/lukecarr/dfe-attendance" className="inline-flex items-center justify-center border border-black bg-black hover:bg-white text-white hover:text-black dark:bg-white dark:text-black dark:border-white dark:hover:bg-black dark:hover:text-white px-8 py-3 md:px-10 md:leading-6 font-semibold no-underline text-base md:text-lg rounded-md">
+              View on GitHub
             </a>
-          </Link>)}
+          </div>
+        </div>
+      </section>
+      <div className="mx-auto w-full px-4 sm:px-6 md:px-8 max-w-screen-xl" id="endpoints">
+        <div className="space-y-6 md:grid md:space-y-0 grid-cols-6 grid-rows-3 gap-6">
+          <Endpoint className="bg-gradient-to-tr from-blue-400 to-blue-700" title="Daily Attendance" href="daily" width={2} height={2} icon={faCalendarDay}>
+            Daily attendance data for schools from Sep 2020 to present!
+          </Endpoint>
         </div>
-      </main>
+      </div>
     </>
   )
 }

web/styles/globals.css

@@ -1,3 +1,7 @@
 @tailwind base;
 @tailwind components;
-@tailwind utilities;
+@tailwind utilities;
+
+.gradient-fix {
+  -webkit-box-decoration-break: clone;
+}

web/yarn.lock

@@ -830,6 +830,11 @@ classnames@2.2.6:
   resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.6.tgz#43935bffdd291f326dad0a205309b38d00f650ce"
   integrity sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q==
 
+clsx@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.1.1.tgz#98b3134f9abbdf23b2663491ace13c5c03a73188"
+  integrity sha512-6/bPho624p3S2pMyvP5kKBPXnI3ufHLObBFCfgx+LkeR5lg2XYy2hqZqUf45ypD8COn2bhgGJSUE+l5dhNBieA==
+
 color-convert@^1.9.0:
   version "1.9.3"
   resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8"