├── .github
    └── FUNDING.yml
├── LICENSE
├── README.md
├── bundle.js
└── index.html


/.github/FUNDING.yml:
--------------------------------------------------------------------------------
1 | github: 3kh0
2 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2023 Echo
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # GitHub TOC generator
 2 | 
 3 | This web page allows users to generate a Table of Contents from GitHub Markdown or Wiki online. Simply paste your Markdown into the left textarea, and the generated Table of Contents will appear in the right textarea. You can then copy and paste the Table of Contents into your GitHub repository or other documentation.
 4 | 
 5 | - [GitHub TOC generator](#github-toc-generator)
 6 |   * [Why use it](#why-use-it)
 7 |   * [Usage](#usage)
 8 |   * [Contributing](#contributing)
 9 |   * [License](#license)
10 | 
11 | <small><i><a href='http://github.com/3kh0/readme-toc/'>Table of contents generated with readme-toc</a></i></small>
12 | 
13 | 
14 | To use this tool, you must have JavaScript enabled in your browser.
15 | 
16 | **You can use this now by going to [toc.3kh0.net](https://toc.3kh0.net)**
17 | 
18 | ## Why use it
19 | 
20 | This tool was adapted from [markdown-toc](https://ecotrust-canada.github.io/markdown-toc/) put with a few improvements like auto-conversion and better CSS.
21 | 
22 | ## Usage
23 | 1. Go to [toc.3kh0.net](https://toc.3kh0.net).
24 | 2. Paste your Markdown into the left textarea.
25 | 3. Click the "Convert" button to generate the Table of Contents.
26 | 4. Copy the generated Table of Contents from the right textarea and use it in your documentation.
27 | 
28 | ## Contributing
29 | 
30 | Contributions are welcome! Make sure you follow the [Code of conduct](CODE_OF_CONDUCT.md) before getting started. To contribute to this project, please follow these steps:
31 | 
32 | 1. Fork the repository.
33 | 2. Create a new branch for your changes.
34 | 3. Make your changes and commit them with a descriptive commit message.
35 | 4. Push your changes to your forked repository.
36 | 5. Submit a pull request to the original repository.
37 | 
38 | Please make sure your code follows the project's coding standards and is well-documented. Also, be sure to test your changes thoroughly before submitting a pull request.
39 | 
40 | If you find a bug or have a feature request, please submit an issue on this GitHub repository.
41 | 
42 | By contributing to this project, you agree to release your contributions under the terms of the MIT License.
43 | 
44 | ## License
45 | This project is licensed under the MIT License. See the [LICENSE](LICENSE) file for details.
46 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <html>
  2 |   <head>
  3 |     <title>Generate Table of Contents</title>
  4 |     <meta name="description" content="📜 Generate a Table of Contents from GitHub Markdown or Wiki online." />
  5 |     <meta name="title" content="Generate Table of Contents" />
  6 |     <style>
  7 |       body {
  8 |         background-color: #f8f8f8;
  9 |         font-family: sans-serif;
 10 |         margin: 0;
 11 |         padding: 0;
 12 |       }
 13 | 
 14 |       h1 {
 15 |         text-align: center;
 16 |         font-size: 2rem;
 17 |         margin: 2rem;
 18 |       }
 19 | 
 20 |       h2 {
 21 |         color: red;
 22 |         text-align: center;
 23 |       }
 24 | 
 25 |       p {
 26 |         text-align: center;
 27 |         font-size: 1rem;
 28 |         margin: 1rem;
 29 |       }
 30 | 
 31 |       div.container {
 32 |         margin: 2rem auto;
 33 |         max-width: 800px;
 34 |         display: flex;
 35 |         flex-wrap: wrap;
 36 |         justify-content: center;
 37 |         align-items: center;
 38 |       }
 39 | 
 40 |       div.column {
 41 |         height: 500px;
 42 |         width: 45%;
 43 |         margin: 1.5%;
 44 |         background-color: #fff;
 45 |         box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
 46 |         border-radius: 5px;
 47 |         padding: 1rem;
 48 |       }
 49 | 
 50 |       textarea {
 51 |         width: 100%;
 52 |         border: 3px solid #4caf50;
 53 |         border-radius: 5px;
 54 |         padding: 0.5rem;
 55 |       }
 56 | 
 57 |       textarea#md {
 58 |         height: calc(100% - 17px);
 59 |         font-size: 1rem;
 60 |         outline: none;
 61 |         resize: none;
 62 |       }
 63 | 
 64 |       textarea#toc {
 65 |         height: calc(100% - 17px);
 66 |         font-size: 1rem;
 67 |         outline: none;
 68 |         resize: none;
 69 |         background-color: #f6f5f4;
 70 |         color: #333;
 71 |       }
 72 | 
 73 |       button {
 74 |         font-size: 1rem;
 75 |         background-color: #4caf50;
 76 |         color: #fff;
 77 |         border: none;
 78 |         border-radius: 5px;
 79 |         padding: 1rem 2rem;
 80 |         margin: 1rem auto;
 81 |         box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
 82 |         display: block;
 83 |         cursor: pointer;
 84 |       }
 85 | 
 86 |       @media (max-width: 768px) {
 87 |         div.column {
 88 |           width: 100%;
 89 |           margin: 1rem 0;
 90 |         }
 91 |       }
 92 |     </style>
 93 |   </head>
 94 |   <body id="container">
 95 |     <h1>GitHub TOC generator</h1>
 96 |     <p>This page can generate your README Table of Contents online.</p>
 97 |     <div style="display: flex;">
 98 |       <div class="column">
 99 |         Paste README here
100 |         <textarea id="md" onchange="convert()">
101 | # Paste Your Document In Here
102 | 
103 | ## And a table of contents
104 | 
105 | will be generated
106 | 
107 | ## On the right
108 | 
109 | side of this page.
110 |         </textarea>
111 |       </div>
112 |       <div class="column">
113 |         Table of contents
114 |         <textarea id="toc"></textarea>
115 |       </div>
116 |     </div>
117 |     <p><button onclick="convert()">Generate</button></p>
118 |     <script src="bundle.js"></script>
119 |   </body>
120 | </html>


--------------------------------------------------------------------------------