Bundling JS with ESBuild (#702)
* add npm dependencies used in this theme * implement helper to configure JS and ESBuild * migrate jquery popper.js bootstrap fontawesome to js bundle * refactor main.js into smaller pieces, and moved navbar.js to assets * remove list.js. It adjusts post card height to be the same, but is actually not needed. * refactored notes.js, search.js, single.js into application.js * move ityped to js asset, implement experiences horizontal vertical line in css * align recent post height via css * migrated home.js and refactored into various sections * migrated darkMode feature to js bundle * moved mermaid feature to js bundle * migrate syntax highlight to js bundle * migrate katex ( js portion ) to js bundle * migrate pdf-js to js bundle by delegating to cdn * set explicit comparisions for feature envvars so js can properly optimize * removed goat-counter * more fixes for broken achievements and small bugs * more bug fixes * allow configuration of hightlight.js, fix video-player shortcode * remove jquery all together * add null handling and fix merge conflicts Co-authored-by: Aaron Qian <aaron@yeet.io>
This commit is contained in:
Aaron Qian
GitHub
parent
fe14b0fbf5
commit
02db3d3044
491 changed files with 4919 additions and 151344 deletions
|
|
@ -1,185 +1,32 @@
|
|||
<!--
|
||||
{{ $url := .Get "src" }}
|
||||
{{ $hidePaginator := .Get "hidePaginator" | default "false" }}
|
||||
{{ $hideLoader := .Get "hidePaginator" | default "false" }}
|
||||
{{ $pageNum := .Get "renderPageNum" | default "1"}}
|
||||
|
||||
SPDX-License-Identifier: MIT
|
||||
<div
|
||||
class="pdf-viewer"
|
||||
data-url="{{ $url }}"
|
||||
data-hide-paginator="{{ $hidePaginator }}"
|
||||
data-hide-loader="{{ $hideLoader }}"
|
||||
data-page-num="{{ $pageNum }}"
|
||||
>
|
||||
<div class="paginator">
|
||||
<button class="prev">Previous</button>
|
||||
<button class="next">Next</button>
|
||||
<span>Page: <span class="page-num"></span> / <span class="page-count"></span></span>
|
||||
</div>
|
||||
|
||||
This shortcut was originally taken from: https://github.com/anvithks/hugo-embed-pdf-shortcode,
|
||||
where it is available under the MIT License, where it was originally created by https://github.com/anvithks
|
||||
|
||||
Since the project seems discontinued, it has been re-created here
|
||||
-->
|
||||
|
||||
<!-- Load the PDF-JS from the local folder (should be updated over time) -->
|
||||
<script src= '/js/pdf-js/build/pdf.js'></script>
|
||||
|
||||
<!-- Set the navigation menu -->
|
||||
<div id="paginator">
|
||||
<button id="prev">Previous</button>
|
||||
<button id="next">Next</button>
|
||||
|
||||
<span>Page: <span id="page_num"></span> / <span id="page_count"></span></span>
|
||||
<div class="embed-pdf-container">
|
||||
<div class="loading-wrapper">
|
||||
<div class="loading"></div>
|
||||
</div>
|
||||
<canvas class="pdf-canvas"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- And the canvas where the PDF will load -->
|
||||
<div id="embed-pdf-container">
|
||||
<div id="loadingWrapper">
|
||||
<div id="loading"></div>
|
||||
</div>
|
||||
<canvas id="the-canvas"></canvas>
|
||||
</div>
|
||||
|
||||
<!-- This script gets the PDF, sets it and passes it on to the already-loaded pdf-js -->
|
||||
<script type="text/javascript">
|
||||
window.onload = function() {
|
||||
// If absolute URL from the remote server is provided, configure the CORS
|
||||
// header on that server.
|
||||
var url = "{{.Site.BaseURL}}" + '{{ .Get "src" }}';
|
||||
|
||||
var hidePaginator = "{{ .Get "hidePaginator" }}" === "true";
|
||||
var hideLoader = "{{ .Get "hideLoader" }}" === "true";
|
||||
var selectedPageNum = parseInt("{{ .Get "renderPageNum" }}") || 1;
|
||||
|
||||
// Loaded via <script> tag, create shortcut to access PDF.js exports.
|
||||
var pdfjsLib = window['pdfjs-dist/build/pdf'];
|
||||
|
||||
// The workerSrc property shall be specified.
|
||||
pdfjsLib.GlobalWorkerOptions.workerSrc = "{{.Site.BaseURL}}" + '/js/pdf-js/build/pdf.worker.js';
|
||||
|
||||
// Change the Scale value for lower or higher resolution.
|
||||
var pdfDoc = null,
|
||||
pageNum = selectedPageNum,
|
||||
pageRendering = false,
|
||||
pageNumPending = null,
|
||||
scale = 3,
|
||||
canvas = document.getElementById('the-canvas'),
|
||||
ctx = canvas.getContext('2d'),
|
||||
paginator = document.getElementById("paginator"),
|
||||
loadingWrapper = document.getElementById('loadingWrapper');
|
||||
|
||||
|
||||
// Attempt to show paginator and loader if enabled
|
||||
showPaginator();
|
||||
showLoader();
|
||||
|
||||
/**
|
||||
* Get page info from document, resize canvas accordingly, and render page.
|
||||
* @param num Page number.
|
||||
*/
|
||||
function renderPage(num) {
|
||||
pageRendering = true;
|
||||
// Using promise to fetch the page
|
||||
pdfDoc.getPage(num).then(function(page) {
|
||||
var viewport = page.getViewport({scale: scale});
|
||||
canvas.height = viewport.height;
|
||||
canvas.width = viewport.width;
|
||||
|
||||
// Render PDF page into canvas context
|
||||
var renderContext = {
|
||||
canvasContext: ctx,
|
||||
viewport: viewport
|
||||
};
|
||||
var renderTask = page.render(renderContext);
|
||||
|
||||
// Wait for rendering to finish
|
||||
renderTask.promise.then(function() {
|
||||
pageRendering = false;
|
||||
showContent();
|
||||
|
||||
if (pageNumPending !== null) {
|
||||
// New page rendering is pending
|
||||
renderPage(pageNumPending);
|
||||
pageNumPending = null;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Update page counters
|
||||
document.getElementById('page_num').textContent = num;
|
||||
}
|
||||
|
||||
/**
|
||||
* Hides loader and shows canvas
|
||||
*/
|
||||
function showContent() {
|
||||
loadingWrapper.style.display = 'none';
|
||||
canvas.style.display = 'block';
|
||||
}
|
||||
|
||||
/**
|
||||
* If we haven't disabled the loader, show loader and hide canvas
|
||||
*/
|
||||
function showLoader() {
|
||||
if(hideLoader) return
|
||||
loadingWrapper.style.display = 'flex';
|
||||
canvas.style.display = 'none';
|
||||
}
|
||||
|
||||
/**
|
||||
* If we haven't disabled the paginator, show paginator
|
||||
*/
|
||||
function showPaginator() {
|
||||
if(hidePaginator) return
|
||||
paginator.style.display = 'block';
|
||||
}
|
||||
|
||||
/**
|
||||
* If another page rendering in progress, waits until the rendering is
|
||||
* finished. Otherwise, executes rendering immediately.
|
||||
*/
|
||||
function queueRenderPage(num) {
|
||||
if (pageRendering) {
|
||||
pageNumPending = num;
|
||||
} else {
|
||||
renderPage(num);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Displays previous page.
|
||||
*/
|
||||
function onPrevPage() {
|
||||
if (pageNum <= 1) {
|
||||
return;
|
||||
}
|
||||
pageNum--;
|
||||
queueRenderPage(pageNum);
|
||||
}
|
||||
document.getElementById('prev').addEventListener('click', onPrevPage);
|
||||
|
||||
/**
|
||||
* Displays next page.
|
||||
*/
|
||||
function onNextPage() {
|
||||
if (pageNum >= pdfDoc.numPages) {
|
||||
return;
|
||||
}
|
||||
pageNum++;
|
||||
queueRenderPage(pageNum);
|
||||
}
|
||||
document.getElementById('next').addEventListener('click', onNextPage);
|
||||
|
||||
/**
|
||||
* Asynchronously downloads PDF.
|
||||
*/
|
||||
pdfjsLib.getDocument(url).promise.then(function(pdfDoc_) {
|
||||
pdfDoc = pdfDoc_;
|
||||
var numPages = pdfDoc.numPages;
|
||||
document.getElementById('page_count').textContent = numPages;
|
||||
|
||||
// If the user passed in a number that is out of range, render the last page.
|
||||
if(pageNum > numPages) {
|
||||
pageNum = numPages
|
||||
}
|
||||
|
||||
// Initial/first page rendering
|
||||
renderPage(pageNum);
|
||||
});
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<!-- Finally, make the canvas more beautiful -->
|
||||
<style>
|
||||
#the-canvas {
|
||||
.pdf-viewer canvas {
|
||||
border: 1px solid black;
|
||||
direction: ltr;
|
||||
width: 100%;
|
||||
|
|
@ -187,13 +34,13 @@ pdfjsLib.getDocument(url).promise.then(function(pdfDoc_) {
|
|||
display: none;
|
||||
}
|
||||
|
||||
#paginator {
|
||||
.pdf-viewer .paginator {
|
||||
display: none;
|
||||
text-align: center;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
#loadingWrapper {
|
||||
.pdf-viewer .loading-wrapper {
|
||||
display: none;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
|
@ -201,7 +48,7 @@ pdfjsLib.getDocument(url).promise.then(function(pdfDoc_) {
|
|||
height: 350px;
|
||||
}
|
||||
|
||||
#loading {
|
||||
.pdf-viewer .loading {
|
||||
display: inline-block;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue