Skip to content

Commit f7c608c

Browse files
committed
basic docs
1 parent 3c33ae1 commit f7c608c

15 files changed

+958
-46
lines changed

.prettierrc

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{
2-
"useTabs": true,
2+
"useTabs": false,
33
"singleQuote": true,
44
"trailingComma": "none",
55
"printWidth": 100,

package.json

+8-5
Original file line numberDiff line numberDiff line change
@@ -17,24 +17,27 @@
1717
"@typescript-eslint/parser": "^4.19.0",
1818
"autoprefixer": "^10.2.6",
1919
"cssnano": "^5.0.5",
20+
"eslint": "^7.22.0",
2021
"eslint-config-prettier": "^8.1.0",
2122
"eslint-plugin-svelte3": "^3.2.0",
22-
"eslint": "^7.22.0",
2323
"mdsvex": "^0.9.0",
24-
"postcss-load-config": "^3.0.1",
2524
"postcss": "^8.3.0",
26-
"prettier-plugin-svelte": "^2.2.0",
25+
"postcss-load-config": "^3.0.1",
2726
"prettier": "~2.2.1",
27+
"prettier-plugin-svelte": "^2.2.0",
2828
"rehype-autolink-headings": "^5.0.1",
2929
"rehype-slug": "^4.0.1",
3030
"remark-abbr": "^1.4.1",
3131
"remark-github": "^10.0.1",
32+
"svelte": "^3.34.0",
3233
"svelte-check": "^2.0.0",
3334
"svelte-preprocess": "^4.0.0",
34-
"svelte": "^3.34.0",
3535
"tailwindcss": "^2.1.4",
3636
"tslib": "^2.0.0",
3737
"typescript": "^4.0.0"
3838
},
39-
"type": "module"
39+
"type": "module",
40+
"dependencies": {
41+
"@tailwindcss/typography": "^0.4.1"
42+
}
4043
}

pnpm-lock.yaml

+24-2
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

src/app.css

+20
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,23 @@
11
@tailwind base;
22
@tailwind components;
33
@tailwind utilities;
4+
5+
button {
6+
@apply inline-flex items-center px-4 py-2 border border-gray-300 shadow-sm text-sm sm:text-lg font-medium rounded-md text-gray-700 bg-gray-100;
7+
}
8+
9+
.prose {
10+
max-width: none;
11+
}
12+
13+
/* disable prose styles on dialogs */
14+
[role='dialog'] h1,
15+
[role='dialog'] h2,
16+
[role='dialog'] h3,
17+
[role='dialog'] h4,
18+
[role='dialog'] h5,
19+
[role='dialog'] h6,
20+
[role='dialog'] p {
21+
margin-top: initial !important;
22+
margin-bottom: initial !important;
23+
}

src/lib/Modal.svelte

Whitespace-only changes.

src/lib/ModalStack.svelte

