Merge pull request #1 from moficodes/website

add scaffold website for ai on gke

.github/workflows/hugo.yaml

@@ -0,0 +1,32 @@
+name: Hugo
+
+on:
+  push:
+    branches: [ main ]
+  pull_request:
+    branches: [ main ]
+
+jobs:
+
+  build:
+    name: Build
+    runs-on: ubuntu-latest
+    steps:
+    - name: Checkout repository and submodules
+      uses: actions/checkout@v2
+
+
+    - name: Setup Hugo
+      uses: peaceiris/actions-hugo@v2
+      with:
+        hugo-version: '0.121.2'
+        extended: true
+
+    - name: Build
+      run: |
+        cd website && npm install && hugo --gc --minify
+    - name: Deploy to GitHub Pages
+      uses: peaceiris/actions-gh-pages@v3
+      with:
+        github_token: ${{ secrets.GITHUB_TOKEN }}
+        publish_dir: ./website/public

.gitignore

@@ -31,6 +31,12 @@ __pycache__/
 default.tfstate
 default.tfstate.backup
 .terraform*
+__pycache__/
+
+public/
+node_modules/
+resources/
 terraform.tfstate*
 terraform.tfvars
 tfplan
+

website/.gitignore

@@ -0,0 +1,12 @@
+public/
+
+# Modules generated by node.js for CSS editing
+node_modules/
+
+# Resources directory generated by Hugo local build
+resources/
+
+# Notebooks
+.ipynb_checkpoints
+#
+.hugo_build.lock

website/archetypes/default.md

@@ -0,0 +1,5 @@
+---
+title: "{{ replace .Name "-" " " | title }}"
+date: {{ .Date }}
+draft: true
+---

website/assets/scss/_styles_project.scss

@@ -0,0 +1,174 @@
+// --------------------------------------------------
+// remove whitespace after footer
+// --------------------------------------------------
+footer {
+  min-height: auto;
+}
+
+// --------------------------------------------------
+// prevent overflow of long names in sidebar
+// --------------------------------------------------
+.td-sidebar-nav__section > ul {
+  overflow-wrap: break-word;
+}
+
+.td-overlay--dark::after {
+  background-color: rgba(33, 61, 122, 0.6);
+}
+
+#main_navbar {
+  justify-content: end;
+  padding-right: 16px;
+}
+
+.row > * {
+  flex-shrink: 1;
+}
+
+.row > .container {
+  max-width: 1200px;
+}
+
+// --------------------------------------------------
+// custom navbar with larger logo, dropdown on mobile
+// --------------------------------------------------
+.td-navbar {
+  min-height: auto;
+
+  .navbar-brand {
+    margin: 0;
+    padding: 0;
+
+    .text-uppercase {
+      display: none;
+    }
+
+    .navbar-logo {
+      svg {
+        display: inline-block;
+        position: absolute;
+        top: 0;
+        z-index: 33;
+        padding: 10px;
+        height: 95px;
+        background: white;
+        border: 2px solid #4279f4;
+        border-top: none;
+
+        @include media-breakpoint-down(md) {
+          width: 80px;
+          height: auto;
+          padding: 6px;
+        }
+      }
+    }
+  }
+
+  .navbar-nav {
+    @include media-breakpoint-down(md) {
+      font-size: .875rem;
+      .dropdown {
+        min-width: inherit;
+      }
+    }
+  }
+}
+
+.td-sidebar {
+  padding-bottom: 0.5rem;
+
+  .td-sidebar__inner {
+    padding-top: 30px;
+
+    @include media-breakpoint-down(md) {
+      padding-top: 10px;
+    }
+  }
+}
+
+.td-sidebar-toc {
+  @supports (position: sticky) {
+      position: sticky;
+      top: 60px;
+      height: calc(100vh - 120px);
+      overflow-y: auto;
+  }
+}
+
+
+// --------------------------------------------------
+// 404 page
+// --------------------------------------------------
+.error-page {
+  margin-top: 120px;
+
+  ul {
+    margin-bottom: 50px;
+    list-style-type: none;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-wrap: wrap;
+    padding-left: 0;
+  }
+
+  li {
+    margin-left: 10px;
+    margin-right: 10px;
+  }
+
+  h1 {
+    text-align: center;
+    margin-bottom: 20px;
+  }
+
+  @media (min-width: 768px) and (max-width: 991px) {
+    margin-top: 100px;
+  }
+
+  @media (max-width: 767px) {
+    margin-top: 50px;
+  }
+}
+
+figcaption {
+  font-size: 0.8rem;
+  text-align: center;
+  font-style: italic;
+  color: #6c757d;
+}
+
+// --------------------------------------------------
+// for tabbed code blocks
+// --------------------------------------------------
+.nav-tabs {
+  border-bottom: none !important;
+}
+
+.td-content > ul li,
+.td-content > ol li.nav-item {
+  margin-bottom: 0px;
+}
+
+.td-content .tab-content .highlight {
+  margin: 0;
+}
+
+.tab-pane {
+  border-radius: 0.25rem;
+  padding: 0 16px 16px;
+
+  border: 1px solid #dee2e6;
+
+  &:first-of-type.active {
+    border-top-left-radius: 0;
+  }
+}
+
+nav.foldable-nav .ul-1 .with-child>label:hover:before {
+  transform: none;
+}
+
+nav.foldable-nav .ul-1 .with-child>input:checked~label:hover:before {
+  transform: rotate(90deg) !important;
+}

