CMS

WIP

Das CMS ist aktuell noch in der Entwicklungsphase und kann noch Fehler oder Unvollständigkeiten enthalten.

Konzept

Das CMS verwendet den 👉 MdxEditor von 👉 Petyo Ivanov und basiert auf dem 👉 Lexical-Editor von Meta aufgebaut. Die Anbindung an Github wird mit dem offiziellen 👉 Octokit vorgenommen, wobei für die Github-Anmeldung und die Zugriffstoken für Repositories die 👉 Teaching-Dev API verwendet wird.

Dies ermöglicht es, dass direkt aus dem CMS heraus Änderungen an den Markdown-Dateien vorgenommen werden können. Da Octokit die Limitation mitbringt, dass nur eine Datei auf einmal bearbeitet werden kann, lassen sich übers CMS auch Branches erstellen und Pull-Requests erstellen - und Bonus: auch Mergen 🥳.

Bilder und Assets

Bilder können direkt über einen Bild-Dialog eingefügt, hochgeladen und verändert werden. Beim Upload werden dabei Bilder stets in den Ordner images des bearbeiteten Dokuments abgelegt.

Vor dem Bild-Upload

docs
└── app-architecture
    └── cms
        └── index.mdx

Nach dem Bild-Upload

docs
└── app-architecture
    └── cms
        ├── images
        │   └── hochgeladen.jpg
        └── index.mdx

Assets (alles andere, auch Videos, PDF's etc.) werden standardmässig in den Ordner assets abgelegt.

Vor dem PDF-Upload

docs
└── app-architecture
    └── cms
        └── index.mdx

Nach dem PDF-Upload

docs
└── app-architecture
    └── cms
        ├── assets
        │   └── hochgeladen.pdf
        └── index.mdx

Gelöschte Bilder und Assets

Bilder können ohne überprüfung, ob sie noch in einem Dokument verwendet werden, gelöscht werden. Erst beim Builden der Seite wird dies bemerkt, was je nach Einstelung zu einem fehlerhaften Build führen kann.

Plugins

Für viele Erweiterungen wurden Plugins geschrieben. Die Plugins sind grundsätzlich an zwei Orten zu suchen:

1. Unter @tdev-components/Cms/MdxEditor/plugins - alles was direkt mit dem MdxEditor zu tun hat und nicht auf einem Remark-Plugin basiert.
2. Unter @tdev-plugins/remark-*/mdx-editor-plugin - alles was auf einem Remark-Plugin basiert liefert auch gleich das entsprechende MdxEditor-Plugin mit.

Todos

• Installationsanleitung schreiben
• Generischer Attribute-Editor fürs Frontmatter verwenden
• Medien-Upload (aktuell nur für Bilder umgesetzt)
• Keyboard-Events handeln, wenn innerhalb einer selbst geschriebenen Komponente
  • KBD Node: 2x Leerschlag = aus dem KBD-Node raus
  • BOX Node: 2x Leerschlag = aus dem BOX-Node raus
  • Admonitions: ArrowUp = neuer Absatz vorher, falls zuoberst und kein Absatz vorher
  • Admonitions: ArrowDown = neuer Absatz, falls zuunterst und kein Absatz nachher
• Deflist Komponente hinzufügen
• Darkmode
• Ansichts-Einstellungen speichern (Richtext / Markdown)

Installation

docusaurus.config.ts

import dynamicRouterPlugin, { Config as DynamicRouteConfig} from './src/plugins/plugin-dynamic-routes';

const config: Config = {
    presets: [
        [
            'classic',
            {
                docs: {
                    editUrl: '/cms/',
                },
                blog: {
                    editUrl: '/cms/',
                },
                pages: {
                    editUrl: '/cms/',
                },
            }
        ]
    ],
    themeConfig: {
        navbar: {
            items: [
                {
                    to: '/cms',
                    label: 'CMS',
                    position: 'left',
                }
            ]
        }
    },
    plugins: [
        [
            dynamicRouterPlugin,
            {
                routes: [
                    {
                        path: '/rooms/',
                        component: '@tdev-components/Rooms',
                    },
                    {
                        path: '/cms/',
                        component: '@tdev-components/Cms',
                    }
                ]
            } satisfies DynamicRouteConfig
        ],
    ]
};

package.json

{
    
    "dependencies": {
        "@lexical/clipboard": "^0.23.1",
        "@lexical/link": "^0.23.1",
        "@lexical/list": "^0.23.1",
        "@lexical/markdown": "^0.23.1",
        "@lexical/react": "^0.23.1",
        "@lexical/rich-text": "^0.23.1",
        "@lexical/selection": "^0.23.1",
        "@lexical/utils": "^0.23.1",
        "@mdxeditor/editor": "^3.24.0",
        "@octokit/rest": "^21.1.0",
        "browser-image-compression": "^2.0.2",
        "mdast-util-gfm-footnote": "^2.1.0",
        "mdast-util-math": "^3.0.0",
        "micromark-extension-math": "^3.1.0",
        "react-katex": "^3.0.1",
        "react-select": "^5.9.0",
    },
    "devDependencies": {
        "@types/react-dom": "^19.0.3",
        "@types/react-katex": "^3.0.4",
    },
    "peerDependencies": {
        "react-hook-form": "*"
    },
}