Add front for the article preview
This commit is contained in:
parent
21a85b4501
commit
e9b8916fa6
examples/document
data/loremIpsum
src/jvmMain/kotlin
snark-ktor/src/jvmMain/kotlin/space/kscience/snark/ktor
248
examples/document/data/loremIpsum/assets/css/main.css
Normal file
248
examples/document/data/loremIpsum/assets/css/main.css
Normal file
@ -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
|
||||
}
|
||||
|
||||
|
||||
|
||||
@ -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)}
|
||||
```
|
||||
```
|
||||
|
||||
|
Before 
(image error) Size: 5.0 KiB After 
(image error) Size: 5.0 KiB
|
@ -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"
|
||||
}
|
||||
}
|
||||
)
|
||||
}
|
||||
|
||||
@ -43,7 +43,7 @@ fun Application.snarkApplication(contextBuilder: ContextBuilder.() -> Unit = {},
|
||||
}
|
||||
|
||||
routing {
|
||||
staticResources("/css","css")
|
||||
staticResources("/", "assets")
|
||||
site(context, siteData, content = site)
|
||||
}
|
||||
}
|
||||
@ -170,6 +170,9 @@ internal class KtorSiteContext(
|
||||
|
||||
}
|
||||
|
||||
/*
|
||||
* TODO
|
||||
* */
|
||||
public fun Route.site(
|
||||
context: Context,
|
||||
data: DataTree<*>?,
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user