feat: add simple icons plugin

dweber019 · Jul 29, 2024 · 9ec3148 · 9ec3148
1 parent 01a3e1f
commit 9ec3148
Show file tree

Hide file tree

Showing 19 changed files with 273 additions and 0 deletions.
diff --git a/.changeset/cold-planets-invite.md b/.changeset/cold-planets-invite.md
@@ -0,0 +1,5 @@
+---
+'@dweber019/backstage-plugin-simple-icons': patch
+---
+
+Initial releae of simple icons plugin.
diff --git a/README.md b/README.md
@@ -8,6 +8,7 @@
 - [Tips](plugins/tips)
 - [Accentuate](plugins/accentuate)
 - [Relations](plugins/relations)
+- [Simple Icons](plugins/simple-icons)
 
 ## Update backstage deps
 
@@ -19,3 +20,4 @@ To update the plugin with the latest backstage dependencies run `yarn backstage-
 This library is under the [MIT](LICENSE) license.
 
 The plugin [api-docs-module-wsdl-backend](plugins/api-docs-module-wsdl-backend) has a special license.
+The plugin [simple-icons](plugins/simple-icons) has a special license.
diff --git a/app-config.yaml b/app-config.yaml
@@ -77,6 +77,8 @@ catalog:
       target: ../entities/wsdl-api-example-big.yaml
     - type: file
       target: ../entities/end-of-life-resource-examples.yaml
+    - type: file
+      target: ../entities/simple-icons.yaml
 
     - type: file
       target: ../../plugins/api-docs-spectral-linter/dev/asyncapi-example-api.yaml

diff --git a/packages/app/package.json b/packages/app/package.json
@@ -40,6 +40,7 @@
     "@dweber019/backstage-plugin-api-docs-spectral-linter": "^0.4.2",
     "@dweber019/backstage-plugin-endoflife": "^0.0.10",
     "@dweber019/backstage-plugin-relations": "0.0.6",
+    "@dweber019/backstage-plugin-simple-icons": "^0.0.0",
     "@dweber019/backstage-plugin-tips": "^0.0.14",
     "@material-ui/core": "^4.12.2",
     "@material-ui/icons": "^4.9.1",

diff --git a/packages/app/src/App.tsx b/packages/app/src/App.tsx
@@ -39,6 +39,7 @@ import { apis } from './apis';
 import { entityPage } from './components/catalog/EntityPage';
 import { searchPage } from './components/search/SearchPage';
 import { Root } from './components/Root';
+import { simpleIconsColor } from '@dweber019/backstage-plugin-simple-icons';
 
 import {
   AlertDisplay,
@@ -74,6 +75,7 @@ const app = createApp({
   components: {
     SignInPage: props => <SignInPage {...props} auto providers={['guest']} />,
   },
+  icons: simpleIconsColor,
 });
 
 const routes = (

diff --git a/packages/backend/package.json b/packages/backend/package.json
@@ -35,6 +35,7 @@
     "@backstage/plugin-auth-backend-module-guest-provider": "^0.1.8",
     "@backstage/plugin-auth-node": "^0.4.17",
     "@backstage/plugin-catalog-backend": "^1.24.0",
+    "@backstage/plugin-catalog-backend-module-logs": "^0.0.1",
     "@backstage/plugin-catalog-backend-module-scaffolder-entity-model": "^0.1.20",
     "@backstage/plugin-permission-backend": "^0.5.46",
     "@backstage/plugin-permission-backend-module-allow-all-policy": "^0.1.19",

diff --git a/packages/backend/src/index.ts b/packages/backend/src/index.ts
@@ -16,6 +16,7 @@ backend.add(import('@backstage/plugin-auth-backend-module-guest-provider'));
 // See https://backstage.io/docs/auth/guest/provider
 // catalog plugin
 backend.add(import('@backstage/plugin-catalog-backend/alpha'));
+backend.add(import('@backstage/plugin-catalog-backend-module-logs'));
 backend.add(
   import('@backstage/plugin-catalog-backend-module-scaffolder-entity-model'),
 );

diff --git a/packages/entities/simple-icons.yaml b/packages/entities/simple-icons.yaml
@@ -0,0 +1,34 @@
+---
+apiVersion: backstage.io/v1alpha1
+kind: Component
+metadata:
+  name: simple-icons
+  links:
+    - title: built in github
+      url: https://google.ch
+      icon: github
+    - title: Test fallback
+      url: https://google.ch
+      icon: test
+    - title: Prometheus
+      url: https://google.ch
+      icon: prometheus
+    - title: Grafana
+      url: https://google.ch
+      icon: grafana
+    - title: Google BigQuery
+      url: https://google.ch
+      icon: googlebigquery
+    - title: 1.1.1.1
+      url: https://google.ch
+      icon: 1dot1dot1dot1
+    - title: Github copilot
+      url: https://google.ch
+      icon: githubcopilot
+    - title: Backstage
+      url: https://google.ch
+      icon: backstage
+spec:
+  type: service
+  lifecycle: experimental
+  owner: dweber019
diff --git a/plugins/simple-icons/.eslintrc.js b/plugins/simple-icons/.eslintrc.js
@@ -0,0 +1 @@
+module.exports = require('@backstage/cli/config/eslint-factory')(__dirname);
diff --git a/plugins/simple-icons/README.md b/plugins/simple-icons/README.md
@@ -0,0 +1,94 @@
+# Simple Icons Plugin
+
+Welcome to the [Simple Icons](https://simpleicons.org/) plugin!
+
+This plugin will add more icons to your app, which can be used in links for example.
+
+![color](https://raw.githubusercontent.com/dweber019/backstage-plugins/main/plugins/simple-icons/docs/color.png)
+![no color light](https://raw.githubusercontent.com/dweber019/backstage-plugins/main/plugins/simple-icons/docs/no-color-light.png)
+![no color dark](https://raw.githubusercontent.com/dweber019/backstage-plugins/main/plugins/simple-icons/docs/no-color-dark.png)
+
+## Usage
+
+After setup you can use icons like this
+
+```yaml
+---
+apiVersion: backstage.io/v1alpha1
+kind: Component
+metadata:
+  name: simple-icons
+  links:
+    - title: Prometheus
+      url: https://google.ch
+      icon: prometheus
+    - title: Grafana
+      url: https://google.ch
+      icon: grafana
+    - title: Google BigQuery
+      url: https://google.ch
+      icon: googlebigquery
+    - title: 1.1.1.1
+      url: https://google.ch
+      icon: 1dot1dot1dot1
+    - title: Github copilot
+      url: https://google.ch
+      icon: githubcopilot
+    - title: Backstage
+      url: https://google.ch
+      icon: backstage
+```
+
+The name of the icon can be copied from https://simpleicons.org/ by hovering over the icon name and use the copy function.
+
+## Setup
+
+1. Install this plugin:
+
+```bash
+# From your Backstage root directory
+yarn --cwd packages/app add @dweber019/backstage-plugin-simple-icons
+```
+
+2. Add the icons to your app
+
+```tsx
+// packages/app/src/App.tsx
+
+import { simpleIconsColor } from '@dweber019/backstage-plugin-simple-icons';
+
+const app = createApp({
+  apis,
+  bindRoutes({ bind }) {
+    ...
+  },
+  ...
+  icons: simpleIconsColor,
+});
+```
+
+> You can use `import { simpleIcons } from '@dweber019/backstage-plugin-simple-icons';` for black and white icons.
+
+If you want to provide just a subset of icons you can do so by using
+
+```tsx
+// packages/app/src/App.tsx
+
+import { siNodedotjs } from 'simple-icons';
+import { createIcon } from '@dweber019/backstage-plugin-simple-icons';
+
+const app = createApp({
+  apis,
+  bindRoutes({ bind }) {
+    ...
+  },
+  ...
+  icons: {
+    nodedotjs: createIcon(siNodedotjs),
+  },
+});
+```
+
+## Licence
+
+Please read the [legal disclaimer](https://github.com/simple-icons/simple-icons/blob/develop/DISCLAIMER.md) of [Simple Icons](https://simpleicons.org/).
diff --git a/plugins/simple-icons/docs/color.png b/plugins/simple-icons/docs/color.png
diff --git a/plugins/simple-icons/docs/no-color-dark.png b/plugins/simple-icons/docs/no-color-dark.png
diff --git a/plugins/simple-icons/docs/no-color-light.png b/plugins/simple-icons/docs/no-color-light.png
diff --git a/plugins/simple-icons/docs/pluginIcon.png b/plugins/simple-icons/docs/pluginIcon.png
diff --git a/plugins/simple-icons/package.json b/plugins/simple-icons/package.json
@@ -0,0 +1,56 @@
+{
+  "name": "@dweber019/backstage-plugin-simple-icons",
+  "homepage": "https://github.com/dweber019/backstage-plugins/tree/main/plugins/simple-icons",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/dweber019/backstage-plugins.git",
+    "directory": "plugins/simple-icons"
+  },
+  "license": "MIT",
+  "version": "0.0.0",
+  "main": "src/index.ts",
+  "types": "src/index.ts",
+  "publishConfig": {
+    "access": "public",
+    "main": "dist/index.esm.js",
+    "types": "dist/index.d.ts"
+  },
+  "backstage": {
+    "role": "web-library",
+    "pluginId": "simple-icons",
+    "pluginPackages": [
+      "@dweber019/backstage-plugin-simple-icons"
+    ]
+  },
+  "sideEffects": false,
+  "scripts": {
+    "start": "backstage-cli package start",
+    "build": "backstage-cli package build",
+    "lint": "backstage-cli package lint",
+    "test": "backstage-cli package test",
+    "clean": "backstage-cli package clean",
+    "prepack": "backstage-cli package prepack",
+    "postpack": "backstage-cli package postpack"
+  },
+  "dependencies": {
+    "@backstage/app-defaults": "^1.5.8",
+    "@material-ui/core": "^4.12.2",
+    "simple-icons": "^13.3.0"
+  },
+  "peerDependencies": {
+    "react": "^16.13.1 || ^17.0.0 || ^18.0.0"
+  },
+  "devDependencies": {
+    "@backstage/cli": "^0.26.11",
+    "@backstage/dev-utils": "^1.0.35",
+    "@backstage/test-utils": "^1.5.8",
+    "@testing-library/jest-dom": "^6.0.0",
+    "@testing-library/react": "^14.0.0",
+    "@testing-library/user-event": "^14.0.0",
+    "@types/node": "*",
+    "msw": "^1.0.0"
+  },
+  "files": [
+    "dist"
+  ]
+}
diff --git a/plugins/simple-icons/src/index.ts b/plugins/simple-icons/src/index.ts
@@ -0,0 +1 @@
+export * from './simpleIcons';
diff --git a/plugins/simple-icons/src/setupTests.ts b/plugins/simple-icons/src/setupTests.ts
@@ -0,0 +1 @@
+import '@testing-library/jest-dom';
diff --git a/plugins/simple-icons/src/simpleIcons.tsx b/plugins/simple-icons/src/simpleIcons.tsx
@@ -0,0 +1,32 @@
+import { SvgIcon, SvgIconProps } from '@material-ui/core';
+import type { SimpleIcon } from 'simple-icons';
+import { OptionalAppOptions } from '@backstage/app-defaults';
+import * as icons from 'simple-icons';
+import React from 'react';
+
+export const createIcon = (icon: SimpleIcon, color = true, props?: SvgIconProps) => {
+  const SimpleIcon: React.FC<SvgIconProps> = (iconProps) => {
+    return (
+      <SvgIcon {...iconProps}>
+        <path d={icon.path} />
+      </SvgIcon>
+    );
+  };
+  let defaultProps = { titleAccess: icon.title, ...props };
+  if (color) {
+    defaultProps = { ...defaultProps, style: { color: `#${icon.hex}` } }
+  }
+  return () => {return <SimpleIcon {...defaultProps} />};
+};
+
+export const simpleIcons: OptionalAppOptions['icons'] =
+  Object.keys(icons).map(key => {
+    const icon = (icons as any)[key] as SimpleIcon;
+    return { [icon.slug]: createIcon(icon, false), }
+  }).reduce((previous, current) => ({ ...previous, ...current }));
+
+export const simpleIconsColor: OptionalAppOptions['icons'] =
+  Object.keys(icons).map(key => {
+    const icon = (icons as any)[key] as SimpleIcon;
+    return { [icon.slug]: createIcon(icon), }
+  }).reduce((previous, current) => ({ ...previous, ...current }));
diff --git a/yarn.lock b/yarn.lock
@@ -4082,6 +4082,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@backstage/plugin-catalog-backend-module-logs@npm:^0.0.1":
+  version: 0.0.1
+  resolution: "@backstage/plugin-catalog-backend-module-logs@npm:0.0.1"
+  dependencies:
+    "@backstage/backend-plugin-api": ^0.7.0
+    "@backstage/plugin-catalog-backend": ^1.24.0
+    "@backstage/plugin-events-node": ^0.3.8
+  checksum: 8fd4525c92193c362c5905ca367489ca90bf34c7df6cb8735f92f911b4a48a1505a2f531f98c02359fa0335e3d425eda3c8ee83ac6ebc5e1c5729e1800febbbb
+  languageName: node
+  linkType: hard
+
 "@backstage/plugin-catalog-backend-module-scaffolder-entity-model@npm:^0.1.20":
   version: 0.1.20
   resolution: "@backstage/plugin-catalog-backend-module-scaffolder-entity-model@npm:0.1.20"
