add easter egg

jcubic · Mar 25, 2024 · 2a6c49e · 2a6c49e
1 parent ae09583
commit 2a6c49e
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 6 deletions.
diff --git a/docs/src/components/Interpreter/examples.ts b/docs/src/components/Interpreter/examples.ts
@@ -281,6 +281,22 @@ const examples = [
              (else (* n (f (- n 1))))))))
  10)
 ;; ==> 3628800`
+  },
+  {
+    hidden: true,
+    code: `(define-macro (%promisify expr)
+  (let ((resolve (gensym "resolve")))
+    \`(new Promise
+       (lambda (,resolve)
+          ,(append expr (list resolve))))))
+
+(if (null? self.$.terminal.from_ansi)
+    (%promisify ($.getScript "https://cdn.jsdelivr.net/npm/jquery.terminal/js/unix_formatting.js")))
+(if (null? self.qrcode)
+    (%promisify ($.getScript "https://cdn.jsdelivr.net/gh/jcubic/static/js/qrcode.js")))
+(let ((code (%promisify (qrcode.generate "https://tinyurl.com/fxv87gb"))))
+  (term.echo (code.replace #/\\[47m/g "[30;47m"))
+  #void)`
   }
 ];
 

diff --git a/docs/src/components/Interpreter/index.tsx b/docs/src/components/Interpreter/index.tsx
@@ -1,5 +1,7 @@
 import { useLayoutEffect, useRef, useState, MouseEvent, CSSProperties } from 'react';
 import Markdown from 'react-markdown';
+import clsx from 'clsx';
+
 import useIsBrowser from '@docusaurus/useIsBrowser';
 import Head from '@docusaurus/Head';
 import useScripts from '@site/src/hooks/useScripts';
@@ -49,9 +51,9 @@ export default function Interpreter(): JSX.Element {
     return destroyTerminal;
   }, []);
 
-  function onSnippetRun() {
+  function execSnippet(selector = '.example:visible') {
     const $ = globalThis.jQuery;
-    const code = $('.example:visible').text();
+    const code = $(selector).text();
     const term = $('.term').terminal();
     term.echo(term.get_prompt(), { formatters: false });
     term.exec(code, true);
@@ -144,11 +146,14 @@ export default function Interpreter(): JSX.Element {
           </div>
         </div>
         <div className="examples terminal-external">
-          <button className="run" onClick={onSnippetRun}>run</button>
+          <div className="egg">
+            <button onClick={() => execSnippet('li.hidden .example')}>π</button>
+          </div>
+          <button className="run" onClick={() => execSnippet()}>run</button>
           <ul className="list">
             {examples.map((example, index) => {
               return (
-                <li key={index} className={index === activeSnippet ? 'active' : undefined}>
+                <li key={index} className={clsx({active: index === activeSnippet, hidden: example.hidden})}>
                   <div className="example">
                     <CodeBlock language="scheme" className="lips">
                       {example.code}
@@ -160,9 +165,9 @@ export default function Interpreter(): JSX.Element {
             })}
           </ul>
           <ul className="pagination">
-            {examples.map((_, index) => {
+            {examples.map((example, index) => {
               return (
-                <li key={index} className={index === activeSnippet ? 'active' : undefined}>
+                <li key={index} className={clsx({active: index === activeSnippet, hidden: example.hidden})}>
                   <a href="#" onClick={makeChangeSnippet(index)}>{ index + 1 }</a>
                 </li>
               );

diff --git a/docs/src/components/Interpreter/styles.css b/docs/src/components/Interpreter/styles.css
@@ -87,6 +87,25 @@ body.full-screen .term {
     top: 0;
     margin: 0;
 }
+.intro .egg {
+    position: absolute;
+    right: 0;
+    top: 0;
+    z-index: 1000;
+}
+.intro .egg button {
+    cursor: pointer;
+    border-radius: 50%;
+    border: 0;
+    height: 20px;
+    width: 20px;
+    padding: 0;
+    background: none;
+}
+.intro .egg button:hover {
+    background: #E79E2D;
+    font-weight: bold;
+}
 .intro .actions .icon,
 .top-bar .icons a {
     background-image: url(/img/icons.svg);