Merge 2d50269730 into 21b24a1b78

2025-12-16 01:48:56 +08:00 · 2025-08-19 02:47:16 -07:00
3 changed files with 22 additions and 163 deletions
--- a/examples/index.css
+++ b/examples/index.css
@@ -1,19 +1,15 @@
@import url(https://fonts.googleapis.com/css?family=Khula:700);
 html {
  --toc-width: 250px;
 }
 body {
-  background-color: #EEE;
+  background-color:#EEE;
-  padding: 0px;
+  padding:0px;
-  margin: 0px;
+  margin:0px;
  font-family: Khula, Helvetica, sans-serif;
  font-size: 130%;
 }
 .page {
-  max-width: 1300px;
+  max-width:1300px;
  margin: auto;
  padding: 10px;
 }
@@ -24,7 +20,7 @@ a {
  margin: 0 -.25rem;
  padding: 0 .25rem;
  transition: color .3s ease-in-out,
-    box-shadow .3s ease-in-out;
+              box-shadow .3s ease-in-out;
 }
 a:hover {
@@ -34,48 +30,45 @@ a:hover {
 h1 {
  text-decoration: underline;
-  width: 100%;
+  width:100%;
-  background-color: rgba(100, 100, 255, 0.5);
+  background-color: rgba(100,100,255,0.5);
  padding: 10px;
  margin: 0;
 }
 #selectExample {
-  flex: 1;
+  flex:1;
 }
-#selectExample,
+#selectExample, #selectExample option {
 #selectExample option {
  font-size: 16px;
  font-family: sans-serif;
  font-weight: 700;
  line-height: 1.3;
-  border: 0px;
+  border:0px;
  background-color: #bbb;
-  color: black;
+  color:black;
 }
 #selectExample:focus {
-  outline: none;
+  outline:none;
 }
 #terminal {
-  width: 100%;
+  width:100%;
  height 500px;
  height: calc(clamp(200px, 100vh - 300px, 900px));
  overflow: hidden;
-  border: none;
+  border:none;
-  padding: 10px;
+  background-color:black;
  margin: 10px;
 }
 #terminalContainer {
  overflow: hidden;
  border-radius: 10px;
-  box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.75),
+  box-shadow: 0px 2px 10px 0px rgba(0,0,0,0.75),
-    0px 2px 80px 0px rgba(0, 0, 0, 0.50);
+  0px 2px 80px 0px rgba(0,0,0,0.50);
  background-color: black;
 }
 .fakeButtons {
@@ -83,7 +76,7 @@ h1 {
  width: 10px;
  border-radius: 50%;
  border: 1px solid #000;
-  margin: 6px;
+  margin:6px;
  background-color: #ff3b47;
  border-color: #9d252b;
  display: inline-block;
@@ -102,79 +95,13 @@ h1 {
 }
 .fakeMenu {
-  display: flex;
+  display:flex;
  flex-direction: row;
-  width: 100%;
+  width:100%;
  box-sizing: border-box;
  height: 25px;
  background-color: #bbb;
-  color: black;
+  color:black;
  margin: 0 auto;
  overflow: hidden;
 }
 .toc-container {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--toc-width);
  background: white;
  padding: 0;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
 }
 .toc-title {
  font-weight: bold;
  margin-bottom: 5px;
  font-size: 0.9em;
  color: #555;
  position: sticky;
  transition: position 1.0s ease-in-out;
  top: 0;
  z-index: 1;
  padding: 20px;
  margin: 0;
  border-bottom: 1px solid #ddd;
  /* Gradient background for the title */
  background-color: #f0f0f0;
 }
 .toc-item {
  padding: 3px 8px;
  margin: 0;
  cursor: pointer;
  font-size: 0.85em;
  border-radius: 3px;
  transition: background 0.2s;
 }
 .toc-item:hover {
  background: #f0f0f0;
 }
 .toc-item.selected {
  background: #e0e0e0;
  font-weight: bold;
 }
@media (max-width: 1024px) {
  .toc-container {
    display: none;
  }
  .page {
    margin-left: 0;
  }
 }
@media (min-width: 1025px) {
  .page {
    margin-left: calc(var(--toc-width) + 20px);
  }
 }
--- a/examples/index.html
+++ b/examples/index.html
@@ -9,18 +9,13 @@
    <script type="module" src="index.mjs"></script>
  </head>
  <body>
    <div class="toc-container">
      <div class="toc-list"></div>
    </div>
    <script id="example_script"></script>
    <div class="page">
      <p>
        <a href="https://github.com/ArthurSonzogni/FTXUI">FTXUI</a> is a simple
        functional C++ library for terminal user interface. <br/>
-        This showcases the: <a
+        This showcases the: <a href="https://github.com/ArthurSonzogni/FTXUI/tree/master/examples">./example/</a> folder. <br/>
          href="https://github.com/ArthurSonzogni/FTXUI/tree/master/examples">./example/</a>
        folder. See <a id="source">source</a>.
      </p>
      <div id="terminalContainer">
--- a/examples/index.mjs
+++ b/examples/index.mjs
@@ -92,69 +92,6 @@ window.Module = {
  },
 };
 const source = document.querySelector("#source");
 source.href = "https://github.com/ArthurSonzogni/FTXUI/blob/main/examples/" + example + ".cpp";
 const words = example.split('/')
 words[1] = "ftxui_example_" + words[1] + ".js"
 document.querySelector("#example_script").src = words.join('/');
 // Table of Contents (TOC) for quick navigation.
 // Get select element
 const selectEl = document.querySelector('select#selectExample');
 if (!selectEl) {
  console.error('select#selectExample not found');
 } else {
  // Get TOC container
  const tocContainer = document.querySelector('.toc-container');
  const tocList = tocContainer.querySelector('.toc-list');
  // Group options by directory
  const groupedOptions = Array.from(selectEl.options).reduce((acc, option) => {
    const [dir, file] = option.text.split('/');
    if (!acc[dir]) {
      acc[dir] = [];
    }
    acc[dir].push({ option, file });
    return acc;
  }, {});
  // Generate TOC items
  for (const dir in groupedOptions) {
    const dirContainer = document.createElement('div');
    const dirHeader = document.createElement('div');
    dirHeader.textContent = dir;
    dirHeader.className = 'toc-title';
    dirContainer.appendChild(dirHeader);
    groupedOptions[dir].forEach(({ option, file }) => {
      const tocItem = document.createElement('div');
      tocItem.textContent = file;
      tocItem.className = 'toc-item';
      if (selectEl.options[selectEl.selectedIndex].value === option.value) {
        tocItem.classList.add('selected');
      }
      // Click handler
      tocItem.addEventListener('click', () => {
        for(let i=0; i<selectEl.options.length; ++i) {
          if (selectEl.options[i].value == option.value) {
            selectEl.selectedIndex = i;
            break;
          }
        }
        history.pushState({}, "", "?file=" + option.value);
        location.reload();
      });
      dirContainer.appendChild(tocItem);
    });
    tocList.appendChild(dirContainer);
  }
 }''