From 638e3d74572420e9dee79356caa0438031af5826 Mon Sep 17 00:00:00 2001 From: Anirudh Sudhir Date: Mon, 22 Apr 2024 22:45:15 +0530 Subject: [PATCH] feat: add goldmark extensions (table of contents, mermaid, anchor, figure) Co-authored-by: Aditya Hegde --- go.mod | 4 + go.sum | 32 + pkg/parser/parser.go | 48 +- site/content/docs-update.md | 16 + site/content/posts/building-anna/index.md | 11 +- site/content/posts/test.md | 31 + site/static/styles/default.css | 760 +++++++++++---------- test/parser/parse_md/html_got_output.html | 99 ++- test/parser/parse_md/html_want_output.html | 99 ++- 9 files changed, 682 insertions(+), 418 deletions(-) create mode 100644 site/content/docs-update.md create mode 100644 site/content/posts/test.md diff --git a/go.mod b/go.mod index ea939a8..3fbc6bf 100644 --- a/go.mod +++ b/go.mod @@ -5,8 +5,12 @@ go 1.22.2 require ( github.com/PuerkitoBio/goquery v1.9.1 github.com/cheggaaa/pb/v3 v3.1.5 + github.com/mangoumbrella/goldmark-figure v1.0.0 github.com/spf13/cobra v1.8.0 github.com/yuin/goldmark v1.7.1 + go.abhg.dev/goldmark/anchor v0.1.1 + go.abhg.dev/goldmark/mermaid v0.5.0 + go.abhg.dev/goldmark/toc v0.10.0 gopkg.in/yaml.v3 v3.0.1 ) diff --git a/go.sum b/go.sum index 6aceecd..5ada711 100644 --- a/go.sum +++ b/go.sum @@ -6,12 +6,28 @@ github.com/andybalholm/cascadia v1.3.2 h1:3Xi6Dw5lHF15JtdcmAHD3i1+T8plmv7BQ/nsVi github.com/andybalholm/cascadia v1.3.2/go.mod h1:7gtRlve5FxPPgIgX36uWBX58OdBsSS6lUvCFb+h7KvU= github.com/cheggaaa/pb/v3 v3.1.5 h1:QuuUzeM2WsAqG2gMqtzaWithDJv0i+i6UlnwSCI4QLk= github.com/cheggaaa/pb/v3 v3.1.5/go.mod h1:CrxkeghYTXi1lQBEI7jSn+3svI3cuc19haAj6jM60XI= +github.com/chromedp/cdproto v0.0.0-20230220211738-2b1ec77315c9 h1:wMSvdj3BswqfQOXp2R1bJOAE7xIQLt2dlMQDMf836VY= +github.com/chromedp/cdproto v0.0.0-20230220211738-2b1ec77315c9/go.mod h1:GKljq0VrfU4D5yc+2qA6OVr8pmO/MBbPEWqWQ/oqGEs= +github.com/chromedp/chromedp v0.9.1 h1:CC7cC5p1BeLiiS2gfNNPwp3OaUxtRMBjfiw3E3k6dFA= +github.com/chromedp/chromedp v0.9.1/go.mod h1:DUgZWRvYoEfgi66CgZ/9Yv+psgi+Sksy5DTScENWjaQ= +github.com/chromedp/sysutil v1.0.0 h1:+ZxhTpfpZlmchB58ih/LBHX52ky7w2VhQVKQMucy3Ic= +github.com/chromedp/sysutil v1.0.0/go.mod h1:kgWmDdq8fTzXYcKIBqIYvRRTnYb9aNS9moAV0xufSww= github.com/cpuguy83/go-md2man/v2 v2.0.3/go.mod h1:tgQtvFlXSQOSOSIRvRPT7W67SCa46tRHOmNcaadrF8o= github.com/creack/pty v1.1.9/go.mod h1:oKZEueFk5CKHvIhNR5MUki03XCEU+Q6VDXinZuGJ33E= +github.com/davecgh/go-spew v1.1.1 h1:vj9j/u1bqnvCEfJOwUhtlOARqs3+rkHYY13jYWTU97c= +github.com/davecgh/go-spew v1.1.1/go.mod h1:J7Y8YcW2NihsgmVo/mv3lAwl/skON4iLHjSsI+c5H38= github.com/fatih/color v1.16.0 h1:zmkK9Ngbjj+K0yRhTVONQh1p/HknKYSlNT+vZCzyokM= github.com/fatih/color v1.16.0/go.mod h1:fL2Sau1YI5c0pdGEVCbKQbLXB6edEj1ZgiY4NijnWvE= +github.com/gobwas/httphead v0.1.0 h1:exrUm0f4YX0L7EBwZHuCF4GDp8aJfVeBrlLQrs6NqWU= +github.com/gobwas/httphead v0.1.0/go.mod h1:O/RXo79gxV8G+RqlR/otEwx4Q36zl9rqC5u12GKvMCM= +github.com/gobwas/pool v0.2.1 h1:xfeeEhW7pwmX8nuLVlqbzVc7udMDrwetjEv+TZIz1og= +github.com/gobwas/pool v0.2.1/go.mod h1:q8bcK0KcYlCgd9e7WYLm9LpyS+YeLd8JVDW6WezmKEw= +github.com/gobwas/ws v1.1.0 h1:7RFti/xnNkMJnrK7D1yQ/iCIB5OrrY/54/H930kIbHA= +github.com/gobwas/ws v1.1.0/go.mod h1:nzvNcVha5eUziGrbxFCo6qFIojQHjJV5cLYIbezhfL0= github.com/inconshreveable/mousetrap v1.1.0 h1:wN+x4NVGpMsO7ErUn/mUI3vEoE6Jt13X2s0bqwp9tc8= github.com/inconshreveable/mousetrap v1.1.0/go.mod h1:vpF70FUmC8bwa3OWnCshd2FqLfsEA9PFc4w1p2J65bw= +github.com/josharian/intern v1.0.0 h1:vlS4z54oSdjm0bgjRigI+G1HpF+tI+9rE5LLzOg8HmY= +github.com/josharian/intern v1.0.0/go.mod h1:5DoeVV0s6jJacbCEi61lwdGj/aVlrQvzHFFd8Hwg//Y= github.com/kr/pretty v0.2.1/go.mod h1:ipq/a2n7PKx3OHsz4KJII5eveXtPO4qwEXGdVfWzfnI= github.com/kr/pretty v0.3.1 h1:flRD4NNwYAUpkphVc1HcthR4KEIFJ65n8Mw5qdRn3LE= github.com/kr/pretty v0.3.1/go.mod h1:hoEshYVHaxMs3cyo3Yncou5ZscifuDolrwPKZanG3xk= @@ -19,6 +35,10 @@ github.com/kr/pty v1.1.1/go.mod h1:pFQYn66WHrOpPYNljwOMqo10TkYh1fy3cYio2l3bCsQ= github.com/kr/text v0.1.0/go.mod h1:4Jbv+DJW3UT/LiOwJeYQe1efqtUx/iVham/4vfdArNI= github.com/kr/text v0.2.0 h1:5Nx0Ya0ZqY2ygV366QzturHI13Jq95ApcVaJBhpS+AY= github.com/kr/text v0.2.0/go.mod h1:eLer722TekiGuMkidMxC/pM04lWEeraHUUmBw8l2grE= +github.com/mailru/easyjson v0.7.7 h1:UGYAvKxe3sBsEDzO8ZeWOSlIQfWFlxbzLZe7hwFURr0= +github.com/mailru/easyjson v0.7.7/go.mod h1:xzfreul335JAWq5oZzymOObrkdz5UnU4kGfJJLY9Nlc= +github.com/mangoumbrella/goldmark-figure v1.0.0 h1:L+ebP73dET0a2n68PV7m5oFJmwwH5GzRIJLgszR3fwo= +github.com/mangoumbrella/goldmark-figure v1.0.0/go.mod h1:iIL+fhdmCQDpE0l/TKtGhokWzIbo5lo/Y2OIAcx6usI= github.com/mattn/go-colorable v0.1.13 h1:fFA4WZxdEF4tXPZVKMLwD8oUnCTTo08duU7wxecdEvA= github.com/mattn/go-colorable v0.1.13/go.mod h1:7S9/ev0klgBDR4GtXTXX8a3vIGJpMovkB8vQcUbaXHg= github.com/mattn/go-isatty v0.0.16/go.mod h1:kYGgaQfpe5nmfYZH+SKPsOc2e4SrIfOl2e/yFXSvRLM= @@ -27,6 +47,8 @@ github.com/mattn/go-isatty v0.0.20/go.mod h1:W+V8PltTTMOvKvAeJH7IuucS94S2C6jfK/D github.com/mattn/go-runewidth v0.0.15 h1:UNAjwbU9l54TA3KzvqLGxwWjHmMgBUVhBiTjelZgg3U= github.com/mattn/go-runewidth v0.0.15/go.mod h1:Jdepj2loyihRzMpdS35Xk/zdY8IAYHsh153qUoGf23w= github.com/pkg/diff v0.0.0-20210226163009-20ebb0f2a09e/go.mod h1:pJLUxLENpZxwdsKMEsNbx1VGcRFpLqf3715MtcvvzbA= +github.com/pmezard/go-difflib v1.0.0 h1:4DBwDE0NGyQoBHbLQYPwSUPoCMWR5BEzIk/f1lZbAQM= +github.com/pmezard/go-difflib v1.0.0/go.mod h1:iKH77koFhYxTK1pcRnkKkqfTogsbg7gZNVY4sRDYZ/4= github.com/rivo/uniseg v0.2.0/go.mod h1:J6wj4VEh+S6ZtnVlnTBMWIodfgj8LQOQFoIToxlJtxc= github.com/rivo/uniseg v0.4.7 h1:WUdvkW8uEhrYfLC4ZzdpI2ztxP1I582+49Oc5Mq64VQ= github.com/rivo/uniseg v0.4.7/go.mod h1:FN3SvrM+Zdj16jyLfmOkMNblXMcoc8DfTHruCPUcx88= @@ -38,9 +60,17 @@ github.com/spf13/cobra v1.8.0 h1:7aJaZx1B85qltLMc546zn58BxxfZdR/W22ej9CFoEf0= github.com/spf13/cobra v1.8.0/go.mod h1:WXLWApfZ71AjXPya3WOlMsY9yMs7YeiHhFVlvLyhcho= github.com/spf13/pflag v1.0.5 h1:iy+VFUOCP1a+8yFto/drg2CJ5u0yRoB7fZw3DKv/JXA= github.com/spf13/pflag v1.0.5/go.mod h1:McXfInJRrz4CZXVZOBLb0bTZqETkiAhM9Iw0y3An2Bg= +github.com/stretchr/testify v1.8.1 h1:w7B6lhMri9wdJUVmEZPGGhZzrYTPvgJArz7wNPgYKsk= +github.com/stretchr/testify v1.8.1/go.mod h1:w2LPCIKwWwSfY2zedu0+kehJoqGctiVI29o6fzry7u4= github.com/yuin/goldmark v1.4.13/go.mod h1:6yULJ656Px+3vBD8DxQVa3kxgyrAnzto9xy5taEt/CY= github.com/yuin/goldmark v1.7.1 h1:3bajkSilaCbjdKVsKdZjZCLBNPL9pYzrCakKaf4U49U= github.com/yuin/goldmark v1.7.1/go.mod h1:uzxRWxtg69N339t3louHJ7+O03ezfj6PlliRlaOzY1E= +go.abhg.dev/goldmark/anchor v0.1.1 h1:NUH3hAzhfeymRqZKOkSoFReZlEAmfXBZlbXEzpD2Qgc= +go.abhg.dev/goldmark/anchor v0.1.1/go.mod h1:zYKiaHXTdugwVJRZqInVdmNGQRM3ZRJ6AGBC7xP7its= +go.abhg.dev/goldmark/mermaid v0.5.0 h1:mDkykpSPJ+5wCQ8bSXgzJ2KQskjXkI5Ndxz7JYDHW38= +go.abhg.dev/goldmark/mermaid v0.5.0/go.mod h1:OCyk2o85TX2drWHH+HRy6bih2yZlUwbbv/R1MMh1YLs= +go.abhg.dev/goldmark/toc v0.10.0 h1:de3LrIimwtGhBMKh7aEl1c6n4XWwOdukIO5wOAMYZzg= +go.abhg.dev/goldmark/toc v0.10.0/go.mod h1:OpH0qqRP9v/eosCV28ZeqGI78jZ8rri3C7Jh8fzEo2M= golang.org/x/crypto v0.0.0-20190308221718-c2843e01d9a2/go.mod h1:djNgcEr1/C05ACkg1iLfiJU5Ep61QUkGW8qpdssI0+w= golang.org/x/crypto v0.0.0-20210921155107-089bfa567519/go.mod h1:GvvjBRRGRdwPK5ydBHafDWAxML/pGHZbMvKqRZ5+Abc= golang.org/x/mod v0.6.0-dev.0.20220419223038-86c51ed26bb4/go.mod h1:jJ57K6gSWd91VN4djpZkiMVwK6gcyfeH4XE8wZrZaV4= @@ -85,3 +115,5 @@ gopkg.in/check.v1 v1.0.0-20201130134442-10cb98267c6c h1:Hei/4ADfdWqJk1ZMxUNpqntN gopkg.in/check.v1 v1.0.0-20201130134442-10cb98267c6c/go.mod h1:JHkPIbrfpd72SG/EVd6muEfDQjcINNoR0C8j2r3qZ4Q= gopkg.in/yaml.v3 v3.0.1 h1:fxVm/GzAzEWqLHuvctI91KS9hhNmmWOoWu0XTYJS7CA= gopkg.in/yaml.v3 v3.0.1/go.mod h1:K4uyk7z7BCEPqu6E+C64Yfv1cQ7kz7rIZviUmN+EgEM= +pgregory.net/rapid v1.1.0 h1:CMa0sjHSru3puNx+J0MIAuiiEV4N0qj8/cMWGBBCsjw= +pgregory.net/rapid v1.1.0/go.mod h1:PY5XlDGj0+V1FCq0o192FdRhpKHGTRIWBgqjDBTrq04= diff --git a/pkg/parser/parser.go b/pkg/parser/parser.go index 38476f7..f1f5219 100644 --- a/pkg/parser/parser.go +++ b/pkg/parser/parser.go @@ -12,9 +12,14 @@ import ( "time" "github.com/acmpesuecc/anna/pkg/helpers" + figure "github.com/mangoumbrella/goldmark-figure" "github.com/yuin/goldmark" "github.com/yuin/goldmark/extension" + "github.com/yuin/goldmark/parser" "github.com/yuin/goldmark/renderer/html" + "go.abhg.dev/goldmark/anchor" + "go.abhg.dev/goldmark/mermaid" + "go.abhg.dev/goldmark/toc" "gopkg.in/yaml.v3" ) @@ -232,13 +237,44 @@ func (p *Parser) ParseMarkdownContent(filecontent string) (Frontmatter, string, // Parsing markdown to HTML var parsedMarkdown bytes.Buffer + var md goldmark.Markdown + + if parsedFrontmatter.Type == "post" { + md = goldmark.New( + goldmark.WithParserOptions(parser.WithAutoHeadingID()), + goldmark.WithExtensions( + extension.TaskList, + figure.Figure, + &toc.Extender{ + Compact: true, + }, + &mermaid.Extender{ + RenderMode: mermaid.RenderModeClient, // or RenderModeClient + }, + &anchor.Extender{ + Texter: anchor.Text("#"), + }, + ), + goldmark.WithRendererOptions( + html.WithUnsafe(), + ), + ) + } else { + md = goldmark.New( + goldmark.WithParserOptions(parser.WithAutoHeadingID()), + goldmark.WithExtensions( + extension.TaskList, + figure.Figure, + &mermaid.Extender{ + RenderMode: mermaid.RenderModeClient, // or RenderModeClient + }, + ), + goldmark.WithRendererOptions( + html.WithUnsafe(), + ), + ) - md := goldmark.New( - goldmark.WithExtensions(extension.TaskList), - goldmark.WithRendererOptions( - html.WithUnsafe(), - ), - ) + } if err := md.Convert([]byte(markdown), &parsedMarkdown); err != nil { p.ErrorLogger.Fatal(err) diff --git a/site/content/docs-update.md b/site/content/docs-update.md new file mode 100644 index 0000000..c3cfeb2 --- /dev/null +++ b/site/content/docs-update.md @@ -0,0 +1,16 @@ +--- +date: 2024-04-22 +title: Anna Documentation Updates +type: page +--- + +- we are common mark compliant +- page and posts field to frontmatter +- recursively copies contents/ dir, so images and static content can be added in sub-dirs +- goldmark extension details: mermaid, toc, figure(Add caption beloe link, etc) + +## developer guide + +- profiling: + - live pprof during live reload + - creating .pprof files diff --git a/site/content/posts/building-anna/index.md b/site/content/posts/building-anna/index.md index 1a39406..09263bc 100644 --- a/site/content/posts/building-anna/index.md +++ b/site/content/posts/building-anna/index.md @@ -37,7 +37,7 @@ is a lot of time spent fixing things rather than getting productive work done. > A static site generator is an immensely useful application -![Lighthouse scores of the anna-docs page](/static/images/posts/building-anna/lighthouse.png) +![Lighthouse scores of the anna-docs page](images/lighthouse.png) It can simplify the whole process: allowing you to spend time and energy on quality content. Keep reading to find out how we designed anna `v1.0.0` @@ -146,6 +146,7 @@ Here are some screenshots out of our group chats, that demonstrate build times, just copy-pasting a single markdown file en-mass! ![Hyperfine benchmarks comparing the render times of anna, Saaru and 11ty](images/bench.png) +Hyperfine benchmarks comparing the render times of anna, Saaru and 11ty > After about 2 weeks of training (_ahem_) coding, we had a (merge) bringing parallel rendering and profiling to the table @@ -160,9 +161,9 @@ It also writes a cpu.prof and mem.prof file, which can be analysed and visualise Here,s the CPU profile generated while rendering this site. This is an SVG showing how much time each function call takes, the number of times it ran in a given test sample and various other useful information. -![CPU profile of an anna render generated using pprof](https://raw.githubusercontent.com/acmpesuecc/anna/main/site/static/images/posts/building-anna/cpu_prof.svg) +![CPU profile of an anna render generated using pprof](images/cpu_prof.svg) - + You may wanna zoom-in about 3-4x times to get to see how our ssg works @@ -289,7 +290,7 @@ We mean to re-write it using WASM if necessary. Here's a gif demonstrating search -![Demonstration of the search feature in anna](/static/images/posts/building-anna/search.gif) +![Demonstration of the search feature in anna](images/search.gif) ## JS integration as plugins @@ -317,7 +318,7 @@ validates fields using regex checks so you don’t need to worry about relative paths in baseURLs, canonical links, and sitemaps. After successfully completing the setup, the wizard launches a live preview of your site in a new tab. -![Demonstration of the GUI wizard in anna](/static/images/posts/building-anna/wizard.gif) +![Demonstration of the GUI wizard in anna](images/wizard.gif) --- diff --git a/site/content/posts/test.md b/site/content/posts/test.md new file mode 100644 index 0000000..8c57a37 --- /dev/null +++ b/site/content/posts/test.md @@ -0,0 +1,31 @@ +--- +title: Testing File for Extensions +type: post +draft: true +--- + +```pikchr +arrow right 200% "Markdown" "Source" +box rad 10px "Markdown" "Formatter" "(markdown.c)" fit +arrow right 200% "HTML+SVG" "Output" +arrow <-> down 70% from last box.s +box same "Pikchr" "Formatter" "(pikchr.c)" fit +``` + +```mermaid +graph TD; + A-->B; + A-->C; + B-->D; + C-->D; +``` + +```mermaid +--- +title: Order example +--- +erDiagram + CUSTOMER ||--o{ ORDER : places + ORDER ||--|{ LINE-ITEM : contains + CUSTOMER }|..|{ DELIVERY-ADDRESS : uses +``` diff --git a/site/static/styles/default.css b/site/static/styles/default.css index 87830e6..f4c2c1a 100644 --- a/site/static/styles/default.css +++ b/site/static/styles/default.css @@ -1,133 +1,145 @@ /* Font Faces */ @font-face { - font-family: agave; - src: url(../fonts/mono/Agave-Regular.ttf); + font-family: agave; + src: url(../fonts/mono/Agave-Regular.ttf); } @font-face { - font-family: VictorMonoItalics; - src: url(../fonts/VictorMono/victormono_italics.ttf); + font-family: VictorMonoItalics; + src: url(../fonts/VictorMono/victormono_italics.ttf); } /* Color Scheme */ @media (prefers-color-scheme: dark) { - :root { - --color-primary: #5990ac; - --color-primary-dim: #5990ac7f; - --color-text: #ffffff; - --color-text-dim: #ffffff7f; - --color-background: #000000; - --color-background-dim: #4a4a4a5a; - } + :root { + --color-primary: #5990ac; + --color-primary-dim: #5990ac7f; + --color-text: #ffffff; + --color-text-dim: #ffffff7f; + --color-background: #000000; + --color-background-dim: #4a4a4a5a; + } } @media (prefers-color-scheme: light) { - :root { - --color-primary: #5990ac; - --color-primary-dim: #5990ac7f; - --color-text: #000000; - --color-text-dim: #5a5a5a; - --color-background: #ffffff; - --color-background-dim: #a5a5a57f; - } + :root { + --color-primary: #5990ac; + --color-primary-dim: #5990ac7f; + --color-text: #000000; + --color-text-dim: #5a5a5a; + --color-background: #ffffff; + --color-background-dim: #a5a5a57f; + } } /* Body Styles */ body { - font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; - line-height: 1.6; - background-color: var(--color-background); - color: var(--color-text); - display: flex; - flex-direction: column; - text-align: left; - height: 100vh; - margin: auto; - margin-inline: 27%; - transition: margin 0.3s ease-in-out; + font-family: + system-ui, + -apple-system, + BlinkMacSystemFont, + "Segoe UI", + Roboto, + Oxygen, + Ubuntu, + Cantarell, + "Open Sans", + "Helvetica Neue", + sans-serif; + line-height: 1.6; + background-color: var(--color-background); + color: var(--color-text); + display: flex; + flex-direction: column; + text-align: left; + height: 100vh; + margin: auto; + margin-inline: 27%; + transition: margin 0.3s ease-in-out; } - /* Header and Footer */ header { - flex: 0; + flex: 0; } footer { - width: 100%; - flex: 0; - font-size: 0.9rem; - align-self: center; - padding: 1rem 0; - text-align: center; + width: 100%; + flex: 0; + font-size: 0.9rem; + align-self: center; + padding: 1rem 0; + text-align: center; } /* Navigation */ nav { - font-size: 1.1rem; - margin: auto; - padding: 1rem; - display: flex; - flex-wrap: wrap; - gap: 0.5rem; - - &>a { - word-wrap: break-word; - } + font-size: 1.1rem; + margin: auto; + padding: 1rem; + display: flex; + flex-wrap: wrap; + gap: 0.5rem; + + & > a { + word-wrap: break-word; + } } /* Search Input */ #searchSiteInput { - background: var(--color-background); - color: var(--color-text); - border: 1px solid var(--color-primary); - border-radius: 5px; - margin-left: 1rem; - padding: 0.5rem; - - ::placeholder { - color: white; - } + background: var(--color-background); + color: var(--color-text); + border: 1px solid var(--color-primary); + border-radius: 5px; + margin-left: 1rem; + padding: 0.5rem; - &:focus { - outline: none; - } + ::placeholder { + color: white; + } + + &:focus { + outline: none; + } - &:active { - outline: none; - } + &:active { + outline: none; + } } #site_search_result { - margin-top: 0.5rem; - margin-left: 1rem; + margin-top: 0.5rem; + margin-left: 1rem; } a { - color: #5990ac; - text-decoration: none; + color: #5990ac; + text-decoration: none; - /* font-size: 1.4rem; */ - transition: color 150ms ease-in-out; + /* font-size: 1.4rem; */ + transition: color 150ms ease-in-out; } /* Thank you, @kepano! */ -a:not(.plain):not(.tag):not(.internal-link):not(.footnote):not(.reversefootnote):not(.post-card):not(.notes-card) { - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2.5' stroke='gray' class='w-6 h-6'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M4.5 19.5l15-15m0 0H8.25m11.25 0v11.25' /%3E%3C/svg%3E%0A"); - background-position: right 33%; - background-repeat: no-repeat; - background-size: 0.7em; - padding-right: 0.75em; +a:not(.plain):not(.tag):not(.internal-link):not(.footnote):not( + .reversefootnote + ):not(.post-card):not(.notes-card):not(.anchor) { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2.5' stroke='gray' class='w-6 h-6'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M4.5 19.5l15-15m0 0H8.25m11.25 0v11.25' /%3E%3C/svg%3E%0A"); + background-position: right 33%; + background-repeat: no-repeat; + background-size: 0.7em; + padding-right: 0.75em; } a:hover { - /* color:#5990ac; */ - text-decoration: underline; + /* color:#5990ac; */ + text-decoration: underline; } a:active { - /* color: white; */ - text-decoration: none; + /* color: white; */ + text-decoration: none; } /* Headings */ @@ -137,250 +149,270 @@ h3, h4, h5, h6 { - margin: 0; - padding: 0; - margin-top: 0.5rem; - font-weight: 700; - margin-bottom: 0.5rem; - text-align: left; - word-break: break-word; - color: var(--color-primary); + margin: 0; + padding: 0; + margin-top: 0.5rem; + font-weight: 700; + margin-bottom: 0.5rem; + text-align: left; + word-break: break-word; + color: var(--color-primary); } h1 { - font-size: 2.3rem; + font-size: 2.3rem; } h2 { - font-size: 2rem; + font-size: 2rem; } h3 { - font-size: 1.75rem; + font-size: 1.75rem; } h4 { - font-size: 1.5rem; + font-size: 1.5rem; } /* Paragraphs and Body Text */ .body { - padding: 1rem; - flex: 1 0 auto; - - &>a, - &>ul>li>a, - &>ol>li>a, - &>ul>li>p>a, - &>ol>li>p>a, - &>p>a { - color: #5990ac; - } - - &>p { - margin: 1; - padding: 1; - } - - &>a, - &>p, - &>ul>li, - &>ol>li, - &>ul>li>a, - &>ol>li>a { - font-size: 1.1rem; - } + padding: 1rem; + flex: 1 0 auto; + + & > a, + & > ul > li > a, + & > ol > li > a, + & > ul > li > p > a, + & > ol > li > p > a, + & > p > a { + color: #5990ac; + } + + & > p { + margin: 1; + padding: 1; + } + + & > a, + & > p, + & > ul > li, + & > ol > li, + & > ul > li > a, + & > ol > li > a { + font-size: 1.1rem; + } } img { - &:hover { - opacity: 0.85; - } + &:hover { + opacity: 0.85; + } } img { - width: 80%; - display: block; - margin-left: auto; - margin-right: auto; - margin-top: 2rem; - margin-bottom: 2rem; - border-radius: 9px; + width: 80%; + display: block; + margin-left: auto; + margin-right: auto; + margin-top: 2rem; + margin-bottom: 2rem; + border-radius: 9px; } img:hover { - opacity: 0.85; + opacity: 0.85; } /* Embedded Content */ iframe { - display: block; - margin-left: auto; - margin-right: auto; + display: block; + margin-left: auto; + margin-right: auto; + width: 80%; + height: auto; } .all-tags, .tagged-posts { - display: flex; - flex-direction: row; - align-items: center; - flex-wrap: wrap; - - &>a { - font-size: 1.2rem; - background-color: #1e1e1e; - border-radius: 5px; - padding: 0.5rem; - margin: 0.3rem; - } + display: flex; + flex-direction: row; + align-items: center; + flex-wrap: wrap; + + & > a { + font-size: 1.2rem; + background-color: #1e1e1e; + border-radius: 5px; + padding: 0.5rem; + margin: 0.3rem; + } } .tags-paceholder { - display: flex; - margin-bottom: 1rem; + display: flex; + margin-bottom: 1rem; +} + +.anchor { + opacity: 0; + + transition: opacity 150ms ease-in-out; +} + +h1, +h2, +h3, +h4, +h5, +h6 { + &:hover { + .anchor { + opacity: 1; + } + } } .tag { - display: inline-block; - font-weight: 500; - background-color: var(--color-background-dim); - border-radius: 2px; - margin-right: 0.3rem; - margin-bottom: 0.3rem; - width: fit-content; - padding: 0.3rem; + display: inline-block; + font-weight: 500; + background-color: var(--color-background-dim); + border-radius: 2px; + margin-right: 0.3rem; + margin-bottom: 0.3rem; + width: fit-content; + padding: 0.3rem; } .authors-paceholder { - display: flex; + display: flex; - &>p { - margin: 0; - margin-bottom: 0.8rem; - } + & > p { + margin: 0; + margin-bottom: 0.8rem; + } } .author { - display: inline-block; - background-color: #1e1e1e; - border-radius: 2px; - margin-right: 0.3rem; - margin-bottom: 0.3rem; - width: fit-content; - padding: 0.3rem; + display: inline-block; + background-color: #1e1e1e; + border-radius: 2px; + margin-right: 0.3rem; + margin-bottom: 0.3rem; + width: fit-content; + padding: 0.3rem; } .posts, .notes { - display: flex; - flex-direction: column; - /* align-items: center; */ - margin: auto; - - &>a { - background-color: var(--color-background); - color: var(--color-text); - border-radius: 5px; - margin: 0.5rem; - padding: 0.5rem; - word-wrap: break-word; - text-decoration: none; - - transition: - background-color 150ms ease-in-out, - scale 0.1s ease-in-out; - } + display: flex; + flex-direction: column; + /* align-items: center; */ + margin: auto; + + & > a { + background-color: var(--color-background); + color: var(--color-text); + border-radius: 5px; + margin: 0.5rem; + padding: 0.5rem; + word-wrap: break-word; + text-decoration: none; + + transition: + background-color 150ms ease-in-out, + scale 0.1s ease-in-out; + } - &>a:hover { - background-color: var(--color-background-dim); - } + & > a:hover { + background-color: var(--color-background-dim); + } - &>a:active { - scale: 0.95; - } + & > a:active { + scale: 0.95; + } } .post-description { - border-bottom: 1px solid var(--color-text-dim); - margin-bottom: 1rem; + border-bottom: 1px solid var(--color-text-dim); + margin-bottom: 1rem; } .post-card-div, .notes-card-div { - color: var(--color-text-dim); - display: grid; + color: var(--color-text-dim); + display: grid; - &>* { - padding-inline: 1rem; - } + & > * { + padding-inline: 1rem; + } - &>p { - margin: 0; - padding: 0; - padding-inline: 1rem; - margin-left: 1rem; - font-size: 1.1rem; - } + & > p { + margin: 0; + padding: 0; + padding-inline: 1rem; + margin-left: 1rem; + font-size: 1.1rem; + } - &>h3 { - margin: 0; - } + & > h3 { + margin: 0; + } } -.body>img { - /* center the image wrt the screen*/ - display: block; - margin-left: auto; - margin-right: auto; - margin-top: 2rem; - margin-bottom: 2rem; +.body > img { + /* center the image wrt the screen*/ + display: block; + margin-left: auto; + margin-right: auto; + margin-top: 2rem; + margin-bottom: 2rem; - max-width: 100%; - height: auto; - width: auto\9; - /* ie8 */ + max-width: 100%; + height: auto; + width: auto\9; + /* ie8 */ } #chart { - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); } #hoverDiv { - background-color: var(--color-background); - - box-shadow: 0 0 15px #1e1e1e7a; - margin: 1rem; + background-color: var(--color-background); - display: flex; - flex-direction: column; + box-shadow: 0 0 15px #1e1e1e7a; + margin: 1rem; - padding: .5rem; + display: flex; + flex-direction: column; - border-radius: .3rem; + padding: 0.5rem; - &>p { - margin-top: 0.2rem; - margin-bottom: 0.2rem; - padding: 0; - font-size: .85rem; - } + border-radius: 0.3rem; - &>img { - margin: 0; - margin-left: auto; - margin-right: auto; - border-radius: .1rem; - width: 100%; - padding: 0; - } + & > p { + margin-top: 0.2rem; + margin-bottom: 0.2rem; + padding: 0; + font-size: 0.85rem; + } - &>.date { - color: var(--color-text-dim); - } + & > img { + margin: 0; + margin-left: auto; + margin-right: auto; + border-radius: 0.1rem; + width: 100%; + padding: 0; + } + & > .date { + color: var(--color-text-dim); + } } /* Code styling */ @@ -399,157 +431,155 @@ iframe { } */ pre code { - font-family: agave, monospace; - background: white; - overflow-x: scroll; - scrollbar-width: none; - border-radius: 0.5rem; - line-height: 1.2; + font-family: agave, monospace; + background: white; + overflow-x: scroll; + scrollbar-width: none; + border-radius: 0.5rem; + line-height: 1.2; } pre code.hljs { - background: #1e1e2d; + background: #1e1e2d; } -p>code, -li>code, -dd>code, -td>code { - font-family: agave, monospace; - background: #41414193; - color: white; - border: 1.5px solid #ffffff35; - border-radius: 5px; - word-wrap: break-word; - font-size: inherit; - box-decoration-break: clone; - padding: 0.1rem 0.3rem 0.2rem; - border-radius: 0.2rem; +p > code, +li > code, +dd > code, +td > code { + font-family: agave, monospace; + background: #41414193; + color: white; + border: 1.5px solid #ffffff35; + border-radius: 5px; + word-wrap: break-word; + font-size: inherit; + box-decoration-break: clone; + padding: 0.1rem 0.3rem 0.2rem; + border-radius: 0.2rem; } blockquote { - &>p { - font-family: VictorMonoItalics; - font-size: 1.1rem; - margin-left: 1rem; - padding-top: 1rem; - padding-bottom: 1rem; - } + & > p { + font-family: VictorMonoItalics; + font-size: 1.1rem; + margin-left: 1rem; + padding-top: 1rem; + padding-bottom: 1rem; + } - border-left: 3px solid var(--color-primary); - margin-left: 0rem; + border-left: 3px solid var(--color-primary); + margin-left: 0rem; } @media (max-width: 1200px) { - body { - margin-inline: 20%; - } + body { + margin-inline: 20%; + } - iframe { - width: auto; - height: auto; - } + iframe { + width: auto; + height: auto; + } - img { - width: 90%; - height: auto; - display: block; - margin-left: auto; - margin-right: auto; - margin-top: 2rem; - margin-bottom: 2rem; - } + img { + width: 90%; + height: auto; + display: block; + margin-left: auto; + margin-right: auto; + margin-top: 2rem; + margin-bottom: 2rem; + } } @media (max-width: 900px) { - body { - margin-inline: 15%; - } + body { + margin-inline: 15%; + } - iframe { - width: auto; - height: auto; - } + iframe { + width: auto; + height: auto; + } - img { - width: 90%; - height: auto; - display: block; - margin-left: auto; - margin-right: auto; - margin-top: 2rem; - margin-bottom: 2rem; - } + img { + width: 90%; + height: auto; + display: block; + margin-left: auto; + margin-right: auto; + margin-top: 2rem; + margin-bottom: 2rem; + } } @media (max-width: 650px) { - nav { - font-size: 1.05rem; - } - - iframe { - width: auto; - height: auto; - } - - body { - margin-inline: 8%; - } - - footer { - font-size: 1rem; - } - - img { - width: 90%; - height: auto; - display: block; - margin-left: auto; - margin-right: auto; - margin-top: 2rem; - margin-bottom: 2rem; - } - - .body { + nav { + font-size: 1.05rem; + } - &>a, - &>p, - &>ul>li, - &>ol>li, - &>ul>li>a, - &>ol>li>a { - font-size: 1rem; + iframe { + width: auto; + height: auto; } - &>h1 { - font-size: 1.8rem; + body { + margin-inline: 8%; } - &>h2 { - font-size: 1.5rem; + footer { + font-size: 1rem; } - } - .post-card, - .notes-card { + img { + width: 90%; + height: auto; + display: block; + margin-left: auto; + margin-right: auto; + margin-top: 2rem; + margin-bottom: 2rem; + } - &>p, - &>.post-card-div>p, - &>.notes-card-div>p { - font-size: 0.9rem; + .body { + & > a, + & > p, + & > ul > li, + & > ol > li, + & > ul > li > a, + & > ol > li > a { + font-size: 1rem; + } + + & > h1 { + font-size: 1.8rem; + } + + & > h2 { + font-size: 1.5rem; + } } - &>h3 { - font-size: 1.3rem; + .post-card, + .notes-card { + & > p, + & > .post-card-div > p, + & > .notes-card-div > p { + font-size: 0.9rem; + } + + & > h3 { + font-size: 1.3rem; + } } - } - pre code.hljs { - width: 95%; - } + pre code.hljs { + width: 95%; + } - img { - width: 100%; - height: auto; - } + img { + width: 100%; + height: auto; + } } diff --git a/test/parser/parse_md/html_got_output.html b/test/parser/parse_md/html_got_output.html index adb62dd..13f978d 100644 --- a/test/parser/parse_md/html_got_output.html +++ b/test/parser/parse_md/html_got_output.html @@ -1,22 +1,79 @@ -

h1 Heading

-

h2 Heading

-

h3 Heading

-

h4 Heading

-
h5 Heading
-
h6 Heading
-

Typographic replacements

+

Table of Contents #

+ +

h1 Heading #

+

h2 Heading #

+

h3 Heading #

+

h4 Heading #

+
h5 Heading #
+
h6 Heading #
+

Typographic replacements #

Enable typographer option to see result.

(c) (C) (r) (R) (tm) (TM) (p) (P) +-

test.. test... test..... test?..... test!....

!!!!!! ???? ,, -- ---

"Smartypants, double quotes" and 'single quotes'

-

Emphasis

+

Emphasis #

This is bold text

This is bold text

This is italic text

This is italic text

~~Strikethrough~~

-

Blockquotes

+

Blockquotes #

Blockquotes can also be nested...

@@ -26,7 +83,7 @@

Blockquotes

-

Lists

+

Lists #

Unordered