Skip to content

Commit 13a93ab

Browse files
committed
Init for start
1 parent d12ad6a commit 13a93ab

File tree

11 files changed

+252
-285
lines changed

11 files changed

+252
-285
lines changed

src/components/Footer.tsx

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -58,6 +58,16 @@ export default function Footer() {
5858
Typst Website
5959
</a>
6060
</li>
61+
<li>
62+
<a
63+
href="https://github.com/Snippyst"
64+
target="_blank"
65+
rel="noopener noreferrer"
66+
className="text-sm text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 transition-colors"
67+
>
68+
Source Code
69+
</a>
70+
</li>
6171
</ul>
6272
</div>
6373

@@ -120,11 +130,8 @@ export default function Footer() {
120130
</div>
121131
</div>
122132

123-
<div className="mt-8 md:mt-12 pt-8 border-t border-gray-200 dark:border-gray-800">
133+
<div className="mt-4 md:mt-8 pt-4 border-t border-gray-200 dark:border-gray-800">
124134
<div className="flex flex-col md:flex-row justify-between items-center gap-4">
125-
<p className="text-xs text-gray-500 dark:text-gray-500 text-center md:text-left">
126-
Built by Finn Dittmar
127-
</p>
128135
<p className="text-xs text-gray-500 dark:text-gray-500 text-center md:text-right">
129136
Snippyst is not affiliated with Typst
130137
</p>

src/components/TypstPreview.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
import { useEffect, useRef, useState } from 'react'
44
import type { TypstCompiler, TypstRenderer } from '@myriaddreamin/typst.ts'
55
import { useContentZoom } from '@/hooks/useContentZoom'
6+
import { CompileFormatEnum } from '@myriaddreamin/typst.ts/compiler'
67

78
let createTypstCompiler: any
89
let createTypstRenderer: any
@@ -130,7 +131,7 @@ export function TypstPreview({ code, className = '' }: TypstPreviewProps) {
130131

131132
const result = await compiler.compile({
132133
mainFilePath: '/main.typ',
133-
format: 'vector',
134+
format: CompileFormatEnum.vector,
134135
})
135136

136137
if (!result.result) {

src/components/snippet/SearchInput.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ import { getSearchSuggestions } from '../../lib/api/snippets'
1212
import { buildSnippetsParams } from '../../lib/search-utils'
1313
import { useDebounce } from '../../hooks/useDebounce'
1414

15-
const AVAILABLE_VERSIONS = ['1.13.0', '1.13.1', '1.14.0']
15+
const AVAILABLE_VERSIONS = ['0.12.0', '0.13.0', '0.13.1', '0.14.0']
1616

1717
interface SearchInputProps {
1818
tokens: SearchToken[]

src/components/snippet/SnippetComp.tsx

Lines changed: 24 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -53,11 +53,33 @@ export default function SnippetComp({ snippet }: { snippet: Snippet }) {
5353
<>
5454
By {snippet.author} <br />
5555
{snippet.createdBy?.username && (
56-
<> (Uploaded by {snippet.createdBy.username})</>
56+
<>
57+
{' '}
58+
(Uploaded by{' '}
59+
<Link
60+
to="/snippets"
61+
search={{ userId: snippet.createdBy.id }}
62+
className="hover:underline"
63+
onClick={(e) => e.stopPropagation()}
64+
>
65+
{snippet.createdBy.username}
66+
</Link>
67+
)
68+
</>
5769
)}
5870
</>
5971
) : (
60-
<>Created by {snippet.createdBy?.username}</>
72+
<>
73+
Created by{' '}
74+
<Link
75+
to="/snippets"
76+
search={{ userId: snippet.createdBy?.id }}
77+
className="hover:underline"
78+
onClick={(e) => e.stopPropagation()}
79+
>
80+
{snippet.createdBy?.username}
81+
</Link>
82+
</>
6183
)}
6284
</p>
6385
</Link>

src/components/snippet/create/CodeEditorSection.tsx

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -167,9 +167,7 @@ export function CodeEditorSection({
167167
Preview
168168
</h3>
169169
<p className="mt-0.5 text-xs text-gray-600 dark:text-gray-400">
170-
Preview may differ from final render. The selected version is
171-
not reflected here. You can also send it with compilation
172-
errors.
170+
Preview may differ from final render.
173171
</p>
174172
</div>
175173
<div className="h-[400px] lg:h-[500px]">

src/components/snippet/create/VersionSelector.tsx

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,10 @@ export function VersionSelector({
2727
</h2>
2828
<p className="mb-3 text-xs text-gray-600 dark:text-gray-400">
2929
Select one or more Typst versions to validate your snippet against. At
30-
least one version must be selected.
30+
least one version must be selected. The selected version is not
31+
reflected in the editor. The preview renders with the latest available
32+
version of Typst. If your snippet only works with an older version, you
33+
may submit it with compilation errors.
3134
</p>
3235
<div className="flex flex-wrap gap-2">
3336
{AVAILABLE_TYPST_VERSIONS.map((version) => {

src/components/snippet/show/SnippetInfo.tsx

Lines changed: 38 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
import TagComp from '../TagComp'
21
import VoteButton from '../VoteButton'
32
import type { Snippet } from '@/types/snippet'
3+
import { Link } from '@tanstack/react-router'
44

55
interface SnippetInfoProps {
66
snippet: Snippet
@@ -29,18 +29,32 @@ export default function SnippetInfo({ snippet }: SnippetInfoProps) {
2929
<span className="font-medium text-gray-700 dark:text-gray-300">
3030
Created by:
3131
</span>{' '}
32-
<span className="text-gray-900 dark:text-gray-100">
33-
{snippet.author || snippet.createdBy.username}
34-
</span>
32+
{snippet.author ? (
33+
<span className="text-gray-900 dark:text-gray-100">
34+
{snippet.author}
35+
</span>
36+
) : (
37+
<Link
38+
to="/snippets"
39+
search={{ userId: snippet.createdBy.id }}
40+
className="text-blue-600 dark:text-blue-400 hover:underline"
41+
>
42+
{snippet.createdBy.username}
43+
</Link>
44+
)}
3545
<div />
3646
{snippet.author && (
3747
<>
3848
<span className="font-medium text-gray-700 dark:text-gray-300">
3949
Uploaded by:
4050
</span>{' '}
41-
<span className="text-gray-900 dark:text-gray-100">
51+
<Link
52+
to="/snippets"
53+
search={{ userId: snippet.createdBy.id }}
54+
className="text-blue-600 dark:text-blue-400 hover:underline"
55+
>
4256
{snippet.createdBy.username}
43-
</span>
57+
</Link>
4458
</>
4559
)}
4660
</div>
@@ -71,16 +85,18 @@ export default function SnippetInfo({ snippet }: SnippetInfoProps) {
7185
</div>
7286
<div className="flex flex-wrap gap-1">
7387
{snippet.versions.map((v, idx) => (
74-
<span
88+
<Link
7589
key={idx}
76-
className={`inline-flex items-center px-2 py-0.5 rounded text-xs font-mono ${
90+
to="/snippets"
91+
search={{ versions: [v.version] }}
92+
className={`inline-flex items-center px-2 py-0.5 rounded text-xs font-mono transition-opacity hover:opacity-80 ${
7793
v.success
7894
? 'bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200 border border-green-300 dark:border-green-700'
7995
: 'bg-red-100 dark:bg-red-900 text-red-800 dark:text-red-200 border border-red-300 dark:border-red-700'
8096
}`}
8197
>
8298
{v.version}
83-
</span>
99+
</Link>
84100
))}
85101
</div>
86102
</div>
@@ -94,7 +110,14 @@ export default function SnippetInfo({ snippet }: SnippetInfoProps) {
94110
</span>
95111
<div className="flex flex-wrap gap-2">
96112
{snippet.tags.map((tag) => (
97-
<TagComp key={tag.id} tag={tag} />
113+
<Link
114+
key={tag.id}
115+
to="/snippets"
116+
search={{ tags: [tag.id] }}
117+
className="inline-flex items-center px-3 py-1 rounded-full text-sm bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200 hover:bg-blue-200 dark:hover:bg-blue-800 transition-colors"
118+
>
119+
{tag.name}
120+
</Link>
98121
))}
99122
</div>
100123
</div>
@@ -115,12 +138,14 @@ export default function SnippetInfo({ snippet }: SnippetInfoProps) {
115138
</span>
116139
<div className="space-y-1">
117140
{snippet.packages.map((pkg, idx) => (
118-
<div
141+
<Link
119142
key={idx}
120-
className="text-sm text-gray-700 dark:text-gray-300 font-mono bg-gray-50 dark:bg-gray-900 px-2 py-1 rounded"
143+
to="/snippets"
144+
search={{ packages: `${pkg.namespace}/${pkg.name}` }}
145+
className="block text-sm text-gray-700 dark:text-gray-300 font-mono bg-gray-50 dark:bg-gray-900 hover:bg-gray-100 dark:hover:bg-gray-800 px-2 py-1 rounded transition-colors"
121146
>
122147
{pkg.namespace}/{pkg.name}@{pkg.version}
123-
</div>
148+
</Link>
124149
))}
125150
</div>
126151
</div>

0 commit comments

Comments
 (0)