(superset) 01/02: feat(docs): add custom resources admonition for additional links

[ru...@apache.org]

This is an automated email from the ASF dual-hosted git repository.

rusackas pushed a commit to branch feat/docs-resources-admonition
in repository https://gitbox.apache.org/repos/asf/superset.git

commit 7e016160a57409646e4b0eb439355f7b04d52a24
Author: Evan Rusackas <ev...@rusackas.com>
AuthorDate: Thu Dec 18 16:57:47 2025 -0800

    feat(docs): add custom resources admonition for additional links
    
    Add a new :::resources admonition type for highlighting additional
    resources like videos, blog posts, and external documentation throughout
    the docs site.
    
    - Create custom Admonition/Types.js with bookmark icon
    - Add purple/violet styling with dark mode support
    - Add example usage in quickstart.mdx
    
    Usage:
    ```mdx
    :::resources
    - [Video: Tutorial](https://...)
    - [Blog: Best Practices](https://...)
    :::
    ```
    
    🤖 Generated with [Claude Code](https://claude.com/claude-code)
    
    Co-Authored-By: Claude Opus 4.5 <no...@anthropic.com>
---
 docs/docs/quickstart.mdx           |  6 ++++
 docs/src/styles/custom.css         | 39 +++++++++++++++++++++++
 docs/src/theme/Admonition/Types.js | 63 ++++++++++++++++++++++++++++++++++++++
 3 files changed, 108 insertions(+)

diff --git a/docs/docs/quickstart.mdx b/docs/docs/quickstart.mdx
index 4e23b422e9..6e339b6860 100644
--- a/docs/docs/quickstart.mdx
+++ b/docs/docs/quickstart.mdx
@@ -80,3 +80,9 @@ From this point on, you can head on to:
 - [Installing on Kubernetes](/docs/installation/kubernetes/)
 
 Or just explore our [Documentation](https://superset.apache.org/docs/intro)!
+
+:::resources
+- [Video: Superset in 2 Minutes](https://www.youtube.com/watch?v=AqousXQ7YHw)
+- [Blog: Getting Started with Apache Superset](https://preset.io/blog/apache-superset-quick-start/)
+- [Tutorial: Creating Your First Dashboard](/docs/using-superset/creating-your-first-dashboard)
+:::
diff --git a/docs/src/styles/custom.css b/docs/src/styles/custom.css
index 28095185e8..17f89d016f 100644
--- a/docs/src/styles/custom.css
+++ b/docs/src/styles/custom.css
@@ -134,3 +134,42 @@ ul.dropdown__menu svg {
   --ifm-font-base-color: #bbb5ac;
   --ifm-border-color: #797063;
 }
+
+/* Custom "resources" admonition for additional resources/links */
+.alert--resources {
+  --ifm-alert-background-color: #f3e8ff;
+  --ifm-alert-border-color: #a855f7;
+  --ifm-alert-foreground-color: #6b21a8;
+  background-color: var(--ifm-alert-background-color);
+  border-left: 5px solid var(--ifm-alert-border-color);
+}
+
+.alert--resources .admonition-heading h5 {
+  color: var(--ifm-alert-foreground-color);
+}
+
+.alert--resources .admonition-icon svg {
+  fill: var(--ifm-alert-foreground-color);
+  stroke: var(--ifm-alert-foreground-color);
+}
+
+/* Resources admonition - dark mode */
+[data-theme='dark'] .alert--resources {
+  --ifm-alert-background-color: #3b0764;
+  --ifm-alert-border-color: #a855f7;
+  --ifm-alert-foreground-color: #e9d5ff;
+}
+
+/* Style links within resources admonition */
+.alert--resources a {
+  color: #7c3aed;
+  text-decoration: none;
+}
+
+.alert--resources a:hover {
+  text-decoration: underline;
+}
+
+[data-theme='dark'] .alert--resources a {
+  color: #c4b5fd;
+}
diff --git a/docs/src/theme/Admonition/Types.js b/docs/src/theme/Admonition/Types.js
new file mode 100644
index 0000000000..5434cf7a2f
--- /dev/null
+++ b/docs/src/theme/Admonition/Types.js
@@ -0,0 +1,63 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import React from 'react';
+import DefaultAdmonitionTypes from '@theme-original/Admonition/Types';
+
+function ResourcesIcon() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="16"
+      height="16"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      {/* Bookmark/link icon */}
+      <path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z" />
+    </svg>
+  );
+}
+
+function ResourcesAdmonition(props) {
+  return (
+    <div className="admonition admonition-resources alert alert--resources">
+      <div className="admonition-heading">
+        <h5>
+          <span className="admonition-icon">
+            <ResourcesIcon />
+          </span>
+          {props.title || 'Additional Resources'}
+        </h5>
+      </div>
+      <div className="admonition-content">{props.children}</div>
+    </div>
+  );
+}
+
+const AdmonitionTypes = {
+  ...DefaultAdmonitionTypes,
+  resources: ResourcesAdmonition,
+};
+
+export default AdmonitionTypes;