From e9b8916fa6c0de44bd92450b9d4c26d6f402676c Mon Sep 17 00:00:00 2001 From: Serhii Terentiev Date: Wed, 22 May 2024 13:43:30 +0300 Subject: [PATCH] Add front for the article preview --- .../data/loremIpsum/assets/css/main.css | 248 ++++++++++++++++++ examples/document/data/loremIpsum/chapter2.md | 10 +- .../data/loremIpsum/{ => images}/SPC-logo.png | Bin examples/document/src/jvmMain/kotlin/main.kt | 10 + .../src/jvmMain/kotlin/snarkApplication.kt | 2 +- .../kscience/snark/ktor/KtorSiteContext.kt | 3 + 6 files changed, 271 insertions(+), 2 deletions(-) create mode 100644 examples/document/data/loremIpsum/assets/css/main.css rename examples/document/data/loremIpsum/{ => images}/SPC-logo.png (100%) diff --git a/examples/document/data/loremIpsum/assets/css/main.css b/examples/document/data/loremIpsum/assets/css/main.css new file mode 100644 index 0000000..d5644e4 --- /dev/null +++ b/examples/document/data/loremIpsum/assets/css/main.css @@ -0,0 +1,248 @@ +@import https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,700,700i%7CRoboto+Mono:400,400i,700,700i&display=fallback + +*, *:before, *:after { + box-sizing: inherit +} + +* { + max-height: 1000000px +} + +body { + color: #19191C; + background: #fff; + font-family: "Arial", "Helvetica Neue", "Helvetica", sans-serif; + min-width: 320px; + font-size: 16px; + line-height: 1.5 +} + +.snark-image, .snark-figure-caption { + max-width: 100%; + display: block; + margin-left: auto; + margin-right: auto; + width: 50%; +} + + +h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6, .h { + font-family: "Arial", "Helvetica Neue", "Helvetica", sans-serif; + font-weight: 530; + margin: 0 0 0.5em; + color: #19191C +} + +h1, .h1 { + font-size: 35px +} + +h2, .h2 { + font-size: 28px +} + +h3, .h3 { + font-size: 20px +} + +h4, .h4 { + font-size: 17px +} + +h5, .h5 { + font-size: 14px +} + +h6, .h6 { + font-size: 16px +} + +p { + margin: 0 0 1em +} + +a { + color: #19191C +} + +.snark-main { + flex-grow: 1 + +} + +.snark-main__inner { + display: flex; + height: 100%; + margin-top: 11.5rem +} + +.snark-grid { + margin-left: auto; + margin-right: auto; + max-width: 80rem +} + +.snark-nav__item { + pointer-events: none +} + +.snark-sidebar { + align-self: flex-start; + flex-shrink: 0; + padding: 1.2rem 0; + position: sticky; + top: 2.4rem; + width: 12.1rem +} + +@media print { + .snark-sidebar { + display: none + } +} + +@media screen and (max-width: 76.234375em) { + [dir=ltr] .snark-sidebar--primary { + left:-12.1rem + } + + [dir=rtl] .snark-sidebar--primary { + right: -12.1rem + } + + .snark-sidebar--primary { + background-color: #fff; + display: block; + height: 100%; + position: fixed; + top: 0; + transform: translateX(0); + transition: transform .25s cubic-bezier(.4,0,.2,1),box-shadow .25s; + width: 12.1rem; + z-index: 5 + } + + .snark-sidebar--primary .snark-sidebar__scrollwrap { + bottom: 0; + left: 0; + margin: 0; + overflow: hidden; + position: absolute; + right: 0; + scroll-snap-type: none; + top: 0 + } +} + +@media screen and (min-width: 76.25em) { + .snark-sidebar { + height:0 + } + + .snark-header--lifted~.snark-container .snark-sidebar { + top: 4.8rem + } +} + +.snark-sidebar--secondary { + display: none; + order: 2 +} + +@media screen and (min-width: 60em) { + .snark-sidebar--secondary { + height:0 + } + + .no-js .snark-sidebar--secondary { + height: auto + } + + .snark-sidebar--secondary:not([hidden]) { + display: block + } + + .snark-sidebar--secondary .snark-sidebar__scrollwrap { + touch-action: pan-y + } +} + +.snark-sidebar__scrollwrap { + scrollbar-gutter: stable; + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + margin: 0 .2rem; + overflow-y: auto; + scrollbar-color: #19191C; + scrollbar-width: thin +} + +.snark-sidebar__scrollwrap::-webkit-scrollbar { + height: .2rem; + width: .2rem +} + +.snark-sidebar__scrollwrap:focus-within,.snark-sidebar__scrollwrap:hover { + scrollbar-color: #19191C +} + +.snark-sidebar__scrollwrap:focus-within::-webkit-scrollbar-thumb,.snark-sidebar__scrollwrap:hover::-webkit-scrollbar-thumb { + background-color: #fff +} + +.snark-sidebar__scrollwrap:focus-within::-webkit-scrollbar-thumb:hover,.snark-sidebar__scrollwrap:hover::-webkit-scrollbar-thumb:hover { + background-color: #fff +} + + +.snark-content { + flex-grow: 1; + min-width: 0; + margin: 0 .8rem 1.2rem; + padding-top: .6rem; + +} + +.snark-content p { + display: block; + margin-block-start: 1em; + margin-block-end: 1em; + margin-inline-start: 0px; + margin-inline-end: 0px; + unicode-bidi: isolate; + background-color: #F2F3F7; + padding: 10px; + padding-right: 5px; + border-radius: 15px; +} + +.snark-nav__list { + list-style: none; + margin: 0; + padding: 0 +} + +.snark-nav__title { + color: #19191C; + display: block; + font-weight: 700; + overflow: hidden; + padding: 0 .6rem; + text-overflow: ellipsis +} + +.snark-ellipsis { + overflow: hidden; + text-overflow: ellipsis +} + +.snark-nav__link .snark-ellipsis { + position: relative +} + +.snark-nav__link .snark-ellipsis code { + word-break: normal +} + + + diff --git a/examples/document/data/loremIpsum/chapter2.md b/examples/document/data/loremIpsum/chapter2.md index 49b6057..b61c87d 100644 --- a/examples/document/data/loremIpsum/chapter2.md +++ b/examples/document/data/loremIpsum/chapter2.md @@ -14,9 +14,17 @@ Cras finibus vel leo id mattis. Nulla tellus augue, bibendum in ipsum vitae, ali Quisque ut ultricies nisi, eget vehicula ipsum. Quisque tortor mauris, sagittis vitae consectetur in, fermentum quis dui. Maecenas nec risus eu ipsum eleifend ornare. Nam tempus interdum mi, eget tincidunt enim interdum et. Nam a ultricies libero. Cras vehicula, quam a egestas semper, ipsum est cursus nunc, ac mollis est velit at enim. Sed nec nibh ut leo fermentum interdum. Donec aliquam elementum metus, non fermentum eros bibendum eu. Suspendisse ut odio vel dolor blandit condimentum. Vivamus malesuada accumsan magna, a suscipit tellus vehicula ut. Duis et orci arcu. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; +### Section ${section(3)} + +Maecenas at iaculis ipsum. Praesent maximus tristique magna eu faucibus. In tincidunt elementum pharetra. Nam scelerisque eros mattis, suscipit odio sit amet, efficitur mi. Etiam eleifend pulvinar erat a aliquet. Cras pellentesque tincidunt mi eget scelerisque. Proin eget ipsum a velit lobortis commodo. Nulla facilisi. Donec id pretium leo. Ut nec tortor sapien. Praesent vehicula dolor ut laoreet commodo. Pellentesque convallis, sapien et placerat luctus, tortor magna sodales sem, non tristique eros sem vel ipsum. Nulla vulputate accumsan nulla. Duis tempor, mi nec pharetra suscipit, sem odio sagittis mi, ut dignissim odio erat a dolor. + +### Section ${section(3)} + +In a quam nec turpis venenatis vehicula at ut lorem. Vestibulum tincidunt at velit laoreet sodales. Fusce fermentum enim sed lacinia fringilla. Nam et augue vitae felis sagittis consectetur in eget mauris. Fusce eget auctor turpis. Quisque at tristique nibh, id fringilla arcu. Cras sed finibus sapien. + ```snark type: image path: myImage.png caption: Whatever index: ${label(image)} -``` \ No newline at end of file +``` diff --git a/examples/document/data/loremIpsum/SPC-logo.png b/examples/document/data/loremIpsum/images/SPC-logo.png similarity index 100% rename from examples/document/data/loremIpsum/SPC-logo.png rename to examples/document/data/loremIpsum/images/SPC-logo.png diff --git a/examples/document/src/jvmMain/kotlin/main.kt b/examples/document/src/jvmMain/kotlin/main.kt index b6c01cd..7fefd0f 100644 --- a/examples/document/src/jvmMain/kotlin/main.kt +++ b/examples/document/src/jvmMain/kotlin/main.kt @@ -5,6 +5,7 @@ import kotlinx.html.ScriptCrossorigin import kotlinx.html.link import kotlinx.html.script import space.kscience.snark.html.document.allDocuments +import space.kscience.snark.html.* @Suppress("unused") fun Application.renderAllDocuments() = snarkApplication { @@ -29,6 +30,15 @@ fun Application.renderAllDocuments() = snarkApplication { crossorigin = ScriptCrossorigin.anonymous attributes["onload"] = "renderMathInElement(document.body);" } + link { + rel = "stylesheet" + type = "text/css" + href = "main.css" + } + link { + rel = "stylesheet" + href = "https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,700,700i%7CRoboto+Mono:400,400i,700,700i&display=fallback" + } } ) } diff --git a/examples/document/src/jvmMain/kotlin/snarkApplication.kt b/examples/document/src/jvmMain/kotlin/snarkApplication.kt index dc0f55d..5c0c20d 100644 --- a/examples/document/src/jvmMain/kotlin/snarkApplication.kt +++ b/examples/document/src/jvmMain/kotlin/snarkApplication.kt @@ -43,7 +43,7 @@ fun Application.snarkApplication(contextBuilder: ContextBuilder.() -> Unit = {}, } routing { - staticResources("/css","css") + staticResources("/", "assets") site(context, siteData, content = site) } } \ No newline at end of file diff --git a/snark-ktor/src/jvmMain/kotlin/space/kscience/snark/ktor/KtorSiteContext.kt b/snark-ktor/src/jvmMain/kotlin/space/kscience/snark/ktor/KtorSiteContext.kt index ddd697d..ab371e6 100644 --- a/snark-ktor/src/jvmMain/kotlin/space/kscience/snark/ktor/KtorSiteContext.kt +++ b/snark-ktor/src/jvmMain/kotlin/space/kscience/snark/ktor/KtorSiteContext.kt @@ -170,6 +170,9 @@ internal class KtorSiteContext( } +/* +* TODO +* */ public fun Route.site( context: Context, data: DataTree<*>?,