From 2106c132250c7ca513e6c57cffcff9e8ef92db55 Mon Sep 17 00:00:00 2001
From: Ortwin <ortwic@users.noreply.github.com>
Date: Sun, 11 Feb 2024 13:02:22 +0100
Subject: [PATCH] Features/fire cms (#45) (#46)

* replaced blogger with firestore blog (cms)

* moved post details to dialog
---
 firestore.rules                             |   5 +
 package.json                                |   1 -
 pnpm-lock.yaml                              | 175 --------------------
 src/components/dialogs/ConfirmDialog.svelte |  24 +--
 src/components/ui/PostDetails.svelte        | 112 +++++++------
 src/data/lang/de.json                       |   3 +-
 src/data/lang/en.json                       |   3 +-
 src/model/post.model.ts                     |  45 +++++
 src/routes/Blog.svelte                      |  66 +++-----
 src/service/blog.service.ts                 | 100 ++---------
 src/styles/app.scss                         |  18 ++
 11 files changed, 176 insertions(+), 376 deletions(-)
 create mode 100644 src/model/post.model.ts

diff --git a/firestore.rules b/firestore.rules
index cd3fbf1..a6436f2 100644
--- a/firestore.rules
+++ b/firestore.rules
@@ -16,5 +16,10 @@ service cloud.firestore {
       allow write: if true;
       allow read: if true;
     }
+
+    // Custom default security rules for FireCMS. Modifying this rule will the usage of the FireCMS.
+    match /{document=**} {
+        allow read, write: if request.auth.token.fireCMSUser;
+    }
   }
 }
\ No newline at end of file
diff --git a/package.json b/package.json
index 7b9dfb7..0ab50a1 100644
--- a/package.json
+++ b/package.json
@@ -18,7 +18,6 @@
     "test:unit": "vitest"
   },
   "devDependencies": {
-    "@googleapis/blogger": "^1.1.1",
     "@sveltejs/vite-plugin-svelte": "^2.4.5",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/svelte": "^3.2.2",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index da6fb5b..c89b821 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -5,9 +5,6 @@ settings:
   excludeLinksFromLockfile: false
 
 devDependencies:
-  '@googleapis/blogger':
-    specifier: ^1.1.1
-    version: 1.1.1
   '@sveltejs/vite-plugin-svelte':
     specifier: ^2.4.5
     version: 2.4.5(svelte@4.2.0)(vite@4.4.4)
@@ -2090,16 +2087,6 @@ packages:
       tslib: 2.5.0
     dev: true
 
-  /@googleapis/blogger@1.1.1:
-    resolution: {integrity: sha512-loB0Ll0l+erI3Y5Gw8g2YlOpydNuQemNbqG7NZhzEQ24BYz1OOaJShoejsfBQRVEr0SSlURIezBgINypcNOgjA==}
-    engines: {node: '>=12.0.0'}
-    dependencies:
-      googleapis-common: 6.0.4
-    transitivePeerDependencies:
-      - encoding
-      - supports-color
-    dev: true
-
   /@grpc/grpc-js@1.7.3:
     resolution: {integrity: sha512-H9l79u4kJ2PVSxUNA08HMYAnUBLj9v6KjYQ7SQ71hOZcEXhShE/y5iQCesP8+6/Ik/7i2O0a10bPquIcYfufog==}
     engines: {node: ^8.13.0 || >=10.10.0}
@@ -3064,11 +3051,6 @@ packages:
       is-shared-array-buffer: 1.0.2
     dev: true
 
-  /arrify@2.0.1:
-    resolution: {integrity: sha512-3duEwti880xqi4eAMN8AyR4a0ByT90zoYdLlevfrvU43vb0YZwZVfxOgxWrLXXXpyugL0hNZc9G6BiB5B3nUug==}
-    engines: {node: '>=8'}
-    dev: true
-
   /assertion-error@1.1.0:
     resolution: {integrity: sha512-jgsaNduz+ndvGyFt3uSuWqvy4lCnIJiovtouQN5JZHOKCS2QuhEdbcQHFhVksz2N2U9hXJo8odG7ETyWlEeuDw==}
     dev: true
@@ -3150,14 +3132,6 @@ packages:
     dev: true
     optional: true
 
-  /base64-js@1.5.1:
-    resolution: {integrity: sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==}
-    dev: true
-
-  /bignumber.js@9.1.1:
-    resolution: {integrity: sha512-pHm4LsMJ6lzgNGVfZHjMoO8sdoRhOzOH4MLmY65Jg70bpxCKu5iOHNJyfF6OyvYw7t8Fpf35RuzUyqnQsj8Vig==}
-    dev: true
-
   /binary-extensions@2.2.0:
     resolution: {integrity: sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==}
     engines: {node: '>=8'}
@@ -3204,10 +3178,6 @@ packages:
     resolution: {integrity: sha512-VO9Ht/+p3SN7SKWqcrgEzjGbRSJYTx+Q1pTQC0wrWqHx0vpJraQ6GtHx8tvcg1rlK1byhU5gccxgOgj7B0TDkQ==}
     dev: true
 
-  /buffer-equal-constant-time@1.0.1:
-    resolution: {integrity: sha512-zRpUiDwd/xk6ADqPMATG8vc9VPrkck7T07OIx0gnjmJAnHnTVXNQG3vfvWNuiZIkwu9KrKdA1iJKfsfTVxE6NA==}
-    dev: true
-
   /buffer-from@1.1.2:
     resolution: {integrity: sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==}
     dev: true
@@ -3657,12 +3627,6 @@ packages:
     dev: true
     optional: true
 
-  /ecdsa-sig-formatter@1.0.11:
-    resolution: {integrity: sha512-nagl3RYrbNv6kQkeJIpt6NJZy8twLB/2vtz6yN9Z4vRKHN4/QZJIEbqohALSgwKdnksuY3k5Addp5lg8sVoVcQ==}
-    dependencies:
-      safe-buffer: 5.2.1
-    dev: true
-
   /ejs@3.1.9:
     resolution: {integrity: sha512-rC+QVNMJWv+MtPgkt0y+0rVEIdbtxVADApW9JXrUVlzHetgcyczP/E7DJmWJ4fJCZF2cPcBk0laWO9ZHMG3DmQ==}
     engines: {node: '>=0.10.0'}
@@ -4236,10 +4200,6 @@ packages:
       type: 2.7.2
     dev: true
 
-  /extend@3.0.2:
-    resolution: {integrity: sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==}
-    dev: true
-
   /fast-deep-equal@3.1.3:
     resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==}
     dev: true
