diff --git a/docs/script.js b/docs/script.js
index 64f5826..47353a5 100644
--- a/docs/script.js
+++ b/docs/script.js
@@ -1,25 +1,19 @@
+const loadedColumns = [];
+const defaultShowLangs = ['Rust 1.55', 'Haskell'];
+let conceptsData = [];
+let progLangList = [];
 
-// Create an array to track visibility states of column
-var loadedColumns = [];
-var defaultShowLangs = ['Rust 1.55', 'Haskell'];
-
-// Use the DataTables library to create a table with search and filter functionality
-$(document).ready(function () {
-
-
+$(document).ready(() => {
     marked.setOptions({
-        highlight: function (code, lang) {
+        highlight: (code, lang) => {
             if (lang && hljs.getLanguage(lang)) {
                 return hljs.highlight(code, { language: lang }).value;
-            } else {
-                return hljs.highlightAuto(code).value;
             }
+
+            return hljs.highlightAuto(code).value;
         }
     });
 
-    let conceptsData = {}
-    let progLangList = []
-
     const progLangConceptsUrl = 'prog_lang_concepts.yaml';
     const progLangListUrl = 'prog_langs.yaml';
 
@@ -34,171 +28,123 @@ $(document).ready(function () {
             addLangToggle(progLangList);
             addTocHtml(conceptsData);
         })
-        .then(results => {
-            for (let i in defaultShowLangs) {
-                loadLangConceptsInColumn('#langTable', defaultShowLangs[i], conceptsData);
+        .then(() => {
+            for (const lang of defaultShowLangs) {
+                loadLangConceptsInColumn('#langTable', lang);
             }
         });
 });
 
-/**
- * fetches the concepts data from the yaml file and returns a dictionary
- * @param {*} yamlUrl
- * @return {dictionary} dictionary of concept, subconcept and prompt
- */
 async function getProgLangConcepts(yamlUrl) {
-    // Fetch the YAML data from the URL
     const response = await fetch(yamlUrl);
 
-    // Check if the request was successful
     if (!response.ok) {
         throw new Error(`HTTP error! status: ${response.status}`);
     }
 
-    // Get the response body as text
     const yamlText = await response.text();
-
-    // Parse the YAML data
     const yamlData = jsyaml.safeLoad(yamlText);
 
-    let conceptsData = []
-
-    for (let concept in yamlData) {
-        if (yamlData.hasOwnProperty(concept)) {
-            let subObj = yamlData[concept];
-            for (let subConcept in subObj) {
-                if (subObj.hasOwnProperty(subConcept)) {
-                    // rowHeader.push(`${key} - ${subKey}`);
-                    conceptsData.push({
-                        'concept': `${concept}`,
-                        'subconcept': `${subConcept}`,
-                        'filename': `datatypes_primitives.md`,
+    const conceptsDataResult = [];
+
+    for (const concept in yamlData) {
+        if (Object.prototype.hasOwnProperty.call(yamlData, concept)) {
+            const subObj = yamlData[concept];
+            for (const subConcept in subObj) {
+                if (Object.prototype.hasOwnProperty.call(subObj, subConcept)) {
+                    conceptsDataResult.push({
+                        concept: `${concept}`,
+                        subconcept: `${subConcept}`,
+                        filename: 'datatypes_primitives.md'
                     });
                 }
             }
         }
     }
 
-    return conceptsData;
+    return conceptsDataResult;
 }
 
-
-
-
 async function getProgLangs(yamlUrl) {
-    // Fetch the YAML data from the URL
     const response = await fetch(yamlUrl);
 
-    // Check if the request was successful
     if (!response.ok) {
         throw new Error(`HTTP error! status: ${response.status}`);
     }
 
-    // Get the response body as text
     const yamlText = await response.text();
-
-    // Parse the YAML data
     const yamlData = jsyaml.safeLoad(yamlText);
 
-    let progLangList = []
-    progLangList = yamlData['Programming Languages']
-
-    return progLangList;
+    const progLangListResult = yamlData['Programming Languages'];
 
+    return progLangListResult;
 }
 
-async function showEmptyTable(tableId, conceptsData, prog_lang_list) {
-
-    //Create one column for each programming language
-    let columns = []
-    let map = {
-        '\.': '_',
-    };
+async function showEmptyTable(tableId, conceptsDataParam, prog_lang_list) {
+    const columns = [];
 
-
-
-    // Creating Concerpts, concept, subconept column definitions
-    // Concepts is the visible column. 
-    // concept and subconcept are hidden columns used to create filenames later
     columns.push({
         title: 'Concepts', name: 'Concepts', data: 'Concepts', width: '20ch',
-        "createdCell": function (td, cellData, rowData, row, col) {
+        createdCell: (td) => {
             $(td).css('font-weight', 'bold');
         }
-    },   //copilot suggested this !!!
-        { title: 'concept', name: 'concept', data: 'concept', visible: false }, // hidden column
-        { title: 'subconcept', name: 'subconcept', data: 'subconcept', visible: false }, //hidden column
-    );
-
+    },
+    { title: 'concept', name: 'concept', data: 'concept', visible: false },
+    { title: 'subconcept', name: 'subconcept', data: 'subconcept', visible: false });
 
-
-    // Creating column definitions for each language 
-    for (let langTitle of prog_lang_list) {
-        // Add a new key-value pair to each dictionary
-        let safeLangName = getSafeName(langTitle) // if data key contains a dot, it will not work
+    for (const langTitle of prog_lang_list) {
+        const safeLangName = getSafeName(langTitle);
         let visibility = false;
-        // default columns to show
+
         if (defaultShowLangs.includes(langTitle)) {
             visibility = true;
         }
+
         columns.push({ title: `${langTitle}`, name: `${safeLangName}`, data: `${safeLangName}`, width: '50ch', visible: visibility });
     }
 
-
-    // Populating the diciotnary with the data
-    //Creating a three column row temporarily
-    let rows = conceptsData.map(item => ({
-        'Concepts': `${item.concept}  -  ${item.subconcept}`,
-        'concept': `${item.concept}`,
-        'subconcept': `${item.subconcept}`
+    const rows = conceptsDataParam.map(item => ({
+        Concepts: `${item.concept}  -  ${item.subconcept}`,
+        concept: `${item.concept}`,
+        subconcept: `${item.subconcept}`
     }));
 
-    // extend the row one cell at a time for each language.
-    // adding a placeholder text for correspoding  to a language in the cell                                
-    for (let i = 0; i < rows.length; i++) {
-        for (let lang of prog_lang_list) {
-            // Add a new key-value pair to each dictionary
-            rows[i][getSafeName(lang)] = `Loading for ${getSafeName(lang)} ...`; //Show place holder text
+    for (const row of rows) {
+        for (const lang of prog_lang_list) {
+            row[getSafeName(lang)] = `Loading for ${getSafeName(lang)} ...`;
         }
     }
-    // console.log(rows);
-
 
     $(tableId).DataTable({
         data: rows,
-        columns: columns,
+        columns,
         paging: false,
         autoWidth: false,
-
-        order: []  //disable sorting. Maintain the cocept order in prog_lang_concepts.yaml file
+        order: []
     });
-
-
 }
 
-
 async function loadLangConceptsInColumnMd(tableId, progLang) {
+    const mytable = $(tableId).DataTable();
+    const columnIndex = mytable.column(`${progLang}:name`).index();
 
-    //get column for a language
-    let mytable = $(tableId).DataTable();
-    let columnIndex = mytable.column(progLang + ':name').index();
+    if (columnIndex === undefined) {
+        return;
+    }
 
     mytable.rows().every(function () {
-        // Get the data for this row
-        var data = this.data();
+        const data = this.data();
 
-        // Update the value of the cell in the target column
-        let concept = data['concept'];
-        let subconcept = data['subconcept'];
-        let safename = getSafeName(progLang)
-        filepath = 'content-autogen/gpt_3_5_turbo/' + getSafeName(progLang) + '/';
-        fileurl = filepath + getSafeName(concept) + '_' + getSafeName(subconcept) + '.md';
-        // data[safename] = 'New Value';  // Replace 'New Value' with the new value you want to set
+        const concept = data['concept'];
+        const subconcept = data['subconcept'];
+        const safename = getSafeName(progLang);
+        const filepath = 'content-autogen/gpt_3_5_turbo/' + getSafeName(progLang) + '/';
+        const fileurl = filepath + getSafeName(concept) + '_' + getSafeName(subconcept) + '.md';
 
         fetch(fileurl)
             .then(response => response.text())
             .then(filecontent => {
-                data[getSafeName(progLang)] = marked(filecontent);
+                data[safename] = marked(filecontent);
                 this.invalidate().draw();
             })
             .catch((error) => {
@@ -207,33 +153,31 @@ async function loadLangConceptsInColumnMd(tableId, progLang) {
     });
 
     loadedColumns.push(progLang);
-
 }
 
 async function loadLangConceptsInColumn(tableId, progLang) {
+    const mytable = $(tableId).DataTable();
+    const columnIndex = mytable.column(`${progLang}:name`).index();
 
-    //get column for a language
-    let mytable = $(tableId).DataTable();
-    let columnIndex = mytable.column(progLang + ':name').index();
+    if (columnIndex === undefined) {
+        return;
+    }
 
-    let fileurl = 'content-autogen/gpt_3_5_turbo/' + getSafeName(progLang) + '.json';
+    const fileurl = 'content-autogen/gpt_3_5_turbo/' + getSafeName(progLang) + '.json';
     let mergedContent = {};
     fetch(fileurl)
         .then(response => response.text())
         .then(filecontent => {
             mergedContent = JSON.parse(filecontent);
             mytable.rows().every(function () {
-                // Get the data for this row
-                var data = this.data();
-
-                let concept = data['concept'];
-                let subconcept = data['subconcept'];
-                // Update the value of the cell in the target column
-                let safeProglang = getSafeName(progLang)
-                let key = getSafeName(concept) + '_' + getSafeName(subconcept);
+                const data = this.data();
+
+                const concept = data['concept'];
+                const subconcept = data['subconcept'];
+                const safeProglang = getSafeName(progLang);
+                const key = getSafeName(concept) + '_' + getSafeName(subconcept);
                 data[safeProglang] = marked(mergedContent[key]);
                 this.invalidate().draw();
-
             });
 
             loadedColumns.push(progLang);
@@ -241,144 +185,99 @@ async function loadLangConceptsInColumn(tableId, progLang) {
         .catch((error) => {
             console.error('Error:', error);
         });
-
-
-
 }
 
 function getSafeName(value) {
-
-    // const regex = /[&\/\\#, +()$~%.'":*?<>{}]/g;
     const regex = /[&\/\\, +()$~%.'":*?<>{}-]/g;
-    // const regex = /\.|\ |-|\?|\(|\)|\/|\\|/g;
-    let newvalue = value.replace(regex, "_");
+    const newvalue = value.replace(regex, '_');
     return newvalue;
-    // let regex = new RegExp(Object.keys(map).join('|'), 'g');
-    // return str.replace(regex, function(matched) {
-    //     return map[matched];
-    // });
 }
 
 function addLangToggle(prog_lang_list) {
+    for (const lang of prog_lang_list.sort()) {
+        const columnTitle = lang;
+        const columnName = getSafeName(lang);
 
-    // Creating toggle for each language 
-    for (let lang of prog_lang_list.sort()) {
-        let columnTitle = lang;
-        let columnName = getSafeName(lang);
+        const a = document.createElement('a');
 
+        a.setAttribute('class', 'toggle-vis');
+        a.setAttribute('columnname', columnName);
 
-        // Create a new anchor element
-        let a = document.createElement('a');
-
-        // Set the attributes
-        a.setAttribute("class", "toggle-vis");
-        a.setAttribute("columnname", columnName)
-
-        // Set the text of the anchor element
         a.textContent = columnTitle + ' , ';
 
         if (defaultShowLangs.includes(columnTitle)) {
-            a.style.color = "blue";
+            a.style.color = 'blue';
         }
         else {
-            a.style.color = "grey";
+            a.style.color = 'grey';
         }
 
-
         a.onclick = function (e) {
             e.preventDefault();
 
-            let mytable = $('#langTable').DataTable();        // Get the column API object
-            let column = mytable.column($(this).attr('columnname') + ':name');
+            const mytable = $('#langTable').DataTable();
+            const column = mytable.column($(this).getAttribute('columnname') + ':name');
 
-            // Toggle the visibility
             column.visible(!column.visible());
 
-            this.style.color = this.style.color == "grey" ? "blue" : "grey";
+            this.style.color = this.style.color === 'grey' ? 'blue' : 'grey';
 
-
-            // if making visible fo rthe first time then fetch data for subconcepts and replace the placeholder text
-            if (column.visible() == true && loadedColumns.includes(columnTitle) == false) {
+            if (column.visible() === true && loadedColumns.includes(columnTitle) === false) {
                 loadLangConceptsInColumn('#langTable', columnTitle);
             }
-
         };
 
-        // Select the div with the specific class
-        // var div = document.querySelector('.toggle-vis'); 
-        var div = document.querySelector('#toggle');
-
-        // Append the anchor element to the div
-        div.appendChild(a);
+        const div = document.querySelector('#toggle');
+        if (div) {
+            div.appendChild(a);
+        }
     }
-
 }
 
-function addTocHtml(conceptsData) {
-    let html = '<ul>';
+function addTocHtml(conceptsDataParam) {
     const tocDiv = document.getElementById('toc');
 
-    // let prevConcept = '';
-    // const concepts = document.createElement('ul');
-    // let subconcepts = null;
-
+    if (!tocDiv) {
+        return;
+    }
 
-    const concepts = [...new Set(conceptsData.map(item => item.concept))];
+    const concepts = [...new Set(conceptsDataParam.map(item => item.concept))];
     const conceptsUl = document.createElement('ul');
 
-    let rowIndex =0;
-
-    concepts.forEach(function(conceptStr, index) {
-
-        
-            
-
-            const subconcepts = conceptsData.filter(item2 => item2.concept === conceptStr);
-            const subconceptsUl = document.createElement('ul');
-            subconcepts.forEach(function(item3, index) {
-                const subconceptLi = document.createElement('li');
-                // subconceptLi.textContent = 'sc';
-                const a = document.createElement('a');
-                // a.href = '#';
-                a.innerText = item3.subconcept;
-                a.setAttribute("class", "toggle-vis");
-                a.setAttribute("rowIndex", rowIndex);
-                rowIndex += 1;
-
-        
-                a.onclick = function (e) {
-                    e.preventDefault();
-        
-                    // Get the DataTable instance
-                    const table = $('#langTable').DataTable();
-                    
-                    // Specify the row index to scroll to
-                    let rowIndex = $(this).attr('rowIndex');
-
-                    // Get the row node
-                    let rowNode = table.row(rowIndex).node();
-
-                    // Scroll to the row
-                    $('html, body').animate({
-                        scrollTop: $(rowNode).offset().top
-                    }, 500);
-        
-                };
-
-                
-                subconceptLi.appendChild(a);
-                subconceptsUl.appendChild(subconceptLi);
-            });
-
-            const conceptli = document.createElement('li');
-            conceptli.innerText += `${conceptStr}` ;
-            conceptsUl.appendChild(conceptli);
-            conceptsUl.appendChild(subconceptsUl);
-            tocDiv.appendChild(conceptsUl);
+    let rowIndex = 0;
+
+    concepts.forEach(conceptStr => {
+        const subconcepts = conceptsDataParam.filter(item2 => item2.concept === conceptStr);
+        const subconceptsUl = document.createElement('ul');
+        subconcepts.forEach(item3 => {
+            const subconceptLi = document.createElement('li');
+            const a = document.createElement('a');
+            a.innerText = item3.subconcept;
+            a.setAttribute('class', 'toggle-vis');
+            a.setAttribute('rowIndex', rowIndex.toString());
+            rowIndex += 1;
+
+            a.onclick = function (e) {
+                e.preventDefault();
+
+                const table = $('#langTable').DataTable();
+                const rowIndexValue = $(this).attr('rowIndex');
+                const rowNode = table.row(rowIndexValue).node();
+
+                $('html, body').animate({
+                    scrollTop: $(rowNode).offset().top
+                }, 500);
+            };
+
+            subconceptLi.appendChild(a);
+            subconceptsUl.appendChild(subconceptLi);
+        });
 
-        
+        const conceptli = document.createElement('li');
+        conceptli.innerText += `${conceptStr}`;
+        conceptsUl.appendChild(conceptli);
+        conceptsUl.appendChild(subconceptsUl);
+        tocDiv.appendChild(conceptsUl);
     });
+}
 
-
-   
-}
\ No newline at end of file
diff --git a/docs/script.ts b/docs/script.ts
new file mode 100644
index 0000000..f581b75
--- /dev/null
+++ b/docs/script.ts
@@ -0,0 +1,305 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+declare const $: any;
+declare const jsyaml: any;
+declare const marked: any;
+declare const hljs: any;
+
+type ConceptEntry = {
+    concept: string;
+    subconcept: string;
+    filename: string;
+};
+
+type ProgLangList = string[];
+
+type TableRow = {
+    Concepts: string;
+    concept: string;
+    subconcept: string;
+    [key: string]: string;
+};
+
+const loadedColumns: ProgLangList = [];
+const defaultShowLangs: ProgLangList = ['Rust 1.55', 'Haskell'];
+let conceptsData: ConceptEntry[] = [];
+let progLangList: ProgLangList = [];
+
+$(document).ready(() => {
+    marked.setOptions({
+        highlight: (code: string, lang: string) => {
+            if (lang && hljs.getLanguage(lang)) {
+                return hljs.highlight(code, { language: lang }).value;
+            }
+
+            return hljs.highlightAuto(code).value;
+        }
+    });
+
+    const progLangConceptsUrl = 'prog_lang_concepts.yaml';
+    const progLangListUrl = 'prog_langs.yaml';
+
+    Promise.all([
+        getProgLangConcepts(progLangConceptsUrl),
+        getProgLangs(progLangListUrl)
+    ])
+        .then(results => {
+            conceptsData = results[0];
+            progLangList = results[1];
+            showEmptyTable('#langTable', conceptsData, progLangList);
+            addLangToggle(progLangList);
+            addTocHtml(conceptsData);
+        })
+        .then(() => {
+            for (const lang of defaultShowLangs) {
+                loadLangConceptsInColumn('#langTable', lang);
+            }
+        });
+});
+
+async function getProgLangConcepts(yamlUrl: string): Promise<ConceptEntry[]> {
+    const response = await fetch(yamlUrl);
+
+    if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`);
+    }
+
+    const yamlText = await response.text();
+    const yamlData: any = jsyaml.safeLoad(yamlText);
+
+    const conceptsData: ConceptEntry[] = [];
+
+    for (const concept in yamlData) {
+        if (Object.prototype.hasOwnProperty.call(yamlData, concept)) {
+            const subObj = yamlData[concept];
+            for (const subConcept in subObj) {
+                if (Object.prototype.hasOwnProperty.call(subObj, subConcept)) {
+                    conceptsData.push({
+                        concept: `${concept}`,
+                        subconcept: `${subConcept}`,
+                        filename: 'datatypes_primitives.md'
+                    });
+                }
+            }
+        }
+    }
+
+    return conceptsData;
+}
+
+async function getProgLangs(yamlUrl: string): Promise<ProgLangList> {
+    const response = await fetch(yamlUrl);
+
+    if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`);
+    }
+
+    const yamlText = await response.text();
+    const yamlData: any = jsyaml.safeLoad(yamlText);
+
+    const progLangList: ProgLangList = yamlData['Programming Languages'];
+
+    return progLangList;
+}
+
+async function showEmptyTable(tableId: string, conceptsData: ConceptEntry[], prog_lang_list: ProgLangList): Promise<void> {
+    const columns: Array<Record<string, any>> = [];
+
+    columns.push({
+        title: 'Concepts', name: 'Concepts', data: 'Concepts', width: '20ch',
+        createdCell: (td: HTMLElement) => {
+            $(td).css('font-weight', 'bold');
+        }
+    },
+    { title: 'concept', name: 'concept', data: 'concept', visible: false },
+    { title: 'subconcept', name: 'subconcept', data: 'subconcept', visible: false });
+
+    for (const langTitle of prog_lang_list) {
+        const safeLangName = getSafeName(langTitle);
+        let visibility = false;
+
+        if (defaultShowLangs.includes(langTitle)) {
+            visibility = true;
+        }
+
+        columns.push({ title: `${langTitle}`, name: `${safeLangName}`, data: `${safeLangName}`, width: '50ch', visible: visibility });
+    }
+
+    const rows: TableRow[] = conceptsData.map(item => ({
+        Concepts: `${item.concept}  -  ${item.subconcept}`,
+        concept: `${item.concept}`,
+        subconcept: `${item.subconcept}`
+    }));
+
+    for (const row of rows) {
+        for (const lang of prog_lang_list) {
+            row[getSafeName(lang)] = `Loading for ${getSafeName(lang)} ...`;
+        }
+    }
+
+    $(tableId).DataTable({
+        data: rows,
+        columns,
+        paging: false,
+        autoWidth: false,
+        order: []
+    });
+}
+
+async function loadLangConceptsInColumnMd(tableId: string, progLang: string): Promise<void> {
+    const mytable = $(tableId).DataTable();
+    const columnIndex = mytable.column(`${progLang}:name`).index();
+
+    if (columnIndex === undefined) {
+        return;
+    }
+
+    mytable.rows().every(function () {
+        const data: TableRow = this.data();
+
+        const concept = data['concept'];
+        const subconcept = data['subconcept'];
+        const safename = getSafeName(progLang);
+        const filepath = 'content-autogen/gpt_3_5_turbo/' + getSafeName(progLang) + '/';
+        const fileurl = filepath + getSafeName(concept) + '_' + getSafeName(subconcept) + '.md';
+
+        fetch(fileurl)
+            .then(response => response.text())
+            .then(filecontent => {
+                data[safename] = marked(filecontent);
+                this.invalidate().draw();
+            })
+            .catch((error: Error) => {
+                console.error('Error:', error);
+            });
+    });
+
+    loadedColumns.push(progLang);
+}
+
+async function loadLangConceptsInColumn(tableId: string, progLang: string): Promise<void> {
+    const mytable = $(tableId).DataTable();
+    const columnIndex = mytable.column(`${progLang}:name`).index();
+
+    if (columnIndex === undefined) {
+        return;
+    }
+
+    const fileurl = 'content-autogen/gpt_3_5_turbo/' + getSafeName(progLang) + '.json';
+    let mergedContent: Record<string, string> = {};
+    fetch(fileurl)
+        .then(response => response.text())
+        .then(filecontent => {
+            mergedContent = JSON.parse(filecontent);
+            mytable.rows().every(function () {
+                const data: TableRow = this.data();
+
+                const concept = data['concept'];
+                const subconcept = data['subconcept'];
+                const safeProglang = getSafeName(progLang);
+                const key = getSafeName(concept) + '_' + getSafeName(subconcept);
+                data[safeProglang] = marked(mergedContent[key]);
+                this.invalidate().draw();
+            });
+
+            loadedColumns.push(progLang);
+        })
+        .catch((error: Error) => {
+            console.error('Error:', error);
+        });
+}
+
+function getSafeName(value: string): string {
+    const regex = /[&\/\\, +()$~%.'":*?<>{}-]/g;
+    const newvalue = value.replace(regex, '_');
+    return newvalue;
+}
+
+function addLangToggle(prog_lang_list: ProgLangList): void {
+    for (const lang of prog_lang_list.sort()) {
+        const columnTitle = lang;
+        const columnName = getSafeName(lang);
+
+        const a = document.createElement('a');
+
+        a.setAttribute('class', 'toggle-vis');
+        a.setAttribute('columnname', columnName);
+
+        a.textContent = columnTitle + ' , ';
+
+        if (defaultShowLangs.includes(columnTitle)) {
+            a.style.color = 'blue';
+        }
+        else {
+            a.style.color = 'grey';
+        }
+
+        a.onclick = function (e) {
+            e.preventDefault();
+
+            const mytable = $('#langTable').DataTable();
+            const column = mytable.column($(this).attr('columnname') + ':name');
+
+            column.visible(!column.visible());
+
+            this.style.color = this.style.color === 'grey' ? 'blue' : 'grey';
+
+            if (column.visible() === true && loadedColumns.includes(columnTitle) === false) {
+                loadLangConceptsInColumn('#langTable', columnTitle);
+            }
+        };
+
+        const div = document.querySelector('#toggle');
+        if (div) {
+            div.appendChild(a);
+        }
+    }
+}
+
+function addTocHtml(conceptsData: ConceptEntry[]): void {
+    const tocDiv = document.getElementById('toc');
+
+    if (!tocDiv) {
+        return;
+    }
+
+    const concepts = [...new Set(conceptsData.map(item => item.concept))];
+    const conceptsUl = document.createElement('ul');
+
+    let rowIndex = 0;
+
+    concepts.forEach(conceptStr => {
+        const subconcepts = conceptsData.filter(item2 => item2.concept === conceptStr);
+        const subconceptsUl = document.createElement('ul');
+        subconcepts.forEach(item3 => {
+            const subconceptLi = document.createElement('li');
+            const a = document.createElement('a');
+            a.innerText = item3.subconcept;
+            a.setAttribute('class', 'toggle-vis');
+            a.setAttribute('rowIndex', rowIndex.toString());
+            rowIndex += 1;
+
+            a.onclick = function (e) {
+                e.preventDefault();
+
+                const table = $('#langTable').DataTable();
+                const rowIndexValue = $(this).attr('rowIndex');
+                const rowNode = table.row(rowIndexValue).node();
+
+                $('html, body').animate({
+                    scrollTop: $(rowNode).offset().top
+                }, 500);
+            };
+
+            subconceptLi.appendChild(a);
+            subconceptsUl.appendChild(subconceptLi);
+        });
+
+        const conceptli = document.createElement('li');
+        conceptli.innerText += `${conceptStr}`;
+        conceptsUl.appendChild(conceptli);
+        conceptsUl.appendChild(subconceptsUl);
+        tocDiv.appendChild(conceptsUl);
+    });
+}
+
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000..8336a8a
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,15 @@
+{
+  "compilerOptions": {
+    "target": "ES2019",
+    "module": "ES2015",
+    "moduleResolution": "node",
+    "outDir": "./docs",
+    "rootDir": "./docs",
+    "strict": true,
+    "noImplicitAny": false,
+    "allowSyntheticDefaultImports": true,
+    "skipLibCheck": true
+  },
+  "include": ["docs/**/*.ts"],
+  "exclude": ["node_modules"]
+}