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

Template update

Browse Source
This commit is contained in:
Angelos Chalaris
2019-08-27 22:53:46 +03:00
parent 0abf186361
commit 69ab237441
30 changed files with 74 additions and 132 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
assets/NotoSans-Bold.ttf
View File

Binary file not shown.

BIN
assets/NotoSans-Bold.woff2 Normal file
View File

Binary file not shown.

BIN
assets/NotoSans-Italic.ttf
View File

Binary file not shown.

BIN
assets/NotoSans-Italic.woff2 Normal file
View File

Binary file not shown.

BIN
assets/NotoSans-Light.ttf
View File

Binary file not shown.

BIN
assets/NotoSans-Light.woff2 Normal file
View File

Binary file not shown.

BIN
assets/NotoSans-LightItalic.ttf
View File

Binary file not shown.

BIN
assets/NotoSans-LightItalic.woff2 Normal file
View File

Binary file not shown.

BIN
assets/NotoSans-Medium.ttf
View File

Binary file not shown.

BIN
assets/NotoSans-Medium.woff2 Normal file
View File

Binary file not shown.

BIN
assets/NotoSans-MediumItalic.ttf
View File

Binary file not shown.

BIN
assets/NotoSans-MediumItalic.woff2 Normal file
View File

Binary file not shown.

BIN
assets/NotoSans-Regular.ttf
View File

Binary file not shown.

BIN
assets/NotoSans-Regular.woff2 Normal file
View File

Binary file not shown.

BIN
assets/NotoSans-SemiBold.ttf
View File

Binary file not shown.

BIN
assets/NotoSans-SemiBold.woff2 Normal file
View File

Binary file not shown.

BIN
assets/NotoSans-SemiBoldItalic.ttf
View File

Binary file not shown.

BIN
assets/NotoSans-SemiBoldItalic.woff2 Normal file
View File

Binary file not shown.

1
gatsby-config.js
View File

