├── static ├── robots.txt ├── favicon.ico └── _redirects ├── .prettierrc ├── .prettierignore ├── netlify.toml ├── content ├── assets │ └── javascriptframework-icon.png ├── pages │ ├── contribute │ │ └── index.md │ └── about │ │ └── index.md └── sites │ ├── svelte │ └── index.md │ ├── vue │ └── index.md │ ├── react │ └── index.md │ ├── angular │ └── index.md │ ├── nuxtjs │ └── index.md │ ├── gatsby │ └── index.md │ ├── nextjs │ └── index.md │ ├── ember │ └── index.md │ └── nodejs │ └── index.md ├── gatsby-browser.js ├── tailwind.config.js ├── src ├── pages │ ├── 404.js │ ├── using-typescript.tsx │ └── index.js ├── templates │ ├── single-page.js │ └── single-site.js ├── components │ ├── sharebuttons.js │ ├── seo.js │ └── layout.js ├── style.css └── cosmic-icon.svg ├── LICENSE ├── .gitignore ├── README.md ├── gatsby-node.js ├── package.json └── gatsby-config.js /static/robots.txt: -------------------------------------------------------------------------------- 1 | User-agent: * 2 | Disallow: 3 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "arrowParens": "avoid", 3 | "semi": false 4 | } 5 | -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | .cache 2 | package.json 3 | package-lock.json 4 | public 5 | -------------------------------------------------------------------------------- /netlify.toml: -------------------------------------------------------------------------------- 1 | [build] 2 | command = "npm run build" 3 | publish = "public" -------------------------------------------------------------------------------- /static/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cosmicjs/javascriptframework/master/static/favicon.ico -------------------------------------------------------------------------------- /static/_redirects: -------------------------------------------------------------------------------- 1 | https://javascript-framework.netlify.app/* https://www.javascriptframework.org/:splat 301! -------------------------------------------------------------------------------- /content/assets/javascriptframework-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cosmicjs/javascriptframework/master/content/assets/javascriptframework-icon.png -------------------------------------------------------------------------------- /gatsby-browser.js: -------------------------------------------------------------------------------- 1 | // custom typefaces 2 | import "typeface-montserrat" 3 | import "typeface-merriweather" 4 | 5 | import "prismjs/themes/prism.css" 6 | 7 | // TailwindCSS 8 | // Read more on how to add other base styles https://tailwindcss.com/docs/adding-base-styles 9 | // Extracting components https://tailwindcss.com/docs/extracting-components 10 | // Or adding new utilities https://tailwindcss.com/docs/adding-new-utilities 11 | import "tailwindcss/base.css" 12 | import "tailwindcss/components.css" 13 | import "tailwindcss/utilities.css" 14 | 15 | // Markdown formatting, uses Tailwind @apply primitive to apply Tailwind's utility classes to 16 | // elements created by the Markdown parser 17 | import "./src/style.css" 18 | -------------------------------------------------------------------------------- /content/pages/contribute/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Contributing 3 | --- 4 | 5 | ## Contributing 6 | 7 | Everybody is welcome to contribute to JavaScript Framework, just fork the [GitHub repo](https://github.com/cosmicjs/javascriptframework) and send a pull request. 8 | Each JavaScript framework is a `index.md` markdown file in the `content/sites//` directory. 9 | 10 | Make sure to follow the following rules: 11 | 12 | - **JavaScript Framework:** Can be a full framework or library utility. 13 | - **Stick to the format:** Fill out all the same fields as the other JavaScript frameworks in `content/sites`. 14 | - **Short description:** Keep all the details for the body text, keep the description for the overview page short and sweet. -------------------------------------------------------------------------------- /content/sites/svelte/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Svelte 3 | homepage: https://svelte.dev/ 4 | description: Cybernetically enhanced web apps. 5 | twitter: sveltejs 6 | github: https://github.com/sveltejs/svelte 7 | cosmicapplink: https://www.cosmicjs.com/apps/svelte-todo-app 8 | icon: https://cdn.cosmicjs.com/58662e40-d1ec-11ea-8a35-957719f61f7e-svelete.svg 9 | --- 10 | 11 | Svelte is a radical new approach to building user interfaces. Whereas traditional frameworks like React and Vue do the bulk of their work in the browser, Svelte shifts that work into a compile step that happens when you build your app. 12 | 13 | Instead of using techniques like virtual DOM diffing, Svelte writes code that surgically updates the DOM when the state of your app changes. -------------------------------------------------------------------------------- /content/sites/vue/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Vue.js 3 | homepage: https://vuejs.org/ 4 | description: The Progressive JavaScript Framework 5 | twitter: vuejs 6 | github: https://github.com/vuejs/vue 7 | cosmicapplink: https://www.cosmicjs.com/apps/simple-vue-blog 8 | icon: https://cdn.cosmicjs.com/858dda70-6288-11e7-ab3d-9ddd8313526f-96da6390-e18a-11e6-a19e-716cc90a0c51-Vue.js_Logo.svg 9 | --- 10 | 11 | ## Approachable 12 | Already know HTML, CSS and JavaScript? Read the guide and start building things in no time! 13 | 14 | ## Versatile 15 | An incrementally adoptable ecosystem that scales between a library and a full-featured framework. 16 | 17 | ## Performant 18 | 20KB min+gzip Runtime 19 | Blazing Fast Virtual DOM 20 | Minimal Optimization Efforts -------------------------------------------------------------------------------- /tailwind.config.js: -------------------------------------------------------------------------------- 1 | const defaultTheme = require("tailwindcss/defaultTheme") 2 | 3 | module.exports = { 4 | purge: ["./src/**/*.js"], 5 | theme: { 6 | extend: { 7 | fontFamily: { 8 | serif: ["Merriweather", ...defaultTheme.fontFamily.serif], 9 | sans: ["Montserrat", ...defaultTheme.fontFamily.sans], 10 | }, 11 | }, 12 | screens: { 13 | sm: "640px", 14 | // => @media (min-width: 640px) { ... } 15 | 16 | md: "768px", 17 | // => @media (min-width: 768px) { ... } 18 | 19 | lg: "1024px", 20 | // => @media (min-width: 1024px) { ... } 21 | 22 | xl: "1280px", 23 | // => @media (min-width: 1280px) { ... } 24 | }, 25 | }, 26 | variants: {}, 27 | plugins: [], 28 | } 29 | -------------------------------------------------------------------------------- /src/pages/404.js: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import { graphql } from "gatsby" 3 | 4 | import Layout from "../components/layout" 5 | import SEO from "../components/seo" 6 | 7 | const NotFoundPage = ({ data, location }) => { 8 | const siteTitle = data.site.siteMetadata.title 9 | 10 | return ( 11 | 12 | 13 |
14 |

