The panel¶
Dashboard → SSR Websites lists the websites of the account. Open one : its files on the left, the editor in the middle, the preview of its pages on the right or below. The views of the bar — UI libraries, Routes, Settings — take the whole page.
Keys¶
| Keys | What they do |
|---|---|
| Ctrl+S (Cmd+S on a Mac) | Saves the file of the editor : it is compiled, and the preview reloads by itself. |
| Ctrl+\ (Cmd+\) | Hides the files, or shows them again : the editor gets their room. |
| Ctrl+Alt+\ (Cmd+Option+\) | Hides the preview, or shows it again. |
The keys work in the editor and on the rest of the page.
In the tree of the files, when it has the focus : Up Down move, Right Left open and close a folder, Enter opens, F2 renames, Del removes.
The files¶
The tree draws a line from each folder to what is in it ; the file of the editor and its folders take the accent, as the menu of these docs does for the page you read. The folders of a website come first (pages, components, lib, data, public), then the files of its root.
| To | Do |
|---|---|
| Make a file | + in the header (next to the node chosen), + on a folder, or New file in the menu of a folder. Type its name — or a path below the folder (blog/index.tsx) — and Enter. A page in pages/, an endpoint, a layout, a component in components/ or code in lib/ starts from its template ; any other file starts empty. |
| Make a file from a template | New file from a template… in the menu : every template of the panel, the path to write it at. |
| Make a folder | The folder button of the header, or New folder in a menu. A folder no file is in yet shows as empty : this browser keeps it until a file goes into it, as git keeps no empty folder. |
| Rename | F2, or Rename in the menu : the name is typed in its place. A path with / moves it below its folder. |
| Move | Drag a file or a folder onto another folder, or onto the empty part of the tree for the root. A closed folder opens when the pointer stays on it. |
| Upload | Drag files of your disk onto a folder, or Upload files here… in its menu. Upload into public/… in the ⋮ menu of the header takes them into public/. |
| Copy | Duplicate : about-copy.tsx next to about.tsx (a folder with every file in it). |
| Download | Download in the menu of a file. |
| Use its path | Copy the path (components/Card.tsx), Copy the import (@/components/Card), Copy the address of a page or a file of public/ (/about). |
| Preview | Preview in the menu of a page : the preview opens on it. |
| Remove | Del, or Remove in the menu : a folder goes with every file in it. A commit of git keeps what was committed. |
| Compress images | Compress images… in the menu of a folder, Resize & compress… in the menu of an image : JPEG, PNG and WebP made smaller, to a largest size. Save as a new image… writes the result as a new file of the name you type, the original as it is. A large image shows its size next to its name in the tree. See images. |
| See its history | Git history in the menu of a file or a folder, or above the editor : every committed version, its changes, a version loaded into the editor or put back. See git. |
| Find | The search above the tree keeps the files whose paths hold every word. |
The menu of a node opens on its right click, and on its … ; the right click on the empty part of the tree opens the menu of the website. site.config.ts keeps its name and its place : it is the settings of the website.
Code is compiled again at its new path after a move. The imports of it elsewhere are not changed : the problems of the website show the ones which no longer find it.
The preview¶
The preview shows a page with the pass of the panel : an error shows where it comes from, and the preview reloads by itself after a save. Type a path in its address, or open a page : the preview follows the page in the editor.
| To | Do |
|---|---|
| Put it under the editor | The dock button of its header : the preview goes under the files and the editor, as wide as the page. The same button puts it back beside the editor. |
| Make it larger or smaller | Drag its side (or the side of the files). A double click on the side gives back the size it had. |
| See a size of a device | Choose it in its header : desktop (1440 × 900), laptop (1280 × 800), tablet (768 × 1024), phone (390 × 844), small phone (360 × 640). |
| See a size of your own | Custom size, then type the width and the height, 200 to 4000 pixels. |
| Turn the page | The turn button swaps the width and the height. |
A page larger than the panel is made smaller to fit it, with the share shown (62 %) : the page is laid out at its own size. The fit button next to the share shows it at 100 % instead, and the panel scrolls. Fill the panel gives the page the room of the panel. The panel keeps these choices for the next time.
The address of a website¶
A website answers at /ssr/<apiPath>/<name>/ : the path of the account, as in the addresses of its APIs, then the name of the website, unique in the account. The bar shows it ; the settings view writes the reverse proxies of a domain of its own for it. See deployment.