Skip to content
🌄Upstream landscape generation application
JavaScript CSS Shell HTML
Branch: master
Clone or download
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github Replace LFDL with LFAI; Close #244 (#357) Sep 25, 2019
bin Fix URL shortening when filtering; fixes #218 (#303) Aug 27, 2019
specs Validate twitter URLS start with in landscape.yml; Sep 2, 2019
src move member tag to the project title. close #376 (#420) Oct 20, 2019
tools report crunhcbase errors before membership is calculated, close #413 Oct 17, 2019
update_server Revert "Revert "try to speed up builds, #379 (#383)"" Oct 10, 2019
.babelrc get rid of preview.json, close #216 (#288) Aug 11, 2019
.editorconfig first commit Dec 2, 2018
.gitignore Replace LFDL with LFAI; Close #244 (#357) Sep 25, 2019
.npmrc Revert loglevel=silent (#319) Sep 3, 2019
.nvmrc 141 fix projet typo (#148) Feb 9, 2019 Refactored list of landscapes into file and add some extr… Sep 16, 2019 brew install node in Feb 4, 2019
LICENSE Initial commit Dec 2, 2018 Update instructions [skip ci] Oct 19, 2019
_headers first commit Dec 2, 2018
_redirects Add redirects (#250) Jul 20, 2019 do not run extra setup on our netlify docker image Oct 12, 2019 first commit Dec 2, 2018 Revert "Revert "try to speed up builds, #379 (#383)"" Oct 10, 2019 more progress Sep 19, 2019
npm-shrinkwrap.json Update to a new version [skip ci] Oct 20, 2019
package.json Update to a new version [skip ci] Oct 20, 2019 Update dependencies (#359) Sep 26, 2019 Update dependencies (#359) Sep 26, 2019


CII Best Practices npm version Dependency Status Netlify Status

The landscapeapp is an upstream NPM module that supports building interactive landscape websites such as the CNCF Cloud Native Landscape (source) and the LF Artificial Intelligence Landscape (source). The application is managed by Dan Kohn of CNCF and is under active development by Andrey Kozlov (who did most of the development to date) and Jordi Noguera.

In addition to creating fully interactive sites, the landscapeapp builds static images on each update. See examples in All current Linux Foundation landscapes are listed in landscapes.yml.


The most challenging part of creating a new landscape is finding SVG images for all projects and companies. These landscapes represent a valuable resource to a community in assembling all related projects, creating a taxonomy, and providing the up-to-date logos, and unfortunately, there are no shortcuts.

Do not try to convert PNGs to SVGs. You can't automatically go from a low-res to a high-res format, and you'll just waste time and come up with a substandard result. Instead, invest your time finding SVGs and then (when necessary) having a graphic designer recreate images when high res ones are not available.

Tips for finding high quality images:

  • Google images is often the best way to find a good version of the logo (but ensure it's the up-to-date version). Search for grpc logo filetype:svg but substitute your project or product name for grpc.
  • Wikipedia also is a good source for high quality logos ( search in either the main Wikipedia or Wikipedia Commons ).
  • Also search for 'svg' in the GitHub for the project, as sometimes projects will embed them there.

For new landscapes of any size, you will probably need a graphic artist to rebuild some of the logos for you.

If the project is hosted/sponsored by an organization but doesn't have a logo, best practice is to use that organization's logo with the title of the project underneath ( example ). You can use a tool such as Inkscape to add the text.

Tips for common issues with images:

  • If you get an error with the image that it has a PNG embeded, you will need to work with a graphic artist to rebuild the logo.
  • If the SVG has a 'text' element tag within it, you will get an error. You can use Inkscape to convert the text tag to a glyph ( select the text, then Ctrl+K (path combine), then Ctrl+J (dynamic offset) ) or CloudConvert ( click the wrench icon and then checkbox 'Convert text to path' ).
  • If you get an error about the size being too large, use svg-autocrop on the image to automatically fix it.

New Entries

When creating new entries, the only 4 required fields are name, homepage_url, logo, and crunchbase. It's generally easier to have the landscape fetch an SVG by adding it's URL rather than saving it yourself in the hosted_logos folder. Only add a twitter if the value in Crunchbase is incorrect. For delisted and many foreign countries, you'll need to add stock_ticker with the value to look up on Yahoo Finance to find the market cap. If you add a repo_url the card will be white instead of grey.

External Data

The canonical source for all data is landscape.yml. Once a day, the landscapeapp update_server pulls data for projects and companies from the following sources:

  • Project info from GitHub
  • Funding info from Crunchbase
  • Market cap data from Yahoo Finance
  • CII Best Practices Badge data

The update server enhances the source data with the fetched data and saves the result in processed_landscape.yml and as data.json, the latter of which is what the app loads to display data.

Creating a New Landscape

If you want to create an interactive landscape for your project or organization:

  1. Note ahead of time that the hardest part of building a landscape is getting hi-res images for every project. You cannot convert from a PNG or JPEG into an SVG. You need to get an SVG, AI, or EPS file. When those aren't available, you will need a graphic designer to recreate several images. Don't just use an auto-tracer to try to convert PNG to SVG because there is some artistry involved in making it look good. Please review this primer on image formats.
  2. Create a repo youracronym-landscape so it's distinct from other landscapes stored in the same directory. From inside your new directory, copy over files from a simpler landscape like with cp -r ../graphql-landscape/* ../graphql-landscape/.github ../graphql-landscape/.gitignore ../graphql-landscape/.npmrc ../graphql-landscape/.nvmrc ..
  3. If you're working with the LF, give admin privileges to the new repo to dankohn and write privleges to AndreyKozlov1984, jordinl83, and CNCF-Bot and ping me after creating an account at Alex Contini and I are available there to help you recreate SVGs based on a PNG or the company's logo, if necessary, and to fix other problems.
  4. Set the repo to only support merge commits and turn off DCO support, since it doesn't work well with the GitHub web interface: image
  5. For LF projects, I'll set you up in Netlify to build on every commit. Build command is npm install -g npm && npm ci && npm run build and publish directory is dist. Environment variables that need to be set are CRUNCHBASE_KEY, GITHUB_KEY, and TWITTER_KEYS. I recommend these notifications: image
  6. Edit settings.yml and landscape.yml for your topic.
  7. Generate a QR code, setting colors to black. Save as SVG and overwrite images/qr.svg.
  8. Run y reset-tweet-count to start the count of tweets mentioning your landscape at zero.
  9. Edit landscapes.yml to add your project.

API Keys

You want to add the following to your ~/.bash_profile. If you're with the LF, ask Dan Kohn on CNCF Slack for the Crunchbase and Twitter keys.

For the GitHub key, please go to and create a key (you can call it personal landscape) with no permissions. That is, don't click any checkboxes, because you only need to access public repos.

export CRUNCHBASE_KEY="key-here"
export TWITTER_KEYS=keys-here
export GITHUB_KEY=key-here

Bash Shortcuts

If you are working with more than one landscape, there's a trick to run the standard landscapeapp package.json functions. Add the following to your ~/.bash_profile:

function y { PROJECT_PATH=$PWD npm explore interactive-landscape -- npm run "$@"; }
export -f y
# yf does a normal build and full test run
alias yf='y fetch'
alias yl='y check-links'
alias yq='y remove-quotes'
# yp does a build and then opens up the landscape in your browser ( can view the PDF and PNG files )
alias yp='y build && y open:dist'
# yo does a quick build and opens up the landscape in your browser
alias yo='y open:src'
# yc does a full clean out of the local npm modules and the yf. Use only if you are getting weird errors on yf
alias yc='PROJECT_PATH=$PWD rm -rf node_modules && npm install && yf'

Reload with . ~/.bash_profile and then use y open:src, yf, etc. to run functions on the landscape in your current directory.

If you want to fetch updates to the landscapeapp and both the CNCF and LFAI landscapes and update packages on all three, this alias for your ~/.bash_profile will do so:

alias all='for path in /Users/your-username/dev/{landscapeapp,landscape,lfai-landscape}; do git -C $path pull -p; npm --prefix $path run latest; done;'

If you're making a change to landscapeapp (and in that directory), and you have a sibling directory of cdf-landscape, you can run the code you're changing on cdf-landscape with:

PROJECT_PATH=../cdf-landscape npm run build

Adding to a google search console

Go to the google search console, add a new property, enter the url of the given project, for example,

Next, google will want to verify that it is your site, thus you need to choose an html tag verification option and copy a secret code from it and put it to the settings.yml of a given landscape project. Then commit the change to the master branch and wait till Netlify deploys the master branch. The key is named google_site_veryfication and it is somewhere around line 14 in settings.yml. After netlify succesfully deploys that dashbaord, verify the html tag in a google console. Do not forget to add as someone who has a full access from a Settings menu for a given search console.

Vulnerability reporting

Please open an issue or, for sensitive information, email

Continuous Integration and NPM Publishing

On every commit, Netlify builds landscapeapp, clones the CNCF and LFAI repos, and builds their landscapes and verifies that their tests pass with the updated landscapeapp. When that succeeds, it generates and pushes an updated NPM module.

Keeping Project Up to Date

We have an issue #75, where we update all out packages. This is how an update is usually done:

  1. Create a new folder like 75-update-2019-10-16
  2. Run ncu -u which is same as node-check-updates -u, do not forget to isntall npm install -g node-check-updates
  3. Run npm install , commit and push and make a PR
  4. Check that everything runs locally, i.e. npm run open:src should still work well
  5. Check that there are no layout issues on generated landscapes
  6. Do not forget to read README about those npm packages, which are mentioned in a red color, i.e. have a major update. They may require to implement certain changes in our code.

Embed landscape in a web site

You can embed the landscape in a website in a few different ways...

  • If you want just a full visual of the landscape in landscape mode, you can do:
<!-- Embed ASWF landscape as a PNG -->
<img src="" alt="Academy Software Foundation Landscape Image">
  • If you want to embed the card mode for listing a category of entries ( for example members in a foundation or entries in a certain program ), you can do:
<!-- Embed list of all Open Mainframe Project members -->  
<iframe src=";format=logo-mode&amp;grouping=category&amp;embed=yes" frameborder="0" id="landscape" scrolling="no" style="width: 1px; min-width: 100%; opacity: 1; visibility: visible; overflow: hidden; height: 1717px;"></iframe>
<script src=""></script>
You can’t perform that action at this time.