kjuulh/dagger
Archived
1
0
Fork 0
Code Issues 1 Pull Requests 1 Projects Releases Wiki Activity

docs: 💄 apply dagger style

Browse Source 
Signed-off-by: slumbering <slumbering.pierrot@gmail.com>
This commit is contained in:
slumbering 2021-06-03 16:10:44 +02:00
parent 30739c2728
commit 1450b86b31
6 changed files with 356 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
tools/daggosaurus/docusaurus.config.js
View File

@ -32,6 +32,15 @@ module.exports = {
apiKey: 'cd4551565ea091140ab8f6c968ea670f',
indexName: 'docs_dagger'
},
colorMode: {
// "light" | "dark"
defaultMode: 'light',
switchConfig: {
darkIcon: "img/Icon_Night-mode.svg",
lightIcon: 'img/Icon_Day-mode.svg',
},
},
},
presets: [
[

180
tools/daggosaurus/src/css/custom.css
View File

@ -11,63 +11,48 @@
--ifm-color-primary-dark: #131226;
--ifm-color-primary-darker: rgb(31, 165, 136);
--ifm-color-primary-darkest: rgb(26, 136, 112);
--ifm-color-primary-light: #fffef3;
--ifm-color-primary-light: #fffef6;
--ifm-color-primary-lighter: rgb(102, 212, 189);
--ifm-color-primary-lightest: rgb(146, 224, 208);
--ifm-code-font-size: 95%;
--ifm-color-secondary: #66ac9f50;
--ifm-navbar-height: 5rem;
--ifm-background-color: var(--ifm-color-primary-light);
--ifm-navbar-background-color: var(--ifm-color-primary-light);
--ifm-menu-color: var(--ifm-color-primary-dark);
--ifm-menu-color-active: var(--ifm-color-primary-dark);
--ifm-menu-color-background-hover: #fdf9d7;
--ifm-font-family-base: "Karla", sans-serif;
/* --ifm-font-family-monospace: "Karla", sans-serif; */
--ifm-font-family-monospace: "Courier new", sans-serif;
--ifm-code-background: var(--ifm-color-primary);
--ifm-code-font-size: 100%;
--ifm-code-border-radius: 2rem;
--ifm-code-color: var(--ifm-color-primary-light);
--ifm-code-padding-vertical: 0.3rem;
--ifm-code-padding-horizontal: 0.5rem;
--ifm-h2-font-size: 2rem;
--ifm-menu-color-background-active: var(--ifm-color-primary);
--ifm-menu-color-active: var(--ifm-color-primary-light);
--ifm-leading-desktop: 2;
--ifm-toc-border-color: transparent;
--ifm-toc-link-color: var(--ifm-color-primary-dark);
--ifm-font-color-base: var(--ifm-color-primary-dark);
--ifm-link-color: var(--ifm-color-primary-dark);
--ifm-link-hover-color: var(--ifm-color-primary);
--ifm-pre-padding: 2rem;
--ifm-pagination-nav-border-radius: 2rem;
}
html[data-theme="dark"] {
--ifm-background-color: var(--ifm-color-primary-dark);
--ifm-navbar-background-color: transparent;
--ifm-menu-color-active: var(--ifm-color-primary-light);
--ifm-menu-color-active: var(--ifm-color-primary-light);
--ifm-link-color: var(--ifm-color-primary-light);
--ifm-link-hover-color: var(--ifm-color-primary-light);
--ifm-toc-link-color: var(--ifm-color-primary-light);
--ifm-pagination-nav-color-hover: var(--ifm-color-primary-light);
}
#__docusaurus {
background-color: var(--ifm-color-primary-light);
}
html[data-theme="dark"] #__docusaurus {
background: linear-gradient(
180deg,
var(--ifm-color-primary-dark),
var(--ifm-color-primary)
);
}
.docusaurus-highlight-code-line {
background-color: rgb(72, 77, 91);
display: block;
margin: 0 calc(-1 * var(--ifm-pre-padding));
padding: 0 var(--ifm-pre-padding);
}
.navbar__brand {
height: var(--ifm-navbar-height);
}
.navbar {
max-width: var(--ifm-container-width-xl);
align-self: center;
box-shadow: none;
}
.main-wrapper {
max-width: var(--ifm-container-width-xl);
align-self: center;
}
/* global */
h1,
h2,
@ -90,6 +75,58 @@ p {
line-height: 24px;
}
#__docusaurus {
background-color: var(--ifm-color-primary-light);
}
html[data-theme="dark"] #__docusaurus {
background: linear-gradient(
180deg,
var(--ifm-color-primary-dark),
var(--ifm-color-primary)
);
}
.docusaurus-highlight-code-line {
background-color: rgb(72, 77, 91);
display: block;
margin: 0 calc(-1 * var(--ifm-pre-padding));
padding: 0 var(--ifm-pre-padding);
}
/* navbar */
.navbar__brand {
height: var(--ifm-navbar-height);
}
.navbar {
max-width: var(--ifm-container-width-xl);
align-self: center;
box-shadow: none;
}
/* main */
.main-wrapper {
max-width: var(--ifm-container-width-xl);
align-self: center;
}
main[class^="docMainContainer"] {
background: #ffffff;
box-shadow: 0px 4px 16px 4px #13122610;
border-radius: 2rem;
margin-top: 1rem;
}
html[data-theme="dark"] main[class^="docMainContainer"] {
background: var(--ifm-color-primary);
box-shadow: 0px 4px 16px 4px #13122610;
border-radius: 2rem;
margin-top: 1rem;
color: #fffef6;
}
/* table-of-contents */
.table-of-contents {
font-size: 1rem;
}
@ -101,3 +138,72 @@ html[data-theme="dark"] .table-of-contents__link--active,
html[data-theme="dark"] .table-of-contents__link:hover {
color: var(--ifm-color-primary-light);
}
/* codeBlock */
div[class^="codeBlock"] {
border-radius: var(--ifm-code-border-radius);
background-color: var(--ifm-color-primary) !important;
}
html[data-theme="dark"] div[class^="codeBlock"] {
background-color: var(--ifm-color-primary-light) !important;
}
div[class^="codeBlockLines"] .token-line {
color: var(--ifm-color-primary-light) !important;
}
html[data-theme="dark"] div[class^="codeBlockLines"] .token-line {
color: var(--ifm-color-primary) !important;
}
/* badge */
.badge--secondary {
color: var(--ifm-color-primary-dark);
}
/* hash-link */
.hash-link {
color: #40b8bb;
}
.hash-link:hover {
color: #175761;
}
.hash-link:focus {
color: var(--ifm-color-primary-dark);
}
/* link */
.menu__link {
border-radius: 2rem;
}
.menu__link:focus {
background-color: var(--ifm-color-primary-dark);
color: var(--ifm-color-primary-light);
}
.menu__link:active {
background-color: var(--ifm-color-primary);
color: var(--ifm-color-primary-light);
}
html[data-theme="dark"] .menu__link {
color: var(--ifm-color-primary-light);
}
html[data-theme="dark"] .menu__link:hover {
color: var(--ifm-color-primary-dark);
}
html[data-theme="dark"] .menu__link[href=""]:hover,
html[data-theme="dark"] .menu__link[href="#"]:hover {
color: var(--ifm-color-primary-light);
}
html[data-theme="dark"] .menu__link:focus {
color: var(--ifm-color-primary-light);
}
html[data-theme="dark"] .menu__link:active {
background-color: var(--ifm-color-primary-light);
color: var(--ifm-color-primary-dark);
}

