Skip to content

Commit 259067e

Browse files
baseballyamabaseballyama
committed
update docs
1 parent 8849eab commit 259067e

File tree

12 files changed

+368
-329
lines changed

12 files changed

+368
-329
lines changed

‎README.md

Lines changed: 15 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,9 @@
3434
It leverages the AST generated by [svelte-eslint-parser](https://github.com/sveltejs/svelte-eslint-parser) to provide custom linting for Svelte.
3535
Note that `eslint-plugin-svelte` and `svelte-eslint-parser` cannot be used alongside [eslint-plugin-svelte3](https://github.com/sveltejs/eslint-plugin-svelte3).
3636

37+
<!--USAGE_SECTION_START-->
38+
<!--USAGE_GUIDE_START-->
39+
3740
## Installation
3841

3942
```bash
@@ -47,14 +50,13 @@ npm install --save-dev svelte eslint eslint-plugin-svelte globals
4750
> - ESLint v8.57.1, v9.0.0, and above
4851
> - Node.js v18.20.4, v20.18.0, v22.10.0, and above
4952
50-
## Configuration
51-
52-
<!--USAGE_SECTION_START-->
53-
<!--USAGE_GUIDE_START-->
53+
## Usage
5454

5555
Use the `eslint.config.js` file to configure rules. For more details, see the [ESLint documentation](https://eslint.org/docs/latest/use/configure/configuration-files-new).
5656

57-
### JavaScript project
57+
### Configuration
58+
59+
#### JavaScript project
5860

5961
```js
6062
// eslint.config.js
@@ -103,7 +105,7 @@ export default [
103105
];
104106
```
105107

106-
### TypeScript project
108+
#### TypeScript project
107109

108110
```shell
109111
npm install --save-dev typescript-eslint
@@ -183,19 +185,10 @@ export default ts.config(
183185

184186
This plugin provides the following configurations:
185187

186-
- **`eslintPluginSvelte.configs.base`**
187-
Enables correct Svelte parsing.
188-
189-
- **`eslintPluginSvelte.configs.recommended`**
190-
Includes `base` configuration, plus rules to prevent errors or unintended behavior.
191-
192-
- **`eslintPluginSvelte.configs.prettier`**
193-
Disables rules that may conflict with [Prettier](https://prettier.io/).
194-
You still need to configure Prettier to work with Svelte manually, for example, by using [prettier-plugin-svelte](https://github.com/sveltejs/prettier-plugin-svelte).
195-
196-
- **`eslintPluginSvelte.configs.all`**
197-
Includes all available rules.
198-
**Note:** This configuration is not recommended for production use, as it changes with every minor and major version of `eslint-plugin-svelte`. Use at your own risk.
188+
- **`eslintPluginSvelte.configs.base`** ... Enables correct Svelte parsing.
189+
- **`eslintPluginSvelte.configs.recommended`** ... Includes `base` configuration, plus rules to prevent errors or unintended behavior.
190+
- **`eslintPluginSvelte.configs.prettier`** ... Disables rules that may conflict with [Prettier](https://prettier.io/). You still need to configure Prettier to work with Svelte manually, for example, by using [prettier-plugin-svelte](https://github.com/sveltejs/prettier-plugin-svelte).
191+
- **`eslintPluginSvelte.configs.all`** ... Includes all available rules. **Note:** This configuration is not recommended for production use, as it changes with every minor and major version of `eslint-plugin-svelte`. Use at your own risk.
199192

200193
For more details, see [the rule list](https://sveltejs.github.io/eslint-plugin-svelte/rules/) to explore the rules provided by this plugin.
201194

@@ -269,7 +262,7 @@ This project follows [Semantic Versioning](https://semver.org/). Unlike [ESLint
269262

270263
<!--DOCS_IGNORE_END-->
271264

272-
# Rules
265+
## Rules
273266

274267
<!-- prettier-ignore-start -->
275268
<!--RULES_SECTION_START-->
@@ -420,13 +413,13 @@ These rules relate to this plugin works:
420413

421414
<!--DOCS_IGNORE_START-->
422415

423-
# Contributing
416+
## Contributing
424417

425418
Contributions are welcome! Please open an issue or submit a PR. For more details, see [CONTRIBUTING.md](./CONTRIBUTING.md).
426419
Refer to [svelte-eslint-parser](https://github.com/sveltejs/svelte-eslint-parser) for AST details.
427420

428421
<!--DOCS_IGNORE_END-->
429422

430-
# License
423+
## License
431424

432425
See [LICENSE](LICENSE) (MIT).

‎docs-svelte-kit/src/app.css

Lines changed: 184 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -1,105 +1,226 @@
1-
@import "@fontsource/fira-mono";
1+
@import '@fontsource/fira-mono';
2+
@import 'prismjs/themes/prism-tomorrow';
3+
@import '@shikijs/twoslash/style-rich.css';
24

35
:root {
4-
font-family: Arial, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
5-
Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
6-
--font-mono: "Fira Mono", monospace;
7-
--pure-white: #ffffff;
8-
--primary-color: #b9c6d2;
9-
--secondary-color: #676778;
10-
--tertiary-color: #edf0f8;
11-
--accent-color: #ff3e00;
12-
--heading-color: rgba(0, 0, 0, 0.7);
13-
--text-color: #444444;
14-
--background-without-opacity: rgba(255, 255, 255, 0.7);
15-
--column-width: 42rem;
16-
--column-margin-top: 4rem;
6+
font-family: 'Inter', 'Helvetica Neue', 'Arial', sans-serif;
7+
--font-mono: 'Fira Mono', monospace;
8+
--pure-white: #ffffff;
9+
--primary-color: #ffffff;
10+
--secondary-color: #676778;
11+
--tertiary-color: #edf0f8;
12+
--accent-color: #ff3e00;
13+
--heading-color: rgba(0, 0, 0, 0.7);
14+
--text-color: #444444;
15+
--background-without-opacity: rgba(255, 255, 255, 0.95);
16+
--column-width: 42rem;
17+
--column-margin-top: 4rem;
1718
}
1819

1920
body {
20-
min-height: 100vh;
21-
margin: 0;
22-
background-color: var(--primary-color);
23-
}
24-
25-
body::before {
26-
content: "";
27-
width: 80vw;
28-
height: 100vh;
29-
position: absolute;
30-
top: 0;
31-
left: 10vw;
32-
z-index: -1;
33-
background: radial-gradient(
34-
50% 50% at 50% 50%,
35-
var(--pure-white) 0%,
36-
rgba(255, 255, 255, 0) 100%
37-
);
38-
opacity: 0.05;
21+
min-height: 100vh;
22+
margin: 0;
23+
background-color: var(--primary-color);
24+
color: var(--text-color);
3925
}
4026

4127
#svelte {
42-
min-height: 100vh;
43-
display: flex;
44-
flex-direction: column;
28+
min-height: 100vh;
29+
display: flex;
30+
flex-direction: column;
4531
}
4632

4733
h1,
4834
h2,
4935
p {
50-
font-weight: 400;
51-
color: var(--heading-color);
36+
font-weight: 400;
37+
color: var(--heading-color);
5238
}
5339

5440
p {
55-
line-height: 1.5;
41+
line-height: 1.5;
5642
}
5743

5844
a {
59-
color: var(--accent-color);
60-
text-decoration: none;
45+
color: var(--accent-color);
46+
text-decoration: none;
6147
}
62-
6348
a:hover {
64-
text-decoration: underline;
49+
text-decoration: underline;
6550
}
6651

6752
h1 {
68-
font-size: 2rem;
69-
text-align: center;
53+
font-size: 2rem;
54+
margin: 1rem 0;
55+
}
56+
@media (min-width: 720px) {
57+
h1 {
58+
font-size: 2.4rem;
59+
}
7060
}
7161

7262
h2 {
73-
font-size: 1rem;
63+
font-size: 1.6rem;
64+
margin: 1rem 0;
65+
}
66+
67+
h3,
68+
h4,
69+
h5,
70+
h6 {
71+
margin: 0.5rem 0;
72+
font-weight: 400;
73+
color: var(--heading-color);
74+
font-size: 1rem;
75+
}
76+
77+
h1 + h2,
78+
h2 + h3,
79+
h3 + h4,
80+
h4 + h5,
81+
h5 + h6 {
82+
margin-top: 0;
83+
}
84+
85+
ul {
86+
margin: 1rem 0;
7487
}
7588

7689
pre {
77-
font-size: 16px;
78-
font-family: var(--font-mono);
79-
background-color: rgba(255, 255, 255, 0.45);
80-
border-radius: 3px;
81-
box-shadow: 2px 2px 6px rgb(255 255 255 / 25%);
82-
padding: 0.5em;
83-
overflow-x: auto;
84-
color: var(--text-color);
90+
font-size: 16px;
91+
font-family: var(--font-mono);
92+
background-color: rgba(255, 255, 255, 0.45);
93+
border-radius: 3px;
94+
box-shadow: 2px 2px 6px rgb(255 255 255 / 25%);
95+
padding: 0.5em;
96+
overflow-x: auto;
97+
color: var(--text-color);
98+
margin: 0.5rem 0;
8599
}
86100

87101
input,
88102
button {
89-
font-size: inherit;
90-
font-family: inherit;
103+
font-size: inherit;
104+
font-family: inherit;
91105
}
92106

93107
button:focus:not(:focus-visible) {
94-
outline: none;
108+
outline: none;
95109
}
96110

97-
@media (min-width: 720px) {
98-
h1 {
99-
font-size: 2.4rem;
100-
}
111+
:target {
112+
scroll-margin-top: 80px;
101113
}
102114

103-
:target {
104-
scroll-margin-top: 80px;
115+
/* twoslash */
116+
.twoslash .twoslash-popup-container {
117+
transform: translateY(2em);
118+
white-space: pre-wrap;
119+
margin-right: 32px;
120+
}
121+
.twoslash .twoslash-error > span:not(.twoslash-popup-container):not(:has(*)) {
122+
min-width: 6px;
123+
display: inline-block;
124+
}
125+
126+
/*** markdown ***/
127+
:not(pre) > code {
128+
padding: 0.1rem 0.4rem;
129+
margin: 0 0.2rem;
130+
background: #e5eef5;
131+
position: relative;
132+
border-radius: 0.3em;
133+
white-space: nowrap;
134+
color: #444;
135+
-webkit-font-smoothing: initial;
136+
transform: translateY(-2px);
137+
display: inline-block;
138+
}
139+
140+
blockquote {
141+
padding: 0.5rem 2.4rem;
142+
color: #09f;
143+
border: 1px solid #40b3ff;
144+
margin: 1.6rem 2.4rem 2.4rem;
145+
border-radius: 0.4rem;
146+
}
147+
blockquote p {
148+
color: #09f;
149+
}
150+
151+
table {
152+
margin: 0 0 2em;
153+
width: 100%;
154+
font-size: 1rem; /* var(--h5)は未定義なので1remに */
155+
}
156+
td,
157+
th {
158+
text-align: left;
159+
border-bottom: 1px solid rgba(0 0 0 / 0.1);
160+
padding: 0.4rem 0.8rem 0.4rem 0;
161+
}
162+
163+
/* custom container */
164+
.custom-block .custom-block-title {
165+
font-weight: 600;
166+
margin-bottom: -0.4rem;
167+
}
168+
169+
.custom-block.danger,
170+
.custom-block.tip,
171+
.custom-block.warning {
172+
padding: 0.1rem 1.5rem;
173+
border-left-width: 4px;
174+
border-left-style: solid;
175+
margin: 1rem 0;
176+
}
177+
178+
.custom-block.tip {
179+
background-color: #f3f5f7;
180+
border-color: #42b983;
181+
}
182+
183+
.custom-block.warning {
184+
background-color: rgba(255, 229, 100, 0.3);
185+
border-color: #e7c000;
186+
color: #6b5900;
187+
}
188+
.custom-block.warning .custom-block-title {
189+
color: #b29400;
190+
}
191+
.custom-block.warning a {
192+
color: #2c3e50;
193+
}
194+
195+
.custom-block.danger {
196+
background-color: #ffe6e6;
197+
border-color: #c00;
198+
color: #4d0000;
199+
}
200+
.custom-block.danger .custom-block-title {
201+
color: #900;
202+
}
203+
.custom-block.danger a {
204+
color: #2c3e50;
205+
}
206+
207+
.custom-block.details {
208+
display: block;
209+
position: relative;
210+
border-radius: 2px;
211+
margin: 1.6em 0;
212+
padding: 1.6em;
213+
background-color: #eee;
214+
}
215+
.custom-block.details h4 {
216+
margin-top: 0;
217+
}
218+
.custom-block.details figure:last-child,
219+
.custom-block.details p:last-child {
220+
margin-bottom: 0;
221+
padding-bottom: 0;
222+
}
223+
.custom-block.details summary {
224+
outline: none;
225+
cursor: pointer;
105226
}

0 commit comments

Comments
 (0)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy