updates

Author: JustDeveloper1

lib/builder.js

@@ -36,11 +36,12 @@ const Builder = () => {
     const router = useRouter();
 
     const monaco_version = useMonacoVersion(router.asPath) || defaultMonacoVersion;
+    const randomType = ["redirect", "compress", "docs"];
 
     return (
         <>
             <div className='builder'>
-                <div><span>{translate.raw('builder-file')}</span><input id='builder-filepath' placeholder='index' /></div>
+                <div><span>{translate.raw('builder-file')}</span><input id='builder-filepath' placeholder='index' value="just.config.js" data-value="just" /></div>
                 <span>{translate.raw('builder-filecontent')}</span>
                 <div id="monaco" />
                 <div><span>{translate.raw('builder-filetype')}</span><Select placeholder={translate.raw('builder-language')} items={[['JavaScript', '/img/js.svg']]} /></div>
@@ -90,7 +91,7 @@ const Builder = () => {
             <script src={`/third-party/monaco-editor/${monaco_version}/package/min/vs/loader.js`}></script>
             <script src={`/third-party/monaco-editor/${monaco_version}/package/min/vs/editor/editor.main.nls.js`}></script>
             <script src={`/third-party/monaco-editor/${monaco_version}/package/min/vs/editor/editor.main.js`}></script>
-            <Script id="builder">
+            <Script id="builder" strategy="afterInteractive">
                 {`
                     var h_div = document.getElementById('monaco');
                     const defwidth = window.innerWidth;
@@ -101,11 +102,12 @@ const Builder = () => {
                     });
                     var editor = monaco.editor.create(h_div, {
                         value: [
-                            'function x() {',
-                            '\\tconsole.log("Hello world!");',
+                            'module.exports = {',
+                            '\\ttype: "${randomType[Math.floor(Math.random() * randomType.length)]}"',
                             '}'
                         ].join('\\n'),
-                        language: 'javascript'
+                        language: 'javascript',
+                        fontFamily: "'Source Code Pro', Consolas, 'Courier New', monospace"
                     });
                 `}
             </Script>

pages/style.css

@@ -52,6 +52,18 @@ body {
     left: 50%;
     translate: -50% 0%;
 }
+.builder {
+    width: calc(100% - 40px);
+    margin-top: 20px;
+    padding: 10px;
+    border: 2px solid rgba(0,0,0,0.2);
+    border-radius: 20px;
+}
+.builder div:not(#monaco) {
+    display: flex;
+    flex-direction: row;
+    gap: 10px;
+}
 
 h1 {
     margin: 0;