diff --git a/microsite/core/Components.js b/microsite/core/Components.js index 4811b49291..7453d21e3e 100644 --- a/microsite/core/Components.js +++ b/microsite/core/Components.js @@ -53,14 +53,23 @@ Block.QuoteContainer = simpleComponent('div', 'Block__QuoteContainer'); Block.Quote = simpleComponent('p', 'Block__Quote'); Block.Divider = simpleComponent('p', 'Block__Divider', ['quote']); Block.MediaFrame = simpleComponent('div', 'Block__MediaFrame'); -Block.Graphics = ({ padding, children }) => { +Block.Graphics = ({ padding, children, innerPadding, width }) => { const style = {}; + const innerStyle = {}; if (padding) { style.padding = `${padding}% 0`; } + + if (width) { + style.width = width; + } + + if (innerPadding) { + innerStyle.padding = `${innerPadding}% 0`; + } return (
-
+
); }; diff --git a/microsite/data/plugins/backstage-search-platform.yaml b/microsite/data/plugins/backstage-search-platform.yaml new file mode 100644 index 0000000000..18bbbd1fd1 --- /dev/null +++ b/microsite/data/plugins/backstage-search-platform.yaml @@ -0,0 +1,10 @@ +--- +title: Backstage Search +author: Spotify +authorUrl: https://github.com/spotify +category: Core Feature +description: A composable and extensible search platform built to fit your organization’s needs and find information quickly. +documentation: https://backstage.io/docs/features/software-catalog/software-catalog-overview +iconUrl: img/backstage-search-platform.svg +npmPackageName: '@backstage/plugin-search' +order: 5 diff --git a/microsite/pages/en/index.js b/microsite/pages/en/index.js index 520157163a..8e963c2453 100644 --- a/microsite/pages/en/index.js +++ b/microsite/pages/en/index.js @@ -88,7 +88,7 @@ class Index extends React.Component { /> The Speed Paradox - At Spotify, we’ve always believed in the speed and ingenuity + At Spotify, we've always believed in the speed and ingenuity that comes from having autonomous development teams. But as we learned firsthand, the faster you grow, the more fragmented and complex your software ecosystem becomes. And then @@ -238,7 +238,7 @@ class Index extends React.Component { Using templates, engineers can spin up a new microservice with - your organization’s best practices built-in, right from the + your organization's best practices built-in, right from the start @@ -350,7 +350,7 @@ class Index extends React.Component { Easy to maintain - Updating code? Update your documentation while you’re there — + Updating code? Update your documentation while you're there — with docs and code in the same place, it becomes a natural part of your workstream @@ -394,6 +394,103 @@ class Index extends React.Component { + + + + {' '} + + Backstage Search Platform + + A search platform made just for you + + + + + + } + /> + + + + Way more than a text box{' '} + + + Backstage Search more than just a box you type questions into + — it's an entire platform all by itself, which you can + customize to fit your organization's needs + + + + + + Search the way you want + + + Bring your own search engine, create a customized search page + experience, or edit the look and feel of each search result + + + + + + Index everything, find anything + + + With an extensible backend, you can search beyond the Software + Catalog and index any source you'd like — whether it's + TechDocs or Confluence and Stack Overflow + + + + + + Discoverability unlocked + + + New hires and seasoned employees alike can easily search your + infrastructure instead of getting lost in it + + + + + + + } + /> + + + + + Learn more about Backstage Search + + + Read + + + @@ -512,7 +609,7 @@ class Index extends React.Component { BYO Plugins - If you don’t see the plugin you need, it’s simple to build + If you don't see the plugin you need, it's simple to build your own diff --git a/microsite/static/animations/backstage-search-platform-icon-1.gif b/microsite/static/animations/backstage-search-platform-icon-1.gif new file mode 100644 index 0000000000..07e7f45335 Binary files /dev/null and b/microsite/static/animations/backstage-search-platform-icon-1.gif differ diff --git a/microsite/static/css/custom.css b/microsite/static/css/custom.css index 4b52a72e42..dd8fada3b7 100644 --- a/microsite/static/css/custom.css +++ b/microsite/static/css/custom.css @@ -1086,11 +1086,15 @@ code { display: flex; } -.Banner--hidden { +.Banner--hiding { opacity: 0; transition: opacity 200ms ease-in-out; } +.Banner--hidden { + display: none; +} + .Banner a { color: #000; text-decoration: underline; diff --git a/microsite/static/img/backstage-search-platform.svg b/microsite/static/img/backstage-search-platform.svg new file mode 100644 index 0000000000..0c058386ad --- /dev/null +++ b/microsite/static/img/backstage-search-platform.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + diff --git a/microsite/static/img/search-platform-overview-small.png b/microsite/static/img/search-platform-overview-small.png new file mode 100644 index 0000000000..2563d3a5f1 Binary files /dev/null and b/microsite/static/img/search-platform-overview-small.png differ diff --git a/microsite/static/img/search-platform-overview.png b/microsite/static/img/search-platform-overview.png new file mode 100644 index 0000000000..7faddc684c Binary files /dev/null and b/microsite/static/img/search-platform-overview.png differ diff --git a/microsite/static/js/dismissable-banner.js b/microsite/static/js/dismissable-banner.js index 2fcdbe5692..6320803a77 100644 --- a/microsite/static/js/dismissable-banner.js +++ b/microsite/static/js/dismissable-banner.js @@ -10,8 +10,9 @@ window.addEventListener('DOMContentLoaded', () => { const dismissButton = banner.querySelector('[data-banner-dismiss]'); if (dismissButton) { dismissButton.addEventListener('click', () => { - banner.classList.add('Banner--hidden'); + banner.classList.add('Banner--hiding'); localStorage.setItem(storageKey, 'true'); + setTimeout(() => banner.classList.add('Banner--hidden'), 300); }); } });