your personal website on atproto - mirror
blento.app
add user filter to section editing ui
+32
-9
+5
-1
src/lib/sections/HeroSection/HeroSection.svelte
+5
-1
src/lib/sections/HeroSection/HeroSection.svelte
+6
-2
src/lib/sections/SectionChrome.svelte
+6
-2
src/lib/sections/SectionChrome.svelte
···
1
1
<script lang="ts">
2
-
import { SECTIONS_EDITING_ENABLED } from './feature-flag';
2
+
import { isSectionsEditingEnabled } from './feature-flag';
3
+
import { getDidContext } from '$lib/website/context';
3
4
4
5
let {
5
6
isActive,
···
12
13
name: string;
13
14
icon?: string;
14
15
} = $props();
16
+
17
+
const did = getDidContext();
18
+
const enabled = $derived(isSectionsEditingEnabled(did));
15
19
</script>
16
20
17
-
{#if SECTIONS_EDITING_ENABLED && (hovered || isActive)}
21
+
{#if enabled && (hovered || isActive)}
18
22
<div
19
23
class="pointer-events-none absolute inset-0 z-30 rounded-3xl border-2 border-dashed transition-colors duration-150 {isActive
20
24
? 'border-accent-500/50'
+16
-3
src/lib/sections/feature-flag.ts
+16
-3
src/lib/sections/feature-flag.ts
···
2
2
import { env } from '$env/dynamic/public';
3
3
4
4
/**
5
-
* Controls whether the section management UI is exposed to users.
5
+
* DIDs that always have section-editing UI enabled, regardless of the
6
+
* PUBLIC_SECTIONS_ENABLED env flag. Useful for dogfooding with specific users.
7
+
*/
8
+
const ALLOWED_DIDS: readonly string[] = [
9
+
// flo-bit.dev
10
+
'did:plc:257wekqxg4hyapkq6k47igmp'
11
+
];
12
+
13
+
/**
14
+
* Controls whether the section management UI is exposed to a given user.
6
15
* When false, users can only edit the default grid section — no adding,
7
16
* reordering, or deleting sections (or hero/other section types).
8
17
*
9
-
* Set PUBLIC_SECTIONS_ENABLED=true in the environment to enable.
18
+
* Enabled when PUBLIC_SECTIONS_ENABLED=true, in dev mode, or the given DID
19
+
* is in ALLOWED_DIDS.
10
20
*/
11
-
export const SECTIONS_EDITING_ENABLED = env.PUBLIC_SECTIONS_ENABLED === 'true';
21
+
export function isSectionsEditingEnabled(did?: string | null): boolean {
22
+
if (env.PUBLIC_SECTIONS_ENABLED === 'true') return true;
23
+
return !!did && ALLOWED_DIDS.includes(did);
24
+
}
+5
-3
src/lib/website/EditableWebsite.svelte
+5
-3
src/lib/website/EditableWebsite.svelte
···
39
39
import { SvelteMap } from 'svelte/reactivity';
40
40
import { shouldMirror, mirrorLayout } from '$lib/layout';
41
41
import { SectionDefinitionsByType } from '$lib/sections';
42
-
import { SECTIONS_EDITING_ENABLED } from '$lib/sections/feature-flag';
42
+
import { isSectionsEditingEnabled } from '$lib/sections/feature-flag';
43
43
import type { SectionRecord } from '$lib/types';
44
44
45
45
let {
···
50
50
51
51
// Check if floating login button will be visible (to hide MadeWithBlento)
52
52
const showLoginOnEditPage = $derived(!user.isLoggedIn);
53
+
54
+
const sectionsEditingEnabled = $derived(isSectionsEditingEnabled(data.did));
53
55
54
56
const ogImageUrl = $derived.by(() => {
55
57
const origin = page.url.origin;
···
522
524
}}
523
525
/>
524
526
{/if}
525
-
{#if SECTIONS_EDITING_ENABLED}
527
+
{#if sectionsEditingEnabled}
526
528
<AddSectionButton onadd={(type) => addSection(type, i)} />
527
529
{/if}
528
530
{/each}
···
586
588
onLayoutChanged();
587
589
}
588
590
}}
589
-
showSectionsModal={SECTIONS_EDITING_ENABLED
591
+
showSectionsModal={sectionsEditingEnabled
590
592
? () => {
591
593
showSectionsModal = true;
592
594
}