Skip to content

Commit

Permalink
chore: improves example index page
Browse files Browse the repository at this point in the history
  • Loading branch information
HoyosJuan committed Aug 13, 2024
1 parent 5de15cc commit e71c797
Show file tree
Hide file tree
Showing 4 changed files with 148 additions and 27 deletions.
94 changes: 67 additions & 27 deletions index.html
Original file line number Diff line number Diff line change
@@ -1,29 +1,69 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Examples Index</title>
<style>
* {
margin: 0;
}

html {
font-family: sans-serif;
}

body {
padding: 1rem;
}
</style>
</head>

<body>
<div style="display: flex; flex-direction: column; gap: 1rem;">
<h3>Choose an example</h3>
<a style="width: fit-content;" href="./packages\front\src\measurement\VolumeMeasurement\example.html">front/VolumeMeasurement</a>
<a style="width: fit-content;" href="./packages\front\src\measurement\LengthMeasurement\example.html">front/LengthMeasurement</a>
<a style="width: fit-content;" href="./packages\front\src\measurement\FaceMeasurement\example.html">front/FaceMeasurement</a>
<a style="width: fit-content;" href="./packages\front\src\measurement\EdgeMeasurement\example.html">front/EdgeMeasurement</a>
<a style="width: fit-content;" href="./packages\front\src\measurement\AreaMeasurement\example.html">front/AreaMeasurement</a>
<a style="width: fit-content;" href="./packages\front\src\measurement\AngleMeasurement\example.html">front/AngleMeasurement</a>
<a style="width: fit-content;" href="./packages\front\src\fragments\Plans\example.html">front/Plans</a>
<a style="width: fit-content;" href="./packages\front\src\fragments\IfcStreamer\example.html">front/IfcStreamer</a>
<a style="width: fit-content;" href="./packages\front\src\fragments\Highlighter\example.html">front/Highlighter</a>
<a style="width: fit-content;" href="./packages\front\src\core\ShadowDropper\example.html">front/ShadowDropper</a>
<a style="width: fit-content;" href="./packages\front\src\core\PostproductionRenderer\example.html">front/PostproductionRenderer</a>
<a style="width: fit-content;" href="./packages\front\src\core\Marker\example.html">front/Marker</a>
<a style="width: fit-content;" href="./packages\front\src\core\ClipEdges\example.html">front/ClipEdges</a>
<a style="width: fit-content;" href="./packages\front\src\civil\CivilPlanNavigator\example.html">front/CivilPlanNavigator</a>
<a style="width: fit-content;" href="./packages\front\src\civil\CivilElevationNavigator\example.html">front/CivilElevationNavigator</a>
<a style="width: fit-content;" href="./packages\front\src\civil\CivilCrossSectionNavigator\example.html">front/CivilCrossSectionNavigator</a>
<a style="width: fit-content;" href="./packages\front\src\civil\Civil3DNavigator\example.html">front/Civil3DNavigator</a>
<a style="width: fit-content;" href="./packages\core\src\measurement\MeasurementUtils\example.html">core/MeasurementUtils</a>
<a style="width: fit-content;" href="./packages\core\src\ifc\IfcRelationsIndexer\example.html">core/IfcRelationsIndexer</a>
<a style="width: fit-content;" href="./packages\core\src\ifc\IfcPropertiesManager\example.html">core/IfcPropertiesManager</a>
<a style="width: fit-content;" href="./packages\core\src\ifc\IfcJsonExporter\example.html">core/IfcJsonExporter</a>
<a style="width: fit-content;" href="./packages\core\src\fragments\IfcPropertiesTiler\example.html">core/IfcPropertiesTiler</a>
<a style="width: fit-content;" href="./packages\core\src\fragments\IfcLoader\example.html">core/IfcLoader</a>
<a style="width: fit-content;" href="./packages\core\src\fragments\IfcGeometryTiler\example.html">core/IfcGeometryTiler</a>
<a style="width: fit-content;" href="./packages\core\src\fragments\Hider\example.html">core/Hider</a>
<a style="width: fit-content;" href="./packages\core\src\fragments\FragmentsManager\example.html">core/FragmentsManager</a>
<a style="width: fit-content;" href="./packages\core\src\fragments\Exploder\example.html">core/Exploder</a>
<a style="width: fit-content;" href="./packages\core\src\fragments\Classifier\example.html">core/Classifier</a>
<a style="width: fit-content;" href="./packages\core\src\fragments\BoundingBoxer\example.html">core/BoundingBoxer</a>
<a style="width: fit-content;" href="./packages\core\src\core\Worlds\example.html">core/Worlds</a>
<a style="width: fit-content;" href="./packages\core\src\core\ShadowedScene\example.html">core/ShadowedScene</a>
<a style="width: fit-content;" href="./packages\core\src\core\Raycasters\example.html">core/Raycasters</a>
<a style="width: fit-content;" href="./packages\core\src\core\OrthoPerspectiveCamera\example.html">core/OrthoPerspectiveCamera</a>
<a style="width: fit-content;" href="./packages\core\src\core\MiniMap\example.html">core/MiniMap</a>
<a style="width: fit-content;" href="./packages\core\src\core\Grids\example.html">core/Grids</a>
<a style="width: fit-content;" href="./packages\core\src\core\Cullers\example.html">core/Cullers</a>
<a style="width: fit-content;" href="./packages\core\src\core\Clipper\example.html">core/Clipper</a>

