✨ More embed options available

pkg/view/src/components/PostItem.tsx

@@ -10,6 +10,7 @@ export default function PostItem(props: {
   noAuthor?: boolean,
   noControl?: boolean,
   noRelated?: boolean,
+  noContent?: boolean,
   onRepost?: (post: any) => void,
   onReply?: (post: any) => void,
   onEdit?: (post: any) => void,
@@ -63,69 +64,72 @@ export default function PostItem(props: {
           </div>
         </a>
       </Show>
-      <div class="px-7 py-5">
-        <h2 class="card-title">{props.post.title}</h2>
 
-        <Show when={!props.noClick} fallback={content}>
+      <Show when={!props.noContent}>
-          <a href={`/posts/${props.post.id}`}>
+        <div class="px-7 py-5">
-            {content}
+          <h2 class="card-title">{props.post.title}</h2>
-          </a>
+          <Show when={!props.noClick} fallback={content}>
-        </Show>
+            <a href={`/posts/${props.post.id}`}>
+              {content}
+            </a>
+          </Show>
 
-        <div class="mt-2 flex gap-2">
+          <div class="mt-2 flex gap-2">
-          <For each={props.post.categories}>
+            <For each={props.post.categories}>
-            {item =>
+              {item =>
-              <a href={`/search?category=${item.alias}`} class="badge badge-primary">
+                <a href={`/search?category=${item.alias}`} class="badge badge-primary">
-                <i class="fa-solid fa-layer-group me-1.5"></i>
+                  <i class="fa-solid fa-layer-group me-1.5"></i>
-                {item.name}
+                  {item.name}
-              </a>
+                </a>
-            }
+              }
-          </For>
+            </For>
-          <For each={props.post.tags}>
+            <For each={props.post.tags}>
-            {item =>
+              {item =>
-              <a href={`/search?tag=${item.alias}`} class="badge badge-accent">
+                <a href={`/search?tag=${item.alias}`} class="badge badge-accent">
-                <i class="fa-regular fa-tag me-1.5"></i>
+                  <i class="fa-regular fa-tag me-1.5"></i>
-                {item.name}
+                  {item.name}
-              </a>
+                </a>
-            }
+              }
-          </For>
+            </For>
+          </div>
+
+          <Show when={props.post.attachments?.length > 0}>
+            <div>
+              <PostAttachments attachments={props.post.attachments ?? []} />
+            </div>
+          </Show>
+
+          <Show when={!props.noRelated && props.post.repost_to}>
+            <p class="text-xs mt-3 mb-2">
+              <i class="fa-solid fa-retweet me-2"></i>
+              Reposted a post
+            </p>
+            <div class="border border-base-200 mb-5">
+              <PostItem
+                noControl
+                post={props.post.repost_to}
+                onError={props.onError}
+                onReact={props.onReact}
+              />
+            </div>
+          </Show>
+          <Show when={!props.noRelated && props.post.reply_to}>
+            <p class="text-xs mt-3 mb-2">
+              <i class="fa-solid fa-reply me-2"></i>
+              Replied a post
+            </p>
+            <div class="border border-base-200 mb-5">
+              <PostItem
+                noControl
+                post={props.post.reply_to}
+                onError={props.onError}
+                onReact={props.onReact}
+              />
+            </div>
+          </Show>
         </div>
+      </Show>
 
-        <Show when={props.post.attachments?.length > 0}>
-          <div>
-            <PostAttachments attachments={props.post.attachments ?? []} />
-          </div>
-        </Show>
-
-        <Show when={!props.noRelated && props.post.repost_to}>
-          <p class="text-xs mt-3 mb-2">
-            <i class="fa-solid fa-retweet me-2"></i>
-            Reposted a post
-          </p>
-          <div class="border border-base-200 mb-5">
-            <PostItem
-              noControl
-              post={props.post.repost_to}
-              onError={props.onError}
-              onReact={props.onReact}
-            />
-          </div>
-        </Show>
-        <Show when={!props.noRelated && props.post.reply_to}>
-          <p class="text-xs mt-3 mb-2">
-            <i class="fa-solid fa-reply me-2"></i>
-            Replied a post
-          </p>
-          <div class="border border-base-200 mb-5">
-            <PostItem
-              noControl
-              post={props.post.reply_to}
-              onError={props.onError}
-              onReact={props.onReact}
-            />
-          </div>
-        </Show>
-      </div>
       <Show when={!props.noControl}>
         <div class="relative">
           <Show when={!userinfo?.isLoggedIn}>

pkg/view/src/layouts/RootLayout.tsx

@@ -35,7 +35,7 @@ export default function RootLayout(props: any) {
   }
 
   const mainContentStyles = createMemo(() => {
-    if (!searchParams["noTitle"]) {
+    if (!searchParams["embedded"]) {
       return "h-[calc(100vh-64px)] mt-[64px]";
     } else {
       return "h-[100vh]";
@@ -50,7 +50,7 @@ export default function RootLayout(props: any) {
         </div>
       </div>
     }>
-      <Show when={!searchParams["noTitle"]}>
+      <Show when={!searchParams["embedded"]}>
         <Navbar />
       </Show>
 

pkg/view/src/pages/post.tsx

@@ -1,5 +1,5 @@
 import { createSignal, Show } from "solid-js";
-import { useNavigate, useParams } from "@solidjs/router";
+import { useNavigate, useParams, useSearchParams } from "@solidjs/router";
 import { createStore } from "solid-js/store";
 import { closeModel, openModel } from "../scripts/modals.ts";
 import PostPublish from "../components/PostPublish.tsx";
@@ -17,6 +17,8 @@ export default function PostPage() {
   const params = useParams();
   const navigate = useNavigate();
 
+  const [searchParams] = useSearchParams();
+
   async function readPost(pn?: number) {
     if (pn) setPage(pn);
     const res = await fetch(`/api/posts/${params["postId"]}?` + new URLSearchParams({
@@ -96,11 +98,17 @@ export default function PostPage() {
       </div>
 
       <div class="flex pt-1">
-        <button class="btn btn-ghost ml-[20px] w-12 h-12" onClick={() => back()}>
+        <Show when={searchParams["embedded"]} fallback={
-          <i class="fa-solid fa-angle-left"></i>
+          <button class="btn btn-ghost ml-[20px] w-12 h-12" onClick={() => back()}>
-        </button>
+            <i class="fa-solid fa-angle-left"></i>
+          </button>
+        }>
+          <div class="w-12 h-12 ml-[20px] flex justify-center items-center">
+            <i class="fa-solid fa-comments mb-1"></i>
+          </div>
+        </Show>
         <div class="px-5 flex items-center">
-          <p>Post #{info()?.id}</p>
+          <p>{searchParams["title"] ?? "Post details"}</p>
         </div>
       </div>
 
@@ -129,6 +137,9 @@ export default function PostPage() {
           onError={setError}
           onReact={readPost}
           onDelete={deletePost}
+          noAuthor={searchParams["noAuthor"] != null}
+          noContent={searchParams["noContent"] != null}
+          noControl={searchParams["noControl"] != null}
           onRepost={(item) => setMeta(item, "reposting")}
           onReply={(item) => setMeta(item, "replying")}
           onEdit={(item) => setMeta(item, "editing")}