officialrajdeepsingh

Feature	Static app/opengraph-image.tsx	Dynamic app/blog/[slug]/opengraph-image.tsx	API app/og/route.tsx
Approach	Next.js metadata convention	Next.js metadata convention	Custom Route/API Handler
Location	app/opengraph-image.tsx	app/blog/[slug]/opengraph-image.tsx	app/og/route.tsx
Type	Static	Dynamic	API endpoint

officialrajdeepsingh

Feature	Satori	Takumi
Purpose	JSX → SVG	JSX → Images
Input	JSX	JSX, HTML, node trees
Browser required	No	No
Output	SVG	PNG, JPEG, WebP, SVG, ICO
Animated images	No	Yes
Raster images	Via resvg or sharp	Built-in
Layout	Flexbox	Flexbox, Grid, block, inline, float
CSS selectors	Limited	More

officialrajdeepsingh

.prose {
  --prose-color: var(--muted-foreground);
  --prose-heading-color: var(--foreground);
  --prose-strong-color: var(--foreground);
  --prose-link-color: var(--foreground);
  --prose-code-color: var(--foreground);
  --prose-marker-color: color-mix(in oklab, var(--muted-foreground) 50%, transparent);
  --prose-link-underline-color: var(--primary);
  --prose-th-borders: var(--border);
  --prose-td-borders: color-mix(in oklab, var(--border) 75%, transparent);

officialrajdeepsingh

# .github/workflows/deploy.yml

name: Deploy to GitHub Pages

on:
  push:
    branches:
      - main

jobs:

officialrajdeepsingh

# Sample workflow for building and deploying a Next.js site to GitHub Pages
#
# To get started with Next.js see: https://nextjs.org/docs/getting-started
#
name: Deploy Next.js site to Pages

on:
  # Runs on pushes targeting the default branch
  push:
    branches: ["main"]

officialrajdeepsingh

{ config, pkgs, inputs, ... }: {
  imports = [
    # Include the results of the hardware scan.
    ./hardware-configuration.nix
    ./services
    ./programs
  ];
  

  # trusted users config for https://devenv.sh/getting-started/

officialrajdeepsingh

# Sample workflow for building and deploying a Next.js site to GitHub Pages
#
# To get started with Next.js see: https://nextjs.org/docs/getting-started
#
name: Deploy Next.js site to Pages

on:
  # Runs on pushes targeting the default branch
  push:
    branches: ["main"]

officialrajdeepsingh

import React, { useEffect, useState } from "react";
import { Index } from "flexsearch";
import { posts } from "./posts";


export default () => {

  // This will create a new search index. Here we are using all of the default options, but the docs show other choices that can be used. 

  const [index, setIndex] = useState(new Index({}));

officialrajdeepsingh

I create a guideline for you how to create a authorization token by linkedin API

Requirements

1. client_id (Require)
2. redirect_uri (Require)
3. scope (Require)
4. response_type (The response_type value is always be code for example response_type: code)
5. state (Random unique string read more in docs)

officialrajdeepsingh

export default {
  comments: (
    <>
    <div className="w-5/6 mx-auto" dangerouslySetInnerHTML={{ __html: '<script src="https://giscus.app/client.js" data-repo="officialrajdeepsingh/officialrajdeepsingh.dev" data-repo-id="R_kgDOIs4gPw" data-category="Q&A" data-category-id="DIC_kwDOIs4gP84CTV3Q" data-mapping="pathname" data-strict="1" data-reactions-enabled="1"data-emit-metadata="0" data-input-position="top" data-theme="dark_protanopia" data-lang="en" data-loading="lazy" crossorigin="anonymous" async></script>' }}>
    </div>
    </>
  ),
  footer: (<div className="my-24  border-t-2  mx-auto flex items-center sm:flex-row flex-col">
      <p className="text-sm text-gray-500">© By Rajdeep singh  —
        <a href="https://twitter.com/Official_R_deep" className="text-gray-600" rel="noopener noreferrer" target="_blank">@Official_R_deep</a>