nfp_is: moved nfpis over here

discord_embed/dev.mjs

@@ -1,24 +0,0 @@
-import fs from 'fs'
-import { ServiceCore } from 'service-core'
-import * as index from './index.mjs'
-
-const port = 4120
-
-var core = new ServiceCore('nfp_moe', import.meta.url, port, '')
-
-let config = {
-  frontend: {
-    url: 'http://localhost:' + port
-  }
-}
-
-try {
-  config = JSON.parse(fs.readFileSync('./config.json'))
-} catch {}
-
-config.port = port
-
-core.setConfig(config)
-core.init(index).then(function() {
-  return core.run()
-})

discord_embed/index.mjs

@@ -1,3 +1,5 @@
+import fs from 'fs'
+import { pathToFileURL } from 'url'
 import config from './base/config.mjs'
 
 export function start(http, port, ctx) {
@@ -9,3 +11,28 @@ export function start(http, port, ctx) {
     return server.run()
   })
 }
+
+if (import.meta.url === pathToFileURL(process.argv[1]).href) {
+  import('service-core').then(core => {
+    const port = 4120
+
+    var core = new core.ServiceCore('nfp_moe', import.meta.url, port, '')
+
+    let config = {
+      frontend: {
+        url: 'http://localhost:' + port
+      }
+    }
+
+    try {
+      config = JSON.parse(fs.readFileSync('./config.json'))
+    } catch {}
+
+    config.port = port
+
+    core.setConfig(config)
+    core.init({ start }).then(function() {
+      return core.run()
+    })
+  })
+}

discord_embed/package.json

