+
+
+
+ window.open(`/api/raw/?path=${asPath}${hashedToken ? `&odpt=${hashedToken}` : ''}`)}
+ btnColor="blue"
+ btnText={t('Download')}
+ btnIcon="file-download"
+ btnTitle={t('Download the file directly through OneDrive')}
+ />
+ {
+ clipboard.copy(`${getBaseUrl()}/api/raw/?path=${asPath}${hashedToken ? `&odpt=${hashedToken}` : ''}`)
+ toast.success(t('Copied direct link to clipboard.'))
+ }}
+ btnColor="pink"
+ btnText={t('Copy direct link')}
+ btnIcon="copy"
+ btnTitle={t('Copy the permalink to the file to the clipboard')}
+ />
+ setMenuOpen(true)}
+ btnColor="teal"
+ btnText={t('Customise link')}
+ btnIcon="pen"
+ />
+
+
+ )
+}
+
+export default DownloadButtonGroup
diff --git a/src/components/FileListing.tsx b/src/components/FileListing.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..2532d691696545f8e157cfcfc6916b43fd75adef
--- /dev/null
+++ b/src/components/FileListing.tsx
@@ -0,0 +1,442 @@
+import type { OdFileObject, OdFolderChildren, OdFolderObject } from '../types'
+import { ParsedUrlQuery } from 'querystring'
+import { FC, MouseEventHandler, SetStateAction, useEffect, useRef, useState } from 'react'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import toast, { Toaster } from 'react-hot-toast'
+import emojiRegex from 'emoji-regex'
+
+import dynamic from 'next/dynamic'
+import { useRouter } from 'next/router'
+import { useTranslation } from 'next-i18next'
+
+import useLocalStorage from '../utils/useLocalStorage'
+import { getPreviewType, preview } from '../utils/getPreviewType'
+import { useProtectedSWRInfinite } from '../utils/fetchWithSWR'
+import { getExtension, getRawExtension, getFileIcon } from '../utils/getFileIcon'
+import { getStoredToken } from '../utils/protectedRouteHandler'
+import {
+ DownloadingToast,
+ downloadMultipleFiles,
+ downloadTreelikeMultipleFiles,
+ traverseFolder,
+} from './MultiFileDownloader'
+
+import { layouts } from './SwitchLayout'
+import Loading, { LoadingIcon } from './Loading'
+import FourOhFour from './FourOhFour'
+import Auth from './Auth'
+import TextPreview from './previews/TextPreview'
+import MarkdownPreview from './previews/MarkdownPreview'
+import CodePreview from './previews/CodePreview'
+import OfficePreview from './previews/OfficePreview'
+import AudioPreview from './previews/AudioPreview'
+import VideoPreview from './previews/VideoPreview'
+import PDFPreview from './previews/PDFPreview'
+import URLPreview from './previews/URLPreview'
+import ImagePreview from './previews/ImagePreview'
+import DefaultPreview from './previews/DefaultPreview'
+import { PreviewContainer } from './previews/Containers'
+
+import FolderListLayout from './FolderListLayout'
+import FolderGridLayout from './FolderGridLayout'
+
+// Disabling SSR for some previews
+const EPUBPreview = dynamic(() => import('./previews/EPUBPreview'), {
+ ssr: false,
+})
+
+/**
+ * Convert url query into path string
+ *
+ * @param query Url query property
+ * @returns Path string
+ */
+const queryToPath = (query?: ParsedUrlQuery) => {
+ if (query) {
+ const { path } = query
+ if (!path) return '/'
+ if (typeof path === 'string') return `/${encodeURIComponent(path)}`
+ return `/${path.map(p => encodeURIComponent(p)).join('/')}`
+ }
+ return '/'
+}
+
+// Render the icon of a folder child (may be a file or a folder), use emoji if the name of the child contains emoji
+const renderEmoji = (name: string) => {
+ const emoji = emojiRegex().exec(name)
+ return { render: emoji && !emoji.index, emoji }
+}
+const formatChildName = (name: string) => {
+ const { render, emoji } = renderEmoji(name)
+ return render ? name.replace(emoji ? emoji[0] : '', '').trim() : name
+}
+export const ChildName: FC<{ name: string; folder?: boolean }> = ({ name, folder }) => {
+ const original = formatChildName(name)
+ const extension = folder ? '' : getRawExtension(original)
+ const prename = folder ? original : original.substring(0, original.length - extension.length)
+ return (
+
+ {prename}
+
+ )
+}
+export const ChildIcon: FC<{ child: OdFolderChildren }> = ({ child }) => {
+ const { render, emoji } = renderEmoji(child.name)
+ return render ? (
+ {emoji ? emoji[0] : '📁'}
+ ) : (
+
+
+ )}
+
+ {readmeFile && (
+
+ {t('- showing {{count}} page(s) ', {
+ count: size,
+ totalFileNum: isLoadingMore ? '...' : folderChildren.length,
+ }) +
+ (isLoadingMore
+ ? t('of {{count}} file(s) -', { count: folderChildren.length, context: 'loading' })
+ : t('of {{count}} file(s) -', { count: folderChildren.length, context: 'loaded' }))}
+
+
+
+
+ )}
+
+ )
+ }
+
+ if ('file' in responses[0] && responses.length === 1) {
+ const file = responses[0].file as OdFileObject
+ const previewType = getPreviewType(getExtension(file.name), { video: Boolean(file.video) })
+
+ if (previewType) {
+ switch (previewType) {
+ case preview.image:
+ return
+
+ )
+}
+
+const FolderGridLayout = ({
+ path,
+ folderChildren,
+ selected,
+ toggleItemSelected,
+ totalSelected,
+ toggleTotalSelected,
+ totalGenerating,
+ handleSelectedDownload,
+ folderGenerating,
+ handleSelectedPermalink,
+ handleFolderDownload,
+ toast,
+}) => {
+ const clipboard = useClipboard()
+ const hashedToken = getStoredToken(path)
+
+ const { t } = useTranslation()
+
+ // Get item path from item name
+ const getItemPath = (name: string) => `${path === '/' ? '' : path}/${encodeURIComponent(name)}`
+
+ return (
+
+ {thumbnailUrl && !brokenThumbnail ? (
+ // eslint-disable-next-line @next/next/no-img-element
+ 
setBrokenThumbnail(true)}
+ />
+ ) : (
+
+
+
+
+ )}
+
+
+
+
+ {formatModifiedDateTime(c.lastModifiedDateTime)}
+
+
+
+ )
+}
+
+export default FolderGridLayout
diff --git a/src/components/FolderListLayout.tsx b/src/components/FolderListLayout.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..980b9803c7ad4cc3b4fa12c9070dcde28ff057d2
--- /dev/null
+++ b/src/components/FolderListLayout.tsx
@@ -0,0 +1,184 @@
+import type { OdFolderChildren } from '../types'
+
+import Link from 'next/link'
+import { FC } from 'react'
+import { useClipboard } from 'use-clipboard-copy'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { useTranslation } from 'next-i18next'
+
+import { getBaseUrl } from '../utils/getBaseUrl'
+import { humanFileSize, formatModifiedDateTime } from '../utils/fileDetails'
+
+import { Downloading, Checkbox, ChildIcon, ChildName } from './FileListing'
+import { getStoredToken } from '../utils/protectedRouteHandler'
+
+const FileListItem: FC<{ fileContent: OdFolderChildren }> = ({ fileContent: c }) => {
+ return (
+
+
+
+ {t('{{count}} item(s)', { count: folderChildren.length })}
+
+
+
+ {folderChildren.map((c: OdFolderChildren) => (
+
+
+
+ ))}
+
+ {c.folder ? (
+
+
+
+ {
+ clipboard.copy(`${getBaseUrl()}${getItemPath(c.name)}`)
+ toast(t('Copied folder permalink.'), { icon: '👌' })
+ }}
+ >
+
+ ) : (
+
+ {
+ clipboard.copy(
+ `${getBaseUrl()}/api/raw/?path=${getItemPath(c.name)}${
+ hashedToken ? `&odpt=${hashedToken}` : ''
+ }`
+ )
+ toast.success(t('Copied raw file permalink.'))
+ }}
+ >
+
+ )}
+
+ {!c.folder && !(c.name === '.password') && (
+ toggleItemSelected(c.id)}
+ title={t('Select file')}
+ />
+ )}
+
+
+
+
+
+ )
+}
+
+const FolderListLayout = ({
+ path,
+ folderChildren,
+ selected,
+ toggleItemSelected,
+ totalSelected,
+ toggleTotalSelected,
+ totalGenerating,
+ handleSelectedDownload,
+ folderGenerating,
+ handleSelectedPermalink,
+ handleFolderDownload,
+ toast,
+}) => {
+ const clipboard = useClipboard()
+ const hashedToken = getStoredToken(path)
+
+ const { t } = useTranslation()
+
+ // Get item path from item name
+ const getItemPath = (name: string) => `${path === '/' ? '' : path}/${encodeURIComponent(name)}`
+
+ return (
+
+
+
+
+
+ {formatModifiedDateTime(c.lastModifiedDateTime)}
+
+
+ {humanFileSize(c.size)}
+
+
+
+ )
+}
+
+export default FolderListLayout
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..5e39c671098e266c1dea082779998e3770959e7b
--- /dev/null
+++ b/src/components/Footer.tsx
@@ -0,0 +1,18 @@
+import config from '../../config/site.config'
+
+const createFooterMarkup = () => {
+ return {
+ __html: config.footer,
+ }
+}
+
+const Footer = () => {
+ return (
+
+ )
+}
+
+export default Footer
diff --git a/src/components/FourOhFour.tsx b/src/components/FourOhFour.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..a66460889527e2c6b4ddc9510d0bf2d90fe77b2e
--- /dev/null
+++ b/src/components/FourOhFour.tsx
@@ -0,0 +1,43 @@
+import Image from 'next/image'
+import { Trans } from 'next-i18next'
+
+const FourOhFour: React.FC<{ errorMsg: string }> = ({ errorMsg }) => {
+ return (
+
+
+
+ {folderChildren.map((c: OdFolderChildren) => (
+
+ {t('Name')}
+
+
+ {t('Last Modified')}
+
+
+ {t('Size')}
+
+
+ {t('Actions')}
+
+
+
+
+
+
+
+
+ ))}
+
+ {
+ clipboard.copy(`${getBaseUrl()}${`${path === '/' ? '' : path}/${encodeURIComponent(c.name)}`}`)
+ toast(t('Copied folder permalink.'), { icon: '👌' })
+ }}
+ >
+
+ ) : (
+
+ {
+ clipboard.copy(
+ `${getBaseUrl()}/api/raw/?path=${getItemPath(c.name)}${hashedToken ? `&odpt=${hashedToken}` : ''}`
+ )
+ toast.success(t('Copied raw file permalink.'))
+ }}
+ >
+
+ )}
+
+ {!c.folder && !(c.name === '.password') && (
+ toggleItemSelected(c.id)}
+ title={t('Select file')}
+ />
+ )}
+
+
+
+ )
+}
+
+export default FourOhFour
diff --git a/src/components/Loading.tsx b/src/components/Loading.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..4589467421d6375864cbf7052ba9f7e7d80d4686
--- /dev/null
+++ b/src/components/Loading.tsx
@@ -0,0 +1,24 @@
+const Loading: React.FC<{ loadingText: string }> = ({ loadingText }) => {
+ return (
+
+
+
+
+
+
+ {/* eslint-disable-next-line react/no-unescaped-entities */}
+ Oops, that's a four-oh-four.
+
+
+
+ {errorMsg}
+
+
+
+ Press{' '}
+
+ F12
+ {' '}
+ and open devtools for more details, or seek help at{' '}
+
+ onedrive-vercel-index discussions
+
+ .
+
+
+
+
+ )
+}
+
+// As there is no CSS-in-JS styling system, pass class list to override styles
+export const LoadingIcon: React.FC<{ className?: string }> = ({ className }) => {
+ return (
+
+ )
+}
+
+export default Loading
diff --git a/src/components/MultiFileDownloader.tsx b/src/components/MultiFileDownloader.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..69f7445b0354966e5da43a0ca0e8048677617b53
--- /dev/null
+++ b/src/components/MultiFileDownloader.tsx
@@ -0,0 +1,259 @@
+import { NextRouter } from 'next/router'
+import toast from 'react-hot-toast'
+import JSZip from 'jszip'
+import { useTranslation } from 'next-i18next'
+
+import { fetcher } from '../utils/fetchWithSWR'
+import { getStoredToken } from '../utils/protectedRouteHandler'
+
+/**
+ * A loading toast component with file download progress support
+ * @param props
+ * @param props.router Next router instance, used for reloading the page
+ * @param props.progress Current downloading and compression progress (returned by jszip metadata)
+ */
+export function DownloadingToast({ router, progress }: { router: NextRouter; progress?: string }) {
+ const { t } = useTranslation()
+
+ return (
+ {loadingText}
+
+
+ )
+}
+
+// Blob download helper
+export function downloadBlob({ blob, name }: { blob: Blob; name: string }) {
+ // Prepare for download
+ const el = document.createElement('a')
+ el.style.display = 'none'
+ document.body.appendChild(el)
+
+ // Download zip file
+ const bUrl = window.URL.createObjectURL(blob)
+ el.href = bUrl
+ el.download = name
+ el.click()
+ window.URL.revokeObjectURL(bUrl)
+ el.remove()
+}
+
+/**
+ * Download multiple files after compressing them into a zip
+ * @param toastId Toast ID to be used for toast notification
+ * @param files Files to be downloaded
+ * @param folder Optional folder name to hold files, otherwise flatten files in the zip
+ */
+export async function downloadMultipleFiles({
+ toastId,
+ router,
+ files,
+ folder,
+}: {
+ toastId: string
+ router: NextRouter
+ files: { name: string; url: string }[]
+ folder?: string
+}): Promise
+ {progress ? t('Downloading {{progress}}%', { progress }) : t('Downloading selected files...')}
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )
+}
+
+export default Navbar
diff --git a/src/components/SearchModal.tsx b/src/components/SearchModal.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..2b51a95b61493c61e9f731f277763627c0a09fa2
--- /dev/null
+++ b/src/components/SearchModal.tsx
@@ -0,0 +1,261 @@
+import axios from 'axios'
+import useSWR, { SWRResponse } from 'swr'
+import { Dispatch, Fragment, SetStateAction, useState } from 'react'
+import AwesomeDebouncePromise from 'awesome-debounce-promise'
+import { useAsync } from 'react-async-hook'
+import useConstant from 'use-constant'
+import { useTranslation } from 'next-i18next'
+
+import Link from 'next/link'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { Dialog, Transition } from '@headlessui/react'
+
+import type { OdDriveItem, OdSearchResult } from '../types'
+import { LoadingIcon } from './Loading'
+
+import { getFileIcon } from '../utils/getFileIcon'
+import { fetcher } from '../utils/fetchWithSWR'
+import siteConfig from '../../config/site.config'
+
+/**
+ * Extract the searched item's path in field 'parentReference' and convert it to the
+ * absolute path represented in onedrive-vercel-index
+ *
+ * @param path Path returned from the parentReference field of the driveItem
+ * @returns The absolute path of the driveItem in the search result
+ */
+function mapAbsolutePath(path: string): string {
+ // path is in the format of '/drive/root:/path/to/file', if baseDirectory is '/' then we split on 'root:',
+ // otherwise we split on the user defined 'baseDirectory'
+ const absolutePath = path.split(siteConfig.baseDirectory === '/' ? 'root:' : siteConfig.baseDirectory)
+ // path returned by the API may contain #, by doing a decodeURIComponent and then encodeURIComponent we can
+ // replace URL sensitive characters such as the # with %23
+ return absolutePath.length > 1 // solve https://github.com/spencerwooo/onedrive-vercel-index/issues/539
+ ? absolutePath[1]
+ .split('/')
+ .map(p => encodeURIComponent(decodeURIComponent(p)))
+ .join('/')
+ : ''
+}
+
+/**
+ * Implements a debounced search function that returns a promise that resolves to an array of
+ * search results.
+ *
+ * @returns A react hook for a debounced async search of the drive
+ */
+function useDriveItemSearch() {
+ const [query, setQuery] = useState('')
+ const searchDriveItem = async (q: string) => {
+ const { data } = await axios.get
+
+
+
+
+
+
+
+
+
+
+ )
+}
+
+function SearchResultItemLoadRemote({ result }: { result: OdSearchResult[number] }) {
+ const { data, error }: SWRResponse{driveItem.name}
+
+ {itemDescription}
+
+
+
+
+ )
+}
+
+export default withCookies(SwitchLang)
diff --git a/src/components/SwitchLayout.tsx b/src/components/SwitchLayout.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..97579a886e8d0946c843b0b4ae9754f13deceeb9
--- /dev/null
+++ b/src/components/SwitchLayout.tsx
@@ -0,0 +1,79 @@
+import { Fragment } from 'react'
+import { IconProp } from '@fortawesome/fontawesome-svg-core'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { Listbox, Transition } from '@headlessui/react'
+import { useTranslation } from 'next-i18next'
+
+import useLocalStorage from '../utils/useLocalStorage'
+
+export const layouts: Array<{ id: number; name: 'Grid' | 'List'; icon: IconProp }> = [
+ { id: 1, name: 'List', icon: 'th-list' },
+ { id: 2, name: 'Grid', icon: 'th' },
+]
+
+const SwitchLayout = () => {
+ const [preferredLayout, setPreferredLayout] = useLocalStorage('preferredLayout', layouts[0])
+
+ const { t } = useTranslation()
+
+ return (
+
+
+
+
+
+
+
+
+ {layouts.map(layout => (
+
+
+ ))}
+
+
+
+
+ )
+}
+
+export default SwitchLayout
diff --git a/src/components/previews/AudioPreview.tsx b/src/components/previews/AudioPreview.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..26beb62adbd2b2e24d1e3a8fcb6f5948ef0a313e
--- /dev/null
+++ b/src/components/previews/AudioPreview.tsx
@@ -0,0 +1,116 @@
+import type { OdFileObject } from '../../types'
+import { FC, useEffect, useRef, useState } from 'react'
+
+import ReactAudioPlayer from 'react-audio-player'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { useTranslation } from 'next-i18next'
+import { useRouter } from 'next/router'
+
+import DownloadButtonGroup from '../DownloadBtnGtoup'
+import { DownloadBtnContainer, PreviewContainer } from './Containers'
+import { LoadingIcon } from '../Loading'
+import { formatModifiedDateTime } from '../../utils/fileDetails'
+import { getStoredToken } from '../../utils/protectedRouteHandler'
+
+enum PlayerState {
+ Loading,
+ Ready,
+ Playing,
+ Paused,
+}
+
+const AudioPreview: FC<{ file: OdFileObject }> = ({ file }) => {
+ const { t } = useTranslation()
+ const { asPath } = useRouter()
+ const hashedToken = getStoredToken(asPath)
+
+ const rapRef = useRef
+
+
+
+
+
+
+
+ {!brokenThumbnail ? (
+
+ {/* eslint-disable-next-line @next/next/no-img-element */}
+ 
setBrokenThumbnail(true)}
+ />
+
+ ) : (
+
+
+
+
+
+ {file.name}
+
+ {t('Last modified:') + ' ' + formatModifiedDateTime(file.lastModifiedDateTime)}
+
+ {children}
+}
+
+export function DownloadBtnContainer({ children }): JSX.Element {
+ return (
+
+ {children}
+
+ )
+}
diff --git a/src/components/previews/DefaultPreview.tsx b/src/components/previews/DefaultPreview.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..ac7a6d366c1419281f41d6eaf26df6a6f2cffd2b
--- /dev/null
+++ b/src/components/previews/DefaultPreview.tsx
@@ -0,0 +1,82 @@
+import type { OdFileObject } from '../../types'
+import { FC } from 'react'
+
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { useTranslation } from 'next-i18next'
+
+import { getFileIcon } from '../../utils/getFileIcon'
+import { formatModifiedDateTime, humanFileSize } from '../../utils/fileDetails'
+
+import DownloadButtonGroup from '../DownloadBtnGtoup'
+import { DownloadBtnContainer, PreviewContainer } from './Containers'
+
+const DefaultPreview: FC<{ file: OdFileObject }> = ({ file }) => {
+ const { t } = useTranslation()
+
+ return (
+
+
+
+
+
+
+ )
+}
+
+export default DefaultPreview
diff --git a/src/components/previews/EPUBPreview.tsx b/src/components/previews/EPUBPreview.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..82d4e6c505d6629ec88c437a7dcdb3d00056eac7
--- /dev/null
+++ b/src/components/previews/EPUBPreview.tsx
@@ -0,0 +1,77 @@
+import type { OdFileObject } from '../../types'
+
+import { FC, useEffect, useRef, useState } from 'react'
+import { ReactReader } from 'react-reader'
+import { useRouter } from 'next/router'
+import { useTranslation } from 'next-i18next'
+
+import Loading from '../Loading'
+import DownloadButtonGroup from '../DownloadBtnGtoup'
+import { DownloadBtnContainer } from './Containers'
+import { getStoredToken } from '../../utils/protectedRouteHandler'
+
+const EPUBPreview: FC<{ file: OdFileObject }> = ({ file }) => {
+ const { asPath } = useRouter()
+ const hashedToken = getStoredToken(asPath)
+
+ const [epubContainerWidth, setEpubContainerWidth] = useState(400)
+ const epubContainer = useRef
+
+
+
+
+ {file.name}
+
+
+
+
+
+ {t('Last modified')}
+ {formatModifiedDateTime(file.lastModifiedDateTime)}
+
+
+
+ {t('File size')}
+ {humanFileSize(file.size)}
+
+
+
+ {t('MIME type')}
+ {file.file?.mimeType ?? t('Unavailable')}
+
+
+
+
+
+ {t('Hashes')}
+ | + Quick XOR + | ++ {file.file.hashes?.quickXorHash ?? t('Unavailable')} + | +
| + SHA1 + | ++ {file.file.hashes?.sha1Hash ?? t('Unavailable')} + | +
| + SHA256 + | ++ {file.file.hashes?.sha256Hash ?? t('Unavailable')} + | +
+
+
+
+ )
+}
+
+export default EPUBPreview
diff --git a/src/components/previews/ImagePreview.tsx b/src/components/previews/ImagePreview.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..00e2a66cf54c9fbbfc30a8c423eeef098ec2f236
--- /dev/null
+++ b/src/components/previews/ImagePreview.tsx
@@ -0,0 +1,33 @@
+import type { OdFileObject } from '../../types'
+
+import { FC } from 'react'
+import { useRouter } from 'next/router'
+
+import { PreviewContainer, DownloadBtnContainer } from './Containers'
+import DownloadButtonGroup from '../DownloadBtnGtoup'
+import { getStoredToken } from '../../utils/protectedRouteHandler'
+
+const ImagePreview: FC<{ file: OdFileObject }> = ({ file }) => {
+ const { asPath } = useRouter()
+ const hashedToken = getStoredToken(asPath)
+
+ return (
+ <>
+
+
+
+
+
+ fixEpub(rendition)}
+ loadingView={
+
+ {children}
+
+ )
+ }
+
+ const match = /language-(\w+)/.exec(className || '')
+ return (
+
+
+
+ {standalone && (
+
+
+ )}
+
+ )
+}
+
+export default MarkdownPreview
diff --git a/src/components/previews/OfficePreview.tsx b/src/components/previews/OfficePreview.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..ce3df7959b2df25d8d932852b56fcdf7dcc0131c
--- /dev/null
+++ b/src/components/previews/OfficePreview.tsx
@@ -0,0 +1,39 @@
+import type { OdFileObject } from '../../types'
+import { FC, useEffect, useRef, useState } from 'react'
+import { useRouter } from 'next/router'
+
+import Preview from 'preview-office-docs'
+
+import DownloadButtonGroup from '../DownloadBtnGtoup'
+import { DownloadBtnContainer } from './Containers'
+import { getBaseUrl } from '../../utils/getBaseUrl'
+import { getStoredToken } from '../../utils/protectedRouteHandler'
+
+const OfficePreview: FC<{ file: OdFileObject }> = ({ file }) => {
+ const { asPath } = useRouter()
+ const hashedToken = getStoredToken(asPath)
+
+ const docContainer = useRef
+ {/* Using rehypeRaw to render HTML inside Markdown is potentially dangerous, use under safe environments. (#18) */}
+
+ {content}
+
+
+
+
+
+
+ )
+}
+
+export default OfficePreview
diff --git a/src/components/previews/PDFPreview.tsx b/src/components/previews/PDFPreview.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..1849ee21cfaa61e40a2b7c6d184ceacfba30b6e2
--- /dev/null
+++ b/src/components/previews/PDFPreview.tsx
@@ -0,0 +1,28 @@
+import { useRouter } from 'next/router'
+import { getBaseUrl } from '../../utils/getBaseUrl'
+import { getStoredToken } from '../../utils/protectedRouteHandler'
+import DownloadButtonGroup from '../DownloadBtnGtoup'
+import { DownloadBtnContainer } from './Containers'
+
+const PDFEmbedPreview: React.FC<{ file: any }> = ({ file }) => {
+ const { asPath } = useRouter()
+ const hashedToken = getStoredToken(asPath)
+
+ const pdfPath = encodeURIComponent(
+ `${getBaseUrl()}/api/raw/?path=${asPath}${hashedToken ? `&odpt=${hashedToken}` : ''}`
+ )
+ const url = `https://mozilla.github.io/pdf.js/web/viewer.html?file=${pdfPath}`
+
+ return (
+
+
+
+
+
+
+ )
+}
+
+export default PDFEmbedPreview
diff --git a/src/components/previews/TextPreview.tsx b/src/components/previews/TextPreview.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..c3e4b4664346b6f0f02742f3ab37db9514ec7a4a
--- /dev/null
+++ b/src/components/previews/TextPreview.tsx
@@ -0,0 +1,61 @@
+import { useRouter } from 'next/router'
+import { useTranslation } from 'next-i18next'
+
+import FourOhFour from '../FourOhFour'
+import Loading from '../Loading'
+import DownloadButtonGroup from '../DownloadBtnGtoup'
+import useFileContent from '../../utils/fetchOnMount'
+import { DownloadBtnContainer, PreviewContainer } from './Containers'
+
+const TextPreview = ({ file }) => {
+ const { asPath } = useRouter()
+ const { t } = useTranslation()
+
+ const { response: content, error, validating } = useFileContent(`/api/raw/?path=${asPath}`, asPath)
+ if (error) {
+ return (
+
+
+
+
+
+
+
+
+
+ )
+}
+
+export default TextPreview
diff --git a/src/components/previews/URLPreview.tsx b/src/components/previews/URLPreview.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..06623ff9e0272d86e5541bd0979de756349a6744
--- /dev/null
+++ b/src/components/previews/URLPreview.tsx
@@ -0,0 +1,66 @@
+import { useRouter } from 'next/router'
+import { useTranslation } from 'next-i18next'
+
+import FourOhFour from '../FourOhFour'
+import Loading from '../Loading'
+import { DownloadButton } from '../DownloadBtnGtoup'
+import useFileContent from '../../utils/fetchOnMount'
+import { DownloadBtnContainer, PreviewContainer } from './Containers'
+
+const parseDotUrl = (content: string): string | undefined => {
+ return content
+ .split('\n')
+ .find(line => line.startsWith('URL='))
+ ?.split('=')[1]
+}
+
+const TextPreview = ({ file }) => {
+ const { asPath } = useRouter()
+ const { t } = useTranslation()
+
+ const { response: content, error, validating } = useFileContent(`/api/raw/?path=${asPath}`, asPath)
+ if (error) {
+ return (
+ {content}
+
+
+
+
+
+
+ )
+}
+
+export default TextPreview
diff --git a/src/components/previews/VideoPreview.tsx b/src/components/previews/VideoPreview.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..4e700eadd89444a67871952816b8a326c3b7e419
--- /dev/null
+++ b/src/components/previews/VideoPreview.tsx
@@ -0,0 +1,178 @@
+import type { OdFileObject } from '../../types'
+
+import { FC, useEffect, useState } from 'react'
+import { useRouter } from 'next/router'
+import { useTranslation } from 'next-i18next'
+
+import axios from 'axios'
+import toast from 'react-hot-toast'
+import Plyr from 'plyr-react'
+import { useAsync } from 'react-async-hook'
+import { useClipboard } from 'use-clipboard-copy'
+
+import { getBaseUrl } from '../../utils/getBaseUrl'
+import { getExtension } from '../../utils/getFileIcon'
+import { getStoredToken } from '../../utils/protectedRouteHandler'
+
+import { DownloadButton } from '../DownloadBtnGtoup'
+import { DownloadBtnContainer, PreviewContainer } from './Containers'
+import FourOhFour from '../FourOhFour'
+import Loading from '../Loading'
+import CustomEmbedLinkMenu from '../CustomEmbedLinkMenu'
+
+import 'plyr-react/plyr.css'
+
+const VideoPlayer: FC<{
+ videoName: string
+ videoUrl: string
+ width?: number
+ height?: number
+ thumbnail: string
+ subtitle: string
+ isFlv: boolean
+ mpegts: any
+}> = ({ videoName, videoUrl, width, height, thumbnail, subtitle, isFlv, mpegts }) => {
+ useEffect(() => {
+ // Really really hacky way to inject subtitles as file blobs into the video element
+ axios
+ .get(subtitle, { responseType: 'blob' })
+ .then(resp => {
+ const track = document.querySelector('track')
+ track?.setAttribute('src', URL.createObjectURL(resp.data))
+ })
+ .catch(() => {
+ console.log('Could not load subtitle.')
+ })
+
+ if (isFlv) {
+ const loadFlv = () => {
+ // Really hacky way to get the exposed video element from Plyr
+ const video = document.getElementById('plyr')
+ const flv = mpegts.createPlayer({ url: videoUrl, type: 'flv' })
+ flv.attachMediaElement(video)
+ flv.load()
+ }
+ loadFlv()
+ }
+ }, [videoUrl, isFlv, mpegts, subtitle])
+
+ // Common plyr configs, including the video source and plyr options
+ const plyrSource = {
+ type: 'video',
+ title: videoName,
+ poster: thumbnail,
+ tracks: [{ kind: 'captions', label: videoName, src: '', default: true }],
+ }
+ const plyrOptions: Plyr.Options = {
+ ratio: `${width ?? 16}:${height ?? 9}`,
+ fullscreen: { iosNative: true },
+ }
+ if (!isFlv) {
+ // If the video is not in flv format, we can use the native plyr and add sources directly with the video URL
+ plyrSource['sources'] = [{ src: videoUrl }]
+ }
+ return {content}
+
+ window.open(parseDotUrl(content) ?? '')}
+ btnColor="blue"
+ btnText={t('Open URL')}
+ btnIcon="external-link-alt"
+ btnTitle={t('Open URL{{url}}', { url: ' ' + parseDotUrl(content) ?? '' })}
+ />
+
+
+ window.open(videoUrl)}
+ btnColor="blue"
+ btnText={t('Download')}
+ btnIcon="file-download"
+ />
+ {
+ clipboard.copy(`${getBaseUrl()}/api/raw/?path=${asPath}${hashedToken ? `&odpt=${hashedToken}` : ''}`)
+ toast.success(t('Copied direct link to clipboard.'))
+ }}
+ btnColor="pink"
+ btnText={t('Copy direct link')}
+ btnIcon="copy"
+ />
+ setMenuOpen(true)}
+ btnColor="teal"
+ btnText={t('Customise link')}
+ btnIcon="pen"
+ />
+
+ window.open(`iina://weblink?url=${getBaseUrl()}${videoUrl}`)}
+ btnText="IINA"
+ btnImage="/players/iina.png"
+ />
+ window.open(`vlc://${getBaseUrl()}${videoUrl}`)}
+ btnText="VLC"
+ btnImage="/players/vlc.png"
+ />
+ window.open(`potplayer://${getBaseUrl()}${videoUrl}`)}
+ btnText="PotPlayer"
+ btnImage="/players/potplayer.png"
+ />
+ window.open(`nplayer-http://${window?.location.hostname ?? ''}${videoUrl}`)}
+ btnText="nPlayer"
+ btnImage="/players/nplayer.png"
+ />
+
+
+
+ {siteConfig.title}
+
+
+
+
+
+
+
+ )
+}
+
+export async function getServerSideProps({ locale }) {
+ return {
+ props: {
+ ...(await serverSideTranslations(locale, ['common'])),
+ },
+ }
+}
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..09ad03029dc39503bcd6485e127df0141a327fef
--- /dev/null
+++ b/src/pages/_app.tsx
@@ -0,0 +1,132 @@
+import '@fortawesome/fontawesome-svg-core/styles.css'
+
+import '../styles/globals.css'
+import '../styles/markdown-github.css'
+import { Analytics } from '@vercel/analytics/react';
+
+// Require had to be used to prevent SSR failure in Next.js
+// Related discussion: https://github.com/FortAwesome/Font-Awesome/issues/19348
+const { library, config } = require('@fortawesome/fontawesome-svg-core')
+config.autoAddCss = false
+
+import {
+ faFileImage,
+ faFilePdf,
+ faFileWord,
+ faFilePowerpoint,
+ faFileExcel,
+ faFileAudio,
+ faFileVideo,
+ faFileArchive,
+ faFileCode,
+ faFileAlt,
+ faFile,
+ faFolder,
+ faCopy,
+ faArrowAltCircleDown,
+ faTrashAlt,
+ faEnvelope,
+ faFlag,
+ faCheckCircle,
+} from '@fortawesome/free-regular-svg-icons'
+import {
+ faSearch,
+ faPen,
+ faCheck,
+ faPlus,
+ faMinus,
+ faCopy as faCopySolid,
+ faAngleRight,
+ faDownload,
+ faMusic,
+ faArrowLeft,
+ faArrowRight,
+ faFileDownload,
+ faUndo,
+ faBook,
+ faKey,
+ faSignOutAlt,
+ faCloud,
+ faChevronCircleDown,
+ faChevronDown,
+ faLink,
+ faExternalLinkAlt,
+ faExclamationCircle,
+ faExclamationTriangle,
+ faTh,
+ faThLarge,
+ faThList,
+ faHome,
+ faLanguage,
+} from '@fortawesome/free-solid-svg-icons'
+import * as Icons from '@fortawesome/free-brands-svg-icons'
+
+import type { AppProps } from 'next/app'
+import NextNProgress from 'nextjs-progressbar'
+import { appWithTranslation } from 'next-i18next'
+
+// import all brand icons with tree-shaking so all icons can be referenced in the app
+const iconList = Object.keys(Icons)
+ .filter(k => k !== 'fab' && k !== 'prefix')
+ .map(icon => Icons[icon])
+
+library.add(
+ faFileImage,
+ faFilePdf,
+ faFileWord,
+ faFilePowerpoint,
+ faFileExcel,
+ faFileAudio,
+ faFileVideo,
+ faFileArchive,
+ faFileCode,
+ faFileAlt,
+ faFile,
+ faFlag,
+ faFolder,
+ faMusic,
+ faArrowLeft,
+ faArrowRight,
+ faAngleRight,
+ faFileDownload,
+ faCopy,
+ faCopySolid,
+ faPlus,
+ faMinus,
+ faDownload,
+ faLink,
+ faUndo,
+ faBook,
+ faArrowAltCircleDown,
+ faKey,
+ faTrashAlt,
+ faSignOutAlt,
+ faEnvelope,
+ faCloud,
+ faChevronCircleDown,
+ faExternalLinkAlt,
+ faExclamationCircle,
+ faExclamationTriangle,
+ faHome,
+ faCheck,
+ faCheckCircle,
+ faSearch,
+ faChevronDown,
+ faTh,
+ faThLarge,
+ faThList,
+ faLanguage,
+ faPen,
+ ...iconList
+)
+
+function MyApp({ Component, pageProps }: AppProps) {
+ return (
+ <>
+
+
+ {siteConfig.title}
+
+
+
+
+
+
+
+ )
+}
+
+export async function getServerSideProps({ locale }) {
+ return {
+ props: {
+ ...(await serverSideTranslations(locale, ['common'])),
+ },
+ }
+}
diff --git a/src/pages/onedrive-vercel-index-oauth/step-1.tsx b/src/pages/onedrive-vercel-index-oauth/step-1.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..255478d96fb00383dd8248471690b741a8539906
--- /dev/null
+++ b/src/pages/onedrive-vercel-index-oauth/step-1.tsx
@@ -0,0 +1,156 @@
+import Head from 'next/head'
+import Image from 'next/image'
+import { useRouter } from 'next/router'
+import { useTranslation, Trans } from 'next-i18next'
+import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
+
+import siteConfig from '../../../config/site.config'
+import apiConfig from '../../../config/api.config'
+import Navbar from '../../components/Navbar'
+import Footer from '../../components/Footer'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+
+export default function OAuthStep1() {
+ const router = useRouter()
+
+ const { t } = useTranslation()
+
+ return (
+
+
+
+
+
+ {t('OAuth Step 1 - {{title}}', { title: siteConfig.title })}
+
+
+
+
+
+
+
+ )
+}
+
+export async function getServerSideProps({ locale }) {
+ return {
+ props: {
+ ...(await serverSideTranslations(locale, ['common'])),
+ },
+ }
+}
diff --git a/src/pages/onedrive-vercel-index-oauth/step-2.tsx b/src/pages/onedrive-vercel-index-oauth/step-2.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..f4f912ce2f4ec031b2fb44b3cf15708d3863eef7
--- /dev/null
+++ b/src/pages/onedrive-vercel-index-oauth/step-2.tsx
@@ -0,0 +1,150 @@
+import Head from 'next/head'
+import Image from 'next/image'
+import { useRouter } from 'next/router'
+import { useState } from 'react'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { useTranslation, Trans } from 'next-i18next'
+import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
+
+import siteConfig from '../../../config/site.config'
+import Navbar from '../../components/Navbar'
+import Footer from '../../components/Footer'
+import { LoadingIcon } from '../../components/Loading'
+import { extractAuthCodeFromRedirected, generateAuthorisationUrl } from '../../utils/oAuthHandler'
+
+export default function OAuthStep2() {
+ const router = useRouter()
+
+ const [oAuthRedirectedUrl, setOAuthRedirectedUrl] = useState('')
+ const [authCode, setAuthCode] = useState('')
+ const [buttonLoading, setButtonLoading] = useState(false)
+
+ const { t } = useTranslation()
+
+ const oAuthUrl = generateAuthorisationUrl()
+
+ return (
+
+
+
+
+
+
+ + {t('Welcome to your new onedrive-vercel-index 🎉')} +
+ +{t('Step 1/3: Preparations')}
+ +
+
+ access_token or{' '}
+ refresh_token{' '}
+ is present on this deployed instance. Check the following configurations before proceeding with
+ authorising onedrive-vercel-index with your own Microsoft account.
+
+
+
+
+
+
+ | + CLIENT_ID + | +
+ {apiConfig.clientId}
+ |
+
| + CLIENT_SECRET* + | +
+ {apiConfig.obfuscatedClientSecret}
+ |
+
| + REDIRECT_URI + | +
+ {apiConfig.redirectUri}
+ |
+
| + Auth API URL + | +
+ {apiConfig.authApi}
+ |
+
| + Drive API URL + | +
+ {apiConfig.driveApi}
+ |
+
| + API Scope + | +
+ {apiConfig.scope}
+ |
+
+ /config/api.config.js and redeploy this instance.
+
+
+
+
+
+ {t('OAuth Step 2 - {{title}}', { title: siteConfig.title })}
+
+
+
+
+
+
+
+ )
+}
+
+export async function getServerSideProps({ locale }) {
+ return {
+ props: {
+ ...(await serverSideTranslations(locale, ['common'])),
+ },
+ }
+}
diff --git a/src/pages/onedrive-vercel-index-oauth/step-3.tsx b/src/pages/onedrive-vercel-index-oauth/step-3.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..b21af3a4637c25cf0c7577410a3e68034e29201f
--- /dev/null
+++ b/src/pages/onedrive-vercel-index-oauth/step-3.tsx
@@ -0,0 +1,265 @@
+import Head from 'next/head'
+import Image from 'next/image'
+import { useRouter } from 'next/router'
+import { useEffect, useState } from 'react'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { useTranslation, Trans } from 'next-i18next'
+import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
+
+import siteConfig from '../../../config/site.config'
+import Navbar from '../../components/Navbar'
+import Footer from '../../components/Footer'
+
+import { getAuthPersonInfo, requestTokenWithAuthCode, sendTokenToServer } from '../../utils/oAuthHandler'
+import { LoadingIcon } from '../../components/Loading'
+
+export default function OAuthStep3({ accessToken, expiryTime, refreshToken, error, description, errorUri }) {
+ const router = useRouter()
+ const [expiryTimeLeft, setExpiryTimeLeft] = useState(expiryTime)
+
+ const { t } = useTranslation()
+
+ useEffect(() => {
+ if (!expiryTimeLeft) return
+
+ const intervalId = setInterval(() => {
+ setExpiryTimeLeft(expiryTimeLeft - 1)
+ }, 1000)
+
+ return () => clearInterval(intervalId)
+ }, [expiryTimeLeft])
+
+ const [buttonContent, setButtonContent] = useState(
+
+
+
+
+
+
+ + {t('Welcome to your new onedrive-vercel-index 🎉')} +
+ +{t('Step 2/3: Get authorisation code')}
+ +
+
{
+ window.open(oAuthUrl)
+ }}
+ >
+
+
+
+
+
+ {oAuthUrl}
+
+
+
+
+
+ {
+ setOAuthRedirectedUrl(e.target.value)
+ setAuthCode(extractAuthCodeFromRedirected(e.target.value))
+ }}
+ />
+
+ {t('The authorisation code extracted is:')}
++ {authCode ?? {t('Waiting for code...')}} +
+ ++ {authCode + ? t('✅ You can now proceed onto the next step: requesting your access token and refresh token.') + : t('❌ No valid code extracted.')} +
+ +
+
+
+
+ {t('Store tokens')}
+ )
+ const [buttonError, setButtonError] = useState(false)
+
+ const sendAuthTokensToServer = async () => {
+ setButtonError(false)
+ setButtonContent(
+
+ {t('Storing tokens')}
+ )
+
+ // verify identity of the authenticated user with the Microsoft Graph API
+ const { data, status } = await getAuthPersonInfo(accessToken)
+ if (status !== 200) {
+ setButtonError(true)
+ setButtonContent(
+
+ {t('Error validating identify, restart')}
+ )
+ return
+ }
+ if (data.userPrincipalName !== siteConfig.userPrincipalName) {
+ setButtonError(true)
+ setButtonContent(
+
+ {t('Do not pretend to be the site owner')}
+ )
+ return
+ }
+
+ await sendTokenToServer(accessToken, refreshToken, expiryTime)
+ .then(() => {
+ setButtonError(false)
+ setButtonContent(
+
+ {t('Stored! Going home...')}
+ )
+ setTimeout(() => {
+ router.push('/')
+ }, 2000)
+ })
+ .catch(_ => {
+ setButtonError(true)
+ setButtonContent(
+
+ {t('Error storing the token')}
+ )
+ })
+ }
+
+ return (
+
+
+ {t('OAuth Step 3 - {{title}}', { title: siteConfig.title })}
+
+
+
+
+
+
+
+ )
+}
+
+export async function getServerSideProps({ query, locale }) {
+ const { authCode } = query
+
+ // Return if no auth code is present
+ if (!authCode) {
+ return {
+ props: {
+ error: 'No auth code present',
+ description: 'Where is the auth code? Did you follow step 2 you silly donut?',
+ ...(await serverSideTranslations(locale, ['common'])),
+ },
+ }
+ }
+
+ const response = await requestTokenWithAuthCode(authCode)
+
+ // If error response, return invalid
+ if ('error' in response) {
+ return {
+ props: {
+ error: response.error,
+ description: response.errorDescription,
+ errorUri: response.errorUri,
+ ...(await serverSideTranslations(locale, ['common'])),
+ },
+ }
+ }
+
+ const { expiryTime, accessToken, refreshToken } = response
+
+ return {
+ props: {
+ error: null,
+ expiryTime,
+ accessToken,
+ refreshToken,
+ ...(await serverSideTranslations(locale, ['common'])),
+ },
+ }
+}
diff --git a/src/styles/globals.css b/src/styles/globals.css
new file mode 100644
index 0000000000000000000000000000000000000000..8b73a857227744358498f31f63b46a1616c88e83
--- /dev/null
+++ b/src/styles/globals.css
@@ -0,0 +1,30 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer utilities {
+ /* Chrome, Safari and Opera */
+ .no-scrollbar::-webkit-scrollbar {
+ display: none;
+ }
+
+ .no-scrollbar {
+ -ms-overflow-style: none; /* IE and Edge */
+ scrollbar-width: none; /* Firefox */
+ }
+}
+
+.react-pdf__Page__canvas {
+ @apply mx-auto border border-gray-300/40 shadow;
+}
+
+.markdown-body ul {
+ @apply list-disc;
+}
+.markdown-body ol {
+ @apply list-decimal;
+}
+pre[class*='language-'],
+code[class*='language-'] {
+ @apply font-mono !important;
+}
diff --git a/src/styles/markdown-github.css b/src/styles/markdown-github.css
new file mode 100644
index 0000000000000000000000000000000000000000..b2687a953d93b2630663678a313db0e60dac521c
--- /dev/null
+++ b/src/styles/markdown-github.css
@@ -0,0 +1,1163 @@
+.markdown-body .octicon {
+ display: inline-block;
+ fill: currentColor;
+ vertical-align: text-bottom;
+}
+
+.markdown-body .anchor {
+ float: left;
+ line-height: 1;
+ margin-left: -20px;
+ padding-right: 4px;
+}
+
+.markdown-body .anchor:focus {
+ outline: none;
+}
+
+.markdown-body h1 .octicon-link,
+.markdown-body h2 .octicon-link,
+.markdown-body h3 .octicon-link,
+.markdown-body h4 .octicon-link,
+.markdown-body h5 .octicon-link,
+.markdown-body h6 .octicon-link {
+ color: #1b1f23;
+ vertical-align: middle;
+ visibility: hidden;
+}
+
+.markdown-body h1:hover .anchor,
+.markdown-body h2:hover .anchor,
+.markdown-body h3:hover .anchor,
+.markdown-body h4:hover .anchor,
+.markdown-body h5:hover .anchor,
+.markdown-body h6:hover .anchor {
+ text-decoration: none;
+}
+
+.markdown-body h1:hover .anchor .octicon-link,
+.markdown-body h2:hover .anchor .octicon-link,
+.markdown-body h3:hover .anchor .octicon-link,
+.markdown-body h4:hover .anchor .octicon-link,
+.markdown-body h5:hover .anchor .octicon-link,
+.markdown-body h6:hover .anchor .octicon-link {
+ visibility: visible;
+}
+
+.markdown-body h1:hover .anchor .octicon-link:before,
+.markdown-body h2:hover .anchor .octicon-link:before,
+.markdown-body h3:hover .anchor .octicon-link:before,
+.markdown-body h4:hover .anchor .octicon-link:before,
+.markdown-body h5:hover .anchor .octicon-link:before,
+.markdown-body h6:hover .anchor .octicon-link:before {
+ width: 16px;
+ height: 16px;
+ content: ' ';
+ display: inline-block;
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' version='1.1' width='16' height='16' aria-hidden='true'%3E%3Cpath fill-rule='evenodd' d='M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z'%3E%3C/path%3E%3C/svg%3E");
+}
+.markdown-body {
+ -ms-text-size-adjust: 100%;
+ -webkit-text-size-adjust: 100%;
+ line-height: 1.5;
+ color: #24292e;
+ background-color: #ffffff;
+ font-size: 16px;
+ line-height: 1.5;
+ word-wrap: break-word;
+}
+
+.markdown-body details {
+ display: block;
+}
+
+.markdown-body summary {
+ display: list-item;
+}
+
+.markdown-body a {
+ background-color: initial;
+}
+
+.markdown-body a:active,
+.markdown-body a:hover {
+ outline-width: 0;
+}
+
+.markdown-body strong {
+ font-weight: inherit;
+ font-weight: bolder;
+}
+
+.markdown-body h1 {
+ font-size: 2em;
+ margin: 0.67em 0;
+}
+
+.markdown-body img {
+ border-style: none;
+}
+
+.markdown-body code,
+.markdown-body kbd,
+.markdown-body pre {
+ font-family: monospace, monospace;
+ font-size: 1em;
+}
+
+.markdown-body hr {
+ box-sizing: initial;
+ height: 0;
+ overflow: visible;
+}
+
+.markdown-body input {
+ font: inherit;
+ margin: 0;
+}
+
+.markdown-body input {
+ overflow: visible;
+}
+
+.markdown-body [type='checkbox'] {
+ box-sizing: border-box;
+ padding: 0;
+}
+
+.markdown-body * {
+ box-sizing: border-box;
+}
+
+.markdown-body input {
+ font-family: inherit;
+ font-size: inherit;
+ line-height: inherit;
+}
+
+.markdown-body a {
+ color: rgba(2, 132, 199);
+ text-decoration: none;
+}
+
+.markdown-body a:hover {
+ color: rgba(3, 105, 161);
+ text-decoration: underline;
+}
+
+.markdown-body strong {
+ font-weight: 600;
+}
+
+.markdown-body hr {
+ height: 0;
+ margin: 15px 0;
+ overflow: hidden;
+ background: transparent;
+ border: 0;
+ border-bottom: 1px solid #dfe2e5;
+}
+
+.markdown-body hr:after,
+.markdown-body hr:before {
+ display: table;
+ content: '';
+}
+
+.markdown-body hr:after {
+ clear: both;
+}
+
+.markdown-body table {
+ border-spacing: 0;
+ border-collapse: collapse;
+}
+
+.markdown-body td,
+.markdown-body th {
+ padding: 0;
+}
+
+.markdown-body details summary {
+ cursor: pointer;
+}
+
+.markdown-body kbd {
+ display: inline-block;
+ padding: 3px 5px;
+ font: 11px SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace;
+ line-height: 10px;
+ color: #444d56;
+ vertical-align: middle;
+ background-color: #fafbfc;
+ border: 1px solid #d1d5da;
+ border-radius: 3px;
+ box-shadow: inset 0 -1px 0 #d1d5da;
+}
+
+.markdown-body h1,
+.markdown-body h2,
+.markdown-body h3,
+.markdown-body h4,
+.markdown-body h5,
+.markdown-body h6 {
+ margin-top: 0;
+ margin-bottom: 0;
+}
+
+.markdown-body h1 {
+ font-size: 32px;
+}
+
+.markdown-body h1,
+.markdown-body h2 {
+ font-weight: 600;
+}
+
+.markdown-body h2 {
+ font-size: 24px;
+}
+
+.markdown-body h3 {
+ font-size: 20px;
+}
+
+.markdown-body h3,
+.markdown-body h4 {
+ font-weight: 600;
+}
+
+.markdown-body h4 {
+ font-size: 16px;
+}
+
+.markdown-body h5 {
+ font-size: 14px;
+}
+
+.markdown-body h5,
+.markdown-body h6 {
+ font-weight: 600;
+}
+
+.markdown-body h6 {
+ font-size: 12px;
+}
+
+.markdown-body p {
+ margin-top: 0;
+ margin-bottom: 10px;
+}
+
+.markdown-body blockquote {
+ margin: 0;
+}
+
+.markdown-body ol,
+.markdown-body ul {
+ padding-left: 0;
+ margin-top: 0;
+ margin-bottom: 0;
+}
+
+.markdown-body ol ol,
+.markdown-body ul ol {
+ list-style-type: lower-roman;
+}
+
+.markdown-body ol ol ol,
+.markdown-body ol ul ol,
+.markdown-body ul ol ol,
+.markdown-body ul ul ol {
+ list-style-type: lower-alpha;
+}
+
+.markdown-body dd {
+ margin-left: 0;
+}
+
+.markdown-body code,
+.markdown-body pre {
+ font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace;
+ font-size: 12px;
+}
+
+.markdown-body pre {
+ margin-top: 0;
+ margin-bottom: 0;
+}
+
+.markdown-body input::-webkit-inner-spin-button,
+.markdown-body input::-webkit-outer-spin-button {
+ margin: 0;
+ -webkit-appearance: none;
+ appearance: none;
+}
+
+.markdown-body :checked + .radio-label {
+ position: relative;
+ z-index: 1;
+ border-color: #0366d6;
+}
+
+.markdown-body .border {
+ border: 1px solid #e1e4e8 !important;
+}
+
+.markdown-body .border-0 {
+ border: 0 !important;
+}
+
+.markdown-body .border-bottom {
+ border-bottom: 1px solid #e1e4e8 !important;
+}
+
+.markdown-body .rounded-1 {
+ border-radius: 3px !important;
+}
+
+.markdown-body .bg-white {
+ background-color: #fff !important;
+}
+
+.markdown-body .bg-gray-light {
+ background-color: #fafbfc !important;
+}
+
+.markdown-body .text-gray-light {
+ color: #6a737d !important;
+}
+
+.markdown-body .mb-0 {
+ margin-bottom: 0 !important;
+}
+
+.markdown-body .my-2 {
+ margin-top: 8px !important;
+ margin-bottom: 8px !important;
+}
+
+.markdown-body .pl-0 {
+ padding-left: 0 !important;
+}
+
+.markdown-body .py-0 {
+ padding-top: 0 !important;
+ padding-bottom: 0 !important;
+}
+
+.markdown-body .pl-1 {
+ padding-left: 4px !important;
+}
+
+.markdown-body .pl-2 {
+ padding-left: 8px !important;
+}
+
+.markdown-body .py-2 {
+ padding-top: 8px !important;
+ padding-bottom: 8px !important;
+}
+
+.markdown-body .pl-3,
+.markdown-body .px-3 {
+ padding-left: 16px !important;
+}
+
+.markdown-body .px-3 {
+ padding-right: 16px !important;
+}
+
+.markdown-body .pl-4 {
+ padding-left: 24px !important;
+}
+
+.markdown-body .pl-5 {
+ padding-left: 32px !important;
+}
+
+.markdown-body .pl-6 {
+ padding-left: 40px !important;
+}
+
+.markdown-body .f6 {
+ font-size: 12px !important;
+}
+
+.markdown-body .lh-condensed {
+ line-height: 1.25 !important;
+}
+
+.markdown-body .text-bold {
+ font-weight: 600 !important;
+}
+
+.markdown-body .pl-c {
+ color: #6a737d;
+}
+
+.markdown-body .pl-c1,
+.markdown-body .pl-s .pl-v {
+ color: #005cc5;
+}
+
+.markdown-body .pl-e,
+.markdown-body .pl-en {
+ color: #6f42c1;
+}
+
+.markdown-body .pl-s .pl-s1,
+.markdown-body .pl-smi {
+ color: #24292e;
+}
+
+.markdown-body .pl-ent {
+ color: #22863a;
+}
+
+.markdown-body .pl-k {
+ color: #d73a49;
+}
+
+.markdown-body .pl-pds,
+.markdown-body .pl-s,
+.markdown-body .pl-s .pl-pse .pl-s1,
+.markdown-body .pl-sr,
+.markdown-body .pl-sr .pl-cce,
+.markdown-body .pl-sr .pl-sra,
+.markdown-body .pl-sr .pl-sre {
+ color: #032f62;
+}
+
+.markdown-body .pl-smw,
+.markdown-body .pl-v {
+ color: #e36209;
+}
+
+.markdown-body .pl-bu {
+ color: #b31d28;
+}
+
+.markdown-body .pl-ii {
+ color: #fafbfc;
+ background-color: #b31d28;
+}
+
+.markdown-body .pl-c2 {
+ color: #fafbfc;
+ background-color: #d73a49;
+}
+
+.markdown-body .pl-c2:before {
+ content: '^M';
+}
+
+.markdown-body .pl-sr .pl-cce {
+ font-weight: 700;
+ color: #22863a;
+}
+
+.markdown-body .pl-ml {
+ color: #735c0f;
+}
+
+.markdown-body .pl-mh,
+.markdown-body .pl-mh .pl-en,
+.markdown-body .pl-ms {
+ font-weight: 700;
+ color: #005cc5;
+}
+
+.markdown-body .pl-mi {
+ font-style: italic;
+ color: #24292e;
+}
+
+.markdown-body .pl-mb {
+ font-weight: 700;
+ color: #24292e;
+}
+
+.markdown-body .pl-md {
+ color: #b31d28;
+ background-color: #ffeef0;
+}
+
+.markdown-body .pl-mi1 {
+ color: #22863a;
+ background-color: #f0fff4;
+}
+
+.markdown-body .pl-mc {
+ color: #e36209;
+ background-color: #ffebda;
+}
+
+.markdown-body .pl-mi2 {
+ color: #f6f8fa;
+ background-color: #005cc5;
+}
+
+.markdown-body .pl-mdr {
+ font-weight: 700;
+ color: #6f42c1;
+}
+
+.markdown-body .pl-ba {
+ color: #586069;
+}
+
+.markdown-body .pl-sg {
+ color: #959da5;
+}
+
+.markdown-body .pl-corl {
+ text-decoration: underline;
+ color: #032f62;
+}
+
+.markdown-body .mb-0 {
+ margin-bottom: 0 !important;
+}
+
+.markdown-body .my-2 {
+ margin-bottom: 8px !important;
+}
+
+.markdown-body .my-2 {
+ margin-top: 8px !important;
+}
+
+.markdown-body .pl-0 {
+ padding-left: 0 !important;
+}
+
+.markdown-body .py-0 {
+ padding-top: 0 !important;
+ padding-bottom: 0 !important;
+}
+
+.markdown-body .pl-1 {
+ padding-left: 4px !important;
+}
+
+.markdown-body .pl-2 {
+ padding-left: 8px !important;
+}
+
+.markdown-body .py-2 {
+ padding-top: 8px !important;
+ padding-bottom: 8px !important;
+}
+
+.markdown-body .pl-3 {
+ padding-left: 16px !important;
+}
+
+.markdown-body .pl-4 {
+ padding-left: 24px !important;
+}
+
+.markdown-body .pl-5 {
+ padding-left: 32px !important;
+}
+
+.markdown-body .pl-6 {
+ padding-left: 40px !important;
+}
+
+.markdown-body .pl-7 {
+ padding-left: 48px !important;
+}
+
+.markdown-body .pl-8 {
+ padding-left: 64px !important;
+}
+
+.markdown-body .pl-9 {
+ padding-left: 80px !important;
+}
+
+.markdown-body .pl-10 {
+ padding-left: 96px !important;
+}
+
+.markdown-body .pl-11 {
+ padding-left: 112px !important;
+}
+
+.markdown-body .pl-12 {
+ padding-left: 128px !important;
+}
+
+.markdown-body hr {
+ border-bottom-color: #eee;
+}
+
+.markdown-body kbd {
+ display: inline-block;
+ padding: 3px 5px;
+ font: 11px SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace;
+ line-height: 10px;
+ color: #444d56;
+ vertical-align: middle;
+ background-color: #fafbfc;
+ border: 1px solid #d1d5da;
+ border-radius: 3px;
+ box-shadow: inset 0 -1px 0 #d1d5da;
+}
+
+.markdown-body:after,
+.markdown-body:before {
+ display: table;
+ content: '';
+}
+
+.markdown-body:after {
+ clear: both;
+}
+
+.markdown-body > :first-child {
+ margin-top: 0 !important;
+}
+
+.markdown-body > :last-child {
+ margin-bottom: 0 !important;
+}
+
+.markdown-body a:not([href]) {
+ color: inherit;
+ text-decoration: none;
+}
+
+.markdown-body blockquote,
+.markdown-body details,
+.markdown-body dl,
+.markdown-body ol,
+.markdown-body p,
+.markdown-body pre,
+.markdown-body table,
+.markdown-body ul {
+ margin-top: 0;
+ margin-bottom: 16px;
+}
+
+.markdown-body hr {
+ height: 0.25em;
+ padding: 0;
+ margin: 24px 0;
+ background-color: #e1e4e8;
+ border: 0;
+}
+
+.markdown-body blockquote {
+ padding: 0 1em;
+ color: #6a737d;
+ border-left: 0.25em solid #dfe2e5;
+}
+
+.markdown-body blockquote > :first-child {
+ margin-top: 0;
+}
+
+.markdown-body blockquote > :last-child {
+ margin-bottom: 0;
+}
+
+.markdown-body h1,
+.markdown-body h2,
+.markdown-body h3,
+.markdown-body h4,
+.markdown-body h5,
+.markdown-body h6 {
+ margin-top: 24px;
+ margin-bottom: 16px;
+ font-weight: 600;
+ line-height: 1.25;
+}
+
+.markdown-body h1 {
+ font-size: 2em;
+}
+
+.markdown-body h1,
+.markdown-body h2 {
+ padding-bottom: 0.3em;
+ border-bottom: 1px solid #eaecef;
+}
+
+.markdown-body h2 {
+ font-size: 1.5em;
+}
+
+.markdown-body h3 {
+ font-size: 1.25em;
+}
+
+.markdown-body h4 {
+ font-size: 1em;
+}
+
+.markdown-body h5 {
+ font-size: 0.875em;
+}
+
+.markdown-body h6 {
+ font-size: 0.85em;
+ color: #6a737d;
+}
+
+.markdown-body ol,
+.markdown-body ul {
+ padding-left: 2em;
+}
+
+.markdown-body ol ol,
+.markdown-body ol ul,
+.markdown-body ul ol,
+.markdown-body ul ul {
+ margin-top: 0;
+ margin-bottom: 0;
+}
+
+.markdown-body li {
+ word-wrap: break-all;
+}
+
+.markdown-body li > p {
+ margin-top: 16px;
+}
+
+.markdown-body li + li {
+ margin-top: 0.25em;
+}
+
+.markdown-body dl {
+ padding: 0;
+}
+
+.markdown-body dl dt {
+ padding: 0;
+ margin-top: 16px;
+ font-size: 1em;
+ font-style: italic;
+ font-weight: 600;
+}
+
+.markdown-body dl dd {
+ padding: 0 16px;
+ margin-bottom: 16px;
+}
+
+.markdown-body table {
+ display: block;
+ width: 100%;
+ overflow: auto;
+}
+
+.markdown-body table th {
+ font-weight: 600;
+}
+
+.markdown-body table td,
+.markdown-body table th {
+ padding: 6px 13px;
+ border: 1px solid #dfe2e5;
+}
+
+.markdown-body table tr {
+ background-color: #fff;
+ border-top: 1px solid #c6cbd1;
+}
+
+.markdown-body table tr:nth-child(2n) {
+ background-color: #f6f8fa;
+}
+
+.markdown-body img {
+ max-width: 100%;
+ box-sizing: initial;
+ background-color: #fff;
+}
+
+.markdown-body img[align='right'] {
+ padding-left: 20px;
+}
+
+.markdown-body img[align='left'] {
+ padding-right: 20px;
+}
+
+.markdown-body code {
+ padding: 0.2em 0.4em;
+ margin: 0;
+ font-size: 85%;
+ background-color: rgba(27, 31, 35, 0.05);
+ border-radius: 3px;
+}
+
+.markdown-body pre {
+ word-wrap: normal;
+}
+
+.markdown-body pre > div > code {
+ padding: 0;
+ margin: 0;
+ font-size: 100%;
+ word-break: normal;
+ white-space: pre;
+ background: transparent;
+ color: #d4d4d4;
+ border: 0;
+}
+
+.markdown-body .highlight {
+ margin-bottom: 16px;
+}
+
+.markdown-body .highlight pre {
+ margin-bottom: 0;
+ word-break: normal;
+}
+
+.markdown-body .highlight pre,
+.markdown-body pre {
+ padding: 16px;
+ overflow: auto;
+ font-size: 85%;
+ line-height: 1.45;
+ background-color: #1e1e1e;
+ border-radius: 3px;
+}
+
+.markdown-body pre code {
+ display: inline;
+ max-width: auto;
+ padding: 0;
+ margin: 0;
+ overflow: visible;
+ line-height: inherit;
+ word-wrap: normal;
+ background-color: initial;
+ border: 0;
+}
+
+.markdown-body .commit-tease-sha {
+ display: inline-block;
+ font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace;
+ font-size: 90%;
+ color: #444d56;
+}
+
+.markdown-body .full-commit .btn-outline:not(:disabled):hover {
+ color: #005cc5;
+ border-color: #005cc5;
+}
+
+.markdown-body .blob-wrapper {
+ overflow-x: auto;
+ overflow-y: hidden;
+}
+
+.markdown-body .blob-wrapper-embedded {
+ max-height: 240px;
+ overflow-y: auto;
+}
+
+.markdown-body .blob-num {
+ width: 1%;
+ min-width: 50px;
+ padding-right: 10px;
+ padding-left: 10px;
+ font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace;
+ font-size: 12px;
+ line-height: 20px;
+ color: rgba(27, 31, 35, 0.3);
+ text-align: right;
+ white-space: nowrap;
+ vertical-align: top;
+ cursor: pointer;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+}
+
+.markdown-body .blob-num:hover {
+ color: rgba(27, 31, 35, 0.6);
+}
+
+.markdown-body .blob-num:before {
+ content: attr(data-line-number);
+}
+
+.markdown-body .blob-code {
+ position: relative;
+ padding-right: 10px;
+ padding-left: 10px;
+ line-height: 20px;
+ vertical-align: top;
+}
+
+.markdown-body .blob-code-inner {
+ overflow: visible;
+ font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace;
+ font-size: 12px;
+ color: #24292e;
+ word-wrap: normal;
+ white-space: pre;
+}
+
+.markdown-body .pl-token.active,
+.markdown-body .pl-token:hover {
+ cursor: pointer;
+ background: #ffea7f;
+}
+
+.markdown-body .tab-size[data-tab-size='1'] {
+ -moz-tab-size: 1;
+ tab-size: 1;
+}
+
+.markdown-body .tab-size[data-tab-size='2'] {
+ -moz-tab-size: 2;
+ tab-size: 2;
+}
+
+.markdown-body .tab-size[data-tab-size='3'] {
+ -moz-tab-size: 3;
+ tab-size: 3;
+}
+
+.markdown-body .tab-size[data-tab-size='4'] {
+ -moz-tab-size: 4;
+ tab-size: 4;
+}
+
+.markdown-body .tab-size[data-tab-size='5'] {
+ -moz-tab-size: 5;
+ tab-size: 5;
+}
+
+.markdown-body .tab-size[data-tab-size='6'] {
+ -moz-tab-size: 6;
+ tab-size: 6;
+}
+
+.markdown-body .tab-size[data-tab-size='7'] {
+ -moz-tab-size: 7;
+ tab-size: 7;
+}
+
+.markdown-body .tab-size[data-tab-size='8'] {
+ -moz-tab-size: 8;
+ tab-size: 8;
+}
+
+.markdown-body .tab-size[data-tab-size='9'] {
+ -moz-tab-size: 9;
+ tab-size: 9;
+}
+
+.markdown-body .tab-size[data-tab-size='10'] {
+ -moz-tab-size: 10;
+ tab-size: 10;
+}
+
+.markdown-body .tab-size[data-tab-size='11'] {
+ -moz-tab-size: 11;
+ tab-size: 11;
+}
+
+.markdown-body .tab-size[data-tab-size='12'] {
+ -moz-tab-size: 12;
+ tab-size: 12;
+}
+
+.markdown-body .task-list-item {
+ list-style-type: none;
+}
+
+.markdown-body .task-list-item + .task-list-item {
+ margin-top: 3px;
+}
+
+.markdown-body .task-list-item input {
+ margin: 0 0.2em 0.25em -1.6em;
+ vertical-align: middle;
+}
+
+@media (prefers-color-scheme: dark) {
+ .markdown-body {
+ /* color: #c9d1d9; */
+ /* background-color: #0d1117; */
+ color: #f3f4f6;
+ background-color: #18181b;
+ }
+ .markdown-body a {
+ color: rgba(2, 132, 199);
+ }
+ .markdown-body hr {
+ border-bottom: 1px solid #21262d;
+ border-bottom-color: #21262d;
+ background-color: #30363d;
+ }
+ .markdown-body kbd {
+ color: #b1bac4;
+ background-color: #0d1117;
+ border: 1px solid #6e7681;
+ box-shadow: inset 0 -1px 0 #6e7681;
+ }
+ .markdown-body :checked + .radio-label {
+ border-color: rgba(56, 139, 253, 0.4);
+ }
+ .markdown-body .border {
+ border: 1px solid #30363d !important;
+ }
+ .markdown-body .border-bottom {
+ border-bottom: 1px solid #30363d !important;
+ }
+ .markdown-body .bg-white {
+ background-color: #0d1117 !important;
+ }
+ .markdown-body .bg-gray-light {
+ background-color: #0d1117 !important;
+ }
+ .markdown-body .text-gray-light {
+ color: #8b949e !important;
+ }
+ .markdown-body .pl-c {
+ color: #8b949e;
+ }
+ .markdown-body .pl-c1,
+ .markdown-body .pl-s .pl-v {
+ color: #79c0ff;
+ }
+ .markdown-body .pl-e,
+ .markdown-body .pl-en {
+ color: #d2a8ff;
+ }
+ .markdown-body .pl-s .pl-s1,
+ .markdown-body .pl-smi {
+ color: #c9d1d9;
+ }
+ .markdown-body .pl-ent {
+ color: #7ee787;
+ }
+ .markdown-body .pl-k {
+ color: #ff7b72;
+ }
+ .markdown-body .pl-pds,
+ .markdown-body .pl-s,
+ .markdown-body .pl-s .pl-pse .pl-s1,
+ .markdown-body .pl-sr,
+ .markdown-body .pl-sr .pl-cce,
+ .markdown-body .pl-sr .pl-sra,
+ .markdown-body .pl-sr .pl-sre {
+ color: #a5d6ff;
+ }
+ .markdown-body .pl-smw,
+ .markdown-body .pl-v {
+ color: #ffa657;
+ }
+ .markdown-body .pl-bu {
+ color: #f85149;
+ }
+ .markdown-body .pl-ii {
+ color: #f0f6fc;
+ background-color: #8e1519;
+ }
+ .markdown-body .pl-c2 {
+ color: #f0f6fc;
+ background-color: #b62324;
+ }
+ .markdown-body .pl-sr .pl-cce {
+ color: #7ee787;
+ }
+ .markdown-body .pl-ml {
+ color: #f2cc60;
+ }
+ .markdown-body .pl-mh,
+ .markdown-body .pl-mh .pl-en,
+ .markdown-body .pl-ms {
+ color: #1f6feb;
+ }
+ .markdown-body .pl-mi {
+ color: #c9d1d9;
+ }
+ .markdown-body .pl-mb {
+ color: #c9d1d9;
+ }
+ .markdown-body .pl-md {
+ color: #ffdcd7;
+ background-color: #67060c;
+ }
+ .markdown-body .pl-mi1 {
+ color: #aff5b4;
+ background-color: #033a16;
+ }
+ .markdown-body .pl-mc {
+ color: #ffdfb6;
+ background-color: #5a1e02;
+ }
+ .markdown-body .pl-mi2 {
+ color: #c9d1d9;
+ background-color: #1158c7;
+ }
+ .markdown-body .pl-mdr {
+ color: #d2a8ff;
+ }
+ .markdown-body .pl-ba {
+ color: #8b949e;
+ }
+ .markdown-body .pl-sg {
+ color: #484f58;
+ }
+ .markdown-body .pl-corl {
+ color: #a5d6ff;
+ }
+ .markdown-body blockquote {
+ color: #8b949e;
+ border-left: 0.25em solid #3b434b;
+ }
+ .markdown-body h1,
+ .markdown-body h2 {
+ border-bottom: 1px solid #21262d;
+ }
+ .markdown-body h6 {
+ color: #8b949e;
+ }
+ .markdown-body table td,
+ .markdown-body table th {
+ border: 1px solid #3b434b;
+ }
+ .markdown-body table tr {
+ background-color: #0d1117;
+ border-top: 1px solid #272c32;
+ }
+ .markdown-body table tr:nth-child(2n) {
+ background-color: #161b22;
+ }
+ .markdown-body img {
+ background-color: #0d1117;
+ }
+ .markdown-body code {
+ background-color: rgba(240, 246, 252, 0.15);
+ }
+ .markdown-body .highlight pre,
+ .markdown-body pre {
+ background-color: #1f1f22;
+ }
+ .markdown-body .commit-tease-sha {
+ color: #b1bac4;
+ }
+ .markdown-body .blob-num {
+ color: rgba(240, 246, 252, 0.3);
+ }
+ .markdown-body .blob-num:hover {
+ color: rgba(240, 246, 252, 0.6);
+ }
+ .markdown-body .blob-code-inner {
+ color: #c9d1d9;
+ }
+}
diff --git a/src/types/index.d.ts b/src/types/index.d.ts
new file mode 100644
index 0000000000000000000000000000000000000000..e1adc0be7771c223d6b28b84250e5c50e5d47a66
--- /dev/null
+++ b/src/types/index.d.ts
@@ -0,0 +1,72 @@
+// API response object for /api/?path=
+
+
+
+
+
+ + {t('Welcome to your new onedrive-vercel-index 🎉')} +
+ +{t('Step 3/3: Get access and refresh tokens')}
+ {error ? ( +
+
+ ) : (
+
+
+ { + // t('Where is the auth code? Did you follow step 2 you silly donut?') + t(description) + } +
+ {errorUri && ( +
+
+
+
+
+
+ )}
+ {t('Success! The API returned what we needed.')}
+-
+ {accessToken && (
+
-
+
{' '} + + {t('Acquired access_token: ')} + {`${accessToken.substring(0, 60)}...`}+ +
+ )}
+ {refreshToken && (
+ -
+
{' '} + + {t('Acquired refresh_token: ')} + {`${refreshToken.substring(0, 60)}...`}+ +
+ )}
+
+
+ {t( + 'Final step, click the button below to store these tokens persistently before they expire after {{minutes}} minutes {{seconds}} seconds. ', + { + minutes: Math.floor(expiryTimeLeft / 60), + seconds: expiryTimeLeft - Math.floor(expiryTimeLeft / 60) * 60, + } + ) + + t( + "Don't worry, after storing them, onedrive-vercel-index will take care of token refreshes and updates after your site goes live." + )} +
+ +
+
+
+