Creating and Editing Pages

Overview

A Page is a content type for creating long-form content such as articles, notes, and documents. You write content directly in a Markdown textarea, and can create structured text with headings, lists, images, links, and more.

Creating a Page

Step 1: Open the Content Creation Screen

Tap the create button (+) at the bottom-right of the screen
The content type selection screen appears
Select "Page"

Step 2: Enter Basic Information

Fill in the following fields:

Required Fields

Title: The title of your Page (e.g., "Getting Started with React Custom Hooks")
Visibility: Choose from PRIVATE / TEAM / PUBLIC

Optional Fields

Description: A summary of the page (displayed in search results and content cards)
Category: Select a category to classify the page
Parent folder: Choose a folder to place the page in

Example:

Title: Getting Started with React Custom Hooks
Description: Basic implementation patterns and practical examples for custom hooks
Category: Programming
Visibility: PUBLIC

Step 3: Write the Content

Type your content directly in the Markdown textarea. On desktop, a live preview is shown on the right side at all times. On mobile, switch to the "Preview" tab to check the rendered output.

Markdown Syntax Basics

Text formatting:

Bold: Emphasize important text
Italic: Mark supplementary information or quotes
~~Strikethrough~~: Indicate deleted content
Code: Write inline code or commands

Headings:

# Heading 1 (largest)
## Heading 2
### Heading 3

Lists:

Bulleted list:
- Item 1
- Item 2
  - Sub-item 2-1
  - Sub-item 2-2

Numbered list:
1. Item 1
2. Item 2
3. Item 3

Links:

[Link text](https://example.com)

Inserting images:

![Alt text](https://example.com/image.png)

Code blocks:

```javascript
function greet(name) {
  return `Hello, ${name}!`;
}
```

Tables:

| Column | Description |
|--------|-------------|
| A      | Content A   |
| B      | Content B   |

Block quotes:

> This is a block quote.
> Use it when quoting from other sources or comments.

Horizontal rule:

---

Step 4: Preview

The editor layout depends on your screen size.

Desktop (PC): Always shows a split view — Markdown textarea on the left, live preview on the right. There are no tabs to switch between.
Mobile (smartphone): Shows two tabs: "Input" and "Preview." Tap a tab to switch between them.

Step 5: Save

Once everything is ready, click the "Create" button to save your page.

Editing a Page

Opening the Editor

Open the page you want to edit
Click the "Edit" button in the upper right
The edit screen appears

Saving Your Changes

When you are done editing, click the "Save" button
Changes are applied immediately

Canceling Edits

Click the "Cancel" button to discard your changes and return to the detail view

Practical Examples

Example 1: Technical Article

# Getting Started with React Custom Hooks

## What are Custom Hooks?

Custom hooks let you extract reusable logic from React components.

## Basic Implementation Pattern

Here is an example of a custom hook that manages form input:

```javascript
function useFormInput(initialValue) {
  const [value, setValue] = useState(initialValue);

  const handleChange = (e) => {
    setValue(e.target.value);
  };

  return { value, onChange: handleChange };
}
```

## Usage Example

```javascript
function LoginForm() {
  const email = useFormInput('');
  const password = useFormInput('');

  return (
    <form>
      <input type="email" {...email} />
      <input type="password" {...password} />
    </form>
  );
}
```

## Summary

- Custom hooks are useful for reusing stateful logic
- By convention, name them with the `use` prefix
- They must follow the Rules of Hooks

Example 2: Study Notes

# Linear Algebra - Lecture 3

**Date**: 2025-11-14
**Topic**: Matrix Operations and Properties

## Today's Topics

### 1. Matrix Multiplication

Matrix multiplication is computed by multiplying the rows of the left matrix with the columns of the right matrix.

Key points:
- Order matters (AB ≠ BA)
- (m×n matrix) × (n×p matrix) = (m×p matrix)

### 2. Identity Matrix

The identity matrix I satisfies the following for any matrix A:
- AI = IA = A

### 3. Inverse Matrix

For a non-singular matrix A, the inverse matrix A⁻¹ satisfies:
- AA⁻¹ = A⁻¹A = I

## What I Didn't Understand

- How to compute inverses (Gaussian elimination)
- Review this next time

## References

- Textbook pp.45-52
- [Intro to Linear Algebra (online resource)](https://example.com)

## Prep for Next Lecture

- How to compute determinants
- Read textbook pp.53-60

Example 3: Meeting Minutes

# Project A Weekly Meeting

**Date**: 2025-11-14 10:00-11:00
**Location**: Meeting Room B
**Attendees**: Tanaka, Sato, Suzuki, Takahashi

## Agenda

1. Last week's progress review
2. This week's task review
3. Open issues and action items

## Discussion

### 1. Last Week's Progress

**Completed tasks**:
- Login feature implementation (Tanaka) ✓
- Database design complete (Sato) ✓
- Design mockup created (Suzuki) ✓

**Incomplete tasks**:
- API specification document (Takahashi) → Expected by end of this week

### 2. This Week's Tasks

| Assignee | Task | Deadline |
|----------|------|----------|
| Tanaka | User registration feature | 11/18 |
| Sato | Database migration | 11/16 |
| Suzuki | Top page implementation | 11/20 |
| Takahashi | API spec + start API implementation | 11/17 |

### 3. Issues and Action Items

**Issue**: Test environment setup is behind schedule

**Action plan**:
- Sato to prioritize test environment setup
- Once complete, all members to verify the test environment

## Next Meeting

**Date**: 2025-11-21 10:00-11:00
**Location**: Meeting Room B

Markdown Quick Reference

Syntax	Result
`# Heading 1`	<h1>Heading 1</h1>
`## Heading 2`	<h2>Heading 2</h2>
`bold`	bold
`italic`	italic
`code`	`code`
`[Link](URL)`	Link
`![Image](URL)`	Image
`- list item`	• list item
`1. numbered list`	1. numbered list
`> quote`	> quote
`---`	horizontal rule

Tips and Tricks

1. Use Headings to Structure Your Content

For longer articles, use headings to create a clear hierarchy.

# Main Title
## Major Section
### Sub-section
#### Minor Section

2. Organize Information with Lists

Bulleted and numbered lists make information easier to scan and understand.

3. Use Code Blocks for Technical Content

Program code and commands are much easier to read inside code blocks.

```javascript
// JavaScript code
```

```python
# Python code
```

```bash
# Shell commands
```

4. Use Images Effectively

Screenshots and diagrams make your content easier to understand
Images are automatically resized

Create a network of knowledge by linking to other Pages
External links are supported as well

FAQ

Q1: Can I save a draft?

A: Yes, you can save a page as a draft. Set the status to "Draft" in the creation screen to save your work without publishing. Auto-save is also supported, so your edits are preserved automatically while you work.

Q2: Can I delete a page?

A: Yes. Click the "..." menu in the upper right of the page detail screen and select "Delete."

Q3: Can I resize images?

A: Images are automatically adjusted to an appropriate size. Custom size controls are planned for a future update.

Q4: Can multiple users edit a page at the same time?

A: Collaborative editing is planned for a future release. In the meantime, you can use the Comments feature to share feedback.