More styling

astro.config.mjs

@@ -6,6 +6,9 @@ import wasmPack from 'vite-plugin-wasm-pack';
 
 // https://astro.build/config
 export default defineConfig({
+  prefetch: {
+    prefetchAll: true
+  },
   integrations: [mdx()],
   markdown: {
     remarkPlugins: [

src/components/DiaryNav/DiaryNavBar.astro

@@ -104,6 +104,7 @@ select {
     border-radius: 1em;
     border: 1px solid var(--blog_content-border);
     background: var(--blog_background-main);
+    color: var(--blog_color);
 }
 
 

src/layouts/Layout.astro

@@ -122,7 +122,7 @@ const { title, showAfterMain, mainTransitionName } = Astro.props;
 		<header transition:persist="nav">
 			<Navbar />
 		</header>
-		<main transition:name={ mainTransitionName }>
+		<main transition:name={ mainTransitionName || "main" }>
 			<slot />
 		</main>
 		{showAfterMain ? <div class="after-main">

src/pages/blog/[diary].astro

@@ -46,5 +46,5 @@ if (diaryMain.data.repository) {
       { diaryPages.map((page) => <li><a href={collectionBasePath + "/" + page.slug}>{page.data.title}</a></li>) }
     </ol>
 
-    <DiaryNavBar collectionName={diary} slot="footer-nav" />
+    <DiaryNavBar collectionName={diary} slot="footer-nav" transition:name="diary-footer-nav" />
 </MarkdownLayout>

src/pages/blog/[diary]/[entry].astro

@@ -30,5 +30,5 @@ const { Content } = await entry.render();
 <MarkdownLayout title={entry.data.site_title || entry.data.title} slug={entry.slug} srcPath={`${diary}/${entry.id}`} published={entry.data.published}>
   <DiaryNavTop collectionName="rust" slot="main-nav" />
   <Content />
-  <DiaryNavBar collectionName="rust" slot="footer-nav" />
+  <DiaryNavBar collectionName="rust" slot="footer-nav" transition:name="diary-footer-nav" />
 </MarkdownLayout>

src/pages/terminal.astro

@@ -46,7 +46,20 @@ const wasmVersion = wasmData.version;
         const screens = document.querySelectorAll("[data-terminal-screen]") as NodeListOf<HTMLDivElement>;
         const template = document.querySelector("[data-terminal-user-cmd]") as HTMLTemplateElement;
         
-        screens.forEach((s) => s.addEventListener("click", () => inputs[0]?.focus()))
+        screens.forEach((s) => s.addEventListener("click", () => inputs[0]?.focus()));
+
+        screens.forEach((screen) => {
+            new MutationObserver((changes) => {
+                const totalNewHeight = changes.reduce((prev, change) => {
+                    change.addedNodes.forEach(n => prev += (n as HTMLPreElement).clientHeight || 0);
+                    return prev;
+                }, 0);
+                
+                if (screen.scrollTop + screen.clientHeight >= screen.scrollHeight - totalNewHeight - 40) {
+                    screen.scrollTo(0, screen.scrollHeight);
+                }
+            }).observe(screen, { childList: true, subtree: true });
+        });
 
         const { default: init, Console } = await wasm;
 
@@ -69,9 +82,11 @@ const wasmVersion = wasmData.version;
                     inputLine.querySelector(".user-cmd")!.textContent = cmd;
                     inputLine.querySelector(".pwd")!.textContent = prevPwd;
                     outputs.forEach((output) => {
-                        output.prepend(inputLine);
+                        output.append(inputLine);
                     });
 
+                    input.value = "";
+
                     if (cmd) {
                         const resp = c.execute(cmd);
 
@@ -79,20 +94,15 @@ const wasmVersion = wasmData.version;
                             const outputLine = document.createElement("pre");
                             outputLine.textContent = resp
                             outputs.forEach((output) => {
-                                output.prepend(outputLine);
+                                output.append(outputLine);
                             });
                         }
                     }
 
-                    input.value = "";
                     updatePwd();
                 }
             });
         });
-
-        screens.forEach((screen) => {
-            new MutationObserver(() => screen.scrollTo(0, screen.scrollHeight)).observe(screen, { childList: true, subtree: true });
-        });
     })()
 </script>
 
@@ -127,7 +137,7 @@ const wasmVersion = wasmData.version;
 
         [data-terminal-output] {
             display: flex;
-            flex-direction: column-reverse;
+            flex-direction: column;
         }
     }
 
@@ -164,6 +174,7 @@ const wasmVersion = wasmData.version;
             appearance: none !important;
             outline: none;
             caret-shape: block;
+            color: #fff;
 
             &::-moz-focus-outer, &::-moz-focus-inner, &:focus, &:focus *, &:-moz-focusring, &:-moz-focusring * {
                 border: none !important;