Skip to content

Feat : Add Table of Contents Component on pages #1775

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 42 commits into from
Mar 1, 2025
Merged

Feat : Add Table of Contents Component on pages #1775

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
42 commits
Select commit Hold shift + click to select a range
c93833c
Remove: code formatters, Add: Table of content component on 4x api page
ShubhamOulkar Feb 9, 2025
9dc44b9
fix toc clash with header nav btns
ShubhamOulkar Feb 10, 2025
6665416
update toc style and change toc break point to 800px
ShubhamOulkar Feb 11, 2025
3838eb6
✔️bug: resolve overlay in header nav btns and update: open toc submen…
ShubhamOulkar Feb 11, 2025
fd7cf37
add toc on 5x api page
ShubhamOulkar Feb 11, 2025
8c0f4c6
add toc on 3x api page
ShubhamOulkar Feb 11, 2025
a57c8fd
remove scroll oberver because need more logic to handle resize page e…
ShubhamOulkar Feb 12, 2025
53db62b
update animation for #menu.open/close
ShubhamOulkar Feb 12, 2025
b3e549f
add toc on blog pages
ShubhamOulkar Feb 12, 2025
e663e35
Merge branch 'gh-pages' into table-of-content
ShubhamOulkar Feb 12, 2025
6527321
update css variables , update toc btn name to default name
ShubhamOulkar Feb 12, 2025
4c113e0
refactor layout structure for API and blog pages, improve CSS for res…
bjohansebas Feb 16, 2025
e3f7e95
fix responsive
bjohansebas Feb 16, 2025
4bcdec1
update toc design
ShubhamOulkar Feb 17, 2025
4adc2df
add toc to advanced/best-practice-performance page
ShubhamOulkar Feb 17, 2025
0167a60
Merge branch 'gh-pages' into table-of-content
ShubhamOulkar Feb 17, 2025
e93eaef
fix content layout and update 100vw to 100% width
ShubhamOulkar Feb 18, 2025
43064d4
update content layout on all pages
ShubhamOulkar Feb 20, 2025
6d71fed
add toc on resources/middleware pages
ShubhamOulkar Feb 20, 2025
847e4c2
add toc on release change log page
ShubhamOulkar Feb 20, 2025
45cde17
remove unused class sectors and update toc-title
ShubhamOulkar Feb 20, 2025
e51579e
ADD Accessibility improvements
ShubhamOulkar Feb 20, 2025
dc8cfdc
Merge branch 'gh-pages' into table-of-content
ShubhamOulkar Feb 20, 2025
c309afd
remove css tap highlighter and all posts link from blogs side menu
ShubhamOulkar Feb 21, 2025
7c1c02e
move sidebar menu to left on blog pages
ShubhamOulkar Feb 26, 2025
b9555ef
add inline margin to content at 800px breakpoint
ShubhamOulkar Feb 26, 2025
f99fc47
Merge branch 'gh-pages' into table-of-content
ShubhamOulkar Feb 26, 2025
0e1530c
add offset on links text decorations
ShubhamOulkar Feb 26, 2025
3e938de
move sidebar menu to left on middleware pages
ShubhamOulkar Feb 26, 2025
aa67ef9
add outline to sidemenus on scroll event
ShubhamOulkar Feb 26, 2025
6ce1568
remove text underlines from sidebar menus
ShubhamOulkar Feb 27, 2025
b6bf2ec
add page content landmarks
ShubhamOulkar Feb 28, 2025
6b7048a
fix landmark
ShubhamOulkar Feb 28, 2025
36a48fb
Merge branch 'gh-pages' into table-of-content
bjohansebas Mar 1, 2025
761a433
Refactor layout structure and update CSS for improved content display
bjohansebas Mar 1, 2025
4b3fca2
Remove text justify from blog document styling
bjohansebas Mar 1, 2025
1a8fd31
Remove unnecessary div wrappers from documentation files
bjohansebas Mar 1, 2025
7a74de1
Refactor CSS selectors for document tables to improve styling consist…
bjohansebas Mar 1, 2025
6240bdb
Remove unnecessary text decoration properties from link styles
bjohansebas Mar 1, 2025
e95fcec
Add full-width styling for table of contents and remove unused resize…
bjohansebas Mar 1, 2025
f3ec114
Remove TOC from best practice performance documentation
bjohansebas Mar 1, 2025
e1fed96
Adjust content padding and remove unused media query styles for impro…
bjohansebas Mar 1, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions _includes/api/en/3x/menu.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
<button id="menu-toggle" title="show table of content">On this page <span>&#x25BA;</span></button>
<ul id="menu">
<li><a href="#express">express()</a></li>
<li id="app-api"> <a href="#application">Application</a>
Expand Down Expand Up @@ -159,3 +160,4 @@
</ul>
</li>
</ul>

