From 0ea5f5122f9104c59bd8aacd2faa244fa8665f64 Mon Sep 17 00:00:00 2001 From: Jack Hickey <133868041+nginx-jack@users.noreply.github.com> Date: Thu, 13 Mar 2025 14:36:11 +0000 Subject: [PATCH 1/3] Chroma: Add vs theme to mainframe This removes the custom render-codeblock as it generated html and class references that would not work with the standard chroma theme generator. We may create another render-codeblock in future, if we require a fully custom theme to render our "fancy codeblocks". --- assets/css/v2/highlight.css | 88 +++++++++++++ .../nginx/installing-nginx-open-source.md | 116 ++++++++++++++++++ exampleSite/hugo.toml | 3 +- .../_default/_markup/render-codeblock.html | 26 ---- layouts/_default/baseof.html | 6 +- layouts/partials/styles.html | 4 + 6 files changed, 211 insertions(+), 32 deletions(-) create mode 100644 assets/css/v2/highlight.css delete mode 100644 layouts/_default/_markup/render-codeblock.html diff --git a/assets/css/v2/highlight.css b/assets/css/v2/highlight.css new file mode 100644 index 0000000..bde5de0 --- /dev/null +++ b/assets/css/v2/highlight.css @@ -0,0 +1,88 @@ +/* Generated using: hugo gen chromastyles --style=vs */ + +/* Background */ .bg { background-color:#fff; } +/* PreWrapper */ .chroma { background-color:#fff; } +/* Other */ .chroma .x { } +/* Error */ .chroma .err { } +/* 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 } +/* 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 { } diff --git a/exampleSite/content/nginx/installing-nginx-open-source.md b/exampleSite/content/nginx/installing-nginx-open-source.md index d46cdd4..d4d9753 100644 --- a/exampleSite/content/nginx/installing-nginx-open-source.md +++ b/exampleSite/content/nginx/installing-nginx-open-source.md @@ -9,6 +9,122 @@ toc: true weight: 200 --- +```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 +} + +server { + listen 443 ssl; + server_name secure.example.com; + + ssl_certificate /etc/nginx/ssl/server.crt; + ssl_certificate_key /etc/nginx/ssl/server.key; + + root /usr/share/nginx/secure_html; + + location ~ \.php$ { + fastcgi_split_path_info ^(.+\.php)(/.+)$; + fastcgi_pass 127.0.0.1; # PHP processing via standalone IP (localhost IP) + include fastcgi_params; + } + + location /logs/ { + deny all; # Deny presence of specific logs + } +} + +server { + listen 8080; + server_name localhost; + + # Error page definitions + error_page 404 /404.html; + location = /404.html { + root /usr/share/nginx/html; + } + + error_page 500 502 503 504 /50x.html; + location = /50x.html { + root /usr/share/nginx/html; + } +} + +``` + +```js +function hello() { + // this is a comment + console.log("Hello world!"); + const thing = ["a", "string", "array"]; +} +``` + This article explains how to install NGINX Open Source. diff --git a/exampleSite/hugo.toml b/exampleSite/hugo.toml index aed9fab..4fe624b 100644 --- a/exampleSite/hugo.toml +++ b/exampleSite/hugo.toml @@ -17,4 +17,5 @@ maxAge = -1 [markup.goldmark.renderer] unsafe = true [markup.highlight] - guessSyntax = true \ No newline at end of file + guessSyntax = true + noClasses = false \ No newline at end of file diff --git a/layouts/_default/_markup/render-codeblock.html b/layouts/_default/_markup/render-codeblock.html deleted file mode 100644 index 9e53e6a..0000000 --- a/layouts/_default/_markup/render-codeblock.html +++ /dev/null @@ -1,26 +0,0 @@ - -{{- $result := transform.HighlightCodeBlock . -}} -{{- $result.Wrapped -}} -{{- "" -}} diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index 566c3a6..d724d64 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -48,7 +48,7 @@ } }); - const v2cssIds = ["css7"]; + const v2cssIds = ["css7", "css9"]; v2cssIds.forEach((cssId) => { const element = document.getElementById(cssId); if (element !== null) { @@ -75,10 +75,6 @@ table.style.display = isNewTheme ? "none" : ""; }); - document.querySelectorAll(".highlight").forEach((codeblock) => { - codeblock.style.display = isNewTheme ? "none" : ""; - }); - const mfElements = ['[data-mf="true"]']; mfElements.forEach((elementId) => { document.querySelectorAll(elementId).forEach((element) => { diff --git a/layouts/partials/styles.html b/layouts/partials/styles.html index 9852218..2c828d4 100644 --- a/layouts/partials/styles.html +++ b/layouts/partials/styles.html @@ -6,6 +6,7 @@ {{ $css6 := resources.Get "css/coveo.css" }} {{ $css7 := resources.Get "css/v2/style.css" }} {{ $css8 := resources.Get "css/inline-overrides.css" }} +{{ $css9 := resources.Get "css/v2/highlight.css" }} + +{{ $cssHighlight := $css9 | minify | fingerprint "sha512"}} + From 17de99830801051a88c710ce30af282928f71776 Mon Sep 17 00:00:00 2001 From: Lam Nguyen Date: Thu, 13 Mar 2025 07:07:32 -0700 Subject: [PATCH 2/3] Chroma: Added code to bound the width of the codeblock fix: Handled case of shell --- assets/css/v2/style.css | 20 ++++++++++++++++++++ 1 file changed, 20 insertions(+) diff --git a/assets/css/v2/style.css b/assets/css/v2/style.css index b496d24..e26cafa 100644 --- a/assets/css/v2/style.css +++ b/assets/css/v2/style.css @@ -978,6 +978,26 @@ blockquote p:last-child { } /* Codeblocks */ +.highlight { + position: relative; + z-index: -1; + + code .line { + position: relative; + + .c1 { + white-space: normal; + } + } + + code.language-shell { + /* Special case for shell commands */ + .cl { + white-space: normal; + } + } +} + .highlight-mf { grid-column: 1 / -1 !important; position: relative; From 8d42a1d2b1d309ce3ab4d4276357391f07968057 Mon Sep 17 00:00:00 2001 From: Lam Nguyen Date: Thu, 13 Mar 2025 09:26:59 -0700 Subject: [PATCH 3/3] Chroma: Remove hardcoding solution --- assets/css/v2/style.css | 15 +++------------ 1 file changed, 3 insertions(+), 12 deletions(-) diff --git a/assets/css/v2/style.css b/assets/css/v2/style.css index e26cafa..88c85e9 100644 --- a/assets/css/v2/style.css +++ b/assets/css/v2/style.css @@ -982,19 +982,10 @@ blockquote p:last-child { position: relative; z-index: -1; - code .line { + code .cl { position: relative; - - .c1 { - white-space: normal; - } - } - - code.language-shell { - /* Special case for shell commands */ - .cl { - white-space: normal; - } + width: 100%; + white-space: pre-wrap; } }