Showcase

This page shows a few public applications built with AppRun.

Conduit¶

Project: https://github.com/gothinkster/apprun-realworld-example-app

<!DOCTYPE html>
<html>

<link href="//code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" type="text/css">
  <link
    href="//fonts.googleapis.com/css?family=Titillium+Web:700|Source+Serif+Pro:400,700|Merriweather+Sans:400,700|Source+Sans+Pro:400,300,600,700,300italic,400italic,600italic,700italic"
    rel="stylesheet" type="text/css">
  
  <link rel="stylesheet" href="//demo.productionready.io/main.css">
  <style>
    .modal-backdrop.show {
      opacity: 0.5;
      z-index: 1040 !important;
    }

.modal-open {
      position: absolute;
      width: 100%
    }

.modal-dialog {
      z-index: 1100 !important;
    }
  </style>

<body>
  <nav class="navbar navbar-light">
    <div class="container">
      <a class="navbar-brand" href="#">conduit</a>
      <div id="header" />
    </div>
  </nav>
  <div id='my-app'></div>
  <footer>
    <div class="container">
      <a href="#" class="logo-font">conduit</a>
      <span class="attribution">
        An interactive learning project from <a href="https://thinkster.io">Thinkster</a>. Code & design licensed
        under MIT.
      </span>
    </div>
  </footer>
  <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
  <script src="https://unpkg.com/apprun/dist/apprun-dev-tools.js"></script>
  <script src="https://unpkg.com/apprun"></script>
  <script src='https://gothinkster.github.io/apprun-realworld-example-app/app.js'></script>
</body>

</html>

Hacker-News PWA¶

Project: https://github.com/yysun/apprun-hn

<!doctype html>
<html>

body {
      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
      font-size: 14px;
      line-height: 1.42857143;
      color: #333;
      background-color: #fff;
      overflow: scroll
    }

a {
      color: #337ab7;
      text-decoration: none;
      background-color: transparent
    }

ul {
      padding: 0;
      list-style: none
    }

.inner {
      padding-right: 15px;
      padding-left: 15px;
      margin-right: auto;
      margin-left: auto
    }

@media (min-width: 992px) {
      .inner {
        width: 970px
      }
    }

@media (min-width: 768px) {
      .inner {
        width: 750px
      }
    }

.hn .header {
      position: fixed;
      background-color: #faffe6;
      top: 0px;
      width: 100%;
      padding: 10px 0
    }

.hn .main {
      padding: 50px 0px
    }

.hn .footer {
      position: fixed;
      background-color: #fff;
      right: 0;
      bottom: 0;
      left: 0;
      padding: 1rem
    }

.hn .story-list li {
      padding: 10px 0
    }

.hn .score {
      color: #666;
      font-size: 1.1em;
      font-weight: 700;
      width: 60px;
      height: 60px;
      text-align: center;
      float: left;
      padding-top: 10px
    }

.hn .meta {
      color: #aaa;
      white-space: nowrap
    }

.hn .meta a {
      color: #096;
      cursor: pointer
    }

.hn .comment {
      padding: 5px 0 5px 10px;
      border-left: 1px solid #eeeeee
    }

.hn .text {
      padding: 10px 0
    }

.hn .toggle {
      color: #096;
      padding-bottom: 10px;
      cursor: pointer
    }

.hn .collapsed {
      display: none
    }

.hn .toggle:before {
      content: ' [-] '
    }

.hn .toggle.closed:before {
      content: ' [+] '
    }

.hn .toggle.closed:after {
      content: ' (...)'
    }

.hn .more {
      margin-top: 20px;
      margin-left: 20px
    }

.hn .more a {
      cursor: pointer;
      padding-bottom: 150px
    }
  </style>
  <script src="https://www.gstatic.com/firebasejs/8.2.1/firebase-app.js"></script>
  <script src="https://www.gstatic.com/firebasejs/8.2.1/firebase-database.js"></script>
  <script src="https://unpkg.com/apprun/dist/apprun-dev-tools.js"></script>

<body>
  <script type="module" src="https://yysun.github.io/apprun-hn/dist/app.js"></script>
  <script>
    if ('serviceWorker' in navigator) {
      navigator.serviceWorker.register('sw.js').then(function (registration) {
        // Registration was successful
        console.log('ServiceWorker registration successful with scope: ', registration.scope);
      }).catch(function (err) {
        // registration failed :(
        console.log('ServiceWorker registration failed: ', err);
      });
    }
  </script>
</body>

</html>

TodoMVC¶

Author: https://github.com/samsondav
Project: https://github.com/samsondav/todomvc-apprun

<!doctype html>
<html lang="en">
<body>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/todomvc-common/base.css">
  </link>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/todomvc-app-css/index.css">
  </link>
  
  <link rel="stylesheet" href="https://todomvc-apprunjs.surge.sh/css/app.css">
  </link>
  <script src="https://unpkg.com/apprun@latest/dist/apprun-html.js"></script>
  <section class="todoapp">
    <div id="app"></div>
  </section>
  <footer class="info">
    <p>Double-click to edit a todo</p>
    <p>Created by <a href="http://github.com/samphilipd">Sam Davies</a></p>
    <p>Powered by <a href="https://apprun.js.org/">AppRunJS</a></p>
    <p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
  </footer>
  
  <script src="https://cdn.jsdelivr.net/npm/todomvc-common/base.js"></script>
  <script src="https://todomvc-apprunjs.surge.sh/js/app.js"></script>
</body>

</html>