87 | >(({ className, ...props }, ref) => (
88 | [role=checkbox]]:translate-y-[2px]",
92 | className
93 | )}
94 | {...props}
95 | />
96 | ))
97 | TableCell.displayName = "TableCell"
98 |
99 | const TableCaption = React.forwardRef<
100 | HTMLTableCaptionElement,
101 | React.HTMLAttributes
102 | >(({ className, ...props }, ref) => (
103 | ,
12 | React.ComponentPropsWithoutRef
13 | >(({ className, ...props }, ref) => (
14 | ,
27 | React.ComponentPropsWithoutRef
28 | >(({ className, ...props }, ref) => (
29 | ,
42 | React.ComponentPropsWithoutRef
43 | >(({ className, ...props }, ref) => (
44 | {}
7 |
8 | const Textarea = React.forwardRef(
9 | ({ className, ...props }, ref) => {
10 | return (
11 |
19 | )
20 | }
21 | )
22 | Textarea.displayName = "Textarea"
23 |
24 | export { Textarea }
25 |
--------------------------------------------------------------------------------
/src/components/ui/three-d-button.tsx:
--------------------------------------------------------------------------------
1 | const ThreeDButton = ({ children }: { children: React.ReactNode }) => {
2 | return (
3 |
4 | {children}
6 |
7 | );
8 | };
9 |
10 | export default ThreeDButton;
11 |
--------------------------------------------------------------------------------
/src/components/ui/toaster.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import {
4 | Toast,
5 | ToastClose,
6 | ToastDescription,
7 | ToastProvider,
8 | ToastTitle,
9 | ToastViewport,
10 | } from "@/components/ui/toast"
11 | import { useToast } from "@/components/ui/use-toast"
12 |
13 | export function Toaster() {
14 | const { toasts } = useToast()
15 |
16 | return (
17 |
18 | {toasts.map(function ({ id, title, description, action, ...props }) {
19 | return (
20 |
21 |
22 | {title && {title} }
23 | {description && (
24 | {description}
25 | )}
26 |
27 | {action}
28 |
30 | )
31 | })}
32 |
34 | )
35 | }
36 |
--------------------------------------------------------------------------------
/src/components/ui/toggle-group.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import * as React from "react"
4 | import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group"
5 | import { VariantProps } from "class-variance-authority"
6 |
7 | import { cn } from "@/lib/utils"
8 | import { toggleVariants } from "@/components/ui/toggle"
9 |
10 | const ToggleGroupContext = React.createContext<
11 | VariantProps
12 | >({
13 | size: "default",
14 | variant: "default",
15 | })
16 |
17 | const ToggleGroup = React.forwardRef<
18 | React.ElementRef,
19 | React.ComponentPropsWithoutRef &
20 | VariantProps
21 | >(({ className, variant, size, children, ...props }, ref) => (
22 |
27 |
28 | {children}
29 |
30 |
31 | ))
32 |
33 | ToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName
34 |
35 | const ToggleGroupItem = React.forwardRef<
36 | React.ElementRef,
37 | React.ComponentPropsWithoutRef &
38 | VariantProps
39 | >(({ className, children, variant, size, ...props }, ref) => {
40 | const context = React.useContext(ToggleGroupContext)
41 |
42 | return (
43 |
54 | {children}
55 |
56 | )
57 | })
58 |
59 | ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName
60 |
61 | export { ToggleGroup, ToggleGroupItem }
62 |
--------------------------------------------------------------------------------
/src/components/ui/toggle.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import * as React from "react"
4 | import * as TogglePrimitive from "@radix-ui/react-toggle"
5 | import { cva, type VariantProps } from "class-variance-authority"
6 |
7 | import { cn } from "@/lib/utils"
8 |
9 | const toggleVariants = cva(
10 | "inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground",
11 | {
12 | variants: {
13 | variant: {
14 | default: "bg-transparent",
15 | outline:
16 | "border border-input bg-transparent shadow-sm hover:bg-accent hover:text-accent-foreground",
17 | },
18 | size: {
19 | default: "h-9 px-3",
20 | sm: "h-8 px-2",
21 | lg: "h-10 px-3",
22 | },
23 | },
24 | defaultVariants: {
25 | variant: "default",
26 | size: "default",
27 | },
28 | }
29 | )
30 |
31 | const Toggle = React.forwardRef<
32 | React.ElementRef,
33 | React.ComponentPropsWithoutRef &
34 | VariantProps
35 | >(({ className, variant, size, ...props }, ref) => (
36 | ,
16 | React.ComponentPropsWithoutRef
17 | >(({ className, sideOffset = 4, ...props }, ref) => (
18 | ,
5 | callback: MutationCallback,
6 | options = {
7 | attributes: true,
8 | characterData: true,
9 | childList: true,
10 | subtree: true,
11 | }
12 | ) => {
13 | React.useEffect(() => {
14 | if (ref.current) {
15 | const observer = new MutationObserver(callback);
16 | observer.observe(ref.current, options);
17 | return () => observer.disconnect();
18 | }
19 | }, [ref, callback, options]);
20 | };
21 |
--------------------------------------------------------------------------------
/src/lib/crisp.ts:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { useEffect } from "react";
4 | import { Crisp } from "crisp-sdk-web";
5 |
6 | const CrispChat = () => {
7 | useEffect(() => {
8 | if (process.env.NEXT_PUBLIC_CRISP_WEBSITE_ID) {
9 | Crisp.configure(process.env.NEXT_PUBLIC_CRISP_WEBSITE_ID as string);
10 | }
11 | });
12 |
13 | return null;
14 | };
15 |
16 | export default CrispChat;
17 |
--------------------------------------------------------------------------------
/src/lib/db.ts:
--------------------------------------------------------------------------------
1 | import { PrismaClient } from "@prisma/client";
2 |
3 | declare global {
4 | var prisma: PrismaClient | undefined;
5 | }
6 |
7 | export const db = globalThis.prisma || new PrismaClient();
8 |
9 | if (process.env.NODE_ENV !== "production") globalThis.prisma = db;
10 |
--------------------------------------------------------------------------------
/src/lib/flow.ts:
--------------------------------------------------------------------------------
1 | import { HierarchyNode, tree } from "d3-hierarchy";
2 | import { Position } from "reactflow";
3 |
4 | const layout = tree().nodeSize([70, 200]);
5 | // const layout = tree().nodeSize([200, 70]);
6 |
7 | export function getElements(h: HierarchyNode) {
8 | const root = layout(h);
9 |
10 | const nodes = root.descendants().map((d: any, i) => ({
11 | id: d.id,
12 | data: { label: d.data.name, depth: d.depth },
13 | // position: { x: d.x, y: d.y },
14 | position: { x: d.y, y: d.x },
15 | sourcePosition: Position.Right,
16 | targetPosition: Position.Left,
17 | // sourcePosition: Position.Bottom,
18 | // targetPosition: Position.Top,
19 | type: i === 0 ? "input" : d._children ? "default" : "output",
20 | }));
21 |
22 | const edges = root.links().map((d, i) => ({
23 | id: `${i}`,
24 | source: d.source.id || "",
25 | target: d.target.id || "",
26 | }));
27 |
28 | return { nodes, edges };
29 | }
--------------------------------------------------------------------------------
/src/lib/knowledge-graph.ts:
--------------------------------------------------------------------------------
1 | "use server";
2 | import axios from "axios";
3 |
4 | export async function knowledgeGraph(searchQuery: string) {
5 | searchQuery = encodeURIComponent(searchQuery);
6 | const { data } = await axios.get(
7 | `https://kgsearch.googleapis.com/v1/entities:search?query=${searchQuery}&key=${process.env.KNOWLEDGE_GRAPH_SEARCH_KEY}&limit=1&indent=True`
8 | );
9 | if (!data) {
10 | console.log("The Knowledge Graph API returned no data");
11 | return null;
12 | }
13 | if (data.items[0] == undefined) {
14 | console.log("No data found");
15 | return null;
16 | }
17 | return data.items[0].id.videoId;
18 | }
19 |
--------------------------------------------------------------------------------
/src/lib/queries.ts:
--------------------------------------------------------------------------------
1 | import { MutationOptions, QueryKey, useMutation } from "@tanstack/react-query";
2 | import axios, { AxiosError, AxiosResponse } from "axios";
3 |
4 | const MutationFactory = (
5 | mutationKey: QueryKey,
6 | url: string,
7 | method: "POST" | "PUT" | "PATCH",
8 | options?: MutationOptions,
9 | ) => {
10 | return useMutation({
11 | mutationKey,
12 | mutationFn: async (variables: { body: any }) => {
13 | return axios({
14 | url,
15 | method,
16 | data: variables.body,
17 | }).then((response: AxiosResponse) => response.data);
18 | },
19 | ...options,
20 | });
21 | };
22 |
23 | export const useGenerateRoadmap = (
24 | query: string,
25 | model: string,
26 | modelApiKey: string | null,
27 | options?: MutationOptions,
28 | ) => {
29 | return MutationFactory(
30 | ["Generate Roadmap", query],
31 | `/api/v1/${model}/roadmap?apiKey=${modelApiKey}`,
32 | "POST",
33 | options,
34 | );
35 | };
36 |
37 | export const useSearch = (query: string, options?: MutationOptions) => {
38 | return MutationFactory(
39 | ["Search Roadmap", query],
40 | `/api/v1/roadmaps`,
41 | "POST",
42 | options,
43 | );
44 | };
45 |
--------------------------------------------------------------------------------
/src/lib/shared/constants.ts:
--------------------------------------------------------------------------------
1 | export const availableModels = [
2 | { key: "groq", label: "Groq" },
3 | { key: "openai", label: "OpenAI" },
4 | { key: "gemini", label: "Gemini" },
5 | { key: "cohere", label: "Cohere" },
6 | ];
7 |
8 | export const modelKeys = availableModels.map((model) => model.key);
9 |
10 | export const proOptions = { account: "paid-pro", hideAttribution: true };
11 |
12 | export const bannedWords: string[] = [
13 | "misleadin",
14 | "deceptive",
15 | "fraudulent",
16 | "stalking",
17 | "intimidation",
18 | "bullying",
19 | "harassment",
20 | "discrimination",
21 | "bribery",
22 | "corruption",
23 | "unethical",
24 | "explicit",
25 | "obscene",
26 | "inappropriate",
27 | "offensive",
28 | "threat",
29 | "cheat",
30 | "fraud",
31 | "scam",
32 | "spam",
33 | "malware",
34 | "virus",
35 | "pornography",
36 | "porn",
37 | "illegal",
38 | "drug",
39 | "firearm",
40 | "gun",
41 | "weapon",
42 | "violence",
43 | "killing",
44 | "murder",
45 | "hatecrime",
46 | "hate",
47 | "assassination",
48 | "assassin",
49 | "terrorism",
50 | "terrorist",
51 | "explosive",
52 | "bombing",
53 | "bomb",
54 | ];
55 |
--------------------------------------------------------------------------------
/src/lib/shared/temp-data.ts:
--------------------------------------------------------------------------------
1 | export const tempData = [
2 | {
3 | name: "Devops",
4 | children: [
5 | {
6 | name: "The Fundamentals",
7 | children: [
8 | { name: "Understanding DevOps" },
9 | { name: "DevOps Vs IT Operations" },
10 | { name: " DevOps Core Concepts" },
11 | ],
12 | },
13 | {
14 | name: "Implementing DevOps",
15 | children: [
16 | { name: "DevOps Toolchains" },
17 | { name: "Continuous Integration Tools" },
18 | { name: "Continuous Deployment & Delivery" },
19 | { name: "Deployment Strategies" },
20 | ],
21 | },
22 | {
23 | name: "Cultivating DevOps Culture",
24 | children: [
25 | { name: "DevOps Team Structure" },
26 | { name: "Embracing Agile Methods" },
27 | { name: "Sprints & Scrums" },
28 | { name: "Testing & Quality Assurance" },
29 | ],
30 | },
31 | {
32 | name: "DevOps Strategy & Planning",
33 | children: [
34 | { name: "Strategizing DevOps Initiatives" },
35 | { name: "OpsOps Assessment" },
36 | { name: "Planning for Change & Capacity Management" },
37 | { name: "Setting Service Level Objectives" },
38 | ],
39 | },
40 | {
41 | name: "DevOps Automation",
42 | children: [
43 | { name: "Automating Infrastructure Provisioning" },
44 | { name: "Config Management & Orchestration" },
45 | { name: "Automation Testing" },
46 | { name: "Continuous Monitoring" },
47 | ],
48 | },
49 | ],
50 | },
51 | ];
52 |
--------------------------------------------------------------------------------
/src/lib/shared/tree.js:
--------------------------------------------------------------------------------
1 |
2 |
3 | const data = {
4 | "Introduction to Node.js": [
5 | "What is Node.js?",
6 | "Advantages of Node.js",
7 | "Setting up Node.js environment",
8 | ],
9 | "Node.js Basics": [
10 | "Working with npm (Node Package Manager)",
11 | "Basic modules and their usage",
12 | "Asynchronous programming with callbacks",
13 | ],
14 | "Node.js Advanced Concepts": [
15 | "Event loop and event emitters",
16 | "Streams and buffers",
17 | "Error handling and debugging",
18 | ],
19 | "Node.js Frameworks": [
20 | "Express.js framework",
21 | "Sails.js framework",
22 | "Koa.js framework",
23 | ],
24 | "Database Integration with Node.js": [
25 | "Connecting to databases",
26 | "CRUD operations with databases",
27 | "ORM (Object-Relational Mapping) libraries",
28 | ],
29 | "Testing and Debugging in Node.js": [
30 | "Unit testing with Mocha and Chai",
31 | "Debugging with Node.js inspector",
32 | "Performance optimization",
33 | ],
34 | "Building RESTful APIs with Node.js": [
35 | "Understanding REST architecture",
36 | "Express.js routing for APIs",
37 | "Authentication and security",
38 | ],
39 | "Real-time Applications with Node.js": [
40 | "Socket.io for real-time communication",
41 | "Building chat applications",
42 | "Scalability and load balancing",
43 | ],
44 | "Deployment and DevOps for Node.js": [
45 | "Deploying Node.js applications",
46 | "Containerization with Docker",
47 | "DevOps best practices",
48 | ],
49 | };
50 |
51 | const tree = [
52 | {
53 | name: 'Node.js',
54 | children: Object.keys(data).map(sectionName => ({
55 | name: sectionName,
56 | children: data[sectionName].map(topic => ({
57 | name: topic
58 | }))
59 | }))
60 | }
61 | ];
62 |
63 | export default tree
--------------------------------------------------------------------------------
/src/lib/shared/types/common.ts:
--------------------------------------------------------------------------------
1 | export type Node = { name: string; children?: Node[] };
2 |
--------------------------------------------------------------------------------
/src/lib/shared/urls.ts:
--------------------------------------------------------------------------------
1 | export const KNOWLEGDE_GRAPH_URL = `https://kgsearch.googleapis.com/v1/entities:search?query=taylor+swift&key=API_KEY&limit=1&indent=True`
--------------------------------------------------------------------------------
/src/lib/stores/index.ts:
--------------------------------------------------------------------------------
1 | export { useFeatureFlagStore } from "./useFeatureFlag";
2 | export { useUIStore, type UModel } from "./useUI";
3 |
--------------------------------------------------------------------------------
/src/lib/stores/useFeatureFlag.ts:
--------------------------------------------------------------------------------
1 | import { create } from "zustand";
2 |
3 | interface FeatureFlag {
4 | [key: string]: {
5 | enabled: boolean;
6 | description?: string;
7 | };
8 | }
9 |
10 | interface FeatureFlagState {
11 | flags: FeatureFlag;
12 | toggleFlag: (key: string) => void;
13 | enableFlag: (key: string) => void;
14 | disableFlag: (key: string) => void;
15 | }
16 |
17 | export const useFeatureFlagStore = create((set) => ({
18 | flags: {
19 | "roadmap-pricing": {
20 | enabled: false,
21 | description: "Display the Roadmap Pricing section",
22 | },
23 | },
24 | toggleFlag: (key) =>
25 | set((state) => ({
26 | flags: {
27 | ...state.flags,
28 | [key]: {
29 | ...state.flags[key],
30 | enabled: !state.flags[key].enabled,
31 | },
32 | },
33 | })),
34 | enableFlag: (key) =>
35 | set((state) => ({
36 | flags: {
37 | ...state.flags,
38 | [key]: {
39 | ...state.flags[key],
40 | enabled: true,
41 | },
42 | },
43 | })),
44 | disableFlag: (key) =>
45 | set((state) => ({
46 | flags: {
47 | ...state.flags,
48 | [key]: {
49 | ...state.flags[key],
50 | enabled: false,
51 | },
52 | },
53 | })),
54 | }));
55 |
--------------------------------------------------------------------------------
/src/lib/stores/useUI.ts:
--------------------------------------------------------------------------------
1 | import { create } from "zustand";
2 |
3 | type drawerDetails = {
4 | query: string;
5 | parent: string;
6 | child: string;
7 | };
8 |
9 | export type UModel = "openai" | "cohere" | "gemini" | "groq";
10 |
11 | interface UIState {
12 | drawerOpen: boolean;
13 | toggleDrawer: () => void;
14 | drawerDetails: drawerDetails | null;
15 | setDrawerDetails: ({ query, parent, child }: drawerDetails) => void;
16 | model: UModel;
17 | setModel: (model: UModel) => void;
18 | query: string;
19 | setQuery: (query: string) => void;
20 | mainQuery: string;
21 | setMainQuery: (query: string) => void;
22 | modelApiKey: string | null;
23 | setModelApiKey: (query: string | null) => void;
24 | }
25 |
26 | export const useUIStore = create((set) => ({
27 | drawerOpen: false,
28 | toggleDrawer: () => set((state) => ({ drawerOpen: !state.drawerOpen })),
29 | drawerDetails: null,
30 | setDrawerDetails: (data) => set(() => ({ drawerDetails: data })),
31 | model: "groq",
32 | setModel: (model) => set(() => ({ model })),
33 | query: "",
34 | setQuery: (query) => set(() => ({ query })),
35 | mainQuery: "",
36 | setMainQuery: (mainQuery) => set(() => ({ mainQuery })),
37 | modelApiKey: "",
38 | setModelApiKey: (modelApiKey) => set(() => ({ modelApiKey })),
39 | }));
40 |
--------------------------------------------------------------------------------
/src/lib/utils.ts:
--------------------------------------------------------------------------------
1 | import { Node } from "@/lib/shared/types/common";
2 | import { clsx, type ClassValue } from "clsx";
3 | import LZString from "lz-string";
4 | import { twMerge } from "tailwind-merge";
5 | import md5 from "md5";
6 |
7 | export function cn(...inputs: ClassValue[]) {
8 | return twMerge(clsx(inputs));
9 | }
10 |
11 | export function SanitiseJSON(text: string) {
12 | // ugly hack to remove the first and last part of response to get the JSON
13 | const json = text.split("```json")[1].split("```")[0];
14 | return json;
15 | }
16 |
17 | export function capitalize(str: string) {
18 | if (str && typeof str === "string") {
19 | return str.charAt(0).toUpperCase() + str.slice(1).toLowerCase();
20 | }
21 | return "";
22 | }
23 |
24 | export function formatDuration(seconds: number) {
25 | // Convert seconds to hours
26 | const hours = Math.floor(seconds / 3600);
27 | if (hours >= 1) {
28 | // If duration is 1 hour or more, return in hours
29 | return `${hours} hour${hours > 1 ? "s" : ""}`;
30 | } else {
31 | // If duration is less than 1 hour, convert to minutes
32 | const minutes = Math.floor(seconds / 60);
33 | return `${minutes} minute${minutes !== 1 ? "s" : ""}`;
34 | }
35 | }
36 |
37 | export const decodeFromURL = (params: URLSearchParams): Node[] => {
38 | let array = [];
39 | const code = params.get("code");
40 | if (code) {
41 | const uncompressed = LZString.decompressFromEncodedURIComponent(code);
42 | try {
43 | array = JSON.parse(uncompressed);
44 | } catch (e) {}
45 | }
46 | return array;
47 | };
48 |
49 | export function downloadImage(dataUrl: string) {
50 | const a = document.createElement("a");
51 | // [TODO] : set query string as a name for the file
52 | a.setAttribute("download", "roadmap.png");
53 | a.setAttribute("href", dataUrl);
54 | a.click();
55 | }
56 | // export const DIAGRAM_IMAGE_WIDTH = 4096;
57 | // export const DIAGRAM_IMAGE_HEIGHT = 3048;
58 | export const DIAGRAM_IMAGE_WIDTH = 1224;
59 | export const DIAGRAM_IMAGE_HEIGHT = 786 + 786;
60 |
61 | export function timeFromNow(dateString: string) {
62 | var createdDate = +new Date(dateString);
63 | var currentDate = +new Date();
64 | var timeDifference = Math.abs(currentDate - createdDate);
65 | var hourDifference = Math.floor(timeDifference / (1000 * 60 * 60));
66 |
67 | if (hourDifference < 1) {
68 | return "a few seconds ago";
69 | } else if (hourDifference === 1) {
70 | return "an hour ago";
71 | } else {
72 | return hourDifference + " hours ago";
73 | }
74 | }
75 |
76 | export const getFormattedDate = (dateString: string): string => {
77 | return new Intl.DateTimeFormat("en-US", {
78 | dateStyle: "long",
79 | }).format(new Date(dateString));
80 | };
81 |
82 | export const generateYouTubeLink = (videoId: string) => {
83 | return `https://www.youtube.com/watch?v=${videoId}`;
84 | };
85 |
86 | export function createTree(data: {
87 | query: string;
88 | chapters: Record<
89 | string,
90 | { moduleName: string; moduleDescription: string; link?: string }[]
91 | >;
92 | }) {
93 | return [
94 | {
95 | name: capitalize(data.query),
96 | children: Object.keys(data.chapters).map((sectionName) => ({
97 | name: sectionName,
98 | children: data.chapters[sectionName].map(
99 | ({ moduleName, link, moduleDescription }) => ({
100 | name: moduleName,
101 | moduleDescription,
102 | link,
103 | }),
104 | ),
105 | })),
106 | },
107 | ];
108 | }
109 |
110 | export function toProperCase(str: string) {
111 | return str.replace(/\w\S*/g, function (txt) {
112 | return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
113 | });
114 | }
115 |
116 | export function getGravatarHash(email: string) {
117 | const normalizedEmail = email.toLowerCase().trim();
118 | const md5Hash = md5(normalizedEmail);
119 | return md5Hash;
120 | }
121 |
--------------------------------------------------------------------------------
/src/lib/validations/og.ts:
--------------------------------------------------------------------------------
1 | import * as z from "zod";
2 |
3 | export const ogImageSchema = z.object({
4 | heading: z.string(),
5 | });
6 |
--------------------------------------------------------------------------------
/src/lib/validations/roadmap.ts:
--------------------------------------------------------------------------------
1 | import * as z from "zod";
2 |
3 | export const roadmapSchema = z.object({
4 | query: z.string(),
5 | chapters: z.record(
6 | z.string(),
7 | z.array(
8 | z.object({
9 | moduleName: z.string(),
10 | moduleDescription: z.string(),
11 | link: z.string().optional(),
12 | })
13 | )
14 | ),
15 | });
16 |
--------------------------------------------------------------------------------
/src/lib/youtube.ts:
--------------------------------------------------------------------------------
1 | "use server";
2 | import axios from "axios";
3 |
4 | export async function searchYoutube(searchQuery: string) {
5 | searchQuery = encodeURIComponent(searchQuery);
6 | const { data } = await axios.get(
7 | `https://www.googleapis.com/youtube/v3/search?key=${process.env.YOUTUBE_API_KEY}&q=${searchQuery}&videoDuration=medium&videoEmbeddable=true&type=video&maxResults=5`
8 | );
9 | if (!data) {
10 | console.log("The YouTube API failed");
11 | return null;
12 | }
13 | if (data.items[0] == undefined) {
14 | console.log("No video found");
15 | return null;
16 | }
17 | const videoIds = data.items.map((item: any) => item?.id?.videoId);
18 | return videoIds;
19 | }
20 |
--------------------------------------------------------------------------------
/src/middleware.ts:
--------------------------------------------------------------------------------
1 | import { authMiddleware } from "@clerk/nextjs";
2 |
3 | // See https://clerk.com/docs/references/nextjs/auth-middleware
4 | // for more information about configuring your Middleware
5 | export default authMiddleware({
6 | // Allow signed out users to access the specified routes:
7 | // publicRoutes: ['/anyone-can-visit-this-route'],
8 | publicRoutes: [
9 | "/",
10 | "/api/health",
11 | "/api/webhook(.*)",
12 | "/api/og/(.*)",
13 | "/explore",
14 | "/roadmap/(.*)",
15 | ],
16 | });
17 |
18 | export const config = {
19 | matcher: [
20 | // Exclude files with a "." followed by an extension, which are typically static files.
21 | // Exclude files in the _next directory, which are Next.js internals.
22 | "/((?!.+\\.[\\w]+$|_next).*)",
23 | // Re-include any files in the api or trpc folders that might have an extension
24 | "/(api|trpc)(.*)",
25 | ],
26 | };
27 |
--------------------------------------------------------------------------------
/tailwind.config.ts:
--------------------------------------------------------------------------------
1 | import type { Config } from "tailwindcss";
2 |
3 | const config = {
4 | darkMode: ["class"],
5 | content: [
6 | "./pages/**/*.{ts,tsx}",
7 | "./components/**/*.{ts,tsx}",
8 | "./app/**/*.{ts,tsx}",
9 | "./src/**/*.{ts,tsx}",
10 | ],
11 | prefix: "",
12 | theme: {
13 | container: {
14 | center: true,
15 | padding: "2rem",
16 | screens: {
17 | "2xl": "1400px",
18 | },
19 | },
20 | extend: {
21 | colors: {
22 | border: "hsl(var(--border))",
23 | input: "hsl(var(--input))",
24 | ring: "hsl(var(--ring))",
25 | background: "hsl(var(--background))",
26 | foreground: "hsl(var(--foreground))",
27 | primary: {
28 | DEFAULT: "hsl(var(--primary))",
29 | foreground: "hsl(var(--primary-foreground))",
30 | },
31 | secondary: {
32 | DEFAULT: "hsl(var(--secondary))",
33 | foreground: "hsl(var(--secondary-foreground))",
34 | },
35 | destructive: {
36 | DEFAULT: "hsl(var(--destructive))",
37 | foreground: "hsl(var(--destructive-foreground))",
38 | },
39 | muted: {
40 | DEFAULT: "hsl(var(--muted))",
41 | foreground: "hsl(var(--muted-foreground))",
42 | },
43 | accent: {
44 | DEFAULT: "hsl(var(--accent))",
45 | foreground: "hsl(var(--accent-foreground))",
46 | },
47 | popover: {
48 | DEFAULT: "hsl(var(--popover))",
49 | foreground: "hsl(var(--popover-foreground))",
50 | },
51 | card: {
52 | DEFAULT: "hsl(var(--card))",
53 | foreground: "hsl(var(--card-foreground))",
54 | },
55 | },
56 | borderRadius: {
57 | lg: "var(--radius)",
58 | md: "calc(var(--radius) - 2px)",
59 | sm: "calc(var(--radius) - 4px)",
60 | },
61 | keyframes: {
62 | "accordion-down": {
63 | from: { height: "0" },
64 | to: { height: "var(--radix-accordion-content-height)" },
65 | },
66 | "accordion-up": {
67 | from: { height: "var(--radix-accordion-content-height)" },
68 | to: { height: "0" },
69 | },
70 | "skew-scroll": {
71 | "0%": {
72 | transform:
73 | "rotatex(20deg) rotateZ(-20deg) skewX(20deg) translateZ(0) translateY(0)",
74 | },
75 | "100%": {
76 | transform:
77 | "rotatex(20deg) rotateZ(-20deg) skewX(20deg) translateZ(0) translateY(-100%)",
78 | },
79 | },
80 | marquee: {
81 | from: { transform: "translateX(0)" },
82 | to: { transform: "translateX(calc(-100% - var(--gap)))" },
83 | },
84 | "marquee-vertical": {
85 | from: { transform: "translateY(0)" },
86 | to: { transform: "translateY(calc(-100% - var(--gap)))" },
87 | },
88 | },
89 | animation: {
90 | "accordion-down": "accordion-down 0.2s ease-out",
91 | "accordion-up": "accordion-up 0.2s ease-out",
92 | "skew-scroll": "skew-scroll 20s linear infinite",
93 | marquee: "marquee var(--duration) linear infinite",
94 | "marquee-vertical": "marquee-vertical var(--duration) linear infinite",
95 | },
96 | },
97 | },
98 | plugins: [require("tailwindcss-animate")],
99 | } satisfies Config;
100 |
101 | export default config;
102 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "lib": ["dom", "dom.iterable", "esnext"],
4 | "allowJs": true,
5 | "skipLibCheck": true,
6 | "strict": true,
7 | "noEmit": true,
8 | "esModuleInterop": true,
9 | "module": "esnext",
10 | "moduleResolution": "bundler",
11 | "resolveJsonModule": true,
12 | "isolatedModules": true,
13 | "jsx": "preserve",
14 | "incremental": true,
15 | "plugins": [
16 | {
17 | "name": "next"
18 | }
19 | ],
20 | "paths": {
21 | "@/*": ["./src/*"],
22 | "auth": ["./src/auth.ts"]
23 | }
24 | },
25 | "include": [
26 | "next-env.d.ts",
27 | "**/*.ts",
28 | "**/*.tsx",
29 | ".next/types/**/*.ts",
30 | "prisma/seed.js"
31 | ],
32 | "exclude": ["node_modules"]
33 | }
34 |
--------------------------------------------------------------------------------
50 |
53 | 
45 | 
28 |