mrcrmn / docc

A starter documentation theme for Gridsome. Featuring instant search, great navigation and a dark mode!

Moin! 👋

I'm a Full-Stack Web Developer currently working for Ofelos in Hamburg, Germany.

I prefer working with:

• Laravel 🛠
• Vue ✌
• React Native ⚛

JavaScript? Heard of it.

docc's Issues

Can't build using netlify

I'm creating a documentation page for my project, but I can't build the project in netlify.
gridsome build command works fine in local environment, but netlify outputs the following:

9:08:24 PM: Waiting for other deploys from your team to complete. Check the queue: https://app.netlify.com/teams/sparxastronomy/builds
9:09:06 PM: Build ready to start
9:09:08 PM: build-image version: 081db65c3e4ce8423fedb40e7689a87de6f84667
9:09:08 PM: build-image tag: v4.3.1
9:09:08 PM: buildbot version: f650485c830eb31597911322420b99299a4303b8
9:09:08 PM: Fetching cached dependencies
9:09:08 PM: Failed to fetch cache, continuing with build
9:09:08 PM: Starting to prepare the repo for build
9:09:09 PM: No cached dependencies found. Cloning fresh repo
9:09:09 PM: git clone https://github.com/sparxastronomy/NBody-website
9:09:10 PM: Preparing Git Reference refs/heads/main
9:09:11 PM: Parsing package.json dependencies
9:09:11 PM: Starting build script
9:09:11 PM: Installing dependencies
9:09:11 PM: Python version set to 2.7
9:09:12 PM: Downloading and installing node v16.10.0...
9:09:12 PM: Downloading https://nodejs.org/dist/v16.10.0/node-v16.10.0-linux-x64.tar.xz...
9:09:13 PM: Computing checksum with sha256sum
9:09:13 PM: Checksums matched!
9:09:16 PM: Now using node v16.10.0 (npm v7.24.0)
9:09:17 PM: Started restoring cached build plugins
9:09:17 PM: Finished restoring cached build plugins
9:09:17 PM: Attempting ruby version 2.7.2, read from environment
9:09:19 PM: Using ruby version 2.7.2
9:09:19 PM: Using PHP version 8.0
9:09:19 PM: Started restoring cached yarn cache
9:09:19 PM: Finished restoring cached yarn cache
9:09:19 PM: Installing yarn at version 1.22.10
9:09:19 PM: Installing Yarn!
9:09:19 PM: > Downloading tarball...
9:09:19 PM: [1/2]: https://yarnpkg.com/downloads/1.22.10/yarn-v1.22.10.tar.gz --> /tmp/yarn.tar.gz.ebib73uRBf
9:09:19 PM:   % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
9:09:19 PM:                                  Dload  Upload   Total   Spent    Left  Speed
9:09:19 PM:   0     0    0     0    0     0      0      0 --:--:-- --:--:-- --:--:--     0
9:09:19 PM:   0     0    0     0    0     0      0      0 --:--:-- --:--:-- --:--:--     0
9:09:19 PM: 100    81  100    81    0     0    554      0 --:--:-- --:--:-- --:--:--   551
9:09:19 PM: 100    95  100    95    0     0    262      0 --:--:-- --:--:-- --:--:--   262
9:09:20 PM: 100   626  100   626    0     0   1059      0 --:--:-- --:--:-- --:--:--  1059
9:09:20 PM: 100 1215k  100 1215k    0     0  1660k      0 --:--:-- --:--:-- --:--:-- 1660k
9:09:20 PM: [2/2]: https://yarnpkg.com/downloads/1.22.10/yarn-v1.22.10.tar.gz.asc --> /tmp/yarn.tar.gz.ebib73uRBf.asc
9:09:20 PM:   % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
9:09:20 PM:                                  Dload  Upload   Total   Spent    Left  Speed
9:09:20 PM:   0     0    0     0    0     0      0      0 --:--:-- --:--:-- --:--:--     0
9:09:20 PM: 100    85  100    85    0     0   1770      0 --:--:-- --:--:-- --:--:--  1770
9:09:20 PM: 100    99  100    99    0     0   1178      0 --:--:-- --:--:-- --:--:--  1178
9:09:20 PM: 100   630  100   630    0     0   5675      0 --:--:-- --:--:-- --:--:--  5675
9:09:20 PM: 100   832  100   832    0     0   5985      0 --:--:-- --:--:-- --:--:--  5985
9:09:20 PM: > Verifying integrity...
9:09:20 PM: gpg: Signature made Fri 02 Oct 2020 11:17:27 AM UTC
9:09:20 PM: gpg:                using RSA key 6D98490C6F1ACDDD448E45954F77679369475BAA
9:09:20 PM: gpg: Good signature from "Yarn Packaging <[email protected]>" [unknown]
9:09:20 PM: gpg: WARNING: This key is not certified with a trusted signature!
9:09:20 PM: gpg:          There is no indication that the signature belongs to the owner.
9:09:20 PM: Primary key fingerprint: 72EC F46A 56B4 AD39 C907  BBB7 1646 B01B 86E5 0310
9:09:20 PM:      Subkey fingerprint: 6D98 490C 6F1A CDDD 448E  4595 4F77 6793 6947 5BAA
9:09:20 PM: > GPG signature looks good
9:09:20 PM: > Extracting to ~/.yarn...
9:09:20 PM: > Adding to $PATH...
9:09:20 PM: > Successfully installed Yarn 1.22.10! Please open another terminal where the `yarn` command will now be available.
9:09:21 PM: No yarn workspaces detected
9:09:21 PM: Started restoring cached node modules
9:09:21 PM: Finished restoring cached node modules
9:09:21 PM: Installing NPM modules using Yarn version 1.22.10
9:09:22 PM: yarn install v1.22.10
9:09:22 PM: warning package-lock.json found. Your project contains lock files generated by tools other than Yarn. It is advised not to mix package managers in order to avoid resolution inconsistencies caused by unsynchronized lock files. To clear this warning, remove package-lock.json.
9:09:22 PM: [1/4] Resolving packages...
9:09:23 PM: [2/4] Fetching packages...
9:09:25 PM: warning [email protected]: Invalid bin field for "mini-css-extract-plugin".
9:09:25 PM: warning [email protected]: Invalid bin field for "url-loader".
9:09:45 PM: info [email protected]: The platform "linux" is incompatible with this module.
9:09:45 PM: info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation.
9:09:45 PM: [3/4] Linking dependencies...
9:09:45 PM: warning "gridsome-remark-katex > [email protected]" has unmet peer dependency "remark-parse@^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0".
9:09:45 PM: warning " > [email protected]" has unmet peer dependency "webpack@^4.36.0 || ^5.0.0".
9:09:53 PM: [4/4] Building fresh packages...
9:10:04 PM: error /opt/build/repo/node_modules/sharp: Command failed.
9:10:04 PM: Exit code: 1
9:10:04 PM: Command: (node install/libvips && node install/dll-copy && prebuild-install) || (node-gyp rebuild && node install/dll-copy)
9:10:04 PM: Arguments:
9:10:04 PM: Directory: /opt/build/repo/node_modules/sharp
9:10:04 PM: Output:
9:10:04 PM: info sharp Detected globally-installed libvips v8.9.1
9:10:04 PM: info sharp Building from source via node-gyp
9:10:04 PM: gyp info it worked if it ends with ok
9:10:04 PM: gyp info using [email protected]
9:10:04 PM: gyp info using [email protected] | linux | x64
9:10:04 PM: gyp info find Python using Python version 3.8.10 found at "/usr/bin/python3"
9:10:04 PM: gyp http GET https://nodejs.org/download/release/v16.10.0/node-v16.10.0-headers.tar.gz
9:10:04 PM: gyp http 200 https://nodejs.org/download/release/v16.10.0/node-v16.10.0-headers.tar.gz
9:10:04 PM: gyp http GET https://nodejs.org/download/release/v16.10.0/SHASUMS256.txt
9:10:04 PM: gyp http 200 https://nodejs.org/download/release/v16.10.0/SHASUMS256.txt
9:10:04 PM: (node:1792) [DEP0150] DeprecationWarning: Setting process.config is deprecated. In the future the property will be read-only.
9:10:04 PM: (Use `node --trace-deprecation ...` to show where the warning was created)
9:10:04 PM: gyp info spawn /usr/bin/python3
9:10:04 PM: gyp info spawn args [
9:10:04 PM: gyp info spawn args   '/opt/buildhome/.nvm/versions/node/v16.10.0/lib/node_modules/npm/node_modules/node-gyp/gyp/gyp_main.py',
9:10:04 PM: gyp info spawn args   'binding.gyp',
9:10:04 PM: gyp info spawn args   '-f',
9:10:04 PM: gyp info spawn args   'make',
9:10:04 PM: gyp info spawn args   '-I',
9:10:04 PM: gyp info spawn args   '/opt/build/repo/node_modules/sharp/build/config.gypi',
9:10:04 PM: gyp info spawn args   '-I',
9:10:04 PM: gyp info spawn args   '/opt/buildhome/.nvm/versions/node/v16.10.0/lib/node_modules/npm/node_modules/node-gyp/addon.gypi',
9:10:04 PM: gyp info spawn args   '-I',
9:10:04 PM: gyp info spawn args   '/opt/buildhome/.cache/node-gyp/16.10.0/include/node/common.gypi',
9:10:04 PM: gyp info spawn args   '-Dlibrary=shared_library',
9:10:04 PM: gyp info spawn args   '-Dvisibility=default',
9:10:04 PM: gyp info spawn args   '-Dnode_root_dir=/opt/buildhome/.cache/node-gyp/16.10.0',
9:10:04 PM: gyp info spawn args   '-Dnode_gyp_dir=/opt/buildhome/.nvm/versions/node/v16.10.0/lib/node_modules/npm/node_modules/node-gyp',
9:10:04 PM: gyp info spawn args   '-Dnode_lib_file=/opt/buildhome/.cache/node-gyp/16.10.0/<(target_arch)/node.lib',
9:10:04 PM: gyp info spawn args   '-Dmodule_root_dir=/opt/build/repo/node_modules/sharp',
9:10:04 PM: gyp info spawn args   '-Dnode_engine=v8',
9:10:04 PM: gyp info spawn args   '--depth=.',
9:10:04 PM: gyp info spawn args   '--no-parallel',
9:10:04 PM: gyp info spawn args   '--generator-output',
9:10:04 PM: gyp info spawn args   'build',
9:10:04 PM: gyp info spawn args   '-Goutput_dir=.'
9:10:04 PM: gyp info spawn args ]
9:10:04 PM: gyp info spawn make
9:10:04 PM: gyp info spawn args [ 'BUILDTYPE=Release', '-C', 'build' ]
9:10:04 PM: make: Entering directory '/opt/build/repo/node_modules/sharp/build'
9:10:04 PM:   TOUCH Release/obj.target/libvips-cpp.stamp
9:10:04 PM:   CXX(target) Release/obj.target/sharp/src/common.o
9:10:04 PM: In file included from /opt/buildhome/.cache/node-gyp/16.10.0/include/node/v8.h:30,
9:10:04 PM:                  from /opt/buildhome/.cache/node-gyp/16.10.0/include/node/node.h:63,
9:10:04 PM:                  from ../src/common.cc:22:
9:10:04 PM: /opt/buildhome/.cache/node-gyp/16.10.0/include/node/v8-internal.h: In function ‘void v8::internal::PerformCastCheck(T*)’:
9:10:04 PM: /opt/buildhome/.cache/node-gyp/16.10.0/include/node/v8-internal.h:489:38: error: ‘remove_cv_t’ is not a member of ‘std’; did you mean ‘remove_cv’?
9:10:04 PM:   489 |             !std::is_same<Data, std::remove_cv_t<T>>::value>::Perform(data);
9:10:04 PM:       |                                      ^~~~~~~~~~~
9:10:04 PM:       |                                      remove_cv
9:10:04 PM: /opt/buildhome/.cache/node-gyp/16.10.0/include/node/v8-internal.h:489:38: error: ‘remove_cv_t’ is not a member of ‘std’; did you mean ‘remove_cv’?
9:10:04 PM:   489 |             !std::is_same<Data, std::remove_cv_t<T>>::value>::Perform(data);
9:10:04 PM:       |                                      ^~~~~~~~~~~
9:10:04 PM:       |                                      remove_cv
9:10:04 PM: /opt/buildhome/.cache/node-gyp/16.10.0/include/node/v8-internal.h:489:50: error: template argument 2 is invalid
9:10:04 PM:   489 |             !std::is_same<Data, std::remove_cv_t<T>>::value>::Perform(data);
9:10:04 PM:       |                                                  ^
9:10:04 PM: /opt/buildhome/.cache/node-gyp/16.10.0/include/node/v8-internal.h:489:63: error: ‘::Perform’ has not been declared
9:10:04 PM:   489 |             !std::is_same<Data, std::remove_cv_t<T>>::value>::Perform(data);
9:10:04 PM:       |                                                               ^~~~~~~
9:10:04 PM: make: *** [sharp.target.mk:183: Release/obj.target/sharp/src/common.o] Error 1
9:10:04 PM: make: Leaving directory '/opt/build/repo/node_modules/sharp/build'
9:10:04 PM: gyp ERR! build error
9:10:04 PM: gyp ERR! stack Error: `make` failed with exit code: 2
9:10:04 PM: gyp ERR! stack     at ChildProcess.onExit (/opt/buildhome/.nvm/versions/node/v16.10.0/lib/node_modules/npm/node_modules/node-gyp/lib/build.js:194:23)
9:10:04 PM: gyp ERR! stack     at ChildProcess.emit (node:events:390:28)
9:10:04 PM: gyp ERR! stack     at Process.ChildProcess._handle.onexit (node:internal/child_process:290:12)
9:10:04 PM: gyp ERR! System Linux 4.19.167+
9:10:04 PM: gyp ERR! command "/opt/buildhome/.nvm/versions/node/v16.10.0/bin/node" "/opt/buildhome/.nvm/versions/node/v16.10.0/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js" "rebuild"
9:10:04 PM: gyp ERR! cwd /opt/build/repo/node_modules/sharp
9:10:04 PM: gyp ERR! node -v v16.10.0
9:10:04 PM: gyp ERR! node-gyp -v v7.1.2
9:10:04 PM: gyp ERR! not ok
9:10:04 PM: info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.
9:12:15 PM: Error during Yarn install
9:12:15 PM: Build was terminated: Build script returned non-zero exit code: 1
9:12:15 PM: Creating deploy upload records
9:12:15 PM: Failing build: Failed to build site
9:12:15 PM: Failed during stage 'building site': Build script returned non-zero exit code: 1
9:12:15 PM: Finished processing build request in 3m6.565638414s

