terminal prompt needs to be recyclable

This commit is contained in:
2025-02-03 03:01:06 -05:00
parent 390ff9bccf
commit 49a62df236
14 changed files with 179 additions and 116 deletions

View File

@ -1,64 +1,27 @@
---
import Webpage from '../layouts/Webpage.astro';
import { Links } from '../ts/links';
import Shell from '../components/react/shell';
import Motd from '../components/terminal/motd.astro';
import Terminal from '../components/react/terminal';
---
<Webpage title="Home">
<main>
<p>Welcome to rhpidfyre.io!</p>
<div class="return"></div>
<p>This is a personal website by rhpidfyre / Brandon.</p>
<p>You can find my services here or learn about me.</p>
<div class="return"></div>
<p>You can also contribute or view the source code of my website via the links:</p>
<p>{"<"}<a href={Links.RepoGitea} target="_blank">{Links.RepoGitea}</a>{">."}</p>
<p>{"<"}<a href={Links.RepoGithub} target="_blank">{Links.RepoGithub}</a>{">."}</p>
<div class="return"></div>
<p>You can get started with the command: help</p>
<div class="return"></div>
<noscript>
<p><span class="red">=================================================</span></p>
<p><span class="red">JavaScript is disabled, functionality will be limited. :(</span></p>
<p><span class="red">But, you will not be limited at exploring my services which you can find by navigating towards the top-right.</span></p>
<p><span class="red">=================================================</span></p>
</noscript>
<Shell client:only/>
<Motd/>
<Terminal client:only/>
</main>
</Webpage>
<style lang="scss" is:global>
@use "../scss/variables";
@mixin text-styles {
.red { color: rgb(200, 0, 0); }
.green { color: rgb(0, 200, 0); }
.blue { color: rgb(0, 0, 200); }
.cyan { color: rgb(18,167,148); }
}
.shell-prompt { display: flex; }
@use "../scss/terminal";
main {
@include terminal.formatting;
width: 100vw;
height: calc(99.3vh - variables.$header-Y - variables.$footer-Y);
padding: 5px;
overflow-y: auto;
p {
@include text-styles;
font-size: 1.2rem;
margin: 5px;
a {
font-size: inherit;
&:hover { text-decoration: underline; }
}
span { font-size: inherit }
}
.return {
margin-top: 25px;
}
}
input {
font-size: 1.2rem;