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,49 @@ 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 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) + "(๑•̀ㅂ•́)و✧");
+
+// Refer to the links (cmd/ctrl + click) to learn more about 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,
  };