feat: added utility mdx components (#60)

* build: configurations for build

* style: added icons

* feat: added mdx utility components

* style: added an dummy image

* feat: updated mdx plugin next links

* refactor: refactored code base

* style: added default styles

* style: improved mdx components

* feat: added social cards

* feat: added mdx card components

* style: added icons

* feat: added utility link component

* feat: declared shared interface for social cards

* docs: updated temporary data for showcasing

* fix: fixed deployment issue

docs/guides/installation/installation.mdx

@@ -29,9 +29,9 @@ yarn
 - Make .env.local file in root directory with these variables
   > This step is optional, Do this step if you want to run complete application with database support
 
-```jsx .env.local
-MONGO_URI = 'YOUR MONGODB CONNECTION STRING GOES HERE';
-GITHUB_TOKEN = 'YOUR GITHUB TOKEN GOES HERE';
+```bash .env.local
+MONGO_URI=<YOUR MONGODB CONNECTION STRING GOES HERE>
+GITHUB_TOKEN=<YOUR GITHUB TOKEN GOES HERE>
 ```
 
 - Get mongodb connection string here: [MONGODB DOCS][mongodb-docs]
@@ -45,7 +45,37 @@ yarn dev
 
 - Every time you start making changes to your forked repo make sure it's in sync with the original repo
 
-<ResponsiveImg alt="image" src="/images/gradbg.jpg" width={1280} height={720} />
+<NextImage alt="image" src="/images/gradbg.jpg" />
+
+<Tip>
+  Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis, quas!
+</Tip>
+
+<Alert>
+  Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis, quas!
+</Alert>
+
+> Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis, quas!
+
+<Grid>
+  <Github
+    name="Sagar Bera"
+    username="sboy99"
+    activeHere
+    href="https://github.com/sboy99"
+  >
+    dolor sit amet consectetur adipisicing elit. Lorem ipsum dolor sit amet
+    consectetur adipisicing elit. Nostrum odio ab asperiores!
+  </Github>
+
+  <Twitter name="Aadarsh Thakur" username="sboy99" href="Github Star">
+    dolor sit amet consectetur adipisicing elit.
+  </Twitter>
+
+  <LinkedIn name="Thakur" username="sboy99" href="Github Star">
+    dolor sit amet consectetur adipisicing elit.
+  </LinkedIn>
+</Grid>
 
 [fork-link]: https://github.com/pbclife/gitopener.vercel.app/fork
 [yarn-website]: https://classic.yarnpkg.com/lang/en/docs/install/#debian-stable

src/components/icons/Alert.tsx

@@ -0,0 +1,25 @@
+import { ComponentProps } from 'react';
+
+type Props = ComponentProps<'svg'>;
+
+const AlertIcon = (props: Props) => {
+  return (
+    <svg
+      role="img"
+      viewBox="0 0 24 24"
+      {...props}
+      fill="currentColor"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <title>Light Bulb</title>
+      <path d="M13 17.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0Zm-.25-8.25a.75.75 0 0 0-1.5 0v4.5a.75.75 0 0 0 1.5 0v-4.5Z" />
+      <path
+        fillRule="evenodd"
+        d="M9.836 3.244c.963-1.665 3.365-1.665 4.328 0l8.967 15.504c.963 1.667-.24 3.752-2.165 3.752H3.034c-1.926 0-3.128-2.085-2.165-3.752L9.836 3.244Zm3.03.751a1 1 0 0 0-1.732 0L2.168 19.499A1 1 0 0 0 3.034 21h17.932a1 1 0 0 0 .866-1.5L12.866 3.994Z"
+        clipRule="evenodd"
+      />
+    </svg>
+  );
+};
+
+export default AlertIcon;

src/components/icons/Bulb.tsx

@@ -0,0 +1,20 @@
+import { ComponentProps } from 'react';
+
+type Props = ComponentProps<'svg'>;
+
+const BulbIcon = (props: Props) => {
+  return (
+    <svg
+      role="img"
+      viewBox="0 0 24 24"
+      {...props}
+      fill="currentColor"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <title>Light Bulb</title>
+      <path d="M12 2.5c-3.81 0-6.5 2.743-6.5 6.119 0 1.536.632 2.572 1.425 3.56.172.215.347.422.527.635l.096.112c.21.25.427.508.63.774.404.531.783 1.128.995 1.834a.75.75 0 0 1-1.436.432c-.138-.46-.397-.89-.753-1.357-.188-.243-.382-.48-.582-.714l-.092-.11c-.18-.212-.37-.436-.555-.667C4.87 12.016 4 10.651 4 8.618 4 4.363 7.415 1 12 1s8 3.362 8 7.619c0 2.032-.87 3.397-1.755 4.5-.185.23-.375.454-.555.667l-.092.109c-.21.248-.405.481-.582.714-.356.467-.615.898-.753 1.357a.75.75 0 1 1-1.437-.432c.213-.706.592-1.303.997-1.834.202-.266.419-.524.63-.774l.095-.112c.18-.213.355-.42.527-.634.793-.99 1.425-2.025 1.425-3.561C18.5 5.243 15.81 2.5 12 2.5ZM9.5 21.75a.75.75 0 0 1 .75-.75h3.5a.75.75 0 1 1 0 1.5h-3.5a.75.75 0 0 1-.75-.75ZM8.75 18a.75.75 0 1 0 0 1.5h6.5a.75.75 0 1 0 0-1.5h-6.5Z" />
+    </svg>
+  );
+};
+
+export default BulbIcon;

src/components/icons/LinkedIn.tsx

@@ -0,0 +1,20 @@
+import { ComponentProps } from 'react';
+
+type Props = ComponentProps<'svg'>;
+
+const TwitterIcon = (props: Props) => {
+  return (
+    <svg
+      role="img"
+      viewBox="0 0 30 30"
+      {...props}
+      fill="currentColor"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <title>Twitter</title>
+      <path d="M9,25H4V10h5V25z M6.501,8C5.118,8,4,6.879,4,5.499S5.12,3,6.501,3C7.879,3,9,4.121,9,5.499C9,6.879,7.879,8,6.501,8z M27,25h-4.807v-7.3c0-1.741-0.033-3.98-2.499-3.98c-2.503,0-2.888,1.896-2.888,3.854V25H12V9.989h4.614v2.051h0.065 c0.642-1.18,2.211-2.424,4.551-2.424c4.87,0,5.77,3.109,5.77,7.151C27,16.767,27,25,27,25z"></path>
+    </svg>
+  );
+};
+
+export default TwitterIcon;

src/components/icons/Quote.tsx

@@ -0,0 +1,25 @@
+import { ComponentProps } from 'react';
+
+type Props = ComponentProps<'svg'>;
+
+const QuoteIcon = (props: Props) => {
+  return (
+    <svg
+      role="img"
+      viewBox="0 0 24 24"
+      {...props}
+      fill="currentColor"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <title>Quote</title>
+      <circle cx="18.5" cy="14" r="5.5"></circle>
+      <path d="M15.797,4.669C14.456,7.232,13,10.762,13,14h5V5.201C18,3.977,16.364,3.585,15.797,4.669z"></path>
+      <path
+        d="M5.5,8.5C5.331,8.5,5.165,8.51,5,8.525V5.201c0-1.224-1.636-1.616-2.203-0.532c-1.262,2.412-2.61,5.677-2.766,8.753 C0.011,13.612,0,13.805,0,14c0,3.038,2.462,5.5,5.5,5.5S11,17.038,11,14S8.538,8.5,5.5,8.5z"
+        opacity=".35"
+      ></path>{' '}
+    </svg>
+  );
+};
+
+export default QuoteIcon;

src/components/icons/Twitter.tsx

@@ -0,0 +1,20 @@
+import { ComponentProps } from 'react';
+
+type Props = ComponentProps<'svg'>;
+
+const TwitterIcon = (props: Props) => {
+  return (
+    <svg
+      role="img"
+      viewBox="0 0 30 30"
+      {...props}
+      fill="currentColor"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <title>Twitter</title>
+      <path d="M28,6.937c-0.957,0.425-1.985,0.711-3.064,0.84c1.102-0.66,1.947-1.705,2.345-2.951c-1.03,0.611-2.172,1.055-3.388,1.295 c-0.973-1.037-2.359-1.685-3.893-1.685c-2.946,0-5.334,2.389-5.334,5.334c0,0.418,0.048,0.826,0.138,1.215 c-4.433-0.222-8.363-2.346-10.995-5.574C3.351,6.199,3.088,7.115,3.088,8.094c0,1.85,0.941,3.483,2.372,4.439 c-0.874-0.028-1.697-0.268-2.416-0.667c0,0.023,0,0.044,0,0.067c0,2.585,1.838,4.741,4.279,5.23 c-0.447,0.122-0.919,0.187-1.406,0.187c-0.343,0-0.678-0.034-1.003-0.095c0.679,2.119,2.649,3.662,4.983,3.705 c-1.825,1.431-4.125,2.284-6.625,2.284c-0.43,0-0.855-0.025-1.273-0.075c2.361,1.513,5.164,2.396,8.177,2.396 c9.812,0,15.176-8.128,15.176-15.177c0-0.231-0.005-0.461-0.015-0.69C26.38,8.945,27.285,8.006,28,6.937z"></path>
+    </svg>
+  );
+};
+
+export default TwitterIcon;

src/components/mdxcomponents/Alert.tsx

@@ -0,0 +1,24 @@
+import AlertIcon from '@icons/Alert';
+import type { FC, ReactNode } from 'react';
+
+type AlertProps = {
+  children: ReactNode;
+};
+
+const Alert: FC<AlertProps> = ({ children }) => {
+  return (
+    <div
+      aria-label="Alert"
+      className={`mb-4 overflow-hidden rounded-xl border border-amber-500/20 bg-amber-50/50 px-5 dark:border-amber-500/30 dark:bg-amber-500/10`}
+    >
+      <div className="flex gap-x-3 prose-p:text-sm prose-p:text-amber-900 prose-a:border-amber-500 prose-a:text-amber-600 dark:prose-p:text-amber-200">
+        <span className="my-4">
+          <AlertIcon className="h-7 w-7 text-amber-600 dark:text-amber-400/80" />
+        </span>
+        {children}
+      </div>
+    </div>
+  );
+};
+
+export default Alert;

src/components/mdxcomponents/Anchor.tsx

@@ -3,7 +3,9 @@ import type { ComponentProps, FC } from 'react';
 type AnchorProps = ComponentProps<'a'>;
 
 const Anchor: FC<AnchorProps> = ({ className, ...props }) => {
-  return <a className={`text-inherit ${className || ``}`} {...props} />;
+  return (
+    <a className={`border-accent text-inherit ${className || ``}`} {...props} />
+  );
 };
 
 export default Anchor;

src/components/mdxcomponents/BlockQuote.tsx

@@ -1,21 +1,22 @@
-import { LightBulbIcon } from '@heroicons/react/24/solid';
+import QuoteIcon from '@icons/Quote';
 import type { ComponentProps, FC } from 'react';
 
 type BlockQuoteProps = ComponentProps<'blockquote'>;
 
 const BlockQuote: FC<BlockQuoteProps> = ({ className, children, ...props }) => {
   return (
     <blockquote
-      className={`-ml-[1.75em] rounded-md border border-accent bg-accent/10 p-4 prose-p:text-base prose-p:font-medium prose-p:not-italic prose-p:before:hidden prose-p:after:hidden prose-a:text-accent ${
+      className={`mb-4 overflow-hidden border-sky-500/20 bg-sky-50/50 not-italic prose-p:before:hidden prose-p:after:hidden dark:border-sky-500/30 dark:bg-sky-500/10 ${
         className || ``
       }`}
       {...props}
     >
-      <span className="my-0 flex items-center gap-x-2 text-xl font-semibold not-italic text-accent">
-        <LightBulbIcon className="h-6 w-6 " />
-        Note
-      </span>
-      {children}
+      <div className="flex gap-x-3 prose-p:text-sm prose-p:font-normal prose-p:text-sky-900 prose-a:border-sky-500 prose-a:text-sky-600 dark:prose-p:text-sky-200">
+        <span className="my-4">
+          <QuoteIcon className="h-7 w-7 text-sky-600 dark:text-sky-400/80" />
+        </span>
+        {children}
+      </div>
     </blockquote>
   );
 };

