feat: Initial homepage redesign

Author: kcbimonte

.gitignore

@@ -163,4 +163,8 @@ cython_debug/
 .idea/
 *.iml
 
-mkdocs.yml
+mkdocs.yml
+/node_modules/
+
+overrides/assets/javascripts/*.min.js*
+overrides/assets/stylesheets/*.css*

.old/.well-known/atproto-did .well-known/atproto-did.old/.well-known/atproto-did renamed to .well-known/atproto-did

@@ -6,6 +6,10 @@ repo_name: concourse/concourse
 
 edit_uri: https://github.com/Aviator-Labs/docs-ci/edit/main/docs/
 
+watch:
+  - docs
+  - overrides
+
 markdown_extensions:
   - admonition
   - def_list
@@ -33,6 +37,12 @@ markdown_extensions:
         kwds:
           case: lower
 
+extra_css:
+  - assets/stylesheets/mwc-theme.css
+
+extra_javascript:
+  - assets/javascripts/mwc-bundle.min.js
+
 exclude_docs: |
   libs/**/*.md
   libs/examples/apps
@@ -43,6 +53,8 @@ exclude_docs: |
 theme:
   name: material
   custom_dir: overrides
+  font: 
+    text: Roboto Slab
   features:
     - navigation.tabs         # Top-level tabs
     - navigation.tabs.sticky  # Keep tabs visible
@@ -59,12 +71,12 @@ theme:
 
   palette:
     - scheme: default
-      primary: blue
+      primary: custom
       toggle:
         icon: material/brightness-7
         name: Switch to dark mode
     - scheme: slate
-      primary: blue
+      primary: custom
       toggle:
         icon: material/brightness-4
         name: Switch to light mode
@@ -99,9 +111,12 @@ extra:
       link: https://bsky.app/profile/concourse-ci.org
     - icon: fontawesome/solid/paper-plane
       link: mailto:[email protected]
+  version: 7.14.2
+
+not_in_nav: |
+  index.md
 
 nav:
-  - index.md
   - Docs:
       - docs/index.md
       - Getting Started:

base.yml

@@ -2,30 +2,44 @@
 
 set -e -x
 
-apk add --no-progress --quiet ytt
+apk add git
 
 git config --global user.email "[email protected]"
 git config --global user.name "Concourse Bot"
 
+# Change to the docs repo
 pushd docs
-  if [ -e .git ] && git remote | grep origin >/dev/null; then
-    # undo single-branch clone and fetch gh-pages
-    git config remote.origin.fetch "+refs/heads/*:refs/remotes/origin/*"
-    git fetch origin gh-pages
+  # Install dependencies
+  pip install zensical nodeenv
+  nodeenv env --node=22.21.1
+  npm ci
 
-    ref=$(git rev-parse HEAD)
-    git checkout gh-pages
-    git pull
-    git merge --no-edit $ref
+  # Remove apps before build
+  rm -rf docs/libs/examples/apps/
+  rm -rf docs/libs/examples/**/*.md
 
-    # clear out old content
-    git rm *.html || true
-    git rm search_index.json || true
-  fi
+  # Create site directory
+  npm run build
 
-  ./scripts/build
+  # Copy well-known for BlueSky
+  cp -R .well-known site/.well-known
 
   if [ -e .git ]; then
+    git checkout gh-pages
+    git rm -rf .
+
+    rm -rf venv/ node_modules/ env/ .cache/ overrides/ docs/ .idea/
+
+    mv site/{.,}* .
+    rmdir site
+
+    # Create CNAME file
+    echo -n "concourse-ci.org" > CNAME
+
+    # Create robots.txt file
+    echo "User-agent: *" > robots.txt
+    echo -n "Disallow: /single-page.html" >> robots.txt
+
     git add -A
     git commit --allow-empty -m "build"
   fi

ci/build

@@ -4,7 +4,8 @@ platform: linux
 image_resource:
   type: registry-image
   source:
-    repository: 3.14-alpine3.21
+    repository: python
+    tag: 3.14-alpine3.21
 
 inputs:
   - name: docs

ci/build.yml

@@ -1,5 +1,6 @@
 ---
 title: Concourse
+template: home.html
 hide:
   - navigation
   - toc

docs/index.md

@@ -0,0 +1,178 @@
+
+body {
+    background-image: url('../images/concourse-pattern.svg');
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    background-size: cover;
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-attachment: fixed;
+}
+
+.centered-section {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+}
+
+.side-by-side {
+    background-color: rgba(
+            255,
+            255,
+            255,
+            0.2
+    );
+    border-radius: 8px;
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.9);
+    text-align: center;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-gap: 0 4%;
+    padding: 3em 1.5em;
+    margin-left: 1.5em;
+    margin-right: 1.5em;
+}
+
+.side-by-side .segment {
+    display: flex;
+    flex-direction: column;
+    text-align: left;
+    padding: 10px;
+}
+
+.splash-intro {
+    color: #efeeee;
+}
+
+.splash-intro p {
+    font-size: 1rem;
+}
+
+.splash-intro h1 {
+    font-size: xx-large;
+    font-weight: bold;
+    color: #efeeee;
+}
+
+.splash-intro > * > .text-links {
+    text-decoration: underline !important;
+    color: #efeeee;
+}
+
+.splash-intro > * > .text-links:hover {
+    color: #efeeee;
+}
+
+.quick-start {
+    width: fit-content;
+    flex-grow: 0;
+}
+
+.splash-downloads {
+    background: #2a2929;
+    justify-self: stretch;
+    position: relative;
+}
+
+.split-header {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+}
+
+/* The container <div> - needed to position the dropdown content */
+.dropdown {
+    position: absolute;
+    display: inline-block;
+}
+
+/* Dropdown Content (Hidden by Default) */
+.dropdown-content {
+    display: none;
+    position: absolute;
+    background-color: #f1f1f1;
+    min-width: 160px;
+    z-index: 1;
+}
+
+/* Links inside the dropdown */
+.dropdown-content a {
+    color: black;
+    padding: 12px 16px;
+    text-decoration: none;
+    display: block;
+}
+
+/* Change color of dropdown links on hover */
+.dropdown-content a:hover {
+    background-color: #ddd
+}
+
+/* Show the dropdown menu on hover */
+.dropdown:hover .dropdown-content {
+    display: block;
+}
+
+/* Change the background color of the dropdown button when the dropdown content is shown */
+.md-button.download-dropdown-btn:hover {
+    border-left: 1px solid white
+}
+
+.download-btn, .download-dropdown-btn {
+    height: 3em;
+}
+
+.download-dropdown-btn {
+    width: fit-content;
+}
+
+.md-button.download-btn {
+    border-radius: 1em 0 0 1em;
+}
+
+.md-button.download-dropdown-btn {
+    border-radius: 0 1em 1em 0;
+    border-left: 1px solid white
+}
+
+.download-ctr {
+    display: grid;
+    grid-template-columns: 0.75fr 1.25fr;
+}
+
+.std-flex-box {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0.5em;
+}
+
+.std-flex-box > div > .tool-select {
+    width: 17em;
+    height: 2em;
+}
+
+#release-text {
+    margin-top: 0;
+    margin-bottom: 0;
+}
+
+.splash-split {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    height: 100%;
+    margin: 1.5em 1em;
+    color: white;
+}
+
+@media screen and (max-width: 1219px) { /* Example breakpoint for tablets */
+    .side-by-side, .download-ctr {
+        grid-template-columns: 1fr; /* Two equal columns */
+    }
+}
+