Skip to content

Commit

Permalink
Merge pull request #56 from patelvivekdev/development
Browse files Browse the repository at this point in the history
Development
  • Loading branch information
patelvivekdev committed May 6, 2024
2 parents ea1026f + e6274e1 commit 8f45a01
Show file tree
Hide file tree
Showing 10 changed files with 178 additions and 63 deletions.
2 changes: 1 addition & 1 deletion app/blog/[slug]/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import Image from 'next/image';
import { notFound } from 'next/navigation';
import { Calendar } from 'lucide-react';

import { CustomMDX } from '@/components/mdx';
import { CustomMDX } from '@/components/mdx/mdx';
import { getBlogs } from '@/lib/get-blogs';
import { formatDate } from '@/lib/utils';
import ViewCounter from '@/app/blog/views';
Expand Down
38 changes: 32 additions & 6 deletions app/globals.css
Original file line number Diff line number Diff line change
Expand Up @@ -15,15 +15,22 @@ body {
--sh-class: #2d5e9d;
--sh-identifier: #c2cad3;
--sh-sign: #8996a3;
--sh-property: #0550ae;
--sh-entity: #249a97;
--sh-string: #007f7a;
--sh-keyword: #e02518;
--sh-comment: #a19595;
--sh-jsxliterals: #6266d1;
--sh-string: #00a99a;
--sh-property: #e25a1c;
--sh-entity: #e25a1c;
}

.dark {
--sh-class: #4c97f8;
--sh-identifier: white;
--sh-keyword: #f47067;
--sh-comment: #a19595;
--sh-string: #0fa295;
}

/* pre code {
pre code {
counter-reset: sh-line-number;
}

Expand All @@ -33,7 +40,14 @@ body {
margin-right: 24px;
text-align: right;
color: #a4a4a4;
} */
}

.prose p code .sh__line::before {
margin-right: 0px;
content: '';
}

/* remove line numbers from p > pre > code blocks */

