Merge pull request #2 from Vity01/customHomepage

support for custom homepage

README.md

@@ -42,6 +42,22 @@ const HomePage = () => (
     // ... 
 );
 ```
+Alternatively, this plugin also supports [customizable homepages](https://github.com/backstage/backstage/tree/master/plugins/home#customizable-home-page).
+You simply add `<HomePageXkcdComic />` to the allowed plugins in section:
+```tsx
+import { HomePageXkcdComic } from 'backstage-plugin-xkcd';
+//....
+
+export const HomePage = () => {
+  return (
+    <CustomHomepageGrid>
+      // Insert the allowed widgets inside the grid       
+      // ...
+        <HomePageXkcdComic />
+    </CustomHomepageGrid>
+  );
+};
+```
 
 You can also enable `/xkcd` route in `packages/app/src/App.tsx`
 ```typescript jsx

dev/HomePage.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { CustomHomepageGrid } from '@backstage/plugin-home';
+import { Content, Page } from '@backstage/core-components';
+import {HomePageXkcdComic} from "../src";
+
+export const HomePage = () => {
+    return (
+        <Page themeId="home">
+            <Content>
+                <CustomHomepageGrid>
+                    <HomePageXkcdComic />
+                </CustomHomepageGrid>
+            </Content>
+        </Page>
+    );
+};

dev/index.tsx

@@ -1,12 +1,18 @@
 import React from 'react';
-import { createDevApp } from '@backstage/dev-utils';
-import { xkcdPlugin, XkcdPage } from '../src/plugin';
+import {createDevApp} from '@backstage/dev-utils';
+import {xkcdPlugin, XkcdPage} from '../src/plugin';
+import { HomePage } from './HomePage';
 
 createDevApp()
-  .registerPlugin(xkcdPlugin)
-  .addPage({
-    element: <XkcdPage />,
-    title: 'XKCD Root Page',
-    path: '/xkcd'
-  })
-  .render();
+    .registerPlugin(xkcdPlugin)
+    .addPage({
+        element: <XkcdPage/>,
+        title: 'XKCD Root Page',
+        path: '/xkcd'
+    })
+    .addPage({
+        element: <HomePage/>,
+        title: 'Home Page',
+        path: '/home',
+    })
+    .render();

package.json