Using vue-remark instead of transformer-remark

For this past week, I've been working on implementing vue-remark for my component style guide. In #5 you mention that you couldn't get vue-remark to work the way you wanted to.

Can you share your problem here?

!! Well Done !!

👍

Sidebar Single Menu Item

Hiya!

I really love this theme! Is there a way to have a single item in the sidebar menu without having it as a sub-item? Currently, the sidebar has a title and a 'items' section. With only one item under the menu it is taking unneeded real estate.

Currently I have something like:

sidebar: [
  {
    name: 'menu',
    sections: [
      {
        title: 'Single',
        items: ['/page/']
      },
      {
        title: 'Nested',
        items: [
          '/page/one/',
          '/page/two/',
          '/page/three/'
        ]
      },
    ]
   }
]

Best -
James

It's not able to buld the project

Hi, I just download it and run gridsome develop it works, but when I run gridsome build it doesn't works with the message below.

Write out page data (8 files) - 0s
assets/js/page--src-templates-markdown-page-vue.395893e9.js:171
      this.observer.disconnect(); // And create another one for the next page.
                    ^

TypeError: Cannot read property 'disconnect' of null
    at a.$route (assets/js/page--src-templates-markdown-page-vue.395893e9.js:171:21)

Dark theme default

Good job. How to choose a dark default skin option