@@ -4263,10 +4223,6 @@ packages:
     resolution: {integrity: sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==}
     dev: true
 
-  /fast-text-encoding@1.0.6:
-    resolution: {integrity: sha512-VhXlQgj9ioXCqGstD37E/HBeqEGV/qOD/kmbVG8h5xKBYvM1L3lR1Zn4555cQ8GkYbJa8aJSipLPndE1k6zK2w==}
-    dev: true
-
   /fastq@1.15.0:
     resolution: {integrity: sha512-wBrocU2LCXXa+lWBt8RoIRD89Fi8OdABODa/kEnyeyjS5aZO5/GNvI5sEINADqP/h8M29UHTHUb53sUu5Ihqdw==}
     dependencies:
@@ -4430,30 +4386,6 @@ packages:
     resolution: {integrity: sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==}
     dev: true
 
-  /gaxios@5.1.3:
-    resolution: {integrity: sha512-95hVgBRgEIRQQQHIbnxBXeHbW4TqFk4ZDJW7wmVtvYar72FdhRIo1UGOLS2eRAKCPEdPBWu+M7+A33D9CdX9rA==}
-    engines: {node: '>=12'}
-    dependencies:
-      extend: 3.0.2
-      https-proxy-agent: 5.0.1
-      is-stream: 2.0.1
-      node-fetch: 2.7.0
-    transitivePeerDependencies:
-      - encoding
-      - supports-color
-    dev: true
-
-  /gcp-metadata@5.3.0:
-    resolution: {integrity: sha512-FNTkdNEnBdlqF2oatizolQqNANMrcqJt6AAYt99B3y1aLLC8Hc5IOBb+ZnnzllodEEf6xMBp6wRcBbc16fa65w==}
-    engines: {node: '>=12'}
-    dependencies:
-      gaxios: 5.1.3
-      json-bigint: 1.0.0
-    transitivePeerDependencies:
-      - encoding
-      - supports-color
-    dev: true
-
   /gensync@1.0.0-beta.2:
     resolution: {integrity: sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==}
     engines: {node: '>=6.9.0'}
