Text display is good now

This commit is contained in:
Gnarwhal 2024-09-18 21:47:51 +01:00
parent 3fc1ca3591
commit 56d393fcc8
Signed by: Gnarwhal
GPG key ID: B9B7561C0C90884D
6 changed files with 156 additions and 88 deletions

View file

@ -10,7 +10,8 @@
}, },
"dependencies": { "dependencies": {
"@vanilla-extract/css": "^1.15.5", "@vanilla-extract/css": "^1.15.5",
"next": "14.2.9", "next": "^14.2.12",
"prism-react-renderer": "^2.4.0",
"react": "^18", "react": "^18",
"react-dom": "^18" "react-dom": "^18"
}, },

View file

@ -60,7 +60,36 @@ export default function Content({ src }: { src: string}) {
return response.text(); return response.text();
}, },
postprocess: (data: string) => { postprocess: (data: string) => {
set_content(<Text text={data} />); const languages = {
// "markup",
js: "jsx",
mjs: "jsx",
jsx: "jsx",
// "js-extras",
ts: "tsx",
tsx: "tsx",
swift: "swift",
kt: "kotlin",
kts: "kotlin",
ktm: "kotlin",
// "objectivec",
// "reason",
rs: "rust",
// "graphql",
yml: "yaml",
yaml: "yaml",
go: "go",
c: "cpp",
cpp: "cpp",
cxx: "cpp",
h: "cpp",
hpp: "cpp",
hxx: "cpp",
py: "python",
json: "json",
}
const split = window.location.pathname.split('.');
set_content(<Text language={split.length == 0 ? 'none' : languages[split[split.length - 1]]} text={data} />);
} }
}; };
} }

View file

@ -5,23 +5,21 @@ import * as colors from '../../colors.css'
export const group = style({ export const group = style({
display: 'flex', display: 'flex',
fontFamily: 'monospace', fontFamily: 'monospace',
fontSize: '1.1em', fontSize: '1em',
lineHeight: '1.4em', lineHeight: '1.4em',
whiteSpace: 'pre-wrap', whiteSpace: 'pre',
tabSize: 4, tabSize: 4,
'@media': {
'screen and (min-width: 768px)': {
fontSize: '1.1em',
}
}
}); });
export const line_numbers = style({ export const line_numbers = style({
margin: 0, margin: '0',
marginRight: '0.5em', marginRight: '0.5em',
borderRight: `1px solid ${colors.background2}`,
paddingRight: '0.5em', paddingRight: '0.5em',
color: colors.foreground2, color: colors.foreground2,
}); textAlign: 'right',
export const content = style({
});
export const text = style({
margin: 0,
}); });

View file

@ -1,24 +1,46 @@
import { useEffect, useState } from 'react';
import { Highlight, themes } from 'prism-react-renderer';
import * as style from './text.css'; import * as style from './text.css';
export default function Text({ text }: { text: string }) { export default function Text({ language, text }: { language: string, text: string }) {
console.log(language);
const lines = text.split('\n'); const lines = text.split('\n');
return ( const media_matcher = window.matchMedia('(prefers-color-scheme: light)');
<div className={style.group}> const [light_theme, set_light_theme] = useState(media_matcher.matches);
<div className={style.line_numbers}>
{lines.map((_, index) => { function check_light_theme(event) {
return <p key={index} className={style.text}>{index}</p>; if (light_theme != event.matches) {
})} set_light_theme(!light_theme);
</div>
<div className={style.content}>
{lines.map((line, index) => {
if (line != '') {
return <p key={index} className={style.text}>{line}</p>;
} else {
return <p key={index} className={style.text}>{'\n'}</p>;
} }
})} }
</div>
</div> useEffect(() => {
); media_matcher.addEventListener('change', check_light_theme);
return () => {
media_matcher.removeEventListener('change', check_light_theme);
};
});
return <div className={style.group}>
<p className={style.line_numbers}>{lines.map((_, index) => `${index}\n`)}</p>
<Highlight
theme={themes[light_theme ? 'nightOwlLight' : 'oneDark']}
code={text}
language={language}
>
{({ className, style, tokens, getLineProps, getTokenProps }) => (
<div>
{tokens.map((line, i) => (
<div key={i} {...getLineProps({ line })}>
{line.map((token, key) => (
<span key={key} {...getTokenProps({ token })} />
))}
</div>
))}
</div>
)}
</Highlight>
</div>;
} }

