docs: Update for available languageIds

package.json

@@ -9,7 +9,7 @@
     "cspell": "bin.mjs",
     "cspell-tools": "cspell-tools.mjs"
   },
-  "packageManager": "pnpm@10.27.0+sha512.72d699da16b1179c14ba9e64dc71c9a40988cbdc65c264cb0e489db7de917f20dcf4d64d8723625f2969ba52d4b7e2a1170682d9ac2a5dcaeaab732b7e16f04a",
+  "packageManager": "pnpm@10.28.0",
   "private": true,
   "scripts": {
     "bp": "pnpm build:prod",

packages/cspell-filetypes/src/filetypes.ts

@@ -22,6 +22,8 @@ export const generatedFiles: Set<string> = new Set([
 
 export const languageIds: FileTypeId[] = definitions.map(({ id }) => id);
 
+export const programmingLangDefinitions: FileTypeDefinitions = definitions;
+
 const mapExtensionToSetOfLanguageIds: ExtensionToFileTypeIdMapSet = buildLanguageExtensionMapSet(definitions);
 const mapExtensionToLanguageIds: ExtensionToFileTypeIdMap =
     buildExtensionToLanguageIdMap(mapExtensionToSetOfLanguageIds);

packages/cspell-filetypes/src/index.ts

@@ -7,5 +7,6 @@ export {
     isFileTypeGenerated,
     isGeneratedExt,
     isGeneratedFile,
+    programmingLangDefinitions,
 } from './filetypes.js';
 export type { FileTypeId } from './types.js';

website/docs/dictionaries/available-languages.mdx

@@ -0,0 +1,23 @@
+---
+title: 'Available Languages'
+categories: docs
+# parent: Docs
+sidebar_position: 4
+sidebar_label: Available Languages
+---
+
+import { LanguagesTable } from '@site/src/components/LanguagesTable';
+
+# Available Languages & Triggers
+
+This page lists all supported programming languages and file types with their corresponding file extensions that triggers
+the given language check in CSpell.
+
+## Overview
+
+CSpell automatically detects the programming language based on file extensions and applies the appropriate spell checking rules. The table below shows all supported languages and their associated file patterns.
+
+## Supported Languages
+
+<LanguagesTable />
+

website/package.json

@@ -19,6 +19,7 @@
     "typecheck": "tsc"
   },
   "dependencies": {
+    "@cspell/filetypes": "workspace:*",
     "@docusaurus/core": "^3.9.2",
     "@docusaurus/plugin-client-redirects": "^3.9.2",
     "@docusaurus/preset-classic": "^3.9.2",

website/src/components/LanguagesTable.tsx

@@ -0,0 +1,65 @@
+import React, { useState, useMemo } from 'react';
+import { programmingLangDefinitions } from '@cspell/filetypes';
+import './languages-table.scss';
+
+export const LanguagesTable: React.FC = () => {
+  const [searchTerm, setSearchTerm] = useState('');
+
+  const filteredLanguages = useMemo(() => {
+    if (!searchTerm) return programmingLangDefinitions;
+
+    const term = searchTerm.toLowerCase();
+    return programmingLangDefinitions.filter((lang) => {
+      const extensions = [...lang.extensions, ...(lang.filenames || [])].join(' ').toLowerCase();
+      return (
+        lang.id.toLowerCase().includes(term) ||
+        (lang.description && lang.description.toLowerCase().includes(term)) ||
+        extensions.includes(term)
+      );
+    });
+  }, [searchTerm]);
+
+  return (
+    <div className="languages-table-container">
+      <div className="search-box">
+        <input
+          type="text"
+          placeholder="Search languages or extensions..."
+          value={searchTerm}
+          onChange={(e) => setSearchTerm(e.target.value)}
+          className="search-input"
+        />
+      </div>
+
+      <div className="table-wrapper">
+        <div className="table-header">
+          <div className="table-cell">Language ID</div>
+          <div className="table-cell">Description</div>
+          <div className="table-cell">File Extensions & Filenames</div>
+        </div>
+
+        <div className="table-body">
+          {filteredLanguages.map((lang, index) => (
+            <div key={lang.id} className={`table-row ${index % 2 === 0 ? 'striped' : ''}`}>
+              <div className="table-cell">
+                <code>{lang.id}</code>
+              </div>
+              <div className="table-cell">{lang.description || '-'}</div>
+              <div className="table-cell">
+                <code className="extensions">
+                  {[...lang.extensions, ...(lang.filenames || [])].join(', ') || 'No specific extensions'}
+                </code>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+
+      {filteredLanguages.length === 0 && <p className="no-results">No languages found matching "{searchTerm}"</p>}
+
+      <p className="total-count">
+        Total: {filteredLanguages.length} language{filteredLanguages.length !== 1 ? 's' : ''}
+      </p>
+    </div>
+  );
+};

website/src/components/languages-table.scss

@@ -0,0 +1,130 @@
+.languages-table-container {
+    width: 100%;
+
+    .search-box {
+        margin-bottom: 1.5rem;
+
+        .search-input {
+            width: 100%;
+            padding: 0.75rem;
+            font-size: 1rem;
+            border: 1px solid var(--ifm-color-emphasis-300);
+            border-radius: 0.5rem;
+            background-color: var(--ifm-background-color);
+            color: var(--ifm-font-color-base);
+            transition: border-color 0.2s ease;
+
+            &:focus {
+                outline: none;
+                border-color: var(--ifm-color-primary);
+            }
+
+            &::placeholder {
+                color: var(--ifm-color-emphasis-600);
+            }
+        }
+    }
+
+    .table-wrapper {
+        width: 100%;
+        border: 1px solid var(--ifm-color-emphasis-500);
+        border-radius: 0.5rem;
+        overflow: hidden;
+    }
+
+    .table-header {
+        display: grid;
+        grid-template-columns: 200px 1fr 2fr;
+        background-color: var(--ifm-table-head-background);
+        font-weight: bold;
+
+        .table-cell {
+            padding: 0.75rem 1rem;
+            border-right: 1px solid var(--ifm-color-emphasis-500);
+
+            &:last-child {
+                border-right: none;
+            }
+        }
+    }
+
+    .table-body {
+        .table-row {
+            display: grid;
+            grid-template-columns: 200px 1fr 2fr;
+            border-top: 1px solid var(--ifm-color-emphasis-500);
+
+            &.striped {
+                background-color: var(--ifm-table-stripe-background);
+            }
+
+            .table-cell {
+                padding: 0.75rem 1rem;
+                border-right: 1px solid var(--ifm-color-emphasis-500);
+
+                &:last-child {
+                    border-right: none;
+                }
+
+                code {
+                    &.extensions {
+                        white-space: pre-wrap;
+                        word-break: break-word;
+                    }
+                }
+            }
+        }
+    }
+
+    .no-results {
+        text-align: center;
+        padding: 2rem;
+        color: var(--ifm-color-emphasis-600);
+    }
+
+    .total-count {
+        margin-top: 1.5rem;
+        font-size: 0.9rem;
+        color: var(--ifm-color-emphasis-600);
+    }
+}
+
+@media (max-width: 768px) {
+    .languages-table-container {
+        .table-header,
+        .table-body .table-row {
+            grid-template-columns: 150px 1fr 1.5fr;
+        }
+    }
+}
+
+@media (max-width: 576px) {
+    .languages-table-container {
+        .table-header,
+        .table-body .table-row {
+            grid-template-columns: 1fr;
+
+            .table-cell {
+                border-right: none;
+                border-bottom: 1px solid var(--ifm-color-emphasis-400);
+
+                &:last-child {
+                    border-bottom: none;
+                }
+            }
+        }
+
+        .table-body .table-row {
+            padding: 0.5rem 0;
+
+            .table-cell {
+                &:before {
+                    content: attr(data-label);
+                    font-weight: bold;
+                    display: block;
+                    margin-bottom: 0.25rem;
+                }
+            }
+        }
+    }
+}