add workflow links to mat3ra

Author: pranabdas

docs/hands-on/scf.mdx

@@ -36,6 +36,10 @@ lines can be added with lines starting with a `!` like in Fortran. Also,
 parameter names are not case-sensitive, i.e., `&control` and `&CONTROL` are the
 same.
 
+import Mat3raAdmonition from '../../src/apps/mat3ra';
+
+<Mat3raAdmonition url="https://platform.mat3ra.com/pranab/projects/pranab-default/jobs/NwxTtQEqC2ARJGLXA"/>
+
 import CodeBlock from '@theme/CodeBlock';
 import pw_scf_silicon_in from '!!raw-loader!/src/silicon/pw.scf.silicon.in';
 

src/apps/mat3ra.jsx

@@ -0,0 +1,29 @@
+import React from "react";
+import Admonition from "@theme/Admonition";
+import styles from "./styles.module.css";
+
+const Mat3raAdmonition = ({ url }) => {
+  return (
+    <Admonition type="tip" title="MAT3RA.COM">
+      <p>
+        Review, clone, modify, and run below calculation on{" "}
+        <Mat3raButton url={url} />
+      </p>
+      <p style={{ color: "grey", fontSize: "0.9em" }}>
+        ✻ <b>Mat3ra</b> is a cloud platform to organize, run, share and
+        collaborate on your high performance computing projects.{" "}
+        <a href="https://mat3ra.com">Learn more</a>.
+      </p>
+    </Admonition>
+  );
+};
+
+export const Mat3raButton = ({ url }) => {
+  return (
+    <a href={url} target="_blank">
+      <button className={styles.mat3ra}></button>
+    </a>
+  );
+};
+
+export default Mat3raAdmonition;

src/apps/styles.module.css

@@ -0,0 +1,30 @@
+.mat3ra {
+  appearance: none;
+  border: 1px solid rgba(27, 31, 35, 0.15);
+  border-radius: 6px;
+  box-shadow: rgba(27, 31, 35, 0.1) 0 1px 0;
+  box-sizing: border-box;
+  color: #fff;
+  cursor: pointer;
+  display: inline-block;
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 18px;
+  padding: 4px 12 px;
+  position: relative;
+  text-align: center;
+  text-decoration: none;
+  user-select: none;
+  -webkit-user-select: none;
+  touch-action: manipulation;
+  vertical-align: middle;
+  white-space: nowrap;
+  background: url('../../static/img/mat3ra-logo.svg') no-repeat;
+  height: 24px;
+  width: 94px;
+  background-color: #3f2a98;
+}
+
+.mat3ra:hover {
+  background-color: purple;
+}