From de4055e59c42065fe94a766eb7241ab36437083a Mon Sep 17 00:00:00 2001 From: jasongao97 Date: Wed, 24 Jan 2024 14:58:36 +0800 Subject: [PATCH] add `/example` page and links --- src/components/ChapterNav.js | 10 ++++ src/images/p5js_logo.svg | 58 +++++++++++++++++++++ src/pages/examples.js | 99 ++++++++++++++++++++++++++++++++++++ src/pages/index.js | 3 ++ 4 files changed, 170 insertions(+) create mode 100644 src/images/p5js_logo.svg create mode 100644 src/pages/examples.js diff --git a/src/components/ChapterNav.js b/src/components/ChapterNav.js index 45e28488..18c94414 100644 --- a/src/components/ChapterNav.js +++ b/src/components/ChapterNav.js @@ -32,6 +32,16 @@ const ChapterNav = () => { ); })} + +
  • + + Examples + +
    • ); diff --git a/src/images/p5js_logo.svg b/src/images/p5js_logo.svg new file mode 100644 index 00000000..a9daf311 --- /dev/null +++ b/src/images/p5js_logo.svg @@ -0,0 +1,58 @@ + + + + + + + + + + + + + + + + + + + diff --git a/src/pages/examples.js b/src/pages/examples.js new file mode 100644 index 00000000..7ee06fc8 --- /dev/null +++ b/src/pages/examples.js @@ -0,0 +1,99 @@ +import * as React from 'react'; +import { graphql, Link } from 'gatsby'; +import { GatsbyImage, getImage } from 'gatsby-plugin-image'; + +import p5jsLogo from '../images/p5js_logo.svg'; + +import Head from '../components/Head'; +import Header from '../components/Header'; +import ChapterNav from '../components/ChapterNav'; + +export default function ExamplesPage({ data }) { + return ( + <> + + +
    + +
    +
    + + +
    +

    Chapter Examples

    + {data.allBookSection.edges.map(({ node: chapter }) => { + return ( +
    +

    Chapter {chapter.title}

    + +
    + {chapter.src.childrenExample.map((example) => { + const screenshot = getImage(example.screenshot); + + return ( +
    + +
    + + {example.title} + +

    + + + p5.js icon + +
    +
    + ); + })} +
    +
    + ); + })} +
    +
    +
    + + ); +} + +export const query = graphql` + query QueryChaptersExample { + allBookSection(filter: { type: { eq: "chapter" } }) { + edges { + node { + id + title + slug + src { + childrenExample { + id + title + slug + relativeDirectory + webEditorURL + screenshot { + childImageSharp { + gatsbyImageData + } + } + } + } + } + } + } + } +`; diff --git a/src/pages/index.js b/src/pages/index.js index 2a27bf62..4a1a065c 100644 --- a/src/pages/index.js +++ b/src/pages/index.js @@ -20,6 +20,9 @@ export default function IndexPage({ data }) { ); })} +
  • + Examples +