Skip to content

Commit

Permalink
feat: fixed mermaid configuration for docs (#2867)
Browse files Browse the repository at this point in the history
Co-authored-by: Ansh Goyal <[email protected]>
  • Loading branch information
akshatnema and anshgoyalevil authored Apr 24, 2024
1 parent 99f9c0c commit bd230d2
Show file tree
Hide file tree
Showing 14 changed files with 305 additions and 734 deletions.
8 changes: 3 additions & 5 deletions components/MDX.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -93,10 +93,8 @@ function MermaidDiagram({ graph }: MermaidDiagramProps) {
}

try {
const svgElement = document.createElement('div');

mermaid.mermaidAPI.render(uuid(), graph, svgElement).then(() => {
setSvg(svgElement.innerHTML);
mermaid.mermaidAPI.render(uuid(), graph, (svgGraph) => {
setSvg(svgGraph);
});
} catch (e) {
setSvg(null);
Expand Down Expand Up @@ -258,7 +256,7 @@ export function getMDXComponents() {
className={`${props.className || ''} border-b border-gray-200 px-6 py-4 text-sm leading-5 tracking-tight text-gray-700`}
/>
),
pre: (props: React.HTMLProps<HTMLPreElement>) => CodeComponent(props.children as CodeComponentProps),
pre: (props: React.HTMLProps<HTMLPreElement>) => CodeComponent((props.children as React.ReactElement)?.props),
code: (props: React.HTMLProps<HTMLElement>) => (
<code
{...props}
Expand Down
3 changes: 2 additions & 1 deletion components/docs/DocsCards.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import React from 'react';

import type { Bucket } from '../data/buckets';
import { buckets } from '../data/buckets';
import Card from './Card';

Expand All @@ -9,7 +10,7 @@ import Card from './Card';
export default function DocsCards() {
return (
<div className='grid grid-cols-1 gap-4 sm:grid-cols-2' data-testid='Docs-main-div'>
{buckets.map(({ title, description, link, className, icon }) => (
{buckets.map(({ title, description, link, className, icon }: Bucket) => (
<Card key={title} title={title} description={description} link={link} className={className} Icon={icon} />
))}
</div>
Expand Down
1 change: 0 additions & 1 deletion components/helpers/applyFilter.ts
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,6 @@ interface FilterCriteria {

interface Filter {
[key: string]: string;
value: string;
}

interface FilterOption {
Expand Down
89 changes: 89 additions & 0 deletions components/illustrations/Empty.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,89 @@
import React from 'react';

interface EmptyProps {
className?: string;
}

/**
* @description The Empty component is an illustration for when there is no data to display.
*
* @param props.className Additional CSS classes for styling.
*/
export default function Empty({ className }: EmptyProps) {
return (
<svg
xmlns='http://www.w3.org/2000/svg'
version='1.1'
width='150'
height='150'
x='0'
y='0'
viewBox='0 0 512.00032 512'
xmlSpace='preserve'
className={className}
style={{
display: 'initial'
}}
>
<g>
<path
xmlns='http://www.w3.org/2000/svg'
d='m440.929688 375.699219-184.929688 101.546875-184.929688-101.546875v-203.089844l184.929688-101.546875 184.929688 101.546875zm0 0'
fill='#b3dfff'
className=''
/>
<path
xmlns='http://www.w3.org/2000/svg'
d='m71.070312 172.609375v.003906l184.929688 101.546875 184.929688-101.546875v-.003906l-184.929688-101.546875zm0 0'
fill='#ffffff'
className=''
/>
<path
xmlns='http://www.w3.org/2000/svg'
d='m71.070312 172.671875v203.027344l184.929688 101.546875.109375-.058594v-203.03125l-184.929687-101.546875zm0 0'
fill='#b3dfff'
className=''
/>
<g xmlns='http://www.w3.org/2000/svg' fill='#feda9b'>
<path
d='m440.929688 172.613281 61.070312 61.066407-184.929688 101.546874-61.070312-61.070312zm0 0'
fill='#63b3ed'
className=''
/>
<path
d='m71.070312 172.613281-61.070312 61.066407 184.929688 101.546874 61.070312-61.070312zm0 0'
fill='#63b3ed'
className=''
/>
<path
d='m440.929688 172.613281 61.070312-61.066406-184.929688-101.546875-61.070312 61.070312zm0 0'
fill='#63b3ed'
className=''
/>
<path
d='m71.070312 172.613281-61.070312-61.066406 184.929688-101.546875 61.070312 61.070312zm0 0'
fill='#63b3ed'
className=''
/>
</g>
<path
xmlns='http://www.w3.org/2000/svg'
d='m455.074219 172.613281 53.996093-53.996093c2.226563-2.222657 3.273438-5.367188 2.828126-8.480469-.441407-3.113281-2.328126-5.839844-5.085938-7.355469l-64.914062-35.644531c-4.839844-2.65625-10.917969-.886719-13.578126 3.953125-2.65625 4.84375-.890624 10.921875 3.953126 13.578125l53.234374 29.230469-46.339843 46.335937-166.667969-91.519531 46.335938-46.335938 46.839843 25.722656c4.839844 2.65625 10.921875.890626 13.578125-3.953124 2.660156-4.839844.890625-10.921876-3.953125-13.578126l-53.417969-29.335937c-3.898437-2.140625-8.742187-1.449219-11.882812 1.695313l-54 54-54-54c-3.144531-3.144532-7.988281-3.832032-11.882812-1.695313l-184.929688 101.546875c-2.757812 1.515625-4.644531 4.238281-5.085938 7.355469-.445312 3.113281.601563 6.257812 2.828126 8.480469l53.996093 53.996093-53.996093 53.992188c-2.226563 2.226562-3.273438 5.367187-2.828126 8.484375.441407 3.113281 2.328126 5.839844 5.085938 7.351562l55.882812 30.6875v102.570313c0 3.652343 1.988282 7.011719 5.1875 8.769531l184.929688 101.542969c1.5.824219 3.15625 1.234375 4.8125 1.234375s3.3125-.410156 4.8125-1.234375l184.929688-101.542969c3.199218-1.757812 5.1875-5.117188 5.1875-8.769531v-102.570313l55.882812-30.683594c2.757812-1.515624 4.644531-4.242187 5.085938-7.355468.445312-3.113282-.601563-6.257813-2.828126-8.480469zm-199.074219 90.132813-164.152344-90.136719 164.152344-90.140625 164.152344 90.140625zm-62.832031-240.367188 46.332031 46.335938-166.667969 91.519531-46.335937-46.335937zm-120.328125 162.609375 166.667968 91.519531-46.339843 46.339844-166.671875-91.519531zm358.089844 184.796875-164.929688 90.5625v-102.222656c0-5.523438-4.476562-10-10-10s-10 4.476562-10 10v102.222656l-164.929688-90.5625v-85.671875l109.046876 59.878907c1.511718.828124 3.167968 1.234374 4.808593 1.234374 2.589844 0 5.152344-1.007812 7.074219-2.929687l54-54 54 54c1.921875 1.925781 4.484375 2.929687 7.074219 2.929687 1.640625 0 3.296875-.40625 4.808593-1.234374l109.046876-59.878907zm-112.09375-46.9375-46.339844-46.34375 166.667968-91.515625 46.34375 46.335938zm0 0'
fill='#323232'
className=''
/>
<path
xmlns='http://www.w3.org/2000/svg'
d='m404.800781 68.175781c2.628907 0 5.199219-1.070312 7.070313-2.933593 1.859375-1.859376 2.929687-4.4375 2.929687-7.066407 0-2.632812-1.070312-5.210937-2.929687-7.070312-1.859375-1.863281-4.441406-2.929688-7.070313-2.929688-2.640625 0-5.210937 1.066407-7.070312 2.929688-1.871094 1.859375-2.929688 4.4375-2.929688 7.070312 0 2.628907 1.058594 5.207031 2.929688 7.066407 1.859375 1.863281 4.441406 2.933593 7.070312 2.933593zm0 0'
fill='#323232'
className=''
/>
<path
xmlns='http://www.w3.org/2000/svg'
d='m256 314.925781c-2.628906 0-5.210938 1.066407-7.070312 2.929688-1.859376 1.867187-2.929688 4.4375-2.929688 7.070312 0 2.636719 1.070312 5.207031 2.929688 7.078125 1.859374 1.859375 4.441406 2.921875 7.070312 2.921875s5.210938-1.0625 7.070312-2.921875c1.859376-1.871094 2.929688-4.441406 2.929688-7.078125 0-2.632812-1.070312-5.203125-2.929688-7.070312-1.859374-1.863281-4.441406-2.929688-7.070312-2.929688zm0 0'
fill='#323232'
/>
</g>
</svg>
);
}
112 changes: 51 additions & 61 deletions components/navigation/Filter.tsx
Original file line number Diff line number Diff line change
@@ -1,20 +1,19 @@
import type { NextRouter } from 'next/router';
import { useRouter } from 'next/router';
import { useEffect, useState } from 'react';

import Select from '../form/Select';
import { applyFilterList, onFilterApply } from '../helpers/applyFilter';

export interface Option {
value: string;
text: string;
interface Check {
name: string;
[key: string]: any;
}

export interface FilterProps {
interface FilterProps {
data: any[];
onFilter: (data: any[]) => void;
checks: { name: string; options?: Option[] }[];
className: string;
checks: Check[];
className?: string;
}

/**
Expand All @@ -26,68 +25,59 @@ export interface FilterProps {
* @param {string} [props.className] - Additional CSS classes for styling.
*/
export default function Filter({ data, onFilter, checks, className }: FilterProps) {
const router: NextRouter = useRouter();
const [filters, setFilters] = useState<{ [key: string]: Option[] }>({});
const [query, setQuery] = useState<{ [key: string]: string }>({});
const route = useRouter();
const [filters, setFilters] = useState<Record<string, any>>({});
const [routeQuery, setQuery] = useState<Record<string, any>>({});

// Set initial query and filter options when router changes
useEffect(() => {
setQuery(router.query as { [key: string]: string });
setQuery(route.query);
applyFilterList(checks, data, setFilters);
}, [router]);
}, [route]);

// Apply filter when query or data changes
useEffect(() => {
const filterWithValue = { value: JSON.stringify(query), ...query };
onFilterApply(data, onFilter, routeQuery);
}, [routeQuery]);

onFilterApply(data, onFilter, filterWithValue);
}, [query, data, onFilter]);
return checks.map((check) => {
let selected = '';

return (
<>
{checks.map((check) => {
let selected = '';
if (Object.keys(routeQuery).length) {
if (routeQuery[check.name]) {
selected = `${routeQuery[check.name]}`;
}
}
const selectOptions = [
{
value: '',
text: `Filter by ${check.name}...`
},
...(filters[check.name] || [])
];

if (Object.keys(query).length) {
if (query[check.name]) {
selected = `${query[check.name]}`;
}
}

const selectOptions: Option[] = [
{
value: '',
text: `Filter by ${check.name}...`
},
...(filters[check.name] || [])
];

return (
<Select
key={check.name}
options={selectOptions}
onChange={(e) => {
const { query: currentQuery } = router;
const newQuery = {
...currentQuery,
[check.name]: e
};
return (
<Select
key={check.name}
options={selectOptions}
onChange={(e) => {
const { query } = route;
const newQuery = {
...query
};

if (!e) {
delete newQuery[check.name];
}

const queryParams = new URLSearchParams(newQuery as { [key: string]: string }).toString();
if (e) {
newQuery[check.name] = e;
}
if (newQuery) {
const queryParams = new URLSearchParams(newQuery as { [key: string]: string }).toString();

router.push(`${router.pathname}?${queryParams}`, undefined, {
shallow: true
});
}}
selected={selected}
className={`${className} md:mr-4`}
/>
);
})}
</>
);
route.push(`${route.pathname}?${queryParams}`, undefined, {
shallow: true
});
}
}}
selected={selected}
className={`${className} md:mr-4`}
/>
);
});
}
2 changes: 1 addition & 1 deletion context/BlogContext.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,5 +4,5 @@ import type { IBlog } from '@/types/post';

export default createContext<{ post?: IBlog[number]; navItems?: IBlog }>({
post: undefined,
navItems: undefined
navItems: []
});
23 changes: 3 additions & 20 deletions next.config.mjs
Original file line number Diff line number Diff line change
Expand Up @@ -10,30 +10,16 @@ import withMDX from '@next/mdx';
* @type {import('next').NextConfig}
*/
const nextConfig = {
pageExtensions: ['tsx', 'ts', 'md'],
pageExtensions: ['tsx', 'ts', 'md', 'mdx'],
eslint: {
ignoreDuringBuilds: true
},
output: 'export',
webpack(config, { isServer, defaultLoaders }) {
webpack(config, { isServer }) {
if (!isServer) {
config.resolve.fallback.fs = false;
}

// This is the new part
config.module.rules.push({
test: /\.md$/,
use: [
defaultLoaders.babel,
{
loader: '@mdx-js/loader',
options: {
remarkPlugins: [frontmatter, gemoji, headingId, slug, images, a11yEmoji]
}
}
]
});

return config;
}
};
Expand All @@ -46,7 +32,4 @@ const mdxConfig = withMDX({
}
});

export default {
...mdxConfig,
...nextConfig
};
export default mdxConfig(nextConfig);
Loading

0 comments on commit bd230d2

Please sign in to comment.