Navbar Component and Generic Components

.editorconfig

@@ -3,20 +3,17 @@
 root = true
 
 [*]
-charset                     = utf-8
-end_of_line                 = lf
-indent_size                 = 4
-indent_style                = space
-insert_final_newline        = true
-max_line_length             = 120
-tab_width                   = 4
-trim_trailing_whitespace    = true
-
-[*.{kt,kts}]
-disabled_rules              = import-ordering
+charset                  = utf-8
+end_of_line              = lf
+indent_size              = 4
+indent_style             = space
+insert_final_newline     = true
+max_line_length          = 120
+tab_width                = 4
+trim_trailing_whitespace = true
 
 [*.md]
-trim_trailing_whitespace    = false
+trim_trailing_whitespace = false
 
 [{*.md,*.neon,*.yaml,*.yml,*.tf}]
-indent_size                 = 2
+indent_size              = 2

build.gradle.kts

@@ -5,6 +5,7 @@ import org.jlleitschuh.gradle.ktlint.BaseKtlintCheckTask
 import org.jlleitschuh.gradle.ktlint.KtlintApplyToIdeaTask
 import org.jlleitschuh.gradle.ktlint.KtlintCheckTask
 import org.jlleitschuh.gradle.ktlint.KtlintFormatTask
+import org.jlleitschuh.gradle.ktlint.KtlintInstallGitHookTask
 import org.jlleitschuh.gradle.ktlint.KtlintPlugin
 
 plugins {
@@ -13,6 +14,7 @@ plugins {
     kotlin("js") apply false
 
     id("org.jlleitschuh.gradle.ktlint")
+    id("com.github.gmazzo.buildconfig").version("2.0.2")
 }
 
 allprojects {
@@ -63,7 +65,7 @@ subprojects {
             KtlintCheckTask::class,
             KtlintApplyToIdeaTask::class,
             KtlintFormatTask::class,
-            org.jlleitschuh.gradle.ktlint.KtlintInstallGitHookTask::class
+            KtlintInstallGitHookTask::class
         )
     )
 

docs/index.html

@@ -7,8 +7,8 @@
 
 
     <!-- Bootstrap CSS -->
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"
-          integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
+    <!--    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"-->
+    <!--          integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">-->
     <link rel="shortcut icon" href="/kotlin-react-bootstrap/favicon.ico">
     <title>Kotlin React Bootstrap</title>
 </head>
@@ -26,9 +26,9 @@
     // When the single page app is loaded further down in this file,
     // the correct url will be waiting in the browser's history for
     // the single page app to route accordingly.
-    (function(l) {
-        if (l.search[1] === '/' ) {
-            var decoded = l.search.slice(1).split('&').map(function(s) {
+    (function (l) {
+        if (l.search[1] === '/') {
+            var decoded = l.search.slice(1).split('&').map(function (s) {
                 return s.replace(/~and~/g, '&')
             }).join('?');
             window.history.replaceState(null, null,

docs/style.css

@@ -1,85 +1,164 @@
 @import url(https://fonts.googleapis.com/css?family=Inter:400,700);
 @import url(https://fonts.googleapis.com/css?family=Open+Sans:300,500,700);
+@import url(https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css);
 
+body {
+    font-family: "Open Sans", Helvetica, Arial, sans-serif
+}
 
+header.krbd {
+    background-color: #26292c;
+    padding-top: .75rem;
+    padding-bottom: .75rem;
+    border-bottom: 1px solid rgba(255, 255, 255, .2);
+}
 
-body {
-    font-family: "Open Sans", sans-serif;
+header.krbd .navbar-brand {
+    font-weight: bold;
 }
 
-h1, h2, h3, h4, h5 {
-    font-family: Inter, Arial, sans-serif;
+header.krbd .navbar-brand img {
+    height: 1em;
 }
 
-.btn-bd-primary {
-    background-color: #6a6ffc;
-    color: white;
-    border: none
+header.krbd .navbar-brand .small {
+    vertical-align: top;
+    font-size: 60%
 }
 
-.btn-bd-primary:hover {
-    background-color: #878bfc
+header.krbd a {
+    color: rgba(255,255,255,.75)
 }
 
-.bd-navbar {
-    background-color: #27282c;
-    box-shadow: none;
+header.krbd a:hover, header.krbd a.active {
+    color: white
 }
 
-.bd-example {
-    padding: 1.5rem;
-    margin-top: 1rem;
-    border: .2rem solid #f8f9fa;
+.krbd-nav > .nav-item > .nav-link:hover, .krbd-nav > .nav-item > .nav-link.active {
+    /*background-color: #f2f2f2;*/
 }
 
-.bd-navbar .navbar-nav .nav-link {
-    color: rgba(255, 255, 255, .5)
+.krbd-nav > .nav-item > .nav-link.active + .nav {
+    /*background-color: #f9f9f9;*/
 }
 
-.bd-navbar .navbar-nav .nav-link.active {
+.krbd-nav > .nav-item > .nav-link:before {
+    content: '▶';
+    font-size: x-small;
+    vertical-align: middle;
+    margin-right: .5rem;
+    display: inline-block;
+}
+
+.krbd-nav > .nav-item > .nav .nav-link:before {
+    content: '-';
+    margin-right: .5rem;
     font-weight: normal;
 }
 
-.bd-masthead {
-    background-color: #27282c;
+.krbd-nav > .nav-item > .nav-link.active:before {
+    transform: rotate(45deg);
+}
+
+.krbd-nav a, .krbd-nav a:hover {
+    color: #497bb7;
+    text-decoration: none;
+}
+
+.krbd-nav a:hover {
+    color: #f47810;
+}
+
+.krbd-nav a.active {
+    color: #333;
+    font-weight: bold;
+}
+
+.krbd-nav, .krbd-side-nav {
+    top: 5.5rem;
+    height: calc(100vh - 5rem);
+    overflow-y: auto
+}
+
+.krbd-side-nav a {
+    color: #27282c;
+}
+
+.krbd-side-nav a:hover {
+    color: #585def
+}
+
+/* Home */
+.jumbotron.krbd {
+    background-color: #26292c;
+    color: #f4f4f4;
+}
+
+.jumbotron.krbd .btn-primary {
+    background-color: #7f52ff;
+    border: none
+}
+
+.jumbotron.krbd .btn-primary:hover {
+    background-color: rgba(125, 69, 250, .8);
+}
+
+.jumbotron.krbd h1, .jumbotron.krbd .btn {
+    font-family: Inter, Arial, sans-serif;
+}
+
+.jumbotron.krbd .btn-outline-secondary {
+    border-color: rgba(255, 255, 255, .3);
     color: white;
-    margin-left: -15px;
-    margin-right: -15px;
 }
 
-.bd-masthead .btn {
-    font-weight: normal;
+.jumbotron.krbd .btn-outline-secondary:hover {
+    border-color: rgba(255, 255, 255, .6);
+    background: rgba(255, 255, 255, .05);
 }
 
 .home-logo {
     max-height: 430px;
 }
 
 code {
-    color: #f8863c
+    color: #0000c0;
 }
 
-.bd-title {
-    font-weight: 700
+a {
+    color: #497bb7;
 }
 
-.bd-content-title {
-    font-weight: bold;
+a:hover {
+    color: #f47810;
+}
+
+main p > a {
+    text-decoration: underline;
+}
+
+/* Docs */
+.krbd-example a {
+    text-decoration: none !important;
 }
 
-a, a:hover {
-    color: #6b70fc
+.krbd-example-row .row > .col, .krbd-example-row .row > [class^=col-] {
+    background-color: rgba(245, 136, 15, .47);
+    border: 1px solid rgba(0, 0, 0, .29);
+    padding-top: .75rem;
+    padding-bottom: .75rem;
 }
 
-figure.highlight {
-    background: none rgb(253, 253, 253);
+.krbd-example-row-flex-cols .row {
+    min-height: 10rem;
+    background-color: rgba(245, 136, 15, .47);
 }
 
-figure.highlight > pre {
+figure.krbd > pre {
     overflow-x: auto !important;
 }
 
-figure.highlight > pre:before {
+figure.krbd > pre:before {
     background-color: #eee;
     bottom: 0;
     content: ' ';

gradle.properties

@@ -14,18 +14,17 @@ org.gradle.kotlin.dsl.caching.buildcache=true
 kotlin.incremental=true
 
 # External dependencies
-kotlin.version=1.4.10
+kotlin.version=1.4.20
 
 ktlint-gradle.version=9.4.1
 ktlint.version=0.39.0
 
 # Lib
-kotlin-react.version=16.13.1-pre.124-kotlin-1.4.10
-kotlin-react-dom.version=16.13.1-pre.124-kotlin-1.4.10
+kotlin-react.version=17.0.0-pre.129-kotlin-1.4.20
+kotlin-react-dom.version=17.0.0-pre.129-kotlin-1.4.20
 
 # Site
-kotlin-react-router-dom.version=5.1.2-pre.124-kotlin-1.4.10
+kotlin-react-router-dom.version=5.2.0-pre.129-kotlin-1.4.20
 file-loader.version=6.0.0
 react-syntax-highlighter.version=12.2.1
 markdown-to-jsx.version=6.11.4
-karma.version=4.4.1

kotlin-react-bootstrap/build.gradle.kts

@@ -7,8 +7,8 @@ plugins {
 }
 
 dependencies {
-    api(kotlinJsWrapper("react"))
-    api(kotlinJsWrapper("react-dom"))
+    implementation(kotlinJsWrapper("react"))
+    implementation(kotlinJsWrapper("react-dom"))
 
     testImplementation(kotlin("test-js"))
 }