feat: Front-end starting point and Improvements

CONTRIBUTING.md

@@ -0,0 +1,3 @@
+# Contributing Guide
+
+WIP...

dist/ngeblog-admin-assets/Form.css

@@ -1 +1 @@
-.is-active[data-v-5bc089e2]{--tw-bg-opacity: 1;background-color:var(--fallback-s,oklch(var(--s)/var(--tw-bg-opacity)));--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity))}
+.is-active[data-v-70502711]{--tw-bg-opacity: 1;background-color:var(--fallback-s,oklch(var(--s)/var(--tw-bg-opacity)));--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity))}

package.json

@@ -7,22 +7,23 @@
     "watch": "vite build --watch"
   },
   "devDependencies": {
-    "@headlessui/vue": "^1.7.19",
+    "@headlessui/vue": "^1.7.22",
     "@tailwindcss/typography": "^0.5.13",
-    "@tiptap/pm": "^2.3.1",
-    "@tiptap/starter-kit": "^2.3.1",
-    "@tiptap/vue-3": "^2.3.1",
+    "@tiptap/pm": "^2.3.2",
+    "@tiptap/starter-kit": "^2.3.2",
+    "@tiptap/vue-3": "^2.3.2",
     "@vitejs/plugin-vue": "^5.0.4",
+    "@vueuse/core": "^10.9.0",
     "autoprefixer": "^10.4.19",
     "axios": "^1.6.8",
-    "daisyui": "^4.10.1",
+    "daisyui": "^4.11.1",
     "laravel-precognition-vue": "^0.5.4",
     "postcss": "^8.4.38",
     "prettier": "^3.2.5",
-    "prettier-plugin-tailwindcss": "^0.5.13",
+    "prettier-plugin-tailwindcss": "^0.5.14",
     "tailwindcss": "^3.4.3",
-    "vite": "^5.2.8",
-    "vue": "^3.4.21",
-    "vue-router": "^4.3.0"
+    "vite": "^5.2.11",
+    "vue": "^3.4.27",
+    "vue-router": "^4.3.2"
   }
 }

phpunit.xml → phpunit.xml.dist

@@ -11,11 +11,11 @@
     </testsuites>
     <source>
         <include>
-            <!-- <directory suffix=".php">./app</directory> -->
             <directory suffix=".php">./src</directory>
         </include>
     </source>
     <php>
         <env name="DB_CONNECTION" value="testing"/>
+        <env name="DB_DATABASE" value=":memory:"/>
     </php>
 </phpunit>

readme.md

@@ -9,7 +9,14 @@
 
 # Ngeblog
 
-It's quickstart to have simple **Blogging System** for your existing laravel application. It will give you `Blogs` and `Tags` out of the box. **Ngeblog** also provides a simple admin panel built with Vue SPA.
+It's a quick start to have a simple **Blogging System** for your existing or brand-new Laravel application. Ngeblog provides a simple and elegant admin panel built with Vue and DaisyUI as an SPA App.
+
+### Features
+
+- BlogPost with [Tiptap Editor](https://tiptap.dev).
+- Tagging feature.
+- Dashboard for summary information.
+- and more...
 
 ### Screenshot
 <p align="center">

resources/js/components/ContentEditor.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="flex flex-col">
+    <div class="flex flex-col border pb-8">
         <div
             v-if="editorElement"
             class="sticky top-0 z-10 mb-8 flex flex-wrap gap-1 border-b bg-white p-2"
@@ -48,20 +48,6 @@
             >
                 code
             </button>
-            <button
-                type="button"
-                class="border px-2 py-1"
-                @click="editorElement.chain().focus().unsetAllMarks().run()"
-            >
-                clear marks
-            </button>
-            <button
-                type="button"
-                class="border px-2 py-1"
-                @click="editorElement.chain().focus().clearNodes().run()"
-            >
-                clear nodes
-            </button>
             <button
                 type="button"
                 class="border px-2 py-1"
@@ -220,25 +206,16 @@
             <button
                 type="button"
                 class="border px-2 py-1"
-                @click="editorElement.chain().focus().setHardBreak().run()"
-            >
-                hard break
-            </button>
-            <button
-                type="button"
-                class="border px-2 py-1"
-                @click="editorElement.chain().focus().undo().run()"
-                :disabled="!editorElement.can().chain().focus().undo().run()"
+                @click="editorElement.chain().focus().unsetAllMarks().run()"
             >
-                undo
+                clear marks
             </button>
             <button
                 type="button"
                 class="border px-2 py-1"
-                @click="editorElement.chain().focus().redo().run()"
-                :disabled="!editorElement.can().chain().focus().redo().run()"
+                @click="editorElement.chain().focus().clearNodes().run()"
             >
-                redo
+                clear nodes
             </button>
         </div>
         <editor-content :editor="editorElement" />
@@ -263,7 +240,7 @@ onMounted(() => {
         extensions: [StarterKit],
         editorProps: {
             attributes: {
-                class: "prose prose-sm sm:prose-lg mx-auto focus:outline-none",
+                class: "prose prose-sm sm:prose-base lg:prose-lg mx-auto focus:outline-none dark:prose-invert",
             },
         },
         content: props.modelValue || defaultContent,
@@ -275,6 +252,7 @@ onMounted(() => {
             // this.$emit('update:modelValue', editor.getJSON())
         },
     });
+
     emits("update:modelValue", editorElement.value.getHTML());
 });
 
@@ -287,7 +265,7 @@ const defaultContent = `
           Hi there,
         </h2>
         <p>
-          this is a <em>basic</em> example of <strong>tiptap</strong>. Sure, there are all kind of basic text styles you'd probably expect from a text editorElement. But wait until you see the lists:
+          This is a <strong>basic example of tiptap</strong>. Sure, there are all kind of basic text styles you'd probably expect from a text editorElement. But wait until you see the lists:
         </p>
         <ul>
           <li>