bandolier-website/client/pages/Landing.svelte

<script>
  import Layout from '../Layout.svelte';
  import IconImage from '$/client/components/IconImage.svelte';

  const features = [
    {title: "Video", icon: "video", description: "Easy video playback with aspect ratios.", url: "/client/#/bando/components/video/" },
    {title: "WebTorrent", icon: "tornado", description: "Sharing the load with WebTorrent.", url: "/client/#/bando/components/WTVideo/" },
    {title: "HLS Streaming Video", icon: "cast", description: "Efficient streaming of video, even on platforms without HLS support.", url: "/client/#/bando/components/HLSVideo/" },
    {title: "Payments", icon: "dollar-sign", description: "Fully implemented support for Paypal, Stripe, and Bitcoin.", url: "/client/#/bando/components/" },
    {title: "Authentication", icon: "log-in", description: "Authentication with bcrypt secure password storage.", url: "/client/#/bando/components/LogIn/" },
    {title: "JSON APIs", icon: "curly-braces", description: "Simple implementation of JSON API backends.", url: "/client/#/docs/lib/api.js" },
    {title: "Database ORMs", icon: "database", description: "Database access with a simple ORM and admin control panel.", url: "/client/#/bando/components/DataTable/" },
    {title: "UI Components", icon: "layout", description: "Full set of demo components to study and use.", url: "/client/#/bando/components/" },
    {title: "Admin Dashboard", icon: "keyboard", description: "Simple admin dashboard for development and management.", url: "/admin/#/" },
    {title: "Email", icon: "mail", description: "Email templates, sending emails, and testing your email setup.", url: "/client/#/docs/lib/email.js" },
  ]
</script>

<style>
  h1 {
    font-size: 3em;
  }

  h2 {
    font-size: 2em;
  }

  h3 {
    font-size: 1.5em;
  }

  sup {
    background-color: var(--color-bg);
    color: var(--color);
    font-size: 0.5em;
  }

  modal {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 100;
    padding: 2rem;
    display: none;
  }


  @media only screen and (max-width: 550px) {
    modal {
      display: flex;
      justify-content: center;
      align-items: start;
    }
  }

  hero {
    --h: 600px;
    --w: 100vw;
    --fsize: min(1.2em, 2.5vw);
    display: flex;
    flex-direction: column;
    background-image: url("/images/hero-bg.svg");
    background-size: cover;
    background-repeat: no-repeat;
    min-width: var(--w);
    height: var(--h);
    padding-left: 20vw;
    padding-right: 20vw;
    font-size: var(--fsize);
    text-align: center;
    color: var(--value8);
  }

  hero a {
    color: var(--value6);
  }

  text-photo {
    --w: 100vw;
    --h: 600px;
    --pad: 0px;
    --fsize: 1.2em;
    display: flex;
    flex-direction: row;
    min-width: var(--w);
    min-height: var(--h);
    padding: var(--pad);
    font-size: var(--fsize);
  }

  text-photo > div {
    --pad: 5vw;
    flex: 1 1 auto;
    justify-self: center;
    align-self: center;
    padding: var(--pad);
  }

  text-photo > div h1 {
    text-align: center;
  }

  text-photo > photo {
    --w: min(400px, 50vw);
    display: flex;
    justify-content: stretch;
    min-width: var(--w);
    background-color: var(--value6);
  }

  text-photo > photo > img {
    width: 100%;
  }

  .solid {
    background-color: var(--value1);
    color: var(--value9);
  }

  .solid a {
    color: var(--value7);
  }

  text-center {
    --fsize: 1.2em;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    align-content: center;
    font-size: var(--fsize);
    padding-left: 10vw;
    padding-right: 10vw;
    padding-top: 2rem;
    padding-bottom: 2rem;
  }

  feature-grid {
    display: grid;
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr;
  }

  tile > left {
    width: 100px;
    min-width: 100px;
    max-width: 100px;
    height: 100px;
    min-height: 100px;
    max-height: 100px;
  }

  tile > middle h5,
  tile > middle p {
    margin: 3px;
  }

  @media only screen and (max-width: 600px) {
    feature-grid {
      grid-template-columns: 1fr;
    }
  }

</style>

