feat: notes wip part 2

gazebot/.gitignore

@@ -0,0 +1,2 @@
+target
+.env

gazebot/Cargo.toml

@@ -0,0 +1,11 @@
+[package]
+name = "gazebot"
+version = "0.1.0"
+edition = "2021"
+
+[dependencies]
+tracing = "0.1"
+tracing-subscriber = "0.3"
+dotenvy = "0.15.7"
+serenity = { version = "0.12", default-features = false, features = ["client", "gateway", "rustls_backend", "model"] }
+tokio = { version = "1", features = ["macros", "rt-multi-thread"] }

gazebot/src/main.rs

@@ -0,0 +1,42 @@
+use std::env;
+
+use serenity::async_trait;
+use serenity::model::channel::Message;
+use serenity::model::prelude::*;
+use serenity::prelude::*;
+
+struct Handler;
+
+#[async_trait]
+impl EventHandler for Handler {
+    async fn message(&self, ctx: Context, msg: Message) {
+        if msg.content == "!ping" {
+            if let Err(why) = msg.channel_id.say(&ctx.http, "Pong!").await {
+                println!("Error sending message: {why:?}");
+            }
+        }
+    }
+
+    async fn ready(&self, _: Context, ready: Ready) {
+        println!("{} is connected!", ready.user.name);
+    }
+}
+
+#[tokio::main]
+async fn main() {
+    let _ = dotenvy::dotenv();
+
+    tracing_subscriber::fmt::init();
+
+    let token = env::var("DISCORD_TOKEN").expect("Expected a token in the environment");
+    let intents = GatewayIntents::GUILD_MESSAGES
+        | GatewayIntents::DIRECT_MESSAGES
+        | GatewayIntents::MESSAGE_CONTENT;
+
+    let mut client =
+        Client::builder(&token, intents).event_handler(Handler).await.expect("Err creating client");
+
+    if let Err(why) = client.start().await {
+        println!("Client error: {why:?}");
+    }
+}

src/components/token.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+    export let punct: boolean = false;
+    export let keywd: boolean = false;
+    export let funct: boolean = false;
+    export let str: boolean = false;
+
+    export let small: boolean = false;
+
+    export let v: string;
+
+    const ty =
+        punct ? "punctuation"
+        : keywd ? "keyword"
+        : funct ? "function"
+        : str ? "string"
+        : ""
+</script>
+
+<span class="align-middle token {ty} {small ? "text-sm" : ""}">{v}</span>

src/components/window.svelte

@@ -1,9 +1,11 @@
 <script lang="ts">
-	export let title: string;
+	export let title: string | undefined = undefined;
 	export let iconUri: string = '';
 	export let id: string = '';
 	export let sticky: boolean = false;
 	export let entry: boolean = false;
