roadiehq/marketing-site

A Gatsby app which generates all content on the Roadie marketing site.

This is the Gatsby generator for the Roadie marketing site. https://roadie.io

Layout and sections

The code for the actual marketing website and our docs site is in the src folder.

• Some pages use Contentful to inject content i.e. src/pages/backstage-weekly.
• The docs site top level tab content is found at src/doc/layouts

All the rest of the content is written in Markdown and rendered by Gatsby using the React components in found in src.

The content folder contains all the rest of the static marketing (roadie.io) and docs (roadie.io/docs/) content.

There are two different sections listing Backstage plugins:

• generic open source docs for all backstage plugins at content/backstage/plugins
• guides for our own customer using any plugins currently bundled with Roadie at content/docs/integrations.

The content/details section contains a mix of more specific detailed guides to a variety of Roadie Backstage features.

Getting started for local development

Export an environment variable for CONTENTFUL_ACCESS_TOKEN with the value set as the key for Content Preview API access token found in 1Password.

git clone [email protected]:RoadieHQ/marketing-site.git
cd marketing-site
cp .env.sample .env
# Edit the environment variables in the .env file. You will need to lookup the Contentful API key in 1password.
yarn install
env $(cat .env | xargs) yarn start

Open http://localhost:8000 in your browser.

Building for production

cp .env.sample .env
# Edit the environment variables in the .env file.
env $(cat .env | xargs) yarn build
yarn serve

Open http://localhost:9000 in your browser.

Viewing a preview for a PR

Go to https://app.netlify.com/sites/roadie/deploys and get the link generated for the preview deployment.

marketing-site's Issues

Heading inconsistencies in GitHub plugins for Backstage

Both plugins for GitHub have some odd naming inconsistencies. It would be great if the titles or fields were customizable or if we just fix the defaults to be better.

• GitHub Insights
  • Title includes "GitHub" which is fine
  • "Read me" feels like it should be a single word "Readme" per definition
• GitHub Pull Requests
  • Title reads "Pull requests plugin" and feels like maybe it could be "Pull Requests" or "GitHub Pull Requests" for consistency

Prometheus plugin page references PagerDuty

https://github.com/RoadieHQ/marketing-site/blame/3df95ee77346b8ec5812087a32d3d35bf71a0911/content/backstage/plugins/prometheus.md#L93

JIRA Plugin 404 error

I follow the document for backstage jira plugin and made the configurations.
https://roadie.io/backstage/plugins/jira/
I'm getting failed to fetch data, status 404: Not Found error on Components UI Page.
Also I'm getting a warning about proxy.endpoints.
proxy warn Configuring proxy endpoints in the root 'proxy' configuration is deprecated. Move this configuration to 'proxy.endpoints'
my app-config.yaml file;
proxy:
'/jira/api':
target: 'jira.intertech.com.tr'
headers:
Authorization:
$env: JIRA_TOKEN
Accept: 'application/json'
Content-Type: 'application/json'
X-Atlassian-Token: 'nocheck'
User-Agent: "MY-UA-STRING"
When I switch my configuration to use proxy.endpoints. yaml gives errors that it's expection Authorization to be string. When I use this configuration I'm getting 401 Unauthorized error. Am I missing something? Is that document still valid?

proxy:
endpoints:
'/jira/api':
target: 'https://jira.intertech.com.tr'
headers:
Authorization: 'Basic '
Accept: 'application/json'
Content-Type: 'application/json'
X-Atlassian-Token: 'nocheck'
User-Agent: "MY-UA-STRING"

csp:
connect-src: ["'self'", 'http:', 'https:']
img-src:
# "'self'" and 'data' are from the backstage default but must be set since img-src is overriden
- "'self'"
- 'data:'
# Allow your Jira instance for @roadiehq/backstage-plugin-jira
- 'https://jira.intertech.com.tr'

Excessive left right padding on plugins page

Effect can be seen on mobile.

Box sizing

Border box.
https://cssfordesigners.com/articles/things-i-wish-id-known-about-css

Attribution should be displayed on plugin index page

Attribution has recently been added to the the page for each Backstage plugin which is listed in our catalog. For example, here is the Jenkins plugin page.

Attribution should also be displayed on the page which lists all plugins.

Docs should be in sidebar on mobile

On mobile there is no way to get to the documentation from the landing page.

Attribute plugins to their respective owners

The plugin directory should give credit to the original authors of each plugin where possible. The attribution should include a link. See the official Backstage plugin marketplace as an example of how to do this.