src/components/mdxcomponents/Card.tsx

@@ -0,0 +1,62 @@
+import LinkComp from '@utilities/LinkComp';
+import type { ComponentProps, FC, ReactNode } from 'react';
+
+type CardProps = {
+  isActive?: boolean;
+  children?: ReactNode;
+  Icon?: FC<ComponentProps<'svg'>>;
+  subTitle?: string;
+  title?: string;
+  href?: string;
+};
+
+const Card: FC<CardProps> = ({
+  children,
+  isActive = false,
+  Icon,
+  title,
+  subTitle,
+  href,
+}) => {
+  return (
+    <LinkComp href={href}>
+      <div
+        className={`not-prose relative h-fit space-y-2 rounded-xl border p-4 text-base font-normal text-skin-base hover:border-accent dark:hover:border-accent ${
+          isActive
+            ? `border-purple-600/30 dark:border-purple-600/50 `
+            : `border-skin-base`
+        }`}
+      >
+        {/* icon */}
+        {Icon && (
+          <Icon
+            className={`h-12 w-12 ${
+              isActive ? `text-purple-600 dark:text-purple-500` : `text-accent`
+            }`}
+          />
+        )}
+        {/* typography */}
+        <div className="mt-4">
+          {/* title */}
+          <h3 className="flex flex-col -space-y-1 text-xl font-semibold">
+            {title}
+            {subTitle && (
+              <span className="flex items-center gap-x-2 text-sm text-skin-muted">
+                {subTitle}
+                {isActive && (
+                  <span className="rounded-md bg-purple-50 px-2 py-1 text-xs capitalize text-purple-600 dark:bg-purple-600/10 dark:text-purple-200 ">
+                    Mostly Active
+                  </span>
+                )}
+              </span>
+            )}
+          </h3>
+          {/* desc */}
+          <div className="mt-4 text-skin-muted/90">{children}</div>
+        </div>
+      </div>
+    </LinkComp>
+  );
+};
+
+export default Card;

