{meta["og:title"]}

16 |

17 |

18 |

19 |

20 |

21 | OpenGraph 22 |

23 |

24 | Open Graph tags that are you using in your site 25 |

26 |

27 | 28 | {/* Form */} 29 |

30 |

33 | Title 34 |: 36 | { 39 | setMeta({ 40 | ...meta, 41 | title: e.target.value, 42 | "og:title": e.target.value, 43 | }); 44 | }} 45 | placeholder="Title" 46 | /> 47 |
48 |
49 | {meta?.title?.length} 50 |
51 |
52 | Recommended length: 60 characters 53 |
54 |
55 |
59 | Description 60 |: 62 | { 66 | setMeta({ 67 | ...meta, 68 | description: e.target.value, 69 | "og:description": e.target.value, 70 | "twitter:description": e.target.value, 71 | }); 72 | }} 73 | /> 74 | 75 | <div className="pt-2"> 76 | <div className="text-xs text-gray-400 float-right"> 77 | {meta?.description?.length} 78 | </div> 79 | <div className="text-xs text-gray-400"> 80 | <b>Recommended length:</b> 150 - 160 characters 81 | </div> 82 | </div> 83 | </dd> 84 | </div> 85 | <div className="bg-gray-50 px-4 py-5 flex flex-col sm:flex-row sm:px-6 gap-2 sm:gap-4 sm:items-start"> 86 | <dt className="text-sm font-medium text-gray-500 flex items-center w-20 pt-2"> 87 | Image 88 | </dt> 89 | <dd className="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2 flex-1 "> 90 | <Input 91 | defaultValue={meta["og:image"]} 92 | className="w-full" 93 | onChange={(e) => { 94 | setMeta({ 95 | ...meta, 96 | "og:image": e.target.value, 97 | "twitter:image": e.target.value, 98 | }); 99 | }} 100 | placeholder="Image Url" 101 | /> 102 | <div className="text-xs text-gray-400 pt-2"> 103 | <b>Recommended dimension:</b> 1200 x 630 pixels 104 | </div> 105 | </dd> 106 | </div> 107 | </dl> 108 | </div> 109 | </div> 110 | </div> 111 | 112 | <CodeBlock meta={meta} /> 113 | </div> 114 | </div> 115 | ); 116 | } 117 | -------------------------------------------------------------------------------- /src/app/(component)/pattern.tsx: -------------------------------------------------------------------------------- 1 | export default function Pattern() { 2 | return ( 3 | <div className="absolute inset-x-0 top-0 h-96 rotate-180 text-gray-500/20 opacity-50 [mask-image:linear-gradient(to_bottom,transparent,white)] z-0"> 4 | <svg 5 | className="absolute inset-0 h-full w-full" 6 | xmlns="http://www.w3.org/2000/svg" 7 | > 8 | <defs> 9 | <pattern 10 | id="grid-pattern" 11 | width="32" 12 | height="32" 13 | patternUnits="userSpaceOnUse" 14 | x="50%" 15 | y="100%" 16 | patternTransform="translate(0 -1)" 17 | > 18 | <path d="M0 32V.5H32" fill="none" stroke="currentColor"></path> 19 | </pattern> 20 | </defs> 21 | <rect width="100%" height="100%" fill="url(#grid-pattern)"></rect> 22 | </svg> 23 | </div> 24 | ); 25 | } 26 | 27 | export function Pattern2({ children }: { children?: React.ReactNode }) { 28 | return ( 29 | <div className="relative overflow-hidden"> 30 | <div className="pointer-events-none"> 31 | <div className="absolute inset-0 rounded-2xl transition duration-300 [mask-image:linear-gradient(white,transparent)] group-hover:opacity-50"> 32 | <svg 33 | aria-hidden="true" 34 | className=" absolute inset-y-[-20%] h-[160%] w-full fill-black/[0.03] stroke-black/5" 35 | > 36 | <defs> 37 | <pattern 38 | id=":R5ihdcqla:" 39 | width="72" 40 | height="56" 41 | patternUnits="userSpaceOnUse" 42 | x="50%" 43 | y="22" 44 | > 45 | <path d="M.5 56V.5H72" fill="none"></path> 46 | </pattern> 47 | </defs> 48 | <rect 49 | width="100%" 50 | height="100%" 51 | strokeWidth="0" 52 | fill="url(#:R5ihdcqla:)" 53 | ></rect> 54 | <svg x="50%" y="22" className="overflow-visible"> 55 | <rect strokeWidth="0" width="73" height="57" x="0" y="56"></rect> 56 | </svg> 57 | <svg x="7.2%" y="79" className="overflow-visible"> 58 | <rect strokeWidth="0" width="73" height="57" x="0" y="56"></rect> 59 | </svg> 60 | 61 | <svg x="20%" y="190" className="overflow-visible"> 62 | <rect strokeWidth="0" width="73" height="57" x="0" y="56"></rect> 63 | </svg> 64 | <svg x="80%" y="190" className="overflow-visible"> 65 | <rect strokeWidth="0" width="73" height="57" x="0" y="56"></rect> 66 | </svg> 67 | </svg> 68 | </div> 69 | </div> 70 | <div className=" w-full">{children}</div> 71 | </div> 72 | ); 73 | } 74 | -------------------------------------------------------------------------------- /src/app/(component)/preview-list.tsx: -------------------------------------------------------------------------------- 1 | import { Meta } from "@/lib/type/meta.type"; 2 | import { LinkMetaCard } from "./link-meta-card"; 3 | 4 | export default function PreviewList({ meta }: { meta?: Meta }) { 5 | return ( 6 | <div className=" border p-4 rounded-md w-full"> 7 | <div className="pb-4"> 8 | <div className="font-bold">Preview</div> 9 | <p className="text-xs text-muted-foreground"> 10 | How your website is displayed on search engines & social media. 11 | </p> 12 | </div> 13 | <div className="flex flex-col gap-8 justify-center justify-items-center max-w-[520px]"> 14 | <Card name="Google" /> 15 | <Card name="Facebook" /> 16 | <Card name="Twitter" /> 17 | <Card name="Linkedin" /> 18 | </div> 19 | </div> 20 | ); 21 | 22 | function Card({ name }: { name: string }) { 23 | return ( 24 | <div className="flex flex-col gap-2 lg:w-full"> 25 | <h6 className="text-muted-foreground">{name}</h6> 26 | <LinkMetaCard 27 | map={meta!} 28 | variant={name.toLowerCase() as any} 29 | type="large" 30 | className="max-w-[520px]" 31 | /> 32 | </div> 33 | ); 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /src/app/app/layout.tsx: -------------------------------------------------------------------------------- 1 | import "../globals.css"; 2 | import type { Metadata } from "next"; 3 | import { Inter } from "next/font/google"; 4 | 5 | const inter = Inter({ subsets: ["latin"] }); 6 | 7 | export const metadata: Metadata = { 8 | title: "Meta Toolkit", 9 | description: "Preview how your webpage will look on social media", 10 | }; 11 | 12 | export default function RootLayout({ 13 | children, 14 | }: { 15 | children: React.ReactNode; 16 | }) { 17 | return ( 18 | <html lang="en"> 19 | <body className={inter.className}>{children}</body> 20 | </html> 21 | ); 22 | } 23 | -------------------------------------------------------------------------------- /src/app/app/page.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | import { Button } from "@/components/ui/button"; 3 | import { Input } from "@/components/ui/input"; 4 | import { Skeleton } from "@/components/ui/skeleton"; 5 | import { useMeta } from "@/lib/hooks/use-meta"; 6 | import { Meta } from "@/lib/type/meta.type"; 7 | import Validator from "@/lib/validator"; 8 | import { cx } from "class-variance-authority"; 9 | import React, { useEffect, useState } from "react"; 10 | import Features from "../(component)/features.block"; 11 | import Footer from "../(component)/footer"; 12 | import OGForm from "../(component)/og-form"; 13 | import Pattern from "../(component)/pattern"; 14 | import PreviewList from "../(component)/preview-list"; 15 | 16 | export default function App() { 17 | const [meta, setMeta] = useState<Meta>(); 18 | const [loading, setLoading] = useState(false); 19 | const [url, setUrl] = useState<string | undefined>(); 20 | 21 | useEffect(() => { 22 | if (window) { 23 | const query = new URLSearchParams(window.location.search); 24 | const url = query.get("url"); 25 | if (url) { 26 | setUrl(url); 27 | } 28 | } 29 | }, []); 30 | 31 | React.useEffect(() => { 32 | if (url) { 33 | setLoading(true); 34 | getMetaMap(url)?.then((data: Meta | undefined) => { 35 | console.log(data); 36 | setLoading(false); 37 | if (!Validator.hasValue(data)) { 38 | setMeta({} as Meta); 39 | return; 40 | } 41 | setMeta(data!); 42 | }); 43 | } else { 44 | setMeta(undefined); 45 | } 46 | // eslint-disable-next-line react-hooks/exhaustive-deps 47 | }, [url]); 48 | 49 | const { getMetaMap } = useMeta(); 50 | return ( 51 | <section className="flex flex-col mx-auto bg-gradient-to-b from-white via-gray-50/90 to-gray-50"> 52 | <Pattern /> 53 | {/* Input Bar */} 54 | <div className="pb-10 z-0 px-4"> 55 | <div className="flex flex-col gap-8 max-w-lg lg:max-w-3xl mx-auto w-full py-8 sm:py-12 lg:py-8 "> 56 | <div className="lg:text-center sm:py-8"> 57 | <p className=" mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl text-center"> 58 | We handle everything for you 59 | </p> 60 | <h3 className="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto text-center"> 61 | See what lies beyond the surface of a link, before you share it 62 | with others through our powerful link previews. 63 | </h3> 64 | </div> 65 | <form 66 | onSubmit={(e) => { 67 | e.preventDefault(); 68 | // @ts-ignore 69 | console.log(e.target[0].value); 70 | // @ts-ignore 71 | const ll = e.target[0].value; 72 | if (ll) { 73 | setLoading(true); 74 | // Update url 75 | window.history.pushState({}, "", `?url=${ll}`); 76 | getMetaMap(ll)?.then((data: Meta | undefined) => { 77 | console.log(data); 78 | setLoading(false); 79 | if (!Validator.hasValue(data)) { 80 | setMeta({} as Meta); 81 | return; 82 | } 83 | setMeta(data!); 84 | }); 85 | } else { 86 | console.log("no url", ll); 87 | } 88 | }} 89 | className="flex items-center gap-4" 90 | > 91 | <Input 92 | defaultValue={url ?? ""} 93 | required 94 | type="url" 95 | className="bg-white" 96 | placeholder="Enter your URL" 97 | /> 98 | <Button variant="default" type="submit"> 99 | Preview 100 | </Button> 101 | </form> 102 | </div> 103 | </div> 104 | 105 | <div className={cx(" mx-auto w-full ")}> 106 | {loading ? ( 107 | <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 justify-items-center pb-40 px-4"> 108 | <Skeleton className="w-full h-[620px] rounded-sm " /> 109 | <Skeleton className="w-full h-[620px] rounded-sm " /> 110 | <Skeleton className="w-full h-[620px] rounded-sm " /> 111 | </div> 112 | ) : !meta ? ( 113 | <Features /> 114 | ) : ( 115 | <div className="grid md:grid-cols-2 xl:grid-cols-[420px_minmax(520px,_1fr)_520px] gap-4 px-4 justify-items-center 2xl:px-10 item-start pb-20 py-8 "> 116 | <OGForm meta={meta} setMeta={setMeta} /> 117 | <PreviewList meta={meta} /> 118 | </div> 119 | )} 120 | </div> 121 | 122 | <Footer /> 123 | </section> 124 | ); 125 | } 126 | -------------------------------------------------------------------------------- /src/app/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TheAlphamerc/meta-toolkit/29ae2e4fea30087df81b2ae935cc8176b3f91ad6/src/app/favicon.ico -------------------------------------------------------------------------------- /src/app/globals.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | 5 | @layer base { 6 | :root { 7 | --background: 0 0% 100%; 8 | --foreground: 222.2 84% 4.9%; 9 | 10 | --card: 0 0% 100%; 11 | --card-foreground: 222.2 84% 4.9%; 12 | 13 | --popover: 0 0% 100%; 14 | --popover-foreground: 222.2 84% 4.9%; 15 | 16 | --primary: 222.2 47.4% 11.2%; 17 | --primary-foreground: 210 40% 98%; 18 | 19 | --secondary: 210 40% 96.1%; 20 | --secondary-foreground: 222.2 47.4% 11.2%; 21 | 22 | --muted: 210 40% 96.1%; 23 | --muted-foreground: 215.4 16.3% 46.9%; 24 | 25 | --accent: 210 40% 96.1%; 26 | --accent-foreground: 222.2 47.4% 11.2%; 27 | 28 | --destructive: 0 84.2% 60.2%; 29 | --destructive-foreground: 210 40% 98%; 30 | 31 | --border: 214.3 31.8% 91.4%; 32 | --input: 214.3 31.8% 91.4%; 33 | --ring: 222.2 84% 4.9%; 34 | 35 | --radius: 0.5rem; 36 | } 37 | 38 | .dark { 39 | --background: 222.2 84% 4.9%; 40 | --foreground: 210 40% 98%; 41 | 42 | --card: 222.2 84% 4.9%; 43 | --card-foreground: 210 40% 98%; 44 | 45 | --popover: 222.2 84% 4.9%; 46 | --popover-foreground: 210 40% 98%; 47 | 48 | --primary: 210 40% 98%; 49 | --primary-foreground: 222.2 47.4% 11.2%; 50 | 51 | --secondary: 217.2 32.6% 17.5%; 52 | --secondary-foreground: 210 40% 98%; 53 | 54 | --muted: 217.2 32.6% 17.5%; 55 | --muted-foreground: 215 20.2% 65.1%; 56 | 57 | --accent: 217.2 32.6% 17.5%; 58 | --accent-foreground: 210 40% 98%; 59 | 60 | --destructive: 0 62.8% 30.6%; 61 | --destructive-foreground: 210 40% 98%; 62 | 63 | --border: 217.2 32.6% 17.5%; 64 | --input: 217.2 32.6% 17.5%; 65 | --ring: 212.7 26.8% 83.9%; 66 | } 67 | } 68 | 69 | @layer base { 70 | * { 71 | @apply border-border; 72 | } 73 | body { 74 | @apply bg-background text-foreground; 75 | } 76 | } 77 | -------------------------------------------------------------------------------- /src/app/layout.tsx: -------------------------------------------------------------------------------- 1 | import "./globals.css"; 2 | import type { Metadata } from "next"; 3 | import { Inter } from "next/font/google"; 4 | import GTagScript from "./(component)/gtag-script"; 5 | 6 | const inter = Inter({ subsets: ["latin"] }); 7 | const title = 8 | "Meta Toolkit — Preview how your webpage will look on social media"; 9 | const description = 10 | "With Meta Toolkit you can preview how your webpage will look on Twitter, Facebook, Twitter, Linkedin and more!"; 11 | const url = new URL("https://meta-toolkit.vercel.app"); 12 | 13 | export const metadata: Metadata = { 14 | title: title, 15 | description: description, 16 | openGraph: { 17 | title: title, 18 | description: description, 19 | url: url.href, 20 | type: "website", 21 | siteName: "Meta Toolkit", 22 | }, 23 | twitter: { 24 | title: title, 25 | description: description, 26 | card: "summary_large_image", 27 | }, 28 | applicationName: "Meta Toolkit", 29 | authors: [ 30 | { 31 | name: "Sonu Sharma", 32 | url: "https://twitter.com/thealphamerc", 33 | }, 34 | ], 35 | colorScheme: "light", 36 | abstract: "Preview how your webpage will look on social media", 37 | keywords: ["meta", "preview", "social media", "twitter", "facebook"], 38 | themeColor: "#ffffff", 39 | }; 40 | 41 | export default function RootLayout({ 42 | children, 43 | }: { 44 | children: React.ReactNode; 45 | }) { 46 | return ( 47 | <html lang="en"> 48 | <GTagScript /> 49 | <body className={inter.className}>{children}</body> 50 | </html> 51 | ); 52 | } 53 | -------------------------------------------------------------------------------- /src/app/opengraph-image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TheAlphamerc/meta-toolkit/29ae2e4fea30087df81b2ae935cc8176b3f91ad6/src/app/opengraph-image.png -------------------------------------------------------------------------------- /src/app/page.tsx: -------------------------------------------------------------------------------- 1 | import { NavbarLayout } from "@/components/layout/appbar.layout"; 2 | import Image from "next/image"; 3 | import Link from "next/link"; 4 | import App from "./app/page"; 5 | 6 | export default function Home() { 7 | return ( 8 | <main className=""> 9 | <NavbarLayout> 10 | <Link className="flex items-center gap-2" href={"/"}> 11 | <Image src="/assets/logo.png" alt="logo" width={30} height={30} /> 12 | <h3 className="text-2xl font-semibold tracking-tight "> 13 | Meta Toolkit 14 | </h3> 15 | </Link> 16 | </NavbarLayout> 17 | <App /> 18 | </main> 19 | ); 20 | } 21 | -------------------------------------------------------------------------------- /src/app/twitter-image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TheAlphamerc/meta-toolkit/29ae2e4fea30087df81b2ae935cc8176b3f91ad6/src/app/twitter-image.png -------------------------------------------------------------------------------- /src/components/layout/appbar.layout.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | interface NavbarLayoutProps { 4 | children: React.ReactNode; 5 | } 6 | 7 | /** 8 | * NavbarLayout is a layout component that wraps navbar and content 9 | * @param children 10 | */ 11 | 12 | export const NavbarLayout = ({ children }: NavbarLayoutProps) => { 13 | return ( 14 | <div className="font-medium theme-border border-b sticky top-0 z-10"> 15 | <div className="absolute w-full inset-0 h-14 top-0 from-amber-300 via-purple-400 to-red-400 bg-gradient-to-l blur-lg -z-10"></div> 16 | <div className="bg-background h-16 flex items-center z-50 px-4"> 17 | <div className="mx-auto max-w-7xl w-full">{children}</div> 18 | </div> 19 | </div> 20 | ); 21 | }; 22 | -------------------------------------------------------------------------------- /src/components/ui/button.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react" 2 | import { Slot } from "@radix-ui/react-slot" 3 | import { cva, type VariantProps } from "class-variance-authority" 4 | 5 | import { cn } from "@/lib/utils" 6 | 7 | const buttonVariants = cva( 8 | "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50", 9 | { 10 | variants: { 11 | variant: { 12 | default: "bg-primary text-primary-foreground hover:bg-primary/90", 13 | destructive: 14 | "bg-destructive text-destructive-foreground hover:bg-destructive/90", 15 | outline: 16 | "border border-input bg-background hover:bg-accent hover:text-accent-foreground", 17 | secondary: 18 | "bg-secondary text-secondary-foreground hover:bg-secondary/80", 19 | ghost: "hover:bg-accent hover:text-accent-foreground", 20 | link: "text-primary underline-offset-4 hover:underline", 21 | }, 22 | size: { 23 | default: "h-10 px-4 py-2", 24 | sm: "h-9 rounded-md px-3", 25 | lg: "h-11 rounded-md px-8", 26 | icon: "h-10 w-10", 27 | }, 28 | }, 29 | defaultVariants: { 30 | variant: "default", 31 | size: "default", 32 | }, 33 | } 34 | ) 35 | 36 | export interface ButtonProps 37 | extends React.ButtonHTMLAttributes<HTMLButtonElement>, 38 | VariantProps<typeof buttonVariants> { 39 | asChild?: boolean 40 | } 41 | 42 | const Button = React.forwardRef<HTMLButtonElement, ButtonProps>( 43 | ({ className, variant, size, asChild = false, ...props }, ref) => { 44 | const Comp = asChild ? Slot : "button" 45 | return ( 46 | <Comp 47 | className={cn(buttonVariants({ variant, size, className }))} 48 | ref={ref} 49 | {...props} 50 | /> 51 | ) 52 | } 53 | ) 54 | Button.displayName = "Button" 55 | 56 | export { Button, buttonVariants } 57 | -------------------------------------------------------------------------------- /src/components/ui/input.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react" 2 | 3 | import { cn } from "@/lib/utils" 4 | 5 | export interface InputProps 6 | extends React.InputHTMLAttributes<HTMLInputElement> {} 7 | 8 | const Input = React.forwardRef<HTMLInputElement, InputProps>( 9 | ({ className, type, ...props }, ref) => { 10 | return ( 11 | <input 12 | type={type} 13 | className={cn( 14 | "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50", 15 | className 16 | )} 17 | ref={ref} 18 | {...props} 19 | /> 20 | ) 21 | } 22 | ) 23 | Input.displayName = "Input" 24 | 25 | export { Input } 26 | -------------------------------------------------------------------------------- /src/components/ui/skeleton.tsx: -------------------------------------------------------------------------------- 1 | import { cn } from "@/lib/utils"; 2 | 3 | function Skeleton({ 4 | className, 5 | ...props 6 | }: React.HTMLAttributes<HTMLDivElement>) { 7 | return ( 8 | <div 9 | className={cn("animate-pulse rounded-md bg-muted", className)} 10 | {...props} 11 | /> 12 | ); 13 | } 14 | 15 | export { Skeleton }; 16 | -------------------------------------------------------------------------------- /src/components/ui/textarea.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react" 2 | 3 | import { cn } from "@/lib/utils" 4 | 5 | export interface TextareaProps 6 | extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {} 7 | 8 | const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>( 9 | ({ className, ...props }, ref) => { 10 | return ( 11 | <textarea 12 | className={cn( 13 | "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50", 14 | className 15 | )} 16 | ref={ref} 17 | {...props} 18 | /> 19 | ) 20 | } 21 | ) 22 | Textarea.displayName = "Textarea" 23 | 24 | export { Textarea } 25 | -------------------------------------------------------------------------------- /src/lib/hooks/use-meta.ts: -------------------------------------------------------------------------------- 1 | import { useState } from "react"; 2 | import { OpenService } from "../service/open-service"; 3 | import { Meta } from "../type/meta.type"; 4 | 5 | export const useMeta = (): { 6 | getMetaMap: (url?: string) => Promise<Meta> | null; 7 | } => { 8 | const [metaMap, setMetaMap] = useState<Record<string, Meta>>({}); 9 | 10 | const fetchData = async (url: string): Promise<Meta | undefined> => { 11 | try { 12 | const response = await OpenService.getLinkMetaData(url); 13 | 14 | return response["result"]; 15 | } catch (error) { 16 | console.error(error); 17 | return undefined; 18 | } 19 | }; 20 | 21 | async function getMetaMap(url?: string): Promise<any> { 22 | if (!url) return Promise.resolve(null); 23 | 24 | // Check for the blacklist urls 25 | const isBlacklisted = blacklistUrls.some((blacklistUrl) => 26 | url.includes(blacklistUrl) 27 | ); 28 | 29 | if (isBlacklisted) { 30 | return Promise.resolve(null); 31 | } 32 | 33 | // Check for valid link 34 | const isValidLink = url.match(/^(ftp|http|https|www):\/\/[^ "]+$/); 35 | if (!isValidLink) { 36 | return Promise.resolve(null); 37 | } 38 | 39 | // Check for the map if the data is already present 40 | if (metaMap[url]) { 41 | return Promise.resolve(metaMap[url]); 42 | } 43 | 44 | // Check for the storage if the data is already present 45 | const storageMeta = localStorage.getItem("meta"); 46 | if (storageMeta) { 47 | const storageMetaMap = JSON.parse(storageMeta) as Record< 48 | string, 49 | Meta 50 | >; 51 | if (storageMetaMap && storageMetaMap[url]) { 52 | return Promise.resolve(storageMetaMap[url]); 53 | } 54 | } 55 | 56 | const meta = await fetchData(url); 57 | 58 | if (meta) { 59 | updateLocalStorage(url, meta); 60 | return Promise.resolve(meta); 61 | } 62 | updateLocalStorage(url, null); 63 | 64 | return Promise.resolve(null); 65 | } 66 | 67 | function updateLocalStorage(url: string, meta: Meta | null) { 68 | // Append meta record to the existing storage 69 | const storageMeta = localStorage.getItem("meta"); 70 | if (storageMeta) { 71 | const metaMap = JSON.parse(storageMeta) as Record<string, Meta>; 72 | // console.log("🚀 ~ metaMap Pre save map:", metaMap) 73 | const obj = Object.assign(metaMap, { [url]: meta }); 74 | localStorage.setItem("meta", JSON.stringify(obj)); 75 | // console.log('meta Post save map', { obj, string: JSON.stringify(obj) }); 76 | } else { 77 | const obj = Object.assign({}, { [url]: meta }); 78 | localStorage.setItem("meta", JSON.stringify(obj)); 79 | // console.log('meta', { obj, string: JSON.stringify(obj) }); 80 | } 81 | setMetaMap(metaMap); 82 | } 83 | 84 | return { getMetaMap }; 85 | }; 86 | 87 | const blacklistUrls = [ 88 | "www.google.com", 89 | "api.whatsapp.com", 90 | "api.pensil.in", 91 | "livemeeting.pro", 92 | "pensil-social.s3", 93 | "googleusercontent.com", 94 | ".png", 95 | ".jpg", 96 | ".jpeg", 97 | ".gif", 98 | ".bmp", 99 | ".svg", 100 | ".ico", 101 | ".tif", 102 | ".tiff", 103 | ".psd", 104 | ".ai", 105 | ".eps", 106 | ".doc", 107 | ".docx", 108 | ".pdf", 109 | ".ppt", 110 | ".pptx", 111 | ".xls", 112 | ".xlsx", 113 | ".csv", 114 | ".txt", 115 | ".zip", 116 | ".rar", 117 | ".tar", 118 | ".gz", 119 | ".7z", 120 | ".mp3", 121 | ".mp4", 122 | ".avi", 123 | ".wmv", 124 | ".mov", 125 | ".mkv", 126 | ".flv", 127 | ".wav", 128 | ".ogg", 129 | ".ogv", 130 | ".oga", 131 | ".webm", 132 | ".m4a", 133 | ".m4v", 134 | ".mpg", 135 | ".mpeg", 136 | ".m2v", 137 | ".mpg", 138 | ".mpeg", 139 | ".m2v", 140 | ]; 141 | 142 | 143 | -------------------------------------------------------------------------------- /src/lib/service/open-service.ts: -------------------------------------------------------------------------------- 1 | 2 | class OpenService { 3 | 4 | static async getLinkMetaData(url: string) { 5 | const res = await fetch(`https://web-scrapper-coral.vercel.app/api/read_web_meta_data?url=${url}`, { 6 | headers: { 7 | "Access-Control-Allow-Origin": "*", 8 | } 9 | }) 10 | if (!res.ok) { 11 | // This will activate the closest `error.js` Error Boundary 12 | throw new Error('Failed to fetch data') 13 | } 14 | return res.json() 15 | } 16 | } 17 | 18 | export { OpenService }; 19 | -------------------------------------------------------------------------------- /src/lib/type/meta.type.ts: -------------------------------------------------------------------------------- 1 | export interface Meta { 2 | "application-name": string; 3 | date: string; 4 | description: string; 5 | keywords: string; 6 | "og:description": string; 7 | "og:image": string; 8 | "og:site_name": string; 9 | "og:title": string; 10 | "og:type": string; 11 | "og:url": string; 12 | title: string; 13 | "twitter:card": string; 14 | "twitter:creator": string; 15 | "twitter:description": string; 16 | "twitter:site": string; 17 | "twitter:title": string; 18 | "twitter:url": string; 19 | "twitter:image": string; 20 | "twitter:domain": string; 21 | url: string; 22 | } -------------------------------------------------------------------------------- /src/lib/utils.ts: -------------------------------------------------------------------------------- 1 | import { type ClassValue, clsx } from "clsx" 2 | import { twMerge } from "tailwind-merge" 3 | 4 | export function cn(...inputs: ClassValue[]) { 5 | return twMerge(clsx(inputs)) 6 | } 7 | -------------------------------------------------------------------------------- /src/lib/validator.ts: -------------------------------------------------------------------------------- 1 | export default class Validator { 2 | /** 3 | * Checks if the given object is not null, not undefined and not empty. 4 | * @param obj The object to check. 5 | * @returns True if the object is not null or undefined and not empty, false otherwise. 6 | * @memberof Validator 7 | * @example 8 | * Validator.hasValue(null); // false 9 | * Validator.hasValue(undefined); // false 10 | * Validator.hasValue({}); // false 11 | * Validator.hasValue({ a: 1 }); // true 12 | * Validator.hasValue([]); // false 13 | * Validator.hasValue([1]); // true 14 | * Validator.hasValue(''); // false 15 | * Validator.hasValue('a'); // true 16 | * Validator.hasValue(0); // true 17 | * Validator.hasValue(false); // true 18 | * Validator.hasValue(true); // true 19 | * Validator.hasValue(NaN); // true 20 | * Validator.hasValue(Infinity); // true 21 | * Validator.hasValue(-Infinity); // true 22 | */ 23 | static hasValue(obj: any): boolean { 24 | if (obj === null || obj === undefined) { 25 | return false; 26 | } 27 | if (typeof obj === "object") { 28 | if (Array.isArray(obj)) { 29 | return obj.length > 0; 30 | } else { 31 | return Object.keys(obj).length > 0; 32 | } 33 | } 34 | if (Array.isArray(obj)) { 35 | return obj.length > 0; 36 | } 37 | if (typeof obj === "string") { 38 | return obj.length > 0; 39 | } 40 | return true; 41 | } 42 | 43 | /** 44 | * Check if given url is a valid url. 45 | * @param url The url to check. 46 | * @returns True if the url is valid, false otherwise. 47 | * @memberof Validator 48 | * @example 49 | * Validator.isUrl('https://www.google.com'); // true 50 | * Validator.isUrl('http://www.google.com'); // true 51 | * Validator.isUrl('www.google.com'); // true 52 | * Validator.isUrl('google.com'); // false 53 | * Validator.isUrl('google'); // false 54 | * Validator.isUrl(''); // false 55 | * Validator.isUrl(null); // false 56 | * Validator.isUrl(undefined); // false 57 | * Validator.isUrl(1); // false 58 | * Validator.isUrl({}); // false 59 | * Validator.isUrl([]); // false 60 | * Validator.isUrl(true); // false 61 | */ 62 | static isUrl(url: string): boolean { 63 | if (!this.hasValue(url)) { 64 | return false; 65 | } 66 | const pattern = new RegExp( 67 | "^(https?:\\/\\/)?((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|((\\d{1,3}\\.){3}\\d{1,3}))" + 68 | "(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*" + 69 | "(\\?[;&a-z\\d%_.~+=-]*)?" + 70 | "(\\#[-a-z\\d_]*)?$", 71 | "i" 72 | ); 73 | return pattern.test(url); 74 | } 75 | } 76 | -------------------------------------------------------------------------------- /tailwind.config.ts: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | module.exports = { 3 | darkMode: ["class"], 4 | content: [ 5 | './pages/**/*.{ts,tsx}', 6 | './components/**/*.{ts,tsx}', 7 | './app/**/*.{ts,tsx}', 8 | './src/**/*.{ts,tsx}', 9 | ], 10 | theme: { 11 | container: { 12 | center: true, 13 | padding: "2rem", 14 | screens: { 15 | "2xl": "1400px", 16 | }, 17 | }, 18 | extend: { 19 | colors: { 20 | border: "hsl(var(--border))", 21 | input: "hsl(var(--input))", 22 | ring: "hsl(var(--ring))", 23 | background: "hsl(var(--background))", 24 | foreground: "hsl(var(--foreground))", 25 | primary: { 26 | DEFAULT: "hsl(var(--primary))", 27 | foreground: "hsl(var(--primary-foreground))", 28 | }, 29 | secondary: { 30 | DEFAULT: "hsl(var(--secondary))", 31 | foreground: "hsl(var(--secondary-foreground))", 32 | }, 33 | destructive: { 34 | DEFAULT: "hsl(var(--destructive))", 35 | foreground: "hsl(var(--destructive-foreground))", 36 | }, 37 | muted: { 38 | DEFAULT: "hsl(var(--muted))", 39 | foreground: "hsl(var(--muted-foreground))", 40 | }, 41 | accent: { 42 | DEFAULT: "hsl(var(--accent))", 43 | foreground: "hsl(var(--accent-foreground))", 44 | }, 45 | popover: { 46 | DEFAULT: "hsl(var(--popover))", 47 | foreground: "hsl(var(--popover-foreground))", 48 | }, 49 | card: { 50 | DEFAULT: "hsl(var(--card))", 51 | foreground: "hsl(var(--card-foreground))", 52 | }, 53 | }, 54 | borderRadius: { 55 | lg: "var(--radius)", 56 | md: "calc(var(--radius) - 2px)", 57 | sm: "calc(var(--radius) - 4px)", 58 | }, 59 | keyframes: { 60 | "accordion-down": { 61 | from: { height: 0 }, 62 | to: { height: "var(--radix-accordion-content-height)" }, 63 | }, 64 | "accordion-up": { 65 | from: { height: "var(--radix-accordion-content-height)" }, 66 | to: { height: 0 }, 67 | }, 68 | }, 69 | animation: { 70 | "accordion-down": "accordion-down 0.2s ease-out", 71 | "accordion-up": "accordion-up 0.2s ease-out", 72 | }, 73 | }, 74 | }, 75 | plugins: [require("tailwindcss-animate")], 76 | } -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": ["dom", "dom.iterable", "esnext"], 5 | "allowJs": true, 6 | "skipLibCheck": true, 7 | "strict": true, 8 | "noEmit": true, 9 | "esModuleInterop": true, 10 | "module": "esnext", 11 | "moduleResolution": "bundler", 12 | "resolveJsonModule": true, 13 | "isolatedModules": true, 14 | "jsx": "preserve", 15 | "incremental": true, 16 | "plugins": [ 17 | { 18 | "name": "next" 19 | } 20 | ], 21 | "paths": { 22 | "@/*": ["./src/*"] 23 | } 24 | }, 25 | "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"], 26 | "exclude": ["node_modules"] 27 | } 28 | --------------------------------------------------------------------------------

20 | Proudly open-source 21 |

141 | {title} 142 |

21 | OpenGraph 22 |