Update README.md

.gitignore

@@ -19,8 +19,3 @@ Thumbs.db
 # Vite
 vite.config.js.timestamp-*
 vite.config.ts.timestamp-*
-
-# lock files
-bun.lockb
-yarn.lock
-.yarn/

README.md

@@ -36,3 +36,6 @@ npm run build
 You can preview the production build with `npm run preview`.
 
 > To deploy your app, you may need to install an [adapter](https://svelte.dev/docs/kit/adapters) for your target environment.
+
+## Collaboration
+The main branch is locked, please push to other branch then send merge req.

justfile

@@ -1,3 +0,0 @@
-
-genproto:
-	npx protoc --ts_out ./src/lib/protobuf --proto_path ./src/lib/protobuf/definitions  ./src/lib/protobuf/definitions/niming.proto

package.json

@@ -17,7 +17,7 @@
 		"@sveltejs/vite-plugin-svelte": "^4.0.0",
 		"@types/dompurify": "^3",
 		"autoprefixer": "^10.4.20",
-		"bits-ui": "^0.22.0",
+		"bits-ui": "^0.21.16",
 		"clsx": "^2.1.1",
 		"lucide-svelte": "^0.454.0",
 		"prettier": "^3.3.2",
@@ -34,8 +34,6 @@
 	"packageManager": "yarn@4.2.2+sha224.1e50daf19e5e249a025569752c60b88005fddf57d10fcde5fc68b88f",
 	"dependencies": {
 		"@iconify-json/mingcute": "^1.2.1",
-		"@protobuf-ts/plugin": "^2.9.4",
-		"axios": "^1.7.7",
 		"dompurify": "^3.1.7",
 		"highlight.js": "^11.10.0",
 		"isomorphic-dompurify": "^2.16.0",

src/app.css

@@ -34,7 +34,6 @@
 		--ring: 224 71.4% 4.1%;
 
 		--radius: 0.5rem;
-
 	}
 
 	.dark {
@@ -50,7 +49,7 @@
 		--card: 35 88% 72%;
 		--card-foreground: 248 13% 36%;
 
-    --border: 248 13% 36%;
+		--border: 215 27.9% 16.9%;
 		--input: 215 27.9% 16.9%;
 
 		--primary: 248deg 25% 18%;
@@ -86,58 +85,12 @@
 }
 
 @font-face {
-  font-family: "PingFang";
+	font-family: "GenRyuMin2TW";
 	src:
-    local('PingFang Bold'), src("/PingFang Bold.woff2") type("woff2");
+		url("/GenRyuMin2TW-M.woff2") format("woff2");
-  font-weight: bold;
-}
-
-@font-face {
-  font-family: "PingFang";
-  src:
-    local('PingFang Medium'), src("/PingFang Medium.woff2") type("woff2");
-  font-weight: normal;
-}
-
-@font-face {
-  font-family: "PingFang";
-  src:
-    local('PingFang Heavy'), src("/PingFang Heavy.woff2") type("woff2");
-  font-weight: bolder;
-
-}
-
-@font-face {
-  font-family: "PingFang";
-  src:
-    local('PingFang Light'), src("/PingFang Light.woff2") type("woff2");
-  font-weight: lighter;
-}
-
-@font-face {
-  font-family: "PingFang";
-  src:
-    local('PingFang Regular'), src("/PingFang Regular.woff2") type("woff2");
-  font-weight: normal;
 }
 
 body {
-  font-family: "PingFang";
+	font-family: "GenRyuMin2TW";
-  font-weight: 400;
 	overflow-x: hidden;
-  width: 100dvw;
-  min-height: 100dvh;
-}
-
-::-webkit-scrollbar {
-  width: 8px;
-}
-
-::-webkit-scrollbar-track {
-  background-color: hsl(var(--muted))
-}
-
-::-webkit-scrollbar-thumb {
-  background-color: hsl(248deg, 13%, 36%);
-  border-radius: 10px;
 }

src/lib/api.ts

@@ -1,81 +0,0 @@
-import { FetchResponse, Post, PostResponse } from '$lib/protobuf/niming';
-import axios, { type AxiosRequestConfig, type AxiosResponse } from 'axios';
-
-
-
-export class Result<T> {
-  status: number
-  enclose?: T
-  message?: string
-  constructor(status: number, enclose?: T, message?: string) {
-    this.status = status;
-    this.enclose = enclose;
-    this.message = message;
-  }
-  ok(): boolean { return this.status == 1 }
-  set_status(status: number) {
-    this.status = status
-  }
-}
-
-
-function axios_request(method: string, url: string, params?: Map<string, string> | Object, data?: Uint8Array): Promise<AxiosResponse<ArrayBuffer, any>> {
-  let cfg: AxiosRequestConfig<Uint8Array> = {
-    method,
-    url,
-    params,
-    data,
-    responseType: "arraybuffer",
-    headers: { 'Content-Type': 'application/x-protobuf' },
-  }
-
-  return axios(cfg)
-}
-
-export class API {
-  page: number
-  constructor() {
-    this.page = 0
-  }
-  async send_post(content: string, refer: bigint | undefined, files: File[] | undefined) {
-    let files_buf: Uint8Array[] = [];
-    files?.forEach((e) => {
-      e.arrayBuffer().then((arrbuf) => {
-        files_buf.push(new Uint8Array(arrbuf));
-      });
-    });
-
-    let ctx = Post.create({ content: content, files: files_buf });
-    if (refer !== undefined) {
-      ctx.ref = refer;
-    }
-
-    let result = new Result<PostResponse>(0)
-
-    await axios_request('post', '/article', undefined, Post.toBinary(ctx))
-      .then(e => {
-        result.enclose = PostResponse.fromBinary(new Uint8Array(e.data))
-        result.set_status(1);
-      }).catch(e => {
-        result.message = e.response?.data
-      });
-    return result;
-  }
-  async fetch(): Promise<Result<FetchResponse>> {
-    let result = new Result<FetchResponse>(0)
-
-    await axios_request('get', '/article/list', { page: this.page })
-      .then(e => {
-        result.enclose = FetchResponse.fromBinary(new Uint8Array(e.data))
-        result.set_status(1);
-        this.page += 1;
-      })
-      .catch(e => {
-        result.message = e.response?.data
-      })
-
-    return result;
-  }
-}
-let api_inst = new API();
-export default api_inst;

src/lib/components/ui/button/button.svelte

@@ -1,25 +0,0 @@
-<script lang="ts">
-	import { Button as ButtonPrimitive } from "bits-ui";
-	import { type Events, type Props, buttonVariants } from "./index.js";
-	import { cn } from "$lib/utils.js";
-
-	type $$Props = Props;
-	type $$Events = Events;
-
-	let className: $$Props["class"] = undefined;
-	export let variant: $$Props["variant"] = "default";
-	export let size: $$Props["size"] = "default";
-	export let builders: $$Props["builders"] = [];
-	export { className as class };
-</script>
-
-<ButtonPrimitive.Root
-	{builders}
-	class={cn(buttonVariants({ variant, size, className }))}
-	type="button"
-	{...$$restProps}
-	on:click
-	on:keydown
->
-	<slot />
-</ButtonPrimitive.Root>

src/lib/components/ui/button/index.ts

@@ -1,49 +0,0 @@
-import { type VariantProps, tv } from "tailwind-variants";
-import type { Button as ButtonPrimitive } from "bits-ui";
-import Root from "./button.svelte";
-
-const buttonVariants = tv({
-	base: "ring-offset-background focus-visible:ring-ring inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
-	variants: {
-		variant: {
-			default: "bg-primary text-primary-foreground hover:bg-primary/90",
-			destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
-			outline:
-				"border-input bg-background hover:bg-accent hover:text-accent-foreground border",
-			secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
-			ghost: "hover:bg-accent hover:text-accent-foreground",
-			link: "text-primary underline-offset-4 hover:underline",
-		},
-		size: {
-			default: "h-10 px-4 py-2",
-			sm: "h-9 rounded-md px-3",
-			lg: "h-11 rounded-md px-8",
-			icon: "h-10 w-10",
-		},
-	},
-	defaultVariants: {
-		variant: "default",
-		size: "default",
-	},
-});
-
-type Variant = VariantProps<typeof buttonVariants>["variant"];
-type Size = VariantProps<typeof buttonVariants>["size"];
-
-type Props = ButtonPrimitive.Props & {
-	variant?: Variant;
-	size?: Size;
-};
-
-type Events = ButtonPrimitive.Events;
-
-export {
-	Root,
-	type Props,
-	type Events,
-	//
-	Root as Button,
-	type Props as ButtonProps,
-	type Events as ButtonEvents,
-	buttonVariants,
-};

src/lib/components/ui/scroll-area/index.ts

@@ -1,10 +0,0 @@
-import Scrollbar from "./scroll-area-scrollbar.svelte";
-import Root from "./scroll-area.svelte";
-
-export {
-	Root,
-	Scrollbar,
-	//,
-	Root as ScrollArea,
-	Scrollbar as ScrollAreaScrollbar,
-};

src/lib/components/ui/scroll-area/scroll-area-scrollbar.svelte

@@ -1,27 +0,0 @@
-<script lang="ts">
-	import { ScrollArea as ScrollAreaPrimitive } from "bits-ui";
-	import { cn } from "$lib/utils.js";
-
-	type $$Props = ScrollAreaPrimitive.ScrollbarProps & {
-		orientation?: "vertical" | "horizontal";
-	};
-
-	let className: $$Props["class"] = undefined;
-	export let orientation: $$Props["orientation"] = "vertical";
-	export { className as class };
-</script>
-
-<ScrollAreaPrimitive.Scrollbar
-	{orientation}
-	class={cn(
-		"flex touch-none select-none transition-colors",
-		orientation === "vertical" && "h-full w-2.5 border-l border-l-transparent p-px",
-		orientation === "horizontal" && "h-2.5 w-full border-t border-t-transparent p-px",
-		className
-	)}
->
-	<slot />
-	<ScrollAreaPrimitive.Thumb
-		class={cn("bg-border relative rounded-full", orientation === "vertical" && "flex-1")}
-	/>
-</ScrollAreaPrimitive.Scrollbar>

src/lib/components/ui/scroll-area/scroll-area.svelte

@@ -1,32 +0,0 @@
-<script lang="ts">
-	import { ScrollArea as ScrollAreaPrimitive } from "bits-ui";
-	import { Scrollbar } from "./index.js";
-	import { cn } from "$lib/utils.js";
-
-	type $$Props = ScrollAreaPrimitive.Props & {
-		orientation?: "vertical" | "horizontal" | "both";
-		scrollbarXClasses?: string;
-		scrollbarYClasses?: string;
-	};
-
-	let className: $$Props["class"] = undefined;
-	export { className as class };
-	export let orientation = "vertical";
-	export let scrollbarXClasses: string = "";
-	export let scrollbarYClasses: string = "";
-</script>
-
-<ScrollAreaPrimitive.Root {...$$restProps} class={cn("relative overflow-hidden", className)}>
-	<ScrollAreaPrimitive.Viewport class="h-full w-full rounded-[inherit]">
-		<ScrollAreaPrimitive.Content>
-			<slot />
-		</ScrollAreaPrimitive.Content>
-	</ScrollAreaPrimitive.Viewport>
-	{#if orientation === "vertical" || orientation === "both"}
-		<Scrollbar orientation="vertical" class={scrollbarYClasses} />
-	{/if}
-	{#if orientation === "horizontal" || orientation === "both"}
-		<Scrollbar orientation="horizontal" class={scrollbarXClasses} />
-	{/if}
-	<ScrollAreaPrimitive.Corner />
-</ScrollAreaPrimitive.Root>

src/lib/components/ui/tooltip/index.ts

@@ -1,15 +0,0 @@
-import { Tooltip as TooltipPrimitive } from "bits-ui";
-import Content from "./tooltip-content.svelte";
-
-const Root = TooltipPrimitive.Root;
-const Trigger = TooltipPrimitive.Trigger;
-
-export {
-	Root,
-	Trigger,
-	Content,
-	//
-	Root as Tooltip,
-	Content as TooltipContent,
-	Trigger as TooltipTrigger,
-};

src/lib/components/ui/tooltip/tooltip-content.svelte

@@ -1,28 +0,0 @@
-<script lang="ts">
-	import { Tooltip as TooltipPrimitive } from "bits-ui";
-	import { cn, flyAndScale } from "$lib/utils.js";
-
-	type $$Props = TooltipPrimitive.ContentProps;
-
-	let className: $$Props["class"] = undefined;
-	export let sideOffset: $$Props["sideOffset"] = 4;
-	export let transition: $$Props["transition"] = flyAndScale;
-	export let transitionConfig: $$Props["transitionConfig"] = {
-		y: 8,
-		duration: 150,
-	};
-	export { className as class };
-</script>
-
-<TooltipPrimitive.Content
-	{transition}
-	{transitionConfig}
-	{sideOffset}
-	class={cn(
-		"bg-popover text-popover-foreground z-50 overflow-hidden rounded-md border px-3 py-1.5 text-sm shadow-md",
-		className
-	)}
-	{...$$restProps}
->
-	<slot />
-</TooltipPrimitive.Content>

src/lib/markdown.css

@@ -1 +0,0 @@
-@import '$lib/hljs/rose-pine.css'

src/lib/protobuf/definitions/niming.proto

@@ -1,38 +0,0 @@
-syntax = "proto3";
-
-// This is for posting a paragraph.
-message Post {
-  string content = 1;
-  // reply to a post, like a mail chat.
-  optional int64 ref = 2;
-  repeated bytes files = 3;
-}
-
-enum Status {
-  Failed = 0;
-  Success = 1;
-}
-
-// The response of the posting, defining what should return.
-message PostResponse {
-  Status status = 1;
-  string hash = 2;
-  uint64 id = 3;
-  optional string failed_message = 4;
-}
-
-message FetchResponse {
-  message Message {
-    uint64 id = 1;
-    string content = 2;
-    // reply to a post, like a mail chat.
-    // optional uint64 ref = 3;
-    // request files through /article/file/<id> with MIME type.
-    // See it as a BLOB url;
-    repeated string files_hash = 3;
-    optional string igid = 4;
-    repeated string comments_hash = 5;
-  }
-  // Several post info
-  repeated Message posts = 1;
-}

src/lib/protobuf/niming.ts

@@ -1,367 +0,0 @@
-// @generated by protobuf-ts 2.9.4
-// @generated from protobuf file "niming.proto" (syntax proto3)
-// tslint:disable
-import type { BinaryWriteOptions } from "@protobuf-ts/runtime";
-import type { IBinaryWriter } from "@protobuf-ts/runtime";
-import { WireType } from "@protobuf-ts/runtime";
-import type { BinaryReadOptions } from "@protobuf-ts/runtime";
-import type { IBinaryReader } from "@protobuf-ts/runtime";
-import { UnknownFieldHandler } from "@protobuf-ts/runtime";
-import type { PartialMessage } from "@protobuf-ts/runtime";
-import { reflectionMergePartial } from "@protobuf-ts/runtime";
-import { MessageType } from "@protobuf-ts/runtime";
-/**
- * This is for posting a paragraph.
- *
- * @generated from protobuf message Post
- */
-export interface Post {
-    /**
-     * @generated from protobuf field: string content = 1;
-     */
-    content: string;
-    /**
-     * reply to a post, like a mail chat.
-     *
-     * @generated from protobuf field: optional int64 ref = 2;
-     */
-    ref?: bigint;
-    /**
-     * @generated from protobuf field: repeated bytes files = 3;
-     */
-    files: Uint8Array[];
-}
-/**
- * The response of the posting, defining what should return.
- *
- * @generated from protobuf message PostResponse
- */
-export interface PostResponse {
-    /**
-     * @generated from protobuf field: Status status = 1;
-     */
-    status: Status;
-    /**
-     * @generated from protobuf field: string hash = 2;
-     */
-    hash: string;
-    /**
-     * @generated from protobuf field: uint64 id = 3;
-     */
-    id: bigint;
-    /**
-     * @generated from protobuf field: optional string failed_message = 4;
-     */
-    failedMessage?: string;
-}
-/**
- * @generated from protobuf message FetchResponse
- */
-export interface FetchResponse {
-    /**
-     * Several post info
-     *
-     * @generated from protobuf field: repeated FetchResponse.Message posts = 1;
-     */
-    posts: FetchResponse_Message[];
-}
-/**
- * @generated from protobuf message FetchResponse.Message
- */
-export interface FetchResponse_Message {
-    /**
-     * @generated from protobuf field: uint64 id = 1;
-     */
-    id: bigint;
-    /**
-     * @generated from protobuf field: string content = 2;
-     */
-    content: string;
-    /**
-     * reply to a post, like a mail chat.
-     * optional uint64 ref = 3;
-     * request files through /article/file/<id> with MIME type.
-     * See it as a BLOB url;
-     *
-     * @generated from protobuf field: repeated string files_hash = 3;
-     */
-    filesHash: string[];
-    /**
-     * @generated from protobuf field: optional string igid = 4;
-     */
-    igid?: string;
-    /**
-     * @generated from protobuf field: repeated string comments_hash = 5;
-     */
-    commentsHash: string[];
-}
-/**
- * @generated from protobuf enum Status
- */
-export enum Status {
-    /**
-     * @generated from protobuf enum value: Failed = 0;
-     */
-    Failed = 0,
-    /**
-     * @generated from protobuf enum value: Success = 1;
-     */
-    Success = 1
-}
-// @generated message type with reflection information, may provide speed optimized methods
-class Post$Type extends MessageType<Post> {
-    constructor() {
-        super("Post", [
-            { no: 1, name: "content", kind: "scalar", T: 9 /*ScalarType.STRING*/ },
-            { no: 2, name: "ref", kind: "scalar", opt: true, T: 3 /*ScalarType.INT64*/, L: 0 /*LongType.BIGINT*/ },
-            { no: 3, name: "files", kind: "scalar", repeat: 2 /*RepeatType.UNPACKED*/, T: 12 /*ScalarType.BYTES*/ }
-        ]);
-    }
-    create(value?: PartialMessage<Post>): Post {
-        const message = globalThis.Object.create((this.messagePrototype!));
-        message.content = "";
-        message.files = [];
-        if (value !== undefined)
-            reflectionMergePartial<Post>(this, message, value);
-        return message;
-    }
-    internalBinaryRead(reader: IBinaryReader, length: number, options: BinaryReadOptions, target?: Post): Post {
-        let message = target ?? this.create(), end = reader.pos + length;
-        while (reader.pos < end) {
-            let [fieldNo, wireType] = reader.tag();
-            switch (fieldNo) {
-                case /* string content */ 1:
-                    message.content = reader.string();
-                    break;
-                case /* optional int64 ref */ 2:
-                    message.ref = reader.int64().toBigInt();
-                    break;
-                case /* repeated bytes files */ 3:
-                    message.files.push(reader.bytes());
-                    break;
-                default:
-                    let u = options.readUnknownField;
-                    if (u === "throw")
-                        throw new globalThis.Error(`Unknown field ${fieldNo} (wire type ${wireType}) for ${this.typeName}`);
-                    let d = reader.skip(wireType);
-                    if (u !== false)
-                        (u === true ? UnknownFieldHandler.onRead : u)(this.typeName, message, fieldNo, wireType, d);
-            }
-        }
-        return message;
-    }
-    internalBinaryWrite(message: Post, writer: IBinaryWriter, options: BinaryWriteOptions): IBinaryWriter {
-        /* string content = 1; */
-        if (message.content !== "")
-            writer.tag(1, WireType.LengthDelimited).string(message.content);
-        /* optional int64 ref = 2; */
-        if (message.ref !== undefined)
-            writer.tag(2, WireType.Varint).int64(message.ref);
-        /* repeated bytes files = 3; */
-        for (let i = 0; i < message.files.length; i++)
-            writer.tag(3, WireType.LengthDelimited).bytes(message.files[i]);
-        let u = options.writeUnknownFields;
-        if (u !== false)
-            (u == true ? UnknownFieldHandler.onWrite : u)(this.typeName, message, writer);
-        return writer;
-    }
-}
-/**
- * @generated MessageType for protobuf message Post
- */
-export const Post = new Post$Type();
-// @generated message type with reflection information, may provide speed optimized methods
-class PostResponse$Type extends MessageType<PostResponse> {
-    constructor() {
-        super("PostResponse", [
-            { no: 1, name: "status", kind: "enum", T: () => ["Status", Status] },
-            { no: 2, name: "hash", kind: "scalar", T: 9 /*ScalarType.STRING*/ },
-            { no: 3, name: "id", kind: "scalar", T: 4 /*ScalarType.UINT64*/, L: 0 /*LongType.BIGINT*/ },
-            { no: 4, name: "failed_message", kind: "scalar", opt: true, T: 9 /*ScalarType.STRING*/ }
-        ]);
-    }
-    create(value?: PartialMessage<PostResponse>): PostResponse {
-        const message = globalThis.Object.create((this.messagePrototype!));
-        message.status = 0;
-        message.hash = "";
-        message.id = 0n;
-        if (value !== undefined)
-            reflectionMergePartial<PostResponse>(this, message, value);
-        return message;
-    }
-    internalBinaryRead(reader: IBinaryReader, length: number, options: BinaryReadOptions, target?: PostResponse): PostResponse {
-        let message = target ?? this.create(), end = reader.pos + length;
-        while (reader.pos < end) {
-            let [fieldNo, wireType] = reader.tag();
-            switch (fieldNo) {
-                case /* Status status */ 1:
-                    message.status = reader.int32();
-                    break;
-                case /* string hash */ 2:
-                    message.hash = reader.string();
-                    break;
-                case /* uint64 id */ 3:
-                    message.id = reader.uint64().toBigInt();
-                    break;
-                case /* optional string failed_message */ 4:
-                    message.failedMessage = reader.string();
-                    break;
-                default:
-                    let u = options.readUnknownField;
-                    if (u === "throw")
-                        throw new globalThis.Error(`Unknown field ${fieldNo} (wire type ${wireType}) for ${this.typeName}`);
-                    let d = reader.skip(wireType);
-                    if (u !== false)
-                        (u === true ? UnknownFieldHandler.onRead : u)(this.typeName, message, fieldNo, wireType, d);
-            }
-        }
-        return message;
-    }
-    internalBinaryWrite(message: PostResponse, writer: IBinaryWriter, options: BinaryWriteOptions): IBinaryWriter {
-        /* Status status = 1; */
-        if (message.status !== 0)
-            writer.tag(1, WireType.Varint).int32(message.status);
-        /* string hash = 2; */
-        if (message.hash !== "")
-            writer.tag(2, WireType.LengthDelimited).string(message.hash);
-        /* uint64 id = 3; */
-        if (message.id !== 0n)
-            writer.tag(3, WireType.Varint).uint64(message.id);
-        /* optional string failed_message = 4; */
-        if (message.failedMessage !== undefined)
-            writer.tag(4, WireType.LengthDelimited).string(message.failedMessage);
-        let u = options.writeUnknownFields;
-        if (u !== false)
-            (u == true ? UnknownFieldHandler.onWrite : u)(this.typeName, message, writer);
-        return writer;
-    }
-}
-/**
- * @generated MessageType for protobuf message PostResponse
- */
-export const PostResponse = new PostResponse$Type();
-// @generated message type with reflection information, may provide speed optimized methods
-class FetchResponse$Type extends MessageType<FetchResponse> {
-    constructor() {
-        super("FetchResponse", [
-            { no: 1, name: "posts", kind: "message", repeat: 1 /*RepeatType.PACKED*/, T: () => FetchResponse_Message }
-        ]);
-    }
-    create(value?: PartialMessage<FetchResponse>): FetchResponse {
-        const message = globalThis.Object.create((this.messagePrototype!));
-        message.posts = [];
-        if (value !== undefined)
-            reflectionMergePartial<FetchResponse>(this, message, value);
-        return message;
-    }
-    internalBinaryRead(reader: IBinaryReader, length: number, options: BinaryReadOptions, target?: FetchResponse): FetchResponse {
-        let message = target ?? this.create(), end = reader.pos + length;
-        while (reader.pos < end) {
-            let [fieldNo, wireType] = reader.tag();
-            switch (fieldNo) {
-                case /* repeated FetchResponse.Message posts */ 1:
-                    message.posts.push(FetchResponse_Message.internalBinaryRead(reader, reader.uint32(), options));
-                    break;
-                default:
-                    let u = options.readUnknownField;
-                    if (u === "throw")
-                        throw new globalThis.Error(`Unknown field ${fieldNo} (wire type ${wireType}) for ${this.typeName}`);
-                    let d = reader.skip(wireType);
-                    if (u !== false)
-                        (u === true ? UnknownFieldHandler.onRead : u)(this.typeName, message, fieldNo, wireType, d);
-            }
-        }
-        return message;
-    }
-    internalBinaryWrite(message: FetchResponse, writer: IBinaryWriter, options: BinaryWriteOptions): IBinaryWriter {
-        /* repeated FetchResponse.Message posts = 1; */
-        for (let i = 0; i < message.posts.length; i++)
-            FetchResponse_Message.internalBinaryWrite(message.posts[i], writer.tag(1, WireType.LengthDelimited).fork(), options).join();
-        let u = options.writeUnknownFields;
-        if (u !== false)
-            (u == true ? UnknownFieldHandler.onWrite : u)(this.typeName, message, writer);
-        return writer;
-    }
-}
-/**
- * @generated MessageType for protobuf message FetchResponse
- */
-export const FetchResponse = new FetchResponse$Type();
-// @generated message type with reflection information, may provide speed optimized methods
-class FetchResponse_Message$Type extends MessageType<FetchResponse_Message> {
-    constructor() {
-        super("FetchResponse.Message", [
-            { no: 1, name: "id", kind: "scalar", T: 4 /*ScalarType.UINT64*/, L: 0 /*LongType.BIGINT*/ },
-            { no: 2, name: "content", kind: "scalar", T: 9 /*ScalarType.STRING*/ },
-            { no: 3, name: "files_hash", kind: "scalar", repeat: 2 /*RepeatType.UNPACKED*/, T: 9 /*ScalarType.STRING*/ },
-            { no: 4, name: "igid", kind: "scalar", opt: true, T: 9 /*ScalarType.STRING*/ },
-            { no: 5, name: "comments_hash", kind: "scalar", repeat: 2 /*RepeatType.UNPACKED*/, T: 9 /*ScalarType.STRING*/ }
-        ]);
-    }
-    create(value?: PartialMessage<FetchResponse_Message>): FetchResponse_Message {
-        const message = globalThis.Object.create((this.messagePrototype!));
-        message.id = 0n;
-        message.content = "";
-        message.filesHash = [];
-        message.commentsHash = [];
-        if (value !== undefined)
-            reflectionMergePartial<FetchResponse_Message>(this, message, value);
-        return message;
-    }
-    internalBinaryRead(reader: IBinaryReader, length: number, options: BinaryReadOptions, target?: FetchResponse_Message): FetchResponse_Message {
-        let message = target ?? this.create(), end = reader.pos + length;
-        while (reader.pos < end) {
-            let [fieldNo, wireType] = reader.tag();
-            switch (fieldNo) {
-                case /* uint64 id */ 1:
-                    message.id = reader.uint64().toBigInt();
-                    break;
-                case /* string content */ 2:
-                    message.content = reader.string();
-                    break;
-                case /* repeated string files_hash */ 3:
-                    message.filesHash.push(reader.string());
-                    break;
-                case /* optional string igid */ 4:
-                    message.igid = reader.string();
-                    break;
-                case /* repeated string comments_hash */ 5:
-                    message.commentsHash.push(reader.string());
-                    break;
-                default:
-                    let u = options.readUnknownField;
-                    if (u === "throw")
-                        throw new globalThis.Error(`Unknown field ${fieldNo} (wire type ${wireType}) for ${this.typeName}`);
-                    let d = reader.skip(wireType);
-                    if (u !== false)
-                        (u === true ? UnknownFieldHandler.onRead : u)(this.typeName, message, fieldNo, wireType, d);
-            }
-        }
-        return message;
-    }
-    internalBinaryWrite(message: FetchResponse_Message, writer: IBinaryWriter, options: BinaryWriteOptions): IBinaryWriter {
-        /* uint64 id = 1; */
-        if (message.id !== 0n)
-            writer.tag(1, WireType.Varint).uint64(message.id);
-        /* string content = 2; */
-        if (message.content !== "")
-            writer.tag(2, WireType.LengthDelimited).string(message.content);
-        /* repeated string files_hash = 3; */
-        for (let i = 0; i < message.filesHash.length; i++)
-            writer.tag(3, WireType.LengthDelimited).string(message.filesHash[i]);
-        /* optional string igid = 4; */
-        if (message.igid !== undefined)
-            writer.tag(4, WireType.LengthDelimited).string(message.igid);
-        /* repeated string comments_hash = 5; */
-        for (let i = 0; i < message.commentsHash.length; i++)
-            writer.tag(5, WireType.LengthDelimited).string(message.commentsHash[i]);
-        let u = options.writeUnknownFields;
-        if (u !== false)
-            (u == true ? UnknownFieldHandler.onWrite : u)(this.typeName, message, writer);
-        return writer;
-    }
-}
-/**
- * @generated MessageType for protobuf message FetchResponse.Message
- */
-export const FetchResponse_Message = new FetchResponse_Message$Type();

src/routes/+layout.svelte

@@ -3,7 +3,7 @@
 	let { children } = $props();
 </script>
 
-<div class="sticky top-0 z-50 grid h-16 w-full grid-cols-4 text-nowrap bg-background">
+<div class="sticky top-0 z-10 grid h-16 w-full grid-cols-4 bg-background">
 	<div class="col-span-3 grid grid-cols-4 text-4xl">
 		<a class="m-auto" href="/">中工匿名</a>
 	</div>

src/routes/+page.svelte

@@ -1,90 +1,49 @@
 <script lang="ts">
 	import MessageCard from './message_card.svelte';
 	import MingcuteAddCircleFill from '~icons/mingcute/add-circle-fill';
-	import Marker, { get_content, files, clear_content } from './marker.svelte';
+	import Overlay, { toggle_overlay, get_overlay } from './overlay.svelte';
-	import api_inst, { type Result } from '$lib/api';
+	import DOMPurify from 'isomorphic-dompurify';
-	import { FetchResponse_Message, type PostResponse } from '$lib/protobuf/niming';
+	import Marker from './marker.svelte';
-	import { onMount } from 'svelte';
-	import { SvelteSet } from 'svelte/reactivity';
-	import { Dialog } from 'bits-ui';
-	import { fade } from 'svelte/transition';
 
-	let timer = false;
+	let value: string;
-	let open = $state(false);
 
-	const send = () => {
+	const overlay = () => {
-		if (!timer) {
+		if (!get_overlay()) {
-			timer = true;
+		} else {
-			api_inst.send_post(get_content(), undefined, files).then((result: Result<PostResponse>) => {
-				alert(result.message);
-				if (result.ok()) {
-					clear_content();
-					open = false;
-				}
-				setTimeout(() => {
-					timer = false;
-				}, 5000);
-			});
 		}
+		toggle_overlay();
 	};
-
-	let posts = new SvelteSet<FetchResponse_Message>();
-	onMount(() => {
-		api_inst.page = 0;
-		let observe = new IntersectionObserver(
-			(_) => {
-				console.log('Intersecting');
-				api_inst.fetch().then((e) => {
-					console.log(api_inst.page);
-					if (e.ok() && e.enclose != undefined) {
-						e.enclose?.posts.forEach((post) => {
-							posts.add(post);
-						});
-					}
-				});
-			},
-			{
-				root: null,
-				rootMargin: '0px',
-				threshold: 1
-			}
-		);
-		const element = document.querySelector('#loader');
-		if (element != null) {
-			observe.observe(element);
-		}
-	});
-	$inspect(posts);
 </script>
 
-<div
+<div style="width:100dvw;" class="grid h-dvh px-5 py-3">
-	class="relative grid h-fit min-h-dvh w-dvw grid-cols-1 justify-items-center gap-10 py-3 lg:grid-cols-2 lg:px-[10dvw]"
+	<!-- <p class="justify-self-center m-auto">空空如也...</p> -->
->
+	<MessageCard
-	{#each posts as p}
+		content="
-		<MessageCard post={p}></MessageCard>
+# H1 
-	{/each}
+## H2
-	<div class="absolute bottom-0 left-0 h-10 w-full text-center" id="loader">Loading...</div>
+### H3
-</div>
+[url](https://google.com)  
-<Dialog.Root bind:open>
+![image](http://localhost:5173/favicon.png)
-	<Dialog.Trigger class="fixed bottom-[15dvh] right-[10dvw] text-4xl">
+Test   
-		<MingcuteAddCircleFill />
+NormalText
-	</Dialog.Trigger>
+"
-	<Dialog.Portal>
-		<Dialog.Overlay
-			transition={fade}
-			transitionConfig={{ duration: 150 }}
-			class="fixed inset-0 z-50 bg-black/80"
 	/>
-		<Dialog.Content
-			class="fixed left-[50%] top-[50%] z-50 h-[40dvh] w-[50dvw] translate-x-[-50%] translate-y-[-50%] 
-      rounded-lg border bg-background p-5 shadow-popover outline-none sm:w-[80dvw] md:w-[60dvw]"
-		>
-			<div class="grid grid-cols-3">
-				<Dialog.Close class="text-left">離開</Dialog.Close>
-				<Dialog.Title class="text-center">新增文章</Dialog.Title>
-				<button class="pr-1 text-right" onclickcapture={send}>Send</button>
 </div>
-			<Marker></Marker>
+<button id="add" onclick={overlay} class="text-3xl"> <MingcuteAddCircleFill /> </button>
-		</Dialog.Content>
+<Overlay>
-	</Dialog.Portal>
+	<div class="flex w-4/6 flex-col rounded-lg bg-primary px-5 py-3" style="height:60dvh;">
-</Dialog.Root>
+		<div class="relative h-6 w-full">
+			<button class="absolute left-0" onclick={overlay}>取消</button>
+			<button class="absolute right-0">發送</button>
+		</div>
+		<Marker text={value} height="h-[calc(100%-1.5rem)]" />
+	</div>
+</Overlay>
+
+<style>
+	#add {
+		position: fixed;
+		bottom: calc(15dvh);
+		right: calc(10dvw);
+	}
+</style>

src/routes/links/+page.svelte

@@ -1,3 +0,0 @@
-<div>
-	<p>IG: <a href="">IG 帳號</a></p>
-</div>

src/routes/marker.svelte

@@ -1,29 +1,15 @@
-<script module lang="ts">
-	let content: string = $state<string>('');
-
-	let dyn_files = $state<FileList>();
-
-	let files: Array<File> = [];
-	const get_content = () => {
-		return content;
-	};
-	const clear_content = () => {
-		content = '';
-		files.splice(0, files.length);
-	};
-
-	export { files, get_content, clear_content };
-</script>
-
 <script lang="ts">
+	let { text, height }: { text: string; height: string } = $props();
 	import { Textarea } from '$lib/components/ui/textarea';
-	import * as Tooltip from '$lib/components/ui/tooltip';
+	import { Marked } from 'marked';
+	import DOMPurify from 'isomorphic-dompurify';
 	import type { KeyboardEventHandler } from 'svelte/elements';
-	import MingcutePicFill from '~icons/mingcute/pic-fill';
+	import { markedHighlight } from 'marked-highlight';
-	import MingcuteCloseCircleFill from '~icons/mingcute/close-circle-fill';
+	import hljs from 'highlight.js';
-	import { SvelteMap } from 'svelte/reactivity';
+	import '$lib/hljs/rose-pine.css';
 
-	// It makes some of ARIA commands into inputs (like tab into \t)
+	let window_size = $state(0);
+	let value = $state('');
 	const key_scrap: KeyboardEventHandler<HTMLTextAreaElement> = (event: KeyboardEvent) => {
 		let ct: HTMLTextAreaElement = event.currentTarget as HTMLTextAreaElement;
 		if (event.key == 'Tab') {
@@ -35,68 +21,72 @@
 		}
 	};
 
-	// it use svelte's map in order to achieve reactivity(like $state)
+	// marked
-	// https://svelte.dev/docs/svelte/svelte-reactivity
+	const marked = new Marked(
-	let dyn_image_links = new SvelteMap<string, string>();
+		markedHighlight({
-
+			emptyLangClass: 'hljs',
-	// it create a map of name and local files path to show images
+			langPrefix: 'hljs language-',
-	const update_image = () => {
+			highlight(code, lang, info) {
-		if (dyn_files != undefined) {
+				const language = hljs.getLanguage(lang) ? lang : 'plaintext';
-			dyn_image_links.clear();
+				return hljs.highlight(code, { language }).value;
-			for (let i = 0; i < dyn_files.length; i++) {
-				let item = dyn_files.item(i);
-				if (item != null) {
-					dyn_image_links.set(item.name, URL.createObjectURL(item));
 			}
-			}
+		})
-		}
+	);
-	};
-	const delete_image = (key: string) => {
-		dyn_image_links.delete(key);
-	};
 </script>
 
-<div class="flex h-full w-full flex-col justify-items-center gap-3 pt-[3%]">
+<svelte:window bind:innerWidth={window_size} />
-	<Textarea
+<div class="{height} w-full">
-		class="mx-auto h-[80%] w-full resize-none bg-background text-base"
+	<div class="h-[4%] w-full"></div>
-		onkeydowncapture={key_scrap}
+	{#if window_size < 360}
-		placeholder="寫一些東西..."
+		<div>
-		bind:value={content}
+			<Textarea class="h-[96%] w-full resize-none" />
-	/>
-	<hr />
-	<div class="w-full">
-		<Tooltip.Root>
-			<Tooltip.Trigger>
-				<input
-					id="enclosed"
-					type="file"
-					accept=".gif,.png,.jpeg,.jpg,.webm,.heic,.heif,.mp4,.webp"
-					multiple
-					class="hidden"
-					bind:files={dyn_files}
-					onchange={update_image}
-				/>
-				<label for="enclosed" class="mx-auto w-fit"><MingcutePicFill class="text-xl" /> </label>
-			</Tooltip.Trigger>
-			<Tooltip.Content>
-				<p>Add a picture</p>
-			</Tooltip.Content>
-		</Tooltip.Root>
 		</div>
-	<!-- selected images preview -->
+	{:else}
-	{#if dyn_image_links.size > 0}
+		<div class="grid h-[96%] w-full grid-cols-2 gap-5">
-		<div class="flex h-[75px] w-full max-w-full flex-row gap-3 overflow-y-hidden">
+			<textarea
-			{#each dyn_image_links as entries}
+				tabindex="0"
-				<div class="relative h-[70px] w-[70px]">
+				class="resize-none rounded-lg bg-background p-1 text-foreground focus:outline-none focus:ring focus:ring-primary-foreground"
-					<img src={entries[1]} alt="selected files" class="object-scale-down" />
+				bind:value
-					<button class="absolute right-0 top-0" onclick={() => delete_image(entries[0])}>
+				onkeydown={key_scrap}
-						<MingcuteCloseCircleFill />
+			></textarea>
-					</button>
+			<div class="inner_card">
+				{@html marked.parse(value).toString()}
 			</div>
-			{/each}
 		</div>
 	{/if}
 </div>
 
 <style>
+	.inner_card :global {
+		max-width: 100%;
+		overflow-y: scroll;
+		a {
+			@apply text-cyan-500;
+		}
+		p:has(code) {
+			overflow-x: scroll;
+			padding: 10px 0px;
+			code {
+				/* @apply bg-amber-600; */
+				text-wrap: nowrap;
+			}
+		}
+		p {
+			word-break: keep-all;
+			overflow-wrap: break-word;
+		}
+		pre {
+			/* @apply bg-amber-600; */
+			overflow-x: scroll;
+		}
+		h1 {
+			font-size: 1.3rem;
+		}
+		h2 {
+			font-size: 1.2rem;
+		}
+		h3 {
+			font-size: 1.1rem;
+		}
+	}
 </style>

src/routes/message_card.svelte

@@ -1,77 +1,22 @@
 <script lang="ts">
-	let { post }: { post: FetchResponse_Message } = $props();
+	let { content }: { content: string } = $props();
+	import { marked } from 'marked';
 	import * as Dialog from '$lib/components/ui/dialog';
-	import ScrollArea from '$lib/components/ui/scroll-area/scroll-area.svelte';
+	//TODO Need sanitizer
-	import type { FetchResponse_Message } from '$lib/protobuf/niming';
-	import DOMPurify from 'isomorphic-dompurify';
-
-	//Icons
-	import MingcuteForwardFill from '~icons/mingcute/forward-fill';
-	import MingcuteInsFill from '~icons/mingcute/ins-fill';
-	import MingcuteHeartFill from '~icons/mingcute/heart-fill';
-
-	const url = /(https|http):\/\/[\S]*/g;
-	const parser = (text: string) => {
-		text.replaceAll(url, (sub) => {
-			return `<a href=${sub}>${sub}</a>`;
-		});
-		return text;
-	};
-	let item = DOMPurify.sanitize(parser(post.content));
 </script>
 
-<Dialog.Root>
+<div
-	<div class="flex h-fit w-fit flex-row-reverse">
+	class="card_eff flex max-h-80 max-w-64 flex-col overflow-y-hidden bg-amber-400 px-5 font-bold text-slate-900"
-		<div class="z-10 flex w-10 flex-col-reverse gap-3 text-2xl">
-			<!-- Interactions -->
-			<button class=" text-center" aria-label="like"><MingcuteHeartFill /></button>
-			<button
-				class=" text-center"
-				aria-label="ig"
-				onclick={() => {
-					window.open('', '_blank');
-				}}
-			>
-				<MingcuteInsFill />
-			</button>
-			<button class=" text-center" aria-label="forward"><MingcuteForwardFill /></button>
-		</div>
-		<Dialog.Trigger
-			class="h-fit max-h-80 max-w-[70dvw] overflow-y-hidden bg-amber-400 text-slate-900 drop-shadow-[5px_10px_#f38f0f] lg:max-w-96"
 >
 	<div class="inner_card">
-				{@html item}
+		{@html marked(content)}
-				{#if post.filesHash.length > 0}
-					<ScrollArea class="mt-10 w-full" orientation="horizontal">
-						{#each post.filesHash as hash}
-							<img src={'/article/file/' + hash} alt="pictures" />
-						{/each}
-					</ScrollArea>
-				{/if}
 	</div>
-		</Dialog.Trigger>
 </div>
-	<Dialog.Content>
-		{@html item}
-		{#if post.filesHash.length > 1}
-			<ScrollArea class="w-full whitespace-nowrap rounded-md border" orientation="horizontal">
-				<div class="flex h-[35dvh] w-fit space-x-4 p-4">
-					{#each post.filesHash as hash}
-						<img src={'/article/file/' + hash} alt="pictures" class="aspect-auto object-cover" />
-					{/each}
-				</div>
-			</ScrollArea>
-		{:else if post.filesHash.length == 1}
-			<img
-				src={'/article/file/' + post.filesHash[0]}
-				alt="pictures"
-				class="aspect-auto object-cover"
-			/>
-		{/if}
-	</Dialog.Content>
-</Dialog.Root>
 
 <style>
+	.card_eff {
+		filter: drop-shadow(5px 10px #f38f0f);
+	}
 	.inner_card :global {
 		a {
 			@apply text-cyan-500;
@@ -79,9 +24,6 @@
 		code {
 			@apply bg-amber-600;
 		}
-		mask-image: linear-gradient(0deg, transparent, white 30%);
+		mask-image: linear-gradient(0deg, transparent, white 50%);
-		height: 100%;
-		padding: 5px 5% 40px;
-		text-align: left;
 	}
 </style>

src/routes/overlay.svelte

@@ -0,0 +1,32 @@
+<script module lang="ts">
+	let overlay = $state(false);
+	const toggle_overlay = () => {
+		overlay = !overlay;
+		if (overlay) {
+			document.body.classList.add('overflow-y-hidden');
+		} else {
+			document.body.classList.remove('overflow-y-hidden');
+		}
+	};
+	const get_overlay = () => {
+		return overlay;
+	};
+	export { toggle_overlay, get_overlay };
+</script>
+
+<script lang="ts">
+	let { children } = $props();
+</script>
+
+<div
+	class={'fixed left-0 top-0 z-20 h-dvh w-dvw ' +
+		(overlay ? 'overlay_blur grid place-items-center' : 'hidden')}
+>
+	{@render children()}
+</div>
+
+<style>
+	.overlay_blur {
+		backdrop-filter: blur(10px);
+	}
+</style>

src/routes/tos/+page.svelte

@@ -1,4 +1,6 @@
-<div class="w-dvw text-center text-xl font-bold lg:text-3xl">
+<div class="flex justify-center">
-	<p>“中工匿名”不記錄個人姓名。</p>
+	<div class="w-1/2 break-keep text-center text-2xl">
+		<p>“中工匿名”不記錄個人網路位置、名字。</p>
 		<p>如訊息侵害他人權利，違反大眾道德觀，皆不保證留存。</p>
 	</div>
+</div>

vite.config.ts

@@ -3,13 +3,5 @@ import { defineConfig } from 'vite';
 import Icons from 'unplugin-icons/vite'
 
 export default defineConfig({
-  plugins: [sveltekit(), Icons({ compiler: 'svelte' })],
+	plugins: [sveltekit(), Icons({ compiler: 'svelte' })]
-  server: {
-    proxy: {
-      '/article': {
-        target: "http://10.16.20.17:5000",
-        changeOrigin: true,
-      }
-    }
-  }
 });