Skip to content

Instantly share code, notes, and snippets.

View officialrajdeepsingh's full-sized avatar

Rajdeep Singh officialrajdeepsingh

View GitHub Profile
@officialrajdeepsingh
officialrajdeepsingh / next.yml
Created July 10, 2023 17:35
deploy nextjs on github pages using pnpm and github actions
# 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
officialrajdeepsingh / Search.tsx
Created April 16, 2023 09:23
Creating search functionality on static blog with next js, markdown and flexsearch
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
officialrajdeepsingh / guideline.md
Created January 13, 2023 09:59
Authorization Code Flow easy guideline for linkedin api. just replace your value and every think work fine.

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
officialrajdeepsingh / theme.config.js
Created January 9, 2023 08:22
Create a nextra base blog without writen a single line of code.
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>
@officialrajdeepsingh
officialrajdeepsingh / index.html
Created December 30, 2022 06:31
Create a TOC (table of content ) with javascript
<!DOCTYPE html>
<!-- saved from url=(0055)http://localhost:3000/how-to-install-deno-in-linux.html -->
<html class="" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>How to install deno in linux?</title>
@officialrajdeepsingh
officialrajdeepsingh / netlify_cms.js
Created November 15, 2022 08:02
netlify_cms config in javavscript
import f from "https://deno.land/x/netlify_cms_config@v0.2.0/mod.ts";
f.defaultRequired = false;
const config = {
backend: {
name: "git-gateway",
branch: "master",
},
media_folder: "images",
@officialrajdeepsingh
officialrajdeepsingh / card.njk
Created November 12, 2022 09:20
createtemplates/card.njk
<div class="container px-6 py-10 mx-auto">
<div class="mt-8 lg:-mx-6 lg:flex lg:items-center">
<img class="object-cover border-none w-full lg:mx-6 lg:w-1/2 rounded-xl h-72 lg:h-96" src="{{ post.data.image }}" alt="{{ post.data.title }}">
<div class="mt-6 lg:w-1/2 lg:mt-0 lg:mx-6 ">
<a class="text-sm text-blue-500 uppercase" href="/category/{{ post.data.category | category }}" >
{{ post.data.category | category }}
@officialrajdeepsingh
officialrajdeepsingh / og.tsx
Last active November 6, 2022 09:03
Nextjs OG Image is new functionality built on satori. Satori is a new library That converts HTML to png or SVG, and satori creates and maintains by vercel. OG Image Generation is lightweight and runs on vercel Edge.
// og.tsx
import { ImageResponse } from '@vercel/og';
import { NextRequest } from 'next/server';
// enable experimental edage
export const config = {
runtime: 'experimental-edge',
};
import { Html, Head, Main, NextScript } from 'next/document'
export default function Document() {
return (
<Html>
<Head>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1"
import '../styles/globals.css'
import Head from "next/head";
import Script from "next/script";
function MyApp({ Component, pageProps }) {
return (
<>
<Head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css"