Skip to content

Commit

Permalink
style: blog post share buttons
Browse files Browse the repository at this point in the history 
Close #224.
  • Loading branch information
@yld-weng
yld-weng committed Apr 13, 2022
1 parent d58d984 commit 158a4e7
Show file tree
Hide file tree
Showing 4 changed files with 133 additions and 108 deletions.
167 changes: 104 additions & 63 deletions src/components/blog/blogPostGrid.jsx
View file
@@ -1,72 +1,113 @@
import React from 'react'
import PropTypes from "prop-types"
import { Link } from "gatsby"
import kebabCase from "lodash.kebabcase"
import { FaStar } from "react-icons/fa"
import Slide from 'react-reveal/Slide'
import { ArrowBox, IMG, IMG_DIV, } from "../style/styleComponent"
import { getImageSource, shortenText } from "../../utils/shared"
import React from "react";
import PropTypes from "prop-types";
import { Link } from "gatsby";
import kebabCase from "lodash.kebabcase";
import { FaStar } from "react-icons/fa";
import Slide from "react-reveal/Slide";
import { ArrowBox, IMG, IMG_DIV } from "../style/styleComponent";
import { getImageSource, shortenText } from "../../utils/shared";

const blogPostGrid = ({allMdx}) => {

return(
const blogPostGrid = ({ allMdx }) => {
return (
<div id="read" className="flex flex-wrap w-full">
{allMdx.edges.map(({ node }) => {
let imagesrc = getImageSource(node);
let description = shortenText(node.frontmatter.description, 30);
let title = node.frontmatter.title;
let tag = node.frontmatter.tag;
{allMdx.edges.map(({ node }) => {
let imagesrc = getImageSource(node);
let description = shortenText(node.frontmatter.description, 30);
let title = node.frontmatter.title;
let tag = node.frontmatter.tag;

return (
<Slide bottom key={node.id} duration={400} fraction={0.3}>
<div key={node.id} className="w-full md:w-1/3 xl:w-1/4 min-h-90 xl:min-h-110 2xl:max-h-90 overflow-hidden bg-white relative pb-10 2xl:pb-0" alt={title}>
<Link className="group" to={node.fields.slug}>
{ node.frontmatter.featured === true &&
<div className="flex top-0 left-0 absolute m-3 lg:m-5 text-white bg-black lg:bg-transparent lg:text-gray-300 group-hover:bg-black items-center rounded-lg p-1" style={{zIndex: "3"}}>
<FaStar className="text-yellow-300 text-2xl" />
<p className="inline-block lg:opacity-0 group-hover:opacity-100 text-base font-semibold px-2" style={{fontFamily: "TUoS Blake"}}>Featured</p>
</div>
}
<IMG_DIV className="lg:greyScale-100 group-hover:greyScale-0"><IMG image={imagesrc} alt={"Image for " + title} /></IMG_DIV>
<ArrowBox className="px-6 pt-6 2xl:px-8 2xl:pt-8 leading-none">
<div className='overflow-hidden fade-box'>
<h1 className="font-extrabold xl:text-2xl 2xl:text-3xl leading-tight text-black group-hover:text-brand-blue overflow-y-hidden font-sans">{title}</h1>
<p className="my-3 text-base leading-tight group-hover:text-brand-blue text-gray-800" >{description}</p>
</div>
<div className="relative z-10 text-xs" style={{color: '#595959', fontWeight: '400'}}>
<p className="mt-4 mb-1">{node.frontmatter.date} · {node.fields.readingTime.text}</p>
</div>
</ArrowBox>
</Link>
<div className="px-6 2xl:px-8 text-xs" style={{color: '#595959', fontWeight: '400'}}>
{node.frontmatter.category.map((cat) => (
<>
<Link key={cat} className="font-semibold hover:underline" to={`/blog/category/${kebabCase(cat)}`}>{cat}</Link>
<> · </>
</>
))}
{tag.map((tagItem, i) => {
return (
i < 3 &&
return (
<Slide bottom key={node.id} duration={400} fraction={0.3}>
<div
key={node.id}
className="w-full md:w-1/3 xl:w-1/4 min-h-90 xl:min-h-110 2xl:max-h-90 overflow-hidden bg-white relative pb-10 2xl:pb-0"
alt={title}
>
<Link className="group" to={node.fields.slug}>
{node.frontmatter.featured === true && (
<div
className="flex top-0 left-0 absolute m-3 lg:m-5 text-white bg-black lg:bg-transparent lg:text-gray-300 group-hover:bg-black items-center rounded-lg p-1"
style={{ zIndex: "3" }}
>
<FaStar className="text-yellow-300 text-2xl" />
<p
className="inline-block lg:opacity-0 group-hover:opacity-100 text-base font-semibold px-2"
style={{ fontFamily: "TUoS Blake" }}
>
Featured
</p>
</div>
)}
<IMG_DIV className="lg:greyScale-100 group-hover:greyScale-0">
<IMG image={imagesrc} alt={"Image for " + title} />
</IMG_DIV>
<ArrowBox className="px-6 pt-6 2xl:px-8 2xl:pt-8 leading-none">
<div className="overflow-hidden fade-box">
<h1 className="font-extrabold xl:text-2xl 2xl:text-3xl leading-tight text-black group-hover:text-brand-blue overflow-y-hidden font-sans">
{title}
</h1>
<p className="my-3 text-base leading-tight group-hover:text-brand-blue text-gray-800">
{description}
</p>
</div>
<div
className="relative z-10 text-xs"
style={{ color: "#595959", fontWeight: "400" }}
>
<p className="mt-4 mb-1">
{node.frontmatter.date} · {node.fields.readingTime.text}
</p>
</div>
</ArrowBox>
</Link>
<div
className="px-6 2xl:px-8 text-xs"
style={{ color: "#595959", fontWeight: "400" }}
>
{node.frontmatter.category.map((cat) => (
<>
<Link key={tagItem} className="hover:underline" to={`/blog/tag/${kebabCase(tagItem)}`}>{tagItem}</Link>
{tag.length === i+1 ? '' : [i === 2 ? ' ' : ' · ']}
<Link
key={cat}
className="font-semibold hover:underline"
to={`/blog/category/${kebabCase(cat)}`}
>
{cat}
</Link>
<> · </>
</>
)
})}
{tag.length > 3 && <Link className="hover:underline" to={node.fields.slug}>+{tag.length - 3} more</Link>}
</div>
</div>
</Slide>
)
})}
))}
{tag.map((tagItem, i) => {
return (
i < 3 && (
<>
<Link
key={tagItem}
className="hover:underline"
to={`/blog/tag/${kebabCase(tagItem)}`}
>
{tagItem}
</Link>
{tag.length === i + 1 ? "" : [i === 2 ? " " : " · "]}
</>
)
);
})}
{tag.length > 3 && (
<Link className="hover:underline" to={node.fields.slug}>
+{tag.length - 3} more
</Link>
)}
</div>
</div>
</Slide>
);
})}
</div>
)
}
);
};

