feat: clean up base tuono example

examples/tuono/README.md

@@ -1,3 +1,9 @@
-# TODO: Basic Tuono app
+# Tuono starter
+
+This is the starter tuono project. To download it run in your terminal:
+
+```shell
+$ tuono new [NAME]
+```
 
 

examples/tuono/package.json

@@ -1,10 +1,11 @@
 {
   "name": "tuono",
+  "description": "The react/rust fullstack framework",
   "version": "0.0.1",
   "dependencies": {
     "react": "18.3.1",
     "react-dom": "18.3.1",
-    "tuono": "workspace:*"
+    "tuono": "link:../../packages/tuono"
   },
   "devDependencies": {
     "@types/react": "^18.3.3",

examples/tuono/src/components/Button.tsx

@@ -1,3 +0,0 @@
-export default function Button(): JSX.Element {
-  return <button>Button</button>
-}

examples/tuono/src/routes/__root.tsx

@@ -3,10 +3,7 @@ import type { ReactNode } from 'react'
 interface RootRouteProps {
   children: ReactNode
 }
+
 export default function RootRoute({ children }: RootRouteProps): JSX.Element {
-  return (
+  return <main className="main">{children}</main>
-    <>
-      <main className="main">{children}</main>
-    </>
-  )
 }

examples/tuono/src/routes/index.tsx

@@ -1,8 +1,9 @@
 import type { TuonoProps } from 'tuono'
 
-type IndexProps = {
+interface IndexProps {
   subtitle: string
 }
+
 export default function IndexPage({
   data,
   isLoading,
@@ -32,7 +33,12 @@ export default function IndexPage({
       </div>
       <div className="subtitle-wrap">
         <p className="subtitle">{data?.subtitle}</p>
-        <a href="https://github.com/Valerioageno/tuono" target="_blank">
+        <a
+          href="https://github.com/Valerioageno/tuono"
+          target="_blank"
+          className="button"
+          type="button"
+        >
           Github
         </a>
       </div>

examples/tuono/src/styles/global.css

@@ -51,12 +51,32 @@ main {
   z-index: 0;
   letter-spacing: -2px;
   margin-left: -8px;
+  user-select: none;
+  pointer-events: none;
 }
 
 .title span {
   opacity: 0;
 }
 
+.button {
+  width: 140px;
+  height: 30px;
+  border: solid 3px black;
+  border-radius: 10px;
+  color: black;
+  text-decoration: none;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  transition: 0.2s;
+}
+
+.button:hover {
+  color: white;
+  background: black;
+}
+
 .logo {
   margin-left: 240px;
   position: relative;