From 024dcd8744859ad08be42baa5c9df6a30c888db0 Mon Sep 17 00:00:00 2001 From: a Date: Mon, 19 Dec 2022 09:10:26 -0600 Subject: [PATCH] more shortcodes and layout cleanup --- assets/styles/common/base.scss | 5 +- assets/styles/common/colors.scss | 8 +++ assets/styles/common/content.scss | 3 +- assets/styles/components/breadcrumbs.scss | 14 +--- assets/styles/components/nav-section.scss | 5 +- assets/styles/layouts/responsive.scss | 26 ++++--- assets/styles/print.scss | 35 ++++++++-- assets/styles/screen.scss | 2 + assets/styles/shortcodes/ref.scss | 69 +++++++++++++++++++ .../required-optional-nullable.scss | 22 ++++++ i18n/en.toml | 8 +++ layouts/_default/baseof.html | 4 +- layouts/_default/single.html | 8 ++- layouts/partials/breadcrumbs.html | 2 + layouts/partials/nav-section.html | 23 ++++--- layouts/shortcodes/nullable.html | 1 + layouts/shortcodes/optional.html | 1 + layouts/shortcodes/page-ref.html | 28 +++++++- layouts/shortcodes/required.html | 1 + layouts/shortcodes/section-ref.html | 22 ++++++ layouts/shortcodes/source-ref.html | 16 +++++ 21 files changed, 256 insertions(+), 47 deletions(-) create mode 100644 assets/styles/shortcodes/ref.scss create mode 100644 assets/styles/shortcodes/required-optional-nullable.scss create mode 100644 i18n/en.toml create mode 100644 layouts/shortcodes/nullable.html create mode 100644 layouts/shortcodes/optional.html create mode 100644 layouts/shortcodes/required.html create mode 100644 layouts/shortcodes/section-ref.html create mode 100644 layouts/shortcodes/source-ref.html diff --git a/assets/styles/common/base.scss b/assets/styles/common/base.scss index 7877bc8..765bbf6 100644 --- a/assets/styles/common/base.scss +++ b/assets/styles/common/base.scss @@ -1,7 +1,9 @@ -$site-max-width: 100rem; +$site-max-width: 120rem; +$sidebar-width: 20rem; :root { --site-max-width: #{$site-max-width}; + --sidebar-width: #{$sidebar-width}; --color-crossfade-duration: 0.25s; --color-crossfade-ease: ease; @@ -10,6 +12,7 @@ $site-max-width: 100rem; html { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; scroll-behavior: smooth; + text-rendering: optimizeLegibility; } body { diff --git a/assets/styles/common/colors.scss b/assets/styles/common/colors.scss index 22e4b9e..7dd3b8d 100644 --- a/assets/styles/common/colors.scss +++ b/assets/styles/common/colors.scss @@ -13,6 +13,10 @@ --ui-overlay: #ddd; --ui-overlay-text: var(--ui-text); + + --ui-border: #ddd; + + --ui-error: hsl(0, 80%, 50%); } @mixin dark { @@ -30,6 +34,10 @@ --ui-overlay: #333; --ui-overlay-text: var(--ui-text); + + --ui-border: #ddd; + + --ui-error: hsl(0, 80%, 50%); } :root { diff --git a/assets/styles/common/content.scss b/assets/styles/common/content.scss index cc05d0b..a77aeae 100644 --- a/assets/styles/common/content.scss +++ b/assets/styles/common/content.scss @@ -86,7 +86,7 @@ ol {list-style: decimal; margin: 1em 0;} dl {margin: 1em 0; line-height: 1.4;} dt {font-weight: 700;} - dd {margin-left: 1em;} + dd {margin-left: 1em; margin-bottom: 1em;} /* block elements */ img { width: 100%; @@ -132,7 +132,6 @@ padding: 1em; } pre code { - background: inherit; padding: 0; } pre code > span { diff --git a/assets/styles/components/breadcrumbs.scss b/assets/styles/components/breadcrumbs.scss index ec446ae..b79379e 100644 --- a/assets/styles/components/breadcrumbs.scss +++ b/assets/styles/components/breadcrumbs.scss @@ -4,20 +4,12 @@ li { margin-bottom: 1rem; margin-right: 0.5rem; - } - li:not(:first-child) { margin-left: 1rem; a { margin-left: 0.5rem; } - } - li::marker { - content: "> "; - } - li:first-child::marker { - content: ""; - } - li:first-child { - margin-left: 0; + &::marker { + content: "» "; + } } } \ No newline at end of file diff --git a/assets/styles/components/nav-section.scss b/assets/styles/components/nav-section.scss index d686caa..2f6b00d 100644 --- a/assets/styles/components/nav-section.scss +++ b/assets/styles/components/nav-section.scss @@ -1,7 +1,7 @@ @import "common/mixins.scss"; .section-nav { - .container { + .buttons { display: grid; grid-gap: 1em; } @@ -38,11 +38,12 @@ font-size: 2em; } @media (min-width: 30rem) { - .container { + .buttons { grid-template-columns: 1fr 1fr; } .next { grid-column: 2; } } + margin-bottom: 2em; } \ No newline at end of file diff --git a/assets/styles/layouts/responsive.scss b/assets/styles/layouts/responsive.scss index b0e8e1f..6c3ce76 100644 --- a/assets/styles/layouts/responsive.scss +++ b/assets/styles/layouts/responsive.scss @@ -1,3 +1,16 @@ +.page > * > .container +{ + display: grid; + grid-template-columns: minmax(0, 1fr) minmax(0, 80ch) minmax(0, 1fr); + > * { + grid-column: 2; + } + > img, figure + { + grid-column: 1 / span 3; + } +} + /* [responsive] more room to breathe above mobile sizes */ @media (min-width: 30rem) { @@ -63,7 +76,7 @@ /* [responsive] move the toc to its own column */ -@media (min-width: 75rem) { +@media (min-width: 90rem) { body { grid-template-columns: auto 1fr; } @@ -128,20 +141,13 @@ } -@media (min-width: 80rem) { - .page { - display: grid; - grid-template-columns: 1fr 20rem; - } -} - /* [responsive] fixed layout after reaching maxwidth */ @media (min-width: $site-max-width) { body { - grid-template-columns: 1fr 20rem calc(var(--site-max-width) - 20rem) 1fr + grid-template-columns: 1fr var(--sidebar-width) calc(var(--site-max-width) - var(--sidebar-width)) 1fr } .docs-nav {grid-column: 2;} @@ -156,7 +162,7 @@ /* except now the page is fixed to maxwidth and the toc can "grow" */ .page { - grid-template-columns: calc(var(--site-max-width) - 40rem) 1fr; + grid-template-columns: 1fr var(--sidebar-width); } /* we don't actually want it to grow, though! just stick to the side */ diff --git a/assets/styles/print.scss b/assets/styles/print.scss index 530dfee..684930e 100644 --- a/assets/styles/print.scss +++ b/assets/styles/print.scss @@ -1,13 +1,17 @@ @import "common/reset"; -@import "common/colors"; +//@import "common/colors"; @import "common/base"; @import "common/content"; @import "components/site-header"; @import "components/breadcrumbs"; @import "components/table-of-contents"; + @import "features/headings"; + @import "shortcodes/hint"; +@import "shortcodes/ref"; +@import "shortcodes/required-optional-nullable"; @import "layouts/list"; @import "layouts/single"; @@ -19,9 +23,10 @@ .edit-link, .footnote-backref, .heading__anchor-link, -.section-nav +.section-nav, +.color-switcher { - display: none; + display: none !important; } .page-header {padding: 0;} @@ -31,4 +36,26 @@ a[href^="http"]:after { content: " (" attr(href) ") "; -} \ No newline at end of file +} + +a.page-ref[href^="http"]:after { + content: ""; +} + +a.source-ref[href^="http"]:after { + content: ""; +} + +.source-ref, .page-ref { + padding: 0; +} + +.content pre { + overflow: unset; + white-space: pre-wrap; +} + +.content pre code { + width: 100%; +} + diff --git a/assets/styles/screen.scss b/assets/styles/screen.scss index a50ca8f..17ca4d3 100644 --- a/assets/styles/screen.scss +++ b/assets/styles/screen.scss @@ -17,6 +17,8 @@ @import "features/links"; @import "shortcodes/hint"; +@import "shortcodes/ref"; +@import "shortcodes/required-optional-nullable"; @import "layouts/list"; @import "layouts/single"; diff --git a/assets/styles/shortcodes/ref.scss b/assets/styles/shortcodes/ref.scss new file mode 100644 index 0000000..152f948 --- /dev/null +++ b/assets/styles/shortcodes/ref.scss @@ -0,0 +1,69 @@ +.ref-link { + background: var(--ui-overlay); + color: var(--ui-overlay-text); + &:link, &:visited { + color: var(--ui-overlay-text); + } + &:hover { + background: var(--primary-accent); + color: var(--primary-accent-text); + } + transition: + background var(--color-crossfade-duration) var(--color-crossfade-ease), + color var(--color-crossfade-duration) var(--color-crossfade-ease); + display: grid; + align-items: center; + gap: 1em; + @media (min-width: 20rem) { + grid-template-columns: 3em 1fr; + } + margin: 1em 0; + padding: 1em; + border-radius: 6px; + text-decoration: none; + &__icon { + height: 3em; + width: 3em; + grid-column: 1; + background: var(--primary-accent); + color: var(--primary-accent-text); + display: grid; + place-items: center; + border-radius: 8px; + } + &__text { + grid-column: 2 / -1; + } + svg { + height: 1.5em; + width: 1.5em; + } +} + +.page-ref { + font-weight: 700; + &__title { + + } + &__section { + + } +} + +.source-ref { + word-break: break-all; + &__name { + font-weight: 700; + } + &__path { + margin-top: 8px; + display: block; + font-family: monospace; + } +} + +.section-ref { + &__title { + font-weight: 700; + } +} \ No newline at end of file diff --git a/assets/styles/shortcodes/required-optional-nullable.scss b/assets/styles/shortcodes/required-optional-nullable.scss new file mode 100644 index 0000000..cc50003 --- /dev/null +++ b/assets/styles/shortcodes/required-optional-nullable.scss @@ -0,0 +1,22 @@ +.api-method-parameter { + &-required { + text-transform: uppercase; + font-size: 0.75em; + font-weight: 500; + color: var(--ui-error, red); + } + + &-optional { + text-transform: uppercase; + font-size: 0.75em; + font-weight: 500; + color: var(--ui-text-muted); + } + + &-nullable { + text-transform: uppercase; + font-size: 0.75em; + font-weight: 500; + color: var(--ui-error, red); + } +} \ No newline at end of file diff --git a/i18n/en.toml b/i18n/en.toml new file mode 100644 index 0000000..e5e78fb --- /dev/null +++ b/i18n/en.toml @@ -0,0 +1,8 @@ +[required] +other = "required" + +[optional] +other = "optional" + +[nullable] +other = "nullable" \ No newline at end of file diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index 77dcaf3..1230015 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -17,7 +17,7 @@ {{- $theme := resources.Get "styles/screen.scss" | toCSS }} {{- with resources.Get "styles/custom.scss" }} {{- $custom := . | toCSS }} -{{- $screen := slice $theme $custom | resources.Concat "styles/screen.css" | minify | fingerprint }} +{{- $screen := slice $theme $custom | resources.Concat "assets/screen.css" | minify | fingerprint }} diff --git a/layouts/_default/single.html b/layouts/_default/single.html index 888f439..77bd736 100644 --- a/layouts/_default/single.html +++ b/layouts/_default/single.html @@ -3,7 +3,6 @@
- {{ partial "breadcrumbs.html" . }}

{{ .Title }}

{{.Page.Summary | plainify}}

@@ -16,8 +15,11 @@
diff --git a/layouts/partials/breadcrumbs.html b/layouts/partials/breadcrumbs.html index d64bd3a..9940193 100644 --- a/layouts/partials/breadcrumbs.html +++ b/layouts/partials/breadcrumbs.html @@ -8,7 +8,9 @@ {{ else if not .p1.IsHome }} {{ template "breadcrumb" (dict "p1" .p1.Site.Home "p2" .p2 ) }} {{ end }} + {{ if not .p1.IsHome }} {{ .p1.Title }} + {{ end }} {{ end }} \ No newline at end of file diff --git a/layouts/partials/nav-section.html b/layouts/partials/nav-section.html index 1d78900..dcf3d6a 100644 --- a/layouts/partials/nav-section.html +++ b/layouts/partials/nav-section.html @@ -1,15 +1,16 @@ diff --git a/layouts/shortcodes/nullable.html b/layouts/shortcodes/nullable.html new file mode 100644 index 0000000..d4fe3f3 --- /dev/null +++ b/layouts/shortcodes/nullable.html @@ -0,0 +1 @@ +{{ i18n "nullable" }} \ No newline at end of file diff --git a/layouts/shortcodes/optional.html b/layouts/shortcodes/optional.html new file mode 100644 index 0000000..5fbbf7b --- /dev/null +++ b/layouts/shortcodes/optional.html @@ -0,0 +1 @@ +{{ i18n "optional" }} \ No newline at end of file diff --git a/layouts/shortcodes/page-ref.html b/layouts/shortcodes/page-ref.html index 797f6a1..9ef114c 100644 --- a/layouts/shortcodes/page-ref.html +++ b/layouts/shortcodes/page-ref.html @@ -1 +1,27 @@ - \ No newline at end of file +{{- $ref := relref . (.Get "ref") }} +{{- $path := (index (split (.Get "ref") "#") 0) }} +{{- $anchor := (index (split (.Get "ref") "#") 1)}} +{{- $page := .Site.GetPage $path -}} +{{- $pattern := printf `.*?\n#{2,6} (.+) \{#%s\}.*?` $anchor }} +{{- $title := $page.RawContent}} +{{- $heading := index (findRE $pattern $title 1) 0 }} +{{- $heading = replaceRE $pattern "$1" $heading }} +{{- with $page -}} + +
+ + + +
+
+ +{{- .Title }} + +{{- with $heading -}} + +
§ {{$heading -}} + +{{ end -}} +
+ +{{- end -}} \ No newline at end of file diff --git a/layouts/shortcodes/required.html b/layouts/shortcodes/required.html new file mode 100644 index 0000000..b051581 --- /dev/null +++ b/layouts/shortcodes/required.html @@ -0,0 +1 @@ +{{ i18n "required" }} \ No newline at end of file diff --git a/layouts/shortcodes/section-ref.html b/layouts/shortcodes/section-ref.html new file mode 100644 index 0000000..4b2b782 --- /dev/null +++ b/layouts/shortcodes/section-ref.html @@ -0,0 +1,22 @@ +{{- $ref := relref . (.Get "ref") }} +{{- $path := (index (split (.Get "ref") "#") 0) }} +{{- $anchor := (index (split (.Get "ref") "#") 1)}} +{{- $page := .Site.GetPage $path -}} +{{- with $page -}} + +
+{{ if $.Get "icon" }} +{{ $.Get "icon" | safeHTML }} +{{ else }} + + + +{{ end }} +
+
+ +{{- or ($.Get "title") .Title }} + +
+ +{{- end -}} \ No newline at end of file diff --git a/layouts/shortcodes/source-ref.html b/layouts/shortcodes/source-ref.html new file mode 100644 index 0000000..36a0355 --- /dev/null +++ b/layouts/shortcodes/source-ref.html @@ -0,0 +1,16 @@ +{{- with .Get "url" -}} +{{ $filename := replaceRE `.*/blob/.+/(.*)` "$1" . }} +{{ $path := replaceRE `.*/blob/.*?/(.*)` "$1" . }} + +
+ + + +
+
+{{- or ($.Get "name") $filename }} +
+{{ $path }} +
+ +{{- end -}} \ No newline at end of file