diff --git a/package.json b/package.json
index dbaee0d..09d3d46 100644
--- a/package.json
+++ b/package.json
@@ -10,7 +10,8 @@
},
"dependencies": {
"@vanilla-extract/css": "^1.15.5",
- "next": "14.2.9",
+ "next": "^14.2.12",
+ "prism-react-renderer": "^2.4.0",
"react": "^18",
"react-dom": "^18"
},
diff --git a/src/app/[...file]/content.tsx b/src/app/[...file]/content.tsx
index 003ecf9..c3099d0 100644
--- a/src/app/[...file]/content.tsx
+++ b/src/app/[...file]/content.tsx
@@ -60,7 +60,36 @@ export default function Content({ src }: { src: string}) {
return response.text();
},
postprocess: (data: string) => {
- set_content();
+ 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();
}
};
}
diff --git a/src/app/[...file]/types/text.css.ts b/src/app/[...file]/types/text.css.ts
index 3d9e1fa..2737583 100644
--- a/src/app/[...file]/types/text.css.ts
+++ b/src/app/[...file]/types/text.css.ts
@@ -5,23 +5,21 @@ import * as colors from '../../colors.css'
export const group = style({
display: 'flex',
fontFamily: 'monospace',
- fontSize: '1.1em',
+ fontSize: '1em',
lineHeight: '1.4em',
- whiteSpace: 'pre-wrap',
+ whiteSpace: 'pre',
tabSize: 4,
+ '@media': {
+ 'screen and (min-width: 768px)': {
+ fontSize: '1.1em',
+ }
+ }
});
export const line_numbers = style({
- margin: 0,
+ margin: '0',
marginRight: '0.5em',
- borderRight: `1px solid ${colors.background2}`,
paddingRight: '0.5em',
color: colors.foreground2,
-});
-
-export const content = style({
-});
-
-export const text = style({
- margin: 0,
+ textAlign: 'right',
});
diff --git a/src/app/[...file]/types/text.tsx b/src/app/[...file]/types/text.tsx
index 34114f6..3517996 100644
--- a/src/app/[...file]/types/text.tsx
+++ b/src/app/[...file]/types/text.tsx
@@ -1,24 +1,46 @@
+import { useEffect, useState } from 'react';
+import { Highlight, themes } from 'prism-react-renderer';
+
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');
- return (
-
-
- {lines.map((_, index) => {
- return
{index}
;
- })}
-
-
- {lines.map((line, index) => {
- if (line != '') {
- return
{line}
;
- } else {
- return
{'\n'}
;
- }
- })}
-
-
- );
+ const media_matcher = window.matchMedia('(prefers-color-scheme: light)');
+ const [light_theme, set_light_theme] = useState(media_matcher.matches);
+
+ function check_light_theme(event) {
+ if (light_theme != event.matches) {
+ set_light_theme(!light_theme);
+ }
+ }
+
+ useEffect(() => {
+ media_matcher.addEventListener('change', check_light_theme);
+ return () => {
+ media_matcher.removeEventListener('change', check_light_theme);
+ };
+ });
+
+ return
+
{lines.map((_, index) => `${index}\n`)}
+
+ {({ className, style, tokens, getLineProps, getTokenProps }) => (
+
+ {tokens.map((line, i) => (
+
+ {line.map((token, key) => (
+
+ ))}
+
+ ))}
+
+ )}
+
+
;
}
diff --git a/src/app/colors.css.ts b/src/app/colors.css.ts
index 243e4ca..7913d85 100644
--- a/src/app/colors.css.ts
+++ b/src/app/colors.css.ts
@@ -11,7 +11,7 @@ globalStyle(':root', {
[background]: '#000000',
[background2]: '#303030',
[foreground]: '#F0F0F0',
- [foreground2]: '#777777',
+ [foreground2]: '#888888',
[accent]: '#B454EA',
},
'@media': {
@@ -20,7 +20,7 @@ globalStyle(':root', {
[background]: '#FFFFFF',
[background2]: '#DADADA',
[foreground]: '#171717',
- [foreground2]: '#333333',
+ [foreground2]: '#777777',
[accent]: '#9834D4',
}
}