[alan-turing][m] - first page with search

.gitignore

@@ -44,3 +44,7 @@ Thumbs.db
 # Env
 .env
 **/.env
+
+# MarkdownDB
+*.db
+**/*.db

examples/alan-turing-portal/content/let-mi-an-arabic-levantine-twitter-dataset-for-mysogynistic-language.md

@@ -9,6 +9,6 @@ percentage-abusive: 48.76
 language: Arabic
 level-of-annotation: ["Posts"]
 platform: ["Twitter"]
-medium: ["Text"]
+medium: ["Text", "Images"]
 reference: "Hala Mulki and Bilal Ghanem. 2021. Let-Mi: An Arabic Levantine Twitter Dataset for Misogynistic Language. In Proceedings of the Sixth Arabic Natural Language Processing Workshop, pages 154–163, Kyiv, Ukraine (Virtual). Association for Computational Linguistics"
 ---

examples/alan-turing-portal/next.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  swcMinify: true,
+};

examples/alan-turing-portal/next.config.mjs

@@ -1,22 +0,0 @@
-import nextMDX from '@next/mdx'
-import remarkGfm from 'remark-gfm'
-import rehypePrism from '@mapbox/rehype-prism'
-
-/** @type {import('next').NextConfig} */
-const nextConfig = {
-  pageExtensions: ['js', 'jsx', 'mdx'],
-  reactStrictMode: true,
-  experimental: {
-    scrollRestoration: true,
-  },
-}
-
-const withMDX = nextMDX({
-  extension: /\.mdx?$/,
-  options: {
-    remarkPlugins: [remarkGfm],
-    rehypePlugins: [rehypePrism],
-  },
-})
-
-export default withMDX(nextConfig)

examples/alan-turing-portal/package-lock.json

@@ -14,6 +14,7 @@
         "@mdx-js/loader": "^2.1.5",
         "@mdx-js/react": "^2.1.5",
         "@next/mdx": "^13.0.2",
+        "@tailwindcss/forms": "^0.5.3",
         "@tailwindcss/typography": "^0.5.4",
         "autoprefixer": "^10.4.12",
         "clsx": "^1.2.1",
@@ -23,11 +24,14 @@
         "focus-visible": "^5.2.0",
         "next": "13.3.0",
         "next-router-mock": "^0.9.3",
+        "next-superjson-plugin": "^0.5.7",
         "postcss-focus-visible": "^6.0.4",
         "react": "18.2.0",
         "react-dom": "18.2.0",
+        "react-hook-form": "^7.43.9",
         "react-markdown": "^8.0.7",
         "remark-gfm": "^3.0.1",
+        "superjson": "^1.12.3",
         "tailwindcss": "^3.3.0"
       },
       "devDependencies": {
@@ -631,6 +635,17 @@
         "node": ">=6"
       }
     },
+    "node_modules/@tailwindcss/forms": {
+      "version": "0.5.3",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/forms/-/forms-0.5.3.tgz",
+      "integrity": "sha512-y5mb86JUoiUgBjY/o6FJSFZSEttfb3Q5gllE4xoKjAAD+vBrnIhE4dViwUuow3va8mpH4s9jyUbUbrRGoRdc2Q==",
+      "dependencies": {
+        "mini-svg-data-uri": "^1.2.3"
+      },
+      "peerDependencies": {
+        "tailwindcss": ">=3.0.0 || >= 3.0.0-alpha.1"
+      }
+    },
     "node_modules/@tailwindcss/typography": {
       "version": "0.5.4",
       "resolved": "https://registry.npmjs.org/@tailwindcss/typography/-/typography-0.5.4.tgz",
@@ -2036,6 +2051,20 @@
       "resolved": "https://registry.npmjs.org/console-control-strings/-/console-control-strings-1.1.0.tgz",
       "integrity": "sha512-ty/fTekppD2fIwRvnZAVdeOiGd1c7YXEixbgJTNzqcxJWKQnjJ/V1bNEEE6hygpM3WjwHFUVK6HTjWSzV4a8sQ=="
     },