@ -9,7 +9,6 @@ module.exports = {
},
plugins: [
`gatsby-plugin-sitemap`,
`gatsby-plugin-transition-link`,
{
resolve: `gatsby-source-filesystem`,
options: {

3
package.json
View File

@ -38,7 +38,6 @@
"gatsby-plugin-sass": "^2.1.3",
"gatsby-plugin-sharp": "^2.2.7",
"gatsby-plugin-sitemap": "^2.2.8",
"gatsby-plugin-transition-link": "^1.12.4",
"gatsby-remark-copy-linked-files": "^2.1.3",
"gatsby-remark-images": "^3.1.6",
"gatsby-remark-prismjs": "^3.3.3",
@ -46,7 +45,6 @@
"gatsby-transformer-json": "^2.2.2",
"gatsby-transformer-remark": "^2.6.6",
"gatsby-transformer-sharp": "^2.2.3",
"gsap": "^2.1.3",
"kleur": "^3.0.3",
"markdown-builder": "^0.9.0",
"node-sass": "^4.12.0",
@ -55,7 +53,6 @@
"prop-types": "^15.7.2",
"react": "^16.8.6",
"react-copy-to-clipboard": "^5.0.1",
"react-css-transition-replace": "^3.0.3",
"react-dom": "^16.8.6",
"react-helmet": "^5.2.1",
"react-redux": "^7.1.0",

36
src/docs/components/Shell.js
View File

@ -1,8 +1,6 @@
import React from 'react';
import { graphql, useStaticQuery } from 'gatsby';
import { graphql, useStaticQuery, Link } from 'gatsby';
import { connect } from 'react-redux';
import AniLink from 'gatsby-plugin-transition-link/AniLink';
import ReactCSSTransitionReplace from 'react-css-transition-replace';
import config from '../../../config';
import { toggleDarkMode } from '../state/app';
@ -58,48 +56,36 @@ const Shell = ({
<div className={isDarkMode ? 'page-container dark' : 'page-container'}>
{/* Menu */}
<header className='menu'>
<AniLink
cover
direction={viewportWidth < 600 ? 'up' : 'right'}
bg={isDarkMode ? '#434E76' : '#FFFFFF'}
<Link
to='/search'
aria-label='Search'
title='Search'
className={isSearch ? 'menu-button active' : 'menu-button'}
>
<SearchIcon />
</AniLink>
<AniLink
cover
direction={viewportWidth < 600 ? 'up' : 'right'}
bg={isDarkMode ? '#434E76' : '#FFFFFF'}
</Link>
<Link
to='/'
aria-label='Snippet list'
title='Snippet list'
className={isList ? 'menu-button active' : 'menu-button'}
>
<ListIcon />
</AniLink>
</Link>
{/* eslint-disable-next-line */}
<a target='_blank'
rel='noopener'
href={config.repositoryUrl}
aria-label='View on GitHub'
title='View on GitHub'
className='menu-button'
>
<GithubIcon />
</a>
{/*
The use of React.Fragment here will cause a lot of errors to show up in webber:dev.
Truth is, this is the only decent way I found to deal with this module's odd behavior.
Keep as is, unless you can provide a better solution, in which case please send a PR.
*/}
<ReactCSSTransitionReplace
transitionName='cross-fade'
transitionEnterTimeout={300}
transitionLeaveTimeout={300}
component='button'
<button
aria-label={isDarkMode ? 'Switch to light mode' : 'Switch to dark mode'}
title={isDarkMode ? 'Switch to light mode' : 'Switch to dark mode'}
className='menu-button'
childComponent={React.Fragment}
>
{isDarkMode ? (
<LightModeIcon
@ -112,7 +98,7 @@ const Shell = ({
onClick={() => dispatch(toggleDarkMode(!isDarkMode))}
/>
)}
</ReactCSSTransitionReplace>
</button>
</header>
{/* Content */}
<div className='content'>

58
src/docs/components/SnippetCard.js
View File

@ -1,13 +1,11 @@
import React from 'react';
import { CopyToClipboard } from 'react-copy-to-clipboard';
import { Link } from 'gatsby';
import config from '../../../config';
import { getTextualContent, getCodeBlocks, optimizeAllNodes, getExplanation, getBrowserSupport } from '../util';
// import ShareIcon from './SVGs/ShareIcon';
import AniLink from 'gatsby-plugin-transition-link/AniLink';
import CollapseOpenIcon from './SVGs/CollapseOpenIcon';
import CollapseClosedIcon from './SVGs/CollapseClosedIcon';
import ReactCSSTransitionReplace from 'react-css-transition-replace';
// ===================================================
// Snippet Card HOC - check components below for more
@ -131,38 +129,34 @@ const ShortCard = ({
isDarkMode
}) => {
return (
<div className='card short'>
<h4 className='card-title'>
<AniLink
paintDrip
to={`/snippet/${snippetData.id}`}
hex={isDarkMode ? '#434E76' : '#FFFFFF'}
>
<Link to={`/snippet/${snippetData.id}`} className='clickable-card-wrapper' rel='canonical'>
<div className='card short'>
<h4 className='card-title'>
{snippetData.title}
</AniLink>
</h4>
<div
className='card-description'
dangerouslySetInnerHTML={{
__html: `${getTextualContent(snippetData.html)}`,
}}
/>
<div className='card-bottom'>
<h5 className='card-section-demo-title'>Demo</h5>
<div className='card-snippet-demo' data-scope={snippetData.id.replace(/\//g,'')}>
<style>
{snippetData.code.scopedCss}
</style>
<div dangerouslySetInnerHTML={{ __html: snippetData.code.html }} />
{
snippetData.code.js &&
<script>
{`function()(${snippetData.code.js})();`}
</script>
}
</h4>
<div
className='card-description'
dangerouslySetInnerHTML={{
__html: `${getTextualContent(snippetData.html)}`,
}}
/>
<div className='card-bottom'>
<h5 className='card-section-demo-title'>Demo</h5>
<div className='card-snippet-demo' data-scope={snippetData.id.replace(/\//g,'')}>
<style>
{snippetData.code.scopedCss}
</style>
<div dangerouslySetInnerHTML={{ __html: snippetData.code.html }} />
{
snippetData.code.js &&
<script>
{`function()(${snippetData.code.js})();`}
</script>
}
</div>
</div>
</div>
</div>
</Link>
);
};

8
src/docs/pages/404.js
View File

@ -1,6 +1,6 @@
import React from 'react';
import { Link } from 'gatsby';
import { connect } from 'react-redux';
import AniLink from 'gatsby-plugin-transition-link/AniLink';
import Shell from '../components/Shell';
import Meta from '../components/Meta';
@ -21,10 +21,8 @@ const NotFoundPage = ({ isDarkMode }) => (
<p className='empty-page-subtext'>
Seems like you have reached a page that does not exist.
</p>
<AniLink
paintDrip
<Link
to='/'
hex={isDarkMode ? '#434E76' : '#FFFFFF'}
className='button button-a button-home'
>
<svg
@ -43,7 +41,7 @@ const NotFoundPage = ({ isDarkMode }) => (
<polyline points='9 22 9 12 15 12 15 22'></polyline>
</svg>
&nbsp;&nbsp;Go home
</AniLink>
</Link>
</div>
</Shell>
</>

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

@ -1,15 +1,12 @@
import React from 'react';
import { graphql } from 'gatsby';
import { graphql, Link } 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';
// ===================================================
@ -80,14 +77,12 @@ const ListPage = props => {
{tags.sort((a,b) => a.localeCompare(b)).map(tag => (
<>
<h3 className='tag-title' key={`tag_title_${tag}`}>
<AniLink
<Link
key={`tag_link_${tag}`}
paintDrip
to={`/tag/${tag}`}
hex={props.isDarkMode ? '#434E76' : '#FFFFFF'}
>
{capitalize(tag)}
</AniLink>
</Link>
</h3>
{snippets
.filter(snippet => snippet.tags[0] === tag)
@ -105,13 +100,11 @@ const ListPage = props => {
{staticPages.map(page => (
<SimpleCard
title={(
<AniLink
paintDrip
<Link
to={`/${page.url}`}
hex={props.isDarkMode ? '#434E76' : '#FFFFFF'}
>
{page.title}
</AniLink>
</Link>
)}
>
<p>{page.description}</p>

1
src/docs/styles/_button.scss
View File

@ -52,6 +52,7 @@
background-position: center;
width: 44px;
height: 44px;
z-index: 10;
}
.button.button-social-sh {
position: absolute;

17
src/docs/styles/_card.scss
View File

@ -2,6 +2,8 @@
// Cards
// ===================================================
.card {
backface-visibility: hidden;
will-change: transform;
position: relative;
transition: all 0.3s ease;
margin: 1rem 1.25rem;
@ -203,8 +205,13 @@
}
}
// Animation for card example
.roll-up-height {
transition: height 0.3s ease-in-out;
}
.clickable-card-wrapper {
&:link, &:visited {
&:hover, &:focus {
text-decoration: none;
.card {
transform: scale(1.025);
}
}
}
}

18
src/docs/styles/_fonts.scss
View File

@ -28,7 +28,7 @@
font-style: normal;
font-weight: 300;
font-display: swap;
src: local('Noto Sans Light'), local('NotoSans-Light'), url(../../../assets/NotoSans-Light.ttf) format('truetype');
src: local('Noto Sans Light'), local('NotoSans-Light'), url(../../../assets/NotoSans-Light.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
@ -36,7 +36,7 @@
font-style: italic;
font-weight: 300;
font-display: swap;
src: local('Noto Sans LightItalic'), local('NotoSans-LightItalic'), url(../../../assets/NotoSans-LightItalic.ttf) format('truetype');
src: local('Noto Sans LightItalic'), local('NotoSans-LightItalic'), url(../../../assets/NotoSans-LightItalic.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
@ -44,7 +44,7 @@
font-style: normal;
font-weight: 400;
font-display: swap;
src: local('Noto Sans'), local('NotoSans-Regular'), url(../../../assets/NotoSans-Regular.ttf) format('truetype');
src: local('Noto Sans'), local('NotoSans-Regular'), url(../../../assets/NotoSans-Regular.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
@ -52,7 +52,7 @@
font-style: italic;
font-weight: 400;
font-display: swap;
src: local('Noto Sans Italic'), local('NotoSans-Italic'), url(../../../assets/NotoSans-Italic.ttf) format('truetype');
src: local('Noto Sans Italic'), local('NotoSans-Italic'), url(../../../assets/NotoSans-Italic.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
@ -60,7 +60,7 @@
font-style: normal;
font-weight: 500;
font-display: swap;
src: local('Noto Sans Medium'), local('NotoSans-Medium'), url(../../../assets/NotoSans-Medium.ttf) format('truetype');
src: local('Noto Sans Medium'), local('NotoSans-Medium'), url(../../../assets/NotoSans-Medium.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
@ -68,7 +68,7 @@
font-style: italic;
font-weight: 500;
font-display: swap;
src: local('Noto Sans Medium Italic'), local('NotoSans-MediumItalic'), url(../../../assets/NotoSans-MediumItalic.ttf) format('truetype');
src: local('Noto Sans Medium Italic'), local('NotoSans-MediumItalic'), url(../../../assets/NotoSans-MediumItalic.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
@ -76,7 +76,7 @@
font-style: normal;
font-weight: 600;
font-display: swap;
src: local('Noto Sans SemiBold'), local('NotoSans-SemiBold'), url(../../../assets/NotoSans-SemiBold.ttf) format('truetype');
src: local('Noto Sans SemiBold'), local('NotoSans-SemiBold'), url(../../../assets/NotoSans-SemiBold.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
@ -84,7 +84,7 @@
font-style: italic;
font-weight: 600;
font-display: swap;
src: local('Noto Sans SemiBold Italic'), local('NotoSans-SemiBoldItalic'), url(../../../assets/NotoSans-SemiBoldItalic.ttf) format('truetype');
src: local('Noto Sans SemiBold Italic'), local('NotoSans-SemiBoldItalic'), url(../../../assets/NotoSans-SemiBoldItalic.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
@ -92,6 +92,6 @@
font-style: normal;
font-weight: 700;
font-display: swap;
src: local('Noto Sans Bold'), local('NotoSans-Bold'), url(../../../assets/NotoSans-Bold.ttf) format('truetype');
src: local('Noto Sans Bold'), local('NotoSans-Bold'), url(../../../assets/NotoSans-Bold.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

20
src/docs/styles/_menu.scss
View File

@ -63,23 +63,3 @@
}
}
}
// Animate transition between light and dark mode
.cross-fade-leave {
transform: scale(1);
}
.cross-fade-leave.cross-fade-leave-active {
transition: all 0.3s cubic-bezier(0.47, 0, 0.745, 0.715);
transform: scale(0.1);
}
.cross-fade-enter {
transform: scale(0.1);
}
.cross-fade-enter.cross-fade-enter-active {
transition: all 0.3s cubic-bezier(0.215, 0.610, 0.355, 1);
transform: scale(0.95)
}
.cross-fade-height {
height: 61px;
transition: height 0.15s ease-in-out 0.15s;
}

10
src/docs/templates/SnippetPage.js vendored
View File

@ -1,12 +1,11 @@
import React from 'react';
import { graphql } from 'gatsby';
import { graphql, Link } from 'gatsby';
import { connect } from 'react-redux';
import Meta from '../components/Meta';
import Shell from '../components/Shell';
import SnippetCard from '../components/SnippetCard';
import BackArrowIcon from '../components/SVGs/BackArrowIcon';
import AniLink from 'gatsby-plugin-transition-link/AniLink';
// ===================================================
// Individual snippet page template
@ -21,16 +20,13 @@ const SnippetPage = props => {
<>
<Meta title={post.frontmatter.title} description={post.excerpt} />
<Shell>
<AniLink
<Link
className='link-back'
to={`${props.lastPageUrl}`}
cover
direction='right'
bg={props.isDarkMode ? '#434E76' : '#FFFFFF'}
>
<BackArrowIcon />
&nbsp;&nbsp;Back to {props.lastPageTitle}
</AniLink>
</Link>
<SnippetCard
snippetData={{
id: postData.id,

17
src/docs/util/index.js
View File

@ -7,19 +7,10 @@ const capitalize = (str, lowerRest = false) =>
// Get the textual content in a gatsby page
const getTextualContent = (str, noExplain = false) => {
const regex = /([\s\S]*?)<div class="gatsby-highlight"/g;
const results = [];
let m = null;
while ((m = regex.exec(str)) !== null) {
if (m.index === regex.lastIndex) regex.lastIndex += 1;
m.forEach((match, groupIndex) => {
results.push(match);
});
}
if(noExplain)
return results[1].slice(0, results[1].lastIndexOf('<p>'));
return results[1];
const result = str.slice(0, str.indexOf('<div class="gatsby-highlight"'));
if (noExplain)
return result.slice(0, result.lastIndexOf('<p>'));
return result;
};
// Gets the explanation for a snippet file.