| swissChili | 1c16681 | 2022-07-16 21:57:06 -0700 | [diff] [blame^] | 1 | <!DOCTYPE html> |
| 2 | |
| 3 | <div class="wrapper"> |
| 4 | <input type="text" id="searchbox" placeholder="Search RISC-V Instructions"></input> |
| 5 | </div> |
| 6 | |
| 7 | <div id="ilist"> |
| 8 | </div> |
| 9 | |
| 10 | <hr> |
| 11 | |
| 12 | <p class="cite"> |
| 13 | These listings are generated from documentation written |
| 14 | by <a href="https://hg.sr.ht/~icefox/riscv-reference">~icefox</a> |
| 15 | on sourcehut. Website created by <a href="https://swisschili.sh">swissChili</a>. |
| 16 | </p> |
| 17 | <p class="cite"> |
| 18 | This documentation is incomplete for now. Check the ~icefox link |
| 19 | for what is currently implemented. |
| 20 | </p> |
| 21 | |
| 22 | <style> |
| 23 | body { |
| 24 | font-family: sans-serif; |
| 25 | max-width: 50em; |
| 26 | margin: auto; |
| 27 | padding: 10px; |
| 28 | } |
| 29 | |
| 30 | dt { |
| 31 | font-weight: bold; |
| 32 | } |
| 33 | |
| 34 | dd div, |
| 35 | #searchbox { |
| 36 | background: #fcfaf2; |
| 37 | padding: 4px; |
| 38 | border-radius: 4px; |
| 39 | border: 1px solid #f4f2e8; |
| 40 | } |
| 41 | |
| 42 | #searchbox { |
| 43 | font-size: 14pt; |
| 44 | padding: 12px 20px; |
| 45 | width: min-content; |
| 46 | } |
| 47 | |
| 48 | .wrapper { |
| 49 | width: 100%; |
| 50 | display: flex; |
| 51 | justify-content: center; |
| 52 | margin-bottom: 4em; |
| 53 | margin-top: 2em; |
| 54 | } |
| 55 | |
| 56 | .cite { |
| 57 | font-style: italic; |
| 58 | text-align: center; |
| 59 | } |
| 60 | |
| 61 | hr { |
| 62 | border-color: #CCC; |
| 63 | } |
| 64 | </style> |
| 65 | |
| 66 | <script> |
| 67 | function setup(instructions) |
| 68 | { |
| 69 | console.log(instructions); |
| 70 | |
| 71 | function handler() |
| 72 | { |
| 73 | let html = ""; |
| 74 | |
| 75 | console.log("searched"); |
| 76 | |
| 77 | let q = searchbox.value.toLowerCase(); |
| 78 | |
| 79 | console.log({q}); |
| 80 | |
| 81 | for (let item of instructions) |
| 82 | { |
| 83 | if (!item.mnemonic.toLowerCase().includes(q) && |
| 84 | !item.name.toLowerCase().includes(q)) |
| 85 | continue; |
| 86 | |
| 87 | let desc = item.long_description.replace("\n\n", "</p><p>"); |
| 88 | |
| 89 | html += ` |
| 90 | <dt>${item.mnemonic} - ${item.name}</dt> |
| 91 | <dd> |
| 92 | <div>encoding: ${item.encoding}, extension: ${item.extension}, opcode: ${item.opcode}</div> |
| 93 | <p>${desc}</p> |
| 94 | </dd> |
| 95 | `; |
| 96 | } |
| 97 | |
| 98 | ilist.innerHTML = html; |
| 99 | }; |
| 100 | |
| 101 | searchbox.addEventListener("input", handler); |
| 102 | handler(); |
| 103 | } |
| 104 | |
| 105 | fetch("instructions.json") |
| 106 | .then(res => res.json()) |
| 107 | .then(setup); |
| 108 | </script> |