ftg/index.html at main · ashutoshbw/ftg · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>freeCodeCamp TOC Generator</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/showdown/2.1.0/showdown.min.js"></script>

  <script src="https://unpkg.com/@popperjs/core@2"></script>
  <script src="https://unpkg.com/tippy.js@6"></script>

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&family=Roboto+Mono:ital,wght@0,300;0,400;0,600;1,300;1,400;1,600&display=swap" rel="stylesheet">

  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main>
  <a id="fork-me" href="https://github.com/ashutoshbw/ftg"><img loading="lazy" width="149" height="149" src="https://github.blog/wp-content/uploads/2008/12/forkme_right_orange_ff7600.png?resize=149%2C149" class="attachment-full size-full" alt="Fork me on GitHub" data-recalc-dims="1"></a>
    <div id="mid-content">
      <h1 id="main-heading">FTG: freeCodeCamp TOC Generator</h1>
      <div>
        <div id="para-wrapper">
          <div>Number color: <input id="cp-h-num" type="color"></div>
          <div>Number style: <input id="num-style" checked type="checkbox"/> <label for="num-style">Italic</label></div>
          <div>Anchor color: <input id="cp-anchor" type="color"></div>
          <div>Anchor text:
            <select id="anchor-select">
              <option value="#" selected>#</option>
              <option value="§">§</option>
              <option value="⚓">⚓</option>
              <option value="📎">📎</option>
              <option value="🔗">🔗</option>
            </select>
          </div>
        </div>
      </div>
      <div class="tool-wrapper">
<textarea id="inputText" autofocus>
# H1
## H2
### H3
#### H4
##### H5
###### H6
</textarea>
        <div id="toc-container"></div>
        <div id="heading-container"></div>
      </div>
      <div id="info">
        <details>
          <summary><h2>Writer's Guide</h2></summary>
          <ol>
            <li>Write your headings in Markdown above get live results!</li>
            <li>Copy your TOC's HTML by clicking the copy button near it.</li>
            <li>In your freeCodeCamp blog editor, at your desired position embed a HTML card by clicking the "+" button.</li>
            <li>Paste the copied text into that HTML card. Click outside to get an approximate preview. Note that this text has a HTML comment above that includes the original markdown. It is there to help you recreate the TOC without hassle in case you want to edit some parts.</li>
            <li>In a similar way copy paste the headings to recreate them on freeCodeCamp blog editor at your positions you want.</li>
          </ol>
        </details>
        <details>
          <summary><h2>Editor's Guide</h2></summary>
          <ol>
            <li>In freeCodeCamp blog editor, open the HTML card of the Table of contents and copy the markdown text there at the very top inside an HTML comment.</li>
            <li>Paste that into the textarea in <a href="https://ashutoshbw.github.io/ftg/">FTG</a>. The TOC and headings will be recreated from that markdown.</li>
            <li>Now edit the markdown to update the TOC and headings.</li>
            <li>Click the copy button near the Table of contents to copy the updated HTML along with the updated markdown placed at the top in an HTML comment to make further editing easier.</li>
            <li>Go to freeCodeCamp blog editor and replace the HTML content of Table of contents with the copied text.</li>
            <li>Now Go back to <a href="https://ashutoshbw.github.io/ftg/">FTG</a> and copy paste only the headings that you updated in a simliar way.</li>
          </ol>
        </details>
        <details>
          <summary><h2>Why this tool?</h2></summary>
          <p>
            As of July 2022, there is no automatic way to do these things in freeCodeCamp blog editor. So I've made this to help freeCodeCamp authors automate some boring stuff.
          </p>
          <p>
            <b>Note</b>: For styling it uses inline styles because attaching external stylesheets/scripts is not approved by the <a href="https://www.freecodecamp.org/news/developer-news-style-guide/" target="_blank">style guide</a>.
          </p>
        </details>
      </div>
    </div>

    <footer>
      Made by <a href="https://www.freecodecamp.org/news/author/ashutoshbw/" target="_blank">Ashutosh Biswas</a>
    </footer>
  </main>
  <script defer src="main.js"></script>
</body>
</html>