make use of inline styles mdx compatible

Signed-off-by: Lee Calcote <lee.calcote@layer5.io>

Author: leecalcote

fix-mdx-styles.py

@@ -0,0 +1,135 @@
+#!/usr/bin/env python3
+"""
+fix-mdx-styles.py – Perfect JSX style conversion
+Fixes:
+  • style="width: 100%" → style={{ width: "100%" }}
+  • style="margin: 2rem" → style={{ margin: "2rem" }}
+  • Handles percentages, px, rem, colors, var(), calc(), etc.
+  • No extra spaces inside {{ }}
+  • Works with symlinks and large repos (Layer5 tested)
+"""
+
+import re
+import sys
+from pathlib import Path
+
+DRY_RUN = "--dry" in sys.argv
+VERBOSE = "--verbose" in sys.argv or "-v" in sys.argv
+
+
+def css_value_needs_quotes(value: str) -> bool:
+    """
+    Return True if the CSS value must be wrapped in quotes in JSX.
+    Examples that DO need quotes: 100%, 2rem, center, relative, "some text"
+    Examples that DO NOT: 42, 3.14, #fff, var(--color), calc(100% - 20px)
+    """
+    value = value.strip()
+
+    # These are safe without quotes
+    if re.match(r"^(\d+\.?\d*|\.\d+)(px|rem|em|%|vh|vw|deg|grad|rad|turn|s|ms)?$", value, re.I):
+        return True  # 100%, 16px, 2.5rem → needs quotes!
+    if re.match(r"^(#|rgb|hsl|var\(|calc\(|url\(|inherit|initial|unset|transparent|none|auto)", value, re.I):
+        return False
+    if value.isdigit():
+        return False
+
+    # pure numbers like flex: 1
+    return True  # everything else: center, relative, "flex", etc.
+
+
+def css_to_jsx(css: str) -> str:
+    css = css.strip()
+    if not css:
+        return "{}"
+    if "{{" in css or "}}" in css:
+        return css
+
+    rules = [r.strip() for r in css.split(";") if r.strip()]
+    entries = []
+
+    for rule in rules:
+        if ":" not in rule:
+            continue
+        key, val = rule.split(":", 1)
+        key = key.strip()
+        val = val.strip().rstrip(";").strip()
+        if not key:
+            continue
+
+        # kebab → camelCase
+        key = re.sub(r"-([a-zA-Z])", lambda m: m.group(1).upper(), key)
+
+        # Quote only when necessary — but % values ALWAYS need quotes
+        if css_value_needs_quotes(val):
+            val = f'"{val.replace('"', '\\"')}"'
+
+        entries.append(f"{key}: {val}")
+
+    return "{ " + ", ".join(entries) + " }" if entries else "{}"
+
+
+def fix_file(filepath: Path) -> tuple[bool, int]:
+    try:
+        text = filepath.read_text(encoding="utf-8")
+    except Exception as e:
+        print(f"Skipping {filepath}: {e}")
+        return False, 0
+
+    def repl(match):
+        css_content = match.group(2)
+        jsx_obj = css_to_jsx(css_content)
+        return f"style={{{jsx_obj}}}"
+
+    new_text, count = re.subn(
+        r'style\s*=\s*(["\'])(.+?)\1',
+        repl,
+        text,
+        flags=re.DOTALL
+    )
+
+    if count > 0 and new_text != text:
+        if not DRY_RUN:
+            filepath.write_text(new_text, encoding="utf-8")
+        return True, count
+    return False, 0
+
+
+def safe_path(p: Path) -> str:
+    try:
+        return p.relative_to(Path.cwd()).as_posix()
+    except ValueError:
+        return p.as_posix()
+
+
+def main():
+    root = Path(".")
+    mdx_files = list(root.rglob("*.mdx"))
+
+    print(f"Scanning {len(mdx_files)} .mdx files...\n")
+
+    changed_files = 0
+    total_fixes = 0
+
+    for file in sorted(mdx_files):
+        changed, fixes = fix_file(file)
+        if changed:
+            changed_files += 1
+            total_fixes += fixes
+            status = "(dry run)" if DRY_RUN else "FIXED"
+            print(f"{status} → {safe_path(file)} ({fixes} style(s))")
+
+    print("\n" + "="*60)
+    print("Conversion Complete!")
+    print(f"   Files scanned  : {len(mdx_files)}")
+    print(f"   Files changed  : {changed_files}")
+    print(f"   Style fixes    : {total_fixes}")
+
+    if DRY_RUN:
+        print("\n   DRY RUN — no files were modified.")
+        print("   Run without --dry to apply changes.")
+    else:
+        print("\n   All style attributes now use perfect JSX syntax!")
+
+
+if __name__ == "__main__":
+    main()

src/sections/Community/Web-based-from/index.js

@@ -205,22 +205,26 @@ const WebBasedForm = () => {
         <div className="center">
           <div className={role === "Contributor" ? "option active" : "option"} onClick={() => {
             setRole("Contributor");
-          }}>
+          }}
+          >
             I'm here as a Contributor
           </div>
           <div className={role === "Developer" ? "option active" : "option"} onClick={() => {
             setRole("Developer");
-          }}>
+          }}
+          >
             I'm here as a User
           </div>
           <div className={role === "User" ? "option active" : "option"} onClick={() => {
             setRole("User");
-          }}>
+          }}
+          >
             I'm here as a User and Contibutor
           </div>
           <div className={role === "Bystander" ? "option active" : "option"} onClick={() => {
             setRole("Bystander");
-          }}>
+          }}
+          >
             I'm here as a Bystander <br /><small>(here to learn and absorb passively)</small>
           </div>
           <br /><br />