Feature/homepage

packages/app/package.json

@@ -27,6 +27,7 @@
     "@backstage/plugin-catalog-graph": "^0.4.5",
     "@backstage/plugin-catalog-import": "^0.11.0",
     "@backstage/plugin-catalog-react": "^1.12.0",
+    "@backstage/plugin-home": "^0.7.4",
     "@backstage/plugin-org": "^0.6.25",
     "@backstage/plugin-permission-react": "^0.4.22",
     "@backstage/plugin-scaffolder": "^1.20.0",

packages/app/src/App.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Navigate, Route } from 'react-router-dom';
+import { Route } from 'react-router-dom';
 import { apiDocsPlugin, ApiExplorerPage } from '@backstage/plugin-api-docs';
 import {
   CatalogEntityPage,
@@ -37,7 +37,9 @@ import { AppRouter, FlatRoutes } from '@backstage/core-app-api';
 import { CatalogGraphPage } from '@backstage/plugin-catalog-graph';
 import { RequirePermission } from '@backstage/plugin-permission-react';
 import { catalogEntityCreatePermission } from '@backstage/plugin-catalog-common/alpha';
-import { themes, UnifiedThemeProvider } from '@backstage/theme';
+import { UnifiedThemeProvider } from '@backstage/theme';
+import { HomePage } from './components/home/HomePage';
+import { HelloWorld } from './theme/HelloWorld';
 
 const app = createApp({
   apis,
@@ -63,20 +65,20 @@ const app = createApp({
   },
   themes: [
     {
-      id: 'my-theme',
-      title: 'My Custom Theme',
+      id: 'default',
+      title: 'Default',
       variant: 'light',
       icon: <AcUnitIcon />,
       Provider: ({ children }) => (
-        <UnifiedThemeProvider theme={themes.light} children={children} />
+        <UnifiedThemeProvider theme={HelloWorld} children={children} />
       ),
     },
   ],
 });
 
 const routes = (
   <FlatRoutes>
-    <Route path="/" element={<Navigate to="catalog" />} />
+    <Route path="/" element={<HomePage />} />
     <Route path="/catalog" element={<CatalogIndexPage />} />
     <Route
       path="/catalog/:namespace/:kind/:name"

packages/app/src/components/Root/LogoIcon.tsx

@@ -6,14 +6,28 @@ const Svg = styled('svg')({
   height: 28,
 });
 
-const Path = styled('path')({
-  fill: '#7df3e1',
-});
-
 const LogoIcon = () => {
   return (
-    <Svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 337.46 428.5">
-      <Path d="M303,166.05a80.69,80.69,0,0,0,13.45-10.37c.79-.77,1.55-1.53,2.3-2.3a83.12,83.12,0,0,0,7.93-9.38A63.69,63.69,0,0,0,333,133.23a48.58,48.58,0,0,0,4.35-16.4c1.49-19.39-10-38.67-35.62-54.22L198.56,0,78.3,115.23,0,190.25l108.6,65.91a111.59,111.59,0,0,0,57.76,16.41c24.92,0,48.8-8.8,66.42-25.69,19.16-18.36,25.52-42.12,13.7-61.87a49.22,49.22,0,0,0-6.8-8.87A89.17,89.17,0,0,0,259,178.29h.15a85.08,85.08,0,0,0,31-5.79A80.88,80.88,0,0,0,303,166.05ZM202.45,225.86c-19.32,18.51-50.4,21.23-75.7,5.9L51.61,186.15l67.45-64.64,76.41,46.38C223,184.58,221.49,207.61,202.45,225.86Zm8.93-82.22-70.65-42.89L205.14,39,274.51,81.1c25.94,15.72,29.31,37,10.55,55A60.69,60.69,0,0,1,211.38,143.64Zm29.86,190c-19.57,18.75-46.17,29.09-74.88,29.09a123.73,123.73,0,0,1-64.1-18.2L0,282.52v24.67L108.6,373.1a111.6,111.6,0,0,0,57.76,16.42c24.92,0,48.8-8.81,66.42-25.69,12.88-12.34,20-27.13,19.68-41.49v-1.79A87.27,87.27,0,0,1,241.24,333.68Zm0-39c-19.57,18.75-46.17,29.08-74.88,29.08a123.81,123.81,0,0,1-64.1-18.19L0,243.53v24.68l108.6,65.91a111.6,111.6,0,0,0,57.76,16.42c24.92,0,48.8-8.81,66.42-25.69,12.88-12.34,20-27.13,19.68-41.5v-1.78A87.27,87.27,0,0,1,241.24,294.7Zm0-39c-19.57,18.76-46.17,29.09-74.88,29.09a123.81,123.81,0,0,1-64.1-18.19L0,204.55v24.68l108.6,65.91a111.59,111.59,0,0,0,57.76,16.41c24.92,0,48.8-8.8,66.42-25.68,12.88-12.35,20-27.13,19.68-41.5v-1.82A86.09,86.09,0,0,1,241.24,255.71Zm83.7,25.74a94.15,94.15,0,0,1-60.2,25.86h0V334a81.6,81.6,0,0,0,51.74-22.37c14-13.38,21.14-28.11,21-42.64v-2.19A94.92,94.92,0,0,1,324.94,281.45Zm-83.7,91.21c-19.57,18.76-46.17,29.09-74.88,29.09a123.73,123.73,0,0,1-64.1-18.2L0,321.5v24.68l108.6,65.9a111.6,111.6,0,0,0,57.76,16.42c24.92,0,48.8-8.8,66.42-25.69,12.88-12.34,20-27.13,19.68-41.49v-1.79A86.29,86.29,0,0,1,241.24,372.66ZM327,162.45c-.68.69-1.35,1.38-2.05,2.06a94.37,94.37,0,0,1-10.64,8.65,91.35,91.35,0,0,1-11.6,7,94.53,94.53,0,0,1-26.24,8.71,97.69,97.69,0,0,1-14.16,1.57c.5,1.61.9,3.25,1.25,4.9a53.27,53.27,0,0,1,1.14,12V217h.05a84.41,84.41,0,0,0,25.35-5.55,81,81,0,0,0,26.39-16.82c.8-.77,1.5-1.56,2.26-2.34a82.08,82.08,0,0,0,7.93-9.38A63.76,63.76,0,0,0,333,172.17a48.55,48.55,0,0,0,4.32-16.45c.09-1.23.2-2.47.19-3.7V150q-1.08,1.54-2.25,3.09A96.73,96.73,0,0,1,327,162.45Zm0,77.92c-.69.7-1.31,1.41-2,2.1a94.2,94.2,0,0,1-60.2,25.86h0l0,26.67h0a81.6,81.6,0,0,0,51.74-22.37A73.51,73.51,0,0,0,333,250.13a48.56,48.56,0,0,0,4.32-16.44c.09-1.24.2-2.47.19-3.71v-2.19c-.74,1.07-1.46,2.15-2.27,3.21A95.68,95.68,0,0,1,327,240.37Zm0-39c-.69.7-1.31,1.41-2,2.1a93.18,93.18,0,0,1-10.63,8.65,91.63,91.63,0,0,1-11.63,7,95.47,95.47,0,0,1-37.94,10.18h0V256h0a81.65,81.65,0,0,0,51.74-22.37c.8-.77,1.5-1.56,2.26-2.34a82.08,82.08,0,0,0,7.93-9.38A63.76,63.76,0,0,0,333,211.15a48.56,48.56,0,0,0,4.32-16.44c.09-1.24.2-2.48.19-3.71v-2.2c-.74,1.08-1.46,2.16-2.27,3.22A95.68,95.68,0,0,1,327,201.39Z" />
+    <Svg
+      width="239"
+      height="239"
+      viewBox="0 0 239 239"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <rect width="239" height="239" fill="#FFA217" />
+      <path
+        d="M200.294 71C196.591 71 193.588 68.0067 193.588 64.3143C193.588 53.5692 185.304 45.3714 175.706 45.3714C172.002 45.3714 169 42.3781 169 38.6857C169 34.9933 172.002 32 175.706 32C193.267 32 207 46.7508 207 64.3143C207 68.0067 203.998 71 200.294 71Z"
+        fill="#291A11"
+      />
+      <path
+        d="M38.8571 166C42.6442 166 45.7143 169.07 45.7143 172.857C45.7143 183.587 54.4128 192.286 65.1429 192.286C68.93 192.286 72 195.356 72 199.143C72 202.93 68.93 206 65.1429 206C46.8386 206 32 191.161 32 172.857C32 169.07 35.07 166 38.8571 166Z"
+        fill="#291A11"
+      />
+      <path
+        d="M207.644 131.306C207.64 145.671 203.377 159.712 195.394 171.655C187.412 183.598 176.068 192.907 162.796 198.404C149.525 203.901 134.921 205.34 120.832 202.54C106.743 199.74 93.7996 192.825 83.639 182.67L34.6092 133.641C31.851 130.884 29.8353 127.474 28.7499 123.729C27.6644 119.984 27.5446 116.024 28.4015 112.22C29.2585 108.416 31.0643 104.89 33.6508 101.972C36.2373 99.0539 39.5203 96.8377 43.1941 95.5301L39.2792 91.615C35.3875 87.7201 33.0138 82.5641 32.5853 77.0748C32.1568 71.5856 33.7017 66.1237 36.9418 61.6721C40.1819 57.2205 44.9045 54.0715 50.2597 52.7919C55.6149 51.5124 61.2509 52.1862 66.1535 54.6922C67.2909 50.8518 69.4071 47.373 72.2945 44.5971C75.1819 41.8212 78.7412 39.8435 82.6234 38.858C86.5056 37.8726 90.5773 37.9132 94.4391 38.9759C98.3009 40.0386 101.82 42.0868 104.651 44.9198L124.898 65.1663C126.21 61.4946 128.429 58.2144 131.35 55.6306C134.27 53.0467 137.796 51.2433 141.6 50.3879C145.404 49.5325 149.363 49.653 153.108 50.738C156.853 51.8231 160.263 53.8376 163.021 56.5941L186.368 79.9415C193.134 86.6709 198.499 94.6757 202.151 103.492C205.803 112.309 207.67 121.763 207.644 131.306ZM177.029 89.2803L153.682 65.9332C152.763 65.0112 151.67 64.2795 150.468 63.78C149.266 63.2804 147.977 63.0228 146.675 63.0219C145.373 63.0209 144.083 63.2767 142.88 63.7745C141.677 64.2722 140.584 65.0023 139.663 65.9229C138.743 66.8436 138.013 67.9366 137.515 69.1397C137.017 70.3427 136.761 71.6321 136.762 72.9341C136.763 74.2361 137.02 75.5251 137.52 76.7275C138.019 77.9299 138.751 79.022 139.673 79.9414L151.347 91.6153C151.502 91.7711 151.65 91.9346 151.79 92.1052C151.891 92.2293 151.982 92.3589 152.073 92.4884C152.106 92.5348 152.143 92.5787 152.175 92.626C152.281 92.7861 152.378 92.9509 152.469 93.1177C152.48 93.1385 152.494 93.1579 152.505 93.1786C152.597 93.3509 152.678 93.5269 152.754 93.7049C152.762 93.7241 152.772 93.7424 152.78 93.7617C152.85 93.9323 152.91 94.1058 152.966 94.2805C152.975 94.3111 152.988 94.3406 152.998 94.3713C153.046 94.5327 153.084 94.6963 153.12 94.8603C153.131 94.9073 153.145 94.9531 153.155 95.0003C153.185 95.1553 153.205 95.3116 153.224 95.4681C153.232 95.5259 153.244 95.5826 153.249 95.6408C153.268 95.8298 153.275 96.0196 153.278 96.2093C153.278 96.2347 153.281 96.2596 153.281 96.2849C153.281 96.3109 153.278 96.3364 153.278 96.3624C153.275 96.5517 153.268 96.741 153.249 96.9297C153.244 96.9819 153.233 97.0329 153.227 97.0847C153.207 97.2474 153.186 97.41 153.154 97.5709C153.146 97.6097 153.135 97.6471 153.126 97.6857C153.089 97.8586 153.048 98.0308 152.997 98.2009C152.991 98.2206 152.983 98.2393 152.977 98.2588C152.918 98.4449 152.854 98.6292 152.779 98.8105L152.769 98.8309C152.69 99.0216 152.601 99.2091 152.503 99.3935L152.494 99.4096C152.396 99.592 152.29 99.7711 152.173 99.9456C152.154 99.9741 152.132 100 152.112 100.029C152.01 100.177 151.905 100.324 151.789 100.466C151.65 100.636 151.502 100.799 151.347 100.954C146.393 105.908 143.61 112.627 143.61 119.632C143.61 126.638 146.393 133.357 151.346 138.311C152.585 139.549 153.28 141.228 153.28 142.98C153.28 144.731 152.585 146.411 151.346 147.649C150.108 148.887 148.429 149.583 146.677 149.583C144.926 149.583 143.246 148.888 142.008 147.649C135.388 141.027 131.326 132.274 130.542 122.943C129.757 113.612 132.302 104.305 137.723 96.6699L130.335 89.2806L130.332 89.2776L95.3133 54.259C93.4557 52.4013 90.9361 51.3576 88.309 51.3576C85.6818 51.3576 83.1622 52.4012 81.3045 54.2588C79.4468 56.1165 78.4032 58.636 78.4032 61.2632C78.4031 63.8903 79.4467 66.4099 81.3044 68.2676L111.655 98.6199C112.894 99.8583 113.59 101.538 113.59 103.289C113.59 105.041 112.894 106.72 111.655 107.959C110.417 109.197 108.737 109.893 106.986 109.893C105.234 109.893 103.555 109.197 102.316 107.959L71.9646 77.6068L71.9461 77.5876L62.6264 68.2676C60.7682 66.4124 58.2496 65.3709 55.6239 65.372C52.9982 65.373 50.4803 66.4164 48.6236 68.273C46.7669 70.1296 45.7233 72.6474 45.7221 75.2731C45.7209 77.8988 46.7623 80.4176 48.6173 82.2758L67.2919 100.95L67.2953 100.954L92.9778 126.637C93.6432 127.295 94.1601 128.089 94.494 128.963C94.8279 129.838 94.971 130.774 94.9138 131.708C94.8565 132.643 94.6002 133.554 94.1621 134.381C93.7239 135.209 93.114 135.933 92.3732 136.505C92.3121 136.553 92.2495 136.597 92.1874 136.642C92.0296 136.757 91.8682 136.864 91.7031 136.964C91.6374 137.003 91.5726 137.043 91.5057 137.08C91.2996 137.195 91.0874 137.299 90.8701 137.391C90.851 137.399 90.8325 137.41 90.8133 137.418C90.5754 137.514 90.332 137.596 90.0844 137.664C90.0642 137.67 90.0446 137.679 90.0244 137.684C89.9823 137.696 89.9391 137.699 89.8968 137.71C89.7023 137.758 89.5065 137.797 89.3095 137.827C89.2389 137.838 89.1689 137.849 89.0981 137.858C88.8602 137.887 88.6208 137.904 88.3811 137.907C88.3645 137.907 88.3479 137.909 88.3313 137.909C88.0733 137.909 87.8157 137.894 87.5595 137.863C87.4937 137.856 87.4293 137.844 87.3637 137.835C87.1676 137.807 86.9729 137.77 86.7798 137.724C86.7104 137.708 86.6415 137.692 86.5723 137.674C86.328 137.609 86.0877 137.53 85.8525 137.437L85.8359 137.431C85.5924 137.331 85.3551 137.217 85.1253 137.089C85.065 137.055 85.0059 137.018 84.9463 136.983C84.7706 136.878 84.5992 136.765 84.4319 136.644C84.3738 136.601 84.3153 136.56 84.2583 136.516C84.0408 136.349 83.8339 136.168 83.6387 135.976L57.9564 110.293C56.0982 108.438 53.5795 107.396 50.9537 107.398C48.3279 107.399 45.81 108.442 43.9534 110.299C42.0967 112.156 41.0533 114.674 41.0523 117.299C41.0514 119.925 42.093 122.444 43.9484 124.302L92.978 173.331C104.125 184.473 119.24 190.731 135.001 190.729C150.761 190.727 165.875 184.466 177.019 173.322C188.164 162.177 194.425 147.063 194.427 131.303C194.429 115.543 188.171 100.427 177.029 89.2803Z"
+        fill="#291A11"
+      />
     </Svg>
   );
 };

packages/app/src/components/Root/Root.tsx

@@ -1,9 +1,6 @@
 import React, { PropsWithChildren } from 'react';
 import { styled } from '@mui/material/styles';
 import Home from '@mui/icons-material/Home';
-import Extension from '@mui/icons-material/Extension';
-import Map from '@mui/icons-material/MyLocation';
-import LibraryBooks from '@mui/icons-material/LibraryBooks';
 import CreateComponent from '@mui/icons-material/AddCircleOutline';
 import LogoFull from './LogoFull';
 import LogoIcon from './LogoIcon';
@@ -19,13 +16,15 @@ import {
   SidebarGroup,
   SidebarItem,
   SidebarPage,
-  SidebarScrollWrapper,
   SidebarSpace,
   useSidebarOpenState,
   Link,
 } from '@backstage/core-components';
-import Menu from '@mui/icons-material/Menu';
-import Search from '@mui/icons-material/Search';
+import MenuIcon from '@mui/icons-material/Menu';
+import SearchIcon from '@mui/icons-material/Search';
+import FortRoundedIcon from '@mui/icons-material/FortRounded';
+import ExtensionRoundedIcon from '@mui/icons-material/ExtensionRounded';
+import MenuBookRoundedIcon from '@mui/icons-material/MenuBookRounded';
 import { IconComponent } from '@backstage/core-plugin-api';
 
 const SidebarLogoRoot = styled('div')(() => ({
@@ -39,7 +38,7 @@ const SidebarLogoRoot = styled('div')(() => ({
 
 const SidebarLogoLink = styled(Link)(() => ({
   width: sidebarConfig.drawerWidthClosed,
-  marginLeft: 24,
+  paddingLeft: '24px',
 }));
 
 const SidebarLogo = () => {
@@ -58,20 +57,25 @@ export const Root = ({ children }: PropsWithChildren<{}>) => (
   <SidebarPage>
     <Sidebar>
       <SidebarLogo />
-      <SidebarGroup label="Search" icon={<Search />} to="/search">
+      <SidebarGroup label="Search" icon={<SearchIcon />} to="/search">
         <SidebarSearchModal />
       </SidebarGroup>
       <SidebarDivider />
-      <SidebarGroup label="Menu" icon={<Menu />}>
+      <SidebarGroup label="Menu" icon={<MenuIcon />}>
         {/* Global nav, not org-specific */}
-        <SidebarItem icon={Home as IconComponent} to="catalog" text="Home" />
+        <SidebarItem icon={Home as IconComponent} to="/" text="Home" />
         <SidebarItem
-          icon={Extension as IconComponent}
+          icon={FortRoundedIcon as IconComponent}
+          to="catalog"
+          text="Catalog"
+        />
+        <SidebarItem
+          icon={ExtensionRoundedIcon as IconComponent}
           to="api-docs"
           text="APIs"
         />
         <SidebarItem
-          icon={LibraryBooks as IconComponent}
+          icon={MenuBookRoundedIcon as IconComponent}
           to="docs"
           text="Docs"
         />
@@ -80,15 +84,6 @@ export const Root = ({ children }: PropsWithChildren<{}>) => (
           to="create"
           text="Create..."
         />
-        {/* End global nav */}
-        <SidebarDivider />
-        <SidebarScrollWrapper>
-          <SidebarItem
-            icon={Map as IconComponent}
-            to="tech-radar"
-            text="Tech Radar"
-          />
-        </SidebarScrollWrapper>
       </SidebarGroup>
       <SidebarSpace />
       <SidebarDivider />

packages/app/src/components/home/HomePage.tsx

@@ -0,0 +1,6 @@
+import React from 'react';
+
+export const HomePage = () => (
+  /* We will shortly compose a pretty homepage here. */
+  <h1>Welcome to Backstage!</h1>
+);

packages/app/src/theme/HelloWorld.ts

@@ -0,0 +1,70 @@
+import {
+  colorVariants,
+  createBaseThemeOptions,
+  createUnifiedTheme,
+  genPageTheme,
+  palettes,
+  shapes,
+} from '@backstage/theme';
+
+export const HelloWorld = createUnifiedTheme({
+  ...createBaseThemeOptions({
+    palette: {
+      ...palettes.light,
+      primary: {
+        main: '#FFA217',
+      },
+      secondary: {
+        main: '#F9B249',
+      },
+      error: {
+        main: '#da1313',
+      },
+      success: {
+        main: '#4AB749',
+      },
+      navigation: {
+        background: '#171717',
+        indicator: '#F9B249',
+        color: '#d5d6db',
+        selectedColor: '#ffffff',
+      },
+      background: {
+        default: '#f7f3f1',
+      },
+    },
+  }),
+  defaultPageTheme: 'home',
+  components: {
+    MuiTypography: {
+      styleOverrides: {
+        root: {
+          wordSpacing: '0.02rem',
+          letterSpacing: '0.02rem',
+        },
+      },
+    },
+  },
+  pageTheme: {
+    home: genPageTheme({ colors: ['#FFA217', '#F9B249'], shape: shapes.wave }),
+    documentation: genPageTheme({
+      colors: colorVariants.toastyOrange,
+      shape: shapes.wave2,
+    }),
+    tool: genPageTheme({ colors: colorVariants.rubyRed, shape: shapes.round }),
+    service: genPageTheme({
+      colors: colorVariants.veryBlue,
+      shape: shapes.wave,
+    }),
+    website: genPageTheme({
+      colors: colorVariants.veryBlue,
+      shape: shapes.wave,
+    }),
+    library: genPageTheme({
+      colors: colorVariants.purpleSky,
+      shape: shapes.wave,
+    }),
+    other: genPageTheme({ colors: colorVariants.rubyRed, shape: shapes.wave }),
+    app: genPageTheme({ colors: colorVariants.veryBlue, shape: shapes.wave }),
+  },
+});