Redesign website (#2628)

* Bump up Bootstrap to v5.3.1, Bootstrap Icon to v1.10.5.
* Use autoComplete.js to drop dependency on jQuery and typeahead.js.
* Support dark mode.
* New svg logo and icon with responsive color mode support.
* Normalize section ids to lower kebab-case for easiness of linking.
* Use relative paths for links for local development (--root /output).
* Various markup cleanups and accessibility improvements.
This commit is contained in:
itchyny authored and GitHub committed 2023-07-31 09:52:52 +09:00
1 parent 4af3f99728
commit c8e28da129
26 files changed
+402 -656

No files matched your search

+32 -50
View File
@@ -1,52 +1,34 @@
var section_names = function(q) {
if (!q) {
return [];
}
var matches = [];
q = q.toLowerCase();
$.each(section_map, function(k, v) {
if (k.toLowerCase().indexOf(q) != -1) {
matches.push(k);
(() => {
const searchInput = document.querySelector('input#searchbox');
const sectionIDs = JSON.parse(document.querySelector('#section-ids').innerText);
const sanitize = (string) => string.replaceAll('<', '&lt;').replaceAll('>', '&gt;');
new autoComplete({
selector: `#${searchInput.id}`,
wrapper: false,
data: {
src: Object.keys(sectionIDs),
filter: (list) => list.sort((x, y) =>
x.match.indexOf('<') - y.match.indexOf('<') || x.value.length - y.value.length),
},
searchEngine: (query, value) => {
const index = value.toLowerCase().indexOf(query.toLowerCase());
if (index >= 0) {
return sanitize(value.substring(0, index)) +
`<mark>${sanitize(value.substring(index, index + query.length))}</mark>` +
sanitize(value.substring(index + query.length));
}
},
});
searchInput.addEventListener('selection', (event) => {
event.target.value = event.detail.selection.value;
location.hash = `#${sectionIDs[event.detail.selection.value]}`;
});
document.addEventListener('keydown', (event) => {
if (event.code === 'Slash' && !event.altKey && !event.ctrlKey && !event.metaKey
&& !event.shiftKey && !/^(INPUT|TEXTAREA)$/.test(event.target.nodeName)) {
searchInput.focus();
searchInput.select();
event.preventDefault();
}
});
matches.sort(function(a, b) {
// shortest to longest
return a.length - b.length;
});
return matches;
}
var section_names_cb = function(q, cb) {
cb(section_names(q));
}
var go_to_section = function() {
query = $('#searchbox').val();
results = section_names(query);
if (results.length == 0) {
return;
}
result = results[0];
location.hash = '#' + section_map[result];
if (result != query) {
$('#searchbox').val(result);
}
}
$(function(){
$('#searchbox').typeahead(
{hint: false, highlight: true, minLength: 1},
{name: "contents", source: section_names_cb, limit: 6}
).on('typeahead:selected', function(e, data) {
go_to_section();
});
$('#searchbox').change(go_to_section);
});
// add "Run" button to execute examples on jqplay.org
$(function() {
$.each($('.manual-example table'), function(index, value) {
$value = $(value)
var j = $value.find('tr:nth-child(2) td:first').text();
var q = $value.find('.jqprogram').text().replace(/^jq /, '').replace(/(\r\n|\n|\r)/gm," ").replace(/^'(.+)'$/, '$1');
var url = 'https://jqplay.org/jq?q=' + encodeURIComponent(q) +'&j=' + encodeURIComponent(j)
var $last_tr = $value.find('tr:last');
$last_tr.after('<tr class="jqplay-btn"><th><a href="' + url + '" class="btn btn-primary btn-sm">Run</a></th><th></th></tr><tr><th></th><th></th></tr>');
});
});
})();