diff --git a/.eslintignore b/.eslintignore index 35effb74..8de0bbec 100644 --- a/.eslintignore +++ b/.eslintignore @@ -4,4 +4,5 @@ src/Lib/**/* outs/**/* scripts/* src/Components/Functions/log.ts -gruntfile.js \ No newline at end of file +gruntfile.js +docs/**/* \ No newline at end of file diff --git a/.prettierignore b/.prettierignore index d96b9619..59104df7 100644 --- a/.prettierignore +++ b/.prettierignore @@ -7,4 +7,5 @@ src/Components/Files/File Icon/fileIcon.ts src/Components/Files/File Operation/open.ts src/Components/Favorites/favorites.ts src/Components/Context Menu/contextmenu.ts -src/Components/Files/File Operation/new.ts \ No newline at end of file +src/Components/Files/File Operation/new.ts +*.min.css \ No newline at end of file diff --git a/README.md b/README.md index 89759dbc..ff6c250e 100644 --- a/README.md +++ b/README.md @@ -3,26 +3,41 @@

Xplorer, a customizable, modern and cross-platform file explorer.

-

Support • Discussion • Documentation

+

Supports • Discussion • Documentation

--- ## What is Xplorer? -![Demo](https://drive.google.com/uc?export=view&id=1SBuUc0BhC49druJwndW2mabS9amTospZ) -Xplorer is a modern file explorer built from ground-up to be fully customizable and even without customization, it also looks modern! It is cross-platform, built using Electron Technology that allowed our File Explorer to be run not only in Windows, but also Linux and MacOS alike, lthough we haven't tested it in macOS yet (macOS maintainer in need). It also allowed file preview directly inside it, not only pictures or documents, but also videos! + +![Demo](docs/static/img/Xplorer%20win.png) +Xplorer is a file explorer built from ground-up to be fully customizable and without customization, it also looks modern! +It is cross-platform, built using Electron Technology that allowed our File Explorer to be run not only in Windows, but also Linux and MacOS alike. +It also allowed file preview directly inside it, not only pictures or documents, but also videos! So to summary, Xplorer's features contain: -- Looks modern -- Fully customizable -- Easy to use -- Cross-platform -- File Preview, even videos! -- Most importantly, FOSS, Free and Open Source, which mean you can change components inside if you see fit + +- Looks modern +- Easy to use +- Cross-platform +- File Preview, even videos! +- Most importantly, FOSS, Free and Open Source, which mean you can change components inside if you see fit Xplorer is currently on development progress. Suggest improvement on Xplorer [Discussion](https://github.com/kimlimjustin/xplorer/discussions/) or [contribute into it](https://xplorer.vercel.app/community/Contributing/)! +## Features + +So to summary, Xplorer's features contain: + +- Looks modern +- Easy to use +- Cross-platform +- File Preview, even videos! +- Most importantly, it's Free and Open Source! Which mean you can change components inside if you see fit and you also don't make your wallet go dry + ### Installation -Xplorer is still on development progress right now, however, you can download the installer [here](https://drive.google.com/drive/folders/1n3V-bznvXg-lVZS_5UHMQybGIOamlSUE?usp=sharing) or by developing it locally. We will provide binary installer after releasing the alpha version! Stay tuned! + +You can access the insider version [here](https://github.com/kimlimjustin/xplorer/releases). Please not that this is not stable yet. Use it on your own risk. ### LICENSE + [Apache-2.0](https://github.com/kimlimjustin/xplorer/blob/master/LICENSE) diff --git a/docs/docs/feature/file operation.md b/docs/docs/feature/file operation.md deleted file mode 100644 index 16c710c9..00000000 --- a/docs/docs/feature/file operation.md +++ /dev/null @@ -1,35 +0,0 @@ -# File Operations - -## Copy file - -You can copy files by right clicking it and click `Copy` option or select the file then press `Ctrl + C` as shortcut and paste it by clicking `Paste` option or press `Ctrl + V` on the destination folder. - -![Copy file](/img/docs/copy.png) - -## Cut file - -You can cut files by right clicking it and click `Cut` option or select the file then press `Ctrl + X` as shortcut and paste it by clicking `Paste` option or press `Ctrl + V` on the destination folder. - -![Copy file](/img/docs/cut.png) - -## How does it work? - -### Copy file - -On windows and macOS, Xplorer will copy the file paths into local clipboard, because of this, you can copy file from Xplorer and paste it into an folder in another system. However, on Linux, we create a string of Xplorer commands and copy it into user clipboard, Xplorer will read user's clipboard when pasting file (because we haven't found any idea to implement it, fell free to [open a PR](/community/Contributing/#pull-requests) if you can help us). The string of Xplorer command look like this: - -``` -Xplorer command - COPY -~/xplorer -~/test -``` - -### Cut file - -THis is done by creating a string of Xplorer command and copy it into user clipboard to be used when pasting file (not integrated with platform because we haven't found any idea, fell free to [open a PR](/community/Contributing/#pull-requests) if you can help us.). The string og Xplorer command look like this: - -``` -Xplorer command - CUT -E://xplorer -E://test -``` diff --git a/docs/docs/feature/shortcut.md b/docs/docs/feature/shortcut.md deleted file mode 100644 index b3ac726f..00000000 --- a/docs/docs/feature/shortcut.md +++ /dev/null @@ -1,35 +0,0 @@ -# Shortcuts - -Key | Shortcut ---- | --- -`Ctrl + W` | Exit Xplorer -`Ctrl + E` | Close Tab -`Ctrl + C` | Copy -`Ctrl + V` | Paste -`Ctrl + X` | Cut -`Ctrl + A` | Select All -`Ctrl + H` | Toggle Hidden Files -`Ctrl + O` | Preview file -`Ctrl + R` | Refresh -`Ctrl + P` | Files/Folders Properties -`Ctrl + F` | Find Files/Folders -`Ctrl + T` | New Tab -`Alt + O` | Open with -`Alt + N` | New Files (docx, pptx, xlsx, psd, etc...) -`Alt + S` | Create Shortcut -`Alt + Left Arrow` | Go Back -`Alt + Right Arrow` | Go Forward -`Alt + Up Arrow` | maximize -`Alt + Down Arrow` | minimize -`Alt + T` | Open in terminal -`Alt + P` | Pin to sidebar -`Alt + Shift + C` | Copy location path -`F2` | Rename -`F5` | Refresh -`F10` | Minimize -`F11` | Maximize -`Shift + N` | New Folders -`Shift + Del` | Permanent Delete -`Shift + Enter` | Open in vscode -`Enter` | Open -`Del` | Delete file diff --git a/docs/docs/feature/_category_.json b/docs/docs/guides/_category_.json similarity index 100% rename from docs/docs/feature/_category_.json rename to docs/docs/guides/_category_.json diff --git a/docs/docs/guides/cli.md b/docs/docs/guides/cli.md new file mode 100644 index 00000000..3e4bee2b --- /dev/null +++ b/docs/docs/guides/cli.md @@ -0,0 +1,31 @@ +# Launch Xplorer from Terminal + +:::info +This feature hasn't optimized yet. It works but it might be laggy. Will be optimized in the feature release. +::: + +## Commands + +Xplorer CLI: + +```bash +xplorer [dir1] [dir2] [dir3] +``` + +Xplorer will open `dir`, `dir2`, `dir3` as tabs on Xplorer. If there's no any dir passed into the command, Xplorer will starts at Home page. + +
+ +xplorer: command not found error on Windows + + +Firstly, you have to register the command into the system path. + +1. Open the `System Properties` on Windows. +2. Click the `Environment Variables` button, it will popup a window. +3. On the table, search for `Path` variable and click on it. +4. Click `Edit` button, it will popup a window. +5. Click `New` button +6. Add `%USERPROFILE%\AppData\Local\Programs\xplorer` + +
diff --git a/docs/docs/guides/operation.md b/docs/docs/guides/operation.md new file mode 100644 index 00000000..bbb4dd09 --- /dev/null +++ b/docs/docs/guides/operation.md @@ -0,0 +1,191 @@ +# Operations + +## Copy files + +You can copy files by right clicking it and click `Copy` option or select the file then press `Ctrl + C` as shortcut and paste it by clicking `Paste` option or press `Ctrl + V` on the destination folder. + +:::info + +On windows and macOS, Xplorer will copy the file paths into local clipboard, because of this, you can copy file from Xplorer and paste it into an folder in another system. However, on Linux, we create a string of Xplorer commands and copy it into user clipboard, Xplorer will read user's clipboard when pasting file (because we haven't found any idea to implement it, fell free to [open a PR](/community/Contributing/#pull-requests) if you can help us). The string of Xplorer command look like this: + +``` +Xplorer command - COPY +~/xplorer +~/test +``` + +::: + +## Copy Location Path + +You can copy a file/folder location path into your clipboard by right clicking it and click `Copy Location Path` or select the file then press `Alt + Shift + C` as shortcut. + +## Cut files + +You can cut files by right clicking it and click `Cut` option or select the file then press `Ctrl + X` as shortcut and paste it by clicking `Paste` option or press `Ctrl + V` on the destination folder. + +:::info +THis is done by creating a string of Xplorer command and copy it into user clipboard to be used when pasting file (not integrated with platform because we haven't found any idea, fell free to [open a PR](/community/Contributing/#pull-requests) if you can help us.). The string og Xplorer command look like this: + +``` +Xplorer command - CUT +E://xplorer +E://test +``` + +::: + +## Delete files + +You can cut files by right clicking it and click `Delete` option or select the file then press `Del` as shortcut. Trashed file can be accessed at `xplorer://Trash`. + +:::info + +- On Windows, this is done by creating a `Trash` folder on `C:` drive and moving the file into it. +- On Linux, this feature is fully integrated with the sytem +- On macOS, this is done by creating a `.local/Trash` folder on `homedir` and moving the file into it. + +We are still working on Windows on macOS to integrate the `Trash` folder, will be released before the stable version came out. fell free to [open a PR](/community/Contributing/#pull-requests) if you can help us. + +::: + +### Permanently delete + +:::danger +Permanently deleted file cannot be restored. Please check again before permanently delete any files. + +::: + +You can permanently delete a file by: + +1. Delete it into `Trash` and right clicking it and click the `Permanent Delete` option +2. Select the file and press `Shift + Del` as shortcut + +## New + +:::caution Be careful with new file/folder name +Xplorer treats `/` on file name/folder as subdir/subfile +::: + +### New file + +You can create a new file by right clicking the workspace, expand the `New` option and select `file` option or press `Alt + N` as shortcut. + +### New folder + +You can create a new folder by right clicking the workspace, expand the `New` option and select `folder` option or press `Shift + N` as shortcut. + +## Open file + +You can open a file on default application by double-clicking it or select the file then press `Enter` as shortcut. + +### Open in Terminal + +This is built-in function by Xplorer. You can open a folder on Terminal by right clicking it and click `Open in terminal` option or select the folder then press `Alt + T` as shortcut. + +### Open in VSCode + +This is built-in function by Xplorer. You can open a file/folder on VSCode by right clicking it and click `Open in vscode` option or select the file then press `Ctrl + Enter` as shortcut. You won't able to do this if you don't have VSCode installed. + +## Pin to Sidebar + +You can pin a file/folder into sidebar by right clicking it and click `Pin to Sidebar` or select the file then press `Alt + P` as shortcut. + +## Preview file + +You can preview a file directly from Xplorer by right-clicking it and click `Preview` otioin or select the file then press `Ctrl+O`. + +![Preview Demo](/img/docs/preview.png) + +:::info + +
+ +Files available to preview for now: + + +```json +[ + ".pdf", + ".html", + ".docx", + ".htm", + ".xlsx", + ".xls", + ".xlsb", + "xls", + ".ods", + ".fods", + ".csv", + ".txt", + ".py", + ".js", + ".bat", + ".css", + ".c++", + ".cpp", + ".cc", + ".c", + ".diff", + ".patch", + ".go", + ".java", + ".json", + ".php", + ".ts", + ".tsx", + ".jsx", + ".jpg", + ".png", + ".gif", + ".bmp", + ".jpeg", + ".jpe", + ".jif", + ".jfif", + ".jfi", + ".webp", + ".tiff", + ".tif", + ".ico", + ".svg", + ".webp", + ".mp4", + ".webm", + ".mpg", + ".mp2", + ".mpeg", + ".mpe", + ".mpv", + ".ocg", + ".m4p", + ".m4v", + ".avi", + ".wmv", + ".mov", + ".qt", + ".flv", + ".swf", + ".md" +] +``` + +
+ +::: + +## Properties + +You can view properties of a file/folder by right clicking it and click `Properties` or select the file then press `Ctrl + P` as shortcut. +Available properties for now (will be improved at the next version): + +- Size +- File Path +- Created At +- Accesssed At +- Modified At +- Is Hidden + +## Rename file/folder + +You can rename a file/folder by right clicking it and click `Rename` option or select the file then press `F2` as shortcut. It will prompt a dialog, enter the new name and the file/folder will be renamed. diff --git a/docs/docs/guides/setting.md b/docs/docs/guides/setting.md new file mode 100644 index 00000000..9f4ce121 --- /dev/null +++ b/docs/docs/guides/setting.md @@ -0,0 +1,72 @@ +# Settings + +
+ +How to open the settings? + +You can open settings on Xplorer by clicking the `Settings` button on the left down of Xplorer. + +![Settings](/img/docs/settings.png) + +
+
+ +How to exit from the settings? + +You can exit from settings on Xplorer by clicking the Arrow Up button on the upside left of Xplorer. + +![Settings](/img/docs/exit-settings.png) + +
+ +## App Theme + +You can change Xplorer's app theme on the `Appearance` tab of the Settings. Available default themes are `light`, `light+`, `dark`, and `dark+`. Besides, there is `System Default` theme which will automatically read your system preference. +:::info +Xplorer will supports custom app theme soon, stay tuned! +::: + +### Acrylic Effect + +Acrylic Effect is the effect which gives the transparency effect on the sidebar. Only works on Windows 10 and higher. + +## File Preview + +The file preview here means the preview that replaces the default icon of a file. + +### Play video file as preview + +THis will automatially play the video file as preview. +:::caution THIS MIGHT CONSUME HIGH AMOUNT OF RAM +This might consume hight amount of RAM because it's built on the HTML video player. +You can just enable this setting and ignore this caution if you got a good-spec computer. +::: + +### Extract `EXE` file icon and make it as preview + +This will parse and cache the icon from a `exe` file and make it as preview. Only on Windows. + +![Extract Exe file icon](/img/docs/extract-exe-icon.png) + +## Default file layout + +Default file layout of a directory. Just give it a try :) + +## App Language + +Localize Xplorer. Help us translate Xplorer [here](https://github.com/kimlimjustin/xplorer/discussions/30). + +## Hide Hidden Files + +Hide hidden files on Xplorer, you can find this setting on `Preference` tab on Xplorer or by it's shortcut, `Ctrl + H`. + +## Hide System Files + +Hide Windows' system files on Xplorer. +:::tip +Learn what is system file [here](https://en.wikipedia.org/wiki/System_file). Just turn it off if you don't understand what it is. +::: + +## List and sort directories alongside with files + +If disabled, Xplorer will prioritize directories above files. diff --git a/docs/docs/guides/shortcut.md b/docs/docs/guides/shortcut.md new file mode 100644 index 00000000..5b2a2254 --- /dev/null +++ b/docs/docs/guides/shortcut.md @@ -0,0 +1,36 @@ +# Shortcuts + +| Key | Shortcut | +| ------------------- | ------------------------ | +| `Ctrl + A` | Select All | +| `Ctrl + C` | Copy | +| `Ctrl + E` | Close Tab | +| `Ctrl + H` | Toggle Hidden Files | +| `Ctrl + O` | Preview file | +| `Ctrl + P` | Files/Folders Properties | +| `Ctrl + R` | Reload | +| `Ctrl + T` | New Tab | +| `Ctrl + V` | Paste | +| `Ctrl + X` | Cut | +| `Ctrl + W` | Exit Xplorer | +| `Alt + Left Arrow` | Go Back | +| `Alt + Right Arrow` | Go Forward | +| `Alt + Up Arrow` | maximize | +| `Alt + Down Arrow` | minimize | +| `Alt + T` | Open in terminal | +| `Alt + P` | Pin to sidebar | +| `Alt + Shift + C` | Copy location path | +| `F2` | Rename | +| `F5` | Refresh | +| `F10` | Minimize | +| `F11` | Maximize | +| `Shift + N` | New Folders | +| `Shift + Del` | Permanent Delete | +| `Shift + Enter` | Open in vscode | +| `Enter` | Open | +| `Del` | Delete file | + +:::note Difference between `reload` and `refresh` +`Reload` refreshes the internal HTML while `Refresh` refreshes the whole Electron process. + +::: diff --git a/docs/docs/guides/xplorer as default.md b/docs/docs/guides/xplorer as default.md new file mode 100644 index 00000000..ffed6e98 --- /dev/null +++ b/docs/docs/guides/xplorer as default.md @@ -0,0 +1,26 @@ +# Set As Default File Explorer (Windows) + +:::caution +This guides involves modifiying the Windows registry, make sure to crate a backup beforehand to recover if you got any problem with Xplorer. Please keep in mind that this metod may not work for everyone. + +> Click [here](https://support.microsoft.com/en-us/topic/how-to-back-up-and-restore-the-registry-in-windows-855140ad-e318-2a13-2829-d428a2ab0692) to Microsoft official documentation on how to backup and restore the registry + +::: + +1. Type `Win` + `R` and type `regedit.exe` +2. Click `Yes` on the question `Do you want to allow this app to make changes to your devies` +3. Create a backup of the registry (see caution above). +4. Navigate to `Computer\HKEY_CURRENT_USER\Software\Classes\Directory` +5. Create a key named `shell` if not existed by right and set the default key value to `openinxplorer` +6. Create a key named `openinxplorer` under `shell` +7. Create a key named `command` under `openinxplorer` and set the default key value to `"C:\Users\User\AppData\Local\Programs\Microsoft VS Code\Code.exe" "%V"` + +![Registry Structure](/img/docs/registry.png) + +:::info + +To create a new subkey, right click on the parent key and select `New > Key`. +![Regedit create a new subkey](/img/docs/regedit-create-new-key.png) + +To set the default key, double click or by right click and click `Modify` on the `Name` and enter the value there. +::: diff --git a/docs/docs/install.md b/docs/docs/install.md new file mode 100644 index 00000000..6b5e2eed --- /dev/null +++ b/docs/docs/install.md @@ -0,0 +1,59 @@ +--- +sidebar_position: 2 +--- + +# Installation + +## Installer + +You can acess the installer [here](https://github.com/kimlimjustin/xplorer/releases). + +## Common Problems + +
+ +Faced Windows Defender? + + +This is actually not an error, it's a design choice by Microsoft to protect those of us who are not tech-savvy (i.e. potentially your friends) from virus. You don't need to worry the safety of Xplorer in this case, since it's [open source](https://github.com/kimlimjustin/xplorer) and you can inspect the code or even build your own version! + +To Handle this, you can just click the `More Info` button, then, just click Run Anyway. + +1. ![Step 1](/img/docs/windows-defender-1.png) +2. ![Step 2](/img/docs/windows-defender-2.png) + +:::note References + +Adopted from [Stack Overflow](https://stackoverflow.com/questions/65488839/how-can-i-avoid-windows-protected-your-pc-problem-when-my-friends-try-to-use-m). +::: + +
+
+ +How to install in Arch OS? + + +Run following command: + +```bash +sudo pacman -u [installer file name] +``` + +:::info +If you faced the `xplorer exists in filesystem` error, run this command instead: + +```bash +sudo pacman -u [installer file name] --overwrite "*" +``` + +::: + +
+
+ +There is no my favourites installer. + + +Please address an issue [here](https://github.com/kimlimjustin/xplorer). + +
diff --git a/docs/docs/installation/Linux.md b/docs/docs/installation/Linux.md deleted file mode 100644 index 2ca6be2d..00000000 --- a/docs/docs/installation/Linux.md +++ /dev/null @@ -1,5 +0,0 @@ -# Install Xplorer in Linux - -We made sure that you have easy time installing our file explorer with Linux Installer File (.deb, .tar, etc). - -You can access early dev build [here](https://drive.google.com/file/d/14jG5fH2CFXPVhsUrV_Z1NaDsH5qypfOE/view?usp=sharing). \ No newline at end of file diff --git a/docs/docs/installation/Windows.md b/docs/docs/installation/Windows.md deleted file mode 100644 index dc663a0b..00000000 --- a/docs/docs/installation/Windows.md +++ /dev/null @@ -1,18 +0,0 @@ -# Install Xplorer in Windows - -If you love using Windows, just download and install your installation (.exe) file because who cares to use Windows' CMD other than to check your internet connection. - -## Installer link - -You can access early dev build [here](https://drive.google.com/file/d/1b63Z258hk7FEJ_Qj5zIv4T6yHKkegfuG/view?usp=sharing). - -## Faced Windows Defender? -This is actually not an error, it's a design choice by Microsoft to protect those of us who are not tech-savvy (i.e. potentially your friends) from virus. You don't need to worry the safety of Xplorer in this case, since it's [open source](https://github.com/kimlimjustin/xplorer) and you can inspect the code or even build your own version! - -To Handle this, you can just click the `More Info` button, then, just click Run Anyway. -1. ![Step 1](https://i.stack.imgur.com/Rybx7.png) -2. ![Step 2](https://i.stack.imgur.com/Pm0Za.png) - - -### Reference -Adopted from [Stack Overflow](https://stackoverflow.com/questions/65488839/how-can-i-avoid-windows-protected-your-pc-problem-when-my-friends-try-to-use-m). \ No newline at end of file diff --git a/docs/docs/installation/_category_.json b/docs/docs/installation/_category_.json deleted file mode 100644 index 0ec141d6..00000000 --- a/docs/docs/installation/_category_.json +++ /dev/null @@ -1,5 +0,0 @@ -{ - "label": "Installation", - "position": 2 -} - \ No newline at end of file diff --git a/docs/docs/intro.md b/docs/docs/intro.md index 24f7aebf..59725daa 100644 --- a/docs/docs/intro.md +++ b/docs/docs/intro.md @@ -8,16 +8,16 @@ sidebar_position: 1 Welcome to xplorer! A Free and Open Source (FOSS) File Explorer. -Xplorer is a file explorer built from ground-up to be fully customizable and without customization, it also looks modern! -It is cross-platform, built using Electron Technology that allowed our File Explorer to be run not only in Windows, but also Linux and MacOS alike, although we haven't tested it in macOS yet (macOS maintainer in need). +Xplorer is a file explorer built from ground-up to be fully customizable and without customization, it also looks modern! +It is cross-platform, built using Electron Technology that allowed our File Explorer to be run not only in Windows, but also Linux and MacOS alike. It also allowed file preview directly inside it, not only pictures or documents, but also videos! ## Features So to summary, Xplorer's features contain: -- Looks modern -- Fully customizable -- Easy to use -- Cross-platform -- File Preview, even videos! -- Most importantly, it's Free and Open Source! Which mean you can change components inside if you see fit and you also don't make your wallet go dry + +- Looks modern +- Easy to use +- Cross-platform +- File Preview, even videos! +- Most importantly, it's Free and Open Source! Which mean you can change components inside if you see fit and you also don't make your wallet go dry diff --git a/docs/docusaurus.config.js b/docs/docusaurus.config.js index e187f0ca..68e108c8 100644 --- a/docs/docusaurus.config.js +++ b/docs/docusaurus.config.js @@ -22,7 +22,7 @@ module.exports = { announcementBar: { id: 'support_us', content: - 'Xplorer is still under heavy development, docs here may not up to date.', + 'Xplorer is still under heavy development, any features might change anytime.', backgroundColor: '#fafbfc', textColor: '#091E42', }, diff --git a/docs/package.json b/docs/package.json index 729d0000..68910c0a 100644 --- a/docs/package.json +++ b/docs/package.json @@ -24,6 +24,7 @@ "@docusaurus/preset-classic": "2.0.0-beta.6", "@mdx-js/react": "^1.6.21", "@svgr/webpack": "^5.5.0", + "animate.css": "^4.1.1", "clsx": "^1.1.1", "file-loader": "^6.2.0", "plugin-image-zoom": "ataft/plugin-image-zoom", diff --git a/docs/src/components/HomepageFeatures.js b/docs/src/components/HomepageFeatures.js deleted file mode 100644 index 3048d1e4..00000000 --- a/docs/src/components/HomepageFeatures.js +++ /dev/null @@ -1,80 +0,0 @@ -import React from 'react'; -import clsx from 'clsx'; -import styles from './HomepageFeatures.module.css'; - -const FeatureList = [ - { - title: 'Easy to Use', - Svg: require('../../static/img/octocat.svg').default, - description: ( - <> - Xplorer was designed to manage your files easily, and you can preview the file natively inside Xplorer! - - ), - }, - { - title: 'Customizable', - Svg: require('../../static/img/octocat.svg').default, - description: ( - <> - Xplorer allows you to design your own theme, and you can turn on/off any feature through settings easily! - - ), - }, - { - title: 'Modern', - Svg: require('../../static/img/octocat.svg').default, - description: ( - <> - Xplorer was designed to be fully functional and easy to use with a modern looks!. - - ), - }, - { - title: 'Cross Platform', - Svg: require('../../static/img/octocat.svg').default, - description: ( - <> - Being built using Electron technology, you can run Xplorer on Windows, Linux, and macOS! (macOS haven't been tested) - - ) - }, - { - title: "It's FOSS (Free And Open Source)", - Svg: require('../../static/img/octocat.svg').default, - description: ( - <> - Xplorer is an open source project which is hosted publicly on GitHub. - - ) - } -]; - -function Feature({ Svg, title, description, idx }) { - return ( -
-
- -
-
-

{title}

-

{description}

-
-
- ); -} - -export default function HomepageFeatures() { - return ( -
-
-
- {FeatureList.map((props, idx) => { - props.idx = idx - return - })} -
-
-
- ); -} diff --git a/docs/src/components/HomepageFeatures.module.css b/docs/src/components/HomepageFeatures.module.css deleted file mode 100644 index 9dcb82c3..00000000 --- a/docs/src/components/HomepageFeatures.module.css +++ /dev/null @@ -1,13 +0,0 @@ -/* stylelint-disable docusaurus/copyright-header */ - -.features { - display: flex; - align-items: center; - padding: 2rem 0; - width: 100%; -} - -.featureSvg { - height: 200px; - width: 200px; -} diff --git a/docs/src/css/custom.css b/docs/src/css/custom.css index e1259e75..67884e19 100644 --- a/docs/src/css/custom.css +++ b/docs/src/css/custom.css @@ -1,51 +1,236 @@ +@import url('https://fonts.googleapis.com/css2?family=Inter:wght@800&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@300&display=swap'); + :root { - --ifm-color-primary: #84a59d; - --ifm-color-primary-dark: rgb(33, 175, 144); - --ifm-color-primary-darker: rgb(31, 165, 136); - --ifm-color-primary-darkest: rgb(26, 136, 112); - --ifm-color-primary-light: rgb(70, 203, 174); - --ifm-color-primary-lighter: rgb(102, 212, 189); - --ifm-color-primary-lightest: rgb(146, 224, 208); - --ifm-navbar-background-color: #cbccd1; - --ifm-footer-background-color: #cbccd1; - --link-active-color: #477dad; - --ifm-link-color: var(--link-active-color); - --ifm-navbar-link-hover-color: var(--link-active-color); - --ifm-menu-color-active: var(--link-active-color); - --ifm-color-emphasis-300: #9cbfdd; - --ifm-table-background: #cbccd1; - --ifm-table-head-background: #d5d6db; - --ifm-pre-background: #fff; - background: #d5d6db; -} - -.menu{ - background: #cbccd1; -} - -html[data-theme="dark"]{ - --ifm-navbar-background-color: #1b1e2e; - --ifm-footer-background-color: #1b1e2e; - --ifm-table-background: #1b1e2e; - --ifm-table-head-background: #1b1e2e; - background: #24283b; -} - -html[data-theme="dark"] .menu{ - background: #1b1e2e; + --ifm-color-primary: #84a59d; + --ifm-color-primary-dark: rgb(33, 175, 144); + --ifm-color-primary-darker: rgb(31, 165, 136); + --ifm-color-primary-darkest: rgb(26, 136, 112); + --ifm-color-primary-light: rgb(70, 203, 174); + --ifm-color-primary-lighter: rgb(102, 212, 189); + --ifm-color-primary-lightest: rgb(146, 224, 208); + --ifm-navbar-background-color: #cbccd1; + --ifm-footer-background-color: #cbccd1; + --link-active-color: #4d8dff; + --ifm-link-color: var(--link-active-color); + --ifm-navbar-link-hover-color: var(--link-active-color); + --ifm-menu-color-active: var(--link-active-color); + --ifm-color-emphasis-300: #9cbfdd; + --ifm-table-background: #cbccd1; + --ifm-table-head-background: #d5d6db; + --ifm-pre-background: #fff; + --gray-color: #657482; + background: #d5d6db; +} + +.menu { + background: #cbccd1; +} + +html[data-theme='dark'] { + --ifm-navbar-background-color: #1b1e2e; + --ifm-footer-background-color: #1b1e2e; + --ifm-table-background: #1b1e2e; + --ifm-table-head-background: #1b1e2e; + background: #24283b; +} + +html[data-theme='dark'] .menu { + background: #1b1e2e; } .docusaurus-highlight-code-line { - background-color: rgba(0, 0, 0, 0.1); - display: block; - margin: 0 calc(-1 * var(--ifm-pre-padding)); - padding: 0 var(--ifm-pre-padding); + background-color: rgba(0, 0, 0, 0.1); + display: block; + margin: 0 calc(-1 * var(--ifm-pre-padding)); + padding: 0 var(--ifm-pre-padding); } html[data-theme='dark'] .docusaurus-highlight-code-line { - background-color: rgba(0, 0, 0, 0.3); + background-color: rgba(0, 0, 0, 0.3); +} + +.blog-wrapper article { + text-align: justify; +} + +.padding-top--l { + padding-top: 2.5rem !important; +} + +.padding-bottom--l { + padding-bottom: 2.5rem !important; +} + +.padding-left--m { + padding-left: 0.8rem !important; +} +.padding-right--m { + padding-right: 0.8rem !important; +} + +.welcome--section { + padding-top: 1rem !important; +} + +.banner { + text-align: center; +} + +.banner--title { + font-family: 'Inter'; + font-weight: normal; + margin: 0; + font-size: 2.9rem; +} + +.banner--subtitle { + font-family: 'Inter'; + font-weight: bold; + font-size: 3rem; +} + +.banner--description { + font-family: 'Rubik'; + margin: 1rem 0; + font-size: 1.3rem; +} + +.explore--docs--link { + font-family: 'Inter'; + font-weight: 600; +} + +.btn { + font-family: 'Inter'; + letter-spacing: -0.02em; + font-weight: 600; + padding: 16px 20px; + line-height: 112%; + -ms-flex-align: center; + align-items: center; + -ms-flex-pack: center; + justify-content: center; + font-size: 16px; + box-shadow: none; + color: #fff; + background: -webkit-linear-gradient(-70deg, #804eda, #6978de); + border-radius: 100px; + transition: background-color 1s ease-out; + cursor: pointer; + border: none; +} + +.btn:hover { + color: initial; +} + +.built-with-web { + margin: auto; + text-align: center; +} + +.built-with-web span { + max-width: 750px; +} + +.built-with-web h1 { + font-weight: 800 !important; + font-style: normal !important; + font-family: 'Inter' !important; + font-size: 3rem; + color: var(--gray-color); +} +.built-with-web h1 em { + display: block; + font-style: normal; + color: initial; +} + +.features--list { + max-width: 900px; + margin: auto; +} + +.features--list img { + height: 200px; + width: 100%; +} + +@media only screen and (max-width: 996px) { + .built-with-web h1 { + font-size: 2rem; + } + .welcome--section { + padding: 0 !important; + } + .banner { + padding: 1rem 0.5rem !important; + } +} + +.slideshow-container { + position: relative; } -article{ - text-align: justify; -} \ No newline at end of file +.slide { + display: none; + -webkit-animation-name: fade; + -webkit-animation-duration: 1.5s; + animation-name: fade; + animation-duration: 1.5s; +} + +.slide-caption { + color: #f2f2f2; + font-size: 15px; + padding: 8px 12px; + position: absolute; + bottom: 8px; + width: 100%; + text-align: center; +} + +.slide-numbertext { + color: #f2f2f2; + font-size: 12px; + padding: 8px 12px; + position: absolute; + top: 0; +} + +.slide-dots { + text-align: center; +} + +.slide-dot { + height: 15px; + width: 15px; + margin: 0 2px; + background-color: #bbb; + border-radius: 50%; + display: inline-block; + transition: background-color 0.6s ease; +} + +.slide-active { + background-color: #717171; +} + +@-webkit-keyframes fade { + from { + opacity: 0.4; + } + to { + opacity: 1; + } +} + +@keyframes fade { + from { + opacity: 0.4; + } + to { + opacity: 1; + } +} diff --git a/docs/src/pages/index.js b/docs/src/pages/index.js deleted file mode 100644 index a89506ea..00000000 --- a/docs/src/pages/index.js +++ /dev/null @@ -1,40 +0,0 @@ -import React from 'react'; -import clsx from 'clsx'; -import Layout from '@theme/Layout'; -import Link from '@docusaurus/Link'; -import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; -import styles from './index.module.css'; -import HomepageFeatures from '../components/HomepageFeatures'; - -function HomepageHeader() { - const { siteConfig } = useDocusaurusContext(); - return ( -
-
-

{siteConfig.title}

-

{siteConfig.tagline}

-
- - Get Started - -
-
-
- ); -} - -export default function Home() { - const { siteConfig } = useDocusaurusContext(); - return ( - - -
- -
- - ); -} diff --git a/docs/src/pages/index.jsx b/docs/src/pages/index.jsx new file mode 100644 index 00000000..6bd1d8b3 --- /dev/null +++ b/docs/src/pages/index.jsx @@ -0,0 +1,112 @@ +import React from 'react'; +import Layout from '@theme/Layout'; +import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; +import Slideshow from './slideshow'; + +export default function Home() { + const { siteConfig } = useDocusaurusContext(); + return ( + +
+
+
+

File Explorer.

+

Redefined.

+

+ Free and Open Source Software. Runs everywhere. +

+
+ + Download now + + + Xplorer the docs -{'>'} + +
+
+
+ {/*Xplorer app on Windows 11*/} + +
+
+
+

+ Cross-platform File Explorer.{' '} + Powered by the web. +

+ + Built using the{' '} + + Electron + {' '} + , based on{' '} + + Chromium + + , and written using{' '} + + TypeScript + {' '} + , Xplorer promises you an unprecedented experience. + +
+
+ Xplorer designed out of the box +

Designed out of the box

+

+ Say goodbye to the old design by traditional app + and say hello to this simple yet powerful + design. +

+
+
+ Support tabs +

Supports Multiple Tabs

+

+ Xplorer helps you oraganize you files easier by + supporting multiple tabs . +

+
+
+ +

File Preview

+

+ Xplorer supports files preview, even videos! + Learn more{' '} + + here + + . +

+
+
+
+
+ + ); +} diff --git a/docs/src/pages/index.module.css b/docs/src/pages/index.module.css deleted file mode 100644 index 5c0d4f6e..00000000 --- a/docs/src/pages/index.module.css +++ /dev/null @@ -1,25 +0,0 @@ -/* stylelint-disable docusaurus/copyright-header */ - -/** - * CSS files with the .module.css suffix will be treated as CSS modules - * and scoped locally. - */ - -.heroBanner { - padding: 4rem 0; - text-align: center; - position: relative; - overflow: hidden; -} - -@media screen and (max-width: 966px) { - .heroBanner { - padding: 2rem; - } -} - -.buttons { - display: flex; - align-items: center; - justify-content: center; -} diff --git a/docs/src/pages/markdown-page.md b/docs/src/pages/markdown-page.md deleted file mode 100644 index 9756c5b6..00000000 --- a/docs/src/pages/markdown-page.md +++ /dev/null @@ -1,7 +0,0 @@ ---- -title: Markdown page example ---- - -# Markdown page example - -You don't need React to write simple standalone pages. diff --git a/docs/src/pages/slideshow.jsx b/docs/src/pages/slideshow.jsx new file mode 100644 index 00000000..41d558bb --- /dev/null +++ b/docs/src/pages/slideshow.jsx @@ -0,0 +1,61 @@ +import React, { useEffect } from 'react'; +export default function Slideshow() { + useEffect(() => { + var slideIndex = 0; + + const showSlides = () => { + var i; + var slides = document.getElementsByClassName('slide'); + var dots = document.getElementsByClassName('slide-dot'); + for (i = 0; i < slides.length; i++) { + slides[i].style.display = 'none'; + } + slideIndex++; + if (slideIndex > slides.length) { + slideIndex = 1; + } + for (i = 0; i < dots.length; i++) { + dots[i].className = dots[i].className.replace( + ' slide-active', + '' + ); + } + slides[slideIndex - 1].style.display = 'block'; + dots[slideIndex - 1].className += ' slide-active'; + setTimeout(showSlides, 2000); + }; + showSlides(); + }, []); + return ( + <> +
+
+
1 / 3
+ Xplorer on Windows +
Windows
+
+
+
2 / 3
+ Xplorer on Linux +
Garuda Linux
+
+
+
3 / 3
+ Xplorer on macOS +
macOS Catalina
+
+
+
+ + + +
+ + ); +} diff --git a/docs/static/img/Xplorer linux.png b/docs/static/img/Xplorer linux.png new file mode 100644 index 00000000..ff86dc58 Binary files /dev/null and b/docs/static/img/Xplorer linux.png differ diff --git a/docs/static/img/Xplorer mac.png b/docs/static/img/Xplorer mac.png new file mode 100644 index 00000000..c398fc2c Binary files /dev/null and b/docs/static/img/Xplorer mac.png differ diff --git a/docs/static/img/Xplorer win.png b/docs/static/img/Xplorer win.png new file mode 100644 index 00000000..fe4f5d4a Binary files /dev/null and b/docs/static/img/Xplorer win.png differ diff --git a/docs/static/img/docs/copy.png b/docs/static/img/docs/copy.png deleted file mode 100644 index b6757f41..00000000 Binary files a/docs/static/img/docs/copy.png and /dev/null differ diff --git a/docs/static/img/docs/cut.png b/docs/static/img/docs/cut.png deleted file mode 100644 index 11caa6bd..00000000 Binary files a/docs/static/img/docs/cut.png and /dev/null differ diff --git a/docs/static/img/docs/exit-settings.png b/docs/static/img/docs/exit-settings.png new file mode 100644 index 00000000..d1a17dac Binary files /dev/null and b/docs/static/img/docs/exit-settings.png differ diff --git a/docs/static/img/docs/extract-exe-icon.png b/docs/static/img/docs/extract-exe-icon.png new file mode 100644 index 00000000..6af8eaa5 Binary files /dev/null and b/docs/static/img/docs/extract-exe-icon.png differ diff --git a/docs/static/img/docs/preview.png b/docs/static/img/docs/preview.png new file mode 100644 index 00000000..13c68501 Binary files /dev/null and b/docs/static/img/docs/preview.png differ diff --git a/docs/static/img/docs/regedit-create-new-key.png b/docs/static/img/docs/regedit-create-new-key.png new file mode 100644 index 00000000..c5eb16be Binary files /dev/null and b/docs/static/img/docs/regedit-create-new-key.png differ diff --git a/docs/static/img/docs/registry.png b/docs/static/img/docs/registry.png new file mode 100644 index 00000000..44b97a02 Binary files /dev/null and b/docs/static/img/docs/registry.png differ diff --git a/docs/static/img/docs/settings.png b/docs/static/img/docs/settings.png new file mode 100644 index 00000000..2db07c31 Binary files /dev/null and b/docs/static/img/docs/settings.png differ diff --git a/docs/static/img/docs/windows-defender-1.png b/docs/static/img/docs/windows-defender-1.png new file mode 100644 index 00000000..46499de3 Binary files /dev/null and b/docs/static/img/docs/windows-defender-1.png differ diff --git a/docs/static/img/docs/windows-defender-2.png b/docs/static/img/docs/windows-defender-2.png new file mode 100644 index 00000000..18762d59 Binary files /dev/null and b/docs/static/img/docs/windows-defender-2.png differ diff --git a/docs/static/img/home/designed-out-of-the-box.png b/docs/static/img/home/designed-out-of-the-box.png new file mode 100644 index 00000000..6e6a3c21 Binary files /dev/null and b/docs/static/img/home/designed-out-of-the-box.png differ diff --git a/docs/static/img/home/preview-files.png b/docs/static/img/home/preview-files.png new file mode 100644 index 00000000..f8278071 Binary files /dev/null and b/docs/static/img/home/preview-files.png differ diff --git a/docs/static/img/home/support-tabs.png b/docs/static/img/home/support-tabs.png new file mode 100644 index 00000000..6081a714 Binary files /dev/null and b/docs/static/img/home/support-tabs.png differ diff --git a/docs/yarn.lock b/docs/yarn.lock index 8c146465..5794c7b5 100644 --- a/docs/yarn.lock +++ b/docs/yarn.lock @@ -2163,6 +2163,11 @@ alphanum-sort@^1.0.2: resolved "https://registry.yarnpkg.com/alphanum-sort/-/alphanum-sort-1.0.2.tgz#97a1119649b211ad33691d9f9f486a8ec9fbe0a3" integrity sha1-l6ERlkmyEa0zaR2fn0hqjsn74KM= +animate.css@^4.1.1: + version "4.1.1" + resolved "https://registry.yarnpkg.com/animate.css/-/animate.css-4.1.1.tgz#614ec5a81131d7e4dc362a58143f7406abd68075" + integrity sha512-+mRmCTv6SbCmtYJCN4faJMNFVNN5EuCTTprDTAo7YzIGji2KADmakjVA3+8mVDkZ2Bf09vayB35lSQIex2+QaQ== + ansi-align@^3.0.0: version "3.0.0" resolved "https://registry.yarnpkg.com/ansi-align/-/ansi-align-3.0.0.tgz#b536b371cf687caaef236c18d3e21fe3797467cb"