diff options
Diffstat (limited to 'src/components')
| -rw-r--r-- | src/components/Card.astro | 76 | ||||
| -rw-r--r-- | src/components/Comment.svelte | 45 | ||||
| -rw-r--r-- | src/components/Thread.svelte | 74 |
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>→</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>  + {/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> |