@@ -8,8 +8,8 @@
     "test": "test"
   },
   "scripts": {
-    "start": "node --experimental-modules index.mjs",
-    "dev:server": "node dev.mjs | bunyan",
+    "start": "node index.mjs",
+    "dev:server": "node index.mjs | bunyan",
     "dev": "npm-watch dev:server"
   },
   "watch": {

nfp_is/.npmrc

@@ -0,0 +1 @@
+package-lock=false

nfp_is/api/serve.mjs

@@ -0,0 +1,20 @@
+import path from 'path'
+import Parent from '../base/serve.mjs'
+import fs from 'fs/promises'
+import config from '../base/config.mjs'
+
+export default class ServeHandler extends Parent {
+  loadTemplate(indexFile) {
+    this.template = indexFile.toString()
+  }
+
+  async serveIndex(ctx) {
+    if (config.get('NODE_ENV') === 'development') {
+      let indexFile = await fs.readFile(path.join(this.root, 'index.html'))
+      this.loadTemplate(indexFile)
+    }
+
+    ctx.body = this.template
+    ctx.type = 'text/html; charset=utf-8'
+  }
+}

nfp_is/api/server.mjs

@@ -0,0 +1,27 @@
+import config from '../base/config.mjs'
+import Parent from '../base/server.mjs'
+import StaticRoutes from '../base/static_routes.mjs'
+import ServeHandler from './serve.mjs'
+
+export default class Server extends Parent {
+  init() {
+    super.init()
+    let localUtil = new this.core.sc.Util(import.meta.url)
+
+    delete this.flaskaOptions.appendHeaders['Content-Security-Policy']
+    this.flaskaOptions.nonce = []
+
+    this.routes = {
+      static: new StaticRoutes(),
+    }
+    this.routes.serve = new ServeHandler({
+      root: localUtil.getPathFromRoot('../public'),
+      version: this.core.app.running,
+      frontend: config.get('frontend:url'),
+    })
+  }
+
+  runCreateDatabase() {
+    return {}
+  }
+}

nfp_is/app/footer.js

@@ -0,0 +1,51 @@
+var m = require('mithril')
+var Helper = require('./helper')
+
+var Footer = {
+  oninit: function(vnode) {
+    vnode.state.scrollListenerWaiting = []
+  },
+
+  view: function(vnode) {
+    return [
+      m('div.outerbox', [
+        m('div.innerbox', [
+          m('div.image', {
+            oncreate: function(subnode) {
+              Helper.scrollAddItem(vnode, {
+                dom: subnode.dom,
+                className: 'visible',
+                threshold: -100,
+                img: '/assets/images/contact.svg',
+              })
+            },
+          }),
+          m('aside', [
+            m('h3', 'Hafðu samband'),
+            m('p', `
+              Sendu okkur tölvupóst og lýstu þínum þörfum. Við munum setja okkur
+              inn í málin og finna lausnir. Við bjóðum persónulega og
+              metnaðarfulla þjónustu fyrir alla okkar viðskiptavini.
+            `),
+            m('h5', 'nfp@nfp.is'),
+          ]),
+        ]),
+        m('div.meta', [
+          m('span', 'Nordic Freelance Partners ehf.'),
+          m('span', 'nfp@nfp.is'),
+          m('span', 'kt. 420623-0110'),
+          m('span', [
+            'Bakgrunnsmyndir frá ',
+            m('a', { href: 'https://www.freepik.com/pikisuperstar' }, 'pikisuperstar úr freepik.com'),
+          ]),
+        ]),
+      ]),
+    ]
+  },
+}
+
+/*
+ <a href="https://www.freepik.com/free-photos-vectors/background">Background vector created by pikisuperstar - www.freepik.com</a> 
+*/
+
+module.exports = Footer

nfp_is/app/front/front.styl

@@ -0,0 +1,138 @@
+article {
+  &.solution {
+    box-shadow: 0 5px 50px #0005;
+    background: #e9e9e9;
+    margin: 0 0 5vh;
+    height: 800px;
+    
+    h3 {
+      font-size: 5vh;
+      padding: 5vh 20px;
+      font-weight: bold;
+      text-align: center;
+      position: relative;
+      align-self: center;
+      
+      .left, .right {
+        position: absolute;
+        top: 50%;
+        margin-top: 0px;
+        border-bottom: 2px solid #29688c;
+      }
+
+      .left {
+        right: 100%;
+        left: -9999px;
+      }
+      
+      .right {
+        left: 100%;
+        right: -9999px;
+      }
+    }
+  }
+  
+  &.hosting {
+    height: 600px;
+  }
+  
+  &.programming {
+    background: #29688c;
+    background: linear-gradient(150deg, #020024 15%, #29688c 100%);
+    color: white;
+    position: relative;
+    min-height: auto;
+    height: 70vw;
+    max-height: 80vh;
+    min-height: 600px;
+    
+    section {
+    }
+    
+    aside {
+      align-self: flex-start;
+      position: relative;
+      z-index: 2;
+      margin-top: 5vh;
+      flex: 1 1 auto;
+      width: 90%;
+      max-width: 1440px;
+      
+      .item {
+        width: 50%;
+        min-width: 500px;
+        text-align: left;
+      }
+    }
+    
+    h3 {
+      align-self: flex-start;
+      padding: 10px 0 40px;
+    }
+    
+    a {
+      border-color: white;
+      color: white;
+      align-self: flex-start;
+    }
+    
+    .image {
+      position: absolute;
+      right: 0;
+      bottom: 0;
+      width: 87%;
+      height: 90%;
+      max-width: none;
+      background-position: right bottom;
+      background-size: contain;
+    }
+  }
+  
+  &.video {
+    min-height: 70vh;
+  }
+}
+
+@media only screen and (max-width: 810px) {
+  article.solution h3 {
+    font-size: 2em;
+  }
+}
+
+@media only screen and (max-width: 800px) {
+  article.programming {
+    max-height: none;
+    min-height: auto;
+    padding: 0 40px 300px;
+    
+    section {
+    }
+    
+    aside {
+      margin-top: 10px;
+      width: 100%;
+
+      .item {
+        width: 100%;
+        min-width: auto;
+      }
+    }
+    
+    h3 {
+      align-self: center;
+    }
+    
+    .image {
+      width: 100%;
+      height: 300px;
+      max-width: none;
+      background-position: right bottom;
+      background-size: contain;
+      transform: translate(50%, 0);
+    }
+    
+    .visible.image {
+      transform: translate(0px, 0px);
+    }
+  }
+}

nfp_is/app/front/index.js

@@ -0,0 +1,239 @@
+var m = require('mithril')
+var Helper = require('../helper')
+
+var Front = {
+  oninit: function(vnode) {
+    Helper.init(vnode, 'frontpage', {
+      ratio: 0.91,
+    })
+  },
+
+  view: function(vnode) {
+    return [
+      m('header', {
+        oncreate: function(subnode) {
+          vnode.state.domContainer = subnode.dom
+          Helper.checkCreated(vnode)
+          Helper.scrollAddItem(vnode, {
+            dom: subnode.dom,
+            className: 'visible',
+          })
+        },
+      }, m('div.container', [
+          !vnode.state.isMobile ? m('video', {
+              oncreate: function(subnode) {
+                vnode.state.domVideo = subnode.dom
+                Helper.checkCreated(vnode)
+              },
+              preload: 'none',
+              loop: true,
+              muted: true,
+              playsinline: true,
+            }, [
+              m('source', {
+                src: vnode.state.videoUrl,
+                type: 'video/mp4',
+              }),
+              m('source', {
+                src: '/assets/cover/frontpage.webm',
+                type: 'video/webm',
+              }),
+            ]
+          ) : m('div', {
+                oncreate: function(subnode) {
+                  vnode.state.domVideo = subnode.dom
+                  Helper.checkCreated(vnode)
+                },
+              }),
+          m('div',
+            m('img', {
+              oncreate: function(subnode) {
+                vnode.state.domImg = subnode.dom
+                Helper.lazyLoadImage(vnode, 'domImg', '/assets/cover/frontpage.jpg')
+                Helper.checkCreated(vnode)
+              },
+              src: 'data:image/jpeg;base64,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',
+            })
+          ),
+          m('nav', [
+            m(m.route.Link, { class: 'title', href: '/' }, m('span', 'NFP')),
+            m('div.filler'),
+            m(m.route.Link, { href: '/hosting-solutions' }, [ 'Hýsingarlausnir', m('div') ]),
+            m(m.route.Link, { href: '/programming-solutions' }, [ 'Forritunarlausnir', m('div') ]),
+            m(m.route.Link, { href: '/video-solutions' }, [ 'Videólausnir', m('div') ]),
+          ]),
+          m('div.content', [
+            m('h1', 'Nýjir tímar kalla á nýjar lausnir'),
+            m('h2', '...og við erum með þær'),
+          ]),
+        ])
+      ),
+      m('main', [
+        // Solutions
+        m('article.solution', [
+          m('h3', [
+            'Hvað getum við gert fyrir þig?',
+            m('div.left'),
+            m('div.right'),
+          ]),
+          m('section', [
+            m('aside', [
+              m('div.item', {
+                oncreate: function(subnode) {
+                  Helper.scrollAddItem(vnode, {
+                    dom: subnode.dom,
+                    className: 'visible',
+                    threshold: -100,
+                  })
+                },
+              }, [
+                m('h5', 'Þínar þarfir'),
+                m('p', `
+                  Þarfir fólks og fyrirtækja eru margvíslegar og krefjast
+                  oft sérstæðrar nálgunar. Starfslið okkar hefur víðtæka
+                  reynslu í þarfagreiningu og útfærslum á ýmsum sviðum
+                  hins stafræna nútíma. 
+                `),
+              ]),
+              m('div.item', {
+                oncreate: function(subnode) {
+                  Helper.scrollAddItem(vnode, {
+                    dom: subnode.dom,
+                    className: 'visible',
+                    threshold: -100,
+                  })
+                },
+              }, [
+                m('h5', 'Okkar lausnir'),
+                m('p', `
+                  Hvort sem þú ert að leitast eftir hýsingu, hugbúnaðargerð,
+                  vefhönnun, streymi- eða upptökulausnum, þá erum við með
+                  þekkinguna og reynsluna. Við erum alltaf tilbúnir til
+                  leiks og elskum að taka að okkur krefjandi verkefni.
+                `),
+              ]),
+            ]),
+            m('div.image', {
+              oncreate: function(subnode) {
+                Helper.scrollAddItem(vnode, {
+                  dom: subnode.dom,
+                  className: 'visible',
+                  threshold: -100,
+                  img: '/assets/images/solutions.svg',
+                })
+              },
+            }),
+          ]),
+        ]),
+        // Solutions
+        m('article.hosting', [
+          m('section', [
+            m('aside', [
+              m('div.item', {
+                oncreate: function(subnode) {
+                  Helper.scrollAddItem(vnode, {
+                    dom: subnode.dom,
+                    className: 'visible',
+                    threshold: -100,
+                  })
+                },
+              }, [
+                m('h3', 'Hýsingarlausnir'),
+                m('p', `
+                  Hvort heldur sem þig vantar vefhýsingu, sýndarvélar eða
+                  geymslu og meðhöndlun gagna þá getum við fundið lausn sem
+                  hentar þér.
+                `),
+                m(m.route.Link, { class: 'next', href: '/hosting-solutions' }, 'Lesa meira'),
+              ]),
+            ]),
+            m('div.image', {
+              oncreate: function(subnode) {
+                Helper.scrollAddItem(vnode, {
+                  dom: subnode.dom,
+                  className: 'visible',
+                  threshold: -100,
+                  img: '/assets/images/hosting.svg',
+                })
+              },
+            }),
+          ]),
+        ]),
+        // Programming
+        m('article.programming', [
+          m('section', [
+            m('aside', [
+              m('div.item', {
+                oncreate: function(subnode) {
+                  Helper.scrollAddItem(vnode, {
+                    dom: subnode.dom,
+                    className: 'visible',
+                    threshold: -100,
+                  })
+                },
+              }, [
+                m('h3', 'Forritunarlausnir'),
+                m('p', `
+                  Ef þig vantar sérlausn eða aðstoð með þín verkefni að þá
+                  getum við hjálpað þér. Við höfum yfir 20 ára reynslu í
+                  forritun og hugbúnaðargerð. 
+                `),
+                m(m.route.Link, { class: 'next', href: '/programming-solutions' }, 'Lesa meira'),
+              ]),
+            ]),
+            m('div.image', {
+              oncreate: function(subnode) {
+                Helper.scrollAddItem(vnode, {
+                  dom: subnode.dom,
+                  className: 'visible',
+                  threshold: -100,
+                  img: '/assets/images/programming.svg',
+                })
+              },
+            }),
+          ]),
+        ]),
+        // Programming
+        m('article.video', [
+          m('section', [
+            m('aside', [
+              m('div.item', {
+                oncreate: function(subnode) {
+                  Helper.scrollAddItem(vnode, {
+                    dom: subnode.dom,
+                    className: 'visible',
+                    threshold: -100,
+                  })
+                },
+              }, [
+                m('h3', 'Streymi- og upptökulausnir'),
+                m('p', `
+                  Hvort sem er að ræða fundi eða ráðstefnur þá tökum við að
+                  okkur upptökur og streymingu á þeim. Við höfum margra ára
+                  reynslu og getum unnið í hvaða sal sem er.
+                `),
+                m(m.route.Link, { class: 'next', href: '/video-solutions' }, 'Lesa meira'),
+              ]),
+            ]),
+            m('div.image', {
+              oncreate: function(subnode) {
+                Helper.scrollAddItem(vnode, {
+                  dom: subnode.dom,
+                  className: 'visible',
+                  threshold: -100,
+                  img: '/assets/images/video.svg',
+                })
+              },
+            }),
+          ]),
+        ]),
+      ]),
+    ]
+  },
+}
+
+/*
+<a href="https://www.freepik.com/free-photos-vectors/background">Background vector created by macrovector - www.freepik.com</a>
+*/
+
+module.exports = Front

nfp_is/app/helper.js

@@ -0,0 +1,249 @@
+var Helper = {
+  init: function(vnode, filename, options) {
+    vnode.state.domImg = null
+    vnode.state.domVideo = null
+    vnode.state.domContainer = null
+    vnode.state.isMobile = Helper.isMobile()
+
+    vnode.state.videoShow = false
+    vnode.state.videoFilename = filename
+    vnode.state.resizePauseTimeout = null
+    vnode.state.resizeTimeout = null
+    vnode.state.videoResizeThrottler = Helper.resizeThrottler.bind(vnode.state, vnode)
+    vnode.state.scrollListener = null
+    vnode.state.scrollListenerWaiting = []
+    vnode.state.videoVisibilityHidden = ''
+    vnode.state.videoVisibilityEvent = null
+    vnode.state.videoVisibilityChanged = null
+    vnode.state.videoResizeRatio = options && options.ratio || 1
+    vnode.state.videoUrl = screen.width > 1280
+      ? '/assets/cover/' + filename + '_1080.mp4'
+      : '/assets/cover/' + filename + '_720.mp4'
+  },
+
+  isMobile: function() {
+    var check = false;
+    (function(a) {
+      if (/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino|android|ipad|playbook|silk/i.test(a) || /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0, 4))) check = true
+    })(navigator.userAgent || navigator.vendor || window.opera);
+    return check
+  },
+
+  clear: function(vnode) {
+    vnode.state.scrollListenerWaiting.splice(0, vnode.state.scrollListenerWaiting.length)
+    window.removeEventListener('resize', vnode.state.videoResizeThrottler)
+    window.removeEventListener('scroll', vnode.state.scrollListener, false)
+    window.removeEventListener(vnode.state.videoVisibilityEvent, vnode.state.videoVisibilityChanged)
+  },
+
+  scrollListener: function(vnode) {
+    if (!vnode.state.scrollListenerWaiting.length) return
+    
+    var scrollTop = window.pageYOffset
+    var height = window.innerHeight
+
+    for (var i = 0; i < vnode.state.scrollListenerWaiting.length; i++) {
+      Helper.scrollItemIsVisible(vnode, vnode.state.scrollListenerWaiting[i], scrollTop, height)
+    }
+  },
+
+  scrollCheckEmpty: function(vnode) {
+    if (vnode.state.scrollListenerWaiting.length) return
+
+    vnode.state.scrollListener = null
+    window.removeEventListener('scroll', vnode.state.scrollListener, false)
+  },
+
+  scrollAddItem: function(vnode, options) {
+    var bound = options.dom.getBoundingClientRect()
+    var scrollTop = window.pageYOffset
+
+    var item = {
+      dom: options.dom,
+      threshold: options.threshold || 100,
+      top: Math.round(bound.top) + Math.round(scrollTop),
+      bottom: Math.round(bound.bottom) + Math.round(scrollTop),
+      className: ' ' + options.className,
+      img: options.img || null,
+      ticking: false,
+    }
+
+    vnode.state.scrollListenerWaiting.push(item)
+
+    if (!vnode.state.scrollListener) {
+      vnode.state.scrollListener = Helper.scrollListener.bind(vnode.state, vnode)
+      window.addEventListener('scroll', vnode.state.scrollListener, false)
+    }
+    Helper.scrollItemIsVisible(vnode, item, window.pageYOffset, window.innerHeight)
+  },
+
+  scrollResetBound: function(vnode) {
+    var scrollTop = window.pageYOffset
+
+    vnode.state.scrollListenerWaiting.forEach(function (item) {
+      var bound = item.dom.getBoundingClientRect()
+      item.top = Math.round(bound.top) + Math.round(scrollTop)
+    })
+  },
+
+  scrollItemIsVisible: function(vnode, item, scrollTop, height) {
+    if (item.ticking) return
+
+    if (item.top - item.threshold < scrollTop + height) {
+      item.ticking = true
+
+      if (item.img) {
+        Helper.lazyLoadImage(vnode, null, item.img, function() {
+          item.dom.style.backgroundImage = 'url("' + item.img + '")'
+
+          requestAnimationFrame(function() {
+            item.dom.className += item.className
+            var index = vnode.state.scrollListenerWaiting.indexOf(item)
+
+            if (index >= 0) {
+              vnode.state.scrollListenerWaiting.splice(index, 1)
+            }
+            Helper.scrollCheckEmpty(vnode)
+          })
+        })
+      } else {
+        requestAnimationFrame(function() {
+          item.dom.className += item.className
+          var index = vnode.state.scrollListenerWaiting.indexOf(item)
+
+          if (index >= 0) {
+            vnode.state.scrollListenerWaiting.splice(index, 1)
+          }
+          Helper.scrollCheckEmpty(vnode)
+        })
+      }
+    }
+  },
+
+  checkCreated: function(vnode) {
+    if (!vnode.state.domImg || !vnode.state.domVideo || !vnode.state.domContainer) return
+
+    vnode.state.videoShow = Boolean(vnode.state.domVideo.play)
+
+    window.addEventListener('resize', vnode.state.videoResizeThrottler, false)
+
+    Helper.resizeHandler(vnode)
+    if (vnode.state.videoShow) {
+      vnode.state.domVideo.play()
+
+      if (typeof document.hidden !== 'undefined') { // Opera 12.10 and Firefox 18 and later support 
+        vnode.state.videoVisibilityHidden = 'hidden'
+        vnode.state.videoVisibilityEvent = 'visibilitychange'
+      } else if (typeof document.msHidden !== 'undefined') {
+        vnode.state.videoVisibilityHidden = 'msHidden'
+        vnode.state.videoVisibilityEvent = 'msvisibilitychange'
+      } else if (typeof document.webkitHidden !== 'undefined') {
+        vnode.state.videoVisibilityHidden = 'webkitHidden'
+        vnode.state.videoVisibilityEvent = 'webkitvisibilitychange'
+      }
+
+      if (vnode.state.videoVisibilityHidden && vnode.state.videoVisibilityEvent) {
+        vnode.state.videoVisibilityChanged = Helper.visibilityChanged.bind(this, vnode)
+
+        document.addEventListener(vnode.state.videoVisibilityEvent, vnode.state.videoVisibilityChanged, false)
+      }
+    }
+  },
+
+  visibilityChanged: function(vnode) {
+    if (document[vnode.state.videoVisibilityHidden]) {
+      vnode.state.domVideo.pause()
+    } else {
+      vnode.state.domVideo.play()
+    }
+  },
+
+  resizeThrottler: function(vnode) {
+    if (vnode.state.videoShow) {
+      if (!vnode.state.resizePauseTimeout) {
+        vnode.state.domVideo.pause()
+      }
+      clearTimeout(vnode.state.resizePauseTimeout)
+      vnode.state.resizePauseTimeout = setTimeout(function () {
+        vnode.state.resizePauseTimeout = null
+
+        requestAnimationFrame(function() {
+          Helper.scrollResetBound(vnode)
+          vnode.state.domVideo.play()
+        })
+      }, 250)
+    }
+
+    if (!vnode.state.resizeTimeout) {
+      vnode.state.resizeTimeout = setTimeout(function () {
+        vnode.state.resizeTimeout = null
+        Helper.resizeHandler(vnode)
+      }, 66)
+    }
+  },
+
+  resizeHandler: function(vnode) {
+    var height = Helper.getHeight(vnode)
+    var width = document.documentElement.clientWidth
+
+    Helper.scaleContainer(vnode, height)
+    Helper.scaleContainerContent(vnode, 'domImg', true, width, height)
+    Helper.scaleContainerContent(vnode, 'domVideo', false, width, height)
+  },
+
+  lazyLoadImage: function(vnode, name, url, cb) {
+    if (!vnode.state[name] && !cb) return
+
+    var img = document.createElement('img')
+    img.onload = function() {
+      if (cb) {
+        cb()
+      } else {
+        vnode.state[name].src = url
+      }
+    }
+    img.src = url
+  },
+
+  scaleContainer: function(vnode, height) {
+    if (!vnode.state.domContainer) return
+    vnode.state.domContainer.setAttribute('style', 'height: ' + height + 'px;')
+  },
+
+  scaleContainerContent: function(vnode, name, forceHeight, width, height) {
+    if (!vnode.state[name]) return
+
+    var videoRatio = 0.5625
+    var windowRatio = height / width
+
+    if (windowRatio > videoRatio) {
+      var videoWidth = height / videoRatio
+      var marginFromLeft = -(videoWidth - width) / 2 + 'px'
+        vnode.state[name].setAttribute('style',
+            'margin-top: 0; margin-left: ' + marginFromLeft + ';' +
+            'width: ' + videoWidth + 'px; height: ' + height + 'px')
+    } else {
+        if (forceHeight) {
+            vnode.state[name].setAttribute('style',
+                'width: ' + width + 'px; height: ' + height + 'px')
+        } else {
+            vnode.state[name].setAttribute('style',
+                'width: ' + width + 'px;')
+        }
+    }
+  },
+
+  getHeight: function(vnode) {
+    var height = document.documentElement.clientHeight + 5
+    if (height < 485) {
+        height = 485
+    } else {
+      height = height * vnode.state.videoResizeRatio
+    }
+    return height
+  },
+}
+
+window.helper = Helper
+
+module.exports = Helper

