quick-start-guide-and-required-environment.md

Quick Start Guide

Required Environment

• An environment where the Chrome browser (PC version) can run
• A GitHub account already obtained (If you haven't obtained one yet, click here → How to get a GitHub account)

Initial Screen

Access the following URL to display the initial screen.

https://vivliostyle-pub-develop.vercel.app/

1. ……Press the "Login" button and log in with your GitHub account (→How to get a GitHub account)
2. ……You can select the language from the language menu (English / 日本語)
3. ……Displays the user guide (this document)

Selecting a Repository and Branch

After logging in, select a repository on the following screen. If the repository has multiple branches, you can also select a branch. Public repositories are displayed as "Public" and private ones as "Private".

1. ……Install the GitHub app (→Tasks required for the first login)
2. ……Refresh the GitHub access token (→Tasks required for the first login)
3. ……GitHub account username (GitHub > Settings > Public profile)
4. ……Language menu (English / 日本語)
5. ……Displays the user guide (this document)
6. ……Refresh repository display
7. ……Select a repository

Click on any repository (7) to automatically transition to the editor/preview screen.

Logout / Send User Survey / Feedback on Issues

Click on the GitHub account username to display a pull-down menu. Logout is at the bottom of the menu items. Selecting this will log you out and return to the initial screen. You can also send user surveys and feedback on issues from this menu. Please make use of it.

1. ……Send user survey
2. ……Feedback on issues
3. ……Logout

Editor / Preview Screen

Moving the pane boundaries: You can change the boundaries of the file list pane, editor pane, and preview pane. Place the mouse cursor on the boundary line of each section. When the cursor changes to a left-right arrow "↔", press the mouse button and drag it left or right to move the boundary line.

Menu Area

1. ……Username / Repository name
2. ……Branch switch menu
3. ……File save button
4. ……GitHub account username (pull-down menu → send survey / feedback / logout)
5. ……Language menu (English / 日本語)
6. ……Displays the user guide (this document)
7. ……Show/Hide file list pane
8. ……Show/Hide editor pane
9. ……Show/Hide preview pane
10. ……Action menu

When you pull down the Action menu, you can perform the following operations.

• Setting
  • Presentation mode
  • Auto reload
• Theme (Select style information)
  • Plain theme
  • Custom theme
  • Book theme for latin font
  • Theme for Japanese paperback
  • Slide theme
  • Techbook theme
  • Academic theme
• Add files
  • Add Image
• Export
  • PDF
• Help
  • VFM Spec (Vivliostyle Flavored Markdown specification)

File List Pane

1. ……Search for file names in the repository
2. ……Retrieve the file list of the repository again
3. …… Upload files to the repository
4. …… Create a new folder in the repository
5. …… Create a new file in the repository
6. ……Currently editing file (bold)
7. ……File list in the repository

• Icon types
  • ……Move to the upper folder
  • ……Folder
  • ……Image file
  • ……HTML file
  • ……CSS file
  • ……Markdown file
  • ……vivliostyle.config.js
  • ……Other files

For details on various file operations, please refer to the following.

• Operations from the file list pane

Preview Pane

1. ……Search for strings in the file
2. ……Page navigation buttons (from left to move to the first page, move to the previous page, move to the next page, move to the last page / grayed out for single page)
3. ……Page counter (current page / total pages)
4. ……Change text size (from left to smaller, larger, default)
5. ……Zoom (from left to reduce, enlarge, actual size, fit page)
6. ……Page navigation slider

Displaying Logs

Move the mouse pointer near the bottom of the screen, and when the pointer changes to an up-down arrow "↕", press the mouse button and drag it upward to reveal the logs.