feat: Homepage revamp

app-config.yaml

@@ -72,28 +72,11 @@ catalog:
   rules:
     - allow: [Component, System, API, Resource, Location, Template, User, Group]
   locations:
-    # Local example data, file locations are relative to the backend process, typically `packages/backend`
     - type: file
       target: ../../examples/entities.yaml
-
-    # Local example template
     - type: file
       target: ../../examples/template/template.yaml
-      rules:
-        - allow: [Template]
-
-    # Local example organizational data
     - type: file
       target: ../../examples/org.yaml
-      rules:
-        - allow: [User, Group]
-
-    ## Uncomment these lines to add more example data
-    # - type: url
-    #   target: https://github.com/backstage/backstage/blob/master/packages/catalog-model/examples/all.yaml
-
-    ## Uncomment these lines to add an example org
-    # - type: url
-    #   target: https://github.com/backstage/backstage/blob/master/packages/catalog-model/examples/acme-corp.yaml
-    #   rules:
-    #     - allow: [User, Group]
+    - type: file
+      target: ../../examples/all.yaml

docs/development.md

@@ -0,0 +1,40 @@
+# Development
+
+## Using Storybook
+
+There's a Backstage Storybook site that can be used to view and develop components.
+
+https://backstage.io/storybook
+
+Storybook is a tool for developing UI components in isolation. It encourages the creation of reusable components and allows for the visual testing of components in different states.
+
+[What is Storybook?](https://www.perplexity.ai/search/backstage-storybook-QUfnZxrpQKST1rscB..iww)
+
+## Customising React Components
+
+https://mui.com/material-ui/react-button/#customization
+
+Using styled components to customise the appearance of MUI components.
+
+```jsx
+import { Button } from '@mui/material';
+import { styled } from '@mui/material/styles';
+
+const CustomButton = styled(Button)({
+  background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
+  border: 0,
+  borderRadius: 3,
+  boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)',
+  color: 'white',
+  height: 48,
+  padding: '0 30px',
+});
+
+export default function CustomizedButtons() {
+  return <CustomButton>Custom Button</CustomButton>;
+}
+```
+
+## Theme Providers
+
+https://mui.com/material-ui/customization/theming/#accessing-the-theme-in-a-component

examples/README.md

@@ -0,0 +1,4 @@
+# Example Entities
+
+This is a set of example entities that you can make use of to demonstrate basic
+Backstage features.

examples/acme-corp.yaml

@@ -0,0 +1,8 @@
+apiVersion: backstage.io/v1alpha1
+kind: Location
+metadata:
+  name: acme-corp
+  description: A collection of all Backstage example Groups
+spec:
+  targets:
+    - ./acme/org.yaml

examples/acme/backstage-group.yaml

@@ -0,0 +1,13 @@
+apiVersion: backstage.io/v1alpha1
+kind: Group
+metadata:
+  name: backstage
+  description: The backstage sub-department
+spec:
+  type: sub-department
+  profile:
+    displayName: Backstage
+    email: backstage@example.com
+    picture: https://api.dicebear.com/7.x/identicon/svg?seed=Fluffy&backgroundColor=ffdfbf
+  parent: infrastructure
+  children: [team-a, team-b]

examples/acme/boxoffice-group.yaml

@@ -0,0 +1,13 @@
+apiVersion: backstage.io/v1alpha1
+kind: Group
+metadata:
+  name: boxoffice
+  description: The boxoffice sub-department
+spec:
+  type: sub-department
+  profile:
+    displayName: Box Office
+    email: boxoffice@example.com
+    # Intentional no picture for testing
+  parent: infrastructure
+  children: [team-c, team-d]

examples/acme/infrastructure-group.yaml

@@ -0,0 +1,10 @@
+apiVersion: backstage.io/v1alpha1
+kind: Group
+metadata:
+  name: infrastructure
+  description: The infra department
+spec:
+  type: department
+  # Intentional no profile for testing
+  parent: acme-corp
+  children: [backstage, boxoffice]

examples/acme/org.yaml

@@ -0,0 +1,32 @@
+apiVersion: backstage.io/v1alpha1
+kind: Group
+metadata:
+  name: acme-corp
+  description: The acme-corp organization
+  links:
+    - url: http://www.acme.com/
+      title: Website
+    - url: https://meta.wikimedia.org/wiki/
+      title: Intranet
+spec:
+  type: organization
+  profile:
+    displayName: ACME Corp
+    email: info@example.com
+    picture: https://api.dicebear.com/7.x/identicon/svg?seed=Maggie&flip=true&backgroundColor=ffdfbf
+  children: [infrastructure]
+---
+apiVersion: backstage.io/v1alpha1
+kind: Location
+metadata:
+  name: example-groups
+  description: A collection of all Backstage example Groups
+spec:
+  targets:
+    - ./infrastructure-group.yaml
+    - ./boxoffice-group.yaml
+    - ./backstage-group.yaml
+    - ./team-a-group.yaml
+    - ./team-b-group.yaml
+    - ./team-c-group.yaml
+    - ./team-d-group.yaml

examples/acme/team-a-group.yaml

@@ -0,0 +1,73 @@
+apiVersion: backstage.io/v1alpha1
+kind: Group
+metadata:
+  name: team-a
+  description: Team A
+spec:
+  type: team
+  profile:
+    # Intentional no displayName for testing
+    email: team-a@example.com
+    picture: https://api.dicebear.com/7.x/identicon/svg?seed=Fluffy&backgroundType=solid,gradientLinear&backgroundColor=ffd5dc,b6e3f4
+  parent: backstage
+  children: []
+---
+apiVersion: backstage.io/v1alpha1
+kind: User
+metadata:
+  name: breanna.davison
+spec:
+  profile:
+    # Intentional no displayName for testing
+    email: breanna-davison@example.com
+    picture: https://api.dicebear.com/7.x/avataaars/svg?seed=Luna&backgroundColor=transparent
+  memberOf: [team-a]
+---
+apiVersion: backstage.io/v1alpha1
+kind: User
+metadata:
+  name: janelle.dawe
+spec:
+  profile:
+    displayName: Janelle Dawe
+    email: janelle-dawe@example.com
+    picture: https://api.dicebear.com/7.x/avataaars/svg?seed=Leo&backgroundColor=transparent
+  memberOf: [team-a]
+---
+apiVersion: backstage.io/v1alpha1
+kind: User
+metadata:
+  name: nigel.manning
+spec:
+  profile:
+    displayName: Nigel Manning
+    email: nigel-manning@example.com
+    picture: https://api.dicebear.com/7.x/avataaars/svg?seed=Midnight&backgroundColor=transparent
+  memberOf: [team-a]
+---
+# This user is added as an example, to make it more easy for the "Guest"
+# sign-in option to demonstrate some entities being owned. In a regular org,
+# a guest user would probably not be registered like this.
+apiVersion: backstage.io/v1alpha1
+kind: User
+metadata:
+  name: guest
+spec:
+  profile:
+    displayName: Guest User
+    email: guest@example.com
+  memberOf: [team-a]
+---
+# This user is added as an example, to make it more easy for the "Guest"
+# sign-in option to demonstrate some entities being owned. In a regular org,
+# a guest user would probably not be registered like this.
+apiVersion: backstage.io/v1alpha1
+kind: User
+metadata:
+  name: guest
+  namespace: development
+spec:
+  profile:
+    displayName: Guest User
+    email: guest@example.com
+  memberOf: [group:default/team-a]

examples/acme/team-b-group.yaml

@@ -0,0 +1,68 @@
+apiVersion: backstage.io/v1alpha1
+kind: Group
+metadata:
+  name: team-b
+  description: Team B
+spec:
+  type: team
+  profile:
+    displayName: Team B
+    email: team-b@example.com
+    picture: https://api.dicebear.com/7.x/identicon/svg?seed=Abby&backgroundType=solid,gradientLinear&backgroundColor=ffd5dc,b6e3f4
+  parent: backstage
+  children: []
+---
+apiVersion: backstage.io/v1alpha1
+kind: User
+metadata:
+  name: amelia.park
+spec:
+  profile:
+    displayName: Amelia Park
+    email: amelia-park@example.com
+    picture: https://api.dicebear.com/7.x/avataaars/svg?seed=Gizmo&backgroundColor=transparent
+  memberOf: [team-b]
+---
+apiVersion: backstage.io/v1alpha1
+kind: User
+metadata:
+  name: colette.brock
+spec:
+  profile:
+    displayName: Colette Brock
+    email: colette-brock@example.com
+    picture: https://api.dicebear.com/7.x/avataaars/svg?seed=Bailey&backgroundColor=transparent
+  memberOf: [team-b]
+---
+apiVersion: backstage.io/v1alpha1
+kind: User
+metadata:
+  name: jenny.doe
+spec:
+  profile:
+    displayName: Jenny Doe
+    email: jenny-doe@example.com
+    picture: https://api.dicebear.com/7.x/avataaars/svg?seed=Mimi&backgroundColor=transparent
+  memberOf: [team-b]
+---
+apiVersion: backstage.io/v1alpha1
+kind: User
+metadata:
+  name: jonathon.page
+spec:
+  profile:
+    displayName: Jonathon Page
+    email: jonathon-page@example.com
+    picture: https://api.dicebear.com/7.x/avataaars/svg?seed=Baby&backgroundColor=transparent
+  memberOf: [team-b]
+---
+apiVersion: backstage.io/v1alpha1
+kind: User
+metadata:
+  name: justine.barrow
+spec:
+  profile:
+    displayName: Justine Barrow
+    email: justine-barrow@example.com
+    picture: https://api.dicebear.com/7.x/avataaars/svg?seed=Sassy&backgroundColor=transparent
+  memberOf: [team-b]

examples/acme/team-c-group.yaml

@@ -0,0 +1,68 @@
+apiVersion: backstage.io/v1alpha1
+kind: Group
+metadata:
+  name: team-c
+  description: Team C
+spec:
+  type: team
+  profile:
+    displayName: Team C
+    email: team-c@example.com
+    picture: https://api.dicebear.com/7.x/identicon/svg?seed=Loki&backgroundType=gradientLinear&backgroundColor=b6e3f4,ffd5dc,ffdfbf,c0aede
+  parent: boxoffice
+  children: []
+---
+apiVersion: backstage.io/v1alpha1
+kind: User
+metadata:
+  name: calum.leavy
+spec:
+  profile:
+    displayName: Calum Leavy
+    email: calum-leavy@example.com
+    picture: https://api.dicebear.com/7.x/avataaars/svg?seed=Bear&backgroundColor=transparent
+  memberOf: [team-c]
+---
+apiVersion: backstage.io/v1alpha1
+kind: User
+metadata:
+  name: frank.tiernan
+spec:
+  profile:
+    displayName: Frank Tiernan
+    email: frank-tiernan@example.com
+    picture: https://api.dicebear.com/7.x/avataaars/svg?seed=Bandit&backgroundColor=transparent
+  memberOf: [team-c]
+---
+apiVersion: backstage.io/v1alpha1
+kind: User
+metadata:
+  name: peadar.macmahon
+spec:
+  profile:
+    displayName: Peadar MacMahon
+    email: peadar-macmahon@example.com
+    picture: https://api.dicebear.com/7.x/avataaars/svg?seed=Sophie
+  memberOf: [team-c]
+---
+apiVersion: backstage.io/v1alpha1
+kind: User
+metadata:
+  name: sarah.gilroy
+spec:
+  profile:
+    displayName: Sarah Gilroy
+    email: sarah-gilroy@example.com
+    picture: https://api.dicebear.com/7.x/avataaars/svg?seed=Rascal
+  memberOf: [team-c]
+---
+apiVersion: backstage.io/v1alpha1
+kind: User
+metadata:
+  name: tara.macgovern
+spec:
+  profile:
+    displayName: Tara MacGovern
+    email: tara-macgovern@example.com
+    picture: https://api.dicebear.com/7.x/avataaars/svg?seed=Jasmine
+  memberOf: [team-c]