97
tools/daggosaurus/src/theme/Toggle/index.js Normal file
View File

@ -0,0 +1,97 @@
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
import React, { useState, useRef, memo } from 'react';
import { useThemeConfig } from '@docusaurus/theme-common';
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
import clsx from 'clsx';
import styles from './styles.module.css';
import DarkIcon from "../../../static/img/Icon_Night-mode.svg"
import LightIcon from "../../../static/img/Icon_Day-mode.svg"
const Dark = ({ icon, style }) => (
<span className={clsx(styles.toggle, styles.dark)} style={style}>
<DarkIcon />
</span>
);
const Light = ({ icon, style }) => (
<span className={clsx(styles.toggle, styles.light)} style={style}>
<LightIcon />
</span>
); // Based on react-toggle (https://github.com/aaronshaf/react-toggle/).
const Toggle = memo(
({ className, icons, checked: defaultChecked, disabled, onChange }) => {
const [checked, setChecked] = useState(defaultChecked);
const [focused, setFocused] = useState(false);
const inputRef = useRef(null);
const handleToggle = (e) => {
const checkbox = inputRef.current;
if (!checkbox) {
return;
}
if (e.target !== checkbox) {
e.preventDefault();
checkbox.focus();
checkbox.click();
return;
}
setChecked(checkbox?.checked);
};
return (
<div
className={clsx('react-toggle', className, {
'react-toggle--checked': checked,
'react-toggle--focus': focused,
'react-toggle--disabled': disabled,
})}
role="button"
tabIndex={-1}
onClick={handleToggle}>
<div className="react-toggle-track">
<div className="react-toggle-track-check">{icons.checked}</div>
<div className="react-toggle-track-x">{icons.unchecked}</div>
</div>
<div className="react-toggle-thumb" />
<input
ref={inputRef}
checked={checked}
type="checkbox"
className="react-toggle-screenreader-only"
aria-label="Switch between dark and light mode"
onChange={onChange}
onFocus={() => setFocused(true)}
onBlur={() => setFocused(false)}
/>
</div>
);
},
);
export default function (props) {
const {
colorMode: {
switchConfig: { darkIcon, darkIconStyle, lightIcon, lightIconStyle },
},
} = useThemeConfig();
const { isClient } = useDocusaurusContext();
return (
<Toggle
disabled={!isClient}
icons={{
checked: <Dark icon={darkIcon} style={darkIconStyle} />,
unchecked: <Light icon={lightIcon} style={lightIconStyle} />,
}}
{...props}
/>
);
}

