[examples/turing] - rename it to turing
This commit is contained in:
Luccas Mateus de Medeiros Gomes
107
examples/turing/pages/[...slug].jsx
Normal file
107
examples/turing/pages/[...slug].jsx
Normal file
@@ -0,0 +1,107 @@
|
||||
import { Container } from '../components/Container'
|
||||
import clientPromise from '../lib/mddb'
|
||||
import { promises as fs } from 'fs';
|
||||
import { MDXRemote } from 'next-mdx-remote'
|
||||
import { Card } from '../components/Card'
|
||||
import Head from 'next/head'
|
||||
import parse from '../lib/markdown'
|
||||
import { Mermaid } from '@flowershow/core';
|
||||
import { Header } from '../components/Header';
|
||||
|
||||
export const getStaticProps = async ({ params }) => {
|
||||
const urlPath = params.slug ? params.slug.join('/') : ''
|
||||
|
||||
const mddb = await clientPromise
|
||||
const dbFile = await mddb.getFileByUrl(urlPath)
|
||||
|
||||
const source = await fs.readFile(dbFile.file_path,'utf-8')
|
||||
let mdxSource = await parse(source, '.mdx')
|
||||
|
||||
return {
|
||||
props: {
|
||||
mdxSource,
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
export async function getStaticPaths() {
|
||||
const mddb = await clientPromise
|
||||
const allDocuments = await mddb.getFiles({ extensions: ['md', 'mdx'] })
|
||||
|
||||
const paths = allDocuments.filter(document => document.url_path !== '/').map((page) => {
|
||||
const parts = page.url_path.split('/')
|
||||
return { params: { slug: parts } }
|
||||
})
|
||||
|
||||
return {
|
||||
paths,
|
||||
fallback: false,
|
||||
}
|
||||
}
|
||||
|
||||
const isValidUrl = (urlString) => {
|
||||
try {
|
||||
return Boolean(new URL(urlString))
|
||||
} catch (e) {
|
||||
return false
|
||||
}
|
||||
}
|
||||
|
||||
const Meta = ({keyValuePairs}) => {
|
||||
const prettifyMetaValue = (value) => value.replaceAll('-',' ').charAt(0).toUpperCase() + value.replaceAll('-',' ').slice(1);
|
||||
return (
|
||||
<>
|
||||
{keyValuePairs.map((entry) => {
|
||||
return isValidUrl(entry[1]) ? (
|
||||
<Card.Description>
|
||||
<span className="font-semibold">
|
||||
{prettifyMetaValue(entry[0])}: {' '}
|
||||
</span>
|
||||
<a
|
||||
className="text-ellipsis underline transition hover:text-teal-400 dark:hover:text-teal-900"
|
||||
href={entry[1]}
|
||||
>
|
||||
{entry[1]}
|
||||
</a>
|
||||
</Card.Description>
|
||||
) : (
|
||||
<Card.Description>
|
||||
<span className="font-semibold">{prettifyMetaValue(entry[0])}: </span>
|
||||
{Array.isArray(entry[1]) ? entry[1].join(', ') : entry[1]}
|
||||
</Card.Description>
|
||||
)
|
||||
})}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default function DRDPage({ mdxSource }) {
|
||||
const meta = mdxSource.frontMatter
|
||||
const keyValuePairs = Object.entries(meta).filter(
|
||||
(entry) => entry[0] !== 'title'
|
||||
)
|
||||
return (
|
||||
<>
|
||||
<Header />
|
||||
<Head>
|
||||
<title>{meta.title}</title>
|
||||
</Head>
|
||||
<Container className="mt-16 lg:mt-32 relative">
|
||||
<Header />
|
||||
<article>
|
||||
<header className="flex flex-col">
|
||||
<h1 className="mt-6 text-4xl font-bold tracking-tight text-zinc-800 dark:text-zinc-100 sm:text-5xl">
|
||||
{meta.title}
|
||||
</h1>
|
||||
<Card as="article">
|
||||
<Meta keyValuePairs={keyValuePairs} />
|
||||
</Card>
|
||||
</header>
|
||||
<div className="prose dark:prose-invert">
|
||||
<MDXRemote {...mdxSource.mdxSource} components={{mermaid: Mermaid}} />
|
||||
</div>
|
||||
</article>
|
||||
</Container>
|
||||
</>
|
||||
)
|
||||
}
|
||||
38
examples/turing/pages/_app.jsx
Normal file
38
examples/turing/pages/_app.jsx
Normal file
@@ -0,0 +1,38 @@
|
||||
import { useEffect, useRef } from 'react'
|
||||
|
||||
import { Footer } from '../components/Footer'
|
||||
import { Header } from '../components/Header'
|
||||
|
||||
import '../styles/tailwind.css'
|
||||
import 'focus-visible'
|
||||
|
||||
function usePrevious(value) {
|
||||
let ref = useRef()
|
||||
|
||||
useEffect(() => {
|
||||
ref.current = value
|
||||
}, [value])
|
||||
|
||||
return ref.current
|
||||
}
|
||||
|
||||
export default function App({ Component, pageProps, router }) {
|
||||
let previousPathname = usePrevious(router.pathname)
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="fixed inset-0 flex justify-center sm:px-8">
|
||||
<div className="flex w-full max-w-7xl lg:px-8">
|
||||
<div className="w-full bg-white ring-1 ring-zinc-100 dark:bg-zinc-900 dark:ring-zinc-300/20" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="relative">
|
||||
<Header />
|
||||
<main>
|
||||
<Component previousPathname={previousPathname} {...pageProps} />
|
||||
</main>
|
||||
<Footer />
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
52
examples/turing/pages/_document.jsx
Normal file
52
examples/turing/pages/_document.jsx
Normal file
@@ -0,0 +1,52 @@
|
||||
import { Head, Html, Main, NextScript } from 'next/document'
|
||||
|
||||
const modeScript = `
|
||||
updateMode()
|
||||
window.addEventListener('storage', updateModeWithoutTransitions)
|
||||
|
||||
function updateMode() {
|
||||
let isDarkMode = window.localStorage.isDarkMode === 'true'
|
||||
|
||||
if (isDarkMode) {
|
||||
document.documentElement.classList.add('dark')
|
||||
} else {
|
||||
document.documentElement.classList.remove('dark')
|
||||
}
|
||||
}
|
||||
|
||||
function disableTransitionsTemporarily() {
|
||||
document.documentElement.classList.add('[&_*]:!transition-none')
|
||||
window.setTimeout(() => {
|
||||
document.documentElement.classList.remove('[&_*]:!transition-none')
|
||||
}, 0)
|
||||
}
|
||||
|
||||
function updateModeWithoutTransitions() {
|
||||
disableTransitionsTemporarily()
|
||||
updateMode()
|
||||
}
|
||||
`
|
||||
|
||||
export default function Document() {
|
||||
return (
|
||||
<Html className="h-full antialiased" lang="en">
|
||||
<Head>
|
||||
<script dangerouslySetInnerHTML={{ __html: modeScript }} />
|
||||
<link
|
||||
rel="alternate"
|
||||
type="application/rss+xml"
|
||||
href={`${process.env.NEXT_PUBLIC_SITE_URL}/rss/feed.xml`}
|
||||
/>
|
||||
<link
|
||||
rel="alternate"
|
||||
type="application/feed+json"
|
||||
href={`${process.env.NEXT_PUBLIC_SITE_URL}/rss/feed.json`}
|
||||
/>
|
||||
</Head>
|
||||
<body className="flex h-full flex-col bg-zinc-50 dark:bg-black">
|
||||
<Main />
|
||||
<NextScript />
|
||||
</body>
|
||||
</Html>
|
||||
)
|
||||
}
|
||||
296
examples/turing/pages/index.jsx
Normal file
296
examples/turing/pages/index.jsx
Normal file
@@ -0,0 +1,296 @@
|
||||
import Head from 'next/head'
|
||||
import fs from 'fs'
|
||||
|
||||
import { Card } from '../components/Card'
|
||||
import { Container } from '../components/Container'
|
||||
import clientPromise from '../lib/mddb'
|
||||
import { Index } from 'flexsearch'
|
||||
import { useForm } from 'react-hook-form'
|
||||
import Link from 'next/link'
|
||||
import { serialize } from 'next-mdx-remote/serialize'
|
||||
import { MDXRemote } from 'next-mdx-remote'
|
||||
|
||||
function DatasetCard({ dataset }) {
|
||||
return (
|
||||
<Card as="article">
|
||||
<Card.Title>
|
||||
<Link href={dataset.url}>{dataset.title}</Link>
|
||||
</Card.Title>
|
||||
<Card.Description>
|
||||
<span className="font-semibold">Link to publication: </span>{' '}
|
||||
<a
|
||||
className="text-ellipsis underline transition hover:text-teal-400 dark:hover:text-teal-900"
|
||||
href={dataset['link-to-publication']}
|
||||
>
|
||||
{dataset['link-to-publication']}
|
||||
</a>
|
||||
</Card.Description>
|
||||
<Card.Description>
|
||||
<span className="font-semibold">Link to data: </span>
|
||||
<a
|
||||
className="text-ellipsis underline transition hover:text-teal-600 dark:hover:text-teal-900"
|
||||
href={dataset['link-to-data']}
|
||||
>
|
||||
{dataset['link-to-data']}
|
||||
</a>
|
||||
</Card.Description>
|
||||
<Card.Description>
|
||||
<span className="font-semibold">Task Description: </span>
|
||||
{dataset['task-description']}
|
||||
</Card.Description>
|
||||
<Card.Description>
|
||||
<span className="font-semibold">Details of Task: </span>{' '}
|
||||
{dataset['details-of-task']}
|
||||
</Card.Description>
|
||||
<Card.Description>
|
||||
<span className="font-semibold">Size of Dataset: </span>{' '}
|
||||
{dataset['size-of-dataset']}
|
||||
</Card.Description>
|
||||
<Card.Description>
|
||||
<span className="font-semibold">Percentage Abusive: </span>
|
||||
{dataset['percentage-abusive']}%
|
||||
</Card.Description>
|
||||
<Card.Description>
|
||||
<span className="font-semibold">Language: </span>
|
||||
{dataset['language']}
|
||||
</Card.Description>
|
||||
<Card.Description>
|
||||
<span className="font-semibold">Level of Annotation: </span>
|
||||
{dataset['level-of-annotation'].join(', ')}
|
||||
</Card.Description>
|
||||
<Card.Description>
|
||||
<span className="font-semibold">Platform: </span>
|
||||
{dataset['platform'].join(', ')}
|
||||
</Card.Description>
|
||||
<Card.Description>
|
||||
<span className="font-semibold">Medium: </span>
|
||||
{dataset['medium'].join(', ')}
|
||||
</Card.Description>
|
||||
<Card.Description>
|
||||
<span className="font-semibold">Reference: </span>
|
||||
{dataset['reference']}
|
||||
</Card.Description>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
|
||||
function ListOfAbusiveKeywordsCard({ list }) {
|
||||
return (
|
||||
<Card as="article">
|
||||
<Card.Title>
|
||||
<Link href={list.url}>{list.title}</Link>
|
||||
</Card.Title>
|
||||
{list.description && (
|
||||
<Card.Description>
|
||||
<span className="font-semibold">List Description: </span>{' '}
|
||||
{list.description}
|
||||
</Card.Description>
|
||||
)}
|
||||
<Card.Description>
|
||||
<span className="font-semibold">Data Link: </span>
|
||||
<a
|
||||
className="text-ellipsis underline transition hover:text-teal-600 dark:hover:text-teal-900"
|
||||
href={list['data-link']}
|
||||
>
|
||||
{list['data-link']}
|
||||
</a>
|
||||
</Card.Description>
|
||||
<Card.Description>
|
||||
<span className="font-semibold">Reference: </span>
|
||||
<a
|
||||
className="text-ellipsis underline transition hover:text-teal-600 dark:hover:text-teal-900"
|
||||
href={list.reference}
|
||||
>
|
||||
{list.reference}
|
||||
</a>
|
||||
</Card.Description>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
|
||||
export default function Home({
|
||||
datasets,
|
||||
indexText,
|
||||
listsOfKeywords,
|
||||
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, handleSubmit, reset } = useForm({
|
||||
defaultValues: {
|
||||
searchTerm: '',
|
||||
lang: '',
|
||||
platform: '',
|
||||
},
|
||||
})
|
||||
return (
|
||||
<>
|
||||
<Head>
|
||||
<title>Hate Speech Dataset Catalogue</title>
|
||||
<meta
|
||||
name="description"
|
||||
content="Catalog of abusive language data (PLoS 2020)"
|
||||
/>
|
||||
</Head>
|
||||
<Container className="mt-9">
|
||||
<div className="max-w-2xl">
|
||||
<h1 className="text-4xl font-bold tracking-tight text-zinc-800 dark:text-zinc-100 sm:text-5xl">
|
||||
{indexText.frontmatter.title}
|
||||
</h1>
|
||||
<article className="index-text prose mt-6 flex flex-col gap-y-2 text-base text-zinc-600 dark:prose-invert prose-h3:mt-4 prose-a:font-normal prose-a:text-zinc-600 prose-a:decoration-inherit prose-img:rounded-none dark:text-zinc-400 prose-a:dark:text-zinc-400 hover:prose-a:text-teal-600 hover:prose-a:dark:text-teal-900">
|
||||
<MDXRemote {...indexText} />
|
||||
</article>
|
||||
</div>
|
||||
</Container>
|
||||
<Container className="mt-12 md:mt-14">
|
||||
<div className="mx-auto grid max-w-7xl grid-cols-1 gap-y-8 lg:max-w-none">
|
||||
<h2
|
||||
id="Datasets-header"
|
||||
className="text-xl font-bold tracking-tight text-zinc-800 dark:text-zinc-100 sm:text-5xl"
|
||||
>
|
||||
Datasets
|
||||
</h2>
|
||||
<form
|
||||
onSubmit={handleSubmit(() => reset())}
|
||||
className="rounded-2xl border border-zinc-100 px-4 py-6 dark:border-zinc-700/40 sm:p-6"
|
||||
>
|
||||
<p className="mt-2 text-lg font-semibold text-zinc-600 dark:text-zinc-100">
|
||||
Search for datasets
|
||||
</p>
|
||||
<div className="mt-6 flex flex-col gap-3 sm:flex-row">
|
||||
<input
|
||||
placeholder="Search here"
|
||||
aria-label="Hate speech on Twitter"
|
||||
{...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 appearance-none rounded-md border border-zinc-900/10 bg-white px-3 py-[calc(theme(spacing.2)-1px)] text-zinc-600 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 appearance-none rounded-md border border-zinc-900/10 bg-white px-3 py-[calc(theme(spacing.2)-1px)] text-zinc-600 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>
|
||||
<button
|
||||
type="submit"
|
||||
className="inline-flex flex-none items-center justify-center gap-2 rounded-md bg-zinc-800 px-3 py-2 text-sm font-semibold text-zinc-100 outline-offset-2 transition hover:bg-zinc-700 active:bg-zinc-800 active:text-zinc-100/70 active:transition-none dark:bg-zinc-700 dark:hover:bg-zinc-600 dark:active:bg-zinc-700 dark:active:text-zinc-100/70"
|
||||
>
|
||||
Clear filters
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
<div className="flex flex-col gap-16">
|
||||
{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) => (
|
||||
<DatasetCard key={dataset.title} dataset={dataset} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
<Container className="mt-16">
|
||||
<h2 id="Keywords-header" className="text-xl font-bold tracking-tight text-zinc-800 dark:text-zinc-100 sm:text-5xl">
|
||||
Lists of Abusive Keywords
|
||||
</h2>
|
||||
<div className="mt-3 flex flex-col gap-16">
|
||||
{listsOfKeywords.map((list) => (
|
||||
<ListOfAbusiveKeywordsCard key={list.title} list={list} />
|
||||
))}
|
||||
</div>
|
||||
</Container>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export async function getStaticProps() {
|
||||
const mddb = await clientPromise
|
||||
const datasetPages = await mddb.getFiles({
|
||||
folder: 'datasets',
|
||||
extensions: ['md', 'mdx'],
|
||||
})
|
||||
const datasets = datasetPages.map((page) => ({
|
||||
...page.metadata,
|
||||
id: page._id,
|
||||
url: page.url_path,
|
||||
}))
|
||||
const listsOfKeywordsPages = await mddb.getFiles({
|
||||
folder: 'keywords',
|
||||
extensions: ['md', 'mdx'],
|
||||
})
|
||||
const listsOfKeywords = listsOfKeywordsPages.map((page) => ({
|
||||
...page.metadata,
|
||||
id: page._id,
|
||||
url: page.url_path,
|
||||
}))
|
||||
|
||||
const index = await mddb.getFileByUrl('/')
|
||||
let indexSource = fs.readFileSync(index.file_path, { encoding: 'utf-8' })
|
||||
indexSource = await serialize(indexSource, { parseFrontmatter: true })
|
||||
|
||||
const availableLanguages = [
|
||||
...new Set(datasets.map((dataset) => dataset.language)),
|
||||
]
|
||||
const availablePlatforms = [
|
||||
...new Set(datasets.map((dataset) => dataset.platform).flat()),
|
||||
]
|
||||
return {
|
||||
props: {
|
||||
datasets,
|
||||
listsOfKeywords,
|
||||
indexText: indexSource,
|
||||
availableLanguages,
|
||||
availablePlatforms,
|
||||
},
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user