Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

HTML and CSS cleaning #17

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

HTML and CSS cleaning #17

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
251 changes: 85 additions & 166 deletions tests/per_usage/divs_html_elements/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,88 +1,36 @@
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html class="dark-mode" xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
html.dark-mode {
color-scheme: dark;
--primary-color: #1982d2;
--primary-dark-color: #86a9c4;
--primary-light-color: #4779ac;
--box-shadow: 0 2px 8px 0 rgba(0,0,0,.30);
--odd-color: rgba(100,100,100,.06);
--menu-selected-background: rgba(0,0,0,.4);
--page-background-color: #1C1D1F;
--page-foreground-color: #d2dbde;
--page-secondary-foreground-color: #859399;
--separator-color: #38393b;
--side-nav-background: #252628;
--code-background: #2a2c2f;
--tablehead-background: #2a2c2f;
--blockquote-background: #222325;
--blockquote-foreground: #7e8c92;
--warning-color: #2e1917;
--warning-color-dark: #ad2617;
--warning-color-darker: #f5b1aa;
--note-color: #3b2e04;
--note-color-dark: #f1b602;
--note-color-darker: #ceb670;
--todo-color: #163750;
--todo-color-dark: #1982D2;
--todo-color-darker: #dcf0fa;
--deprecated-color: #2e323b;
--deprecated-color-dark: #738396;
--deprecated-color-darker: #abb0bd;
--bug-color: #2a2536;
--bug-color-dark: #7661b3;
--bug-color-darker: #ae9ed6;
--invariant-color: #303a35;
--invariant-color-dark: #76ce96;
--invariant-color-darker: #cceed5;
--fragment-background: #282c34;
--fragment-foreground: #dbe4eb;
--fragment-keyword: #cc99cd;
--fragment-keywordtype: #ab99cd;
--fragment-keywordflow: #e08000;
--fragment-token: #7ec699;
--fragment-comment: #999999;
--fragment-link: #98c0e3;
--fragment-preprocessor: #65cabe;
--fragment-linenumber-color: #cccccc;
--fragment-linenumber-background: #35393c;
--fragment-linenumber-border: #1f1f1f;
}
:root {
--border-radius-small: 4px;
--border-radius-medium: 6px;
--border-radius-large: 8px;
--spacing-small: 5px;
--spacing-medium: 10px;
--spacing-large: 16px;
--content-maxwidth: 1050px;
}
code.stylished {
border-radius: var(--border-radius-small);
border: 1px solid var(--separator-color);
overflow: hidden;
}
div.contents.stylished {
max-width: var(--content-maxwidth);
margin: calc(var(--spacing-medium) + .2em) auto var(--spacing-medium) auto;
}
</style>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" class="dark-mode" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Awesome Doc</title>

<!-- dark-mode style -->
<link rel="stylesheet" href="styles/styles.css" />

<!-- highlight -->
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/languages/cpp.min.js" integrity="sha512-IAojhJDNJ4oC/Eui96KT2gmg2iwV2MsxTDs9CzqrrjNF8OdKV4MQE8H9fHbOXIsTaYZjLAVgtPOeyBNtD8LLEw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/highlight.min.js"></script>
<!-- default theme -->
<link id='code_theme_stylesheet' rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/styles/tokyo-night-dark.min.css" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link
id="code_theme_stylesheet"
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/styles/tokyo-night-dark.min.css"
crossorigin="anonymous"
referrerpolicy="no-referrer"
/>

<!-- jquery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<!-- awesome-doc-code-sections -->
<!-- <link id='code_theme_stylesheet' rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/styles/tokyo-night-light.min.css" crossorigin="anonymous" referrerpolicy="no-referrer" /> -->
<link id='code_theme_stylesheet' rel="stylesheet" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link
id="code_theme_stylesheet"
rel="stylesheet"
crossorigin="anonymous"
referrerpolicy="no-referrer"
/>
<script type="text/javascript" src="/awesome-doc-code-sections.js"></script>
<script type="text/javascript" src="/awesome-doc-code-sections_dark-mode.js"></script>

Expand All @@ -91,69 +39,34 @@
adcs.initialize();
adcs.ThemeSelector.initialize();
</script> -->
<script type="text/javascript">

hljs.configure({
ignoreUnescapedHTML: true,
throwUnescapedHTML: false,
languages: ['cpp', 'c', 'bash', 'cmake', 'markdown', 'json', 'plaintext']
})

awesome_doc_code_sections.options.configure({
doxygen_awesome_css_compatibility: true
})
awesome_doc_code_sections.configuration.CE = new Map([
// fallback configurations
[
'cpp',
{
language: 'c++',
compiler_id: 'clang1500',
default_options: '-O2 -std=c++20'
}
]
])
awesome_doc_code_sections.initialize(); // initialize all features
</script>

<script type="text/javascript">
let is_stylished = false
function toggle_style() {

const stylished_classname = 'stylished'

let apply_toggle_style = is_stylished
? function (elements) { elements.removeClass(`${stylished_classname}`)}
: function (elements) { elements.addClass (`${stylished_classname}`)}
is_stylished = !is_stylished

let elements = $('body').find('code, div.fragment, pre.fragment, div.contents')
apply_toggle_style(elements)
}