Use Google Tag Manager

Gives remote control and allows us to remove the built in CookieConsent component.

Highlight tokens in syntax highlighted code

In documentation, we often want to display a code snippet for the user to copy paste but we need them to replace certain tokens in the snippet with their own information in order for it to work correctly. An example might be their GitHub Org name, their email address or their Roadie subdomain.

It would be nice if we could highlight these tokens so they stand out when the code is syntax highlighted.

For an example of us struggling with this problem, see this comment: #137 (comment)

This functionality may give us what we need: https://prismjs.com/plugins/highlight-keywords/

Can not make the aws lambda plugin work

Hi, I followed the instructions and did as below, but not seeing any results on backstage with lambda function.

Followed these steps:

1. cd packages/backend
2. yarn add @roadiehq/backstage-plugin-aws-auth
3. created aws.ts file and updated as below

4. Updated index file with below lines
   import aws from './plugins/aws';
   ...
   const awsEnv = useHotMemoize(module, () => createEnv('aws'));
   ...
   const apiRouter = Router();
   ...
   apiRouter.use('/aws', await aws(awsEnv));

5. Then cd packages/app

6. yarn add @roadiehq/backstage-plugin-aws-lambda

7. Updated this file, packages/app/src/components/catalog/EntityPage.tsx, as below

8. Then updated my component entry with below annotations
   annotations:
   backstage.io/techdocs-ref: dir:../../.
   aws.com/lambda-function-name: function-name
   aws.com/lambda-region: us-west-2

I didn't update the AWS keys, but expecting the front end should show something or throw an error...I am not seeing any error logs on backstage, but no results on backstage. Can you please confirm, am I missing anything ?

Missing page titles

Privacy policy and terms and conditions are missing page titles.

Unable to install Datadog plugin in local env.

Hi Team,

I am working on integrating Datadog plugin with my local Backstage server for one of the POC.

I am following the steps defined in https://roadie.io/backstage/plugins/datadog/ but I am continuing to face the below error.

warning Workspaces can only be enabled in private projects.
[4/4] 🔨 Building fresh packages...
warning Error running install script for optional dependency: "/Users/pushpank/pushpank-test/node_modules/cpu-features: Command failed.
Exit code: 1
Command: node buildcheck.js > buildcheck.gypi && node-gyp rebuild
Arguments:
Directory: /Users/pushpank/pushpank-test/node_modules/cpu-features
Output:
/Users/pushpank/pushpank-test/node_modules/buildcheck/lib/index.js:115
throw new Error('Unable to detect compiler type');
^
Error: Unable to detect compiler type
at BuildEnvironment.getKind (/Users/pushpank/pushpank-test/node_modules/buildcheck/lib/index.js:115:9)
at BuildEnvironment.tryCompile (/Users/pushpank/pushpank-test/node_modules/buildcheck/lib/index.js:537:15)
at BuildEnvironment.checkHeader (/Users/pushpank/pushpank-test/node_modules/buildcheck/lib/index.js:423:25)
at Object. (/Users/pushpank/pushpank-test/node_modules/cpu-features/buildcheck.js:16:4)
at Module._compile (node:internal/modules/cjs/loader:1159:14)
at Module._extensions..js (node:internal/modules/cjs/loader:1213:10)
at Module.load (node:internal/modules/cjs/loader:1037:32)
at Module._load (node:internal/modules/cjs/loader:878:12)
at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:81:12)
at node:internal/main/run_main_module:23:47
Node.js v18.12.1"
info This module is OPTIONAL, you can safely ignore this error

I researched a lot on the internet but nothing helped me. Here is the specification of my system.

• macOS Ventura
• M1

Any help would be highly appreciated. Thanks in advance.

Updata Datadog plugin documentation

Documentation for Datadog plugin is outdated so it needs to be updated

Write Marketing site page for all plugins

The Roadie plugin catalog should be for all Backstage plugins, not just the ones that we make.

Update instructions links not working as expected

Plugins instructions contain link to update instructions. However, those links are leading to 404 for all plugins.

Github Auth redirect uris should be under /api

AFAIK recent changes in backstage mean that authorised redirect uris should be under /api/auth rather than just /auth as before. Our blog post should mention this. It's fairly recent though so this might trip up people on the old version.

Set OG image tags

OG image tags are not displayed when people link to pages on social media.

add multiple spec definiton

is it possible to add multiple spec definiton ?

Upgrade image related dependencies

We currently have some outdated packages