+    "node_modules/copy-anything": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/copy-anything/-/copy-anything-3.0.3.tgz",
+      "integrity": "sha512-fpW2W/BqEzqPp29QS+MwwfisHCQZtiduTe/m8idFo0xbti9fIZ2WVhAsCv4ggFVH3AgCkVdpoOCtQC6gBrdhjw==",
+      "dependencies": {
+        "is-what": "^4.1.8"
+      },
+      "engines": {
+        "node": ">=12.13"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/mesqueeb"
+      }
+    },
     "node_modules/core-js-pure": {
       "version": "3.22.5",
       "resolved": "https://registry.npmjs.org/core-js-pure/-/core-js-pure-3.22.5.tgz",
@@ -3919,6 +3948,14 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
+    "node_modules/hoist-non-react-statics": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
+      "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
+      "dependencies": {
+        "react-is": "^16.7.0"
+      }
+    },
     "node_modules/homedir-polyfill": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/homedir-polyfill/-/homedir-polyfill-1.0.3.tgz",
@@ -4508,6 +4545,17 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/is-what": {
+      "version": "4.1.8",
+      "resolved": "https://registry.npmjs.org/is-what/-/is-what-4.1.8.tgz",
+      "integrity": "sha512-yq8gMao5upkPoGEU9LsB2P+K3Kt8Q3fQFCGyNCWOAnJAMzEXVV9drYb0TXr42TTliLLhKIBvulgAXgtLLnwzGA==",
+      "engines": {
+        "node": ">=12.13"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/mesqueeb"
+      }
+    },
     "node_modules/is-yarn-global": {
       "version": "0.3.0",
       "resolved": "https://registry.npmjs.org/is-yarn-global/-/is-yarn-global-0.3.0.tgz",
@@ -6623,6 +6671,14 @@
         "node": ">=4"
       }
     },
+    "node_modules/mini-svg-data-uri": {
+      "version": "1.4.4",
+      "resolved": "https://registry.npmjs.org/mini-svg-data-uri/-/mini-svg-data-uri-1.4.4.tgz",
+      "integrity": "sha512-r9deDe9p5FJUPZAk3A59wGH7Ii9YrjjWw0jmw/liSbHl2CHiyXj6FcDXDu2K3TjVAXqiJdaw3xxwlZZr9E6nHg==",
+      "bin": {
+        "mini-svg-data-uri": "cli.js"
+      }
+    },
     "node_modules/minimatch": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
@@ -7023,6 +7079,18 @@
         "react": ">=17.0.0"
       }
     },
+    "node_modules/next-superjson-plugin": {
+      "version": "0.5.7",
+      "resolved": "https://registry.npmjs.org/next-superjson-plugin/-/next-superjson-plugin-0.5.7.tgz",
+      "integrity": "sha512-bkF49B/Pcf0GCh10vXL+hjBodC404FgzEsl3wtrjwqvTkoWDnqBOgP2KqWR9sF1tz4MSMlo872Q4Srl/2XRFWw==",
+      "dependencies": {
+        "hoist-non-react-statics": "^3.3.2"
+      },
+      "peerDependencies": {
+        "next": "^13",
+        "superjson": "^1"
+      }
+    },
     "node_modules/node-addon-api": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-4.3.0.tgz",
@@ -8049,6 +8117,21 @@
         "react": "^18.2.0"
       }
     },
+    "node_modules/react-hook-form": {
+      "version": "7.43.9",
+      "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.43.9.tgz",
+      "integrity": "sha512-AUDN3Pz2NSeoxQ7Hs6OhQhDr6gtF9YRuutGDwPQqhSUAHJSgGl2VeY3qN19MG0SucpjgDiuMJ4iC5T5uB+eaNQ==",
+      "engines": {
+        "node": ">=12.22.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/react-hook-form"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17 || ^18"
+      }
+    },
     "node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
@@ -9069,6 +9152,17 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/superjson": {
+      "version": "1.12.3",
+      "resolved": "https://registry.npmjs.org/superjson/-/superjson-1.12.3.tgz",
+      "integrity": "sha512-0j+U70KUtP8+roVPbwfqkyQI7lBt7ETnuA7KXbTDX3mCKiD/4fXs2ldKSMdt0MCfpTwiMxo20yFU3vu6ewETpQ==",
+      "dependencies": {
+        "copy-anything": "^3.0.2"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/supports-color": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
@@ -10720,6 +10814,14 @@
         "defer-to-connect": "^1.0.1"
       }
     },
