diff --git a/index.html b/index.html index a6412b2e..f5118dcc 100644 --- a/index.html +++ b/index.html @@ -13,6 +13,7 @@ ga('set', 'dimension3', localStorage.getItem('schema_version') || '1.18.2'); ga('set', 'dimension4', localStorage.getItem('language') || 'en'); ga('set', 'dimension5', 'none'); + ga('set', 'dimension7', matchMedia('(prefers-color-scheme: light)').matches ? 'light' : matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'none'); ga('send', 'pageview'); diff --git a/package-lock.json b/package-lock.json index be3a828a..ef0d6537 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,6 +9,7 @@ "version": "1.0.0", "license": "MIT", "dependencies": { + "@giscus/react": "^1.1.2", "@mcschema/core": "^0.12.28", "@mcschema/java-1.15": "^0.2.3", "@mcschema/java-1.16": "^0.6.6", @@ -30,6 +31,7 @@ }, "devDependencies": { "@preact/preset-vite": "^2.1.0", + "@rollup/plugin-alias": "^3.1.9", "@rollup/plugin-html": "^0.2.3", "@types/google.analytics": "0.0.40", "@types/howler": "^2.2.4", @@ -380,6 +382,15 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/@giscus/react": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/@giscus/react/-/react-1.1.2.tgz", + "integrity": "sha512-htSAAiTtoHTRE8GqSSkWmT+Iq7LJhtqSmr+HjEC1cXlNd1WeLVZXjnuiIj7+L8DOUnAdfh+1FClN304FVxIcsQ==", + "peerDependencies": { + "react": "^16 || ^17 || ^18", + "react-dom": "^16 || ^17 || ^18" + } + }, "node_modules/@mcschema/core": { "version": "0.12.29", "resolved": "https://registry.npmjs.org/@mcschema/core/-/core-0.12.29.tgz", @@ -519,6 +530,21 @@ "vite": ">=2.0.0-beta.3" } }, + "node_modules/@rollup/plugin-alias": { + "version": "3.1.9", + "resolved": "https://registry.npmjs.org/@rollup/plugin-alias/-/plugin-alias-3.1.9.tgz", + "integrity": "sha512-QI5fsEvm9bDzt32k39wpOwZhVzRcL5ydcffUHMyLVaVaLeC70I8TJZ17F1z1eMoLu4E/UOcH9BWVkKpIKdrfiw==", + "dev": true, + "dependencies": { + "slash": "^3.0.0" + }, + "engines": { + "node": ">=8.0.0" + }, + "peerDependencies": { + "rollup": "^1.20.0||^2.0.0" + } + }, "node_modules/@rollup/plugin-html": { "version": "0.2.3", "resolved": "https://registry.npmjs.org/@rollup/plugin-html/-/plugin-html-0.2.3.tgz", @@ -2841,8 +2867,7 @@ "node_modules/js-tokens": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", - "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==", - "dev": true + "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==" }, "node_modules/js-yaml": { "version": "3.14.1", @@ -3179,6 +3204,18 @@ "node": ">=8" } }, + "node_modules/loose-envify": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz", + "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==", + "peer": true, + "dependencies": { + "js-tokens": "^3.0.0 || ^4.0.0" + }, + "bin": { + "loose-envify": "cli.js" + } + }, "node_modules/lru-cache": { "version": "6.0.0", "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz", @@ -3334,7 +3371,6 @@ "version": "4.1.1", "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=", - "dev": true, "engines": { "node": ">=0.10.0" } @@ -3621,6 +3657,33 @@ } ] }, + "node_modules/react": { + "version": "17.0.2", + "resolved": "https://registry.npmjs.org/react/-/react-17.0.2.tgz", + "integrity": "sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==", + "peer": true, + "dependencies": { + "loose-envify": "^1.1.0", + "object-assign": "^4.1.1" + }, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/react-dom": { + "version": "17.0.2", + "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-17.0.2.tgz", + "integrity": "sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA==", + "peer": true, + "dependencies": { + "loose-envify": "^1.1.0", + "object-assign": "^4.1.1", + "scheduler": "^0.20.2" + }, + "peerDependencies": { + "react": "17.0.2" + } + }, "node_modules/regexpp": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/regexpp/-/regexpp-3.1.0.tgz", @@ -3833,6 +3896,16 @@ "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==", "dev": true }, + "node_modules/scheduler": { + "version": "0.20.2", + "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.20.2.tgz", + "integrity": "sha512-2eWfGgAqqWFGqtdMmcL5zCMK1U8KlXv8SQFGglL3CEtd0aDVDWgeF/YoCmvln55m5zSk3J/20hTaSBeSObsQDQ==", + "peer": true, + "dependencies": { + "loose-envify": "^1.1.0", + "object-assign": "^4.1.1" + } + }, "node_modules/semver": { "version": "6.3.0", "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz", @@ -4733,6 +4806,12 @@ } } }, + "@giscus/react": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/@giscus/react/-/react-1.1.2.tgz", + "integrity": "sha512-htSAAiTtoHTRE8GqSSkWmT+Iq7LJhtqSmr+HjEC1cXlNd1WeLVZXjnuiIj7+L8DOUnAdfh+1FClN304FVxIcsQ==", + "requires": {} + }, "@mcschema/core": { "version": "0.12.29", "resolved": "https://registry.npmjs.org/@mcschema/core/-/core-0.12.29.tgz", @@ -4853,6 +4932,15 @@ "@rollup/pluginutils": "^4.1.0" } }, + "@rollup/plugin-alias": { + "version": "3.1.9", + "resolved": "https://registry.npmjs.org/@rollup/plugin-alias/-/plugin-alias-3.1.9.tgz", + "integrity": "sha512-QI5fsEvm9bDzt32k39wpOwZhVzRcL5ydcffUHMyLVaVaLeC70I8TJZ17F1z1eMoLu4E/UOcH9BWVkKpIKdrfiw==", + "dev": true, + "requires": { + "slash": "^3.0.0" + } + }, "@rollup/plugin-html": { "version": "0.2.3", "resolved": "https://registry.npmjs.org/@rollup/plugin-html/-/plugin-html-0.2.3.tgz", @@ -6564,8 +6652,7 @@ "js-tokens": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", - "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==", - "dev": true + "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==" }, "js-yaml": { "version": "3.14.1", @@ -6828,6 +6915,15 @@ } } }, + "loose-envify": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz", + "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==", + "peer": true, + "requires": { + "js-tokens": "^3.0.0 || ^4.0.0" + } + }, "lru-cache": { "version": "6.0.0", "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz", @@ -6946,8 +7042,7 @@ "object-assign": { "version": "4.1.1", "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", - "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=", - "dev": true + "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=" }, "once": { "version": "1.4.0", @@ -7146,6 +7241,27 @@ "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==", "dev": true }, + "react": { + "version": "17.0.2", + "resolved": "https://registry.npmjs.org/react/-/react-17.0.2.tgz", + "integrity": "sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==", + "peer": true, + "requires": { + "loose-envify": "^1.1.0", + "object-assign": "^4.1.1" + } + }, + "react-dom": { + "version": "17.0.2", + "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-17.0.2.tgz", + "integrity": "sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA==", + "peer": true, + "requires": { + "loose-envify": "^1.1.0", + "object-assign": "^4.1.1", + "scheduler": "^0.20.2" + } + }, "regexpp": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/regexpp/-/regexpp-3.1.0.tgz", @@ -7302,6 +7418,16 @@ "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==", "dev": true }, + "scheduler": { + "version": "0.20.2", + "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.20.2.tgz", + "integrity": "sha512-2eWfGgAqqWFGqtdMmcL5zCMK1U8KlXv8SQFGglL3CEtd0aDVDWgeF/YoCmvln55m5zSk3J/20hTaSBeSObsQDQ==", + "peer": true, + "requires": { + "loose-envify": "^1.1.0", + "object-assign": "^4.1.1" + } + }, "semver": { "version": "6.3.0", "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz", diff --git a/package.json b/package.json index 76c7e281..23739f8c 100644 --- a/package.json +++ b/package.json @@ -15,6 +15,7 @@ "author": "Misode", "license": "MIT", "dependencies": { + "@giscus/react": "^1.1.2", "@mcschema/core": "^0.12.28", "@mcschema/java-1.15": "^0.2.3", "@mcschema/java-1.16": "^0.6.6", @@ -36,6 +37,7 @@ }, "devDependencies": { "@preact/preset-vite": "^2.1.0", + "@rollup/plugin-alias": "^3.1.9", "@rollup/plugin-html": "^0.2.3", "@types/google.analytics": "0.0.40", "@types/howler": "^2.2.4", diff --git a/src/app/Analytics.ts b/src/app/Analytics.ts index a55dedbb..440620ab 100644 --- a/src/app/Analytics.ts +++ b/src/app/Analytics.ts @@ -7,6 +7,7 @@ export namespace Analytics { const DIM_LANGUAGE = 4 const DIM_PREVIEW = 5 const DIM_GENERATOR = 6 + const DIM_PREFERS_COLOR_SCHEME = 7 function event(category: string, action: string, label?: string) { ga('send', 'event', category, action, label) @@ -45,6 +46,10 @@ export namespace Analytics { dimension(DIM_GENERATOR, generator) } + export function setPrefersColorScheme(colorScheme: string) { + dimension(DIM_PREFERS_COLOR_SCHEME, colorScheme) + } + export function generatorEvent(action: string, label?: string) { event(ID_GENERATOR, action, label) } diff --git a/src/app/components/Giscus.tsx b/src/app/components/Giscus.tsx new file mode 100644 index 00000000..8d82f204 --- /dev/null +++ b/src/app/components/Giscus.tsx @@ -0,0 +1,26 @@ +import { Giscus as GiscusReact } from '@giscus/react' +import { useTheme } from '../contexts' + +interface Props { + term?: string, +} +export function Giscus({ term }: Props) { + const { actualTheme } = useTheme() + const themeSuffix = actualTheme === 'light' ? '-burn' : '' + const themeUrl = (import.meta as any).env.DEV + ? `http://localhost:3000/src/styles/giscus${themeSuffix}.css` + : `https://${location.host}/assets/giscus${themeSuffix}.css` + + return +} diff --git a/src/app/components/index.ts b/src/app/components/index.ts index 4bb2d31d..8470b05e 100644 --- a/src/app/components/index.ts +++ b/src/app/components/index.ts @@ -5,6 +5,7 @@ export * from './BtnMenu' export * from './ErrorPanel' export * from './forms' export * from './generator' +export * from './Giscus' export * from './Header' export * from './Icons' export * from './Octicon' diff --git a/src/app/components/versions/VersionDetail.tsx b/src/app/components/versions/VersionDetail.tsx index c5b8c6b1..0a275ec3 100644 --- a/src/app/components/versions/VersionDetail.tsx +++ b/src/app/components/versions/VersionDetail.tsx @@ -3,14 +3,19 @@ import { VersionMetaData } from '.' import { useLocale } from '../../contexts' import type { Change, VersionMeta } from '../../services' import { getChangelogs } from '../../services' +import { Giscus } from '../Giscus' import { ChangelogList } from './ChangelogList' +type Tab = 'changelog' | 'discussion' + interface Props { version: VersionMeta } export function VersionDetail({ version }: Props) { const { locale } = useLocale() + const [tab, setTab] = useState('changelog') + const [changelogs, setChangelogs] = useState(undefined) useEffect(() => { getChangelogs() @@ -35,9 +40,13 @@ export function VersionDetail({ version }: Props) { -

