✨ 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,6 +108,14 @@ export default function PostItem(props: {
       </div>
 
       <Show when={!props.noControl}>
+        <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="grid grid-cols-3 border-y border-base-200">
             <div class="grid grid-cols-2">
               <div class="tooltip" data-tip="Daisuki">
@@ -155,6 +166,7 @@ export default function PostItem(props: {
               </div>
             </div>
           </div>
+        </div>
       </Show>
 
     </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")]
 };