feat: Implement blog and blog post models, routes, and services

- Added Blog and BlogPost models with necessary fields and relationships.
- Created blogRouter for handling blog-related API endpoints including CRUD operations.
- Developed BlogService for business logic related to blogs and posts, including sharing functionality.
- Implemented API client methods for frontend to interact with blog-related endpoints.
- Added internationalization support for blog-related text in English and German.
- Created Vue components for blog editing, listing, and viewing, including a rich text editor for post content.
- Enhanced user experience with form validations and dynamic visibility settings based on user input.

frontend/src/views/social/ForumTopicView.vue

@@ -14,7 +14,7 @@
     </ul>
 
     <div class="editor-container">
-        <EditorContent :editor="editor" class="editor" />
+        <EditorContent v-if="editor" :editor="editor" class="editor" />
     </div>
     <button @click="saveNewMessage">{{ $t('socialnetwork.forum.createNewMesssage') }}</button>
 </template>
@@ -47,6 +47,8 @@ export default {
         this.editor = new Editor({
             extensions: [StarterKit],
             content: '',
+            editable: true,
+            editorProps: { attributes: { class: 'pm-root' } },
         });
     },
     beforeUnmount() {
@@ -126,13 +128,24 @@ export default {
 .editor-container {
     margin-top: 1rem;
     border: 1px solid #ccc;
-    padding: 10px;
-    min-height: 200px;
+    padding: 0;
+    min-height: 260px;
     background-color: white;
 }
 
 .editor {
-    min-height: 150px;
+    min-height: 260px;
     outline: none;
+    cursor: text;
 }
+.editor :deep(.ProseMirror) {
+    min-height: 260px;
+    outline: none;
+    padding: 10px;
+    box-sizing: border-box;
+    width: 100%;
+}
+.editor :deep(.ProseMirror p) { margin: 0 0 .6rem; }
+.editor :deep(.ProseMirror p:first-child) { margin-top: 0; }
+.editor :deep(.ProseMirror-focused) { outline: 2px solid rgba(100,150,255,.35); }
 </style>

frontend/src/views/social/ForumView.vue

@@ -16,7 +16,7 @@
             </label>
         </div>
         <div class="editor-container">
-            <EditorContent :editor="editor" class="editor" />
+            <EditorContent v-if="editor" :editor="editor" class="editor" />
         </div>
         <button @click="saveNewTopic">
             {{ $t('socialnetwork.forum.createNewTopic') }}
@@ -89,6 +89,8 @@ export default {
         this.editor = new Editor({
             extensions: [StarterKit],
             content: '',
+            editable: true,
+            editorProps: { attributes: { class: 'pm-root' } },
         })
     },
     beforeUnmount() {
@@ -111,6 +113,7 @@ export default {
             this.inCreation = !this.inCreation
             if (this.inCreation && this.editor) {
                 this.editor.commands.setContent('')
+                this.$nextTick(() => this.editor?.commands.focus('end'))
             }
         },
         async saveNewTopic() {
@@ -167,14 +170,25 @@ export default {
 .editor-container {
     margin: 1em 0;
     border: 1px solid #ccc;
-    padding: 10px;
-    min-height: 200px;
+    padding: 0;
+    min-height: 260px;
     background-color: white;
 }
 .editor {
-    min-height: 150px;
+    min-height: 260px;
     outline: none;
+    cursor: text;
 }
+.editor :deep(.ProseMirror) {
+    min-height: 260px;
+    outline: none;
+    padding: 10px;
+    box-sizing: border-box;
+    width: 100%;
+}
+.editor :deep(.ProseMirror p) { margin: 0 0 .6rem; }
+.editor :deep(.ProseMirror p:first-child) { margin-top: 0; }
+.editor :deep(.ProseMirror-focused) { outline: 2px solid rgba(100,150,255,.35); }
 .pagination {
     display: flex;
     justify-content: center;