Better devex

Using ES6 modueles and adding a JS LSP to `flake.nix`
This commit is contained in:
April Eaton 2025-12-15 18:27:19 +01:00
parent 32ee2de008
commit 0abf209616
7 changed files with 42 additions and 12 deletions

View file

@ -35,6 +35,8 @@
http-server
prettier
vscode-langservers-extracted
typescript-language-server
typescript
];
};
};

View file

@ -7,17 +7,19 @@
<meta name="description" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
<!-- Place favicon.ico in the root directory -->
<link
href="https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&family=Truculenta:opsz,wght@12..72,100..900&display=swap"
rel="stylesheet"
/>
<link href="/global/global.css" rel="stylesheet" />
<script type="module" src="/global/loadin.mjs"></script>
<script type="module" src="/gear/page.mjs"></script>
<script type="module" src="/gear/gear.mjs"></script>
</head>
<body>
<!--[if lt IE 8]>
<p class="browserupgrade">
You are using an <strong>outdated</strong> browser. Please
<a href="http://browsehappy.com/">upgrade your browser</a> to improve
your experience.
</p>
<![endif]-->
<header id="hd-box"></header>
This will be my gear
<article id="gl-body"></article>
</body>
</html>

9
gear/page.mjs Normal file
View file

@ -0,0 +1,9 @@
import { attachGearList } from "/gear/gear.mjs";
import { loadHTML } from "/global/loadin.mjs";
export function loadDependencies() {
loadHTML("hd-box", "/header/header.html");
attachGearList("gl-body");
}
loadDependencies();

8
global/loadin.mjs Normal file
View file

@ -0,0 +1,8 @@
export function loadHTML(elementId, url) {
fetch(url)
.then((response) => response.text())
.then((data) => {
document.getElementById(elementId).innerHTML = data;
})
.catch((error) => console.error("Error loading HTML:", error));
}

View file

@ -14,11 +14,11 @@
/>
<link href="/global/global.css" rel="stylesheet" />
<script type="text/javascript" src="/global/loadin.js"></script>
<script type="text/javascript" src="/index.js"></script>
<script type="module" src="/global/loadin.mjs"></script>
<script type="module" src="/index.mjs"></script>
<!-- Place favicon.ico in the root directory -->
</head>
<body onload="loadDependencies()">
<body>
<!--[if lt IE 8]>
<p class="browserupgrade">
You are using an <strong>outdated</strong> browser. Please

8
index.mjs Normal file
View file

@ -0,0 +1,8 @@
// Landing page JS
import { loadHTML } from "/global/loadin.mjs";
function loadDependencies() {
loadHTML("hd-box", "/header/header.html");
}
loadDependencies();

1
kinks/kinks.mjs Normal file
View file

@ -0,0 +1 @@
// Kinks page JS