<!--

░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
░░░░░░░░░░░░░░░░░░░░ https://about.me/jamesfurey ░░░░░░░░░░░░░░░░░░░░░
░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
░░░░░░░░░░░░░░░░░░░░░░░░░░░░░▄████████▄▒░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
░░░░░░░░░░░░░░░░░░░░░░░░░░▄██████▀▀▀▀▀███▄▒░░░░░░░░░░░░░░░░░░░░░░░░░░░
░░░░░░░░░░░░░░░░░░░░░░░░▄██▀             ▀██▒░░░░░░░░░░░░░░░░░░░░░░░░░
░░░░░░░░░░░░░░░░░░░░░░▄█▀                   ▀█▄▄░░░░░░░░░░░░░░░░░░░░░░
░░░░░░░░░░░░░░░░░░░░▄█▀ ▒▀                     ██░░░░░░░░░░░░░░░░░░░░░
░░░░░░░░░░░░░░░░░░░▄█▒▒▒▒░                      ██░░░░░░░░░░░░░░░░░░░░
░░░░░░░░░░░░░░░░░░▐█▌▒▒▄██████▒     ▐▒████▓▄     █▌░░░░░░░░░░░░░░░░░░░
░░░░░░░░░░░░░░░░░░██▒▄███▀█████▒                 ▓█▒░░░░░░░░░░░░░░░░░░
░░░░░░░░░░░░░░░░░▐██▒██▒▄▓▀▀█████    ▒██▀▀▀██    ▐█▒░░░░░░░░░░░░░░░░░░
░░░░░░░░░░░░░░░░░▐██▒▀▒█▌▄█▓▄█▓██   ▐▐█ ▓▄▓▄▀▌    █▌░░░░░░░░░░░░░░░░░░
░░░░░░░░░░░░░░░░░▐██▐░░▓█▓▓▀▀▓██▌      ▀▀▀▄       █▌░░░░░░░░░░░░░░░░░░
░░░░░░░░░░░░░░░░░░██▒▒▒ ▀▀▀ ▐▐██░                ▐█░░░░░░░░░░░░░░░░░░░
░░░░░░░░░░░░░░░░░░▐▌▒▄▒    ▄███▒        ▄        ▐  ░░░░░░░░░░░░░░░░░░
░░░░░░░░░░░░░░░░░░▐█▒▒▒░  ▐▀████▄  ▄▄▄   ▀▒         ░░░░░░░░░░░░░░░░░░
░░░░░░░░░░░░░░░░░░▐█▒▒▒  ▐▒███████▄░      ▀▓        ▐░░░░░░░░░░░░░░░░░
░░░░░░░░░░░░░░░░░░▐█▒░▒   ▀▒▄██▄▄▄▄▄▄▄▄▄▄▄ ▐▌    ▐▐▒░░░░░░░░░░░░░░░░░░
░░░░░░░░░░░░░░░░░░░▐█▒▒░   ▀██▀ ▀      ██▀        ▒░░░░░░░░░░░░░░░░░░░
░░░░░░░░░░░░░░░░░░░░█▌▒▒    ░███▓▄▄▄▓█▀▀         ▐░░░░░░░░░░░░░░░░░░░░
░░░░░░░░░░░░░░░░░░░░░██▒▒▄▓▒▒▒░░ ▀▀             ▒▐░░░░░░░░░░░░░░░░░░░░
░░░░░░░░░░░░░░░░░░░░░░███▄▄▒▒▒▒▒▒▒▒           ▄ ▄░░░░░░░░░░░░░░░░░░░░░
░░░░░░░░░░░░░░░░░░░░░░▓████▒▓██▒▒           ▄  ▒░░░░░░░░░░░░░░░░░░░░░░
░░░░░░░░░░░░░░░░░░░░░░▓▒░████▓▀▒▀ ░      ▓█▀   ▀▒░▒▒▄▄▒░░░░░░░░░░░░░░░
░░░░░░░░░░░░░░░░░▒▒▓▒▀█▒▒▒▒████▄▄▒▒▒▒▄▓█▀      ▓▓▓▓▓▓▓▓▓▒░░░░░░░░░░░░░
░░░░░░░░░░░░░░▒▓▓▓▓▓▓▓█▒▒▒░▀▀▀▀▀▀▀▀▀           █▒▓▓▓▓▓▓▓▓▓▓▒▄░░░░░░░░░
░░░░░░░░░░░▓▓▓▓▓▓▓▓▓▓▓█▒▒▒▒▒▒▒▒▒▒▒▒           ▐█▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▄▒░░░
░░░░░▄▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▒█▒▒▒▒▒▒▒▒▒▒▒▒          █▒▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▒░
░░▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓█▒▒▒▒▒▒▒▒▒▒▒▒      ▄▄██▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▒
▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▒▓▓▒▓▓▓▓▓▓▓▒▒  ▀▓███▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓

