boardroom-inc-protocol-Info/README.md
2021-01-14 19:34:16 +05:30

78 lines
3.8 KiB
Markdown
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

Repo structure.
1. `index.ts`: Contains basic info, branding colors of protocols
2. Folders for each protocol contains.
1. `overview.md`: Contains an overview of the protocol which will be displayed in boardroom protocol overview page below stats of the protocol.
Ex: <img src="https://media.discordapp.net/attachments/799260574759649331/799260647002865694/Overview.png" alt="Drawing" style="width: 300px;"/>
2. `logo.png`: Used for showing protocol logo in various places of the app including protocol switcher.
Ex: ![logo](https://media.discordapp.net/attachments/799260574759649331/799260665893486682/Untitled.png?width=435&height=1136)
3. `header.png`: Used for displaying logo at the top of sidebar when in the respective protocol pages
Ex: ![Header Logo](https://media.discordapp.net/attachments/799260574759649331/799274014442389534/Untitled_2.png)
4. `calls` folder: Used for displaying call notes in the calls page of the app.
Ex: The following folder structure in the calls folder is displayed as
<table><tr>
<td> <img src="https://media.discordapp.net/attachments/799260574759649331/799275039400263700/Untitled.png" alt="Drawing" style="width: 250px;"/> </td>
<td> <img src="https://media.discordapp.net/attachments/799260574759649331/799274293636366336/Untitled.png?width=1708&height=1136" alt="Drawing" style="width: 250px;"/> </td>
</tr></table>
# How to edit Information or Branding of protocol
1. Edit protocol information
Basic information of the protocol is saved in protocols object of index.ts file
```
protocol_key: {
name: "Protocol Name",
path: "Path used in boardroom url",
description: "Description of protocol",
suffix: "Token",
folder: "Folder name to host resources",
},
```
Edit the corresponding value in the object and raise a new PR for changes.
2. Edit or add branding changes
1. Add the unique protocol key in the object `protocolBranding` of index.ts if it does not exist.
```
unique_protocol_key: {
"--background-primary-nav": "#001529", // Background color for sidebar, header and header information in protocol pages
"--color-text-nav": "#e7e8eb", // Color of text in sidebar, header and header information in protocol pages
"--background-switcher-active": "#000000", // Background color of the active nav element in sidebar
},
```
2. Add or edit the respective color variables and colors to the above object
3. Raise a PR with the changes
We have a codesandbox instance https://codesandbox.io/s/boardroombranding-q3u9z to visualize branding changes. Change the corresponding color variable in index.js file to have a sense of how the protocol pages will look after the updates
# How to add new meeting notes
Raise a new PR by following the steps below.
1. Create a new file in the calls folder of the protocol. Filename will be used for displaying in the list of calls page.
2. Add a summary of the call in the file. Contents of the file will be displayed in the respective note page.
3. Raise a PR with the changes
# How to add a new protocol
Raise a new PR by following the steps below.
1. Add a new object to index.ts in the format of
```
protocol_key: {
name: "Protocol Name",
path: "Path used in boardroom url",
description: "Description of protocol",
suffix: "Token",
folder: "Folder name to host resources",
},
```
2. Create a folder with the same name as mentioned above in the root folder of the repo
3. Add logo with the file name `logo.png` in the folder with an aspect ratio of 1:1. This is used for displaying in Protocol switcher and various other places in the app.
4. Add an image `header.png` which is displayed at the top sidebar. Ideal dimensions are 400×150 (W×H)
5. Add a folder with the name `calls` which will be used for containing meeting notes files.