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

add about section on initial page, style sorting

Browse Source
This commit is contained in:
Stefan Fejes
2019-09-03 09:58:14 +02:00
parent f1182e23fe
commit 9263fd1a73
3 changed files with 56 additions and 213 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/docs/pages/about.js
View File

@ -34,7 +34,7 @@ const AboutPage = ({ isDarkMode }) => (
</SimpleCard>
<SimpleCard title='Our story'>
<p style={{ textAlign: 'justify' }}>
The <strong>30 seconds</strong> movement started back in December, 2017, with the release of <a href='https://github.com/30-seconds/30-seconds-of-code' target='_blank' rel='noopener noreferrer'>30 seconds of code</a> by <a href='https://github.com/Chalarangelo' target='_blank' rel='noopener noreferrer'>Angelos Chalaris</a>. Since then, hundreds of developers have contributed snippets to over 6 repositories, creating a thriving community of people willing to help each other write better code.
The <strong>30 seconds</strong> movement started back in December, 2017, with the release of <a href='https://github.com/30-seconds/30-seconds-of-code' target='_blank' rel='noopener noreferrer'>30 seconds of code</a> by <a href='https://github.com/Chalarangelo' target='_blank' rel='noopener noreferrer'>Angelos Chalaris</a>. Since then, hundreds of developers have contributed snippets to over 6 repositories, creating a thriving community of people willing to help each other write better code.
</p>
<p style={{ textAlign: 'justify' }}>
In late 2018, the <a href='https://github.com/30-seconds'>30 seconds organization</a> was formed on GitHub, in order to expand upon existing projects and ensure that they will remain high-quality resources in the future.

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

@ -1,14 +1,15 @@
import React from 'react';
import { graphql } from 'gatsby';
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 React from 'react';
import { getRawCodeBlocks as getCodeBlocks } from '../util';
import { pushNewPage, pushNewQuery } from '../state/app';
import SnippetCard from '../components/SnippetCard';
import SimpleCard from '../components/SimpleCard';
import Search from '../components/Search';
import Shell from '../components/Shell';
import Meta from '../components/Meta';
// ===================================================
// Home page (splash and search)
@ -78,21 +79,38 @@ const IndexPage = props => {
<strong>{searchQuery}</strong>.
</p>
) : (
<>
<p className='light-sub'>
Click on a snippet's name to view its code.
<>
<p className='light-sub'>
Click on a snippet's name to view its code.
</p>
<h2 className='page-sub-title'>Search results</h2>
{searchResults.map(snippet => (
<SnippetCard
short
key={`snippet_${snippet.id}`}
snippetData={snippet}
isDarkMode={props.isDarkMode}
/>
))}
</>
)}
<h2 className='page-sub-title'>Search results</h2>
{searchResults.map(snippet => (
<SnippetCard
short
key={`snippet_${snippet.id}`}
snippetData={snippet}
isDarkMode={props.isDarkMode}
/>
))}
</>
)}
<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 Code', url: 'https://30secondsofcode.org/' },
{ name: '30 seconds of CSS', url: 'https://css.30secondsofcode.org/' },
{ name: '30 seconds of Interviews', url: 'https://30secondsofinterviews.org/' },
{ name: '30 seconds of Knowledge', url: 'https://30secondsofknowledge.org/' },
{ name: '30 seconds of React', url: 'https://react.30secondsofcode.org/' },
{ name: '30 seconds of PHP', url: 'https://php.30secondsofcode.org/' },
].map(v => (<li><a href={v.url} key={`link_${v.name}`} target='_blank' rel='noopener noreferrer'>{v.name}</a></li>))
}
</ul>
</SimpleCard>
</Shell>
</>
);