Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/apursley2012/y2k-web/llms.txt

Use this file to discover all available pages before exploring further.

The Guestbook component (components/Guestbook.js, exported as G) is a classic late-1990s sign-my-guestbook form. Visitors enter their name or handle and leave a short message; entries are saved to localStorage under the key retro_guestbook so they persist across page refreshes for the duration of the browser session. The component is embedded directly on the Home page (/) under a “Don’t forget to sign!” heading — it is not a standalone routed page.
The Guestbook form at components/Guestbook.js is not the same as the Contact page AIM-style instant-messenger window (at /contact). The Contact page (Ap component) is a separate IM chat interface. The Guestbook is the traditional sign-your-name form embedded on the home page.

​
Features

​
Name / Handle Input

A text <input> (max 20 characters) bound to a controlled state field. Visitors type their screen name or handle here.

​
Message Textarea

A <textarea> (max 150 characters, fixed height, no resize) bound to a second controlled state field. Visitors type their message here.

​
Sign It! Button

A Windows-98-styled <button type="submit"> that submits the form. On submit, handleSend validates that both fields are non-empty, prepends the new entry to the messages array, writes the updated array back to localStorage, and clears both inputs.

​
Message Log

A scrollable <div> (h-48 overflow-y-auto) displaying all guestbook entries. Each entry shows:
  • Name — in retro-blue Impact font
  • Date — right-aligned in pixel font (formatted via toLocaleDateString())
  • Message — in Comic Sans style
Entries are ordered newest-first (the new entry is prepended to the array).

​
Message State Structure

Messages live in a useState array. On mount a useEffect reads from localStorage:
  • If retro_guestbook exists in storage, it parses and loads those entries.
  • If not, it seeds two default entries and writes them to storage.
Each message object has four fields:
FieldTypeDescription
idstringUnique identifier (either a preset string or Date.now().toString())
namestringThe visitor’s name or handle
messagestringThe message body
datestringFormatted date string from toLocaleDateString()
The two seed entries are: 
[
  {
    id: '1',
    name: 'CoolDude99',
    message: 'Awesome site man!!! Keep it up.',
    date: new Date().toLocaleDateString(),
  },
  {
    id: '2',
    name: 'xX_DarkAngel_Xx',
    message: 'needs more evanescence midi files tbh...',
    date: new Date().toLocaleDateString(),
  },
]

​
Submit Logic

When the form is submitted, handleSend runs the following steps: 
const handleSend = (e) => {
  e.preventDefault();
  if (!name || !message) return;

  const newEntries = [
    { id: Date.now().toString(), name, message, date: new Date().toLocaleDateString() },
    ...messages,
  ];

  setMessages(newEntries);
  localStorage.setItem('retro_guestbook', JSON.stringify(newEntries));
  setName('');
  setMessage('');
};
New entries are prepended so the newest message always appears at the top of the log. The updated array is immediately written back to localStorage so entries survive a page refresh.

​
localStorage Persistence

All guestbook data is stored client-side. The storage key is retro_guestbook. Data is stored as a JSON-serialised array of message objects. There is no server-side component — entries are only visible in the browser that submitted them. To clear the guestbook, run the following in the browser console: 
localStorage.removeItem('retro_guestbook');
On the next page load, the component will re-seed the two default entries.

​
WindowFrame Title

The component is wrapped in a WindowFrame with the title Sign My Guestbook.exe.

​
Customizing the Seed Messages

To change the default messages shown before anyone has signed, find the seed array in the useEffect inside Guestbook.js and edit the entries: 
useEffect(() => {
  const stored = localStorage.getItem('retro_guestbook');
  if (stored) {
    setMessages(JSON.parse(stored));
  } else {
    const seeds = [
      { id: '1', name: 'YourFriend', message: 'Great site!', date: new Date().toLocaleDateString() },
      // Add more seed entries here
    ];
    setMessages(seeds);
    localStorage.setItem('retro_guestbook', JSON.stringify(seeds));
  }
}, []);
The maxLength attributes on the <input> (20 chars) and <textarea> (150 chars) are enforced by the browser’s native form validation. If you want to increase the limits, find those attributes in Guestbook.js and update the values — the localStorage serialisation has no length restriction of its own.

Build docs developers (and LLMs) love

Get started for freeTalk to us