{"id":22792250,"url":"https://github.com/craiggleso/exampledocs","last_synced_at":"2026-04-09T22:40:55.169Z","repository":{"id":72610519,"uuid":"78033744","full_name":"CraigglesO/ExampleDocs","owner":"CraigglesO","description":"Create a documentation page with React and MD files.","archived":false,"fork":false,"pushed_at":"2017-02-18T23:58:53.000Z","size":1273,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-30T17:16:20.149Z","etag":null,"topics":["boilerplate","documentation","md","template-engine"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/CraigglesO.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-01-04T16:40:41.000Z","updated_at":"2017-01-04T16:43:38.000Z","dependencies_parsed_at":"2023-03-18T03:15:14.455Z","dependency_job_id":null,"html_url":"https://github.com/CraigglesO/ExampleDocs","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/CraigglesO/ExampleDocs","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CraigglesO%2FExampleDocs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CraigglesO%2FExampleDocs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CraigglesO%2FExampleDocs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CraigglesO%2FExampleDocs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/CraigglesO","download_url":"https://codeload.github.com/CraigglesO/ExampleDocs/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CraigglesO%2FExampleDocs/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265180546,"owners_count":23723709,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["boilerplate","documentation","md","template-engine"],"created_at":"2024-12-12T03:10:14.532Z","updated_at":"2026-04-09T22:40:50.127Z","avatar_url":"https://github.com/CraigglesO.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ExampleDoc\n\n### Write MD file docs and have them seemlessly merge into this boilerplate!\n\nThis was built with lots of coffee and time... Feel free to star this project! ;)\n\n\n\n## Install \u0026 Go\n\n```\n\ngit clone https://github.com/CraigglesO/ExampleDocs.git\n\nnpm install\n\nnpm start\n```\n\nnavigate to localhost:3000/api to see it in action!\n\n# Docs in action:\n\n![alt tag](https://github.com/CraigglesO/ExampleDocs/blob/master/img/view1.png)\n![alt tag](https://github.com/CraigglesO/ExampleDocs/blob/master/img/view2.png)\n\n\n# About This Documentation\n\nThe idea behind this project was to make it as simple as possible to hit the ground running making documentation for your `API`. As I couldn't find any high quality `MD` to react blog or docs I decided to take it upon myself as I have plans for a bigger project.\n\nI wanted to keep the project as simple as possible while not taking away from the aesthetics and keeping it easy to create more modules. Ideally, you should be hitting the ground running within 10-15 minutes.\n\nQuite obviously this is a `React` copy of Node.js Documentation. I was impressed with how easy to navigate their site and how easy it was to get information on modules and functions.\n\n\u003e Stability: 2 - Stable\n\n## How to Use\n\u003c!-- added: v0.1.5 --\u003e\n\nAssuming you know React, the learning curve should be negligible. Note that you don't have to create the `.js` equivalent; this will be added automatically every time you `node start` and every time you refresh inside the `webpack-dev-server`. Below, I will explain how to setup new modules and where to change colors.\n\n### Creating a New Component\n\u003c!-- added: v0.1.8 --\u003e\n\n__STEP ONE__\n\nFirst, add a new `MD` file to `src/components/docs/md`. This is where you should keep all new content. __Important__: Be sure to capitalize the first letter in the `MD` file, otherwise you will run into an error.\n\nBe sure to add a Table of Contents to the top. For more information see the [Cheat Sheet] provided.\n\n*UPDATE* - The requirement to capitalize the first letter is no longer necessary.\n\n__STEP TWO__\n\nNext, add the file to `index.js`.\n\n```js\n// index.js\nimport File from './components/docs/File';\n\n...\n\n\u003cRoute path=\"/api\" component={App}\u003e\n  \u003cIndexRoute component={Home}/\u003e\n  \u003cRoute path=\"/api/documentation\" component={Documentation}/\u003e\n  \u003cRoute path=\"/api/synopsis\" component={Synopsis}/\u003e\n  \u003cRoute path=\"/api/file\" component={File}/\u003e\n\n\u003c/Route\u003e\n```\n\n__STEP THREE__\n\nOne more step, in the `Toc.js` file we need to add a `NavLink` to direct to the content file. `NavLink` will ensure that after clicking on the navigation link, it will stay selected.\n\n```js\n\u003cul\u003e\n  \u003cli\u003e\n    \u003cNavLink to=\"#\"\u003eExample NavLink\u003c/NavLink\u003e\n  \u003c/li\u003e\n  \u003cli\u003e\n    \u003cNavLink to=\"#\"\u003eExample NavLink\u003c/NavLink\u003e\n  \u003c/li\u003e\n  \u003cli\u003e\n    \u003cNavLink to=\"/api/file\"\u003eFile\u003c/NavLink\u003e\n  \u003c/li\u003e\n\u003c/ul\u003e\n```\n\n### Updating the Color Scheme\n\nEach component has it's own `.css` file. However, if you want to change the look and feel of the `MD` files, look to the `Content.css` file. All core html styles and api-stability tags, look to `index.css`.\n\n### Caveats\n\u003c!-- added: v0.1.5 --\u003e\n\nDue to how this system operates, certain react components and lexical systems require specific input from your `MD` files for stability. Listed below are problems you could potentially run into.\n\n__SPACING:__\n\nSome sections will `error` if there isn't proper spacing in-between sections.\n\n```js\n'BAD':\n\u003e Stability: 0 - Deprecated\n\u003c! -- added: v 0.1.5 -- \u003e\n\n'GOOD':\n\u003e Stability: 0 - Deprecated\n\n\u003c! -- added: v 0.1.5 -- \u003e\n```\n\n__CODE:__\n\nCurrently code tags are wrapped in a `code` tag [ \\` ]. Be sure to use the `\\` backslash code to not cause an error.\n\n__STABILITY:__\n\nUse of multiple `Stability` components in a row requires the user to space them with html comment tags.\n\n```js\n'BAD':\n\u003e Stability: 0 - Deprecated\n\n\u003e Stability: 1 - Experimental\n\n'GOOD':\n\u003e Stability: 0 - Deprecated\n\n\u003c! -- -- \u003e\n\n\u003e Stability: 1 - Experimental\n```\n\n## Stability Index\n\nThroughout the documentation, you will see indications of a section's stability. The idea is to keep updated components that are unlikely to ever change at all. Others may be brand new and experimental, or known to be hazardous and in the process of being redesigned.\n\nThe stability indices are as follows:\n\n\u003e Stability: 0 - Deprecated (This feature is known to be problematic, and changes are planned. Do not rely on it. Use of the feature may cause warnings. Backwards compatibility should not be expected.)\n\n\u003c!-- --\u003e\n\n\u003e Stability: 1 - Experimental (This feature is subject to change, and is gated by a command line flag. It may change or be removed in future versions.)\n\n\u003c!-- --\u003e\n\n\u003e Stability: 2 - Stable (The API has proven satisfactory. Compatibility with the npm ecosystem is a high priority, and will not be broken unless absolutely necessary.)\n\n\u003c!-- --\u003e\n\n\u003e Stability: 3 - Locked (Only fixes related to security, performance, or bug fixes will be accepted. Please do not suggest API changes in this area; they will be refused.)\n\n\u003c!-- --\u003e\n\n## Details\n\u003c!-- added: v0.1.7 --\u003e\n\nBelow gives a more detailed description of the content available.\n\n### Tree Representation\n\u003c!-- added: v0.1.0 --\u003e\n\n```js\n.\n├── App.css\n├── App.js\n├── App.test.js\n├── Example.css\n├── Example.js\n├── components\n│   ├── Content.css\n│   ├── Content.js\n│   ├── Header.css\n│   ├── Header.js\n│   ├── Home.css\n│   ├── Home.js\n│   ├── NavLink.js\n│   ├── Navigation.css\n│   ├── Navigation.js\n│   ├── Toc.js\n│   └── docs\n│       ├── Documentation.js\n│       ├── Synopsis.js\n│       ├── md\n│       │   ├── Documentation.md\n│       │   └── Synopsis.md\n│       └── objs\n│           ├── codeify.js\n│           └── stability.js\n├── index.css\n└── index.js\n```\n\n### Cheat Sheet\n\u003c!-- added: v0.1.3 --\u003e\n```js\n// Headers\n# This is an H1\n## This is an H2\n### This is an H3\n#### This is an H4\n##### This is an H5\n\n// Stability - '()' represents the content inside\n\n\u003e Stability: 0 - Deprecated ()\n\u003e Stability: 1 - Experimental ()\n\u003e Stability: 2 - Stable ()\n\u003e Stability: 3 - Locked ()\n\n// Link\n- Inline Version:\n[Link](https://www.github.com)\n\n- Referenced:\nThis is a [Link] inside paragraphs\nAt the bottom add:\n[Link]: /api/Documentation#cheat-sheet\n\n// bold\nThis is **bold**\n\n// italic\nThis is _italic_\n\n// scratched\nThis is ~~scratched~~\n\n// Table of Contents\n---\n+ About This Documentation\n  - How to Use\n  - Stability Index\n  + Details\n    - Tree Representation\n    - Cheat Sheet\n    - This is an example of deprecated (deprecated)\n---\n\n// code\n'''js\nThis is code\nLet Doc = true;\nreturn Doc;\n'''\nOR\nTo wrap one word use 'code'\n\n//Version comment\n\u003c! -- added: v0.1.3 -- \u003e\n```\n\n### Example of Code\n\u003c!-- added: v0.1.4 --\u003e\n\n```js\nfunction stableSort(v, f)\n{\n    if (f === undefined) {\n        f = function(a, b) {\n            a = \"\"+a; b = \"\"+b;\n            return a \u003c b ? -1 : (a \u003e b ? 1 : 0);\n        }\n    }\n    var dv = [];\n    for (var i=0; i\u003cv.length; i++) {\n        dv[i] = [v[i], i];\n    }\n    dv.sort(function(a, b){\n              return f(a[0], b[0]) || (a[1] - b[1]);\n            });\n    for (var i=0; i\u003cv.length; i++) {\n        v[i] = dv[i][0];\n    }\n}\n```\n\n[Cheat Sheet]: /api/Documentation#cheat-sheet\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcraiggleso%2Fexampledocs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcraiggleso%2Fexampledocs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcraiggleso%2Fexampledocs/lists"}