diff --git a/package.json b/package.json index baa0850..496bedb 100644 --- a/package.json +++ b/package.json @@ -15,7 +15,8 @@ }, "dependencies": { "html-minifier-terser": "^7.2.0", - "monaco-editor": "^0.48.0" + "svelte-highlight": "^7.6.1", + "svelte-markdown": "^0.4.1" }, "devDependencies": { "@biomejs/biome": "1.7.3", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 3624d7d..30758c2 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -11,9 +11,12 @@ importers: html-minifier-terser: specifier: ^7.2.0 version: 7.2.0 - monaco-editor: - specifier: ^0.48.0 - version: 0.48.0 + svelte-highlight: + specifier: ^7.6.1 + version: 7.6.1 + svelte-markdown: + specifier: ^0.4.1 + version: 0.4.1(svelte@4.2.17) devDependencies: '@biomejs/biome': specifier: 1.7.3 @@ -828,6 +831,9 @@ packages: '@types/html-minifier-terser@7.0.2': resolution: {integrity: sha512-mm2HqV22l8lFQh4r2oSsOEVea+m0qqxEmwpc9kC1p/XzmjLWrReR9D/GRs8Pex2NX/imyEH9c5IU/7tMBQCHOA==} + '@types/marked@5.0.2': + resolution: {integrity: sha512-OucS4KMHhFzhz27KxmWg7J+kIYqyqoW5kdIEI319hqARQQUTqhao3M/F+uFnDXD0Rg72iDDZxZNxq5gvctmLlg==} + '@types/node@20.12.12': resolution: {integrity: sha512-eWLDGF/FOSPtAvEqeRAQ4C8LSA7M1I7i0ky1I8U7kD1J5ITyW3AsRhQrKVoWf5pFKZ2kILsEGJhsI9r93PYnOw==} @@ -1288,6 +1294,10 @@ packages: has-unicode@2.0.1: resolution: {integrity: sha512-8Rf9Y83NBReMnx0gFzA8JImQACstCYWUplepDa9xprwwtmgEZUF0h/i5xSA625zB/I37EtrswSST6OXxwaaIJQ==} + highlight.js@11.9.0: + resolution: {integrity: sha512-fJ7cW7fQGCYAkgv4CPfwFHrfd/cLS4Hau96JuJ+ZTOWhjnhoeN1ub1tFmALm/+lW5z4WCAuAV9bm05AP0mS6Gw==} + engines: {node: '>=12.0.0'} + html-minifier-terser@7.2.0: resolution: {integrity: sha512-tXgn3QfqPIpGl9o+K5tpcj3/MN4SfLtsx2GWwBC3SSd0tXQGyF3gsSqad8loJgKZGM3ZxbYDd5yhiBIdWpmvLA==} engines: {node: ^14.13.1 || >=16.0.0} @@ -1426,6 +1436,11 @@ packages: resolution: {integrity: sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==} engines: {node: '>=8'} + marked@5.1.2: + resolution: {integrity: sha512-ahRPGXJpjMjwSOlBoTMZAK7ATXkli5qCPxZ21TG44rx1KEo44bii4ekgTDQPNRQ4Kh7JMb9Ub1PVk1NxRSsorg==} + engines: {node: '>= 16'} + hasBin: true + mathml-tag-names@2.1.3: resolution: {integrity: sha512-APMBEanjybaPzUrfqU0IMU5I0AswKMH7k8OTLs0vvV4KZpExkTkY87nR/zpbuTPj+gARop7aGUbl11pnDfW6xg==} @@ -1464,9 +1479,6 @@ packages: engines: {node: '>=10'} hasBin: true - monaco-editor@0.48.0: - resolution: {integrity: sha512-goSDElNqFfw7iDHMg8WDATkfcyeLTNpBHQpO8incK6p5qZt5G/1j41X0xdGzpIkGojGXM+QiRQyLjnfDVvrpwA==} - mri@1.2.0: resolution: {integrity: sha512-tzzskb3bG8LvYGFF/mDTpq3jpI6Q9wc3LEmBaghu+DdCssd1FakN7Bc0hVNmEyGq1bq3RgfkCb3cmQLpNPOroA==} engines: {node: '>=4'} @@ -1974,12 +1986,20 @@ packages: resolution: {integrity: sha512-QBDPHyPQDRTy9ku4URNGY5Lah8PAaXs6tAAwp55sL5WCsSW7GIfdf6W5ixfziW+t7wh3GVvHyHHyQ1ESsoRvaA==} engines: {node: '>=14.18'} + svelte-highlight@7.6.1: + resolution: {integrity: sha512-YIpA6LBVpghQndBsbZQLl3ufEje179vQTtC7FH/utbEmUwYecIXsBq4mcwNkCeUuCrpcaF0DkrppWmMp/ZoPfA==} + svelte-hmr@0.16.0: resolution: {integrity: sha512-Gyc7cOS3VJzLlfj7wKS0ZnzDVdv3Pn2IuVeJPk9m2skfhcu5bq3wtIZyQGggr7/Iim5rH5cncyQft/kRLupcnA==} engines: {node: ^12.20 || ^14.13.1 || >= 16} peerDependencies: svelte: ^3.19.0 || ^4.0.0 + svelte-markdown@0.4.1: + resolution: {integrity: sha512-pOlLY6EruKJaWI9my/2bKX8PdTeP5CM0s4VMmwmC2prlOkjAf+AOmTM4wW/l19Y6WZ87YmP8+ZCJCCwBChWjYw==} + peerDependencies: + svelte: ^4.0.0 + svelte-parse-markup@0.1.2: resolution: {integrity: sha512-DycY7DJr7VqofiJ63ut1/NEG92HrWWL56VWITn/cJCu+LlZhMoBkBXT4opUitPEEwbq1nMQbv4vTKUfbOqIW1g==} peerDependencies: @@ -2742,6 +2762,8 @@ snapshots: '@types/html-minifier-terser@7.0.2': {} + '@types/marked@5.0.2': {} + '@types/node@20.12.12': dependencies: undici-types: 5.26.5 @@ -3224,6 +3246,8 @@ snapshots: has-unicode@2.0.1: {} + highlight.js@11.9.0: {} + html-minifier-terser@7.2.0: dependencies: camel-case: 4.1.2 @@ -3346,6 +3370,8 @@ snapshots: dependencies: semver: 6.3.1 + marked@5.1.2: {} + mathml-tag-names@2.1.3: {} mdn-data@2.0.30: {} @@ -3376,8 +3402,6 @@ snapshots: mkdirp@1.0.4: {} - monaco-editor@0.48.0: {} - mri@1.2.0: {} mrmime@2.0.0: {} @@ -3973,10 +3997,20 @@ snapshots: has-flag: 4.0.0 supports-color: 7.2.0 + svelte-highlight@7.6.1: + dependencies: + highlight.js: 11.9.0 + svelte-hmr@0.16.0(svelte@4.2.17): dependencies: svelte: 4.2.17 + svelte-markdown@0.4.1(svelte@4.2.17): + dependencies: + '@types/marked': 5.0.2 + marked: 5.1.2 + svelte: 4.2.17 + svelte-parse-markup@0.1.2(svelte@4.2.17): dependencies: svelte: 4.2.17 diff --git a/src/app.html b/src/app.html index 3e0841f..05d255e 100644 --- a/src/app.html +++ b/src/app.html @@ -1,5 +1,4 @@ - @@ -23,15 +22,10 @@ height: 100vh; padding: 0; } - - #app { - width: 100%; - height: 100%; - } %sveltekit.head% -
%sveltekit.body%
+
%sveltekit.body%
diff --git a/src/lib/components/monaco-viewer/MonacoFilename.svelte b/src/lib/components/monaco-viewer/MonacoFilename.svelte new file mode 100644 index 0000000..c37e17a --- /dev/null +++ b/src/lib/components/monaco-viewer/MonacoFilename.svelte @@ -0,0 +1,28 @@ + + +
+

