florian.richer/portfolio_leptos
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add dark light for highlight

Browse source
This commit is contained in:
Florian RICHER 2023-12-09 15:07:06 +01:00
parent cde7d8db7f
commit 8845db8993
7 changed files with 1709 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
public/css/github-dark-dimmed.min.css vendored Normal file
View file

@ -0,0 +1,9 @@
pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px}/*!
Theme: GitHub Dark Dimmed
Description: Dark dimmed theme as seen on github.com
Author: github.com
Maintainer: @Hirse
Updated: 2021-05-15
Colors taken from GitHub's CSS
*/.hljs{color:#adbac7;background:#22272e}.hljs-doctag,.hljs-keyword,.hljs-meta .hljs-keyword,.hljs-template-tag,.hljs-template-variable,.hljs-type,.hljs-variable.language_{color:#f47067}.hljs-title,.hljs-title.class_,.hljs-title.class_.inherited__,.hljs-title.function_{color:#dcbdfb}.hljs-attr,.hljs-attribute,.hljs-literal,.hljs-meta,.hljs-number,.hljs-operator,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-id,.hljs-variable{color:#6cb6ff}.hljs-meta .hljs-string,.hljs-regexp,.hljs-string{color:#96d0ff}.hljs-built_in,.hljs-symbol{color:#f69d50}.hljs-code,.hljs-comment,.hljs-formula{color:#768390}.hljs-name,.hljs-quote,.hljs-selector-pseudo,.hljs-selector-tag{color:#8ddb8c}.hljs-subst{color:#adbac7}.hljs-section{color:#316dca;font-weight:700}.hljs-bullet{color:#eac55f}.hljs-emphasis{color:#adbac7;font-style:italic}.hljs-strong{color:#adbac7;font-weight:700}.hljs-addition{color:#b4f1b4;background-color:#1b4721}.hljs-deletion{color:#ffd8d3;background-color:#78191b}

10
public/css/github.min.css vendored Normal file
View file

@ -0,0 +1,10 @@
pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px}/*!
Theme: GitHub
Description: Light theme as seen on github.com
Author: github.com
Maintainer: @Hirse
Updated: 2021-05-15
Outdated base version: https://github.com/primer/github-syntax-light
Current colors taken from GitHub's CSS
*/.hljs{color:#24292e;background:#fff}.hljs-doctag,.hljs-keyword,.hljs-meta .hljs-keyword,.hljs-template-tag,.hljs-template-variable,.hljs-type,.hljs-variable.language_{color:#d73a49}.hljs-title,.hljs-title.class_,.hljs-title.class_.inherited__,.hljs-title.function_{color:#6f42c1}.hljs-attr,.hljs-attribute,.hljs-literal,.hljs-meta,.hljs-number,.hljs-operator,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-id,.hljs-variable{color:#005cc5}.hljs-meta .hljs-string,.hljs-regexp,.hljs-string{color:#032f62}.hljs-built_in,.hljs-symbol{color:#e36209}.hljs-code,.hljs-comment,.hljs-formula{color:#6a737d}.hljs-name,.hljs-quote,.hljs-selector-pseudo,.hljs-selector-tag{color:#22863a}.hljs-subst{color:#24292e}.hljs-section{color:#005cc5;font-weight:700}.hljs-bullet{color:#735c0f}.hljs-emphasis{color:#24292e;font-style:italic}.hljs-strong{color:#24292e;font-weight:700}.hljs-addition{color:#22863a;background-color:#f0fff4}.hljs-deletion{color:#b31d28;background-color:#ffeef0}

7
public/js/autoload.js Normal file
View file

@ -0,0 +1,7 @@
function load() {
hljs.highlightAll();
mermaid.initialize();
mermaid.run({ querySelector: ".language-mermaid" });
}
window.onload = load;

1646
public/js/mermaid.min.js vendored Normal file
View file

File diff suppressed because one or more lines are too long

21
src/app/mod.rs
View file

@ -10,28 +10,21 @@ use leptos_router::*;
pub fn App() -> impl IntoView {
provide_meta_context();
// https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/
view! {
<Stylesheet id="leptos" href="/pkg/portfolio.css"/>
<Link rel="shortcut icon" type_="image/ico" href="/favicon.ico"/>
<Link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github-dark-dimmed.min.css"/>
<script src="/js/highlight.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/mermaid@10.6.1/dist/mermaid.min.js"></script>
<Router>
<Routes>
<Route path="" view=pages::Home/>
<Route path="posts" view=pages::PostList/>
<Route path="posts/:slug" view=|| view! {
<script>
r#"
document.onreadystatechange = () => {
if (document.readyState === "complete") {
hljs.highlightAll();
mermaid.initialize();
mermaid.run({ querySelector: ".language-mermaid" });
}
};
"#
</script>
<Link media="(prefers-color-scheme: dark)" rel="stylesheet" href="/css/github-dark-dimmed.min.css"/>
<Link media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" rel="stylesheet" href="/css/github.min.css"/>
<script src="/js/highlight.min.js"></script>
<script src="/js/mermaid.min.js"></script>
<script src="/js/autoload.js"/>
<pages::PostElement/>
}/>
</Routes>

28
style/mermaid.css Normal file
View file

@ -0,0 +1,28 @@
@layer components {
.edgeLabel {
@apply !bg-surface dark:!bg-dark_surface !text-on_surface dark:!text-dark_on_surface;
}
.label {
@apply !bg-surface dark:!bg-dark_surface !text-on_surface dark:!text-dark_on_surface;
}
.arrowheadPath {
@apply !fill-surface dark:!fill-dark_surface !stroke-surface dark:!stroke-dark_surface;
}
.path {
@apply !stroke-surface dark:!stroke-dark_surface;
}
.cluster rect,
.node rect,
.node circle,
.node ellipse,
.node polygon,
.node path {
@apply !fill-surface dark:!fill-dark_surface !stroke-surface dark:!stroke-dark_surface;
}
.marker {
@apply !fill-surface dark:!fill-dark_surface !stroke-surface dark:!stroke-dark_surface;
}
.marker.cross {
@apply !stroke-surface dark:!stroke-dark_surface;
}
}

3
style/portfolio.css
View file

@ -8,4 +8,5 @@
@import './social_links.css';
@import './tag.css';
@import './timeline.css';
@import './top_component.css';
@import './top_component.css';
/*@import './mermaid.css';*/