Add dedicated subject pages

config/gatsby-config.ts

@@ -100,26 +100,29 @@ export default {
  }
  },
  {
- resolve: 'gatsby-transformer-remark',
+ resolve: 'gatsby-plugin-mdx',
  options: {
- plugins: [
+ extensions: [`.mdx`],
+
+ gatsbyRemarkPlugins: [
  {
- resolve: `gatsby-remark-autolink-headers`,
+ resolve: `gatsby-remark-images`,
  options: {
- className: `md-headinglink`,
- isIconAfterHeader: true,
- elements: [`h1`, `h2`, `h3`, `h4`]
+ maxWidth: 4096,
+ linkImagesToOriginal: false,
+ withWebp: true,
+ withAvif: true,
+ loading: 'lazy'
  }
  },
- 'gatsby-remark-smartypants',
  {
- resolve: 'gatsby-remark-images',
+ resolve: `gatsby-remark-copy-linked-files`,
  options: {
- maxWidth: 1140,
- quality: 90,
- linkImagesToOriginal: false
+ destinationDir: (f: { hash: string; name: string }) => `downloads/${f.hash}/${f.name}`,
+ ignoreFileExtensions: [`png`, `jpg`, `jpeg`, `bmp`, `tiff`]
  }
- }
+ },
+ 'gatsby-remark-smartypants'
  ]
  }
  },
@@ -167,13 +170,23 @@ export default {
  matchPath: '/education',
  languages: ['en', 'hu']
  },
+ {
+ matchPath: '/education/:uid',
+ languages: ['en', 'hu']
+ },
  {
  matchPath: '/research',
  languages: ['en', 'hu']
  }
  ]
  }
  },
+ {
+ resolve: 'gatsby-plugin-anchor-links',
+ options: {
+ offset: -200
+ }
+ },
  `gatsby-plugin-sass`,
  `gatsby-plugin-image`,
  `gatsby-transformer-sharp`,

config/gatsby-node.ts

