diff options
Diffstat (limited to 'src/components')
| -rw-r--r-- | src/components/Form.astro | 7 | ||||
| -rw-r--r-- | src/components/Image.astro | 21 | ||||
| -rw-r--r-- | src/components/Post.astro | 28 | ||||
| -rw-r--r-- | src/components/Thread.astro | 82 | ||||
| -rw-r--r-- | src/components/Thread.svelte | 105 |
5 files changed, 137 insertions, 106 deletions
diff --git a/src/components/Form.astro b/src/components/Form.astro index 417b569..540a4d4 100644 --- a/src/components/Form.astro +++ b/src/components/Form.astro @@ -1,7 +1,11 @@ --- -import '../styles/blackbox.css'; import { sha256 } from 'js-sha256'; +export interface Props { + board: string; + tid?: string +} + const { board, tid } = Astro.props; const iphash = sha256(Astro.clientAddress); --- @@ -31,6 +35,7 @@ const iphash = sha256(Astro.clientAddress); if(r.status == 200) { alert('Thread Successfuly Posted'); let id = await r.text(); + if(id == 'close') window.top.close(); window.location.assign(`/board/${board}/${id}`); } else alert('An Error has Accured'); diff --git a/src/components/Image.astro b/src/components/Image.astro new file mode 100644 index 0000000..07dbadf --- /dev/null +++ b/src/components/Image.astro @@ -0,0 +1,21 @@ +--- +export interface Props { + image: string; + fileType: string; +} + +const { image, fileType } = Astro.props; +--- + +{(image!= null) && ( + (fileType == 'image') ? ( + <a href={image} target="_blank" rel="noopener noreferrer"> + <img src={image} alt={image} height="300px" width="300px"> <br> + </a> + ) : ( + (fileType == 'image') && ( + <video width="320" height="240" controls muted> + <source src={image}> + </video> + )) +)}
\ No newline at end of file diff --git a/src/components/Post.astro b/src/components/Post.astro new file mode 100644 index 0000000..6805846 --- /dev/null +++ b/src/components/Post.astro @@ -0,0 +1,28 @@ +--- +import { creatorColor, formatTime } from '../lib/util'; + +export interface Props { + id: string; + date: number; + creator: string; + box: string; + board: string +} + +const { id, date, creator, box, board = '' } = Astro.props; +--- +<div class={box} id={id}> + <span style="line-height: 2rem;"> + {(board != '') ? ( + <a href=`/board/${board}/${id}` style="font-family: mono">{id}</a> + ) : ( + <span style="font=family: mono">{id}</span> + )} + + at {formatTime(date)} <br> + -> <span style=`${creatorColor(creator)}; font-family: mono`> + {creator} + </span> <br> + </span> <hr> + <slot /> +</div> diff --git a/src/components/Thread.astro b/src/components/Thread.astro new file mode 100644 index 0000000..6fae3de --- /dev/null +++ b/src/components/Thread.astro @@ -0,0 +1,82 @@ +--- +import type Thread from '../models/Thread'; +import Post from './Post.astro'; +import Image from './Image.astro'; + +export interface Props { + thread: Thread; + board: string; + comments: boolean; +} + +const { thread, board, comments = false } = Astro.props; + +let replies: string[] = []; +const listReplies = (id: string, getReplies: boolean = false): any => { + if(getReplies) return replies; + + replies = []; + thread.comments.forEach(comment => { + if(comment.commentText.includes(id)) + replies.push(comment.id); + }) + + if(replies.length <= 0) return false; + return true; +} +--- + +{(thread.id != "rules") && ( <> + <Post id={thread.id} date={thread.creationDate} creator={thread.threadCreator} box="threadbox" board={(!comments) ? board : ''}> + + {comments && (listReplies(thread.id) && ( + <span class="small-mono"> + {listReplies(thread.id, true).map((id) => ( <> + <a href=`/board/${board}/${thread.id}#${id}` onmouseover=`onMouseOver('${id}')` onmouseleave=`onMouseLeave('${id}')`>>>{id}</a> + </> ))} + </span> <hr> + ))} + + + <h3>{thread.threadName}</h3> + <Image image={thread.imageId} fileType={thread.fileType} /> + <p set:html={thread.threadText} /> + + {comments && ( <> + {thread.comments.map((comment) => ( <> + <Post id={comment.id} date={comment.creationDate} creator={comment.commentCreator} box="commentbox"> + + {listReplies(comment.id) && ( + <span class="small-mono"> + {listReplies(comment.id, true).map((id) => ( <> + <a href=`/board/${board}/${thread.id}#${id}` onmouseover=`onMouseOver('${id}')` onmouseleave=`onMouseLeave('${id}')`>>>{id}</a> + </> ))} + </span> <hr> + )} + + <Image image={comment.imageId} fileType={comment.fileType} /> + <p set:html={comment.commentText} /> + + </Post> + </> ))} + </> )} + + </Post> +</> )} + +{comments && ( <> + <script is:inline> + function onMouseOver(id) { + document.getElementById(id).classList.add('targeted'); + } + function onMouseLeave(id) { + document.getElementById(id).classList.remove('targeted'); + } + </script> + + <style is:inline> + .small-mono { + display:inline-block; line-height: 2ch; font-size: 0.8rem; font-family: monospace; + } + </style> +</> )} diff --git a/src/components/Thread.svelte b/src/components/Thread.svelte deleted file mode 100644 index 0321b8d..0000000 --- a/src/components/Thread.svelte +++ /dev/null @@ -1,105 +0,0 @@ -<script lang="ts"> - import { creatorColor, formatTime} from '../lib/util'; - import type Thread from '../models/Thread'; - - export let thread: Thread; - export let board: string; - export let comments: boolean = false; - - let replies: string[] = []; - const listReplies = (id: string, getReplies: boolean = false): any => { - if(getReplies) return replies; - - 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}" style="font-family: mono">{thread.id}</a> - at {formatTime(thread.creationDate)} <br> - - -> <span style="{creatorColor(thread.threadCreator )}; font-family: mono"> - {thread.threadCreator} - </span > <br> - <hr> - - {#if comments} - {#if listReplies(thread.id) } - <span style=" display:inline-block; line-height: 2ch; font-size: 0.8rem; font-family: monospace;"> - {#each listReplies(thread.id, true) 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} - {/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> - -{#if comments} - {#each thread.comments as comment} - <div class="commentbox" id="{comment.id}"> - <span style="line-height: 2rem;"> - <span style="font-family: mono">{comment.id}</span> - at {formatTime(comment.creationDate)} <br> - - -> <span style="{creatorColor(comment.commentCreator)}; font-family: mono"> - {comment.commentCreator} - </span> <br> - <hr> - - {#if listReplies(comment.id)} - <span style=" display:inline-block; line-height: 2ch; font-size: 0.8rem; font-family: monospace;"> - {#each listReplies(comment.id, true) 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> - - {#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> - {/each} -{/if} - - </div> -{/if} |