Add more information in new page (#176)

* Change News's position

* Optimize new page

Author: pearmini

app/Nav.jsx

@@ -68,6 +68,9 @@ export function Nav() {
           <SafeLink href="/docs" className={cn(styles.link, isSelected("/docs") && styles.selectedLink, "ml-3")}>
             Docs
           </SafeLink>
+          <SafeLink href="/examples" className={cn(styles.link, isSelected("/examples") && styles.selectedLink)}>
+            Examples
+          </SafeLink>
           <a
             href="https://recho.dev/news"
             target="_blank"
@@ -76,9 +79,6 @@ export function Nav() {
           >
             News
           </a>
-          <SafeLink href="/examples" className={cn(styles.link, isSelected("/examples") && styles.selectedLink)}>
-            Examples
-          </SafeLink>
         </div>
         {/* Mobile navigation */}
         <div className={cn("md:hidden relative")} ref={dropdownRef}>
@@ -98,6 +98,13 @@ export function Nav() {
               >
                 Docs
               </SafeLink>
+              <SafeLink
+                href="/examples"
+                className={cn(styles.dropdownItem, isSelected("/examples") && styles.dropdownItemSelected)}
+                onClick={() => setDropdownOpen(false)}
+              >
+                Examples
+              </SafeLink>
               <a
                 href="https://recho.dev/news"
                 className={cn(styles.dropdownItem, isSelected("/news") && styles.dropdownItemSelected)}
@@ -107,13 +114,6 @@ export function Nav() {
               >
                 News
               </a>
-              <SafeLink
-                href="/examples"
-                className={cn(styles.dropdownItem, isSelected("/examples") && styles.dropdownItemSelected)}
-                onClick={() => setDropdownOpen(false)}
-              >
-                Examples
-              </SafeLink>
             </div>
           )}
         </div>

app/SafeLink.jsx

@@ -2,6 +2,7 @@
 import {useSyncExternalStore} from "react";
 import {useRouter} from "next/navigation";
 import {isDirtyStore, countStore} from "./store.js";
+import Link from "next/link";
 
 export function SafeLink({href, children, className, onClick, ...props}) {
   const router = useRouter();
@@ -24,8 +25,8 @@ export function SafeLink({href, children, className, onClick, ...props}) {
   };
 
   return (
-    <a href={href} onClick={handleClick} className={className} {...props}>
+    <Link href={href} onClick={handleClick} className={className} {...props}>
       {children}
-    </a>
+    </Link>
   );
 }

app/api.js

@@ -13,13 +13,46 @@ function generateProjectName() {
   return `${adj}-${obj}.js`;
 }
 
+const DEFAULT_CONTENT = `
+// Welcome to **Recho Notebook**!
+// A reactive editor for algorithms and ASCII art.
+// 1. You can call echo(value) to echo output inline as comments, which allows
+// you to better understand the code by "seeing" every manipulation in-situ.
+
+const text = echo("dog");
+
+const words = echo(text.split(""));
+
+echo(words.reverse().join(""));
+
+// 2. You can also call recho.interval(ms) to create data-driven animations,
+// which can help you find the minimalism of ASCII art is still fascinating!
+
+const x = recho.interval(100);
+
+echo("🚗💨".padStart(40 - (x % 40)));
+
+// 3. Inputs are also supported, which can help you create interactive
+// notebooks. Click the buttons to see what happens!
+
+const x1 = recho.number(10, {min: 0, max: 40, step: 1});
+
+//➜ "(๑•̀ㅂ•́)و✧"
+echo("~".repeat(x1) + "(๑•̀ㅂ•́)و✧");
+
+// Follow the links (cmd/ctrl + click) to learn more about the Recho Notebook
+// - Docs: https://recho.dev/notebook/docs/
+// - Examples: https://recho.dev/notebook/examples/
+// - Github: https://github.com/recho-dev/notebook
+`;
+
 export function createNotebook() {
   return {
     id: generate(),
     title: generateProjectName(),
     created: null,
     updated: null,
-    content: `echo("Hello, world!");`,
+    content: DEFAULT_CONTENT.trimStart(),
     autoRun: true,
     runtime: DEFAULT_RUNTIME,
   };