Backstage Dev Quotes Plugin

Dev Quotes is a small Backstage plugin that shows a random programming quote inside your portal. It adds a simple card to the homepage or any page. The quotes are developer themed and safe for work. The goal is to add a light human touch to a space that is often all metrics and alerts.

The plugin is a front end component with a small footprint. It reads from a curated list of quotes bundled with the code. It renders fast and stays out of the way. You can drop it on service pages to give each entity view a little personality. You can keep it on the homepage to break up dense dashboards.

Common use cases include onboarding where a friendly quote helps new engineers feel at home. Sprint reviews where a short line can start a conversation. Team dashboards where a rotating quote keeps things fresh during standups. Demo days where a quote can set the tone before you click through graphs.

If you run a self hosted Backstage instance and want a low effort quality of life boost, this is a good fit. It does one thing well. It is easy to live with. It makes the portal feel more like a place your team owns rather than just another tool.

Installation Instructions

These instructions apply to self-hosted Backstage only.

Install the package

Copy

yarn --cwd packages/app add @parsifal-m/plugin-dev-quotes-homepage

Add the DevQuote card to the homepage

Place the card into your homepage component.

Add the import in packages/app/src/components/home/HomePage.tsx

Copy

// packages/app/src/components/home/HomePage.tsx
import Grid from '@mui/material/Grid';
import { DevQuote } from '@parsifal-m/plugin-dev-quotes-homepage';

Add the card inside your existing Grid. Put it with the other homepage cards.

Copy

// inside your HomePage component render
<Grid container spacing={3} alignItems="stretch">
  {/* other cards */}
  <Grid item md={4} xs={12}>
    <DevQuote />
  </Grid>
  {/* other cards */}
</Grid>

You can adjust the Grid sizes to fit your layout.

Add the DevQuote card to an entity page

You can also show the card on catalog entity pages.

Add the import in packages/app/src/components/catalog/EntityPage.tsx

Copy

// packages/app/src/components/catalog/EntityPage.tsx
import Grid from '@mui/material/Grid';
import { DevQuote } from '@parsifal-m/plugin-dev-quotes-homepage';

Add the card to the overview content. Put it with the other entity cards.

Copy

// inside EntityPage.tsx
const overviewContent = (
  <Grid container spacing={3} alignItems="stretch">
    {/* existing cards */}
    <Grid item md={4} xs={12}>
      <DevQuote />
    </Grid>
    {/* existing cards */}
  </Grid>
);

Changelog

This changelog is produced from commits made to the Dev Quotes plugin since a year ago, and based on the code located here. It may not contain information about all commits. Releases and version bumps are intentionally omitted. This changelog is generated by AI.

Documentation

Update README yarn command to avoid cwd option ambiguity error #69 merged 9 days ago

Maintenance

Cut a release #67 merged 4 months ago
Bump versions #66 merged 4 months ago
Update to the latest Backstage packages #64 merged 11 months ago

Set up Backstage in minutes with Roadie

Focus on using Backstage, rather than building and maintaining it.

Get a demo