5 changes: 3 additions & 2 deletions _includes/api/en/4x/menu.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<button id="menu-toggle" title="show table of content">On this page <span>&#x25BA;</span></button>
<ul id="menu">

<li id="express-api"><a href="#express">express()</a>
<ul id="express-menu">
<li><em>Methods</em></li>
Expand Down Expand Up @@ -136,7 +136,7 @@
<ul id="res-menu">
<li><em>Properties</em>
</li>
<li><a href="#res.app">res.app </a>
<li><a href="#res.app">res.app</a>
</li>
<li><a href="#res.headersSent">res.headersSent</a>
</li>
Expand Down Expand Up @@ -205,3 +205,4 @@
</ul>
</li>
</ul>

2 changes: 1 addition & 1 deletion _includes/api/en/5x/menu.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<button id="menu-toggle" title="show table of content">On this page <span>&#x25BA;</span></button>
<ul id="menu">

<li id="express-api"><a href="#express">express()</a>
<ul id="express-menu">
<li><em>Methods</em></li>
Expand Down
12 changes: 6 additions & 6 deletions _includes/blog/posts-menu.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
<div id="blog-side-menu-container">
<h3>
<a href="/{{ page.lang }}/blog/posts">Posts</a>
</h3>
<ul id="blog-side-menu">
<button id="menu-toggle" title="show blogs list">All Blogs <span>&#x25BA;</span></button>
<ul id="menu" class="blog-side-menu">
<li>
<ul id="side-menu" class="active">
{% for post in site.posts %}
<li>
<a href="{{post.url}}">{{ post.title }}</a>
</li>
{% endfor %}
</ul>
</div>
</li>
</ul>
5 changes: 2 additions & 3 deletions _includes/changelog/menu.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
### Versions

