andre/30-seconds-of-code
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #1013 from 30-seconds/homepage

Browse Source 
Update homepage to act as a hub for projects
This commit is contained in:
Stefan Feješ
2019-08-29 13:43:40 +02:00
committed by GitHub
parent 4ea4a2a169 59b7702e2a
commit 5a8271f47e
2 changed files with 47 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
src/docs/pages/index.js
View File

@ -1,5 +1,5 @@
import React from 'react';
import { graphql } from 'gatsby';
import { graphql, Link } from 'gatsby';
import { connect } from 'react-redux';
import { pushNewPage, pushNewQuery } from '../state/app';
@ -7,6 +7,7 @@ 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)
@ -59,14 +60,20 @@ const IndexPage = props => {
defaultValue={props.searchQuery}
/>
{searchQuery.length === 0 ? (
<p className='light-sub'>
Start typing a keyword to see matching snippets.
</p>
<>
<p className='index-light-sub'>
Start typing a keyword to see matching snippets or <Link to='/list'>click to view the whole list</Link>.
</p>
<div className='index-spacer' />
</>
) : searchResults.length === 0 ? (
<p className='light-sub'>
We couldn't find any results for the keyword{' '}
<strong>{searchQuery}</strong>.
</p>
<>
<p className='index-light-sub'>
We couldn't find any results for the keyword{' '}
<strong>{searchQuery}</strong>.
</p>
<div className='index-spacer' />
</>
) : (
<>
<p className='light-sub'>
@ -83,6 +90,23 @@ const IndexPage = props => {
))}
</>
)}
<SimpleCard title='About us'>
<p style={{ textAlign: 'justify' }}><strong>30 seconds</strong> 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, <strong>30 seconds</strong> 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.<br/><br/><Link to='/about'>Read more...</Link></p>
</SimpleCard>
<SimpleCard title='Our other projects'>
<ul>
{
[
{ 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 => (<li><a href={v.url} key={`link_${v.name}`} target='_blank' rel='noopener noreferrer'>{v.name}</a></li>))
}
</ul>
</SimpleCard>
</Shell>
</>
);

15
src/docs/styles/_layout.scss
View File

@ -112,6 +112,21 @@ img.website-logo {
font-size: 1rem;
}
}
.index-spacer {
height: 2.5vh;
}
.index-light-sub {
color: var(--fore-color-darker);
font-size: 1rem;
text-align: center;
transition: 0.3s ease all;
line-height: 2;
margin: 0.125rem 1.25rem 0px;
a, a:link, a:visited {
color: inherit;
font-weight: 600;
}
}
// Page title
.page-title {