https://github.com/timmybytes/template-vite-multipage-starter
https://github.com/timmybytes/template-vite-multipage-starter
Last synced: 6 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/timmybytes/template-vite-multipage-starter
- Owner: timmybytes
- Created: 2026-04-08T18:29:05.000Z (3 months ago)
- Default Branch: main
- Last Pushed: 2026-05-11T20:24:46.000Z (about 1 month ago)
- Last Synced: 2026-05-11T22:24:57.688Z (about 1 month ago)
- Language: TypeScript
- Size: 176 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Vite Multipage Template Starter
This repo serves as a starter template for a multipage Vite project scoped to a 1376x1032 resolution, wired up with the following:
- Vite.js + TypeScript
- twin.macro for Tailwind CSS with Emotion
- Plop for generating new components, hooks, and contexts
- GSAP for animations
- nanostores for state management
- Google Font via @fontsource
- Some basic tooling and configurations
## FYIs
This is a multipage Vite project with a couple quirks to be aware of.
### Pages
This 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.
During 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.:
```tsx
// pages/somePage/entry.tsx
PageWrapper({
pageReferences: ['Name'],
pageContent: (
Page Name
Content
),
});
```
#### Navigation
The `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).
#### References
In 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.
```tsx
PageWrapper({
pageReferences: ['Name'],
pageContent: (
Home
This page builds to dist/index.html.
),
});
```
#### Transitions
The `` 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.
Example of custom animation param object:
```tsx
Animated Heading
```
### Popups
Popups can be created in any page by calling the `openPopup` function through a button click or other triggering event:
```tsx
import { openPopup } from '@/stores/popupStore';
import { PopupButton } from '@/components/atoms/buttons';
...
openPopup({
title: (
Popup Title
),
content: (Popup content),
})
}
>Button text
```
The `` 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.
### Images & Assets
The 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.
### Plop Template File Generation
`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`.
When 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.