showcase.html

<!DOCTYPE html>
<html data-dark-mode="false" data-code-theme="light">
<head>
    <script src="/markbind/js/theme-manager.js"></script>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="generator" content="MarkBind 7.2.1">
    <meta name="viewport" content="width=device-width, initial-scale=1"><title>MarkBind - Showcase</title> <link rel="stylesheet" href="/markbind/css/bootstrap.min.css"> <link rel="stylesheet" href="/markbind/fontawesome/css/all.min.css">
    
    
    <link rel="stylesheet" id="markbind-highlight-light" href="/markbind/css/codeblock-light.min.css">
    <link rel="stylesheet" id="markbind-highlight-dark" href="/markbind/css/codeblock-dark.min.css">
    <script src="/markbind/js/code-theme.js"></script><link rel="stylesheet" href="/markbind/css/markbind.min.css"><link rel="stylesheet" href="/plugins/codeBlockWrapButtons/codeBlockButtons.css"><link rel="stylesheet" href="/plugins/web3Form/web-3-form.css"><link rel="stylesheet" href="/plugins/codeBlockCopyButtons/codeBlockButtons.css"><link rel="stylesheet" href="/plugins/dataTable/datatables.min.css"><link rel="stylesheet" href="/plugins/dataTable/datatables-additional.css"><link rel="stylesheet" href="/plugins/markbind-plugin-anchors/markbind-plugin-anchors.css"><link rel="stylesheet" href="/plugins/markbind-plugin-tree/markbind-plugin-tree.css">
    
  <link rel="stylesheet" href="/css/main.css">
<link rel="icon" href="/favicon.ico"></head>
<script>
  const baseUrl = ''
</script>
<body 
   
  data-code-theme="light">
