Skip to content

Commit b6a149b

Browse files
Vignesh S, ManojVignesh S, Manoj
Vignesh S, Manoj
authored and
Vignesh S, Manoj
committed
Updated README.md
Moved content of README.md to CONTRIBUTING.md
1 parent 8492bd7 commit b6a149b

File tree

2 files changed

+143
-142
lines changed

2 files changed

+143
-142
lines changed

‎CONTRIBUTING.md‎

Lines changed: 141 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,141 @@
1+
# Getting started
2+
3+
## Setting up local development environment
4+
5+
### Prerequisites
6+
[NodeJs](https://nodejs.org/en/download/) - 10.x.x
7+
8+
1. Clone repository [https://github.com/SoftwareAG/webmethods-io-flowservice.git](https://github.com/SoftwareAG/webmethods-io-flowservice.git)
9+
2. Open the cloned _floweditordeveloperguide_ and open command line in that folder
10+
3. Install yarn globally if not installed using the command `npm i -g yarn`
11+
3. Run command `yarn`
12+
4. Run command `yarn start`
13+
5. Open browser and navigate to [http://localhost:8000](http://localhost:8000/)
14+
15+
## Writing content
16+
17+
### Creating files and folder
18+
19+
1. Find the topic for which content needs to be written
20+
2. Check if the content needs a grouping in the side navigation
21+
22+
#### Content with grouping
23+
1. Open the _content_ folder
24+
2. Add new folder inside content folder with the topic as the name
25+
3. Then create a file with the same name and `.mdx` as extension
26+
4. Follow the naming convention of words-separated-by-hyphen for file/folder names
27+
28+
Note: If you need grouping inside another category (say A>B), follow the above steps inside the respective folder (say A). Here `.mdx` files are required for both folders.
29+
30+
#### Content without grouping
31+
1. Open the _content_ folder
32+
2. Navigate to the folder/topic inside which the content has to be added
33+
3. Create a file with the topic-name and `.mdx` as extension
34+
4. Follow the naming convention of words-separated-by-hyphen for file names
35+
36+
#### Naming the topic using metadata
37+
1. After creating the file, some text content needed to be added to top of the file
38+
2. That text defines the title and description of the page
39+
3. Title provided will be used as the display name in the side navigation
40+
4. Title also acts as a main header in the page
41+
5. To add title and description add `---` twice with a empty line in between
42+
6. Add any of the below options in the format `option: value`
43+
7. All options must be in its own line
44+
45+
##### Options
46+
+ title - Text used in header and side navigation
47+
+ metaTitle - Text used in the title of the page(Browser tab) `webMethods.io | FlowServices`
48+
+ metaDescription - Description used in meta tag for SEO
49+
+ author - Author of the topic
50+
+ date - Date of writing the document
51+
52+
Note: Only title is mandatory
53+
54+
#### Adding topic to the concepts panel
55+
1. Navigate to the getting started page to see the concepts panel
56+
2. New topics has to be added to that panel
57+
3. To add a new topic, open the file _src/components/mdxComponents/data.json_
58+
4. Find the title under which the topic needs to be added
59+
5. Add a JSON Object `, {}` to the end of the array
60+
6. Inside object add `"title": "title of the topic",` as key value pair
61+
7. Add another key value pair `"link":"path/to/the/topic/file/created/without/mdx/extension"`
62+
63+
### Adding content to file
64+
65+
1. Content can be written using markdown format
66+
2. Few HTML Elements are present to
67+
68+
#### Using Markdown
69+
Markdown is a lightweight and easy-to-use syntax for styling all forms of writing. Markdown is a way to style text on the web. You control the display of the document; formatting words as bold or italic, adding images, and creating lists are just a few of the things we can do with Markdown. Mostly, Markdown is just regular text with a few non-alphabetic characters thrown in, like # or *.
70+
71+
Check this [link](https://www.gatsbyjs.org/docs/mdx/markdown-syntax/) for more info on markdown.
72+
73+
#### Using Components
74+
There are certain html/react components which can be used to add functionalities which are not possible with markdown.
75+
76+
#### FlowService Component
77+
Flow service component can be used to create a card which will display flow steps as images and text based comments next to them.
78+
79+
```html
80+
<FlowService
81+
title="Slack - Post message to channel"
82+
description="The above flow steps are used to find the channel for which the name is testCh and post a message to it"
83+
textToCopy={flowJSON}
84+
>
85+
</FlowService>
86+
```
87+
#### Inputs
88+
+ title - string - Title of the flow card
89+
+ description - string - Description of the flow card
90+
+ textToCopy - json - JSON which will be copied to clipboard
91+
92+
Note: For json inputs `{}` should be used instead of `""`
93+
94+
#### FlowStep Component
95+
Flow Step component should be used only inside the `FlowService` component. It can be used to display a single step of flow service inside the flow card.
96+
97+
```jsx
98+
<FlowStep
99+
img="getting-started/simple-flowservice/add-services/image-slice_01.png"
100+
comment="Get Channels list from slack"
101+
/>
102+
```
103+
#### Inputs
104+
+ img - string - Path to the image.
105+
+ comment - string - Comment for the step
106+
107+
Note: Path should not contain space in it. Use hyphen for space in file/folder names.
108+
109+
### Using assets
110+
111+
- There are two types of assets which can be used inside the markdown file which are image and json
112+
113+
#### Adding images
114+
1. Images can be used with components
115+
2. To add images navigate to _content/assets_ folder
116+
3. Create folder structure similar to where the `.mdx` file is present
117+
4. Create one more folder with the name of the `.mdx` file
118+
5. Keep all the images in this folder
119+
120+
#### Using images
121+
1. Currently, images can be used with `FlowStep` component
122+
2. `FlowStep` component takes image path as string to **img** property
123+
3. Path will start from inside the _assets_ folder
124+
4. So for an image _content/assets/feature/topic/topic-1.png_ , the path will be **feature/topic/topic-1.png**
125+
126+
Note: Image folder/file name cannot contain space. Limit the use of special characters to **-** for separating words and **.** for extension
127+
128+
#### Adding Json file
129+
Adding json file is similar to adding images. Please check the _Adding images_ section.
130+
Json file can be placed adjacent to images of the topic
131+
132+
#### Using json
133+
1. Currently, json can be used with `FlowService` component for copying the flow json
134+
2. `FlowService` component takes json as input for **textToCopy** property
135+
3. To use json, it needs to be imported to the `.mdx` file
136+
4. Import statement should be placed immediately next to the metadata of the page
137+
5. Import statement should be in the format `import flowJson from '../relative/path/to/json/file''`
138+
6. So for a json file _content/assets/feature/topic/topic.json_, the import will `import flowJson from '../assets/feature/topic/topic.json'`
139+
7. To use the imported json with `FlowService` component it has to be added to textToCopy property `textToCopy={flowJson}`
140+
141+
Note: When passing json to property `{}` must be used instead of `""`

‎README.md‎

Lines changed: 2 additions & 142 deletions
Original file line numberDiff line numberDiff line change
@@ -1,143 +1,3 @@
1-
# Getting started
1+
#### Repository for webMethods.io microsite for FlowServices
22

3-
## Setting up local developement environment
4-
5-
### Prerequisites
6-
[NodeJs](https://nodejs.org/en/download/) - 10.x.x
7-
8-
1. Clone repository [https://irepo.eur.ad.sag/projects/FLOW/repos/floweditordeveloperguide](https://irepo.eur.ad.sag/projects/FLOW/repos/floweditordeveloperguide)
9-
2. Open the cloned _floweditordeveloperguide_ and open command line in that folder
10-
3. Install yarn globally if not installed using the command `npm i -g yarn`
11-
3. Run command `yarn`
12-
4. Run command `yarn start`
13-
5. Open browser and navigate to [http://localhost:8000](http://localhost:8000/)
14-
15-
## Writing content
16-
17-
### Creating files and folder
18-
19-
1. Find the topic for which content needs to be written
20-
2. Check if the content needs a grouping in the side navigation
21-
22-
#### Content with grouping
23-
1. Open the _content_ folder
24-
2. Add new folder inside content folder with the topic as the name
25-
3. Then create a file with the same name and `.mdx` as extension
26-
4. Follow the naming convention of words-separated-by-hyphen for file/folder names
27-
28-
Note: If you need grouping inside another category (say A>B), follow the above steps inside the respective folder (say A). Here `.mdx` files are required for both folders.
29-
30-
#### Content without grouping
31-
1. Open the _content_ folder
32-
2. Navigate to the folder/topic inside which the content has to be added
33-
3. Create a file with the topic-name and `.mdx` as extension
34-
4. Follow the naming convention of words-separated-by-hyphen for file names
35-
36-
#### Naming the topic using metadata
37-
1. After creating the file, some text content needed to be added to top of the file
38-
2. That text defines the title and description of the page
39-
3. Title provided will be used as the display name in the side navigation
40-
4. Title also acts as a main header in the page
41-
5. To add title and description add `---` twice with a empty line in between
42-
6. Add any of the below options in the format `option: value`
43-
7. All options must be in its own line
44-
45-
##### Options
46-
+ title - Text used in header and side navigation
47-
+ metaTitle - Text used in the title of the page(Browser tab) `webMethods.io | FlowServices`
48-
+ metaDescription - Description used in meta tag for SEO
49-
+ author - Author of the topic
50-
+ date - Date of writing the document
51-
52-
Note: Only title is mandatory
53-
54-
#### Adding topic to the concepts panel
55-
1. Navigate to the getting started page to see the concepts panel
56-
2. New topics has to be added to that panel
57-
3. To add a new topic, open the file _src/components/mdxComponents/data.json_
58-
4. Find the title under which the topic needs to be added
59-
5. Add a JSON Object `, {}` to the end of the array
60-
6. Inside object add `"title": "title of the topic",` as key value pair
61-
7. Add another key value pair `"link":"path/to/the/topic/file/created/without/mdx/extension"`
62-
63-
### Adding content to file
64-
65-
1. Content can be written using markdown format
66-
2. Few HTML Elements are present to
67-
68-
#### Using Markdown
69-
Markdown is a lightweight and easy-to-use syntax for styling all forms of writing. Markdown is a way to style text on the web. You control the display of the document; formatting words as bold or italic, adding images, and creating lists are just a few of the things we can do with Markdown. Mostly, Markdown is just regular text with a few non-alphabetic characters thrown in, like # or *.
70-
71-
Check this [link](https://www.gatsbyjs.org/docs/mdx/markdown-syntax/) for more info on markdown.
72-
73-
#### Using Components
74-
There are certain html/react components which can be used to add functionalities which are not possible with markdown.
75-
76-
#### FlowService Component
77-
Flow service component can be used to create a card which will display flow steps as images and text based comments next to them.
78-
79-
```html
80-
<FlowService
81-
title="Slack - Post message to channel"
82-
description="The above flow steps are used to find the channel for which the name is testCh and post a message to it"
83-
textToCopy={flowJSON}
84-
>
85-
</FlowService>
86-
```
87-
#### Inputs
88-
+ title - string - Title of the flow card
89-
+ description - string - Description of the flow card
90-
+ textToCopy - json - JSON which will be copied to clipboard
91-
92-
Note: For json inputs `{}` should be used instead of `""`
93-
94-
#### FlowStep Component
95-
Flow Step component should be used only inside the `FlowService` component. It can be used to display a single step of flow service inside the flow card.
96-
97-
```jsx
98-
<FlowStep
99-
img="getting-started/simple-flowservice/add-services/image-slice_01.png"
100-
comment="Get Channels list from slack"
101-
/>
102-
```
103-
#### Inputs
104-
+ img - string - Path to the image.
105-
+ comment - string - Comment for the step
106-
107-
Note: Path should not contain space in it. Use hyphen for space in file/folder names.
108-
109-
### Using assets
110-
111-
- There are two types of assets which can be used inside the markdown file which are image and json
112-
113-
#### Adding images
114-
1. Images can be used with components
115-
2. To add images navigate to _content/assets_ folder
116-
3. Create folder structure similar to where the `.mdx` file is present
117-
4. Create one more folder with the name of the `.mdx` file
118-
5. Keep all the images in this folder
119-
120-
#### Using images
121-
1. Currently, images can be used with `FlowStep` component
122-
2. `FlowStep` component takes image path as string to **img** property
123-
3. Path will start from inside the _assets_ folder
124-
4. So for an image _content/assets/feature/topic/topic-1.png_ , the path will be **feature/topic/topic-1.png**
125-
126-
Note: Image folder/file name cannot contain space. Limit the use of special characters to **-** for separating words and **.** for extension
127-
128-
#### Adding Json file
129-
Adding json file is similar to adding images. Please check the _Adding images_ section.
130-
Json file can be placed adjacent to images of the topic
131-
132-
#### Using json
133-
1. Currently, json can be used with `FlowService` component for copying the flow json
134-
2. `FlowService` component takes json as input for **textToCopy** property
135-
3. To use json, it needs to be imported to the `.mdx` file
136-
4. Import statement should be placed immediately next to the metadata of the page
137-
5. Import statement should be in the format `import flowJson from '../relative/path/to/json/file''`
138-
6. So for a json file _content/assets/feature/topic/topic.json_, the import will `import flowJson from '../assets/feature/topic/topic.json'`
139-
7. To use the imported json with `FlowService` component it has to be added to textToCopy property `textToCopy={flowJson}`
140-
141-
Note: When passing json to property `{}` must be used instead of `""`
142-
143-
Please contact [**Manoj.VigneshS@softwareag.com**](https://teams.microsoft.com/l/chat/0/0?users=Manoj.VigneshS@softwareag.com), [**SanthoshHari.Sridhar@softwareag.com**](https://teams.microsoft.com/l/chat/0/0?users=SanthoshHari.Sridhar@softwareag.com), [**Aleemullah.Samiullah@softwareag.com**](https://teams.microsoft.com/l/chat/0/0?users=Aleemullah.Samiullah@softwareag.com) for any queries.
3+
[https://softwareag.github.io/webmethods-io-flowservice/](https://softwareag.github.io/webmethods-io-flowservice/)

0 commit comments

Comments
 (0)