pixelperfectionist/commands/templates/rendered/index.svelte

<script>
  import Layout from '../Layout.svelte';
  import IconImage from '$/client/components/IconImage.svelte';
  import { developer_admin } from "$/lib/api.js";

  const components = [
    {title: "Accordion", icon: "align-justify"},
    {title: "AspectRatio", icon: "copy"},
    {title: "Badge", icon: "award"},
    {title: "ButtonGroup", icon: "server"},
    {title: "Calendar", icon: "calendar"},
    {title: "Callout", icon: "file-plus"},
    {title: "Cards", icon: "credit-card"},
    {title: "Carousel", icon: "repeat"},
    {title: "Chat", icon: "message-circle"},
    {title: "Code", icon: "code"},
    {title: "Countdown", icon: "clock"},
    {title: "Darkmode", icon: "sunrise"},
    {title: "DataTable", icon: "grid"},
    {title: "FairPay", icon: "dollar-sign"},
    {title: "Flipper", icon: "layers"},
    {title: "Form", icon: "database"},
    {title: "Icon", icon: "feather"},
    {title: "IconImage", icon: "image"},
    {title: "LiveStream", icon: "cast"},
    {title: "LoggedIn", icon: "log-out"},
    {title: "Login", icon: "log-in"},
    {title: "Markdown", icon: "file"},
    {title: "Modal", icon: "maximize"},
    {title: "Pagination", icon: "skip-forward"},
    {title: "Progress", icon: "thermometer"},
    {title: "Sidebar", icon: "sidebar"},
    {title: "SnapImage", icon: "camera"},
    {title: "Spinner", icon: "rotate-cw"},
    {title: "StackLayer", icon: "layers"},
    {title: "Switch", icon: "check-square"},
    {title: "Tabs", icon: "folder"},
    {title: "Tiles", icon: "camera"},
    {title: "Toast", icon: "message-square"},
    {title: "Tooltip", icon: "help-circle"},
    {title: "Video", icon: "video"},
    {title: "WTVideo", icon: "video"},
  ];

</script>

<style>
  hero.middle {
    border-radius: 0px 0px var(--border-radius) var(--border-radius);
  }

  callout.hero {
    background: var(--color-bg-inverted);
    color: var(--color-text-inverted);
    border-radius: 10px 10px 0px 0px;
    margin-bottom: 0px;
  }

  hero.main:hover {
    filter: brightness(1.05);
  }

  hero > cover {
    background: none;
    color: black;
    text-shadow: none;
    opacity: 1;
  }

  main h2 {
    text-align: center;
  }

  main {
    font-size: 1.3em;
  }

  main hero.quote {
    margin-left: -10px;
    margin-right: -10px;
    display: flex;
    flex-direction: row;
  }

  span#slogan {
    font-family: var(--font-computer);
    font-size: 1.5em;
  }

  section {
    margin-right: 2rem;
    margin-left: 2rem;
    font-size: 1.2em;
  }

  components {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
  }

  components component {
    background-color: var(--value0);
  }

  components component icon:hover {
    opacity: 0.1;
  }

  components component name {
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--value8);
    min-width: 150px;
  }

  @media only screen and (max-width: 900px) {
    components {
      grid-template-columns: repeat(4, 1fr);
    }
  }

  @media only screen and (max-width: 600px) {
    components {
      grid-template-columns: repeat(3, 1fr);
    }
  }
</style>

<Layout bare={ true }>
<hero class="main">
  <figure>
    <img src="/images/header.svg"  />
  </figure>
  <cover class="pattern-dots-sm">
    <h1>Learn JavaScript the Hard Way</h1>
    <span id="slogan">Bandolier</span>
    <br/>

    {#if developer_admin}
    <a href="#components"><i>Browse The Components</i></a>
    {/if}
  </cover>
</hero>


<main>
  <h2>A Collection of Learnable Components</h2>

  <section>
    <p>This is a collection of components that are both useable and learnable.  Each component is feature complete, does what you need, but is small enough to understand in a day.  You can start your project quickly, and alter them as you need, or replace them entirely if you outgrow them.</p>

    <p>These aren't simple static user interface elements.  They feature complex difficult to implement features such Video that adapts to HLS live streaming on all platforms, WebTorrent based video support, full feature mini chat, and Bitcoin Payments.</p>

    <p>You'll also find various user interfaces found in other components, but with a simpler code base and CSS style that's easier to understand.  Useful tools like Stacked Layers, Tabs, Data Tables, Sidebars, and Forms.</p>
  </section>

<hero class="main quote">
<blockquote>
  All of these components are extracted from real websites I created for real businesses or creative ideas.  I also made copies of common components found in other UI component collections so <b>you</b> can learn how they're made.
</blockquote>
</hero>

<h2>The Components</h2>

<p>This list of components is constantly expanding as I work on new websites and extract things I created.</p>

{#if !developer_admin}
  <callout id="needs-admin" class="info hero">
  <span>
    Set environment variable <code>DANGER_ADMIN=1</code> to view
    components and use the Bandolier.
  </span>
</callout>
{/if}
<components id="components">
{#each components as component}
  <component class="stacked">
    <name class="layer">
      <b>{component.title}</b>
    </name>
    <icon class="layer">
    <a href="{ developer_admin ? `/client/#/bando/components/${ component.title }` : "#needs-admin" }">
      <IconImage name={ component.icon } pattern={ false }/>
    </a>
    </icon>
  </component>
{/each}
</components>

<hero class="main quote">
<blockquote>
  The "Bandolier" is a belt that holds all your ammo so you can quickly load them when you need to get something done.
</blockquote>
</hero>


<section>
<h2>Documentation</h2>

<p>Every component is fully documented with a complete code demo.  No unrealistic abbreviated demos with missing code and settings.  If you see the demo or component doing something you can view a tab to see he entire demo code with nothing hidden.
</p>

<h2>Getting Started</h2>

<p>You should have received access to the <a href="https://learnjsthehardway.com">Learn JavaScript the Hard Way</a> course which includes a full module on using this starter project.  If you forgot how to forgot how to create your admin account:</p>

<p>After you've made your copy of the project you should <a href="/client/#/register/">register a fake account</a> and then use the <a href="/client/#/admin/table/user/">database admin</a> to give yourself admin.  The database admin tool is only open when you've set <code>DANGER_ADMIN=1</code> on the command line, or if you're set as an admin.
</p>

</section>



</main>
</Layout>