@@ -5909,6 +5920,26 @@ __metadata:
   languageName: unknown
   linkType: soft
 
+"@dweber019/backstage-plugin-simple-icons@^0.0.0, @dweber019/backstage-plugin-simple-icons@workspace:plugins/simple-icons":
+  version: 0.0.0-use.local
+  resolution: "@dweber019/backstage-plugin-simple-icons@workspace:plugins/simple-icons"
+  dependencies:
+    "@backstage/app-defaults": ^1.5.8
+    "@backstage/cli": ^0.26.11
+    "@backstage/dev-utils": ^1.0.35
+    "@backstage/test-utils": ^1.5.8
+    "@material-ui/core": ^4.12.2
+    "@testing-library/jest-dom": ^6.0.0
+    "@testing-library/react": ^14.0.0
+    "@testing-library/user-event": ^14.0.0
+    "@types/node": "*"
+    msw: ^1.0.0
+    simple-icons: ^13.3.0
+  peerDependencies:
+    react: ^16.13.1 || ^17.0.0 || ^18.0.0
+  languageName: unknown
+  linkType: soft
+
 "@dweber019/backstage-plugin-tips@^0.0.14, @dweber019/backstage-plugin-tips@workspace:plugins/tips":
   version: 0.0.0-use.local
   resolution: "@dweber019/backstage-plugin-tips@workspace:plugins/tips"
