From 8e64c3aeb3f486f217afe1be6d3a232f3dd1233c Mon Sep 17 00:00:00 2001
From: razorblade23 <josip.vivo.cubric@gmail.com>
Date: Wed, 26 Aug 2026 09:40:58 +0200
Subject: [PATCH] Added a new admonition component - explore (learn more)

---
 docusaurus.config.js          |  3 ++
 src/css/custom.css            | 62 +++++++++++++++++++++++++++++++++++
 src/theme/Admonition/index.js | 17 ++++++++++
 3 files changed, 82 insertions(+)
 create mode 100644 src/theme/Admonition/index.js

diff --git a/docusaurus.config.js b/docusaurus.config.js
index a887b53..72a785c 100644
--- a/docusaurus.config.js
+++ b/docusaurus.config.js
@@ -56,6 +56,9 @@ const config = {
           path: CURRICULUM_PATH,
           routeBasePath: '/lessons', 
           sidebarPath: require.resolve('./sidebars.js'),
+          admonitions: {
+            keywords: ['explore'],
+          },
           editUrl: ({ docPath }) => {
              return `https://github.com/razorblade23/the-python-ledger/edit/main/curriculum/${docPath}`;
            },
diff --git a/src/css/custom.css b/src/css/custom.css
index 68f3333..65e2733 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -202,3 +202,65 @@ kbd:hover {
   transform: translateY(1px);
   box-shadow: 0 1px 0 var(--ifm-color-emphasis-300);
 }
+
+/* ==========================================================================
+   5. EXPLORE ADMINITION CSS
+   ========================================================================== */
+
+/* Base Light Theme */
+:root {
+  --ifm-color-admonition-explore: #7c3aed;
+  --ifm-color-admonition-explore-background: rgba(124, 58, 237, 0.08);
+}
+
+/* Dark Mode Enhancements */
+[data-theme='dark'] .alert--explore {
+  /* High contrast neon purple accent line */
+  border-left-color: #d8b4fe !important; 
+  border-left-width: 4px;
+
+  /* Richer, distinctly visible purple container background */
+  background-color: rgba(168, 85, 247, 0.22) !important;
+
+  /* Subtle border & outer glow to separate from page background */
+  border-top: 1px solid rgba(216, 180, 254, 0.2);
+  border-right: 1px solid rgba(216, 180, 254, 0.2);
+  border-bottom: 1px solid rgba(216, 180, 254, 0.2);
+  box-shadow: 0 4px 20px rgba(168, 85, 247, 0.15);
+}
+
+/* Header Text & Icon Contrast */
+[data-theme='dark'] .alert--explore .admonition-heading h5,
+[data-theme='dark'] .alert--explore .admonition-icon {
+  color: #e9d5ff !important;
+  fill: none !important;
+}
+
+/* Fix for broken icon wrapper square */
+.alert--explore .admonition-icon {
+  background: transparent !important;
+  border: none !important;
+}
+
+/* Admonition Layout & Icon Fixes */
+.alert--explore {
+  border-left-width: 4px;
+  border-left-color: var(--ifm-color-admonition-explore);
+  background-color: var(--ifm-color-admonition-explore-background);
+}
+
+[data-theme='dark'] .alert--explore {
+  /* Subtle glow to separate it from dark page backgrounds */
+  box-shadow: 0 0 12px rgba(192, 132, 252, 0.08);
+}
+
+/* Target Header & Icon Styling */
+.alert--explore .admonition-heading h5,
+.alert--explore .admonition-icon {
+  color: var(--ifm-color-admonition-explore);
+}
+
+.alert--explore .admonition-icon svg {
+  stroke: var(--ifm-color-admonition-explore);
+  fill: none;
+}
\ No newline at end of file
diff --git a/src/theme/Admonition/index.js b/src/theme/Admonition/index.js
new file mode 100644
index 0000000..ef94e22
--- /dev/null
+++ b/src/theme/Admonition/index.js
@@ -0,0 +1,17 @@
+import React from 'react';
+import Admonition from '@theme-original/Admonition';
+
+export default function AdmonitionWrapper(props) {
+  if (props.type === 'explore') {
+    return (
+      <Admonition
+        {...props}
+        type="info"
+        className={`alert--explore ${props.className || ''}`}
+        icon="📚"
+        title={props.title ?? 'Learn more'}
+      />
+    );
+  }
+  return <Admonition {...props} />;
+}
\ No newline at end of file