nfp_is/app/hosting/hosting.styl

@@ -0,0 +1,202 @@
+header.hosting {
+  h1 {
+    font-size: 4.3vw;
+    margin-bottom: 10px;
+  }
+  h2 {
+    font-size: 2.5vw;
+  }
+}
+
+article {
+  &.hostintro {
+    .image {
+      transform: translate(-50%, 0px);
+    }
+    
+    .visible.image {
+      transform: translate(0px, 0px);
+    }
+  }
+  
+  &.hoststorage {
+    background: #29688c;
+    background: linear-gradient(150deg, #020024 15%, #29688c 100%);
+    color: white;
+    position: relative;
+    height: 80vh;
+    min-height: 600px;
+    
+    section {
+      justify-content: flex-end;
+    }
+    
+    aside {
+      align-items: center;
+      max-width: none;
+
+      .item {
+        width: 100%;
+        max-width: 600px;
+        text-align: left;
+      }
+    }
+    
+    h3 {
+      align-self: flex-start;
+      padding: 10px 0 40px;
+    }
+    
+    .image {
+      position: absolute;
+      left: 0;
+      bottom: 0;
+      width: 50%;
+      height: 90%;
+      max-width: none;
+      background-position: left center;
+      background-size: contain;
+      transform: translate(-50%, 0px);
+    }
+    
+    .visible.image {
+      transform: translate(0px, 0px);
+    }
+  }
+  
+  &.hostmanaged {
+    position: relative;
+    height: 80vh;
+    min-height: 600px;
+    
+    section {
+      justify-content: flex-end;
+    }
+    
+    aside {
+      align-items: center;
+      max-width: none;
+
+      .item {
+        padding-left: 20px;
+        width: 100%;
+        max-width: 600px;
+        text-align: left;
+      }
+    }
+    
+    h3 {
+      align-self: flex-start;
+      padding: 10px 0 40px;
+    }
+    
+    .image {
+      position: absolute;
+      left: 0;
+      bottom: 0;
+      width: 50%;
+      height: 90%;
+      max-width: none;
+      background-position: left center;
+      background-size: contain;
+      transform: translate(-50%, 0px);
+    }
+    
+    .visible.image {
+      transform: translate(0px, 0px);
+    }
+  }
+}
+
+@media only screen and (max-width: 800px) {
+  header.hosting {
+    h1 {
+      font-size: 2.3em;
+    }
+    h2 {
+      font-size: 1.5em;
+    }
+  }
+  
+  article {
+    &.hostintro {
+      h3 {
+        padding: 30px 0 30px;
+      }
+      
+      .image {
+        transform: translate(0, 50%);
+      }
+      
+      .visible.image {
+        transform: translate(0px, 0px);
+      }
+    }
+    
+    &.hoststorage {
+      min-height: auto;
+      padding: 0;
+
+      section {
+        justify-content: flex-start;
+        padding-bottom: 0;
+      }
+      
+      aside {
+        order: 1;
+        padding: 0 50px;
+      }
+
+      .image {
+        width: 100%;
+        height: auto;
+        background-position: center;
+        padding-top: 66%;
+        position: relative;
+        order: 2;
+      }
+    }
+    
+    &.hostmanaged {
+      min-height: auto;
+      padding: 0;
+      
+      section {
+        justify-content: flex-start;
+        padding-bottom: 0;
+      }
+      
+      aside {
+        order: 1;
+        padding: 0 50px;
+      }
+      
+      aside .item {
+        padding-left: 0;
+      }
+      .image {
+        position: relative;
+        width: 100%;
+        padding-top: 68%;
+        height: auto;
+        order: 2;
+      }
+    }
+  }
+}
+
+@media only screen and (max-width: 500px) {
+  article {
+    &.hoststorage {
+      aside {
+        padding: 0 10px;
+      }
+    }
+    
+    &.hostmanaged {
+      aside {
+        padding: 0 10px;
+      }
+    }
+  }
+}

nfp_is/app/hosting/index.js

@@ -0,0 +1,207 @@
+var m = require('mithril')
+var Helper = require('../helper')
+
+var Hosting = {
+  oninit: function(vnode) {
+    Helper.init(vnode, 'hosting')
+  },
+
+  onremove: function(vnode) {
+    Helper.clear(vnode)
+  },
+
+  view: function(vnode) {
+    return [
+      m('header.hosting', {
+        oncreate: function(subnode) {
+          vnode.state.domContainer = subnode.dom
+          Helper.checkCreated(vnode)
+          Helper.scrollAddItem(vnode, {
+            dom: subnode.dom,
+            className: 'visible',
+          })
+        },
+      }, m('div.container', [
+          !vnode.state.isMobile ? m('video', {
+              oncreate: function(subnode) {
+                vnode.state.domVideo = subnode.dom
+                Helper.checkCreated(vnode)
+              },
+              preload: 'none',
+              loop: true,
+              muted: true,
+              playsinline: true,
+            }, [
+              m('source', {
+                src: vnode.state.videoUrl,
+                type: 'video/mp4',
+              }),
+              m('source', {
+                src: '/assets/cover/hosting.webm',
+                type: 'video/webm',
+              }),
+            ]
+          ) : m('div', {
+                oncreate: function(subnode) {
+                  vnode.state.domVideo = subnode.dom
+                  Helper.checkCreated(vnode)
+                },
+              }),
+          m('div',
+            m('img', {
+              oncreate: function(subnode) {
+                vnode.state.domImg = subnode.dom
+                Helper.lazyLoadImage(vnode, 'domImg', '/assets/cover/hosting.jpg')
+                Helper.checkCreated(vnode)
+              },
+              src: 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEASABIAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wgARCABaAKADASIAAhEBAxEB/8QAGgAAAwEBAQEAAAAAAAAAAAAAAQIDAAQFBv/EABcBAQEBAQAAAAAAAAAAAAAAAAEAAgP/2gAMAwEAAhADEAAAAfisu652ITFMJkZ5vRZXzRl0L0OdOmc8y1nmutJtHFctzBsVtFkoYmgpWfSeLxpsnSIyaFhWOXqRxm5g0mLo2HEGARqGAr0GiylNNKqobSZB6TNtE+e8am2cUJKJmBDbZexpmih2gBhU0pOqmTZRNptWibplyoihkIrIIVzPc+l25h1x0rz5qxyCzyfDkKJQA406jIQ5WIZSttiy5NTBcRQoT0lUlV0D/8QAHRAAAgMBAQEBAQAAAAAAAAAAAAEQESACMRJBMP/aAAgBAQABBQKy82fvPh0VLEIYznbF7z4OKGhwhjFNlyzn3mHhn6joYi4ssuV7zDw45GP+PPqhllw45GMZe16oeuRsYxZss5FD0hwxFFFFFFCFtilizRQ82WNjFLiyyyz6PoubLLwpYoQ5YtWXCliwoYpelLP/xAAaEQACAwEBAAAAAAAAAAAAAAABEQAQIDBA/9oACAEDAQE/AbVv0vTyjAC6Ii7f/8QAHREAAwEBAQADAQAAAAAAAAAAAAEREBICEyAhMf/aAAgBAgEBPwH8JnWIhBeof3KzoueVRqDYspS6nBu4oMXg+M4H5mcnJzkLDo6G1MXo6LlyE+lLv//EABQQAQAAAAAAAAAAAAAAAAAAAHD/2gAIAQEABj8CcP/EABsQAQEBAQEBAQEAAAAAAAAAAAEAERAhIDFB/9oACAEBAAE/ISepLObM3qExJ4HsPPjb8bxfNMngMft+PibD02ez8d7bL2/PT9cb8BZeS8hnxnn+347jjHwSy+Sj8tnHBZX9l53/AFwNpbx7Py2dtsstsuC4UsMsMxi9l5bK22WeOU8ifMRhGMOMvLZ9sskk4cs8HOBZtlixDGGGG0kSODlb1vHq89memG2Zq1bLPG2ylLLrOP1HG23hiy+R+Dx+o+z83//aAAwDAQACAAMAAAAQQxMUBpQhhWsZvsfymwhtADDvcnRC6d2P9ahJ5zPOwQHzNBJeJ9ae+/zQ637l/8QAGhEAAwEBAQEAAAAAAAAAAAAAAAERECEgMf/aAAgBAwEBPxDpfBuCFIfBKeWLolrqKyl2Y8bxUJrKirVOtHYNglWNbylkyeYTf//EABoRAQEBAQEBAQAAAAAAAAAAAAEAESEQMUH/2gAIAQIBAT8Q24/J58lfPAJO5zJxMBiBXT43BI8bjl1JkcQMsWnn4Jfpvt27YXkqbfEqTwJtygg1tl2wbG5sCd4yPDuzHwdY6nEngypUtrf/xAAbEAEBAQEBAQEBAAAAAAAAAAABABEhEDFBIP/aAAgBAQABPxBCQOwrGJ5ckX7ATl8JLXxU8jw5ehWcjL8nZWy8uU9N8I+2ZDF44+79w0uGcfviqOLOyM8PmfMPZz150mZ46od8KDYyTuMEdXG0L53D6pjcSly2vnz8eDu3l3ZeS74JNJyx50J147ep0Q43EAwn2W+WM7CbIycy5nBF2j+AkbcbhC2d8E/JNllk2TLS8keI9Byu3K4Slbvg3bM8V2fJuvgIIO363Hjp66JdMsHwCM5bCEHG4XSH9uXqQQ+TxL4CzhjC6TF5kp+w74eEPJjfg5zxPl4XazOy1jUlQ8ly2VmTPo+19JIXx4Pfz7PiPD6+h6//2Q==',
+            })
+          ),
+          m('nav', [
+            m(m.route.Link, { class: 'title', href: '/' }, m('span', 'NFP')),
+            m('div.filler'),
+            m(m.route.Link, { class: 'active', href: '/hosting-solutions' }, [ 'Hýsingarlausnir', m('div') ]),
+            m(m.route.Link, { href: '/programming-solutions' }, [ 'Forritunarlausnir', m('div') ]),
+            m(m.route.Link, { href: '/video-solutions' }, [ 'Videólausnir', m('div') ]),
+          ]),
+          m('div.content', [
+            m('h1', 'Hýsingarlausnir sem þú getur treyst'),
+            m('h2', 'SÝNDARVÉLAR, WORDPRESS, GEYMSLUHÝSING, OG HVAÐ EINA!'),
+          ]),
+        ])
+      ),
+      m('main', [
+        // Solutions
+        m('article.hostintro', [
+          m('section', [
+            m('div.image', {
+              oncreate: function(subnode) {
+                Helper.scrollAddItem(vnode, {
+                  dom: subnode.dom,
+                  className: 'visible',
+                  threshold: -100,
+                  img: '/assets/images/hostintro.svg',
+                })
+              },
+            }),
+            m('aside', [
+              m('div.item', {
+                oncreate: function(subnode) {
+                  Helper.scrollAddItem(vnode, {
+                    dom: subnode.dom,
+                    className: 'visible',
+                    threshold: -100,
+                  })
+                },
+              }, [
+                m('h3', 'Vefhýsing'),
+                m('p', `
+                  Við getum boðið okkar viðskiptavinum upp á margskonar
+                  lausnir þegar kemur að hýsa þeirra vefi. Meðal þess sem
+                  við höfum reynslu af er að setja upp sýndarvélar sem þú
+                  getur haft fulla umsjá með og gert hvað svo sem þig lystir
+                  með en einnig sérhæfum okkur í að bjóða upp á
+                  alsherjarlausnir þar sem við sjáum um alla uppsetningu og
+                  umsjón svo að þú getir haft athyglina á öðrum þáttum
+                  reksturs þíns.
+                `),
+                m('p', `
+                  Ef þig vantar Wordpress/PHP uppsetningu eða hefur sérhæfða
+                  síðu og vilt nota docker eða node þá munar okkur ekki um
+                  það. Okkar kerfi geta séð um að mæta þínum þörfum hverjar
+                  sem þær eru.
+                `),
+              ]),
+            ]),
+          ]),
+        ]),
+        m('article.hoststorage', [
+          m('section', [
+            m('div.image', {
+              oncreate: function(subnode) {
+                Helper.scrollAddItem(vnode, {
+                  dom: subnode.dom,
+                  className: 'visible',
+                  threshold: -100,
+                  img: '/assets/images/hostfile.svg',
+                })
+              },
+            }),
+            m('aside', [
+              m('div.item', {
+                oncreate: function(subnode) {
+                  Helper.scrollAddItem(vnode, {
+                    dom: subnode.dom,
+                    className: 'visible',
+                    threshold: -100,
+                  })
+                },
+              }, [
+                m('h3', 'Gagnageymslur og skölun myndefnis'),
+                m('p', `
+                  Örugg geymsla gagna er sífellt mikilvægari þáttur fyrir
+                  fyrirtæki. NFP hefur boðið upp á gagnageymslu fyrir
+                  fyrirtæki til að geyma sín afrit eða vinnslugögn sem
+                  starfsmenn geta haft aðgang að og unnið með hvar sem
+                  þeir eru staddir í heiminum. 
+                `),
+                m('p', `
+                  Við getum einnig séð um hvers kyns meðhöndlun myndgagna
+                  svo sem endurkóðun upptökuefnis til að lágmarka rýmisþörf
+                  með bestu mögulegu gæðum eða skölun á myndum fyrir
+                  vefsíðubirtingar. Lausnir okkar eru skilvirkar og
+                  afkastamiklar.
+                `),
+              ]),
+            ]),
+          ]),
+        ]),
+        m('article.hostmanaged', [
+          m('section', [
+            m('div.image', {
+              oncreate: function(subnode) {
+                Helper.scrollAddItem(vnode, {
+                  dom: subnode.dom,
+                  className: 'visible',
+                  threshold: -100,
+                  img: '/assets/images/hostmanaged.svg',
+                })
+              },
+            }),
+            m('aside', [
+              m('div.item', {
+                oncreate: function(subnode) {
+                  Helper.scrollAddItem(vnode, {
+                    dom: subnode.dom,
+                    className: 'visible',
+                    threshold: -100,
+                  })
+                },
+              }, [
+                m('h3', 'Láttu okkur sjá um viðhaldið'),
+                m('p', `
+                  Það getur verið kúnst að viðhalda sýndarvélum og
+                  heimasíðum og Það er ekki á allra hendi að framkvæma
+                  Wordpress uppfærslur eða prófanir á öryggisafritum.
+                `),
+                m('p', `
+                  Þú átt að geta einbeitt þér að þínu sérsviði. Þess vegna
+                  bjóðum við upp á að sjá um allt sem kemur að viðhaldi og
+                  gæðaeftirliti. Við fylgjumst vel með þróuninni, gerum
+                  reglulegar uppfærslur og tryggjum að allt virki sem
+                  skildi.
+                `),
+              ]),
+            ]),
+          ]),
+        ]),
+      ]),
+    ]
+  },
+}
+
+/*
+<a href="https://www.freepik.com/free-photos-vectors/background">Background vector created by macrovector - www.freepik.com</a>
+*/
+
+module.exports = Hosting

nfp_is/app/index.js

@@ -0,0 +1,42 @@
+/**
+ * @license
+ * NFP <https://nfp.is>
+ * Copyright 2018 Jonatan Nilsson <http://jonatan.nilsson.is/>
+ *
+ * Available under WTFPL License (http://www.wtfpl.net/txt/copying/)
+*/
+
+'use strict'
+
+//Add debug components to window. Allows us to play with controls
+//in the console. 
+window.components = {}
+
+var m = require('mithril')
+
+m.route.setOrig = m.route.set
+m.route.set = function(path, data, options){
+  m.route.setOrig(path, data, options)
+  window.scrollTo(0, 0)
+}
+
+m.route.linkOrig = m.route.link
+m.route.link = function(vnode){
+  m.route.linkOrig(vnode)
+  window.scrollTo(0, 0)
+}
+
+var Front = require('./front')
+var Hosting = require('./hosting')
+var Programming = require('./programming')
+var Streaming = require('./streaming')
+var Footer = require('./footer')
+
+m.route.prefix = ''
+m.route(document.getElementById('container'), '/', {
+  '/': Front,
+  '/hosting-solutions': Hosting,
+  '/programming-solutions': Programming,
+  '/video-solutions': Streaming,
+})
+m.mount(document.getElementById('footer'), Footer)

nfp_is/app/programming/index.js

@@ -0,0 +1,205 @@
+var m = require('mithril')
+var Helper = require('../helper')
+
+var Programming = {
+  oninit: function(vnode) {
+    Helper.init(vnode, 'programming')
+  },
+
+  onremove: function(vnode) {
+    Helper.clear(vnode)
+  },
+
+  view: function(vnode) {
+    return [
+      m('header.programming', {
+        oncreate: function(subnode) {
+          vnode.state.domContainer = subnode.dom
+          Helper.checkCreated(vnode)
+          Helper.scrollAddItem(vnode, {
+            dom: subnode.dom,
+            className: 'visible',
+          })
+        },
+      }, m('div.container', [
+          !vnode.state.isMobile ? m('video', {
+              oncreate: function(subnode) {
+                vnode.state.domVideo = subnode.dom
+                Helper.checkCreated(vnode)
+              },
+              preload: 'none',
+              loop: true,
+              muted: true,
+              playsinline: true,
+            }, [
+              m('source', {
+                src: vnode.state.videoUrl,
+                type: 'video/mp4',
+              }),
+              m('source', {
+                src: '/assets/cover/programming.webm',
+                type: 'video/webm',
+              }),
+            ]
+          ) : m('div', {
+                oncreate: function(subnode) {
+                  vnode.state.domVideo = subnode.dom
+                  Helper.checkCreated(vnode)
+                },
+              }),
+          m('div',
+            m('img', {
+              oncreate: function(subnode) {
+                vnode.state.domImg = subnode.dom
+                Helper.lazyLoadImage(vnode, 'domImg', '/assets/cover/programming.jpg')
+                Helper.checkCreated(vnode)
+              },
+              src: ' data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEASABIAAD/2wBDAA0JCgsKCA0LCgsODg0PEyAVExISEyccHhcgLikxMC4pLSwzOko+MzZGNywtQFdBRkxOUlNSMj5aYVpQYEpRUk//2wBDAQ4ODhMREyYVFSZPNS01T09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT0//wgARCABaAKADASIAAhEBAxEB/8QAGQAAAwEBAQAAAAAAAAAAAAAAAQIDAAQF/8QAFwEBAQEBAAAAAAAAAAAAAAAAAQACA//aAAwDAQACEAMQAAAB8adF6cJioGIqprZ2RWdHICE0FoBe/PXXNpOqQleOO3YCmuZyGXA0F50gqyICGNYOsEgpObzztZUnnp1HDfPBhSYqaLzeHDFyuc0qNKnE0NUmozsqcPVhPfOw58NxHTXSNdTSOudMi00gpoqQaG2HY6qCra5846lnnFgMxUUrYVRAKzK7bNnKFtShsVWiUrkKKApqtefocvLoVxzC6G5CoGaXgKhBno4XT//EABsQAAMBAQEBAQAAAAAAAAAAAAABERAgMBIC/9oACAEBAAEFAnkITqlHixof5GvN8TaUfcITiE4ePKPaUomXwePxXVPo+hsvknkyD8aUvCFtGy+DKUpcQtflCEIQmXqEIQhMhCE2HzyvC9JHyP8AJCEJtKUvaPzr5fP/xAAaEQADAAMBAAAAAAAAAAAAAAAAAREQEiAC/9oACAEDAQE/AUUpS4oxU88PlC4eKI1EsQ1NSEIJcU2KXLKXEz6EylEQh//EABkRAAIDAQAAAAAAAAAAAAAAAAARASAwEP/aAAgBAgEBPwG8cnKcGPrGO6EIWUUkYz//xAAUEAEAAAAAAAAAAAAAAAAAAABw/9oACAEBAAY/AnD/xAAcEAEBAQEBAQADAAAAAAAAAAABABEQICEwMUH/2gAIAQEAAT8hWyeFkFkFudvqD7OPAKT4SyILISQWcBDnLXLZPMsmEJk2RwyDrZTwrbeWnKxeDxifdnHgemz5CXxlknN8DODJZPneuLS+Xzwb0M2fLLyGyl8t4pss9Jw+cZkQbZeB6AwNjm1mWX3asT8LZY4GZ4ZFI4PN4JLnnDhx8H8np4/rl8f/2gAMAwEAAgADAAAAEBr/AJK106M1iZzHPUQsF7qTyBHmplEJPpqBT2lWE8Kfxs8s7ywQsqGwhiTaN5D/xAAbEQEBAQEBAAMAAAAAAAAAAAABABEQITFRYf/aAAgBAwEBPxBZCiMNWHB+rCSxtljajZ2Gb4djEHoDAYSI1yR8zDUJAW23mKX92jAStWoXjPYIZJDhT1g2L//EABkRAQEBAQEBAAAAAAAAAAAAAAEAERAhIP/aAAgBAgEBPxBsLIJL2zhyBNt5GT8PwY5krKlcXPibbLPfU9nssWFhIW2y8IWWXi1av//EAB0QAQEBAQEBAAMBAAAAAAAAAAEAERAhMSBBUWH/2gAIAQEAAT8QSas1/wATi1suQt4mEid8MoBey14Z2LIttJx4Pq+YmBl/OXeDfqQZxObQtb25ARjYgpBBycQkrwfEHYJAJk8S96BWyMdEGC0t9ivEvDOHkJyzMXjIkhlm3rBJ+Q+yeRoxk9jgE3eXK8YHbUqaVIZaQaRC4sfk0q2TtlllggFjktKpiNkZacOIYJq28sssmWPyVatWrcu8R7l4NbTKkbIGxsySG8XrPM6SE6z5tbdtJ4vqDln8FDrhhxvLS+SH6hk7YsD15YXgWCHJhYIWZZvLaVIPkH8hP1A35CRiTJ1aJq5bJl5edl+EFnvOQn2/i//Z',
+            })
+          ),
+          m('nav', [
+            m(m.route.Link, { class: 'title', href: '/' }, m('span', 'NFP')),
+            m('div.filler'),
+            m(m.route.Link, { href: '/hosting-solutions' }, [ 'Hýsingarlausnir', m('div') ]),
+            m(m.route.Link, { class: 'active', href: '/programming-solutions' }, [ 'Forritunarlausnir', m('div') ]),
+            m(m.route.Link, { href: '/video-solutions' }, [ 'Videólausnir', m('div') ]),
+          ]),
+          m('div.content', [
+            m('h1', 'Sérfræðingar í forritun'),
+            m('h2', 'Meira en 20 ára reynsla!'),
+          ]),
+        ])
+      ),
+      m('main', [
+        // Solutions
+        m('article.programmingintro', [
+          m('section', [
+            m('div.image', {
+              oncreate: function(subnode) {
+                Helper.scrollAddItem(vnode, {
+                  dom: subnode.dom,
+                  className: 'visible',
+                  threshold: -100,
+                  img: '/assets/images/programmingintro.svg',
+                })
+              },
+            }),
+            m('aside', [
+              m('div.item', {
+                oncreate: function(subnode) {
+                  Helper.scrollAddItem(vnode, {
+                    dom: subnode.dom,
+                    className: 'visible',
+                    threshold: -100,
+                  })
+                },
+              }, [
+                m('h3', 'Vefsíðuforritun'),
+                m('p', `
+                  Með margra ára reynslu í forritun og yfirgripsmikla
+                  þekkingu þegar kemur að vefsíðugerð, er ekkert sem stoppar
+                  okkur í að leysa krefjandi verkefni. Hvort heldur sem um
+                  er að ræða útfærslu á hönnun og innleiðing hennar í
+                  HTML/CSS eða uppsetningu greiðslugátta og áskriftaleiða
+                  hjá mismunandi aðilum að þá erum við sérfræðingar á því
+                  sviði.
+                `),
+                m('p', `
+                  Við getum unnið með hvaða forritunartungumál sem er.
+                  Hvaða tækni sem þú notar, node, python, C# eða hvað
+                  annað tungumál, þá látum við ekkert stoppa okkur.
+                `),
+              ]),
+            ]),
+          ]),
+        ]),
+        m('article.programmingstore', [
+          m('section', [
+            m('div.image', {
+              oncreate: function(subnode) {
+                Helper.scrollAddItem(vnode, {
+                  dom: subnode.dom,
+                  className: 'visible',
+                  threshold: -100,
+                  img: '/assets/images/programmingstore.svg',
+                })
+              },
+            }),
+            m('aside', [
+              m('div.item', {
+                oncreate: function(subnode) {
+                  Helper.scrollAddItem(vnode, {
+                    dom: subnode.dom,
+                    className: 'visible',
+                    threshold: -100,
+                  })
+                },
+              }, [
+                m('h3', 'Sölukerfi og vefverslun'),
+                m('p', `
+                  Við höfum hannað og þróað sölukerfi frá grunni í síðuformi.
+                  Það er byggt til að vera einfalt í notkun og henta fyrir
+                  lítil og meðalstór fyrirtæki. Sölukerfið býður upp á
+                  pantanakerfi, verkbókhald og birgðakerfi sem og
+                  vefverslunarframenda og tengingu við posa.
+                `),
+                m('p', `
+                  Við getum aðlagað vefverslunarframendanum til að passa
+                  fyrir hvert fyrirtæki og þeirra vöruframboði. Við vinnum
+                  náið með hverjum og einum viðskiptavini og skilum af okkur
+                  lausn sem uppfyllir þarfir þeirra.
+                `),
+              ]),
+            ]),
+          ]),
+        ]),
+        m('article.programmingcontracting', [
+          m('section', [
+            m('div.image', {
+              oncreate: function(subnode) {
+                Helper.scrollAddItem(vnode, {
+                  dom: subnode.dom,
+                  className: 'visible',
+                  threshold: -100,
+                  img: '/assets/images/programmingcontractor.svg',
+                })
+              },
+            }),
+            m('aside', [
+              m('div.item', {
+                oncreate: function(subnode) {
+                  Helper.scrollAddItem(vnode, {
+                    dom: subnode.dom,
+                    className: 'visible',
+                    threshold: -100,
+                  })
+                },
+              }, [
+                m('h3', 'Verktakavinna'),
+                m('p', `
+                  Ef það er tímapressa hjá þér, að þá getum við komið beint
+                  til ykkar og unnið verktakavinnu á ykkar vinnustað. Við
+                  getum unnið náið með ykkar fólki og aðlagast hvaða
+                  vinnureglum sem er.
+                `),
+                m('p', `
+                  Okkar fólki hefur verið vel tekið hvert sem við förum og
+                  við höfum ætíð kappkostað að skila frá okkur góðu verki.
+                  Hverjar svo sem sem vandamálin kunna að liggja að þá
+                  geturðu treyst því að við munum finna lausn á þeim
+                  saman og redda málunum.
+                `),
+              ]),
+            ]),
+          ]),
+        ]),
+      ]),
+    ]
+  },
+}
+
+/*
+<a href="https://www.freepik.com/free-photos-vectors/background">Background vector created by macrovector - www.freepik.com</a>
+*/
+
+module.exports = Programming

nfp_is/app/programming/programming.styl

@@ -0,0 +1,185 @@
+header.programming {
+  text-shadow: 0 0 30px black;
+  
+  nav a {
+    background-color: #0003;
+    border-radius: 20px;
+    box-shadow: 0 0 80px black;
+    text-shadow: 0 0 80px black;
+    opacity: 1;
+    color: #999;
+    transition: opacity 0.5 color 0.5s;
+    
+    &.title {
+      color: white;
+      opacity: 0.6;
+      
+      &:hover {
+        opacity: 1;
+      }
+    }
+    
+    &:hover {
+      color: white;
+    }
+    
+    &.active {
+      color: white;
+    }
+  }
+
+  h1 {
+    font-size: 5.8vw;
+    margin-bottom: 10px;
+  }
+  h2 {
+    font-size: 3.5vw;
+  }
+  
+  h1, h2 {
+  }
+}
+
+article {
+  &.programmingintro {
+    .image {
+      transform: translate(-50%, 0px);
+    }
+    
+    .visible.image {
+      transform: translate(0px, 0px);
+    }
+  }
+  
+  &.programmingstore {
+    background: #29688c;
+    background: linear-gradient(30deg, #020024 15%, #29688c 100%);
+    color: white;
+    position: relative;
+    height: 80vh;
+    min-height: 600px;
+    
+    section {
+      justify-content: flex-start;
+    }
+    
+    aside {
+      align-items: center;
+      max-width: none;
+
+      .item {
+        width: 100%;
+        max-width: 600px;
+        text-align: left;
+      }
+    }
+    
+    h3 {
+      align-self: flex-start;
+      padding: 10px 0 40px;
+    }
+    
+    .image {
+      position: absolute;
+      right: 0;
+      top: 5%;
+      width: 50%;
+      height: 90%;
+      max-width: none;
+      background-position: center;
+      background-size: contain;
+      transform: translate(50%, 0px);
+    }
+    
+    .visible.image {
+      transform: translate(0px, 0px);
+    }
+  }
+  
+  &.programmingcontracting {
+    .image {
+      transform: translate(-50%, 0px);
+    }
+    
+    .visible.image {
+      transform: translate(0px, 0px);
+    }
+  }
+}
+
+@media only screen and (max-width: 800px) {
+  header.programming {
+    nav a {
+      &.title {
+        background-position: calc(50% - 60px) center;
+      }
+    }
+
+    h1 {
+      font-size: 5.8vw;
+      margin-bottom: 10px;
+    }
+    h2 {
+      font-size: 3.5vw;
+    }
+    
+    h1, h2 {
+    }
+  }
+  
+  article {
+    &.programmingintro {
+      .image {
+        transform: translate(0, 50%);
+      }
+      
+      .visible.image {
+        transform: translate(0px, 0px);
+      }
+      
+      h3 {
+        padding: 30px 0 30px;
+      }
+    }
+    
+    &.programmingstore {
+      aside {
+        order: 1;
+        flex: 0 1 auto;
+      }
+      
+      h3 {
+        align-self: flex-start;
+        padding: 10px 0 40px;
+      }
+      
+      .image {
+        position: relative;
+        order: 2;
+        width: 100%;
+        padding-top: 430px;
+        height: auto;
+        background-size: auto 100%;
+        background-position: center -17px;
+        transform: translate(0, 50%);
+      }
+      
+      .visible.image {
+        transform: translate(0px, 0px);
+      }
+    }
+    
+    &.programmingcontracting {
+      h3 {
+        padding: 30px 0 30px;
+      }
+      .image {
+        transform: translate(0, 50%);
+      }
+      
+      .visible.image {
+        transform: translate(0px, 0px);
+      }
+    }
+  }
+}

nfp_is/app/streaming/index.js

@@ -0,0 +1,124 @@
+var m = require('mithril')
+var Helper = require('../helper')
+
+var Streaming = {
+  oninit: function(vnode) {
+    Helper.init(vnode, 'streaming')
+  },
+
+  onremove: function(vnode) {
+    Helper.clear(vnode)
+  },
+
+  view: function(vnode) {
+    return [
+      m('header.streaming', {
+        oncreate: function(subnode) {
+          vnode.state.domContainer = subnode.dom
+          Helper.checkCreated(vnode)
+          Helper.scrollAddItem(vnode, {
+            dom: subnode.dom,
+            className: 'visible',
+          })
+        },
+      }, m('div.container', [
+          !vnode.state.isMobile ? m('video', {
+              oncreate: function(subnode) {
+                vnode.state.domVideo = subnode.dom
+                Helper.checkCreated(vnode)
+              },
+              preload: 'none',
+              loop: true,
+              muted: true,
+              playsinline: true,
+            }, [
+              m('source', {
+                src: vnode.state.videoUrl,
+                type: 'video/mp4',
+              }),
+              m('source', {
+                src: '/assets/cover/streaming.webm',
+                type: 'video/webm',
+              }),
+            ]
+          ) : m('div', {
+                oncreate: function(subnode) {
+                  vnode.state.domVideo = subnode.dom
+                  Helper.checkCreated(vnode)
+                },
+              }),
+          m('div',
+            m('img', {
+              oncreate: function(subnode) {
+                vnode.state.domImg = subnode.dom
+                Helper.lazyLoadImage(vnode, 'domImg', '/assets/cover/streaming.jpg')
+                Helper.checkCreated(vnode)
+              },
+              src: ' data:image/jpeg;base64,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',
+            })
+          ),
+          m('nav', [
+            m(m.route.Link, { class: 'title', href: '/' }, m('span', 'NFP')),
+            m('div.filler'),
+            m(m.route.Link, { href: '/hosting-solutions' }, [ 'Hýsingarlausnir', m('div') ]),
+            m(m.route.Link, { href: '/programming-solutions' }, [ 'Forritunarlausnir', m('div') ]),
+            m(m.route.Link, { class: 'active', href: '/video-solutions' }, [ 'Videólausnir', m('div') ]),
+          ]),
+          m('div.content', [
+            m('h1', 'Streymi- og upptökulausnir'),
+            m('h2', 'Fyrir ráðstefnur og fundi á tækniöld'),
+          ]),
+        ])
+      ),
+      m('main', [
+        // Solutions
+        m('article.streamintro', [
+          m('section', [
+            m('div.image', {
+              oncreate: function(subnode) {
+                Helper.scrollAddItem(vnode, {
+                  dom: subnode.dom,
+                  className: 'visible',
+                  threshold: -100,
+                  img: '/assets/images/videoconference.svg',
+                })
+              },
+            }),
+            m('aside', [
+              m('div.item', {
+                oncreate: function(subnode) {
+                  Helper.scrollAddItem(vnode, {
+                    dom: subnode.dom,
+                    className: 'visible',
+                    threshold: -100,
+                  })
+                },
+              }, [
+                m('h3', 'Ekki missa af neinu!'),
+                m('p', `
+                  Aðstæður fólks eru æði ólíkar og ekki geta allir komist á
+                  alla viðburði, hvort sem er vegna fjarlægðar, fötlunar eða
+                  tímaleysis. Við bjóðum upp á upptöku og streymiþjónustu
+                  fyrir hvers kyns viðburði til að færa þá nær fólki í tíma
+                  og rúmi. 
+                `),
+                m('p', `
+                  Innifalið í þjónustunni er streymigluggi, upptaka og
+                  úrvinnsla myndefnis með sundurgreiningu eftir ræðumanni
+                  eða umræðuefni, tilbúið til birtingar á netinu og/eða
+                  í varðveislu á stafrænu formi.
+                `),
+              ]),
+            ]),
+          ]),
+        ]),
+      ]),
+    ]
+  },
+}
+
+/*
+<a href="https://www.freepik.com/free-photos-vectors/background">Background vector created by macrovector - www.freepik.com</a>
+*/
+
+module.exports = Streaming

nfp_is/app/streaming/streaming.styl

@@ -0,0 +1,39 @@
+header.streaming {
+  text-shadow: 0 0 40px black;
+
+  h1 {
+    font-size: 5.7vw;
+    margin-bottom: 10px;
+  }
+  h2 {
+    font-size: 3vw;
+  }
+}
+
+article.streamintro {
+  .image {
+    transform: translate(-50%, 0px);
+  }
+  
+  .visible.image {
+    transform: translate(0px, 0px);
+  }
+}
+
+@media only screen and (max-width: 800px) {
+  article {
+    &.streamintro {
+      h3 {
+        padding: 30px 0 30px;
+      }
+      
+      .image {
+        transform: translate(0, 50%);
+      }
+      
+      .visible.image {
+        transform: translate(0px, 0px);
+      }
+    }
+  }
+}

nfp_is/base

@@ -0,0 +1 @@
+../base

nfp_is/build-package.json

@@ -0,0 +1,10 @@
+{
+  "scripts": {
+    "build": "asbundle app/index.js public/assets/app.js"
+  },
+  "dependencies": {
+    "asbundle": "^2.6.1",
+    "mithril": "^2.2.2",
+    "service-core": "^3.0.0-beta.17"
+  }
+}

nfp_is/index.mjs

@@ -0,0 +1,38 @@
+import fs from 'fs'
+import { pathToFileURL } from 'url'
+import config from './base/config.mjs'
+
+export function start(http, port, ctx) {
+  config.sources[1].store = ctx.config
+
+  return import('./api/server.mjs')
+  .then(function(module) {
+    let server = new module.default(http, port, ctx)
+    return server.run()
+  })
+}
+
+if (import.meta.url === pathToFileURL(process.argv[1]).href) {
+  import('service-core').then(core => {
+    const port = 4210
+
+    var core = new core.ServiceCore('nfp_is', import.meta.url, port, '')
+
+    let config = {
+      frontend: {
+        url: 'http://localhost:' + port
+      }
+    }
+
+    try {
+      config = JSON.parse(fs.readFileSync('./config.json'))
+    } catch {}
+
+    config.port = port
+
+    core.setConfig(config)
+    core.init({ start }).then(function() {
+      return core.run()
+    })
+  })
+}

nfp_is/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "nfp_is",
+  "version": "1.0.0",
+  "port": 4210,
+  "description": "nfp.is website",
+  "main": "index.mjs",
+  "directories": {
+    "test": "test"
+  },
+  "scripts": {
+    "start": "node index.mjs",
+    "build": "asbundle app/index.js public/assets/app.js",
+    "dev:build": "npm-watch build",
+    "dev:server": "node index.mjs | bunyan",
+    "dev": "npm-watch dev:server"
+  },
+  "watch": {
+    "dev:server": {
+      "patterns": [
+        "api/*",
+        "base/*",
+        "../base/*"
+      ],
+      "extensions": "js,mjs",
+      "quiet": true,
+      "inherit": true
+    }
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://git.nfp.is/nfp/nfp_sites.git"
+  },
+  "author": "Jonatan Nilsson",
+  "license": "WTFPL",
+  "bugs": {
+    "url": "https://git.nfp.is/nfp/nfp_sites/issues"
+  },
+  "homepage": "https://git.nfp.is/nfp/nfp_sites",
+  "dependencies": {
+    "flaska": "^1.3.4",
+    "nconf-lite": "^2.0.0"
+  },
+  "devDependencies": {
+    "asbundle": "^2.6.1",
+    "mithril": "^2.2.3",
+    "service-core": "^3.0.0-beta.17"
+  }
+}

nfp_is/public/assets/aranja.svg

@@ -0,0 +1,3 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 524.9 117.7" fill="#3c435f"><path d="M90.7 44.4C90.2 19.8 70.1.1 45.4.1 20.3.1 0 20.4 0 45.5s20.3 45.4 45.4 45.4c6.7 0 13-1.4 18.7-4V65.8c-4.9 4.5-11.5 7.3-18.7 7.3-15.2 0-27.6-12.4-27.6-27.6s12.4-27.6 27.6-27.6c14.8 0 27 11.8 27.6 26.5v46.5h17.8l-.1-46.5z"></path><path d="M108.6 44.4v46.5h17.8V45.5c0-15.2 12.4-27.6 27.6-27.6V.1c-24.8 0-44.8 19.7-45.4 44.3"></path><path d="M253.6 44.4C253 19.8 232.9.1 208.2.1c-25.1 0-45.4 20.3-45.4 45.4s20.3 45.4 45.4 45.4c6.7 0 13-1.4 18.7-4V65.8c-4.9 4.5-11.5 7.3-18.7 7.3-15.2 0-27.6-12.4-27.6-27.6s12.4-27.6 27.6-27.6c14.8 0 27 11.8 27.6 26.5v46.5h17.8V44.4z"></path><path d="M316.7 0c-24.7 0-44.8 19.7-45.4 44.3v46.5h17.8V45.4c0-15.2 12.4-27.6 27.6-27.6 15.2 0 27.6 12.4 27.6 27.6v45.4h17.8V45.4c0-25.1-20.3-45.4-45.4-45.4"></path><path d="M407 0h-26.7v17.9h18.2v45.5c0 20.1-16.4 36.5-36.4 36.5h-17.8v17.8h17.8c29.9 0 54.3-24.4 54.3-54.3V0H407z"></path><path d="M524.9 44.3C524.3 19.7 504.2 0 479.5 0c-25.1 0-45.4 20.3-45.4 45.4s20.3 45.4 45.4 45.4c6.7 0 13-1.4 18.7-4V65.7c-4.9 4.5-11.5 7.3-18.7 7.3-15.2 0-27.6-12.4-27.6-27.6 0-15.2 12.4-27.6 27.6-27.6 14.8 0 27 11.8 27.6 26.5v46.5h17.8V44.3z"></path></svg>

nfp_is/public/browserconfig.xml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+    <msapplication>
+        <tile>
+            <square150x150logo src="/mstile-150x150.png?v=2"/>
+            <TileColor>#3e0a1e</TileColor>
+        </tile>
+    </msapplication>
+</browserconfig>

nfp_is/public/index.html

@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>NFP ehf. - Programming, Video, Live & Operations Contractors</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+  <link href="/assets/app.css" rel="stylesheet" />
+  <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png?v=2">
+  <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png?v=2">
+  <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png?v=2">
+  <link rel="manifest" href="/site.webmanifest?v=2">
+  <link rel="mask-icon" href="/safari-pinned-tab.svg?v=2" color="#3e0a1e">
+  <link rel="shortcut icon" href="/favicon.ico?v=2">
+  <meta name="msapplication-TileColor" content="#3e0a1e">
+  <meta name="theme-color" content="#3e0a1e">
+  <meta property="og:image:width" content="279">
+  <meta property="og:image:height" content="279">
+  <meta property="og:title" content="NFP ehf.">
+  <meta property="og:description" content="Software development, video production, live streaming, software operations or whatever your needs may be, NFP ehf. has the resource and technical knowledge to approach any and all needs.">
+  <meta property="og:url" content="https://nfp.is">
+  <meta property="og:image" content="https://nfp.is/assets/og-image.jpg">
+</head>
+<body>
+  <div id="container"></div>
+  <footer id="footer"></footer>
+  <script src="/assets/app.js"></script>
+</body>
+</html>

nfp_is/public/safari-pinned-tab.svg

@@ -0,0 +1 @@
+<svg version="1" xmlns="http://www.w3.org/2000/svg" width="1557.333" height="1557.333" viewBox="0 0 1168.000000 1168.000000"><path d="M469.7 25.6c-.1.1-5.3.5-11.4.8-6.2.4-12.8.9-14.5 1.1-1.8.2-5.8.6-8.8 1-54.9 6.4-108.7 25.4-159.4 56.4-22.3 13.6-47.3 33.6-68.2 54.5-16.9 17-23.7 24.6-34.1 38.3-7.3 9.5-22.4 31.5-23.6 34.3-.4.8-2.4 4.4-4.6 8-12.3 20.6-27.7 55.8-34.7 79.2-2 7.1-3.7 10.8-6.2 13.5-1.8 2.1-4.9 5.6-6.9 7.8-11.2 12.4-29.6 37.2-40 54.1-6.3 10.1-20.8 38.2-26.4 50.9-8.7 20.2-21 60.6-23.4 77-.2 1.1-1 5.8-1.9 10.5-.8 4.7-1.8 11.2-2.2 14.5-.3 3.3-.8 6.9-1 8C0 548.1.1 608 2.5 620.9c.1.9.6 4.1.9 7.2.4 3.1.8 6.5 1 7.5.2 1.1.9 5.3 1.6 9.4.7 4.1 2.1 11.3 3.2 16 1.1 4.7 2.1 9.2 2.3 10 1.2 5.6 4.2 16.3 7.7 27 17.4 54.1 48.8 107.1 87.1 146.8l6.1 6.3 4.8 16.1c5 16.5 5.3 17.5 13.3 36.8 12.3 29.6 35 68.5 51.6 88.5 1 1.1 4.6 5.6 8 10 9.6 12 39.8 41.8 53.9 53.1 37.2 29.7 75.6 50.9 120 66.2 12.8 4.4 37.1 11.1 45.5 12.6 1.7.3 8 1.4 14 2.5 21.3 3.7 40.9 5.4 64 5.4 14.4.1 32-.7 41.5-1.8 1.9-.3 5.8-.7 8.5-1 6.3-.7 20.8-3.1 30.5-5.1 4.1-.9 8.5-1.8 9.7-2 1.2-.2 3.2-.8 4.4-1.3 1.5-.5 5.2-.1 10.4 1 4.4 1 9.6 2 11.5 2.4 1.9.3 4.6.7 6 1 2.8.5 6.5 1.1 12.7 2 6.7.9 9.3 1.2 17.3 2 4.1.4 9.3.9 11.5 1.1 5.3.5 43.3.5 51-.1 8.8-.6 23.6-2.2 28.5-3 1.4-.2 5.7-.9 9.5-1.5 35.3-5.4 77.1-19.1 112-36.8 17.4-8.8 31.8-17.5 51.5-31.3 27.6-19.1 59.7-50.2 80.9-78.3 2.9-3.9 5.6-7.3 6-7.6.4-.3 4.5-6.4 9.2-13.5 15.4-23.4 26.5-44.3 36.7-69.2 5.1-12.2 14.2-39.2 14.2-41.7 0-.8 1.7-3.2 3.8-5.4 39.9-41.8 66.7-82.6 85.2-130.2 2.9-7.4 5.7-14.4 6.1-15.5 1.4-3.2 8.4-26.4 9.3-30.6.7-3.1 1-4.8 3.4-14.9 1.1-4.7 2.3-10.1 2.6-12 .3-1.9.8-4.4 1-5.6.2-1.2.7-4.5 1.1-7.5.3-3 .8-6.1 1-6.9.4-1.7 1.1-8.3 2.2-21 1.4-17.9.8-57.5-1.3-74.2-.7-6-2.5-18.9-3-21.3-.2-1-.6-3.7-.9-6-.4-2.2-1-5.6-1.5-7.5-.5-1.9-1.9-7.6-3.1-12.5-9.1-38.4-26.5-80.2-46.7-112.5-4-6.3-7.8-12.4-8.5-13.4-2-3.3-18.3-25.1-22.5-30.1-3.5-4.3-15.1-17.3-18.9-21.3-1.8-1.8-3.3-3.9-3.3-4.6 0-.7-.5-1.7-1.2-2.4s-.9-1.2-.5-1.2c.9 0-7.1-22.3-13.1-36.6-9.3-22-19.1-40.5-31.8-60.1-6.1-9.4-20.5-29.6-22.4-31.3-.3-.3-2.5-3-5-6-6.8-8.4-11.5-13.4-24-26-39.3-39.5-87.1-70.2-139.4-89.6-11.5-4.3-32-10.9-36.8-11.8-1.3-.2-3-.7-3.8-1-.8-.3-2.6-.8-4-1-1.4-.3-6.8-1.4-12-2.5-5.2-1.2-11.1-2.3-13-2.6-2-.3-4.5-.7-5.6-.9-1.1-.2-4.7-.7-7.9-1.1-3.3-.4-6.7-.9-7.6-1-16.5-3-71.7-2.7-93.4.5-3.3.5-8.1 1.1-10.7 1.5-5.2.6-31.6 5.9-36.3 7.3-2.2.6-5.5.2-12-1.4-4.9-1.3-10.6-2.6-12.5-2.9-1.9-.3-4.2-.8-5-1-.8-.2-2.8-.7-4.5-1-15.5-2.7-18.5-3.1-26.5-4-2.5-.3-6-.7-7.9-.9-7.7-1.1-49.6-2.7-50.4-2zM590 377.5c61.3 15.9 125 52.2 171.1 97.5 4.6 4.4 6.7 9.2 8.3 18.5.2 1.6 1.4 7.7 2.4 13.5 2.4 12.5 2.9 15.6 3.7 23.5.4 3.3.8 7.1 1.1 8.5 2.2 13.9 2.1 60.1-.1 78.7-1.1 8.8-2.6 20-3.1 22.8-.3 1.6-.7 3.9-.8 5-.2 1.1-.6 3.3-.9 5-.4 1.6-.9 4.4-1.2 6.1-.2 1.7-1.8 8.4-3.5 15l-3 11.8-9.2 9c-34.6 33.5-73.5 59.8-115.3 78.1-7.1 3.1-13.9 6-15 6.5-3.7 1.6-18.9 6.8-27.5 9.5-4.7 1.5-9.8 3.1-11.4 3.6-4.6 1.4-6.3 1.2-19.4-3.1-25.8-8.3-56-21.8-78.1-34.7-9.5-5.5-33.1-21-34.1-22.3-.3-.4-2.1-1.7-4.1-3.1-5.3-3.5-23.3-18.5-29.5-24.4-1.1-1.1-4.5-4.3-7.5-7.1s-5.9-5.7-6.6-6.5c-1.3-1.6-7.8-26.1-8.8-33.1-.3-2.4-1-5.9-1.5-7.8-.5-1.9-1.1-5.5-1.5-8-.3-2.5-.8-5.6-1-7-4.1-23.3-5.1-69.9-2-94.5.2-1.7.7-5.5 1-8.5.6-5.6 1.4-10.9 2-14.5 1.7-10 4.1-21.7 6.2-30.2l2.5-10.2 6.7-6.3c37.6-35.4 83.3-63.7 132.4-81.9 7-2.6 18.8-6.6 22.2-7.5.6-.2 3.9-1.2 7.5-2.2 8.4-2.5 7.2-2.6 18 .3z"/></svg>

nfp_is/public/site.webmanifest

@@ -0,0 +1,20 @@
+{
+    "name": "NFP ehf.",
+    "short_name": "NFP ehf.",
+    "icons": [
+        {
+            "src": "/android-chrome-192x192.png?v=2",
+            "sizes": "192x192",
+            "type": "image/png"
+        },
+        {
+            "src": "/android-chrome-512x512.png?v=2",
+            "sizes": "512x512",
+            "type": "image/png"
+        }
+    ],
+    "theme_color": "#3e0a1e",
+    "background_color": "#3e0a1e",
+    "start_url": "https://nfp.is",
+    "display": "standalone"
+}

nfp_moe/dev.mjs

@@ -1,22 +0,0 @@
-import fs from 'fs'
-import { ServiceCore } from 'service-core'
-import * as index from './index.mjs'
-
-var core = new ServiceCore('nfp_moe', import.meta.url, 4030, '')
-
-let config = {
-  frontend: {
-    url: 'http://localhost:4030'
-  }
-}
-
-try {
-  config = JSON.parse(fs.readFileSync('./config.json'))
-} catch {}
-
-config.port = 4030
-
-core.setConfig(config)
-core.init(index).then(function() {
-  return core.run()
-})

nfp_moe/index.mjs

@@ -1,3 +1,5 @@
+import fs from 'fs'
+import { pathToFileURL } from 'url'
 import config from './base/config.mjs'
 
 export function start(http, port, ctx) {
@@ -9,3 +11,28 @@ export function start(http, port, ctx) {
     return server.run()
   })
 }
