Rename Recho to Recho Notebook (#172)

* Update API reference for recho.inspect (#169)

* Rename to recho notebook

* Update README

* Update preview image

* Rename in docs

* Update title

* route /notebooks -> /works

* Update nav header

* Add prefix /notebook

* Fix format

* Add runtime=edge back

* Deploy with vercel

Author: pearmini

CONTRIBUTING.md

@@ -1,6 +1,6 @@
-# Recho - Contributing
+# Recho Notebook - Contributing
 
-Recho is open source and released under the [ISC license](/LICENCE). You are welcome to contribute in different ways: open a [pull request](https://github.com/recho-dev/recho/pulls), participate in [issues](https://github.com/recho-dev/recho/issues) and [discussions](https://github.com/recho-dev/recho/discussions) or star this project!
+Recho Notebook is open source and released under the [ISC license](/LICENCE). You are welcome to contribute in different ways: open a [pull request](https://github.com/recho-dev/recho/pulls), participate in [issues](https://github.com/recho-dev/recho/issues) and [discussions](https://github.com/recho-dev/recho/discussions) or star this project!
 
 ## Sharing Examples
 
@@ -75,4 +75,4 @@ After that, run `npm run test` to generate the snapshot file for this test case,
 
 ## Website Development
 
-If you want to contribute to the [website](https://recho.dev/), run `npm run app:dev` to open the development server. After finishing development, run `npm run test` to make sure everything works as expected.
+If you want to contribute to the [website](https://recho.dev/notebook), run `npm run app:dev` to open the development server. After finishing development, run `npm run test` to make sure everything works as expected.

README.md

@@ -1,41 +1,41 @@
-# Recho: Reactive Echo
+# Recho Notebook
 
-![preview](/public/news/a-ligter-way-to-code-with-creativity.webp)
+![preview](./img/preview.png)
 
 > We want to live in the editor forever. — [Luyu Cheng](https://luyu.computer/)
 
-[**Recho**](https://recho.dev/) is a free, [open-source](/LICENCE), light environment for learning and exploration. It introduces a _plain code format_ for notebooks — echoing output inline as comments for live, in-situ coding with instant feedback. Built on vanilla JavaScript and the reactive model of [Observable Notebook Kit](https://observablehq.com/notebook-kit/), Recho lets developers, artists, and learners explore and create directly in code.
+[**Recho Notebook**](https://recho.dev/notebook) is a free, [open-source](/LICENCE), reactive editor for algorithms and ASCII art. It introduces a _plain code format_ for notebooks — echoing output inline as comments for live, in-situ coding with instant feedback. Built on vanilla JavaScript and the reactive model of [Observable Notebook Kit](https://observablehq.com/notebook-kit/), Recho Notebook lets developers, artists, and learners explore and create directly in code.
 
-- [Editor](https://recho.dev/) 📝 - The quickest way to get started with Recho.
-- [Announcement](https://medium.com/@subairui/a-lighter-way-to-code-with-creativity-8c0ac739aa6f) 📢 - Read our initial release story to discovery the vision behind Recho.
-- [Documentation](https://recho.dev/docs/introduction) 📚 - Learn how to use Recho with our comprehensive guides.
-- [Examples](https://recho.dev/examples) 🖼️ - See what you can create and draw some inspiration!
+- [Editor](https://recho.dev/notebook) 📝 - The quickest way to get started with Recho Notebook.
+- [Announcement](https://medium.com/@subairui/a-lighter-way-to-code-with-creativity-8c0ac739aa6f) 📢 - Read our initial release story to discovery the vision behind Recho Notebook.
+- [Documentation](https://recho.dev/notebook/docs/introduction) 📚 - Learn how to use Recho Notebook with our comprehensive guides.
+- [Examples](https://recho.dev/notebook/examples) 🖼️ - See what you can create and draw some inspiration!
 - [Sharing](/CONTRIBUTING.md#sharing-examples) 🎨 - Follow the instructions to open a [pull request](https://github.com/recho-dev/recho/new/main/app/examples) to share your sketches!
 - [Contributing](/CONTRIBUTING.md) 🙏 - We have [a bunch of things](https://github.com/recho-dev/recho/issues) that we would like you to help us build together!
 
-## Why Recho 💡
+## Why Recho Notebook 💡
 
 On the one hand, we’ve always loved [Observable Notebooks](https://observablehq.com/). To explore a more portable notebook format, we created [Markdown Genji](https://genji-md.dev/), which extends Markdown with notebook-like features. Later, similar ideas appeared in [Observable Framework](https://observablehq.com/framework), and recently, [Observable Notebook Kit](https://observablehq.com/notebook-kit/) introduced an HTML-based file format. That made us wonder — could notebooks be even more portable, perhaps as a plain code file?
 
 On the other hand, we’ve always been interested in making code more accessible and playful. Inspired by the [p5.js web editor](https://editor.p5js.org/), we realized that a _well-designed language doesn’t necessarily make coding more accessible — the environment does_. The p5.js web editor achieves this, in part, through its focus on graphics. That made us wonder — could there be an environment that focuses more on computation rather than graphics, yet remains just as accessible and playful? One that uses ASCII art—like what we did in [gh2](https://github.com/charming-art/gh2)—when visual output is truly needed?
 
-To explore these questions, introducing Recho: **[a lighter way to code with creativity](https://medium.com/@subairui/a-lighter-way-to-code-with-creativity-8c0ac739aa6f)**. By "lighter", we mean you can have a lighter start:
+To explore these questions, introducing Recho Notebook: **[a lighter way to code with creativity](https://medium.com/@subairui/a-lighter-way-to-code-with-creativity-8c0ac739aa6f)**. By "lighter", we mean you can have a lighter start:
 
-- **Lighter Output** - The first citizen of Recho is text—each piece of result can be inspected as strings. Text is a universal interface, which is concise, intuitive, and efficient. This keeps your attention on the essence of code rather than the overhead of visuals.
+- **Lighter Output** - The first citizen of Recho Notebook is text—each piece of result can be inspected as strings. Text is a universal interface, which is concise, intuitive, and efficient. This keeps your attention on the essence of code rather than the overhead of visuals.
 - **Lighter Flow** - We stay in an online reactive editor—inputs and outputs both show up there. There is no need to switch context while coding. Instant feedback allows you to better understand your code and shape ideas.
-- **Lighter Input** - We use vanilla JavaScript with reactivity and minimal custom APIs. This means you don't need to learn any nonstandard JavaScript variant, and also eliminates the need to learn a bunch of third-party APIs. By doing this, we aim to minimize the gap between coding in Recho and in the real world, making it easier for the experienced to get in and for beginners to get out.
-- **Lighter Purpose** - We don't need to dream big in Recho. While AI makes coding less important for "world-changing" ideas, we want to secure a place where you can code just for fun. Life can be without work, right? You can experiment with math functions, play with string manipulation, or simply implement basic algorithms to experience the charm of computing.
+- **Lighter Input** - We use vanilla JavaScript with reactivity and minimal custom APIs. This means you don't need to learn any nonstandard JavaScript variant, and also eliminates the need to learn a bunch of third-party APIs. By doing this, we aim to minimize the gap between coding in Recho Notebook and in the real world, making it easier for the experienced to get in and for beginners to get out.
+- **Lighter Purpose** - We don't need to dream big in Recho Notebook. While AI makes coding less important for "world-changing" ideas, we want to secure a place where you can code just for fun. Life can be without work, right? You can experiment with math functions, play with string manipulation, or simply implement basic algorithms to experience the charm of computing.
 
-By "creativity", we mean you can end up doing something fun, and find a new way to express yourself or understand the world. If computers are aliens, our best hope is that by learning their languages, which is code, through Recho, you'll develop a deeper understanding of computation while unleashing your creativity!
+By "creativity", we mean you can end up doing something fun, and find a new way to express yourself or understand the world. If computers are aliens, our best hope is that by learning their languages, which is code, through Recho Notebook, you'll develop a deeper understanding of computation while unleashing your creativity!
 
 ## What's Next 🔥
 
-Recho is still in its early stage. While there's still much work to do, we're excited to release the beta version and make it open source right now. If you're interested in trying it out, please visit the [website](https://recho.dev/). Since the source code is available at GitHub here, we welcome any thoughts, comments, or suggestions. If you're interested in contributing to Recho, we're especially interested in these areas:
+Recho Notebook is still in its early stage. While there's still much work to do, we're excited to release the beta version and make it open source right now. If you're interested in trying it out, please visit the [website](https://recho.dev/notebook). Since the source code is available at GitHub here, we welcome any thoughts, comments, or suggestions. If you're interested in contributing to Recho Notebook, we're especially interested in these areas:
 
-- **More Examples** - Examples attract users and shape tools. We would love to showcase examples across diverse areas ([text analysis](https://recho.dev/examples/word-count), [data viz](https://recho.dev/examples/phases-of-the-moon), [graphics](https://recho.dev/examples/cg-text-based-shaders), [concrete poetry](https://recho.dev/examples/fire!), [algorithms](https://recho.dev/examples/maze), etc.) and demonstrations working with external libraries ([D3](https://d3js.org/), [Lodash](https://lodash.com/), [ml5](https://ml5js.org/), [Tone](https://tonejs.github.io/), etc.). They don't have to be complicated or perfect. One thing to share would be great. Follow the [instructions](/CONTRIBUTING.md#sharing-examples) to open a [pull request](https://github.com/recho-dev/recho/new/main/app/examples) to share yours today!
-- **Polyglot Programming** - Recho begins with JavaScript, but isn't limited to it—coding has no boundaries. As long as a programming language can be transpiled to JavaScript, it can be incorporated with Recho. It can be mainstream ([Python](https://www.python.org/), [Rust](https://www.rust-lang.org/)), academic ([MLscript](https://github.com/hkust-taco/mlscript)), or creative ([wenyan‑lang](https://wy-lang.org/)). The best part is that it doesn't have to be production-ready or have real-life usage. Just providing a different way to code or think is cool. Want to add your favorite language to Recho or share your "toys"? [Talk to us](https://github.com/recho-dev/recho/issues/109)!
+- **More Examples** - Examples attract users and shape tools. We would love to showcase examples across diverse areas ([text analysis](https://recho.dev/notebook/examples/word-count), [data viz](https://recho.dev/notebook/examples/phases-of-the-moon), [graphics](https://recho.dev/notebook/examples/cg-text-based-shaders), [concrete poetry](https://recho.dev/notebook/examples/fire!), [algorithms](https://recho.dev/notebook/examples/maze), etc.) and demonstrations working with external libraries ([D3](https://d3js.org/), [Lodash](https://lodash.com/), [ml5](https://ml5js.org/), [Tone](https://tonejs.github.io/), etc.). They don't have to be complicated or perfect. One thing to share would be great. Follow the [instructions](/CONTRIBUTING.md#sharing-examples) to open a [pull request](https://github.com/recho-dev/recho/new/main/app/examples) to share yours today!
+- **Polyglot Programming** - Recho Notebook begins with JavaScript, but isn't limited to it—coding has no boundaries. As long as a programming language can be transpiled to JavaScript, it can be incorporated with Recho Notebook. It can be mainstream ([Python](https://www.python.org/), [Rust](https://www.rust-lang.org/)), academic ([MLscript](https://github.com/hkust-taco/mlscript)), or creative ([wenyan‑lang](https://wy-lang.org/)). The best part is that it doesn't have to be production-ready or have real-life usage. Just providing a different way to code or think is cool. Want to add your favorite language to Recho Notebook or share your "toys"? [Talk to us](https://github.com/recho-dev/recho/issues/109)!
 - **Text-Based Libraries** - Best practices deserve to be seen by more people. If you find some algorithms you are using helpful for others, don't hesitate to package them into libraries. Remember, they can be light!
-- **Explorations with LLMs** - Recho's text-first approach is ideal for LLMs. Rather than letting the LLM write code directly, you can use code as input: fusing files, turning text into pixel outputs, and more. We want to [explore the possibilities](https://github.com/recho-dev/recho/issues/110).
+- **Explorations with LLMs** - Recho Notebook's text-first approach is ideal for LLMs. Rather than letting the LLM write code directly, you can use code as input: fusing files, turning text into pixel outputs, and more. We want to [explore the possibilities](https://github.com/recho-dev/recho/issues/110).
 
 In addition to these, there are a lot of editor related features on the way!
 
@@ -47,7 +47,7 @@ Also, we have plans to provide [cloud storage services](https://github.com/recho
 
 ## A Quick Example 🚀
 
-Here is a [word counting](https://recho.dev/examples/word-count) example to showcase Recho. Bret Victor gives programming a concise [definition](https://www.youtube.com/watch?v=ef2jpjTEB5U&t=501s):
+Here is a [word counting](https://recho.dev/notebook/examples/word-count) example to showcase Recho Notebook. Bret Victor gives programming a concise [definition](https://www.youtube.com/watch?v=ef2jpjTEB5U&t=501s):
 
 > Programming is blindly manipulating symbols.
 
@@ -69,7 +69,7 @@ const filtered = words.filter((w) => !ignoredWords.includes(w));
 const frequencies = filtered.reduce((acc, w) => ((acc[w] = (acc[w] || 0) + 1), acc), {});
 ```
 
-However, we can see the results of each transformation in Recho. By calling `echo(results)`, the results are displayed as comments above the statement! Now we can better understand this piece of code by better "seeing" every manipulation. Notice that there is no need to switch to console to see the results, which results in an in-situ experience. And of course, we can be a little creative at last: writing a few lines of code to create a simple visualization!
+However, we can see the results of each transformation in Recho Notebook. By calling `echo(results)`, the results are displayed as comments above the statement! Now we can better understand this piece of code by better "seeing" every manipulation. Notice that there is no need to switch to console to see the results, which results in an in-situ experience. And of course, we can be a little creative at last: writing a few lines of code to create a simple visualization!
 
 ```js
 const text = `The dog, cat, and mouse were playing in the yard. Dog barked loudly, while cat ran quickly. 
@@ -123,4 +123,4 @@ echo(
 
 ## License 📄
 
-ISC © [Recho](https://github.com/recho-dev)
+ISC © [Recho Notebook](https://github.com/recho-dev)

app/EditorPage.jsx

@@ -39,7 +39,7 @@ export function EditorPage({id: initialId}) {
       prevCount.current = count;
       const id = notebook.id;
       setId(id); // Force re-render.
-      window.history.pushState(null, "", `/notebooks/${id}`); // Just update the url, no need to reload the page.
+      window.history.pushState(null, "", `/works/${id}`); // Just update the url, no need to reload the page.
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [notebook]);
@@ -58,7 +58,7 @@ export function EditorPage({id: initialId}) {
   useEffect(() => {
     // Use setTimeout to avoid changing to default title.
     setTimeout(() => {
-      document.title = `${isAdded ? notebook.title : "New"} | Recho`;
+      document.title = `${isAdded ? notebook.title : "New"} | Recho Notebook`;
     }, 100);
   }, [notebook, isAdded]);
 
@@ -147,7 +147,7 @@ export function EditorPage({id: initialId}) {
   function onDuplicate() {
     const duplicated = duplicateNotebook(notebook);
     addNotebook(duplicated);
-    router.push(`/notebooks/${duplicated.id}`);
+    router.push(`/works/${duplicated.id}`);
   }
 
   return (
@@ -162,7 +162,7 @@ export function EditorPage({id: initialId}) {
             {notebookList.map((notebook) => (
               <div key={notebook.id} className={cn("flex items-start flex-col gap-1")}>
                 <SafeLink
-                  href={`/notebooks/${notebook.id}`}
+                  href={`/works/${notebook.id}`}
                   className={cn(
                     "font-semibold hover:underline text-blue-500 whitespace-nowrap line-clamp-1 max-w-[150px] text-ellipsis",
                   )}
@@ -176,7 +176,7 @@ export function EditorPage({id: initialId}) {
                 </span>
               </div>
             ))}
-            <SafeLink href="/notebooks" className={cn("font-semibold text-blue-500 hover:underline")}>
+            <SafeLink href="/works" className={cn("font-semibold text-blue-500 hover:underline")}>
               View your notebooks
             </SafeLink>
           </div>
@@ -186,7 +186,7 @@ export function EditorPage({id: initialId}) {
             )}
           >
             <SafeLink
-              href="/notebooks"
+              href="/works"
               className={cn(
                 "font-medium w-full border border-gray-300 rounded-md px-3 py-2 text-sm text-center hover:bg-gray-200",
               )}

app/Nav.jsx

@@ -56,9 +56,12 @@ export function Nav() {
 
   return (
     <header className={cn("flex justify-between items-center p-4 border-b border-gray-200")}>
-      <div className={cn("flex md:gap-2 items-center")}>
+      <div className={cn("flex md:gap-2 items-center ")}>
+        <SafeLink href="https://recho.dev">
+          <h1 className={cn("text-xl font-extrabold")}>Recho</h1>
+        </SafeLink>
         <SafeLink href="/">
-          <h1 className={cn("text-2xl font-bold")}>Recho</h1>
+          <h1 className={cn("text-xl hidden md:inline font-medium")}>Notebook</h1>
         </SafeLink>
         {/* Desktop navigation */}
         <div className={cn("hidden md:flex gap-2 items-center")}>
@@ -119,8 +122,8 @@ export function Nav() {
         </SafeLink>
 
         <SafeLink
-          href="/notebooks"
-          className={cn(styles.link, pathname === "/notebooks" && styles.selectedLink)}
+          href="/works"
+          className={cn(styles.link, pathname === "/works" && styles.selectedLink)}
           data-tooltip-id="nav-tooltip"
           data-tooltip-content="Open Notebooks"
         >

app/Thumbnail.jsx

@@ -1,5 +1,6 @@
 import {load} from "cheerio";
 import {cn} from "./cn.js";
+import {BASE_PATH} from "./shared.js";
 
 function removeEmptyLines(string) {
   const [first, ...rest] = string.split("\n").filter((line) => line.trim() !== "");
@@ -17,7 +18,10 @@ export function Thumbnail({html, outputStartLine = null, snap = null}) {
   }
   if (snap) {
     return (
-      <div className={cn("w-full h-full bg-cover bg-center")} style={{backgroundImage: `url(/examples/${snap})`}} />
+      <div
+        className={cn("w-full h-full bg-cover bg-center")}
+        style={{backgroundImage: `url(${BASE_PATH}/examples/${snap})`}}
+      />
     );
   }
   return <div dangerouslySetInnerHTML={{__html: removeEmptyLines($.html())}} className={cn("w-full h-full")} />;

app/docs/[slug]/page.jsx

@@ -12,7 +12,7 @@ export async function generateMetadata({params}) {
   const doc = getAllJSDocs().find((doc) => doc.slug === slug);
   if (!doc) notFound();
   return {
-    title: `${doc.title} | Recho`,
+    title: `${doc.title} | Recho Notebook`,
   };
 }