kholmogorov27 / chevron

Powerful and highly functional startpage integrated with chatGPT and hidden under the super minimalistic and animated design (static/hosted/github pages)
https://kholmogorov27.github.io/chevron/
MIT License
338 stars 95 forks source link

Implement a help macro #22

Open clorl opened 1 year ago

clorl commented 1 year ago

Default help macro that would redirect to a local view, which is a list of macros. It helps to keep in mind what macros we have. It would just be an app that displays the macro dic in a fancy way

clorl commented 1 year ago

For anyone looking for this I wipped up a quick poc. Plop this in your chevron folder

<!DOCTYPE html>
<html lang="en">
  <head>
    <title></title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
      <link href="https://cdn.jsdelivr.net/npm/daisyui@3.5.1/dist/full.css" rel="stylesheet" type="text/css" />
      <script src="https://cdn.tailwindcss.com"></script>

  </head>
  <body>
    <div class="container mx-auto columns-1 ">
      <h1 class="text-8xl font-extrabold text-slate-300">Macros Help</h1>

      <table class="table  mx-auto table-auto text-lg">
        <thead>
          <tr>
            <th class="">Name</th>
            <th class="">Triggers</th>
            <th class="max-w-s text-center">Search?</th>
            <th class="max-w-s text-center">Goto?</th>
          </tr>
        </thead>
        <tbody>

        </tbody>
      </table>
    </div>

    <script src="./config.js"></script>
    <script>
    const check = '<span class="text-green-400">✓</span>'
    const cross = '<span class="text-red-400">x</span>'

    const table = document.querySelector('tbody');
    let prevCat = "";
    for (const m of window.CONFIG.macros.sort(e => e.category)) {
      if (m.category !== prevCat) {
        prevCat = m.category;

        const catTemplate = `
        <td colspan="4" class="py-3 my-3 text-extrabold text-xl bg-zinc-900">${m.category}</td>
        `
          table.innerHTML += catTemplate;
    }

      const template = `
        <tr>
          <td>${m.name}</td>
<td><code>${m.triggers.join(", ")}</code></td>
          <td class="text-center">${m.commands && m.commands.search ? check : cross}</td>
          <td class="text-center">${m.commands && m.commands.go ? check : cross}</td>
        </tr>
        `
        table.innerHTML += template;
    }
    </script>
  </body>
</html>