-->

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>VS Code files.exclude [!except] Generator</title>
  <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.11/clipboard.min.js"></script>
  <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='80' font-size='80'>🧙‍♂️</text></svg>" type="image/svg+xml">
</head>
<body class="min-h-screen bg-gray-100">
  <div id="app" class="container px-4 py-8 mx-auto">
    <div class="max-w-4xl mx-auto">
      <h1 class="mb-6 text-3xl font-bold text-gray-800">VS Code <span class="px-2 py-1 font-mono text-2xl text-green-400 bg-gray-800 rounded">files.exclude<span class="ml-2 text-green-700">[!except]</span></span> Generator</h1>
      <p class="mb-6 text-gray-500">Generate VS Code config to exclude a directory (e.g. node_modules) with the exception of specified subpaths.</p>

      <div class="flex flex-col gap-6 md:flex-row">
        <div class="w-full md:w-1/2">
          <div class="p-5 bg-white rounded-lg shadow-md">
            <h2 class="mb-4 text-xl font-semibold text-gray-700">Configuration</h2>
            <label for="baseExclude" class="block mb-2 text-gray-600">Base directory to exclude:</label>
            <input
              id="baseExclude"
              v-model="baseExclude"
              class="w-full px-3 py-2 mb-4 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500"
              placeholder="e.g. node_modules"
            >

            <label for="paths" class="block mb-2 text-gray-600">Subpaths to keep visible (one per line):</label>
            <textarea
              id="paths"
              v-model="inputPaths"
              class="w-full h-64 px-3 py-2 font-mono border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500"
              placeholder="node_modules/package-to-keep
