docs: make Run on Apify buttons more visible

apify · Sep 20, 2023 · 9ae8f13 · 9ae8f13
1 parent 0ef6bb1
commit 9ae8f13
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 7 deletions.
diff --git a/website/roa-loader/index.js b/website/roa-loader/index.js
@@ -27,8 +27,8 @@ async function getHash(source) {
     await new Promise((resolve) => setTimeout(resolve, 100));
 
     if (!res.data || !res.data.encoded) {
-        console.error(res);
-        throw new Error(`Signing failed:' ${inspect(res.error) || 'Unknown error'}`);
+        console.error(`Signing failed:' ${inspect(res.error) || 'Unknown error'}`, res);
+        return 'invalid-token';
     }
 
     return res.data.encoded;

diff --git a/website/src/components/RunnableCodeBlock.jsx b/website/src/components/RunnableCodeBlock.jsx
@@ -30,8 +30,11 @@ Make sure you are importing the code block contents with the roa-loader.`);
 
     return (
         <div className={clsx(styles.container, 'runnable-code-block')}>
-            <Link href={href} className={styles.button} rel="follow">Run on Apify</Link>
-            <CodeBlock {...props} className={clsx(styles.codeBlock, 'code-block')}>
+            <Link href={href} className={styles.button} rel="follow">
+                Run on
+                <svg width="91" height="25" viewBox="0 0 91 25" fill="none" xmlns="http://www.w3.org/2000/svg" className="apify-logo-light alignMiddle_src-theme-Footer-index-module"><path d="M3.135 2.85A3.409 3.409 0 0 0 .227 6.699l2.016 14.398 8.483-19.304-7.59 1.059Z" fill="#97D700"></path><path d="M23.604 14.847 22.811 3.78a3.414 3.414 0 0 0-3.64-3.154c-.077 0-.153.014-.228.025l-3.274.452 7.192 16.124c.54-.67.805-1.52.743-2.379Z" fill="#71C5E8"></path><path d="M5.336 24.595c.58.066 1.169-.02 1.706-.248l12.35-5.211L13.514 5.97 5.336 24.595Z" fill="#FF9013"></path><path d="M33.83 5.304h3.903l5.448 14.623h-3.494l-1.022-2.994h-5.877l-1.025 2.994h-3.384L33.83 5.304Zm-.177 9.032h4.14l-2-5.994h-.086l-2.054 5.994ZM58.842 5.304h3.302v14.623h-3.302V5.304ZM64.634 5.304h10.71v2.7h-7.4v4.101h5.962v2.632h-5.963v5.186h-3.309V5.303ZM82.116 14.38l-5.498-9.076h3.748l3.428 6.016h.085l3.599-6.016H91l-5.56 9.054v5.569h-3.324v-5.548ZM51.75 5.304h-7.292v14.623h3.3v-4.634h3.993a4.995 4.995 0 1 0 0-9.99Zm-.364 7.417h-3.628V7.875h3.627a2.423 2.423 0 0 1 0 4.846Z" className="apify-logo" fill="#000"></path></svg>
+            </Link>
+            <CodeBlock {...props} className={clsx(styles.codeBlock, 'code-block', props.title != null ? 'has-title' : 'no-title')}>
                 { children.code }
             </CodeBlock>
         </div>

diff --git a/website/src/components/RunnableCodeBlock.module.css b/website/src/components/RunnableCodeBlock.module.css
@@ -11,10 +11,15 @@
     color: var(--prism-color);
     border: 1px solid var(--ifm-color-emphasis-300);
     border-radius: var(--ifm-global-radius);
-    opacity: 0.6;
+    opacity: 0.7;
     font-weight: 600;
 }
 
+.button svg {
+    height: 20px;
+    margin-right: -10px;
+}
+
 .button:hover {
     opacity: 1;
     color: var(--prism-color);

diff --git a/website/src/css/custom.css b/website/src/css/custom.css
@@ -418,9 +418,9 @@ html.plugin-typedoc-api .theme-doc-sidebar-menu > li:nth-child(6)::before {
     cursor: pointer;
 }
 
-.runnable-code-block .code-block pre + div {
+.runnable-code-block .code-block.no-title pre + div {
     position: absolute;
-    right: 130px;
+    right: 170px;
     line-height: 28px;
 }
 
@@ -432,3 +432,7 @@ html.plugin-typedoc-api .theme-doc-sidebar-menu > li:nth-child(6)::before {
 .runnable-code-block:hover .code-block button {
     opacity: 0.4;
 }
+
+html[data-theme='dark'] .runnable-code-block svg .apify-logo {
+    fill: #fff;
+}