Sidebar bullet for active link displaying multiple times

Hi, love what you've done with this simple template for a doc site. I'm looking into converting my Vuepress site to Gridsome and this looked like a perfect fit. Only thing I'm missing is support for Vue components in markdown, maybe something for the future?

Anyway, the issue I've discovered is that the bullet next to the active link on the sidebar is displayed multiple times when navigating from one link to another. I haven't found the logic to it, but I can click from one link to another to make two or even three bullets appear simultaneously.

Using latest Safari on Mac.

Submit to Netlify Templates site

I found this project via the Starters gallery on the Gridsome site, but I don't see it listed yet in the JAMstack templates gallery on the Netlify site.

For additional exposure, you might consider submitting it there, and perhaps wiring up Netlify CMS (as many other starter themes there do) to make it easier for less technical authors to edit content.

Since you're already building the demo site on Netlify and have the requisite netlify.toml file, it shouldn't take much more effort to prepare the repo for their template gallery.

Great work! 💯

Changing color modes happens in steps

It seems that changing from dark to light mode or vice versa happens in two or three steps, making the process a little jarring for visitors. First the background changes, then once that's finished we can see the text gradually change to the fitting colors in a cascade of transitions. Perhaps a problem with chaining animations or a variable changing only after the background has transitioned?

Anchor links not accessible in mobile mode

