From 34d94a9e3cc4c76b90c7809814820bc9c5e81df5 Mon Sep 17 00:00:00 2001 From: itsumura-h Date: Sat, 18 Feb 2023 12:30:00 +0900 Subject: [PATCH 01/16] wip solve cdn dependency --- examples/example/app.nim | 4 +- examples/example/build.sh | 3 +- examples/example/components/drawer.nim | 1 + examples/example/components/text_body.nim | 30 + examples/example/index.html | 5 +- examples/example/main.nim | 3 +- examples/example/pages/api_access_page.nim | 55 + examples/example/pages/top_page.nim | 26 +- examples/example/pages/use_state_page.nim | 3 + examples/example/public/typography.css | 7833 ++++++++++++++++++++ examples/poc-solid/raw.js | 33 +- examples/preact/components/parent.nim | 13 +- examples/preact/index.html | 4 +- examples/preact/main.nim | 3 +- examples/preact/raw.js | 18 +- src/palladian/controll_flow.nim | 17 +- src/palladian/hooks.nim | 73 +- src/palladian/poc-solid.nim | 8 +- src/palladian/preact.nim | 8 +- src/palladian/router.nim | 8 +- src/palladian/strformat.nim | 8 +- src/server.nim | 24 +- 22 files changed, 8078 insertions(+), 102 deletions(-) create mode 100644 examples/example/components/text_body.nim create mode 100644 examples/example/pages/api_access_page.nim create mode 100644 examples/example/public/typography.css diff --git a/examples/example/app.nim b/examples/example/app.nim index f4e5380..729e141 100644 --- a/examples/example/app.nim +++ b/examples/example/app.nim @@ -9,11 +9,12 @@ import ./pages/use_state_page import ./pages/use_effect_page import ./pages/signal_page import ./pages/controll_flow_page +import ./pages/api_access_page proc App():Component {.exportc.} = return html(fmt""" -
+
<${Header} />
@@ -27,6 +28,7 @@ proc App():Component {.exportc.} = <${UseEffectPage} path="/use-effect" /> <${SignalPage} path="/signal" /> <${ControllFlowPage} path="/controll-flow" /> + <${ApiAccessPage} path="/api-access" />
diff --git a/examples/example/build.sh b/examples/example/build.sh index efc6d05..59c4901 100755 --- a/examples/example/build.sh +++ b/examples/example/build.sh @@ -1 +1,2 @@ -nim js -d:release app && nim c -r -f main +# nim js -d:release -d:nimExperimentalAsyncjsThen app && nim c -r -f main +nim js -d:release -d:nimExperimentalAsyncjsThen app \ No newline at end of file diff --git a/examples/example/components/drawer.nim b/examples/example/components/drawer.nim index c8ad6bd..8e41ea5 100644 --- a/examples/example/components/drawer.nim +++ b/examples/example/components/drawer.nim @@ -14,6 +14,7 @@ proc Drawer*():Component {.exportc.} =
  • <${Link} href="/use-effect" activeClassName="active">useEffect
  • <${Link} href="/signal" activeClassName="active">signal
  • <${Link} href="/controll-flow" activeClassName="active">controll flow
    • +
  • <${Link} href="/api-access" activeClassName="active">api access
    • """) diff --git a/examples/example/components/text_body.nim b/examples/example/components/text_body.nim new file mode 100644 index 0000000..1e00936 --- /dev/null +++ b/examples/example/components/text_body.nim @@ -0,0 +1,30 @@ +import std/jsffi +import std/jsconsole +import ../../../src/palladian +import ../../../src/palladian/strformat + +proc TextBodyCenter*(props:JsObject):Component {.exportc.} = + let props {.exportc.} = props + return html(fmt""" +
    +
    +
    +

    ${props.title}

    +

    ${props.children}

    +
    +
    +
    + """) + +proc TextWrap*(props:JsObject):Component {.exportc.} = + let props {.exportc.} = props + return html(fmt""" +
    +
    +
    +

    ${props.title}

    + ${props.children} +
    +
    +
    + """) diff --git a/examples/example/index.html b/examples/example/index.html index 69fa53b..436a7e7 100644 --- a/examples/example/index.html +++ b/examples/example/index.html @@ -1,9 +1,10 @@ - + - + + Document diff --git a/examples/example/main.nim b/examples/example/main.nim index 2cf83da..3adaa83 100644 --- a/examples/example/main.nim +++ b/examples/example/main.nim @@ -2,9 +2,8 @@ import std/asyncdispatch import std/asynchttpserver import ../../src/server -const html = staticRead("./index.html") - proc controller(req:Request):Future[string] {.async.}= + let html = readFile("index.html") return html var routes:seq[Route] = @[] diff --git a/examples/example/pages/api_access_page.nim b/examples/example/pages/api_access_page.nim new file mode 100644 index 0000000..fa0c7f6 --- /dev/null +++ b/examples/example/pages/api_access_page.nim @@ -0,0 +1,55 @@ +import std/asyncjs +import std/jsconsole +import std/jsffi +import std/jsfetch +import std/json +import ../../../src/palladian +import ../../../src/palladian/hooks +import ../../../src/palladian/controll_flow +import ../../../src/palladian/strformat +import ../components/text_body + + +proc ApiAccessPage*():Component {.exportc.} = + let (btcPrice {.exportc.}, setBtcPrice) = useState(newJsObject()) + + useEffect(proc() {.async.}= + let res = await fetch("https://api.coindesk.com/v1/bpi/currentprice.json".cstring) + let json = await res.json() + var btcPriceObj = newJsObject() + btcPriceObj["usd"] = json["bpi"]["USD"]["rate_float"] + btcPriceObj["eur"] = json["bpi"]["EUR"]["rate_float"] + btcPriceObj["gbp"] = json["bpi"]["GBP"]["rate_float"] + btcPriceObj["time"] = json["time"]["updatedISO"] + setBtcPrice(btcPriceObj) + , []) + + return html(fmt""" + <${TextWrap} title="api access"> + <${Show} when=${btcPrice} fallback=${html`

    ...loading

    `}> +

    updated ${btcPrice["time"]}

    + + + + + + + + + + + + + + + + + + + + + +
    Currencyrate
    USD${btcPrice["usd"]}
    Euro${btcPrice["eur"]}
    GBP${btcPrice["gbp"]}
    + + + """) diff --git a/examples/example/pages/top_page.nim b/examples/example/pages/top_page.nim index 35b7d24..4515c3a 100644 --- a/examples/example/pages/top_page.nim +++ b/examples/example/pages/top_page.nim @@ -1,5 +1,7 @@ +import std/jsffi import ../../../src/palladian import ../../../src/palladian/strformat +import ../components/text_body proc TopPage*():Component {.exportc.} = return html(fmt""" @@ -13,13 +15,21 @@ proc TopPage*():Component {.exportc.} = -
    -
    -
    -

    Why Preact?

    -

    In creating a front-end framework made by Nim, we needed something that did not require a NodeJS environment and did not require transpiling using Babel or other software. Preact can use all of its features with a CDN call, and has a very compact library size of 3KB.

    -
    -
    -
    + <${TextBodyCenter} title="Why Preact?"> + In creating a front-end framework made by Nim, we needed something that did not require a NodeJS environment and did not require transpiling using Babel or other software. Preact can use all of its features with a CDN call, and has a very compact library size of 3KB. + """) + +#[ + +
    +
    +
    +

    Why Preact?

    +

    In creating a front-end framework made by Nim, we needed something that did not require a NodeJS environment and did not require transpiling using Babel or other software. Preact can use all of its features with a CDN call, and has a very compact library size of 3KB.

    +
    +
    +
    + +]# \ No newline at end of file diff --git a/examples/example/pages/use_state_page.nim b/examples/example/pages/use_state_page.nim index 27db951..80d47d1 100644 --- a/examples/example/pages/use_state_page.nim +++ b/examples/example/pages/use_state_page.nim @@ -1,6 +1,9 @@ +import std/jsffi import ../../../src/palladian +import ../../../src/palladian/hooks import ../../../src/palladian/strformat + proc UseStatePage*():Component {.exportc.} = return html(fmt"""

    useState

    diff --git a/examples/example/public/typography.css b/examples/example/public/typography.css new file mode 100644 index 0000000..22f89dc --- /dev/null +++ b/examples/example/public/typography.css @@ -0,0 +1,7833 @@ +.prose { + + max-width: 65ch; +} + +.prose [class~="lead"] { + + font-size: 1.25em; + line-height: 1.6; + margin-top: 1.2em; + margin-bottom: 1.2em; +} + +.prose a { + + text-decoration: underline; + font-weight: 500; +} + +.prose strong { + + font-weight: 600; +} + +.prose ol[type="A"] { + --list-counter-style: upper-alpha; +} + +.prose ol[type="a"] { + --list-counter-style: lower-alpha; +} + +.prose ol[type="A" s] { + --list-counter-style: upper-alpha; +} + +.prose ol[type="a" s] { + --list-counter-style: lower-alpha; +} + +.prose ol[type="I"] { + --list-counter-style: upper-roman; +} + +.prose ol[type="i"] { + --list-counter-style: lower-roman; +} + +.prose ol[type="I" s] { + --list-counter-style: upper-roman; +} + +.prose ol[type="i" s] { + --list-counter-style: lower-roman; +} + +.prose ol[type="1"] { + --list-counter-style: decimal; +} + +.prose ol>li { + position: relative; + padding-left: 1.75em; +} + +.prose ol>li::before { + content: counter(list-item, var(--list-counter-style, decimal)) "."; + position: absolute; + font-weight: 400; + + left: 0; +} + +.prose ul>li { + position: relative; + padding-left: 1.75em; +} + +.prose ul>li::before { + content: ""; + position: absolute; + + border-radius: 50%; + width: 0.375em; + height: 0.375em; + top: calc(0.875em - 0.1875em); + left: 0.25em; +} + +.prose hr { + + border-top-width: 1px; + margin-top: 3em; + margin-bottom: 3em; +} + +.prose blockquote { + font-weight: 500; + font-style: italic; + + border-left-width: 0.25rem; + + quotes: "\201C" "\201D" "\2018" "\2019"; + margin-top: 1.6em; + margin-bottom: 1.6em; + padding-left: 1em; +} + +.prose blockquote p:first-of-type::before { + content: open-quote; +} + +.prose blockquote p:last-of-type::after { + content: close-quote; +} + +.prose h1 { + + font-weight: 800; + font-size: 2.25em; + margin-top: 0; + margin-bottom: 0.8888889em; + line-height: 1.1111111; +} + +.prose h2 { + + font-weight: 700; + font-size: 1.5em; + margin-top: 2em; + margin-bottom: 1em; + line-height: 1.3333333; +} + +.prose h3 { + + font-weight: 600; + font-size: 1.25em; + margin-top: 1.6em; + margin-bottom: 0.6em; + line-height: 1.6; +} + +.prose h4 { + + font-weight: 600; + margin-top: 1.5em; + margin-bottom: 0.5em; + line-height: 1.5; +} + +.prose figure figcaption { + + font-size: 0.875em; + line-height: 1.4285714; + margin-top: 0.8571429em; +} + +.prose code { + + font-weight: 600; + font-size: 0.875em; +} + +.prose code::before { + content: "`"; +} + +.prose code::after { + content: "`"; +} + +.prose a code {} + +.prose pre { + + + overflow-x: auto; + font-size: 0.875em; + line-height: 1.7142857; + margin-top: 1.7142857em; + margin-bottom: 1.7142857em; + border-radius: 0.375rem; + padding-top: 0.8571429em; + padding-right: 1.1428571em; + padding-bottom: 0.8571429em; + padding-left: 1.1428571em; +} + +.prose pre code { + + border-width: 0; + border-radius: 0; + padding: 0; + font-weight: 400; + + font-size: inherit; + font-family: inherit; + line-height: inherit; +} + +.prose pre code::before { + content: none; +} + +.prose pre code::after { + content: none; +} + +.prose table { + width: 100%; + table-layout: auto; + text-align: left; + margin-top: 2em; + margin-bottom: 2em; + font-size: 0.875em; + line-height: 1.7142857; +} + +.prose thead { + + font-weight: 600; + border-bottom-width: 1px; + +} + +.prose thead th { + vertical-align: bottom; + padding-right: 0.5714286em; + padding-bottom: 0.5714286em; + padding-left: 0.5714286em; +} + +.prose tbody tr { + border-bottom-width: 1px; + +} + +.prose tbody tr:last-child { + border-bottom-width: 0; +} + +.prose tbody td { + vertical-align: top; + padding-top: 0.5714286em; + padding-right: 0.5714286em; + padding-bottom: 0.5714286em; + padding-left: 0.5714286em; +} + +.prose { + font-size: 1rem; + line-height: 1.75; +} + +.prose p { + margin-top: 1.25em; + margin-bottom: 1.25em; +} + +.prose img { + margin-top: 2em; + margin-bottom: 2em; +} + +.prose video { + margin-top: 2em; + margin-bottom: 2em; +} + +.prose figure { + margin-top: 2em; + margin-bottom: 2em; +} + +.prose figure>* { + margin-top: 0; + margin-bottom: 0; +} + +.prose h2 code { + font-size: 0.875em; +} + +.prose h3 code { + font-size: 0.9em; +} + +.prose ol { + margin-top: 1.25em; + margin-bottom: 1.25em; +} + +.prose ul { + margin-top: 1.25em; + margin-bottom: 1.25em; +} + +.prose li { + margin-top: 0.5em; + margin-bottom: 0.5em; +} + +.prose>ul>li p { + margin-top: 0.75em; + margin-bottom: 0.75em; +} + +.prose>ul>li>*:first-child { + margin-top: 1.25em; +} + +.prose>ul>li>*:last-child { + margin-bottom: 1.25em; +} + +.prose>ol>li>*:first-child { + margin-top: 1.25em; +} + +.prose>ol>li>*:last-child { + margin-bottom: 1.25em; +} + +.prose ul ul, +.prose ul ol, +.prose ol ul, +.prose ol ol { + margin-top: 0.75em; + margin-bottom: 0.75em; +} + +.prose hr+* { + margin-top: 0; +} + +.prose h2+* { + margin-top: 0; +} + +.prose h3+* { + margin-top: 0; +} + +.prose h4+* { + margin-top: 0; +} + +.prose thead th:first-child { + padding-left: 0; +} + +.prose thead th:last-child { + padding-right: 0; +} + +.prose tbody td:first-child { + padding-left: 0; +} + +.prose tbody td:last-child { + padding-right: 0; +} + +.prose> :first-child { + margin-top: 0; +} + +.prose> :last-child { + margin-bottom: 0; +} + +.prose-sm { + font-size: 0.875rem; + line-height: 1.7142857; +} + +.prose-sm p { + margin-top: 1.1428571em; + margin-bottom: 1.1428571em; +} + +.prose-sm [class~="lead"] { + font-size: 1.2857143em; + line-height: 1.5555556; + margin-top: 0.8888889em; + margin-bottom: 0.8888889em; +} + +.prose-sm blockquote { + margin-top: 1.3333333em; + margin-bottom: 1.3333333em; + padding-left: 1.1111111em; +} + +.prose-sm h1 { + font-size: 2.1428571em; + margin-top: 0; + margin-bottom: 0.8em; + line-height: 1.2; +} + +.prose-sm h2 { + font-size: 1.4285714em; + margin-top: 1.6em; + margin-bottom: 0.8em; + line-height: 1.4; +} + +.prose-sm h3 { + font-size: 1.2857143em; + margin-top: 1.5555556em; + margin-bottom: 0.4444444em; + line-height: 1.5555556; +} + +.prose-sm h4 { + margin-top: 1.4285714em; + margin-bottom: 0.5714286em; + line-height: 1.4285714; +} + +.prose-sm img { + margin-top: 1.7142857em; + margin-bottom: 1.7142857em; +} + +.prose-sm video { + margin-top: 1.7142857em; + margin-bottom: 1.7142857em; +} + +.prose-sm figure { + margin-top: 1.7142857em; + margin-bottom: 1.7142857em; +} + +.prose-sm figure>* { + margin-top: 0; + margin-bottom: 0; +} + +.prose-sm figure figcaption { + font-size: 0.8571429em; + line-height: 1.3333333; + margin-top: 0.6666667em; +} + +.prose-sm code { + font-size: 0.8571429em; +} + +.prose-sm h2 code { + font-size: 0.9em; +} + +.prose-sm h3 code { + font-size: 0.8888889em; +} + +.prose-sm pre { + font-size: 0.8571429em; + line-height: 1.6666667; + margin-top: 1.6666667em; + margin-bottom: 1.6666667em; + border-radius: 0.25rem; + padding-top: 0.6666667em; + padding-right: 1em; + padding-bottom: 0.6666667em; + padding-left: 1em; +} + +.prose-sm ol { + margin-top: 1.1428571em; + margin-bottom: 1.1428571em; +} + +.prose-sm ul { + margin-top: 1.1428571em; + margin-bottom: 1.1428571em; +} + +.prose-sm li { + margin-top: 0.2857143em; + margin-bottom: 0.2857143em; +} + +.prose-sm ol>li { + padding-left: 1.5714286em; +} + +.prose-sm ol>li::before { + left: 0; +} + +.prose-sm ul>li { + padding-left: 1.5714286em; +} + +.prose-sm ul>li::before { + height: 0.3571429em; + width: 0.3571429em; + top: calc(0.8571429em - 0.1785714em); + left: 0.2142857em; +} + +.prose-sm>ul>li p { + margin-top: 0.5714286em; + margin-bottom: 0.5714286em; +} + +.prose-sm>ul>li>*:first-child { + margin-top: 1.1428571em; +} + +.prose-sm>ul>li>*:last-child { + margin-bottom: 1.1428571em; +} + +.prose-sm>ol>li>*:first-child { + margin-top: 1.1428571em; +} + +.prose-sm>ol>li>*:last-child { + margin-bottom: 1.1428571em; +} + +.prose-sm ul ul, +.prose-sm ul ol, +.prose-sm ol ul, +.prose-sm ol ol { + margin-top: 0.5714286em; + margin-bottom: 0.5714286em; +} + +.prose-sm hr { + margin-top: 2.8571429em; + margin-bottom: 2.8571429em; +} + +.prose-sm hr+* { + margin-top: 0; +} + +.prose-sm h2+* { + margin-top: 0; +} + +.prose-sm h3+* { + margin-top: 0; +} + +.prose-sm h4+* { + margin-top: 0; +} + +.prose-sm table { + font-size: 0.8571429em; + line-height: 1.5; +} + +.prose-sm thead th { + padding-right: 1em; + padding-bottom: 0.6666667em; + padding-left: 1em; +} + +.prose-sm thead th:first-child { + padding-left: 0; +} + +.prose-sm thead th:last-child { + padding-right: 0; +} + +.prose-sm tbody td { + padding-top: 0.6666667em; + padding-right: 1em; + padding-bottom: 0.6666667em; + padding-left: 1em; +} + +.prose-sm tbody td:first-child { + padding-left: 0; +} + +.prose-sm tbody td:last-child { + padding-right: 0; +} + +.prose-sm> :first-child { + margin-top: 0; +} + +.prose-sm> :last-child { + margin-bottom: 0; +} + +.prose-lg { + font-size: 1.125rem; + line-height: 1.7777778; +} + +.prose-lg p { + margin-top: 1.3333333em; + margin-bottom: 1.3333333em; +} + +.prose-lg [class~="lead"] { + font-size: 1.2222222em; + line-height: 1.4545455; + margin-top: 1.0909091em; + margin-bottom: 1.0909091em; +} + +.prose-lg blockquote { + margin-top: 1.6666667em; + margin-bottom: 1.6666667em; + padding-left: 1em; +} + +.prose-lg h1 { + font-size: 2.6666667em; + margin-top: 0; + margin-bottom: 0.8333333em; + line-height: 1; +} + +.prose-lg h2 { + font-size: 1.6666667em; + margin-top: 1.8666667em; + margin-bottom: 1.0666667em; + line-height: 1.3333333; +} + +.prose-lg h3 { + font-size: 1.3333333em; + margin-top: 1.6666667em; + margin-bottom: 0.6666667em; + line-height: 1.5; +} + +.prose-lg h4 { + margin-top: 1.7777778em; + margin-bottom: 0.4444444em; + line-height: 1.5555556; +} + +.prose-lg img { + margin-top: 1.7777778em; + margin-bottom: 1.7777778em; +} + +.prose-lg video { + margin-top: 1.7777778em; + margin-bottom: 1.7777778em; +} + +.prose-lg figure { + margin-top: 1.7777778em; + margin-bottom: 1.7777778em; +} + +.prose-lg figure>* { + margin-top: 0; + margin-bottom: 0; +} + +.prose-lg figure figcaption { + font-size: 0.8888889em; + line-height: 1.5; + margin-top: 1em; +} + +.prose-lg code { + font-size: 0.8888889em; +} + +.prose-lg h2 code { + font-size: 0.8666667em; +} + +.prose-lg h3 code { + font-size: 0.875em; +} + +.prose-lg pre { + font-size: 0.8888889em; + line-height: 1.75; + margin-top: 2em; + margin-bottom: 2em; + border-radius: 0.375rem; + padding-top: 1em; + padding-right: 1.5em; + padding-bottom: 1em; + padding-left: 1.5em; +} + +.prose-lg ol { + margin-top: 1.3333333em; + margin-bottom: 1.3333333em; +} + +.prose-lg ul { + margin-top: 1.3333333em; + margin-bottom: 1.3333333em; +} + +.prose-lg li { + margin-top: 0.6666667em; + margin-bottom: 0.6666667em; +} + +.prose-lg ol>li { + padding-left: 1.6666667em; +} + +.prose-lg ol>li::before { + left: 0; +} + +.prose-lg ul>li { + padding-left: 1.6666667em; +} + +.prose-lg ul>li::before { + width: 0.3333333em; + height: 0.3333333em; + top: calc(0.8888889em - 0.1666667em); + left: 0.2222222em; +} + +.prose-lg>ul>li p { + margin-top: 0.8888889em; + margin-bottom: 0.8888889em; +} + +.prose-lg>ul>li>*:first-child { + margin-top: 1.3333333em; +} + +.prose-lg>ul>li>*:last-child { + margin-bottom: 1.3333333em; +} + +.prose-lg>ol>li>*:first-child { + margin-top: 1.3333333em; +} + +.prose-lg>ol>li>*:last-child { + margin-bottom: 1.3333333em; +} + +.prose-lg ul ul, +.prose-lg ul ol, +.prose-lg ol ul, +.prose-lg ol ol { + margin-top: 0.8888889em; + margin-bottom: 0.8888889em; +} + +.prose-lg hr { + margin-top: 3.1111111em; + margin-bottom: 3.1111111em; +} + +.prose-lg hr+* { + margin-top: 0; +} + +.prose-lg h2+* { + margin-top: 0; +} + +.prose-lg h3+* { + margin-top: 0; +} + +.prose-lg h4+* { + margin-top: 0; +} + +.prose-lg table { + font-size: 0.8888889em; + line-height: 1.5; +} + +.prose-lg thead th { + padding-right: 0.75em; + padding-bottom: 0.75em; + padding-left: 0.75em; +} + +.prose-lg thead th:first-child { + padding-left: 0; +} + +.prose-lg thead th:last-child { + padding-right: 0; +} + +.prose-lg tbody td { + padding-top: 0.75em; + padding-right: 0.75em; + padding-bottom: 0.75em; + padding-left: 0.75em; +} + +.prose-lg tbody td:first-child { + padding-left: 0; +} + +.prose-lg tbody td:last-child { + padding-right: 0; +} + +.prose-lg> :first-child { + margin-top: 0; +} + +.prose-lg> :last-child { + margin-bottom: 0; +} + +.prose-xl { + font-size: 1.25rem; + line-height: 1.8; +} + +.prose-xl p { + margin-top: 1.2em; + margin-bottom: 1.2em; +} + +.prose-xl [class~="lead"] { + font-size: 1.2em; + line-height: 1.5; + margin-top: 1em; + margin-bottom: 1em; +} + +.prose-xl blockquote { + margin-top: 1.6em; + margin-bottom: 1.6em; + padding-left: 1.0666667em; +} + +.prose-xl h1 { + font-size: 2.8em; + margin-top: 0; + margin-bottom: 0.8571429em; + line-height: 1; +} + +.prose-xl h2 { + font-size: 1.8em; + margin-top: 1.5555556em; + margin-bottom: 0.8888889em; + line-height: 1.1111111; +} + +.prose-xl h3 { + font-size: 1.5em; + margin-top: 1.6em; + margin-bottom: 0.6666667em; + line-height: 1.3333333; +} + +.prose-xl h4 { + margin-top: 1.8em; + margin-bottom: 0.6em; + line-height: 1.6; +} + +.prose-xl img { + margin-top: 2em; + margin-bottom: 2em; +} + +.prose-xl video { + margin-top: 2em; + margin-bottom: 2em; +} + +.prose-xl figure { + margin-top: 2em; + margin-bottom: 2em; +} + +.prose-xl figure>* { + margin-top: 0; + margin-bottom: 0; +} + +.prose-xl figure figcaption { + font-size: 0.9em; + line-height: 1.5555556; + margin-top: 1em; +} + +.prose-xl code { + font-size: 0.9em; +} + +.prose-xl h2 code { + font-size: 0.8611111em; +} + +.prose-xl h3 code { + font-size: 0.9em; +} + +.prose-xl pre { + font-size: 0.9em; + line-height: 1.7777778; + margin-top: 2em; + margin-bottom: 2em; + border-radius: 0.5rem; + padding-top: 1.1111111em; + padding-right: 1.3333333em; + padding-bottom: 1.1111111em; + padding-left: 1.3333333em; +} + +.prose-xl ol { + margin-top: 1.2em; + margin-bottom: 1.2em; +} + +.prose-xl ul { + margin-top: 1.2em; + margin-bottom: 1.2em; +} + +.prose-xl li { + margin-top: 0.6em; + margin-bottom: 0.6em; +} + +.prose-xl ol>li { + padding-left: 1.8em; +} + +.prose-xl ol>li::before { + left: 0; +} + +.prose-xl ul>li { + padding-left: 1.8em; +} + +.prose-xl ul>li::before { + width: 0.35em; + height: 0.35em; + top: calc(0.9em - 0.175em); + left: 0.25em; +} + +.prose-xl>ul>li p { + margin-top: 0.8em; + margin-bottom: 0.8em; +} + +.prose-xl>ul>li>*:first-child { + margin-top: 1.2em; +} + +.prose-xl>ul>li>*:last-child { + margin-bottom: 1.2em; +} + +.prose-xl>ol>li>*:first-child { + margin-top: 1.2em; +} + +.prose-xl>ol>li>*:last-child { + margin-bottom: 1.2em; +} + +.prose-xl ul ul, +.prose-xl ul ol, +.prose-xl ol ul, +.prose-xl ol ol { + margin-top: 0.8em; + margin-bottom: 0.8em; +} + +.prose-xl hr { + margin-top: 2.8em; + margin-bottom: 2.8em; +} + +.prose-xl hr+* { + margin-top: 0; +} + +.prose-xl h2+* { + margin-top: 0; +} + +.prose-xl h3+* { + margin-top: 0; +} + +.prose-xl h4+* { + margin-top: 0; +} + +.prose-xl table { + font-size: 0.9em; + line-height: 1.5555556; +} + +.prose-xl thead th { + padding-right: 0.6666667em; + padding-bottom: 0.8888889em; + padding-left: 0.6666667em; +} + +.prose-xl thead th:first-child { + padding-left: 0; +} + +.prose-xl thead th:last-child { + padding-right: 0; +} + +.prose-xl tbody td { + padding-top: 0.8888889em; + padding-right: 0.6666667em; + padding-bottom: 0.8888889em; + padding-left: 0.6666667em; +} + +.prose-xl tbody td:first-child { + padding-left: 0; +} + +.prose-xl tbody td:last-child { + padding-right: 0; +} + +.prose-xl> :first-child { + margin-top: 0; +} + +.prose-xl> :last-child { + margin-bottom: 0; +} + +.prose-2xl { + font-size: 1.5rem; + line-height: 1.6666667; +} + +.prose-2xl p { + margin-top: 1.3333333em; + margin-bottom: 1.3333333em; +} + +.prose-2xl [class~="lead"] { + font-size: 1.25em; + line-height: 1.4666667; + margin-top: 1.0666667em; + margin-bottom: 1.0666667em; +} + +.prose-2xl blockquote { + margin-top: 1.7777778em; + margin-bottom: 1.7777778em; + padding-left: 1.1111111em; +} + +.prose-2xl h1 { + font-size: 2.6666667em; + margin-top: 0; + margin-bottom: 0.875em; + line-height: 1; +} + +.prose-2xl h2 { + font-size: 2em; + margin-top: 1.5em; + margin-bottom: 0.8333333em; + line-height: 1.0833333; +} + +.prose-2xl h3 { + font-size: 1.5em; + margin-top: 1.5555556em; + margin-bottom: 0.6666667em; + line-height: 1.2222222; +} + +.prose-2xl h4 { + margin-top: 1.6666667em; + margin-bottom: 0.6666667em; + line-height: 1.5; +} + +.prose-2xl img { + margin-top: 2em; + margin-bottom: 2em; +} + +.prose-2xl video { + margin-top: 2em; + margin-bottom: 2em; +} + +.prose-2xl figure { + margin-top: 2em; + margin-bottom: 2em; +} + +.prose-2xl figure>* { + margin-top: 0; + margin-bottom: 0; +} + +.prose-2xl figure figcaption { + font-size: 0.8333333em; + line-height: 1.6; + margin-top: 1em; +} + +.prose-2xl code { + font-size: 0.8333333em; +} + +.prose-2xl h2 code { + font-size: 0.875em; +} + +.prose-2xl h3 code { + font-size: 0.8888889em; +} + +.prose-2xl pre { + font-size: 0.8333333em; + line-height: 1.8; + margin-top: 2em; + margin-bottom: 2em; + border-radius: 0.5rem; + padding-top: 1.2em; + padding-right: 1.6em; + padding-bottom: 1.2em; + padding-left: 1.6em; +} + +.prose-2xl ol { + margin-top: 1.3333333em; + margin-bottom: 1.3333333em; +} + +.prose-2xl ul { + margin-top: 1.3333333em; + margin-bottom: 1.3333333em; +} + +.prose-2xl li { + margin-top: 0.5em; + margin-bottom: 0.5em; +} + +.prose-2xl ol>li { + padding-left: 1.6666667em; +} + +.prose-2xl ol>li::before { + left: 0; +} + +.prose-2xl ul>li { + padding-left: 1.6666667em; +} + +.prose-2xl ul>li::before { + width: 0.3333333em; + height: 0.3333333em; + top: calc(0.8333333em - 0.1666667em); + left: 0.25em; +} + +.prose-2xl>ul>li p { + margin-top: 0.8333333em; + margin-bottom: 0.8333333em; +} + +.prose-2xl>ul>li>*:first-child { + margin-top: 1.3333333em; +} + +.prose-2xl>ul>li>*:last-child { + margin-bottom: 1.3333333em; +} + +.prose-2xl>ol>li>*:first-child { + margin-top: 1.3333333em; +} + +.prose-2xl>ol>li>*:last-child { + margin-bottom: 1.3333333em; +} + +.prose-2xl ul ul, +.prose-2xl ul ol, +.prose-2xl ol ul, +.prose-2xl ol ol { + margin-top: 0.6666667em; + margin-bottom: 0.6666667em; +} + +.prose-2xl hr { + margin-top: 3em; + margin-bottom: 3em; +} + +.prose-2xl hr+* { + margin-top: 0; +} + +.prose-2xl h2+* { + margin-top: 0; +} + +.prose-2xl h3+* { + margin-top: 0; +} + +.prose-2xl h4+* { + margin-top: 0; +} + +.prose-2xl table { + font-size: 0.8333333em; + line-height: 1.4; +} + +.prose-2xl thead th { + padding-right: 0.6em; + padding-bottom: 0.8em; + padding-left: 0.6em; +} + +.prose-2xl thead th:first-child { + padding-left: 0; +} + +.prose-2xl thead th:last-child { + padding-right: 0; +} + +.prose-2xl tbody td { + padding-top: 0.8em; + padding-right: 0.6em; + padding-bottom: 0.8em; + padding-left: 0.6em; +} + +.prose-2xl tbody td:first-child { + padding-left: 0; +} + +.prose-2xl tbody td:last-child { + padding-right: 0; +} + +.prose-2xl> :first-child { + margin-top: 0; +} + +.prose-2xl> :last-child { + margin-bottom: 0; +} + +.prose-red a {} + +.prose-red a code {} + +.prose-yellow a {} + +.prose-yellow a code {} + +.prose-green a {} + +.prose-green a code {} + +.prose-blue a {} + +.prose-blue a code {} + +.prose-indigo a {} + +.prose-indigo a code {} + +.prose-purple a {} + +.prose-purple a code {} + +.prose-pink a {} + +.prose-pink a code {} + +@media (min-width: 640px) { + .sm\:prose { + + max-width: 65ch; + } + + .sm\:prose [class~="lead"] { + + font-size: 1.25em; + line-height: 1.6; + margin-top: 1.2em; + margin-bottom: 1.2em; + } + + .sm\:prose a { + + text-decoration: underline; + font-weight: 500; + } + + .sm\:prose strong { + + font-weight: 600; + } + + .sm\:prose ol[type="A"] { + --list-counter-style: upper-alpha; + } + + .sm\:prose ol[type="a"] { + --list-counter-style: lower-alpha; + } + + .sm\:prose ol[type="A" s] { + --list-counter-style: upper-alpha; + } + + .sm\:prose ol[type="a" s] { + --list-counter-style: lower-alpha; + } + + .sm\:prose ol[type="I"] { + --list-counter-style: upper-roman; + } + + .sm\:prose ol[type="i"] { + --list-counter-style: lower-roman; + } + + .sm\:prose ol[type="I" s] { + --list-counter-style: upper-roman; + } + + .sm\:prose ol[type="i" s] { + --list-counter-style: lower-roman; + } + + .sm\:prose ol[type="1"] { + --list-counter-style: decimal; + } + + .sm\:prose ol>li { + position: relative; + padding-left: 1.75em; + } + + .sm\:prose ol>li::before { + content: counter(list-item, var(--list-counter-style, decimal)) "."; + position: absolute; + font-weight: 400; + + left: 0; + } + + .sm\:prose ul>li { + position: relative; + padding-left: 1.75em; + } + + .sm\:prose ul>li::before { + content: ""; + position: absolute; + + border-radius: 50%; + width: 0.375em; + height: 0.375em; + top: calc(0.875em - 0.1875em); + left: 0.25em; + } + + .sm\:prose hr { + + border-top-width: 1px; + margin-top: 3em; + margin-bottom: 3em; + } + + .sm\:prose blockquote { + font-weight: 500; + font-style: italic; + + border-left-width: 0.25rem; + + quotes: "\201C" "\201D" "\2018" "\2019"; + margin-top: 1.6em; + margin-bottom: 1.6em; + padding-left: 1em; + } + + .sm\:prose blockquote p:first-of-type::before { + content: open-quote; + } + + .sm\:prose blockquote p:last-of-type::after { + content: close-quote; + } + + .sm\:prose h1 { + + font-weight: 800; + font-size: 2.25em; + margin-top: 0; + margin-bottom: 0.8888889em; + line-height: 1.1111111; + } + + .sm\:prose h2 { + + font-weight: 700; + font-size: 1.5em; + margin-top: 2em; + margin-bottom: 1em; + line-height: 1.3333333; + } + + .sm\:prose h3 { + + font-weight: 600; + font-size: 1.25em; + margin-top: 1.6em; + margin-bottom: 0.6em; + line-height: 1.6; + } + + .sm\:prose h4 { + + font-weight: 600; + margin-top: 1.5em; + margin-bottom: 0.5em; + line-height: 1.5; + } + + .sm\:prose figure figcaption { + + font-size: 0.875em; + line-height: 1.4285714; + margin-top: 0.8571429em; + } + + .sm\:prose code { + + font-weight: 600; + font-size: 0.875em; + } + + .sm\:prose code::before { + content: "`"; + } + + .sm\:prose code::after { + content: "`"; + } + + .sm\:prose a code {} + + .sm\:prose pre { + + + overflow-x: auto; + font-size: 0.875em; + line-height: 1.7142857; + margin-top: 1.7142857em; + margin-bottom: 1.7142857em; + border-radius: 0.375rem; + padding-top: 0.8571429em; + padding-right: 1.1428571em; + padding-bottom: 0.8571429em; + padding-left: 1.1428571em; + } + + .sm\:prose pre code { + + border-width: 0; + border-radius: 0; + padding: 0; + font-weight: 400; + + font-size: inherit; + font-family: inherit; + line-height: inherit; + } + + .sm\:prose pre code::before { + content: none; + } + + .sm\:prose pre code::after { + content: none; + } + + .sm\:prose table { + width: 100%; + table-layout: auto; + text-align: left; + margin-top: 2em; + margin-bottom: 2em; + font-size: 0.875em; + line-height: 1.7142857; + } + + .sm\:prose thead { + + font-weight: 600; + border-bottom-width: 1px; + + } + + .sm\:prose thead th { + vertical-align: bottom; + padding-right: 0.5714286em; + padding-bottom: 0.5714286em; + padding-left: 0.5714286em; + } + + .sm\:prose tbody tr { + border-bottom-width: 1px; + + } + + .sm\:prose tbody tr:last-child { + border-bottom-width: 0; + } + + .sm\:prose tbody td { + vertical-align: top; + padding-top: 0.5714286em; + padding-right: 0.5714286em; + padding-bottom: 0.5714286em; + padding-left: 0.5714286em; + } + + .sm\:prose { + font-size: 1rem; + line-height: 1.75; + } + + .sm\:prose p { + margin-top: 1.25em; + margin-bottom: 1.25em; + } + + .sm\:prose img { + margin-top: 2em; + margin-bottom: 2em; + } + + .sm\:prose video { + margin-top: 2em; + margin-bottom: 2em; + } + + .sm\:prose figure { + margin-top: 2em; + margin-bottom: 2em; + } + + .sm\:prose figure>* { + margin-top: 0; + margin-bottom: 0; + } + + .sm\:prose h2 code { + font-size: 0.875em; + } + + .sm\:prose h3 code { + font-size: 0.9em; + } + + .sm\:prose ol { + margin-top: 1.25em; + margin-bottom: 1.25em; + } + + .sm\:prose ul { + margin-top: 1.25em; + margin-bottom: 1.25em; + } + + .sm\:prose li { + margin-top: 0.5em; + margin-bottom: 0.5em; + } + + .sm\:prose>ul>li p { + margin-top: 0.75em; + margin-bottom: 0.75em; + } + + .sm\:prose>ul>li>*:first-child { + margin-top: 1.25em; + } + + .sm\:prose>ul>li>*:last-child { + margin-bottom: 1.25em; + } + + .sm\:prose>ol>li>*:first-child { + margin-top: 1.25em; + } + + .sm\:prose>ol>li>*:last-child { + margin-bottom: 1.25em; + } + + .sm\:prose ul ul, + .sm\:prose ul ol, + .sm\:prose ol ul, + .sm\:prose ol ol { + margin-top: 0.75em; + margin-bottom: 0.75em; + } + + .sm\:prose hr+* { + margin-top: 0; + } + + .sm\:prose h2+* { + margin-top: 0; + } + + .sm\:prose h3+* { + margin-top: 0; + } + + .sm\:prose h4+* { + margin-top: 0; + } + + .sm\:prose thead th:first-child { + padding-left: 0; + } + + .sm\:prose thead th:last-child { + padding-right: 0; + } + + .sm\:prose tbody td:first-child { + padding-left: 0; + } + + .sm\:prose tbody td:last-child { + padding-right: 0; + } + + .sm\:prose> :first-child { + margin-top: 0; + } + + .sm\:prose> :last-child { + margin-bottom: 0; + } + + .sm\:prose-sm { + font-size: 0.875rem; + line-height: 1.7142857; + } + + .sm\:prose-sm p { + margin-top: 1.1428571em; + margin-bottom: 1.1428571em; + } + + .sm\:prose-sm [class~="lead"] { + font-size: 1.2857143em; + line-height: 1.5555556; + margin-top: 0.8888889em; + margin-bottom: 0.8888889em; + } + + .sm\:prose-sm blockquote { + margin-top: 1.3333333em; + margin-bottom: 1.3333333em; + padding-left: 1.1111111em; + } + + .sm\:prose-sm h1 { + font-size: 2.1428571em; + margin-top: 0; + margin-bottom: 0.8em; + line-height: 1.2; + } + + .sm\:prose-sm h2 { + font-size: 1.4285714em; + margin-top: 1.6em; + margin-bottom: 0.8em; + line-height: 1.4; + } + + .sm\:prose-sm h3 { + font-size: 1.2857143em; + margin-top: 1.5555556em; + margin-bottom: 0.4444444em; + line-height: 1.5555556; + } + + .sm\:prose-sm h4 { + margin-top: 1.4285714em; + margin-bottom: 0.5714286em; + line-height: 1.4285714; + } + + .sm\:prose-sm img { + margin-top: 1.7142857em; + margin-bottom: 1.7142857em; + } + + .sm\:prose-sm video { + margin-top: 1.7142857em; + margin-bottom: 1.7142857em; + } + + .sm\:prose-sm figure { + margin-top: 1.7142857em; + margin-bottom: 1.7142857em; + } + + .sm\:prose-sm figure>* { + margin-top: 0; + margin-bottom: 0; + } + + .sm\:prose-sm figure figcaption { + font-size: 0.8571429em; + line-height: 1.3333333; + margin-top: 0.6666667em; + } + + .sm\:prose-sm code { + font-size: 0.8571429em; + } + + .sm\:prose-sm h2 code { + font-size: 0.9em; + } + + .sm\:prose-sm h3 code { + font-size: 0.8888889em; + } + + .sm\:prose-sm pre { + font-size: 0.8571429em; + line-height: 1.6666667; + margin-top: 1.6666667em; + margin-bottom: 1.6666667em; + border-radius: 0.25rem; + padding-top: 0.6666667em; + padding-right: 1em; + padding-bottom: 0.6666667em; + padding-left: 1em; + } + + .sm\:prose-sm ol { + margin-top: 1.1428571em; + margin-bottom: 1.1428571em; + } + + .sm\:prose-sm ul { + margin-top: 1.1428571em; + margin-bottom: 1.1428571em; + } + + .sm\:prose-sm li { + margin-top: 0.2857143em; + margin-bottom: 0.2857143em; + } + + .sm\:prose-sm ol>li { + padding-left: 1.5714286em; + } + + .sm\:prose-sm ol>li::before { + left: 0; + } + + .sm\:prose-sm ul>li { + padding-left: 1.5714286em; + } + + .sm\:prose-sm ul>li::before { + height: 0.3571429em; + width: 0.3571429em; + top: calc(0.8571429em - 0.1785714em); + left: 0.2142857em; + } + + .sm\:prose-sm>ul>li p { + margin-top: 0.5714286em; + margin-bottom: 0.5714286em; + } + + .sm\:prose-sm>ul>li>*:first-child { + margin-top: 1.1428571em; + } + + .sm\:prose-sm>ul>li>*:last-child { + margin-bottom: 1.1428571em; + } + + .sm\:prose-sm>ol>li>*:first-child { + margin-top: 1.1428571em; + } + + .sm\:prose-sm>ol>li>*:last-child { + margin-bottom: 1.1428571em; + } + + .sm\:prose-sm ul ul, + .sm\:prose-sm ul ol, + .sm\:prose-sm ol ul, + .sm\:prose-sm ol ol { + margin-top: 0.5714286em; + margin-bottom: 0.5714286em; + } + + .sm\:prose-sm hr { + margin-top: 2.8571429em; + margin-bottom: 2.8571429em; + } + + .sm\:prose-sm hr+* { + margin-top: 0; + } + + .sm\:prose-sm h2+* { + margin-top: 0; + } + + .sm\:prose-sm h3+* { + margin-top: 0; + } + + .sm\:prose-sm h4+* { + margin-top: 0; + } + + .sm\:prose-sm table { + font-size: 0.8571429em; + line-height: 1.5; + } + + .sm\:prose-sm thead th { + padding-right: 1em; + padding-bottom: 0.6666667em; + padding-left: 1em; + } + + .sm\:prose-sm thead th:first-child { + padding-left: 0; + } + + .sm\:prose-sm thead th:last-child { + padding-right: 0; + } + + .sm\:prose-sm tbody td { + padding-top: 0.6666667em; + padding-right: 1em; + padding-bottom: 0.6666667em; + padding-left: 1em; + } + + .sm\:prose-sm tbody td:first-child { + padding-left: 0; + } + + .sm\:prose-sm tbody td:last-child { + padding-right: 0; + } + + .sm\:prose-sm> :first-child { + margin-top: 0; + } + + .sm\:prose-sm> :last-child { + margin-bottom: 0; + } + + .sm\:prose-lg { + font-size: 1.125rem; + line-height: 1.7777778; + } + + .sm\:prose-lg p { + margin-top: 1.3333333em; + margin-bottom: 1.3333333em; + } + + .sm\:prose-lg [class~="lead"] { + font-size: 1.2222222em; + line-height: 1.4545455; + margin-top: 1.0909091em; + margin-bottom: 1.0909091em; + } + + .sm\:prose-lg blockquote { + margin-top: 1.6666667em; + margin-bottom: 1.6666667em; + padding-left: 1em; + } + + .sm\:prose-lg h1 { + font-size: 2.6666667em; + margin-top: 0; + margin-bottom: 0.8333333em; + line-height: 1; + } + + .sm\:prose-lg h2 { + font-size: 1.6666667em; + margin-top: 1.8666667em; + margin-bottom: 1.0666667em; + line-height: 1.3333333; + } + + .sm\:prose-lg h3 { + font-size: 1.3333333em; + margin-top: 1.6666667em; + margin-bottom: 0.6666667em; + line-height: 1.5; + } + + .sm\:prose-lg h4 { + margin-top: 1.7777778em; + margin-bottom: 0.4444444em; + line-height: 1.5555556; + } + + .sm\:prose-lg img { + margin-top: 1.7777778em; + margin-bottom: 1.7777778em; + } + + .sm\:prose-lg video { + margin-top: 1.7777778em; + margin-bottom: 1.7777778em; + } + + .sm\:prose-lg figure { + margin-top: 1.7777778em; + margin-bottom: 1.7777778em; + } + + .sm\:prose-lg figure>* { + margin-top: 0; + margin-bottom: 0; + } + + .sm\:prose-lg figure figcaption { + font-size: 0.8888889em; + line-height: 1.5; + margin-top: 1em; + } + + .sm\:prose-lg code { + font-size: 0.8888889em; + } + + .sm\:prose-lg h2 code { + font-size: 0.8666667em; + } + + .sm\:prose-lg h3 code { + font-size: 0.875em; + } + + .sm\:prose-lg pre { + font-size: 0.8888889em; + line-height: 1.75; + margin-top: 2em; + margin-bottom: 2em; + border-radius: 0.375rem; + padding-top: 1em; + padding-right: 1.5em; + padding-bottom: 1em; + padding-left: 1.5em; + } + + .sm\:prose-lg ol { + margin-top: 1.3333333em; + margin-bottom: 1.3333333em; + } + + .sm\:prose-lg ul { + margin-top: 1.3333333em; + margin-bottom: 1.3333333em; + } + + .sm\:prose-lg li { + margin-top: 0.6666667em; + margin-bottom: 0.6666667em; + } + + .sm\:prose-lg ol>li { + padding-left: 1.6666667em; + } + + .sm\:prose-lg ol>li::before { + left: 0; + } + + .sm\:prose-lg ul>li { + padding-left: 1.6666667em; + } + + .sm\:prose-lg ul>li::before { + width: 0.3333333em; + height: 0.3333333em; + top: calc(0.8888889em - 0.1666667em); + left: 0.2222222em; + } + + .sm\:prose-lg>ul>li p { + margin-top: 0.8888889em; + margin-bottom: 0.8888889em; + } + + .sm\:prose-lg>ul>li>*:first-child { + margin-top: 1.3333333em; + } + + .sm\:prose-lg>ul>li>*:last-child { + margin-bottom: 1.3333333em; + } + + .sm\:prose-lg>ol>li>*:first-child { + margin-top: 1.3333333em; + } + + .sm\:prose-lg>ol>li>*:last-child { + margin-bottom: 1.3333333em; + } + + .sm\:prose-lg ul ul, + .sm\:prose-lg ul ol, + .sm\:prose-lg ol ul, + .sm\:prose-lg ol ol { + margin-top: 0.8888889em; + margin-bottom: 0.8888889em; + } + + .sm\:prose-lg hr { + margin-top: 3.1111111em; + margin-bottom: 3.1111111em; + } + + .sm\:prose-lg hr+* { + margin-top: 0; + } + + .sm\:prose-lg h2+* { + margin-top: 0; + } + + .sm\:prose-lg h3+* { + margin-top: 0; + } + + .sm\:prose-lg h4+* { + margin-top: 0; + } + + .sm\:prose-lg table { + font-size: 0.8888889em; + line-height: 1.5; + } + + .sm\:prose-lg thead th { + padding-right: 0.75em; + padding-bottom: 0.75em; + padding-left: 0.75em; + } + + .sm\:prose-lg thead th:first-child { + padding-left: 0; + } + + .sm\:prose-lg thead th:last-child { + padding-right: 0; + } + + .sm\:prose-lg tbody td { + padding-top: 0.75em; + padding-right: 0.75em; + padding-bottom: 0.75em; + padding-left: 0.75em; + } + + .sm\:prose-lg tbody td:first-child { + padding-left: 0; + } + + .sm\:prose-lg tbody td:last-child { + padding-right: 0; + } + + .sm\:prose-lg> :first-child { + margin-top: 0; + } + + .sm\:prose-lg> :last-child { + margin-bottom: 0; + } + + .sm\:prose-xl { + font-size: 1.25rem; + line-height: 1.8; + } + + .sm\:prose-xl p { + margin-top: 1.2em; + margin-bottom: 1.2em; + } + + .sm\:prose-xl [class~="lead"] { + font-size: 1.2em; + line-height: 1.5; + margin-top: 1em; + margin-bottom: 1em; + } + + .sm\:prose-xl blockquote { + margin-top: 1.6em; + margin-bottom: 1.6em; + padding-left: 1.0666667em; + } + + .sm\:prose-xl h1 { + font-size: 2.8em; + margin-top: 0; + margin-bottom: 0.8571429em; + line-height: 1; + } + + .sm\:prose-xl h2 { + font-size: 1.8em; + margin-top: 1.5555556em; + margin-bottom: 0.8888889em; + line-height: 1.1111111; + } + + .sm\:prose-xl h3 { + font-size: 1.5em; + margin-top: 1.6em; + margin-bottom: 0.6666667em; + line-height: 1.3333333; + } + + .sm\:prose-xl h4 { + margin-top: 1.8em; + margin-bottom: 0.6em; + line-height: 1.6; + } + + .sm\:prose-xl img { + margin-top: 2em; + margin-bottom: 2em; + } + + .sm\:prose-xl video { + margin-top: 2em; + margin-bottom: 2em; + } + + .sm\:prose-xl figure { + margin-top: 2em; + margin-bottom: 2em; + } + + .sm\:prose-xl figure>* { + margin-top: 0; + margin-bottom: 0; + } + + .sm\:prose-xl figure figcaption { + font-size: 0.9em; + line-height: 1.5555556; + margin-top: 1em; + } + + .sm\:prose-xl code { + font-size: 0.9em; + } + + .sm\:prose-xl h2 code { + font-size: 0.8611111em; + } + + .sm\:prose-xl h3 code { + font-size: 0.9em; + } + + .sm\:prose-xl pre { + font-size: 0.9em; + line-height: 1.7777778; + margin-top: 2em; + margin-bottom: 2em; + border-radius: 0.5rem; + padding-top: 1.1111111em; + padding-right: 1.3333333em; + padding-bottom: 1.1111111em; + padding-left: 1.3333333em; + } + + .sm\:prose-xl ol { + margin-top: 1.2em; + margin-bottom: 1.2em; + } + + .sm\:prose-xl ul { + margin-top: 1.2em; + margin-bottom: 1.2em; + } + + .sm\:prose-xl li { + margin-top: 0.6em; + margin-bottom: 0.6em; + } + + .sm\:prose-xl ol>li { + padding-left: 1.8em; + } + + .sm\:prose-xl ol>li::before { + left: 0; + } + + .sm\:prose-xl ul>li { + padding-left: 1.8em; + } + + .sm\:prose-xl ul>li::before { + width: 0.35em; + height: 0.35em; + top: calc(0.9em - 0.175em); + left: 0.25em; + } + + .sm\:prose-xl>ul>li p { + margin-top: 0.8em; + margin-bottom: 0.8em; + } + + .sm\:prose-xl>ul>li>*:first-child { + margin-top: 1.2em; + } + + .sm\:prose-xl>ul>li>*:last-child { + margin-bottom: 1.2em; + } + + .sm\:prose-xl>ol>li>*:first-child { + margin-top: 1.2em; + } + + .sm\:prose-xl>ol>li>*:last-child { + margin-bottom: 1.2em; + } + + .sm\:prose-xl ul ul, + .sm\:prose-xl ul ol, + .sm\:prose-xl ol ul, + .sm\:prose-xl ol ol { + margin-top: 0.8em; + margin-bottom: 0.8em; + } + + .sm\:prose-xl hr { + margin-top: 2.8em; + margin-bottom: 2.8em; + } + + .sm\:prose-xl hr+* { + margin-top: 0; + } + + .sm\:prose-xl h2+* { + margin-top: 0; + } + + .sm\:prose-xl h3+* { + margin-top: 0; + } + + .sm\:prose-xl h4+* { + margin-top: 0; + } + + .sm\:prose-xl table { + font-size: 0.9em; + line-height: 1.5555556; + } + + .sm\:prose-xl thead th { + padding-right: 0.6666667em; + padding-bottom: 0.8888889em; + padding-left: 0.6666667em; + } + + .sm\:prose-xl thead th:first-child { + padding-left: 0; + } + + .sm\:prose-xl thead th:last-child { + padding-right: 0; + } + + .sm\:prose-xl tbody td { + padding-top: 0.8888889em; + padding-right: 0.6666667em; + padding-bottom: 0.8888889em; + padding-left: 0.6666667em; + } + + .sm\:prose-xl tbody td:first-child { + padding-left: 0; + } + + .sm\:prose-xl tbody td:last-child { + padding-right: 0; + } + + .sm\:prose-xl> :first-child { + margin-top: 0; + } + + .sm\:prose-xl> :last-child { + margin-bottom: 0; + } + + .sm\:prose-2xl { + font-size: 1.5rem; + line-height: 1.6666667; + } + + .sm\:prose-2xl p { + margin-top: 1.3333333em; + margin-bottom: 1.3333333em; + } + + .sm\:prose-2xl [class~="lead"] { + font-size: 1.25em; + line-height: 1.4666667; + margin-top: 1.0666667em; + margin-bottom: 1.0666667em; + } + + .sm\:prose-2xl blockquote { + margin-top: 1.7777778em; + margin-bottom: 1.7777778em; + padding-left: 1.1111111em; + } + + .sm\:prose-2xl h1 { + font-size: 2.6666667em; + margin-top: 0; + margin-bottom: 0.875em; + line-height: 1; + } + + .sm\:prose-2xl h2 { + font-size: 2em; + margin-top: 1.5em; + margin-bottom: 0.8333333em; + line-height: 1.0833333; + } + + .sm\:prose-2xl h3 { + font-size: 1.5em; + margin-top: 1.5555556em; + margin-bottom: 0.6666667em; + line-height: 1.2222222; + } + + .sm\:prose-2xl h4 { + margin-top: 1.6666667em; + margin-bottom: 0.6666667em; + line-height: 1.5; + } + + .sm\:prose-2xl img { + margin-top: 2em; + margin-bottom: 2em; + } + + .sm\:prose-2xl video { + margin-top: 2em; + margin-bottom: 2em; + } + + .sm\:prose-2xl figure { + margin-top: 2em; + margin-bottom: 2em; + } + + .sm\:prose-2xl figure>* { + margin-top: 0; + margin-bottom: 0; + } + + .sm\:prose-2xl figure figcaption { + font-size: 0.8333333em; + line-height: 1.6; + margin-top: 1em; + } + + .sm\:prose-2xl code { + font-size: 0.8333333em; + } + + .sm\:prose-2xl h2 code { + font-size: 0.875em; + } + + .sm\:prose-2xl h3 code { + font-size: 0.8888889em; + } + + .sm\:prose-2xl pre { + font-size: 0.8333333em; + line-height: 1.8; + margin-top: 2em; + margin-bottom: 2em; + border-radius: 0.5rem; + padding-top: 1.2em; + padding-right: 1.6em; + padding-bottom: 1.2em; + padding-left: 1.6em; + } + + .sm\:prose-2xl ol { + margin-top: 1.3333333em; + margin-bottom: 1.3333333em; + } + + .sm\:prose-2xl ul { + margin-top: 1.3333333em; + margin-bottom: 1.3333333em; + } + + .sm\:prose-2xl li { + margin-top: 0.5em; + margin-bottom: 0.5em; + } + + .sm\:prose-2xl ol>li { + padding-left: 1.6666667em; + } + + .sm\:prose-2xl ol>li::before { + left: 0; + } + + .sm\:prose-2xl ul>li { + padding-left: 1.6666667em; + } + + .sm\:prose-2xl ul>li::before { + width: 0.3333333em; + height: 0.3333333em; + top: calc(0.8333333em - 0.1666667em); + left: 0.25em; + } + + .sm\:prose-2xl>ul>li p { + margin-top: 0.8333333em; + margin-bottom: 0.8333333em; + } + + .sm\:prose-2xl>ul>li>*:first-child { + margin-top: 1.3333333em; + } + + .sm\:prose-2xl>ul>li>*:last-child { + margin-bottom: 1.3333333em; + } + + .sm\:prose-2xl>ol>li>*:first-child { + margin-top: 1.3333333em; + } + + .sm\:prose-2xl>ol>li>*:last-child { + margin-bottom: 1.3333333em; + } + + .sm\:prose-2xl ul ul, + .sm\:prose-2xl ul ol, + .sm\:prose-2xl ol ul, + .sm\:prose-2xl ol ol { + margin-top: 0.6666667em; + margin-bottom: 0.6666667em; + } + + .sm\:prose-2xl hr { + margin-top: 3em; + margin-bottom: 3em; + } + + .sm\:prose-2xl hr+* { + margin-top: 0; + } + + .sm\:prose-2xl h2+* { + margin-top: 0; + } + + .sm\:prose-2xl h3+* { + margin-top: 0; + } + + .sm\:prose-2xl h4+* { + margin-top: 0; + } + + .sm\:prose-2xl table { + font-size: 0.8333333em; + line-height: 1.4; + } + + .sm\:prose-2xl thead th { + padding-right: 0.6em; + padding-bottom: 0.8em; + padding-left: 0.6em; + } + + .sm\:prose-2xl thead th:first-child { + padding-left: 0; + } + + .sm\:prose-2xl thead th:last-child { + padding-right: 0; + } + + .sm\:prose-2xl tbody td { + padding-top: 0.8em; + padding-right: 0.6em; + padding-bottom: 0.8em; + padding-left: 0.6em; + } + + .sm\:prose-2xl tbody td:first-child { + padding-left: 0; + } + + .sm\:prose-2xl tbody td:last-child { + padding-right: 0; + } + + .sm\:prose-2xl> :first-child { + margin-top: 0; + } + + .sm\:prose-2xl> :last-child { + margin-bottom: 0; + } + + .sm\:prose-red a {} + + .sm\:prose-red a code {} + + .sm\:prose-yellow a {} + + .sm\:prose-yellow a code {} + + .sm\:prose-green a {} + + .sm\:prose-green a code {} + + .sm\:prose-blue a {} + + .sm\:prose-blue a code {} + + .sm\:prose-indigo a {} + + .sm\:prose-indigo a code {} + + .sm\:prose-purple a {} + + .sm\:prose-purple a code {} + + .sm\:prose-pink a {} + + .sm\:prose-pink a code {} +} + +@media (min-width: 768px) { + .md\:prose { + + max-width: 65ch; + } + + .md\:prose [class~="lead"] { + + font-size: 1.25em; + line-height: 1.6; + margin-top: 1.2em; + margin-bottom: 1.2em; + } + + .md\:prose a { + + text-decoration: underline; + font-weight: 500; + } + + .md\:prose strong { + + font-weight: 600; + } + + .md\:prose ol[type="A"] { + --list-counter-style: upper-alpha; + } + + .md\:prose ol[type="a"] { + --list-counter-style: lower-alpha; + } + + .md\:prose ol[type="A" s] { + --list-counter-style: upper-alpha; + } + + .md\:prose ol[type="a" s] { + --list-counter-style: lower-alpha; + } + + .md\:prose ol[type="I"] { + --list-counter-style: upper-roman; + } + + .md\:prose ol[type="i"] { + --list-counter-style: lower-roman; + } + + .md\:prose ol[type="I" s] { + --list-counter-style: upper-roman; + } + + .md\:prose ol[type="i" s] { + --list-counter-style: lower-roman; + } + + .md\:prose ol[type="1"] { + --list-counter-style: decimal; + } + + .md\:prose ol>li { + position: relative; + padding-left: 1.75em; + } + + .md\:prose ol>li::before { + content: counter(list-item, var(--list-counter-style, decimal)) "."; + position: absolute; + font-weight: 400; + + left: 0; + } + + .md\:prose ul>li { + position: relative; + padding-left: 1.75em; + } + + .md\:prose ul>li::before { + content: ""; + position: absolute; + + border-radius: 50%; + width: 0.375em; + height: 0.375em; + top: calc(0.875em - 0.1875em); + left: 0.25em; + } + + .md\:prose hr { + + border-top-width: 1px; + margin-top: 3em; + margin-bottom: 3em; + } + + .md\:prose blockquote { + font-weight: 500; + font-style: italic; + + border-left-width: 0.25rem; + + quotes: "\201C" "\201D" "\2018" "\2019"; + margin-top: 1.6em; + margin-bottom: 1.6em; + padding-left: 1em; + } + + .md\:prose blockquote p:first-of-type::before { + content: open-quote; + } + + .md\:prose blockquote p:last-of-type::after { + content: close-quote; + } + + .md\:prose h1 { + + font-weight: 800; + font-size: 2.25em; + margin-top: 0; + margin-bottom: 0.8888889em; + line-height: 1.1111111; + } + + .md\:prose h2 { + + font-weight: 700; + font-size: 1.5em; + margin-top: 2em; + margin-bottom: 1em; + line-height: 1.3333333; + } + + .md\:prose h3 { + + font-weight: 600; + font-size: 1.25em; + margin-top: 1.6em; + margin-bottom: 0.6em; + line-height: 1.6; + } + + .md\:prose h4 { + + font-weight: 600; + margin-top: 1.5em; + margin-bottom: 0.5em; + line-height: 1.5; + } + + .md\:prose figure figcaption { + + font-size: 0.875em; + line-height: 1.4285714; + margin-top: 0.8571429em; + } + + .md\:prose code { + + font-weight: 600; + font-size: 0.875em; + } + + .md\:prose code::before { + content: "`"; + } + + .md\:prose code::after { + content: "`"; + } + + .md\:prose a code {} + + .md\:prose pre { + + + overflow-x: auto; + font-size: 0.875em; + line-height: 1.7142857; + margin-top: 1.7142857em; + margin-bottom: 1.7142857em; + border-radius: 0.375rem; + padding-top: 0.8571429em; + padding-right: 1.1428571em; + padding-bottom: 0.8571429em; + padding-left: 1.1428571em; + } + + .md\:prose pre code { + + border-width: 0; + border-radius: 0; + padding: 0; + font-weight: 400; + + font-size: inherit; + font-family: inherit; + line-height: inherit; + } + + .md\:prose pre code::before { + content: none; + } + + .md\:prose pre code::after { + content: none; + } + + .md\:prose table { + width: 100%; + table-layout: auto; + text-align: left; + margin-top: 2em; + margin-bottom: 2em; + font-size: 0.875em; + line-height: 1.7142857; + } + + .md\:prose thead { + + font-weight: 600; + border-bottom-width: 1px; + + } + + .md\:prose thead th { + vertical-align: bottom; + padding-right: 0.5714286em; + padding-bottom: 0.5714286em; + padding-left: 0.5714286em; + } + + .md\:prose tbody tr { + border-bottom-width: 1px; + + } + + .md\:prose tbody tr:last-child { + border-bottom-width: 0; + } + + .md\:prose tbody td { + vertical-align: top; + padding-top: 0.5714286em; + padding-right: 0.5714286em; + padding-bottom: 0.5714286em; + padding-left: 0.5714286em; + } + + .md\:prose { + font-size: 1rem; + line-height: 1.75; + } + + .md\:prose p { + margin-top: 1.25em; + margin-bottom: 1.25em; + } + + .md\:prose img { + margin-top: 2em; + margin-bottom: 2em; + } + + .md\:prose video { + margin-top: 2em; + margin-bottom: 2em; + } + + .md\:prose figure { + margin-top: 2em; + margin-bottom: 2em; + } + + .md\:prose figure>* { + margin-top: 0; + margin-bottom: 0; + } + + .md\:prose h2 code { + font-size: 0.875em; + } + + .md\:prose h3 code { + font-size: 0.9em; + } + + .md\:prose ol { + margin-top: 1.25em; + margin-bottom: 1.25em; + } + + .md\:prose ul { + margin-top: 1.25em; + margin-bottom: 1.25em; + } + + .md\:prose li { + margin-top: 0.5em; + margin-bottom: 0.5em; + } + + .md\:prose>ul>li p { + margin-top: 0.75em; + margin-bottom: 0.75em; + } + + .md\:prose>ul>li>*:first-child { + margin-top: 1.25em; + } + + .md\:prose>ul>li>*:last-child { + margin-bottom: 1.25em; + } + + .md\:prose>ol>li>*:first-child { + margin-top: 1.25em; + } + + .md\:prose>ol>li>*:last-child { + margin-bottom: 1.25em; + } + + .md\:prose ul ul, + .md\:prose ul ol, + .md\:prose ol ul, + .md\:prose ol ol { + margin-top: 0.75em; + margin-bottom: 0.75em; + } + + .md\:prose hr+* { + margin-top: 0; + } + + .md\:prose h2+* { + margin-top: 0; + } + + .md\:prose h3+* { + margin-top: 0; + } + + .md\:prose h4+* { + margin-top: 0; + } + + .md\:prose thead th:first-child { + padding-left: 0; + } + + .md\:prose thead th:last-child { + padding-right: 0; + } + + .md\:prose tbody td:first-child { + padding-left: 0; + } + + .md\:prose tbody td:last-child { + padding-right: 0; + } + + .md\:prose> :first-child { + margin-top: 0; + } + + .md\:prose> :last-child { + margin-bottom: 0; + } + + .md\:prose-sm { + font-size: 0.875rem; + line-height: 1.7142857; + } + + .md\:prose-sm p { + margin-top: 1.1428571em; + margin-bottom: 1.1428571em; + } + + .md\:prose-sm [class~="lead"] { + font-size: 1.2857143em; + line-height: 1.5555556; + margin-top: 0.8888889em; + margin-bottom: 0.8888889em; + } + + .md\:prose-sm blockquote { + margin-top: 1.3333333em; + margin-bottom: 1.3333333em; + padding-left: 1.1111111em; + } + + .md\:prose-sm h1 { + font-size: 2.1428571em; + margin-top: 0; + margin-bottom: 0.8em; + line-height: 1.2; + } + + .md\:prose-sm h2 { + font-size: 1.4285714em; + margin-top: 1.6em; + margin-bottom: 0.8em; + line-height: 1.4; + } + + .md\:prose-sm h3 { + font-size: 1.2857143em; + margin-top: 1.5555556em; + margin-bottom: 0.4444444em; + line-height: 1.5555556; + } + + .md\:prose-sm h4 { + margin-top: 1.4285714em; + margin-bottom: 0.5714286em; + line-height: 1.4285714; + } + + .md\:prose-sm img { + margin-top: 1.7142857em; + margin-bottom: 1.7142857em; + } + + .md\:prose-sm video { + margin-top: 1.7142857em; + margin-bottom: 1.7142857em; + } + + .md\:prose-sm figure { + margin-top: 1.7142857em; + margin-bottom: 1.7142857em; + } + + .md\:prose-sm figure>* { + margin-top: 0; + margin-bottom: 0; + } + + .md\:prose-sm figure figcaption { + font-size: 0.8571429em; + line-height: 1.3333333; + margin-top: 0.6666667em; + } + + .md\:prose-sm code { + font-size: 0.8571429em; + } + + .md\:prose-sm h2 code { + font-size: 0.9em; + } + + .md\:prose-sm h3 code { + font-size: 0.8888889em; + } + + .md\:prose-sm pre { + font-size: 0.8571429em; + line-height: 1.6666667; + margin-top: 1.6666667em; + margin-bottom: 1.6666667em; + border-radius: 0.25rem; + padding-top: 0.6666667em; + padding-right: 1em; + padding-bottom: 0.6666667em; + padding-left: 1em; + } + + .md\:prose-sm ol { + margin-top: 1.1428571em; + margin-bottom: 1.1428571em; + } + + .md\:prose-sm ul { + margin-top: 1.1428571em; + margin-bottom: 1.1428571em; + } + + .md\:prose-sm li { + margin-top: 0.2857143em; + margin-bottom: 0.2857143em; + } + + .md\:prose-sm ol>li { + padding-left: 1.5714286em; + } + + .md\:prose-sm ol>li::before { + left: 0; + } + + .md\:prose-sm ul>li { + padding-left: 1.5714286em; + } + + .md\:prose-sm ul>li::before { + height: 0.3571429em; + width: 0.3571429em; + top: calc(0.8571429em - 0.1785714em); + left: 0.2142857em; + } + + .md\:prose-sm>ul>li p { + margin-top: 0.5714286em; + margin-bottom: 0.5714286em; + } + + .md\:prose-sm>ul>li>*:first-child { + margin-top: 1.1428571em; + } + + .md\:prose-sm>ul>li>*:last-child { + margin-bottom: 1.1428571em; + } + + .md\:prose-sm>ol>li>*:first-child { + margin-top: 1.1428571em; + } + + .md\:prose-sm>ol>li>*:last-child { + margin-bottom: 1.1428571em; + } + + .md\:prose-sm ul ul, + .md\:prose-sm ul ol, + .md\:prose-sm ol ul, + .md\:prose-sm ol ol { + margin-top: 0.5714286em; + margin-bottom: 0.5714286em; + } + + .md\:prose-sm hr { + margin-top: 2.8571429em; + margin-bottom: 2.8571429em; + } + + .md\:prose-sm hr+* { + margin-top: 0; + } + + .md\:prose-sm h2+* { + margin-top: 0; + } + + .md\:prose-sm h3+* { + margin-top: 0; + } + + .md\:prose-sm h4+* { + margin-top: 0; + } + + .md\:prose-sm table { + font-size: 0.8571429em; + line-height: 1.5; + } + + .md\:prose-sm thead th { + padding-right: 1em; + padding-bottom: 0.6666667em; + padding-left: 1em; + } + + .md\:prose-sm thead th:first-child { + padding-left: 0; + } + + .md\:prose-sm thead th:last-child { + padding-right: 0; + } + + .md\:prose-sm tbody td { + padding-top: 0.6666667em; + padding-right: 1em; + padding-bottom: 0.6666667em; + padding-left: 1em; + } + + .md\:prose-sm tbody td:first-child { + padding-left: 0; + } + + .md\:prose-sm tbody td:last-child { + padding-right: 0; + } + + .md\:prose-sm> :first-child { + margin-top: 0; + } + + .md\:prose-sm> :last-child { + margin-bottom: 0; + } + + .md\:prose-lg { + font-size: 1.125rem; + line-height: 1.7777778; + } + + .md\:prose-lg p { + margin-top: 1.3333333em; + margin-bottom: 1.3333333em; + } + + .md\:prose-lg [class~="lead"] { + font-size: 1.2222222em; + line-height: 1.4545455; + margin-top: 1.0909091em; + margin-bottom: 1.0909091em; + } + + .md\:prose-lg blockquote { + margin-top: 1.6666667em; + margin-bottom: 1.6666667em; + padding-left: 1em; + } + + .md\:prose-lg h1 { + font-size: 2.6666667em; + margin-top: 0; + margin-bottom: 0.8333333em; + line-height: 1; + } + + .md\:prose-lg h2 { + font-size: 1.6666667em; + margin-top: 1.8666667em; + margin-bottom: 1.0666667em; + line-height: 1.3333333; + } + + .md\:prose-lg h3 { + font-size: 1.3333333em; + margin-top: 1.6666667em; + margin-bottom: 0.6666667em; + line-height: 1.5; + } + + .md\:prose-lg h4 { + margin-top: 1.7777778em; + margin-bottom: 0.4444444em; + line-height: 1.5555556; + } + + .md\:prose-lg img { + margin-top: 1.7777778em; + margin-bottom: 1.7777778em; + } + + .md\:prose-lg video { + margin-top: 1.7777778em; + margin-bottom: 1.7777778em; + } + + .md\:prose-lg figure { + margin-top: 1.7777778em; + margin-bottom: 1.7777778em; + } + + .md\:prose-lg figure>* { + margin-top: 0; + margin-bottom: 0; + } + + .md\:prose-lg figure figcaption { + font-size: 0.8888889em; + line-height: 1.5; + margin-top: 1em; + } + + .md\:prose-lg code { + font-size: 0.8888889em; + } + + .md\:prose-lg h2 code { + font-size: 0.8666667em; + } + + .md\:prose-lg h3 code { + font-size: 0.875em; + } + + .md\:prose-lg pre { + font-size: 0.8888889em; + line-height: 1.75; + margin-top: 2em; + margin-bottom: 2em; + border-radius: 0.375rem; + padding-top: 1em; + padding-right: 1.5em; + padding-bottom: 1em; + padding-left: 1.5em; + } + + .md\:prose-lg ol { + margin-top: 1.3333333em; + margin-bottom: 1.3333333em; + } + + .md\:prose-lg ul { + margin-top: 1.3333333em; + margin-bottom: 1.3333333em; + } + + .md\:prose-lg li { + margin-top: 0.6666667em; + margin-bottom: 0.6666667em; + } + + .md\:prose-lg ol>li { + padding-left: 1.6666667em; + } + + .md\:prose-lg ol>li::before { + left: 0; + } + + .md\:prose-lg ul>li { + padding-left: 1.6666667em; + } + + .md\:prose-lg ul>li::before { + width: 0.3333333em; + height: 0.3333333em; + top: calc(0.8888889em - 0.1666667em); + left: 0.2222222em; + } + + .md\:prose-lg>ul>li p { + margin-top: 0.8888889em; + margin-bottom: 0.8888889em; + } + + .md\:prose-lg>ul>li>*:first-child { + margin-top: 1.3333333em; + } + + .md\:prose-lg>ul>li>*:last-child { + margin-bottom: 1.3333333em; + } + + .md\:prose-lg>ol>li>*:first-child { + margin-top: 1.3333333em; + } + + .md\:prose-lg>ol>li>*:last-child { + margin-bottom: 1.3333333em; + } + + .md\:prose-lg ul ul, + .md\:prose-lg ul ol, + .md\:prose-lg ol ul, + .md\:prose-lg ol ol { + margin-top: 0.8888889em; + margin-bottom: 0.8888889em; + } + + .md\:prose-lg hr { + margin-top: 3.1111111em; + margin-bottom: 3.1111111em; + } + + .md\:prose-lg hr+* { + margin-top: 0; + } + + .md\:prose-lg h2+* { + margin-top: 0; + } + + .md\:prose-lg h3+* { + margin-top: 0; + } + + .md\:prose-lg h4+* { + margin-top: 0; + } + + .md\:prose-lg table { + font-size: 0.8888889em; + line-height: 1.5; + } + + .md\:prose-lg thead th { + padding-right: 0.75em; + padding-bottom: 0.75em; + padding-left: 0.75em; + } + + .md\:prose-lg thead th:first-child { + padding-left: 0; + } + + .md\:prose-lg thead th:last-child { + padding-right: 0; + } + + .md\:prose-lg tbody td { + padding-top: 0.75em; + padding-right: 0.75em; + padding-bottom: 0.75em; + padding-left: 0.75em; + } + + .md\:prose-lg tbody td:first-child { + padding-left: 0; + } + + .md\:prose-lg tbody td:last-child { + padding-right: 0; + } + + .md\:prose-lg> :first-child { + margin-top: 0; + } + + .md\:prose-lg> :last-child { + margin-bottom: 0; + } + + .md\:prose-xl { + font-size: 1.25rem; + line-height: 1.8; + } + + .md\:prose-xl p { + margin-top: 1.2em; + margin-bottom: 1.2em; + } + + .md\:prose-xl [class~="lead"] { + font-size: 1.2em; + line-height: 1.5; + margin-top: 1em; + margin-bottom: 1em; + } + + .md\:prose-xl blockquote { + margin-top: 1.6em; + margin-bottom: 1.6em; + padding-left: 1.0666667em; + } + + .md\:prose-xl h1 { + font-size: 2.8em; + margin-top: 0; + margin-bottom: 0.8571429em; + line-height: 1; + } + + .md\:prose-xl h2 { + font-size: 1.8em; + margin-top: 1.5555556em; + margin-bottom: 0.8888889em; + line-height: 1.1111111; + } + + .md\:prose-xl h3 { + font-size: 1.5em; + margin-top: 1.6em; + margin-bottom: 0.6666667em; + line-height: 1.3333333; + } + + .md\:prose-xl h4 { + margin-top: 1.8em; + margin-bottom: 0.6em; + line-height: 1.6; + } + + .md\:prose-xl img { + margin-top: 2em; + margin-bottom: 2em; + } + + .md\:prose-xl video { + margin-top: 2em; + margin-bottom: 2em; + } + + .md\:prose-xl figure { + margin-top: 2em; + margin-bottom: 2em; + } + + .md\:prose-xl figure>* { + margin-top: 0; + margin-bottom: 0; + } + + .md\:prose-xl figure figcaption { + font-size: 0.9em; + line-height: 1.5555556; + margin-top: 1em; + } + + .md\:prose-xl code { + font-size: 0.9em; + } + + .md\:prose-xl h2 code { + font-size: 0.8611111em; + } + + .md\:prose-xl h3 code { + font-size: 0.9em; + } + + .md\:prose-xl pre { + font-size: 0.9em; + line-height: 1.7777778; + margin-top: 2em; + margin-bottom: 2em; + border-radius: 0.5rem; + padding-top: 1.1111111em; + padding-right: 1.3333333em; + padding-bottom: 1.1111111em; + padding-left: 1.3333333em; + } + + .md\:prose-xl ol { + margin-top: 1.2em; + margin-bottom: 1.2em; + } + + .md\:prose-xl ul { + margin-top: 1.2em; + margin-bottom: 1.2em; + } + + .md\:prose-xl li { + margin-top: 0.6em; + margin-bottom: 0.6em; + } + + .md\:prose-xl ol>li { + padding-left: 1.8em; + } + + .md\:prose-xl ol>li::before { + left: 0; + } + + .md\:prose-xl ul>li { + padding-left: 1.8em; + } + + .md\:prose-xl ul>li::before { + width: 0.35em; + height: 0.35em; + top: calc(0.9em - 0.175em); + left: 0.25em; + } + + .md\:prose-xl>ul>li p { + margin-top: 0.8em; + margin-bottom: 0.8em; + } + + .md\:prose-xl>ul>li>*:first-child { + margin-top: 1.2em; + } + + .md\:prose-xl>ul>li>*:last-child { + margin-bottom: 1.2em; + } + + .md\:prose-xl>ol>li>*:first-child { + margin-top: 1.2em; + } + + .md\:prose-xl>ol>li>*:last-child { + margin-bottom: 1.2em; + } + + .md\:prose-xl ul ul, + .md\:prose-xl ul ol, + .md\:prose-xl ol ul, + .md\:prose-xl ol ol { + margin-top: 0.8em; + margin-bottom: 0.8em; + } + + .md\:prose-xl hr { + margin-top: 2.8em; + margin-bottom: 2.8em; + } + + .md\:prose-xl hr+* { + margin-top: 0; + } + + .md\:prose-xl h2+* { + margin-top: 0; + } + + .md\:prose-xl h3+* { + margin-top: 0; + } + + .md\:prose-xl h4+* { + margin-top: 0; + } + + .md\:prose-xl table { + font-size: 0.9em; + line-height: 1.5555556; + } + + .md\:prose-xl thead th { + padding-right: 0.6666667em; + padding-bottom: 0.8888889em; + padding-left: 0.6666667em; + } + + .md\:prose-xl thead th:first-child { + padding-left: 0; + } + + .md\:prose-xl thead th:last-child { + padding-right: 0; + } + + .md\:prose-xl tbody td { + padding-top: 0.8888889em; + padding-right: 0.6666667em; + padding-bottom: 0.8888889em; + padding-left: 0.6666667em; + } + + .md\:prose-xl tbody td:first-child { + padding-left: 0; + } + + .md\:prose-xl tbody td:last-child { + padding-right: 0; + } + + .md\:prose-xl> :first-child { + margin-top: 0; + } + + .md\:prose-xl> :last-child { + margin-bottom: 0; + } + + .md\:prose-2xl { + font-size: 1.5rem; + line-height: 1.6666667; + } + + .md\:prose-2xl p { + margin-top: 1.3333333em; + margin-bottom: 1.3333333em; + } + + .md\:prose-2xl [class~="lead"] { + font-size: 1.25em; + line-height: 1.4666667; + margin-top: 1.0666667em; + margin-bottom: 1.0666667em; + } + + .md\:prose-2xl blockquote { + margin-top: 1.7777778em; + margin-bottom: 1.7777778em; + padding-left: 1.1111111em; + } + + .md\:prose-2xl h1 { + font-size: 2.6666667em; + margin-top: 0; + margin-bottom: 0.875em; + line-height: 1; + } + + .md\:prose-2xl h2 { + font-size: 2em; + margin-top: 1.5em; + margin-bottom: 0.8333333em; + line-height: 1.0833333; + } + + .md\:prose-2xl h3 { + font-size: 1.5em; + margin-top: 1.5555556em; + margin-bottom: 0.6666667em; + line-height: 1.2222222; + } + + .md\:prose-2xl h4 { + margin-top: 1.6666667em; + margin-bottom: 0.6666667em; + line-height: 1.5; + } + + .md\:prose-2xl img { + margin-top: 2em; + margin-bottom: 2em; + } + + .md\:prose-2xl video { + margin-top: 2em; + margin-bottom: 2em; + } + + .md\:prose-2xl figure { + margin-top: 2em; + margin-bottom: 2em; + } + + .md\:prose-2xl figure>* { + margin-top: 0; + margin-bottom: 0; + } + + .md\:prose-2xl figure figcaption { + font-size: 0.8333333em; + line-height: 1.6; + margin-top: 1em; + } + + .md\:prose-2xl code { + font-size: 0.8333333em; + } + + .md\:prose-2xl h2 code { + font-size: 0.875em; + } + + .md\:prose-2xl h3 code { + font-size: 0.8888889em; + } + + .md\:prose-2xl pre { + font-size: 0.8333333em; + line-height: 1.8; + margin-top: 2em; + margin-bottom: 2em; + border-radius: 0.5rem; + padding-top: 1.2em; + padding-right: 1.6em; + padding-bottom: 1.2em; + padding-left: 1.6em; + } + + .md\:prose-2xl ol { + margin-top: 1.3333333em; + margin-bottom: 1.3333333em; + } + + .md\:prose-2xl ul { + margin-top: 1.3333333em; + margin-bottom: 1.3333333em; + } + + .md\:prose-2xl li { + margin-top: 0.5em; + margin-bottom: 0.5em; + } + + .md\:prose-2xl ol>li { + padding-left: 1.6666667em; + } + + .md\:prose-2xl ol>li::before { + left: 0; + } + + .md\:prose-2xl ul>li { + padding-left: 1.6666667em; + } + + .md\:prose-2xl ul>li::before { + width: 0.3333333em; + height: 0.3333333em; + top: calc(0.8333333em - 0.1666667em); + left: 0.25em; + } + + .md\:prose-2xl>ul>li p { + margin-top: 0.8333333em; + margin-bottom: 0.8333333em; + } + + .md\:prose-2xl>ul>li>*:first-child { + margin-top: 1.3333333em; + } + + .md\:prose-2xl>ul>li>*:last-child { + margin-bottom: 1.3333333em; + } + + .md\:prose-2xl>ol>li>*:first-child { + margin-top: 1.3333333em; + } + + .md\:prose-2xl>ol>li>*:last-child { + margin-bottom: 1.3333333em; + } + + .md\:prose-2xl ul ul, + .md\:prose-2xl ul ol, + .md\:prose-2xl ol ul, + .md\:prose-2xl ol ol { + margin-top: 0.6666667em; + margin-bottom: 0.6666667em; + } + + .md\:prose-2xl hr { + margin-top: 3em; + margin-bottom: 3em; + } + + .md\:prose-2xl hr+* { + margin-top: 0; + } + + .md\:prose-2xl h2+* { + margin-top: 0; + } + + .md\:prose-2xl h3+* { + margin-top: 0; + } + + .md\:prose-2xl h4+* { + margin-top: 0; + } + + .md\:prose-2xl table { + font-size: 0.8333333em; + line-height: 1.4; + } + + .md\:prose-2xl thead th { + padding-right: 0.6em; + padding-bottom: 0.8em; + padding-left: 0.6em; + } + + .md\:prose-2xl thead th:first-child { + padding-left: 0; + } + + .md\:prose-2xl thead th:last-child { + padding-right: 0; + } + + .md\:prose-2xl tbody td { + padding-top: 0.8em; + padding-right: 0.6em; + padding-bottom: 0.8em; + padding-left: 0.6em; + } + + .md\:prose-2xl tbody td:first-child { + padding-left: 0; + } + + .md\:prose-2xl tbody td:last-child { + padding-right: 0; + } + + .md\:prose-2xl> :first-child { + margin-top: 0; + } + + .md\:prose-2xl> :last-child { + margin-bottom: 0; + } + + .md\:prose-red a {} + + .md\:prose-red a code {} + + .md\:prose-yellow a {} + + .md\:prose-yellow a code {} + + .md\:prose-green a {} + + .md\:prose-green a code {} + + .md\:prose-blue a {} + + .md\:prose-blue a code {} + + .md\:prose-indigo a {} + + .md\:prose-indigo a code {} + + .md\:prose-purple a {} + + .md\:prose-purple a code {} + + .md\:prose-pink a {} + + .md\:prose-pink a code {} +} + +@media (min-width: 1024px) { + .lg\:prose { + + max-width: 65ch; + } + + .lg\:prose [class~="lead"] { + + font-size: 1.25em; + line-height: 1.6; + margin-top: 1.2em; + margin-bottom: 1.2em; + } + + .lg\:prose a { + + text-decoration: underline; + font-weight: 500; + } + + .lg\:prose strong { + + font-weight: 600; + } + + .lg\:prose ol[type="A"] { + --list-counter-style: upper-alpha; + } + + .lg\:prose ol[type="a"] { + --list-counter-style: lower-alpha; + } + + .lg\:prose ol[type="A" s] { + --list-counter-style: upper-alpha; + } + + .lg\:prose ol[type="a" s] { + --list-counter-style: lower-alpha; + } + + .lg\:prose ol[type="I"] { + --list-counter-style: upper-roman; + } + + .lg\:prose ol[type="i"] { + --list-counter-style: lower-roman; + } + + .lg\:prose ol[type="I" s] { + --list-counter-style: upper-roman; + } + + .lg\:prose ol[type="i" s] { + --list-counter-style: lower-roman; + } + + .lg\:prose ol[type="1"] { + --list-counter-style: decimal; + } + + .lg\:prose ol>li { + position: relative; + padding-left: 1.75em; + } + + .lg\:prose ol>li::before { + content: counter(list-item, var(--list-counter-style, decimal)) "."; + position: absolute; + font-weight: 400; + + left: 0; + } + + .lg\:prose ul>li { + position: relative; + padding-left: 1.75em; + } + + .lg\:prose ul>li::before { + content: ""; + position: absolute; + + border-radius: 50%; + width: 0.375em; + height: 0.375em; + top: calc(0.875em - 0.1875em); + left: 0.25em; + } + + .lg\:prose hr { + + border-top-width: 1px; + margin-top: 3em; + margin-bottom: 3em; + } + + .lg\:prose blockquote { + font-weight: 500; + font-style: italic; + + border-left-width: 0.25rem; + + quotes: "\201C" "\201D" "\2018" "\2019"; + margin-top: 1.6em; + margin-bottom: 1.6em; + padding-left: 1em; + } + + .lg\:prose blockquote p:first-of-type::before { + content: open-quote; + } + + .lg\:prose blockquote p:last-of-type::after { + content: close-quote; + } + + .lg\:prose h1 { + + font-weight: 800; + font-size: 2.25em; + margin-top: 0; + margin-bottom: 0.8888889em; + line-height: 1.1111111; + } + + .lg\:prose h2 { + + font-weight: 700; + font-size: 1.5em; + margin-top: 2em; + margin-bottom: 1em; + line-height: 1.3333333; + } + + .lg\:prose h3 { + + font-weight: 600; + font-size: 1.25em; + margin-top: 1.6em; + margin-bottom: 0.6em; + line-height: 1.6; + } + + .lg\:prose h4 { + + font-weight: 600; + margin-top: 1.5em; + margin-bottom: 0.5em; + line-height: 1.5; + } + + .lg\:prose figure figcaption { + + font-size: 0.875em; + line-height: 1.4285714; + margin-top: 0.8571429em; + } + + .lg\:prose code { + + font-weight: 600; + font-size: 0.875em; + } + + .lg\:prose code::before { + content: "`"; + } + + .lg\:prose code::after { + content: "`"; + } + + .lg\:prose a code {} + + .lg\:prose pre { + + + overflow-x: auto; + font-size: 0.875em; + line-height: 1.7142857; + margin-top: 1.7142857em; + margin-bottom: 1.7142857em; + border-radius: 0.375rem; + padding-top: 0.8571429em; + padding-right: 1.1428571em; + padding-bottom: 0.8571429em; + padding-left: 1.1428571em; + } + + .lg\:prose pre code { + + border-width: 0; + border-radius: 0; + padding: 0; + font-weight: 400; + + font-size: inherit; + font-family: inherit; + line-height: inherit; + } + + .lg\:prose pre code::before { + content: none; + } + + .lg\:prose pre code::after { + content: none; + } + + .lg\:prose table { + width: 100%; + table-layout: auto; + text-align: left; + margin-top: 2em; + margin-bottom: 2em; + font-size: 0.875em; + line-height: 1.7142857; + } + + .lg\:prose thead { + + font-weight: 600; + border-bottom-width: 1px; + + } + + .lg\:prose thead th { + vertical-align: bottom; + padding-right: 0.5714286em; + padding-bottom: 0.5714286em; + padding-left: 0.5714286em; + } + + .lg\:prose tbody tr { + border-bottom-width: 1px; + + } + + .lg\:prose tbody tr:last-child { + border-bottom-width: 0; + } + + .lg\:prose tbody td { + vertical-align: top; + padding-top: 0.5714286em; + padding-right: 0.5714286em; + padding-bottom: 0.5714286em; + padding-left: 0.5714286em; + } + + .lg\:prose { + font-size: 1rem; + line-height: 1.75; + } + + .lg\:prose p { + margin-top: 1.25em; + margin-bottom: 1.25em; + } + + .lg\:prose img { + margin-top: 2em; + margin-bottom: 2em; + } + + .lg\:prose video { + margin-top: 2em; + margin-bottom: 2em; + } + + .lg\:prose figure { + margin-top: 2em; + margin-bottom: 2em; + } + + .lg\:prose figure>* { + margin-top: 0; + margin-bottom: 0; + } + + .lg\:prose h2 code { + font-size: 0.875em; + } + + .lg\:prose h3 code { + font-size: 0.9em; + } + + .lg\:prose ol { + margin-top: 1.25em; + margin-bottom: 1.25em; + } + + .lg\:prose ul { + margin-top: 1.25em; + margin-bottom: 1.25em; + } + + .lg\:prose li { + margin-top: 0.5em; + margin-bottom: 0.5em; + } + + .lg\:prose>ul>li p { + margin-top: 0.75em; + margin-bottom: 0.75em; + } + + .lg\:prose>ul>li>*:first-child { + margin-top: 1.25em; + } + + .lg\:prose>ul>li>*:last-child { + margin-bottom: 1.25em; + } + + .lg\:prose>ol>li>*:first-child { + margin-top: 1.25em; + } + + .lg\:prose>ol>li>*:last-child { + margin-bottom: 1.25em; + } + + .lg\:prose ul ul, + .lg\:prose ul ol, + .lg\:prose ol ul, + .lg\:prose ol ol { + margin-top: 0.75em; + margin-bottom: 0.75em; + } + + .lg\:prose hr+* { + margin-top: 0; + } + + .lg\:prose h2+* { + margin-top: 0; + } + + .lg\:prose h3+* { + margin-top: 0; + } + + .lg\:prose h4+* { + margin-top: 0; + } + + .lg\:prose thead th:first-child { + padding-left: 0; + } + + .lg\:prose thead th:last-child { + padding-right: 0; + } + + .lg\:prose tbody td:first-child { + padding-left: 0; + } + + .lg\:prose tbody td:last-child { + padding-right: 0; + } + + .lg\:prose> :first-child { + margin-top: 0; + } + + .lg\:prose> :last-child { + margin-bottom: 0; + } + + .lg\:prose-sm { + font-size: 0.875rem; + line-height: 1.7142857; + } + + .lg\:prose-sm p { + margin-top: 1.1428571em; + margin-bottom: 1.1428571em; + } + + .lg\:prose-sm [class~="lead"] { + font-size: 1.2857143em; + line-height: 1.5555556; + margin-top: 0.8888889em; + margin-bottom: 0.8888889em; + } + + .lg\:prose-sm blockquote { + margin-top: 1.3333333em; + margin-bottom: 1.3333333em; + padding-left: 1.1111111em; + } + + .lg\:prose-sm h1 { + font-size: 2.1428571em; + margin-top: 0; + margin-bottom: 0.8em; + line-height: 1.2; + } + + .lg\:prose-sm h2 { + font-size: 1.4285714em; + margin-top: 1.6em; + margin-bottom: 0.8em; + line-height: 1.4; + } + + .lg\:prose-sm h3 { + font-size: 1.2857143em; + margin-top: 1.5555556em; + margin-bottom: 0.4444444em; + line-height: 1.5555556; + } + + .lg\:prose-sm h4 { + margin-top: 1.4285714em; + margin-bottom: 0.5714286em; + line-height: 1.4285714; + } + + .lg\:prose-sm img { + margin-top: 1.7142857em; + margin-bottom: 1.7142857em; + } + + .lg\:prose-sm video { + margin-top: 1.7142857em; + margin-bottom: 1.7142857em; + } + + .lg\:prose-sm figure { + margin-top: 1.7142857em; + margin-bottom: 1.7142857em; + } + + .lg\:prose-sm figure>* { + margin-top: 0; + margin-bottom: 0; + } + + .lg\:prose-sm figure figcaption { + font-size: 0.8571429em; + line-height: 1.3333333; + margin-top: 0.6666667em; + } + + .lg\:prose-sm code { + font-size: 0.8571429em; + } + + .lg\:prose-sm h2 code { + font-size: 0.9em; + } + + .lg\:prose-sm h3 code { + font-size: 0.8888889em; + } + + .lg\:prose-sm pre { + font-size: 0.8571429em; + line-height: 1.6666667; + margin-top: 1.6666667em; + margin-bottom: 1.6666667em; + border-radius: 0.25rem; + padding-top: 0.6666667em; + padding-right: 1em; + padding-bottom: 0.6666667em; + padding-left: 1em; + } + + .lg\:prose-sm ol { + margin-top: 1.1428571em; + margin-bottom: 1.1428571em; + } + + .lg\:prose-sm ul { + margin-top: 1.1428571em; + margin-bottom: 1.1428571em; + } + + .lg\:prose-sm li { + margin-top: 0.2857143em; + margin-bottom: 0.2857143em; + } + + .lg\:prose-sm ol>li { + padding-left: 1.5714286em; + } + + .lg\:prose-sm ol>li::before { + left: 0; + } + + .lg\:prose-sm ul>li { + padding-left: 1.5714286em; + } + + .lg\:prose-sm ul>li::before { + height: 0.3571429em; + width: 0.3571429em; + top: calc(0.8571429em - 0.1785714em); + left: 0.2142857em; + } + + .lg\:prose-sm>ul>li p { + margin-top: 0.5714286em; + margin-bottom: 0.5714286em; + } + + .lg\:prose-sm>ul>li>*:first-child { + margin-top: 1.1428571em; + } + + .lg\:prose-sm>ul>li>*:last-child { + margin-bottom: 1.1428571em; + } + + .lg\:prose-sm>ol>li>*:first-child { + margin-top: 1.1428571em; + } + + .lg\:prose-sm>ol>li>*:last-child { + margin-bottom: 1.1428571em; + } + + .lg\:prose-sm ul ul, + .lg\:prose-sm ul ol, + .lg\:prose-sm ol ul, + .lg\:prose-sm ol ol { + margin-top: 0.5714286em; + margin-bottom: 0.5714286em; + } + + .lg\:prose-sm hr { + margin-top: 2.8571429em; + margin-bottom: 2.8571429em; + } + + .lg\:prose-sm hr+* { + margin-top: 0; + } + + .lg\:prose-sm h2+* { + margin-top: 0; + } + + .lg\:prose-sm h3+* { + margin-top: 0; + } + + .lg\:prose-sm h4+* { + margin-top: 0; + } + + .lg\:prose-sm table { + font-size: 0.8571429em; + line-height: 1.5; + } + + .lg\:prose-sm thead th { + padding-right: 1em; + padding-bottom: 0.6666667em; + padding-left: 1em; + } + + .lg\:prose-sm thead th:first-child { + padding-left: 0; + } + + .lg\:prose-sm thead th:last-child { + padding-right: 0; + } + + .lg\:prose-sm tbody td { + padding-top: 0.6666667em; + padding-right: 1em; + padding-bottom: 0.6666667em; + padding-left: 1em; + } + + .lg\:prose-sm tbody td:first-child { + padding-left: 0; + } + + .lg\:prose-sm tbody td:last-child { + padding-right: 0; + } + + .lg\:prose-sm> :first-child { + margin-top: 0; + } + + .lg\:prose-sm> :last-child { + margin-bottom: 0; + } + + .lg\:prose-lg { + font-size: 1.125rem; + line-height: 1.7777778; + } + + .lg\:prose-lg p { + margin-top: 1.3333333em; + margin-bottom: 1.3333333em; + } + + .lg\:prose-lg [class~="lead"] { + font-size: 1.2222222em; + line-height: 1.4545455; + margin-top: 1.0909091em; + margin-bottom: 1.0909091em; + } + + .lg\:prose-lg blockquote { + margin-top: 1.6666667em; + margin-bottom: 1.6666667em; + padding-left: 1em; + } + + .lg\:prose-lg h1 { + font-size: 2.6666667em; + margin-top: 0; + margin-bottom: 0.8333333em; + line-height: 1; + } + + .lg\:prose-lg h2 { + font-size: 1.6666667em; + margin-top: 1.8666667em; + margin-bottom: 1.0666667em; + line-height: 1.3333333; + } + + .lg\:prose-lg h3 { + font-size: 1.3333333em; + margin-top: 1.6666667em; + margin-bottom: 0.6666667em; + line-height: 1.5; + } + + .lg\:prose-lg h4 { + margin-top: 1.7777778em; + margin-bottom: 0.4444444em; + line-height: 1.5555556; + } + + .lg\:prose-lg img { + margin-top: 1.7777778em; + margin-bottom: 1.7777778em; + } + + .lg\:prose-lg video { + margin-top: 1.7777778em; + margin-bottom: 1.7777778em; + } + + .lg\:prose-lg figure { + margin-top: 1.7777778em; + margin-bottom: 1.7777778em; + } + + .lg\:prose-lg figure>* { + margin-top: 0; + margin-bottom: 0; + } + + .lg\:prose-lg figure figcaption { + font-size: 0.8888889em; + line-height: 1.5; + margin-top: 1em; + } + + .lg\:prose-lg code { + font-size: 0.8888889em; + } + + .lg\:prose-lg h2 code { + font-size: 0.8666667em; + } + + .lg\:prose-lg h3 code { + font-size: 0.875em; + } + + .lg\:prose-lg pre { + font-size: 0.8888889em; + line-height: 1.75; + margin-top: 2em; + margin-bottom: 2em; + border-radius: 0.375rem; + padding-top: 1em; + padding-right: 1.5em; + padding-bottom: 1em; + padding-left: 1.5em; + } + + .lg\:prose-lg ol { + margin-top: 1.3333333em; + margin-bottom: 1.3333333em; + } + + .lg\:prose-lg ul { + margin-top: 1.3333333em; + margin-bottom: 1.3333333em; + } + + .lg\:prose-lg li { + margin-top: 0.6666667em; + margin-bottom: 0.6666667em; + } + + .lg\:prose-lg ol>li { + padding-left: 1.6666667em; + } + + .lg\:prose-lg ol>li::before { + left: 0; + } + + .lg\:prose-lg ul>li { + padding-left: 1.6666667em; + } + + .lg\:prose-lg ul>li::before { + width: 0.3333333em; + height: 0.3333333em; + top: calc(0.8888889em - 0.1666667em); + left: 0.2222222em; + } + + .lg\:prose-lg>ul>li p { + margin-top: 0.8888889em; + margin-bottom: 0.8888889em; + } + + .lg\:prose-lg>ul>li>*:first-child { + margin-top: 1.3333333em; + } + + .lg\:prose-lg>ul>li>*:last-child { + margin-bottom: 1.3333333em; + } + + .lg\:prose-lg>ol>li>*:first-child { + margin-top: 1.3333333em; + } + + .lg\:prose-lg>ol>li>*:last-child { + margin-bottom: 1.3333333em; + } + + .lg\:prose-lg ul ul, + .lg\:prose-lg ul ol, + .lg\:prose-lg ol ul, + .lg\:prose-lg ol ol { + margin-top: 0.8888889em; + margin-bottom: 0.8888889em; + } + + .lg\:prose-lg hr { + margin-top: 3.1111111em; + margin-bottom: 3.1111111em; + } + + .lg\:prose-lg hr+* { + margin-top: 0; + } + + .lg\:prose-lg h2+* { + margin-top: 0; + } + + .lg\:prose-lg h3+* { + margin-top: 0; + } + + .lg\:prose-lg h4+* { + margin-top: 0; + } + + .lg\:prose-lg table { + font-size: 0.8888889em; + line-height: 1.5; + } + + .lg\:prose-lg thead th { + padding-right: 0.75em; + padding-bottom: 0.75em; + padding-left: 0.75em; + } + + .lg\:prose-lg thead th:first-child { + padding-left: 0; + } + + .lg\:prose-lg thead th:last-child { + padding-right: 0; + } + + .lg\:prose-lg tbody td { + padding-top: 0.75em; + padding-right: 0.75em; + padding-bottom: 0.75em; + padding-left: 0.75em; + } + + .lg\:prose-lg tbody td:first-child { + padding-left: 0; + } + + .lg\:prose-lg tbody td:last-child { + padding-right: 0; + } + + .lg\:prose-lg> :first-child { + margin-top: 0; + } + + .lg\:prose-lg> :last-child { + margin-bottom: 0; + } + + .lg\:prose-xl { + font-size: 1.25rem; + line-height: 1.8; + } + + .lg\:prose-xl p { + margin-top: 1.2em; + margin-bottom: 1.2em; + } + + .lg\:prose-xl [class~="lead"] { + font-size: 1.2em; + line-height: 1.5; + margin-top: 1em; + margin-bottom: 1em; + } + + .lg\:prose-xl blockquote { + margin-top: 1.6em; + margin-bottom: 1.6em; + padding-left: 1.0666667em; + } + + .lg\:prose-xl h1 { + font-size: 2.8em; + margin-top: 0; + margin-bottom: 0.8571429em; + line-height: 1; + } + + .lg\:prose-xl h2 { + font-size: 1.8em; + margin-top: 1.5555556em; + margin-bottom: 0.8888889em; + line-height: 1.1111111; + } + + .lg\:prose-xl h3 { + font-size: 1.5em; + margin-top: 1.6em; + margin-bottom: 0.6666667em; + line-height: 1.3333333; + } + + .lg\:prose-xl h4 { + margin-top: 1.8em; + margin-bottom: 0.6em; + line-height: 1.6; + } + + .lg\:prose-xl img { + margin-top: 2em; + margin-bottom: 2em; + } + + .lg\:prose-xl video { + margin-top: 2em; + margin-bottom: 2em; + } + + .lg\:prose-xl figure { + margin-top: 2em; + margin-bottom: 2em; + } + + .lg\:prose-xl figure>* { + margin-top: 0; + margin-bottom: 0; + } + + .lg\:prose-xl figure figcaption { + font-size: 0.9em; + line-height: 1.5555556; + margin-top: 1em; + } + + .lg\:prose-xl code { + font-size: 0.9em; + } + + .lg\:prose-xl h2 code { + font-size: 0.8611111em; + } + + .lg\:prose-xl h3 code { + font-size: 0.9em; + } + + .lg\:prose-xl pre { + font-size: 0.9em; + line-height: 1.7777778; + margin-top: 2em; + margin-bottom: 2em; + border-radius: 0.5rem; + padding-top: 1.1111111em; + padding-right: 1.3333333em; + padding-bottom: 1.1111111em; + padding-left: 1.3333333em; + } + + .lg\:prose-xl ol { + margin-top: 1.2em; + margin-bottom: 1.2em; + } + + .lg\:prose-xl ul { + margin-top: 1.2em; + margin-bottom: 1.2em; + } + + .lg\:prose-xl li { + margin-top: 0.6em; + margin-bottom: 0.6em; + } + + .lg\:prose-xl ol>li { + padding-left: 1.8em; + } + + .lg\:prose-xl ol>li::before { + left: 0; + } + + .lg\:prose-xl ul>li { + padding-left: 1.8em; + } + + .lg\:prose-xl ul>li::before { + width: 0.35em; + height: 0.35em; + top: calc(0.9em - 0.175em); + left: 0.25em; + } + + .lg\:prose-xl>ul>li p { + margin-top: 0.8em; + margin-bottom: 0.8em; + } + + .lg\:prose-xl>ul>li>*:first-child { + margin-top: 1.2em; + } + + .lg\:prose-xl>ul>li>*:last-child { + margin-bottom: 1.2em; + } + + .lg\:prose-xl>ol>li>*:first-child { + margin-top: 1.2em; + } + + .lg\:prose-xl>ol>li>*:last-child { + margin-bottom: 1.2em; + } + + .lg\:prose-xl ul ul, + .lg\:prose-xl ul ol, + .lg\:prose-xl ol ul, + .lg\:prose-xl ol ol { + margin-top: 0.8em; + margin-bottom: 0.8em; + } + + .lg\:prose-xl hr { + margin-top: 2.8em; + margin-bottom: 2.8em; + } + + .lg\:prose-xl hr+* { + margin-top: 0; + } + + .lg\:prose-xl h2+* { + margin-top: 0; + } + + .lg\:prose-xl h3+* { + margin-top: 0; + } + + .lg\:prose-xl h4+* { + margin-top: 0; + } + + .lg\:prose-xl table { + font-size: 0.9em; + line-height: 1.5555556; + } + + .lg\:prose-xl thead th { + padding-right: 0.6666667em; + padding-bottom: 0.8888889em; + padding-left: 0.6666667em; + } + + .lg\:prose-xl thead th:first-child { + padding-left: 0; + } + + .lg\:prose-xl thead th:last-child { + padding-right: 0; + } + + .lg\:prose-xl tbody td { + padding-top: 0.8888889em; + padding-right: 0.6666667em; + padding-bottom: 0.8888889em; + padding-left: 0.6666667em; + } + + .lg\:prose-xl tbody td:first-child { + padding-left: 0; + } + + .lg\:prose-xl tbody td:last-child { + padding-right: 0; + } + + .lg\:prose-xl> :first-child { + margin-top: 0; + } + + .lg\:prose-xl> :last-child { + margin-bottom: 0; + } + + .lg\:prose-2xl { + font-size: 1.5rem; + line-height: 1.6666667; + } + + .lg\:prose-2xl p { + margin-top: 1.3333333em; + margin-bottom: 1.3333333em; + } + + .lg\:prose-2xl [class~="lead"] { + font-size: 1.25em; + line-height: 1.4666667; + margin-top: 1.0666667em; + margin-bottom: 1.0666667em; + } + + .lg\:prose-2xl blockquote { + margin-top: 1.7777778em; + margin-bottom: 1.7777778em; + padding-left: 1.1111111em; + } + + .lg\:prose-2xl h1 { + font-size: 2.6666667em; + margin-top: 0; + margin-bottom: 0.875em; + line-height: 1; + } + + .lg\:prose-2xl h2 { + font-size: 2em; + margin-top: 1.5em; + margin-bottom: 0.8333333em; + line-height: 1.0833333; + } + + .lg\:prose-2xl h3 { + font-size: 1.5em; + margin-top: 1.5555556em; + margin-bottom: 0.6666667em; + line-height: 1.2222222; + } + + .lg\:prose-2xl h4 { + margin-top: 1.6666667em; + margin-bottom: 0.6666667em; + line-height: 1.5; + } + + .lg\:prose-2xl img { + margin-top: 2em; + margin-bottom: 2em; + } + + .lg\:prose-2xl video { + margin-top: 2em; + margin-bottom: 2em; + } + + .lg\:prose-2xl figure { + margin-top: 2em; + margin-bottom: 2em; + } + + .lg\:prose-2xl figure>* { + margin-top: 0; + margin-bottom: 0; + } + + .lg\:prose-2xl figure figcaption { + font-size: 0.8333333em; + line-height: 1.6; + margin-top: 1em; + } + + .lg\:prose-2xl code { + font-size: 0.8333333em; + } + + .lg\:prose-2xl h2 code { + font-size: 0.875em; + } + + .lg\:prose-2xl h3 code { + font-size: 0.8888889em; + } + + .lg\:prose-2xl pre { + font-size: 0.8333333em; + line-height: 1.8; + margin-top: 2em; + margin-bottom: 2em; + border-radius: 0.5rem; + padding-top: 1.2em; + padding-right: 1.6em; + padding-bottom: 1.2em; + padding-left: 1.6em; + } + + .lg\:prose-2xl ol { + margin-top: 1.3333333em; + margin-bottom: 1.3333333em; + } + + .lg\:prose-2xl ul { + margin-top: 1.3333333em; + margin-bottom: 1.3333333em; + } + + .lg\:prose-2xl li { + margin-top: 0.5em; + margin-bottom: 0.5em; + } + + .lg\:prose-2xl ol>li { + padding-left: 1.6666667em; + } + + .lg\:prose-2xl ol>li::before { + left: 0; + } + + .lg\:prose-2xl ul>li { + padding-left: 1.6666667em; + } + + .lg\:prose-2xl ul>li::before { + width: 0.3333333em; + height: 0.3333333em; + top: calc(0.8333333em - 0.1666667em); + left: 0.25em; + } + + .lg\:prose-2xl>ul>li p { + margin-top: 0.8333333em; + margin-bottom: 0.8333333em; + } + + .lg\:prose-2xl>ul>li>*:first-child { + margin-top: 1.3333333em; + } + + .lg\:prose-2xl>ul>li>*:last-child { + margin-bottom: 1.3333333em; + } + + .lg\:prose-2xl>ol>li>*:first-child { + margin-top: 1.3333333em; + } + + .lg\:prose-2xl>ol>li>*:last-child { + margin-bottom: 1.3333333em; + } + + .lg\:prose-2xl ul ul, + .lg\:prose-2xl ul ol, + .lg\:prose-2xl ol ul, + .lg\:prose-2xl ol ol { + margin-top: 0.6666667em; + margin-bottom: 0.6666667em; + } + + .lg\:prose-2xl hr { + margin-top: 3em; + margin-bottom: 3em; + } + + .lg\:prose-2xl hr+* { + margin-top: 0; + } + + .lg\:prose-2xl h2+* { + margin-top: 0; + } + + .lg\:prose-2xl h3+* { + margin-top: 0; + } + + .lg\:prose-2xl h4+* { + margin-top: 0; + } + + .lg\:prose-2xl table { + font-size: 0.8333333em; + line-height: 1.4; + } + + .lg\:prose-2xl thead th { + padding-right: 0.6em; + padding-bottom: 0.8em; + padding-left: 0.6em; + } + + .lg\:prose-2xl thead th:first-child { + padding-left: 0; + } + + .lg\:prose-2xl thead th:last-child { + padding-right: 0; + } + + .lg\:prose-2xl tbody td { + padding-top: 0.8em; + padding-right: 0.6em; + padding-bottom: 0.8em; + padding-left: 0.6em; + } + + .lg\:prose-2xl tbody td:first-child { + padding-left: 0; + } + + .lg\:prose-2xl tbody td:last-child { + padding-right: 0; + } + + .lg\:prose-2xl> :first-child { + margin-top: 0; + } + + .lg\:prose-2xl> :last-child { + margin-bottom: 0; + } + + .lg\:prose-red a {} + + .lg\:prose-red a code {} + + .lg\:prose-yellow a {} + + .lg\:prose-yellow a code {} + + .lg\:prose-green a {} + + .lg\:prose-green a code {} + + .lg\:prose-blue a {} + + .lg\:prose-blue a code {} + + .lg\:prose-indigo a {} + + .lg\:prose-indigo a code {} + + .lg\:prose-purple a {} + + .lg\:prose-purple a code {} + + .lg\:prose-pink a {} + + .lg\:prose-pink a code {} +} + +@media (min-width: 1280px) { + .xl\:prose { + + max-width: 65ch; + } + + .xl\:prose [class~="lead"] { + + font-size: 1.25em; + line-height: 1.6; + margin-top: 1.2em; + margin-bottom: 1.2em; + } + + .xl\:prose a { + + text-decoration: underline; + font-weight: 500; + } + + .xl\:prose strong { + + font-weight: 600; + } + + .xl\:prose ol[type="A"] { + --list-counter-style: upper-alpha; + } + + .xl\:prose ol[type="a"] { + --list-counter-style: lower-alpha; + } + + .xl\:prose ol[type="A" s] { + --list-counter-style: upper-alpha; + } + + .xl\:prose ol[type="a" s] { + --list-counter-style: lower-alpha; + } + + .xl\:prose ol[type="I"] { + --list-counter-style: upper-roman; + } + + .xl\:prose ol[type="i"] { + --list-counter-style: lower-roman; + } + + .xl\:prose ol[type="I" s] { + --list-counter-style: upper-roman; + } + + .xl\:prose ol[type="i" s] { + --list-counter-style: lower-roman; + } + + .xl\:prose ol[type="1"] { + --list-counter-style: decimal; + } + + .xl\:prose ol>li { + position: relative; + padding-left: 1.75em; + } + + .xl\:prose ol>li::before { + content: counter(list-item, var(--list-counter-style, decimal)) "."; + position: absolute; + font-weight: 400; + + left: 0; + } + + .xl\:prose ul>li { + position: relative; + padding-left: 1.75em; + } + + .xl\:prose ul>li::before { + content: ""; + position: absolute; + + border-radius: 50%; + width: 0.375em; + height: 0.375em; + top: calc(0.875em - 0.1875em); + left: 0.25em; + } + + .xl\:prose hr { + + border-top-width: 1px; + margin-top: 3em; + margin-bottom: 3em; + } + + .xl\:prose blockquote { + font-weight: 500; + font-style: italic; + + border-left-width: 0.25rem; + + quotes: "\201C" "\201D" "\2018" "\2019"; + margin-top: 1.6em; + margin-bottom: 1.6em; + padding-left: 1em; + } + + .xl\:prose blockquote p:first-of-type::before { + content: open-quote; + } + + .xl\:prose blockquote p:last-of-type::after { + content: close-quote; + } + + .xl\:prose h1 { + + font-weight: 800; + font-size: 2.25em; + margin-top: 0; + margin-bottom: 0.8888889em; + line-height: 1.1111111; + } + + .xl\:prose h2 { + + font-weight: 700; + font-size: 1.5em; + margin-top: 2em; + margin-bottom: 1em; + line-height: 1.3333333; + } + + .xl\:prose h3 { + + font-weight: 600; + font-size: 1.25em; + margin-top: 1.6em; + margin-bottom: 0.6em; + line-height: 1.6; + } + + .xl\:prose h4 { + + font-weight: 600; + margin-top: 1.5em; + margin-bottom: 0.5em; + line-height: 1.5; + } + + .xl\:prose figure figcaption { + + font-size: 0.875em; + line-height: 1.4285714; + margin-top: 0.8571429em; + } + + .xl\:prose code { + + font-weight: 600; + font-size: 0.875em; + } + + .xl\:prose code::before { + content: "`"; + } + + .xl\:prose code::after { + content: "`"; + } + + .xl\:prose a code {} + + .xl\:prose pre { + + + overflow-x: auto; + font-size: 0.875em; + line-height: 1.7142857; + margin-top: 1.7142857em; + margin-bottom: 1.7142857em; + border-radius: 0.375rem; + padding-top: 0.8571429em; + padding-right: 1.1428571em; + padding-bottom: 0.8571429em; + padding-left: 1.1428571em; + } + + .xl\:prose pre code { + + border-width: 0; + border-radius: 0; + padding: 0; + font-weight: 400; + + font-size: inherit; + font-family: inherit; + line-height: inherit; + } + + .xl\:prose pre code::before { + content: none; + } + + .xl\:prose pre code::after { + content: none; + } + + .xl\:prose table { + width: 100%; + table-layout: auto; + text-align: left; + margin-top: 2em; + margin-bottom: 2em; + font-size: 0.875em; + line-height: 1.7142857; + } + + .xl\:prose thead { + + font-weight: 600; + border-bottom-width: 1px; + + } + + .xl\:prose thead th { + vertical-align: bottom; + padding-right: 0.5714286em; + padding-bottom: 0.5714286em; + padding-left: 0.5714286em; + } + + .xl\:prose tbody tr { + border-bottom-width: 1px; + + } + + .xl\:prose tbody tr:last-child { + border-bottom-width: 0; + } + + .xl\:prose tbody td { + vertical-align: top; + padding-top: 0.5714286em; + padding-right: 0.5714286em; + padding-bottom: 0.5714286em; + padding-left: 0.5714286em; + } + + .xl\:prose { + font-size: 1rem; + line-height: 1.75; + } + + .xl\:prose p { + margin-top: 1.25em; + margin-bottom: 1.25em; + } + + .xl\:prose img { + margin-top: 2em; + margin-bottom: 2em; + } + + .xl\:prose video { + margin-top: 2em; + margin-bottom: 2em; + } + + .xl\:prose figure { + margin-top: 2em; + margin-bottom: 2em; + } + + .xl\:prose figure>* { + margin-top: 0; + margin-bottom: 0; + } + + .xl\:prose h2 code { + font-size: 0.875em; + } + + .xl\:prose h3 code { + font-size: 0.9em; + } + + .xl\:prose ol { + margin-top: 1.25em; + margin-bottom: 1.25em; + } + + .xl\:prose ul { + margin-top: 1.25em; + margin-bottom: 1.25em; + } + + .xl\:prose li { + margin-top: 0.5em; + margin-bottom: 0.5em; + } + + .xl\:prose>ul>li p { + margin-top: 0.75em; + margin-bottom: 0.75em; + } + + .xl\:prose>ul>li>*:first-child { + margin-top: 1.25em; + } + + .xl\:prose>ul>li>*:last-child { + margin-bottom: 1.25em; + } + + .xl\:prose>ol>li>*:first-child { + margin-top: 1.25em; + } + + .xl\:prose>ol>li>*:last-child { + margin-bottom: 1.25em; + } + + .xl\:prose ul ul, + .xl\:prose ul ol, + .xl\:prose ol ul, + .xl\:prose ol ol { + margin-top: 0.75em; + margin-bottom: 0.75em; + } + + .xl\:prose hr+* { + margin-top: 0; + } + + .xl\:prose h2+* { + margin-top: 0; + } + + .xl\:prose h3+* { + margin-top: 0; + } + + .xl\:prose h4+* { + margin-top: 0; + } + + .xl\:prose thead th:first-child { + padding-left: 0; + } + + .xl\:prose thead th:last-child { + padding-right: 0; + } + + .xl\:prose tbody td:first-child { + padding-left: 0; + } + + .xl\:prose tbody td:last-child { + padding-right: 0; + } + + .xl\:prose> :first-child { + margin-top: 0; + } + + .xl\:prose> :last-child { + margin-bottom: 0; + } + + .xl\:prose-sm { + font-size: 0.875rem; + line-height: 1.7142857; + } + + .xl\:prose-sm p { + margin-top: 1.1428571em; + margin-bottom: 1.1428571em; + } + + .xl\:prose-sm [class~="lead"] { + font-size: 1.2857143em; + line-height: 1.5555556; + margin-top: 0.8888889em; + margin-bottom: 0.8888889em; + } + + .xl\:prose-sm blockquote { + margin-top: 1.3333333em; + margin-bottom: 1.3333333em; + padding-left: 1.1111111em; + } + + .xl\:prose-sm h1 { + font-size: 2.1428571em; + margin-top: 0; + margin-bottom: 0.8em; + line-height: 1.2; + } + + .xl\:prose-sm h2 { + font-size: 1.4285714em; + margin-top: 1.6em; + margin-bottom: 0.8em; + line-height: 1.4; + } + + .xl\:prose-sm h3 { + font-size: 1.2857143em; + margin-top: 1.5555556em; + margin-bottom: 0.4444444em; + line-height: 1.5555556; + } + + .xl\:prose-sm h4 { + margin-top: 1.4285714em; + margin-bottom: 0.5714286em; + line-height: 1.4285714; + } + + .xl\:prose-sm img { + margin-top: 1.7142857em; + margin-bottom: 1.7142857em; + } + + .xl\:prose-sm video { + margin-top: 1.7142857em; + margin-bottom: 1.7142857em; + } + + .xl\:prose-sm figure { + margin-top: 1.7142857em; + margin-bottom: 1.7142857em; + } + + .xl\:prose-sm figure>* { + margin-top: 0; + margin-bottom: 0; + } + + .xl\:prose-sm figure figcaption { + font-size: 0.8571429em; + line-height: 1.3333333; + margin-top: 0.6666667em; + } + + .xl\:prose-sm code { + font-size: 0.8571429em; + } + + .xl\:prose-sm h2 code { + font-size: 0.9em; + } + + .xl\:prose-sm h3 code { + font-size: 0.8888889em; + } + + .xl\:prose-sm pre { + font-size: 0.8571429em; + line-height: 1.6666667; + margin-top: 1.6666667em; + margin-bottom: 1.6666667em; + border-radius: 0.25rem; + padding-top: 0.6666667em; + padding-right: 1em; + padding-bottom: 0.6666667em; + padding-left: 1em; + } + + .xl\:prose-sm ol { + margin-top: 1.1428571em; + margin-bottom: 1.1428571em; + } + + .xl\:prose-sm ul { + margin-top: 1.1428571em; + margin-bottom: 1.1428571em; + } + + .xl\:prose-sm li { + margin-top: 0.2857143em; + margin-bottom: 0.2857143em; + } + + .xl\:prose-sm ol>li { + padding-left: 1.5714286em; + } + + .xl\:prose-sm ol>li::before { + left: 0; + } + + .xl\:prose-sm ul>li { + padding-left: 1.5714286em; + } + + .xl\:prose-sm ul>li::before { + height: 0.3571429em; + width: 0.3571429em; + top: calc(0.8571429em - 0.1785714em); + left: 0.2142857em; + } + + .xl\:prose-sm>ul>li p { + margin-top: 0.5714286em; + margin-bottom: 0.5714286em; + } + + .xl\:prose-sm>ul>li>*:first-child { + margin-top: 1.1428571em; + } + + .xl\:prose-sm>ul>li>*:last-child { + margin-bottom: 1.1428571em; + } + + .xl\:prose-sm>ol>li>*:first-child { + margin-top: 1.1428571em; + } + + .xl\:prose-sm>ol>li>*:last-child { + margin-bottom: 1.1428571em; + } + + .xl\:prose-sm ul ul, + .xl\:prose-sm ul ol, + .xl\:prose-sm ol ul, + .xl\:prose-sm ol ol { + margin-top: 0.5714286em; + margin-bottom: 0.5714286em; + } + + .xl\:prose-sm hr { + margin-top: 2.8571429em; + margin-bottom: 2.8571429em; + } + + .xl\:prose-sm hr+* { + margin-top: 0; + } + + .xl\:prose-sm h2+* { + margin-top: 0; + } + + .xl\:prose-sm h3+* { + margin-top: 0; + } + + .xl\:prose-sm h4+* { + margin-top: 0; + } + + .xl\:prose-sm table { + font-size: 0.8571429em; + line-height: 1.5; + } + + .xl\:prose-sm thead th { + padding-right: 1em; + padding-bottom: 0.6666667em; + padding-left: 1em; + } + + .xl\:prose-sm thead th:first-child { + padding-left: 0; + } + + .xl\:prose-sm thead th:last-child { + padding-right: 0; + } + + .xl\:prose-sm tbody td { + padding-top: 0.6666667em; + padding-right: 1em; + padding-bottom: 0.6666667em; + padding-left: 1em; + } + + .xl\:prose-sm tbody td:first-child { + padding-left: 0; + } + + .xl\:prose-sm tbody td:last-child { + padding-right: 0; + } + + .xl\:prose-sm> :first-child { + margin-top: 0; + } + + .xl\:prose-sm> :last-child { + margin-bottom: 0; + } + + .xl\:prose-lg { + font-size: 1.125rem; + line-height: 1.7777778; + } + + .xl\:prose-lg p { + margin-top: 1.3333333em; + margin-bottom: 1.3333333em; + } + + .xl\:prose-lg [class~="lead"] { + font-size: 1.2222222em; + line-height: 1.4545455; + margin-top: 1.0909091em; + margin-bottom: 1.0909091em; + } + + .xl\:prose-lg blockquote { + margin-top: 1.6666667em; + margin-bottom: 1.6666667em; + padding-left: 1em; + } + + .xl\:prose-lg h1 { + font-size: 2.6666667em; + margin-top: 0; + margin-bottom: 0.8333333em; + line-height: 1; + } + + .xl\:prose-lg h2 { + font-size: 1.6666667em; + margin-top: 1.8666667em; + margin-bottom: 1.0666667em; + line-height: 1.3333333; + } + + .xl\:prose-lg h3 { + font-size: 1.3333333em; + margin-top: 1.6666667em; + margin-bottom: 0.6666667em; + line-height: 1.5; + } + + .xl\:prose-lg h4 { + margin-top: 1.7777778em; + margin-bottom: 0.4444444em; + line-height: 1.5555556; + } + + .xl\:prose-lg img { + margin-top: 1.7777778em; + margin-bottom: 1.7777778em; + } + + .xl\:prose-lg video { + margin-top: 1.7777778em; + margin-bottom: 1.7777778em; + } + + .xl\:prose-lg figure { + margin-top: 1.7777778em; + margin-bottom: 1.7777778em; + } + + .xl\:prose-lg figure>* { + margin-top: 0; + margin-bottom: 0; + } + + .xl\:prose-lg figure figcaption { + font-size: 0.8888889em; + line-height: 1.5; + margin-top: 1em; + } + + .xl\:prose-lg code { + font-size: 0.8888889em; + } + + .xl\:prose-lg h2 code { + font-size: 0.8666667em; + } + + .xl\:prose-lg h3 code { + font-size: 0.875em; + } + + .xl\:prose-lg pre { + font-size: 0.8888889em; + line-height: 1.75; + margin-top: 2em; + margin-bottom: 2em; + border-radius: 0.375rem; + padding-top: 1em; + padding-right: 1.5em; + padding-bottom: 1em; + padding-left: 1.5em; + } + + .xl\:prose-lg ol { + margin-top: 1.3333333em; + margin-bottom: 1.3333333em; + } + + .xl\:prose-lg ul { + margin-top: 1.3333333em; + margin-bottom: 1.3333333em; + } + + .xl\:prose-lg li { + margin-top: 0.6666667em; + margin-bottom: 0.6666667em; + } + + .xl\:prose-lg ol>li { + padding-left: 1.6666667em; + } + + .xl\:prose-lg ol>li::before { + left: 0; + } + + .xl\:prose-lg ul>li { + padding-left: 1.6666667em; + } + + .xl\:prose-lg ul>li::before { + width: 0.3333333em; + height: 0.3333333em; + top: calc(0.8888889em - 0.1666667em); + left: 0.2222222em; + } + + .xl\:prose-lg>ul>li p { + margin-top: 0.8888889em; + margin-bottom: 0.8888889em; + } + + .xl\:prose-lg>ul>li>*:first-child { + margin-top: 1.3333333em; + } + + .xl\:prose-lg>ul>li>*:last-child { + margin-bottom: 1.3333333em; + } + + .xl\:prose-lg>ol>li>*:first-child { + margin-top: 1.3333333em; + } + + .xl\:prose-lg>ol>li>*:last-child { + margin-bottom: 1.3333333em; + } + + .xl\:prose-lg ul ul, + .xl\:prose-lg ul ol, + .xl\:prose-lg ol ul, + .xl\:prose-lg ol ol { + margin-top: 0.8888889em; + margin-bottom: 0.8888889em; + } + + .xl\:prose-lg hr { + margin-top: 3.1111111em; + margin-bottom: 3.1111111em; + } + + .xl\:prose-lg hr+* { + margin-top: 0; + } + + .xl\:prose-lg h2+* { + margin-top: 0; + } + + .xl\:prose-lg h3+* { + margin-top: 0; + } + + .xl\:prose-lg h4+* { + margin-top: 0; + } + + .xl\:prose-lg table { + font-size: 0.8888889em; + line-height: 1.5; + } + + .xl\:prose-lg thead th { + padding-right: 0.75em; + padding-bottom: 0.75em; + padding-left: 0.75em; + } + + .xl\:prose-lg thead th:first-child { + padding-left: 0; + } + + .xl\:prose-lg thead th:last-child { + padding-right: 0; + } + + .xl\:prose-lg tbody td { + padding-top: 0.75em; + padding-right: 0.75em; + padding-bottom: 0.75em; + padding-left: 0.75em; + } + + .xl\:prose-lg tbody td:first-child { + padding-left: 0; + } + + .xl\:prose-lg tbody td:last-child { + padding-right: 0; + } + + .xl\:prose-lg> :first-child { + margin-top: 0; + } + + .xl\:prose-lg> :last-child { + margin-bottom: 0; + } + + .xl\:prose-xl { + font-size: 1.25rem; + line-height: 1.8; + } + + .xl\:prose-xl p { + margin-top: 1.2em; + margin-bottom: 1.2em; + } + + .xl\:prose-xl [class~="lead"] { + font-size: 1.2em; + line-height: 1.5; + margin-top: 1em; + margin-bottom: 1em; + } + + .xl\:prose-xl blockquote { + margin-top: 1.6em; + margin-bottom: 1.6em; + padding-left: 1.0666667em; + } + + .xl\:prose-xl h1 { + font-size: 2.8em; + margin-top: 0; + margin-bottom: 0.8571429em; + line-height: 1; + } + + .xl\:prose-xl h2 { + font-size: 1.8em; + margin-top: 1.5555556em; + margin-bottom: 0.8888889em; + line-height: 1.1111111; + } + + .xl\:prose-xl h3 { + font-size: 1.5em; + margin-top: 1.6em; + margin-bottom: 0.6666667em; + line-height: 1.3333333; + } + + .xl\:prose-xl h4 { + margin-top: 1.8em; + margin-bottom: 0.6em; + line-height: 1.6; + } + + .xl\:prose-xl img { + margin-top: 2em; + margin-bottom: 2em; + } + + .xl\:prose-xl video { + margin-top: 2em; + margin-bottom: 2em; + } + + .xl\:prose-xl figure { + margin-top: 2em; + margin-bottom: 2em; + } + + .xl\:prose-xl figure>* { + margin-top: 0; + margin-bottom: 0; + } + + .xl\:prose-xl figure figcaption { + font-size: 0.9em; + line-height: 1.5555556; + margin-top: 1em; + } + + .xl\:prose-xl code { + font-size: 0.9em; + } + + .xl\:prose-xl h2 code { + font-size: 0.8611111em; + } + + .xl\:prose-xl h3 code { + font-size: 0.9em; + } + + .xl\:prose-xl pre { + font-size: 0.9em; + line-height: 1.7777778; + margin-top: 2em; + margin-bottom: 2em; + border-radius: 0.5rem; + padding-top: 1.1111111em; + padding-right: 1.3333333em; + padding-bottom: 1.1111111em; + padding-left: 1.3333333em; + } + + .xl\:prose-xl ol { + margin-top: 1.2em; + margin-bottom: 1.2em; + } + + .xl\:prose-xl ul { + margin-top: 1.2em; + margin-bottom: 1.2em; + } + + .xl\:prose-xl li { + margin-top: 0.6em; + margin-bottom: 0.6em; + } + + .xl\:prose-xl ol>li { + padding-left: 1.8em; + } + + .xl\:prose-xl ol>li::before { + left: 0; + } + + .xl\:prose-xl ul>li { + padding-left: 1.8em; + } + + .xl\:prose-xl ul>li::before { + width: 0.35em; + height: 0.35em; + top: calc(0.9em - 0.175em); + left: 0.25em; + } + + .xl\:prose-xl>ul>li p { + margin-top: 0.8em; + margin-bottom: 0.8em; + } + + .xl\:prose-xl>ul>li>*:first-child { + margin-top: 1.2em; + } + + .xl\:prose-xl>ul>li>*:last-child { + margin-bottom: 1.2em; + } + + .xl\:prose-xl>ol>li>*:first-child { + margin-top: 1.2em; + } + + .xl\:prose-xl>ol>li>*:last-child { + margin-bottom: 1.2em; + } + + .xl\:prose-xl ul ul, + .xl\:prose-xl ul ol, + .xl\:prose-xl ol ul, + .xl\:prose-xl ol ol { + margin-top: 0.8em; + margin-bottom: 0.8em; + } + + .xl\:prose-xl hr { + margin-top: 2.8em; + margin-bottom: 2.8em; + } + + .xl\:prose-xl hr+* { + margin-top: 0; + } + + .xl\:prose-xl h2+* { + margin-top: 0; + } + + .xl\:prose-xl h3+* { + margin-top: 0; + } + + .xl\:prose-xl h4+* { + margin-top: 0; + } + + .xl\:prose-xl table { + font-size: 0.9em; + line-height: 1.5555556; + } + + .xl\:prose-xl thead th { + padding-right: 0.6666667em; + padding-bottom: 0.8888889em; + padding-left: 0.6666667em; + } + + .xl\:prose-xl thead th:first-child { + padding-left: 0; + } + + .xl\:prose-xl thead th:last-child { + padding-right: 0; + } + + .xl\:prose-xl tbody td { + padding-top: 0.8888889em; + padding-right: 0.6666667em; + padding-bottom: 0.8888889em; + padding-left: 0.6666667em; + } + + .xl\:prose-xl tbody td:first-child { + padding-left: 0; + } + + .xl\:prose-xl tbody td:last-child { + padding-right: 0; + } + + .xl\:prose-xl> :first-child { + margin-top: 0; + } + + .xl\:prose-xl> :last-child { + margin-bottom: 0; + } + + .xl\:prose-2xl { + font-size: 1.5rem; + line-height: 1.6666667; + } + + .xl\:prose-2xl p { + margin-top: 1.3333333em; + margin-bottom: 1.3333333em; + } + + .xl\:prose-2xl [class~="lead"] { + font-size: 1.25em; + line-height: 1.4666667; + margin-top: 1.0666667em; + margin-bottom: 1.0666667em; + } + + .xl\:prose-2xl blockquote { + margin-top: 1.7777778em; + margin-bottom: 1.7777778em; + padding-left: 1.1111111em; + } + + .xl\:prose-2xl h1 { + font-size: 2.6666667em; + margin-top: 0; + margin-bottom: 0.875em; + line-height: 1; + } + + .xl\:prose-2xl h2 { + font-size: 2em; + margin-top: 1.5em; + margin-bottom: 0.8333333em; + line-height: 1.0833333; + } + + .xl\:prose-2xl h3 { + font-size: 1.5em; + margin-top: 1.5555556em; + margin-bottom: 0.6666667em; + line-height: 1.2222222; + } + + .xl\:prose-2xl h4 { + margin-top: 1.6666667em; + margin-bottom: 0.6666667em; + line-height: 1.5; + } + + .xl\:prose-2xl img { + margin-top: 2em; + margin-bottom: 2em; + } + + .xl\:prose-2xl video { + margin-top: 2em; + margin-bottom: 2em; + } + + .xl\:prose-2xl figure { + margin-top: 2em; + margin-bottom: 2em; + } + + .xl\:prose-2xl figure>* { + margin-top: 0; + margin-bottom: 0; + } + + .xl\:prose-2xl figure figcaption { + font-size: 0.8333333em; + line-height: 1.6; + margin-top: 1em; + } + + .xl\:prose-2xl code { + font-size: 0.8333333em; + } + + .xl\:prose-2xl h2 code { + font-size: 0.875em; + } + + .xl\:prose-2xl h3 code { + font-size: 0.8888889em; + } + + .xl\:prose-2xl pre { + font-size: 0.8333333em; + line-height: 1.8; + margin-top: 2em; + margin-bottom: 2em; + border-radius: 0.5rem; + padding-top: 1.2em; + padding-right: 1.6em; + padding-bottom: 1.2em; + padding-left: 1.6em; + } + + .xl\:prose-2xl ol { + margin-top: 1.3333333em; + margin-bottom: 1.3333333em; + } + + .xl\:prose-2xl ul { + margin-top: 1.3333333em; + margin-bottom: 1.3333333em; + } + + .xl\:prose-2xl li { + margin-top: 0.5em; + margin-bottom: 0.5em; + } + + .xl\:prose-2xl ol>li { + padding-left: 1.6666667em; + } + + .xl\:prose-2xl ol>li::before { + left: 0; + } + + .xl\:prose-2xl ul>li { + padding-left: 1.6666667em; + } + + .xl\:prose-2xl ul>li::before { + width: 0.3333333em; + height: 0.3333333em; + top: calc(0.8333333em - 0.1666667em); + left: 0.25em; + } + + .xl\:prose-2xl>ul>li p { + margin-top: 0.8333333em; + margin-bottom: 0.8333333em; + } + + .xl\:prose-2xl>ul>li>*:first-child { + margin-top: 1.3333333em; + } + + .xl\:prose-2xl>ul>li>*:last-child { + margin-bottom: 1.3333333em; + } + + .xl\:prose-2xl>ol>li>*:first-child { + margin-top: 1.3333333em; + } + + .xl\:prose-2xl>ol>li>*:last-child { + margin-bottom: 1.3333333em; + } + + .xl\:prose-2xl ul ul, + .xl\:prose-2xl ul ol, + .xl\:prose-2xl ol ul, + .xl\:prose-2xl ol ol { + margin-top: 0.6666667em; + margin-bottom: 0.6666667em; + } + + .xl\:prose-2xl hr { + margin-top: 3em; + margin-bottom: 3em; + } + + .xl\:prose-2xl hr+* { + margin-top: 0; + } + + .xl\:prose-2xl h2+* { + margin-top: 0; + } + + .xl\:prose-2xl h3+* { + margin-top: 0; + } + + .xl\:prose-2xl h4+* { + margin-top: 0; + } + + .xl\:prose-2xl table { + font-size: 0.8333333em; + line-height: 1.4; + } + + .xl\:prose-2xl thead th { + padding-right: 0.6em; + padding-bottom: 0.8em; + padding-left: 0.6em; + } + + .xl\:prose-2xl thead th:first-child { + padding-left: 0; + } + + .xl\:prose-2xl thead th:last-child { + padding-right: 0; + } + + .xl\:prose-2xl tbody td { + padding-top: 0.8em; + padding-right: 0.6em; + padding-bottom: 0.8em; + padding-left: 0.6em; + } + + .xl\:prose-2xl tbody td:first-child { + padding-left: 0; + } + + .xl\:prose-2xl tbody td:last-child { + padding-right: 0; + } + + .xl\:prose-2xl> :first-child { + margin-top: 0; + } + + .xl\:prose-2xl> :last-child { + margin-bottom: 0; + } + + .xl\:prose-red a {} + + .xl\:prose-red a code {} + + .xl\:prose-yellow a {} + + .xl\:prose-yellow a code {} + + .xl\:prose-green a {} + + .xl\:prose-green a code {} + + .xl\:prose-blue a {} + + .xl\:prose-blue a code {} + + .xl\:prose-indigo a {} + + .xl\:prose-indigo a code {} + + .xl\:prose-purple a {} + + .xl\:prose-purple a code {} + + .xl\:prose-pink a {} + + .xl\:prose-pink a code {} +} + +@media (min-width: 1536px) { + .\32xl\:prose { + + max-width: 65ch; + } + + .\32xl\:prose [class~="lead"] { + + font-size: 1.25em; + line-height: 1.6; + margin-top: 1.2em; + margin-bottom: 1.2em; + } + + .\32xl\:prose a { + + text-decoration: underline; + font-weight: 500; + } + + .\32xl\:prose strong { + + font-weight: 600; + } + + .\32xl\:prose ol[type="A"] { + --list-counter-style: upper-alpha; + } + + .\32xl\:prose ol[type="a"] { + --list-counter-style: lower-alpha; + } + + .\32xl\:prose ol[type="A" s] { + --list-counter-style: upper-alpha; + } + + .\32xl\:prose ol[type="a" s] { + --list-counter-style: lower-alpha; + } + + .\32xl\:prose ol[type="I"] { + --list-counter-style: upper-roman; + } + + .\32xl\:prose ol[type="i"] { + --list-counter-style: lower-roman; + } + + .\32xl\:prose ol[type="I" s] { + --list-counter-style: upper-roman; + } + + .\32xl\:prose ol[type="i" s] { + --list-counter-style: lower-roman; + } + + .\32xl\:prose ol[type="1"] { + --list-counter-style: decimal; + } + + .\32xl\:prose ol>li { + position: relative; + padding-left: 1.75em; + } + + .\32xl\:prose ol>li::before { + content: counter(list-item, var(--list-counter-style, decimal)) "."; + position: absolute; + font-weight: 400; + + left: 0; + } + + .\32xl\:prose ul>li { + position: relative; + padding-left: 1.75em; + } + + .\32xl\:prose ul>li::before { + content: ""; + position: absolute; + + border-radius: 50%; + width: 0.375em; + height: 0.375em; + top: calc(0.875em - 0.1875em); + left: 0.25em; + } + + .\32xl\:prose hr { + + border-top-width: 1px; + margin-top: 3em; + margin-bottom: 3em; + } + + .\32xl\:prose blockquote { + font-weight: 500; + font-style: italic; + + border-left-width: 0.25rem; + + quotes: "\201C" "\201D" "\2018" "\2019"; + margin-top: 1.6em; + margin-bottom: 1.6em; + padding-left: 1em; + } + + .\32xl\:prose blockquote p:first-of-type::before { + content: open-quote; + } + + .\32xl\:prose blockquote p:last-of-type::after { + content: close-quote; + } + + .\32xl\:prose h1 { + + font-weight: 800; + font-size: 2.25em; + margin-top: 0; + margin-bottom: 0.8888889em; + line-height: 1.1111111; + } + + .\32xl\:prose h2 { + + font-weight: 700; + font-size: 1.5em; + margin-top: 2em; + margin-bottom: 1em; + line-height: 1.3333333; + } + + .\32xl\:prose h3 { + + font-weight: 600; + font-size: 1.25em; + margin-top: 1.6em; + margin-bottom: 0.6em; + line-height: 1.6; + } + + .\32xl\:prose h4 { + + font-weight: 600; + margin-top: 1.5em; + margin-bottom: 0.5em; + line-height: 1.5; + } + + .\32xl\:prose figure figcaption { + + font-size: 0.875em; + line-height: 1.4285714; + margin-top: 0.8571429em; + } + + .\32xl\:prose code { + + font-weight: 600; + font-size: 0.875em; + } + + .\32xl\:prose code::before { + content: "`"; + } + + .\32xl\:prose code::after { + content: "`"; + } + + .\32xl\:prose a code {} + + .\32xl\:prose pre { + + + overflow-x: auto; + font-size: 0.875em; + line-height: 1.7142857; + margin-top: 1.7142857em; + margin-bottom: 1.7142857em; + border-radius: 0.375rem; + padding-top: 0.8571429em; + padding-right: 1.1428571em; + padding-bottom: 0.8571429em; + padding-left: 1.1428571em; + } + + .\32xl\:prose pre code { + + border-width: 0; + border-radius: 0; + padding: 0; + font-weight: 400; + + font-size: inherit; + font-family: inherit; + line-height: inherit; + } + + .\32xl\:prose pre code::before { + content: none; + } + + .\32xl\:prose pre code::after { + content: none; + } + + .\32xl\:prose table { + width: 100%; + table-layout: auto; + text-align: left; + margin-top: 2em; + margin-bottom: 2em; + font-size: 0.875em; + line-height: 1.7142857; + } + + .\32xl\:prose thead { + + font-weight: 600; + border-bottom-width: 1px; + + } + + .\32xl\:prose thead th { + vertical-align: bottom; + padding-right: 0.5714286em; + padding-bottom: 0.5714286em; + padding-left: 0.5714286em; + } + + .\32xl\:prose tbody tr { + border-bottom-width: 1px; + + } + + .\32xl\:prose tbody tr:last-child { + border-bottom-width: 0; + } + + .\32xl\:prose tbody td { + vertical-align: top; + padding-top: 0.5714286em; + padding-right: 0.5714286em; + padding-bottom: 0.5714286em; + padding-left: 0.5714286em; + } + + .\32xl\:prose { + font-size: 1rem; + line-height: 1.75; + } + + .\32xl\:prose p { + margin-top: 1.25em; + margin-bottom: 1.25em; + } + + .\32xl\:prose img { + margin-top: 2em; + margin-bottom: 2em; + } + + .\32xl\:prose video { + margin-top: 2em; + margin-bottom: 2em; + } + + .\32xl\:prose figure { + margin-top: 2em; + margin-bottom: 2em; + } + + .\32xl\:prose figure>* { + margin-top: 0; + margin-bottom: 0; + } + + .\32xl\:prose h2 code { + font-size: 0.875em; + } + + .\32xl\:prose h3 code { + font-size: 0.9em; + } + + .\32xl\:prose ol { + margin-top: 1.25em; + margin-bottom: 1.25em; + } + + .\32xl\:prose ul { + margin-top: 1.25em; + margin-bottom: 1.25em; + } + + .\32xl\:prose li { + margin-top: 0.5em; + margin-bottom: 0.5em; + } + + .\32xl\:prose>ul>li p { + margin-top: 0.75em; + margin-bottom: 0.75em; + } + + .\32xl\:prose>ul>li>*:first-child { + margin-top: 1.25em; + } + + .\32xl\:prose>ul>li>*:last-child { + margin-bottom: 1.25em; + } + + .\32xl\:prose>ol>li>*:first-child { + margin-top: 1.25em; + } + + .\32xl\:prose>ol>li>*:last-child { + margin-bottom: 1.25em; + } + + .\32xl\:prose ul ul, + .\32xl\:prose ul ol, + .\32xl\:prose ol ul, + .\32xl\:prose ol ol { + margin-top: 0.75em; + margin-bottom: 0.75em; + } + + .\32xl\:prose hr+* { + margin-top: 0; + } + + .\32xl\:prose h2+* { + margin-top: 0; + } + + .\32xl\:prose h3+* { + margin-top: 0; + } + + .\32xl\:prose h4+* { + margin-top: 0; + } + + .\32xl\:prose thead th:first-child { + padding-left: 0; + } + + .\32xl\:prose thead th:last-child { + padding-right: 0; + } + + .\32xl\:prose tbody td:first-child { + padding-left: 0; + } + + .\32xl\:prose tbody td:last-child { + padding-right: 0; + } + + .\32xl\:prose> :first-child { + margin-top: 0; + } + + .\32xl\:prose> :last-child { + margin-bottom: 0; + } + + .\32xl\:prose-sm { + font-size: 0.875rem; + line-height: 1.7142857; + } + + .\32xl\:prose-sm p { + margin-top: 1.1428571em; + margin-bottom: 1.1428571em; + } + + .\32xl\:prose-sm [class~="lead"] { + font-size: 1.2857143em; + line-height: 1.5555556; + margin-top: 0.8888889em; + margin-bottom: 0.8888889em; + } + + .\32xl\:prose-sm blockquote { + margin-top: 1.3333333em; + margin-bottom: 1.3333333em; + padding-left: 1.1111111em; + } + + .\32xl\:prose-sm h1 { + font-size: 2.1428571em; + margin-top: 0; + margin-bottom: 0.8em; + line-height: 1.2; + } + + .\32xl\:prose-sm h2 { + font-size: 1.4285714em; + margin-top: 1.6em; + margin-bottom: 0.8em; + line-height: 1.4; + } + + .\32xl\:prose-sm h3 { + font-size: 1.2857143em; + margin-top: 1.5555556em; + margin-bottom: 0.4444444em; + line-height: 1.5555556; + } + + .\32xl\:prose-sm h4 { + margin-top: 1.4285714em; + margin-bottom: 0.5714286em; + line-height: 1.4285714; + } + + .\32xl\:prose-sm img { + margin-top: 1.7142857em; + margin-bottom: 1.7142857em; + } + + .\32xl\:prose-sm video { + margin-top: 1.7142857em; + margin-bottom: 1.7142857em; + } + + .\32xl\:prose-sm figure { + margin-top: 1.7142857em; + margin-bottom: 1.7142857em; + } + + .\32xl\:prose-sm figure>* { + margin-top: 0; + margin-bottom: 0; + } + + .\32xl\:prose-sm figure figcaption { + font-size: 0.8571429em; + line-height: 1.3333333; + margin-top: 0.6666667em; + } + + .\32xl\:prose-sm code { + font-size: 0.8571429em; + } + + .\32xl\:prose-sm h2 code { + font-size: 0.9em; + } + + .\32xl\:prose-sm h3 code { + font-size: 0.8888889em; + } + + .\32xl\:prose-sm pre { + font-size: 0.8571429em; + line-height: 1.6666667; + margin-top: 1.6666667em; + margin-bottom: 1.6666667em; + border-radius: 0.25rem; + padding-top: 0.6666667em; + padding-right: 1em; + padding-bottom: 0.6666667em; + padding-left: 1em; + } + + .\32xl\:prose-sm ol { + margin-top: 1.1428571em; + margin-bottom: 1.1428571em; + } + + .\32xl\:prose-sm ul { + margin-top: 1.1428571em; + margin-bottom: 1.1428571em; + } + + .\32xl\:prose-sm li { + margin-top: 0.2857143em; + margin-bottom: 0.2857143em; + } + + .\32xl\:prose-sm ol>li { + padding-left: 1.5714286em; + } + + .\32xl\:prose-sm ol>li::before { + left: 0; + } + + .\32xl\:prose-sm ul>li { + padding-left: 1.5714286em; + } + + .\32xl\:prose-sm ul>li::before { + height: 0.3571429em; + width: 0.3571429em; + top: calc(0.8571429em - 0.1785714em); + left: 0.2142857em; + } + + .\32xl\:prose-sm>ul>li p { + margin-top: 0.5714286em; + margin-bottom: 0.5714286em; + } + + .\32xl\:prose-sm>ul>li>*:first-child { + margin-top: 1.1428571em; + } + + .\32xl\:prose-sm>ul>li>*:last-child { + margin-bottom: 1.1428571em; + } + + .\32xl\:prose-sm>ol>li>*:first-child { + margin-top: 1.1428571em; + } + + .\32xl\:prose-sm>ol>li>*:last-child { + margin-bottom: 1.1428571em; + } + + .\32xl\:prose-sm ul ul, + .\32xl\:prose-sm ul ol, + .\32xl\:prose-sm ol ul, + .\32xl\:prose-sm ol ol { + margin-top: 0.5714286em; + margin-bottom: 0.5714286em; + } + + .\32xl\:prose-sm hr { + margin-top: 2.8571429em; + margin-bottom: 2.8571429em; + } + + .\32xl\:prose-sm hr+* { + margin-top: 0; + } + + .\32xl\:prose-sm h2+* { + margin-top: 0; + } + + .\32xl\:prose-sm h3+* { + margin-top: 0; + } + + .\32xl\:prose-sm h4+* { + margin-top: 0; + } + + .\32xl\:prose-sm table { + font-size: 0.8571429em; + line-height: 1.5; + } + + .\32xl\:prose-sm thead th { + padding-right: 1em; + padding-bottom: 0.6666667em; + padding-left: 1em; + } + + .\32xl\:prose-sm thead th:first-child { + padding-left: 0; + } + + .\32xl\:prose-sm thead th:last-child { + padding-right: 0; + } + + .\32xl\:prose-sm tbody td { + padding-top: 0.6666667em; + padding-right: 1em; + padding-bottom: 0.6666667em; + padding-left: 1em; + } + + .\32xl\:prose-sm tbody td:first-child { + padding-left: 0; + } + + .\32xl\:prose-sm tbody td:last-child { + padding-right: 0; + } + + .\32xl\:prose-sm> :first-child { + margin-top: 0; + } + + .\32xl\:prose-sm> :last-child { + margin-bottom: 0; + } + + .\32xl\:prose-lg { + font-size: 1.125rem; + line-height: 1.7777778; + } + + .\32xl\:prose-lg p { + margin-top: 1.3333333em; + margin-bottom: 1.3333333em; + } + + .\32xl\:prose-lg [class~="lead"] { + font-size: 1.2222222em; + line-height: 1.4545455; + margin-top: 1.0909091em; + margin-bottom: 1.0909091em; + } + + .\32xl\:prose-lg blockquote { + margin-top: 1.6666667em; + margin-bottom: 1.6666667em; + padding-left: 1em; + } + + .\32xl\:prose-lg h1 { + font-size: 2.6666667em; + margin-top: 0; + margin-bottom: 0.8333333em; + line-height: 1; + } + + .\32xl\:prose-lg h2 { + font-size: 1.6666667em; + margin-top: 1.8666667em; + margin-bottom: 1.0666667em; + line-height: 1.3333333; + } + + .\32xl\:prose-lg h3 { + font-size: 1.3333333em; + margin-top: 1.6666667em; + margin-bottom: 0.6666667em; + line-height: 1.5; + } + + .\32xl\:prose-lg h4 { + margin-top: 1.7777778em; + margin-bottom: 0.4444444em; + line-height: 1.5555556; + } + + .\32xl\:prose-lg img { + margin-top: 1.7777778em; + margin-bottom: 1.7777778em; + } + + .\32xl\:prose-lg video { + margin-top: 1.7777778em; + margin-bottom: 1.7777778em; + } + + .\32xl\:prose-lg figure { + margin-top: 1.7777778em; + margin-bottom: 1.7777778em; + } + + .\32xl\:prose-lg figure>* { + margin-top: 0; + margin-bottom: 0; + } + + .\32xl\:prose-lg figure figcaption { + font-size: 0.8888889em; + line-height: 1.5; + margin-top: 1em; + } + + .\32xl\:prose-lg code { + font-size: 0.8888889em; + } + + .\32xl\:prose-lg h2 code { + font-size: 0.8666667em; + } + + .\32xl\:prose-lg h3 code { + font-size: 0.875em; + } + + .\32xl\:prose-lg pre { + font-size: 0.8888889em; + line-height: 1.75; + margin-top: 2em; + margin-bottom: 2em; + border-radius: 0.375rem; + padding-top: 1em; + padding-right: 1.5em; + padding-bottom: 1em; + padding-left: 1.5em; + } + + .\32xl\:prose-lg ol { + margin-top: 1.3333333em; + margin-bottom: 1.3333333em; + } + + .\32xl\:prose-lg ul { + margin-top: 1.3333333em; + margin-bottom: 1.3333333em; + } + + .\32xl\:prose-lg li { + margin-top: 0.6666667em; + margin-bottom: 0.6666667em; + } + + .\32xl\:prose-lg ol>li { + padding-left: 1.6666667em; + } + + .\32xl\:prose-lg ol>li::before { + left: 0; + } + + .\32xl\:prose-lg ul>li { + padding-left: 1.6666667em; + } + + .\32xl\:prose-lg ul>li::before { + width: 0.3333333em; + height: 0.3333333em; + top: calc(0.8888889em - 0.1666667em); + left: 0.2222222em; + } + + .\32xl\:prose-lg>ul>li p { + margin-top: 0.8888889em; + margin-bottom: 0.8888889em; + } + + .\32xl\:prose-lg>ul>li>*:first-child { + margin-top: 1.3333333em; + } + + .\32xl\:prose-lg>ul>li>*:last-child { + margin-bottom: 1.3333333em; + } + + .\32xl\:prose-lg>ol>li>*:first-child { + margin-top: 1.3333333em; + } + + .\32xl\:prose-lg>ol>li>*:last-child { + margin-bottom: 1.3333333em; + } + + .\32xl\:prose-lg ul ul, + .\32xl\:prose-lg ul ol, + .\32xl\:prose-lg ol ul, + .\32xl\:prose-lg ol ol { + margin-top: 0.8888889em; + margin-bottom: 0.8888889em; + } + + .\32xl\:prose-lg hr { + margin-top: 3.1111111em; + margin-bottom: 3.1111111em; + } + + .\32xl\:prose-lg hr+* { + margin-top: 0; + } + + .\32xl\:prose-lg h2+* { + margin-top: 0; + } + + .\32xl\:prose-lg h3+* { + margin-top: 0; + } + + .\32xl\:prose-lg h4+* { + margin-top: 0; + } + + .\32xl\:prose-lg table { + font-size: 0.8888889em; + line-height: 1.5; + } + + .\32xl\:prose-lg thead th { + padding-right: 0.75em; + padding-bottom: 0.75em; + padding-left: 0.75em; + } + + .\32xl\:prose-lg thead th:first-child { + padding-left: 0; + } + + .\32xl\:prose-lg thead th:last-child { + padding-right: 0; + } + + .\32xl\:prose-lg tbody td { + padding-top: 0.75em; + padding-right: 0.75em; + padding-bottom: 0.75em; + padding-left: 0.75em; + } + + .\32xl\:prose-lg tbody td:first-child { + padding-left: 0; + } + + .\32xl\:prose-lg tbody td:last-child { + padding-right: 0; + } + + .\32xl\:prose-lg> :first-child { + margin-top: 0; + } + + .\32xl\:prose-lg> :last-child { + margin-bottom: 0; + } + + .\32xl\:prose-xl { + font-size: 1.25rem; + line-height: 1.8; + } + + .\32xl\:prose-xl p { + margin-top: 1.2em; + margin-bottom: 1.2em; + } + + .\32xl\:prose-xl [class~="lead"] { + font-size: 1.2em; + line-height: 1.5; + margin-top: 1em; + margin-bottom: 1em; + } + + .\32xl\:prose-xl blockquote { + margin-top: 1.6em; + margin-bottom: 1.6em; + padding-left: 1.0666667em; + } + + .\32xl\:prose-xl h1 { + font-size: 2.8em; + margin-top: 0; + margin-bottom: 0.8571429em; + line-height: 1; + } + + .\32xl\:prose-xl h2 { + font-size: 1.8em; + margin-top: 1.5555556em; + margin-bottom: 0.8888889em; + line-height: 1.1111111; + } + + .\32xl\:prose-xl h3 { + font-size: 1.5em; + margin-top: 1.6em; + margin-bottom: 0.6666667em; + line-height: 1.3333333; + } + + .\32xl\:prose-xl h4 { + margin-top: 1.8em; + margin-bottom: 0.6em; + line-height: 1.6; + } + + .\32xl\:prose-xl img { + margin-top: 2em; + margin-bottom: 2em; + } + + .\32xl\:prose-xl video { + margin-top: 2em; + margin-bottom: 2em; + } + + .\32xl\:prose-xl figure { + margin-top: 2em; + margin-bottom: 2em; + } + + .\32xl\:prose-xl figure>* { + margin-top: 0; + margin-bottom: 0; + } + + .\32xl\:prose-xl figure figcaption { + font-size: 0.9em; + line-height: 1.5555556; + margin-top: 1em; + } + + .\32xl\:prose-xl code { + font-size: 0.9em; + } + + .\32xl\:prose-xl h2 code { + font-size: 0.8611111em; + } + + .\32xl\:prose-xl h3 code { + font-size: 0.9em; + } + + .\32xl\:prose-xl pre { + font-size: 0.9em; + line-height: 1.7777778; + margin-top: 2em; + margin-bottom: 2em; + border-radius: 0.5rem; + padding-top: 1.1111111em; + padding-right: 1.3333333em; + padding-bottom: 1.1111111em; + padding-left: 1.3333333em; + } + + .\32xl\:prose-xl ol { + margin-top: 1.2em; + margin-bottom: 1.2em; + } + + .\32xl\:prose-xl ul { + margin-top: 1.2em; + margin-bottom: 1.2em; + } + + .\32xl\:prose-xl li { + margin-top: 0.6em; + margin-bottom: 0.6em; + } + + .\32xl\:prose-xl ol>li { + padding-left: 1.8em; + } + + .\32xl\:prose-xl ol>li::before { + left: 0; + } + + .\32xl\:prose-xl ul>li { + padding-left: 1.8em; + } + + .\32xl\:prose-xl ul>li::before { + width: 0.35em; + height: 0.35em; + top: calc(0.9em - 0.175em); + left: 0.25em; + } + + .\32xl\:prose-xl>ul>li p { + margin-top: 0.8em; + margin-bottom: 0.8em; + } + + .\32xl\:prose-xl>ul>li>*:first-child { + margin-top: 1.2em; + } + + .\32xl\:prose-xl>ul>li>*:last-child { + margin-bottom: 1.2em; + } + + .\32xl\:prose-xl>ol>li>*:first-child { + margin-top: 1.2em; + } + + .\32xl\:prose-xl>ol>li>*:last-child { + margin-bottom: 1.2em; + } + + .\32xl\:prose-xl ul ul, + .\32xl\:prose-xl ul ol, + .\32xl\:prose-xl ol ul, + .\32xl\:prose-xl ol ol { + margin-top: 0.8em; + margin-bottom: 0.8em; + } + + .\32xl\:prose-xl hr { + margin-top: 2.8em; + margin-bottom: 2.8em; + } + + .\32xl\:prose-xl hr+* { + margin-top: 0; + } + + .\32xl\:prose-xl h2+* { + margin-top: 0; + } + + .\32xl\:prose-xl h3+* { + margin-top: 0; + } + + .\32xl\:prose-xl h4+* { + margin-top: 0; + } + + .\32xl\:prose-xl table { + font-size: 0.9em; + line-height: 1.5555556; + } + + .\32xl\:prose-xl thead th { + padding-right: 0.6666667em; + padding-bottom: 0.8888889em; + padding-left: 0.6666667em; + } + + .\32xl\:prose-xl thead th:first-child { + padding-left: 0; + } + + .\32xl\:prose-xl thead th:last-child { + padding-right: 0; + } + + .\32xl\:prose-xl tbody td { + padding-top: 0.8888889em; + padding-right: 0.6666667em; + padding-bottom: 0.8888889em; + padding-left: 0.6666667em; + } + + .\32xl\:prose-xl tbody td:first-child { + padding-left: 0; + } + + .\32xl\:prose-xl tbody td:last-child { + padding-right: 0; + } + + .\32xl\:prose-xl> :first-child { + margin-top: 0; + } + + .\32xl\:prose-xl> :last-child { + margin-bottom: 0; + } + + .\32xl\:prose-2xl { + font-size: 1.5rem; + line-height: 1.6666667; + } + + .\32xl\:prose-2xl p { + margin-top: 1.3333333em; + margin-bottom: 1.3333333em; + } + + .\32xl\:prose-2xl [class~="lead"] { + font-size: 1.25em; + line-height: 1.4666667; + margin-top: 1.0666667em; + margin-bottom: 1.0666667em; + } + + .\32xl\:prose-2xl blockquote { + margin-top: 1.7777778em; + margin-bottom: 1.7777778em; + padding-left: 1.1111111em; + } + + .\32xl\:prose-2xl h1 { + font-size: 2.6666667em; + margin-top: 0; + margin-bottom: 0.875em; + line-height: 1; + } + + .\32xl\:prose-2xl h2 { + font-size: 2em; + margin-top: 1.5em; + margin-bottom: 0.8333333em; + line-height: 1.0833333; + } + + .\32xl\:prose-2xl h3 { + font-size: 1.5em; + margin-top: 1.5555556em; + margin-bottom: 0.6666667em; + line-height: 1.2222222; + } + + .\32xl\:prose-2xl h4 { + margin-top: 1.6666667em; + margin-bottom: 0.6666667em; + line-height: 1.5; + } + + .\32xl\:prose-2xl img { + margin-top: 2em; + margin-bottom: 2em; + } + + .\32xl\:prose-2xl video { + margin-top: 2em; + margin-bottom: 2em; + } + + .\32xl\:prose-2xl figure { + margin-top: 2em; + margin-bottom: 2em; + } + + .\32xl\:prose-2xl figure>* { + margin-top: 0; + margin-bottom: 0; + } + + .\32xl\:prose-2xl figure figcaption { + font-size: 0.8333333em; + line-height: 1.6; + margin-top: 1em; + } + + .\32xl\:prose-2xl code { + font-size: 0.8333333em; + } + + .\32xl\:prose-2xl h2 code { + font-size: 0.875em; + } + + .\32xl\:prose-2xl h3 code { + font-size: 0.8888889em; + } + + .\32xl\:prose-2xl pre { + font-size: 0.8333333em; + line-height: 1.8; + margin-top: 2em; + margin-bottom: 2em; + border-radius: 0.5rem; + padding-top: 1.2em; + padding-right: 1.6em; + padding-bottom: 1.2em; + padding-left: 1.6em; + } + + .\32xl\:prose-2xl ol { + margin-top: 1.3333333em; + margin-bottom: 1.3333333em; + } + + .\32xl\:prose-2xl ul { + margin-top: 1.3333333em; + margin-bottom: 1.3333333em; + } + + .\32xl\:prose-2xl li { + margin-top: 0.5em; + margin-bottom: 0.5em; + } + + .\32xl\:prose-2xl ol>li { + padding-left: 1.6666667em; + } + + .\32xl\:prose-2xl ol>li::before { + left: 0; + } + + .\32xl\:prose-2xl ul>li { + padding-left: 1.6666667em; + } + + .\32xl\:prose-2xl ul>li::before { + width: 0.3333333em; + height: 0.3333333em; + top: calc(0.8333333em - 0.1666667em); + left: 0.25em; + } + + .\32xl\:prose-2xl>ul>li p { + margin-top: 0.8333333em; + margin-bottom: 0.8333333em; + } + + .\32xl\:prose-2xl>ul>li>*:first-child { + margin-top: 1.3333333em; + } + + .\32xl\:prose-2xl>ul>li>*:last-child { + margin-bottom: 1.3333333em; + } + + .\32xl\:prose-2xl>ol>li>*:first-child { + margin-top: 1.3333333em; + } + + .\32xl\:prose-2xl>ol>li>*:last-child { + margin-bottom: 1.3333333em; + } + + .\32xl\:prose-2xl ul ul, + .\32xl\:prose-2xl ul ol, + .\32xl\:prose-2xl ol ul, + .\32xl\:prose-2xl ol ol { + margin-top: 0.6666667em; + margin-bottom: 0.6666667em; + } + + .\32xl\:prose-2xl hr { + margin-top: 3em; + margin-bottom: 3em; + } + + .\32xl\:prose-2xl hr+* { + margin-top: 0; + } + + .\32xl\:prose-2xl h2+* { + margin-top: 0; + } + + .\32xl\:prose-2xl h3+* { + margin-top: 0; + } + + .\32xl\:prose-2xl h4+* { + margin-top: 0; + } + + .\32xl\:prose-2xl table { + font-size: 0.8333333em; + line-height: 1.4; + } + + .\32xl\:prose-2xl thead th { + padding-right: 0.6em; + padding-bottom: 0.8em; + padding-left: 0.6em; + } + + .\32xl\:prose-2xl thead th:first-child { + padding-left: 0; + } + + .\32xl\:prose-2xl thead th:last-child { + padding-right: 0; + } + + .\32xl\:prose-2xl tbody td { + padding-top: 0.8em; + padding-right: 0.6em; + padding-bottom: 0.8em; + padding-left: 0.6em; + } + + .\32xl\:prose-2xl tbody td:first-child { + padding-left: 0; + } + + .\32xl\:prose-2xl tbody td:last-child { + padding-right: 0; + } + + .\32xl\:prose-2xl> :first-child { + margin-top: 0; + } + + .\32xl\:prose-2xl> :last-child { + margin-bottom: 0; + } + + .\32xl\:prose-red a {} + + .\32xl\:prose-red a code {} + + .\32xl\:prose-yellow a {} + + .\32xl\:prose-yellow a code {} + + .\32xl\:prose-green a {} + + .\32xl\:prose-green a code {} + + .\32xl\:prose-blue a {} + + .\32xl\:prose-blue a code {} + + .\32xl\:prose-indigo a {} + + .\32xl\:prose-indigo a code {} + + .\32xl\:prose-purple a {} + + .\32xl\:prose-purple a code {} + + .\32xl\:prose-pink a {} + + .\32xl\:prose-pink a code {} +} \ No newline at end of file diff --git a/examples/poc-solid/raw.js b/examples/poc-solid/raw.js index bd3c660..23c16bc 100644 --- a/examples/poc-solid/raw.js +++ b/examples/poc-solid/raw.js @@ -12,11 +12,8 @@ import { onCleanup, } from "https://cdn.jsdelivr.net/npm/solid-js@1.6.10/+esm"; import {render} from "https://cdn.jsdelivr.net/npm/solid-js@1.6.10/web/+esm"; -// import html from "https://cdn.jsdelivr.net/npm/solid-js@1.6.10/html/+esm"; +import html from "https://cdn.jsdelivr.net/npm/solid-js@1.6.10/html/+esm"; import { Router, Routes, Route, A } from "https://cdn.jsdelivr.net/npm/@solidjs/router@0.7.0/+esm"; -import {createHTML} from "https://cdn.jsdelivr.net/npm/lit-dom-expressions@0.35.15/+esm"; - -const html = createHTML({}); function Page1() { @@ -31,27 +28,29 @@ function Page3() { return html`

    page3

    `; } -function Parent() { + +function App() { return html`
    <${A} href="/">page1 <${A} href="/page2">page2 <${A} href="/page3">page3 <${Routes}> - <${Route} path="/" component=${()=> Page1} /> - <${Route} path="/page2" component=${()=> Page2} /> - <${Route} path="/page3" component=${()=> Page3} /> + <${Route} path="/" element=${()=> html`<${Page1} />` } /> + <${Route} path="/page2" element=${html`<${Page2} />`} /> + <${Route} path="/page3" element=${html`<${Page3} />`} />
    `; } -function App() { - return html` - <${Router}> - <${Parent} /> - - `; -} - -render(App, document.getElementById('app')); +render( + ()=>( + html` + <${Router}> + <${App} /> + + ` + ), + document.getElementById('app') +); diff --git a/examples/preact/components/parent.nim b/examples/preact/components/parent.nim index cc3c62b..d744ee7 100644 --- a/examples/preact/components/parent.nim +++ b/examples/preact/components/parent.nim @@ -28,10 +28,21 @@ proc Parent*(props: JsObject):Component {.exportc.} =
    <${Show} when=${msg} fallback=${html`

    fill message

    `}> - ${html`

    message filled

    `} +

    message filled

    + + <${Show} when=${msgLen} fallback=${html`

    fill message

    `}> +

    message filled

    + + <${Show} when=${msgLen > 0} fallback=${html`

    fill message

    `}> +

    message filled

    + + <${Show} when=${()=> msgLen > 0} fallback=${html`

    fill message

    `}> +

    message filled

    this is a ${msg}

    message count is ${msgLen}

    """) + +# ${html`

    message filled

    `} diff --git a/examples/preact/index.html b/examples/preact/index.html index ec445ae..3e09af8 100644 --- a/examples/preact/index.html +++ b/examples/preact/index.html @@ -2,8 +2,8 @@ - - + + Document diff --git a/examples/preact/main.nim b/examples/preact/main.nim index 2cf83da..3adaa83 100644 --- a/examples/preact/main.nim +++ b/examples/preact/main.nim @@ -2,9 +2,8 @@ import std/asyncdispatch import std/asynchttpserver import ../../src/server -const html = staticRead("./index.html") - proc controller(req:Request):Future[string] {.async.}= + let html = readFile("index.html") return html var routes:seq[Route] = @[] diff --git a/examples/preact/raw.js b/examples/preact/raw.js index 7a7c02d..98d2700 100644 --- a/examples/preact/raw.js +++ b/examples/preact/raw.js @@ -1,8 +1,8 @@ -import { h, render } from 'https://cdn.jsdelivr.net/npm/preact@10.11.3/+esm'; -import htm from 'https://cdn.jsdelivr.net/npm/htm@3.1.1/+esm' -import { useState, useEffect, useMemo } from 'https://cdn.jsdelivr.net/npm/preact@10.11.3/hooks/+esm'; -import {Router, Link} from 'https://cdn.jsdelivr.net/npm/preact-router@4.1.0/+esm'; -import { signal } from 'https://cdn.jsdelivr.net/npm/@preact/signals@1.1.3/+esm'; +import {h, render} from 'https://esm.sh/preact@10.12.1' +import htm from 'https://esm.sh/htm@3.1.1' +import { useState, useEffect, useMemo } from 'https://esm.sh/preact@10.12.1/hooks'; +import { signal } from 'https://esm.sh/@preact/signals@1.1.3?deps=preact@10.12.1'; +import {Router, Link} from 'https://esm.sh/preact-router@4.1.0?deps=preact@10.12.1'; const html = htm.bind(h); @@ -19,6 +19,12 @@ function page1(){ page1Signal.value = e.target.value } + useEffect(async()=>{ + let resp = await fetch("https://api.coindesk.com/v1/bpi/currentprice.json") + const json = await resp.json() + console.log(json) + }, []) + return html`

    page1

    @@ -64,4 +70,4 @@ function App (props) { `; } -render(html`<${App} name="Preact" />`, document.body); +render(html`<${App} name="Preact" />`, document.getElementById("app")); diff --git a/src/palladian/controll_flow.nim b/src/palladian/controll_flow.nim index 2583d3e..8ebfca4 100644 --- a/src/palladian/controll_flow.nim +++ b/src/palladian/controll_flow.nim @@ -14,10 +14,21 @@ export function For({ each, children: f }) { let Item = ({ v, k, f }) => f(v, k); export function Show({ when, fallback, children: f }) { - let v = when.value; + let v; + if(typeof when === "object"){ + if("value" in when){ // Signal + v = when.value + }else{ // JsObject + v = when + } + }else if(typeof when === "function"){ + v = when() + }else{ + v = when + } return v ? typeof f === 'function' ? html```` : f : fallback; } """.} -proc For*(props:JsObject):Component {.importcpp:"For(#)".} -proc Show*(props:JsObject):Component {.importcpp:"Show(#)".} +proc For*(props:JsObject):Component {.importjs:"For(#)".} +proc Show*(props:JsObject):Component {.importjs:"Show(#)".} diff --git a/src/palladian/hooks.nim b/src/palladian/hooks.nim index c9d4af0..55f4827 100644 --- a/src/palladian/hooks.nim +++ b/src/palladian/hooks.nim @@ -1,15 +1,16 @@ +import std/asyncjs import std/jsffi import std/json -{.emit:""" -import { useState, useEffect, useMemo } from 'https://cdn.jsdelivr.net/npm/preact@10.11.3/hooks/+esm'; -import { signal, Signal } from 'https://cdn.jsdelivr.net/npm/@preact/signals@1.1.3/+esm'; +{.emit: """ +import { useState, useEffect, useMemo } from 'https://esm.sh/preact@10.12.1/hooks'; +import { signal, Signal } from 'https://esm.sh/@preact/signals@1.1.3'; """.} type BoolStateSetter = proc(arg: bool) -proc boolUseState(arg: bool): JsObject {.importcpp: "useState(#)".} +proc boolUseState(arg: bool): JsObject {.importjs: "useState(#)".} proc useState*(arg: bool): (bool, BoolStateSetter) = let state = boolUseState(arg) let value = to(state[0], bool) @@ -19,7 +20,7 @@ proc useState*(arg: bool): (bool, BoolStateSetter) = type IntStateSetter = proc(arg: int) -proc intUseState(arg: int): JsObject {.importcpp: "useState(#)".} +proc intUseState(arg: int): JsObject {.importjs: "useState(#)".} proc useState*(arg: int): (int, IntStateSetter) = let state = intUseState(arg) let value = to(state[0], int) @@ -29,7 +30,7 @@ proc useState*(arg: int): (int, IntStateSetter) = type FloatStateSetter = proc(arg: float) -proc floatUseState(arg: float): JsObject {.importcpp: "useState(#)".} +proc floatUseState(arg: float): JsObject {.importjs: "useState(#)".} proc useState*(arg: float): (float, FloatStateSetter) = let state = floatUseState(arg) let value = to(state[0], float) @@ -39,7 +40,7 @@ proc useState*(arg: float): (float, FloatStateSetter) = type StrStateSetter = proc(arg: cstring) -proc strUseState(arg: cstring): JsObject {.importcpp: "useState(#)".} +proc strUseState(arg: cstring): JsObject {.importjs: "useState(#)".} proc useState*(arg: cstring): (cstring, StrStateSetter) = let state = strUseState(arg) let value = to(state[0], cstring) @@ -49,7 +50,7 @@ proc useState*(arg: cstring): (cstring, StrStateSetter) = type ObjectStateSetter = proc(arg: JsObject) -proc objUseState(arg: JsObject): JsObject {.importcpp: "useState(#)".} +proc objUseState(arg: JsObject): JsObject {.importjs: "useState(#)".} proc useState*(arg: JsObject): (JsObject, ObjectStateSetter) = let state = objUseState(arg) let value = to(state[0], JsObject) @@ -59,48 +60,62 @@ proc useState*(arg: JsObject): (JsObject, ObjectStateSetter) = type JsonStateSetter = proc(arg: JsonNode) -proc objUseState(arg: JsonNode): JsObject {.importcpp: "useState(#)".} +proc jsonUseState(arg: JsonNode): JsObject {.importjs: "useState(#)".} proc useState*(arg: JsonNode): (JsonNode, JsonStateSetter) = - let state = objUseState(arg) + let state = jsonUseState(arg) let value = to(state[0], JsonNode) let setter = to(state[1], JsonStateSetter) return (value, setter) +type States* = cstring|int|float|bool|JsonNode - -type States = cstring|int|float|bool - -proc useEffect*(cb: proc()) {.importcpp: "useEffect(#)".} +proc useEffect*(cb: proc()) {.importjs: "useEffect(#)".} ## Side-Effects are at the heart of many modern Apps. ## Whether you want to fetch some data from an API or trigger an effect on the document, you'll find that the useEffect fits nearly all your needs. ## It's one of the main advantages of the hooks API, that it reshapes your mind into thinking in effects instead of a component's lifecycle. -proc useEffect*(cb: proc(), dependency:seq[States]) {.importcpp: "useEffect(#, #)".} +proc useEffect*(cb: proc(), dependency: array) {.importjs: "useEffect(#, [])".} +proc useEffect*(cb: proc(), dependency: seq[States]) {.importjs: "useEffect(#, #)".} ## With Dependancy ## ## Side-Effects are at the heart of many modern Apps. ## Whether you want to fetch some data from an API or trigger an effect on the document, you'll find that the useEffect fits nearly all your needs. ## It's one of the main advantages of the hooks API, that it reshapes your mind into thinking in effects instead of a component's lifecycle. +proc useEffect*(cb: proc (): Future[void]) {.importjs: "useEffect(#)".} +proc useEffect*(cb: proc (): Future[void], dependency: array) {.importjs: "useEffect(#, [])".} +proc useEffect*(cb: proc (): Future[void], dependency: seq[States]) {.importjs: "useEffect(#, #)".} type BoolSignal = object of JsObject -type BoolSignalValue* = cstring -proc signal*(arg:bool):BoolSignal {.importcpp:"signal(#)".} -proc value*(self:BoolSignal):BoolSignalValue {.importcpp:"#.value".} -proc `value=`*(self:BoolSignal, val:bool) {.importcpp: "#.value = #".} +type BoolSignalValue* = bool +proc signal*(arg: bool): BoolSignal {.importjs: "signal(#)".} +proc value*(self: BoolSignal): BoolSignalValue {.importjs: "#.value".} +proc `value=`*(self: BoolSignal, val: bool) {.importjs: "#.value = #".} type IntSignal = object of JsObject -proc signal*(arg:int):IntSignal {.importcpp:"signal(#)".} -proc value*(self:IntSignal):int {.importcpp:"#.value".} -proc `value=`*(self:IntSignal, val:int) {.importcpp: "#.value = #".} +proc signal*(arg: int): IntSignal {.importjs: "signal(#)".} +proc value*(self: IntSignal): int {.importjs: "#.value".} +proc `value=`*(self: IntSignal, val: int) {.importjs: "#.value = #".} type FloatSignal = object of JsObject -type FloatSignalValue* = cstring -proc signal*(arg:float):FloatSignal {.importcpp:"signal(#)".} -proc value*(self:FloatSignal):FloatSignalValue {.importcpp:"#.value".} -proc `value=`*(self:FloatSignal, val:float) {.importcpp: "#.value = #".} +type FloatSignalValue* = float +proc signal*(arg: float): FloatSignal {.importjs: "signal(#)".} +proc value*(self: FloatSignal): FloatSignalValue {.importjs: "#.value".} +proc `value=`*(self: FloatSignal, val: float) {.importjs: "#.value = #".} type StrSignal = object of JsObject type StrSignalValue* = cstring -proc signal*(arg:cstring):StrSignal {.importcpp:"signal(#)".} -proc value*(self:StrSignal):StrSignalValue {.importcpp:"#.value".} -proc `value=`*(self:StrSignal, val:cstring) {.importcpp: "#.value = #".} +proc signal*(arg: cstring): StrSignal {.importjs: "signal(#)".} +proc value*(self: StrSignal): StrSignalValue {.importjs: "#.value".} +proc `value=`*(self: StrSignal, val: cstring) {.importjs: "#.value = #".} + +type ObjSignal = object of JsObject +type ObjSignalValue* = JsObject +proc signal*(arg: JsObject): ObjSignal {.importjs: "signal(#)".} +proc value*(self: ObjSignal): ObjSignalValue {.importjs: "#.value".} +proc `value=`*(self: ObjSignal, val: JsObject) {.importjs: "#.value = #".} + +type JsonSignal = object of JsObject +type JsonSignalValue* = JsonNode +proc signal*(arg: JsonNode): JsonSignal {.importjs: "signal(#)".} +proc value*(self: JsonSignal): JsonSignalValue {.importjs: "#.value".} +proc `value=`*(self: JsonSignal, val: JsonNode) {.importjs: "#.value = #".} diff --git a/src/palladian/poc-solid.nim b/src/palladian/poc-solid.nim index ce7d0f7..1c00645 100644 --- a/src/palladian/poc-solid.nim +++ b/src/palladian/poc-solid.nim @@ -22,7 +22,7 @@ import { Router, Routes, Route, A } from "https://cdn.jsdelivr.net/npm/@solidjs/ type StrSateGetter* = proc():cstring type StrSateSetter* = proc(arg: cstring) -proc strCreateSignal(arg: cstring): JsObject {.importcpp: "createSignal(#)".} +proc strCreateSignal(arg: cstring): JsObject {.importjs: "createSignal(#)".} proc createSignal*(arg: cstring): (StrSateGetter, StrSateSetter) = let state = strCreateSignal(arg) let value = to(state[0], StrSateGetter) @@ -33,7 +33,7 @@ proc createSignal*(arg: cstring): (StrSateGetter, StrSateSetter) = type IntSateGetter* = proc():int type IntSateSetter* = proc(arg: int) -proc intCreateSignal(arg: int): JsObject {.importcpp: "createSignal(#)".} +proc intCreateSignal(arg: int): JsObject {.importjs: "createSignal(#)".} proc createSignal*(arg: int): (IntSateGetter, IntSateSetter) = let state = intCreateSignal(arg) let value = to(state[0], IntSateGetter) @@ -41,7 +41,7 @@ proc createSignal*(arg: int): (IntSateGetter, IntSateSetter) = return (value, setter) -proc createEffect*(cb: proc()) {.importcpp: "createEffect(#)".} +proc createEffect*(cb: proc()) {.importjs: "createEffect(#)".} template render*(arg: string) = proc renderImpl(innerArg: string): string = @@ -54,4 +54,4 @@ function renderApp(component, dom){ render(()=>component, dom) } """.} -proc renderApp*(component: proc(), dom: Node) {.importcpp: "renderApp(#, #)".} +proc renderApp*(component: proc(), dom: Node) {.importjs: "renderApp(#, #)".} diff --git a/src/palladian/preact.nim b/src/palladian/preact.nim index 8bb393e..aa530fc 100644 --- a/src/palladian/preact.nim +++ b/src/palladian/preact.nim @@ -4,8 +4,8 @@ import std/dom import std/jsconsole {.emit: """ -import { h, render } from 'https://cdn.jsdelivr.net/npm/preact@10.11.3/+esm'; -import htm from 'https://cdn.jsdelivr.net/npm/htm@3.1.1/+esm' +import {h, render} from 'https://esm.sh/preact@10.12.1' +import htm from 'https://esm.sh/htm@3.1.1' const html = htm.bind(h); """.} @@ -13,7 +13,7 @@ const html = htm.bind(h); type Component* = JsObject -proc html*(arg:cstring):Component {.importcpp:"eval('html`' + # + '`')".} +proc html*(arg:cstring):Component {.importjs:"eval('html`' + # + '`')".} template html*(arg:string):Component = html(arg.cstring) @@ -22,4 +22,4 @@ function renderApp(component, dom){ render(html``<${component} />``, dom) } """.} -proc renderApp*(component: proc():Component, dom: Element) {.importcpp: "renderApp(#, #)".} +proc renderApp*(component: proc():Component, dom: Element) {.importjs: "renderApp(#, #)".} diff --git a/src/palladian/router.nim b/src/palladian/router.nim index d70595f..c38b6db 100644 --- a/src/palladian/router.nim +++ b/src/palladian/router.nim @@ -2,10 +2,6 @@ import std/jsffi import ./preact {.emit:""" -//import {Router, Link} from 'https://cdn.jsdelivr.net/npm/preact-router@4.1.0/+esm'; -import {Router} from 'https://cdn.jsdelivr.net/npm/preact-router@4.1.0/+esm'; -import {Link} from 'https://cdn.jsdelivr.net/npm/preact-router@4.1.0/match/+esm'; +import {Router} from 'https://esm.sh/preact-router@4.1.0?deps=preact@10.12.1'; +import {Link} from 'https://esm.sh/preact-router@4.1.0/match?deps=preact@10.12.1'; """.} - -proc Router*():Component {.importcpp: "Router".} -proc Link*():Component {.importcpp: "Link".} diff --git a/src/palladian/strformat.nim b/src/palladian/strformat.nim index 25a2388..7f8c0c5 100644 --- a/src/palladian/strformat.nim +++ b/src/palladian/strformat.nim @@ -39,7 +39,7 @@ import ./preact # ================================================== -proc fmt*(arg:cstring):cstring {.importcpp:"#".} - ## for just easy to look JSX with no effect and process. -proc fmt*(arg:string):cstring = fmt(arg.cstring) - ## for just easy to look JSX with no effect and process. +proc fmt*(arg:cstring):cstring {.importjs:"#".} + ## for just easy to look JSX with no effect. +template fmt*(arg:string):cstring = fmt(arg.cstring) + ## for just easy to look JSX with no effect. diff --git a/src/server.nim b/src/server.nim index b6a6740..19c480f 100644 --- a/src/server.nim +++ b/src/server.nim @@ -4,6 +4,7 @@ import std/asyncfile import std/mimetypes import std/os import std/strutils +import std/strformat type Route* = object httpMethod*:HttpMethod @@ -15,7 +16,7 @@ proc serve*(routes:seq[Route], port=8080) {.async.} = proc cb(req: Request) {.async, gcsafe.} = try: if req.url.path.contains("."): - let filepath = getCurrentDir() & req.url.path + let filepath = getCurrentDir() / req.url.path if fileExists(filepath): let file = openAsync(filepath, fmRead) let data = file.readAll().await @@ -23,15 +24,18 @@ proc serve*(routes:seq[Route], port=8080) {.async.} = var headers = newHttpHeaders() headers["content-type"] = contentType await req.respond(Http200, data, headers) - let headers = {"Content-type": "text/html; charset=utf-8"} - for route in routes: - if route.path == "*": - await req.respond(Http200, route.controller(req).await, headers.newHttpHeaders()) - break - if req.reqMethod == route.httpMethod and req.url.path == route.path: - await req.respond(Http200, route.controller(req).await, headers.newHttpHeaders()) - break - await req.respond(Http404, "", headers.newHttpHeaders()) + else: + await req.respond(Http404, "", newHttpHeaders()) + else: + let headers = {"Content-type": "text/html; charset=utf-8"} + for route in routes: + if route.path == "*": + await req.respond(Http200, route.controller(req).await, headers.newHttpHeaders()) + break + if req.reqMethod == route.httpMethod and req.url.path == route.path: + await req.respond(Http200, route.controller(req).await, headers.newHttpHeaders()) + break + await req.respond(Http404, "", headers.newHttpHeaders()) except: echo getCurrentExceptionMsg() await req.respond(Http400, "", newHttpHeaders()) From 07d1644c4bebc87424f94e5619c41c5d7352ec80 Mon Sep 17 00:00:00 2001 From: itsumura-h Date: Sun, 19 Feb 2023 04:44:06 +0900 Subject: [PATCH 02/16] create importlibs --- src/palladian/hooks.nim | 7 ++----- src/palladian/importlibs.nim | 21 +++++++++++++++++++++ src/palladian/preact.nim | 9 ++------- src/palladian/router.nim | 7 ++----- 4 files changed, 27 insertions(+), 17 deletions(-) create mode 100644 src/palladian/importlibs.nim diff --git a/src/palladian/hooks.nim b/src/palladian/hooks.nim index 55f4827..a9fbcad 100644 --- a/src/palladian/hooks.nim +++ b/src/palladian/hooks.nim @@ -1,12 +1,9 @@ import std/asyncjs import std/jsffi import std/json +import ./importlibs -{.emit: """ -import { useState, useEffect, useMemo } from 'https://esm.sh/preact@10.12.1/hooks'; -import { signal, Signal } from 'https://esm.sh/@preact/signals@1.1.3'; -""".} - +importPreactHooks() type BoolStateSetter = proc(arg: bool) diff --git a/src/palladian/importlibs.nim b/src/palladian/importlibs.nim new file mode 100644 index 0000000..f210119 --- /dev/null +++ b/src/palladian/importlibs.nim @@ -0,0 +1,21 @@ +## use https://esm.sh for CDN. +## You can explicitly tell it which version of any dependency to use. + +template importPreact*() = + {.emit: """ + import {h, render} from 'https://esm.sh/preact@10.12.1'; + import htm from 'https://esm.sh/htm@3.1.1'; + const html = htm.bind(h); + """.} + +template importPreactHooks*() = + {.emit: """ + import { useState, useEffect, useMemo } from 'https://esm.sh/preact@10.12.1/hooks'; + import { signal, Signal } from 'https://esm.sh/@preact/signals@1.1.3?deps=preact@10.12.1'; + """.} + +template importPreactRouter*() = + {.emit: """ + import {Router} from 'https://esm.sh/preact-router@4.1.0?deps=preact@10.12.1'; + import {Link} from 'https://esm.sh/preact-router@4.1.0/match?deps=preact@10.12.1'; + """.} diff --git a/src/palladian/preact.nim b/src/palladian/preact.nim index aa530fc..ee507ef 100644 --- a/src/palladian/preact.nim +++ b/src/palladian/preact.nim @@ -2,14 +2,9 @@ import std/macros import std/jsffi import std/dom import std/jsconsole +import ./importlibs -{.emit: """ -import {h, render} from 'https://esm.sh/preact@10.12.1' -import htm from 'https://esm.sh/htm@3.1.1' - -const html = htm.bind(h); -""".} - +importPreact() type Component* = JsObject diff --git a/src/palladian/router.nim b/src/palladian/router.nim index c38b6db..42a4847 100644 --- a/src/palladian/router.nim +++ b/src/palladian/router.nim @@ -1,7 +1,4 @@ import std/jsffi -import ./preact +import ./importlibs -{.emit:""" -import {Router} from 'https://esm.sh/preact-router@4.1.0?deps=preact@10.12.1'; -import {Link} from 'https://esm.sh/preact-router@4.1.0/match?deps=preact@10.12.1'; -""".} +importPreactRouter() From 23580399f66c85cb7a0265322ece0233338a3851 Mon Sep 17 00:00:00 2001 From: itsumura-h Date: Sun, 19 Feb 2023 04:44:14 +0900 Subject: [PATCH 03/16] fix drawer --- examples/example/app.nim | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/examples/example/app.nim b/examples/example/app.nim index 729e141..ecd35b0 100644 --- a/examples/example/app.nim +++ b/examples/example/app.nim @@ -18,9 +18,7 @@ proc App():Component {.exportc.} = <${Header} />
    -
    - <${Drawer} /> -
    +
    <${Router}> <${TopPage} path="/" /> @@ -31,6 +29,11 @@ proc App():Component {.exportc.} = <${ApiAccessPage} path="/api-access" />
    + +
    + + <${Drawer} /> +
    """) From a9defbb0e2da7b2315c061bca39277d8580a55c3 Mon Sep 17 00:00:00 2001 From: itsumura-h Date: Sun, 19 Feb 2023 06:14:17 +0900 Subject: [PATCH 04/16] add docs --- docs/dochack.js | 2041 ++++++++++++++++++++++++++++++++ docs/nimdoc.out.css | 1016 ++++++++++++++++ docs/palladian.html | 147 +++ docs/palladian/importlibs.html | 175 +++ docs/palladian/importlibs.idx | 3 + docs/palladian/preact.html | 220 ++++ docs/palladian/preact.idx | 4 + docs/theindex.html | 112 ++ palladian.nimble | 5 + 9 files changed, 3723 insertions(+) create mode 100644 docs/dochack.js create mode 100644 docs/nimdoc.out.css create mode 100644 docs/palladian.html create mode 100644 docs/palladian/importlibs.html create mode 100644 docs/palladian/importlibs.idx create mode 100644 docs/palladian/preact.html create mode 100644 docs/palladian/preact.idx create mode 100644 docs/theindex.html diff --git a/docs/dochack.js b/docs/dochack.js new file mode 100644 index 0000000..96c3857 --- /dev/null +++ b/docs/dochack.js @@ -0,0 +1,2041 @@ +/* Generated by the Nim Compiler v1.6.10 */ +var framePtr = null; +var excHandler = 0; +var lastJSError = null; +var NTI637534222 = {size: 0, kind: 18, base: null, node: null, finalizer: null}; +var NTI486539822 = {size: 0, kind: 24, base: null, node: null, finalizer: null}; +var NTI620757115 = {size: 0,kind: 25,base: null,node: null,finalizer: null}; +var NTI620757114 = {size: 0,kind: 25,base: null,node: null,finalizer: null}; +var NTI620757113 = {size: 0,kind: 25,base: null,node: null,finalizer: null}; +var NTI620757112 = {size: 0,kind: 25,base: null,node: null,finalizer: null}; +var NTI620757111 = {size: 0,kind: 25,base: null,node: null,finalizer: null}; +var NTI620757110 = {size: 0,kind: 25,base: null,node: null,finalizer: null}; +var NTI620757109 = {size: 0,kind: 25,base: null,node: null,finalizer: null}; +var NTI620757108 = {size: 0,kind: 25,base: null,node: null,finalizer: null}; +var NTI620757107 = {size: 0,kind: 25,base: null,node: null,finalizer: null}; +var NTI620757106 = {size: 0,kind: 25,base: null,node: null,finalizer: null}; +var NTI620757105 = {size: 0,kind: 25,base: null,node: null,finalizer: null}; +var NTI620757104 = {size: 0,kind: 25,base: null,node: null,finalizer: null}; +var NTI620757103 = {size: 0,kind: 25,base: null,node: null,finalizer: null}; +var NTI620757102 = {size: 0,kind: 25,base: null,node: null,finalizer: null}; +var NTI620757101 = {size: 0,kind: 25,base: null,node: null,finalizer: null}; +var NTI620757100 = {size: 0,kind: 25,base: null,node: null,finalizer: null}; +var NTI620757099 = {size: 0,kind: 25,base: null,node: null,finalizer: null}; +var NTI620757098 = {size: 0,kind: 25,base: null,node: null,finalizer: null}; +var NTI620757097 = {size: 0,kind: 25,base: null,node: null,finalizer: null}; +var NTI620757096 = {size: 0,kind: 25,base: null,node: null,finalizer: null}; +var NTI620757095 = {size: 0,kind: 25,base: null,node: null,finalizer: null}; +var NTI620757094 = {size: 0,kind: 25,base: null,node: null,finalizer: null}; +var NTI620757093 = {size: 0,kind: 25,base: null,node: null,finalizer: null}; +var NTI620757092 = {size: 0,kind: 25,base: null,node: null,finalizer: null}; +var NTI620756997 = {size: 0, kind: 17, base: null, node: null, finalizer: null}; +var NTI620757041 = {size: 0, kind: 17, base: null, node: null, finalizer: null}; +var NTI620757040 = {size: 0, kind: 22, base: null, node: null, finalizer: null}; +var NTI620757180 = {size: 0,kind: 25,base: null,node: null,finalizer: null}; +var NTI620757177 = {size: 0,kind: 25,base: null,node: null,finalizer: null}; +var NTI620757176 = {size: 0, kind: 18, base: null, node: null, finalizer: null}; +var NTI620757089 = {size: 0, kind: 22, base: null, node: null, finalizer: null}; +var NTI620757179 = {size: 0, kind: 18, base: null, node: null, finalizer: null}; +var NTI620757090 = {size: 0, kind: 22, base: null, node: null, finalizer: null}; +var NTI620757029 = {size: 0, kind: 17, base: null, node: null, finalizer: null}; +var NTI620757028 = {size: 0, kind: 22, base: null, node: null, finalizer: null}; +var NTI620757141 = {size: 0, kind: 24, base: null, node: null, finalizer: null}; +var NTI620757031 = {size: 0, kind: 17, base: null, node: null, finalizer: null}; +var NTI620757030 = {size: 0, kind: 22, base: null, node: null, finalizer: null}; +var NTI620757140 = {size: 0, kind: 24, base: null, node: null, finalizer: null}; +var NTI620757139 = {size: 0, kind: 24, base: null, node: null, finalizer: null}; +var NTI620757039 = {size: 0, kind: 17, base: null, node: null, finalizer: null}; +var NTI620757038 = {size: 0, kind: 22, base: null, node: null, finalizer: null}; +var NTI620757138 = {size: 0, kind: 24, base: null, node: null, finalizer: null}; +var NTI620757137 = {size: 0, kind: 24, base: null, node: null, finalizer: null}; +var NTI620757033 = {size: 0, kind: 17, base: null, node: null, finalizer: null}; +var NTI620757032 = {size: 0, kind: 22, base: null, node: null, finalizer: null}; +var NTI620757136 = {size: 0, kind: 24, base: null, node: null, finalizer: null}; +var NTI620757143 = {size: 0, kind: 24, base: null, node: null, finalizer: null}; +var NTI620757035 = {size: 0, kind: 17, base: null, node: null, finalizer: null}; +var NTI620757034 = {size: 0, kind: 22, base: null, node: null, finalizer: null}; +var NTI620757142 = {size: 0, kind: 24, base: null, node: null, finalizer: null}; +var NTI33554456 = {size: 0,kind: 31,base: null,node: null,finalizer: null}; +var NTI620757146 = {size: 0, kind: 24, base: null, node: null, finalizer: null}; +var NTI620757037 = {size: 0, kind: 17, base: null, node: null, finalizer: null}; +var NTI620757036 = {size: 0, kind: 22, base: null, node: null, finalizer: null}; +var NTI33554466 = {size: 0,kind: 1,base: null,node: null,finalizer: null}; +var NTI620757010 = {size: 0, kind: 17, base: null, node: null, finalizer: null}; +var NTI620757009 = {size: 0, kind: 22, base: null, node: null, finalizer: null}; +var NTI620757017 = {size: 0, kind: 17, base: null, node: null, finalizer: null}; +var NTI620757016 = {size: 0, kind: 22, base: null, node: null, finalizer: null}; +var NTI620757015 = {size: 0, kind: 17, base: null, node: null, finalizer: null}; +var NTI620757014 = {size: 0, kind: 22, base: null, node: null, finalizer: null}; +var NTI620757011 = {size: 0, kind: 14, base: null, node: null, finalizer: null}; +var NTI620757135 = {size: 0, kind: 24, base: null, node: null, finalizer: null}; +var NTI620757134 = {size: 0, kind: 24, base: null, node: null, finalizer: null}; +var NTI620757133 = {size: 0, kind: 24, base: null, node: null, finalizer: null}; +var NTI620757013 = {size: 0, kind: 17, base: null, node: null, finalizer: null}; +var NTI620757012 = {size: 0, kind: 22, base: null, node: null, finalizer: null}; +var NTI620757436 = {size: 0, kind: 24, base: null, node: null, finalizer: null}; +var NTI33555124 = {size: 0, kind: 17, base: null, node: null, finalizer: null}; +var NTI33555128 = {size: 0, kind: 17, base: null, node: null, finalizer: null}; +var NTI33555130 = {size: 0, kind: 17, base: null, node: null, finalizer: null}; +var NTI33555083 = {size: 0, kind: 17, base: null, node: null, finalizer: null}; +var NTI33555165 = {size: 0, kind: 22, base: null, node: null, finalizer: null}; +var NTI33554439 = {size: 0,kind: 28,base: null,node: null,finalizer: null}; +var NTI33554440 = {size: 0,kind: 29,base: null,node: null,finalizer: null}; +var NTI33555164 = {size: 0, kind: 22, base: null, node: null, finalizer: null}; +var NTI33555112 = {size: 0, kind: 17, base: null, node: null, finalizer: null}; +var NTI33555113 = {size: 0, kind: 17, base: null, node: null, finalizer: null}; +var NTI33555120 = {size: 0, kind: 17, base: null, node: null, finalizer: null}; +var NTI33555122 = {size: 0, kind: 17, base: null, node: null, finalizer: null}; +var NNI33555122 = {kind: 2, len: 0, offset: 0, typ: null, name: null, sons: []}; +NTI33555122.node = NNI33555122; +var NNI33555120 = {kind: 2, len: 0, offset: 0, typ: null, name: null, sons: []}; +NTI33555120.node = NNI33555120; +var NNI33555113 = {kind: 2, len: 0, offset: 0, typ: null, name: null, sons: []}; +NTI33555113.node = NNI33555113; +NTI33555164.base = NTI33555112; +NTI33555165.base = NTI33555112; +var NNI33555112 = {kind: 2, len: 5, offset: 0, typ: null, name: null, sons: [{kind: 1, offset: "parent", len: 0, typ: NTI33555164, name: "parent", sons: null}, +{kind: 1, offset: "name", len: 0, typ: NTI33554440, name: "name", sons: null}, +{kind: 1, offset: "message", len: 0, typ: NTI33554439, name: "msg", sons: null}, +{kind: 1, offset: "trace", len: 0, typ: NTI33554439, name: "trace", sons: null}, +{kind: 1, offset: "up", len: 0, typ: NTI33555165, name: "up", sons: null}]}; +NTI33555112.node = NNI33555112; +var NNI33555083 = {kind: 2, len: 0, offset: 0, typ: null, name: null, sons: []}; +NTI33555083.node = NNI33555083; +NTI33555112.base = NTI33555083; +NTI33555113.base = NTI33555112; +NTI33555120.base = NTI33555113; +NTI33555122.base = NTI33555120; +var NNI33555130 = {kind: 2, len: 0, offset: 0, typ: null, name: null, sons: []}; +NTI33555130.node = NNI33555130; +NTI33555130.base = NTI33555113; +var NNI33555128 = {kind: 2, len: 0, offset: 0, typ: null, name: null, sons: []}; +NTI33555128.node = NNI33555128; +NTI33555128.base = NTI33555113; +var NNI33555124 = {kind: 2, len: 0, offset: 0, typ: null, name: null, sons: []}; +NTI33555124.node = NNI33555124; +NTI33555124.base = NTI33555113; +NTI620757133.base = NTI620757012; +NTI620757134.base = NTI620757012; +NTI620757135.base = NTI620757012; +var NNI620757011 = {kind: 2, offset: 0, typ: null, name: null, len: 12, sons: {"1": {kind: 1, offset: 1, typ: NTI620757011, name: "ElementNode", len: 0, sons: null}, +"2": {kind: 1, offset: 2, typ: NTI620757011, name: "AttributeNode", len: 0, sons: null}, +"3": {kind: 1, offset: 3, typ: NTI620757011, name: "TextNode", len: 0, sons: null}, +"4": {kind: 1, offset: 4, typ: NTI620757011, name: "CDATANode", len: 0, sons: null}, +"5": {kind: 1, offset: 5, typ: NTI620757011, name: "EntityRefNode", len: 0, sons: null}, +"6": {kind: 1, offset: 6, typ: NTI620757011, name: "EntityNode", len: 0, sons: null}, +"7": {kind: 1, offset: 7, typ: NTI620757011, name: "ProcessingInstructionNode", len: 0, sons: null}, +"8": {kind: 1, offset: 8, typ: NTI620757011, name: "CommentNode", len: 0, sons: null}, +"9": {kind: 1, offset: 9, typ: NTI620757011, name: "DocumentNode", len: 0, sons: null}, +"10": {kind: 1, offset: 10, typ: NTI620757011, name: "DocumentTypeNode", len: 0, sons: null}, +"11": {kind: 1, offset: 11, typ: NTI620757011, name: "DocumentFragmentNode", len: 0, sons: null}, +"12": {kind: 1, offset: 12, typ: NTI620757011, name: "NotationNode", len: 0, sons: null}}}; +NTI620757011.node = NNI620757011; +var NNI620757010 = {kind: 2, len: 0, offset: 0, typ: null, name: null, sons: []}; +NTI620757010.node = NNI620757010; +NTI620757010.base = NTI33555083; +NTI620757009.base = NTI620757010; +NTI620757146.base = NTI620757016; +var NNI620757037 = {kind: 2, len: 10, offset: 0, typ: null, name: null, sons: [{kind: 1, offset: "acceptCharset", len: 0, typ: NTI33554440, name: "acceptCharset", sons: null}, +{kind: 1, offset: "action", len: 0, typ: NTI33554440, name: "action", sons: null}, +{kind: 1, offset: "autocomplete", len: 0, typ: NTI33554440, name: "autocomplete", sons: null}, +{kind: 1, offset: "elements", len: 0, typ: NTI620757146, name: "elements", sons: null}, +{kind: 1, offset: "encoding", len: 0, typ: NTI33554440, name: "encoding", sons: null}, +{kind: 1, offset: "enctype", len: 0, typ: NTI33554440, name: "enctype", sons: null}, +{kind: 1, offset: "length", len: 0, typ: NTI33554456, name: "length", sons: null}, +{kind: 1, offset: "method", len: 0, typ: NTI33554440, name: "method", sons: null}, +{kind: 1, offset: "noValidate", len: 0, typ: NTI33554466, name: "noValidate", sons: null}, +{kind: 1, offset: "target", len: 0, typ: NTI33554440, name: "target", sons: null}]}; +NTI620757037.node = NNI620757037; +NTI620757037.base = NTI620757017; +NTI620757036.base = NTI620757037; +var NNI620757035 = {kind: 2, len: 5, offset: 0, typ: null, name: null, sons: [{kind: 1, offset: "defaultSelected", len: 0, typ: NTI33554466, name: "defaultSelected", sons: null}, +{kind: 1, offset: "selected", len: 0, typ: NTI33554466, name: "selected", sons: null}, +{kind: 1, offset: "selectedIndex", len: 0, typ: NTI33554456, name: "selectedIndex", sons: null}, +{kind: 1, offset: "text", len: 0, typ: NTI33554440, name: "text", sons: null}, +{kind: 1, offset: "value", len: 0, typ: NTI33554440, name: "value", sons: null}]}; +NTI620757035.node = NNI620757035; +NTI620757035.base = NTI620757017; +NTI620757034.base = NTI620757035; +NTI620757142.base = NTI620757034; +NTI620757143.base = NTI620757034; +var NNI620757017 = {kind: 2, len: 20, offset: 0, typ: null, name: null, sons: [{kind: 1, offset: "className", len: 0, typ: NTI33554440, name: "className", sons: null}, +{kind: 1, offset: "classList", len: 0, typ: NTI620757009, name: "classList", sons: null}, +{kind: 1, offset: "checked", len: 0, typ: NTI33554466, name: "checked", sons: null}, +{kind: 1, offset: "defaultChecked", len: 0, typ: NTI33554466, name: "defaultChecked", sons: null}, +{kind: 1, offset: "defaultValue", len: 0, typ: NTI33554440, name: "defaultValue", sons: null}, +{kind: 1, offset: "disabled", len: 0, typ: NTI33554466, name: "disabled", sons: null}, +{kind: 1, offset: "form", len: 0, typ: NTI620757036, name: "form", sons: null}, +{kind: 1, offset: "name", len: 0, typ: NTI33554440, name: "name", sons: null}, +{kind: 1, offset: "readOnly", len: 0, typ: NTI33554466, name: "readOnly", sons: null}, +{kind: 1, offset: "options", len: 0, typ: NTI620757142, name: "options", sons: null}, +{kind: 1, offset: "selectedOptions", len: 0, typ: NTI620757143, name: "selectedOptions", sons: null}, +{kind: 1, offset: "clientWidth", len: 0, typ: NTI33554456, name: "clientWidth", sons: null}, +{kind: 1, offset: "clientHeight", len: 0, typ: NTI33554456, name: "clientHeight", sons: null}, +{kind: 1, offset: "contentEditable", len: 0, typ: NTI33554440, name: "contentEditable", sons: null}, +{kind: 1, offset: "isContentEditable", len: 0, typ: NTI33554466, name: "isContentEditable", sons: null}, +{kind: 1, offset: "dir", len: 0, typ: NTI33554440, name: "dir", sons: null}, +{kind: 1, offset: "offsetHeight", len: 0, typ: NTI33554456, name: "offsetHeight", sons: null}, +{kind: 1, offset: "offsetWidth", len: 0, typ: NTI33554456, name: "offsetWidth", sons: null}, +{kind: 1, offset: "offsetLeft", len: 0, typ: NTI33554456, name: "offsetLeft", sons: null}, +{kind: 1, offset: "offsetTop", len: 0, typ: NTI33554456, name: "offsetTop", sons: null}]}; +NTI620757017.node = NNI620757017; +NTI620757017.base = NTI620757013; +NTI620757016.base = NTI620757017; +var NNI620757033 = {kind: 2, len: 3, offset: 0, typ: null, name: null, sons: [{kind: 1, offset: "text", len: 0, typ: NTI33554440, name: "text", sons: null}, +{kind: 1, offset: "x", len: 0, typ: NTI33554456, name: "x", sons: null}, +{kind: 1, offset: "y", len: 0, typ: NTI33554456, name: "y", sons: null}]}; +NTI620757033.node = NNI620757033; +NTI620757033.base = NTI620757017; +NTI620757032.base = NTI620757033; +NTI620757136.base = NTI620757032; +NTI620757137.base = NTI620757036; +var NNI620757039 = {kind: 2, len: 8, offset: 0, typ: null, name: null, sons: [{kind: 1, offset: "border", len: 0, typ: NTI33554456, name: "border", sons: null}, +{kind: 1, offset: "complete", len: 0, typ: NTI33554466, name: "complete", sons: null}, +{kind: 1, offset: "height", len: 0, typ: NTI33554456, name: "height", sons: null}, +{kind: 1, offset: "hspace", len: 0, typ: NTI33554456, name: "hspace", sons: null}, +{kind: 1, offset: "lowsrc", len: 0, typ: NTI33554440, name: "lowsrc", sons: null}, +{kind: 1, offset: "src", len: 0, typ: NTI33554440, name: "src", sons: null}, +{kind: 1, offset: "vspace", len: 0, typ: NTI33554456, name: "vspace", sons: null}, +{kind: 1, offset: "width", len: 0, typ: NTI33554456, name: "width", sons: null}]}; +NTI620757039.node = NNI620757039; +NTI620757039.base = NTI620757017; +NTI620757038.base = NTI620757039; +NTI620757138.base = NTI620757038; +NTI620757139.base = NTI620757016; +var NNI620757031 = {kind: 2, len: 6, offset: 0, typ: null, name: null, sons: [{kind: 1, offset: "height", len: 0, typ: NTI33554456, name: "height", sons: null}, +{kind: 1, offset: "hspace", len: 0, typ: NTI33554456, name: "hspace", sons: null}, +{kind: 1, offset: "src", len: 0, typ: NTI33554440, name: "src", sons: null}, +{kind: 1, offset: "width", len: 0, typ: NTI33554456, name: "width", sons: null}, +{kind: 1, offset: "type", len: 0, typ: NTI33554440, name: "type", sons: null}, +{kind: 1, offset: "vspace", len: 0, typ: NTI33554456, name: "vspace", sons: null}]}; +NTI620757031.node = NNI620757031; +NTI620757031.base = NTI620757017; +NTI620757030.base = NTI620757031; +NTI620757140.base = NTI620757030; +var NNI620757029 = {kind: 2, len: 4, offset: 0, typ: null, name: null, sons: [{kind: 1, offset: "target", len: 0, typ: NTI33554440, name: "target", sons: null}, +{kind: 1, offset: "text", len: 0, typ: NTI33554440, name: "text", sons: null}, +{kind: 1, offset: "x", len: 0, typ: NTI33554456, name: "x", sons: null}, +{kind: 1, offset: "y", len: 0, typ: NTI33554456, name: "y", sons: null}]}; +NTI620757029.node = NNI620757029; +NTI620757029.base = NTI620757017; +NTI620757028.base = NTI620757029; +NTI620757141.base = NTI620757028; +var NNI620757176 = {kind: 1, offset: "then", len: 0, typ: NTI620757177, name: "then", sons: null}; +NTI620757176.node = NNI620757176; +NTI620757089.base = NTI620757176; +var NNI620757179 = {kind: 2, len: 2, offset: 0, typ: null, name: null, sons: [{kind: 1, offset: "ready", len: 0, typ: NTI620757089, name: "ready", sons: null}, +{kind: 1, offset: "onloadingdone", len: 0, typ: NTI620757180, name: "onloadingdone", sons: null}]}; +NTI620757179.node = NNI620757179; +NTI620757090.base = NTI620757179; +var NNI620757015 = {kind: 2, len: 23, offset: 0, typ: null, name: null, sons: [{kind: 1, offset: "activeElement", len: 0, typ: NTI620757016, name: "activeElement", sons: null}, +{kind: 1, offset: "documentElement", len: 0, typ: NTI620757016, name: "documentElement", sons: null}, +{kind: 1, offset: "alinkColor", len: 0, typ: NTI33554440, name: "alinkColor", sons: null}, +{kind: 1, offset: "bgColor", len: 0, typ: NTI33554440, name: "bgColor", sons: null}, +{kind: 1, offset: "body", len: 0, typ: NTI620757016, name: "body", sons: null}, +{kind: 1, offset: "charset", len: 0, typ: NTI33554440, name: "charset", sons: null}, +{kind: 1, offset: "cookie", len: 0, typ: NTI33554440, name: "cookie", sons: null}, +{kind: 1, offset: "defaultCharset", len: 0, typ: NTI33554440, name: "defaultCharset", sons: null}, +{kind: 1, offset: "fgColor", len: 0, typ: NTI33554440, name: "fgColor", sons: null}, +{kind: 1, offset: "head", len: 0, typ: NTI620757016, name: "head", sons: null}, +{kind: 1, offset: "lastModified", len: 0, typ: NTI33554440, name: "lastModified", sons: null}, +{kind: 1, offset: "linkColor", len: 0, typ: NTI33554440, name: "linkColor", sons: null}, +{kind: 1, offset: "referrer", len: 0, typ: NTI33554440, name: "referrer", sons: null}, +{kind: 1, offset: "title", len: 0, typ: NTI33554440, name: "title", sons: null}, +{kind: 1, offset: "URL", len: 0, typ: NTI33554440, name: "URL", sons: null}, +{kind: 1, offset: "vlinkColor", len: 0, typ: NTI33554440, name: "vlinkColor", sons: null}, +{kind: 1, offset: "anchors", len: 0, typ: NTI620757136, name: "anchors", sons: null}, +{kind: 1, offset: "forms", len: 0, typ: NTI620757137, name: "forms", sons: null}, +{kind: 1, offset: "images", len: 0, typ: NTI620757138, name: "images", sons: null}, +{kind: 1, offset: "applets", len: 0, typ: NTI620757139, name: "applets", sons: null}, +{kind: 1, offset: "embeds", len: 0, typ: NTI620757140, name: "embeds", sons: null}, +{kind: 1, offset: "links", len: 0, typ: NTI620757141, name: "links", sons: null}, +{kind: 1, offset: "fonts", len: 0, typ: NTI620757090, name: "fonts", sons: null}]}; +NTI620757015.node = NNI620757015; +NTI620757015.base = NTI620757013; +NTI620757014.base = NTI620757015; +var NNI620757041 = {kind: 2, len: 368, offset: 0, typ: null, name: null, sons: [{kind: 1, offset: "alignContent", len: 0, typ: NTI33554440, name: "alignContent", sons: null}, +{kind: 1, offset: "alignItems", len: 0, typ: NTI33554440, name: "alignItems", sons: null}, +{kind: 1, offset: "alignSelf", len: 0, typ: NTI33554440, name: "alignSelf", sons: null}, +{kind: 1, offset: "all", len: 0, typ: NTI33554440, name: "all", sons: null}, +{kind: 1, offset: "animation", len: 0, typ: NTI33554440, name: "animation", sons: null}, +{kind: 1, offset: "animationDelay", len: 0, typ: NTI33554440, name: "animationDelay", sons: null}, +{kind: 1, offset: "animationDirection", len: 0, typ: NTI33554440, name: "animationDirection", sons: null}, +{kind: 1, offset: "animationDuration", len: 0, typ: NTI33554440, name: "animationDuration", sons: null}, +{kind: 1, offset: "animationFillMode", len: 0, typ: NTI33554440, name: "animationFillMode", sons: null}, +{kind: 1, offset: "animationIterationCount", len: 0, typ: NTI33554440, name: "animationIterationCount", sons: null}, +{kind: 1, offset: "animationName", len: 0, typ: NTI33554440, name: "animationName", sons: null}, +{kind: 1, offset: "animationPlayState", len: 0, typ: NTI33554440, name: "animationPlayState", sons: null}, +{kind: 1, offset: "animationTimingFunction", len: 0, typ: NTI33554440, name: "animationTimingFunction", sons: null}, +{kind: 1, offset: "backdropFilter", len: 0, typ: NTI33554440, name: "backdropFilter", sons: null}, +{kind: 1, offset: "backfaceVisibility", len: 0, typ: NTI33554440, name: "backfaceVisibility", sons: null}, +{kind: 1, offset: "background", len: 0, typ: NTI33554440, name: "background", sons: null}, +{kind: 1, offset: "backgroundAttachment", len: 0, typ: NTI33554440, name: "backgroundAttachment", sons: null}, +{kind: 1, offset: "backgroundBlendMode", len: 0, typ: NTI33554440, name: "backgroundBlendMode", sons: null}, +{kind: 1, offset: "backgroundClip", len: 0, typ: NTI33554440, name: "backgroundClip", sons: null}, +{kind: 1, offset: "backgroundColor", len: 0, typ: NTI33554440, name: "backgroundColor", sons: null}, +{kind: 1, offset: "backgroundImage", len: 0, typ: NTI33554440, name: "backgroundImage", sons: null}, +{kind: 1, offset: "backgroundOrigin", len: 0, typ: NTI33554440, name: "backgroundOrigin", sons: null}, +{kind: 1, offset: "backgroundPosition", len: 0, typ: NTI33554440, name: "backgroundPosition", sons: null}, +{kind: 1, offset: "backgroundRepeat", len: 0, typ: NTI33554440, name: "backgroundRepeat", sons: null}, +{kind: 1, offset: "backgroundSize", len: 0, typ: NTI33554440, name: "backgroundSize", sons: null}, +{kind: 1, offset: "blockSize", len: 0, typ: NTI33554440, name: "blockSize", sons: null}, +{kind: 1, offset: "border", len: 0, typ: NTI33554440, name: "border", sons: null}, +{kind: 1, offset: "borderBlock", len: 0, typ: NTI33554440, name: "borderBlock", sons: null}, +{kind: 1, offset: "borderBlockColor", len: 0, typ: NTI33554440, name: "borderBlockColor", sons: null}, +{kind: 1, offset: "borderBlockEnd", len: 0, typ: NTI33554440, name: "borderBlockEnd", sons: null}, +{kind: 1, offset: "borderBlockEndColor", len: 0, typ: NTI33554440, name: "borderBlockEndColor", sons: null}, +{kind: 1, offset: "borderBlockEndStyle", len: 0, typ: NTI33554440, name: "borderBlockEndStyle", sons: null}, +{kind: 1, offset: "borderBlockEndWidth", len: 0, typ: NTI33554440, name: "borderBlockEndWidth", sons: null}, +{kind: 1, offset: "borderBlockStart", len: 0, typ: NTI33554440, name: "borderBlockStart", sons: null}, +{kind: 1, offset: "borderBlockStartColor", len: 0, typ: NTI33554440, name: "borderBlockStartColor", sons: null}, +{kind: 1, offset: "borderBlockStartStyle", len: 0, typ: NTI33554440, name: "borderBlockStartStyle", sons: null}, +{kind: 1, offset: "borderBlockStartWidth", len: 0, typ: NTI33554440, name: "borderBlockStartWidth", sons: null}, +{kind: 1, offset: "borderBlockStyle", len: 0, typ: NTI33554440, name: "borderBlockStyle", sons: null}, +{kind: 1, offset: "borderBlockWidth", len: 0, typ: NTI33554440, name: "borderBlockWidth", sons: null}, +{kind: 1, offset: "borderBottom", len: 0, typ: NTI33554440, name: "borderBottom", sons: null}, +{kind: 1, offset: "borderBottomColor", len: 0, typ: NTI33554440, name: "borderBottomColor", sons: null}, +{kind: 1, offset: "borderBottomLeftRadius", len: 0, typ: NTI33554440, name: "borderBottomLeftRadius", sons: null}, +{kind: 1, offset: "borderBottomRightRadius", len: 0, typ: NTI33554440, name: "borderBottomRightRadius", sons: null}, +{kind: 1, offset: "borderBottomStyle", len: 0, typ: NTI33554440, name: "borderBottomStyle", sons: null}, +{kind: 1, offset: "borderBottomWidth", len: 0, typ: NTI33554440, name: "borderBottomWidth", sons: null}, +{kind: 1, offset: "borderCollapse", len: 0, typ: NTI33554440, name: "borderCollapse", sons: null}, +{kind: 1, offset: "borderColor", len: 0, typ: NTI33554440, name: "borderColor", sons: null}, +{kind: 1, offset: "borderEndEndRadius", len: 0, typ: NTI33554440, name: "borderEndEndRadius", sons: null}, +{kind: 1, offset: "borderEndStartRadius", len: 0, typ: NTI33554440, name: "borderEndStartRadius", sons: null}, +{kind: 1, offset: "borderImage", len: 0, typ: NTI33554440, name: "borderImage", sons: null}, +{kind: 1, offset: "borderImageOutset", len: 0, typ: NTI33554440, name: "borderImageOutset", sons: null}, +{kind: 1, offset: "borderImageRepeat", len: 0, typ: NTI33554440, name: "borderImageRepeat", sons: null}, +{kind: 1, offset: "borderImageSlice", len: 0, typ: NTI33554440, name: "borderImageSlice", sons: null}, +{kind: 1, offset: "borderImageSource", len: 0, typ: NTI33554440, name: "borderImageSource", sons: null}, +{kind: 1, offset: "borderImageWidth", len: 0, typ: NTI33554440, name: "borderImageWidth", sons: null}, +{kind: 1, offset: "borderInline", len: 0, typ: NTI33554440, name: "borderInline", sons: null}, +{kind: 1, offset: "borderInlineColor", len: 0, typ: NTI33554440, name: "borderInlineColor", sons: null}, +{kind: 1, offset: "borderInlineEnd", len: 0, typ: NTI33554440, name: "borderInlineEnd", sons: null}, +{kind: 1, offset: "borderInlineEndColor", len: 0, typ: NTI33554440, name: "borderInlineEndColor", sons: null}, +{kind: 1, offset: "borderInlineEndStyle", len: 0, typ: NTI33554440, name: "borderInlineEndStyle", sons: null}, +{kind: 1, offset: "borderInlineEndWidth", len: 0, typ: NTI33554440, name: "borderInlineEndWidth", sons: null}, +{kind: 1, offset: "borderInlineStart", len: 0, typ: NTI33554440, name: "borderInlineStart", sons: null}, +{kind: 1, offset: "borderInlineStartColor", len: 0, typ: NTI33554440, name: "borderInlineStartColor", sons: null}, +{kind: 1, offset: "borderInlineStartStyle", len: 0, typ: NTI33554440, name: "borderInlineStartStyle", sons: null}, +{kind: 1, offset: "borderInlineStartWidth", len: 0, typ: NTI33554440, name: "borderInlineStartWidth", sons: null}, +{kind: 1, offset: "borderInlineStyle", len: 0, typ: NTI33554440, name: "borderInlineStyle", sons: null}, +{kind: 1, offset: "borderInlineWidth", len: 0, typ: NTI33554440, name: "borderInlineWidth", sons: null}, +{kind: 1, offset: "borderLeft", len: 0, typ: NTI33554440, name: "borderLeft", sons: null}, +{kind: 1, offset: "borderLeftColor", len: 0, typ: NTI33554440, name: "borderLeftColor", sons: null}, +{kind: 1, offset: "borderLeftStyle", len: 0, typ: NTI33554440, name: "borderLeftStyle", sons: null}, +{kind: 1, offset: "borderLeftWidth", len: 0, typ: NTI33554440, name: "borderLeftWidth", sons: null}, +{kind: 1, offset: "borderRadius", len: 0, typ: NTI33554440, name: "borderRadius", sons: null}, +{kind: 1, offset: "borderRight", len: 0, typ: NTI33554440, name: "borderRight", sons: null}, +{kind: 1, offset: "borderRightColor", len: 0, typ: NTI33554440, name: "borderRightColor", sons: null}, +{kind: 1, offset: "borderRightStyle", len: 0, typ: NTI33554440, name: "borderRightStyle", sons: null}, +{kind: 1, offset: "borderRightWidth", len: 0, typ: NTI33554440, name: "borderRightWidth", sons: null}, +{kind: 1, offset: "borderSpacing", len: 0, typ: NTI33554440, name: "borderSpacing", sons: null}, +{kind: 1, offset: "borderStartEndRadius", len: 0, typ: NTI33554440, name: "borderStartEndRadius", sons: null}, +{kind: 1, offset: "borderStartStartRadius", len: 0, typ: NTI33554440, name: "borderStartStartRadius", sons: null}, +{kind: 1, offset: "borderStyle", len: 0, typ: NTI33554440, name: "borderStyle", sons: null}, +{kind: 1, offset: "borderTop", len: 0, typ: NTI33554440, name: "borderTop", sons: null}, +{kind: 1, offset: "borderTopColor", len: 0, typ: NTI33554440, name: "borderTopColor", sons: null}, +{kind: 1, offset: "borderTopLeftRadius", len: 0, typ: NTI33554440, name: "borderTopLeftRadius", sons: null}, +{kind: 1, offset: "borderTopRightRadius", len: 0, typ: NTI33554440, name: "borderTopRightRadius", sons: null}, +{kind: 1, offset: "borderTopStyle", len: 0, typ: NTI33554440, name: "borderTopStyle", sons: null}, +{kind: 1, offset: "borderTopWidth", len: 0, typ: NTI33554440, name: "borderTopWidth", sons: null}, +{kind: 1, offset: "borderWidth", len: 0, typ: NTI33554440, name: "borderWidth", sons: null}, +{kind: 1, offset: "bottom", len: 0, typ: NTI33554440, name: "bottom", sons: null}, +{kind: 1, offset: "boxDecorationBreak", len: 0, typ: NTI33554440, name: "boxDecorationBreak", sons: null}, +{kind: 1, offset: "boxShadow", len: 0, typ: NTI33554440, name: "boxShadow", sons: null}, +{kind: 1, offset: "boxSizing", len: 0, typ: NTI33554440, name: "boxSizing", sons: null}, +{kind: 1, offset: "breakAfter", len: 0, typ: NTI33554440, name: "breakAfter", sons: null}, +{kind: 1, offset: "breakBefore", len: 0, typ: NTI33554440, name: "breakBefore", sons: null}, +{kind: 1, offset: "breakInside", len: 0, typ: NTI33554440, name: "breakInside", sons: null}, +{kind: 1, offset: "captionSide", len: 0, typ: NTI33554440, name: "captionSide", sons: null}, +{kind: 1, offset: "caretColor", len: 0, typ: NTI33554440, name: "caretColor", sons: null}, +{kind: 1, offset: "clear", len: 0, typ: NTI33554440, name: "clear", sons: null}, +{kind: 1, offset: "clip", len: 0, typ: NTI33554440, name: "clip", sons: null}, +{kind: 1, offset: "clipPath", len: 0, typ: NTI33554440, name: "clipPath", sons: null}, +{kind: 1, offset: "color", len: 0, typ: NTI33554440, name: "color", sons: null}, +{kind: 1, offset: "colorAdjust", len: 0, typ: NTI33554440, name: "colorAdjust", sons: null}, +{kind: 1, offset: "columnCount", len: 0, typ: NTI33554440, name: "columnCount", sons: null}, +{kind: 1, offset: "columnFill", len: 0, typ: NTI33554440, name: "columnFill", sons: null}, +{kind: 1, offset: "columnGap", len: 0, typ: NTI33554440, name: "columnGap", sons: null}, +{kind: 1, offset: "columnRule", len: 0, typ: NTI33554440, name: "columnRule", sons: null}, +{kind: 1, offset: "columnRuleColor", len: 0, typ: NTI33554440, name: "columnRuleColor", sons: null}, +{kind: 1, offset: "columnRuleStyle", len: 0, typ: NTI33554440, name: "columnRuleStyle", sons: null}, +{kind: 1, offset: "columnRuleWidth", len: 0, typ: NTI33554440, name: "columnRuleWidth", sons: null}, +{kind: 1, offset: "columnSpan", len: 0, typ: NTI33554440, name: "columnSpan", sons: null}, +{kind: 1, offset: "columnWidth", len: 0, typ: NTI33554440, name: "columnWidth", sons: null}, +{kind: 1, offset: "columns", len: 0, typ: NTI33554440, name: "columns", sons: null}, +{kind: 1, offset: "contain", len: 0, typ: NTI33554440, name: "contain", sons: null}, +{kind: 1, offset: "content", len: 0, typ: NTI33554440, name: "content", sons: null}, +{kind: 1, offset: "counterIncrement", len: 0, typ: NTI33554440, name: "counterIncrement", sons: null}, +{kind: 1, offset: "counterReset", len: 0, typ: NTI33554440, name: "counterReset", sons: null}, +{kind: 1, offset: "counterSet", len: 0, typ: NTI33554440, name: "counterSet", sons: null}, +{kind: 1, offset: "cursor", len: 0, typ: NTI33554440, name: "cursor", sons: null}, +{kind: 1, offset: "direction", len: 0, typ: NTI33554440, name: "direction", sons: null}, +{kind: 1, offset: "display", len: 0, typ: NTI33554440, name: "display", sons: null}, +{kind: 1, offset: "emptyCells", len: 0, typ: NTI33554440, name: "emptyCells", sons: null}, +{kind: 1, offset: "filter", len: 0, typ: NTI33554440, name: "filter", sons: null}, +{kind: 1, offset: "flex", len: 0, typ: NTI33554440, name: "flex", sons: null}, +{kind: 1, offset: "flexBasis", len: 0, typ: NTI33554440, name: "flexBasis", sons: null}, +{kind: 1, offset: "flexDirection", len: 0, typ: NTI33554440, name: "flexDirection", sons: null}, +{kind: 1, offset: "flexFlow", len: 0, typ: NTI33554440, name: "flexFlow", sons: null}, +{kind: 1, offset: "flexGrow", len: 0, typ: NTI33554440, name: "flexGrow", sons: null}, +{kind: 1, offset: "flexShrink", len: 0, typ: NTI33554440, name: "flexShrink", sons: null}, +{kind: 1, offset: "flexWrap", len: 0, typ: NTI33554440, name: "flexWrap", sons: null}, +{kind: 1, offset: "cssFloat", len: 0, typ: NTI33554440, name: "cssFloat", sons: null}, +{kind: 1, offset: "font", len: 0, typ: NTI33554440, name: "font", sons: null}, +{kind: 1, offset: "fontFamily", len: 0, typ: NTI33554440, name: "fontFamily", sons: null}, +{kind: 1, offset: "fontFeatureSettings", len: 0, typ: NTI33554440, name: "fontFeatureSettings", sons: null}, +{kind: 1, offset: "fontKerning", len: 0, typ: NTI33554440, name: "fontKerning", sons: null}, +{kind: 1, offset: "fontLanguageOverride", len: 0, typ: NTI33554440, name: "fontLanguageOverride", sons: null}, +{kind: 1, offset: "fontOpticalSizing", len: 0, typ: NTI33554440, name: "fontOpticalSizing", sons: null}, +{kind: 1, offset: "fontSize", len: 0, typ: NTI33554440, name: "fontSize", sons: null}, +{kind: 1, offset: "fontSizeAdjust", len: 0, typ: NTI33554440, name: "fontSizeAdjust", sons: null}, +{kind: 1, offset: "fontStretch", len: 0, typ: NTI33554440, name: "fontStretch", sons: null}, +{kind: 1, offset: "fontStyle", len: 0, typ: NTI33554440, name: "fontStyle", sons: null}, +{kind: 1, offset: "fontSynthesis", len: 0, typ: NTI33554440, name: "fontSynthesis", sons: null}, +{kind: 1, offset: "fontVariant", len: 0, typ: NTI33554440, name: "fontVariant", sons: null}, +{kind: 1, offset: "fontVariantAlternates", len: 0, typ: NTI33554440, name: "fontVariantAlternates", sons: null}, +{kind: 1, offset: "fontVariantCaps", len: 0, typ: NTI33554440, name: "fontVariantCaps", sons: null}, +{kind: 1, offset: "fontVariantEastAsian", len: 0, typ: NTI33554440, name: "fontVariantEastAsian", sons: null}, +{kind: 1, offset: "fontVariantLigatures", len: 0, typ: NTI33554440, name: "fontVariantLigatures", sons: null}, +{kind: 1, offset: "fontVariantNumeric", len: 0, typ: NTI33554440, name: "fontVariantNumeric", sons: null}, +{kind: 1, offset: "fontVariantPosition", len: 0, typ: NTI33554440, name: "fontVariantPosition", sons: null}, +{kind: 1, offset: "fontVariationSettings", len: 0, typ: NTI33554440, name: "fontVariationSettings", sons: null}, +{kind: 1, offset: "fontWeight", len: 0, typ: NTI33554440, name: "fontWeight", sons: null}, +{kind: 1, offset: "gap", len: 0, typ: NTI33554440, name: "gap", sons: null}, +{kind: 1, offset: "grid", len: 0, typ: NTI33554440, name: "grid", sons: null}, +{kind: 1, offset: "gridArea", len: 0, typ: NTI33554440, name: "gridArea", sons: null}, +{kind: 1, offset: "gridAutoColumns", len: 0, typ: NTI33554440, name: "gridAutoColumns", sons: null}, +{kind: 1, offset: "gridAutoFlow", len: 0, typ: NTI33554440, name: "gridAutoFlow", sons: null}, +{kind: 1, offset: "gridAutoRows", len: 0, typ: NTI33554440, name: "gridAutoRows", sons: null}, +{kind: 1, offset: "gridColumn", len: 0, typ: NTI33554440, name: "gridColumn", sons: null}, +{kind: 1, offset: "gridColumnEnd", len: 0, typ: NTI33554440, name: "gridColumnEnd", sons: null}, +{kind: 1, offset: "gridColumnStart", len: 0, typ: NTI33554440, name: "gridColumnStart", sons: null}, +{kind: 1, offset: "gridRow", len: 0, typ: NTI33554440, name: "gridRow", sons: null}, +{kind: 1, offset: "gridRowEnd", len: 0, typ: NTI33554440, name: "gridRowEnd", sons: null}, +{kind: 1, offset: "gridRowStart", len: 0, typ: NTI33554440, name: "gridRowStart", sons: null}, +{kind: 1, offset: "gridTemplate", len: 0, typ: NTI33554440, name: "gridTemplate", sons: null}, +{kind: 1, offset: "gridTemplateAreas", len: 0, typ: NTI33554440, name: "gridTemplateAreas", sons: null}, +{kind: 1, offset: "gridTemplateColumns", len: 0, typ: NTI33554440, name: "gridTemplateColumns", sons: null}, +{kind: 1, offset: "gridTemplateRows", len: 0, typ: NTI33554440, name: "gridTemplateRows", sons: null}, +{kind: 1, offset: "hangingPunctuation", len: 0, typ: NTI33554440, name: "hangingPunctuation", sons: null}, +{kind: 1, offset: "height", len: 0, typ: NTI33554440, name: "height", sons: null}, +{kind: 1, offset: "hyphens", len: 0, typ: NTI33554440, name: "hyphens", sons: null}, +{kind: 1, offset: "imageOrientation", len: 0, typ: NTI33554440, name: "imageOrientation", sons: null}, +{kind: 1, offset: "imageRendering", len: 0, typ: NTI33554440, name: "imageRendering", sons: null}, +{kind: 1, offset: "inlineSize", len: 0, typ: NTI33554440, name: "inlineSize", sons: null}, +{kind: 1, offset: "inset", len: 0, typ: NTI33554440, name: "inset", sons: null}, +{kind: 1, offset: "insetBlock", len: 0, typ: NTI33554440, name: "insetBlock", sons: null}, +{kind: 1, offset: "insetBlockEnd", len: 0, typ: NTI33554440, name: "insetBlockEnd", sons: null}, +{kind: 1, offset: "insetBlockStart", len: 0, typ: NTI33554440, name: "insetBlockStart", sons: null}, +{kind: 1, offset: "insetInline", len: 0, typ: NTI33554440, name: "insetInline", sons: null}, +{kind: 1, offset: "insetInlineEnd", len: 0, typ: NTI33554440, name: "insetInlineEnd", sons: null}, +{kind: 1, offset: "insetInlineStart", len: 0, typ: NTI33554440, name: "insetInlineStart", sons: null}, +{kind: 1, offset: "isolation", len: 0, typ: NTI33554440, name: "isolation", sons: null}, +{kind: 1, offset: "justifyContent", len: 0, typ: NTI33554440, name: "justifyContent", sons: null}, +{kind: 1, offset: "justifyItems", len: 0, typ: NTI33554440, name: "justifyItems", sons: null}, +{kind: 1, offset: "justifySelf", len: 0, typ: NTI33554440, name: "justifySelf", sons: null}, +{kind: 1, offset: "left", len: 0, typ: NTI33554440, name: "left", sons: null}, +{kind: 1, offset: "letterSpacing", len: 0, typ: NTI33554440, name: "letterSpacing", sons: null}, +{kind: 1, offset: "lineBreak", len: 0, typ: NTI33554440, name: "lineBreak", sons: null}, +{kind: 1, offset: "lineHeight", len: 0, typ: NTI33554440, name: "lineHeight", sons: null}, +{kind: 1, offset: "listStyle", len: 0, typ: NTI33554440, name: "listStyle", sons: null}, +{kind: 1, offset: "listStyleImage", len: 0, typ: NTI33554440, name: "listStyleImage", sons: null}, +{kind: 1, offset: "listStylePosition", len: 0, typ: NTI33554440, name: "listStylePosition", sons: null}, +{kind: 1, offset: "listStyleType", len: 0, typ: NTI33554440, name: "listStyleType", sons: null}, +{kind: 1, offset: "margin", len: 0, typ: NTI33554440, name: "margin", sons: null}, +{kind: 1, offset: "marginBlock", len: 0, typ: NTI33554440, name: "marginBlock", sons: null}, +{kind: 1, offset: "marginBlockEnd", len: 0, typ: NTI33554440, name: "marginBlockEnd", sons: null}, +{kind: 1, offset: "marginBlockStart", len: 0, typ: NTI33554440, name: "marginBlockStart", sons: null}, +{kind: 1, offset: "marginBottom", len: 0, typ: NTI33554440, name: "marginBottom", sons: null}, +{kind: 1, offset: "marginInline", len: 0, typ: NTI33554440, name: "marginInline", sons: null}, +{kind: 1, offset: "marginInlineEnd", len: 0, typ: NTI33554440, name: "marginInlineEnd", sons: null}, +{kind: 1, offset: "marginInlineStart", len: 0, typ: NTI33554440, name: "marginInlineStart", sons: null}, +{kind: 1, offset: "marginLeft", len: 0, typ: NTI33554440, name: "marginLeft", sons: null}, +{kind: 1, offset: "marginRight", len: 0, typ: NTI33554440, name: "marginRight", sons: null}, +{kind: 1, offset: "marginTop", len: 0, typ: NTI33554440, name: "marginTop", sons: null}, +{kind: 1, offset: "mask", len: 0, typ: NTI33554440, name: "mask", sons: null}, +{kind: 1, offset: "maskBorder", len: 0, typ: NTI33554440, name: "maskBorder", sons: null}, +{kind: 1, offset: "maskBorderMode", len: 0, typ: NTI33554440, name: "maskBorderMode", sons: null}, +{kind: 1, offset: "maskBorderOutset", len: 0, typ: NTI33554440, name: "maskBorderOutset", sons: null}, +{kind: 1, offset: "maskBorderRepeat", len: 0, typ: NTI33554440, name: "maskBorderRepeat", sons: null}, +{kind: 1, offset: "maskBorderSlice", len: 0, typ: NTI33554440, name: "maskBorderSlice", sons: null}, +{kind: 1, offset: "maskBorderSource", len: 0, typ: NTI33554440, name: "maskBorderSource", sons: null}, +{kind: 1, offset: "maskBorderWidth", len: 0, typ: NTI33554440, name: "maskBorderWidth", sons: null}, +{kind: 1, offset: "maskClip", len: 0, typ: NTI33554440, name: "maskClip", sons: null}, +{kind: 1, offset: "maskComposite", len: 0, typ: NTI33554440, name: "maskComposite", sons: null}, +{kind: 1, offset: "maskImage", len: 0, typ: NTI33554440, name: "maskImage", sons: null}, +{kind: 1, offset: "maskMode", len: 0, typ: NTI33554440, name: "maskMode", sons: null}, +{kind: 1, offset: "maskOrigin", len: 0, typ: NTI33554440, name: "maskOrigin", sons: null}, +{kind: 1, offset: "maskPosition", len: 0, typ: NTI33554440, name: "maskPosition", sons: null}, +{kind: 1, offset: "maskRepeat", len: 0, typ: NTI33554440, name: "maskRepeat", sons: null}, +{kind: 1, offset: "maskSize", len: 0, typ: NTI33554440, name: "maskSize", sons: null}, +{kind: 1, offset: "maskType", len: 0, typ: NTI33554440, name: "maskType", sons: null}, +{kind: 1, offset: "maxBlockSize", len: 0, typ: NTI33554440, name: "maxBlockSize", sons: null}, +{kind: 1, offset: "maxHeight", len: 0, typ: NTI33554440, name: "maxHeight", sons: null}, +{kind: 1, offset: "maxInlineSize", len: 0, typ: NTI33554440, name: "maxInlineSize", sons: null}, +{kind: 1, offset: "maxWidth", len: 0, typ: NTI33554440, name: "maxWidth", sons: null}, +{kind: 1, offset: "minBlockSize", len: 0, typ: NTI33554440, name: "minBlockSize", sons: null}, +{kind: 1, offset: "minHeight", len: 0, typ: NTI33554440, name: "minHeight", sons: null}, +{kind: 1, offset: "minInlineSize", len: 0, typ: NTI33554440, name: "minInlineSize", sons: null}, +{kind: 1, offset: "minWidth", len: 0, typ: NTI33554440, name: "minWidth", sons: null}, +{kind: 1, offset: "mixBlendMode", len: 0, typ: NTI33554440, name: "mixBlendMode", sons: null}, +{kind: 1, offset: "objectFit", len: 0, typ: NTI33554440, name: "objectFit", sons: null}, +{kind: 1, offset: "objectPosition", len: 0, typ: NTI33554440, name: "objectPosition", sons: null}, +{kind: 1, offset: "offset", len: 0, typ: NTI33554440, name: "offset", sons: null}, +{kind: 1, offset: "offsetAnchor", len: 0, typ: NTI33554440, name: "offsetAnchor", sons: null}, +{kind: 1, offset: "offsetDistance", len: 0, typ: NTI33554440, name: "offsetDistance", sons: null}, +{kind: 1, offset: "offsetPath", len: 0, typ: NTI33554440, name: "offsetPath", sons: null}, +{kind: 1, offset: "offsetRotate", len: 0, typ: NTI33554440, name: "offsetRotate", sons: null}, +{kind: 1, offset: "opacity", len: 0, typ: NTI33554440, name: "opacity", sons: null}, +{kind: 1, offset: "order", len: 0, typ: NTI33554440, name: "order", sons: null}, +{kind: 1, offset: "orphans", len: 0, typ: NTI33554440, name: "orphans", sons: null}, +{kind: 1, offset: "outline", len: 0, typ: NTI33554440, name: "outline", sons: null}, +{kind: 1, offset: "outlineColor", len: 0, typ: NTI33554440, name: "outlineColor", sons: null}, +{kind: 1, offset: "outlineOffset", len: 0, typ: NTI33554440, name: "outlineOffset", sons: null}, +{kind: 1, offset: "outlineStyle", len: 0, typ: NTI33554440, name: "outlineStyle", sons: null}, +{kind: 1, offset: "outlineWidth", len: 0, typ: NTI33554440, name: "outlineWidth", sons: null}, +{kind: 1, offset: "overflow", len: 0, typ: NTI33554440, name: "overflow", sons: null}, +{kind: 1, offset: "overflowAnchor", len: 0, typ: NTI33554440, name: "overflowAnchor", sons: null}, +{kind: 1, offset: "overflowBlock", len: 0, typ: NTI33554440, name: "overflowBlock", sons: null}, +{kind: 1, offset: "overflowInline", len: 0, typ: NTI33554440, name: "overflowInline", sons: null}, +{kind: 1, offset: "overflowWrap", len: 0, typ: NTI33554440, name: "overflowWrap", sons: null}, +{kind: 1, offset: "overflowX", len: 0, typ: NTI33554440, name: "overflowX", sons: null}, +{kind: 1, offset: "overflowY", len: 0, typ: NTI33554440, name: "overflowY", sons: null}, +{kind: 1, offset: "overscrollBehavior", len: 0, typ: NTI33554440, name: "overscrollBehavior", sons: null}, +{kind: 1, offset: "overscrollBehaviorBlock", len: 0, typ: NTI33554440, name: "overscrollBehaviorBlock", sons: null}, +{kind: 1, offset: "overscrollBehaviorInline", len: 0, typ: NTI33554440, name: "overscrollBehaviorInline", sons: null}, +{kind: 1, offset: "overscrollBehaviorX", len: 0, typ: NTI33554440, name: "overscrollBehaviorX", sons: null}, +{kind: 1, offset: "overscrollBehaviorY", len: 0, typ: NTI33554440, name: "overscrollBehaviorY", sons: null}, +{kind: 1, offset: "padding", len: 0, typ: NTI33554440, name: "padding", sons: null}, +{kind: 1, offset: "paddingBlock", len: 0, typ: NTI33554440, name: "paddingBlock", sons: null}, +{kind: 1, offset: "paddingBlockEnd", len: 0, typ: NTI33554440, name: "paddingBlockEnd", sons: null}, +{kind: 1, offset: "paddingBlockStart", len: 0, typ: NTI33554440, name: "paddingBlockStart", sons: null}, +{kind: 1, offset: "paddingBottom", len: 0, typ: NTI33554440, name: "paddingBottom", sons: null}, +{kind: 1, offset: "paddingInline", len: 0, typ: NTI33554440, name: "paddingInline", sons: null}, +{kind: 1, offset: "paddingInlineEnd", len: 0, typ: NTI33554440, name: "paddingInlineEnd", sons: null}, +{kind: 1, offset: "paddingInlineStart", len: 0, typ: NTI33554440, name: "paddingInlineStart", sons: null}, +{kind: 1, offset: "paddingLeft", len: 0, typ: NTI33554440, name: "paddingLeft", sons: null}, +{kind: 1, offset: "paddingRight", len: 0, typ: NTI33554440, name: "paddingRight", sons: null}, +{kind: 1, offset: "paddingTop", len: 0, typ: NTI33554440, name: "paddingTop", sons: null}, +{kind: 1, offset: "pageBreakAfter", len: 0, typ: NTI33554440, name: "pageBreakAfter", sons: null}, +{kind: 1, offset: "pageBreakBefore", len: 0, typ: NTI33554440, name: "pageBreakBefore", sons: null}, +{kind: 1, offset: "pageBreakInside", len: 0, typ: NTI33554440, name: "pageBreakInside", sons: null}, +{kind: 1, offset: "paintOrder", len: 0, typ: NTI33554440, name: "paintOrder", sons: null}, +{kind: 1, offset: "perspective", len: 0, typ: NTI33554440, name: "perspective", sons: null}, +{kind: 1, offset: "perspectiveOrigin", len: 0, typ: NTI33554440, name: "perspectiveOrigin", sons: null}, +{kind: 1, offset: "placeContent", len: 0, typ: NTI33554440, name: "placeContent", sons: null}, +{kind: 1, offset: "placeItems", len: 0, typ: NTI33554440, name: "placeItems", sons: null}, +{kind: 1, offset: "placeSelf", len: 0, typ: NTI33554440, name: "placeSelf", sons: null}, +{kind: 1, offset: "pointerEvents", len: 0, typ: NTI33554440, name: "pointerEvents", sons: null}, +{kind: 1, offset: "position", len: 0, typ: NTI33554440, name: "position", sons: null}, +{kind: 1, offset: "quotes", len: 0, typ: NTI33554440, name: "quotes", sons: null}, +{kind: 1, offset: "resize", len: 0, typ: NTI33554440, name: "resize", sons: null}, +{kind: 1, offset: "right", len: 0, typ: NTI33554440, name: "right", sons: null}, +{kind: 1, offset: "rotate", len: 0, typ: NTI33554440, name: "rotate", sons: null}, +{kind: 1, offset: "rowGap", len: 0, typ: NTI33554440, name: "rowGap", sons: null}, +{kind: 1, offset: "scale", len: 0, typ: NTI33554440, name: "scale", sons: null}, +{kind: 1, offset: "scrollBehavior", len: 0, typ: NTI33554440, name: "scrollBehavior", sons: null}, +{kind: 1, offset: "scrollMargin", len: 0, typ: NTI33554440, name: "scrollMargin", sons: null}, +{kind: 1, offset: "scrollMarginBlock", len: 0, typ: NTI33554440, name: "scrollMarginBlock", sons: null}, +{kind: 1, offset: "scrollMarginBlockEnd", len: 0, typ: NTI33554440, name: "scrollMarginBlockEnd", sons: null}, +{kind: 1, offset: "scrollMarginBlockStart", len: 0, typ: NTI33554440, name: "scrollMarginBlockStart", sons: null}, +{kind: 1, offset: "scrollMarginBottom", len: 0, typ: NTI33554440, name: "scrollMarginBottom", sons: null}, +{kind: 1, offset: "scrollMarginInline", len: 0, typ: NTI33554440, name: "scrollMarginInline", sons: null}, +{kind: 1, offset: "scrollMarginInlineEnd", len: 0, typ: NTI33554440, name: "scrollMarginInlineEnd", sons: null}, +{kind: 1, offset: "scrollMarginInlineStart", len: 0, typ: NTI33554440, name: "scrollMarginInlineStart", sons: null}, +{kind: 1, offset: "scrollMarginLeft", len: 0, typ: NTI33554440, name: "scrollMarginLeft", sons: null}, +{kind: 1, offset: "scrollMarginRight", len: 0, typ: NTI33554440, name: "scrollMarginRight", sons: null}, +{kind: 1, offset: "scrollMarginTop", len: 0, typ: NTI33554440, name: "scrollMarginTop", sons: null}, +{kind: 1, offset: "scrollPadding", len: 0, typ: NTI33554440, name: "scrollPadding", sons: null}, +{kind: 1, offset: "scrollPaddingBlock", len: 0, typ: NTI33554440, name: "scrollPaddingBlock", sons: null}, +{kind: 1, offset: "scrollPaddingBlockEnd", len: 0, typ: NTI33554440, name: "scrollPaddingBlockEnd", sons: null}, +{kind: 1, offset: "scrollPaddingBlockStart", len: 0, typ: NTI33554440, name: "scrollPaddingBlockStart", sons: null}, +{kind: 1, offset: "scrollPaddingBottom", len: 0, typ: NTI33554440, name: "scrollPaddingBottom", sons: null}, +{kind: 1, offset: "scrollPaddingInline", len: 0, typ: NTI33554440, name: "scrollPaddingInline", sons: null}, +{kind: 1, offset: "scrollPaddingInlineEnd", len: 0, typ: NTI33554440, name: "scrollPaddingInlineEnd", sons: null}, +{kind: 1, offset: "scrollPaddingInlineStart", len: 0, typ: NTI33554440, name: "scrollPaddingInlineStart", sons: null}, +{kind: 1, offset: "scrollPaddingLeft", len: 0, typ: NTI33554440, name: "scrollPaddingLeft", sons: null}, +{kind: 1, offset: "scrollPaddingRight", len: 0, typ: NTI33554440, name: "scrollPaddingRight", sons: null}, +{kind: 1, offset: "scrollPaddingTop", len: 0, typ: NTI33554440, name: "scrollPaddingTop", sons: null}, +{kind: 1, offset: "scrollSnapAlign", len: 0, typ: NTI33554440, name: "scrollSnapAlign", sons: null}, +{kind: 1, offset: "scrollSnapStop", len: 0, typ: NTI33554440, name: "scrollSnapStop", sons: null}, +{kind: 1, offset: "scrollSnapType", len: 0, typ: NTI33554440, name: "scrollSnapType", sons: null}, +{kind: 1, offset: "scrollbar3dLightColor", len: 0, typ: NTI33554440, name: "scrollbar3dLightColor", sons: null}, +{kind: 1, offset: "scrollbarArrowColor", len: 0, typ: NTI33554440, name: "scrollbarArrowColor", sons: null}, +{kind: 1, offset: "scrollbarBaseColor", len: 0, typ: NTI33554440, name: "scrollbarBaseColor", sons: null}, +{kind: 1, offset: "scrollbarColor", len: 0, typ: NTI33554440, name: "scrollbarColor", sons: null}, +{kind: 1, offset: "scrollbarDarkshadowColor", len: 0, typ: NTI33554440, name: "scrollbarDarkshadowColor", sons: null}, +{kind: 1, offset: "scrollbarFaceColor", len: 0, typ: NTI33554440, name: "scrollbarFaceColor", sons: null}, +{kind: 1, offset: "scrollbarHighlightColor", len: 0, typ: NTI33554440, name: "scrollbarHighlightColor", sons: null}, +{kind: 1, offset: "scrollbarShadowColor", len: 0, typ: NTI33554440, name: "scrollbarShadowColor", sons: null}, +{kind: 1, offset: "scrollbarTrackColor", len: 0, typ: NTI33554440, name: "scrollbarTrackColor", sons: null}, +{kind: 1, offset: "scrollbarWidth", len: 0, typ: NTI33554440, name: "scrollbarWidth", sons: null}, +{kind: 1, offset: "shapeImageThreshold", len: 0, typ: NTI33554440, name: "shapeImageThreshold", sons: null}, +{kind: 1, offset: "shapeMargin", len: 0, typ: NTI33554440, name: "shapeMargin", sons: null}, +{kind: 1, offset: "shapeOutside", len: 0, typ: NTI33554440, name: "shapeOutside", sons: null}, +{kind: 1, offset: "tabSize", len: 0, typ: NTI33554440, name: "tabSize", sons: null}, +{kind: 1, offset: "tableLayout", len: 0, typ: NTI33554440, name: "tableLayout", sons: null}, +{kind: 1, offset: "textAlign", len: 0, typ: NTI33554440, name: "textAlign", sons: null}, +{kind: 1, offset: "textAlignLast", len: 0, typ: NTI33554440, name: "textAlignLast", sons: null}, +{kind: 1, offset: "textCombineUpright", len: 0, typ: NTI33554440, name: "textCombineUpright", sons: null}, +{kind: 1, offset: "textDecoration", len: 0, typ: NTI33554440, name: "textDecoration", sons: null}, +{kind: 1, offset: "textDecorationColor", len: 0, typ: NTI33554440, name: "textDecorationColor", sons: null}, +{kind: 1, offset: "textDecorationLine", len: 0, typ: NTI33554440, name: "textDecorationLine", sons: null}, +{kind: 1, offset: "textDecorationSkipInk", len: 0, typ: NTI33554440, name: "textDecorationSkipInk", sons: null}, +{kind: 1, offset: "textDecorationStyle", len: 0, typ: NTI33554440, name: "textDecorationStyle", sons: null}, +{kind: 1, offset: "textDecorationThickness", len: 0, typ: NTI33554440, name: "textDecorationThickness", sons: null}, +{kind: 1, offset: "textEmphasis", len: 0, typ: NTI33554440, name: "textEmphasis", sons: null}, +{kind: 1, offset: "textEmphasisColor", len: 0, typ: NTI33554440, name: "textEmphasisColor", sons: null}, +{kind: 1, offset: "textEmphasisPosition", len: 0, typ: NTI33554440, name: "textEmphasisPosition", sons: null}, +{kind: 1, offset: "textEmphasisStyle", len: 0, typ: NTI33554440, name: "textEmphasisStyle", sons: null}, +{kind: 1, offset: "textIndent", len: 0, typ: NTI33554440, name: "textIndent", sons: null}, +{kind: 1, offset: "textJustify", len: 0, typ: NTI33554440, name: "textJustify", sons: null}, +{kind: 1, offset: "textOrientation", len: 0, typ: NTI33554440, name: "textOrientation", sons: null}, +{kind: 1, offset: "textOverflow", len: 0, typ: NTI33554440, name: "textOverflow", sons: null}, +{kind: 1, offset: "textRendering", len: 0, typ: NTI33554440, name: "textRendering", sons: null}, +{kind: 1, offset: "textShadow", len: 0, typ: NTI33554440, name: "textShadow", sons: null}, +{kind: 1, offset: "textTransform", len: 0, typ: NTI33554440, name: "textTransform", sons: null}, +{kind: 1, offset: "textUnderlineOffset", len: 0, typ: NTI33554440, name: "textUnderlineOffset", sons: null}, +{kind: 1, offset: "textUnderlinePosition", len: 0, typ: NTI33554440, name: "textUnderlinePosition", sons: null}, +{kind: 1, offset: "top", len: 0, typ: NTI33554440, name: "top", sons: null}, +{kind: 1, offset: "touchAction", len: 0, typ: NTI33554440, name: "touchAction", sons: null}, +{kind: 1, offset: "transform", len: 0, typ: NTI33554440, name: "transform", sons: null}, +{kind: 1, offset: "transformBox", len: 0, typ: NTI33554440, name: "transformBox", sons: null}, +{kind: 1, offset: "transformOrigin", len: 0, typ: NTI33554440, name: "transformOrigin", sons: null}, +{kind: 1, offset: "transformStyle", len: 0, typ: NTI33554440, name: "transformStyle", sons: null}, +{kind: 1, offset: "transition", len: 0, typ: NTI33554440, name: "transition", sons: null}, +{kind: 1, offset: "transitionDelay", len: 0, typ: NTI33554440, name: "transitionDelay", sons: null}, +{kind: 1, offset: "transitionDuration", len: 0, typ: NTI33554440, name: "transitionDuration", sons: null}, +{kind: 1, offset: "transitionProperty", len: 0, typ: NTI33554440, name: "transitionProperty", sons: null}, +{kind: 1, offset: "transitionTimingFunction", len: 0, typ: NTI33554440, name: "transitionTimingFunction", sons: null}, +{kind: 1, offset: "translate", len: 0, typ: NTI33554440, name: "translate", sons: null}, +{kind: 1, offset: "unicodeBidi", len: 0, typ: NTI33554440, name: "unicodeBidi", sons: null}, +{kind: 1, offset: "verticalAlign", len: 0, typ: NTI33554440, name: "verticalAlign", sons: null}, +{kind: 1, offset: "visibility", len: 0, typ: NTI33554440, name: "visibility", sons: null}, +{kind: 1, offset: "whiteSpace", len: 0, typ: NTI33554440, name: "whiteSpace", sons: null}, +{kind: 1, offset: "widows", len: 0, typ: NTI33554440, name: "widows", sons: null}, +{kind: 1, offset: "width", len: 0, typ: NTI33554440, name: "width", sons: null}, +{kind: 1, offset: "willChange", len: 0, typ: NTI33554440, name: "willChange", sons: null}, +{kind: 1, offset: "wordBreak", len: 0, typ: NTI33554440, name: "wordBreak", sons: null}, +{kind: 1, offset: "wordSpacing", len: 0, typ: NTI33554440, name: "wordSpacing", sons: null}, +{kind: 1, offset: "writingMode", len: 0, typ: NTI33554440, name: "writingMode", sons: null}, +{kind: 1, offset: "zIndex", len: 0, typ: NTI33554440, name: "zIndex", sons: null}]}; +NTI620757041.node = NNI620757041; +NTI620757041.base = NTI33555083; +NTI620757040.base = NTI620757041; +var NNI620757013 = {kind: 2, len: 22, offset: 0, typ: null, name: null, sons: [{kind: 1, offset: "attributes", len: 0, typ: NTI620757133, name: "attributes", sons: null}, +{kind: 1, offset: "childNodes", len: 0, typ: NTI620757134, name: "childNodes", sons: null}, +{kind: 1, offset: "children", len: 0, typ: NTI620757135, name: "children", sons: null}, +{kind: 1, offset: "data", len: 0, typ: NTI33554440, name: "data", sons: null}, +{kind: 1, offset: "firstChild", len: 0, typ: NTI620757012, name: "firstChild", sons: null}, +{kind: 1, offset: "lastChild", len: 0, typ: NTI620757012, name: "lastChild", sons: null}, +{kind: 1, offset: "nextSibling", len: 0, typ: NTI620757012, name: "nextSibling", sons: null}, +{kind: 1, offset: "nodeName", len: 0, typ: NTI33554440, name: "nodeName", sons: null}, +{kind: 1, offset: "nodeType", len: 0, typ: NTI620757011, name: "nodeType", sons: null}, +{kind: 1, offset: "nodeValue", len: 0, typ: NTI33554440, name: "nodeValue", sons: null}, +{kind: 1, offset: "parentNode", len: 0, typ: NTI620757012, name: "parentNode", sons: null}, +{kind: 1, offset: "content", len: 0, typ: NTI620757012, name: "content", sons: null}, +{kind: 1, offset: "previousSibling", len: 0, typ: NTI620757012, name: "previousSibling", sons: null}, +{kind: 1, offset: "ownerDocument", len: 0, typ: NTI620757014, name: "ownerDocument", sons: null}, +{kind: 1, offset: "innerHTML", len: 0, typ: NTI33554440, name: "innerHTML", sons: null}, +{kind: 1, offset: "outerHTML", len: 0, typ: NTI33554440, name: "outerHTML", sons: null}, +{kind: 1, offset: "innerText", len: 0, typ: NTI33554440, name: "innerText", sons: null}, +{kind: 1, offset: "textContent", len: 0, typ: NTI33554440, name: "textContent", sons: null}, +{kind: 1, offset: "style", len: 0, typ: NTI620757040, name: "style", sons: null}, +{kind: 1, offset: "baseURI", len: 0, typ: NTI33554440, name: "baseURI", sons: null}, +{kind: 1, offset: "parentElement", len: 0, typ: NTI620757016, name: "parentElement", sons: null}, +{kind: 1, offset: "isConnected", len: 0, typ: NTI33554466, name: "isConnected", sons: null}]}; +NTI620757013.node = NNI620757013; +var NNI620756997 = {kind: 2, len: 24, offset: 0, typ: null, name: null, sons: [{kind: 1, offset: "onabort", len: 0, typ: NTI620757092, name: "onabort", sons: null}, +{kind: 1, offset: "onblur", len: 0, typ: NTI620757093, name: "onblur", sons: null}, +{kind: 1, offset: "onchange", len: 0, typ: NTI620757094, name: "onchange", sons: null}, +{kind: 1, offset: "onclick", len: 0, typ: NTI620757095, name: "onclick", sons: null}, +{kind: 1, offset: "ondblclick", len: 0, typ: NTI620757096, name: "ondblclick", sons: null}, +{kind: 1, offset: "onerror", len: 0, typ: NTI620757097, name: "onerror", sons: null}, +{kind: 1, offset: "onfocus", len: 0, typ: NTI620757098, name: "onfocus", sons: null}, +{kind: 1, offset: "onkeydown", len: 0, typ: NTI620757099, name: "onkeydown", sons: null}, +{kind: 1, offset: "onkeypress", len: 0, typ: NTI620757100, name: "onkeypress", sons: null}, +{kind: 1, offset: "onkeyup", len: 0, typ: NTI620757101, name: "onkeyup", sons: null}, +{kind: 1, offset: "onload", len: 0, typ: NTI620757102, name: "onload", sons: null}, +{kind: 1, offset: "onmousedown", len: 0, typ: NTI620757103, name: "onmousedown", sons: null}, +{kind: 1, offset: "onmousemove", len: 0, typ: NTI620757104, name: "onmousemove", sons: null}, +{kind: 1, offset: "onmouseout", len: 0, typ: NTI620757105, name: "onmouseout", sons: null}, +{kind: 1, offset: "onmouseover", len: 0, typ: NTI620757106, name: "onmouseover", sons: null}, +{kind: 1, offset: "onmouseup", len: 0, typ: NTI620757107, name: "onmouseup", sons: null}, +{kind: 1, offset: "onreset", len: 0, typ: NTI620757108, name: "onreset", sons: null}, +{kind: 1, offset: "onselect", len: 0, typ: NTI620757109, name: "onselect", sons: null}, +{kind: 1, offset: "onstorage", len: 0, typ: NTI620757110, name: "onstorage", sons: null}, +{kind: 1, offset: "onsubmit", len: 0, typ: NTI620757111, name: "onsubmit", sons: null}, +{kind: 1, offset: "onunload", len: 0, typ: NTI620757112, name: "onunload", sons: null}, +{kind: 1, offset: "onloadstart", len: 0, typ: NTI620757113, name: "onloadstart", sons: null}, +{kind: 1, offset: "onprogress", len: 0, typ: NTI620757114, name: "onprogress", sons: null}, +{kind: 1, offset: "onloadend", len: 0, typ: NTI620757115, name: "onloadend", sons: null}]}; +NTI620756997.node = NNI620756997; +NTI620756997.base = NTI33555083; +NTI620757013.base = NTI620756997; +NTI620757012.base = NTI620757013; +NTI620757436.base = NTI620757012; +NTI486539822.base = NTI33554440; +var NNI637534222 = {kind: 2, len: 2, offset: 0, typ: null, name: null, sons: [{kind: 1, offset: "Field0", len: 0, typ: NTI33554456, name: "Field0", sons: null}, +{kind: 1, offset: "Field1", len: 0, typ: NTI33554466, name: "Field1", sons: null}]}; +NTI637534222.node = NNI637534222; + +function makeNimstrLit(c_33556801) { + var result = []; + for (var i = 0; i < c_33556801.length; ++i) { + result[i] = c_33556801.charCodeAt(i); + } + return result; + + + +} + +function toJSStr(s_33556807) { + var Temporary5; + var Temporary7; + + var result_33556808 = null; + + var res_33556842 = newSeq_33556825((s_33556807).length); + var i_33556843 = 0; + var j_33556844 = 0; + Label1: do { + Label2: while (true) { + if (!(i_33556843 < (s_33556807).length)) break Label2; + var c_33556845 = s_33556807[i_33556843]; + if ((c_33556845 < 128)) { + res_33556842[j_33556844] = String.fromCharCode(c_33556845); + i_33556843 += 1; + } + else { + var helper_33556857 = newSeq_33556825(0); + Label3: do { + Label4: while (true) { + if (!true) break Label4; + var code_33556858 = c_33556845.toString(16); + if ((((code_33556858) == null ? 0 : (code_33556858).length) == 1)) { + helper_33556857.push("%0");; + } + else { + helper_33556857.push("%");; + } + + helper_33556857.push(code_33556858);; + i_33556843 += 1; + if (((s_33556807).length <= i_33556843)) Temporary5 = true; else { Temporary5 = (s_33556807[i_33556843] < 128); } if (Temporary5) { + break Label3; + } + + c_33556845 = s_33556807[i_33556843]; + } + } while (false); +++excHandler; + Temporary7 = framePtr; + try { + res_33556842[j_33556844] = decodeURIComponent(helper_33556857.join("")); +--excHandler; +} catch (EXCEPTION) { + var prevJSError = lastJSError; + lastJSError = EXCEPTION; + --excHandler; + framePtr = Temporary7; + res_33556842[j_33556844] = helper_33556857.join(""); + lastJSError = prevJSError; + } finally { + framePtr = Temporary7; + } + } + + j_33556844 += 1; + } + } while (false); + if (res_33556842.length < j_33556844) { for (var i = res_33556842.length ; i < j_33556844 ; ++i) res_33556842.push(null); } + else { res_33556842.length = j_33556844; }; + result_33556808 = res_33556842.join(""); + + return result_33556808; + +} + +function raiseException(e_33556667, ename_33556668) { + e_33556667.name = ename_33556668; + if ((excHandler == 0)) { + unhandledException(e_33556667); + } + + throw e_33556667; + + +} + +function addInt(a_33556940, b_33556941) { + var result = a_33556940 + b_33556941; + checkOverflowInt(result); + return result; + + + +} + +function mnewString(len_33556893) { + return new Array(len_33556893); + + + +} + +function chckRange(i_33557189, a_33557190, b_33557191) { + var Temporary1; + + var result_33557192 = 0; + + BeforeRet: do { + if (!(a_33557190 <= i_33557189)) Temporary1 = false; else { Temporary1 = (i_33557189 <= b_33557191); } if (Temporary1) { + result_33557192 = i_33557189; + break BeforeRet; + } + else { + raiseRangeError(); + } + + } while (false); + + return result_33557192; + +} + +function setConstr() { + var result = {}; + for (var i = 0; i < arguments.length; ++i) { + var x = arguments[i]; + if (typeof(x) == "object") { + for (var j = x[0]; j <= x[1]; ++j) { + result[j] = true; + } + } else { + result[x] = true; + } + } + return result; + + + +} +var ConstSet1 = setConstr(17, 16, 4, 18, 27, 19, 23, 22, 21); + +function nimCopy(dest_33557140, src_33557141, ti_33557142) { + var result_33557151 = null; + + switch (ti_33557142.kind) { + case 21: + case 22: + case 23: + case 5: + if (!(isFatPointer_33557131(ti_33557142))) { + result_33557151 = src_33557141; + } + else { + result_33557151 = [src_33557141[0], src_33557141[1]]; + } + + break; + case 19: + if (dest_33557140 === null || dest_33557140 === undefined) { + dest_33557140 = {}; + } + else { + for (var key in dest_33557140) { delete dest_33557140[key]; } + } + for (var key in src_33557141) { dest_33557140[key] = src_33557141[key]; } + result_33557151 = dest_33557140; + + break; + case 18: + case 17: + if (!((ti_33557142.base == null))) { + result_33557151 = nimCopy(dest_33557140, src_33557141, ti_33557142.base); + } + else { + if ((ti_33557142.kind == 17)) { + result_33557151 = (dest_33557140 === null || dest_33557140 === undefined) ? {m_type: ti_33557142} : dest_33557140; + } + else { + result_33557151 = (dest_33557140 === null || dest_33557140 === undefined) ? {} : dest_33557140; + } + } + nimCopyAux(result_33557151, src_33557141, ti_33557142.node); + break; + case 24: + case 4: + case 27: + case 16: + if (src_33557141 === null) { + result_33557151 = null; + } + else { + if (dest_33557140 === null || dest_33557140 === undefined || dest_33557140.length != src_33557141.length) { + dest_33557140 = new Array(src_33557141.length); + } + result_33557151 = dest_33557140; + for (var i = 0; i < src_33557141.length; ++i) { + result_33557151[i] = nimCopy(result_33557151[i], src_33557141[i], ti_33557142.base); + } + } + + break; + case 28: + if (src_33557141 !== null) { + result_33557151 = src_33557141.slice(0); + } + + break; + default: + result_33557151 = src_33557141; + break; + } + + return result_33557151; + +} + +function chckIndx(i_33557184, a_33557185, b_33557186) { + var Temporary1; + + var result_33557187 = 0; + + BeforeRet: do { + if (!(a_33557185 <= i_33557184)) Temporary1 = false; else { Temporary1 = (i_33557184 <= b_33557186); } if (Temporary1) { + result_33557187 = i_33557184; + break BeforeRet; + } + else { + raiseIndexError(i_33557184, a_33557185, b_33557186); + } + + } while (false); + + return result_33557187; + +} + +function subInt(a_33556944, b_33556945) { + var result = a_33556944 - b_33556945; + checkOverflowInt(result); + return result; + + + +} +var ConstSet2 = setConstr([65, 90]); +var ConstSet3 = setConstr(95, 32, 46); +var ConstSet4 = setConstr(95, 32, 46); + +function mulInt(a_33556948, b_33556949) { + var result = a_33556948 * b_33556949; + checkOverflowInt(result); + return result; + + + +} +var ConstSet5 = setConstr([97, 122]); +var ConstSet6 = setConstr([65, 90], [97, 122]); +var ConstSet7 = setConstr([97, 122]); +var ConstSet8 = setConstr([65, 90]); +var ConstSet9 = setConstr([65, 90], [97, 122]); + +function nimMax(a_33556998, b_33556999) { + var Temporary1; + + var result_33557000 = 0; + + BeforeRet: do { + if ((b_33556999 <= a_33556998)) { + Temporary1 = a_33556998; + } + else { + Temporary1 = b_33556999; + } + + result_33557000 = Temporary1; + break BeforeRet; + } while (false); + + return result_33557000; + +} + +function nimMin(a_33556994, b_33556995) { + var Temporary1; + + var result_33556996 = 0; + + BeforeRet: do { + if ((a_33556994 <= b_33556995)) { + Temporary1 = a_33556994; + } + else { + Temporary1 = b_33556995; + } + + result_33556996 = Temporary1; + break BeforeRet; + } while (false); + + return result_33556996; + +} + +function addChar(x_33557255, c_33557256) { + x_33557255.push(c_33557256); + + +} +if (!Math.trunc) { + Math.trunc = function(v) { + v = +v; + if (!isFinite(v)) return v; + return (v - v % 1) || (v < 0 ? -0 : v === 0 ? v : 0); + }; +} + +var alternative_486539840 = [null]; + +function add_33556419(x_33556420, x_33556420_Idx, y_33556421) { + if (x_33556420[x_33556420_Idx] === null) { x_33556420[x_33556420_Idx] = []; } + var off = x_33556420[x_33556420_Idx].length; + x_33556420[x_33556420_Idx].length += y_33556421.length; + for (var i = 0; i < y_33556421.length; ++i) { + x_33556420[x_33556420_Idx][off+i] = y_33556421.charCodeAt(i); + } + + + +} + +function newSeq_33556825(len_33556827) { + var result_33556828 = []; + + result_33556828 = new Array(len_33556827); for (var i = 0 ; i < len_33556827 ; ++i) { result_33556828[i] = null; } + return result_33556828; + +} + +function unhandledException(e_33556663) { + var buf_33556664 = [[]]; + if (!(((e_33556663.message).length == 0))) { + buf_33556664[0].push.apply(buf_33556664[0], makeNimstrLit("Error: unhandled exception: "));; + buf_33556664[0].push.apply(buf_33556664[0], e_33556663.message);; + } + else { + buf_33556664[0].push.apply(buf_33556664[0], makeNimstrLit("Error: unhandled exception"));; + } + + buf_33556664[0].push.apply(buf_33556664[0], makeNimstrLit(" ["));; + add_33556419(buf_33556664, 0, e_33556663.name); + buf_33556664[0].push.apply(buf_33556664[0], makeNimstrLit("]\x0A"));; + var cbuf_33556665 = toJSStr(buf_33556664[0]); + framePtr = null; + if (typeof(Error) !== "undefined") { + throw new Error(cbuf_33556665); + } + else { + throw cbuf_33556665; + } + + + +} + +function raiseOverflow() { + raiseException({message: makeNimstrLit("over- or underflow"), parent: null, m_type: NTI33555122, name: null, trace: [], up: null}, "OverflowDefect"); + + +} + +function checkOverflowInt(a_33556938) { + if (a_33556938 > 2147483647 || a_33556938 < -2147483648) raiseOverflow(); + + + +} + +function isWhitespace_486539572(text_486539573) { + return !/[^\s]/.test(text_486539573); + + + +} + +function isWhitespace_486539575(x_486539576) { + var Temporary1; + var Temporary2; + + var result_486539577 = false; + + if (!(x_486539576.nodeName == "#text")) Temporary2 = false; else { Temporary2 = isWhitespace_486539572(x_486539576.textContent); } if (Temporary2) Temporary1 = true; else { Temporary1 = (x_486539576.nodeName == "#comment"); } result_486539577 = Temporary1; + + return result_486539577; + +} + +function raiseRangeError() { + raiseException({message: makeNimstrLit("value out of range"), parent: null, m_type: NTI33555130, name: null, trace: [], up: null}, "RangeDefect"); + + +} + +function addChars_251658415(result_251658417, result_251658417_Idx, x_251658418, start_251658419, n_251658420) { + var old_251658421 = (result_251658417[result_251658417_Idx]).length; + (result_251658417[result_251658417_Idx].length = chckRange(addInt(old_251658421, n_251658420), 0, 2147483647)); + Label1: do { + var iHEX60gensym4_251658435 = 0; + var i_486539890 = 0; + Label2: do { + Label3: while (true) { + if (!(i_486539890 < n_251658420)) break Label3; + iHEX60gensym4_251658435 = i_486539890; + result_251658417[result_251658417_Idx][chckIndx(addInt(old_251658421, iHEX60gensym4_251658435), 0, (result_251658417[result_251658417_Idx]).length - 1)] = x_251658418.charCodeAt(chckIndx(addInt(start_251658419, iHEX60gensym4_251658435), 0, (x_251658418).length - 1)); + i_486539890 = addInt(i_486539890, 1); + } + } while (false); + } while (false); + + +} + +function addChars_251658411(result_251658413, result_251658413_Idx, x_251658414) { + addChars_251658415(result_251658413, result_251658413_Idx, x_251658414, 0, ((x_251658414) == null ? 0 : (x_251658414).length)); + + +} + +function addInt_251658436(result_251658437, result_251658437_Idx, x_251658438) { + addChars_251658411(result_251658437, result_251658437_Idx, ((x_251658438) + "")); + + +} + +function addInt_251658457(result_251658458, result_251658458_Idx, x_251658459) { + addInt_251658436(result_251658458, result_251658458_Idx, x_251658459); + + +} + +function HEX24_335544323(x_335544324) { + var result_335544325 = [[]]; + + addInt_251658457(result_335544325, 0, x_335544324); + + return result_335544325[0]; + +} + +function isFatPointer_33557131(ti_33557132) { + var result_33557133 = false; + + BeforeRet: do { + result_33557133 = !((ConstSet1[ti_33557132.base.kind] != undefined)); + break BeforeRet; + } while (false); + + return result_33557133; + +} + +function nimCopyAux(dest_33557144, src_33557145, n_33557146) { + switch (n_33557146.kind) { + case 0: + break; + case 1: + dest_33557144[n_33557146.offset] = nimCopy(dest_33557144[n_33557146.offset], src_33557145[n_33557146.offset], n_33557146.typ); + + break; + case 2: + for (var i = 0; i < n_33557146.sons.length; i++) { + nimCopyAux(dest_33557144, src_33557145, n_33557146.sons[i]); + } + + break; + case 3: + dest_33557144[n_33557146.offset] = nimCopy(dest_33557144[n_33557146.offset], src_33557145[n_33557146.offset], n_33557146.typ); + for (var i = 0; i < n_33557146.sons.length; ++i) { + nimCopyAux(dest_33557144, src_33557145, n_33557146.sons[i][1]); + } + + break; + } + + +} + +function raiseIndexError(i_33556754, a_33556755, b_33556756) { + var Temporary1; + + if ((b_33556756 < a_33556755)) { + Temporary1 = makeNimstrLit("index out of bounds, the container is empty"); + } + else { + Temporary1 = (makeNimstrLit("index ") || []).concat(HEX24_335544323(i_33556754) || [],makeNimstrLit(" not in ") || [],HEX24_335544323(a_33556755) || [],makeNimstrLit(" .. ") || [],HEX24_335544323(b_33556756) || []); + } + + raiseException({message: nimCopy(null, Temporary1, NTI33554439), parent: null, m_type: NTI33555128, name: null, trace: [], up: null}, "IndexDefect"); + + +} + +function toToc_486539578(x_486539579, father_486539580) { + var Temporary5; + var Temporary6; + var Temporary7; + var Temporary8; + var Temporary15; + + if ((x_486539579.nodeName == "UL")) { + var f_486539588 = {heading: null, kids: [], sortId: (father_486539580.kids).length, doSort: false}; + var i_486539589 = 0; + Label1: do { + Label2: while (true) { + if (!(i_486539589 < x_486539579.childNodes.length)) break Label2; + var nxt_486539590 = addInt(i_486539589, 1); + Label3: do { + Label4: while (true) { + if (!(nxt_486539590 < x_486539579.childNodes.length)) Temporary5 = false; else { Temporary5 = isWhitespace_486539575(x_486539579.childNodes[nxt_486539590]); } if (!Temporary5) break Label4; + nxt_486539590 = addInt(nxt_486539590, 1); + } + } while (false); + if (!(nxt_486539590 < x_486539579.childNodes.length)) Temporary8 = false; else { Temporary8 = (x_486539579.childNodes[i_486539589].nodeName == "LI"); } if (!Temporary8) Temporary7 = false; else { Temporary7 = (x_486539579.childNodes[i_486539589].childNodes.length == 1); } if (!Temporary7) Temporary6 = false; else { Temporary6 = (x_486539579.childNodes[nxt_486539590].nodeName == "UL"); } if (Temporary6) { + var e_486539602 = {heading: x_486539579.childNodes[i_486539589].childNodes[0], kids: [], sortId: (f_486539588.kids).length, doSort: false}; + var it_486539603 = x_486539579.childNodes[nxt_486539590]; + Label9: do { + var j_486539608 = 0; + var colontmp__486539869 = 0; + colontmp__486539869 = it_486539603.childNodes.length; + var i_486539870 = 0; + Label10: do { + Label11: while (true) { + if (!(i_486539870 < colontmp__486539869)) break Label11; + j_486539608 = i_486539870; + toToc_486539578(it_486539603.childNodes[j_486539608], e_486539602); + i_486539870 = addInt(i_486539870, 1); + } + } while (false); + } while (false); + f_486539588.kids.push(e_486539602);; + i_486539589 = addInt(nxt_486539590, 1); + } + else { + toToc_486539578(x_486539579.childNodes[i_486539589], f_486539588); + i_486539589 = addInt(i_486539589, 1); + } + + } + } while (false); + father_486539580.kids.push(f_486539588);; + } + else { + if (isWhitespace_486539575(x_486539579)) { + } + else { + if ((x_486539579.nodeName == "LI")) { + var idx_486539625 = []; + Label12: do { + var i_486539630 = 0; + var colontmp__486539873 = 0; + colontmp__486539873 = x_486539579.childNodes.length; + var i_486539874 = 0; + Label13: do { + Label14: while (true) { + if (!(i_486539874 < colontmp__486539873)) break Label14; + i_486539630 = i_486539874; + if (!(isWhitespace_486539575(x_486539579.childNodes[i_486539630]))) { + idx_486539625.push(i_486539630);; + } + + i_486539874 = addInt(i_486539874, 1); + } + } while (false); + } while (false); + if (!((idx_486539625).length == 2)) Temporary15 = false; else { Temporary15 = (x_486539579.childNodes[idx_486539625[chckIndx(1, 0, (idx_486539625).length - 1)]].nodeName == "UL"); } if (Temporary15) { + var e_486539646 = {heading: x_486539579.childNodes[idx_486539625[chckIndx(0, 0, (idx_486539625).length - 1)]], kids: [], sortId: (father_486539580.kids).length, doSort: false}; + var it_486539647 = x_486539579.childNodes[idx_486539625[chckIndx(1, 0, (idx_486539625).length - 1)]]; + Label16: do { + var j_486539652 = 0; + var colontmp__486539877 = 0; + colontmp__486539877 = it_486539647.childNodes.length; + var i_486539878 = 0; + Label17: do { + Label18: while (true) { + if (!(i_486539878 < colontmp__486539877)) break Label18; + j_486539652 = i_486539878; + toToc_486539578(it_486539647.childNodes[j_486539652], e_486539646); + i_486539878 = addInt(i_486539878, 1); + } + } while (false); + } while (false); + father_486539580.kids.push(e_486539646);; + } + else { + Label19: do { + var i_486539661 = 0; + var colontmp__486539881 = 0; + colontmp__486539881 = x_486539579.childNodes.length; + var i_486539882 = 0; + Label20: do { + Label21: while (true) { + if (!(i_486539882 < colontmp__486539881)) break Label21; + i_486539661 = i_486539882; + toToc_486539578(x_486539579.childNodes[i_486539661], father_486539580); + i_486539882 = addInt(i_486539882, 1); + } + } while (false); + } while (false); + } + + } + else { + father_486539580.kids.push({heading: x_486539579, kids: [], sortId: (father_486539580.kids).length, doSort: false});; + } + }} + + +} + +function extractItems_486539398(x_486539399, heading_486539400, items_486539401, items_486539401_Idx) { + var Temporary1; + + BeforeRet: do { + if ((x_486539399 == null)) { + break BeforeRet; + } + + if (!!((x_486539399.heading == null))) Temporary1 = false; else { Temporary1 = (x_486539399.heading.textContent == heading_486539400); } if (Temporary1) { + Label2: do { + var i_486539418 = 0; + var colontmp__486539893 = 0; + colontmp__486539893 = (x_486539399.kids).length; + var i_486539894 = 0; + Label3: do { + Label4: while (true) { + if (!(i_486539894 < colontmp__486539893)) break Label4; + i_486539418 = i_486539894; + items_486539401[items_486539401_Idx].push(x_486539399.kids[chckIndx(i_486539418, 0, (x_486539399.kids).length - 1)].heading);; + i_486539894 = addInt(i_486539894, 1); + } + } while (false); + } while (false); + } + else { + Label5: do { + var i_486539430 = 0; + var colontmp__486539897 = 0; + colontmp__486539897 = (x_486539399.kids).length; + var i_486539898 = 0; + Label6: do { + Label7: while (true) { + if (!(i_486539898 < colontmp__486539897)) break Label7; + i_486539430 = i_486539898; + var it_486539431 = x_486539399.kids[chckIndx(i_486539430, 0, (x_486539399.kids).length - 1)]; + extractItems_486539398(it_486539431, heading_486539400, items_486539401, items_486539401_Idx); + i_486539898 = addInt(i_486539898, 1); + } + } while (false); + } while (false); + } + + } while (false); + + +} + +function tree_486539271(tag_486539272, kids_486539273) { + var result_486539274 = null; + + result_486539274 = document.createElement(toJSStr(tag_486539272)); + Label1: do { + var k_486539287 = null; + var i_486539911 = 0; + Label2: do { + Label3: while (true) { + if (!(i_486539911 < (kids_486539273).length)) break Label3; + k_486539287 = kids_486539273[chckIndx(i_486539911, 0, (kids_486539273).length - 1)]; + result_486539274.appendChild(k_486539287); + i_486539911 = addInt(i_486539911, 1); + } + } while (false); + } while (false); + + return result_486539274; + +} + +function text_486539325(s_486539326) { + var result_486539327 = null; + + result_486539327 = document.createTextNode(s_486539326); + + return result_486539327; + +} + +function sysFatal_218103842(message_218103845) { + raiseException({message: nimCopy(null, message_218103845, NTI33554439), m_type: NTI33555124, parent: null, name: null, trace: [], up: null}, "AssertionDefect"); + + +} + +function raiseAssert_218103840(msg_218103841) { + sysFatal_218103842(msg_218103841); + + +} + +function failedAssertImpl_218103864(msg_218103865) { + raiseAssert_218103840(msg_218103865); + + +} + +function uncovered_486539709(x_486539710) { + var Temporary1; + var Temporary2; + + var result_486539711 = null; + + BeforeRet: do { + if (!((x_486539710.kids).length == 0)) Temporary1 = false; else { Temporary1 = !((x_486539710.heading == null)); } if (Temporary1) { + if (!(x_486539710.heading.hasOwnProperty('__karaxMarker__'))) { + Temporary2 = x_486539710; + } + else { + Temporary2 = null; + } + + result_486539711 = Temporary2; + break BeforeRet; + } + + result_486539711 = {heading: x_486539710.heading, kids: [], sortId: x_486539710.sortId, doSort: x_486539710.doSort}; + Label3: do { + var i_486539730 = 0; + var colontmp__486539918 = 0; + colontmp__486539918 = (x_486539710.kids).length; + var i_486539919 = 0; + Label4: do { + Label5: while (true) { + if (!(i_486539919 < colontmp__486539918)) break Label5; + i_486539730 = i_486539919; + var y_486539731 = uncovered_486539709(x_486539710.kids[chckIndx(i_486539730, 0, (x_486539710.kids).length - 1)]); + if (!((y_486539731 == null))) { + result_486539711.kids.push(y_486539731);; + } + + i_486539919 = addInt(i_486539919, 1); + } + } while (false); + } while (false); + if (((result_486539711.kids).length == 0)) { + result_486539711 = null; + } + + } while (false); + + return result_486539711; + +} + +function mergeTocs_486539743(orig_486539744, news_486539745) { + var result_486539746 = null; + + result_486539746 = uncovered_486539709(orig_486539744); + if ((result_486539746 == null)) { + result_486539746 = news_486539745; + } + else { + Label1: do { + var i_486539758 = 0; + var colontmp__486539914 = 0; + colontmp__486539914 = (news_486539745.kids).length; + var i_486539915 = 0; + Label2: do { + Label3: while (true) { + if (!(i_486539915 < colontmp__486539914)) break Label3; + i_486539758 = i_486539915; + result_486539746.kids.push(news_486539745.kids[chckIndx(i_486539758, 0, (news_486539745.kids).length - 1)]);; + i_486539915 = addInt(i_486539915, 1); + } + } while (false); + } while (false); + } + + + return result_486539746; + +} + +function buildToc_486539763(orig_486539764, types_486539765, procs_486539766) { + var Temporary7; + + var result_486539767 = null; + + var newStuff_486539772 = {heading: null, kids: [], doSort: true, sortId: 0}; + Label1: do { + var t_486539794 = null; + var i_486539906 = 0; + var L_486539907 = (types_486539765).length; + Label2: do { + Label3: while (true) { + if (!(i_486539906 < L_486539907)) break Label3; + t_486539794 = types_486539765[chckIndx(i_486539906, 0, (types_486539765).length - 1)]; + var c_486539799 = {heading: t_486539794.cloneNode(true), kids: [], doSort: true, sortId: 0}; + t_486539794.__karaxMarker__ = true; + Label4: do { + var p_486539803 = null; + var i_486539903 = 0; + var L_486539904 = (procs_486539766).length; + Label5: do { + Label6: while (true) { + if (!(i_486539903 < L_486539904)) break Label6; + p_486539803 = procs_486539766[chckIndx(i_486539903, 0, (procs_486539766).length - 1)]; + if (!(p_486539803.hasOwnProperty('__karaxMarker__'))) { + var xx_486539804 = p_486539803.parentNode.getElementsByClassName("attachedType"); + if (!((xx_486539804).length == 1)) Temporary7 = false; else { Temporary7 = (xx_486539804[chckIndx(0, 0, (xx_486539804).length - 1)].textContent == t_486539794.textContent); } if (Temporary7) { + var q_486539809 = tree_486539271(makeNimstrLit("A"), [text_486539325(p_486539803.title)]); + q_486539809.setAttribute("href", p_486539803.getAttribute("href")); + c_486539799.kids.push({heading: q_486539809, kids: [], sortId: 0, doSort: false});; + p_486539803.__karaxMarker__ = true; + } + + } + + i_486539903 = addInt(i_486539903, 1); + if (!(((procs_486539766).length == L_486539904))) { + failedAssertImpl_218103864(makeNimstrLit("iterators.nim(240, 11) `len(a) == L` the length of the seq changed while iterating over it")); + } + + } + } while (false); + } while (false); + newStuff_486539772.kids.push(c_486539799);; + i_486539906 = addInt(i_486539906, 1); + if (!(((types_486539765).length == L_486539907))) { + failedAssertImpl_218103864(makeNimstrLit("iterators.nim(240, 11) `len(a) == L` the length of the seq changed while iterating over it")); + } + + } + } while (false); + } while (false); + result_486539767 = mergeTocs_486539743(orig_486539764, newStuff_486539772); + + return result_486539767; + +} + +function add_486539315(parent_486539316, kid_486539317) { + var Temporary1; + var Temporary2; + + if (!(parent_486539316.nodeName == "TR")) Temporary1 = false; else { if ((kid_486539317.nodeName == "TD")) Temporary2 = true; else { Temporary2 = (kid_486539317.nodeName == "TH"); } Temporary1 = Temporary2; } if (Temporary1) { + var k_486539318 = document.createElement("TD"); + k_486539318.appendChild(kid_486539317); + parent_486539316.appendChild(k_486539318); + } + else { + parent_486539316.appendChild(kid_486539317); + } + + + +} + +function setClass_486539319(e_486539320, value_486539321) { + e_486539320.setAttribute("class", toJSStr(value_486539321)); + + +} + +function toHtml_486539441(x_486539442, isRoot_486539443) { + var Temporary1; + +function HEX3Aanonymous_486539461(a_486539462, b_486539463) { + var Temporary1; + + var result_486539464 = 0; + + BeforeRet: do { + if (!!((a_486539462.heading == null))) Temporary1 = false; else { Temporary1 = !((b_486539463.heading == null)); } if (Temporary1) { + var x_486539473 = a_486539462.heading.textContent; + var y_486539474 = b_486539463.heading.textContent; + if ((x_486539473 < y_486539474)) { + result_486539464 = -1; + break BeforeRet; + } + + if ((y_486539474 < x_486539473)) { + result_486539464 = 1; + break BeforeRet; + } + + result_486539464 = 0; + break BeforeRet; + } + else { + result_486539464 = subInt(a_486539462.sortId, b_486539463.sortId); + break BeforeRet; + } + + } while (false); + + return result_486539464; + + } + + var result_486539444 = null; + + BeforeRet: do { + if ((x_486539442 == null)) { + result_486539444 = null; + break BeforeRet; + } + + if (((x_486539442.kids).length == 0)) { + if ((x_486539442.heading == null)) { + result_486539444 = null; + break BeforeRet; + } + + result_486539444 = x_486539442.heading.cloneNode(true); + break BeforeRet; + } + + result_486539444 = tree_486539271(makeNimstrLit("DIV"), []); + if (!!((x_486539442.heading == null))) Temporary1 = false; else { Temporary1 = !(x_486539442.heading.hasOwnProperty('__karaxMarker__')); } if (Temporary1) { + add_486539315(result_486539444, x_486539442.heading.cloneNode(true)); + } + + var ul_486539460 = tree_486539271(makeNimstrLit("UL"), []); + if (isRoot_486539443) { + setClass_486539319(ul_486539460, makeNimstrLit("simple simple-toc")); + } + else { + setClass_486539319(ul_486539460, makeNimstrLit("simple")); + } + + if (x_486539442.doSort) { + x_486539442.kids.sort(HEX3Aanonymous_486539461); + } + + Label2: do { + var k_486539503 = null; + var i_486539923 = 0; + var L_486539924 = (x_486539442.kids).length; + Label3: do { + Label4: while (true) { + if (!(i_486539923 < L_486539924)) break Label4; + k_486539503 = x_486539442.kids[chckIndx(i_486539923, 0, (x_486539442.kids).length - 1)]; + var y_486539504 = toHtml_486539441(k_486539503, false); + if (!((y_486539504 == null))) { + add_486539315(ul_486539460, tree_486539271(makeNimstrLit("LI"), [y_486539504])); + } + + i_486539923 = addInt(i_486539923, 1); + if (!(((x_486539442.kids).length == L_486539924))) { + failedAssertImpl_218103864(makeNimstrLit("iterators.nim(240, 11) `len(a) == L` the length of the seq changed while iterating over it")); + } + + } + } while (false); + } while (false); + if (!((ul_486539460.childNodes.length == 0))) { + add_486539315(result_486539444, ul_486539460); + } + + if ((result_486539444.childNodes.length == 0)) { + result_486539444 = null; + } + + } while (false); + + return result_486539444; + +} + +function replaceById_486539330(id_486539331, newTree_486539332) { + var x_486539333 = document.getElementById(id_486539331); + x_486539333.parentNode.replaceChild(newTree_486539332, x_486539333); + newTree_486539332.id = id_486539331; + + +} + +function togglevis_486539841(d_486539842) { + if (d_486539842.style.display == 'none') + d_486539842.style.display = 'inline'; + else + d_486539842.style.display = 'none'; + + + +} + +function groupBy(value_486539844) { + var toc_486539845 = document.getElementById("toc-list"); + if ((alternative_486539840[0] == null)) { + var tt_486539853 = {heading: null, kids: [], sortId: 0, doSort: false}; + toToc_486539578(toc_486539845, tt_486539853); + tt_486539853 = tt_486539853.kids[chckIndx(0, 0, (tt_486539853.kids).length - 1)]; + var types_486539858 = [[]]; + var procs_486539863 = [[]]; + extractItems_486539398(tt_486539853, "Types", types_486539858, 0); + extractItems_486539398(tt_486539853, "Procs", procs_486539863, 0); + extractItems_486539398(tt_486539853, "Converters", procs_486539863, 0); + extractItems_486539398(tt_486539853, "Methods", procs_486539863, 0); + extractItems_486539398(tt_486539853, "Templates", procs_486539863, 0); + extractItems_486539398(tt_486539853, "Macros", procs_486539863, 0); + extractItems_486539398(tt_486539853, "Iterators", procs_486539863, 0); + var ntoc_486539864 = buildToc_486539763(tt_486539853, types_486539858[0], procs_486539863[0]); + var x_486539865 = toHtml_486539441(ntoc_486539864, true); + alternative_486539840[0] = tree_486539271(makeNimstrLit("DIV"), [x_486539865]); + } + + if ((value_486539844 == "type")) { + replaceById_486539330("tocRoot", alternative_486539840[0]); + } + else { + replaceById_486539330("tocRoot", tree_486539271(makeNimstrLit("DIV"), [])); + } + + togglevis_486539841(document.getElementById("toc-list")); + + +} +var db_486539926 = [[]]; +var contents_486539927 = [[]]; +var oldtoc_486540074 = [null]; +var timer_486540075 = [null]; + +function nsuToLowerAsciiChar(c_654311492) { + var result_654311493 = 0; + + if ((ConstSet2[c_654311492] != undefined)) { + result_654311493 = (c_654311492 ^ 32); + } + else { + result_654311493 = c_654311492; + } + + + return result_654311493; + +} + +function fuzzyMatch_637534224(pattern_637534225, str_637534226) { + var Temporary4; + var Temporary5; + var Temporary6; + var Temporary7; + var Temporary8; + + var result_637534229 = {Field0: 0, Field1: false}; + + var scoreState_637534230 = -100; + var headerMatched_637534231 = false; + var unmatchedLeadingCharCount_637534232 = 0; + var consecutiveMatchCount_637534233 = 0; + var strIndex_637534234 = 0; + var patIndex_637534235 = 0; + var score_637534236 = 0; + Label1: do { + Label2: while (true) { + if (!((strIndex_637534234 < ((str_637534226) == null ? 0 : (str_637534226).length)) && (patIndex_637534235 < ((pattern_637534225) == null ? 0 : (pattern_637534225).length)))) break Label2; + Label3: do { + var patternChar_637534239 = nsuToLowerAsciiChar(pattern_637534225.charCodeAt(chckIndx(patIndex_637534235, 0, (pattern_637534225).length - 1))); + var strChar_637534240 = nsuToLowerAsciiChar(str_637534226.charCodeAt(chckIndx(strIndex_637534234, 0, (str_637534226).length - 1))); + if ((ConstSet3[patternChar_637534239] != undefined)) { + patIndex_637534235 = addInt(patIndex_637534235, 1); + break Label3; + } + + if ((ConstSet4[strChar_637534240] != undefined)) { + strIndex_637534234 = addInt(strIndex_637534234, 1); + break Label3; + } + + if ((!(headerMatched_637534231) && (strChar_637534240 == 58))) { + headerMatched_637534231 = true; + scoreState_637534230 = -100; + score_637534236 = ((Math.floor((0.5 * score_637534236))) | 0); + patIndex_637534235 = 0; + strIndex_637534234 = addInt(strIndex_637534234, 1); + break Label3; + } + + if ((strChar_637534240 == patternChar_637534239)) { + switch (scoreState_637534230) { + case -100: + case 20: + scoreState_637534230 = 10; + break; + case 0: + scoreState_637534230 = 5; + score_637534236 = addInt(score_637534236, scoreState_637534230); + break; + case 10: + case 5: + consecutiveMatchCount_637534233 = addInt(consecutiveMatchCount_637534233, 1); + scoreState_637534230 = 5; + score_637534236 = addInt(score_637534236, mulInt(5, consecutiveMatchCount_637534233)); + if ((scoreState_637534230 == 10)) { + score_637534236 = addInt(score_637534236, 10); + } + + var onBoundary_637534292 = (patIndex_637534235 == ((pattern_637534225) == null ? -1 : (pattern_637534225).length - 1)); + if ((!(onBoundary_637534292) && (strIndex_637534234 < ((str_637534226) == null ? -1 : (str_637534226).length - 1)))) { + var nextPatternChar_637534293 = nsuToLowerAsciiChar(pattern_637534225.charCodeAt(chckIndx(addInt(patIndex_637534235, 1), 0, (pattern_637534225).length - 1))); + var nextStrChar_637534294 = nsuToLowerAsciiChar(str_637534226.charCodeAt(chckIndx(addInt(strIndex_637534234, 1), 0, (str_637534226).length - 1))); + if (!!((ConstSet5[nextStrChar_637534294] != undefined))) Temporary4 = false; else { Temporary4 = !((nextStrChar_637534294 == nextPatternChar_637534293)); } onBoundary_637534292 = Temporary4; + } + + if (onBoundary_637534292) { + scoreState_637534230 = 20; + score_637534236 = addInt(score_637534236, scoreState_637534230); + } + + break; + case -1: + case -3: + if (!((ConstSet6[str_637534226.charCodeAt(chckIndx(subInt(strIndex_637534234, 1), 0, (str_637534226).length - 1))] != undefined))) Temporary5 = true; else { if (!(ConstSet7[str_637534226.charCodeAt(chckIndx(subInt(strIndex_637534234, 1), 0, (str_637534226).length - 1))] != undefined)) Temporary6 = false; else { Temporary6 = (ConstSet8[str_637534226.charCodeAt(chckIndx(strIndex_637534234, 0, (str_637534226).length - 1))] != undefined); } Temporary5 = Temporary6; } var isLeadingChar_637534318 = Temporary5; + if (isLeadingChar_637534318) { + scoreState_637534230 = 10; + } + else { + scoreState_637534230 = 0; + score_637534236 = addInt(score_637534236, scoreState_637534230); + } + + break; + } + patIndex_637534235 = addInt(patIndex_637534235, 1); + } + else { + switch (scoreState_637534230) { + case -100: + scoreState_637534230 = -3; + score_637534236 = addInt(score_637534236, scoreState_637534230); + break; + case 5: + scoreState_637534230 = -1; + score_637534236 = addInt(score_637534236, scoreState_637534230); + consecutiveMatchCount_637534233 = 0; + break; + case -3: + if ((unmatchedLeadingCharCount_637534232 < 3)) { + scoreState_637534230 = -3; + score_637534236 = addInt(score_637534236, scoreState_637534230); + } + + unmatchedLeadingCharCount_637534232 = addInt(unmatchedLeadingCharCount_637534232, 1); + break; + default: + scoreState_637534230 = -1; + score_637534236 = addInt(score_637534236, scoreState_637534230); + break; + } + } + + strIndex_637534234 = addInt(strIndex_637534234, 1); + } while (false); + } + } while (false); + if (!(patIndex_637534235 == ((pattern_637534225) == null ? 0 : (pattern_637534225).length))) Temporary7 = false; else { if ((strIndex_637534234 == ((str_637534226) == null ? 0 : (str_637534226).length))) Temporary8 = true; else { Temporary8 = !((ConstSet9[str_637534226.charCodeAt(chckIndx(strIndex_637534234, 0, (str_637534226).length - 1))] != undefined)); } Temporary7 = Temporary8; } if (Temporary7) { + score_637534236 = addInt(score_637534236, 10); + } + + var colontmp__486540135 = nimMax(0, score_637534236); + var colontmp__486540136 = (0 < score_637534236); + result_637534229 = nimCopy(result_637534229, {Field0: colontmp__486540135, Field1: colontmp__486540136}, NTI637534222); + + return result_637534229; + +} + +function escapeCString_486539930(x_486539931, x_486539931_Idx) { + var s_486539932 = []; + Label1: do { + var c_486539933 = 0; + var iHEX60gensym6_486540139 = 0; + var nHEX60gensym6_486540140 = ((x_486539931[x_486539931_Idx]) == null ? 0 : (x_486539931[x_486539931_Idx]).length); + Label2: do { + Label3: while (true) { + if (!(iHEX60gensym6_486540139 < nHEX60gensym6_486540140)) break Label3; + c_486539933 = x_486539931[x_486539931_Idx].charCodeAt(chckIndx(iHEX60gensym6_486540139, 0, (x_486539931[x_486539931_Idx]).length - 1)); + switch (c_486539933) { + case 60: + s_486539932.push.apply(s_486539932, makeNimstrLit("<"));; + break; + case 62: + s_486539932.push.apply(s_486539932, makeNimstrLit(">"));; + break; + default: + addChar(s_486539932, c_486539933);; + break; + } + iHEX60gensym6_486540139 = addInt(iHEX60gensym6_486540139, 1); + } + } while (false); + } while (false); + x_486539931[x_486539931_Idx] = toJSStr(s_486539932); + + +} + +function text_486539322(s_486539323) { + var result_486539324 = null; + + result_486539324 = document.createTextNode(toJSStr(s_486539323)); + + return result_486539324; + +} + +function dosearch_486539934(value_486539935) { + +function HEX3Aanonymous_486539991(a_486539996, b_486539997) { + var result_486540002 = 0; + + result_486540002 = subInt(b_486539997["Field1"], a_486539996["Field1"]); + + return result_486540002; + + } + + var result_486539936 = null; + + if (((db_486539926[0]).length == 0)) { + var stuff_486539940 = null; + var request = new XMLHttpRequest(); + request.open("GET", "theindex.html", false); + request.send(null); + + var doc = document.implementation.createHTMLDocument("theindex"); + doc.documentElement.innerHTML = request.responseText; + + //parser=new DOMParser(); + //doc=parser.parseFromString("", "text/html"); + + stuff_486539940 = doc.documentElement; + + db_486539926[0] = nimCopy(null, stuff_486539940.getElementsByClassName("reference"), NTI620757436); + contents_486539927[0] = nimCopy(null, [], NTI486539822); + Label1: do { + var ahref_486539965 = null; + var i_486540120 = 0; + var L_486540121 = (db_486539926[0]).length; + Label2: do { + Label3: while (true) { + if (!(i_486540120 < L_486540121)) break Label3; + ahref_486539965 = db_486539926[0][chckIndx(i_486540120, 0, (db_486539926[0]).length - 1)]; + contents_486539927[0].push(ahref_486539965.getAttribute("data-doc-search-tag"));; + i_486540120 = addInt(i_486540120, 1); + if (!(((db_486539926[0]).length == L_486540121))) { + failedAssertImpl_218103864(makeNimstrLit("iterators.nim(240, 11) `len(a) == L` the length of the seq changed while iterating over it")); + } + + } + } while (false); + } while (false); + } + + var ul_486539970 = tree_486539271(makeNimstrLit("UL"), []); + result_486539936 = tree_486539271(makeNimstrLit("DIV"), []); + setClass_486539319(result_486539936, makeNimstrLit("search_results")); + var matches_486539975 = []; + Label4: do { + var i_486539983 = 0; + var colontmp__486540125 = 0; + colontmp__486540125 = (db_486539926[0]).length; + var i_486540126 = 0; + Label5: do { + Label6: while (true) { + if (!(i_486540126 < colontmp__486540125)) break Label6; + i_486539983 = i_486540126; + Label7: do { + var c_486539984 = contents_486539927[0][chckIndx(i_486539983, 0, (contents_486539927[0]).length - 1)]; + if (((c_486539984 == "Examples") || (c_486539984 == "PEG construction"))) { + break Label7; + } + + var colontmp__486540132 = fuzzyMatch_637534224(value_486539935, c_486539984); + var score_486539985 = colontmp__486540132["Field0"]; + var matched_486539986 = colontmp__486540132["Field1"]; + if (matched_486539986) { + matches_486539975.push({Field0: db_486539926[0][chckIndx(i_486539983, 0, (db_486539926[0]).length - 1)], Field1: score_486539985});; + } + + } while (false); + i_486540126 = addInt(i_486540126, 1); + } + } while (false); + } while (false); + matches_486539975.sort(HEX3Aanonymous_486539991); + Label8: do { + var i_486540019 = 0; + var colontmp__486540129 = 0; + colontmp__486540129 = nimMin((matches_486539975).length, 29); + var i_486540130 = 0; + Label9: do { + Label10: while (true) { + if (!(i_486540130 < colontmp__486540129)) break Label10; + i_486540019 = i_486540130; + matches_486539975[chckIndx(i_486540019, 0, (matches_486539975).length - 1)]["Field0"].innerHTML = matches_486539975[chckIndx(i_486540019, 0, (matches_486539975).length - 1)]["Field0"].getAttribute("data-doc-search-tag"); + escapeCString_486539930(matches_486539975[chckIndx(i_486540019, 0, (matches_486539975).length - 1)]["Field0"], "innerHTML"); + add_486539315(ul_486539970, tree_486539271(makeNimstrLit("LI"), [matches_486539975[chckIndx(i_486540019, 0, (matches_486539975).length - 1)]["Field0"]])); + i_486540130 = addInt(i_486540130, 1); + } + } while (false); + } while (false); + if ((ul_486539970.childNodes.length == 0)) { + add_486539315(result_486539936, tree_486539271(makeNimstrLit("B"), [text_486539322(makeNimstrLit("no search results"))])); + } + else { + add_486539315(result_486539936, tree_486539271(makeNimstrLit("B"), [text_486539322(makeNimstrLit("search results"))])); + add_486539315(result_486539936, ul_486539970); + } + + + return result_486539936; + +} + +function search() { + +function wrapper_486540086() { + var elem_486540087 = document.getElementById("searchInput"); + var value_486540088 = elem_486540087.value; + if (!((((value_486540088) == null ? 0 : (value_486540088).length) == 0))) { + if ((oldtoc_486540074[0] == null)) { + oldtoc_486540074[0] = document.getElementById("tocRoot"); + } + + var results_486540092 = dosearch_486539934(value_486540088); + replaceById_486539330("tocRoot", results_486540092); + } + else { + if (!((oldtoc_486540074[0] == null))) { + replaceById_486539330("tocRoot", oldtoc_486540074[0]); + } + } + + + } + + if (!((timer_486540075[0] == null))) { + clearTimeout(timer_486540075[0]); + } + + timer_486540075[0] = setTimeout(wrapper_486540086, 400); + + +} diff --git a/docs/nimdoc.out.css b/docs/nimdoc.out.css new file mode 100644 index 0000000..4abea9c --- /dev/null +++ b/docs/nimdoc.out.css @@ -0,0 +1,1016 @@ +/* +Stylesheet for use with Docutils/rst2html. + +See http://docutils.sf.net/docs/howto/html-stylesheets.html for how to +customize this style sheet. + +Modified from Chad Skeeters' rst2html-style +https://bitbucket.org/cskeeters/rst2html-style/ + +Modified by Boyd Greenfield and narimiran +*/ + +:root { + --primary-background: #fff; + --secondary-background: ghostwhite; + --third-background: #e8e8e8; + --info-background: #50c050; + --warning-background: #c0a000; + --error-background: #e04040; + --border: #dde; + --text: #222; + --anchor: #07b; + --anchor-focus: #607c9f; + --input-focus: #1fa0eb; + --strong: #3c3c3c; + --hint: #9A9A9A; + --nim-sprite-base64: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAN4AAAA9CAYAAADCt9ebAAAACXBIWXMAAAsTAAALEwEAmpwYAAAFFmlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxNDggNzkuMTY0MDM2LCAyMDE5LzA4LzEzLTAxOjA2OjU3ICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgeG1sbnM6cGhvdG9zaG9wPSJodHRwOi8vbnMuYWRvYmUuY29tL3Bob3Rvc2hvcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RFdnQ9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZUV2ZW50IyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgMjEuMCAoV2luZG93cykiIHhtcDpDcmVhdGVEYXRlPSIyMDE5LTEyLTAzVDAxOjAzOjQ4KzAxOjAwIiB4bXA6TW9kaWZ5RGF0ZT0iMjAxOS0xMi0wM1QwMjoyODo0MSswMTowMCIgeG1wOk1ldGFkYXRhRGF0ZT0iMjAxOS0xMi0wM1QwMjoyODo0MSswMTowMCIgZGM6Zm9ybWF0PSJpbWFnZS9wbmciIHBob3Rvc2hvcDpDb2xvck1vZGU9IjMiIHBob3Rvc2hvcDpJQ0NQcm9maWxlPSJzUkdCIElFQzYxOTY2LTIuMSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDozMzM0ZjAxYS0yMDExLWE1NGQtOTVjNy1iOTgxMDFlMDFhMmEiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MzMzNGYwMWEtMjAxMS1hNTRkLTk1YzctYjk4MTAxZTAxYTJhIiB4bXBNTTpPcmlnaW5hbERvY3VtZW50SUQ9InhtcC5kaWQ6MzMzNGYwMWEtMjAxMS1hNTRkLTk1YzctYjk4MTAxZTAxYTJhIj4gPHhtcE1NOkhpc3Rvcnk+IDxyZGY6U2VxPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0iY3JlYXRlZCIgc3RFdnQ6aW5zdGFuY2VJRD0ieG1wLmlpZDozMzM0ZjAxYS0yMDExLWE1NGQtOTVjNy1iOTgxMDFlMDFhMmEiIHN0RXZ0OndoZW49IjIwMTktMTItMDNUMDE6MDM6NDgrMDE6MDAiIHN0RXZ0OnNvZnR3YXJlQWdlbnQ9IkFkb2JlIFBob3Rvc2hvcCAyMS4wIChXaW5kb3dzKSIvPiA8L3JkZjpTZXE+IDwveG1wTU06SGlzdG9yeT4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4PsixkAAAJ5klEQVR4nO2dfbBUZR3HP3vvxVD0zo0ACXxBuQMoQjJ1DfMl0NIhNcuSZqQhfGt6UWtK06xJexkrmywVRTQlHCIdtclC0zBJvYIvvEUgZpc3XyC7RVbKlQu1/fHdbc+uu2fPOfs85+y55/nMnBl2z+5zfnc5v/M8z+8119XVRYroAG4HfgvMT1YUR4MMAa4HLkhakCRoSVqAELwLeBY4C7gF+D6QS1QiR1ROAJ4Dzk9akKQwoXhtwL4GxvHjU8AKoNPz3leAu4HBFq+bAyZZHD9rDAK+BywDDklYlkQxoXhfAtYAEw2MVckQYBHwU6or99nA08BBFq49GngUeBIYaWH8rNEJdAOXA60Jy5I4jSreSOBKYDzwBPCJhiUqcSjwe2BWnc9NLnxuvMFrnwqsAqYBBwBfNzh2FpmNfs9jkhakWcg1aFxZiH5UL3cDnwf+Xue7BwFjgFHAOwuv24tyob3cO0LIshP4EbCn8Pq/wKvA9sLxMvCvOmPsA1yDZnHv/nEv2mM+F0IeR4m8z7lM7tMbUbzj0CxX7YfbAXwaWFJ4PRrNIu9FS9KJyEIZN68CG4DnkRJtLBw7gHHAYuDdNb77EDAjBhkHIk7xKoiqeK3IwjilzuceQJvoZjdQ/AMZaeoZiWYgBXSEwyleBW0Rv3cR9ZUO4LSI48fN2wN+bi5wJNBvUZaBSCaVy48oxpVhwDdMC5ISxpJRh6/DLGEUrxXt29YBQ+2IkwquR76ofZIWxJFegireNLSnm48skFmmDfmiVgJHJyuKI620ADOpbWEcDPwYOZKD7OmyxCTkXL+wzueOiEEWR8poQb60V4A7kLm/yFjgKeALuM1xLfYDbkX+zEGe98cAX0Oui6viF8vR7OS6urragW2UZr21wK+Aiwlu7XPoN3sYOAd4H6WH1SnA0qSEcjQnRT/e1bgnsw16kGPez4/lyCBF48oNwL+TFGSAsgCndI4qFBVvJ0owdZhjL3CnxfHzBo8+YBMyol0CHBijrKbHS/LoA7Yio9sPgJNr/QHekLGR6MffL+KP4SjnHmQxtoXNmbQP+CHyV75hYDzTIWNpWkU8iR5mq71vVsZqXgtcFqNQ/wG2IOtfD8oi6AX+Ujj+isKz8sBrnu+1okyGdmD/wnEgcDClTIdRyJRvI1cvCMciq7At4rj5eoCPAusbHCfLigda/VyKgi+AtyreMGAzykGzQQ/wO+BxSlkCuy1dq8hw5OieUjimYT+x9bHCdWwS1823Ez1EXmhgjKwrXpHzkduuanbCtzGX+NkPPAj8GincNkPjNkIO5dadUjiOB95m+BonopQpm8R58/0JJbHWy2eshVM8sRvdbyurKV4Hmoka2WA/iwwLP6d+QmzSdKC92GzK/W9R+Q3woQbHCELcN991wJcjftcpXolngKm18vFmoVonYcgDv0Qz5pqGREuOTuA8lPYUZbndh0LJNpkUqgZx33xvomim7RG+6xSvnOm1gqQXoyiMoKxFs8VZpFfpQHvQK4HDUPnAsBa9bxGP0tUjF+IYCkxFew+/G3owdq20pgjzt3uPRscs/o43IaOhH2f4ZaAPRyZQP6vgbuCbyGext87F0sgIZFI/N8BnlwBnolovcWAjq/uzwM0+55cBJ0UYN84ZL+rfbnLMM4FfUDv7Z1XlCe8FetETbleNL7+CZrnvMjCVDuTOOA84Hf+96ga0PC8qXY50FQsuMg+41+d8p885R4n7gdt8zo+qvDkmUF4fZQXwEbS+99KDMhlWkw0eALqQglXyDDCdcovf+4lv5jPNXJ9zWc/FDMMdPudGVCreRlTWwVtWbynwYVQQCFSp61Q042WJLUjB1nneuw8tvXo97x1Lugvg+j1Mo9boySLVHtJFWqsthx5GlbSGeN5bigrHdqPl52Zj4qWLXvTQWY4KOX2ccgPMBLRcuy9+0YzhguXN4GuYq2Zc2R/NZg+hfYt3/9ZCepdQthmB4vIWIYOTbWyWzGt2Y0izG1fqjlltxnsdpbPMRMmd3lqTTumqMw7FZY5G5mSHw5dalreiRWYGWjbZ7gYUlFa0xOtIWA4vk1E6zWEoI+FvyYrjSAO1FG8DCmQGKd+DJFsGogWVVFiP/GWbga9Svg9NgtPQvnd04fUNCcriSBF+vqZ5nn9PQ+Xs4q401oI6EP0R+BkyXoAeAtcgBfwidnvkVaMVFTO6n1JoWTfqiONw1MVP8e6l3GVwOPJZXW5VItGGiuduAu5CZdOrMQJ1CHqpIFccS+LxaD/3Hcr7vF0Xw7UdAwQ/xduLGkJ6aUMhVAuwU006B3wM+ZLmozJ5QRhWkGs9yjKw1fhwDsq8eE/F+y+i1CeHIxD1wppupXrA5xyUOjQHMzU3cyjTeS2aaaN2Fzoc1bhch3xspuqBTkDulQVUz1q4mYEbNuewQD3FexGFS1VjOLoRHwOOinj9HAooXY2CSidHHKeSI5GFcRWNdSxqR7VH1iHHeTV24R+X53C8hSCBvPPqnD8B+AOygn6OYAm0ORSGthLl8B0d4DtRmIKsoMsJF1U/Hi1dt6DusIN8PrsIlUdwOAITpDFlC6q3MTbgmHm011qGepOvQSXPipyOCujW6rxqk0dRWYsVFe8PRSn5JxWOoEvdfOGzfnF5tnCRK+bGi33MoB1hL0U5d1H5J5oVD6A5mp8sQS6KSWh5e0jEcR4BPmhKqJA4xTM3XuxjBlW8DuRacDU3y0myNbNTPHPjxT5m0GTN15A/zVFiI+HKYzgc/ydMlrRfgmQWuYn0F91xJEQYxVuDnMcOrQAWJi2EI72ErQviwqLEQpQ+5XBEIqzi3YWLwF+BMiMcjshEqYR1Gdk1KmxBsaR9SQviSDdRFK8fxVU+YliWZmcbcq7vSFoQR/qJWvuxD0WgLDYoSzPzAqowtjVhORwDhEaKru4GPoliGgcyy4Hj0DLT4TBCo9WO88jQ8Bns97lLghvRTOfqqDiMYqrM+HyUYdBtaLykeRmlK12C9rQOh1FM1vd/HqUIzaT5e+LVoh/VxByHShs6HFaw0VjjHhTxP5d0LT+fRnu5q3HuAodlbHW02Q5cDByM+sw1642cRylCx6PeZiuTFScUFxK+f19QovaRS+t4tsasxhvABbZbSfUCV6CM7qtQl6Fm4E1U22UqcAYqvZ42fgJMxH6vdYc5nkBlSW6Pq4fbS6hb6jg0u9yGug7FyS5U1+UcVBbwbFSuMM1sQ1bXK4A9CcviqM0e9H80HdUxCpwIa4McygA/GfgAcCJqmGKKXUixupEv7nHsLc2agWNQ0d9OzC+PHNHIo1XeLCoe8kkqXiUtwKFoWXoEKqk3BpWLaC8cXsV8HT1J+tFTZKvn+DMqFZi1knvtyKg1O2lBHADcCVxEedNSAP4HJcsr0NNWHVUAAAAASUVORK5CYII="); + + --keyword: #5e8f60; + --identifier: #222; + --comment: #484a86; + --operator: #155da4; + --punctuation: black; + --other: black; + --escapeSequence: #c4891b; + --number: #252dbe; + --literal: #a4255b; + --program: #6060c0; + --option: #508000; + --raw-data: #a4255b; +} + +[data-theme="dark"] { + --primary-background: #171921; + --secondary-background: #1e202a; + --third-background: #2b2e3b; + --info-background: #008000; + --warning-background: #807000; + --error-background: #c03000; + --border: #0e1014; + --text: #fff; + --anchor: #8be9fd; + --anchor-focus: #8be9fd; + --input-focus: #8be9fd; + --strong: #bd93f9; + --hint: #7A7C85; + --nim-sprite-base64: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAARMAAABMCAYAAABOBlMuAAAACXBIWXMAAAsTAAALEwEAmpwYAAAFFmlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxNDggNzkuMTY0MDM2LCAyMDE5LzA4LzEzLTAxOjA2OjU3ICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgeG1sbnM6cGhvdG9zaG9wPSJodHRwOi8vbnMuYWRvYmUuY29tL3Bob3Rvc2hvcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RFdnQ9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZUV2ZW50IyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgMjEuMCAoV2luZG93cykiIHhtcDpDcmVhdGVEYXRlPSIyMDE5LTEyLTAzVDAxOjE4OjIyKzAxOjAwIiB4bXA6TW9kaWZ5RGF0ZT0iMjAxOS0xMi0wM1QwMToyMDoxMCswMTowMCIgeG1wOk1ldGFkYXRhRGF0ZT0iMjAxOS0xMi0wM1QwMToyMDoxMCswMTowMCIgZGM6Zm9ybWF0PSJpbWFnZS9wbmciIHBob3Rvc2hvcDpDb2xvck1vZGU9IjMiIHBob3Rvc2hvcDpJQ0NQcm9maWxlPSJzUkdCIElFQzYxOTY2LTIuMSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDplZGViMzU3MC1iNmZjLWQyNDQtYTExZi0yMjc5YmY4NDNhYTAiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6ZWRlYjM1NzAtYjZmYy1kMjQ0LWExMWYtMjI3OWJmODQzYWEwIiB4bXBNTTpPcmlnaW5hbERvY3VtZW50SUQ9InhtcC5kaWQ6ZWRlYjM1NzAtYjZmYy1kMjQ0LWExMWYtMjI3OWJmODQzYWEwIj4gPHhtcE1NOkhpc3Rvcnk+IDxyZGY6U2VxPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0iY3JlYXRlZCIgc3RFdnQ6aW5zdGFuY2VJRD0ieG1wLmlpZDplZGViMzU3MC1iNmZjLWQyNDQtYTExZi0yMjc5YmY4NDNhYTAiIHN0RXZ0OndoZW49IjIwMTktMTItMDNUMDE6MTg6MjIrMDE6MDAiIHN0RXZ0OnNvZnR3YXJlQWdlbnQ9IkFkb2JlIFBob3Rvc2hvcCAyMS4wIChXaW5kb3dzKSIvPiA8L3JkZjpTZXE+IDwveG1wTU06SGlzdG9yeT4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4JZNR8AAAfG0lEQVR4nO2deViTZ7r/7yxkJaxJ2MK+GCBAMCwS1kgUFQSKK4XWWqsz1jpjp3b0tDP1V+eqU391fqfT/mpPPd20drTFDS0KFEVWJSGAEgLIZpAICBJACIRs549Rj1WILAkBfD/XlevySp68z/0S3+/7vPdzLyidTgcLkU2bd+z39/f/q1gshsrKSoJELFCa2iaEuU9K6kb+8uXxv54/fzE8L/eswNT2zCfQpjbAGKS8lPFKSEjIXiaTCSEhIeDj4xNnapsQ5j6rktZGp6UlfxIdzQVzCplmanvmG1hTG2BIAtlc26CgoDfT0tL2e3l5AQCAjY0NkMnk/a9s2k6rrKw8UV8n1JjYTIQ5RlAw14KzmL3xze1vfJyUuMJaq9UCFovFm9qu+YbBxcSPFUYkk8l2Q0NDsvo6ocrQx5+I8Ih4bz6f/0l8fHyKlZXV4/dRKBQwmcwwMpn8A4FAoPgHhH9bV1sxa488wZxoaycnJ/a9e/duCa5fkc3WvAiTI4Ib77p+XdqHG9anbfLy8gAAgLGxMdBpF+bjvzExqJj4scKI0dHRnwQHB++orq7+AgDeMuTxJ2Jl4rqU9PT0EwEBAUQCgTDuGAaDAampqYepVKpHUHDk325Ulw0a266YuFW+Gzdu/MDPz29jfn7+XgA4aOw5ESZP6kvpCXv3vnM8NiaSamVl+fj9BepGNDoGFRN7e/slcXFxO1xcXMDJyWnH7j//H/fi4uJdgutXmgw5z5O8smn7X9euXbvf29sbMBjMhONQKBRYWVlBbGzsbjMzM3JoOG+/sKKwy1h2rd/4elpGRsYuLy+vaDweD2w2Oy1h5ZrCvEunEaeeiVnMiabyl/F2/+X9P+8JDPQHHA5napMWBAYTk6DgSNuEhIS9DAYDAP7tq1i6dOkqOp3OWbNu0wens44emeoxA9lcWwKBYEMkEm2JRKIdHo+3QKFQWJ1Op8ZgMER3d/dVq1evTnFycpr0MSkUCsTExGzH4/Gk1LTME/39/TI0Go1FoVCg1WrVY2NjipGRkcGRkRH5dPwrEZHLXMPCwjJSUlIy3dzcfB+97+rqGhYSEpIOAIiYmBguN3zL77dt3uPh4W5qUxYUBhMTb2/vjeHh4cvR6P/dILK0tITIyEg7BweHr363/Z3Ampqaf1Zcu/zMKiVsyVJvMplsRyKR7IhEor2FhYUbhUJhJCYm2pFIJB6JRAIymQx4PB7QaDRoNBowMzMDJycnwOOn7icjEokQGxu7icFgbLp///7jFY1WqwWlUgkjIyOgUCgO7Ni5Rz48PCwfHh7uGRkZeaBQKOSjo6ODCoVCXlNVKn/6uCsT13FXrVr1emho6BYKhfLMnP7+/omrU9LPX8g+UThloxEMxqJFXjxESAyPQcSEExrLWLNmzW57e/txP/fw8ABHR8cdDAaDt3xF2ru9vb03sVgs0cbGxs/FxWVZUlISj0aj+dna2oKtrS1M5PcwJCgUCry8vODRrs84vPfoH6OjoyCXy6Gvr+/R6+CWrX9s7evrk/b19bWr1Wqli4sLZ8OGDe95eXmxUSjUuAd0cHDwjoqK2sYKXFIhvnldYYTTQpgU4/8+jyASCYDGoCd+ZkYYF8OICYezl8PhuOkbQyAQIDo62s/NzS2np6cHbGxsgEajAYFAAAwGA1gsFia6CE0NgUAABwcHsLe3B61WC2q1eo9WqwWNRgNKpRLUajUQiUSgUCh6zwGHwwGTydzo5+eXBQBnZu8MEJ5keHhYPqyYWMtHR0ZBpVIhYj9FUDONgOUvT12+du3avMDAQJjssdRqNWCxCyrEZdLodDoQi8Ulx44de628NL/V1Pa8iERE8l2dHB2CJvpcq9Nqbt1qKURWj1Njxld0ZGTkAW9v70kLCQC8sEIC8O/HKx8fn2gmk8kHgCk7pRFmzrWyAikASE1tx0Jj2uH0EZHL/N7YtuvT4OBgzmz4OBYSeDweIiMjt2S++vtMP1YYEmmJsCCY8mNOIJtr6+zsHBcZGXmIw+G4mZubG8m0hU9HRwcUFxe/KxQKTyDRsQjznSmJCS9+dVRERMTfQ0NDo2xtbfUGiSFMjtHRUaitrc3Jzc09kHvxVLmp7UFAmC6oZQkvrZLL5RJhReHtiQb5scKIXC7371FRUX90dnYGIpE4JR8Jgn40Gg20t7fXFxYWfnr9+vWjz8sdYi+Osh4vzgUBwZSgtu94V+fs7Hx7YGCgra6u7khLS0u2RCwYeTQgKmYFh8fj/f/g4OAldnZ2prR1wdPd3Q1CofBQSUnJkdLi3N8E93FCY6k+Pj48FxcXjlar1ZSWlh65VvYr4kREmDNg79+/D3FxcW5OTk5uXl5evNbW1tL0jK3ZXV1d1ykUintycvInoaGhdkj+gvGxs7MDPp+/m0AgWMQvS/lyeHhYTqPRPJycnIJSU1NZ3t7eW2g0Gly/fv2oWq1Gij0hzClQ/gHhpLS0tEM8Hm/7I8Ho7++HlpYWsLa2Bg8PDxOb+OKhUCigqakJ7t+/D25ubuDu7g4oFAp0Oh08ePAAvv7666TTWUdzTG0nAsKTYMU3ryuSU18+4+bmFrZo0SIOAICVlRUsXrx4zkakLnRIJBI8CgJ8MtdJp9NBZ2enqL29XWRC8xAQxgUNAHD+3L8KGhoaCp78ABES04JCoX4jJAAAAwMDUFtbe96YpRMQEKbL41DU5ubmko6Ojj2PSgggzD36+/vrb9y4cX425zzw93/8EBjon2is44+NjSkePBjqGRwc7G5v7xBV19w8U5B/3qgrr9+/uWtXUuKKD/TZ9MXh/066/OuFmunO8dGBQ98HBbGSp/t9U6LRaDXK0dHBoeFhuVzeL22/0yFqamopufjLqRJ933ssJi0tLSXV1dWHGAzGbuObOzs8ubqa71vZKpUKOjo6blwpOF8zm/Mu5cVkLlkSaswprAHAaVihgK7O7oSGxltvfXLon3nXK4RHT2cdN4pfKDCAlZyUuMJan02nTmczAaBmunPw4qI3cbnh0/36XICq0+lgcPABp7OrK629vUP5z8++LLh2XXD05L++yxrvC4/F5EZ12WBS8saLS5Ys2U2lUufUY45SqQSlUgkqlQrUavXj19jYGGg0GtBoNKDT6UCn05VotVq1TqfToFAojFar1eh0Og0Wi8XhcDgeGo1+/PhgZmYGOBwOsFgsmJmZ/eY1F+nt7YXa2trs2Z73wdCQBgCMHp1IJpHA09MdPD3dLRIS+OtKisvWvbP7vf2lZdePVFwzbHTwyMiI3hidkZFRUKvUYzOZ48HQkBIA5nWqBAqFAktLC7C0tADmIh88Pz4uMSyUk7hn776DV4tKPn/6d/lNxp1MJqsRCASf8vn8XdMpOjRTVCoVjI2NgUqlAq1WCyMjI9DX1wf379+Hvr6+/Q8ePOgdGRmRKxSKx0WLFAqFXKlUKnQ6nUar1arHq47mxwrD4/F4Eg6HI2GxWDwej7cgkUjWFAqFam5uTjU3N6eRyeQPLSwswNraGqysrIBAIDwWFywW+zja11Qi29LSclIikeSZZPJZBovBAI8XA8HBQR9kZZ3lR8cmvFZSlGe00p8IkwONRkNERBj4+i7a4+XpHv307/IbMakWlciXJbx0nMPh7Jqo0JGh0el0MDo6Cl1dXSCVSkEmk7177969W319fe1DQ0M9KpVKoVarlWq1WjndNhUPG3ApAWDcOxLTLwSDwWAOotFoDBaLxRMIBAsrKysne3t7Xzqd7k2n0/c4OzsDlUoFHA4364IyMDAATU1NxdWikhcq6tXKyhJezljPJZKI2eERS5cZeoWCMD2srCwhPX0tVzk2djiCG//GtfLLUoBxShB0dHTU3Lx580sLC4vtJBLJKMZoNBqQSqUglUqPdnR01PT09DT19/fLHjx40DM0NNQ72933GiSVGgB4JFQK+LfoSAGgnL04yppEIh2xtLS0t7GxcaFSqR7Ozs4fMRgMcHR0nJX8pJs3b54Ui8UXjT7RHIRMIkFK8irfwcEHPwQELUmqvYHUGJkLmJubw8YNa/i9vfffY/px3myQiDTPiEl9nVDDX576jaenZ7SnpyfLUJNrNBqQyWRw+/bt4x0dHTdkMlltV1dXw/XygjkdEv4wB0YOAK0AUM70C8HQ6fSzdDrdm0qlejg6OrLc3Ny2MBiMadWjfR4PHjyAmzdvZs/1v5MxoVAokJK8iicWS95k+nH+s0EiQhqpzQGoVFtYk5a87ba0XQAA34xbpagg/5zoT7s/OGNnZ8eaaYkBuVwOnZ2d5VKpVNTS0lLS2NhYWFVZ3Dujg5qQh6uY+ocvCAiKIPn4+Jz19PSMdnV15VCpVL6Dg4NBViw6nQ5EItHRpqamqzM+2DzHzo4O69amftLQeKsAZrDLgmBY/PyYsCIhfs+SiKUFE5Y8EwqFx11cXDihoaFTjjFAoVAwPDwMHR0dourq6jNCofDHhZqUVnvjmgIAcgAgJyg40mLRokX8kJCQjT4+PussLS1n1JPl7t27UFxcfHguB6mNjY2B7G4naNRTWyygUCjAYDGAx+PB0sICSCSi3vFYLBbCwjjA8vddBQtATKb7d3saBwc7IJPJBpsHjUGDGRYLJBIJLK0sAfucmyIGg4FFi3y8AwNZtycUk5KiS02vvf7WWQaDkejg4DApQwAeh3xDaWnpPoFAcPxFqnP6sEvgGf+A8Bx3d/cvIyIiNi1evHjT8wpNj8fAwACUlZW9P9dD5+/ckcFbf9gd2dcnn9LNAovF4inmZHtXNxdOdBR3+/JlS33pdP29wolEInA4weuiYxOy5vvuTkeHDHb+8c8xvb33Z3R9/N+Df+uIjYk02DwkEsna2trS1d/fNyGeF7uTyw1/7g3R3t4O2OxA/TVghULhcQqFQk1JSfmYSNR/5wD4d6EfgUBwvLS09IhUKhW9qAV5H9YjKQwJi6uvrKw8ERoamhkSEpKp7w7yJEqlEiQSyZmysrJv53qjdaVSCZdyTk+3qFMrAJRHRPLPN95qeifj5fU7mYt8JhyMRqMhMJDFdnF25gDAvBYTpXIMWlpay2fq/8m5mDcIABYGnEcGAGI/VlhBZWX1yZdSkz55OX0dV5+7w9bGGvz8mPrFpK62QskJjf2GTqd7x8bGbpnID4BCoUAmk0lLSkqOiESik2UleS/MakQflYKrXQDQxY1a3tTe3i6KiIjY5OXlxX7e9+rr6wsuXbr0t4ffn9OgMWjghMZQRcLp+8GulRVI/QPC37Wxtnal0ajJtjY2E451ZjiBra31vE9lR2PQQKFQaAAwo98Yi8Xq9fpPd56HO6rlvKWJv/PwcK+JilyCmajWMw6HAzs7+rMFpQOCIn6zHywSFvXm5eUdFAqFZ9Rq9bgHa2trq79w4cK+zz49cAARkmcpL81v/a/Dhz49d+7c3qqqqjyVSjXuOJ1OBxKJpDw3N/fA5V+zax6978cKw/sHhM/raMrnUVdboSy4fPWQSFSjd5yFBQWIRNKEd2IEw1J4JUd88WL+R51d3XrHWVDMnxUTa2tr1zXrNiUGsrmPf7DS4tymCxcu7Kuurs55+kKQSqVN586d23vs+8NHDXUCC5Wzp3/Iy8rKeruysvLM2Nhvo7VVKhXU1tYWnj17du/T7UOdnZ2D7OzsfGGB09raVi4S1RzXl0eFw+EAj8chYjKLVFffyOrq1C8mJBLpWTFRKBRyDofzC4vFWvXk+1ev/CLOzs7eKxAIslQqFeh0Oujp6enKzs7em/XTd7OayTqfKb56sT4rK+sPAoHg5KO/o0KhAKFQmHXy5MkdF3/5+TeZmctXpIXZ29v7zqVcKWNRX1epuXu3U/y8pEw0GmndOZt0dnXVDw0P6/W5oNHoZ30mQ0NDPb29vfvj4+Pf3rR5B/7od188XnEUXr4gDgmL+0NfX5/U19d3d3l5+YGfTnyDtLmcIhXXLsu4UcvfR6PRGGtra9eysrIjYrE45+kt4Fheou/69es/unnz5vm7d+/Wmsre2WRkZGTQ1DYg/JYGiUiTm1ugBAC9IfHPiEmDpFITE7fqJI/H27lmzZpDq5LWtz55t6wUXO3ihMYerK+vz2tpaUFaM0yT8tL81ujYle+TSCTrvEunBU9/voTLd92wYcPHVCqV39XVdXCu7+oYCp1O90Kc50Jk3I5+xVcv1jc3N5d4enpSMzIyvkpK3sh78nORsKg3++yPBS/q1q+hKCm61DSekERGJ3ikp6d/ERsbm1xVVXWwtbX1hRFtFAqFPMLMUyZsDyoQCI7LZDKIiIjwzczM/GpV0vro2TTsRSUqZoX3+vXrP1u9enXi0NAQiESirIdRtggIc5oJ40zq6uryGhoa8ry8vBJCQ0O9USjU94mrN7yWc+EnvaXb5gJMvxCMp6cnl0Kh2Le1tZVXXLs8L1LXefGrWRkZGZ/x+XyeUqkEkUh0vqenZ14HZyG8OEwoJjdrygd37NxTEBkZmWBtbQ3BwcEeKBTq+/UbX3/355Pfzlmn66qk9dGbN29+k8PhbCSRSNDZ2Snb9ae/HCkpKTksEhbN2QTD5NSX+Vu3bj0cHBzsjcFg4O7du1BWVvbNwxB9BIQ5j94I2Fu3bhXW19cDl8sFLBYLHA7Hg0wmf/e77e84ffXlPz6fLSMnQ2paZkJ4eHjmtm3b+B4eHvZkMhlQKBTY29s72dvbfxgUFJT8x7ffP1NRUfHjXErnZ/qFYKKjo7dt3rz5g8DAQPtH/XHa2tpqGhsbC55/BASEuYFeMblz505NTU3NgfDw8PcwGAygUCjw9fW1IJPJn/1130Hv0tLSI4WXL4hny9inYS+Osvbz80tgMpn8jIwMPovFch2vpoiDgwM4ODhwfH19OYsWLeJv3/Hu+cbGxquzXZz5aZYlvMRJT0/fFhkZue3JZmfd3d0gEolOIr4ShPmEXjFpkFRqXlrzSnFnZ+d7Tk5OjzNfXVxcICMjY6ezszNnVdL6vU8HWhmbgKAIkrOzMyc1NTXz0YU4maAuOp0OK1as4EVFRfGEQqHg1dfePHzr1q2rs71S8WOF4f38/BLS09M/iIyM5DxdxLq5uVlcVVU1bgVwBIS5il4xAQCQyWRigUBwJikpKe3JVGQcDgdLly7l2tranti0ecf7IpEoy9hbxX6sMDydTvdevXr1ltjY2F3u7u6AxT73FJ7B3Nwc4uLiwthsdphQKCzZkL7l0/r6+oKbNeVG90+EhMXZL1++fFtycvKHrq6uz4igUqmE5ubmEiTHCWG+8dwrUXD9imz9xtd/jIuLS7N5KpsTjUZDUFCQE4PB+F4oFGYmJW888Mv5k4UTHGpGxC9LYaenp78VEhKyxdHRESgUyoyOh0KhwNraGuLi4qIDAgKi6+rqyjekb/mHMSN6N6RvSdu+ffseNpsdZm09ftuW+vp6EIvFSB9hhHnHpG7rUqm0orW1tdXS0tLj6TIEaDQaaDQaxMfH811dXTl/3Xfw+JUrVz411J01cfWG6IiIiC07d+5McHNzs7ewMGyOFw6HAwcHB6BSqVx3d/fwz7/4rkAgEBwXCoUnHpZonDGrU9J5MTEx27du3Zrm4uKC0beaqq6u/ry+vj7XEPMiIMwmkxKTimuXZe/u+fCkp6fnexPdUfF4PPj7+1szGIydLi4unF1/+kvenTt3RG1tbRXTqfma8lIG39/fP/HVV19NZrFYHpMpzjQTzMzMwNPTE+Pp6Zng6emZ4Ofnl5CesfV8bW1tznQe3/wDwvFeXl7Rvr6+Ca+88kpaUFCQh74GXzqdDrq7u6GpqankRQmdR1hYTNrhUFVVlcXj8d6ysrKy0OfstLS0hPj4eC6Xy+U2NzeDRCI5/sa2XeX37t1rGhwc7BoYGJBN1P+FFbiE5OzszGaxWImvvvrqpoCAAKfp+ERmCpPJBCaTmcnhcDJLS0u/TE59+YxUKhXoi/lg+oVgrKysGJaWlna2trYeaWlpXDabvTMgIGDSfp2KiorzbW1tL0zoPMLCYtJX6uVfs2u++PKowMPDgz+ZIslEIhECAgKAxWJlajSazJ6eHmhra4PW1tZvtmz9o6Czs7O+r6+vfWxsbFir1WosLCzsV6xYkcnj8d7z9vaelmPV0Hh5eYGnp+f2mJiY7UVFRZ/HL0v5tru7+5ZGo1FisVg8Docj4fF4CxsbG1c+nx/m7e39sYeHB7i4uIC5ufmU6r4ODQ1BZWXlifkSrYuA8DRTumIrKytPent78728vCb9HRQKBVgsFhwcHIBOpwObzd4yNja2RaVSwdDQEHR1dcHo6CjQaDRwdXWdsWPV0KBQKPDw8AA7O7udERERO2tra2FgYACoVCo4OTkBjUYDMpkMeDz+8WuqaLVaaGxsbL19+/YzSX8ICPOFqYrJidDQ0AwvLy/e80c/CwaDARKJBI86BdJoNHB3dwe1Wj0nViL6IJPJwGQywdnZGZRKJRAIBDBUx8OBgQEoLS39BtkORpjPTJg1PB61N64pmpqarvb39xvUiLkuJE9CJpPBxsbGYEICANDZ2SlHgtQQ5jtTEhMAgLq6ulyJRFJvDGNeREZGRkAikRSUFuci2cEI85opi0l+7hmBWCzOeV6dToTJcfv27cHr168jxbgR5j1TFhMAgObm5hKZDNl0MAQtLS3Xzpw6hkS8Isx7piUmUqlUIBAIJuyjgzA5Ojs7QSKRINGuCAuCaYmJsKKw68qVK59KJJIu5HFneiiVSigqKjouEolOmtoWBARDMC0xAQC4+MvPJadOnXq3ra1N8yL0dDEkOp0OSktLy/Pz8w8+3d4CAWG+Mm0xAQA4fuy/jl+8ePGju3fvGsqeBY9Wq4XKysrWU6dOvX31yi8mKyyFgGBoZiQmAAD/79D+fadPn96PCMrz0el0UFVV1frtt9+mj9fiAgFhPjNjMQEAyMvLO3Ds2LE/tLS0INmuerh27Vr9999//xoiJAgLEYOEntbVVigB4PNNm3cMpqSkfMRms50McdyFgkqlgqKiovJTp069nZ97BhEShAWJQePYj373xdF1GzbLFQrFx6Ghob766ne8KNy7dw+KiopO5ubmfmTK4tsICMbG4EkxWT99d35l4rre/v7+D0NCQvh0Ot3QU8wL1Go1SKVSTX5+/sH8/PyDSP8bhIWOUTLsLuVklQcFR65pbGzcvnLlyvfc3NwsCASCMaaac+h0OhgaGoLq6uqaCxcu/OV01tGcTw7uM7VZCAhGx2jpug/vxAd58atzoqKitq1cuXKnvb29saabE+h0Oqiurpbm5eUdrK6uPlspuDrvY0hmO4YIhUIBGq1/X2CmNqFQKL3/79HomZ/z82xEowyy9zFr80zGDqPn/hdeviBmL47ad+fOnRsRERGbQkNDo62srIw97azT2dkJxcXFx0tKSo7Mdh8hY4LD4TDPH2U4MFjMc6tLmZmZzaj+Aw6H0/t9PB4PGCxmRudNJBL0ngeZTAI0Gj3jv+1szfM88Hic8cUEAKCmqlQOAN/ELU2qkEgkySwWK3HRokVcBoMxG9MbDZ1OB83NzdDU1FRQW1t7XiAQHJ+ovu18pbr6Rg6L5ZtoM0EhcUPT0tJW8tWRb0vQqIkvgKqqmhnVfrl2TfANXo+gjKlUio4OWc1M5sjOzjnQUH8rbqLPu3t6moaGhmfc+3q25tGHUqmECoEIUKbIrVkcEkONiIh4jcvlvu7s7OxLo9GmVe7QVCgUCujq6oKGhoaCioqKo9XV1WeM3YDMVPDik1gpyas+XrVyeaKXl8czjyANjbcgI/MNmkg49Q4ECPOH3NyC4RUr+M8IcHt7B1y9WlKRl3/5kElKnD1sfXEoJCzueEBAQGJYWFgGk8nk2djYAIFAgLm4pTw6Ogqjo6Mgl8vhxo0b50tLS4/U19fnLvS2FIWXfxEDQNLmLW9ueW1TxtchHDaQyWRTm4VgYkZHR6G+vhF+/NfP+y5e+vVjiVgwZpKVydOwF0dZW1lZOTGZTD6bzU4LCAiIptPp8HTDL1MwOjoKLS0tUFdXd1IsFudIpdKKgYGB7tloJTrX4MUnsVJTEj9etzY10dHRAQAAGm81wcsZW5CVyQInL69gNCGBjwcAGBx8ANnncypOnTr3H9nn/reD55wovvrQpyIHAHFUzIocGo3mQaPRfBwdHVlubm7bXF1dgcFgABqNNvruglwuh7t374JMJoOOjo7P79y5I+ru7m7q7e1tXQi7MzOh8PIv4pCw2DdaWtte37Au7aPIyCWAxWABjUbPif9HCMbjURtKiaQBfvr5zH9evlJ0uLQ4r/nJMXNiZTIRrMAlJAcHB18HBweWo6Mjy8rKajeJRAJLS0uwtLQECwsLoFAogMfjAYvFgpmZ2XNXMyqVCoaHh2FoaAiGh4cfvwYGBqCvrw+6u7vfvnfvXlNvb29rT09Pq0QsUM7S6c4rNqS/lrZ5U+YPRBKR9M7u9xwqBUUvtNAudH766XSLE8PR49ixE78/8tVnX403Zk7fUR46NUUAIPIPCMdTKJTdNjY2QKPRgE6nA51OB1tbWyCRSIDD4YBAIAAejwcCgfDYUajVakGlUoFarQadTvfY79HX1wf9/f0gl8tBLpfDvXv3HvXw+dxQPYYXMj+d+P7Mmzv+5OHr6/OJWq1GBHeB09TcUiKuq/coKS3/eqIx/wPkiIXC3w6YjAAAAABJRU5ErkJggg=="); + + --keyword: #ff79c6; + --identifier: #f8f8f2; + --comment: #6272a4; + --operator: #ff79c6; + --punctuation: #f8f8f2; + --other: #f8f8f2; + --escapeSequence: #bd93f9; + --number: #bd93f9; + --literal: #f1fa8c; + --program: #9090c0; + --option: #90b010; + --raw-data: #8be9fd; +} + +.theme-switch-wrapper { + display: flex; + align-items: center; +} + +.theme-switch-wrapper em { + margin-left: 10px; + font-size: 1rem; +} + +.theme-switch { + display: inline-block; + height: 22px; + position: relative; + width: 50px; +} + +.theme-switch input { + display: none; +} + +.slider { + background-color: #ccc; + bottom: 0; + cursor: pointer; + left: 0; + position: absolute; + right: 0; + top: 0; + transition: .4s; +} + +.slider:before { + background-color: #fff; + bottom: 4px; + content: ""; + height: 13px; + left: 4px; + position: absolute; + transition: .4s; + width: 13px; +} + +input:checked + .slider { + background-color: #66bb6a; +} + +input:checked + .slider:before { + transform: translateX(26px); +} + +.slider.round { + border-radius: 17px; +} + +.slider.round:before { + border-radius: 50%; +} + +html { + font-size: 100%; + -webkit-text-size-adjust: 100%; + -ms-text-size-adjust: 100%; } + +body { + font-family: "Lato", "Helvetica Neue", "HelveticaNeue", Helvetica, Arial, sans-serif; + font-weight: 400; + font-size: 1.125em; + line-height: 1.5; + color: var(--text); + background-color: var(--primary-background); } + +/* Skeleton grid */ +.container { + position: relative; + width: 100%; + max-width: 1050px; + margin: 0 auto; + padding: 0; + box-sizing: border-box; } + +.column, +.columns { + width: 100%; + float: left; + box-sizing: border-box; + margin-left: 1%; +} + +.column:first-child, +.columns:first-child { + margin-left: 0; } + +.three.columns { + width: 22%; +} + +.nine.columns { + width: 77.0%; } + +.twelve.columns { + width: 100%; + margin-left: 0; } + +@media screen and (max-width: 860px) { + .three.columns { + display: none; + } + .nine.columns { + width: 98.0%; + } + body { + font-size: 1em; + line-height: 1.35; + } +} + +cite { + font-style: italic !important; } + + +/* Nim search input */ +div#searchInputDiv { + margin-bottom: 1em; +} +input#searchInput { + width: 80%; +} + +/* + * Some custom formatting for input forms. + * This also fixes input form colors on Firefox with a dark system theme on Linux. + */ +input { + -moz-appearance: none; + background-color: var(--secondary-background); + color: var(--text); + border: 1px solid var(--border); + font-family: "Lato", "Helvetica Neue", "HelveticaNeue", Helvetica, Arial, sans-serif; + font-size: 0.9em; + padding: 6px; +} + +input:focus { + border: 1px solid var(--input-focus); + box-shadow: 0 0 3px var(--input-focus); +} + +select { + -moz-appearance: none; + background-color: var(--secondary-background); + color: var(--text); + border: 1px solid var(--border); + font-family: "Lato", "Helvetica Neue", "HelveticaNeue", Helvetica, Arial, sans-serif; + font-size: 0.9em; + padding: 6px; +} + +select:focus { + border: 1px solid var(--input-focus); + box-shadow: 0 0 3px var(--input-focus); +} + +/* Docgen styles */ + +:target { + border: 2px solid #B5651D; + border-style: dotted; +} + +/* Links */ +a { + color: var(--anchor); + text-decoration: none; +} + +a span.Identifier { + text-decoration: underline; + text-decoration-color: #aab; +} + +a.reference-toplevel { + font-weight: bold; +} + +a.toc-backref { + text-decoration: none; + color: var(--text); } + +a.link-seesrc { + color: #607c9f; + font-size: 0.9em; + font-style: italic; } + +a:hover, +a:focus { + color: var(--anchor-focus); + text-decoration: underline; } + +a:hover span.Identifier { + color: var(--anchor); +} + + +sub, +sup { + position: relative; + font-size: 75%; + line-height: 0; + vertical-align: baseline; } + +sup { + top: -0.5em; } + +sub { + bottom: -0.25em; } + +img { + width: auto; + height: auto; + max-width: 100%; + vertical-align: middle; + border: 0; + -ms-interpolation-mode: bicubic; } + +@media print { + * { + color: black !important; + text-shadow: none !important; + background: transparent !important; + box-shadow: none !important; } + + a, + a:visited { + text-decoration: underline; } + + a[href]:after { + content: " (" attr(href) ")"; } + + abbr[title]:after { + content: " (" attr(title) ")"; } + + .ir a:after, + a[href^="javascript:"]:after, + a[href^="#"]:after { + content: ""; } + + pre, + blockquote { + border: 1px solid #999; + page-break-inside: avoid; } + + thead { + display: table-header-group; } + + tr, + img { + page-break-inside: avoid; } + + img { + max-width: 100% !important; } + + @page { + margin: 0.5cm; } + + h1 { + page-break-before: always; } + + h1.title { + page-break-before: avoid; } + + p, + h2, + h3 { + orphans: 3; + widows: 3; } + + h2, + h3 { + page-break-after: avoid; } +} + + +p { + margin-top: 0.5em; + margin-bottom: 0.5em; +} + +small { + font-size: 85%; } + +strong { + font-weight: 600; + font-size: 0.95em; + color: var(--strong); +} + +em { + font-style: italic; } + +h1 { + font-size: 1.8em; + font-weight: 400; + padding-bottom: .25em; + border-bottom: 6px solid var(--third-background); + margin-top: 2.5em; + margin-bottom: 1em; + line-height: 1.2em; } + +h1.title { + padding-bottom: 1em; + border-bottom: 0px; + font-size: 2.5em; + text-align: center; + font-weight: 900; + margin-top: 0.75em; + margin-bottom: 0em; +} + +h2 { + font-size: 1.3em; + margin-top: 2em; } + +h2.subtitle { + margin-top: 0em; + text-align: center; } + +h3 { + font-size: 1.125em; + font-style: italic; + margin-top: 1.5em; } + +h4 { + font-size: 1.125em; + margin-top: 1em; } + +h5 { + font-size: 1.125em; + margin-top: 0.75em; } + +h6 { + font-size: 1.1em; } + + +ul, +ol { + padding: 0; + margin-top: 0.5em; + margin-left: 0.75em; } + +ul ul, +ul ol, +ol ol, +ol ul { + margin-bottom: 0; + margin-left: 1.25em; } + +ul.simple > li { + list-style-type: circle; +} + +ul.simple-boot li { + list-style-type: none; + margin-left: 0em; + margin-bottom: 0.5em; +} + +ol.simple > li, ul.simple > li { + margin-bottom: 0.2em; + margin-left: 0.4em } + +ul.simple.simple-toc > li { + margin-top: 1em; +} + +ul.simple-toc { + list-style: none; + font-size: 0.9em; + margin-left: -0.3em; + margin-top: 1em; } + +ul.simple-toc > li { + list-style-type: none; +} + +ul.simple-toc-section { + list-style-type: circle; + margin-left: 0.8em; + color: #6c9aae; } + +ul.nested-toc-section { + list-style-type: circle; + margin-left: -0.75em; + color: var(--text); +} + +ul.nested-toc-section > li { + margin-left: 1.25em; +} + + +ol.arabic { + list-style: decimal; } + +ol.loweralpha { + list-style: lower-alpha; } + +ol.upperalpha { + list-style: upper-alpha; } + +ol.lowerroman { + list-style: lower-roman; } + +ol.upperroman { + list-style: upper-roman; } + +ul.auto-toc { + list-style-type: none; } + + +dl { + margin-bottom: 1.5em; } + +dt { + margin-bottom: -0.5em; + margin-left: 0.0em; } + +dd { + margin-left: 2.0em; + margin-bottom: 3.0em; + margin-top: 0.5em; } + + +hr { + margin: 2em 0; + border: 0; + border-top: 1px solid #aaa; } + +hr.footnote { + width: 25%; + border-top: 0.15em solid #999; + margin-bottom: 0.15em; + margin-top: 0.15em; +} +div.footnote-group { + margin-left: 1em; } +div.footnote-label { + display: inline-block; + min-width: 1.7em; +} + +div.option-list { + border: 0.1em solid var(--border); +} +div.option-list-item { + padding-left: 12em; + padding-right: 0; + padding-bottom: 0.3em; + padding-top: 0.3em; +} +div.odd { + background-color: var(--secondary-background); +} +div.option-list-label { + margin-left: -11.5em; + margin-right: 0em; + min-width: 11.5em; + display: inline-block; + vertical-align: top; +} +div.option-list-description { + width: calc(100% - 1em); + padding-left: 1em; + padding-right: 0; + display: inline-block; +} + +blockquote { + font-size: 0.9em; + font-style: italic; + padding-left: 0.5em; + margin-left: 0; + border-left: 5px solid #bbc; +} + +.pre, span.tok { + font-family: "Source Code Pro", Monaco, Menlo, Consolas, "Courier New", monospace; + font-weight: 500; + font-size: 0.85em; + color: var(--text); + background-color: var(--third-background); + padding-left: 3px; + padding-right: 3px; + border-radius: 4px; +} + +span.tok { + border: 1px solid #808080; + padding-bottom: 0.1em; + margin-right: 0.2em; +} + +pre { + font-family: "Source Code Pro", Monaco, Menlo, Consolas, "Courier New", monospace; + color: var(--text); + font-weight: 500; + display: inline-block; + box-sizing: border-box; + min-width: 100%; + padding: 0.5em; + margin-top: 0.5em; + margin-bottom: 0.5em; + font-size: 0.85em; + white-space: pre !important; + overflow-y: hidden; + overflow-x: visible; + background-color: var(--secondary-background); + border: 1px solid var(--border); + -webkit-border-radius: 6px; + -moz-border-radius: 6px; + border-radius: 6px; } + +.pre-scrollable { + max-height: 340px; + overflow-y: scroll; } + + +/* Nim line-numbered tables */ +.line-nums-table { + width: 100%; + table-layout: fixed; } + +table.line-nums-table { + border-radius: 4px; + border: 1px solid #cccccc; + background-color: ghostwhite; + border-collapse: separate; + margin-top: 15px; + margin-bottom: 25px; } + +.line-nums-table tbody { + border: none; } + +.line-nums-table td pre { + border: none; + background-color: transparent; } + +.line-nums-table td.blob-line-nums { + width: 28px; } + +.line-nums-table td.blob-line-nums pre { + color: #b0b0b0; + -webkit-filter: opacity(75%); + filter: opacity(75%); + text-align: right; + border-color: transparent; + background-color: transparent; + padding-left: 0px; + margin-left: 0px; + padding-right: 0px; + margin-right: 0px; } + + +table { + max-width: 100%; + background-color: transparent; + margin-top: 0.5em; + margin-bottom: 1.5em; + border-collapse: collapse; + border-color: var(--third-background); + border-spacing: 0; + font-size: 0.9em; +} + +table th, table td { + padding: 0px 0.5em 0px; + border-color: var(--third-background); +} + +table th { + background-color: var(--third-background); + border-color: var(--third-background); + font-weight: bold; } + +table th.docinfo-name { + background-color: transparent; + text-align: right; +} + +table tr:hover { + background-color: var(--third-background); } + + +/* rst2html default used to remove borders from tables and images */ +.borderless, table.borderless td, table.borderless th { + border: 0; } + +table.borderless td, table.borderless th { + /* Override padding for "table.docutils td" with "! important". + The right padding separates the table cells. */ + padding: 0 0.5em 0 0 !important; } + +.admonition { + padding: 0.3em; + background-color: var(--secondary-background); + border-left: 0.4em solid #7f7f84; + margin-bottom: 0.5em; + -webkit-box-shadow: 0 5px 8px -6px rgba(0,0,0,.2); + -moz-box-shadow: 0 5px 8px -6px rgba(0,0,0,.2); + box-shadow: 0 5px 8px -6px rgba(0,0,0,.2); +} +.admonition-info { + border-color: var(--info-background); +} +.admonition-info-text { + color: var(--info-background); +} +.admonition-warning { + border-color: var(--warning-background); +} +.admonition-warning-text { + color: var(--warning-background); +} +.admonition-error { + border-color: var(--error-background); +} +.admonition-error-text { + color: var(--error-background); +} + +.first { + /* Override more specific margin styles with "! important". */ + margin-top: 0 !important; } + +.last, .with-subtitle { + margin-bottom: 0 !important; } + +.hidden { + display: none; } + +blockquote.epigraph { + margin: 2em 5em; } + +dl.docutils dd { + margin-bottom: 0.5em; } + +object[type="image/svg+xml"], object[type="application/x-shockwave-flash"] { + overflow: hidden; } + + +div.figure { + margin-left: 2em; + margin-right: 2em; } + +div.footer, div.header { + clear: both; + text-align: center; + color: #666; + font-size: smaller; } + +div.footer { + padding-top: 5em; +} + +div.line-block { + display: block; + margin-top: 1em; + margin-bottom: 1em; } + +div.line-block div.line-block { + margin-top: 0; + margin-bottom: 0; + margin-left: 1.5em; } + +div.topic { + margin: 2em; } + +div.search_results { + background-color: var(--third-background); + margin: 3em; + padding: 1em; + border: 1px solid #4d4d4d; +} + +div#global-links ul { + margin-left: 0; + list-style-type: none; +} + +div#global-links > simple-boot { + margin-left: 3em; +} + +hr.docutils { + width: 75%; } + +img.align-left, .figure.align-left, object.align-left { + clear: left; + float: left; + margin-right: 1em; } + +img.align-right, .figure.align-right, object.align-right { + clear: right; + float: right; + margin-left: 1em; } + +img.align-center, .figure.align-center, object.align-center { + display: block; + margin-left: auto; + margin-right: auto; } + +.align-left { + text-align: left; } + +.align-center { + clear: both; + text-align: center; } + +.align-right { + text-align: right; } + +/* reset inner alignment in figures */ +div.align-right { + text-align: inherit; } + +p.attribution { + text-align: right; + margin-left: 50%; } + +p.caption { + font-style: italic; } + +p.credits { + font-style: italic; + font-size: smaller; } + +p.label { + white-space: nowrap; } + +p.rubric { + font-weight: bold; + font-size: larger; + color: maroon; + text-align: center; } + +p.topic-title { + font-weight: bold; } + +pre.address { + margin-bottom: 0; + margin-top: 0; + font: inherit; } + +pre.literal-block, pre.doctest-block, pre.math, pre.code { + margin-left: 2em; + margin-right: 2em; } + +pre.code .ln { + color: grey; } + +/* line numbers */ +pre.code, code { + background-color: #eeeeee; } + +pre.code .comment, code .comment { + color: #5c6576; } + +pre.code .keyword, code .keyword { + color: #3B0D06; + font-weight: bold; } + +pre.code .literal.string, code .literal.string { + color: #0c5404; } + +pre.code .name.builtin, code .name.builtin { + color: #352b84; } + +pre.code .deleted, code .deleted { + background-color: #DEB0A1; } + +pre.code .inserted, code .inserted { + background-color: #A3D289; } + +span.classifier { + font-style: oblique; } + +span.classifier-delimiter { + font-weight: bold; } + +span.problematic { + color: #b30000; } + +span.section-subtitle { + /* font-size relative to parent (h1..h6 element) */ + font-size: 80%; } + +span.DecNumber { + color: var(--number); } + +span.BinNumber { + color: var(--number); } + +span.HexNumber { + color: var(--number); } + +span.OctNumber { + color: var(--number); } + +span.FloatNumber { + color: var(--number); } + +span.Identifier { + color: var(--identifier); } + +span.Keyword { + font-weight: 600; + color: var(--keyword); } + +span.StringLit { + color: var(--literal); } + +span.LongStringLit { + color: var(--literal); } + +span.CharLit { + color: var(--literal); } + +span.EscapeSequence { + color: var(--escapeSequence); } + +span.Operator { + color: var(--operator); } + +span.Punctuation { + color: var(--punctuation); } + +span.Comment, span.LongComment { + font-style: italic; + font-weight: 400; + color: var(--comment); } + +span.RegularExpression { + color: darkviolet; } + +span.TagStart { + color: darkviolet; } + +span.TagEnd { + color: darkviolet; } + +span.Key { + color: #252dbe; } + +span.Value { + color: #252dbe; } + +span.RawData { + color: var(--raw-data); } + +span.Assembler { + color: #252dbe; } + +span.Preprocessor { + color: #252dbe; } + +span.Directive { + color: #252dbe; } + +span.option { + font-weight: bold; + font-family: "Source Code Pro", Monaco, Menlo, Consolas, "Courier New", monospace; + color: var(--option); +} + +span.Prompt { + font-weight: bold; + color: red; } + +span.ProgramOutput { + font-weight: bold; + color: #808080; } + +span.program { + font-weight: bold; + color: var(--program); + text-decoration: underline; + text-decoration-color: var(--hint); + text-decoration-thickness: 0.05em; + text-underline-offset: 0.15em; +} + +span.Command, span.Rule, span.Hyperlink, span.Label, span.Reference, +span.Other { + color: var(--other); } + +/* Pop type, const, proc, and iterator defs in nim def blocks */ +dt pre > span.Identifier, dt pre > span.Operator { + color: var(--identifier); + font-weight: 700; } + +dt pre > span.Keyword ~ span.Identifier, dt pre > span.Identifier ~ span.Identifier, +dt pre > span.Operator ~ span.Identifier, dt pre > span.Other ~ span.Identifier { + color: var(--identifier); + font-weight: inherit; } + +/* Nim sprite for the footer (taken from main page favicon) */ +.nim-sprite { + display: inline-block; + width: 51px; + height: 14px; + background-position: 0 0; + background-size: 51px 14px; + -webkit-filter: opacity(50%); + filter: opacity(50%); + background-repeat: no-repeat; + background-image: var(--nim-sprite-base64); + margin-bottom: 5px; } + +span.pragmadots { + /* Position: relative frees us up to make the dots + look really nice without fucking up the layout and + causing bulging in the parent container */ + position: relative; + /* 1px down looks slightly nicer */ + top: 1px; + padding: 2px; + background-color: var(--third-background); + border-radius: 4px; + margin: 0 2px; + cursor: pointer; + font-size: 0.8em; +} + +span.pragmadots:hover { + background-color: var(--hint); +} +span.pragmawrap { + display: none; +} + +span.attachedType { + display: none; + visibility: hidden; +} diff --git a/docs/palladian.html b/docs/palladian.html new file mode 100644 index 0000000..14a0b9d --- /dev/null +++ b/docs/palladian.html @@ -0,0 +1,147 @@ + + + + + + + + + + + + + + + + + + +src/palladian + + + + + + + + +
    +
    +

    src/palladian

    +
    +
    +
    + +     Dark Mode +
    + +
    + Search: +
    +
    + Group by: + +
    + + +
    + +
    +
    + +

    + + + +
    +
    + +
    +
    + +
    + Made with Nim. Generated: 2023-02-18 21:13:49 UTC +
    +
    +
    +
    + + + diff --git a/docs/palladian/importlibs.html b/docs/palladian/importlibs.html new file mode 100644 index 0000000..37f9e22 --- /dev/null +++ b/docs/palladian/importlibs.html @@ -0,0 +1,175 @@ + + + + + + + + + + + + + + + + + + +src/palladian/importlibs + + + + + + + + +
    +
    +

    src/palladian/importlibs

    +
    +
    +
    + +     Dark Mode +
    + +
    + Search: +
    +
    + Group by: + +
    + + +
    + +
    +
    + +

    use https://esm.sh for CDN. You can explicitly tell it which version of any dependency to use.

    +
    +

    Templates

    +
    +
    +
    template importPreact()
    +
    + + + +
    +
    +
    +
    template importPreactHooks()
    +
    + + + +
    +
    +
    +
    template importPreactRouter()
    +
    + + + +
    +
    + +
    + +
    +
    + +
    +
    + +
    + Made with Nim. Generated: 2023-02-18 21:13:49 UTC +
    +
    +
    +
    + + + diff --git a/docs/palladian/importlibs.idx b/docs/palladian/importlibs.idx new file mode 100644 index 0000000..61ba5ca --- /dev/null +++ b/docs/palladian/importlibs.idx @@ -0,0 +1,3 @@ +importPreact palladian/importlibs.html#importPreact.t importlibs: importPreact() +importPreactHooks palladian/importlibs.html#importPreactHooks.t importlibs: importPreactHooks() +importPreactRouter palladian/importlibs.html#importPreactRouter.t importlibs: importPreactRouter() diff --git a/docs/palladian/preact.html b/docs/palladian/preact.html new file mode 100644 index 0000000..5626960 --- /dev/null +++ b/docs/palladian/preact.html @@ -0,0 +1,220 @@ + + + + + + + + + + + + + + + + + + +src/palladian/preact + + + + + + + + +
    +
    +

    src/palladian/preact

    +
    +
    +
    + +     Dark Mode +
    + +
    + Search: +
    +
    + Group by: + +
    + + +
    + +
    +
    + +

    + +
    +

    Types

    +
    +
    +
    Component = JsObject
    +
    + + + +
    +
    + +
    +
    +

    Procs

    +
    +
    +
    proc html(arg: cstring): Component {.importjs: "eval(\'html`\' + # + \'`\')",
+                                     ...raises: [], tags: [].}
    +
    + + + +
    +
    +
    +
    proc renderApp(component: proc (): Component; dom: Element) {.
+    importjs: "renderApp(#, #)", ...raises: [], tags: [].}
    +
    + + + +
    +
    + +
    +
    +

    Templates

    +
    +
    +
    template html(arg: string): Component
    +
    + + + +
    +
    + +
    + +
    +
    + +
    +
    + +
    + Made with Nim. Generated: 2023-02-18 21:13:49 UTC +
    +
    +
    +
    + + + diff --git a/docs/palladian/preact.idx b/docs/palladian/preact.idx new file mode 100644 index 0000000..25eca71 --- /dev/null +++ b/docs/palladian/preact.idx @@ -0,0 +1,4 @@ +Component palladian/preact.html#Component preact: Component +html palladian/preact.html#html,cstring preact: html(arg: cstring): Component +html palladian/preact.html#html.t,string preact: html(arg: string): Component +renderApp palladian/preact.html#renderApp,proc),Element preact: renderApp(component: proc (): Component; dom: Element) diff --git a/docs/theindex.html b/docs/theindex.html new file mode 100644 index 0000000..b276fde --- /dev/null +++ b/docs/theindex.html @@ -0,0 +1,112 @@ + + + + + + + + + + + + + + + + + + +Index + + + + + + + + + + + + diff --git a/palladian.nimble b/palladian.nimble index 03c87b6..082f07a 100644 --- a/palladian.nimble +++ b/palladian.nimble @@ -5,8 +5,13 @@ author = "Anonymous" description = "A new awesome nimble package" license = "MIT" srcDir = "src" +skipFiles = @["server.nim"] # Dependencies requires "nim >= 1.6.10" + +task docs, "generate nim api docs": + let cmd = "nim doc -b:js --project --index:on --outdir:docs src/palladian.nim" + exec(cmd) From 018de90fb1d90567ae8f5943f2b3f5da052f8127 Mon Sep 17 00:00:00 2001 From: itsumura-h Date: Sun, 19 Feb 2023 17:43:58 +0900 Subject: [PATCH 05/16] finish use state --- examples/example/app.nim | 2 +- examples/example/components/text_body.nim | 14 +-- .../example/contents/use-state/bool-state.md | 12 +++ .../example/contents/use-state/float-state.md | 12 +++ .../example/contents/use-state/int-state.md | 12 +++ .../contents/use-state/string-state.md | 13 +++ .../example/contents/use-state/use-state.md | 5 + examples/example/index.html | 2 + examples/example/pages/top_page.nim | 6 +- examples/example/pages/use_state_page.nim | 101 +++++++++++++++++- examples/example/public/prism.css | 3 + examples/example/public/prism.js | 8 ++ src/palladian/importlibs.nim | 5 + 13 files changed, 184 insertions(+), 11 deletions(-) create mode 100644 examples/example/contents/use-state/bool-state.md create mode 100644 examples/example/contents/use-state/float-state.md create mode 100644 examples/example/contents/use-state/int-state.md create mode 100644 examples/example/contents/use-state/string-state.md create mode 100644 examples/example/contents/use-state/use-state.md create mode 100644 examples/example/public/prism.css create mode 100644 examples/example/public/prism.js diff --git a/examples/example/app.nim b/examples/example/app.nim index ecd35b0..7856b2f 100644 --- a/examples/example/app.nim +++ b/examples/example/app.nim @@ -19,7 +19,7 @@ proc App():Component {.exportc.} =
    -
    +
    <${Router}> <${TopPage} path="/" /> <${UseStatePage} path="/use-state" /> diff --git a/examples/example/components/text_body.nim b/examples/example/components/text_body.nim index 1e00936..721d374 100644 --- a/examples/example/components/text_body.nim +++ b/examples/example/components/text_body.nim @@ -3,14 +3,14 @@ import std/jsconsole import ../../../src/palladian import ../../../src/palladian/strformat -proc TextBodyCenter*(props:JsObject):Component {.exportc.} = +proc TextHeroCenter*(props:JsObject):Component {.exportc.} = let props {.exportc.} = props return html(fmt""" -
    +
    -
    -

    ${props.title}

    -

    ${props.children}

    +
    +

    ${props.title}

    + ${props.children}
    @@ -19,10 +19,10 @@ proc TextBodyCenter*(props:JsObject):Component {.exportc.} = proc TextWrap*(props:JsObject):Component {.exportc.} = let props {.exportc.} = props return html(fmt""" -
    +
    -

    ${props.title}

    +

    ${props.title}

    ${props.children}
    diff --git a/examples/example/contents/use-state/bool-state.md b/examples/example/contents/use-state/bool-state.md new file mode 100644 index 0000000..9a12141 --- /dev/null +++ b/examples/example/contents/use-state/bool-state.md @@ -0,0 +1,12 @@ +## bool state +```nim +proc BoolStateComponent():Component {.exportc.} = + let (boolState {.exportc.}, setBoolState) = useState(false) + + proc updateState(e:Event) {.exportc.} = + setBoolState(not boolState) + + return html(fmt""" +

    Click here -->

    + """) +``` diff --git a/examples/example/contents/use-state/float-state.md b/examples/example/contents/use-state/float-state.md new file mode 100644 index 0000000..7975ac9 --- /dev/null +++ b/examples/example/contents/use-state/float-state.md @@ -0,0 +1,12 @@ +## float state +```nim +proc floatStateComponent():Component {.exportc.} = + let (floatState {.exportc.}, setFloatState) = useState(0.0) + + proc updateState(e:Event) {.exportc.} = + setFloatState(round(floatState + 0.1, 1)) + + return html(fmt""" +

    Click here -->

    + """) +``` diff --git a/examples/example/contents/use-state/int-state.md b/examples/example/contents/use-state/int-state.md new file mode 100644 index 0000000..aaae63a --- /dev/null +++ b/examples/example/contents/use-state/int-state.md @@ -0,0 +1,12 @@ +## int state +```nim +proc IntStateComponent():Component {.exportc.} = + let (intState {.exportc.}, setIntState) = useState(0) + + proc updateState(e:Event) {.exportc.} = + setIntState(intState + 1) + + return html(fmt""" +

    Click here -->

    + """) +``` diff --git a/examples/example/contents/use-state/string-state.md b/examples/example/contents/use-state/string-state.md new file mode 100644 index 0000000..9b1c611 --- /dev/null +++ b/examples/example/contents/use-state/string-state.md @@ -0,0 +1,13 @@ +## string state +```nim +proc StringStateComponent():Component {.exportc.} = + let (stringState {.exportc.}, setStringState) = useState("") + + proc updateState(e:Event) {.exportc.} = + setStringState(e.target.value) + + return html(fmt""" + +

    ${stringState}

    + """) +``` diff --git a/examples/example/contents/use-state/use-state.md b/examples/example/contents/use-state/use-state.md new file mode 100644 index 0000000..8ba1c36 --- /dev/null +++ b/examples/example/contents/use-state/use-state.md @@ -0,0 +1,5 @@ +# useState +useState is a hook provided by React and Preact that allows you to add state to functional components. +State refers to the data that is held by a component and can change over time, often in response to user interactions or other events. + +The useState hook takes an initial value as an argument and returns an array with two items: the current state value and a function that can be used to update that value. diff --git a/examples/example/index.html b/examples/example/index.html index 436a7e7..71cdf2a 100644 --- a/examples/example/index.html +++ b/examples/example/index.html @@ -5,10 +5,12 @@ + Document
    + diff --git a/examples/example/pages/top_page.nim b/examples/example/pages/top_page.nim index 4515c3a..326e5ef 100644 --- a/examples/example/pages/top_page.nim +++ b/examples/example/pages/top_page.nim @@ -15,8 +15,10 @@ proc TopPage*():Component {.exportc.} =
    - <${TextBodyCenter} title="Why Preact?"> - In creating a front-end framework made by Nim, we needed something that did not require a NodeJS environment and did not require transpiling using Babel or other software. Preact can use all of its features with a CDN call, and has a very compact library size of 3KB. + <${TextHeroCenter} title="Why Preact?"> +

    In creating a front-end framework made by Nim, we needed something that did not require a NodeJS environment + and did not require transpiling using Babel or other software. + Preact can use all of its features with a CDN call, and has a very compact library size of 3KB.

    """) diff --git a/examples/example/pages/use_state_page.nim b/examples/example/pages/use_state_page.nim index 80d47d1..9dbc934 100644 --- a/examples/example/pages/use_state_page.nim +++ b/examples/example/pages/use_state_page.nim @@ -1,10 +1,109 @@ import std/jsffi +import std/dom +import std/jsconsole +import std/math import ../../../src/palladian import ../../../src/palladian/hooks import ../../../src/palladian/strformat +{.emit:""" + import MarkdownIt from 'https://esm.sh/markdown-it@13.0.1'; +""".} + +proc newMarkdownIt():JsObject {.importjs:"new MarkdownIt(@)".} +proc highlightAll() {.importjs:"Prism.highlightAll()".} + +proc BoolStateComponent():Component {.exportc.} = + let (boolState {.exportc.}, setBoolState) = useState(false) + + proc updateState(e:Event) {.exportc.} = + setBoolState(not boolState) + + return html(fmt""" +

    Click here -->

    + """) + +proc IntStateComponent():Component {.exportc.} = + let (intState {.exportc.}, setIntState) = useState(0) + + proc updateState(e:Event) {.exportc.} = + setIntState(intState + 1) + + return html(fmt""" +

    Click here -->

    + """) + +proc FloatStateComponent():Component {.exportc.} = + let (floatState {.exportc.}, setFloatState) = useState(0.0) + + proc updateState(e:Event) {.exportc.} = + setFloatState(round(floatState + 0.1, 1)) + + return html(fmt""" +

    Click here -->

    + """) + +proc StringStateComponent():Component {.exportc.} = + let (stringState {.exportc.}, setStringState) = useState("") + + proc updateState(e:Event) {.exportc.} = + setStringState(e.target.value) + + return html(fmt""" + +

    ${stringState}

    + """) + proc UseStatePage*():Component {.exportc.} = + useEffect(proc()= + let md = newMarkdownIt() + + const useStateMd:cstring = staticRead("../contents/use-state/use-state.md") + let useStateHtml {.exportc.} = md.render(useStateMd).to(cstring); + var d = document.getElementById("useStateContent") + d.innerHtml = useStateHtml + + const boolStateMd:cstring = staticRead("../contents/use-state/bool-state.md") + let boolStateHtml {.exportc.} = md.render(boolStateMd).to(cstring); + d = document.getElementById("boolStateContent") + d.innerHtml = boolStateHtml + + const intStateMd:cstring = staticRead("../contents/use-state/int-state.md") + let intStateHtml {.exportc.} = md.render(intStateMd).to(cstring); + d = document.getElementById("intStateContent") + d.innerHtml = intStateHtml + + const floatStateMd:cstring = staticRead("../contents/use-state/float-state.md") + let floatStateHtml {.exportc.} = md.render(floatStateMd).to(cstring); + d = document.getElementById("floatStateContent") + d.innerHtml = floatStateHtml + + const stringStateMd:cstring = staticRead("../contents/use-state/string-state.md") + let stringStateHtml {.exportc.} = md.render(stringStateMd).to(cstring); + d = document.getElementById("stringStateContent") + d.innerHtml = stringStateHtml + + highlightAll() + , []) + return html(fmt""" -

    useState

    + <${TextWrap}> +
    + +
    + <${BoolStateComponent} /> + +
    + <${IntStateComponent} /> + +
    + <${FloatStateComponent} /> + +
    + <${StringStateComponent} /> + +
    +
    + """) diff --git a/examples/example/public/prism.css b/examples/example/public/prism.css new file mode 100644 index 0000000..0ef5cee --- /dev/null +++ b/examples/example/public/prism.css @@ -0,0 +1,3 @@ +/* PrismJS 1.29.0 +https://prismjs.com/download.html#themes=prism-okaidia&languages=markup+css+clike+javascript+nim */ +code[class*=language-],pre[class*=language-]{color:#f8f8f2;background:0 0;text-shadow:0 1px rgba(0,0,0,.3);font-family:Consolas,Monaco,'Andale Mono','Ubuntu Mono',monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto;border-radius:.3em}:not(pre)>code[class*=language-],pre[class*=language-]{background:#272822}:not(pre)>code[class*=language-]{padding:.1em;border-radius:.3em;white-space:normal}.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#8292a2}.token.punctuation{color:#f8f8f2}.token.namespace{opacity:.7}.token.constant,.token.deleted,.token.property,.token.symbol,.token.tag{color:#f92672}.token.boolean,.token.number{color:#ae81ff}.token.attr-name,.token.builtin,.token.char,.token.inserted,.token.selector,.token.string{color:#a6e22e}.language-css .token.string,.style .token.string,.token.entity,.token.operator,.token.url,.token.variable{color:#f8f8f2}.token.atrule,.token.attr-value,.token.class-name,.token.function{color:#e6db74}.token.keyword{color:#66d9ef}.token.important,.token.regex{color:#fd971f}.token.bold,.token.important{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help} diff --git a/examples/example/public/prism.js b/examples/example/public/prism.js new file mode 100644 index 0000000..ba3f59e --- /dev/null +++ b/examples/example/public/prism.js @@ -0,0 +1,8 @@ +/* PrismJS 1.29.0 +https://prismjs.com/download.html#themes=prism-okaidia&languages=markup+css+clike+javascript+nim */ +var _self="undefined"!=typeof window?window:"undefined"!=typeof WorkerGlobalScope&&self instanceof WorkerGlobalScope?self:{},Prism=function(e){var n=/(?:^|\s)lang(?:uage)?-([\w-]+)(?=\s|$)/i,t=0,r={},a={manual:e.Prism&&e.Prism.manual,disableWorkerMessageHandler:e.Prism&&e.Prism.disableWorkerMessageHandler,util:{encode:function e(n){return n instanceof i?new i(n.type,e(n.content),n.alias):Array.isArray(n)?n.map(e):n.replace(/&/g,"&").replace(/=g.reach);A+=w.value.length,w=w.next){var E=w.value;if(n.length>e.length)return;if(!(E instanceof i)){var P,L=1;if(y){if(!(P=l(b,A,e,m))||P.index>=e.length)break;var S=P.index,O=P.index+P[0].length,j=A;for(j+=w.value.length;S>=j;)j+=(w=w.next).value.length;if(A=j-=w.value.length,w.value instanceof i)continue;for(var C=w;C!==n.tail&&(jg.reach&&(g.reach=W);var z=w.prev;if(_&&(z=u(n,z,_),A+=_.length),c(n,z,L),w=u(n,z,new i(f,p?a.tokenize(N,p):N,k,N)),M&&u(n,w,M),L>1){var I={cause:f+","+d,reach:W};o(e,n,t,w.prev,A,I),g&&I.reach>g.reach&&(g.reach=I.reach)}}}}}}function s(){var e={value:null,prev:null,next:null},n={value:null,prev:e,next:null};e.next=n,this.head=e,this.tail=n,this.length=0}function u(e,n,t){var r=n.next,a={value:t,prev:n,next:r};return n.next=a,r.prev=a,e.length++,a}function c(e,n,t){for(var r=n.next,a=0;a"+i.content+""},!e.document)return e.addEventListener?(a.disableWorkerMessageHandler||e.addEventListener("message",(function(n){var t=JSON.parse(n.data),r=t.language,i=t.code,l=t.immediateClose;e.postMessage(a.highlight(i,a.languages[r],r)),l&&e.close()}),!1),a):a;var g=a.util.currentScript();function f(){a.manual||a.highlightAll()}if(g&&(a.filename=g.src,g.hasAttribute("data-manual")&&(a.manual=!0)),!a.manual){var h=document.readyState;"loading"===h||"interactive"===h&&g&&g.defer?document.addEventListener("DOMContentLoaded",f):window.requestAnimationFrame?window.requestAnimationFrame(f):window.setTimeout(f,16)}return a}(_self);"undefined"!=typeof module&&module.exports&&(module.exports=Prism),"undefined"!=typeof global&&(global.Prism=Prism); +Prism.languages.markup={comment:{pattern://,greedy:!0},prolog:{pattern:/<\?[\s\S]+?\?>/,greedy:!0},doctype:{pattern:/"'[\]]|"[^"]*"|'[^']*')+(?:\[(?:[^<"'\]]|"[^"]*"|'[^']*'|<(?!!--)|)*\]\s*)?>/i,greedy:!0,inside:{"internal-subset":{pattern:/(^[^\[]*\[)[\s\S]+(?=\]>$)/,lookbehind:!0,greedy:!0,inside:null},string:{pattern:/"[^"]*"|'[^']*'/,greedy:!0},punctuation:/^$|[[\]]/,"doctype-tag":/^DOCTYPE/i,name:/[^\s<>'"]+/}},cdata:{pattern://i,greedy:!0},tag:{pattern:/<\/?(?!\d)[^\s>\/=$<%]+(?:\s(?:\s*[^\s>\/=]+(?:\s*=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+(?=[\s>]))|(?=[\s/>])))+)?\s*\/?>/,greedy:!0,inside:{tag:{pattern:/^<\/?[^\s>\/]+/,inside:{punctuation:/^<\/?/,namespace:/^[^\s>\/:]+:/}},"special-attr":[],"attr-value":{pattern:/=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+)/,inside:{punctuation:[{pattern:/^=/,alias:"attr-equals"},{pattern:/^(\s*)["']|["']$/,lookbehind:!0}]}},punctuation:/\/?>/,"attr-name":{pattern:/[^\s>\/]+/,inside:{namespace:/^[^\s>\/:]+:/}}}},entity:[{pattern:/&[\da-z]{1,8};/i,alias:"named-entity"},/&#x?[\da-f]{1,8};/i]},Prism.languages.markup.tag.inside["attr-value"].inside.entity=Prism.languages.markup.entity,Prism.languages.markup.doctype.inside["internal-subset"].inside=Prism.languages.markup,Prism.hooks.add("wrap",(function(a){"entity"===a.type&&(a.attributes.title=a.content.replace(/&/,"&"))})),Object.defineProperty(Prism.languages.markup.tag,"addInlined",{value:function(a,e){var s={};s["language-"+e]={pattern:/(^$)/i,lookbehind:!0,inside:Prism.languages[e]},s.cdata=/^$/i;var t={"included-cdata":{pattern://i,inside:s}};t["language-"+e]={pattern:/[\s\S]+/,inside:Prism.languages[e]};var n={};n[a]={pattern:RegExp("(<__[^>]*>)(?:))*\\]\\]>|(?!)".replace(/__/g,(function(){return a})),"i"),lookbehind:!0,greedy:!0,inside:t},Prism.languages.insertBefore("markup","cdata",n)}}),Object.defineProperty(Prism.languages.markup.tag,"addAttribute",{value:function(a,e){Prism.languages.markup.tag.inside["special-attr"].push({pattern:RegExp("(^|[\"'\\s])(?:"+a+")\\s*=\\s*(?:\"[^\"]*\"|'[^']*'|[^\\s'\">=]+(?=[\\s>]))","i"),lookbehind:!0,inside:{"attr-name":/^[^\s=]+/,"attr-value":{pattern:/=[\s\S]+/,inside:{value:{pattern:/(^=\s*(["']|(?!["'])))\S[\s\S]*(?=\2$)/,lookbehind:!0,alias:[e,"language-"+e],inside:Prism.languages[e]},punctuation:[{pattern:/^=/,alias:"attr-equals"},/"|'/]}}}})}}),Prism.languages.html=Prism.languages.markup,Prism.languages.mathml=Prism.languages.markup,Prism.languages.svg=Prism.languages.markup,Prism.languages.xml=Prism.languages.extend("markup",{}),Prism.languages.ssml=Prism.languages.xml,Prism.languages.atom=Prism.languages.xml,Prism.languages.rss=Prism.languages.xml; +!function(s){var e=/(?:"(?:\\(?:\r\n|[\s\S])|[^"\\\r\n])*"|'(?:\\(?:\r\n|[\s\S])|[^'\\\r\n])*')/;s.languages.css={comment:/\/\*[\s\S]*?\*\//,atrule:{pattern:RegExp("@[\\w-](?:[^;{\\s\"']|\\s+(?!\\s)|"+e.source+")*?(?:;|(?=\\s*\\{))"),inside:{rule:/^@[\w-]+/,"selector-function-argument":{pattern:/(\bselector\s*\(\s*(?![\s)]))(?:[^()\s]|\s+(?![\s)])|\((?:[^()]|\([^()]*\))*\))+(?=\s*\))/,lookbehind:!0,alias:"selector"},keyword:{pattern:/(^|[^\w-])(?:and|not|only|or)(?![\w-])/,lookbehind:!0}}},url:{pattern:RegExp("\\burl\\((?:"+e.source+"|(?:[^\\\\\r\n()\"']|\\\\[^])*)\\)","i"),greedy:!0,inside:{function:/^url/i,punctuation:/^\(|\)$/,string:{pattern:RegExp("^"+e.source+"$"),alias:"url"}}},selector:{pattern:RegExp("(^|[{}\\s])[^{}\\s](?:[^{};\"'\\s]|\\s+(?![\\s{])|"+e.source+")*(?=\\s*\\{)"),lookbehind:!0},string:{pattern:e,greedy:!0},property:{pattern:/(^|[^-\w\xA0-\uFFFF])(?!\s)[-_a-z\xA0-\uFFFF](?:(?!\s)[-\w\xA0-\uFFFF])*(?=\s*:)/i,lookbehind:!0},important:/!important\b/i,function:{pattern:/(^|[^-a-z0-9])[-a-z0-9]+(?=\()/i,lookbehind:!0},punctuation:/[(){};:,]/},s.languages.css.atrule.inside.rest=s.languages.css;var t=s.languages.markup;t&&(t.tag.addInlined("style","css"),t.tag.addAttribute("style","css"))}(Prism); +Prism.languages.clike={comment:[{pattern:/(^|[^\\])\/\*[\s\S]*?(?:\*\/|$)/,lookbehind:!0,greedy:!0},{pattern:/(^|[^\\:])\/\/.*/,lookbehind:!0,greedy:!0}],string:{pattern:/(["'])(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/,greedy:!0},"class-name":{pattern:/(\b(?:class|extends|implements|instanceof|interface|new|trait)\s+|\bcatch\s+\()[\w.\\]+/i,lookbehind:!0,inside:{punctuation:/[.\\]/}},keyword:/\b(?:break|catch|continue|do|else|finally|for|function|if|in|instanceof|new|null|return|throw|try|while)\b/,boolean:/\b(?:false|true)\b/,function:/\b\w+(?=\()/,number:/\b0x[\da-f]+\b|(?:\b\d+(?:\.\d*)?|\B\.\d+)(?:e[+-]?\d+)?/i,operator:/[<>]=?|[!=]=?=?|--?|\+\+?|&&?|\|\|?|[?*/~^%]/,punctuation:/[{}[\];(),.:]/}; +Prism.languages.javascript=Prism.languages.extend("clike",{"class-name":[Prism.languages.clike["class-name"],{pattern:/(^|[^$\w\xA0-\uFFFF])(?!\s)[_$A-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\.(?:constructor|prototype))/,lookbehind:!0}],keyword:[{pattern:/((?:^|\})\s*)catch\b/,lookbehind:!0},{pattern:/(^|[^.]|\.\.\.\s*)\b(?:as|assert(?=\s*\{)|async(?=\s*(?:function\b|\(|[$\w\xA0-\uFFFF]|$))|await|break|case|class|const|continue|debugger|default|delete|do|else|enum|export|extends|finally(?=\s*(?:\{|$))|for|from(?=\s*(?:['"]|$))|function|(?:get|set)(?=\s*(?:[#\[$\w\xA0-\uFFFF]|$))|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|static|super|switch|this|throw|try|typeof|undefined|var|void|while|with|yield)\b/,lookbehind:!0}],function:/#?(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*(?:\.\s*(?:apply|bind|call)\s*)?\()/,number:{pattern:RegExp("(^|[^\\w$])(?:NaN|Infinity|0[bB][01]+(?:_[01]+)*n?|0[oO][0-7]+(?:_[0-7]+)*n?|0[xX][\\dA-Fa-f]+(?:_[\\dA-Fa-f]+)*n?|\\d+(?:_\\d+)*n|(?:\\d+(?:_\\d+)*(?:\\.(?:\\d+(?:_\\d+)*)?)?|\\.\\d+(?:_\\d+)*)(?:[Ee][+-]?\\d+(?:_\\d+)*)?)(?![\\w$])"),lookbehind:!0},operator:/--|\+\+|\*\*=?|=>|&&=?|\|\|=?|[!=]==|<<=?|>>>?=?|[-+*/%&|^!=<>]=?|\.{3}|\?\?=?|\?\.?|[~:]/}),Prism.languages.javascript["class-name"][0].pattern=/(\b(?:class|extends|implements|instanceof|interface|new)\s+)[\w.\\]+/,Prism.languages.insertBefore("javascript","keyword",{regex:{pattern:RegExp("((?:^|[^$\\w\\xA0-\\uFFFF.\"'\\])\\s]|\\b(?:return|yield))\\s*)/(?:(?:\\[(?:[^\\]\\\\\r\n]|\\\\.)*\\]|\\\\.|[^/\\\\\\[\r\n])+/[dgimyus]{0,7}|(?:\\[(?:[^[\\]\\\\\r\n]|\\\\.|\\[(?:[^[\\]\\\\\r\n]|\\\\.|\\[(?:[^[\\]\\\\\r\n]|\\\\.)*\\])*\\])*\\]|\\\\.|[^/\\\\\\[\r\n])+/[dgimyus]{0,7}v[dgimyus]{0,7})(?=(?:\\s|/\\*(?:[^*]|\\*(?!/))*\\*/)*(?:$|[\r\n,.;:})\\]]|//))"),lookbehind:!0,greedy:!0,inside:{"regex-source":{pattern:/^(\/)[\s\S]+(?=\/[a-z]*$)/,lookbehind:!0,alias:"language-regex",inside:Prism.languages.regex},"regex-delimiter":/^\/|\/$/,"regex-flags":/^[a-z]+$/}},"function-variable":{pattern:/#?(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*[=:]\s*(?:async\s*)?(?:\bfunction\b|(?:\((?:[^()]|\([^()]*\))*\)|(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*)\s*=>))/,alias:"function"},parameter:[{pattern:/(function(?:\s+(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*)?\s*\(\s*)(?!\s)(?:[^()\s]|\s+(?![\s)])|\([^()]*\))+(?=\s*\))/,lookbehind:!0,inside:Prism.languages.javascript},{pattern:/(^|[^$\w\xA0-\uFFFF])(?!\s)[_$a-z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*=>)/i,lookbehind:!0,inside:Prism.languages.javascript},{pattern:/(\(\s*)(?!\s)(?:[^()\s]|\s+(?![\s)])|\([^()]*\))+(?=\s*\)\s*=>)/,lookbehind:!0,inside:Prism.languages.javascript},{pattern:/((?:\b|\s|^)(?!(?:as|async|await|break|case|catch|class|const|continue|debugger|default|delete|do|else|enum|export|extends|finally|for|from|function|get|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|set|static|super|switch|this|throw|try|typeof|undefined|var|void|while|with|yield)(?![$\w\xA0-\uFFFF]))(?:(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*\s*)\(\s*|\]\s*\(\s*)(?!\s)(?:[^()\s]|\s+(?![\s)])|\([^()]*\))+(?=\s*\)\s*\{)/,lookbehind:!0,inside:Prism.languages.javascript}],constant:/\b[A-Z](?:[A-Z_]|\dx?)*\b/}),Prism.languages.insertBefore("javascript","string",{hashbang:{pattern:/^#!.*/,greedy:!0,alias:"comment"},"template-string":{pattern:/`(?:\\[\s\S]|\$\{(?:[^{}]|\{(?:[^{}]|\{[^}]*\})*\})+\}|(?!\$\{)[^\\`])*`/,greedy:!0,inside:{"template-punctuation":{pattern:/^`|`$/,alias:"string"},interpolation:{pattern:/((?:^|[^\\])(?:\\{2})*)\$\{(?:[^{}]|\{(?:[^{}]|\{[^}]*\})*\})+\}/,lookbehind:!0,inside:{"interpolation-punctuation":{pattern:/^\$\{|\}$/,alias:"punctuation"},rest:Prism.languages.javascript}},string:/[\s\S]+/}},"string-property":{pattern:/((?:^|[,{])[ \t]*)(["'])(?:\\(?:\r\n|[\s\S])|(?!\2)[^\\\r\n])*\2(?=\s*:)/m,lookbehind:!0,greedy:!0,alias:"property"}}),Prism.languages.insertBefore("javascript","operator",{"literal-property":{pattern:/((?:^|[,{])[ \t]*)(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*:)/m,lookbehind:!0,alias:"property"}}),Prism.languages.markup&&(Prism.languages.markup.tag.addInlined("script","javascript"),Prism.languages.markup.tag.addAttribute("on(?:abort|blur|change|click|composition(?:end|start|update)|dblclick|error|focus(?:in|out)?|key(?:down|up)|load|mouse(?:down|enter|leave|move|out|over|up)|reset|resize|scroll|select|slotchange|submit|unload|wheel)","javascript")),Prism.languages.js=Prism.languages.javascript; +Prism.languages.nim={comment:{pattern:/#.*/,greedy:!0},string:{pattern:/(?:\b(?!\d)(?:\w|\\x[89a-fA-F][0-9a-fA-F])+)?(?:"""[\s\S]*?"""(?!")|"(?:\\[\s\S]|""|[^"\\])*")/,greedy:!0},char:{pattern:/'(?:\\(?:\d+|x[\da-fA-F]{0,2}|.)|[^'])'/,greedy:!0},function:{pattern:/(?:(?!\d)(?:\w|\\x[89a-fA-F][0-9a-fA-F])+|`[^`\r\n]+`)\*?(?:\[[^\]]+\])?(?=\s*\()/,greedy:!0,inside:{operator:/\*$/}},identifier:{pattern:/`[^`\r\n]+`/,greedy:!0,inside:{punctuation:/`/}},number:/\b(?:0[xXoObB][\da-fA-F_]+|\d[\d_]*(?:(?!\.\.)\.[\d_]*)?(?:[eE][+-]?\d[\d_]*)?)(?:'?[iuf]\d*)?/,keyword:/\b(?:addr|as|asm|atomic|bind|block|break|case|cast|concept|const|continue|converter|defer|discard|distinct|do|elif|else|end|enum|except|export|finally|for|from|func|generic|if|import|include|interface|iterator|let|macro|method|mixin|nil|object|out|proc|ptr|raise|ref|return|static|template|try|tuple|type|using|var|when|while|with|without|yield)\b/,operator:{pattern:/(^|[({\[](?=\.\.)|(?![({\[]\.).)(?:(?:[=+\-*\/<>@$~&%|!?^:\\]|\.\.|\.(?![)}\]]))+|\b(?:and|div|in|is|isnot|mod|not|notin|of|or|shl|shr|xor)\b)/m,lookbehind:!0},punctuation:/[({\[]\.|\.[)}\]]|[`(){}\[\],:]/}; diff --git a/src/palladian/importlibs.nim b/src/palladian/importlibs.nim index f210119..941a38e 100644 --- a/src/palladian/importlibs.nim +++ b/src/palladian/importlibs.nim @@ -19,3 +19,8 @@ template importPreactRouter*() = import {Router} from 'https://esm.sh/preact-router@4.1.0?deps=preact@10.12.1'; import {Link} from 'https://esm.sh/preact-router@4.1.0/match?deps=preact@10.12.1'; """.} + +template importMarkdown*() = + {.emit:""" + import MarkdownIt from 'https://esm.sh/markdown-it@13.0.1'; + """.} From f9a41462bee7e366441e0af06883912f20602bd7 Mon Sep 17 00:00:00 2001 From: itsumura-h Date: Mon, 20 Feb 2023 03:27:58 +0900 Subject: [PATCH 06/16] finish use effect --- .../example/contents/use-effect/use-effect.md | 23 ++++++++ examples/example/index.html | 2 +- examples/example/libs/highlight.nim | 3 ++ examples/example/libs/markdown.nim | 10 ++++ examples/example/pages/use_effect_page.nim | 44 +++++++++++++++- examples/example/pages/use_state_page.nim | 52 +++++++++---------- src/palladian/hooks.nim | 23 +++++--- src/palladian/importlibs.nim | 2 +- 8 files changed, 120 insertions(+), 39 deletions(-) create mode 100644 examples/example/contents/use-effect/use-effect.md create mode 100644 examples/example/libs/highlight.nim create mode 100644 examples/example/libs/markdown.nim diff --git a/examples/example/contents/use-effect/use-effect.md b/examples/example/contents/use-effect/use-effect.md new file mode 100644 index 0000000..b251f3b --- /dev/null +++ b/examples/example/contents/use-effect/use-effect.md @@ -0,0 +1,23 @@ +# useEffect +`useEffect`is another hook provided by React and Preact (and other frontend frameworks) that allows you to perform side effects in functional components. Side effects refer to any code that interacts with the outside world, such as fetching data from an API, updating the document title, or subscribing to events. + +The useEffect hook takes a callback function as its first argument, and an optional array of dependencies as its second argument. The callback function will be called every time the component renders (unless the dependency array is specified and no dependencies have changed), and can perform any side effects that are needed. + +```nim +proc StringEffectComponent():Component {.exportc.} = + let (stringState {.exportc.}, setStringState) = useState("") + let (stringCount {.exportc.}, setStringCount) = useState(0) + + proc updateState(e:Event) {.exportc.} = + setStringState(e.target.value) + + useEffect(proc() = + setStringCount(stringState.len) + , @[stringState]) + + return html(fmt""" + +

    ${stringState}

    +

    ${stringCount}

    + """) +``` diff --git a/examples/example/index.html b/examples/example/index.html index 71cdf2a..6e0ffda 100644 --- a/examples/example/index.html +++ b/examples/example/index.html @@ -5,7 +5,7 @@ - + Document diff --git a/examples/example/libs/highlight.nim b/examples/example/libs/highlight.nim new file mode 100644 index 0000000..3c3f33a --- /dev/null +++ b/examples/example/libs/highlight.nim @@ -0,0 +1,3 @@ +import std/jsffi + +proc highlightAll*() {.importjs:"Prism.highlightAll()".} diff --git a/examples/example/libs/markdown.nim b/examples/example/libs/markdown.nim new file mode 100644 index 0000000..8825118 --- /dev/null +++ b/examples/example/libs/markdown.nim @@ -0,0 +1,10 @@ +import std/jsffi + +{.emit:""" + import MarkdownIt from 'https://esm.sh/markdown-it@13.0.1'; +""".} + +type MarkdownIt* = object + +proc new*(_:type MarkdownIt):MarkdownIt {.importjs:"new MarkdownIt(@)".} +proc render*(self:MarkdownIt, arg:cstring):cstring {.importjs:"#.render(#)".} diff --git a/examples/example/pages/use_effect_page.nim b/examples/example/pages/use_effect_page.nim index 8d6b7f2..67f2bae 100644 --- a/examples/example/pages/use_effect_page.nim +++ b/examples/example/pages/use_effect_page.nim @@ -1,7 +1,47 @@ +import std/dom +import std/jsconsole import ../../../src/palladian import ../../../src/palladian/strformat +import ../../../src/palladian/hooks +import ../libs/markdown +import ../libs/highlight + + +proc StringEffectComponent():Component {.exportc.} = + let (stringState {.exportc.}, setStringState) = useState("") + let (stringCount {.exportc.}, setStringCount) = useState(0) + + proc updateState(e:Event) {.exportc.} = + setStringState(e.target.value) + + useEffect(proc() = + setStringCount(stringState.len) + , @[stringState]) + + return html(fmt""" + +

    ${stringState}

    +

    ${stringCount}

    + """) proc UseEffectPage*():Component {.exportc.} = + let useEffectContent{.exportc.} = useRef() + + useEffect(proc() = + let md = MarkdownIt.new() + + const useEffectMd:cstring = staticRead("../contents/use-effect/use-effect.md") + let useEffectHtml = md.render(useEffectMd) + useEffectContent.current.innerHtml = useEffectHtml + + highlightAll() + , []) + return html(fmt""" -

    useEffect

    - """) \ No newline at end of file + <${TextWrap}> +
    + <${StringEffectComponent} /> +
    +
    + + """) diff --git a/examples/example/pages/use_state_page.nim b/examples/example/pages/use_state_page.nim index 9dbc934..f5fc855 100644 --- a/examples/example/pages/use_state_page.nim +++ b/examples/example/pages/use_state_page.nim @@ -5,13 +5,10 @@ import std/math import ../../../src/palladian import ../../../src/palladian/hooks import ../../../src/palladian/strformat +import ../components/text_body +import ../libs/markdown +import ../libs/highlight -{.emit:""" - import MarkdownIt from 'https://esm.sh/markdown-it@13.0.1'; -""".} - -proc newMarkdownIt():JsObject {.importjs:"new MarkdownIt(@)".} -proc highlightAll() {.importjs:"Prism.highlightAll()".} proc BoolStateComponent():Component {.exportc.} = let (boolState {.exportc.}, setBoolState) = useState(false) @@ -56,51 +53,52 @@ proc StringStateComponent():Component {.exportc.} = proc UseStatePage*():Component {.exportc.} = + let useStateContent {.exportc.} = useRef() + let boolStateContent {.exportc.} = useRef() + let intStateContent {.exportc.} = useRef() + let floatStateContent {.exportc.} = useRef() + let stringStateContent {.exportc.} = useRef() + useEffect(proc()= - let md = newMarkdownIt() + let md = MarkdownIt.new() const useStateMd:cstring = staticRead("../contents/use-state/use-state.md") - let useStateHtml {.exportc.} = md.render(useStateMd).to(cstring); - var d = document.getElementById("useStateContent") - d.innerHtml = useStateHtml + let useStateHtml = md.render(useStateMd) + useStateContent.current.innerHtml = useStateHtml const boolStateMd:cstring = staticRead("../contents/use-state/bool-state.md") - let boolStateHtml {.exportc.} = md.render(boolStateMd).to(cstring); - d = document.getElementById("boolStateContent") - d.innerHtml = boolStateHtml + let boolStateHtml = md.render(boolStateMd) + boolStateContent.current.innerHtml = boolStateHtml const intStateMd:cstring = staticRead("../contents/use-state/int-state.md") - let intStateHtml {.exportc.} = md.render(intStateMd).to(cstring); - d = document.getElementById("intStateContent") - d.innerHtml = intStateHtml + let intStateHtml = md.render(intStateMd) + intStateContent.current.innerHtml = intStateHtml const floatStateMd:cstring = staticRead("../contents/use-state/float-state.md") - let floatStateHtml {.exportc.} = md.render(floatStateMd).to(cstring); - d = document.getElementById("floatStateContent") - d.innerHtml = floatStateHtml + let floatStateHtml = md.render(floatStateMd) + floatStateContent.current.innerHtml = floatStateHtml const stringStateMd:cstring = staticRead("../contents/use-state/string-state.md") - let stringStateHtml {.exportc.} = md.render(stringStateMd).to(cstring); - d = document.getElementById("stringStateContent") - d.innerHtml = stringStateHtml + let stringStateHtml = md.render(stringStateMd) + stringStateContent.current.innerHtml = stringStateHtml highlightAll() , []) return html(fmt""" <${TextWrap}> -
    +
    -
    +
    <${BoolStateComponent} /> -
    +
    <${IntStateComponent} /> -
    +
    <${FloatStateComponent} /> -
    +
    <${StringStateComponent} />
    diff --git a/src/palladian/hooks.nim b/src/palladian/hooks.nim index a9fbcad..544c895 100644 --- a/src/palladian/hooks.nim +++ b/src/palladian/hooks.nim @@ -1,4 +1,5 @@ import std/asyncjs +import std/dom import std/jsffi import std/json import ./importlibs @@ -68,20 +69,20 @@ proc useState*(arg: JsonNode): (JsonNode, JsonStateSetter) = type States* = cstring|int|float|bool|JsonNode proc useEffect*(cb: proc()) {.importjs: "useEffect(#)".} - ## Side-Effects are at the heart of many modern Apps. - ## Whether you want to fetch some data from an API or trigger an effect on the document, you'll find that the useEffect fits nearly all your needs. - ## It's one of the main advantages of the hooks API, that it reshapes your mind into thinking in effects instead of a component's lifecycle. proc useEffect*(cb: proc(), dependency: array) {.importjs: "useEffect(#, [])".} proc useEffect*(cb: proc(), dependency: seq[States]) {.importjs: "useEffect(#, #)".} - ## With Dependancy - ## - ## Side-Effects are at the heart of many modern Apps. - ## Whether you want to fetch some data from an API or trigger an effect on the document, you'll find that the useEffect fits nearly all your needs. - ## It's one of the main advantages of the hooks API, that it reshapes your mind into thinking in effects instead of a component's lifecycle. proc useEffect*(cb: proc (): Future[void]) {.importjs: "useEffect(#)".} proc useEffect*(cb: proc (): Future[void], dependency: array) {.importjs: "useEffect(#, [])".} proc useEffect*(cb: proc (): Future[void], dependency: seq[States]) {.importjs: "useEffect(#, #)".} +proc useMemo*(cb: proc()) {.importjs: "useMemo(#)".} +proc useMemo*(cb: proc(), dependency: array) {.importjs: "useMemo(#, [])".} +proc useMemo*(cb: proc(), dependency: seq[States]) {.importjs: "useMemo(#, #)".} + +proc useCallback*(cb: proc()) {.importjs: "useCallback(#)".} +proc useCallback*(cb: proc(), dependency: array) {.importjs: "useCallback(#, [])".} +proc useCallback*(cb: proc(), dependency: seq[States]) {.importjs: "useCallback(#, #)".} + type BoolSignal = object of JsObject type BoolSignalValue* = bool proc signal*(arg: bool): BoolSignal {.importjs: "signal(#)".} @@ -116,3 +117,9 @@ type JsonSignalValue* = JsonNode proc signal*(arg: JsonNode): JsonSignal {.importjs: "signal(#)".} proc value*(self: JsonSignal): JsonSignalValue {.importjs: "#.value".} proc `value=`*(self: JsonSignal, val: JsonNode) {.importjs: "#.value = #".} + + +type RefObject = object + current*:Element + +proc useRef*():RefObject {.importjs:"useRef(null)".} diff --git a/src/palladian/importlibs.nim b/src/palladian/importlibs.nim index 941a38e..6a298a7 100644 --- a/src/palladian/importlibs.nim +++ b/src/palladian/importlibs.nim @@ -10,7 +10,7 @@ template importPreact*() = template importPreactHooks*() = {.emit: """ - import { useState, useEffect, useMemo } from 'https://esm.sh/preact@10.12.1/hooks'; + import { useState, useEffect, useMemo, useRef, useCallback } from 'https://esm.sh/preact@10.12.1/hooks'; import { signal, Signal } from 'https://esm.sh/@preact/signals@1.1.3?deps=preact@10.12.1'; """.} From ccc08ef363e27d71765d4c81d0b69b47ec24751f Mon Sep 17 00:00:00 2001 From: itsumura-h Date: Mon, 20 Feb 2023 05:13:55 +0900 Subject: [PATCH 07/16] rm getProcName --- getProcName.html | 12 -- getProcName.js | 368 ----------------------------------------------- getProcName.nim | 32 ----- 3 files changed, 412 deletions(-) delete mode 100644 getProcName.html delete mode 100644 getProcName.js delete mode 100644 getProcName.nim diff --git a/getProcName.html b/getProcName.html deleted file mode 100644 index c4e1760..0000000 --- a/getProcName.html +++ /dev/null @@ -1,12 +0,0 @@ - - - - - - - - Document - - - - diff --git a/getProcName.js b/getProcName.js deleted file mode 100644 index ff1f692..0000000 --- a/getProcName.js +++ /dev/null @@ -1,368 +0,0 @@ -/* Generated by the Nim Compiler v1.6.10 */ -var framePtr = null; -var excHandler = 0; -var lastJSError = null; -var NTI33554439 = {size: 0,kind: 28,base: null,node: null,finalizer: null}; - -function makeNimstrLit(c_33556801) { - var result = []; - for (var i = 0; i < c_33556801.length; ++i) { - result[i] = c_33556801.charCodeAt(i); - } - return result; - - - -} - -function setConstr() { - var result = {}; - for (var i = 0; i < arguments.length; ++i) { - var x = arguments[i]; - if (typeof(x) == "object") { - for (var j = x[0]; j <= x[1]; ++j) { - result[j] = true; - } - } else { - result[x] = true; - } - } - return result; - - - -} -var ConstSet1 = setConstr(17, 16, 4, 18, 27, 19, 23, 22, 21); - -function nimCopy(dest_33557140, src_33557141, ti_33557142) { - var result_33557151 = null; - - switch (ti_33557142.kind) { - case 21: - case 22: - case 23: - case 5: - if (!(isFatPointer_33557131(ti_33557142))) { - result_33557151 = src_33557141; - } - else { - result_33557151 = [src_33557141[0], src_33557141[1]]; - } - - break; - case 19: - if (dest_33557140 === null || dest_33557140 === undefined) { - dest_33557140 = {}; - } - else { - for (var key in dest_33557140) { delete dest_33557140[key]; } - } - for (var key in src_33557141) { dest_33557140[key] = src_33557141[key]; } - result_33557151 = dest_33557140; - - break; - case 18: - case 17: - if (!((ti_33557142.base == null))) { - result_33557151 = nimCopy(dest_33557140, src_33557141, ti_33557142.base); - } - else { - if ((ti_33557142.kind == 17)) { - result_33557151 = (dest_33557140 === null || dest_33557140 === undefined) ? {m_type: ti_33557142} : dest_33557140; - } - else { - result_33557151 = (dest_33557140 === null || dest_33557140 === undefined) ? {} : dest_33557140; - } - } - nimCopyAux(result_33557151, src_33557141, ti_33557142.node); - break; - case 24: - case 4: - case 27: - case 16: - if (src_33557141 === null) { - result_33557151 = null; - } - else { - if (dest_33557140 === null || dest_33557140 === undefined || dest_33557140.length != src_33557141.length) { - dest_33557140 = new Array(src_33557141.length); - } - result_33557151 = dest_33557140; - for (var i = 0; i < src_33557141.length; ++i) { - result_33557151[i] = nimCopy(result_33557151[i], src_33557141[i], ti_33557142.base); - } - } - - break; - case 28: - if (src_33557141 !== null) { - result_33557151 = src_33557141.slice(0); - } - - break; - default: - result_33557151 = src_33557141; - break; - } - - return result_33557151; - -} - -function toJSStr(s_33556807) { - var Temporary5; - var Temporary7; - - var result_33556808 = null; - - var res_33556842 = newSeq_33556825((s_33556807).length); - var i_33556843 = 0; - var j_33556844 = 0; - Label1: do { - Label2: while (true) { - if (!(i_33556843 < (s_33556807).length)) break Label2; - var c_33556845 = s_33556807[i_33556843]; - if ((c_33556845 < 128)) { - res_33556842[j_33556844] = String.fromCharCode(c_33556845); - i_33556843 += 1; - } - else { - var helper_33556857 = newSeq_33556825(0); - Label3: do { - Label4: while (true) { - if (!true) break Label4; - var code_33556858 = c_33556845.toString(16); - if ((((code_33556858) == null ? 0 : (code_33556858).length) == 1)) { - helper_33556857.push("%0");; - } - else { - helper_33556857.push("%");; - } - - helper_33556857.push(code_33556858);; - i_33556843 += 1; - if (((s_33556807).length <= i_33556843)) Temporary5 = true; else { Temporary5 = (s_33556807[i_33556843] < 128); } if (Temporary5) { - break Label3; - } - - c_33556845 = s_33556807[i_33556843]; - } - } while (false); -++excHandler; - Temporary7 = framePtr; - try { - res_33556842[j_33556844] = decodeURIComponent(helper_33556857.join("")); ---excHandler; -} catch (EXCEPTION) { - var prevJSError = lastJSError; - lastJSError = EXCEPTION; - --excHandler; - framePtr = Temporary7; - res_33556842[j_33556844] = helper_33556857.join(""); - lastJSError = prevJSError; - } finally { - framePtr = Temporary7; - } - } - - j_33556844 += 1; - } - } while (false); - if (res_33556842.length < j_33556844) { for (var i = res_33556842.length ; i < j_33556844 ; ++i) res_33556842.push(null); } - else { res_33556842.length = j_33556844; }; - result_33556808 = res_33556842.join(""); - - return result_33556808; - -} - -function rawEcho() { - var buf = ""; - for (var i = 0; i < arguments.length; ++i) { - buf += toJSStr(arguments[i]); - } - console.log(buf); - - - -} - -function mnewString(len_33556893) { - return new Array(len_33556893); - - - -} -if (!Math.trunc) { - Math.trunc = function(v) { - v = +v; - if (!isFinite(v)) return v; - return (v - v % 1) || (v < 0 ? -0 : v === 0 ? v : 0); - }; -} - -var objectID_671088802 = [0]; -import { h, render } from 'https://cdn.jsdelivr.net/npm/preact@10.11.3/+esm'; -import htm from 'https://cdn.jsdelivr.net/npm/htm@3.1.1/+esm' -import { useState, useEffect, useMemo } from 'https://cdn.jsdelivr.net/npm/preact@10.11.3/hooks/+esm'; -import {Router, Link} from 'https://cdn.jsdelivr.net/npm/preact-router@4.1.0/+esm'; -import { signal, Signal } from 'https://cdn.jsdelivr.net/npm/@preact/signals@1.1.3/+esm'; - -const html = htm.bind(h); - -// https://gist.github.com/developit/af2a4488de152a84bff83e035bb8afc1 -Signal.prototype.map = function(fn) { return html`` }; - -export function For({ each, children: f }) { - let c = useMemo(() => new Map, []); - let value = each.value; - if (!Array.isArray(value)) return html``; - return value.map((v, k, x) => c.get(v) || (c.set(v, x = html``), x)); -} -let Item = ({ v, k, f }) => f(v, k); - -export function Show({ when, fallback, children: f }) { - let v = when.value; - return v ? typeof f === 'function' ? html`` : f : fallback; -} - -function renderApp(component, dom){ - render(html`<${component} />`, dom) -} - - -function FuncA() { - var result_469762056 = null; - - BeforeRet: do { - result_469762056 = eval('html`' + "

    a

    " + '`'); - break BeforeRet; - } while (false); - - return result_469762056; - -} - -function isFatPointer_33557131(ti_33557132) { - var result_33557133 = false; - - BeforeRet: do { - result_33557133 = !((ConstSet1[ti_33557132.base.kind] != undefined)); - break BeforeRet; - } while (false); - - return result_33557133; - -} - -function nimCopyAux(dest_33557144, src_33557145, n_33557146) { - switch (n_33557146.kind) { - case 0: - break; - case 1: - dest_33557144[n_33557146.offset] = nimCopy(dest_33557144[n_33557146.offset], src_33557145[n_33557146.offset], n_33557146.typ); - - break; - case 2: - for (var i = 0; i < n_33557146.sons.length; i++) { - nimCopyAux(dest_33557144, src_33557145, n_33557146.sons[i]); - } - - break; - case 3: - dest_33557144[n_33557146.offset] = nimCopy(dest_33557144[n_33557146.offset], src_33557145[n_33557146.offset], n_33557146.typ); - for (var i = 0; i < n_33557146.sons.length; ++i) { - nimCopyAux(dest_33557144, src_33557145, n_33557146.sons[i][1]); - } - - break; - } - - -} - -function newSeq_33556825(len_33556827) { - var result_33556828 = []; - - result_33556828 = new Array(len_33556827); for (var i = 0 ; i < len_33556827 ; ++i) { result_33556828[i] = null; } - return result_33556828; - -} - -function getProcName_469762073() { - var result_469762074 = null; - - BeforeRet: do { - result_469762074 = (("${" + toJSStr(procNameHEX60gensym1_469762072)) + "}"); - break BeforeRet; - } while (false); - - return result_469762074; - -} - -function add_33556419(x_33556420, x_33556420_Idx, y_33556421) { - if (x_33556420[x_33556420_Idx] === null) { x_33556420[x_33556420_Idx] = []; } - var off = x_33556420[x_33556420_Idx].length; - x_33556420[x_33556420_Idx].length += y_33556421.length; - for (var i = 0; i < y_33556421.length; ++i) { - x_33556420[x_33556420_Idx][off+i] = y_33556421.charCodeAt(i); - } - - - -} - -function getProcName_469762091() { - var result_469762092 = null; - - BeforeRet: do { - result_469762092 = (("${" + toJSStr(procNameHEX60gensym4_469762090)) + "}"); - break BeforeRet; - } while (false); - - return result_469762092; - -} - -function getProcName_469762107() { - var result_469762108 = null; - - BeforeRet: do { - result_469762108 = (("${" + toJSStr(procNameHEX60gensym9_469762106)) + "}"); - break BeforeRet; - } while (false); - - return result_469762108; - -} -Label1: do { - Label2: do { - } while (false); - var procNameHEX60gensym1_469762072 = nimCopy(null, makeNimstrLit("FuncA"), NTI33554439); -} while (false); -console.log(getProcName_469762073()); -var fmtRes_469762083 = [mnewString(0)]; -fmtRes_469762083[0].push.apply(fmtRes_469762083[0], makeNimstrLit("aaa "));; -Label3: do { - Label4: do { - } while (false); - var procNameHEX60gensym4_469762090 = nimCopy(null, makeNimstrLit("FuncA"), NTI33554439); -} while (false); -add_33556419(fmtRes_469762083, 0, getProcName_469762091()); -rawEcho(fmtRes_469762083[0]); -Label5: do { - const fmt = (strings, ...values) => { - return values.reduce((finalString, value, index) => { - return `${finalString}${value}${strings[index + 1]}`}, strings[0]).slice(1, -1) - }; - var fmtRes_469762104 = [mnewString(0)]; - fmtRes_469762104[0].push.apply(fmtRes_469762104[0], makeNimstrLit("aaa "));; - Label6: do { - Label7: do { - } while (false); - var procNameHEX60gensym9_469762106 = nimCopy(null, makeNimstrLit("FuncA"), NTI33554439); - } while (false); - add_33556419(fmtRes_469762104, 0, getProcName_469762107()); - rawEcho(fmtRes_469762104[0]); -} while (false); diff --git a/getProcName.nim b/getProcName.nim deleted file mode 100644 index 08b086d..0000000 --- a/getProcName.nim +++ /dev/null @@ -1,32 +0,0 @@ -import std/jsffi -import std/dom -import std/jsconsole -import std/strformat -import std/macros -import ./src/palladian/preact -import nodejs/jsstrformat - -proc FuncA():Component {.exportc.} = - return html("

    a

    ") - -macro getProcNameMacro(arg:untyped):untyped = - let procName = arg.strVal - result = quote do: - block: - `procName` - -template `$`*(arg:proc():Component):untyped = - block: - let procName = getProcNameMacro(arg) - proc getProcName():cstring = - return "${".cstring & procName.cstring & "}".cstring - getProcName() - -console.log($FuncA) -echo fmt"aaa {FuncA}" # == "aaa FuncA"としたい -echo fmt"aaa {$FuncA}" # == "aaa FuncA"としたい -let body = document.body -echo fmt"aaa {$body}" # == "aaa FuncA"としたい -jsFmt: - echo fmt"aaa {$FuncA}" # == "aaa FuncA"としたい - echo fmt"aaa {body}" # == "aaa FuncA"としたい From d5ad01212395071478f057745cd5c2f0896f99f6 Mon Sep 17 00:00:00 2001 From: itsumura-h Date: Tue, 21 Feb 2023 04:41:58 +0900 Subject: [PATCH 08/16] prisma code highlight --- examples/example/components/code_block.nim | 22 + examples/example/components/text_body.nim | 16 +- .../example/contents/use-effect/use-effect.md | 23 - .../example/contents/use-state/bool-state.md | 12 - .../example/contents/use-state/float-state.md | 12 - .../example/contents/use-state/int-state.md | 12 - .../contents/use-state/string-state.md | 13 - .../example/contents/use-state/use-state.md | 5 - examples/example/index.html | 2 +- examples/example/pages/api_access_page.nim | 4 +- examples/example/pages/top_page.nim | 83 +- examples/example/pages/use_effect_page.nim | 51 +- examples/example/pages/use_state_page.nim | 127 +- examples/preact/index.html | 3 +- examples/preact/main.nim | 2 +- examples/preact/public/prism.css | 3 + examples/preact/public/prism.js | 8 + examples/preact/public/typography.css | 7833 +++++++++++++++++ examples/preact/raw.js | 80 +- src/palladian/hooks.nim | 21 +- src/palladian/strformat.nim | 2 +- 21 files changed, 8116 insertions(+), 218 deletions(-) create mode 100644 examples/example/components/code_block.nim delete mode 100644 examples/example/contents/use-effect/use-effect.md delete mode 100644 examples/example/contents/use-state/bool-state.md delete mode 100644 examples/example/contents/use-state/float-state.md delete mode 100644 examples/example/contents/use-state/int-state.md delete mode 100644 examples/example/contents/use-state/string-state.md delete mode 100644 examples/example/contents/use-state/use-state.md create mode 100644 examples/preact/public/prism.css create mode 100644 examples/preact/public/prism.js create mode 100644 examples/preact/public/typography.css diff --git a/examples/example/components/code_block.nim b/examples/example/components/code_block.nim new file mode 100644 index 0000000..c285c2f --- /dev/null +++ b/examples/example/components/code_block.nim @@ -0,0 +1,22 @@ +import std/jsffi +import std/dom +import std/strutils +import ../../../src/palladian +import ../../../src/palladian/strformat +import ../../../src/palladian/hooks +import ../libs/highlight + +proc CodeBlock(props:JsObject):Component {.exportc.} = + let codeRef {.exportc.} = useRef() + + useEffect(proc() = + var code = $props.children.to(cstring) + code = code.replace("\\", "").dedent() + codeRef.current.textContent = code + highlightAll() + , []) + + return html(fmt""" + 
    
+
    + """) diff --git a/examples/example/components/text_body.nim b/examples/example/components/text_body.nim index 721d374..666b2d5 100644 --- a/examples/example/components/text_body.nim +++ b/examples/example/components/text_body.nim @@ -1,28 +1,30 @@ import std/jsffi -import std/jsconsole import ../../../src/palladian import ../../../src/palladian/strformat -proc TextHeroCenter*(props:JsObject):Component {.exportc.} = +proc Hero*(props:JsObject):Component {.exportc.} = let props {.exportc.} = props return html(fmt"""
    -
    -

    ${props.title}

    +
    ${props.children} -
    +
    """) -proc TextWrap*(props:JsObject):Component {.exportc.} = +proc Article*(props:JsObject):Component {.exportc.} = let props {.exportc.} = props return html(fmt""" +
    -

    ${props.title}

    ${props.children}
    diff --git a/examples/example/contents/use-effect/use-effect.md b/examples/example/contents/use-effect/use-effect.md deleted file mode 100644 index b251f3b..0000000 --- a/examples/example/contents/use-effect/use-effect.md +++ /dev/null @@ -1,23 +0,0 @@ -# useEffect -`useEffect`is another hook provided by React and Preact (and other frontend frameworks) that allows you to perform side effects in functional components. Side effects refer to any code that interacts with the outside world, such as fetching data from an API, updating the document title, or subscribing to events. - -The useEffect hook takes a callback function as its first argument, and an optional array of dependencies as its second argument. The callback function will be called every time the component renders (unless the dependency array is specified and no dependencies have changed), and can perform any side effects that are needed. - -```nim -proc StringEffectComponent():Component {.exportc.} = - let (stringState {.exportc.}, setStringState) = useState("") - let (stringCount {.exportc.}, setStringCount) = useState(0) - - proc updateState(e:Event) {.exportc.} = - setStringState(e.target.value) - - useEffect(proc() = - setStringCount(stringState.len) - , @[stringState]) - - return html(fmt""" - -

    ${stringState}

    -

    ${stringCount}

    - """) -``` diff --git a/examples/example/contents/use-state/bool-state.md b/examples/example/contents/use-state/bool-state.md deleted file mode 100644 index 9a12141..0000000 --- a/examples/example/contents/use-state/bool-state.md +++ /dev/null @@ -1,12 +0,0 @@ -## bool state -```nim -proc BoolStateComponent():Component {.exportc.} = - let (boolState {.exportc.}, setBoolState) = useState(false) - - proc updateState(e:Event) {.exportc.} = - setBoolState(not boolState) - - return html(fmt""" -

    Click here -->

    - """) -``` diff --git a/examples/example/contents/use-state/float-state.md b/examples/example/contents/use-state/float-state.md deleted file mode 100644 index 7975ac9..0000000 --- a/examples/example/contents/use-state/float-state.md +++ /dev/null @@ -1,12 +0,0 @@ -## float state -```nim -proc floatStateComponent():Component {.exportc.} = - let (floatState {.exportc.}, setFloatState) = useState(0.0) - - proc updateState(e:Event) {.exportc.} = - setFloatState(round(floatState + 0.1, 1)) - - return html(fmt""" -

    Click here -->

    - """) -``` diff --git a/examples/example/contents/use-state/int-state.md b/examples/example/contents/use-state/int-state.md deleted file mode 100644 index aaae63a..0000000 --- a/examples/example/contents/use-state/int-state.md +++ /dev/null @@ -1,12 +0,0 @@ -## int state -```nim -proc IntStateComponent():Component {.exportc.} = - let (intState {.exportc.}, setIntState) = useState(0) - - proc updateState(e:Event) {.exportc.} = - setIntState(intState + 1) - - return html(fmt""" -

    Click here -->

    - """) -``` diff --git a/examples/example/contents/use-state/string-state.md b/examples/example/contents/use-state/string-state.md deleted file mode 100644 index 9b1c611..0000000 --- a/examples/example/contents/use-state/string-state.md +++ /dev/null @@ -1,13 +0,0 @@ -## string state -```nim -proc StringStateComponent():Component {.exportc.} = - let (stringState {.exportc.}, setStringState) = useState("") - - proc updateState(e:Event) {.exportc.} = - setStringState(e.target.value) - - return html(fmt""" - -

    ${stringState}

    - """) -``` diff --git a/examples/example/contents/use-state/use-state.md b/examples/example/contents/use-state/use-state.md deleted file mode 100644 index 8ba1c36..0000000 --- a/examples/example/contents/use-state/use-state.md +++ /dev/null @@ -1,5 +0,0 @@ -# useState -useState is a hook provided by React and Preact that allows you to add state to functional components. -State refers to the data that is held by a component and can change over time, often in response to user interactions or other events. - -The useState hook takes an initial value as an argument and returns an array with two items: the current state value and a function that can be used to update that value. diff --git a/examples/example/index.html b/examples/example/index.html index 6e0ffda..da9d678 100644 --- a/examples/example/index.html +++ b/examples/example/index.html @@ -7,7 +7,7 @@ - Document + Nim Palladian
    diff --git a/examples/example/pages/api_access_page.nim b/examples/example/pages/api_access_page.nim index fa0c7f6..3d4fdb8 100644 --- a/examples/example/pages/api_access_page.nim +++ b/examples/example/pages/api_access_page.nim @@ -1,5 +1,4 @@ import std/asyncjs -import std/jsconsole import std/jsffi import std/jsfetch import std/json @@ -25,8 +24,9 @@ proc ApiAccessPage*():Component {.exportc.} = , []) return html(fmt""" - <${TextWrap} title="api access"> + <${Article}> <${Show} when=${btcPrice} fallback=${html`

    ...loading

    `}> +

    API Access

    updated ${btcPrice["time"]}

    diff --git a/examples/example/pages/top_page.nim b/examples/example/pages/top_page.nim index 326e5ef..add698a 100644 --- a/examples/example/pages/top_page.nim +++ b/examples/example/pages/top_page.nim @@ -1,37 +1,68 @@ +import std/dom import std/jsffi +import std/strutils import ../../../src/palladian import ../../../src/palladian/strformat +import ../../../src/palladian/hooks import ../components/text_body +import ../components/code_block +import ../libs/highlight + proc TopPage*():Component {.exportc.} = + let sampleCode {.exportc.} :cstring = """ + proc Counter():Component {.exportc.} = + let (value {.exportc.}, setValue) = useState(0); + + proc increment(e:Event) {.exportc.} = + setValue(value + 1) + + proc decrement(e:Event) {.exportc.} = + setValue(value - 1) + + return html(\"\"" +
    Counter: {value}
    + + + \"\"") + """ + + useEffect(proc()= + document.title = "Toppage / Nim Palladian" + , []) + return html(fmt"""
    -
    -
    -
    -

    Nim Palladian

    -

    Palladian is a Nim front-end framework based on and wrapped around Preact.

    - -
    -
    -
    - <${TextHeroCenter} title="Why Preact?"> -

    In creating a front-end framework made by Nim, we needed something that did not require a NodeJS environment - and did not require transpiling using Babel or other software. - Preact can use all of its features with a CDN call, and has a very compact library size of 3KB.

    + <${Hero}> +

    Nim Palladian

    +

    Palladian is a Nim front-end framework for SPA based on and wrapped around Preact.

    + + <${Article}> +

    Why Preact?

    +

    + In creating a front-end framework made by Nim, we needed something that did not require a NodeJS environment + and did not require transpiling using Babel or other software. + Preact can use all of its features with a CDN call, and has a very compact library size of 3KB. +

    +

    + Furthermore, unlike React, Preact can use the browser standard API for DOM manipulation. +

    + + <${Article}> +

    Features

    +
      +
    • Easy syntax by Nim
      • +
    • Extensive assets by JavScript
      • +
    • The evolution of CDN that allow development without NodeJS
      • +
    • Resolving library dependencies by esm.sh
      • +
    • +
    + <${CodeBlock}> + ${sampleCode} +
    - """) - -#[ - -
    -
    -
    -

    Why Preact?

    -

    In creating a front-end framework made by Nim, we needed something that did not require a NodeJS environment and did not require transpiling using Babel or other software. Preact can use all of its features with a CDN call, and has a very compact library size of 3KB.

    -
    -
    -
    -]# \ No newline at end of file +
    +
    + """) diff --git a/examples/example/pages/use_effect_page.nim b/examples/example/pages/use_effect_page.nim index 67f2bae..41e1d9a 100644 --- a/examples/example/pages/use_effect_page.nim +++ b/examples/example/pages/use_effect_page.nim @@ -3,8 +3,8 @@ import std/jsconsole import ../../../src/palladian import ../../../src/palladian/strformat import ../../../src/palladian/hooks -import ../libs/markdown import ../libs/highlight +import ../components/code_block proc StringEffectComponent():Component {.exportc.} = @@ -25,23 +25,52 @@ proc StringEffectComponent():Component {.exportc.} = """) proc UseEffectPage*():Component {.exportc.} = - let useEffectContent{.exportc.} = useRef() + let sampleCode {.exportc.} :cstring = """ +proc StringEffectComponent():Component {.exportc.} = + let (stringState {.exportc.}, setStringState) = useState("") + let (stringCount {.exportc.}, setStringCount) = useState(0) + + proc updateState(e:Event) {.exportc.} = + setStringState(e.target.value) useEffect(proc() = - let md = MarkdownIt.new() + setStringCount(stringState.len) + , @[stringState]) - const useEffectMd:cstring = staticRead("../contents/use-effect/use-effect.md") - let useEffectHtml = md.render(useEffectMd) - useEffectContent.current.innerHtml = useEffectHtml + return html(\"\"" + +

    ${stringState}

    +

    ${stringCount}

    + \"\"") + """ - highlightAll() + useEffect(proc() = + document.title = "useEffect / Nim Palladian" , []) return html(fmt""" - <${TextWrap}> -
    + <${Article}> +

    useEffect

    +

    + useEffectis another hook provided by Preact (and other frontend frameworks) that allows you to perform side effects in functional components. + Side effects refer to any code that interacts with the outside world, such as fetching data from an API, updating the document title, or subscribing to events. +

    + +

    + The useEffect hook takes a callback function as its first argument, and an optional array of dependencies as its second argument. + The callback function will be called every time the component renders (unless the dependency array is specified and no dependencies have changed), and can perform any side effects that are needed. +

    + +

    + See also
    + Preact - Side Effects +

    + + <${CodeBlock}> + ${sampleCode} + <${StringEffectComponent} /> -
    -
    +
    +
    """) diff --git a/examples/example/pages/use_state_page.nim b/examples/example/pages/use_state_page.nim index f5fc855..918bc9b 100644 --- a/examples/example/pages/use_state_page.nim +++ b/examples/example/pages/use_state_page.nim @@ -1,12 +1,11 @@ import std/jsffi import std/dom -import std/jsconsole import std/math import ../../../src/palladian import ../../../src/palladian/hooks import ../../../src/palladian/strformat import ../components/text_body -import ../libs/markdown +import ../components/code_block import ../libs/highlight @@ -20,6 +19,20 @@ proc BoolStateComponent():Component {.exportc.} =

    Click here -->

    """) +let boolStateCode {.exportc.} :cstring = """ + proc BoolStateComponent():Component {.exportc.} = + let (boolState {.exportc.}, setBoolState) = useState(false) + + proc updateState(e:Event) {.exportc.} = + setBoolState(not boolState) + + return html(\"\"\" +

    Click here -->

    + \"\"\") +""" + + + proc IntStateComponent():Component {.exportc.} = let (intState {.exportc.}, setIntState) = useState(0) @@ -30,6 +43,19 @@ proc IntStateComponent():Component {.exportc.} =

    Click here -->

    """) +let intStateCode {.exportc.} :cstring = """ +proc IntStateComponent():Component {.exportc.} = + let (intState {.exportc.}, setIntState) = useState(0) + + proc updateState(e:Event) {.exportc.} = + setIntState(intState + 1) + + return html(\"\"\" +

    Click here -->

    + \"\"\") +""" + + proc FloatStateComponent():Component {.exportc.} = let (floatState {.exportc.}, setFloatState) = useState(0.0) @@ -40,6 +66,19 @@ proc FloatStateComponent():Component {.exportc.} =

    Click here -->

    """) +let floatStateCode {.exportc.} :cstring = """ +proc FloatStateComponent():Component {.exportc.} = + let (floatState {.exportc.}, setFloatState) = useState(0.0) + + proc updateState(e:Event) {.exportc.} = + setFloatState(round(floatState + 0.1, 1)) + + return html(\"\"\" +

    Click here -->

    + \"\"\") +""" + + proc StringStateComponent():Component {.exportc.} = let (stringState {.exportc.}, setStringState) = useState("") @@ -51,57 +90,65 @@ proc StringStateComponent():Component {.exportc.} =

    ${stringState}

    """) +let stringStateCode {.exportc.} :cstring = """ +proc StringStateComponent():Component {.exportc.} = + let (stringState {.exportc.}, setStringState) = useState("") -proc UseStatePage*():Component {.exportc.} = - let useStateContent {.exportc.} = useRef() - let boolStateContent {.exportc.} = useRef() - let intStateContent {.exportc.} = useRef() - let floatStateContent {.exportc.} = useRef() - let stringStateContent {.exportc.} = useRef() - - useEffect(proc()= - let md = MarkdownIt.new() - - const useStateMd:cstring = staticRead("../contents/use-state/use-state.md") - let useStateHtml = md.render(useStateMd) - useStateContent.current.innerHtml = useStateHtml - - const boolStateMd:cstring = staticRead("../contents/use-state/bool-state.md") - let boolStateHtml = md.render(boolStateMd) - boolStateContent.current.innerHtml = boolStateHtml - - const intStateMd:cstring = staticRead("../contents/use-state/int-state.md") - let intStateHtml = md.render(intStateMd) - intStateContent.current.innerHtml = intStateHtml + proc updateState(e:Event) {.exportc.} = + setStringState(e.target.value) - const floatStateMd:cstring = staticRead("../contents/use-state/float-state.md") - let floatStateHtml = md.render(floatStateMd) - floatStateContent.current.innerHtml = floatStateHtml + return html(\"\"\" + +

    ${stringState}

    + \"\"\") +""" - const stringStateMd:cstring = staticRead("../contents/use-state/string-state.md") - let stringStateHtml = md.render(stringStateMd) - stringStateContent.current.innerHtml = stringStateHtml - highlightAll() +proc UseStatePage*():Component {.exportc.} = + useEffect(proc()= + document.title = "useState / Nim Palladian" , []) return html(fmt""" - <${TextWrap}> -
    - -
    + <${Article}> +

    useState

    +

    + useState is a hook provided by Preact that allows you to add state to functional components. +
    + State refers to the data that is held by a component and can change over time, often in response to user interactions or other events. +

    +

    + The useState hook takes an initial value as an argument and returns an array with two items: the current state value and a function that can be used to update that value. +

    +

    + See also
    + Preact - useState +

    + +

    Bool state

    + <${CodeBlock}> + ${boolStateCode} + <${BoolStateComponent} /> -
    +

    Int state

    + <${CodeBlock}> + ${intStateCode} + <${IntStateComponent} /> -
    +

    Float state

    + <${CodeBlock}> + ${floatStateCode} + <${FloatStateComponent} /> -
    +

    String state

    + <${CodeBlock}> + ${stringStateCode} + <${StringStateComponent} /> - -
    -
    +
    +
    """) diff --git a/examples/preact/index.html b/examples/preact/index.html index 3e09af8..1cada5a 100644 --- a/examples/preact/index.html +++ b/examples/preact/index.html @@ -3,11 +3,12 @@ + - Document
    + diff --git a/examples/preact/main.nim b/examples/preact/main.nim index 3adaa83..54cff51 100644 --- a/examples/preact/main.nim +++ b/examples/preact/main.nim @@ -8,4 +8,4 @@ proc controller(req:Request):Future[string] {.async.}= var routes:seq[Route] = @[] routes.add Route(httpMethod:HttpGet, path:"*", controller:controller) -serve(routes, 9001).waitFor +serve(routes, 9002).waitFor diff --git a/examples/preact/public/prism.css b/examples/preact/public/prism.css new file mode 100644 index 0000000..0ef5cee --- /dev/null +++ b/examples/preact/public/prism.css @@ -0,0 +1,3 @@ +/* PrismJS 1.29.0 +https://prismjs.com/download.html#themes=prism-okaidia&languages=markup+css+clike+javascript+nim */ +code[class*=language-],pre[class*=language-]{color:#f8f8f2;background:0 0;text-shadow:0 1px rgba(0,0,0,.3);font-family:Consolas,Monaco,'Andale Mono','Ubuntu Mono',monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto;border-radius:.3em}:not(pre)>code[class*=language-],pre[class*=language-]{background:#272822}:not(pre)>code[class*=language-]{padding:.1em;border-radius:.3em;white-space:normal}.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#8292a2}.token.punctuation{color:#f8f8f2}.token.namespace{opacity:.7}.token.constant,.token.deleted,.token.property,.token.symbol,.token.tag{color:#f92672}.token.boolean,.token.number{color:#ae81ff}.token.attr-name,.token.builtin,.token.char,.token.inserted,.token.selector,.token.string{color:#a6e22e}.language-css .token.string,.style .token.string,.token.entity,.token.operator,.token.url,.token.variable{color:#f8f8f2}.token.atrule,.token.attr-value,.token.class-name,.token.function{color:#e6db74}.token.keyword{color:#66d9ef}.token.important,.token.regex{color:#fd971f}.token.bold,.token.important{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help} diff --git a/examples/preact/public/prism.js b/examples/preact/public/prism.js new file mode 100644 index 0000000..ba3f59e --- /dev/null +++ b/examples/preact/public/prism.js @@ -0,0 +1,8 @@ +/* PrismJS 1.29.0 +https://prismjs.com/download.html#themes=prism-okaidia&languages=markup+css+clike+javascript+nim */ +var _self="undefined"!=typeof window?window:"undefined"!=typeof WorkerGlobalScope&&self instanceof WorkerGlobalScope?self:{},Prism=function(e){var n=/(?:^|\s)lang(?:uage)?-([\w-]+)(?=\s|$)/i,t=0,r={},a={manual:e.Prism&&e.Prism.manual,disableWorkerMessageHandler:e.Prism&&e.Prism.disableWorkerMessageHandler,util:{encode:function e(n){return n instanceof i?new i(n.type,e(n.content),n.alias):Array.isArray(n)?n.map(e):n.replace(/&/g,"&").replace(/=g.reach);A+=w.value.length,w=w.next){var E=w.value;if(n.length>e.length)return;if(!(E instanceof i)){var P,L=1;if(y){if(!(P=l(b,A,e,m))||P.index>=e.length)break;var S=P.index,O=P.index+P[0].length,j=A;for(j+=w.value.length;S>=j;)j+=(w=w.next).value.length;if(A=j-=w.value.length,w.value instanceof i)continue;for(var C=w;C!==n.tail&&(jg.reach&&(g.reach=W);var z=w.prev;if(_&&(z=u(n,z,_),A+=_.length),c(n,z,L),w=u(n,z,new i(f,p?a.tokenize(N,p):N,k,N)),M&&u(n,w,M),L>1){var I={cause:f+","+d,reach:W};o(e,n,t,w.prev,A,I),g&&I.reach>g.reach&&(g.reach=I.reach)}}}}}}function s(){var e={value:null,prev:null,next:null},n={value:null,prev:e,next:null};e.next=n,this.head=e,this.tail=n,this.length=0}function u(e,n,t){var r=n.next,a={value:t,prev:n,next:r};return n.next=a,r.prev=a,e.length++,a}function c(e,n,t){for(var r=n.next,a=0;a"+i.content+""},!e.document)return e.addEventListener?(a.disableWorkerMessageHandler||e.addEventListener("message",(function(n){var t=JSON.parse(n.data),r=t.language,i=t.code,l=t.immediateClose;e.postMessage(a.highlight(i,a.languages[r],r)),l&&e.close()}),!1),a):a;var g=a.util.currentScript();function f(){a.manual||a.highlightAll()}if(g&&(a.filename=g.src,g.hasAttribute("data-manual")&&(a.manual=!0)),!a.manual){var h=document.readyState;"loading"===h||"interactive"===h&&g&&g.defer?document.addEventListener("DOMContentLoaded",f):window.requestAnimationFrame?window.requestAnimationFrame(f):window.setTimeout(f,16)}return a}(_self);"undefined"!=typeof module&&module.exports&&(module.exports=Prism),"undefined"!=typeof global&&(global.Prism=Prism); +Prism.languages.markup={comment:{pattern://,greedy:!0},prolog:{pattern:/<\?[\s\S]+?\?>/,greedy:!0},doctype:{pattern:/"'[\]]|"[^"]*"|'[^']*')+(?:\[(?:[^<"'\]]|"[^"]*"|'[^']*'|<(?!!--)|)*\]\s*)?>/i,greedy:!0,inside:{"internal-subset":{pattern:/(^[^\[]*\[)[\s\S]+(?=\]>$)/,lookbehind:!0,greedy:!0,inside:null},string:{pattern:/"[^"]*"|'[^']*'/,greedy:!0},punctuation:/^$|[[\]]/,"doctype-tag":/^DOCTYPE/i,name:/[^\s<>'"]+/}},cdata:{pattern://i,greedy:!0},tag:{pattern:/<\/?(?!\d)[^\s>\/=$<%]+(?:\s(?:\s*[^\s>\/=]+(?:\s*=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+(?=[\s>]))|(?=[\s/>])))+)?\s*\/?>/,greedy:!0,inside:{tag:{pattern:/^<\/?[^\s>\/]+/,inside:{punctuation:/^<\/?/,namespace:/^[^\s>\/:]+:/}},"special-attr":[],"attr-value":{pattern:/=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+)/,inside:{punctuation:[{pattern:/^=/,alias:"attr-equals"},{pattern:/^(\s*)["']|["']$/,lookbehind:!0}]}},punctuation:/\/?>/,"attr-name":{pattern:/[^\s>\/]+/,inside:{namespace:/^[^\s>\/:]+:/}}}},entity:[{pattern:/&[\da-z]{1,8};/i,alias:"named-entity"},/&#x?[\da-f]{1,8};/i]},Prism.languages.markup.tag.inside["attr-value"].inside.entity=Prism.languages.markup.entity,Prism.languages.markup.doctype.inside["internal-subset"].inside=Prism.languages.markup,Prism.hooks.add("wrap",(function(a){"entity"===a.type&&(a.attributes.title=a.content.replace(/&/,"&"))})),Object.defineProperty(Prism.languages.markup.tag,"addInlined",{value:function(a,e){var s={};s["language-"+e]={pattern:/(^$)/i,lookbehind:!0,inside:Prism.languages[e]},s.cdata=/^$/i;var t={"included-cdata":{pattern://i,inside:s}};t["language-"+e]={pattern:/[\s\S]+/,inside:Prism.languages[e]};var n={};n[a]={pattern:RegExp("(<__[^>]*>)(?:))*\\]\\]>|(?!)".replace(/__/g,(function(){return a})),"i"),lookbehind:!0,greedy:!0,inside:t},Prism.languages.insertBefore("markup","cdata",n)}}),Object.defineProperty(Prism.languages.markup.tag,"addAttribute",{value:function(a,e){Prism.languages.markup.tag.inside["special-attr"].push({pattern:RegExp("(^|[\"'\\s])(?:"+a+")\\s*=\\s*(?:\"[^\"]*\"|'[^']*'|[^\\s'\">=]+(?=[\\s>]))","i"),lookbehind:!0,inside:{"attr-name":/^[^\s=]+/,"attr-value":{pattern:/=[\s\S]+/,inside:{value:{pattern:/(^=\s*(["']|(?!["'])))\S[\s\S]*(?=\2$)/,lookbehind:!0,alias:[e,"language-"+e],inside:Prism.languages[e]},punctuation:[{pattern:/^=/,alias:"attr-equals"},/"|'/]}}}})}}),Prism.languages.html=Prism.languages.markup,Prism.languages.mathml=Prism.languages.markup,Prism.languages.svg=Prism.languages.markup,Prism.languages.xml=Prism.languages.extend("markup",{}),Prism.languages.ssml=Prism.languages.xml,Prism.languages.atom=Prism.languages.xml,Prism.languages.rss=Prism.languages.xml; +!function(s){var e=/(?:"(?:\\(?:\r\n|[\s\S])|[^"\\\r\n])*"|'(?:\\(?:\r\n|[\s\S])|[^'\\\r\n])*')/;s.languages.css={comment:/\/\*[\s\S]*?\*\//,atrule:{pattern:RegExp("@[\\w-](?:[^;{\\s\"']|\\s+(?!\\s)|"+e.source+")*?(?:;|(?=\\s*\\{))"),inside:{rule:/^@[\w-]+/,"selector-function-argument":{pattern:/(\bselector\s*\(\s*(?![\s)]))(?:[^()\s]|\s+(?![\s)])|\((?:[^()]|\([^()]*\))*\))+(?=\s*\))/,lookbehind:!0,alias:"selector"},keyword:{pattern:/(^|[^\w-])(?:and|not|only|or)(?![\w-])/,lookbehind:!0}}},url:{pattern:RegExp("\\burl\\((?:"+e.source+"|(?:[^\\\\\r\n()\"']|\\\\[^])*)\\)","i"),greedy:!0,inside:{function:/^url/i,punctuation:/^\(|\)$/,string:{pattern:RegExp("^"+e.source+"$"),alias:"url"}}},selector:{pattern:RegExp("(^|[{}\\s])[^{}\\s](?:[^{};\"'\\s]|\\s+(?![\\s{])|"+e.source+")*(?=\\s*\\{)"),lookbehind:!0},string:{pattern:e,greedy:!0},property:{pattern:/(^|[^-\w\xA0-\uFFFF])(?!\s)[-_a-z\xA0-\uFFFF](?:(?!\s)[-\w\xA0-\uFFFF])*(?=\s*:)/i,lookbehind:!0},important:/!important\b/i,function:{pattern:/(^|[^-a-z0-9])[-a-z0-9]+(?=\()/i,lookbehind:!0},punctuation:/[(){};:,]/},s.languages.css.atrule.inside.rest=s.languages.css;var t=s.languages.markup;t&&(t.tag.addInlined("style","css"),t.tag.addAttribute("style","css"))}(Prism); +Prism.languages.clike={comment:[{pattern:/(^|[^\\])\/\*[\s\S]*?(?:\*\/|$)/,lookbehind:!0,greedy:!0},{pattern:/(^|[^\\:])\/\/.*/,lookbehind:!0,greedy:!0}],string:{pattern:/(["'])(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/,greedy:!0},"class-name":{pattern:/(\b(?:class|extends|implements|instanceof|interface|new|trait)\s+|\bcatch\s+\()[\w.\\]+/i,lookbehind:!0,inside:{punctuation:/[.\\]/}},keyword:/\b(?:break|catch|continue|do|else|finally|for|function|if|in|instanceof|new|null|return|throw|try|while)\b/,boolean:/\b(?:false|true)\b/,function:/\b\w+(?=\()/,number:/\b0x[\da-f]+\b|(?:\b\d+(?:\.\d*)?|\B\.\d+)(?:e[+-]?\d+)?/i,operator:/[<>]=?|[!=]=?=?|--?|\+\+?|&&?|\|\|?|[?*/~^%]/,punctuation:/[{}[\];(),.:]/}; +Prism.languages.javascript=Prism.languages.extend("clike",{"class-name":[Prism.languages.clike["class-name"],{pattern:/(^|[^$\w\xA0-\uFFFF])(?!\s)[_$A-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\.(?:constructor|prototype))/,lookbehind:!0}],keyword:[{pattern:/((?:^|\})\s*)catch\b/,lookbehind:!0},{pattern:/(^|[^.]|\.\.\.\s*)\b(?:as|assert(?=\s*\{)|async(?=\s*(?:function\b|\(|[$\w\xA0-\uFFFF]|$))|await|break|case|class|const|continue|debugger|default|delete|do|else|enum|export|extends|finally(?=\s*(?:\{|$))|for|from(?=\s*(?:['"]|$))|function|(?:get|set)(?=\s*(?:[#\[$\w\xA0-\uFFFF]|$))|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|static|super|switch|this|throw|try|typeof|undefined|var|void|while|with|yield)\b/,lookbehind:!0}],function:/#?(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*(?:\.\s*(?:apply|bind|call)\s*)?\()/,number:{pattern:RegExp("(^|[^\\w$])(?:NaN|Infinity|0[bB][01]+(?:_[01]+)*n?|0[oO][0-7]+(?:_[0-7]+)*n?|0[xX][\\dA-Fa-f]+(?:_[\\dA-Fa-f]+)*n?|\\d+(?:_\\d+)*n|(?:\\d+(?:_\\d+)*(?:\\.(?:\\d+(?:_\\d+)*)?)?|\\.\\d+(?:_\\d+)*)(?:[Ee][+-]?\\d+(?:_\\d+)*)?)(?![\\w$])"),lookbehind:!0},operator:/--|\+\+|\*\*=?|=>|&&=?|\|\|=?|[!=]==|<<=?|>>>?=?|[-+*/%&|^!=<>]=?|\.{3}|\?\?=?|\?\.?|[~:]/}),Prism.languages.javascript["class-name"][0].pattern=/(\b(?:class|extends|implements|instanceof|interface|new)\s+)[\w.\\]+/,Prism.languages.insertBefore("javascript","keyword",{regex:{pattern:RegExp("((?:^|[^$\\w\\xA0-\\uFFFF.\"'\\])\\s]|\\b(?:return|yield))\\s*)/(?:(?:\\[(?:[^\\]\\\\\r\n]|\\\\.)*\\]|\\\\.|[^/\\\\\\[\r\n])+/[dgimyus]{0,7}|(?:\\[(?:[^[\\]\\\\\r\n]|\\\\.|\\[(?:[^[\\]\\\\\r\n]|\\\\.|\\[(?:[^[\\]\\\\\r\n]|\\\\.)*\\])*\\])*\\]|\\\\.|[^/\\\\\\[\r\n])+/[dgimyus]{0,7}v[dgimyus]{0,7})(?=(?:\\s|/\\*(?:[^*]|\\*(?!/))*\\*/)*(?:$|[\r\n,.;:})\\]]|//))"),lookbehind:!0,greedy:!0,inside:{"regex-source":{pattern:/^(\/)[\s\S]+(?=\/[a-z]*$)/,lookbehind:!0,alias:"language-regex",inside:Prism.languages.regex},"regex-delimiter":/^\/|\/$/,"regex-flags":/^[a-z]+$/}},"function-variable":{pattern:/#?(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*[=:]\s*(?:async\s*)?(?:\bfunction\b|(?:\((?:[^()]|\([^()]*\))*\)|(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*)\s*=>))/,alias:"function"},parameter:[{pattern:/(function(?:\s+(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*)?\s*\(\s*)(?!\s)(?:[^()\s]|\s+(?![\s)])|\([^()]*\))+(?=\s*\))/,lookbehind:!0,inside:Prism.languages.javascript},{pattern:/(^|[^$\w\xA0-\uFFFF])(?!\s)[_$a-z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*=>)/i,lookbehind:!0,inside:Prism.languages.javascript},{pattern:/(\(\s*)(?!\s)(?:[^()\s]|\s+(?![\s)])|\([^()]*\))+(?=\s*\)\s*=>)/,lookbehind:!0,inside:Prism.languages.javascript},{pattern:/((?:\b|\s|^)(?!(?:as|async|await|break|case|catch|class|const|continue|debugger|default|delete|do|else|enum|export|extends|finally|for|from|function|get|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|set|static|super|switch|this|throw|try|typeof|undefined|var|void|while|with|yield)(?![$\w\xA0-\uFFFF]))(?:(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*\s*)\(\s*|\]\s*\(\s*)(?!\s)(?:[^()\s]|\s+(?![\s)])|\([^()]*\))+(?=\s*\)\s*\{)/,lookbehind:!0,inside:Prism.languages.javascript}],constant:/\b[A-Z](?:[A-Z_]|\dx?)*\b/}),Prism.languages.insertBefore("javascript","string",{hashbang:{pattern:/^#!.*/,greedy:!0,alias:"comment"},"template-string":{pattern:/`(?:\\[\s\S]|\$\{(?:[^{}]|\{(?:[^{}]|\{[^}]*\})*\})+\}|(?!\$\{)[^\\`])*`/,greedy:!0,inside:{"template-punctuation":{pattern:/^`|`$/,alias:"string"},interpolation:{pattern:/((?:^|[^\\])(?:\\{2})*)\$\{(?:[^{}]|\{(?:[^{}]|\{[^}]*\})*\})+\}/,lookbehind:!0,inside:{"interpolation-punctuation":{pattern:/^\$\{|\}$/,alias:"punctuation"},rest:Prism.languages.javascript}},string:/[\s\S]+/}},"string-property":{pattern:/((?:^|[,{])[ \t]*)(["'])(?:\\(?:\r\n|[\s\S])|(?!\2)[^\\\r\n])*\2(?=\s*:)/m,lookbehind:!0,greedy:!0,alias:"property"}}),Prism.languages.insertBefore("javascript","operator",{"literal-property":{pattern:/((?:^|[,{])[ \t]*)(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*:)/m,lookbehind:!0,alias:"property"}}),Prism.languages.markup&&(Prism.languages.markup.tag.addInlined("script","javascript"),Prism.languages.markup.tag.addAttribute("on(?:abort|blur|change|click|composition(?:end|start|update)|dblclick|error|focus(?:in|out)?|key(?:down|up)|load|mouse(?:down|enter|leave|move|out|over|up)|reset|resize|scroll|select|slotchange|submit|unload|wheel)","javascript")),Prism.languages.js=Prism.languages.javascript; +Prism.languages.nim={comment:{pattern:/#.*/,greedy:!0},string:{pattern:/(?:\b(?!\d)(?:\w|\\x[89a-fA-F][0-9a-fA-F])+)?(?:"""[\s\S]*?"""(?!")|"(?:\\[\s\S]|""|[^"\\])*")/,greedy:!0},char:{pattern:/'(?:\\(?:\d+|x[\da-fA-F]{0,2}|.)|[^'])'/,greedy:!0},function:{pattern:/(?:(?!\d)(?:\w|\\x[89a-fA-F][0-9a-fA-F])+|`[^`\r\n]+`)\*?(?:\[[^\]]+\])?(?=\s*\()/,greedy:!0,inside:{operator:/\*$/}},identifier:{pattern:/`[^`\r\n]+`/,greedy:!0,inside:{punctuation:/`/}},number:/\b(?:0[xXoObB][\da-fA-F_]+|\d[\d_]*(?:(?!\.\.)\.[\d_]*)?(?:[eE][+-]?\d[\d_]*)?)(?:'?[iuf]\d*)?/,keyword:/\b(?:addr|as|asm|atomic|bind|block|break|case|cast|concept|const|continue|converter|defer|discard|distinct|do|elif|else|end|enum|except|export|finally|for|from|func|generic|if|import|include|interface|iterator|let|macro|method|mixin|nil|object|out|proc|ptr|raise|ref|return|static|template|try|tuple|type|using|var|when|while|with|without|yield)\b/,operator:{pattern:/(^|[({\[](?=\.\.)|(?![({\[]\.).)(?:(?:[=+\-*\/<>@$~&%|!?^:\\]|\.\.|\.(?![)}\]]))+|\b(?:and|div|in|is|isnot|mod|not|notin|of|or|shl|shr|xor)\b)/m,lookbehind:!0},punctuation:/[({\[]\.|\.[)}\]]|[`(){}\[\],:]/}; diff --git a/examples/preact/public/typography.css b/examples/preact/public/typography.css new file mode 100644 index 0000000..22f89dc --- /dev/null +++ b/examples/preact/public/typography.css @@ -0,0 +1,7833 @@ +.prose { + + max-width: 65ch; +} + +.prose [class~="lead"] { + + font-size: 1.25em; + line-height: 1.6; + margin-top: 1.2em; + margin-bottom: 1.2em; +} + +.prose a { + + text-decoration: underline; + font-weight: 500; +} + +.prose strong { + + font-weight: 600; +} + +.prose ol[type="A"] { + --list-counter-style: upper-alpha; +} + +.prose ol[type="a"] { + --list-counter-style: lower-alpha; +} + +.prose ol[type="A" s] { + --list-counter-style: upper-alpha; +} + +.prose ol[type="a" s] { + --list-counter-style: lower-alpha; +} + +.prose ol[type="I"] { + --list-counter-style: upper-roman; +} + +.prose ol[type="i"] { + --list-counter-style: lower-roman; +} + +.prose ol[type="I" s] { + --list-counter-style: upper-roman; +} + +.prose ol[type="i" s] { + --list-counter-style: lower-roman; +} + +.prose ol[type="1"] { + --list-counter-style: decimal; +} + +.prose ol>li { + position: relative; + padding-left: 1.75em; +} + +.prose ol>li::before { + content: counter(list-item, var(--list-counter-style, decimal)) "."; + position: absolute; + font-weight: 400; + + left: 0; +} + +.prose ul>li { + position: relative; + padding-left: 1.75em; +} + +.prose ul>li::before { + content: ""; + position: absolute; + + border-radius: 50%; + width: 0.375em; + height: 0.375em; + top: calc(0.875em - 0.1875em); + left: 0.25em; +} + +.prose hr { + + border-top-width: 1px; + margin-top: 3em; + margin-bottom: 3em; +} + +.prose blockquote { + font-weight: 500; + font-style: italic; + + border-left-width: 0.25rem; + + quotes: "\201C" "\201D" "\2018" "\2019"; + margin-top: 1.6em; + margin-bottom: 1.6em; + padding-left: 1em; +} + +.prose blockquote p:first-of-type::before { + content: open-quote; +} + +.prose blockquote p:last-of-type::after { + content: close-quote; +} + +.prose h1 { + + font-weight: 800; + font-size: 2.25em; + margin-top: 0; + margin-bottom: 0.8888889em; + line-height: 1.1111111; +} + +.prose h2 { + + font-weight: 700; + font-size: 1.5em; + margin-top: 2em; + margin-bottom: 1em; + line-height: 1.3333333; +} + +.prose h3 { + + font-weight: 600; + font-size: 1.25em; + margin-top: 1.6em; + margin-bottom: 0.6em; + line-height: 1.6; +} + +.prose h4 { + + font-weight: 600; + margin-top: 1.5em; + margin-bottom: 0.5em; + line-height: 1.5; +} + +.prose figure figcaption { + + font-size: 0.875em; + line-height: 1.4285714; + margin-top: 0.8571429em; +} + +.prose code { + + font-weight: 600; + font-size: 0.875em; +} + +.prose code::before { + content: "`"; +} + +.prose code::after { + content: "`"; +} + +.prose a code {} + +.prose pre { + + + overflow-x: auto; + font-size: 0.875em; + line-height: 1.7142857; + margin-top: 1.7142857em; + margin-bottom: 1.7142857em; + border-radius: 0.375rem; + padding-top: 0.8571429em; + padding-right: 1.1428571em; + padding-bottom: 0.8571429em; + padding-left: 1.1428571em; +} + +.prose pre code { + + border-width: 0; + border-radius: 0; + padding: 0; + font-weight: 400; + + font-size: inherit; + font-family: inherit; + line-height: inherit; +} + +.prose pre code::before { + content: none; +} + +.prose pre code::after { + content: none; +} + +.prose table { + width: 100%; + table-layout: auto; + text-align: left; + margin-top: 2em; + margin-bottom: 2em; + font-size: 0.875em; + line-height: 1.7142857; +} + +.prose thead { + + font-weight: 600; + border-bottom-width: 1px; + +} + +.prose thead th { + vertical-align: bottom; + padding-right: 0.5714286em; + padding-bottom: 0.5714286em; + padding-left: 0.5714286em; +} + +.prose tbody tr { + border-bottom-width: 1px; + +} + +.prose tbody tr:last-child { + border-bottom-width: 0; +} + +.prose tbody td { + vertical-align: top; + padding-top: 0.5714286em; + padding-right: 0.5714286em; + padding-bottom: 0.5714286em; + padding-left: 0.5714286em; +} + +.prose { + font-size: 1rem; + line-height: 1.75; +} + +.prose p { + margin-top: 1.25em; + margin-bottom: 1.25em; +} + +.prose img { + margin-top: 2em; + margin-bottom: 2em; +} + +.prose video { + margin-top: 2em; + margin-bottom: 2em; +} + +.prose figure { + margin-top: 2em; + margin-bottom: 2em; +} + +.prose figure>* { + margin-top: 0; + margin-bottom: 0; +} + +.prose h2 code { + font-size: 0.875em; +} + +.prose h3 code { + font-size: 0.9em; +} + +.prose ol { + margin-top: 1.25em; + margin-bottom: 1.25em; +} + +.prose ul { + margin-top: 1.25em; + margin-bottom: 1.25em; +} + +.prose li { + margin-top: 0.5em; + margin-bottom: 0.5em; +} + +.prose>ul>li p { + margin-top: 0.75em; + margin-bottom: 0.75em; +} + +.prose>ul>li>*:first-child { + margin-top: 1.25em; +} + +.prose>ul>li>*:last-child { + margin-bottom: 1.25em; +} + +.prose>ol>li>*:first-child { + margin-top: 1.25em; +} + +.prose>ol>li>*:last-child { + margin-bottom: 1.25em; +} + +.prose ul ul, +.prose ul ol, +.prose ol ul, +.prose ol ol { + margin-top: 0.75em; + margin-bottom: 0.75em; +} + +.prose hr+* { + margin-top: 0; +} + +.prose h2+* { + margin-top: 0; +} + +.prose h3+* { + margin-top: 0; +} + +.prose h4+* { + margin-top: 0; +} + +.prose thead th:first-child { + padding-left: 0; +} + +.prose thead th:last-child { + padding-right: 0; +} + +.prose tbody td:first-child { + padding-left: 0; +} + +.prose tbody td:last-child { + padding-right: 0; +} + +.prose> :first-child { + margin-top: 0; +} + +.prose> :last-child { + margin-bottom: 0; +} + +.prose-sm { + font-size: 0.875rem; + line-height: 1.7142857; +} + +.prose-sm p { + margin-top: 1.1428571em; + margin-bottom: 1.1428571em; +} + +.prose-sm [class~="lead"] { + font-size: 1.2857143em; + line-height: 1.5555556; + margin-top: 0.8888889em; + margin-bottom: 0.8888889em; +} + +.prose-sm blockquote { + margin-top: 1.3333333em; + margin-bottom: 1.3333333em; + padding-left: 1.1111111em; +} + +.prose-sm h1 { + font-size: 2.1428571em; + margin-top: 0; + margin-bottom: 0.8em; + line-height: 1.2; +} + +.prose-sm h2 { + font-size: 1.4285714em; + margin-top: 1.6em; + margin-bottom: 0.8em; + line-height: 1.4; +} + +.prose-sm h3 { + font-size: 1.2857143em; + margin-top: 1.5555556em; + margin-bottom: 0.4444444em; + line-height: 1.5555556; +} + +.prose-sm h4 { + margin-top: 1.4285714em; + margin-bottom: 0.5714286em; + line-height: 1.4285714; +} + +.prose-sm img { + margin-top: 1.7142857em; + margin-bottom: 1.7142857em; +} + +.prose-sm video { + margin-top: 1.7142857em; + margin-bottom: 1.7142857em; +} + +.prose-sm figure { + margin-top: 1.7142857em; + margin-bottom: 1.7142857em; +} + +.prose-sm figure>* { + margin-top: 0; + margin-bottom: 0; +} + +.prose-sm figure figcaption { + font-size: 0.8571429em; + line-height: 1.3333333; + margin-top: 0.6666667em; +} + +.prose-sm code { + font-size: 0.8571429em; +} + +.prose-sm h2 code { + font-size: 0.9em; +} + +.prose-sm h3 code { + font-size: 0.8888889em; +} + +.prose-sm pre { + font-size: 0.8571429em; + line-height: 1.6666667; + margin-top: 1.6666667em; + margin-bottom: 1.6666667em; + border-radius: 0.25rem; + padding-top: 0.6666667em; + padding-right: 1em; + padding-bottom: 0.6666667em; + padding-left: 1em; +} + +.prose-sm ol { + margin-top: 1.1428571em; + margin-bottom: 1.1428571em; +} + +.prose-sm ul { + margin-top: 1.1428571em; + margin-bottom: 1.1428571em; +} + +.prose-sm li { + margin-top: 0.2857143em; + margin-bottom: 0.2857143em; +} + +.prose-sm ol>li { + padding-left: 1.5714286em; +} + +.prose-sm ol>li::before { + left: 0; +} + +.prose-sm ul>li { + padding-left: 1.5714286em; +} + +.prose-sm ul>li::before { + height: 0.3571429em; + width: 0.3571429em; + top: calc(0.8571429em - 0.1785714em); + left: 0.2142857em; +} + +.prose-sm>ul>li p { + margin-top: 0.5714286em; + margin-bottom: 0.5714286em; +} + +.prose-sm>ul>li>*:first-child { + margin-top: 1.1428571em; +} + +.prose-sm>ul>li>*:last-child { + margin-bottom: 1.1428571em; +} + +.prose-sm>ol>li>*:first-child { + margin-top: 1.1428571em; +} + +.prose-sm>ol>li>*:last-child { + margin-bottom: 1.1428571em; +} + +.prose-sm ul ul, +.prose-sm ul ol, +.prose-sm ol ul, +.prose-sm ol ol { + margin-top: 0.5714286em; + margin-bottom: 0.5714286em; +} + +.prose-sm hr { + margin-top: 2.8571429em; + margin-bottom: 2.8571429em; +} + +.prose-sm hr+* { + margin-top: 0; +} + +.prose-sm h2+* { + margin-top: 0; +} + +.prose-sm h3+* { + margin-top: 0; +} + +.prose-sm h4+* { + margin-top: 0; +} + +.prose-sm table { + font-size: 0.8571429em; + line-height: 1.5; +} + +.prose-sm thead th { + padding-right: 1em; + padding-bottom: 0.6666667em; + padding-left: 1em; +} + +.prose-sm thead th:first-child { + padding-left: 0; +} + +.prose-sm thead th:last-child { + padding-right: 0; +} + +.prose-sm tbody td { + padding-top: 0.6666667em; + padding-right: 1em; + padding-bottom: 0.6666667em; + padding-left: 1em; +} + +.prose-sm tbody td:first-child { + padding-left: 0; +} + +.prose-sm tbody td:last-child { + padding-right: 0; +} + +.prose-sm> :first-child { + margin-top: 0; +} + +.prose-sm> :last-child { + margin-bottom: 0; +} + +.prose-lg { + font-size: 1.125rem; + line-height: 1.7777778; +} + +.prose-lg p { + margin-top: 1.3333333em; + margin-bottom: 1.3333333em; +} + +.prose-lg [class~="lead"] { + font-size: 1.2222222em; + line-height: 1.4545455; + margin-top: 1.0909091em; + margin-bottom: 1.0909091em; +} + +.prose-lg blockquote { + margin-top: 1.6666667em; + margin-bottom: 1.6666667em; + padding-left: 1em; +} + +.prose-lg h1 { + font-size: 2.6666667em; + margin-top: 0; + margin-bottom: 0.8333333em; + line-height: 1; +} + +.prose-lg h2 { + font-size: 1.6666667em; + margin-top: 1.8666667em; + margin-bottom: 1.0666667em; + line-height: 1.3333333; +} + +.prose-lg h3 { + font-size: 1.3333333em; + margin-top: 1.6666667em; + margin-bottom: 0.6666667em; + line-height: 1.5; +} + +.prose-lg h4 { + margin-top: 1.7777778em; + margin-bottom: 0.4444444em; + line-height: 1.5555556; +} + +.prose-lg img { + margin-top: 1.7777778em; + margin-bottom: 1.7777778em; +} + +.prose-lg video { + margin-top: 1.7777778em; + margin-bottom: 1.7777778em; +} + +.prose-lg figure { + margin-top: 1.7777778em; + margin-bottom: 1.7777778em; +} + +.prose-lg figure>* { + margin-top: 0; + margin-bottom: 0; +} + +.prose-lg figure figcaption { + font-size: 0.8888889em; + line-height: 1.5; + margin-top: 1em; +} + +.prose-lg code { + font-size: 0.8888889em; +} + +.prose-lg h2 code { + font-size: 0.8666667em; +} + +.prose-lg h3 code { + font-size: 0.875em; +} + +.prose-lg pre { + font-size: 0.8888889em; + line-height: 1.75; + margin-top: 2em; + margin-bottom: 2em; + border-radius: 0.375rem; + padding-top: 1em; + padding-right: 1.5em; + padding-bottom: 1em; + padding-left: 1.5em; +} + +.prose-lg ol { + margin-top: 1.3333333em; + margin-bottom: 1.3333333em; +} + +.prose-lg ul { + margin-top: 1.3333333em; + margin-bottom: 1.3333333em; +} + +.prose-lg li { + margin-top: 0.6666667em; + margin-bottom: 0.6666667em; +} + +.prose-lg ol>li { + padding-left: 1.6666667em; +} + +.prose-lg ol>li::before { + left: 0; +} + +.prose-lg ul>li { + padding-left: 1.6666667em; +} + +.prose-lg ul>li::before { + width: 0.3333333em; + height: 0.3333333em; + top: calc(0.8888889em - 0.1666667em); + left: 0.2222222em; +} + +.prose-lg>ul>li p { + margin-top: 0.8888889em; + margin-bottom: 0.8888889em; +} + +.prose-lg>ul>li>*:first-child { + margin-top: 1.3333333em; +} + +.prose-lg>ul>li>*:last-child { + margin-bottom: 1.3333333em; +} + +.prose-lg>ol>li>*:first-child { + margin-top: 1.3333333em; +} + +.prose-lg>ol>li>*:last-child { + margin-bottom: 1.3333333em; +} + +.prose-lg ul ul, +.prose-lg ul ol, +.prose-lg ol ul, +.prose-lg ol ol { + margin-top: 0.8888889em; + margin-bottom: 0.8888889em; +} + +.prose-lg hr { + margin-top: 3.1111111em; + margin-bottom: 3.1111111em; +} + +.prose-lg hr+* { + margin-top: 0; +} + +.prose-lg h2+* { + margin-top: 0; +} + +.prose-lg h3+* { + margin-top: 0; +} + +.prose-lg h4+* { + margin-top: 0; +} + +.prose-lg table { + font-size: 0.8888889em; + line-height: 1.5; +} + +.prose-lg thead th { + padding-right: 0.75em; + padding-bottom: 0.75em; + padding-left: 0.75em; +} + +.prose-lg thead th:first-child { + padding-left: 0; +} + +.prose-lg thead th:last-child { + padding-right: 0; +} + +.prose-lg tbody td { + padding-top: 0.75em; + padding-right: 0.75em; + padding-bottom: 0.75em; + padding-left: 0.75em; +} + +.prose-lg tbody td:first-child { + padding-left: 0; +} + +.prose-lg tbody td:last-child { + padding-right: 0; +} + +.prose-lg> :first-child { + margin-top: 0; +} + +.prose-lg> :last-child { + margin-bottom: 0; +} + +.prose-xl { + font-size: 1.25rem; + line-height: 1.8; +} + +.prose-xl p { + margin-top: 1.2em; + margin-bottom: 1.2em; +} + +.prose-xl [class~="lead"] { + font-size: 1.2em; + line-height: 1.5; + margin-top: 1em; + margin-bottom: 1em; +} + +.prose-xl blockquote { + margin-top: 1.6em; + margin-bottom: 1.6em; + padding-left: 1.0666667em; +} + +.prose-xl h1 { + font-size: 2.8em; + margin-top: 0; + margin-bottom: 0.8571429em; + line-height: 1; +} + +.prose-xl h2 { + font-size: 1.8em; + margin-top: 1.5555556em; + margin-bottom: 0.8888889em; + line-height: 1.1111111; +} + +.prose-xl h3 { + font-size: 1.5em; + margin-top: 1.6em; + margin-bottom: 0.6666667em; + line-height: 1.3333333; +} + +.prose-xl h4 { + margin-top: 1.8em; + margin-bottom: 0.6em; + line-height: 1.6; +} + +.prose-xl img { + margin-top: 2em; + margin-bottom: 2em; +} + +.prose-xl video { + margin-top: 2em; + margin-bottom: 2em; +} + +.prose-xl figure { + margin-top: 2em; + margin-bottom: 2em; +} + +.prose-xl figure>* { + margin-top: 0; + margin-bottom: 0; +} + +.prose-xl figure figcaption { + font-size: 0.9em; + line-height: 1.5555556; + margin-top: 1em; +} + +.prose-xl code { + font-size: 0.9em; +} + +.prose-xl h2 code { + font-size: 0.8611111em; +} + +.prose-xl h3 code { + font-size: 0.9em; +} + +.prose-xl pre { + font-size: 0.9em; + line-height: 1.7777778; + margin-top: 2em; + margin-bottom: 2em; + border-radius: 0.5rem; + padding-top: 1.1111111em; + padding-right: 1.3333333em; + padding-bottom: 1.1111111em; + padding-left: 1.3333333em; +} + +.prose-xl ol { + margin-top: 1.2em; + margin-bottom: 1.2em; +} + +.prose-xl ul { + margin-top: 1.2em; + margin-bottom: 1.2em; +} + +.prose-xl li { + margin-top: 0.6em; + margin-bottom: 0.6em; +} + +.prose-xl ol>li { + padding-left: 1.8em; +} + +.prose-xl ol>li::before { + left: 0; +} + +.prose-xl ul>li { + padding-left: 1.8em; +} + +.prose-xl ul>li::before { + width: 0.35em; + height: 0.35em; + top: calc(0.9em - 0.175em); + left: 0.25em; +} + +.prose-xl>ul>li p { + margin-top: 0.8em; + margin-bottom: 0.8em; +} + +.prose-xl>ul>li>*:first-child { + margin-top: 1.2em; +} + +.prose-xl>ul>li>*:last-child { + margin-bottom: 1.2em; +} + +.prose-xl>ol>li>*:first-child { + margin-top: 1.2em; +} + +.prose-xl>ol>li>*:last-child { + margin-bottom: 1.2em; +} + +.prose-xl ul ul, +.prose-xl ul ol, +.prose-xl ol ul, +.prose-xl ol ol { + margin-top: 0.8em; + margin-bottom: 0.8em; +} + +.prose-xl hr { + margin-top: 2.8em; + margin-bottom: 2.8em; +} + +.prose-xl hr+* { + margin-top: 0; +} + +.prose-xl h2+* { + margin-top: 0; +} + +.prose-xl h3+* { + margin-top: 0; +} + +.prose-xl h4+* { + margin-top: 0; +} + +.prose-xl table { + font-size: 0.9em; + line-height: 1.5555556; +} + +.prose-xl thead th { + padding-right: 0.6666667em; + padding-bottom: 0.8888889em; + padding-left: 0.6666667em; +} + +.prose-xl thead th:first-child { + padding-left: 0; +} + +.prose-xl thead th:last-child { + padding-right: 0; +} + +.prose-xl tbody td { + padding-top: 0.8888889em; + padding-right: 0.6666667em; + padding-bottom: 0.8888889em; + padding-left: 0.6666667em; +} + +.prose-xl tbody td:first-child { + padding-left: 0; +} + +.prose-xl tbody td:last-child { + padding-right: 0; +} + +.prose-xl> :first-child { + margin-top: 0; +} + +.prose-xl> :last-child { + margin-bottom: 0; +} + +.prose-2xl { + font-size: 1.5rem; + line-height: 1.6666667; +} + +.prose-2xl p { + margin-top: 1.3333333em; + margin-bottom: 1.3333333em; +} + +.prose-2xl [class~="lead"] { + font-size: 1.25em; + line-height: 1.4666667; + margin-top: 1.0666667em; + margin-bottom: 1.0666667em; +} + +.prose-2xl blockquote { + margin-top: 1.7777778em; + margin-bottom: 1.7777778em; + padding-left: 1.1111111em; +} + +.prose-2xl h1 { + font-size: 2.6666667em; + margin-top: 0; + margin-bottom: 0.875em; + line-height: 1; +} + +.prose-2xl h2 { + font-size: 2em; + margin-top: 1.5em; + margin-bottom: 0.8333333em; + line-height: 1.0833333; +} + +.prose-2xl h3 { + font-size: 1.5em; + margin-top: 1.5555556em; + margin-bottom: 0.6666667em; + line-height: 1.2222222; +} + +.prose-2xl h4 { + margin-top: 1.6666667em; + margin-bottom: 0.6666667em; + line-height: 1.5; +} + +.prose-2xl img { + margin-top: 2em; + margin-bottom: 2em; +} + +.prose-2xl video { + margin-top: 2em; + margin-bottom: 2em; +} + +.prose-2xl figure { + margin-top: 2em; + margin-bottom: 2em; +} + +.prose-2xl figure>* { + margin-top: 0; + margin-bottom: 0; +} + +.prose-2xl figure figcaption { + font-size: 0.8333333em; + line-height: 1.6; + margin-top: 1em; +} + +.prose-2xl code { + font-size: 0.8333333em; +} + +.prose-2xl h2 code { + font-size: 0.875em; +} + +.prose-2xl h3 code { + font-size: 0.8888889em; +} + +.prose-2xl pre { + font-size: 0.8333333em; + line-height: 1.8; + margin-top: 2em; + margin-bottom: 2em; + border-radius: 0.5rem; + padding-top: 1.2em; + padding-right: 1.6em; + padding-bottom: 1.2em; + padding-left: 1.6em; +} + +.prose-2xl ol { + margin-top: 1.3333333em; + margin-bottom: 1.3333333em; +} + +.prose-2xl ul { + margin-top: 1.3333333em; + margin-bottom: 1.3333333em; +} + +.prose-2xl li { + margin-top: 0.5em; + margin-bottom: 0.5em; +} + +.prose-2xl ol>li { + padding-left: 1.6666667em; +} + +.prose-2xl ol>li::before { + left: 0; +} + +.prose-2xl ul>li { + padding-left: 1.6666667em; +} + +.prose-2xl ul>li::before { + width: 0.3333333em; + height: 0.3333333em; + top: calc(0.8333333em - 0.1666667em); + left: 0.25em; +} + +.prose-2xl>ul>li p { + margin-top: 0.8333333em; + margin-bottom: 0.8333333em; +} + +.prose-2xl>ul>li>*:first-child { + margin-top: 1.3333333em; +} + +.prose-2xl>ul>li>*:last-child { + margin-bottom: 1.3333333em; +} + +.prose-2xl>ol>li>*:first-child { + margin-top: 1.3333333em; +} + +.prose-2xl>ol>li>*:last-child { + margin-bottom: 1.3333333em; +} + +.prose-2xl ul ul, +.prose-2xl ul ol, +.prose-2xl ol ul, +.prose-2xl ol ol { + margin-top: 0.6666667em; + margin-bottom: 0.6666667em; +} + +.prose-2xl hr { + margin-top: 3em; + margin-bottom: 3em; +} + +.prose-2xl hr+* { + margin-top: 0; +} + +.prose-2xl h2+* { + margin-top: 0; +} + +.prose-2xl h3+* { + margin-top: 0; +} + +.prose-2xl h4+* { + margin-top: 0; +} + +.prose-2xl table { + font-size: 0.8333333em; + line-height: 1.4; +} + +.prose-2xl thead th { + padding-right: 0.6em; + padding-bottom: 0.8em; + padding-left: 0.6em; +} + +.prose-2xl thead th:first-child { + padding-left: 0; +} + +.prose-2xl thead th:last-child { + padding-right: 0; +} + +.prose-2xl tbody td { + padding-top: 0.8em; + padding-right: 0.6em; + padding-bottom: 0.8em; + padding-left: 0.6em; +} + +.prose-2xl tbody td:first-child { + padding-left: 0; +} + +.prose-2xl tbody td:last-child { + padding-right: 0; +} + +.prose-2xl> :first-child { + margin-top: 0; +} + +.prose-2xl> :last-child { + margin-bottom: 0; +} + +.prose-red a {} + +.prose-red a code {} + +.prose-yellow a {} + +.prose-yellow a code {} + +.prose-green a {} + +.prose-green a code {} + +.prose-blue a {} + +.prose-blue a code {} + +.prose-indigo a {} + +.prose-indigo a code {} + +.prose-purple a {} + +.prose-purple a code {} + +.prose-pink a {} + +.prose-pink a code {} + +@media (min-width: 640px) { + .sm\:prose { + + max-width: 65ch; + } + + .sm\:prose [class~="lead"] { + + font-size: 1.25em; + line-height: 1.6; + margin-top: 1.2em; + margin-bottom: 1.2em; + } + + .sm\:prose a { + + text-decoration: underline; + font-weight: 500; + } + + .sm\:prose strong { + + font-weight: 600; + } + + .sm\:prose ol[type="A"] { + --list-counter-style: upper-alpha; + } + + .sm\:prose ol[type="a"] { + --list-counter-style: lower-alpha; + } + + .sm\:prose ol[type="A" s] { + --list-counter-style: upper-alpha; + } + + .sm\:prose ol[type="a" s] { + --list-counter-style: lower-alpha; + } + + .sm\:prose ol[type="I"] { + --list-counter-style: upper-roman; + } + + .sm\:prose ol[type="i"] { + --list-counter-style: lower-roman; + } + + .sm\:prose ol[type="I" s] { + --list-counter-style: upper-roman; + } + + .sm\:prose ol[type="i" s] { + --list-counter-style: lower-roman; + } + + .sm\:prose ol[type="1"] { + --list-counter-style: decimal; + } + + .sm\:prose ol>li { + position: relative; + padding-left: 1.75em; + } + + .sm\:prose ol>li::before { + content: counter(list-item, var(--list-counter-style, decimal)) "."; + position: absolute; + font-weight: 400; + + left: 0; + } + + .sm\:prose ul>li { + position: relative; + padding-left: 1.75em; + } + + .sm\:prose ul>li::before { + content: ""; + position: absolute; + + border-radius: 50%; + width: 0.375em; + height: 0.375em; + top: calc(0.875em - 0.1875em); + left: 0.25em; + } + + .sm\:prose hr { + + border-top-width: 1px; + margin-top: 3em; + margin-bottom: 3em; + } + + .sm\:prose blockquote { + font-weight: 500; + font-style: italic; + + border-left-width: 0.25rem; + + quotes: "\201C" "\201D" "\2018" "\2019"; + margin-top: 1.6em; + margin-bottom: 1.6em; + padding-left: 1em; + } + + .sm\:prose blockquote p:first-of-type::before { + content: open-quote; + } + + .sm\:prose blockquote p:last-of-type::after { + content: close-quote; + } + + .sm\:prose h1 { + + font-weight: 800; + font-size: 2.25em; + margin-top: 0; + margin-bottom: 0.8888889em; + line-height: 1.1111111; + } + + .sm\:prose h2 { + + font-weight: 700; + font-size: 1.5em; + margin-top: 2em; + margin-bottom: 1em; + line-height: 1.3333333; + } + + .sm\:prose h3 { + + font-weight: 600; + font-size: 1.25em; + margin-top: 1.6em; + margin-bottom: 0.6em; + line-height: 1.6; + } + + .sm\:prose h4 { + + font-weight: 600; + margin-top: 1.5em; + margin-bottom: 0.5em; + line-height: 1.5; + } + + .sm\:prose figure figcaption { + + font-size: 0.875em; + line-height: 1.4285714; + margin-top: 0.8571429em; + } + + .sm\:prose code { + + font-weight: 600; + font-size: 0.875em; + } + + .sm\:prose code::before { + content: "`"; + } + + .sm\:prose code::after { + content: "`"; + } + + .sm\:prose a code {} + + .sm\:prose pre { + + + overflow-x: auto; + font-size: 0.875em; + line-height: 1.7142857; + margin-top: 1.7142857em; + margin-bottom: 1.7142857em; + border-radius: 0.375rem; + padding-top: 0.8571429em; + padding-right: 1.1428571em; + padding-bottom: 0.8571429em; + padding-left: 1.1428571em; + } + + .sm\:prose pre code { + + border-width: 0; + border-radius: 0; + padding: 0; + font-weight: 400; + + font-size: inherit; + font-family: inherit; + line-height: inherit; + } + + .sm\:prose pre code::before { + content: none; + } + + .sm\:prose pre code::after { + content: none; + } + + .sm\:prose table { + width: 100%; + table-layout: auto; + text-align: left; + margin-top: 2em; + margin-bottom: 2em; + font-size: 0.875em; + line-height: 1.7142857; + } + + .sm\:prose thead { + + font-weight: 600; + border-bottom-width: 1px; + + } + + .sm\:prose thead th { + vertical-align: bottom; + padding-right: 0.5714286em; + padding-bottom: 0.5714286em; + padding-left: 0.5714286em; + } + + .sm\:prose tbody tr { + border-bottom-width: 1px; + + } + + .sm\:prose tbody tr:last-child { + border-bottom-width: 0; + } + + .sm\:prose tbody td { + vertical-align: top; + padding-top: 0.5714286em; + padding-right: 0.5714286em; + padding-bottom: 0.5714286em; + padding-left: 0.5714286em; + } + + .sm\:prose { + font-size: 1rem; + line-height: 1.75; + } + + .sm\:prose p { + margin-top: 1.25em; + margin-bottom: 1.25em; + } + + .sm\:prose img { + margin-top: 2em; + margin-bottom: 2em; + } + + .sm\:prose video { + margin-top: 2em; + margin-bottom: 2em; + } + + .sm\:prose figure { + margin-top: 2em; + margin-bottom: 2em; + } + + .sm\:prose figure>* { + margin-top: 0; + margin-bottom: 0; + } + + .sm\:prose h2 code { + font-size: 0.875em; + } + + .sm\:prose h3 code { + font-size: 0.9em; + } + + .sm\:prose ol { + margin-top: 1.25em; + margin-bottom: 1.25em; + } + + .sm\:prose ul { + margin-top: 1.25em; + margin-bottom: 1.25em; + } + + .sm\:prose li { + margin-top: 0.5em; + margin-bottom: 0.5em; + } + + .sm\:prose>ul>li p { + margin-top: 0.75em; + margin-bottom: 0.75em; + } + + .sm\:prose>ul>li>*:first-child { + margin-top: 1.25em; + } + + .sm\:prose>ul>li>*:last-child { + margin-bottom: 1.25em; + } + + .sm\:prose>ol>li>*:first-child { + margin-top: 1.25em; + } + + .sm\:prose>ol>li>*:last-child { + margin-bottom: 1.25em; + } + + .sm\:prose ul ul, + .sm\:prose ul ol, + .sm\:prose ol ul, + .sm\:prose ol ol { + margin-top: 0.75em; + margin-bottom: 0.75em; + } + + .sm\:prose hr+* { + margin-top: 0; + } + + .sm\:prose h2+* { + margin-top: 0; + } + + .sm\:prose h3+* { + margin-top: 0; + } + + .sm\:prose h4+* { + margin-top: 0; + } + + .sm\:prose thead th:first-child { + padding-left: 0; + } + + .sm\:prose thead th:last-child { + padding-right: 0; + } + + .sm\:prose tbody td:first-child { + padding-left: 0; + } + + .sm\:prose tbody td:last-child { + padding-right: 0; + } + + .sm\:prose> :first-child { + margin-top: 0; + } + + .sm\:prose> :last-child { + margin-bottom: 0; + } + + .sm\:prose-sm { + font-size: 0.875rem; + line-height: 1.7142857; + } + + .sm\:prose-sm p { + margin-top: 1.1428571em; + margin-bottom: 1.1428571em; + } + + .sm\:prose-sm [class~="lead"] { + font-size: 1.2857143em; + line-height: 1.5555556; + margin-top: 0.8888889em; + margin-bottom: 0.8888889em; + } + + .sm\:prose-sm blockquote { + margin-top: 1.3333333em; + margin-bottom: 1.3333333em; + padding-left: 1.1111111em; + } + + .sm\:prose-sm h1 { + font-size: 2.1428571em; + margin-top: 0; + margin-bottom: 0.8em; + line-height: 1.2; + } + + .sm\:prose-sm h2 { + font-size: 1.4285714em; + margin-top: 1.6em; + margin-bottom: 0.8em; + line-height: 1.4; + } + + .sm\:prose-sm h3 { + font-size: 1.2857143em; + margin-top: 1.5555556em; + margin-bottom: 0.4444444em; + line-height: 1.5555556; + } + + .sm\:prose-sm h4 { + margin-top: 1.4285714em; + margin-bottom: 0.5714286em; + line-height: 1.4285714; + } + + .sm\:prose-sm img { + margin-top: 1.7142857em; + margin-bottom: 1.7142857em; + } + + .sm\:prose-sm video { + margin-top: 1.7142857em; + margin-bottom: 1.7142857em; + } + + .sm\:prose-sm figure { + margin-top: 1.7142857em; + margin-bottom: 1.7142857em; + } + + .sm\:prose-sm figure>* { + margin-top: 0; + margin-bottom: 0; + } + + .sm\:prose-sm figure figcaption { + font-size: 0.8571429em; + line-height: 1.3333333; + margin-top: 0.6666667em; + } + + .sm\:prose-sm code { + font-size: 0.8571429em; + } + + .sm\:prose-sm h2 code { + font-size: 0.9em; + } + + .sm\:prose-sm h3 code { + font-size: 0.8888889em; + } + + .sm\:prose-sm pre { + font-size: 0.8571429em; + line-height: 1.6666667; + margin-top: 1.6666667em; + margin-bottom: 1.6666667em; + border-radius: 0.25rem; + padding-top: 0.6666667em; + padding-right: 1em; + padding-bottom: 0.6666667em; + padding-left: 1em; + } + + .sm\:prose-sm ol { + margin-top: 1.1428571em; + margin-bottom: 1.1428571em; + } + + .sm\:prose-sm ul { + margin-top: 1.1428571em; + margin-bottom: 1.1428571em; + } + + .sm\:prose-sm li { + margin-top: 0.2857143em; + margin-bottom: 0.2857143em; + } + + .sm\:prose-sm ol>li { + padding-left: 1.5714286em; + } + + .sm\:prose-sm ol>li::before { + left: 0; + } + + .sm\:prose-sm ul>li { + padding-left: 1.5714286em; + } + + .sm\:prose-sm ul>li::before { + height: 0.3571429em; + width: 0.3571429em; + top: calc(0.8571429em - 0.1785714em); + left: 0.2142857em; + } + + .sm\:prose-sm>ul>li p { + margin-top: 0.5714286em; + margin-bottom: 0.5714286em; + } + + .sm\:prose-sm>ul>li>*:first-child { + margin-top: 1.1428571em; + } + + .sm\:prose-sm>ul>li>*:last-child { + margin-bottom: 1.1428571em; + } + + .sm\:prose-sm>ol>li>*:first-child { + margin-top: 1.1428571em; + } + + .sm\:prose-sm>ol>li>*:last-child { + margin-bottom: 1.1428571em; + } + + .sm\:prose-sm ul ul, + .sm\:prose-sm ul ol, + .sm\:prose-sm ol ul, + .sm\:prose-sm ol ol { + margin-top: 0.5714286em; + margin-bottom: 0.5714286em; + } + + .sm\:prose-sm hr { + margin-top: 2.8571429em; + margin-bottom: 2.8571429em; + } + + .sm\:prose-sm hr+* { + margin-top: 0; + } + + .sm\:prose-sm h2+* { + margin-top: 0; + } + + .sm\:prose-sm h3+* { + margin-top: 0; + } + + .sm\:prose-sm h4+* { + margin-top: 0; + } + + .sm\:prose-sm table { + font-size: 0.8571429em; + line-height: 1.5; + } + + .sm\:prose-sm thead th { + padding-right: 1em; + padding-bottom: 0.6666667em; + padding-left: 1em; + } + + .sm\:prose-sm thead th:first-child { + padding-left: 0; + } + + .sm\:prose-sm thead th:last-child { + padding-right: 0; + } + + .sm\:prose-sm tbody td { + padding-top: 0.6666667em; + padding-right: 1em; + padding-bottom: 0.6666667em; + padding-left: 1em; + } + + .sm\:prose-sm tbody td:first-child { + padding-left: 0; + } + + .sm\:prose-sm tbody td:last-child { + padding-right: 0; + } + + .sm\:prose-sm> :first-child { + margin-top: 0; + } + + .sm\:prose-sm> :last-child { + margin-bottom: 0; + } + + .sm\:prose-lg { + font-size: 1.125rem; + line-height: 1.7777778; + } + + .sm\:prose-lg p { + margin-top: 1.3333333em; + margin-bottom: 1.3333333em; + } + + .sm\:prose-lg [class~="lead"] { + font-size: 1.2222222em; + line-height: 1.4545455; + margin-top: 1.0909091em; + margin-bottom: 1.0909091em; + } + + .sm\:prose-lg blockquote { + margin-top: 1.6666667em; + margin-bottom: 1.6666667em; + padding-left: 1em; + } + + .sm\:prose-lg h1 { + font-size: 2.6666667em; + margin-top: 0; + margin-bottom: 0.8333333em; + line-height: 1; + } + + .sm\:prose-lg h2 { + font-size: 1.6666667em; + margin-top: 1.8666667em; + margin-bottom: 1.0666667em; + line-height: 1.3333333; + } + + .sm\:prose-lg h3 { + font-size: 1.3333333em; + margin-top: 1.6666667em; + margin-bottom: 0.6666667em; + line-height: 1.5; + } + + .sm\:prose-lg h4 { + margin-top: 1.7777778em; + margin-bottom: 0.4444444em; + line-height: 1.5555556; + } + + .sm\:prose-lg img { + margin-top: 1.7777778em; + margin-bottom: 1.7777778em; + } + + .sm\:prose-lg video { + margin-top: 1.7777778em; + margin-bottom: 1.7777778em; + } + + .sm\:prose-lg figure { + margin-top: 1.7777778em; + margin-bottom: 1.7777778em; + } + + .sm\:prose-lg figure>* { + margin-top: 0; + margin-bottom: 0; + } + + .sm\:prose-lg figure figcaption { + font-size: 0.8888889em; + line-height: 1.5; + margin-top: 1em; + } + + .sm\:prose-lg code { + font-size: 0.8888889em; + } + + .sm\:prose-lg h2 code { + font-size: 0.8666667em; + } + + .sm\:prose-lg h3 code { + font-size: 0.875em; + } + + .sm\:prose-lg pre { + font-size: 0.8888889em; + line-height: 1.75; + margin-top: 2em; + margin-bottom: 2em; + border-radius: 0.375rem; + padding-top: 1em; + padding-right: 1.5em; + padding-bottom: 1em; + padding-left: 1.5em; + } + + .sm\:prose-lg ol { + margin-top: 1.3333333em; + margin-bottom: 1.3333333em; + } + + .sm\:prose-lg ul { + margin-top: 1.3333333em; + margin-bottom: 1.3333333em; + } + + .sm\:prose-lg li { + margin-top: 0.6666667em; + margin-bottom: 0.6666667em; + } + + .sm\:prose-lg ol>li { + padding-left: 1.6666667em; + } + + .sm\:prose-lg ol>li::before { + left: 0; + } + + .sm\:prose-lg ul>li { + padding-left: 1.6666667em; + } + + .sm\:prose-lg ul>li::before { + width: 0.3333333em; + height: 0.3333333em; + top: calc(0.8888889em - 0.1666667em); + left: 0.2222222em; + } + + .sm\:prose-lg>ul>li p { + margin-top: 0.8888889em; + margin-bottom: 0.8888889em; + } + + .sm\:prose-lg>ul>li>*:first-child { + margin-top: 1.3333333em; + } + + .sm\:prose-lg>ul>li>*:last-child { + margin-bottom: 1.3333333em; + } + + .sm\:prose-lg>ol>li>*:first-child { + margin-top: 1.3333333em; + } + + .sm\:prose-lg>ol>li>*:last-child { + margin-bottom: 1.3333333em; + } + + .sm\:prose-lg ul ul, + .sm\:prose-lg ul ol, + .sm\:prose-lg ol ul, + .sm\:prose-lg ol ol { + margin-top: 0.8888889em; + margin-bottom: 0.8888889em; + } + + .sm\:prose-lg hr { + margin-top: 3.1111111em; + margin-bottom: 3.1111111em; + } + + .sm\:prose-lg hr+* { + margin-top: 0; + } + + .sm\:prose-lg h2+* { + margin-top: 0; + } + + .sm\:prose-lg h3+* { + margin-top: 0; + } + + .sm\:prose-lg h4+* { + margin-top: 0; + } + + .sm\:prose-lg table { + font-size: 0.8888889em; + line-height: 1.5; + } + + .sm\:prose-lg thead th { + padding-right: 0.75em; + padding-bottom: 0.75em; + padding-left: 0.75em; + } + + .sm\:prose-lg thead th:first-child { + padding-left: 0; + } + + .sm\:prose-lg thead th:last-child { + padding-right: 0; + } + + .sm\:prose-lg tbody td { + padding-top: 0.75em; + padding-right: 0.75em; + padding-bottom: 0.75em; + padding-left: 0.75em; + } + + .sm\:prose-lg tbody td:first-child { + padding-left: 0; + } + + .sm\:prose-lg tbody td:last-child { + padding-right: 0; + } + + .sm\:prose-lg> :first-child { + margin-top: 0; + } + + .sm\:prose-lg> :last-child { + margin-bottom: 0; + } + + .sm\:prose-xl { + font-size: 1.25rem; + line-height: 1.8; + } + + .sm\:prose-xl p { + margin-top: 1.2em; + margin-bottom: 1.2em; + } + + .sm\:prose-xl [class~="lead"] { + font-size: 1.2em; + line-height: 1.5; + margin-top: 1em; + margin-bottom: 1em; + } + + .sm\:prose-xl blockquote { + margin-top: 1.6em; + margin-bottom: 1.6em; + padding-left: 1.0666667em; + } + + .sm\:prose-xl h1 { + font-size: 2.8em; + margin-top: 0; + margin-bottom: 0.8571429em; + line-height: 1; + } + + .sm\:prose-xl h2 { + font-size: 1.8em; + margin-top: 1.5555556em; + margin-bottom: 0.8888889em; + line-height: 1.1111111; + } + + .sm\:prose-xl h3 { + font-size: 1.5em; + margin-top: 1.6em; + margin-bottom: 0.6666667em; + line-height: 1.3333333; + } + + .sm\:prose-xl h4 { + margin-top: 1.8em; + margin-bottom: 0.6em; + line-height: 1.6; + } + + .sm\:prose-xl img { + margin-top: 2em; + margin-bottom: 2em; + } + + .sm\:prose-xl video { + margin-top: 2em; + margin-bottom: 2em; + } + + .sm\:prose-xl figure { + margin-top: 2em; + margin-bottom: 2em; + } + + .sm\:prose-xl figure>* { + margin-top: 0; + margin-bottom: 0; + } + + .sm\:prose-xl figure figcaption { + font-size: 0.9em; + line-height: 1.5555556; + margin-top: 1em; + } + + .sm\:prose-xl code { + font-size: 0.9em; + } + + .sm\:prose-xl h2 code { + font-size: 0.8611111em; + } + + .sm\:prose-xl h3 code { + font-size: 0.9em; + } + + .sm\:prose-xl pre { + font-size: 0.9em; + line-height: 1.7777778; + margin-top: 2em; + margin-bottom: 2em; + border-radius: 0.5rem; + padding-top: 1.1111111em; + padding-right: 1.3333333em; + padding-bottom: 1.1111111em; + padding-left: 1.3333333em; + } + + .sm\:prose-xl ol { + margin-top: 1.2em; + margin-bottom: 1.2em; + } + + .sm\:prose-xl ul { + margin-top: 1.2em; + margin-bottom: 1.2em; + } + + .sm\:prose-xl li { + margin-top: 0.6em; + margin-bottom: 0.6em; + } + + .sm\:prose-xl ol>li { + padding-left: 1.8em; + } + + .sm\:prose-xl ol>li::before { + left: 0; + } + + .sm\:prose-xl ul>li { + padding-left: 1.8em; + } + + .sm\:prose-xl ul>li::before { + width: 0.35em; + height: 0.35em; + top: calc(0.9em - 0.175em); + left: 0.25em; + } + + .sm\:prose-xl>ul>li p { + margin-top: 0.8em; + margin-bottom: 0.8em; + } + + .sm\:prose-xl>ul>li>*:first-child { + margin-top: 1.2em; + } + + .sm\:prose-xl>ul>li>*:last-child { + margin-bottom: 1.2em; + } + + .sm\:prose-xl>ol>li>*:first-child { + margin-top: 1.2em; + } + + .sm\:prose-xl>ol>li>*:last-child { + margin-bottom: 1.2em; + } + + .sm\:prose-xl ul ul, + .sm\:prose-xl ul ol, + .sm\:prose-xl ol ul, + .sm\:prose-xl ol ol { + margin-top: 0.8em; + margin-bottom: 0.8em; + } + + .sm\:prose-xl hr { + margin-top: 2.8em; + margin-bottom: 2.8em; + } + + .sm\:prose-xl hr+* { + margin-top: 0; + } + + .sm\:prose-xl h2+* { + margin-top: 0; + } + + .sm\:prose-xl h3+* { + margin-top: 0; + } + + .sm\:prose-xl h4+* { + margin-top: 0; + } + + .sm\:prose-xl table { + font-size: 0.9em; + line-height: 1.5555556; + } + + .sm\:prose-xl thead th { + padding-right: 0.6666667em; + padding-bottom: 0.8888889em; + padding-left: 0.6666667em; + } + + .sm\:prose-xl thead th:first-child { + padding-left: 0; + } + + .sm\:prose-xl thead th:last-child { + padding-right: 0; + } + + .sm\:prose-xl tbody td { + padding-top: 0.8888889em; + padding-right: 0.6666667em; + padding-bottom: 0.8888889em; + padding-left: 0.6666667em; + } + + .sm\:prose-xl tbody td:first-child { + padding-left: 0; + } + + .sm\:prose-xl tbody td:last-child { + padding-right: 0; + } + + .sm\:prose-xl> :first-child { + margin-top: 0; + } + + .sm\:prose-xl> :last-child { + margin-bottom: 0; + } + + .sm\:prose-2xl { + font-size: 1.5rem; + line-height: 1.6666667; + } + + .sm\:prose-2xl p { + margin-top: 1.3333333em; + margin-bottom: 1.3333333em; + } + + .sm\:prose-2xl [class~="lead"] { + font-size: 1.25em; + line-height: 1.4666667; + margin-top: 1.0666667em; + margin-bottom: 1.0666667em; + } + + .sm\:prose-2xl blockquote { + margin-top: 1.7777778em; + margin-bottom: 1.7777778em; + padding-left: 1.1111111em; + } + + .sm\:prose-2xl h1 { + font-size: 2.6666667em; + margin-top: 0; + margin-bottom: 0.875em; + line-height: 1; + } + + .sm\:prose-2xl h2 { + font-size: 2em; + margin-top: 1.5em; + margin-bottom: 0.8333333em; + line-height: 1.0833333; + } + + .sm\:prose-2xl h3 { + font-size: 1.5em; + margin-top: 1.5555556em; + margin-bottom: 0.6666667em; + line-height: 1.2222222; + } + + .sm\:prose-2xl h4 { + margin-top: 1.6666667em; + margin-bottom: 0.6666667em; + line-height: 1.5; + } + + .sm\:prose-2xl img { + margin-top: 2em; + margin-bottom: 2em; + } + + .sm\:prose-2xl video { + margin-top: 2em; + margin-bottom: 2em; + } + + .sm\:prose-2xl figure { + margin-top: 2em; + margin-bottom: 2em; + } + + .sm\:prose-2xl figure>* { + margin-top: 0; + margin-bottom: 0; + } + + .sm\:prose-2xl figure figcaption { + font-size: 0.8333333em; + line-height: 1.6; + margin-top: 1em; + } + + .sm\:prose-2xl code { + font-size: 0.8333333em; + } + + .sm\:prose-2xl h2 code { + font-size: 0.875em; + } + + .sm\:prose-2xl h3 code { + font-size: 0.8888889em; + } + + .sm\:prose-2xl pre { + font-size: 0.8333333em; + line-height: 1.8; + margin-top: 2em; + margin-bottom: 2em; + border-radius: 0.5rem; + padding-top: 1.2em; + padding-right: 1.6em; + padding-bottom: 1.2em; + padding-left: 1.6em; + } + + .sm\:prose-2xl ol { + margin-top: 1.3333333em; + margin-bottom: 1.3333333em; + } + + .sm\:prose-2xl ul { + margin-top: 1.3333333em; + margin-bottom: 1.3333333em; + } + + .sm\:prose-2xl li { + margin-top: 0.5em; + margin-bottom: 0.5em; + } + + .sm\:prose-2xl ol>li { + padding-left: 1.6666667em; + } + + .sm\:prose-2xl ol>li::before { + left: 0; + } + + .sm\:prose-2xl ul>li { + padding-left: 1.6666667em; + } + + .sm\:prose-2xl ul>li::before { + width: 0.3333333em; + height: 0.3333333em; + top: calc(0.8333333em - 0.1666667em); + left: 0.25em; + } + + .sm\:prose-2xl>ul>li p { + margin-top: 0.8333333em; + margin-bottom: 0.8333333em; + } + + .sm\:prose-2xl>ul>li>*:first-child { + margin-top: 1.3333333em; + } + + .sm\:prose-2xl>ul>li>*:last-child { + margin-bottom: 1.3333333em; + } + + .sm\:prose-2xl>ol>li>*:first-child { + margin-top: 1.3333333em; + } + + .sm\:prose-2xl>ol>li>*:last-child { + margin-bottom: 1.3333333em; + } + + .sm\:prose-2xl ul ul, + .sm\:prose-2xl ul ol, + .sm\:prose-2xl ol ul, + .sm\:prose-2xl ol ol { + margin-top: 0.6666667em; + margin-bottom: 0.6666667em; + } + + .sm\:prose-2xl hr { + margin-top: 3em; + margin-bottom: 3em; + } + + .sm\:prose-2xl hr+* { + margin-top: 0; + } + + .sm\:prose-2xl h2+* { + margin-top: 0; + } + + .sm\:prose-2xl h3+* { + margin-top: 0; + } + + .sm\:prose-2xl h4+* { + margin-top: 0; + } + + .sm\:prose-2xl table { + font-size: 0.8333333em; + line-height: 1.4; + } + + .sm\:prose-2xl thead th { + padding-right: 0.6em; + padding-bottom: 0.8em; + padding-left: 0.6em; + } + + .sm\:prose-2xl thead th:first-child { + padding-left: 0; + } + + .sm\:prose-2xl thead th:last-child { + padding-right: 0; + } + + .sm\:prose-2xl tbody td { + padding-top: 0.8em; + padding-right: 0.6em; + padding-bottom: 0.8em; + padding-left: 0.6em; + } + + .sm\:prose-2xl tbody td:first-child { + padding-left: 0; + } + + .sm\:prose-2xl tbody td:last-child { + padding-right: 0; + } + + .sm\:prose-2xl> :first-child { + margin-top: 0; + } + + .sm\:prose-2xl> :last-child { + margin-bottom: 0; + } + + .sm\:prose-red a {} + + .sm\:prose-red a code {} + + .sm\:prose-yellow a {} + + .sm\:prose-yellow a code {} + + .sm\:prose-green a {} + + .sm\:prose-green a code {} + + .sm\:prose-blue a {} + + .sm\:prose-blue a code {} + + .sm\:prose-indigo a {} + + .sm\:prose-indigo a code {} + + .sm\:prose-purple a {} + + .sm\:prose-purple a code {} + + .sm\:prose-pink a {} + + .sm\:prose-pink a code {} +} + +@media (min-width: 768px) { + .md\:prose { + + max-width: 65ch; + } + + .md\:prose [class~="lead"] { + + font-size: 1.25em; + line-height: 1.6; + margin-top: 1.2em; + margin-bottom: 1.2em; + } + + .md\:prose a { + + text-decoration: underline; + font-weight: 500; + } + + .md\:prose strong { + + font-weight: 600; + } + + .md\:prose ol[type="A"] { + --list-counter-style: upper-alpha; + } + + .md\:prose ol[type="a"] { + --list-counter-style: lower-alpha; + } + + .md\:prose ol[type="A" s] { + --list-counter-style: upper-alpha; + } + + .md\:prose ol[type="a" s] { + --list-counter-style: lower-alpha; + } + + .md\:prose ol[type="I"] { + --list-counter-style: upper-roman; + } + + .md\:prose ol[type="i"] { + --list-counter-style: lower-roman; + } + + .md\:prose ol[type="I" s] { + --list-counter-style: upper-roman; + } + + .md\:prose ol[type="i" s] { + --list-counter-style: lower-roman; + } + + .md\:prose ol[type="1"] { + --list-counter-style: decimal; + } + + .md\:prose ol>li { + position: relative; + padding-left: 1.75em; + } + + .md\:prose ol>li::before { + content: counter(list-item, var(--list-counter-style, decimal)) "."; + position: absolute; + font-weight: 400; + + left: 0; + } + + .md\:prose ul>li { + position: relative; + padding-left: 1.75em; + } + + .md\:prose ul>li::before { + content: ""; + position: absolute; + + border-radius: 50%; + width: 0.375em; + height: 0.375em; + top: calc(0.875em - 0.1875em); + left: 0.25em; + } + + .md\:prose hr { + + border-top-width: 1px; + margin-top: 3em; + margin-bottom: 3em; + } + + .md\:prose blockquote { + font-weight: 500; + font-style: italic; + + border-left-width: 0.25rem; + + quotes: "\201C" "\201D" "\2018" "\2019"; + margin-top: 1.6em; + margin-bottom: 1.6em; + padding-left: 1em; + } + + .md\:prose blockquote p:first-of-type::before { + content: open-quote; + } + + .md\:prose blockquote p:last-of-type::after { + content: close-quote; + } + + .md\:prose h1 { + + font-weight: 800; + font-size: 2.25em; + margin-top: 0; + margin-bottom: 0.8888889em; + line-height: 1.1111111; + } + + .md\:prose h2 { + + font-weight: 700; + font-size: 1.5em; + margin-top: 2em; + margin-bottom: 1em; + line-height: 1.3333333; + } + + .md\:prose h3 { + + font-weight: 600; + font-size: 1.25em; + margin-top: 1.6em; + margin-bottom: 0.6em; + line-height: 1.6; + } + + .md\:prose h4 { + + font-weight: 600; + margin-top: 1.5em; + margin-bottom: 0.5em; + line-height: 1.5; + } + + .md\:prose figure figcaption { + + font-size: 0.875em; + line-height: 1.4285714; + margin-top: 0.8571429em; + } + + .md\:prose code { + + font-weight: 600; + font-size: 0.875em; + } + + .md\:prose code::before { + content: "`"; + } + + .md\:prose code::after { + content: "`"; + } + + .md\:prose a code {} + + .md\:prose pre { + + + overflow-x: auto; + font-size: 0.875em; + line-height: 1.7142857; + margin-top: 1.7142857em; + margin-bottom: 1.7142857em; + border-radius: 0.375rem; + padding-top: 0.8571429em; + padding-right: 1.1428571em; + padding-bottom: 0.8571429em; + padding-left: 1.1428571em; + } + + .md\:prose pre code { + + border-width: 0; + border-radius: 0; + padding: 0; + font-weight: 400; + + font-size: inherit; + font-family: inherit; + line-height: inherit; + } + + .md\:prose pre code::before { + content: none; + } + + .md\:prose pre code::after { + content: none; + } + + .md\:prose table { + width: 100%; + table-layout: auto; + text-align: left; + margin-top: 2em; + margin-bottom: 2em; + font-size: 0.875em; + line-height: 1.7142857; + } + + .md\:prose thead { + + font-weight: 600; + border-bottom-width: 1px; + + } + + .md\:prose thead th { + vertical-align: bottom; + padding-right: 0.5714286em; + padding-bottom: 0.5714286em; + padding-left: 0.5714286em; + } + + .md\:prose tbody tr { + border-bottom-width: 1px; + + } + + .md\:prose tbody tr:last-child { + border-bottom-width: 0; + } + + .md\:prose tbody td { + vertical-align: top; + padding-top: 0.5714286em; + padding-right: 0.5714286em; + padding-bottom: 0.5714286em; + padding-left: 0.5714286em; + } + + .md\:prose { + font-size: 1rem; + line-height: 1.75; + } + + .md\:prose p { + margin-top: 1.25em; + margin-bottom: 1.25em; + } + + .md\:prose img { + margin-top: 2em; + margin-bottom: 2em; + } + + .md\:prose video { + margin-top: 2em; + margin-bottom: 2em; + } + + .md\:prose figure { + margin-top: 2em; + margin-bottom: 2em; + } + + .md\:prose figure>* { + margin-top: 0; + margin-bottom: 0; + } + + .md\:prose h2 code { + font-size: 0.875em; + } + + .md\:prose h3 code { + font-size: 0.9em; + } + + .md\:prose ol { + margin-top: 1.25em; + margin-bottom: 1.25em; + } + + .md\:prose ul { + margin-top: 1.25em; + margin-bottom: 1.25em; + } + + .md\:prose li { + margin-top: 0.5em; + margin-bottom: 0.5em; + } + + .md\:prose>ul>li p { + margin-top: 0.75em; + margin-bottom: 0.75em; + } + + .md\:prose>ul>li>*:first-child { + margin-top: 1.25em; + } + + .md\:prose>ul>li>*:last-child { + margin-bottom: 1.25em; + } + + .md\:prose>ol>li>*:first-child { + margin-top: 1.25em; + } + + .md\:prose>ol>li>*:last-child { + margin-bottom: 1.25em; + } + + .md\:prose ul ul, + .md\:prose ul ol, + .md\:prose ol ul, + .md\:prose ol ol { + margin-top: 0.75em; + margin-bottom: 0.75em; + } + + .md\:prose hr+* { + margin-top: 0; + } + + .md\:prose h2+* { + margin-top: 0; + } + + .md\:prose h3+* { + margin-top: 0; + } + + .md\:prose h4+* { + margin-top: 0; + } + + .md\:prose thead th:first-child { + padding-left: 0; + } + + .md\:prose thead th:last-child { + padding-right: 0; + } + + .md\:prose tbody td:first-child { + padding-left: 0; + } + + .md\:prose tbody td:last-child { + padding-right: 0; + } + + .md\:prose> :first-child { + margin-top: 0; + } + + .md\:prose> :last-child { + margin-bottom: 0; + } + + .md\:prose-sm { + font-size: 0.875rem; + line-height: 1.7142857; + } + + .md\:prose-sm p { + margin-top: 1.1428571em; + margin-bottom: 1.1428571em; + } + + .md\:prose-sm [class~="lead"] { + font-size: 1.2857143em; + line-height: 1.5555556; + margin-top: 0.8888889em; + margin-bottom: 0.8888889em; + } + + .md\:prose-sm blockquote { + margin-top: 1.3333333em; + margin-bottom: 1.3333333em; + padding-left: 1.1111111em; + } + + .md\:prose-sm h1 { + font-size: 2.1428571em; + margin-top: 0; + margin-bottom: 0.8em; + line-height: 1.2; + } + + .md\:prose-sm h2 { + font-size: 1.4285714em; + margin-top: 1.6em; + margin-bottom: 0.8em; + line-height: 1.4; + } + + .md\:prose-sm h3 { + font-size: 1.2857143em; + margin-top: 1.5555556em; + margin-bottom: 0.4444444em; + line-height: 1.5555556; + } + + .md\:prose-sm h4 { + margin-top: 1.4285714em; + margin-bottom: 0.5714286em; + line-height: 1.4285714; + } + + .md\:prose-sm img { + margin-top: 1.7142857em; + margin-bottom: 1.7142857em; + } + + .md\:prose-sm video { + margin-top: 1.7142857em; + margin-bottom: 1.7142857em; + } + + .md\:prose-sm figure { + margin-top: 1.7142857em; + margin-bottom: 1.7142857em; + } + + .md\:prose-sm figure>* { + margin-top: 0; + margin-bottom: 0; + } + + .md\:prose-sm figure figcaption { + font-size: 0.8571429em; + line-height: 1.3333333; + margin-top: 0.6666667em; + } + + .md\:prose-sm code { + font-size: 0.8571429em; + } + + .md\:prose-sm h2 code { + font-size: 0.9em; + } + + .md\:prose-sm h3 code { + font-size: 0.8888889em; + } + + .md\:prose-sm pre { + font-size: 0.8571429em; + line-height: 1.6666667; + margin-top: 1.6666667em; + margin-bottom: 1.6666667em; + border-radius: 0.25rem; + padding-top: 0.6666667em; + padding-right: 1em; + padding-bottom: 0.6666667em; + padding-left: 1em; + } + + .md\:prose-sm ol { + margin-top: 1.1428571em; + margin-bottom: 1.1428571em; + } + + .md\:prose-sm ul { + margin-top: 1.1428571em; + margin-bottom: 1.1428571em; + } + + .md\:prose-sm li { + margin-top: 0.2857143em; + margin-bottom: 0.2857143em; + } + + .md\:prose-sm ol>li { + padding-left: 1.5714286em; + } + + .md\:prose-sm ol>li::before { + left: 0; + } + + .md\:prose-sm ul>li { + padding-left: 1.5714286em; + } + + .md\:prose-sm ul>li::before { + height: 0.3571429em; + width: 0.3571429em; + top: calc(0.8571429em - 0.1785714em); + left: 0.2142857em; + } + + .md\:prose-sm>ul>li p { + margin-top: 0.5714286em; + margin-bottom: 0.5714286em; + } + + .md\:prose-sm>ul>li>*:first-child { + margin-top: 1.1428571em; + } + + .md\:prose-sm>ul>li>*:last-child { + margin-bottom: 1.1428571em; + } + + .md\:prose-sm>ol>li>*:first-child { + margin-top: 1.1428571em; + } + + .md\:prose-sm>ol>li>*:last-child { + margin-bottom: 1.1428571em; + } + + .md\:prose-sm ul ul, + .md\:prose-sm ul ol, + .md\:prose-sm ol ul, + .md\:prose-sm ol ol { + margin-top: 0.5714286em; + margin-bottom: 0.5714286em; + } + + .md\:prose-sm hr { + margin-top: 2.8571429em; + margin-bottom: 2.8571429em; + } + + .md\:prose-sm hr+* { + margin-top: 0; + } + + .md\:prose-sm h2+* { + margin-top: 0; + } + + .md\:prose-sm h3+* { + margin-top: 0; + } + + .md\:prose-sm h4+* { + margin-top: 0; + } + + .md\:prose-sm table { + font-size: 0.8571429em; + line-height: 1.5; + } + + .md\:prose-sm thead th { + padding-right: 1em; + padding-bottom: 0.6666667em; + padding-left: 1em; + } + + .md\:prose-sm thead th:first-child { + padding-left: 0; + } + + .md\:prose-sm thead th:last-child { + padding-right: 0; + } + + .md\:prose-sm tbody td { + padding-top: 0.6666667em; + padding-right: 1em; + padding-bottom: 0.6666667em; + padding-left: 1em; + } + + .md\:prose-sm tbody td:first-child { + padding-left: 0; + } + + .md\:prose-sm tbody td:last-child { + padding-right: 0; + } + + .md\:prose-sm> :first-child { + margin-top: 0; + } + + .md\:prose-sm> :last-child { + margin-bottom: 0; + } + + .md\:prose-lg { + font-size: 1.125rem; + line-height: 1.7777778; + } + + .md\:prose-lg p { + margin-top: 1.3333333em; + margin-bottom: 1.3333333em; + } + + .md\:prose-lg [class~="lead"] { + font-size: 1.2222222em; + line-height: 1.4545455; + margin-top: 1.0909091em; + margin-bottom: 1.0909091em; + } + + .md\:prose-lg blockquote { + margin-top: 1.6666667em; + margin-bottom: 1.6666667em; + padding-left: 1em; + } + + .md\:prose-lg h1 { + font-size: 2.6666667em; + margin-top: 0; + margin-bottom: 0.8333333em; + line-height: 1; + } + + .md\:prose-lg h2 { + font-size: 1.6666667em; + margin-top: 1.8666667em; + margin-bottom: 1.0666667em; + line-height: 1.3333333; + } + + .md\:prose-lg h3 { + font-size: 1.3333333em; + margin-top: 1.6666667em; + margin-bottom: 0.6666667em; + line-height: 1.5; + } + + .md\:prose-lg h4 { + margin-top: 1.7777778em; + margin-bottom: 0.4444444em; + line-height: 1.5555556; + } + + .md\:prose-lg img { + margin-top: 1.7777778em; + margin-bottom: 1.7777778em; + } + + .md\:prose-lg video { + margin-top: 1.7777778em; + margin-bottom: 1.7777778em; + } + + .md\:prose-lg figure { + margin-top: 1.7777778em; + margin-bottom: 1.7777778em; + } + + .md\:prose-lg figure>* { + margin-top: 0; + margin-bottom: 0; + } + + .md\:prose-lg figure figcaption { + font-size: 0.8888889em; + line-height: 1.5; + margin-top: 1em; + } + + .md\:prose-lg code { + font-size: 0.8888889em; + } + + .md\:prose-lg h2 code { + font-size: 0.8666667em; + } + + .md\:prose-lg h3 code { + font-size: 0.875em; + } + + .md\:prose-lg pre { + font-size: 0.8888889em; + line-height: 1.75; + margin-top: 2em; + margin-bottom: 2em; + border-radius: 0.375rem; + padding-top: 1em; + padding-right: 1.5em; + padding-bottom: 1em; + padding-left: 1.5em; + } + + .md\:prose-lg ol { + margin-top: 1.3333333em; + margin-bottom: 1.3333333em; + } + + .md\:prose-lg ul { + margin-top: 1.3333333em; + margin-bottom: 1.3333333em; + } + + .md\:prose-lg li { + margin-top: 0.6666667em; + margin-bottom: 0.6666667em; + } + + .md\:prose-lg ol>li { + padding-left: 1.6666667em; + } + + .md\:prose-lg ol>li::before { + left: 0; + } + + .md\:prose-lg ul>li { + padding-left: 1.6666667em; + } + + .md\:prose-lg ul>li::before { + width: 0.3333333em; + height: 0.3333333em; + top: calc(0.8888889em - 0.1666667em); + left: 0.2222222em; + } + + .md\:prose-lg>ul>li p { + margin-top: 0.8888889em; + margin-bottom: 0.8888889em; + } + + .md\:prose-lg>ul>li>*:first-child { + margin-top: 1.3333333em; + } + + .md\:prose-lg>ul>li>*:last-child { + margin-bottom: 1.3333333em; + } + + .md\:prose-lg>ol>li>*:first-child { + margin-top: 1.3333333em; + } + + .md\:prose-lg>ol>li>*:last-child { + margin-bottom: 1.3333333em; + } + + .md\:prose-lg ul ul, + .md\:prose-lg ul ol, + .md\:prose-lg ol ul, + .md\:prose-lg ol ol { + margin-top: 0.8888889em; + margin-bottom: 0.8888889em; + } + + .md\:prose-lg hr { + margin-top: 3.1111111em; + margin-bottom: 3.1111111em; + } + + .md\:prose-lg hr+* { + margin-top: 0; + } + + .md\:prose-lg h2+* { + margin-top: 0; + } + + .md\:prose-lg h3+* { + margin-top: 0; + } + + .md\:prose-lg h4+* { + margin-top: 0; + } + + .md\:prose-lg table { + font-size: 0.8888889em; + line-height: 1.5; + } + + .md\:prose-lg thead th { + padding-right: 0.75em; + padding-bottom: 0.75em; + padding-left: 0.75em; + } + + .md\:prose-lg thead th:first-child { + padding-left: 0; + } + + .md\:prose-lg thead th:last-child { + padding-right: 0; + } + + .md\:prose-lg tbody td { + padding-top: 0.75em; + padding-right: 0.75em; + padding-bottom: 0.75em; + padding-left: 0.75em; + } + + .md\:prose-lg tbody td:first-child { + padding-left: 0; + } + + .md\:prose-lg tbody td:last-child { + padding-right: 0; + } + + .md\:prose-lg> :first-child { + margin-top: 0; + } + + .md\:prose-lg> :last-child { + margin-bottom: 0; + } + + .md\:prose-xl { + font-size: 1.25rem; + line-height: 1.8; + } + + .md\:prose-xl p { + margin-top: 1.2em; + margin-bottom: 1.2em; + } + + .md\:prose-xl [class~="lead"] { + font-size: 1.2em; + line-height: 1.5; + margin-top: 1em; + margin-bottom: 1em; + } + + .md\:prose-xl blockquote { + margin-top: 1.6em; + margin-bottom: 1.6em; + padding-left: 1.0666667em; + } + + .md\:prose-xl h1 { + font-size: 2.8em; + margin-top: 0; + margin-bottom: 0.8571429em; + line-height: 1; + } + + .md\:prose-xl h2 { + font-size: 1.8em; + margin-top: 1.5555556em; + margin-bottom: 0.8888889em; + line-height: 1.1111111; + } + + .md\:prose-xl h3 { + font-size: 1.5em; + margin-top: 1.6em; + margin-bottom: 0.6666667em; + line-height: 1.3333333; + } + + .md\:prose-xl h4 { + margin-top: 1.8em; + margin-bottom: 0.6em; + line-height: 1.6; + } + + .md\:prose-xl img { + margin-top: 2em; + margin-bottom: 2em; + } + + .md\:prose-xl video { + margin-top: 2em; + margin-bottom: 2em; + } + + .md\:prose-xl figure { + margin-top: 2em; + margin-bottom: 2em; + } + + .md\:prose-xl figure>* { + margin-top: 0; + margin-bottom: 0; + } + + .md\:prose-xl figure figcaption { + font-size: 0.9em; + line-height: 1.5555556; + margin-top: 1em; + } + + .md\:prose-xl code { + font-size: 0.9em; + } + + .md\:prose-xl h2 code { + font-size: 0.8611111em; + } + + .md\:prose-xl h3 code { + font-size: 0.9em; + } + + .md\:prose-xl pre { + font-size: 0.9em; + line-height: 1.7777778; + margin-top: 2em; + margin-bottom: 2em; + border-radius: 0.5rem; + padding-top: 1.1111111em; + padding-right: 1.3333333em; + padding-bottom: 1.1111111em; + padding-left: 1.3333333em; + } + + .md\:prose-xl ol { + margin-top: 1.2em; + margin-bottom: 1.2em; + } + + .md\:prose-xl ul { + margin-top: 1.2em; + margin-bottom: 1.2em; + } + + .md\:prose-xl li { + margin-top: 0.6em; + margin-bottom: 0.6em; + } + + .md\:prose-xl ol>li { + padding-left: 1.8em; + } + + .md\:prose-xl ol>li::before { + left: 0; + } + + .md\:prose-xl ul>li { + padding-left: 1.8em; + } + + .md\:prose-xl ul>li::before { + width: 0.35em; + height: 0.35em; + top: calc(0.9em - 0.175em); + left: 0.25em; + } + + .md\:prose-xl>ul>li p { + margin-top: 0.8em; + margin-bottom: 0.8em; + } + + .md\:prose-xl>ul>li>*:first-child { + margin-top: 1.2em; + } + + .md\:prose-xl>ul>li>*:last-child { + margin-bottom: 1.2em; + } + + .md\:prose-xl>ol>li>*:first-child { + margin-top: 1.2em; + } + + .md\:prose-xl>ol>li>*:last-child { + margin-bottom: 1.2em; + } + + .md\:prose-xl ul ul, + .md\:prose-xl ul ol, + .md\:prose-xl ol ul, + .md\:prose-xl ol ol { + margin-top: 0.8em; + margin-bottom: 0.8em; + } + + .md\:prose-xl hr { + margin-top: 2.8em; + margin-bottom: 2.8em; + } + + .md\:prose-xl hr+* { + margin-top: 0; + } + + .md\:prose-xl h2+* { + margin-top: 0; + } + + .md\:prose-xl h3+* { + margin-top: 0; + } + + .md\:prose-xl h4+* { + margin-top: 0; + } + + .md\:prose-xl table { + font-size: 0.9em; + line-height: 1.5555556; + } + + .md\:prose-xl thead th { + padding-right: 0.6666667em; + padding-bottom: 0.8888889em; + padding-left: 0.6666667em; + } + + .md\:prose-xl thead th:first-child { + padding-left: 0; + } + + .md\:prose-xl thead th:last-child { + padding-right: 0; + } + + .md\:prose-xl tbody td { + padding-top: 0.8888889em; + padding-right: 0.6666667em; + padding-bottom: 0.8888889em; + padding-left: 0.6666667em; + } + + .md\:prose-xl tbody td:first-child { + padding-left: 0; + } + + .md\:prose-xl tbody td:last-child { + padding-right: 0; + } + + .md\:prose-xl> :first-child { + margin-top: 0; + } + + .md\:prose-xl> :last-child { + margin-bottom: 0; + } + + .md\:prose-2xl { + font-size: 1.5rem; + line-height: 1.6666667; + } + + .md\:prose-2xl p { + margin-top: 1.3333333em; + margin-bottom: 1.3333333em; + } + + .md\:prose-2xl [class~="lead"] { + font-size: 1.25em; + line-height: 1.4666667; + margin-top: 1.0666667em; + margin-bottom: 1.0666667em; + } + + .md\:prose-2xl blockquote { + margin-top: 1.7777778em; + margin-bottom: 1.7777778em; + padding-left: 1.1111111em; + } + + .md\:prose-2xl h1 { + font-size: 2.6666667em; + margin-top: 0; + margin-bottom: 0.875em; + line-height: 1; + } + + .md\:prose-2xl h2 { + font-size: 2em; + margin-top: 1.5em; + margin-bottom: 0.8333333em; + line-height: 1.0833333; + } + + .md\:prose-2xl h3 { + font-size: 1.5em; + margin-top: 1.5555556em; + margin-bottom: 0.6666667em; + line-height: 1.2222222; + } + + .md\:prose-2xl h4 { + margin-top: 1.6666667em; + margin-bottom: 0.6666667em; + line-height: 1.5; + } + + .md\:prose-2xl img { + margin-top: 2em; + margin-bottom: 2em; + } + + .md\:prose-2xl video { + margin-top: 2em; + margin-bottom: 2em; + } + + .md\:prose-2xl figure { + margin-top: 2em; + margin-bottom: 2em; + } + + .md\:prose-2xl figure>* { + margin-top: 0; + margin-bottom: 0; + } + + .md\:prose-2xl figure figcaption { + font-size: 0.8333333em; + line-height: 1.6; + margin-top: 1em; + } + + .md\:prose-2xl code { + font-size: 0.8333333em; + } + + .md\:prose-2xl h2 code { + font-size: 0.875em; + } + + .md\:prose-2xl h3 code { + font-size: 0.8888889em; + } + + .md\:prose-2xl pre { + font-size: 0.8333333em; + line-height: 1.8; + margin-top: 2em; + margin-bottom: 2em; + border-radius: 0.5rem; + padding-top: 1.2em; + padding-right: 1.6em; + padding-bottom: 1.2em; + padding-left: 1.6em; + } + + .md\:prose-2xl ol { + margin-top: 1.3333333em; + margin-bottom: 1.3333333em; + } + + .md\:prose-2xl ul { + margin-top: 1.3333333em; + margin-bottom: 1.3333333em; + } + + .md\:prose-2xl li { + margin-top: 0.5em; + margin-bottom: 0.5em; + } + + .md\:prose-2xl ol>li { + padding-left: 1.6666667em; + } + + .md\:prose-2xl ol>li::before { + left: 0; + } + + .md\:prose-2xl ul>li { + padding-left: 1.6666667em; + } + + .md\:prose-2xl ul>li::before { + width: 0.3333333em; + height: 0.3333333em; + top: calc(0.8333333em - 0.1666667em); + left: 0.25em; + } + + .md\:prose-2xl>ul>li p { + margin-top: 0.8333333em; + margin-bottom: 0.8333333em; + } + + .md\:prose-2xl>ul>li>*:first-child { + margin-top: 1.3333333em; + } + + .md\:prose-2xl>ul>li>*:last-child { + margin-bottom: 1.3333333em; + } + + .md\:prose-2xl>ol>li>*:first-child { + margin-top: 1.3333333em; + } + + .md\:prose-2xl>ol>li>*:last-child { + margin-bottom: 1.3333333em; + } + + .md\:prose-2xl ul ul, + .md\:prose-2xl ul ol, + .md\:prose-2xl ol ul, + .md\:prose-2xl ol ol { + margin-top: 0.6666667em; + margin-bottom: 0.6666667em; + } + + .md\:prose-2xl hr { + margin-top: 3em; + margin-bottom: 3em; + } + + .md\:prose-2xl hr+* { + margin-top: 0; + } + + .md\:prose-2xl h2+* { + margin-top: 0; + } + + .md\:prose-2xl h3+* { + margin-top: 0; + } + + .md\:prose-2xl h4+* { + margin-top: 0; + } + + .md\:prose-2xl table { + font-size: 0.8333333em; + line-height: 1.4; + } + + .md\:prose-2xl thead th { + padding-right: 0.6em; + padding-bottom: 0.8em; + padding-left: 0.6em; + } + + .md\:prose-2xl thead th:first-child { + padding-left: 0; + } + + .md\:prose-2xl thead th:last-child { + padding-right: 0; + } + + .md\:prose-2xl tbody td { + padding-top: 0.8em; + padding-right: 0.6em; + padding-bottom: 0.8em; + padding-left: 0.6em; + } + + .md\:prose-2xl tbody td:first-child { + padding-left: 0; + } + + .md\:prose-2xl tbody td:last-child { + padding-right: 0; + } + + .md\:prose-2xl> :first-child { + margin-top: 0; + } + + .md\:prose-2xl> :last-child { + margin-bottom: 0; + } + + .md\:prose-red a {} + + .md\:prose-red a code {} + + .md\:prose-yellow a {} + + .md\:prose-yellow a code {} + + .md\:prose-green a {} + + .md\:prose-green a code {} + + .md\:prose-blue a {} + + .md\:prose-blue a code {} + + .md\:prose-indigo a {} + + .md\:prose-indigo a code {} + + .md\:prose-purple a {} + + .md\:prose-purple a code {} + + .md\:prose-pink a {} + + .md\:prose-pink a code {} +} + +@media (min-width: 1024px) { + .lg\:prose { + + max-width: 65ch; + } + + .lg\:prose [class~="lead"] { + + font-size: 1.25em; + line-height: 1.6; + margin-top: 1.2em; + margin-bottom: 1.2em; + } + + .lg\:prose a { + + text-decoration: underline; + font-weight: 500; + } + + .lg\:prose strong { + + font-weight: 600; + } + + .lg\:prose ol[type="A"] { + --list-counter-style: upper-alpha; + } + + .lg\:prose ol[type="a"] { + --list-counter-style: lower-alpha; + } + + .lg\:prose ol[type="A" s] { + --list-counter-style: upper-alpha; + } + + .lg\:prose ol[type="a" s] { + --list-counter-style: lower-alpha; + } + + .lg\:prose ol[type="I"] { + --list-counter-style: upper-roman; + } + + .lg\:prose ol[type="i"] { + --list-counter-style: lower-roman; + } + + .lg\:prose ol[type="I" s] { + --list-counter-style: upper-roman; + } + + .lg\:prose ol[type="i" s] { + --list-counter-style: lower-roman; + } + + .lg\:prose ol[type="1"] { + --list-counter-style: decimal; + } + + .lg\:prose ol>li { + position: relative; + padding-left: 1.75em; + } + + .lg\:prose ol>li::before { + content: counter(list-item, var(--list-counter-style, decimal)) "."; + position: absolute; + font-weight: 400; + + left: 0; + } + + .lg\:prose ul>li { + position: relative; + padding-left: 1.75em; + } + + .lg\:prose ul>li::before { + content: ""; + position: absolute; + + border-radius: 50%; + width: 0.375em; + height: 0.375em; + top: calc(0.875em - 0.1875em); + left: 0.25em; + } + + .lg\:prose hr { + + border-top-width: 1px; + margin-top: 3em; + margin-bottom: 3em; + } + + .lg\:prose blockquote { + font-weight: 500; + font-style: italic; + + border-left-width: 0.25rem; + + quotes: "\201C" "\201D" "\2018" "\2019"; + margin-top: 1.6em; + margin-bottom: 1.6em; + padding-left: 1em; + } + + .lg\:prose blockquote p:first-of-type::before { + content: open-quote; + } + + .lg\:prose blockquote p:last-of-type::after { + content: close-quote; + } + + .lg\:prose h1 { + + font-weight: 800; + font-size: 2.25em; + margin-top: 0; + margin-bottom: 0.8888889em; + line-height: 1.1111111; + } + + .lg\:prose h2 { + + font-weight: 700; + font-size: 1.5em; + margin-top: 2em; + margin-bottom: 1em; + line-height: 1.3333333; + } + + .lg\:prose h3 { + + font-weight: 600; + font-size: 1.25em; + margin-top: 1.6em; + margin-bottom: 0.6em; + line-height: 1.6; + } + + .lg\:prose h4 { + + font-weight: 600; + margin-top: 1.5em; + margin-bottom: 0.5em; + line-height: 1.5; + } + + .lg\:prose figure figcaption { + + font-size: 0.875em; + line-height: 1.4285714; + margin-top: 0.8571429em; + } + + .lg\:prose code { + + font-weight: 600; + font-size: 0.875em; + } + + .lg\:prose code::before { + content: "`"; + } + + .lg\:prose code::after { + content: "`"; + } + + .lg\:prose a code {} + + .lg\:prose pre { + + + overflow-x: auto; + font-size: 0.875em; + line-height: 1.7142857; + margin-top: 1.7142857em; + margin-bottom: 1.7142857em; + border-radius: 0.375rem; + padding-top: 0.8571429em; + padding-right: 1.1428571em; + padding-bottom: 0.8571429em; + padding-left: 1.1428571em; + } + + .lg\:prose pre code { + + border-width: 0; + border-radius: 0; + padding: 0; + font-weight: 400; + + font-size: inherit; + font-family: inherit; + line-height: inherit; + } + + .lg\:prose pre code::before { + content: none; + } + + .lg\:prose pre code::after { + content: none; + } + + .lg\:prose table { + width: 100%; + table-layout: auto; + text-align: left; + margin-top: 2em; + margin-bottom: 2em; + font-size: 0.875em; + line-height: 1.7142857; + } + + .lg\:prose thead { + + font-weight: 600; + border-bottom-width: 1px; + + } + + .lg\:prose thead th { + vertical-align: bottom; + padding-right: 0.5714286em; + padding-bottom: 0.5714286em; + padding-left: 0.5714286em; + } + + .lg\:prose tbody tr { + border-bottom-width: 1px; + + } + + .lg\:prose tbody tr:last-child { + border-bottom-width: 0; + } + + .lg\:prose tbody td { + vertical-align: top; + padding-top: 0.5714286em; + padding-right: 0.5714286em; + padding-bottom: 0.5714286em; + padding-left: 0.5714286em; + } + + .lg\:prose { + font-size: 1rem; + line-height: 1.75; + } + + .lg\:prose p { + margin-top: 1.25em; + margin-bottom: 1.25em; + } + + .lg\:prose img { + margin-top: 2em; + margin-bottom: 2em; + } + + .lg\:prose video { + margin-top: 2em; + margin-bottom: 2em; + } + + .lg\:prose figure { + margin-top: 2em; + margin-bottom: 2em; + } + + .lg\:prose figure>* { + margin-top: 0; + margin-bottom: 0; + } + + .lg\:prose h2 code { + font-size: 0.875em; + } + + .lg\:prose h3 code { + font-size: 0.9em; + } + + .lg\:prose ol { + margin-top: 1.25em; + margin-bottom: 1.25em; + } + + .lg\:prose ul { + margin-top: 1.25em; + margin-bottom: 1.25em; + } + + .lg\:prose li { + margin-top: 0.5em; + margin-bottom: 0.5em; + } + + .lg\:prose>ul>li p { + margin-top: 0.75em; + margin-bottom: 0.75em; + } + + .lg\:prose>ul>li>*:first-child { + margin-top: 1.25em; + } + + .lg\:prose>ul>li>*:last-child { + margin-bottom: 1.25em; + } + + .lg\:prose>ol>li>*:first-child { + margin-top: 1.25em; + } + + .lg\:prose>ol>li>*:last-child { + margin-bottom: 1.25em; + } + + .lg\:prose ul ul, + .lg\:prose ul ol, + .lg\:prose ol ul, + .lg\:prose ol ol { + margin-top: 0.75em; + margin-bottom: 0.75em; + } + + .lg\:prose hr+* { + margin-top: 0; + } + + .lg\:prose h2+* { + margin-top: 0; + } + + .lg\:prose h3+* { + margin-top: 0; + } + + .lg\:prose h4+* { + margin-top: 0; + } + + .lg\:prose thead th:first-child { + padding-left: 0; + } + + .lg\:prose thead th:last-child { + padding-right: 0; + } + + .lg\:prose tbody td:first-child { + padding-left: 0; + } + + .lg\:prose tbody td:last-child { + padding-right: 0; + } + + .lg\:prose> :first-child { + margin-top: 0; + } + + .lg\:prose> :last-child { + margin-bottom: 0; + } + + .lg\:prose-sm { + font-size: 0.875rem; + line-height: 1.7142857; + } + + .lg\:prose-sm p { + margin-top: 1.1428571em; + margin-bottom: 1.1428571em; + } + + .lg\:prose-sm [class~="lead"] { + font-size: 1.2857143em; + line-height: 1.5555556; + margin-top: 0.8888889em; + margin-bottom: 0.8888889em; + } + + .lg\:prose-sm blockquote { + margin-top: 1.3333333em; + margin-bottom: 1.3333333em; + padding-left: 1.1111111em; + } + + .lg\:prose-sm h1 { + font-size: 2.1428571em; + margin-top: 0; + margin-bottom: 0.8em; + line-height: 1.2; + } + + .lg\:prose-sm h2 { + font-size: 1.4285714em; + margin-top: 1.6em; + margin-bottom: 0.8em; + line-height: 1.4; + } + + .lg\:prose-sm h3 { + font-size: 1.2857143em; + margin-top: 1.5555556em; + margin-bottom: 0.4444444em; + line-height: 1.5555556; + } + + .lg\:prose-sm h4 { + margin-top: 1.4285714em; + margin-bottom: 0.5714286em; + line-height: 1.4285714; + } + + .lg\:prose-sm img { + margin-top: 1.7142857em; + margin-bottom: 1.7142857em; + } + + .lg\:prose-sm video { + margin-top: 1.7142857em; + margin-bottom: 1.7142857em; + } + + .lg\:prose-sm figure { + margin-top: 1.7142857em; + margin-bottom: 1.7142857em; + } + + .lg\:prose-sm figure>* { + margin-top: 0; + margin-bottom: 0; + } + + .lg\:prose-sm figure figcaption { + font-size: 0.8571429em; + line-height: 1.3333333; + margin-top: 0.6666667em; + } + + .lg\:prose-sm code { + font-size: 0.8571429em; + } + + .lg\:prose-sm h2 code { + font-size: 0.9em; + } + + .lg\:prose-sm h3 code { + font-size: 0.8888889em; + } + + .lg\:prose-sm pre { + font-size: 0.8571429em; + line-height: 1.6666667; + margin-top: 1.6666667em; + margin-bottom: 1.6666667em; + border-radius: 0.25rem; + padding-top: 0.6666667em; + padding-right: 1em; + padding-bottom: 0.6666667em; + padding-left: 1em; + } + + .lg\:prose-sm ol { + margin-top: 1.1428571em; + margin-bottom: 1.1428571em; + } + + .lg\:prose-sm ul { + margin-top: 1.1428571em; + margin-bottom: 1.1428571em; + } + + .lg\:prose-sm li { + margin-top: 0.2857143em; + margin-bottom: 0.2857143em; + } + + .lg\:prose-sm ol>li { + padding-left: 1.5714286em; + } + + .lg\:prose-sm ol>li::before { + left: 0; + } + + .lg\:prose-sm ul>li { + padding-left: 1.5714286em; + } + + .lg\:prose-sm ul>li::before { + height: 0.3571429em; + width: 0.3571429em; + top: calc(0.8571429em - 0.1785714em); + left: 0.2142857em; + } + + .lg\:prose-sm>ul>li p { + margin-top: 0.5714286em; + margin-bottom: 0.5714286em; + } + + .lg\:prose-sm>ul>li>*:first-child { + margin-top: 1.1428571em; + } + + .lg\:prose-sm>ul>li>*:last-child { + margin-bottom: 1.1428571em; + } + + .lg\:prose-sm>ol>li>*:first-child { + margin-top: 1.1428571em; + } + + .lg\:prose-sm>ol>li>*:last-child { + margin-bottom: 1.1428571em; + } + + .lg\:prose-sm ul ul, + .lg\:prose-sm ul ol, + .lg\:prose-sm ol ul, + .lg\:prose-sm ol ol { + margin-top: 0.5714286em; + margin-bottom: 0.5714286em; + } + + .lg\:prose-sm hr { + margin-top: 2.8571429em; + margin-bottom: 2.8571429em; + } + + .lg\:prose-sm hr+* { + margin-top: 0; + } + + .lg\:prose-sm h2+* { + margin-top: 0; + } + + .lg\:prose-sm h3+* { + margin-top: 0; + } + + .lg\:prose-sm h4+* { + margin-top: 0; + } + + .lg\:prose-sm table { + font-size: 0.8571429em; + line-height: 1.5; + } + + .lg\:prose-sm thead th { + padding-right: 1em; + padding-bottom: 0.6666667em; + padding-left: 1em; + } + + .lg\:prose-sm thead th:first-child { + padding-left: 0; + } + + .lg\:prose-sm thead th:last-child { + padding-right: 0; + } + + .lg\:prose-sm tbody td { + padding-top: 0.6666667em; + padding-right: 1em; + padding-bottom: 0.6666667em; + padding-left: 1em; + } + + .lg\:prose-sm tbody td:first-child { + padding-left: 0; + } + + .lg\:prose-sm tbody td:last-child { + padding-right: 0; + } + + .lg\:prose-sm> :first-child { + margin-top: 0; + } + + .lg\:prose-sm> :last-child { + margin-bottom: 0; + } + + .lg\:prose-lg { + font-size: 1.125rem; + line-height: 1.7777778; + } + + .lg\:prose-lg p { + margin-top: 1.3333333em; + margin-bottom: 1.3333333em; + } + + .lg\:prose-lg [class~="lead"] { + font-size: 1.2222222em; + line-height: 1.4545455; + margin-top: 1.0909091em; + margin-bottom: 1.0909091em; + } + + .lg\:prose-lg blockquote { + margin-top: 1.6666667em; + margin-bottom: 1.6666667em; + padding-left: 1em; + } + + .lg\:prose-lg h1 { + font-size: 2.6666667em; + margin-top: 0; + margin-bottom: 0.8333333em; + line-height: 1; + } + + .lg\:prose-lg h2 { + font-size: 1.6666667em; + margin-top: 1.8666667em; + margin-bottom: 1.0666667em; + line-height: 1.3333333; + } + + .lg\:prose-lg h3 { + font-size: 1.3333333em; + margin-top: 1.6666667em; + margin-bottom: 0.6666667em; + line-height: 1.5; + } + + .lg\:prose-lg h4 { + margin-top: 1.7777778em; + margin-bottom: 0.4444444em; + line-height: 1.5555556; + } + + .lg\:prose-lg img { + margin-top: 1.7777778em; + margin-bottom: 1.7777778em; + } + + .lg\:prose-lg video { + margin-top: 1.7777778em; + margin-bottom: 1.7777778em; + } + + .lg\:prose-lg figure { + margin-top: 1.7777778em; + margin-bottom: 1.7777778em; + } + + .lg\:prose-lg figure>* { + margin-top: 0; + margin-bottom: 0; + } + + .lg\:prose-lg figure figcaption { + font-size: 0.8888889em; + line-height: 1.5; + margin-top: 1em; + } + + .lg\:prose-lg code { + font-size: 0.8888889em; + } + + .lg\:prose-lg h2 code { + font-size: 0.8666667em; + } + + .lg\:prose-lg h3 code { + font-size: 0.875em; + } + + .lg\:prose-lg pre { + font-size: 0.8888889em; + line-height: 1.75; + margin-top: 2em; + margin-bottom: 2em; + border-radius: 0.375rem; + padding-top: 1em; + padding-right: 1.5em; + padding-bottom: 1em; + padding-left: 1.5em; + } + + .lg\:prose-lg ol { + margin-top: 1.3333333em; + margin-bottom: 1.3333333em; + } + + .lg\:prose-lg ul { + margin-top: 1.3333333em; + margin-bottom: 1.3333333em; + } + + .lg\:prose-lg li { + margin-top: 0.6666667em; + margin-bottom: 0.6666667em; + } + + .lg\:prose-lg ol>li { + padding-left: 1.6666667em; + } + + .lg\:prose-lg ol>li::before { + left: 0; + } + + .lg\:prose-lg ul>li { + padding-left: 1.6666667em; + } + + .lg\:prose-lg ul>li::before { + width: 0.3333333em; + height: 0.3333333em; + top: calc(0.8888889em - 0.1666667em); + left: 0.2222222em; + } + + .lg\:prose-lg>ul>li p { + margin-top: 0.8888889em; + margin-bottom: 0.8888889em; + } + + .lg\:prose-lg>ul>li>*:first-child { + margin-top: 1.3333333em; + } + + .lg\:prose-lg>ul>li>*:last-child { + margin-bottom: 1.3333333em; + } + + .lg\:prose-lg>ol>li>*:first-child { + margin-top: 1.3333333em; + } + + .lg\:prose-lg>ol>li>*:last-child { + margin-bottom: 1.3333333em; + } + + .lg\:prose-lg ul ul, + .lg\:prose-lg ul ol, + .lg\:prose-lg ol ul, + .lg\:prose-lg ol ol { + margin-top: 0.8888889em; + margin-bottom: 0.8888889em; + } + + .lg\:prose-lg hr { + margin-top: 3.1111111em; + margin-bottom: 3.1111111em; + } + + .lg\:prose-lg hr+* { + margin-top: 0; + } + + .lg\:prose-lg h2+* { + margin-top: 0; + } + + .lg\:prose-lg h3+* { + margin-top: 0; + } + + .lg\:prose-lg h4+* { + margin-top: 0; + } + + .lg\:prose-lg table { + font-size: 0.8888889em; + line-height: 1.5; + } + + .lg\:prose-lg thead th { + padding-right: 0.75em; + padding-bottom: 0.75em; + padding-left: 0.75em; + } + + .lg\:prose-lg thead th:first-child { + padding-left: 0; + } + + .lg\:prose-lg thead th:last-child { + padding-right: 0; + } + + .lg\:prose-lg tbody td { + padding-top: 0.75em; + padding-right: 0.75em; + padding-bottom: 0.75em; + padding-left: 0.75em; + } + + .lg\:prose-lg tbody td:first-child { + padding-left: 0; + } + + .lg\:prose-lg tbody td:last-child { + padding-right: 0; + } + + .lg\:prose-lg> :first-child { + margin-top: 0; + } + + .lg\:prose-lg> :last-child { + margin-bottom: 0; + } + + .lg\:prose-xl { + font-size: 1.25rem; + line-height: 1.8; + } + + .lg\:prose-xl p { + margin-top: 1.2em; + margin-bottom: 1.2em; + } + + .lg\:prose-xl [class~="lead"] { + font-size: 1.2em; + line-height: 1.5; + margin-top: 1em; + margin-bottom: 1em; + } + + .lg\:prose-xl blockquote { + margin-top: 1.6em; + margin-bottom: 1.6em; + padding-left: 1.0666667em; + } + + .lg\:prose-xl h1 { + font-size: 2.8em; + margin-top: 0; + margin-bottom: 0.8571429em; + line-height: 1; + } + + .lg\:prose-xl h2 { + font-size: 1.8em; + margin-top: 1.5555556em; + margin-bottom: 0.8888889em; + line-height: 1.1111111; + } + + .lg\:prose-xl h3 { + font-size: 1.5em; + margin-top: 1.6em; + margin-bottom: 0.6666667em; + line-height: 1.3333333; + } + + .lg\:prose-xl h4 { + margin-top: 1.8em; + margin-bottom: 0.6em; + line-height: 1.6; + } + + .lg\:prose-xl img { + margin-top: 2em; + margin-bottom: 2em; + } + + .lg\:prose-xl video { + margin-top: 2em; + margin-bottom: 2em; + } + + .lg\:prose-xl figure { + margin-top: 2em; + margin-bottom: 2em; + } + + .lg\:prose-xl figure>* { + margin-top: 0; + margin-bottom: 0; + } + + .lg\:prose-xl figure figcaption { + font-size: 0.9em; + line-height: 1.5555556; + margin-top: 1em; + } + + .lg\:prose-xl code { + font-size: 0.9em; + } + + .lg\:prose-xl h2 code { + font-size: 0.8611111em; + } + + .lg\:prose-xl h3 code { + font-size: 0.9em; + } + + .lg\:prose-xl pre { + font-size: 0.9em; + line-height: 1.7777778; + margin-top: 2em; + margin-bottom: 2em; + border-radius: 0.5rem; + padding-top: 1.1111111em; + padding-right: 1.3333333em; + padding-bottom: 1.1111111em; + padding-left: 1.3333333em; + } + + .lg\:prose-xl ol { + margin-top: 1.2em; + margin-bottom: 1.2em; + } + + .lg\:prose-xl ul { + margin-top: 1.2em; + margin-bottom: 1.2em; + } + + .lg\:prose-xl li { + margin-top: 0.6em; + margin-bottom: 0.6em; + } + + .lg\:prose-xl ol>li { + padding-left: 1.8em; + } + + .lg\:prose-xl ol>li::before { + left: 0; + } + + .lg\:prose-xl ul>li { + padding-left: 1.8em; + } + + .lg\:prose-xl ul>li::before { + width: 0.35em; + height: 0.35em; + top: calc(0.9em - 0.175em); + left: 0.25em; + } + + .lg\:prose-xl>ul>li p { + margin-top: 0.8em; + margin-bottom: 0.8em; + } + + .lg\:prose-xl>ul>li>*:first-child { + margin-top: 1.2em; + } + + .lg\:prose-xl>ul>li>*:last-child { + margin-bottom: 1.2em; + } + + .lg\:prose-xl>ol>li>*:first-child { + margin-top: 1.2em; + } + + .lg\:prose-xl>ol>li>*:last-child { + margin-bottom: 1.2em; + } + + .lg\:prose-xl ul ul, + .lg\:prose-xl ul ol, + .lg\:prose-xl ol ul, + .lg\:prose-xl ol ol { + margin-top: 0.8em; + margin-bottom: 0.8em; + } + + .lg\:prose-xl hr { + margin-top: 2.8em; + margin-bottom: 2.8em; + } + + .lg\:prose-xl hr+* { + margin-top: 0; + } + + .lg\:prose-xl h2+* { + margin-top: 0; + } + + .lg\:prose-xl h3+* { + margin-top: 0; + } + + .lg\:prose-xl h4+* { + margin-top: 0; + } + + .lg\:prose-xl table { + font-size: 0.9em; + line-height: 1.5555556; + } + + .lg\:prose-xl thead th { + padding-right: 0.6666667em; + padding-bottom: 0.8888889em; + padding-left: 0.6666667em; + } + + .lg\:prose-xl thead th:first-child { + padding-left: 0; + } + + .lg\:prose-xl thead th:last-child { + padding-right: 0; + } + + .lg\:prose-xl tbody td { + padding-top: 0.8888889em; + padding-right: 0.6666667em; + padding-bottom: 0.8888889em; + padding-left: 0.6666667em; + } + + .lg\:prose-xl tbody td:first-child { + padding-left: 0; + } + + .lg\:prose-xl tbody td:last-child { + padding-right: 0; + } + + .lg\:prose-xl> :first-child { + margin-top: 0; + } + + .lg\:prose-xl> :last-child { + margin-bottom: 0; + } + + .lg\:prose-2xl { + font-size: 1.5rem; + line-height: 1.6666667; + } + + .lg\:prose-2xl p { + margin-top: 1.3333333em; + margin-bottom: 1.3333333em; + } + + .lg\:prose-2xl [class~="lead"] { + font-size: 1.25em; + line-height: 1.4666667; + margin-top: 1.0666667em; + margin-bottom: 1.0666667em; + } + + .lg\:prose-2xl blockquote { + margin-top: 1.7777778em; + margin-bottom: 1.7777778em; + padding-left: 1.1111111em; + } + + .lg\:prose-2xl h1 { + font-size: 2.6666667em; + margin-top: 0; + margin-bottom: 0.875em; + line-height: 1; + } + + .lg\:prose-2xl h2 { + font-size: 2em; + margin-top: 1.5em; + margin-bottom: 0.8333333em; + line-height: 1.0833333; + } + + .lg\:prose-2xl h3 { + font-size: 1.5em; + margin-top: 1.5555556em; + margin-bottom: 0.6666667em; + line-height: 1.2222222; + } + + .lg\:prose-2xl h4 { + margin-top: 1.6666667em; + margin-bottom: 0.6666667em; + line-height: 1.5; + } + + .lg\:prose-2xl img { + margin-top: 2em; + margin-bottom: 2em; + } + + .lg\:prose-2xl video { + margin-top: 2em; + margin-bottom: 2em; + } + + .lg\:prose-2xl figure { + margin-top: 2em; + margin-bottom: 2em; + } + + .lg\:prose-2xl figure>* { + margin-top: 0; + margin-bottom: 0; + } + + .lg\:prose-2xl figure figcaption { + font-size: 0.8333333em; + line-height: 1.6; + margin-top: 1em; + } + + .lg\:prose-2xl code { + font-size: 0.8333333em; + } + + .lg\:prose-2xl h2 code { + font-size: 0.875em; + } + + .lg\:prose-2xl h3 code { + font-size: 0.8888889em; + } + + .lg\:prose-2xl pre { + font-size: 0.8333333em; + line-height: 1.8; + margin-top: 2em; + margin-bottom: 2em; + border-radius: 0.5rem; + padding-top: 1.2em; + padding-right: 1.6em; + padding-bottom: 1.2em; + padding-left: 1.6em; + } + + .lg\:prose-2xl ol { + margin-top: 1.3333333em; + margin-bottom: 1.3333333em; + } + + .lg\:prose-2xl ul { + margin-top: 1.3333333em; + margin-bottom: 1.3333333em; + } + + .lg\:prose-2xl li { + margin-top: 0.5em; + margin-bottom: 0.5em; + } + + .lg\:prose-2xl ol>li { + padding-left: 1.6666667em; + } + + .lg\:prose-2xl ol>li::before { + left: 0; + } + + .lg\:prose-2xl ul>li { + padding-left: 1.6666667em; + } + + .lg\:prose-2xl ul>li::before { + width: 0.3333333em; + height: 0.3333333em; + top: calc(0.8333333em - 0.1666667em); + left: 0.25em; + } + + .lg\:prose-2xl>ul>li p { + margin-top: 0.8333333em; + margin-bottom: 0.8333333em; + } + + .lg\:prose-2xl>ul>li>*:first-child { + margin-top: 1.3333333em; + } + + .lg\:prose-2xl>ul>li>*:last-child { + margin-bottom: 1.3333333em; + } + + .lg\:prose-2xl>ol>li>*:first-child { + margin-top: 1.3333333em; + } + + .lg\:prose-2xl>ol>li>*:last-child { + margin-bottom: 1.3333333em; + } + + .lg\:prose-2xl ul ul, + .lg\:prose-2xl ul ol, + .lg\:prose-2xl ol ul, + .lg\:prose-2xl ol ol { + margin-top: 0.6666667em; + margin-bottom: 0.6666667em; + } + + .lg\:prose-2xl hr { + margin-top: 3em; + margin-bottom: 3em; + } + + .lg\:prose-2xl hr+* { + margin-top: 0; + } + + .lg\:prose-2xl h2+* { + margin-top: 0; + } + + .lg\:prose-2xl h3+* { + margin-top: 0; + } + + .lg\:prose-2xl h4+* { + margin-top: 0; + } + + .lg\:prose-2xl table { + font-size: 0.8333333em; + line-height: 1.4; + } + + .lg\:prose-2xl thead th { + padding-right: 0.6em; + padding-bottom: 0.8em; + padding-left: 0.6em; + } + + .lg\:prose-2xl thead th:first-child { + padding-left: 0; + } + + .lg\:prose-2xl thead th:last-child { + padding-right: 0; + } + + .lg\:prose-2xl tbody td { + padding-top: 0.8em; + padding-right: 0.6em; + padding-bottom: 0.8em; + padding-left: 0.6em; + } + + .lg\:prose-2xl tbody td:first-child { + padding-left: 0; + } + + .lg\:prose-2xl tbody td:last-child { + padding-right: 0; + } + + .lg\:prose-2xl> :first-child { + margin-top: 0; + } + + .lg\:prose-2xl> :last-child { + margin-bottom: 0; + } + + .lg\:prose-red a {} + + .lg\:prose-red a code {} + + .lg\:prose-yellow a {} + + .lg\:prose-yellow a code {} + + .lg\:prose-green a {} + + .lg\:prose-green a code {} + + .lg\:prose-blue a {} + + .lg\:prose-blue a code {} + + .lg\:prose-indigo a {} + + .lg\:prose-indigo a code {} + + .lg\:prose-purple a {} + + .lg\:prose-purple a code {} + + .lg\:prose-pink a {} + + .lg\:prose-pink a code {} +} + +@media (min-width: 1280px) { + .xl\:prose { + + max-width: 65ch; + } + + .xl\:prose [class~="lead"] { + + font-size: 1.25em; + line-height: 1.6; + margin-top: 1.2em; + margin-bottom: 1.2em; + } + + .xl\:prose a { + + text-decoration: underline; + font-weight: 500; + } + + .xl\:prose strong { + + font-weight: 600; + } + + .xl\:prose ol[type="A"] { + --list-counter-style: upper-alpha; + } + + .xl\:prose ol[type="a"] { + --list-counter-style: lower-alpha; + } + + .xl\:prose ol[type="A" s] { + --list-counter-style: upper-alpha; + } + + .xl\:prose ol[type="a" s] { + --list-counter-style: lower-alpha; + } + + .xl\:prose ol[type="I"] { + --list-counter-style: upper-roman; + } + + .xl\:prose ol[type="i"] { + --list-counter-style: lower-roman; + } + + .xl\:prose ol[type="I" s] { + --list-counter-style: upper-roman; + } + + .xl\:prose ol[type="i" s] { + --list-counter-style: lower-roman; + } + + .xl\:prose ol[type="1"] { + --list-counter-style: decimal; + } + + .xl\:prose ol>li { + position: relative; + padding-left: 1.75em; + } + + .xl\:prose ol>li::before { + content: counter(list-item, var(--list-counter-style, decimal)) "."; + position: absolute; + font-weight: 400; + + left: 0; + } + + .xl\:prose ul>li { + position: relative; + padding-left: 1.75em; + } + + .xl\:prose ul>li::before { + content: ""; + position: absolute; + + border-radius: 50%; + width: 0.375em; + height: 0.375em; + top: calc(0.875em - 0.1875em); + left: 0.25em; + } + + .xl\:prose hr { + + border-top-width: 1px; + margin-top: 3em; + margin-bottom: 3em; + } + + .xl\:prose blockquote { + font-weight: 500; + font-style: italic; + + border-left-width: 0.25rem; + + quotes: "\201C" "\201D" "\2018" "\2019"; + margin-top: 1.6em; + margin-bottom: 1.6em; + padding-left: 1em; + } + + .xl\:prose blockquote p:first-of-type::before { + content: open-quote; + } + + .xl\:prose blockquote p:last-of-type::after { + content: close-quote; + } + + .xl\:prose h1 { + + font-weight: 800; + font-size: 2.25em; + margin-top: 0; + margin-bottom: 0.8888889em; + line-height: 1.1111111; + } + + .xl\:prose h2 { + + font-weight: 700; + font-size: 1.5em; + margin-top: 2em; + margin-bottom: 1em; + line-height: 1.3333333; + } + + .xl\:prose h3 { + + font-weight: 600; + font-size: 1.25em; + margin-top: 1.6em; + margin-bottom: 0.6em; + line-height: 1.6; + } + + .xl\:prose h4 { + + font-weight: 600; + margin-top: 1.5em; + margin-bottom: 0.5em; + line-height: 1.5; + } + + .xl\:prose figure figcaption { + + font-size: 0.875em; + line-height: 1.4285714; + margin-top: 0.8571429em; + } + + .xl\:prose code { + + font-weight: 600; + font-size: 0.875em; + } + + .xl\:prose code::before { + content: "`"; + } + + .xl\:prose code::after { + content: "`"; + } + + .xl\:prose a code {} + + .xl\:prose pre { + + + overflow-x: auto; + font-size: 0.875em; + line-height: 1.7142857; + margin-top: 1.7142857em; + margin-bottom: 1.7142857em; + border-radius: 0.375rem; + padding-top: 0.8571429em; + padding-right: 1.1428571em; + padding-bottom: 0.8571429em; + padding-left: 1.1428571em; + } + + .xl\:prose pre code { + + border-width: 0; + border-radius: 0; + padding: 0; + font-weight: 400; + + font-size: inherit; + font-family: inherit; + line-height: inherit; + } + + .xl\:prose pre code::before { + content: none; + } + + .xl\:prose pre code::after { + content: none; + } + + .xl\:prose table { + width: 100%; + table-layout: auto; + text-align: left; + margin-top: 2em; + margin-bottom: 2em; + font-size: 0.875em; + line-height: 1.7142857; + } + + .xl\:prose thead { + + font-weight: 600; + border-bottom-width: 1px; + + } + + .xl\:prose thead th { + vertical-align: bottom; + padding-right: 0.5714286em; + padding-bottom: 0.5714286em; + padding-left: 0.5714286em; + } + + .xl\:prose tbody tr { + border-bottom-width: 1px; + + } + + .xl\:prose tbody tr:last-child { + border-bottom-width: 0; + } + + .xl\:prose tbody td { + vertical-align: top; + padding-top: 0.5714286em; + padding-right: 0.5714286em; + padding-bottom: 0.5714286em; + padding-left: 0.5714286em; + } + + .xl\:prose { + font-size: 1rem; + line-height: 1.75; + } + + .xl\:prose p { + margin-top: 1.25em; + margin-bottom: 1.25em; + } + + .xl\:prose img { + margin-top: 2em; + margin-bottom: 2em; + } + + .xl\:prose video { + margin-top: 2em; + margin-bottom: 2em; + } + + .xl\:prose figure { + margin-top: 2em; + margin-bottom: 2em; + } + + .xl\:prose figure>* { + margin-top: 0; + margin-bottom: 0; + } + + .xl\:prose h2 code { + font-size: 0.875em; + } + + .xl\:prose h3 code { + font-size: 0.9em; + } + + .xl\:prose ol { + margin-top: 1.25em; + margin-bottom: 1.25em; + } + + .xl\:prose ul { + margin-top: 1.25em; + margin-bottom: 1.25em; + } + + .xl\:prose li { + margin-top: 0.5em; + margin-bottom: 0.5em; + } + + .xl\:prose>ul>li p { + margin-top: 0.75em; + margin-bottom: 0.75em; + } + + .xl\:prose>ul>li>*:first-child { + margin-top: 1.25em; + } + + .xl\:prose>ul>li>*:last-child { + margin-bottom: 1.25em; + } + + .xl\:prose>ol>li>*:first-child { + margin-top: 1.25em; + } + + .xl\:prose>ol>li>*:last-child { + margin-bottom: 1.25em; + } + + .xl\:prose ul ul, + .xl\:prose ul ol, + .xl\:prose ol ul, + .xl\:prose ol ol { + margin-top: 0.75em; + margin-bottom: 0.75em; + } + + .xl\:prose hr+* { + margin-top: 0; + } + + .xl\:prose h2+* { + margin-top: 0; + } + + .xl\:prose h3+* { + margin-top: 0; + } + + .xl\:prose h4+* { + margin-top: 0; + } + + .xl\:prose thead th:first-child { + padding-left: 0; + } + + .xl\:prose thead th:last-child { + padding-right: 0; + } + + .xl\:prose tbody td:first-child { + padding-left: 0; + } + + .xl\:prose tbody td:last-child { + padding-right: 0; + } + + .xl\:prose> :first-child { + margin-top: 0; + } + + .xl\:prose> :last-child { + margin-bottom: 0; + } + + .xl\:prose-sm { + font-size: 0.875rem; + line-height: 1.7142857; + } + + .xl\:prose-sm p { + margin-top: 1.1428571em; + margin-bottom: 1.1428571em; + } + + .xl\:prose-sm [class~="lead"] { + font-size: 1.2857143em; + line-height: 1.5555556; + margin-top: 0.8888889em; + margin-bottom: 0.8888889em; + } + + .xl\:prose-sm blockquote { + margin-top: 1.3333333em; + margin-bottom: 1.3333333em; + padding-left: 1.1111111em; + } + + .xl\:prose-sm h1 { + font-size: 2.1428571em; + margin-top: 0; + margin-bottom: 0.8em; + line-height: 1.2; + } + + .xl\:prose-sm h2 { + font-size: 1.4285714em; + margin-top: 1.6em; + margin-bottom: 0.8em; + line-height: 1.4; + } + + .xl\:prose-sm h3 { + font-size: 1.2857143em; + margin-top: 1.5555556em; + margin-bottom: 0.4444444em; + line-height: 1.5555556; + } + + .xl\:prose-sm h4 { + margin-top: 1.4285714em; + margin-bottom: 0.5714286em; + line-height: 1.4285714; + } + + .xl\:prose-sm img { + margin-top: 1.7142857em; + margin-bottom: 1.7142857em; + } + + .xl\:prose-sm video { + margin-top: 1.7142857em; + margin-bottom: 1.7142857em; + } + + .xl\:prose-sm figure { + margin-top: 1.7142857em; + margin-bottom: 1.7142857em; + } + + .xl\:prose-sm figure>* { + margin-top: 0; + margin-bottom: 0; + } + + .xl\:prose-sm figure figcaption { + font-size: 0.8571429em; + line-height: 1.3333333; + margin-top: 0.6666667em; + } + + .xl\:prose-sm code { + font-size: 0.8571429em; + } + + .xl\:prose-sm h2 code { + font-size: 0.9em; + } + + .xl\:prose-sm h3 code { + font-size: 0.8888889em; + } + + .xl\:prose-sm pre { + font-size: 0.8571429em; + line-height: 1.6666667; + margin-top: 1.6666667em; + margin-bottom: 1.6666667em; + border-radius: 0.25rem; + padding-top: 0.6666667em; + padding-right: 1em; + padding-bottom: 0.6666667em; + padding-left: 1em; + } + + .xl\:prose-sm ol { + margin-top: 1.1428571em; + margin-bottom: 1.1428571em; + } + + .xl\:prose-sm ul { + margin-top: 1.1428571em; + margin-bottom: 1.1428571em; + } + + .xl\:prose-sm li { + margin-top: 0.2857143em; + margin-bottom: 0.2857143em; + } + + .xl\:prose-sm ol>li { + padding-left: 1.5714286em; + } + + .xl\:prose-sm ol>li::before { + left: 0; + } + + .xl\:prose-sm ul>li { + padding-left: 1.5714286em; + } + + .xl\:prose-sm ul>li::before { + height: 0.3571429em; + width: 0.3571429em; + top: calc(0.8571429em - 0.1785714em); + left: 0.2142857em; + } + + .xl\:prose-sm>ul>li p { + margin-top: 0.5714286em; + margin-bottom: 0.5714286em; + } + + .xl\:prose-sm>ul>li>*:first-child { + margin-top: 1.1428571em; + } + + .xl\:prose-sm>ul>li>*:last-child { + margin-bottom: 1.1428571em; + } + + .xl\:prose-sm>ol>li>*:first-child { + margin-top: 1.1428571em; + } + + .xl\:prose-sm>ol>li>*:last-child { + margin-bottom: 1.1428571em; + } + + .xl\:prose-sm ul ul, + .xl\:prose-sm ul ol, + .xl\:prose-sm ol ul, + .xl\:prose-sm ol ol { + margin-top: 0.5714286em; + margin-bottom: 0.5714286em; + } + + .xl\:prose-sm hr { + margin-top: 2.8571429em; + margin-bottom: 2.8571429em; + } + + .xl\:prose-sm hr+* { + margin-top: 0; + } + + .xl\:prose-sm h2+* { + margin-top: 0; + } + + .xl\:prose-sm h3+* { + margin-top: 0; + } + + .xl\:prose-sm h4+* { + margin-top: 0; + } + + .xl\:prose-sm table { + font-size: 0.8571429em; + line-height: 1.5; + } + + .xl\:prose-sm thead th { + padding-right: 1em; + padding-bottom: 0.6666667em; + padding-left: 1em; + } + + .xl\:prose-sm thead th:first-child { + padding-left: 0; + } + + .xl\:prose-sm thead th:last-child { + padding-right: 0; + } + + .xl\:prose-sm tbody td { + padding-top: 0.6666667em; + padding-right: 1em; + padding-bottom: 0.6666667em; + padding-left: 1em; + } + + .xl\:prose-sm tbody td:first-child { + padding-left: 0; + } + + .xl\:prose-sm tbody td:last-child { + padding-right: 0; + } + + .xl\:prose-sm> :first-child { + margin-top: 0; + } + + .xl\:prose-sm> :last-child { + margin-bottom: 0; + } + + .xl\:prose-lg { + font-size: 1.125rem; + line-height: 1.7777778; + } + + .xl\:prose-lg p { + margin-top: 1.3333333em; + margin-bottom: 1.3333333em; + } + + .xl\:prose-lg [class~="lead"] { + font-size: 1.2222222em; + line-height: 1.4545455; + margin-top: 1.0909091em; + margin-bottom: 1.0909091em; + } + + .xl\:prose-lg blockquote { + margin-top: 1.6666667em; + margin-bottom: 1.6666667em; + padding-left: 1em; + } + + .xl\:prose-lg h1 { + font-size: 2.6666667em; + margin-top: 0; + margin-bottom: 0.8333333em; + line-height: 1; + } + + .xl\:prose-lg h2 { + font-size: 1.6666667em; + margin-top: 1.8666667em; + margin-bottom: 1.0666667em; + line-height: 1.3333333; + } + + .xl\:prose-lg h3 { + font-size: 1.3333333em; + margin-top: 1.6666667em; + margin-bottom: 0.6666667em; + line-height: 1.5; + } + + .xl\:prose-lg h4 { + margin-top: 1.7777778em; + margin-bottom: 0.4444444em; + line-height: 1.5555556; + } + + .xl\:prose-lg img { + margin-top: 1.7777778em; + margin-bottom: 1.7777778em; + } + + .xl\:prose-lg video { + margin-top: 1.7777778em; + margin-bottom: 1.7777778em; + } + + .xl\:prose-lg figure { + margin-top: 1.7777778em; + margin-bottom: 1.7777778em; + } + + .xl\:prose-lg figure>* { + margin-top: 0; + margin-bottom: 0; + } + + .xl\:prose-lg figure figcaption { + font-size: 0.8888889em; + line-height: 1.5; + margin-top: 1em; + } + + .xl\:prose-lg code { + font-size: 0.8888889em; + } + + .xl\:prose-lg h2 code { + font-size: 0.8666667em; + } + + .xl\:prose-lg h3 code { + font-size: 0.875em; + } + + .xl\:prose-lg pre { + font-size: 0.8888889em; + line-height: 1.75; + margin-top: 2em; + margin-bottom: 2em; + border-radius: 0.375rem; + padding-top: 1em; + padding-right: 1.5em; + padding-bottom: 1em; + padding-left: 1.5em; + } + + .xl\:prose-lg ol { + margin-top: 1.3333333em; + margin-bottom: 1.3333333em; + } + + .xl\:prose-lg ul { + margin-top: 1.3333333em; + margin-bottom: 1.3333333em; + } + + .xl\:prose-lg li { + margin-top: 0.6666667em; + margin-bottom: 0.6666667em; + } + + .xl\:prose-lg ol>li { + padding-left: 1.6666667em; + } + + .xl\:prose-lg ol>li::before { + left: 0; + } + + .xl\:prose-lg ul>li { + padding-left: 1.6666667em; + } + + .xl\:prose-lg ul>li::before { + width: 0.3333333em; + height: 0.3333333em; + top: calc(0.8888889em - 0.1666667em); + left: 0.2222222em; + } + + .xl\:prose-lg>ul>li p { + margin-top: 0.8888889em; + margin-bottom: 0.8888889em; + } + + .xl\:prose-lg>ul>li>*:first-child { + margin-top: 1.3333333em; + } + + .xl\:prose-lg>ul>li>*:last-child { + margin-bottom: 1.3333333em; + } + + .xl\:prose-lg>ol>li>*:first-child { + margin-top: 1.3333333em; + } + + .xl\:prose-lg>ol>li>*:last-child { + margin-bottom: 1.3333333em; + } + + .xl\:prose-lg ul ul, + .xl\:prose-lg ul ol, + .xl\:prose-lg ol ul, + .xl\:prose-lg ol ol { + margin-top: 0.8888889em; + margin-bottom: 0.8888889em; + } + + .xl\:prose-lg hr { + margin-top: 3.1111111em; + margin-bottom: 3.1111111em; + } + + .xl\:prose-lg hr+* { + margin-top: 0; + } + + .xl\:prose-lg h2+* { + margin-top: 0; + } + + .xl\:prose-lg h3+* { + margin-top: 0; + } + + .xl\:prose-lg h4+* { + margin-top: 0; + } + + .xl\:prose-lg table { + font-size: 0.8888889em; + line-height: 1.5; + } + + .xl\:prose-lg thead th { + padding-right: 0.75em; + padding-bottom: 0.75em; + padding-left: 0.75em; + } + + .xl\:prose-lg thead th:first-child { + padding-left: 0; + } + + .xl\:prose-lg thead th:last-child { + padding-right: 0; + } + + .xl\:prose-lg tbody td { + padding-top: 0.75em; + padding-right: 0.75em; + padding-bottom: 0.75em; + padding-left: 0.75em; + } + + .xl\:prose-lg tbody td:first-child { + padding-left: 0; + } + + .xl\:prose-lg tbody td:last-child { + padding-right: 0; + } + + .xl\:prose-lg> :first-child { + margin-top: 0; + } + + .xl\:prose-lg> :last-child { + margin-bottom: 0; + } + + .xl\:prose-xl { + font-size: 1.25rem; + line-height: 1.8; + } + + .xl\:prose-xl p { + margin-top: 1.2em; + margin-bottom: 1.2em; + } + + .xl\:prose-xl [class~="lead"] { + font-size: 1.2em; + line-height: 1.5; + margin-top: 1em; + margin-bottom: 1em; + } + + .xl\:prose-xl blockquote { + margin-top: 1.6em; + margin-bottom: 1.6em; + padding-left: 1.0666667em; + } + + .xl\:prose-xl h1 { + font-size: 2.8em; + margin-top: 0; + margin-bottom: 0.8571429em; + line-height: 1; + } + + .xl\:prose-xl h2 { + font-size: 1.8em; + margin-top: 1.5555556em; + margin-bottom: 0.8888889em; + line-height: 1.1111111; + } + + .xl\:prose-xl h3 { + font-size: 1.5em; + margin-top: 1.6em; + margin-bottom: 0.6666667em; + line-height: 1.3333333; + } + + .xl\:prose-xl h4 { + margin-top: 1.8em; + margin-bottom: 0.6em; + line-height: 1.6; + } + + .xl\:prose-xl img { + margin-top: 2em; + margin-bottom: 2em; + } + + .xl\:prose-xl video { + margin-top: 2em; + margin-bottom: 2em; + } + + .xl\:prose-xl figure { + margin-top: 2em; + margin-bottom: 2em; + } + + .xl\:prose-xl figure>* { + margin-top: 0; + margin-bottom: 0; + } + + .xl\:prose-xl figure figcaption { + font-size: 0.9em; + line-height: 1.5555556; + margin-top: 1em; + } + + .xl\:prose-xl code { + font-size: 0.9em; + } + + .xl\:prose-xl h2 code { + font-size: 0.8611111em; + } + + .xl\:prose-xl h3 code { + font-size: 0.9em; + } + + .xl\:prose-xl pre { + font-size: 0.9em; + line-height: 1.7777778; + margin-top: 2em; + margin-bottom: 2em; + border-radius: 0.5rem; + padding-top: 1.1111111em; + padding-right: 1.3333333em; + padding-bottom: 1.1111111em; + padding-left: 1.3333333em; + } + + .xl\:prose-xl ol { + margin-top: 1.2em; + margin-bottom: 1.2em; + } + + .xl\:prose-xl ul { + margin-top: 1.2em; + margin-bottom: 1.2em; + } + + .xl\:prose-xl li { + margin-top: 0.6em; + margin-bottom: 0.6em; + } + + .xl\:prose-xl ol>li { + padding-left: 1.8em; + } + + .xl\:prose-xl ol>li::before { + left: 0; + } + + .xl\:prose-xl ul>li { + padding-left: 1.8em; + } + + .xl\:prose-xl ul>li::before { + width: 0.35em; + height: 0.35em; + top: calc(0.9em - 0.175em); + left: 0.25em; + } + + .xl\:prose-xl>ul>li p { + margin-top: 0.8em; + margin-bottom: 0.8em; + } + + .xl\:prose-xl>ul>li>*:first-child { + margin-top: 1.2em; + } + + .xl\:prose-xl>ul>li>*:last-child { + margin-bottom: 1.2em; + } + + .xl\:prose-xl>ol>li>*:first-child { + margin-top: 1.2em; + } + + .xl\:prose-xl>ol>li>*:last-child { + margin-bottom: 1.2em; + } + + .xl\:prose-xl ul ul, + .xl\:prose-xl ul ol, + .xl\:prose-xl ol ul, + .xl\:prose-xl ol ol { + margin-top: 0.8em; + margin-bottom: 0.8em; + } + + .xl\:prose-xl hr { + margin-top: 2.8em; + margin-bottom: 2.8em; + } + + .xl\:prose-xl hr+* { + margin-top: 0; + } + + .xl\:prose-xl h2+* { + margin-top: 0; + } + + .xl\:prose-xl h3+* { + margin-top: 0; + } + + .xl\:prose-xl h4+* { + margin-top: 0; + } + + .xl\:prose-xl table { + font-size: 0.9em; + line-height: 1.5555556; + } + + .xl\:prose-xl thead th { + padding-right: 0.6666667em; + padding-bottom: 0.8888889em; + padding-left: 0.6666667em; + } + + .xl\:prose-xl thead th:first-child { + padding-left: 0; + } + + .xl\:prose-xl thead th:last-child { + padding-right: 0; + } + + .xl\:prose-xl tbody td { + padding-top: 0.8888889em; + padding-right: 0.6666667em; + padding-bottom: 0.8888889em; + padding-left: 0.6666667em; + } + + .xl\:prose-xl tbody td:first-child { + padding-left: 0; + } + + .xl\:prose-xl tbody td:last-child { + padding-right: 0; + } + + .xl\:prose-xl> :first-child { + margin-top: 0; + } + + .xl\:prose-xl> :last-child { + margin-bottom: 0; + } + + .xl\:prose-2xl { + font-size: 1.5rem; + line-height: 1.6666667; + } + + .xl\:prose-2xl p { + margin-top: 1.3333333em; + margin-bottom: 1.3333333em; + } + + .xl\:prose-2xl [class~="lead"] { + font-size: 1.25em; + line-height: 1.4666667; + margin-top: 1.0666667em; + margin-bottom: 1.0666667em; + } + + .xl\:prose-2xl blockquote { + margin-top: 1.7777778em; + margin-bottom: 1.7777778em; + padding-left: 1.1111111em; + } + + .xl\:prose-2xl h1 { + font-size: 2.6666667em; + margin-top: 0; + margin-bottom: 0.875em; + line-height: 1; + } + + .xl\:prose-2xl h2 { + font-size: 2em; + margin-top: 1.5em; + margin-bottom: 0.8333333em; + line-height: 1.0833333; + } + + .xl\:prose-2xl h3 { + font-size: 1.5em; + margin-top: 1.5555556em; + margin-bottom: 0.6666667em; + line-height: 1.2222222; + } + + .xl\:prose-2xl h4 { + margin-top: 1.6666667em; + margin-bottom: 0.6666667em; + line-height: 1.5; + } + + .xl\:prose-2xl img { + margin-top: 2em; + margin-bottom: 2em; + } + + .xl\:prose-2xl video { + margin-top: 2em; + margin-bottom: 2em; + } + + .xl\:prose-2xl figure { + margin-top: 2em; + margin-bottom: 2em; + } + + .xl\:prose-2xl figure>* { + margin-top: 0; + margin-bottom: 0; + } + + .xl\:prose-2xl figure figcaption { + font-size: 0.8333333em; + line-height: 1.6; + margin-top: 1em; + } + + .xl\:prose-2xl code { + font-size: 0.8333333em; + } + + .xl\:prose-2xl h2 code { + font-size: 0.875em; + } + + .xl\:prose-2xl h3 code { + font-size: 0.8888889em; + } + + .xl\:prose-2xl pre { + font-size: 0.8333333em; + line-height: 1.8; + margin-top: 2em; + margin-bottom: 2em; + border-radius: 0.5rem; + padding-top: 1.2em; + padding-right: 1.6em; + padding-bottom: 1.2em; + padding-left: 1.6em; + } + + .xl\:prose-2xl ol { + margin-top: 1.3333333em; + margin-bottom: 1.3333333em; + } + + .xl\:prose-2xl ul { + margin-top: 1.3333333em; + margin-bottom: 1.3333333em; + } + + .xl\:prose-2xl li { + margin-top: 0.5em; + margin-bottom: 0.5em; + } + + .xl\:prose-2xl ol>li { + padding-left: 1.6666667em; + } + + .xl\:prose-2xl ol>li::before { + left: 0; + } + + .xl\:prose-2xl ul>li { + padding-left: 1.6666667em; + } + + .xl\:prose-2xl ul>li::before { + width: 0.3333333em; + height: 0.3333333em; + top: calc(0.8333333em - 0.1666667em); + left: 0.25em; + } + + .xl\:prose-2xl>ul>li p { + margin-top: 0.8333333em; + margin-bottom: 0.8333333em; + } + + .xl\:prose-2xl>ul>li>*:first-child { + margin-top: 1.3333333em; + } + + .xl\:prose-2xl>ul>li>*:last-child { + margin-bottom: 1.3333333em; + } + + .xl\:prose-2xl>ol>li>*:first-child { + margin-top: 1.3333333em; + } + + .xl\:prose-2xl>ol>li>*:last-child { + margin-bottom: 1.3333333em; + } + + .xl\:prose-2xl ul ul, + .xl\:prose-2xl ul ol, + .xl\:prose-2xl ol ul, + .xl\:prose-2xl ol ol { + margin-top: 0.6666667em; + margin-bottom: 0.6666667em; + } + + .xl\:prose-2xl hr { + margin-top: 3em; + margin-bottom: 3em; + } + + .xl\:prose-2xl hr+* { + margin-top: 0; + } + + .xl\:prose-2xl h2+* { + margin-top: 0; + } + + .xl\:prose-2xl h3+* { + margin-top: 0; + } + + .xl\:prose-2xl h4+* { + margin-top: 0; + } + + .xl\:prose-2xl table { + font-size: 0.8333333em; + line-height: 1.4; + } + + .xl\:prose-2xl thead th { + padding-right: 0.6em; + padding-bottom: 0.8em; + padding-left: 0.6em; + } + + .xl\:prose-2xl thead th:first-child { + padding-left: 0; + } + + .xl\:prose-2xl thead th:last-child { + padding-right: 0; + } + + .xl\:prose-2xl tbody td { + padding-top: 0.8em; + padding-right: 0.6em; + padding-bottom: 0.8em; + padding-left: 0.6em; + } + + .xl\:prose-2xl tbody td:first-child { + padding-left: 0; + } + + .xl\:prose-2xl tbody td:last-child { + padding-right: 0; + } + + .xl\:prose-2xl> :first-child { + margin-top: 0; + } + + .xl\:prose-2xl> :last-child { + margin-bottom: 0; + } + + .xl\:prose-red a {} + + .xl\:prose-red a code {} + + .xl\:prose-yellow a {} + + .xl\:prose-yellow a code {} + + .xl\:prose-green a {} + + .xl\:prose-green a code {} + + .xl\:prose-blue a {} + + .xl\:prose-blue a code {} + + .xl\:prose-indigo a {} + + .xl\:prose-indigo a code {} + + .xl\:prose-purple a {} + + .xl\:prose-purple a code {} + + .xl\:prose-pink a {} + + .xl\:prose-pink a code {} +} + +@media (min-width: 1536px) { + .\32xl\:prose { + + max-width: 65ch; + } + + .\32xl\:prose [class~="lead"] { + + font-size: 1.25em; + line-height: 1.6; + margin-top: 1.2em; + margin-bottom: 1.2em; + } + + .\32xl\:prose a { + + text-decoration: underline; + font-weight: 500; + } + + .\32xl\:prose strong { + + font-weight: 600; + } + + .\32xl\:prose ol[type="A"] { + --list-counter-style: upper-alpha; + } + + .\32xl\:prose ol[type="a"] { + --list-counter-style: lower-alpha; + } + + .\32xl\:prose ol[type="A" s] { + --list-counter-style: upper-alpha; + } + + .\32xl\:prose ol[type="a" s] { + --list-counter-style: lower-alpha; + } + + .\32xl\:prose ol[type="I"] { + --list-counter-style: upper-roman; + } + + .\32xl\:prose ol[type="i"] { + --list-counter-style: lower-roman; + } + + .\32xl\:prose ol[type="I" s] { + --list-counter-style: upper-roman; + } + + .\32xl\:prose ol[type="i" s] { + --list-counter-style: lower-roman; + } + + .\32xl\:prose ol[type="1"] { + --list-counter-style: decimal; + } + + .\32xl\:prose ol>li { + position: relative; + padding-left: 1.75em; + } + + .\32xl\:prose ol>li::before { + content: counter(list-item, var(--list-counter-style, decimal)) "."; + position: absolute; + font-weight: 400; + + left: 0; + } + + .\32xl\:prose ul>li { + position: relative; + padding-left: 1.75em; + } + + .\32xl\:prose ul>li::before { + content: ""; + position: absolute; + + border-radius: 50%; + width: 0.375em; + height: 0.375em; + top: calc(0.875em - 0.1875em); + left: 0.25em; + } + + .\32xl\:prose hr { + + border-top-width: 1px; + margin-top: 3em; + margin-bottom: 3em; + } + + .\32xl\:prose blockquote { + font-weight: 500; + font-style: italic; + + border-left-width: 0.25rem; + + quotes: "\201C" "\201D" "\2018" "\2019"; + margin-top: 1.6em; + margin-bottom: 1.6em; + padding-left: 1em; + } + + .\32xl\:prose blockquote p:first-of-type::before { + content: open-quote; + } + + .\32xl\:prose blockquote p:last-of-type::after { + content: close-quote; + } + + .\32xl\:prose h1 { + + font-weight: 800; + font-size: 2.25em; + margin-top: 0; + margin-bottom: 0.8888889em; + line-height: 1.1111111; + } + + .\32xl\:prose h2 { + + font-weight: 700; + font-size: 1.5em; + margin-top: 2em; + margin-bottom: 1em; + line-height: 1.3333333; + } + + .\32xl\:prose h3 { + + font-weight: 600; + font-size: 1.25em; + margin-top: 1.6em; + margin-bottom: 0.6em; + line-height: 1.6; + } + + .\32xl\:prose h4 { + + font-weight: 600; + margin-top: 1.5em; + margin-bottom: 0.5em; + line-height: 1.5; + } + + .\32xl\:prose figure figcaption { + + font-size: 0.875em; + line-height: 1.4285714; + margin-top: 0.8571429em; + } + + .\32xl\:prose code { + + font-weight: 600; + font-size: 0.875em; + } + + .\32xl\:prose code::before { + content: "`"; + } + + .\32xl\:prose code::after { + content: "`"; + } + + .\32xl\:prose a code {} + + .\32xl\:prose pre { + + + overflow-x: auto; + font-size: 0.875em; + line-height: 1.7142857; + margin-top: 1.7142857em; + margin-bottom: 1.7142857em; + border-radius: 0.375rem; + padding-top: 0.8571429em; + padding-right: 1.1428571em; + padding-bottom: 0.8571429em; + padding-left: 1.1428571em; + } + + .\32xl\:prose pre code { + + border-width: 0; + border-radius: 0; + padding: 0; + font-weight: 400; + + font-size: inherit; + font-family: inherit; + line-height: inherit; + } + + .\32xl\:prose pre code::before { + content: none; + } + + .\32xl\:prose pre code::after { + content: none; + } + + .\32xl\:prose table { + width: 100%; + table-layout: auto; + text-align: left; + margin-top: 2em; + margin-bottom: 2em; + font-size: 0.875em; + line-height: 1.7142857; + } + + .\32xl\:prose thead { + + font-weight: 600; + border-bottom-width: 1px; + + } + + .\32xl\:prose thead th { + vertical-align: bottom; + padding-right: 0.5714286em; + padding-bottom: 0.5714286em; + padding-left: 0.5714286em; + } + + .\32xl\:prose tbody tr { + border-bottom-width: 1px; + + } + + .\32xl\:prose tbody tr:last-child { + border-bottom-width: 0; + } + + .\32xl\:prose tbody td { + vertical-align: top; + padding-top: 0.5714286em; + padding-right: 0.5714286em; + padding-bottom: 0.5714286em; + padding-left: 0.5714286em; + } + + .\32xl\:prose { + font-size: 1rem; + line-height: 1.75; + } + + .\32xl\:prose p { + margin-top: 1.25em; + margin-bottom: 1.25em; + } + + .\32xl\:prose img { + margin-top: 2em; + margin-bottom: 2em; + } + + .\32xl\:prose video { + margin-top: 2em; + margin-bottom: 2em; + } + + .\32xl\:prose figure { + margin-top: 2em; + margin-bottom: 2em; + } + + .\32xl\:prose figure>* { + margin-top: 0; + margin-bottom: 0; + } + + .\32xl\:prose h2 code { + font-size: 0.875em; + } + + .\32xl\:prose h3 code { + font-size: 0.9em; + } + + .\32xl\:prose ol { + margin-top: 1.25em; + margin-bottom: 1.25em; + } + + .\32xl\:prose ul { + margin-top: 1.25em; + margin-bottom: 1.25em; + } + + .\32xl\:prose li { + margin-top: 0.5em; + margin-bottom: 0.5em; + } + + .\32xl\:prose>ul>li p { + margin-top: 0.75em; + margin-bottom: 0.75em; + } + + .\32xl\:prose>ul>li>*:first-child { + margin-top: 1.25em; + } + + .\32xl\:prose>ul>li>*:last-child { + margin-bottom: 1.25em; + } + + .\32xl\:prose>ol>li>*:first-child { + margin-top: 1.25em; + } + + .\32xl\:prose>ol>li>*:last-child { + margin-bottom: 1.25em; + } + + .\32xl\:prose ul ul, + .\32xl\:prose ul ol, + .\32xl\:prose ol ul, + .\32xl\:prose ol ol { + margin-top: 0.75em; + margin-bottom: 0.75em; + } + + .\32xl\:prose hr+* { + margin-top: 0; + } + + .\32xl\:prose h2+* { + margin-top: 0; + } + + .\32xl\:prose h3+* { + margin-top: 0; + } + + .\32xl\:prose h4+* { + margin-top: 0; + } + + .\32xl\:prose thead th:first-child { + padding-left: 0; + } + + .\32xl\:prose thead th:last-child { + padding-right: 0; + } + + .\32xl\:prose tbody td:first-child { + padding-left: 0; + } + + .\32xl\:prose tbody td:last-child { + padding-right: 0; + } + + .\32xl\:prose> :first-child { + margin-top: 0; + } + + .\32xl\:prose> :last-child { + margin-bottom: 0; + } + + .\32xl\:prose-sm { + font-size: 0.875rem; + line-height: 1.7142857; + } + + .\32xl\:prose-sm p { + margin-top: 1.1428571em; + margin-bottom: 1.1428571em; + } + + .\32xl\:prose-sm [class~="lead"] { + font-size: 1.2857143em; + line-height: 1.5555556; + margin-top: 0.8888889em; + margin-bottom: 0.8888889em; + } + + .\32xl\:prose-sm blockquote { + margin-top: 1.3333333em; + margin-bottom: 1.3333333em; + padding-left: 1.1111111em; + } + + .\32xl\:prose-sm h1 { + font-size: 2.1428571em; + margin-top: 0; + margin-bottom: 0.8em; + line-height: 1.2; + } + + .\32xl\:prose-sm h2 { + font-size: 1.4285714em; + margin-top: 1.6em; + margin-bottom: 0.8em; + line-height: 1.4; + } + + .\32xl\:prose-sm h3 { + font-size: 1.2857143em; + margin-top: 1.5555556em; + margin-bottom: 0.4444444em; + line-height: 1.5555556; + } + + .\32xl\:prose-sm h4 { + margin-top: 1.4285714em; + margin-bottom: 0.5714286em; + line-height: 1.4285714; + } + + .\32xl\:prose-sm img { + margin-top: 1.7142857em; + margin-bottom: 1.7142857em; + } + + .\32xl\:prose-sm video { + margin-top: 1.7142857em; + margin-bottom: 1.7142857em; + } + + .\32xl\:prose-sm figure { + margin-top: 1.7142857em; + margin-bottom: 1.7142857em; + } + + .\32xl\:prose-sm figure>* { + margin-top: 0; + margin-bottom: 0; + } + + .\32xl\:prose-sm figure figcaption { + font-size: 0.8571429em; + line-height: 1.3333333; + margin-top: 0.6666667em; + } + + .\32xl\:prose-sm code { + font-size: 0.8571429em; + } + + .\32xl\:prose-sm h2 code { + font-size: 0.9em; + } + + .\32xl\:prose-sm h3 code { + font-size: 0.8888889em; + } + + .\32xl\:prose-sm pre { + font-size: 0.8571429em; + line-height: 1.6666667; + margin-top: 1.6666667em; + margin-bottom: 1.6666667em; + border-radius: 0.25rem; + padding-top: 0.6666667em; + padding-right: 1em; + padding-bottom: 0.6666667em; + padding-left: 1em; + } + + .\32xl\:prose-sm ol { + margin-top: 1.1428571em; + margin-bottom: 1.1428571em; + } + + .\32xl\:prose-sm ul { + margin-top: 1.1428571em; + margin-bottom: 1.1428571em; + } + + .\32xl\:prose-sm li { + margin-top: 0.2857143em; + margin-bottom: 0.2857143em; + } + + .\32xl\:prose-sm ol>li { + padding-left: 1.5714286em; + } + + .\32xl\:prose-sm ol>li::before { + left: 0; + } + + .\32xl\:prose-sm ul>li { + padding-left: 1.5714286em; + } + + .\32xl\:prose-sm ul>li::before { + height: 0.3571429em; + width: 0.3571429em; + top: calc(0.8571429em - 0.1785714em); + left: 0.2142857em; + } + + .\32xl\:prose-sm>ul>li p { + margin-top: 0.5714286em; + margin-bottom: 0.5714286em; + } + + .\32xl\:prose-sm>ul>li>*:first-child { + margin-top: 1.1428571em; + } + + .\32xl\:prose-sm>ul>li>*:last-child { + margin-bottom: 1.1428571em; + } + + .\32xl\:prose-sm>ol>li>*:first-child { + margin-top: 1.1428571em; + } + + .\32xl\:prose-sm>ol>li>*:last-child { + margin-bottom: 1.1428571em; + } + + .\32xl\:prose-sm ul ul, + .\32xl\:prose-sm ul ol, + .\32xl\:prose-sm ol ul, + .\32xl\:prose-sm ol ol { + margin-top: 0.5714286em; + margin-bottom: 0.5714286em; + } + + .\32xl\:prose-sm hr { + margin-top: 2.8571429em; + margin-bottom: 2.8571429em; + } + + .\32xl\:prose-sm hr+* { + margin-top: 0; + } + + .\32xl\:prose-sm h2+* { + margin-top: 0; + } + + .\32xl\:prose-sm h3+* { + margin-top: 0; + } + + .\32xl\:prose-sm h4+* { + margin-top: 0; + } + + .\32xl\:prose-sm table { + font-size: 0.8571429em; + line-height: 1.5; + } + + .\32xl\:prose-sm thead th { + padding-right: 1em; + padding-bottom: 0.6666667em; + padding-left: 1em; + } + + .\32xl\:prose-sm thead th:first-child { + padding-left: 0; + } + + .\32xl\:prose-sm thead th:last-child { + padding-right: 0; + } + + .\32xl\:prose-sm tbody td { + padding-top: 0.6666667em; + padding-right: 1em; + padding-bottom: 0.6666667em; + padding-left: 1em; + } + + .\32xl\:prose-sm tbody td:first-child { + padding-left: 0; + } + + .\32xl\:prose-sm tbody td:last-child { + padding-right: 0; + } + + .\32xl\:prose-sm> :first-child { + margin-top: 0; + } + + .\32xl\:prose-sm> :last-child { + margin-bottom: 0; + } + + .\32xl\:prose-lg { + font-size: 1.125rem; + line-height: 1.7777778; + } + + .\32xl\:prose-lg p { + margin-top: 1.3333333em; + margin-bottom: 1.3333333em; + } + + .\32xl\:prose-lg [class~="lead"] { + font-size: 1.2222222em; + line-height: 1.4545455; + margin-top: 1.0909091em; + margin-bottom: 1.0909091em; + } + + .\32xl\:prose-lg blockquote { + margin-top: 1.6666667em; + margin-bottom: 1.6666667em; + padding-left: 1em; + } + + .\32xl\:prose-lg h1 { + font-size: 2.6666667em; + margin-top: 0; + margin-bottom: 0.8333333em; + line-height: 1; + } + + .\32xl\:prose-lg h2 { + font-size: 1.6666667em; + margin-top: 1.8666667em; + margin-bottom: 1.0666667em; + line-height: 1.3333333; + } + + .\32xl\:prose-lg h3 { + font-size: 1.3333333em; + margin-top: 1.6666667em; + margin-bottom: 0.6666667em; + line-height: 1.5; + } + + .\32xl\:prose-lg h4 { + margin-top: 1.7777778em; + margin-bottom: 0.4444444em; + line-height: 1.5555556; + } + + .\32xl\:prose-lg img { + margin-top: 1.7777778em; + margin-bottom: 1.7777778em; + } + + .\32xl\:prose-lg video { + margin-top: 1.7777778em; + margin-bottom: 1.7777778em; + } + + .\32xl\:prose-lg figure { + margin-top: 1.7777778em; + margin-bottom: 1.7777778em; + } + + .\32xl\:prose-lg figure>* { + margin-top: 0; + margin-bottom: 0; + } + + .\32xl\:prose-lg figure figcaption { + font-size: 0.8888889em; + line-height: 1.5; + margin-top: 1em; + } + + .\32xl\:prose-lg code { + font-size: 0.8888889em; + } + + .\32xl\:prose-lg h2 code { + font-size: 0.8666667em; + } + + .\32xl\:prose-lg h3 code { + font-size: 0.875em; + } + + .\32xl\:prose-lg pre { + font-size: 0.8888889em; + line-height: 1.75; + margin-top: 2em; + margin-bottom: 2em; + border-radius: 0.375rem; + padding-top: 1em; + padding-right: 1.5em; + padding-bottom: 1em; + padding-left: 1.5em; + } + + .\32xl\:prose-lg ol { + margin-top: 1.3333333em; + margin-bottom: 1.3333333em; + } + + .\32xl\:prose-lg ul { + margin-top: 1.3333333em; + margin-bottom: 1.3333333em; + } + + .\32xl\:prose-lg li { + margin-top: 0.6666667em; + margin-bottom: 0.6666667em; + } + + .\32xl\:prose-lg ol>li { + padding-left: 1.6666667em; + } + + .\32xl\:prose-lg ol>li::before { + left: 0; + } + + .\32xl\:prose-lg ul>li { + padding-left: 1.6666667em; + } + + .\32xl\:prose-lg ul>li::before { + width: 0.3333333em; + height: 0.3333333em; + top: calc(0.8888889em - 0.1666667em); + left: 0.2222222em; + } + + .\32xl\:prose-lg>ul>li p { + margin-top: 0.8888889em; + margin-bottom: 0.8888889em; + } + + .\32xl\:prose-lg>ul>li>*:first-child { + margin-top: 1.3333333em; + } + + .\32xl\:prose-lg>ul>li>*:last-child { + margin-bottom: 1.3333333em; + } + + .\32xl\:prose-lg>ol>li>*:first-child { + margin-top: 1.3333333em; + } + + .\32xl\:prose-lg>ol>li>*:last-child { + margin-bottom: 1.3333333em; + } + + .\32xl\:prose-lg ul ul, + .\32xl\:prose-lg ul ol, + .\32xl\:prose-lg ol ul, + .\32xl\:prose-lg ol ol { + margin-top: 0.8888889em; + margin-bottom: 0.8888889em; + } + + .\32xl\:prose-lg hr { + margin-top: 3.1111111em; + margin-bottom: 3.1111111em; + } + + .\32xl\:prose-lg hr+* { + margin-top: 0; + } + + .\32xl\:prose-lg h2+* { + margin-top: 0; + } + + .\32xl\:prose-lg h3+* { + margin-top: 0; + } + + .\32xl\:prose-lg h4+* { + margin-top: 0; + } + + .\32xl\:prose-lg table { + font-size: 0.8888889em; + line-height: 1.5; + } + + .\32xl\:prose-lg thead th { + padding-right: 0.75em; + padding-bottom: 0.75em; + padding-left: 0.75em; + } + + .\32xl\:prose-lg thead th:first-child { + padding-left: 0; + } + + .\32xl\:prose-lg thead th:last-child { + padding-right: 0; + } + + .\32xl\:prose-lg tbody td { + padding-top: 0.75em; + padding-right: 0.75em; + padding-bottom: 0.75em; + padding-left: 0.75em; + } + + .\32xl\:prose-lg tbody td:first-child { + padding-left: 0; + } + + .\32xl\:prose-lg tbody td:last-child { + padding-right: 0; + } + + .\32xl\:prose-lg> :first-child { + margin-top: 0; + } + + .\32xl\:prose-lg> :last-child { + margin-bottom: 0; + } + + .\32xl\:prose-xl { + font-size: 1.25rem; + line-height: 1.8; + } + + .\32xl\:prose-xl p { + margin-top: 1.2em; + margin-bottom: 1.2em; + } + + .\32xl\:prose-xl [class~="lead"] { + font-size: 1.2em; + line-height: 1.5; + margin-top: 1em; + margin-bottom: 1em; + } + + .\32xl\:prose-xl blockquote { + margin-top: 1.6em; + margin-bottom: 1.6em; + padding-left: 1.0666667em; + } + + .\32xl\:prose-xl h1 { + font-size: 2.8em; + margin-top: 0; + margin-bottom: 0.8571429em; + line-height: 1; + } + + .\32xl\:prose-xl h2 { + font-size: 1.8em; + margin-top: 1.5555556em; + margin-bottom: 0.8888889em; + line-height: 1.1111111; + } + + .\32xl\:prose-xl h3 { + font-size: 1.5em; + margin-top: 1.6em; + margin-bottom: 0.6666667em; + line-height: 1.3333333; + } + + .\32xl\:prose-xl h4 { + margin-top: 1.8em; + margin-bottom: 0.6em; + line-height: 1.6; + } + + .\32xl\:prose-xl img { + margin-top: 2em; + margin-bottom: 2em; + } + + .\32xl\:prose-xl video { + margin-top: 2em; + margin-bottom: 2em; + } + + .\32xl\:prose-xl figure { + margin-top: 2em; + margin-bottom: 2em; + } + + .\32xl\:prose-xl figure>* { + margin-top: 0; + margin-bottom: 0; + } + + .\32xl\:prose-xl figure figcaption { + font-size: 0.9em; + line-height: 1.5555556; + margin-top: 1em; + } + + .\32xl\:prose-xl code { + font-size: 0.9em; + } + + .\32xl\:prose-xl h2 code { + font-size: 0.8611111em; + } + + .\32xl\:prose-xl h3 code { + font-size: 0.9em; + } + + .\32xl\:prose-xl pre { + font-size: 0.9em; + line-height: 1.7777778; + margin-top: 2em; + margin-bottom: 2em; + border-radius: 0.5rem; + padding-top: 1.1111111em; + padding-right: 1.3333333em; + padding-bottom: 1.1111111em; + padding-left: 1.3333333em; + } + + .\32xl\:prose-xl ol { + margin-top: 1.2em; + margin-bottom: 1.2em; + } + + .\32xl\:prose-xl ul { + margin-top: 1.2em; + margin-bottom: 1.2em; + } + + .\32xl\:prose-xl li { + margin-top: 0.6em; + margin-bottom: 0.6em; + } + + .\32xl\:prose-xl ol>li { + padding-left: 1.8em; + } + + .\32xl\:prose-xl ol>li::before { + left: 0; + } + + .\32xl\:prose-xl ul>li { + padding-left: 1.8em; + } + + .\32xl\:prose-xl ul>li::before { + width: 0.35em; + height: 0.35em; + top: calc(0.9em - 0.175em); + left: 0.25em; + } + + .\32xl\:prose-xl>ul>li p { + margin-top: 0.8em; + margin-bottom: 0.8em; + } + + .\32xl\:prose-xl>ul>li>*:first-child { + margin-top: 1.2em; + } + + .\32xl\:prose-xl>ul>li>*:last-child { + margin-bottom: 1.2em; + } + + .\32xl\:prose-xl>ol>li>*:first-child { + margin-top: 1.2em; + } + + .\32xl\:prose-xl>ol>li>*:last-child { + margin-bottom: 1.2em; + } + + .\32xl\:prose-xl ul ul, + .\32xl\:prose-xl ul ol, + .\32xl\:prose-xl ol ul, + .\32xl\:prose-xl ol ol { + margin-top: 0.8em; + margin-bottom: 0.8em; + } + + .\32xl\:prose-xl hr { + margin-top: 2.8em; + margin-bottom: 2.8em; + } + + .\32xl\:prose-xl hr+* { + margin-top: 0; + } + + .\32xl\:prose-xl h2+* { + margin-top: 0; + } + + .\32xl\:prose-xl h3+* { + margin-top: 0; + } + + .\32xl\:prose-xl h4+* { + margin-top: 0; + } + + .\32xl\:prose-xl table { + font-size: 0.9em; + line-height: 1.5555556; + } + + .\32xl\:prose-xl thead th { + padding-right: 0.6666667em; + padding-bottom: 0.8888889em; + padding-left: 0.6666667em; + } + + .\32xl\:prose-xl thead th:first-child { + padding-left: 0; + } + + .\32xl\:prose-xl thead th:last-child { + padding-right: 0; + } + + .\32xl\:prose-xl tbody td { + padding-top: 0.8888889em; + padding-right: 0.6666667em; + padding-bottom: 0.8888889em; + padding-left: 0.6666667em; + } + + .\32xl\:prose-xl tbody td:first-child { + padding-left: 0; + } + + .\32xl\:prose-xl tbody td:last-child { + padding-right: 0; + } + + .\32xl\:prose-xl> :first-child { + margin-top: 0; + } + + .\32xl\:prose-xl> :last-child { + margin-bottom: 0; + } + + .\32xl\:prose-2xl { + font-size: 1.5rem; + line-height: 1.6666667; + } + + .\32xl\:prose-2xl p { + margin-top: 1.3333333em; + margin-bottom: 1.3333333em; + } + + .\32xl\:prose-2xl [class~="lead"] { + font-size: 1.25em; + line-height: 1.4666667; + margin-top: 1.0666667em; + margin-bottom: 1.0666667em; + } + + .\32xl\:prose-2xl blockquote { + margin-top: 1.7777778em; + margin-bottom: 1.7777778em; + padding-left: 1.1111111em; + } + + .\32xl\:prose-2xl h1 { + font-size: 2.6666667em; + margin-top: 0; + margin-bottom: 0.875em; + line-height: 1; + } + + .\32xl\:prose-2xl h2 { + font-size: 2em; + margin-top: 1.5em; + margin-bottom: 0.8333333em; + line-height: 1.0833333; + } + + .\32xl\:prose-2xl h3 { + font-size: 1.5em; + margin-top: 1.5555556em; + margin-bottom: 0.6666667em; + line-height: 1.2222222; + } + + .\32xl\:prose-2xl h4 { + margin-top: 1.6666667em; + margin-bottom: 0.6666667em; + line-height: 1.5; + } + + .\32xl\:prose-2xl img { + margin-top: 2em; + margin-bottom: 2em; + } + + .\32xl\:prose-2xl video { + margin-top: 2em; + margin-bottom: 2em; + } + + .\32xl\:prose-2xl figure { + margin-top: 2em; + margin-bottom: 2em; + } + + .\32xl\:prose-2xl figure>* { + margin-top: 0; + margin-bottom: 0; + } + + .\32xl\:prose-2xl figure figcaption { + font-size: 0.8333333em; + line-height: 1.6; + margin-top: 1em; + } + + .\32xl\:prose-2xl code { + font-size: 0.8333333em; + } + + .\32xl\:prose-2xl h2 code { + font-size: 0.875em; + } + + .\32xl\:prose-2xl h3 code { + font-size: 0.8888889em; + } + + .\32xl\:prose-2xl pre { + font-size: 0.8333333em; + line-height: 1.8; + margin-top: 2em; + margin-bottom: 2em; + border-radius: 0.5rem; + padding-top: 1.2em; + padding-right: 1.6em; + padding-bottom: 1.2em; + padding-left: 1.6em; + } + + .\32xl\:prose-2xl ol { + margin-top: 1.3333333em; + margin-bottom: 1.3333333em; + } + + .\32xl\:prose-2xl ul { + margin-top: 1.3333333em; + margin-bottom: 1.3333333em; + } + + .\32xl\:prose-2xl li { + margin-top: 0.5em; + margin-bottom: 0.5em; + } + + .\32xl\:prose-2xl ol>li { + padding-left: 1.6666667em; + } + + .\32xl\:prose-2xl ol>li::before { + left: 0; + } + + .\32xl\:prose-2xl ul>li { + padding-left: 1.6666667em; + } + + .\32xl\:prose-2xl ul>li::before { + width: 0.3333333em; + height: 0.3333333em; + top: calc(0.8333333em - 0.1666667em); + left: 0.25em; + } + + .\32xl\:prose-2xl>ul>li p { + margin-top: 0.8333333em; + margin-bottom: 0.8333333em; + } + + .\32xl\:prose-2xl>ul>li>*:first-child { + margin-top: 1.3333333em; + } + + .\32xl\:prose-2xl>ul>li>*:last-child { + margin-bottom: 1.3333333em; + } + + .\32xl\:prose-2xl>ol>li>*:first-child { + margin-top: 1.3333333em; + } + + .\32xl\:prose-2xl>ol>li>*:last-child { + margin-bottom: 1.3333333em; + } + + .\32xl\:prose-2xl ul ul, + .\32xl\:prose-2xl ul ol, + .\32xl\:prose-2xl ol ul, + .\32xl\:prose-2xl ol ol { + margin-top: 0.6666667em; + margin-bottom: 0.6666667em; + } + + .\32xl\:prose-2xl hr { + margin-top: 3em; + margin-bottom: 3em; + } + + .\32xl\:prose-2xl hr+* { + margin-top: 0; + } + + .\32xl\:prose-2xl h2+* { + margin-top: 0; + } + + .\32xl\:prose-2xl h3+* { + margin-top: 0; + } + + .\32xl\:prose-2xl h4+* { + margin-top: 0; + } + + .\32xl\:prose-2xl table { + font-size: 0.8333333em; + line-height: 1.4; + } + + .\32xl\:prose-2xl thead th { + padding-right: 0.6em; + padding-bottom: 0.8em; + padding-left: 0.6em; + } + + .\32xl\:prose-2xl thead th:first-child { + padding-left: 0; + } + + .\32xl\:prose-2xl thead th:last-child { + padding-right: 0; + } + + .\32xl\:prose-2xl tbody td { + padding-top: 0.8em; + padding-right: 0.6em; + padding-bottom: 0.8em; + padding-left: 0.6em; + } + + .\32xl\:prose-2xl tbody td:first-child { + padding-left: 0; + } + + .\32xl\:prose-2xl tbody td:last-child { + padding-right: 0; + } + + .\32xl\:prose-2xl> :first-child { + margin-top: 0; + } + + .\32xl\:prose-2xl> :last-child { + margin-bottom: 0; + } + + .\32xl\:prose-red a {} + + .\32xl\:prose-red a code {} + + .\32xl\:prose-yellow a {} + + .\32xl\:prose-yellow a code {} + + .\32xl\:prose-green a {} + + .\32xl\:prose-green a code {} + + .\32xl\:prose-blue a {} + + .\32xl\:prose-blue a code {} + + .\32xl\:prose-indigo a {} + + .\32xl\:prose-indigo a code {} + + .\32xl\:prose-purple a {} + + .\32xl\:prose-purple a code {} + + .\32xl\:prose-pink a {} + + .\32xl\:prose-pink a code {} +} \ No newline at end of file diff --git a/examples/preact/raw.js b/examples/preact/raw.js index 98d2700..d38ab29 100644 --- a/examples/preact/raw.js +++ b/examples/preact/raw.js @@ -6,67 +6,65 @@ import {Router, Link} from 'https://esm.sh/preact-router@4.1.0?deps=preact@10.12 const html = htm.bind(h); - -let page1Signal = signal("a") -console.log(page1Signal) -console.log(typeof page1Signal) -console.log(page1Signal.value) -console.log(typeof page1Signal.value) +function Nav(){ + return html` + <${Link} href="/">page1 <${Link} href="/page2">page2 + ` +} function page1(){ - function setPage1Singal(e){ - console.log("=== setPage1Singal") - page1Signal.value = e.target.value - } + useEffect(()=>{ + Prism.highlightAll() + }) - useEffect(async()=>{ - let resp = await fetch("https://api.coindesk.com/v1/bpi/currentprice.json") - const json = await resp.json() - console.log(json) - }, []) + let code = ` + proc Counter():Component {.exportc.} = + let (value {.exportc.}, setValue) = useState(0); - return html` -

    page1

    - -

    ${page1Signal.value}

    - <${Link} href="/page2">page2 - ` -} + proc increment(e:Event) {.exportc.} = + setValue(value + 1) + proc decrement(e:Event) {.exportc.} = + setValue(value - 1) -let page2Signal = signal("b") + return html(""" +
    Counter: {value}
    + + + """) + `.replace("\\", "") + console.log(code) + let content = "

    Page1

    \n 
    \n      ${code}\n
    " + return eval('html`' + content + '`') +} function page2(){ - function setPage2Singal(e){ - page2Signal.value = e.target.value - } + useEffect(()=>{ + Prism.highlightAll() + }) - return html` -

    page2

    - -

    ${page2Signal.value}

    - <${Link} href="/">home + let code = ` + function fuga(){ + console.log("fuga") + } ` -} - -function display(){ - return html` -
    -

    display

    -

    ${page1Signal.value}

    -

    ${page2Signal.value}

    + let content = ` +

    Page2

    + 
    
+      ${code}
+
    ` + return eval('html`' + content + '`') } - function App (props) { return html`

    Hello ${props.name}!

    + <${Nav} /> <${Router}> <${page1} path="/" /> <${page2} path="/page2" /> - <${display} /> `; } diff --git a/src/palladian/hooks.nim b/src/palladian/hooks.nim index 544c895..1214416 100644 --- a/src/palladian/hooks.nim +++ b/src/palladian/hooks.nim @@ -66,7 +66,7 @@ proc useState*(arg: JsonNode): (JsonNode, JsonStateSetter) = return (value, setter) -type States* = cstring|int|float|bool|JsonNode +type States* = cstring|int|float|bool|JsonNode|JsObject proc useEffect*(cb: proc()) {.importjs: "useEffect(#)".} proc useEffect*(cb: proc(), dependency: array) {.importjs: "useEffect(#, [])".} @@ -79,9 +79,16 @@ proc useMemo*(cb: proc()) {.importjs: "useMemo(#)".} proc useMemo*(cb: proc(), dependency: array) {.importjs: "useMemo(#, [])".} proc useMemo*(cb: proc(), dependency: seq[States]) {.importjs: "useMemo(#, #)".} -proc useCallback*(cb: proc()) {.importjs: "useCallback(#)".} -proc useCallback*(cb: proc(), dependency: array) {.importjs: "useCallback(#, [])".} -proc useCallback*(cb: proc(), dependency: seq[States]) {.importjs: "useCallback(#, #)".} +proc useCallback*(cb: proc()):JsObject {.importjs: "useCallback(#)", discardable.} +proc useCallback*(cb: proc(), dependency: array):JsObject {.importjs: "useCallback(#, [])", discardable.} +proc useCallback*(cb: proc(), dependency: seq[States]):JsObject {.importjs: "useCallback(#, #)", discardable.} + + +type RefObject = object + current*:Element + +proc useRef*():RefObject {.importjs:"useRef(null)".} + type BoolSignal = object of JsObject type BoolSignalValue* = bool @@ -117,9 +124,3 @@ type JsonSignalValue* = JsonNode proc signal*(arg: JsonNode): JsonSignal {.importjs: "signal(#)".} proc value*(self: JsonSignal): JsonSignalValue {.importjs: "#.value".} proc `value=`*(self: JsonSignal, val: JsonNode) {.importjs: "#.value = #".} - - -type RefObject = object - current*:Element - -proc useRef*():RefObject {.importjs:"useRef(null)".} diff --git a/src/palladian/strformat.nim b/src/palladian/strformat.nim index 7f8c0c5..85d7b0c 100644 --- a/src/palladian/strformat.nim +++ b/src/palladian/strformat.nim @@ -39,7 +39,7 @@ import ./preact # ================================================== -proc fmt*(arg:cstring):cstring {.importjs:"#".} +proc fmt*(arg:cstring):cstring {.importjs: "#".} ## for just easy to look JSX with no effect. template fmt*(arg:string):cstring = fmt(arg.cstring) ## for just easy to look JSX with no effect. From 6cd9804f60bc5dff78837eb328a5277bffaa23de Mon Sep 17 00:00:00 2001 From: itsumura-h Date: Tue, 21 Feb 2023 10:53:06 +0900 Subject: [PATCH 09/16] useLayoutEffect --- examples/example/components/code_block.nim | 2 +- examples/example/components/drawer.nim | 1 - examples/example/pages/api_access_page.nim | 5 +++ examples/example/pages/top_page.nim | 2 +- examples/example/pages/use_effect_page.nim | 2 +- examples/example/pages/use_state_page.nim | 2 +- src/palladian/hooks.nim | 7 ++++ src/palladian/importlibs.nim | 9 ++++- src/palladian/preact.nim | 2 -- src/palladian/strformat.nim | 41 +--------------------- 10 files changed, 25 insertions(+), 48 deletions(-) diff --git a/examples/example/components/code_block.nim b/examples/example/components/code_block.nim index c285c2f..fdff693 100644 --- a/examples/example/components/code_block.nim +++ b/examples/example/components/code_block.nim @@ -9,7 +9,7 @@ import ../libs/highlight proc CodeBlock(props:JsObject):Component {.exportc.} = let codeRef {.exportc.} = useRef() - useEffect(proc() = + useLayoutEffect(proc() = var code = $props.children.to(cstring) code = code.replace("\\", "").dedent() codeRef.current.textContent = code diff --git a/examples/example/components/drawer.nim b/examples/example/components/drawer.nim index 8e41ea5..02d691f 100644 --- a/examples/example/components/drawer.nim +++ b/examples/example/components/drawer.nim @@ -1,4 +1,3 @@ -import jsffi import ../../../src/palladian import ../../../src/palladian/strformat diff --git a/examples/example/pages/api_access_page.nim b/examples/example/pages/api_access_page.nim index 3d4fdb8..3732baa 100644 --- a/examples/example/pages/api_access_page.nim +++ b/examples/example/pages/api_access_page.nim @@ -1,4 +1,5 @@ import std/asyncjs +import std/dom import std/jsffi import std/jsfetch import std/json @@ -12,6 +13,10 @@ import ../components/text_body proc ApiAccessPage*():Component {.exportc.} = let (btcPrice {.exportc.}, setBtcPrice) = useState(newJsObject()) + useLayoutEffect(proc()= + document.title = "API Access / Nim Palladian" + , []) + useEffect(proc() {.async.}= let res = await fetch("https://api.coindesk.com/v1/bpi/currentprice.json".cstring) let json = await res.json() diff --git a/examples/example/pages/top_page.nim b/examples/example/pages/top_page.nim index add698a..1d89c16 100644 --- a/examples/example/pages/top_page.nim +++ b/examples/example/pages/top_page.nim @@ -27,7 +27,7 @@ proc TopPage*():Component {.exportc.} = \"\"") """ - useEffect(proc()= + useLayoutEffect(proc()= document.title = "Toppage / Nim Palladian" , []) diff --git a/examples/example/pages/use_effect_page.nim b/examples/example/pages/use_effect_page.nim index 41e1d9a..231ccfe 100644 --- a/examples/example/pages/use_effect_page.nim +++ b/examples/example/pages/use_effect_page.nim @@ -44,7 +44,7 @@ proc StringEffectComponent():Component {.exportc.} = \"\"") """ - useEffect(proc() = + useLayoutEffect(proc() = document.title = "useEffect / Nim Palladian" , []) diff --git a/examples/example/pages/use_state_page.nim b/examples/example/pages/use_state_page.nim index 918bc9b..fb071af 100644 --- a/examples/example/pages/use_state_page.nim +++ b/examples/example/pages/use_state_page.nim @@ -105,7 +105,7 @@ proc StringStateComponent():Component {.exportc.} = proc UseStatePage*():Component {.exportc.} = - useEffect(proc()= + useLayoutEffect(proc()= document.title = "useState / Nim Palladian" , []) diff --git a/src/palladian/hooks.nim b/src/palladian/hooks.nim index 1214416..d57e07f 100644 --- a/src/palladian/hooks.nim +++ b/src/palladian/hooks.nim @@ -75,6 +75,13 @@ proc useEffect*(cb: proc (): Future[void]) {.importjs: "useEffect(#)".} proc useEffect*(cb: proc (): Future[void], dependency: array) {.importjs: "useEffect(#, [])".} proc useEffect*(cb: proc (): Future[void], dependency: seq[States]) {.importjs: "useEffect(#, #)".} +proc useLayoutEffect*(cb: proc()) {.importjs: "useLayoutEffect(#)".} +proc useLayoutEffect*(cb: proc(), dependency: array) {.importjs: "useLayoutEffect(#, [])".} +proc useLayoutEffect*(cb: proc(), dependency: seq[States]) {.importjs: "useLayoutEffect(#, #)".} +proc useLayoutEffect*(cb: proc (): Future[void]) {.importjs: "useLayoutEffect(#)".} +proc useLayoutEffect*(cb: proc (): Future[void], dependency: array) {.importjs: "useLayoutEffect(#, [])".} +proc useLayoutEffect*(cb: proc (): Future[void], dependency: seq[States]) {.importjs: "useLayoutEffect(#, #)".} + proc useMemo*(cb: proc()) {.importjs: "useMemo(#)".} proc useMemo*(cb: proc(), dependency: array) {.importjs: "useMemo(#, [])".} proc useMemo*(cb: proc(), dependency: seq[States]) {.importjs: "useMemo(#, #)".} diff --git a/src/palladian/importlibs.nim b/src/palladian/importlibs.nim index 6a298a7..aa6a348 100644 --- a/src/palladian/importlibs.nim +++ b/src/palladian/importlibs.nim @@ -10,7 +10,14 @@ template importPreact*() = template importPreactHooks*() = {.emit: """ - import { useState, useEffect, useMemo, useRef, useCallback } from 'https://esm.sh/preact@10.12.1/hooks'; + import { + useState, + useEffect, + useLayoutEffect, + useMemo, + useRef, + useCallback + } from 'https://esm.sh/preact@10.12.1/hooks'; import { signal, Signal } from 'https://esm.sh/@preact/signals@1.1.3?deps=preact@10.12.1'; """.} diff --git a/src/palladian/preact.nim b/src/palladian/preact.nim index ee507ef..2b4ac9c 100644 --- a/src/palladian/preact.nim +++ b/src/palladian/preact.nim @@ -1,7 +1,5 @@ -import std/macros import std/jsffi import std/dom -import std/jsconsole import ./importlibs importPreact() diff --git a/src/palladian/strformat.nim b/src/palladian/strformat.nim index 85d7b0c..eddb9d7 100644 --- a/src/palladian/strformat.nim +++ b/src/palladian/strformat.nim @@ -1,43 +1,4 @@ -import std/macros -import ./preact - -# macro getProcNameMacroForComponent(arg:untyped):untyped = -# let procName = strVal(arg) -# result = quote do: -# block: -# `procName` - -# template `$`*(arg:proc():Component):untyped = -# block: -# let procName = getProcNameMacroForComponent(arg) -# proc getProcName():cstring = -# return "${".cstring & procName.cstring & "}".cstring -# getProcName() - -# # ================================================== -# macro getProcNameMacroForJsObject(arg:untyped):untyped = -# echo "===== getProcNameMacroForJsObject" -# echo arg.repr -# let procName = strVal(arg) -# result = quote do: -# block: -# `procName` - -# template `$`*(arg:JsObject):untyped = -# block: -# let procName = getProcNameMacroForJsObject(arg) -# proc getProcName():cstring = -# return "${".cstring & procName.cstring & "}".cstring -# getProcName() - -# template `$`*(arg:proc(e:Event)):untyped = -# block: -# let procName = getProcNameMacroForJsObject(arg) -# proc getProcName():cstring = -# return "${".cstring & procName.cstring & "}".cstring -# getProcName() - -# ================================================== +import std/jsffi proc fmt*(arg:cstring):cstring {.importjs: "#".} ## for just easy to look JSX with no effect. From 44264908ba297e36bcae7b24d710ceff36d60fb6 Mon Sep 17 00:00:00 2001 From: itsumura-h Date: Tue, 21 Feb 2023 11:58:45 +0900 Subject: [PATCH 10/16] docs --- docs/palladian.html | 6 +- docs/palladian/controll_flow.html | 175 ++++++++ docs/palladian/controll_flow.idx | 2 + docs/palladian/format.html | 173 ++++++++ docs/palladian/format.idx | 2 + docs/palladian/hooks.html | 707 ++++++++++++++++++++++++++++++ docs/palladian/hooks.idx | 51 +++ docs/palladian/importlibs.html | 6 +- docs/palladian/preact.html | 15 +- docs/palladian/preact.idx | 1 + docs/palladian/router.html | 136 ++++++ docs/theindex.html | 160 ++++++- palladian.nimble | 2 + 13 files changed, 1427 insertions(+), 9 deletions(-) create mode 100644 docs/palladian/controll_flow.html create mode 100644 docs/palladian/controll_flow.idx create mode 100644 docs/palladian/format.html create mode 100644 docs/palladian/format.idx create mode 100644 docs/palladian/hooks.html create mode 100644 docs/palladian/hooks.idx create mode 100644 docs/palladian/router.html diff --git a/docs/palladian.html b/docs/palladian.html index 14a0b9d..079289a 100644 --- a/docs/palladian.html +++ b/docs/palladian.html @@ -122,12 +122,12 @@

    src/palladian

    @@ -137,7 +137,7 @@

    Exports


    - Made with Nim. Generated: 2023-02-18 21:13:49 UTC + Made with Nim. Generated: 2023-02-21 02:56:33 UTC
    diff --git a/docs/palladian/controll_flow.html b/docs/palladian/controll_flow.html new file mode 100644 index 0000000..021808c --- /dev/null +++ b/docs/palladian/controll_flow.html @@ -0,0 +1,175 @@ + + + + + + + + + + + + + + + + + + +src/palladian/controll_flow + + + + + + + + +
    +
    +

    src/palladian/controll_flow

    +
    +
    +
    + +     Dark Mode +
    + +
    + Search: +
    +
    + Group by: + +
    + + +
    + +
    +
    + +

    + +
    +

    Procs

    +
    +
    +
    proc For(props: ComponentProps): Component {.importjs: "For(#)", ...raises: [],
+    tags: [].}
    +
    + + + +
    +
    +
    +
    proc Show(props: ComponentProps): Component {.importjs: "Show(#)", ...raises: [],
+    tags: [].}
    +
    + + + +
    +
    + +
    + +
    +
    + +
    +
    + +
    + Made with Nim. Generated: 2023-02-21 02:56:33 UTC +
    +
    +
    +
    + + + diff --git a/docs/palladian/controll_flow.idx b/docs/palladian/controll_flow.idx new file mode 100644 index 0000000..0fc7546 --- /dev/null +++ b/docs/palladian/controll_flow.idx @@ -0,0 +1,2 @@ +For palladian/controll_flow.html#For,ComponentProps controll_flow: For(props: ComponentProps): Component +Show palladian/controll_flow.html#Show,ComponentProps controll_flow: Show(props: ComponentProps): Component diff --git a/docs/palladian/format.html b/docs/palladian/format.html new file mode 100644 index 0000000..7099402 --- /dev/null +++ b/docs/palladian/format.html @@ -0,0 +1,173 @@ + + + + + + + + + + + + + + + + + + +src/palladian/format + + + + + + + + +
    +
    +

    src/palladian/format

    +
    +
    +
    + +     Dark Mode +
    + +
    + Search: +
    +
    + Group by: + +
    + + +
    + +
    +
    + +

    +
    +

    Procs

    +
    +
    +
    proc fmt(arg: cstring): cstring {.importjs: "#", ...raises: [], tags: [].}
    +
    + +for just easy to look JSX in IDE with no effect. + +
    +
    + +
    +
    +

    Templates

    +
    +
    +
    template fmt(arg: string): cstring
    +
    + +for just easy to look JSX in IDE with no effect. + +
    +
    + +
    + +
    +
    + +
    +
    + +
    + Made with Nim. Generated: 2023-02-21 02:56:33 UTC +
    +
    +
    +
    + + + diff --git a/docs/palladian/format.idx b/docs/palladian/format.idx new file mode 100644 index 0000000..82e8838 --- /dev/null +++ b/docs/palladian/format.idx @@ -0,0 +1,2 @@ +fmt palladian/format.html#fmt,cstring format: fmt(arg: cstring): cstring +fmt palladian/format.html#fmt.t,string format: fmt(arg: string): cstring diff --git a/docs/palladian/hooks.html b/docs/palladian/hooks.html new file mode 100644 index 0000000..0474712 --- /dev/null +++ b/docs/palladian/hooks.html @@ -0,0 +1,707 @@ + + + + + + + + + + + + + + + + + + +src/palladian/hooks + + + + + + + + +
    +
    +

    src/palladian/hooks

    +
    +
    +
    + +     Dark Mode +
    + +
    + Search: +
    +
    + Group by: + +
    + + +
    + +
    +
    + +

    + +
    +

    Types

    +
    +
    +
    BoolSignalValue = bool
    +
    + + + +
    +
    +
    +
    FloatSignalValue = float
    +
    + + + +
    +
    +
    +
    JsonSignalValue = JsonNode
    +
    + + + +
    +
    +
    +
    ObjSignalValue = JsObject
    +
    + + + +
    +
    +
    +
    States = cstring | int | float | bool | JsonNode | JsObject
    +
    + + + +
    +
    +
    +
    StrSignalValue = cstring
    +
    + + + +
    +
    + +
    +
    +

    Procs

    +
    +
    +
    proc signal(arg: bool): BoolSignal {.importjs: "signal(#)", ...raises: [], tags: [].}
    +
    + + + +
    +
    +
    +
    proc signal(arg: cstring): StrSignal {.importjs: "signal(#)", ...raises: [],
+                                       tags: [].}
    +
    + + + +
    +
    +
    +
    proc signal(arg: float): FloatSignal {.importjs: "signal(#)", ...raises: [],
+                                       tags: [].}
    +
    + + + +
    +
    +
    +
    proc signal(arg: int): IntSignal {.importjs: "signal(#)", ...raises: [], tags: [].}
    +
    + + + +
    +
    +
    +
    proc signal(arg: JsObject): ObjSignal {.importjs: "signal(#)", ...raises: [],
+                                        tags: [].}
    +
    + + + +
    +
    +
    +
    proc signal(arg: JsonNode): JsonSignal {.importjs: "signal(#)", ...raises: [],
+    tags: [].}
    +
    + + + +
    +
    +
    +
    proc useCallback(cb: proc ()): JsObject {.importjs: "useCallback(#)",
+    discardable, ...raises: [], tags: [].}
    +
    + + + +
    +
    +
    +
    proc useCallback(cb: proc (); dependency: array): JsObject {.
+    importjs: "useCallback(#, [])", discardable, ...raises: [], tags: [].}
    +
    + + + +
    +
    +
    +
    proc useCallback(cb: proc (); dependency: seq[States]): JsObject {.
+    importjs: "useCallback(#, #)", discardable, ...raises: [], tags: [].}
    +
    + + + +
    +
    +
    +
    proc useEffect(cb: proc ()) {.importjs: "useEffect(#)", ...raises: [], tags: [].}
    +
    + + + +
    +
    +
    +
    proc useEffect(cb: proc (): Future[void]) {.importjs: "useEffect(#)",
+    ...raises: [], tags: [].}
    +
    + + + +
    +
    +
    +
    proc useEffect(cb: proc (): Future[void]; dependency: array) {.
+    importjs: "useEffect(#, [])", ...raises: [], tags: [].}
    +
    + + + +
    +
    +
    +
    proc useEffect(cb: proc (): Future[void]; dependency: seq[States]) {.
+    importjs: "useEffect(#, #)", ...raises: [], tags: [].}
    +
    + + + +
    +
    +
    +
    proc useEffect(cb: proc (); dependency: array) {.importjs: "useEffect(#, [])",
+    ...raises: [], tags: [].}
    +
    + + + +
    +
    +
    +
    proc useEffect(cb: proc (); dependency: seq[States]) {.
+    importjs: "useEffect(#, #)", ...raises: [], tags: [].}
    +
    + + + +
    +
    +
    +
    proc useLayoutEffect(cb: proc ()) {.importjs: "useLayoutEffect(#)", ...raises: [],
+                                    tags: [].}
    +
    + + + +
    +
    +
    +
    proc useLayoutEffect(cb: proc (): Future[void]) {.
+    importjs: "useLayoutEffect(#)", ...raises: [], tags: [].}
    +
    + + + +
    +
    +
    +
    proc useLayoutEffect(cb: proc (): Future[void]; dependency: array) {.
+    importjs: "useLayoutEffect(#, [])", ...raises: [], tags: [].}
    +
    + + + +
    +
    +
    +
    proc useLayoutEffect(cb: proc (): Future[void]; dependency: seq[States]) {.
+    importjs: "useLayoutEffect(#, #)", ...raises: [], tags: [].}
    +
    + + + +
    +
    +
    +
    proc useLayoutEffect(cb: proc (); dependency: array) {.
+    importjs: "useLayoutEffect(#, [])", ...raises: [], tags: [].}
    +
    + + + +
    +
    +
    +
    proc useLayoutEffect(cb: proc (); dependency: seq[States]) {.
+    importjs: "useLayoutEffect(#, #)", ...raises: [], tags: [].}
    +
    + + + +
    +
    +
    +
    proc useMemo(cb: proc ()) {.importjs: "useMemo(#)", ...raises: [], tags: [].}
    +
    + + + +
    +
    +
    +
    proc useMemo(cb: proc (); dependency: array) {.importjs: "useMemo(#, [])",
+    ...raises: [], tags: [].}
    +
    + + + +
    +
    +
    +
    proc useMemo(cb: proc (); dependency: seq[States]) {.importjs: "useMemo(#, #)",
+    ...raises: [], tags: [].}
    +
    + + + +
    +
    +
    +
    proc useRef(): RefObject {.importjs: "useRef(null)", ...raises: [], tags: [].}
    +
    + + + +
    +
    +
    +
    proc useState(arg: bool): (bool, BoolStateSetter) {....raises: [], tags: [].}
    +
    + + + +
    +
    +
    +
    proc useState(arg: cstring): (cstring, StrStateSetter) {....raises: [], tags: [].}
    +
    + + + +
    +
    +
    +
    proc useState(arg: float): (float, FloatStateSetter) {....raises: [], tags: [].}
    +
    + + + +
    +
    +
    +
    proc useState(arg: int): (int, IntStateSetter) {....raises: [], tags: [].}
    +
    + + + +
    +
    +
    +
    proc useState(arg: JsObject): (JsObject, ObjectStateSetter) {....raises: [],
+    tags: [].}
    +
    + + + +
    +
    +
    +
    proc useState(arg: JsonNode): (JsonNode, JsonStateSetter) {....raises: [], tags: [].}
    +
    + + + +
    +
    +
    +
    proc value(self: BoolSignal): BoolSignalValue {.importjs: "#.value", ...raises: [],
+    tags: [].}
    +
    + + + +
    +
    +
    +
    proc value(self: FloatSignal): FloatSignalValue {.importjs: "#.value",
+    ...raises: [], tags: [].}
    +
    + + + +
    +
    +
    +
    proc value(self: IntSignal): int {.importjs: "#.value", ...raises: [], tags: [].}
    +
    + + + +
    +
    +
    +
    proc value(self: JsonSignal): JsonSignalValue {.importjs: "#.value", ...raises: [],
+    tags: [].}
    +
    + + + +
    +
    +
    +
    proc value(self: ObjSignal): ObjSignalValue {.importjs: "#.value", ...raises: [],
+    tags: [].}
    +
    + + + +
    +
    +
    +
    proc value(self: StrSignal): StrSignalValue {.importjs: "#.value", ...raises: [],
+    tags: [].}
    +
    + + + +
    +
    +
    +
    proc value=(self: BoolSignal; val: bool) {.importjs: "#.value = #", ...raises: [],
+    tags: [].}
    +
    + + + +
    +
    +
    +
    proc value=(self: FloatSignal; val: float) {.importjs: "#.value = #",
+    ...raises: [], tags: [].}
    +
    + + + +
    +
    +
    +
    proc value=(self: IntSignal; val: int) {.importjs: "#.value = #", ...raises: [],
+    tags: [].}
    +
    + + + +
    +
    +
    +
    proc value=(self: JsonSignal; val: JsonNode) {.importjs: "#.value = #",
+    ...raises: [], tags: [].}
    +
    + + + +
    +
    +
    +
    proc value=(self: ObjSignal; val: JsObject) {.importjs: "#.value = #",
+    ...raises: [], tags: [].}
    +
    + + + +
    +
    +
    +
    proc value=(self: StrSignal; val: cstring) {.importjs: "#.value = #",
+    ...raises: [], tags: [].}
    +
    + + + +
    +
    + +
    + +
    +
    + +
    +
    + +
    + Made with Nim. Generated: 2023-02-21 02:56:33 UTC +
    +
    +
    +
    + + + diff --git a/docs/palladian/hooks.idx b/docs/palladian/hooks.idx new file mode 100644 index 0000000..9b63763 --- /dev/null +++ b/docs/palladian/hooks.idx @@ -0,0 +1,51 @@ +useState palladian/hooks.html#useState,bool hooks: useState(arg: bool): (bool, BoolStateSetter) +useState palladian/hooks.html#useState,int hooks: useState(arg: int): (int, IntStateSetter) +useState palladian/hooks.html#useState,float hooks: useState(arg: float): (float, FloatStateSetter) +useState palladian/hooks.html#useState,cstring hooks: useState(arg: cstring): (cstring, StrStateSetter) +useState palladian/hooks.html#useState,JsObject hooks: useState(arg: JsObject): (JsObject, ObjectStateSetter) +useState palladian/hooks.html#useState,JsonNode hooks: useState(arg: JsonNode): (JsonNode, JsonStateSetter) +States palladian/hooks.html#States hooks: States +useEffect palladian/hooks.html#useEffect,proc) hooks: useEffect(cb: proc ()) +useEffect palladian/hooks.html#useEffect,proc),array hooks: useEffect(cb: proc (); dependency: array) +useEffect palladian/hooks.html#useEffect,proc),seq[States] hooks: useEffect(cb: proc (); dependency: seq[States]) +useEffect palladian/hooks.html#useEffect,proc)_2 hooks: useEffect(cb: proc (): Future[void]) +useEffect palladian/hooks.html#useEffect,proc),array_2 hooks: useEffect(cb: proc (): Future[void]; dependency: array) +useEffect palladian/hooks.html#useEffect,proc),seq[States]_2 hooks: useEffect(cb: proc (): Future[void]; dependency: seq[States]) +useLayoutEffect palladian/hooks.html#useLayoutEffect,proc) hooks: useLayoutEffect(cb: proc ()) +useLayoutEffect palladian/hooks.html#useLayoutEffect,proc),array hooks: useLayoutEffect(cb: proc (); dependency: array) +useLayoutEffect palladian/hooks.html#useLayoutEffect,proc),seq[States] hooks: useLayoutEffect(cb: proc (); dependency: seq[States]) +useLayoutEffect palladian/hooks.html#useLayoutEffect,proc)_2 hooks: useLayoutEffect(cb: proc (): Future[void]) +useLayoutEffect palladian/hooks.html#useLayoutEffect,proc),array_2 hooks: useLayoutEffect(cb: proc (): Future[void]; dependency: array) +useLayoutEffect palladian/hooks.html#useLayoutEffect,proc),seq[States]_2 hooks: useLayoutEffect(cb: proc (): Future[void]; dependency: seq[States]) +useMemo palladian/hooks.html#useMemo,proc) hooks: useMemo(cb: proc ()) +useMemo palladian/hooks.html#useMemo,proc),array hooks: useMemo(cb: proc (); dependency: array) +useMemo palladian/hooks.html#useMemo,proc),seq[States] hooks: useMemo(cb: proc (); dependency: seq[States]) +useCallback palladian/hooks.html#useCallback,proc) hooks: useCallback(cb: proc ()): JsObject +useCallback palladian/hooks.html#useCallback,proc),array hooks: useCallback(cb: proc (); dependency: array): JsObject +useCallback palladian/hooks.html#useCallback,proc),seq[States] hooks: useCallback(cb: proc (); dependency: seq[States]): JsObject +useRef palladian/hooks.html#useRef hooks: useRef(): RefObject +false palladian/hooks.html#false BoolSignalValue.false +true palladian/hooks.html#true BoolSignalValue.true +BoolSignalValue palladian/hooks.html#BoolSignalValue hooks: BoolSignalValue +signal palladian/hooks.html#signal,bool hooks: signal(arg: bool): BoolSignal +value palladian/hooks.html#value,BoolSignal hooks: value(self: BoolSignal): BoolSignalValue +value= palladian/hooks.html#value=,BoolSignal,bool hooks: value=(self: BoolSignal; val: bool) +signal palladian/hooks.html#signal,int hooks: signal(arg: int): IntSignal +value palladian/hooks.html#value,IntSignal hooks: value(self: IntSignal): int +value= palladian/hooks.html#value=,IntSignal,int hooks: value=(self: IntSignal; val: int) +FloatSignalValue palladian/hooks.html#FloatSignalValue hooks: FloatSignalValue +signal palladian/hooks.html#signal,float hooks: signal(arg: float): FloatSignal +value palladian/hooks.html#value,FloatSignal hooks: value(self: FloatSignal): FloatSignalValue +value= palladian/hooks.html#value=,FloatSignal,float hooks: value=(self: FloatSignal; val: float) +StrSignalValue palladian/hooks.html#StrSignalValue hooks: StrSignalValue +signal palladian/hooks.html#signal,cstring hooks: signal(arg: cstring): StrSignal +value palladian/hooks.html#value,StrSignal hooks: value(self: StrSignal): StrSignalValue +value= palladian/hooks.html#value=,StrSignal,cstring hooks: value=(self: StrSignal; val: cstring) +ObjSignalValue palladian/hooks.html#ObjSignalValue hooks: ObjSignalValue +signal palladian/hooks.html#signal,JsObject hooks: signal(arg: JsObject): ObjSignal +value palladian/hooks.html#value,ObjSignal hooks: value(self: ObjSignal): ObjSignalValue +value= palladian/hooks.html#value=,ObjSignal,JsObject hooks: value=(self: ObjSignal; val: JsObject) +JsonSignalValue palladian/hooks.html#JsonSignalValue hooks: JsonSignalValue +signal palladian/hooks.html#signal,JsonNode hooks: signal(arg: JsonNode): JsonSignal +value palladian/hooks.html#value,JsonSignal hooks: value(self: JsonSignal): JsonSignalValue +value= palladian/hooks.html#value=,JsonSignal,JsonNode hooks: value=(self: JsonSignal; val: JsonNode) diff --git a/docs/palladian/importlibs.html b/docs/palladian/importlibs.html index 37f9e22..c904167 100644 --- a/docs/palladian/importlibs.html +++ b/docs/palladian/importlibs.html @@ -127,7 +127,9 @@

    src/palladian/importlibs

    -

    use https://esm.sh for CDN. You can explicitly tell it which version of any dependency to use.

    +

    use https://esm.sh for CDN.

    +

    You can explicitly tell it which version of any dependency to use.

    +

    Templates

    @@ -165,7 +167,7 @@

    Templates


    - Made with Nim. Generated: 2023-02-18 21:13:49 UTC + Made with Nim. Generated: 2023-02-21 02:56:32 UTC
    diff --git a/docs/palladian/preact.html b/docs/palladian/preact.html index 5626960..351642f 100644 --- a/docs/palladian/preact.html +++ b/docs/palladian/preact.html @@ -109,6 +109,9 @@

    src/palladian/preact

    @@ -162,6 +165,16 @@

    Types

    + +
    +
    +
    ComponentProps = object of JsObject
+  children*: cstring
+
    +
    + + +
    @@ -210,7 +223,7 @@

    Templates


    - Made with Nim. Generated: 2023-02-18 21:13:49 UTC + Made with Nim. Generated: 2023-02-21 02:56:32 UTC
    diff --git a/docs/palladian/preact.idx b/docs/palladian/preact.idx index 25eca71..46cff2f 100644 --- a/docs/palladian/preact.idx +++ b/docs/palladian/preact.idx @@ -2,3 +2,4 @@ Component palladian/preact.html#Component preact: Component html palladian/preact.html#html,cstring preact: html(arg: cstring): Component html palladian/preact.html#html.t,string preact: html(arg: string): Component renderApp palladian/preact.html#renderApp,proc),Element preact: renderApp(component: proc (): Component; dom: Element) +ComponentProps palladian/preact.html#ComponentProps preact: ComponentProps diff --git a/docs/palladian/router.html b/docs/palladian/router.html new file mode 100644 index 0000000..4b8f6fe --- /dev/null +++ b/docs/palladian/router.html @@ -0,0 +1,136 @@ + + + + + + + + + + + + + + + + + + +src/palladian/router + + + + + + + + +
    +
    +

    src/palladian/router

    +
    +
    +
    + +     Dark Mode +
    + +
    + Search: +
    +
    + Group by: + +
    + + +
    + +
    +
    + +

    + + +
    +
    + +
    +
    + +
    + Made with Nim. Generated: 2023-02-21 02:56:33 UTC +
    +
    +
    +
    + + + diff --git a/docs/theindex.html b/docs/theindex.html index b276fde..7a02e2a 100644 --- a/docs/theindex.html +++ b/docs/theindex.html @@ -70,11 +70,37 @@

    Index

    - Modules: palladian/importlibs, palladian/preact.

    API symbols

    -
    Component:
    diff --git a/palladian.nimble b/palladian.nimble index 082f07a..7c3a97a 100644 --- a/palladian.nimble +++ b/palladian.nimble @@ -12,6 +12,8 @@ skipFiles = @["server.nim"] requires "nim >= 1.6.10" +import std/os task docs, "generate nim api docs": + rmDir(getCurrentDir() / "docs") let cmd = "nim doc -b:js --project --index:on --outdir:docs src/palladian.nim" exec(cmd) From 10ce3429c0129eed9e86be0a6ca33367fba507cd Mon Sep 17 00:00:00 2001 From: itsumura-h Date: Tue, 21 Feb 2023 11:59:03 +0900 Subject: [PATCH 11/16] rename strformat to format --- examples/example/app.nim | 2 +- examples/example/components/code_block.nim | 9 ++-- examples/example/components/drawer.nim | 2 +- examples/example/components/header.nim | 2 +- examples/example/components/text_body.nim | 6 +-- examples/example/pages/api_access_page.nim | 2 +- examples/example/pages/controll_flow_page.nim | 2 +- examples/example/pages/signal_page.nim | 2 +- examples/example/pages/top_page.nim | 41 ++++++++++++++++--- examples/example/pages/use_effect_page.nim | 2 +- examples/example/pages/use_state_page.nim | 4 +- examples/preact/app.nim | 2 +- examples/preact/components/parent.nim | 2 +- examples/preact/pages/about.nim | 2 +- examples/preact/test_html.nim | 2 +- src/palladian.nim | 6 +++ src/palladian/controll_flow.nim | 4 +- src/palladian/{strformat.nim => format.nim} | 4 +- src/palladian/importlibs.nim | 6 +-- src/palladian/preact.nim | 4 ++ src/server.nim | 1 - 21 files changed, 74 insertions(+), 33 deletions(-) rename src/palladian/{strformat.nim => format.nim} (52%) diff --git a/examples/example/app.nim b/examples/example/app.nim index 7856b2f..d276652 100644 --- a/examples/example/app.nim +++ b/examples/example/app.nim @@ -1,6 +1,6 @@ import std/dom import ../../src/palladian -import ../../src/palladian/strformat +import ../../src/palladian/format import ../../src/palladian/router import ./components/header import ./components/drawer diff --git a/examples/example/components/code_block.nim b/examples/example/components/code_block.nim index fdff693..21bee19 100644 --- a/examples/example/components/code_block.nim +++ b/examples/example/components/code_block.nim @@ -2,15 +2,18 @@ import std/jsffi import std/dom import std/strutils import ../../../src/palladian -import ../../../src/palladian/strformat +import ../../../src/palladian/format import ../../../src/palladian/hooks import ../libs/highlight -proc CodeBlock(props:JsObject):Component {.exportc.} = +import std/jsconsole + + +proc CodeBlock(props:ComponentProps):Component {.exportc.} = let codeRef {.exportc.} = useRef() useLayoutEffect(proc() = - var code = $props.children.to(cstring) + var code = $props.children code = code.replace("\\", "").dedent() codeRef.current.textContent = code highlightAll() diff --git a/examples/example/components/drawer.nim b/examples/example/components/drawer.nim index 02d691f..3e34f15 100644 --- a/examples/example/components/drawer.nim +++ b/examples/example/components/drawer.nim @@ -1,5 +1,5 @@ import ../../../src/palladian -import ../../../src/palladian/strformat +import ../../../src/palladian/format proc Drawer*():Component {.exportc.} = diff --git a/examples/example/components/header.nim b/examples/example/components/header.nim index f80be33..25a8b3c 100644 --- a/examples/example/components/header.nim +++ b/examples/example/components/header.nim @@ -1,5 +1,5 @@ import ../../../src/palladian -import ../../../src/palladian/strformat +import ../../../src/palladian/format import ../../../src/palladian/router proc Header*():Component {.exportc.} = diff --git a/examples/example/components/text_body.nim b/examples/example/components/text_body.nim index 666b2d5..a0d0e9d 100644 --- a/examples/example/components/text_body.nim +++ b/examples/example/components/text_body.nim @@ -1,8 +1,8 @@ import std/jsffi import ../../../src/palladian -import ../../../src/palladian/strformat +import ../../../src/palladian/format -proc Hero*(props:JsObject):Component {.exportc.} = +proc Hero*(props:ComponentProps):Component {.exportc.} = let props {.exportc.} = props return html(fmt"""
    @@ -14,7 +14,7 @@ proc Hero*(props:JsObject):Component {.exportc.} =
    """) -proc Article*(props:JsObject):Component {.exportc.} = +proc Article*(props:ComponentProps):Component {.exportc.} = let props {.exportc.} = props return html(fmt""" -
    +
    ${props.children} diff --git a/examples/example/index.html b/examples/example/index.html index e043047..6622998 100644 --- a/examples/example/index.html +++ b/examples/example/index.html @@ -2,9 +2,12 @@ - + + + + Nim Palladian diff --git a/examples/example/pages/top_page.nim b/examples/example/pages/top_page.nim index 1c7a349..d63908f 100644 --- a/examples/example/pages/top_page.nim +++ b/examples/example/pages/top_page.nim @@ -12,7 +12,7 @@ proc Title(props:ComponentProps):Component {.exportc.} = let name {.exportc.} = props.children return html(fmt""" -

    ${name}

    +

    ${name}

    """) proc Counter():Component {.exportc.} = @@ -37,7 +37,7 @@ proc TopPage*():Component {.exportc.} = let name {.exportc.} = props.children return html(fmt\"\"" -

    ${name}

    +

    ${name}

    \"\"") proc Counter():Component {.exportc.} = @@ -64,27 +64,17 @@ proc TopPage*():Component {.exportc.} = return html(fmt"""
    <${Hero}> -

    Nim Palladian

    -

    Palladian is a Nim front-end framework for SPA based on and wrapped around Preact.

    - - <${Article}> -

    Why Preact?

    -

    - In creating a front-end framework made by Nim, we needed something that did not require a NodeJS environment - and did not require transpiling using Babel or other software. - Preact can use all of its features with a CDN call, and has a very compact library size of 3KB. -

    -

    - Furthermore, unlike React, Preact can use the browser standard API for DOM manipulation. -

    +

    Nim Palladian🏛️

    +

    Palladian is a Nim front-end framework for SPA based on and wrapped around Preact.

    <${Article}>

    Features

      -
    • Easy syntax by Nim
      • -
    • Extensive assets by JavScript
      • -
    • The evolution of CDN that allow development without NodeJS
      • -
    • Resolving library dependencies by esm.sh
      • +
    • Easy syntax thanks to Nim.
      • +
    • Extensive assets by JavScript.
      • +
    • Static typing and compile-time checks for JavaScript thanks to Nim make it a type-safe development experience and easier to understand type mismatch than TypeScript.
      • +
    • The evolution of CDN that allow development without NodeJS.
      • +
    • Resolving library dependencies thanks to esm.sh without NodeJS and package.json.
    <${CodeBlock}> @@ -92,6 +82,17 @@ proc TopPage*():Component {.exportc.} = <${Counter} /> + <${Article}> +

    Why using Preact?

    +

    + In creating a front-end framework made by Nim, we needed something that did not require a NodeJS environment + and did not require transpiling using Babel or other software. + Preact can use all of its features with a CDN call, and has a very compact library size of 3KB. +

    +

    + Furthermore, unlike React, Preact can use the browser standard API for DOM manipulation. +

    +

    diff --git a/src/palladian/preact.nim b/src/palladian/preact.nim index d81e58d..83fdf53 100644 --- a/src/palladian/preact.nim +++ b/src/palladian/preact.nim @@ -18,5 +18,5 @@ function renderApp(component, dom){ proc renderApp*(component: proc():Component, dom: Element) {.importjs: "renderApp(#, #)".} -type ComponentProps* = object of JsObject - children*:cstring +type ComponentProps* = JsObject +proc children*(self:ComponentProps):cstring {.importjs:"#.children".} From 29cb92bad7e33c368df4fff6b33218771c29f4bf Mon Sep 17 00:00:00 2001 From: itsumura-h Date: Thu, 23 Feb 2023 11:56:57 +0900 Subject: [PATCH 16/16] update docs --- docs/palladian.html | 4 ++-- docs/palladian/cli/functions/build_impl.html | 2 +- docs/palladian/cli/functions/dev_impl.html | 2 +- docs/palladian/cli/functions/serve_impl.html | 4 ++-- docs/{ => palladian/cli}/server.html | 12 +++++----- docs/palladian/cli/server.idx | 2 ++ docs/palladian/controll_flow.html | 2 +- docs/palladian/format.html | 2 +- docs/palladian/hooks.html | 2 +- docs/palladian/importlibs.html | 2 +- docs/palladian/preact.html | 25 ++++++++++++++------ docs/palladian/preact.idx | 1 + docs/palladian/router.html | 2 +- docs/server.idx | 2 -- docs/theindex.html | 12 ++++++---- 15 files changed, 46 insertions(+), 30 deletions(-) rename docs/{ => palladian/cli}/server.html (96%) create mode 100644 docs/palladian/cli/server.idx delete mode 100644 docs/server.idx diff --git a/docs/palladian.html b/docs/palladian.html index 2c1dcc8..ba38af7 100644 --- a/docs/palladian.html +++ b/docs/palladian.html @@ -127,7 +127,7 @@

    Imports

    @@ -137,7 +137,7 @@

    Exports


    - Made with Nim. Generated: 2023-02-21 04:39:56 UTC + Made with Nim. Generated: 2023-02-23 02:56:40 UTC
    diff --git a/docs/palladian/cli/functions/build_impl.html b/docs/palladian/cli/functions/build_impl.html index 34c36c3..c564f25 100644 --- a/docs/palladian/cli/functions/build_impl.html +++ b/docs/palladian/cli/functions/build_impl.html @@ -140,7 +140,7 @@

    Procs


    - Made with Nim. Generated: 2023-02-21 04:39:55 UTC + Made with Nim. Generated: 2023-02-23 02:56:40 UTC
    diff --git a/docs/palladian/cli/functions/dev_impl.html b/docs/palladian/cli/functions/dev_impl.html index 5a825ac..fa60b5b 100644 --- a/docs/palladian/cli/functions/dev_impl.html +++ b/docs/palladian/cli/functions/dev_impl.html @@ -141,7 +141,7 @@

    Procs


    - Made with Nim. Generated: 2023-02-21 04:39:54 UTC + Made with Nim. Generated: 2023-02-23 02:56:37 UTC
    diff --git a/docs/palladian/cli/functions/serve_impl.html b/docs/palladian/cli/functions/serve_impl.html index 9c206d4..fcd6c37 100644 --- a/docs/palladian/cli/functions/serve_impl.html +++ b/docs/palladian/cli/functions/serve_impl.html @@ -127,7 +127,7 @@

    src/palladian/cli/functions/serve_impl

    Procs

    @@ -151,7 +151,7 @@

    Procs


    - Made with Nim. Generated: 2023-02-21 04:39:55 UTC + Made with Nim. Generated: 2023-02-23 02:56:40 UTC
    diff --git a/docs/server.html b/docs/palladian/cli/server.html similarity index 96% rename from docs/server.html rename to docs/palladian/cli/server.html index 75bc4a7..3b118ec 100644 --- a/docs/server.html +++ b/docs/palladian/cli/server.html @@ -17,10 +17,10 @@ -src/server - +src/palladian/cli/server + - +