Skip to content

Commit ff7f1d5

Browse files
lebalzlebalz
authored
Merge pull request #245 from GBSL-Informatik/feature/customize-edit-buttons
feature: add edit button options for gh, gh-dev and cms
2 parents 0ea4aca + 42f6c77 commit ff7f1d5

File tree

4 files changed

+151
-2
lines changed

4 files changed

+151
-2
lines changed

‎docusaurus.config.ts‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ import path from 'path';
2222
import { recommendedBeforeDefaultRemarkPlugins, recommendedRehypePlugins, recommendedRemarkPlugins } from './src/siteConfig/markdownPluginConfigs';
2323
import { remarkPdfPluginConfig } from '@tdev/remark-pdf';
2424
import { excalidrawPluginConfig } from '@tdev/excalidoc';
25+
import { EditThisPageOption, ShowEditThisPage } from '@tdev/siteConfig/siteConfig';
2526

2627
const siteConfig = getSiteConfig();
2728

@@ -90,7 +91,10 @@ const config: Config = applyTransformers({
9091
GIT_COMMIT_SHA: GIT_COMMIT_SHA,
9192
SENTRY_DSN: process.env.SENTRY_DSN,
9293
GH_OAUTH_CLIENT_ID: GH_OAUTH_CLIENT_ID,
93-
PERSONAL_SPACE_DOC_ROOT_ID: siteConfig.personalSpaceDocRootId || '2686fc4e-10e7-4288-bf41-e6175e489b8e'
94+
PERSONAL_SPACE_DOC_ROOT_ID: siteConfig.personalSpaceDocRootId || '2686fc4e-10e7-4288-bf41-e6175e489b8e',
95+
showEditThisPage: siteConfig.showEditThisPage ?? 'always' satisfies ShowEditThisPage,
96+
showEditThisPageOptions: siteConfig.showEditThisPageOptions ?? ['github', 'github-dev', 'cms'] satisfies EditThisPageOption[],
97+
editThisPageCmsUrl: siteConfig.editThisPageCmsUrl ?? '/cms/',
9498
},
9599
future: {
96100
v4: true,

‎src/siteConfig/siteConfig.d.ts‎

Lines changed: 27 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,8 @@ import type { DeepPartial } from 'utility-types';
55
import type { Options as DocsPluginOptions } from '@docusaurus/plugin-content-docs';
66
import type { Options as BlogPluginOptions } from '@docusaurus/plugin-content-blog';
77
import type { Options as PagesPluginOptions } from '@docusaurus/plugin-content-pages';
8-
8+
export type ShowEditThisPage = 'always' | 'never' | 'loggedIn' | 'teachers' | 'admins';
9+
export type EditThisPageOption = 'github' | 'github-dev' | 'cms';
910
export interface SiteConfig {
1011
/** The title of the site. */
1112
title?: string;
@@ -49,6 +50,31 @@ export interface SiteConfig {
4950
/** The document root ID for the "personal space overlay" file system. */
5051
personalSpaceDocRootId?: string;
5152

53+
/**
54+
* wheter to show the "Edit this page" links on docs and blog pages.
55+
*/
56+
showEditThisPage?: ShowEditThisPage;
57+
58+
/**
59+
* Options for which edit links to show. Only relevant if `showEditThisPage` is not 'never'.
60+
* @default ['github', 'github-dev', 'cms']
61+
* @example To only show the GitHub edit link:
62+
* ```ts
63+
* showEditThisPageOptions: ['github']
64+
* ```
65+
*/
66+
showEditThisPageOptions?: EditThisPageOption[];
67+
68+
/**
69+
* the URL to the CMS to edit the page. Defaults to '/cms/', but can be
70+
* redirected to a different path
71+
* @default '/cms/'
72+
* @example 'https://teaching-dev.gbsl.website/cms/'
73+
*
74+
* OrganizationName and ProjectName will be appended automatically.
75+
*/
76+
editThisPageCmsUrl?: string;
77+
5278
/**
5379
* the config of the blog plugin. It will be merged with the default options in docusaurus.config.ts
5480
* @example ignore the tdev docs (gallery etc.)

‎src/theme/EditThisPage/index.tsx‎

Lines changed: 103 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
1+
import React, { type ReactNode } from 'react';
2+
import { ThemeClassNames } from '@docusaurus/theme-common';
3+
import Link from '@docusaurus/Link';
4+
import styles from './styles.module.scss';
5+
import siteConfig from '@generated/docusaurus.config';
6+
import type { Props } from '@theme/EditThisPage';
7+
import Icon from '@mdi/react';
8+
import { mdiGithub, mdiInfinity, mdiMicrosoftVisualStudioCode } from '@mdi/js';
9+
import clsx from 'clsx';
10+
import { observer } from 'mobx-react-lite';
11+
import { useStore } from '@tdev-hooks/useStore';
12+
import { useLocation } from '@docusaurus/router';
13+
import type { EditThisPageOption, ShowEditThisPage } from '@tdev/siteConfig/siteConfig';
14+
const { organizationName, projectName, customFields } = siteConfig;
15+
const { showEditThisPage, showEditThisPageOptions, editThisPageCmsUrl } = customFields as {
16+
showEditThisPage: ShowEditThisPage;
17+
showEditThisPageOptions: EditThisPageOption[];
18+
editThisPageCmsUrl: string;
19+
};
20+
const DisplayBadgeFor = new Set<EditThisPageOption>(
21+
showEditThisPageOptions.length === 0 ? ['github', 'github-dev', 'cms'] : showEditThisPageOptions
22+
);
23+
const GH_EDIT_URL = `https://github.com/${organizationName}/${projectName}/edit/main/`;
24+
const GH_DEV_EDIT_URL = `https://github.dev/${organizationName}/${projectName}/blob/main/`;
25+
const CMS_EDIT_URL = `${editThisPageCmsUrl}${organizationName}/${projectName}/`;
26+
27+
const EditThisPage = observer(({ editUrl }: Props): ReactNode => {
28+
const userStore = useStore('userStore');
29+
const location = useLocation();
30+
const search = new URLSearchParams(location.search);
31+
if (!editUrl || search.has('edit')) {
32+
return;
33+
}
34+
const isLoggedIn = !!userStore.current;
35+
switch (showEditThisPage) {
36+
case 'always':
37+
break;
38+
case 'never':
39+
return null;
40+
case 'loggedIn':
41+
if (!isLoggedIn) {
42+
return null;
43+
}
44+
break;
45+
case 'teachers':
46+
if (!userStore.current?.hasElevatedAccess) {
47+
return null;
48+
}
49+
break;
50+
case 'admins':
51+
if (!userStore.current?.isAdmin) {
52+
return null;
53+
}
54+
break;
55+
default:
56+
console.warn(`Unknown value for showEditThisPage: ${showEditThisPage}`);
57+
return null;
58+
}
59+
return (
60+
<div className={clsx(styles.editThisPage)}>
61+
{DisplayBadgeFor.has('github') && (
62+
<Link
63+
to={`${GH_EDIT_URL}${editUrl}`}
64+
className={clsx(ThemeClassNames.common.editThisPage, styles.edit)}
65+
title="Auf GitHub bearbeiten."
66+
>
67+
<Icon path={mdiGithub} size={0.7} />
68+
Github
69+
</Link>
70+
)}
71+
{DisplayBadgeFor.has('github-dev') && (
72+
<Link
73+
to={`${GH_DEV_EDIT_URL}${editUrl}`}
74+
className={clsx(ThemeClassNames.common.editThisPage, styles.edit)}
75+
title="Auf GitHub.dev mit Web-VSCode bearbeiten."
76+
>
77+
<Icon path={mdiMicrosoftVisualStudioCode} size={0.7} />
78+
.dev
79+
</Link>
80+
)}
81+
{DisplayBadgeFor.has('cms') && (
82+
<Link
83+
to={`${CMS_EDIT_URL}${editUrl}`}
84+
className={clsx(
85+
ThemeClassNames.common.editThisPage,
86+
styles.edit,
87+
!isLoggedIn && styles.noUser
88+
)}
89+
title={
90+
isLoggedIn
91+
? 'Im tdev-CMS bearbeiten (Vorschau).'
92+
: 'Im tdev-CMS bearbeiten (Vorschau, Anmeldung erforderlich).'
93+
}
94+
>
95+
<Icon path={mdiInfinity} size={0.7} className={clsx(styles.cms)} />
96+
cms
97+
</Link>
98+
)}
99+
</div>
100+
);
101+
});
102+
103+
export default EditThisPage;

‎src/theme/EditThisPage/styles.module.scss‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
.editThisPage {
2+
display: flex;
3+
gap: 1rem;
4+
flex-wrap: wrap;
5+
.edit {
6+
display: flex;
7+
align-items: center;
8+
gap: 0.2rem;
9+
&.noUser {
10+
--ifm-link-color: var(--ifm-color-gray-600);
11+
}
12+
.cms {
13+
transform: translateY(2px);
14+
}
15+
}
16+
}

0 commit comments

Comments
 (0)