jannikbuschke / gatsby-antd-docs Goto Github PK
View Code? Open in Web Editor NEWA gatsby starter for a technical documentation website
Home Page: https://www.jannikbuschke.de/gatsby-antd-docs/
License: MIT License
A gatsby starter for a technical documentation website
Home Page: https://www.jannikbuschke.de/gatsby-antd-docs/
License: MIT License
From the roadmap. Just highlighting the child to be active when a user is on that page
Does anyone have a good setup to "simultaneously" work on a specific website while also contributing to this repository?
Currently I am experimenting with multiple git remotes/upstreams. I.e. origin
is a specific project while upstream
is this repo. In the specific project I probably mostly just work in the /contents/
markdown files, while when I do something somewhere else I would need to figure out if this is something for everyone and then add it to the upstream project.
Thanks for the template! I was having some issues getting it running. I used the following:
npx gatsby new gatsby-antd-docs https://github.com/jannikbuschke/gatsby-antd-docs
cd gatsby-antd-docs
yarn start
Which to a stream of errors in the Gatsby log, one of which being:
The GraphQL query from /Users/user/Documents/code/gatsby-antd-docs/src/templates/template.tsx failed.
Errors:
[BABEL] unknown: Invalid Option: The 'modules' option must be one of
- 'false' to indicate no module processing
- a specific module type: 'commonjs', 'amd', 'umd', 'systemjs' - 'auto' (default) which will automatically select 'false' if the current
process is known to support ES module syntax, or "commonjs" otherwise
(While processing: "base$1")
GraphQL request:10:5
9 | }
10 | body
| ^
11 | }
URL path:
/docs/guide/anchor
Context:
{
"id": "18268041-f640-5ff2-a799-83aae68223fe"
}
Plugin:
none
Query:
query BlogPostQuery(
$id: String
) {
mdx(id: {eq: $id}) {
id
frontmatter {
title
root
}
body
}
}
And when visiting localhost:8000
in the browser and navigating to pages, I also see:
I'm trying to render an image in a markdown file like so:
![US Energy Infrastructure Visualization](/src/images/us-viz.png)
The markdown file is located at contents/docs/templates/use-cases/us-energy-infrastructure.md
The image is located at src/images/us-viz.png
The console and network tabs show a 404 error for the requested image file:
This is the contents of my gatsby-config.js
file:
module.exports = {
siteMetadata: {
title: 'Energy Infrastructure API Documentation',
},
plugins: [
`gatsby-plugin-typescript`,
`gatsby-plugin-react-helmet`,
{
resolve: `gatsby-source-filesystem`,
options: {
name: `images`,
path: `${__dirname}/src/images`,
},
},
`gatsby-transformer-json`,
{
resolve: `gatsby-source-filesystem`,
options: {
name: `menuItems`,
path: `${__dirname}/src/menuItems`,
},
},
{
resolve: `gatsby-source-filesystem`,
options: {
name: `sidebar`,
path: `${__dirname}/src/sidebar`,
},
},
{
resolve: `gatsby-source-filesystem`,
options: {
name: `contents`,
path: `${__dirname}/contents`,
},
},
`gatsby-plugin-image`,
`gatsby-transformer-sharp`,
`gatsby-plugin-sharp`,
{
resolve: `gatsby-plugin-manifest`,
options: {
name: 'gatsby-starter-markdown',
short_name: 'starter',
start_url: '/',
background_color: '#663399',
theme_color: '#663399',
display: 'minimal-ui',
icon: 'src/images/gatsby-icon.png', // This path is relative to the root of the site.
},
},
{
resolve: `gatsby-transformer-remark`,
options: {
plugins: [`gatsby-remark-images`],
},
},
{
resolve: `gatsby-plugin-mdx`,
options: {
defaultLayouts: {
default: require.resolve('./src/Layout.tsx'),
},
extensions: ['.mdx', '.md'],
// workaround: https://github.com/gatsbyjs/gatsby/issues/16422#issuecomment-518985316
plugins: [`gatsby-remark-autolink-headers`],
gatsbyRemarkPlugins: [
`gatsby-remark-katex`,
{
resolve: `gatsby-remark-images`,
options: {
maxWidth: 1035,
},
},
`gatsby-remark-autolink-headers`,
{
resolve: `gatsby-remark-prismjs`,
options: {
classPrefix: 'language-',
inlineCodeMarker: null,
showLineNumbers: true,
noInlineHighlight: false,
},
},
],
},
},
`gatsby-plugin-remove-trailing-slashes`,
// this (optional) plugin enables Progressive Web App + Offline functionality
// To learn more, visit: https://gatsby.app/offline
// 'gatsby-plugin-offline',
],
/// this must match the path your webpage is displayed from (the second part of the ternary will be the path prefix for production)
pathPrefix: process.env.NODE_ENV === 'development' ? '' : '',
}
It appears to meet the necessary requirements for using the Transformer Remark plugin as specified in the Gatsby docs
As far as I can tell the method I'm using for inserting the image into my markdown file should work, I'm not sure what's going on here. Any advice is greatly appreciated!
I believe this has to do with configuring MDX to use proper imports as this is something that it should be able to do.
For instance, given this mdx
file
---
title: Testing component thingy
root: '/docs'
parents: ['Get Started']
---
import data from './build-files/data.json'
# This is a test component
<div>
{console.log('test', data)}
</div>
The stack trace returned is thus:
(Basic, in MDXContent (created by MDXRenderer)) ReferenceError: TestComponent is not defined
Stack trace:
at MDXContent (eval at _construct (http://localhost:8000/commons.js:6765:21), <anonymous>:56:85)
in MDXContent (created by MDXRenderer)
in MDXRenderer (created by PageTemplate)
in main (created by Basic)
in Basic (created by Context.Consumer)
in Adapter (created by Context.Consumer)
in section (created by BasicLayout)
in BasicLayout (created by Context.Consumer)
in Adapter (created by Context.Consumer)
in div (created by Context.Consumer)
in div (created by Context.Consumer)
in StaticQuery (created by RootLayout)
in RootLayout (created by PageTemplate)
in PageTemplate (created by HotExportedPageTemplate)
in AppContainer (created by HotExportedPageTemplate)
in HotExportedPageTemplate (created by PageRenderer)
in PageRenderer (created by JSONStore)
in JSONStore (created by EnsureResources)
in ScrollContext (created by EnsureResources)
in RouteUpdates (created by EnsureResources)
in EnsureResources (created by RouteHandler)
in RouteHandler (created by Root)
in div (created by FocusHandlerImpl)
in FocusHandlerImpl (created by Context.Consumer)
in FocusHandler (created by RouterImpl)
in RouterImpl (created by LocationProvider)
in LocationProvider (created by Context.Consumer)
in Location (created by Context.Consumer)
in Router (created by Root)
in Root
in a (created by Component)
in MDXScopeProvider (created by Component)
in Component (created by Component)
in Component
in _default
Perhaps this link will provide some help: ChristopherBiscardi/gatsby-mdx#199
I was hoping to create an external link in the top menu:
[
{
"name": "Docs",
"link": "/docs"
},
{
"name": "Login",
"link": "https://app.posthog.com/login"
}
]
In this case, the second item, the external link, won't work. I'd image this should work something like:
[
{
"name": "Docs",
"link": "/docs"
},
{
"name": "Login",
"a": "https://app.posthog.com/login"
}
]
I may be missing something here?
I followed the instruction and created a new gatsby site with the theme. When i run gatsby develop
i get the following
UNHANDLED REJECTION window is not defined
ReferenceError: window is not defined
- render-page.js:58856
/Users/joseph/Developer/gatsby/gatsby-antd-docs/public/render-page.js:58856:1265
- render-page.js:58856 Object../node_modules/ismobilejs/dist/isMobile.min.js
/Users/joseph/Developer/gatsby/gatsby-antd-docs/public/render-page.js:58856:1287
- render-page.js:30 __webpack_require__
/Users/joseph/Developer/gatsby/gatsby-antd-docs/public/render-page.js:30:30
- render-page.js:88053 Module../node_modules/rc-menu/es/util.js
/Users/joseph/Developer/gatsby/gatsby-antd-docs/public/render-page.js:88053:16
- render-page.js:30 __webpack_require__
/Users/joseph/Developer/gatsby/gatsby-antd-docs/public/render-page.js:30:30
- render-page.js:87549 Module../node_modules/rc-menu/es/SubPopupMenu.js
/Users/joseph/Developer/gatsby/gatsby-antd-docs/public/render-page.js:87549:64
- render-page.js:30 __webpack_require__
/Users/joseph/Developer/gatsby/gatsby-antd-docs/public/render-page.js:30:30
- render-page.js:86233 Module../node_modules/rc-menu/es/Menu.js
/Users/joseph/Developer/gatsby/gatsby-antd-docs/public/render-page.js:86233:71
- render-page.js:30 __webpack_require__
/Users/joseph/Developer/gatsby/gatsby-antd-docs/public/render-page.js:30:30
- render-page.js:87961 Module../node_modules/rc-menu/es/index.js
/Users/joseph/Developer/gatsby/gatsby-antd-docs/public/render-page.js:87961:63
- render-page.js:30 __webpack_require__
/Users/joseph/Developer/gatsby/gatsby-antd-docs/public/render-page.js:30:30
- render-page.js:91130 Module../node_modules/rc-select/es/Select.js
/Users/joseph/Developer/gatsby/gatsby-antd-docs/public/render-page.js:91130:65
- render-page.js:30 __webpack_require__
/Users/joseph/Developer/gatsby/gatsby-antd-docs/public/render-page.js:30:30
- render-page.js:93085 Module../node_modules/rc-select/es/index.js
/Users/joseph/Developer/gatsby/gatsby-antd-docs/public/render-page.js:93085:65
- render-page.js:30 __webpack_require__
/Users/joseph/Developer/gatsby/gatsby-antd-docs/public/render-page.js:30:30
- render-page.js:6373 Module../node_modules/antd/es/auto-complete/index.js
/Users/joseph/Developer/gatsby/gatsby-antd-docs/public/render-page.js:6373:67
and this is the result from gatsby info
OS: macOS 10.14.6
CPU: (4) x64 Intel(R) Core(TM) i5-4278U CPU @ 2.60GHz
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 10.15.1 - /usr/local/bin/node
Yarn: 1.17.3 - /usr/local/bin/yarn
npm: 6.4.1 - /usr/local/bin/npm
Languages:
Python: 2.7.10 - /usr/bin/python
Browsers:
Chrome: 76.0.3809.132
Safari: 12.1.2
npmPackages:
gatsby: 2.1.37 => 2.1.37
gatsby-cli: 2.4.16 => 2.4.16
gatsby-image: 2.0.34 => 2.0.34
gatsby-mdx: 0.6.2 => 0.6.2
gatsby-plugin-manifest: 2.0.24 => 2.0.24
gatsby-plugin-offline: 2.0.25 => 2.0.25
gatsby-plugin-react-helmet: 3.0.10 => 3.0.10
gatsby-plugin-remove-trailing-slashes: 2.0.10 => 2.0.10
gatsby-plugin-sharp: 2.0.29 => 2.0.29
gatsby-plugin-typescript: ^2.0.11 => 2.1.6
gatsby-remark-autolink-headers: 2.0.16 => 2.0.16
gatsby-remark-katex: 2.0.6 => 2.0.6
gatsby-remark-prismjs: 3.2.8 => 3.2.8
gatsby-source-filesystem: 2.0.27 => 2.0.27
gatsby-transformer-json: 2.1.11 => 2.1.11
gatsby-transformer-remark: 2.3.4 => 2.3.4
gatsby-transformer-sharp: 2.1.17 => 2.1.17
npmGlobalPackages:
gatsby-cli: 2.7.41
Is there anyway to specify the order of the sidebar items?
Currently the only way I seem to be able to do this is to:
01
02
prefix...Looks like the above does not work when the site is pushed to gh-pages...
Errors popping up on yarn start
/npm run start
Replace Autoprefixer browsers option to Browserslist config.
Use browserslist key in package.json or .browserslistrc file.
Using browsers option cause some error. Browserslist config
can be used for Babel, Autoprefixer, postcss-normalize and other tools.
If you really need to use option, rename it to overrideBrowserslist.
Learn more at:
https://github.com/browserslist/browserslist#readme
https://twitter.com/browserslist
I believe everything is straight-forward except the gatsby-mdx
. It appears it is now gatsby-plugin-mdx
. See this for package upgrade details.
Latex is not rendering at http://localhost:8000/docs/template/get-started/latex
This is how it looks.
I think its a problem with gatsby v3 only.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.