» yarn outdated
yarn outdated v1.22.10
info Color legend :
 "<red>"    : Major Update backward-incompatible updates
 "<yellow>" : Minor Update backward-compatible features
 "<green>"  : Patch Update backward-compatible bug fixes
Package                                Current Wanted Latest Package Type           URL
gatsby-plugin-sharp                    2.11.1  2.14.1 2.14.1 dependencies           https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-sharp#readme
gatsby-transformer-plugin-descriptions 1.0.0   exotic exotic dependencies           ./plugins/gatsby-transformer-plugin-descriptions
gatsby-transformer-sharp               2.5.11  2.12.0 2.12.0 dependencies           https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-transformer-sharp#readme
sharp                                  0.24.0  0.24.0 0.27.1 resolutionDependencies https://github.com/lovell/sharp

When I try to upgrade any of these, I get failed builds and cryptic errors.

Generate discrete RSS feed for Newsletter (Backstage Weekly) blog posts

Hey team! 👋

Our whole team really enjoys reading the newsletter (Backstage Weekly) every week—thank you for putting that out for the community!

One bummer is that, because newsletter posts are now filtered out of the blog's RSS feed (#547), we don't have a good way to make it easy for everyone to be notified of new posts and to view them with the other feeds we subscribe to in Slack.

This feature was originally requested back in April 2021 (#177) and subsequently shipped just a couple of weeks later (#199)... But then it was removed last January (#547).

I'm wondering if y'all would be open to re-adding support for consuming the newsletter via RSS? Maybe by generating a discrete /newsletter/rss.xml file to keep them out of the main /blog/rss.xml if that is the underlying concern?

Thanks!

Small improvements

• Make an svg for the Roadie logo instead of a font
• Buy the fonts that were recommended and use them on the site.
• Move html files into content dir and load with transformer. Similar to how I'm doing with the YAML files.
• Consolidate typography-body and typography-content and just style all text by default.
• Consolidate all the Link components.

Incorrect screenshot on GitHub PRs marketing page.

This shows the Security Insights plugin.

https://roadie.io/backstage/plugins/github-pull-requests/

Documentation sidebar should collapse on mobile

The docs menu is rather long on mobile. It should collapse into a dropdown on mobile sizes. Another option might be to use the hamburger menu which is already used for main nav.

Here's how it looks now.

Prometheus Plugin Missing Documentation For Multi-Instance Proxy

I see multiple proxy instances is a feature here RoadieHQ/roadie-backstage-plugins#614

This is not documented on the official documentation for the plugin:
https://roadie.io/backstage/plugins/prometheus/?utm_source=backstage.io&utm_medium=marketplace&utm_campaign=prometheus

Seems this isn't kept up to date with the README.md here
https://github.com/RoadieHQ/roadie-backstage-plugins/tree/main/plugins/frontend/backstage-plugin-prometheus

Perhaps it would be better to just link to the README instead of having to keep these separate repos up to date? Note: I came to this page through the backstage plugin marketplace: https://backstage.io/plugins

Add newsletter RSS feed

Some readers would like an RSS feed for then newsletter.

Does Revue have this functionality?

Legal notice convenience URLs should be redirects

Convenience URLs are created to point to the latest version of each type of legal notice that we have on our website.

For example, https://roadie.io/legal-notices/cookies-policy/ will point to the latest version of the Cookies Policy present. At the time of writing this is https://roadie.io/legal-notices/cookies-policy/v2/.

These are duplicate pages when really they should be 301 redirects.

Programatic redirects can be created with the createRedirect function in Gatsby. Docs

Sonar plugin issue

Hey there,

Got.a question. Sonarqube plugin doc is not super consistent between backstage repo and here.
Details about configuring the proxy is not displayed in here https://github.com/backstage/backstage/blob/master/plugins/sonarqube-backend/README.md

and the conf between app-config.yaml are not consitent :
in https://roadie.io/backstage/plugins/sonarqube/

proxy:
'/sonarqube':
  target: https://your.sonarqube.instance.com/api
  allowedMethods: ['GET']
  auth: "${SONARQUBE_TOKEN}:"

**sonarQube**:  <----- with capital Q
  baseUrl: https://your.sonarqube.instance.com

on backstage repo :

sonarqube:
  baseUrl: https://sonarqube.example.com
  apiKey: 123456789abcdef0123456789abcedf012

Is doc on Roadie's website the one to follow to make the plugin work? (currently failing tremendously on my local, issue probably located between my chair and my laptop, but anyway 😄 )
Cheers,

Update sub-processors

Caused by the table.

https://roadie.io/legal-notices/sub-processors/

Also, remove HubSpot which is off-platform.

Nuanced way to do remark box-shadow

The gatsby remark images plugin has been configured to add a box-shadow to all images in the body of blog posts and other markdown content. This looked great in all situations until I was given some images to insert into a case study which already had a box shadow on them. A box shadow around a box shadow looks terrible.

Because I had a deadline to get the case study published, I did the simplest thing I could think to do and removed the built in box-shadow from all case studies. 71e2007

We should have a default which adds the box-shadow to all images, but which can be easily removed from specific images on a case by case basis.

Docs should be searchable

Potentially blog posts too

Guide: https://www.gatsbyjs.com/docs/adding-search-with-algolia/

Links should use active styles

Links, such as those in the sidebar, could probably take advantage of Gatsby's built in styling functions. They are currently styled with custom code. See src/components/doc/SidebarItem.js for example.

Fix JIRA description

Hi,

There is some typo in the jira plugin page

1. Typo in the import statement

Missing a coma after JiraCard

2. Typo in the X-Atlassian-Token header

The value should be nocheck without a dash, per this anwser: https://community.atlassian.com/t5/Answers-Developer-Questions/Getting-past-XSRF-check-failures-when-attempting-to-post-to-Rest/qaq-p/522137#M59793

3. csp policy

To access images from Jira, the backstage csp should be changes to allow *.atlassian.net (or the jira instance url) in backend.csp.img-src

---

Would you accept a PR to fix theses in content/plugins/descriptions/jira.yaml ?

Replacing the Spotify logo with the Backstage logo

Markdown tables causing horizontal scroll on mobile

Pages with wide tables in them, such as the getting started guide, have horizontal scroll for the entire page which makes for an awkward reading experience.

Instead, the table should scroll horizontally on its own.

We can't simply wrap markdown tables in a div like this SO answer suggests because they fail to be parsed by remark if we do this.

Here's how the problem looks:

Intermittent build failures

Builds are repeatedly failing with an intermittent issue:

  The landing page
    1) has a form which can be submitted to get a demo
    ✓ displays an error when form submission fails (1101ms)


  1 passing (2s)
  1 failing

  1) The landing page
       has a form which can be submitted to get a demo:
     CypressError: `cy.type()` failed because it targeted a disabled element.

