Summary

Hello. I'm trying to use a (few) Gatsby Remark Plugin(s) inside MDX. So, I followed this: https://www.gatsbyjs.com/plugins/gatsby-plugin-mdx/ and made my gatsby-config.js like this:

    plugins: [
      {
        resolve: `gatsby-remark-images`
      },
      {
        resolve: `gatsby-plugin-mdx`,
        options:
          {
            gatsbyRemarkPlugins: [
              {
                resolve: `gatsby-remark-images`,
                options:
                  {
                    maxWidth: 1280,
                    backgroundColor: `none`,
                    quality: 100,
                    disableBgImageOnAlpha: true,
                    disableBgImage: true
                  }
              }]
          }
      }]
  }

But, as soon as I run gatsby develop, I get:

ERROR #98123  WEBPACK

Generating development JavaScript bundle failed

unknown: Unexpected token (9:66)

  7 | export default function MDXContent(_ref) {
  8 |   var components = _ref.components,
> 9 |       props = _objectWithoutPropertiesLoose(_ref, ["components"]);
    |                                                                   ^C:/Users/Hrishikesh/Desktop/Portfolio/src/@rocketseat/gatsby-theme-docs/text/index.mdx: unknown: Unexpected token (9:66)

  7 | export default function MDXContent(_ref) {
  8 |   var components = _ref.components,
> 9 |       props = _objectWithoutPropertiesLoose(_ref, ["components"]);
    |                                                                   ^

File: src\@rocketseat\gatsby-theme-docs\text\index.mdx:9:66

The index.mdx file the error mentions is the one that came with the theme. It's unchanged. However, it gives the same error if I empty the file.

Relevant information

This was just one remark plugin I was trying, but, I might need more later. So, I need to get this to work. Kindly help.

Last request, would it be possible to add collapsible parent sections for example to the navbar, everything under Usage would be hidden until you click usage in which case it would then reveal the subsections/ pages?

I understand without an index.js file in the pages folder, gatsby would generate no index.html file, so a normal Linux shared hosting would not understand how to display the site. What additional steps are needed to make this happen? I tried just adding a dummy index.js file, but that didn't do the trick.

Note that I have deployed several other Gatsby sites on the same shared Linux hosting without a problem but using this theme as a starter it is simply not generating the main index.html file, therefore the app shows the list of files only in an 'Index of' page.

What am I missing?

What would you like to be added:

I would like to add an option for changing "Edit on GitHub" link for "Edit on Bitbucket".

Why is this needed:

I assume that Bitbucket is also very popular beside GitHub. For example at my company I've no choice we are using Bitbucket.

Is your enhancement request related to a problem? Please describe.

The out of the box documentation template is wonderful but there is a "hard coded" Github link in the core modul.

Additional context

none

Was trying to figure out if there was a way to create a search bar in the side bar that doesn't use Algolia search for example (trying to build the site as cheap as possible)

What would you like to be added:

Simple search bar in the side bar and displays results in the same element.

Why is this needed:

Would make the docs easier to navigate.

Is your enhancement request related to a problem? Please describe.

No.

Additional context

Thank you, this project is awesome!

Hi there,
Thanks for the great theme! Since most of your users, probably going to be small sites, using @dontInfer on your GraphQL type definitions is an overkill. Specifically I need to add a field to MDX frontmatter, and type in gatsby-theme-docs-core/gatsby-node.js stops me from doing it. And since Gatsby can't overwrite gatsby-node.js my only option is to fork the theme.
Please resolve this issue. Thanks!

I want modify language.

For example, "On this page" I want modify for "Nesta página", "Next" I want modify for "Próximo documento", this is is possible?

If not possible, have a possibility that is add in a next future?

The command line mode page is not working in both chrome and firefox.

Description of bug
If I change the default author of the theme, he remains persistent in finding the author @Rocketseat.

To Reproduce

1. Change the name '@Rocketseat'
2. Configure gatsby-config.js to set the new author name
3. Open the preview

Expected behavior
Accept other author folder (name).

Exception or Error

Welcome, this is the default page of @rocketseat/gatsby-theme-docs from Rocketseat! To change this page just create a file named index.mdx inside @rocketseat/gatsby-theme-docs/text and place there your text. Also, if you need help, feel free to open an issue with a description of the problem you're facing or, if you prefer, you can chat with us on our Discord Community 👋🏻

Environment:
OS: Windows 10 (Gatsby running in Debian WSL)
Browser: Chrome 83.0.4103.116
Node v12.16.3

Additional context

I think this theme need a search function.

Or Is there an appropriate plugin to support search function?

What would you like to be added:

Add a field to the plugin config to modify the default branch.

Why is this needed:

Currently, the "Edit on GitHub" links point to master branch which might not exists.

Is your enhancement request related to a problem? Please describe.

Not all repos have a master branch

Additional context

I'm happy to make a PR for this.

The only way I could think of was to shadow the global style js, but that would entail having to copy paste the whole thing only to change one little bit inside the body rule. Is there any better / faster / easier way to apply a site-wide font-family?

Hi,

I couldn't change the top image. How can I change this logo?

Summary

I'm trying to create an index.mdx file for my site. I followed the directions about putting it in C:\Users\***\***\***\GitHub_HeroPrinny\mcatterdev--rocketdocs--gatsby\src\@rocketseat\gatsby-theme-docs\text and nothing happened nothing changed. I tried changing the base directory within the gatsby-config.js file as well because I honestly don't think I'm going to be using much of the shadowing and really want to advance to turn it off completely (but that's beyond the scope of this issue).

I've cleared the cache as well and nothing changed. I also tried to see as an experiment what would happen if I changed the site color and nothing changed when I changed the hex code.

Relevant information

I don;t think this has been reported previously

Description of bug
I am unable to open the basic starter for this. I receive the following errors:

ERROR #98123 WEBPACK

Generating development JavaScript bundle failed

C:\Users\ADMIN\Documents\A3C\PublicDocs\userguide\rocket-docs\node_modules@rocketseat\gatsby-theme-docs\src\components\Docs\EditGithub.js: pragma and pragmaFrag cannot be set when runtime is automatic.

1 | /* @jsx jsx */
| ^
2 | import React from 'react';
3 | import { jsx, css } from '@emotion/core';
4 | import PropTypes from 'prop-types';

File: node_modules@rocketseat\gatsby-theme-docs\src\components\Docs\EditGithub.js

ERROR #98123 WEBPACK

Generating development JavaScript bundle failed

C:\Users\ADMIN\Documents\A3C\PublicDocs\userguide\rocket-docs\node_modules@rocketseat\gatsby-theme-docs\src\components\Layout\index.js: pragma and pragmaFrag cannot be set when runtime is automatic.

1 | /* @jsx jsx */
| ^
2 | import React, { useState, useRef } from 'react';
3 | import { jsx, css } from '@emotion/core';
4 | import PropTypes from 'prop-types';

File: node_modules@rocketseat\gatsby-theme-docs\src\components\Layout\index.js

ERROR #98123 WEBPACK

Generating development JavaScript bundle failed

C:\Users\ADMIN\Documents\A3C\PublicDocs\userguide\rocket-docs\src@rocketseat\gatsby-theme-docs\text\index.mdx: pragma and pragmaFrag cannot be set when runtime is automatic.

1 | import * as React from 'react'
| ^
2 | /* @jsx mdx /
3 | import { mdx } from '@mdx-js/react';
4 | / @jsx mdx */

File: src@rocketseat\gatsby-theme-docs\text\index.mdx

failed Building development bundle - 10.201s

To Reproduce

Expected behavior

I would expect to be able to view the starter files in localhost:8000.

Exception or Error

The full error is shown above.

Screenshots

N/A

Environment:

Additional context

n/a

Description of bug

basePath configuration option can be set in 2 places and neither behave as expected.

To Reproduce

I used gatsby new my-gatsby-project https://github.com/Rocketseat/gatsby-starter-rocket-docs to bootstrap my project.

I configured a basePath in siteMetadata of /testing and published to Gitlab pages. With this configuration all pages were accessible at the expected URLs however any images embedded in my MDX files with ![](./relative-image-path.svg) fail to load with 404s. When the site is built, they appear to be missing the basePath in the generated URL.

In an attempt to resolve this, I discovered that a basePath option can be supplied to @rocketseat/gatsby-theme-docin gatsby-config.js. When I set the basePath here, all pages yield a 404 when built and published to Gitlab pages.

I've tried all combinations of both basePath settings and one or the other, none allow pages to load and inline images to load properly.

Expected behavior

I expect the final paths of inlined images to respect the configured basePath.

Environment:

System:
    OS: Linux 5.9 Fedora 32 (Workstation Edition) 32 (Workstation Edition)
    CPU: (8) x64 Intel(R) Core(TM) i7-6700K CPU @ 4.00GHz
    Shell: 5.8 - /usr/bin/zsh
  Binaries:
    Node: 12.19.0 - ~/.tools/n/bin/node
    Yarn: 1.22.5 - ~/.tools/n/bin/yarn
    npm: 6.14.8 - ~/.tools/n/bin/npm
  Languages:
    Python: 3.8.3 - /home/jarred/.tools/miniconda/bin/python
  Browsers:
    Chrome: 87.0.4280.88
    Firefox: 83.0
  npmPackages:
    gatsby: ^2.25.3 => 2.28.2 
    gatsby-plugin-canonical-urls: ^2.3.12 => 2.6.0 
    gatsby-plugin-manifest: ^2.4.33 => 2.8.0 
    gatsby-plugin-offline: ^3.2.30 => 3.6.0 
    gatsby-plugin-remove-trailing-slashes: ^2.3.13 => 2.6.0 
    gatsby-plugin-sitemap: ^2.4.14 => 2.8.0 

What would you like to be added:

Populate TOC with <h1, h2> instead of just ##. Also, if possible, allow a nested ordered list

Add Emphasis Markdown features others features are working.
https://guides.github.com/features/mastering-markdown/

Why is this needed:

Styled title with the style prop in header tags <h1, h2>

Additional context

Thanks in advance!

Hi there,

Just updated to 2.1.0 and the ToC on the right isn't not to my taste. How can I get rid of it?

I tried shadowing /src/@rocketseat/gatsby-theme-docs/components/Layout/index.js by using the last version of the file that hadn't the ToC but it's not ideal as I have to shadow all the other files that are imported. And at this point, it's not really shadowing or gatsby-theme if I have to shadow all the files...

This should be available as an option to enable/disable in the options IMHO. Or be documented on how to easily remove it.

Thanks!

Summary

Hello,
I'm trying to shadow/override the gatsby-theme-docs theme.
I need to override the header so i've created a Header.js under:
src > @Rocketseat > gatsby-theme-docs > components > Header.js
and made some basic changes

But there is no override. Did i missed sometthing ?

Relevant information

"@rocketseat/gatsby-theme-docs": "^2.2.3",
"gatsby": "^2.24.53",
"react": "^16.13.1",

Thanks

Hello,

First thank you for the starter.

My question is the 404 page doesn't seem to be working, if visit /404 it's fine, but any other test just gives the server error page. Any help or am I just possibly missing something?

Thank you for your time.

Hi, is it's possible to add an image to the mdx file? It seems there is no configuration for it right?

Summary

I want to remove the Edit this page in {repositoryURL} link. Do you know how I can do that? I'm using this theme as a personal portfolio, and I don't want to have pages edited by visitors.

Relevant information

I attempted to modify EditGithub.js, but it didn't do anything other than break my build.

Currently, running Google PageSpeed Insights on https://rocketdocs.netlify.app/ gets a score of ~80/100 for mobile site and suggests removing unused JavaScript by lazy-loading the components not used in initial render. In React, simple code-splitting can be achieved with React.lazy function.

@jpedroschmitz would you be able to update the codebase or could you point me in the direction of the files I'd need to update myself so I can submit a PR?

hey guys, I'm trying to create a page without the sidebar, basically a homepage for the docs site. any idea how I can work my way through that?

Summary

Hello!
thanks for this lib! I recently updated gatsby to the latest version "gatsby": "^4.2.0" and also your lib to the latest version.

I'm currently testing and my images don't really seem to work anymore. Here is what i do:

inside the MDX file i import the image and use it as the src of an img.

import abc from '../../src/assets/linkfive/some/image.png'

...

<img src={abc} />

When i check the console, the html is rendered like this: <img src="{abc}" />

The strange part is that if i change the src tag to anything else, it works. For example like this:

import abc from '../../src/assets/linkfive/some/image.png'

...

<img rc={abc} />

Then the rendered HTML looks like this:

<img rc="/6b99b4641c4bf8b9f98bfe968de14325.png">

which is the correct png path.

i actually don't know that to do anymore. do you have any ideas?

Relevant information

Another thing i found during develop launch

warn Plugin `@rocketseat/gatsby-theme-docs-core` has customized the GraphQL type `MdxFrontmatter`, which has already been
defined by the plugin `gatsby-plugin-mdx`. This could potentially cause conflicts.

i checked the yarn.lock file and your lib is the only dependency of gatsby-plugin-mdx

What would you like to be added:

Parameterize typeName of gatsby-transformer-yaml plugin or make it flexible that we can expose new YAML to new GraphQL node.

Why is this needed:

Since we set typeName to static value SidebarItems, we cannot expose new YAML file to a new GraphQL node.

Is your enhancement request related to a problem? Please describe.

I would like to add new data stored in YAML and expose it as GraphQL node that I can query later.
However, adding gatsby-transformer-yaml plugin section in my custom gatsby-config doesn't help.
This is because it cannot override the existing typeName: 'SidebarItems' and all new YML files will be merged to this type.
This also causes an issue when trying to [query allSidebarItems in gast-by-node.js].(https://github.com/jpedroschmitz/rocketdocs/blob/main/%40rocketseat/gatsby-theme-docs-core/gatsby-node.js#L75)

Additional context

This screenshot took from my personal project that I added multiple YAML files and exposed them to GraphQL nodes.
I only use default type name of gatsby-transformer-yaml

Your demo site in the README is broken now since Gatsby Cloud is dead, just an FYI.

Description of issue

I want my MDX file to render a custom template component but it's not clear where I need to register it in order to make it available. Currently it says:

Component ADRList was not imported, exported, or provided by MDXProvider as global scope

Usage example

The project in question uses a multi-level structure which cannot (and should not) be represented through the sidebar.
Instead, I'd like to put documents into the directory and have the index file create a TOC for all other MDX files in the same directory. As such, I created a Gatsby template component that could be included in the MDX, but I don't know where to register it.

Description of bug

Prev and Next links appear to be in alphebetical order vs using the order of the sidebar.yml

To Reproduce

1. Go to https://rocketdocs.netlify.com/usage/creating-docs
2. Scroll down to to view Prev and Next links
3. Notice the page links

Expected behavior

Prev is set to Navigation when it should be Getting Started and Next is set to Getting Started when it should be Navigation. The Next and Prev page links should use the order of sidebar.yml

Screenshots

Environment:
N/A

Additional context

---

Apologies if I'm off the mark 🎉

Description of bug

When navigation through the docs I found that table of content on the right side is not coloring the sections correctly
The other issue is that if you go to
To Reproduce

Steps to reproduce the behavior:

1. Go to https://rocketdocs.netlify.app/usage/creating-docs
2. Click on 'Line numbers' in the table of contents

Expected behavior

I would expect the "Line numbers" to be colored. Instead, the element that is colored(selected) is "react live".
My suspicion is that it always selects the element in the center screen.

Screenshots

https://recordit.co/VixKdtCVGX

I am not sure if this is a thing i am unaware about or is it actually not present.

What would you like to be added:
Currently the top-left logo of Rocketseat is set by default and it is only possible to change it by changing the node module files of @Rocketseat.
I think there should be a option to add that top-left logo from the config settings.

Why is this needed:
i faced this issue and i had to change the module files in order to change the top-left logo
this was the file i had to change: @rocketseat/gatsby-theme-docs/src/components/Logo.js

Is your enhancement request related to a problem? Please describe.
yes it is a problem while making a documentation using rocketseat, as everyone would most probably like to have their own logo at that position.

Additional context
the top-left logo

Hello,

I am not sure if this is related to me updating to gatsby v4.7.1 but I am getting this error when trying to build:

ValidationError: Invalid configuration object. Webpack has been initialized us
  ing a configuration object that does not match the API schema.
   - configuration.module.rules[11] should be one of these:
     ["..." | object { assert?, compiler?, dependency?, descriptionData?, enforc
  e?, exclude?, generator?, include?, issuer?, issuerLayer?, layer?, loader?, mi
  metype?, oneOf?, options?, parser?, realResource?, resolve?, resource?, resour
  ceFragment?, resourceQuery?, rules?, scheme?, sideEffects?, test?, type?, use?
   }, ...]
     -> A rule.
     Details:
      * configuration.module.rules[10].issuer has an unknown property 'test'. Th
  ese properties are valid:
        object { and?, not?, or? }
        -> Logic operators used in a condition matcher.
      * configuration.module.rules[11].issuer has an unknown property 'test'. Th
  ese properties are valid:
        object { and?, not?, or? }
        -> Logic operators used in a condition matcher

Appreciate your help!

Hello
I couldn't change the top image.
I followed step by step the tutorial
I created the folder assets and components under src/@rocketseat/gatsby-theme-docs, placed my logo.svg file inside assets and copied the code in the tutorial.
Nothing happened unfortunately

There is an error with this repository's Renovate configuration that needs to be fixed. As a precaution, Renovate will stop PRs until it is resolved.

Error type: undefined. Note: this is a nested preset so please contact the preset author if you are unable to fix it yourself.

i wanna add header and footer to my website, i wonder if it is possible to realize by using this frame? if yes, how?

thanks.

What would you like to be added:
A toggle into the menu to change the currently set color.

Why is this needed:
Accessibility and more design options.

Is your enhancement request related to a problem? Please describe.
Documentation with light colors at night can damage your eyesight.

Additional context

Summary

Hi and great theme! I am trying to use the documentation theme and was just wondering how to change the logo at top of sidebar. Thanks in advance.

Relevant information

I want to use default md image in mdx files. How can I achieve this?

I couldn't do with this tutorial: https://www.gatsbyjs.com/docs/working-with-images-in-markdown/

These are the dependencies:

 "dependencies": {
    "@rocketseat/gatsby-theme-docs": "^2.2.3",
    "gatsby": "^2.24.78",
    "gatsby-plugin-canonical-urls": "^2.3.13",
    "gatsby-plugin-google-analytics": "^2.3.18",
    "gatsby-plugin-manifest": "^2.4.34",
    "gatsby-plugin-offline": "^3.2.32",
    "gatsby-plugin-sharp": "^2.6.42",
    "gatsby-plugin-sitemap": "^2.4.17",
    "gatsby-remark-images": "^3.3.34",
    "gatsby-source-filesystem": "^2.3.34",
    "gatsby-transformer-remark": "^2.8.40",
    "prop-types": "^15.7.2",
    "react": "16.13.1",
    "react-dom": "16.13.1"
  }

Summary

I'd like each page in my docs site to have its own image for preview links. Currently they all just show the site banner.png. How would I add this functionality, or is there a plan to update this template to support it?

In another Gatsby theme I'm suing for my blog, there is a featureimage: /img/whatever.png in the frontmatter that is used for this purpose. Could we do the same here?

My docs site: deviq.com
My blog site: ardalis.com

What would you like to be added:

Thank you for creating this theme, I really like the simple design and beautiful color schema, and would like to use this to create some guidelines for my project members.
But I found the sidebar could only support two level menus, it would be really great if it could support at least 4 or 6 level of menus, and much much better if each parent level is foldable !

I've searched the source and found that the menu level was hard-coded at useSidebar.js, and if that changed, something else like style and Sidebar component should also follow.
It would be my last choice to mangle it by myself, or, use another theme..
Before that, I would like to have an ask if you're willing to add such a feature, sincerely looking forward to it.

Why is this needed:

Well, it's just a need..

Is your enhancement request related to a problem? Please describe.

Additional context

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

• chore(deps): update packages (@changesets/changelog-github, commitizen, eslint, eslint-config-prettier, eslint-plugin-import, eslint-plugin-jsx-a11y, eslint-plugin-prettier, eslint-plugin-react, eslint-plugin-react-hooks, lint-staged, prettier)
• chore(deps): update packages (major) (@commitlint/cli, @commitlint/config-conventional, @mdx-js/mdx, @mdx-js/react, eslint-config-prettier, eslint-plugin-prettier, gatsby-remark-embedder, husky, lint-staged, mdast-util-to-string, prettier, prism-react-renderer, remark-gfm, unist-util-visit, url-join)

Detected dependencies

• Check this box to trigger a request for Renovate to run again on this repository

Running a newer version of Gatsby and really looking forward to using this theme. Will we be seeing an upgrade to V5.x.x?

First, Thanks for a great theme.

If I use this theme on a existing site, and use the basePath: '/docs' - the styling of the theme is also applied to our main page using Tailwind CSS. Any idea how I can change this behaviour?

Thanks

There is a lot of margin on the left and right side of the page. I don't want that extra unused space instead I want to fit the page to the entire window like in rocketseat official website. Is it possible?

Description of issue

All links that redirect to GitHub are not working (the ones that have "Edit this page on GitHub"). The href is correct but gatsby is putting "https://sleepy-lichterman-8f6fee.netlify.app/" in front of every link, so we end up on a 404 page.

Browser Information
Browser: Chrome
Version: 80.0.3987.163 (Official Build) (64-bit)

Usage example
Enter the page: "https://sleepy-lichterman-8f6fee.netlify.app/getting-started" and click on "Edit this page on GitHub", you will be redirected to "https://sleepy-lichterman-8f6fee.netlify.app/github.com/izmjs/izmjs.github.io/tree/master/src/docs/getting-started.mdx"

Summary

Hello, I would like to add toggle button for dark theme, do I need to install anothrt plugin for this to work? Thanks

Relevant information