diff --git a/documentation/docs/references/creating-a-plugin/creating-endpoints.md b/documentation/docs/references/creating-a-plugin/creating-endpoints.md index 7d5e486..45483fd 100644 --- a/documentation/docs/references/creating-a-plugin/creating-endpoints.md +++ b/documentation/docs/references/creating-a-plugin/creating-endpoints.md @@ -1,3 +1,8 @@ +--- +title: Creating endpoints +path: /creating-endpoints +--- + # Creating endpoints > Fusion.js provides an [RPC plugin](https://github.com/fusionjs/fusion-plugin-rpc-redux-react) that integrates with Redux and React. We recommend using that RPC plugin rather than writing HTTP endpoints manually. diff --git a/documentation/docs/references/creating-a-plugin/dependencies.md b/documentation/docs/references/creating-a-plugin/dependencies.md index 57d883a..47b2a84 100644 --- a/documentation/docs/references/creating-a-plugin/dependencies.md +++ b/documentation/docs/references/creating-a-plugin/dependencies.md @@ -1,3 +1,8 @@ +--- +title: Dependencies +path: /dependencies +--- + # Dependencies The Fusion.js plugin architecture allows plugins to explicitly depend on other service plugins. This allows us to swap implementations of various subsystems, for example for testing, or to provide extended functionality. diff --git a/documentation/docs/references/creating-a-plugin/index.md b/documentation/docs/references/creating-a-plugin/index.md index 764be76..7facbac 100644 --- a/documentation/docs/references/creating-a-plugin/index.md +++ b/documentation/docs/references/creating-a-plugin/index.md @@ -1,3 +1,8 @@ +--- +title: Creating a Plugin +path: /creating-a-plugin +--- + # Plugins Fusion.js provides official plugins for a wide variety of tasks, and it's possible to write complex applications without ever writing a single custom plugin. With that said, it's possible you might find that there's no plugin available for a task you're trying to accomplish, or that you don't agree with the opinions of an existing plugin. This section explains the Fusion.js plugin architecture and how to implement various types of plugins. diff --git a/documentation/docs/references/creating-a-plugin/tokens.md b/documentation/docs/references/creating-a-plugin/tokens.md index f49f8b4..c511e0b 100644 --- a/documentation/docs/references/creating-a-plugin/tokens.md +++ b/documentation/docs/references/creating-a-plugin/tokens.md @@ -1,3 +1,8 @@ +--- +title: Tokens +path: /tokens +--- + # Tokens Tokens are used by the Fusion.js [dependency injection](/docs/references/creating-a-plugin#dependency-injection) system to define the dependency tree of an application. Tokens are designed to bridge the gap between the type checking and runtime information. Your app may register your own Fusion.js plugin to a token to control behavior of your application or test. @@ -54,4 +59,4 @@ app.register(FetchTokenPolyfill, unfetch); app.register(PluginA).alias(FetchToken, FetchTokenPolyfill); ``` ---- \ No newline at end of file +--- diff --git a/documentation/docs/references/creating-a-plugin/using-services.md b/documentation/docs/references/creating-a-plugin/using-services.md index 64e9872..97a8690 100644 --- a/documentation/docs/references/creating-a-plugin/using-services.md +++ b/documentation/docs/references/creating-a-plugin/using-services.md @@ -1,3 +1,8 @@ +--- +title: Using services +path: /using-services +--- + # Using services React hooks are the preferred method for using services in React. In fact, many cases where we used class components can now be accomplished easier with hooks. Keep in mind that most plugins currently do not provide a service we would be able to use on the client-side. This feature is future-facing for how we want to consume services. diff --git a/documentation/docs/references/css-modules.md b/documentation/docs/references/css-modules.md index 965d16f..106842c 100644 --- a/documentation/docs/references/css-modules.md +++ b/documentation/docs/references/css-modules.md @@ -1,3 +1,8 @@ +--- +title: CSS Modules +path: /css-modules/ +--- + # CSS Modules ## Setup diff --git a/documentation/docs/references/index.md b/documentation/docs/references/index.md index d429cde..2d41c18 100644 --- a/documentation/docs/references/index.md +++ b/documentation/docs/references/index.md @@ -6,11 +6,11 @@ path: /references/ # References - [State management](/docs/references/state-management) -- [Styling components](/docs/references/styling) +- [Styling](/docs/references/styling) - [Routing](/docs/references/routing) -- [Data fetching](/docs/references/fetching-data) +- [Fetching data](/docs/references/fetching-data) - [Internationalization](/docs/references/internationalization) -- [Creating a plugin](/docs/references/creating-a-plugin) +- [Plugins](/docs/references/creating-a-plugin) - [Testing](/docs/references/testing) - [Typing](/docs/references/typing) - [Security](/docs/references/security) @@ -19,6 +19,8 @@ path: /references/ - [Debugging](/docs/references/debugging) - [Static assets](/docs/references/static-assets) - [Configuration](/docs/references/configuration) +- [Web workers](/docs/references/web-workers) +- [WebSockets](/docs/references/websockets) - [Virtual modules](/docs/references/virtual-modules) - [SVG React components](/docs/references/svg-react-components) - [CSS Modules](/docs/references/css-modules) diff --git a/documentation/docs/references/performance.md b/documentation/docs/references/performance.md index 54a3abd..6372089 100644 --- a/documentation/docs/references/performance.md +++ b/documentation/docs/references/performance.md @@ -1,8 +1,6 @@ --- title: Performance -date: 2019-02-01 path: /performance/ -category: Documentation --- # Performance diff --git a/documentation/docs/references/performance/measuring-browser-performance.md b/documentation/docs/references/performance/measuring-browser-performance.md index 512d1b5..ab926fd 100644 --- a/documentation/docs/references/performance/measuring-browser-performance.md +++ b/documentation/docs/references/performance/measuring-browser-performance.md @@ -2,6 +2,7 @@ title: "Measuring Browser Performance" path: /measuring-browser-performance --- + # Measuring Browser Performance ## Chrome DevTools timings versus Performance API data diff --git a/documentation/docs/references/state-management.md b/documentation/docs/references/state-management.md index aed5044..a3b0791 100644 --- a/documentation/docs/references/state-management.md +++ b/documentation/docs/references/state-management.md @@ -1,8 +1,6 @@ --- title: State management -date: 2017-10-31 path: /state-management/ -category: References --- # State management @@ -92,4 +90,4 @@ export default { reducer, enhancer: myEnhancer, }; -``` \ No newline at end of file +``` diff --git a/documentation/docs/references/svg-react-components.md b/documentation/docs/references/svg-react-components.md index 888b3d2..c5829be 100644 --- a/documentation/docs/references/svg-react-components.md +++ b/documentation/docs/references/svg-react-components.md @@ -1,3 +1,8 @@ +--- +title: SVG React Components +path: /svg-react-components/ +--- + # SVG React Components React components can be generated from SVG files using [https://github.com/smooth-code/svgr](https://github.com/smooth-code/svgr). diff --git a/documentation/docs/references/testing/component.md b/documentation/docs/references/testing/component.md index bff91c2..fd19f76 100644 --- a/documentation/docs/references/testing/component.md +++ b/documentation/docs/references/testing/component.md @@ -1,3 +1,8 @@ +--- +title: Component testing +path: /component +--- + # Component testing There are two strategies for testing individual components and the interactions between those components. diff --git a/documentation/docs/references/testing/integration.md b/documentation/docs/references/testing/integration.md index 807c919..0194c23 100644 --- a/documentation/docs/references/testing/integration.md +++ b/documentation/docs/references/testing/integration.md @@ -1,3 +1,8 @@ +--- +title: Integration testing +path: /integration +--- + # Integration testing Integration tests verify that your modules work together as expected. They open your application within a browser, and perform actions in the same way that an end user would. diff --git a/documentation/docs/references/testing/simulation.md b/documentation/docs/references/testing/simulation.md index 75fcae1..a71d16d 100644 --- a/documentation/docs/references/testing/simulation.md +++ b/documentation/docs/references/testing/simulation.md @@ -1,3 +1,8 @@ +--- +title: Simulation testing +path: /simulation +--- + # Simulation testing It is often useful to simulate a request/render of a Fusion application. The `fusion-test-utils` library exports some utilities to make this easy. diff --git a/documentation/docs/references/testing/snapshot.md b/documentation/docs/references/testing/snapshot.md index 2b04e08..56c9be1 100644 --- a/documentation/docs/references/testing/snapshot.md +++ b/documentation/docs/references/testing/snapshot.md @@ -1,3 +1,8 @@ +--- +title: Snapshot testing +path: /snapshot +--- + # Snapshot testing Snapshot testing is one possible way of preventing regressions by surfacing differences in components and objects. These tests may be run in either Node or browser environments, and against components or data structures. When snapshots need to be updated, you can update them with: `yarn test --updateSnapshot`. For more information see the [Jest snapshot testing documentation](https://facebook.github.io/jest/docs/en/snapshot-testing.html). diff --git a/documentation/docs/references/testing/unit.md b/documentation/docs/references/testing/unit.md index 3c9c0f6..c10a63a 100644 --- a/documentation/docs/references/testing/unit.md +++ b/documentation/docs/references/testing/unit.md @@ -1,3 +1,8 @@ +--- +title: Unit testing +path: /unit +--- + # Unit testing Use unit testing to ensure that your methods behave as expected within the browser and Node environments. diff --git a/documentation/docs/references/virtual-modules.md b/documentation/docs/references/virtual-modules.md index dfc1db5..b0cdd25 100644 --- a/documentation/docs/references/virtual-modules.md +++ b/documentation/docs/references/virtual-modules.md @@ -1,3 +1,8 @@ +--- +title: Virtual modules +path: /virtual-modules/ +--- + # Framework virtual modules Virtual modules are the means for userland consumption of Fusion-owned static analysis and build artifacts in a way that: diff --git a/gatsby-node.js b/gatsby-node.js index e47691f..98ffa50 100644 --- a/gatsby-node.js +++ b/gatsby-node.js @@ -22,8 +22,6 @@ exports.createPages = ({graphql, boundActionCreators}) => { frontmatter { title path - date(formatString: "MMMM DD, YYYY") - category } } relativePath @@ -38,7 +36,6 @@ exports.createPages = ({graphql, boundActionCreators}) => { if (result.errors) { reject(result.errors); } - // Create docs pages result.data.allFile.edges.forEach(({node}) => { const {localPath, remoteUrl} = buildPagePath(node); @@ -46,10 +43,10 @@ exports.createPages = ({graphql, boundActionCreators}) => { path: localPath, component: templates[node.sourceInstanceName] || templates.docs, context: { - localPath: localPath, - metadata: node.childMarkdownRemark.frontmatter, - html: node.childMarkdownRemark.html, + // Needed for api doc query remoteUrl, + // Used to query for HTML data on the actual page + relativePath: node.relativePath, }, }); }); diff --git a/package.json b/package.json index 1916559..fd2911e 100644 --- a/package.json +++ b/package.json @@ -23,6 +23,7 @@ "gatsby-remark-prismjs": "^1.2.8", "gatsby-source-filesystem": "^1.4.12", "gatsby-transformer-remark": "^1.7.7", + "just-safe-get": "^2.0.0", "prismjs": "^1.15.0", "react": "^16.0.0", "react-dom": "^16.0.0", diff --git a/src/templates/doc.js b/src/templates/doc.js index 754f416..275ee2b 100644 --- a/src/templates/doc.js +++ b/src/templates/doc.js @@ -1,5 +1,6 @@ import React from 'react'; import {styled} from 'styletron-react'; +import {extractChildMarkdownRemark} from '../utils'; const DocsWrapper = styled('div', { position: 'relative', @@ -22,7 +23,9 @@ const EditLink = styled('a', { class DocTemplate extends React.Component { render() { - const {pathContext, location} = this.props; + const {data, pathContext} = this.props; + let html = extractChildMarkdownRemark(data).html || ''; + return ( {pathContext.remoteUrl ? ( @@ -30,11 +33,25 @@ class DocTemplate extends React.Component { ) : null} ); } } +export const query = graphql` + query DocQuery($relativePath: String!) { + allFile(filter: {relativePath: {eq: $relativePath}}) { + edges { + node { + childMarkdownRemark { + html + } + } + } + } + } +`; + export default DocTemplate; diff --git a/src/utils/index.js b/src/utils/index.js index 290441e..9f5b1de 100644 --- a/src/utils/index.js +++ b/src/utils/index.js @@ -1,4 +1,5 @@ const path = require('path'); +const get = require('just-safe-get'); function getPath(prefix = '', childItem) { if (childItem.path) { @@ -88,3 +89,11 @@ exports.buildPageName = node => { return `${pkgName ? `${pkgName}-` : ''}${node.name}`; } }; + +exports.extractChildMarkdownRemark = blob => { + const edges = get(blob, 'allFile.edges'); + if (edges.length) { + return get(edges[0], 'node.childMarkdownRemark') || {}; + } + return {}; +}; diff --git a/yarn.lock b/yarn.lock index fe597e7..da63da9 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5915,6 +5915,11 @@ jsx-ast-utils@^2.0.1: dependencies: array-includes "^3.0.3" +just-safe-get@^2.0.0: + version "2.0.0" + resolved "https://registry.yarnpkg.com/just-safe-get/-/just-safe-get-2.0.0.tgz#a028262a8f1896fac4de90227b2d192dfdc3f907" + integrity sha512-OBUeNXA7efFIGh0hSLW4nxrOtFWfmjoc3T8B5oixm3b+D7SZN10VKwORUEk4oDeBaR/sqkDMxXb0gE0DRYreEA== + kebab-case@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/kebab-case/-/kebab-case-1.0.0.tgz#3f9e4990adcad0c686c0e701f7645868f75f91eb"