add webber script

This commit is contained in:
Stefan Fejes
2019-08-20 16:59:57 +02:00
parent 986a8cbdc8
commit 7a4454c7b4
79 changed files with 7324 additions and 5 deletions

60
src/docs/pages/404.js Normal file
View File

@ -0,0 +1,60 @@
import React from 'react';
import { connect } from 'react-redux';
import AniLink from 'gatsby-plugin-transition-link/AniLink';
import Shell from '../components/Shell';
import Meta from '../components/Meta';
// ===================================================
// Not found page
// ===================================================
const NotFoundPage = ({ isDarkMode }) => (
<>
<Meta title='Page not found' />
<Shell withIcon={true}>
<h2 className='page-title'>404</h2>
<div className='page-graphic page-not-found'>
<p className='empty-page-text'>
<strong>Page not found</strong>
<br />
</p>
<p className='empty-page-subtext'>
Seems like you have reached a page that does not exist.
</p>
<AniLink
paintDrip
to='/'
hex={isDarkMode ? '#434E76' : '#FFFFFF'}
className='button button-a button-home'
>
<svg
xmlns='http://www.w3.org/2000/svg'
width='24'
height='24'
viewBox='0 0 24 24'
fill='none'
stroke='currentColor'
strokeWidth='2'
stroke-linecap='round'
strokeLinejoin='round'
className='feather feather-home'
>
<path d='M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'></path>
<polyline points='9 22 9 12 15 12 15 22'></polyline>
</svg>
&nbsp;&nbsp;Go home
</AniLink>
</div>
</Shell>
</>
);
export default connect(
state => ({
isDarkMode: state.app.isDarkMode,
lastPageTitle: state.app.lastPageTitle,
lastPageUrl: state.app.lastPageUrl,
searchQuery: state.app.searchQuery,
}),
null,
)(NotFoundPage);

99
src/docs/pages/about.js Normal file
View File

