Skip to content

Commit

Permalink
Page load improvements (#2007)
Browse files Browse the repository at this point in the history
  • Loading branch information
@liamcmitchell
liamcmitchell authored Jan 7, 2025
1 parent d9eaba3 commit c7bae84
Show file tree
Hide file tree
Showing 28 changed files with 458 additions and 733 deletions.
16 changes: 16 additions & 0 deletions assets/build/build.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,6 +71,22 @@ Promise.all(formatters.map(async ({formatter, ...options}) => {
}
})

// Load html templates.
build.onLoad({
filter: /\.html$/
}, async ({ path: filename }) => {
try {
const source = await fs.readFile(filename, 'utf-8')
// Remove newlines and leading whitespace.
// Shouldn't have any effect on content.
const compressed = source.replace(/\n\s*/g, '')
const contents = `export default ${JSON.stringify(compressed)}`
return { contents }
} catch (error) {
return { errors: [{ text: error.message }] }
}
})

// Generate docs with new assets (watch mode only).
if (watchMode) {
build.onEnd(async result => {
Expand Down
203 changes: 82 additions & 121 deletions assets/css/sidebar.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -127,7 +127,7 @@
padding: 0;
}

.sidebar .sidebar-list-nav li button {
.sidebar .sidebar-list-nav button {
background: none;
border: 0;
border-radius: 0;
Expand All @@ -142,29 +142,30 @@
transition: all 150ms;
}

.sidebar .sidebar-list-nav li:is(.selected) button {
background-color: var(--sidebarBackground);
border-top: var(--navTabBorderWidth) solid var(--sidebarLanguageAccentBar);
}

.sidebar .sidebar-list-nav li:not(.selected) button {
.sidebar .sidebar-list-nav button {
border-top: var(--navTabBorderWidth) solid var(--sidebarHeader);
}

.sidebar .sidebar-list-nav li:is(:hover):not(.selected) button {
.sidebar .sidebar-list-nav button:not([aria-selected]):hover {
background-color: var(--sidebarInactiveItemMarker);
border-top: var(--navTabBorderWidth) solid var(--sidebarInactiveItemBorder);
color: var(--sidebarAccentMain);
transition: all 150ms;
}

.sidebar .sidebar-list-nav button[aria-selected] {
background-color: var(--sidebarBackground);
border-top: var(--navTabBorderWidth) solid var(--sidebarLanguageAccentBar);
}

.sidebar .sidebar-tabpanel {
flex: 1 1 0.01%;
overflow-y: auto;
overscroll-behavior: contain;
position: relative;
-webkit-overflow-scrolling: touch;
margin-top: 12px;
padding-top: 12px;
scroll-padding-top: 40px;
}

.sidebar .full-list {
Expand All @@ -174,127 +175,106 @@
}

.sidebar .full-list :is(li, a) {
display: block;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}

.sidebar .full-list li {
padding: 0;
margin-right: 30px;
line-height: 27px;
white-space: nowrap;
}

.sidebar .full-list li.docs {
margin-right: 0;
.sidebar .full-list li.group {
text-transform: uppercase;
font-weight: bold;
font-size: 0.8em;
margin: 1.5em 0 0;
line-height: 1.8em;
color: var(--sidebarSubheadings);
padding-left: 15px;
}

.sidebar .full-list li.open > ul {
display: block;
margin-left: 10px;
.sidebar .full-list li.nesting-context {
font-weight: bold;
font-size: 0.9em;
line-height: 1.8em;
color: var(--sidebarSubheadings);
margin-top: 10px;
padding-left: 15px;
}

.sidebar .full-list a {
margin-right: 30px;
padding: 3px 0 3px 15px;
color: var(--sidebarItem);
}

.sidebar .full-list a[aria-selected] {
color: var(--sidebarActiveItem);
}

.sidebar .full-list li a.expand + button.icon-expand {
.sidebar .full-list button {
appearance: none;
background-color: transparent;
border: 0;
padding: 0;
cursor: pointer;
color: inherit;
margin-right: 10px;
width: 20px;
text-align: center;
font-size: calc(1.2 * var(--sidebarFontSize));
line-height: var(--sidebarLineHeight);
position: absolute;
display: flex;
right: 0;
transform: translateY(calc(-100% - 4px));
display: block;
right: 10px;
transform: translateY(-100%);
}

.sidebar .full-list a[aria-selected] + button {
color: var(--sidebarActiveItem);
}

.sidebar .full-list li a + button.icon-expand:after {
.sidebar .full-list button:after {
font-family: remixicon;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

.sidebar .full-list li a.expand + button.icon-expand:after {
content: var(--icon-arrow-down-s);
}

.sidebar .full-list li.open > a.expand + button.icon-expand:after {
.sidebar .full-list button[aria-expanded=true]:after {
content: var(--icon-arrow-up-s);
}

.sidebar .full-list li.docs > a + button.icon-expand {
margin-right: 12px;
font-size: var(--sidebarFontSize);
line-height: var(--sidebarFontSize);
transform: translateY(calc(-100% - 5px));
}

.sidebar .full-list li.docs > a + button.icon-expand:after {
content: var(--icon-add);
}

.sidebar .full-list li.docs.open > a + button.icon-expand:after {
content: var(--icon-subtract);
}

.sidebar .full-list li.nesting-context {
font-weight: bold;
font-size: 0.9em;
line-height: 1.8em;
color: var(--sidebarSubheadings);
margin-top: 10px;
padding-left: 15px;
.sidebar .full-list ul {
display: none;
margin: 10px 0 10px 10px;
padding: 0;
}

.sidebar .full-list li.group {
text-transform: uppercase;
font-weight: bold;
font-size: 0.8em;
margin: 1.5em 0 0;
line-height: 1.8em;
color: var(--sidebarSubheadings);
padding-left: 15px;
.sidebar .full-list button[aria-expanded=true] + ul {
display: block;
}

.sidebar .full-list li a {
padding: 3px 0 3px 15px;
color: var(--sidebarItem);
}
/* Level 1 */

.sidebar .full-list > li > a {
display: block;
width: 100%;
height: 27px;
line-height: var(--sidebarLineHeight);
}

.sidebar .full-list li .current-section > a {
color: var(--sidebarActiveItem);
}

.sidebar .full-list li .current-section > a + button.icon-expand {
color: var(--sidebarActiveItem);
}

.sidebar .full-list > li > a:hover {
border-left: 3px solid var(--sidebarLanguageAccentBar);
padding-left: 12px;
}

.sidebar .full-list > li.current-page > a {
color: var(--sidebarActiveItem);
.sidebar .full-list > li > a[aria-selected] {
border-left: 3px solid var(--sidebarLanguageAccentBar);
padding-left: 12px;
}

.sidebar .full-list > li.current-page > a:after,
.sidebar .full-list > li.current-page {
color: var(--sidebarActiveItem);
}

.sidebar .full-list > li:last-child {
margin-bottom: 30px;
}
Expand All @@ -303,84 +283,65 @@
margin-top: 0;
}

.sidebar .full-list ul {
display: none;
margin: 10px 15px;
margin-right: 0;
padding: 0;
/* Level 2 */

.sidebar .full-list > li > ul > li > a:hover:before {
content: "\2022";
position: absolute;
margin-left: -15px;
color: var(--sidebarActiveItem);
}

/* Level 2+ */

.sidebar .full-list ul li {
font-weight: 300;
line-height: var(--sidebarFontSize);
padding: 0 8px;
margin-right: 0;
color: var(--sidebarAccentMain);
}

:root:not(.apple-os) .sidebar .full-list ul li {
font-weight: 400; /* Non-Apple OSes render small light type too thinly */
.sidebar .full-list ul a {
padding-left: 15px;
height: 24px;
}

.sidebar .full-list ul li.current-hash {
color: var(--sidebarActiveItem);
.sidebar .full-list ul button {
font-size: var(--sidebarFontSize);
}

.sidebar .full-list ul li.current-hash > a {
color: var(--sidebarActiveItem);
.sidebar .full-list ul button:after {
content: var(--icon-add);
}

.sidebar .full-list ul li.current-hash > a:before,
.sidebar .full-list > li > ul > li > a:hover:before {
content: "\2022";
position: absolute;
margin-left: -15px;
color: var(--sidebarActiveItem);
.sidebar .full-list ul button[aria-expanded=true]:after {
content: var(--icon-subtract);
}

.sidebar .full-list ul li a {
padding-left: 15px;
display: block;
width: 100%;
height: 24px;
}
/* Level 3+ */

.sidebar .full-list ul li ul {
display: none;
margin: 9px 20px;
margin-right: 0;
.sidebar .full-list ul ul {
margin: 9px 0 9px 10px;
}

.sidebar .full-list ul li ul li {
margin-right: 0;
.sidebar .full-list ul ul li {
height: 20px;
color: var(--sidebarAccentMain);
}

.sidebar .full-list ul li ul li a {
.sidebar .full-list ul ul a {
border-left: 1px solid var(--sidebarInactiveItemMarker);
padding: 0 10px;
height: 20px;
}

.sidebar .full-list ul li ul li.current-hash > a:before {
content: none;
}

.sidebar .full-list ul li ul li > a:hover {
.sidebar .full-list ul ul a:hover {
border-color: var(--sidebarLanguageAccentBar);
}

.sidebar .full-list ul li ul li.current-hash > a {
.sidebar .full-list ul ul a[aria-selected] {
color: var(--sidebarActiveItem);
border-color: var(--sidebarLanguageAccentBar);
}

.sidebar .full-list ul li ul li.current-hash > a {
color: var(--sidebarActiveItem);
margin-left: 0;
}

.sidebar ::-webkit-scrollbar {
width: 14px;
}
Expand Down
21 changes: 10 additions & 11 deletions assets/js/copy-button.js
View file
Original file line number Diff line number Diff line change
@@ -1,23 +1,22 @@
import { qsAll } from './helpers'
import buttonHtml from './handlebars/templates/copy-button.html'

const template = document.createElement('div')
template.innerHTML = '<button class="copy-button"><svg role="img" aria-label="copy" viewBox="0 0 24 24" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"/><path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"/></svg><span aria-live="polite"></span></button>'
const buttonTemplate = template.firstChild
/** @type {HTMLButtonElement} */
let buttonTemplate

/**
* Initializes copy buttons.
*/
export function initialize () {
if ('clipboard' in navigator) {
addCopyButtons()
}
}
if (!('clipboard' in navigator)) return

/**
* Find pre tags, add copy buttons, copy <code> content on click.
*/
function addCopyButtons () {
qsAll('pre:has(> code:first-child):not(:has(.copy-button))').forEach(pre => {
if (!buttonTemplate) {
const div = document.createElement('div')
div.innerHTML = buttonHtml
buttonTemplate = div.firstChild
}

const button = buttonTemplate.cloneNode(true)
pre.appendChild(button)

Expand Down
Loading

0 comments on commit c7bae84

Please sign in to comment.