<body>
<h2>
If you're developing, append the package and component folder to the URL in order to see the example working without
compiling. For example: <a id="dev"></a>
</h2>
<h2>
To see the compiled example after you run yarn build, append the name of the component at the end of the URL. For
example: <a id="exp"></a>
</h2>
<script>
const dev = document.getElementById("dev")
dev.href = location.href + "packages/core/src/core/Worlds/example.html"
dev.textContent = dev.href.replace(location.href, "")

const exp = document.getElementById("exp")
exp.href = location.href + "examples/Worlds/"
exp.textContent = exp.href.replace(location.href, "")
</script>
</body>

</html>
</div>
</body>

</html>

1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,7 @@
"./packages/*"
],
"devDependencies": {
"@types/node": "latest",
"@typescript-eslint/eslint-plugin": "7.2.0",
"@typescript-eslint/parser": "7.2.0",
"eslint": "8.57.0",
Expand Down
63 changes: 63 additions & 0 deletions vite.config.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,63 @@
/* eslint-disable import/no-extraneous-dependencies */
import * as fs from "fs";
import * as path from "path";
import { defineConfig } from "vite";
import { globSync } from "glob";

const writeIndexHTML = () => {
let links: string = "";
const examplePaths = globSync("packages/**/src/**/example.html");
for (const examplePath of examplePaths) {
const directory = path.dirname(examplePath);
const packageNameMatch = directory.match(/packages\\([^\\]+)/);
if (!(packageNameMatch && packageNameMatch.length > 1)) continue;
const packageName = packageNameMatch[1];
const exampleName = path.basename(directory);
links += `<a style="width: fit-content;" href="./${examplePath}">${packageName}/${exampleName}</a>\n`;
}
const index = `
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Examples Index</title>
<style>
* {
margin: 0;
}
html {
font-family: sans-serif;
}
body {
padding: 1rem;
}
</style>
</head>
<body>
<div style="display: flex; flex-direction: column; gap: 1rem;">
<h3>Choose an example</h3>
${links}
</div>
</body>
</html>
`;
fs.writeFileSync("./index.html", index);
};

const createIndex = () => ({
name: "create-index",
configureServer() {
// fs.watch("./packages", { recursive: true }, writeIndexHTML);
writeIndexHTML();
},
});

export default defineConfig({
plugins: [createIndex()],
});
17 changes: 17 additions & 0 deletions yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -733,6 +733,15 @@ __metadata:
languageName: node
linkType: hard

"@types/node@npm:latest":
version: 22.2.0
resolution: "@types/node@npm:22.2.0"
dependencies:
undici-types: ~6.13.0
checksum: 63724799337bfb57719a1992690e738341d824e1744a2ac52c5278a008fbfadf99765519c19858feb80418cc7da0d5c8bdf7ea4d82973869b3882bd602c48ade
languageName: node
linkType: hard

"@types/semver@npm:^7.5.0":
version: 7.5.8
resolution: "@types/semver@npm:7.5.8"
Expand Down Expand Up @@ -3614,6 +3623,7 @@ __metadata:
version: 0.0.0-use.local
resolution: "root-workspace-0b6124@workspace:."
dependencies:
"@types/node": latest
"@typescript-eslint/eslint-plugin": 7.2.0
"@typescript-eslint/parser": 7.2.0
eslint: 8.57.0
Expand Down Expand Up @@ -4159,6 +4169,13 @@ __metadata:
languageName: node
linkType: hard

"undici-types@npm:~6.13.0":
version: 6.13.0
resolution: "undici-types@npm:6.13.0"
checksum: 9d0ef6bf58994bebbea6a4ab75f381c69a89a7ed151bfbae0d4ef95450d56502c9eccb323abf17b7d099c1d9c1cbae62e909e4dfeb8d204612d2f1fdada24707
languageName: node
linkType: hard

"unique-filename@npm:^3.0.0":
version: 3.0.0
resolution: "unique-filename@npm:3.0.0"
Expand Down

0 comments on commit e71c797

Please sign in to comment.