+    "@tailwindcss/forms": {
+      "version": "0.5.3",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/forms/-/forms-0.5.3.tgz",
+      "integrity": "sha512-y5mb86JUoiUgBjY/o6FJSFZSEttfb3Q5gllE4xoKjAAD+vBrnIhE4dViwUuow3va8mpH4s9jyUbUbrRGoRdc2Q==",
+      "requires": {
+        "mini-svg-data-uri": "^1.2.3"
+      }
+    },
     "@tailwindcss/typography": {
       "version": "0.5.4",
       "resolved": "https://registry.npmjs.org/@tailwindcss/typography/-/typography-0.5.4.tgz",
@@ -11784,6 +11886,14 @@
       "resolved": "https://registry.npmjs.org/console-control-strings/-/console-control-strings-1.1.0.tgz",
       "integrity": "sha512-ty/fTekppD2fIwRvnZAVdeOiGd1c7YXEixbgJTNzqcxJWKQnjJ/V1bNEEE6hygpM3WjwHFUVK6HTjWSzV4a8sQ=="
     },
+    "copy-anything": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/copy-anything/-/copy-anything-3.0.3.tgz",
+      "integrity": "sha512-fpW2W/BqEzqPp29QS+MwwfisHCQZtiduTe/m8idFo0xbti9fIZ2WVhAsCv4ggFVH3AgCkVdpoOCtQC6gBrdhjw==",
+      "requires": {
+        "is-what": "^4.1.8"
+      }
+    },
     "core-js-pure": {
       "version": "3.22.5",
       "resolved": "https://registry.npmjs.org/core-js-pure/-/core-js-pure-3.22.5.tgz",
@@ -13214,6 +13324,14 @@
         }
       }
     },
+    "hoist-non-react-statics": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
+      "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
+      "requires": {
+        "react-is": "^16.7.0"
+      }
+    },
     "homedir-polyfill": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/homedir-polyfill/-/homedir-polyfill-1.0.3.tgz",
@@ -13617,6 +13735,11 @@
         "call-bind": "^1.0.2"
       }
     },
+    "is-what": {
+      "version": "4.1.8",
+      "resolved": "https://registry.npmjs.org/is-what/-/is-what-4.1.8.tgz",
+      "integrity": "sha512-yq8gMao5upkPoGEU9LsB2P+K3Kt8Q3fQFCGyNCWOAnJAMzEXVV9drYb0TXr42TTliLLhKIBvulgAXgtLLnwzGA=="
+    },
     "is-yarn-global": {
       "version": "0.3.0",
       "resolved": "https://registry.npmjs.org/is-yarn-global/-/is-yarn-global-0.3.0.tgz",
@@ -15088,6 +15211,11 @@
       "resolved": "https://registry.npmjs.org/mimic-response/-/mimic-response-1.0.1.tgz",
       "integrity": "sha512-j5EctnkH7amfV/q5Hgmoal1g2QHFJRraOtmx0JpIqkxhBhI/lJSl1nMpQ45hVarwNETOoWEimndZ4QK0RHxuxQ=="
     },
+    "mini-svg-data-uri": {
+      "version": "1.4.4",
+      "resolved": "https://registry.npmjs.org/mini-svg-data-uri/-/mini-svg-data-uri-1.4.4.tgz",
+      "integrity": "sha512-r9deDe9p5FJUPZAk3A59wGH7Ii9YrjjWw0jmw/liSbHl2CHiyXj6FcDXDu2K3TjVAXqiJdaw3xxwlZZr9E6nHg=="
+    },
     "minimatch": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
@@ -15370,6 +15498,14 @@
       "integrity": "sha512-jl8eFe71LpMVGeBMpoxILkGfEgGY7IfLy8XPyv05/o61p5oQRNpoMmk46VMxRIpt0fI8XcvznBZKpDK6vbYQcQ==",
       "requires": {}
     },
+    "next-superjson-plugin": {
+      "version": "0.5.7",
+      "resolved": "https://registry.npmjs.org/next-superjson-plugin/-/next-superjson-plugin-0.5.7.tgz",
+      "integrity": "sha512-bkF49B/Pcf0GCh10vXL+hjBodC404FgzEsl3wtrjwqvTkoWDnqBOgP2KqWR9sF1tz4MSMlo872Q4Srl/2XRFWw==",
+      "requires": {
+        "hoist-non-react-statics": "^3.3.2"
+      }
+    },
     "node-addon-api": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-4.3.0.tgz",
@@ -16035,6 +16171,12 @@
         "scheduler": "^0.23.0"
       }
     },
+    "react-hook-form": {
+      "version": "7.43.9",
+      "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.43.9.tgz",
+      "integrity": "sha512-AUDN3Pz2NSeoxQ7Hs6OhQhDr6gtF9YRuutGDwPQqhSUAHJSgGl2VeY3qN19MG0SucpjgDiuMJ4iC5T5uB+eaNQ==",
+      "requires": {}
+    },
     "react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
