From 8239021339c9f5c52de9e2e69c905a774cdf919f Mon Sep 17 00:00:00 2001 From: Parker Lougheed Date: Tue, 24 Sep 2024 16:15:29 -0500 Subject: [PATCH 01/47] Implement site redesign with dark mode --- package.json | 5 +- pnpm-lock.yaml | 53 +- src/_11ty/plugins/highlight.js | 8 +- src/_11ty/shortcodes.js | 2 +- src/_11ty/syntax/dash-dark.js | 140 +++++ src/_includes/banner.html | 6 +- src/_includes/breadcrumbs.html | 8 +- src/_includes/cookie-notice.html | 12 +- src/_includes/docs/code-and-image.md | 24 +- .../docs/install/test-drive/androidstudio.md | 4 - .../docs/install/test-drive/terminal.md | 4 - .../docs/install/test-drive/vscode.md | 4 - .../migrate-ios-project-manually.md | 4 +- .../migrate-macos-project-manually.md | 4 +- src/_includes/footer.html | 29 -- src/_includes/header.html | 158 ------ src/_includes/inline-toc.html | 40 -- src/_includes/next-prev-nav.html | 36 +- src/_includes/side-toc.html | 23 +- src/_includes/sidenav-level-1.html | 12 +- src/_includes/sidenav-level-2.html | 12 +- src/_includes/sidenav-level-3.html | 12 +- src/_includes/sidenav-level-4.html | 5 +- src/_layouts/base.html | 118 ++++- src/_layouts/default.html | 63 +-- src/_layouts/landing.html | 11 - src/_sass/base/_base.scss | 478 ------------------ src/_sass/base/_content.scss | 88 ++++ src/_sass/base/_layout.scss | 79 +++ src/_sass/base/_material-colors.scss | 154 ------ src/_sass/base/_print-overrides.scss | 33 -- src/_sass/base/_reset.scss | 26 + src/_sass/base/_root.scss | 88 ++++ src/_sass/base/_typography.scss | 92 ++++ src/_sass/base/_variables.scss | 50 -- src/_sass/components/_asides.scss | 51 ++ src/_sass/components/_banner.scss | 65 +-- src/_sass/components/_books.scss | 17 - src/_sass/components/_breadcrumbs.scss | 40 ++ src/_sass/components/_buttons.scss | 64 +++ src/_sass/components/_cards.scss | 160 ++++++ src/_sass/components/_code.scss | 118 ++--- src/_sass/components/_content.scss | 177 ------- src/_sass/components/_cookie-notice.scss | 57 +-- src/_sass/components/_d2h.scss | 7 - src/_sass/components/_footer.scss | 109 ++-- src/_sass/components/_header.scss | 348 ++++--------- src/_sass/components/_icons.scss | 49 ++ src/_sass/components/_media.scss | 95 ++++ .../{_juicy-button.scss => _misc.scss} | 53 +- src/_sass/components/_next-prev-nav.scss | 58 --- src/_sass/components/_prev-next.scss | 53 ++ src/_sass/components/_side-menu.scss | 87 ++++ src/_sass/components/_sidebar.scss | 187 ------- src/_sass/components/_sidenav.scss | 168 ++++++ src/_sass/components/_tables.scss | 43 ++ src/_sass/components/_tabs.scss | 52 ++ src/_sass/components/_toc.scss | 121 ----- src/_sass/pages/_not-found.scss | 59 +-- src/_sass/pages/_search.scss | 7 + src/_sass/site.scss | 42 +- src/_sass/vendor/_bootstrap.scss | 242 --------- src/content/404.html | 14 +- src/content/add-to-app/index.md | 12 +- src/content/assets/js/main.js | 277 +++++----- src/content/assets/js/page/install-current.js | 2 +- .../get-started/install/chromeos/index.md | 6 +- src/content/get-started/install/index.md | 8 +- .../get-started/install/linux/index.md | 6 +- .../get-started/install/macos/index.md | 28 +- .../get-started/install/windows/index.md | 6 +- .../for-app-developers.md | 4 +- .../for-plugin-authors.md | 4 +- .../android/install-android/index.md | 6 +- .../ios/install-ios/index.md | 6 +- .../linux/install-linux/index.md | 6 +- .../macos/install-macos/index.md | 6 +- .../web/install-web/index.md | 6 +- .../windows/install-windows/index.md | 6 +- src/content/release/archive.md | 7 - src/content/search-all.html | 10 +- src/content/search.html | 16 +- src/content/ui/navigation/deep-linking.md | 4 +- src/content/ui/widgets/index.md | 12 +- 84 files changed, 2174 insertions(+), 2692 deletions(-) create mode 100644 src/_11ty/syntax/dash-dark.js delete mode 100644 src/_includes/footer.html delete mode 100644 src/_includes/header.html delete mode 100644 src/_includes/inline-toc.html delete mode 100644 src/_layouts/landing.html delete mode 100644 src/_sass/base/_base.scss create mode 100644 src/_sass/base/_content.scss create mode 100644 src/_sass/base/_layout.scss delete mode 100644 src/_sass/base/_material-colors.scss delete mode 100644 src/_sass/base/_print-overrides.scss create mode 100644 src/_sass/base/_reset.scss create mode 100644 src/_sass/base/_root.scss create mode 100644 src/_sass/base/_typography.scss delete mode 100644 src/_sass/base/_variables.scss create mode 100644 src/_sass/components/_asides.scss delete mode 100644 src/_sass/components/_books.scss create mode 100644 src/_sass/components/_breadcrumbs.scss create mode 100644 src/_sass/components/_buttons.scss create mode 100644 src/_sass/components/_cards.scss delete mode 100644 src/_sass/components/_content.scss delete mode 100644 src/_sass/components/_d2h.scss create mode 100644 src/_sass/components/_icons.scss create mode 100644 src/_sass/components/_media.scss rename src/_sass/components/{_juicy-button.scss => _misc.scss} (50%) delete mode 100644 src/_sass/components/_next-prev-nav.scss create mode 100644 src/_sass/components/_prev-next.scss create mode 100644 src/_sass/components/_side-menu.scss delete mode 100644 src/_sass/components/_sidebar.scss create mode 100644 src/_sass/components/_sidenav.scss create mode 100644 src/_sass/components/_tables.scss create mode 100644 src/_sass/components/_tabs.scss delete mode 100644 src/_sass/components/_toc.scss create mode 100644 src/_sass/pages/_search.scss delete mode 100644 src/_sass/vendor/_bootstrap.scss diff --git a/package.json b/package.json index 48974a0904..7e678838b7 100644 --- a/package.json +++ b/package.json @@ -18,12 +18,9 @@ "build-site-for-staging": "PRODUCTION=false eleventy", "build-site-for-production": "PRODUCTION=true OPTIMIZE=true eleventy" }, - "dependencies": { - "bootstrap-scss": "^4.6.2" - }, "devDependencies": { "@11ty/eleventy": "3.0.0-alpha.20", - "firebase-tools": "^13.18.0", + "firebase-tools": "^13.19.0", "hast-util-from-html": "^2.0.3", "hast-util-select": "^6.0.2", "hast-util-to-text": "^4.0.2", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 5bbd438926..cef79f425b 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -7,17 +7,13 @@ settings: importers: .: - dependencies: - bootstrap-scss: - specifier: ^4.6.2 - version: 4.6.2 devDependencies: '@11ty/eleventy': specifier: 3.0.0-alpha.20 version: 3.0.0-alpha.20 firebase-tools: - specifier: ^13.18.0 - version: 13.18.0(encoding@0.1.13) + specifier: ^13.19.0 + version: 13.19.0(encoding@0.1.13) hast-util-from-html: specifier: ^2.0.3 version: 2.0.3 @@ -309,8 +305,8 @@ packages: '@types/mdurl@2.0.0': resolution: {integrity: sha512-RGdgjQUZba5p6QEFAVx2OGb8rQDL/cPRG7GiedRzMcJ1tYnUANBncjbSB1NRGwbvjcPeikRABz2nshyPk1bhWg==} - '@types/node@22.5.5': - resolution: {integrity: sha512-Xjs4y5UPO/CLdzpgR6GirZJx36yScjh73+2NlLlkFRSoQN8B0DpfXPdZGnvVmLRLOsqDpOfTNv7D9trgGhmOIA==} + '@types/node@22.6.1': + resolution: {integrity: sha512-V48tCfcKb/e6cVUigLAaJDAILdMP0fUW6BidkPK4GpGjXcfbnoHasCZDwz3N3yVt5we2RHm4XTQCpv0KJz9zqw==} '@types/request@2.48.12': resolution: {integrity: sha512-G3sY+NpsA9jnwm0ixhAFQSJ3Q9JkpLZpJbI3GMv0mIAT0y3mRabYeINzal5WOChIiaTEGQYlHOKgkaM9EisWHw==} @@ -479,8 +475,8 @@ packages: balanced-match@1.0.2: resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==} - bare-events@2.4.2: - resolution: {integrity: sha512-qMKFd2qG/36aA4GwvKq8MxnPgCQAmBWmSyLWsJcbn8v03wvIPQ/hG1Ms8bPzndZxMDoHpxez5VOS+gC9Yi24/Q==} + bare-events@2.5.0: + resolution: {integrity: sha512-/E8dDe9dsbLyh2qrZ64PEPadOQ0F4gbl1sUJOrmph7xOiIxfY8vwab/4bFLh4Y88/Hk/ujKcrQKc+ps0mv873A==} base64-js@1.5.1: resolution: {integrity: sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==} @@ -522,9 +518,6 @@ packages: boolbase@1.0.0: resolution: {integrity: sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==} - bootstrap-scss@4.6.2: - resolution: {integrity: sha512-emVpCI/S9aeFV1/qqKrztPZLiyow4XfRWLxOAu2SR/67Vau0y6IHNRukQrTx8+OUQ+aVPDhql40eDHSxGoAceA==} - boxen@5.1.2: resolution: {integrity: sha512-9gYgQKXx+1nP8mP7CzFyaUARhg7D3n1dF/FnErWmu9l6JvGpNUN278h0aSb+QjoiKSWG+iZ3uHrcqk0qrY9RQQ==} engines: {node: '>=10'} @@ -612,8 +605,8 @@ packages: resolution: {integrity: sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==} engines: {node: '>= 8.10.0'} - chokidar@4.0.0: - resolution: {integrity: sha512-mxIojEAQcuEvT/lyXq+jf/3cO/KoA6z4CeNDGGevTybECPOMFCnQy3OPahluUkbqgPNGw5Bi78UC7Po6Lhy+NA==} + chokidar@4.0.1: + resolution: {integrity: sha512-n8enUVCED/KVRQlab1hr3MVpcVMvxtZjmEa956u+4YijlmQED223XMSYj2tLuKvr4jcCTzNNMpQDUer72MMmzA==} engines: {node: '>= 14.16.0'} chownr@2.0.0: @@ -1145,8 +1138,8 @@ packages: resolution: {integrity: sha512-6BN9trH7bp3qvnrRyzsBz+g3lZxTNZTbVO2EV1CS0WIcDbawYVdYvGflME/9QP0h0pYlCDBCTjYa9nZzMDpyxQ==} engines: {node: '>= 0.8'} - firebase-tools@13.18.0: - resolution: {integrity: sha512-HackYCHIDqGddGCua79jEOL0ZtMr9LOsk99KIzymX8UET7BeFDwFs7zNgJSFxFErqBKWw2Y1zAj7OuE8+EOkIw==} + firebase-tools@13.19.0: + resolution: {integrity: sha512-NgzXJFhHz8EPDyoEKA8QXzUEcD05z+NJ3sSNmgCsPlmLa93jNzdFqpboS6fqXcnNYKFqwxnqGWE6d02wushPXg==} engines: {node: '>=18.0.0 || >=20.0.0'} hasBin: true @@ -1635,8 +1628,8 @@ packages: linkify-it@5.0.0: resolution: {integrity: sha512-5aHCbzQRADcdP+ATqnDuhhJ/MRIqDkZX5pyjFHRRysS8vZ5AbqGEoFIb6pYHPZ+L/OC2Lc+xT8uHVVR5CAK/wQ==} - liquidjs@10.16.7: - resolution: {integrity: sha512-vjlBDyPxFgUc6vJB+TbAMcxKKKcm4Ee0rj9Je9lcG1I0lr9xvtHgB/ZdNMNAgsPUvJLkLfdrKRd+KzQ5opPfNg==} + liquidjs@10.17.0: + resolution: {integrity: sha512-M4MC5/nencttIJHirl5jFTkl7Yu+grIDLn3Qgl7BPAD3BsbTCQknDxlG5VXWRwslWIjk8lSZZjVq9LioILDk1Q==} engines: {node: '>=14'} hasBin: true @@ -3003,7 +2996,7 @@ snapshots: iso-639-1: 3.1.3 js-yaml: 4.1.0 kleur: 4.1.5 - liquidjs: 10.16.7 + liquidjs: 10.17.0 luxon: 3.5.0 markdown-it: 14.1.0 micromatch: 4.0.8 @@ -3292,14 +3285,14 @@ snapshots: '@types/mdurl@2.0.0': {} - '@types/node@22.5.5': + '@types/node@22.6.1': dependencies: undici-types: 6.19.8 '@types/request@2.48.12': dependencies: '@types/caseless': 0.12.5 - '@types/node': 22.5.5 + '@types/node': 22.6.1 '@types/tough-cookie': 4.0.5 form-data: 2.5.1 @@ -3460,7 +3453,7 @@ snapshots: balanced-match@1.0.2: {} - bare-events@2.4.2: + bare-events@2.5.0: optional: true base64-js@1.5.1: {} @@ -3515,8 +3508,6 @@ snapshots: boolbase@1.0.0: {} - bootstrap-scss@4.6.2: {} - boxen@5.1.2: dependencies: ansi-align: 3.0.1 @@ -3625,7 +3616,7 @@ snapshots: optionalDependencies: fsevents: 2.3.3 - chokidar@4.0.0: + chokidar@4.0.1: dependencies: readdirp: 4.0.1 @@ -4174,7 +4165,7 @@ snapshots: transitivePeerDependencies: - supports-color - firebase-tools@13.18.0(encoding@0.1.13): + firebase-tools@13.19.0(encoding@0.1.13): dependencies: '@google-cloud/cloud-sql-connector': 1.3.4(encoding@0.1.13) '@google-cloud/pubsub': 4.7.2(encoding@0.1.13) @@ -4855,7 +4846,7 @@ snapshots: dependencies: uc.micro: 2.1.0 - liquidjs@10.16.7: + liquidjs@10.17.0: dependencies: commander: 10.0.1 @@ -5472,7 +5463,7 @@ snapshots: '@protobufjs/path': 1.1.2 '@protobufjs/pool': 1.1.0 '@protobufjs/utf8': 1.1.0 - '@types/node': 22.5.5 + '@types/node': 22.6.1 long: 5.2.3 proxy-addr@2.0.7: @@ -5661,7 +5652,7 @@ snapshots: sass@1.79.3: dependencies: - chokidar: 4.0.0 + chokidar: 4.0.1 immutable: 4.3.7 source-map-js: 1.2.1 @@ -5839,7 +5830,7 @@ snapshots: queue-tick: 1.0.1 text-decoder: 1.2.0 optionalDependencies: - bare-events: 2.4.2 + bare-events: 2.5.0 string-width@4.2.3: dependencies: diff --git a/src/_11ty/plugins/highlight.js b/src/_11ty/plugins/highlight.js index 194294bfbd..f864b22155 100644 --- a/src/_11ty/plugins/highlight.js +++ b/src/_11ty/plugins/highlight.js @@ -1,4 +1,5 @@ import {getSingletonHighlighter} from 'shiki'; +import dashDarkTheme from '../syntax/dash-dark.js'; import dashLightTheme from '../syntax/dash-light.js'; const _terminalLanguages = { @@ -49,7 +50,7 @@ export async function configureHighlighting(markdown) { 'csharp', 'cmake', ], - themes: [dashLightTheme], + themes: [dashLightTheme, dashDarkTheme], }); markdown.renderer.rules.fence = function (tokens, index) { @@ -167,7 +168,10 @@ function _highlight( return highlighter.codeToHtml(content, { lang: language, - theme: 'dash-light', + themes: { + light: 'dash-light', + dark: 'dash-dark', + }, transformers: [ { pre(preElement) { diff --git a/src/_11ty/shortcodes.js b/src/_11ty/shortcodes.js index 65146c0d60..f80f5b5f32 100644 --- a/src/_11ty/shortcodes.js +++ b/src/_11ty/shortcodes.js @@ -10,7 +10,7 @@ function _setupMedia(eleventyConfig) { let embedMarkup = `
`; + allowfullscreen loading="lazy">`; if (!skipAlternativeLink) { embedMarkup += `

${title}

`; diff --git a/src/_11ty/syntax/dash-dark.js b/src/_11ty/syntax/dash-dark.js new file mode 100644 index 0000000000..0c4354e381 --- /dev/null +++ b/src/_11ty/syntax/dash-dark.js @@ -0,0 +1,140 @@ +// This is the dark mode version of the +// syntax highlighting theme for code blocks on the website. +// It's imported and used by `src/_11ty/plugins/highlight.js`. +export default { + name: 'dash-dark', + colors: { + 'editor.background': '#282c34', // Dark grey background + 'editor.foreground': '#abb2bf', // Light grey foreground + }, + tokenColors: [ + { + settings: { + background: '#282c34', + foreground: '#abb2bf', + }, + }, + { + scope: 'emphasis', + settings: { + fontStyle: 'italic', + }, + }, + { + scope: 'strong', + settings: { + fontStyle: 'bold', + }, + }, + { + scope: [ + 'punctuation', + 'punctuation.separator.inheritance-clause', + 'storage.modifier.package.java', + ], + settings: { + foreground: '#abb2bf', + }, + }, + { + scope: ['comment', 'punctuation.definition.comment'], + settings: { + foreground: '#5c6370', // Slightly lighter shade of grey for comments + }, + }, + { + scope: 'constant', + settings: { + foreground: '#98c379', // Green for constants + }, + }, + { + scope: [ + 'keyword', + 'storage.modifier', + 'storage.type', + 'variable.language', + ], + settings: { + foreground: '#c678dd', // Purple for keywords + }, + }, + { + scope: [ + 'keyword.operator', + 'string.interpolated.expression', + 'constant.character.escape', + ], + settings: { + foreground: '#abb2bf', + }, + }, + { + scope: ['string', 'string.interpolated', 'punctuation.definition.string'], + settings: { + foreground: '#98c379', + }, + }, + { + scope: [ + 'entity.name.function', + 'support.function', + 'entity.other.attribute-name', + ], + settings: { + foreground: '#61afef', // Cyan for functions + }, + }, + { + scope: [ + 'entity.name.class', + 'entity.name.type', + 'entity.name.type.class', + 'entity.name.type.enum', + 'entity.name.type.protocol', + 'support.class', + 'support.type', + 'entity.name.tag', + ], + settings: { + foreground: '#e5c07b', // Yellow for classes + }, + }, + { + scope: ['variable', 'variable.other'], + settings: { + foreground: '#abb2bf', + }, + }, + { + scope: 'markup.underline', + settings: { + fontStyle: 'underline', + }, + }, + { + scope: 'markup.bold', + settings: { + fontStyle: 'bold', + }, + }, + { + scope: 'markup.heading', + settings: { + fontStyle: 'bold', + }, + }, + { + scope: 'markup.italic', + settings: { + fontStyle: 'italic', + }, + }, + { + scope: 'markup.strikethrough', + settings: { + fontStyle: 'strikethrough', + }, + }, + ], +}; \ No newline at end of file diff --git a/src/_includes/banner.html b/src/_includes/banner.html index 6f697d4069..a62ac1a614 100644 --- a/src/_includes/banner.html +++ b/src/_includes/banner.html @@ -1,8 +1,6 @@ {% comment %} For headings use h3 elements. {% endcomment -%} - +Flutter 3.24 and Dart 3.5 are here! +Check out what's new on the website. diff --git a/src/_includes/breadcrumbs.html b/src/_includes/breadcrumbs.html index 59401753ba..9fb4b859df 100644 --- a/src/_includes/breadcrumbs.html +++ b/src/_includes/breadcrumbs.html @@ -12,19 +12,17 @@ {% assign breadcrumbs = page | breadcrumbsForPage -%} {% if breadcrumbs -%}