Big bang

3 files changed, 195 insertions, 0 deletions

diff --git a/src/components/Card.astro b/src/components/Card.astro
new file mode 100644
index 0000000..aea28c8
--- /dev/null
+++ b/src/components/Card.astro
@@ -0,0 +1,76 @@
+---
+export interface Props {
+	title: string;
+	body: string;
+	href: string;
+}
+
+const { href, title, body } = Astro.props as Props;
+---
+
+<li class="link-card">
+	<a href={href}>
+		<h2>
+			{title}
+			<span>&rarr;</span>
+		</h2>
+		<p>
+			{body}
+		</p>
+	</a>
+</li>
+<style>
+	:root {
+		--link-gradient: linear-gradient(45deg, #4f39fa, #da62c4 30%, var(--color-border) 60%);
+	}
+
+	.link-card {
+		list-style: none;
+		display: flex;
+		padding: 0.15rem;
+		background-image: var(--link-gradient);
+		background-size: 400%;
+		border-radius: 0.5rem;
+		background-position: 100%;
+		transition: background-position 0.6s cubic-bezier(0.22, 1, 0.36, 1);
+	}
+
+	.link-card > a {
+		width: 100%;
+		text-decoration: none;
+		line-height: 1.4;
+		padding: 1em 1.3em;
+		border-radius: 0.35rem;
+		color: var(--text-color);
+		background-color: white;
+		opacity: 0.8;
+	}
+
+	h2 {
+		margin: 0;
+		transition: color 0.6s cubic-bezier(0.22, 1, 0.36, 1);
+	}
+
+	p {
+		margin-top: 0.75rem;
+		margin-bottom: 0;
+	}
+
+	h2 span {
+		display: inline-block;
+		transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
+	}
+
+	.link-card:is(:hover, :focus-within) {
+		background-position: 0;
+	}
+
+	.link-card:is(:hover, :focus-within) h2 {
+		color: #4f39fa;
+	}
+
+	.link-card:is(:hover, :focus-within) h2 span {
+		will-change: transform;
+		transform: translateX(2px);
+	}
+</style>
diff --git a/src/components/Comment.svelte b/src/components/Comment.svelte
new file mode 100644
index 0000000..09469cc
--- /dev/null
+++ b/src/components/Comment.svelte
@@ -0,0 +1,45 @@
+<script lang="ts">
+  import { creatorColor, formatTime } from '../lib/util';
+  import type Comment from '../models/Thread';
+  export let comment: Comment;
+</script>
+
+
+<div class="commentbox" id="{comment.id}">
+
+  <span style="line-height: 2rem;">
+    {comment.id}
+    at {formatTime(comment.creationDate)} <br>
+    ->  <span style="{creatorColor(comment.commentCreator)}">
+      {comment.commentCreator}
+    </span> <br>
+  </span>
+
+    {#if comment.imageId!= null && comment.imageId != undefined}
+      {#if comment.fileType == 'image'}
+        <a href="{comment.imageId}" target="_blank" rel="noopener noreferrer">
+          <img src="{comment.imageId}" alt="{comment.imageId}" height="300px" width="300px"> <br>
+        </a>
+      {:else if comment.fileType == 'video'}
+        <video width="320" height="240" controls muted>
+          <source src="{comment.imageId}">
+        </video>
+      {/if}
+    {/if}
+
+<p>{@html comment.commentText}</p>
+
+</div>
+
+<style>
+  .commentbox {
+    width: 500px;
+    border: 5px solid green;
+    padding: 10px;
+    margin: 10px;
+    background-color: white;
+  }
+  :target, .targeted {
+    background-color: #ffa;
+  }
+</style>
diff --git a/src/components/Thread.svelte b/src/components/Thread.svelte
new file mode 100644
index 0000000..8e07c9f
--- /dev/null
+++ b/src/components/Thread.svelte
@@ -0,0 +1,74 @@
+<script lang="ts">
+  import { creatorColor, formatTime } from '../lib/util';
+  import type Thread from '../models/Thread';
+  export let thread: Thread;
+  export let board: string;
+
+  let replies: string[] = [];
+  const listReplies = (id: string): boolean => {
+    replies = [];
+    thread.comments.forEach(comment => {
+      if(comment.commentText.includes(id))
+        replies.push(comment.id);
+    })
+
+    if(replies.length <= 0) return false;
+    return true
+  }
+</script>
+
+
+{#if thread.id != "rules"}
+  <div class="threadbox" id="{thread.id}">
+    <span style="line-height: 2rem;">
+      <a href="/board/{board}/{thread.id}">{thread.id}</a>
+      at {formatTime(thread.creationDate)} <br>
+
+      ->  <span style="{creatorColor(thread.threadCreator )}">
+        {thread.threadCreator}
+      </span > <br>
+
+      {#if listReplies(thread.id)}
+        <hr> <span style=" display:inline-block; line-height: 2ch; font-size: 0.8rem; font-family: monospace;">
+          {#each replies as id}
+            <a href="/board/{board}/{thread.id}#{id}" onmouseover="document.getElementById('{id}').classList.add('targeted')" onmouseleave="document.getElementById('{id}').classList.remove('targeted')">>>{id}</a> &#xfeff
+          {/each}
+      </span> <hr>
+    {/if}
+
+    </span>
+
+    <h3>{thread.threadName}</h3>
+
+    {#if thread.imageId!= null && thread.imageId != undefined}
+      {#if thread.fileType == 'image'}
+        <a href="{thread.imageId}" target="_blank" rel="noopener noreferrer">
+          <img src="{thread.imageId}" alt="{thread.imageId}" height="300px" width="300px"> <br>
+        </a>
+      {:else if thread.fileType == 'video'}
+        <video width="320" height="240" controls muted>
+          <source src="{thread.imageId}">
+        </video>
+      {/if}
+    {/if}
+
+<p>{@html thread.threadText}</p>
+
+<slot />
+
+  </div>
+{/if}
+
+<style>
+.threadbox {
+    width: 600px;
+    border: 10px solid green;
+    padding: 10px;
+    margin: 10px;
+    margin-left: 0px;
+    background-color: white;
+}
+:target, .targeted {
+    background-color: #ffa;
+}
+</style>