upstream #1
@ -3,13 +3,13 @@ import Link from '@/components/Link'
|
|||||||
|
|
||||||
const Card = ({ title, description, imgSrc, href }) => (
|
const Card = ({ title, description, imgSrc, href }) => (
|
||||||
<div className="p-4 md:w-1/2 md" style={{ maxWidth: '544px' }}>
|
<div className="p-4 md:w-1/2 md" style={{ maxWidth: '544px' }}>
|
||||||
<div className="h-full border-2 border-gray-200 border-opacity-60 dark:border-gray-700 rounded-md overflow-hidden">
|
<div className="h-full overflow-hidden border-2 border-gray-200 rounded-md border-opacity-60 dark:border-gray-700">
|
||||||
{href ? (
|
{href ? (
|
||||||
<Link href={href} aria-label={`Link to ${title}`}>
|
<Link href={href} aria-label={`Link to ${title}`}>
|
||||||
<Image
|
<Image
|
||||||
alt={title}
|
alt={title}
|
||||||
src={imgSrc}
|
src={imgSrc}
|
||||||
className="lg:h-48 md:h-36 object-cover object-center"
|
className="object-cover object-center lg:h-48 md:h-36"
|
||||||
width={544}
|
width={544}
|
||||||
height={306}
|
height={306}
|
||||||
/>
|
/>
|
||||||
@ -18,13 +18,13 @@ const Card = ({ title, description, imgSrc, href }) => (
|
|||||||
<Image
|
<Image
|
||||||
alt={title}
|
alt={title}
|
||||||
src={imgSrc}
|
src={imgSrc}
|
||||||
className="lg:h-48 md:h-36 object-cover object-center"
|
className="object-cover object-center lg:h-48 md:h-36"
|
||||||
width={544}
|
width={544}
|
||||||
height={306}
|
height={306}
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
<div className="p-6">
|
<div className="p-6">
|
||||||
<h2 className="text-2xl font-bold leading-8 tracking-tight mb-3">
|
<h2 className="mb-3 text-2xl font-bold leading-8 tracking-tight">
|
||||||
{href ? (
|
{href ? (
|
||||||
<Link href={href} aria-label={`Link to ${title}`}>
|
<Link href={href} aria-label={`Link to ${title}`}>
|
||||||
{title}
|
{title}
|
||||||
@ -33,11 +33,11 @@ const Card = ({ title, description, imgSrc, href }) => (
|
|||||||
title
|
title
|
||||||
)}
|
)}
|
||||||
</h2>
|
</h2>
|
||||||
<p className="prose text-gray-500 max-w-none dark:text-gray-400 mb-3">{description}</p>
|
<p className="mb-3 prose text-gray-500 max-w-none dark:text-gray-400">{description}</p>
|
||||||
{href && (
|
{href && (
|
||||||
<Link
|
<Link
|
||||||
href={href}
|
href={href}
|
||||||
className="text-base font-medium leading-6 text-blue-500 hover:text-blue-600 dark:hover:text-blue-400"
|
className="text-base font-medium leading-6 text-primary-500 hover:text-primary-600 dark:hover:text-primary-400"
|
||||||
aria-label={`Link to ${title}`}
|
aria-label={`Link to ${title}`}
|
||||||
>
|
>
|
||||||
Learn more →
|
Learn more →
|
||||||
|
@ -4,7 +4,7 @@ import kebabCase from '@/lib/utils/kebabCase'
|
|||||||
const Tag = ({ text }) => {
|
const Tag = ({ text }) => {
|
||||||
return (
|
return (
|
||||||
<Link href={`/tags/${kebabCase(text)}`}>
|
<Link href={`/tags/${kebabCase(text)}`}>
|
||||||
<a className="mr-3 text-sm font-medium text-blue-500 uppercase hover:text-blue-600 dark:hover:text-blue-400">
|
<a className="mr-3 text-sm font-medium uppercase text-primary-500 hover:text-primary-600 dark:hover:text-primary-400">
|
||||||
{text.split(' ').join('-')}
|
{text.split(' ').join('-')}
|
||||||
</a>
|
</a>
|
||||||
</Link>
|
</Link>
|
||||||
|
@ -30,7 +30,7 @@ export default function ListLayout({ posts, title, initialDisplayPosts = [], pag
|
|||||||
type="text"
|
type="text"
|
||||||
onChange={(e) => setSearchValue(e.target.value)}
|
onChange={(e) => setSearchValue(e.target.value)}
|
||||||
placeholder="Search articles"
|
placeholder="Search articles"
|
||||||
className="block w-full px-4 py-2 text-gray-900 bg-white border border-gray-300 rounded-md dark:border-gray-900 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-800 dark:text-gray-100"
|
className="block w-full px-4 py-2 text-gray-900 bg-white border border-gray-300 rounded-md dark:border-gray-900 focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-800 dark:text-gray-100"
|
||||||
/>
|
/>
|
||||||
<svg
|
<svg
|
||||||
className="absolute w-5 h-5 text-gray-400 right-3 top-3 dark:text-gray-300"
|
className="absolute w-5 h-5 text-gray-400 right-3 top-3 dark:text-gray-300"
|
||||||
|
@ -59,7 +59,7 @@ export default function PostLayout({ frontMatter, authorDetails, next, prev, chi
|
|||||||
{author.twitter && (
|
{author.twitter && (
|
||||||
<Link
|
<Link
|
||||||
href={author.twitter}
|
href={author.twitter}
|
||||||
className="text-blue-500 hover:text-blue-600 dark:hover:text-blue-400"
|
className="text-primary-500 hover:text-primary-600 dark:hover:text-primary-400"
|
||||||
>
|
>
|
||||||
{author.twitter.replace('https://twitter.com/', '@')}
|
{author.twitter.replace('https://twitter.com/', '@')}
|
||||||
</Link>
|
</Link>
|
||||||
@ -102,7 +102,7 @@ export default function PostLayout({ frontMatter, authorDetails, next, prev, chi
|
|||||||
<h2 className="text-xs tracking-wide text-gray-500 uppercase dark:text-gray-400">
|
<h2 className="text-xs tracking-wide text-gray-500 uppercase dark:text-gray-400">
|
||||||
Previous Article
|
Previous Article
|
||||||
</h2>
|
</h2>
|
||||||
<div className="text-blue-500 hover:text-blue-600 dark:hover:text-blue-400">
|
<div className="text-primary-500 hover:text-primary-600 dark:hover:text-primary-400">
|
||||||
<Link href={`/blog/${prev.slug}`}>{prev.title}</Link>
|
<Link href={`/blog/${prev.slug}`}>{prev.title}</Link>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -112,7 +112,7 @@ export default function PostLayout({ frontMatter, authorDetails, next, prev, chi
|
|||||||
<h2 className="text-xs tracking-wide text-gray-500 uppercase dark:text-gray-400">
|
<h2 className="text-xs tracking-wide text-gray-500 uppercase dark:text-gray-400">
|
||||||
Next Article
|
Next Article
|
||||||
</h2>
|
</h2>
|
||||||
<div className="text-blue-500 hover:text-blue-600 dark:hover:text-blue-400">
|
<div className="text-primary-500 hover:text-primary-600 dark:hover:text-primary-400">
|
||||||
<Link href={`/blog/${next.slug}`}>{next.title}</Link>
|
<Link href={`/blog/${next.slug}`}>{next.title}</Link>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -123,7 +123,7 @@ export default function PostLayout({ frontMatter, authorDetails, next, prev, chi
|
|||||||
<div className="pt-4 xl:pt-8">
|
<div className="pt-4 xl:pt-8">
|
||||||
<Link
|
<Link
|
||||||
href="/blog"
|
href="/blog"
|
||||||
className="text-blue-500 hover:text-blue-600 dark:hover:text-blue-400"
|
className="text-primary-500 hover:text-primary-600 dark:hover:text-primary-400"
|
||||||
>
|
>
|
||||||
← Back to the blog
|
← Back to the blog
|
||||||
</Link>
|
</Link>
|
||||||
|
@ -44,7 +44,7 @@ export default function PostLayout({ frontMatter, authorDetails, next, prev, chi
|
|||||||
<div className="pt-4 xl:pt-8">
|
<div className="pt-4 xl:pt-8">
|
||||||
<Link
|
<Link
|
||||||
href={`/blog/${prev.slug}`}
|
href={`/blog/${prev.slug}`}
|
||||||
className="text-blue-500 hover:text-blue-600 dark:hover:text-blue-400"
|
className="text-primary-500 hover:text-primary-600 dark:hover:text-primary-400"
|
||||||
>
|
>
|
||||||
← {prev.title}
|
← {prev.title}
|
||||||
</Link>
|
</Link>
|
||||||
@ -54,7 +54,7 @@ export default function PostLayout({ frontMatter, authorDetails, next, prev, chi
|
|||||||
<div className="pt-4 xl:pt-8">
|
<div className="pt-4 xl:pt-8">
|
||||||
<Link
|
<Link
|
||||||
href={`/blog/${next.slug}`}
|
href={`/blog/${next.slug}`}
|
||||||
className="text-blue-500 hover:text-blue-600 dark:hover:text-blue-400"
|
className="text-primary-500 hover:text-primary-600 dark:hover:text-primary-400"
|
||||||
>
|
>
|
||||||
{next.title} →
|
{next.title} →
|
||||||
</Link>
|
</Link>
|
||||||
|
@ -70,7 +70,7 @@ export default function Home({ posts }) {
|
|||||||
<div className="text-base font-medium leading-6">
|
<div className="text-base font-medium leading-6">
|
||||||
<Link
|
<Link
|
||||||
href={`/blog/${slug}`}
|
href={`/blog/${slug}`}
|
||||||
className="text-blue-500 hover:text-blue-600 dark:hover:text-blue-400"
|
className="text-primary-500 hover:text-primary-600 dark:hover:text-primary-400"
|
||||||
aria-label={`Read "${title}"`}
|
aria-label={`Read "${title}"`}
|
||||||
>
|
>
|
||||||
Read more →
|
Read more →
|
||||||
@ -88,7 +88,7 @@ export default function Home({ posts }) {
|
|||||||
<div className="flex justify-end text-base font-medium leading-6">
|
<div className="flex justify-end text-base font-medium leading-6">
|
||||||
<Link
|
<Link
|
||||||
href="/blog"
|
href="/blog"
|
||||||
className="text-blue-500 hover:text-blue-600 dark:hover:text-blue-400"
|
className="text-primary-500 hover:text-primary-600 dark:hover:text-primary-400"
|
||||||
aria-label="all posts"
|
aria-label="all posts"
|
||||||
>
|
>
|
||||||
All Posts →
|
All Posts →
|
||||||
|
@ -20,13 +20,14 @@ module.exports = {
|
|||||||
sans: ['Inter', ...defaultTheme.fontFamily.sans],
|
sans: ['Inter', ...defaultTheme.fontFamily.sans],
|
||||||
},
|
},
|
||||||
colors: {
|
colors: {
|
||||||
blue: colors.lightBlue,
|
primary: colors.cyan,
|
||||||
|
gray: colors.trueGray,
|
||||||
code: {
|
code: {
|
||||||
green: '#b5f4a5',
|
green: '#b5f4a5',
|
||||||
yellow: '#ffe484',
|
yellow: '#ffe484',
|
||||||
purple: '#d9a9ff',
|
purple: '#d9a9ff',
|
||||||
red: '#ff8383',
|
red: '#ff8383',
|
||||||
blue: '#93ddfd',
|
primary: '#93ddfd',
|
||||||
white: '#fff',
|
white: '#fff',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
@ -35,11 +36,11 @@ module.exports = {
|
|||||||
css: {
|
css: {
|
||||||
color: theme('colors.gray.700'),
|
color: theme('colors.gray.700'),
|
||||||
a: {
|
a: {
|
||||||
color: theme('colors.blue.500'),
|
color: theme('colors.primary.500'),
|
||||||
'&:hover': {
|
'&:hover': {
|
||||||
color: theme('colors.blue.600'),
|
color: theme('colors.primary.600'),
|
||||||
},
|
},
|
||||||
code: { color: theme('colors.blue.400') },
|
code: { color: theme('colors.primary.400') },
|
||||||
},
|
},
|
||||||
h1: {
|
h1: {
|
||||||
fontWeight: '700',
|
fontWeight: '700',
|
||||||
@ -92,11 +93,11 @@ module.exports = {
|
|||||||
css: {
|
css: {
|
||||||
color: theme('colors.gray.300'),
|
color: theme('colors.gray.300'),
|
||||||
a: {
|
a: {
|
||||||
color: theme('colors.blue.500'),
|
color: theme('colors.primary.500'),
|
||||||
'&:hover': {
|
'&:hover': {
|
||||||
color: theme('colors.blue.400'),
|
color: theme('colors.primary.400'),
|
||||||
},
|
},
|
||||||
code: { color: theme('colors.blue.400') },
|
code: { color: theme('colors.primary.400') },
|
||||||
},
|
},
|
||||||
h1: {
|
h1: {
|
||||||
fontWeight: '700',
|
fontWeight: '700',
|
||||||
|
Loading…
x
Reference in New Issue
Block a user