Not Found

15 |

You just hit a route that doesn't exist... the sadness.

16 |
17 | 18 | ) 19 | } 20 | 21 | export default NotFoundPage 22 | 23 | export const pageQuery = graphql` 24 | query { 25 | site { 26 | siteMetadata { 27 | title 28 | } 29 | } 30 | } 31 | ` 32 | -------------------------------------------------------------------------------- /src/templates/single-page.js: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import { graphql } from "gatsby" 3 | 4 | import Layout from "../components/layout" 5 | import SEO from "../components/seo" 6 | 7 | const PageTemplate = ({ data, location }) => { 8 | const page = data.markdownRemark 9 | const siteTitle = data.site.siteMetadata.title 10 | 11 | return ( 12 | 13 | 17 |
21 | 22 | ) 23 | } 24 | 25 | export default PageTemplate 26 | 27 | export const pageQuery = graphql` 28 | query SinglePageBySlug($slug: String!) { 29 | site { 30 | siteMetadata { 31 | title 32 | } 33 | } 34 | markdownRemark(fields: { slug: { eq: $slug } }) { 35 | id 36 | html 37 | frontmatter { 38 | title 39 | } 40 | } 41 | } 42 | ` 43 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Copyright (c) 2020 Cosmic JS Inc. 2 | 3 | MIT License 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining 6 | a copy of this software and associated documentation files (the 7 | "Software"), to deal in the Software without restriction, including 8 | without limitation the rights to use, copy, modify, merge, publish, 9 | distribute, sublicense, and/or sell copies of the Software, and to 10 | permit persons to whom the Software is furnished to do so, subject to 11 | the following conditions: 12 | 13 | The above copyright notice and this permission notice shall be 14 | included in all copies or substantial portions of the Software. 15 | 16 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 17 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF 18 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND 19 | NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE 20 | LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION 21 | OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION 22 | WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 23 | -------------------------------------------------------------------------------- /src/components/sharebuttons.js: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import { 3 | TwitterShareButton, 4 | TwitterIcon, 5 | RedditShareButton, 6 | RedditIcon, 7 | FacebookShareButton, 8 | FacebookIcon, 9 | } from "react-share" 10 | 11 | const buttonConfigs = { 12 | twitter: { Button: TwitterShareButton, Icon: TwitterIcon }, 13 | facebook: { Button: FacebookShareButton, Icon: FacebookIcon }, 14 | reddit: { Button: RedditShareButton, Icon: RedditIcon }, 15 | } 16 | 17 | const ShareButton = ({ className }) => { 18 | const shareUrl = "https://www.javascriptframework.org" 19 | const shareText = "Check out JavaScript Framework, a leaderboard of JavaScript frameworks." 20 | 21 | return ( 22 |
23 | {["twitter", "facebook", "reddit"].map(type => { 24 | const { Button, Icon } = buttonConfigs[type] 25 | return ( 26 | 33 | ) 34 | })} 35 |
36 | ) 37 | } 38 | 39 | export default ShareButton 40 | -------------------------------------------------------------------------------- /content/sites/react/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: React 3 | homepage: https://reactjs.org/ 4 | description: A JavaScript library for building user interfaces 5 | twitter: reactjs 6 | github: https://github.com/facebook/react/ 7 | cosmicapplink: https://www.cosmicjs.com/apps/simple-react-blog 8 | icon: https://cdn.cosmicjs.com/a1e22810-27b0-11e7-b6ae-8108cf4caa96-react.svg 9 | --- 10 | 11 | ## Declarative 12 | React makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes. 13 | 14 | Declarative views make your code more predictable and easier to debug. 15 | 16 | ## Component-Based 17 | Build encapsulated components that manage their own state, then compose them to make complex UIs. 18 | 19 | Since component logic is written in JavaScript instead of templates, you can easily pass rich data through your app and keep state out of the DOM. 20 | 21 | ## Learn Once, Write Anywhere 22 | We don’t make assumptions about the rest of your technology stack, so you can develop new features in React without rewriting existing code. 23 | 24 | React can also render on the server using Node and power mobile apps using React Native. -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | 8 | # Runtime data 9 | pids 10 | *.pid 11 | *.seed 12 | *.pid.lock 13 | 14 | # Directory for instrumented libs generated by jscoverage/JSCover 15 | lib-cov 16 | 17 | # Coverage directory used by tools like istanbul 18 | coverage 19 | 20 | # nyc test coverage 21 | .nyc_output 22 | 23 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 24 | .grunt 25 | 26 | # Bower dependency directory (https://bower.io/) 27 | bower_components 28 | 29 | # node-waf configuration 30 | .lock-wscript 31 | 32 | # Compiled binary addons (http://nodejs.org/api/addons.html) 33 | build/Release 34 | 35 | # Dependency directories 36 | node_modules/ 37 | jspm_packages/ 38 | 39 | # Typescript v1 declaration files 40 | typings/ 41 | 42 | # Optional npm cache directory 43 | .npm 44 | 45 | # Optional eslint cache 46 | .eslintcache 47 | 48 | # Optional REPL history 49 | .node_repl_history 50 | 51 | # Output of 'npm pack' 52 | *.tgz 53 | 54 | # dotenv environment variable files 55 | .env* 56 | 57 | # gatsby files 58 | .cache/ 59 | public 60 | 61 | # Mac files 62 | .DS_Store 63 | 64 | # Yarn 65 | yarn-error.log 66 | .pnp/ 67 | .pnp.js 68 | # Yarn Integrity file 69 | .yarn-integrity 70 | -------------------------------------------------------------------------------- /src/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | @apply font-sans; 3 | } 4 | .bg-gradient-brand { 5 | background: #2193b0; /* fallback for old browsers */ 6 | background: linear-gradient(182.33deg,#000758 -17.71%,#109b9b 108.58%); 7 | background: linear-gradient(182.33deg,#000758 -17.71%,#109b9b 108.58%); 8 | } 9 | .markdown > h2 { 10 | @apply text-3xl font-black mb-8; 11 | } 12 | 13 | .markdown > h3 { 14 | @apply text-2xl font-black mt-16 mb-8; 15 | } 16 | 17 | .markdown > h4 { 18 | @apply font-black uppercase mt-16 mb-8; 19 | } 20 | 21 | .markdown > h5 { 22 | @apply text-sm font-black mt-16 mb-8; 23 | } 24 | 25 | .markdown > h6 { 26 | @apply text-xs font-black mt-16 mb-8; 27 | } 28 | 29 | .markdown a { 30 | @apply text-blue-600; 31 | } 32 | 33 | 34 | .markdown > p { 35 | @apply mb-4; 36 | } 37 | 38 | .markdown > blockquote { 39 | @apply -ml-8 mb-8; 40 | } 41 | 42 | .markdown ul { 43 | @apply list-disc mb-8; 44 | } 45 | 46 | .markdown ol { 47 | @apply list-decimal mb-8; 48 | } 49 | 50 | .shareicon-twitter:hover circle { 51 | transition: fill 0.1s ease; 52 | fill: #1da1f2 !important; 53 | } 54 | 55 | .shareicon-facebook:hover circle { 56 | transition: fill 0.1s ease; 57 | fill: #078BF0 !important; 58 | } 59 | 60 | .shareicon-reddit:hover circle { 61 | transition: fill 0.1s ease; 62 | fill: #ff4500 !important; 63 | } -------------------------------------------------------------------------------- /content/pages/about/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: About JavaScript Framework 3 | --- 4 | 5 | ## About JavaScript Framework 6 | 7 | JavaScript Framework is a leaderboard of the top JavaScript frameworks and libraries. It's run by [Cosmic](https://www.cosmic.com), a headless CMS to power content for any website or app, as a resource for those looking for options for the best JavaScript framework. The site itself is built with [Gatsby](https://www.gatsbyjs.org/), and is built and hosted on [Netlify](https://www.netlify.com/). You can check out the source on [GitHub](https://github.com/cosmicjs/javascriptframework) and contributions are [more than welcome](/contribute)! 8 | 9 | ### JavaScript frameworks 10 | 11 | This leaderboard highlights the top JavaScript frameworks that make JavaScript one of [the most popular programming languages](https://insights.stackoverflow.com/survey/2019#most-popular-technologies)! 12 | 13 | By using a JavaScript framework, you can build on the work that someone else has done. Leveraging the open source community, many popular tools have been developed in the JavaScript community to help developers build applications. 14 | 15 | Using a [Headless CMS](https://www.cosmicjs.com/headless-cms) to manage content in your JavaScript application deployed to a [Static Website Hosting](https://www.staticwebsitehosting.org/) provider, you have the option for a modern development stack that is powerful, performant, and secure. 16 | -------------------------------------------------------------------------------- /content/sites/angular/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Angular 3 | homepage: https://angular.io/ 4 | description: One framework. Mobile & desktop. 5 | twitter: angular 6 | github: https://github.com/angular/angular 7 | cosmicapplink: https://www.cosmicjs.com/apps/angular-blog 8 | icon: https://cdn.cosmicjs.com/1a576450-f3e7-11e8-b494-31af6b9cb765-angular.svg 9 | --- 10 | 11 | ## DEVELOP ACROSS ALL PLATFORMS 12 | Learn one way to build applications with Angular and reuse your code and abilities to build apps for any deployment target. For web, mobile web, native mobile and native desktop. 13 | 14 | ## SPEED & PERFORMANCE 15 | Achieve the maximum speed possible on the Web Platform today, and take it further, via Web Workers and server-side rendering. 16 | 17 | Angular puts you in control over scalability. Meet huge data requirements by building data models on RxJS, Immutable.js or another push-model. 18 | 19 | ## INCREDIBLE TOOLING 20 | Build features quickly with simple, declarative templates. Extend the template language with your own components and use a wide array of existing components. Get immediate Angular-specific help and feedback with nearly every IDE and editor. All this comes together so you can focus on building amazing apps rather than trying to make the code work. 21 | 22 | ## LOVED BY MILLIONS 23 | From prototype through global deployment, Angular delivers the productivity and scalable infrastructure that supports Google's largest applications. -------------------------------------------------------------------------------- /content/sites/nuxtjs/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Nuxt.js 3 | homepage: https://nuxtjs.org/ 4 | description: The Intuitive Vue Framework 5 | twitter: nuxtjs 6 | github: https://github.com/nuxt/nuxt.js 7 | cosmicapplink: https://www.cosmicjs.com/apps/nuxtjs-website 8 | icon: https://cdn.cosmicjs.com/2d15d4f0-9300-11ea-838a-0523b52a08cb-nuxt-square.svg 9 | --- 10 | 11 | > Build your next Vue.js application with confidence using Nuxt.js: a framework making web development simple and powerful. 12 | 13 | ## Links 14 | 15 | - 📘 Documentation: [https://nuxtjs.org](https://nuxtjs.org) 16 | - 👥 Community: [cmty.app/nuxt](https://cmty.app/nuxt) 17 | - 🎬 Video: [1 minute demo](https://www.youtube.com/watch?v=kmf-p-pTi40) 18 | - 🐦 Twitter: [@nuxt_js](https://twitter.nuxtjs.org/) 19 | - 💬 Chat: [Discord](https://discord.nuxtjs.org/) 20 | - 🌟 [AwesomeNuxt](https://awesome.nuxtjs.org/) 21 | - 👉 [Play with Nuxt.js online](https://template.nuxtjs.org) 22 | 23 | ## Features 24 | 25 | - Automatic transpilation and bundling (with webpack and babel) 26 | - Hot code reloading 27 | - Server-side rendering OR Single Page App OR Static Generated, you choose :fire: 28 | - Static file serving. `./static/` is mapped to `/` 29 | - Configurable with a `nuxt.config.js` file 30 | - Custom layouts with the `layouts/` directory 31 | - Middleware 32 | - Code splitting for every `pages/` 33 | - Loading just the critical CSS (page-level) 34 | 35 | Learn more at . 36 | -------------------------------------------------------------------------------- /src/pages/using-typescript.tsx: -------------------------------------------------------------------------------- 1 | // If you don't want to use TypeScript you can delete this file! 2 | import React from "react" 3 | import { PageProps, Link, graphql } from "gatsby" 4 | 5 | import Layout from "../components/layout" 6 | import SEO from "../components/seo" 7 | 8 | type DataProps = { 9 | site: { 10 | buildTime: string 11 | } 12 | } 13 | 14 | const UsingTypescript: React.FC> = ({ 15 | data, 16 | path, 17 | location, 18 | }) => ( 19 | 20 | 21 |

