Merge pull request #1902 from spotify/add-microsite-code
Add microsite code
This commit is contained in:
Raghunandan Balachandran
@@ -5,3 +5,4 @@
|
||||
**/build/**
|
||||
**/.git/**
|
||||
**/public/**
|
||||
**/microsite/**
|
||||
|
||||
@@ -2,7 +2,8 @@ name: Frontend CI
|
||||
|
||||
on:
|
||||
pull_request:
|
||||
|
||||
paths:
|
||||
- '!microsite/**'
|
||||
jobs:
|
||||
build:
|
||||
runs-on: ubuntu-latest
|
||||
|
||||
@@ -0,0 +1,182 @@
|
||||
This website was created with [Docusaurus](https://docusaurus.io/).
|
||||
|
||||
# What's In This Document
|
||||
|
||||
- [Get Started in 5 Minutes](#get-started-in-5-minutes)
|
||||
- [Directory Structure](#directory-structure)
|
||||
- [Editing Content](#editing-content)
|
||||
- [Adding Content](#adding-content)
|
||||
- [Full Documentation](#full-documentation)
|
||||
|
||||
## Directory Structure
|
||||
|
||||
Your project file structure should look something like this
|
||||
|
||||
```
|
||||
my-docusaurus/
|
||||
docs/
|
||||
doc-1.md
|
||||
doc-2.md
|
||||
doc-3.md
|
||||
website/
|
||||
blog/
|
||||
2016-3-11-oldest-post.md
|
||||
2017-10-24-newest-post.md
|
||||
core/
|
||||
node_modules/
|
||||
pages/
|
||||
static/
|
||||
css/
|
||||
img/
|
||||
package.json
|
||||
sidebars.json
|
||||
siteConfig.js
|
||||
```
|
||||
|
||||
# Editing Content
|
||||
|
||||
## Editing an existing docs page
|
||||
|
||||
Edit docs by navigating to `docs/` and editing the corresponding document:
|
||||
|
||||
`docs/doc-to-be-edited.md`
|
||||
|
||||
```markdown
|
||||
---
|
||||
id: page-needs-edit
|
||||
title: This Doc Needs To Be Edited
|
||||
---
|
||||
|
||||
Edit me...
|
||||
```
|
||||
|
||||
For more information about docs, click [here](https://docusaurus.io/docs/en/navigation)
|
||||
|
||||
## Editing an existing blog post
|
||||
|
||||
Edit blog posts by navigating to `website/blog` and editing the corresponding post:
|
||||
|
||||
`website/blog/post-to-be-edited.md`
|
||||
|
||||
```markdown
|
||||
---
|
||||
id: post-needs-edit
|
||||
title: This Blog Post Needs To Be Edited
|
||||
---
|
||||
|
||||
Edit me...
|
||||
```
|
||||
|
||||
For more information about blog posts, click [here](https://docusaurus.io/docs/en/adding-blog)
|
||||
|
||||
# Adding Content
|
||||
|
||||
## Adding a new docs page to an existing sidebar
|
||||
|
||||
1. Create the doc as a new markdown file in `/docs`, example `docs/newly-created-doc.md`:
|
||||
|
||||
```md
|
||||
---
|
||||
id: newly-created-doc
|
||||
title: This Doc Needs To Be Edited
|
||||
---
|
||||
|
||||
My new content here..
|
||||
```
|
||||
|
||||
1. Refer to that doc's ID in an existing sidebar in `website/sidebars.json`:
|
||||
|
||||
```javascript
|
||||
// Add newly-created-doc to the Getting Started category of docs
|
||||
{
|
||||
"docs": {
|
||||
"Getting Started": [
|
||||
"quick-start",
|
||||
"newly-created-doc" // new doc here
|
||||
],
|
||||
...
|
||||
},
|
||||
...
|
||||
}
|
||||
```
|
||||
|
||||
For more information about adding new docs, click [here](https://docusaurus.io/docs/en/navigation)
|
||||
|
||||
## Adding a new blog post
|
||||
|
||||
1. Make sure there is a header link to your blog in `website/siteConfig.js`:
|
||||
|
||||
`website/siteConfig.js`
|
||||
|
||||
```javascript
|
||||
headerLinks: [
|
||||
...
|
||||
{ blog: true, label: 'Blog' },
|
||||
...
|
||||
]
|
||||
```
|
||||
|
||||
2. Create the blog post with the format `YYYY-MM-DD-My-Blog-Post-Title.md` in `website/blog`:
|
||||
|
||||
`website/blog/2018-05-21-New-Blog-Post.md`
|
||||
|
||||
```markdown
|
||||
---
|
||||
author: Frank Li
|
||||
authorURL: https://twitter.com/foobarbaz
|
||||
authorFBID: 503283835
|
||||
title: New Blog Post
|
||||
---
|
||||
|
||||
Lorem Ipsum...
|
||||
```
|
||||
|
||||
For more information about blog posts, click [here](https://docusaurus.io/docs/en/adding-blog)
|
||||
|
||||
## Adding items to your site's top navigation bar
|
||||
|
||||
1. Add links to docs, custom pages or external links by editing the headerLinks field of `website/siteConfig.js`:
|
||||
|
||||
`website/siteConfig.js`
|
||||
|
||||
```javascript
|
||||
{
|
||||
headerLinks: [
|
||||
...
|
||||
/* you can add docs */
|
||||
{ doc: 'my-examples', label: 'Examples' },
|
||||
/* you can add custom pages */
|
||||
{ page: 'help', label: 'Help' },
|
||||
/* you can add external links */
|
||||
{ href: 'https://github.com/facebook/docusaurus', label: 'GitHub' },
|
||||
...
|
||||
],
|
||||
...
|
||||
}
|
||||
```
|
||||
|
||||
For more information about the navigation bar, click [here](https://docusaurus.io/docs/en/navigation)
|
||||
|
||||
## Adding custom pages
|
||||
|
||||
1. Docusaurus uses React components to build pages. The components are saved as .js files in `website/pages/en`:
|
||||
1. If you want your page to show up in your navigation header, you will need to update `website/siteConfig.js` to add to the `headerLinks` element:
|
||||
|
||||
`website/siteConfig.js`
|
||||
|
||||
```javascript
|
||||
{
|
||||
headerLinks: [
|
||||
...
|
||||
{ page: 'my-new-custom-page', label: 'My New Custom Page' },
|
||||
...
|
||||
],
|
||||
...
|
||||
}
|
||||
```
|
||||
|
||||
For more information about custom pages, click [here](https://docusaurus.io/docs/en/custom-pages).
|
||||
|
||||
# Full Documentation
|
||||
|
||||
Full documentation can be found on the [website](https://docusaurus.io/).
|
||||
@@ -0,0 +1,182 @@
|
||||
This website was created with [Docusaurus](https://docusaurus.io/).
|
||||
|
||||
# What's In This Document
|
||||
|
||||
- [Get Started in 5 Minutes](#get-started-in-5-minutes)
|
||||
- [Directory Structure](#directory-structure)
|
||||
- [Editing Content](#editing-content)
|
||||
- [Adding Content](#adding-content)
|
||||
- [Full Documentation](#full-documentation)
|
||||
|
||||
## Directory Structure
|
||||
|
||||
Your project file structure should look something like this
|
||||
|
||||
```
|
||||
my-docusaurus/
|
||||
docs/
|
||||
doc-1.md
|
||||
doc-2.md
|
||||
doc-3.md
|
||||
website/
|
||||
blog/
|
||||
2016-3-11-oldest-post.md
|
||||
2017-10-24-newest-post.md
|
||||
core/
|
||||
node_modules/
|
||||
pages/
|
||||
static/
|
||||
css/
|
||||
img/
|
||||
package.json
|
||||
sidebars.json
|
||||
siteConfig.js
|
||||
```
|
||||
|
||||
# Editing Content
|
||||
|
||||
## Editing an existing docs page
|
||||
|
||||
Edit docs by navigating to `docs/` and editing the corresponding document:
|
||||
|
||||
`docs/doc-to-be-edited.md`
|
||||
|
||||
```markdown
|
||||
---
|
||||
id: page-needs-edit
|
||||
title: This Doc Needs To Be Edited
|
||||
---
|
||||
|
||||
Edit me...
|
||||
```
|
||||
|
||||
For more information about docs, click [here](https://docusaurus.io/docs/en/navigation)
|
||||
|
||||
## Editing an existing blog post
|
||||
|
||||
Edit blog posts by navigating to `website/blog` and editing the corresponding post:
|
||||
|
||||
`website/blog/post-to-be-edited.md`
|
||||
|
||||
```markdown
|
||||
---
|
||||
id: post-needs-edit
|
||||
title: This Blog Post Needs To Be Edited
|
||||
---
|
||||
|
||||
Edit me...
|
||||
```
|
||||
|
||||
For more information about blog posts, click [here](https://docusaurus.io/docs/en/adding-blog)
|
||||
|
||||
# Adding Content
|
||||
|
||||
## Adding a new docs page to an existing sidebar
|
||||
|
||||
1. Create the doc as a new markdown file in `/docs`, example `docs/newly-created-doc.md`:
|
||||
|
||||
```md
|
||||
---
|
||||
id: newly-created-doc
|
||||
title: This Doc Needs To Be Edited
|
||||
---
|
||||
|
||||
My new content here..
|
||||
```
|
||||
|
||||
1. Refer to that doc's ID in an existing sidebar in `website/sidebars.json`:
|
||||
|
||||
```javascript
|
||||
// Add newly-created-doc to the Getting Started category of docs
|
||||
{
|
||||
"docs": {
|
||||
"Getting Started": [
|
||||
"quick-start",
|
||||
"newly-created-doc" // new doc here
|
||||
],
|
||||
...
|
||||
},
|
||||
...
|
||||
}
|
||||
```
|
||||
|
||||
For more information about adding new docs, click [here](https://docusaurus.io/docs/en/navigation)
|
||||
|
||||
## Adding a new blog post
|
||||
|
||||
1. Make sure there is a header link to your blog in `website/siteConfig.js`:
|
||||
|
||||
`website/siteConfig.js`
|
||||
|
||||
```javascript
|
||||
headerLinks: [
|
||||
...
|
||||
{ blog: true, label: 'Blog' },
|
||||
...
|
||||
]
|
||||
```
|
||||
|
||||
2. Create the blog post with the format `YYYY-MM-DD-My-Blog-Post-Title.md` in `website/blog`:
|
||||
|
||||
`website/blog/2018-05-21-New-Blog-Post.md`
|
||||
|
||||
```markdown
|
||||
---
|
||||
author: Frank Li
|
||||
authorURL: https://twitter.com/foobarbaz
|
||||
authorFBID: 503283835
|
||||
title: New Blog Post
|
||||
---
|
||||
|
||||
Lorem Ipsum...
|
||||
```
|
||||
|
||||
For more information about blog posts, click [here](https://docusaurus.io/docs/en/adding-blog)
|
||||
|
||||
## Adding items to your site's top navigation bar
|
||||
|
||||
1. Add links to docs, custom pages or external links by editing the headerLinks field of `website/siteConfig.js`:
|
||||
|
||||
`website/siteConfig.js`
|
||||
|
||||
```javascript
|
||||
{
|
||||
headerLinks: [
|
||||
...
|
||||
/* you can add docs */
|
||||
{ doc: 'my-examples', label: 'Examples' },
|
||||
/* you can add custom pages */
|
||||
{ page: 'help', label: 'Help' },
|
||||
/* you can add external links */
|
||||
{ href: 'https://github.com/facebook/docusaurus', label: 'GitHub' },
|
||||
...
|
||||
],
|
||||
...
|
||||
}
|
||||
```
|
||||
|
||||
For more information about the navigation bar, click [here](https://docusaurus.io/docs/en/navigation)
|
||||
|
||||
## Adding custom pages
|
||||
|
||||
1. Docusaurus uses React components to build pages. The components are saved as .js files in `website/pages/en`:
|
||||
1. If you want your page to show up in your navigation header, you will need to update `website/siteConfig.js` to add to the `headerLinks` element:
|
||||
|
||||
`website/siteConfig.js`
|
||||
|
||||
```javascript
|
||||
{
|
||||
headerLinks: [
|
||||
...
|
||||
{ page: 'my-new-custom-page', label: 'My New Custom Page' },
|
||||
...
|
||||
],
|
||||
...
|
||||
}
|
||||
```
|
||||
|
||||
For more information about custom pages, click [here](https://docusaurus.io/docs/en/custom-pages).
|
||||
|
||||
# Full Documentation
|
||||
|
||||
Full documentation can be found on the [website](https://docusaurus.io/).
|
||||
@@ -0,0 +1,44 @@
|
||||
---
|
||||
title: Announcing Backstage
|
||||
author: Stefan Ålund
|
||||
authorURL: http://twitter.com/stalund
|
||||
authorImageURL: https://pbs.twimg.com/profile_images/121166861/6919c047c0d0edaace78c3009b28e917-user-full-200-130.generated_400x400.jpg
|
||||
---
|
||||
|
||||
## What is Backstage?
|
||||
|
||||
Backstage is Spotify's open source platform for building developer portals.
|
||||
|
||||
It’s the first open source infrastructure platform by Spotify that allows you to focus on building your application instead of reinventing the button. With an elegant and unified, yet opinionated UI/UX for all your tooling and infrastructure, Backstage enables engineers to get up and running faster, which ultimately makes their lives easier and more productive.
|
||||
|
||||
|
||||
|
||||
<!--truncate-->
|
||||
|
||||
## As simple as writing a plugin.
|
||||
|
||||
Backstage makes it easy to unify all of your infrastructure tooling, services, and documentation under a single, easy-to-use interface. So your engineers will always know where to find the right tool for the job. And engineers will already know how to use each tool — because everything uses the same, familiar UI.
|
||||
|
||||
The number of open source infrastructure projects and tools [landscape](https://landscape.cncf.io/) is exploding. As the sheer volume of projects increases, companies and their engineers find it increasingly difficult to keep track and adopt all of the tooling fast enough to keep pace. Most of the tools were built by a different individual, team, or company, which means that there is no single UI/UX, and simply getting the tool installed and started can be a painful challenge- let alone wrangling each tool to work with one another within your existing ecosystem. Due to varying qualities and the varying UI/UX of each open source project, we'd like to introduce Backstage as a best-of-breed platform for developers to use... all in service of ensuring a flawless, consistent user experience.
|
||||
|
||||
|
||||
|
||||
## The Spotify story
|
||||
|
||||
A best-in-class developer portal — from a music company? Since the very beginning, Spotify has been known for its agile, autonomous engineering culture. More than music, we’re a tech company that has always put engineers first, empowering our developers with the ability to innovate quickly and at scale. Backstage is the natural result of that focus.
|
||||
|
||||
Since adopting Backstage internally at Spotify, we’ve seen a 55% decrease in onboarding time for our engineers (as measured by time until 10th pull request). Over 280 engineering teams inside Spotify are using Backstage to manage 2,000+ backend services, 300+ websites, 4,000+ data pipelines, and 200+ mobile features.
|
||||
|
||||
## Project roadmap
|
||||
|
||||
We created Backstage about 4 years ago, and today, we’ve decided to share the goodness with the greater engineering community. While our version of Backstage has had the benefit of time to mature and evolve, the first iteration of our open source version is still nascent. I wanted to take a moment to share with you what our vision for Backstage OSS is so that 1. users and our community gain a better understanding of where we’re envisioning the product to go and more importantly, 2. you can provide input and feedback so that together, we can create a better infrastructure experience for developers everywhere.
|
||||
|
||||
We are envisioning three phases of the project and we have already begun work on various aspects of these phases:
|
||||
|
||||
- **Phase 1:** Extensible frontend platform (now) - You will be able to easily create a single consistent UI layer for your internal infrastructure and tools. A set of reusable UX patterns and components help ensure a consistent experience between tools.
|
||||
|
||||
- **Phase 2:** Manage your stuff (next 2-3 months) - Manage anything from microservices to software components to infrastructure and your service catalog. Regardless of whether you want to create a new library, view service deployment status in Kubernetes, or check the test coverage for a website -- Backstage will provide all of those tools - and many more - in a single developer portal.
|
||||
|
||||
- **Phase 3:** Ecosystem (later) - Everyone's infrastructure stack is different. By fostering a vibrant community of contributors we hope to provide an ecosystem of Open Source plugins/integrations that allows you to pick the tools that match your stack.
|
||||
|
||||
Our vision for Backstage is for it to become the trusted standard toolbox (read: UI layer) for the open source infrastructure landscape. Think of it like Kubernetes for developer experience. We realize this is an ambitious goal. We can’t do it alone. If this sounds interesting or you'd like to help us shape our product vision, we'd love to talk. You can email me directly: [alund@spotify.com](mailto:alund@spotify.com).
|
||||
@@ -0,0 +1,88 @@
|
||||
---
|
||||
title: What the heck is Backstage anyway?
|
||||
author: Stefan Ålund
|
||||
authorURL: http://twitter.com/stalund
|
||||
authorImageURL: https://pbs.twimg.com/profile_images/121166861/6919c047c0d0edaace78c3009b28e917-user-full-200-130.generated_400x400.jpg
|
||||
---
|
||||
|
||||
|
||||
|
||||
Two days ago, we released the open source version of [Backstage](https://backstage.io/), our homegrown developer portal. And we learned a thing or two via the feedback we received. So, I wanted to take this opportunity to further explain what we’re trying to do with Backstage — and more importantly, what we want to give to the greater engineering community beyond Spotify.
|
||||
|
||||
<!--truncate-->
|
||||
|
||||
## What’s the big infrastructure problem?
|
||||
|
||||
As companies grow, their infrastructure systems get messier. Consider a team that wants to deploy something to the cloud. While Spotify has many awesome engineers, not every engineer is well-versed in our chosen cloud-provider tooling. Yet everyone is required to know and understand Terraform, GCP/AWS/Azure CLIs, Gitlab CI, Prometheus, Kubernetes, Docker, various monitoring and alerting tools, and much, much more. Once other resources come into play (databases, queueing, etc.), each engineer requires even more tools and domain-specific knowledge (or “disciplines”), from backend to machine learning, to mobile and data.
|
||||
|
||||
## What’s the fix?
|
||||
|
||||
Backstage unifies all your infrastructure tooling, services, and documentation with a single, consistent UI. All of it! Imagine if all your tools — GCP, Bigtable, CI pipelines, TensorFlow Extended, and whatever else is hiding in your stack — all had the same, easy-to-use interface. That’s Backstage. One front end for all your infrastructure.
|
||||
|
||||
|
||||
|
||||
Backstage gives developers a uniform overview of all their resources, regardless of how and where they are running, as well as an easy way to onboard and start using those tools. It also allows the creation of new resources, such as backend services running in Kubernetes, with a few clicks of a button — all without having to leave the same, familiar interface of Backstage.
|
||||
|
||||
## Why did we build it?
|
||||
|
||||
To some observers, it may seem odd that a music company is launching a best-in-class developer portal. But if you [dig deeper](https://backstage.io/background), you’ll find that since the very beginning, Spotify has been known for its agile, autonomous engineering culture. More than music, we’re a tech company that has always put engineers first, empowering our developers with the ability to innovate quickly and at scale. Backstage is the natural result of that focus.
|
||||
|
||||
## What are examples of how Backstage is used at Spotify?
|
||||
|
||||
Our internal installation of Backstage has over 100 different integrations — we call them “plugins”. Since the open-source version currently does not have any end-to-end use cases, it can be challenging to understand what problems Backstage can solve for you. To make things more tangible, let’s have a look at four of the common use-cases:
|
||||
|
||||
1. Creating a new microservice
|
||||
2. Following a pull request from review to production
|
||||
3. Centralised technical documentation
|
||||
4. Review performance of your team’s mobile features
|
||||
|
||||
These are just a few examples. Expect us to continue providing examples of how Backstage is used inside Spotify while we build out more end-2-end use-cases in the open.
|
||||
|
||||
### 1. Creating a new microservice
|
||||
|
||||
Creating any new software component at Spotify, such as a new microservice, is done with a few clicks in Backstage. Developers choose between a number of standard templates — all with best-practices built in.
|
||||
|
||||
|
||||
|
||||
After inputting some metadata about your service, a new repository is created with a “hello world” service that automatically builds and deploys in production on Kubernetes ([GKE](https://cloud.google.com/kubernetes-engine)). Ownership information is automatically captured in our service/software catalog and users can see a list of all the services they own.
|
||||
|
||||
|
||||
|
||||
### 2. Following a pull request from review to production
|
||||
|
||||
As soon as you submit a pull request to Spotify’s GitHub Enterprise, our CI system automatically posts a link to the CI/CD view in Backstage. The view provides you with all the information you need: build progress, test coverage changes, a re-trigger button, etc., so that you don’t have to look for this information across different systems.
|
||||
|
||||
|
||||
|
||||
Our homegrown CI system uses Jenkins under the hood, but Spotify engineers don’t need to know that. They interact directly with GitHub Enterprise and Backstage.
|
||||
|
||||
### 3. Centralised technical documentation
|
||||
|
||||
Spotify uses a [docs-like-code](https://www.youtube.com/watch?v=uFGCaZmA6d4) approach. Engineers write technical documentation in Markdown files that live together with the code. During CI, a beautiful-looking documentation site is created using [MkDocs](https://www.mkdocs.org/), and all sites are rendered centrally in a Backstage plugin.
|
||||
|
||||
|
||||
|
||||
On top of the static documentation we also incorporate additional metadata about the documentation site — such as owner, open issue and related Stack Overflow tags.
|
||||
|
||||
### 4. Review performance of your team’s mobile features
|
||||
|
||||
Our mobile apps are developed by many different teams. The codebase is divided up into different features, each owned and maintained by a separate team. If an app developer on one team wants to understand how their feature is affecting overall app performance, there’s a plugin for that:
|
||||
|
||||
|
||||
_Figures above for illustrative purposes only._
|
||||
|
||||
Developers can also look at crashes, releases, test coverage over time and many more tools in the same location.
|
||||
|
||||
## Why did we make Backstage open source?
|
||||
|
||||
When discussing infrastructure challenges with peer companies, it’s clear that we are not alone in struggling with fragmentation across our developer ecosystem. As companies adopt more open-source tooling, and build more infrastructure internally, the complexity grows. It gets harder for individual engineers to find and use all these distinct tools.
|
||||
|
||||
Similar to how Backstage ties together all of Spotify’s infrastructure, our ambition is to make the open-source version of Backstage the standard UX layer across the broader infrastructure landscape. We decided to release Backstage early so we could collaborate more closely with companies that have a similar problem — and that want to provide a better developer experience to their teams.
|
||||
|
||||
## What’s next?
|
||||
|
||||
We are envisioning [three phases](https://github.com/spotify/backstage/milestones) of the project (so far), and we have already begun work on various aspects of these phases. The best way to track the work and see where you can jump in and help out is:
|
||||
|
||||
https://github.com/spotify/backstage/milestones
|
||||
|
||||
Want to discuss the project or need support? Join us on [Discord](https://discord.gg/MUpMjP2) or reach out on [alund@spotify.com](mailto:alund@spotify.com).
|
||||
@@ -0,0 +1,40 @@
|
||||
---
|
||||
title: Introducing Lighthouse for Backstage
|
||||
author: Paul Marbach
|
||||
authorURL: http://twitter.com/fastfrwrd
|
||||
authorImageURL: https://pbs.twimg.com/profile_images/1224058798958088192/JPxS8uzR_400x400.jpg
|
||||
---
|
||||
|
||||
|
||||
|
||||
We’re proud to announce that our first internal plugin at Spotify has been open-sourced as part of Backstage. This plugin works with the newly open-sourced [lighthouse-audit-service](https://github.com/spotify/lighthouse-audit-service) to run and track Lighthouse audits for your websites.
|
||||
|
||||
<!--truncate-->
|
||||
|
||||
## What is Lighthouse?
|
||||
|
||||
Google's [Lighthouse](https://developers.google.com/web/tools/lighthouse) auditing tool for websites is a great open-source resource for benchmarking and improving the accessibility, performance, SEO, and best practices of your site.
|
||||
|
||||
At Spotify, we keep track of Lighthouse audit scores over time to look at trends and areas for investment. We particularly look to Lighthouse to give us [accessibility recommendations](https://developers.google.com/web/tools/lighthouse/v3/scoring#a11y); in the next few months, we plan to roll out Lighthouse accessibility category scores as a benchmark metric for all websites at Spotify.
|
||||
|
||||
## Lighthouse, tracked over time
|
||||
|
||||
What makes the plugin unique is that we can track a website's audit performance over time using the main metrics that Lighthouse outputs, rather than simply running reports. The sparklines show, at a glance, how all of your websites are holding up over recent builds.
|
||||
|
||||
|
||||
|
||||
Lighthouse reports can be viewed directly in Backstage, with the ability to travel back and forth through your audit history, so you can quickly diagnose which release caused a performance or SEO regression.
|
||||
|
||||
|
||||
|
||||
Trigger an audit directly from Backstage, or trigger audits programmatically with your new lighthouse-audit-service instance. Schedule them after builds as a sort of smoke test, or trigger them on a schedule (as we do at Spotify) to get a daily snapshot of your website.
|
||||
|
||||
|
||||
|
||||
## Using Lighthouse in Backstage
|
||||
|
||||
To learn how you can enable Lighthouse auditing within Backstage, head over to the [README](https://github.com/spotify/backstage/tree/master/plugins/lighthouse) for the plugin to get started.
|
||||
|
||||
## A personal note
|
||||
|
||||
I want to thank the folks on the Backstage team for approaching me to open-source this plugin. I have found working on Backstage to be a really rewarding and fun time, and I'm so glad that the core team members have put in the effort to make Backstage something that anyone in the industry can use. I can't wait to play with all the plugins the community is going to create. I am hopeful that this plugin can help illustrate just a sliver of what we use Backstage for at Spotify.
|
||||
@@ -0,0 +1,135 @@
|
||||
---
|
||||
title: How to quickly set up Backstage
|
||||
author: Marcus Eide
|
||||
authorURL: https://github.com/marcuseide
|
||||
authorImageURL: https://secure.gravatar.com/avatar/20223f1e03673c7c1e6282fbebaf6942
|
||||
---
|
||||
|
||||
We wanted to make getting started with Backstage as easy as possible. Even though Backstage is still in the early phases of its development, we believe it is important for our users to get a feel for what Backstage really is.
|
||||
|
||||
We want users to be able to create their own version of Backstage quickly and easily, so that they can take advantage of all the infrastructure that we’ve built into it — and start exploring.
|
||||
|
||||
In this blog post we’ll look at what a Backstage app is and how to create one using our [CLI](https://www.npmjs.com/package/@backstage/cli).
|
||||
|
||||
<!--truncate-->
|
||||
|
||||
## What is a Backstage app?
|
||||
|
||||
|
||||
|
||||
A Backstage app is a modern monorepo web project that is built using Backstage packages. It includes all the configuration and architecture you need to run Backstage so that you don’t have to worry about setting everything up by yourself.
|
||||
|
||||
More specifically, a Backstage app includes the core packages and APIs that provide base functionality to the app. The actual UX is provided by plugins. As an example, when you first load the `/` page of the app, the content is provided by the `welcome` plugin.
|
||||
|
||||
Plugins are the essential building blocks of Backstage and extend the platform by providing additional features and functionality. Read more about [Backstage plugins](https://github.com/spotify/backstage/tree/master/docs/getting-started) on GitHub.
|
||||
|
||||
## A personalized platform
|
||||
|
||||
When you create a Backstage _app_, you are creating your own installation of Backstage, an application that is built on top of the Backstage _platform_.
|
||||
|
||||
You get to take full advantage of a platform that we at Spotify have been using internally for years. But you also get to make it your own — starting with its name. You can rename the Backstage app anything you want, so that you can call it something that best fits your organization. Be creative!
|
||||
|
||||
## How do I create an app?
|
||||
|
||||
Just run the backstage-cli:
|
||||
|
||||
```bash
|
||||
npx @backstage/cli create-app
|
||||
```
|
||||
|
||||
Name your app, and we will create everything you need:
|
||||
|
||||
|
||||
|
||||
The only thing you need to do is to start the app:
|
||||
|
||||
```bash
|
||||
cd my-app
|
||||
yarn start
|
||||
```
|
||||
|
||||
And you are good to go! 👍
|
||||
|
||||
Read the full documentation on how to [create an app](https://github.com/spotify/backstage/blob/master/docs/create-an-app.md) on GitHub.
|
||||
|
||||
## What do I get? (Let's get technical...)
|
||||
|
||||
We’ve been using Backstage internally for years, and we’ve spent a lot of time adding to and tweaking the infrastructure so that it fits our needs. After all that testing and trial and error, we think it will fit your needs, too!
|
||||
|
||||
### 1. Lerna setup to manage multi-packages
|
||||
|
||||
The monorepo and its packages are managed by [Lerna](https://lerna.js.org/). It lets you work with individual packages in a controlled way.
|
||||
|
||||
### 2. Fast builds
|
||||
|
||||
Behind the scenes we use [Rollup](https://rollupjs.org/) to build the modules.
|
||||
|
||||
Each package is built individually. With the `--watch` flag you will be able to detect changes per package and therefore speed up the local development process.
|
||||
|
||||
To further speed things up, we have also included our own caching system to avoid rebuilding unchanged packages.
|
||||
|
||||
Our hope is that there will be thousands of Backstage plugins in the future, so we need a fast and stable build process.
|
||||
|
||||
### 3. Full TypeScript support
|
||||
|
||||
Most of the codebase is written in [TypeScript](https://www.typescriptlang.org/), and we aim for all of the core packages to be in TypeScript in the future.
|
||||
|
||||
All the knobs and handles needed for a stable and functioning TypeScript project are included.
|
||||
|
||||
Take a look at `@backstage/cli/config/tsconfig.json` for more details.
|
||||
|
||||
### 4. Tests and coverage out of the box
|
||||
|
||||
We include testing, linting, and end-to-end tests for your convenience.
|
||||
|
||||
```bash
|
||||
yarn lint:all
|
||||
yarn test:all
|
||||
yarn test:e2e
|
||||
```
|
||||
|
||||
## Extend the app with plugins
|
||||
|
||||
At Spotify, the main factor behind Backstage’s success has been our large and diverse collection of plugins — the result of contributions from various teams over the years. Internally, we have more than a hundred different plugins.
|
||||
|
||||
There are two ways to add plugins to your Backstage app: use a publicly available plugin or create your own.
|
||||
|
||||
### Using a public plugin
|
||||
|
||||
We provide a collection of public Backstage plugins (look for packages with the `plugin-` prefix under the `@backstage` namespace on [npm](https://www.npmjs.com/) that you can start using immediately.
|
||||
|
||||
Install in your app’s package folder (`<root>/packages/app`) with:
|
||||
|
||||
```bash
|
||||
yarn add @backstage/plugin-<plugin-name>
|
||||
```
|
||||
|
||||
Then add it to your app's `plugin.ts` file to import and register it:
|
||||
|
||||
`<root>/packages/app/src/plugin.ts`:
|
||||
|
||||
```js
|
||||
export { plugin as PluginName } from '@backstage/plugin-<plugin-name>';
|
||||
```
|
||||
|
||||
A plugin registers its own `route` in the app — read the documentation for the specific plugin you are installing for more information on that.
|
||||
|
||||
### Creating an internal plugin
|
||||
|
||||
We also know that each organization has different needs and will create their own plugins for internal purposes. To create an internal plugin, you can use our CLI again.
|
||||
|
||||
In the root of your app directory (`<root>`) run:
|
||||
|
||||
```bash
|
||||
yarn create-plugin
|
||||
```
|
||||
|
||||
This command will create a new plugin in `<root>/plugins/` and register it to your app automatically.
|
||||
|
||||
### Sharing is caring 🤗
|
||||
|
||||
If you are developing a plugin that might be useful for others, consider releasing it publicly. A large, diverse ecosystem of Backstage plugins benefits the whole community
|
||||
|
||||
## Ready to get started?
|
||||
|
||||
Head over to GitHub and check out the [project](https://github.com/spotify/backstage) or download our [CLI](https://www.npmjs.com/package/@backstage/cli). If you have more questions, join us on [Discord](https://discord.gg/MUpMjP2) or [create an issue](https://github.com/spotify/backstage/issues/new/choose).
|
||||
@@ -0,0 +1,44 @@
|
||||
---
|
||||
title: Introducing Tech Radar for Backstage
|
||||
author: Bilawal Hameed
|
||||
authorURL: http://twitter.com/bilawalhameed
|
||||
authorImageURL: https://avatars0.githubusercontent.com/bih
|
||||
---
|
||||
|
||||
|
||||
|
||||
Just a few weeks ago, we released our internal plugin for [Lighthouse website audits] as our first open source plugin, so the whole community could use it. Today, we’re excited to add a new plugin to that list — say hello to the [Tech Radar plugin]!
|
||||
|
||||
<!--truncate-->
|
||||
|
||||
## What is Tech Radar?
|
||||
|
||||
The Technology Radar is a concept created by [ThoughtWorks] which allows you to visualize the official guidelines of software languages, processes, infrastructure, and platforms at that particular company. The particular visualization above was created by [Zalando].
|
||||
|
||||
At Spotify, our central committee of technical architects own the Tech Radar with the input of engineers across the company. Anyone can and is encouraged to give recommendations. We segment entries in our Tech Radar by languages, frameworks, processes, and infrastructure, although you should pick whatever works best for your organization. Each entry in the Tech Radar can have one of the following lifecycle values: Use, Trial, Assess, and Hold.
|
||||
|
||||
We also assign clear definitions for each lifecycle:
|
||||
|
||||
- **Use:** This technology is recommended for use by the majority of teams with a specific use case.
|
||||
- **Trial:** This technology has been evaluated for specific use cases and has showed clear benefits. Some teams adopt it in production, although it should be limited to low-impact projects as it might incur a higher risk.
|
||||
- **Assess:** This technology has the potential to be beneficial for the company. Some teams are evaluating it and using it in experimental projects. Using it in production comes with a high cost and risk due to lack of in-house knowledge, maintenance, and support.
|
||||
- **Hold:** We don’t want to further invest in this technology or we evaluated it and we don’t see it as beneficial for the company. Teams should not use it in new projects and should plan on migrating to a supported alternative if they use it for historical reasons. For broadly adopted technologies, the Radar should refer to a migration path to a supported alternative.
|
||||
|
||||
Since rolling out the Tech Radar, it has become the source of truth when creating, maintaining, or evolving our software ecosystem. Spotify has dozens of entries in our Radar and it can scale quite well whilst being easy for our engineers and engineering managers to consume.
|
||||
|
||||
## Using the Tech Radar in Backstage
|
||||
|
||||
To learn about how you can bring the Tech Radar to your Backstage installation, check out [the plugin README on GitHub][tech radar plugin].
|
||||
|
||||
## A personal note
|
||||
|
||||
I want to thank both the Backstage team and Spotify. Firstly, I’ve been working with our internal version of Backstage for over a year, and the developer experience since open sourcing has been even more of a joy to work with. Secondly, the 10% hack time that Spotify generously provides to all engineers enabled me to open source the Tech Radar plugin.
|
||||
|
||||
Since open sourcing it, the community has shown great interest in yet another powerful use case of Backstage. There was also an enthusiastic open source contributor who volunteered to migrate the plugin to TypeScript and React Hooks [in just 29 minutes](https://github.com/spotify/backstage/issues/661) of opening the issue!
|
||||
|
||||
I can’t wait to see how others benefit from the Tech Radar in their organizations!
|
||||
|
||||
[lighthouse website audits]: https://backstage.io/blog/2020/04/06/lighthouse-plugin
|
||||
[tech radar plugin]: https://github.com/spotify/backstage/tree/master/plugins/tech-radar
|
||||
[thoughtworks]: https://www.thoughtworks.com/radar
|
||||
[zalando]: https://opensource.zalando.com/tech-radar/
|
||||
@@ -0,0 +1,33 @@
|
||||
---
|
||||
title: Weaveworks’ COVID-19 app uses Backstage UI
|
||||
author: Jeff Feng
|
||||
authorURL: https://github.com/fengypants
|
||||
authorImageURL: https://avatars2.githubusercontent.com/u/46946747
|
||||
---
|
||||
|
||||
|
||||
|
||||
One of the great things about the open source community is once you put your work out there, you really never know where it might end up. That’s certainly the case here.
|
||||
|
||||
<!--truncate-->
|
||||
|
||||
When Weaveworks decided to build an X-ray diagnostics app to help fight COVID-19, they pulled together a lot of different open source resources — from projects big and small, built by both familiar tech partners and some brand new ones, too.
|
||||
|
||||
At the heart of their app — called [fk-covid][] — there’s a TensorFlow-based deep neural network that was developed by researchers on the DarwinAI team and others in the COVID R&D community. To package that network up for doctors and software developers to use, the app combines open source tools from Google, AWS, Azure, MinIO, the CNCF, and Weaveworks’ own Firekube bundle for Kubernetes.
|
||||
|
||||
And the user interface for all of this? Weaveworks built a custom plugin using the Backstage framework.
|
||||
|
||||
“We chose Backstage as a modern UI toolkit that we knew would work with Kubernetes apps,” said Alexis Richardson, CEO of Weaveworks. “We were also experimenting with Backstage for microservices and ML, so it was natural to try it here.”
|
||||
|
||||
Chanwit Kaewkasi, Weaveworks’ DX Engineer and a tech lead on the project, said, “Backstage offers very advanced plugin architecture which allows us to only focus on the plugin we're developing. Other things are taken care of by the framework.”
|
||||
|
||||
In other words, here’s Backstage doing what Backstage does best: unifying a bunch of technologies with a cohesive frontend, so that the whole thing is easier to build and easier to use.
|
||||
|
||||
Joining the fight against a global pandemic was not something the Backstage team at Spotify ever envisioned when we released our homegrown developer portal to the world back in March. But it’s a testament to the ingenuity (and serendipity) of the open source community that Backstage could be enlisted for such an unexpected use case.
|
||||
|
||||
We’re proud to see Backstage adopted as the UX layer for this meaningful cause. And we can’t wait to see what the open source community will build next.
|
||||
|
||||
To learn more about what fk-covid does, and how it works, jump on over to [the Weaveworks blog][] to hear it straight from the team that built it. It’s a great example of the possibilities that come from being a part of the open source community.
|
||||
|
||||
[fk-covid]: https://github.com/weaveworks/fk-covid
|
||||
[the weaveworks blog]: https://www.weave.works/blog/firekube-covid-ml
|
||||
@@ -0,0 +1,54 @@
|
||||
---
|
||||
title: Starting Phase 2: The Service Catalog
|
||||
author: Stefan Ålund
|
||||
authorURL: http://twitter.com/stalund
|
||||
authorImageURL: https://pbs.twimg.com/profile_images/121166861/6919c047c0d0edaace78c3009b28e917-user-full-200-130.generated_400x400.jpg
|
||||
---
|
||||
|
||||
**TL;DR** Thanks to the help from the Backstage community, we’ve made excellent progress and are now moving into Phase 2 of Backstage — building out a Service Catalog and the surrounding systems that will help unify the tools you use to manage your software.
|
||||
|
||||
We released the open source version of Backstage a little less than two months ago, and have been thrilled to see so many people jumping in and contributing to the project in its early stages. We’re excited to see what the community can build together as we progress through [each phase of Backstage](https://github.com/spotify/backstage#project-roadmap).
|
||||
|
||||
|
||||
|
||||
<!--truncate-->
|
||||
|
||||
## Progress so far
|
||||
|
||||
Phase 1 was all about building an extensible frontend platform, enabling teams to start creating a single, consistent UI layer for your internal infrastructure and tools in the form of [plugins](https://github.com/spotify/backstage/labels/plugin). In fact, thanks to our amazing (30+) [contributors](https://github.com/spotify/backstage/graphs/contributors), we were able to complete most of Phase 1 earlier than expected. 🎉
|
||||
|
||||
Today, we are happy to announce that we are shifting our focus to Phase 2!
|
||||
|
||||
## So what is Phase 2?
|
||||
|
||||
> _The core of building Platforms rests in versatile entity management. Entities represent the nouns or the "truths" of our world._
|
||||
|
||||
Quote from [Platform Nuts & Bolts: Extendable Data Models](https://www.kislayverma.com/post/platform-nuts-bolts-extendable-data-models)
|
||||
|
||||
Entities, or what we refer to as “components” in Backstage, represent all software, including services, websites, libraries, data pipelines, and so forth. The focus of Phase 2 will be on adding an entity model in Backstage that makes it easy for engineers to create and manage the software components they own.
|
||||
|
||||
With the ability to create a plethora of components in Backstage, how does one keep track of all the software in the ecosystem? Therein lies the highlight feature of Phase 2: the [Service Catalog](https://github.com/spotify/backstage/milestone/4). The service catalog — or software catalog — is a centralized system that keeps track of ownership and metadata about all software in your ecosystem. The catalog is built around the concept of [metadata yaml files](https://github.com/spotify/backstage/blob/master/docs/architecture-decisions/adr002-default-catalog-file-format.md) stored together with the code, which are then harvested and visualized in Backstage.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
With a single catalog, Backstage makes it easy for a team to manage ten services — and makes it possible for your company to manage thousands of them. Because the system is practically self-organizing, it requires hardly any oversight from a governing or centralized team. Developers can get a uniform overview of all their software and related resources (such as server utilisation, data pipelines, pull request status), regardless of how and where they are running, as well as an easy way to onboard and manage those resources.
|
||||
|
||||
On top of that, we have found that the service catalog is a great way to organise the infrastructure tools you use to manage the software as well. This is how Backstage creates one developer portal for all your tools. Rather than asking teams to jump between different infrastructure UI’s (and incurring additional cognitive overhead each time they make a context switch), most of these tools can be organised around the entities in the catalog:
|
||||
|
||||
|
||||
|
||||
More concretely, having this structure in place will allow plugins such as [CircleCI](https://github.com/spotify/backstage/tree/master/plugins/circleci) to show only the builds for the specific service you are viewing, or a [Spinnaker](https://github.com/spotify/backstage/issues/631) plugin to show running deployments, or an Open API plugin to [show documentation](https://github.com/spotify/backstage/issues/627) for endpoints exposed by the service, or the [Lighthouse](https://github.com/spotify/backstage/tree/master/plugins/lighthouse) plugin to show audit reports for your website. You get the point.
|
||||
|
||||
## Timeline
|
||||
|
||||
Our estimated timeline has us delivering these pieces in increments leading up to June 22. But with the support of the community we wouldn’t be surprised if things land earlier than that. 🙏
|
||||
|
||||
If you are interested in joining us, check out our [Milestones](https://github.com/spotify/backstage/milestones) and connected Issues.
|
||||
|
||||
## Long-term vision
|
||||
|
||||
Our vision for Backstage is for it to become the trusted, standard toolbox (read: UX layer) for the open source infrastructure landscape. Imagine a future where regardless of what infrastructure you use inside your company, there is an open source plugin available that you can pick up and add to your deployment of Backstage.
|
||||
|
||||
Spotify will continue to release more of our [internal](https://backstage.io/blog/2020/04/06/lighthouse-plugin) [plugins](https://backstage.io/blog/2020/05/14/tech-radar-plugin), but participation from developers and companies can help us build a healthy community. We are excited to see how Backstage has helped many of you, and look forward to seeing all the new plugins you and your teams will build!
|
||||
@@ -0,0 +1,54 @@
|
||||
---
|
||||
title: Backstage Service Catalog released in alpha
|
||||
author: Stefan Ålund
|
||||
authorURL: http://twitter.com/stalund
|
||||
image: https://backstage.io/blog/assets/6/header.png
|
||||
---
|
||||
|
||||
**TL;DR** Today we are announcing the availability of the Backstage Service Catalog in alpha. This has been the community’s most requested feature. Even if the catalog is not ready for production yet, we think this release already demonstrates how Backstage can provide value for your company right out of the box. With your early input and feedback, we hope to create a stronger generally available product.
|
||||
|
||||
|
||||
|
||||
<!--truncate-->
|
||||
|
||||
## You asked, we listened
|
||||
|
||||
When we [released](https://backstage.io/blog/2020/03/16/announcing-backstage) Backstage as an open source project back in March, it didn’t have all of the features that our internal version of Backstage has today. One of the main reasons we pushed to release it, despite it being in such a nascent stage, was so that we could start building the next phase of Backstage around the community’s needs. We’ve had hours of conversations with so many of you — thank you to everyone who has jumped on a video call, attended one of our working sessions, or watched our [demo videos](https://backstage.io/demos) and provided feedback via [Discord](https://discord.com/invite/MUpMjP2).
|
||||
|
||||
Today, we wanted to share what we’ve learned from talking with many of you at companies that have shown interest in adopting Backstage. Here it is in short:
|
||||
|
||||
- The problem of scaling autonomous engineering organisations without creating too much complexity is not a unique problem to Spotify.
|
||||
- The "extensible frontend platform" that we focused on in the first phase of the project is not the only thing you are looking for.
|
||||
|
||||
With these insights we decided to re-focus our efforts towards the most requested feature: the Backstage Service Catalog.
|
||||
|
||||
## What is the service catalog?
|
||||
|
||||
The Backstage Service Catalog — actually, a software catalog, since it includes more than just services — is a centralized system that keeps track of ownership and metadata for all the software in your ecosystem (services, websites, libraries, data pipelines, etc). The catalog is built around the concept of [metadata yaml files](https://github.com/spotify/backstage/blob/master/docs/architecture-decisions/adr002-default-catalog-file-format.md#format) stored together with the code, which are then harvested and visualized in Backstage.
|
||||
|
||||
This was our pitch for the virtues of a service catalog when we first [announced](https://backstage.io/blog/2020/05/22/phase-2-service-catalog) it as part of Phase 2:
|
||||
|
||||
> With a single catalog, Backstage makes it easy for a team to manage ten services — and makes it possible for your company to manage thousands of them. Because the system is practically self-organizing, it requires hardly any oversight from a governing or centralized team. Developers can get a uniform overview of all their software and related resources (such as server utilisation, data pipelines, pull request status), regardless of how and where they are running, as well as an easy way to onboard and manage those resources.
|
||||
|
||||
> On top of that, we have found that the service catalog is a great way to organise the infrastructure tools you use to manage the software as well. This is how Backstage creates one developer portal for all your tools. Rather than asking teams to jump between different infrastructure UI’s (and incurring additional cognitive overhead each time they make a context switch), most of these tools can be organised around the entities in the catalog:
|
||||
|
||||
|
||||
|
||||
You’ll be able to see many of these virtues in action with this alpha release — though, with some caveats, of course, since it is, after all, an alpha.
|
||||
|
||||
## What does alpha mean?
|
||||
|
||||
Alpha is our shorthand for "we don’t yet think Backstage is ready for production, but we’d love for you to test it and provide us with feedback". However, you should be able to try out the functionality of the service catalog:
|
||||
|
||||
1. Register software components ([examples](https://github.com/spotify/backstage/tree/master/packages/catalog-model/examples))
|
||||
2. See all components represented in the catalog
|
||||
3. Search across all components
|
||||
4. Get an overview of the metadata of the components
|
||||
5. Click through and get more information about a specific component (service, website, etc)
|
||||
6. See example tooling (plugins) that helps you manage the component
|
||||
|
||||
As with most alpha releases, you should expect things to change quite a lot until we reach the beta stage (we’re targeting the end of summer). There are obviously many things missing as well, but we wanted to start collecting feedback early and make it easier to see the end-to-end flow.
|
||||
|
||||
If you have feedback or questions, please open a [GitHub issue](https://github.com/spotify/backstage/issues), ping us on [Discord chat](https://discord.gg/EBHEGzX) or send me an email at [alund@spotify.com](mailto:alund@spotify.com) 🙏
|
||||
|
||||
To get regular product updates and news about the Backstage community, sign up for the [Backstage newsletter](https://mailchi.mp/spotify/backstage-community).
|
||||
@@ -0,0 +1,46 @@
|
||||
---
|
||||
title: How to enable authentication in Backstage using Passport
|
||||
author: Lee Mills
|
||||
authorURL: https://github.com/leemills83
|
||||
authorImageURL: https://avatars1.githubusercontent.com/u/1236238?s=460&v=4
|
||||
---
|
||||
|
||||
|
||||
|
||||
Getting authentication right is important. It helps keep your platform safe, it’s one of the first things users will interact with, and there are many different authentication providers to support. To this end, we chose to use [Passport](http://www.passportjs.org/) to provide an easy-to-use, out-of-the-box experience that can be extended to your own, pre-existing authentication providers (known as strategies). The Auth APIs in Backstage serve two purposes: identify the user and provide a way for plugins to request access to third-party services on behalf of the user. We’ve already implemented Google and GitHub authentication to provide examples and to get you started.
|
||||
|
||||
<!--truncate-->
|
||||
|
||||
## What is Passport?
|
||||
|
||||
[Passport](http://www.passportjs.org/) is Express-compatible authentication middleware for Node.js that provides access to over 500 authentication providers, covering everything from Google, Facebook, and Twitter to generic OAuth, SAML, and local. Check out all of the currently available [strategies listed on the Passport site](http://www.passportjs.org/).
|
||||
|
||||
Passport has allowed us to leverage an existing open-source authentication framework that will, in turn, give users the freedom to add and extend alternative authentication strategies to their instance of Backstage.
|
||||
|
||||
## Using authentication in Backstage
|
||||
|
||||
|
||||
|
||||
First, check out the provided Google and GitHub implementations! [Spin up a local copy of Backstage](https://backstage.io/blog/2020/04/30/how-to-quickly-set-up-backstage) along with our example-backend. You can find more documentation on setting up the example backend [here](https://github.com/spotify/backstage/tree/master/packages/backend), but be sure to include the relevant client IDs and secrets when running `yarn start`:
|
||||
|
||||
```
|
||||
AUTH_GOOGLE_CLIENT_ID=x AUTH_GOOGLE_CLIENT_SECRET=x AUTH_GITHUB_CLIENT_ID=x AUTH_GITHUB_CLIENT_SECRET=x SENTRY_TOKEN=x LOG_LEVEL=debug yarn start
|
||||
```
|
||||
|
||||
You can find the implementation for these strategies along with a lightweight proof-of-concept implementation for SAML authentication at `<root>/plugins/auth-backend/src/providers`.
|
||||
|
||||
## Ready to get started by adding your chosen provider and implementation?
|
||||
|
||||
Getting started is really straightforward, and can be broadly broken down into five steps:
|
||||
|
||||
1. Install the [Passport-based provider package that best suits your needs](http://www.passportjs.org/).
|
||||
2. Add a new provider to `plugins/auth-backend/src/providers/`
|
||||
3. Implement the provider, extending the suitable framework, if needed.
|
||||
4. Add the provider to the backend.
|
||||
5. Add a frontend Auth Utility API.
|
||||
|
||||
For full details, take a look at our [“Adding authentication providers” documentation](https://github.com/spotify/backstage/blob/master/docs/auth/add-auth-provider.md) and at the [excellent documentation](http://www.passportjs.org/docs/) provided by Passport.
|
||||
|
||||
## Interested in contributing to the next steps for authentication?
|
||||
|
||||
We’ve already seen both GitLab and Okta contributions from the community — and we’re thinking about a few more providers we’d like to add to Backstage, too. You can find those, and other authentication-related issues, in our repository by filtering with the [auth label](https://github.com/spotify/backstage/issues?q=is%3Aissue+is%3Aopen+label%3Aauth).
|
||||
@@ -0,0 +1,78 @@
|
||||
---
|
||||
title: Announcing Backstage Software Templates
|
||||
author: Stefan Ålund
|
||||
authorURL: https://twitter.com/stalund
|
||||
---
|
||||
|
||||
**TL;DR** Today we are announcing a new Backstage feature: Software Templates. Simplify setup, standardize tooling, and deploy with the click of a button. Using automated templates, your engineers can spin up a new microservice, website, or other software component with your organization’s best practices built-in, right from the start.
|
||||
|
||||
<video width="100%" height="100%" controls>
|
||||
<source src="/blog/assets/2020-08-05/feature.mp4" type="video/mp4">
|
||||
</video>
|
||||
|
||||
<!--truncate-->
|
||||
|
||||
## Balancing autonomy and standardization
|
||||
|
||||
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.
|
||||
|
||||
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.
|
||||
|
||||
Today we are releasing one of the key features that helps balance autonomy and standardization: templates for creating software.
|
||||
|
||||
## Backstage Software Templates: Push-button deployment
|
||||
|
||||
Backstage Software Templates automate and standardize the process of creating software components. To show you how they work, we created four sample templates to get you started — just configure them to fit your tooling and off you go:
|
||||
|
||||
- **Create React App Template** — create a new CRA website project
|
||||
- **Golang Microservice** — create a Golang repo with this template built by members of the Go community
|
||||
- **React SSR Template** — create a website powered with Next.js
|
||||
- **Spring Boot GRPC** — create a simple microservice using gRPC and Spring Boot Java
|
||||
|
||||
### The getting started guide gets automated
|
||||
|
||||
Since the templates can be customized to integrate with your existing infrastructure, it’s easy to start a new project without ever having to leave Backstage. Let’s say you’re building a microservice. With three clicks in Backstage, you’ll have a new Spring Boot project with your repo automatically configured on GitHub and your CI already running the first build.
|
||||
|
||||
### Golden Paths pave the way
|
||||
|
||||
You can customize Backstage Software Templates to fit your organization’s standards. Using Go instead of Java? CircleCI instead of Jenkins? Serverless instead of Kubernetes? GCP instead of AWS? [Make your own recipes for any software component](https://github.com/spotify/backstage/blob/master/docs/features/software-templates/adding-templates.md) and your best practices will be baked right in.
|
||||
|
||||
## Getting started
|
||||
|
||||
The sample Software Templates are available under `/create`. If you're setting up Backstage for the first time, follow [Getting Started with Backstage](https://github.com/spotify/backstage/blob/master/docs/getting-started/index.md) and go to `http://localhost:3000/create`. If you’ve already been running Backstage locally, run the command `yarn lerna run mock-data` to load the new sample templates into the Service Catalog first.
|
||||
|
||||
|
||||
|
||||
### Step 1: Choose a template
|
||||
|
||||
When you select a template that you want to create, you can ask for different input variables. These are then passed to the templater internally.
|
||||
|
||||
|
||||
|
||||
After filling in these variables, additional fields will appear so Backstage can be used. You’ll specify the owner, which is a `user` in the Backstage system, and the `Location`, which must be a GitHub organization and a non-existing GitHub repository name, formatted as `organization/reponame`.
|
||||
|
||||
### Step 2: Run!
|
||||
|
||||
Once you've entered values and confirmed, you'll then get a modal with live progress of what is currently happening with the creation of your template.
|
||||
|
||||
|
||||
|
||||
It shouldn't take too long before you see a success screen. At this point, a piece of “Hello World” software has been created in your repo, and the CI automatically picks it up and starts building the code.
|
||||
|
||||
Your engineers don’t have to bother with setting up underlying infrastructure, it’s all built into the template. They can start focusing on delivering business value.
|
||||
|
||||
### View new components in the Service Catalog
|
||||
|
||||
New components, of course, get added automatically to the Backstage Service Catalog. After creation, you'll see the `View in Catalog` button, which will take you to the registered component in the catalog:
|
||||
|
||||
|
||||
|
||||
## Define your standards
|
||||
|
||||
Backstage ships with four example templates, but since these are likely not the (only) ones you want to promote inside your company, the next step is to add [your own templates](https://github.com/spotify/backstage/blob/master/docs/features/software-templates/adding-templates.md). Using Backstage’s Software Templates feature, it’s easy to help your engineers get started building software with your organization’s best practices built-in.
|
||||
|
||||
We have learned that one of the keys to getting these standards adopted is to keep an open process. Templates are code. By making it clear to your engineers that you are open to pull requests, and that teams with different needs can add their own templates, you are on the path of striking a good balance between autonomy and standardization.
|
||||
|
||||
If you have feedback or questions, please open a [GitHub issue](https://github.com/spotify/backstage/issues), ping us on [Discord chat](https://discord.gg/EBHEGzX) or send me an email at [alund@spotify.com](mailto:alund@spotify.com) 🙏
|
||||
|
||||
To get regular product updates and news about the Backstage community, sign up for the [Backstage newsletter](https://mailchi.mp/spotify/backstage-community).
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 94 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 72 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 77 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 108 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 74 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.2 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 381 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 246 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 309 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 149 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 158 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 208 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 381 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 224 KiB |
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 230 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 476 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 564 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 609 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 365 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 503 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 315 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 303 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 376 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.0 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 534 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 562 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 27 KiB |
@@ -0,0 +1,114 @@
|
||||
const React = require('react');
|
||||
const PropTypes = require('prop-types');
|
||||
const simpleComponent = (Component, baseClassName = '', mods = []) => {
|
||||
const SimpleComponent = props => {
|
||||
// Extra BEM modifiers, e.g. `Block__Container--reversed`
|
||||
const modClasses = [];
|
||||
const otherProps = {};
|
||||
for (const prop in props) {
|
||||
if (mods.indexOf(prop) !== -1) {
|
||||
modClasses.push(`${baseClassName}--${prop}`);
|
||||
} else {
|
||||
otherProps[prop] = props[prop];
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Component
|
||||
{...otherProps}
|
||||
className={`${baseClassName} ${props.className || ''} ${modClasses}`}
|
||||
/>
|
||||
);
|
||||
};
|
||||
SimpleComponent.displayName = `SimpleComponent(${Component}, ${baseClassName})`;
|
||||
|
||||
SimpleComponent.propTypes = {};
|
||||
for (const mod of mods) {
|
||||
SimpleComponent.propTypes[mod] = PropTypes.bool;
|
||||
}
|
||||
|
||||
return SimpleComponent;
|
||||
};
|
||||
|
||||
const Block = simpleComponent('section', 'Block', ['small', 'wrapped']);
|
||||
Block.Container = simpleComponent('div', 'Block__Container', [
|
||||
'reversed',
|
||||
'wrapped',
|
||||
'column',
|
||||
]);
|
||||
Block.TitleBox = simpleComponent('h1', 'Block__TitleBox', ['large', 'story']);
|
||||
Block.TextBox = simpleComponent('div', 'Block__TextBox', ['wide', 'small']);
|
||||
|
||||
Block.Title = simpleComponent('h1', 'Block__Title', ['half', 'main']);
|
||||
Block.Subtitle = simpleComponent('h1', 'Block__Subtitle');
|
||||
|
||||
Block.SmallTitle = simpleComponent('h2', 'Block__SmallTitle');
|
||||
Block.SmallestTitle = simpleComponent('h3', 'Block__SmallestTitle');
|
||||
|
||||
const BulletLine = simpleComponent('div', 'BulletLine');
|
||||
|
||||
Block.Paragraph = simpleComponent('p', 'Block__Paragraph');
|
||||
Block.LinkButton = simpleComponent('a', 'Block__LinkButton', ['stretch']);
|
||||
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 }) => {
|
||||
const style = {};
|
||||
if (padding) {
|
||||
style.padding = `${padding}% 0`;
|
||||
}
|
||||
return (
|
||||
<div className="Block__GraphicsContainer" style={style}>
|
||||
<div className="Block__Graphics" children={children} />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
Block.Graphic = props => {
|
||||
/* Coordinates and size are in % of graphics container size, e.g. width={50} is 50% of parent width */
|
||||
const { x = 0, y = 0, width = 0, src, className = '' } = props;
|
||||
const style = Object.assign(
|
||||
{ left: `${x}%`, top: `${y}%`, width: `${width}%` },
|
||||
props.style,
|
||||
);
|
||||
return (
|
||||
<img
|
||||
src={src}
|
||||
alt=""
|
||||
{...props}
|
||||
style={style}
|
||||
className={`Block__Graphic ${className}`}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
Block.Image = props => {
|
||||
/* Coordinates and size are in % of graphics container size, e.g. width={50} is 50% of parent width */
|
||||
return (
|
||||
<div
|
||||
{...props}
|
||||
className={`Block__Image${
|
||||
props.wide ? '--wide' : props.narrow ? '--narrow' : ''
|
||||
}`}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
const ActionBlock = simpleComponent('section', 'ActionBlock');
|
||||
ActionBlock.Title = simpleComponent('h1', 'ActionBlock__Title');
|
||||
ActionBlock.Subtitle = simpleComponent('h2', 'ActionBlock__Subtitle');
|
||||
ActionBlock.Link = simpleComponent('a', 'ActionBlock__Link');
|
||||
|
||||
const Breakpoint = ({ narrow, wide }) => (
|
||||
<React.Fragment>
|
||||
<div className="Breakpoint--narrow">{narrow}</div>
|
||||
<div className="Breakpoint--wide">{wide}</div>
|
||||
</React.Fragment>
|
||||
);
|
||||
|
||||
module.exports = {
|
||||
Block,
|
||||
ActionBlock,
|
||||
Breakpoint,
|
||||
BulletLine,
|
||||
};
|
||||
@@ -0,0 +1,115 @@
|
||||
/**
|
||||
* Copyright (c) 2017-present, Facebook, Inc.
|
||||
*
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*/
|
||||
|
||||
const React = require('react');
|
||||
|
||||
class Footer extends React.Component {
|
||||
docUrl(doc, language) {
|
||||
const baseUrl = this.props.config.baseUrl;
|
||||
const docsUrl = this.props.config.docsUrl;
|
||||
const docsPart = `${docsUrl ? `${docsUrl}/` : ''}`;
|
||||
const langPart = `${language ? `${language}/` : ''}`;
|
||||
return `${baseUrl}${docsPart}${langPart}${doc}`;
|
||||
}
|
||||
|
||||
pageUrl(doc, language) {
|
||||
const baseUrl = this.props.config.baseUrl;
|
||||
return baseUrl + (language ? `${language}/` : '') + doc;
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<footer className="nav-footer" id="footer">
|
||||
<section className="sitemap">
|
||||
<div className="footer-title">
|
||||
<a href={this.props.config.baseUrl}>
|
||||
<h2 className="footerLogo"></h2>
|
||||
</a>
|
||||
</div>
|
||||
<div>
|
||||
<h5>Docs</h5>
|
||||
<a
|
||||
href={`${this.props.config.repoUrl}/blob/master/docs/plugins/create-a-plugin.md`}
|
||||
>
|
||||
Create a Plugin
|
||||
</a>
|
||||
<a
|
||||
href={`${this.props.config.repoUrl}/blob/master/docs/plugins/structure-of-a-plugin.md`}
|
||||
>
|
||||
Structure of a Plugin
|
||||
</a>
|
||||
<a href={`${this.props.config.repoUrl}/tree/master/docs`}>
|
||||
API references
|
||||
</a>
|
||||
<a href={`${this.props.config.repoUrl}/blob/master/docs/FAQ.md`}>
|
||||
FAQ
|
||||
</a>
|
||||
</div>
|
||||
<div>
|
||||
<h5>Community</h5>
|
||||
<a href="https://discord.gg/MUpMjP2">Support chatroom</a>
|
||||
<a href="https://mailchi.mp/spotify/backstage-community">
|
||||
Subscribe to our newsletter
|
||||
</a>
|
||||
{/*
|
||||
<h5>Docs</h5>
|
||||
<a href={this.docUrl("developing-a-plugin.html", this.props.language)}>
|
||||
Developing a Plugin
|
||||
</a>
|
||||
<a href={this.docUrl("apis.html", this.props.language)}>
|
||||
API Overview
|
||||
</a>
|
||||
<a href={this.docUrl("layout-components.html", this.props.language)}>
|
||||
Layout Components
|
||||
</a>
|
||||
*/}
|
||||
</div>
|
||||
<div>
|
||||
<h5>More</h5>
|
||||
<a href={this.props.config.fossWebsite}>
|
||||
Open Source @ {this.props.config.organizationName}
|
||||
</a>
|
||||
<a href={this.props.config.repoUrl}>GitHub</a>
|
||||
<a
|
||||
className="github-button"
|
||||
href={this.props.config.repoUrl}
|
||||
data-icon="octicon-star"
|
||||
data-count-href="/spotify/backstage/stargazers"
|
||||
data-show-count="true"
|
||||
data-count-aria-label="# stargazers on GitHub"
|
||||
aria-label="Star this project on GitHub"
|
||||
>
|
||||
Star
|
||||
</a>
|
||||
{this.props.config.twitterUsername && (
|
||||
<div className="social">
|
||||
<a
|
||||
href={`https://twitter.com/${this.props.config.twitterUsername}`}
|
||||
className="twitter-follow-button"
|
||||
>
|
||||
Follow @{this.props.config.twitterUsername}
|
||||
</a>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<a
|
||||
href={this.props.config.fossWebsite}
|
||||
target="_blank"
|
||||
rel="noreferrer noopener"
|
||||
className="spotifyOpenSource"
|
||||
>
|
||||
Made with <span>❤</span> at {this.props.config.organizationName}
|
||||
</a>
|
||||
<p className="copyright">{this.props.config.copyright}</p>
|
||||
</footer>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = Footer;
|
||||
@@ -0,0 +1,100 @@
|
||||
/**
|
||||
* Copyright (c) 2017-present, Facebook, Inc.
|
||||
*
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*/
|
||||
|
||||
const React = require('react');
|
||||
const classNames = require('classnames');
|
||||
|
||||
const CompLibrary = require(`${process.cwd()}/node_modules/docusaurus/lib/core/CompLibrary.js`);
|
||||
const MarkdownBlock = CompLibrary.MarkdownBlock; /* Used to read markdown */
|
||||
|
||||
class GridBlockWithButton extends React.Component {
|
||||
renderBlock(origBlock) {
|
||||
const blockDefaults = {
|
||||
imageAlign: 'left',
|
||||
};
|
||||
|
||||
const block = {
|
||||
...blockDefaults,
|
||||
...origBlock,
|
||||
};
|
||||
|
||||
const blockClasses = classNames('blockElement', this.props.className, {
|
||||
alignCenter: this.props.align === 'center',
|
||||
alignRight: this.props.align === 'right',
|
||||
fourByGridBlock: this.props.layout === 'fourColumn',
|
||||
imageAlignSide:
|
||||
block.image &&
|
||||
(block.imageAlign === 'left' || block.imageAlign === 'right'),
|
||||
imageAlignTop: block.image && block.imageAlign === 'top',
|
||||
imageAlignRight: block.image && block.imageAlign === 'right',
|
||||
imageAlignBottom: block.image && block.imageAlign === 'bottom',
|
||||
imageAlignLeft: block.image && block.imageAlign === 'left',
|
||||
threeByGridBlock: this.props.layout === 'threeColumn',
|
||||
twoByGridBlock: this.props.layout === 'twoColumn',
|
||||
});
|
||||
|
||||
const topLeftImage =
|
||||
(block.imageAlign === 'top' || block.imageAlign === 'left') &&
|
||||
this.renderBlockImage(block.image, block.imageLink, block.imageAlt);
|
||||
|
||||
const bottomRightImage =
|
||||
(block.imageAlign === 'bottom' || block.imageAlign === 'right') &&
|
||||
this.renderBlockImage(block.image, block.imageLink, block.imageAlt);
|
||||
|
||||
return (
|
||||
<div className={blockClasses} key={block.title}>
|
||||
{topLeftImage}
|
||||
<div className="blockContent">
|
||||
{this.renderBlockTitle(block.title)}
|
||||
<MarkdownBlock>{block.content}</MarkdownBlock>
|
||||
<div className="pluginWrapper buttonWrapper">
|
||||
<a className="button" href={block.href} target={block.target}>
|
||||
{block.buttonContent}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
{bottomRightImage}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
renderBlockImage(image) {
|
||||
if (!image) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return <div className="displayImage">{image}</div>;
|
||||
}
|
||||
|
||||
renderBlockTitle(title) {
|
||||
if (!title) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<h2>
|
||||
<MarkdownBlock>{title}</MarkdownBlock>
|
||||
</h2>
|
||||
);
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div className="gridBlock">
|
||||
{this.props.contents.map(this.renderBlock, this)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
GridBlockWithButton.defaultProps = {
|
||||
align: 'left',
|
||||
contents: [],
|
||||
layout: 'twoColumn',
|
||||
};
|
||||
|
||||
module.exports = GridBlockWithButton;
|
||||
@@ -0,0 +1,290 @@
|
||||
{
|
||||
"_comment": "This file is auto-generated by write-translations.js",
|
||||
"localized-strings": {
|
||||
"next": "Next",
|
||||
"previous": "Previous",
|
||||
"tagline": "An open platform for building developer portals",
|
||||
"docs": {
|
||||
"api/backend": {
|
||||
"title": "api/backend"
|
||||
},
|
||||
"api/utility-apis": {
|
||||
"title": "api/utility-apis"
|
||||
},
|
||||
"architecture-decisions/adr001-add-adr-log": {
|
||||
"title": "architecture-decisions/adr001-add-adr-log"
|
||||
},
|
||||
"architecture-decisions/adr002-default-catalog-file-format": {
|
||||
"title": "architecture-decisions/adr002-default-catalog-file-format"
|
||||
},
|
||||
"architecture-decisions/adr003-avoid-default-exports": {
|
||||
"title": "architecture-decisions/adr003-avoid-default-exports"
|
||||
},
|
||||
"architecture-decisions/adr004-module-export-structure": {
|
||||
"title": "architecture-decisions/adr004-module-export-structure"
|
||||
},
|
||||
"architecture-decisions/adr005-catalog-core-entities": {
|
||||
"title": "architecture-decisions/adr005-catalog-core-entities"
|
||||
},
|
||||
"architecture-decisions/adr006-avoid-react-fc": {
|
||||
"title": "architecture-decisions/adr006-avoid-react-fc"
|
||||
},
|
||||
"architecture-decisions/adr007-use-msw-to-mock-service-requests": {
|
||||
"title": "architecture-decisions/adr007-use-msw-to-mock-service-requests"
|
||||
},
|
||||
"architecture-decisions/adr008-default-catalog-file-name": {
|
||||
"title": "architecture-decisions/adr008-default-catalog-file-name"
|
||||
},
|
||||
"architecture-decisions/index": {
|
||||
"title": "architecture-decisions/index"
|
||||
},
|
||||
"auth/add-auth-provider": {
|
||||
"title": "auth/add-auth-provider"
|
||||
},
|
||||
"auth/auth-backend": {
|
||||
"title": "auth/auth-backend"
|
||||
},
|
||||
"auth/glossary": {
|
||||
"title": "auth/glossary"
|
||||
},
|
||||
"auth/index": {
|
||||
"title": "auth/index"
|
||||
},
|
||||
"auth/oauth": {
|
||||
"title": "auth/oauth"
|
||||
},
|
||||
"conf/defining": {
|
||||
"title": "conf/defining"
|
||||
},
|
||||
"conf/index": {
|
||||
"title": "conf/index"
|
||||
},
|
||||
"conf/reading": {
|
||||
"title": "conf/reading"
|
||||
},
|
||||
"conf/writing": {
|
||||
"title": "conf/writing"
|
||||
},
|
||||
"dls/contributing-to-storybook": {
|
||||
"title": "dls/contributing-to-storybook"
|
||||
},
|
||||
"dls/design": {
|
||||
"title": "dls/design"
|
||||
},
|
||||
"dls/figma": {
|
||||
"title": "dls/figma"
|
||||
},
|
||||
"FAQ": {
|
||||
"title": "FAQ"
|
||||
},
|
||||
"features/software-catalog/api": {
|
||||
"title": "features/software-catalog/api"
|
||||
},
|
||||
"features/software-catalog/descriptor-format": {
|
||||
"title": "features/software-catalog/descriptor-format"
|
||||
},
|
||||
"features/software-catalog/extending-the-model": {
|
||||
"title": "features/software-catalog/extending-the-model"
|
||||
},
|
||||
"features/software-catalog/external-integrations": {
|
||||
"title": "features/software-catalog/external-integrations"
|
||||
},
|
||||
"features/software-catalog/index": {
|
||||
"title": "features/software-catalog/index"
|
||||
},
|
||||
"features/software-catalog/populating": {
|
||||
"title": "features/software-catalog/populating"
|
||||
},
|
||||
"features/software-catalog/system-model": {
|
||||
"title": "features/software-catalog/system-model"
|
||||
},
|
||||
"features/software-templates/adding-templates": {
|
||||
"title": "features/software-templates/adding-templates"
|
||||
},
|
||||
"features/software-templates/extending/create-your-own-preparer": {
|
||||
"title": "features/software-templates/extending/create-your-own-preparer"
|
||||
},
|
||||
"features/software-templates/extending/create-your-own-publisher": {
|
||||
"title": "features/software-templates/extending/create-your-own-publisher"
|
||||
},
|
||||
"features/software-templates/extending/create-your-own-templater": {
|
||||
"title": "features/software-templates/extending/create-your-own-templater"
|
||||
},
|
||||
"features/software-templates/extending/index": {
|
||||
"title": "features/software-templates/extending/index"
|
||||
},
|
||||
"features/software-templates/index": {
|
||||
"title": "features/software-templates/index"
|
||||
},
|
||||
"features/techdocs/concepts": {
|
||||
"title": "features/techdocs/concepts"
|
||||
},
|
||||
"features/techdocs/creating-and-publishing": {
|
||||
"title": "features/techdocs/creating-and-publishing"
|
||||
},
|
||||
"features/techdocs/FAQ": {
|
||||
"title": "features/techdocs/FAQ"
|
||||
},
|
||||
"features/techdocs/getting-started": {
|
||||
"title": "features/techdocs/getting-started"
|
||||
},
|
||||
"features/techdocs/README": {
|
||||
"title": "features/techdocs/README"
|
||||
},
|
||||
"getting-started/app-custom-theme": {
|
||||
"title": "getting-started/app-custom-theme"
|
||||
},
|
||||
"getting-started/configure-app-with-plugins": {
|
||||
"title": "getting-started/configure-app-with-plugins"
|
||||
},
|
||||
"getting-started/create-an-app": {
|
||||
"title": "getting-started/create-an-app"
|
||||
},
|
||||
"getting-started/deployment-k8s": {
|
||||
"title": "getting-started/deployment-k8s"
|
||||
},
|
||||
"getting-started/deployment-other": {
|
||||
"title": "getting-started/deployment-other"
|
||||
},
|
||||
"getting-started/development-environment": {
|
||||
"title": "getting-started/development-environment"
|
||||
},
|
||||
"getting-started/getting-started-index": {
|
||||
"title": "Getting started",
|
||||
"sidebar_label": "Getting started"
|
||||
},
|
||||
"getting-started/installation": {
|
||||
"title": "getting-started/installation"
|
||||
},
|
||||
"journey": {
|
||||
"title": "journey"
|
||||
},
|
||||
"overview/architecture-overview": {
|
||||
"title": "overview/architecture-overview"
|
||||
},
|
||||
"overview/architecture-terminology": {
|
||||
"title": "overview/architecture-terminology"
|
||||
},
|
||||
"overview/roadmap": {
|
||||
"title": "overview/roadmap"
|
||||
},
|
||||
"overview/support": {
|
||||
"title": "overview/support"
|
||||
},
|
||||
"overview/what-is-backstage": {
|
||||
"title": "overview/what-is-backstage"
|
||||
},
|
||||
"plugins/backend-plugin": {
|
||||
"title": "plugins/backend-plugin"
|
||||
},
|
||||
"plugins/call-existing-api": {
|
||||
"title": "plugins/call-existing-api"
|
||||
},
|
||||
"plugins/create-a-plugin": {
|
||||
"title": "plugins/create-a-plugin"
|
||||
},
|
||||
"plugins/existing-plugins": {
|
||||
"title": "plugins/existing-plugins"
|
||||
},
|
||||
"plugins/index": {
|
||||
"title": "plugins/index"
|
||||
},
|
||||
"plugins/plugin-development": {
|
||||
"title": "plugins/plugin-development"
|
||||
},
|
||||
"plugins/proxying": {
|
||||
"title": "plugins/proxying"
|
||||
},
|
||||
"plugins/publish-private": {
|
||||
"title": "plugins/publish-private"
|
||||
},
|
||||
"plugins/publishing": {
|
||||
"title": "plugins/publishing"
|
||||
},
|
||||
"plugins/structure-of-a-plugin": {
|
||||
"title": "plugins/structure-of-a-plugin"
|
||||
},
|
||||
"plugins/testing": {
|
||||
"title": "plugins/testing"
|
||||
},
|
||||
"README": {
|
||||
"title": "README"
|
||||
},
|
||||
"reference/createPlugin-feature-flags": {
|
||||
"title": "reference/createPlugin-feature-flags"
|
||||
},
|
||||
"reference/createPlugin-router": {
|
||||
"title": "reference/createPlugin-router"
|
||||
},
|
||||
"reference/createPlugin": {
|
||||
"title": "reference/createPlugin"
|
||||
},
|
||||
"reference/utility-apis/AlertApi": {
|
||||
"title": "reference/utility-apis/AlertApi"
|
||||
},
|
||||
"reference/utility-apis/AppThemeApi": {
|
||||
"title": "reference/utility-apis/AppThemeApi"
|
||||
},
|
||||
"reference/utility-apis/BackstageIdentityApi": {
|
||||
"title": "reference/utility-apis/BackstageIdentityApi"
|
||||
},
|
||||
"reference/utility-apis/Config": {
|
||||
"title": "reference/utility-apis/Config"
|
||||
},
|
||||
"reference/utility-apis/ErrorApi": {
|
||||
"title": "reference/utility-apis/ErrorApi"
|
||||
},
|
||||
"reference/utility-apis/FeatureFlagsApi": {
|
||||
"title": "reference/utility-apis/FeatureFlagsApi"
|
||||
},
|
||||
"reference/utility-apis/IdentityApi": {
|
||||
"title": "reference/utility-apis/IdentityApi"
|
||||
},
|
||||
"reference/utility-apis/OAuthApi": {
|
||||
"title": "reference/utility-apis/OAuthApi"
|
||||
},
|
||||
"reference/utility-apis/OAuthRequestApi": {
|
||||
"title": "reference/utility-apis/OAuthRequestApi"
|
||||
},
|
||||
"reference/utility-apis/OpenIdConnectApi": {
|
||||
"title": "reference/utility-apis/OpenIdConnectApi"
|
||||
},
|
||||
"reference/utility-apis/ProfileInfoApi": {
|
||||
"title": "reference/utility-apis/ProfileInfoApi"
|
||||
},
|
||||
"reference/utility-apis/README": {
|
||||
"title": "reference/utility-apis/README"
|
||||
},
|
||||
"reference/utility-apis/SessionStateApi": {
|
||||
"title": "reference/utility-apis/SessionStateApi"
|
||||
},
|
||||
"reference/utility-apis/StorageApi": {
|
||||
"title": "reference/utility-apis/StorageApi"
|
||||
},
|
||||
"tutorials/index": {
|
||||
"title": "tutorials/index"
|
||||
}
|
||||
},
|
||||
"links": {
|
||||
"GitHub": "GitHub",
|
||||
"Docs": "Docs",
|
||||
"Blog": "Blog",
|
||||
"Demos": "Demos",
|
||||
"The Spotify story": "The Spotify story",
|
||||
"Newsletter": "Newsletter"
|
||||
},
|
||||
"categories": {
|
||||
"Getting Started": "Getting Started",
|
||||
"Plugins": "Plugins",
|
||||
"Test": "Test",
|
||||
"API Overview": "API Overview",
|
||||
"Layout components": "Layout components",
|
||||
"Testing": "Testing"
|
||||
}
|
||||
},
|
||||
"pages-strings": {
|
||||
"Help Translate|recruit community translators for your project": "Help Translate",
|
||||
"Edit this Doc|recruitment message asking to edit the doc source": "Edit",
|
||||
"Translate this Doc|recruitment message asking to translate the docs": "Translate"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,17 @@
|
||||
{
|
||||
"version": "1.0.0",
|
||||
"name": "backstage-microsite",
|
||||
"license": "Apache-2.0",
|
||||
"scripts": {
|
||||
"examples": "docusaurus-examples",
|
||||
"start": "docusaurus-start",
|
||||
"build": "docusaurus-build && cp static/img/*.svg build/backstage/img/",
|
||||
"publish-gh-pages": "docusaurus-publish",
|
||||
"write-translations": "docusaurus-write-translations",
|
||||
"version": "docusaurus-version",
|
||||
"rename-version": "docusaurus-rename-version"
|
||||
},
|
||||
"devDependencies": {
|
||||
"docusaurus": "^1.14.4"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,122 @@
|
||||
/**
|
||||
* Copyright (c) 2017-present, Facebook, Inc.
|
||||
*
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*/
|
||||
|
||||
const React = require('react');
|
||||
const Components = require(`${process.cwd()}/core/Components.js`);
|
||||
const Block = Components.Block;
|
||||
const Breakpoint = Components.Breakpoint;
|
||||
|
||||
const Background = props => {
|
||||
const { config: siteConfig } = props;
|
||||
const { baseUrl } = siteConfig;
|
||||
return (
|
||||
<div className="mainWrapper">
|
||||
<Block>
|
||||
<Block.Container column>
|
||||
<Block.TitleBox story>The Spotify Story</Block.TitleBox>
|
||||
<Block.TextBox>
|
||||
<Block.Paragraph>
|
||||
Backstage was born out of necessity at Spotify. We found that as
|
||||
we grew, our infrastructure was becoming more fragmented, our
|
||||
engineers less productive.{' '}
|
||||
</Block.Paragraph>
|
||||
|
||||
<Block.Paragraph>
|
||||
Instead of building and testing code, teams were spending more
|
||||
time looking for the right information just to get started.
|
||||
“Where’s the API for that service we’re all supposed to be using?”
|
||||
“What version of that framework is everyone on?” “This service
|
||||
isn’t responding, who owns it?” “I can’t find documentation for
|
||||
anything!”{' '}
|
||||
</Block.Paragraph>
|
||||
<Breakpoint
|
||||
narrow={
|
||||
<Block small>
|
||||
<Block.QuoteContainer>
|
||||
<Block.Divider quote />
|
||||
|
||||
<Block.Quote>
|
||||
One place for everything. Accessible to everyone.
|
||||
</Block.Quote>
|
||||
</Block.QuoteContainer>
|
||||
</Block>
|
||||
}
|
||||
></Breakpoint>
|
||||
<Block.Paragraph>
|
||||
Context switching and cognitive overload were dragging engineers
|
||||
down, day by day. We needed to make it easier for our engineers to
|
||||
do their work without having to become an expert in every aspect
|
||||
of infrastructure tooling.
|
||||
</Block.Paragraph>
|
||||
|
||||
<Block.Paragraph>
|
||||
Our idea was to centralize and simplify end-to-end software
|
||||
development with an abstraction layer that sits on top of all of
|
||||
our infrastructure and developer tooling. That’s Backstage.
|
||||
</Block.Paragraph>
|
||||
|
||||
<Block.Paragraph>
|
||||
It’s a developer portal powered by a centralized service catalog —
|
||||
with a plugin architecture that makes it endlessly extensible and
|
||||
customizable.
|
||||
</Block.Paragraph>
|
||||
|
||||
<Block.Paragraph>
|
||||
Manage all your services, software, tooling, and testing in
|
||||
Backstage. Start building a new microservice using an automated
|
||||
template in Backstage. Create, maintain, and find the
|
||||
documentation for all that software in Backstage.{' '}
|
||||
</Block.Paragraph>
|
||||
|
||||
<Block.Paragraph>
|
||||
One place for everything. Accessible to everyone.
|
||||
</Block.Paragraph>
|
||||
<Breakpoint
|
||||
narrow={
|
||||
<Block small>
|
||||
<Block.LinkButton stretch href={'https://backstage.io/'}>
|
||||
Explore Features
|
||||
</Block.LinkButton>
|
||||
</Block>
|
||||
}
|
||||
></Breakpoint>
|
||||
</Block.TextBox>
|
||||
</Block.Container>
|
||||
</Block>
|
||||
<Breakpoint
|
||||
wide={
|
||||
<Block small>
|
||||
<Block.QuoteContainer>
|
||||
<Block.Divider quote />
|
||||
|
||||
<Block.Quote>
|
||||
One place for everything. Accessible to everyone.
|
||||
</Block.Quote>
|
||||
<Block.LinkButton stretch href={'https://backstage.io/'}>
|
||||
Explore Features
|
||||
</Block.LinkButton>
|
||||
</Block.QuoteContainer>
|
||||
</Block>
|
||||
}
|
||||
></Breakpoint>
|
||||
|
||||
<div
|
||||
style={{
|
||||
zIndex: -1,
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
backgroundImage: `linear-gradient( to bottom, rgb(18, 18, 18), rgba(0, 0, 0, 0) ), url(../img/dot.svg);`,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
module.exports = Background;
|
||||
@@ -0,0 +1,217 @@
|
||||
/**
|
||||
* Copyright (c) 2017-present, Facebook, Inc.
|
||||
*
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*/
|
||||
|
||||
const React = require('react');
|
||||
const Components = require(`${process.cwd()}/core/Components.js`);
|
||||
const Block = Components.Block;
|
||||
|
||||
const Background = props => {
|
||||
const { config: siteConfig } = props;
|
||||
const { baseUrl } = siteConfig;
|
||||
return (
|
||||
<main className="MainContent">
|
||||
<Block small className="stripe-bottom bg-black-grey">
|
||||
<Block.Container style={{ justifyContent: 'flex-start' }}>
|
||||
<Block.TextBox>
|
||||
<Block.Title>See us in action.</Block.Title>
|
||||
<Block.Paragraph>
|
||||
To illustrate the potential of Backstage, we’re showing you{' '}
|
||||
<a href="https://labs.spotify.com/2020/04/21/how-we-use-backstage-at-spotify/">
|
||||
how we use it here at Spotify
|
||||
</a>
|
||||
. The videos below feature the custom plugins and templates that
|
||||
we built for our internal version of Backstage. You can use
|
||||
Backstage to build the developer portal you want — integrating the
|
||||
tools that you use in your own infrastructure ecosystem. (Or get
|
||||
started by building an open source plugin for Backstage that
|
||||
everyone can use, like our{' '}
|
||||
<a href="https://backstage.io/blog/2020/04/06/lighthouse-plugin">
|
||||
Lighthouse Plugin
|
||||
</a>
|
||||
.)
|
||||
</Block.Paragraph>
|
||||
</Block.TextBox>
|
||||
<Block.Graphics>
|
||||
<Block.Graphic
|
||||
x={-7}
|
||||
y={-12}
|
||||
width={120}
|
||||
src={`${baseUrl}img/demo-illustration.svg`}
|
||||
/>
|
||||
</Block.Graphics>
|
||||
</Block.Container>
|
||||
</Block>
|
||||
|
||||
<Block small className="stripe bg-black">
|
||||
<Block.Container style={{ justifyContent: 'flex-start' }}>
|
||||
<Block.TextBox>
|
||||
<Block.Title>Introduction to Backstage</Block.Title>
|
||||
<Block.Paragraph>
|
||||
Backstage is an open source platform for building developer
|
||||
portals. We’ve been using our homegrown version at Spotify for
|
||||
years — so it’s already packed with features. (We have over 120
|
||||
internal plugins, built by 60 different teams.) In this live demo
|
||||
recording, Stefan Ålund, product manager for Backstage, tells the
|
||||
origin story of Backstage and gives you a tour of how we use it
|
||||
here at Spotify.
|
||||
</Block.Paragraph>
|
||||
<Block.LinkButton
|
||||
href={'https://www.youtube.com/watch?v=1XtJ5FAOjPk'}
|
||||
>
|
||||
Watch now
|
||||
</Block.LinkButton>
|
||||
</Block.TextBox>
|
||||
<Block.MediaFrame>
|
||||
<iframe
|
||||
width="800"
|
||||
height="500"
|
||||
src="https://www.youtube.com/embed/1XtJ5FAOjPk"
|
||||
frameBorder="0"
|
||||
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
|
||||
allowFullScreen
|
||||
></iframe>
|
||||
</Block.MediaFrame>
|
||||
</Block.Container>
|
||||
</Block>
|
||||
|
||||
<Block small className="bg-black-grey">
|
||||
<Block.Container style={{ justifyContent: 'flex-start' }}>
|
||||
<Block.TextBox>
|
||||
<Block.Title>Manage your tech health</Block.Title>
|
||||
<Block.Paragraph>
|
||||
Instead of manually updating a spreadsheet, what if you had a
|
||||
beautiful dashboard that could give you an instant, interactive
|
||||
picture of your entire org’s tech stack? That’s how we do it at
|
||||
Spotify. With our Tech Insights plugin for Backstage, anyone at
|
||||
Spotify can see which version of which software anyone else at
|
||||
Spotify is using — and a whole a lot more. From managing
|
||||
migrations to fighting tech entropy, Backstage makes managing our
|
||||
tech health actually kind of pleasant.
|
||||
</Block.Paragraph>
|
||||
|
||||
<Block.LinkButton
|
||||
href={
|
||||
'https://www.youtube.com/watch?v=K3xz6VAbgH8&list=PLf1KFlSkDLIBtMGwRDfaVlKMqTMrjD2yO&index=6'
|
||||
}
|
||||
>
|
||||
Watch now
|
||||
</Block.LinkButton>
|
||||
</Block.TextBox>
|
||||
<Block.MediaFrame>
|
||||
<iframe
|
||||
width="800"
|
||||
height="500"
|
||||
src="https://www.youtube.com/embed/K3xz6VAbgH8"
|
||||
frameBorder="0"
|
||||
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
|
||||
allowFullScreen
|
||||
></iframe>
|
||||
</Block.MediaFrame>
|
||||
</Block.Container>
|
||||
</Block>
|
||||
|
||||
<Block small className="stripe bg-black">
|
||||
<Block.Container style={{ justifyContent: 'flex-start' }}>
|
||||
<Block.TextBox>
|
||||
<Block.Title>Create a microservice</Block.Title>
|
||||
<Block.Paragraph>
|
||||
You’re a Spotify engineer about to build a new microservice (or
|
||||
any component) using Spring Boot. Where do you start? Search for a
|
||||
quick start guide online? Create an empty repo on GitHub? Copy and
|
||||
paste an old project? Nope. Just go to Backstage, and you’ll be up
|
||||
and running in two minutes — with a “Hello World” app, CI, and
|
||||
documentation all automatically set up and configured in a
|
||||
standardized way.
|
||||
</Block.Paragraph>
|
||||
|
||||
<Block.LinkButton
|
||||
href={'https://www.youtube.com/watch?v=U1iwe3L5pzc'}
|
||||
>
|
||||
Watch now
|
||||
</Block.LinkButton>
|
||||
</Block.TextBox>
|
||||
<Block.MediaFrame>
|
||||
<iframe
|
||||
width="800"
|
||||
height="500"
|
||||
src="https://www.youtube.com/embed/U1iwe3L5pzc"
|
||||
frameBorder="0"
|
||||
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
|
||||
allowFullScreen
|
||||
></iframe>
|
||||
</Block.MediaFrame>
|
||||
</Block.Container>
|
||||
</Block>
|
||||
|
||||
<Block small className="bg-black-grey">
|
||||
<Block.Container style={{ justifyContent: 'flex-start' }}>
|
||||
<Block.TextBox>
|
||||
<Block.Title>Search all your services</Block.Title>
|
||||
<Block.Paragraph>
|
||||
All of Spotify’s services are automatically indexed in Backstage.
|
||||
So our engineers can stop playing detective — no more spamming
|
||||
Slack channels asking if anyone knows who owns a particular
|
||||
service and where you can find its API, only to discover that the
|
||||
owner went on sabbatical three months ago and you have to hunt
|
||||
them down on a mountain in Tibet where they’re on a 12-day silent
|
||||
meditation retreat. At Spotify, anyone can always find anyone
|
||||
else’s service, inspect its APIs, and contact its current owner —
|
||||
all with one search.
|
||||
</Block.Paragraph>
|
||||
<Block.LinkButton
|
||||
href={'https://www.youtube.com/watch?v=vcDL9tOv7Eo'}
|
||||
>
|
||||
Watch now
|
||||
</Block.LinkButton>
|
||||
</Block.TextBox>
|
||||
<Block.MediaFrame>
|
||||
<iframe
|
||||
width="800"
|
||||
height="500"
|
||||
src="https://www.youtube.com/embed/vcDL9tOv7Eo"
|
||||
frameBorder="0"
|
||||
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
|
||||
allowFullScreen
|
||||
></iframe>
|
||||
</Block.MediaFrame>
|
||||
</Block.Container>
|
||||
</Block>
|
||||
|
||||
<Block className="stripe-bottom bg-black-grey">
|
||||
<Block.Container style={{ justifyContent: 'flex-start' }}>
|
||||
<Block.TextBox>
|
||||
<Block.Title>Manage data pipelines</Block.Title>
|
||||
<Block.Paragraph>
|
||||
We manage a lot of data pipelines (also known as workflows) here
|
||||
at Spotify. So, of course, we made a great workflows plugin for
|
||||
our version of Backstage. All our workflow tools — including a
|
||||
scheduler, log inspector, data lineage graph, and configurable
|
||||
alerts — are integrated into one simple interface.
|
||||
</Block.Paragraph>
|
||||
<Block.LinkButton
|
||||
href={'https://www.youtube.com/watch?v=rH46MLNZIPM '}
|
||||
>
|
||||
Watch now
|
||||
</Block.LinkButton>
|
||||
</Block.TextBox>
|
||||
<Block.MediaFrame>
|
||||
<iframe
|
||||
width="800"
|
||||
height="500"
|
||||
src="https://www.youtube.com/embed/rH46MLNZIPM"
|
||||
frameBorder="0"
|
||||
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
|
||||
allowFullScreen
|
||||
></iframe>
|
||||
</Block.MediaFrame>
|
||||
</Block.Container>
|
||||
</Block>
|
||||
</main>
|
||||
);
|
||||
};
|
||||
|
||||
module.exports = Background;
|
||||
@@ -0,0 +1,474 @@
|
||||
/**
|
||||
* Copyright (c) 2017-present, Facebook, Inc.
|
||||
*
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*/
|
||||
|
||||
const React = require('react');
|
||||
const Components = require(`${process.cwd()}/core/Components.js`);
|
||||
const Block = Components.Block;
|
||||
const ActionBlock = Components.ActionBlock;
|
||||
const Breakpoint = Components.Breakpoint;
|
||||
const BulletLine = Components.BulletLine;
|
||||
|
||||
class Index extends React.Component {
|
||||
render() {
|
||||
const { config: siteConfig } = this.props;
|
||||
const { baseUrl } = siteConfig;
|
||||
|
||||
return (
|
||||
<main className="MainContent">
|
||||
<Block small className="bg-black-grey stripe-bottom">
|
||||
<Block.Container>
|
||||
<Block.TextBox>
|
||||
<Block.Title main>
|
||||
An open platform for building developer portals
|
||||
</Block.Title>
|
||||
<Block.Paragraph>
|
||||
Powered by a centralized service catalog, Backstage restores
|
||||
order to your infrastructure. So your product teams can ship
|
||||
high-quality code quickly — without compromising autonomy.
|
||||
</Block.Paragraph>
|
||||
<Block.LinkButton
|
||||
href={'https://github.com/spotify/backstage#getting-started'}
|
||||
>
|
||||
GitHub
|
||||
</Block.LinkButton>
|
||||
</Block.TextBox>
|
||||
<Block.Graphics>
|
||||
<Block.Graphic
|
||||
x={-12.5}
|
||||
y={16}
|
||||
width={120}
|
||||
src={`${baseUrl}img/laptop.svg`}
|
||||
/>
|
||||
<Block.Graphic
|
||||
x={5.8}
|
||||
y={20}
|
||||
width={88}
|
||||
src={`${baseUrl}animations/backstage-logos-hero-8.gif`}
|
||||
/>
|
||||
</Block.Graphics>
|
||||
</Block.Container>
|
||||
</Block>
|
||||
|
||||
<Block small className="stripe-top bg-black">
|
||||
<Block.Container wrapped>
|
||||
<Block.TextBox>
|
||||
<img
|
||||
className="Block__GIF"
|
||||
src={`${baseUrl}animations/backstage-speed-paradox-7.gif`}
|
||||
/>
|
||||
<Block.SmallTitle small>The Speed Paradox</Block.SmallTitle>
|
||||
<Block.Paragraph>
|
||||
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.
|
||||
</Block.Paragraph>
|
||||
</Block.TextBox>
|
||||
<Block.TextBox>
|
||||
<img
|
||||
className="Block__GIF"
|
||||
src={`${baseUrl}animations/backstage-standards-paradox-4.gif`}
|
||||
/>
|
||||
<Block.SmallTitle small>The Standards Paradox</Block.SmallTitle>
|
||||
<Block.Paragraph>
|
||||
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.
|
||||
</Block.Paragraph>
|
||||
</Block.TextBox>
|
||||
</Block.Container>
|
||||
</Block>
|
||||
|
||||
<Block className="stripe-top bg-teal-top-right" wrapped>
|
||||
<Block.Container wrapped>
|
||||
<Block.TextBox wide>
|
||||
{' '}
|
||||
<img
|
||||
className="Block__GIF"
|
||||
src={`${baseUrl}animations/backstage-service-catalog-icon-1.gif`}
|
||||
/>
|
||||
<Block.Subtitle>
|
||||
Backstage Service Catalog{' '}
|
||||
<a
|
||||
title="Submit feedback for this feature. Click to learn more about this release."
|
||||
href="https://backstage.io/blog/2020/06/22/backstage-service-catalog-alpha"
|
||||
>
|
||||
(alpha)
|
||||
</a>
|
||||
</Block.Subtitle>
|
||||
<Block.Title half>
|
||||
Build an ecosystem, not a wilderness
|
||||
</Block.Title>
|
||||
</Block.TextBox>
|
||||
<Breakpoint
|
||||
narrow={
|
||||
<Block.Graphics padding={5}>
|
||||
<Block.Graphic
|
||||
y={-8}
|
||||
width={100}
|
||||
src={`${baseUrl}img/components-with-filter-small.png`}
|
||||
/>
|
||||
</Block.Graphics>
|
||||
}
|
||||
/>
|
||||
<Block.TextBox small>
|
||||
<BulletLine />
|
||||
<Block.SmallTitle small>
|
||||
Manage all your software, all in one place{' '}
|
||||
</Block.SmallTitle>
|
||||
<Block.Paragraph>
|
||||
Backstage makes it easy for one team to manage 10 services — and
|
||||
makes it possible for your company to manage thousands of them
|
||||
</Block.Paragraph>
|
||||
</Block.TextBox>
|
||||
<Block.TextBox small>
|
||||
<BulletLine />
|
||||
<Block.SmallTitle small>A uniform overview</Block.SmallTitle>
|
||||
<Block.Paragraph>
|
||||
Every team can see all the services they own and related
|
||||
resources (deployments, data pipelines, pull request status,
|
||||
etc.)
|
||||
</Block.Paragraph>
|
||||
</Block.TextBox>
|
||||
<Block.Image
|
||||
wide
|
||||
style={{
|
||||
background: `url(${baseUrl}img/components-with-filter.png)`,
|
||||
backgroundSize: '594px 435.5px',
|
||||
width: '594px',
|
||||
height: '435.5px',
|
||||
margin: '-380px 105px 0 10px',
|
||||
}}
|
||||
/>
|
||||
<Block.TextBox small>
|
||||
<BulletLine />
|
||||
<Block.SmallTitle small>Metadata on tap</Block.SmallTitle>
|
||||
<Block.Paragraph>
|
||||
All that information can be shared with plugins inside Backstage
|
||||
to enable other management features, like resource monitoring
|
||||
and testing
|
||||
</Block.Paragraph>
|
||||
</Block.TextBox>
|
||||
|
||||
<Block.TextBox small>
|
||||
<BulletLine />
|
||||
<Block.SmallTitle small>Not just services</Block.SmallTitle>
|
||||
<Block.Paragraph>
|
||||
Libraries, websites, ML models — you name it, Backstage knows
|
||||
all about it, including who owns it, dependencies, and more
|
||||
</Block.Paragraph>
|
||||
</Block.TextBox>
|
||||
|
||||
<Block.TextBox small>
|
||||
<BulletLine />
|
||||
<Block.SmallTitle small>
|
||||
Discoverability & accountability
|
||||
</Block.SmallTitle>
|
||||
<Block.Paragraph>
|
||||
No more orphan software hiding in the dark corners of your tech
|
||||
stack
|
||||
</Block.Paragraph>
|
||||
</Block.TextBox>
|
||||
<Block.TextBox small></Block.TextBox>
|
||||
</Block.Container>
|
||||
</Block>
|
||||
|
||||
<ActionBlock className="stripe bg-teal">
|
||||
<ActionBlock.Title>
|
||||
Learn more about the service catalog
|
||||
</ActionBlock.Title>
|
||||
<ActionBlock.Link
|
||||
href={`https://backstage.io/blog/2020/06/22/backstage-service-catalog-alpha`}
|
||||
>
|
||||
Read
|
||||
</ActionBlock.Link>
|
||||
</ActionBlock>
|
||||
|
||||
<Block className="stripe-top bg-teal-bottom" wrapped>
|
||||
<Block.Container wrapped>
|
||||
<Block.TextBox wide>
|
||||
<img
|
||||
className="Block__GIF"
|
||||
src={`${baseUrl}animations/backstage-software-templates-icon-5.gif`}
|
||||
/>
|
||||
<Block.Subtitle>
|
||||
Backstage Software Templates{' '}
|
||||
<a
|
||||
title="Submit feedback for this feature. Click to learn more about this release."
|
||||
href="https://backstage.io/blog/2020/08/05/announcing-backstage-software-templates"
|
||||
>
|
||||
(alpha)
|
||||
</a>
|
||||
</Block.Subtitle>
|
||||
<Block.Title small>Standards can set you free</Block.Title>
|
||||
</Block.TextBox>
|
||||
<Breakpoint
|
||||
narrow={
|
||||
<Block.Graphics padding={20}>
|
||||
<Block.Graphic
|
||||
y={-38}
|
||||
width={100}
|
||||
src={`${baseUrl}img/service-cards.png`}
|
||||
/>
|
||||
</Block.Graphics>
|
||||
}
|
||||
/>
|
||||
<Block.TextBox small>
|
||||
<BulletLine />
|
||||
<Block.SmallTitle small>
|
||||
Like automated getting started guides
|
||||
</Block.SmallTitle>
|
||||
<Block.Paragraph>
|
||||
Using templates, engineers can spin up a new microservice with
|
||||
your organization’s best practices built-in, right from the
|
||||
start
|
||||
</Block.Paragraph>
|
||||
</Block.TextBox>
|
||||
|
||||
<Block.TextBox small>
|
||||
<BulletLine />
|
||||
<Block.SmallTitle small>Push-button deployment</Block.SmallTitle>
|
||||
<Block.Paragraph>
|
||||
Click a button to create a Spring Boot project with your repo
|
||||
automatically configured on GitHub and your CI already running
|
||||
the first build
|
||||
</Block.Paragraph>
|
||||
</Block.TextBox>
|
||||
|
||||
<Block.TextBox small>
|
||||
<BulletLine />
|
||||
<Block.SmallTitle small>Built to your standards</Block.SmallTitle>
|
||||
<Block.Paragraph>
|
||||
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
|
||||
</Block.Paragraph>
|
||||
</Block.TextBox>
|
||||
|
||||
<Block.TextBox small>
|
||||
<BulletLine />
|
||||
<Block.SmallTitle small>
|
||||
Golden Paths pave the way
|
||||
</Block.SmallTitle>
|
||||
<Block.Paragraph>
|
||||
When the right way is also the easiest way, engineers get up and
|
||||
running faster — and more safely
|
||||
</Block.Paragraph>
|
||||
</Block.TextBox>
|
||||
<Breakpoint
|
||||
wide={
|
||||
<Block.Graphics>
|
||||
<Block.Graphic
|
||||
x={-50}
|
||||
y={-2}
|
||||
width={200}
|
||||
src={`${baseUrl}img/cards.png`}
|
||||
/>
|
||||
</Block.Graphics>
|
||||
}
|
||||
/>
|
||||
</Block.Container>
|
||||
</Block>
|
||||
|
||||
<ActionBlock className="stripe bg-teal">
|
||||
<ActionBlock.Title>
|
||||
Build your own software templates
|
||||
</ActionBlock.Title>
|
||||
<ActionBlock.Link
|
||||
href={`https://github.com/spotify/backstage/blob/master/docs/features/software-templates/extending/index.md`}
|
||||
>
|
||||
Contribute
|
||||
</ActionBlock.Link>
|
||||
</ActionBlock>
|
||||
|
||||
<Block className="stripe-top bg-teal-bottom" wrapped>
|
||||
<Block.Container wrapped>
|
||||
<Block.TextBox wide>
|
||||
<img
|
||||
className="Block__GIF"
|
||||
src={`${baseUrl}animations/backstage-techdocs-icon-1.gif`}
|
||||
/>
|
||||
|
||||
<Block.Subtitle>
|
||||
Backstage TechDocs <span>(Coming Soon)</span>
|
||||
</Block.Subtitle>
|
||||
<Block.Title small>Docs like code</Block.Title>
|
||||
</Block.TextBox>
|
||||
<Breakpoint
|
||||
narrow={
|
||||
<React.Fragment>
|
||||
<Block.Graphics padding={26}>
|
||||
<Block.Graphic
|
||||
x={-1.4}
|
||||
y={-45}
|
||||
width={107}
|
||||
src={`${baseUrl}img/techdocs-static-mobile.png`}
|
||||
/>
|
||||
</Block.Graphics>
|
||||
</React.Fragment>
|
||||
}
|
||||
/>
|
||||
<Block.TextBox small>
|
||||
<BulletLine />
|
||||
<Block.SmallTitle small>Free documentation</Block.SmallTitle>
|
||||
<Block.Paragraph>
|
||||
Whenever you use a Backstage Software Template, your project
|
||||
automatically gets a TechDocs site, for free
|
||||
</Block.Paragraph>
|
||||
</Block.TextBox>
|
||||
|
||||
<Block.TextBox small>
|
||||
<BulletLine />
|
||||
<Block.SmallTitle small>Easy to write</Block.SmallTitle>
|
||||
<Block.Paragraph>
|
||||
With our docs-like-code approach, engineers write their
|
||||
documentation in Markdown files right alongside their code
|
||||
</Block.Paragraph>
|
||||
</Block.TextBox>
|
||||
|
||||
<Block.TextBox small>
|
||||
<BulletLine />
|
||||
<Block.SmallTitle small>Easy to maintain</Block.SmallTitle>
|
||||
<Block.Paragraph>
|
||||
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>
|
||||
</Block.TextBox>
|
||||
|
||||
<Block.TextBox small>
|
||||
<BulletLine />
|
||||
<Block.SmallTitle small>Easy to find and use</Block.SmallTitle>
|
||||
<Block.Paragraph>
|
||||
Since all your documentation is in Backstage, finding any
|
||||
TechDoc is just a search query away
|
||||
</Block.Paragraph>
|
||||
</Block.TextBox>
|
||||
<Breakpoint
|
||||
wide={
|
||||
<img
|
||||
style={{ margin: 'auto' }}
|
||||
src={`${baseUrl}img/techdocs-web.png`}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
</Block.Container>
|
||||
</Block>
|
||||
|
||||
<ActionBlock className="stripe bg-teal">
|
||||
<ActionBlock.Title>Subscribe to our newsletter</ActionBlock.Title>
|
||||
<ActionBlock.Subtitle>
|
||||
TechDocs is our most used feature at Spotify. Be the first to know
|
||||
when{' '}
|
||||
<a href="https://github.com/spotify/backstage/projects/5">
|
||||
the open source version
|
||||
</a>{' '}
|
||||
ships.
|
||||
</ActionBlock.Subtitle>
|
||||
<ActionBlock.Link
|
||||
href={`https://mailchi.mp/spotify/backstage-community`}
|
||||
>
|
||||
Subscribe
|
||||
</ActionBlock.Link>
|
||||
</ActionBlock>
|
||||
|
||||
<Block className="stripe-top bg-teal-bottom" wrapped>
|
||||
<Block.Container wrapped>
|
||||
<Block.TextBox wide>
|
||||
<img
|
||||
className="Block__GIF"
|
||||
src={`${baseUrl}animations/backstage-plugin-icon-2.gif`}
|
||||
/>
|
||||
|
||||
<Block.Subtitle>Customize Backstage with plugins</Block.Subtitle>
|
||||
<Block.Title small>
|
||||
An app store for your infrastructure
|
||||
</Block.Title>
|
||||
</Block.TextBox>
|
||||
<Breakpoint
|
||||
narrow={
|
||||
<Block.Graphics padding={10}>
|
||||
<Block.Graphic
|
||||
y={-20}
|
||||
width={100}
|
||||
src={`${baseUrl}img/plugins.png`}
|
||||
/>
|
||||
</Block.Graphics>
|
||||
}
|
||||
/>
|
||||
<Block.TextBox small>
|
||||
<BulletLine />
|
||||
<Block.SmallTitle small>Add functionality</Block.SmallTitle>
|
||||
<Block.Paragraph>
|
||||
Want scalable website testing? Add the{' '}
|
||||
<a href="https://backstage.io/blog/2020/04/06/lighthouse-plugin">
|
||||
Lighthouse
|
||||
</a>{' '}
|
||||
plugin. Wondering about recommended frameworks? Add the{' '}
|
||||
<a href="https://backstage.io/blog/2020/05/14/tech-radar-plugin">
|
||||
Tech Radar
|
||||
</a>{' '}
|
||||
plugin.{' '}
|
||||
</Block.Paragraph>
|
||||
</Block.TextBox>
|
||||
|
||||
<Block.TextBox small>
|
||||
<BulletLine />
|
||||
<Block.SmallTitle small>BYO Plugins</Block.SmallTitle>
|
||||
<Block.Paragraph>
|
||||
If you don’t see the plugin you need, it’s simple to build your
|
||||
own
|
||||
</Block.Paragraph>
|
||||
</Block.TextBox>
|
||||
|
||||
<Block.TextBox small>
|
||||
<BulletLine />
|
||||
<Block.SmallTitle small>
|
||||
Integrate your own custom tooling
|
||||
</Block.SmallTitle>
|
||||
<Block.Paragraph>
|
||||
Building internal plugins lets you tailor your version of
|
||||
Backstage to be a perfect fit for your infrastructure
|
||||
</Block.Paragraph>
|
||||
</Block.TextBox>
|
||||
|
||||
<Block.TextBox small>
|
||||
<BulletLine />
|
||||
<Block.SmallTitle small>
|
||||
Share with the community
|
||||
</Block.SmallTitle>
|
||||
<Block.Paragraph>
|
||||
Building{' '}
|
||||
<a href="https://github.com/spotify/backstage/blob/master/docs/FAQ.md#how-do-i-find-out-if-a-plugin-already-exists">
|
||||
open source plugins
|
||||
</a>{' '}
|
||||
contributes to the entire Backstage ecosystem, which benefits
|
||||
everyone
|
||||
</Block.Paragraph>
|
||||
</Block.TextBox>
|
||||
|
||||
<Breakpoint
|
||||
wide={<img src={`${baseUrl}img/cards-plugins.png`} />}
|
||||
/>
|
||||
</Block.Container>
|
||||
</Block>
|
||||
|
||||
<ActionBlock className="stripe-top bg-teal">
|
||||
<ActionBlock.Title>Build a plugin</ActionBlock.Title>
|
||||
<ActionBlock.Link href="https://github.com/spotify/backstage/blob/master/docs/plugins/create-a-plugin.md">
|
||||
Contribute
|
||||
</ActionBlock.Link>
|
||||
</ActionBlock>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = Index;
|
||||
@@ -0,0 +1,17 @@
|
||||
{
|
||||
"docs": {
|
||||
"Getting Started": ["getting-started/getting-started-index"],
|
||||
"Plugins": [
|
||||
"developing-a-plugin",
|
||||
"plugin-api",
|
||||
"create-plugin-api-v2",
|
||||
"plugin-structure",
|
||||
"components",
|
||||
"errors-notifications"
|
||||
],
|
||||
"Test": ["test"],
|
||||
"API Overview": ["apis"],
|
||||
"Layout components": ["layout-components"],
|
||||
"Testing": ["testing-with-jest"]
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,123 @@
|
||||
/**
|
||||
* Copyright (c) 2017-present, Facebook, Inc.
|
||||
*
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*/
|
||||
|
||||
// See https://docusaurus.io/docs/site-config for all the possible
|
||||
// site configuration options.
|
||||
|
||||
// List of projects/orgs using your project for the users page.
|
||||
const users = [];
|
||||
|
||||
const siteConfig = {
|
||||
title: 'Backstage', // Title for your website.
|
||||
tagline: 'An open platform for building developer portals',
|
||||
url: 'https://backstage.io', // Your website URL
|
||||
cname: 'backstage.io',
|
||||
baseUrl: '/', // Base URL for your project */
|
||||
// For github.io type URLs, you would set the url and baseUrl like:
|
||||
// url: 'https://facebook.github.io',
|
||||
// baseUrl: '/test-site/',
|
||||
|
||||
// Used for publishing and more
|
||||
projectName: 'backstage',
|
||||
organizationName: 'Spotify',
|
||||
fossWebsite: 'https://spotify.github.io/',
|
||||
// For top-level user or org sites, the organization is still the same.
|
||||
// e.g., for the https://JoelMarcey.github.io site, it would be set like...
|
||||
// organizationName: 'JoelMarcey'
|
||||
|
||||
// Google Analytics
|
||||
gaTrackingId: 'UA-48912878-10',
|
||||
|
||||
// For no header links in the top nav bar -> headerLinks: [],
|
||||
headerLinks: [
|
||||
{
|
||||
href: 'https://github.com/spotify/backstage#backstage',
|
||||
label: 'GitHub',
|
||||
},
|
||||
// {
|
||||
// doc: 'getting-started/getting-started-index',
|
||||
// label: 'Docs',
|
||||
// },
|
||||
{
|
||||
page: 'blog',
|
||||
blog: true,
|
||||
label: 'Blog',
|
||||
},
|
||||
{
|
||||
page: 'demos',
|
||||
label: 'Demos',
|
||||
},
|
||||
{
|
||||
page: 'background',
|
||||
label: 'The Spotify story',
|
||||
},
|
||||
{
|
||||
href: 'https://mailchi.mp/spotify/backstage-community',
|
||||
label: 'Newsletter',
|
||||
},
|
||||
],
|
||||
|
||||
/* path to images for header/footer */
|
||||
// headerIcon: "img/android-chrome-192x192.png",
|
||||
footerIcon: 'img/android-chrome-192x192.png',
|
||||
favicon: 'img/favicon.svg',
|
||||
|
||||
/* Colors for website */
|
||||
colors: {
|
||||
primaryColor: '#36BAA2',
|
||||
secondaryColor: '#121212',
|
||||
textColor: '#FFFFFF',
|
||||
navigatorTitleTextColor: '#9e9e9e',
|
||||
navigatorItemTextColor: '#616161',
|
||||
},
|
||||
|
||||
/* Colors for syntax highlighting */
|
||||
highlight: {
|
||||
theme: 'dark',
|
||||
},
|
||||
|
||||
// This copyright info is used in /core/Footer.js and blog RSS/Atom feeds.
|
||||
copyright: `Copyright © ${new Date().getFullYear()} Spotify AB`,
|
||||
|
||||
highlight: {
|
||||
// Highlight.js theme to use for syntax highlighting in code blocks.
|
||||
theme: 'monokai',
|
||||
},
|
||||
|
||||
// Add custom scripts here that would be placed in <script> tags.
|
||||
scripts: ['https://buttons.github.io/buttons.js'],
|
||||
|
||||
// On page navigation for the current documentation page.
|
||||
onPageNav: 'separate',
|
||||
// No .html extensions for paths.
|
||||
cleanUrl: true,
|
||||
|
||||
// Open Graph and Twitter card images.
|
||||
ogImage: 'img/logo-gradient-on-dark.svg',
|
||||
twitterImage: 'img/logo-gradient-on-dark.svg',
|
||||
|
||||
// For sites with a sizable amount of content, set collapsible to true.
|
||||
// Expand/collapse the links and subcategories under categories.
|
||||
docsSideNavCollapsible: true,
|
||||
|
||||
// Show documentation's last contributor's name.
|
||||
// enableUpdateBy: true,
|
||||
|
||||
// Show documentation's last update time.
|
||||
// enableUpdateTime: true,
|
||||
|
||||
// You may provide arbitrary config keys to be used as needed by your
|
||||
// template. For example, if you need your repo's URL...
|
||||
repoUrl: 'https://github.com/spotify/backstage',
|
||||
twitterUsername: 'SpotifyEng',
|
||||
|
||||
stylesheets: [
|
||||
'https://fonts.googleapis.com/css?family=IBM+Plex+Mono:500,700&display=swap',
|
||||
],
|
||||
};
|
||||
|
||||
module.exports = siteConfig;
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 1.4 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 348 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 509 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 406 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 377 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 306 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 198 KiB |
File diff suppressed because it is too large
Load Diff
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 56 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 192 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 340 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 196 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 670 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 157 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 69 KiB |
@@ -0,0 +1,68 @@
|
||||
<svg width="1203" height="1128" viewBox="0 0 1203 1128" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle r="18.901" transform="matrix(0 1 1 0 218.021 745.539)" fill="#9BF0E1"/>
|
||||
<rect width="260.413" height="37.8019" transform="matrix(0 1 1 0 199.119 743.439)" fill="url(#paint0_linear)"/>
|
||||
<circle r="18.901" transform="matrix(0 1 1 0 314.626 678.336)" fill="#9BF0E1"/>
|
||||
<rect width="327.617" height="37.8019" transform="matrix(0 1 1 0 295.724 676.236)" fill="url(#paint1_linear)"/>
|
||||
<ellipse rx="22.3294" ry="18.901" transform="matrix(0 1 1 0 990.866 222.336)" fill="#9BF0E1"/>
|
||||
<rect width="779.047" height="37.8019" transform="matrix(0 1 1 0 971.96 224.814)" fill="url(#paint2_linear)"/>
|
||||
<circle r="18.901" transform="matrix(0 1 1 0 411.231 594.331)" fill="#9BF0E1"/>
|
||||
<rect width="411.621" height="37.8019" transform="matrix(0 1 1 0 392.329 592.231)" fill="url(#paint3_linear)"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M203.419 912.067L194.922 940.336L919.676 1123.91L1202.33 183.574L1152.73 171.01C1113.55 311.407 1027.41 459.533 898.339 591.608C688.649 806.179 420.821 921.924 203.419 912.067Z" fill="url(#paint4_radial)"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.49696 916.158L0 944.426L724.755 1128L1007.41 187.664L957.809 175.101C918.627 315.497 832.49 463.624 703.419 595.699C493.729 810.27 225.899 926.015 8.49696 916.158Z" fill="url(#paint5_radial)"/>
|
||||
<circle r="18.901" transform="matrix(0 1 1 0 507.837 480.944)" fill="#F037A5"/>
|
||||
<rect width="525.027" height="37.8019" transform="matrix(0 1 1 0 488.935 478.844)" fill="url(#paint6_linear)"/>
|
||||
<circle r="18.901" transform="matrix(0 1 1 0 604.439 539.728)" fill="#9BF0E1"/>
|
||||
<rect width="466.224" height="37.8019" transform="matrix(0 1 1 0 585.539 537.63)" fill="url(#paint7_linear)"/>
|
||||
<circle r="18.901" transform="matrix(0 1 1 0 701.049 594.331)" fill="#9BF0E1"/>
|
||||
<rect width="407.421" height="37.8019" transform="matrix(0 1 1 0 682.147 596.431)" fill="url(#paint8_linear)"/>
|
||||
<circle r="18.901" transform="matrix(0 1 1 0 797.652 510.345)" fill="#9BF0E1"/>
|
||||
<rect width="495.625" height="37.8019" transform="matrix(0 1 1 0 778.75 508.246)" fill="url(#paint9_linear)"/>
|
||||
<ellipse rx="21.4182" ry="18.901" transform="matrix(0 1 1 0 894.254 349.422)" fill="#9BF0E1"/>
|
||||
<rect width="652.065" height="37.8019" transform="matrix(0 1 1 0 875.354 351.801)" fill="url(#paint10_linear)"/>
|
||||
<defs>
|
||||
<linearGradient id="paint0_linear" x1="32.5528" y1="19.4797" x2="232.692" y2="19.1309" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#9BF0E1"/>
|
||||
<stop offset="1" stop-color="#9BF0E1" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint1_linear" x1="40.9535" y1="19.4797" x2="292.742" y2="18.9277" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#9BF0E1"/>
|
||||
<stop offset="1" stop-color="#9BF0E1" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint2_linear" x1="97.3841" y1="19.4797" x2="696.103" y2="16.3586" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#9BF0E1"/>
|
||||
<stop offset="1" stop-color="#9BF0E1" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint3_linear" x1="51.4543" y1="19.4797" x2="367.803" y2="18.6083" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#9BF0E1"/>
|
||||
<stop offset="1" stop-color="#9BF0E1" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
<radialGradient id="paint4_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(595.63 492.857) rotate(69.5628) scale(444.189 541.718)">
|
||||
<stop stop-color="#757575"/>
|
||||
<stop offset="1" stop-color="#757575" stop-opacity="0"/>
|
||||
</radialGradient>
|
||||
<radialGradient id="paint5_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(400.708 496.947) rotate(69.5628) scale(444.189 541.718)">
|
||||
<stop stop-color="#757575"/>
|
||||
<stop offset="1" stop-color="#757575" stop-opacity="0"/>
|
||||
</radialGradient>
|
||||
<linearGradient id="paint6_linear" x1="65.6305" y1="19.4797" x2="469.134" y2="18.0621" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#F037A5"/>
|
||||
<stop offset="1" stop-color="#F037A5" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint7_linear" x1="58.2799" y1="19.4797" x2="416.592" y2="18.3618" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#9BF0E1"/>
|
||||
<stop offset="1" stop-color="#9BF0E1" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint8_linear" x1="50.9293" y1="19.4797" x2="364.05" y2="18.626" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#9BF0E1"/>
|
||||
<stop offset="1" stop-color="#9BF0E1" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint9_linear" x1="61.9552" y1="19.4797" x2="442.863" y2="18.2164" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#9BF0E1"/>
|
||||
<stop offset="1" stop-color="#9BF0E1" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint10_linear" x1="81.5109" y1="19.4797" x2="582.645" y2="17.2931" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#9BF0E1"/>
|
||||
<stop offset="1" stop-color="#9BF0E1" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 4.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 150 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 364 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 18 KiB |
@@ -0,0 +1,49 @@
|
||||
<svg width="718" height="535" viewBox="0 0 718 535" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M183.853 4.46715C217.919 12.4918 234.992 48.7831 264.406 67.7556C296.598 88.5197 352.397 83.6067 363.436 120.3C374.542 157.215 323.309 183.497 310.126 219.722C297.711 253.837 313.265 296.626 289.334 323.92C263.931 352.892 222.332 361.907 183.853 363.737C143.991 365.634 103.379 357.405 70.8245 334.313C38.0388 311.057 15.5405 275.617 4.94428 236.831C-5.31615 199.275 1.85304 160.443 13.1436 123.184C24.6504 85.2115 37.4854 44.6216 70.0522 21.9736C102.356 -0.491766 145.558 -4.55364 183.853 4.46715Z" fill="url(#paint0_linear)"/>
|
||||
<mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="366" height="365">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M183.949 4.47252C218.033 12.5068 235.114 48.8417 264.544 67.837C296.752 88.626 352.58 83.7071 363.625 120.444C374.737 157.404 323.478 183.717 310.288 219.985C297.866 254.142 313.428 296.982 289.484 324.309C264.068 353.316 222.448 362.342 183.949 364.174C144.066 366.073 103.433 357.835 70.8614 334.715C38.0587 311.431 15.5486 275.948 4.94686 237.116C-5.31892 199.514 1.854 160.636 13.1505 123.332C24.6632 85.3138 37.505 44.6752 70.0887 22C102.41 -0.492356 145.634 -4.55911 183.949 4.47252Z" fill="#36BAA2"/>
|
||||
</mask>
|
||||
<g mask="url(#mask0)">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M178.373 117.387C183.617 111.228 187.166 103.679 186.573 95.2217C184.864 70.8524 150.962 76.2133 144.367 88.5129C137.772 100.812 138.556 132.011 147.079 134.209C150.478 135.086 157.719 132.939 165.088 128.494L160.463 161.239H187.775L178.373 117.387Z" fill="#E6BA92"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M150.522 80.4024C151.148 80.0288 152.457 79.2407 153.12 78.9551C153.277 78.8864 154.375 78.1021 154.405 78.1119C155.237 78.3928 157.645 79.4296 157.852 80.3254C157.884 80.3933 157.916 80.457 157.946 80.5127C158.288 81.1335 158.601 81.7698 158.9 82.4139C159.555 83.8276 160.121 85.3052 160.662 86.7712C161.714 89.6262 162.629 92.5477 163.47 95.4759C164.326 98.4568 165.053 101.472 165.866 104.466C167.036 108.773 168.534 112.974 169.697 117.279C170.439 120.028 170.852 122.809 170.657 125.639C170.655 125.673 170.654 125.706 170.651 125.741C170.65 125.755 170.648 125.769 170.647 125.783C170.614 126.218 170.566 126.654 170.503 127.091C170.448 127.465 170.393 127.841 170.334 128.216C169.272 126.097 168.462 123.763 167.601 121.547C167.517 121.331 167.437 121.112 167.359 120.893C167.081 120.444 166.798 119.997 166.512 119.553C164.709 116.751 162.898 113.959 161.169 111.105C158.058 105.974 154.977 100.734 151.289 96.0217C150.2 94.6302 149.086 93.26 148.01 91.8571C147.399 91.0588 146.803 90.2471 146.226 89.421C145.814 88.8302 144.021 86.7712 144.67 85.534C145.003 84.901 148.899 81.3718 150.522 80.4024Z" fill="#EEEEEE"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M152.922 79.0583C152.314 79.2628 152.61 77.9961 153.199 77.5503C155.929 75.4851 166.366 74.7356 175.449 76.6222C181.533 77.8861 188.61 81.0317 193.47 85.0756C197.851 88.7213 200.864 94.5654 202.415 100.212C204.043 106.141 204.29 112.322 203.383 118.401C203.183 119.737 202.755 121.01 202.516 122.317C202.248 123.789 202.11 125.206 201.631 126.638C201.337 127.515 200.839 128.374 200.588 129.256C200.303 130.262 200.477 131.193 200.685 132.216C201.025 133.884 201.446 135.549 202.044 137.142C202.943 139.534 204.033 141.775 204.717 144.257C205.627 147.56 209.432 158.309 206.651 161.239H153.712C155.045 157.6 159.046 153.318 159.856 149.423C160.333 147.129 160.56 142.118 160.61 141.936C161.803 133.707 164.133 129.777 165.592 128.351C167.05 126.925 168.994 126.487 169.094 125.25C169.508 120.133 167.474 115.231 165.983 110.456C164.207 104.765 162.904 98.9333 161.072 93.2617C160.261 90.7502 156.081 77.9961 152.922 79.0583Z" fill="#F037A5"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M171.483 84.9443C173.48 91.2824 173.909 94.6657 173.48 103.326H174.459C176.289 95.1532 174.66 87.4597 172.714 84.9443H171.483ZM198.266 101.301C194.546 110.334 192.849 115.668 182.461 122.977L183.263 123.539C193.576 117.69 196.579 110.714 199.048 101.678L198.266 101.301ZM182.981 92.1095C181.291 104.93 180.797 112.253 171.995 126.277L172.932 126.564C181.991 114.353 183.427 104.387 183.855 92.18L182.981 92.1095ZM192.704 130.193L191.903 129.218C180.969 132.645 182.187 139.72 168.416 146.884L169.567 147.582C181.625 142.603 184.444 131.923 192.704 130.193Z" fill="black" fill-opacity="0.2"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M237.14 303.58H149.222L137.702 444.781H268.576L237.14 303.58Z" fill="#9E9E9E"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M294.768 326.76H234.488L198.409 467.895H364.848L294.768 326.76Z" fill="#BDBDBD"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M48.9889 279.388C39.6151 273.756 23.8882 280.992 23.899 289.047C23.9313 313.148 45.9124 426.734 47.06 433.914C48.2077 441.094 60.502 442.991 61.2179 433.938C62.3571 419.532 64.4735 369.663 62.3559 346.581C61.4818 337.053 60.5405 327.979 59.6138 319.883C71.148 340.725 88.9863 370.566 113.129 409.405L126.235 403.414C115.943 369.484 107.504 345.531 100.917 331.554C89.6395 307.621 79.0648 287.127 74.6143 279.908C67.6136 268.552 55.4277 272.514 48.9889 279.388Z" fill="#E6BA92"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M125.298 384.572L80.3138 277.944C69.5374 260.598 39.3233 281.473 42.9982 291.534C51.3416 314.374 93.7741 388.317 96.2598 395.122L125.298 384.572Z" fill="#2075DC"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M20.746 297.24C20.746 327.493 35.1043 398.06 35.1134 404.721L66.006 404.745C61.4843 341.778 59.8809 309.956 61.1959 309.278C63.1684 308.26 142.054 317.159 165.713 317.159C199.83 317.159 213.943 295.632 215.088 255.753H147.505C133.744 257.226 61.9673 271.712 35.3109 276.692C23.8988 278.824 20.746 288.906 20.746 297.24Z" fill="#388AED"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M90.4813 241.474L58.2432 272.943C48.8631 276.946 41.1774 281.367 35.1862 286.205C33.8389 287.831 32.3721 290.947 38.7112 289.552C45.0504 288.158 51.7809 286.977 52.9723 289.04C54.1637 291.102 50.6531 294.263 52.855 296.963C54.3229 298.763 59.2597 293.038 67.6654 279.789L101.189 260.012L90.4813 241.474ZM248.125 212.994L223.205 213.087C242.185 274.617 252.26 306.833 253.431 309.735C256.064 316.265 250.492 326.21 248.109 331.555C255.87 335.03 255.043 322.16 264.834 326.718C273.77 330.878 280.569 338.416 290.894 332.041C292.163 331.258 293.554 328.307 290.193 326.001C281.82 320.256 269.753 310.201 268.123 306.891C265.899 302.378 259.234 271.079 248.125 212.994Z" fill="#E6BA92"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M172.19 142.259L162.349 140.57C146.847 195.401 67.1979 232.777 62.3083 253.274C60.5151 260.791 65.9218 264.591 63.129 266.881L75.92 276.25C78.086 273.721 82.7083 278.347 92.3612 275.111C102.014 271.876 172.19 207.184 172.19 142.259Z" fill="#EEEEEE"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M155.636 149.548C156.771 222.141 114.832 240.659 124.174 269.78C131.888 293.828 205.725 319.68 218.502 296.107C223.674 286.565 226.021 275.025 226.287 262.478C229.553 272.117 232.135 280.415 234.035 287.373C237.313 299.375 250.019 301.283 250.019 305.906L266.759 301.283C265.623 295.001 273.515 291.942 271.399 277.909C261.918 215.032 236.445 169.454 194.98 141.176L194.551 135.037C194.375 132.528 192.2 130.636 189.692 130.811L159.04 132.956C156.532 133.131 154.641 135.308 154.817 137.817L155.636 149.548Z" fill="#F8F8F8"/>
|
||||
</g>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M602.402 128.799C636.133 151.998 641.147 200.232 644.271 241.041C646.984 276.491 637.185 311.52 618.713 341.889C602.472 368.59 571.173 378.907 547.795 399.647C518.219 425.885 502.572 471.275 463.845 479.279C423.145 487.691 379.136 468.863 348.411 440.857C318.465 413.56 311.92 371.026 301.992 331.748C292.196 292.991 275.967 252.115 291.387 215.246C306.681 178.68 345.126 158.123 381.346 142.019C413.277 127.821 448.043 132.165 482.932 130.078C523.683 127.641 568.758 105.66 602.402 128.799Z" fill="url(#paint1_linear)"/>
|
||||
<mask id="mask1" mask-type="alpha" maskUnits="userSpaceOnUse" x="200" y="8" width="518" height="527">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M602.402 128.799C636.133 151.998 641.147 200.232 644.271 241.041C646.984 276.491 637.185 311.52 618.713 341.889C602.472 368.59 571.173 378.907 547.795 399.647C518.219 425.885 502.572 471.275 463.845 479.279C423.145 487.691 379.136 468.863 348.411 440.857C318.465 413.56 311.92 371.026 301.992 331.748C292.196 292.991 275.967 252.115 291.387 215.246C306.681 178.68 345.126 158.123 381.346 142.019C413.277 127.821 448.043 132.165 482.932 130.078C523.683 127.641 568.758 105.66 602.402 128.799Z" fill="#9BF0E1"/>
|
||||
</mask>
|
||||
<g mask="url(#mask1)">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M474.435 216.571C469.917 210.448 467.081 203.133 468.192 195.237C471.392 172.486 502.853 179.744 508.236 191.717C513.618 203.689 510.839 232.909 502.697 234.411C499.451 235.01 492.797 232.52 486.173 227.865L488.368 258.891L462.739 257.096L474.435 216.571Z" fill="#915B3C"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M457.554 186.844C456.784 185.965 456.414 184.762 456.101 183.623C455.776 182.439 455.464 181.244 455.278 180.022C454.908 177.582 455.096 174.818 456.94 173.072C458.418 171.672 460.527 171.145 462.44 171.132C463.715 171.124 465.004 171.393 466.192 171.877C467.37 172.358 468.354 173.221 469.488 173.794C469.714 171.207 470.346 168.529 471.814 166.41C473.226 164.371 475.324 163.318 477.64 163.163C480.018 163.003 482.304 163.717 484.333 165.006C484.84 165.328 485.342 165.664 485.819 166.038C486.218 166.351 486.63 166.723 487.114 166.872C487.653 167.04 487.946 166.742 488.33 166.367C488.781 165.927 489.28 165.547 489.804 165.215C492.118 163.75 495.053 163.287 497.536 164.436C498.68 164.965 499.77 165.805 500.494 166.907C501.139 167.889 501.543 169.405 502.478 170.123C502.875 170.428 503.195 170.083 503.593 169.84C504.19 169.474 504.764 169.064 505.368 168.709C506.216 168.211 507.121 167.858 508.075 167.706C509.471 167.484 511.364 167.692 511.631 169.519C511.731 170.206 511.567 170.921 511.472 171.599C511.341 172.529 511.208 173.46 511.061 174.388C510.95 175.093 510.824 175.772 510.642 176.46C510.545 176.826 510.273 177.502 510.406 177.885C510.573 178.364 511.509 178.164 511.9 178.207C512.672 178.294 513.44 178.484 514.133 178.865C514.67 179.161 515.227 179.579 515.417 180.231C515.533 180.632 515.467 181.031 515.371 181.429C515.256 181.906 515.331 182.168 515.358 182.659C516.434 182.22 520.118 181.334 520.441 183.23C520.548 183.862 520.156 184.539 519.857 185.045C519.332 185.931 518.671 186.728 517.998 187.486C516.595 189.066 514.959 190.399 513.221 191.515C515.096 192.512 515.424 195.087 513.643 196.482C512.856 197.099 511.851 197.178 510.92 197.07C510.58 197.03 510.097 196.864 509.824 196.905C509.677 196.927 509.513 197.039 509.312 197.038C507.988 197.036 506.523 196.615 505.256 196.232C502.998 195.55 500.902 194.311 499.244 192.53C498.818 192.073 498.459 191.802 497.846 191.766C497.309 191.734 496.772 191.844 496.235 191.82C494.814 191.757 493.583 190.973 492.298 190.419C492.093 192.194 491.449 194.12 490.609 195.671C489.924 196.936 488.671 197.039 487.445 197.069C483.523 197.163 479.642 196.48 475.741 196.212C479.457 197.33 483.335 197.955 487.007 199.222C488.667 199.795 487.296 200.845 486.517 201.585C485.235 202.804 484.237 204.356 483.504 206.013C481.825 203.474 478.671 201.658 475.726 202.196C472.473 202.79 469.921 206.957 471.747 210.209C472.808 212.097 474.902 212.943 476.63 213.844C475.139 215.193 474.653 217.306 473.69 219.048C473.215 219.907 472.565 220.87 471.62 221.114C471.271 221.205 470.87 221.187 470.581 221.446C470.223 221.768 470.116 222.148 469.669 222.415C467.885 223.479 465.234 223.202 463.834 221.552C462.568 220.06 463.077 217.875 464.315 216.538C462.555 215.655 459.32 214.452 460.238 211.676C456.328 211.14 447.235 204.098 452.833 199.809C450.054 197.97 447.675 193.786 449.779 190.391C451.4 187.777 454.813 186.797 457.554 186.844Z" fill="black"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M441.704 350.42L521.239 483.469L580.868 595.951H593.711L493.803 350.42L441.704 350.42Z" fill="#784931"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M564.307 577.939L589.076 570.442C578.224 537.981 564.924 502.26 549.175 463.277C533.426 424.295 516.512 386.676 498.434 350.42H428.479C448.578 396.282 469.887 437.953 492.403 475.434C514.92 512.915 538.888 547.084 564.307 577.939Z" fill="#9E9E9E"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M436.477 350.42C428.971 397.174 414.492 456.908 413.126 458.752C412.215 459.981 379.422 470.976 314.748 491.737L317.522 503.07C394.647 491.935 435.284 483.297 439.436 477.154C445.663 467.94 476.757 395.149 488.8 350.42H436.477Z" fill="#915B3C"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M337.482 481.941L342.369 500.193C400.053 505.255 435.398 501.597 448.403 489.219C461.407 476.841 476.229 430.575 492.867 350.42H426.161C415.619 416.056 409.726 450.252 408.48 453.007C407.235 455.762 383.569 465.407 337.482 481.941Z" fill="#BDBDBD"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M317.919 487.017C314.562 486.392 312.102 486.218 310.539 486.494C308.638 486.83 305.919 487.636 302.383 488.914C302.772 491.12 306.265 510.949 312.863 548.401C318.244 549.045 320.844 547.666 320.665 544.264C320.486 540.861 320.366 538.03 320.306 535.769L327.757 505.945C327.9 505.371 327.552 504.789 326.978 504.646C326.968 504.644 326.958 504.641 326.948 504.639L322.326 503.623C320.345 500.793 319.184 498.415 318.845 496.487C318.569 494.921 318.82 492.646 319.599 489.663L319.599 489.663C319.897 488.519 319.212 487.349 318.068 487.05C318.018 487.037 317.969 487.026 317.919 487.017Z" fill="#E4E4E4"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M537.234 339.877L566.508 370.511C575.195 374.583 582.274 378.99 587.748 383.734C588.961 385.306 590.238 388.283 584.325 386.764C578.412 385.245 572.124 383.913 570.936 385.812C569.749 387.712 572.946 390.798 570.787 393.262C569.349 394.905 564.895 389.363 557.428 376.635L526.563 356.946L537.234 339.877ZM386.88 302.733L404.853 309.372C375.771 348.341 360.247 368.919 358.279 371.107C353.853 376.029 355.582 386.61 355.97 392.1C347.993 392.672 352.861 381.567 342.742 382.442C333.506 383.241 325.075 387.714 317.998 378.757C317.128 377.656 316.847 374.601 320.558 373.645C329.806 371.264 343.703 366.264 346.208 363.865C349.623 360.592 363.181 340.215 386.88 302.733Z" fill="#915B3C"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M544.599 343.934C548.981 344.386 553.561 345.934 558.307 348.526C560.642 349.801 561.503 352.728 560.228 355.065C559.488 356.422 558.191 357.281 556.776 357.513C557.617 358.388 558.468 359.26 559.328 360.131L547.793 375.959C515.231 351.851 484.042 332.503 473.931 300.406C470.537 289.634 478.178 256.425 479.836 244.146L491.926 241.51C501.917 276.786 517.695 311.721 544.599 343.934Z" fill="#388AED"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M420.266 350.518C452.767 360.011 478.855 364.615 498.528 364.332C500.965 364.296 502.653 354.11 502.049 351.139C492.639 304.886 487.014 271.25 492.306 241.211C488.894 242.292 483.382 241.572 475.772 239.05C449.325 266.3 433.419 300.115 420.266 350.518Z" fill="#EEEEEE"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M413.207 354.552C412.268 353.293 411.961 351.602 412.538 350.016L413.636 346.997C414.38 344.951 416.365 343.716 418.432 343.833C419.064 342.313 419.646 340.795 420.173 339.279C424.623 326.475 423.263 312.911 425.669 300.25C406.168 311.728 386.559 334.029 366.843 367.153L347.964 357.777C349.221 355.088 350.5 352.438 351.799 349.827C349.731 348.115 348.1 341.655 350.209 340.994C352.387 340.312 354.63 339.957 356.933 339.922C384.88 288.132 421.822 253.169 467.76 235.033L471.427 235.681L479.749 237.15C467.992 283.229 498.79 393.796 466.521 477.886C433.997 479.354 393.154 449.717 346.606 459.42C354.401 424.638 394.071 389.163 413.207 354.551L413.207 354.552Z" fill="#388AED"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M471.929 236.848L463.542 252.622L472.286 267.099L460.65 275.21L477.373 320.459L455.298 274.35L466.772 266.126L459.002 253.324L471.929 236.848Z" fill="black" fill-opacity="0.1"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M467.555 335.041C465.225 334.63 463.67 332.408 464.081 330.078C464.491 327.748 466.712 326.193 469.041 326.604C471.37 327.015 472.926 329.237 472.515 331.567C472.105 333.897 469.884 335.453 467.555 335.041ZM468.553 360.23C466.224 359.819 464.668 357.597 465.079 355.267C465.489 352.937 467.71 351.382 470.039 351.793C472.369 352.204 473.924 354.426 473.514 356.756C473.103 359.086 470.882 360.641 468.553 360.23ZM465.334 384.675C463.005 384.264 461.449 382.042 461.86 379.712C462.27 377.382 464.491 375.826 466.82 376.237C469.149 376.648 470.705 378.87 470.294 381.2C469.884 383.53 467.663 385.086 465.334 384.675Z" fill="black" fill-opacity="0.4"/>
|
||||
</g>
|
||||
<defs>
|
||||
<linearGradient id="paint0_linear" x1="182.5" y1="0" x2="182.5" y2="364" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#36BAA2"/>
|
||||
<stop offset="1" stop-color="#61D1BD"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint1_linear" x1="306.5" y1="124" x2="558" y2="414" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0.239583" stop-color="#9BF0E1" stop-opacity="0.99"/>
|
||||
<stop offset="1" stop-color="#68D5C1"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 17 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 340 KiB |
File diff suppressed because it is too large
Load Diff
|
After Width: | Height: | Size: 542 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 230 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 883 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
@@ -0,0 +1,17 @@
|
||||
<svg id="Assets" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 337.46 428.5">
|
||||
<title>
|
||||
favicon
|
||||
</title>
|
||||
<style>
|
||||
path {
|
||||
fill: #121212;
|
||||
}
|
||||
@media (prefers-color-scheme: dark) {
|
||||
path {
|
||||
fill: #7df3e1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<path d="M303,166.05a80.69,80.69,0,0,0,13.45-10.37c.79-.77,1.55-1.53,2.3-2.3a83.12,83.12,0,0,0,7.93-9.38A63.69,63.69,0,0,0,333,133.23a48.58,48.58,0,0,0,4.35-16.4c1.49-19.39-10-38.67-35.62-54.22L198.56,0,78.3,115.23,0,190.25l108.6,65.91a111.59,111.59,0,0,0,57.76,16.41c24.92,0,48.8-8.8,66.42-25.69,19.16-18.36,25.52-42.12,13.7-61.87a49.22,49.22,0,0,0-6.8-8.87A89.17,89.17,0,0,0,259,178.29h.15a85.08,85.08,0,0,0,31-5.79A80.88,80.88,0,0,0,303,166.05ZM202.45,225.86c-19.32,18.51-50.4,21.23-75.7,5.9L51.61,186.15l67.45-64.64,76.41,46.38C223,184.58,221.49,207.61,202.45,225.86Zm8.93-82.22-70.65-42.89L205.14,39,274.51,81.1c25.94,15.72,29.31,37,10.55,55A60.69,60.69,0,0,1,211.38,143.64Zm29.86,190c-19.57,18.75-46.17,29.09-74.88,29.09a123.73,123.73,0,0,1-64.1-18.2L0,282.52v24.67L108.6,373.1a111.6,111.6,0,0,0,57.76,16.42c24.92,0,48.8-8.81,66.42-25.69,12.88-12.34,20-27.13,19.68-41.49v-1.79A87.27,87.27,0,0,1,241.24,333.68Zm0-39c-19.57,18.75-46.17,29.08-74.88,29.08a123.81,123.81,0,0,1-64.1-18.19L0,243.53v24.68l108.6,65.91a111.6,111.6,0,0,0,57.76,16.42c24.92,0,48.8-8.81,66.42-25.69,12.88-12.34,20-27.13,19.68-41.5v-1.78A87.27,87.27,0,0,1,241.24,294.7Zm0-39c-19.57,18.76-46.17,29.09-74.88,29.09a123.81,123.81,0,0,1-64.1-18.19L0,204.55v24.68l108.6,65.91a111.59,111.59,0,0,0,57.76,16.41c24.92,0,48.8-8.8,66.42-25.68,12.88-12.35,20-27.13,19.68-41.5v-1.82A86.09,86.09,0,0,1,241.24,255.71Zm83.7,25.74a94.15,94.15,0,0,1-60.2,25.86h0V334a81.6,81.6,0,0,0,51.74-22.37c14-13.38,21.14-28.11,21-42.64v-2.19A94.92,94.92,0,0,1,324.94,281.45Zm-83.7,91.21c-19.57,18.76-46.17,29.09-74.88,29.09a123.73,123.73,0,0,1-64.1-18.2L0,321.5v24.68l108.6,65.9a111.6,111.6,0,0,0,57.76,16.42c24.92,0,48.8-8.8,66.42-25.69,12.88-12.34,20-27.13,19.68-41.49v-1.79A86.29,86.29,0,0,1,241.24,372.66ZM327,162.45c-.68.69-1.35,1.38-2.05,2.06a94.37,94.37,0,0,1-10.64,8.65,91.35,91.35,0,0,1-11.6,7,94.53,94.53,0,0,1-26.24,8.71,97.69,97.69,0,0,1-14.16,1.57c.5,1.61.9,3.25,1.25,4.9a53.27,53.27,0,0,1,1.14,12V217h.05a84.41,84.41,0,0,0,25.35-5.55,81,81,0,0,0,26.39-16.82c.8-.77,1.5-1.56,2.26-2.34a82.08,82.08,0,0,0,7.93-9.38A63.76,63.76,0,0,0,333,172.17a48.55,48.55,0,0,0,4.32-16.45c.09-1.23.2-2.47.19-3.7V150q-1.08,1.54-2.25,3.09A96.73,96.73,0,0,1,327,162.45Zm0,77.92c-.69.7-1.31,1.41-2,2.1a94.2,94.2,0,0,1-60.2,25.86h0l0,26.67h0a81.6,81.6,0,0,0,51.74-22.37A73.51,73.51,0,0,0,333,250.13a48.56,48.56,0,0,0,4.32-16.44c.09-1.24.2-2.47.19-3.71v-2.19c-.74,1.07-1.46,2.15-2.27,3.21A95.68,95.68,0,0,1,327,240.37Zm0-39c-.69.7-1.31,1.41-2,2.1a93.18,93.18,0,0,1-10.63,8.65,91.63,91.63,0,0,1-11.63,7,95.47,95.47,0,0,1-37.94,10.18h0V256h0a81.65,81.65,0,0,0,51.74-22.37c.8-.77,1.5-1.56,2.26-2.34a82.08,82.08,0,0,0,7.93-9.38A63.76,63.76,0,0,0,333,211.15a48.56,48.56,0,0,0,4.32-16.44c.09-1.24.2-2.48.19-3.71v-2.2c-.74,1.08-1.46,2.16-2.27,3.22A95.68,95.68,0,0,1,327,201.39Z"/>
|
||||
</svg>
|
||||
|
||||
|
After Width: | Height: | Size: 3.1 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 148 KiB |
@@ -0,0 +1,45 @@
|
||||
<svg width="823" height="551" viewBox="0 0 823 551" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g filter="url(#filter0_di)">
|
||||
<rect x="103.392" y="0.74146" width="650.047" height="422.966" rx="5" fill="#616161"/>
|
||||
</g>
|
||||
<g filter="url(#filter1_di)">
|
||||
<path d="M5.04888 655.496C3.60983 658.799 6.0301 662.493 9.63264 662.493H853.038C856.649 662.493 859.069 658.783 857.614 655.478L757.125 427.242C756.326 425.428 754.531 424.257 752.549 424.257H109.081C107.091 424.257 105.291 425.436 104.497 427.26L5.04888 655.496Z" fill="url(#paint0_linear)"/>
|
||||
</g>
|
||||
<path d="M85.4218 533.765C84.0792 537.054 86.4986 540.654 90.051 540.654H768.111C771.662 540.654 774.082 537.055 772.741 533.766L740.44 454.564C739.672 452.682 737.842 451.452 735.81 451.452H122.382C120.351 451.452 118.521 452.681 117.753 454.562L85.4218 533.765Z" fill="#404040"/>
|
||||
<defs>
|
||||
<filter id="filter0_di" x="97.3916" y="0.741455" width="668.047" height="435.966" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
|
||||
<feOffset dx="3" dy="4"/>
|
||||
<feGaussianBlur stdDeviation="4.5"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
|
||||
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset dy="3"/>
|
||||
<feGaussianBlur stdDeviation="5"/>
|
||||
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0.156863 0 0 0 0 0.156863 0 0 0 0 0.156863 0 0 0 0.2 0"/>
|
||||
<feBlend mode="normal" in2="shape" result="effect2_innerShadow"/>
|
||||
</filter>
|
||||
<filter id="filter1_di" x="0.626953" y="416.257" width="861.416" height="254.236" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
|
||||
<feOffset dy="4"/>
|
||||
<feGaussianBlur stdDeviation="2"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
|
||||
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset dy="-8"/>
|
||||
<feGaussianBlur stdDeviation="5"/>
|
||||
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0.156863 0 0 0 0 0.156863 0 0 0 0 0.156863 0 0 0 0.37 0"/>
|
||||
<feBlend mode="normal" in2="shape" result="effect2_innerShadow"/>
|
||||
</filter>
|
||||
<linearGradient id="paint0_linear" x1="413.416" y1="662.493" x2="413.416" y2="406.74" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#9E9E9E"/>
|
||||
<stop offset="1" stop-color="#404040"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 70 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 30 KiB |
@@ -0,0 +1,16 @@
|
||||
<svg width="1100" height="1100" viewBox="0 0 1100 1100" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="1100" height="1100" fill="#121212"/>
|
||||
<g clip-path="url(#clip0)">
|
||||
<path d="M701.273 717.773C660.425 756.908 604.958 778.457 545.048 778.457C498.51 778.457 452.281 765.335 411.318 740.476L198 611.046V662.528L424.554 800.027C462.615 823.095 504.501 834.268 545.055 834.268C597.047 834.268 646.859 815.908 683.615 780.685C710.481 754.937 725.323 724.072 724.671 694.117V690.39C717.797 700.27 709.959 709.442 701.273 717.773V717.773ZM701.273 636.457C660.425 675.585 604.958 697.141 545.048 697.141C498.51 697.141 452.281 684.013 411.318 659.16L198 529.73V581.205L424.554 718.697C462.615 741.773 504.501 752.981 545.055 752.981C597.047 752.981 646.859 734.621 683.615 699.398C710.481 673.65 725.323 642.785 724.671 612.837V609.032C717.805 618.931 709.967 628.118 701.273 636.457V636.457ZM701.273 799.131C660.425 838.259 604.958 859.815 545.048 859.815C498.51 859.815 452.281 846.687 411.318 821.834L198 692.368V743.851L424.554 881.343C462.615 904.418 504.501 915.591 545.055 915.591C597.047 915.591 646.859 897.223 683.615 862.001C710.481 836.26 725.323 805.388 724.671 775.447V771.706C717.797 781.59 709.96 790.767 701.273 799.103V799.131ZM701.273 880.454C660.425 919.582 604.958 941.138 545.048 941.138C498.51 941.138 452.281 928.01 411.318 903.157L198 773.691V825.174L424.554 962.666C462.615 985.741 504.501 996.913 545.055 996.913C597.047 996.913 646.859 978.553 683.615 943.324C710.481 917.583 725.323 886.71 724.671 856.77V853.036C717.797 862.918 709.959 872.093 701.273 880.426V880.454ZM880.078 523.137C878.645 524.57 877.362 526.075 875.865 527.501C862 540.526 846.373 551.536 829.442 560.208C804.813 572.685 777.863 579.915 750.297 581.442H750.19V637.073H750.269C789.217 634.58 827.636 619.688 858.214 590.407C859.884 588.801 861.353 587.153 862.937 585.534C868.943 579.426 874.484 572.877 879.512 565.941C884.608 558.895 888.998 551.366 892.619 543.46C897.617 532.645 900.667 521.031 901.627 509.156C901.821 506.576 902.057 503.996 902.029 501.423V496.851C900.474 499.087 898.976 501.337 897.292 503.559C891.978 510.446 886.229 516.985 880.078 523.137V523.137ZM880.15 441.9C878.717 443.333 877.341 444.767 875.85 446.2C861.966 459.185 846.359 470.195 829.47 478.921C812.207 487.624 793.76 493.749 774.72 497.102C764.963 498.9 755.088 499.99 745.173 500.362C746.234 503.731 747.058 507.149 747.782 510.589C749.52 518.818 750.319 527.218 750.161 535.628V555.765H750.276C768.392 554.658 786.227 550.754 803.148 544.191C823.604 536.175 842.301 524.248 858.193 509.077C859.862 507.471 861.331 505.83 862.915 504.204C868.931 498.109 874.479 491.569 879.512 484.64C884.611 477.599 889.001 470.071 892.619 462.166C897.617 451.353 900.667 439.742 901.627 427.869C901.821 425.289 902.057 422.709 902.029 420.129V415.829C900.531 417.979 898.954 420.129 897.328 422.279C892.025 429.178 886.288 435.732 880.15 441.9V441.9ZM880.078 604.46C878.645 605.893 877.355 607.391 875.865 608.824C842.104 641.187 797.874 660.091 750.297 662.765H750.233V718.396H750.276C789.16 715.902 827.614 701.032 858.193 671.73C873.844 656.738 885.26 640.915 892.591 624.812C897.588 613.998 900.637 602.388 901.599 590.514C901.792 587.927 902.029 585.347 902 582.775V578.195C900.445 580.438 898.947 582.689 897.263 584.903C891.96 591.783 886.22 598.316 880.078 604.46ZM750.297 744.087V799.719C789.217 797.225 827.636 782.362 858.214 753.052C887.359 725.104 902.322 694.411 901.993 664.097V659.511C894.345 670.585 885.591 680.853 875.865 690.154C842.097 722.503 797.874 741.414 750.297 744.087ZM827.413 233.605L612.21 103L361.341 343.378L198 499.882L424.554 637.374C462.615 660.45 504.501 671.622 545.055 671.622C597.047 671.622 646.859 653.262 683.615 618.04C723.589 579.736 736.853 530.153 712.187 488.968C708.183 482.278 703.424 476.07 698.005 470.465C711.216 473.41 724.708 474.907 738.244 474.929H738.552C760.656 474.962 782.571 470.864 803.17 462.847C823.627 454.833 842.324 442.906 858.214 427.732C859.877 426.149 861.453 424.543 863.015 422.938C869.01 416.84 874.539 410.3 879.555 403.374C884.643 396.337 889.024 388.814 892.634 380.915C897.644 370.141 900.722 358.571 901.728 346.732C904.823 306.278 880.945 266.054 827.413 233.605ZM620.308 574.168C580.027 612.78 515.186 618.47 462.435 586.48L305.673 491.333L446.369 356.478L605.761 453.244C663.227 488.072 660.06 536.101 620.33 574.168H620.308ZM792.657 386.949C754.102 423.906 691.756 434.648 638.962 402.65L491.581 313.18L625.948 184.323L770.664 272.174C824.776 304.981 831.806 349.448 792.679 386.949H792.657Z" fill="url(#paint0_linear)"/>
|
||||
</g>
|
||||
<defs>
|
||||
<linearGradient id="paint0_linear" x1="479.075" y1="988.729" x2="634.555" y2="106.941" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0.07" stop-color="#36BAA2"/>
|
||||
<stop offset="0.34" stop-color="#61DDC8"/>
|
||||
<stop offset="0.53" stop-color="#7DF3E1"/>
|
||||
</linearGradient>
|
||||
<clipPath id="clip0">
|
||||
<rect x="198" y="103" width="704" height="893.913" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 4.9 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 13 KiB |
@@ -0,0 +1,19 @@
|
||||
<svg width="1045" height="732" viewBox="0 0 1045 732" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M216.339 0.0976562H850.906L851 428H216L216.339 0.0976562Z" fill="url(#paint0_linear)" fill-opacity="0.2"/>
|
||||
<path opacity="0.7" d="M851 428L1044.08 623.039L5 675L216 428H851Z" fill="url(#paint1_linear)" fill-opacity="0.4"/>
|
||||
<path opacity="0.4" d="M216 428L5 675L0.875333 213.864L215.84 0L216 428Z" fill="url(#paint2_linear)"/>
|
||||
<defs>
|
||||
<linearGradient id="paint0_linear" x1="502.284" y1="611.511" x2="519.85" y2="14.2722" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#9BF0E1"/>
|
||||
<stop offset="1" stop-color="#9BF0E1" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint1_linear" x1="524.516" y1="428.168" x2="524.516" y2="675.188" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#9BF0E1"/>
|
||||
<stop offset="1" stop-color="#9BF0E1" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint2_linear" x1="345.025" y1="454.402" x2="92.5255" y2="206.902" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#9BF0E1"/>
|
||||
<stop offset="1" stop-color="#9BF0E1" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 13 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 1.3 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
@@ -0,0 +1,54 @@
|
||||
<svg width="925" height="731" viewBox="0 0 925 731" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect x="-5" y="5" width="165" height="165" transform="matrix(-1 0 0 1 380 0)" stroke="url(#paint0_linear)" stroke-width="10" stroke-dasharray="10 15 20 15 20 15 20 15 20 15" stroke-dashoffset="5"/>
|
||||
<rect x="-5" y="5" width="165" height="165" transform="matrix(-1 0 0 1 380 190)" stroke="url(#paint1_linear)" stroke-width="10" stroke-dasharray="10 15 20 15 20 15 20 15 20 15" stroke-dashoffset="5"/>
|
||||
<rect x="-5" y="5" width="165" height="165" transform="matrix(-1 0 0 1 190 0)" stroke="url(#paint2_linear)" stroke-width="10" stroke-dasharray="10 15 20 15 20 15 20 15 20 15" stroke-dashoffset="5"/>
|
||||
<rect x="-5" y="5" width="165" height="165" transform="matrix(-1 0 0 1 190 190)" stroke="url(#paint3_linear)" stroke-width="10" stroke-dasharray="10 15 20 15 20 15 20 15 20 15" stroke-dashoffset="5"/>
|
||||
<rect x="-5" y="5" width="165" height="165" transform="matrix(-1 0 0 1 760 190)" stroke="url(#paint4_linear)" stroke-width="10" stroke-dasharray="10 15 20 15 20 15 20 15 20 15" stroke-dashoffset="5"/>
|
||||
<rect x="-5" y="5" width="165" height="165" transform="matrix(-1 0 0 1 760 380)" stroke="url(#paint5_linear)" stroke-width="10" stroke-dasharray="10 15 20 15 20 15 20 15 20 15" stroke-dashoffset="5"/>
|
||||
<rect x="-5" y="5" width="165" height="165" transform="matrix(-1 0 0 1 950 380)" stroke="url(#paint6_linear)" stroke-width="10" stroke-dasharray="10 15 20 15 20 15 20 15 20 15" stroke-dashoffset="5"/>
|
||||
<rect x="-5" y="5" width="165" height="165" transform="matrix(-1 0 0 1 950 570)" stroke="url(#paint7_linear)" stroke-width="10" stroke-dasharray="10 15 20 15 20 15 20 15 20 15" stroke-dashoffset="5"/>
|
||||
<rect x="-5" y="5" width="165" height="165" transform="matrix(-1 0 0 1 570 190)" stroke="url(#paint8_linear)" stroke-width="10" stroke-dasharray="10 15 20 15 20 15 20 15 20 15" stroke-dashoffset="5"/>
|
||||
<rect x="-5" y="5" width="165" height="165" transform="matrix(-1 0 0 1 570 380)" stroke="url(#paint9_linear)" stroke-width="10" stroke-dasharray="10 15 20 15 20 15 20 15 20 15" stroke-dashoffset="5"/>
|
||||
<defs>
|
||||
<linearGradient id="paint0_linear" x1="7.76436" y1="70.1215" x2="173.317" y2="73.4409" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#9BF0E1"/>
|
||||
<stop offset="1" stop-color="#9BF0E1" stop-opacity="0.5"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint1_linear" x1="7.76436" y1="70.1215" x2="173.317" y2="73.4409" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#9BF0E1"/>
|
||||
<stop offset="1" stop-color="#9BF0E1" stop-opacity="0.5"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint2_linear" x1="128.937" y1="122.522" x2="-14.754" y2="123.805" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#9BF0E1" stop-opacity="0"/>
|
||||
<stop offset="1" stop-color="#9BF0E1" stop-opacity="0.5"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint3_linear" x1="-2.46742e-08" y1="86.5993" x2="147.253" y2="86.2624" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#9BF0E1" stop-opacity="0.5"/>
|
||||
<stop offset="1" stop-color="#9BF0E1" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint4_linear" x1="7.76436" y1="70.1215" x2="173.317" y2="73.4409" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="white"/>
|
||||
<stop offset="1" stop-color="#C3F9EF"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint5_linear" x1="7.76436" y1="70.1215" x2="173.317" y2="73.4409" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="white"/>
|
||||
<stop offset="1" stop-color="#C3F9EF"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint6_linear" x1="86.2891" y1="145.616" x2="173.317" y2="73.4409" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#C3F9EF" stop-opacity="0.41"/>
|
||||
<stop offset="1" stop-color="white"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint7_linear" x1="125.5" y1="73.2314" x2="196" y2="-14.2686" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#C3F9EF" stop-opacity="0"/>
|
||||
<stop offset="1" stop-color="white"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint8_linear" x1="128.937" y1="122.522" x2="-14.754" y2="123.805" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#9BF0E1"/>
|
||||
<stop offset="1" stop-color="#C3F9EF"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint9_linear" x1="-2.46742e-08" y1="86.5993" x2="147.253" y2="86.2624" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#C3F9EF"/>
|
||||
<stop offset="1" stop-color="#9BF0E1"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 4.2 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 6.2 MiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 27 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 30 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 115 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.2 MiB |
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user