+8-17
Original file line numberDiff line numberDiff line change
@@ -9,11 +9,11 @@
99
import { getContext, setContext } from 'svelte'
1010
import { writable } from 'svelte/store'
1111
12-
export let exitBeforeEnter
12+
export let exitBeforeEnter = false
1313
1414
let stack = writable([])
15-
let transitioning = writable(null)
1615
let action = writable(null)
16+
let transitioning = false
1717
1818
function pop(amount = 1) {
1919
$stack = [...$stack].slice(0, $stack.length - amount)
@@ -24,12 +24,12 @@
2424
}
2525
2626
function closeModals(amount = 1) {
27-
if (exitBeforeEnter && $transitioning === 'out') {
27+
if (exitBeforeEnter && transitioning) {
2828
return
2929
}
3030
3131
if (exitBeforeEnter && $stack.length > 0) {
32-
$transitioning = 'out'
32+
transitioning = true
3333
}
3434
3535
$action = 'pop'
@@ -44,7 +44,7 @@
4444
function openModal(component, props, options) {
4545
let newStack = [...$stack]
4646
47-
if (exitBeforeEnter && $transitioning === 'out') {
47+
if (exitBeforeEnter && transitioning) {
4848
return
4949
}
5050
@@ -55,7 +55,7 @@
5555
}
5656
5757
if (exitBeforeEnter && $stack.length > 0) {
58-
$transitioning = 'out'
58+
transitioning = true
5959
}
6060
6161
$stack = [...newStack, { component, props }]
@@ -67,14 +67,11 @@
6767
closeModals,
6868
closeAllModals,
6969
stack,
70-
transitioning,
7170
action
7271
}
7372
7473
setContext('svelte-modal-stack', context)
7574
76-
// $: console.log($transitioning)
77-
7875
</script>
7976
8077
{#if $stack.length > 0}
@@ -85,15 +82,9 @@
8582
{#each $stack as modal, i (i)}
8683
<svelte:component
8784
this={modal.component}
88-
isOpen={i === $stack.length - 1 && (!exitBeforeEnter || $transitioning !== 'out')}
89-
on:introstart={() => {
90-
$transitioning = 'in'
91-
}}
92-
on:introend={() => {
93-
$transitioning = null
94-
}}
85+
isOpen={i === $stack.length - 1 && (!exitBeforeEnter || !transitioning)}
9586
on:outroend={() => {
96-
$transitioning = null
87+
transitioning = false
9788
}}
9889
{...modal.props || {}}
9990
/>

src/lib/ModalStack.svelte.d.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -52,6 +52,6 @@ export default class ModalStack extends SvelteComponentTyped<
5252
{
5353
backdrop: ModalStackContext
5454
modals: ModalStackContext
55-
default: Record<string, never>
55+
default: ModalStackContext
5656
}
5757
> {}

src/prism.css

+157
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,157 @@
1+
/**
2+
* MIT License
3+
* Copyright (c) 2018 Sarah Drasner
4+
* Sarah Drasner's[@sdras] Night Owl
5+
* Ported by Sara vieria [@SaraVieira]
6+
* Added by Souvik Mandal [@SimpleIndian]
7+
*/
8+
9+
code[class*='language-'],
10+
pre[class*='language-'] {
11+
@apply text-sm md:text-base;
12+
color: #d6deeb;
13+
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
14+
text-align: left;
15+
white-space: pre;
16+
word-spacing: normal;
17+
word-break: normal;
18+
word-wrap: normal;
19+
line-height: 1.5;
20+
21+
-moz-tab-size: 4;
22+
-o-tab-size: 4;
23+
tab-size: 4;
24+
25+
-webkit-hyphens: none;
26+
-moz-hyphens: none;
27+
-ms-hyphens: none;
28+
hyphens: none;
29+
}
30+
31+
pre[class*='language-']::-moz-selection,
32+
pre[class*='language-'] ::-moz-selection,
33+
code[class*='language-']::-moz-selection,
34+
code[class*='language-'] ::-moz-selection {
35+
text-shadow: none;
36+
background: rgba(29, 59, 83, 0.99);
37+
}
38+
39+
pre[class*='language-']::selection,
40+
pre[class*='language-'] ::selection,
41+
code[class*='language-']::selection,
42+
code[class*='language-'] ::selection {
43+
text-shadow: none;
44+
background: rgba(29, 59, 83, 0.99);
45+
}
46+
47+
@media print {
48+
code[class*='language-'],
49+
pre[class*='language-'] {
50+
text-shadow: none;
51+
}
52+
}
53+
54+
/* Code blocks */
55+
pre[class*='language-'] {
56+
padding: 1em;
57+
margin: 0.5em 0;
58+
overflow: auto;
59+
}
60+
61+
:not(pre) > code[class*='language-'],
62+
pre[class*='language-'] {
63+
color: #d6deeb;
64+
background: #19212e;
65+
}
66+
67+
:not(pre) > code[class*='language-'] {
68+
padding: 0.1em;
69+
border-radius: 0.3em;
70+
white-space: normal;
71+
}
72+
73+
.token.comment,
74+
.token.prolog,
75+
.token.cdata {
76+
color: rgb(99, 119, 119);
77+
}
78+
79+
.token.punctuation {
80+
color: rgb(199, 146, 234);
81+
}
82+
83+
.namespace {
84+
color: rgb(178, 204, 214);
85+
}
86+
87+
.token.deleted {
88+
color: rgba(239, 83, 80, 0.56);
89+
font-style: italic;
90+
}
91+
92+
.token.symbol,
93+
.token.property {
94+
color: rgb(128, 203, 196);
95+
}
96+
97+
.token.tag,
98+
.token.operator,
99+
.token.keyword {
100+
color: rgb(127, 219, 202);
101+
}
102+
103+
.token.boolean {
104+
color: rgb(255, 88, 116);
105+
}
106+
107+
.token.number {
108+
color: rgb(247, 140, 108);
109+
}
110+
111+
.token.constant,
112+
.token.function,
113+
.token.builtin,
114+
.token.char {
115+
color: rgb(130, 170, 255);
116+
}
117+
118+
.token.selector,
119+
.token.doctype {
120+
color: rgb(199, 146, 234);
121+
font-style: italic;
122+
}
123+
124+
.token.attr-name,
125+
.token.inserted {
126+
color: rgb(173, 219, 103);
127+
font-style: italic;
128+
}
129+
130+
.token.string,
131+
.token.url,
132+
.token.entity,
133+
.language-css .token.string,
134+
.style .token.string {
135+
color: rgb(173, 219, 103);
136+
}
137+
138+
.token.class-name,
139+
.token.atrule,
140+
.token.attr-value {
141+
color: rgb(255, 203, 139);
142+
}
143+
144+
.token.regex,
145+
.token.important,
146+
.token.variable {
147+
color: rgb(214, 222, 235);
148+
}
149+
150+
.token.important,
151+
.token.bold {
152+
font-weight: bold;
153+
}
154+
155+
.token.italic {
156+
font-style: italic;
157+
}

0 commit comments

Comments
 (0)