Merge pull request #20 from f0rbit/dev

dedicated post editor
f0rbit · Mar 25, 2024 · 180bcbb · 180bcbb
2 parents 7bedc03 + 4fd085d
commit 180bcbb
Show file tree

Hide file tree

Showing 15 changed files with 4,680 additions and 265 deletions.
diff --git a/client/bun.lockb b/client/bun.lockb
diff --git a/client/package-lock.json b/client/package-lock.json
diff --git a/client/package.json b/client/package.json
@@ -10,10 +10,13 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "asciidoctor": "^3.0",
     "lucide-react": "^0.298.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-loader-spinner": "^6.1.6",
+    "remark": "^15.0.1",
+    "remark-html": "^16.0.1",
     "zod": "^3.22.4"
   },
   "devDependencies": {

diff --git a/client/schema.ts b/client/schema.ts
@@ -4,7 +4,9 @@ const post_schema = z.object({
     id: z.number(),
     slug: z.string(),
     title: z.string(),
+    description: z.string(),
     content: z.string(),
+    format: z.union([z.literal('md'), z.literal('adoc')]),
     category: z.string(),
     author_id: z.number(),
     tags: z.array(z.string()),
@@ -89,4 +91,20 @@ export const SCHEMA = {
     ACCESS_KEY: access_key
 }
 
+export type PostCreation = Omit<Post, "id" | "created_at" | "updated_at">
 
+export type PostUpdate = PostCreation & { id: Post['id'] | null }
+
+
+export function toIsoString(date: Date) {
+    const pad = function(num: number) {
+        return (num < 10 ? '0' : '') + num;
+    };
+
+    return date.getFullYear() +
+        '-' + pad(date.getMonth() + 1) +
+        '-' + pad(date.getDate()) +
+        'T' + pad(date.getHours()) +
+        ':' + pad(date.getMinutes()) +
+        ':' + pad(date.getSeconds())
+}
diff --git a/client/src/App.css b/client/src/App.css
@@ -17,7 +17,7 @@
     --btn-tertiary-hover: #7771f5;
     --btn-four: #3b3170;
     --btn-four-hover: #453982;
-    
+
     --border-primary: #2a2c3b;
     --border-secondary: #35374a;
     --border-tertiary: #373b57;
@@ -48,7 +48,7 @@ body {
     height: 100%;
 }
 
-#root > nav {
+#root>nav {
     display: flex;
     flex-direction: column;
     gap: 5px;
@@ -57,11 +57,11 @@ body {
     border-right: 1px solid var(--border-primary);
 }
 
-#root > nav > button[data-page="settings"] {
+#root>nav>button[data-page="settings"] {
     margin-top: auto;
 }
 
-#root > section {
+#root>section {
     width: 100%;
     height: 100%;
 }
@@ -76,7 +76,12 @@ header {
     border-bottom: 1px solid var(--border-primary);
 }
 
-h1,h2,h3,h4,h5,h6 {
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
     margin: unset;
     color: var(--text-secondary)
 }
@@ -89,26 +94,38 @@ h1 {
 p {
     color: var(--text-subtle);
     font-size: smaller;
-    margin:unset;
+    margin: unset;
 }
 
-input, select, textarea {
+input,
+select,
+textarea {
     background: var(--accent-primary);
     border: 1px solid var(--border-primary);
     color: var(--text-secondary);
     outline: none;
     border-radius: 5px;
     padding: 4px 6px;
+
 }
-input:disabled, select:disabled, textarea:disabled {
+
+input:disabled,
+select:disabled,
+textarea:disabled {
     color: var(--text-dark);
     background: var(--bg-primary);
 }
-input:focus, select:focus {
+
+input:focus,
+select:focus {
     background: var(--accent-secondary);
     border: 1px solid var(--border-secondary);
 }
 
+input::placeholder {
+    color: var(--text-dark);
+}
+
 dialog {
     background: var(--bg-primary);
     border: 1px solid var(--border-primary);
@@ -124,6 +141,7 @@ dialog {
 .sort-button {
     text-transform: capitalize;
 }
+
 .sort-button.selected {
     background: var(--accent-primary)
 }
@@ -159,7 +177,10 @@ button.close-button {
 button:hover {
     background-color: var(--accent-primary);
 }
+
 main {
+    max-height: calc(100vh - 60px);
+    overflow: auto;
     padding: 10px 20px;
     font-size: initial;
 }
@@ -258,15 +279,21 @@ main {
 
 .input-grid {
     display: grid;
-    grid-template-columns: 6vw 20vw 6vw 20vw;
+    grid-template-columns: min-content 1fr min-content 1fr;
     row-gap: 5px;
     column-gap: 20px;
     align-items: center;
+
+    #content-label {
+        grid-column: span 4;
+        margin-top: 5px;
+        text-align: center;
+    }
 }
 
 .error-message {
     text-align: center;
-    color: var(--error-red); 
+    color: var(--error-red);
 }
 
 .category-input-list {
@@ -308,6 +335,7 @@ main {
     position: absolute;
     right: 6px;
 }
+
 .top-right {
     position: absolute;
     top: 2px;
@@ -317,7 +345,7 @@ main {
 .bottom-right {
     position: absolute;
     bottom: 4px;
-    right: 4px;    
+    right: 4px;
 }
 
 .hidden-parent .hidden-child {
@@ -359,28 +387,28 @@ main {
     display: flex;
     flex-direction: row;
     align-items: center;
+}
 
-    nav {
-        min-width: 12%;
-        padding: 5px;
-        border-right: 1px var(--border-primary) solid;
-        height: 100%;
+.settings-container nav {
+    min-width: 12%;
+    padding: 5px;
+    border-right: 1px var(--border-primary) solid;
+    height: 100%;
 
-        button {
-            border: unset;
-        }
+    button {
+        border: unset;
     }
+}
 
-    main {
-        width: 100%;
-        height: 100%;
-        padding: unset;
-    }
+.settings-container main {
+    width: 100%;
+    height: 100%;
+    padding: unset;
+}
 
-    .lucide {
-        width: 18px;
-        height: 18px;
-    }
+.settings-container .lucide {
+    width: 18px;
+    height: 18px;
 }
 
 .page-center {
@@ -444,12 +472,12 @@ main {
         min-height: 200px;
         border: 1px solid var(--border-primary);
         border-radius: 5px;
-    }    
+    }
 }
 
 #integration-container {
     height: 100%;
-    
+
     .divider {
         border-top: 1px solid var(--border-primary);
         height: 1px;
@@ -460,4 +488,131 @@ main {
     }
 }
 
+.vertical-tabs {
+    flex-direction: row;
+    display: flex;
+    gap: 5px;
+
+
+    button {
+        padding: unset;
+        border: unset;
+        border-radius: unset;
+        border-bottom: 2px solid var(--border-secondary);
+        color: var(--text-subtlish);
+    }
+
+    button.selected {
+        border-bottom: 2px solid var(--text-subtle);
+    }
+}
+
+
+article {
 
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+        margin-top: 1rem;
+        margin-bottom: 0.25rem;
+    }
+
+    h1 {
+        font-size: 3rem;
+        line-height: 1;
+    }
+
+    h2 {
+        font-size: 1.875rem;
+        line-height: 2.25rem;
+    }
+
+    h3 {
+        font-size: 1.5rem;
+        line-height: 2rem;
+    }
+
+    h4,
+    h5 {
+        font-size: 1.25rem;
+        line-height: 1.75rem;
+    }
+
+    hr {
+        height: 1rem;
+        border: none;
+    }
+
+    ul {
+        list-style-type: disc;
+        list-style-position: absolute;
+    }
+
+    ol {
+        list-style-type: decimal;
+        list-style-position: absolute;
+    }
+
+    ul>li>ul>li,
+    ol>li>ol>li {
+        margin-left: 1.5rem;
+    }
+
+    ul>li>ul>li>ul>li,
+    ol>li>ol>li>ol>li {
+        margin-left: 1.5rem;
+    }
+
+    ul>li::marker,
+    ol>li::marker {
+        color: var(--text-dark);
+    }
+
+    a {
+        color: rgb(96 165 250)
+    }
+
+    a:hover {
+        color: rgb(59 130 246)
+    }
+
+    img {
+        width: 100%;
+        height: auto;
+    }
+
+    blockquote {
+        border-left: 4px solid var(--border-primary);
+        padding-left: 0.5rem
+    }
+
+    ;
+
+    pre>code {
+        display: flex;
+        padding: 0.75rem;
+        border-radius: 0.25rem;
+        border: 1px solid var(--border-primary);
+        overflow: auto;
+    }
+
+    pre {
+        padding: 0.25rem;
+        background: var(--bg-primary);
+    }
+
+    code {
+        font-size: 0.75rem;
+        line-height: 1.25rem;
+        background: var(--accent-primary);
+        padding: 2px 6px;
+        display: inline-flex;
+    }
+
+    p {
+        color: var(--text-subtlish);
+    }
+}