mirrors/caddy-website
1
0
Fork 0
mirror of https://github.com/caddyserver/website.git synced 2025-04-22 04:56:17 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Use markdown syntax highlighting on frontpage

Browse source
This commit is contained in:
Francis Lavoie 2023-11-19 05:28:06 -05:00
parent 5e93103dce
commit babfa3a7c0
No known key found for this signature in database
GPG key ID: 0F66EE1687682239
11 changed files with 371 additions and 211 deletions
Download patch file Download diff file Expand all files Collapse all files

26
new/includes/examples/custom-ca.md Normal file
View file

@ -0,0 +1,26 @@
<script>
document.addEventListener("DOMContentLoaded", (event) => {
window.$('.ex-custom-ca pre.chroma').classList.add('light');
});
</script>
<div class="ex-custom-ca">
```caddy
{
pki {
ca corporate {
name "Our Corporation Authority"
}
}
}
internal.example.com {
# ACME endpoint: /acme/corporate/directory
acme_server {
ca corporate
}
}
```
</div>

63
new/includes/examples/file-server.md Normal file
View file

@ -0,0 +1,63 @@
<script>
document.addEventListener("DOMContentLoaded", (event) => {
let startElement, endElement;
startElement = findWithContent('.ex-fs pre.chroma code span.line', 'file_server /downloads/* {');
endElement = findNextText(startElement, '}');
wrapRangeWithSpan(startElement, endElement, 'rollover-compress rollover-blue');
startElement = findWithContent('.ex-fs pre.chroma code span', 'encode');
endElement = findNextText(startElement, 'gzip');
wrapRangeWithSpan(startElement, endElement, 'rollover-compress rollover-blue');
startElement = findWithContent('.ex-fs pre.chroma code span.line', 'file_server /database/* {');
endElement = findNextText(startElement, '}');
wrapRangeWithSpan(startElement, endElement, 'rollover-vfs rollover-green');
startElement = findWithContent('.ex-fs pre.chroma code span.line', 'file_server /embedded/* {');
endElement = findNextText(startElement, '}');
wrapRangeWithSpan(startElement, endElement, 'rollover-vfs rollover-green');
startElement = findWithContent('.ex-fs pre.chroma code span', '# (Range/Etag/etc. all work without extra config)');
wrapRangeWithSpan(startElement, startElement, 'rollover-range rollover-yellow');
startElement = findWithContent('.ex-fs pre.chroma code span', 'file_server');
endElement = findNextText(startElement, 'browse');
wrapRangeWithSpan(startElement, endElement, 'rollover-browse rollover-purple');
window.$('.ex-fs pre.chroma').classList.add('light');
});
</script>
<div class="ex-fs">
```caddy
example.com
root * /var/www
# Serve precompressed files if present
file_server /downloads/* {
precompressed gzip zstd br
}
# Compress everything else that would benefit
encode zstd gzip
# Get files from a database
file_server /database/* {
fs sqlite data.sql
}
# Get files from within the Caddy binary
file_server /embedded/* {
fs embedded
}
# (Range/Etag/etc. all work without extra config)
# Serve static site with directory listings as needed
file_server browse
```
</div>

25
new/includes/examples/json-automate-certs.md Normal file
View file

@ -0,0 +1,25 @@
<script>
document.addEventListener("DOMContentLoaded", (event) => {
window.$('.ex-json-automate-certs pre.chroma').classList.add('light');
});
</script>
<div class="ex-json-automate-certs">
```json
{
"apps": {
"tls": {
"certificates": {
"automate": [
"example.com",
"sub.example.com",
"example.net"
]
}
}
}
}
```
</div>

23
new/includes/examples/local-https.md Normal file
View file

@ -0,0 +1,23 @@
<script>
document.addEventListener("DOMContentLoaded", (event) => {
window.$('.ex-local-https pre.chroma').classList.add('light');
});
</script>
<div class="ex-local-https">
```caddy
localhost {
respond "Hello from HTTPS!"
}
192.168.1.10 {
respond "Also HTTPS!"
}
http://localhost {
respond "Plain HTTP"
}
```
</div>