As you can see on the left of h1 tag, the anchor link is not very accessible in mobile view. Maybe add more horizontal padding in small views.

Nav disappears

hi there,

I have added some few files, but when adding to config.js a new nav (including the "," to the last - Configuration; a) all nav disappears, or b) the new one don't show up.

any advice?
Thanks

TypeError when build

Hello, there is an error happened when building.

Error: TypeError: Cannot read property 'disconnect' of null

Details:

(node:1416) UnhandledPromiseRejectionWarning: TypeError: Cannot read property 'disconnect' of null
    at a.$route (assets/js/page--src-templates-markdown-page-vue.2361b1f1.js:589:21)
......
(node:1416) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 1)
(node:1416) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

Influence: almost none. the building process finished normally, and the site worked normally.

---

The disconnect seems from the file ./src/components/OnThisPage.vue, line 65: this.observer.disconnect();.

some solutions?

Nav items are not displayed on smaller viewports

Top menu nav items are hidden on smaller view ports, but don't appear anywhere else. Perhaps the nav items should appear at the top of the side bar when hidden in the top nav?

Can't render Math Equations in this

I'm using mathjax Properly
I'm getting the following outputs:

While, the expected output is this, And I'm only getting that only in my local development environment using gridsome develop.

My package.json is

{
  "name": "gridsome-docs",
  "private": true,
  "scripts": {
    "build": "gridsome build",
    "develop": "gridsome develop",
    "explore": "gridsome explore"
  },
  "devDependencies": {
    "@gridsome/plugin-google-analytics": "^0.1.0",
    "@gridsome/plugin-sitemap": "^0.2.3",
    "@gridsome/remark-prismjs": "^0.3.0",
    "@gridsome/source-filesystem": "^0.6.2",
    "@gridsome/transformer-remark": "^0.6.4",
    "fuse.js": "^6.4.6",
    "gridsome": "^0.7.23",
    "gridsome-plugin-tailwindcss": "^2.2.36",
    "node-sass": "^4.14.1",
    "prism-themes": "^1.3.0",
    "sass-loader": "^10.2.0",
    "tailwindcss": "^1.9.6",
    "vue-feather-icons": "^5.0.0"
  },
  "dependencies": {
    "gridsome-remark-katex": "^0.1.1"
  }
}

