tutorial

example.js

// my project is built with a framework I built called Manifest.JS, almost every file looks just like this:

// creates a webpage element, the first two arguments are all you need to understand to complete this work:
const elem = new Element('div', settingsObj)
elem.appendTo(document.body)

// to decide what happens in the element, settingsObj looks like this and every property is optional (empty settings would create an empty element):
{
  name: 'hi', // helps debugging, just a name
  traits: {
    foo: 'bar' // properties within the traits object are passed down to all child elements
  }, 
  text: 'hello world', // text content
  styles: {
    'color': 'red'
  }
  
  // there are more setting properties but you don't need to worry much about them, and they should be self-evident
  // the onnly property you need to care about is this one:
  ready: self => {
  
    // once this element is created, what happens next? whatever you put here does
    // for example, maybe we want a child element
    self.append(new Element('div', {
      text: 'hi again'
      ready: self => {
        // just to demonstrate what I said above about traits being inherited by any appended children:
        console.log(self.traits.foo) // => 'bar'
      }
    }))
    
    // but as I go on, I need to separate these settings into separate files. See next comment:
  }
}

// this time, instead of passing one settings object, we pass an array of two which will both apply to the object.
// don't worry about how they merge, assume it's magic. Your job is to take a big file separate it into smaller files like this:

// manifest/something1/piece1.js
// instead of writing this code in one big file, we create a module export, like this:
module.exports = {
  text: 'piece1',
  ready: self => {
    self.append(new Element('div', {
      text: 'foo'
    })
  }
}

// then in the "parent" file, we use the exported settings like this:

const piece1 = require('./piece1.js')
const elem1 = new Element('div', [piece1, {
  // piece 1 is the template, but we can use this second settings object to overwrite
  // and customize an instance of the blueprint
  styles: {
    color: 'red'
  }
}).appendTo(document.body)
const elem2 = new Element('div', [piece1, {
  // a different version
  styles: {
    color: 'blue'
  }
}).appendTo(document.body)


// END TUTORIAL

// the rest fo this is just full size example like what you'll be modifying: 

new Element('div', [{
    name: 'app-wrapper',
    styles: {
        ...stylesheet.centered,
        'width': '100vw',
        'height': '100vh',
        'background-color': '#0e0f13',
        'color': '#FFFFFF'
    },
    traits: {
        publisher
    },
    ready: self => {
        //const placementGrid = self.append(new Element('div', [grid, {
        //}]))
        self.append(new Element('div', {
            name: 'decor-box',
            styles: {
                'background-color': 'rgb(0 2 6 / 23%)',
                'box-shadow': '0px 0px 55px -2px rgb(0 0 0 / 10%) inset',
                'opacity': '0.25',
                'position': 'absolute',
                'left': '-1950px',
                'top': '200px',
                'width': '8000px',
                'height': '8000px',
                'transform': 'rotate(45deg)'
            }
        }))

    }
}]).appendTo(document.body);