<Layout bare={ true } fullwidth={true}>
  <hero>
    <h1 class="center-text">The Bandolier</h1>
    <h2 class="center-text">An educational fullstack web development framework.</h2>
    <p class="center" style="--w: min(100%, 800px)">A belt full of web development ammunition. A full featured web framework designed to be studied. The Bandolier contains simple implementations of almost every feature found in other frameworks, but in small easily studied forms.</p>

    <h2 class="center-text" style="font-size: 1.2em;">A project of <a href="https://learnjsthehardway.com/">Learn JavaScript the Hard Way</a></h2>
  </hero>

  <text-photo>
    <div>
      <h1>Production Capable</h1>
      <p>The Bandolier isn't "student grade". It's based on code used to power <a href="https://learnjsthehardway.com">learnjsthehardway.com</a> supporting thousands of users all watching thousands of hours of <b>video</b>.  <b>Yet, it's still easy to study and use.</b>  The Bandolier demonstrates that you don't have to be complicated to be useful.</p>
    </div>

    <photo class="mobile-hide">
      <img src="/images/colt.svg">
    </photo>
  </text-photo>


  <text-photo class="solid">
    <photo class="mobile-hide">
      <img src="/images/bandolier.svg">
    </photo>

    <div>
      <h1>Low Friction Progress</h1>
      <p>The code isn't hidden away in a convoluted tree of directories and <code>node_modules</code>.  It's readily available for you to view, study, change, or even replace as you need.  No only that but The Bandolier <b>advocates</b> copying, modifying, and replacing code as you learn. All of the components are loosely coupled and easily replaced. Don't like my ORM? Use your favorite. Want to write a <a href="https://go.dev/">Go</a> backend?  Go for it. </p>
    </div>
  </text-photo>

  <text-center>
    <h2 class="center-self">Full Featured</h2>
    <p class="no-flex center-self" style="--w: 50%">The Bandolier comes with nearly everything you need, and a lot of things modern web developers shouldn't have to implement.  Authentication, standard <a href="https://www.npmjs.com/package/bcryptjs">bcrypt</a> password storage, <a href="/client/#/bando/components/HLSVideo/">HLS Video Streaming</a>, and <a href="/client/#/icons/">icons</a> are just a few of the <a href="/client/#/bando/components/">convenient features</a>.  And, if you don't like how The Bandolier does it, then <b>replace it</b>.</p>

    <feature-grid>
      {#each features as feature}
      <tile>
        <left>
          <a href={feature.url} style="width: 100%; height: 100%;">
            <IconImage name={ feature.icon } background="var(--value2)" color="var(--value7)" />
          </a>
        </left>
        <middle>
          <h5><a href={ feature.url }>{ feature.title }</a></h5>
          <p>{ feature.description }</p>
        </middle>
      </tile>
      {/each}
    </feature-grid>
  </text-center>

  <text-center>
      <h1 class="center-self">Progressive Development</h1>
      <p class="center-self no-flex" style="--w: 50%">Other frameworks make you create 4, 5, or sometimes 10 different files just to get a "Hello World" going.  The Bandolier requires 1 new file to start, and editing 1 other file. <b>There's even a template generator to start all of your files in each step.</b> Each new step in the development process requires only 1 or 2 new files, and everything keeps working as you work.</p>
  </text-center>

  <text-photo class="solid">
    <div>
        <h1>Learn a Personal Process</h1>
        <p>If you're just starting out it's hard to know what to do next.  The Bandolier supports a <b>personal development process</b> that takes you from an initial UI to a working application in logical steps. The process is the result of watching thousands of beginners struggle with getting started, and has worked to help them start and finish their projects.</p>
        <p style="font-size: 0.8em;"><a href="https://commons.wikimedia.org/wiki/User:Ealdgyth">Photo by Ealdgyth</a></p>
    </div>

    <photo class="mobile-hide">
      <img src="/images/cowboyhat.svg">
    </photo>
  </text-photo>

  <text-center>
    <h1 class="center-text no-flex">The Fastest Quick Start in the West<sup>*</sup></h1>
    <pre>
<code>
npm install git+https://git.learnjsthehardway.com/learn-javascript-the-hard-way/ljsthw-bandolier.git
npx bando-up create my-project
cd my-project
npm install
npm run knex migrate:latest
node bando.js init
npm run DANGER_ADMIN

</code>
    </pre>

    <div class="no-flex" style="font-size: 0.8em;">* Fast is defined as relative to the speed of <code>node_modules</code> LOL.</div>

    <h2><a class="center-text" href="/client/#/quick/">Read the Full Quick Start Guide</a></h2>
  </text-center>

  <text-center style="background-color: var(--value6); color: var(--value0) !important;">
    <h2 class="center-self">Current Status</h2>
    <p class="no-flex center-self" style="--w: 50%">The Bandolier is currently ready for testing and
      about 50% of the documnetation is written.  You can currently access all of the documentation, and
      soon there will be a way to play with the administrator console.
    </p>
  </text-center>

  <modal>
    <callout class="warning"><span>
      <h1>Get Off Ya Phone</h1>

      <p>This app is a work in progress so warping it to your phone isn't done yet.  You can just go straight to <a href="/client/#/">the docs</a> and when you're serious go find a real computer and stop making people support your phone for reading professional documentation.</p>
    </span></callout>
  </modal>
</Layout>