paulononato/backstage
1
0
Fork 0
Code Issues Pull Requests Actions 30 Packages Projects Releases Wiki Activity

Merge pull request #13581 from backstage/blam/microsite/search

Browse Source 
microsite: Added Search as a feature
This commit is contained in:
Ben Lambert
2022-09-09 09:54:39 +02:00
committed by GitHub
parent 39415d03c8 a58e5bfbd2
commit 5ba150e7d0
9 changed files with 146 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
microsite/core/Components.js
+11 -2
View File
@@ -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 (
<div className="Block__GraphicsContainer" style={style}>
<div className="Block__Graphics" children={children} />
<div className="Block__Graphics" children={children} style={innerStyle} />
</div>
);
};
microsite/data/plugins/backstage-search-platform.yaml
+10
View File
@@ -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
microsite/pages/en/index.js
+101 -4
View File
@@ -88,7 +88,7 @@ class Index extends React.Component {
/>
<Block.SmallTitle small>The Speed Paradox</Block.SmallTitle>
<Block.Paragraph>
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 {
</Block.SmallTitle>
<Block.Paragraph>
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
</Block.Paragraph>
</Block.TextBox>
@@ -350,7 +350,7 @@ class Index extends React.Component {
<BulletLine />
<Block.SmallTitle small>Easy to maintain</Block.SmallTitle>
<Block.Paragraph>
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
</Block.Paragraph>
@@ -394,6 +394,103 @@ class Index extends React.Component {
</ActionBlock.Link>
</ActionBlock>
<Block className="stripe-top bg-teal-top-right" wrapped>
<Block.Container wrapped>
<Block.TextBox wide>
{' '}
<img
className="Block__GIF"
src={`${baseUrl}animations/backstage-search-platform-icon-1.gif`}
/>
<Block.Subtitle>Backstage Search Platform</Block.Subtitle>
<Block.Title half>
A search platform made just for you
</Block.Title>
</Block.TextBox>
<Breakpoint
narrow={
<Block.Graphics innerPadding={20}>
<Block.Graphic
y={-8}
padding={0}
width={100}
src={`${baseUrl}img/search-platform-overview-small.png`}
/>
</Block.Graphics>
}
/>
<Block.TextBox small>
<BulletLine />
<Block.SmallTitle small>
Way more than a text box{' '}
</Block.SmallTitle>
<Block.Paragraph>
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
</Block.Paragraph>
</Block.TextBox>
<Block.TextBox small>
<BulletLine />
<Block.SmallTitle small>
Search the way you want
</Block.SmallTitle>
<Block.Paragraph>
Bring your own search engine, create a customized search page
experience, or edit the look and feel of each search result
</Block.Paragraph>
</Block.TextBox>
<Block.TextBox small>
<BulletLine />
<Block.SmallTitle small>
Index everything, find anything
</Block.SmallTitle>
<Block.Paragraph>
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
</Block.Paragraph>
</Block.TextBox>
<Block.TextBox small>
<BulletLine />
<Block.SmallTitle small>
Discoverability unlocked
</Block.SmallTitle>
<Block.Paragraph>
New hires and seasoned employees alike can easily search your
infrastructure instead of getting lost in it
</Block.Paragraph>
</Block.TextBox>
</Block.Container>
<Breakpoint
wide={
<Block.Graphics innerPadding={25} width={'1100px'}>
<Block.Graphic
padding={0}
src={`${baseUrl}img/search-platform-overview.png`}
width={100}
style={{
borderRadius: '8px',
boxShadow: '3px 8px 8px rgba(0,0,0,0.3)',
bottom: '8px',
}}
/>
</Block.Graphics>
}
/>
</Block>
<ActionBlock className="stripe bg-teal">
<ActionBlock.Title>
Learn more about Backstage Search
</ActionBlock.Title>
<ActionBlock.Link
href={`https://backstage.io/docs/features/search/search-overview`}
>
Read
</ActionBlock.Link>
</ActionBlock>
<Block className="stripe-top bg-teal-bottom" wrapped>
<Block.Container wrapped>
<Block.TextBox wide>
@@ -512,7 +609,7 @@ class Index extends React.Component {
<BulletLine />
<Block.SmallTitle small>BYO Plugins</Block.SmallTitle>
<Block.Paragraph>
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
</Block.Paragraph>
</Block.TextBox>
microsite/static/animations/backstage-search-platform-icon-1.gif
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 21 KiB

microsite/static/css/custom.css
+5 -1
View File
@@ -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;
microsite/static/img/backstage-search-platform.svg
+17
View File
@@ -0,0 +1,17 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 26.4.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 380 380" style="enable-background:new 0 0 380 380;" xml:space="preserve">
<style type="text/css">
.st0{fill:#121212;stroke:#7DF3E1;stroke-width:3;stroke-linejoin:round;stroke-miterlimit:10;}
.st1{fill:#121212;stroke:#7DF3E1;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
</style>
<g>
<path class="st0" d="M148.71,175.36l111.65,103.46c7.55,6.99,5.63,19.4-3.67,23.79h0c-5.36,2.53-11.72,1.55-16.07-2.48
L120.4,188.73"/>
<circle class="st0" cx="129.29" cy="165.67" r="90.21"/>
<circle class="st0" cx="129.29" cy="165.67" r="66.34"/>
<path class="st1" d="M82.1,170.2c-0.47-4.87-0.17-9.73,0.84-14.42"/>
<path class="st1" d="M89.39,140.09c4.93-7.7,12.13-14.06,21.16-17.94"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1015 B

microsite/static/img/search-platform-overview-small.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 112 KiB

microsite/static/img/search-platform-overview.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 273 KiB

microsite/static/js/dismissable-banner.js
+2 -1
View File
@@ -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);
});
}
});