Migrate /academic-grants-2022 to md

src/components/UI/md/MdSummary.tsx

@@ -0,0 +1,6 @@
+import { Flex, FlexProps } from '@chakra-ui/react';
+import { MARKDOWN_SUMMARY_ID } from '../../../constants';
+
+export const MdSummary = (props: FlexProps) => (
+  <Flex flexDir='column' gap={6} id={MARKDOWN_SUMMARY_ID} {...props} />
+);

src/components/layout/MdLayout.tsx

@@ -1,19 +1,24 @@
 import { ReactNode } from 'react';
 import { Box, Flex, Stack } from '@chakra-ui/react';
 
-import { PageMetadata } from '../UI';
+import { BannerApplicationClosed, PageMetadata } from '../UI';
 import { MdSidebar } from '../UI/md/MdSidebar';
 
 import type { Frontmatter, ToCNodeEntry, TocNodeType } from '../../types';
+import { MARKDOWN_SUMMARY_ID } from '../../constants';
 
 type LayoutProps = {
   children: ReactNode;
   frontmatter: Frontmatter;
   tocNodeItems: TocNodeType[];
 };
 
+const summaryTocItem = { title: 'Summary', url: `#${MARKDOWN_SUMMARY_ID}` };
+
 export const MdLayout = ({ children, frontmatter, tocNodeItems }: LayoutProps) => {
-  const { metaTitle, metaDescription, metaImage } = frontmatter;
+  const { metaTitle, metaDescription, metaImage, isClosed, hasSummary } = frontmatter;
+
+  const tocItems = hasSummary ? [summaryTocItem, ...tocNodeItems] : tocNodeItems;
 
   return (
     <Stack>
@@ -23,12 +28,14 @@ export const MdLayout = ({ children, frontmatter, tocNodeItems }: LayoutProps) =
         <Stack spacing={10} mb={8} px={{ base: 5, md: 0 }} py={{ base: 3, md: 12 }}>
           <Flex>
             <MdSidebar
-              sidebarLinks={tocNodeItems
+              sidebarLinks={tocItems
                 .filter((item): item is ToCNodeEntry => !('items' in item))
                 .map(item => ({ text: item.title || '', href: item.url || '' }))}
             />
 
             <Box w={{ lg: '70%' }} px={{ md: 20 }} pr={{ lg: 12 }}>
+              {isClosed && <BannerApplicationClosed mb={12} />}
+
               <Flex gap={6} direction='column'>
                 {children}
               </Flex>

src/constants.ts

@@ -63,7 +63,7 @@ export const SIDEBAR_SMALL_GRANTS_LINKS: SidebarLink[] = [
   { text: 'Apply', href: `${SMALL_GRANTS_URL}/#apply` }
 ];
 
-export const ACADEMIC_GRANTS_2022_URL = '/academic-grants-2022';
+export const ACADEMIC_GRANTS_2022_URL = 'academic-grants-2022';
 export const SIDEBAR_ACADEMIC_GRANTS_2022_LINKS: SidebarLink[] = [
   { text: 'Summary', href: `${ACADEMIC_GRANTS_2022_URL}/#description` },
   { text: 'Submit proposal', href: `${ACADEMIC_GRANTS_2022_URL}/#submit-proposal` },
@@ -383,3 +383,4 @@ export const GRANTS_URLS = [DEVCON_GRANTS_APPLY_URL, DEVCON_GRANTS_THANK_YOU_PAG
 
 // Markdown
 export const MARKDOWN_CONTENT_PATH = 'src/content';
+export const MARKDOWN_SUMMARY_ID = 'summary';

src/content/academic-grants-2022.mdx

@@ -0,0 +1,210 @@
+---
+metaTitle: Academic Grants Round 2022
+metaDescription: The Ethereum Foundation is sponsoring a wave of grants to support Ethereum-related academic work. Find all the details you need to apply here.
+metaImage: /images/academic-grants-hero.png
+isClosed: true
+hasSummary: true
+---
+
+<MdSummary>
+
+**We're calling all those interested in expanding academic knowledge throughout the Ethereum ecosystem!**
+
+The Ethereum community has grown immensely as developers, artists, companies, and even governments work together to make a positive impact with this technology.
+
+With this grants round, the Ethereum Foundation welcomes more academics to the table to push forward formal academic research in related domains. Such domains include theoretical and applied cryptography and mathematics, zero-knowledge proofs, economics, computation, cybersecurity, protocol and consensus mechanisms, formal verification, P2P networking, and hardware, just to mention a few areas.
+
+The Ethereum Foundation is excited to expand Ethereum's reach across more of academia through this grants round.
+
+</MdSummary>
+
+### Submit proposal
+
+Individual researchers with academic backgrounds, research centers, universities, think-tanks, educators and other stakeholders interested in research on matters related to Ethereum and its ecosystem are encouraged to apply.
+
+Anyone is free to participate in this grants round, as an individual or with a team.
+
+Research outputs are encouraged but not limited to the following [wishlist](https://notes.ethereum.org/@djrtwo/academic-grants-2022).
+
+We welcome research at any stage, whether it's a new idea based on the wishlist, a project that furthers Ethereum-related research you've already undertaken, or a lab experiment.
+
+Grants will be awarded on a case-by-case and rolling basis. You may enter more than one proposal as long as each proposal is unique and meets the [the requirements](#requirements).
+
+### Deadline
+
+The deadline has been extended. Submit by **May 8, 2022**. We will follow-up regarding your submission by email.
+
+### Requirements
+
+- Proposals must be in English.
+- Work must be open source.
+- Reports must be accessible by a url.
+
+### Selection criteria
+
+**Surprise us with your creativity!** But here are a few selection criteria considerations:
+
+- Impact of the proposed research output.
+- Quality of work and experience of the research team.
+- Clarity, conciseness and organization of the proposal.
+- Contribution to the wishlist areas.
+- Potential of long-term involvement in the Ethereum ecosystem.
+- Analyses or visualizations that help a non-technical audience gain insight into the research.
+
+### Wishlist
+
+The Ethereum Foundation is interested in research and academic output in the following domain areas, but don't let this restrict your creativity. Check out our [wishlist](https://notes.ethereum.org/@djrtwo/academic-grants-2022).
+
+### Next steps and support
+
+For any general support questions about your submission, please email [[email protected]](mailto:[email protected]).
+
+### Frequently asked questions
+
+<Accordion allowToggle>
+  <FAQItem question='Who can submit proposals for Academic Grants Round?'>
+      Academic institutions, consortia of universities, research centres,
+      universities, think-tanks and individuals with prior research experience.
+  </FAQItem>
+
+  <FAQItem question='What makes for a good proposal?'>
+    In short, we need enough information to understand your goals, the research
+    problem you&apos;re aiming to tackle, the academic output, information on
+    previous research work, who&apos;s involved and estimation regarding time
+    and budget. The more details you provide, the more likely we&apos;ll be able
+    to help.
+
+    For example:
+
+    - Clearly showing the research area you're digging into.
+    - Outlining the output. Is it a research paper or lab work that will culminate in an experimental report?
+    - Clearly stating the impact your research will have and how you foresee your findings being used by the Ethereum community.
+    - Detailed description of your project, milestones, the people involved and how much time you think it will take to complete.
+
+  </FAQItem>
+
+{' '}
+
+<FAQItem question='What stage does my idea or project need to be in?'>
+  If you have a follow-up idea of a previous research you conducted or if your research is aligned
+  with the wishlist domains, we want to hear about it! The goal is to advance knowledge that pushes
+  the Ethereum ecosystem forward.
+</FAQItem>
+
+{' '}
+
+<FAQItem question='What should the output be?'>
+  We are aiming to receive academic and formal research outputs, be it a research paper, an
+  experimental report or some sort of comprehensive research output. Whatever the output, the
+  information should be open-source and available for the broader community to use. The Intellectual
+  Property can still be owned by the research team, but it is key that the output is open source.
+</FAQItem>
+
+{' '}
+
+<FAQItem question='What is the budget available for this round?'>
+  This grants round has up to $750,000 in total, which is to be distributed among selected projects.
+</FAQItem>
+
+{' '}
+
+<FAQItem question='What is the expected duration of the research project?'>
+  We envision projects to take between 6 to 12 months, however, we are open to some flexibility
+  depending on the project proposal.
+</FAQItem>
+
+{' '}
+
+<FAQItem question='Are applications evaluated on a rolling basis or at the end of the deadline?'>
+  Project submissions will be evaluated on a rolling basis and contact will be made with each
+  applicant to inform about the evaluation outcome.
+</FAQItem>
+
+{' '}
+
+<FAQItem question='What costs are eligible for the Academic Grants Round?'>
+  Costs related to academic research are eligible for the Academic Grants Round. We encourage you to
+  itemize each cost on the budget section of the submission form.
+</FAQItem>
+
+{' '}
+
+<FAQItem question='Is there any co-financing needed?'>
+  No, the Ethereum Foundation does not require co-financing. Grants will be 100% covered by the
+  Ethereum Foundation.
+</FAQItem>
+
+{' '}
+
+<FAQItem question='What is the average grant size?'>
+  As projects may vary largely in duration, scope and outputs, grant amounts may also differ to a
+  large extent. We suggest that you present a budget that covers your academic research and related
+  outputs, itemizing each of the costs.
+</FAQItem>
+
+{' '}
+
+<FAQItem question='Is the grant awarded in FIAT or in Crypto?'>
+  You may choose if you prefer receiving the grant in FIAT, ETH or DAI, but for the purposes of the
+  project proposal and submission form, we kindly ask you to indicate the requested amount in FIAT.
+</FAQItem>
+
+{' '}
+
+<FAQItem question='Is there guidance on how long projects should last?'>
+  Projects may vary in duration. We are estimating projects to last between 6-12 months, but it is
+  an indicative timeframe. We allow for some flexibility as projects may vary largely in domain,
+  scope, outputs and researchers involved.
+</FAQItem>
+
+{' '}
+
+<FAQItem question='Are only applications that address the wishlist considered for funding?'>
+  Ethereum-related research will be supported through the Academic Grants Rounds. Your proposal does
+  not need to be addressing one of the wishlist areas. The wishlist should be seen as guidance on
+  the most pressing issues we have identified but is not exhaustive.
+</FAQItem>
+
+{' '}
+
+<FAQItem question='Can I submit more than one application or should I combine all the project ideas into one sole application?'>
+  You should submit one application per project idea/ wishlist area. Multiple applications per
+  institution are accepted for the Academic Grants Round.
+</FAQItem>
+
+{' '}
+
+<FAQItem question='Has this type of grant been awarded before by the Ethereum Foundation?'>
+  It is the first time the Ethereum Foundation is launching a specific grants round to support
+  Ethereum-related academic research. However, we do have an ongoing support Program - the Ecosystem
+  Support Program - which supports Ethereum related projects in various scopes.
+</FAQItem>
+
+{' '}
+
+<FAQItem question='Can you provide an estimate on the number of project submissions and selected projects in previous Academic Grants rounds?'>
+  This is the first round of grants administered by the Ethereum Foundation that specifically
+  supports academic research. However, the Ethereum Foundation has an ongoing support program - the
+  Ecosystem Support Program - and you’ll be able to find some of the granted projects
+  [here](/about/who-we-support).
+</FAQItem>
+
+{' '}
+
+<FAQItem question='Are Master students eligible to apply for the Academic Grants Round or is PhD level required?'>
+  Master&apos;s Students are eligible to apply for the grants round, should they have the academic
+  support of supervisors. PhD level is not required.
+</FAQItem>
+
+  <FAQItem question='What if I miss the deadline?'>
+      We encourage you to submit an inquiry for support through the Ecosystem
+      Support Program.
+
+      The Ethereum Foundation has a general grants initiative called the [Ecosystem Support Program (ESP)](/).
+
+      If you miss the deadline for this dedicated round of grants, but have a
+      proposal that advances the Ethereum ecosystem, we encourage you to head over
+      to ESP.
+
+  </FAQItem>
+</Accordion>

src/hooks/useActiveHash.ts

@@ -6,7 +6,8 @@ import { useEffect, useState } from 'react';
  * @param {*} rootMargin
  * @returns id of the element currently in viewport
  */
-export const useActiveHash = (itemIds: Array<string>, rootMargin = `0% 0% -80% 0%`): string => {
+export const useActiveHash = (itemIds: Array<string>, rootMargin = `0% 0% -80% 0%`) => {
+  const [lastActiveHash, setLastActiveHash] = useState<string>(itemIds[0]);
   const [hashes, setHashes] = useState<Record<string, boolean>>(() =>
     itemIds.reduce((acc, id, index) => ({ [id]: index === 0, ...acc }), {})
   );
@@ -40,7 +41,13 @@ export const useActiveHash = (itemIds: Array<string>, rootMargin = `0% 0% -80% 0
     };
   }, [itemIds, rootMargin]);
 
-  const firstActiveHash = itemIds.find(id => hashes[id]);
+  useEffect(() => {
+    const firstActiveHash = itemIds.find(id => hashes[id]);
+
+    if (firstActiveHash) {
+      setLastActiveHash(firstActiveHash);
+    }
+  }, [hashes, itemIds]);
 
-  return firstActiveHash || itemIds[0];
+  return lastActiveHash;
 };

src/pages/[...slug].tsx

@@ -2,11 +2,12 @@ import { serialize } from 'next-mdx-remote/serialize';
 import { MDXRemote, MDXRemoteSerializeResult } from 'next-mdx-remote';
 import type { GetStaticPaths, GetStaticProps, InferGetStaticPropsType } from 'next/types';
 import type { ParsedUrlQuery } from 'querystring';
-import { Accordion, Link, ListItem } from '@chakra-ui/react';
+import { Accordion, ListItem } from '@chakra-ui/react';
 
 import { FAQItem, List, PageSection, PageText, ReadyToApply } from '../components/UI';
 import { MdLayout } from '../components/layout/MdLayout';
 import { MdLink } from '../components/UI/md/MdLink';
+import { MdSummary } from '../components/UI/md/MdSummary';
 
 import remarkInferToc from '../utils/remark/remarkInferToc';
 import rehypeHeadingIds from '../utils/remark/rehypeHeadingIds';
@@ -50,7 +51,8 @@ export const getStaticProps = (async ({ params }) => {
   const mdxSource = await serialize<Record<string, unknown>, Frontmatter>(mdxText, {
     mdxOptions: {
       remarkPlugins: [[remarkInferToc, { callback: tocCallback }]],
-      rehypePlugins: [[rehypeHeadingIds]]
+      rehypePlugins: [[rehypeHeadingIds]],
+      format: 'mdx'
     },
     parseFrontmatter: true
   });
@@ -66,7 +68,8 @@ const components = {
   li: ListItem,
   ReadyToApply,
   Accordion,
-  FAQItem
+  FAQItem,
+  MdSummary
 };
 
 export default function Page({