Update the language display on the homepage (#5901)

* Update the language display on the homepage

* Remove trailing slash from URLs

* HTTP → HTTPS

* Remove Python

website/data/languages.yml

@@ -1,55 +1,51 @@
 - name: JavaScript
-  showName: false
+  showName: true
   image: /images/languages/tools_js.svg
   variants:
-  - "[`ES2017`](https://github.com/tc39/proposals/blob/master/finished-proposals.md)"
+  - "[JSX](https://facebook.github.io/jsx/)"
-  - "[`JSX`](https://facebook.github.io/jsx/)"
+  - "[Flow](https://flow.org)"
-  - "[`Flow`](https://flow.org/)"
+  - "[TypeScript](https://www.typescriptlang.org)"
-  - "[`TypeScript`](https://www.typescriptlang.org/)"
+  - "[JSON](https://json.org)"
-  - "[`JSON`](http://json.org/)"
 - name: HTML
-  showName: false
+  showName: true
   image: /images/languages/tools_html.svg
   variants:
-  - "`HTML5`"
+  - "[Vue](https://vuejs.org)"
-  - "[`Vue`](https://vuejs.org/)"
+  - "[Angular](https://angular.io)"
-  - "[`Angular`](https://angular.io/)"
 - name: CSS
-  showName: false
+  showName: true
   image: /images/languages/tools_css.svg
   variants:
-  - "`CSS3+`"
+  - "[Less](http://lesscss.org)"
-  - "[`Less`](http://lesscss.org/)"
+  - "[SCSS](https://sass-lang.com)"
-  - "[`SCSS`](http://sass-lang.com)"
+  - "[`styled-components`](https://styled-components.com) 💅"
-  - "[`styled-components`](http://styled-components.com) 💅"
+  - "[`styled-jsx`](https://npmjs.com/styled-jsx)"
-  - "[`styled-jsx`](http://npmjs.com/styled-jsx)"
 - name: GraphQL
-  showName: false
+  nameLink: https://graphql.org
+  showName: true
   image: /images/languages/tools_gql.svg
   variants:
-  - "[`GraphQL`](http://graphql.org/)"
+  - "[GraphQL Schemas](https://graphql.org/learn/schema/)"
-  - "[`GraphQL Schemas`](http://graphql.org/learn/schema/)"
 - name: Markdown
-  showName: false
+  showName: true
   image: /images/languages/tools_md.svg
   variants:
-  - "[`CommonMark`](http://commonmark.org/)"
+  - "[CommonMark](https://commonmark.org)"
-  - "[`GitHub Flavored Markdown`](https://github.github.com/gfm/)"
+  - "[GitHub-Flavored Markdown](https://github.github.com/gfm/)"
-  - "[`MDX`](https://mdxjs.com/)"
+  - "[MDX](https://mdxjs.com)"
 - name: YAML
-  showName: false
+  nameLink: https://yaml.org
+  showName: true
   image: /images/languages/tools_yaml.svg
-  variants:
+  variants: []
-  - "[`YAML`](http://yaml.org/)"
+- name: Community Plugins
-- name: Work in Progress
   showName: true
   image: /images/languages/tools_wip.svg
   variants:
-  - "[`Elm`](https://github.com/gicentre/prettier-plugin-elm) (via [`elm-format`](https://github.com/avh4/elm-format))"
+  - "[Elm](https://github.com/gicentre/prettier-plugin-elm) (via [`elm-format`](https://github.com/avh4/elm-format))"
-  - "[`Java`](https://github.com/jhipster/prettier-java)"
+  - "[Java](https://github.com/jhipster/prettier-java)"
-  - "[`PHP`](https://github.com/prettier/plugin-php)"
+  - "[PHP](https://github.com/prettier/plugin-php)"
-  - "[`PostgreSQL`](https://github.com/benjie/prettier-plugin-pg-sql/)"
+  - "[PostgreSQL](https://github.com/benjie/prettier-plugin-pg-sql/)"
-  - "[`Python`](https://github.com/prettier/plugin-python)"
+  - "[Ruby](https://github.com/prettier/plugin-ruby)"
-  - "[`Ruby`](https://github.com/prettier/plugin-ruby)"
+  - "[Swift](https://github.com/prettier/plugin-swift)"
-  - "[`Swift`](https://github.com/prettier/plugin-swift)"
+  - "[TOML](https://github.com/bd82/toml-tools/tree/master/packages/prettier-plugin-toml)"
-  - "[`TOML`](https://github.com/bd82/toml-tools/tree/master/packages/prettier-plugin-toml)"

website/pages/en/index.js

@@ -112,7 +112,7 @@ TldrSection.propTypes = {
   language: PropTypes.string
 };
 
-const Language = ({ name, showName, image, variants }) => (
+const Language = ({ name, nameLink, showName, image, variants }) => (
   <div
     className="languageCategory"
     style={{
@@ -122,19 +122,24 @@ const Language = ({ name, showName, image, variants }) => (
     }}
   >
     <img src={image} style={{ width: "50px", padding: "0 20px" }} />
-    <div>
+    <ul>
-      {showName && <p className="accented">{name}</p>}
+      {showName && (
+        <li className="accented">
+          {nameLink ? <a href={nameLink}>{name}</a> : name}
+        </li>
+      )}
       {variants.map(variant => (
-        <div key={variant}>
+        <li key={variant}>
           <MarkdownBlock>{variant}</MarkdownBlock>
-        </div>
+        </li>
       ))}
-    </div>
+    </ul>
   </div>
 );
 
 Language.propTypes = {
   name: PropTypes.string,
+  nameLink: PropTypes.string,
   showName: PropTypes.bool,
   image: PropTypes.string,
   variants: PropTypes.array
@@ -149,7 +154,7 @@ const LanguagesSection = () => {
         last.length < 2 &&
         last.reduce((sum, lang) => sum + lang.variants.length, 0) +
           language.variants.length <
-          5
+          9
       ) {
         last.push(language);
       } else {

website/static/overrides.css

@@ -148,16 +148,24 @@ em {
   vertical-align: sub;
 }
 
-.languagesSection h2 {
+.languagesSection h2,
+.languagesSection .accented,
+.languagesSection .accented a {
   color: #c596c7 !important;
 }
 
-.languagesSection .accented {
+.languagesSection .languageCategory ul {
-  color: #c596c7 !important;
+  margin: 0;
-}
-
-.languagesSection .languageCategory p {
   padding: 0;
+  list-style-type: none;
+}
+.languagesSection .languageCategory p,
+.languagesSection .languageCategory a {
+  font-size: 1rem;
+  padding: 0;
+}
+.languagesSection .languageCategory code {
+  font-size: 0.8rem;
 }
 
 .editorSupportSection h2 {