mirror of
https://github.com/codex-team/codex.docs.git
synced 2025-07-19 13:19:42 +02:00
Merge branch 'main' into feature/backend-search
This commit is contained in:
Taly
commit
f355596870
24 changed files with 1607 additions and 24781 deletions
23626
package-lock.json
generated
23626
package-lock.json
generated
File diff suppressed because it is too large
Load diff
|
|
@ -18,6 +18,7 @@
|
|||
"editor-upgrade": "yarn add -D @editorjs/{editorjs,header,code,delimiter,list,link,image,table,inline-code,marker,warning,checklist,raw}@latest"
|
||||
},
|
||||
"dependencies": {
|
||||
"@codexteam/shortcuts": "^1.2.0",
|
||||
"@hawk.so/javascript": "^3.0.1",
|
||||
"@hawk.so/nodejs": "^3.1.2",
|
||||
"config": "^3.3.6",
|
||||
|
|
@ -50,7 +51,7 @@
|
|||
"@editorjs/checklist": "^1.3.0",
|
||||
"@editorjs/code": "^2.7.0",
|
||||
"@editorjs/delimiter": "^1.2.0",
|
||||
"@editorjs/editorjs": "^2.23.2",
|
||||
"@editorjs/editorjs": "^2.25.0",
|
||||
"@editorjs/embed": "^2.5.1",
|
||||
"@editorjs/header": "^2.6.2",
|
||||
"@editorjs/image": "^2.6.2",
|
||||
|
|
|
|||
|
|
@ -14,10 +14,6 @@ class Aliases {
|
|||
public static async get(aliasName: string): Promise<Alias> {
|
||||
const alias = await Alias.get(aliasName);
|
||||
|
||||
if (!alias.id) {
|
||||
throw new Error('Entity with given alias does not exist');
|
||||
}
|
||||
|
||||
return alias;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,6 +4,8 @@ import Pages from '../controllers/pages.js';
|
|||
import Alias from '../models/alias.js';
|
||||
import verifyToken from './middlewares/token.js';
|
||||
import PagesFlatArray from '../models/pagesFlatArray.js';
|
||||
import HttpException from '../exceptions/httpException.js';
|
||||
|
||||
|
||||
const router = express.Router();
|
||||
|
||||
|
|
@ -24,7 +26,7 @@ router.get('*', verifyToken, async (req: Request, res: Response) => {
|
|||
const alias = await Aliases.get(url);
|
||||
|
||||
if (alias.id === undefined) {
|
||||
throw new Error('Alias not found');
|
||||
throw new HttpException(404, 'Alias not found');
|
||||
}
|
||||
|
||||
switch (alias.type) {
|
||||
|
|
@ -46,11 +48,18 @@ router.get('*', verifyToken, async (req: Request, res: Response) => {
|
|||
}
|
||||
}
|
||||
} catch (err) {
|
||||
res.status(400).json({
|
||||
if (err instanceof HttpException && (err as HttpException).status === 404) {
|
||||
res.status(404).render('error', {
|
||||
message: 'Page not found',
|
||||
status: 404,
|
||||
});
|
||||
} else {
|
||||
res.status(500).json({
|
||||
success: false,
|
||||
error: err,
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
export default router;
|
||||
|
|
|
|||
|
|
@ -52,4 +52,8 @@
|
|||
</div>
|
||||
|
||||
</aside>
|
||||
|
||||
<div class="docs-sidebar__slider">
|
||||
{{ svg('arrow-left') }}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,10 @@
|
|||
{% extends 'layout.twig' %}
|
||||
|
||||
{% block body %}
|
||||
<div class="error-page">
|
||||
<h1>
|
||||
┬┴┬┴┤ {{status}} ├┬┴┬┴
|
||||
</h1>
|
||||
<h1>{{message}}</h1>
|
||||
<h2>{{error.status}}</h2>
|
||||
<pre>{{error.stack}}</pre>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
|
|
|||
|
|
@ -3,11 +3,13 @@
|
|||
{% block body %}
|
||||
<article class="page" data-module="page">
|
||||
<header class="page__header">
|
||||
<a href="/" class="page__header-nav">
|
||||
<div class="page__header-nav">
|
||||
<a href="/" class="page__header-nav-item">
|
||||
Documentation
|
||||
</a>
|
||||
{{ svg('arrow-right') }}
|
||||
{% if page._parent %}
|
||||
<a class="page__header-nav"
|
||||
<a class="page__header-nav-item"
|
||||
{% if pageParent.uri %}
|
||||
href="/{{ pageParent.uri }}"
|
||||
{% else %}
|
||||
|
|
@ -16,6 +18,7 @@
|
|||
{{ pageParent.title }}
|
||||
</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
<time class="page__header-time">
|
||||
Last edit {{ (page.body.time / 1000) | date("M d Y") }}
|
||||
</time>
|
||||
|
|
@ -34,7 +37,9 @@
|
|||
{# Skip first header, because it is already showed as a Title #}
|
||||
{% if not (loop.first and block.type == 'header') %}
|
||||
{% if block.type in ['paragraph', 'header', 'image', 'code', 'list', 'delimiter', 'table', 'warning', 'checklist', 'linkTool', 'raw', 'embed'] %}
|
||||
<div class="page__content-block">
|
||||
{% include './blocks/' ~ block.type ~ '.twig' with block.data %}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
|
|
|||
|
|
@ -1,10 +1,11 @@
|
|||
import { Storage } from '../utils/storage';
|
||||
import Shortcut from '@codexteam/shortcuts';
|
||||
|
||||
/**
|
||||
* Local storage key
|
||||
*/
|
||||
const LOCAL_STORAGE_KEY = 'docs_sidebar_state';
|
||||
|
||||
const SIDEBAR_VISIBILITY_KEY = 'docs_sidebar_visibility';
|
||||
|
||||
/**
|
||||
* Section list item height in px
|
||||
|
|
@ -31,8 +32,11 @@ export default class Sidebar {
|
|||
sectionList: 'docs-sidebar__section-list',
|
||||
sectionListItemActive: 'docs-sidebar__section-list-item--active',
|
||||
sidebarToggler: 'docs-sidebar__toggler',
|
||||
sidebarSlider: 'docs-sidebar__slider',
|
||||
sidebarCollapsed: 'docs-sidebar--collapsed',
|
||||
sidebarAnimated: 'docs-sidebar--animated',
|
||||
sidebarContent: 'docs-sidebar__content',
|
||||
sidebarContentHidden: 'docs-sidebar__content--hidden',
|
||||
sidebarContentVisible: 'docs-sidebar__content--visible',
|
||||
sidebarContentInvisible: 'docs-sidebar__content--invisible',
|
||||
};
|
||||
}
|
||||
|
|
@ -45,14 +49,24 @@ export default class Sidebar {
|
|||
* Stores refs to HTML elements needed for correct sidebar work
|
||||
*/
|
||||
this.nodes = {
|
||||
sidebar: null,
|
||||
sections: [],
|
||||
sidebarContent: null,
|
||||
toggler: null,
|
||||
slider: null,
|
||||
};
|
||||
this.sidebarStorage = new Storage(LOCAL_STORAGE_KEY);
|
||||
const storedState = this.sidebarStorage.get();
|
||||
|
||||
this.sectionsState = storedState ? JSON.parse(storedState) : {};
|
||||
|
||||
// Initialize localStorage that contains sidebar visibility
|
||||
this.sidebarVisibilityStorage = new Storage(SIDEBAR_VISIBILITY_KEY);
|
||||
// Get current sidebar visibility from storage
|
||||
const storedVisibility = this.sidebarVisibilityStorage.get();
|
||||
|
||||
// Sidebar visibility
|
||||
this.isVisible = storedVisibility !== 'false';
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -62,11 +76,14 @@ export default class Sidebar {
|
|||
* @param {HTMLElement} moduleEl - module element
|
||||
*/
|
||||
init(settings, moduleEl) {
|
||||
this.nodes.sidebar = moduleEl;
|
||||
this.nodes.sections = Array.from(moduleEl.querySelectorAll('.' + Sidebar.CSS.section));
|
||||
this.nodes.sections.forEach(section => this.initSection(section));
|
||||
this.nodes.sidebarContent = moduleEl.querySelector('.' + Sidebar.CSS.sidebarContent);
|
||||
this.nodes.toggler = moduleEl.querySelector('.' + Sidebar.CSS.sidebarToggler);
|
||||
this.nodes.toggler.addEventListener('click', () => this.toggleSidebar());
|
||||
this.nodes.slider = moduleEl.querySelector('.' + Sidebar.CSS.sidebarSlider);
|
||||
this.nodes.slider.addEventListener('click', () => this.handleSliderClick());
|
||||
this.ready();
|
||||
}
|
||||
|
||||
|
|
@ -165,7 +182,46 @@ export default class Sidebar {
|
|||
* @returns {void}
|
||||
*/
|
||||
toggleSidebar() {
|
||||
this.nodes.sidebarContent.classList.toggle(Sidebar.CSS.sidebarContentHidden);
|
||||
this.nodes.sidebarContent.classList.toggle(Sidebar.CSS.sidebarContentVisible);
|
||||
}
|
||||
|
||||
/**
|
||||
* Initializes sidebar
|
||||
*
|
||||
* @returns {void}
|
||||
*/
|
||||
initSidebar() {
|
||||
if (!this.isVisible) {
|
||||
this.nodes.sidebar.classList.add(Sidebar.CSS.sidebarCollapsed);
|
||||
}
|
||||
|
||||
/**
|
||||
* prevent sidebar animation on page load
|
||||
* Since animated class contains transition, hiding will be animated with it
|
||||
* To prevent awkward animation when visibility is set to false, we need to remove animated class
|
||||
*/
|
||||
setTimeout(() => {
|
||||
this.nodes.sidebar.classList.add(Sidebar.CSS.sidebarAnimated);
|
||||
}, 200);
|
||||
|
||||
// add event listener to execute keyboard shortcut
|
||||
// eslint-disable-next-line no-new
|
||||
new Shortcut({
|
||||
name: 'CMD+.',
|
||||
on: document.body,
|
||||
callback: () => this.handleSliderClick(),
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Slides sidebar
|
||||
*
|
||||
* @returns {void}
|
||||
*/
|
||||
handleSliderClick() {
|
||||
this.isVisible = !this.isVisible;
|
||||
this.sidebarVisibilityStorage.set(this.isVisible);
|
||||
this.nodes.sidebar.classList.toggle(Sidebar.CSS.sidebarCollapsed);
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -174,6 +230,7 @@ export default class Sidebar {
|
|||
* @returns {void}
|
||||
*/
|
||||
ready() {
|
||||
this.initSidebar();
|
||||
this.nodes.sidebarContent.classList.remove(Sidebar.CSS.sidebarContentInvisible);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -82,6 +82,11 @@ export default class Writing {
|
|||
this.nodes.parentIdSelector = moduleEl.querySelector('[name="parent"]');
|
||||
this.nodes.putAboveIdSelector = moduleEl.querySelector('[name="above"]');
|
||||
this.nodes.uriInput = moduleEl.querySelector('[name="uri-input"]');
|
||||
|
||||
/**
|
||||
* Set minimum margin left for main column to prevent editor controls from overlapping sidebar
|
||||
*/
|
||||
document.documentElement.style.setProperty('--main-col-min-margin-left', '50px');
|
||||
};
|
||||
|
||||
/**
|
||||
|
|
|
|||
29
src/frontend/styles/components/error.pcss
Normal file
29
src/frontend/styles/components/error.pcss
Normal file
|
|
@ -0,0 +1,29 @@
|
|||
.error-page {
|
||||
font-size: 15px;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
top: 45%;
|
||||
left: 50%;
|
||||
|
||||
@media (--mobile) {
|
||||
position: relative;
|
||||
top: 30vh;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
@media (--tablet) {
|
||||
position: relative;
|
||||
top: 30vh;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
h1 {
|
||||
@media (--mobile) {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 40px 0 20px;
|
||||
}
|
||||
}
|
||||
|
|
@ -10,15 +10,14 @@ html {
|
|||
border-bottom: 1px solid var(--color-line-gray);
|
||||
font-size: 18px;
|
||||
flex-wrap: wrap;
|
||||
height: var(--layout-height-header);
|
||||
box-sizing: border-box;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background: white;
|
||||
z-index: 10;
|
||||
|
||||
@media (--mobile){
|
||||
line-height: 40px;
|
||||
@media (--not-mobile){
|
||||
height: var(--layout-height-header);
|
||||
}
|
||||
|
||||
&__menu-link,
|
||||
|
|
@ -36,11 +35,13 @@ html {
|
|||
}
|
||||
|
||||
&__menu-link {
|
||||
padding: 4px 10px;
|
||||
font-weight: 500;
|
||||
transition: background-color .13s;
|
||||
|
||||
@media (--not-mobile) {
|
||||
padding: 4px 10px;
|
||||
@apply --squircle;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: var(--color-link-hover);
|
||||
|
|
@ -55,8 +56,9 @@ html {
|
|||
font-size: 16px;
|
||||
|
||||
@media (--mobile) {
|
||||
margin-top: 6px;
|
||||
flex-basis: 100%;
|
||||
font-size: 12px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
li {
|
||||
|
|
@ -85,8 +87,8 @@ html {
|
|||
@media (--mobile) {
|
||||
display: block;
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
top: 15px;
|
||||
right: 0;
|
||||
top: 13px;
|
||||
line-height: 1em;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,13 +10,13 @@
|
|||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
background-color: var(--color-link-hover);
|
||||
border-radius: 10px;
|
||||
padding: 12px 16px 12px 16px;
|
||||
color: black;
|
||||
width: max-content;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
|
||||
@apply --squircle;
|
||||
|
||||
&--previous {
|
||||
align-items: flex-start;
|
||||
margin-left: 0;
|
||||
|
|
@ -29,13 +29,15 @@
|
|||
|
||||
&-direction {
|
||||
text-transform: capitalize;
|
||||
color: var(--color-direction-navigation);
|
||||
color: var(--color-text-second);
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
line-height: 140%;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
&-label {
|
||||
width: 100%;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,18 +1,21 @@
|
|||
.page {
|
||||
font-size: 15px;
|
||||
line-height: 1.6;
|
||||
letter-spacing: 0.005em;
|
||||
|
||||
&__header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
font-size: 14px;
|
||||
color: var(--color-text-second);
|
||||
line-height: 1.5em;
|
||||
|
||||
@media (--mobile) {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
&-nav {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
&-item {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
|
||||
|
|
@ -23,11 +26,13 @@
|
|||
&:hover {
|
||||
color: var(--color-link-active);
|
||||
}
|
||||
}
|
||||
|
||||
&:not(:last-of-type) {
|
||||
&::after {
|
||||
content: '»';
|
||||
margin: 0 0.7em 0 0.45em;
|
||||
svg {
|
||||
margin: 0 6px;
|
||||
|
||||
@media (--mobile) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -47,11 +52,7 @@
|
|||
}
|
||||
|
||||
&__title {
|
||||
@apply --font-serif;
|
||||
font-size: 35px;
|
||||
font-weight: 900;
|
||||
letter-spacing: -0.04em;
|
||||
margin-bottom: -0.1em;
|
||||
@apply --text-content-title;
|
||||
}
|
||||
|
||||
.cdx-marker {
|
||||
|
|
@ -61,55 +62,29 @@
|
|||
|
||||
.inline-code,
|
||||
.block-header a .inline-code {
|
||||
display: inline-block;
|
||||
background: rgba(251,241,241,0.78);
|
||||
color: #C44545;
|
||||
padding: 0.1em 0.5em;
|
||||
border-radius: 2px;
|
||||
margin: 0 2px;
|
||||
font-family: Menlo, Monaco, Consolas, Courier New, monospace;
|
||||
font-size: 0.84em;
|
||||
line-height: 1.4em;
|
||||
border-bottom: 0;
|
||||
|
||||
&:hover {
|
||||
background: rgba(251,241,241,0.78);
|
||||
}
|
||||
@apply --text-inline-code;
|
||||
}
|
||||
|
||||
&__content {
|
||||
@apply --text-content-main;
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
border-bottom: 1px solid #000;
|
||||
padding-bottom: 1px;
|
||||
color: inherit;
|
||||
|
||||
&:hover {
|
||||
color: var(--color-link-active);
|
||||
border-bottom-color: var(--color-link-active);
|
||||
@apply --text-inline-link;
|
||||
}
|
||||
|
||||
.inline-code {
|
||||
margin: 0;
|
||||
padding: 0.15em .5em;
|
||||
border-bottom: 1px dashed rgba(84, 151, 255, 0.99);
|
||||
color: #1f6fd8;
|
||||
background-color: #daf1fe;
|
||||
|
||||
&:hover {
|
||||
background-color: #c8edfe;
|
||||
&-block {
|
||||
@apply --content-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* Paragraph
|
||||
* ==================
|
||||
*/
|
||||
.block-paragraph {
|
||||
margin: 0;
|
||||
|
||||
.inline-code {
|
||||
-webkit-font-smoothing: initial;
|
||||
-moz-osx-font-smoothing: initial;
|
||||
|
|
@ -121,21 +96,14 @@
|
|||
* ==================
|
||||
*/
|
||||
.block-header {
|
||||
@apply --font-serif;
|
||||
margin: 2.1em 0 0.5em;
|
||||
@apply --text-header;
|
||||
|
||||
&--2 {
|
||||
font-size: 22px;
|
||||
font-weight: 600;
|
||||
@apply --text-header-2;
|
||||
}
|
||||
|
||||
&--3 {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
& + p {
|
||||
margin-top: 0.5em;
|
||||
@apply --text-header-3;
|
||||
}
|
||||
|
||||
a {
|
||||
|
|
@ -185,14 +153,8 @@
|
|||
* ==================
|
||||
*/
|
||||
.block-code {
|
||||
background: var(--color-bg-light);
|
||||
border: 1px solid #f1f1f4;
|
||||
border-radius: 5px;
|
||||
font-family: var(--font-mono);
|
||||
line-height: 1.7em;
|
||||
font-size: 13px;
|
||||
overflow-x: auto;
|
||||
margin: 15px 0;
|
||||
@apply --text-code-block;
|
||||
@apply --squircle;
|
||||
|
||||
&__content {
|
||||
display: inline-block !important;
|
||||
|
|
@ -200,7 +162,7 @@
|
|||
word-wrap: normal;
|
||||
background: transparent !important;
|
||||
padding: 15px !important;
|
||||
color: #41314e !important;
|
||||
color: var(--color-code-main) !important;
|
||||
min-width: 100%;
|
||||
box-sizing: border-box;
|
||||
|
||||
|
|
@ -211,13 +173,31 @@
|
|||
}
|
||||
}
|
||||
|
||||
.hljs-params {
|
||||
color: var(--color-code-params);
|
||||
}
|
||||
|
||||
.hljs-number {
|
||||
color: var(--color-code-number);
|
||||
}
|
||||
|
||||
|
||||
.hljs-title,
|
||||
.hljs-title.class_,
|
||||
.hljs-title.class_.inherited__,
|
||||
.hljs-title.function_ {
|
||||
color: var(--color-code-class);
|
||||
}
|
||||
|
||||
|
||||
.hljs-name,
|
||||
.hljs-section{
|
||||
color: #359f3f;
|
||||
.hljs-section,
|
||||
.hljs-selector-tag {
|
||||
color: var(--color-code-tag);
|
||||
}
|
||||
|
||||
.hljs-tag {
|
||||
color: #718c77;
|
||||
color: var(--color-code-main);
|
||||
}
|
||||
|
||||
.hljs-attr,
|
||||
|
|
@ -226,7 +206,13 @@
|
|||
.hljs-selector-id,
|
||||
.hljs-selector-pseudo,
|
||||
.hljs-title {
|
||||
color: #904eb3;
|
||||
color: var(--color-code-class);
|
||||
}
|
||||
|
||||
.hljs-attribute,
|
||||
.hljs-literal,
|
||||
.hljs-operator {
|
||||
color: var(--color-code-variable);
|
||||
}
|
||||
|
||||
.hljs-emphasis,
|
||||
|
|
@ -235,8 +221,33 @@
|
|||
.hljs-strong,
|
||||
.hljs-template-variable,
|
||||
.hljs-variable {
|
||||
color: #c21f04;
|
||||
color: var(--color-code-string);
|
||||
}
|
||||
|
||||
.hljs-doctag,
|
||||
.hljs-keyword,
|
||||
.hljs-meta .hljs-keyword,
|
||||
.hljs-template-tag,
|
||||
.hljs-template-variable,
|
||||
.hljs-type {
|
||||
color: var(--color-code-keyword);
|
||||
}
|
||||
|
||||
.hljs-variable.language_ {
|
||||
color: var(--color-code-variable) ;
|
||||
}
|
||||
|
||||
.hljs-code,
|
||||
.hljs-comment,
|
||||
.hljs-formula {
|
||||
color: var(--color-code-comment);
|
||||
}
|
||||
|
||||
.hljs-regexp {
|
||||
color: var(--color-code-tag);
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -244,10 +255,12 @@
|
|||
* ==================
|
||||
*/
|
||||
.block-list {
|
||||
margin: 20px 0;
|
||||
margin: 0;
|
||||
list-style: outside;
|
||||
padding-left: 26px;
|
||||
|
||||
li {
|
||||
margin: 10px 0;
|
||||
li:not(:last-of-type) {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -323,7 +336,6 @@
|
|||
* ==================
|
||||
*/
|
||||
.block-table {
|
||||
margin: 20px 0;
|
||||
table-layout: fixed;
|
||||
width: 100%;
|
||||
border-radius: 3px;
|
||||
|
|
@ -331,11 +343,12 @@
|
|||
border: 1px solid var(--color-line-gray);
|
||||
|
||||
td {
|
||||
padding: 8px 10px;
|
||||
padding: 6px 8px;
|
||||
border: 1px solid var(--color-line-gray);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Warning
|
||||
* ==================
|
||||
|
|
@ -343,10 +356,9 @@
|
|||
.block-warning {
|
||||
display: flex;
|
||||
padding: 20px;
|
||||
margin: 30px 0;
|
||||
border-radius: 7px;
|
||||
background: #fff9ef;
|
||||
color: #392e2f;
|
||||
background: #fffad0;
|
||||
|
||||
@apply --squircle;
|
||||
|
||||
&__icon {
|
||||
margin-right: 15px;
|
||||
|
|
|
|||
|
|
@ -1,6 +1,34 @@
|
|||
.docs-sidebar {
|
||||
width: 100vw;
|
||||
|
||||
&--animated {
|
||||
.docs-sidebar__content {
|
||||
transition: transform 200ms ease-in-out;
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
.docs-sidebar__slider {
|
||||
transition: transform 200ms ease-in-out;
|
||||
will-change: transform;
|
||||
}
|
||||
}
|
||||
|
||||
&--collapsed {
|
||||
@media (--desktop) {
|
||||
.docs-sidebar__content {
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
}
|
||||
|
||||
.docs-sidebar__slider {
|
||||
transform: translateX(20px);
|
||||
|
||||
svg {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (--desktop) {
|
||||
width: var(--layout-sidebar-width);
|
||||
}
|
||||
|
|
@ -22,10 +50,15 @@
|
|||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
&--hidden {
|
||||
@media (--mobile) {
|
||||
margin: 0 -8px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
&--visible {
|
||||
display: block;
|
||||
}
|
||||
|
||||
&--invisible {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
|
@ -78,6 +111,11 @@
|
|||
font-size: 14px;
|
||||
line-height: 21px;
|
||||
height: 29px;
|
||||
|
||||
@media (--mobile){
|
||||
font-size: 16px;
|
||||
line-height: 21px;
|
||||
}
|
||||
}
|
||||
|
||||
&__section-title,
|
||||
|
|
@ -88,6 +126,7 @@
|
|||
padding: 0 8px;
|
||||
transition-property: background-color;
|
||||
transition-duration: 0.1s;
|
||||
|
||||
@apply --squircle;
|
||||
}
|
||||
|
||||
|
|
@ -173,8 +212,6 @@
|
|||
|
||||
|
||||
&__toggler {
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
color: var(--color-text-second);
|
||||
padding: 20px 15px;
|
||||
border-bottom: 1px solid var(--color-line-gray);
|
||||
|
|
@ -188,6 +225,25 @@
|
|||
}
|
||||
}
|
||||
|
||||
&__slider {
|
||||
display: none;
|
||||
position: fixed;
|
||||
transform: translateX(calc(var(--layout-sidebar-width) + 20px));
|
||||
bottom: 20px;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
background-color: var(--color-link-hover);
|
||||
z-index: 10;
|
||||
|
||||
@media (--desktop) {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
&__logo {
|
||||
display: none;
|
||||
margin-top: auto;
|
||||
|
|
@ -196,6 +252,7 @@
|
|||
padding-bottom: 20px;
|
||||
padding-top: 60px;
|
||||
font-size: 14px;
|
||||
color: var(--color-text-second);
|
||||
|
||||
@media (--desktop) {
|
||||
display: block;
|
||||
|
|
|
|||
|
|
@ -1,12 +1,13 @@
|
|||
.table-of-content {
|
||||
border-left: 1px solid var(--color-line-gray);
|
||||
padding-left: var(--layout-padding-horizontal);
|
||||
|
||||
height: 100%;
|
||||
max-height: 100%;
|
||||
overflow: auto;
|
||||
padding: var(--layout-padding-vertical) var(--layout-padding-horizontal);
|
||||
padding: 0 var(--layout-padding-horizontal);
|
||||
margin: var(--layout-padding-vertical) 0;
|
||||
box-sizing: border-box;
|
||||
|
||||
--padding-x: 8px;
|
||||
|
||||
&__header {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
|
|
@ -14,7 +15,7 @@
|
|||
letter-spacing: -0.01em;
|
||||
|
||||
margin-bottom: 12px;
|
||||
padding: 0 6px;
|
||||
padding: 0 var(--padding-x);
|
||||
}
|
||||
|
||||
&__list {
|
||||
|
|
@ -27,7 +28,7 @@
|
|||
|
||||
list-style: none;
|
||||
|
||||
gap: 6px;
|
||||
gap: 2px;
|
||||
|
||||
&-item {
|
||||
@apply --squircle;
|
||||
|
|
@ -47,7 +48,7 @@
|
|||
&--indent-4x { margin-left: 24px; }
|
||||
|
||||
& > a {
|
||||
padding: 4px 8px;
|
||||
padding: 4px var(--padding-x);
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
letter-spacing: -0.01em;
|
||||
|
|
|
|||
|
|
@ -1,6 +1,4 @@
|
|||
.writing-header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
padding: 15px 0;
|
||||
margin-top: calc(-1 * var(--layout-padding-vertical));
|
||||
background: #fff;
|
||||
|
|
@ -52,28 +50,63 @@
|
|||
}
|
||||
|
||||
.writing-editor {
|
||||
font-size: 15px;
|
||||
line-height: 1.6;
|
||||
letter-spacing: 0.005em;
|
||||
@apply --text-content-main;
|
||||
|
||||
.ce-code__textarea {
|
||||
color: #41314e;
|
||||
line-height: 1.6em;
|
||||
font-size: 12px;
|
||||
background: var(--color-bg-light);
|
||||
border: 1px solid #f1f1f4;
|
||||
box-shadow: none;
|
||||
@apply --text-code-block;
|
||||
|
||||
border: 0;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.ce-paragraph a {
|
||||
color: inherit;
|
||||
@apply --text-inline-link;
|
||||
}
|
||||
|
||||
.ce-header {
|
||||
@apply --font-serif;
|
||||
@apply --text-header;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
h2.ce-header {
|
||||
@apply --text-header-2;
|
||||
}
|
||||
|
||||
h3.ce-header {
|
||||
@apply --text-header-3;
|
||||
}
|
||||
|
||||
.cdx-block {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.inline-code {
|
||||
@apply --text-inline-code;
|
||||
}
|
||||
|
||||
.tc-table {
|
||||
@apply --text-content-main;
|
||||
}
|
||||
|
||||
.tc-cell {
|
||||
padding: 6px 8px;
|
||||
}
|
||||
|
||||
@media (--desktop) {
|
||||
.ce-block__content,
|
||||
.ce-toolbar__content {
|
||||
max-width: var(--layout-width-main-col);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.codex-editor__redactor .ce-block:first-of-type .ce-header {
|
||||
font-size: 32px;
|
||||
@apply --text-content-title;
|
||||
}
|
||||
|
||||
|
||||
.ce-block {
|
||||
@apply --content-block;
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -2,27 +2,23 @@
|
|||
display: inline-block;
|
||||
width: 100%;
|
||||
|
||||
span {
|
||||
color: inherit !important;
|
||||
}
|
||||
|
||||
&--added {
|
||||
color: #277030;
|
||||
background-color: #e2fce7;
|
||||
color: #70b979;
|
||||
background-color: #25f84d21;
|
||||
|
||||
&::before {
|
||||
content: '+';
|
||||
opacity: 0.4;
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
|
||||
&--removed {
|
||||
color: rgb(174, 54, 60);
|
||||
background-color: rgba(255, 230, 230, 1);
|
||||
color: #f1acaf;
|
||||
background-color: #95000069;
|
||||
|
||||
&::before {
|
||||
content: '-';
|
||||
opacity: 0.4;
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,11 @@
|
|||
:root {
|
||||
/**
|
||||
* Allows to dynamically set main column minimun margin left.
|
||||
* Is used for adding extra space for editor controls in page edit mode (otherwise controls overlap sidebar)
|
||||
*/
|
||||
--main-col-min-margin-left: 0px;
|
||||
}
|
||||
|
||||
.docs {
|
||||
min-height: calc(100vh - var(--layout-height-header));
|
||||
|
||||
|
|
@ -18,6 +26,8 @@
|
|||
&-inner {
|
||||
max-width: var(--layout-width-main-col);
|
||||
margin: 0 auto;
|
||||
min-width: 0;
|
||||
width: 100%;
|
||||
|
||||
@media (--desktop) {
|
||||
margin-left: 0;
|
||||
|
|
@ -28,15 +38,19 @@
|
|||
|
||||
&__content {
|
||||
--max-space-between-cols: 160px;
|
||||
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
max-width: calc(var(--layout-width-main-col) + var(--max-space-between-cols) + var(--layout-sidebar-width));
|
||||
margin-left: max(0px, calc(50vw - var(--layout-sidebar-width) - var(--layout-width-main-col) / 2));
|
||||
margin-right: auto;
|
||||
|
||||
@media (--mobile) {
|
||||
padding: 20px var(--layout-padding-horizontal);
|
||||
|
||||
@media (--desktop) {
|
||||
max-width: min(
|
||||
calc(var(--layout-width-main-col) + var(--max-space-between-cols) + var(--layout-sidebar-width)),
|
||||
calc(100vw - var(--layout-sidebar-width))
|
||||
);
|
||||
margin-left: max(var(--main-col-min-margin-left), calc(50vw - var(--layout-sidebar-width) - var(--layout-width-main-col) / 2) - var(--layout-padding-horizontal));
|
||||
margin-right: auto;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -55,6 +69,10 @@
|
|||
@media (--desktop) {
|
||||
display: block;
|
||||
}
|
||||
|
||||
&:empty {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&-sidebar {
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@
|
|||
@import './components/page.pcss';
|
||||
@import './components/landing.pcss';
|
||||
@import './components/auth.pcss';
|
||||
@import './components/error.pcss';
|
||||
@import './components/button.pcss';
|
||||
@import './components/sidebar.pcss';
|
||||
@import './components/navigator.pcss';
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
:root {
|
||||
--color-text-main: #313649;
|
||||
--color-text-second: #5d6068;
|
||||
--color-direction-navigation: #717682;
|
||||
--color-text-main: #060C26;
|
||||
--color-text-second: #717682;
|
||||
--color-line-gray: #E8E8EB;
|
||||
--color-link-active: #2071cc;
|
||||
--color-link-hover: #F3F6F8;
|
||||
|
|
@ -10,6 +9,19 @@
|
|||
--color-input-primary: #F3F6F8;
|
||||
--color-input-border: #477CFF;
|
||||
|
||||
|
||||
/* Code Block styles */
|
||||
--color-code-bg: #252935;
|
||||
--color-code-main: #E1EBFE;
|
||||
--color-code-keyword: #ff6675;
|
||||
--color-code-class: #bf9dff;
|
||||
--color-code-variable: #69c6ff;
|
||||
--color-code-string: #81bcff;
|
||||
--color-code-params: #ffa259;
|
||||
--color-code-tag: #74e59d;
|
||||
--color-code-number: #ff6262;
|
||||
--color-code-comment: #6c7f93;
|
||||
|
||||
--color-button-primary: #3389FF;
|
||||
--color-button-primary-hover: #2E7AE6;
|
||||
--color-button-primary-active: #296DCC;
|
||||
|
|
@ -29,7 +41,7 @@
|
|||
--layout-padding-horizontal: 22px;
|
||||
--layout-padding-vertical: 30px;
|
||||
--layout-sidebar-width: 290px;
|
||||
--layout-width-main-col: 650px;
|
||||
--layout-width-main-col: 700px;
|
||||
--layout-height-header: 56px;
|
||||
|
||||
@media (--mobile) {
|
||||
|
|
@ -44,11 +56,6 @@
|
|||
|
||||
--font-mono: Menlo,Monaco,Consolas,Courier New,monospace;
|
||||
|
||||
--font-serif {
|
||||
font-family: "Lucida Grande","Lucida Sans Unicode","Lucida Sans", Geneva, Arial, sans-serif;
|
||||
letter-spacing: -0.03em;
|
||||
}
|
||||
|
||||
--button {
|
||||
display: inline-block;
|
||||
padding: 9px 15px;
|
||||
|
|
@ -131,6 +138,120 @@
|
|||
-webkit-mask-box-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 10.3872C0 1.83334 1.83334 0 10.3872 0H13.6128C22.1667 0 24 1.83334 24 10.3872V13.6128C24 22.1667 22.1667 24 13.6128 24H10.3872C1.83334 24 0 22.1667 0 13.6128V10.3872Z' fill='black'/%3E%3C/svg%3E%0A") 48% 41% 37.9% 53.3%;;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* The common styles for the Page blocks as well as Editor blocks
|
||||
*/
|
||||
--content-block {
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Main page H1 title
|
||||
*/
|
||||
--text-content-title {
|
||||
font-size: 36px;
|
||||
font-weight: 800;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Page body font
|
||||
*/
|
||||
--text-content-main {
|
||||
font-size: 16px;
|
||||
line-height: 150%;
|
||||
}
|
||||
|
||||
/**
|
||||
* Code on page and in the Editor
|
||||
*/
|
||||
--text-code-block {
|
||||
background: var(--color-code-bg);
|
||||
color: var(--color-code-main);
|
||||
font-family: var(--font-mono);
|
||||
line-height: 1.5em;
|
||||
font-size: 13px;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
/**
|
||||
* Common styles for text headings (H2, H3, H4)
|
||||
*/
|
||||
--text-header {
|
||||
margin: 18px 0 0;
|
||||
line-height: 1.35em;
|
||||
}
|
||||
|
||||
/**
|
||||
* Styles for the H2 at the Page and Editor
|
||||
*/
|
||||
--text-header-2 {
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
/**
|
||||
* Styles for the H3 at the Page and Editor
|
||||
*/
|
||||
--text-header-3 {
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
/**
|
||||
* Styles for the inline code element at the Page and Editor
|
||||
*/
|
||||
--text-inline-code {
|
||||
display: inline-block;
|
||||
background: rgba(251,241,241,0.78);
|
||||
color: #C44545;
|
||||
font-size: 14px;
|
||||
line-height: 1.4em;
|
||||
letter-spacing: 0;
|
||||
|
||||
padding: 3px 4px 2px;
|
||||
margin: -1px 2px 0;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.84em;
|
||||
border-bottom: 0;
|
||||
|
||||
&:hover {
|
||||
background: rgba(251,241,241,0.78);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Styles for regular links inside a text
|
||||
*/
|
||||
--text-inline-link {
|
||||
text-decoration: none;
|
||||
border-bottom: 1px solid #000;
|
||||
padding-bottom: 1px;
|
||||
color: inherit;
|
||||
|
||||
&:hover {
|
||||
color: var(--color-link-active);
|
||||
border-bottom-color: var(--color-link-active);
|
||||
}
|
||||
|
||||
/**
|
||||
* When a link contain an inline code, highlight it by its own way
|
||||
*/
|
||||
.inline-code {
|
||||
margin: 0;
|
||||
padding: 2px 5px;
|
||||
border-bottom: 1px dashed rgba(84, 151, 255, 0.99);
|
||||
color: #1f6fd8;
|
||||
background-color: #daf1fe;
|
||||
border-radius: 3px !important;
|
||||
|
||||
&:hover {
|
||||
background-color: #c8edfe;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -140,5 +261,6 @@
|
|||
@custom-media --desktop all and (min-width: 1050px);
|
||||
@custom-media --tablet all and (min-width: 980px) and (max-width: 1050px);
|
||||
@custom-media --mobile all and (max-width: 980px);
|
||||
@custom-media --not-mobile all and (min-width: 981px);
|
||||
@custom-media --retina all and (-webkit-min-device-pixel-ratio: 1.5);
|
||||
@custom-media --can-hover all and (hover:hover);
|
||||
|
|
|
|||
3
src/frontend/svg/arrow-left.svg
Normal file
3
src/frontend/svg/arrow-left.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="7" height="11" viewBox="0 0 7 11" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M5.95579 10.2458C6.14204 10.0584 6.24658 9.80498 6.24658 9.5408C6.24658 9.27661 6.14204 9.02316 5.95579 8.8358L2.41579 5.2458L5.95579 1.7058C6.14204 1.51844 6.24658 1.26498 6.24658 1.0008C6.24658 0.736612 6.14204 0.483161 5.95579 0.295798C5.86283 0.20207 5.75223 0.127675 5.63037 0.0769067C5.50851 0.026138 5.3778 0 5.24579 0C5.11378 0 4.98307 0.026138 4.86121 0.0769067C4.73935 0.127675 4.62875 0.20207 4.53579 0.295798L0.295789 4.5358C0.202061 4.62876 0.127667 4.73936 0.0768978 4.86122C0.0261292 4.98308 -9.32772e-06 5.11379 -9.32772e-06 5.2458C-9.32772e-06 5.37781 0.0261292 5.50852 0.0768978 5.63037C0.127667 5.75223 0.202061 5.86284 0.295789 5.9558L4.53579 10.2458C4.62875 10.3395 4.73935 10.4139 4.86121 10.4647C4.98307 10.5155 5.11378 10.5416 5.24579 10.5416C5.3778 10.5416 5.50851 10.5155 5.63037 10.4647C5.75223 10.4139 5.86283 10.3395 5.95579 10.2458Z" fill="#060C26"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 991 B |
1
src/frontend/svg/arrow-right.svg
Normal file
1
src/frontend/svg/arrow-right.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg width="21" height="20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.037 6.08a.833.833 0 0 0 0 1.175l2.95 2.992-2.95 2.95a.833.833 0 1 0 1.183 1.175l3.533-3.534a.832.832 0 0 0 0-1.183L9.22 6.08a.833.833 0 0 0-1.183 0Z" fill="#717682"/></svg>
|
||||
|
After Width: | Height: | Size: 260 B |
Loading…
Add table
Add a link
Reference in a new issue