View file

@ -11,7 +11,7 @@ globalStyle(':root', {
[background]: '#000000', [background]: '#000000',
[background2]: '#303030', [background2]: '#303030',
[foreground]: '#F0F0F0', [foreground]: '#F0F0F0',
[foreground2]: '#777777', [foreground2]: '#888888',
[accent]: '#B454EA', [accent]: '#B454EA',
}, },
'@media': { '@media': {
@ -20,7 +20,7 @@ globalStyle(':root', {
[background]: '#FFFFFF', [background]: '#FFFFFF',
[background2]: '#DADADA', [background2]: '#DADADA',
[foreground]: '#171717', [foreground]: '#171717',
[foreground2]: '#333333', [foreground2]: '#777777',
[accent]: '#9834D4', [accent]: '#9834D4',
} }
} }

126
yarn.lock
View file

@ -516,10 +516,10 @@
"@jridgewell/resolve-uri" "^3.1.0" "@jridgewell/resolve-uri" "^3.1.0"
"@jridgewell/sourcemap-codec" "^1.4.14" "@jridgewell/sourcemap-codec" "^1.4.14"
"@next/env@14.2.9": "@next/env@14.2.12":
version "14.2.9" version "14.2.12"
resolved "https://registry.yarnpkg.com/@next/env/-/env-14.2.9.tgz#f7fed48efa51b069cfc611082ad0101756df4c6a" resolved "https://registry.yarnpkg.com/@next/env/-/env-14.2.12.tgz#15f1d1065a420416e92f177fc8c94ee4ecc2669d"
integrity sha512-hnDAoDPMii31V0ivibI8p6b023jOF1XblWTVjsDUoZKwnZlaBtJFZKDwFqi22R8r9i6W08dThUWU7Bsh2Rg8Ww== integrity sha512-3fP29GIetdwVIfIRyLKM7KrvJaqepv+6pVodEbx0P5CaMLYBtx+7eEg8JYO5L9sveJO87z9eCReceZLi0hxO1Q==
"@next/eslint-plugin-next@14.2.9": "@next/eslint-plugin-next@14.2.9":
version "14.2.9" version "14.2.9"
@ -528,50 +528,50 @@
dependencies: dependencies:
glob "10.3.10" glob "10.3.10"
"@next/swc-darwin-arm64@14.2.9": "@next/swc-darwin-arm64@14.2.12":
version "14.2.9" version "14.2.12"
resolved "https://registry.yarnpkg.com/@next/swc-darwin-arm64/-/swc-darwin-arm64-14.2.9.tgz#6d6880b580a0cb8d71be929d5399f0904d867e0a" resolved "https://registry.yarnpkg.com/@next/swc-darwin-arm64/-/swc-darwin-arm64-14.2.12.tgz#263c68fd55538624a6236552d153a3487d601a33"
integrity sha512-/kfQifl3uLYi3DlwFlzCkgxe6fprJNLzzTUFknq3M5wGYicDIbdGlxUl6oHpVLJpBB/CBY3Y//gO6alz/K4NWA== integrity sha512-crHJ9UoinXeFbHYNok6VZqjKnd8rTd7K3Z2zpyzF1ch7vVNKmhjv/V7EHxep3ILoN8JB9AdRn/EtVVyG9AkCXw==
"@next/swc-darwin-x64@14.2.9": "@next/swc-darwin-x64@14.2.12":
version "14.2.9" version "14.2.12"
resolved "https://registry.yarnpkg.com/@next/swc-darwin-x64/-/swc-darwin-x64-14.2.9.tgz#56af7531ed75638923cd8cba9a43b724bcfd7fea" resolved "https://registry.yarnpkg.com/@next/swc-darwin-x64/-/swc-darwin-x64-14.2.12.tgz#0fc05a99094ac531692d552743f62f7dbbcb5bc8"
integrity sha512-tK/RyhCmOCiXQ9IVdFrBbZOf4/1+0RSuJkebXU2uMEsusS51TjIJO4l8ZmEijH9gZa0pJClvmApRHi7JuBqsRw== integrity sha512-JbEaGbWq18BuNBO+lCtKfxl563Uw9oy2TodnN2ioX00u7V1uzrsSUcg3Ep9ce+P0Z9es+JmsvL2/rLphz+Frcw==
"@next/swc-linux-arm64-gnu@14.2.9": "@next/swc-linux-arm64-gnu@14.2.12":
version "14.2.9" version "14.2.12"
resolved "https://registry.yarnpkg.com/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-14.2.9.tgz#d3e9a1fdf8eabd510c1139446178bfea2737c1e5" resolved "https://registry.yarnpkg.com/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-14.2.12.tgz#56214b10cdb1c47d6f26ae2dd00bc9b32fd2a694"
integrity sha512-tS5eqwsp2nO7mzywRUuFYmefNZsUKM/mTG3exK2jIHv9TEVklE1SByB1KMhFkqlit1PxS9YK1tV8BOV90Wpbrw== integrity sha512-qBy7OiXOqZrdp88QEl2H4fWalMGnSCrr1agT/AVDndlyw2YJQA89f3ttR/AkEIP9EkBXXeGl6cC72/EZT5r6rw==
"@next/swc-linux-arm64-musl@14.2.9": "@next/swc-linux-arm64-musl@14.2.12":
version "14.2.9" version "14.2.12"
resolved "https://registry.yarnpkg.com/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-14.2.9.tgz#82e570b25b471e9aabba70c8f62ccb7dd33e45fa" resolved "https://registry.yarnpkg.com/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-14.2.12.tgz#017ccb35e94dd5336f38bdab90ccc7163467e0d1"
integrity sha512-8svpeTFNAMTUMKQbEzE8qRAwl9o7mNBv7LR1bmSkQvo1oy4WrNyZbhWsldOiKrc4mZ5dfQkGYsI9T75mIFMfeA== integrity sha512-EfD9L7o9biaQxjwP1uWXnk3vYZi64NVcKUN83hpVkKocB7ogJfyH2r7o1pPnMtir6gHZiGCeHKagJ0yrNSLNHw==
"@next/swc-linux-x64-gnu@14.2.9": "@next/swc-linux-x64-gnu@14.2.12":
version "14.2.9" version "14.2.12"
resolved "https://registry.yarnpkg.com/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-14.2.9.tgz#277884aecc9ef7cddc9079d2dc137ecaa537ce0c" resolved "https://registry.yarnpkg.com/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-14.2.12.tgz#b5df80780eceef6b44a0cedfe7234d34a60af1f9"
integrity sha512-0HNulLWpKTB7H5BhHCkEhcRAnWUHeAYCftrrGw3QC18+ZywTdAoPv/zEqKy/0adqt+ks4JDdlgSQ1lNKOKjo0A== integrity sha512-iQ+n2pxklJew9IpE47hE/VgjmljlHqtcD5UhZVeHICTPbLyrgPehaKf2wLRNjYH75udroBNCgrSSVSVpAbNoYw==
"@next/swc-linux-x64-musl@14.2.9": "@next/swc-linux-x64-musl@14.2.12":
version "14.2.9" version "14.2.12"
resolved "https://registry.yarnpkg.com/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-14.2.9.tgz#6fd60f804c95b9cd8abf178424b76b63806c9b53" resolved "https://registry.yarnpkg.com/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-14.2.12.tgz#553ad8dd26e8fce343f2b01d741dffc8bb909e37"
integrity sha512-hhVFViPHLAVUJRNtwwm609p9ozWajOmRvzOZzzKXgiVGwx/CALxlMUeh+M+e0Zj6orENhWLZeilOPHpptuENsA== integrity sha512-rFkUkNwcQ0ODn7cxvcVdpHlcOpYxMeyMfkJuzaT74xjAa5v4fxP4xDk5OoYmPi8QNLDs3UgZPMSBmpBuv9zKWA==
"@next/swc-win32-arm64-msvc@14.2.9": "@next/swc-win32-arm64-msvc@14.2.12":
version "14.2.9" version "14.2.12"
resolved "https://registry.yarnpkg.com/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-14.2.9.tgz#f7d99c80d118e29a5910f8925ff11eb29fd775b3" resolved "https://registry.yarnpkg.com/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-14.2.12.tgz#cf9c3907f43b9a0cbe2f10a46f6c9f5de05ba9dc"
integrity sha512-p/v6XlOdrk06xfN9z4evLNBqftVQUWiyduQczCwSj7hNh8fWTbzdVxsEiNOcajMXJbQiaX/ZzZdFgKVmmJnnGQ== integrity sha512-PQFYUvwtHs/u0K85SG4sAdDXYIPXpETf9mcEjWc0R4JmjgMKSDwIU/qfZdavtP6MPNiMjuKGXHCtyhR/M5zo8g==
"@next/swc-win32-ia32-msvc@14.2.9": "@next/swc-win32-ia32-msvc@14.2.12":
version "14.2.9" version "14.2.12"
resolved "https://registry.yarnpkg.com/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-14.2.9.tgz#e233fd707d827786a676df4b858345e8812cbae3" resolved "https://registry.yarnpkg.com/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-14.2.12.tgz#cad79313b383e95e6d53bdb631b47a26e63146e0"
integrity sha512-IcW9dynWDjMK/0M05E3zopbRen7v0/yEaMZbHFOSS1J/w+8YG3jKywOGZWNp/eCUVtUUXs0PW+7Lpz8uLu+KQA== integrity sha512-FAj2hMlcbeCV546eU2tEv41dcJb4NeqFlSXU/xL/0ehXywHnNpaYajOUvn3P8wru5WyQe6cTZ8fvckj/2XN4Vw==
"@next/swc-win32-x64-msvc@14.2.9": "@next/swc-win32-x64-msvc@14.2.12":
version "14.2.9" version "14.2.12"
resolved "https://registry.yarnpkg.com/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-14.2.9.tgz#c71cc74a6247ddcb4ec1b0e73f52e084c71efe9b" resolved "https://registry.yarnpkg.com/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-14.2.12.tgz#9d5b2f2733221ae85c3e5c6d4b6f8f1da32d5cae"
integrity sha512-gcbpoXyWZdVOBgNa5BRzynrL5UR1nb2ZT38yKgnphYU9UHjeecnylMHntrQiMg/QtONDcJPFC/PmsS47xIRYoA== integrity sha512-yu8QvV53sBzoIVRHsxCHqeuS8jYq6Lrmdh0briivuh+Brsp6xjg80MAozUsBTAV9KNmY08KlX0KYTWz1lbPzEg==
"@nodelib/fs.scandir@2.1.5": "@nodelib/fs.scandir@2.1.5":
version "2.1.5" version "2.1.5"
@ -736,6 +736,11 @@
dependencies: dependencies:
undici-types "~6.19.2" undici-types "~6.19.2"
"@types/prismjs@^1.26.0":
version "1.26.4"
resolved "https://registry.yarnpkg.com/@types/prismjs/-/prismjs-1.26.4.tgz#1a9e1074619ce1d7322669e5b46fbe823925103a"
integrity sha512-rlAnzkW2sZOjbqZ743IHUhFcvzaGbqijwOu8QZnZCjfQzBqFE3s4lOTJEsxikImav9uzz/42I+O7YUs1mWgMlg==
"@types/prop-types@*": "@types/prop-types@*":
version "15.7.12" version "15.7.12"
resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.12.tgz#12bb1e2be27293c1406acb6af1c3f3a1481d98c6" resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.12.tgz#12bb1e2be27293c1406acb6af1c3f3a1481d98c6"
@ -1191,6 +1196,11 @@ client-only@0.0.1:
resolved "https://registry.yarnpkg.com/client-only/-/client-only-0.0.1.tgz#38bba5d403c41ab150bff64a95c85013cf73bca1" resolved "https://registry.yarnpkg.com/client-only/-/client-only-0.0.1.tgz#38bba5d403c41ab150bff64a95c85013cf73bca1"
integrity sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA== integrity sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==
clsx@^2.0.0:
version "2.1.1"
resolved "https://registry.yarnpkg.com/clsx/-/clsx-2.1.1.tgz#eed397c9fd8bd882bfb18deab7102049a2f32999"
integrity sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==
color-convert@^1.9.0: color-convert@^1.9.0:
version "1.9.3" version "1.9.3"
resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8" resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8"
@ -2585,12 +2595,12 @@ natural-compare@^1.4.0:
resolved "https://registry.yarnpkg.com/natural-compare/-/natural-compare-1.4.0.tgz#4abebfeed7541f2c27acfb29bdbbd15c8d5ba4f7" resolved "https://registry.yarnpkg.com/natural-compare/-/natural-compare-1.4.0.tgz#4abebfeed7541f2c27acfb29bdbbd15c8d5ba4f7"
integrity sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw== integrity sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==
next@14.2.9: next@^14.2.12:
version "14.2.9" version "14.2.12"
resolved "https://registry.yarnpkg.com/next/-/next-14.2.9.tgz#51d0e067cd9eb8a51fd5c0efd5d8f28181849729" resolved "https://registry.yarnpkg.com/next/-/next-14.2.12.tgz#39d52c090c40980f4ae56f485ad234b777ebc955"
integrity sha512-3CzBNo6BuJnRjcQvRw+irnU1WiuJNZEp+dkzkt91y4jeIDN/Emg95F+takSYiLpJ/HkxClVQRyqiTwYce5IVqw== integrity sha512-cDOtUSIeoOvt1skKNihdExWMTybx3exnvbFbb9ecZDIxlvIbREQzt9A5Km3Zn3PfU+IFjyYGsHS+lN9VInAGKA==
dependencies: dependencies:
"@next/env" "14.2.9" "@next/env" "14.2.12"
"@swc/helpers" "0.5.5" "@swc/helpers" "0.5.5"
busboy "1.6.0" busboy "1.6.0"
caniuse-lite "^1.0.30001579" caniuse-lite "^1.0.30001579"
@ -2598,15 +2608,15 @@ next@14.2.9:
postcss "8.4.31" postcss "8.4.31"
styled-jsx "5.1.1" styled-jsx "5.1.1"
optionalDependencies: optionalDependencies:
"@next/swc-darwin-arm64" "14.2.9" "@next/swc-darwin-arm64" "14.2.12"
"@next/swc-darwin-x64" "14.2.9" "@next/swc-darwin-x64" "14.2.12"
"@next/swc-linux-arm64-gnu" "14.2.9" "@next/swc-linux-arm64-gnu" "14.2.12"
"@next/swc-linux-arm64-musl" "14.2.9" "@next/swc-linux-arm64-musl" "14.2.12"
"@next/swc-linux-x64-gnu" "14.2.9" "@next/swc-linux-x64-gnu" "14.2.12"
"@next/swc-linux-x64-musl" "14.2.9" "@next/swc-linux-x64-musl" "14.2.12"
"@next/swc-win32-arm64-msvc" "14.2.9" "@next/swc-win32-arm64-msvc" "14.2.12"
"@next/swc-win32-ia32-msvc" "14.2.9" "@next/swc-win32-ia32-msvc" "14.2.12"
"@next/swc-win32-x64-msvc" "14.2.9" "@next/swc-win32-x64-msvc" "14.2.12"
node-releases@^2.0.18: node-releases@^2.0.18:
version "2.0.18" version "2.0.18"
@ -2808,6 +2818,14 @@ prelude-ls@^1.2.1:
resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396" resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396"
integrity sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g== integrity sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==
prism-react-renderer@^2.4.0:
version "2.4.0"
resolved "https://registry.yarnpkg.com/prism-react-renderer/-/prism-react-renderer-2.4.0.tgz#c5ea692029c2f8b3fd04f63662d04ffd4eaf10a0"
integrity sha512-327BsVCD/unU4CNLZTWVHyUHKnsqcvj2qbPlQ8MiBE2eq2rgctjigPA1Gp9HLF83kZ20zNN6jgizHJeEsyFYOw==
dependencies:
"@types/prismjs" "^1.26.0"
clsx "^2.0.0"
prop-types@^15.8.1: prop-types@^15.8.1:
version "15.8.1" version "15.8.1"
resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5" resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"