dips and past events cms support. fix foldout menu visuals

devcon/cms/pages/dips.mdx

@@ -1,16 +1,6 @@
 ---
 section1:
-  Test: |
-    afe
-
-    <TwoColumns
-      left={<>
-        aefa
-      </>}
-      right={<>
-        aefeaf
-      </>}
-    />
+  about: "## Contribute\n\n#### Devcon Improvement Proposals (DIPs)\_provide a mechanism for collecting collaborative community input on what should be included at the upcoming Devcon.\n\nWhile we are excited to have a more formal process to hear ideas from the community (roughly inspired by the more decentralized PEP, BIP and EIP processes), this is an experiment, and it should be understood that approval of proposals ultimately lies solely with the Devcon team. DIPs focus on collaboration in the ecosystem between different projects.\n\nThe Devcon team also publishes\_Requests For Proposals (RFPs), which are specific ideas we'd love to see take place for the next Devcon edition. They are available on our forum.\n"
 _template: dips
 ---
 

devcon/cms/pages/index.mdx

@@ -29,7 +29,7 @@ section1:
     Whether you're a seasoned Ethereum expert or just starting, Devcon is for
     you. It’s an intensive introduction for new Ethereum explorers, a global
     family reunion for those already a part of our ecosystem, and a source of
-    energy and creativity for all.
+    energy and creativity for all.![](/cms-assets/Bogota.png)
 section2:
   top: >
     ## **Devcon 7 — Southeast Asia**

devcon/cms/pages/past_events.mdx

@@ -1,10 +1,79 @@
 ---
 section1:
-  body: |
-    aaaaa
-
-    ![](/cms-assets/Bogota.png)
-  title: ''
+  about: "## **Devcon Editions**\n\n## Everything began in Berlin Kreuzberg in 2014 when the co-founders and earliest builders of Ethereum came together for a meet-up they named Devcon 0. Since then, Devcon has rotated the world. The journey went from Berlin to London, Shanghai, Cancún, Prague, Osaka and Bogotá. Each location brings something unique to the developer conference.\n\nYou might want to check out some details about Devcon’s history. Read on below for summaries of past editions, or head to the\_**[Devcon Archive](https://archive.devcon.org/archive)** to watch round-up videos, talks, and presentations.\n"
+events:
+  - title: Devcon VI
+    description: >
+      After a three-year-long pause, we emerged from the pandemic stronger than
+      before and reunited in Bogotá for the largest and some would say, “best
+      Devcon yet.” One of its most powerful aspects was the impact on the
+      regional community and the involvement of the flourishing Latin American
+      Ethereum community, which had organized 14 community events around the
+      region leading up to Devcon.
+    button: Watch
+    button_link: 'https://archive.devcon.org/archive/watch/?order=desc&sort=eventId'
+    image: /cms-assets/past-events/Bogota.png
+  - title: Devcon V
+    description: >
+      Devcon 5 brought the Ethereum ecosystem together in Japan in October of
+      2019 for an event that featured more content and attendees than ever
+      before. In addition to the conference talks, Devcon featured the event's
+      first community run outdoor stage and experiential Park area, a powerful
+      open from the City of Osaka, a celebrity appearance by the world’s most
+      well-known dog, Kabosu (the original “Doge”) and so much more.
+    button: Watch
+    button_link: 'https://archive.devcon.org/archive/watch/?edition=5'
+    image: /cms-assets/past-events/Osaka.png
+  - title: Devcon iv
+    description: >
+      Devcon 4 brought Ethereum's ecosystem and family back to Europe with a
+      2018 event at the Prague Convention Center in the Czech Republic
+      (Czechia). With 3,000 strong in attendance, Devcon was filled with talks,
+      experiences, teams from a matured application ecosystem, and more
+      enterprise support than ever before.
+    button: Watch
+    button_link: 'https://archive.devcon.org/archive/watch/?order=desc&sort=eventId'
+    image: /cms-assets/past-events/Prague.png
+  - title: devcon three
+    description: >
+      Devcon 3 was a celebration held around "Dio de Los Muertos" and Halloween
+      in Cancun, Mexico in November of 2017. It was the largest ever Ethereum
+      gathering at the time, with just under 2000 attending in a year of
+      unprecedented growth in terms of network use, adoption and progress.
+    button: Watch
+    button_link: 'https://archive.devcon.org/archive/watch/?order=desc&sort=eventId'
+    image: /cms-assets/past-events/Cancun.png
+  - title: devcon two
+    description: >
+      Devcon 2 came alongside one of the most (in)famous moments in Ethereum's
+      early history, as a set of Denial of Service attacks were launched against
+      the network just hours before the event was set to begin. With many of the
+      most formidable builders in the ecosystem gathered together in Shanghai,
+      they helped to coordinate emergency upgrades backstage to restore full
+      functionality to the network, moments before stepping forward to speak to
+      the future of the network on stage.
+    button: Watch
+    button_link: 'https://archive.devcon.org/archive/watch/?order=desc&sort=eventId'
+    image: /cms-assets/past-events/Shanghai.png
+  - title: DΞVCON 1
+    description: >
+      Only a few months after Ethereum came to life, DΞVCON 1 was held in London
+      in November of 2015. Presenters remained hard at work on each piece of the
+      original Ethereum roadmap, early dApp teams took the stage, and supporters
+      teased the early industry adoption that was to arrive soon.
+    button: Watch
+    button_link: 'https://archive.devcon.org/archive/watch/?order=desc&sort=eventId'
+    image: /cms-assets/past-events/London.png
+  - title: DEV CON 0
+    description: >
+      It all began in Berlin. Long prior to the launch of Ethereum, the earliest
+      builders and co-founders gathered in the Kreuzberg neighborhood in late
+      November of 2014 to outline their work and designs for the future of
+      Ethereum at a meetup called "ÐΞVcon-0". A great resource to learn about
+      the historical context and the early ethos of the project.
+    button: Watch
+    button_link: 'https://archive.devcon.org/archive/watch/?order=desc&sort=eventId'
+    image: /cms-assets/past-events/Berlin.png
 _template: past_events
 ---
 

