Social card update and fix dark mode as default

docs/assets/stylesheets/extra.css

@@ -0,0 +1,37 @@
+@media screen {
+  [data-md-color-scheme="slate"][data-md-color-primary="bruce"] {
+    --md-typeset-color: #ffffff;
+    --md-default-fg-color--light: #ffffff;
+  }
+}
+
+/* Light mode */
+[data-md-color-primary="bruce"][data-md-color-scheme="default"] {
+  --md-primary-fg-color: rgb(148, 62, 229); /* primary text color */
+  --md-primary-bg-color: #ffffff; /* primary background */
+  --md-default-bg-color: #ffffff; /* page background */
+  --md-typeset-color: rgb(10, 10, 10); /* main text color */
+}
+
+/* Dark mode */
+[data-md-color-primary="bruce"][data-md-color-scheme="slate"] {
+  --md-primary-fg-color: rgb(148, 62, 229);
+  --md-primary-bg-color: #ffffff;
+  --md-default-bg-color: rgb(10, 10, 10);
+  --md-typeset-color: #ffffff;
+}
+
+[data-md-color-accent="bruce"] {
+  --md-accent-fg-color: rgb(148, 62, 229);
+  --md-accent-fg-color--transparent: #7c4dff1a;
+  --md-accent-bg-color: #fff;
+  --md-accent-bg-color--light: #ffffffb3;
+}
+[data-md-color-primary="bruce"] {
+  --md-primary-fg-color: rgb(148, 62, 229);
+  --md-primary-fg-color--light: rgb(148, 62, 229);
+  --md-primary-fg-color--dark: rgb(148, 62, 229);
+  --md-primary-bg-color: #fff;
+  --md-primary-bg-color--light: #ffffffb3;
+  --md-default-bg-color: rgb(10, 10, 10);
+}

docs/index.md

@@ -1,12 +1,12 @@
 # Home
 
-![Bruce](img/bruce_banner.png)
+![Bruce](assets/images/bruce_banner.png)
 
-Test
+---
 
-1. [What Is Bruce?](index.md#what-is-bruce)
-2. [What Is Bruce For?](index.md#what-is-bruce-for)
-3. [FAQ](faq.md)
+* [What Is Bruce?](index.md#what-is-bruce)
+* [What Is Bruce For?](index.md#what-is-bruce-for)
+* [FAQ](faq.md)
 
 ## What Is Bruce?
 

layouts/bruce.yml

@@ -0,0 +1,112 @@
+# -----------------------------------------------------------------------------
+# Configuration
+# -----------------------------------------------------------------------------
+
+# Definitions
+definitions:
+
+  # Site name
+  - &site_name >-
+    {{ config.site_name }}
+
+  # Page title
+  - &page_title >-
+    {%- if layout.title -%}
+      {{ layout.title }}
+    {%- else -%}
+      {{ page.meta.get("title", page.title) }}
+    {%- endif -%}
+
+  # Page title with site name
+  - &page_title_with_site_name >-
+    {%- if not page.is_homepage -%}
+      {{ page.meta.get("title", page.title) }} - {{ config.site_name }}
+    {%- else -%}
+      {{ config.site_name }}
+    {%- endif -%}
+
+  # Page description
+  - &page_description >-
+    {%- if layout.description -%}
+      {{ layout.description }}
+    {%- else -%}
+      {{ page.meta.get("description", config.site_description) | x }}
+    {%- endif -%}
+
+# Meta tags
+tags:
+
+  # Open Graph
+  og:type: website
+  og:title: *page_title_with_site_name
+  og:description: *page_description
+  og:image: "{{ image.url }}"
+  og:image:type: "{{ image.type }}"
+  og:image:width: "{{ image.width }}"
+  og:image:height: "{{ image.height }}"
+  og:url: "{{ page.canonical_url }}"
+
+  # Twitter
+  twitter:card: summary_large_image
+  twitter:title: *page_title_with_site_name
+  twitter:description: *page_description
+  twitter:image: "{{ image.url }}"
+
+# -----------------------------------------------------------------------------
+# Specification
+# -----------------------------------------------------------------------------
+
+# Card size and layers
+size: { width: 1200, height: 630 }
+layers:
+
+  # Background
+  - background:
+      image: docs/assets/images/social_card_background.svg
+
+  # Logo
+  - size: { width: 400, height: 300 }
+    offset: { x: 795, y: 25 }
+    background:
+      image: docs/assets/images/logo_800x600.png
+
+  # Site name
+  - size: { width: 675, height: 100 }
+    offset: { x: 50, y: 35 }
+    typography:
+      content: *site_name
+      color: "#ffffff"
+      font:
+        family: "Roboto"
+        variant: ""
+        style: Bold
+
+  # Page title
+  - size: { width: 675, height: 330}
+    offset: { x: 50, y: 140 }
+    typography:
+      content: *page_title
+      align: start
+      color: "#ffffff"
+      line:
+        amount: 3
+        height: 1
+      font:
+        family: "Roboto"
+        variant: ""
+        style: Bold
+
+  # Page description
+  - size: { width: 1100, height: 120 }
+    offset: { x: 50, y: 480 }
+    typography:
+      content: *page_description
+      align: start
+      color: "#ffffff"
+      line:
+        amount: 3
+        height: 1
+      font:
+        family: "Roboto"
+        variant: ""
+        style: Regular

mkdocs.yml

@@ -1,6 +1,6 @@
 site_name: Bruce Wiki
 site_url: https://wiki.bruce.computer
-site_description: Complete documentation for Bruce - a versatile ESP32 firmware for red team operations, featuring WiFi attacks, RF analysis, RFID tools, and more on M5Stack, Lilygo and many other devices.
+site_description: Documentation for Bruce - a versatile ESP32 firmware for red team operations, featuring WiFi attacks, RF analysis, RFID tools, and more on M5Stack, Lilygo and many other devices.
 repo_url: https://github.com/BruceDevices/firmware
 repo_name: GitHub
 edit_uri: https://github.com/BruceDevices/Wiki/blob/main/docs/
@@ -10,31 +10,29 @@ site_dir: site
 use_directory_urls: true
 
 extra_css:
-  - stylesheets/extra.css
+  - assets/stylesheets/extra.css
 
 theme:
   name: material
   palette:
-    # Light mode (applies if OS prefers light)
-    - scheme: default
+    # Dark mode (default)
+    - scheme: slate
       primary: bruce
       accent: bruce
       toggle:
-        icon: material/weather-night
-        name: Dark
-      media: "(prefers-color-scheme: dark)"
+        icon: material/weather-sunny
+        name: Light
 
-    # Dark mode (applies if OS prefers dark)
-    - scheme: slate
+    # Light mode
+    - scheme: default
       primary: bruce
       accent: bruce
       toggle:
-        icon: material/weather-sunny
-        name: Light
-      media: "(prefers-color-scheme: dark)"
+        icon: material/weather-night
+        name: Dark
 
-  logo: img/logo.png
-  favicon: img/logo.png
+  logo: assets/images/logo.png
+  favicon: assets/images/favicon.png
   features:
     - content.code.copy
     - content.code.select
@@ -74,8 +72,9 @@ plugins:
   - search
   - social:
       enabled: !ENV [CI, false]
-      cards_layout_options:
-        background_color: "rgb(148, 62, 229)"    
+      cards_layout_dir: layouts
+      cards_layout: bruce
+      debug: false
   # - tags:
   #     shadow_tags_suffix: Internal
   #     shadow: false