{"id":50942450,"url":"https://github.com/timmybytes/template-vite-multipage-starter","last_synced_at":"2026-06-17T16:13:51.757Z","repository":{"id":357219149,"uuid":"1205203201","full_name":"timmybytes/template-vite-multipage-starter","owner":"timmybytes","description":null,"archived":false,"fork":false,"pushed_at":"2026-05-11T20:24:46.000Z","size":180,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-05-11T22:24:57.688Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/timmybytes.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,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-04-08T18:29:05.000Z","updated_at":"2026-05-11T20:24:51.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/timmybytes/template-vite-multipage-starter","commit_stats":null,"previous_names":["timmybytes/template-vite-multipage-starter"],"tags_count":null,"template":true,"template_full_name":null,"purl":"pkg:github/timmybytes/template-vite-multipage-starter","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/timmybytes%2Ftemplate-vite-multipage-starter","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/timmybytes%2Ftemplate-vite-multipage-starter/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/timmybytes%2Ftemplate-vite-multipage-starter/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/timmybytes%2Ftemplate-vite-multipage-starter/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/timmybytes","download_url":"https://codeload.github.com/timmybytes/template-vite-multipage-starter/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/timmybytes%2Ftemplate-vite-multipage-starter/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34453780,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-17T02:00:05.408Z","response_time":127,"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":"2026-06-17T16:13:50.951Z","updated_at":"2026-06-17T16:13:51.751Z","avatar_url":"https://github.com/timmybytes.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Vite Multipage Template Starter\n\nThis repo serves as a starter template for a multipage Vite project scoped to a 1376x1032 resolution, wired up with the following:\n\n- Vite.js + TypeScript\n- twin.macro for Tailwind CSS with Emotion\n- Plop for generating new components, hooks, and contexts\n- GSAP for animations\n- nanostores for state management\n- Google Font via @fontsource\n- Some basic tooling and configurations\n\n## FYIs\n\nThis is a multipage Vite project with a couple quirks to be aware of.\n\n### Pages\n\nThis project is configured for a very specific dist structure. After building, the final output is structured with all pages in their own directories and an individual index.html file for each page.\n\nDuring development, pages need two files: an entry file (e.g., /pages/[PageName]/entry.tsx) and an HTML template (e.g., /pages/[PageName]/index.html). The entry file receives the page content (all React is valid) and that page's references, e.g.:\n\n```tsx\n// pages/somePage/entry.tsx\nPageWrapper({\n  pageReferences: ['Name'],\n  pageContent: (\n    \u003cContainer\u003e\n      \u003cHeading\u003ePage Name\u003c/Heading\u003e\n      \u003cCard\u003eContent\u003c/Card\u003e\n    \u003c/Container\u003e\n  ),\n});\n```\n\n#### Navigation\n\nThe `navData` is the single source of truth for all page links and order in the nav. When creating new pages, make sure to add them to `navData` in `src/data/navData.tsx` and they will automatically be added to the nav and the correct order. The `NavBar` component uses this data to determine the previous and next links for arrow key navigation as well (used for dev only).\n\n#### References\n\nIn each `entry.tsx` file, you can add the page's specified references via the `pageReferences` array in the `PageWrapper` params. The full list of references can be found in `src/data/references.tsx` in alphabetical order.\n\n```tsx\nPageWrapper({\n  pageReferences: ['Name'],\n  pageContent: (\n    \u003cdiv\u003e\n      \u003cTransitionWrapper name=\"page-title\"\u003e\n        \u003ch1\u003eHome\u003c/h1\u003e\n      \u003c/TransitionWrapper\u003e\n      \u003cTransitionWrapper name=\"page-content\" params={{ delay: 0.3 }}\u003e\n        \u003cp\u003eThis page builds to dist/index.html.\u003c/p\u003e\n      \u003c/TransitionWrapper\u003e\n    \u003c/div\u003e\n  ),\n});\n```\n\n#### Transitions\n\nThe `\u003cTransitionWrapper\u003e` component can fade or animate any wrapped content on page load and exit using GSAP. By default it provides a simple fade in, but the `params` prop accepts all valid GSAP animation parameters for more complex animations. `home-entry` and Summary page's `entry.tsx` have simple examples for fading in title just before content, but these are easily changed/removed.\n\nExample of custom animation param object:\n\n```tsx\n\u003cTransitionWrapper\n  params={{ duration: 1, opacity: 0, y: 20, ease: 'power3.out' }}\n\u003e\n  \u003cHeading\u003eAnimated Heading\u003c/Heading\u003e\n\u003c/TransitionWrapper\u003e\n```\n\n### Popups\n\nPopups can be created in any page by calling the `openPopup` function through a button click or other triggering event:\n\n```tsx\nimport { openPopup } from '@/stores/popupStore';\nimport { PopupButton } from '@/components/atoms/buttons';\n...\n\u003cPopupButton\n  onClick={\n    () =\u003e openPopup({\n      title: (\u003ch2\u003ePopup Title\u003c/h2\u003e),\n      content: (\u003cdiv\u003ePopup content\u003c/div\u003e),\n    })\n  }\n\u003eButton text\u003c/PopupButton\u003e\n```\n\nThe `\u003cPopupButton\u003e` component is a pre-styled button with a plus icon specifically for pages where the button is intended to be present and trigger a modal.\n\n### Images \u0026 Assets\n\nThe Vite config is set to disable hashing for image assets, so make sure all images are using unique names and are placed in `/public/shared/` per Dylan's instructions. These will persist in the build at the same path.\n\n### Plop Template File Generation\n\n`plop` is set up to generate new components, hooks, contexts, and pages using the command `yarn plop`. The CLI menu will walk you through various options for creation, or you can bypass with a more specific command, e.g., `yarn plop page NewPage`, `yarn plop component atom Loader`, etc. Nested components like `components/atoms/buttons` can be automatically generated by including the path in the name, e.g., `yarn plop component atom buttons/PrimaryButton`.\n\nWhen creating new pages, `plop` will create the two necessary files for a new page (entry and HTML template) and automatically add the new page to the Vite config and `src/data/navData.tsx` with the correct order based on where you specify it in the CLI prompts. The new page will then be available in the nav and arrow key navigation immediately.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftimmybytes%2Ftemplate-vite-multipage-starter","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftimmybytes%2Ftemplate-vite-multipage-starter","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftimmybytes%2Ftemplate-vite-multipage-starter/lists"}