Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

trying out an iframe nav experiment, still a mess #9

Draft
wants to merge 1 commit into
base: main
Choose a base branch
from
Draft

trying out an iframe nav experiment, still a mess #9

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion packages/cli/src/assets/scripts/.gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1 @@
*.js
site.min.js
20 changes: 20 additions & 0 deletions packages/cli/src/assets/scripts/iframehelper.min.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
document.addEventListener('DOMContentLoaded', function() {

const myTitle = window.document.title;
var element = document.getElementById('myInner');
if (typeof(element) != 'undefined' && element != null) {
window.myInner.onload = function () {
//window.myDetails.open = false;
window.document.title = this.contentWindow.document.title + " - " + myTitle;
window.history.replaceState(null, null, "#" + this.contentWindow.location);
};

window.onhashchange = function () {
window.myInner.contentWindow.location = window.location.hash.startsWith("#")
? window.location.hash.slice(1)
: "indexcontent.html";
}

window.onhashchange();
}
}, false);
52 changes: 49 additions & 3 deletions packages/cli/src/commands/make-site.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ import * as path from "node:path";
import * as url from "node:url";
import fontAssetFilePath from "../assets/fonts/iosevka-aile-custom-light.woff2";
import scriptAssetFilePath from "../assets/scripts/site.min.js";
import iframehelperAssetFilePath from "../assets/scripts/iframehelper.min.js";
import { printDiagnosticsAndExitOnError } from "../diagnostics.js";
import { Project } from "../model/project.js";
import { TextFile } from "../model/textfile.js";
Expand All @@ -36,6 +37,7 @@ const ERROR_FILE_NAME = "404.html";
const CSS_FILE_NAME = "style.css";
const FONT_FILE_NAME = path.basename(fontAssetFilePath);
const SCRIPT_FILE_NAME = path.basename(scriptAssetFilePath);
const IFRAMEHELPER_FILE_NAME = path.basename(iframehelperAssetFilePath);

class Website implements RenderContext {
readonly dataset: ParsedTriple[][] = [];
Expand Down Expand Up @@ -124,7 +126,7 @@ class Website implements RenderContext {
}
}

function renderIndex(context: Website, links: HtmlContent, scripts: HtmlContent, navigation: HtmlContent): HtmlContent {
function renderWrapper(context: Website, links: HtmlContent, scripts: HtmlContent, navigation: HtmlContent): HtmlContent {
return <html lang="en-US">
<head>
<meta charset="utf-8" />
Expand All @@ -136,6 +138,21 @@ function renderIndex(context: Website, links: HtmlContent, scripts: HtmlContent,
<nav>
{navigation}
</nav>
<main>
<iframe id="myInner" name="inner"></iframe>
</main>
</body>
</html>;
}
function renderIndex(context: Website, links: HtmlContent, scripts: HtmlContent, navigation: HtmlContent): HtmlContent {
return <html lang="en-US">
<head>
<meta charset="utf-8" />
<title>{context.title}</title>
{links}
{scripts}
</head>
<body>
<main>
<section>
<h1>{context.title}</h1>
Expand Down Expand Up @@ -202,6 +219,31 @@ function renderPage(iri: string, context: Website, links: HtmlContent, scripts:
</html>;
}

function renderNavlessPage(iri: string, context: Website, links: HtmlContent, scripts: HtmlContent): HtmlContent {
const subject: IRIOrBlankNode = iri.startsWith("http://example.com/.well-known/genid/")
? BlankNode.create(iri.slice("http://example.com/.well-known/genid/".length))
: IRI.create(iri);

const prefixedName = context.lookupPrefixedName(subject.value);
const title = prefixedName ? prefixedName.prefixLabel + ":" + prefixedName.localName : "<" + subject.value + ">";

const main = renderMain(subject, iri in context.documents ? context.documents[iri] : null, context);

return <html lang="en-US">
<head>
<meta charset="utf-8" />
<title>{title} &ndash; {context.title}</title>
{links}
{scripts}
</head>
<body>
<main>
{main}
</main>
</body>
</html>;
}

function resolveHref(url: string, base: string): string {
const root = new URL("/", base).href;
const result = new URL(url, base).href;
Expand Down Expand Up @@ -236,13 +278,16 @@ export default function main(options: Options): void {

const scripts = <>
<script src={resolveHref(SCRIPT_FILE_NAME, context.baseURL)}></script>
<script src={resolveHref(IFRAMEHELPER_FILE_NAME, context.baseURL)}></script>
</>;

const navigation = renderNavigation(context.title, context);

site.write(CSS_FILE_NAME, fs.readFileSync(path.format({ ...path.parse(moduleFilePath), base: "", ext: ".css" })));
site.write(FONT_FILE_NAME, fs.readFileSync(path.resolve(modulePath, fontAssetFilePath)));
site.write(SCRIPT_FILE_NAME, fs.readFileSync(path.resolve(modulePath, scriptAssetFilePath)));
site.write(IFRAMEHELPER_FILE_NAME, fs.readFileSync(path.resolve(modulePath, iframehelperAssetFilePath)));


for (const iconConfig of icons) {
site.write(path.basename(iconConfig.asset), project.package.read(iconConfig.asset));
Expand All @@ -252,10 +297,11 @@ export default function main(options: Options): void {
site.write(assets[assetPath], project.package.read(assetPath));
}

site.write(INDEX_FILE_NAME, Buffer.from("<!DOCTYPE html>\n" + renderHTML(renderIndex(context, links, scripts, navigation))));
site.write(INDEX_FILE_NAME, Buffer.from("<!DOCTYPE html>\n" + renderHTML(renderWrapper(context, links, scripts, navigation))));
site.write("indexcontent.html", Buffer.from("<!DOCTYPE html>\n" + renderHTML(renderIndex(context, links, scripts, navigation))));
site.write(ERROR_FILE_NAME, Buffer.from("<!DOCTYPE html>\n" + renderHTML(render404(context, links, scripts, navigation))));

for (const iri in context.outputs) {
site.write(context.outputs[iri] + ".html", Buffer.from("<!DOCTYPE html>\n" + renderHTML(renderPage(iri, context, links, scripts, navigation))));
site.write(context.outputs[iri] + ".html", Buffer.from("<!DOCTYPE html>\n" + renderHTML(renderNavlessPage(iri, context, links, scripts))));
}
}
10 changes: 9 additions & 1 deletion packages/explorer-site/src/main.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,15 @@ window.onclick = function (ev) {
if (!rel) {
ev.preventDefault();
if (href) {
window.location.href = href;
/*
const myTitle = window.document.title;
window.document.title = this.contentWindow.document.title + " - " + myTitle;
window.history.replaceState(null, "", "#" + this.contentWindow.location);
*/
if (window.location.hash.startsWith("#") ) {
var base = window.location.href.split('#')[0];
window.location.href = base + "#" + href;
}
}
}
break;
Expand Down
7 changes: 7 additions & 0 deletions packages/explorer-views/src/pages/main.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,3 +63,10 @@ strong {
font-weight: 600;
color: var(--base07);
}

iframe {
border: none;
display: block;
height: 100%;
width: 100%;
}