Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Scrolling effect on sidebar #1665

Closed
wants to merge 2 commits into from
Closed

Scrolling effect on sidebar #1665

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
2efea99
Added the scrolling Effect
May 13, 2023
dd4ff8c
Added Scrolling Effect
May 13, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
71 changes: 52 additions & 19 deletions components/docs/DocsCards.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,77 +1,110 @@
import Link from 'next/link';
import Heading from '../typography/Heading';
import Paragraph from '../typography/Paragraph';
import { useEffect, useRef } from 'react';

import IconGettingStarted from '../icons/GettingStarted'
import IconTutorials from '../icons/Tutorials'
import IconUseCases from '../icons/UseCases'
import IconGuide from '../icons/Guide'
import IconSpec from '../icons/Spec'
import IconGettingStarted from '../icons/GettingStarted';
import IconTutorials from '../icons/Tutorials';
import IconUseCases from '../icons/UseCases';
import IconGuide from '../icons/Guide';
import IconSpec from '../icons/Spec';

const cards = [
{
title: 'Concepts',
description: 'Our Concepts section defines the concepts of AsyncAPI features and capabilities.',
description:
'Our Concepts section defines the concepts of AsyncAPI features and capabilities.',
link: '/docs/concepts',
className: 'bg-secondary-200',
Icon: IconGettingStarted,
subitemSelector: '#concepts',
},
{
title: 'Tutorials',
description: 'Our Tutorials section teaches beginner processes with AsyncAPI, guiding you from Point A to Point B.',
description:
'Our Tutorials section teaches beginner processes with AsyncAPI, guiding you from Point A to Point B.',
link: '/docs/tutorials',
className: 'bg-pink-100',
Icon: IconTutorials,
subitemSelector: '#tutorials',
},
{
title: 'Tools',
description: 'Our Tools section documents the AsyncAPI tools ecosystem.',
link: '/docs/tools',
className: 'bg-green-200',
Icon: IconUseCases,
subitemSelector: '#tools',
},
{
title: 'Guides',
description: "Our Guides section teaches AsyncAPI's capabilities at a high level.",
description:
"Our Guides section teaches AsyncAPI's capabilities at a high level.",
link: '/docs/guides',
className: 'bg-primary-200',
Icon: IconGuide,
subitemSelector: '#guides',
},
{
title: 'Reference',
description: 'Our Reference section documents the AsyncAPI specification.',
link: '/docs/reference',
className: 'bg-yellow-200',
Icon: IconSpec,
}
subitemSelector: '#reference',
},
];