51
new/includes/examples/proxy.md Normal file
View file

@ -0,0 +1,51 @@
<script>
document.addEventListener("DOMContentLoaded", (event) => {
let startElement, endElement;
startElement = findWithContent('.ex-proxy pre.chroma code span', 'php_fastcgi');
endElement = findNextText(startElement, '9000');
wrapRangeWithSpan(startElement, endElement, 'rollover-php rollover-green');
startElement = findWithContent('.ex-proxy pre.chroma code span.line', 'reverse_proxy /api/* {');
endElement = findNextText(startElement, '}');
wrapRangeWithSpan(startElement, endElement, 'rollover-dynamic-backends rollover-purple');
startElement = findWithContent('.ex-proxy pre.chroma code span.line', 'reverse_proxy /service/* {');
endElement = findNextText(startElement, '}');
wrapRangeWithSpan(startElement, endElement, 'rollover-ha rollover-blue');
});
</script>
<div class="ex-proxy">
```caddy
example.com
# Serve PHP sites
handle /blog/* {
root * /var/www/wordpress
php_fastcgi localhost:9000
file_server
}
# Proxy an autoscaling API with dynamic backends
reverse_proxy /api/* {
dynamic srv _api._tcp.example.com
}
# Proxy a compute-heavy distributed service
# with load balancing and health checks
reverse_proxy /service/* {
to 10.0.1.1:80 10.0.1.2:80 10.0.1.3:80
lb_policy least_conn
lb_try_duration 10s
fail_duration 5s
}
# Proxy everything else to an HTTPS upstream
reverse_proxy https://service.example.com {
header_up Host {upstream_hostport}
}
```
</div>

25
new/includes/examples/website-caddyfile.md Normal file
View file

@ -0,0 +1,25 @@
<script>
document.addEventListener("DOMContentLoaded", (event) => {
window.$('.ex-website-caddyfile pre.chroma').classList.add('light');
});
</script>
<div class="ex-website-caddyfile">
```caddy
caddyserver.com
root * src
file_server
templates # markdown & syntax highlighting!
encode zstd gzip
redir /docs/json /docs/json/
rewrite /docs/json/* /docs/json/index.html
rewrite /docs/* /docs/index.html
reverse_proxy /api/* localhost:9002
```
</div>

154
new/index.html
View file