I've also tried it by using remark-math and remark-html-math having the following json.config file, but still facing the same problems:

{
  "name": "gridsome-docs",
  "private": true,
  "scripts": {
    "build": "gridsome build",
    "develop": "gridsome develop",
    "explore": "gridsome explore"
  },
  "devDependencies": {
    "@gridsome/plugin-google-analytics": "^0.1.0",
    "@gridsome/plugin-sitemap": "^0.2.3",
    "@gridsome/source-filesystem": "^0.6.2",
    "@gridsome/transformer-remark": "^0.6.4",
    "fuse.js": "^6.4.6",
    "gridsome": "^0.7.23",
    "gridsome-plugin-tailwindcss": "^2.2.48",
    "node-sass": "^6.0.1",
    "prism-themes": "^1.9.0",
    "sass-loader": "^10.2.0",
    "vue-feather-icons": "^5.0.0"
  },
  "dependencies": {
    "@gridsome/remark-prismjs": "^0.3.0",
    "autoprefixer": "^10.2.5",
    "postcss": "^8.3.0",
    "postcss-import": "^13.0.0",
    "remark-html-katex": "^1.2.0",
    "remark-math": "^1.0.6",
    "tailwindcss": "^2.2.16"
  }
}

Navbar isn't resizing correctly

Hi,

