Nostalgia OS

A website in the style of old-school operating systems.

Desktop Application

This project can be built as a standalone desktop application using Tauri, allowing users to download and run Nostalgia OS on macOS, Windows, and Linux.

Prerequisites

• Rust (for Tauri)
• Node.js (for package management)
• Python 3 (for development server)

Development

To run the desktop app in development mode:

npm run tauri:dev

This will start the development server and open the Tauri application window.

Building for Production

To build the desktop application for distribution:

npm run tauri:build

This will create platform-specific installers in the src-tauri/target/release/bundle/ directory:

• macOS: .dmg and .app files
• Windows: .exe installer and .msi files
• Linux: .deb, .AppImage, and .rpm files

Web Version

The original web version can still be served using:

npm run dev

Then open http://localhost:3000 in your browser.

Adding new desktop icons

WARNING: This section is out of date.

1. Search in the document for <!-- Desktop Icons -->
2. Copy one of them and customize as needed:

  <div id="icon-computer" class="flex flex-col items-center cursor-pointer draggable-icon"
    data-window-title="My Computer" data-window-id="desktopIcon1" data-window-type="default"
    data-window-dimensions='{"type": "default"}'>
    <img src="./image/computer.svg" alt="My Computer" class="mb-1 shadow-lg max-w-20" />
    <span class="text-xs">My Computer</span>
  </div>

3. Example icon:

  <div id="example" class="flex flex-col items-center cursor-pointer draggable-icon"
    data-window-title="Example" data-window-id="desktopIcon1" data-window-type="default"
    data-window-dimensions='{"type": "default"}'
    data-window-content='<p>This is example markup. Recommended to ampersand escape reserved characters.</p>'>
    <img src="./image/example.svg" alt="Example" class="mb-1 shadow-lg max-w-20" />
    <span class="text-xs">Example</span>
  </div>

Adding new Start Menu items

WARNING: This section is out of date.

1. Search in the document for <!-- Start Menu -->
2. Copy one of them and customize as needed:

<li class="px-4 py-2 hover:bg-gray-50 cursor-pointer" onclick="openNav('Settings', { type: 'default' }, 'Settings')">Settings</li>

3. Modified menu item:

<li class="px-4 py-2 hover:bg-gray-50 cursor-pointer" onclick="openNav('ExampleItem', '<p class=&quot;font-bold&quot;>This is some example content using HTML markup</p>', { type: 'integer', width: 600, height: 400 }, 'ExampleItem')">Example Item</li>

Adding new media files for the Documents folder

WARNING: This section is out of date.

1. Add the filename in api/media.json

[
  "inspo.jpg",
  "mail.mp3",
  "test.html",
  "FAQ.md",
  "contact.txt",
  "my-new-item.webp"
]

2. Paste your new file in the media folder

media
├── FAQ.md
├── contact.txt
├── inspo.jpg
├── mail.mp3
├── test.html
└── my-new-item.webp

Buttons

This is how buttons should be implemented.

<button id="some-example-button" onclick="setTimeout(function(){toggleButtonActiveState('some-example-button', 'OK')}, 1000);toggleButtonActiveState('some-example-button', 'Cool!');createWindow('OK Button Pressed', 'Your OK button has successfully been pressed!', false, 'ok-pressed', false, false, { type: 'integer', height: 300, width: 200 }, 'default');" class="bg-gray-200 border-t-2 border-l-2 border-gray-300 mr-2"><span class="border-b-2 border-r-2 border-black block h-full w-full py-1.5 px-3">OK</span></button>

Real Mobile Testing

A good idea for QA is to test on a real mobile device using ngrok to access your localhost.

1. After installing and setting up your ngrok, start the tunnel:

ngrok http 5173 --domain=irm-indev.ngrok.io

2. Update the allowedHosts in ./vite.config.js with the subdomain generated by ngrok, for example:

export default defineConfig({
  plugins: [tailwindcss()],
  build: {
    outDir: 'docs',
    emptyOutDir: false, // Don't empty the docs directory to preserve existing files like CNAME
  },
  publicDir: 'public', // Ensure public files are copied
  server: {
    port: 5173,
    strictPort: true, // Fail if port 8080 is not available
    allowedHosts: ['localhost', 'irm-indev.ngrok.io', 'your-own-ngrok.ngrok.io'] // Only bind to localhost for security
  }
})