<commit_before>import React from 'react';
import { Link, useParams } from 'react-router-dom';
import { Helmet } from 'react-helmet';
import HorizontalList from '../components/HorizontalList';
import projects from 'projects';
import bulma from 'bulma.scss';
import style from './ProjectDetail.scss';

const getProjectLink = (index, text) => {
	const project = projects[index];
	if (project) {
		return <Link to={`/projects/${project.slug}`}>{text}</Link>;
	} else {
		return <span>{text}</span>;
	}
};

const ProjectDetail = () => {
	const { projectId } = useParams();

	const project = projects.find(project => project.slug == projectId);
	const index = projects.indexOf(project);

	return (
		<div className={bulma.section}>
			<Helmet>
				<title>{project.title} &mdash; <NAME></title>
			</Helmet>

			<div className={bulma.container}>
				<h1 className={style.title}>{project.title} <span className={style.date}> &mdash; {project.releaseDate.getFullYear()}</span></h1>
				<p className={style.subtitle}>{project.subtitle}</p>

				<a className={style.projectLink} href={project.url} title='Check out the project online'>
					<img src={project.thumbnail} alt="" />
				</a>

				<section>
					{project.description}<commit_msg>404 when the project doesn't exist<commit_after>import React from 'react';
import { Link, useParams } from 'react-router-dom';
import { Helmet } from 'react-helmet';
import HorizontalList from '../components/HorizontalList';
import NoMatch from './NoMatch';
import projects from 'projects';
import bulma from 'bulma.scss';
import style from './ProjectDetail.scss';

const getProjectLink = (index, text) => {
	const project = projects[index];
	if (project) {
		return <Link to={`/projects/${project.slug}`}>{text}</Link>;
	} else {
		return <span>{text}</span>;
	}
};

const ProjectDetail = () => {
	const { projectId } = useParams();

	const project = projects.find(project => project.slug == projectId);
	const index = projects.indexOf(project);

	if (!project) {
		return <NoMatch />;
	}

	return (
		<div className={bulma.section}>
			<Helmet>
				<title>{project.title} &mdash; <NAME></title>
			</Helmet>

			<div className={bulma.container}>
				<h1 className={style.title}>{project.title} <span className={style.date}> &mdash; {project.releaseDate.getFullYear()}</span></h1>
				<p className={style.subtitle}>{project.subtitle}</p>

				<a className={style.projectLink} href={project.url} title='Check out the project online'>
					<img src={project.thumbnail} alt="" />
				</a>

				<section>
					{project.description}
{'fraction_non_alphanumeric': 0.17389605314576007, 'fraction_numerical': 0.0027354435326299334, 'mean_word_length': 4.5531453362255965, 'pattern_counts': {'":': 0, '<': 46, '<?xml version=': 0, '>': 52, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2618549', 'n_tokens_mistral': 879, 'n_tokens_neox': 798, 'n_words': 190}