Update the language display on the homepage (#5901)
* Update the language display on the homepage * Remove trailing slash from URLs * HTTP → HTTPS * Remove Pythonmaster
parent
723a047b91
commit
aec3978a13
|
@ -1,55 +1,51 @@
|
||||||
- name: JavaScript
|
- name: JavaScript
|
||||||
showName: false
|
showName: true
|
||||||
image: /images/languages/tools_js.svg
|
image: /images/languages/tools_js.svg
|
||||||
variants:
|
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
|
- name: HTML
|
||||||
showName: false
|
showName: true
|
||||||
image: /images/languages/tools_html.svg
|
image: /images/languages/tools_html.svg
|
||||||
variants:
|
variants:
|
||||||
- "`HTML5`"
|
- "[Vue](https://vuejs.org)"
|
||||||
- "[`Vue`](https://vuejs.org/)"
|
- "[Angular](https://angular.io)"
|
||||||
- "[`Angular`](https://angular.io/)"
|
|
||||||
- name: CSS
|
- name: CSS
|
||||||
showName: false
|
showName: true
|
||||||
image: /images/languages/tools_css.svg
|
image: /images/languages/tools_css.svg
|
||||||
variants:
|
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
|
- name: GraphQL
|
||||||
showName: false
|
nameLink: https://graphql.org
|
||||||
|
showName: true
|
||||||
image: /images/languages/tools_gql.svg
|
image: /images/languages/tools_gql.svg
|
||||||
variants:
|
variants:
|
||||||
- "[`GraphQL`](http://graphql.org/)"
|
- "[GraphQL Schemas](https://graphql.org/learn/schema/)"
|
||||||
- "[`GraphQL Schemas`](http://graphql.org/learn/schema/)"
|
|
||||||
- name: Markdown
|
- name: Markdown
|
||||||
showName: false
|
showName: true
|
||||||
image: /images/languages/tools_md.svg
|
image: /images/languages/tools_md.svg
|
||||||
variants:
|
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
|
- name: YAML
|
||||||
showName: false
|
nameLink: https://yaml.org
|
||||||
|
showName: true
|
||||||
image: /images/languages/tools_yaml.svg
|
image: /images/languages/tools_yaml.svg
|
||||||
variants:
|
variants: []
|
||||||
- "[`YAML`](http://yaml.org/)"
|
- name: Community Plugins
|
||||||
- name: Work in Progress
|
|
||||||
showName: true
|
showName: true
|
||||||
image: /images/languages/tools_wip.svg
|
image: /images/languages/tools_wip.svg
|
||||||
variants:
|
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)"
|
|
||||||
|
|
|
@ -112,7 +112,7 @@ TldrSection.propTypes = {
|
||||||
language: PropTypes.string
|
language: PropTypes.string
|
||||||
};
|
};
|
||||||
|
|
||||||
const Language = ({ name, showName, image, variants }) => (
|
const Language = ({ name, nameLink, showName, image, variants }) => (
|
||||||
<div
|
<div
|
||||||
className="languageCategory"
|
className="languageCategory"
|
||||||
style={{
|
style={{
|
||||||
|
@ -122,19 +122,24 @@ const Language = ({ name, showName, image, variants }) => (
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<img src={image} style={{ width: "50px", padding: "0 20px" }} />
|
<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 => (
|
{variants.map(variant => (
|
||||||
<div key={variant}>
|
<li key={variant}>
|
||||||
<MarkdownBlock>{variant}</MarkdownBlock>
|
<MarkdownBlock>{variant}</MarkdownBlock>
|
||||||
</div>
|
</li>
|
||||||
))}
|
))}
|
||||||
</div>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
||||||
Language.propTypes = {
|
Language.propTypes = {
|
||||||
name: PropTypes.string,
|
name: PropTypes.string,
|
||||||
|
nameLink: PropTypes.string,
|
||||||
showName: PropTypes.bool,
|
showName: PropTypes.bool,
|
||||||
image: PropTypes.string,
|
image: PropTypes.string,
|
||||||
variants: PropTypes.array
|
variants: PropTypes.array
|
||||||
|
@ -149,7 +154,7 @@ const LanguagesSection = () => {
|
||||||
last.length < 2 &&
|
last.length < 2 &&
|
||||||
last.reduce((sum, lang) => sum + lang.variants.length, 0) +
|
last.reduce((sum, lang) => sum + lang.variants.length, 0) +
|
||||||
language.variants.length <
|
language.variants.length <
|
||||||
5
|
9
|
||||||
) {
|
) {
|
||||||
last.push(language);
|
last.push(language);
|
||||||
} else {
|
} else {
|
||||||
|
|
|
@ -148,16 +148,24 @@ em {
|
||||||
vertical-align: sub;
|
vertical-align: sub;
|
||||||
}
|
}
|
||||||
|
|
||||||
.languagesSection h2 {
|
.languagesSection h2,
|
||||||
|
.languagesSection .accented,
|
||||||
|
.languagesSection .accented a {
|
||||||
color: #c596c7 !important;
|
color: #c596c7 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.languagesSection .accented {
|
.languagesSection .languageCategory ul {
|
||||||
color: #c596c7 !important;
|
margin: 0;
|
||||||
}
|
|
||||||
|
|
||||||
.languagesSection .languageCategory p {
|
|
||||||
padding: 0;
|
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 {
|
.editorSupportSection h2 {
|
||||||
|
|
Loading…
Reference in New Issue