Browse Source

A quick and dirty set of instructions for now.

master
Zed A. Shaw 4 months ago
parent
commit
ca1b1b3b76
  1. 35
      rendered/pages/index.svelte
  2. 8
      static/images/header.svg

35
rendered/pages/index.svelte

@ -18,6 +18,10 @@
</script>
<style>
main {
font-size: 1.5rem;
}
header {
position: relative;
margin: 0px;
@ -137,16 +141,39 @@
<Layout>
<header class="main">
<figure>
<h1>Figure Here</h1>
<img src="/images/header.svg" />
</figure>
<span>
<h1>Learn JS The Hard Way</h1>
<p>The learnable starter project.</p>
<a href="/client/#/home/" use:link><i>Read More Docs</i></a>
<p>A learnable starter project.</p>
<a href="/client/#/home/" use:link><i>Log In</i></a>
</span>
</header>
<main>
<h1>Main content/docs here.</h1>
<h2>Introduction</h2>
<p>This project is intended to get you started while you learn to create websites in JavaScript. It is full of <a href="/client/#/bando/components/">components</a> that many websites need, but they're written in a way that a normal person could understand them. Each component should only take 1-5 days to fully understand. This means you can get started, create your idea, then recreate or modify any components you want to change. You can also use the existing components and demos as the basis of your own.
</p>
<h2>Getting Started</h2>
<p>Once you have the project git checked out and running on your computer do this:</p>
<ol>
<li>Run <code>npx knex --knexfile knexfile.cjs migrate:latest</code> to setup the database.</li>
<li>Test out <a href="/client/#/registration/">registration</a> and <a href="/client/#/login/">login</a>.</li>
<li>Access the "Bandolier" (my funny name for the dev tools) with ctrl-alt-b. If you can't access it then you need to rerun it with:
<ul>
<li><code>DANGER_ADMIN=1 npm run dev</code></li>
<li><code>$env:DANGER_ADMIN=1</code> then <code>npm run dev</code></li>
<ul>
</li>
<li>Use the Bando (a short name for the Bandolier) to admin the <b>user</b> database table.</li>
<li>Access the <a href="/client/#/bando/components/">components demos</a> and study the code in <code>client/bando/demos</code> and <code>client/components</code></li>
<li>Edit <code>rendered/pages/index.html</code> to change this page you're reading right now.</li>
<li>Use the <code>client/routes.js</code> to add your own page and test out one of the components from <code>client/components</code>.</li>
<li>Study the code in <code>api/</code> and <code>client/api.js</code> to understand how JSON requests are handled.</li>
</ol>
<h2>More Complete Instructions Coming</h2>
<p>This is a first drop of the project template. I'll be rewriting these instructions once I use this more.</p>
</main>
</Layout>

8
static/images/header.svg

@ -0,0 +1,8 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" viewBox="0 0 1600 900" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
<rect x="0" y="0" width="1600" height="900" style="fill:url(#_Linear1);"/>
<defs>
<linearGradient id="_Linear1" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(800,0,0,450,800,450)"><stop offset="0" style="stop-color:rgb(99,99,99);stop-opacity:1"/><stop offset="0.44" style="stop-color:rgb(70,70,70);stop-opacity:1"/><stop offset="1" style="stop-color:black;stop-opacity:1"/></linearGradient>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 911 B

Loading…
Cancel
Save