The element typed into was:

  > <input type="email" name="email" id="get-demo-email-input" aria-label="Work email address" placeholder="Work email" class="input-0-2-54" value="">

Ensure the element does not have an attribute named `disabled` before typing into it.

https://on.cypress.io/type
      at http://localhost:8001/__cypress/runner/cypress_runner.js:154420:27
      at tryCatcher (http://localhost:8001/__cypress/runner/cypress_runner.js:10609:23)
      at Promise._settlePromiseFromHandler (http://localhost:8001/__cypress/runner/cypress_runner.js:8544:31)
      at Promise._settlePromise (http://localhost:8001/__cypress/runner/cypress_runner.js:8601:18)
      at Promise._settlePromise0 (http://localhost:8001/__cypress/runner/cypress_runner.js:8646:10)
      at Promise._settlePromises (http://localhost:8001/__cypress/runner/cypress_runner.js:8726:18)
      at _drainQueueStep (http://localhost:8001/__cypress/runner/cypress_runner.js:5316:12)
      at _drainQueue (http://localhost:8001/__cypress/runner/cypress_runner.js:5309:9)
      at Async.../../node_modules/bluebird/js/release/async.js.Async._drainQueues (http://localhost:8001/__cypress/runner/cypress_runner.js:5325:5)
      at Async.drainQueues (http://localhost:8001/__cypress/runner/cypress_runner.js:5195:14)
  From Your Spec Code:
      at Context.eval (http://localhost:8001/__cypress/tests?p=cypress/integration/landing_page_spec.js:106:37)

Link to Roadie discord somewhwre

Link to our discord channel from the marketing site Learn dropdown.

Add static image URLs for backstage.io/plugins to use

We need to create a new directory of static logos on our Gatsby site. Once we have these, we should contribute a change to https://backstage.io/plugins to make it link to these static image URLs.

Then we can revert this reversion. #55

backstage.io/plugins is linking images directly to images hosted on roadie.io. When we tried to update our plugin directory we broke some images on backstage.io.

Update privacy policy

Hubspot and Zapier should be mentioned.