+
+if (import.meta.url === pathToFileURL(process.argv[1]).href) {
+  import('service-core').then(core => {
+    const port = 4030
+
+    var core = new core.ServiceCore('nfp_moe', import.meta.url, port, '')
+
+    let config = {
+      frontend: {
+        url: 'http://localhost:' + port
+      }
+    }
+
+    try {
+      config = JSON.parse(fs.readFileSync('./config.json'))
+    } catch {}
+
+    config.port = port
+
+    core.setConfig(config)
+    core.init({ start }).then(function() {
+      return core.run()
+    })
+  })
+}

nfp_moe/package.json

@@ -13,7 +13,7 @@
     "build:prod": "asbundle app/index.js public/assets/app.js && asbundle app/admin/admin.js public/assets/admin.js",
     "build": "asbundle app/index.js public/assets/app.js && asbundle app/admin/admin.js public/assets/admin.js",
     "dev:build": "npm-watch build",
-    "dev:server": "node dev.mjs | bunyan",
+    "dev:server": "node index.mjs | bunyan",
     "dev": "npm-watch dev:server",
     "watch:sass:public": "sass --watch app/app.scss public/assets/app.css",
     "watch:sass:admin": "sass --watch app/admin.scss public/assets/admin.css",

saproxy/dev.mjs

