feat: add new font and edit mode feature

AaronConlon · Aug 19, 2024 · 581b063 · 581b063
1 parent 4cca1c3
commit 581b063
Show file tree

Hide file tree

Showing 11 changed files with 360 additions and 71 deletions.
diff --git a/public/color-font.woff2 b/public/color-font.woff2
diff --git a/src/app/globals.css b/src/app/globals.css
@@ -45,6 +45,23 @@
   list-style: auto!important;
 }
 
+@font-face {
+  font-family: 'color-font';
+  src: 
+    url('/color-font.woff2') 
+    format('woff2')
+  ;
+}
+
+
+.markdown-body pre {
+  background-color: #0d172e!important;
+  color: #f8f8f2!important;
+}
+.markdown-body pre code {
+  font-family: "color-font", "__Jost_54b096",monospace!important;
+}
+
 html {
   scroll-behavior: smooth;
 }
diff --git a/src/components/Blog/Editor/EditorEntry.tsx b/src/components/Blog/Editor/EditorEntry.tsx
@@ -11,7 +11,7 @@ interface EditEntryProps {
 
 export default function EditEntry({ issueNumber }: EditEntryProps) {
   const local = useAtomValue(localTokenAtom);
-  if (local) {
+  if (local?.length) {
     return (
       <Link
         href={`/blog/editor?issueNumber=${issueNumber}`}

diff --git a/src/components/Blog/Editor/NewIssue.tsx b/src/components/Blog/Editor/NewIssue.tsx
@@ -1,7 +1,7 @@
 import { localIssuesAtom } from "@/features/atom";
 import { TLabel } from "@/features/types";
 import { useSetAtom } from "jotai";
-import { ScrollText, X } from "lucide-react";
+import { FilePlus2, X } from "lucide-react";
 import { useRef, useState } from "react";
 import { createPortal } from "react-dom";
 import toast from "react-hot-toast";
@@ -23,17 +23,21 @@ export default function NewIssue({ labels }: NewIssueProps) {
   const [localLabels, setLocalLabels] = useState([] as string[]);
 
   const onConfirm = () => {
-    const title = document.querySelector("#title")?.textContent ?? "没标题";
+    const title =
+      document.querySelector<HTMLInputElement>("#title")?.value ?? "没标题";
     const description =
-      document.querySelector("#description")?.textContent ?? "";
+      document.querySelector<HTMLInputElement>("#description")?.value ?? "";
     const cover =
-      document.querySelector("#cover")?.textContent ?? "/coder3.svg";
+      document.querySelector<HTMLInputElement>("#cover")?.value ??
+      "/coder3.svg";
     form.current = {
       title,
       description,
       cover,
     };
     // create local issue
+    const timestampString = new Date().toISOString();
+    const now = Date.now();
     setLocalIssue((prev) => [
       ...prev,
       {
@@ -42,12 +46,13 @@ export default function NewIssue({ labels }: NewIssueProps) {
           (i) => labels.find((label) => label.name === i)!
         ),
         body: "",
-        number: Date.now(),
-        updated_at: Date.now().toString(),
-        id: Date.now().toString(),
+        number: now,
+        updated_at: timestampString,
+        id: now.toString(),
       },
     ]);
     toast.success("创建成功");
+    setShow(false);
   };
 
   return (
@@ -56,7 +61,7 @@ export default function NewIssue({ labels }: NewIssueProps) {
         className="flex items-center justify-center gap-1"
         onClick={() => setShow(true)}
       >
-        <ScrollText className="w-8" />
+        <FilePlus2 className="w-8" />
       </button>
       {show &&
         createPortal(
@@ -90,13 +95,16 @@ export default function NewIssue({ labels }: NewIssueProps) {
                   className="border border-gray-10 focus-within:border-gray-200 transition-all px-2 py-1 rounded-md outline-none w-full leading-6"
                   placeholder="https://..."
                 />
-                <textarea
-                  name="description"
-                  id="description"
-                  className="p-2 rounded-md border border-gray-100 focus:border-gray-200 transition-all w-full block outline-none"
-                  rows={4}
-                  placeholder="description..."
-                />
+                <div className="flex justify-start">
+                  {/* preview cover */}
+                  <textarea
+                    name="description"
+                    id="description"
+                    className="p-2 rounded-md border border-gray-100 focus:border-gray-200 transition-all flex-grow block outline-none"
+                    rows={4}
+                    placeholder="description..."
+                  />
+                </div>
               </div>
 
               <div className="flex justify-end gap-1">

diff --git a/src/components/Blog/Editor/RecentIssues.tsx b/src/components/Blog/Editor/RecentIssues.tsx
@@ -1,6 +1,6 @@
 import { formatTimeFromNow } from "@/features/format";
 import { ILocalIssue, TIssue } from "@/features/types";
-import { Calendar, Edit2Icon } from "lucide-react";
+import { Calendar, Edit2Icon, X } from "lucide-react";
 import Link from "next/link";
 
 interface RecentIssuesProps {
@@ -15,8 +15,11 @@ export default function RecentIssues({
 }: RecentIssuesProps) {
   return (
     <div className="border h-screen overflow-auto">
-      <h1 className="p-4 text-primary font-semibold text-2xl mb-2 sticky top-0 w-full bg-white z-10">
-        {isLocal ? "Local Issues" : "Online issues"}
+      <h1 className="p-4 text-primary font-semibold text-2xl mb-2 sticky top-0 w-full bg-white z-10 flex justify-between">
+        <span className="bg-primary text-white px-2 rounded-md min-w-8 text-center">
+          {issues.length}
+        </span>
+        <span>{isLocal ? "Local Issues" : "Online issues"}</span>
       </h1>
 
       <ul className="flex flex-col gap-4 font-thin text-sm p-4">
@@ -25,21 +28,30 @@ export default function RecentIssues({
           : issues.map(({ number, title, updated_at, id }) => (
               <li
                 key={number}
-                className="grid grid-cols-[144px_auto_24px] gap-1 group"
+                className="grid grid-cols-[168px_auto_48px] gap-1 group hover:bg-primary/10 p-1"
               >
                 <span className="flex items-center gap-1 text-primary">
                   <Calendar size={16} className="opacity-60" />
                   Updated: {formatTimeFromNow(updated_at!)}
                 </span>
-                <Link href={`/blog/post/${id}`}>{title}</Link>
-                <Edit2Icon
-                  className="opacity-0 group-hover:opacity-100 transition-opacity cursor-pointer"
-                  onClick={(e) => {
-                    e.stopPropagation();
-                    e.preventDefault();
-                    onPickToEdit(number!);
-                  }}
-                />
+                <Link href={`/blog/post/${id}`} className="truncate">
+                  {title}
+                </Link>
+                <div className="flex items-center justify-end">
+                  <Edit2Icon
+                    className="opacity-0 group-hover:opacity-100 transition-opacity cursor-pointer mr-2"
+                    onClick={() => onPickToEdit(number!)}
+                    size={18}
+                  />
+                  <X
+                    className="opacity-0 group-hover:opacity-100 transition-opacity cursor-pointer"
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      e.preventDefault();
+                    }}
+                    size={18}
+                  />
+                </div>
               </li>
             ))}
       </ul>

diff --git a/src/components/Blog/Editor/SelectLabels.tsx b/src/components/Blog/Editor/SelectLabels.tsx
@@ -59,16 +59,24 @@ const customStyles: StylesConfig<LabelOption, true> = {
 export default function SelectLabels({
   labels,
   onChange,
+  defaultLabels,
 }: {
   labels: TLabel[];
   onChange: (newValue: any[]) => void;
+  defaultLabels?: TLabel[];
 }) {
   const options = labels.map((label) => ({
     value: label.name,
     label: label.name,
     color: label.color,
   }));
 
+  const defaultValue = defaultLabels?.map((label) => ({
+    value: label.name,
+    label: label.name,
+    color: label.color,
+  }));
+
   return (
     <Select
       closeMenuOnSelect={false}
@@ -79,6 +87,7 @@ export default function SelectLabels({
         console.log("new value", newValue);
         onChange(newValue.map((i) => i.value));
       }}
+      defaultValue={defaultValue}
     />
   );
 }