docs/frontend-system: update plugin index docs to 1.30

Signed-off-by: Patrik Oldsberg <poldsberg@gmail.com>

docs/frontend-system/building-plugins/01-index.md

@@ -49,7 +49,7 @@ The plugin ID should be a lowercase dash-separated string, while the plugin inst
 
 The plugin that we created above is empty, and doesn't provide any actual functionality. To add functionality to a plugin you need to create and provide it with one or more [extensions](../architecture/20-extensions.md). Let's continue by adding a standalone page to our plugin, as well as a navigation item that allows users to navigate to the page.
 
-To create a new extension you typically use pre-defined [extension creators](../architecture/20-extensions.md#extension-creators), provided either by the framework itself or by other plugins. In this case we'll need to use `createPageExtension` and `createNavItemExtension`, both from `@backstage/frontend-plugin-api`. We will also need to [create a route reference](../architecture/36-routes.md#creating-a-route-reference) to use as a reference for out page, allowing us to dynamically create URLs that link to our page.
+To create a new extension you typically use pre-defined [extension blueprints](../architecture/23-extension-blueprints.md), provided either by the framework itself or by other plugins. In this case we'll use `PageBlueprint` and `NavItemBlueprint`, both from `@backstage/frontend-plugin-api`. We will also need to [create a route reference](../architecture/36-routes.md#creating-a-route-reference) to use as a reference for out page, allowing us to dynamically create URLs that link to our page.
 
 ```tsx title="in src/routes.ts"
 import { createRouteRef } from '@backstage/frontend-plugin-api';
@@ -71,24 +71,29 @@ import { rootRouteRef } from './routes';
 
 // Note that these extensions aren't exported, only the plugin itself is.
 // You can export it locally for testing purposes, but don't export it from the plugin package.
-const examplePage = createPageExtension({
-  routeRef: rootRouteRef,
+const examplePage = PageBlueprint.make({
+  params: {
+    routeRef: rootRouteRef,
 
-  // This is the default path of this page, but integrators are free to override it
-  defaultPath: '/example',
+    // This is the default path of this page, but integrators are free to override it
+    defaultPath: '/example',
 
-  // Page extensions are always dynamically loaded using React.lazy().
-  // All of the functionality of this page is implemented in the
-  // ExamplePage component, which is a regular React component.
-  // highlight-next-line
-  loader: () => import('./components/ExamplePage').then(m => <m.ExamplePage />),
+    // Page extensions are always dynamically loaded using React.lazy().
+    // All of the functionality of this page is implemented in the
+    // ExamplePage component, which is a regular React component.
+    // highlight-next-line
+    loader: () =>
+      import('./components/ExamplePage').then(m => <m.ExamplePage />),
+  },
 });
 
 // This nav item is provided to the app.nav extension, and will by default be rendered as a sidebar item
-const exampleNavItem = createNavItemExtension({
-  routeRef: rootRouteRef,
-  title: 'Example',
-  icon: ExampleIcon, // Custom SvgIcon, or one from the Material UI icon library
+const exampleNavItem = NavItemBlueprint.make({
+  params: {
+    routeRef: rootRouteRef,
+    title: 'Example',
+    icon: ExampleIcon, // Custom SvgIcon, or one from the Material UI icon library
+  },
 });
 
 // The same plugin as above, now with the extensions added
@@ -157,12 +162,15 @@ import {
 import { exampleApiRef, DefaultExampleApi } from './api';
 
 // highlight-add-start
-const exampleApi = createApiExtension({
-  factory: createApiFactory({
-    api: exampleApiRef,
-    deps: {},
-    factory: () => new DefaultExampleApi(),
-  }),
+const exampleApi = ApiBlueprint.make({
+  name: 'example',
+  params: {
+    factory: createApiFactory({
+      api: exampleApiRef,
+      deps: {},
+      factory: () => new DefaultExampleApi(),
+    }),
+  },
 });
 // highlight-add-end
 
@@ -187,26 +195,28 @@ export const examplePlugin = createFrontendPlugin({
 There are many different plugins that you can extend with additional functionality through extensions. One such plugin is [the catalog plugin](../../features/software-catalog/), one of the core features of Backstage. It lets you catalog the software in your organization, where each item in the catalog has its own page that can be populated with tools and information relating to that catalog entity. In this example we will explore how our plugin can provide such a tool to display on an entity page.
 
 ```tsx title="in src/plugin.ts - An example entity content extension"
-import { createEntityContentExtension } from '@backstage/plugin-catalog-react';
+import { EntityContentBlueprint } from '@backstage/plugin-catalog-react/alpha';
 
 // Entity content extensions are similar to page extensions in that they are rendered at a route,
 // although they also have a title to support in-line navigation between the different content.
 // Just like a page extension the content is lazy loaded, and you can also provide a
 // route reference if you want to be able to generate a URL that links to the content.
-const exampleEntityContent = createEntityContentExtension({
-  defaultPath: 'example',
-  defaultTitle: 'Example',
-  loader: () =>
-    import('./components/ExampleEntityContent').then(m => (
-      <m.ExampleEntityContent />
-    )),
+const exampleEntityContent = EntityContentBlueprint.make({
+  params: {
+    defaultPath: 'example',
+    defaultTitle: 'Example',
+    loader: () =>
+      import('./components/ExampleEntityContent').then(m => (
+        <m.ExampleEntityContent />
+      )),
+  },
 });
 
 export const examplePlugin = createFrontendPlugin({
   id: 'example',
   extensions: [
     // highlight-add-next-line
-    exampleEntityContent
+    exampleEntityContent,
     exampleApi,
     examplePage,
     exampleNavItem,