Merge pull request #4 from ff6347/fix/responsiveness

fix: Responsive style for output
ff6347 · Nov 8, 2023 · 51c19b3 · 51c19b3
2 parents c42ab4a + 65247b4
commit 51c19b3
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 8 deletions.
diff --git a/vanilla/release.config.cjs → release.config.cjs b/vanilla/release.config.cjs → release.config.cjs
diff --git a/src/components/Sandbox.tsx b/src/components/Sandbox.tsx
@@ -60,15 +60,13 @@ export default function Sandbox(props: SandboxProps) {
 				iframeParent.removeChild(iframe);
 				const blob = new Blob([source], { type: "text/html" });
 				const blobUrl = URL.createObjectURL(blob);
-
 				iframe.src = blobUrl;
 				iframeParent.appendChild(iframe);
 			}
 		}
 	}, [code]);
 	const handleEditorChange = (value, event) => {
 		debouncedSetCode(value);
-
 		// here is the current value
 		// debounce(() => setCode((prev) => value));
 	};
@@ -80,7 +78,9 @@ export default function Sandbox(props: SandboxProps) {
 
 	const handleEditorWillMount = (monaco) => {
 		monaco.languages.typescript.javascriptDefaults.setDiagnosticsOptions({
+			...monaco.languages.typescript.javascriptDefaults.getDiagnosticsOptions(),
 			noSemanticValidation: true,
+			noSuggestionDiagnostics: false,
 			noSyntaxValidation: false,
 		});
 
@@ -104,6 +104,10 @@ export default function Sandbox(props: SandboxProps) {
 			index,
 			"@types/p5/index.d.ts",
 		);
+		monaco.languages.typescript.javascriptDefaults.setCompilerOptions({
+			...monaco.languages.typescript.javascriptDefaults.getCompilerOptions(),
+			checkJs: true, // need this
+		});
 		// console.log("beforeMount: the monaco instance:", monaco);
 	};
 

diff --git a/src/components/sandox.css b/src/components/sandox.css
@@ -45,7 +45,7 @@ h3 {
 	max-width: 100vw;
 	resize: horizontal;
 	overflow: hidden;
-	border-right: 2px solid hsl(0 0% 10%);
+	border-right: 1px solid hsl(0 0% 70%);
 }
 
 .output {
@@ -92,14 +92,17 @@ xmp {
 		width: 100vw;
 	}
 
+	.sandbox {
+		flex-direction: column;
+	}
 	.editor {
 		resize: none;
 		border-right: none;
 	}
 
 	.output {
 		height: 100%;
-		border-top: 2px solid hsl(0 0% 10%);
+		border-top: 1px solid hsl(0 0% 90%);
 	}
 
 	.source {

diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -9,15 +9,17 @@ import Sandbox from "../components/Sandbox.tsx";
 			title="Draft"
 			description="draft"
 			initialCode={`
-
+//@ts-check
 function setup(){
 	const canvas = createCanvas(100,100);
 	canvas.parent("sketch");
 	background(0);
 }
-
-function draw(){}
-
+function draw(){
+	circle((1/sqrt(random())*50) - width/2,
+	random(height),
+	random(4))
+}
 `}
 			client:only
 		/>