Skip to content
This repository has been archived by the owner on Sep 22, 2023. It is now read-only.

Commit

Permalink
Add blog template for SnippetCard organism
Browse files Browse the repository at this point in the history
  • Loading branch information
Chalarangelo committed Jan 18, 2020
1 parent ecc5526 commit c7357ed
Show file tree
Hide file tree
Showing 5 changed files with 175 additions and 4 deletions.
3 changes: 2 additions & 1 deletion src/organisms/snippetCard/_index.scss
Original file line number Diff line number Diff line change
@@ -1,2 +1,3 @@
@import './standardSnippetCard';
@import './cssSnippetCard';
@import './cssSnippetCard';
@import './blogSnippetCard';
84 changes: 84 additions & 0 deletions src/organisms/snippetCard/blogSnippetCard/_index.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,84 @@
@import '../../../atoms/card/mixins';

// Colors
:root {
--blog-quote-border-color: #212631;
}

.snippet-card {

.card-meta-info {
font-size: 0.875rem;
margin-top: 0;
margin-bottom: 1.25rem;
color: var(--card-fore-color-light);
a {
&, &:link, &:visited {
color: var(--card-fore-color-light);
}
}
}

.card-cover-image {
--cover-aspect-ratio: 1.78;
@include card-full-width-section;
margin-top: 0.375rem;
min-width: calc(100% + 2rem);
object-fit: cover;
margin-bottom: 1rem;
min-height: calc(240px / var(--cover-aspect-ratio));
max-height: calc(640px / var(--cover-aspect-ratio));
}

ol {
list-style: none;
counter-reset: list-item-counter;

li {
counter-increment: list-item-counter;
position: relative;

&:before {
content: counter(list-item-counter) ". ";
position: absolute;
top: 0;
left: -1.5rem;
width: 1.5rem;
line-height: 1.5rem;
text-align: right;
}

p:not(:first-child) {
line-height: 2;
}
}

.blog-list-item {
margin-bottom: 1.5rem;

&:before {
font-weight: 600;
}

> p:first-child:not(:last-child) {
font-weight: 600;
}
}
}

pre.blog-code {
@include card-full-width-section;
border-radius: 0.5rem 0.5rem 0 0;
}

blockquote.blog-quote {
margin: 0.8125rem 0.5rem 1.5rem -1rem;
padding-left: 1.5rem;
box-shadow: inset 4px 0 0 0 var(--blog-quote-border-color);
font-style: italic;
line-height: 2;
font-size: 1.25rem;
font-weight: 300;
}

}
78 changes: 78 additions & 0 deletions src/organisms/snippetCard/blogSnippetCard/index.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,78 @@
import React from 'react';
import ReactDOM from 'react-dom';
import PropTypes from 'prop-types';
import Card from 'atoms/card';
import TagList from 'molecules/tagList';
import CodeBlock from 'atoms/codeBlock';
import { CopyButton, CodepenButton } from 'atoms/button';
import Toast from 'atoms/toast';
import { Snippet as SnippetPropType } from 'typedefs';
import { trimWhiteSpace } from 'functions/utils';
import { Anchor } from 'atoms/anchor';
import { JSX_SNIPPET_PRESETS } from 'shared';
import _ from 'lang';
const _l = _('en');

const SnippetCard = ({
snippet,
className,
toastContainer,
...rest
}) => (
<Card className={ trimWhiteSpace`snippet-card ${className}` } { ...rest } >
<h4 className='card-title'>{ snippet.title }</h4>
{ /* TODO: Handle this properly, with classes etc. - Also handle the authors field in the PropType */ }
<p className="card-meta-info">
{ snippet.authors.map((a, i, arr) => (
<>
<Anchor link={ {
internal: false,
url: a.profile,
rel: 'noopener noreferrer nofollow',
target: '_blank',
} }>
{ a.name }
</Anchor>
{ i !== arr.length - 1 ? ', ' : '' }
</>
)) }
{ ' · ' }
{
new Date(snippet.firstSeen).toLocaleDateString('en-US', {
day: 'numeric', month: 'short', year: 'numeric',
})
}
</p>
<TagList tags={ [ ...snippet.tags.all] } />
{ /* TODO: Extract an atom from this */ }
{ /* { snippet.coverSrc ?
<div
className='card-cover-image'
style={ { backgroundImage: `url("${encodeURI(snippet.coverSrc)}")` } }
/>
: null } */ }
{ snippet.cover && snippet.cover.src ?
<img
className='card-cover-image'
src={ snippet.cover.src }
/>
: null }
<div
className='card-description'
dangerouslySetInnerHTML={ { __html: `${snippet.html.fullDescription}` } }
/>
</Card>
);

SnippetCard.propTypes = {
/** Snippet data for the card */
snippet: SnippetPropType,
/** Additional classes for the card */
className: PropTypes.string,
/** The id of a DOM node used to render the toast when copying the snippet */
toastContainer: PropTypes.node,
/** Any other arguments to be passed to the card */
rest: PropTypes.any,
};

export default SnippetCard;
8 changes: 8 additions & 0 deletions src/organisms/snippetCard/index.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,17 +3,25 @@ import PropTypes from 'prop-types';

import StandardSnippetCard from './standardSnippetCard';
import CssSnippetCard from './cssSnippetCard';
import BlogSnippetCard from './blogSnippetCard';

export {
StandardSnippetCard,
CssSnippetCard,
BlogSnippetCard,
};

const SnippetCard = ({
cardTemplate,
...rest
}) => {
switch (cardTemplate) {
case 'blog':
return (
<BlogSnippetCard
{ ...rest }
/>
);
case 'css':
return (
<CssSnippetCard
Expand Down
6 changes: 3 additions & 3 deletions src/templates/snippetPage/index.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -16,8 +16,8 @@ const templateData = {
pageType: 'snippet',
};
// TODO: Handle blog post descriptions properly.
const determineDescription = snippet =>
(!snippet.language || !snippet.language.long) ? '' :
const determineDescription = (snippet, cardTemplate) =>
(cardTemplate === 'blog') ? snippet.description :
_l`site.pageDescription${{...templateData, snippetName: snippet.title, snippetLanguage: snippet.language.long }}`;

const SnippetPage = ({
Expand All @@ -36,7 +36,7 @@ const SnippetPage = ({
<>
<Meta
title={ snippet.title }
description={ determineDescription(snippet) }
description={ determineDescription(snippet, cardTemplate) }
logoSrc={ cardTemplate === 'blog' ? snippet.cover.src : splashLogoSrc }
structuredData={ {
title: snippet.title,
Expand Down

0 comments on commit c7357ed

Please sign in to comment.