[frameworks] Update framework logos to be file paths (#8546)

This removes the reliance on raw github hosting and instead relies on the Vercel deployment hosting the logo images.

Since we already have static files in each deployment (tarballs), it makes sense to start adding static images too.
This commit is contained in:
Steven
2022-09-12 19:07:46 -04:00
committed by GitHub
parent 2cb008e8ed
commit 23d7eaccab
6 changed files with 77 additions and 54 deletions

View File

@@ -13,6 +13,12 @@ async function main() {
await fs.rm(pubDir, { recursive: true, force: true });
await fs.mkdir(pubDir);
await fs.cp(
join(repoRoot, 'packages', 'frameworks', 'logos'),
join(pubDir, 'framework-logos'),
{ recursive: true, force: true }
);
const examples = await getExampleList();
const pathListAll = join(pubDir, 'list-all.json');
await fs.writeFile(pathListAll, JSON.stringify(examples));

View File

@@ -16,10 +16,6 @@ const frameworks = (_frameworks as Framework[])
defaultRoutes: undefined,
};
if (framework.logo) {
framework.logo = `https://assets.vercel.com/zeit-inc/image/fetch/${framework.logo}`;
}
return framework;
});

View File

@@ -69,7 +69,7 @@ export function useDeploymentMissingProjectSettings() {
framework: {
name: 'Other',
slug: null,
logo: 'https://raw.githubusercontent.com/vercel/vercel/main/packages/frameworks/logos/other.svg',
logo: 'https://api-frameworks.vercel.sh/framework-logos/other.svg',
description: 'No framework or an unoptimized framework.',
settings: {
installCommand: {

View File

@@ -21,7 +21,7 @@ export const frameworks = [
name: 'Blitz.js',
slug: 'blitzjs',
demo: 'https://blitz-template.vercel.app',
logo: 'https://raw.githubusercontent.com/vercel/vercel/main/packages/frameworks/logos/blitz.svg',
logo: 'https://api-frameworks.vercel.sh/framework-logos/blitz.svg',
tagline: 'Blitz.js: The Fullstack React Framework',
description:
'A brand new Blitz.js app - the result of running `npx blitz new`.',
@@ -58,9 +58,9 @@ export const frameworks = [
name: 'Next.js',
slug: 'nextjs',
demo: 'https://nextjs-template.vercel.app',
logo: 'https://raw.githubusercontent.com/vercel/vercel/main/packages/frameworks/logos/next.svg',
logo: 'https://api-frameworks.vercel.sh/framework-logos/next.svg',
darkModeLogo:
'https://raw.githubusercontent.com/vercel/vercel/main/packages/frameworks/logos/next-dark.svg',
'https://api-frameworks.vercel.sh/framework-logos/next-dark.svg',
screenshot:
'https://assets.vercel.com/image/upload/v1647366075/front/import/nextjs.png',
tagline:
@@ -108,7 +108,7 @@ export const frameworks = [
name: 'Gatsby.js',
slug: 'gatsby',
demo: 'https://gatsby.vercel.app',
logo: 'https://raw.githubusercontent.com/vercel/vercel/main/packages/frameworks/logos/gatsby.svg',
logo: 'https://api-frameworks.vercel.sh/framework-logos/gatsby.svg',
tagline:
'Gatsby helps developers build blazing fast websites and apps with React.',
description: 'A Gatsby starter app with an API Route.',
@@ -195,7 +195,7 @@ export const frameworks = [
name: 'Remix',
slug: 'remix',
demo: 'https://remix-run-template.vercel.app',
logo: 'https://raw.githubusercontent.com/vercel/vercel/main/packages/frameworks/logos/remix-no-shadow.svg',
logo: 'https://api-frameworks.vercel.sh/framework-logos/remix-no-shadow.svg',
tagline: 'Build Better Websites',
description: 'A new Remix app — the result of running `npx create-remix`.',
website: 'https://remix.run',
@@ -232,9 +232,9 @@ export const frameworks = [
name: 'Astro',
slug: 'astro',
demo: 'https://astro-template.vercel.app',
logo: 'https://raw.githubusercontent.com/vercel/vercel/main/packages/frameworks/logos/astro.svg',
logo: 'https://api-frameworks.vercel.sh/framework-logos/astro.svg',
darkModeLogo:
'https://raw.githubusercontent.com/vercel/vercel/main/packages/frameworks/logos/astro-dark.svg',
'https://api-frameworks.vercel.sh/framework-logos/astro-dark.svg',
tagline:
'Astro is a new kind of static site builder for the modern web. Powerful developer experience meets lightweight output.',
description: 'An Astro site, using the basics starter kit.',
@@ -286,7 +286,7 @@ export const frameworks = [
name: 'Hexo',
slug: 'hexo',
demo: 'https://hexo-template.vercel.app',
logo: 'https://raw.githubusercontent.com/vercel/vercel/main/packages/frameworks/logos/hexo.svg',
logo: 'https://api-frameworks.vercel.sh/framework-logos/hexo.svg',
tagline:
'Hexo is a fast, simple & powerful blog framework powered by Node.js.',
description: 'A Hexo site, created with the Hexo CLI.',
@@ -323,7 +323,7 @@ export const frameworks = [
name: 'Eleventy',
slug: 'eleventy',
demo: 'https://eleventy-template.vercel.app',
logo: 'https://raw.githubusercontent.com/vercel/vercel/main/packages/frameworks/logos/eleventy.svg',
logo: 'https://api-frameworks.vercel.sh/framework-logos/eleventy.svg',
tagline:
'11ty is a simpler static site generator written in JavaScript, created to be an alternative to Jekyll.',
description: 'An Eleventy site, created with npm init.',
@@ -361,7 +361,7 @@ export const frameworks = [
name: 'Docusaurus 2',
slug: 'docusaurus-2',
demo: 'https://docusaurus-2-template.vercel.app',
logo: 'https://raw.githubusercontent.com/vercel/vercel/main/packages/frameworks/logos/docusaurus.svg',
logo: 'https://api-frameworks.vercel.sh/framework-logos/docusaurus.svg',
tagline:
'Docusaurus makes it easy to maintain Open Source documentation websites.',
description:
@@ -449,7 +449,7 @@ export const frameworks = [
name: 'Docusaurus 1',
slug: 'docusaurus',
demo: 'https://docusaurus-template.vercel.app',
logo: 'https://raw.githubusercontent.com/vercel/vercel/main/packages/frameworks/logos/docusaurus.svg',
logo: 'https://api-frameworks.vercel.sh/framework-logos/docusaurus.svg',
tagline:
'Docusaurus makes it easy to maintain Open Source documentation websites.',
description:
@@ -501,7 +501,7 @@ export const frameworks = [
name: 'Preact',
slug: 'preact',
demo: 'https://preact-template.vercel.app',
logo: 'https://raw.githubusercontent.com/vercel/vercel/main/packages/frameworks/logos/preact.svg',
logo: 'https://api-frameworks.vercel.sh/framework-logos/preact.svg',
tagline:
'Preact is a fast 3kB alternative to React with the same modern API.',
description: 'A Preact app, created with the Preact CLI.',
@@ -547,7 +547,7 @@ export const frameworks = [
name: 'SolidStart',
slug: 'solidstart',
demo: 'https://solid-start-template.vercel.app',
logo: 'https://raw.githubusercontent.com/vercel/vercel/main/packages/frameworks/logos/solid.svg',
logo: 'https://api-frameworks.vercel.sh/framework-logos/solid.svg',
tagline: 'Simple and performant reactivity for building user interfaces.',
description: 'A Solid app, created with SolidStart.',
website: 'https://solidjs.com',
@@ -587,7 +587,7 @@ export const frameworks = [
name: 'Dojo',
slug: 'dojo',
demo: 'https://dojo-template.vercel.app',
logo: 'https://raw.githubusercontent.com/vercel/vercel/main/packages/frameworks/logos/dojo.png',
logo: 'https://api-frameworks.vercel.sh/framework-logos/dojo.png',
tagline: 'Dojo is a modern progressive, TypeScript first framework.',
description:
"A Dojo app, created with the Dojo CLI's cli-create-app command.",
@@ -649,7 +649,7 @@ export const frameworks = [
name: 'Ember.js',
slug: 'ember',
demo: 'https://ember-template.vercel.app',
logo: 'https://raw.githubusercontent.com/vercel/vercel/main/packages/frameworks/logos/ember.svg',
logo: 'https://api-frameworks.vercel.sh/framework-logos/ember.svg',
tagline:
'Ember.js helps webapp developers be more productive out of the box.',
description: 'An Ember app, created with the Ember CLI.',
@@ -695,7 +695,7 @@ export const frameworks = [
name: 'Vue.js',
slug: 'vue',
demo: 'https://vue-template.vercel.app',
logo: 'https://raw.githubusercontent.com/vercel/vercel/main/packages/frameworks/logos/vue.svg',
logo: 'https://api-frameworks.vercel.sh/framework-logos/vue.svg',
tagline:
'Vue.js is a versatile JavaScript framework that is as approachable as it is performant.',
description: 'A Vue.js app, created with the Vue CLI.',
@@ -752,7 +752,7 @@ export const frameworks = [
name: 'Scully',
slug: 'scully',
demo: 'https://scully-template.vercel.app',
logo: 'https://raw.githubusercontent.com/vercel/vercel/main/packages/frameworks/logos/scullyio-logo.png',
logo: 'https://api-frameworks.vercel.sh/framework-logos/scullyio-logo.png',
tagline: 'Scully is a static site generator for Angular.',
description: 'The Static Site Generator for Angular apps.',
website: 'https://github.com/scullyio/scully',
@@ -788,7 +788,7 @@ export const frameworks = [
name: 'Ionic Angular',
slug: 'ionic-angular',
demo: 'https://ionic-angular-template.vercel.app',
logo: 'https://raw.githubusercontent.com/vercel/vercel/main/packages/frameworks/logos/ionic.svg',
logo: 'https://api-frameworks.vercel.sh/framework-logos/ionic.svg',
tagline:
'Ionic Angular allows you to build mobile PWAs with Angular and the Ionic Framework.',
description: 'An Ionic Angular site, created with the Ionic CLI.',
@@ -833,7 +833,7 @@ export const frameworks = [
name: 'Angular',
slug: 'angular',
demo: 'https://angular-template.vercel.app',
logo: 'https://raw.githubusercontent.com/vercel/vercel/main/packages/frameworks/logos/angular.svg',
logo: 'https://api-frameworks.vercel.sh/framework-logos/angular.svg',
tagline:
'Angular is a TypeScript-based cross-platform framework from Google.',
description: 'An Angular app, created with the Angular CLI.',
@@ -893,7 +893,7 @@ export const frameworks = [
name: 'Polymer',
slug: 'polymer',
demo: 'https://polymer-template.vercel.app',
logo: 'https://raw.githubusercontent.com/vercel/vercel/main/packages/frameworks/logos/polymer.svg',
logo: 'https://api-frameworks.vercel.sh/framework-logos/polymer.svg',
tagline:
'Polymer is an open-source webapps library from Google, for building using Web Components.',
description: 'A Polymer app, created with the Polymer CLI.',
@@ -950,7 +950,7 @@ export const frameworks = [
name: 'Svelte',
slug: 'svelte',
demo: 'https://svelte.vercel.app',
logo: 'https://raw.githubusercontent.com/vercel/vercel/main/packages/frameworks/logos/svelte.svg',
logo: 'https://api-frameworks.vercel.sh/framework-logos/svelte.svg',
tagline:
'Svelte lets you write high performance reactive apps with significantly less boilerplate.',
description: 'A basic Svelte app using the default template.',
@@ -1001,7 +1001,7 @@ export const frameworks = [
name: 'SvelteKit',
slug: 'sveltekit',
demo: 'https://sveltekit-template.vercel.app',
logo: 'https://raw.githubusercontent.com/vercel/vercel/main/packages/frameworks/logos/svelte.svg',
logo: 'https://api-frameworks.vercel.sh/framework-logos/svelte.svg',
screenshot:
'https://assets.vercel.com/image/upload/v1647366075/front/import/sveltekit.png',
tagline:
@@ -1040,7 +1040,7 @@ export const frameworks = [
name: 'Ionic React',
slug: 'ionic-react',
demo: 'https://ionic-react-template.vercel.app',
logo: 'https://raw.githubusercontent.com/vercel/vercel/main/packages/frameworks/logos/ionic.svg',
logo: 'https://api-frameworks.vercel.sh/framework-logos/ionic.svg',
tagline:
'Ionic React allows you to build mobile PWAs with React and the Ionic Framework.',
description: 'An Ionic React site, created with the Ionic CLI.',
@@ -1101,7 +1101,7 @@ export const frameworks = [
name: 'Create React App',
slug: 'create-react-app',
demo: 'https://create-react-template.vercel.app',
logo: 'https://raw.githubusercontent.com/vercel/vercel/main/packages/frameworks/logos/react.svg',
logo: 'https://api-frameworks.vercel.sh/framework-logos/react.svg',
tagline: 'Create React App allows you to get going with React in no time.',
description: 'A client-side React app created with create-react-app.',
website: 'https://create-react-app.dev',
@@ -1168,7 +1168,7 @@ export const frameworks = [
name: 'Gridsome',
slug: 'gridsome',
demo: 'https://gridsome-template.vercel.app',
logo: 'https://raw.githubusercontent.com/vercel/vercel/main/packages/frameworks/logos/gridsome.svg',
logo: 'https://api-frameworks.vercel.sh/framework-logos/gridsome.svg',
tagline:
'Gridsome is a Vue.js-powered framework for building websites & apps that are fast by default.',
description: 'A Gridsome app, created with the Gridsome CLI.',
@@ -1205,7 +1205,7 @@ export const frameworks = [
name: 'UmiJS',
slug: 'umijs',
demo: 'https://umijs-template.vercel.app',
logo: 'https://raw.githubusercontent.com/vercel/vercel/main/packages/frameworks/logos/umi.svg',
logo: 'https://api-frameworks.vercel.sh/framework-logos/umi.svg',
tagline:
'UmiJS is an extensible enterprise-level React application framework.',
description: 'An UmiJS app, created using the Umi CLI.',
@@ -1251,7 +1251,7 @@ export const frameworks = [
name: 'Sapper',
slug: 'sapper',
demo: 'https://sapper-template.vercel.app',
logo: 'https://raw.githubusercontent.com/vercel/vercel/main/packages/frameworks/logos/svelte.svg',
logo: 'https://api-frameworks.vercel.sh/framework-logos/svelte.svg',
tagline:
'Sapper is a framework for building high-performance universal web apps with Svelte.',
description: 'A Sapper app, using the Sapper template.',
@@ -1288,7 +1288,7 @@ export const frameworks = [
name: 'Saber',
slug: 'saber',
demo: 'https://saber-template.vercel.app',
logo: 'https://raw.githubusercontent.com/vercel/vercel/main/packages/frameworks/logos/saber.svg',
logo: 'https://api-frameworks.vercel.sh/framework-logos/saber.svg',
tagline:
'Saber is a framework for building static sites in Vue.js that supports data from any source.',
description: 'A Saber site, created with npm init.',
@@ -1339,7 +1339,7 @@ export const frameworks = [
name: 'Stencil',
slug: 'stencil',
demo: 'https://stencil.vercel.app',
logo: 'https://raw.githubusercontent.com/vercel/vercel/main/packages/frameworks/logos/stencil.svg',
logo: 'https://api-frameworks.vercel.sh/framework-logos/stencil.svg',
tagline:
'Stencil is a powerful toolchain for building Progressive Web Apps and Design Systems.',
description: 'A Stencil site, created with the Stencil CLI.',
@@ -1400,7 +1400,7 @@ export const frameworks = [
name: 'Nuxt.js',
slug: 'nuxtjs',
demo: 'https://nuxtjs-template.vercel.app',
logo: 'https://raw.githubusercontent.com/vercel/vercel/main/packages/frameworks/logos/nuxt.svg',
logo: 'https://api-frameworks.vercel.sh/framework-logos/nuxt.svg',
screenshot:
'https://assets.vercel.com/image/upload/v1647366075/front/import/nuxtjs.png',
tagline:
@@ -1460,7 +1460,7 @@ export const frameworks = [
name: 'RedwoodJS',
slug: 'redwoodjs',
demo: 'https://redwood-template.vercel.app',
logo: 'https://raw.githubusercontent.com/vercel/vercel/main/packages/frameworks/logos/redwoodjs.svg',
logo: 'https://api-frameworks.vercel.sh/framework-logos/redwoodjs.svg',
tagline: 'RedwoodJS is a full-stack framework for the Jamstack.',
description: 'A RedwoodJS app, bootstraped with create-redwood-app.',
website: 'https://redwoodjs.com',
@@ -1497,7 +1497,7 @@ export const frameworks = [
name: 'Hugo',
slug: 'hugo',
demo: 'https://hugo-template.vercel.app',
logo: 'https://raw.githubusercontent.com/vercel/vercel/main/packages/frameworks/logos/hugo.svg',
logo: 'https://api-frameworks.vercel.sh/framework-logos/hugo.svg',
tagline:
'Hugo is the worlds fastest framework for building websites, written in Go.',
description: 'A Hugo site, created with the Hugo CLI.',
@@ -1550,7 +1550,7 @@ export const frameworks = [
name: 'Jekyll',
slug: 'jekyll',
demo: 'https://jekyll-template.vercel.app',
logo: 'https://raw.githubusercontent.com/vercel/vercel/main/packages/frameworks/logos/jekyll.svg',
logo: 'https://api-frameworks.vercel.sh/framework-logos/jekyll.svg',
tagline:
'Jekyll makes it super easy to transform your plain text into static websites and blogs.',
description: 'A Jekyll site, created with the Jekyll CLI.',
@@ -1591,7 +1591,7 @@ export const frameworks = [
name: 'Brunch',
slug: 'brunch',
demo: 'https://brunch-template.vercel.app',
logo: 'https://raw.githubusercontent.com/vercel/vercel/main/packages/frameworks/logos/brunch.svg',
logo: 'https://api-frameworks.vercel.sh/framework-logos/brunch.svg',
tagline:
'Brunch is a fast and simple webapp build tool with seamless incremental compilation for rapid development.',
description: 'A Brunch app, created with the Brunch CLI.',
@@ -1625,7 +1625,7 @@ export const frameworks = [
name: 'Middleman',
slug: 'middleman',
demo: 'https://middleman-template.vercel.app',
logo: 'https://raw.githubusercontent.com/vercel/vercel/main/packages/frameworks/logos/middleman.svg',
logo: 'https://api-frameworks.vercel.sh/framework-logos/middleman.svg',
tagline:
'Middleman is a static site generator that uses all the shortcuts and tools in modern web development.',
description: 'A Middleman app, created with the Middleman CLI.',
@@ -1660,7 +1660,7 @@ export const frameworks = [
name: 'Zola',
slug: 'zola',
demo: 'https://zola-template.vercel.app',
logo: 'https://raw.githubusercontent.com/vercel/vercel/main/packages/frameworks/logos/zola.png',
logo: 'https://api-frameworks.vercel.sh/framework-logos/zola.png',
tagline: 'Everything you need to make a static site engine in one binary.',
description: 'A Zola app, created with the "Getting Started" tutorial.',
website: 'https://www.getzola.org',
@@ -1694,7 +1694,7 @@ export const frameworks = [
name: 'Vite',
slug: 'vite',
demo: 'https://vite-vue-template.vercel.app',
logo: 'https://raw.githubusercontent.com/vercel/vercel/main/packages/frameworks/logos/vite.svg',
logo: 'https://api-frameworks.vercel.sh/framework-logos/vite.svg',
tagline:
'Vite is a new breed of frontend build tool that significantly improves the frontend development experience.',
description: 'A Vue.js app, created with Vite.',
@@ -1732,7 +1732,7 @@ export const frameworks = [
name: 'Parcel',
slug: 'parcel',
demo: 'https://parcel-template.vercel.app',
logo: 'https://raw.githubusercontent.com/vercel/vercel/main/packages/frameworks/logos/parcel.png',
logo: 'https://api-frameworks.vercel.sh/framework-logos/parcel.png',
tagline:
'Parcel is a zero configuration build tool for the web that scales to projects of any size and complexity.',
description: 'A vanilla web app built with Parcel.',
@@ -1779,7 +1779,7 @@ export const frameworks = [
name: 'Sanity',
slug: 'sanity',
demo: 'https://sanity-studio-template.vercel.app',
logo: 'https://raw.githubusercontent.com/vercel/vercel/main/packages/frameworks/logos/sanity.svg',
logo: 'https://api-frameworks.vercel.sh/framework-logos/sanity.svg',
tagline: 'The structured content platform.',
description: 'A Sanity Studio',
website: 'https://www.sanity.io',
@@ -1828,7 +1828,7 @@ export const frameworks = [
name: 'Hydrogen',
slug: 'hydrogen',
demo: 'https://hydrogen-template.vercel.app',
logo: 'https://raw.githubusercontent.com/vercel/vercel/main/packages/frameworks/logos/hydrogen.svg',
logo: 'https://api-frameworks.vercel.sh/framework-logos/hydrogen.svg',
tagline: 'React framework for headless commerce',
description: 'React framework for headless commerce',
website: 'https://hydrogen.shopify.dev',
@@ -1862,7 +1862,7 @@ export const frameworks = [
{
name: 'Other',
slug: null,
logo: 'https://raw.githubusercontent.com/vercel/vercel/main/packages/frameworks/logos/other.svg',
logo: 'https://api-frameworks.vercel.sh/framework-logos/other.svg',
description: 'No framework or an unoptimized framework.',
settings: {
installCommand: {

View File

@@ -53,12 +53,12 @@ export interface Framework {
slug: string | null;
/**
* A URL to the logo of the framework
* @example "https://raw.githubusercontent.com/vercel/vercel/main/packages/frameworks/logos/next.svg"
* @example "https://api-frameworks.vercel.sh/framework-logos/next.svg"
*/
logo: string;
/**
* An additional URL to the logo of the framework optimized for dark mode
* @example "https://raw.githubusercontent.com/vercel/vercel/main/packages/frameworks/logos/next-dark.svg"
* @example "https://api-frameworks.vercel.sh/framework-logos/next-dark.svg"
*/
darkModeLogo?: string;
/**

View File

@@ -10,6 +10,8 @@ import frameworkList from '../src/frameworks';
// bump timeout for Windows as network can be slower
jest.setTimeout(15 * 1000);
const logoPrefix = 'https://api-frameworks.vercel.sh/framework-logos/';
const SchemaFrameworkDetectionItem = {
type: 'array',
items: [
@@ -172,14 +174,33 @@ describe('frameworks', () => {
expect(result).toBe(true);
});
it('ensure logo', async () => {
it('ensure logo starts with url prefix', async () => {
const invalid = frameworkList
.map(f => f.logo)
.filter(logo => {
return logo && !logo.startsWith(logoPrefix);
});
expect(invalid).toEqual([]);
});
it('ensure darkModeLogo starts with url prefix', async () => {
const invalid = frameworkList
.map(f => f.darkModeLogo)
.filter(darkModeLogo => {
return darkModeLogo && !darkModeLogo.startsWith(logoPrefix);
});
expect(invalid).toEqual([]);
});
it('ensure logo file exists in ./packages/frameworks/logos/', async () => {
const missing = frameworkList
.map(f => f.logo)
.filter(url => {
const prefix =
'https://raw.githubusercontent.com/vercel/vercel/main/packages/frameworks/logos/';
const name = url.replace(prefix, '');
return existsSync(join(__dirname, '..', 'logos', name)) === false;
.filter(logo => {
const filename = logo.slice(logoPrefix.length);
const filepath = join(__dirname, '..', 'logos', filename);
return existsSync(filepath) === false;
});
expect(missing).toEqual([]);