Skip to content
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.

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

Improve site performance metrics #3224

Merged
merged 21 commits into from
Feb 15, 2025
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
21 commits
Select commit Hold shift + click to select a range
f252421
enable docusaurus faster
Blargian Feb 7, 2025
c72fd37
disable docusaurus faster features causing styling issues
Blargian Feb 8, 2025
099cc56
fix incorrect definition which breaks styling in production for Docus…
Blargian Feb 9, 2025
bb30d61
fix incorrect color definition breaking styling in prod with upgrade …
Blargian Feb 9, 2025
e0039f4
restore parts of code which were modified during testing, to default
Blargian Feb 9, 2025
42feda7
change package name to something more logical
Blargian Feb 9, 2025
fe7c5cb
add defer=true to kapa script
Blargian Feb 9, 2025
472dc1f
Lazy load code blocks with basic animation
Blargian Feb 9, 2025
ea432ed
remove unneeded katex font, use preload and headTags for the others
Blargian Feb 9, 2025
550bbea
add preconnect resource hint for kapa.ai
Blargian Feb 9, 2025
6c44540
turn on lightningCssMinimizer and rspackBundler
Blargian Feb 10, 2025
fc023ca
add preconnects to gstatic and googletagmanager
Blargian Feb 10, 2025
af063cf
remove client side redirects and add to vercel.json
Blargian Feb 11, 2025
0f23b71
modify routes to begin from /docs/
Blargian Feb 11, 2025
6e3cc56
fix resource hints and remove unused resource hints
Blargian Feb 11, 2025
ff8807c
change crossorigin type to use-credentials based on debugbear hint
Blargian Feb 11, 2025
ecf1b9b
remove unused packages and code
Blargian Feb 12, 2025
aea399d
disable source maps for production builds
Blargian Feb 12, 2025
c1c91e0
style codeblock
Blargian Feb 13, 2025
79d559d
review fixes
Blargian Feb 14, 2025
345ff8c
Merge branch 'ClickHouse:main' into improve_site_vitals
Blargian Feb 15, 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,141 changes: 39 additions & 2,102 deletions docusaurus.config.js

Large diffs are not rendered by default.

