From c30074e4dd14e2383af05dd0ac7cb05f8e21aee3 Mon Sep 17 00:00:00 2001 From: dfireBird Date: Wed, 30 Sep 2020 23:27:15 +0530 Subject: [PATCH 1/3] feat: add PageNavigation component --- src/components/PageNavigation/index.tsx | 45 +++++++++++++++ src/components/PageNavigation/styles.tsx | 72 ++++++++++++++++++++++++ 2 files changed, 117 insertions(+) create mode 100644 src/components/PageNavigation/index.tsx create mode 100644 src/components/PageNavigation/styles.tsx diff --git a/src/components/PageNavigation/index.tsx b/src/components/PageNavigation/index.tsx new file mode 100644 index 0000000..e80927f --- /dev/null +++ b/src/components/PageNavigation/index.tsx @@ -0,0 +1,45 @@ +import React, { FC } from "react" +import * as SC from "./styles" + +interface IPageNavigationPage { + relativePath: string + title: string +} + +interface IPageContentProps { + next?: IPageNavigationPage + previous?: IPageNavigationPage +} + +export const PageNavigation: FC = ({ previous, next }) => { + return ( + + {previous ? ( + + Previous + + + + {previous.title} + + + + ) : ( +
+ )} + {next ? ( + + Next + + + {next.title} + + + + + ) : ( +
+ )} + + ) +} diff --git a/src/components/PageNavigation/styles.tsx b/src/components/PageNavigation/styles.tsx new file mode 100644 index 0000000..c68e3f6 --- /dev/null +++ b/src/components/PageNavigation/styles.tsx @@ -0,0 +1,72 @@ +import styled from "styled-components" +import { Link } from "gatsby" +import fontFamily from "../../design/typography" +import ArrowRight from "../../icons/arrow-right.svg" + +export const PageNavigationContent = styled.div` + display: flex; + justify-content: space-between; + align-content: center; +} +` + +export const PageNavigationText = styled.p` + font-family: ${fontFamily.body}; + font-weight: 700; + font-size: 18px; + margin: 0 19px 7px 17px; +` + +export const PageNavigationLink = styled(Link)` + display: flex; + text-decoration: none; + text-align: right; + + & > svg ~ p { + text-align: left; + } + + &:hover, + &:focus { + color: ${(props) => props.theme.main.foreground}; + text-decoration: underline; + } +` + +export const PageNavigationPageContent = styled.div` + width: 200px; + display: flex; + flex-direction: column; + + &:last-of-type { + align-items: flex-end; + } + + & > div { + display: flex; + justify-content: start; + } +` + +export const PageNavigationPageTitle = styled(PageNavigationText)` + margin: 0 10px; + margin-bottom: 0; + background: -webkit-linear-gradient(91.81deg, #feaf6d 0%, #ff70a5 100%); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; +` + +export const NextArrow = styled(ArrowRight)` + width: 8px; + path { + fill: #ff74a2; + } +` + +export const PreviousArrow = styled(ArrowRight)` + width: 8px; + transform: rotate(180deg); + path { + fill: #feac71; + } +` From 0b35ea1a66c627421b7f0e5db55e9dd262dde894 Mon Sep 17 00:00:00 2001 From: dfireBird Date: Thu, 1 Oct 2020 00:12:40 +0530 Subject: [PATCH 2/3] feat: implement page navigation in resource pages --- gatsby-node.js | 3 +++ src/templates/resourcePage.tsx | 44 +++++++++++++++++++++++++++++++++- 2 files changed, 46 insertions(+), 1 deletion(-) diff --git a/gatsby-node.js b/gatsby-node.js index 5aa6264..8039556 100644 --- a/gatsby-node.js +++ b/gatsby-node.js @@ -58,6 +58,7 @@ const createResources = async ({ createPage, graphql }) => { edges { node { relativePath + relativeDirectory sourceInstanceName } } @@ -73,6 +74,7 @@ const createResources = async ({ createPage, graphql }) => { edges { node { relativePath + relativeDirectory sourceInstanceName } } @@ -118,6 +120,7 @@ const createResources = async ({ createPage, graphql }) => { component: resourcePage, context: { file: node.relativePath, + directory: node.relativeDirectory, layout: LAYOUT_RESOURCES, }, }) diff --git a/src/templates/resourcePage.tsx b/src/templates/resourcePage.tsx index 5608f82..4552f67 100644 --- a/src/templates/resourcePage.tsx +++ b/src/templates/resourcePage.tsx @@ -1,10 +1,13 @@ import { graphql } from "gatsby" import React, { FC, Fragment } from "react" +import descend from "ramda/es/descend" +import sortWith from "ramda/es/sortWith" import { Footer } from "../components/Footer" import { Header } from "../components/Header" import { Markdown } from "../components/Markdown" import { PageContent } from "../components/PageContent" +import { PageNavigation } from "../components/PageNavigation" import { SEO } from "../components/SEO" import useSidebar from "../hooks/useSidebar" import { buildToc } from "../utils" @@ -30,6 +33,29 @@ const ResourcePage: FC = ({ data }) => { toc.length ) + const pages = sortWith([ + descend((f: any) => { + if (f.node.relativePath.includes("intro")) { + return 1; + } + + return -1; + }) + ], data.allFile.edges) + const currentIndex = pages.findIndex( + (x: any) => x.node.relativePath === relativePath + ) + + const nextPage = pages[currentIndex + 1] && { + title: pages[currentIndex + 1].node.title.frontmatter.title, + relativePath: pages[currentIndex + 1].node.relativePath, + } + + const previousPage = pages[currentIndex - 1] && { + title: pages[currentIndex - 1].node.title.frontmatter.title, + relativePath: pages[currentIndex - 1].node.relativePath, + } + return ( = ({ data }) => { content={ <> +