Skip to content

Commit

Permalink
Merge branch 'asyncapi:master' into master
Browse files Browse the repository at this point in the history
  • Loading branch information
@anshgoyalevil
anshgoyalevil authored Aug 2, 2023
2 parents a525645 + 97f0446 commit 67e7911
Show file tree
Hide file tree
Showing 56 changed files with 2,481 additions and 328 deletions.
2 changes: 1 addition & 1 deletion .eslintrc.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ module.exports = {
"browser": true,
"es6": true,
},
"extends": ["eslint:recommended", "plugin:react/recommended" , "plugin:cypress/recommended"],
"extends": ["eslint:recommended", "plugin:react/recommended", "plugin:cypress/recommended"],
"globals": {
"Atomics": "readonly",
"SharedArrayBuffer": "readonly",
Expand Down
13 changes: 9 additions & 4 deletions components/Hero.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,18 +8,24 @@ import Heading from './typography/Heading'
import Paragraph from './typography/Paragraph'
import AlgoliaSearch, { SearchButton } from './AlgoliaSearch'; // Import AlgoliaSearch component
import IconLoupe from './icons/Loupe';
import {
useTranslation,
} from "next-i18next-static-site";

export default function Hero({ className = ''}) {

const { t } = useTranslation();

return (
<>
<AnnouncementHero className='my-4' />
<header className={`px-2 mt-12 ${className}`}>
<div className="text-center">
<Heading level="h1" typeStyle="heading-xl" className="mb-4">
Building the future of {` `}
{t('main.header')} {` `}
<span className="block md:-mt-4">
{" "}
Event-Driven Architectures (EDA)
{t('main.subHeader')}
</span>
</Heading>
<Heading level="h2" typeStyle="body-lg" textColor="text-gray-700" className="mb-10 max-w-4xl mx-auto">
Expand Down Expand Up @@ -69,5 +75,4 @@ export default function Hero({ className = ''}) {
</header>
</>
);
}

}
8 changes: 4 additions & 4 deletions components/community/Card.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ export default function SmallHomeCards({icon, tagline, taglineBg, type="large",
<a target={link.includes('http') && '_blank'}>
<div
className={`p-3 cursor-pointer border shadow-xl rounded w-full border-[#ad20e2] ${bg}`}
>
data-testid="Card-small-bg">
<div className="p-2 rounded-xl bg-gray-100 text-center w-min text-xs flex justify-between">
<span>{icon}</span> <span className="ml-[5px]">{tagline}</span>
</div>
Expand Down Expand Up @@ -41,10 +41,10 @@ export default function SmallHomeCards({icon, tagline, taglineBg, type="large",
className={`h-140 w-full shadow-xl rounded p-6 border ${
!bg && 'border-[#ad20e2]'
} ${bg}`}
>
data-testid="Card-lg-bg">
<div
className={`p-2 rounded-xl text-center w-min text-xs flex justify-between ${taglineBg}`}
>
data-testid="Card-lg-tagline">
<span>{icon}</span> <span className="ml-[5px]">{tagline}</span>
</div>

Expand All @@ -62,7 +62,7 @@ export default function SmallHomeCards({icon, tagline, taglineBg, type="large",
</div>
<div className="mt-10">
<Link href={link}>
<a>
<a data-testid="Card-link-lg">
<div className={`flex ${btnBg} cursor-pointer`}>
<IconArrowUp className={`w-[20px] ${btnBg}`} />{' '}
<span className="ml-2 text-sm">{btnText}</span>
Expand Down
4 changes: 2 additions & 2 deletions components/editor/CodeBlock.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -104,8 +104,8 @@ export default function CodeBlock({
{
showCopy && (
<div className="z-10">
<button onClick={onClickCopy} className="absolute bg-code-editor-dark z-50 text-xs text-gray-500 right-2 top-1 cursor-pointer hover:text-gray-300 focus:outline-none" title="Copy to clipboard">
{showIsCopied && <span className="inline-block pl-2 pt-1 mr-2">Copied!</span>}
<button onClick={onClickCopy} className="absolute bg-code-editor-dark z-50 text-xs text-gray-500 right-2 top-1 cursor-pointer hover:text-gray-300 focus:outline-none" title="Copy to clipboard" data-test="copy-button">
{showIsCopied && <span className="inline-block pl-2 pt-1 mr-2" data-testid="clicked-text">Copied!</span>}
<span className="inline-block pt-1"><IconClipboard className="inline-block w-4 h-4 -mt-0.5" /></span>
</button>
</div>
Expand Down
21 changes: 21 additions & 0 deletions components/languageSelector/LanguageSelect.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
import { twMerge } from 'tailwind-merge'
export default function LanguageSelect({
className = '',
onChange = () => { },
options = [],
selected,
}) {
return (
<select data-testid="Select-form"
onChange={(ev) => onChange(ev.target.value)}
className={twMerge(`form-select h-full py-0 px-3 pr-7 inline-flex justify-center rounded-md border border-gray-300 shadow-sm py-2 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 focus:ring-indigo-500 ${className}`)}
value={selected}
>
{options.map((option, index) => (
<option key={index} selected={option.value === selected} value={option.value} data-testid="Option-form">
{option.text}
</option>
))}
</select>
)
}
48 changes: 48 additions & 0 deletions components/link.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
import Link from "next/link";
import { useRouter } from "next/router";
import { defaultLanguage, languages } from "next-i18next-static-site";

const LinkComponent = ({ children, locale, ...props }) => {
const router = useRouter();
const { pathname, query, asPath } = router;

// Detect current language
const slug = asPath.split("/")[1];
const langSlug = languages.includes(slug) && slug;
const language = query.lang || langSlug || defaultLanguage;

let href = props.href || pathname;

if (locale) {
if (props.href) {
href = `/${locale}${href}`;
} else {
if (pathname.startsWith("/404")) {
href = `/${locale}`;
} else {
href = pathname.replace("[lang]", locale);
}
}
} else {
if (language) {
href = `/${language}${href}`;
} else {
href = `/${href}`;
}
}

// Fix double slashes
href = href.replace(/([^:]\/)\/+/g, "$1").replace("//", "/");

return (
<Link href={href} passHref>
{children}
</Link>
);
};

export const LinkText = ({ href, children, ...props }) => {
return <Link href={href || ""}>{children}</Link>;
};

export default LinkComponent;
14 changes: 7 additions & 7 deletions components/navigation/DocsNavItem.js
View file
Original file line number Diff line number Diff line change
@@ -1,25 +1,25 @@
import Link from 'next/link';

function isActiveSlug(slug, activeSlug, sectionSlug) {
if(slug === '/docs' || (sectionSlug !== undefined && slug === sectionSlug)) {
if (slug === '/docs' || (sectionSlug !== undefined && slug === sectionSlug)) {
return (slug == activeSlug)
}

const partialSlug = slug.split('/');
const partialActiveSlug = activeSlug.split('/');
const activeParts = partialActiveSlug.filter((a, idx) => a === partialSlug[idx]);
return activeParts.length === partialSlug.length;
}

export default function DocsNavItem({ title, slug, href, activeSlug, sectionSlug, onClick = () => {}, defaultClassName = '', inactiveClassName = '', activeClassName = '', bucket }) {
export default function DocsNavItem({ title, slug, href, activeSlug, sectionSlug, onClick = () => { }, defaultClassName = '', inactiveClassName = '', activeClassName = '', bucket }) {
const isActive = isActiveSlug(slug, activeSlug, sectionSlug);
const classes = `${isActive ? activeClassName : inactiveClassName} ${defaultClassName} inline-block`;
const classes = `${isActive ? activeClassName : inactiveClassName} ${defaultClassName} inline-block w-full`;

return (
<div className='inline-block'>
<div>
<div className={classes}>
<Link href={href || slug}>
<a href={href || slug} onClick={onClick}>
<a className='inline-block w-full' href={href || slug} onClick={onClick}>
{bucket && (
<div className={`${(slug === '/docs' ? slug === activeSlug : activeSlug.startsWith(slug)) ? bucket.className : ''} inline-block rounded`} style={{ marginRight: '5px', marginBottom: '-6px', padding: '2px' }}>
<bucket.icon className='h-5 w-5' />
Expand All @@ -31,4 +31,4 @@ export default function DocsNavItem({ title, slug, href, activeSlug, sectionSlug
</div>
</div>
);
}
}
4 changes: 2 additions & 2 deletions components/navigation/EventFilter.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,9 +29,9 @@ function EventFilter({ data, setData }) {
}
}, [active]);
return (
<div className="p-2 bg-secondary-200 rounded-md flex justify-between w-full sm:w-[400px] text-secondary-600">
<div className="p-2 bg-secondary-200 rounded-md flex justify-between w-full sm:w-[400px] text-secondary-600" data-testid="EventFilters-main">
{filterList.map((list) => (
<div
<div data-testid = "EventFilter-click"
key={list}
className={`p-3 w-[100px] cursor-pointer text-center ${
active === list
Expand Down
2 changes: 1 addition & 1 deletion components/navigation/EventPostItem.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ function EventPostItem({ post, className, id }) {
active = false
}
return (
<li key={id} className={`${className}`}>
<li key={id} className={`${className}`} data-testid="EventPostItem-main">
<article className='h-full rounded-lg shadow-md hover:shadow-lg'>
<a href={post.url} target='_blank' rel='noreferrer'>
<img
Expand Down
60 changes: 56 additions & 4 deletions components/navigation/NavBar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,16 +14,57 @@ import GithubButton from "../buttons/GithubButton"
import { SearchButton } from '../AlgoliaSearch';
import IconLoupe from '../icons/Loupe';
import Link from 'next/link';
import LanguageSelect from '../languageSelector/LanguageSelect';
import {
defaultLanguage,
languages,
useTranslation,
} from "next-i18next-static-site";

const isMobile = isMobileDevice();
const uniqueLangs = [...new Set(["EN", "DE"])].map((repo) => ({
key: repo,
text: repo,
}));

export default function NavBar({
className = '',
hideLogo = false,
}) {
const { asPath } = useRouter();
const router = useRouter();
const { pathname, query, asPath } = router;
const [open, setOpen] = useState();
const [mobileMenuOpen, setMobileMenuOpen] = useState();
const [lang, setLang] = useState("en");
const { i18n } = useTranslation();

const changeLanguage = async (locale) => {
// Detect current language
const slug = asPath.split("/")[1];
const langSlug = languages.includes(slug) && slug;
const language = query.lang || langSlug || defaultLanguage;

let href = pathname;

if (locale) {
if (pathname.startsWith("/404")) {
href = `/${locale}`;
} else {
href = pathname.replace("[lang]", locale);
}
} else {
if (language) {
href = `/${language}${href}`;
} else {
href = `/${href}`;
}
}

// Fix double slashes
href = href.replace(/([^:]\/)\/+/g, "$1").replace("//", "/");

router.push(href);
};

function outsideClick(menu) {
if (open !== menu) return;
Expand Down Expand Up @@ -107,9 +148,9 @@ export default function NavBar({
<div className="relative" onMouseLeave={() => showMenu(null)} ref={communityRef}>
<NavItem
text="Community"
href="/community"
onClick={() => showOnClickMenu('community')}
onMouseEnter={() => showMenu('community')}
href="/community"
onClick={() => showOnClickMenu('community')}
onMouseEnter={() => showMenu('community')}
hasDropdown
/>
{open === 'community' && <CommunityPanel />}
Expand All @@ -127,6 +168,17 @@ export default function NavBar({
<IconLoupe />
</SearchButton>

{/* // Language Picker Component */}
{/* <LanguageSelect
options={uniqueLangs}
onChange={(value) => {
setLang(value.toLowerCase());
changeLanguage(value.toLowerCase());
}}
className=""
selected={i18n.language.toLocaleUpperCase()}
/> */}

<GithubButton text="Star on GitHub" href="https://github.com/asyncapi/spec" className="py-2 ml-2" inNav="true" />
</div>
</nav>
Expand Down
2 changes: 1 addition & 1 deletion config/all-tags.json
View file
Original file line number Diff line number Diff line change
@@ -1 +1 @@
{"languages":[{"name":"Go/Golang","color":"bg-[#8ECFDF]","borderColor":"border-[#00AFD9]"},{"name":"Java","color":"bg-[#ECA2A4]","borderColor":"border-[#EC2125]"},{"name":"JavaScript","color":"bg-[#F2F1C7]","borderColor":"border-[#BFBE86]"},{"name":"HTML","color":"bg-[#E2A291]","borderColor":"border-[#E44D26]"},{"name":"C/C++","color":"bg-[#93CDEF]","borderColor":"border-[#0080CC]"},{"name":"C#","color":"bg-[#E3AFE0]","borderColor":"border-[#9B4F96]"},{"name":"Python","color":"bg-[#A8D0EF]","borderColor":"border-[#3878AB]"},{"name":"TypeScript","color":"bg-[#7DBCFE]","borderColor":"border-[#2C78C7]"},{"name":"Kotlin","color":"bg-[#B1ACDF]","borderColor":"border-[#756BD9]"},{"name":"Scala","color":"bg-[#FFA299]","borderColor":"border-[#DF301F]"},{"name":"Markdown","color":"bg-[#BABEBF]","borderColor":"border-[#445B64]"},{"name":"YAML","color":"bg-[#FFB764]","borderColor":"border-[#F1901F]"},{"name":"R","color":"bg-[#84B5ED]","borderColor":"border-[#246BBE]"},{"name":"Ruby","color":"bg-[#FF8289]","borderColor":"border-[#FF000F]"},{"name":"Rust","color":"bg-[#FFB8AA]","borderColor":"border-[#E43716]"},{"name":"Shell","color":"bg-[#87D4FF]","borderColor":"border-[#389ED7]"},{"name":"Groovy","color":"bg-[#B6D5E5]","borderColor":"border-[#609DBC]"}],"technologies":[{"name":"Node.js","color":"bg-[#BDFF67]","borderColor":"border-[#84CE24]"},{"name":"Hermes","color":"bg-[#8AEEBD]","borderColor":"border-[#2AB672]"},{"name":"React JS","color":"bg-[#9FECFA]","borderColor":"border-[#08D8FE]"},{"name":".NET","color":"bg-[#A184FF]","borderColor":"border-[#5026D4]"},{"name":"ASP.NET","color":"bg-[#71C2FB]","borderColor":"border-[#1577BC]"},{"name":"Springboot","color":"bg-[#98E279]","borderColor":"border-[#68BC44]"},{"name":"AWS","color":"bg-[#FF9F59]","borderColor":"border-[#EF6703]"},{"name":"Docker","color":"bg-[#B8E0FF]","borderColor":"border-[#2596ED]"},{"name":"Node-RED","color":"bg-[#FF7474]","borderColor":"border-[#8F0101]"},{"name":"Maven","color":"bg-[#FF6B80]","borderColor":"border-[#CA1A33]"},{"name":"Saas","color":"bg-[#6AB8EC]","borderColor":"border-[#2275AD]"},{"name":"Kubernetes-native","color":"bg-[#D7C7F2]","borderColor":"border-[#A387D2]"},{"name":"Scala","color":"bg-[#D7C7F2]","borderColor":"border-[#A387D2]"},{"name":"Azure","color":"bg-[#4B93FF]","borderColor":"border-[#015ADF]"},{"name":"Jenkins","color":"bg-[#D7C7F2]","borderColor":"border-[#A387D2]"},{"name":"Flask","color":"bg-[#D7C7F2]","borderColor":"border-[#A387D2]"},{"name":"Socket.IO","color":"bg-[#61d0f2]","borderColor":"border-[#40ccf7]"},{"name":"Liquid","color":"bg-[#61d0f2]","borderColor":"border-[#40ccf7]"},{"name":"Kotlin","color":"bg-[#61d0f2]","borderColor":"border-[#40ccf7]"},{"name":"Spring Cloud Streams","color":"bg-[#61d0f2]","borderColor":"border-[#40ccf7]"},{"name":"JHipster JDL","color":"bg-[#61d0f2]","borderColor":"border-[#40ccf7]"},{"name":"Groovy","color":"bg-[#61d0f2]","borderColor":"border-[#40ccf7]"},{"name":"Markdown","color":"bg-[#61d0f2]","borderColor":"border-[#40ccf7]"},{"name":"Shell","color":"bg-[#61d0f2]","borderColor":"border-[#40ccf7]"},{"name":"WebComponents","color":"bg-[#61d0f2]","borderColor":"border-[#40ccf7]"},{"name":"Babel","color":"bg-[#61d0f2]","borderColor":"border-[#40ccf7]"},{"name":"Storybook","color":"bg-[#61d0f2]","borderColor":"border-[#40ccf7]"},{"name":"AsyncAPI Generator","color":"bg-[#61d0f2]","borderColor":"border-[#40ccf7]"},{"name":"TypeScript","color":"bg-[#61d0f2]","borderColor":"border-[#40ccf7]"},{"name":"JetBrains","color":"bg-[#61d0f2]","borderColor":"border-[#40ccf7]"},{"name":"IntelliJ IDEA","color":"bg-[#61d0f2]","borderColor":"border-[#40ccf7]"},{"name":"VSCode","color":"bg-[#61d0f2]","borderColor":"border-[#40ccf7]"},{"name":"SmartPaste","color":"bg-[#61d0f2]","borderColor":"border-[#40ccf7]"}]}
{"languages":[{"name":"Go/Golang","color":"bg-[#8ECFDF]","borderColor":"border-[#00AFD9]"},{"name":"Java","color":"bg-[#ECA2A4]","borderColor":"border-[#EC2125]"},{"name":"JavaScript","color":"bg-[#F2F1C7]","borderColor":"border-[#BFBE86]"},{"name":"HTML","color":"bg-[#E2A291]","borderColor":"border-[#E44D26]"},{"name":"C/C++","color":"bg-[#93CDEF]","borderColor":"border-[#0080CC]"},{"name":"C#","color":"bg-[#E3AFE0]","borderColor":"border-[#9B4F96]"},{"name":"Python","color":"bg-[#A8D0EF]","borderColor":"border-[#3878AB]"},{"name":"TypeScript","color":"bg-[#7DBCFE]","borderColor":"border-[#2C78C7]"},{"name":"Kotlin","color":"bg-[#B1ACDF]","borderColor":"border-[#756BD9]"},{"name":"Scala","color":"bg-[#FFA299]","borderColor":"border-[#DF301F]"},{"name":"Markdown","color":"bg-[#BABEBF]","borderColor":"border-[#445B64]"},{"name":"YAML","color":"bg-[#FFB764]","borderColor":"border-[#F1901F]"},{"name":"R","color":"bg-[#84B5ED]","borderColor":"border-[#246BBE]"},{"name":"Ruby","color":"bg-[#FF8289]","borderColor":"border-[#FF000F]"},{"name":"Rust","color":"bg-[#FFB8AA]","borderColor":"border-[#E43716]"},{"name":"Shell","color":"bg-[#87D4FF]","borderColor":"border-[#389ED7]"},{"name":"Groovy","color":"bg-[#B6D5E5]","borderColor":"border-[#609DBC]"}],"technologies":[{"name":"Node.js","color":"bg-[#BDFF67]","borderColor":"border-[#84CE24]"},{"name":"Hermes","color":"bg-[#8AEEBD]","borderColor":"border-[#2AB672]"},{"name":"React JS","color":"bg-[#9FECFA]","borderColor":"border-[#08D8FE]"},{"name":".NET","color":"bg-[#A184FF]","borderColor":"border-[#5026D4]"},{"name":"ASP.NET","color":"bg-[#71C2FB]","borderColor":"border-[#1577BC]"},{"name":"Springboot","color":"bg-[#98E279]","borderColor":"border-[#68BC44]"},{"name":"AWS","color":"bg-[#FF9F59]","borderColor":"border-[#EF6703]"},{"name":"Docker","color":"bg-[#B8E0FF]","borderColor":"border-[#2596ED]"},{"name":"Node-RED","color":"bg-[#FF7474]","borderColor":"border-[#8F0101]"},{"name":"Maven","color":"bg-[#FF6B80]","borderColor":"border-[#CA1A33]"},{"name":"Saas","color":"bg-[#6AB8EC]","borderColor":"border-[#2275AD]"},{"name":"Kubernetes-native","color":"bg-[#D7C7F2]","borderColor":"border-[#A387D2]"},{"name":"Scala","color":"bg-[#D7C7F2]","borderColor":"border-[#A387D2]"},{"name":"Azure","color":"bg-[#4B93FF]","borderColor":"border-[#015ADF]"},{"name":"Jenkins","color":"bg-[#D7C7F2]","borderColor":"border-[#A387D2]"},{"name":"Flask","color":"bg-[#D7C7F2]","borderColor":"border-[#A387D2]"},{"name":"Nest Js","color":"bg-[#E1224E]","borderColor":"border-[#B9012b]"},{"name":"TypeScript","color":"bg-[#61d0f2]","borderColor":"border-[#40ccf7]"},{"name":"Socket.IO","color":"bg-[#61d0f2]","borderColor":"border-[#40ccf7]"},{"name":"Liquid","color":"bg-[#61d0f2]","borderColor":"border-[#40ccf7]"},{"name":"Kotlin","color":"bg-[#61d0f2]","borderColor":"border-[#40ccf7]"},{"name":"Spring Cloud Streams","color":"bg-[#61d0f2]","borderColor":"border-[#40ccf7]"},{"name":"JHipster JDL","color":"bg-[#61d0f2]","borderColor":"border-[#40ccf7]"},{"name":"Groovy","color":"bg-[#61d0f2]","borderColor":"border-[#40ccf7]"},{"name":"Markdown","color":"bg-[#61d0f2]","borderColor":"border-[#40ccf7]"},{"name":"Shell","color":"bg-[#61d0f2]","borderColor":"border-[#40ccf7]"},{"name":"WebComponents","color":"bg-[#61d0f2]","borderColor":"border-[#40ccf7]"},{"name":"Babel","color":"bg-[#61d0f2]","borderColor":"border-[#40ccf7]"},{"name":"Storybook","color":"bg-[#61d0f2]","borderColor":"border-[#40ccf7]"},{"name":"AsyncAPI Generator","color":"bg-[#61d0f2]","borderColor":"border-[#40ccf7]"},{"name":"JetBrains","color":"bg-[#61d0f2]","borderColor":"border-[#40ccf7]"},{"name":"IntelliJ IDEA","color":"bg-[#61d0f2]","borderColor":"border-[#40ccf7]"},{"name":"VSCode","color":"bg-[#61d0f2]","borderColor":"border-[#40ccf7]"},{"name":"SmartPaste","color":"bg-[#61d0f2]","borderColor":"border-[#40ccf7]"}]}
Loading

0 comments on commit 67e7911

Please sign in to comment.