improve landing page

itsjavi · Sep 5, 2024 · 53dcf6d · 53dcf6d
1 parent 9559d20
commit 53dcf6d
Show file tree

Hide file tree

Showing 2 changed files with 76 additions and 22 deletions.
diff --git a/src/example.css b/src/example.css
@@ -11,15 +11,17 @@
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  --primary-color: hsl(300, 50%, 57%);
 }
 
 a {
   font-weight: 500;
-  color: #646cff;
+  color: var(--primary-color);
   text-decoration: inherit;
 }
+
 a:hover {
-  color: #535bf2;
+  color: color-mix(in srgb, var(--primary-color) 100%, white 30%);
 }
 
 body {
@@ -49,11 +51,13 @@ h1 {
   will-change: filter;
   transition: filter 300ms;
 }
+
 .logo:hover {
-  filter: drop-shadow(0 0 2em #646cffaa);
+  filter: drop-shadow(0 0 2em var(--primary-color));
 }
-.logo.vanilla:hover {
-  filter: drop-shadow(0 0 2em #3178c6aa);
+
+.jynxs-logo:hover {
+  filter: drop-shadow(0 0 2em var(--primary-color)) sepia(100%) saturate(300%) brightness(70%) hue-rotate(250deg);
 }
 
 .card {
@@ -64,6 +68,11 @@ h1 {
   color: #888;
 }
 
+.description {
+  max-width: 600px;
+  margin: 0 auto 20px auto;
+}
+
 button {
   border-radius: 8px;
   border: 1px solid transparent;
@@ -75,12 +84,14 @@ button {
   cursor: pointer;
   transition: border-color 0.25s;
 }
+
 button:hover {
-  border-color: #646cff;
+  border-color: var(--primary-color);
 }
+
 button:focus,
 button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
+  outline: 2px auto color-mix(in srgb, var(--primary-color) 100%, white 70%);
 }
 
 input {
@@ -96,20 +107,36 @@ input {
 
 input:focus {
   outline: none;
-  border-color: #535bf2;
+  border-color: var(--primary-color);
+}
+
+.flex-x {
+  display: flex;
+  flex-direction: row;
+  gap: 1rem;
+  justify-content: center;
+  align-items: center;
+}
+
+.flex-y {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  margin-top: 2rem;
+  justify-content: center;
+  align-items: center;
 }
 
 @media (prefers-color-scheme: light) {
   :root {
     color: #213547;
     background-color: #ffffff;
   }
-  a:hover {
-    color: #747bff;
-  }
+
   button {
-    background-color: #f9f9f9;
+    background-color: #e9e9e9;
   }
+
   input {
     background-color: #f9f9f9;
     color: #213547;

diff --git a/src/example.tsx b/src/example.tsx
@@ -3,6 +3,7 @@ import './example.css'
 import { cleanup, renderJSX, useEffect, useState } from './runtime/jsx-runtime'
 import libLogo from '/icon.png'
 import viteLogo from '/vite.svg'
+
 // Async component
 const AsyncComponent = async () => {
   await new Promise((resolve) => setTimeout(resolve, 2000)) // Simulate delay
@@ -28,30 +29,56 @@ const App = () => {
 
   const handleClick = () => {
     if (inputRef.current) {
-      alert(`Input value: ${inputRef.current.value}`)
+      alert(`inputRef.current.value = ${inputRef.current.value}`)
     }
   }
 
   return (
     <div>
-      <a href="https://vitejs.dev" target="_blank">
+      <a href="https://vitejs.dev" target="_blank" rel="noreferrer">
         <img src={viteLogo} class="logo" alt="Vite logo" />
       </a>
-      <a href="https://github.com/itsjavi/jynxs" target="_blank">
-        <img src={libLogo} class="logo vanilla" alt="TypeScript logo" />
+      <a href="https://github.com/itsjavi/jynxs" target="_blank" rel="noreferrer">
+        <img src={libLogo} class="logo jynxs-logo" alt="TypeScript logo" />
       </a>
-      <h1 key={123}>Vite + JynXS</h1>
-      <input ref={inputRef} placeholder="Type something..." />
-      <button onClick={handleClick}>Alert Input Value</button>
-      <p>Count: {count}</p>
-      <button onClick={() => setCount(count + 1)}>Increment Count</button>
+      <h1 key={123}>
+        Vite +{' '}
+        <a href="https://github.com/itsjavi/jynxs" target="_blank" rel="noreferrer">
+          JynXS
+        </a>
+      </h1>
+      <p class="description">
+        JynXS is a lightweight, JSX runtime that implements the very basics of a modern UI library without relying on
+        React.
+        <br />
+        <br />
+        Examples:
+      </p>
+      <div class="flex-y">
+        <div class="flex-x">
+          <input ref={inputRef} placeholder="Type something..." />
+          <button type="button" onClick={handleClick}>
+            Alert Input Value
+          </button>
+        </div>
+        <div class="flex-x">
+          <button type="button" onClick={() => setCount(count + 1)}>
+            Increment Count
+          </button>
+          <div>Count: {count}</div>
+        </div>
+      </div>
       <AsyncComponent fallback={<p>Loading async component...</p>} />
     </div>
   )
 }
 
 // Initial render
-renderJSX(<App />, document.getElementById('app')!)
+const appElement = document.getElementById('app')
+if (!appElement) {
+  throw new Error('No element with id "app" found')
+}
+renderJSX(<App />, appElement)
 
 // Cleanup on window unload
 window.addEventListener('beforeunload', cleanup)