diff --git a/.gitbook/assets/logo.png b/.gitbook/assets/logo.png new file mode 100644 index 0000000..0edd5d9 Binary files /dev/null and b/.gitbook/assets/logo.png differ diff --git a/README.md b/README.md index 8842cbc..e1e8f19 100644 --- a/README.md +++ b/README.md @@ -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 + +```text +npx giddyup mygallery +``` + +After a few questions this will create a new rodeo project in the ./mygallery directory. + +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) + +## diff --git a/docs/assets/netlify-new-site.png b/docs/assets/netlify-new-site.png new file mode 100644 index 0000000..3efeebd Binary files /dev/null and b/docs/assets/netlify-new-site.png differ diff --git a/resources/changelog.md b/resources/changelog.md new file mode 100644 index 0000000..4dc68c6 --- /dev/null +++ b/resources/changelog.md @@ -0,0 +1,2 @@ +# Changelog + diff --git a/resources/faqs.md b/resources/faqs.md new file mode 100644 index 0000000..4c7520b --- /dev/null +++ b/resources/faqs.md @@ -0,0 +1,6 @@ +--- +description: To come +--- + +# FAQs + diff --git a/themes/contexts/README.md b/themes/contexts/README.md new file mode 100644 index 0000000..cc8752a --- /dev/null +++ b/themes/contexts/README.md @@ -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 + diff --git a/themes/contexts/error.md b/themes/contexts/error.md new file mode 100644 index 0000000..d92caf2 --- /dev/null +++ b/themes/contexts/error.md @@ -0,0 +1,2 @@ +# Error + diff --git a/themes/contexts/index.md b/themes/contexts/index.md new file mode 100644 index 0000000..2061bac --- /dev/null +++ b/themes/contexts/index.md @@ -0,0 +1,2 @@ +# Index + diff --git a/themes/contexts/tag.md b/themes/contexts/tag.md new file mode 100644 index 0000000..83df42b --- /dev/null +++ b/themes/contexts/tag.md @@ -0,0 +1,2 @@ +# Tag + diff --git a/themes/contexts/token.md b/themes/contexts/token.md new file mode 100644 index 0000000..36fb13f --- /dev/null +++ b/themes/contexts/token.md @@ -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 + diff --git a/themes/contexts/wallet.md b/themes/contexts/wallet.md new file mode 100644 index 0000000..95f9853 --- /dev/null +++ b/themes/contexts/wallet.md @@ -0,0 +1,2 @@ +# Wallet + diff --git a/themes/helpers.md b/themes/helpers.md new file mode 100644 index 0000000..c8190c0 --- /dev/null +++ b/themes/helpers.md @@ -0,0 +1,8 @@ +--- +description: >- + Helpers add additional functionally to Handlebars, the templating language + Rodeo themes use. +--- + +# Helpers + diff --git a/themes/overview.md b/themes/overview.md new file mode 100644 index 0000000..90b2c1d --- /dev/null +++ b/themes/overview.md @@ -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) + diff --git a/themes/structure.md b/themes/structure.md new file mode 100644 index 0000000..7150177 --- /dev/null +++ b/themes/structure.md @@ -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 ``, `` or `` 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\] +