Starter Layouts & Templates
Relevant source files
The following files were used as context for generating this wiki page:
Starter Layouts and Templates provide new PuppyPad members with pre-defined HTML structures during the registration process. These templates serve as the initial index.html for a user's site, allowing for immediate publication without requiring manual coding. The system is designed to be extensible, allowing users to modify every color, font, and box once the site is created.
Sources: src/starters.js:2, PLAN.md:104-106, src/views.js:213-214
Template Architecture
The starter system utilizes static HTML files stored in the templates/ directory. The src/starters.js module loads these files into memory at startup and provides functions to render them with user-specific data.
Available Layouts
| ID | Name | Description | Base Style |
|---|---|---|---|
sky | Sky Blue | Stacked boxes on blue background with a marquee. | Classic PuppyPad |
shrine | Shrine | Left-side menu with content on the right; pastel polka dots. | Sidebar |
notebook | Notebook | Ruled paper style with a single column of dated entries. | Diary |
arcade | Arcade | Black and neon tiles that wrap to fit any screen. | Neon/Grid |
Sources: src/starters.js:7-12, templates/sky.html, templates/shrine.html, templates/notebook.html, templates/arcade.html
Rendering Logic
The render function processes templates by replacing placeholders with configuration and user data. It replaces three primary tokens:
{{NAME}}: The member's site name.{{HOST_NAME}}: The name of the hosting service (e.g., PuppyPad).{{HOST_URL}}: The base URL of the hosting service.
Sources: src/starters.js:18-20
The diagram shows the string replacement sequence used to personalize a starter template for a new user.
Sources: src/starters.js:18-20
System Integration
Starter templates are integrated into two primary user flows: Account Signup and Dashboard recovery.
Signup Flow
During signup, users select a starter via a radio button group. The server validates the selection and writes the rendered HTML to the user's root index.html file. If the selection is invalid, the system defaults to the sky layout.
Sources: src/server.js:433-435, src/server.js:452-453, src/starters.js:13
Dashboard Recovery
If the server detects that a member's site lacks a front page (index.html), the dashboard displays a warning and offers the starter picker to regenerate the file. Users can also use the "Start over with a starter" section to replace an existing index.html, though this requires an explicit confirmation step to prevent accidental data loss.
Sources: src/views.js:319-322, src/server.js:591-594, src/server.js:596
This sequence illustrates the safeguard mechanism preventing users from overwriting their existing front page without confirmation.
Sources: src/server.js:591-608, src/views.js:296-302
Technical Implementation Details
Placeholder Stand-ins for Previews
The preview function in src/starters.js modifies templates for display on the main site's gallery. Because the main site does not have a user-specific hit counter or guestbook, the preview replaces real widget endpoints with stand-in data URIs and srcdoc content.
- Counter: Replaced with a green monospace SVG showing "0001337".
- Guestbook: Replaced with an iframe containing the text "Your guestbook shows up here."
Sources: src/starters.js:24-27
File Constraints
Writing a starter to disk is subject to system-wide quotas. The operation fails if:
- The user has reached the maximum file count limit (2000 files).
- The user has insufficient remaining disk space for the generated HTML.
- A directory exists with the name
index.html.
Sources: src/server.js:598-600, src/server.js:601-603
Template Personalization Snippet
Templates include local CSS :root variables to facilitate easy global style changes.
:root {
--page: #4aa9e6; /* background behind the boxes */
--box: #fdfeff; /* inside the boxes */
--text: #14264f;
--font: "Comic Sans MS", "Chalkboard SE", cursive;
--width: 720px; /* how wide the page gets */
}
Sources: templates/sky.html:13-22
Summary
Starter Layouts & Templates are a core feature of the PuppyPad onboarding experience. They provide structured HTML via a centralized management module (src/starters.js) and personalized rendering using simple string replacement. By integrating these templates into both the signup and dashboard flows, the system ensures users always have a viable path to a functional front page while maintaining protection against accidental overwrites.