Skip to content

Commit 1039ab1

Browse files
flmathflmath
committed
feat: enhance iframe styling and loading behavior; implement dynamic background and text color based on theme; improve loading indication for better user experience; add new markdown resources and paradoxes article
1 parent c8cf75a commit 1039ab1

File tree

5 files changed

+181
-43
lines changed

5 files changed

+181
-43
lines changed

‎src/routes/posts/jupyter/asymetric_break_certs/+page.svelte‎

Lines changed: 37 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,48 @@
11
<script>
2-
import { onMount } from "svelte";
32
4-
let mounted = false;
3+
import { theme } from '$lib/components/theme.svelte';
4+
import HTML from "./page.html?raw";
55
/**
66
* @type {string | null | undefined}
77
*/
8-
let HTML;
8+
let iframeElement = $state(null); // Reference to the iframe DOM element
9+
let visible = $state(false);
10+
let textColor = $state("black");
11+
let bgColor = $state("white");
912
10-
onMount(async () => {
11-
HTML = (await import("./page.html?raw")).default;
12-
mounted = true;
13-
});
13+
function styleIframeContent() {
14+
if (!iframeElement?.contentDocument) return;
15+
16+
const body = iframeElement.contentDocument.body;
17+
if (!body) return;
18+
19+
const rootStyle = getComputedStyle(document.documentElement);
20+
bgColor = rootStyle.getPropertyValue('--bg-primary').trim();
21+
textColor = rootStyle.getPropertyValue('--text-primary').trim();
22+
body.style.backgroundColor = bgColor;
23+
body.style.color = textColor;
24+
visible = true;
25+
26+
}
27+
function onLoad() {
28+
styleIframeContent();
29+
}
30+
31+
$effect(() => {
32+
$theme.darkstate
33+
if(visible){styleIframeContent()};
34+
})
1435
</script>
1536
16-
<iframe title="jupyter" srcdoc={HTML}></iframe>
37+
<iframe title="jupyter" srcdoc={HTML} bind:this={iframeElement} onload={onLoad}
38+
style="visibility:{visible ? "visible" : "hidden"};
39+
background-color: {bgColor};
40+
color: {textColor};"
41+
></iframe>
42+
43+
{#if !visible}
44+
<p>Loading...</p>
45+
{/if}
1746
1847
<style>
1948
iframe {

‎src/routes/posts/jupyter/asymetric_crypto/+page.svelte‎

Lines changed: 37 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,48 @@
11
<script>
2-
import { onMount } from "svelte";
32
4-
let mounted = false;
3+
import { theme } from '$lib/components/theme.svelte';
4+
import HTML from "./page.html?raw";
55
/**
66
* @type {string | null | undefined}
77
*/
8-
let HTML;
8+
let iframeElement = $state(null); // Reference to the iframe DOM element
9+
let visible = $state(false);
10+
let textColor = $state("black");
11+
let bgColor = $state("white");
912
10-
onMount(async () => {
11-
HTML = (await import("./page.html?raw")).default;
12-
mounted = true;
13-
});
13+
function styleIframeContent() {
14+
if (!iframeElement?.contentDocument) return;
15+
16+
const body = iframeElement.contentDocument.body;
17+
if (!body) return;
18+
19+
const rootStyle = getComputedStyle(document.documentElement);
20+
bgColor = rootStyle.getPropertyValue('--bg-primary').trim();
21+
textColor = rootStyle.getPropertyValue('--text-primary').trim();
22+
body.style.backgroundColor = bgColor;
23+
body.style.color = textColor;
24+
visible = true;
25+
26+
}
27+
function onLoad() {
28+
styleIframeContent();
29+
}
30+
31+
$effect(() => {
32+
$theme.darkstate
33+
if(visible){styleIframeContent()};
34+
})
1435
</script>
1536
16-
<iframe title="jupyter" srcdoc={HTML}></iframe>
37+
<iframe title="jupyter" srcdoc={HTML} bind:this={iframeElement} onload={onLoad}
38+
style="visibility:{visible ? "visible" : "hidden"};
39+
background-color: {bgColor};
40+
color: {textColor};"
41+
></iframe>
42+
43+
{#if !visible}
44+
<p>Loading...</p>
45+
{/if}
1746
1847
<style>
1948
iframe {

‎src/routes/posts/jupyter/growth_projections/+page.svelte‎

Lines changed: 34 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,46 @@
11
<script>
2-
import { onMount } from "svelte";
32
4-
let mounted = false;
3+
import { theme } from '$lib/components/theme.svelte';
4+
import HTML from "./page.html?raw";
55
/**
66
* @type {string | null | undefined}
77
*/
8-
let HTML;
8+
let iframeElement = $state(null); // Reference to the iframe DOM element
9+
let visible = $state(false);
10+
let textColor = $state("black");
11+
let bgColor = $state("white");
912
10-
onMount(async () => {
11-
HTML = (await import("./page.html?raw")).default;
12-
mounted = true;
13-
});
13+
function styleIframeContent() {
14+
if (!iframeElement?.contentDocument) return;
15+
16+
const body = iframeElement.contentDocument.body;
17+
if (!body) return;
18+
19+
const rootStyle = getComputedStyle(document.documentElement);
20+
bgColor = rootStyle.getPropertyValue('--bg-primary').trim();
21+
textColor = rootStyle.getPropertyValue('--text-primary').trim();
22+
body.style.backgroundColor = bgColor;
23+
body.style.color = textColor;
24+
visible = true;
25+
26+
}
27+
function onLoad() {
28+
styleIframeContent();
29+
}
30+
31+
$effect(() => {
32+
$theme.darkstate
33+
if(visible){styleIframeContent()};
34+
})
1435
</script>
1536
16-
<iframe title="jupyter" srcdoc={HTML}></iframe>
37+
<iframe title="jupyter" srcdoc={HTML} bind:this={iframeElement} onload={onLoad}
38+
style="visibility:{visible ? "visible" : "hidden"};
39+
background-color: {bgColor};
40+
color: {textColor};"
41+
></iframe>
1742
18-
{#if !mounted}
43+
{#if !visible}
1944
<p>Loading...</p>
2045
{/if}
2146

‎src/routes/posts/jupyter/interpolation/+page.svelte‎

Lines changed: 37 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,48 @@
11
<script>
2-
import { onMount } from "svelte";
32
4-
let mounted = false;
3+
import { theme } from '$lib/components/theme.svelte';
4+
import HTML from "./page.html?raw";
55
/**
66
* @type {string | null | undefined}
77
*/
8-
let HTML;
8+
let iframeElement = $state(null); // Reference to the iframe DOM element
9+
let visible = $state(false);
10+
let textColor = $state("black");
11+
let bgColor = $state("white");
912
10-
onMount(async () => {
11-
HTML = (await import("./page.html?raw")).default;
12-
mounted = true;
13-
});
13+
function styleIframeContent() {
14+
if (!iframeElement?.contentDocument) return;
15+
16+
const body = iframeElement.contentDocument.body;
17+
if (!body) return;
18+
19+
const rootStyle = getComputedStyle(document.documentElement);
20+
bgColor = rootStyle.getPropertyValue('--bg-primary').trim();
21+
textColor = rootStyle.getPropertyValue('--text-primary').trim();
22+
body.style.backgroundColor = bgColor;
23+
body.style.color = textColor;
24+
visible = true;
25+
26+
}
27+
function onLoad() {
28+
styleIframeContent();
29+
}
30+
31+
$effect(() => {
32+
$theme.darkstate
33+
if(visible){styleIframeContent()};
34+
})
1435
</script>
1536
16-
<iframe title="jupyter" srcdoc={HTML}> </iframe>
37+
<iframe title="jupyter" srcdoc={HTML} bind:this={iframeElement} onload={onLoad}
38+
style="visibility:{visible ? "visible" : "hidden"};
39+
background-color: {bgColor};
40+
color: {textColor};"
41+
></iframe>
42+
43+
{#if !visible}
44+
<p>Loading...</p>
45+
{/if}
1746
1847
<style>
1948
iframe {

‎src/routes/posts/jupyter/matrix_implementations_pt1/+page.svelte‎

Lines changed: 36 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,48 @@
11
<script>
2-
import { onMount } from "svelte";
32
4-
let mounted = false;
3+
import { theme } from '$lib/components/theme.svelte';
4+
import HTML from "./page.html?raw";
55
/**
66
* @type {string | null | undefined}
77
*/
8-
let HTML;
8+
let iframeElement = $state(null); // Reference to the iframe DOM element
9+
let visible = $state(false);
10+
let textColor = $state("black");
11+
let bgColor = $state("white");
912
10-
onMount(async () => {
11-
HTML = (await import("./page.html?raw")).default;
12-
mounted = true;
13-
});
13+
function styleIframeContent() {
14+
if (!iframeElement?.contentDocument) return;
15+
16+
const body = iframeElement.contentDocument.body;
17+
if (!body) return;
18+
19+
const rootStyle = getComputedStyle(document.documentElement);
20+
bgColor = rootStyle.getPropertyValue('--bg-primary').trim();
21+
textColor = rootStyle.getPropertyValue('--text-primary').trim();
22+
body.style.backgroundColor = bgColor;
23+
body.style.color = textColor;
24+
visible = true;
25+
26+
}
27+
function onLoad() {
28+
styleIframeContent();
29+
}
30+
31+
$effect(() => {
32+
$theme.darkstate
33+
if(visible){styleIframeContent()};
34+
})
1435
</script>
1536
16-
<iframe title="jupyter" srcdoc={HTML}> </iframe>
17-
{#if !mounted}
37+
<iframe title="jupyter" srcdoc={HTML} bind:this={iframeElement} onload={onLoad}
38+
style="visibility:{visible ? "visible" : "hidden"};
39+
background-color: {bgColor};
40+
color: {textColor};"
41+
></iframe>
42+
43+
{#if !visible}
1844
<p>Loading...</p>
19-
{/if}
45+
{/if}
2046
2147
<style>
2248
iframe {

0 commit comments

Comments
 (0)