<script lang="ts"> import Nav from '../../Nav.svelte'; import Tabs from '../../Tabs.svelte'; import ChannelBar from '../../ChannelBar.svelte'; import type { PageData } from './$types'; export let data: PageData; const channel = data.channel.length ? data.channel : 'main'; </script> <svelte:head> <title>{data.owner} / {data.repo}</title> </svelte:head> <div class="p-3"> <Nav user={data.owner} repo={data.repo} path={data.inode.Directory ? data.inode.Directory.path : data.inode.File.path} link={true} /> <Tabs user={data.owner} repo={data.repo} channel={data.channel} active="tree" /> <div class="pt-3"> <ChannelBar owner={data.owner} repo={data.repo} {channel} channels={data.channels} tab="tree" token={data.token} can_delete={true} /> </div> {#if data.inode.Directory} <ul class="mt-5 list bg-base-100 rounded-box shadow-md"> {#each data.inode.Directory.children as ch} <li class="list-row"> <div> <div class="text-truncate"> <a class={ch.is_dir ? 'dir' : 'file'} href="/{data.owner}/{data.repo}{channel.length ? ':' + channel : ''}/tree/{ch.pos}" >{ch.name}</a> </div> <div class="text-truncate d-sm-inline-block"> <div class="d-block text-truncate"></div> </div> <div class="text-truncate pl-3 d-none d-md-inline-block text-right"></div> </div> </li> {/each} </ul> {:else} <pre><code class="mt-5 hljs" >{#if data.hled}{@html data.hled}{/if}</code></pre> {/if} </div> <style lang="scss"> @media (prefers-color-scheme: dark) { a.file, a.dir { color: #fff; } } @media (prefers-color-scheme: light) { a.file, a.dir { color: #000; } } a.file::before { @extend .tdesign--file; } a.dir::before { @extend .tdesign--folder; } a.file::before, a.dir::before { background-size: contain; display: inline-block; content: ''; width: 1.1em; height: 1.1em; margin-right: 0.6em; position: relative; top: 2px; } pre code.hljs { display: block; overflow-x: auto; padding: 5px; } code.hljs { padding: 3px 5px; } :global { .hljs-emphasis { font-style: italic; } .hljs-strong { font-weight: 700; } @media (prefers-color-scheme: dark) { .hljs { color: #fff; background: #1c1b1b; } .hljs-subst { color: #fff; } .hljs-comment { color: #999; } .hljs-attr, .hljs-doctag, .hljs-keyword, .hljs-meta .hljs-keyword, .hljs-section, .hljs-selector-tag { color: #88aece; } .hljs-attribute { color: #c59bc1; } .hljs-name, .hljs-number, .hljs-quote, .hljs-selector-id, .hljs-template-tag, .hljs-type { color: #f08d49; } .hljs-selector-class { color: #88aece; } .hljs-link, .hljs-regexp, .hljs-selector-attr, .hljs-string, .hljs-symbol, .hljs-template-variable, .hljs-variable { color: #b5bd68; } .hljs-meta, .hljs-selector-pseudo { color: #88aece; } .hljs-built_in, .hljs-literal, .hljs-title { color: #f08d49; } .hljs-bullet, .hljs-code { color: #ccc; } .hljs-meta .hljs-string { color: #b5bd68; } .hljs-deletion { color: #de7176; } .hljs-addition { color: #76c490; } } @media (prefers-color-scheme: light) { .hljs { color: #2f3337; background: #f6f6f6; } .hljs-subst { color: #2f3337; } .hljs-comment { color: #656e77; } .hljs-attr, .hljs-doctag, .hljs-keyword, .hljs-meta .hljs-keyword, .hljs-section, .hljs-selector-tag { color: #015692; } .hljs-attribute { color: #803378; } .hljs-name, .hljs-number, .hljs-quote, .hljs-selector-id, .hljs-template-tag, .hljs-type { color: #b75501; } .hljs-selector-class { color: #015692; } .hljs-link, .hljs-regexp, .hljs-selector-attr, .hljs-string, .hljs-symbol, .hljs-template-variable, .hljs-variable { color: #54790d; } .hljs-meta, .hljs-selector-pseudo { color: #015692; } .hljs-built_in, .hljs-literal, .hljs-title { color: #b75501; } .hljs-bullet, .hljs-code { color: #535a60; } .hljs-meta .hljs-string { color: #54790d; } .hljs-deletion { color: #c02d2e; } .hljs-addition { color: #2f6f44; } } } </style>