it seems that the header navbar isn't resizing correctly.

Steps to reproduce

1. Open the gridsome.config.js

2. update the nav property and replace it with

nav: {
  links: [
    { path: '/', title: 'Home' },
    { path: '/docs/', title: 'Docs' }
  ]
},

3. Run gridsome develop

Current Result

Expected Result

1. The Searchbar is resized (and smaller)
2. There is no "line break"

No camel case into filename

Do note that you should not name your filename like this : exampleForThePeople.md
It will result in an error.

but exampleforthepeople.md or better example-for-the-people.md to be easily read into the url.

Maybe someone could correct this ?

Dropdown in header

How to add dropdown in header?

and how to remove the Docs in the header? I tried to remove the Docs in gridsome.config.js but it is giving me error.

Images not showing when using external directory as content directory

Hi,

I've this case where I load markdown from an absolute path or a path that is not in project directory
and there is no problem with that, all markdown is displayed correctly except images
I use absolute paths for images like ![]("/home/hamdy/wikis/github/info_wiki2020/index/img/demo_site_overview.png")
but images are not shown!
how can I overcome this?

my config looks like

{
      use: '@gridsome/source-filesystem',
      options: {
        baseDir: '/home/hamdy/wikis/',
        path: '**/*.md',
        typeName: 'MarkdownPage',
        remark: {
          externalLinksTarget: '_blank',
          externalLinksRel: ['noopener', 'noreferrer'],
          plugins: [
            '@gridsome/remark-prismjs'
          ]
        }
      }
    },

how to support other languages in sidebar-section-items

Hi,

i want to translate one doc to other language, but it seems not supported in sidebar-section-items.

Thanks,
Jason

question : can we have several sidebars ?

Generate sidebar from de folder structure on content folder

Hi people,

I start using the theme and I believe it would be great if the sidebar gets generated from the folder structure on the content folder.

Right now you have to put all the elements that goes on the sidebar on the grid.config and that's ok when the site is small, but once the site gets huge I think it would be difficult to manage the sidebar.

How do i disable lazy load images?