a: Update my website so it looks like a terminal
- Ready for a first deploy
- All mentions of my Soon:tm: blog have been removed
Signed-off-by: Skyler Grey <skyler3665@gmail.com>
diff --git a/apps/a/.prettierrc b/apps/a/.prettierrc
deleted file mode 100644
index a77fdde..0000000
--- a/apps/a/.prettierrc
+++ /dev/null
@@ -1,9 +0,0 @@
-{
- "useTabs": true,
- "singleQuote": true,
- "trailingComma": "none",
- "printWidth": 100,
- "plugins": ["prettier-plugin-svelte"],
- "pluginSearchDirs": ["."],
- "overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
-}
diff --git a/apps/a/.prettierrc.cjs b/apps/a/.prettierrc.cjs
new file mode 100644
index 0000000..7c425a2
--- /dev/null
+++ b/apps/a/.prettierrc.cjs
@@ -0,0 +1,9 @@
+module.exports = {
+ useTabs: true,
+ singleQuote: true,
+ trailingComma: 'none',
+ printWidth: 100,
+ plugins: [require('prettier-plugin-svelte'), require('prettier-plugin-tailwindcss')],
+ pluginSearchDirs: ['.'],
+ overrides: [{ files: '*.svelte', options: { parser: 'svelte' } }]
+};
diff --git a/apps/a/package.json b/apps/a/package.json
index 32ac8ad..537e6ed 100644
--- a/apps/a/package.json
+++ b/apps/a/package.json
@@ -10,8 +10,8 @@
"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
"test:unit": "vitest",
- "lint": "prettier --plugin-search-dir . --check . && eslint .",
- "format": "prettier --plugin-search-dir . --write ."
+ "lint": "prettier --plugin-search-dir . --check . --config ./.prettierrc.cjs && eslint .",
+ "format": "prettier --plugin-search-dir . --write . --config ./.prettierrc.cjs"
},
"devDependencies": {
"@playwright/test": "^1.28.1",
@@ -24,6 +24,7 @@
"postcss-load-config": "^4.0.1",
"prettier": "^2.8.0",
"prettier-plugin-svelte": "^2.8.1",
+ "prettier-plugin-tailwindcss": "^0.4.1",
"svelte": "^3.58.0",
"svelte-check": "^3.0.1",
"tailwindcss": "^3.3.1",
@@ -38,6 +39,7 @@
"class-variance-authority": "^0.6.0",
"clsx": "^1.2.1",
"components": "workspace:*",
+ "date-fns": "^2.30.0",
"lucide-svelte": "^0.229.0",
"radix-svelte": "^0.7.0",
"sass": "^1.62.1",
diff --git a/apps/a/src/app.postcss b/apps/a/src/app.postcss
index 76589de..ce54f61 100644
--- a/apps/a/src/app.postcss
+++ b/apps/a/src/app.postcss
@@ -47,3 +47,41 @@
font-feature-settings: 'rlig' 1, 'calt' 1;
}
}
+
+.gradient-text {
+ background-clip: text;
+ -webkit-text-fill-color: transparent;
+ @apply bg-gradient-to-r font-bold;
+}
+
+p:not(.reset):not(:last-child) {
+ @apply pb-5;
+}
+
+a:not(.reset) {
+ @apply gradient-text text-cyan-300 from-cyan-200 to-cyan-300 underline decoration-cyan-300/30 transition-colors;
+}
+
+a:hover:not(.reset) {
+ @apply gradient-text text-cyan-500 from-cyan-400 to-cyan-500 decoration-cyan-500;
+}
+
+ul li:not(.reset)::before {
+ content: "- ";
+}
+
+.dim {
+ @apply text-gray-400;
+}
+
+a.dim:not(.reset) {
+ @apply gradient-text text-cyan-600 from-cyan-600 to-cyan-700;
+}
+
+a.dim:hover:not(.reset) {
+ @apply gradient-text text-cyan-400 from-cyan-300 to-cyan-400 underline decoration-cyan-400;
+}
+
+h2:not(.reset) {
+ @apply inline-block;
+}
\ No newline at end of file
diff --git a/apps/a/src/routes/+page.svelte b/apps/a/src/routes/+page.svelte
index ec17dc6..882a290 100644
--- a/apps/a/src/routes/+page.svelte
+++ b/apps/a/src/routes/+page.svelte
@@ -1,44 +1,104 @@
<script>
- import Button from '$components/ui/button/Button.svelte';
+ import { Card, CardContent, CardHeader, CardTitle } from '$components/ui/card';
+ import Prompt from './prompt.svelte';
+ import Result from './result.svelte';
+
+ import { format } from 'date-fns';
+
+ let pageLoad = format(new Date(), 'E MMM d HH:mm:ss y');
</script>
-<p class="pt-[40vh] p-10">
- We hope that our services help you to make something as
- <span class="gradient-text from-indigo-500 to-violet-400">beautiful</span> as the
- <span class="gradient-text from-amber-400 to-amber-300">stars</span>
- in the
- <span class="gradient-text from-cyan-400 to-cyan-500">sky</span>
-</p>
+<svelte:head>
+ <title>A starry Sky</title>
+</svelte:head>
-<p class="m-10 mt-0">
- Because I, at least, <span class="gradient-text from-red-400 to-red-500">love</span> that which is <span
- class="gradient-text from-green-500 to-green-400">beautiful</span
- >
-</p>
-
-<p class="m-10 pl-10">
- - <span class="gradient-text from-pink-400 to-pink-300">A Starry Sky</span>
-</p>
-
-<div class="flex flex-col items-center justify-center gap-2 m-10">
- <Button href="/who" variant="outline">Who are you?</Button>
- <Button href="/what">What do you make?</Button>
+<div class="mx-auto rounded-md p-8 lg:w-[1024px]">
+ <Result>
+ <h1 class="dim pb-5">A starry Sky</h1>
+ <p class="dim">
+ Linux a.starrysky.fyi 6.1.31 #1-<a class="dim" href="https://nixos.org">NixOS</a>
+ <a class="dim" href="https://en.wikipedia.org/wiki/Symmetric_multiprocessing">SMP</a>
+ <a class="dim" href="https://wikipedia.org/wiki/Kernel_preemption">PREEMPT_DYNAMIC</a>
+ {pageLoad} x86_64 GNU/Linux<br/>
+ Type "help", "copyright", "credits" or "license" for more information.
+ </p>
+ <p class="dim">
+ Last login: {pageLoad} from 127.0.0.1
+ </p>
+ </Result>
+ <Prompt><h2>whoami</h2></Prompt>
+ <Result>
+ <p>
+ I'm Skyler, a transgender developer from the UK. It's nice to meet you! I love my Blåhaj,
+ writing and contributing to open source software, my Blåhaj and playing games with my
+ friends. Also my Blåhaj.
+ </p>
+ <p>
+ My pronouns are she/her.
+ </p>
+ <p>
+ In my spare time I <!--<a href="https://blog.starrysky.fyi">write posts for my blog</a>, -->write
+ small bits of open source software, maintain packages on
+ <a href="https://github.com/NixOS/nixpkgs">nixpkgs</a>, hack around on my NixOS system and
+ play videogames with (or sometimes without) my friends.
+ </p>
+ <p>
+ Professionally, I work at <a href="https://www.collabora.com/">Collabora Productivity</a>
+ making <a href="https://www.collaboraoffice.com/">LibreOffice work online</a>.
+ </p>
+ <p>
+ If you'd like to talk, I'd love to hear from you. Come find me on
+ <a href="https://matrix.to/#/@minion:coded.codes">Matrix</a>!
+ </p>
+ </Result>
+ <Prompt>unalias whoami</Prompt>
+ <Prompt>nix run github:Minion3665#links</Prompt>
+ <Result>
+ <!--<h2 class="pt-3 pb-2">Explore this website</h2>
+ <div class="mb-5 flex flex-wrap gap-5 md:flex-nowrap">
+ <a
+ class="reset transition-color block grow underline decoration-cyan-300/30 hover:decoration-cyan-400 md:basis-1/2"
+ href="https://blog.starrysky.fyi"
+ >
+ <Card
+ class="h-full shadow-white/50 transition-shadow hover:shadow-md hover:shadow-cyan-400"
+ >
+ <CardHeader>
+ <CardTitle>Read my blog</CardTitle>
+ </CardHeader>
+ <CardContent>
+ <p>I write posts focusing on tech, life and suchlike.</p>
+ </CardContent>
+ </Card>
+ </a>
+ <a
+ class="reset transition-color block grow underline decoration-cyan-300/30 hover:decoration-cyan-400 md:basis-1/2"
+ href="/projects"
+ >
+ <Card
+ class="h-full shadow-white/50 transition-shadow hover:shadow-md hover:shadow-cyan-400"
+ >
+ <CardHeader>
+ <CardTitle>See my projects</CardTitle>
+ </CardHeader>
+ <CardContent>
+ <p>
+ Tiny websites and apps to do specific tasks take your fancy? I sure hope so because
+ that's most of what I make.
+ </p>
+ </CardContent>
+ </Card>
+ </a>
+ </div>-->
+ <h2>Find me on other sites</h2>
+ <ul>
+ <li><a href="https://keyoxide.org/F27E3E5922772E7A">KeyOxide</a></li>
+ <li><a href="https://github.com/Minion3665">GitHub</a></li>
+ <li><a href="https://matrix.to/#/@minion:coded.codes">Matrix</a></li>
+ <li><a href="https://tech.lgbt/@minion3665">The Fediverse</a></li>
+ <li><a href="https://www.linkedin.com/in/minion3665/">LinkedIn</a></li>
+ <li><a href="mailto:skyler@clicks.codes">Good ol' email</a></li>
+ </ul>
+ </Result>
+ <Prompt><span class="animate-pulse">█</span></Prompt>
</div>
-
-<style lang="postcss">
- h1 {
- font-size: 3rem;
- font-family: Roboto;
- font-weight: bold;
- }
-
- span.gradient-text {
- background-clip: text;
- -webkit-text-fill-color: transparent;
- @apply bg-gradient-to-r font-bold;
- }
-
- .title {
- text-align: center;
- }
-</style>
diff --git a/apps/a/src/routes/command_responses.svelte b/apps/a/src/routes/command_responses.svelte
new file mode 100644
index 0000000..29dee3c
--- /dev/null
+++ b/apps/a/src/routes/command_responses.svelte
@@ -0,0 +1,29 @@
+<script>
+ const username = "sky";
+
+ export const command_responses = {
+ "nix run github:Minion3665/links": "> [!special] links_block",
+ "help|copyrights?|credits?|li[cs]en[cs]es?": (
+ "This site has its code licensed under the GNU Affero General Public License.\n" +
+ "You can find a full copy " +
+ "[in the LICENSE file](https://github.com/Minion3665/starrysky.fyi/blob/development/LICENSE)\n\n" +
+ "You can find the full code for the website " +
+ "[on GitHub](https://github.com/Minion3665/starrysky.fyi/tree/development/apps/a)\n\n" +
+ "Additional licenses, including those for distributed fonts and copypastas is included " +
+ "[in the licenses folder on GitHub](https://github.com/Minion3665/starrysky.fyi/tree/development/licenses)"
+ ),
+ "unalias whoami": "unalias: whoami: not found",
+ "sudo( .*)?": (
+ "We trust you have received the usual lecture from the local System\n" +
+ "Administrator. It usually boils down to these three things:\n\n" +
+ " #1) Respect the privacy of others.\n" +
+ " #2) Think before you type.\n" +
+ " #3) With great power comes great responsibility.\n\n" +
+ `${username} is not in the sudoers file. This incident will be reported.`
+ ),
+ "whoami": username,
+ "ls": "",
+ "cat( .*)?": "cat:$1: No such file or directory",
+ "echo( (.*))?": "$2",
+ };
+</script>
\ No newline at end of file
diff --git a/apps/a/src/routes/prompt.svelte b/apps/a/src/routes/prompt.svelte
new file mode 100644
index 0000000..54f7c38
--- /dev/null
+++ b/apps/a/src/routes/prompt.svelte
@@ -0,0 +1,28 @@
+<script lang="ts">
+ export let user = 'sky';
+ export let host = 'a.starrysky.fyi';
+ export let dir = '~';
+ export let root = false;
+
+ let promptchar: string;
+ $: promptchar = root ? '#' : '$';
+</script>
+
+<span class="font-mono">
+ <span class="text-gray-400 hidden sm:inline">[</span><!--
+ --><span
+ class="gradient-text from-green-600 to-green-500">{user}</span
+ ><!--
+ --><span class="text-gray-400 hidden sm:inline">@</span><!--
+ --><span
+ class="gradient-text from-green-500 to-green-400 hidden sm:inline">{host}</span
+ ><!--
+ --><span class="text-gray-400">:</span><!--
+ --><span
+ class="gradient-text from-cyan-400 to-cyan-500">{dir}</span
+ ><!--
+ --><span class="text-gray-400 hidden sm:inline">]</span><!--
+ --><span
+ class="gradient-text from-green-500 to-green-600">{promptchar}</span
+ >
+</span><span class="font-mono"><slot /></span><br />
diff --git a/apps/a/src/routes/result.svelte b/apps/a/src/routes/result.svelte
new file mode 100644
index 0000000..9504250
--- /dev/null
+++ b/apps/a/src/routes/result.svelte
@@ -0,0 +1 @@
+<span class="text-lg"><slot /></span><br />
diff --git a/apps/a/src/routes/what/+page.svelte b/apps/a/src/routes/what/+page.svelte
index e69ac02..c2d8591 100644
--- a/apps/a/src/routes/what/+page.svelte
+++ b/apps/a/src/routes/what/+page.svelte
@@ -1,29 +1,38 @@
<script>
+ import { Button } from '$components/ui/button';
import Project from './project.svelte';
</script>
-Online projects
-Projects that are
-<div class="flex p-10 gap-7 justify-items-strech justify-evenly flex-wrap">
+<div class="p-10 text-8xl tracking-tight">What do you make?</div>
+<div class="flex flex-wrap items-stretch justify-evenly justify-items-stretch gap-8 p-8">
<Project name="a.starrysky.fyi" online
>a.starrysky.fyi is a website to help me display my projects in an accessible and explorable
format</Project
>
<Project name="The Void" homepage="https://void.starrysky.fyi"
- >Sometimes you need to talk but there's nobody who wants to listen. Let out your frustrations and watch them slip away into the void... Ported from React to Svelte to be the first project on starrysky.fyi</Project
+ >Sometimes you need to talk but there's nobody who wants to listen. Let out your frustrations
+ and watch them slip away into the void... Ported from React to Svelte to be the first project on
+ starrysky.fyi</Project
>
<Project name="The older Void" homepage="https://void.crawling.us" archived
- >A former version of The Void. While I recommend you use the new version, there's nothing stopping you from writing here
- </Project
- >
+ >A former version of The Void. While I recommend you use the new version, there's nothing
+ stopping you from writing here
+ </Project>
<Project name="GITForum (Git Issue Tracker Forum)" offline
- >A "forum" where posts were created as GitHub Issues. Fetching and rendering posts was entirely client side, however a CORS proxy was needed to get GitHub oauth tokens</Project
+ >A "forum" where posts were created as GitHub Issues. Fetching and rendering posts was entirely
+ client side, however a CORS proxy was needed to get GitHub oauth tokens</Project
>
<Project name="a.starrysky.fyi"
>a.starrysky.fyi is a website to help me display my projects in an accessible and explorable
format</Project
>
<Project name="Make a website" lost
- >One of my first projects ever, made for a secondary school open day. You could sign up and be given a page where you could write HTML. Perhaps it's just as well this one's lost, as I hadn't yet learned not to store passwords in plaintext</Project
+ >One of my first projects ever, made for a secondary school open day. You could sign up and be
+ given a page where you could write HTML. Perhaps it's just as well this one's lost, as I hadn't
+ yet learned not to store passwords in plaintext</Project
>
</div>
+
+<div class="flex justify-center p-10">
+ <Button href="/">Back home</Button>
+</div>
diff --git a/apps/a/src/routes/what/project.svelte b/apps/a/src/routes/what/project.svelte
index fc71dc9..cfb32d9 100644
--- a/apps/a/src/routes/what/project.svelte
+++ b/apps/a/src/routes/what/project.svelte
@@ -1,4 +1,13 @@
<script lang="ts">
+ import {
+ Card,
+ CardTitle,
+ CardHeader,
+ CardContent,
+ CardDescription,
+ CardFooter
+ } from '$components/ui/card';
+
export let name: string;
export let lost: boolean = false;
@@ -25,18 +34,17 @@
export let homepage: string | undefined = undefined;
</script>
-<a
- href={homepage}
- class="flex flex-col w-64 grow rounded-md p-3 border border-2 hover:border-white transition-all"
- class:border-emerald-600={theme === 'online'}
- class:border-yellow-600={theme === 'archived'}
- class:border-rose-600={theme === 'offline'}
- class:border-gray-700={theme === 'lost'}
->
- <p><span class="title">{name}</span> ({theme})</p>
- <p><slot /></p>
+<a href={homepage} class="w-64 grow">
+ <Card class="grid h-full flex-col">
+ <CardHeader>
+ <CardTitle>{name}</CardTitle>
+ </CardHeader>
+ <CardContent>
+ <CardDescription><slot /></CardDescription>
+ </CardContent>
+ <CardFooter class="self-end">{theme}</CardFooter>
+ </Card>
</a>
<style lang="postcss">
-
</style>
diff --git a/apps/a/svelte.config.js b/apps/a/svelte.config.js
index 626a0fa..876c447 100644
--- a/apps/a/svelte.config.js
+++ b/apps/a/svelte.config.js
@@ -4,9 +4,7 @@
const config = {
// Consult https://kit.svelte.dev/docs/integrations#preprocessors
// for more information about preprocessors
- preprocess: [
- vitePreprocess()
- ],
+ preprocess: [vitePreprocess()],
kit: {
// adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
// If your environment is not supported or you settled on a specific environment, switch out the adapter.
diff --git a/apps/a/tailwind.config.cjs b/apps/a/tailwind.config.cjs
index 98d6423..b6aea34 100644
--- a/apps/a/tailwind.config.cjs
+++ b/apps/a/tailwind.config.cjs
@@ -1,7 +1,10 @@
const { fontFamily } = require('tailwindcss/defaultTheme');
/** @type {import('tailwindcss').Config} */
module.exports = {
- content: ['./src/**/*.{html,js,svelte,ts}', '../../packages/components/dist/**/*.{html,js,svelte,ts}'],
+ content: [
+ './src/**/*.{html,js,svelte,ts}',
+ '../../packages/components/dist/**/*.{html,js,svelte,ts}'
+ ],
theme: {
container: {
center: true,