From 14375c5289e84690cacd0ec9b511cefef088f0a5 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Sat, 2 Jan 2021 16:47:15 +0100 Subject: Use Pygments for syntax highlighting, design adjustments, preload fonts --- assets/css/_basics.scss | 4 +-- assets/css/components/_page-header.scss | 5 ++++ assets/css/components/_page.scss | 7 ++++- assets/css/scopes/_code.scss | 22 ++++++++++++++++ assets/css/style.scss | 1 + content/blog/test2/_index.md | 13 ---------- content/blog/test2/index.md | 13 ++++++++++ content/index.md | 15 +++++++++++ filters/common_actions.lua | 45 +++++++++++++++++++++++++++++++++ filters/element_classes.lua | 15 ----------- filters/macros.lua | 23 ----------------- scripts/build_content.sh | 6 ++++- templates/base.html | 9 +++++++ templates/partials/pageHeader.html | 2 +- templates/partials/pageHeaderSm.html | 2 +- 15 files changed, 125 insertions(+), 57 deletions(-) create mode 100644 assets/css/scopes/_code.scss delete mode 100644 content/blog/test2/_index.md create mode 100644 content/blog/test2/index.md create mode 100644 filters/common_actions.lua delete mode 100644 filters/element_classes.lua delete mode 100644 filters/macros.lua diff --git a/assets/css/_basics.scss b/assets/css/_basics.scss index 0b785d5..05d2974 100644 --- a/assets/css/_basics.scss +++ b/assets/css/_basics.scss @@ -44,8 +44,8 @@ code { } pre { - margin: 0; - overflow: hidden; + margin: ($line-height * 1em) 0 0; + overflow-x: auto; color: var(--code-block--fg); font-size: $code-block--font-size; line-height: $code-block--line-height; diff --git a/assets/css/components/_page-header.scss b/assets/css/components/_page-header.scss index 7cf2aa1..e97aaf7 100644 --- a/assets/css/components/_page-header.scss +++ b/assets/css/components/_page-header.scss @@ -18,6 +18,11 @@ line-height: $code-block--line-height; } + &__pre { + margin-top: 0; + overflow: hidden; + } + @media (max-width: map-get($breakpoints, 'sm')) { margin-left: 0; padding-left: 0; diff --git a/assets/css/components/_page.scss b/assets/css/components/_page.scss index 21969d7..c9a4650 100644 --- a/assets/css/components/_page.scss +++ b/assets/css/components/_page.scss @@ -7,6 +7,11 @@ } } + &__code { + padding-left: calc(#{$subcontent--indent} - 2px); + border-left: 2px solid var(--obj); + } + &__prefixed { position: relative; margin-left: -1 * $page--item-prefix--width; @@ -44,9 +49,9 @@ &--pre { $scale-factor: $font-size / $code-block--font-size; - margin-top: $line-height * 1em; // margin-left: calc(#{-1 * $page--item-prefix--width} * #{$scale-factor}); // padding-left: calc(#{$page--item-prefix--width} * #{$scale-factor}); + border-left: 0; &::before { content: str-repeat('``\A', 40); diff --git a/assets/css/scopes/_code.scss b/assets/css/scopes/_code.scss new file mode 100644 index 0000000..cdc9425 --- /dev/null +++ b/assets/css/scopes/_code.scss @@ -0,0 +1,22 @@ +.s-code { + pre { + overflow-x: auto; + color: var(--fg-lo); + font-size: 1em; + line-height: $line-height; + } + + .c { + color: var(--fg-hi); + } + + .nt, + .kt, + .k, + .kr, + .o, + .si, + .p { + color: var(--fg); + } +} diff --git a/assets/css/style.scss b/assets/css/style.scss index 7986bd9..e89cbd6 100644 --- a/assets/css/style.scss +++ b/assets/css/style.scss @@ -10,6 +10,7 @@ @import 'layouts/container'; +@import 'scopes/code'; @import 'scopes/page'; @import 'utils'; diff --git a/content/blog/test2/_index.md b/content/blog/test2/_index.md deleted file mode 100644 index 9d1ebd2..0000000 --- a/content/blog/test2/_index.md +++ /dev/null @@ -1,13 +0,0 @@ ---- -date: 2020-12-21 -title: Test Page 2 -category: per ---- - -# Test Page 2 - -``` - - /----\ -- | | - - \----/ -``` diff --git a/content/blog/test2/index.md b/content/blog/test2/index.md new file mode 100644 index 0000000..9d1ebd2 --- /dev/null +++ b/content/blog/test2/index.md @@ -0,0 +1,13 @@ +--- +date: 2020-12-21 +title: Test Page 2 +category: per +--- + +# Test Page 2 + +``` + - /----\ +- | | + - \----/ +``` diff --git a/content/index.md b/content/index.md index 8c49e44..3d2462c 100644 --- a/content/index.md +++ b/content/index.md @@ -12,6 +12,21 @@ Welcome to my website! I'm Volpeon and here's an [inline link](#c). Welcome to my website! I'm Volpeon and here's an [inline link](#d). +```lua +function Header(el) + if el.level == 1 then + el.classes = el.classes .. {'c-page__prefixed', 'c-page__prefixed--h1'} + elseif el.level == 2 then + el.classes = el.classes .. {'c-page__prefixed', 'c-page__prefixed--h2'} + elseif el.level == 3 then + el.classes = el.classes .. {'c-page__prefixed', 'c-page__prefixed--h3'} + end + return el +end +``` + +Welcome to my website! I'm Volpeon and here's an [inline link](#e). + ## Subtitle ### Last one diff --git a/filters/common_actions.lua b/filters/common_actions.lua new file mode 100644 index 0000000..1d13e3a --- /dev/null +++ b/filters/common_actions.lua @@ -0,0 +1,45 @@ +function CodeBlock(el) + if next(el.classes) == nil then + el.classes = el.classes .. {'c-page__prefixed', 'c-page__prefixed--pre'} + else + local formatted = pandoc.pipe('pygmentize', {'-l', el.classes[1], '-f', 'html', '-O', 'cssclass=c-page__code s-code'}, el.text) + el = pandoc.RawBlock('html', formatted) + end + + return el +end + +function Header(el) + if el.level == 1 then + el.classes = el.classes .. {'c-page__prefixed', 'c-page__prefixed--h1'} + elseif el.level == 2 then + el.classes = el.classes .. {'c-page__prefixed', 'c-page__prefixed--h2'} + elseif el.level == 3 then + el.classes = el.classes .. {'c-page__prefixed', 'c-page__prefixed--h3'} + end + return el +end + +function Div(el) + if el.attributes.macro == nil then + return el + end + + if el.attributes.macro == 'refs' and el.content[1].tag == 'BulletList' then + local newchildren = pandoc.List() + + newchildren:insert(pandoc.RawBlock('html', '')) + + el.content = newchildren + end + + return el.content +end diff --git a/filters/element_classes.lua b/filters/element_classes.lua deleted file mode 100644 index 643ff75..0000000 --- a/filters/element_classes.lua +++ /dev/null @@ -1,15 +0,0 @@ -function CodeBlock(el) - el.attributes.class = 'c-page__prefixed c-page__prefixed--pre' - return el -end - -function Header(el) - if el.level == 1 then - el.attributes.class = 'c-page__prefixed c-page__prefixed--h1' - elseif el.level == 2 then - el.attributes.class = 'c-page__prefixed c-page__prefixed--h2' - elseif el.level == 3 then - el.attributes.class = 'c-page__prefixed c-page__prefixed--h3' - end - return el -end diff --git a/filters/macros.lua b/filters/macros.lua deleted file mode 100644 index 86e94ba..0000000 --- a/filters/macros.lua +++ /dev/null @@ -1,23 +0,0 @@ -function Div(el) - if el.attributes.macro == nil then - return el - end - - if el.attributes.macro == 'refs' and el.content[1].tag == 'BulletList' then - local newchildren = pandoc.List() - - newchildren:insert(pandoc.RawBlock('html', '')) - - el.content = newchildren - end - - return el.content -end diff --git a/scripts/build_content.sh b/scripts/build_content.sh index fcabf9f..c640b12 100755 --- a/scripts/build_content.sh +++ b/scripts/build_content.sh @@ -54,13 +54,15 @@ get_metadata() { pandoc "$1" \ -f markdown \ -t plain \ + --no-highlight \ --template scripts/metadata_tpl.json } get_content() { pandoc "$1" \ -f markdown \ - -t plain + -t plain \ + --no-highlight } get_section() { @@ -251,6 +253,7 @@ handle () { pandoc "$1" \ -f markdown \ -t html5 \ + --no-highlight \ --template "${TEMPLATES_DIR}feed.xml" \ -o "${target_file%.html}.xml" \ --metadata-file metadata/metadata.yaml \ @@ -263,6 +266,7 @@ handle () { pandoc "$1" \ -f markdown \ -t html5 \ + --no-highlight \ --template "${TEMPLATES_DIR}base.html" \ -o "$target_file" \ --metadata-file metadata/metadata.yaml \ diff --git a/templates/base.html b/templates/base.html index 225ef3f..18d65c8 100644 --- a/templates/base.html +++ b/templates/base.html @@ -5,7 +5,9 @@ + + $for(author)$ $endfor$ @@ -15,10 +17,17 @@ $if(keywords)$ $endif$ + $for(feeds)$ $endfor$ + $if(is_home)$$else$$title$ – $endif$$site.title$ + + + + + $if(section.id)$