{"id":30725467,"url":"https://github.com/zdunecki/react-router-server-side-components-syntax-highlighting","last_synced_at":"2025-10-12T16:18:54.248Z","repository":{"id":311608056,"uuid":"1042984473","full_name":"zdunecki/react-router-server-side-components-syntax-highlighting","owner":"zdunecki","description":"A demo using React Router Server Side Components + Syntax Highlighting (Code Hike)","archived":false,"fork":false,"pushed_at":"2025-08-25T15:00:38.000Z","size":62,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-09-03T12:55:47.531Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://react-router-rsc-syntax-highlight.netlify.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/zdunecki.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-08-22T23:11:50.000Z","updated_at":"2025-08-25T15:02:22.000Z","dependencies_parsed_at":"2025-08-25T14:41:30.129Z","dependency_job_id":"ecad9ac1-6455-437e-bd41-2a564ba33f75","html_url":"https://github.com/zdunecki/react-router-server-side-components-syntax-highlighting","commit_stats":null,"previous_names":["zdunecki/react-router-server-side-components-syntax-highlighting"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/zdunecki/react-router-server-side-components-syntax-highlighting","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zdunecki%2Freact-router-server-side-components-syntax-highlighting","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zdunecki%2Freact-router-server-side-components-syntax-highlighting/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zdunecki%2Freact-router-server-side-components-syntax-highlighting/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zdunecki%2Freact-router-server-side-components-syntax-highlighting/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zdunecki","download_url":"https://codeload.github.com/zdunecki/react-router-server-side-components-syntax-highlighting/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zdunecki%2Freact-router-server-side-components-syntax-highlighting/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279011986,"owners_count":26085040,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-12T02:00:06.719Z","response_time":53,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-09-03T12:50:10.266Z","updated_at":"2025-10-12T16:18:54.224Z","avatar_url":"https://github.com/zdunecki.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Router Server Side Components Syntax Highlighting\n\nA modern React application demonstrating React Router with Server Components and syntax highlighting using Code Hike. This project showcases how to build a full-stack React application with server-side rendering capabilities and beautiful code syntax highlighting.\n\n## 🚀 Features\n\n- **React Router v7** - Latest routing with server-side rendering\n- **Server Components** - React Server Components for improved performance\n- **Syntax Highlighting** - Beautiful code highlighting with Code Hike\n- **TypeScript** - Full TypeScript support\n- **Tailwind CSS** - Modern styling with Tailwind CSS\n- **Vite** - Fast build tool and development server\n- **Express Server** - Production-ready Node.js server\n\n## 🛠️ Installation\n\n1. Clone the repository:\n```bash\ngit clone \u003crepository-url\u003e\ncd react-router-server-side-components-syntax-highlighting\n```\n\n2. Install dependencies:\n```bash\nnpm install\n```\n\n## 🚀 Development\n\nStart the development server:\n\n```bash\nnpm run dev\n```\n\nThe application will be available at `http://localhost:5173`\n\n## 🏗️ Building for Production\n\nBuild the application:\n\n```bash\nnpm run build\n```\n\nStart the production server:\n\n```bash\nnpm start\n```\n\n## 🎨 Syntax Highlighting\n\nThe project uses Code Hike for syntax highlighting. Here's how it's implemented:\n\n```tsx\nimport { highlight, Pre } from \"codehike/code\"\n\nexport async function CodeSnippet() {\n  const codeblock = `\nexport async function HomePage() {\n  const data = await fetchData()\n  \n  return (\n    \u003cdiv\u003e\n      \u003ch1\u003e{data.title}\u003c/h1\u003e\n      \u003cp\u003e{data.description}\u003c/p\u003e\n    \u003c/div\u003e\n  )\n}\n`\n\n  const highlighted = await highlight({\n    value: codeblock,\n    lang: \"tsx\",\n    meta: \"Server Component\",\n  }, \"github-dark\")\n\n  return \u003cPre code={highlighted} /\u003e\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzdunecki%2Freact-router-server-side-components-syntax-highlighting","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzdunecki%2Freact-router-server-side-components-syntax-highlighting","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzdunecki%2Freact-router-server-side-components-syntax-highlighting/lists"}