init

.vscode/settings.json

@@ -0,0 +1,4 @@
+{
+  "typescript.tsdk": "node_modules/typescript/lib",
+  "typescript.enablePromptUseWorkspaceTsdk": true
+}

Dockerfile

@@ -34,7 +34,7 @@ COPY . .
 # RUN yarn build
 
 # If you use yarn, comment out this line and use the line above
-RUN npm run build
+RUN pnpm run build
 
 # Production image, copy all the files and run next
 FROM base AS runner
@@ -60,4 +60,4 @@ EXPOSE 3000
 
 ENV PORT 3000
 
-CMD ["node", "server.js"]
+CMD ["pnpm", "dev"]

README.md

@@ -1,176 +1,10 @@
----
-title: Next.js on 🤗 Spaces
-emoji: 🐳🤗
-colorFrom: blue
-colorTo: yellow
-sdk: docker
-pinned: false
-license: agpl-3.0
-app_port: 3000
-duplicated_from: failfast/nextjs-hf-spaces
----
-<h1 align="center">Next.js on 🤗 Spaces</h1>
+# next-monaco-vscode-api
 
-<p align="center">
-Run your ML demo with ease in a <a href="https://nextjs.org">Next.js</a> environment
-</p>
+This is an example setting up [monaco-vscode-api](https://github.com/CodinGame/monaco-vscode-api) in a [Next.js](https://nextjs.org/) application.
 
-At failfast, we're passionate about crafting demos with TypeScript, Next.js, and MUI. Inspired by the ease-of-use of Gradio and Streamlit within Hugging Face Spaces, we aim to deliver a similar developer experience to JavaScript enthusiasts. Our toolkit includes predefined MUI components, empowering you to build intuitive UIs for your ML demos.
+## Development
 
----
-
-<!-- toc -->
-
-- [Local development](#local-development)
-  * [Use the Docker container locally](#use-the-docker-container-locally)
-- [Secret Management](#secret-management)
-  * [Build-time](#build-time)
-  * [Runtime](#runtime)
-- [Dockerize an existing project](#dockerize-an-existing-project)
-- [Sync your GitHub repository with your 🤗 Space](#sync-your-github-repository-with-your-%F0%9F%A4%97-space)
-- [Cleanup your 🤗 Space](#cleanup-your-%F0%9F%A4%97-space)
-- [Development Roadmap](#development-roadmap)
-
-<!-- tocstop -->
-
----
-
-## Local development
-
-1. Install the dependencies: `npm i`
-2. Start the local dev-server: `npm run dev`
-3. Open the app via [localhost:3000](http://localhost:3000)
-
-### Use the Docker container locally
-
-> ℹ️ In order for the commands to work, you need at least Docker >= 20.10, as we use env-variables as secrets
-
-To make sure that everything is working out, you can run your container locally:
-
-1. [Install Docker](https://docs.docker.com/get-docker/) on your machine
-2. Go into the `nextjs-hf-spaces` folder
-3. Build your Docker image: `docker build -t nextjs-hf-spaces .`
-4. Run your Docker container: `docker run -p 3000:3000 nextjs-hf-spaces`.
-5. Open the app via [localhost:3000](http://localhost:3000)
-
-If you also have a secret that needs to be passed into the container, you can do this: 
-
-1. Create a copy of `.env.local.example` and rename it to `.env.local` (it contains the secret `HF_EXAMPLE_SECRET`)
-2. Run your Docker container and specify the env-file: `docker run -p 3000:3000 --env-file .env.local nextjs-hf-spaces`
-3. Open the example API via [localhost:3000/api/env](http://localhost:3000/api/env) and see that the value of our secret `HF_EXAMPLE_SECRET` is shown
-
-## Secret Management
-
-To not expose your secrets to end users, you can add them directly in **Settings** of your 🤗 Space.
-
-1. Open your space and navigate to the **Settings**
-2. Find **Repository secrets** & click on **New secret**
-   
-That's it, you can now access your secret.
-
-### Build-time
-
-If you need to have a secret during build-time (e.g. you want to install private npm packages), then you can add this directly into the `Dockerfile`:
-
-```dockerfile
-# Uncomment the following lines if you want to use a secret at buildtime, 
-# for example to access your private npm packages
-RUN --mount=type=secret,id=HF_EXAMPLE_SECRET,mode=0444,required=true \
-    $(cat /run/secrets/HF_EXAMPLE_SECRET)
-```
-
-In this case, we mount the secret `HF_EXAMPLE_SECRET` (using [Docker secrets](https://docs.docker.com/engine/swarm/secrets/)) inside and can use it. 
-
-### Runtime
-
-When your 🤗 Space is running and you want to use a secret (e.g. access an API that requires authentication) without exposing it to the user, you can use it as an environment variable via `process.env`. 
-
-```typescript
-import process from "node:process";
-import { NextApiRequest, NextApiResponse } from "next";
-
-export default async function handler(
-  request: NextApiRequest,
-  response: NextApiResponse
-) {
-  const exampleSecret = process.env.HF_EXAMPLE_SECRET;
-
-  // Your logic to access an API that requires authentication
-
-  return response.status(200).json("We have access to an external API");
-}
+```bash
+pnpm i
+pnpm dev
 ```
-
-A simple example can be found at [nextjs-hf-spaces/api/env](https://huggingface.co/spaces/failfast/nextjs-hf-spaces/api/env). This will return the secret to see that it's working, but you wouldn't do this in your space, as you don't want to expose the secret to an end user. 
-
-## Dockerize an existing project
-
-To add support for Docker to an existing project, just copy the `Dockerfile` into the root of the project and add the following to the `next.config.js` file:
-
-```js
-// next.config.js
-module.exports = {
-  // ... rest of the configuration.
-  output: "standalone",
-};
-```
-
-This will build the project as a standalone app inside the Docker image.
-
-## Sync your GitHub repository with your 🤗 Space
-
-If you want to use all the features for collaborative development on GitHub, but keep your demo on 🤗 Spaces, then you can set up a GitHub action that will automatically push changes from GitHub into Spaces.
-
-> ℹ️ Git-LFS is required for files bigger than 10MB
-
-1. Create your repo on GitHub
-2. Create a [Github secret](https://docs.github.com/en/actions/security-guides/encrypted-secrets#creating-encrypted-secrets-for-a-repository) named `HF_TOKEN` and use an [access token from Hugging Face](https://huggingface.co/settings/tokens) as its value (you must be logged in to do this)
-3. Update the workflow [sync_to_hf_spaces.yml](.github/workflows/sync_to_hf_spaces.yml)
-   - Configure `HF_USERNAME`: Replace `failfast` with the name of your 🤗 user account or your 🤗 organization
-   - Configure `HF_SPACE_NAME`: Replace `nextjs-hf-spaces` with the name of your 🤗 space
-4. Push the code into your repo on GitHub
-
-This should force push changes in the **main** branch from GitHub into your 🤗 space.
-
-For further information, you can check out the [guide on Hugging Face](https://huggingface.co/docs/hub/spaces-github-actions).
-
-
-## Cleanup your 🤗 Space
-
-You don't need all the demo content and examples? Then you can delete these resources to get a clean 🤗 Space:
-
-* `src/pages/api/env.ts`
-* `src/components/example-components.tsx`
-* `src/components/getting-started.tsx`
-* `src/components/under-construction.tsx`
-* `src/components/title.tsx`
-* `src/components/huggingface/huggingface.tsx`
-
-Update the `src/components/index.tsx` and remove:
-
-```jsx
-<Title />
-
-<GettingStarted />
-
-<DividerBox />
-
-<ExampleComponents />
-```
-
-> i Got an idea how this could be better? Please let us know!
-
-## Development Roadmap
-
-The next milestones in no particular order are:
-
-* Components for all [`@huggingface/inference`](https://huggingface.co/docs/huggingface.js/inference/README) methods (WIP)
-* Components to use [langchain.js](https://js.langchain.com/docs)
-* Components to use [hyv](https://github.com/failfa-st/hyv)
-* Publish components on npm to make them usable outside of [nextjs-hf-spaces](https://github.com/failfa-st/nextjs-hf-spaces)
-* Provide templates for different use-cases, that are too complex for single components
-* Docs on how to use the components with all available options
-
-> i Anything missing? Please let us know!
-
-

app/app.css

@@ -0,0 +1,4 @@
+body {
+  margin: 0;
+  background-color: #101218;
+}

app/editor/index.tsx

@@ -0,0 +1,33 @@
+'use client'
+import * as React from 'react'
+import * as monaco from 'monaco-editor/esm/vs/editor/editor.api'
+import { createConfiguredEditor } from 'vscode/monaco'
+import './setup'
+import 'monaco-editor/esm/vs/language/typescript/monaco.contribution'
+
+monaco.languages.typescript.typescriptDefaults.setCompilerOptions({
+  jsx: monaco.languages.typescript.JsxEmit.Preserve,
+})
+
+export default function Editor({ defaultValue }: { defaultValue: string }) {
+  const ref = React.useRef<HTMLDivElement>(null)
+
+  React.useLayoutEffect(() => {
+    const model = monaco.editor.createModel(
+      defaultValue,
+      'typescript',
+      monaco.Uri.file('index.ts')
+    )
+    const editor = createConfiguredEditor(ref.current!, {
+      model,
+      automaticLayout: true,
+    })
+
+    return () => {
+      model.dispose()
+      editor.dispose()
+    }
+  }, [])
+
+  return <div ref={ref} style={{ height: 200 }} />
+}

app/editor/setup.ts

@@ -0,0 +1,131 @@
+import 'monaco-editor/esm/vs/editor/editor.all'
+import * as monaco from 'monaco-editor/esm/vs/editor/editor.api'
+import { initialize as initializeMonacoService } from 'vscode/services'
+import {
+  registerExtension,
+  initialize as initializeVscodeExtensions,
+} from 'vscode/extensions'
+import getDialogsServiceOverride from 'vscode/service-override/dialogs'
+import getConfigurationServiceOverride from 'vscode/service-override/configuration'
+import getTextmateServiceOverride from 'vscode/service-override/textmate'
+import getThemeServiceOverride from 'vscode/service-override/theme'
+import getLanguagesServiceOverride from 'vscode/service-override/languages'
+
+window.MonacoEnvironment = {
+  getWorker: async function (moduleId, label) {
+    switch (label) {
+      case 'editorWorkerService':
+        return new Worker(
+          new URL('monaco-editor/esm/vs/editor/editor.worker', import.meta.url)
+        )
+      case 'css':
+      case 'less':
+      case 'scss':
+        return new Worker(
+          new URL(
+            'monaco-editor/esm/vs/language/css/css.worker',
+            import.meta.url
+          )
+        )
+      case 'handlebars':
+      case 'html':
+      case 'razor':
+        return new Worker(
+          new URL(
+            'monaco-editor/esm/vs/language/html/html.worker',
+            import.meta.url
+          )
+        )
+      case 'json':
+        return new Worker(
+          new URL(
+            'monaco-editor/esm/vs/language/json/json.worker',
+            import.meta.url
+          )
+        )
+      case 'javascript':
+      case 'typescript':
+        return new Worker(
+          new URL(
+            'monaco-editor/esm/vs/language/typescript/ts.worker',
+            import.meta.url
+          )
+        )
+      default:
+        throw new Error(`Unimplemented worker ${label} (${moduleId})`)
+    }
+  },
+}
+
+initializeMonacoService({
+  ...getDialogsServiceOverride(),
+  ...getConfigurationServiceOverride(monaco.Uri.file('/')),
+  ...getTextmateServiceOverride(),
+  ...getThemeServiceOverride(),
+  ...getLanguagesServiceOverride(),
+}).then(async () => {
+  await initializeVscodeExtensions()
+
+  const defaultThemesExtensions = {
+    name: 'themes',
+    publisher: 'next-monaco',
+    version: '0.0.0',
+    engines: {
+      vscode: '*',
+    },
+    contributes: {
+      themes: [
+        {
+          id: 'Next Monaco',
+          label: 'Next Monaco',
+          uiTheme: 'vs-dark',
+          path: './next-monaco.json',
+        },
+      ],
+    },
+  }
+
+  const { registerFile: registerDefaultThemeExtensionFile } = registerExtension(
+    defaultThemesExtensions
+  )
+
+  registerDefaultThemeExtensionFile(
+    './next-monaco.json',
+    async () => process.env.MONACO_THEME
+  )
+
+  monaco.editor.setTheme('Next Monaco')
+
+  const extension = {
+    name: 'grammars',
+    publisher: 'next-monaco',
+    version: '0.0.0',
+    engines: {
+      vscode: '*',
+    },
+    contributes: {
+      languages: [
+        {
+          id: 'typescript',
+          extensions: ['.ts', '.tsx'],
+          aliases: ['TypeScript', 'ts', 'typescript'],
+        },
+      ],
+      grammars: [
+        {
+          language: 'typescript',
+          scopeName: 'source.ts',
+          path: './TypeScript.tmLanguage.json',
+        },
+      ],
+    },
+  }
+
+  const { registerFile: registerExtensionFile } = registerExtension(extension)
+
+  registerExtensionFile('./TypeScript.tmLanguage.json', async () =>
+    JSON.stringify(
+      (await import('./TypeScript.tmLanguage.json')).default as any
+    )
+  )
+})

app/layout.tsx

@@ -0,0 +1,16 @@
+export const metadata = {
+  title: 'Next.js',
+  description: 'Generated by Next.js',
+}
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html lang="en">
+      <body>{children}</body>
+    </html>
+  )
+}

app/page.tsx

@@ -0,0 +1,21 @@
+'use client'
+import dynamic from 'next/dynamic'
+import './app.css'
+
+const Editor = dynamic(() => import('./editor'), { ssr: false })
+
+const defaultValue = `
+/**
+ * Say hello.
+ *
+ * @example
+ * <Hello name="Penny" />
+ */
+function sayHello({ name }: { name: string }) {
+  return \`Hello, \${name}!\`
+}
+`.trim()
+
+export default function Page() {
+  return <Editor defaultValue={defaultValue} />
+}

next.config.js

@@ -1,7 +0,0 @@
-/** @type {import('next').NextConfig} */
-const nextConfig = {
-  output: "standalone",
-  reactStrictMode: true,
-};
-
-module.exports = nextConfig;

next.config.mjs

@@ -0,0 +1,22 @@
+import { readFile } from 'node:fs/promises'
+import { resolve } from 'node:path'
+
+const themePath = resolve(process.cwd(), 'theme.json')
+
+/** @type {import('next').NextConfig} */
+export default {
+  experimental: {
+    appDir: true,
+  },
+  env: {
+    MONACO_THEME: await readFile(themePath, 'utf-8'),
+  },
+  webpack(config) {
+    config.module.rules.push({
+      test: /\.wasm$/,
+      type: 'asset/resource',
+    })
+
+    return config
+  },
+}

package.json

@@ -1,44 +1,24 @@
 {
-  "name": "nextjs-hf-spaces",
-  "version": "0.0.1",
-  "description": "Run your ML demo with ease in a Next.js environment",
-  "keywords": [
-    "nextjs",
-    "artificial intelligence",
-    "javascript",
-    "typescript",
-    "hugging face",
-    "machine learning"
-  ],
-  "license": "MIT",
-  "author": {
-    "name": "Tim Pietrusky",
-    "url": "https://github.com/TimPietrusky"
-  },
+  "name": "site",
+  "private": true,
   "scripts": {
-    "build": "next build",
     "dev": "next dev",
-    "lint": "next lint",
-    "spj": "npx sort-package-json",
-    "start": "next start",
-    "toc": "npx markdown-toc README.md -i"
+    "build": "next build",
+    "start": "next start"
   },
   "dependencies": {
-    "@emotion/cache": "11.10.7",
-    "@emotion/react": "11.10.6",
-    "@emotion/server": "11.10.0",
-    "@emotion/styled": "11.10.6",
-    "@huggingface/inference": "2.3.3",
-    "@mui/icons-material": "5.11.16",
-    "@mui/material": "5.12.0",
-    "@types/node": "20.1.4",
-    "@types/react": "18.2.6",
-    "@types/react-dom": "18.2.4",
-    "eslint": "8.40.0",
-    "eslint-config-next": "13.4.2",
-    "next": "13.4.2",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
+    "monaco-editor": "^0.37.1",
+    "next": "latest",
+    "react": "latest",
+    "react-dom": "latest",
+    "vscode-oniguruma": "^1.7.0",
+    "vscode-textmate": "^9.0.0",
+    "vscode": "npm:@codingame/monaco-vscode-api@^1.78.0",
+    "yauzl": "^2.10.0"
+  },
+  "devDependencies": {
+    "@types/node": "18.15.11",
+    "@types/react": "18.0.35",
     "typescript": "5.0.4"
   }
 }

pnpm-lock.yaml

@@ -0,0 +1,356 @@
+lockfileVersion: '6.0'
+
+dependencies:
+  monaco-editor:
+    specifier: ^0.37.1
+    version: 0.37.1
+  next:
+    specifier: latest
+    version: 13.4.3([email protected])([email protected])
+  react:
+    specifier: latest
+    version: 18.2.0
+  react-dom:
+    specifier: latest
+    version: 18.2.0([email protected])
+  vscode:
+    specifier: npm:@codingame/monaco-vscode-api@^1.78.0
+    version: /@codingame/[email protected]([email protected])([email protected])([email protected])([email protected])
+  vscode-oniguruma:
+    specifier: ^1.7.0
+    version: 1.7.0
+  vscode-textmate:
+    specifier: ^9.0.0
+    version: 9.0.0
+  yauzl:
+    specifier: ^2.10.0
+    version: 2.10.0
+
+devDependencies:
+  '@types/node':
+    specifier: 18.15.11
+    version: 18.15.11
+  '@types/react':
+    specifier: 18.0.35
+    version: 18.0.35
+  typescript:
+    specifier: 5.0.4
+    version: 5.0.4
+
+packages:
+
+  /@codingame/[email protected]([email protected])([email protected])([email protected])([email protected]):
+    resolution: {integrity: sha512-mV+ImrH1EdgwkujoYNCnqtZijZA7c1vxXl/Y6OwV1Mo8fZ4fUhMTiiO+0zaQZqLzM5GX/l7qfxNVOLV2pUJtmg==}
+    peerDependencies:
+      monaco-editor: ~0.37.1
+      vscode-oniguruma: ^1.7.0
+      vscode-textmate: ^9.0.0
+      yauzl: ^2.10.0
+    dependencies:
+      '@types/node': 18.15.11
+      monaco-editor: 0.37.1
+      vscode-oniguruma: 1.7.0
+      vscode-textmate: 9.0.0
+      yauzl: 2.10.0
+    dev: false
+
+  /@next/[email protected]:
+    resolution: {integrity: sha512-pa1ErjyFensznttAk3EIv77vFbfSYT6cLzVRK5jx4uiRuCQo+m2wCFAREaHKIy63dlgvOyMlzh6R8Inu8H3KrQ==}
+    dev: false
+
+  /@next/[email protected]:
+    resolution: {integrity: sha512-yx18udH/ZmR4Bw4M6lIIPE3JxsAZwo04iaucEfA2GMt1unXr2iodHUX/LAKNyi6xoLP2ghi0E+Xi1f4Qb8f1LQ==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [darwin]
+    requiresBuild: true
+    dev: false
+    optional: true
+
+  /@next/[email protected]:
+    resolution: {integrity: sha512-Mi8xJWh2IOjryAM1mx18vwmal9eokJ2njY4nDh04scy37F0LEGJ/diL6JL6kTXi0UfUCGbMsOItf7vpReNiD2A==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [darwin]
+    requiresBuild: true
+    dev: false
+    optional: true
+
+  /@next/[email protected]:
+    resolution: {integrity: sha512-aBvtry4bxJ1xwKZ/LVPeBGBwWVwxa4bTnNkRRw6YffJnn/f4Tv4EGDPaVeYHZGQVA56wsGbtA6nZMuWs/EIk4Q==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [linux]
+    requiresBuild: true
+    dev: false
+    optional: true
+
+  /@next/[email protected]:
+    resolution: {integrity: sha512-krT+2G3kEsEUvZoYte3/2IscscDraYPc2B+fDJFipPktJmrv088Pei/RjrhWm5TMIy5URYjZUoDZdh5k940Dyw==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [linux]
+    requiresBuild: true
+    dev: false
+    optional: true
+
+  /@next/[email protected]:
+    resolution: {integrity: sha512-AMdFX6EKJjC0G/CM6hJvkY8wUjCcbdj3Qg7uAQJ7PVejRWaVt0sDTMavbRfgMchx8h8KsAudUCtdFkG9hlEClw==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [linux]
+    requiresBuild: true
+    dev: false
+    optional: true
+
+  /@next/[email protected]:
+    resolution: {integrity: sha512-jySgSXE48shaLtcQbiFO9ajE9mqz7pcAVLnVLvRIlUHyQYR/WyZdK8ehLs65Mz6j9cLrJM+YdmdJPyV4WDaz2g==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [linux]
+    requiresBuild: true
+    dev: false
+    optional: true
+
+  /@next/[email protected]:
+    resolution: {integrity: sha512-5DxHo8uYcaADiE9pHrg8o28VMt/1kR8voDehmfs9AqS0qSClxAAl+CchjdboUvbCjdNWL1MISCvEfKY2InJ3JA==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [win32]
+    requiresBuild: true
+    dev: false
+    optional: true
+
+  /@next/[email protected]:
+    resolution: {integrity: sha512-LaqkF3d+GXRA5X6zrUjQUrXm2MN/3E2arXBtn5C7avBCNYfm9G3Xc646AmmmpN3DJZVaMYliMyCIQCMDEzk80w==}
+    engines: {node: '>= 10'}
+    cpu: [ia32]
+    os: [win32]
+    requiresBuild: true
+    dev: false
+    optional: true
+
+  /@next/[email protected]:
+    resolution: {integrity: sha512-jglUk/x7ZWeOJWlVoKyIAkHLTI+qEkOriOOV+3hr1GyiywzcqfI7TpFSiwC7kk1scOiH7NTFKp8mA3XPNO9bDw==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [win32]
+    requiresBuild: true
+    dev: false
+    optional: true
+
+  /@swc/[email protected]:
+    resolution: {integrity: sha512-sJ902EfIzn1Fa+qYmjdQqh8tPsoxyBz+8yBKC2HKUxyezKJFwPGOn7pv4WY6QuQW//ySQi5lJjA/ZT9sNWWNTg==}
+    dependencies:
+      tslib: 2.5.0
+    dev: false
+
+  /@types/[email protected]:
+    resolution: {integrity: sha512-E5Kwq2n4SbMzQOn6wnmBjuK9ouqlURrcZDVfbo9ftDDTFt3nk7ZKK4GMOzoYgnpQJKcxwQw+lGaBvvlMo0qN/Q==}
+
+  /@types/[email protected]:
+    resolution: {integrity: sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==}
+    dev: true
+
+  /@types/[email protected]:
+    resolution: {integrity: sha512-6Laome31HpetaIUGFWl1VQ3mdSImwxtFZ39rh059a1MNnKGqBpC88J6NJ8n/Is3Qx7CefDGLgf/KhN/sYCf7ag==}
+    dependencies:
+      '@types/prop-types': 15.7.5
+      '@types/scheduler': 0.16.3
+      csstype: 3.1.2
+    dev: true
+
+  /@types/[email protected]:
+    resolution: {integrity: sha512-5cJ8CB4yAx7BH1oMvdU0Jh9lrEXyPkar6F9G/ERswkCuvP4KQZfZkSjcMbAICCpQTN4OuZn8tz0HiKv9TGZgrQ==}
+    dev: true
+
+  /[email protected]:
+    resolution: {integrity: sha512-VO9Ht/+p3SN7SKWqcrgEzjGbRSJYTx+Q1pTQC0wrWqHx0vpJraQ6GtHx8tvcg1rlK1byhU5gccxgOgj7B0TDkQ==}
+    dev: false
+
+  /[email protected]:
+    resolution: {integrity: sha512-8SFQbg/0hQ9xy3UNTB0YEnsNBbWfhf7RtnzpL7TkBiTBRfrQ9Fxcnz7VJsleJpyp6rVLvXiuORqjlHi5q+PYuA==}
+    engines: {node: '>=10.16.0'}
+    dependencies:
+      streamsearch: 1.1.0
+    dev: false
+
+  /[email protected]:
+    resolution: {integrity: sha512-JmpktFppVSvyUN4gsLS0bShY2L9ZUslHLE72vgemBkS43JD2fOvKTKs+GtRwuxrtRGnwJFW0ye7kWRRlLJS9vQ==}
+    dev: false
+
+  /[email protected]:
+    resolution: {integrity: sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==}
+    dev: false
+
+  /[email protected]:
+    resolution: {integrity: sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==}
+    dev: true
+
+  /[email protected]:
+    resolution: {integrity: sha512-cE1qsB/VwyQozZ+q1dGxR8LBYNZeofhEdUNGSMbQD3Gw2lAzX9Zb3uIU6Ebc/Fmyjo9AWWfnn0AUCHqtevs/8g==}
+    dependencies:
+      pend: 1.2.0
+    dev: false
+
+  /[email protected]:
+    resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
+    dev: false
+
+  /[email protected]:
+    resolution: {integrity: sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==}
+    hasBin: true
+    dependencies:
+      js-tokens: 4.0.0
+    dev: false
+
+  /[email protected]:
+    resolution: {integrity: sha512-jLXEEYSbqMkT/FuJLBZAVWGuhIb4JNwHE9kPTorAVmsdZ4UzHAfgWxLsVtD7pLRFaOwYPhNG9nUCpmFL1t/dIg==}
+    dev: false
+
+  /[email protected]:
+    resolution: {integrity: sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==}
+    engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
+    hasBin: true
+    dev: false
+
+  /[email protected]([email protected])([email protected]):
+    resolution: {integrity: sha512-FV3pBrAAnAIfOclTvncw9dDohyeuEEXPe5KNcva91anT/rdycWbgtu3IjUj4n5yHnWK8YEPo0vrUecHmnmUNbA==}
+    engines: {node: '>=16.8.0'}
+    hasBin: true
+    peerDependencies:
+      '@opentelemetry/api': ^1.1.0
+      fibers: '>= 3.1.0'
+      node-sass: ^6.0.0 || ^7.0.0
+      react: ^18.2.0
+      react-dom: ^18.2.0
+      sass: ^1.3.0
+    peerDependenciesMeta:
+      '@opentelemetry/api':
+        optional: true
+      fibers:
+        optional: true
+      node-sass:
+        optional: true
+      sass:
+        optional: true
+    dependencies:
+      '@next/env': 13.4.3
+      '@swc/helpers': 0.5.1
+      busboy: 1.6.0
+      caniuse-lite: 1.0.30001476
+      postcss: 8.4.14
+      react: 18.2.0
+      react-dom: 18.2.0([email protected])
+      styled-jsx: 5.1.1([email protected])
+      zod: 3.21.4
+    optionalDependencies:
+      '@next/swc-darwin-arm64': 13.4.3
+      '@next/swc-darwin-x64': 13.4.3
+      '@next/swc-linux-arm64-gnu': 13.4.3
+      '@next/swc-linux-arm64-musl': 13.4.3
+      '@next/swc-linux-x64-gnu': 13.4.3
+      '@next/swc-linux-x64-musl': 13.4.3
+      '@next/swc-win32-arm64-msvc': 13.4.3
+      '@next/swc-win32-ia32-msvc': 13.4.3
+      '@next/swc-win32-x64-msvc': 13.4.3
+    transitivePeerDependencies:
+      - '@babel/core'
+      - babel-plugin-macros
+    dev: false
+
+  /[email protected]:
+    resolution: {integrity: sha512-F3asv42UuXchdzt+xXqfW1OGlVBe+mxa2mqI0pg5yAHZPvFmY3Y6drSf/GQ1A86WgWEN9Kzh/WrgKa6iGcHXLg==}
+    dev: false
+
+  /[email protected]:
+    resolution: {integrity: sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==}
+    dev: false
+
+  /[email protected]:
+    resolution: {integrity: sha512-E398TUmfAYFPBSdzgeieK2Y1+1cpdxJx8yXbK/m57nRhKSmk1GB2tO4lbLBtlkfPQTDKfe4Xqv1ASWPpayPEig==}
+    engines: {node: ^10 || ^12 || >=14}
+    dependencies:
+      nanoid: 3.3.6
+      picocolors: 1.0.0
+      source-map-js: 1.0.2
+    dev: false
+
+  /[email protected]([email protected]):
+    resolution: {integrity: sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==}
+    peerDependencies:
+      react: ^18.2.0
+    dependencies:
+      loose-envify: 1.4.0
+      react: 18.2.0
+      scheduler: 0.23.0
+    dev: false
+
+  /[email protected]:
+    resolution: {integrity: sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==}
+    engines: {node: '>=0.10.0'}
+    dependencies:
+      loose-envify: 1.4.0
+    dev: false
+
+  /[email protected]:
+    resolution: {integrity: sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==}
+    dependencies:
+      loose-envify: 1.4.0
+    dev: false
+
+  /[email protected]:
+    resolution: {integrity: sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==}
+    engines: {node: '>=0.10.0'}
+    dev: false
+
+  /[email protected]:
+    resolution: {integrity: sha512-Mcc5wHehp9aXz1ax6bZUyY5afg9u2rv5cqQI3mRrYkGC8rW2hM02jWuwjtL++LS5qinSyhj2QfLyNsuc+VsExg==}
+    engines: {node: '>=10.0.0'}
+    dev: false
+
+  /[email protected]([email protected]):
+    resolution: {integrity: sha512-pW7uC1l4mBZ8ugbiZrcIsiIvVx1UmTfw7UkC3Um2tmfUq9Bhk8IiyEIPl6F8agHgjzku6j0xQEZbfA5uSgSaCw==}
+    engines: {node: '>= 12.0.0'}
+    peerDependencies:
+      '@babel/core': '*'
+      babel-plugin-macros: '*'
+      react: '>= 16.8.0 || 17.x.x || ^18.0.0-0'
+    peerDependenciesMeta:
+      '@babel/core':
+        optional: true
+      babel-plugin-macros:
+        optional: true
+    dependencies:
+      client-only: 0.0.1
+      react: 18.2.0
+    dev: false
+
+  /[email protected]:
+    resolution: {integrity: sha512-336iVw3rtn2BUK7ORdIAHTyxHGRIHVReokCR3XjbckJMK7ms8FysBfhLR8IXnAgy7T0PTPNBWKiH514FOW/WSg==}
+    dev: false
+
+  /[email protected]:
+    resolution: {integrity: sha512-cW9T5W9xY37cc+jfEnaUvX91foxtHkza3Nw3wkoF4sSlKn0MONdkdEndig/qPBWXNkmplh3NzayQzCiHM4/hqw==}
+    engines: {node: '>=12.20'}
+    hasBin: true
+    dev: true
+
+  /[email protected]:
+    resolution: {integrity: sha512-L9WMGRfrjOhgHSdOYgCt/yRMsXzLDJSL7BPrOZt73gU0iWO4mpqzqQzOz5srxqTvMBaR0XZTSrVWo4j55Rc6cA==}
+    dev: false
+
+  /[email protected]:
+    resolution: {integrity: sha512-Cl65diFGxz7gpwbav10HqiY/eVYTO1sjQpmRmV991Bj7wAoOAjGQ97PpQcXorDE2Uc4hnGWLY17xme+5t6MlSg==}
+    dev: false
+
+  /[email protected]:
+    resolution: {integrity: sha512-p4a9I6X6nu6IhoGmBqAcbJy1mlC4j27vEPZX9F4L4/vZT3Lyq1VkFHw/V/PUcB9Buo+DG3iHkT0x3Qya58zc3g==}
+    dependencies:
+      buffer-crc32: 0.2.13
+      fd-slicer: 1.1.0
+    dev: false
+
+  /[email protected]:
+    resolution: {integrity: sha512-m46AKbrzKVzOzs/DZgVnG5H55N1sv1M8qZU3A8RIKbs3mrACDNeIOeilDymVb2HdmP8uwshOCF4uJ8uM9rCqJw==}
+    dev: false

src/components/base/boxes.tsx

@@ -1,28 +0,0 @@
-import { Divider, DividerProps, Paper, PaperProps } from "@mui/material";
-import { styled } from "@mui/material/styles";
-
-export const SectionBox = styled(Paper)<PaperProps>(({ theme }) => ({
-  display: "flex",
-  padding: 15,
-  paddingTop: 30,
-  paddingBottom: 30,
-  marginBottom: 20,
-  background: `linear-gradient(to bottom right, ${theme.palette.primary.main} 0%, ${theme.palette.secondary.main} 100%)`,
-}));
-
-export const HighlightBox = styled(Paper)<PaperProps>(({ theme }) => ({
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "center",
-  padding: 10,
-  borderBottom: `3px solid transparent`,
-  borderImage: `linear-gradient(to bottom right, #b827fc 0%, #2c90fc 25%, #b8fd33 50%, #fec837 75%, #fd1892 100%)`,
-  borderImageSlice: 1,
-}));
-
-export const DividerBox = styled(Divider)<DividerProps>(({ theme }) => ({
-  marginTop: 20,
-  marginBottom: 20,
-  background: "transparent",
-  border: "none",
-}));

src/components/base/code.tsx

@@ -1,19 +0,0 @@
-import { styled } from "@mui/material/styles";
-import { Paper, PaperProps } from "@mui/material";
-
-type CodeProps = {
-  children: string;
-};
-
-const CodeBox = styled(Paper)<PaperProps>(({ theme }) => ({
-  fontFamily: "monospace",
-  padding: 8,
-  borderTop: `2px solid ${theme.palette.secondary.dark}`,
-  borderBottom: `2px solid ${theme.palette.secondary.dark}`,
-}));
-
-export default function Code(props: CodeProps) {
-  const { children } = props;
-
-  return <CodeBox>{children}</CodeBox>;
-}

src/components/base/example-button.tsx

@@ -1,41 +0,0 @@
-import { Button, Typography } from "@mui/material";
-import { MouseEventHandler } from "react";
-
-interface ExampleButtonProps {
-  text: string;
-  displayLength?: number;
-  onClick?: (text: string) => void;
-}
-
-/**
- *
- * A button that hosts an example "text" that can be used as the input
- * to anything to get an inspiration on how to get started.
- *
- * @param props ExampleButtonProps
- * @returns
- */
-export default function ExampleButton(props: ExampleButtonProps) {
-  const { text, displayLength = 50, onClick } = props;
-
-  const displayText =
-    text.slice(0, displayLength) + (text.length > displayLength ? "..." : "");
-
-  const handleClick: MouseEventHandler = event => {
-    event.preventDefault();
-
-    if (onClick) {
-      onClick(text);
-    }
-  };
-
-  return (
-    <Button
-      onClick={handleClick}
-      sx={{ textTransform: "none" }}
-      variant="outlined"
-    >
-      <Typography>{displayText}</Typography>
-    </Button>
-  );
-}

src/components/base/options.tsx

@@ -1,56 +0,0 @@
-import { KeyboardArrowDown, KeyboardArrowUp } from "@mui/icons-material";
-import {
-  Card,
-  CardContent,
-  CardHeader,
-  Collapse,
-  IconButton,
-  Stack,
-} from "@mui/material";
-import { ReactElement, useState } from "react";
-
-type OptionsProps = {
-  children: ReactElement | ReactElement[];
-  opened?: boolean;
-};
-
-/**
- *  Define options that are hidden by default
- *
- * @param props OptionsProps
- * @param props.opened boolean - Are the options visible or not (default)
- *
- * @returns Options
- */
-export default function Options(props: OptionsProps) {
-  const { children, opened = false } = props;
-
-  const [showOptions, setShowOptions] = useState(opened);
-
-  const handleShowOptions = () => setShowOptions(!showOptions);
-
-  return (
-    <>
-      <Card>
-        <CardHeader
-          title="Options"
-          onClick={handleShowOptions}
-          action={
-            <IconButton aria-label="expand" size="small">
-              {showOptions ? <KeyboardArrowUp /> : <KeyboardArrowDown />}
-            </IconButton>
-          }
-          sx={{
-            cursor: "pointer",
-          }}
-          titleTypographyProps={{ variant: "h6", sx: { fontSize: "1em" } }}
-        />
-        <Collapse in={showOptions}>
-          <CardContent>
-            <Stack spacing={2}>{children}</Stack>
-          </CardContent>
-        </Collapse>
-      </Card>
-    </>
-  );
-}

src/components/base/slider-with-label.tsx

@@ -1,22 +0,0 @@
-import {
-  Box,
-  FormControlLabel,
-  Slider,
-  SliderProps,
-  Typography,
-} from "@mui/material";
-
-type SliderWithLabelProps = SliderProps & {
-  label?: string;
-};
-
-export default function SliderWithLabel(props: SliderWithLabelProps) {
-  const { label = "", valueLabelDisplay = "auto" } = props;
-
-  return (
-    <Box>
-      <Typography variant="subtitle1">{label}</Typography>
-      <Slider {...props} valueLabelDisplay={valueLabelDisplay} />
-    </Box>
-  );
-}

src/components/example-components.tsx

@@ -1,35 +0,0 @@
-import { Box, Stack, Typography } from "@mui/material";
-import Huggingface from "./huggingface/huggingface";
-import { DividerBox, HighlightBox, SectionBox } from "./base/boxes";
-import { UnderConstruction } from "./under-construction";
-
-export default function ExampleComponents() {
-  return (
-    <>
-      <SectionBox>
-        <Stack spacing={2}>
-          <Typography component="h2" variant="h3">
-            Components
-          </Typography>
-
-          <Typography variant="body1">
-            Unsure where to begin? Our pre-built components offer a jumpstart
-            for your ML demo 🚀
-          </Typography>
-        </Stack>
-      </SectionBox>
-
-      <Huggingface />
-
-      <DividerBox />
-
-      <Stack spacing={4}>
-        <HighlightBox>
-          <Typography variant="h4">More comming soon!</Typography>
-        </HighlightBox>
-
-        <UnderConstruction />
-      </Stack>
-    </>
-  );
-}

src/components/footer.tsx

@@ -1,32 +0,0 @@
-import Box from "@mui/material/Box";
-import Image from "next/image";
-import { Divider, Link } from "@mui/material";
-
-const Footer = () => {
-  return (
-    <Box
-      component="footer"
-      sx={{
-        display: "flex",
-        justifyContent: "center",
-        gap: 1,
-        alignItems: "center",
-        mt: 8,
-        mb: 4,
-      }}
-    >
-      <Link
-        href="https://failfa.st"
-        display="flex"
-        alignItems="center"
-        rel="noopener"
-        target="_blank"
-      >
-        <Box sx={{ mr: 0.5 }}>Powered by</Box>{" "}
-        <Image src="/failfast.svg" alt="failfast Logo" width="32" height="32" />
-      </Link>
-    </Box>
-  );
-};
-
-export default Footer;

src/components/getting-started.tsx

@@ -1,150 +0,0 @@
-import {
-  Button,
-  Grid,
-  Link,
-  List,
-  ListItem,
-  ListItemIcon,
-  ListItemText,
-  ListSubheader,
-  Paper,
-  Stack,
-  Typography,
-} from "@mui/material";
-
-import ViewQuiltIcon from "@mui/icons-material/ViewQuilt";
-import SailingIcon from "@mui/icons-material/Sailing";
-import LightModeIcon from "@mui/icons-material/LightMode";
-import SentimentVerySatisfiedIcon from "@mui/icons-material/SentimentVerySatisfied";
-import ContentCopyIcon from "@mui/icons-material/ContentCopy";
-import LinkIcon from "@mui/icons-material/Link";
-import SyncIcon from "@mui/icons-material/Sync";
-import { HighlightBox } from "./base/boxes";
-
-export default function GettingStarted() {
-  return (
-    <>
-      <Grid container spacing={2}>
-        <Grid item sm={8} lg={6} sx={{ justifyContent: "center" }}>
-          <Paper sx={{ p: 2 }}>
-            <List disablePadding>
-              <ListSubheader sx={{ fontSize: "1.5em" }}>Features</ListSubheader>
-
-              <ListItem>
-                <ListItemIcon>
-                  <SentimentVerySatisfiedIcon />
-                </ListItemIcon>
-                <ListItemText>
-                  <Link
-                    href="https://huggingface.co/docs/huggingface.js/index"
-                    target="_blank"
-                    rel="noopener"
-                  >
-                    huggingface.js
-                  </Link>{" "}
-                  components (WIP)
-                </ListItemText>
-              </ListItem>
-
-              <ListItem>
-                <ListItemIcon>
-                  <LinkIcon />
-                </ListItemIcon>
-                <ListItemText>
-                  <Link
-                    href="https://js.langchain.com/docs"
-                    target="_blank"
-                    rel="noopener"
-                  >
-                    langchain.js
-                  </Link>{" "}
-                  and{" "}
-                  <Link
-                    href="https://github.com/failfa-st/hyv"
-                    target="_blank"
-                    rel="noopener"
-                  >
-                    hyv
-                  </Link>{" "}
-                  components (comming soon)
-                </ListItemText>
-              </ListItem>
-
-              <ListItem>
-                <ListItemIcon>
-                  <ViewQuiltIcon />
-                </ListItemIcon>
-                <ListItemText>
-                  Rapid prototyping with{" "}
-                  <Link
-                    href="https://mui.com/material-ui/getting-started/overview/"
-                    target="_blank"
-                    rel="noopener"
-                  >
-                    MUI
-                  </Link>
-                </ListItemText>
-              </ListItem>
-              <ListItem>
-                <ListItemIcon>
-                  <LightModeIcon />
-                </ListItemIcon>
-                <ListItemText>
-                  Dark / light theme based on system preferences
-                </ListItemText>
-              </ListItem>
-              <ListItem>
-                <ListItemIcon>
-                  <SyncIcon />
-                </ListItemIcon>
-                <ListItemText>
-                  Sync your GitHub repository with your 🤗 Space
-                </ListItemText>
-              </ListItem>
-              <ListItem>
-                <ListItemIcon>
-                  <SailingIcon />
-                </ListItemIcon>
-                <ListItemText>Runs in Docker or localhost</ListItemText>
-              </ListItem>
-            </List>
-          </Paper>
-        </Grid>
-
-        <Grid item sm={4} lg={3}>
-          <Stack gap={2}>
-            <Paper sx={{ p: 2 }}>
-              <Typography variant="body1">
-                Explore the{" "}
-                <Link
-                  href="https://huggingface.co/spaces/failfast/nextjs-docker-starter/blob/main/README.md"
-                  target="_blank"
-                  rel="noopener"
-                >
-                  README
-                </Link>{" "}
-                for a comprehensive guide on local development, Docker
-                utilization, secret management, and GitHub-based Space control.
-              </Typography>
-            </Paper>
-
-            <Paper sx={{ p: 2 }}>
-              <Typography variant="body1">
-                Have feedback or ideas?{" "}
-                <Link
-                  href="https://huggingface.co/spaces/failfast/nextjs-docker-starter/discussions"
-                  target="_blank"
-                  rel="noopener"
-                >
-                  We&apos;re eager to hear from you!
-                </Link>{" "}
-                As an open-source project in its early stages, your input can
-                significantly shape our development.
-              </Typography>
-            </Paper>
-          </Stack>
-        </Grid>
-      </Grid>
-    </>
-  );
-}

src/components/huggingface/huggingface.tsx

@@ -1,64 +0,0 @@
-import { Alert, Link, Typography } from "@mui/material";
-import { HfInference } from "@huggingface/inference";
-import { useEffect } from "react";
-import Summarization from "./inference/summarization";
-import { HighlightBox } from "../base/boxes";
-import Code from "../base/code";
-
-export type InferenceProps = {
-  token?: string;
-  model: string;
-};
-
-export default function Huggingface() {
-  return (
-    <>
-      <HighlightBox>
-        <Typography component="h4" variant="h4">
-          huggingface.js
-        </Typography>
-      </HighlightBox>
-
-      <Typography variant="body1">
-        <Link
-          href="https://huggingface.co/docs/huggingface.js/index"
-          target="_blank"
-          rel="noopener"
-        >
-          huggingface.js
-        </Link>{" "}
-        is a suite of JavaScript libraries that interact with the Hugging Face
-        API. It enables the use of over 100,000 ML models or your own via the{" "}
-        <Link
-          href="https://huggingface.co/docs/inference-endpoints/index"
-          target="_blank"
-          rel="noopener"
-        >
-          Inference API
-        </Link>
-        , and supports managing Hugging Face repositories.
-      </Typography>
-
-      <Alert severity="info">
-        When you run into rate limits while using the components, make sure to
-        add your 🤗 access token (optained via your{" "}
-        <Link
-          href="https://huggingface.co/settings/tokens"
-          target="_blank"
-          rel="noopener"
-        >
-          account settings
-        </Link>
-        ) into `HF Access Token` under &quot;Options&quot;.
-      </Alert>
-
-      <Typography component="h5" variant="h5">
-        Summarization
-      </Typography>
-
-      <Code>{`<Summarization model="facebook/bart-large-cnn" maxLength={100} />`}</Code>
-
-      <Summarization model="facebook/bart-large-cnn" maxLength={100} />
-    </>
-  );
-}

src/components/huggingface/inference/summarization.tsx

@@ -1,209 +0,0 @@
-import {
-  Alert,
-  Box,
-  Button,
-  CircularProgress,
-  IconButton,
-  InputAdornment,
-  Paper,
-  Slider,
-  Stack,
-  TextField,
-  Typography,
-} from "@mui/material";
-import { useEffect, useRef, useState } from "react";
-import { HfInference, SummarizationArgs } from "@huggingface/inference";
-import { Visibility, VisibilityOff } from "@mui/icons-material";
-import { InferenceProps } from "../huggingface";
-import Options from "@/components/base/options";
-import SliderWithLabel from "@/components/base/slider-with-label";
-import ExampleButton from "@/components/base/example-button";
-
-type SummarizationProps = InferenceProps & {
-  /**
-   * (Default: None). Integer to define the maximum length in tokens of the output summary.
-   */
-  maxLength?: number;
-  /**
-   * (Default: None). Float (0-120.0). The amount of time in seconds that the query should take maximum. Network can cause some overhead so it will be a soft limit.
-   */
-  maxTime?: number;
-  /**
-   * (Default: None). Integer to define the minimum length in tokens of the output summary.
-   */
-  minLength?: number;
-  /**
-   * (Default: None). Float (0.0-100.0). The more a token is used within generation the more it is penalized to not be picked in successive generation passes.
-   */
-  repetitionPenalty?: number;
-  /**
-   * (Default: 1.0). Float (0.0-100.0). The temperature of the sampling operation. 1 means regular sampling, 0 means always take the highest score, 100.0 is getting closer to uniform probability.
-   */
-  temperature?: number;
-  /**
-   * (Default: None). Integer to define the top tokens considered within the sample operation to create new text.
-   */
-  topK?: number;
-  /**
-   * (Default: None). Float to define the tokens that are within the sample operation of text generation. Add tokens in the sample for more probable to least probable until the sum of the probabilities is greater than top_p.
-   */
-  topP?: number;
-};
-
-export default function Summarization(props: SummarizationProps) {
-  const {
-    model,
-    maxLength,
-    maxTime,
-    minLength,
-    repetitionPenalty,
-    temperature,
-    topK,
-    topP,
-  } = props;
-
-  const [token, setToken] = useState<string>("");
-  const [inputText, setInputText] = useState<string>("");
-  const [summary, setSummary] = useState<string>("");
-  const [error, setError] = useState<string>("");
-  const [showToken, setShowToken] = useState(false);
-  const [loading, setLoading] = useState(false);
-
-  const inference = useRef<HfInference | null>(null);
-
-  useEffect(() => {
-    inference.current = new HfInference(token);
-  }, [token]);
-
-  // Parse the data of the form and trigger "call"
-  const handleSubmit = (event: any) => {
-    event.preventDefault();
-    const data = new FormData(event.currentTarget);
-
-    setToken(data.get("token") as string);
-
-    const text = data.get("text") as string;
-    const max_length = Number(data.get("maxLength") as string);
-
-    call({ model, inputs: text, parameters: { max_length } });
-  };
-
-  const handleShowToken = () => setShowToken(!showToken);
-
-  /**
-   * Call the inference API using args
-   */
-  const call = async (args: SummarizationArgs) => {
-    const { inputs, parameters } = args;
-
-    try {
-      setLoading(true);
-
-      const response = await inference.current?.summarization({
-        model,
-        inputs,
-        parameters,
-      });
-
-      setSummary(response?.summary_text as string);
-      setError("");
-    } catch (error) {
-      if (error instanceof Error) {
-        setError(error.message);
-      } else {
-        setError("An unknown error occurred");
-      }
-    }
-
-    setLoading(false);
-  };
-
-  return (
-    <>
-      <Paper component="form" onSubmit={handleSubmit} sx={{ padding: "1em" }}>
-        <Stack spacing={2}>
-          <TextField
-            variant="filled"
-            label="Text to summarize"
-            multiline
-            required
-            minRows={4}
-            name="text"
-            value={inputText}
-            onChange={e => setInputText(e.target.value)}
-          />
-
-          <Button type="submit" variant="contained" disabled={loading}>
-            Run{" "}
-            {loading && (
-              <CircularProgress
-                size={24}
-                sx={{
-                  position: "absolute",
-                  top: "50%",
-                  left: "50%",
-                  marginTop: "-12px",
-                  marginLeft: "-12px",
-                }}
-              />
-            )}
-          </Button>
-
-          {error && <Alert severity="error">{error}</Alert>}
-
-          <TextField
-            variant="outlined"
-            label="Summary"
-            multiline
-            minRows={2}
-            name="text"
-            value={summary}
-          />
-
-          <Options>
-            <TextField
-              variant="filled"
-              label="HF Access Token"
-              name="token"
-              type={showToken ? "text" : "password"}
-              InputProps={{
-                endAdornment: (
-                  <InputAdornment position="end">
-                    <IconButton onClick={handleShowToken}>
-                      {showToken ? <Visibility /> : <VisibilityOff />}
-                    </IconButton>
-                  </InputAdornment>
-                ),
-              }}
-            />
-
-            <SliderWithLabel
-              label="max_length"
-              name="maxLength"
-              aria-label="max length"
-              defaultValue={maxLength}
-              step={1}
-              min={56}
-              max={256}
-            />
-          </Options>
-
-          <Typography variant="h6" sx={{ fontSize: "1em" }}>
-            Examples
-          </Typography>
-          <Stack direction="row" spacing={2}>
-            <ExampleButton
-              text="The tower is 324 metres (1,063 ft) tall, about the same height as an 81-storey building, and the tallest structure in Paris. Its base is square, measuring 125 metres (410 ft) on each side. During its construction, the Eiffel Tower surpassed the Washington Monument to become the tallest man-made structure in the world, a title it held for 41 years until the Chrysler Building in New York City was finished in 1930. It was the first structure to reach a height of 300 metres. Due to the addition of a broadcasting aerial at the top of the tower in 1957, it is now taller than the Chrysler Building by 5.2 metres (17 ft). Excluding transmitters, the Eiffel Tower is the second tallest free-standing structure in France after the Millau Viaduct."
-              onClick={setInputText}
-            />
-
-            <ExampleButton
-              text="Machine learning (ML) is a field devoted to understanding and building methods that let machines 'learn' – that is, methods that leverage data to improve computer performance on some set of tasks. Machine learning algorithms build a model based on sample data, known as training data, in order to make predictions or decisions without being explicitly programmed to do so. Machine learning algorithms are used in a wide variety of applications, such as in medicine, email filtering, speech recognition, agriculture, and computer vision, where it is difficult or unfeasible to develop conventional algorithms to perform the needed tasks."
-              onClick={setInputText}
-            />
-          </Stack>
-        </Stack>
-      </Paper>
-    </>
-  );
-}

src/components/title.tsx

@@ -1,62 +0,0 @@
-import { Button, Link, Paper, Stack, Typography } from "@mui/material";
-import { HighlightBox } from "./base/boxes";
-import ContentCopyIcon from "@mui/icons-material/ContentCopy";
-
-export default function Title() {
-  return (
-    <Stack
-      spacing={4}
-      sx={{
-        justifyContent: "center",
-        alignItems: "center",
-        minHeight: "40vh",
-        p: 4,
-      }}
-    >
-      <Typography variant="h1" component="h1">
-        <Link
-          href="https://nextjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Next.js
-        </Link>{" "}
-        on 🤗{" "}
-        <Link
-          href="https://huggingface.co/spaces"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Spaces
-        </Link>
-      </Typography>
-
-      <HighlightBox>
-        <Typography variant="h5" component="p">
-          Run your ML demo with ease in a Next.js environment
-        </Typography>
-      </HighlightBox>
-
-      <Stack gap={2} direction="row">
-        <Button
-          startIcon={<ContentCopyIcon />}
-          variant="contained"
-          href="https://huggingface.co/spaces/failfast/nextjs-docker-starter?duplicate=true"
-          target="_blank"
-          rel="noopener"
-          color="secondary"
-        >
-          Duplicate space
-        </Button>
-
-        <Button
-          href="https://github.com/failfa-st/nextjs-docker-starter"
-          target="_blank"
-          rel="noopener"
-        >
-          Contribute on GitHub
-        </Button>
-      </Stack>
-    </Stack>
-  );
-}

src/components/under-construction.tsx

@@ -1,8 +0,0 @@
-import { styled } from "@mui/material/styles";
-
-export const UnderConstruction = styled("div")({
-  width: "100%",
-  height: "266px",
-  backgroundRepeat: "round",
-  backgroundImage: `url("data:image/gif;base64,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")`,
-});

src/lib/createEmotionCache.ts

@@ -1,19 +0,0 @@
-import createCache from "@emotion/cache";
-
-const isBrowser = typeof document !== "undefined";
-
-// On the client side, Create a meta tag at the top of the <head> and set it as insertionPoint.
-// This assures that MUI styles are loaded first.
-// It allows developers to easily override MUI styles with other styling solutions, like CSS modules.
-export default function createEmotionCache() {
-  let insertionPoint;
-
-  if (isBrowser) {
-    const emotionInsertionPoint = document.querySelector<HTMLMetaElement>(
-      'meta[name="emotion-insertion-point"]'
-    );
-    insertionPoint = emotionInsertionPoint ?? undefined;
-  }
-
-  return createCache({ key: "mui-style", insertionPoint });
-}

src/lib/theme.ts

@@ -1,62 +0,0 @@
-import { Roboto } from "next/font/google";
-import { experimental_extendTheme as extendTheme } from "@mui/material/styles";
-
-export const roboto = Roboto({
-  weight: ["300", "400", "500", "700"],
-  subsets: ["latin"],
-  display: "swap",
-  fallback: ["Helvetica", "Arial", "sans-serif"],
-});
-
-/**
- * https://mui.com/material-ui/experimental-api/css-theme-variables/customization/
- *
- * TL;DR
- * - specify both dark and light colors at once
- * - extendTheme returns a theme for CssVarsProvider, not ThemeProvider
- * - CssVarsProvider has a defaultMode property, set to "system" in _app.tsx
- */
-const theme = extendTheme({
-  colorSchemes: {
-    light: {
-      palette: {
-        primary: {
-          main: "#2c90fc",
-        },
-        secondary: {
-          main: "#b827fc",
-        },
-      },
-    },
-    dark: {
-      palette: {
-        primary: {
-          main: "#2c90fc",
-        },
-        secondary: {
-          main: "#b827fc",
-        },
-      },
-    },
-  },
-  typography: {
-    ...roboto.style,
-    h1: {
-      fontSize: "5.25em",
-    },
-  },
-  components: {
-    MuiLink: {
-      styleOverrides: {
-        root: {
-          textDecoration: "none",
-          ":hover": {
-            textDecoration: "underline",
-          },
-        },
-      },
-    },
-  },
-});
-
-export default theme;

src/pages/_app.tsx

@@ -1,29 +0,0 @@
-import Head from "next/head";
-import { AppProps } from "next/app";
-import { Experimental_CssVarsProvider as CssVarsProvider } from "@mui/material/styles";
-import CssBaseline from "@mui/material/CssBaseline";
-import { CacheProvider, EmotionCache } from "@emotion/react";
-import theme from "@/lib/theme";
-import createEmotionCache from "@/lib/createEmotionCache";
-
-// Client-side cache, shared for the whole session of the user in the browser.
-const clientSideEmotionCache = createEmotionCache();
-
-export interface MyAppProps extends AppProps {
-  emotionCache?: EmotionCache;
-}
-
-export default function MyApp(props: MyAppProps) {
-  const { Component, emotionCache = clientSideEmotionCache, pageProps } = props;
-  return (
-    <CacheProvider value={emotionCache}>
-      <Head>
-        <meta name="viewport" content="initial-scale=1, width=device-width" />
-      </Head>
-      <CssVarsProvider defaultMode="system" theme={theme}>
-        <CssBaseline />
-        <Component {...pageProps} />
-      </CssVarsProvider>
-    </CacheProvider>
-  );
-}

src/pages/_document.tsx

@@ -1,13 +0,0 @@
-import { Html, Head, Main, NextScript } from 'next/document'
-
-export default function Document() {
-  return (
-    <Html lang="en">
-      <Head />
-      <body>
-        <Main />
-        <NextScript />
-      </body>
-    </Html>
-  )
-}

src/pages/api/env.ts

@@ -1,11 +0,0 @@
-import process from "node:process";
-import { NextApiRequest, NextApiResponse } from "next";
-
-export default async function handler(
-  request: NextApiRequest,
-  response: NextApiResponse
-) {
-  const exampleSecret = process.env.HF_EXAMPLE_SECRET;
-
-  return response.status(200).json({ HF_EXAMPLE_SECRET: exampleSecret });
-}

src/pages/index.tsx

@@ -1,35 +0,0 @@
-import Head from "next/head";
-import Container from "@mui/material/Container";
-import Footer from "@/components/footer";
-import Title from "@/components/title";
-import Huggingface from "@/components/huggingface/huggingface";
-import GettingStarted from "@/components/getting-started";
-import ExampleComponents from "@/components/example-components";
-import { Stack } from "@mui/material";
-import { DividerBox } from "@/components/base/boxes";
-
-export default function Home() {
-  return (
-    <>
-      <Head>
-        <title>nextjs-docker-starter</title>
-        <link rel="icon" href="/favicon.ico" />
-        <meta name="description" content="Next.js in Docker on 🤗 Spaces" />
-      </Head>
-
-      <Container component="main" sx={{ minHeight: "90vh" }}>
-        <Stack spacing={4} useFlexGap>
-          <Title />
-
-          <GettingStarted />
-
-          <DividerBox />
-
-          <ExampleComponents />
-        </Stack>
-      </Container>
-
-      <Footer />
-    </>
-  );
-}

theme.json

@@ -0,0 +1,1832 @@
+{
+  "name": "Night Owl",
+  "type": "dark",
+  "semanticHighlighting": false,
+  "colors": {
+    "contrastBorder": "#122d42",
+    "focusBorder": "#122d42",
+    "foreground": "#d6deeb",
+    "widget.shadow": "#101218",
+    "selection.background": "#4373c2",
+    "errorForeground": "#EF5350",
+    "button.background": "#7e57c2cc",
+    "button.foreground": "#ffffffcc",
+    "button.hoverBackground": "#7e57c2",
+    "dropdown.background": "#101218",
+    "dropdown.border": "#5f7e97",
+    "dropdown.foreground": "#ffffffcc",
+    "input.background": "#0b253a",
+    "input.border": "#5f7e97",
+    "input.foreground": "#ffffffcc",
+    "input.placeholderForeground": "#5f7e97",
+    "inputOption.activeBorder": "#ffffffcc",
+    "punctuation.definition.generic.begin.html": "#ef5350f2",
+    "inputValidation.errorBackground": "#AB0300F2",
+    "inputValidation.errorBorder": "#EF5350",
+    "inputValidation.infoBackground": "#00589EF2",
+    "inputValidation.infoBorder": "#64B5F6",
+    "inputValidation.warningBackground": "#675700F2",
+    "inputValidation.warningBorder": "#FFCA28",
+    "scrollbar.shadow": "#010b14",
+    "scrollbarSlider.activeBackground": "#084d8180",
+    "scrollbarSlider.background": "#084d8180",
+    "scrollbarSlider.hoverBackground": "#084d8180",
+    "badge.background": "#5f7e97",
+    "badge.foreground": "#ffffff",
+    "progress.background": "#7e57c2",
+    "breadcrumb.foreground": "#A599E9",
+    "breadcrumb.focusForeground": "#ffffff",
+    "breadcrumb.activeSelectionForeground": "#FFFFFF",
+    "breadcrumbPicker.background": "#001122",
+    "list.activeSelectionBackground": "#234d708c",
+    "list.activeSelectionForeground": "#ffffff",
+    "list.invalidItemForeground": "#975f94",
+    "list.dropBackground": "#101218",
+    "list.focusBackground": "#010d18",
+    "list.focusForeground": "#ffffff",
+    "list.highlightForeground": "#ffffff",
+    "list.hoverBackground": "#101218",
+    "list.hoverForeground": "#ffffff",
+    "list.inactiveSelectionBackground": "#0e293f",
+    "list.inactiveSelectionForeground": "#5f7e97",
+    "activityBar.background": "#101218",
+    "activityBar.dropBackground": "#5f7e97",
+    "activityBar.foreground": "#5f7e97",
+    "activityBar.border": "#101218",
+    "activityBarBadge.background": "#44596b",
+    "activityBarBadge.foreground": "#ffffff",
+    "sideBar.background": "#101218",
+    "sideBar.foreground": "#89a4bb",
+    "sideBar.border": "#101218",
+    "sideBarTitle.foreground": "#5f7e97",
+    "sideBarSectionHeader.background": "#101218",
+    "sideBarSectionHeader.foreground": "#5f7e97",
+    "editorGroup.emptyBackground": "#101218",
+    "editorGroup.border": "#101218",
+    "editorGroup.dropBackground": "#7e57c273",
+    "editorGroupHeader.noTabsBackground": "#101218",
+    "editorGroupHeader.tabsBackground": "#101218",
+    "editorGroupHeader.tabsBorder": "#262A39",
+    "tab.activeBackground": "#0b2942",
+    "tab.activeForeground": "#d2dee7",
+    "tab.border": "#272B3B",
+    "tab.activeBorder": "#262A39",
+    "tab.unfocusedActiveBorder": "#262A39",
+    "tab.inactiveBackground": "#01111d",
+    "tab.inactiveForeground": "#5f7e97",
+    "tab.unfocusedActiveForeground": "#5f7e97",
+    "tab.unfocusedInactiveForeground": "#5f7e97",
+    "editor.background": "#101218",
+    "editor.foreground": "#d6deeb",
+    "editorLineNumber.foreground": "#4b6479",
+    "editorLineNumber.activeForeground": "#C5E4FD",
+    "editorCursor.foreground": "#80a4c2",
+    "editor.selectionBackground": "#1d3b53",
+    "editor.selectionHighlightBackground": "#5f7e9779",
+    "editor.inactiveSelectionBackground": "#7e57c25a",
+    "editor.wordHighlightBackground": "#f6bbe533",
+    "editor.wordHighlightStrongBackground": "#e2a2f433",
+    "editor.findMatchBackground": "#5f7e9779",
+    "editor.findMatchHighlightBackground": "#1085bb5d",
+    "editor.findRangeHighlightBackground": null,
+    "editor.hoverHighlightBackground": "#7e57c25a",
+    "editor.lineHighlightBackground": "#0003",
+    "editor.lineHighlightBorder": null,
+    "editorLink.activeForeground": null,
+    "editor.rangeHighlightBackground": "#7e57c25a",
+    "editorWhitespace.foreground": null,
+    "editorIndentGuide.background": "#5e81ce52",
+    "editorIndentGuide.activeBackground": "#7E97AC",
+    "editorRuler.foreground": "#5e81ce52",
+    "editorCodeLens.foreground": "#5e82ceb4",
+    "editorBracketMatch.background": "#5f7e974d",
+    "editorBracketMatch.border": null,
+    "editorOverviewRuler.currentContentForeground": "#7e57c2",
+    "editorOverviewRuler.incomingContentForeground": "#7e57c2",
+    "editorOverviewRuler.commonContentForeground": "#7e57c2",
+    "editorError.foreground": "#EF5350",
+    "editorError.border": null,
+    "editorWarning.foreground": "#b39554",
+    "editorWarning.border": null,
+    "editorGutter.background": "#101218",
+    "editorGutter.modifiedBackground": "#e2b93d",
+    "editorGutter.addedBackground": "#9CCC65",
+    "editorGutter.deletedBackground": "#EF5350",
+    "diffEditor.insertedTextBackground": "#99b76d23",
+    "diffEditor.insertedTextBorder": "#c5e47833",
+    "diffEditor.removedTextBackground": "#ef535033",
+    "diffEditor.removedTextBorder": "#ef53504d",
+    "editorWidget.background": "#021320",
+    "editorWidget.border": "#5f7e97",
+    "editorSuggestWidget.background": "#2C3043",
+    "editorSuggestWidget.border": "#2B2F40",
+    "editorSuggestWidget.foreground": "#d6deeb",
+    "editorSuggestWidget.highlightForeground": "#ffffff",
+    "editorSuggestWidget.selectedBackground": "#5f7e97",
+    "editorHoverWidget.background": "#101218",
+    "editorHoverWidget.border": "#5f7e97",
+    "debugExceptionWidget.background": "#101218",
+    "debugExceptionWidget.border": "#5f7e97",
+    "editorMarkerNavigation.background": "#0b2942",
+    "editorMarkerNavigationError.background": "#EF5350",
+    "editorMarkerNavigationWarning.background": "#FFCA28",
+    "peekView.border": "#5f7e97",
+    "peekViewEditor.background": "#101218",
+    "peekViewEditor.matchHighlightBackground": "#7e57c25a",
+    "peekViewResult.background": "#101218",
+    "peekViewResult.fileForeground": "#5f7e97",
+    "peekViewResult.lineForeground": "#5f7e97",
+    "peekViewResult.matchHighlightBackground": "#ffffffcc",
+    "peekViewResult.selectionBackground": "#2E3250",
+    "peekViewResult.selectionForeground": "#5f7e97",
+    "peekViewTitle.background": "#101218",
+    "peekViewTitleDescription.foreground": "#697098",
+    "peekViewTitleLabel.foreground": "#5f7e97",
+    "merge.currentHeaderBackground": "#5f7e97",
+    "merge.currentContentBackground": null,
+    "merge.incomingHeaderBackground": "#7e57c25a",
+    "merge.incomingContentBackground": null,
+    "merge.border": null,
+    "panel.background": "#101218",
+    "panel.border": "#5f7e97",
+    "panelTitle.activeBorder": "#5f7e97",
+    "panelTitle.activeForeground": "#ffffffcc",
+    "panelTitle.inactiveForeground": "#d6deeb80",
+    "statusBar.background": "#101218",
+    "statusBar.foreground": "#5f7e97",
+    "statusBar.border": "#262A39",
+    "statusBar.debuggingBackground": "#202431",
+    "statusBar.debuggingForeground": null,
+    "statusBar.debuggingBorder": "#1F2330",
+    "statusBar.noFolderForeground": null,
+    "statusBar.noFolderBackground": "#101218",
+    "statusBar.noFolderBorder": "#25293A",
+    "statusBarItem.activeBackground": "#202431",
+    "statusBarItem.hoverBackground": "#202431",
+    "statusBarItem.prominentBackground": "#202431",
+    "statusBarItem.prominentHoverBackground": "#202431",
+    "titleBar.activeBackground": "#101218",
+    "titleBar.activeForeground": "#eeefff",
+    "titleBar.inactiveBackground": "#010e1a",
+    "titleBar.inactiveForeground": null,
+    "notifications.background": "#01111d",
+    "notifications.border": "#262a39",
+    "notificationCenter.border": "#262a39",
+    "notificationToast.border": "#262a39",
+    "notifications.foreground": "#ffffffcc",
+    "notificationLink.foreground": "#80CBC4",
+    "extensionButton.prominentForeground": "#ffffffcc",
+    "extensionButton.prominentBackground": "#7e57c2cc",
+    "extensionButton.prominentHoverBackground": "#7e57c2",
+    "pickerGroup.foreground": "#d1aaff",
+    "pickerGroup.border": "#101218",
+    "terminal.ansiWhite": "#ffffff",
+    "terminal.ansiBlack": "#101218",
+    "terminal.ansiBlue": "#82AAFF",
+    "terminal.ansiCyan": "#21c7a8",
+    "terminal.ansiGreen": "#22da6e",
+    "terminal.ansiMagenta": "#A492EA",
+    "terminal.ansiRed": "#EF5350",
+    "terminal.ansiYellow": "#c5e478",
+    "terminal.ansiBrightWhite": "#ffffff",
+    "terminal.ansiBrightBlack": "#575656",
+    "terminal.ansiBrightBlue": "#82AAFF",
+    "terminal.ansiBrightCyan": "#7fdbca",
+    "terminal.ansiBrightGreen": "#22da6e",
+    "terminal.ansiBrightMagenta": "#A492EA",
+    "terminal.ansiBrightRed": "#EF5350",
+    "terminal.ansiBrightYellow": "#ffeb95",
+    "terminal.selectionBackground": "#1b90dd4d",
+    "terminalCursor.background": "#234d70",
+    "textCodeBlock.background": "#4f4f4f",
+    "debugToolBar.background": "#101218",
+    "welcomePage.buttonBackground": "#101218",
+    "welcomePage.buttonHoverBackground": "#101218",
+    "walkThrough.embeddedEditorBackground": "#101218",
+    "gitDecoration.modifiedResourceForeground": "#a2bffc",
+    "gitDecoration.deletedResourceForeground": "#EF535090",
+    "gitDecoration.untrackedResourceForeground": "#c5e478ff",
+    "gitDecoration.ignoredResourceForeground": "#395a75",
+    "gitDecoration.conflictingResourceForeground": "#ffeb95cc",
+    "source.elm": "#5f7e97",
+    "string.quoted.single.js": "#ffffff",
+    "meta.objectliteral.js": "#82AAFF"
+  },
+  "tokenColors": [
+    {
+      "name": "Changed",
+      "scope": [
+        "markup.changed",
+        "meta.diff.header.git",
+        "meta.diff.header.from-file",
+        "meta.diff.header.to-file"
+      ],
+      "settings": {
+        "foreground": "#a2bffc",
+        "fontStyle": "italic"
+      }
+    },
+    {
+      "name": "Deleted",
+      "scope": "markup.deleted.diff",
+      "settings": {
+        "foreground": "#EF535090",
+        "fontStyle": "italic"
+      }
+    },
+    {
+      "name": "Inserted",
+      "scope": "markup.inserted.diff",
+      "settings": {
+        "foreground": "#c5e478ff",
+        "fontStyle": "italic"
+      }
+    },
+    {
+      "name": "Global settings",
+      "settings": {
+        "background": "#101218",
+        "foreground": "#d6deeb"
+      }
+    },
+    {
+      "name": "Comment",
+      "scope": "comment",
+      "settings": {
+        "foreground": "#637777",
+        "fontStyle": "italic"
+      }
+    },
+    {
+      "name": "String",
+      "scope": "string",
+      "settings": {
+        "foreground": "#ecc48d"
+      }
+    },
+    {
+      "name": "String Quoted",
+      "scope": ["string.quoted", "variable.other.readwrite.js"],
+      "settings": {
+        "foreground": "#ecc48d"
+      }
+    },
+    {
+      "name": "Support Constant Math",
+      "scope": "support.constant.math",
+      "settings": {
+        "foreground": "#c5e478"
+      }
+    },
+    {
+      "name": "Number",
+      "scope": ["constant.numeric", "constant.character.numeric"],
+      "settings": {
+        "foreground": "#F78C6C",
+        "fontStyle": ""
+      }
+    },
+    {
+      "name": "Built-in constant",
+      "scope": [
+        "constant.language",
+        "punctuation.definition.constant",
+        "variable.other.constant"
+      ],
+      "settings": {
+        "foreground": "#82AAFF"
+      }
+    },
+    {
+      "name": "User-defined constant",
+      "scope": ["constant.character", "constant.other"],
+      "settings": {
+        "foreground": "#82AAFF"
+      }
+    },
+    {
+      "name": "Constant Character Escape",
+      "scope": "constant.character.escape",
+      "settings": {
+        "foreground": "#F78C6C"
+      }
+    },
+    {
+      "name": "RegExp String",
+      "scope": ["string.regexp", "string.regexp keyword.other"],
+      "settings": {
+        "foreground": "#5ca7e4"
+      }
+    },
+    {
+      "name": "Comma in functions",
+      "scope": "meta.function punctuation.separator.comma",
+      "settings": {
+        "foreground": "#5f7e97"
+      }
+    },
+    {
+      "name": "Variable",
+      "scope": "variable",
+      "settings": {
+        "foreground": "#c5e478"
+      }
+    },
+    {
+      "name": "Keyword",
+      "scope": ["punctuation.accessor", "keyword"],
+      "settings": {
+        "foreground": "#a492ea",
+        "fontStyle": "italic"
+      }
+    },
+    {
+      "name": "Storage",
+      "scope": [
+        "storage",
+        "meta.var.expr",
+        "meta.class meta.method.declaration meta.var.expr storage.type.js",
+        "storage.type.property.js",
+        "storage.type.property.ts",
+        "storage.type.property.tsx"
+      ],
+      "settings": {
+        "foreground": "#a492ea",
+        "fontStyle": "italic"
+      }
+    },
+    {
+      "name": "Storage type",
+      "scope": "storage.type",
+      "settings": {
+        "foreground": "#a492ea"
+      }
+    },
+    {
+      "name": "Storage type",
+      "scope": "storage.type.function.arrow.js",
+      "settings": {
+        "fontStyle": ""
+      }
+    },
+    {
+      "name": "Class name",
+      "scope": ["entity.name.class", "meta.class entity.name.type.class"],
+      "settings": {
+        "foreground": "#ffcb8b"
+      }
+    },
+    {
+      "name": "Inherited class",
+      "scope": "entity.other.inherited-class",
+      "settings": {
+        "foreground": "#c5e478"
+      }
+    },
+    {
+      "name": "Function name",
+      "scope": "entity.name.function",
+      "settings": {
+        "foreground": "#a492ea",
+        "fontStyle": "italic"
+      }
+    },
+    {
+      "name": "Meta Tag",
+      "scope": ["punctuation.definition.tag", "meta.tag"],
+      "settings": {
+        "foreground": "#7fdbca"
+      }
+    },
+    {
+      "name": "HTML Tag names",
+      "scope": [
+        "entity.name.tag",
+        "meta.tag.other.html",
+        "meta.tag.other.js",
+        "meta.tag.other.tsx",
+        "entity.name.tag.tsx",
+        "entity.name.tag.js",
+        "entity.name.tag",
+        "meta.tag.js",
+        "meta.tag.tsx",
+        "meta.tag.html"
+      ],
+      "settings": {
+        "foreground": "#caece6",
+        "fontStyle": ""
+      }
+    },
+    {
+      "name": "Tag attribute",
+      "scope": "entity.other.attribute-name",
+      "settings": {
+        "fontStyle": "italic",
+        "foreground": "#c5e478"
+      }
+    },
+    {
+      "name": "Entity Name Tag Custom",
+      "scope": "entity.name.tag.custom",
+      "settings": {
+        "foreground": "#f78c6c"
+      }
+    },
+    {
+      "name": "Library (function & constant)",
+      "scope": ["support.function", "support.constant"],
+      "settings": {
+        "foreground": "#82AAFF"
+      }
+    },
+    {
+      "name": "Support Constant Property Value meta",
+      "scope": "support.constant.meta.property-value",
+      "settings": {
+        "foreground": "#7fdbca"
+      }
+    },
+    {
+      "name": "Library class/type",
+      "scope": ["support.type", "support.class"],
+      "settings": {
+        "foreground": "#c5e478"
+      }
+    },
+    {
+      "name": "Support Variable DOM",
+      "scope": "support.variable.dom",
+      "settings": {
+        "foreground": "#c5e478"
+      }
+    },
+    {
+      "name": "Invalid",
+      "scope": "invalid",
+      "settings": {
+        "background": "#ff2c83",
+        "foreground": "#ffffff"
+      }
+    },
+    {
+      "name": "Invalid deprecated",
+      "scope": "invalid.deprecated",
+      "settings": {
+        "foreground": "#ffffff",
+        "background": "#d3423e"
+      }
+    },
+    {
+      "name": "Keyword Operator",
+      "scope": "keyword.operator",
+      "settings": {
+        "foreground": "#7fdbca",
+        "fontStyle": ""
+      }
+    },
+    {
+      "name": "Keyword Operator Relational",
+      "scope": "keyword.operator.relational",
+      "settings": {
+        "foreground": "#a492ea",
+        "fontStyle": "italic"
+      }
+    },
+    {
+      "name": "Keyword Operator Assignment",
+      "scope": "keyword.operator.assignment",
+      "settings": {
+        "foreground": "#a492ea"
+      }
+    },
+    {
+      "name": "Keyword Operator Arithmetic",
+      "scope": "keyword.operator.arithmetic",
+      "settings": {
+        "foreground": "#a492ea"
+      }
+    },
+    {
+      "name": "Keyword Operator Bitwise",
+      "scope": "keyword.operator.bitwise",
+      "settings": {
+        "foreground": "#a492ea"
+      }
+    },
+    {
+      "name": "Keyword Operator Increment",
+      "scope": "keyword.operator.increment",
+      "settings": {
+        "foreground": "#a492ea"
+      }
+    },
+    {
+      "name": "Keyword Operator Ternary",
+      "scope": "keyword.operator.ternary",
+      "settings": {
+        "foreground": "#a492ea"
+      }
+    },
+    {
+      "name": "Double-Slashed Comment",
+      "scope": "comment.line.double-slash",
+      "settings": {
+        "foreground": "#637777"
+      }
+    },
+    {
+      "name": "Object",
+      "scope": "object",
+      "settings": {
+        "foreground": "#cdebf7"
+      }
+    },
+    {
+      "name": "Null",
+      "scope": "constant.language.null",
+      "settings": {
+        "foreground": "#ff5874"
+      }
+    },
+    {
+      "name": "Meta Brace",
+      "scope": "meta.brace",
+      "settings": {
+        "foreground": "#d6deeb"
+      }
+    },
+    {
+      "name": "Meta Delimiter Period",
+      "scope": "meta.delimiter.period",
+      "settings": {
+        "foreground": "#a492ea",
+        "fontStyle": "italic"
+      }
+    },
+    {
+      "name": "Punctuation Definition String",
+      "scope": "punctuation.definition.string",
+      "settings": {
+        "foreground": "#d9f5dd"
+      }
+    },
+    {
+      "name": "Punctuation Definition String Markdown",
+      "scope": "punctuation.definition.string.begin.markdown",
+      "settings": {
+        "foreground": "#ff5874"
+      }
+    },
+    {
+      "name": "Boolean",
+      "scope": "constant.language.boolean",
+      "settings": {
+        "foreground": "#ff5874"
+      }
+    },
+    {
+      "name": "Object Comma",
+      "scope": "object.comma",
+      "settings": {
+        "foreground": "#ffffff"
+      }
+    },
+    {
+      "name": "Variable Parameter Function",
+      "scope": "variable.parameter.function",
+      "settings": {
+        "foreground": "#7fdbca",
+        "fontStyle": ""
+      }
+    },
+    {
+      "name": "Support Type Property Name & entity name tags",
+      "scope": [
+        "support.type.vendor.property-name",
+        "support.constant.vendor.property-value",
+        "support.type.property-name",
+        "meta.property-list entity.name.tag"
+      ],
+      "settings": {
+        "foreground": "#80CBC4",
+        "fontStyle": ""
+      }
+    },
+    {
+      "name": "Entity Name tag reference in stylesheets",
+      "scope": "meta.property-list entity.name.tag.reference",
+      "settings": {
+        "foreground": "#57eaf1"
+      }
+    },
+    {
+      "name": "Constant Other Color RGB Value Punctuation Definition Constant",
+      "scope": "constant.other.color.rgb-value punctuation.definition.constant",
+      "settings": {
+        "foreground": "#F78C6C"
+      }
+    },
+    {
+      "name": "Constant Other Color",
+      "scope": "constant.other.color",
+      "settings": {
+        "foreground": "#FFEB95"
+      }
+    },
+    {
+      "name": "Keyword Other Unit",
+      "scope": "keyword.other.unit",
+      "settings": {
+        "foreground": "#FFEB95"
+      }
+    },
+    {
+      "name": "Meta Selector",
+      "scope": "meta.selector",
+      "settings": {
+        "foreground": "#a492ea",
+        "fontStyle": "italic"
+      }
+    },
+    {
+      "name": "Entity Other Attribute Name Id",
+      "scope": "entity.other.attribute-name.id",
+      "settings": {
+        "foreground": "#FAD430"
+      }
+    },
+    {
+      "name": "Meta Property Name",
+      "scope": "meta.property-name",
+      "settings": {
+        "foreground": "#80CBC4"
+      }
+    },
+    {
+      "name": "Doctypes",
+      "scope": ["entity.name.tag.doctype", "meta.tag.sgml.doctype"],
+      "settings": {
+        "foreground": "#a492ea",
+        "fontStyle": "italic"
+      }
+    },
+    {
+      "name": "Punctuation Definition Parameters",
+      "scope": "punctuation.definition.parameters",
+      "settings": {
+        "foreground": "#d9f5dd"
+      }
+    },
+    {
+      "name": "Keyword Control Operator",
+      "scope": "keyword.control.operator",
+      "settings": {
+        "foreground": "#7fdbca"
+      }
+    },
+    {
+      "name": "Keyword Operator Logical",
+      "scope": "keyword.operator.logical",
+      "settings": {
+        "foreground": "#a492ea",
+        "fontStyle": ""
+      }
+    },
+    {
+      "name": "Variable Instances",
+      "scope": [
+        "variable.instance",
+        "variable.other.instance",
+        "variable.readwrite.instance",
+        "variable.other.readwrite.instance",
+        "variable.other.property"
+      ],
+      "settings": {
+        "foreground": "#baebe2"
+      }
+    },
+    {
+      "name": "Variable Property Other object property",
+      "scope": ["variable.other.object.property"],
+      "settings": {
+        "foreground": "#faf39f",
+        "fontStyle": "italic"
+      }
+    },
+    {
+      "name": "Variable Property Other object",
+      "scope": ["variable.other.object.js"],
+      "settings": {
+        "fontStyle": ""
+      }
+    },
+    {
+      "name": "Entity Name Function",
+      "scope": ["entity.name.function"],
+      "settings": {
+        "foreground": "#82AAFF",
+        "fontStyle": "italic"
+      }
+    },
+    {
+      "name": "Keyword Operator Comparison, imports, returns and Keyword Operator Ruby",
+      "scope": [
+        "keyword.operator.comparison",
+        "keyword.control.flow.js",
+        "keyword.control.flow.ts",
+        "keyword.control.flow.tsx",
+        "keyword.control.ruby",
+        "keyword.control.module.ruby",
+        "keyword.control.class.ruby",
+        "keyword.control.def.ruby",
+        "keyword.control.loop.js",
+        "keyword.control.loop.ts",
+        "keyword.control.import.js",
+        "keyword.control.import.ts",
+        "keyword.control.import.tsx",
+        "keyword.control.from.js",
+        "keyword.control.from.ts",
+        "keyword.control.from.tsx",
+        "keyword.operator.instanceof.js",
+        "keyword.operator.expression.instanceof.ts",
+        "keyword.operator.expression.instanceof.tsx"
+      ],
+      "settings": {
+        "foreground": "#a492ea",
+        "fontStyle": "italic"
+      }
+    },
+    {
+      "name": "Keyword Control Conditional",
+      "scope": [
+        "keyword.control.conditional.js",
+        "keyword.control.conditional.ts",
+        "keyword.control.switch.js",
+        "keyword.control.switch.ts"
+      ],
+      "settings": {
+        "foreground": "#a492ea",
+        "fontStyle": ""
+      }
+    },
+    {
+      "name": "Support Constant, `new` keyword, Special Method Keyword, `debugger`, other keywords",
+      "scope": [
+        "support.constant",
+        "keyword.other.special-method",
+        "keyword.other.new",
+        "keyword.other.debugger",
+        "keyword.control"
+      ],
+      "settings": {
+        "foreground": "#7fdbca"
+      }
+    },
+    {
+      "name": "Support Function",
+      "scope": "support.function",
+      "settings": {
+        "foreground": "#c5e478"
+      }
+    },
+    {
+      "name": "Invalid Broken",
+      "scope": "invalid.broken",
+      "settings": {
+        "foreground": "#020e14",
+        "background": "#F78C6C"
+      }
+    },
+    {
+      "name": "Invalid Unimplemented",
+      "scope": "invalid.unimplemented",
+      "settings": {
+        "background": "#8BD649",
+        "foreground": "#ffffff"
+      }
+    },
+    {
+      "name": "Invalid Illegal",
+      "scope": "invalid.illegal",
+      "settings": {
+        "foreground": "#ffffff",
+        "background": "#ec5f67"
+      }
+    },
+    {
+      "name": "Language Variable",
+      "scope": "variable.language",
+      "settings": {
+        "foreground": "#7fdbca"
+      }
+    },
+    {
+      "name": "Support Variable Property",
+      "scope": "support.variable.property",
+      "settings": {
+        "foreground": "#7fdbca"
+      }
+    },
+    {
+      "name": "Variable Function",
+      "scope": "variable.function",
+      "settings": {
+        "foreground": "#82AAFF"
+      }
+    },
+    {
+      "name": "Variable Interpolation",
+      "scope": "variable.interpolation",
+      "settings": {
+        "foreground": "#ec5f67"
+      }
+    },
+    {
+      "name": "Meta Function Call",
+      "scope": "meta.function-call",
+      "settings": {
+        "foreground": "#82AAFF"
+      }
+    },
+    {
+      "name": "Punctuation Section Embedded",
+      "scope": "punctuation.section.embedded",
+      "settings": {
+        "foreground": "#d3423e"
+      }
+    },
+    {
+      "name": "Punctuation Tweaks",
+      "scope": [
+        "punctuation.terminator.expression",
+        "punctuation.definition.arguments",
+        "punctuation.definition.array",
+        "punctuation.section.array",
+        "meta.array"
+      ],
+      "settings": {
+        "foreground": "#d6deeb"
+      }
+    },
+    {
+      "name": "More Punctuation Tweaks",
+      "scope": [
+        "punctuation.definition.list.begin",
+        "punctuation.definition.list.end",
+        "punctuation.separator.arguments",
+        "punctuation.definition.list"
+      ],
+      "settings": {
+        "foreground": "#d9f5dd"
+      }
+    },
+    {
+      "name": "Template Strings",
+      "scope": "string.template meta.template.expression",
+      "settings": {
+        "foreground": "#d3423e"
+      }
+    },
+    {
+      "name": "Backtics(``) in Template Strings",
+      "scope": "string.template punctuation.definition.string",
+      "settings": {
+        "foreground": "#d6deeb"
+      }
+    },
+    {
+      "name": "Italics",
+      "scope": "italic",
+      "settings": {
+        "foreground": "#a492ea",
+        "fontStyle": "italic"
+      }
+    },
+    {
+      "name": "Bold",
+      "scope": "bold",
+      "settings": {
+        "foreground": "#c5e478",
+        "fontStyle": "bold"
+      }
+    },
+    {
+      "name": "Quote",
+      "scope": "quote",
+      "settings": {
+        "foreground": "#697098",
+        "fontStyle": "italic"
+      }
+    },
+    {
+      "name": "Raw Code",
+      "scope": "raw",
+      "settings": {
+        "foreground": "#80CBC4"
+      }
+    },
+    {
+      "name": "CoffeScript Variable Assignment",
+      "scope": "variable.assignment.coffee",
+      "settings": {
+        "foreground": "#31e1eb"
+      }
+    },
+    {
+      "name": "CoffeScript Parameter Function",
+      "scope": "variable.parameter.function.coffee",
+      "settings": {
+        "foreground": "#d6deeb"
+      }
+    },
+    {
+      "name": "CoffeeScript Assignments",
+      "scope": "variable.assignment.coffee",
+      "settings": {
+        "foreground": "#7fdbca"
+      }
+    },
+    {
+      "name": "C# Readwrite Variables",
+      "scope": "variable.other.readwrite.cs",
+      "settings": {
+        "foreground": "#d6deeb"
+      }
+    },
+    {
+      "name": "C# Classes & Storage types",
+      "scope": ["entity.name.type.class.cs", "storage.type.cs"],
+      "settings": {
+        "foreground": "#ffcb8b"
+      }
+    },
+    {
+      "name": "C# Namespaces",
+      "scope": "entity.name.type.namespace.cs",
+      "settings": {
+        "foreground": "#B2CCD6"
+      }
+    },
+    {
+      "name": "C# Unquoted String Zone",
+      "scope": "string.unquoted.preprocessor.message.cs",
+      "settings": {
+        "foreground": "#d6deeb"
+      }
+    },
+    {
+      "name": "C# Region",
+      "scope": [
+        "punctuation.separator.hash.cs",
+        "keyword.preprocessor.region.cs",
+        "keyword.preprocessor.endregion.cs"
+      ],
+      "settings": {
+        "foreground": "#ffcb8b",
+        "fontStyle": "bold"
+      }
+    },
+    {
+      "name": "C# Other Variables",
+      "scope": "variable.other.object.cs",
+      "settings": {
+        "foreground": "#B2CCD6"
+      }
+    },
+    {
+      "name": "C# Enum",
+      "scope": "entity.name.type.enum.cs",
+      "settings": {
+        "foreground": "#c5e478"
+      }
+    },
+    {
+      "name": "Dart String",
+      "scope": [
+        "string.interpolated.single.dart",
+        "string.interpolated.double.dart"
+      ],
+      "settings": {
+        "foreground": "#FFCB8B"
+      }
+    },
+    {
+      "name": "Dart Class",
+      "scope": "support.class.dart",
+      "settings": {
+        "foreground": "#FFCB8B"
+      }
+    },
+    {
+      "name": "Tag names in Stylesheets",
+      "scope": [
+        "entity.name.tag.css",
+        "entity.name.tag.less",
+        "entity.name.tag.custom.css",
+        "support.constant.property-value.css"
+      ],
+      "settings": {
+        "foreground": "#ff6363",
+        "fontStyle": ""
+      }
+    },
+    {
+      "name": "Wildcard(*) selector in Stylesheets",
+      "scope": [
+        "entity.name.tag.wildcard.css",
+        "entity.name.tag.wildcard.less",
+        "entity.name.tag.wildcard.scss",
+        "entity.name.tag.wildcard.sass"
+      ],
+      "settings": {
+        "foreground": "#7fdbca"
+      }
+    },
+    {
+      "name": "CSS Keyword Other Unit",
+      "scope": "keyword.other.unit.css",
+      "settings": {
+        "foreground": "#FFEB95"
+      }
+    },
+    {
+      "name": "Attribute Name for CSS",
+      "scope": [
+        "meta.attribute-selector.css entity.other.attribute-name.attribute",
+        "variable.other.readwrite.js"
+      ],
+      "settings": {
+        "foreground": "#F78C6C"
+      }
+    },
+    {
+      "name": "Elixir Classes",
+      "scope": [
+        "source.elixir support.type.elixir",
+        "source.elixir meta.module.elixir entity.name.class.elixir"
+      ],
+      "settings": {
+        "foreground": "#82AAFF"
+      }
+    },
+    {
+      "name": "Elixir Functions",
+      "scope": "source.elixir entity.name.function",
+      "settings": {
+        "foreground": "#c5e478"
+      }
+    },
+    {
+      "name": "Elixir Constants",
+      "scope": [
+        "source.elixir constant.other.symbol.elixir",
+        "source.elixir constant.other.keywords.elixir"
+      ],
+      "settings": {
+        "foreground": "#82AAFF"
+      }
+    },
+    {
+      "name": "Elixir String Punctuations",
+      "scope": "source.elixir punctuation.definition.string",
+      "settings": {
+        "foreground": "#c5e478"
+      }
+    },
+    {
+      "name": "Elixir",
+      "scope": [
+        "source.elixir variable.other.readwrite.module.elixir",
+        "source.elixir variable.other.readwrite.module.elixir punctuation.definition.variable.elixir"
+      ],
+      "settings": {
+        "foreground": "#c5e478"
+      }
+    },
+    {
+      "name": "Elixir Binary Punctuations",
+      "scope": "source.elixir .punctuation.binary.elixir",
+      "settings": {
+        "foreground": "#a492ea",
+        "fontStyle": "italic"
+      }
+    },
+    {
+      "name": "Closure Constant Keyword",
+      "scope": "constant.keyword.clojure",
+      "settings": {
+        "foreground": "#7fdbca"
+      }
+    },
+    {
+      "name": "Go Function Calls",
+      "scope": "source.go meta.function-call.go",
+      "settings": {
+        "foreground": "#DDDDDD"
+      }
+    },
+    {
+      "name": "Go Keywords",
+      "scope": [
+        "source.go keyword.package.go",
+        "source.go keyword.import.go",
+        "source.go keyword.function.go",
+        "source.go keyword.type.go",
+        "source.go keyword.struct.go",
+        "source.go keyword.interface.go",
+        "source.go keyword.const.go",
+        "source.go keyword.var.go",
+        "source.go keyword.map.go",
+        "source.go keyword.channel.go",
+        "source.go keyword.control.go"
+      ],
+      "settings": {
+        "foreground": "#a492ea",
+        "fontStyle": "italic"
+      }
+    },
+    {
+      "name": "Go Constants e.g. nil, string format (%s, %d, etc.)",
+      "scope": [
+        "source.go constant.language.go",
+        "source.go constant.other.placeholder.go"
+      ],
+      "settings": {
+        "foreground": "#ff5874"
+      }
+    },
+    {
+      "name": "C++ Functions",
+      "scope": [
+        "entity.name.function.preprocessor.cpp",
+        "entity.scope.name.cpp"
+      ],
+      "settings": {
+        "foreground": "#7fdbcaff"
+      }
+    },
+    {
+      "name": "C++ Meta Namespace",
+      "scope": ["meta.namespace-block.cpp"],
+      "settings": {
+        "foreground": "#e0dec6"
+      }
+    },
+    {
+      "name": "C++ Language Primitive Storage",
+      "scope": ["storage.type.language.primitive.cpp"],
+      "settings": {
+        "foreground": "#ff5874"
+      }
+    },
+    {
+      "name": "C++ Preprocessor Macro",
+      "scope": ["meta.preprocessor.macro.cpp"],
+      "settings": {
+        "foreground": "#d6deeb"
+      }
+    },
+    {
+      "name": "C++ Variable Parameter",
+      "scope": ["variable.parameter"],
+      "settings": {
+        "foreground": "#ffcb8b"
+      }
+    },
+    {
+      "name": "Powershell Variables",
+      "scope": ["variable.other.readwrite.powershell"],
+      "settings": {
+        "foreground": "#82AAFF"
+      }
+    },
+    {
+      "name": "Powershell Function",
+      "scope": ["support.function.powershell"],
+      "settings": {
+        "foreground": "#7fdbcaff"
+      }
+    },
+    {
+      "name": "ID Attribute Name in HTML",
+      "scope": "entity.other.attribute-name.id.html",
+      "settings": {
+        "foreground": "#c5e478"
+      }
+    },
+    {
+      "name": "HTML Punctuation Definition Tag",
+      "scope": "punctuation.definition.tag.html",
+      "settings": {
+        "foreground": "#6ae9f0"
+      }
+    },
+    {
+      "name": "HTML Doctype",
+      "scope": "meta.tag.sgml.doctype.html",
+      "settings": {
+        "foreground": "#a492ea",
+        "fontStyle": "italic"
+      }
+    },
+    {
+      "name": "JavaScript Classes",
+      "scope": "meta.class entity.name.type.class.js",
+      "settings": {
+        "foreground": "#ffcb8b"
+      }
+    },
+    {
+      "name": "JavaScript Method Declaration e.g. `constructor`",
+      "scope": "meta.method.declaration storage.type.js",
+      "settings": {
+        "foreground": "#82AAFF"
+      }
+    },
+    {
+      "name": "JavaScript Terminator",
+      "scope": "terminator.js",
+      "settings": {
+        "foreground": "#d6deeb"
+      }
+    },
+    {
+      "name": "JavaScript Meta Punctuation Definition",
+      "scope": "meta.js punctuation.definition.js",
+      "settings": {
+        "foreground": "#d6deeb"
+      }
+    },
+    {
+      "name": "Entity Names in Code Documentations",
+      "scope": [
+        "entity.name.type.instance.jsdoc",
+        "entity.name.type.instance.phpdoc"
+      ],
+      "settings": {
+        "foreground": "#5f7e97"
+      }
+    },
+    {
+      "name": "Other Variables in Code Documentations",
+      "scope": ["variable.other.jsdoc", "variable.other.phpdoc"],
+      "settings": {
+        "foreground": "#78ccf0"
+      }
+    },
+    {
+      "name": "JavaScript module imports and exports",
+      "scope": [
+        "variable.other.meta.import.js",
+        "meta.import.js variable.other",
+        "variable.other.meta.export.js",
+        "meta.export.js variable.other"
+      ],
+      "settings": {
+        "foreground": "#d6deeb"
+      }
+    },
+    {
+      "name": "JavaScript Variable Parameter Function",
+      "scope": "variable.parameter.function.js",
+      "settings": {
+        "foreground": "#7986E7"
+      }
+    },
+    {
+      "name": "JavaScript[React] Variable Other Object",
+      "scope": [
+        "variable.other.object.js",
+        "variable.other.object.jsx",
+        "variable.object.property.js",
+        "variable.object.property.jsx"
+      ],
+      "settings": {
+        "foreground": "#d6deeb"
+      }
+    },
+    {
+      "name": "JavaScript Variables",
+      "scope": ["variable.js", "variable.other.js"],
+      "settings": {
+        "foreground": "#d6deeb"
+      }
+    },
+    {
+      "name": "JavaScript Entity Name Type",
+      "scope": ["entity.name.type.js", "entity.name.type.module.js"],
+      "settings": {
+        "foreground": "#ffcb8b",
+        "fontStyle": ""
+      }
+    },
+    {
+      "name": "JavaScript Support Classes",
+      "scope": "support.class.js",
+      "settings": {
+        "foreground": "#d6deeb"
+      }
+    },
+    {
+      "name": "JSON Property Names",
+      "scope": "support.type.property-name.json",
+      "settings": {
+        "foreground": "#7fdbca"
+      }
+    },
+    {
+      "name": "JSON Support Constants",
+      "scope": "support.constant.json",
+      "settings": {
+        "foreground": "#c5e478"
+      }
+    },
+    {
+      "name": "JSON Property values (string)",
+      "scope": "meta.structure.dictionary.value.json string.quoted.double",
+      "settings": {
+        "foreground": "#c789d6"
+      }
+    },
+    {
+      "name": "Strings in JSON values",
+      "scope": "string.quoted.double.json punctuation.definition.string.json",
+      "settings": {
+        "foreground": "#80CBC4"
+      }
+    },
+    {
+      "name": "Specific JSON Property values like null",
+      "scope": "meta.structure.dictionary.json meta.structure.dictionary.value constant.language",
+      "settings": {
+        "foreground": "#ff5874"
+      }
+    },
+    {
+      "name": "JavaScript Other Variable",
+      "scope": "variable.other.object.js",
+      "settings": {
+        "foreground": "#7fdbca",
+        "fontStyle": "italic"
+      }
+    },
+    {
+      "name": "Ruby Variables",
+      "scope": ["variable.other.ruby"],
+      "settings": {
+        "foreground": "#d6deeb"
+      }
+    },
+    {
+      "name": "Ruby Class",
+      "scope": ["entity.name.type.class.ruby"],
+      "settings": {
+        "foreground": "#ecc48d"
+      }
+    },
+    {
+      "name": "Ruby Hashkeys",
+      "scope": "constant.language.symbol.hashkey.ruby",
+      "settings": {
+        "foreground": "#7fdbca"
+      }
+    },
+    {
+      "name": "Ruby Symbols",
+      "scope": "constant.language.symbol.ruby",
+      "settings": {
+        "foreground": "#7fdbca"
+      }
+    },
+    {
+      "name": "LESS Tag names",
+      "scope": "entity.name.tag.less",
+      "settings": {
+        "foreground": "#7fdbca"
+      }
+    },
+    {
+      "name": "LESS Keyword Other Unit",
+      "scope": "keyword.other.unit.css",
+      "settings": {
+        "foreground": "#FFEB95"
+      }
+    },
+    {
+      "name": "Attribute Name for LESS",
+      "scope": "meta.attribute-selector.less entity.other.attribute-name.attribute",
+      "settings": {
+        "foreground": "#F78C6C"
+      }
+    },
+    {
+      "name": "Markdown Headings",
+      "scope": [
+        "markup.heading.markdown",
+        "markup.heading.setext.1.markdown",
+        "markup.heading.setext.2.markdown"
+      ],
+      "settings": {
+        "foreground": "#82b1ff"
+      }
+    },
+    {
+      "name": "Markdown Italics",
+      "scope": "markup.italic.markdown",
+      "settings": {
+        "foreground": "#a492ea",
+        "fontStyle": "italic"
+      }
+    },
+    {
+      "name": "Markdown Bold",
+      "scope": "markup.bold.markdown",
+      "settings": {
+        "foreground": "#c5e478",
+        "fontStyle": "bold"
+      }
+    },
+    {
+      "name": "Markdown Quote + others",
+      "scope": "markup.quote.markdown",
+      "settings": {
+        "foreground": "#697098",
+        "fontStyle": "italic"
+      }
+    },
+    {
+      "name": "Markdown Raw Code + others",
+      "scope": "markup.inline.raw.markdown",
+      "settings": {
+        "foreground": "#80CBC4"
+      }
+    },
+    {
+      "name": "Markdown Links",
+      "scope": [
+        "markup.underline.link.markdown",
+        "markup.underline.link.image.markdown"
+      ],
+      "settings": {
+        "foreground": "#ff869a"
+      }
+    },
+    {
+      "name": "Markdown Link Title and Description",
+      "scope": [
+        "string.other.link.title.markdown",
+        "string.other.link.description.markdown"
+      ],
+      "settings": {
+        "foreground": "#d6deeb"
+      }
+    },
+    {
+      "name": "Markdown Punctuation",
+      "scope": [
+        "punctuation.definition.string.markdown",
+        "punctuation.definition.string.begin.markdown",
+        "punctuation.definition.string.end.markdown",
+        "meta.link.inline.markdown punctuation.definition.string"
+      ],
+      "settings": {
+        "foreground": "#82b1ff"
+      }
+    },
+    {
+      "name": "Markdown MetaData Punctuation",
+      "scope": ["punctuation.definition.metadata.markdown"],
+      "settings": {
+        "foreground": "#7fdbca"
+      }
+    },
+    {
+      "name": "Markdown List Punctuation",
+      "scope": ["beginning.punctuation.definition.list.markdown"],
+      "settings": {
+        "foreground": "#82b1ff"
+      }
+    },
+    {
+      "name": "Markdown Inline Raw String",
+      "scope": "markup.inline.raw.string.markdown",
+      "settings": {
+        "foreground": "#c5e478"
+      }
+    },
+    {
+      "name": "PHP Variables",
+      "scope": ["variable.other.php", "variable.other.property.php"],
+      "settings": {
+        "foreground": "#bec5d4"
+      }
+    },
+    {
+      "name": "Support Classes in PHP",
+      "scope": "support.class.php",
+      "settings": {
+        "foreground": "#ffcb8b"
+      }
+    },
+    {
+      "name": "Punctuations in PHP function calls",
+      "scope": "meta.function-call.php punctuation",
+      "settings": {
+        "foreground": "#d6deeb"
+      }
+    },
+    {
+      "name": "PHP Global Variables",
+      "scope": "variable.other.global.php",
+      "settings": {
+        "foreground": "#c5e478"
+      }
+    },
+    {
+      "name": "Declaration Punctuation in PHP Global Variables",
+      "scope": "variable.other.global.php punctuation.definition.variable",
+      "settings": {
+        "foreground": "#c5e478"
+      }
+    },
+    {
+      "name": "Language Constants in Python",
+      "scope": "constant.language.python",
+      "settings": {
+        "foreground": "#ff5874"
+      }
+    },
+    {
+      "name": "Python Function Parameter and Arguments",
+      "scope": [
+        "variable.parameter.function.python",
+        "meta.function-call.arguments.python"
+      ],
+      "settings": {
+        "foreground": "#82AAFF"
+      }
+    },
+    {
+      "name": "Python Function Call",
+      "scope": [
+        "meta.function-call.python",
+        "meta.function-call.generic.python"
+      ],
+      "settings": {
+        "foreground": "#B2CCD6"
+      }
+    },
+    {
+      "name": "Punctuations in Python",
+      "scope": "punctuation.python",
+      "settings": {
+        "foreground": "#d6deeb"
+      }
+    },
+    {
+      "name": "Decorator Functions in Python",
+      "scope": "entity.name.function.decorator.python",
+      "settings": {
+        "foreground": "#c5e478"
+      }
+    },
+    {
+      "name": "Python Language Variable",
+      "scope": "source.python variable.language.special",
+      "settings": {
+        "foreground": "#8EACE3"
+      }
+    },
+    {
+      "name": "Python import control keyword",
+      "scope": "keyword.control",
+      "settings": {
+        "foreground": "#a492ea",
+        "fontStyle": "italic"
+      }
+    },
+    {
+      "name": "SCSS Variable",
+      "scope": [
+        "variable.scss",
+        "variable.sass",
+        "variable.parameter.url.scss",
+        "variable.parameter.url.sass"
+      ],
+      "settings": {
+        "foreground": "#c5e478"
+      }
+    },
+    {
+      "name": "Variables in SASS At-Rules",
+      "scope": [
+        "source.css.scss meta.at-rule variable",
+        "source.css.sass meta.at-rule variable"
+      ],
+      "settings": {
+        "foreground": "#82AAFF"
+      }
+    },
+    {
+      "name": "Variables in SASS At-Rules",
+      "scope": [
+        "source.css.scss meta.at-rule variable",
+        "source.css.sass meta.at-rule variable"
+      ],
+      "settings": {
+        "foreground": "#bec5d4"
+      }
+    },
+    {
+      "name": "Attribute Name for SASS",
+      "scope": [
+        "meta.attribute-selector.scss entity.other.attribute-name.attribute",
+        "meta.attribute-selector.sass entity.other.attribute-name.attribute"
+      ],
+      "settings": {
+        "foreground": "#F78C6C"
+      }
+    },
+    {
+      "name": "Tag names in SASS",
+      "scope": ["entity.name.tag.scss", "entity.name.tag.sass"],
+      "settings": {
+        "foreground": "#7fdbca"
+      }
+    },
+    {
+      "name": "SASS Keyword Other Unit",
+      "scope": ["keyword.other.unit.scss", "keyword.other.unit.sass"],
+      "settings": {
+        "foreground": "#FFEB95"
+      }
+    },
+    {
+      "name": "TypeScript[React] Variables and Object Properties",
+      "scope": [
+        "variable.other.readwrite.alias.ts",
+        "variable.other.readwrite.alias.tsx",
+        "variable.other.readwrite.ts",
+        "variable.other.readwrite.tsx",
+        "variable.other.object.ts",
+        "variable.other.object.tsx",
+        "variable.object.property.ts",
+        "variable.object.property.tsx",
+        "variable.other.ts",
+        "variable.other.tsx",
+        "variable.tsx",
+        "variable.ts"
+      ],
+      "settings": {
+        "foreground": "#d6deeb"
+      }
+    },
+    {
+      "name": "TypeScript[React] Entity Name Types",
+      "scope": ["entity.name.type.ts", "entity.name.type.tsx"],
+      "settings": {
+        "foreground": "#ffcb8b"
+      }
+    },
+    {
+      "name": "TypeScript[React] Node Classes",
+      "scope": ["support.class.node.ts", "support.class.node.tsx"],
+      "settings": {
+        "foreground": "#82AAFF"
+      }
+    },
+    {
+      "name": "TypeScript[React] Entity Name Types as Parameters",
+      "scope": [
+        "meta.type.parameters.ts entity.name.type",
+        "meta.type.parameters.tsx entity.name.type"
+      ],
+      "settings": {
+        "foreground": "#5f7e97"
+      }
+    },
+    {
+      "name": "TypeScript[React] Import/Export Punctuations",
+      "scope": [
+        "meta.import.ts punctuation.definition.block",
+        "meta.import.tsx punctuation.definition.block",
+        "meta.export.ts punctuation.definition.block",
+        "meta.export.tsx punctuation.definition.block"
+      ],
+      "settings": {
+        "foreground": "#d6deeb"
+      }
+    },
+    {
+      "name": "TypeScript[React] Punctuation Decorators",
+      "scope": [
+        "meta.decorator punctuation.decorator.ts",
+        "meta.decorator punctuation.decorator.tsx"
+      ],
+      "settings": {
+        "foreground": "#82AAFF"
+      }
+    },
+    {
+      "name": "TypeScript[React] Punctuation Decorators",
+      "scope": "meta.tag.js meta.jsx.children.tsx",
+      "settings": {
+        "foreground": "#82AAFF"
+      }
+    },
+    {
+      "name": "YAML Entity Name Tags",
+      "scope": "entity.name.tag.yaml",
+      "settings": {
+        "foreground": "#7fdbca"
+      }
+    },
+    {
+      "name": "JavaScript Variable Other ReadWrite",
+      "scope": ["variable.other.readwrite.js", "variable.parameter"],
+      "settings": {
+        "foreground": "#d7dbe0"
+      }
+    },
+    {
+      "name": "Support Class Component",
+      "scope": ["support.class.component.js", "support.class.component.tsx"],
+      "settings": {
+        "foreground": "#f78c6c",
+        "fontStyle": ""
+      }
+    },
+    {
+      "name": "Text nested in React tags",
+      "scope": [
+        "meta.jsx.children",
+        "meta.jsx.children.js",
+        "meta.jsx.children.tsx"
+      ],
+      "settings": {
+        "foreground": "#d6deeb"
+      }
+    },
+    {
+      "name": "TypeScript Classes",
+      "scope": "meta.class entity.name.type.class.tsx",
+      "settings": {
+        "foreground": "#ffcb8b"
+      }
+    },
+    {
+      "name": "TypeScript Entity Name Type",
+      "scope": ["entity.name.type.tsx", "entity.name.type.module.tsx"],
+      "settings": {
+        "foreground": "#ffcb8b"
+      }
+    },
+    {
+      "name": "TypeScript Class Variable Keyword",
+      "scope": [
+        "meta.class.ts meta.var.expr.ts storage.type.ts",
+        "meta.class.tsx meta.var.expr.tsx storage.type.tsx"
+      ],
+      "settings": {
+        "foreground": "#A492EA"
+      }
+    },
+    {
+      "name": "TypeScript Method Declaration e.g. `constructor`",
+      "scope": [
+        "meta.method.declaration storage.type.ts",
+        "meta.method.declaration storage.type.tsx"
+      ],
+      "settings": {
+        "foreground": "#82AAFF"
+      }
+    },
+    {
+      "name": "normalize font style of certain components",
+      "scope": [
+        "meta.property-list.css meta.property-value.css variable.other.less",
+        "meta.property-list.scss variable.scss",
+        "meta.property-list.sass variable.sass",
+        "meta.brace",
+        "keyword.operator.operator",
+        "keyword.operator.or.regexp",
+        "keyword.operator.expression.in",
+        "keyword.operator.relational",
+        "keyword.operator.assignment",
+        "keyword.operator.comparison",
+        "keyword.operator.type",
+        "keyword.operator",
+        "keyword",
+        "punctuation.definintion.string",
+        "punctuation",
+        "variable.other.readwrite.js",
+        "storage.type",
+        "source.css",
+        "string.quoted"
+      ],
+      "settings": {
+        "fontStyle": ""
+      }
+    }
+  ]
+}

tsconfig.json

@@ -1,23 +1,35 @@
 {
   "compilerOptions": {
-    "target": "es5",
-    "lib": ["dom", "dom.iterable", "esnext"],
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
     "allowJs": true,
     "skipLibCheck": true,
-    "strict": true,
+    "strict": false,
     "forceConsistentCasingInFileNames": true,
     "noEmit": true,
+    "incremental": true,
     "esModuleInterop": true,
     "module": "esnext",
     "moduleResolution": "node",
     "resolveJsonModule": true,
     "isolatedModules": true,
     "jsx": "preserve",
-    "incremental": true,
-    "paths": {
-      "@/*": ["./src/*"]
-    }
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ]
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
-  "exclude": ["node_modules"]
+  "include": [
+    "next-env.d.ts",
+    ".next/types/**/*.ts",
+    "**/*.ts",
+    "**/*.tsx"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
 }