-
Notifications
You must be signed in to change notification settings - Fork 1.2k
/
+page.svelte
84 lines (72 loc) · 2.2 KB
/
+page.svelte
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
<script lang="ts">
// @sg RepoRoot
import { onMount } from 'svelte'
import { sidebarOpen } from '$lib/repo/stores'
import { createPromiseStore } from '$lib/utils'
import { SVELTE_LOGGER, SVELTE_TELEMETRY_EVENTS } from '$lib/telemetry'
import Readme from '$lib/repo/Readme.svelte'
import SidebarToggleButton from '$lib/repo/SidebarToggleButton.svelte'
import type { PageData } from './$types'
import type { RepoPage_Readme } from './page.gql'
export let data: PageData
const readme = createPromiseStore<RepoPage_Readme | null>()
$: readme.set(data.readme)
onMount(() => {
SVELTE_LOGGER.logViewEvent(SVELTE_TELEMETRY_EVENTS.ViewRepositoryPage)
})
</script>
<h3 class="header">
<div class="sidebar-button" class:hidden={$sidebarOpen}>
<SidebarToggleButton />
</div>
{#if $readme.value}
{$readme.value.name}
{:else if !$readme.pending}
Description
{/if}
</h3>
<div class="content">
<div class="inner">
{#if $readme.value}
<Readme file={$readme.value} />
{:else if !$readme.pending}
{data.resolvedRevision.repo.description}
{/if}
</div>
</div>
<style lang="scss">
h3 {
margin: 0;
}
.header {
position: sticky;
top: 0;
padding: 0.5rem;
border-bottom: 1px solid var(--border-color);
display: flex;
align-items: center;
background-color: var(--color-bg-1);
.sidebar-button {
margin-right: 0.5rem;
// We still want the height of the button to be considered
// when rendering the header, so that toggling the sidebar
// won't change the height of the header.
&.hidden {
visibility: hidden;
max-width: 0;
margin-right: 0;
}
}
}
.content {
overflow: auto;
flex: 1;
// We use an "inner" element to limit the width of the content while
// keeping the scrollbar on the outer element, at the edge of the
// viewport.
.inner {
max-width: var(--viewport-xl);
padding: 1rem;
}
}
</style>