Enable lint for website folder
MODIFY
package.json
package.json
"type-libs",
"lib/modules.js",
"prelude.ts",
- "website",
"@romejs-web",
"out",
+ "website/.eleventy.js",
"vscode/node_modules"
]
}

MODIFY
website/.eleventy.js
website/.eleventy.js
@@ -2,7 +2,7 @@ const syntaxHighlight = require("@11ty/eleventy-plugin-syntaxhighlight");
const markdownIt = require("markdown-it");
const markdownItAnchor = require("markdown-it-anchor");
const fs = require("fs");
-const pluginTOC = require('eleventy-plugin-nesting-toc');
+const pluginTOC = require("eleventy-plugin-nesting-toc");
const path = require("path");
const opts = {
@@ -11,8 +11,8 @@ const opts = {
docsPath: "_includes/docs",
dirOutput: "build",
toc: {
- headingText: 'test', // Optional text to show in heading above the wrapper element
- }
+ headingText: "test", // Optional text to show in heading above the wrapper element
+ },
};
module.exports = function(eleventyConfig) {
@@ -29,23 +29,32 @@ module.exports = function (eleventyConfig) {
html: true,
linkify: true,
typographer: true,
- }).use(markdownItAnchor, {
+ }).use(
+ markdownItAnchor,
+ {
permalink: true,
- permalinkSymbol: '#'
- });
+ permalinkSymbol: "#",
+ },
+ );
eleventyConfig.setLibrary("md", md);
- eleventyConfig.addShortcode("rootmd", function (file) {
- const relativeFilePath = path.join(__dirname, '..', file);
- const data = fs.readFileSync(relativeFilePath, function (err, contents) {
+ eleventyConfig.addShortcode(
+ "rootmd",
+ function(file) {
+ const relativeFilePath = path.join(__dirname, "..", file);
+ const data = fs.readFileSync(
+ relativeFilePath,
+ function(err, contents) {
if (err) {
throw new Error(err);
}
return contents;
- });
+ },
+ );
return md.render(data.toString());
- });
+ },
+ );
return {
dir: {

MODIFY
website/src/_data/config.js
website/src/_data/config.js
module.exports = {
- description: 'An experimental JavaScript toolchain',
+ description: "An experimental JavaScript toolchain",
og: {
- title: 'An experimental JavaScript toolchain | Rome',
- description: 'An experimental JavaScript toolchain',
- image: '/static/img/rome-logo-black.svg',
+ title: "An experimental JavaScript toolchain | Rome",
+ description: "An experimental JavaScript toolchain",
+ image: "/static/img/rome-logo-black.svg",
},
twitter: {
- image: '/static/img/rome-logo-black.svg',
- imageAlt: 'Image for An experimental JavaScript toolchain | Rome',
- card: 'summary_large_image',
+ image: "/static/img/rome-logo-black.svg",
+ imageAlt: "Image for An experimental JavaScript toolchain | Rome",
+ card: "summary_large_image",
},
};

MODIFY
website/static/js/index.js
website/static/js/index.js
const elements = {
- mobileHandle: document.getElementsByClassName('mobile-handle')[0],
- toc: document.getElementsByClassName('toc-container')[0],
- tocLinks: [...document.querySelectorAll('.toc-container a')],
- sidebar: document.getElementsByClassName('sidebar')[0],
- sidebarRight: document.querySelectorAll('.sidebar.right')[0],
- overlay: document.getElementsByClassName('overlay')[0],
- headings: [...document.querySelectorAll('.content h1, .content h2')],
- headerMobile: document.getElementsByClassName('header-mobile')[0],
- colorSchemeSwitch: document.getElementById('color-scheme-switch'),
- colorSchemeSwitchText: document.getElementById('color-scheme-switch-text'),
+ mobileHandle: document.getElementsByClassName("mobile-handle")[0],
+ toc: document.getElementsByClassName("toc-container")[0],
+ tocLinks: [...document.querySelectorAll(".toc-container a")],
+ sidebar: document.getElementsByClassName("sidebar")[0],
+ sidebarRight: document.querySelectorAll(".sidebar.right")[0],
+ overlay: document.getElementsByClassName("overlay")[0],
+ headings: [...document.querySelectorAll(".content h1, .content h2")],
+ headerMobile: document.getElementsByClassName("header-mobile")[0],
+ colorSchemeSwitch: document.getElementById("color-scheme-switch"),
+ colorSchemeSwitchText: document.getElementById("color-scheme-switch-text"),
};
function isMobile() {
- return elements.sidebar.classList.contains('visible') || /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
+ return (
+ elements.sidebar.classList.contains("visible") ||
+ /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
+ navigator.userAgent,
+ )
+ );
}
const toc = {
currentH1Link: null,
getMobileNavbarHeight() {
-
if (isMobile()) {
- return parseFloat(window.getComputedStyle(elements.headerMobile).height, 10);
+ return parseFloat(
+ window.getComputedStyle(elements.headerMobile).height,
+ 10,
+ );
}
return 0;
},
highlight() {
-
- var scrollY = window.scrollY;
+ const scrollY = window.scrollY;
for (let i = 0; i < elements.headings.length; i++) {
const element = elements.headings[i];
- const id = `#${element.getAttribute('id')}`;
+ const id = `#${element.getAttribute("id")}`;
const y = element.offsetTop;
- const marginTop = parseFloat(window.getComputedStyle(element).marginTop, 10);
+ const marginTop = parseFloat(
+ window.getComputedStyle(element).marginTop,
+ 10,
+ );
const height = parseFloat(window.getComputedStyle(element).marginTop, 10);
const link = document.querySelectorAll(`.toc-container a[href='${id}']`)[0];
@@ -44,25 +53,22 @@ const toc = {
let end = y + height + marginTop;
if (nextElement) {
- const nextMarginTop = parseFloat(window.getComputedStyle(nextElement).marginTop, 10);
- end = (nextElement.offsetTop - nextMarginTop);
+ const nextMarginTop = parseFloat(
+ window.getComputedStyle(nextElement).marginTop,
+ 10,
+ );
+ end = nextElement.offsetTop - nextMarginTop;
}
start -= toc.getMobileNavbarHeight();
end -= toc.getMobileNavbarHeight();
if (scrollY > start && scrollY < end) {
-
- link.classList.add('active');
-
+ link.classList.add("active");
} else {
-
- link.classList.remove('active');
-
+ link.classList.remove("active");
}
-
}
-
},
handleClick(event) {
const target = event.target;
@@ -71,7 +77,6 @@ const toc = {
const hash = target.getAttribute("href");
if (target.hasAttribute("href")) {
-
window.location.hash = hash;
scrollToHeading(hash);
@@ -79,25 +84,28 @@ const toc = {
if (isMobile()) {
mobileToggleEvent(event);
}
-
}
},
-}
+};
function scrollToHeading(hash) {
- const heading = document.getElementById(hash.replace(/^(#)/,''));
+ const heading = document.getElementById(hash.replace(/^(#)/, ""));
- if(!heading) return null;
+ if (!heading) {
+ return null;
+ }
- heading.setAttribute('tabindex','-1');
+ heading.setAttribute("tabindex", "-1");
heading.focus();
const marginTop = parseFloat(window.getComputedStyle(heading).marginTop, 10);
- window.scrollTo(0, (heading.offsetTop) - toc.getMobileNavbarHeight() - (marginTop - 2));
+ window.scrollTo(
+ 0,
+ heading.offsetTop - toc.getMobileNavbarHeight() - (marginTop - 2),
+ );
}
function handleScroll() {
-
if (isMobile()) {
return false;
}
@@ -105,88 +113,90 @@ function handleScroll(){
toc.highlight();
if (window.scrollY > 6) {
- elements.sidebar.style['border-top-width'] = '5.3333333333px';
+ elements.sidebar.style["border-top-width"] = "5.3333333333px";
} else {
- elements.sidebar.style['border-top-width'] = '0px';
+ elements.sidebar.style["border-top-width"] = "0px";
}
-
}
function mobileToggleEvent(event) {
const bodyClassList = document.body.classList;
event.preventDefault();
- elements.sidebar.classList.toggle('visible');
- elements.sidebarRight.classList.toggle('visible');
- elements.overlay.classList.toggle('visible');
- bodyClassList.toggle('no-scroll');
+ elements.sidebar.classList.toggle("visible");
+ elements.sidebarRight.classList.toggle("visible");
+ elements.overlay.classList.toggle("visible");
+ bodyClassList.toggle("no-scroll");
toc.highlight();
}
-function modeSwitch(event){
-
+function modeSwitch() {
const $doc = document.documentElement;
- let theme = $doc.getAttribute('data-theme');
+ let theme = $doc.getAttribute("data-theme");
- if(theme === 'light'){
+ if (theme === "light") {
elements.colorSchemeSwitchText.innerText = "Light Mode";
- theme = 'dark';
+ theme = "dark";
} else {
elements.colorSchemeSwitchText.innerText = "Dark Mode";
- theme = 'light';
+ theme = "light";
}
- $doc.setAttribute('data-theme', theme);
- window.localStorage.setItem('data-theme', theme);
-
+ $doc.setAttribute("data-theme", theme);
+ window.localStorage.setItem("data-theme", theme);
}
-const themeInStorage = window.localStorage.getItem('data-theme');
+const themeInStorage = window.localStorage.getItem("data-theme");
if (themeInStorage) {
-
if (themeInStorage === "dark") {
elements.colorSchemeSwitchText.innerText = "Light Mode";
}
-
}
//remove permalinkSymbol "#" from table of contents
elements.tocLinks.forEach(function(link) {
- link.innerText = link.innerText.replace(/(\s#)$/,'');
+ link.innerText = link.innerText.replace(/(\s#)$/, "");
});
window.onload = function() {
- if(window.location.hash !== ''){
+ if (window.location.hash !== "") {
scrollToHeading(window.location.hash);
}
toc.highlight();
-}
-
-document.addEventListener('click', function (event) {
+};
- if (!event.target.matches('.header-anchor')) return;
+document.addEventListener(
+ "click",
+ function(event) {
+ if (!event.target.matches(".header-anchor")) {
+ return;
+ }
event.preventDefault();
- const hash = event.target.getAttribute('href');
+ const hash = event.target.getAttribute("href");
window.location.hash = hash;
scrollToHeading(hash);
+ },
+ false,
+);
-}, false);
-
-elements.toc.addEventListener('click', toc.handleClick, false);
-elements.mobileHandle.addEventListener('click', mobileToggleEvent, false);
-elements.overlay.addEventListener('click', mobileToggleEvent, false);
+elements.toc.addEventListener("click", toc.handleClick, false);
+elements.mobileHandle.addEventListener("click", mobileToggleEvent, false);
+elements.overlay.addEventListener("click", mobileToggleEvent, false);
elements.overlay.addEventListener("touchstart", mobileToggleEvent, false);
-window.addEventListener('scroll', handleScroll, false);
+window.addEventListener("scroll", handleScroll, false);
-elements.colorSchemeSwitch.addEventListener('click', modeSwitch, false);
+elements.colorSchemeSwitch.addEventListener("click", modeSwitch, false);
const homepageExample = document.querySelector(".homepage-example");
if (homepageExample !== undefined) {
- homepageExample.addEventListener("click", () => {
+ homepageExample.addEventListener(
+ "click",
+ () => {
homepageExample.classList.remove("collapsed");
- });
+ },
+ );
}

Enable lint for website folder (#690)