@ -0,0 +1,99 @@
import React from 'react';
import { connect } from 'react-redux';
import Shell from '../components/Shell';
import Meta from '../components/Meta';
import SimpleCard from '../components/SimpleCard';
// ===================================================
// About page
// ===================================================
const AboutPage = ({ isDarkMode }) => (
<>
<Meta title='About' />
<Shell withIcon={true}>
<h2 className='page-title'>About</h2>
<p className='light-sub'>
A few word about us, our goals and our projects.
</p>
<SimpleCard title='Our philosophy'>
<p style={{textAlign: 'justify'}}>
The core goal of <strong>30 seconds</strong> is to provide a quality resource for beginner and advanced developers alike. We want to help improve the software development ecosystem, by lowering the barrier of entry for newcomers and help seasoned veterans pick up new tricks and remember old ones.
</p>
<p style={{textAlign: 'justify'}}>
In order to achieve this, we have collected hundreds of snippets that can be of use in a wide range of situations. We welcome new contributors and we like fresh ideas, as long as the code is short and easy to grasp in about 30 seconds.
</p>
<p style={{textAlign: 'justify'}}>
The only catch, if you may, is that a few of our snippets are not perfectly optimized for large, enterprise applications and they might not be deemed production-ready.
</p>
</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.
</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.
</p>
</SimpleCard>
<SimpleCard title='Who we are'>
<p style={{ textAlign: 'justify' }}>
The <strong>30 seconds</strong> movement and, to some extent, the associated GitHub organization consists of all the people who have invested time and ideas to be part of this amazing community. Meanwhile, these fine folks are currently responsible for maintaining the codebases and dealing with organizational matters:
</p>
<div className='flex-row'>
<div class="flex-item">
<img className='media-section' src='https://github.com/Chalarangelo.png' alt='chalarangelo' />
<a href='https://github.com/Chalarangelo' className='button-section' target='_blank' rel='noopener noreferrer'>Angelos Chalaris</a>
</div>
<div class="flex-item">
<img className='media-section' src='https://github.com/fejes713.png' alt='fejes713' />
<a href='https://github.com/fejes713' className='button-section' target='_blank' rel='noopener noreferrer'>Stefan Fejes</a>
</div>
<div class="flex-item">
<img className='media-section' src='https://github.com/flxwu.png' alt='flxwu' />
<a href='https://github.com/flxwu' className='button-section' target='_blank' rel='noopener noreferrer'>Felix Wu</a>
</div>
<div class="flex-item">
<img className='media-section' src='https://github.com/atomiks.png' alt='atomiks' />
<a href='https://github.com/atomiks' className='button-section' target='_blank' rel='noopener noreferrer'>atomiks</a>
</div>
</div>
<div className='flex-row'>
<div class="flex-item">
<img className='media-section' src='https://github.com/skatcat31.png' alt='skatcat31' />
<a href='https://github.com/skatcat31' className='button-section' target='_blank' rel='noopener noreferrer'>Robert Mennell</a>
</div>
<div class="flex-item">
<img className='media-section' src='https://github.com/petrovicstefanrs.png' alt='petrovicstefanrs' />
<a href='https://github.com/petrovicstefanrs' className='button-section' target='_blank' rel='noopener noreferrer'>Stefan Petrovic</a>
</div>
<div class="flex-item">
<img className='media-section' src='https://github.com/kirjs.png' alt='kirjs' />
<a href='https://github.com/kirjs' className='button-section' target='_blank' rel='noopener noreferrer'>Kirill Cherkashin</a>
</div>
<div class="flex-item">
<img className='media-section' src='https://github.com/sohelamin.png' alt='sohelamin' />
<a href='https://github.com/sohelamin' className='button-section' target='_blank' rel='noopener noreferrer'>Sohel Amin</a>
</div>
</div>
</SimpleCard>
<SimpleCard title='License'>
<p style={{ textAlign: 'justify' }}>
In order for the code provided via the <strong>30 seconds</strong> projects to be as accessible and useful as possible, all of the snippets in these collections are licensed under the <a href='https://creativecommons.org/publicdomain/zero/1.0/' target='_blank' rel='noopener noreferrer'>CC0-1.0 License</a> meaning they are absolutely free to use in any project you like. If you like what we do, you can always credit us, but that is not mandatory.
</p>
<p style={{ textAlign: 'justify' }}>
Logos, names and trademarks are not to be used without the explicit consent of the maintainers or owners of the <strong>30 seconds</strong> GitHub organization. The only exception to this is the usage of the <strong>30-seconds-of-</strong> name in open source projects, licensed under the <a href='https://creativecommons.org/publicdomain/zero/1.0/' target='_blank' rel='noopener noreferrer'>CC0-1.0 License</a> and hosted on GitHub, if their README and website clearly states that they are unofficial projects and in no way affiliated with the organization.
</p>
</SimpleCard>
</Shell>
</>
);
export default connect(
state => ({
isDarkMode: state.app.isDarkMode,
lastPageTitle: state.app.lastPageTitle,
lastPageUrl: state.app.lastPageUrl,
searchQuery: state.app.searchQuery,
}),
null,
)(AboutPage);

157
src/docs/pages/index.js Normal file
View File