@@ -4562,47 +4494,6 @@ packages:
     resolution: {integrity: sha512-uHJgbwAMwNFf5mLst7IWLNg14x1CkeqglJb/K3doi4dw6q2IvAAmM/Y81kevy83wP+Sst+nutFTYOGg3d1lsxg==}
     dev: true
 
-  /google-auth-library@8.9.0:
-    resolution: {integrity: sha512-f7aQCJODJFmYWN6PeNKzgvy9LI2tYmXnzpNDHEjG5sDNPgGb2FXQyTBnXeSH+PAtpKESFD+LmHw3Ox3mN7e1Fg==}
-    engines: {node: '>=12'}
-    dependencies:
-      arrify: 2.0.1
-      base64-js: 1.5.1
-      ecdsa-sig-formatter: 1.0.11
-      fast-text-encoding: 1.0.6
-      gaxios: 5.1.3
-      gcp-metadata: 5.3.0
-      gtoken: 6.1.2
-      jws: 4.0.0
-      lru-cache: 6.0.0
-    transitivePeerDependencies:
-      - encoding
-      - supports-color
-    dev: true
-
-  /google-p12-pem@4.0.1:
-    resolution: {integrity: sha512-WPkN4yGtz05WZ5EhtlxNDWPhC4JIic6G8ePitwUWy4l+XPVYec+a0j0Ts47PDtW59y3RwAhUd9/h9ZZ63px6RQ==}
-    engines: {node: '>=12.0.0'}
-    hasBin: true
-    dependencies:
-      node-forge: 1.3.1
-    dev: true
-
-  /googleapis-common@6.0.4:
-    resolution: {integrity: sha512-m4ErxGE8unR1z0VajT6AYk3s6a9gIMM6EkDZfkPnES8joeOlEtFEJeF8IyZkb0tjPXkktUfYrE4b3Li1DNyOwA==}
-    engines: {node: '>=12.0.0'}
-    dependencies:
-      extend: 3.0.2
-      gaxios: 5.1.3
-      google-auth-library: 8.9.0
-      qs: 6.11.2
-      url-template: 2.0.8
-      uuid: 9.0.0
-    transitivePeerDependencies:
-      - encoding
-      - supports-color
-    dev: true
-
   /gopd@1.0.1:
     resolution: {integrity: sha512-d65bNlIadxvpb/A2abVdlqKqV563juRnZ1Wtk6s1sIR8uNsXR70xqIzVqxVf1eTqDunwT2MkczEeaezCKTZhwA==}
     dependencies:
@@ -4617,18 +4508,6 @@ packages:
     resolution: {integrity: sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==}
     dev: true
 
-  /gtoken@6.1.2:
-    resolution: {integrity: sha512-4ccGpzz7YAr7lxrT2neugmXQ3hP9ho2gcaityLVkiUecAiwiy60Ii8gRbZeOsXV19fYaRjgBSshs8kXw+NKCPQ==}
-    engines: {node: '>=12.0.0'}
-    dependencies:
-      gaxios: 5.1.3
-      google-p12-pem: 4.0.1
-      jws: 4.0.0
-    transitivePeerDependencies:
-      - encoding
-      - supports-color
-    dev: true
-
   /has-bigints@1.0.2:
     resolution: {integrity: sha512-tSvCKtBr9lkF0Ex0aQiP9N+OpV4zi2r/Nee5VkRDbaqv35RLYMzbwQfFSZZH0kR+Rd6302UJZ2p/bJCEoR3VoQ==}
     dev: true
@@ -5193,12 +5072,6 @@ packages:
     hasBin: true
     dev: true
 
-  /json-bigint@1.0.0:
-    resolution: {integrity: sha512-SiPv/8VpZuWbvLSMtTDU8hEfrZWg/mH/nV/b4o0CYbSxu1UIQPLdwKOCIyLQX+VIPO5vrLX3i8qtqFyhdPSUSQ==}
-    dependencies:
-      bignumber.js: 9.1.1
-    dev: true
-
   /json-schema-traverse@0.4.1:
     resolution: {integrity: sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==}
     dev: true
