Add V3 Features to QA

config/settings.py

@@ -227,7 +227,17 @@
 
 # Password validation
 # Only used in production
-AUTH_PASSWORD_VALIDATORS = []
+AUTH_PASSWORD_VALIDATORS = [
+    {
+        "NAME": "django.contrib.auth.password_validation.UserAttributeSimilarityValidator"
+    },
+    {
+        "NAME": "django.contrib.auth.password_validation.MinimumLengthValidator",
+        "OPTIONS": {"min_length": 9},
+    },
+    {"NAME": "django.contrib.auth.password_validation.CommonPasswordValidator"},
+    {"NAME": "django.contrib.auth.password_validation.NumericPasswordValidator"},
+]
 
 # Sessions
 

core/views.py

@@ -1111,10 +1111,39 @@ def get_context_data(self, **kwargs):
         # Install bjam tool user config: https://www.bfgroup.xyz/b2/manual/release/index.html
         cp ./libs/beast/tools/user-config.jam $HOME"""
 
+        INSTALL_CARD_PKG_MANAGERS = [
+            {"label": "Conan", "value": "conan", "command": "conan install boost"},
+            {"label": "Vcpkg", "value": "vcpkg", "command": "vcpkg install boost"},
+        ]
+        INSTALL_CARD_SYSTEM_INSTALL = [
+            {
+                "label": "Ubuntu",
+                "value": "ubuntu",
+                "command": "sudo apt install libboost-all-dev",
+            },
+            {
+                "label": "Fedora",
+                "value": "fedora",
+                "command": "sudo dnf install boost-devel",
+            },
+            {
+                "label": "CentOS",
+                "value": "centos",
+                "command": "sudo yum install boost-devel",
+            },
+            {"label": "Arch", "value": "arch", "command": "sudo pacman -S boost"},
+            {"label": "Homebrew", "value": "homebrew", "command": "brew install boost"},
+        ]
+
         context = super().get_context_data(**kwargs)
         context["code_demo_beast"] = CODE_DEMO_BEAST
         context["code_demo_hello"] = CODE_DEMO_HELLO
         context["code_demo_install"] = CODE_DEMO_INSTALL
+        context["install_card_title"] = (
+            "Install Boost and get started in your terminal."
+        )
+        context["install_card_pkg_managers"] = INSTALL_CARD_PKG_MANAGERS
+        context["install_card_system_install"] = INSTALL_CARD_SYSTEM_INSTALL
         context["popular_terms"] = [
             {"label": "Networking"},
             {"label": "Math"},
@@ -1290,6 +1319,66 @@ def get_context_data(self, **kwargs):
             ],
         }
 
+        context["banner_data"] = {
+            "icon_name": "alert",
+            "banner_message": "This is an older version of Boost and was released in 2017. The <a href='https://www.example.com'>current version</a> is 1.90.0.",
+        }
+
+        context["account_connections_mixed"] = [
+            {
+                "platform": "github",
+                "label": "GitHub",
+                "connected": True,
+                "status_text": "Connected",
+                "action_label": "Manage",
+                "action_url": "#",
+            },
+            {
+                "platform": "google",
+                "label": "Google",
+                "connected": False,
+                "status_text": "Not connected",
+                "action_label": "Connect",
+                "action_url": "#",
+            },
+        ]
+        context["account_connections_all_connected"] = [
+            {
+                "platform": "github",
+                "label": "GitHub",
+                "connected": True,
+                "status_text": "Connected",
+                "action_label": "Manage",
+                "action_url": "#",
+            },
+            {
+                "platform": "google",
+                "label": "Google",
+                "connected": True,
+                "status_text": "Connected",
+                "action_label": "Manage",
+                "action_url": "#",
+            },
+        ]
+        context["account_connections_none_connected"] = [
+            {
+                "platform": "github",
+                "label": "GitHub",
+                "connected": False,
+                "status_text": "Not connected",
+                "action_label": "Connect",
+                "action_url": "#",
+            },
+            {
+                "platform": "google",
+                "label": "Google",
+                "connected": False,
+                "status_text": "Not connected",
+                "action_label": "Connect",
+                "action_url": "#",
+            },
+        ]
+
         latest = Version.objects.most_recent()
         if latest:
             lv = (

flake.nix

@@ -67,6 +67,7 @@
             python313.pkgs.black
             python313.pkgs.isort
             python313.pkgs.pip-tools
+            git
           ];
           # Host system installation workflow goes into the bootstrap justfile target.
           # Project specific installation and execution workflow should go here.

static/css/v3/account-connections.css

@@ -0,0 +1,66 @@
+/*
+    Account Connections Card
+    Shows linked social/OAuth account status with management actions.
+    Extends the base .card component.
+
+    account-connections__items    — vertical list of connection rows
+    account-connections__item     — single connection row (icon + name | status | button)
+    account-connections__platform — icon + platform name group
+    account-connections__platform-icon  — brand icon (16x16)
+    account-connections__platform-name  — platform display name
+    account-connections__status   — connection status text (fills remaining space)
+*/
+
+.account-connections-card {
+  max-width: 696px;
+}
+
+.account-connections__items {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-large, 16px);
+  padding: 0 var(--space-large, 16px);
+  width: 100%;
+  list-style: none;
+  margin: 0;
+}
+
+.account-connections__item {
+  display: flex;
+  align-items: center;
+  gap: var(--space-xlarge, 24px);
+}
+
+.account-connections__platform {
+  display: flex;
+  align-items: center;
+  gap: var(--space-default, 8px);
+  flex-shrink: 0;
+}
+
+.account-connections__platform-icon {
+  width: 16px;
+  height: 16px;
+  flex-shrink: 0;
+  color: var(--color-text-primary, #050816);
+}
+
+.account-connections__platform-name {
+  font-family: var(--font-sans, 'Mona Sans VF'), sans-serif;
+  font-size: var(--font-size-base, 16px);
+  font-weight: var(--font-weight-medium, 500);
+  line-height: var(--line-height-default, 1.2);
+  letter-spacing: var(--letter-spacing-tight, -0.01em);
+  color: var(--color-text-secondary, #585A64);
+  white-space: nowrap;
+}
+
+.account-connections__status {
+  flex: 1 1 0;
+  font-family: var(--font-sans, 'Mona Sans VF'), sans-serif;
+  font-size: var(--font-size-base, 16px);
+  font-weight: var(--font-weight-regular, 400);
+  line-height: var(--line-height-default, 1.2);
+  letter-spacing: var(--letter-spacing-tight, -0.01em);
+  color: var(--color-text-secondary, #585A64);
+}

static/css/v3/animations.css

@@ -0,0 +1,23 @@
+/*
+This animaiton controls the fade out of banners and other items that are hidden after a delay.
+*/
+
+@keyframes fade-out {
+    from {
+        opacity: 1;
+    }
+    to {
+        opacity: 0;
+        display: none;
+    }
+}
+
+.banner--fade {
+    /*
+    Set the --fade-delay variable on the element with the class to control
+    how quickly the element is hidden
+    */
+    animation: fade-out 1s var(--fade-delay, 0ms) forwards;
+    animation-timing-function: ease;
+    transition-behavior: allow-discrete;
+}

static/css/v3/banner.css

@@ -0,0 +1,39 @@
+.banner {
+    width: 100%;
+    display: flex;
+    padding: var(--space-default, 8px) var(--space-large, 16px);
+    justify-content: center;
+    align-items: center;
+    gap: var(--space-large, 16px);
+
+    border-radius: var(--border-radius-l, 8px);
+    background: var(--color-surface-brand-accent-default, #FFA000);
+}
+
+.banner__message {
+    color: var(--color-text-on-accent, #050816);
+
+    /* Sans/Desktop/Regular/XS/Tight */
+    font-family: var(--font-sans, "Mona Sans VF");
+    font-size: var(--font-size-xs, 12px);
+    font-weight: var(--font-weight-regular);
+    line-height: var(--line-height-tight);
+    /* 12px */
+    letter-spacing: -0.12px;
+}
+
+.banner__message a {
+    text-decoration-line: underline;
+    text-decoration-style: solid;
+    text-decoration-skip-ink: auto;
+    text-decoration-thickness: auto;
+    text-underline-offset: auto;
+}
+
+.banner__icon {
+    width: 16px;
+    height: 16px;
+    flex-shrink: 0;
+    aspect-ratio: 1/1;
+    fill: var(--color-text-on-accent);
+}

static/css/v3/buttons.css

@@ -63,6 +63,7 @@
 }
 
 .btn-secondary {
+  background: var(--color-surface-weak);
   border-color: var(--color-stroke-strong);
   color: var(--color-text-primary);
 }

static/css/v3/code-block.css

@@ -1,6 +1,4 @@
-
-
- :root {
+:root {
   --code-block-bg: var(--color-bg-secondary);
   --code-block-border: var(--color-border);
   --code-block-text: var(--color-syntax-text);
@@ -16,7 +14,6 @@
 
 .code-block--standalone {
   background: var(--code-block-bg-standalone);
-  border: 1px dashed var(--code-block-border-standalone);
   overflow: visible;
 }
 
@@ -32,13 +29,13 @@
 
 .code-block--white-bg {
   background: var(--color-bg-secondary);
+  border: 1px solid var(--code-block-border);
 }
 
 .code-block {
   position: relative;
   margin: 0;
   padding: var(--space-card);
-  border: 1px solid var(--code-block-border);
   border-radius: var(--border-radius-l);
   overflow: auto;
   font-family: var(--font-code);
@@ -68,13 +65,7 @@
   overflow-wrap: break-word;
 }
 
-.code-block__inner code{
-  font-weight: 500;
-  color: var(--color-syntax-text) !important;
-  white-space: break-spaces !important;
-}
-
-.code-block__inner code{
+.code-block__inner code {
   font-weight: 500;
   color: var(--color-syntax-text) !important;
   white-space: break-spaces !important;
@@ -153,14 +144,15 @@ html.dark .code-block-card--grey {
 }
 
 .code-block-card__description {
-  padding: var(--space-card) var(--space-card) var(--space-default) var(--space-card);
+  padding: var(--space-card) var(--space-card) var(--space-default)
+    var(--space-card);
   margin: 0 0 var(--space-medium);
   font-size: var(--font-size-medium);
   line-height: var(--line-height-relaxed);
   color: var(--color-text-secondary);
 }
 
-.code-block-card  .code-block-card__description{
+.code-block-card .code-block-card__description {
   border-top: 1px solid var(--color-border);
 }
 

static/css/v3/components.css

@@ -1,27 +1,33 @@
-@import './fonts.css';
-@import './foundations.css';
-@import './button-tooltip.css';
-@import './post-cards.css';
-@import './buttons.css';
-@import './avatar.css';
-@import './carousel-buttons.css';
-@import './v3-examples-section.css';
-@import './header.css';
-@import './footer.css';
-@import './forms.css';
-@import './testimonial-card.css';
-@import './card.css';
-@import './event-cards.css';
-@import './content.css';
-@import './why-boost-cards.css';
-@import './stats.css';
-@import './category-tags.css';
-@import './code-block.css';
-@import './wysiwyg-editor.css';
-@import './search-card.css';
-@import './create-account-card.css';
-@import './privacy-policy.css';
-@import './library-intro-card.css';
-@import './learn-cards.css';
-@import './terms-of-use.css';
-@import './thread-archive-card.css';
+@import "./fonts.css";
+@import "./foundations.css";
+@import "./button-tooltip.css";
+@import "./post-cards.css";
+@import "./buttons.css";
+@import "./avatar.css";
+@import "./carousel-buttons.css";
+@import "./v3-examples-section.css";
+@import "./header.css";
+@import "./footer.css";
+@import "./forms.css";
+@import "./testimonial-card.css";
+@import "./card.css";
+@import "./event-cards.css";
+@import "./content.css";
+@import "./why-boost-cards.css";
+@import "./stats.css";
+@import "./category-tags.css";
+@import "./code-block.css";
+@import "./wysiwyg-editor.css";
+@import "./search-card.css";
+@import "./create-account-card.css";
+@import "./privacy-policy.css";
+@import "./library-intro-card.css";
+@import "./learn-cards.css";
+@import "./terms-of-use.css";
+@import "./thread-archive-card.css";
+@import "./tab.css";
+@import "./install-card.css";
+@import "./banner.css";
+@import "./animations.css";
+@import "./account-connections.css";
+@import "./dialog.css";