From 8f5278eb443864910dd9c2131c992d71e3af2d20 Mon Sep 17 00:00:00 2001 From: kartofen Date: Fri, 26 Aug 2022 23:54:17 +0300 Subject: Big bang --- src/components/Card.astro | 76 +++++++++++++++++++++++++++ src/components/Comment.svelte | 45 ++++++++++++++++ src/components/Thread.svelte | 74 ++++++++++++++++++++++++++ src/env.d.ts | 1 + src/layouts/Default.astro | 21 ++++++++ src/layouts/Layout.astro | 56 ++++++++++++++++++++ src/lib/api.ts | 14 +++++ src/lib/image.ts | 10 ++++ src/lib/thread.ts | 80 ++++++++++++++++++++++++++++ src/lib/util.ts | 23 ++++++++ src/models/Thread.ts | 19 +++++++ src/pages/404.md | 1 + src/pages/board/[board].astro | 26 ++++++++++ src/pages/board/[board]/[tid].astro | 26 ++++++++++ src/pages/boards.astro | 32 ++++++++++++ src/pages/index.astro | 101 ++++++++++++++++++++++++++++++++++++ 16 files changed, 605 insertions(+) create mode 100644 src/components/Card.astro create mode 100644 src/components/Comment.svelte create mode 100644 src/components/Thread.svelte create mode 100644 src/env.d.ts create mode 100644 src/layouts/Default.astro create mode 100644 src/layouts/Layout.astro create mode 100644 src/lib/api.ts create mode 100644 src/lib/image.ts create mode 100644 src/lib/thread.ts create mode 100644 src/lib/util.ts create mode 100644 src/models/Thread.ts create mode 100644 src/pages/404.md create mode 100644 src/pages/board/[board].astro create mode 100644 src/pages/board/[board]/[tid].astro create mode 100644 src/pages/boards.astro create mode 100644 src/pages/index.astro (limited to 'src') 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; +--- + +
  • + +

    + {title} + → +

    +

    + {body} +

    +     +
    • + 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 @@ + + + +
    + + + {comment.id} + at {formatTime(comment.creationDate)}
    + -> + {comment.commentCreator} +
    +     + + {#if comment.imageId!= null && comment.imageId != undefined} + {#if comment.fileType == 'image'} + + {comment.imageId}
    +     + {:else if comment.fileType == 'video'} + + {/if} + {/if} + +

    {@html comment.commentText}

    + +
    + + 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 @@ + + + +{#if thread.id != "rules"} +
    + + {thread.id} + at {formatTime(thread.creationDate)}
    + + -> + {thread.threadCreator} +
    + + {#if listReplies(thread.id)} +
    + {#each replies as id} + >>{id}  + {/each} +
    + {/if} + +     + +

    {thread.threadName}

    + + {#if thread.imageId!= null && thread.imageId != undefined} + {#if thread.fileType == 'image'} + + {thread.imageId}
    +     + {:else if thread.fileType == 'video'} + + {/if} + {/if} + +

    {@html thread.threadText}

    + + + +
    +{/if} + + diff --git a/src/env.d.ts b/src/env.d.ts new file mode 100644 index 0000000..f964fe0 --- /dev/null +++ b/src/env.d.ts @@ -0,0 +1 @@ +/// diff --git a/src/layouts/Default.astro b/src/layouts/Default.astro new file mode 100644 index 0000000..85fd510 --- /dev/null +++ b/src/layouts/Default.astro @@ -0,0 +1,21 @@ +--- +--- + + + + + + + + + + + + + + diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro new file mode 100644 index 0000000..0e3e837 --- /dev/null +++ b/src/layouts/Layout.astro @@ -0,0 +1,56 @@ +--- +export interface Props { + title: string; +} + +const { title } = Astro.props as Props; +--- + + + + + + + + + {title} + + + + + + diff --git a/src/lib/api.ts b/src/lib/api.ts new file mode 100644 index 0000000..221a7b3 --- /dev/null +++ b/src/lib/api.ts @@ -0,0 +1,14 @@ +const base = 'https://localhost:5001/api' + +export async function api(method: string, resource: string, data?: any) { + console.log("API USED", method, resource, data); + + + return await fetch(`${base}/${method}/${resource}`, { + method, + headers: { + 'content-type': 'application/json' + }, + body: data + }); +} diff --git a/src/lib/image.ts b/src/lib/image.ts new file mode 100644 index 0000000..53d4c98 --- /dev/null +++ b/src/lib/image.ts @@ -0,0 +1,10 @@ +import { api } from './api'; + +export async function getImg(imgId: string) { + if(imgId == null || imgId == '' || imgId == undefined) return null; + + const response = await api('get', `image/${imgId}`) + + if(response.status !== 200) return `Server error: ${response.status}`; + return response.text(); +} diff --git a/src/lib/thread.ts b/src/lib/thread.ts new file mode 100644 index 0000000..d0a4fce --- /dev/null +++ b/src/lib/thread.ts @@ -0,0 +1,80 @@ +import { writeFileSync, existsSync } from 'fs'; +import { getImg } from './image'; +import type Thread from '../models/Thread' + +export async function processThreadIn(board: string, thread: Thread, procComments?: false) { + if(!thread || !board) return; + let imageId: string = thread.imageId; + + if(existsSync(`public/images/${imageId}`)) + thread.imageId = `/images/${imageId}`; + else + thread.imageId = await getImg(imageId); + + thread.threadText = replaceURLs(thread.threadText, board, thread.id); + + if(!procComments) return; + + for(let comment of thread.comments) + { + let cimageId = comment.imageId; + if(existsSync(`public/images/${cimageId}`)) + comment.imageId = `/images/${cimageId}`; + else + comment.imageId = await getImg(cimageId); + + comment.commentText = replaceURLs(comment.commentText, board, thread.id); + } +} + +function replaceURLs(text: string, board: string, OPtid?: string): string { + if(!text) return; + + if(OPtid) { + let replyRegex = /(^|[^>])>>[0-9a-fA-F]{8}\b-[0-9a-fA-F]{4}\b-[0-9a-fA-F]{4}\b-[0-9a-fA-F]{4}\b-[0-9a-fA-F]{12}/g; + text = text.replace(replyRegex, (id) => { + let showid = id; + id = id.replace(/(>|\n| )/g, ''); + if(id == OPtid) showid += "(OP)"; + // this adds the targeted class + // to the target id when its hovered on + // and removes it when it stops hovering + return ` ${showid} `; + }); + } + + // link to thread on other board + let otherthreadlinkRegex = />>>\/.*\/[0-9a-fA-F]{8}\b-[0-9a-fA-F]{4}\b-[0-9a-fA-F]{4}\b-[0-9a-fA-F]{4}\b-[0-9a-fA-F]{12}/g; + text = text.replace(otherthreadlinkRegex, (id) => { + let link = id.slice(4); + let parts = link.split('/'); + let linkid = parts[1]; let board = parts[0]; + return ` >>>/${board}/${linkid} ` + }); + // link to thread on this board + let threadlinkRegex = />>>[0-9a-fA-F]{8}\b-[0-9a-fA-F]{4}\b-[0-9a-fA-F]{4}\b-[0-9a-fA-F]{4}\b-[0-9a-fA-F]{12}/g; + text = text.replace(threadlinkRegex, (id) => { + let linkid = id.slice(3); // remove the first >>> + return ` ${id} ` + }); + // link to another board + let otherboardRegex = />>>\/.*\/($|[^0-9a-fA-F])/g; + text = text.replace(otherboardRegex, (id) => { + let boardid = id.split('/')[1]; + return ` >>>/${boardid}/ ` + }); + + let newlineRegex = /(\r\n|\r|\n)/g; + text = text.replace(newlineRegex, () => { + return '
    ' + }); + + let urlRegex = /(((https?:\/\/)|(www\.))[^\s]+)/g; + return text.replace(urlRegex, (url) => { + var hyperlink = url; + if (!hyperlink.match('^https?:\/\/')) { + hyperlink = 'http://' + hyperlink; + } + return ' ' + url + ' ' + }); +} diff --git a/src/lib/util.ts b/src/lib/util.ts new file mode 100644 index 0000000..a0734b9 --- /dev/null +++ b/src/lib/util.ts @@ -0,0 +1,23 @@ +export const creatorColor = (creatorid: string) => { + let parts = creatorid.split('-') + let ints = parts.map(function(d) { return parseInt(d,16) }) + let code = ints[0] + + let blue = (code >> 16) & 31; + let green = (code >> 21) & 31; + let red = (code >> 27) & 31; + let foreColor = `border:5px solid rgb(${red << 3}, ${green << 3}, ${blue << 3});`; + return foreColor; +}; + +export function formatTime(timestamp: number): string +{ + let date = new Date(timestamp); + let year = date.getFullYear(); + let month = date.getMonth() + 1; + let day = date.getDate(); + let time = date.toTimeString().split(' ')[0]; + let formattedTime = `${time}, ${day}/${month}/${year}` + + return formattedTime; +} diff --git a/src/models/Thread.ts b/src/models/Thread.ts new file mode 100644 index 0000000..e5d9f66 --- /dev/null +++ b/src/models/Thread.ts @@ -0,0 +1,19 @@ +export type Comment = { + id: string; + commentCreator: string; + commentText: string; + creationDate: number; + imageId: string; + fileType: string //image or video +}; + +export type Thread = { + id: string; + threadName: string; + threadCreator: string; + threadText: string; + comments: Comment[]; + creationDate: number; + imageId: string; + fileType: string; //image or video +}; diff --git a/src/pages/404.md b/src/pages/404.md new file mode 100644 index 0000000..3061d00 --- /dev/null +++ b/src/pages/404.md @@ -0,0 +1 @@ +# 404 Error diff --git a/src/pages/board/[board].astro b/src/pages/board/[board].astro new file mode 100644 index 0000000..2624fed --- /dev/null +++ b/src/pages/board/[board].astro @@ -0,0 +1,26 @@ +--- +import Default from '../../layouts/Default.astro'; +import Thread from '../../components/Thread.svelte' +import type Thread from '../../models/Thread'; + +import { api } from '../../lib/api.ts'; +import { processThreadIn } from '../../lib/thread' + +const { board } = Astro.params; +const data = await api('get', `board/${board}`); + +if(data.status === 404) return Astro.redirect('/404'); + +const threads: Thread[] = await data.json(); +for(let thread of threads) + await processThreadIn(board, thread); +--- + + +

    {board}

    + + {threads.map((thread) => ( + + ))} + +     diff --git a/src/pages/board/[board]/[tid].astro b/src/pages/board/[board]/[tid].astro new file mode 100644 index 0000000..80e7fbe --- /dev/null +++ b/src/pages/board/[board]/[tid].astro @@ -0,0 +1,26 @@ +--- +import Default from '../../../layouts/Default.astro'; +import Thread from '../../../components/Thread.svelte' +import Comment from '../../../components/Comment.svelte' +import type Thread from '../../../models/Thread'; + +import { api } from '../../../lib/api'; +import { processThreadIn } from '../../../lib/thread'; + +const { board } = Astro.params; +const data = await api('get', `thread/${board}/${Astro.params.tid}`); + +if(data.status === 404) return Astro.redirect('/404'); + +const thread: Thread = await data.json(); +await processThreadIn(board, thread, true); +const comments: Comment[] = thread.comments; +--- + + + + {comments.map((comment) => ( + + ))} + + diff --git a/src/pages/boards.astro b/src/pages/boards.astro new file mode 100644 index 0000000..ab3158f --- /dev/null +++ b/src/pages/boards.astro @@ -0,0 +1,32 @@ +--- +import Default from '../layouts/Default.astro'; +import { api } from '../lib/api.ts'; + +const data = await api('get', 'boards'); +const boards: string[] = await data.json(); +--- + + +
    +

    Boards

    + +
      + {boards.map((board) => ( +
    • {board}
      • + ))} +
    +
    +     + + diff --git a/src/pages/index.astro b/src/pages/index.astro new file mode 100644 index 0000000..4dfffe3 --- /dev/null +++ b/src/pages/index.astro @@ -0,0 +1,101 @@ +--- +import Layout from '../layouts/Layout.astro'; +import Card from '../components/Card.astro'; +--- + + +
    +

    Welcome to Astro

    +

    + Check out the src/pages directory to get started.
    + Code Challenge: Tweak the "Welcome to Astro" message above. +

    +
      + + + + + +
    +
    +     + + -- cgit v1.2.3