@@ -16758,6 +16900,14 @@
         }
       }
     },
+    "superjson": {
+      "version": "1.12.3",
+      "resolved": "https://registry.npmjs.org/superjson/-/superjson-1.12.3.tgz",
+      "integrity": "sha512-0j+U70KUtP8+roVPbwfqkyQI7lBt7ETnuA7KXbTDX3mCKiD/4fXs2ldKSMdt0MCfpTwiMxo20yFU3vu6ewETpQ==",
+      "requires": {
+        "copy-anything": "^3.0.2"
+      }
+    },
     "supports-color": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",

examples/alan-turing-portal/package.json

@@ -18,6 +18,7 @@
     "@mdx-js/loader": "^2.1.5",
     "@mdx-js/react": "^2.1.5",
     "@next/mdx": "^13.0.2",
+    "@tailwindcss/forms": "^0.5.3",
     "@tailwindcss/typography": "^0.5.4",
     "autoprefixer": "^10.4.12",
     "clsx": "^1.2.1",
@@ -27,11 +28,14 @@
     "focus-visible": "^5.2.0",
     "next": "13.3.0",
     "next-router-mock": "^0.9.3",
+    "next-superjson-plugin": "^0.5.7",
     "postcss-focus-visible": "^6.0.4",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "react-hook-form": "^7.43.9",
     "react-markdown": "^8.0.7",
     "remark-gfm": "^3.0.1",