.progress {
transform-origin: 0 50%;
Expand Down Expand Up @@ -85,6 +99,18 @@ body {
@apply px-1 py-0.5 rounded-lg;
}

.prose p code {
--sh-class: @apply text-neutral-300 dark: text-neutral-700;
--sh-identifier: @apply text-neutral-300 dark: text-neutral-700;
--sh-sign: @apply text-neutral-300 dark: text-neutral-700;
--sh-string: @apply text-neutral-300 dark: text-neutral-700;
--sh-keyword: @apply text-neutral-300 dark: text-neutral-700;
--sh-comment: @apply text-neutral-300 dark: text-neutral-700;
--sh-jsxliterals: @apply text-neutral-300 dark: text-neutral-700;
--sh-property: @apply text-neutral-300 dark: text-neutral-700;
--sh-entity: @apply text-neutral-300 dark: text-neutral-700;
}

.prose pre code {
@apply p-0;
border: initial;
Expand Down
2 changes: 1 addition & 1 deletion app/layout.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -71,12 +71,12 @@ export default function RootLayout({
<ThemeProvider attribute='class' defaultTheme='system' enableSystem={true} disableTransitionOnChange>
<Navbar />
<main>{children}</main>
<SpeedInsights />
<ScrollToTopButton />
<ThemeToggle />
<Toaster position='top-right' />
<Footer />
<Analytics />
<SpeedInsights />
</ThemeProvider>
</body>
</html>
Expand Down
2 changes: 1 addition & 1 deletion app/projects/[slug]/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import { Calendar } from 'lucide-react';
import Link from 'next/link';
import Image from 'next/image';
import { getProject, getProjects } from '@/lib/get-projects';
import { CustomMDX } from '@/components/mdx';
import { CustomMDX } from '@/components/mdx/mdx';
import { formatDate } from '@/lib/utils';
import Progress from '@/components/ui/progress';
import { Button } from '@/components/ui/button';
Expand Down
2 changes: 1 addition & 1 deletion app/snippet/[slug]/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import Image from 'next/image';
import { notFound } from 'next/navigation';
import { Calendar } from 'lucide-react';

import { CustomMDX } from '@/components/mdx';
import { CustomMDX } from '@/components/mdx/mdx';
import { getSnippets } from '@/lib/get-snippets';
import { formatDate } from '@/lib/utils';
import ViewCounter from '@/app/blog/views';
Expand Down
58 changes: 58 additions & 0 deletions components/mdx/Callout.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@
import { cn } from '@/lib/utils';
import { BadgeInfo, Lightbulb, CircleAlert, TriangleAlert, OctagonX } from 'lucide-react';

type CalloutType = 'note' | 'tip' | 'important' | 'warning' | 'caution';

interface CalloutProps {
type: CalloutType;
children: React.ReactNode;
typeColor?: string;
}

const calloutMap: Record<CalloutType, { icon: React.ReactNode; borderColor: string; typeColor: string }> = {
note: {
icon: <BadgeInfo className='mr-2 h-6 w-6 text-blue-500' />,
borderColor: 'border border-4 !border-blue-500',
typeColor: 'text-blue-500',
},
tip: {
icon: <Lightbulb className='mr-2 h-6 w-6 text-green-500' />,
borderColor: 'border border-4 !border-green-500',
typeColor: 'text-green-500',
},
important: {
icon: <CircleAlert className='mr-2 h-6 w-6 text-orange-500' />,
borderColor: 'border border-4 !border-orange-500',
typeColor: 'text-orange-500',
},
warning: {
icon: <TriangleAlert className='mr-2 h-6 w-6 text-yellow-500' />,
borderColor: 'border border-4 !border-yellow-500',
typeColor: 'text-yellow-500',
},
caution: {
icon: <OctagonX className='mr-2 h-6 w-6 text-red-500' />,
borderColor: 'border border-4 !border-red-500',
typeColor: 'text-red-500',
},
};

export function Callout({ type, children }: CalloutProps) {
const { icon, borderColor, typeColor } = calloutMap[type];

return (
<div
className={cn(
'mb-8 flex flex-col items-start rounded',
borderColor,
'bg-neutral-100 px-4 py-3 text-neutral-900 dark:bg-neutral-800 dark:text-neutral-100',
)}
>
<div className='flex items-center'>
{icon}
<div className={cn('ml-1 text-base font-bold', typeColor)}>{type.toUpperCase()}</div>
</div>
<div className='callout w-full text-base'>{children}</div>
</div>
);
}
39 changes: 39 additions & 0 deletions components/mdx/CustomLink.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
import Link from 'next/link';
import React from 'react';

function slugify(str: string) {
return str
.toString()
.toLowerCase()
.trim() // Remove whitespace from both ends of a string
.replace(/\s+/g, '-') // Replace spaces with -
.replace(/&/g, '-and-') // Replace & with 'and'
.replace(/[^\w\-]+/g, '') // Remove all non-word characters except for -
.replace(/\-\-+/g, '-'); // Replace multiple - with single -
}

export const CustomLink = ({ children, ...props }: { children: any; [x: string]: any }) => {
const href = props.href;
if (href.startsWith('/')) {
return (
<Link href={href} {...props}>
{children}
</Link>
);
}

if (href.startsWith('#')) {
return (
<a href={`#${slugify(props.href as string)}`} id={slugify(props.href as string)} className='anchor' {...props}>
{children}
</a>
);
}

return (
<a target='_blank' rel='noopener noreferrer' {...props}>
{' '}
{children}{' '}
</a>
);
};
35 changes: 35 additions & 0 deletions components/mdx/Pre.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
'use client';
import { useState, useRef } from 'react';
import { Clipboard } from 'lucide-react';
import { toast } from 'react-hot-toast';

const Pre = (props: any) => {
const textInput = useRef<any>(null);
const [copied, setCopied] = useState(false);

const onExit = () => {
setCopied(false);
};
const onCopy = () => {
setCopied(true);
navigator.clipboard.writeText(textInput?.current?.textContent);
toast.success('Copied to clipboard!', {
position: 'bottom-center',
duration: 2500,
});
setTimeout(() => {
setCopied(false);
}, 2500);
};

return (
<pre ref={textInput} onMouseLeave={onExit} className='flex flex-row justify-between gap-3'>
{props.children}
<button aria-label='Copy code' type='button' className='h-4 w-4' onClick={onCopy}>
{copied ? <Clipboard className='text-[#80d1a9]' /> : <Clipboard className='text-white' />}
</button>
</pre>
);
};

export default Pre;
44 changes: 3 additions & 41 deletions components/mdx.tsx → components/mdx/mdx.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,47 +7,9 @@ import remarkA11yEmoji from '@fec/remark-a11y-emoji';
import { MDXRemote } from 'next-mdx-remote/rsc';
import { highlight } from 'sugar-high';
import { cn } from '@/lib/utils';
import Pre from './pre';

const CustomLink = ({ children, ...props }: { children: any; [x: string]: any }) => {
const href = props.href;
if (href.startsWith('/')) {
return (
<Link href={href} {...props}>
{children}
</Link>
);
}

if (href.startsWith('#')) {
return (
<a href={`#${slugify(props.href as string)}`} id={slugify(props.href as string)} className='anchor' {...props}>
{children}
</a>
);
}

return (
<a target='_blank' rel='noopener noreferrer' {...props}>
{' '}
{children}{' '}
</a>
);
};

function Callout(props: any) {
return (
<div
className={cn(
'mb-8 flex items-center rounded border border-neutral-200 bg-neutral-50 p-1 px-4 py-3 text-sm text-neutral-900 dark:border-neutral-700 dark:bg-neutral-800 dark:text-neutral-100',
props.className,
)}
>
<div className='mr-4 flex text-base w-4 h-4 items-center'>{props.emoji}</div>
<div className='callout w-full text-base'>{props.children}</div>
</div>
);
}
import Pre from './Pre';
import { Callout } from './Callout';
import { CustomLink } from './CustomLink';

function Code({ children, ...props }: { children: any; [x: string]: any }) {
let codeHTML = highlight(children);
Expand Down
19 changes: 7 additions & 12 deletions content/blogs/server-actions.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -330,11 +330,11 @@ With session we will conditionally render different button.
You can check that now our authentication system is working, we are able to login with github as well google.
<Callout emoji='ℹ️'>
<span>In development if your Oauth is not redirect back to application add `AUTH_REDIRECT_PROXY_URL` in env.</span>
<Callout type='note'>
In development if your Oauth is not redirect back to application add `AUTH_REDIRECT_PROXY_URL` in env.
</Callout>
<Callout emoji='❓'>
<Callout type='tip'>
If you find any difficulty or have some error you can react out to [me](/contact) or check my source code.
</Callout>
Expand Down Expand Up @@ -457,9 +457,7 @@ export function SubmitButton({

```
<Callout emoji='⚠️' className='!bg-yellow-100 !text-black font-bold'>
INFO: This hook might change in new version of react.
</Callout>
<Callout type='important'>This hook might change in new version of react.</Callout>
### 3.Create actions.ts
Expand Down Expand Up @@ -517,12 +515,9 @@ We will add this action to our form with the help of `useFormState`. It is new h
> As per react `useFormState` is a Hook that allows you to update state based on the result of a form action.
<Callout emoji='⚠️' className='!bg-yellow-100 !text-black font-bold'>
INFO: As of now React is changing this hook. If you are interested check this github{' '}
<a className='text-black' href='https://github.com/facebook/react/pull/28491'>
discussion
</a>
.
<Callout type='caution'>
As of now React is changing this hook. If you are interested check this github
[discussion](https://github.com/facebook/react/pull/28491)
</Callout>
This means that we will get error message or success message along with boolean to from server action.
Expand Down

1 comment on commit 8f45a01

@vercel
Copy link

@vercel vercel bot commented on 8f45a01 May 6, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please sign in to comment.