@@ -14214,6 +14245,7 @@ __metadata:
     "@dweber019/backstage-plugin-api-docs-spectral-linter": ^0.4.2
     "@dweber019/backstage-plugin-endoflife": ^0.0.10
     "@dweber019/backstage-plugin-relations": 0.0.6
+    "@dweber019/backstage-plugin-simple-icons": ^0.0.0
     "@dweber019/backstage-plugin-tips": ^0.0.14
     "@material-ui/core": ^4.12.2
     "@material-ui/icons": ^4.9.1
@@ -14898,6 +14930,7 @@ __metadata:
     "@backstage/plugin-auth-backend-module-guest-provider": ^0.1.8
     "@backstage/plugin-auth-node": ^0.4.17
     "@backstage/plugin-catalog-backend": ^1.24.0
+    "@backstage/plugin-catalog-backend-module-logs": ^0.0.1
     "@backstage/plugin-catalog-backend-module-scaffolder-entity-model": ^0.1.20
     "@backstage/plugin-permission-backend": ^0.5.46
     "@backstage/plugin-permission-backend-module-allow-all-policy": ^0.1.19
@@ -31315,6 +31348,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"simple-icons@npm:^13.3.0":
+  version: 13.3.0
+  resolution: "simple-icons@npm:13.3.0"
+  checksum: 0a2f1ef4d0f51a6c31fd8ce4c5ad3900bde56e69567f8e820e93055eb2ea665cc94aa521e1f7fa38a855ae7cba01afbdc501b85a19ec7d5584b1b2a0d7394964
+  languageName: node
+  linkType: hard
+
 "simple-swizzle@npm:^0.2.2":
   version: 0.2.2
   resolution: "simple-swizzle@npm:0.2.2"