11 changes: 4 additions & 7 deletions package.json
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
{
"name": "new-nav-docusaurus-2-2",
"name": "clickhouse-docs",
"version": "0.0.0",
"private": true,
"config": {
Expand All @@ -8,7 +8,7 @@
"autogen_needed_files": "src/Core/FormatFactorySettings.h src/Core/Settings.cpp CHANGELOG.md"
},
"scripts": {
"build": "yarn copy-clickhouse-repo-docs && yarn generate-changelog && yarn autogenerate-settings && yarn build-api-doc && yarn build-swagger && docusaurus build",
"build": "yarn copy-clickhouse-repo-docs && yarn generate-changelog && yarn autogenerate-settings && yarn build-api-doc && yarn build-swagger && GENERATE_SOURCEMAP=false docusaurus build",
"clear": "docusaurus clear && bash ./placeholderReset.sh",
"deploy": "docusaurus deploy",
"docusaurus": "docusaurus",
Expand All @@ -19,15 +19,15 @@
"prep-from-local": "bash ./scripts/copy-clickhouse-repo-docs.sh -l $1",
"autogenerate-settings": "bash ./scripts/settings/autogenerate-settings.sh",
"generate-changelog": "bash ./scripts/generate-changelog.sh",
"new-build": "yarn copy-clickhouse-repo-docs && yarn generate-changelog && yarn autogenerate-settings && yarn build-api-doc && yarn build-swagger && docusaurus build",
"new-build": "yarn copy-clickhouse-repo-docs && yarn generate-changelog && yarn autogenerate-settings && yarn build-api-doc && yarn build-swagger && GENERATE_SOURCEMAP=false docusaurus build",
"start": "docusaurus start",
"swizzle": "docusaurus swizzle",
"write-heading-ids": "docusaurus write-heading-ids",
"run-indexer": "bash ./scripts/search/run_indexer.sh"
},
"dependencies": {
"@docusaurus/core": "3.7.0",
"@docusaurus/plugin-client-redirects": "3.7.0",
"@docusaurus/faster": "^3.7.0",
"@docusaurus/preset-classic": "3.7.0",
"@docusaurus/theme-mermaid": "3.7.0",
"@docusaurus/theme-search-algolia": "^3.7.0",
Expand All @@ -40,9 +40,7 @@
"esbuild-loader": "^4.0.3",
"flexsearch": "^0.7.43",
"gray-matter": "^4.0.3",
"hast-util-is-element": "1.1.0",
"http-proxy-middleware": "3.0.3",
"katex": "^0.16.21",
"node-fetch": "^3.3.2",
"prism-react-renderer": "^2.4.1",
"react": "^18.2.0",
Expand All @@ -60,7 +58,6 @@
"@docusaurus/module-type-aliases": "3.7.0",
"@playwright/test": "^1.49.1",
"@types/react": "^19.0.4",
"cheerio": "^1.0.0",
"rsync": "^0.6.1",
"typescript": "^5.7.3"
},
Expand Down
2 changes: 1 addition & 1 deletion src/css/colors.scss
Original file line number Diff line number Diff line change
Expand Up @@ -114,7 +114,7 @@
--click-color-button-text-disabled: var(--palette_neutral_500);

--click-color-table-header-background: var(--palette_slate_50);
--click-color-table-header-text: var(var(--palette_slate_900));
--click-color-table-header-text: var(--palette_slate_900);
--click-color-table-row-background: var(--palette_neutral_0);
--click-color-table-row-text: var(--palette_slate_900);
--click-color-table-cell-stroke: var(--palette_slate_100);
Expand Down
5 changes: 5 additions & 0 deletions src/css/custom.scss
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,11 @@
@use "default";
@use "home";

/* KaTeX renders the input twice by default, once in HTML and one in MathML */
.katex-html {
display: none;
}

html[data-theme="dark"] {
background: var(--click-color-background);
background-attachment: fixed;
Expand Down
1 change: 1 addition & 0 deletions src/css/default.scss
Original file line number Diff line number Diff line change
Expand Up @@ -157,3 +157,4 @@
--ifm-menu-link-sublist-icon: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.9988 9.21211L16.2363 13.4684L15.4488 14.2559L11.9988 10.8059L8.54883 14.2559L7.76133 13.4684L11.9988 9.21211Z' fill='%23E2E3E7' /%3E%3Cpath d='M11.9988 9.21211L16.2363 13.4684L15.4488 14.2559L11.9988 10.8059L8.54883 14.2559L7.76133 13.4684L11.9988 9.21211Z' fill='black' fill-opacity='0.2'/%3E%3C/svg%3E");

}

53 changes: 27 additions & 26 deletions src/css/home.scss
Original file line number Diff line number Diff line change
@@ -1,30 +1,30 @@
/* Hide breadcrumbs for home page */
.docs-doc-id-home-page .breadcrumbs {
display: none;
display: none;
}

.docs-doc-id-home-page .docItemCol_src-theme-DocItem-Layout-styles-module {
max-width: 100vw;
overflow-x: hidden;
max-width: 100vw;
overflow-x: hidden;

@media (min-width: 768px) {
max-width: 100% !important;
}
@media (min-width: 768px) {
max-width: 100% !important;
}
}

.docs-doc-id-home-page .container {
margin-left: 0;
margin-right: 0;
max-width: 100%;
padding-bottom: 0;
margin-left: 0;
margin-right: 0;
max-width: 100%;
padding-bottom: 0;

@media (min-width: 768px) {
overflow-x: auto;
}
@media (min-width: 768px) {
overflow-x: auto;
}
}

.docs-doc-id-home-page .main-content-wrapper {
margin-top: 0;
margin-top: 0;
}

.docs-doc-id-home-page .docItemCol_src-theme-DocItem-Layout-styles-module {
Expand All @@ -41,18 +41,18 @@
padding-left: 1rem;
padding-right: 1rem;
}

.home-page-hero {
border-bottom: 1px solid var(--click-color-stroke);
display: flex;
flex-direction: column;
padding-bottom: 2rem;
border-bottom: 1px solid var(--click-color-stroke);
display: flex;
flex-direction: column;
padding-bottom: 2rem;

@media (min-width: 768px) {
flex-direction: row;
padding-top: 4rem;
padding-bottom: 4rem;
}
@media (min-width: 768px) {
flex-direction: row;
padding-top: 4rem;
padding-bottom: 4rem;
}
}

.home-page-hero-left {
Expand Down Expand Up @@ -88,7 +88,7 @@
margin-bottom: 1rem;
width: 100%;

@media (min-width: 768px) {
@media (min-width: 768px) {
margin-right: 24px;
margin-bottom: 0;
width: 200px;
Expand Down Expand Up @@ -241,3 +241,4 @@ img.home-svg svg path {
padding-left: 4rem !important;
}
}

4 changes: 1 addition & 3 deletions src/hooks/index.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,3 @@
import useDebounce from './useDebounce'
import useThrottle from './useThrottle'
import useClickOutside from './useClickOutside'

export { useDebounce, useThrottle, useClickOutside }
export { useClickOutside }
14 changes: 0 additions & 14 deletions src/hooks/useDebounce.js

This file was deleted.

13 changes: 0 additions & 13 deletions src/hooks/useThrottle.js

This file was deleted.

1 change: 1 addition & 0 deletions src/theme/CodeBlock/Container/styles.module.css
Original file line number Diff line number Diff line change
Expand Up @@ -8,3 +8,4 @@
--ifm-pre-color: var(--prism-color);
overflow-x: scroll;
}

47 changes: 47 additions & 0 deletions src/theme/CodeBlock/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
import React, {useState, useRef, useCallback, useEffect} from 'react';
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@lio-p this is where our code block will go. Pay attention to lazy-loading - @Blargian found this to important for google site metricsw

import CodeBlock from '@theme-original/CodeBlock';
import styles from './styles.module.css';

export default function CodeBlockWrapper(props) {
const [isLoaded, setIsLoaded] = useState(false);
const codeBlockRef = useRef(null);

const handleIntersection = useCallback((entries) => {
const entry = entries[0];
if (entry.isIntersecting && !isLoaded) {
setIsLoaded(true);
}
}, [isLoaded]);

useEffect(() => {
const observer = new IntersectionObserver(handleIntersection, {
rootMargin: '0px 0px',
});

const currentRef = codeBlockRef.current; // Store current ref value

if (currentRef) {
observer.observe(currentRef);
}

return () => {
if (currentRef) { // Use stored ref value here as well
observer.unobserve(currentRef);
}
};
}, [handleIntersection]); // Add handleIntersection to dependency array

if (!isLoaded) {
return (
<div ref={codeBlockRef} className={styles.wrapper}>
<div className={styles.activity}></div>
</div>
);
}

return (
<>
<CodeBlock {...props} />
</>
);
}
48 changes: 48 additions & 0 deletions src/theme/CodeBlock/styles.module.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
.wrapper {
position: relative;
height: 100px;
width: 100%;
z-index: 44;
overflow: hidden;
border-radius: 5px;
margin-bottom: 20px;
}

[data-theme='dark'] .wrapper {
background-color: rgb(46,46,41);
}

[data-theme='light'] .wrapper {
background-color: rgb(245,245,245);
}

.activity {
position: absolute;
left: -45%;
height: 100%;
width: 45%;
animation: loading 1s infinite;
z-index: 45;
}

[data-theme='dark'] .activity {
background-image: linear-gradient(to left, rgba(31,31,28, .05), rgba(31,31,28, .3), rgba(31,31,28, .6), rgba(31,31,28, .3), rgba(31,31,28, .05));
background-image: -moz-linear-gradient(to left, rgba(31,31,28, .05), rgba(31,31,28, .3), rgba(31,31,28, .6), rgba(31,31,28, .3), rgba(31,31,28, .05));
background-image: -webkit-linear-gradient(to left, rgba(31,31,28, .05), rgba(31,31,28, .3), rgba(31,31,28, .6), rgba(31,31,28, .3), rgba(31,31,28, .05));
}

[data-theme='light'] .activity {
background-image: linear-gradient(to left, rgba(227,227,227, .05), rgba(227,227,227, .3), rgba(227,227,227, .6), rgba(227,227,227, .3), rgba(227,227,227, .05));
background-image: -moz-linear-gradient(to left, rgba(227,227,227, .05), rgba(227,227,227, .3), rgba(227,227,227, .6), rgba(227,227,227, .3), rgba(227,227,227, .05));
background-image: -webkit-linear-gradient(to left, rgba(227,227,227, .05), rgba(227,227,227, .3), rgba(227,227,227, .6), rgba(227,227,227, .3), rgba(227,227,227, .05));
}

@keyframes loading {
0% {
left: -45%; /* Start off-screen to the left */
}
100% {
left: calc(100% + 45%); /* Move off-screen to the right */
}
}

66 changes: 66 additions & 0 deletions static/fonts/inter.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,66 @@
/* Previously this was loaded from a CDN, have moved it here */

/* cyrillic-ext */
Blargian marked this conversation as resolved.
Show resolved Hide resolved
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400 700;
font-display: swap;
src: url(https://fonts.gstatic.com/s/inter/v18/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2JL7W0Q5n-wU.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400 700;
font-display: swap;
src: url(https://fonts.gstatic.com/s/inter/v18/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa0ZL7W0Q5n-wU.woff2) format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400 700;
font-display: swap;
src: url(https://fonts.gstatic.com/s/inter/v18/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2ZL7W0Q5n-wU.woff2) format('woff2');
unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400 700;
font-display: swap;
src: url(https://fonts.gstatic.com/s/inter/v18/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1pL7W0Q5n-wU.woff2) format('woff2');
unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400 700;
font-display: swap;
src: url(https://fonts.gstatic.com/s/inter/v18/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2pL7W0Q5n-wU.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400 700;
font-display: swap;
src: url(https://fonts.gstatic.com/s/inter/v18/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7W0Q5n-wU.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400 700;
font-display: swap;
src: url(https://fonts.gstatic.com/s/inter/v18/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7W0Q5nw.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

1 change: 1 addition & 0 deletions static/fonts/snippet.css

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Loading