fork/Graphite
1
0
Fork 0
mirror of https://github.com/GraphiteEditor/Graphite.git synced 2026-09-15 14:18:04 +08:00
Code Issues Packages Projects Releases Wiki Activity

Add the auto-generated node catalog to the website's user manual (#3662)

Browse Source 
* Generate the MVP node catalog in the manual (with some placeholders)

* Implement nearly the rest of everything

* Move to the tools directory and make it generate nicer default values

* Add category descriptions

* Organize file structure and improve type naming

* Improve book table of contents code

* Add collapsing chapter navigation to the book template

* Add to build workflow

* Clean up site structure
This commit is contained in:
Keavon Chambers
2026-01-20 22:52:03 -08:00
committed by GitHub
parent 5543afd44b
commit 7af60e02a3
61 changed files with 1131 additions and 384 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
website/sass/base.scss
View File

@@ -375,7 +375,7 @@ body > .page {
// ELEMENT SPACING RULES
// =====================
:is(h1, h2, h3, h4, article > :first-child, details > summary) ~ :is(p, ul, ol, ol li p, img, a:has(> img:only-child)),
:is(h1, h2, h3, h4, article > :first-child, details > summary) ~ :is(p, ul, ol, ol li p, img, details, a:has(> img:only-child)),
:is(h1, h2, h3, h4, article > :first-child) ~ :is(ul, ol) li p + img,
:is(h1, h2, h3, h4, p) ~ .feature-icons,
p ~ :is(h1, h2, h3, h4, details summary, blockquote, .image-comparison, .video-background, .youtube-embed),
@@ -429,12 +429,12 @@ h6 {
}
h2 {
font-size: calc(1rem * 16 / 9);
font-size: 1.75rem;
font-weight: 700;
}
h3 {
font-size: calc(1rem * 4 / 3);
font-size: 1.25rem;
}
h4,
@@ -496,6 +496,10 @@ table {
margin: 0;
padding: 20px;
p {
text-align: left;
}
&:first-child {
padding-left: 10px;
}

15
website/sass/layout/reading-material.scss
View File

@@ -1,21 +1,11 @@
.reading-material.reading-material {
font-size: 16px;
line-height: 1.625;
max-width: var(--max-width-reading-material);
article {
width: 100%;
h2 {
margin-top: 80px;
}
h3 {
margin-top: 40px;
}
h4 {
margin-top: 20px;
}
h1,
h2,
h3,
@@ -23,6 +13,7 @@
h5,
h6 {
display: block;
margin-top: 80px;
&:first-child {
margin-top: 0;

1
website/sass/page/developer-guide-editor-structure.scss → website/sass/page/contributor-guide/editor-structure.scss
View File

@@ -1,6 +1,5 @@
.structure-outline {
font-family: monospace;
font-size: 18px;
line-height: 1.5;
margin-top: 20px;

43
website/sass/page/donate.scss
View File

@@ -107,46 +107,3 @@
background-color: var(--color-ale);
margin-top: 0;
}
// .fundraising {
// margin-top: 20px;
// width: 100%;
//
// .fundraising-bar {
// width: 100%;
// height: 32px;
// border-radius: 10000px;
// background: var(--color-fog);
// overflow: hidden;
//
// .fundraising-bar-progress {
// width: calc(var(--fundraising-percent) - (4px * 2) - (32px - 4px * 2));
// padding-left: calc(32px - 4px * 2);
// height: calc(100% - 4px * 2);
// margin: 4px;
// border-radius: 10000px;
// background: linear-gradient(to right, var(--color-navy), var(--color-crimson));
// transition: opacity 1s, width 2s;
// }
// }
//
// .goal-metrics {
// display: flex;
// justify-content: space-between;
// font-weight: 800;
// margin-top: 8px;
// margin-left: 20px;
// width: calc(100% - 40px);
// > span {
// transition: opacity 1s;
// }
// }
//
// &.fundraising.loading {
// .goal-metrics > span,
// .fundraising-bar .fundraising-bar-progress {
// opacity: 0;
// }
// }
// }

3
website/sass/page/user-manual/node-catalog.scss Normal file
View File

@@ -0,0 +1,3 @@
table tr td:first-child a {
white-space: nowrap;
}

14
website/sass/page/user-manual/node-category.scss Normal file
View File

@@ -0,0 +1,14 @@
#nodes + table tr {
th:last-child {
width: 0;
white-space: nowrap;
}
td:last-child {
width: 0;
code {
white-space: nowrap;
}
}
}

14
website/sass/page/user-manual/node.scss Normal file
View File

@@ -0,0 +1,14 @@
:is(#context, #inputs, #outputs) + table tr {
th:is(:first-child, :nth-child(3)) {
width: 0;
white-space: nowrap;
}
td:is(:first-child, :nth-child(3)) {
width: 0;
code {
white-space: nowrap;
}
}
}

122
website/sass/template/book.scss
View File

@@ -43,12 +43,12 @@
justify-content: space-between;
width: 100%;
gap: 20px;
a {
display: flex;
align-items: center;
gap: 20px;
svg {
fill: var(--color-navy);
flex: 0 0 auto;
@@ -77,7 +77,7 @@
// Overlaid fold-out menu for chapter selection
@media screen and (max-width: 1000px) {
gap: 0;
.chapters {
position: sticky;
width: 0;
@@ -95,7 +95,7 @@
left: 0;
}
}
.wrapper-outer {
position: absolute;
background: white;
@@ -110,8 +110,8 @@
border-right: var(--border-thickness) solid var(--color-walnut);
box-sizing: border-box;
transition: left 0.25s ease-in-out;
left: calc(-1 * (var(--aside-width) + 10px));
width: var(--aside-width);
left: calc(-1 * (Min(var(--aside-width), 100vw) + 10px));
width: Min(var(--aside-width), 100vw);
&::after {
content: "";
@@ -128,8 +128,9 @@
overflow-y: auto;
height: 100%;
padding-right: var(--page-edge-padding);
margin-left: -24px;
ul:first-of-type {
> ul:first-of-type {
margin-top: calc(120 * var(--variable-px) + var(--align-with-article-title-letter-cap-heights));
}
@@ -173,68 +174,107 @@
align-self: flex-start;
overflow-y: auto;
top: 0;
width: var(--aside-width);
width: Min(var(--aside-width), 100vw);
max-height: 100vh;
margin-top: -40px;
margin-top: calc(-40 * var(--variable-px));
flex: 0 1 auto;
--level-indent: 0.75rem;
&.contents > ul,
.wrapper-inner > ul {
&:first-of-type {
margin-top: calc(40px + var(--align-with-article-title-letter-cap-heights));
margin-top: calc(40 * var(--variable-px) + var(--align-with-article-title-letter-cap-heights));
}
&:last-of-type {
margin-bottom: calc(40 * var(--variable-px));
}
> ul {
margin-left: 0;
}
}
&.contents > ul > ul :is(ul, li),
.wrapper-inner > ul > ul > ul,
.wrapper-inner > ul > ul > ul :is(ul, li) {
margin-top: 0.5rem;
}
ul {
list-style: none;
padding: 0;
margin: 0;
margin-top: 40px;
&,
ul,
li {
margin-top: calc(40 * var(--variable-px));
}
ul {
margin-top: 0;
margin-left: 1em;
margin-left: var(--level-indent);
}
ul {
margin-left: 2em;
ul {
margin-left: 3em;
ul {
margin-left: 4em;
ul {
margin-left: 5em;
}
}
}
}
li:has(> label > input:not(:checked)) + ul {
display: none;
}
li {
margin-top: 0.5em;
a {
color: var(--color-walnut);
&:hover {
color: var(--color-crimson);
}
}
font-size: 0;
&:not(.title) a {
text-decoration: none;
}
&.title,
&.chapter {
font-weight: 700;
}
label {
display: inline-block;
position: relative;
user-select: none;
vertical-align: bottom;
margin-right: 4px;
width: 20px;
height: calc(1rem * 1.5);
&:has(input):hover {
background: var(--color-fog);
}
&:has(input)::before {
content: "";
background: url('data:image/svg+xml;utf8,\
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10"><polygon fill="%2316323f" points="4,0 1,0 6,5 1,10 4,10 9,5 4,0" /></svg>\
');
position: absolute;
margin: auto;
inset: 0;
width: 10px;
height: 10px;
}
&:has(input:checked)::before {
transform: rotate(90deg);
}
input {
display: none;
}
}
a {
color: var(--color-walnut);
font-size: 1rem;
&:hover {
color: var(--color-crimson);
text-decoration: underline;
}
}
}
}
@@ -245,9 +285,7 @@
}
ul a {
display: block;
padding-left: 1em;
text-indent: -1em;
display: inline-block;
}
}