<div id="app"><!--[--><header sticky><div data-v-94b60ff6><nav class="navbar navbar-expand-md d-print-none navbar-dark bg-dark" data-v-94b60ff6><div class="container-fluid" data-v-94b60ff6><div class="navbar-left" data-v-94b60ff6><!--[--><a href="/index.html" title="Home" class="navbar-brand"><img src="/images/logo-darkbackground.svg" height="20"></a><!--]--></div><div class="navbar-default" data-v-94b60ff6><ul class="navbar-nav me-auto mt-2 mt-lg-0" data-v-94b60ff6><!--[--> <li><a highlight-on="exact" href="/index.html" class="nav-link">HOME</a></li> <div tags="environment--ug environment--combined"><li><a highlight-on="sibling-or-child" href="/userGuide/index.html" class="nav-link">USER GUIDE</a></li></div> <li><a highlight-on="exact" href="/showcase.html" class="nav-link">SHOWCASE</a></li> <li><a highlight-on="exact" href="/about.html" class="nav-link">ABOUT</a></li> <li><a href="https://github.com/MarkBind/markbind" target="_blank" class="nav-link"><span><span aria-hidden="true" class="fab fa-github"></span></span></a></li> <!--]--></ul></div><div class="navbar-right" data-v-94b60ff6><ul class="navbar-nav" data-v-94b60ff6><!--[--><li><form class="navbar-form"><div style="position:relative;" class="dropdown" data-v-103d5c4e><!--[--><input value="" data-bs-toggle="dropdown" type="text" class="form-control" placeholder="Search" autocomplete="off" data-v-103d5c4e><div class="form-control placeholder-div-hidden" data-v-103d5c4e>Search</div><!--]--><ul class="dropdown-menu search-dropdown-menu dropdown-menu-hidden dropdown-menu-end" data-v-103d5c4e><!--[--><!--]--></ul></div></form></li><!--]--></ul><!----></div></div></nav><div style="display:none;" class="lower-navbar-container" data-v-94b60ff6><!--[--><!----><!----><!--]--></div></div></header> <div id="flex-body"><div id="content-wrapper"><h1 id="examples-of-markbind-websites">Examples of MarkBind Websites<a class="fa fa-anchor" href="#examples-of-markbind-websites" onclick="event.stopPropagation()"></a></h1> <h2 id="course-websites">Course Websites<a class="fa fa-anchor" href="#course-websites" onclick="event.stopPropagation()"></a></h2> <ul><li><a href="https://www.comp.nus.edu.sg/~cs2103"><strong>CS2103/T Software Engineering</strong></a></li> <li><a href="https://www.comp.nus.edu.sg/~cs2113"><strong>CS2113/T Software Engineering and OOP</strong></a></li> <li><a href="https://nus-cs3281.github.io/website/"><strong>CS3281&amp;2 Thematic Systems Project</strong></a></li> <li><a href="https://nus-tic2002-2019.github.io/website/"><strong>TIC2002 Introduction to Software Engineering</strong></a></li> <li><a href="https://nus-te3201.github.io/2020/"><strong>TE3201 Software Engineering</strong></a></li> <li><a href="https://nus-cs3203.github.io/course-website/"><strong>CS3203 Software Engineering Project</strong></a></li></ul> <h2 id="online-books">Online Books<a class="fa fa-anchor" href="#online-books" onclick="event.stopPropagation()"></a></h2> <ul><li><a href="https://se-education.org/se-book/"><strong>Software Engineering for Self-Directed Learners</strong></a></li> <li><a href="https://se-education.org/learningresources/"><strong>A Student&#39;s Guide to Software Engineering Tools &amp; Techniques</strong></a></li></ul> <h2 id="product-project-websites">Product/Project Websites<a class="fa fa-anchor" href="#product-project-websites" onclick="event.stopPropagation()"></a></h2> <ul><li>This website <span class="dimmed">(i.e., MarkBind website)</span></li> <li><a href="https://reposense.org"><strong>reposense.org</strong></a></li> <li><a href="https://se-education.org"><strong>se-education.org</strong></a></li> <li><a href="https://damithc.github.io/ab3-markbind/index.html"><strong>AddressBook Level-3</strong></a></li></ul></div> <div class="scroll-top-button fa-lg d-print-none" style="display:none;bottom:2%;right:2%;position:fixed;" aria-hidden="true"><!--[--><i class="fas fa-arrow-circle-up"></i><!--]--></div></div> <div><footer><div class="text-center"><small>[Generated by <a href="https://markbind.org/">MarkBind 7.2.1</a> on Thu, 27 Aug 2026, 7:09:07 UTC]</small><br> <small>This site is powered by <a href="https://www.netlify.com/">Netlify</a>.</small></div></footer></div><!--]--></div>
</body><script src="/markbind/js/bootstrap-utility.min.js"></script>
<script src="/markbind/js/polyfill.min.js"></script>
<script src="/markbind/js/vue.global.prod.min.js"></script>
<script src="/markbind/js/markbind.min.js"></script>
<script src="showcase.page-vue-render.js"></script>
<script>
  MarkBind.setupWithSearch()
</script>
    <script>
    function toggleCodeBlockWrap(element) {
      const pre = element.parentElement.parentElement;
      const tooltipText = element.querySelector(".tooltiptext");
      const classList = pre.querySelector('code').classList;
      if (classList.contains('wrap')) {
          classList.remove('wrap');
          tooltipText.innerText  = `Wrap Text`;
      } else {
          classList.add('wrap')
          tooltipText.innerText  = `Unwrap Text`;
      }
    }
    </script>
    
    <script>
        function submitForm(element) {
            event.preventDefault();
            const formData = new FormData(element);
            const formProps = Object.fromEntries(formData);
            const json = JSON.stringify(formProps);
            const submitButton = element.querySelector('button[type="submit"]');
            const submitButtonText = submitButton.innerText;
            submitButton.innerText = 'Please wait...'
            fetch('https://api.web3forms.com/submit', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'Accept': 'application/json'
                },
                body: json,
            })
            .then(async (response) => {
                if (response.status == 200) {
                    alert('Form submitted! Thank you for your response');
                } else {
                    alert('Error submitting form! Please try again later.');
                }
            })
            .catch(error => {
                alert('Error submitting form! Please try again later.');
            })
            .finally(() => {
                submitButton.innerText = submitButtonText;
            })
        }
    </script>
    <script>
    function copyCodeBlock(element) {
        const pre = element.parentElement.parentElement;
        const codeElement = pre.querySelector('code');
        const copyButtonBody = element.querySelector('.function-btn-body');
        const tooltipText = element.querySelector(".tooltiptext");

        // create dummy text element to select() the text field
        const textElement = document.createElement('textarea');
        textElement.value = codeElement.textContent;
        document.body.appendChild(textElement);
        textElement.select();

        document.execCommand('copy');
        document.body.removeChild(textElement);
        copyButtonBody.innerHTML = `
  <svg
    xmlns="http://www.w3.org/2000/svg"
    width="18"
    height="18"
    viewBox="2 2 22 22"
  >
    <path d="M 19.28125 5.28125 L 9 15.5625 L 4.71875 11.28125 L 3.28125 12.71875 L 8.28125 17.71875
    L 9 18.40625 L 9.71875 17.71875 L 20.71875 6.71875 Z"></path>
  </svg>
`;
        console.log("Running tooltip");
        tooltipText.innerText  = `Copied!`;
        setTimeout(() => {
            copyButtonBody.innerHTML = `
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
  width="18" height="18" viewBox="0 0 18 18" version="1.1">
    <g id="surface1">
      <path d="M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844
      1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438
      1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4
      4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906
      15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844
      14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L
      5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "/>
    </g>
</svg>
`;
            tooltipText.innerText  = `Copy`;
        }, 3000);
    }
    </script>
    <script src="/plugins/dataTable/datatables.min.js"></script>
    
  <script>
    function getTableOptions(el) {
      const options = {};
      if ($(el).hasClass('sortable-table')) {
        options.searching = false;
        options.paging = false;
        options.info = false;
      } else if ($(el).hasClass('searchable-table')) {
        options.ordering = false;
        options.paging = false;
        options.info = false;
        options.dom = '<"row"<"col-sm-12"f>>' + '<"row"<"col-sm-12"t>>';
      } else if ($(el).hasClass('sortable-searchable-table')) {
        options.paging = false;
        options.info = false;
        options.dom = '<"row"<"col-sm-12"f>>' + '<"row"<"col-sm-12"t>>';
      }
      return options;
    }

    function initializeTables(tables) {
      if (!tables || tables.length === 0) return;
      tables.forEach(table => {
        const options = getTableOptions(table);
        $(table).DataTable(options);
        $(table).addClass('dt-processed');
      });
    }

    function setupTableObserver() {
      const observer = new MutationObserver((mutations) => {
        let newTables = [];
        
        mutations.forEach(mutation => {
          if (mutation.addedNodes.length) {
            mutation.addedNodes.forEach(node => {

              if (node.nodeType === 1 && node.tagName === 'TABLE' && 
                  !$(node).hasClass('dt-processed') &&
                  ($(node).hasClass('sortable-table') || 
                   $(node).hasClass('searchable-table') || 
                   $(node).hasClass('sortable-searchable-table'))) {
                newTables.push(node);
              }
              
              if (node.nodeType === 1 && node.querySelectorAll) {
                const tablesInNode = node.querySelectorAll(
                'table.sortable-table:not(.dt-processed), ' +
                'table.searchable-table:not(.dt-processed), ' +
                'table.sortable-searchable-table:not(.dt-processed)');
                if (tablesInNode.length) {
                  newTables = [...newTables, ...tablesInNode];
                }
              }
            });
          }
        });

        if (newTables.length > 0) {
          initializeTables(newTables);
        }
      });
      
      // Start observing the entire document for changes
      observer.observe(document.body, {
        childList: true,
        subtree: true
      });
      
      return observer;
    }

    document.addEventListener('DOMContentLoaded', function() {
      // Process any existing tables
      const existingTables = document.querySelectorAll(
        'table.sortable-table:not(.dt-processed), ' +
        'table.searchable-table:not(.dt-processed), ' +
        'table.sortable-searchable-table:not(.dt-processed)'
      );
      if (existingTables.length > 0) {
        initializeTables(existingTables);
      }
      
      setupTableObserver();
    });

  </script>

    <script type="module">
    window.mermaidPromise = null;
    
    const loadMermaid = () => {
      if (window.mermaidPromise === null) {
        window.mermaidPromise = import('https://unpkg.com/mermaid@10/dist/mermaid.esm.min.mjs')
          .then(({ default: mermaid }) => {
            mermaid.initialize({
              startOnLoad: false,
            });
            console.log('Mermaid loaded successfully');
            return mermaid;
          })
          .catch((error) => {
            console.error('Mermaid failed to load:', error);
            window.mermaidPromise = false;
            return null;
          });
      }
      return window.mermaidPromise;
    };

    const renderMermaidDiagrams = (elements) => {
      if (!elements || elements.length === 0) {
        return Promise.resolve();
      }

      return loadMermaid().then(mermaid => {
        if (!mermaid) return;
        return mermaid.run({ nodes: Array.from(elements) })
          .catch(err => console.error('Error rendering mermaid diagrams:', err));
      });
    };

    const setupMermaidObserver = () => {
      const observer = new MutationObserver((mutations) => {
        let newMermaidElements = [];
        
        mutations.forEach(mutation => {
          if (mutation.addedNodes.length) {
            mutation.addedNodes.forEach(node => {
              if (node.nodeType === 1 && node.classList && 
                  node.classList.contains('mermaid')) {
                newMermaidElements.push(node);
              }
              
              if (node.nodeType === 1 && node.querySelectorAll) {
                const mermaidInNode = node.querySelectorAll('.mermaid');
                if (mermaidInNode.length) {
                  newMermaidElements = [...newMermaidElements, ...mermaidInNode];
                }
              }
            });
          }
        });
        
        if (newMermaidElements.length > 0) {
          renderMermaidDiagrams(newMermaidElements);
        }
      });
      
      observer.observe(document.body, {
        childList: true,
        subtree: true
      });
      
      return observer;
    };

    // Initialize on DOM content loaded
    document.addEventListener('DOMContentLoaded', () => {
      const existingDiagrams = document.querySelectorAll('.mermaid');
      if (existingDiagrams.length > 0) {
        renderMermaidDiagrams(existingDiagrams);
      }
      
      setupMermaidObserver();
    });

  </script>
</html>