Welcome to the Qodly documentation site.
Two processes should run at the same time:
- The preprocess
- The docusaurus start
run npm run start_watch
in one terminal.
The files from the folder "docs" will be preprocessed in the folder named "docsPostProcessed". A change to a file will be automatically preprocessed.
The docusaurus.config_start.js
uses docusaurus.config.js
with a few modifications:
- path: "docsPostProcessed/docs"
- versions: only the current version is used
npm run start -- --config ./docusaurus.config_start.js
in a new terminal to start the preview with this new config.
- Import the 'ReleaseNotes' component at the very beginning of your Markdown (md) file:
import ReleaseNotes from '@site/src/components/ReleaseNotes';
- Add the root element
<ReleaseNotes.Items>
for a list of release note items:
<ReleaseNotes.Items>
</ReleaseNotes.Items>
- Inside the
<ReleaseNotes.Items>
element, Add as much as you need of<ReleaseNotes.Item>
elements to represents specific versions:
<ReleaseNotes.Items>
<ReleaseNotes.Item>
</ReleaseNotes.Item>
<ReleaseNotes.Item>
</ReleaseNotes.Item>
</ReleaseNotes.Items>
- Inside each
<ReleaseNotes.Item>
element, Add a<ReleaseNotes.Timeline>
element to create a timeline for the release notes:
<ReleaseNotes.Items>
<ReleaseNotes.Item>
<ReleaseNotes.Timeline>
</ReleaseNotes.Timeline>
</ReleaseNotes.Item>
<ReleaseNotes.Item>
<ReleaseNotes.Timeline>
</ReleaseNotes.Timeline>
</ReleaseNotes.Item>
</ReleaseNotes.Items>
- Inside each
<ReleaseNotes.Timeline>
element, Add a<ReleaseNotes.Meta>
element to hold the metadata related to a release, such as the version number within the<ReleaseNotes.Version>
element or the release date within the<ReleaseNotes.ReleaseDate>
element:
<ReleaseNotes.Items>
<ReleaseNotes.Item>
<ReleaseNotes.Timeline>
<ReleaseNotes.Meta>
<ReleaseNotes.Version>v1.0.1</ReleaseNotes.Version>
</ReleaseNotes.Meta>
</ReleaseNotes.Timeline>
</ReleaseNotes.Item>
<ReleaseNotes.Item>
<ReleaseNotes.Timeline>
<ReleaseNotes.Meta>
<ReleaseNotes.Version>v1.0.0</ReleaseNotes.Version>
<ReleaseNotes.ReleaseDate>September 2023</ReleaseNotes.ReleaseDate>
</ReleaseNotes.Meta>
</ReleaseNotes.Timeline>
</ReleaseNotes.Item>
</ReleaseNotes.Items>
- Inside each
<ReleaseNotes.Timeline>
element, Add a<ReleaseNotes.Connector>
to create a visual separation between release notes:
<ReleaseNotes.Items>
<ReleaseNotes.Item>
<ReleaseNotes.Timeline>
<ReleaseNotes.Meta>
<ReleaseNotes.Version>v1.0.1</ReleaseNotes.Version>
</ReleaseNotes.Meta>
<ReleaseNotes.Connector />
</ReleaseNotes.Timeline>
</ReleaseNotes.Item>
<ReleaseNotes.Item>
<ReleaseNotes.Timeline>
<ReleaseNotes.Meta>
<ReleaseNotes.Version>v1.0.0</ReleaseNotes.Version>
<ReleaseNotes.ReleaseDate>September 2023</ReleaseNotes.ReleaseDate>
</ReleaseNotes.Meta>
<ReleaseNotes.Connector />
</ReleaseNotes.Timeline>
</ReleaseNotes.Item>
</ReleaseNotes.Items>
- Inside each
<ReleaseNotes.Item>
element, Add a<ReleaseNotes.Content>
for the actual content of the release notes for a specific version. In this case, it should be structured as a series of tabs.
<ReleaseNotes.Items>
<ReleaseNotes.Item>
<ReleaseNotes.Timeline>
<ReleaseNotes.Meta>
<ReleaseNotes.Version>v1.0.1</ReleaseNotes.Version>
</ReleaseNotes.Meta>
<ReleaseNotes.Connector />
</ReleaseNotes.Timeline>
<ReleaseNotes.Content>
<Tabs groupId="version" className="qodly-tabs">
<TabItem value="Studio">
<h3> What's New </h3>
<ul>
<li>Feature 1.</li>
<li>Feature 2.</li>
</ul>
<h3> Improvements </h3>
<ul>
<li>Improvement 1.</li>
<li>Improvement 2.</li>
</ul>
<h3> Bug Fixes </h3>
<ul>
<li>Bug Fix 1.</li>
<li>Bug Fix 2.</li>
</ul>
</TabItem>
<TabItem value="Server">
Status Quo Maintained
</TabItem>
<TabItem value="Cloud">
Status Quo Maintained
</TabItem>
</Tabs>
</ReleaseNotes.Content>
</ReleaseNotes.Item>
<ReleaseNotes.Item>
<ReleaseNotes.Timeline>
<ReleaseNotes.Meta>
<ReleaseNotes.Version>v1.0.0</ReleaseNotes.Version>
<ReleaseNotes.ReleaseDate>September 2023</ReleaseNotes.ReleaseDate>
</ReleaseNotes.Meta>
<ReleaseNotes.Connector />
</ReleaseNotes.Timeline>
<ReleaseNotes.Content>
<Tabs groupId="version" className="qodly-tabs">
<TabItem value="Studio">
Status Quo Maintained
</TabItem>
<TabItem value="Server">
Status Quo Maintained
</TabItem>
<TabItem value="Cloud">
Status Quo Maintained
</TabItem>
</Tabs>
</ReleaseNotes.Content>
</ReleaseNotes.Item>
</ReleaseNotes.Items>
![Screenshot 2023-10-17 at 17 28 36](https://private-user-images.githubusercontent.com/39849568/275911342-a86823a0-866e-4bc1-9a53-707d6b54fb3a.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjQ5Njc1NTcsIm5iZiI6MTcyNDk2NzI1NywicGF0aCI6Ii8zOTg0OTU2OC8yNzU5MTEzNDItYTg2ODIzYTAtODY2ZS00YmMxLTlhNTMtNzA3ZDZiNTRmYjNhLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA4MjklMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwODI5VDIxMzQxN1omWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTA2Y2RlOTQxYTg3ZGQ1ODk2MWUxZWNiYzU4MDBjYzY1NzMzOGYwM2YwNWMzN2M5YWQ0ODAzYTc0NDhkZjg2MTMmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.wUEjVWE9MxNYFh_0UzDOQycZ1sBSC3kj9q5RPoQ9vHo)
If you have a blank page and wish to showcase a "Coming Soon" message with an animation, please follow these steps:
- Import the 'ComingSoon' component at the very beginning of your Markdown (md) file.
- Immediately after the import statement, insert
<ComingSoon/>
.
import ComingSoon from '@site/src/components/ComingSoon'
<ComingSoon/>
If you have a page with pre-existing content and would like to include the "Coming Soon" message within a specific section that has not yet been developed, here's what to do:
- Import the 'ComingSoon' component at the very beginning of your Markdown (md) file:
import ComingSoon from '@site/src/components/ComingSoon'
- In the section that has not yet been crafted, place right after its title:
## Section Finished
Some content
## Section Not Crafted Yet
<ComingSoon/>
To use the Column
component, you'll need to define both a List
component and an Item
component. Here's how it works:
- Import the
Column
component at the very beginning of your Markdown (md) file:
import ComingSoon from '@site/src/components/Column'
-
Define a
<Column.List>
: This list component holds together the individual items. -
Add
<Column.Item>
components within the<Column.List>
: These components represent individual items within the list. You can specify the width for each item, allowing you to customize your layout.
Here's an example:
<Column.List align="center" justifyContent="between">
<Column.Item width="60%">
Once completed, your crafted component will be available in the <code>Components > Crafted</code> section. You can then drag and drop it onto the canvas as needed.
</Column.Item>
<Column.Item width="30%">
<img alt="explorer" src={require('./img/craftedComponent_CraftedSection.png').default} style={{borderRadius: '6px'}} />
</Column.Item>
</Column.List>
In this example, the <Column.List>
component is configured with align="center"
and justifyContent="between"
, resulting in the following behavior:
- Vertical Alignment: Items are vertically aligned in the center of the container.
- Horizontal Distribution: Items are evenly distributed horizontally with space between them.
The align
property controls the vertical alignment of items within the container. Here are the available options:
-
align="start"
: Items are aligned to the start vertically within the container. -
align="center"
: Items are vertically centered within the container. -
align="end"
: Items are aligned to the end vertically within the container.
The justifyContent
property determines how items are distributed horizontally within the container. Here are the available options:
-
justifyContent="start"
: Items are aligned to the start of the container, and there is no extra space between them. -
justifyContent="center"
: Items are centered vertically within the container, and there is equal space before and after them. -
justifyContent="end"
: Items are aligned to the end of the container, and there is no extra space between them. -
justifyContent="between"
: Items are evenly distributed within the container with equal space between them and at the start and end. -
justifyContent="around"
: Items are evenly distributed within the container with equal space around them (half the space at the start and end compared to between items). -
justifyContent="evenly"
: Items are evenly distributed within the container with equal space between them, before the first item, and after the last item.
-
justifyContent="start" and align="start": Items are aligned to the start both horizontally and vertically within the container.
-
justifyContent="center" and align="center": Items are centered both horizontally and vertically within the container.
-
justifyContent="between" and align="end": Items are evenly distributed horizontally with space between them. Items are aligned to the end vertically within the container.
-
justifyContent="around" and align="center": Items are evenly distributed horizontally with space around them. Items are vertically centered within the container.