+	export let removePadding: boolean = false;
+	export let center: boolean = false;
 
 	const scaleKeyframes = [
 		"window-open",
@@ -21,38 +23,45 @@
 
 <div
 	class="
-        flex flex-col {sticky ? 'md:sticky md:-top-9' : ''}
+        flex flex-col {sticky ? 'md:sticky md:-top-9' : ''} {center ? "mx-auto" : ""}
         max-w-screen-md xl:max-w-screen-lg 2xl:max-w-screen-xl min-w-[30ch] lg:min-w-[40ch] w-full md:w-fit [height:fit-content]
-        border-ralsei-white border-ridge border-8 border-t-[12px]
-        bg-ralsei-black
+		bg-ralsei-black border-ralsei-white border-ridge border-8 border-t-[12px]
 		animate-{chosenKeyframe}
     "
 	{id}
 >
-	<div
-		class="
-            p-1 border-ralsei-white border-8
-            bg-gradient-to-l from-ralsei-pink-neon to-ralsei-black to-75%
-        "
-		style="border-style: hidden hidden ridge hidden;"
-	>
-		<div class="flex bg-opacity-100 pixelate-bg">
-			<h1
-				class="font-monospace text-xl text-ralsei-pink-regular grow justify-self-start self-center {entry ? 'p-name' : ''}"
-			>
-				{title}
-			</h1>
-			{#if iconUri !== ''}
-				<img
-					class="justify-self-end self-center max-h-7"
-					style="image-rendering: pixelated;"
-					src={iconUri}
-					alt={iconUri}
-				/>
-			{/if}
+	{#if title !== undefined}
+		<div
+			class="
+				p-1 border-ralsei-white border-8
+				bg-gradient-to-l from-ralsei-pink-neon to-ralsei-black to-75%
+			"
+			style="border-style: hidden hidden ridge hidden;"
+		>
+			<div class="flex bg-opacity-100 pixelate-bg">
+				<h1
+					class="
+						font-monospace text-xl text-ralsei-pink-regular
+						grow justify-self-start self-center {entry ? 'p-name' : ''}
+					"
+				>
+					{title}
+				</h1>
+				{#if iconUri !== ''}
+					<img
+						class="justify-self-end self-center max-h-7"
+						style="image-rendering: pixelated;"
+						src={iconUri}
+						alt={iconUri}
+					/>
+				{/if}
+			</div>
 		</div>
-	</div>
-	<div class="p-2 bg-gradient-to-tl to-ralsei-pink-neon/15 from-ralsei-pink-regular/20">
+	{/if}
+	<div class="
+		{removePadding ? "" : "p-2"} bg-gradient-to-tl
+		to-ralsei-pink-neon/15 from-ralsei-pink-regular/20
+	">
 		<slot />
 	</div>
 </div>

src/lib/notes.ts

@@ -4,18 +4,19 @@ import { env } from '$env/dynamic/private'
 
 export interface Note {
     content: string,
-    published: Date,
+    published: number,
 }
 type NoteId = string
 
 export const notesFolder = `${env.WEBSITE_DATA_DIR}/note`
 export const notesListFile = `${env.WEBSITE_DATA_DIR}/notes`
+export const noteIdLength = 8;
 
 export const getNotePath = (id: NoteId) => { return `${notesFolder}/${id}` }
 export const genNoteId = () => {
-    let id = nanoid(8)
+    let id = nanoid(noteIdLength)
     while (existsSync(getNotePath(id))) {
-        id = nanoid(8)
+        id = nanoid(noteIdLength)
     }
     return id
 }

src/routes/notes/+page.server.ts

@@ -1,8 +1,8 @@
 import { noteExists, readNote, readNotesList } from '$lib/notes'
 
-const notesPerPage: number = 5
+const notesPerPage: number = 8
 
-export const load = ({url}) => {
+export const load = ({ url }) => {
     // get the note id to search for and display the page it is in
     const noteId = url.searchParams.get("id")
     // get the page no if one is provided, otherwise default to 1
@@ -26,9 +26,11 @@ export const load = ({url}) => {
     page = Math.max(page, 1)
 
     // get the notes from the chosen page
-    const notes = notesList.slice((page - 1) * notesPerPage, page * notesPerPage).map(
-        (id) => {return {noteId: id, note: readNote(id)}}
-    )
+    const notes =
+        notesList.slice((page - 1) * notesPerPage, page * notesPerPage)
+            .map(
+                (id) => { return { noteId: id, note: readNote(id) } }
+            )
 
-    return {notes, highlightedNote: noteId, page}
+    return { notes, highlightedNote: noteId, page }
 }

src/routes/notes/+page.svelte

@@ -1,18 +1,44 @@
 <script lang="ts">
-    import Window from '../../components/window.svelte';
-    
-    export let data;
+	import Window from '../../components/window.svelte';
+    import Token from '../../components/token.svelte';
+
+	export let data;
+
+    const renderDate = (timestamp: number) => {
+        return (new Date(timestamp)).toLocaleString("en-GB", {
+            year: "2-digit",
+            month: "2-digit",
+            day: "2-digit",
+            hour: "numeric",
+            minute: "2-digit",
+        })
+    }
 </script>
 
-<div class="flex">
-    <Window title="notes">
-        <div class="prose prose-ralsei">
-<pre class="language-bash"><code class="language-bash"><span class="token punctuation">[</span>gazesystems <span class="token keyword">/notes/</span><span class="token punctuation">]$</span> <span class="token function">cat</span> *
-{#each data.notes as {noteId, note}}
+<div class="pl-16 pt-16">
+<Window title="terminal" removePadding>
+<div
+    class="
+        prose prose-ralsei
+        prose-pre:rounded-none prose-pre:!m-0 prose-pre:!p-2
+        prose-pre:!bg-ralsei-black prose-code:!bg-ralsei-black
+    "
+>
+<pre class="language-bash"><code class="language-bash"><nobr>
+<Token v="[" punct/>gazesystems <Token v="/notes/" keywd/><Token v="]$" punct/> <Token v="source" funct/> note.nu
 <br>
-<span class="token keyword">{noteId}</span><span class="token punctuation">|>   </span><span class="token string">{note.content}</span>
-{/each}
-</code></pre>
-        </div>
-    </Window>
+<Token v="[" punct/>gazesystems <Token v="/notes/" keywd/><Token v="]$" punct/> <Token v="ls" funct/> notes <Token v="|" punct/> <Token v="each" funct/> <Token v="&#123;" punct/><Token v="|" punct/>file<Token v="|" punct/> <Token v="render" funct/> <Token v="(" punct/><Token v="open" funct/> $file.name<Token v=")" punct/><Token v="&#125;" punct/>
+<br>
+<br>
+{#each data.notes as { noteId, note }, index}
+<div class="text-wrap break-words max-w-[70ch] leading-none">
+<Token v={renderDate(note.published)} small/> <Token v={noteId} keywd small/><Token v="#" punct/>&nbsp;&nbsp;<Token v={note.content} str/>
+</div>
+{#if index < data.notes.length - 1}
+<div class="mt-3"/>
+{/if}
+{/each}
+</nobr></code></pre>
+</div>
+</Window>
 </div>

tailwind.config.js

@@ -28,8 +28,8 @@ export default {
         },
       }),
       animation: {
-        'bounce-slow' : 'bounce 3s infinite',
-        'pulse-fast' : 'pulse 1s cubic-bezier(0.4, 0, 0.6, 1) infinite',
+        'bounce-slow': 'bounce 3s infinite',
+        'pulse-fast': 'pulse 1s cubic-bezier(0.4, 0, 0.6, 1) infinite',
       },
       colors: {
         ralsei: {