learn-javascript-the-hard-way
/
bandolier-website
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Lots of dumb changes just to make the landing page not suck. Going with a western theme, kind of sepia tones.

Browse Source
main
Zed A. Shaw 1 year ago
parent 78b2f0e13d
commit 382bb8253b
8 changed files with 422 additions and 163 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 38
      client/Header.svelte
  2. 6
      client/components/Darkmode.svelte
  3. 6
      client/components/IconImage.svelte
  4. 263
      client/pages/Landing.svelte
  5. 234
      rendered/pages/index.svelte
  6. 1
      static/client/index.html
  7. 23
      static/color.css
  8. 14
      static/global.css

38
client/Header.svelte
Unescape View File

@ -15,6 +15,23 @@
font-size: 2em; font-size: 2em;
} }
header {
background-color: var(--value0);
}
header a {
color: var(--value7);
}
nav {
background-color: var(--value0);
color: var(--value7);
}
nav * {
color: var(--value7);
}
@media only screen and (max-width: 600px) { @media only screen and (max-width: 600px) {
#logo { #logo {
font-size: 1.5em; font-size: 1.5em;
@ -26,6 +43,7 @@
font-size: 1.4em; font-size: 1.4em;
} }
} }
</style> </style>
<header class:fixed> <header class:fixed>
@ -33,13 +51,13 @@
{#if $user.authenticated} {#if $user.authenticated}
<a href="/intro/" use:link id="logo">The Bandolier</a> <a href="/intro/" use:link id="logo">The Bandolier</a>
<ul> <ul>
<li><a href="/" on:click|preventDefault={ logout_user } data-testid="logout-link"><Icon name="log-out" tooltip="Log out."/></a></li> <li><a href="/" on:click|preventDefault={ logout_user } data-testid="logout-link"><Icon color="var(--value7)" name="log-out" tooltip="Log out."/></a></li>
<li><a data-testid="user-profile-button" href="/profile/" use:link><Icon name="settings" tooltip="Settings."/></a></li> <li><a data-testid="user-profile-button" href="/profile/" use:link><Icon color="var(--value7)" name="settings" tooltip="Settings."/></a></li>
<li><a href="/feed.rss"><Icon name="rss" tooltip="RSS Feed." tip_position="bottom-left" /></a></li> <li><a href="/feed.rss"><Icon color="var(--value7)" name="rss" tooltip="RSS Feed." tip_position="bottom-left" /></a></li>
{#if $user.admin } {#if $user.admin }
<li><a href="/admin/#/"><Icon name="keyboard" tooltip="Admin database."/></a></li> <li><a href="/admin/#/"><Icon color="var(--value7)" name="keyboard" tooltip="Admin database."/></a></li>
{/if} {/if}
<li><Darkmode /></li> <li><Darkmode dark_icon_color="var(--value7)" light_icon_color="var(--value7)" /></li>
</ul> </ul>
{:else} {:else}
<!-- don't use:link because we want them to go to the landing page if they aren't logged in. --> <!-- don't use:link because we want them to go to the landing page if they aren't logged in. -->
@ -48,18 +66,18 @@
{#if register_enabled} {#if register_enabled}
<li><a id="register-button" href="/client/#/register/"> <li><a id="register-button" href="/client/#/register/">
<span class="mobile"> <span class="mobile">
<Icon name="dollar-sign" tooltip="Register."/> <Icon color="var(--value7)" name="dollar-sign" tooltip="Register."/>
</span> </span>
<span class="mobile-hide"> <span class="mobile-hide">
<button type="button">Register</button> <button type="button" class="inverted">Register</button>
</span> </span>
</a> </a>
</li> </li>
{/if} {/if}
<li><a href="/login/" use:link><Icon name="log-in" tooltip="Log in." /></a></li> <li><a href="/login/" use:link><Icon color="var(--value7)" name="log-in" tooltip="Log in." /></a></li>
<li><a href="/client/#/"><Icon name="book" tooltip="Docs" /></a></li> <li><a href="/client/#/"><Icon color="var(--value7)" name="book" tooltip="Docs" /></a></li>
<li><Darkmode /></li> <li><Darkmode dark_icon_color="var(--value7)" light_icon_color="var(--value7)" /></li>
</ul> </ul>
{/if} {/if}
</nav> </nav>

6
client/components/Darkmode.svelte
Unescape View File

@ -5,6 +5,8 @@
import {onMount} from 'svelte'; import {onMount} from 'svelte';
export let theme = "light"; export let theme = "light";
export let light_icon_color="var(--color)";
export let dark_icon_color="var(--color)"
const set_theme = () => { const set_theme = () => {
document.documentElement.setAttribute('data-theme', theme); document.documentElement.setAttribute('data-theme', theme);
@ -28,10 +30,10 @@
{#if theme == 'dark'} {#if theme == 'dark'}
<span style="cursor: pointer;" on:click={ () => toggle() }> <span style="cursor: pointer;" on:click={ () => toggle() }>
<Icon name="sunrise" tip_position="bottom-left" tooltip="Light mode." size="32" /> <Icon name="sunrise" color={ dark_icon_color } tip_position="bottom-left" tooltip="Light mode." size="32" />
</span> </span>
{:else} {:else}
<span style="cursor: pointer;" on:click={ () => toggle() }> <span style="cursor: pointer;" on:click={ () => toggle() }>
<Icon name="sunset" size="32" tip_position="bottom-left" tooltip="Dark mode."/> <Icon name="sunset" color={ light_icon_color } size="32" tip_position="bottom-left" tooltip="Dark mode."/>
</span> </span>
{/if} {/if}

6
client/components/IconImage.svelte
Unescape View File

@ -9,14 +9,14 @@
export let linejoin="round"; export let linejoin="round";
export let name=""; export let name="";
export let pattern="dots-sm"; export let pattern="dots-sm";
export let height="200"; export let height="100%";
export let width="200"; export let width="100%";
export let thickness="2"; export let thickness="2";
export let testid=`iconimage-default-${name}`; export let testid=`iconimage-default-${name}`;
export let hue='orange'; export let hue='orange';
export let background_hue='blue'; export let background_hue='blue';
export let grayscale = 0; export let grayscale = 0;
export let aspect_ratio = "16/9"; export let aspect_ratio = "1/1";
let random_background = rando({luminosity: 'light', hue: background_hue}); let random_background = rando({luminosity: 'light', hue: background_hue});
let random_pattern = rando({luminosity: 'light', hue}); let random_pattern = rando({luminosity: 'light', hue});

263
client/pages/Landing.svelte
Unescape View File

@ -1,7 +1,19 @@
<script> <script>
import Layout from '../Layout.svelte'; import Layout from '../Layout.svelte';
import IconImage from '$/client/components/IconImage.svelte'; import IconImage from '$/client/components/IconImage.svelte';
import Blockstart from "$/client/components/Blockstart.svelte";
const features = [
{title: "Video", icon: "video", description: "This is some video.", url: "/client/#/bando/components/video/" },
{title: "WebTorrent", icon: "tornado", description: "This is some video.", url: "/client/#/bando/components/WTVideo/" },
{title: "HLS Streaming Video", icon: "cast", description: "This is some video.", url: "/client/#/bando/components/HLSVideo/" },
{title: "Payments", icon: "dollar-sign", description: "This is some video.", url: "/client/#/bando/components/" },
{title: "Authentication", icon: "log-in", description: "This is some video.", url: "/client/#/bando/components/LogIn/" },
{title: "JSON APIs", icon: "curly-braces", description: "This is some video.", url: "/client/#/docs/lib/api.js" },
{title: "Database ORMs", icon: "database", description: "This is some video.", url: "/client/#/bando/components/DataTable/" },
{title: "UI Components", icon: "layout", description: "This is some video.", url: "/client/#/bando/components/" },
{title: "Admin Dashboard", icon: "keyboard", description: "This is some video.", url: "/admin/#/" },
{title: "Email", icon: "mail", description: "This is some video.", url: "/client/#/" },
]
</script> </script>
<style> <style>
@ -22,76 +34,195 @@
color: var(--color); color: var(--color);
font-size: 0.5em; font-size: 0.5em;
} }
#photo {
--w: 400px;
--h: 600px;
--value: 4;
}
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: 1.2em;
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: 400px;
display: flex;
justify-content: stretch;
min-width: var(--w);
}
.solid {
background-color: var(--value1);
color: var(--value9);
}
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;
height: 100px;
}
</style> </style>
<Layout bare={ true } fullwidth={true}> <Layout bare={ true } fullwidth={true}>
<Blockstart> <hero>
<block class="center" style="--value: 7; --w: 100%; --h: 600px; margin-bottom: var(--bottom-margin);"> <h1 class="center-text">The Bandolier</h1>
<h1 class="center-text">The Bandolier</h1> <h2 class="center-text">An educational fullstack web development framework.</h2>
<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>
<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>
<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>
</block>
<text-center style="background-color: var(--value6)">
<block class="center horizontal" style="--w: 100%; --pad: 0px;"> <h2 class="center-self">Current Status</h2>
<left class="fill center" style="--pad: 20px;"> <p class="no-flex center-self" style="--w: 50%">The Bandolier is currently ready for testing and
<h1>Production Ready</h1> about 50% of the documnetation is written. You can currently access all of the documentation, and
<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> soon there will be a way to play with the administrator console.
</left> </p>
</text-center>
<shape style="--value 4; --w: 400px; --h: 600px">
<h4>Photo</h4> <text-photo>
</shape> <div>
</block> <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>
<block class="horizontal" style="--value: 7; --w: 100%; --pad: 0px;"> </div>
<shape style="--value 4; --w: 400px; --h: 600px">
<h4>Photo</h4> <photo class="mobile-hide">
</shape> <IconImage name="server-cog" height="100%" width="100%" background="var(--value5)" />
</photo>
<right class="fill center" style="--pad: 20px;"> </text-photo>
<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> <text-photo class="solid">
</block> <photo class="mobile-hide">
<IconImage name="banana" height="100%" width="100%" background="var(--value3)" color="var(--value7)" />
<block class="center" style="--h: min-content"> </photo>
<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> <div>
</block> <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>
<grid class="center-self" style="--cols: 3;"> </div>
<shape style="--w: 200px; --h: 200px; --value: 3; --text: 9;"><a href="#">Video</a></shape> </text-photo>
<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> <text-center>
<shape style="--w: 200px; --h: 200px; --value: 3; --text: 9;"><a href="#">Payments</a></shape> <h2 class="center-self">Full Featured</h2>
<shape style="--w: 200px; --h: 200px; --value: 3; --text: 9;"><a href="#">Auth</a></shape> <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>
<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> <feature-grid>
<shape style="--w: 200px; --h: 200px; --value: 3; --text: 9;"><a href="#">UI Components</a></shape> {#each features as feature}
<shape style="--w: 200px; --h: 200px; --value: 3; --text: 9;"><a href="#">Admin Panels</a></shape> <tile>
</grid> <left>
<IconImage name={ feature.icon } background="var(--value4)" />
<hr> </left>
<middle>
<block class="center" style="--h: min-content"> <h4><a href={ feature.url }>{ feature.title }</a></h4>
<p>{ feature.description }</p>
</middle>
</tile>
{/each}
</feature-grid>
</text-center>
<text-center>
<h1 class="center-self">Progressive Development</h1> <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> <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> </text-center>
<block class="horizontal" style="--value: 7; --w: 100%; --pad: 0px;"> <text-photo class="solid">
<left class="fill center" style="--pad: 20px;"> <div>
<h1>Learn a Personal Process</h1> <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>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> </div>
<shape style="--value 4; --w: 400px; --h: 600px"> <photo class="mobile-hide">
<h4>Photo</h4> <IconImage name="terminal-square" height="100%" width="100%" background="var(--value3)" color="var(--value7)" />
</shape> </photo>
</block> </text-photo>
<block class="center"> <text-center>
<h1 class="center-text no-flex">The Fastest Quick Start in the West<sup>*</sup></h1> <h1 class="center-text no-flex">The Fastest Quick Start in the West<sup>*</sup></h1>
<pre> <pre>
<code> <code>
@ -109,7 +240,13 @@ npm run DANGER_ADMIN
<div class="no-flex" style="font-size: 0.8em;">* Fast is defined as relative to the speed of <code>node_modules</code> LOL.</div> <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> <h2><a class="center-text" href="/client/#/quick/">Read the Full Quick Start Guide</a></h2>
</block> </text-center>
<modal>
<callout class="warning"><span>
<h1>Get Off Ya Phone</h1>
</Blockstart> <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> </Layout>

234
rendered/pages/index.svelte
Unescape View File

@ -1,7 +1,19 @@
<script> <script>
import Layout from '../Layout.svelte'; import Layout from '../Layout.svelte';
import IconImage from '$/client/components/IconImage.svelte'; import IconImage from '$/client/components/IconImage.svelte';
import Blockstart from "$/client/components/Blockstart.svelte";
const features = [
{title: "Video", icon: "video", description: "This is some video.", url: "/client/#/bando/components/video/" },
{title: "WebTorrent", icon: "tornado", description: "This is some video.", url: "/client/#/bando/components/WTVideo/" },
{title: "HLS Streaming Video", icon: "cast", description: "This is some video.", url: "/client/#/bando/components/HLSVideo/" },
{title: "Payments", icon: "dollar-sign", description: "This is some video.", url: "/client/#/bando/components/" },
{title: "Authentication", icon: "log-in", description: "This is some video.", url: "/client/#/bando/components/LogIn/" },
{title: "JSON APIs", icon: "curly-braces", description: "This is some video.", url: "/client/#/docs/lib/api.js" },
{title: "Database ORMs", icon: "database", description: "This is some video.", url: "/client/#/bando/components/DataTable/" },
{title: "UI Components", icon: "layout", description: "This is some video.", url: "/client/#/bando/components/" },
{title: "Admin Dashboard", icon: "keyboard", description: "This is some video.", url: "/admin/#/" },
{title: "Email", icon: "mail", description: "This is some video.", url: "/client/#/" },
]
</script> </script>
<style> <style>
@ -41,12 +53,6 @@
display: none; display: none;
} }
.feature-grid > * {
--w: min(200px, 30vw);
--h: min(200px, 30vw);
--value: 3;
--text: 9;
}
@media only screen and (max-width: 550px) { @media only screen and (max-width: 550px) {
modal { modal {
@ -56,76 +62,167 @@
} }
} }
hero {
--h: 600px;
--w: 100vw;
--fsize: 1.2em;
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: 400px;
display: flex;
justify-content: stretch;
min-width: var(--w);
}
.solid {
background-color: var(--value1);
color: var(--value9);
}
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;
height: 100px;
}
</style> </style>
<Layout bare={ true } fullwidth={true}> <Layout bare={ true } fullwidth={true}>
<Blockstart> <hero>
<block class="center" style="--value: 7; --w: 100vw; --h: 600px; margin-bottom: var(--bottom-margin);"> <h1 class="center-text">The Bandolier</h1>
<h1 class="center-text">The Bandolier</h1> <h2 class="center-text">An educational fullstack web development framework.</h2>
<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>
<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>
<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>
</block>
<text-center style="background-color: var(--value6)">
<block class="center horizontal" style="--w: 100vw; --pad: 0px;"> <h2 class="center-self">Current Status</h2>
<left class="fill center" style="--pad: 20px;"> <p class="no-flex center-self" style="--w: 50%">The Bandolier is currently ready for testing and
<h1>Production Capable</h1> about 50% of the documnetation is written. You can currently access all of the documentation, and
<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> soon there will be a way to play with the administrator console.
</left> </p>
</text-center>
<shape id="photo" class="mobile-hide">
<h4>Photo</h4> <text-photo>
</shape> <div>
</block> <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>
<block class="horizontal" style="--value: 7; --w: 100%; --pad: 0px;"> </div>
<shape id="photo" class="mobile-hide">
<h4>Photo</h4> <photo class="mobile-hide">
</shape> <IconImage name="server-cog" height="100%" width="100%" background="var(--value5)" />
</photo>
<right class="fill center" style="--pad: 20px;"> </text-photo>
<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>
</right> <text-photo class="solid">
</block> <photo class="mobile-hide">
<IconImage name="banana" height="100%" width="100%" background="var(--value3)" color="var(--value7)" />
<block class="center" style="--h: min-content"> </photo>
<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> <div>
</block> <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>
<grid class="center-self feature-grid" style="--cols: 3;"> </div>
<shape><a href="#">Video</a></shape> </text-photo>
<shape><a href="#">WebTorrent</a></shape>
<shape><a href="#">HLS Streams</a></shape> <text-center>
<shape><a href="#">Payments</a></shape> <h2 class="center-self">Full Featured</h2>
<shape><a href="#">Auth</a></shape> <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>
<shape><a href="#">JSON APIs</a></shape>
<shape><a href="#">Databases</a></shape> <feature-grid>
<shape><a href="#">UI Components</a></shape> {#each features as feature}
<shape><a href="#">Admin Panels</a></shape> <tile>
</grid> <left>
<IconImage name={ feature.icon } background="var(--value4)" />
<hr> </left>
<middle>
<block class="center" style="--h: min-content"> <h4><a href={ feature.url }>{ feature.title }</a></h4>
<p>{ feature.description }</p>
</middle>
</tile>
{/each}
</feature-grid>
</text-center>
<text-center>
<h1 class="center-self">Progressive Development</h1> <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> <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> </text-center>
<block class="horizontal" style="--value: 7; --w: 100%; --pad: 0px;"> <text-photo class="solid">
<left class="fill center" style="--pad: 20px;"> <div>
<h1>Learn a Personal Process</h1> <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>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> </div>
<shape id="photo" class="mobile-hide"> <photo class="mobile-hide">
<h4>Photo</h4> <IconImage name="terminal-square" height="100%" width="100%" background="var(--value3)" color="var(--value7)" />
</shape> </photo>
</block> </text-photo>
<block class="center"> <text-center>
<h1 class="center-text no-flex">The Fastest Quick Start in the West<sup>*</sup></h1> <h1 class="center-text no-flex">The Fastest Quick Start in the West<sup>*</sup></h1>
<pre> <pre>
<code> <code>
@ -143,7 +240,7 @@ npm run DANGER_ADMIN
<div class="no-flex" style="font-size: 0.8em;">* Fast is defined as relative to the speed of <code>node_modules</code> LOL.</div> <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> <h2><a class="center-text" href="/client/#/quick/">Read the Full Quick Start Guide</a></h2>
</block> </text-center>
<modal> <modal>
<callout class="warning"><span> <callout class="warning"><span>
@ -152,5 +249,4 @@ npm run DANGER_ADMIN
<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> <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> </span></callout>
</modal> </modal>
</Blockstart>
</Layout> </Layout>

1
static/client/index.html
Unescape View File

@ -10,7 +10,6 @@
<link rel='icon' type='image/png' href='/favicon.png'> <link rel='icon' type='image/png' href='/favicon.png'>
<link rel='stylesheet' href='/global.css'> <link rel='stylesheet' href='/global.css'>
<link rel='stylesheet' href='/blockstart.css'>
<link rel='stylesheet' href='/css/pattern.min.css'> <link rel='stylesheet' href='/css/pattern.min.css'>
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">

23
static/color.css
Unescape View File

@ -9,17 +9,18 @@
} }
:root { :root {
--value9: hsl(0, 0%, 100%); /* not used too often */ --value9: hsl(60, 100%, 99%);
--value8: hsl(210, 17%, 98%); --value8: hsl(65, 64%, 92%);
--value8a: hsl(210, 17%, 98%, 0); --value8a: hsl(65, 64%, 92%, 0);
--value7: #e9ecef; --value7: hsl(37, 76%, 85%);
--value6: #dee2e6; --value6: hsl(32, 89%, 75%);
--value5: #ced4da; --value5: hsl(32, 78%, 66%);
--value4: #adb5bd; --value4: hsl(24, 69%, 60%);
--value3: #6c757d; --value3: hsl(30, 45%, 37%);
--value2: #495057; --value2: hsl(9, 20%, 24%);
--value1: #343a40; --value1: hsl(28, 18%, 14%);
--value0: #212529; --value0: hsl(105, 100%, 1%);
--orange: #fb5607; --orange: #fb5607;
--yellow: #ffbe0b; --yellow: #ffbe0b;
--red: #ff006e; --red: #ff006e;

14
static/global.css
Unescape View File

@ -61,7 +61,6 @@ header {
display: flex; display: flex;
justify-content: center; justify-content: center;
text-align: var(--justify-important); text-align: var(--justify-important);
border-bottom: 1px solid var(--color-bg-secondary);
} }
header, header,
@ -652,6 +651,12 @@ tile {
border: 1px solid #eee; border: 1px solid #eee;
} }
tile > left {
display: flex;
align-items: center;
justify-content: center;
}
tile > middle { tile > middle {
padding-left: 0.5rem; padding-left: 0.5rem;
padding-right: 0.5rem; padding-right: 0.5rem;
@ -1510,13 +1515,14 @@ grid {
#register-button button { #register-button button {
font-size: 0.9em; font-size: 0.9em;
background-color: unset; background-color: unset;
color: var(--color-text); color: var(--value7);
padding: 3px; padding: 3px;
border: 2px solid var(--value7);
} }
#register-button:hover button { #register-button:hover button {
background-color: var(--color); background-color: var(--value0);
color: var(--color-bg); color: var(--value7);
filter: unset; filter: unset;
} }

Write Preview
Loading…
Cancel
Save