src/components/mdxcomponents/Grid.tsx

@@ -0,0 +1,17 @@
+import type { FC, ReactNode } from 'react';
+
+type GridProps = {
+  children: ReactNode;
+};
+
+const Grid: FC<GridProps> = ({ children }) => {
+  return (
+    <div
+      className={` prose grid grid-cols-1 gap-4 prose-a:border-b-0 md:grid-cols-2 `}
+    >
+      {children}
+    </div>
+  );
+};
+
+export default Grid;

src/components/mdxcomponents/ResponsiveImage.tsx → src/components/mdxcomponents/NextImage.tsx

@@ -4,16 +4,14 @@ import type { FC } from 'react';
 const ResponsiveImg: FC<{
   alt: string;
   src: string;
-  width: number;
-  height: number;
-}> = ({ alt, src, height, width }) => {
+}> = ({ alt, src }) => {
   return (
     <Image
       alt={alt}
       src={src}
-      width={width}
-      height={height}
-      className="mb-16 h-64 w-full rounded-md object-cover object-center"
+      width={1280}
+      height={720}
+      className="mb-16 aspect-video w-full rounded-md object-cover object-center"
     />
   );
 };

src/components/mdxcomponents/Tip.tsx

@@ -0,0 +1,24 @@
+import BulbIcon from '@icons/Bulb';
+import type { FC, ReactNode } from 'react';
+
+type TipProps = {
+  children: ReactNode;
+};
+
+const Tip: FC<TipProps> = ({ children }) => {
+  return (
+    <div
+      aria-label="Tip"
+      className={`mb-4 overflow-hidden rounded-xl border border-teal-500/20 bg-teal-50/50 px-5  dark:border-teal-500/30 dark:bg-teal-500/10`}
+    >
+      <div className="flex gap-x-3 prose-p:text-sm prose-p:text-teal-900 prose-a:border-teal-500 prose-a:text-teal-600 dark:prose-p:text-teal-200">
+        <span className="my-4">
+          <BulbIcon className="h-7 w-7 text-teal-600 dark:text-teal-400/80" />
+        </span>
+        {children}
+      </div>
+    </div>
+  );
+};
+
+export default Tip;