feature: add edit button options for gh, gh-dev and cms

docusaurus.config.ts

@@ -22,6 +22,7 @@ import path from 'path';
 import { recommendedBeforeDefaultRemarkPlugins, recommendedRehypePlugins, recommendedRemarkPlugins } from './src/siteConfig/markdownPluginConfigs';
 import { remarkPdfPluginConfig } from '@tdev/remark-pdf';
 import { excalidrawPluginConfig } from '@tdev/excalidoc';
+import { EditThisPageOption, ShowEditThisPage } from '@tdev/siteConfig/siteConfig';
 
 const siteConfig = getSiteConfig();
 
@@ -90,7 +91,10 @@ const config: Config = applyTransformers({
     GIT_COMMIT_SHA: GIT_COMMIT_SHA,
     SENTRY_DSN: process.env.SENTRY_DSN,
     GH_OAUTH_CLIENT_ID: GH_OAUTH_CLIENT_ID,
-    PERSONAL_SPACE_DOC_ROOT_ID: siteConfig.personalSpaceDocRootId || '2686fc4e-10e7-4288-bf41-e6175e489b8e'
+    PERSONAL_SPACE_DOC_ROOT_ID: siteConfig.personalSpaceDocRootId || '2686fc4e-10e7-4288-bf41-e6175e489b8e',
+    showEditThisPage: siteConfig.showEditThisPage ?? 'always' satisfies ShowEditThisPage,
+    showEditThisPageOptions: siteConfig.showEditThisPageOptions ?? ['github', 'github-dev', 'cms'] satisfies EditThisPageOption[],
+    editThisPageCmsUrl: siteConfig.editThisPageCmsUrl ?? '/cms/',
   },
   future: {
     v4: true,

src/siteConfig/siteConfig.d.ts

@@ -5,7 +5,8 @@ import type { DeepPartial } from 'utility-types';
 import type { Options as DocsPluginOptions } from '@docusaurus/plugin-content-docs';
 import type { Options as BlogPluginOptions } from '@docusaurus/plugin-content-blog';
 import type { Options as PagesPluginOptions } from '@docusaurus/plugin-content-pages';
-
+export type ShowEditThisPage = 'always' | 'never' | 'loggedIn' | 'teachers' | 'admins';
+export type EditThisPageOption = 'github' | 'github-dev' | 'cms';
 export interface SiteConfig {
     /** The title of the site. */
     title?: string;
@@ -49,6 +50,31 @@ export interface SiteConfig {
     /** The document root ID for the "personal space overlay" file system. */
     personalSpaceDocRootId?: string;
 
+    /**
+     * wheter to show the "Edit this page" links on docs and blog pages.
+     */
+    showEditThisPage?: ShowEditThisPage;
+
+    /**
+     * Options for which edit links to show. Only relevant if `showEditThisPage` is not 'never'.
+     * @default ['github', 'github-dev', 'cms']
+     * @example To only show the GitHub edit link:
+     * ```ts
+     * showEditThisPageOptions: ['github']
+     * ```
+     */
+    showEditThisPageOptions?: EditThisPageOption[];
+
+    /**
+     * the URL to the CMS to edit the page. Defaults to '/cms/', but can be
+     * redirected to a different path
+     * @default '/cms/'
+     * @example 'https://teaching-dev.gbsl.website/cms/'
+     *
+     * OrganizationName and ProjectName will be appended automatically.
+     */
+    editThisPageCmsUrl?: string;
+
     /**
      * the config of the blog plugin. It will be merged with the default options in docusaurus.config.ts
      * @example ignore the tdev docs (gallery etc.)

src/theme/EditThisPage/index.tsx

@@ -0,0 +1,103 @@
+import React, { type ReactNode } from 'react';
+import { ThemeClassNames } from '@docusaurus/theme-common';
+import Link from '@docusaurus/Link';
+import styles from './styles.module.scss';
+import siteConfig from '@generated/docusaurus.config';
+import type { Props } from '@theme/EditThisPage';
+import Icon from '@mdi/react';
+import { mdiGithub, mdiInfinity, mdiMicrosoftVisualStudioCode } from '@mdi/js';
+import clsx from 'clsx';
+import { observer } from 'mobx-react-lite';
+import { useStore } from '@tdev-hooks/useStore';
+import { useLocation } from '@docusaurus/router';
+import type { EditThisPageOption, ShowEditThisPage } from '@tdev/siteConfig/siteConfig';
+const { organizationName, projectName, customFields } = siteConfig;
+const { showEditThisPage, showEditThisPageOptions, editThisPageCmsUrl } = customFields as {
+    showEditThisPage: ShowEditThisPage;
+    showEditThisPageOptions: EditThisPageOption[];
+    editThisPageCmsUrl: string;
+};
+const DisplayBadgeFor = new Set<EditThisPageOption>(
+    showEditThisPageOptions.length === 0 ? ['github', 'github-dev', 'cms'] : showEditThisPageOptions
+);
+const GH_EDIT_URL = `https://github.com/${organizationName}/${projectName}/edit/main/`;
+const GH_DEV_EDIT_URL = `https://github.dev/${organizationName}/${projectName}/blob/main/`;
+const CMS_EDIT_URL = `${editThisPageCmsUrl}${organizationName}/${projectName}/`;
+
+const EditThisPage = observer(({ editUrl }: Props): ReactNode => {
+    const userStore = useStore('userStore');
+    const location = useLocation();
+    const search = new URLSearchParams(location.search);
+    if (!editUrl || search.has('edit')) {
+        return;
+    }
+    const isLoggedIn = !!userStore.current;
+    switch (showEditThisPage) {
+        case 'always':
+            break;
+        case 'never':
+            return null;
+        case 'loggedIn':
+            if (!isLoggedIn) {
+                return null;
+            }
+            break;
+        case 'teachers':
+            if (!userStore.current?.hasElevatedAccess) {
+                return null;
+            }
+            break;
+        case 'admins':
+            if (!userStore.current?.isAdmin) {
+                return null;
+            }
+            break;
+        default:
+            console.warn(`Unknown value for showEditThisPage: ${showEditThisPage}`);
+            return null;
+    }
+    return (
+        <div className={clsx(styles.editThisPage)}>
+            {DisplayBadgeFor.has('github') && (
+                <Link
+                    to={`${GH_EDIT_URL}${editUrl}`}
+                    className={clsx(ThemeClassNames.common.editThisPage, styles.edit)}
+                    title="Auf GitHub bearbeiten."
+                >
+                    <Icon path={mdiGithub} size={0.7} />
+                    Github
+                </Link>
+            )}
+            {DisplayBadgeFor.has('github-dev') && (
+                <Link
+                    to={`${GH_DEV_EDIT_URL}${editUrl}`}
+                    className={clsx(ThemeClassNames.common.editThisPage, styles.edit)}
+                    title="Auf GitHub.dev mit Web-VSCode bearbeiten."
+                >
+                    <Icon path={mdiMicrosoftVisualStudioCode} size={0.7} />
+                    .dev
+                </Link>
+            )}
+            {DisplayBadgeFor.has('cms') && (
+                <Link
+                    to={`${CMS_EDIT_URL}${editUrl}`}
+                    className={clsx(
+                        ThemeClassNames.common.editThisPage,
+                        styles.edit,
+                        !isLoggedIn && styles.noUser
+                    )}
+                    title={
+                        isLoggedIn
+                            ? 'Im tdev-CMS bearbeiten (Vorschau).'
+                            : 'Im tdev-CMS bearbeiten (Vorschau, Anmeldung erforderlich).'
+                    }
+                >
+                    <Icon path={mdiInfinity} size={0.7} className={clsx(styles.cms)} />
+                    cms
+                </Link>
+            )}
+        </div>
+    );
+});
+
+export default EditThisPage;

src/theme/EditThisPage/styles.module.scss

@@ -0,0 +1,16 @@
+.editThisPage {
+    display: flex;
+    gap: 1rem;
+    flex-wrap: wrap;
+    .edit {
+        display: flex;
+        align-items: center;
+        gap: 0.2rem;
+        &.noUser {
+            --ifm-link-color: var(--ifm-color-gray-600);
+        }
+        .cms {
+            transform: translateY(2px);
+        }
+    }
+}