Add initial assets, license

This commit is contained in:
ronreg-ribdev 2020-05-12 00:17:36 -07:00
parent d79b7554bf
commit 5d948d3a9b
6 changed files with 17 additions and 53 deletions

View File

@ -1,50 +1,5 @@
Get started building a simple application for Landscape on your [Urbit](http://urbit.org) ship with a few commands.
BART runner app for [Urbit](http://urbit.org).
This tool is experimental and primarily used internally to develop front-end applications. While Tlon does not officially support this tool, you can always get general programming help for Urbit in the `~dopzod/urbit-help` chat.
The Bart App Map was created by Trucy Phan (https://github.com/trucy/bart-map) and is used under
the terms of the Creative Commons Attribution 3.0 Unported License.
## Installation
This repository is available as a template; to immediately generate your application's repository you can click [here](https://github.com/urbit/create-landscape-app/generate). Clone the generated repository, `npm install` and then run `npm start` to get started (you can also directly clone this repository, if you wish!).
In order to run your application on your ship, you will need Urbit v.0.10.0 or higher. On your Urbit ship, if you haven't already, mount your pier to Unix with `|mount %`.
## Using
Once you're up and running, your tile lives in `tile/tile.js`, which uses [React](https://reactjs.org) to render itself -- you'll want a basic foothold with it first. When you make changes, the `urbit` directory will update with the compiled application and, if you're running `npm run serve`, it will automatically copy itself to your Urbit ship when you save your changes (more information on that below).
### `npm start`
This runs the wizard. Give it an application name and the location of your Urbit ship's desk and it will customise the files so your new application will run on your ship.
### `npm run build`
This builds your application and copies it into your Urbit ship's desk. In your Urbit (v.0.8.0 or higher) `|commit %home` (or `%your-desk-name`) to synchronise your changes.
If this is the first time you're running your application on your Urbit ship, don't forget to `|start %yourapp`.
### `npm run serve`
Builds the application and copies it into your Urbit ship's desk, watching for changes. In your Urbit (v.0.8.0 or higher) `|commit %home` (or `%your-desk-name`) to synchronise your changes.
## FAQ
### What is a "tile" vs. "full" app?
When you run `npm run start`, the wizard will ask you to specify which you want:
- **tile**: A tile that exists on the Landscape launch screen. A pre-existing example is the "Weather" tile or the "Clock" tile in Landscape.
- **full**: A tile that links to a full-screen application: this means that you will work in both `tile.js` (for the tile interface) and `root.js` (and beyond) in the `src` folder.
No matter which option you specify, the wizard will customise the Hoon boilerplate for you and provide a basic example accordingly.
### How can I ensure my app fits Landscape design?
Landscape makes use of the [Indigo](https://urbit.github.io/indigo-react/) CSS framework. The template tile and full application both make use of it as an example for you to get going fast.
### What if I want to communicate with my ship / provide more functionality besides a front-end?
By default, your app will provide an example of passing state from ship to front-end with the `peer-[yourappname]tile` arm in the app's .hoon file -- in this case, just sending your ship's name as a data prop. The code is well-commented if you don't want to pass state, or if you want to know how to pass almost anything else from your ship to the Landscape interface.
In order to do anything substantial, of course, you'll want to know [Hoon](https://urbit.org/docs/tutorials/hoon/). If this is intimidating, don't panic: `create-landscape-app` is a fantastic way to start learning by leveraging your strengths. This repository is intended to be a boilerplate for rapid front-end development; it's also a gradual, incremental introduction to Hoon for web developers by allowing for rapid prototyping and experimentation with the Landscape interface.
Happy hacking!

View File

@ -18,10 +18,19 @@ export class Root extends Component {
<Route exact path="/~bartinfo" render={ () => {
return (
<div className="cf w-100 flex flex-column pa4 ba-m ba-l ba-xl b--gray2 br1 h-100 h-100-minus-40-s h-100-minus-40-m h-100-minus-40-l h-100-minus-40-xl f9 white-d overflow-x-hidden">
<h1 className="mt0 f8 fw4">bartinfo</h1>
<p className="lh-copy measure pt3">Welcome to your Landscape application.</p>
<p className="lh-copy measure pt3">To get started, edit <code>src/index.js</code>, <code>tile/tile.js</code> or <code>urbit/app/bartinfo.hoon</code> and <code>|commit %home</code> on your Urbit ship to see your changes.</p>
<a className="black no-underline db f8 pt3" href="https://urbit.org/docs">-> Read the docs</a>
<h1 className="mt0 f8 fw4">BART Info</h1>
<div style={{display: "grid", gridTemplateColumns: "66% 34%", gridGap: "10px" }}>
<div className="topinfo" style={{gridColumn: "1 / 2"}}>
<p className="lh-copy measure pt3">Current time is (current time)</p>
<p className="lh-copy measure pt3">Today's bart map:</p>
</div>
<div className="map" style={{gridColumn: "1", gridRow: "2"}}>
<img src="/~bartinfo/img/BART-Map-Weekday-Saturday.png" />
</div>
<div className="searchsidebar" style={{gridColumn: "2", gridRow: "2"}}>
Search stuff here
</div>
</div>
</div>
)}}
/>

View File

@ -9,7 +9,7 @@ export default class bartinfoTile extends Component {
<div className="w-100 h-100 relative bg-white bg-gray0-d ba b--black b--gray1-d">
<a className="w-100 h-100 db pa2 no-underline" href="/~bartinfo">
<p className="black white-d absolute f9" style={{ left: 8, top: 8 }}>bartinfo</p>
<img className="absolute" src="/~bartinfo/img/Tile.png" style={{top: 39, left: 39}}/>
<img className="absolute" src="/~bartinfo/img/Temp-Bart-Icon.png" style={{top: 40, left: 20, width: "50%"}}/>
</a>
</div>
);

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.5 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.5 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.1 KiB