@@ -1,24 +0,0 @@
-import fs from 'fs'
-import { ServiceCore } from 'service-core'
-import * as index from './index.mjs'
-
-const port = 4120
-
-var core = new ServiceCore('nfp_moe', import.meta.url, port, '')
-
-let config = {
-  frontend: {
-    url: 'http://localhost:' + port
-  }
-}
-
-try {
-  config = JSON.parse(fs.readFileSync('./config.json'))
-} catch {}
-
-config.port = port
-
-core.setConfig(config)
-core.init(index).then(function() {
-  return core.run()
-})

saproxy/index.mjs

@@ -1,3 +1,5 @@
+import fs from 'fs'
+import { pathToFileURL } from 'url'
 import config from './api/config.mjs'
 
 export function start(http, port, ctx) {
@@ -9,3 +11,28 @@ export function start(http, port, ctx) {
     return server.run()
   })
 }
+
+if (import.meta.url === pathToFileURL(process.argv[1]).href) {
+  import('service-core').then(core => {
+    const port = 4120
+
+    var core = new core.ServiceCore('saproxy', import.meta.url, port, '')
+
+    let config = {
+      frontend: {
+        url: 'http://localhost:' + port
+      }
+    }
+
+    try {
+      config = JSON.parse(fs.readFileSync('./config.json'))
+    } catch {}
+
+    config.port = port
+
+    core.setConfig(config)
+    core.init({ start }).then(function() {
+      return core.run()
+    })
+  })
+}

saproxy/package.json

@@ -9,7 +9,7 @@
   },
   "scripts": {
     "start": "node --experimental-modules index.mjs",
-    "dev:server": "node dev.mjs | bunyan",
+    "dev:server": "node index.mjs | bunyan",
     "dev": "npm-watch dev:server"
   },
   "watch": {