- [5.x](#5.x)
- [4.x](#4.x)
- [4.x](#4.x)
{: #side-menu .active}
1 change: 1 addition & 0 deletions _includes/mw-list.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,3 +15,4 @@
- [session](/resources/middleware/session.html)
- [timeout](/resources/middleware/timeout.html)
- [vhost](/resources/middleware/vhost.html)
{: #side-menu .active}
27 changes: 14 additions & 13 deletions _layouts/3x-api.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,22 +4,23 @@
{% include head.html %}

<body>

<section class="content">

{% include header.html %}

{% include api/en/3x/menu.md %}

<div id="overlay"></div>

{{ content }}

</section>
{% include header.html %}
<div id="overlay"></div>

<div class="content">
<nav aria-labelledby="sidebar-heading">
<div class="toc-container">
<h3 id="sidebar-heading" class="toc-heading"><em>On this page</em></h3>
{% include api/en/3x/menu.md %}
</div>
</nav>
<main>
{{ content }}
</main>
</div>

{% include footer.html %}


</body>

</html>
26 changes: 14 additions & 12 deletions _layouts/4x-api.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,18 +4,20 @@
{% include head.html %}

<body>

<section class="content">

{% include header.html %}

{% include api/en/4x/menu.md %}

<div id="overlay"></div>

{{ content }}

</section>
{% include header.html %}
<div id="overlay"></div>

<div class="content">
<nav aria-labelledby="sidebar-heading">
<div class="toc-container">
<h3 id="sidebar-heading" class="toc-heading"><em>On this page</em></h3>
{% include api/en/4x/menu.md %}
</div>
</nav>
<main>
{{ content }}
</main>
</div>

{% include footer.html %}

Expand Down
26 changes: 14 additions & 12 deletions _layouts/5x-api.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,18 +4,20 @@
{% include head.html %}

<body>

<section class="content">

{% include header.html %}

{% include api/en/5x/menu.md %}

<div id="overlay"></div>

{{ content }}

</section>
{% include header.html %}
<div id="overlay"></div>

<div class="content">
<nav aria-labelledby="sidebar-heading">
<div class="toc-container">
<h3 id="sidebar-heading" class="toc-heading"><em>On this page</em></h3>
{% include api/en/5x/menu.md %}
</div>
</nav>
<main>
{{ content }}
</main>
</div>

{% include footer.html %}

Expand Down
28 changes: 17 additions & 11 deletions _layouts/middleware.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,23 @@
---
layout: page
---
<div id="mw-container">
<div id="mw-list">
{% if page.title contains 'middleware' %}
{% capture readme %}{% include mw-list.md %}{% endcapture %}
{% else %}
{% capture readme %}{% include util-list.md %}{% endcapture %}
{% endif %}
{{ readme | markdownify }}

<nav aria-labelledby="sidebar-heading">
<div class="toc-container">
<h3 id="sidebar-heading" class="toc-heading"><em>Middlewares</em></h3>
<button id="menu-toggle" title="show express middlewares">Middlewares <span>&#x25BA;</span></button>
<ul id="menu">
{% if page.title contains 'middleware' %}
{% capture readme %}{% include mw-list.md %}{% endcapture %}
{% else %}
{% capture readme %}{% include util-list.md %}{% endcapture %}
{% endif %}
{{ readme | markdownify }}
</ul>
</div>
<div id="middleware-content">
</nav>

<main id="page-doc">
{% if page.module == 'mw-home' %}
{{content}}

Expand All @@ -29,5 +36,4 @@
<h3>ERROR: No source specified for README {{page.module}}</h3>
{% endif %}

</div>
</div>
</main>
30 changes: 18 additions & 12 deletions _layouts/page.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,23 +10,29 @@
<body class="non-en-doc">
{% endif %}

<section class="page content">
{% include header.html %}

{% include header.html %}
<div id="overlay"></div>

<div id="overlay"></div>

{% if page.lang != 'en' %}
<div id="i18n-notice-box" class="doc-box doc-notice">
{% if page.lang != 'en' %}
<div id="i18n-notice-box" class="doc-box doc-notice">
{% include i18n-notice.html %}
</div>
{% endif %}
<div id="page-doc" markdown="1">
{{ content }}
</div>
</section>
{% endif %}

{% if page.layout == 'middleware' %}
<div class="content flex-row-content">
{{ content }}
</div>
{% else %}
<div class="content">
<main>
{{ content }}
</main>
</div>
{% endif %}

{% include footer.html %}
{% include footer.html %}

</body>

Expand Down
22 changes: 12 additions & 10 deletions _layouts/post.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,15 +3,17 @@
{% include head.html %}

<body>
{% include header.html %}
<div id="overlay"></div>

<section class="content">

{% include header.html %}

{% include blog/posts-menu.md %}

<div id="overlay"></div>
<div id="blog-doc" markdown="1">
<div class="content flex-row-content">
<nav aria-labelledby="sidebar-heading">
<div class="toc-container">
<h3 id="sidebar-heading" class="toc-heading"><em>Blog posts</em></h3>
{% include blog/posts-menu.md %}
</div>
</nav>
<main id="blog-doc" markdown="1">
{% if page.title %}
<h1>{{page.title}}</h1>
{% endif %}
Expand All @@ -25,8 +27,8 @@ <h2>{{page.sub_title}}</h2>
<div class="blog-date">{{page.date| date: "%d %b %Y" }}</div>
</div>
{{ content }}
</div>
</section>
</main>
</div>

{% include footer.html %}

Expand Down
Loading