@ -0,0 +1,157 @@
import React from 'react';
import { graphql } 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 { getRawCodeBlocks as getCodeBlocks } from '../util';
// ===================================================
// Home page (splash and search)
// ===================================================
const IndexPage = props => {
const snippets = props.data.snippetDataJson.data.map(snippet => ({
title: snippet.title,
html: props.data.allMarkdownRemark.edges.find(
v => v.node.frontmatter.title === snippet.title,
).node.html,
tags: snippet.attributes.tags,
text: snippet.attributes.text,
id: snippet.id,
code: getCodeBlocks(
props.data.allMarkdownRemark.edges.find(
v => v.node.frontmatter.title === snippet.title,
).node.rawMarkdownBody,
).code,
}));
const [searchQuery, setSearchQuery] = React.useState(props.searchQuery);
const [searchResults, setSearchResults] = React.useState(snippets);
React.useEffect(() => {
props.dispatch(pushNewQuery(searchQuery));
let q = searchQuery.toLowerCase();
let results = snippets;
if (q.trim().length)
results = snippets.filter(
v =>
v.tags.filter(t => t.indexOf(q) !== -1).length ||
v.title.toLowerCase().indexOf(q) !== -1,
);
setSearchResults(results);
}, [searchQuery]);
React.useEffect(() => {
props.dispatch(pushNewPage('Search', '/search'));
}, []);
return (
<>
<Meta />
<Shell withIcon={false} withTitle={false}>
<img
src={props.data.file.childImageSharp.original.src}
alt='Logo'
className='index-logo'
/>
<h1 className='index-title'>{props.data.site.siteMetadata.title}</h1>
<p className='index-sub-title'>
{props.data.site.siteMetadata.description}
</p>
<Search
setSearchQuery={setSearchQuery}
defaultValue={props.searchQuery}
/>
{searchQuery.length === 0 ? (
<p className='light-sub'>
Start typing a keyword to see matching snippets.
</p>
) : searchResults.length === 0 ? (
<p className='light-sub'>
We couldn't find any results for the keyword{' '}
<strong>{searchQuery}</strong>.
</p>
) : (
<>
<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}
/>
))}
</>
)}
</Shell>
</>
);
};
export default connect(
state => ({
isDarkMode: state.app.isDarkMode,
lastPageTitle: state.app.lastPageTitle,
lastPageUrl: state.app.lastPageUrl,
searchQuery: state.app.searchQuery,
}),
null,
)(IndexPage);
export const indexPageQuery = graphql`
query snippetList {
site {
siteMetadata {
title
description
author
}
}
file(relativePath: { eq: "30s-icon.png" }) {
id
childImageSharp {
original {
src
}
}
}
snippetDataJson(meta: { type: { eq: "snippetListingArray" } }) {
data {
id
title
attributes {
tags
text
}
}
}
allMarkdownRemark(
limit: 1000
sort: { fields: [frontmatter___title], order: ASC }
) {
totalCount
edges {
node {
id
html
rawMarkdownBody
fields {
slug
}
frontmatter {
title
tags
}
}
}
}
}
`;

148
src/docs/pages/list.js Normal file
View File

@ -0,0 +1,148 @@
import React from 'react';
import { graphql } from 'gatsby';
import { connect } from 'react-redux';
import { pushNewPage } from '../state/app';
import { capitalize } from '../util';
import Shell from '../components/Shell';
import Meta from '../components/Meta';
import AniLink from 'gatsby-plugin-transition-link/AniLink';
import SnippetCard from '../components/SnippetCard';
import { getRawCodeBlocks as getCodeBlocks } from '../util';
import SimpleCard from '../components/SimpleCard';
// ===================================================
// Snippet list page
// ===================================================
const ListPage = props => {
const snippets = props.data.snippetDataJson.data.map(snippet => ({
title: snippet.title,
html: props.data.allMarkdownRemark.edges.find(
v => v.node.frontmatter.title === snippet.title,
).node.html,
tags: snippet.attributes.tags,
text: snippet.attributes.text,
id: snippet.id,
code: getCodeBlocks(
props.data.allMarkdownRemark.edges.find(
v => v.node.frontmatter.title === snippet.title,
).node.rawMarkdownBody,
).code,
}));
const tags = snippets.reduce((acc, snippet) => {
if (!snippet.tags) return acc;
const primaryTag = snippet.tags[0];
if (!acc.includes(primaryTag)) acc.push(primaryTag);
return acc;
}, []);
const staticPages = [
{
url: 'about',
title: 'About',
description: 'A few word about us, our goals and our projects.'
}
];
React.useEffect(() => {
props.dispatch(pushNewPage('Snippet List', '/list'));
}, []);
return (
<>
<Meta title='Snippet List' />
<Shell withIcon={false} isList>
<h2 className='page-title'>Snippet List</h2>
<p className='light-sub'>
Click on a snippets name to view its code or a tag name to view all
snippets in that category.
</p>
{tags.map(tag => (
<>
<h3 className='tag-title' key={`tag_title_${tag}`}>
<AniLink
key={`tag_link_${tag}`}
paintDrip
to={`/tag/${tag}`}
hex={props.isDarkMode ? '#434E76' : '#FFFFFF'}
>
{capitalize(tag)}
</AniLink>
</h3>
{snippets
.filter(snippet => snippet.tags[0] === tag)
.map(snippet => (
<SnippetCard
key={`snippet_${snippet.id}`}
short
snippetData={snippet}
isDarkMode={props.isDarkMode}
/>
))}
</>
))}
<br/>
{staticPages.map(page => (
<SimpleCard
title={(
<AniLink
paintDrip
to={`/${page.url}`}
hex={props.isDarkMode ? '#434E76' : '#FFFFFF'}
>
{page.title}
</AniLink>
)}
>
<p>{page.description}</p>
</SimpleCard>
))}
</Shell>
</>
);
};
export default connect(
state => ({
isDarkMode: state.app.isDarkMode,
lastPageTitle: state.app.lastPageTitle,
lastPageUrl: state.app.lastPageUrl,
searchQuery: state.app.searchQuery,
}),
null,
)(ListPage);
export const listPageQuery = graphql`
query snippetListing {
snippetDataJson(meta: { type: { eq: "snippetListingArray" } }) {
data {
id
title
attributes {
tags
text
}
}
}
allMarkdownRemark(
limit: 1000
sort: { fields: [frontmatter___title], order: ASC }
) {
totalCount
edges {
node {
id
html
rawMarkdownBody
fields {
slug
}
frontmatter {
title
tags
}
}
}
}
}
`;

