This is the code that runs https://bandolier.learnjsthehardway.com/ for you to review. It uses the https://git.learnjsthehardway.com/learn-javascript-the-hard-way/bandolier-template to create the documentation for the project.
https://bandolier.learnjsthehardway.com/
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
252 lines
8.8 KiB
252 lines
8.8 KiB
<script>
|
|
import Layout from '../Layout.svelte';
|
|
import IconImage from '$/client/components/IconImage.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>
|
|
|
|
<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;
|
|
}
|
|
|
|
#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>
|
|
|
|
<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-center style="background-color: var(--value6)">
|
|
<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>
|
|
|
|
<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">
|
|
<IconImage name="server-cog" height="100%" width="100%" background="var(--value5)" />
|
|
</photo>
|
|
</text-photo>
|
|
|
|
|
|
<text-photo class="solid">
|
|
<photo class="mobile-hide">
|
|
<IconImage name="banana" height="100%" width="100%" background="var(--value3)" color="var(--value7)" />
|
|
</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>
|
|
<IconImage name={ feature.icon } background="var(--value4)" />
|
|
</left>
|
|
<middle>
|
|
<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>
|
|
<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>
|
|
</div>
|
|
|
|
<photo class="mobile-hide">
|
|
<IconImage name="terminal-square" height="100%" width="100%" background="var(--value3)" color="var(--value7)" />
|
|
</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>
|
|
|
|
<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>
|
|
|