105
tools/daggosaurus/src/theme/Toggle/styles.module.css Normal file
View File

@ -0,0 +1,105 @@
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
.toggle {
align-items: center;
display: flex;
height: 16px;
justify-content: center;
width: 21px;
}
.toggle::before {
position: absolute;
}
/**
* styles for React Toggle
* copied over because we want to allow user to swizzle it and modify the css
* and also to make sure its compatible with our dark mode
* https://github.com/aaronshaf/react-toggle/blob/master/style.css
*/
:global(.react-toggle) {
touch-action: pan-x;
position: relative;
cursor: pointer;
user-select: none;
-webkit-tap-highlight-color: transparent;
}
:global(.react-toggle-screenreader-only) {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
position: absolute;
width: 1px;
}
:global(.react-toggle--disabled) {
cursor: not-allowed;
}
:global(.react-toggle-track) {
width: 55px;
height: 24px;
border-radius: 30px;
background-color: #40b8bb;
transition: all 0.2s ease;
}
:global(.react-toggle-track-check) {
position: absolute;
width: 21px;
height: 16px;
top: 0px;
bottom: 0px;
margin: auto 0;
left: 6px;
opacity: 0;
transition: opacity 0.25s ease;
}
:global([data-theme="dark"] .react-toggle .react-toggle-track-check),
:global(.react-toggle--checked .react-toggle-track-check) {
opacity: 1;
transition: opacity 0.25s ease;
}
:global(.react-toggle-track-x) {
position: absolute;
width: 21px;
height: 16px;
top: 0px;
bottom: 0px;
margin: auto 0;
right: 6px;
opacity: 1;
transition: opacity 0.25s ease;
}
:global([data-theme="dark"] .react-toggle .react-toggle-track-x),
:global(.react-toggle--checked .react-toggle-track-x) {
opacity: 0;
}
:global(.react-toggle-thumb) {
position: absolute;
top: -1px;
left: 0;
width: 26px;
height: 26px;
border: 3px solid var(--ifm-color-primary-dark);
border-radius: 50%;
background-color: #fafafa;
transition: all 0.25s ease;
}
:global([data-theme="dark"] .react-toggle .react-toggle-thumb),
:global(.react-toggle--checked .react-toggle-thumb) {
left: 31px;
}

1
tools/daggosaurus/static/img/Icon_Day-mode.svg Normal file
View File

