Both versions working

This commit is contained in:
Aaron Carlino 2019-11-12 16:09:29 +13:00
parent e31611ae2b
commit 0cc0587897
17 changed files with 239 additions and 125 deletions

View File

@ -23,15 +23,15 @@ module.exports = {
patterns: `docs/en/**`
}
},
// {
// resolve: `gatsby-source-git`,
// options: {
// name: `3`,
// remote: `https://github.com/unclecheese/silverstripe-framework.git`,
// branch: `3`,
// patterns: `docs/en/**`
// }
// },
{
resolve: `gatsby-source-git`,
options: {
name: `3`,
remote: `https://github.com/unclecheese/silverstripe-framework.git`,
branch: `pulls/3/gatsby-docs`,
patterns: `docs/en/**`
}
},
{
resolve: 'gatsby-transformer-remark',
options: {

42
index.html Normal file
View File

@ -0,0 +1,42 @@
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="x-ua-compatible" content="ie=edge"/><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/><style data-href="/styles.6b408cf66f36de9228e8.css">code[class*=language-],pre[class*=language-]{color:#f8f8f2;background:none;text-shadow:0 1px rgba(0,0,0,.3);font-family:Consolas,Monaco,Andale Mono,Ubuntu Mono,monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-ms-hyphens:none;hyphens:none}pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto;border-radius:.3em}:not(pre)>code[class*=language-],pre[class*=language-]{background:#272822}:not(pre)>code[class*=language-]{padding:.1em;border-radius:.3em;white-space:normal}.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#708090}.token.punctuation{color:#f8f8f2}.namespace{opacity:.7}.token.constant,.token.deleted,.token.property,.token.symbol,.token.tag{color:#f92672}.token.boolean,.token.number{color:#ae81ff}.token.attr-name,.token.builtin,.token.char,.token.inserted,.token.selector,.token.string{color:#a6e22e}.language-css .token.string,.style .token.string,.token.entity,.token.operator,.token.url,.token.variable{color:#f8f8f2}.token.atrule,.token.attr-value,.token.class-name,.token.function{color:#e6db74}.token.keyword{color:#66d9ef}.token.important,.token.regex{color:#fd971f}.token.bold,.token.important{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}
/*!
* Bootstrap v4.3.1 (https://getbootstrap.com/)
* Copyright 2011-2019 The Bootstrap Authors
* Copyright 2011-2019 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
*/:root{--blue:#007bff;--indigo:#6610f2;--purple:#6f42c1;--pink:#e83e8c;--red:#dc3545;--orange:#fd7e14;--yellow:#ffc107;--green:#28a745;--teal:#20c997;--cyan:#17a2b8;--white:#fff;--gray:#adb4c0;--gray-dark:#747f94;--primary:#005ae1;--secondary:#5d6778;--success:#5cb377;--info:#5b99ea;--warning:#eebf41;--danger:#d26d69;--light:#fff;--dark:#747f94;--breakpoint-xs:0;--breakpoint-sm:576px;--breakpoint-md:768px;--breakpoint-lg:992px;--breakpoint-xl:1200px;--font-family-sans-serif:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;--font-family-monospace:SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace}*,:after,:before{box-sizing:border-box}html{font-family:sans-serif;line-height:1.15;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0,0,0,0)}article,figcaption,header,main,nav,section{display:block}body{margin:0;font-size:1rem;font-weight:400;line-height:1.5;color:#252930;text-align:left;background-color:#fff}[tabindex="-1"]:focus{outline:0!important}hr{box-sizing:content-box;height:0;overflow:visible}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:.5rem}p{margin-top:0}address,p{margin-bottom:1rem}address{font-style:normal;line-height:inherit}dl,ol,ul{margin-top:0;margin-bottom:1rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}dt{font-weight:700}dd{margin-bottom:.5rem;margin-left:0}b,strong{font-weight:bolder}small{font-size:80%}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}a{color:#005ae1;text-decoration:none;background-color:transparent}a:hover{color:#003b95;text-decoration:underline}a:not([href]):not([tabindex]),a:not([href]):not([tabindex]):focus,a:not([href]):not([tabindex]):hover{color:inherit;text-decoration:none}a:not([href]):not([tabindex]):focus{outline:0}code,pre{font-family:SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em}pre{margin-top:0;margin-bottom:1rem;overflow:auto}img{border-style:none}img,svg{vertical-align:middle}svg{overflow:hidden}table{border-collapse:collapse}caption{padding-top:.75rem;padding-bottom:.75rem;color:#adb4c0;text-align:left;caption-side:bottom}th{text-align:inherit}label{display:inline-block;margin-bottom:.5rem}button{border-radius:0}button:focus{outline:1px dotted;outline:5px auto -webkit-focus-ring-color}button,input,select,textarea{margin:0;font-family:inherit;font-size:inherit;line-height:inherit}button,input{overflow:visible}button,select{text-transform:none}select{word-wrap:normal}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]:not(:disabled),[type=reset]:not(:disabled),[type=submit]:not(:disabled),button:not(:disabled){cursor:pointer}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{padding:0;border-style:none}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=date],input[type=datetime-local],input[type=month],input[type=time]{-webkit-appearance:listbox}textarea{overflow:auto;resize:vertical}legend{display:block;width:100%;max-width:100%;padding:0;margin-bottom:.5rem;font-size:1.5rem;line-height:inherit;color:inherit;white-space:normal}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{outline-offset:-2px;-webkit-appearance:none}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{font:inherit;-webkit-appearance:button}output{display:inline-block}summary{display:list-item;cursor:pointer}template{display:none}[hidden]{display:none!important}.h1,.h2,.h3,.h4,.h5,.h6,h1,h2,h3,h4,h5,h6{margin-bottom:.5rem;font-weight:500;line-height:1.2}.h1,h1{font-size:2.5rem}.h2,h2{font-size:2rem}.h3,h3{font-size:1.75rem}.h4,h4{font-size:1.5rem}.h5,h5{font-size:1.25rem}.h6,h6{font-size:1rem}hr{margin-top:1rem;margin-bottom:1rem;border:0;border-top:1px solid rgba(0,0,0,.1)}.small,small{font-size:80%;font-weight:400}.mark,mark{padding:.2em;background-color:#fcf8e3}.list-inline,.list-unstyled{padding-left:0;list-style:none}.list-inline-item{display:inline-block}.list-inline-item:not(:last-child){margin-right:.5rem}code{font-size:87.5%;color:#e83e8c;word-break:break-word}a>code{color:inherit}pre{display:block;font-size:87.5%;color:#252930}pre code{font-size:inherit;color:inherit;word-break:normal}.container{width:100%;padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto}@media (min-width:576px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:992px){.container{max-width:1024px}}@media (min-width:1200px){.container{max-width:1280px}}.row{display:flex;flex-wrap:wrap;margin-right:-15px;margin-left:-15px}.col,.col-12,.col-lg-6{position:relative;width:100%;padding-right:15px;padding-left:15px}.col{flex-basis:0;flex-grow:1}.col,.col-12{max-width:100%}.col-12{flex:0 0 100%}@media (min-width:992px){.col-lg-6{flex:0 0 50%;max-width:50%}}.table{width:100%;margin-bottom:1rem;color:#252930}.table td,.table th{padding:.75rem;vertical-align:top;border-top:1px solid #e7e9ed}.table thead th{vertical-align:bottom;border-bottom:2px solid #e7e9ed}.table tbody+tbody{border-top:2px solid #e7e9ed}.table-striped tbody tr:nth-of-type(odd){background-color:rgba(0,0,0,.05)}.table-responsive{display:block;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}.form-control{display:block;width:100%;height:calc(1.5em + .75rem + 2px);padding:.375rem .75rem;font-size:1rem;font-weight:400;line-height:1.5;color:#919aaa;background-color:#fff;background-clip:padding-box;border:1px solid #d9dce1;border-radius:.25rem;-webkit-transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}@media (prefers-reduced-motion:reduce){.form-control{-webkit-transition:none;transition:none}}.form-control::-ms-expand{background-color:transparent;border:0}.form-control:focus{color:#919aaa;background-color:#fff;border-color:#62a1ff;outline:0;box-shadow:0 0 0 .2rem rgba(0,90,225,.25)}.form-control::-webkit-input-placeholder{color:#adb4c0;opacity:1}.form-control:-ms-input-placeholder{color:#adb4c0;opacity:1}.form-control::-ms-input-placeholder{color:#adb4c0;opacity:1}.form-control::placeholder{color:#adb4c0;opacity:1}.form-control:disabled,.form-control[readonly]{background-color:#f5f6f8;opacity:1}select.form-control:focus::-ms-value{color:#919aaa;background-color:#fff}select.form-control[multiple],select.form-control[size],textarea.form-control{height:auto}.btn{display:inline-block;font-weight:400;color:#252930;text-align:center;vertical-align:middle;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;background-color:transparent;border:1px solid transparent;padding:.375rem .75rem;font-size:1rem;line-height:1.5;border-radius:.25rem;-webkit-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out}.btn:hover{color:#252930;text-decoration:none}.btn.focus,.btn:focus{outline:0;box-shadow:0 0 0 .2rem rgba(0,90,225,.25)}.btn.disabled,.btn:disabled{opacity:.65}a.btn.disabled{pointer-events:none}.btn-primary{color:#fff;background-color:#005ae1;border-color:#005ae1}.btn-primary:hover{color:#fff;background-color:#004bbb;border-color:#0046ae}.btn-primary.focus,.btn-primary:focus{box-shadow:0 0 0 .2rem rgba(38,115,230,.5)}.btn-primary.disabled,.btn-primary:disabled{color:#fff;background-color:#005ae1;border-color:#005ae1}.btn-primary:not(:disabled):not(.disabled).active,.btn-primary:not(:disabled):not(.disabled):active,.show>.btn-primary.dropdown-toggle{color:#fff;background-color:#0046ae;border-color:#0041a1}.btn-primary:not(:disabled):not(.disabled).active:focus,.btn-primary:not(:disabled):not(.disabled):active:focus,.show>.btn-primary.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(38,115,230,.5)}.btn-secondary{background-color:#5d6778;border-color:#5d6778}.btn-secondary:hover{color:#fff;background-color:#4c5462;border-color:#464e5b}.btn-secondary.focus,.btn-secondary:focus{box-shadow:0 0 0 .2rem rgba(117,125,140,.5)}.btn-secondary.disabled,.btn-secondary:disabled{color:#fff;background-color:#5d6778;border-color:#5d6778}.btn-secondary:not(:disabled):not(.disabled).active,.btn-secondary:not(:disabled):not(.disabled):active,.show>.btn-secondary.dropdown-toggle{color:#fff;background-color:#464e5b;border-color:#414854}.btn-secondary:not(:disabled):not(.disabled).active:focus,.btn-secondary:not(:disabled):not(.disabled):active:focus,.show>.btn-secondary.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(117,125,140,.5)}.btn-warning{color:#252930;background-color:#eebf41;border-color:#eebf41}.btn-warning:hover{color:#252930;background-color:#ebb31e;border-color:#e7ae15}.btn-warning.focus,.btn-warning:focus{box-shadow:0 0 0 .2rem rgba(208,169,62,.5)}.btn-warning.disabled,.btn-warning:disabled{color:#252930;background-color:#eebf41;border-color:#eebf41}.btn-warning:not(:disabled):not(.disabled).active,.btn-warning:not(:disabled):not(.disabled):active,.show>.btn-warning.dropdown-toggle{color:#252930;background-color:#e7ae15;border-color:#dca514}.btn-warning:not(:disabled):not(.disabled).active:focus,.btn-warning:not(:disabled):not(.disabled):active:focus,.show>.btn-warning.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(208,169,62,.5)}.btn-danger{color:#fff;background-color:#d26d69;border-color:#d26d69}.btn-danger:hover{color:#fff;background-color:#c9504c;border-color:#c64742}.btn-danger.focus,.btn-danger:focus{box-shadow:0 0 0 .2rem rgba(217,131,128,.5)}.btn-danger.disabled,.btn-danger:disabled{color:#fff;background-color:#d26d69;border-color:#d26d69}.btn-danger:not(:disabled):not(.disabled).active,.btn-danger:not(:disabled):not(.disabled):active,.show>.btn-danger.dropdown-toggle{color:#fff;background-color:#c64742;border-color:#c13f3a}.btn-danger:not(:disabled):not(.disabled).active:focus,.btn-danger:not(:disabled):not(.disabled):active:focus,.show>.btn-danger.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(217,131,128,.5)}.fade{-webkit-transition:opacity .15s linear;transition:opacity .15s linear}@media (prefers-reduced-motion:reduce){.fade{-webkit-transition:none;transition:none}}.fade:not(.show){opacity:0}.collapse:not(.show){display:none}.collapsing{position:relative;height:0;overflow:hidden;-webkit-transition:height .35s ease;transition:height .35s ease}@media (prefers-reduced-motion:reduce){.collapsing{-webkit-transition:none;transition:none}}.dropdown,.dropleft,.dropright,.dropup{position:relative}.dropdown-toggle{white-space:nowrap}.dropdown-toggle:after{display:inline-block;margin-left:.255em;vertical-align:.255em;content:"";border-top:.3em solid;border-right:.3em solid transparent;border-bottom:0;border-left:.3em solid transparent}.dropdown-toggle:empty:after{margin-left:0}.dropdown-menu{position:absolute;top:100%;left:0;z-index:1000;display:none;float:left;min-width:10rem;padding:.5rem 0;margin:.125rem 0 0;font-size:1rem;color:#252930;text-align:left;list-style:none;background-color:#fff;background-clip:padding-box;border:1px solid rgba(0,0,0,.15);border-radius:.25rem}.dropdown-menu-left{right:auto;left:0}.dropdown-menu-right{right:0;left:auto}.dropup .dropdown-menu{top:auto;bottom:100%;margin-top:0;margin-bottom:.125rem}.dropup .dropdown-toggle:after{display:inline-block;margin-left:.255em;vertical-align:.255em;content:"";border-top:0;border-right:.3em solid transparent;border-bottom:.3em solid;border-left:.3em solid transparent}.dropup .dropdown-toggle:empty:after{margin-left:0}.dropright .dropdown-menu{top:0;right:auto;left:100%;margin-top:0;margin-left:.125rem}.dropright .dropdown-toggle:after{display:inline-block;margin-left:.255em;vertical-align:.255em;content:"";border-top:.3em solid transparent;border-right:0;border-bottom:.3em solid transparent;border-left:.3em solid}.dropright .dropdown-toggle:empty:after{margin-left:0}.dropright .dropdown-toggle:after{vertical-align:0}.dropleft .dropdown-menu{top:0;right:100%;left:auto;margin-top:0;margin-right:.125rem}.dropleft .dropdown-toggle:after{display:inline-block;margin-left:.255em;vertical-align:.255em;content:"";display:none}.dropleft .dropdown-toggle:before{display:inline-block;margin-right:.255em;vertical-align:.255em;content:"";border-top:.3em solid transparent;border-right:.3em solid;border-bottom:.3em solid transparent}.dropleft .dropdown-toggle:empty:after{margin-left:0}.dropleft .dropdown-toggle:before{vertical-align:0}.dropdown-menu[x-placement^=bottom],.dropdown-menu[x-placement^=left],.dropdown-menu[x-placement^=right],.dropdown-menu[x-placement^=top]{right:auto;bottom:auto}.dropdown-divider{height:0;margin:.5rem 0;overflow:hidden;border-top:1px solid #f5f6f8}.dropdown-item{display:block;width:100%;padding:.25rem 1.5rem;clear:both;font-weight:400;color:#252930;text-align:inherit;white-space:nowrap;background-color:transparent;border:0}.dropdown-item:focus,.dropdown-item:hover{color:#1a1d22;text-decoration:none;background-color:#fff}.dropdown-item.active,.dropdown-item:active{color:#fff;text-decoration:none;background-color:#005ae1}.dropdown-item.disabled,.dropdown-item:disabled{color:#adb4c0;pointer-events:none;background-color:transparent}.dropdown-menu.show{display:block}.btn-group{position:relative;display:inline-flex;vertical-align:middle}.btn-group>.btn{position:relative;flex:1 1 auto}.btn-group>.btn.active,.btn-group>.btn:active,.btn-group>.btn:focus,.btn-group>.btn:hover{z-index:1}.btn-group>.btn-group:not(:first-child),.btn-group>.btn:not(:first-child){margin-left:-1px}.btn-group>.btn-group:not(:last-child)>.btn,.btn-group>.btn:not(:last-child):not(.dropdown-toggle){border-top-right-radius:0;border-bottom-right-radius:0}.btn-group>.btn-group:not(:first-child)>.btn,.btn-group>.btn:not(:first-child){border-top-left-radius:0;border-bottom-left-radius:0}.nav{display:flex;flex-wrap:wrap;padding-left:0;margin-bottom:0;list-style:none}.nav-link{display:block;padding:.5rem 1rem}.nav-link:focus,.nav-link:hover{text-decoration:none}.nav-link.disabled{color:#adb4c0;pointer-events:none;cursor:default}.nav-tabs{border-bottom:1px solid #e7e9ed}.nav-tabs .nav-item{margin-bottom:-1px}.nav-tabs .nav-link{border:1px solid transparent;border-top-left-radius:.25rem;border-top-right-radius:.25rem}.nav-tabs .nav-link:focus,.nav-tabs .nav-link:hover{border-color:#f5f6f8 #f5f6f8 #e7e9ed}.nav-tabs .nav-link.disabled{color:#adb4c0;background-color:transparent;border-color:transparent}.nav-tabs .nav-item.show .nav-link,.nav-tabs .nav-link.active{color:#919aaa;background-color:#fff;border-color:#e7e9ed #e7e9ed #fff}.nav-tabs .dropdown-menu{margin-top:-1px;border-top-left-radius:0;border-top-right-radius:0}.nav-pills .nav-link{border-radius:.25rem}.nav-pills .nav-link.active,.nav-pills .show>.nav-link{color:#fff;background-color:#005ae1}.tab-content>.tab-pane{display:none}.tab-content>.active{display:block}.navbar{position:relative;padding:.5rem 1rem}.navbar,.navbar>.container{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between}.navbar-brand{display:inline-block;padding-top:.3125rem;padding-bottom:.3125rem;margin-right:1rem;font-size:1.25rem;line-height:inherit;white-space:nowrap}.navbar-brand:focus,.navbar-brand:hover{text-decoration:none}.navbar-nav{display:flex;flex-direction:column;padding-left:0;margin-bottom:0;list-style:none}.navbar-nav .nav-link{padding-right:0;padding-left:0}.navbar-nav .dropdown-menu{position:static;float:none}@media (max-width:767.98px){.navbar-expand-md>.container{padding-right:0;padding-left:0}}@media (min-width:768px){.navbar-expand-md{flex-flow:row nowrap;justify-content:flex-start}.navbar-expand-md .navbar-nav{flex-direction:row}.navbar-expand-md .navbar-nav .dropdown-menu{position:absolute}.navbar-expand-md .navbar-nav .nav-link{padding-right:.5rem;padding-left:.5rem}.navbar-expand-md>.container{flex-wrap:nowrap}}.navbar-light .navbar-brand,.navbar-light .navbar-brand:focus,.navbar-light .navbar-brand:hover{color:rgba(0,0,0,.9)}.navbar-light .navbar-nav .nav-link{color:rgba(0,0,0,.5)}.navbar-light .navbar-nav .nav-link:focus,.navbar-light .navbar-nav .nav-link:hover{color:rgba(0,0,0,.7)}.navbar-light .navbar-nav .nav-link.disabled{color:rgba(0,0,0,.3)}.navbar-light .navbar-nav .active>.nav-link,.navbar-light .navbar-nav .nav-link.active,.navbar-light .navbar-nav .nav-link.show,.navbar-light .navbar-nav .show>.nav-link{color:rgba(0,0,0,.9)}.card{position:relative;display:flex;flex-direction:column;min-width:0;word-wrap:break-word;background-color:#fff;background-clip:border-box;border:1px solid rgba(0,0,0,.125);border-radius:.25rem}.card>hr{margin-right:0;margin-left:0}.card>.list-group:first-child .list-group-item:first-child{border-top-left-radius:.25rem;border-top-right-radius:.25rem}.card>.list-group:last-child .list-group-item:last-child{border-bottom-right-radius:.25rem;border-bottom-left-radius:.25rem}.card-body{flex:1 1 auto;padding:1.25rem}.card-title{margin-bottom:.75rem}.card-text:last-child{margin-bottom:0}.accordion>.card{overflow:hidden}.accordion>.card:not(:first-of-type):not(:last-of-type){border-bottom:0;border-radius:0}.accordion>.card:first-of-type{border-bottom:0;border-bottom-right-radius:0;border-bottom-left-radius:0}.accordion>.card:last-of-type{border-top-left-radius:0;border-top-right-radius:0}.alert{position:relative;padding:.75rem 1.25rem;margin-bottom:1rem;border:1px solid transparent;border-radius:.25rem}.alert-danger{color:#6d3937;background-color:#f6e2e1;border-color:#f2d6d5}.alert-danger hr{border-top-color:#ecc3c2}@-webkit-keyframes progress-bar-stripes{0%{background-position:1rem 0}to{background-position:0 0}}@keyframes progress-bar-stripes{0%{background-position:1rem 0}to{background-position:0 0}}.list-group{display:flex;flex-direction:column;padding-left:0;margin-bottom:0}.list-group-item{position:relative;display:block;padding:.75rem 1.25rem;margin-bottom:-1px;background-color:#fff;border:1px solid rgba(0,0,0,.125)}.list-group-item:first-child{border-top-left-radius:.25rem;border-top-right-radius:.25rem}.list-group-item:last-child{margin-bottom:0;border-bottom-right-radius:.25rem;border-bottom-left-radius:.25rem}.list-group-item.disabled,.list-group-item:disabled{color:#adb4c0;pointer-events:none;background-color:#fff}.list-group-item.active{z-index:2;color:#fff;background-color:#005ae1;border-color:#005ae1}.close{float:right;font-size:1.5rem;font-weight:700;line-height:1;color:#000;text-shadow:0 1px 0 #fff;opacity:.5}.close:hover{color:#000;text-decoration:none}.close:not(:disabled):not(.disabled):focus,.close:not(:disabled):not(.disabled):hover{opacity:.75}button.close{padding:0;background-color:transparent;border:0;-webkit-appearance:none;-moz-appearance:none;appearance:none}a.close.disabled{pointer-events:none}.toast{max-width:350px;overflow:hidden;font-size:.875rem;background-color:hsla(0,0%,100%,.85);background-clip:padding-box;border:1px solid rgba(0,0,0,.1);box-shadow:0 .25rem .75rem rgba(0,0,0,.1);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);opacity:0;border-radius:.25rem}.toast:not(:last-child){margin-bottom:.75rem}.toast.showing{opacity:1}.toast.show{display:block;opacity:1}.toast.hide{display:none}.toast-body{padding:.75rem}.modal-open{overflow:hidden}.modal-open .modal{overflow-x:hidden;overflow-y:auto}.modal{position:fixed;top:0;left:0;z-index:1050;display:none;width:100%;height:100%;overflow:hidden;outline:0}.modal-dialog{position:relative;width:auto;margin:.5rem;pointer-events:none}.modal.fade .modal-dialog{-webkit-transition:-webkit-transform .3s ease-out;transition:-webkit-transform .3s ease-out;transition:transform .3s ease-out;transition:transform .3s ease-out,-webkit-transform .3s ease-out;-webkit-transform:translateY(-50px);transform:translateY(-50px)}@media (prefers-reduced-motion:reduce){.modal.fade .modal-dialog{-webkit-transition:none;transition:none}}.modal.show .modal-dialog{-webkit-transform:none;transform:none}.modal-dialog-scrollable{display:flex;max-height:calc(100% - 1rem)}.modal-dialog-scrollable .modal-content{max-height:calc(100vh - 1rem);overflow:hidden}.modal-dialog-scrollable .modal-body{overflow-y:auto}.modal-content{position:relative;display:flex;flex-direction:column;width:100%;pointer-events:auto;background-color:#fff;background-clip:padding-box;border:1px solid rgba(0,0,0,.2);border-radius:.3rem;outline:0}.modal-backdrop{position:fixed;top:0;left:0;z-index:1040;width:100vw;height:100vh;background-color:#000}.modal-backdrop.fade{opacity:0}.modal-backdrop.show{opacity:.5}.modal-body{position:relative;flex:1 1 auto;padding:1rem}.modal-scrollbar-measure{position:absolute;top:-9999px;width:50px;height:50px;overflow:scroll}@media (min-width:576px){.modal-dialog{max-width:500px;margin:1.75rem auto}.modal-dialog-scrollable{max-height:calc(100% - 3.5rem)}.modal-dialog-scrollable .modal-content{max-height:calc(100vh - 3.5rem)}}.tooltip{position:absolute;z-index:1070;display:block;margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-style:normal;font-weight:400;line-height:1.5;text-align:left;text-align:start;text-decoration:none;text-shadow:none;text-transform:none;letter-spacing:normal;word-break:normal;word-spacing:normal;white-space:normal;line-break:auto;font-size:.875rem;word-wrap:break-word;opacity:0}.tooltip.show{opacity:.9}.tooltip .arrow{position:absolute;display:block;width:.8rem;height:.4rem}.tooltip .arrow:before{position:absolute;content:"";border-color:transparent;border-style:solid}.bs-tooltip-right{padding:0 .4rem}.bs-tooltip-right .arrow{left:0;width:.4rem;height:.8rem}.bs-tooltip-right .arrow:before{right:0;border-width:.4rem .4rem .4rem 0;border-right-color:#000}.bs-tooltip-bottom{padding:.4rem 0}.bs-tooltip-bottom .arrow{top:0}.bs-tooltip-bottom .arrow:before{bottom:0;border-width:0 .4rem .4rem;border-bottom-color:#000}.tooltip-inner{max-width:200px;padding:.25rem .5rem;color:#fff;text-align:center;background-color:#000;border-radius:.25rem}.popover{top:0;left:0;z-index:1060;max-width:276px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-style:normal;font-weight:400;line-height:1.5;text-align:left;text-align:start;text-decoration:none;text-shadow:none;text-transform:none;letter-spacing:normal;word-break:normal;word-spacing:normal;white-space:normal;line-break:auto;font-size:.875rem;word-wrap:break-word;background-color:#fff;background-clip:padding-box;border:1px solid rgba(0,0,0,.2);border-radius:.3rem}.popover,.popover .arrow{position:absolute;display:block}.popover .arrow{width:1rem;height:.5rem;margin:0 .3rem}.popover .arrow:after,.popover .arrow:before{position:absolute;display:block;content:"";border-color:transparent;border-style:solid}.popover-header{padding:.5rem .75rem;margin-bottom:0;font-size:1rem;background-color:#f7f7f7;border-bottom:1px solid #ebebeb;border-top-left-radius:calc(.3rem - 1px);border-top-right-radius:calc(.3rem - 1px)}.popover-header:empty{display:none}.popover-body{padding:.5rem .75rem;color:#252930}.carousel{position:relative}.carousel.pointer-event{touch-action:pan-y}.carousel-inner{position:relative;width:100%;overflow:hidden}.carousel-inner:after{display:block;clear:both;content:""}.carousel-item{position:relative;display:none;float:left;width:100%;margin-right:-100%;-webkit-backface-visibility:hidden;backface-visibility:hidden;-webkit-transition:-webkit-transform .6s ease-in-out;transition:-webkit-transform .6s ease-in-out;transition:transform .6s ease-in-out;transition:transform .6s ease-in-out,-webkit-transform .6s ease-in-out}@media (prefers-reduced-motion:reduce){.carousel-item{-webkit-transition:none;transition:none}}.carousel-item-next,.carousel-item-prev,.carousel-item.active{display:block}.active.carousel-item-right,.carousel-item-next:not(.carousel-item-left){-webkit-transform:translateX(100%);transform:translateX(100%)}.active.carousel-item-left,.carousel-item-prev:not(.carousel-item-right){-webkit-transform:translateX(-100%);transform:translateX(-100%)}.carousel-indicators{position:absolute;right:0;bottom:0;left:0;z-index:15;display:flex;justify-content:center;padding-left:0;margin-right:15%;margin-left:15%;list-style:none}.carousel-indicators li{box-sizing:content-box;flex:0 1 auto;width:30px;height:3px;margin-right:3px;margin-left:3px;text-indent:-999px;cursor:pointer;background-color:#fff;background-clip:padding-box;border-top:10px solid transparent;border-bottom:10px solid transparent;opacity:.5;-webkit-transition:opacity .6s ease;transition:opacity .6s ease}@media (prefers-reduced-motion:reduce){.carousel-indicators li{-webkit-transition:none;transition:none}}.carousel-indicators .active{opacity:1}.carousel-caption{position:absolute;right:15%;bottom:20px;left:15%;z-index:10;padding-top:20px;padding-bottom:20px;color:#fff;text-align:center}@-webkit-keyframes spinner-border{to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes spinner-border{to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@-webkit-keyframes spinner-grow{0%{-webkit-transform:scale(0);transform:scale(0)}50%{opacity:1}}@keyframes spinner-grow{0%{-webkit-transform:scale(0);transform:scale(0)}50%{opacity:1}}.bg-light{background-color:#fff!important}a.bg-light:focus,a.bg-light:hover,button.bg-light:focus,button.bg-light:hover{background-color:#e6e6e6!important}.border{border:1px solid #e7e9ed!important}.d-none{display:none!important}.d-flex{display:flex!important}@media (min-width:576px){.d-sm-inline{display:inline!important}}@media (min-width:992px){.d-lg-none{display:none!important}.d-lg-flex{display:flex!important}}@media (min-width:1200px){.d-xl-none{display:none!important}}.flex-column{flex-direction:column!important}.flex-grow-1{flex-grow:1!important}.justify-content-between{justify-content:space-between!important}.align-items-center{align-items:center!important}@media (min-width:992px){.flex-lg-grow-0{flex-grow:0!important}.justify-content-lg-end{justify-content:flex-end!important}.justify-content-lg-around{justify-content:space-around!important}}.position-static{position:static!important}.position-relative{position:relative!important}.fixed-top{top:0}.fixed-bottom,.fixed-top{position:fixed;right:0;left:0;z-index:1030}.fixed-bottom{bottom:0}@supports ((position:-webkit-sticky) or (position:sticky)){.sticky-top{position:-webkit-sticky;position:sticky;top:0;z-index:1020}}.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.sr-only-focusable:active,.sr-only-focusable:focus{position:static;width:auto;height:auto;overflow:visible;clip:auto;white-space:normal}.shadow-sm{box-shadow:0 .125rem .25rem rgba(0,0,0,.075)!important}.shadow{box-shadow:0 .5rem 1rem rgba(0,0,0,.15)!important}.m-1{margin:.25rem!important}.mb-1{margin-bottom:.25rem!important}.m-2{margin:.5rem!important}.mr-2{margin-right:.5rem!important}.ml-2{margin-left:.5rem!important}.m-3{margin:1rem!important}.mb-3{margin-bottom:1rem!important}.my-4{margin-top:1.5rem!important;margin-bottom:1.5rem!important}.py-2{padding-top:.5rem!important;padding-bottom:.5rem!important}.p-3{padding:1rem!important}.py-3{padding-top:1rem!important}.pb-3,.py-3{padding-bottom:1rem!important}.py-5{padding-top:3rem!important;padding-bottom:3rem!important}.visible{visibility:visible!important}@media print{*,:after,:before{text-shadow:none!important;box-shadow:none!important}a:not(.btn){text-decoration:underline}pre{white-space:pre-wrap!important;border:1px solid #cacfd6;page-break-inside:avoid}thead{display:table-header-group}img,tr{page-break-inside:avoid}h2,h3,p{orphans:3;widows:3}h2,h3{page-break-after:avoid}@page{size:a3}.container,body{min-width:992px!important}.navbar{display:none}.table{border-collapse:collapse!important}.table td,.table th{background-color:#fff!important}}/*!
* CoderDocs - Bootstrap 4 Documentation Template for Software Projects
* Version: 1.0
* Author: Xiaoying Riley
* Copyright: 3rd Wave Media Ltd.
* Website: http://themes.3rdwavemedia.com/
* Twitter: @3rdwave_themes
*/body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:#5d6778;padding-top:69px}body,h1,h2,h3,h4,h5,h6{font-family:Poppins,sans-serif}h1,h2,h3,h4,h5,h6{color:#252930;font-weight:600}code{background:#fff;color:#252930;padding:.25rem .375rem;border-radius:.25rem}.table td,.table th,.table thead th{border-color:#e7e9ed}.table-striped tbody tr:nth-of-type(odd){background-color:#f5f5f5}.popover{border-color:#f2f2f2}.btn{font-weight:600;padding:.6rem 1.25rem;-webkit-transition:all .4s ease-in-out;transition:all .4s ease-in-out;border:none}@media (prefers-reduced-motion:reduce){.btn{-webkit-transition:none;transition:none}}.btn:active,.btn:focus,.btn:hover{box-shadow:0 5px 15px 0 rgba(0,0,0,.15);box-shadow:0 12px 24px -6px rgba(0,0,0,.15)}.btn.focus,.btn:focus{box-shadow:none!important}.btn-primary{background:#005ae1}.btn-secondary{background:#5d6778;color:#fff}.form-control{padding-top:.875rem;padding-bottom:.875rem;height:2.75rem;border-color:#f2f2f2}.form-control:focus{box-shadow:0 5px 15px 0 rgba(0,0,0,.15);outline:none}.theme-icon-holder{display:inline-block;background:#fff;color:#005ae1;width:32px;height:32px;padding-top:4px;font-size:1rem;text-align:center;border-radius:50%}.site-logo .navbar-brand{font-size:2rem;font-weight:600;padding-top:0}.social-list li{font-size:1.125rem;background:#fff;width:32px;height:32px;text-align:center;border-radius:50%;padding-top:2px}.social-list li a{color:#1573ff}.social-list li a:hover{color:#005ae1}.social-list li:not(:last-child){margin-right:.875rem}.header{box-shadow:0 1px 4px 0 rgba(0,0,0,.1);background:#fff}.docs-overview .card{border-color:#e7e9ed;position:relative;height:100%}.docs-overview .card:hover{box-shadow:0 .5rem 1rem rgba(0,0,0,.15)!important;background:#fff}.docs-overview .card:hover .card-icon-holder{background:#fff}.docs-overview .card-icon-holder{width:60px;height:60px;font-size:1.5rem;padding-top:1rem;display:inline-block}.docs-overview .card-title-text{display:inline-block;position:relative;top:-.3rem}.docs-overview .card-link-mask{position:absolute;width:100%;height:100%;top:0;left:0}.search-form{position:relative;width:100%}.search-form .search-input{font-size:.875rem;border-radius:1.5rem;padding-right:3rem;padding-left:1.5rem}.search-form .search-input:focus{border-color:#e7e9ed}.docs-branding{min-height:69px}.docs-branding .top-search-box{width:300px}.docs-logo-wrapper{position:absolute;left:15px;top:.5rem}.docs-logo-wrapper .site-logo{display:inline-block}.docs-top-utilities{padding-top:4px}.docs-sidebar-toggler{display:inline-block;border:none;padding:0;font-size:inherit;position:relative;top:.3rem}.docs-sidebar-toggler:focus{outline:none}.docs-sidebar-toggler:hover span{-webkit-opacity:1;-moz-opacity:1;opacity:1}.docs-sidebar-toggler span{display:block;background-color:#252930;height:3px;width:24px;margin-top:5px;margin-bottom:5px;position:relative;left:0;-webkit-opacity:.8;-moz-opacity:.8;opacity:.8;border-radius:1px}.docs-wrapper{position:relative}.docs-sidebar{display:none;width:300px;position:fixed;z-index:10;top:69px;height:calc(100% - 69px);background:#fff;overflow-y:auto;scrollbar-color:rgba(0,0,0,.2) #f5f5f5;scrollbar-width:thin;-webkit-transition:-webkit-transform .35s ease-in-out;transition:-webkit-transform .35s ease-in-out;transition:transform .35s ease-in-out;transition:transform .35s ease-in-out,-webkit-transform .35s ease-in-out;box-shadow:1px 0 5px 0 rgba(0,0,0,.1)}.docs-sidebar::-webkit-scrollbar{width:6px;background-color:#f5f5f5}.docs-sidebar::-webkit-scrollbar-thumb{background-color:rgba(0,0,0,.125);border-radius:.5rem}@media (prefers-reduced-motion:reduce){.docs-sidebar{-webkit-transition:none;transition:none}}.docs-sidebar.sidebar-visible{-webkit-transform:translateX(0);transform:translateX(0);display:block}.docs-nav{overflow-y:auto;padding:1rem}.docs-nav .section-title{font-size:1rem;margin-bottom:1rem}.docs-nav .section-title a:hover{text-decoration:none}.docs-nav .section-items{font-size:.875rem;position:relative}.docs-nav .nav-item{margin-left:2.5rem}.docs-nav .nav-item.section-title{margin-left:0}.docs-nav .nav-item.section-title .nav-link{padding:0}.docs-nav .nav-item.section-title .nav-link:before{display:none}.docs-nav .nav-link{display:inline-block;position:relative;padding:.5rem 1rem;color:#5d6778}.docs-nav .nav-link .theme-icon-holder{font-size:.875rem;padding-top:.375rem}.docs-nav .nav-link.active{color:#005ae1}.docs-nav .nav-link.active:before{background-color:#005ae1}.docs-nav .nav-link.active .theme-icon-holder{color:#fff;background:#005ae1}.docs-nav .nav-link:before{background-color:#fff;content:" ";display:inline-block;height:inherit;left:0;margin-top:-.5rem;position:absolute;width:3px;height:100%;border-radius:1rem}.docs-content{margin-left:300px;padding-bottom:500px}.docs-article{padding:2rem;color:#5d6778}.docs-article strong{color:#252930}.docs-article h2{color:#464e5b}.docs-article h3{font-size:1.5rem;color:#464e5b}.docs-article h4{font-size:1.25rem;color:#464e5b}.docs-article h5{font-size:1rem;color:#464e5b}.docs-article h6{font-size:.875rem;color:#464e5b}.docs-article dl,.docs-article ol,.docs-article ul{padding-left:1.5rem}.docs-article li{padding-top:.5rem;padding-bottom:.5rem}.callout-block{padding:1.5rem;border-left:3px solid #5d6778;background:#f5f5f5;margin-top:1rem;margin-bottom:1rem}.callout-block code{background:#fff}@media (max-width:1199.98px){.docs-content{margin-left:0}}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji}.docs-wrapper.sidebar-visible{height:calc(100vh - 69px);overflow:hidden}.header{box-shadow:none;border-bottom:1px solid #e7e9ed}.search-form{width:75%;margin:0 auto}.search-form .search-input{border-radius:5px;background:#f5f6f8}.docs-sidebar{display:block;top:95px;box-shadow:none}.docs-branding{display:flex;flex-direction:column}.docs-branding>.container{flex-grow:1}.docs-sidebar-toggler{top:0;background:transparent}.docs-nav .nav-link:before,.theme-icon-holder{background:none}.docs-nav .nav-item{margin-left:0}.docs-nav .nav-item.section-title{margin:1rem 0}.docs-nav .nav-item.third-level{margin-left:2rem}.docs-logo-wrapper{width:300px;position:static;display:flex;justify-content:flex-start;align-items:center;padding:0 1rem}.docs-logo-wrapper .site-logo .navbar-brand{font-size:1rem;padding:0;margin:0;display:flex;flex-direction:column;align-items:center;justify-content:center}.docs-logo-wrapper .site-logo .navbar-brand span{text-transform:uppercase;font-size:.8rem;color:#919aaa}.docs-logo-wrapper .site-logo img{width:7rem;height:1.5rem}.docs-top-utilities{flex-grow:1}.docs-top-utilities .social-list{margin:0;width:25%}.docs-top-utilities .social-list li{margin:0;width:auto;height:auto}.docs-top-utilities .social-list .version-select{display:flex;justify-content:space-around;align-items:center;width:7rem;height:100%;line-height:1;color:#747f94}.docs-top-utilities .social-list .version-select label{font-size:.7rem;margin:0}.docs-top-utilities .social-list .version-select select{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;color:#747f94;background:none;padding-right:2rem}.docs-top-utilities .social-list .version-select [data-icon]{pointer-events:none;margin-left:-2rem}.top-search-box{flex-grow:1}.navbar{justify-content:flex-start}:not(pre)>code[class*=language-]{background:#f5f6f8;color:#5d6778;text-shadow:none}h1,h2,h3{font-weight:100;margin:2rem 0 1rem}.card-body h5{display:flex;align-items:center;justify-content:flex-start}.card-body h5 .card-icon-holder{flex-shrink:0}.github-edit{display:flex;align-items:center;justify-content:flex-start;width:100%;margin:2rem 0}.github-edit a{color:#747f94}@media (max-width:1200px){.docs-logo-wrapper{width:auto;padding:1rem}.docs-top-utilities{padding:0 1rem}.docs-sidebar{-webkit-transform:translateX(-150%);transform:translateX(-150%)}.docs-sidebar.sidebar-visible{-webkit-transform:translateX(0);transform:translateX(0)}}@media (max-width:640px){.docs-sidebar{flex-grow:1;width:auto;left:0;right:0}.search-form{width:auto}}.searchbox{display:inline-block;position:relative;width:200px;height:32px!important;white-space:nowrap;box-sizing:border-box;visibility:visible!important}.searchbox .algolia-autocomplete{display:block;width:100%;height:100%}.searchbox__wrapper{width:100%;height:100%;z-index:999;position:relative}.searchbox__input{display:inline-block;box-sizing:border-box;-webkit-transition:box-shadow .4s ease,background .4s ease;transition:box-shadow .4s ease,background .4s ease;border:0;border-radius:16px;box-shadow:inset 0 0 0 1px #ccc;background:#fff!important;padding:0 26px 0 32px;width:100%;height:100%;vertical-align:middle;white-space:normal;font-size:12px;-webkit-appearance:none;-moz-appearance:none;appearance:none}.searchbox__input::-webkit-search-cancel-button,.searchbox__input::-webkit-search-decoration,.searchbox__input::-webkit-search-results-button,.searchbox__input::-webkit-search-results-decoration{display:none}.searchbox__input:hover{box-shadow:inset 0 0 0 1px #b3b3b3}.searchbox__input:active,.searchbox__input:focus{outline:0;box-shadow:inset 0 0 0 1px #aaa;background:#fff}.searchbox__input::-webkit-input-placeholder{color:#aaa}.searchbox__input:-ms-input-placeholder{color:#aaa}.searchbox__input::-ms-input-placeholder{color:#aaa}.searchbox__input::placeholder{color:#aaa}.searchbox__submit{position:absolute;top:0;margin:0;border:0;border-radius:16px 0 0 16px;background-color:rgba(69,142,225,0);padding:0;width:32px;height:100%;vertical-align:middle;text-align:center;font-size:inherit;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;right:inherit;left:0}.searchbox__submit:before{display:inline-block;margin-right:-4px;height:100%;vertical-align:middle;content:""}.searchbox__submit:active,.searchbox__submit:hover{cursor:pointer}.searchbox__submit:focus{outline:0}.searchbox__submit svg{width:14px;height:14px;vertical-align:middle;fill:#6d7e96}.searchbox__reset{display:block;position:absolute;top:8px;right:8px;margin:0;border:0;background:none;cursor:pointer;padding:0;font-size:inherit;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;fill:rgba(0,0,0,.5)}.searchbox__reset.hide{display:none}.searchbox__reset:focus{outline:0}.searchbox__reset svg{display:block;margin:4px;width:8px;height:8px}.searchbox__input:valid~.searchbox__reset{display:block;-webkit-animation-name:sbx-reset-in;animation-name:sbx-reset-in;-webkit-animation-duration:.15s;animation-duration:.15s}@-webkit-keyframes sbx-reset-in{0%{-webkit-transform:translate3d(-20%,0,0);transform:translate3d(-20%,0,0);opacity:0}to{-webkit-transform:none;transform:none;opacity:1}}@keyframes sbx-reset-in{0%{-webkit-transform:translate3d(-20%,0,0);transform:translate3d(-20%,0,0);opacity:0}to{-webkit-transform:none;transform:none;opacity:1}}.algolia-autocomplete.algolia-autocomplete-right .ds-dropdown-menu{right:0!important;left:inherit!important}.algolia-autocomplete.algolia-autocomplete-right .ds-dropdown-menu:before{right:48px}.algolia-autocomplete.algolia-autocomplete-left .ds-dropdown-menu{left:0!important;right:inherit!important}.algolia-autocomplete.algolia-autocomplete-left .ds-dropdown-menu:before{left:48px}.algolia-autocomplete .ds-dropdown-menu{top:-6px;border-radius:4px;margin:6px 0 0;padding:0;text-align:left;height:auto;position:relative;background:transparent;border:none;z-index:999;max-width:600px;min-width:500px;box-shadow:0 1px 0 0 rgba(0,0,0,.2),0 2px 3px 0 rgba(0,0,0,.1)}.algolia-autocomplete .ds-dropdown-menu:before{display:block;position:absolute;content:"";width:14px;height:14px;background:#fff;z-index:1000;top:-7px;border-top:1px solid #d9d9d9;border-right:1px solid #d9d9d9;-webkit-transform:rotate(-45deg);transform:rotate(-45deg);border-radius:2px}.algolia-autocomplete .ds-dropdown-menu .ds-suggestions{position:relative;z-index:1000;margin-top:8px}.algolia-autocomplete .ds-dropdown-menu .ds-suggestions a:hover{text-decoration:none}.algolia-autocomplete .ds-dropdown-menu .ds-suggestion{cursor:pointer}.algolia-autocomplete .ds-dropdown-menu .ds-suggestion.ds-cursor .algolia-docsearch-suggestion.suggestion-layout-simple,.algolia-autocomplete .ds-dropdown-menu .ds-suggestion.ds-cursor .algolia-docsearch-suggestion:not(.suggestion-layout-simple) .algolia-docsearch-suggestion--content{background-color:rgba(69,142,225,.05)}.algolia-autocomplete .ds-dropdown-menu [class^=ds-dataset-]{position:relative;border:1px solid #d9d9d9;background:#fff;border-radius:4px;overflow:auto;padding:0 8px 8px}.algolia-autocomplete .ds-dropdown-menu *{box-sizing:border-box}.algolia-autocomplete .algolia-docsearch-suggestion{display:block;position:relative;padding:0 8px;background:#fff;color:#02060c;overflow:hidden}.algolia-autocomplete .algolia-docsearch-suggestion--highlight{color:#174d8c;background:rgba(143,187,237,.1);padding:.1em .05em}.algolia-autocomplete .algolia-docsearch-suggestion--category-header .algolia-docsearch-suggestion--category-header-lvl0 .algolia-docsearch-suggestion--highlight,.algolia-autocomplete .algolia-docsearch-suggestion--category-header .algolia-docsearch-suggestion--category-header-lvl1 .algolia-docsearch-suggestion--highlight,.algolia-autocomplete .algolia-docsearch-suggestion--text .algolia-docsearch-suggestion--highlight{padding:0 0 1px;background:inherit;box-shadow:inset 0 -2px 0 0 rgba(69,142,225,.8);color:inherit}.algolia-autocomplete .algolia-docsearch-suggestion--content{display:block;float:right;width:70%;position:relative;padding:5.33333px 0 5.33333px 10.66667px;cursor:pointer}.algolia-autocomplete .algolia-docsearch-suggestion--content:before{content:"";position:absolute;display:block;top:0;height:100%;width:1px;background:#ddd;left:-1px}.algolia-autocomplete .algolia-docsearch-suggestion--category-header{position:relative;border-bottom:1px solid #ddd;display:none;margin-top:8px;padding:4px 0;font-size:1em;color:#33363d}.algolia-autocomplete .algolia-docsearch-suggestion--wrapper{width:100%;float:left;padding:8px 0 0}.algolia-autocomplete .algolia-docsearch-suggestion--subcategory-column{float:left;width:30%;text-align:right;position:relative;padding:5.33333px 10.66667px;color:#a4a7ae;font-size:.9em;word-wrap:break-word}.algolia-autocomplete .algolia-docsearch-suggestion--subcategory-column:before{content:"";position:absolute;display:block;top:0;height:100%;width:1px;background:#ddd;right:0}.algolia-autocomplete .algolia-docsearch-suggestion--subcategory-inline{display:none}.algolia-autocomplete .algolia-docsearch-suggestion--title{margin-bottom:4px;color:#02060c;font-size:.9em;font-weight:700}.algolia-autocomplete .algolia-docsearch-suggestion--text{display:block;line-height:1.2em;font-size:.85em;color:#63676d}.algolia-autocomplete .algolia-docsearch-suggestion--no-results{width:100%;padding:8px 0;text-align:center;font-size:1.2em}.algolia-autocomplete .algolia-docsearch-suggestion--no-results:before{display:none}.algolia-autocomplete .algolia-docsearch-suggestion code{padding:1px 5px;font-size:90%;border:none;color:#222;background-color:#ebebeb;border-radius:3px;font-family:Menlo,Monaco,Consolas,Courier New,monospace}.algolia-autocomplete .algolia-docsearch-suggestion code .algolia-docsearch-suggestion--highlight{background:none}.algolia-autocomplete .algolia-docsearch-suggestion.algolia-docsearch-suggestion__main .algolia-docsearch-suggestion--category-header,.algolia-autocomplete .algolia-docsearch-suggestion.algolia-docsearch-suggestion__secondary{display:block}@media (min-width:768px){.algolia-autocomplete .algolia-docsearch-suggestion .algolia-docsearch-suggestion--subcategory-column{display:block}}@media (max-width:768px){.algolia-autocomplete .algolia-docsearch-suggestion .algolia-docsearch-suggestion--subcategory-column{display:inline-block;width:auto;float:left;padding:0;color:#02060c;font-size:.9em;font-weight:700;text-align:left;opacity:.5}.algolia-autocomplete .algolia-docsearch-suggestion .algolia-docsearch-suggestion--subcategory-column:before{display:none}.algolia-autocomplete .algolia-docsearch-suggestion .algolia-docsearch-suggestion--subcategory-column:after{content:"|"}.algolia-autocomplete .algolia-docsearch-suggestion .algolia-docsearch-suggestion--content{display:inline-block;width:auto;text-align:left;float:left;padding:0}.algolia-autocomplete .algolia-docsearch-suggestion .algolia-docsearch-suggestion--content:before{display:none}}.algolia-autocomplete .suggestion-layout-simple.algolia-docsearch-suggestion{border-bottom:1px solid #eee;padding:8px;margin:0}.algolia-autocomplete .suggestion-layout-simple .algolia-docsearch-suggestion--content{width:100%;padding:0}.algolia-autocomplete .suggestion-layout-simple .algolia-docsearch-suggestion--content:before{display:none}.algolia-autocomplete .suggestion-layout-simple .algolia-docsearch-suggestion--category-header{margin:0;padding:0;display:block;width:100%;border:none}.algolia-autocomplete .suggestion-layout-simple .algolia-docsearch-suggestion--category-header-lvl0,.algolia-autocomplete .suggestion-layout-simple .algolia-docsearch-suggestion--category-header-lvl1{opacity:.6;font-size:.85em}.algolia-autocomplete .suggestion-layout-simple .algolia-docsearch-suggestion--category-header-lvl1:before{background-image:url('data:image/svg+xml;utf8,<svg width="10" height="10" viewBox="0 0 20 38" xmlns="http://www.w3.org/2000/svg"><path d="M1.49 4.31l14 16.126.002-2.624-14 16.074-1.314 1.51 3.017 2.626 1.313-1.508 14-16.075 1.142-1.313-1.14-1.313-14-16.125L3.2.18.18 2.8l1.31 1.51z" fill-rule="evenodd" fill="%231D3657" /></svg>');content:"";width:10px;height:10px;display:inline-block}.algolia-autocomplete .suggestion-layout-simple .algolia-docsearch-suggestion--wrapper{width:100%;float:left;margin:0;padding:0}.algolia-autocomplete .suggestion-layout-simple .algolia-docsearch-suggestion--duplicate-content,.algolia-autocomplete .suggestion-layout-simple .algolia-docsearch-suggestion--subcategory-inline{display:none!important}.algolia-autocomplete .suggestion-layout-simple .algolia-docsearch-suggestion--title{margin:0;color:#458ee1;font-size:.9em;font-weight:400}.algolia-autocomplete .suggestion-layout-simple .algolia-docsearch-suggestion--title:before{content:"#";font-weight:700;color:#458ee1;display:inline-block}.algolia-autocomplete .suggestion-layout-simple .algolia-docsearch-suggestion--text{margin:4px 0 0;display:block;line-height:1.4em;padding:5.33333px 8px;background:#f8f8f8;font-size:.85em;opacity:.8}.algolia-autocomplete .suggestion-layout-simple .algolia-docsearch-suggestion--text .algolia-docsearch-suggestion--highlight{color:#3f4145;font-weight:700;box-shadow:none}.algolia-autocomplete .algolia-docsearch-footer{width:134px;height:20px;z-index:2000;margin-top:10.66667px;float:right;font-size:0;line-height:0}.algolia-autocomplete .algolia-docsearch-footer--logo{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='168' height='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M78.988.938h16.594a2.968 2.968 0 0 1 2.966 2.966V20.5a2.967 2.967 0 0 1-2.966 2.964H78.988a2.967 2.967 0 0 1-2.966-2.964V3.897A2.961 2.961 0 0 1 78.988.938zm41.937 17.866c-4.386.02-4.386-3.54-4.386-4.106l-.007-13.336 2.675-.424v13.254c0 .322 0 2.358 1.718 2.364v2.248zm-10.846-2.18c.821 0 1.43-.047 1.855-.129v-2.719a6.334 6.334 0 0 0-1.574-.199 5.7 5.7 0 0 0-.897.069 2.699 2.699 0 0 0-.814.24c-.24.116-.439.28-.582.491-.15.212-.219.335-.219.656 0 .628.219.991.616 1.23s.938.362 1.615.362zm-.233-9.7c.883 0 1.629.109 2.231.328.602.218 1.088.525 1.444.915.363.396.609.922.76 1.483.157.56.232 1.175.232 1.85v6.874a32.5 32.5 0 0 1-1.868.314c-.834.123-1.772.185-2.813.185-.69 0-1.327-.069-1.895-.198a4.001 4.001 0 0 1-1.471-.636 3.085 3.085 0 0 1-.951-1.134c-.226-.465-.343-1.12-.343-1.803 0-.656.13-1.073.384-1.525a3.24 3.24 0 0 1 1.047-1.106c.445-.287.95-.492 1.532-.615a8.8 8.8 0 0 1 1.82-.185 8.404 8.404 0 0 1 1.972.24v-.438c0-.307-.035-.6-.11-.874a1.88 1.88 0 0 0-.384-.73 1.784 1.784 0 0 0-.724-.493 3.164 3.164 0 0 0-1.143-.205c-.616 0-1.177.075-1.69.164a7.735 7.735 0 0 0-1.26.307l-.321-2.192c.335-.117.834-.233 1.478-.349a10.98 10.98 0 0 1 2.073-.178zm52.842 9.626c.822 0 1.43-.048 1.854-.13V13.7a6.347 6.347 0 0 0-1.574-.199c-.294 0-.595.021-.896.069a2.7 2.7 0 0 0-.814.24 1.46 1.46 0 0 0-.582.491c-.15.212-.218.335-.218.656 0 .628.218.991.615 1.23.404.245.938.362 1.615.362zm-.226-9.694c.883 0 1.629.108 2.231.327.602.219 1.088.526 1.444.915.355.39.609.923.759 1.483a6.8 6.8 0 0 1 .233 1.852v6.873c-.41.088-1.034.19-1.868.314-.834.123-1.772.184-2.813.184-.69 0-1.327-.068-1.895-.198a4.001 4.001 0 0 1-1.471-.635 3.085 3.085 0 0 1-.951-1.134c-.226-.465-.343-1.12-.343-1.804 0-.656.13-1.073.384-1.524.26-.45.608-.82 1.047-1.107.445-.286.95-.491 1.532-.614a8.803 8.803 0 0 1 2.751-.13c.329.034.671.096 1.04.185v-.437a3.3 3.3 0 0 0-.109-.875 1.873 1.873 0 0 0-.384-.731 1.784 1.784 0 0 0-.724-.492 3.165 3.165 0 0 0-1.143-.205c-.616 0-1.177.075-1.69.164a7.75 7.75 0 0 0-1.26.307l-.321-2.193c.335-.116.834-.232 1.478-.348a11.633 11.633 0 0 1 2.073-.177zm-8.034-1.271a1.626 1.626 0 0 1-1.628-1.62c0-.895.725-1.62 1.628-1.62.904 0 1.63.725 1.63 1.62 0 .895-.733 1.62-1.63 1.62zm1.348 13.22h-2.689V7.27l2.69-.423v11.956zm-4.714 0c-4.386.02-4.386-3.54-4.386-4.107l-.008-13.336 2.676-.424v13.254c0 .322 0 2.358 1.718 2.364v2.248zm-8.698-5.903c0-1.156-.253-2.119-.746-2.788-.493-.677-1.183-1.01-2.067-1.01-.882 0-1.574.333-2.065 1.01-.493.676-.733 1.632-.733 2.788 0 1.168.246 1.953.74 2.63.492.683 1.183 1.018 2.066 1.018.882 0 1.574-.342 2.067-1.019.492-.683.738-1.46.738-2.63zm2.737-.007c0 .902-.13 1.584-.397 2.33a5.52 5.52 0 0 1-1.128 1.906 4.986 4.986 0 0 1-1.752 1.223c-.685.286-1.739.45-2.265.45-.528-.006-1.574-.157-2.252-.45a5.096 5.096 0 0 1-1.744-1.223c-.487-.527-.863-1.162-1.137-1.906a6.345 6.345 0 0 1-.41-2.33c0-.902.123-1.77.397-2.508a5.554 5.554 0 0 1 1.15-1.892 5.133 5.133 0 0 1 1.75-1.216c.679-.287 1.425-.423 2.232-.423.808 0 1.553.142 2.237.423a4.88 4.88 0 0 1 1.753 1.216 5.644 5.644 0 0 1 1.135 1.892c.287.738.431 1.606.431 2.508zm-20.138 0c0 1.12.246 2.363.738 2.882.493.52 1.13.78 1.91.78.424 0 .828-.062 1.204-.178.377-.116.677-.253.917-.417V9.33a10.476 10.476 0 0 0-1.766-.226c-.971-.028-1.71.37-2.23 1.004-.513.636-.773 1.75-.773 2.788zm7.438 5.274c0 1.824-.466 3.156-1.404 4.004-.936.846-2.367 1.27-4.296 1.27-.705 0-2.17-.137-3.34-.396l.431-2.118c.98.205 2.272.26 2.95.26 1.074 0 1.84-.219 2.299-.656.459-.437.684-1.086.684-1.948v-.437a8.07 8.07 0 0 1-1.047.397c-.43.13-.93.198-1.492.198-.739 0-1.41-.116-2.018-.349a4.206 4.206 0 0 1-1.567-1.025c-.431-.45-.774-1.017-1.013-1.694-.24-.677-.363-1.885-.363-2.773 0-.834.13-1.88.384-2.577.26-.696.629-1.298 1.129-1.796.493-.498 1.095-.881 1.8-1.162a6.605 6.605 0 0 1 2.428-.457c.87 0 1.67.109 2.45.24.78.129 1.444.265 1.985.415V18.17z' fill='%235468FF'/%3E%3Cpath d='M6.972 6.677v1.627c-.712-.446-1.52-.67-2.425-.67-.585 0-1.045.13-1.38.391a1.24 1.24 0 0 0-.502 1.03c0 .425.164.765.494 1.02.33.256.835.532 1.516.83.447.192.795.356 1.045.495.25.138.537.332.862.582.324.25.563.548.718.894.154.345.23.741.23 1.188 0 .947-.334 1.691-1.004 2.234-.67.542-1.537.814-2.601.814-1.18 0-2.16-.229-2.936-.686v-1.708c.84.628 1.814.942 2.92.942.585 0 1.048-.136 1.388-.407.34-.271.51-.646.51-1.125 0-.287-.1-.55-.302-.79-.203-.24-.42-.42-.655-.542-.234-.123-.585-.29-1.053-.503a61.27 61.27 0 0 1-.582-.271 13.67 13.67 0 0 1-.55-.287 4.275 4.275 0 0 1-.567-.351 6.92 6.92 0 0 1-.455-.4c-.18-.17-.31-.34-.39-.51-.08-.17-.155-.37-.224-.598a2.553 2.553 0 0 1-.104-.742c0-.915.333-1.638.998-2.17.664-.532 1.523-.798 2.576-.798.968 0 1.793.17 2.473.51zm7.468 5.696v-.287c-.022-.607-.187-1.088-.495-1.444-.309-.357-.75-.535-1.324-.535-.532 0-.99.194-1.373.583-.382.388-.622.949-.717 1.683h3.909zm1.005 2.792v1.404c-.596.34-1.383.51-2.362.51-1.255 0-2.255-.377-3-1.132-.744-.755-1.116-1.744-1.116-2.968 0-1.297.34-2.316 1.021-3.055.68-.74 1.548-1.11 2.6-1.11 1.033 0 1.852.323 2.458.966.606.644.91 1.572.91 2.784 0 .33-.033.676-.096 1.038h-5.314c.107.702.405 1.239.894 1.611.49.372 1.106.558 1.85.558.862 0 1.58-.202 2.155-.606zm6.605-1.77h-1.212c-.596 0-1.045.116-1.349.35-.303.234-.454.532-.454.894 0 .372.117.664.35.877.235.213.575.32 1.022.32.51 0 .912-.142 1.204-.424.293-.281.44-.651.44-1.108v-.91zm-4.068-2.554V9.325c.627-.361 1.457-.542 2.489-.542 2.116 0 3.175 1.026 3.175 3.08V17h-1.548v-.957c-.415.68-1.143 1.02-2.186 1.02-.766 0-1.38-.22-1.843-.661-.462-.442-.694-1.003-.694-1.684 0-.776.293-1.38.878-1.81.585-.431 1.404-.647 2.457-.647h1.34V11.8c0-.554-.133-.971-.399-1.253-.266-.282-.707-.423-1.324-.423a4.07 4.07 0 0 0-2.345.718zm9.333-1.93v1.42c.394-1 1.101-1.5 2.123-1.5.148 0 .313.016.494.048v1.531a1.885 1.885 0 0 0-.75-.143c-.542 0-.989.24-1.34.718-.351.479-.527 1.048-.527 1.707V17h-1.563V8.91h1.563zm5.01 4.084c.022.82.272 1.492.75 2.019.479.526 1.15.79 2.01.79.639 0 1.235-.176 1.788-.527v1.404c-.521.319-1.186.479-1.995.479-1.265 0-2.276-.4-3.031-1.197-.755-.798-1.133-1.792-1.133-2.984 0-1.16.38-2.151 1.14-2.975.761-.825 1.79-1.237 3.088-1.237.702 0 1.346.149 1.93.447v1.436a3.242 3.242 0 0 0-1.77-.495c-.84 0-1.513.266-2.019.798-.505.532-.758 1.213-.758 2.042zM40.24 5.72v4.579c.458-1 1.293-1.5 2.505-1.5.787 0 1.42.245 1.899.734.479.49.718 1.17.718 2.042V17h-1.564v-5.106c0-.553-.14-.98-.422-1.284-.282-.303-.652-.455-1.11-.455-.531 0-1.002.202-1.411.606-.41.405-.615 1.022-.615 1.851V17h-1.563V5.72h1.563zm14.966 10.02c.596 0 1.096-.253 1.5-.758.404-.506.606-1.157.606-1.955 0-.915-.202-1.62-.606-2.114-.404-.495-.92-.742-1.548-.742-.553 0-1.05.224-1.491.67-.442.447-.662 1.133-.662 2.058 0 .958.212 1.67.638 2.138.425.469.946.703 1.563.703zM53.004 5.72v4.42c.574-.894 1.388-1.341 2.44-1.341 1.022 0 1.857.383 2.506 1.149.649.766.973 1.781.973 3.047 0 1.138-.309 2.109-.925 2.912-.617.803-1.463 1.205-2.537 1.205-1.075 0-1.894-.447-2.457-1.34V17h-1.58V5.72h1.58zm9.908 11.104l-3.223-7.913h1.739l1.005 2.632 1.26 3.415c.096-.32.48-1.458 1.15-3.415l.909-2.632h1.66l-2.92 7.866c-.777 2.074-1.963 3.11-3.559 3.11a2.92 2.92 0 0 1-.734-.079v-1.34c.17.042.351.064.543.064 1.032 0 1.755-.57 2.17-1.708z' fill='%235D6494'/%3E%3Cpath d='M89.632 5.967v-.772a.978.978 0 0 0-.978-.977h-2.28a.978.978 0 0 0-.978.977v.793c0 .088.082.15.171.13a7.127 7.127 0 0 1 1.984-.28c.65 0 1.295.088 1.917.259.082.02.164-.04.164-.13m-6.248 1.01l-.39-.389a.977.977 0 0 0-1.382 0l-.465.465a.973.973 0 0 0 0 1.38l.383.383c.062.061.15.047.205-.014.226-.307.472-.601.746-.874.281-.28.568-.526.883-.751.068-.042.075-.137.02-.2m4.16 2.453v3.341c0 .096.104.165.192.117l2.97-1.537c.068-.034.089-.117.055-.184a3.695 3.695 0 0 0-3.08-1.866c-.068 0-.136.054-.136.13m0 8.048a4.489 4.489 0 0 1-4.49-4.482 4.488 4.488 0 0 1 4.49-4.482 4.488 4.488 0 0 1 4.489 4.482 4.484 4.484 0 0 1-4.49 4.482m0-10.85a6.363 6.363 0 1 0 0 12.729 6.37 6.37 0 0 0 6.372-6.368 6.358 6.358 0 0 0-6.371-6.36' fill='%23FFF'/%3E%3C/g%3E%3C/svg%3E");background-repeat:no-repeat;background-position:50%;background-size:100%;overflow:hidden;text-indent:-9000px;padding:0!important;width:100%;height:100%;display:block}</style><meta name="generator" content="Gatsby 2.17.10"/><title data-react-helmet="true">SilverStripe Documentation | SilverStripe Documentation</title><meta data-react-helmet="true" name="description" content="Developer documentation for the SilverStripe CMS and framework."/><meta data-react-helmet="true" property="og:title" content="SilverStripe Documentation"/><meta data-react-helmet="true" property="og:description" content="Developer documentation for the SilverStripe CMS and framework."/><meta data-react-helmet="true" property="og:type" content="website"/><meta data-react-helmet="true" name="twitter:card" content="summary"/><meta data-react-helmet="true" name="twitter:creator" content="The Silverstripe Community"/><meta data-react-helmet="true" name="twitter:title" content="SilverStripe Documentation"/><meta data-react-helmet="true" name="twitter:description" content="Developer documentation for the SilverStripe CMS and framework."/><link as="script" rel="preload" href="/component---src-templates-docs-template-tsx-8bf1a3f0cf8cb2dc5dce.js"/><link as="script" rel="preload" href="/commons-6c4dd063e3c1930fefab.js"/><link as="script" rel="preload" href="/app-078ef20c4f6226a30cfe.js"/><link as="script" rel="preload" href="/styles-d8a44786e8bcf583a943.js"/><link as="script" rel="preload" href="/webpack-runtime-7ee5f2360478ea7b1bd9.js"/><link as="fetch" rel="preload" href="/page-data/en/4/page-data.json" crossorigin="anonymous"/></head><body class="docs-page"><noscript id="gatsby-noscript">This app works best with JavaScript enabled.</noscript><div id="___gatsby"><div style="outline:none" tabindex="-1" role="group" id="gatsby-focus-wrapper"><header class="header fixed-top"><div class="branding docs-branding"><div class="container position-relative py-2 d-flex"><div class="docs-logo-wrapper"><div class="site-logo"><a aria-current="page" class="navbar-brand" title="Go to the home page" href="/en/4/"><img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNDQ5LjM4IDI4OS4xNyI+PHRpdGxlPlJHQiAtIFNpbHZlcnN0cmlwZSBsb2dvPC90aXRsZT48ZyBpZD0iTmV3X2tlcm5pbmciIGRhdGEtbmFtZT0iTmV3IGtlcm5pbmciPjxwYXRoIGQ9Ik0xMTQuMzIsMTg5LjY1aDBBNDguNyw0OC43LDAsMCwwLDEyNywxMjJMODYuOCwxNDkuNDZsMCwwQTI0LjM1LDI0LjM1LDAsMCwxLDU5LjMxLDEwOS4zaDBMOTYsODQuMTgsMTE5LjU4LDY4QTQ4LjY3LDQ4LjY3LDAsMCwwLDEzMi4yNS4zM0w5Mi4wNywyNy44MywzMS43OSw2OS4xMWgwYTczLDczLDAsMSwwLDgyLjUzLDEyMC41NFoiIGZpbGw9IiMwMDViZTAiLz48cGF0aCBkPSJNMTY3LjE5LDk0LjQ2aDBhNDguNzEsNDguNzEsMCwwLDAtMTIuNjYsNjcuNjlsNDAuMTgtMjcuNWgwYTI0LjM1LDI0LjM1LDAsMCwxLDI3LjUxLDQwLjE4aDBsLTM2LjY4LDI1LjEyTDE2MS45NCwyMTYuMWE0OC42OCw0OC42OCwwLDAsMC0xMi42OCw2Ny42OWw0MC4xOS0yNy41MUwyNDkuNzMsMjE1aDBBNzMsNzMsMCwxLDAsMTY3LjE5LDk0LjQ2WiIgZmlsbD0iIzAwNWJlMCIvPjxwYXRoIGQ9Ik0xMzYyLjksMTY4LjY0YzQsMTUsMTYuMTIsMjEuMjksMzEuMTMsMjEuMjksMTEsMCwyMC40NS02LjQ1LDI1LjMtMTNsMjEuMzIsMTUuMzZjLTEwLjM3LDE1LjQxLTI1Ljg3LDI0LjE3LTQ3LjA2LDI0LjE3LTM3LjA5LDAtNjAuNDktMjYuMDUtNjAuNDktNTkuODFzMjMuNjItNTkuOCw1OC4yOC01OS44YzMyLjY3LDAsNTUuODUsMjYuNSw1NS44NSw1OS44YTY5LjQzLDY5LjQzLDAsMCwxLTEuMSwxMlptLS40NC0yMi42Nmg1Ni4zYy0zLjU0LTE2LjMxLTE1LjQ2LTIyLjg4LTI3LjM4LTIyLjg4QzEzNzYuMTUsMTIzLjEsMTM2NS43NywxMzEuNDksMTM2Mi40NiwxNDZaIiBmaWxsPSIjMDUxYzJjIi8+PHBhdGggZD0iTTcxNS43NSwxNjguNjRjNCwxNSwxNi4xMSwyMS4yOSwzMS4xMiwyMS4yOSwxMSwwLDIwLjQ1LTYuNDUsMjUuMzEtMTNsMjEuMzIsMTUuMzZjLTEwLjM4LDE1LjQxLTI1Ljg4LDI0LjE3LTQ3LjA3LDI0LjE3LTM3LjA5LDAtNjAuNDktMjYuMDUtNjAuNDktNTkuODFzMjMuNjItNTkuOCw1OC4yOC01OS44YzMyLjY4LDAsNTUuODYsMjYuNSw1NS44Niw1OS44YTY4LjQ0LDY4LjQ0LDAsMCwxLTEuMTEsMTJaTTcxNS4zLDE0Nmg1Ni4zYy0zLjUzLTE2LjMxLTE1LjQ1LTIyLjg4LTI3LjM4LTIyLjg4QzcyOSwxMjMuMSw3MTguNjIsMTMxLjQ5LDcxNS4zLDE0NloiIGZpbGw9IiMwNTFjMmMiLz48cGF0aCBkPSJNNDkxLjcxLDg2LjRhMTguMDcsMTguMDcsMCwwLDEtMTcuODgtMTcuODljMC05Ljc0LDguMTUtMTguMTIsMTcuODgtMTguMTJhMTguMzIsMTguMzIsMCwwLDEsMTguMTIsMTguMTJBMTguMTIsMTguMTIsMCwwLDEsNDkxLjcxLDg2LjRaIiBmaWxsPSIjMDUxYzJjIi8+PHJlY3QgeD0iNDc3LjIyIiB5PSIxMDAiIHdpZHRoPSIyOS4yMSIgaGVpZ2h0PSIxMTMuMjciIGZpbGw9IiMwNTFjMmMiLz48cmVjdCB4PSI1MjguNjkiIHk9IjQyLjg1IiB3aWR0aD0iMjkuMjEiIGhlaWdodD0iMTcwLjQyIiBmaWxsPSIjMDUxYzJjIi8+PHBvbHlnb24gcG9pbnRzPSI2NTUuMDQgMTAwIDY4Ny4yIDEwMCA2NDUuNyAyMTMuMjcgNjEyLjQxIDIxMy4yNyA1NzAuOSAxMDAgNjAzLjA2IDEwMCA2MjguOTQgMTc5LjI4IDY1NS4wNCAxMDAiIGZpbGw9IiMwNTFjMmMiLz48cGF0aCBkPSJNODQzLjc2LDExOS40OGM1Ljg4LTE1LjQxLDIwLjE1LTIxLjc1LDM0LjQyLTIxLjc1djMyLjYyYy0xNS4xOC0xLjgxLTM0LjQyLDUtMzQuNDIsMjguNzd2NTQuMTVIODE0LjU1VjEwMGgyOS4yMVoiIGZpbGw9IiMwNTFjMmMiLz48cGF0aCBkPSJNOTE5LDEzMi4xN2MwLTYuMTIsNS44OS05LjI5LDEzLjEzLTkuMjlhMjUuMSwyNS4xLDAsMCwxLDIwLjE0LDExLjMybDIxLjkzLTE0LjkyYy05LTE0LjYyLTI0LjM2LTIyLjQ1LTQyLjA3LTIyLjQ1LTIzLjMyLDAtNDMsMTIuOTEtNDMsMzYsMCwzOS44OCw1OC40MiwzMC44MSw1OC40Miw0Ny4zNSwwLDYuNTctNi4zNCw5Ljc0LTE1LjYzLDkuNzRhMjUuNDYsMjUuNDYsMCwwLDEtMjMuNjQtMTUuNjNsLTIzLjQ5LDE2YzguMjksMTYuOTEsMjQuODUsMjYuMTUsNDcuMTMsMjYuMTUsMjQuMjMsMCw0NS41Mi0xMS43OCw0NS41Mi0zNi4yNUM5NzcuMzksMTM4LjUxLDkxOSwxNDguOTMsOTE5LDEzMi4xN1oiIGZpbGw9IiMwNTFjMmMiLz48cGF0aCBkPSJNMTA1NiwxMjguMDlIMTAzMC40djQ3LjEyYzAsMTIuMjMsOC44MywxMi40NiwyNS41OSwxMS41NXYyNi41MWMtNDEsNC41My01NC44LTcuNDgtNTQuOC0zOC4wNlYxMjguMDloLTE5LjdWMTAwaDE5LjdWNzcuMTJsMjkuMjEtMjAuMThWMTAwSDEwNTZaIiBmaWxsPSIjMDUxYzJjIi8+PHBhdGggZD0iTTExMDAuNDYsMTE5LjQ4YzUuODktMTUuNDEsMjAuMTUtMjEuNzUsMzQuNDItMjEuNzV2MzIuNjJjLTE1LjE3LTEuODEtMzQuNDIsNS0zNC40MiwyOC43N3Y1NC4xNWgtMjkuMjFWMTAwaDI5LjIxWiIgZmlsbD0iIzA1MWMyYyIvPjxwYXRoIGQ9Ik0xMTY1LjMyLDg2LjRhMTguMDcsMTguMDcsMCwwLDEtMTcuODktMTcuODljMC05Ljc0LDguMTUtMTguMTIsMTcuODktMTguMTJhMTguMzIsMTguMzIsMCwwLDEsMTguMTEsMTguMTJBMTguMTIsMTguMTIsMCwwLDEsMTE2NS4zMiw4Ni40WiIgZmlsbD0iIzA1MWMyYyIvPjxyZWN0IHg9IjExNTAuODMiIHk9IjEwMCIgd2lkdGg9IjI5LjIxIiBoZWlnaHQ9IjExMy4yNyIgZmlsbD0iIzA1MWMyYyIvPjxwYXRoIGQ9Ik0xMjY2LjY3LDk2LjgzYzMwLjM0LDAsNTUuMjUsMjYuMDUsNTUuMjUsNTkuOHMtMjQuOTEsNTkuODEtNTUuMjUsNTkuODFjLTE2LjUzLDAtMjguNTMtNi4xMi0zNi42OS0xNi41NHY1NS41NGgtMjkuMjFWMTAwSDEyMzB2MTMuMzZDMTIzOC4xNCwxMDIuOTQsMTI1MC4xNCw5Ni44MywxMjY2LjY3LDk2LjgzWm0tNS40NCw5MS43NGMxOC4xMiwwLDMxLjQ4LTEyLjkxLDMxLjQ4LTMxLjk0cy0xMy4zNi0zMS45NC0zMS40OC0zMS45NGMtMTcuODksMC0zMS4yNSwxMi45MS0zMS4yNSwzMS45NFMxMjQzLjM0LDE4OC41NywxMjYxLjIzLDE4OC41N1oiIGZpbGw9IiMwNTFjMmMiLz48cGF0aCBkPSJNNDA5LjE0LDExOS4xMmMtMjQuNDUtNy4zOS0zMC42OC0xMi42OS0zMC42OC0yMi42MSwwLTkuMjMsNy44NS0xNi4xNSwyMS4yMi0xNi4xNWEzOC43OSwzOC43OSwwLDAsMSwzNCwxOS43bDI0LjUxLTE3LjE0QzQ0Nyw2MS42OCw0MjUuMzIsNDkuNDQsMzk5LjY4LDQ5LjQ0Yy0yNy42NywwLTUzLDE3LjUzLTUzLDQ4LDAsMzAuNjksMjQsNDEuMDcsNDguNjYsNDguMjIsMjQsNi45MiwzNC44MywxMS41NCwzNC44MywyMy41NCwwLDktNi42OSwxNy4wNy0yNS44MywxNy4wN3MtMzIuMy0xMS45MS0zOC40NC0yNi4wOWwtMjUuMTMsMTcuNTdjOS4yMywyMi45NSwzMC42LDM5LjY3LDYyLjY0LDM5LjY3LDM0LjM3LDAsNTguNTgtMTguNDYsNTguNTgtNDguNjlDNDYyLDEzNS43Myw0MzQuNzQsMTI3LjE5LDQwOS4xNCwxMTkuMTJaIiBmaWxsPSIjMDUxYzJjIi8+PC9nPjwvc3ZnPg==" alt="Silverstripe CMS documentation"/><span>Documentation</span></a></div></div><div class="docs-top-utilities d-flex justify-content-between justify-content-lg-end align-items-center"><div class="top-search-box d-none d-lg-flex"><form class="search-form"><input type="search" id="header-search" placeholder="Search the docs..." class="form-control search-input"/></form></div><ul class="social-list list-inline d-flex flex-grow-1 flex-lg-grow-0 justify-content-between justify-content-lg-around align-items-center"><li class="list-inline-item version-select"><label for="version-select">Version:</label><select id="version-select"><option value="4">4.x</option><option value="3">3.x</option></select><i class="fas fa-chevron-down"></i></li><li class="d-none d-sm-inline list-inline-item"><a title="Go to the Github repository" href="https://github.com/silverstripe/silverstripe-framework"><i class="fab fa-github fa-fw"></i></a></li></ul></div><button id="docs-sidebar-toggler" class="docs-sidebar-toggler docs-sidebar-visible mr-2 d-xl-none" type="button"><span></span><span></span><span></span></button></div></div></header><div class="docs-wrapper container "><div id="docs-sidebar" class="docs-sidebar "><div class="top-search-box d-lg-none p-3"><form class="search-form"><input type="search" id="sidebar-search" placeholder="Search the docs..." class="form-control search-input"/></form></div><nav id="docs-nav" class="docs-nav navbar"><ul class="section-items list-unstyled nav flex-column pb-3"><li class="nav-item section-title"><a class="nav-link" href="/en/4/getting_started/">Getting Started</a></li><li class="nav-item"><a class="nav-link" href="/en/4/getting_started/server_requirements/">Server Requirements</a></li><li class="nav-item"><a class="nav-link" href="/en/4/getting_started/composer/">Composer</a></li><li class="nav-item"><a class="nav-link" href="/en/4/getting_started/environment_management/">Environment Management</a></li><li class="nav-item"><a class="nav-link" href="/en/4/getting_started/directory_structure/">Directory Structure</a></li><li class="nav-item section-title"><a class="nav-link" href="/en/4/lessons/">Lessons</a></li><li class="nav-item section-title"><a class="nav-link" href="/en/4/developer_guides/">Developer Guides</a></li><li class="nav-item"><a class="nav-link" href="/en/4/developer_guides/model/">Model and Databases</a></li><li class="nav-item"><a class="nav-link" href="/en/4/developer_guides/templates/">Templates and Views</a></li><li class="nav-item"><a class="nav-link" href="/en/4/developer_guides/controllers/">Controllers</a></li><li class="nav-item"><a class="nav-link" href="/en/4/developer_guides/forms/">Forms</a></li><li class="nav-item"><a class="nav-link" href="/en/4/developer_guides/configuration/">Configuration</a></li><li class="nav-item"><a class="nav-link" href="/en/4/developer_guides/extending/">Extending SilverStripe</a></li><li class="nav-item"><a class="nav-link" href="/en/4/developer_guides/testing/">Testing</a></li><li class="nav-item"><a class="nav-link" href="/en/4/developer_guides/debugging/">Debugging</a></li><li class="nav-item"><a class="nav-link" href="/en/4/developer_guides/performance/">Performance</a></li><li class="nav-item"><a class="nav-link" href="/en/4/developer_guides/security/">Security</a></li><li class="nav-item"><a class="nav-link" href="/en/4/developer_guides/email/">Email</a></li><li class="nav-item"><a class="nav-link" href="/en/4/developer_guides/integration/">Integration and Web Services</a></li><li class="nav-item"><a class="nav-link" href="/en/4/developer_guides/search/">Search</a></li><li class="nav-item"><a class="nav-link" href="/en/4/developer_guides/i18n/">i18n</a></li><li class="nav-item"><a class="nav-link" href="/en/4/developer_guides/files/">Files</a></li><li class="nav-item"><a class="nav-link" href="/en/4/developer_guides/customising_the_admin_interface/">Customising the Admin Interface</a></li><li class="nav-item"><a class="nav-link" href="/en/4/developer_guides/execution_pipeline/">Execution pipeline</a></li><li class="nav-item"><a class="nav-link" href="/en/4/developer_guides/cli/">Command Line Interface</a></li><li class="nav-item"><a class="nav-link" href="/en/4/developer_guides/cookies_and_sessions/">Cookies and Sessions</a></li><li class="nav-item section-title"><a class="nav-link" href="/en/4/upgrading/">Upgrading</a></li><li class="nav-item"><a class="nav-link" href="/en/4/upgrading/upgrading_project/">Upgrading to SilverStripe 4</a></li><li class="nav-item"><a class="nav-link" href="/en/4/upgrading/upgrading_module/">Upgrading a module</a></li><li class="nav-item section-title"><a class="nav-link" href="/en/4/changelogs/">Changelogs</a></li><li class="nav-item section-title"><a class="nav-link" href="/en/4/contributing/">Contributing</a></li><li class="nav-item"><a class="nav-link" href="/en/4/contributing/issues_and_bugs/">Bug Reports</a></li><li class="nav-item"><a class="nav-link" href="/en/4/contributing/code/">Contributing Code</a></li><li class="nav-item"><a class="nav-link" href="/en/4/contributing/build_tooling/">Build tooling</a></li><li class="nav-item"><a class="nav-link" href="/en/4/contributing/request_for_comment/">Request for comment</a></li><li class="nav-item"><a class="nav-link" href="/en/4/contributing/release_process/">Release process</a></li><li class="nav-item"><a class="nav-link" href="/en/4/contributing/making_a_silverstripe_core_release/">Making a SilverStripe core release</a></li><li class="nav-item"><a class="nav-link" href="/en/4/contributing/documentation/">Documentation</a></li><li class="nav-item"><a class="nav-link" href="/en/4/contributing/translations/">Translations</a></li><li class="nav-item"><a class="nav-link" href="/en/4/contributing/translation_process/">Implement Internationalisation</a></li><li class="nav-item"><a class="nav-link" href="/en/4/contributing/core_committers/">Core committers</a></li><li class="nav-item"><a class="nav-link" href="/en/4/contributing/code_of_conduct/">Code of conduct</a></li><li class="nav-item"><a class="nav-link" href="/en/4/contributing/coding_conventions/">Coding conventions</a></li><li class="nav-item"><a class="nav-link" href="/en/4/contributing/javascript_coding_conventions/">Javascript coding conventions</a></li><li class="nav-item"><a class="nav-link" href="/en/4/contributing/css_coding_conventions/">CSS coding conventions</a></li><li class="nav-item"><a class="nav-link" href="/en/4/contributing/php_coding_conventions/">PHP coding conventions</a></li></ul></nav></div><div class="docs-content"><div class="container"><article class="docs-article"><h2>Getting Started with SilverStripe</h2>
<p>Before you start developing your first web application, you&#x27;ll need to install the latest version of SilverStripe onto
a web server. The <a class="gatsby-link" href="/getting_started">Getting Started</a> section will show you what
<a class="gatsby-link" href="/getting_started/server_requirements">server requirements</a> you will need to meet and how to
<a class="gatsby-link" href="/getting_started/installation">download and install SilverStripe</a>.</p>
<p>To check out the features that SilverStripe offers without installing it, read the <a href="http://www.silverstripe.org/software/" target="_blank">Feature Overview</a>
and play with the interactive <a href="http://demo.silverstripe.org/" target="_blank">demo website</a>.</p>
<h2>Getting support</h2>
<p>SilverStripe has an wide range of options for getting support:</p>
<ul>
<li>Join our <a href="https://forum.silverstripe.org" target="_blank">forum</a></li>
<li>Ask technical questions on <a href="https://stackoverflow.com/questions/tagged/silverstripe" target="_blank">Stack Overflow</a> </li>
<li>Get help on our <a href="https://www.silverstripe.org/community/slack-signup/" target="_blank">Slack channel</a></li>
<li>Read the technical reference in our <a href="http://api.silverstripe.org/" target="_blank">API Documentation</a></li>
<li>Get a user-focused overview of the CMS features in our <a href="http://userhelp.silverstripe.com" target="_blank">User Help</a></li>
<li>Discuss new features, API changes and the development <a href="http://www.silverstripe.org/software/roadmap/" target="_blank">roadmap</a>
on <a href="http://silverstripe.uservoice.com/forums/251266-new-features" target="_blank">UserVoice</a></li>
</ul>
<h2>Building your first SilverStripe Web application</h2>
<p>Once you have completed the <a class="gatsby-link" href="/getting_started">Getting Started</a> guide and have got SilverStripe
installed and running, the following <a href="http://silverstripe.org/learn/lessons" target="_blank">Tutorials</a> will lead through the basics and core concepts of
SilverStripe.</p>
<p>Make sure you know the basic concepts of PHP5 before attempting to follow the tutorials. If you have not programmed with PHP5 be sure to read the <a href="http://devzone.zend.com/6/php-101--php-for-the-absolute-beginner" target="_blank">Introduction to PHP5 (zend.com)</a>.</p>
<h2>SilverStripe Concepts</h2>
<p>The <a class="gatsby-link" href="/developer_guides">Developer Guides</a> contain more detailed documentation on certain SilverStripe topics, &#x27;how to&#x27;
examples and reference documentation.</p><h2>Contributing to SilverStripe</h2>
<p>The SilverStripe Framework, Content Management System and related websites are open source and welcome community
contributions.</p><div class="github-edit"><a target="_blank" href="https://github.com/unclecheese/silverstripe-framework/edit/pulls/4/gatsby-docs/docs/en/index.md" title="Edit on Github"><i class="fas fa-pen fa-fw"></i> <!-- -->Edit on Github</a></div></article></div></div></div></div></div><script id="gatsby-script-loader">/*<![CDATA[*/window.pagePath="/en/4/";/*]]>*/</script><script id="gatsby-chunk-mapping">/*<![CDATA[*/window.___chunkMapping={"app":["/app-078ef20c4f6226a30cfe.js"],"component---src-templates-docs-template-tsx":["/component---src-templates-docs-template-tsx-8bf1a3f0cf8cb2dc5dce.js"],"component---src-pages-404-tsx":["/component---src-pages-404-tsx-1fd4805fd51eec9144a6.js"],"component---src-pages-index-tsx":["/component---src-pages-index-tsx-1c6f8ca0bd20a23ccad1.js"]};/*]]>*/</script><script src="/webpack-runtime-7ee5f2360478ea7b1bd9.js" async=""></script><script src="/styles-d8a44786e8bcf583a943.js" async=""></script><script src="/app-078ef20c4f6226a30cfe.js" async=""></script><script src="/commons-6c4dd063e3c1930fefab.js" async=""></script><script src="/component---src-templates-docs-template-tsx-8bf1a3f0cf8cb2dc5dce.js" async=""></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script></body></html>

View File

@ -9,6 +9,7 @@
"@types/styled-components": "^4.1.21",
"autoprefixer": "^9.7.1",
"babel-plugin-styled-components": "^1.10.6",
"classnames": "^2.2.6",
"gatsby": "^2.17.10",
"gatsby-image": "^2.2.30",
"gatsby-plugin-manifest": "^2.2.26",
@ -36,7 +37,8 @@
"react-spring": "^8.0.27",
"resize-observer-polyfill": "^1.5.1",
"smooth-scroll": "^16.1.0",
"styled-components": "^4.4.1"
"styled-components": "^4.4.1",
"unist-util-select": "^3.0.0"
},
"devDependencies": {
"@types/react": "^16.9.11",

View File

@ -1,34 +0,0 @@
import React, { StatelessComponent, ReactElement } from 'react';
export enum CalloutType {
hint = "hint",
notice = "notice",
info = "info",
warning = "warning",
alert = "alert",
}
interface CalloutProps {
type: CalloutType;
}
const lookup = {
hint: 'success',
notice: 'warning',
info: 'info',
warning: 'warning',
alert: 'danger',
}
const Callout: StatelessComponent<CalloutProps> = ({ type, children }): ReactElement => {
const alertClass = lookup[type] || 'info';
return (
<div className={`callout-block callout-block-${alertClass}`}>
<div className="content">
{children}
</div>
</div>
);
};
export default Callout;

View File

@ -2,7 +2,7 @@ import React, { StatelessComponent, ReactElement } from 'react';
import { SilverstripeDocument, ChildrenOfProps } from '../types';
import { Link } from 'gatsby';
import { getChildren, getSiblings } from '../utils/nodes';
import path from 'path';
const createCards = (children: SilverstripeDocument[]): ReactElement[] => {
return children.map(({ summary, slug, title, icon }) => {
return (
@ -26,7 +26,7 @@ const createCards = (children: SilverstripeDocument[]): ReactElement[] => {
})
};
const createList= (children: SilverstripeDocument[]): ReactElement[] => {
const createList = (children: SilverstripeDocument[]): ReactElement[] => {
return children.map(({ summary, slug, title }) => {
return (
<React.Fragment key={slug}>

View File

@ -1,11 +1,26 @@
import React, { StatelessComponent, SyntheticEvent, ReactElement } from 'react';
import React, { StatelessComponent, ReactElement } from 'react';
import SearchBox from './SearchBox';
import { Link } from 'gatsby';
import { Link, navigate } from 'gatsby';
import logo from '../images/silverstripe-logo.svg';
import { getHomePage } from '../utils/nodes';
import { getNodes, getHomePage, getCurrentNode, getCurrentVersion } from '../utils/nodes';
interface HeaderProps {
handleSidebarToggle(e: SyntheticEvent): void
handleSidebarToggle(e: EventTarget): void
}
const handleNavigate = (e: any): void => {
const currentNode = getCurrentNode();
const ver = e.target.value;
if (currentNode) {
const newPath = currentNode.slug.replace(/^\/en\/[0-9]+\//, `/en/${ver}/`);
const otherNode = getNodes().find(n => n.slug === newPath);
if (otherNode) {
navigate(otherNode.slug);
} else {
navigate(`/en/${ver}`);
}
}
}
const Header: StatelessComponent<HeaderProps> = ({ handleSidebarToggle }): ReactElement => {
@ -16,7 +31,7 @@ const Header: StatelessComponent<HeaderProps> = ({ handleSidebarToggle }): React
<div className="container position-relative py-2 d-flex">
<div className="docs-logo-wrapper">
<div className="site-logo">
<Link className="navbar-brand" to={home.slug} title="Go to the home page">
<Link className="navbar-brand" to={ home ? home.slug : '/'} title="Go to the home page">
<img src={logo} alt="Silverstripe CMS documentation" />
<span>Documentation</span>
</Link>
@ -32,8 +47,8 @@ const Header: StatelessComponent<HeaderProps> = ({ handleSidebarToggle }): React
</div>
<ul className="social-list list-inline d-flex flex-grow-1 flex-lg-grow-0 justify-content-between justify-content-lg-around align-items-center">
<li className="list-inline-item version-select">
<label htmlFor="version-select">Version:</label>
<select id="version-select" onChange={() => alert('this doesnt work yet')}>
<label htmlFor="version-select">Version: </label>
<select id="version-select" value={getCurrentVersion() || '4'} onChange={handleNavigate}>
<option value='4'>4.x</option>
<option value='3'>3.x</option>
</select>

View File

@ -1,22 +1,36 @@
import React, { StatelessComponent, useState } from "react";
import React, { StatelessComponent, useState, ReactNode } from "react";
import Header from './Header';
import Sidebar from './Sidebar';
import { setCurrentNode } from '../utils/nodes';
const Layout: StatelessComponent<{}> = ({ children}) => {
interface LayoutProps {
children?: ReactNode
pathContext: {
slug: string;
}
}
const Layout: StatelessComponent<LayoutProps> = ({ children, pathContext: { slug } }) => {
const [isToggled, setSidebarOpen] = useState(false);
const handleNavigate = () => setSidebarOpen(false);
// This is a wrapper component that only gets mounted once.
// These two method calls set the initial state for SSR. From here on,
// the state is updated each time the docs template renders
setCurrentNode(slug);
return (
<>
<Header handleSidebarToggle={() => setSidebarOpen(!isToggled)} />
<div className={`docs-wrapper container ${isToggled ? 'sidebar-visible' : ''}`}>
<Sidebar isOpen={isToggled} />
<div className="docs-content">
<div className="container">
<article className="docs-article">
{children}
</article>
</div>
<Sidebar onNavigate={handleNavigate} isOpen={isToggled} />
<div className="docs-content">
<div className="container">
<article className="docs-article">
{children}
</article>
</div>
</div>
</div>
</div>
</>
);
};

View File

@ -1,13 +1,30 @@
import React from 'react';
import React, { StatelessComponent, ReactElement } from 'react';
import { getNavChildren, getHomePage, getCurrentNode } from '../utils/nodes';
import { SilverstripeDocument } from '../types';
import { Link } from 'gatsby';
import classnames from 'classnames';
import { LinkGetProps } from '@reach/router';
const Nav = () => {
interface NavProps {
onNavigate?(e: React.MouseEvent): void;
};
const getLinkProps = (props: LinkGetProps): {} => {
const { isPartiallyCurrent, isCurrent } = props;
return {
className: classnames({
'active': isCurrent,
'section': isPartiallyCurrent,
'nav-link': true,
}),
};
};
const Nav:StatelessComponent<NavProps> = ({ onNavigate }): ReactElement => {
const currentNode = getCurrentNode();
const top = getHomePage();
if (!top) {
return <nav>boo</nav>;
return <nav />;
}
return (
@ -19,7 +36,7 @@ const Nav = () => {
return (
<React.Fragment key={slug}>
<li className="nav-item section-title">
<Link activeClassName='active' className="nav-link" to={slug}>{title}</Link>
<Link getProps={getLinkProps} onClick={onNavigate} to={slug}>{title}</Link>
</li>
{childItems.map((node: SilverstripeDocument) => {
const { slug: childSlug, title: childTitle } = node;
@ -27,13 +44,13 @@ const Nav = () => {
return (
<React.Fragment key={childSlug}>
<li key={childSlug} className="nav-item">
<Link activeClassName='active' className="nav-link" to={childSlug}>{childTitle}</Link>
<Link getProps={getLinkProps} onClick={onNavigate} to={childSlug}>{childTitle}</Link>
</li>
{shouldShowChildren && getNavChildren(node).map((child: SilverstripeDocument) => {
const { title: grandchildTitle, slug: grandchildSlug } = child;
return (
<li key={grandchildSlug} className="nav-item third-level">
<Link activeClassName='active' className="nav-link" to={grandchildSlug}>{grandchildTitle}</Link>
<Link getProps={getLinkProps} onClick={onNavigate} to={grandchildSlug}>{grandchildTitle}</Link>
</li>
);
})}

View File

@ -1,30 +1,22 @@
import React, { StatelessComponent, ReactElement, useRef, useLayoutEffect, useEffect, useState } from 'react';
import React, { StatelessComponent, ReactElement } from 'react';
import SearchBox from './SearchBox';
import Nav from './Nav';
interface SidebarProps {
isOpen: boolean;
onNavigate?(e: React.MouseEvent): void;
}
// Global state to persist across renders
let scroll = 0;
const Sidebar:StatelessComponent<SidebarProps> = ({ isOpen }): ReactElement => {
const scrollingDiv = useRef(null);
useLayoutEffect(() => {
//scrollingDiv.current.scrollTop = scroll;
}, [])
const handleScroll = () => {
scroll = scrollingDiv.current.scrollTop;
};
const Sidebar:StatelessComponent<SidebarProps> = ({ isOpen, onNavigate }): ReactElement => {
return (
<div ref={scrollingDiv} onScroll={handleScroll} id="docs-sidebar" className={`docs-sidebar ${isOpen ? 'sidebar-visible' : ''}`}>
<div id="docs-sidebar" className={`docs-sidebar ${isOpen ? 'sidebar-visible' : ''}`}>
<div className="top-search-box d-lg-none p-3">
<form className="search-form">
<SearchBox identifier="sidebar-search"/>
</form>
</div>
<Nav />
<Nav onNavigate={onNavigate} />
</div>
);
};

View File

@ -1,15 +1,19 @@
import React, { StatelessComponent, ReactElement } from 'react';
import React, { StatelessComponent, ReactElement, useEffect } from 'react';
import { graphql } from 'gatsby';
import SEO from '../components/SEO';
import { SingleFileQuery } from '../types';
import parseHTML from '../utils/parseHTML';
import { setCurrentNode } from '../utils/nodes';
const Template: StatelessComponent<SingleFileQuery> = (result): ReactElement => {
const currentNode = result.data.silverstripeDocument;
const currentNode = result.data.silverstripeDocument;
const { html } = currentNode.parent;
const { title } = currentNode;
const { relativePath, gitRemote: { ref, webLink } } = currentNode.parent.parent;
const { title, slug } = currentNode;
const { relativePath, gitRemote: { ref, webLink, sourceInstanceName } } = currentNode.parent.parent;
const editLink = `${webLink}/edit/${ref}/${relativePath}`;
useEffect(() => {
setCurrentNode(slug);
}, []);
return (
<>
<SEO title={title} />
@ -40,6 +44,7 @@ export const pageQuery = graphql`
gitRemote {
ref
webLink
sourceInstanceName
}
}
}
@ -47,6 +52,7 @@ export const pageQuery = graphql`
}
title
slug
}
}

View File

@ -47,6 +47,21 @@ body {
&::before {
background: none;
}
&.section {
&::before {
background: $gray-700;
height: 4px;
top: 50%;
margin-top: -2pxp;
}
&.active {
&::before {
background: $theme-color-primary;
height: 100%;
top: 0;
}
}
}
}
.nav-item {
margin-left: 0;
@ -59,6 +74,9 @@ body {
}
}
code {
padding: 0;
}
.docs-logo-wrapper {
width: 300px;

View File

@ -6,6 +6,7 @@ export interface SingleFileQuery {
export interface SinglePage {
title: string;
slug: string;
parent: {
html: string;
parent: {

View File

@ -0,0 +1,28 @@
const getCalloutClass = (type: string): string => {
switch (type) {
case 'hint':
return 'success';
case 'notice':
return 'warning';
case 'alert':
return 'danger';
case 'note':
return 'info'
default:
return type;
}
};
const cleanCalloutTags = (html: string): string => {
return html.replace(
/(?:<p>\s*)?(\[(hint|warning|info|alert|notice|note)\])(.*?)(\[\/(hint|warning|info|alert|notice|note)\])(?:<\/p>)?/gs,
(_, tag, type, content) => `
<div class="callout-block callout-block-${getCalloutClass(type)}">
<div class="content">
${content}
</div>
</div>
`
);
};
export default cleanCalloutTags;

View File

@ -6,6 +6,7 @@ import sortFiles from './sortFiles';
let __nodes: SilverstripeDocument[] | undefined;
let __path: string | null = null;
let __currentNode: SilverstripeDocument | null = null;
let __currentVersion: string | null = null;
let __home: SilverstripeDocument | null = null;
const childrenMap = new Map();
@ -102,28 +103,37 @@ const getParent = (node: SilverstripeDocument): SilverstripeDocument | null => {
return parentMap.get(node.slug);
};
const getCurrentNode = (): SilverstripeDocument | null => {
const browserPath = typeof window !== 'undefined' ? window.location.pathname : '/';
if (!__path || __path !== browserPath) {
__path = browserPath;
const nodes = getNodes();
__currentNode = nodes.find(n => n.slug === __path) || null;
}
return __currentNode || null;
};
const getCurrentNode = (): SilverstripeDocument | null => __currentNode;
const getHomePage = (): SilverstripeDocument | null => {
if (__home) {
return __home;
}
const nodes = getNodes();
const homePage = nodes.find(n => n.slug === '/en/4/') || null;
const version = getCurrentVersion();
const homePage = nodes.find(n => n.slug === `/en/${version}/`) || null;
__home = homePage;
return __home;
};
const getCurrentVersion = (): string | null => __currentVersion;
const setCurrentNode = (slug: string): void => {
const currentNode = getNodes().find(n => n.slug === slug) || null;
__currentNode = currentNode;
if (currentNode) {
const matches = currentNode.slug.match(/^\/en\/([0-9]+)\//);
if (matches) {
__currentVersion = matches[1];
}
}
};
export {
getNodes,
getChildren,
@ -132,4 +142,6 @@ export {
getCurrentNode,
getHomePage,
getNavChildren,
getCurrentVersion,
setCurrentNode
};

View File

@ -3,7 +3,7 @@ import cleanChildrenTags from './cleanChildrenTags';
import cleanWhitespace from './cleanWhitespace';
import rewriteLink from './rewriteLink';
import parseChildrenOf from './parseChildrenOf';
import rewriteCallout from './rewriteCallout';
import cleanCalloutTags from './cleanCalloutTags';
import { ReactElement } from 'react';
import rewriteTable from './rewriteTable';
import rewriteHeader from './rewriteHeader';
@ -14,7 +14,9 @@ import rewriteHeader from './rewriteHeader';
*/
const parseHTML = (html: string): ReactElement | ReactElement[] | string => {
let cleanHTML = cleanChildrenTags(html);
cleanHTML = cleanCalloutTags(cleanHTML);
cleanHTML = cleanWhitespace(cleanHTML);
const parseOptions = {
replace(domNode: DomElement): ReactElement | object | undefined | false {
const { name, attribs, children } = domNode;
@ -23,11 +25,6 @@ const parseHTML = (html: string): ReactElement | ReactElement[] | string => {
if (name === 'a') {
return rewriteLink(attribs, domChildren, parseOptions);
}
if (name === 'div') {
if (attribs && attribs.markdown) {
return rewriteCallout(attribs.class, domChildren, parseOptions);
}
}
if (name === 'table') {
return rewriteTable(domChildren, parseOptions);
}

View File

@ -1,22 +0,0 @@
import { ReactElement, createElement } from "react";
import Callout, { CalloutType } from '../components/Callout';
import { domToReact, DomElement, HTMLReactParserOptions } from 'html-react-parser';
const rewriteCallout = (
domClass: string,
children: DomElement[],
parseOptions: HTMLReactParserOptions
): ReactElement|false => {
const typeKey = domClass as keyof typeof CalloutType;
const type = CalloutType[typeKey];
if (type) {
return createElement(
Callout,
{ type },
domToReact(children || [], parseOptions)
);
}
return false;
};
export default rewriteCallout;

View File

@ -2952,6 +2952,11 @@ class-utils@^0.3.5:
isobject "^3.0.0"
static-extend "^0.1.1"
classnames@^2.2.6:
version "2.2.6"
resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.6.tgz#43935bffdd291f326dad0a205309b38d00f650ce"
integrity sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q==
clean-stack@^2.0.0:
version "2.2.0"
resolved "https://registry.yarnpkg.com/clean-stack/-/clean-stack-2.2.0.tgz#ee8472dbb129e727b31e8a10a427dee9dfe4008b"
@ -8964,6 +8969,11 @@ normalize.css@^8.0.1:
resolved "https://registry.yarnpkg.com/normalize.css/-/normalize.css-8.0.1.tgz#9b98a208738b9cc2634caacbc42d131c97487bf3"
integrity sha512-qizSNPO93t1YUuUhP22btGOo3chcvDFqFaj2TRybP0DMxkHOCTYwp3n34fel4a31ORXy4m1Xq0Gyqpb5m33qIg==
not@^0.1.0:
version "0.1.0"
resolved "https://registry.yarnpkg.com/not/-/not-0.1.0.tgz#c9691c1746c55dcfbe54cbd8bd4ff041bc2b519d"
integrity sha1-yWkcF0bFXc++VMvYvU/wQbwrUZ0=
npm-bundled@^1.0.1:
version "1.0.6"
resolved "https://registry.yarnpkg.com/npm-bundled/-/npm-bundled-1.0.6.tgz#e7ba9aadcef962bb61248f91721cd932b3fe6bdd"
@ -13009,6 +13019,11 @@ unist-util-is@^3.0.0:
resolved "https://registry.yarnpkg.com/unist-util-is/-/unist-util-is-3.0.0.tgz#d9e84381c2468e82629e4a5be9d7d05a2dd324cd"
integrity sha512-sVZZX3+kspVNmLWBPAB6r+7D9ZgAFPNWm66f7YNb420RlQSbn+n8rG8dGZSkrER7ZIXGQYNm5pqC3v3HopH24A==
unist-util-is@^4.0.0:
version "4.0.1"
resolved "https://registry.yarnpkg.com/unist-util-is/-/unist-util-is-4.0.1.tgz#ae3e39b9ad1b138c8e3b9d2f4658ad0031be4610"
integrity sha512-7NYjErP4LJtkEptPR22wO5RsCPnHZZrop7t2SoQzjvpFedCFer4WW8ujj9GI5DkUX7yVcffXLjoURf6h2QUv6Q==
unist-util-modify-children@^1.0.0:
version "1.1.4"
resolved "https://registry.yarnpkg.com/unist-util-modify-children/-/unist-util-modify-children-1.1.4.tgz#f9dd31e93884c3be06b43c9291d60324d5df5f68"
@ -13037,6 +13052,17 @@ unist-util-select@^1.5.0:
debug "^2.2.0"
nth-check "^1.0.1"
unist-util-select@^3.0.0:
version "3.0.0"
resolved "https://registry.yarnpkg.com/unist-util-select/-/unist-util-select-3.0.0.tgz#36cef56c000caa09c51383269946ab17365c702e"
integrity sha512-eBOYflIHlKWNI/FTmObsPiPbRQG59POGuddDx4X7b99uxDDMpbOfJLozkazJhcOpKmCYAKqwpZ4IqEaOONqk3A==
dependencies:
css-selector-parser "^1.1.0"
not "^0.1.0"
nth-check "^1.0.1"
unist-util-is "^4.0.0"
zwitch "^1.0.3"
unist-util-stringify-position@^1.0.0, unist-util-stringify-position@^1.1.1:
version "1.1.2"
resolved "https://registry.yarnpkg.com/unist-util-stringify-position/-/unist-util-stringify-position-1.1.2.tgz#3f37fcf351279dcbca7480ab5889bb8a832ee1c6"
@ -13964,7 +13990,7 @@ yurnalist@^1.1.1:
strip-ansi "^5.2.0"
strip-bom "^4.0.0"
zwitch@^1.0.0:
zwitch@^1.0.0, zwitch@^1.0.3:
version "1.0.4"
resolved "https://registry.yarnpkg.com/zwitch/-/zwitch-1.0.4.tgz#93b1b993b13c8926753a41afaf8f27bbfac6be8b"
integrity sha512-YO803/X+13GNaZB7fVopjvHH0uWQKgJkgKnU1YCjxShjKGVuN9PPHHW8g+uFDpkHpSTNi3rCMKMewIcbC1BAYg==