let is_small = false
function toggle_small() {

let r = document.querySelector(':root');
let rs = getComputedStyle(r);
let content_max_width = rs.getPropertyValue('--content-maxwidth');

r.style.setProperty('--content-maxwidth', (is_small ? 1050 : 500) + 'px');
is_small = !is_small
}
</script>
</head>
<body>
<button onclick="toggle_style()">Toggle style</button>
<button onclick="toggle_small()">Toggle small</button>

<br />

<div class="contents">

Code section: CE Execution (explicit), show block, show line, header replacement
<div class='awesome-doc-code-sections_code-section'>
<pre><code>
<!-- configuration script -->
<script src="scripts/awesome-doc-configuration.js" defer></script>

<!-- styling and sizing script -->
<script src="scripts/awesome-doc-styling.js"></script>
</head>

<body>
<header>
<h1>Awesome Docs - Div Elements</h1>
<ul id="toggle-style-container">
<li>
<button onclick="toggle_style()">Toggle style</button>
</li>
<li>
<button onclick="toggle_small()">Toggle small</button>
</li>
</ul>
</header>

<main class="contents">
<section>
<h2>
Code section: CE Execution (explicit), show block, show line, header replacement
</h2>
<div class="awesome-doc-code-sections_code-section">
<pre><code>
// some comment here
// ...

Expand All @@ -179,13 +92,16 @@
// @awesome-doc-code-sections::show::block::end
}
</code></pre>
</div>

<br />

Code section: CE Execution (explicit), show block, show line, header replacement, long-line
<div class='awesome-doc-code-sections_code-section'>
<pre><code>
</div>
</section>

<section>
<h2>
Code section: CE Execution (explicit), show block, show line, header replacement,
long-line
</h2>
<div class="awesome-doc-code-sections_code-section">
<pre><code>
// some comment here
// ...

Expand All @@ -212,13 +128,16 @@
// @awesome-doc-code-sections::show::block::end
}
</code></pre>
</div>

<br />

Code section: CE Execution (explicit), show block, show (possibly empty) line, header replacement, stdout/stderr outputs
<div class='awesome-doc-code-sections_code-section'>
<pre><code>
</div>
</section>

<section>
<h2>
Code section: CE Execution (explicit), show block, show (possibly empty) line, header
replacement, stdout/stderr outputs
</h2>
<div class="awesome-doc-code-sections_code-section">
<pre><code>
// some comment here
// ...

Expand Down Expand Up @@ -249,13 +168,13 @@
// @awesome-doc-code-sections::show::block::end
}
</code></pre>
</div>

<br />
</div>
</section>

Code section: CE Execution (default), skip line, skip block
<div class='awesome-doc-code-sections_code-section' language="cpp">
<pre><code>
<section>
<h2>Code section: CE Execution (default), skip line, skip block</h2>
<div class="awesome-doc-code-sections_code-section" language="cpp">
<pre><code>
// some comment here
// ...

Expand All @@ -276,13 +195,13 @@
// and me too !
// @awesome-doc-code-sections::skip::block::end
</code></pre>
</div>
</div>
</section>

<br />

Basic code section (no parsing, no execution)
<div class='awesome-doc-code-sections_basic-code-section' language="cpp">
<pre><code>
<section>
<h2>Basic code section (no parsing, no execution)</h2>
<div class="awesome-doc-code-sections_basic-code-section" language="cpp">
<pre><code>
// some comment here
// ...

Expand All @@ -304,8 +223,8 @@
// @awesome-doc-code-sections::show::block::end
}
</code></pre>
</div>

</div>
</body>
</div>
</section>
</main>
</body>
</html>
21 changes: 21 additions & 0 deletions tests/per_usage/divs_html_elements/scripts/awesome-doc-configuration.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
hljs.configure({
ignoreUnescapedHTML: true,
throwUnescapedHTML: false,
languages: ["cpp", "c", "bash", "cmake", "markdown", "json", "plaintext"],
});

awesome_doc_code_sections.options.configure({
doxygen_awesome_css_compatibility: true,
});
awesome_doc_code_sections.configuration.CE = new Map([
// fallback configurations
[
"cpp",
{
language: "c++",
compiler_id: "clang1500",
default_options: "-O2 -std=c++20",
},
],
]);
awesome_doc_code_sections.initialize(); // initialize all features
26 changes: 26 additions & 0 deletions tests/per_usage/divs_html_elements/scripts/awesome-doc-styling.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
let is_stylished = false;
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'd rather name that file "style-mutators" rather than "styling", so the purpose is explicit

function toggle_style() {
const stylished_classname = "stylished";

let apply_toggle_style = is_stylished
? function (elements) {
elements.removeClass(`${stylished_classname}`);
}
: function (elements) {
elements.addClass(`${stylished_classname}`);
};
is_stylished = !is_stylished;

let elements = $("body").find("code, div.fragment, pre.fragment, main.contents");
apply_toggle_style(elements);
}

let is_small = false;
function toggle_small() {
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

toggle_small -> toggle_small_style

Right now, this function only works if toggle_style was called before.

An improvement here would be to add a simple if-then here, such as :

if (!is_stylished)
   toggle_style()

and modify toggle_style so when L7 it removes the classes, then it also reset sizes

L7 :

function (elements) {
        elements.removeClass(`${stylished_classname}`);
        if (is_small)
            toggle_small()
      }

let r = document.querySelector(":root");
let rs = getComputedStyle(r);
let content_max_width = rs.getPropertyValue("--content-maxwidth");

r.style.setProperty("--content-maxwidth", (is_small ? 1050 : 500) + "px");
is_small = !is_small;
}
Loading