nezumi/next-gdrive-index
1
0
Fork 0
mirror of https://github.com/Nezumi-2711/next-gdrive-index.git synced 2026-09-22 13:38:38 +00:00
Code Issues Packages Projects Releases Wiki Activity

Sort import

Browse Source
This commit is contained in:
mbaharip
2023-05-25 20:27:47 +07:00
parent e00b5a2681
commit 15bc5d96a7
18 changed files with 349 additions and 290 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/compBreadcrumb.tsx → src/app/(__components)/compBreadcrumb.tsx
+5 -2
View File
@@ -1,14 +1,17 @@
"use client";
import Link from "next/link";
import { MdHome } from "react-icons/md";
import { Fragment, useEffect, useState } from "react";
import siteConfig from "config/site.config";
import { MdHome } from "react-icons/md";
import { FilePath } from "types/api/path";
import siteConfig from "config/site.config";
type Props = {
data?: FilePath[];
};
function Breadcrumb({ data = [] }: Props) {
const [breadcrumb, setBreadcrumb] = useState<FilePath[]>(
[],
src/app/compFooter.tsx → src/app/(__components)/compFooter.tsx
+2 -1
View File
@@ -1,6 +1,7 @@
import siteConfig from "config/site.config";
import Link from "next/link";
import siteConfig from "config/site.config";
function Footer() {
return (
<footer
src/app/compGridLayout.tsx → src/app/(__components)/compGridLayout.tsx
+6 -3
View File
@@ -1,14 +1,17 @@
"use client";
import { FilesResponse } from "types/api/files";
import { drive_v3 } from "googleapis";
import Link from "next/link";
import { usePathname } from "next/navigation";
import { MdFolder, MdPlayCircle } from "react-icons/md";
import formatDuration from "utils/fileHelper/formatDuration";
import getFileIcon from "utils/fileHelper/iconMap";
import getFileGroup from "utils/fileHelper/typeMap";
import { FilesResponse } from "types/api/files";
import siteConfig from "config/site.config";
import Link from "next/link";
import { usePathname } from "next/navigation";
type Props = {
data: FilesResponse;
src/app/compSwitchLayout.tsx → src/app/(__components)/compSwitchLayout.tsx
+6 -4
View File
@@ -1,9 +1,5 @@
"use client";
import {
LayoutContext,
TLayoutContext,
} from "context/layoutContext";
import {
useContext,
useEffect,
@@ -16,6 +12,11 @@ import {
MdList,
} from "react-icons/md";
import {
LayoutContext,
TLayoutContext,
} from "context/layoutContext";
function SwitchLayout() {
const { layout, setLayout } =
useContext<TLayoutContext>(LayoutContext);
@@ -39,6 +40,7 @@ function SwitchLayout() {
setIsDropdownOpen(false);
}
}
document.addEventListener(
"mousedown",
handleClickOutside,
src/app/(api)/api/banner/route.ts
+6 -3
View File
@@ -1,10 +1,13 @@
import { NextRequest, NextResponse } from "next/server";
import createErrorPayload from "utils/apiHelper/createErrorPayload";
import getSearchParams from "utils/apiHelper/getSearchParams";
import ExtendedError from "utils/generalHelper/extendedError";
import { Constant } from "types/general/constant";
import gdrive from "utils/apiHelper/gdrive";
import getSearchParams from "utils/apiHelper/getSearchParams";
import shortEncryption from "utils/encryptionHelper/shortEncryption";
import ExtendedError from "utils/generalHelper/extendedError";
import { Constant } from "types/general/constant";
import apiConfig from "config/api.config";
export async function GET(request: NextRequest) {
src/app/layout.tsx
+6 -30
View File
@@ -1,16 +1,13 @@
import { Metadata } from "next";
import Navbar from "./compNavbar";
import Footer from "./compFooter";
import ContextWrapper from "./contextWrapper";
import {
Exo_2,
JetBrains_Mono,
Source_Sans_Pro,
} from "next/font/google";
import siteConfig from "config/site.config";
import apiConfig from "config/api.config";
import ClientContextWrapper from "components/clientContextWrapper";
import Footer from "components/compFooter";
import Navbar from "components/compNavbar";
import "styles/globals.css";
const exo2 = Exo_2({
@@ -35,27 +32,6 @@ const jetBrainsMono = JetBrains_Mono({
variable: "--font-jetbrains-mono",
});
export const metadata: Metadata = {
metadataBase: new URL(apiConfig.basePath),
title: siteConfig.siteName,
description: siteConfig.siteDescription,
alternates: {
canonical: "/",
},
openGraph: {
title: siteConfig.siteName,
description: siteConfig.siteDescription,
url: `/`,
siteName: siteConfig.siteName,
},
twitter: {
title: siteConfig.siteName,
description: siteConfig.siteDescription,
card: "summary_large_image",
site: siteConfig.siteName,
},
};
type Props = {
children: React.ReactNode;
};
@@ -66,7 +42,7 @@ function RootLayout({ children }: Props) {
<body
className={`${exo2.variable} ${sourceSansPro.variable} ${jetBrainsMono.variable} font-body`}
>
<ContextWrapper>
<ClientContextWrapper>
<main
className={
"text-dark-900 flex h-full min-h-dynamic w-full flex-col bg-zinc-200 font-body dark:bg-zinc-800 dark:text-zinc-100"
@@ -78,7 +54,7 @@ function RootLayout({ children }: Props) {
</div>
<Footer />
</main>
</ContextWrapper>
</ClientContextWrapper>
</body>
</html>
);
src/context/layoutContext.tsx
+5 -1
View File
@@ -1,4 +1,8 @@
import React, { createContext, useState, useEffect } from "react";
import React, {
createContext,
useEffect,
useState,
} from "react";
export type TLayout = "grid" | "list";
src/context/themeContext.tsx
+1 -1
View File
@@ -2,8 +2,8 @@
import React, {
createContext,
useState,
useEffect,
useState,
} from "react";
export type TTheme = "dark" | "light";
src/hooks/useCopyText.ts
+3 -1
View File
@@ -3,7 +3,9 @@ import { toast } from "react-toastify";
export default function useCopyText() {
return (text: string) => {
if (!navigator.clipboard) {
toast.error("Your browser does not support copying to clipboard.");
toast.error(
"Your browser does not support copying to clipboard.",
);
return;
}
if (!text) {
src/hooks/useLocalStorage.ts
+26 -7
View File
@@ -2,7 +2,10 @@ import { useEffect, useState } from "react";
type SetValue<T> = (value: T | ((val: T) => T)) => void;
export default function useLocalStorage<T>(key: string, initialValue: T) {
export default function useLocalStorage<T>(
key: string,
initialValue: T,
) {
// First check if there is a value in localStorage
function readLocalStorage() {
if (typeof window === "undefined") return initialValue;
@@ -11,20 +14,30 @@ export default function useLocalStorage<T>(key: string, initialValue: T) {
const item = window.localStorage.getItem(key);
return item ? JSON.parse(item) : initialValue;
} catch (error) {
console.warn(`Error reading localStorage key “${key}”:`, error);
console.warn(
`Error reading localStorage key “${key}”:`,
error,
);
return initialValue;
}
}
const [storedValue, setStoredValue] = useState<T>(readLocalStorage);
const [storedValue, setStoredValue] = useState<T>(
readLocalStorage,
);
// Create dispatch function to set or remove localStorage
const setValue: SetValue<T> = (value) => {
try {
const valueToStore =
value instanceof Function ? value(storedValue) : value;
value instanceof Function
? value(storedValue)
: value;
setStoredValue(valueToStore);
window.localStorage.setItem(key, JSON.stringify(valueToStore));
window.localStorage.setItem(
key,
JSON.stringify(valueToStore),
);
} catch (error) {
console.error("Error setting localStorage:", error);
}
@@ -41,7 +54,10 @@ export default function useLocalStorage<T>(key: string, initialValue: T) {
const newValue = JSON.parse(event.newValue);
setStoredValue(newValue);
} catch (error) {
console.error("Error setting localStorage:", error);
console.error(
"Error setting localStorage:",
error,
);
}
}
};
@@ -49,7 +65,10 @@ export default function useLocalStorage<T>(key: string, initialValue: T) {
window.addEventListener("storage", handleStorageChange);
return () => {
window.removeEventListener("storage", handleStorageChange);
window.removeEventListener(
"storage",
handleStorageChange,
);
};
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [key]);
src/styles/globals.css
+44 -18
View File
@@ -22,6 +22,7 @@ html, body {
html {
@apply text-sm tablet:text-base;
}
* {
@apply focus:outline focus:outline-blue-400 focus:rounded;
@apply dark:focus:outline-blue-600;
@@ -57,13 +58,13 @@ html, body {
}
/* Text */
a, .interactive {
@apply opacity-90;
@apply hover:opacity-100;
@apply transition-opacity duration-[var(--animation-duration)] ease-[var(--animation-timing)];
}
a[role='url']{
a[role='url'] {
@apply opacity-100 text-blue-600;
@apply hover:text-blue-500;
@apply active:text-blue-700;
@@ -73,16 +74,18 @@ html, body {
@apply dark:active:text-blue-600;
@apply transition-colors duration-[var(--animation-duration)] ease-[var(--animation-timing)];
}
button {
@apply bg-blue-600 px-4 py-2 rounded-xl opacity-100;
@apply hover:bg-blue-500;
@apply active:bg-blue-700;
@apply bg-blue-600 text-zinc-100 px-4 py-2 rounded-xl opacity-100;
@apply hover:bg-blue-500 hover:text-zinc-100;
@apply active:bg-blue-700 active:text-zinc-100;
@apply focus:outline-none;
@apply dark:bg-blue-500;
@apply dark:hover:bg-blue-400;
@apply dark:active:bg-blue-600;
@apply dark:bg-blue-500 dark:text-zinc-100;
@apply dark:hover:bg-blue-400 dark:hover:text-zinc-100;
@apply dark:active:bg-blue-600 dark:active:text-zinc-100;
@apply transition-colors duration-[var(--animation-duration)] ease-[var(--animation-timing)];
}
button.ghost {
@apply bg-transparent border border-blue-600 px-4 py-2 rounded-xl opacity-100;
@apply hover:bg-blue-100;
@@ -93,6 +96,7 @@ html, body {
@apply dark:active:bg-blue-900;
@apply transition-colors duration-[var(--animation-duration)] ease-[var(--animation-timing)];
}
button.link {
@apply bg-transparent px-4 py-2 rounded-xl opacity-100;
@apply hover:bg-blue-100;
@@ -110,27 +114,44 @@ html, body {
h1, h2, h3 {
@apply font-bold;
}
h4, h5, h6 {
@apply font-semibold;
}
h1 {
@apply text-4xl tablet:text-5xl;
}
h2 {
@apply text-3xl tablet:text-4xl;
}
h3 {
@apply text-2xl tablet:text-3xl;
}
h4 {
@apply text-xl tablet:text-2xl;
}
h5 {
@apply text-lg tablet:text-xl;
}
h6 {
@apply text-base tablet:text-lg;
}
input {
@apply bg-zinc-100 px-4 py-2;
@apply rounded-lg focus:rounded-lg;
@apply border;
@apply border-zinc-400 hover:border-blue-300 active:border-blue-400;
@apply dark:bg-zinc-900;
@apply dark:border-zinc-600 dark:hover:border-blue-400 dark:active:border-blue-500;
@apply transition-colors duration-[var(--animation-duration)] ease-[var(--animation-timing)];
}
}
@layer components {
@@ -148,22 +169,25 @@ html, body {
@apply disabled:text-zinc-500;
@apply transition duration-[var(--animation-duration)] ease-[var(--animation-timing)];
}
div.layoutOption {
@apply rounded-lg overflow-hidden;
@apply justify-center;
@apply text-sm tablet:text-base;
@apply border;
@apply border-blue-400;
@apply bg-zinc-200;
@apply dark:border-blue-500;
@apply dark:bg-zinc-800;
@apply rounded-lg overflow-hidden;
@apply justify-center;
@apply text-sm tablet:text-base;
@apply border;
@apply border-blue-400;
@apply bg-zinc-200;
@apply dark:border-blue-500;
@apply dark:bg-zinc-800;
@apply transition duration-[var(--animation-duration)] ease-[var(--animation-timing)];
}
}
div.layoutItem {
@apply flex items-center justify-start gap-2 pr-2 pl-4 py-1 h-full w-full cursor-pointer;
@apply bg-zinc-100 hover:bg-blue-300/25 focus:bg-zinc-50;
@apply dark:bg-zinc-900 dark:hover:bg-blue-400/25 dark:focus:bg-zinc-950;
}
div.layoutItem[data-active="true"] {
@apply bg-blue-300 cursor-default;
@apply dark:bg-blue-400;
@@ -191,7 +215,8 @@ html, body {
@apply dark:bg-zinc-900 dark:hover:bg-zinc-800 dark:active:bg-zinc-950;
@apply transition duration-[var(--animation-duration)] ease-[var(--animation-timing)];
}
div.file-list{
div.file-list {
@apply rounded-lg p-2 cursor-pointer w-full;
@apply gap-2;
@apply text-sm tablet:text-base;
@@ -212,6 +237,7 @@ html, body {
@apply bg-zinc-400;
@apply dark:border-zinc-600;
}
.divider-vertical {
@apply h-full w-px rounded-lg;
@apply bg-zinc-400;
src/styles/highlight.css
+152 -151
View File
@@ -1,128 +1,129 @@
:root {
/**
* One Light theme for prism.js
* Based on Atom's One Light theme: https://github.com/atom/atom/tree/master/packages/one-light-syntax
*/
/* From colors.less */
--mono-1: hsl(230, 8%, 24%);
--mono-2: hsl(230, 6%, 44%);
--mono-3: hsl(230, 4%, 64%);
--hue-1: hsl(198, 99%, 37%);
--hue-2: hsl(221, 87%, 60%);
--hue-3: hsl(301, 63%, 40%);
--hue-4: hsl(119, 34%, 47%);
--hue-5: hsl(5, 74%, 59%);
--hue-5-2: hsl(344, 84%, 43%);
--hue-6: hsl(35, 99%, 36%);
--hue-6-2: hsl(35, 99%, 40%);
--syntax-fg: hsl(230, 8%, 24%);
--syntax-bg: hsl(230, 1%, 98%);
--syntax-gutter: hsl(230, 1%, 62%);
--syntax-guide: hsla(230, 8%, 24%, 0.2);
--syntax-accent: hsl(230, 100%, 66%);
/* From syntax-variables.less */
--syntax-selection-color: hsl(230, 1%, 90%);
--syntax-gutter-background-color-selected: hsl(230, 1%, 90%);
--syntax-cursor-line: hsla(230, 8%, 24%, 0.05);
/**
* One Light theme for prism.js
* Based on Atom's One Light theme: https://github.com/atom/atom/tree/master/packages/one-light-syntax
*/
/* From colors.less */
--mono-1: hsl(230, 8%, 24%);
--mono-2: hsl(230, 6%, 44%);
--mono-3: hsl(230, 4%, 64%);
--hue-1: hsl(198, 99%, 37%);
--hue-2: hsl(221, 87%, 60%);
--hue-3: hsl(301, 63%, 40%);
--hue-4: hsl(119, 34%, 47%);
--hue-5: hsl(5, 74%, 59%);
--hue-5-2: hsl(344, 84%, 43%);
--hue-6: hsl(35, 99%, 36%);
--hue-6-2: hsl(35, 99%, 40%);
--syntax-fg: hsl(230, 8%, 24%);
--syntax-bg: hsl(230, 1%, 98%);
--syntax-gutter: hsl(230, 1%, 62%);
--syntax-guide: hsla(230, 8%, 24%, 0.2);
--syntax-accent: hsl(230, 100%, 66%);
/* From syntax-variables.less */
--syntax-selection-color: hsl(230, 1%, 90%);
--syntax-gutter-background-color-selected: hsl(230, 1%, 90%);
--syntax-cursor-line: hsla(230, 8%, 24%, 0.05);
}
body.dark {
/**
* One Dark theme for prism.js
* Based on Atom's One Dark theme: https://github.com/atom/atom/tree/master/packages/one-dark-syntax
*/
/* From colors.less */
--mono-1: hsl(220, 14%, 71%);
--mono-2: hsl(220, 9%, 55%);
--mono-3: hsl(220, 10%, 40%);
--hue-1: hsl(187, 47%, 55%);
--hue-2: hsl(207, 82%, 66%);
--hue-3: hsl(286, 60%, 67%);
--hue-4: hsl(95, 38%, 62%);
--hue-5: hsl(355, 65%, 65%);
--hue-5-2: hsl(5, 48%, 51%);
--hue-6: hsl(29, 54%, 61%);
--hue-6-2: hsl(39, 67%, 69%);
--syntax-fg: hsl(220, 14%, 71%);
--syntax-bg: hsl(220, 13%, 18%);
--syntax-gutter: hsl(220, 14%, 45%);
--syntax-guide: hsla(220, 14%, 71%, 0.15);
--syntax-accent: hsl(220, 100%, 66%);
/* From syntax-variables.less */
--syntax-selection-color: hsl(220, 13%, 28%);
--syntax-gutter-background-color-selected: hsl(220, 13%, 26%);
--syntax-cursor-line: hsla(220, 100%, 80%, 0.04);
/**
* One Dark theme for prism.js
* Based on Atom's One Dark theme: https://github.com/atom/atom/tree/master/packages/one-dark-syntax
*/
/* From colors.less */
--mono-1: hsl(220, 14%, 71%);
--mono-2: hsl(220, 9%, 55%);
--mono-3: hsl(220, 10%, 40%);
--hue-1: hsl(187, 47%, 55%);
--hue-2: hsl(207, 82%, 66%);
--hue-3: hsl(286, 60%, 67%);
--hue-4: hsl(95, 38%, 62%);
--hue-5: hsl(355, 65%, 65%);
--hue-5-2: hsl(5, 48%, 51%);
--hue-6: hsl(29, 54%, 61%);
--hue-6-2: hsl(39, 67%, 69%);
--syntax-fg: hsl(220, 14%, 71%);
--syntax-bg: hsl(220, 13%, 18%);
--syntax-gutter: hsl(220, 14%, 45%);
--syntax-guide: hsla(220, 14%, 71%, 0.15);
--syntax-accent: hsl(220, 100%, 66%);
/* From syntax-variables.less */
--syntax-selection-color: hsl(220, 13%, 28%);
--syntax-gutter-background-color-selected: hsl(220, 13%, 26%);
--syntax-cursor-line: hsla(220, 100%, 80%, 0.04);
}
code[class*="language-"],
pre[class*="language-"], pre {
background: var(--syntax-bg);
color: var(--syntax-fg);
text-shadow: 0 1px rgba(0, 0, 0, 0);
font-size: inherit;
direction: ltr;
text-align: left;
white-space: pre;
word-spacing: normal;
word-break: normal;
line-height: 1.5;
-moz-tab-size: 2;
tab-size: 2;
-webkit-hyphens: none;
-moz-hyphens: none;
-ms-hyphens: none;
hyphens: none;
background: var(--syntax-bg);
color: var(--syntax-fg);
text-shadow: 0 1px rgba(0, 0, 0, 0);
font-size: inherit;
direction: ltr;
text-align: left;
white-space: pre;
word-spacing: normal;
word-break: normal;
line-height: 1.5;
-moz-tab-size: 2;
tab-size: 2;
-webkit-hyphens: none;
-moz-hyphens: none;
-ms-hyphens: none;
hyphens: none;
}
/* Selection */
code[class*="language-"]::-moz-selection,
code[class*="language-"] *::-moz-selection,
pre[class*="language-"] *::-moz-selection {
background: var(--syntax-selection-color);
color: inherit;
text-shadow: none;
background: var(--syntax-selection-color);
color: inherit;
text-shadow: none;
}
code[class*="language-"]::selection,
code[class*="language-"] *::selection,
pre[class*="language-"] *::selection {
background: var(--syntax-selection-color);
color: inherit;
text-shadow: none;
background: var(--syntax-selection-color);
color: inherit;
text-shadow: none;
}
/* Code blocks */
pre[class*="language-"], pre {
padding: 1em;
margin: 0.5em 0;
overflow: auto;
border-radius: 0.3em;
padding: 1em;
margin: 0.5em 0;
overflow: auto;
border-radius: 0.3em;
}
/* Inline code */
:not(pre) > code[class*="language-"] {
padding: 0.2em 0.3em;
border-radius: 0.3em;
white-space: normal;
padding: 0.2em 0.3em;
border-radius: 0.3em;
white-space: normal;
}
/* Print */
@media print {
code[class*="language-"],
pre[class*="language-"] {
text-shadow: none;
}
code[class*="language-"],
pre[class*="language-"] {
text-shadow: none;
}
}
.token.comment,
.token.prolog,
.token.cdata {
color: var(--mono-3);
color: var(--mono-3);
}
.token.doctype,
.token.punctuation,
.token.entity {
color: var(--syntax-fg);
color: var(--syntax-fg);
}
.token.attr-name,
@@ -131,11 +132,11 @@ pre[class*="language-"], pre {
.token.constant,
.token.number,
.token.atrule {
color: var(--hue-6);
color: var(--hue-6);
}
.token.keyword {
color: var(--hue-3);
color: var(--hue-3);
}
.token.property,
@@ -143,7 +144,7 @@ pre[class*="language-"], pre {
.token.symbol,
.token.deleted,
.token.important {
color: var(--hue-5);
color: var(--hue-5);
}
.token.selector,
@@ -154,123 +155,123 @@ pre[class*="language-"], pre {
.token.regex,
.token.attr-value,
.token.attr-value > .token.punctuation {
color: var(--hue-4);
color: var(--hue-4);
}
.token.variable,
.token.operator,
.token.function {
color: var(--hue-2);
color: var(--hue-2);
}
.token.url {
color: var(--hue-1);
color: var(--hue-1);
}
/* HTML overrides */
.token.attr-value > .token.punctuation.attr-equals,
.token.special-attr > .token.attr-value > .token.value.css {
color: var(--syntax-fg);
color: var(--syntax-fg);
}
/* CSS overrides */
.language-css .token.selector {
color: var(--hue-5);
color: var(--hue-5);
}
.language-css .token.property {
color: var(--syntax-fg);
color: var(--syntax-fg);
}
.language-css .token.function,
.language-css .token.url > .token.function {
color: var(--hue-1);
color: var(--hue-1);
}
.language-css .token.url > .token.string.url {
color: var(--hue-4);
color: var(--hue-4);
}
.language-css .token.important,
.language-css .token.atrule .token.rule {
color: var(--hue-3);
color: var(--hue-3);
}
/* JS overrides */
.language-javascript .token.operator {
color: var(--hue-3);
color: var(--hue-3);
}
.language-javascript .token.template-string > .token.interpolation > .token.interpolation-punctuation.punctuation {
color: var(--hue-5-2);
color: var(--hue-5-2);
}
/* JSON overrides */
.language-json .token.operator {
color: var(--syntax-fg);
color: var(--syntax-fg);
}
.language-json .token.null.keyword {
color: var(--hue-6);
color: var(--hue-6);
}
/* MD overrides */
.language-markdown .token.url,
.language-markdown .token.url > .token.operator,
.language-markdown .token.url-reference.url > .token.string {
color: var(--syntax-fg);
color: var(--syntax-fg);
}
.language-markdown .token.url > .token.content {
color: var(--hue-2);
color: var(--hue-2);
}
.language-markdown .token.url > .token.url,
.language-markdown .token.url-reference.url {
color: var(--hue-1);
color: var(--hue-1);
}
.language-markdown .token.blockquote.punctuation,
.language-markdown .token.hr.punctuation {
color: var(--mono-3);
font-style: italic;
color: var(--mono-3);
font-style: italic;
}
.language-markdown .token.code-snippet {
color: var(--hue-4);
color: var(--hue-4);
}
.language-markdown .token.bold .token.content {
color: var(--hue-6);
color: var(--hue-6);
}
.language-markdown .token.italic .token.content {
color: var(--hue-3);
color: var(--hue-3);
}
.language-markdown .token.strike .token.content,
.language-markdown .token.strike .token.punctuation,
.language-markdown .token.list.punctuation,
.language-markdown .token.title.important > .token.punctuation {
color: var(--hue-5);
color: var(--hue-5);
}
/* General */
.token.bold {
font-weight: bold;
font-weight: bold;
}
.token.comment,
.token.italic {
font-style: italic;
font-style: italic;
}
.token.entity {
cursor: help;
cursor: help;
}
.token.namespace {
opacity: 0.8;
opacity: 0.8;
}
/* Plugin overrides */
@@ -281,24 +282,24 @@ pre[class*="language-"], pre {
.token.token.cr:before,
.token.token.lf:before,
.token.token.space:before {
color: var(--syntax-guide);
text-shadow: none;
color: var(--syntax-guide);
text-shadow: none;
}
/* Toolbar plugin overrides */
/* Space out all buttons and move them away from the right edge of the code block */
div.code-toolbar > .toolbar.toolbar > .toolbar-item {
margin-right: 0.4em;
margin-right: 0.4em;
}
/* Styling the buttons */
div.code-toolbar > .toolbar.toolbar > .toolbar-item > button,
div.code-toolbar > .toolbar.toolbar > .toolbar-item > a,
div.code-toolbar > .toolbar.toolbar > .toolbar-item > span {
background: var(--syntax-gutter-background-color-selected);
color: var(--mono-2);
padding: 0.1em 0.4em;
border-radius: 0.3em;
background: var(--syntax-gutter-background-color-selected);
color: var(--mono-2);
padding: 0.1em 0.4em;
border-radius: 0.3em;
}
div.code-toolbar > .toolbar.toolbar > .toolbar-item > button:hover,
@@ -307,43 +308,43 @@ div.code-toolbar > .toolbar.toolbar > .toolbar-item > a:hover,
div.code-toolbar > .toolbar.toolbar > .toolbar-item > a:focus,
div.code-toolbar > .toolbar.toolbar > .toolbar-item > span:hover,
div.code-toolbar > .toolbar.toolbar > .toolbar-item > span:focus {
background: var(--syntax-selection-color);
color: var(--syntax-fg);
background: var(--syntax-selection-color);
color: var(--syntax-fg);
}
/* Line Highlight plugin overrides */
/* The highlighted line itself */
.line-highlight.line-highlight {
background: var(--syntax-cursor-line);
background: var(--syntax-cursor-line);
}
/* Default line numbers in Line Highlight plugin */
.line-highlight.line-highlight:before,
.line-highlight.line-highlight[data-end]:after {
background: var(--syntax-gutter-background-color-selected);
color: var(--syntax-fg);
padding: 0.1em 0.6em;
border-radius: 0.3em;
box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.2); /* same as Toolbar plugin default */
background: var(--syntax-gutter-background-color-selected);
color: var(--syntax-fg);
padding: 0.1em 0.6em;
border-radius: 0.3em;
box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.2); /* same as Toolbar plugin default */
}
/* Hovering over a linkable line number (in the gutter area) */
/* Requires Line Numbers plugin as well */
pre[id].linkable-line-numbers.linkable-line-numbers span.line-numbers-rows > span:hover:before {
background-color: var(--syntax-cursor-line);
background-color: var(--syntax-cursor-line);
}
/* Line Numbers and Command Line plugins overrides */
/* Line separating gutter from coding area */
.line-numbers.line-numbers .line-numbers-rows,
.command-line .command-line-prompt {
border-right-color: var(--syntax-guide);
border-right-color: var(--syntax-guide);
}
/* Stuff in the gutter */
.line-numbers .line-numbers-rows > span:before,
.command-line .command-line-prompt > span:before {
color: var(--syntax-gutter);
color: var(--syntax-gutter);
}
/* Match Braces plugin overrides */
@@ -351,65 +352,65 @@ pre[id].linkable-line-numbers.linkable-line-numbers span.line-numbers-rows > spa
.rainbow-braces .token.token.punctuation.brace-level-1,
.rainbow-braces .token.token.punctuation.brace-level-5,
.rainbow-braces .token.token.punctuation.brace-level-9 {
color: var(--hue-5);
color: var(--hue-5);
}
.rainbow-braces .token.token.punctuation.brace-level-2,
.rainbow-braces .token.token.punctuation.brace-level-6,
.rainbow-braces .token.token.punctuation.brace-level-10 {
color: var(--hue-4);
color: var(--hue-4);
}
.rainbow-braces .token.token.punctuation.brace-level-3,
.rainbow-braces .token.token.punctuation.brace-level-7,
.rainbow-braces .token.token.punctuation.brace-level-11 {
color: var(--hue-2);
color: var(--hue-2);
}
.rainbow-braces .token.token.punctuation.brace-level-4,
.rainbow-braces .token.token.punctuation.brace-level-8,
.rainbow-braces .token.token.punctuation.brace-level-12 {
color: var(--hue-3);
color: var(--hue-3);
}
/* Diff Highlight plugin overrides */
/* Taken from https://github.com/atom/github/blob/master/styles/variables.less */
pre.diff-highlight > code .token.token.deleted:not(.prefix),
pre > code.diff-highlight .token.token.deleted:not(.prefix) {
background-color: hsla(353, 100%, 66%, 0.15);
background-color: hsla(353, 100%, 66%, 0.15);
}
pre.diff-highlight > code .token.token.deleted:not(.prefix)::-moz-selection,
pre.diff-highlight > code .token.token.deleted:not(.prefix) *::-moz-selection,
pre > code.diff-highlight .token.token.deleted:not(.prefix)::-moz-selection,
pre > code.diff-highlight .token.token.deleted:not(.prefix) *::-moz-selection {
background-color: hsla(353, 95%, 66%, 0.25);
background-color: hsla(353, 95%, 66%, 0.25);
}
pre.diff-highlight > code .token.token.deleted:not(.prefix)::selection,
pre.diff-highlight > code .token.token.deleted:not(.prefix) *::selection,
pre > code.diff-highlight .token.token.deleted:not(.prefix)::selection,
pre > code.diff-highlight .token.token.deleted:not(.prefix) *::selection {
background-color: hsla(353, 95%, 66%, 0.25);
background-color: hsla(353, 95%, 66%, 0.25);
}
pre.diff-highlight > code .token.token.inserted:not(.prefix),
pre > code.diff-highlight .token.token.inserted:not(.prefix) {
background-color: hsla(137, 100%, 55%, 0.15);
background-color: hsla(137, 100%, 55%, 0.15);
}
pre.diff-highlight > code .token.token.inserted:not(.prefix)::-moz-selection,
pre.diff-highlight > code .token.token.inserted:not(.prefix) *::-moz-selection,
pre > code.diff-highlight .token.token.inserted:not(.prefix)::-moz-selection,
pre > code.diff-highlight .token.token.inserted:not(.prefix) *::-moz-selection {
background-color: hsla(135, 73%, 55%, 0.25);
background-color: hsla(135, 73%, 55%, 0.25);
}
pre.diff-highlight > code .token.token.inserted:not(.prefix)::selection,
pre.diff-highlight > code .token.token.inserted:not(.prefix) *::selection,
pre > code.diff-highlight .token.token.inserted:not(.prefix)::selection,
pre > code.diff-highlight .token.token.inserted:not(.prefix) *::selection {
background-color: hsla(135, 73%, 55%, 0.25);
background-color: hsla(135, 73%, 55%, 0.25);
}
/* Previewers plugin overrides */
@@ -417,48 +418,48 @@ pre > code.diff-highlight .token.token.inserted:not(.prefix) *::selection {
/* Border around popup */
.prism-previewer.prism-previewer:before,
.prism-previewer-gradient.prism-previewer-gradient div {
border-color: hsl(224, 13%, 17%);
border-color: hsl(224, 13%, 17%);
}
/* Angle and time should remain as circles and are hence not included */
.prism-previewer-color.prism-previewer-color:before,
.prism-previewer-gradient.prism-previewer-gradient div,
.prism-previewer-easing.prism-previewer-easing:before {
border-radius: 0.3em;
border-radius: 0.3em;
}
/* Triangles pointing to the code */
.prism-previewer.prism-previewer:after {
border-top-color: hsl(224, 13%, 17%);
border-top-color: hsl(224, 13%, 17%);
}
.prism-previewer-flipped.prism-previewer-flipped.after {
border-bottom-color: hsl(224, 13%, 17%);
border-bottom-color: hsl(224, 13%, 17%);
}
/* Background colour within the popup */
.prism-previewer-angle.prism-previewer-angle:before,
.prism-previewer-time.prism-previewer-time:before,
.prism-previewer-easing.prism-previewer-easing {
background: hsl(219, 13%, 22%);
background: hsl(219, 13%, 22%);
}
/* For angle, this is the positive area (eg. 90deg will display one quadrant in this colour) */
/* For time, this is the alternate colour */
.prism-previewer-angle.prism-previewer-angle circle,
.prism-previewer-time.prism-previewer-time circle {
stroke: var(--syntax-fg);
stroke-opacity: 1;
stroke: var(--syntax-fg);
stroke-opacity: 1;
}
/* Stroke colours of the handle, direction point, and vector itself */
.prism-previewer-easing.prism-previewer-easing circle,
.prism-previewer-easing.prism-previewer-easing path,
.prism-previewer-easing.prism-previewer-easing line {
stroke: var(--syntax-fg);
stroke: var(--syntax-fg);
}
/* Fill colour of the handle */
.prism-previewer-easing.prism-previewer-easing circle {
fill: transparent;
fill: transparent;
}
src/styles/markdown.css
+79 -64
View File
@@ -1,75 +1,90 @@
@tailwind components;
@layer components {
.markdown {
@apply leading-normal text-inherit bg-inherit;
}
.markdown {
@apply leading-normal text-inherit bg-inherit;
}
.markdown p {
@apply leading-loose;
}
.markdown h1, .markdown h2, .markdown h3 {
@apply mb-4 border-b-2 tablet:border-b-4 border-b-zinc-400 dark:border-b-zinc-700 first-letter:capitalize;
}
.markdown p {
@apply leading-loose;
}
.markdown code:not(pre code) {
@apply bg-zinc-300 dark:bg-zinc-700 px-1.5 rounded-lg;
}
.markdown code {
@apply font-code;
}
.markdown a {
@apply text-blue-500 dark:text-blue-400;
}
.markdown p {
@apply whitespace-normal;
}
.markdown img {
@apply rounded-lg;
}
.markdown h1, .markdown h2, .markdown h3 {
@apply my-4 border-b-2 tablet:border-b-4 border-b-zinc-400 dark:border-b-zinc-700 first-letter:capitalize;
}
.markdown ul {
@apply list-disc leading-loose;
}
.markdown ol {
@apply list-decimal leading-loose;
}
.markdown li {
@apply ml-8;
}
.markdown code:not(pre code) {
@apply bg-zinc-300 dark:bg-zinc-700 px-2 leading-normal rounded-lg;
}
.markdown table {
@apply block w-full overflow-auto border-collapse mb-4 border-spacing-0;
}
.markdown table th, .markdown table td {
@apply py-1 px-3 border border-zinc-500 dark:border-zinc-500;
}
.markdown table th {
@apply bg-zinc-100 dark:bg-zinc-900 text-zinc-900 dark:text-zinc-100;
}
.markdown table tr {
@apply bg-zinc-100 dark:bg-zinc-900;
}
.markdown table tr:nth-child(2n) {
@apply bg-zinc-200 dark:bg-zinc-800;
}
.markdown code {
@apply font-code;
}
.markdown ul.contains-task-list {
@apply list-none ml-4;
}
.markdown input[type="checkbox"]{
@apply mr-2 w-4 h-4 aspect-square p-2;
@apply appearance-none border border-zinc-500;
@apply disabled:bg-zinc-200 dark:disabled:bg-zinc-700 disabled:checked:bg-blue-500 dark:disabled:checked:bg-blue-400;
}
.markdown a {
@apply text-blue-500 dark:text-blue-400;
}
.markdown blockquote {
@apply pl-2 border-l-4 border-l-zinc-500;
}
.markdown hr {
@apply my-4 border-t-0 border-b-2 tablet:border-b-4 border-b-zinc-400 dark:border-b-zinc-700;
}
.markdown p {
@apply whitespace-normal;
}
.markdown img {
@apply rounded-lg;
}
.markdown ul {
@apply list-disc leading-loose;
}
.markdown ol {
@apply list-decimal leading-loose;
}
.markdown li {
@apply ml-8;
}
.markdown table {
@apply block w-full overflow-auto border-collapse mb-4 border-spacing-0;
}
.markdown table th, .markdown table td {
@apply py-1 px-3 border border-zinc-500 dark:border-zinc-500;
}
.markdown table th {
@apply bg-zinc-100 dark:bg-zinc-900 text-zinc-900 dark:text-zinc-100;
}
.markdown table tr {
@apply bg-zinc-100 dark:bg-zinc-900;
}
.markdown table tr:nth-child(2n) {
@apply bg-zinc-200 dark:bg-zinc-800;
}
.markdown ul.contains-task-list {
@apply list-none;
}
.markdown ul.contains-task-list li {
@apply ml-1 flex items-center;
}
.markdown input[type="checkbox"] {
@apply mr-2 w-4 h-4 aspect-square p-2;
@apply appearance-none border border-zinc-500;
@apply disabled:bg-zinc-200 dark:disabled:bg-zinc-700 disabled:checked:bg-blue-500 dark:disabled:checked:bg-blue-400;
}
.markdown blockquote {
@apply pl-2 border-l-4 border-l-zinc-500;
}
.markdown hr {
@apply my-4 border-t-0 border-b-2 tablet:border-b-4 border-b-zinc-400 dark:border-b-zinc-700;
}
}
src/utils/apiHelper/createErrorPayload.ts
+2 -1
View File
@@ -1,6 +1,7 @@
import ExtendedError from "utils/generalHelper/extendedError";
import { API_Error } from "types/api";
import { Constant } from "types/general/constant";
import ExtendedError from "utils/generalHelper/extendedError";
function createErrorPayload(
error: any,
src/utils/apiHelper/gdrive.ts
+2 -1
View File
@@ -1,6 +1,7 @@
import apiConfig from "config/api.config";
import { drive_v3, google } from "googleapis";
import apiConfig from "config/api.config";
//TODO: Move client_secret and refresh_token to config after setup page is done
const config = {
client_id:
src/utils/fileHelper/formatDate.ts
+1
View File
@@ -4,6 +4,7 @@ function getLocale() {
return window.navigator.languages[0];
return window.navigator.language;
}
function formatDate(date: Date, locale = getLocale()) {
return new Intl.DateTimeFormat(locale, {
year: "numeric",
src/utils/fileHelper/iconMap.ts
+3 -2
View File
@@ -1,5 +1,3 @@
import { typeGroup } from "./fileGroup";
import { extensionMap, overlapVideo } from "./typeMap";
import { IconType } from "react-icons";
import {
BsBoxFill,
@@ -20,6 +18,9 @@ import {
BsFileEarmarkZipFill,
} from "react-icons/bs";
import { typeGroup } from "./fileGroup";
import { extensionMap, overlapVideo } from "./typeMap";
const iconMap: Record<keyof typeof typeGroup, IconType> = {
"3d": BsBoxFill,
"archive": BsFileEarmarkZipFill,
src/app/trigger.ts → src/utils/fileHelper/trigger.ts
View File