bandolier-website/client/pages/Landing.svelte

<script>
  import Layout from '../Layout.svelte';
  import IconImage from '$/client/components/IconImage.svelte';
  import Blockstart from "$/client/components/Blockstart.svelte";
</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;
  }
</style>

<Layout bare={ true } fullwidth={true}>
  <Blockstart>
    <block class="center" style="--value: 7; --w: 100%; --h: 600px; margin-bottom: var(--bottom-margin);">
      <h1 class="center-text">The Bandolier</h1>
      <h2 class="center-text">An educational fullstack web development framework.</h2>
      <p class="center" style="--w: 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>
    </block>

    <block class="center horizontal" style="--w: 100%; --pad: 0px;">
      <left class="fill center" style="--pad: 20px;">
        <h1>Production Ready</h1>
        <p>The Bandolier is based on code used to power <a href="https://learnjsthehardway.com">learnjsthehardway.com</a> supporting thousands of users all watching video.  <b>Yet, it's still easy to study and use.</b> 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>
      </left>

      <shape style="--value 4; --w: 400px; --h: 600px">
        <h4>Photo</h4>
      </shape>
    </block>

    <block class="horizontal" style="--value: 7; --w: 100%; --pad: 0px;">
      <shape style="--value 4; --w: 400px; --h: 600px">
        <h4>Photo</h4>
      </shape>

      <right class="fill center" style="--pad: 20px;">
        <h1>Low Friction Code</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.</p>
      </right>
    </block>

    <block class="center" style="--h: min-content">
      <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 convenient features.  If you don't like how The Bandolier does it, then <b>replace it</b>.</p>
    </block>

    <grid class="center-self" style="--cols: 3;">
      <shape style="--w: 200px; --h: 200px; --value: 3; --text: 9;"><a href="#">Video</a></shape>
      <shape style="--w: 200px; --h: 200px; --value: 3; --text: 9;"><a href="#">WebTorrent</a></shape>
      <shape style="--w: 200px; --h: 200px; --value: 3; --text: 9;"><a href="#">HLS Streams</a></shape>
      <shape style="--w: 200px; --h: 200px; --value: 3; --text: 9;"><a href="#">Payments</a></shape>
      <shape style="--w: 200px; --h: 200px; --value: 3; --text: 9;"><a href="#">Auth</a></shape>
      <shape style="--w: 200px; --h: 200px; --value: 3; --text: 9;"><a href="#">JSON APIs</a></shape>
      <shape style="--w: 200px; --h: 200px; --value: 3; --text: 9;"><a href="#">Databases</a></shape>
      <shape style="--w: 200px; --h: 200px; --value: 3; --text: 9;"><a href="#">UI Components</a></shape>
      <shape style="--w: 200px; --h: 200px; --value: 3; --text: 9;"><a href="#">Admin Panels</a></shape>
    </grid>

    <hr>

    <block class="center" style="--h: min-content">
      <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>
    </block>

    <block class="horizontal" style="--value: 7; --w: 100%; --pad: 0px;">
      <left class="fill center" style="--pad: 20px;">
        <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>
      </left>

      <shape style="--value 4; --w: 400px; --h: 600px">
        <h4>Photo</h4>
      </shape>
    </block>

    <block class="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>
    </block>

  </Blockstart>
</Layout>