contribute.md

layout
~/layouts/MainPageLayout

Secret Website Documentation

This website has a variety of components such as cards, buttons, announcements, etc. Here you can find examples, descriptions and information on how to use them.

Go to Github Repository

Cards

---

Home Cards

Home Cards are the main Call to Action on the Homepage. They are used as links to other pages on the website.

Example

<
home-card
 
to
="/about/about-secret-network" 
vertical
>
### **Learn about**<
br
>Secret Network
<
separator small
 />
   ![Community](./img/home-card/learn-about-secret-network.png)
home-card>

<
home-card
 
to
="/about/about-secret-network" 
horizontal
>
### **Explore the**<
br
>Ecosystem
<
separator small
 />
   ![Node Operator](./img/home-card/explore-the-ecosystem.png)
home-card>

---

Media Cards

Media Cards are used to share media content such as videos, podcast episodes and blog articles, whether it's Secret Network original content or from an external source but relates to Secret Network.

Example

<
media-card
 
tag
="podcast" 
title
="Tor Bair on Nugget's News Podcast" 
src
="media-card/image2.png" 
to
="https://www.youtube.com/watch?v=2kttQDQOT3Y" 
cta
="Listen Now">media-card>

---

Cards

Cards are very versatile components, composed by a header, body and footer, and can be used to describe concepts, steps or just link to other pages.

Example

<
card
>
<
template
 
v-slot
:header>
    ![Run](../img/card/run.svg)
template
>
#### Node Runner Guide
<
template
 
v-slot
:footer>
<
next-button
 
tag
="Read guide"
to
="https://build.scrt.network/validators-and-full-nodes/join-validator-mainnet.html">
next-button
>
template
>
card
>

---

Community Cards

Community cards are used to link Secret Network social media and platforms where the community gets together. (e. g. Telegram, Discord, etc.)

Example

<
community-grid
 
name
="Discord Chat"
to
="https://discord.com/invite/SJK32GY" 
class
="discord">
<
template
 
v-slot
:icon>
<
themed-image
>
<
g-image
 
light light-colored
src
="./img/community-card/discord-black.svg">g-image
>
<
g-image
 
light light-colored
src
="./img/community-card/discord-white.svg">g-image
>
themed-image
>
template
>
community-grid
>

---

Grid Item

As its name suggests, this component is part of a grid of elements such as validators, contributors, members, etc. They are used as links and when hovering over them, the name and tags are displayed.

Example

<
grid-item
 
name
="Secret Nodes" 
tag
="validator" 
tagTwo
="developer"
to
="https://secretnodes.org"
src
="grid-item/contributors/image2.png">
grid-item
>

Buttons

---

"Next" Button

Composed by a "next" arrow and a tag, used mostly to link to other pages inside or outside the website.

Example

<
next-button
 
tag
="See more" 
to
="/podcast">
next-button
>

---

"Back" Button

Composed by a "back" arrow and a tag, used mostly to link to the previous page.

Example

<
back-button
 
tag
="Back to Ecosystem" 
to
="/ecosystem/overview">
back-button
>

Announcements

---

Large Announcement

This announcement occupies 100% of the page width and it's part of the website's layout so it's visible on every page. It's composed by the announcement text and link on the left and an image on the right.

Example

<
announcement
>
<
template
 
v-slot
:content-left>
#### Announcement
### Upgrade Complete:<
br
>Secret Contracts are<
br
>LIVE on Mainnet!
The secret is out! Privacy-preserving smart contracts are now LIVE on Secret Network. Learn about this launch, our exciting initial apps, our new strategic partnership with Hashed, and what comes next as "programmable privacy" comes to public blockchains.
template
>
<
template
 
v-slot
:content-right>
![](./img/announcement/announcement.png)
template
>
announcement
>

---

Small Announcement

This announcement occupies 2/3 of the page width and it's part of the website's layout so it's visible on every page. It's composed by the announcement text and link.

Example

<
small-announcement
>
<
template
 
v-slot
:content>
#### Announcement
### Secret Network Gets a Secret API!
Chain of Secrets just launched the Secret API for Secret Network as part of our developer community on-boarding efforts. We hope to connect and collaborate with all kinds of secret app builders!
<
next-button
 
class
="turquoise" 
tag
="Read more"
 
to
="/blog/secret-api/">
next-button
>
template
>
small-announcement
>

<style lang="scss"> .description { .white-button { display: block; width: rem(289px); margin: 0 auto; text-align: center; border-radius: 10px; padding: 10px 0; color: var(--theme-bg); background-color: var(--theme-fg); font-weight: bold; text-decoration: none; @include respond-to("xsmall and down") { width: 100%; } @include theme(dark dark-colored) { &:hover { color: $primary-red-color; } } @include theme(light light-colored) { &:hover { color: $primary-blue-color; } } } } .slim-column { .themed-image { img { width: auto; margin: 0 auto $gutter-xlarge auto; @include respond-to("large and up") { &.width { &__250px { width: rem(250px); } &__455px { width: rem(455px); } &__490px { width: rem(490px); } &__530px { width: rem(530px); } &__570px { width: rem(570px); } &__620px { width: rem(620px); } } } @include respond-to("medium and down") { &.width { &__250px { max-width: rem(250px); } } } } } pre { background-color: $primary-black-color; border: 1px solid black; white-space: normal; word-break: break-word; overflow-x: hidden; width: 100%; max-width: 100%; padding: $gutter; border-radius: 10px; line-height: 1; @include theme(dark dark-colored) { background-color: #F2F2F2; } @include theme(light light-colored) { background-color: $primary-black-color; } code { font-family: monospace, monospace; white-space: normal; word-break: break-word; overflow-x: hidden; line-height: 2em; font-size: $gutter; @include theme(dark dark-colored) { color: $primary-black-color; } @include theme(light light-colored) { color: white; } .hot-pink, .purple, .br { display: inline-block; } .hot-pink { color: $high-key-pink-color; } .purple { color: $high-key-purple-color; } } } } </style>