Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/m-valentino/sacredos

A Windows 9x inspired operating system written in Vanilla JS where every HTML file is executable.
https://github.com/m-valentino/sacredos

90s css3 desktop gui help-wanted html5 javascript kernel opentocontribution operating-system os retro vanilla-javascript vanilla-js windows9x

Last synced: about 2 months ago
JSON representation

A Windows 9x inspired operating system written in Vanilla JS where every HTML file is executable.

Awesome Lists containing this project

README 

        
# Sacred OS



Sacred OS is a simulated operating system that runs in your browser. It is a Windows 9x inspired OS, and every

HTML file is executable. Sacred OS is written in vanilla JavaScript. Sacred OS uses a bootloader so you can

use the OS with your saved settings, programs, files, etc.

Sacred OS Screenshot



## How it works



Sacred OS runs off a JavaScript object which is essentially the "hard disk". The GUI, the kernal, programs,

and more are all stored here. The bootloader writes to this object either by uploading a disk backup or by

fetching all the necessary files and storing them (what happens when you boot from a fresh install).



In Sacred OS, HTML files are executable. When you execute an HTML file, it is loaded into a window which

contains an iframe of the HTML file. These HTML files can communicate with the kernel, such as requesting

the system's main style sheet or writing to the disk.



## Running Locally



In order for Sacred OS to function properly in a local environment, the files need to have an origin to them.

Otherwise, you will expirience CORS errors. One solution is to use Node.js to create an http server.



#### Starting the http Server



After cloning the repo, go into your terminal and change the current directory to `public` and run



`npx http-server --cors`.



## Developing in Sacred OS



If you want to make a pull request for the operating system portion of the code, you should make a fork off the current unreleased Sacred OS version, otherwise, make a fork off of main. Anything inside the `appStore` and `outsideTheOS` directories are not part of the operating system code. Changes to those places aren't included in release notes or the change log.



If you have an app you want to publish and don't feel comfortable working with the repo, you can make an issue with a link to your app's repo. I can put the app in the OS for you.



### Communicating with the kernel



To see an incomplete list of kernel commands, Click here.



### Requesting System styling for a program



What isn't planned on being changed is how programs can receive system CSS styling for things like buttons and inputs.

The system styling is stored in `gui.css`. Below is how you would send a mesage to the kernel to get the styling and apply it to the current program:



```

window.top.postMessage("REQ:SS", "*");

    window.onmessage = function (e) {

      if (e.data.startsWith("SS:")) {

        const stylesheet = e.data.substring(3);

        try {

          const styleElement = document.createElement('style');

          styleElement.type = 'text/css';

          styleElement.innerText = stylesheet;

          document.head.appendChild(styleElement);

        } catch (error) {

          console.error("Error requesting stylesheet:", error);

        }

        return;

      }

    };

```



### Publishing an app in the app store



If you have a good single page web app or game that can be contained in an HTML file, I'm accepting pull requests

to add it into my OS's app store. You will need to add your app inside the `appStore/apps` directory and update

`appStoreData.json`. You will need an `install.js` file. You can simply copy and paste the code from an existing one and then modify it. Your icon should be square shaped. I do ask that assets from external URLs should only be used for fonts and coding libraries from

well known organizations like Tailwind CSS and Google Fonts for example.



Apps must not contain content that violates copyright.



### Sacred OS HTML Program Headers



If you want to assign a specific default window size to a program or disable resizing, you must put a comment

at the top of the HTML file that follows this structure:

``.



- `width` and `height`: window size in CSS pixel units.

- `noRS`: stands for "no resize". This disables a maximize button from appearing on the program.



### Running Tests

To run unit tests on Sacred OS, you go to the running instance of Sacred OS itself, open files.html, and navigate to `://programs/default`. Run `osTest.html`.



## Deploying



### Easy Deployment



Deploying Sacred OS to any site is really simple. All you have to do is copy all the files inside the `public`

folder.



### Automatic Deployment to Neocities



For my personal deployment on Neocities, I use a GitHub action to automatically upload changed files in

the `public` folder after every merge to the main branch. The reason why the `public` folder exists is

because Neocities only allows specific file types, and this repo has some files that aren't uploadable, so they

are stored in the root of this repo. To learn more about deploying to Neocities, read this guide:

https://liassica.codeberg.page/posts/0002-neocities-github/