From 687b0a79008c2c0d79854ba01a052aa445a7b1c9 Mon Sep 17 00:00:00 2001 From: jasongao97 Date: Wed, 24 Jan 2024 14:27:34 +0800 Subject: [PATCH] remove previous /examples page --- gatsby/create-pages.js | 8 --- src/layouts/ExamplesPageLayout.js | 103 ------------------------------ 2 files changed, 111 deletions(-) delete mode 100644 src/layouts/ExamplesPageLayout.js diff --git a/gatsby/create-pages.js b/gatsby/create-pages.js index fac0f90..38a551f 100644 --- a/gatsby/create-pages.js +++ b/gatsby/create-pages.js @@ -45,12 +45,4 @@ module.exports = async ({ graphql, actions, reporter }) => { }); }); } - - // Create the example page (contains every embedded sketch with screenshot) - if (process.env.CREATE_EXAMPLES_PAGE === 'true') { - createPage({ - path: '/examples', - component: path.resolve(`./src/layouts/ExamplesPageLayout.js`), - }); - } }; diff --git a/src/layouts/ExamplesPageLayout.js b/src/layouts/ExamplesPageLayout.js deleted file mode 100644 index b359140..0000000 --- a/src/layouts/ExamplesPageLayout.js +++ /dev/null @@ -1,103 +0,0 @@ -import * as React from 'react'; -import { graphql } from 'gatsby'; -import { unified } from 'unified'; -import { h } from 'hastscript'; -import { visit } from 'unist-util-visit'; -import rehypeReact from 'rehype-react'; - -import Head from '../components/Head'; -import Header from '../components/Header'; -import Example from '../components/Example'; - -const renderAst = (ast) => { - const examples = []; - visit(ast, { tagName: 'embed-example' }, (node) => { - examples.push(node); - }); - - const tree = h( - 'div', - examples.map((node) => { - node.properties.pauseAtBeginning = true; - - return h( - 'div', - { - style: { - border: '1px dotted black', - margin: '12px 0', - padding: '0 16px', - }, - }, - [ - h( - 'p', - { - style: { - fontWeight: 'bold', - }, - }, - node.properties.dataExamplePath, - ), - node, - h('img', { - class: 'border', - src: `/${node.properties.dataExamplePath}/screenshot.png`, - alt: 'screenshot', - }), - ], - ); - }), - ); - - const processor = unified().use(rehypeReact, { - createElement: React.createElement, - Fragment: React.Fragment, - components: { - 'embed-example': Example, - }, - }); - - return processor.stringify(tree); -}; - -export default function ExamplesPage({ data }) { - return ( - <> - - -
- -
- {data.allChaptersJson.edges.map(({ node }) => { - const { htmlAst } = node.src.fields; - - return ( -
-

{node.title}

- {renderAst(JSON.parse(htmlAst))} -
- ); - })} -
- - ); -} - -export const query = graphql` - query AllExample { - allChaptersJson { - edges { - node { - title - src { - id - fields { - htmlAst - } - } - } - } - } - } -`;