feat: added deploy button

.env.example

@@ -0,0 +1,11 @@
+NEXT_PUBLIC_SANITY_DATASET=""
+NEXT_PUBLIC_SANITY_PROJECT_ID=""
+
+FTP_HOST=""
+FTP_USER=""
+FTP_PASS=""
+
+GITHUB_PAT=""
+DEPLOY_REPO_URL="user/repo"
+DEPLOY_WORKFLOW="workflow.yml"
+DEPLOY_REF="main"

.gitignore

@@ -30,7 +30,8 @@ yarn-debug.log*
 yarn-error.log*
 
 # env files (can opt-in for committing if needed)
-.env*
+.env
+.env.local*
 
 # vercel
 .vercel

package.json

@@ -13,19 +13,24 @@
     "@sanity/image-url": "1",
     "@sanity/ui": "^2.8.25",
     "@sanity/vision": "3",
+    "basic-ftp": "^5.0.5",
+    "clsx": "^2.1.1",
+    "formidable": "^3.5.2",
     "lucide-react": "^0.469.0",
-    "next": "15.0.3",
+    "next": "^15.1.4",
     "next-sanity": "9",
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "sanity": "3",
     "styled-components": "^6.1.13"
   },
   "devDependencies": {
+    "@types/formidable": "^3.4.5",
+    "@types/ftp": "^0.3.36",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
-    "eslint": "^8",
+    "eslint": "^9.17.0",
     "eslint-config-next": "15.0.3",
     "postcss": "^8",
     "tailwindcss": "^3.4.1",

sanity.config.ts

@@ -12,13 +12,19 @@ import {structureTool} from 'sanity/structure'
 import {apiVersion, dataset, projectId} from './src/sanity/env'
 import {schema} from './src/sanity/schemaTypes'
 import {structure} from './src/sanity/structure'
+import { CustomNavbar } from '@/sanity/components/CustomNavbar'
 
 export default defineConfig({
   basePath: '/studio',
   projectId,
   dataset,
   // Add and edit the content schema in the './sanity/schemaTypes' folder
   schema,
+  studio: {
+    components: {
+      navbar: CustomNavbar
+    }
+  },
   plugins: [
     structureTool({structure}),
     // Vision is for querying with GROQ from inside the Studio

src/app/actions/github.ts

@@ -0,0 +1,53 @@
+"use server";
+import { Octokit } from "@octokit/core";
+
+type RunType = {
+  status: string;
+  id: string;
+};
+
+export async function dispatchWorkflow() {
+  const repoURL = process.env.DEPLOY_REPO_URL;
+  const workflow = process.env.DEPLOY_WORKFLOW;
+  const ref = process.env.DEPLOY_REF;
+
+  try {    
+    const octokit = new Octokit({
+      auth: process.env.GITHUB_PAT,
+    });
+
+    // Get all workflow runs to check the uncompleted ones
+    const { data: runs } = await octokit.request(
+      `GET /repos/${repoURL}/actions/workflows/${workflow}/runs`,
+      {
+        per_page: 100,
+      }
+    );
+
+    const unCompletedRuns = runs.workflow_runs.filter(
+      (run: RunType) => run.status !== "completed"
+    );
+
+    if (unCompletedRuns.length > 0) {
+      // Cancel the uncompleted ones
+      for (const run of unCompletedRuns) {
+        await octokit.request(`POST /repos/${repoURL}/actions/runs/${run.id}/cancel`, {
+          headers: {
+            Accept: "application/vnd.github.v3+json",
+          },
+        });
+        console.log(`Cancelled workflow run: ${run.id}`);
+      }
+    }
+
+    // Dispatch a new workflow run
+    await octokit.request(
+      `POST /repos/${repoURL}/actions/workflows/${workflow}/dispatches`,
+      { ref }
+    );
+
+    console.log("Dispatched new workflow run");
+  } catch (error) {
+    throw error;
+  }
+}

src/sanity/components/CustomNavbar.tsx

@@ -0,0 +1,89 @@
+import { Box, useToast, Spinner } from "@sanity/ui";
+import { NavbarProps } from "sanity";
+import { useState } from "react";
+import Image from "next/image";
+import { redirect, RedirectType } from "next/navigation";
+import { dispatchWorkflow } from "@/app/actions/github";
+import clsx from "clsx";
+
+export function CustomNavbar(props: NavbarProps) {
+  const { renderDefault } = props;
+  const [isDeploying, setIsDeploying] = useState(false);
+  const [timeLeft, setTimeLeft] = useState(0);
+  const toast = useToast();
+
+  const deploySite = async () => {
+    try {
+      await dispatchWorkflow();
+      toast.push({
+        status: "success",
+        title: "Deployment Triggered",
+        description: "Your site is being deployed!",
+      });
+    } catch (error: unknown) {
+      toast.push({
+        status: "error",
+        title: "Deployment Failed",
+        description: "Server error",
+      });
+    }
+  };
+
+  const handleDeploy = async () => {
+    setIsDeploying(true);
+    await deploySite();
+
+    const expectedTime = 60;
+
+    setTimeLeft(expectedTime);
+
+    setInterval(() => {
+      setTimeLeft(prev => prev - 1);
+    }, 1000);
+
+    setTimeout(() => {
+      setIsDeploying(false);
+    }, expectedTime * 1000);
+  };
+
+  const checkStatus = () => {
+    redirect(
+      "https://github.com/velocity-iiitdwd/iiitdwd.ac.in/actions/",
+      RedirectType.push
+    );
+  };
+
+  return (
+    <div>
+      <div className="flex justify-center items-center gap-2 p-2 bg-slate-950">
+        <button
+          onClick={handleDeploy}
+          disabled={isDeploying}
+          className={clsx(
+            "flex items-center justify-center px-4 py-1 text-white bg-slate-800 rounded-md transition duration-200",
+            isDeploying
+              ? "bg-slate-600 cursor-not-allowed"
+              : "hover:bg-slate-700"
+          )}
+        >
+          {isDeploying ? (
+            <>
+              <Spinner muted />
+              <span className="ml-2">Deploying... {timeLeft} sec</span>
+            </>
+          ) : (
+            "Deploy"
+          )}
+        </button>
+        <button
+          onClick={checkStatus}
+          className="flex items-center justify-center bg-slate-400 rounded-full transition duration-200 size-5"
+          title="Check GitHub Action Status"
+        >
+          <Image src="/info.svg" height={48} width={48} alt="info" />
+        </button>
+      </div>
+      <Box flex={1}>{renderDefault(props)}</Box>
+    </div>
+  );
+}

tailwind.config.ts

@@ -2,9 +2,7 @@ import type { Config } from "tailwindcss";
 
 export default {
   content: [
-    "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
-    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
-    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
+    "./src/**/*.{js,ts,jsx,tsx,mdx}",
   ],
   theme: {
     extend: {