{file.name}

+
+ + \ No newline at end of file diff --git a/src/lib/components/monaco-viewer/MonacoViewer.svelte b/src/lib/components/monaco-viewer/MonacoViewer.svelte new file mode 100644 index 0000000..20f9f62 --- /dev/null +++ b/src/lib/components/monaco-viewer/MonacoViewer.svelte @@ -0,0 +1,157 @@ + + + + +
+
+

EXPLORER

+ ⋯ +
+ +
+ +
+
+ {#if activeFile} + {#if activeFile.type === "markdown"} + + {:else if activeFile.type === "svelte"} + + {:else} + + {/if} + {/if} +
+
+ + + + + + + \ No newline at end of file diff --git a/src/lib/components/monaco-viewer/monaco-types.ts b/src/lib/components/monaco-viewer/monaco-types.ts new file mode 100644 index 0000000..b283acb --- /dev/null +++ b/src/lib/components/monaco-viewer/monaco-types.ts @@ -0,0 +1,20 @@ +import PreviewIcon from "$lib/components/monaco-viewer/preview.svg"; + +export type FileType = "markdown" | "svelte"; + +export const EXTS_TO_TYPE: { [key: string]: FileType } = { + svelte: "svelte", + md: "markdown", +}; + +export const FILE_ICONS: { [key in FileType]: string } = { + markdown: PreviewIcon, + svelte: PreviewIcon, +}; + +export interface MonacoFile { + type: FileType; + name: string; + contents: string; + open: boolean; +} diff --git a/src/lib/components/monaco-viewer/preview.svg b/src/lib/components/monaco-viewer/preview.svg new file mode 100644 index 0000000..76eae88 --- /dev/null +++ b/src/lib/components/monaco-viewer/preview.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/lib/media/monaco-files/+page.svelte b/src/lib/media/monaco-files/+page.svelte new file mode 100644 index 0000000..3aea62b --- /dev/null +++ b/src/lib/media/monaco-files/+page.svelte @@ -0,0 +1 @@ +

This is an example Svelte file

\ No newline at end of file diff --git a/src/lib/media/monaco-files/README.md b/src/lib/media/monaco-files/README.md new file mode 100644 index 0000000..68f4cf2 --- /dev/null +++ b/src/lib/media/monaco-files/README.md @@ -0,0 +1 @@ +This *is* an **example** Markdown file \ No newline at end of file diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index d1cda41..e5e3796 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -1,16 +1,43 @@ -
- + transparent hopper logo
-

This will be a Monaco editor

+

Contact Me

@@ -34,7 +61,6 @@ section:first-child { #projects { height: 90vh; - background-color: #1f1f1f; box-shadow: 0 0 10vh 32px black; margin-top: 10vh; z-index: 1;