diff --git a/assets/css/v2/highlight.css b/assets/css/v2/highlight.css index bde5de05..b9765f93 100644 --- a/assets/css/v2/highlight.css +++ b/assets/css/v2/highlight.css @@ -1,88 +1,88 @@ -/* Generated using: hugo gen chromastyles --style=vs */ +/* Generated using: hugo gen chromastyles --style=tango */ -/* Background */ .bg { background-color:#fff; } -/* PreWrapper */ .chroma { background-color:#fff; } -/* Other */ .chroma .x { } -/* Error */ .chroma .err { } +/* Background */ .bg { background-color:#f8f8f8; } +/* PreWrapper */ .chroma { background-color:#f8f8f8; } +/* Other */ .chroma .x { color:#000 } +/* Error */ .chroma .err { color:#a40000 } /* CodeLine */ .chroma .cl { } /* LineLink */ .chroma .lnlinks { outline:none;text-decoration:none;color:inherit } /* LineTableTD */ .chroma .lntd { vertical-align:top;padding:0;margin:0;border:0; } /* LineTable */ .chroma .lntable { border-spacing:0;padding:0;margin:0;border:0; } -/* LineHighlight */ .chroma .hl { background-color:#e5e5e5 } +/* LineHighlight */ .chroma .hl { background-color:#dfdfdf } /* LineNumbersTable */ .chroma .lnt { white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f } /* LineNumbers */ .chroma .ln { white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f } /* Line */ .chroma .line { display:flex; } -/* Keyword */ .chroma .k { color:#00f } -/* KeywordConstant */ .chroma .kc { color:#00f } -/* KeywordDeclaration */ .chroma .kd { color:#00f } -/* KeywordNamespace */ .chroma .kn { color:#00f } -/* KeywordPseudo */ .chroma .kp { color:#00f } -/* KeywordReserved */ .chroma .kr { color:#00f } -/* KeywordType */ .chroma .kt { color:#2b91af } -/* Name */ .chroma .n { } -/* NameAttribute */ .chroma .na { } -/* NameBuiltin */ .chroma .nb { } -/* NameBuiltinPseudo */ .chroma .bp { } -/* NameClass */ .chroma .nc { color:#2b91af } -/* NameConstant */ .chroma .no { } -/* NameDecorator */ .chroma .nd { } -/* NameEntity */ .chroma .ni { } -/* NameException */ .chroma .ne { } -/* NameFunction */ .chroma .nf { } -/* NameFunctionMagic */ .chroma .fm { } -/* NameLabel */ .chroma .nl { } -/* NameNamespace */ .chroma .nn { } -/* NameOther */ .chroma .nx { } -/* NameProperty */ .chroma .py { } -/* NameTag */ .chroma .nt { } -/* NameVariable */ .chroma .nv { } -/* NameVariableClass */ .chroma .vc { } -/* NameVariableGlobal */ .chroma .vg { } -/* NameVariableInstance */ .chroma .vi { } -/* NameVariableMagic */ .chroma .vm { } -/* Literal */ .chroma .l { } -/* LiteralDate */ .chroma .ld { } -/* LiteralString */ .chroma .s { color:#a31515 } -/* LiteralStringAffix */ .chroma .sa { color:#a31515 } -/* LiteralStringBacktick */ .chroma .sb { color:#a31515 } -/* LiteralStringChar */ .chroma .sc { color:#a31515 } -/* LiteralStringDelimiter */ .chroma .dl { color:#a31515 } -/* LiteralStringDoc */ .chroma .sd { color:#a31515 } -/* LiteralStringDouble */ .chroma .s2 { color:#a31515 } -/* LiteralStringEscape */ .chroma .se { color:#a31515 } -/* LiteralStringHeredoc */ .chroma .sh { color:#a31515 } -/* LiteralStringInterpol */ .chroma .si { color:#a31515 } -/* LiteralStringOther */ .chroma .sx { color:#a31515 } -/* LiteralStringRegex */ .chroma .sr { color:#a31515 } -/* LiteralStringSingle */ .chroma .s1 { color:#a31515 } -/* LiteralStringSymbol */ .chroma .ss { color:#a31515 } -/* LiteralNumber */ .chroma .m { } -/* LiteralNumberBin */ .chroma .mb { } -/* LiteralNumberFloat */ .chroma .mf { } -/* LiteralNumberHex */ .chroma .mh { } -/* LiteralNumberInteger */ .chroma .mi { } -/* LiteralNumberIntegerLong */ .chroma .il { } -/* LiteralNumberOct */ .chroma .mo { } -/* Operator */ .chroma .o { } -/* OperatorWord */ .chroma .ow { color:#00f } -/* Punctuation */ .chroma .p { } -/* Comment */ .chroma .c { color:#008000 } -/* CommentHashbang */ .chroma .ch { color:#008000 } -/* CommentMultiline */ .chroma .cm { color:#008000 } -/* CommentSingle */ .chroma .c1 { color:#008000 } -/* CommentSpecial */ .chroma .cs { color:#008000 } -/* CommentPreproc */ .chroma .cp { color:#00f } -/* CommentPreprocFile */ .chroma .cpf { color:#00f } -/* Generic */ .chroma .g { } -/* GenericDeleted */ .chroma .gd { } -/* GenericEmph */ .chroma .ge { font-style:italic } -/* GenericError */ .chroma .gr { } -/* GenericHeading */ .chroma .gh { font-weight:bold } -/* GenericInserted */ .chroma .gi { } -/* GenericOutput */ .chroma .go { } -/* GenericPrompt */ .chroma .gp { font-weight:bold } -/* GenericStrong */ .chroma .gs { font-weight:bold } -/* GenericSubheading */ .chroma .gu { font-weight:bold } -/* GenericTraceback */ .chroma .gt { } -/* GenericUnderline */ .chroma .gl { } -/* TextWhitespace */ .chroma .w { } +/* Keyword */ .chroma .k { color:#204a87;font-weight:bold } +/* KeywordConstant */ .chroma .kc { color:#204a87;font-weight:bold } +/* KeywordDeclaration */ .chroma .kd { color:#204a87;font-weight:bold } +/* KeywordNamespace */ .chroma .kn { color:#204a87;font-weight:bold } +/* KeywordPseudo */ .chroma .kp { color:#204a87;font-weight:bold } +/* KeywordReserved */ .chroma .kr { color:#204a87;font-weight:bold } +/* KeywordType */ .chroma .kt { color:#204a87;font-weight:bold } +/* Name */ .chroma .n { color:#000 } +/* NameAttribute */ .chroma .na { color:#c4a000 } +/* NameBuiltin */ .chroma .nb { color:#204a87 } +/* NameBuiltinPseudo */ .chroma .bp { color:#3465a4 } +/* NameClass */ .chroma .nc { color:#000 } +/* NameConstant */ .chroma .no { color:#000 } +/* NameDecorator */ .chroma .nd { color:#5c35cc;font-weight:bold } +/* NameEntity */ .chroma .ni { color:#ce5c00 } +/* NameException */ .chroma .ne { color:#c00;font-weight:bold } +/* NameFunction */ .chroma .nf { color:#000 } +/* NameFunctionMagic */ .chroma .fm { color:#000 } +/* NameLabel */ .chroma .nl { color:#f57900 } +/* NameNamespace */ .chroma .nn { color:#000 } +/* NameOther */ .chroma .nx { color:#000 } +/* NameProperty */ .chroma .py { color:#000 } +/* NameTag */ .chroma .nt { color:#204a87;font-weight:bold } +/* NameVariable */ .chroma .nv { color:#000 } +/* NameVariableClass */ .chroma .vc { color:#000 } +/* NameVariableGlobal */ .chroma .vg { color:#000 } +/* NameVariableInstance */ .chroma .vi { color:#000 } +/* NameVariableMagic */ .chroma .vm { color:#000 } +/* Literal */ .chroma .l { color:#000 } +/* LiteralDate */ .chroma .ld { color:#000 } +/* LiteralString */ .chroma .s { color:#4e9a06 } +/* LiteralStringAffix */ .chroma .sa { color:#4e9a06 } +/* LiteralStringBacktick */ .chroma .sb { color:#4e9a06 } +/* LiteralStringChar */ .chroma .sc { color:#4e9a06 } +/* LiteralStringDelimiter */ .chroma .dl { color:#4e9a06 } +/* LiteralStringDoc */ .chroma .sd { color:#8f5902;font-style:italic } +/* LiteralStringDouble */ .chroma .s2 { color:#4e9a06 } +/* LiteralStringEscape */ .chroma .se { color:#4e9a06 } +/* LiteralStringHeredoc */ .chroma .sh { color:#4e9a06 } +/* LiteralStringInterpol */ .chroma .si { color:#4e9a06 } +/* LiteralStringOther */ .chroma .sx { color:#4e9a06 } +/* LiteralStringRegex */ .chroma .sr { color:#4e9a06 } +/* LiteralStringSingle */ .chroma .s1 { color:#4e9a06 } +/* LiteralStringSymbol */ .chroma .ss { color:#4e9a06 } +/* LiteralNumber */ .chroma .m { color:#0000cf;font-weight:bold } +/* LiteralNumberBin */ .chroma .mb { color:#0000cf;font-weight:bold } +/* LiteralNumberFloat */ .chroma .mf { color:#0000cf;font-weight:bold } +/* LiteralNumberHex */ .chroma .mh { color:#0000cf;font-weight:bold } +/* LiteralNumberInteger */ .chroma .mi { color:#0000cf;font-weight:bold } +/* LiteralNumberIntegerLong */ .chroma .il { color:#0000cf;font-weight:bold } +/* LiteralNumberOct */ .chroma .mo { color:#0000cf;font-weight:bold } +/* Operator */ .chroma .o { color:#ce5c00;font-weight:bold } +/* OperatorWord */ .chroma .ow { color:#204a87;font-weight:bold } +/* Punctuation */ .chroma .p { color:#000;font-weight:bold } +/* Comment */ .chroma .c { color:#8f5902;font-style:italic } +/* CommentHashbang */ .chroma .ch { color:#8f5902;font-style:italic } +/* CommentMultiline */ .chroma .cm { color:#8f5902;font-style:italic } +/* CommentSingle */ .chroma .c1 { color:#8f5902;font-style:italic } +/* CommentSpecial */ .chroma .cs { color:#8f5902;font-style:italic } +/* CommentPreproc */ .chroma .cp { color:#8f5902;font-style:italic } +/* CommentPreprocFile */ .chroma .cpf { color:#8f5902;font-style:italic } +/* Generic */ .chroma .g { color:#000 } +/* GenericDeleted */ .chroma .gd { color:#a40000 } +/* GenericEmph */ .chroma .ge { color:#000;font-style:italic } +/* GenericError */ .chroma .gr { color:#ef2929 } +/* GenericHeading */ .chroma .gh { color:#000080;font-weight:bold } +/* GenericInserted */ .chroma .gi { color:#00a000 } +/* GenericOutput */ .chroma .go { color:#000;font-style:italic } +/* GenericPrompt */ .chroma .gp { color:#8f5902 } +/* GenericStrong */ .chroma .gs { color:#000;font-weight:bold } +/* GenericSubheading */ .chroma .gu { color:#800080;font-weight:bold } +/* GenericTraceback */ .chroma .gt { color:#a40000;font-weight:bold } +/* GenericUnderline */ .chroma .gl { color:#000;text-decoration:underline } +/* TextWhitespace */ .chroma .w { color:#f8f8f8;text-decoration:underline } diff --git a/assets/css/v2/style.css b/assets/css/v2/style.css index 6bc1f338..d3b7980a 100644 --- a/assets/css/v2/style.css +++ b/assets/css/v2/style.css @@ -1,5 +1,43 @@ -/* webfonts */ +/* Regular */ +@font-face { + font-family: "JetBrainsMono"; + font-style: normal; + font-weight: 400; /* regular weight */ + src: url("../fonts/jetbrainsmono/JetBrainsMono-Light.woff2") format("woff2"); + font-display: swap; +} + +/* Italic */ +@font-face { + font-family: "JetBrainsMono"; + font-style: italic; + font-weight: 400; + src: url("../fonts/jetbrainsmono/JetBrainsMono-Italic.woff2") format("woff2"); + font-display: swap; +} + +/* Bold */ +@font-face { + font-family: "JetBrainsMono"; + font-style: normal; + font-weight: 700; + src: url("../fonts/jetbrainsmono/JetBrainsMono-SemiBold.woff2") + format("woff2"); + font-display: swap; +} + +/* Bold Italic */ +@font-face { + font-family: "JetBrainsMono"; + font-style: italic; + font-weight: 700; + src: url("../fonts/jetbrainsmono/JetBrainsMono-BoldItalic.woff2") + format("woff2"); + font-display: swap; +} + :root { + /* webfonts */ font-family: "Inter var", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; @@ -11,6 +49,8 @@ /* base rem = 16px by default, left as percentage for screen readers */ font-size: 100%; + /* MARK: Variables + */ --color-brand: 56.6% 0.194 147.7; --color-brand-300: #a6daba; --color-brand-200: #ccead7; @@ -18,7 +58,8 @@ --color-background: #ffffff; --color-foreground: #000000; --color-shadow: #d2d2d2; - --color-codeblock-shadow: #d2d2d2; + --color-codeblock-border: #888; + --color-codeblock-shadow: #e5e5e5; --color-footer: #1d1d1d; --color-footer-text: #e2e2e2; --color-product-title: #8d8d8d; @@ -67,7 +108,8 @@ --flow-gap: 1rem; } -/* reset */ +/* MARK: Reset +*/ html, body, p, @@ -134,7 +176,8 @@ h6 { scroll-margin-top: 1.5rem; } -/* header */ +/* MARK: Header +*/ p { font-weight: 350; } @@ -162,7 +205,8 @@ ol li:last-child { margin-bottom: 0; } -/* layout */ +/* MARK: Layout +*/ header { margin: 2rem 2rem 0 2rem; @@ -235,7 +279,8 @@ header { } } -/* footer */ +/* MARK: Footer +*/ footer { background-color: var(--color-footer); padding: 2.5rem; @@ -299,7 +344,8 @@ nav { } } -/* main content */ +/* MARK: Main content +*/ .docs-container * { box-sizing: border-box; } @@ -329,15 +375,6 @@ nav { grid-column: 1; } -/* main content */ -.docs-container * { - box-sizing: border-box; -} - -.docs-container { - min-width: 100%; -} - .breadcrumb-layout { grid-column: 1 / -1; } @@ -456,7 +493,8 @@ nav { display: flex; } -/* Coveo */ +/* MARK: Coveo +*/ #search-v2 { display: inline-block !important; width: 95vw; @@ -574,7 +612,8 @@ body:not(:has(.main-layout)) header atomic-search-interface { } } -/* Sidebar */ +/* MARK: Sidebar +*/ .sidebar { display: flex; flex-direction: column; @@ -893,7 +932,8 @@ button:has(~ .product-selector[style*="none"]) > .product-selector-button-icon { list-style: square; } -/* content */ +/* MARK: Content +*/ main { flex: 1; min-width: 20rem; @@ -952,7 +992,8 @@ h2 { margin: 1rem 0 .75rem 0; } -/* tables */ +/* MARK: Tables +*/ table { position: relative; z-index: -1; @@ -1014,7 +1055,8 @@ table hr { border-bottom: var(--table-line-height) solid var(--color-divider); } -/* callouts */ +/* MARK: Callouts +*/ blockquote { border: 1px solid var(--color-foreground); padding: 1rem; @@ -1027,11 +1069,6 @@ blockquote { /* Removes negative margins from multi-line codeblocks */ margin: 0; } - - &:has(.code-block) .code-block:has(.single-line) .highlight-v2.single-line { - /* Remove border from single line codeblocks in callouts */ - border: none; - } } blockquote.note { @@ -1129,7 +1166,8 @@ blockquote.important { } } -/* Tabs */ +/* MARK: Tabs +*/ .tabs-container { /* border-bottom: 1px solid black; */ white-space: nowrap; @@ -1262,7 +1300,21 @@ blockquote.important { margin: 0 0 var(--flow-gap) 0; } -/* Codeblocks */ +/* MARK: Codeblocks +*/ +code { + font-family: "JetBrainsMono", monospace; +} + +/* Inline Code */ +code:not(pre code) { + border: solid 1px #ccc; + border-radius: 4px; + padding: 0 0.25rem; + background-color: #f9f9f9; + font-size: 0.875rem; +} + .highlight { padding: 0 1rem 0 1rem; position: relative; @@ -1283,18 +1335,22 @@ blockquote.important { } .highlight-v2 { - border-top: 1px solid #cccccc; - border-bottom: 1px solid #cccccc; + border: 1px solid var(--color-codeblock-border); overflow-x: scroll; scrollbar-width: none; - line-height: 1.3rem; + line-height: 150%; padding: 1rem 0; + /* margin: 1.5rem 0 0.25rem 0; */ +} + +.highlight code { + font-size: 0.875rem; } .highlight-v2.single-line { display: flex; align-items: center; - border: 1px solid #cccccc; + border: 1px solid var(--color-codeblock-border); overflow-x: scroll; line-height: 1; } @@ -1309,22 +1365,28 @@ blockquote.important { } .code-type { + display: inline-block; + height: 1.5rem; + border-top: 1px solid var(--color-codeblock-border); + border-left: 1px solid var(--color-codeblock-border); + border-right: 1px solid var(--color-codeblock-border); text-transform: uppercase; - padding: .25rem 0.25rem; /* Padding for button content */ - font-size: 12px; /* Font size */ + padding: 0.15rem 0.5rem; + font-size: 0.75rem; z-index: 999; - position: absolute; + /* position: absolute; */ background-color: white; - margin: -12px 0 0 1rem; + margin: 0 0 -1px 0; + /* box-shadow: 2px 2px 0px var(--color-shadow); */ } .code-container { - position: relative; + box-shadow: 2px 2px 0px var(--color-codeblock-shadow); } -ol .code-container, -ul .code-container { - margin-top: 0.75rem; +ol .code-block, +ul .code-block { + margin: 0.75rem 0; } .code-container:hover { @@ -1364,7 +1426,8 @@ ul .code-container { padding: 0; } -/* Images */ +/* MARK: Images +*/ figure { margin: 0; } diff --git a/exampleSite/content/test-product/code-blocks/code-blocks-root-non-root.md b/exampleSite/content/test-product/code-blocks/code-blocks-root-non-root.md index dcdbfd13..b9551718 100644 --- a/exampleSite/content/test-product/code-blocks/code-blocks-root-non-root.md +++ b/exampleSite/content/test-product/code-blocks/code-blocks-root-non-root.md @@ -1,6 +1,6 @@ --- description: Code Blocks - With root and non-root -title: Code Blocks - With root and non-root +title: With root and non-root weight: 200 --- diff --git a/exampleSite/content/test-product/code-blocks/code-blocks-spacing.md b/exampleSite/content/test-product/code-blocks/code-blocks-spacing.md index deb9fac6..dbce59b1 100644 --- a/exampleSite/content/test-product/code-blocks/code-blocks-spacing.md +++ b/exampleSite/content/test-product/code-blocks/code-blocks-spacing.md @@ -1,6 +1,6 @@ --- description: Code Blocks - Spacing and OL/UL -title: Code Blocks - Spacing and OL/UL +title: Spacing and OL/UL weight: 200 --- @@ -25,6 +25,17 @@ sudo rm -rf / sudo rm -rf / ``` +```shell +# single line with a comment +``` + +```shell +multiline +shell commands + +# with a comment +``` + ## Order List with single line code block diff --git a/exampleSite/content/test-product/code-blocks/code-blocks-stacked.md b/exampleSite/content/test-product/code-blocks/code-blocks-stacked.md index d5ffef45..4fefd18c 100644 --- a/exampleSite/content/test-product/code-blocks/code-blocks-stacked.md +++ b/exampleSite/content/test-product/code-blocks/code-blocks-stacked.md @@ -1,6 +1,6 @@ --- description: Code Blocks - Stacked -title: Code Blocks - Stacked +title: Stacked weight: 200 --- diff --git a/exampleSite/content/test-product/code-blocks/huge-codeblock.md b/exampleSite/content/test-product/code-blocks/huge-codeblock.md new file mode 100644 index 00000000..1327f9cc --- /dev/null +++ b/exampleSite/content/test-product/code-blocks/huge-codeblock.md @@ -0,0 +1,77 @@ +--- +description: Code Blocks - Huge codeblocks +title: Huge codeblock +weight: 300 +--- + +## nginx conf sample + +```nginx +# Global Configuration +user nginx; +worker_processes auto; + +error_log /var/log/nginx/error.log warn; +pid /var/run/nginx.pid; + +events { + worker_connections 1024; +} + +http { + include /etc/nginx/mime.types; + default_type application/octet-stream; + + log_format main '$remote_addr - $remote_user [$time_local] "$request" ' + '$status $body_bytes_sent "$http_referer" ' + '"$http_user_agent" "$http_x_forwarded_for"'; + + access_log /var/log/nginx/access.log main; + + sendfile on; + keepalive_timeout 65; + + # Standalone IP addresses for upstream definitions + upstream backend { + server 192.168.0.1:8080; # IP address without a port + server 192.168.0.2; # Another standalone IP + server 10.0.0.1 max_fails=2 fail_timeout=10s; # Failover setup + } + + # Proxy settings + server { + listen 80; + server_name www.example.com; + + root /usr/share/nginx/html; + + location /api/ { + proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; + proxy_set_header Host $host; + proxy_pass http://192.168.1.100; # Proxying to an IP without a port + } + + location /images/ { + root /img; + autoindex on; + } + } + + # ACL with standalone IP ranges + acl_list { + allow 192.168.1.0; # Specific single IP without port + allow 192.168.0.0/16; # IP range without ports + deny 10.1.0.1; # Single forbidden IP + } + + # Static file serving with regex + location ~* \.(gif|png|jpg|jpeg)$ { + expires 30d; + access_log off; + } + + # Standalone IPs used for error logging + error_log /var/log/nginx/error.log warn; + error_log 192.168.1.200; # Logs sent to external IP +} +``` \ No newline at end of file diff --git a/layouts/_default/_markup/render-codeblock.html b/layouts/_default/_markup/render-codeblock.html index 00350d8c..f1088809 100644 --- a/layouts/_default/_markup/render-codeblock.html +++ b/layouts/_default/_markup/render-codeblock.html @@ -5,7 +5,7 @@ {{- if $isSingleLine -}}