diff --git a/.gitignore b/.gitignore index cfed33d4..2708d6f8 100644 --- a/.gitignore +++ b/.gitignore @@ -44,3 +44,7 @@ Thumbs.db # Env .env **/.env + +# MarkdownDB +*.db +**/*.db diff --git a/examples/alan-turing-portal/content/let-mi-an-arabic-levantine-twitter-dataset-for-mysogynistic-language.md b/examples/alan-turing-portal/content/let-mi-an-arabic-levantine-twitter-dataset-for-mysogynistic-language.md index 63982f2c..ae1dd529 100644 --- a/examples/alan-turing-portal/content/let-mi-an-arabic-levantine-twitter-dataset-for-mysogynistic-language.md +++ b/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" --- diff --git a/examples/alan-turing-portal/markdown.db b/examples/alan-turing-portal/markdown.db index b17a471f..caef66e5 100644 Binary files a/examples/alan-turing-portal/markdown.db and b/examples/alan-turing-portal/markdown.db differ diff --git a/examples/alan-turing-portal/next.config.js b/examples/alan-turing-portal/next.config.js new file mode 100644 index 00000000..cc03fbed --- /dev/null +++ b/examples/alan-turing-portal/next.config.js @@ -0,0 +1,3 @@ +module.exports = { + swcMinify: true, +}; diff --git a/examples/alan-turing-portal/next.config.mjs b/examples/alan-turing-portal/next.config.mjs deleted file mode 100644 index 5f528073..00000000 --- a/examples/alan-turing-portal/next.config.mjs +++ /dev/null @@ -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) diff --git a/examples/alan-turing-portal/package-lock.json b/examples/alan-turing-portal/package-lock.json index c45d6ff8..1535f3c6 100644 --- a/examples/alan-turing-portal/package-lock.json +++ b/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", diff --git a/examples/alan-turing-portal/package.json b/examples/alan-turing-portal/package.json index e5c5afd2..833dbe09 100644 --- a/examples/alan-turing-portal/package.json +++ b/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": { diff --git a/examples/alan-turing-portal/pages/index.jsx b/examples/alan-turing-portal/pages/index.jsx index 04cecc07..3ba718ba 100644 --- a/examples/alan-turing-portal/pages/index.jsx +++ b/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 }) { ) } - -function SearchBar() { - return ( -
-

- Search for datasets -

-
- -
-
- ) -} - -export default function Home({ datasets, indexText }) { +export default function Home({ datasets, indexText, availableLanguages, availablePlatforms }) { + const index = new Index() + datasets.forEach((dataset) => index.add(dataset.id, `${dataset.title} ${dataset['task-description']} ${dataset['details-of-task']} ${dataset['reference']}`)) + const { register, watch } = useForm({ defaultValues: { + searchTerm: '', + lang: '', + platform: '' + }}) return ( <> @@ -111,11 +98,62 @@ export default function Home({ datasets, indexText }) {
- +
+

+ Search for datasets +

+
+ + + +
+
- {datasets.map((dataset) => ( - - ))} + {datasets + .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) => ( + + ))}
@@ -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, }, } } diff --git a/examples/alan-turing-portal/tailwind.config.js b/examples/alan-turing-portal/tailwind.config.js index faafdd57..1717462b 100644 --- a/examples/alan-turing-portal/tailwind.config.js +++ b/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' }],