From 3dc550cf65f32d2b5b7684986e9407c2a1cf5bad Mon Sep 17 00:00:00 2001 From: blam Date: Wed, 17 Aug 2022 15:36:23 +0200 Subject: [PATCH] chore: now we have hubspot! Signed-off-by: blam --- microsite/core/HubSpotForm.js | 40 ++ microsite/core/Typeform.js | 26 - microsite/pages/en/index.js | 1037 ++++++++++++++++--------------- microsite/static/css/custom.css | 63 ++ 4 files changed, 631 insertions(+), 535 deletions(-) create mode 100644 microsite/core/HubSpotForm.js delete mode 100644 microsite/core/Typeform.js diff --git a/microsite/core/HubSpotForm.js b/microsite/core/HubSpotForm.js new file mode 100644 index 0000000000..2905909ffe --- /dev/null +++ b/microsite/core/HubSpotForm.js @@ -0,0 +1,40 @@ +import React from 'react'; + +export class HubSpotForm extends React.Component { + render() { + return ( + <> + + + ); + } +} diff --git a/microsite/core/Typeform.js b/microsite/core/Typeform.js deleted file mode 100644 index ff0c5da0ee..0000000000 --- a/microsite/core/Typeform.js +++ /dev/null @@ -1,26 +0,0 @@ -import React from 'react'; - -export class Typeform extends React.Component { - componentDidMount() { - console.log('ere'); - } - render() { - return ( -
-
- - -
- ); - } -} diff --git a/microsite/pages/en/index.js b/microsite/pages/en/index.js index 4f2a0ecf3d..00110fdf9d 100644 --- a/microsite/pages/en/index.js +++ b/microsite/pages/en/index.js @@ -6,540 +6,559 @@ */ const React = require('react'); +const { HubSpotForm } = require(`${process.cwd()}/core/HubSpotForm.js`); const Components = require(`${process.cwd()}/core/Components.js`); const Block = Components.Block; const ActionBlock = Components.ActionBlock; const Breakpoint = Components.Breakpoint; const BulletLine = Components.BulletLine; const Banner = Components.Banner; -const { Typeform } = require(`${process.cwd()}/core/Typeform.js`); class Index extends React.Component { render() { const { config: siteConfig } = this.props; const { baseUrl } = siteConfig; return ( -
- - - -
- 🗞️ Want to stay up to date with Backstage? Sign up for our{' '} - - Newsletter - - ! -
- - + +
+ + +
+ 🗞️ Want to stay up to date with Backstage? Sign up for our{' '} + + Newsletter + + ! +
+ + - - - - - An open platform for building developer portals - - - Powered by a centralized software catalog, Backstage restores - order to your infrastructure and enables your product teams to - ship high-quality code quickly — without compromising autonomy. - - - GitHub - - - - - - - - + + + + + An open platform for building developer portals + + + Powered by a centralized software catalog, Backstage restores + order to your infrastructure and enables your product teams to + ship high-quality code quickly — without compromising + autonomy. + + + GitHub + + + + + + + + - - - - - The Speed Paradox - - 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 everything - slows down again. - - - - - The Standards Paradox - - By centralizing services and standardizing your tooling, - Backstage streamlines your development environment from end to - end. Instead of restricting autonomy, standardization frees your - engineers from infrastructure complexity. So you can return to - building and scaling, quickly and safely. - - - - + + + + + The Speed Paradox + + 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 + everything slows down again. + + + + + The Standards Paradox + + By centralizing services and standardizing your tooling, + Backstage streamlines your development environment from end to + end. Instead of restricting autonomy, standardization frees + your engineers from infrastructure complexity. So you can + return to building and scaling, quickly and safely. + + + + - - - - {' '} - - Backstage Software Catalog - - Build an ecosystem, not a wilderness - - - - - - } - /> - - - - Manage all your software, all in one place{' '} - - - Backstage makes it easy for one team to manage 10 services — and - makes it possible for your company to manage thousands of them - - - - - A uniform overview - - Every team can see all the services they own and related - resources (deployments, data pipelines, pull request status, - etc.) - - - - - - Metadata on tap - - All that information can be shared with plugins inside Backstage - to enable other management features, like resource monitoring - and testing - - - - - - Not just services - - Libraries, websites, ML models — you name it, Backstage knows - all about it, including who owns it, dependencies, and more - - - - - - - Discoverability & accountability - - - No more orphan software hiding in the dark corners of your tech - stack - - - - - - - - - Learn more about the software catalog - - - Read - - - - - - - - Backstage Software Templates - Standards can set you free - - - - - } - /> - - - - Like automated getting started guides - - - Using templates, engineers can spin up a new microservice with - your organization’s best practices built-in, right from the - start - - - - - - Push-button deployment - - Click a button to create a Spring Boot project with your repo - automatically configured on GitHub and your CI already running - the first build - - - - - - Built to your standards - - Go instead of Java? CircleCI instead of Jenkins? Serverless - instead of Kubernetes? GCP instead of AWS? Customize your - recipes with your best practices baked-in - - - - - - - Golden Paths pave the way - - - When the right way is also the easiest way, engineers get up and - running faster — and more safely - - - - - - } - /> - - - - - - Build your own software templates - - - Contribute - - - - - - - - - Backstage TechDocs - Docs like code - - - + + + + {' '} + + Backstage Software Catalog + + Build an ecosystem, not a wilderness + + + - - } - /> - - - Free documentation - - Whenever you use a Backstage Software Template, your project - automatically gets a TechDocs site, for free - - - - - - Easy to write - - With our docs-like-code approach, engineers write their - documentation in Markdown files right alongside their code - - - - - - Easy to maintain - - 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 - - - - - - Easy to find and use - - Since all your documentation is in Backstage, finding any - TechDoc is just a search query away - - - - - - - } - /> - - - - - Learn more about TechDocs - - Docs - - - - - - - - - Backstage Kubernetes - - Manage your services, not clusters - - - - - - - Kubernetes made just for service owners - - - Backstage features the first Kubernetes monitoring tool designed - around the needs of service owners, not cluster admins - - - - - - - Your service at a glance - - - Get all your service's deployments in one, aggregated view — no - more digging through cluster logs in a CLI, no more combing - through lists of services you don't own - - - - - - Pick a cloud, any cloud - - Since Backstage uses the Kubernetes API, it's cloud agnostic — - so it works no matter which cloud provider or managed Kubernetes - service you use, and even works in multi-cloud orgs - - - - - - Any K8s, one UI - - Now you don't have to switch dashboards when you move from local - testing to production, or from one cloud provider to another - - - - - - Learn more about the K8s plugin - - Read - - - - - - - + + + Manage all your software, all in one place{' '} + + + Backstage makes it easy for one team to manage 10 services — + and makes it possible for your company to manage thousands of + them + + + + + A uniform overview + + Every team can see all the services they own and related + resources (deployments, data pipelines, pull request status, + etc.) + + + + + + Metadata on tap + + All that information can be shared with plugins inside + Backstage to enable other management features, like resource + monitoring and testing + + - Customize Backstage with plugins - - An app store for your infrastructure - - - - - - } - /> - - - Add functionality - - Want scalable website testing? Add the{' '} - - Lighthouse - {' '} - plugin. Wondering about recommended frameworks? Add the{' '} - - Tech Radar - {' '} - plugin.{' '} - - + + + Not just services + + Libraries, websites, ML models — you name it, Backstage knows + all about it, including who owns it, dependencies, and more + + - - - BYO Plugins - - If you don’t see the plugin you need, it’s simple to build your - own - - + + + + Discoverability & accountability + + + No more orphan software hiding in the dark corners of your + tech stack + + + + + - - + + + Learn more about the software catalog + + + Read + + + + + + + + Backstage Software Templates + Standards can set you free + + + + + } + /> + + + + Like automated getting started guides + + + Using templates, engineers can spin up a new microservice with + your organization’s best practices built-in, right from the + start + + + + + + + Push-button deployment + + + Click a button to create a Spring Boot project with your repo + automatically configured on GitHub and your CI already running + the first build + + + + + + + Built to your standards + + + Go instead of Java? CircleCI instead of Jenkins? Serverless + instead of Kubernetes? GCP instead of AWS? Customize your + recipes with your best practices baked-in + + + + + + + Golden Paths pave the way + + + When the right way is also the easiest way, engineers get up + and running faster — and more safely + + + + + + } + /> + + + + + + Build your own software templates + + + Contribute + + + + + + + + + Backstage TechDocs + Docs like code + + + + + + + } + /> + + + Free documentation + + Whenever you use a Backstage Software Template, your project + automatically gets a TechDocs site, for free + + + + + + Easy to write + + With our docs-like-code approach, engineers write their + documentation in Markdown files right alongside their code + + + + + + Easy to maintain + + 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 + + + + + + Easy to find and use + + Since all your documentation is in Backstage, finding any + TechDoc is just a search query away + + + + + + + } + /> + + + + + Learn more about TechDocs + + Docs + + + + + + + + + Backstage Kubernetes + + Manage your services, not clusters + + + + + + + Kubernetes made just for service owners + + + Backstage features the first Kubernetes monitoring tool + designed around the needs of service owners, not cluster + admins + + + + + + + Your service at a glance + + + Get all your service's deployments in one, aggregated view — + no more digging through cluster logs in a CLI, no more combing + through lists of services you don't own + + + + + + + Pick a cloud, any cloud + + + Since Backstage uses the Kubernetes API, it's cloud agnostic — + so it works no matter which cloud provider or managed + Kubernetes service you use, and even works in multi-cloud orgs + + + + + + Any K8s, one UI + + Now you don't have to switch dashboards when you move from + local testing to production, or from one cloud provider to + another + + + + + + + Learn more about the K8s plugin + + + Read + + + + + + + + + + Customize Backstage with plugins + + + An app store for your infrastructure + + + + + + } + /> + + + Add functionality + + Want scalable website testing? Add the{' '} + + Lighthouse + {' '} + plugin. Wondering about recommended frameworks? Add the{' '} + + Tech Radar + {' '} + plugin.{' '} + + + + + + BYO Plugins + + If you don’t see the plugin you need, it’s simple to build + your own + + + + + + + Integrate your own custom tooling + + + Building internal plugins lets you tailor your version of + Backstage to be a perfect fit for your infrastructure + + + + + + + Share with the community + + + Building open source plugins{' '} + contributes to the entire Backstage ecosystem, which benefits + everyone + + + + } + /> + + + + + Build a plugin + + Contribute + + + + + - Integrate your own custom tooling + Backstage is a{' '} + + Cloud Native Computing Foundation + {' '} + incubation project +
- - Building internal plugins lets you tailor your version of - Backstage to be a perfect fit for your infrastructure - - - - - - - Share with the community - - - Building open source plugins contributes - to the entire Backstage ecosystem, which benefits everyone - - - - } - /> - - - - - Build a plugin - - Contribute - - - - - - - Backstage is a{' '} - - Cloud Native Computing Foundation - {' '} - incubation project -
- - - -
+ + +
+ + ); } } diff --git a/microsite/static/css/custom.css b/microsite/static/css/custom.css index 30267a9f42..71adbc2a4e 100644 --- a/microsite/static/css/custom.css +++ b/microsite/static/css/custom.css @@ -1227,3 +1227,66 @@ code { h3.collapsible span.arrow { margin-right: 4px; } + +.Sidebar__Container { + top: 50%; + right: 0; + position: fixed; + color: rgb(0, 0, 0); + transition: transform 250ms ease-in-out; + display: flex; + align-items: center; + transform: translateY(-50%) translateX(500px); +} + +.Sidebar__Container--open { + transform: translateY(-50%); +} + +.Sidebar__Button { + transform: rotate(-90deg) translateY(48px); + padding: 12px 16px; + border-radius: 8px 8px 0 0; + background-color: rgb(92, 214, 200); + color: rgb(0, 0, 0); + outline: 0; + border: 0; + font-family: Helvetica Neue, sans-serif; + max-height: 48px; + max-width: 150px; + font-size: 16px; + cursor: pointer; +} + +.Sidebar__Button:hover { + transform: rotate(-90deg) translateY(48px) scale(1.01); +} + +#Sidebar__HubSpotContainer { + width: 500px; + background-color: white; + border-radius: 8px 0 0 8px; + padding: 16px; + padding-bottom: 0px; + z-index: 10001; + min-height: 260px; +} + +#Sidebar__HubSpotContainer .hs-button { + padding: 12px 16px; + border-radius: 8px; + background-color: rgb(92, 214, 200); + color: rgb(0, 0, 0); + border: 0; +} +#Sidebar__HubSpotContainer.submitted-message { + min-height: 260px; + display: flex; + flex-direction: column; + justify-content: center; + padding: 0 16px; +} + +#Sidebar__HubSpotContainer.submitted-message p { + color: rgb(0, 0, 0); +}