Add Selenix Browser repo browser and releases pages

Introduces interactive browsing for the Selenix-Browser repository, including file/tree navigation, blob viewing, and release details. Updates navigation and project listing to separate Selenix from other projects. Adds new CSS for GitHub-style UI components and refactors related components for improved user experience.

Author: s3nix-sys

.yarn/install-state.gz

@@ -3,7 +3,7 @@
   "private": true,
   "version": "1.1.0",
   "type": "module",
-  "packageManager": "yarn@4.3.1",
+  "packageManager": "yarn@4.10.3",
   "scripts": {
     "dev": "vite",
     "build": "vite build",

package.json

@@ -31,14 +31,15 @@ export default function Navbar() {
 
           <Link to="/" className="flex items-center gap-3">
             <img src={logo} alt="Revalex Technologies" className="h-9 w-9" />
-            
+
             <span className="brand-text hidden md:inline text-lg font-semibold tracking-tight">Revalex Technologies</span>
           </Link>
 
           <nav className="hidden md:flex items-center gap-1">
             <NavLink to="/" className={navLinkClass} end>Home</NavLink>
-            <NavLink to="/projects" className={navLinkClass}>Projects</NavLink>
+            <NavLink to="/projects" className={navLinkClass}>Other Projects</NavLink>
             <NavLink to="/labs" className={navLinkClass}>Labs</NavLink>
+              <NavLink onClick={() => setOpen(false)} to="/projects/selenix" className={navLinkClass}>Selenix Browser</NavLink>
 
             <div className="ml-3 h-6 w-px bg-gray-200" />
 
@@ -70,8 +71,9 @@ export default function Navbar() {
           <div className="pb-4 pt-1">
             <nav className="grid gap-1">
               <NavLink onClick={() => setOpen(false)} to="/" className={navLinkClass} end>Home</NavLink>
-              <NavLink onClick={() => setOpen(false)} to="/projects" className={navLinkClass}>Projects</NavLink>
+              <NavLink onClick={() => setOpen(false)} to="/projects" className={navLinkClass}>Other Projects</NavLink>
               <NavLink onClick={() => setOpen(false)} to="/labs" className={navLinkClass}>Labs</NavLink>
+              <NavLink onClick={() => setOpen(false)} to="/projects/selenix" className={navLinkClass}>Selenix Browser</NavLink>
             </nav>
             <div className="mt-3 grid gap-2">
               <Link onClick={() => setOpen(false)} to="/projects" className="btn btn-primary w-full">Explore</Link>

src/components/Navbar.jsx

@@ -19,9 +19,6 @@ html, body { overflow-x: hidden; }
 img, video, canvas, svg { max-width: 100%; height: auto; }
 iframe { max-width: 100%; }
 
-* { word-break: break-word; }
-.prose, p { overflow-wrap: anywhere; }
-
 header nav { display: flex; flex-wrap: wrap; }
 @media (max-width: 640px) {
   header nav a,
@@ -44,10 +41,100 @@ header nav { display: flex; flex-wrap: wrap; }
 
 html, body { max-width: 100%; overflow-x: hidden; }
 img, video, svg, canvas { max-width: 100%; height: auto; }
-* { min-width: 0; } 
+* { min-width: 0; }
 .break-words { overflow-wrap: anywhere; word-break: break-word; }
 
 @media (max-width: 380px) {
   .btn { padding-left: 0.875rem; padding-right: 0.875rem; }
   .card { padding: 1rem; }
 }
+
+.gh-container { max-width: 1200px; margin: 0 auto; padding: 1.25rem; }
+.gh-grid { display: grid; grid-template-columns: 1fr 300px; gap: 24px; }
+.gh-card { background: #ffffff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 16px;}
+.gh-table { width: 100%; border-collapse: collapse; }
+.gh-table tr { border-bottom: 1px solid #e5e7eb; }
+.gh-table td { padding: 8px 4px; vertical-align: middle; }
+.gh-file { display:flex; align-items:center; gap:.5rem; color: #111827; }
+.gh-file .type { color: #6b7280; font-size: 12px; }
+.gh-breadcrumbs a { color: var(--brand-red); text-decoration: none; }
+.gh-breadcrumbs span.sep{ color: #9ca3af; margin: 0 .25rem; }
+.gh-tabs { display:flex; gap:8px; border-bottom:1px solid #e5e7eb; }
+.gh-tab { padding:8px 12px; border:1px solid #e5e7eb; border-bottom:none; background:#f9fafb; border-top-left-radius:8px; border-top-right-radius:8px; color:#111827; }
+.gh-tab.active { background: #ffffff; }
+.gh-readme { background: #ffffff; border:1px solid #e5e7eb; border-radius:12px; padding:16px; }
+.gh-badge { display:inline-block; padding:2px 6px; font-size: 12px; border:1px solid #e5e7eb; border-radius: 999px; color: #6b7280; }
+.gh-download { display:flex; align-items:center; gap:.5rem; border:1px solid #e5e7eb; border-radius:8px; padding:.5rem .75rem; background: #ffffff; }
+.gh-download:hover { background:#f3f4f6 }
+.gh-heading { font-size: 20px; font-weight: 600; }
+.gh-sub { color: #6b7280; font-size: 12px; }
+
+pre.code-view { background:#0b1020; color:#e5e7eb; padding:12px; border-radius:10px; overflow:auto; }
+.file-viewer { background:#fff; border:1px solid #e5e7eb; border-radius:12px; padding:16px; }
+@media (max-width: 1024px) { .gh-grid { grid-template-columns: 1fr; } }
+
+.readme-wrap, .blob-wrap { max-width: 980px; margin: 0 auto; }
+
+.badge-row img { vertical-align: middle; }
+.file-actions { display:flex; gap:.5rem; align-items:center; }
+.code-shell { background:#0b1020; color:#e5e7eb; padding:16px; border-radius:12px; border:1px solid #e5e7eb; overflow:auto; }
+.table-file-list { width:100%; border-collapse: collapse; }
+.table-file-list tr { border-bottom: 1px solid #e5e7eb; }
+.table-file-list td { padding: 8px 4px; }
+
+pre.code-view, pre.code-shell,
+
+.markdown-body { box-sizing:border-box; max-width: 980px; margin: 0 auto; padding: 16px; }
+.markdown-body { font-family: system-ui, -apple-system, Segoe UI, Helvetica, Arial, Apple Color Emoji, Segoe UI Emoji, Noto Color Emoji; line-height: 1.6; font-size: 16px; }
+.markdown-body code, .markdown-body pre, .code-view code { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }
+.markdown-body a { color:#0969da; text-decoration:none; }
+.markdown-body a:hover { text-decoration:underline; }
+.markdown-body ul, .markdown-body ol { padding-left: 2em; }
+.markdown-body h1, .markdown-body h2, .markdown-body h3, .markdown-body h4 { margin-top: 24px; margin-bottom: 16px; }
+.markdown-body h1 { font-size: 2em; padding-bottom:.3em; border-bottom:1px solid #d0d7de; }
+.markdown-body h2 { font-size: 1.5em; padding-bottom:.3em; border-bottom:1px solid #d0d7de; }
+.markdown-body img { display:inline-block; vertical-align:middle; max-width:100%; }
+.readme-wrap { max-width: 980px; margin: 0 auto; }
+
+pre.code-view,
+pre.code-shell,
+.markdown-body pre {
+  background: #f6f8fa !important;
+  color: #24292f !important;
+  border: 1px solid #eaeef2 !important;
+  border-radius: 6px !important;
+  padding: 16px !important;
+  overflow: auto !important;
+}
+.markdown-body code {
+  background: rgba(175, 184, 193, 0.2) !important;
+  color: #24292f !important;
+  border-radius: 4px !important;
+  padding: .2em .4em !important;
+}
+.markdown-body pre code {
+  background: transparent !important;
+  color: inherit !important;
+  padding: 0 !important;
+}
+
+.markdown-body img {
+  display: inline-block;
+  vertical-align: middle;
+}
+
+.readme-wrap, .blob-wrap, .markdown-body {
+  max-width: 980px;
+  margin: 0 auto;
+}
+
+@media (max-width: 768px) {
+  .gh-container { padding: 0.75rem; }
+  .gh-grid { grid-template-columns: 1fr !important; gap: 16px !important; }
+  .markdown-body { padding: 12px !important; }
+  .readme-wrap, .blob-wrap { padding: 0 8px !important; }
+  .file-actions { flex-wrap: wrap; gap: 6px; }
+  .file-actions .btn { width: auto; }
+}
+
+.markdown-body p { margin: 16px 0; }

src/index.css

@@ -5,12 +5,20 @@ import './index.css'
 import Home from './pages/Home'
 import Projects from './pages/Projects'
 import Selenix from './pages/Selenix'
+import SelenixTree from './pages/SelenixTree'
+import SelenixBlob from './pages/SelenixBlob'
+import SelenixReleases from './pages/SelenixReleases'
+import SelenixRelease from './pages/SelenixRelease'
 import Labs from './pages/Labs'
 
 const router = createHashRouter([
   { path: '/', element: <Home /> },
   { path: '/projects', element: <Projects /> },
   { path: '/projects/selenix', element: <Selenix /> },
+  { path: '/projects/selenix/tree/:branch/*', element: <SelenixTree /> },
+  { path: '/projects/selenix/blob/:branch/*', element: <SelenixBlob /> },
+  { path: '/projects/selenix/releases', element: <SelenixReleases /> },
+  { path: '/projects/selenix/releases/:tag', element: <SelenixRelease /> },
   { path: '/labs', element: <Labs /> },
 ])
 

src/main.jsx

@@ -7,7 +7,7 @@ export default function Home() {
     <div>
       <Navbar />
 
-      {/* HERO */}
+      {}
       <section className="hero border-b">
         <div className="mx-auto grid max-w-6xl grid-cols-1 items-center gap-10 px-4 py-16 md:grid-cols-2">
           <div>
@@ -30,7 +30,7 @@ export default function Home() {
         </div>
       </section>
 
-      {/* VALUE SECTIONS */}
+      {}
       <section className="mx-auto max-w-6xl px-4 py-12 grid grid-cols-1 md:grid-cols-3 gap-6">
         {[
           {title: 'Solid foundations', body: 'We build on reliable, well-tested stacks to minimize surprises and maximize velocity.'},
@@ -44,7 +44,7 @@ export default function Home() {
         ))}
       </section>
 
-      {/* CTA */}
+      {}
       <section className="mx-auto max-w-6xl px-4 pb-14">
         <div className="card flex flex-col items-start gap-4 md:flex-row md:items-center md:justify-between">
           <div>

src/pages/Home.jsx

@@ -36,21 +36,18 @@ function SnakeGame() {
       if (t - last < speed) return
       last = t
 
-      // move
       const head = { x: snake[0].x + dir.x, y: snake[0].y + dir.y }
-      // wrap
+
       const cols = canvas.width/size, rows = canvas.height/size
       head.x = (head.x + cols) % cols
       head.y = (head.y + rows) % rows
 
-      // collision with self
       if (snake.some(p => p.x === head.x && p.y === head.y)) {
         alive = false
       }
 
       snake.unshift(head)
 
-      // eat
       if (head.x === food.x && head.y === food.y) {
         setScore(s => s + 1)
         speed = Math.max(60, speed - 2)
@@ -59,15 +56,14 @@ function SnakeGame() {
         snake.pop()
       }
 
-      // draw
       ctx.clearRect(0,0,canvas.width, canvas.height)
-      // grid bg
+
       ctx.fillStyle = '#f8fafc'
       ctx.fillRect(0,0,canvas.width, canvas.height)
-      // food
+
       ctx.fillStyle = '#e50914'
       ctx.fillRect(food.x*size, food.y*size, size, size)
-      // snake
+
       ctx.fillStyle = '#111827'
       snake.forEach(p => ctx.fillRect(p.x*size, p.y*size, size, size))
 

src/pages/Labs.jsx

@@ -16,7 +16,7 @@ export default function Projects() {
         if (!res.ok) throw new Error('GitHub API error ' + res.status)
         const data = await res.json()
         data.sort((a,b) => new Date(b.updated_at) - new Date(a.updated_at))
-        setRepos(data)
+        setRepos(data.filter(r => r.name !== 'Selenix-Browser'))
       } catch (e) {
         setError(e.message || 'Failed to load repositories')
       } finally {
@@ -32,7 +32,7 @@ export default function Projects() {
       <main className="mx-auto max-w-6xl px-4 py-12">
         <div className="mb-8 flex items-end justify-between">
           <div>
-            <h1 className="text-3xl font-bold">Projects</h1>
+            <h1 className="text-3xl font-bold">Other Projects</h1>
             <p className="mt-2 text-gray-600">Public repositories from our GitHub organization.</p>
           </div>
           <a className="btn btn-primary" href="https://github.com/orgs/Revalex-Technologies/repositories" target="_blank" rel="noreferrer">All Repositories</a>