Merge pull request #108 from AbhinavRajesh/main

feat: added news section in home page with news page

common/routes.js

@@ -22,4 +22,6 @@ export const EVENT = makePath(`${SCHEDULE.path}/[slug]`, {
 
 export const LIBRARY = makePath('/library')
 
-export const Y2022 = makePath('/2022')
+export const Y2022 = makePath('/2022')
+
+export const NEWS = makePath("/news")

components/header/Header.jsx

@@ -10,6 +10,7 @@ import useWindowSize from '../../hooks/useWindowSize'
 import GitHubLogo from '../../public/icons/github-logo'
 import IconCalendar from '../../public/icons/calendar'
 import IconBooks from '../../public/icons/books'
+import IconBell from '../../public/icons/bell'
 import { BREAKPOINTS } from '../../common/constants'
 
 const Header = () => {
@@ -66,6 +67,24 @@ const Header = () => {
 
         <nav className="header__navigation">
           <ul className="header__list">
+            <li>
+              <Link
+                href={ROUTES.NEWS.getPath(year)}
+                aria-label={getLiteral('navigation:news')}
+              >
+                <a
+                  className={clsx('header__link', {
+                    ['is-active']: pathname === ROUTES.SCHEDULE.getPath(year),
+                  })}
+                  aria-label={getLiteral('navigation:news')}
+                >
+                  <IconBell />
+                  <span className="header__link-text">
+                    {getLiteral('navigation:news')}
+                  </span>
+                </a>
+              </Link>
+            </li>
             <li>
               <Link
                 href={ROUTES.SCHEDULE.getPath(year)}

components/header/header.scss

@@ -122,7 +122,8 @@
       color: $white;
 
       .icon-calendar,
-      .icon-books {
+      .icon-books,
+      .icon-bell {
         path {
           fill: $white;
         }
@@ -134,7 +135,8 @@
       color: $purple;
 
       .icon-calendar,
-      .icon-books {
+      .icon-books,
+      .icon-bell {
         path {
           fill: $purple;
         }
@@ -143,7 +145,8 @@
   }
 
   .icon-calendar,
-  .icon-books {
+  .icon-books,
+  .icon-bell {
     path {
       fill: $white;
       transition: fill $simple-fade;

components/home/news/News.jsx

@@ -0,0 +1,40 @@
+import { useRouter } from 'next/router'
+
+import SectionDivider from '../../section-divider/SectionDivider'
+import ButtonLink from '../../button-link/ButtonLink'
+
+import * as ROUTES from '../../../common/routes'
+
+const News = ({ title, news }) => {
+  const { pathname } = useRouter()
+  const year =
+    Number(pathname.split('/')[1]) > 404 ? Number(pathname.split('/')[1]) : null
+
+  return (
+    <section className="news">
+      <div className="news__content">
+        <SectionDivider title={title} />
+        <div className="news__items">
+            <div className="news__item" key={news.title}>
+              <a
+                href={news.link}
+                className="news__link"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                <h4 className="news__text">{news.title}</h4>
+              </a>
+              <p className="news__text">{news.description}</p>
+            </div>
+          <div className="news__item news__button">
+            <ButtonLink href={ROUTES.NEWS.getPath(year)}>
+              See more news
+            </ButtonLink>
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}
+
+export default News

components/home/news/news.scss

@@ -0,0 +1,90 @@
+.news {
+  padding-top: $module-divider-md;
+  padding-bottom: $module-divider-md;
+
+  @media (min-width: $md) {
+    padding-top: $module-divider-lg;
+    padding-bottom: $module-divider-lg;
+  }
+
+  &__items {
+    @extend %grid;
+    margin-bottom: 40px;
+  }
+
+  &__item {
+    position: relative;
+    padding-left: spacing(5);
+    margin-bottom: spacing(5);
+
+    grid-column: 1 / 5;
+
+    padding: spacing(3);
+
+    @extend %header-1;
+
+    @media (min-width: $md) {
+      font-size: 2rem;
+      grid-column: 2 / 8;
+    }
+
+    @media (min-width: $lg) {
+      margin-bottom: 0;
+      grid-column: 3 / 11;
+    }
+
+    &:hover {
+      background: $white-20;
+      transition: background $simple-fade;
+    }
+  }
+
+  &__button {
+    &:hover {
+      background: inherit;
+      transition: none;
+    }
+    padding-bottom: 0;
+  }
+
+  &__link {
+    @extend %header-2;
+
+    &::after {
+      content: '';
+      position: absolute;
+      left: 0;
+      top: 0;
+      right: 0;
+      bottom: 0;
+    }
+  }
+
+  &__text {
+    padding-left: spacing(5);
+
+    @extend %body-1;
+    color: $white-80;
+
+    grid-column: 1 / 5;
+
+    @media (min-width: $md) {
+      padding-left: 0;
+
+      grid-column: 2 / 8;
+    }
+
+    @media (min-width: $lg) {
+      grid-column: 6 / 11;
+    }
+
+    p {
+      margin-bottom: spacing(2);
+    }
+  }
+
+  h4 {
+    font-family: 'JetBrains Mono', monospace;
+    font-size: 24px;
+  }
+}

content/commons.json

@@ -3,6 +3,7 @@
 
     "anchor-nav:hero": "Maintainer Month",
     "anchor-nav:about": "About",
+    "anchor-nav:news": "News",
     "anchor-nav:get-involved": "Get involved",
     "anchor-nav:events": "Schedule",
     "anchor-nav:connection": "Connection",
@@ -58,9 +59,14 @@
     "not-found:subtitle": "Page not found",
     "not-found:button": "Go home",
     
+    "navigation:news": "News",
     "navigation:schedule": "Schedule",
     "navigation:library": "Library",
 
+    "news:title": "News",
+    "news:description": "This is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.",
+
+
     "page:title": "Maintainer Month",
     "page:title-mobile": "MM",
     "page:date": "May 2023",

content/home/3-news.md

@@ -0,0 +1,3 @@
+---
+title: Latest News
+---

content/news/index.md

@@ -0,0 +1,9 @@
+---
+news:
+  - title: Gearing up for Maintainer Month!
+    author: GitHub
+    description: Are you looking for ways to support open source maintainers? Maintainer Month is the perfect opportunity!
+    link: https://github.blog/2023-04-25-gearing-up-for-maintainer-month-this-may/
+    type: News
+    topics: Announcement, News
+---

pages/index.js

@@ -13,8 +13,9 @@ import GetInvolved from '../components/home/get-involved/GetInvolved'
 import Events from '../components/home/events/Events'
 import AnchorNavigation from '../components/home/anchor-navigation/AnchorNavigation'
 import { useBackground } from '../contexts/BackgroundContext'
+import News from '../components/home/news/News'
 
-export default function Home({ hero, about, getInvolved, events, connection, maintainerOptions, partnerOptions }) {
+export default function Home({ hero, about, news, getInvolved, events, connection, maintainerOptions, partnerOptions, newsList }) {
   const containerRef = useRef(null)
 
   const { setAnimationStep } = useBackground()
@@ -65,6 +66,10 @@ export default function Home({ hero, about, getInvolved, events, connection, mai
             buttonLink={ROUTES.SCHEDULE.path}
           />
           <About title={about.title} content={about.content} theme1={about.theme1} theme2={about.theme2}/>
+          <News
+            news={newsList.slice(-1)[0]}
+            title={news.title}
+          />
           <GetInvolved
             title={getInvolved.title}
             content={getInvolved.content}
@@ -90,13 +95,15 @@ export default function Home({ hero, about, getInvolved, events, connection, mai
 export async function getStaticProps() {
   const hero = getDataFromMD('content/home/1-hero.md')
   const about = getDataFromMD('content/home/2-about.md')
+  const news = getDataFromMD('content/home/3-news.md')
+  const newsList = getDataFromMD('content/news/index.md').news
   const getInvolved = parseGetInvolvedData(
-    getDataFromMD('content/home/3-get-involved.md'),
+    getDataFromMD('content/home/4-get-involved.md'),
   )
-  const maintainerOptions = getDataFromMD('content/home/3-1-get-involved-maintainers.md')
-  const partnerOptions = getDataFromMD('content/home/3-2-get-involved-partners.md')
-  const events = getDataFromMD('content/home/4-events.md')
-  const connection = getDataFromMD('content/home/5-connection.md')
+  const maintainerOptions = getDataFromMD('content/home/4-1-get-involved-maintainers.md')
+  const partnerOptions = getDataFromMD('content/home/4-2-get-involved-partners.md')
+  const events = getDataFromMD('content/home/5-events.md')
+  const connection = getDataFromMD('content/home/6-connection.md')
 
   const eventsList = parseEvents(getEvents())
 
@@ -111,7 +118,9 @@ export async function getStaticProps() {
       },
       connection,
       maintainerOptions,
-      partnerOptions
+      partnerOptions,
+      news,
+      newsList
     },
   }
 }

pages/news.js

@@ -0,0 +1,62 @@
+import { useEffect } from 'react'
+import Head from 'next/head'
+
+import { getLiteral } from '../common/i18n'
+import LibraryLinks from '../components/library-links/LibraryLinks'
+import { getDataFromMD } from '../common/api'
+
+import { useBackground } from '../contexts/BackgroundContext'
+
+export default function News({ data }) {
+  const { setAnimationStep } = useBackground()
+
+  useEffect(() => {
+    setAnimationStep(6)
+  }, [setAnimationStep])
+
+  return (
+    <div>
+      <Head>
+        <title>{getLiteral('news:title')}</title>
+        <meta name="description" content={getLiteral('news:description')} />
+
+        {/* <!-- Facebook Meta Tags --> */}
+        <meta property="og:title" content={getLiteral('news:title')} />
+        <meta
+          property="og:description"
+          content={getLiteral('news:description')}
+        />
+        <meta
+          property="og:image"
+          content="https://maintainermonth.github.com/images/og/generic.png"
+        />
+
+        {/* <!-- Twitter Meta Tags --> */}
+        <meta name="twitter:card" content="summary_large_image" />
+        <meta name="twitter:title" content={getLiteral('news:title')} />
+        <meta
+          name="twitter:description"
+          content={getLiteral('news:description')}
+        />
+        <meta
+          name="twitter:image"
+          content="https://maintainermonth.github.com/images/og/generic.png"
+        />
+      </Head>
+
+      <div>
+        <LibraryLinks links={data} />
+      </div>
+    </div>
+  )
+}
+
+export async function getStaticProps() {
+    const data = getDataFromMD('content/news/index.md').news
+  
+    return {
+      props: {
+        data
+      },
+    }
+  }

public/icons/bell.js

@@ -0,0 +1,17 @@
+const IconBell = () => {
+  return (
+    <svg
+      className="icon-bell"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      width="20"
+      height="20"
+    >
+      <path 
+        d="M12 1c3.681 0 7 2.565 7 6v4.539c0 .642.189 1.269.545 1.803l2.2 3.298A1.517 1.517 0 0 1 20.482 19H15.5a3.5 3.5 0 1 1-7 0H3.519a1.518 1.518 0 0 1-1.265-2.359l2.2-3.299A3.25 3.25 0 0 0 5 11.539V7c0-3.435 3.318-6 7-6ZM6.5 7v4.539a4.75 4.75 0 0 1-.797 2.635l-2.2 3.298-.003.01.001.007.004.006.006.004.007.001h16.964l.007-.001.006-.004.004-.006.001-.006a.017.017 0 0 0-.003-.01l-2.199-3.299a4.753 4.753 0 0 1-.798-2.635V7c0-2.364-2.383-4.5-5.5-4.5S6.5 4.636 6.5 7ZM14 19h-4a2 2 0 1 0 4 0Z" 
+      />
+    </svg>
+  )
+}
+
+export default IconBell;

styles/styles.scss

@@ -21,6 +21,7 @@
 @import '../components/home/events/events';
 @import '../components/home/get-involved/get-involved';
 @import '../components/home/hero/hero';
+@import '../components/home/news/news';
 
 @import '../components/layout/layout';