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">