devcon/src/components/common/layouts/header/menu/foldout/Foldout.tsx

@@ -30,22 +30,20 @@ const Foldout = (props: any) => {
           <div>
             <div className={css['top']}>{props.children}</div>
 
-            {!props.isApp && (
-              <div className={css['bottom']}>
-                <div className={css['social-media']}>
-                  <p>Social</p>
-                  <SocialMedia url="devcon.org" className={css['social-media-extension']} onShare={() => {}} />
-                </div>
+            <div className={css['bottom']}>
+              <div className={css['social-media']}>
+                <p>Social</p>
+                <SocialMedia url="devcon.org" className={css['social-media-extension']} onShare={() => {}} />
+              </div>
 
-                <div className={css['newsletter']}>
-                  <Newsletter id="foldout_newsletter_email" />
-                </div>
+              <div className={css['newsletter']}>
+                <Newsletter id="foldout_newsletter_email" />
+              </div>
 
-                <div className={css['copyright']}>
-                  <Copyright />
-                </div>
+              <div className={css['copyright']}>
+                <Copyright />
               </div>
-            )}
+            </div>
           </div>
         </div>,
         document.body

devcon/src/components/common/layouts/header/menu/foldout/foldout.module.scss

@@ -21,7 +21,12 @@
   @include fonts-md;
   overflow-x: hidden;
   overflow-y: auto;
-  display: grid;
+  display: none !important;
+
+  @media (max-width: 1350px) {
+    display: grid !important;
+  }
+
   position: fixed;
   padding-top: calc(4px + var(--headerHeight));
   padding-bottom: 16px;

devcon/src/components/common/layouts/header/menu/menu.module.scss

@@ -94,6 +94,10 @@
     &.mobile-only {
       display: none;
 
+      @media (min-width: 700px) {
+        transform: translateX(10px);
+      }
+
       @media (max-width: 1350px) {
         touch-action: none;
         display: flex;

devcon/src/components/common/layouts/header/menu/navigation/navigation.module.scss

@@ -160,11 +160,12 @@
       }
 
       .accordion-toggle {
-        @include fonts-xl;
+        @include fonts-lg;
         @include fonts-uppercase;
         cursor: pointer;
         display: flex;
         justify-content: space-between;
+        align-items: center;
         padding-top: $gaps-gap-4;
         padding-bottom: $gaps-gap-4;
 

devcon/src/components/domain/dips/overview/contribute/Contribute.tsx

@@ -8,10 +8,11 @@ import { useTranslations } from 'next-intl'
 import { chunkArray } from 'utils/chunk-array'
 import Image from 'next/legacy/image'
 import { usePageContext } from 'context/page-context'
+import RichText from 'lib/components/tina-cms/RichText'
 
 type ContributeProps = {
   contributors: Array<Contributor>
-  dipDescription: any
+  dipDescription?: any
 }
 
 type ThumbnailProps = {
@@ -142,14 +143,13 @@ export const Contribute = (props: ContributeProps) => {
 
   return (
     <section id="contribute" className={css['section']}>
-      <p className="h2 spaced">{page?.title ?? intl('dips_contribute')}</p>
-
       <div className={css['container']}>
         <div className={css['left-section']}>
-          <div
+          <RichText content={props.dipDescription} />
+          {/* <div
             dangerouslySetInnerHTML={{ __html: props.dipDescription }}
             className={`${css['dip-description']} markdown`}
-          />
+          /> */}
           <div className={css['links']}>
             <Link to="https://forum.devcon.org" indicateExternal className="text-uppercase font-lg bold">
               {intl('dips_visit_forum')}
@@ -160,7 +160,9 @@ export const Contribute = (props: ContributeProps) => {
           </div>
         </div>
         <div className={css['contributors']}>
-          <AutoScroller contributors={props.contributors} />
+          <div className="my-4 md:my-12">
+            <AutoScroller contributors={props.contributors} />
+          </div>
           <div className={css['info']}>
             <p>* {intl('dips_contributors')}</p> <Github />
           </div>

devcon/src/pages/dips/index.tsx

@@ -13,10 +13,15 @@ import { Tags } from 'components/common/tags'
 import { GetContributors, GetDIPs } from 'services/dips'
 import HeroBackground from 'assets/images/pages/hero-bgs/get-involved.jpg'
 import { Tag } from 'types/DIP'
+import { useTina } from 'tinacms/dist/react'
+import { client } from '../../../tina/__generated__/client'
+import { PagesDips, PagesQuery } from '../../../tina/__generated__/types'
 
 export default pageHOC(function DIPsTemplate(props: any) {
   const pageContext = usePageContext()
   const intl = useTranslations()
+  const { data } = useTina<PagesQuery>(props.cms)
+  const pages = data.pages as PagesDips
 
   return (
     <Page theme={themes['teal']}>
@@ -56,7 +61,7 @@ export default pageHOC(function DIPsTemplate(props: any) {
       />
 
       <div className="section">
-        <Contribute dipDescription={props.page.body} contributors={props.contributors} />
+        <Contribute dipDescription={pages.section1?.about} contributors={props.contributors} />
         <Proposals dips={props.dips} />
 
         {/* <Tags items={pageContext?.current?.tags} viewOnly /> */}
@@ -71,13 +76,19 @@ export async function getStaticProps(context: any) {
   const dips = await GetDIPs()
   const dipsWithoutCommunityHub = dips.filter(dip => dip.tags.every(tag => tag !== ('Community Hub' as any)))
   const contributors = await GetContributors()
+  const content = await client.queries.pages({ relativePath: 'dips.mdx' })
 
   return {
     props: {
       ...globalData,
       page,
       dips: dipsWithoutCommunityHub,
       contributors,
+      cms: {
+        variables: content.variables,
+        data: content.data,
+        query: content.query,
+      },
     },
     revalidate: 3600,
   }