@@ -1,102 +1,120 @@
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-nocheck
+
 import { GatsbyNode } from 'gatsby'
 import { createFilePath } from 'gatsby-source-filesystem'
 import path from 'path'
 
 export const onCreateNode: GatsbyNode['onCreateNode'] = ({ node, getNode, actions }) => {
  const { createNodeField } = actions
- if (node.internal.type === `MarkdownRemark`) {
- const slug = createFilePath({ node, getNode, basePath: `pages` })
- const frontmatter = node.frontmatter as { layout: string }
- createNodeField({
- node,
- name: `slug`,
- value: slug
- })
- createNodeField({
- node,
- name: `layout`,
- value: frontmatter.layout
- })
+ if (node.internal.type === `Mdx` && node.parent.sourceInstanceName === `subject`) {
+ const [subjectId, lang] = node.parent.name.split('.')
+
+ createNodeField({ node, name: `subjectId`, value: subjectId })
+ createNodeField({ node, name: `lang`, value: lang })
+ createNodeField({ node, name: `type`, value: `subject` })
  }
 }
 
 export const onCreatePage: GatsbyNode['onCreatePage'] = ({ actions, page }) => {
  const { createPage, deletePage } = actions
+ // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+ // @ts-ignore
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  const i18nData = page.context.i18n as any
+ const subject = page.context.subject as any
+
  if (i18nData && i18nData.routed === false && i18nData.originalPath === i18nData.path) {
+ const defaultLanguage = i18nData.languages.indexOf(i18nData.defaultLanguage) !== -1 ? i18nData.defaultLanguage : i18nData.languages[0]
  deletePage(page)
  createPage({
  path: page.path,
  context: {
- ...page.context,
+ // ...page.context,
+ i18n: {
+ ...page.context.i18n,
+ language: defaultLanguage
+ },
+ language: defaultLanguage,
  redirect: {
  from: page.path,
- to: `/${i18nData.defaultLanguage}${page.path}`
+ to: `/${defaultLanguage}${page.path}`
  }
  },
  component: path.join(__dirname, '../src/utils/redirect.tsx')
  })
+ } else if (subject) {
+ const lang = page.context.i18n.language
+ const localizedSubject = subject.localizedData.find((l) => l.lang === lang)
+
+ deletePage(page)
+ if (localizedSubject) {
+ createPage({
+ path: page.path,
+ context: {
+ ...page.context,
+ subject: undefined,
+ mdxId: localizedSubject.localizedId,
+ subjectId: subject.subjectId,
+ subjectShortName: subject.id
+ },
+ component: localizedSubject.contentFilePath
+ ? `${page.component}?__contentFilePath=${localizedSubject.contentFilePath}`
+ : page.component
+ })
+ }
  }
 }
 
-/*
- * UNCOMMENT THIS PART IF BLOG POSTS IN MARKDOWN ARE AVAILABLE
- *
-export const createPages: GatsbyNode['createPages'] = ({ graphql, actions }) => {
+export const createPages: GatsbyNode['createPages'] = async ({ graphql, actions }) => {
  const { createPage } = actions
 
- // Query for markdown nodes to use in creating pages.
- // You can query for whatever data you want to create pages for e.g.
- // products, portfolio items, landing pages, etc.
- // Variables can be added as the second function parameter
- return graphql(
- `
- query loadPagesQuery($limit: Int!) {
- allMarkdownRemark(limit: $limit) {
- edges {
- node {
- fields {
- slug
- layout
- }
+ const subjectsQuery = await graphql(`
+ query loadPagesQuery {
+ allFile(filter: { sourceInstanceName: { eq: "subject" } }) {
+ edges {
+ node {
+ id
+ name
+ extension
+ absolutePath
+ relativeDirectory
+ childMdx {
+ id
  }
  }
  }
  }
- `,
- { limit: 1000 }
- ).then((result) => {
- if (result.errors) {
- throw result.errors
  }
+ `)
 
- // Create blog post pages.
- // eslint-disable-next-line dot-notation
- result.data['allMarkdownRemark'].edges.forEach((edge) => {
- const { slug } = edge.node.fields
- const { layout } = edge.node.fields
- createPage({
- path: slug,
- // This will automatically resolve the template to a corresponding
- // `layout` frontmatter in the Markdown.
- //
- // Feel free to set any `layout` as you'd like in the frontmatter, as
- // long as the corresponding template file exists in src/templates.
- // If no template is set, it will fall back to the default `page`
- // template.
- //
- // Note that the template has to exist first, or else the build will fail.
- component: path.join(__dirname, `../src/templates/${layout || 'page'}.tsx`),
- context: {
- // Data passed to context is available in page queries as GraphQL variables.
- slug
- }
- })
+ if (subjectsQuery.errors) {
+ throw subjectsQuery.errors
+ }
+
+ const subjects = subjectsQuery.data.allFile.edges
+ .filter((edge) => edge.node.extension === 'yml')
+ .map((edge) => ({
+ id: edge.node.name,
+ subjectId: edge.node.id,
+ localizedData: subjectsQuery.data.allFile.edges
+ .filter((e) => e.node.extension === 'mdx')
+ .filter((e) => e.node.name.split('.')[0] === edge.node.name)
+ .map((e) => ({
+ lang: e.node.name.split('.')[1],
+ contentFilePath: e.node.absolutePath,
+ localizedId: e.node.id
+ }))
+ }))
+
+ subjects.forEach((subject) => {
+ createPage({
+ path: `/education/${subject.id}`,
+ component: path.join(__dirname, `../src/templates/subject.tsx`),
+ context: { subject }
  })
  })
 }
-*/
 /*
 export const onPostBuild: GatsbyNode['onPostBuild'] = ({ reporter }) => {
  reporter.info('copy translation files')

package.json

@@ -33,6 +33,7 @@
  "@babel/core": "7.20.12",
  "@emotion/react": "11.10.5",
  "@emotion/styled": "11.10.5",
+ "@mdx-js/react": "^2.3.0",
  "@popperjs/core": "2.11.6",
  "@reach/router": "1.3.4",
  "@testing-library/jest-dom": "5.16.5",
@@ -45,10 +46,12 @@
  "dotenv": "16.0.3",
  "fs-extra": "11.1.0",
  "gatsby": "5.5.0",
+ "gatsby-plugin-anchor-links": "^1.2.1",
  "gatsby-plugin-canonical-urls": "5.5.0",
  "gatsby-plugin-emotion": "8.5.0",
  "gatsby-plugin-gdpr-cookies": "2.0.9",
  "gatsby-plugin-image": "3.5.0",
+ "gatsby-plugin-mdx": "^5.7.0",
  "gatsby-plugin-react-helmet": "6.5.0",
  "gatsby-plugin-react-i18next": "3.0.1",
  "gatsby-plugin-react-svg": "3.3.0",
@@ -60,12 +63,11 @@
  "gatsby-plugin-tsconfig-paths": "1.0.6",
  "gatsby-remark-autolink-headers": "6.5.0",
  "gatsby-remark-classes": "1.0.2",
- "gatsby-remark-copy-linked-files": "6.5.0",
- "gatsby-remark-images": "7.5.0",
+ "gatsby-remark-copy-linked-files": "^6.7.0",
+ "gatsby-remark-images": "^7.7.0",
  "gatsby-remark-smartypants": "6.5.0",
  "gatsby-source-filesystem": "5.5.0",
  "gatsby-transformer-json": "5.5.0",
- "gatsby-transformer-remark": "6.5.0",
  "gatsby-transformer-sharp": "5.5.0",
  "gatsby-transformer-yaml": "5.5.0",
  "i18next": "22.4.9",

src/components/Breadcrumbs.tsx

@@ -5,15 +5,25 @@ import { FaChevronRight } from 'react-icons/fa'
 
 type Props = {
  title: string
+ subpages?: { title: string; link: string }[]
 }
 
-const Breadcrumbs: React.FC<Props> = ({ title }) => {
+const Breadcrumbs: React.FC<Props> = ({ title, subpages }) => {
  const { t } = useI18next()
 
  return (
  <div className="custom-breadcrumbs py-3 border-bottom">
  <Container>
  <Link to="/">{t('nav.home.title')}</Link>
+ {subpages &&
+ subpages.map((subpage) => (
+ <React.Fragment key={subpage.link}>
+ <span className="mx-2">
+ <FaChevronRight size="0.6rem" />
+ </span>
+ <Link to={subpage.link}>{t(subpage.title)}</Link>
+ </React.Fragment>
+ ))}
  <span className="mx-2">
  <FaChevronRight size="0.6rem" />
  </span>

src/components/TopHero.tsx

@@ -21,7 +21,7 @@ const TopHero: React.FC<Props> = ({ heroTitle, heroDesc, bgImage }) => {
  <Container>
  <Row className="align-items-end">
  <Col lg={7}>
- <h2 className="mb-0">{t(heroTitle)}</h2>
+ <h1 className="mb-0">{t(heroTitle)}</h1>
  <p>{t(heroDesc)}</p>
  </Col>
  </Row>

src/components/aboutpage-components/FormerMembersSection.tsx

@@ -14,7 +14,7 @@ const FormerMembersSection: React.FC<Props> = ({ nodes, heroBackgroundImage }) =
  const { t } = useI18next()
 
  function memberName(props: MemberProps) {
- return t('about.members.name', { firstName: props.firstName, lastName: props.lastName })
+ return t('commons.members.name', { firstName: props.firstName, lastName: props.lastName })
  }
 
  return (

src/components/aboutpage-components/Member.tsx

@@ -19,7 +19,8 @@ const Member: React.FC<MemberProps> = ({
  dblpPage,
  scholarPage,
  twitterPage,
- linkedInPage
+ linkedInPage,
+ mitId
 }) => {
  const { t } = useI18next()
  const avatarImage = avatar ? getImage(avatar) : null
@@ -28,10 +29,13 @@ const Member: React.FC<MemberProps> = ({
  <div className="feature-1 border person text-center d-flex flex-column justify-content-between">
  {avatarImage && <GatsbyImage image={avatarImage} className="img-fluid" alt={firstName + lastName} />}
  <div className="feature-1-content">
- <h2>
- {t('about.members.name', { firstName, lastName })}
- {title && `, ${title}`}
- </h2>
+ {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
+ <a id={mitId}>
+ <h2>
+ {t('commons.members.name', { firstName, lastName })}
+ {title && `, ${title}`}
+ </h2>
+ </a>
  <span className="position mb-3 d-block">{position && t(`about.members.position.${position}`)}</span>
  </div>
  <div className="mt-auto">