export default blogPostGrid
export default blogPostGrid;

blogPostGrid.propTypes = {
allMdx: PropTypes.any,

}
allMdx: PropTypes.any
};
6 changes: 3 additions & 3 deletions src/components/shared/shareButtons.jsx
View file
Expand Up @@ -75,15 +75,15 @@ const shareButtons = ({ shareLinks, tableOfContent, renderItem }) => {

{/* mobile: table of content & share buttons */}
<div
className="w-full shadow-md flex flex-wrap lg:hidden focus:justify-center -mt-12 lg:mt-0"
className="w-full shadow-md flex flex-wrap lg:hidden justify-center -mt-12 lg:mt-0"
style={{ backgroundColor: "#f3f3f3" }}
>
<div
className={`${
tableOfContent && Object.keys(tableOfContent).length === 0
? "flex-row"
: "flex-col w-1/4"
} flex text-sm justify-center items-center py-2 ml-10`}
} flex text-sm justify-center items-center py-2`}
style={{ maxWidth: "50px" }}
aria-label="Top mobile share buttons"
>
Expand All @@ -106,7 +106,7 @@ const shareButtons = ({ shareLinks, tableOfContent, renderItem }) => {
<div
className={` ${
tableOfContent && tableOfContent.items ? "pt-8 pb-5" : "hidden"
} mx-auto overflow-auto text-black lg:hidden px-2`}
} ml-10 overflow-auto text-black lg:hidden px-2`}
>
{tableOfContent && tableOfContent.items && (
<p className="font-bold mb-3 pb-2 border-b-1 border-gray-300">
Expand Down

0 comments on commit 158a4e7

Please sign in to comment.