Document Template for Markdown content.
Explore the docs »
View Demo
·
Report Bug
·
Request Feature
Table of Contents
- Clone the repo
git clone https://github.com/centria/template- Install NPM packages
npm install
yarn- Implement application on local server
npm start
yarn start- Lint application with ESLint
npm run lint
yarn run lint- Build application code with
npm run build
yarn run buildTo replace document content, you need to delete the content folder in ./src folder then replace your own document content folder.
Basically, all the markdown files in your content folder will be displayed in the side navbar, except the index file. It will be the main page to display when you visit the application, or you can revisit it by clicking on the Centria's logo. For example, the image bellow is a content folder with three main part, each will have a main folder and a index markdown file corresponding, folder part 1 will have part1.md as its index page. And you can have many single page as you want like exam, exercises, ...
In order to display the content from the files, we need to config the front matter data so the app can get its necessary information. Two compulsory fields need to have for each file are title and nav_order. Title will be used to display the part's name in the navbar and anv_order will be used for sorting those name in navbar. Bellow is the frontmatter of part 1.
About numbering the nav*order, it will work base on each folder layer. For example, if you are in the ./src/content folder, you should number the contents' order as : 1, 2, 3... But if you in a subfolder like part1, or part2 you also need to number the subcontain as 1, 2, 3...So each layer will have a separate ordering and will not overlap each others.
The global style of this template take reference from Benjamin De Cock and you can find it in ./src/styles/global.js.
To make the application's reponsiveness, the media queries tak reference from Gatsby theme Novela, you can adjust it by modifying ./src/styles/media.js. All breakpoints can be found inside of theme.breakpoints and each is turned in to a min + 1 and max-width version.
You can adjust the styles of the application by modifying the file src/gatsby-plugin-theme-ui .
I recommend keep then setting as default since they will have effects to the responsiveness of the application on other platforms. However, you can still adjust the styles of the application by modifying src/gatsby-plugin-theme-ui/color.js
Codeblook highlighting functionality of this app is boostrapping with theme-ui. Althought this is the most popular choice for supporting syntax highlight with Gatsby, it still have its limit and cannot cover all programming languages. However, it can be supported with Prismjs to have more languages withhighlight support, the config can be found here.
List of supported languages by theme-ui.
The defaut highlighting style used in this application is ocenic, you can choose different highlighting styles from Theme-ui style list
To deploy the application on your own Github Pages, you need to push these code on your Github repo, then create and save a Github TEMPLATE_API secret key. After that got to the ./gatsby-config.js file on the root folder and adjust the pathPrefix field with your Github repo name. For example, if your app repo name is my-repo then it should be pathPrefix: '/my-repo'. You also can watch this tutorial if you need more help on this.
See the open issues for a list of proposed features (and known issues).
Contributions are what make the open source community such an amazing place to be learn, inspire, and create. Any contributions you make are greatly appreciated.
- Fork the Project
- Create your Feature Branch (
git checkout -b feature/AmazingFeature) - Commit your Changes (
git commit -m 'Add some AmazingFeature') - Push to the Branch (
git push origin feature/AmazingFeature) - Open a Pull Request
Distributed under the MIT License. See LICENSE for more information.