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

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>
);
};