Skip to content

Commit 290a019

Browse files
willinwillin
committed
docs: 📝 init site demo
1 parent 0861f1b commit 290a019

25 files changed

+1466
-147
lines changed

‎apps/web/.eslintrc.cjs

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/** @type { import("eslint").Linter.FlatConfig } */
22
module.exports = {
3-
root: true,
4-
extends: ['@svelte-dev/eslint-config']
3+
root: true,
4+
extends: ['@svelte-dev/eslint-config']
55
};

‎apps/web/.prettierrc

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
{
2+
"useTabs": false,
3+
"tabWidth": 2,
4+
"singleQuote": true,
5+
"semi": true,
6+
"bracketSameLine": true,
7+
"trailingComma": "none",
8+
"printWidth": 100,
9+
"plugins": ["prettier-plugin-svelte"],
10+
"overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
11+
}

‎apps/web/mdsvex.config.js

Lines changed: 25 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,33 @@ import { createHighlighter } from '@svelte-dev/pretty-code';
77

88
const config = defineConfig({
99
extensions: ['.svelte.md', '.md', '.svx'],
10+
layout: {
11+
_: './src/lib/components/mdsvex.svelte'
12+
},
1013
highlight: {
1114
highlighter: createHighlighter({
12-
// theme: 'css-variables'
15+
// keepBackground: false,
16+
theme: {
17+
dark: 'solarized-dark',
18+
light: 'solarized-light'
19+
},
20+
onVisitLine(node) {
21+
// Prevent lines from collapsing in `display: grid` mode, and allow empty
22+
// lines to be copy/pasted
23+
if (node.children.length === 0) {
24+
node.children = [{ type: 'text', value: ' ' }];
25+
}
26+
},
27+
onVisitHighlightedLine(node) {
28+
if (node.properties.className) {
29+
node.properties.className.push('line--highlighted');
30+
} else {
31+
node.properties.className = ['line--highlighted'];
32+
}
33+
},
34+
onVisitHighlightedWord(node) {
35+
node.properties.className = ['word--highlighted'];
36+
}
1337
})
1438
},
1539
rehypePlugins: [

‎apps/web/package.json

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,8 @@
1919
"theme-change": "^2.5.0"
2020
},
2121
"devDependencies": {
22+
"@melt-ui/pp": "^0.1.4",
23+
"@melt-ui/svelte": "^0.65.1",
2224
"@svelte-dev/eslint-config": "latest",
2325
"@sveltejs/adapter-cloudflare": "^2.3.3",
2426
"@sveltejs/kit": "^1.27.6",

‎apps/web/src/app.css

Lines changed: 248 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,251 @@
11
@tailwind base;
22
@tailwind components;
33
@tailwind utilities;
4+
5+
* {
6+
user-select: none;
7+
cursor: url('https://willin.wang/images/default.cur'), default;
8+
}
9+
10+
pre[data-theme*=' '],
11+
pre[data-theme*=' '] span {
12+
color: var(--shiki-light);
13+
background-color: var(--shiki-light-bg);
14+
}
15+
16+
[data-theme='dark'] pre[data-theme*=' '],
17+
[data-theme='dark'] pre[data-theme*=' '] span,
18+
[data-theme='synthwave'] pre[data-theme*=' '],
19+
[data-theme='synthwave'] pre[data-theme*=' '] span,
20+
[data-theme='halloween'] pre[data-theme*=' '],
21+
[data-theme='halloween'] pre[data-theme*=' '] span,
22+
[data-theme='forest'] pre[data-theme*=' '],
23+
[data-theme='forest'] pre[data-theme*=' '] span,
24+
[data-theme='black'] pre[data-theme*=' '],
25+
[data-theme='black'] pre[data-theme*=' '] span,
26+
[data-theme='luxury'] pre[data-theme*=' '],
27+
[data-theme='luxury'] pre[data-theme*=' '] span,
28+
[data-theme='dracula'] pre[data-theme*=' '],
29+
[data-theme='dracula'] pre[data-theme*=' '] span,
30+
[data-theme='business'] pre[data-theme*=' '],
31+
[data-theme='business'] pre[data-theme*=' '] span,
32+
[data-theme='night'] pre[data-theme*=' '],
33+
[data-theme='night'] pre[data-theme*=' '] span,
34+
[data-theme='coffee'] pre[data-theme*=' '],
35+
[data-theme='coffee'] pre[data-theme*=' '] span,
36+
[data-theme='dim'] pre[data-theme*=' '],
37+
[data-theme='dim'] pre[data-theme*=' '] span,
38+
[data-theme='sunset'] pre[data-theme*=' '],
39+
[data-theme='sunset'] pre[data-theme*=' '] span {
40+
color: var(--shiki-dark);
41+
background-color: var(--shiki-dark-bg);
42+
}
43+
44+
a,
45+
a *,
46+
button,
47+
button *,
48+
.btn,
49+
.btn *,
50+
.prose .post-image,
51+
.cursor-pointer * {
52+
cursor: url('https://willin.wang/images/pointer.cur'), pointer;
53+
}
54+
55+
html {
56+
/* transition: background-color 0.5s linear, color 0.25s linear; */
57+
min-height: 100vh;
58+
user-select: none;
59+
}
60+
61+
div,
62+
p {
63+
@apply break-all;
64+
user-select: none;
65+
}
66+
67+
pre {
68+
-ms-overflow-style: none; /* IE and Edge */
69+
scrollbar-width: none; /* Firefox */
70+
user-select: none;
71+
}
72+
73+
/* Remove Safari input shadow on mobile */
74+
input[type='text'],
75+
input[type='email'] {
76+
-webkit-appearance: none;
77+
-moz-appearance: none;
78+
appearance: none;
79+
}
80+
81+
.break-words,
82+
.break-words p {
83+
word-wrap: break-word;
84+
word-break: break-word;
85+
}
86+
87+
table {
88+
display: block;
89+
max-width: fit-content;
90+
overflow-x: auto;
91+
white-space: nowrap;
92+
}
93+
94+
/* .anchor:hover {
95+
@apply visible;
96+
}
97+
98+
.prose .anchor:after {
99+
content: '#';
100+
}
101+
102+
.prose *:hover > .anchor {
103+
@apply visible;
104+
}
105+
106+
.prose .anchor {
107+
@apply absolute invisible no-underline text-secondary max-w-full;
108+
margin-left: -1.5rem;
109+
width: 100%;
110+
left: 0;
111+
top: 0;
112+
right: 0;
113+
bottom: 0;
114+
text-align: left;
115+
height: max-content;
116+
} */
117+
118+
.prose img {
119+
/* Don't apply styles to next/image */
120+
@apply m-0;
121+
}
122+
123+
.prose code {
124+
@apply text-accent rounded;
125+
}
126+
127+
code[class*='language-'],
128+
pre[class*='language-'] {
129+
@apply text-neutral-50;
130+
}
131+
132+
.prose {
133+
@apply min-w-full;
134+
}
135+
.prose > * {
136+
@apply min-w-[95%] w-full lg:w-[95%] mx-auto;
137+
}
138+
.prose h1 a,
139+
.prose h2 a {
140+
@apply block text-primary-content bg-primary border-primary mx-auto shadow-lg text-center w-full py-1 rounded;
141+
}
142+
.prose h1 a,
143+
.prose h2 a,
144+
.prose h3 a,
145+
.prose h4 a,
146+
.prose h5 a,
147+
.prose h6 a {
148+
@apply no-underline;
149+
}
150+
.prose h3,
151+
.prose h4,
152+
.prose h5,
153+
.prose h6 {
154+
@apply text-secondary-content relative;
155+
}
156+
.prose table {
157+
@apply min-w-[95%] w-full lg:w-[95%] table-zebra shadow mx-auto table-md;
158+
display: table;
159+
}
160+
161+
.prose tr {
162+
@apply hover;
163+
}
164+
[data-rehype-pretty-code-fragment] {
165+
@apply relative min-w-[95%] w-full lg:w-[95%] mx-auto rounded shadow-lg;
166+
}
167+
[data-rehype-pretty-code-fragment] code {
168+
@apply grid break-words border-0 bg-transparent p-0 text-sm text-black;
169+
counter-reset: line;
170+
box-decoration-break: clone;
171+
}
172+
[data-rehype-pretty-code-fragment] pre {
173+
@apply mx-auto p-4;
174+
}
175+
[data-rehype-pretty-code-fragment] code * {
176+
user-select: text;
177+
}
178+
[data-rehype-pretty-code-fragment] .line {
179+
@apply py-1;
180+
}
181+
[data-rehype-pretty-code-fragment] [data-line-numbers] > .line::before {
182+
counter-increment: line;
183+
content: counter(line);
184+
display: inline-block;
185+
width: 1rem;
186+
margin-right: 1rem;
187+
text-align: right;
188+
color: gray;
189+
}
190+
191+
[data-rehype-pretty-code-title] {
192+
@apply px-4 py-3 font-mono text-xs font-medium border rounded-t-lg text-secondary-content bg-secondary border-secondary;
193+
}
194+
195+
[data-rehype-pretty-code-caption] {
196+
@apply !m-0 px-4 py-3 font-mono text-xs font-medium border rounded-b-lg text-accent-content bg-accent border-accent;
197+
}
198+
199+
[data-rehype-pretty-code-title] ~ [data-language-icon] {
200+
@apply block;
201+
}
202+
203+
[data-rehype-pretty-code-title] ~ pre {
204+
@apply mt-0 rounded-t-none border-t-0;
205+
}
206+
207+
[data-rehype-pretty-code-fragment] .line--highlighted {
208+
@apply bg-secondary bg-opacity-10;
209+
}
210+
[data-rehype-pretty-code-fragment] .line-highlighted span {
211+
@apply relative;
212+
}
213+
[data-rehype-pretty-code-fragment] .word--highlighted {
214+
@apply rounded-md bg-secondary bg-opacity-10 p-1;
215+
}
216+
217+
[data-highlighted-line] {
218+
@apply !bg-primary/30;
219+
}
220+
[data-highlighted-line] * {
221+
@apply !bg-transparent;
222+
}
223+
224+
[data-highlighted-chars] {
225+
@apply p-1 bg-secondary/70 shadow shadow-secondary;
226+
}
227+
[data-highlighted-chars] span {
228+
@apply !bg-transparent !text-secondary-content;
229+
}
230+
231+
[data-chars-id='v'] span {
232+
@apply !text-pink-300 bg-rose-800/50 border-b-pink-600 font-bold;
233+
}
234+
235+
[data-chars-id='s'] span {
236+
@apply !text-yellow-300 bg-yellow-800/50 border-b-yellow-600 font-bold;
237+
}
238+
239+
[data-chars-id='i'] span {
240+
@apply !text-purple-200 bg-purple-800/50 border-b-purple-600 font-bold;
241+
}
242+
243+
code[data-line-numbers] {
244+
counter-reset: line;
245+
}
246+
247+
code[data-line-numbers] > [data-line]::before {
248+
counter-increment: line;
249+
content: counter(line);
250+
@apply inline-block w-4 mr-4 text-right text-gray-500;
251+
}

‎apps/web/src/app.d.ts

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
// See https://kit.svelte.dev/docs/types#app
22
// for information about these interfaces
33
declare global {
4-
namespace App {
5-
// interface Error {}
6-
// interface Locals {}
7-
// interface PageData {}
8-
// interface Platform {}
9-
}
4+
namespace App {
5+
// interface Error {}
6+
// interface Locals {}
7+
// interface PageData {}
8+
// interface Platform {}
9+
}
1010
}
1111

1212
export {};

‎apps/web/src/app.html

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
1-
<!DOCTYPE html>
1+
<!doctype html>
22
<html lang="en">
3-
<head>
4-
<meta charset="utf-8" />
5-
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
6-
<meta name="viewport" content="width=device-width, initial-scale=1" />
7-
%sveltekit.head%
8-
</head>
9-
<body data-sveltekit-preload-data="hover">
10-
<div style="display: contents">%sveltekit.body%</div>
11-
</body>
3+
<head>
4+
<meta charset="utf-8" />
5+
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1" />
7+
%sveltekit.head%
8+
</head>
9+
<body data-sveltekit-preload-data="hover">
10+
<div style="display: contents">%sveltekit.body%</div>
11+
</body>
1212
</html>

‎apps/web/src/index.test.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { describe, it, expect } from 'vitest';
22

33
describe('sum test', () => {
4-
it('adds 1 + 2 to equal 3', () => {
5-
expect(1 + 2).toBe(3);
6-
});
4+
it('adds 1 + 2 to equal 3', () => {
5+
expect(1 + 2).toBe(3);
6+
});
77
});

‎apps/web/src/lib/components/adslot.svelte

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<script lang="ts">
2+
import { navigating } from '$app/stores';
3+
$: if ($navigating) {
4+
try {
5+
// @ts-ignore
6+
(adsbygoogle = window.adsbygoogle || []).push({});
7+
} catch (e) {}
8+
}
9+
</script>
10+
11+
<ins
12+
class="adsbygoogle"
13+
style="display:block"
14+
data-ad-format="autorelaxed"
15+
data-ad-client="ca-pub-5059418763237956"
16+
data-ad-slot="3528738701"></ins>
17+
18+
{#if true}
19+
<script>
20+
(adsbygoogle = window.adsbygoogle || []).push({});
21+
</script>
22+
{/if}

0 commit comments

Comments
 (0)