144
src/docs/pages/search.js Normal file
View File

@ -0,0 +1,144 @@
import React from 'react';
import { graphql } 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 { getRawCodeBlocks as getCodeBlocks } from '../util';
// ===================================================
// Search page
// ===================================================
const SearchPage = props => {
const snippets = props.data.snippetDataJson.data.map(snippet => ({
title: snippet.title,
html: props.data.allMarkdownRemark.edges.find(
v => v.node.frontmatter.title === snippet.title,
).node.html,
tags: snippet.attributes.tags,
text: snippet.attributes.text,
id: snippet.id,
code: getCodeBlocks(
props.data.allMarkdownRemark.edges.find(
v => v.node.frontmatter.title === snippet.title,
).node.rawMarkdownBody,
).code,
}));
const [searchQuery, setSearchQuery] = React.useState(props.searchQuery);
const [searchResults, setSearchResults] = React.useState(snippets);
React.useEffect(() => {
props.dispatch(pushNewQuery(searchQuery));
let q = searchQuery.toLowerCase();
let results = snippets;
if (q.trim().length)
results = snippets.filter(
v =>
v.tags.filter(t => t.indexOf(q) !== -1).length ||
v.title.toLowerCase().indexOf(q) !== -1,
);
setSearchResults(results);
}, [searchQuery]);
React.useEffect(() => {
props.dispatch(pushNewPage('Search', '/search'));
}, []);
return (
<>
<Meta title='Search' />
<Shell withIcon={false} isSearch>
<Search
setSearchQuery={setSearchQuery}
defaultValue={props.searchQuery}
/>
<p className='light-sub'>Click on a snippet's name to view its code.</p>
{/* Display page background or results depending on state */}
{searchQuery.length === 0 ? (
<>
<div className='page-graphic search-empty'>
<p className='empty-page-text search-page-text'>
Start typing a keyword to see matching snippets.
</p>
</div>
</>
) : searchResults.length === 0 ? (
<>
<div className='page-graphic search-no-results'>
<p className='empty-page-text'>
<strong>No results found</strong>
<br />
</p>
<p className='empty-page-subtext'>
We couldn't find any results for the keyword{' '}
<strong>{searchQuery}</strong>.
</p>
</div>
</>
) : (
<>
<h2 className='page-sub-title'>Search results</h2>
{searchResults.map(snippet => (
<SnippetCard
key={`snippet_${snippet.id}`}
short
snippetData={snippet}
isDarkMode={props.isDarkMode}
/>
))}
</>
)}
</Shell>
</>
);
};
export default connect(
state => ({
isDarkMode: state.app.isDarkMode,
lastPageTitle: state.app.lastPageTitle,
lastPageUrl: state.app.lastPageUrl,
searchQuery: state.app.searchQuery,
}),
null,
)(SearchPage);
export const searchPageQuery = graphql`
query searchSnippetList {
snippetDataJson(meta: { type: { eq: "snippetListingArray" } }) {
data {
id
title
attributes {
tags
text
}
}
}
allMarkdownRemark(
limit: 1000
sort: { fields: [frontmatter___title], order: ASC }
) {
totalCount
edges {
node {
id
html
rawMarkdownBody
fields {
slug
}
frontmatter {
title
tags
}
}
}
}
}
`;