@@ -32,6 +32,7 @@
   },
   "scripts": {
     "start": "backstage-cli package start",
+    "dev": "concurrently \"yarn start\" \"yarn start-backend\"",
     "build": "backstage-cli package build",
     "lint": "backstage-cli package lint",
     "test": "backstage-cli package test",
@@ -47,6 +48,7 @@
   "dependencies": {
     "@backstage/core-components": "^0.12.5",
     "@backstage/core-plugin-api": "^1.5.0",
+    "@backstage/plugin-home": "^0.5.1",
     "@backstage/theme": "^0.2.18",
     "@material-ui/core": "^4.9.13",
     "@material-ui/icons": "^4.9.1",

src/components/XkcdComicCard/XkcdComicCard.tsx

@@ -6,6 +6,7 @@ import {configApiRef, fetchApiRef, useApi} from '@backstage/core-plugin-api';
 import {IconButton} from "@material-ui/core";
 import ComicButtons, {LAST_INDEX} from "../ComicButtons/ComicButtons";
 import {OpenInNew} from "@material-ui/icons";
+import {XkcdComicProps} from "../../types";
 
 const useStyles = makeStyles({
     xkcdImage: {
@@ -44,25 +45,17 @@ export const XkcdImageView = ({props}: XkcdImageViewProps) => {
 function ExplainComponent(num: number) {
     return (
         <Link target='_blank'
-                 to={`https://www.explainxkcd.com/wiki/index.php/${num}`}>
-        <IconButton title="Explain - open in new window" size="small"
-                    style={{backgroundColor: 'transparent', fontSize: "small"}}>
-            <OpenInNew/> Explain
-        </IconButton>
-    </Link>
+              to={`https://www.explainxkcd.com/wiki/index.php/${num}`}>
+            <IconButton title="Explain - open in new window" size="small"
+                        style={{backgroundColor: 'transparent', fontSize: "small"}}>
+                <OpenInNew/> Explain
+            </IconButton>
+        </Link>
     );
 }
 
 export let MAX_COUNT = 2770;
 
-export interface XkcdComicProps {
-    showNav?: boolean;
-    showExplain?: boolean;
-    comicNumber?: number;
-    useProxy?: boolean;
-    proxyUrl?: string;
-}
-
 
 export const XkcdComicCard = (props: XkcdComicProps) => {
     const {fetch} = useApi(fetchApiRef);
@@ -77,8 +70,9 @@ export const XkcdComicCard = (props: XkcdComicProps) => {
         const fetchData = async () => {
             setLoading(true)
             const backendUrl = config.getString('backend.baseUrl');
+            const proxyUrl = '/proxy/xkcd-proxy/';
             try {
-                const url = props.useProxy ? `${backendUrl}/api${props.proxyUrl}` : 'https://xkcd.com/'
+                const url = `${backendUrl}/api${proxyUrl}`
                 const response = await fetch(`${url}${num !== LAST_INDEX ? `${num}/` : ''}info.0.json`);
                 const data = await response.json()
                 if (num === LAST_INDEX) {
@@ -119,7 +113,7 @@ export const XkcdComicCard = (props: XkcdComicProps) => {
                 </div>
                 {props.showExplain &&
                     <div>
-                        {!loading && ExplainComponent(xkcdComic.num) }
+                        {!loading && ExplainComponent(xkcdComic.num)}
                     </div>
                 }
             </InfoCard>
@@ -130,7 +124,5 @@ export const XkcdComicCard = (props: XkcdComicProps) => {
 XkcdComicCard.defaultProps = {
     showNav: true,
     showExplain: true,
-    comicNumber: LAST_INDEX,
-    useProxy: true,
-    proxyUrl: '/proxy/xkcd-proxy/'
+    comicNumber: LAST_INDEX
 };

src/components/XkcdComicCardHomePage.tsx

@@ -0,0 +1,9 @@
+import React from "react";
+import {XkcdComicCard} from "./XkcdComicCard";
+import {XkcdComicProps} from "../types";
+
+export const Content = (props: XkcdComicProps) => {
+    return (
+        <XkcdComicCard {...props}/>
+    );
+};

src/index.ts

@@ -1 +1 @@
-export { xkcdPlugin, XkcdPage, XkcdComicCard } from './plugin';
+export { xkcdPlugin, XkcdPage, XkcdComicCard, HomePageXkcdComic } from './plugin';

src/plugin.ts

@@ -1,21 +1,27 @@
 import {createComponentExtension, createPlugin, createRoutableExtension} from '@backstage/core-plugin-api';
 
-import { rootRouteRef } from './routes';
+import {rootRouteRef} from './routes';
+import {
+    createCardExtension, homePlugin
+} from '@backstage/plugin-home';
+import {LAST_INDEX} from "./components/ComicButtons/ComicButtons";
+
+import {XkcdComicProps} from "./types";
 
 export const xkcdPlugin = createPlugin({
-  id: 'xkcd',
-  routes: {
-    root: rootRouteRef,
-  },
+    id: 'xkcd',
+    routes: {
+        root: rootRouteRef,
+    },
 });
 
 export const XkcdPage = xkcdPlugin.provide(
-  createRoutableExtension({
-    name: 'XkcdPage',
-    component: () =>
-      import('./components/Router').then(m => m.Router),
-    mountPoint: rootRouteRef,
-  }),
+    createRoutableExtension({
+        name: 'XkcdPage',
+        component: () =>
+            import('./components/Router').then(m => m.Router),
+        mountPoint: rootRouteRef,
+    }),
 );
 
 export const XkcdComicCard =
@@ -30,3 +36,42 @@ export const XkcdComicCard =
             },
         }),
     );
+
+export const HomePageXkcdComic = homePlugin.provide(
+    createCardExtension<XkcdComicProps>({
+        name: 'XkcdComicCard',
+        title: 'xkcd',
+        components: () => import('./components/XkcdComicCardHomePage'),
+        layout: {
+            height: {minRows: 1},
+            width: {minColumns: 3},
+        },
+        description: 'xkcd comic',
+        settings: {
+            schema: {
+                title: 'xkcd',
+                type: 'object',
+                properties: {
+                    showNav: {
+                        title: 'Show Navigation',
+                        type: 'boolean',
+                        default: true,
+                        description: 'Show navigation buttons'
+                    },
+                    showExplain: {
+                        title: 'Show Explain',
+                        type: 'boolean',
+                        default: true,
+                        description: 'Show an external link to xkcd wiki'
+                    },
+                    comicNumber: {
+                        title: 'Show specific comic number',
+                        type: 'number',
+                        default: LAST_INDEX,
+                        description: 'Show specific comic number. Default - show the last released comic'
+                    }
+                },
+            },
+        }
+    }),
+);

src/types.ts

@@ -0,0 +1,6 @@
+
+export interface XkcdComicProps {
+    showNav?: boolean;
+    showExplain?: boolean;
+    comicNumber?: number;
+}