Skip to content

Commit 259067e

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

12 files changed

+368
-329
lines changed

‎README.md

+15-22
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

+184-63
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)