@ -0,0 +1 @@
<svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 21"><defs><style>.cls-2{fill:#131226}</style></defs><path d="M8.09 7.93a2.824 2.824 0 012.61 2.54 4.082 4.082 0 01-.52 1.86c-.47.71-.93.54-1.63.52-.85-.02-1.65-.04-2.17-.83a3.249 3.249 0 01-.46-1.51c.05-.76-.02-1.67.69-2.15a2.879 2.879 0 011.48-.43z" fill="#fcc016"/><path class="cls-2" d="M14.85 7.64c.63-.58 1.56.35.95.93a5.671 5.671 0 01-1.97.97c-.81.25-1.17-1.02-.35-1.29.25-.09.49-.2.73-.31.15-.06.32-.15.49-.23a1 1 0 01.19-.11zM15.43 13.07c.78.35.1 1.49-.66 1.15-.5-.22-.99-.71-1.41-.88-.78-.32-.44-1.6.35-1.29.63.25 1.11.75 1.72 1.02zM11.29 17.43a7.45 7.45 0 01-.87-1.85c-.29-.82 1-1.15 1.29-.36a6.523 6.523 0 00.73 1.53c.49.71-.66 1.37-1.15.68zM12.88 4.67c-.29.54-.66 1.03-.96 1.58a.673.673 0 01-1.16-.68c.31-.55.68-1.04.97-1.58.41-.76 1.56-.09 1.15.68zM7.05 5.08a6.818 6.818 0 01-.41-2.23c-.04-.86 1.29-.85 1.32 0a6.263 6.263 0 00.36 1.87c.27.81-1 1.15-1.27.36zM6.54 15.43c.32-.78 1.61-.44 1.29.35a16.9 16.9 0 00-.72 2.07.669.669 0 01-1.29-.35 16.332 16.332 0 01.72-2.07zM8.57 14.34a3.979 3.979 0 01-3.14-1.1 4.554 4.554 0 01-1-2.68 4.53 4.53 0 01.07-1.22 3.541 3.541 0 01.87-2.05 3.935 3.935 0 012.66-.91c2.09.23 4.24 1.82 4.2 4.09a5.512 5.512 0 01-1.09 3.13 2.693 2.693 0 01-2.57.74zm-.48-6.41a2.879 2.879 0 00-1.48.43c-.71.48-.64 1.39-.69 2.15a3.249 3.249 0 00.46 1.51c.52.79 1.32.81 2.17.83.7.02 1.16.19 1.63-.52a4.082 4.082 0 00.52-1.86 2.824 2.824 0 00-2.61-2.54zM3.96 7.21a9.267 9.267 0 01-1.72-1.22c-.66-.51 0-1.66.68-1.15a8.946 8.946 0 001.72 1.22c.78.34.1 1.48-.68 1.15zM2.48 13.78a4.587 4.587 0 01.71-.54c.77-.36 1.45.8.67 1.13a4.394 4.394 0 00-1.35 1.19c-.54.66-1.47-.27-.93-.93a6.568 6.568 0 01.9-.85zM2.67 9.35c.85-.08.85 1.24 0 1.33a10.022 10.022 0 01-2.19-.09.666.666 0 01-.46-.81.687.687 0 01.81-.48 6.656 6.656 0 001.84.05z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.8 KiB

1
tools/daggosaurus/static/img/Icon_Night-mode.svg Normal file
View File

@ -0,0 +1 @@
<svg data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 21"><path d="M5.85 12.4a4.044 4.044 0 002.92 2.59 6 6 0 001.68.11 6.481 6.481 0 01-3.31.63c-1.91-.14-4.05-1.19-4.42-3.26a6.213 6.213 0 011.71-5.41 4.414 4.414 0 013.55-1.2 4.928 4.928 0 00-1.65 1.97 6.471 6.471 0 00-.48 4.57z" fill="#fcfad8"/><path d="M10.45 15.1a6 6 0 01-1.68-.11 4.044 4.044 0 01-2.92-2.59 6.471 6.471 0 01.48-4.57 4.928 4.928 0 011.65-1.97 4.414 4.414 0 00-3.55 1.2 6.213 6.213 0 00-1.71 5.41c.37 2.07 2.51 3.12 4.42 3.26a6.481 6.481 0 003.31-.63zm.35-9.07a.685.685 0 01-.25.42.724.724 0 01-.52.2c-2.13.6-3.06 2.98-2.69 5.05.46 2.66 4.05 1.72 5.69 1.11.89-.34 1.32.95.63 1.44a.757.757 0 01-.22.67 8.26 8.26 0 01-6.53 2.41 6.145 6.145 0 01-5.74-4.43 7.8 7.8 0 012.3-7.15 5.76 5.76 0 017-.64.817.817 0 01.33.92z" fill="#131226"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 830 B