microsite-next: Add experimental microsite with CI workflow

Signed-off-by: Johan Haals <johan.haals@gmail.com>
2022-12-12 15:32:06 +01:00
parent a48cfaa653
commit 8fd7c81594
15 changed files with 11055 additions and 9 deletions
@@ -7,5 +7,6 @@
 **/.git/**
 **/public/**
 **/microsite/**
+**/microsite-next/**
 **/templates/**
 **/sample-templates/**
@@ -411,3 +411,6 @@ zoomable
 zsh
 Lainfiesta
 allowlisted
+Dominik
+Henneke
+Kuang
@@ -0,0 +1,44 @@
+name: Verify Microsite Next
+on:
+  pull_request:
+    paths:
+      - '.github/workflows/verify_microsite-next.yml'
+      - 'microsite-next/**'
+      - 'docs/**'
+
+jobs:
+  build-microsite:
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [16.x]
+
+    env:
+      CI: true
+      NODE_OPTIONS: --max-old-space-size=4096
+
+    steps:
+      - uses: actions/checkout@v3
+
+      - name: use node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v3
+        with:
+          node-version: ${{ matrix.node-version }}
+
+        # Skip caching of microsite dependencies, it keeps the global cache size
+        # smaller, which make Windows builds a lot faster for the rest of the project.
+      - name: yarn install
+        run: yarn install --immutable
+        working-directory: microsite-next
+
+      - name: verify yarn dependency duplicates
+        run: node scripts/verify-lockfile-duplicates.js
+
+      - name: prettier
+        run: yarn prettier:check
+        working-directory: microsite-next
+
+      - name: build microsite-next
+        run: yarn build
+        working-directory: microsite-next
@@ -0,0 +1,5 @@
+
+# Build output
+build
+i18n
+.docusaurus
@@ -0,0 +1 @@
+.docusaurus
@@ -0,0 +1,8 @@
+---
+id: init
+title: Init
+# prettier-ignore
+description: This will be replaced by the docs
+---
+
+TBD
@@ -0,0 +1,131 @@
+/*
+ * Copyright 2022 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+module.exports = {
+  title: 'Backstage Software Catalog and Developer Platform',
+  tagline: 'An open platform for building developer portals',
+  url: 'https://backstage.io',
+  baseUrl: '/',
+  organizationName: 'Spotify',
+  projectName: 'backstage',
+  scripts: [
+    'https://buttons.github.io/buttons.js',
+    'https://unpkg.com/medium-zoom@1.0.6/dist/medium-zoom.min.js',
+    '/js/medium-zoom.js',
+    '/js/dismissable-banner.js',
+    '/js/scroll-nav-to-view-in-docs.js',
+  ],
+  stylesheets: [
+    'https://fonts.googleapis.com/css?family=IBM+Plex+Mono:500,700&display=swap',
+  ],
+  favicon: 'img/favicon.ico',
+  customFields: {
+    fossWebsite: 'https://spotify.github.io/',
+    repoUrl: 'https://github.com/backstage/backstage',
+  },
+  onBrokenLinks: 'log',
+  onBrokenMarkdownLinks: 'log',
+  presets: [
+    [
+      '@docusaurus/preset-classic',
+      {
+        docs: {
+          showLastUpdateAuthor: true,
+          showLastUpdateTime: true,
+          editUrl: 'https://github.com/backstage/backstage/edit/master/docs/',
+          path: 'docs',
+          sidebarPath: 'sidebars.json',
+        },
+        blog: {
+          path: '../microsite/blog',
+        },
+        theme: {
+          customCss: 'src/css/customTheme.css',
+        },
+        gtag: {
+          trackingID: 'G-KSEVGGNCJW',
+        },
+      },
+    ],
+  ],
+  plugins: [],
+  themeConfig: {
+    navbar: {
+      title: 'Backstage Software Catalog and Developer Platform',
+      items: [
+        {
+          href: 'https://github.com/backstage/backstage',
+          label: 'GitHub',
+          position: 'left',
+        },
+        {
+          to: 'docs/overview/what-is-backstage',
+          label: 'Docs',
+          position: 'left',
+        },
+        {
+          to: '/plugins',
+          label: 'Plugins',
+          position: 'left',
+        },
+        {
+          to: '/blog',
+          label: 'Blog',
+          position: 'left',
+        },
+        {
+          to: 'docs/releases/v1.8.0',
+          label: 'Releases',
+          position: 'left',
+        },
+        {
+          to: '/demos',
+          label: 'Demos',
+          position: 'left',
+        },
+        {
+          to: '/community',
+          label: 'Community',
+          position: 'left',
+        },
+      ],
+    },
+    image: 'img/sharing-opengraph.png',
+    footer: {
+      links: [
+        {
+          title: 'Community',
+          items: [
+            {
+              label: 'Twitter',
+              to: 'https://twitter.com/SpotifyEng',
+            },
+          ],
+        },
+      ],
+      copyright:
+        'Copyright © 2022 Backstage Project Authors. All rights reserved. The Linux Foundation has registered trademarks and uses trademarks. For a list of trademarks of The Linux Foundation, please see our Trademark Usage page: https://www.linuxfoundation.org/trademark-usage',
+      logo: {
+        src: 'img/android-chrome-192x192.png',
+      },
+    },
+    algolia: {
+      appId: 'AZYC4ZFNTN',
+      apiKey: '7dbd2089b0d445ee0d87db71abfc794f',
+      indexName: 'backstage',
+      searchParameters: {},
+    },
+  },
+};
@@ -0,0 +1,33 @@
+{
+  "version": "0.0.0",
+  "name": "backstage-microsite",
+  "license": "Apache-2.0",
+  "private": true,
+  "scripts": {
+    "examples": "docusaurus-examples",
+    "start": "docusaurus start",
+    "build": "docusaurus build",
+    "prettier:check": "prettier --check .",
+    "publish-gh-pages": "docusaurus-publish",
+    "write-translations": "docusaurus-write-translations",
+    "version": "docusaurus-version",
+    "rename-version": "docusaurus-rename-version",
+    "verify:sidebars": "node ./scripts/verify-sidebars",
+    "swizzle": "docusaurus swizzle",
+    "deploy": "docusaurus deploy",
+    "docusaurus": "docusaurus"
+  },
+  "devDependencies": {
+    "@spotify/prettier-config": "^14.0.0",
+    "js-yaml": "^4.1.0",
+    "prettier": "^2.6.2"
+  },
+  "prettier": "@spotify/prettier-config",
+  "dependencies": {
+    "@docusaurus/core": "2.2.0",
+    "@docusaurus/preset-classic": "2.2.0",
+    "clsx": "^1.1.1",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2"
+  }
+}
@@ -0,0 +1 @@
+{}
@@ -0,0 +1,9 @@
+:root {
+  --ifm-color-primary-lightest: #66d2bf;
+  --ifm-color-primary-lighter: #4acab3;
+  --ifm-color-primary-light: #40c8af;
+  --ifm-color-primary: #36baa2;
+  --ifm-color-primary-dark: #31a792;
+  --ifm-color-primary-darker: #2e9e8a;
+  --ifm-color-primary-darkest: #268271;
+}
@@ -0,0 +1,11 @@
+import Layout from '@theme/Layout';
+import React from 'react';
+
+function Index() {
+  return (
+    <Layout>
+      <h1>HELLO</h1>
+    </Layout>
+  );
+}
+export default Index;
@@ -0,0 +1 @@
+../microsite/static
@@ -23,12 +23,12 @@ Spotify’s developers were facing three big challenges on a daily basis:
 - They needed to keep an eye on what squads around them might be building to ensure they could reuse systems when they needed to solve similar problems in the future.

 In short, Spotify developers needed to continue building industry leading features at breakneck speed, while simultaneously maintaining a mental model for all the software at Spotify (oh, and help every new joiner develop that mental model as well!).
-<br>
+<br/>

 ## Three jobs: Create, manage, explore

 Around the same time, the [jobs to be done](https://hbr.org/2016/09/know-your-customers-jobs-to-be-done) framework was becoming popular and luckily, a few Spotifiers helped guide the vision for a _sense-making tool for developers_ toward using it. After user research and many failed attempts, we landed on three jobs Spotify developers needed to do consistently:
-<br>
+<br/>

 - **Create**: Spotify developers want to delight their customers with incredible features. They create new software to do that.
 - **Manage**: Spotify developers are proud of their work and treat their software and data like products. That requires maintaining all the software they own on an ongoing basis.
@@ -73,7 +73,7 @@ Within today’s complex development environments, there are barriers both big a
 After talking with companies who have already adopted Backstage, we’ve seen a few common strategies for getting started. The different strategies are based on the size of your engineering org (which often also corresponds with how fast you’re growing).

 ![200 engineers](assets/21-05-20/200-engineers_v.2.png)
-<br>
+<br/>

 ### My org has ~200 engineers (and is growing fast)

@@ -21,9 +21,7 @@ When we set out to define what beta looked like, we combed through GitHub issues

 TechDocs can be transformational once fully up and running (update your code and your docs with the same pull request!). But for first-time users and especially those unfamiliar with the MkDocs ecosystem upon which TechDocs is built, there are often many small, obtuse hurdles that can get in the way of success. Leading up to the beta release, we worked to surface and improve relevant errors and other details during the documentation generation process. Better still, all of this detail is now provided to users _in real-time_, as docs are generated and refreshed.

-<!-- vale off -->
 <p>🙌 Shout out to <a href="https://github.com/dhenneke">Dominik Henneke</a> for implementing the interactive experience.</p>
-<!-- vale on -->

 ## Custom homepages: Make TechDocs yours

@@ -31,9 +29,7 @@ TechDocs can be transformational once fully up and running (update your code and

 We strive to make it so that you can mold Backstage into the shape that best fits your organization. With this beta release, just as you can with the Catalog entities and [Search](https://backstage.io/blog/2021/06/24/announcing-backstage-search-platform#composable-search-page-experiences), you can now customize and compose your own TechDocs homepage. Use it to level up the front page of your Backstage documentation by highlighting golden documentation at your company, or use the new and improved (and Catalog-inspired) experience. Read more about [how to customize the TechDocs homepage](https://backstage.io/docs/features/techdocs/how-to-guides#how-to-customize-the-techdocs-home-page).

-<!-- vale off -->
 <p>🙏 Thanks to <a href="https://github.com/kuangp">Phil Kuang</a> for the improved default TechDocs home experience.</p>
-<!-- vale on -->

 ## Simpler YAML annotations: What's in a ref?

@@ -43,9 +39,7 @@ We often forget that in order to enable TechDocs on a Catalog entity, documentat

 In the beta, we've simplified this annotation dramatically for documentation authors, aligning its value with TechDocs' docs-like-code philosophy itself. In the vast majority of cases, its value will simply be `dir:.` — which means this catalog entity contains documentation and the mkdocs.yml file describing this documentation lives in the current directory. We continue to support edge cases for [other techdocs-ref annotation values](https://backstage.io/docs/features/techdocs/how-to-guides#how-to-understand-techdocs-ref-annotation-values), as well.

-<!-- vale off -->
 <p>👏 Another round of applause for Dominik for driving this improvement through.</p>
-<!-- vale on -->

 ## Everything neat and tidy