{locale('versions.technical_changes')}

-
- +
+ setTab('changelog')}>{locale('versions.technical_changes')} + setTab('discussion')}>{locale('versions.discussion')} +
+
+ {tab === 'changelog' && } + {tab === 'discussion' && }
diff --git a/src/app/contexts/Theme.tsx b/src/app/contexts/Theme.tsx index f3f47b94..df022f5f 100644 --- a/src/app/contexts/Theme.tsx +++ b/src/app/contexts/Theme.tsx @@ -2,14 +2,17 @@ import type { ComponentChildren } from 'preact' import { createContext } from 'preact' import { useCallback, useContext, useEffect, useState } from 'preact/hooks' import { Analytics } from '../Analytics' +import { useMediaQuery } from '../hooks' import { Store } from '../Store' interface Theme { theme: string, + actualTheme: 'light' | 'dark', changeTheme: (theme: string) => unknown, } const Theme = createContext({ theme: 'dark', + actualTheme: 'dark', changeTheme: () => {}, }) @@ -19,6 +22,8 @@ export function useTheme() { export function ThemeProvider({ children }: { children: ComponentChildren }) { const [theme, setTheme] = useState(Store.getTheme()) + const prefersLight = useMediaQuery('(prefers-color-scheme: light)') + const prefersDark = useMediaQuery('(prefers-color-scheme: dark)') useEffect(() => { document.documentElement.setAttribute('data-theme', theme) @@ -30,8 +35,13 @@ export function ThemeProvider({ children }: { children: ComponentChildren }) { setTheme(theme) }, []) + useEffect(() => { + Analytics.setPrefersColorScheme(prefersLight ? 'light' : prefersDark ? 'dark' : 'none') + }, [prefersLight, prefersDark]) + const value: Theme = { theme, + actualTheme: theme === 'light' || (theme !== 'dark' && prefersLight) ? 'light' : 'dark', changeTheme, } diff --git a/src/app/hooks/index.ts b/src/app/hooks/index.ts index 7fa454ae..414d3054 100644 --- a/src/app/hooks/index.ts +++ b/src/app/hooks/index.ts @@ -1,4 +1,5 @@ export * from './useActiveTimout' export * from './useCanvas' export * from './useFocus' +export * from './useMediaQuery' export * from './useModel' diff --git a/src/app/hooks/useMediaQuery.ts b/src/app/hooks/useMediaQuery.ts new file mode 100644 index 00000000..356060b5 --- /dev/null +++ b/src/app/hooks/useMediaQuery.ts @@ -0,0 +1,19 @@ +import { useEffect, useState } from 'preact/hooks' + +export function useMediaQuery(query: string): boolean { + const [prefers, setPrefers] = useState(matchMedia(query).matches) + + const onChange = (e: MediaQueryListEvent) => { + setPrefers(e.matches) + } + + useEffect(() => { + const mediaQuery = matchMedia(query) + mediaQuery.addEventListener('change', onChange) + return () => { + mediaQuery.removeEventListener('change', onChange) + } + }, [query]) + + return prefers +} diff --git a/src/app/pages/Home.tsx b/src/app/pages/Home.tsx index c5868373..2b1d5446 100644 --- a/src/app/pages/Home.tsx +++ b/src/app/pages/Home.tsx @@ -1,5 +1,5 @@ import config from '../../config.json' -import { ToolCard } from '../components' +import { Giscus, ToolCard } from '../components' import { useLocale, useTitle } from '../contexts' import { cleanUrl } from '../Utils' @@ -33,6 +33,7 @@ export function Home({}: Props) { desc="Convert your data packs from 1.16 to 1.17 to 1.18" /> + } diff --git a/src/locales/en.json b/src/locales/en.json index 4d8277a9..5cd223bb 100644 --- a/src/locales/en.json +++ b/src/locales/en.json @@ -133,6 +133,7 @@ "versions.data_pack_format": "Data pack format", "versions.resource_pack_format": "Resource pack format", "versions.technical_changes": "Technical changes", + "versions.discussion": "Discussion", "world": "World Settings", "worldgen": "Worldgen", "worldgen/biome": "Biome", diff --git a/src/styles/giscus-burn.css b/src/styles/giscus-burn.css new file mode 100644 index 00000000..7fc98af4 --- /dev/null +++ b/src/styles/giscus-burn.css @@ -0,0 +1,87 @@ +/*! + * Modified from GitHub's Light theme, licensed under the MIT License + * Copyright (c) 2018 GitHub Inc. + * https://github.com/primer/primitives/blob/main/LICENSE + */ +main { + --color-prettylights-syntax-comment: #6e7781; + --color-prettylights-syntax-constant: #0550ae; + --color-prettylights-syntax-entity: #8250df; + --color-prettylights-syntax-storage-modifier-import: #24292f; + --color-prettylights-syntax-entity-tag: #116329; + --color-prettylights-syntax-keyword: #cf222e; + --color-prettylights-syntax-string: #0a3069; + --color-prettylights-syntax-variable: #953800; + --color-prettylights-syntax-brackethighlighter-unmatched: #82071e; + --color-prettylights-syntax-invalid-illegal-text: #f6f8fa; + --color-prettylights-syntax-invalid-illegal-bg: #82071e; + --color-prettylights-syntax-carriage-return-text: #f6f8fa; + --color-prettylights-syntax-carriage-return-bg: #cf222e; + --color-prettylights-syntax-string-regexp: #116329; + --color-prettylights-syntax-markup-list: #3b2300; + --color-prettylights-syntax-markup-heading: #0550ae; + --color-prettylights-syntax-markup-italic: #24292f; + --color-prettylights-syntax-markup-bold: #24292f; + --color-prettylights-syntax-markup-deleted-text: #82071e; + --color-prettylights-syntax-markup-deleted-bg: #ffebe9; + --color-prettylights-syntax-markup-inserted-text: #116329; + --color-prettylights-syntax-markup-inserted-bg: #dafbe1; + --color-prettylights-syntax-markup-changed-text: #953800; + --color-prettylights-syntax-markup-changed-bg: #ffd8b5; + --color-prettylights-syntax-markup-ignored-text: #eaeef2; + --color-prettylights-syntax-markup-ignored-bg: #0550ae; + --color-prettylights-syntax-meta-diff-range: #8250df; + --color-prettylights-syntax-brackethighlighter-angle: #57606a; + --color-prettylights-syntax-sublimelinter-gutter-mark: #8c959f; + --color-prettylights-syntax-constant-other-reference-link: #0a3069; + --color-btn-text: #494949; + --color-btn-bg: #b8b8b8; + --color-btn-border: #b8b8b8; + --color-btn-shadow: 0 0 transparent; + --color-btn-inset-shadow: 0 0 transparent; + --color-btn-hover-bg: #bdbdbd; + --color-btn-hover-border: #bdbdbd; + --color-btn-active-bg: #b8b8b8; + --color-btn-active-border: #b8b8b8; + --color-btn-selected-bg: #cecece; + --color-btn-primary-text: #fff; + --color-btn-primary-bg: #2da44e; + --color-btn-primary-border: #2da44e; + --color-btn-primary-shadow: 0 0 transparent; + --color-btn-primary-inset-shadow: 0 0 transparent; + --color-btn-primary-hover-bg: #2c974b; + --color-btn-primary-hover-border: #2c974b; + --color-btn-primary-selected-bg: #298e46; + --color-btn-primary-selected-shadow: 0 0 transparent; + --color-btn-primary-disabled-text: #ffffffcc; + --color-btn-primary-disabled-bg: #94d3a2; + --color-btn-primary-disabled-border: #94d3a2; + --color-fg-default: #2f2f2f; + --color-fg-muted: #494949; + --color-fg-subtle: #494949; + --color-canvas-default: #e2e2e2; + --color-canvas-overlay: #e2e2e2; + --color-canvas-inset: #fafafa; + --color-canvas-subtle: #d4d3d3; + --color-border-default: #b8b8b8; + --color-border-muted: #cecece; + --color-neutral-muted: rgba(175, 184, 193, .2); + --color-accent-fg: #0969da; + --color-accent-emphasis: #0969da; + --color-accent-muted: rgba(84, 174, 255, .4); + --color-accent-subtle: #ddf4ff; + --color-success-fg: #1a7f37; + --color-danger-fg: #cf222e; + --color-primer-shadow-inset: inset 0 1px 0 rgba(208, 215, 222, .2); + --color-primer-shadow-focus: 0 0 0 3px rgba(9, 105, 218, .3); + --color-scale-gray-1: #eaeef2; + --color-scale-blue-1: #b6e3ff; + + /*! Extensions from @primer/css/alerts/flash.scss */ + --color-social-reaction-bg-hover: var(--color-scale-gray-1); + --color-social-reaction-bg-reacted-hover: var(--color-scale-blue-1); +} + +main .pagination-loader-container { + background-image: url(https://github.com/images/modules/pulls/progressive-disclosure-line.svg) +} diff --git a/src/styles/giscus.css b/src/styles/giscus.css new file mode 100644 index 00000000..5c309deb --- /dev/null +++ b/src/styles/giscus.css @@ -0,0 +1,87 @@ +/*! + * Modified from GitHub's Dark theme, licensed under the MIT License + * Copyright (c) 2018 GitHub Inc. + * https://github.com/primer/primitives/blob/main/LICENSE + */ +main { + --color-prettylights-syntax-comment: #768390; + --color-prettylights-syntax-constant: #6cb6ff; + --color-prettylights-syntax-entity: #dcbdfb; + --color-prettylights-syntax-storage-modifier-import: #adbac7; + --color-prettylights-syntax-entity-tag: #8ddb8c; + --color-prettylights-syntax-keyword: #f47067; + --color-prettylights-syntax-string: #96d0ff; + --color-prettylights-syntax-variable: #f69d50; + --color-prettylights-syntax-brackethighlighter-unmatched: #e5534b; + --color-prettylights-syntax-invalid-illegal-text: #cdd9e5; + --color-prettylights-syntax-invalid-illegal-bg: #922323; + --color-prettylights-syntax-carriage-return-text: #cdd9e5; + --color-prettylights-syntax-carriage-return-bg: #ad2e2c; + --color-prettylights-syntax-string-regexp: #8ddb8c; + --color-prettylights-syntax-markup-list: #eac55f; + --color-prettylights-syntax-markup-heading: #316dca; + --color-prettylights-syntax-markup-italic: #adbac7; + --color-prettylights-syntax-markup-bold: #adbac7; + --color-prettylights-syntax-markup-deleted-text: #ffd8d3; + --color-prettylights-syntax-markup-deleted-bg: #78191b; + --color-prettylights-syntax-markup-inserted-text: #b4f1b4; + --color-prettylights-syntax-markup-inserted-bg: #1b4721; + --color-prettylights-syntax-markup-changed-text: #ffddb0; + --color-prettylights-syntax-markup-changed-bg: #682d0f; + --color-prettylights-syntax-markup-ignored-text: #adbac7; + --color-prettylights-syntax-markup-ignored-bg: #255ab2; + --color-prettylights-syntax-meta-diff-range: #dcbdfb; + --color-prettylights-syntax-brackethighlighter-angle: #768390; + --color-prettylights-syntax-sublimelinter-gutter-mark: #545d68; + --color-prettylights-syntax-constant-other-reference-link: #96d0ff; + --color-btn-text: #c3c3c3; + --color-btn-bg: #3d3d3d; + --color-btn-border: #3d3d3d; + --color-btn-shadow: 0 0 transparent; + --color-btn-inset-shadow: 0 0 transparent; + --color-btn-hover-bg: #383838; + --color-btn-hover-border: #383838; + --color-btn-active-bg: #3d3d3d; + --color-btn-active-border: #3d3d3d; + --color-btn-selected-bg: #575757; + --color-btn-primary-text: #fff; + --color-btn-primary-bg: #347d39; + --color-btn-primary-border: #347d39; + --color-btn-primary-shadow: 0 0 transparent; + --color-btn-primary-inset-shadow: 0 0 transparent; + --color-btn-primary-hover-bg: #46954a; + --color-btn-primary-hover-border: #46954a; + --color-btn-primary-selected-bg: #347d39; + --color-btn-primary-selected-shadow: 0 0 transparent; + --color-btn-primary-disabled-text: #e6e6e6cc; + --color-btn-primary-disabled-bg: #347d39; + --color-btn-primary-disabled-border: #347d39; + --color-fg-default: #dcdcdc; + --color-fg-muted: #c3c3c3; + --color-fg-subtle: #c3c3c3; + --color-canvas-default: #252525; + --color-canvas-overlay: #252525; + --color-canvas-inset: #1b1b1b; + --color-canvas-subtle: #222222; + --color-border-default: #3d3d3d; + --color-border-muted: #575757; + --color-neutral-muted: rgba(99, 110, 123, .4); + --color-accent-fg: #539bf5; + --color-accent-emphasis: #316dca; + --color-accent-muted: rgba(65, 132, 228, .4); + --color-accent-subtle: rgba(56, 139, 253, .15); + --color-success-fg: #57ab5a; + --color-danger-fg: #e5534b; + --color-primer-shadow-inset: 0 0 transparent; + --color-primer-shadow-focus: 0 0 0 3px #143d79; + --color-scale-gray-7: #373e47; + --color-scale-blue-8: #143d79; + + /*! Extensions from @primer/css/alerts/flash.scss */ + --color-social-reaction-bg-hover: var(--color-scale-gray-7); + --color-social-reaction-bg-reacted-hover: var(--color-scale-blue-8); +} + +main .pagination-loader-container { + background-image: url(https://github.com/images/modules/pulls/progressive-disclosure-line-dark.svg) +} diff --git a/src/styles/global.css b/src/styles/global.css index fba97674..40f4c4a2 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -1394,6 +1394,23 @@ hr { fill: var(--accent-primary); } +.version-tabs { + display: flex; + margin: 20px 0 10px; + box-shadow: inset 0 -1px 0 var(--background-4); +} + +.version-tabs > * { + border-bottom: 2px solid transparent; + padding: 8px 16px; + cursor: pointer; +} + +.version-tabs > .selected { + border-color: var(--text-3); + color: var(--text-1); +} + .ace_editor, .ace_gutter, .ace_gutter .ace_layer, @@ -1437,6 +1454,10 @@ hr { background-color: var(--selection) !important; } +.giscus { + margin-top: 16px; +} + @media screen and (max-width: 720px) { .sound-search-group { margin-bottom: 8px; diff --git a/tsconfig.json b/tsconfig.json index 30205b8a..fc0b6811 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -6,7 +6,7 @@ "moduleResolution": "node", "strict": true, "sourceMap": true, - "skipLibCheck": false, + "skipLibCheck": true, "forceConsistentCasingInFileNames": true, "allowSyntheticDefaultImports": true, "resolveJsonModule": true, diff --git a/vite.config.js b/vite.config.js index 011956c1..c4ac7354 100644 --- a/vite.config.js +++ b/vite.config.js @@ -1,4 +1,5 @@ import preact from '@preact/preset-vite' +import alias from '@rollup/plugin-alias' import html from '@rollup/plugin-html' import { env } from 'process' import copy from 'rollup-plugin-copy' @@ -11,6 +12,14 @@ export default defineConfig({ sourcemap: true, rollupOptions: { plugins: [ + alias({ + entries: [ + { find: 'react', replacement: 'preact/compat' }, + { find: 'react-dom/test-utils', replacement: 'preact/test-utils' }, + { find: 'react-dom', replacement: 'preact/compat' }, + { find: 'react/jsx-runtime', replacement: 'preact/jsx-runtime' }, + ], + }), html({ fileName: '404.html', title: '404', @@ -45,6 +54,8 @@ export default defineConfig({ targets: [ { src: 'src/sitemap.txt', dest: 'dist' }, { src: 'src/sitemap.txt', dest: 'dist', rename: 'sitemap2.txt' }, + { src: 'src/styles/giscus.css', dest: 'dist/assets' }, + { src: 'src/styles/giscus-burn.css', dest: 'dist/assets' }, ], hook: 'writeBundle', }),