@ -138,7 +138,7 @@
<span class="site-on">site on</span><br> <span class="site-on">site on</span><br>
HTTPS HTTPS
</div> </div>
<h2> <h2 id="every-site-https">
<b>By default, </b>Caddy <b>automatically obtains</b> and <b>renews</b> TLS certificates for <b>all your sites.</b> <b>By default, </b>Caddy <b>automatically obtains</b> and <b>renews</b> TLS certificates for <b>all your sites.</b>
</h2> </h2>
@ -175,7 +175,7 @@
<section class="light"> <section class="light">
<div class="section-upset"> <div class="section-upset">
<div class="wrapper"> <div class="wrapper">
<h2>The <b>most advanced</b> HTTPS server <b>in the world</b></h2> <h2 id="most-advanced">The <b>most advanced</b> HTTPS server <b>in the world</b></h2>
</div> </div>
</div> </div>
<div class="wrapper"> <div class="wrapper">
@ -220,7 +220,7 @@
</div> </div>
<div class="demobox"> <div class="demobox">
<h2>Experience it</h2> <h2 id="on-demand-demo">Experience it</h2>
<p> <p>
<b>Discover Caddy's automagic HTTPS features.</b> <b>Discover Caddy's automagic HTTPS features.</b>
</p> </p>
@ -263,7 +263,7 @@
<section class="diagonal up light gray feature"> <section class="diagonal up light gray feature">
<div class="wrapper"> <div class="wrapper">
<h2>Deploy your own PKI with Caddy</h2> <h2 id="your-own-pki">Deploy your own PKI with Caddy</h2>
<p> <p>
Not only is Caddy the industry leader in certificate automation, it also sports a fully-featured PKI suite for your own fully-automated internal PKI and private CAs. Not only is Caddy the industry leader in certificate automation, it also sports a fully-featured PKI suite for your own fully-automated internal PKI and private CAs.
</p> </p>
@ -278,17 +278,7 @@
<div class="asides"> <div class="asides">
<div> <div>
<div class="display left"> <div class="display left">
<code class="light">localhost { {{ markdown (include "/includes/examples/local-https.md") }}
respond "Hello from HTTPS!"
}
192.168.1.10 {
respond "Also HTTPS!"
}
http://localhost {
respond "Plain HTTP"
}</code>
</div> </div>
</div> </div>
<div> <div>
@ -312,55 +302,16 @@ http://localhost {
</div> </div>
<div> <div>
<div class="display right"> <div class="display right">
<code class="light">{ {{ markdown (include "/includes/examples/custom-ca.md") }}
pki { </div>
ca corporate {
name "Our Corporation Authority"
}
}
}
internal.example.com {
<span class="comment"># ACME endpoint: /acme/corporate/directory</span>
acme_server {
ca corporate
}
}</code></div>
<!-- <div class="display right">
<code class="light">{
pki {
ca our_own {
name "Our Own Authority"
}
}
}
internal.example.com {
tls {
issuer internal {
ca our_own
}
}
}</code></div> -->
</div> </div>
</div> </div>
<div class="asides"> <div class="asides">
<div> <div>
<div class="display left"> <div class="display left">
<code class="light">{ {{ markdown (include "/includes/examples/json-automate-certs.md") }}
"apps": { </div>
"tls": {
"certificates": {
"automate": [
"example.com",
"sub.example.com",
"example.net"
]
}
}
}
}</code></div>
</div> </div>
<div> <div>
<h3 class="green">Keep certificates renewed</h3> <h3 class="green">Keep certificates renewed</h3>
@ -391,7 +342,7 @@ internal.example.com {
<section class="diagonal down dark feature"> <section class="diagonal down dark feature">
<div class="wrapper"> <div class="wrapper">
<h2>A forward-thinking reverse proxy</h2> <h2 id="reverse-proxy">A forward-thinking reverse proxy</h2>
<p> <p>
Caddy's proxy was designed to be as forward-compatible as possible and has major batteries included: load balancing, active and passive health checks, dynamic upstreams, retries, pluggable transports, and of course, best-in-class TLS security. Caddy's proxy was designed to be as forward-compatible as possible and has major batteries included: load balancing, active and passive health checks, dynamic upstreams, retries, pluggable transports, and of course, best-in-class TLS security.
</p> </p>
@ -419,34 +370,8 @@ internal.example.com {
</div> </div>
</div> </div>
<div> <div>
<div class="display right"> <div class="display right dark">
<code class="dark">example.com {{ markdown (include "/includes/examples/proxy.md") }}
<span class="comment"># Serve PHP sites</span>
handle /blog/* {
root * /var/www/wordpress
<span class="rollover-php rollover-green">php_fastcgi localhost:9000</span>
file_server
}
<span class="comment"># Proxy an autoscaling API with dynamic backends</span>
<span class="rollover-dynamic-backends rollover-purple">reverse_proxy /api/* {
dynamic srv _api._tcp.example.com
}</span>
<span class="comment"># Proxy a compute-heavy distributed service
# with load balancing and health checks</span>
<span class="rollover-ha rollover-blue">reverse_proxy /service/* {
to 10.0.1.1:80 10.0.1.2:80 10.0.1.3:80
lb_policy least_conn
lb_try_duration 10s
fail_duration 5s
}</span>
<span class="comment"># Proxy everything else to an HTTPS upstream</span>
reverse_proxy https://service.example.com {
header_up Host {upstream_hostport}
}<div class="blinking"></div></code>
</div> </div>
</div> </div>
</div> </div>
@ -482,7 +407,7 @@ reverse_proxy https://service.example.com {
</div> </div>
<h2>Production-grade static file server</h2> <h2 id="file-server">Production-grade static file server</h2>
<p> <p>
Serving static files is a tried-and-true method of delivering sites to numerous clients efficiently. Caddy has a robust file server that can be combined with other middleware features for the ultimate effortless website. Serving static files is a tried-and-true method of delivering sites to numerous clients efficiently. Caddy has a robust file server that can be combined with other middleware features for the ultimate effortless website.
</p> </p>
@ -516,33 +441,8 @@ reverse_proxy https://service.example.com {
</div> </div>
</div> </div>
<div> <div>
<div class="display right"> <div class="display right light">
<code class="light">example.com {{ markdown (include "/includes/examples/file-server.md") }}
root * /var/www
<span class="comment"># Serve precompressed files if present</span>
<span class="rollover-compress rollover-blue">file_server /downloads/* {
precompressed gzip zstd br
}</span>
<span class="comment"># Compress everything else that would benefit</span>
<span class="rollover-compress rollover-blue">encode zstd gzip</span>
<span class="comment"># Get files from a database</span>
<span class="rollover-vfs rollover-green">file_server /database/* {
fs sqlite data.sql
}</span>
<span class="comment"># Get files from within the Caddy binary</span>
<span class="rollover-vfs rollover-green">file_server /embedded/* {
fs embedded
}</span>
<span class="comment rollover-range rollover-yellow"># (Range/Etag/etc. all work without extra config)</span>
<span class="comment"># Serve static site with directory listings as needed</span>
<span class="rollover-browse rollover-purple">file_server browse</span></code>
</div> </div>
</div> </div>
</div> </div>
@ -560,7 +460,7 @@ root * /var/www
<section class="light feature"> <section class="light feature">
<div class="wrapper"> <div class="wrapper">
<h2>Flexible configuration compatible with any workflow</h2> <h2 id="flexible-config">Flexible configuration compatible with any workflow</h2>
<p> <p>
Configure your server your way. Caddy's native configuration format is JSON, and with Caddy's config adapters, you can use any config format you prefer. All configuration is posted through a RESTful admin API, and Caddy's CLI helps you work with config files easily. Configure your server your way. Caddy's native configuration format is JSON, and with Caddy's config adapters, you can use any config format you prefer. All configuration is posted through a RESTful admin API, and Caddy's CLI helps you work with config files easily.
</p> </p>
@ -610,20 +510,8 @@ $ curl localhost:2019/config/ | jq<div class="blinking"></div></code>
</p> </p>
</div> </div>
<div> <div>
<div class="display right"> <div class="display right light">
<code class="light">caddyserver.com {{ markdown (include "/includes/examples/website-caddyfile.md") }}
root * src
file_server
templates
encode zstd gzip
redir /docs/json /docs/json/
rewrite /docs/json/* /docs/json/index.html
rewrite /docs/* /docs/index.html
reverse_proxy /api/* localhost:9002</code>
<div class="caption">Actual config used by this site.</div> <div class="caption">Actual config used by this site.</div>
</div> </div>
</div> </div>
@ -689,7 +577,7 @@ reverse_proxy /api/* localhost:9002</code>
<section class="diagonal up light gray feature"> <section class="diagonal up light gray feature">
<div class="wrapper"> <div class="wrapper">
<h2>Unparalleled extensibility</h2> <h2 id="extensibility">Unparalleled extensibility</h2>
<p> <p>
Caddy is the only server in the world with its novel, modular architecture. At its core, Caddy is a configuration manager that runs apps like an HTTP server, internal certificate authority, TLS certificate manager, process supervisor, and more. Caddy is the only server in the world with its novel, modular architecture. At its core, Caddy is a configuration manager that runs apps like an HTTP server, internal certificate authority, TLS certificate manager, process supervisor, and more.
</p> </p>
@ -722,7 +610,7 @@ reverse_proxy /api/* localhost:9002</code>
<section class="light feature"> <section class="light feature">
<div class="wrapper"> <div class="wrapper">
<h2>The <span class="gold">gold standard</span> web server</h2> <h2 id="gold-standard">The <span class="gold">gold standard</span> web server</h2>
<p> <p>
Caddy has the most robust TLS stack on the market. With stronger memory safety guarantees than OpenSSL (Apache &amp; NGINX) and more advanced certificate automation logic than any other server or utility, Caddy keeps your sites online through problems when other servers... won't. Caddy has the most robust TLS stack on the market. With stronger memory safety guarantees than OpenSSL (Apache &amp; NGINX) and more advanced certificate automation logic than any other server or utility, Caddy keeps your sites online through problems when other servers... won't.
</p> </p>
@ -754,7 +642,7 @@ reverse_proxy /api/* localhost:9002</code>
<section class="light gray feature"> <section class="light gray feature">
<div class="wrapper"> <div class="wrapper">
<h2>Recommended by experts</h2> <h2 id="experts-recommend">Recommended by experts</h2>
<p> <p>
Academic and industry experts recommend Caddy, which has been cited in peer-reviewed journals for its security defaults, best practices, and its uniquely advanced feature set. Academic and industry experts recommend Caddy, which has been cited in peer-reviewed journals for its security defaults, best practices, and its uniquely advanced feature set.
</p> </p>

141
new/resources/css/chroma.css
View file

@ -9,8 +9,7 @@
Derived from http://ethanschoonover.com/solarized Derived from http://ethanschoonover.com/solarized
*/ */
.chroma { .chroma {
/* background: linear-gradient(0deg, #f8fbfd 0%, #edf5fd 100%); */ background: linear-gradient(0deg, #f8fbfd 0%, #edf5fd 100%);
background: linear-gradient(to bottom, #eff7f9, transparent);
color: #254048; color: #254048;
} }
.chroma .c { color: #93a1a1 } /* Comment */ .chroma .c { color: #93a1a1 } /* Comment */
@ -88,75 +87,75 @@
Solarized Dark (High Contrast) Solarized Dark (High Contrast)
Derived from http://ethanschoonover.com/solarized Derived from http://ethanschoonover.com/solarized
*/ */
.dark .chroma { .dark .chroma:not(.light) {
background: linear-gradient(to bottom, #24454f, transparent); background: linear-gradient(to bottom, #24454f, transparent);
color: #93a1a1; color: #93a1a1;
} }
.dark .chroma .c { color: #586e75 } /* Comment */ .dark .chroma:not(.light) .c { color: #586e75 } /* Comment */
.dark .chroma .err { color: #93a1a1 } /* Error */ .dark .chroma:not(.light) .err { color: #93a1a1 } /* Error */
.dark .chroma .g { color: #93a1a1 } /* Generic */ .dark .chroma:not(.light) .g { color: #93a1a1 } /* Generic */
.dark .chroma .k { color: #76a507 } /* Keyword */ .dark .chroma:not(.light) .k { color: #76a507 } /* Keyword */
.dark .chroma .l { color: #93a1a1 } /* Literal */ .dark .chroma:not(.light) .l { color: #93a1a1 } /* Literal */
.dark .chroma .n { color: #93a1a1 } /* Name */ .dark .chroma:not(.light) .n { color: #93a1a1 } /* Name */
.dark .chroma .o { color: #76a507 } /* Operator */ .dark .chroma:not(.light) .o { color: #76a507 } /* Operator */
.dark .chroma .x { color: #ec662e } /* Other */ .dark .chroma:not(.light) .x { color: #ec662e } /* Other */
.dark .chroma .p { color: #93a1a1 } /* Punctuation */ .dark .chroma:not(.light) .p { color: #93a1a1 } /* Punctuation */
.dark .chroma .cm { color: #586e75 } /* Comment.Multiline */ .dark .chroma:not(.light) .cm { color: #586e75 } /* Comment.Multiline */
.dark .chroma .cp { color: #76a507 } /* Comment.Preproc */ .dark .chroma:not(.light) .cp { color: #76a507 } /* Comment.Preproc */
.dark .chroma .c1 { color: #586e75 } /* Comment.Single */ .dark .chroma:not(.light) .c1 { color: #586e75 } /* Comment.Single */
.dark .chroma .cs { color: #76a507 } /* Comment.Special */ .dark .chroma:not(.light) .cs { color: #76a507 } /* Comment.Special */
.dark .chroma .gd { color: #dc322f; background-color: #efdede } /* Generic.Deleted */ .dark .chroma:not(.light) .gd { color: #dc322f; background-color: #efdede } /* Generic.Deleted */
.dark .chroma .ge { color: #93a1a1; font-style: italic } /* Generic.Emph */ .dark .chroma:not(.light) .ge { color: #93a1a1; font-style: italic } /* Generic.Emph */
.dark .chroma .gr { color: #dc322f } /* Generic.Error */ .dark .chroma:not(.light) .gr { color: #dc322f } /* Generic.Error */
.dark .chroma .gh { color: #ec662e } /* Generic.Heading */ .dark .chroma:not(.light) .gh { color: #ec662e } /* Generic.Heading */
.dark .chroma .gi { color: #76a507 } /* Generic.Inserted */ .dark .chroma:not(.light) .gi { color: #76a507 } /* Generic.Inserted */
.dark .chroma .go { color: #93a1a1 } /* Generic.Output */ .dark .chroma:not(.light) .go { color: #93a1a1 } /* Generic.Output */
.dark .chroma .gp { color: #93a1a1 } /* Generic.Prompt */ .dark .chroma:not(.light) .gp { color: #93a1a1 } /* Generic.Prompt */
.dark .chroma .gs { color: #93a1a1; font-weight: bold } /* Generic.Strong */ .dark .chroma:not(.light) .gs { color: #93a1a1; font-weight: bold } /* Generic.Strong */
.dark .chroma .gu { color: #ec662e } /* Generic.Subheading */ .dark .chroma:not(.light) .gu { color: #ec662e } /* Generic.Subheading */
.dark .chroma .gt { color: #93a1a1 } /* Generic.Traceback */ .dark .chroma:not(.light) .gt { color: #93a1a1 } /* Generic.Traceback */
.dark .chroma .kc { color: #ec662e } /* Keyword.Constant */ .dark .chroma:not(.light) .kc { color: #ec662e } /* Keyword.Constant */
.dark .chroma .kd { color: #0090f5 } /* Keyword.Declaration */ .dark .chroma:not(.light) .kd { color: #0090f5 } /* Keyword.Declaration */
.dark .chroma .kn { color: #76a507 } /* Keyword.Namespace */ .dark .chroma:not(.light) .kn { color: #76a507 } /* Keyword.Namespace */
.dark .chroma .kp { color: #76a507 } /* Keyword.Pseudo */ .dark .chroma:not(.light) .kp { color: #76a507 } /* Keyword.Pseudo */
.dark .chroma .kr { color: #0090f5 } /* Keyword.Reserved */ .dark .chroma:not(.light) .kr { color: #0090f5 } /* Keyword.Reserved */
.dark .chroma .kt { color: #dc322f } /* Keyword.Type */ .dark .chroma:not(.light) .kt { color: #dc322f } /* Keyword.Type */
.dark .chroma .ld { color: #93a1a1 } /* Literal.Date */ .dark .chroma:not(.light) .ld { color: #93a1a1 } /* Literal.Date */
.dark .chroma .m { color: #09a598 } /* Literal.Number */ .dark .chroma:not(.light) .m { color: #09a598 } /* Literal.Number */
.dark .chroma .s { color: #09a598 } /* Literal.String */ .dark .chroma:not(.light) .s { color: #09a598 } /* Literal.String */
.dark .chroma .na { color: #93a1a1 } /* Name.Attribute */ .dark .chroma:not(.light) .na { color: #93a1a1 } /* Name.Attribute */
.dark .chroma .nb { color: #B58900 } /* Name.Builtin */ .dark .chroma:not(.light) .nb { color: #B58900 } /* Name.Builtin */
.dark .chroma .nc { color: #0090f5 } /* Name.Class */ .dark .chroma:not(.light) .nc { color: #0090f5 } /* Name.Class */
.dark .chroma .no { color: #ec662e } /* Name.Constant */ .dark .chroma:not(.light) .no { color: #ec662e } /* Name.Constant */
.dark .chroma .nd { color: #0090f5 } /* Name.Decorator */ .dark .chroma:not(.light) .nd { color: #0090f5 } /* Name.Decorator */
.dark .chroma .ni { color: #ec662e } /* Name.Entity */ .dark .chroma:not(.light) .ni { color: #ec662e } /* Name.Entity */
.dark .chroma .ne { color: #ec662e } /* Name.Exception */ .dark .chroma:not(.light) .ne { color: #ec662e } /* Name.Exception */
.dark .chroma .nf { color: #0090f5 } /* Name.Function */ .dark .chroma:not(.light) .nf { color: #0090f5 } /* Name.Function */
.dark .chroma .nl { color: #93a1a1 } /* Name.Label */ .dark .chroma:not(.light) .nl { color: #93a1a1 } /* Name.Label */
.dark .chroma .nn { color: #93a1a1 } /* Name.Namespace */ .dark .chroma:not(.light) .nn { color: #93a1a1 } /* Name.Namespace */
.dark .chroma .nx { color: #93a1a1 } /* Name.Other */ .dark .chroma:not(.light) .nx { color: #93a1a1 } /* Name.Other */
.dark .chroma .py { color: #93a1a1 } /* Name.Property */ .dark .chroma:not(.light) .py { color: #93a1a1 } /* Name.Property */
.dark .chroma .nt { color: #0090f5 } /* Name.Tag */ .dark .chroma:not(.light) .nt { color: #0090f5 } /* Name.Tag */
.dark .chroma .nv { color: #0090f5 } /* Name.Variable */ .dark .chroma:not(.light) .nv { color: #0090f5 } /* Name.Variable */
.dark .chroma .ow { color: #76a507 } /* Operator.Word */ .dark .chroma:not(.light) .ow { color: #76a507 } /* Operator.Word */
.dark .chroma .w { color: #93a1a1 } /* Text.Whitespace */ .dark .chroma:not(.light) .w { color: #93a1a1 } /* Text.Whitespace */
.dark .chroma .mf { color: #09a598 } /* Literal.Number.Float */ .dark .chroma:not(.light) .mf { color: #09a598 } /* Literal.Number.Float */
.dark .chroma .mh { color: #09a598 } /* Literal.Number.Hex */ .dark .chroma:not(.light) .mh { color: #09a598 } /* Literal.Number.Hex */
.dark .chroma .mi { color: #09a598 } /* Literal.Number.Integer */ .dark .chroma:not(.light) .mi { color: #09a598 } /* Literal.Number.Integer */
.dark .chroma .mo { color: #09a598 } /* Literal.Number.Oct */ .dark .chroma:not(.light) .mo { color: #09a598 } /* Literal.Number.Oct */
.dark .chroma .sb { color: #586e75 } /* Literal.String.Backtick */ .dark .chroma:not(.light) .sb { color: #586e75 } /* Literal.String.Backtick */
.dark .chroma .sc { color: #09a598 } /* Literal.String.Char */ .dark .chroma:not(.light) .sc { color: #09a598 } /* Literal.String.Char */
.dark .chroma .sd { color: #93a1a1 } /* Literal.String.Doc */ .dark .chroma:not(.light) .sd { color: #93a1a1 } /* Literal.String.Doc */
.dark .chroma .s2 { color: #09a598 } /* Literal.String.Double */ .dark .chroma:not(.light) .s2 { color: #09a598 } /* Literal.String.Double */
.dark .chroma .se { color: #ec662e } /* Literal.String.Escape */ .dark .chroma:not(.light) .se { color: #ec662e } /* Literal.String.Escape */
.dark .chroma .sh { color: #93a1a1 } /* Literal.String.Heredoc */ .dark .chroma:not(.light) .sh { color: #93a1a1 } /* Literal.String.Heredoc */
.dark .chroma .si { color: #09a598 } /* Literal.String.Interpol */ .dark .chroma:not(.light) .si { color: #09a598 } /* Literal.String.Interpol */
.dark .chroma .sx { color: #09a598 } /* Literal.String.Other */ .dark .chroma:not(.light) .sx { color: #09a598 } /* Literal.String.Other */
.dark .chroma .sr { color: #dc322f } /* Literal.String.Regex */ .dark .chroma:not(.light) .sr { color: #dc322f } /* Literal.String.Regex */
.dark .chroma .s1 { color: #09a598 } /* Literal.String.Single */ .dark .chroma:not(.light) .s1 { color: #09a598 } /* Literal.String.Single */
.dark .chroma .ss { color: #09a598 } /* Literal.String.Symbol */ .dark .chroma:not(.light) .ss { color: #09a598 } /* Literal.String.Symbol */
.dark .chroma .bp { color: #0090f5 } /* Name.Builtin.Pseudo */ .dark .chroma:not(.light) .bp { color: #0090f5 } /* Name.Builtin.Pseudo */
.dark .chroma .vc { color: #0090f5 } /* Name.Variable.Class */ .dark .chroma:not(.light) .vc { color: #0090f5 } /* Name.Variable.Class */
.dark .chroma .vg { color: #0090f5 } /* Name.Variable.Global */ .dark .chroma:not(.light) .vg { color: #0090f5 } /* Name.Variable.Global */
.dark .chroma .vi { color: #0090f5 } /* Name.Variable.Instance */ .dark .chroma:not(.light) .vi { color: #0090f5 } /* Name.Variable.Instance */
.dark .chroma .il { color: #09a598 } /* Literal.Number.Integer.Long */ .dark .chroma:not(.light) .il { color: #09a598 } /* Literal.Number.Integer.Long */

13
new/resources/css/home.css
View file

@ -200,12 +200,15 @@ div.ap-wrapper:fullscreen div.ap-player {
transition: background-color 250ms; transition: background-color 250ms;
} }
.rollover-green.show { background-color: #41e68fc7; } .dark .rollover-green.show { background-color: #41e68e2b; }
.rollover-purple.show { background-color: #a52fa59d; } .dark .rollover-purple.show { background-color: #a52fa55f; }
.rollover-blue.show { background-color: #0a62aaa3; } .dark .rollover-blue.show { background-color: #0a62aa5b; }
.rollover-yellow.show { background-color: #ffcb50; } .dark .rollover-yellow.show { background-color: #ffcb5064; }
.light .rollover-green.show { background-color: #41e68e4b; }
.light .rollover-purple.show { background-color: #a52fa545; }
.light .rollover-blue.show { background-color: #0a62aa3a; }
.light .rollover-yellow.show { background-color: #ffcb5064; }

2
new/resources/css/marketing.css
View file

@ -55,7 +55,7 @@ h1 .subheading b {
p, p,
h2 { h2 {
max-width: 850px; max-width: 950px;
} }
h2 { h2 {

57
new/resources/js/common.js
View file

@ -49,6 +49,63 @@ function cloneTemplate(tplSelector) {
// return document.importNode(elem.content, true); // return document.importNode(elem.content, true);
} }
// Find the first element matching a selector which contains the specified text
function findWithContent(selector, text) {
const selected = document.querySelectorAll(selector);
let found = null;
selected.forEach(element => {
if (element.textContent.includes(text)) {
found = element;
}
});
return found;
}
// Find the next element containing the specified text
function findNextText(startElement, nextText) {
let currentElement = startElement.nextSibling;
while (currentElement) {
if (currentElement.textContent.includes(nextText)) {
return currentElement;
}
currentElement = currentElement.nextSibling;
}
return null;
}
// Function to wrap the range between startElement and endElement in a new span
function wrapRangeWithSpan(startElement, endElement, className) {
// Check if startElement and endElement are the same
if (startElement === endElement) {
const span = document.createElement('span');
span.className = className;
span.appendChild(startElement.cloneNode(true));
startElement.parentNode.replaceChild(span, startElement);
return span;
}
// Create a new span element
const span = document.createElement('span');
span.className = className;
// Reference the parent node of the common ancestor
const parent = startElement.parentNode;
// Iterate through siblings and wrap them in the span
const toRemove = [];
for (var node = startElement; node; node = node.nextSibling) {
var clonedNode = node.cloneNode(true);
span.appendChild(clonedNode);
if (node === endElement) {
parent.replaceChild(span, endElement);
toRemove.forEach(node => parent.removeChild(node));
break;
}
toRemove.push(node);
}
return span;
}