Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added .gitbook/assets/logo.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
30 changes: 28 additions & 2 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,33 @@
# README

## Token Rodeo
## Rodeo

Token Rodeo is a static site generator \(SSG\) that builds a gallery of your collected and created NFTs to showcase on your website.
Rodeo is a static site generator \(SSG\) that builds a gallery of your collected and created NFTs to showcase on your website.

![GitHub Logo](docs/console.gif)

## Quickstart

If you want to run your own instance of rodeo, generally the best way is to use our CLI tool
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should "Rodeo" be capitalized?

Copy link
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

When we refer to this product, is it Token Rodeo, or Rodeo?

From the command line I think it's going to be rodeo start. These don't have to be the same however.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@ian I think the product is "Token Rodeo" for now. Ultimately that'll help better identify it for now. Should this grow beyond just this project, it could be switched. The commands themselves can remain rodeo though!

Copy link
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

OK


```text
npx giddyup mygallery
```

After a few questions this will create a new rodeo project in the ./mygallery directory.
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe some more stuff about authenticating a wallet?

Copy link
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ya need to figure out what that looks like first.


Next, change directories to your gallery

```text
cd mygallery
```

And start the dev server:

```text
rodeo dev
```

Your local server will be running on [http://localhost:1999](http://localhost:1999)

##
Binary file added docs/assets/netlify-new-site.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 2 additions & 0 deletions resources/changelog.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
# Changelog

6 changes: 6 additions & 0 deletions resources/faqs.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
---
description: To come
---

# FAQs

16 changes: 16 additions & 0 deletions themes/contexts/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
---
description: >-
Each page in a Rodeo theme belongs to a context, which determines which
template is used, what data will be available and what content is output by
the {{body_class}} helper.
---

# Contexts

## List of contexts

* index
* token
* tag
* error

2 changes: 2 additions & 0 deletions themes/contexts/error.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
# Error

2 changes: 2 additions & 0 deletions themes/contexts/index.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
# Index

2 changes: 2 additions & 0 deletions themes/contexts/tag.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
# Tag

50 changes: 50 additions & 0 deletions themes/contexts/token.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
---
description: >-
Whenever you’re viewing a single token, you’re in the token context. This can
be on individual token pages, as well as within a list view.
---

# Token

Use: `{{#is "token"}}{{/is}}` to detect this context

## Templates

The default template for a token is `token.hbs`, which is a required template in all Token Rodeo themes.

## Token object attributes

* `id` — the Object ID of the token
* `hidden` — a boolean that marks a token as hidden, disabling it from showing up anywhere
* `private` — a boolean that marks a token as private, which disables it from appearing in indexes, search, and prevents crawling, but does leave a page up so that it can be shared
* `name` — the name of the token
* `type` — the token type
* `description` — the description of the token
* `collection` — the title of the token collection
* `created_by` — the address of the originator of the token
* `owned_by` — the address of the current owner of the token
* `created_by_owner` — a boolean that indicates whether or not the created\_by and owned\_by addresses match
* `tx_hash` — the hash of the transaction
* `contract` — the smart contract associated with the token
* `contract_address` — the address to the smart contract
* `contract_name` — the name of the smart contract
* `contract_symbol` — the symbol of the smart contract \(e.g. `CK` for CryptoKitties\)
* `contract_image` — the image associated with the smart contract
* `contract_description` — the description of the smart contract
* `contract_external_url` – the link the original website for this contract
* `token_id` – the token ID \(not to be confused with the `id`\)
* `background_color` – the background color to be displayed beneath the media
* `media` — the media of a given token. Can be an image, video, or audio file.
* `image_url` — the URL for the image. Renders a static frame if token is a movie.
* `video_url` — the URL for the video.
* `audio_url` — the URL for the audio.
* `url` — the web URL for the token page
* `properties` — an array of token properties, otherwise known as traits
* `featured` — indicates if the token is featured. Defaults to `false`.
* `timestamp` — date and time when the token was acquired
* `created_at` — date and time when the token was first created
* `published_at` — date and time when the token was published on the site
* `tags` — an array of tags associated with the token
* `meta_title` — custom meta title for the token
* `meta_description` — custom meta description for the token

2 changes: 2 additions & 0 deletions themes/contexts/wallet.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
# Wallet

8 changes: 8 additions & 0 deletions themes/helpers.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
---
description: >-
Helpers add additional functionally to Handlebars, the templating language
Rodeo themes use.
---

# Helpers

19 changes: 19 additions & 0 deletions themes/overview.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
---
description: >-
Rodeo is built with customization and theme ability in mind. While a default
theme is provided, we hope that developers and designers take it even further!
---

# Overview

## Theme development

The themes in Rodeo are built with the Handlebars templating language which enables a lot of customization without a lot of overhead. When running a build, everything is compiled into a static site that's blazing fast.

## Handlebars

Our templating language of choice lets you build semantic templates quickly and easily. You can learn more about it here:

* [Handlebars docs](https://handlebarsjs.com/guide/expressions.html)
* [Getting Started with Handlebars – Treehouse](https://blog.teamtreehouse.com/getting-started-with-handlebars-js)

105 changes: 105 additions & 0 deletions themes/structure.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,105 @@
# Structure

## File structure

The recommended file structure for a Rodeo theme is:

```text
# Structure

.
├── /assets
| └── /css
| ├── main.css
| ├── /fonts
| ├── /images
| ├── /js
├── default.hbs
├── index.hbs [required]
└── token.hbs [required]
└── package.json [required]
```

While optional, we recommend building with a /partials directory to include blocks of code that can be used across all templates, simplifying things.

```text
# Structure

.
├── /assets
| └── /css
| ├── main.css
| ├── /fonts
| ├── /images
| ├── /js
├── /partials
| └── token-meta.hbs
├── default.hbs
├── index.hbs [required]
└── token.hbs [required]
└── package.json [required]
```

## Templates

Two template files are **required**: `index.hbs` and `token.hbs`. Everything else is optional.

We set you up with `default.hbs` as a base layout for your theme and we recommend getting started there.

Theme templates are hierarchical, so one template can extend another template. This prevents base HTML from being repeated. Here are some commonly used templates and their uses:

### default.hbs

`default.hbs` is the starter kit that gets you set up with `<html>`, `<head>` or `<body>` on every page, in addition to the required `{{rodeo_head}}` and `{{ghost_foot}}`.

### index.hbs

This is the basic setup for a list of assets. It can be configured to look like a gallery, a list, or any display setup that you'd like. `index.hbs` template pairs with `default.hbs` and lists of tokens get set up with the `{{#foreach}}` helper.

### home.hbs

This can be used if you want to have a homepage that doesn't just land directly on the default `index.hbs` list. It's only valid at the base directory, available at `/`.

### token.hbs

This template is used to display a single token, which is used alongisde `default.hbs`. It uses the `{{#token}}` helper to add all of the various metadata and details about the token.

### tag.hbs

Tag template pages work similar to `index.hbs` but sets up a unique style for a given tag. Otherwise tag pages default ot the list style of choice.

### wallet.hbs

Similar to the `tag.hbs` template, this allows a given wallet address to have its own index style. This is more useful in sites that have multiple wallets configured.

### error.hbs

This is the default template used in the event that the user encounters an error, so long as a template with a specific error code is not set up.

### **error-{{error-code}}.hbs**

This is an optional theme for error-code specific pages. So if you want to set up a funny `404` look no further!

### **robots.txt**

By default, Rodeo sets you up with a `robots.txt` file, but if you'd like to customize it this is where you'd do it.

## Styling

In our default theme, Folsom, we use [TailwindCSS](https://tailwindcss.com) which is a declarative CSS framework, speeding up design and reducing the complexities of layout.

Some classes are generated automatically and can be leveraged in those contexts to apply a different styling. Automatic classes include:

* `featured` — a featured token
* `media-image` — an image token
* `media-video` — a video token
* `media-audio` — an audio token
* `created` — a token that was created by an authenticated wallet
* `collected` — a token that is owned by, but wasn't created by the authenticated wallet

## Package.json

A `package.json` file is required for each theme, and defines relevant information to power the theme itself.

\[SAMPLE TO COME\]