website/assets/scss/_variables_project.scss

@@ -0,0 +1,151 @@
+/*
+Add styles or override the theme's variables here.
+*/
+
+html.smooth-scroll {
+  scroll-behavior: smooth;
+}
+
+// Theme colors
+$primary: #4279f4;
+$secondary: #fff;
+$dark: #213d7a;
+$info: #adb5bd;
+$light: #dee2e6;
+
+// Nav bar colors
+$white: #fff;
+$navbar-dark-color: rgba($white, 1);
+$navbar-dark-hover-color: rgba($white, 0.75);
+$navbar-dark-active-color: $navbar-dark-color;
+
+// Fonts
+$google_font_family: "Open+Sans:300,300i,400,400i,600,600i,700,700i&display=swap" !default;
+
+// Front page styling
+.card-img-top {
+  object-fit: scale-down;
+}
+
+.text-white {
+  font-weight: 400;
+}
+
+.bg-primary-dark {
+  background-color: $dark;
+
+  a {
+    border-bottom: 1px dotted paleturquoise;
+
+    color: paleturquoise !important;
+    font-weight: 600;
+    padding: 0 2px 1px 2px;
+    text-decoration: none;
+
+    &:hover {
+      border-bottom: 1px dotted #fff;
+
+      color: #fff !important;
+    }
+  }
+}
+
+.border-primary-dark {
+  border-color: $info !important;
+}
+
+.section-head {
+  font-size: 1.25em;
+  color: $primary;
+  font-weight: bold;
+  padding: 0 0 1em 0;
+}
+
+.contain {
+  margin: 0 auto;
+  max-width: 1200px; }
+
+.image {
+  display: block; }
+  .image img {
+    display: block;
+    width: 100%;
+    height: auto; }
+  .image.left, .image.right {
+    max-width: 45%; }
+    .image.left::after, .image.right::after {
+      clear: both;
+      content: "";
+      display: block; }
+  .image.left {
+    float: left;
+    margin: 0 1.5em 1.5em 0; }
+  .image.right {
+    float: right;
+    margin: 0 0 1.5em 1.5em; }
+
+#overview, #community {
+  padding: 6em 1.5em 3em 1.5em;
+  text-align: center;
+  margin: 0; }
+  #overview p, #community p {
+    font-size: 1.125em;}
+
+#overview {
+  border-bottom: 2px solid #b6d0ff;
+}
+
+#community {
+  border-top: 2px solid #b6d0ff;
+}
+
+#pageContent .lead {
+  margin: 0 1.5em 3em 1.5em;}
+  #pageContent .lead > .image {
+    padding: 0 1.5em;
+    max-width: 60%;
+    margin-bottom: 1.5em; }
+  #pageContent .lead > .text p {
+    font-size: 1em; }
+
+@media screen and (min-width: 480px) {
+  #overview, #community {
+    font-size: 1.125em; }
+  #pageContent .lead > .image {
+    max-width: 35%;
+    margin-bottom: 3em; }
+  #pageContent .lead > .text p {
+    font-size: 1em; } }
+
+@media screen and (min-width: 769px) {
+  #pageContent .lead {
+    margin-top: 1em;
+    display: -ms-flexbox;
+    display: flex;
+    -ms-flex-direction: row;
+        flex-direction: row;
+    -ms-flex-wrap: nowrap;
+        flex-wrap: nowrap;
+    -ms-flex-pack: justify;
+        justify-content: space-between;
+    -ms-flex-align: stretch;
+        align-items: stretch; }
+    #pageContent .lead > * {
+      -ms-flex: 0 1 auto;
+          flex: 0 1 auto; }
+    #pageContent .lead > .image {
+      display: block;
+      margin: 0 auto;
+      max-width: 100%; }
+      #pageContent .lead > .image > img {
+        max-width: 80%;
+        margin: 0 auto; }
+    #pageContent .lead > .text {
+      -ms-flex-preferred-size: 70%;
+          flex-basis: 70%; }
+    #pageContent .lead:nth-child(2n+0) > .image {
+      -ms-flex-order: 2;
+          order: 2; }
+    #pageContent .lead:nth-child(2n+0) > .text {
+      -ms-flex-order: 1;
+          order: 1; } }