diff --git a/src/docs/pages/index.js b/src/docs/pages/index.js index a13bd4aae..086485000 100644 --- a/src/docs/pages/index.js +++ b/src/docs/pages/index.js @@ -1,13 +1,13 @@ -import React from 'react'; -import { graphql, Link } from 'gatsby'; -import { connect } from 'react-redux'; -import { pushNewPage, pushNewQuery } from '../state/app'; +import React from "react"; +import { graphql, Link } from "gatsby"; +import { connect } from "react-redux"; +import { pushNewPage, pushNewQuery } from "../state/app"; -import Shell from '../components/Shell'; -import Meta from '../components/Meta'; -import Search from '../components/Search'; -import SnippetCard from '../components/SnippetCard'; -import SimpleCard from '../components/SimpleCard'; +import Shell from "../components/Shell"; +import Meta from "../components/Meta"; +import Search from "../components/Search"; +import SnippetCard from "../components/SnippetCard"; +import SimpleCard from "../components/SimpleCard"; // =================================================== // Home page (splash and search) @@ -24,28 +24,35 @@ const IndexPage = props => { let results = snippets; if (q.trim().length) results = snippets.filter( - ({node}) => + ({ node }) => node.tags.all.filter(t => t.indexOf(q) !== -1).length || - node.title.toLowerCase().indexOf(q) !== -1, + node.title.toLowerCase().indexOf(q) !== -1 ); setSearchResults(results); }, [searchQuery]); React.useEffect(() => { - props.dispatch(pushNewPage('Search', '/search')); + props.dispatch(pushNewPage("Search", "/search")); }, []); return ( <> - + Logo -

{props.data.site.siteMetadata.title}

-

+

{props.data.site.siteMetadata.title}

+

{props.data.site.siteMetadata.description}

{ /> {searchQuery.length === 0 ? ( <> -

- Start typing a keyword to see matching snippets or click to view the whole list. +

+ Start typing a keyword to see matching snippets or{" "} + click to view the whole list.

-
+
) : searchResults.length === 0 ? ( <> -

- We couldn't find any results for the keyword{' '} +

+ We couldn't find any results for the keyword{" "} {searchQuery}.

-
+
) : ( <> -

+

Click on a snippet card to view the snippet.

-

Search results

- {searchResults.map(({node}) => ( +

Search results

+ {searchResults.map(({ node }) => ( { ))} )} - -

30 seconds provides high-quality learning resources for developers of all skill levels in the form of snippet collections in various programming languages since its inception in 2017. Today, 30 seconds consists of a community of over 250 contributors and more than 10 maintainers, dedicated to creating the best short-form learning resources for software developers. Our goal is to make software development more accessible and help the open-source community grow by helping people learn to code for free.

Read more...

+ +

+ 30 seconds provides high-quality learning resources + for developers of all skill levels in the form of snippet + collections in various programming languages since its inception in + 2017. Today, 30 seconds consists of a community of + over 250 contributors and more than 10 maintainers, dedicated to + creating the best short-form learning resources for software + developers. Our goal is to make software development more accessible + and help the open-source community grow by helping people learn to + code for free. +
+
+ Read more... +

- +
    - { - [ - { name: '30 seconds of CSS', url: 'https://css.30secondsofcode.org/' }, - { name: '30 seconds of Python', url: 'https://python.30secondsofcode.org/' }, - { name: '30 seconds of React', url: 'https://react.30secondsofcode.org/' }, - { name: '30 seconds of PHP', url: 'https://php.30secondsofcode.org/' }, - { name: '30 seconds of Interviews', url: 'https://30secondsofinterviews.org/' }, - { name: '30 seconds of Knowledge', url: 'https://30secondsofknowledge.org/' }, - ].map(v => (
  • {v.name}
  • )) - } + {[ + { + name: "30 seconds of CSS", + url: "https://css.30secondsofcode.org/" + }, + { + name: "30 seconds of Python", + url: "https://python.30secondsofcode.org/" + }, + { + name: "30 seconds of React", + url: "https://react.30secondsofcode.org/" + }, + { + name: "30 seconds of PHP", + url: "https://php.30secondsofcode.org/" + }, + { + name: "30 seconds of Interviews", + url: "https://30secondsofinterviews.org/" + }, + { + name: "30 seconds of Knowledge", + url: + "https://chrome.google.com/webstore/detail/30-seconds-of-knowledge/mmgplondnjekobonklacmemikcnhklla" + } + ].map(v => ( +
  • + + {v.name} + +
  • + ))}
@@ -115,9 +164,9 @@ export default connect( isDarkMode: state.app.isDarkMode, lastPageTitle: state.app.lastPageTitle, lastPageUrl: state.app.lastPageUrl, - searchQuery: state.app.searchQuery, + searchQuery: state.app.searchQuery }), - null, + null )(IndexPage); export const indexPageQuery = graphql`