diff --git a/.codexdocsrc b/.codexdocsrc index ebad062..5c69846 100644 --- a/.codexdocsrc +++ b/.codexdocsrc @@ -1,9 +1,9 @@ { - "title": "Editor.js   🤩🧦🤨", "menu": [ "Guides", "API", "Plugins", {"title": "Support Project", "uri": "/support"} - ] + ], + "landingFrameSrc": "http://localhost:8080/editor?frame=1" } diff --git a/.codexdocsrc.sample b/.codexdocsrc.sample new file mode 100644 index 0000000..ab947f4 --- /dev/null +++ b/.codexdocsrc.sample @@ -0,0 +1,10 @@ +{ + "title": "CodeX Docs", + "menu": [ + "Guides", + "API", + "Plugins", + {"title": "Support Project", "uri": "/support"} + ], + "landingFrameSrc": "http://localhost:8080/editor" +} diff --git a/public/dist/main.css b/public/dist/main.css index dfaf2ed..34cb931 100644 --- a/public/dist/main.css +++ b/public/dist/main.css @@ -1 +1 @@ -/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{-webkit-box-sizing:content-box;box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{-webkit-box-sizing:border-box;box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{-webkit-box-sizing:border-box;box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}[hidden],template{display:none}:root{--color-text-main:#1d202b;--color-text-second:#7b7e89;--color-line-gray:#e8e8eb;--color-link-active:#388ae5;--color-button-danger:#ff1629;--color-gray-border:rgba(var(--color-line-gray),0.48);--layout-padding-horisontal:40px;--layout-padding-vertical:40px;--layout-width-aside:200px;--layout-width-main-col:650px}@media (max-width:980px){:root{--layout-padding-horisontal:15px;--layout-padding-vertical:15px}}.docs{display:-webkit-box;display:-ms-flexbox;display:flex;padding:0 40px;padding:0 var(--layout-padding-horisontal)}@media (max-width:980px){.docs{-ms-flex-wrap:wrap;flex-wrap:wrap}}.docs__aside{width:200px;width:var(--layout-width-aside)}@media (max-width:980px){.docs__aside{width:100%;-ms-flex-preferred-size:100%;flex-basis:100%;padding:20px 40px!important;padding:20px var(--layout-padding-horisontal)!important;margin:0 -40px;margin:0 calc(-1*var(--layout-padding-horisontal));border-bottom:1px solid #e8e8eb;border-bottom:1px solid var(--color-line-gray)}}.docs__content{-webkit-box-flex:2;-ms-flex-positive:2;flex-grow:2;word-wrap:break-word}@media (max-width:980px){.docs__content{width:100%;-ms-flex-preferred-size:100%;flex-basis:100%}}.docs__content-inner{max-width:650px;max-width:var(--layout-width-main-col);margin:0 auto}.docs__aside,.docs__content{padding:40px 0;padding:var(--layout-padding-vertical) 0}@media (max-width:980px){.docs__aside,.docs__content{padding:20px 0}}.docs-header{display:-webkit-box;display:-ms-flexbox;display:flex;padding:0 40px;padding:0 var(--layout-padding-horisontal);border-bottom:1px solid #e8e8eb;border-bottom:1px solid var(--color-line-gray);font-size:15.8px;line-height:50px;-ms-flex-wrap:wrap;flex-wrap:wrap;position:relative}.docs-header a{display:inline-block;text-decoration:none}.docs-header__logo{font-weight:700;color:inherit}.docs-header__menu{display:-webkit-box;display:-ms-flexbox;display:flex;margin:0 0 0 auto;padding-left:0}@media (max-width:980px){.docs-header__menu{-ms-flex-preferred-size:100%;flex-basis:100%;font-size:12px}}.docs-header__menu li{list-style:none;margin-left:20px}@media (max-width:980px){.docs-header__menu li{margin-left:0;margin-right:15px}}@media (max-width:980px){.docs-header__menu-add{position:absolute;right:15px;top:15px;line-height:1em;margin:0!important}}@media (max-width:980px){.docs-header__menu-add a{font-size:0;padding:8px;margin-right:0}}.docs-header__menu a:not(.docs-header__button){color:inherit}.docs-header__menu a:not(.docs-header__button):hover{color:#388ae5;color:var(--color-link-active)}.docs-header__button{display:inline-block;padding:9px 15px;border-radius:3px;color:#6c6375;background:#fcfcff;-webkit-box-shadow:inset 0 0 0 1px rgba(184,189,206,.2);box-shadow:inset 0 0 0 1px rgba(184,189,206,.2);font-size:14px;line-height:1em;text-decoration:none;cursor:pointer;white-space:nowrap;background:#388ae5;background:var(--color-link-active);color:#fff;-webkit-box-shadow:none;box-shadow:none}.docs-header__button svg{margin:0 .3em 0 -.05em}.docs-header__button:hover{background:#387ecc}.docs-header__button{margin:auto 30px auto auto}.docs-aside{font-size:15px;color:#7b7e89;color:var(--color-text-second)}@media (max-width:980px){.docs-aside{font-size:13px;display:none;margin-top:20px}}.docs-aside--toggled{display:block!important}.docs-aside a{text-decoration:none}.docs-aside__section{margin-bottom:30px}@media (max-width:980px){.docs-aside__section{margin-bottom:20px}}.docs-aside__section:last-of-type{margin-bottom:0}.docs-aside__section-title{margin-bottom:15px;color:#388ae5;color:var(--color-link-active)}@media (max-width:980px){.docs-aside__section-title{margin-bottom:10px}}.docs-aside__section-list{padding-left:0;list-style:none}.docs-aside__section-list a{display:inline-block;color:inherit;padding:8px 0}.docs-aside-toggler{display:none;font-size:13px;cursor:pointer;color:#7b7e89;color:var(--color-text-second)}@media (max-width:980px){.docs-aside-toggler{display:block}}.docs-aside-toggler svg{margin-right:10px}.writing-header{display:-webkit-box;display:-ms-flexbox;display:flex;position:-webkit-sticky;position:sticky;top:0;padding:15px 0;margin-top:-40px;margin-top:calc(-1*var(--layout-padding-vertical));background:#fff;-webkit-box-shadow:0 3px 10px #fff;box-shadow:0 3px 10px #fff;z-index:2}.writing-header__save{display:inline-block;padding:9px 15px;border-radius:3px;color:#6c6375;background:#fcfcff;-webkit-box-shadow:inset 0 0 0 1px rgba(184,189,206,.2);box-shadow:inset 0 0 0 1px rgba(184,189,206,.2);font-size:14px;line-height:1em;text-decoration:none;cursor:pointer;white-space:nowrap;background:#388ae5;background:var(--color-link-active);color:#fff;-webkit-box-shadow:none;box-shadow:none}.writing-header__save svg{margin:0 .3em 0 -.05em}.writing-header__save:hover{background:#387ecc}.writing-header__save{margin-left:auto}.writing-header__left{margin:auto 0;color:#7b7e89;color:var(--color-text-second)}.writing-header__left span{margin-right:10px}.writing-buttons__remove{display:inline-block;padding:9px 15px;border-radius:3px;color:#6c6375;background:#fcfcff;-webkit-box-shadow:inset 0 0 0 1px rgba(184,189,206,.2);box-shadow:inset 0 0 0 1px rgba(184,189,206,.2);font-size:14px;line-height:1em;text-decoration:none;cursor:pointer;white-space:nowrap;background:#ff1629;background:var(--color-button-danger);color:#fff;-webkit-box-shadow:none;box-shadow:none}.writing-buttons__remove svg{margin:0 .3em 0 -.05em}.writing-buttons__remove:hover{background:#e61627}.uri-input{-webkit-box-sizing:border-box;box-sizing:border-box;width:100%;padding:10px 12px;border-radius:3px;border:1px solid rgba(201,201,204,.48);-webkit-box-shadow:inset 0 1px 2px 0 rgba(35,44,72,.06);box-shadow:inset 0 1px 2px 0 rgba(35,44,72,.06);outline:none}.page{font-size:16px;line-height:1.6}.page__header{display:-webkit-box;display:-ms-flexbox;display:flex;color:#7b7e89;color:var(--color-text-second)}@media (max-width:980px){.page__header{font-size:13px}}.page__header-nav{color:inherit;text-decoration:none}@media (max-width:980px){.page__header-nav{display:none}}.page__header-nav:hover{color:#388ae5;color:var(--color-link-active)}.page__header-nav:not(:last-of-type):after{content:"\BB";margin:0 .7em 0 .45em}.page__header-time{margin-left:auto}@media (max-width:980px){.page__header-time{margin-left:0}}.page__header-button{display:inline-block;padding:9px 15px;border-radius:3px;color:#6c6375;background:#fcfcff;-webkit-box-shadow:inset 0 0 0 1px rgba(184,189,206,.2);box-shadow:inset 0 0 0 1px rgba(184,189,206,.2);font-size:14px;line-height:1em;text-decoration:none;cursor:pointer;white-space:nowrap;background:#388ae5;background:var(--color-link-active);color:#fff;-webkit-box-shadow:none;box-shadow:none}.page__header-button svg{margin:0 .3em 0 -.05em}.page__header-button:hover{background:#387ecc}.page__header-button{padding:5px 10px;font-size:13px;margin-left:10px}.page__title{font-size:26px;font-weight:700;letter-spacing:-.04px;margin-bottom:-.2em}.block-header{margin:1.5em 0 .5em}.block-header--2{font-size:22px;font-weight:500}.block-header--3{font-size:18px;font-weight:500}.block-code{padding:20px!important;border-radius:3px;font-size:13px;border:1px solid #e8e8eb;border:1px solid var(--color-line-gray);font-family:Menlo,Monaco,Consolas,Courier New,monospace;line-height:1.7em}.block-list li{margin:10px 0}.editor-landing{width:100%;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.editor-landing a{text-decoration:none}.editor-landing__logo{position:relative;content:"";width:84px;height:84px;margin:auto}@media (max-width:980px){.editor-landing__logo{width:50px;height:50px}}.editor-landing__logo-main{position:absolute;-webkit-animation:logoIn .5s cubic-bezier(.5,1.05,1,1) 1;animation:logoIn .5s cubic-bezier(.5,1.05,1,1) 1;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;will-change:transform,filter;z-index:2;left:0}@media (max-width:980px){.editor-landing__logo-main svg{width:50px}}.editor-landing__logo-shadow{position:absolute;left:-38px;z-index:1;-webkit-animation:logoShadow .5s cubic-bezier(.5,1.05,1,1) 1;animation:logoShadow .5s cubic-bezier(.5,1.05,1,1) 1;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;will-change:transform,opacity}@media (max-width:980px){.editor-landing__logo-shadow{left:-21px;margin-top:-13px}.editor-landing__logo-shadow svg{width:92px}}.editor-landing__info{padding-top:300px;padding-bottom:70px;background-image:-webkit-gradient(linear,left bottom, left top,from(#fff),to(#eef7ff));background-image:linear-gradient(0deg,#fff,#eef7ff);text-align:center}.editor-landing__title{margin:20px 0 0;line-height:1.2em;font-size:50px;letter-spacing:.23px;color:#000;font-weight:600}@media (max-width:980px){.editor-landing__title{margin-top:25px;font-size:30px}}.editor-landing__description{font-size:17.3px;letter-spacing:.13px;line-height:1.5em;color:#868da1;margin-top:20px}@media (max-width:980px){.editor-landing__description{font-size:15px;margin-top:10px}}.editor-landing__cta{display:inline-block;margin-top:40px;padding:13px 19px;border-radius:30px;background:#388ffe;-webkit-box-shadow:0 9px 12px -6px rgba(11,132,242,.78);box-shadow:0 9px 12px -6px rgba(11,132,242,.78);font-size:16px;color:#fff;-webkit-transition:all .15s ease;transition:all .15s ease;will-change:background-color,box-shadow}.editor-landing__cta:hover{color:#fff;background:#3684fe;-webkit-box-shadow:0 9px 16px -6px rgba(11,132,242,.78);box-shadow:0 9px 16px -6px rgba(11,132,242,.78)}.editor-landing__menu{text-align:left;font-size:14px;position:fixed;right:7vw;top:150px;line-height:1.5em}@media (max-width:1400px){.editor-landing__menu{right:4.5vw}}@media (max-width:1330px){.editor-landing__menu{position:absolute;padding:20px;right:45px;top:55px}}@media (max-width:980px){.editor-landing__menu{position:absolute;padding:15px;left:0;top:100px}}.editor-landing__menu a{color:inherit;display:inline-block;border-bottom:1px solid rgba(93,100,134,.2);margin-bottom:6px}.editor-landing__version{display:inline-block;padding:5px 8px;line-height:1em;border-radius:30px;background:#111;font-size:10px;color:#fff;margin-right:-70px;margin-left:3px}.editor-landing__demo{background:#eef5fa;border-radius:100px;max-width:950px;margin:0 auto;padding:70px 60px}@media (max-width:1550px){.editor-landing__demo{max-width:850px}}@media (max-width:980px){.editor-landing__demo{padding:15px;border-radius:0}}.editor-landing__demo-inner{background:#fff;border-radius:8px;-webkit-box-shadow:0 24px 24px -18px rgba(69,104,129,.33),0 9px 45px 0 rgba(114,119,160,.12);box-shadow:0 24px 24px -18px rgba(69,104,129,.33),0 9px 45px 0 rgba(114,119,160,.12);padding:70px 50px;font-size:16px;-webkit-box-sizing:border-box;box-sizing:border-box}@media (max-width:980px){.editor-landing__demo-inner{padding:20px}}.editor-landing__demo-inner,.editor-landing__demo .codex-editor__redactor{min-height:450px}@media (max-width:980px){.editor-landing__demo-inner,.editor-landing__demo .codex-editor__redactor{min-height:100px}}.editor-landing__preview{max-width:650px;max-width:var(--layout-width-main-col);margin:0 auto;color:rgba(34,78,111,.75);position:relative}.editor-landing__preview:after{content:"";position:absolute;right:0;top:0;bottom:0;width:150px;background:-webkit-gradient(linear,left top, right top,from(rgba(238,245,250,0)),to(#eef5fa));background:linear-gradient(90deg,rgba(238,245,250,0),#eef5fa);z-index:2}.editor-landing__preview-inner{overflow:auto;font-size:14px;line-height:1.5em;letter-spacing:.1px}.editor-landing__section-header{font-size:16px;max-width:375px;margin:50px auto;line-height:1.5em;text-align:center;color:#606578}@media (max-width:980px){.editor-landing__section-header{font-size:14px;max-width:70vw}}.editor-landing__section-header header{font-weight:600;margin-bottom:13px}@media (max-width:980px){.editor-landing__section-header header{font-size:16px}}.editor-landing__section-header--big{margin:130px auto;line-height:24px}@media (max-width:980px){.editor-landing__section-header--big{margin:50px auto}}.editor-landing__section-header--big header{font-size:26px;margin-bottom:20px}@media (max-width:980px){.editor-landing__section-header--big header{font-size:20px;margin-bottom:10px}}.editor-landing .sc_attr{color:#373742}.editor-landing .sc_toolname{color:#db1029}.editor-landing .sc_tag{color:#0483d8}.editor-landing .sc_key{color:#6e4998}.editor-landing .sc_bool{color:#f73cad}.editor-landing .sc_digit{color:#196ff8}.editor-landing__loved-by{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;margin-top:30px}@media (max-width:980px){.editor-landing__loved-by{margin-bottom:80px}}.editor-landing__loved-by-item{display:-webkit-box;display:-ms-flexbox;display:flex;height:30px}.editor-landing__loved-by-item:not(:last-of-type):after{content:"";width:3px;height:100%;margin-right:27px;margin-left:29px;background:#e0e0e0}.editor-landing__plugins{max-width:650px;margin:0 auto}@media (max-width:980px){.editor-landing__plugins{padding:20px}}.editor-landing__plugins-title{font-size:24px;margin-bottom:15px}@media (max-width:980px){.editor-landing__plugins-title{font-size:20px;margin-bottom:10px}}.editor-landing__plugins-description{margin-bottom:30px;font-size:16px;line-height:1.65em;color:#606578}@media (max-width:980px){.editor-landing__plugins-description{font-size:14px}}.editor-landing__plugins-filter{margin:30px 0}@media (max-width:980px){.editor-landing__plugins-filter{margin:15px 0 20px}}.editor-landing__plugins-filter-button{font-size:15px;font-weight:500;color:#343434;vertical-align:middle;cursor:pointer}.editor-landing__plugins-filter-button svg{vertical-align:middle;margin:-3px 6px 0 3px}.editor-landing__plugins-filter-button:not(:last-of-type){margin-right:17px}.editor-landing__contribute,.editor-landing__more-plugins{font-size:15px;color:#7b7e89;cursor:pointer}@media (max-width:980px){.editor-landing__contribute,.editor-landing__more-plugins{margin-top:10px}}.editor-landing__contribute svg,.editor-landing__more-plugins svg{width:9px;height:9px;fill:currentColor;vertical-align:middle}@media (max-width:980px){.editor-landing__contribute svg,.editor-landing__more-plugins svg{display:none}}.editor-landing__more-plugins{float:left}@media (max-width:980px){.editor-landing__more-plugins{float:none}}.editor-landing__contribute{float:right}@media (max-width:980px){.editor-landing__contribute{display:none}}.editor-landing__contribute svg{margin:-3px 3px 0 0}.editor-landing .codex-editor__redactor{padding-bottom:120px}.editor-landing__star{position:relative;display:inline-block;margin-top:60px}.editor-landing__star-line{position:absolute;width:130px;height:10px;left:51.5%;top:36%;z-index:-1}.editor-landing__star-line:first-of-type{-webkit-transform:translateX(-50%) rotate(-22deg);transform:translateX(-50%) rotate(-22deg)}.editor-landing__star-line:nth-of-type(2){-webkit-transform:rotate(-90deg);transform:rotate(-90deg);left:-11px;top:13px;width:90px}.editor-landing__star-line:nth-of-type(3){-webkit-transform:translateX(-50%) rotate(22deg);transform:translateX(-50%) rotate(22deg)}.editor-landing__star-line:after,.editor-landing__star-line:before{content:"";display:inline-block;width:15px;height:10px;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='15' height='10' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 5.5H0v-1h6v-4L15 5 6 9.5z' fill='%23B6B9C0'/%3E%3C/svg%3E");position:absolute;top:0}.editor-landing__star-line:before{left:0;-webkit-animation:arrow-moving-left 1s ease infinite;animation:arrow-moving-left 1s ease infinite}.editor-landing__star-line:after{right:0;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='15' height='10' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 4.5h6v1H9v4L0 5 9 .5v4z' fill='%23B6B9C0'/%3E%3C/svg%3E");-webkit-animation:arrow-moving-right 1s ease infinite;animation:arrow-moving-right 1s ease infinite}@-webkit-keyframes arrow-moving-left{50%{-webkit-transform:translateX(-10px);transform:translateX(-10px)}}@keyframes arrow-moving-left{50%{-webkit-transform:translateX(-10px);transform:translateX(-10px)}}@-webkit-keyframes arrow-moving-right{50%{-webkit-transform:translateX(10px);transform:translateX(10px)}}@keyframes arrow-moving-right{50%{-webkit-transform:translateX(10px);transform:translateX(10px)}}.editor-plugin{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;margin-bottom:20px;border-radius:7px;-webkit-box-shadow:0 3px 11px rgba(125,128,147,.23);box-shadow:0 3px 11px rgba(125,128,147,.23);min-height:90px;padding:20px 120px 20px 20px}@media (max-width:980px){.editor-plugin{padding-right:100px}}.editor-plugin__title{font-size:18px;color:#000;display:inline-block;margin:0 5px 4px 0}@media (max-width:980px){.editor-plugin__title{font-size:16px}}.editor-plugin__label{display:inline-block;font-size:18px;color:#606578;border-radius:3px;font-weight:500;opacity:.4;line-height:1em;margin-top:-5px}@media (max-width:980px){.editor-plugin__label{font-size:16px}}.editor-plugin__description{font-size:14px;color:#606578}.editor-plugin__contributors{display:-webkit-box;display:-ms-flexbox;display:flex;margin-top:auto}@media (max-width:980px){.editor-plugin__contributors{margin-top:15px}}.editor-plugin__contributors-item{display:inline-block;overflow:hidden;border-radius:4px;width:18px;height:18px}.editor-plugin__contributors-item img{width:100%;height:100%}.editor-plugin__contributors-item:not(:last-of-type){margin-right:6px}.editor-plugin__demo{position:absolute;right:20px;top:15px;margin-left:45px}.editor-plugin__demo img,.editor-plugin__demo video{height:90px}@media (max-width:980px){.editor-plugin__demo img,.editor-plugin__demo video{height:40px}}.editor-plugin--your-own .editor-plugin__title{color:#7b7e89}.editor-plugin--your-own .editor-plugin__description{display:inline-block}.editor-plugin--your-own .editor-plugin__demo{position:static;margin-left:0}.editor-plugin--your-own .editor-plugin__demo pre{font-size:12px;line-height:2em;font-family:Menlo,Monaco,Consolas,Courier New,monospace;margin:15px 0;font-weight:500;color:#484554}@media (max-width:980px){.editor-plugin--your-own .editor-plugin__demo pre{font-size:10px;overflow:auto}}.editor-plugin--your-own .editor-plugin__footer{margin-top:20px;font-size:14px}@-webkit-keyframes logoIn{0%{-webkit-transform:translateY(-80px) scaleY(1.3);transform:translateY(-80px) scaleY(1.3);-webkit-filter:blur(4px);filter:blur(4px)}60%{-webkit-transform:translateY(0) scale(1);transform:translateY(0) scale(1)}70%{-webkit-transform:translateY(5px) scaleY(.92);transform:translateY(5px) scaleY(.92)}80%{-webkit-transform:translateY(0) scale(1);transform:translateY(0) scale(1)}to{-webkit-transform:translateY(-10px);transform:translateY(-10px)}}@keyframes logoIn{0%{-webkit-transform:translateY(-80px) scaleY(1.3);transform:translateY(-80px) scaleY(1.3);-webkit-filter:blur(4px);filter:blur(4px)}60%{-webkit-transform:translateY(0) scale(1);transform:translateY(0) scale(1)}70%{-webkit-transform:translateY(5px) scaleY(.92);transform:translateY(5px) scaleY(.92)}80%{-webkit-transform:translateY(0) scale(1);transform:translateY(0) scale(1)}to{-webkit-transform:translateY(-10px);transform:translateY(-10px)}}@-webkit-keyframes logoShadow{0%{-webkit-transform:scale(1.6,.9);transform:scale(1.6,.9);opacity:0}70%{-webkit-transform:scale(.8) translateY(-10px);transform:scale(.8) translateY(-10px);opacity:1}to{-webkit-transform:translateY(-10px);transform:translateY(-10px);opacity:1}}@keyframes logoShadow{0%{-webkit-transform:scale(1.6,.9);transform:scale(1.6,.9);opacity:0}70%{-webkit-transform:scale(.8) translateY(-10px);transform:scale(.8) translateY(-10px);opacity:1}to{-webkit-transform:translateY(-10px);transform:translateY(-10px);opacity:1}}body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Noto Sans,Ubuntu,Cantarell,Helvetica Neue,Helvetica,Arial,Verdana;color:#1d202b;color:var(--color-text-main);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}svg{fill:currentColor} +/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{-webkit-box-sizing:content-box;box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{-webkit-box-sizing:border-box;box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{-webkit-box-sizing:border-box;box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}[hidden],template{display:none}:root{--color-text-main:#1d202b;--color-text-second:#7b7e89;--color-line-gray:#e8e8eb;--color-link-active:#388ae5;--color-button-danger:#ff1629;--color-gray-border:rgba(var(--color-line-gray),0.48);--layout-padding-horisontal:40px;--layout-padding-vertical:40px;--layout-width-aside:200px;--layout-width-main-col:650px}@media (max-width:980px){:root{--layout-padding-horisontal:15px;--layout-padding-vertical:15px}}.docs{display:-webkit-box;display:-ms-flexbox;display:flex;padding:0 40px;padding:0 var(--layout-padding-horisontal)}@media (max-width:980px){.docs{-ms-flex-wrap:wrap;flex-wrap:wrap}}.docs__aside{width:200px;width:var(--layout-width-aside)}@media (max-width:980px){.docs__aside{width:100%;-ms-flex-preferred-size:100%;flex-basis:100%;padding:20px 40px!important;padding:20px var(--layout-padding-horisontal)!important;margin:0 -40px;margin:0 calc(-1*var(--layout-padding-horisontal));border-bottom:1px solid #e8e8eb;border-bottom:1px solid var(--color-line-gray)}}.docs__content{-webkit-box-flex:2;-ms-flex-positive:2;flex-grow:2;word-wrap:break-word}@media (max-width:980px){.docs__content{width:100%;-ms-flex-preferred-size:100%;flex-basis:100%}}.docs__content-inner{max-width:650px;max-width:var(--layout-width-main-col);margin:0 auto}.docs__aside,.docs__content{padding:40px 0;padding:var(--layout-padding-vertical) 0}@media (max-width:980px){.docs__aside,.docs__content{padding:20px 0}}.docs-header{display:-webkit-box;display:-ms-flexbox;display:flex;padding:0 40px;padding:0 var(--layout-padding-horisontal);border-bottom:1px solid #e8e8eb;border-bottom:1px solid var(--color-line-gray);font-size:15.8px;line-height:50px;-ms-flex-wrap:wrap;flex-wrap:wrap;position:relative}.docs-header a{display:inline-block;text-decoration:none}.docs-header__logo{font-weight:700;color:inherit}.docs-header__menu{display:-webkit-box;display:-ms-flexbox;display:flex;margin:0 0 0 auto;padding-left:0}@media (max-width:980px){.docs-header__menu{-ms-flex-preferred-size:100%;flex-basis:100%;font-size:12px}}.docs-header__menu li{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;list-style:none;margin-left:20px}@media (max-width:980px){.docs-header__menu li{margin-left:0;margin-right:15px}}@media (max-width:980px){.docs-header__menu-add{position:absolute;right:15px;top:15px;line-height:1em;margin:0!important}}@media (max-width:980px){.docs-header__menu-add a{font-size:0;padding:8px;margin-right:0}}.docs-header__menu a:not(.docs-header__button){color:inherit}.docs-header__menu a:not(.docs-header__button):hover{color:#388ae5;color:var(--color-link-active)}.docs-header__button{display:inline-block;padding:9px 15px;border-radius:3px;color:#6c6375;background:#fcfcff;-webkit-box-shadow:inset 0 0 0 1px rgba(184,189,206,.2);box-shadow:inset 0 0 0 1px rgba(184,189,206,.2);font-size:14px;line-height:1em;text-decoration:none;cursor:pointer;white-space:nowrap;background:#388ae5;background:var(--color-link-active);color:#fff;-webkit-box-shadow:none;box-shadow:none}.docs-header__button svg{margin:0 .3em 0 -.05em}.docs-header__button:hover{background:#387ecc}.docs-header__button{margin:auto 30px auto auto}.docs-aside{font-size:15px;color:#7b7e89;color:var(--color-text-second)}@media (max-width:980px){.docs-aside{font-size:13px;display:none;margin-top:20px}}.docs-aside--toggled{display:block!important}.docs-aside a{text-decoration:none}.docs-aside__section{margin-bottom:30px}@media (max-width:980px){.docs-aside__section{margin-bottom:20px}}.docs-aside__section:last-of-type{margin-bottom:0}.docs-aside__section-title{margin-bottom:15px;color:#388ae5;color:var(--color-link-active)}@media (max-width:980px){.docs-aside__section-title{margin-bottom:10px}}.docs-aside__section-list{padding-left:0;list-style:none}.docs-aside__section-list a{display:inline-block;color:inherit;padding:8px 0}.docs-aside-toggler{display:none;font-size:13px;cursor:pointer;color:#7b7e89;color:var(--color-text-second)}@media (max-width:980px){.docs-aside-toggler{display:block}}.docs-aside-toggler svg{margin-right:10px}.writing-header{display:-webkit-box;display:-ms-flexbox;display:flex;position:-webkit-sticky;position:sticky;top:0;padding:15px 0;margin-top:-40px;margin-top:calc(-1*var(--layout-padding-vertical));background:#fff;-webkit-box-shadow:0 3px 10px #fff;box-shadow:0 3px 10px #fff;z-index:2}.writing-header__save{display:inline-block;padding:9px 15px;border-radius:3px;color:#6c6375;background:#fcfcff;-webkit-box-shadow:inset 0 0 0 1px rgba(184,189,206,.2);box-shadow:inset 0 0 0 1px rgba(184,189,206,.2);font-size:14px;line-height:1em;text-decoration:none;cursor:pointer;white-space:nowrap;background:#388ae5;background:var(--color-link-active);color:#fff;-webkit-box-shadow:none;box-shadow:none}.writing-header__save svg{margin:0 .3em 0 -.05em}.writing-header__save:hover{background:#387ecc}.writing-header__save{margin-left:auto}.writing-header__left{margin:auto 0;color:#7b7e89;color:var(--color-text-second)}.writing-header__left span{margin-right:10px}.writing-buttons__remove{display:inline-block;padding:9px 15px;border-radius:3px;color:#6c6375;background:#fcfcff;-webkit-box-shadow:inset 0 0 0 1px rgba(184,189,206,.2);box-shadow:inset 0 0 0 1px rgba(184,189,206,.2);font-size:14px;line-height:1em;text-decoration:none;cursor:pointer;white-space:nowrap;background:#ff1629;background:var(--color-button-danger);color:#fff;-webkit-box-shadow:none;box-shadow:none}.writing-buttons__remove svg{margin:0 .3em 0 -.05em}.writing-buttons__remove:hover{background:#e61627}.uri-input{-webkit-box-sizing:border-box;box-sizing:border-box;width:100%;padding:10px 12px;border-radius:3px;border:1px solid rgba(201,201,204,.48);-webkit-box-shadow:inset 0 1px 2px 0 rgba(35,44,72,.06);box-shadow:inset 0 1px 2px 0 rgba(35,44,72,.06);outline:none}.page{font-size:16px;line-height:1.6}.page__header{display:-webkit-box;display:-ms-flexbox;display:flex;color:#7b7e89;color:var(--color-text-second)}@media (max-width:980px){.page__header{font-size:13px}}.page__header-nav{color:inherit;text-decoration:none}@media (max-width:980px){.page__header-nav{display:none}}.page__header-nav:hover{color:#388ae5;color:var(--color-link-active)}.page__header-nav:not(:last-of-type):after{content:"\BB";margin:0 .7em 0 .45em}.page__header-time{margin-left:auto}@media (max-width:980px){.page__header-time{margin-left:0}}.page__header-button{display:inline-block;padding:9px 15px;border-radius:3px;color:#6c6375;background:#fcfcff;-webkit-box-shadow:inset 0 0 0 1px rgba(184,189,206,.2);box-shadow:inset 0 0 0 1px rgba(184,189,206,.2);font-size:14px;line-height:1em;text-decoration:none;cursor:pointer;white-space:nowrap;background:#388ae5;background:var(--color-link-active);color:#fff;-webkit-box-shadow:none;box-shadow:none}.page__header-button svg{margin:0 .3em 0 -.05em}.page__header-button:hover{background:#387ecc}.page__header-button{padding:5px 10px;font-size:13px;margin-left:10px}.page__title{font-size:26px;font-weight:700;letter-spacing:-.04px;margin-bottom:-.2em}.block-header{margin:1.5em 0 .5em}.block-header--2{font-size:22px;font-weight:500}.block-header--3{font-size:18px;font-weight:500}.block-code{padding:20px!important;border-radius:3px;font-size:13px;border:1px solid #e8e8eb;border:1px solid var(--color-line-gray);font-family:Menlo,Monaco,Consolas,Courier New,monospace;line-height:1.7em}.block-list li{margin:10px 0}.landing-body{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;width:100%;height:100%}.landing-loader{position:absolute;left:50%;top:50%;z-index:-1;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.landing-loader>svg{width:80px;height:80px}.landing-frame{width:100%;height:100%;opacity:0;-webkit-transition:opacity .5s ease;transition:opacity .5s ease;will-change:opacity}body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Noto Sans,Ubuntu,Cantarell,Helvetica Neue,Helvetica,Arial,Verdana;color:#1d202b;color:var(--color-text-main);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}svg{fill:currentColor} diff --git a/src/frontend/styles/components/header.pcss b/src/frontend/styles/components/header.pcss index 2b3d5bf..eb0f555 100644 --- a/src/frontend/styles/components/header.pcss +++ b/src/frontend/styles/components/header.pcss @@ -28,6 +28,8 @@ } li { + display: inline-flex; + align-items: center; list-style: none; margin-left: 20px; diff --git a/src/frontend/styles/components/landing.pcss b/src/frontend/styles/components/landing.pcss index 012b770..126c1cc 100644 --- a/src/frontend/styles/components/landing.pcss +++ b/src/frontend/styles/components/landing.pcss @@ -1,672 +1,30 @@ /** - * Editor landing page + * Index page landing iframe */ -.editor-landing { - width: 100%; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - - a { - text-decoration: none; - } - - &__logo { - position: relative; - content: ''; - width: 84px; - height: 84px; - margin: auto; - - @media (--mobile) { - width: 50px; - height: 50px; - } - - &-main { - position: absolute; - animation: logoIn 1 500ms cubic-bezier(0.5, 1.05, 1, 1); - animation-fill-mode: forwards; - will-change: transform, filter; - z-index: 2; - left: 0; - - @media (--mobile) { - svg { - width: 50px; - } - } - } - - &-shadow { - position: absolute; - left: -38px; - z-index: 1; - animation: logoShadow 1 500ms cubic-bezier(0.5, 1.05, 1, 1); - animation-fill-mode: forwards; - will-change: transform, opacity; - - @media (--mobile) { - left: -21px; - margin-top: -13px; - - svg { - width: 92px; - } - } - } - } - - /** - * Editor title and description block - */ - &__info { - padding-top: 300px; - padding-bottom: 70px; - background-image: linear-gradient(0deg, #FFFFFF 0%, #EEF7FF 100%); - text-align: center; - } - - &__title { - margin: 20px 0 0; - line-height: 1.2em; - font-size: 50px; - letter-spacing: 0.23px; - color: #000; - font-weight: 600; - - @media (--mobile) { - margin-top: 25px; - font-size: 30px; - } - } - - &__description { - font-size: 17.3px; - letter-spacing: 0.13px; - line-height: 1.5em; - color: #868DA1; - margin-top: 20px; - - @media (--mobile) { - font-size: 15px; - margin-top: 10px; - } - } - - &__cta { - display: inline-block; - margin-top: 40px; - padding: 13px 19px; - border-radius: 30px; - background: #388ffe; - box-shadow: 0 9px 12px -6px rgba(11,132,242,0.78); - font-size: 16px; - color: #FFFFFF; - transition: all 150ms ease; - will-change: background-color, box-shadow; - - &:hover { - color: #fff; - background: #3684fe; - box-shadow: 0 9px 16px -6px rgba(11,132,242,0.78); - } - } - - &__menu { - text-align: left; - font-size: 14px; - position: fixed; - right: 7vw; - top: 150px; - line-height: 1.5em; - - @media (max-width: 1400px) { - right: 4.5vw; - - } - - @media (max-width: 1330px) { - position: absolute; - padding: 20px; - right: 45px; - top: 55px; - } - - - @media (--mobile) { - position: absolute; - padding: 15px; - left: 0; - top: 100px; - } - - a { - color: inherit; - display: inline-block; - border-bottom: 1px solid rgba(93,100,134,0.20); - margin-bottom: 6px; - } - } - - &__version { - display: inline-block; - padding: 5px 8px; - line-height: 1em; - border-radius: 30px; - background: #111111; - font-size: 10px; - color: #FFFFFF; - margin-right: -70px; - margin-left: 3px; - } - - &__demo { - background: #eef5fa; - border-radius: 100px; - max-width: 950px; - margin: 0 auto; - padding: 70px 60px; - - @media (max-width: 1550px) { - max-width: 850px; - } - - @media (--mobile) { - padding: 15px; - border-radius: 0; - } - - &-inner { - background: #fff; - border-radius: 8px; - box-shadow: 0 24px 24px -18px rgba(69,104,129,0.33), 0 9px 45px 0 rgba(114,119,160,0.12); - padding: 70px 50px; - font-size: 16px; - box-sizing: border-box; - - @media (--mobile) { - padding: 20px; - } - } - - &-inner, - .codex-editor__redactor { - min-height: 450px; - - @media (--mobile) { - min-height: 100px; - } - } - } - - &__preview { - max-width: var(--layout-width-main-col); - margin: 0 auto; - color: rgba(34, 78, 111, 0.75); - position: relative; - - &::after { - content: ''; - position: absolute; - right: 0; - top: 0; - bottom: 0; - width: 150px; - background: linear-gradient(90deg, rgba(238, 245, 250, 0), #eef5fa); - z-index: 2; - } - - &-inner { - overflow: auto; - font-size: 14px; - line-height: 1.5em; - letter-spacing: 0.1px; - } - } - - &__section-header { - font-size: 16px; - max-width: 375px; - margin: 50px auto; - line-height: 1.5em; - text-align: center; - color: #606578; - - @media (--mobile) { - font-size: 14px; - max-width: 70vw; - } - - header { - font-weight: 600; - margin-bottom: 13px; - - @media (--mobile) { - font-size: 16px; - } - } - - &--big { - margin: 130px auto; - line-height: 24px; - - @media (--mobile) { - margin: 50px auto; - } - - header { - font-size: 26px; - margin-bottom: 20px; - - @media (--mobile) { - font-size: 20px; - margin-bottom: 10px; - } - } - } - } - - - /** - * JSON output code highlighting - */ - .sc_attr { - color: #373742; - } - - .sc_toolname { - color: #db1029; - } - - .sc_tag { - color: rgb(4, 131, 216); - } - - .sc_key { - color: #6e4998; - } - - .sc_bool { - color: rgb(247, 60, 173); - } - - .sc_digit { - color: #196ff8; - } - - /** - * Loved by section - */ - &__loved-by { - position: relative; - display: flex; - justify-content: center; - margin-top: 30px; - - @media (--mobile) { - margin-bottom: 80px; - } - - &-item { - display: flex; - height: 30px; - - &:not(:last-of-type)::after { - content: ''; - width: 3px; - height: 100%; - margin-right: 27px; - margin-left: 29px; - background: #e0e0e0; - } - } - } - - /** - * Best plugins section - */ - &__plugins { - max-width: 650px; - margin: 0 auto; - - @media (--mobile) { - padding: 20px; - } - - &-title { - font-size: 24px; - margin-bottom: 15px; - - @media (--mobile) { - font-size: 20px; - margin-bottom: 10px; - } - } - - &-description { - margin-bottom: 30px; - font-size: 16px; - line-height: 1.65em; - color: #606578; - - @media (--mobile) { - font-size: 14px; - } - } - - &-filter { - margin: 30px 0; - - @media (--mobile) { - margin: 15px 0 20px; - } - - &-button { - font-size: 15px; - font-weight: 500; - color: #343434; - vertical-align: middle; - cursor: pointer; - - svg { - vertical-align: middle; - margin: -3px 6px 0 3px; - } - - &:not(:last-of-type) { - margin-right: 17px; - } - } - } - } - - /** - * Links at the bottom of plugins list - */ - &__more-plugins, - &__contribute { - font-size: 15px; - color: #7b7e89; - cursor: pointer; - - @media (--mobile) { - margin-top: 10px; - } - - svg { - width: 9px; - height: 9px; - fill: currentColor; - vertical-align: middle; - - @media (--mobile) { - display: none; - } - } - } - - &__more-plugins { - float: left; - - @media (--mobile) { - float: none; - } - } - - &__contribute { - float: right; - - @media (--mobile) { - display: none; - } - - - svg { - margin: -3px 3px 0 0; - } - } - - /** - * Override default editor's padding-bottom - */ - .codex-editor__redactor { - padding-bottom: 120px; - } - - &__star { - position: relative; - display: inline-block; - margin-top: 60px; - - &-line { - position: absolute; - width: 130px; - height: 10px; - left: 51.5%; - top: 36%; - z-index: -1; - - &:nth-of-type(1){ - transform: translateX(-50%) rotate(-22deg); - } - - &:nth-of-type(2){ - transform: rotate(-90deg) ; - left: -11px; - top: 13px; - width: 90px; - } - - &:nth-of-type(3){ - transform: translateX(-50%) rotate(22deg); - } - - &::before, - &::after { - content: ''; - display: inline-block; - width: 15px; - height: 10px; - background-image: url("data:image/svg+xml,%3Csvg width='15' height='10' viewBox='0 0 15 10' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 5.5H0v-1h6v-4L15 5 6 9.5z' fill='%23B6B9C0' fill-rule='nonzero'/%3E%3C/svg%3E"); - position: absolute; - top: 0; - } - - &:before { - left: 0; - animation: arrow-moving-left infinite 1000ms ease; - } - - &:after{ - right: 0; - background-image: url("data:image/svg+xml,%3Csvg width='15' height='10' viewBox='0 0 15 10' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 4.5h6v1H9v4L0 5 9 .5v4z' fill='%23B6B9C0' fill-rule='nonzero'/%3E%3C/svg%3E"); - animation: arrow-moving-right infinite 1000ms ease; - } - } - } -} - -@keyframes arrow-moving-left { - 50% { - transform: translateX(-10px); - } -} - -@keyframes arrow-moving-right { - 50% { - transform: translateX(10px); - } -} - -/** - * Plugin items styles - */ -.editor-plugin { - position: relative; +.landing-body { display: flex; flex-direction: column; - padding: 20px; - margin-bottom: 20px; - border-radius: 7px; - box-shadow: 0 3px 11px rgba(125, 128, 147, 0.23); - min-height: 90px; - padding-right: 120px; + width: 100%; + height: 100%; +} - @media (--mobile) { - padding-right: 100px; - } +.landing-loader { + position: absolute; + left: 50%; + top: 50%; + z-index: -1; + transform: translate(-50%, -50%); - &__title { - font-size: 18px; - color: #000; - margin: 0; - display: inline-block; - margin-bottom: 4px; - margin-right: 5px; - - @media (--mobile) { - font-size: 16px; - } - } - - &__label { - display: inline-block; - font-size: 18px; - color: #606578; - border-radius: 3px; - font-weight: 500; - opacity: 0.4; - line-height: 1em; - margin-top: -5px; - - @media (--mobile) { - font-size: 16px; - } - } - - &__description { - font-size: 14px; - color: #606578; - } - - &__contributors { - display: flex; - margin-top: auto; - - @media (--mobile) { - margin-top: 15px; - } - - &-item { - display: inline-block; - overflow: hidden; - border-radius: 4px; - width: 18px; - height: 18px; - - img { - width: 100%; - height: 100%; - } - - &:not(:last-of-type) { - margin-right: 6px; - } - } - } - - &__demo { - position: absolute; - right: 20px; - top: 15px; - margin-left: 45px; - - img, - video { - height: 90px; - - @media (--mobile) { - height: 40px; - } - } - } - - &--your-own { - ^&__title { - color: #7b7e89; - } - - ^&__description { - display: inline-block; - } - - ^&__demo { - position: static; - margin-left: 0; - - pre { - font-size: 12px; - line-height: 2em; - font-family: Menlo, Monaco, Consolas, Courier New, monospace; - margin: 15px 0; - font-weight: 500; - color: #484554; - - @media (--mobile) { - font-size: 10px; - overflow: auto; - } - } - } - - ^&__footer { - margin-top: 20px; - font-size: 14px; - } + & > svg { + width: 80px; + height: 80px; } } - - -@keyframes logoIn { - 0% { - transform: translateY(-80px) scale(1, 1.3 ); - filter: blur(4px); - } - - 60% { - transform: translateY(0) scale(1); - } - - 70% { - transform: translateY(5px) scale(1, 0.92); - } - - 80% { - transform: translateY(0) scale(1) - } - - 100% { - transform: translateY(-10px); - } -} - - - -@keyframes logoShadow { - 0% { - transform: scale(1.6, 0.9); - opacity: 0; - } - - 70% { - transform: scale(0.8, 0.8) translateY(-10px); - opacity: 1; - } - - 100% { - transform: translateY(-10px); - opacity: 1; - } - +.landing-frame { + width: 100%; + height: 100%; + opacity: 0; + transition: opacity 500ms ease; + will-change: opacity; } diff --git a/src/frontend/svg/loader.svg b/src/frontend/svg/loader.svg new file mode 100644 index 0000000..8a6123c --- /dev/null +++ b/src/frontend/svg/loader.svg @@ -0,0 +1,60 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/models/alias.js b/src/models/alias.js index 8fefd8a..2f757f5 100644 --- a/src/models/alias.js +++ b/src/models/alias.js @@ -1,4 +1,4 @@ -const {aliases: aliasesDb} = require('../utils/database/index'); +const { aliases: aliasesDb } = require('../utils/database/index'); const binaryMD5 = require('../utils/crypto'); /** @@ -40,10 +40,10 @@ class Alias { */ static async get(aliasName) { const hash = binaryMD5(aliasName); - let data = await aliasesDb.findOne({hash: hash, deprecated: false}); + let data = await aliasesDb.findOne({ hash: hash, deprecated: false }); if (!data) { - data = await aliasesDb.findOne({hash: hash}); + data = await aliasesDb.findOne({ hash: hash }); } return new Alias(data); @@ -79,7 +79,7 @@ class Alias { this._id = insertedRow._id; } else { - await aliasesDb.update({_id: this._id}, this.data); + await aliasesDb.update({ _id: this._id }, this.data); } return this; @@ -91,7 +91,7 @@ class Alias { * @param {AliasData} aliasData */ set data(aliasData) { - const {id, type, hash, deprecated} = aliasData; + const { id, type, hash, deprecated } = aliasData; this.id = id || this.id; this.type = type || this.type; @@ -131,7 +131,7 @@ class Alias { * @returns {Promise} */ async destroy() { - await aliasesDb.remove({_id: this._id}); + await aliasesDb.remove({ _id: this._id }); delete this._id; diff --git a/src/models/page.js b/src/models/page.js index b035213..f214b3d 100644 --- a/src/models/page.js +++ b/src/models/page.js @@ -1,4 +1,4 @@ -const {pages: pagesDb} = require('../utils/database/index'); +const { pages: pagesDb } = require('../utils/database/index'); const translateString = require('../utils/translation'); /** @@ -27,7 +27,7 @@ class Page { * @returns {Promise} */ static async get(_id) { - const data = await pagesDb.findOne({_id}); + const data = await pagesDb.findOne({ _id }); return new Page(data); } @@ -38,7 +38,7 @@ class Page { * @returns {Promise} */ static async getByUri(uri) { - const data = await pagesDb.findOne({uri}); + const data = await pagesDb.findOne({ uri }); return new Page(data); } @@ -78,7 +78,7 @@ class Page { * @param {PageData} pageData */ set data(pageData) { - const {body, parent, uri} = pageData; + const { body, parent, uri } = pageData; this.body = body || this.body; this.title = this.extractTitleFromBody(); @@ -141,7 +141,7 @@ class Page { * @returns {Promise} */ get parent() { - return pagesDb.findOne({_id: this._parent}) + return pagesDb.findOne({ _id: this._parent }) .then(data => new Page(data)); } @@ -151,7 +151,7 @@ class Page { * @returns {Promise} */ get children() { - return pagesDb.find({parent: this._id}) + return pagesDb.find({ parent: this._id }) .then(data => data.map(page => new Page(page))); } @@ -168,7 +168,7 @@ class Page { this._id = insertedRow._id; } else { - await pagesDb.update({_id: this._id}, this.data); + await pagesDb.update({ _id: this._id }, this.data); } return this; @@ -180,7 +180,7 @@ class Page { * @returns {Promise} */ async destroy() { - await pagesDb.remove({_id: this._id}); + await pagesDb.remove({ _id: this._id }); delete this._id; diff --git a/src/models/pageOrder.js b/src/models/pageOrder.js index 91aaefa..12c671c 100644 --- a/src/models/pageOrder.js +++ b/src/models/pageOrder.js @@ -1,4 +1,4 @@ -const {pagesOrder: db} = require('../utils/database/index'); +const { pagesOrder: db } = require('../utils/database/index'); /** * @typedef {Object} PageOrderData @@ -21,7 +21,7 @@ class PageOrder { * @returns {PageOrder} */ static async get(pageId) { - const order = await db.findOne({page: pageId}); + const order = await db.findOne({ page: pageId }); let data = {}; @@ -172,7 +172,7 @@ class PageOrder { this._id = insertedRow._id; } else { - await db.update({_id: this._id}, this.data); + await db.update({ _id: this._id }, this.data); } return this; @@ -182,7 +182,7 @@ class PageOrder { * Remove page data from the database */ async destroy() { - await db.remove({_id: this._id}); + await db.remove({ _id: this._id }); delete this._id; diff --git a/src/routes/home.js b/src/routes/home.js index 9467766..053e05f 100644 --- a/src/routes/home.js +++ b/src/routes/home.js @@ -193,7 +193,7 @@ router.get('/', function (req, res, next) { } ]; - res.render('index', { + res.render('pages/index', { plugins }); }); diff --git a/src/utils/rcparser.js b/src/utils/rcparser.js index 392fbee..ef7650c 100644 --- a/src/utils/rcparser.js +++ b/src/utils/rcparser.js @@ -40,8 +40,8 @@ module.exports = class RCParser { return RCParser.DEFAULTS; } - const file = fs.readFileSync(rcPath, {encoding: 'UTF-8'}); - const rConfig = {}; + const file = fs.readFileSync(rcPath, { encoding: 'UTF-8' }); + const rConfig = RCParser.DEFAULTS; let userConfig; try { @@ -51,8 +51,11 @@ module.exports = class RCParser { return RCParser.DEFAULTS; } - rConfig.title = userConfig.title || RCParser.DEFAULTS.title; - rConfig.menu = userConfig.menu || RCParser.DEFAULTS.menu; + for (let option in userConfig) { + if (userConfig.hasOwnProperty(option)) { + rConfig[option] = userConfig[option] || RCParser.DEFAULTS[option] || undefined; + } + } if (!(rConfig.menu instanceof Array)) { console.log('Menu section in the rc file must be an array.'); @@ -70,7 +73,7 @@ module.exports = class RCParser { return false; } - const {title, uri} = option; + const { title, uri } = option; if (!title || typeof title !== 'string') { console.log(`Menu option #${i} title must be a string.`); diff --git a/src/views/index.twig b/src/views/_index.twig similarity index 100% rename from src/views/index.twig rename to src/views/_index.twig diff --git a/src/views/pages/index.twig b/src/views/pages/index.twig new file mode 100644 index 0000000..b14eec8 --- /dev/null +++ b/src/views/pages/index.twig @@ -0,0 +1,16 @@ + + + + {{ config.title }} + + + + + {% include "components/header.twig" %} +
+ {{ svg('loader') }} +
+ + + + diff --git a/yarn.lock b/yarn.lock index 6d457fd..99e7e22 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2138,18 +2138,18 @@ escape-string-regexp@1.0.5, escape-string-regexp@^1.0.2, escape-string-regexp@^1 resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4" "eslint-config-codex@github:codex-team/eslint-config": - version "1.0.0" - resolved "https://codeload.github.com/codex-team/eslint-config/tar.gz/9082652b6059d6ec4cc8213811826fdfaad899b0" + version "1.1.0" + resolved "https://codeload.github.com/codex-team/eslint-config/tar.gz/a38c446d70463a125a610732a3a8931abac2152c" dependencies: - eslint-config-standard "^11.0.0" + eslint-config-standard "^12.0.0" eslint-plugin-import "^2.14.0" eslint-plugin-node "^7.0.1" eslint-plugin-promise "^3.8.0" eslint-plugin-standard "^3.0.1" -eslint-config-standard@^11.0.0: - version "11.0.0" - resolved "https://registry.yarnpkg.com/eslint-config-standard/-/eslint-config-standard-11.0.0.tgz#87ee0d3c9d95382dc761958cbb23da9eea31e0ba" +eslint-config-standard@^12.0.0: + version "12.0.0" + resolved "https://registry.yarnpkg.com/eslint-config-standard/-/eslint-config-standard-12.0.0.tgz#638b4c65db0bd5a41319f96bba1f15ddad2107d9" eslint-import-resolver-node@^0.3.1: version "0.3.2" @@ -5251,12 +5251,18 @@ resolve-url@^0.2.1: version "0.2.1" resolved "https://registry.yarnpkg.com/resolve-url/-/resolve-url-0.2.1.tgz#2c637fe77c893afd2a663fe21aa9080068e2052a" -resolve@^1.3.2, resolve@^1.5.0, resolve@^1.6.0, resolve@^1.8.1: +resolve@^1.3.2, resolve@^1.5.0, resolve@^1.6.0: version "1.9.0" resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.9.0.tgz#a14c6fdfa8f92a7df1d996cb7105fa744658ea06" dependencies: path-parse "^1.0.6" +resolve@^1.8.1: + version "1.10.0" + resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.10.0.tgz#3bdaaeaf45cc07f375656dfd2e54ed0810b101ba" + dependencies: + path-parse "^1.0.6" + restore-cursor@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/restore-cursor/-/restore-cursor-2.0.0.tgz#9f7ee287f82fd326d4fd162923d62129eee0dfaf"