Gatsby supports TypeScript by default!

22 |

23 | This means that you can create and write .ts/.tsx files for your 24 | pages, components etc. Please note that the gatsby-*.js files 25 | (like gatsby-node.js) currently don't support TypeScript yet. 26 |

27 |

28 | For type checking you'll want to install typescript via npm and 29 | run tsc --init to create a .tsconfig file. 30 |

31 |

32 | You're currently on the page "{path}" which was built on{" "} 33 | {data.site.buildTime}. 34 |

35 |

36 | To learn more, head over to our{" "} 37 | 38 | documentation about TypeScript 39 | 40 | . 41 |

42 | Go back to the homepage 43 | 44 | ) 45 | 46 | export default UsingTypescript 47 | 48 | export const query = graphql` 49 | { 50 | site { 51 | buildTime(formatString: "YYYY-MM-DD hh:mm a z") 52 | } 53 | } 54 | ` 55 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # JavaScript Framework 2 | 3 | [javascriptframework.org](http://javascriptframework.org), a leaderboard of top JavaScript frameworks. 4 | 5 | [![Netlify Status](https://api.netlify.com/api/v1/badges/388637c1-8040-4b2d-84b4-1cfa38cd62bb/deploy-status)](https://app.netlify.com/sites/javascript-framework/deploys) 6 | 7 | ## Contributing 8 | 9 | Missing a JavaScript Framework here? Just fork the repo and add the provider with an `index.md` file in the `content/sites//` folder. 10 | 11 | Make sure to follow the following rules: 12 | 13 | - **JavaScript Framework:** Can be a full framework or library utility. 14 | - **Stick to the format:** Fill out all the same fields as the other JavaScript frameworks in `content/sites`. 15 | - **Short description:** Keep all the details for the body text, keep the description for the overview page short and sweet. 16 | 17 | ## Usage 18 | 19 | Be sure that you have the latest node and npm installed, then clone this repository and run: 20 | 21 | ```bash 22 | npm install 23 | npm start 24 | ``` 25 | 26 | Then visit http://localhost:8000/ - Gatsby will automatically reload when changes occur. 27 | 28 | To test a production build locally, do: 29 | 30 | ```bash 31 | npm run build 32 | npm run serve 33 | ``` 34 | 35 | To run a production build for deployment: 36 | 37 | ```bash 38 | npm run build 39 | ``` 40 | 41 | ## Cosmic 42 | 43 | javascriptframework.org is built and maintained by [Cosmic](https://www.cosmicjs.com), a headless CMS to manage content for JavaScript websites and apps. 44 | 45 | ## License 46 | 47 | javascriptframework.org is released under the [MIT License](LICENSE). 48 | Please make sure you understand its [implications and guarantees](https://writing.kemitchell.com/2016/09/21/MIT-License-Line-by-Line.html). 49 | -------------------------------------------------------------------------------- /content/sites/gatsby/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Gatsby 3 | homepage: https://gatsbyjs.org/ 4 | description: Gatsby is a free and open source framework based on React 5 | twitter: gatsbyjs 6 | github: https://github.com/gatsbyjs/gatsby 7 | cosmicapplink: https://www.cosmicjs.com/apps/gatsby-blog 8 | icon: https://cdn.cosmicjs.com/17c79a80-cf72-11ea-a03b-a9b51dcc4b0e-gatsby-cms.svg 9 | --- 10 | 11 | Gatsby is a modern web framework for blazing fast websites. 12 | 13 | - **Go Beyond Static Websites.** Get all the benefits of static websites with none of the 14 | limitations. Gatsby sites are fully functional React apps so you can create high-quality, 15 | dynamic web apps, from blogs to e-commerce sites to user dashboards. 16 | 17 | - **Use a Modern Stack for Every Site.** No matter where the data comes from, Gatsby sites are 18 | built using React and GraphQL. Build a uniform workflow for you and your team, regardless of 19 | whether the data is coming from the same backend. 20 | 21 | - **Load Data From Anywhere.** Gatsby pulls in data from any data source, whether it’s Markdown 22 | files, a headless CMS like Contentful or WordPress, or a REST or GraphQL API. Use source plugins 23 | to load your data, then develop using Gatsby’s uniform GraphQL interface. 24 | 25 | - **Performance Is Baked In.** Ace your performance audits by default. Gatsby automates code 26 | splitting, image optimization, inlining critical styles, lazy-loading, prefetching resources, 27 | and more to ensure your site is fast — no manual tuning required. 28 | 29 | - **Host at Scale for Pennies.** Gatsby sites don’t require servers so you can host your entire 30 | site on a CDN for a fraction of the cost of a server-rendered site. Many Gatsby sites can be 31 | hosted entirely free on services like GitHub Pages and Netlify. 32 | 33 | [**Learn how to use Gatsby for your next project.**](https://gatsbyjs.org/docs/) 34 | -------------------------------------------------------------------------------- /gatsby-node.js: -------------------------------------------------------------------------------- 1 | const path = require(`path`) 2 | const { createFilePath } = require(`gatsby-source-filesystem`) 3 | 4 | exports.createPages = async ({ graphql, actions }) => { 5 | const { createPage } = actions 6 | 7 | const singleSite = path.resolve(`./src/templates/single-site.js`) 8 | const singlePage = path.resolve(`./src/templates/single-page.js`) 9 | const result = await graphql( 10 | ` 11 | { 12 | allMarkdownRemark(limit: 1000) { 13 | edges { 14 | node { 15 | fields { 16 | slug 17 | } 18 | frontmatter { 19 | title 20 | } 21 | parent { 22 | ... on File { 23 | dir 24 | } 25 | } 26 | } 27 | } 28 | } 29 | } 30 | ` 31 | ) 32 | 33 | // Create blog posts pages. 34 | const data = result.data.allMarkdownRemark.edges 35 | const sites = data.filter(({ node }) => 36 | node.parent.dir.includes("content/sites") 37 | ) 38 | 39 | sites.forEach((site, index) => { 40 | createPage({ 41 | path: site.node.fields.slug, 42 | component: singleSite, 43 | context: { 44 | slug: site.node.fields.slug, 45 | }, 46 | }) 47 | }) 48 | 49 | // Create pages 50 | const pages = data.filter(({ node }) => 51 | node.parent.dir.includes("content/pages") 52 | ) 53 | 54 | pages.forEach((page, index) => { 55 | createPage({ 56 | path: page.node.fields.slug, 57 | component: singlePage, 58 | context: { 59 | slug: page.node.fields.slug, 60 | }, 61 | }) 62 | }) 63 | } 64 | 65 | exports.onCreateNode = ({ node, actions, getNode }) => { 66 | const { createNodeField } = actions 67 | 68 | if (node.internal.type === `MarkdownRemark`) { 69 | const value = createFilePath({ node, getNode }) 70 | createNodeField({ 71 | name: `slug`, 72 | node, 73 | value, 74 | }) 75 | } 76 | } 77 | -------------------------------------------------------------------------------- /content/sites/nextjs/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Next.js 3 | homepage: https://nextjs.org/ 4 | description: The React Framework for Websites and Apps 5 | twitter: vercel 6 | github: https://github.com/vercel/next.js 7 | cosmicapplink: https://www.cosmicjs.com/apps/nextjs-static-blog 8 | icon: https://cdn.cosmicjs.com/d17ebda0-d1ed-11ea-8a35-957719f61f7e-nextjs.svg 9 | --- 10 | 11 | To build a complete web application with React from scratch, there are many important details you need to consider: 12 | 13 | - Code has to be bundled using a bundler like webpack and transformed using a compiler like Babel. 14 | - You need to do production optimizations such as code splitting. 15 | - You might want to statically pre-render some pages for performance and SEO. You might also want to use server-side rendering or client-side rendering. 16 | - You might have to write some server-side code to connect your React app to your data store. 17 | 18 | A framework can solve these problems. But such a framework must have the right level of abstraction — otherwise it won’t be very useful. It also needs to have great "Developer Experience", ensuring you and your team have an amazing experience while writing code. 19 | 20 | ## Next.js: The React Framework 21 | Enter Next.js, the React Framework. Next.js provides a solution to all of the above problems. But more importantly, it puts you and your team in the pit of success when building React applications. 22 | 23 | Next.js has the best-in-class "Developer Experience" and many built-in features; a sample of them are: 24 | 25 | - An intuitive page-based routing system (with support for dynamic routes) 26 | - Pre-rendering, both static generation (SSG) and server-side rendering (SSR) are supported on a per-page basis 27 | - Automatic code splitting for faster page loads 28 | - Client-side routing with optimized prefetching 29 | - Built-in CSS and Sass support, and support for any CSS-in-JS library 30 | - Development environment which supports Hot Module Replacement 31 | - API routes to build API endpoints with Serverless Functions 32 | - Fully extendable 33 | Next.js is used in tens of thousands of production-facing websites and web applications, including many of the world's largest brands. -------------------------------------------------------------------------------- /src/cosmic-icon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 6 | 8 | 9 | 10 | 12 | 14 | 16 | 18 | 20 | 22 | 23 | 24 | 26 | 28 | 29 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /src/components/seo.js: -------------------------------------------------------------------------------- 1 | /** 2 | * SEO component that queries for data with 3 | * Gatsby's useStaticQuery React hook 4 | * 5 | * See: https://www.gatsbyjs.org/docs/use-static-query/ 6 | */ 7 | 8 | import React from "react" 9 | import PropTypes from "prop-types" 10 | import { Helmet } from "react-helmet" 11 | import { useStaticQuery, graphql } from "gatsby" 12 | 13 | const SEO = ({ description, lang, meta, title }) => { 14 | const { site } = useStaticQuery( 15 | graphql` 16 | query { 17 | site { 18 | siteMetadata { 19 | title 20 | description 21 | } 22 | } 23 | } 24 | ` 25 | ) 26 | 27 | const metaDescription = description || site.siteMetadata.description 28 | 29 | return ( 30 | 78 | ) 79 | } 80 | 81 | SEO.defaultProps = { 82 | lang: `en`, 83 | meta: [], 84 | description: ``, 85 | } 86 | 87 | SEO.propTypes = { 88 | description: PropTypes.string, 89 | lang: PropTypes.string, 90 | meta: PropTypes.arrayOf(PropTypes.object), 91 | title: PropTypes.string, 92 | } 93 | 94 | export default SEO 95 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "javascriptframework", 3 | "private": true, 4 | "description": "javascriptframework, a list of JavaScript frameworks for Jamstack sites.", 5 | "version": "1.0.0", 6 | "author": "@cosmicjs", 7 | "bugs": { 8 | "url": "https://github.com/cosmicjs/javascriptframework/issues" 9 | }, 10 | "dependencies": { 11 | "@fortawesome/fontawesome-svg-core": "^1.2.29", 12 | "@fortawesome/free-brands-svg-icons": "^5.13.1", 13 | "@fortawesome/free-solid-svg-icons": "^5.13.1", 14 | "@fortawesome/react-fontawesome": "^0.1.11", 15 | "gatsby": "^2.23.12", 16 | "gatsby-image": "^2.4.9", 17 | "gatsby-plugin-feed": "^2.5.7", 18 | "gatsby-plugin-google-analytics": "^2.3.6", 19 | "gatsby-plugin-manifest": "^2.4.14", 20 | "gatsby-plugin-offline": "^3.2.13", 21 | "gatsby-plugin-postcss": "^2.3.11", 22 | "gatsby-plugin-react-helmet": "^3.3.6", 23 | "gatsby-plugin-sharp": "^2.6.14", 24 | "gatsby-remark-copy-linked-files": "^2.3.7", 25 | "gatsby-remark-images": "^3.3.14", 26 | "gatsby-remark-prismjs": "^3.5.6", 27 | "gatsby-remark-responsive-iframe": "^2.4.7", 28 | "gatsby-remark-smartypants": "^2.3.6", 29 | "gatsby-source-filesystem": "^2.3.14", 30 | "gatsby-transformer-remark": "^2.8.20", 31 | "gatsby-transformer-sharp": "^2.5.7", 32 | "prismjs": "^1.20.0", 33 | "react": "^16.12.0", 34 | "react-dom": "^16.12.0", 35 | "react-github-corner": "^2.3.0", 36 | "react-helmet": "^5.2.1", 37 | "react-share": "^4.2.1", 38 | "typeface-merriweather": "0.0.72", 39 | "typeface-montserrat": "0.0.75" 40 | }, 41 | "devDependencies": { 42 | "autoprefixer": "^9.8.4", 43 | "cssnano": "^4.1.10", 44 | "prettier": "2.0.5", 45 | "tailwindcss": "^1.4.6" 46 | }, 47 | "homepage": "https://github.com/cosmicjs/javascriptframework#readme", 48 | "keywords": [ 49 | "JavaScript Framework", 50 | "gatsby", 51 | "cosmic" 52 | ], 53 | "license": "MIT", 54 | "main": "n/a", 55 | "repository": { 56 | "type": "git", 57 | "url": "https://github.com/cosmicjs/javascriptframework" 58 | }, 59 | "scripts": { 60 | "build": "gatsby build", 61 | "develop": "gatsby develop", 62 | "format": "prettier --write \"**/*.{js,jsx,ts,tsx,json,md}\"", 63 | "start": "npm run develop", 64 | "serve": "gatsby serve", 65 | "clean": "gatsby clean", 66 | "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\" && exit 1" 67 | } 68 | } 69 | -------------------------------------------------------------------------------- /src/pages/index.js: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import { Link, graphql } from "gatsby" 3 | 4 | import Layout from "../components/layout" 5 | import SEO from "../components/seo" 6 | 7 | const BlogIndex = ({ data, location }) => { 8 | const siteTitle = data.site.siteMetadata.title 9 | const content = data.allMarkdownRemark.edges 10 | const sites = content.filter(({ node }) => 11 | node.parent.dir.includes("content/sites") 12 | ) 13 | 14 | return ( 15 | 16 | 17 |
18 | {sites.map(({ node }) => { 19 | const title = node.frontmatter.title || node.fields.slug 20 | const icon = node.frontmatter.icon || false 21 | return ( 22 |
26 | 27 |
28 |
29 |
30 | {`${title} 35 |
36 |

37 | {title} 38 |

39 |
40 |
41 |

46 |

47 |
48 | 49 |
50 | ) 51 | })} 52 |
53 | 54 | ) 55 | } 56 | 57 | export default BlogIndex 58 | 59 | export const pageQuery = graphql` 60 | query { 61 | site { 62 | siteMetadata { 63 | title 64 | } 65 | } 66 | allMarkdownRemark(sort: { fields: [fields___slug], order: ASC }) { 67 | edges { 68 | node { 69 | excerpt 70 | fields { 71 | slug 72 | } 73 | frontmatter { 74 | title 75 | description 76 | cosmicapplink 77 | icon 78 | } 79 | parent { 80 | ... on File { 81 | dir 82 | } 83 | } 84 | } 85 | } 86 | } 87 | } 88 | ` 89 | -------------------------------------------------------------------------------- /content/sites/ember/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Ember 3 | homepage: https://emberjs.com/ 4 | description: A framework for ambitious web developers. 5 | twitter: emberjs 6 | github: https://github.com/emberjs/ember.js 7 | cosmicapplink: https://www.cosmicjs.com/apps/real-estate-website 8 | icon: https://cdn.cosmicjs.com/8d1cd630-6281-11e7-8d46-7b261262b385-Ember.js_Logo_and_Mascot.png 9 | --- 10 | 11 | **Ember.js** is a JavaScript framework that greatly reduces the time, effort and resources needed to build any web application. It is focused on making you, the developer, as productive as possible by doing all the common, repetitive, yet essential, tasks involved in most web development projects. 12 | 13 | With Ember, you get all of these things: 14 | 15 | * [**A Welcoming Community**](https://emberjs.com/community/) - Get the help you need, when you need it. 16 | * [**An Enduring Foundation for your Apps**](https://en.wikipedia.org/wiki/Ember.js) - There are apps that used the first version of Ember almost a decade ago, and successfully still use Ember today. 17 | * [**Reliability & Security**](https://emberjs.com/releases/) - With regular LTS Releases and 30 weeks of security fixes, you can rely on Ember.js to care about the stability [and security](https://emberjs.com/security/) of your app. 18 | * [**Modern JavaScript**](https://guides.emberjs.com/release/upgrading/current-edition/) - Use modern JavaScript features that you're already familiar with like classes, decorators and generators. 19 | * [**Documentation**](https://guides.emberjs.com) - Rely on top-notch documentation for each Ember version and a team that is focused on the documentation and learning experience. 20 | * [**HTML-first Components**](https://guides.emberjs.com/release/components/introducing-components/) - Start with valid, semantic HTML in your components, and layer in the functionality that you need, as you need it. 21 | * [**Routing**](https://guides.emberjs.com/release/routing/) - Ember routes respect URLs while layering in extra functionality like rendering templates, loading data models, handling actions, and conditionally redirecting. 22 | * [**Data Layer**](https://guides.emberjs.com/release/models/) - Ember Data is a powerful data management tool that comes with Ember apps by default. Want to use something else? We support that, too! 23 | * [**Flexibility**](https://guides.emberjs.com/release/models/customizing-adapters/) Use _**any**_ backend stack with your Ember apps, thanks to the flexibility of adapters and serializers. 24 | * [**Autotracking**](https://guides.emberjs.com/release/in-depth-topics/autotracking-in-depth/) - Ember's reactivity model makes it easier to decide what to automatically update, and when. 25 | * [**Zero Config Apps**](https://guides.emberjs.com/release/configuring-ember/) - With strong defaults, you may never need to configure anything in your app, but the options are there if you need it! 26 | * [**Quality Addon Ecosystem**](https://emberobserver.com/) - high-quality, rated addons with the ability to [search by source code](https://emberobserver.com/code-search?codeQuery=task). Many require no additional configuration, making it easier than ever to supercharge your apps. 27 | 28 | 29 | 30 | Find out more: 31 | 32 | - [Website](https://emberjs.com) 33 | - [Guides](https://guides.emberjs.com) 34 | - [API](https://emberjs.com/api) 35 | - [Community](https://emberjs.com/community) 36 | - [Blog](https://emberjs.com/blog) 37 | - [Builds](https://emberjs.com/builds) -------------------------------------------------------------------------------- /content/sites/nodejs/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Node.js 3 | homepage: https://nodejs.org/ 4 | description: A JavaScript runtime built on Chrome's V8 JavaScript engine. 5 | twitter: nodejs 6 | github: https://github.com/nodejs/node 7 | cosmicapplink: https://www.cosmicjs.com/apps/simple-blog 8 | icon: https://imgix.cosmicjs.com/759e85a0-27b0-11e7-b6ae-8108cf4caa96-nodejs.svg 9 | --- 10 | 11 | ## About Node.js® 12 | 13 | As an asynchronous event-driven JavaScript runtime, Node.js is designed to build 14 | scalable network applications. In the following "hello world" example, many 15 | connections can be handled concurrently. Upon each connection, the callback is 16 | fired, but if there is no work to be done, Node.js will sleep. 17 | 18 | ```javascript 19 | const http = require('http'); 20 | 21 | const hostname = '127.0.0.1'; 22 | const port = 3000; 23 | 24 | const server = http.createServer((req, res) => { 25 | res.statusCode = 200; 26 | res.setHeader('Content-Type', 'text/plain'); 27 | res.end('Hello World'); 28 | }); 29 | 30 | server.listen(port, hostname, () => { 31 | console.log(`Server running at http://${hostname}:${port}/`); 32 | }); 33 | ``` 34 | 35 | This is in contrast to today's more common concurrency model, in which OS threads 36 | are employed. Thread-based networking is relatively inefficient and very 37 | difficult to use. Furthermore, users of Node.js are free from worries of 38 | dead-locking the process, since there are no locks. Almost no function in 39 | Node.js directly performs I/O, so the process never blocks. Because nothing blocks, scalable systems are very reasonable to develop in Node.js. 40 | 41 | If some of this language is unfamiliar, there is a full article on 42 | [Blocking vs. Non-Blocking][]. 43 | 44 | --- 45 | 46 | Node.js is similar in design to, and influenced by, systems like Ruby's 47 | [Event Machine][] and Python's [Twisted][]. Node.js takes the event model a bit 48 | further. It presents an [event loop][] as a runtime construct instead of as a library. In other systems, there is always a blocking call to start the 49 | event-loop. 50 | Typically, behavior is defined through callbacks at the beginning of a script, and 51 | at the end a server is started through a blocking call like 52 | `EventMachine::run()`. In Node.js, there is no such start-the-event-loop call. 53 | Node.js simply enters the event loop after executing the input script. Node.js 54 | exits the event loop when there are no more callbacks to perform. This behavior 55 | is like browser JavaScript — the event loop is hidden from the user. 56 | 57 | HTTP is a first-class citizen in Node.js, designed with streaming and low 58 | latency in mind. This makes Node.js well suited for the foundation of a web 59 | library or framework. 60 | 61 | Node.js being designed without threads doesn't mean you can't take 62 | advantage of multiple cores in your environment. Child processes can be spawned 63 | by using our [`child_process.fork()`][] API, and are designed to be easy to 64 | communicate with. Built upon that same interface is the [`cluster`][] module, 65 | which allows you to share sockets between processes to enable load balancing 66 | over your cores. 67 | 68 | [Blocking vs. Non-Blocking]: https://nodejs.org/en/docs/guides/blocking-vs-non-blocking/ 69 | [`child_process.fork()`]: https://nodejs.org/api/child_process.html#child_process_child_process_fork_modulepath_args_options 70 | [`cluster`]: https://nodejs.org/api/cluster.html 71 | [event loop]: https://nodejs.org/en/docs/guides/event-loop-timers-and-nexttick/ 72 | [Event Machine]: https://github.com/eventmachine/eventmachine 73 | [Twisted]: https://twistedmatrix.com/trac/ 74 | -------------------------------------------------------------------------------- /src/components/layout.js: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import GitHubCorner from "react-github-corner" 3 | import { Link } from "gatsby" 4 | 5 | import ShareButtons from "./sharebuttons" 6 | 7 | const Layout = ({ title, children }) => { 8 | return ( 9 |
10 |
11 |
12 |

13 | 14 | JavaScript Framework 15 | 16 |

17 |

18 | A List of JavaScript Frameworks and Libraries 19 |

20 | 21 |
22 | 28 |
29 | 69 |
70 |
{children}
71 |
72 |
73 |
74 |

75 | JavaScript Framework is maintained by{" "} 76 | 77 | 78 | Cosmic 79 | 80 | 81 | , the perfect{" "} 82 | 83 | 87 | JavaScript CMS 88 | 89 | {" "} 90 | for your JavaScript websites and apps. 91 |

92 | 93 | © Cosmic {new Date().getFullYear()} 94 | 95 |
96 |
97 |
98 | ) 99 | } 100 | 101 | export default Layout 102 | -------------------------------------------------------------------------------- /src/templates/single-site.js: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import { graphql } from "gatsby" 3 | import { FontAwesomeIcon } from "@fortawesome/react-fontawesome" 4 | import { faHome } from "@fortawesome/free-solid-svg-icons" 5 | import { faTwitter, faGithub } from "@fortawesome/free-brands-svg-icons" 6 | 7 | import CosmicIcon from "../cosmic-icon.svg" 8 | import Layout from "../components/layout" 9 | import SEO from "../components/seo" 10 | 11 | const BlogPostTemplate = ({ data, location }) => { 12 | const site = data.markdownRemark 13 | const siteTitle = data.site.siteMetadata.title 14 | const homePage = site.frontmatter.homepage 15 | const twitter = site.frontmatter.twitter 16 | const githubLink = site.frontmatter.github 17 | const cosmicAppLink = site.frontmatter.cosmicapplink 18 | const icon = site.frontmatter.icon || false 19 | 20 | return ( 21 | 22 | 26 | 87 | 88 | ) 89 | } 90 | 91 | export default BlogPostTemplate 92 | 93 | export const pageQuery = graphql` 94 | query SingleSiteBySlug($slug: String!) { 95 | site { 96 | siteMetadata { 97 | title 98 | } 99 | } 100 | markdownRemark(fields: { slug: { eq: $slug } }) { 101 | id 102 | excerpt(pruneLength: 160) 103 | html 104 | frontmatter { 105 | title 106 | description 107 | homepage 108 | twitter 109 | cosmicapplink 110 | github 111 | icon 112 | } 113 | } 114 | } 115 | ` 116 | -------------------------------------------------------------------------------- /gatsby-config.js: -------------------------------------------------------------------------------- 1 | const resolveConfig = require("tailwindcss/resolveConfig") 2 | const tailwindConfig = require("./tailwind.config.js") 3 | 4 | module.exports = { 5 | siteMetadata: { 6 | siteName: `JavaScript Framework`, 7 | title: `JavaScript Framework | Top JavaScript Frameworks`, 8 | description: `JavaScript Framework is a leaderboard of the top JavaScript frameworks. A place to help you find the right JavaScript framework for your app.`, 9 | siteUrl: `https://www.javascriptframework.org/`, 10 | }, 11 | plugins: [ 12 | { 13 | resolve: `gatsby-source-filesystem`, 14 | options: { 15 | path: `${__dirname}/content/sites`, 16 | name: `sites`, 17 | }, 18 | }, 19 | { 20 | resolve: `gatsby-source-filesystem`, 21 | options: { 22 | path: `${__dirname}/content/pages`, 23 | name: `pages`, 24 | }, 25 | }, 26 | { 27 | resolve: `gatsby-source-filesystem`, 28 | options: { 29 | path: `${__dirname}/content/assets`, 30 | name: `assets`, 31 | }, 32 | }, 33 | { 34 | resolve: `gatsby-transformer-remark`, 35 | options: { 36 | plugins: [ 37 | { 38 | resolve: `gatsby-remark-images`, 39 | options: { 40 | maxWidth: 590, 41 | }, 42 | }, 43 | { 44 | resolve: `gatsby-remark-responsive-iframe`, 45 | options: { 46 | wrapperStyle: `margin-bottom: 1.0725rem`, 47 | }, 48 | }, 49 | `gatsby-remark-prismjs`, 50 | `gatsby-remark-copy-linked-files`, 51 | `gatsby-remark-smartypants`, 52 | ], 53 | }, 54 | }, 55 | `gatsby-transformer-sharp`, 56 | `gatsby-plugin-sharp`, 57 | { 58 | resolve: `gatsby-plugin-google-analytics`, 59 | options: { 60 | trackingId: process.env.GOOGLE_ANALYTICS_ID, 61 | }, 62 | }, 63 | { 64 | resolve: `gatsby-plugin-feed`, 65 | options: { 66 | query: ` 67 | { 68 | site { 69 | siteMetadata { 70 | title 71 | description 72 | siteUrl 73 | site_url: siteUrl 74 | } 75 | } 76 | } 77 | `, 78 | feeds: [ 79 | { 80 | serialize: ({ query: { site, allMarkdownRemark } }) => { 81 | return allMarkdownRemark.edges.map(edge => { 82 | return Object.assign({}, edge.node.frontmatter, { 83 | description: edge.node.excerpt, 84 | url: site.siteMetadata.siteUrl + edge.node.fields.slug, 85 | guid: site.siteMetadata.siteUrl + edge.node.fields.slug, 86 | custom_elements: [{ "content:encoded": edge.node.html }], 87 | }) 88 | }) 89 | }, 90 | query: ` 91 | { 92 | allMarkdownRemark { 93 | edges { 94 | node { 95 | excerpt 96 | html 97 | fields { slug } 98 | frontmatter { 99 | title 100 | } 101 | } 102 | } 103 | } 104 | } 105 | `, 106 | output: "/rss.xml", 107 | title: "JavaScript Framework's RSS Feed", 108 | }, 109 | ], 110 | }, 111 | }, 112 | { 113 | resolve: `gatsby-plugin-manifest`, 114 | options: { 115 | name: `JavaScript Framework`, 116 | short_name: `JavaScript Framework`, 117 | start_url: `/`, 118 | background_color: `#ffffff`, 119 | theme_color: `#2193b0`, 120 | display: `minimal-ui`, 121 | icon: `content/assets/javascriptframework-icon.png`, 122 | }, 123 | }, 124 | `gatsby-plugin-react-helmet`, 125 | // this (optional) plugin enables Progressive Web App + Offline functionality 126 | // To learn more, visit: https://gatsby.dev/offline 127 | `gatsby-plugin-offline`, 128 | { 129 | resolve: `gatsby-plugin-postcss`, 130 | options: { 131 | postCssPlugins: [ 132 | require(`tailwindcss`)(tailwindConfig), 133 | require(`autoprefixer`), 134 | ...(process.env.NODE_ENV === `production` 135 | ? [require(`cssnano`)] 136 | : []), 137 | ], 138 | }, 139 | }, 140 | ], 141 | } 142 | --------------------------------------------------------------------------------