export function DocsCards() {
return (
<div className='grid gap-4 grid-cols-1 sm:grid-cols-2'>
{cards.map(card => (
<div className="grid gap-4 grid-cols-1 sm:grid-cols-2">
{cards.map((card) => (
<Card key={card.title} {...card} />
))}
</div>
);
}

function Card({ title, description, link, className, Icon }) {
function Card({ title, description, link, className, Icon, subitemSelector }) {
const linkRef = useRef(null);

const handleClick = () => {
const subitem = document.querySelector(subitemSelector);
if (subitem) {
const subitemOffset = subitem.getBoundingClientRect().top;
window.scrollTo({
top: subitemOffset,
behavior: 'smooth',
});
}
};

useEffect(() => {
const linkEl = linkRef.current;
linkEl.addEventListener('click', handleClick);

return () => {
linkEl.removeEventListener('click', handleClick);
};
}, [linkRef, handleClick, subitemSelector]);

return (
<Link href={link}>
<a href={link} className='cursor-pointer'>
<a href={link} ref={linkRef} className="cursor-pointer">
<div className="h-full border border-gray-200 shadow-md hover:shadow-lg transition-all duration-300 ease-in-out rounded-lg p-6">
<div>
<Heading
<Heading
level="h3"
typeStyle="heading-sm-semibold"
className='pb-4 border-b border-gray-300'
className="pb-4 border-b border-gray-300"
>
<div className='flex flex-row items-center'>
<div className={`flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-lg ${className} text-gray-900 sm:h-12 sm:w-12`}>
<Icon className="h-6 w-6"/>
<div className="flex flex-row items-center">
<div
className={`flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-lg ${className} text-gray-900 sm:h-12 sm:w-12`}
>
<Icon className="h-6 w-6" />
</div>
<span className='ml-4'>{title}</span>
<span className="ml-4">{title}</span>
</div>
</Heading>
<Paragraph typeStyle="body-sm" className="mt-5">
Expand Down
163 changes: 101 additions & 62 deletions components/navigation/BlogPostItem.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,80 +1,119 @@
import moment from 'moment'
import { forwardRef } from 'react'
import TextTruncate from 'react-text-truncate'
import AuthorAvatars from '../AuthorAvatars'
import Heading from '../typography/Heading'
import Paragraph from '../typography/Paragraph'
import Link from 'next/link'
import moment from 'moment';
import { forwardRef } from 'react';
import TextTruncate from 'react-text-truncate';
import AuthorAvatars from '../AuthorAvatars';
import Heading from '../typography/Heading';
import Paragraph from '../typography/Paragraph';
import Link from 'next/link';

export default forwardRef(function BlogPostItem({ post, className = '', id=''}, ref) {
let typeColors = ['bg-indigo-100', 'text-indigo-800']
export default forwardRef(function BlogPostItem(
{ post, className = '', id = '' },
ref
) {
let typeColors = ['bg-indigo-100', 'text-indigo-800'];

switch (post.type.toLowerCase()) {
case 'video':
typeColors = ['bg-pink-100', 'text-pink-800']
break
typeColors = ['bg-pink-100', 'text-pink-800'];
break;
case 'marketing':
typeColors = ['bg-orange-100', 'text-orange-800']
break
typeColors = ['bg-orange-100', 'text-orange-800'];
break;
case 'strategy':
typeColors = ['bg-green-100', 'text-green-800']
break
typeColors = ['bg-green-100', 'text-green-800'];
break;
case 'communication':
typeColors = ['bg-teal-100', 'text-teal-800']
break
typeColors = ['bg-teal-100', 'text-teal-800'];
break;
}

return (
<li className={`rounded-lg ${className}`} ref={ref} id={id}>
<article className='h-full rounded-lg'>
<Link href={post.slug} passHref>
<a className={`h-full flex flex-col border border-gray-200 rounded-lg shadow-md divide-y divide-gray-200 transition-all duration-300 ease-in-out hover:shadow-lg overflow-hidden cursor-pointer`}>
<img className="h-48 w-full object-cover" src={post.cover} alt="" loading="lazy" />
<div className="flex-1 bg-white p-6 flex flex-col justify-between">
<div className="flex-1">
<Paragraph typeStyle="body-sm" textColor="text-indigo-500">
<span className={`inline-flex items-center px-3 py-0.5 rounded-full ${typeColors[0]} ${typeColors[1]}`}>
{post.type}
</span>
</Paragraph>
<Link href={post.slug}>
<a className="block">
<Heading level="h3" typeStyle="heading-sm-semibold" className="mt-2">
{post.title}
</Heading>
<Paragraph typeStyle="body-sm" className="mt-3">
<TextTruncate element="span" line={4} text={post.excerpt} />
</Paragraph>
</a>
</Link>
</div>
<div className="mt-6 flex items-center">
<div className="relative flex-shrink-0">
<AuthorAvatars authors={post.authors} />
</div>
<div className="ml-3">
<Heading level="h3" typeStyle="heading-xs-semibold" textColor="text-gray-900">
<span className="hover:underline">
{post.authors.map((author, index) => author.link ? <a key={index} alt={author.name} href={author.link} onClick={e => { e.stopPropagation() }} target="_blank" rel="noreferrer">{author.name}</a> : author.name).reduce((prev, curr) => [prev, ' & ', curr])}
</span>
<article className="h-full rounded-lg">
<Link href={post.slug} passHref>
<a
className={`h-full flex flex-col border border-gray-200 rounded-lg shadow-md divide-y divide-gray-200 transition-all duration-300 ease-in-out hover:shadow-lg overflow-hidden cursor-pointer`}
>
<img
className="h-48 w-full object-cover"
src={post.cover}
alt=""
loading="lazy"
/>
<div className="flex-1 bg-white p-6 flex flex-col justify-between">
<div className="flex-1">
<Paragraph typeStyle="body-sm" textColor="text-indigo-500">
<span
className={`inline-flex items-center px-3 py-0.5 rounded-full ${typeColors[0]} ${typeColors[1]}`}
>
{post.type}
</span>
</Paragraph>
<Link href={post.slug}>
<a className="block">
<Heading
level="h3"
typeStyle="heading-sm-semibold"
className="mt-2"
>
{post.title}
</Heading>
<Paragraph typeStyle="body-sm" className="flex">
<time dateTime={post.date}>
{moment(post.date).format('MMMM D, YYYY')}
</time>
<span className="mx-1">
&middot;
</span>
<span>
{post.readingTime} min read
</span>
<Paragraph typeStyle="body-sm" className="mt-3">
<TextTruncate
element="span"
line={4}
text={post.excerpt}
/>
</Paragraph>
</div>
</a>
</Link>
</div>
<div className="mt-6 flex items-center">
<div className="relative flex-shrink-0">
<AuthorAvatars authors={post.authors} />
</div>
<div className="ml-3">
<Heading
level="h3"
typeStyle="heading-xs-semibold"
textColor="text-gray-900"
>
<span className="hover:underline">
{post.authors
.map((author, index) =>
author.link ? (
<a
key={index}
alt={author.name}
href={author.link}
onClick={(e) => {
e.stopPropagation();
}}
target="_blank"
rel="noreferrer"
>
{author.name}
</a>
) : (
author.name
)
)
.reduce((prev, curr) => [prev, ' & ', curr])}
</span>
</Heading>
<Paragraph typeStyle="body-sm" className="flex">
<time dateTime={post.date}>
{moment(post.date).format('MMMM D, YYYY')}
</time>
<span className="mx-1">&middot;</span>
<span>{post.readingTime} min read</span>
</Paragraph>
</div>
</div>
</a>
</div>
</a>
</Link>
</article>
</li>
)
})
);
});
Loading