node_modules/another-package"
            ></textarea>
          </div>
        </div>

        <div class="w-full md:w-1/2">
          <div class="p-5 bg-white rounded-lg shadow-md">
            <div class="flex items-center justify-between mb-4">
              <h2 class="text-xl font-semibold text-gray-700">Generated JSON</h2>
              <button
                id="copyBtn"
                data-clipboard-target="#output"
                class="px-3 py-1 text-sm text-white transition-colors bg-blue-500 rounded hover:bg-blue-600"
              >
                Copy
              </button>
            </div>
            <pre id="output" class="max-h-screen p-3.5 overflow-auto font-mono text-xs text-green-400 whitespace-pre-wrap bg-gray-800 rounded-lg" style="max-height: 300px;"></pre>

            <div class="mt-4" id="errorContainer" style="display: none;">
              <div class="p-4 text-sm text-red-700 bg-red-100 border-l-4 border-red-500 rounded">
                <p id="errorMessage"></p>
              </div>
            </div>

            <div class="mt-4">
              <div class="p-4 text-blue-700 bg-blue-100 border-l-4 border-blue-500 rounded">
                <p class="font-medium">How to use:</p>
                <ol class="list-decimal list-outside mt-2 ml-2 text-xs pl-1.5">
                  <li>Copy the generated JSON</li>
                  <li>In VS Code, open settings.json<br><kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>P</kbd> → <code>Open Settings (JSON)</code></li>
                  <li>Paste the code into settings.json</li>
                  <li>Save settings.json</li>
                </ol>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="flex flex-col items-center justify-center gap-5 mt-7">
        <div class="text-gray-500">
          Made out of frustration by <a href="https://about.me/jamesfurey" target="_blank" class="text-blue-500 hover:underline">James Furey</a> (see: <a href="https://github.com/microsoft/vscode/issues/869" target="_blank" class="text-blue-500 hover:underline">vscode/issues/869</a>)
        </div>
        <div>
          <a href="https://www.buymeacoffee.com/furey" target="_blank">
            <img src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png" alt="Buy Me A Coffee" style="height: 45px !important;width: 163px !important;">
          </a>
        </div>
      </div>

    </div>
  </div>

  <script>
    const outputPre = document.getElementById('output')
    const inputPathsTextarea = document.getElementById('paths')
    const errorMessage = document.getElementById('errorMessage')
    const baseExcludeInput = document.getElementById('baseExclude')
    const errorContainer = document.getElementById('errorContainer')

    let inputPaths = ''
    let baseExclude = 'node_modules'

    const init = () => {
      new ClipboardJS('#copyBtn')
      baseExcludeInput.value = baseExclude
      addEventListeners()
      generatePatterns()
    }

    const generatePatterns = () => {
      hideError()

      if (!baseExclude.trim()) return outputPre.textContent = ''

      const paths = inputPaths
        .split('\n')
        .map(p => p.trim())
        .filter(p => p)

      if (paths.length === 0) {
        const placeholderObj = { 'files.exclude': { [`**/${baseExclude}/**`]: true } }
        outputPre.textContent = JSON.stringify(placeholderObj, null, 2)
        return
      }

      try {
        const result = paths.reduce((acc, path) => {
          if (!path.startsWith(baseExclude)) {
            showError(`Path "${path}" must start with the base exclude path "${baseExclude}/".`)
            return acc
          }

          const pathToKeep = path.substring(baseExclude.length + 1)
          const patterns = generateNegativeGlobPatterns(pathToKeep)

          patterns.forEach(pattern => {
            acc[`**/${baseExclude}/${pattern}/**`] = true
          })

          return acc
        }, {})

        const jsonObj = { 'files.exclude': result }
        outputPre.textContent = JSON.stringify(jsonObj, null, 2)
      } catch (error) {
        showError(`Error: ${error.message}`)
        console.error(error)
      }
    }

    const generateNegativeGlobPatterns = pathToKeep => {
      if (!pathToKeep) return []

      const segments = pathToKeep.split('/')

      return segments.flatMap((segment, i) => {
        const prefix = segments.slice(0, i).join('/')
        const formattedPrefix = prefix ? `${prefix}/` : ''

        return Array.from(segment).flatMap((char, j) => {
          if (['.', '+', '(', ')', '[', ']', '{', '}', '^', '$'].includes(char)) return []

          const prevChars = segment.substring(0, j)
          const nextChar = segment.substring(j, j+1)

          return [`${formattedPrefix}${prevChars}[!${nextChar}]*`]
        })
      })
    }

    const addEventListeners = () => {
      const debouncedGeneratePatterns = _.debounce(generatePatterns, 300)

      baseExcludeInput.addEventListener('input', e => {
        baseExclude = e.target.value
        debouncedGeneratePatterns()
      })

      inputPathsTextarea.addEventListener('input', e => {
        inputPaths = e.target.value
        debouncedGeneratePatterns()
      })
    }

    const showError = message => {
      errorMessage.textContent = message
      errorContainer.style.display = 'block'
    }

    const hideError = () => {
      errorContainer.style.display = 'none'
    }

    init();
  </script>

  <script>

    if (document.location.hostname === 'furey.com.au') {

      const gTagId = 'G-3D3SD5CHFX'

      const script = document.createElement('script')
      script.async = true
      script.src = `https://www.googletagmanager.com/gtag/js?id=${gTagId}`
      document.body.appendChild(script)

      window.dataLayer = window.dataLayer || []
      function gtag() { dataLayer.push(arguments) }
      gtag('js', new Date())
      gtag('config', gTagId)

    }

  </script>
</body>
</html>