@@ -5267,21 +5140,6 @@ packages:
       html2canvas: 1.4.1
     dev: true
 
-  /jwa@2.0.0:
-    resolution: {integrity: sha512-jrZ2Qx916EA+fq9cEAeCROWPTfCwi1IVHqT2tapuqLEVVDKFDENFw1oL+MwrTvH6msKxsd1YTDVw6uKEcsrLEA==}
-    dependencies:
-      buffer-equal-constant-time: 1.0.1
-      ecdsa-sig-formatter: 1.0.11
-      safe-buffer: 5.2.1
-    dev: true
-
-  /jws@4.0.0:
-    resolution: {integrity: sha512-KDncfTmOZoOMTFG4mBlG0qUIOlc03fmzH+ru6RgYVZhPkyiy/92Owlt/8UEN+a4TXR1FQetfIpJE8ApdvdVxTg==}
-    dependencies:
-      jwa: 2.0.0
-      safe-buffer: 5.2.1
-    dev: true
-
   /kleur@4.1.5:
     resolution: {integrity: sha512-o+NO+8WrRiQEE4/7nwRJhN1HWpVmJm511pBHUxPLtp0BUISzlBplORYSmTclCnJvQq2tKu/sgl3xVpkc7ZWuQQ==}
     engines: {node: '>=6'}
@@ -5568,23 +5426,6 @@ packages:
       whatwg-url: 5.0.0
     dev: true
 
-  /node-fetch@2.7.0:
-    resolution: {integrity: sha512-c4FRfUm/dbcWZ7U+1Wq0AwCyFL+3nt2bEw05wfxSz+DWpWsitgmSgYmy2dQdWyKC1694ELPqMs/YzUSNozLt8A==}
-    engines: {node: 4.x || >=6.0.0}
-    peerDependencies:
-      encoding: ^0.1.0
-    peerDependenciesMeta:
-      encoding:
-        optional: true
-    dependencies:
-      whatwg-url: 5.0.0
-    dev: true
-
-  /node-forge@1.3.1:
-    resolution: {integrity: sha512-dPEtOeMvF9VMcYV/1Wb8CPoVAXtp6MKMlcbAt4ddqmGqUJ6fQZFXkNZNkNlfevtNkGtaSoXf/vNNNSvgrdXwtA==}
-    engines: {node: '>= 6.13.0'}
-    dev: true
-
   /node-releases@2.0.14:
     resolution: {integrity: sha512-y10wOWt8yZpqXmOgRo77WaHEmhYQYGNA6y421PKsKYWEK8aW+cqAphborZDhqfyKrbZEN92CN1X2KbafY2s7Yw==}
     dev: true
@@ -5926,13 +5767,6 @@ packages:
     engines: {node: '>=6'}
     dev: true
 
-  /qs@6.11.2:
-    resolution: {integrity: sha512-tDNIz22aBzCDxLtVH++VnTfzxlfeK5CbqohpSqpJgj1Wg/cQbStNAz3NuqCs5vV+pjBsK4x4pN9HlVh7rcYRiA==}
-    engines: {node: '>=0.6'}
-    dependencies:
-      side-channel: 1.0.4
-    dev: true
-
   /querystringify@2.2.0:
     resolution: {integrity: sha512-FIqgj2EUvTa7R50u0rGsyTftzjYmv/a3hO345bZNrqabNqjtgiDMgmo4mkUjd+nzU5oF3dClKqFIPUKybUyqoQ==}
     dev: true
@@ -7018,10 +6852,6 @@ packages:
       requires-port: 1.0.0
     dev: true
 
-  /url-template@2.0.8:
-    resolution: {integrity: sha512-XdVKMF4SJ0nP/O7XIPB0JwAEuT9lDIYnNsK8yGVe43y0AWoKeJNdv3ZNWh7ksJ6KqQFjOO6ox/VEitLnaVNufw==}
-    dev: true
-
   /util-deprecate@1.0.2:
     resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
     dev: true
@@ -7034,11 +6864,6 @@ packages:
     dev: true
     optional: true
 
