Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit 9c8397c

Browse files
heyjoewayheyjoeway
committed
Embeds, consent cleanup, prevent page jumping, code blocks
1 parent f232e4c commit 9c8397c

File tree

14 files changed

+274
-73
lines changed

14 files changed

+274
-73
lines changed

‎src/feeds/main/020625_0242PM/Windows_98_logo.webp‎

-12.5 KB
Binary file not shown.

‎src/feeds/main/020625_0242PM/post.md‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎src/feeds/meta/codetest/post.md‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
# Markdown Test
2+
3+
```js
4+
function foo(bar) {
5+
console.log(bar);
6+
}
7+
```
8+
9+
```python
10+
from dataclasses import dataclass
11+
12+
@dataclass
13+
class Foo:
14+
bar: str
15+
```
16+
17+
```powershell
18+
Set-ExecutionPolicy Unrestricted
19+
$test = @(
20+
"foo"
21+
"bar
22+
)
23+
```

‎src/lib/Comments.svelte‎

Lines changed: 11 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -9,15 +9,12 @@
99
<script lang="ts">
1010
import { onMount } from 'svelte';
1111
12-
import Center from './Center.svelte';
13-
import Button from '$joeysvelte/Button.svelte';
14-
import { persisted } from 'svelte-persisted-store';
15-
12+
import Consent from './Consent.svelte';
13+
import type { Consentable } from './Consent';
14+
1615
export let pageID: string;
1716
export let pageTitle: string;
1817
19-
let enableComments = persisted('enableComments', false);
20-
2118
const cusdisStyle = `
2219
html, body {
2320
background: none transparent;
@@ -49,9 +46,15 @@ html, body {
4946
srcdoc = srcdoc.replace('</head>', `${styleTag}</head>`);
5047
node.setAttribute("srcdoc", srcdoc);
5148
});
49+
50+
const cusdisConsentable = {
51+
disabledMessage: "Comments are currently disabled.",
52+
buttonMessage: "Enable Comments",
53+
privacyMessage: `By enabling comments, you agree to allow this website to connect to Cusdis and to the <a href="https://cusdis.com/privacy-policy" target="_blank">Cusdis Privacy Policy</a>.`
54+
} as Consentable;
5255
</script>
5356

54-
{#if $enableComments}
57+
<Consent consentable={cusdisConsentable}>
5558
<div id="cusdis_thread"
5659
data-host="https://cusdis.com"
5760
data-app-id="93e3be58-0fd2-46ce-881f-6608d54d2fd4"
@@ -61,17 +64,4 @@ html, body {
6164
></div>
6265

6366
<script async defer src="/cusdis.es.js"></script>
64-
{:else}
65-
<Center>
66-
<p>
67-
Comments are currently disabled.
68-
</p>
69-
<br>
70-
<Button onClick={() => $enableComments = true}>
71-
Enable Comments
72-
</Button><br>
73-
<p style:text-align="center">
74-
By enabling comments, you agree to allow this website to connect to Cusdis and to the <a href="https://cusdis.com/privacy-policy" target="_blank">Cusdis Privacy Policy</a>.
75-
</p>
76-
</Center>
77-
{/if}
67+
</Consent>

‎src/lib/Consent.svelte‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<script lang="ts">
2+
import { persisted } from 'svelte-persisted-store';
3+
import Center from './Center.svelte';
4+
import Button from '$joeysvelte/Button.svelte';
5+
6+
import type { Consentable } from "$lib/Consent";
7+
8+
export let consentable: Consentable;
9+
10+
let enable = persisted(`consent-${consentable.key}`, false);
11+
</script>
12+
13+
{#if $enable}
14+
<slot></slot>
15+
{:else}
16+
<Center>
17+
<p>{@html consentable.disabledMessage}</p>
18+
<br>
19+
<Button onClick={() => $enable = true}>{consentable.buttonMessage}</Button><br>
20+
<p style:text-align="center">{@html consentable.privacyMessage}</p>
21+
</Center>
22+
{/if}
23+

‎src/lib/Consent.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
export interface Consentable {
2+
key: string;
3+
disabledMessage: string;
4+
buttonMessage: string;
5+
privacyMessage: string;
6+
}

‎src/lib/Feed.ts‎

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -149,6 +149,15 @@ export async function getFeedPost(feedId: string, postId: string): Promise<Post>
149149
const compiled = await compile(filteredPostContents, {
150150
smartypants: false,
151151
});
152+
153+
// https://github.com/pngwn/MDsveX/issues/392#issuecomment-1013755667
154+
const html = (
155+
compiled?.code
156+
.replace(/>{@html `<code class="language-/g, '><code class="language-')
157+
.replace(/<\/code>`}<\/pre>/g, '</code></pre>')
158+
|| ''
159+
);
160+
152161
const fm = (compiled?.data?.fm || {}) as Record<string, any>;
153162
fm.urlShort = `jojudge.com/feeds/${feedId}/${postId}`;
154163

@@ -158,7 +167,7 @@ export async function getFeedPost(feedId: string, postId: string): Promise<Post>
158167
const dates = [...mediaDates, postFileDate].filter(x => x); // Remove undefined
159168
if (dates.length) {
160169
fm.date = arrMin(
161-
[...mediaDates, postFileDate].map(
170+
dates.map(
162171
x => new Date(x?.toString() || "")
163172
)
164173
)?.toISOString();
@@ -171,7 +180,7 @@ export async function getFeedPost(feedId: string, postId: string): Promise<Post>
171180
const dates = [...mediaDates, postFileDate].filter(x => x); // Remove undefined
172181
if (dates.length) {
173182
fm.last_modified_at = arrMax(
174-
[...mediaDates, postFileDate].map(
183+
dates.map(
175184
x => new Date(x?.toString() || "")
176185
)
177186
)?.toISOString();
@@ -184,7 +193,7 @@ export async function getFeedPost(feedId: string, postId: string): Promise<Post>
184193

185194
return {
186195
id: postId,
187-
html: compiled?.code || '',
196+
html,
188197
embeds,
189198
media,
190199
fm,

‎src/lib/FeedHeader.svelte‎

Lines changed: 17 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -10,36 +10,38 @@
1010
export let feed: Feed;
1111
const bannerStyleStr = styleObjToStr({
1212
width:"100%",
13-
height:"150px",
13+
height:"100%",
1414
"object-fit":"cover",
1515
"border-radius":"8px"
1616
});
1717
</script>
1818

19-
{#await import(`../../src/feeds/${feed.id}/banner.jpg?as=run`) then { default: bannerSrc }}
20-
<Img style={bannerStyleStr} src={bannerSrc} />
21-
{:catch}
22-
{#await import(`../../src/feeds/${feed.id}/banner.jpeg?as=run`) then { default: bannerSrc }}
19+
<div class="header-container">
20+
{#await import(`../../src/feeds/${feed.id}/banner.jpg?as=run`) then { default: bannerSrc }}
2321
<Img style={bannerStyleStr} src={bannerSrc} />
2422
{:catch}
25-
{#await import(`../../src/feeds/${feed.id}/banner.png?as=run`) then { default: bannerSrc }}
23+
{#await import(`../../src/feeds/${feed.id}/banner.jpeg?as=run`) then { default: bannerSrc }}
2624
<Img style={bannerStyleStr} src={bannerSrc} />
2725
{:catch}
28-
<!-- webp goes at the bottom WHERE IT BELONGS -->
29-
{#await import(`../../src/feeds/${feed.id}/banner.webp?as=run`) then { default: bannerSrc }}
26+
{#await import(`../../src/feeds/${feed.id}/banner.png?as=run`) then { default: bannerSrc }}
3027
<Img style={bannerStyleStr} src={bannerSrc} />
28+
{:catch}
29+
<!-- webp goes at the bottom WHERE IT BELONGS -->
30+
{#await import(`../../src/feeds/${feed.id}/banner.webp?as=run`) then { default: bannerSrc }}
31+
<Img style={bannerStyleStr} src={bannerSrc} />
32+
{/await}
3133
{/await}
3234
{/await}
3335
{/await}
34-
{/await}
36+
</div>
3537

3638
<div class="outer-container">
3739
<div class="inner-container">
3840
<div class="profile">
3941
<div class="left">
4042
<Clickable onClick={feed.url}>
4143
<div class="profile-main">
42-
<FeedProfilePic maxHeight="90px" feed={feed} />
44+
<FeedProfilePic size="90px" feed={feed} />
4345
<div class="title">{feed.meta.title}</div>
4446
<div class="path">{feed.urlShort}</div>
4547
</div>
@@ -100,4 +102,9 @@
100102
flex-direction: column;
101103
align-items: start;
102104
}
105+
106+
.header-container {
107+
width: 100%;
108+
height: 150px;
109+
}
103110
</style>

‎src/lib/FeedProfilePic.svelte‎

Lines changed: 18 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,30 @@
11
<script lang="ts">
22
import type { Feed } from "./Feed";
33
import Image from "./Image.svelte";
4+
import { styleObjToStr } from "./Utils";
45
5-
export let maxHeight: string;
6+
export let size: string;
67
export let feed: Feed;
78
</script>
89

9-
{#await import(`../../src/feeds/${feed.id}/pfp.jpg?as=run`) then { default: pfpSrc }}
10-
<Image maxHeight={maxHeight} src={pfpSrc} enableLightbox={false} />
11-
{:catch}
12-
{#await import(`../../src/feeds/${feed.id}/pfp.jpeg?as=run`) then { default: pfpSrc }}
13-
<Image maxHeight={maxHeight} src={pfpSrc} enableLightbox={false} />
10+
<div style={styleObjToStr({
11+
width: size,
12+
height: size
13+
})}>
14+
{#await import(`../../src/feeds/${feed.id}/pfp.jpg?as=run`) then { default: pfpSrc }}
15+
<Image width={size} height={size} src={pfpSrc} enableLightbox={false} />
1416
{:catch}
15-
{#await import(`../../src/feeds/${feed.id}/pfp.png?as=run`) then { default: pfpSrc }}
16-
<Image maxHeight={maxHeight} src={pfpSrc} enableLightbox={false} />
17+
{#await import(`../../src/feeds/${feed.id}/pfp.jpeg?as=run`) then { default: pfpSrc }}
18+
<Image width={size} height={size} src={pfpSrc} enableLightbox={false} />
1719
{:catch}
18-
<!-- webp goes at the bottom WHERE IT BELONGS -->
19-
{#await import(`../../src/feeds/${feed.id}/pfp.webp?as=run`) then { default: pfpSrc }}
20-
<Image maxHeight={maxHeight} src={pfpSrc} enableLightbox={false} />
20+
{#await import(`../../src/feeds/${feed.id}/pfp.png?as=run`) then { default: pfpSrc }}
21+
<Image width={size} height={size} src={pfpSrc} enableLightbox={false} />
22+
{:catch}
23+
<!-- webp goes at the bottom WHERE IT BELONGS -->
24+
{#await import(`../../src/feeds/${feed.id}/pfp.webp?as=run`) then { default: pfpSrc }}
25+
<Image width={size} height={size} src={pfpSrc} enableLightbox={false} />
26+
{/await}
2127
{/await}
2228
{/await}
2329
{/await}
24-
{/await}
30+
</div>

‎src/lib/Image.svelte‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,13 @@
77
export let src: any;
88
export let fullSrc: any = undefined;
99
export let maxHeight: string = "450px";
10+
export let width: string | undefined = undefined;
11+
export let height: string | undefined = undefined;
1012
export let enableLightbox = true;
1113
export let square = false;
1214
export let exif: ExifReader.Tags | undefined = undefined;
1315
import Img from "@zerodevx/svelte-img";
16+
import { styleObjToStr } from './Utils';
1417
1518
let skipSvelteImg = false;
1619
let nearestScaling = false;
@@ -60,7 +63,11 @@
6063
<!-- svelte-ignore a11y_click_events_have_key_events -->
6164
<!-- svelte-ignore a11y_no_static_element_interactions -->
6265
<div
63-
style="--img-max-height:{maxHeight}"
66+
style={styleObjToStr({
67+
"--img-max-height": maxHeight,
68+
"--img-width": width,
69+
"--img-height": height
70+
})}
6471
on:click={() => {overlayOpen = true}}
6572
>
6673
{#if skipSvelteImg}
@@ -155,6 +162,8 @@
155162
width: auto;
156163
height: auto;
157164
max-height: var(--img-max-height);
165+
height: var(--img-height);
166+
width: var(--img-width);
158167
align-self: center;
159168
}
160169

0 commit comments

Comments
 (0)