+    "superjson": "^1.12.3",
     "tailwindcss": "^3.3.0"
   },
   "devDependencies": {

examples/alan-turing-portal/pages/index.jsx

@@ -1,11 +1,12 @@
 import Head from 'next/head'
-import Link from 'next/link'
 import fs from 'fs'
 
 import { Card } from '../components/Card'
 import { Container } from '../components/Container'
 import clientPromise from '@/lib/mddb'
 import ReactMarkdown from 'react-markdown'
+import { Index } from 'flexsearch'
+import { useForm } from 'react-hook-form'
 
 function DatasetCard({ dataset }) {
   return (
@@ -68,28 +69,14 @@ function DatasetCard({ dataset }) {
     </Card>
   )
 }
-
+export default function Home({ datasets, indexText, availableLanguages, availablePlatforms }) {
-function SearchBar() {
+  const index = new Index()
-  return (
+  datasets.forEach((dataset) => index.add(dataset.id, `${dataset.title} ${dataset['task-description']} ${dataset['details-of-task']} ${dataset['reference']}`))
-    <form
+  const { register, watch } = useForm({ defaultValues: {
-      className="rounded-2xl border border-zinc-100 p-6 dark:border-zinc-700/40"
+    searchTerm: '',
-    >
+    lang: '',
-      <p className="mt-2 text-lg font-semibold text-zinc-600 dark:text-zinc-400">
+    platform: ''
-        Search for datasets
+  }})
-      </p>
-      <div className="mt-6 flex">
-        <input
-          placeholder="Hate speech on Twitter"
-          aria-label="Hate speech on Twitter"
-          required
-          className="min-w-0 flex-auto appearance-none rounded-md border border-zinc-900/10 bg-white px-3 py-[calc(theme(spacing.2)-1px)] shadow-md shadow-zinc-800/5 placeholder:text-zinc-400 focus:border-teal-500 focus:outline-none focus:ring-4 focus:ring-teal-500/10 dark:border-zinc-700 dark:bg-zinc-700/[0.15] dark:text-zinc-200 dark:placeholder:text-zinc-500 dark:focus:border-teal-400 dark:focus:ring-teal-400/10 sm:text-sm"
-        />
-      </div>
-    </form>
-  )
-}
-
-export default function Home({ datasets, indexText }) {
   return (
     <>
       <Head>
@@ -111,11 +98,62 @@ export default function Home({ datasets, indexText }) {
       </Container>
       <Container className="mt-24 md:mt-28">
         <div className="mx-auto grid max-w-xl grid-cols-1 gap-y-8 lg:max-w-none">
-          <SearchBar />
+          <form className="rounded-2xl border border-zinc-100 p-6 dark:border-zinc-700/40">
+            <p className="mt-2 text-lg font-semibold text-zinc-600 dark:text-zinc-100">
+              Search for datasets
+            </p>
+            <div className="mt-6 flex gap-3">
+              <input
+                placeholder="Search here"
+                aria-label="Hate speech on Twitter"
+                required
+                {...register('searchTerm')}
+                className="min-w-0 flex-auto appearance-none rounded-md border border-zinc-900/10 bg-white px-3 py-[calc(theme(spacing.2)-1px)] shadow-md shadow-zinc-800/5 placeholder:text-zinc-600 focus:border-teal-500 focus:outline-none focus:ring-4 focus:ring-teal-500/10 dark:border-zinc-700 dark:bg-zinc-700/[0.15] dark:text-zinc-200 dark:placeholder:text-zinc-200 dark:focus:border-teal-400 dark:focus:ring-teal-400/10 sm:text-sm"
+              />
+              <select
+                placeholder="Language"
+                defaultValue=""
+                className="min-w-0 flex-auto text-zinc-600 appearance-none rounded-md border border-zinc-900/10 bg-white px-3 py-[calc(theme(spacing.2)-1px)] shadow-md shadow-zinc-800/5 placeholder:text-zinc-400 focus:border-teal-500 focus:outline-none focus:ring-4 focus:ring-teal-500/10 dark:border-zinc-700 dark:bg-zinc-700/[0.15] dark:text-zinc-200 dark:placeholder:text-zinc-500 dark:focus:border-teal-400 dark:focus:ring-teal-400/10 sm:text-sm"
+                {...register('lang')}
+              >
+                <option value="" disabled hidden>Filter by language</option>
+                {availableLanguages.map((lang) => (
+                  <option key={lang} className='dark:bg-white dark:text-black' value={lang}>{lang}</option>
+                ))}
+              </select>
+              <select
+                placeholder="Platform"
+                defaultValue=""
+                className="min-w-0 flex-auto text-zinc-600 appearance-none rounded-md border border-zinc-900/10 bg-white px-3 py-[calc(theme(spacing.2)-1px)] shadow-md shadow-zinc-800/5 placeholder:text-zinc-400 focus:border-teal-500 focus:outline-none focus:ring-4 focus:ring-teal-500/10 dark:border-zinc-700 dark:bg-zinc-700/[0.15] dark:text-zinc-200 dark:placeholder:text-zinc-500 dark:focus:border-teal-400 dark:focus:ring-teal-400/10 sm:text-sm"
+                {...register('platform')}
+              >
+                <option value="" disabled hidden>Filter by platform</option>
+                {availablePlatforms.map((platform) => (
+                  <option key={platform} className='dark:bg-white dark:text-black' value={platform}>{platform}</option>
+                ))}
+              </select>
+            </div>
+          </form>
           <div className="flex flex-col gap-16">
-            {datasets.map((dataset) => (
+            {datasets
-              <DatasetCard key={dataset.title} dataset={dataset} />
+              .filter((dataset) =>
-            ))}
+                watch().searchTerm && watch().searchTerm !== ''
+                  ? index.search(watch().searchTerm).includes(dataset.id)
+                  : true
+              )
+              .filter((dataset) =>
+                watch().lang && watch().lang !== ''
+                  ? dataset.language === watch().lang
+                  : true
+              )
+              .filter((dataset) =>
+                watch().platform && watch().platform !== ''
+                  ? dataset.platform.includes(watch().platform)
+                  : true
+              )
+              .map((dataset) => (
+                <DatasetCard key={dataset.title} dataset={dataset} />
+              ))}
           </div>
         </div>
       </Container>
@@ -128,13 +166,17 @@ export async function getStaticProps() {
   const allPages = await mddb.getFiles({ extensions: ['md', 'mdx'] })
   const datasets = allPages
     .filter((page) => page.url_path !== '/')
-    .map((page) => page.metadata)
+    .map((page) => ({ ...page.metadata, id: page._id }))
   const index = allPages.filter((page) => page.url_path === '/')[0]
   const source = fs.readFileSync(index.file_path, { encoding: 'utf-8' })
+  const availableLanguages = [... new Set(datasets.map((dataset) => dataset.language))]
+  const availablePlatforms = [... new Set(datasets.map((dataset) => dataset.platform).flat())]
   return {
     props: {
       indexText: source,
       datasets,
+      availableLanguages,
+      availablePlatforms,
     },
   }
 }

examples/alan-turing-portal/tailwind.config.js

@@ -6,7 +6,7 @@ module.exports = {
     "./components/**/*.{js,ts,jsx,tsx,mdx}",
   ],
   darkMode: 'class',
-  plugins: [require('@tailwindcss/typography')],
+  plugins: [require('@tailwindcss/typography'), require('@tailwindcss/forms')],
   theme: {
     fontSize: {
       xs: ['0.8125rem', { lineHeight: '1.5rem' }],