Added CodeEmbed component to embed code snippets in markdowns

docs/src/components/CodeEmbed/index.js

@@ -1,5 +1,82 @@
+// import React, { useState, useEffect } from 'react';
+// import CodeBlock from '@theme/CodeBlock';
+// import Icon from '@site/src/components/Icon';
+
+
+// const CodeEmbed = ({ src }) => {
+//     const [code, setCode] = useState('');
+//     const [loading, setLoading] = useState(true);
+//     const [error, setError] = useState(null);
+
+//     useEffect(() => {
+//         let isMounted = true;
+
+//         const fetchCodeFromUrl = async (url) => {
+//             if (!isMounted) return;
+
+//             setLoading(true);
+//             setError(null);
+
+//             try {
+//                 const response = await fetch(url);
+//                 if (!response.ok) {
+//                     throw new Error(`HTTP error! status: ${response.status}`);
+//                 }
+//                 const data = await response.text();
+//                 if (isMounted) {
+//                     setCode(data);
+//                 }
+//             } catch (err) {
+//                 console.error('Failed to fetch code:', err);
+//                 if (isMounted) {
+//                     setError(err);
+//                     setCode(`// Failed to load code from ${url}\n// ${err.message}`);
+//                 }
+//             } finally {
+//                 if (isMounted) {
+//                     setLoading(false);
+//                 }
+//             }
+//         };
+
+//         if (src) {
+//             fetchCodeFromUrl(src);
+//         }
+
+//         return () => {
+//             isMounted = false;
+//         };
+//     }, [src]);
+
+//     const githubUrl = src ? src.replace('https://raw.githubusercontent.com', 'https://github.com').replace('/refs/heads/', '/blob/') : null;
+//     const fileName = src ? src.substring(src.lastIndexOf('/') + 1) : null;
+
+//     return (
+//         loading ? (
+//             <div>Loading code...</div>
+//         ) : error ? (
+//             <div>Error: {error.message}</div>
+//         ) : (
+//             <div style={{ backgroundColor: 'transparent', padding: '0px', borderRadius: '5px' }}>
+//                 <div style={{ textAlign: 'right' }}>
+//                     {githubUrl && (
+//                         <a href={githubUrl} target="_blank" rel="noopener noreferrer" style={{ paddingRight: '15px', color: 'gray', fontSize: '0.8em', fontStyle: 'italic', display: 'inline-flex', alignItems: 'center' }}>
+//                             View on GitHub
+//                             <Icon icon="mdi:github" height="48" />
+//                         </a>
+//                     )}
+//                 </div>
+//                 <CodeBlock title={fileName} className="language-java">{code}</CodeBlock>
+//             </div>
+//         )
+//     );
+// };
+
+// export default CodeEmbed;
 import React, { useState, useEffect } from 'react';
 import CodeBlock from '@theme/CodeBlock';
+import Icon from '@site/src/components/Icon';
+
 
 const CodeEmbed = ({ src }) => {
     const [code, setCode] = useState('');
@@ -49,21 +126,42 @@ const CodeEmbed = ({ src }) => {
     const githubUrl = src ? src.replace('https://raw.githubusercontent.com', 'https://github.com').replace('/refs/heads/', '/blob/') : null;
     const fileName = src ? src.substring(src.lastIndexOf('/') + 1) : null;
 
+    const title = (
+        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+            <a
+                href={githubUrl}
+                target="_blank"
+                rel="noopener noreferrer"
+                style={{
+                    color: 'gray',
+                    textDecoration: 'none',
+                }}
+                onMouseOver={e => {
+                    e.target.style.textDecoration = 'underline';
+                }}
+                onMouseOut={e => {
+                    e.target.style.textDecoration = 'none';
+                }}
+            >
+                <span>{fileName}</span>
+            </a>
+            {githubUrl && (
+                <a href={githubUrl} target="_blank" rel="noopener noreferrer" style={{ color: 'gray', fontSize: '0.9em', fontStyle: 'italic', display: 'inline-flex', alignItems: 'center' }}>
+                    View on GitHub
+                    <Icon icon="mdi:github" height="1em" />
+                </a>
+            )}
+        </div>
+    );
+
     return (
         loading ? (
             <div>Loading code...</div>
         ) : error ? (
             <div>Error: {error.message}</div>
         ) : (
-            <div style={{ backgroundColor: '#f5f5f5', padding: '0px', borderRadius: '5px' }}>
-                <div style={{ textAlign: 'right' }}>
-                    {githubUrl && (
-                        <a href={githubUrl} target="_blank" rel="noopener noreferrer" style={{ paddingRight: '15px', color: 'gray', fontSize: '0.8em', fontStyle: 'italic', display: 'inline-flex', alignItems: 'center' }}>
-                            View on GitHub
-                        </a>
-                    )}
-                </div>
-                <CodeBlock title={fileName} className="language-java">{code}</CodeBlock>
+            <div style={{ backgroundColor: 'transparent', padding: '0px', borderRadius: '5px' }}>
+                <CodeBlock title={title} className="language-java">{code}</CodeBlock>
             </div>
         )
     );

docs/src/components/Icon/index.js

@@ -0,0 +1,9 @@
+// @site/src/components/Icon.js
+import React from 'react';
+import { Icon as IconifyIcon } from '@iconify/react';
+
+const IIcon = ({ icon, color, width = '24', height = '24' }) => (
+  <IconifyIcon icon={icon} color={color} width={width} height={height} />
+);
+
+export default IIcon;

docs/src/css/custom.css

@@ -4,6 +4,8 @@
  * work well for content-centric websites.
  */
 
+ @import 'font-awesome/css/font-awesome.min.css';
+
 /* You can override the default Infima variables here. */
 :root {
     --ifm-color-primary: #2e8555;