From 905d18b50f1313384efb836f51a8b03a0fa35ab3 Mon Sep 17 00:00:00 2001 From: Marley Date: Thu, 9 May 2024 12:46:46 +0100 Subject: [PATCH 1/3] Fixed typo in 05-extension-overrides.md Signed-off-by: Marley --- docs/frontend-system/architecture/05-extension-overrides.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/frontend-system/architecture/05-extension-overrides.md b/docs/frontend-system/architecture/05-extension-overrides.md index 63a2e58716..f9bd5edd82 100644 --- a/docs/frontend-system/architecture/05-extension-overrides.md +++ b/docs/frontend-system/architecture/05-extension-overrides.md @@ -59,7 +59,7 @@ const apertureDarkTheme = createThemeExtension({ }); // Creating an extension overrides preset -export createExtensionOverrides({ +export default createExtensionOverrides({ extensions: [apertureLightTheme, apertureDarkTheme] }); ``` From 628ba69f569b7c7abe3854330bafc067016e0232 Mon Sep 17 00:00:00 2001 From: Marley Powell Date: Fri, 10 May 2024 07:18:55 +0000 Subject: [PATCH 2/3] prettier:fix Signed-off-by: Marley Powell --- docs/frontend-system/architecture/05-extension-overrides.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/frontend-system/architecture/05-extension-overrides.md b/docs/frontend-system/architecture/05-extension-overrides.md index f9bd5edd82..cdd1bd8058 100644 --- a/docs/frontend-system/architecture/05-extension-overrides.md +++ b/docs/frontend-system/architecture/05-extension-overrides.md @@ -25,7 +25,7 @@ In the example below, we create a file that exports custom extensions for the ap ```tsx title="packages/app/src/themes.ts" import { createThemeExtension, - createExtensionOverrides + createExtensionOverrides, } from '@backstage/frontend-plugin-api'; import { apertureThemes } from './themes'; import { ApertureLightIcon, ApertureDarkIcon } from './icons'; @@ -60,7 +60,7 @@ const apertureDarkTheme = createThemeExtension({ // Creating an extension overrides preset export default createExtensionOverrides({ - extensions: [apertureLightTheme, apertureDarkTheme] + extensions: [apertureLightTheme, apertureDarkTheme], }); ``` From d618403e7f05d44dfde0d6789588862a1213e528 Mon Sep 17 00:00:00 2001 From: Marley Powell Date: Fri, 10 May 2024 07:28:18 +0000 Subject: [PATCH 3/3] improved docs Signed-off-by: Marley Powell --- .../architecture/05-extension-overrides.md | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/docs/frontend-system/architecture/05-extension-overrides.md b/docs/frontend-system/architecture/05-extension-overrides.md index cdd1bd8058..41702e6823 100644 --- a/docs/frontend-system/architecture/05-extension-overrides.md +++ b/docs/frontend-system/architecture/05-extension-overrides.md @@ -22,7 +22,7 @@ In order to override an app extension, you must create a new extension and add i In the example below, we create a file that exports custom extensions for the app's `light` and `dark` themes: -```tsx title="packages/app/src/themes.ts" +```tsx title="packages/app/src/themes.tsx" import { createThemeExtension, createExtensionOverrides, @@ -96,8 +96,11 @@ We recommend that plugin developers share the extension IDs in their plugin docu Imagine you have a plugin with the ID `'search'`, and the plugin provides a page extension that you want to fully override with your own custom component. To do so, you need to create your page extension with an explicit `namespace` option that matches that of the plugin that you want to override, in this case `'search'`. If the existing extension also has an explicit `name` you'd need to set the `name` of your override extension to the same value as well. -```tsx title="packages/app/src/search.ts" -import { createPageExtension } from '@backstage/frontend-plugin-api'; +```tsx title="packages/app/src/search.tsx" +import { + createPageExtension, + createExtensionOverrides, +} from '@backstage/frontend-plugin-api'; // Creating a custom search page extension const customSearchPage = createPageExtension({ @@ -137,7 +140,7 @@ Sometimes you just need to quickly create a new extension and not overwrite an a Imagine you want to create a page that is currently only used by your application, like an Institutional page, for example. You can use overrides to extend the Backstage app to render it. To do so, simply create a page extension and pass it to the app as an override: -```tsx title="packages/app/src/App.ts" +```tsx title="packages/app/src/App.tsx" import { createApp } from '@backstage/frontend-app-api'; import { createPageExtension,