Merge pull request #42 from makeplane/preview

CONTRIBUTING.md

@@ -0,0 +1,52 @@
+# Contributing to Plane documentation
+
+Thank you for your interest in contributing to Plane documentation! We're thrilled to have you here, and we're eager to work together to make this project better. 
+
+## Report issues
+
+If you encounter any issues with our documentation or have suggestions for improvements, we encourage you to follow these steps:
+
+1. **Check existing issues**: Before raising a new issue, please verify if a similar issue already exists.
+2. **Create an issue**: If you don't find an existing issue that matches your concern, feel free to create a new one. Provide as much detail as possible to clearly explain the problem or enhancement you're proposing.
+
+## Set up your development environment
+To get started with the development environment, please refer to our [README.md](/README.md). It contains all the necessary instructions to set up your environment and dependencies.
+
+## How to submit changes
+We follow a simple and structured process for submitting changes.
+
+1. Checkout the `preview` branch:
+    ```bash
+    git checkout preview
+    ```
+
+2. Pull the latest changes:
+    ```bash
+    git pull origin preview
+    ```
+
+3. Create a new branch:
+    ```bash
+    git checkout -b <branch-name>
+    ```
+
+4. Make necessary changes in the code editor of your choice.
+
+5. Commit your changes. Leave a clear and concise message that links to the corresponding issue (if applicable) and explains the fix or enhancement you've made.
+    ```bash
+    git add .
+    git commit -m "Fixes #<issue-number>: Description of the fix or enhancement"
+    ```
+
+6. Push the changes.
+    ```bash
+    git push origin <branch-name>
+    ```
+
+7. Raise a pull request (PR) to merge your branch into the **preview** branch. Please provide a detailed description of your changes.
+
+8. Before we can merge your contribution, you must sign the Contributor License Agreement (CLA). This agreement ensures that your contributions comply with our licensing terms.
+
+After you submit your PR, a member of the Plane team will review it. Depending on our workload, response times may vary, but we'll do our best to get back to you as soon as possible. Thank you for your patience!
+
+If you need any help or have any questions, join us on [Discord](https://discord.com/invite/A92xrEGCge).

README.md

@@ -1,41 +1,40 @@
-# Website
+# Plane Documentation
 
-This website is built using [Docusaurus](https://docusaurus.io/), a modern static website generator.
+This website is built using [Docusaurus v3](https://docusaurus.io/) and hosted at [docs.plane.so](https://docs.plane.so/).
 
-### Installation
+## Installation
 
-```
-$ yarn
-```
+1. Clone the repository.
+    ```bash
+    git clone [email protected]:makeplane/docs.git
+    ```
 
-### Local Development
+2. Navigate to the project directory.
+    ```bash
+    cd docs
+    ```
 
-```
-$ yarn start
-```
+3. Install dependencies.
+    ```bash
+    yarn
+    ```
 
-This command starts a local development server and opens up a browser window. Most changes are reflected live without having to restart the server.
-
-### Build
+## Local development
 
+```bash
+yarn start
 ```
-$ yarn build
-```
-
-This command generates static content into the `build` directory and can be served using any static contents hosting service.
-
-### Deployment
+This command starts a local development server and opens up a browser window. Most changes are reflected live without having to restart the server.
 
-Using SSH:
+## Build
 
+```bash
+yarn build
 ```
-$ USE_SSH=true yarn deploy
-```
+This command generates static files into the `build` directory.
 
-Not using SSH:
+## Contributing
 
-```
-$ GIT_USER=<Your GitHub username> yarn deploy
-```
+Interested in helping us improve the documentation? We’d love your contributions! Whether you're fixing a typo, adding a new guide, or improving an existing page, every bit helps.
 
-If you are using GitHub pages for hosting, this command is a convenient way to build the website and push to the `gh-pages` branch.
+To get started, check out our [Contribution Guide](/CONTRIBUTING.md). We welcome contributions related to core product features or integrations with other tools.

docs/devices/mobile.mdx

@@ -0,0 +1,131 @@
+---
+title: Mobile
+---
+
+# Manage projects on your mobile
+
+The Plane mobile app is available on Android and iOS devices. 
+
+With the mobile app, you can easily manage your projects on the go. Whether you're creating, assigning, or tracking issues, stay connected with your team and keep work moving forward no matter where you are. Download the app to experience project management at your fingertips!
+
+## System requirements
+| OS       | Version                                        |
+| -------- | -----------------------------------------------|
+| Android  | Android 5+ (SDK 21+) or higher                 |
+| iOS      | iOS 13 or higher                               |   
+
+## Download
+Head over to [Download](https://plane.so/download) to install the app for Android or iOS.
+
+:::caution[Limitation]
+Sign-up isn't available through the mobile app. To use the app, you'll need to be a member of least one workspace.
+:::
+
+## Navigate the app
+The navigation bar at the bottom of your screen helps you quickly access key areas of the app. 
+
+- **Home** <br/>
+Your dashboard includes a search box and familiar sections like **Your Work** and **Favorites**. There’s also a **Jump back in** section to easily access your recent projects and issues.
+
+- **Projects** <br/>
+This screen shows all the projects you have access to, along with your role and the active issues count. Tap the star icon to add a project to your **Favorites** for quick access.
+
+    <div class="mobile-img-container">
+        <div class="mobile-img-box">
+            <img src="https://media.docs.plane.so/mobile/app-home.webp" alt="Home" width="300"/>
+        </div>
+        <div class="mobile-img-box">
+            <img src="https://media.docs.plane.so/mobile/app-projects.webp" alt="Projects" width="300"/>
+        </div>
+    </div>
+
+- **Create** <br/>
+Need to create a new issue? Tap the + Create button. A simple modal will pop up, allowing you to:
+    - Select the project by clicking the project icon at the top left.
+    - Add issue details like title and description. For the description, you can use the toolbar at the bottom to add different blocks and format the text as needed. 
+    - Tap the **+** icon at the bottom left to assign members, priority, state, and other properties.
+    - Hit the **Create** button to add it to your project.
+
+    <div class="mobile-img-container">
+        <div class="mobile-img-box">
+            <img src="https://media.docs.plane.so/mobile/app-create-issue.webp" alt="Create issue" width="300"/>
+        </div>
+        <div class="mobile-img-box">
+            <img src="https://media.docs.plane.so/mobile/app-issue-properties.webp" alt="Issue properties" width="300"/>
+        </div>
+    </div>
+
+- **Inbox** <br/>
+Stay updated with notifications about issues you’ve created, are assigned to, or where you’ve been mentioned. You’ll never miss an important update again.
+
+- **Profile** <br/>
+View your profile and manage your account here. You can also switch between workspaces or log out of the app from this screen.
+
+    <div class="mobile-img-container">
+        <div class="mobile-img-box">
+            <img src="https://media.docs.plane.so/mobile/app-inbox.webp" alt="Inbox" width="300"/>
+        </div>
+        <div class="mobile-img-box">
+            <img src="https://media.docs.plane.so/mobile/app-profile.webp" alt="Profile" width="300"/>
+        </div>
+    </div>
+
+### Global search
+At the top of the Home screen, you’ll find the global search bar, which helps you quickly find projects, issues, cycles, modules, or pages. It's a powerful tool to jump right to what you need.
+
+### Switch workspaces
+
+To switch between different workspaces, simply tap your workspace icon in the top-right corner or navigate to your profile settings at the bottom right of the screen.
+
+## Track projects
+
+Stay on top of your work by tracking all your project's elements with ease:
+
+1. Tap the **Projects** icon in the bottom navigation bar.
+2. Select the project you want to track. 
+
+You will notice that the bottom navigation bar now shows different buttons:
+
+- **Issues** <br/>
+View a list of all, active and backlog issues. 
+
+    - You can search, sort, and filter issues using the icon buttons on the top right. 
+
+    - Tap any issue to view or modify issue details and view the activity. You can also add comments, copy the link, and share the issue with a personalized message via other apps.
+
+    - Click the **+ Add** button on the bottom left to add sub-issues and relations. You can also swipe left or right to view sub-issues, relations, links, and attachments.
+
+    <div class="mobile-img-container">
+        <div class="mobile-img-box">
+            <img src="https://media.docs.plane.so/mobile/app-issues.webp" alt="Issues" width="300"/>
+        </div>
+        <div class="mobile-img-box">
+            <img src="https://media.docs.plane.so/mobile/app-issue-details.webp" alt="Issue details" width="300"/>
+        </div>
+    </div>
+    <br/>
+
+    :::tip
+    You can add or edit the priority, state, start date, target date, cycle, and module by tapping the pencil icon in the **Properties** section. Alternatively, use the icons on the top right for choosing Priority, Cycle, and Module.
+    :::
+
+- **Cycles** <br/>
+    Track active and upcoming cycles, and dive into the issues within each cycle.
+
+- **Modules** <br/>
+    See all modules in your project and their progress. Tap the module to view the issues that are a part of it.
+
+
+- **Pages** <br/>
+    View all project pages, whether public, private, or archived. You can mark important pages as favorites or search for specific content.
+
+    <div class="mobile-img-container">
+        <div class="mobile-img-box">
+            <img src="https://media.docs.plane.so/mobile/app-cycles.webp" alt="Cycles" width="300"/>
+        </div>
+        <div class="mobile-img-box">
+            <img src="https://media.docs.plane.so/mobile/app-modules.webp" alt="Modules" width="300"/>
+        </div>
+    </div>
+    <br/>
+

sidebars.ts

@@ -70,7 +70,6 @@ const sidebars: SidebarsConfig = {
         'core-concepts/power-k'
       ],
     },
-
     {
       type: 'category',
       collapsed: false,
@@ -105,6 +104,15 @@ const sidebars: SidebarsConfig = {
         'workspaces-and-users/upgrade-plan',
       ],
     },
+    {
+      type: 'category',
+      collapsed: false,
+      label: 'Importers',
+      items: [
+        'plane-importers/github-imp',
+        'plane-importers/jira-imp',
+      ],
+    },
     {
       type: 'category',
       collapsed: false,
@@ -118,10 +126,9 @@ const sidebars: SidebarsConfig = {
     {
       type: 'category',
       collapsed: false,
-      label: 'Importers',
+      label: 'Devices',
       items: [
-        'plane-importers/github-imp',
-        'plane-importers/jira-imp',
+        'devices/mobile',
       ],
     },
     {

src/css/custom.css

@@ -388,7 +388,46 @@ html[data-theme='dark'] {
 }
 }
 
- img[src*='#center'] {
+.table{
+  font-size: 1rem;
+  line-height: 1.25;
+  font-weight: 400;
+  --tw-numeric-spacing: tabular-nums;
+  width: 100%;
+  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
+}
+
+[data-theme='dark'] table tr:nth-child(2n) {
+  background-color: rgb(27 27 29);
+}
+
+table tr:nth-child(2n) {
+  background-color: rgb(255 255 255);
+}
+
+table thead tr {
+  border-bottom: none;
+}
+
+.mobile-img-container{
+  display:flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  flex-wrap: wrap;
+
+}
+.mobile-img-box{
+  display:flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  max-width:25rem;
+  min-width:15rem;
+  text-align: center;
+  margin: 10px;
+}
+img[src*='#center'] {
   display: block;
   border-radius: 0.5rem;
   float: none;