Git Product home page Git Product logo

gatsby-antd-docs's Introduction

sample: https://www.jannikbuschke.de/gatsby-antd-docs/

Gatsby Ant-Design Documentation Starter

Forked from https://github.com/cvluca/gatsby-starter-markdown.

This starter is boilerplate for (technical) documentation websites optionally accompanied by a blog (you can use it forever you want of course).

Getting started

npm install gatsby -g
gatsby new my-docs https://github.com/jannikbuschke/gatsby-antd-docs
cd my-docs
npm install
npm run start

Visit http://localhost:8000.

Edit files in /content/docs and see live updates.

Features

  • Ant Design
  • Typescript
  • Markdown
  • MDX
  • Syntax highlighting
  • Latex

Roadmap

  • Blog feature / second content type
  • Improved typings
  • Improved responsiveness
  • Add Search
  • svg intergration for excalidraw

Hosting

In order to host the site the sites path needs to be put into gatsby-config.js export object on to the property pathPrefix. Then run

npm run build

and copy the content of the public folder to the webspace.

License

MIT

gatsby-antd-docs's People

Contributors

dependabot[bot] avatar jannikbuschke avatar rmatambo8 avatar wagnerjt avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar

gatsby-antd-docs's Issues

Replace Autoprefixer browsers option to Browserslist config

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

Window is not defined

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

Strategies for working on this template/boilerplate project while also working on concrete/specific instances

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.

Relative imports break within MDX files

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

ChristopherBiscardi/gatsby-mdx#176

Enable external links in menuItems.json

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?

Trouble rendering images in markdown

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 result is as follows:
image

The console and network tabs show a 404 error for the requested image file:

image

image

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!

Specify custom order for sidebar

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:

  • Rename the docs/folders to order the "parent" sidebar items.
  • Rename the "title" to include a 01 02 prefix...

Looks like the above does not work when the site is pushed to gh-pages...

GraphQL errors on `yarn start`

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:

image

Upgrade all dependencies

I believe everything is straight-forward except the gatsby-mdx. It appears it is now gatsby-plugin-mdx. See this for package upgrade details.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.