[clang-doc] Add Mustache template assets #138059
Open
+931
−0
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This patch adds the various assets used with the HTML Mustache backend. This includes templates for a variety of different language constructs, as well as the CSS. Split from #133161. Co-authored-by: Peter Chou <[email protected]>
|
Warning This pull request is not mergeable via GitHub because a downstack PR is open. Once all requirements are satisfied, merge this PR as a stack on Graphite.
This stack of pull requests is managed by Graphite. Learn more about stacking. |
This was referenced May 1, 2025
|
@llvm/pr-subscribers-clang-tools-extra Author: Paul Kirth (ilovepi) ChangesThis patch adds the various assets used with the HTML Mustache backend. Co-authored-by: Peter Chou <[email protected]> Patch is 26.24 KiB, truncated to 20.00 KiB below, full version: https://github.com/llvm/llvm-project/pull/138059.diff 8 Files Affected:
diff --git a/clang-tools-extra/clang-doc/assets/clang-doc-mustache.css b/clang-tools-extra/clang-doc/assets/clang-doc-mustache.css
new file mode 100644
index 0000000000000..a885a36cb4a3d
--- /dev/null
+++ b/clang-tools-extra/clang-doc/assets/clang-doc-mustache.css
@@ -0,0 +1,471 @@
+/* css for clang-doc mustache backend */
+@import "https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap";
+
+*,*::before *::after {
+ box-sizing:border-box
+}
+* {
+ margin:0;
+ padding:0
+}
+ol,
+ul {
+ list-style:none
+}
+img,
+picture,
+svg,
+video {
+ display:block;
+ max-width:100%
+}
+
+* {
+ --brand-light:#ce6300;
+ --text1-light:#000000;
+ --text2-light:#333333;
+ --surface1-light:#ffffff;
+ --surface2-light:#f5f5f5;
+ --brand-dark:#de9853;
+ --text1-dark:#ffffff;
+ --text2-dark:#cccccc;
+ --surface1-dark:#161212;
+ --surface2-dark:#272424
+}
+
+:root {
+ color-scheme:light;
+ --brand:var(--brand-light);
+ --text1:var(--text1-light);
+ --text2:var(--text2-light);
+ --text1-inverse:var(--text1-dark);
+ --text2-inverse:var(--text2-dark);
+ --surface1:var(--surface1-light);
+ --surface2:var(--surface2-light)
+}
+
+@media(prefers-color-scheme:dark) {
+ :root {
+ color-scheme:dark;
+ --brand:var(--brand-dark);
+ --text1:var(--text1-dark);
+ --text2:var(--text2-dark);
+ --text1-inverse:var(--text1-light);
+ --text2-inverse:var(--text2-light);
+ --surface1:var(--surface1-dark);
+ --surface2:var(--surface2-dark)
+ }
+}
+
+[color-scheme=light] {
+ color-scheme:light;
+ --brand:var(--brand-light);
+ --text1:var(--text1-light);
+ --text2:var(--text2-light);
+ --text1-inverse:var(--text1-dark);
+ --text2-inverse:var(--text2-dark);
+ --surface1:var(--surface1-light);
+ --surface2:var(--surface2-light)
+}
+
+[color-scheme=dark] {
+ color-scheme:dark;
+ --brand:var(--brand-dark);
+ --text1:var(--text1-dark);
+ --text2:var(--text2-dark);
+ --text1-inverse:var(--text1-light);
+ --text2-inverse:var(--text2-light);
+ --surface1:var(--surface1-dark);
+ --surface2:var(--surface2-dark)
+}
+
+html {
+ background-color:var(--surface1)
+}
+
+html, body {
+ min-height: 100vh;
+ margin: 0;
+ padding: 0;
+ width: 100%;
+}
+
+.container {
+ display: flex;
+ margin-top: 60px;
+ height: calc(100% - 60px);
+ box-sizing: border-box;
+}
+
+body, html {
+ font-family:Inter,sans-serif;
+ margin: 0;
+ padding: 0;
+ height: 100%;
+}
+
+/* Navbar Styles */
+.navbar {
+ background-color: var(--surface2);
+ border-bottom: 1px solid var(--text2);
+ position: fixed;
+ width: 100%;
+ top: 0;
+ left: 0;
+ height: 60px; /* Adjust as needed */
+ color: white;
+ display: flex;
+ align-items: center;
+ padding: 0 20px;
+ box-sizing: border-box;
+ z-index: 1000;
+}
+
+
+.navbar__container {
+ display:flex;
+ justify-content:space-between;
+ align-items:center;
+ padding:1rem;
+ color:var(--text1);
+ max-width:2048px;
+ margin:auto
+}
+.navbar__logo {
+ display:flex;
+ align-items:center;
+ height:40px
+}
+.navbar__logo a {
+ display:flex;
+ align-items:center;
+ text-decoration:none;
+ height:100%
+}
+.navbar__logo img {
+ height:100%;
+ width:auto
+}
+.navbar__toggle {
+ background:0 0;
+ color:var(--text2);
+ border:none;
+ cursor:pointer;
+ font-size:1.5rem;
+ width:2.5rem;
+ height:2.5rem;
+ margin-left:auto
+}
+.navbar__toggle:hover {
+ color:var(--text1)
+}
+@media(min-width:769px) {
+ .navbar__toggle {
+ display:none
+ }
+}
+.navbar__menu {
+ display:flex;
+ justify-content:space-between;
+ align-items:center;
+ list-style:none;
+ margin:0;
+ padding:0;
+ gap:.25rem;
+ margin-left:auto
+}
+
+@media(max-width:768px) {
+ .navbar__menu {
+ flex-direction:column;
+ justify-content:flex-start;
+ width:100%;
+ background-color:var(--surface2);
+ position:fixed;
+ top:0;
+ left:0;
+ right:0;
+ bottom:0;
+ padding:1.5rem;
+ transform:translateX(100%);
+ transition:transform .5s ease-in-out
+ }
+}
+@media(max-width:768px) {
+ .navbar__menu.active {
+ transform:translateX(0)
+ }
+}
+.navbar__close {
+ background:0 0;
+ border:none;
+ cursor:pointer;
+ font-size:1.5rem;
+ color:var(--text2);
+ margin-left:auto
+}
+.navbar__close:hover {
+ color:var(--text1)
+}
+
+@media(min-width:769px) {
+ .navbar__close {
+ display:none
+ }
+}
+.navbar__links {
+ display:flex;
+ gap:1rem;
+ align-items:center;
+ margin:0;
+ padding:0
+}
+
+@media(max-width:768px) {
+ .navbar__links {
+ flex-direction:column
+ }
+}
+
+.navbar__item {
+ list-style-type:none
+}
+
+.navbar__link {
+ color:var(--text2);
+ text-decoration:none;
+ padding:.5rem
+}
+
+.navbar__link:hover {
+ color:var(--text1)
+}
+
+.navbar__theme-toggle-button {
+ background:0 0;
+ color:var(--text2);
+ border:none;
+ cursor:pointer;
+ font-size:1.5rem;
+ width:2.5rem;
+ height:2.5rem
+}
+
+.navbar__theme-toggle-button:hover {
+ color:var(--text1)
+}
+
+.hero__container {
+ margin-top:1rem;
+ display:flex;
+ justify-content:center;
+ align-items:center;
+ gap:2rem
+}
+
+.hero__title {
+ font-size:2.5rem;
+ margin-bottom:.5rem
+}
+
+.hero__title-large {
+ font-size:3rem
+}
+
+@media(max-width:768px) {
+ .hero__title-large {
+ font-size:2.5rem
+ }
+}
+
+@media(max-width:480px) {
+ .hero__title-large {
+ font-size:2rem
+ }
+}
+
+@media(max-width:768px) {
+ .hero__title {
+ font-size:2rem
+ }
+}
+
+@media(max-width:480px) {
+ .hero__title {
+ font-size:1.75rem
+ }
+}
+
+.hero__subtitle {
+ font-size:1.25rem;
+ font-weight:500
+}
+
+@media(max-width:768px) {
+ .hero__subtitle {
+ font-size:1rem
+ }
+}
+
+@media(max-width:480px) {
+ .hero__subtitle {
+ font-size:.875rem
+ }
+}
+
+.section-container {
+ max-width: 2048px;
+ margin-left:auto;
+ margin-right:auto;
+ margin-top:0;
+ margin-bottom: 1rem;
+ padding:1rem 2rem
+}
+
+@media(max-width:768px) {
+ .section-container {
+ padding:1rem
+ }
+}
+
+.section-container h2 {
+ font-size:1.5rem;
+ margin-bottom:1rem;
+ color:var(--brand);
+ border-bottom: 1px solid var(--text2);
+}
+
+@media(max-width:768px) {
+ .section-container h2 {
+ font-size:1.25rem
+ }
+}
+
+.section-container p {
+ font-size:1rem;
+ line-height:1.5
+}
+
+@media(max-width:768px) {
+ .section-container p {
+ font-size:.875rem
+ }
+}
+
+.home__row {
+ display:grid;
+ grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
+ gap:2rem
+}
+
+.table-wrapper {
+ display:flex;
+ flex-direction:column;
+ padding:1rem;
+ border-collapse: collapse; /* Ensures there are no gaps between cells */
+}
+
+.table-wrapper th, .table-wrapper td {
+ padding: 0.5rem 1rem; /* Adds padding inside the cells */
+ border:1px solid var(--text1);
+ text-align: left;
+}
+
+.block-command-command {
+ font-weight: bold;
+}
+
+.code-clang-doc {
+ font-size: 1.1rem;
+}
+
+.delimiter-container {
+ padding: 0.5rem 1rem;
+ margin-bottom:1rem;
+}
+
+.resizer {
+ width: 5px;
+ cursor: col-resize;
+ background-color: var(--text2);
+}
+
+.resizer:hover {
+ background-color: var(--text2-inverse);
+}
+
+.sidebar {
+ width: 250px;
+ top: 0;
+ left: 0;
+ height: 100%;
+ position: fixed;
+ background-color: var(--surface1);
+ display: flex;
+ border-left: 1px solid var(--text2);
+ flex-direction: column;
+ overflow-y: auto;
+ scrollbar-width: thin;
+}
+
+.sidebar h2 {
+ margin-top: 0;
+ margin-bottom: 20px;
+ padding: 10px;
+}
+
+.sidebar ul {
+ width: 100%;
+ padding: 0;
+ list-style-type: none;
+}
+
+.sidebar ul li {
+ padding-right: 1rem;
+ padding-left: 2rem;
+ padding-top: 0.25rem;
+ padding-bottom: 0.25rem;
+}
+
+.sidebar-section {
+ font-size:1.5rem;
+ font-weight: bold;
+ margin-bottom: 1rem;
+ padding: 3rem;
+}
+.sidebar-section a {
+ color: var(--brand)
+}
+
+/* Content */
+.content {
+ background-color: var(--text1-inverse);
+ padding: 20px;
+ left: 250px;
+ position: relative;
+ width: calc(100% - 250px);
+ height: 100vh;
+}
+
+.sidebar-item {
+ color: var(--text1);
+}
+
+.sidebar-item-container:hover {
+ width: 100%;
+ background-color: grey;
+}
+
+.sidebar-item-container:hover a {
+ width: 100%;
+ color: var(--text1-inverse);
+}
+
+.class-container {
+ padding: 0.5rem 1rem;
+}
+
+a, a:visited, a:hover, a:active {
+ text-decoration: none;
+ color: inherit;
+}
diff --git a/clang-tools-extra/clang-doc/assets/class-template.mustache b/clang-tools-extra/clang-doc/assets/class-template.mustache
new file mode 100644
index 0000000000000..7ce51c6e16211
--- /dev/null
+++ b/clang-tools-extra/clang-doc/assets/class-template.mustache
@@ -0,0 +1,227 @@
+{{!
+ Part of the LLVM Project, under the Apache License v2.0 with LLVM Exceptions.
+ See https://llvm.org/LICENSE.txt for license information.
+ SPDX-License-Identifier: Apache-2.0 WITH LLVM-exception
+
+ This file defines the template for classes/struct
+}}
+<!DOCTYPE html>
+<html lang="en-US">
+<head>
+ <meta charset="utf-8"/>
+ <title>{{Name}}</title>
+ {{#Stylesheets}}
+ <link rel="stylesheet" type="text/css" href="{{.}}"/>
+ {{/Stylesheets}}
+ {{#Scripts}}
+ <script src="{{.}}"></script>
+ {{/Scripts}}
+ {{! Highlight.js dependency for syntax highlighting }}
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/default.min.css">
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/cpp.min.js"></script>
+</head>
+<body>
+<nav class="navbar">
+ <div class="navbar__container">
+ {{#ProjectName}}
+ <div class="navbar__logo">
+ {{ProjectName}}
+ </div>
+ {{/ProjectName}}
+ <div class="navbar__menu">
+ <ul class="navbar__links">
+ <li class="navbar__item">
+ <a href="/" class="navbar__link">Namespace</a>
+ </li>
+ <li class="navbar__item">
+ <a href="/" class="navbar__link">Class</a>
+ </li>
+ </ul>
+ </div>
+ </div>
+</nav>
+<main>
+ <div class="container">
+ <div class="sidebar">
+ <h2>{{RecordType}} {{Name}}</h2>
+ <ul>
+ {{#PublicMembers}}
+ <li class="sidebar-section">
+ <a class="sidebar-item" href="#PublicMethods">Public Members</a>
+ </li>
+ <ul>
+ {{#Obj}}
+ <li class="sidebar-item-container">
+ <a class="sidebar-item" href="#{{Name}}">{{Name}}</a>
+ </li>
+ {{/Obj}}
+ </ul>
+ {{/PublicMembers}}
+ {{#ProtectedMembers}}
+ <li class="sidebar-section">
+ <a class="sidebar-item" href="#PublicMethods">Protected Members</a>
+ </li>
+ <ul>
+ {{#Obj}}
+ <li class="sidebar-item-container">
+ <a class="sidebar-item" href="#{{Name}}">{{Name}}</a>
+ </li>
+ {{/Obj}}
+ </ul>
+ {{/ProtectedMembers}}
+ {{#PublicFunction}}
+ <li class="sidebar-section">
+ <a class="sidebar-item" href="#PublicMethods">Public Method</a>
+ </li>
+ <ul>
+ {{#Obj}}
+ <li class="sidebar-item-container">
+ <a class="sidebar-item" href="#{{ID}}">{{Name}}</a>
+ </li>
+ {{/Obj}}
+ </ul>
+ {{/PublicFunction}}
+ {{#ProtectedFunction}}
+ <li class="sidebar-section">
+ <a class="sidebar-item" href="#ProtectedFunction">Protected Method</a>
+ </li>
+ <ul>
+ {{#Obj}}
+ <li class="sidebar-item-container">
+ <a class="sidebar-item" href="#{{ID}}">{{Name}}</a>
+ </li>
+ {{/Obj}}
+ </ul>
+ {{/ProtectedFunction}}
+ {{#Enums}}
+ <li class="sidebar-section">
+ <a class="sidebar-item" href="#Enums">Enums</a>
+ </li>
+ <ul>
+ {{#Obj}}
+ <li class="sidebar-item-container">
+ <a class="sidebar-item" href="#{{ID}}">{{EnumName}}</a>
+ </li>
+ {{/Obj}}
+ </ul>
+ {{/Enums}}
+ {{#Typedef}}
+ <li class="sidebar-section">Typedef</li>
+ {{/Typedef}}
+ {{#Record}}
+ <li class="sidebar-section">
+ <a class="sidebar-item" href="#Classes">Inner Classes</a>
+ </li>
+ <ul>
+ {{#Links}}
+ <li class="sidebar-item-container">
+ <a class="sidebar-item" href="#{{ID}}">{{Name}}</a>
+ </li>
+ {{/Links}}
+ </ul>
+ {{/Record}}
+ </ul>
+ </div>
+ <div class="resizer" id="resizer"></div>
+ <div class="content">
+ <section class="hero section-container">
+ <div class="hero__title">
+ <h1 class="hero__title-large">{{RecordType}} {{Name}}</h1>
+ {{#RecordComments}}
+ <div class="hero__subtitle">
+ {{>Comments}}
+ </div>
+ {{/RecordComments}}
+ </div>
+ </section>
+ {{#PublicMembers}}
+ <section id="PublicMembers" class="section-container">
+ <h2>Public Members</h2>
+ <div>
+ {{#Obj}}
+ <div id="{{Name}}" class="delimiter-container">
+ <pre>
+<code class="language-cpp code-clang-doc" >{{Type}} {{Name}}</code>
+ </pre>
+ {{#MemberComments}}
+ <div>
+ {{>Comments}}
+ </div>
+ {{/MemberComments}}
+ </div>
+ {{/Obj}}
+ </div>
+ </section>
+ {{/PublicMembers}}
+ {{#ProtectedMembers}}
+ <section id="ProtectedMembers" class="section-container">
+ <h2>Protected Members</h2>
+ <div>
+ {{#Obj}}
+ <div id="{{Name}}" class="delimiter-container">
+ <pre>
+<code class="language-cpp code-clang-doc" >{{Type}} {{Name}}</code>
+ </pre>
+ {{#MemberComments}}
+ <div>
+ {{>Comments}}
+ </div>
+ {{/MemberComments}}
+ </div>
+ {{/Obj}}
+ </div>
+ </section>
+ {{/ProtectedMembers}}
+ {{#PublicFunction}}
+ <section id="PublicMethods" class="section-container">
+ <h2>Public Methods</h2>
+ <div>
+ {{#Obj}}
+{{>FunctionPartial}}
+ {{/Obj}}
+ </div>
+ </section>
+ {{/PublicFunction}}
+ {{#ProtectedFunction}}
+ <section id="ProtectedFunction" class="section-container">
+ <h2>Protected Methods</h2>
+ <div>
+ {{#Obj}}
+{{>FunctionPartial}}
+ {{/Obj}}
+ </div>
+ </section>
+ {{/ProtectedFunction}}
+ {{#Enums}}
+ <section id="Enums" class="section-container">
+ <h2>Enumerations</h2>
+ <div>
+ {{#Obj}}
+{{>EnumPartial}}
+ {{/Obj}}
+ </div>
+ </section>
+ {{/Enums}}
+ {{#Record}}
+ <section id="Classes" class="section-container">
+ <h2>Inner Classes</h2>
+ <ul class="class-container">
+ {{#Links}}
+ <li id="{{ID}}" style="max-height: 40px;">
+<a href="{{Link}}"><pre><code class="language-cpp code-clang-doc" >class {{Name}}</code></pre></a>
+ </li>
+ {{/Links}}
+ </ul>
+ </section>
+ {{/Record}}
+ {{#Typedef}}
+ <section class="section-container">
+ <h2 id="Enums">Enums</h2>
+ </section>
+ {{/Typedef}}
+ </div>
+ </div>
+</main>
+</body>
+</html>
\ No newline at end of file
diff --git a/clang-tools-extra/clang-doc/assets/comments-template.mustache b/clang-tools-extra/clang-doc/assets/comments-template.mustache
new file mode 100644
index 0000000000000..f6b62b4407b9c
--- /dev/null
+++ b/clang-tools-extra/clang-doc/assets/comments-template.mustache
@@ -0,0 +1,34 @@
+{{!
+ Part of the LLVM Project, under the Apache License v2.0 with LLVM Exceptions.
+ See https://llvm.org/LICENSE.txt for license information.
+ SPDX-License-Identifier: Apache-2.0 WITH LLVM-exception
+
+ This file defines templates for generating comments
+}}
+{{#FullComment}}
+ {{#Children}}
+ {{>Comments}}
+ {{/Children}}
+{{/FullComment}}
+{{#ParagraphComment}}
+ {{#Children}}
+ {{>Comments}}
+ {{/Children}}
+{{/ParagraphComment}}
+{{#BlockCommandComment}}
+ <div class="block-command-comment__command">
+ <div class="block-command-command">
+ {{Command}}
+ </div>
+ <div>
+ {{#Children}}
+ {{>Comments}}
+ {{/Children}}
+ </div>
+ </div>
+{{/BlockCommandComment}}
+{{#TextComment}}
+ <div>
+ <p>{{TextComment}}</p>
+ </div>
+{{/TextComment}}
\ No newline at end of file
diff --git a/clang-tools-extra/clang-doc/assets/enum-template.mustache b/clang-tools-extra/clang-doc/assets/enum-template.mustache
new file mode 100644
index 0000000000000..d63bf258f8f0f
--- /dev/null
+++ b/clang-tools-extra/clang-doc/assets/enum-template.mustache
@@ -0,0 +1,47 @@
+{{!
+ Part of the LLVM Project, under the Apache License v2.0 with LLVM Exceptions.
+ See https://llvm.org/LICENSE.txt for license information.
+ SPDX-License-Identifier: Apache-2.0 WITH LLVM-exception
+
+ This file defines the template for enums
+}}
+<div id="{{ID}}" class="delimiter-container">
+ <div>
+ <pre>
+ <code class="language-cpp code-clang-doc">
+{{EnumName}}
+ </code>
+ </pre>
+ </div>
+ {{! Enum Values }}
+ <table class="table-wrapper">
+ <tbody>
+ <tr>
+ <th>Name</th>
+ <th>Value</th>
+ {{#HasComment}}
+ <th>Comment</th>
+ {{/HasComment}}
+ </tr>
+ {{#EnumValues}}
+ <tr>
+ <td>{{Name}}</td>
+ <td>{{Value}}</td>
+ {{#EnumValueComments}}
+ <td>{{>Comments}}</td>
+ {{/EnumValueComments}}
+ </tr>
+ {{/EnumValues}}
+ </tbody>
+ </table>
+ {{#EnumComments}}
+ <div>
+ {{>Comments}}
+ </div>
+ {{/EnumComments}}
+ {{#Location}}
+ <div>
+ Defined at line {{LineNumber}} of file...
[truncated]
|
|
I appreciate this is a lot of CSS and templates. I have this here in the stack, so that hopefully I can leverage these to bootstrap unittests for the HTMLMustacheGenerator in subsequent patches. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This patch adds the various assets used with the HTML Mustache backend.
This includes templates for a variety of different language constructs,
as well as the CSS. Split from #133161.
Co-authored-by: Peter Chou [email protected]