✨ Markdown content

pkg/view/package.json

@@ -17,11 +17,13 @@
     "hls.js": "^1.5.3",
     "medium-zoom": "^1.1.0",
     "solid-js": "^1.8.7",
+    "solid-markdown": "^2.0.0",
     "universal-cookie": "^7.0.2"
   },
   "devDependencies": {
+    "@tailwindcss/typography": "^0.5.10",
     "autoprefixer": "^10.4.17",
-    "daisyui": "^4.6.0",
+    "daisyui": "^4.6.1",
     "postcss": "^8.4.33",
     "solid-devtools": "^0.29.3",
     "tailwindcss": "^3.4.1",

pkg/view/src/components/PostAttachments.tsx

@@ -101,7 +101,7 @@ export default function PostAttachments(props: { attachments: any[] }) {
   }
 
   function getUrl(item: any): string {
-    return item.external_url ?? `/api/attachments/o/${item.file_id}`;
+    return item.external_url ? item.external_url : `/api/attachments/o/${item.file_id}`;
   }
 
   createEffect(() => {

pkg/view/src/components/PostItem.tsx

@@ -1,6 +1,7 @@
 import { createSignal, For, Show } from "solid-js";
 import { getAtk, useUserinfo } from "../stores/userinfo.tsx";
 import PostAttachments from "./PostAttachments.tsx";
+import { SolidMarkdown } from "solid-markdown";
 
 export default function PostItem(props: {
   post: any,
@@ -55,18 +56,20 @@ export default function PostItem(props: {
         </a>
       </Show>
 
-      <div class="py-5 px-7">
+      <div class="px-7">
         <h2 class="card-title">{props.post.title}</h2>
-        <article class="prose">{props.post.content}</article>
+        <article class="prose">
+          <SolidMarkdown children={props.post.content} />
+        </article>
 
         <div class="mt-2 flex gap-2">
           <For each={props.post.categories}>
-            {item => <a class="link link-primary">
+            {item => <a class="link link-primary pb-5">
               #{item.name}
             </a>}
           </For>
           <For each={props.post.tags}>
-            {item => <a class="link link-primary">
+            {item => <a class="link link-primary pb-5">
               #{item.name}
             </a>}
           </For>
@@ -105,53 +108,62 @@ export default function PostItem(props: {
       </div>
 
       <Show when={!props.noControl}>
-        <div class="grid grid-cols-3 border-y border-base-200">
-          <div class="grid grid-cols-2">
-            <div class="tooltip" data-tip="Daisuki">
-              <button type="button" class="btn btn-ghost btn-block" disabled={reacting()}
-                      onClick={() => reactPost(props.post, "like")}>
-                <i class="fa-solid fa-thumbs-up"></i>
-                <code class="font-mono">{props.post.like_count}</code>
-              </button>
+        <div class="relative">
+          <Show when={!userinfo?.isLoggedIn}>
+            <div
+              class="px-7 py-2.5 h-12 w-full opacity-0 transition-opacity hover:opacity-100 bg-base-100 border-t border-base-200 z-[1] absolute top-0 left-0">
+              <b>Login!</b> To access entire platform.
             </div>
+          </Show>
 
-            <div class="tooltip" data-tip="Daikirai">
-              <button type="button" class="btn btn-ghost btn-block" disabled={reacting()}
-                      onClick={() => reactPost(props.post, "dislike")}>
-                <i class="fa-solid fa-thumbs-down"></i>
-                <code class="font-mono">{props.post.dislike_count}</code>
-              </button>
-            </div>
-          </div>
-
-          <div class="col-span-2 flex justify-end">
-            <div class="tooltip" data-tip="Reply">
-              <button type="button" class="btn btn-ghost btn-block"
-                      onClick={() => props.onReply && props.onReply(props.post)}>
-                <i class="fa-solid fa-reply"></i>
-              </button>
-            </div>
-
-            <div class="tooltip" data-tip="Repost">
-              <button type="button" class="btn btn-ghost btn-block"
-                      onClick={() => props.onRepost && props.onRepost(props.post)}>
-                <i class="fa-solid fa-retweet"></i>
-              </button>
-            </div>
-
-            <div class="dropdown dropdown-end">
-              <div tabIndex="0" role="button" class="btn btn-ghost w-12">
-                <i class="fa-solid fa-ellipsis-vertical"></i>
+          <div class="grid grid-cols-3 border-y border-base-200">
+            <div class="grid grid-cols-2">
+              <div class="tooltip" data-tip="Daisuki">
+                <button type="button" class="btn btn-ghost btn-block" disabled={reacting()}
+                        onClick={() => reactPost(props.post, "like")}>
+                  <i class="fa-solid fa-thumbs-up"></i>
+                  <code class="font-mono">{props.post.like_count}</code>
+                </button>
+              </div>
+
+              <div class="tooltip" data-tip="Daikirai">
+                <button type="button" class="btn btn-ghost btn-block" disabled={reacting()}
+                        onClick={() => reactPost(props.post, "dislike")}>
+                  <i class="fa-solid fa-thumbs-down"></i>
+                  <code class="font-mono">{props.post.dislike_count}</code>
+                </button>
+              </div>
+            </div>
+
+            <div class="col-span-2 flex justify-end">
+              <div class="tooltip" data-tip="Reply">
+                <button type="button" class="btn btn-ghost btn-block"
+                        onClick={() => props.onReply && props.onReply(props.post)}>
+                  <i class="fa-solid fa-reply"></i>
+                </button>
+              </div>
+
+              <div class="tooltip" data-tip="Repost">
+                <button type="button" class="btn btn-ghost btn-block"
+                        onClick={() => props.onRepost && props.onRepost(props.post)}>
+                  <i class="fa-solid fa-retweet"></i>
+                </button>
+              </div>
+
+              <div class="dropdown dropdown-end">
+                <div tabIndex="0" role="button" class="btn btn-ghost w-12">
+                  <i class="fa-solid fa-ellipsis-vertical"></i>
+                </div>
+                <ul tabIndex="0" class="dropdown-content z-[1] menu p-2 shadow bg-base-100 rounded-box w-52">
+                  <Show when={userinfo?.profiles?.id === props.post.author_id}>
+                    <li><a onClick={() => props.onDelete && props.onDelete(props.post)}>Delete</a></li>
+                  </Show>
+                  <Show when={userinfo?.profiles?.id === props.post.author_id}>
+                    <li><a onClick={() => props.onEdit && props.onEdit(props.post)}>Edit</a></li>
+                  </Show>
+                  <li><a>Report</a></li>
+                </ul>
               </div>
-              <ul tabIndex="0" class="dropdown-content z-[1] menu p-2 shadow bg-base-100 rounded-box w-52">
-                <Show when={userinfo?.profiles?.id === props.post.author_id}>
-                  <li><a onClick={() => props.onDelete && props.onDelete(props.post)}>Delete</a></li>
-                </Show>
-                <Show when={userinfo?.profiles?.id === props.post.author_id}>
-                  <li><a onClick={() => props.onEdit && props.onEdit(props.post)}>Edit</a></li>
-                </Show>
-                <li><a>Report</a></li>
-              </ul>
             </div>
           </div>
         </div>

pkg/view/src/components/PostPublish.tsx

@@ -15,6 +15,17 @@ export default function PostPublish(props: {
 }) {
   const userinfo = useUserinfo();
 
+  if (!userinfo?.isLoggedIn) {
+    return (
+      <div class="py-9 flex justify-center items-center">
+        <div class="text-center">
+          <h2 class="text-lg font-bold">Login!</h2>
+          <p>Or keep silent.</p>
+        </div>
+      </div>
+    );
+  }
+
   const [submitting, setSubmitting] = createSignal(false);
   const [uploading, setUploading] = createSignal(false);
 
@@ -61,8 +72,8 @@ export default function PostPublish(props: {
       props.onError(await res.text());
     } else {
       form.reset();
-      props.onPost();
       props.onError(null);
+      setTimeout(() => props.onPost(), 250);
     }
     setSubmitting(false);
   }
@@ -97,8 +108,8 @@ export default function PostPublish(props: {
       props.onError(await res.text());
     } else {
       form.reset();
-      props.onPost();
       props.onError(null);
+      setTimeout(() => props.onPost(), 250);
     }
     setSubmitting(false);
   }
@@ -135,7 +146,7 @@ export default function PostPublish(props: {
 
     setAttachments(attachments().concat([{
       ...data,
-      author_id: userinfo?.profiles?.id,
+      author_id: userinfo?.profiles?.id
     }]));
     form.reset();
   }

pkg/view/tailwind.config.js

@@ -39,6 +39,6 @@ export default {
       }
     ]
   },
-  plugins: [require("daisyui")]
+  plugins: [require("daisyui"), require("@tailwindcss/typography")]
 };