-  /uuid@9.0.0:
-    resolution: {integrity: sha512-MXcSTerfPa4uqyzStbRoTgt5XIe3x5+42+q1sDuy3R5MDk66URdLMOZe5aPX/SQd+kuYAh0FdP/pO28IkQyTeg==}
-    hasBin: true
-    dev: true
-
   /v8-to-istanbul@9.1.0:
     resolution: {integrity: sha512-6z3GW9x8G1gd+JIIgQQQxXuiJtCXeAjp6RaPEPLv62mH3iPHPxV6W3robxtCzNErRo6ZwTmzWhsbNvjyEBKzKA==}
     engines: {node: '>=10.12.0'}
diff --git a/src/components/dialogs/ConfirmDialog.svelte b/src/components/dialogs/ConfirmDialog.svelte
index b505fcc..e62f09d 100644
--- a/src/components/dialogs/ConfirmDialog.svelte
+++ b/src/components/dialogs/ConfirmDialog.svelte
@@ -20,16 +20,18 @@
         <slot name='title'></slot> {title}
     </Titlebar>
     <slot></slot>
-    <div class="row">
-        <button data-target={target} 
-            on:click|stopPropagation={() => dispatch('closed', true)}>
-            { $t('dialog.confirm') }
-        </button>
-        <button data-target={target} 
-            on:click|stopPropagation={() => dispatch('closed', false)}>
-            { $t('dialog.decline') }
-        </button>
-    </div>
+    <slot name='footer'>
+        <div class="row">
+            <button data-target={target} 
+                on:click|stopPropagation={() => dispatch('closed', true)}>
+                { $t('dialog.confirm') }
+            </button>
+            <button data-target={target} 
+                on:click|stopPropagation={() => dispatch('closed', false)}>
+                { $t('dialog.decline') }
+            </button>
+        </div>
+    </slot>
 </div>
 {#if size == 'auto'}
 <div class='backdrop'></div>
@@ -46,13 +48,13 @@
     width: auto;
     height: auto;
     z-index: 121;
-    background-color: var(--primback);
 }
 
 div.dialog {
     min-width: 22.5em;
     max-width: 100vw;
     max-height: 100vh;
+    background-color: white;
 }
 
 div.full {
diff --git a/src/components/ui/PostDetails.svelte b/src/components/ui/PostDetails.svelte
index 9b3e144..58caf6a 100644
--- a/src/components/ui/PostDetails.svelte
+++ b/src/components/ui/PostDetails.svelte
@@ -1,74 +1,73 @@
 <script lang="ts">
     import { t } from 'svelte-i18n';
-    import { slide } from 'svelte/transition';
+    import ConfirmDialog from '../dialogs/ConfirmDialog.svelte';
     import { logPageView } from '../../store/notification.store';
+    import type { Content } from '../../model/post.model';
+    import { marked } from 'marked';
     
     export let title: string;
-    export let html: string;
-    export let collapsed = true;
+    export let excerpt: string;
+    export let content: Content[] = [];
+    export let visible = false;
     export let showMore = true;
 
-    function toggle() {
-        collapsed = !collapsed;
-        if (!collapsed) {            
-            logPageView({ page: 'blog', title });
-        }
-    }
-
-    function generateSnippet(html: string, minWords = 3, maxWords = 12): string {
-        const getWords = (s) => s.split(/[\s\n]/).filter(v => v);
+    const options = { mangle: false, headerIds: false };
 
-        const text = html.replace(/<[^>]+>/g, ' ');
-        if (text) {
-            const sentences = text.match(/(.+[\.\?\!\n])\s/g)
-                ?.filter(s => s)
-                ?.map(s => `${s?.trim()}`)
-            if (sentences?.length) {
-                // console.log(sentences)
-                const words = getWords(sentences[0]);
-                if (words.length < minWords) {
-                    words.push(...getWords(sentences[1]));
-                }
-
-                if (words.length > maxWords) {
-                    return words.splice(0, maxWords).join(' ') + '...';
-                }
-
-                return words.join(' ') + '...';
-            }
-        }
-        return '';
+    function show() {
+        visible = true;
+        logPageView({ page: 'blog', title });
     }
 
-    function parseHtml(html: string) {
-        const doc = new DOMParser().parseFromString(html, 'text/html');
-        const content = [];
-        for(const element of doc.querySelectorAll('*')) {
-            const text = (element as HTMLElement).innerText;
-            if (text) {
-                content.push(text);
-            }
-        }
-        return content.filter(v => v);
+    function hide() {
+        visible = false;
     }
 </script>
 
 <h2>{title}</h2>
 
-{#if collapsed}
-<summary in:slide={{ duration: 200 }} out:slide={{ duration: 200 }}>
-    <span class="content">{@html generateSnippet(html)}</span>
+<summary>
+    <span class="content">{excerpt}</span>
     {#if showMore}
-        <button class="more" on:click|preventDefault={toggle}>{ $t('blog.more') }</button>
+        <button class="more" on:click|preventDefault={show}>{ $t('blog.more') }</button>
     {/if}
 </summary>
-{:else}
-<div in:slide={{ duration: 200 }} out:slide={{ duration: 200 }} >
-    <span class="content">{@html html}</span>
-    <div>
-        <button class="more" on:click|preventDefault={toggle}>{ $t('blog.less') }</button>
-    </div> 
-</div>
+
+{#if visible}
+<ConfirmDialog size="full" on:closed={hide}>
+    <svelte:fragment slot="title">
+        <i class="bx bx-detail"></i> {title} 
+    </svelte:fragment>
+
+    <section>
+    {#each content as entry}
+        {#if entry.type === 'youtube'}
+        <iframe loading="lazy" src="https://www.youtube.com/embed/{entry.value.id}" title={entry.value.title ?? ''}
+            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
+            allowfullscreen width="560" height="315" frameborder="0"></iframe>
+            <br />
+        {:else if entry.type === 'quote'}
+        <blockquote>
+            {entry.value.text}
+            <cite>{entry.value.cite}</cite>
+        </blockquote>
+        {:else if entry.type === 'images'}
+            {#each entry.value as src}
+                <img {src} alt={src.split('/')?.at(-1)}/>
+            {/each}
+        {:else}
+        <p class="content">{@html marked(`${entry.value}`, options)}</p>
+        {/if}
+    {/each}
+    </section>
+
+    <svelte:fragment slot="footer">
+        <div class="row">
+            <button on:click|preventDefault={hide}>
+                { $t('blog.back') }
+            </button>
+        </div>
+    </svelte:fragment>
+</ConfirmDialog>
 {/if}
 
 <style lang="scss">
@@ -77,6 +76,13 @@
         transition: all .2s ease-in-out;
     }
 
+    section {
+        padding: 1em 5%;
+        height: 100%;
+        
+        overflow-y: auto; 
+    }
+
     button.more {
         padding: 0;
         border: 0;
diff --git a/src/data/lang/de.json b/src/data/lang/de.json
index a396fae..70ffc98 100644
--- a/src/data/lang/de.json
+++ b/src/data/lang/de.json
@@ -143,7 +143,8 @@
   "blog": {
     "title": "Alles über das Musizieren",
     "less": "...weniger",
-    "more": "mehr..."
+    "more": "mehr...",
+    "back": "Zurück"
   },
   "notfound": {
     "title": "Nicht gefunden",
diff --git a/src/data/lang/en.json b/src/data/lang/en.json
index e5c1921..4a8500a 100644
--- a/src/data/lang/en.json
+++ b/src/data/lang/en.json
@@ -143,7 +143,8 @@
   "blog": {
     "title": "Everthing about making music",
     "more": "more...",
-    "less": "...lesser"
+    "less": "...lesser",
+    "back": "Back"
   },
   "notfound": {
     "title": "Not found",
diff --git a/src/model/post.model.ts b/src/model/post.model.ts
new file mode 100644
index 0000000..73fde31
--- /dev/null
+++ b/src/model/post.model.ts
@@ -0,0 +1,45 @@
+export interface Post {
+    id: string;
+    title: string;
+    excerpt: string;
+    images: PostImage[];
+    content: Content[];
+    tags: string[];
+    status: 'published' | 'draft';
+    publish_date: Date;
+    created_on: Date;
+    reviewed: boolean;
+}
+
+interface PostImage {
+    type: 'file' | 'url';
+    value: string;
+}
+
+export type Content = MarkupContent | QuoteContent | YouTubeContent | ImagesContent;
+
+interface MarkupContent {
+    type: 'text';
+    value: string;
+}
+
+interface QuoteContent {
+    type: 'quote';
+    value: {
+        text: string;
+        cite: string;
+    };
+}
+
+interface YouTubeContent {
+    type: 'youtube';
+    value: {
+        id: string;
+        title: string;
+    };
+}
+
+interface ImagesContent {
+    type: 'images';
+    value: string[];
+}
\ No newline at end of file
diff --git a/src/routes/Blog.svelte b/src/routes/Blog.svelte
index 3c65b22..7423e9d 100644
--- a/src/routes/Blog.svelte
+++ b/src/routes/Blog.svelte
@@ -1,72 +1,44 @@
 <script lang="ts">
     import { t } from "svelte-i18n";
-    import { derived, type Readable } from "svelte/store";
-    import type { blogger_v3 as B } from '@googleapis/blogger';
+    import { derived } from "svelte/store";
     import Image from "../components/ui/elements/Image.svelte";
     import PostDetails from "../components/ui/PostDetails.svelte";
-    import BlogService, { createBlogService } from "../service/blog.service";
+    import { getBlogPosts } from "../service/blog.service";
     import { logPageView } from "../store/notification.store";
     import { orientation } from "../store/media.store";
   
     export let params: { label?: string } = {};
 
     const width = derived(orientation, (o) => o === 'landscape' ? 120 : 80);
-    let service: BlogService;
-    let store: Readable<B.Schema$Post[]>;
-
-    async function loadBlogPosts() {
-        service = await createBlogService(true);
-        store = await service.loadBlogPosts(params.label);
-        if (params.label) {
-            logPageView({ page: 'blog', filter: params.label });
-        }
-    }
-
-    function scrollHandler({ target }): void {
-        const threshold = target.offsetHeight * .25;
-        if (target.offsetHeight + target.scrollTop >= target.scrollHeight - threshold) {
-            service.loadBlogPosts();
-        }
+    const posts = getBlogPosts(params.label);
+    if (params.label) {
+        logPageView({ page: 'blog', filter: params.label });
     }
-
 </script>
   
 <svelte:head>
 <title>{ $t('menu.howto') } blog | Song Repertory</title>
 </svelte:head>
 
-<main on:scroll={scrollHandler} class="content">
+<main class="content">
     <div class="titlebar">
         <i class="bx bx-bulb"></i>&nbsp; { $t('blog.title') }
     </div>
-    {#await loadBlogPosts()}
-        <div class="post">
-            <p>{ $t('start.loading') }</p>
+    {#each $posts as post}
+    <div class="post">
+        {#if post.images?.length}
+        <div class="thumbnail">
+            <Image src={post.images[0]?.value} width={$width} height={$width} />
         </div>
-    {:then}
-        {#each $store as post}
-        <div class="post">
-            {#if post.images?.length}
-            <div class="thumbnail">
-                <Image src={post.images[0].url} width={$width} height={$width} />
-            </div>
-            {/if}
-            <PostDetails title={post.title} html={post.content}/>
-            <div>   
-                {#each post.labels as label}
-                <a href="#/blog/{label}" class="label">{label}</a>
-                {/each}
-            </div>
+        {/if}
+        <PostDetails title={post.title} excerpt={post.excerpt} content={post.content}/>
+        <div>   
+            {#each post.tags as label}
+            <a href="#/blog/{label}" class="label">{label}</a>
+            {/each}
         </div>
-        {/each}
-    {:catch { code, message }}
-        <div class="post">
-            <div class="thumbnail">
-                <Image src="./error.jpg" width={$width} height={$width} />
-            </div>
-            <PostDetails title={code} html={message} showMore={false} />
-        </div>
-    {/await}
+    </div>
+    {/each}
 </main>
   
 <style lang="scss">
diff --git a/src/service/blog.service.ts b/src/service/blog.service.ts
index 44a6606..42e9e61 100644
--- a/src/service/blog.service.ts
+++ b/src/service/blog.service.ts
@@ -1,92 +1,18 @@
-import type { blogger_v3 as B } from '@googleapis/blogger';
-import { writable, type Readable } from 'svelte/store';
+import type { Observable } from 'rxjs';
+import { QueryConstraint, orderBy, where } from 'firebase/firestore';
 import FirestoreService from './firestore.service';
-import { lang } from './i18n';
-import { showError } from '../store/notification.store';
+import type { Post } from '../model/post.model';
 
-const blogUrl = 'https://www.googleapis.com/blogger/v3/blogs';
-const empty = (item: unknown) => !item;
-const cmsKey = `a68cac5f81d3-${lang}`;
-const store = new FirestoreService('settings');
+const store = new FirestoreService('blog');
 
-interface BlogSettings {
-    blogId: string;
-    apiKey: string;
-    labels?: string[];
-}
-
-export const getBloggerSettings = async () => {
-    const [ blogId, apiKey ] = sessionStorage.getItem(cmsKey)?.split('/') ?? [];    
-    if (!apiKey) {
-        const result = await store.getDocument<BlogSettings>('blog');
-        if (result) {
-            const value = [result.blogId, result.apiKey].join('/');
-            sessionStorage.setItem(cmsKey, value);
-            return result;
-        }
-    }
-
-    return { blogId, apiKey };
-};
-
-const fetchFromBlogger = <T>({ blogId, apiKey }, path: string): Promise<T> => {
-    const options: RequestInit = {
-        method: 'GET',
-        credentials: 'omit',
-        referrerPolicy: 'strict-origin-when-cross-origin',
-        headers: {
-            Accept: 'application/json',
-            'x-goog-api-key': apiKey
-        }
-    };
-    return fetch(`${blogUrl}/${blogId}/${path}`, options)
-        .then(result => result.json())
-        .catch(error => showError(error));
-};
-
-export const createBlogService = async (fetchBodies = false): Promise<BlogService> => {
-    return new BlogService(await getBloggerSettings(), fetchBodies);
-};
-
-export default class BlogService { 
-    public readonly posts = writable<B.Schema$Post[]>([]);
-    private nextPageToken: string;
-    private loading = false;
-    private loadingComplete = false;
-
-    constructor(private settings?: BlogSettings, private fetchBodies = false) {
-    }
-
-    async loadBlogPosts(...labels: string[]): Promise<Readable<B.Schema$Post[]>> {
-        if (!this.loading && !this.loadingComplete) {
-            this.loading = true;
-            let path = `posts?fetchBodies=${this.fetchBodies}&fetchImages=true`;
-            
-            if (this.nextPageToken) {
-                path += `&pageToken=${this.nextPageToken}`;
-            }
-
-            if (!labels.some(empty)) {
-                path += `&labels=${labels.join(',')}`;
-            }
-
-            try {
-                const data = await fetchFromBlogger<B.Schema$PostList>(this.settings, path);
-                if (data.items) {
-                    this.posts.update(posts => [...posts, ...data.items]);
-                    this.nextPageToken = data.nextPageToken;
-                } else if (data['error']) {
-                    throw data['error'];
-                }
-                this.loadingComplete = !data.nextPageToken;
-            } finally {
-                this.loading = false;
-            }
-        }
-        return this.posts;
-    }
-
-    async getBlogPost(id: string): Promise<B.Schema$Post> {
-        return await fetchFromBlogger<B.Schema$Post>(this.settings, `posts/${id}`);
+export function getBlogPosts(tag?: string): Observable<Post[]> {
+    const constraints: QueryConstraint[] = [
+        where('status', '==', 'published'),
+        orderBy('publish_date', 'desc')
+    ];
+    if (tag) {
+        constraints.push(where('tags', 'array-contains', tag));
     }
+    
+    return store.getDocuments<Post>(...constraints);
 }
\ No newline at end of file
diff --git a/src/styles/app.scss b/src/styles/app.scss
index 90d6d80..84f66a3 100644
--- a/src/styles/app.scss
+++ b/src/styles/app.scss
@@ -234,6 +234,24 @@ a.label:hover {
     background-color: white;
 }
 
+blockquote {
+  background-color: var(--primback);
+  font-size: 14pt;
+  margin: 30px 0;
+  padding: 30px 30px 30px 40px;
+  position: relative;
+  font-style: normal;
+  border-left: 3px solid var(--primary);
+
+  cite {
+      color: gray;
+      text-transform: uppercase;
+      font-size: 10pt;
+      font-style: normal;
+      letter-spacing: 1px;
+  }
+}
+
 div.autocomplete {
   .input-container {
     width: 16em;