diff --git a/docs/how-to-install/styles.module.css b/docs/how-to-install/styles.module.css new file mode 100644 index 0000000..42c49e8 --- /dev/null +++ b/docs/how-to-install/styles.module.css @@ -0,0 +1,48 @@ +.image { + border: 1px solid #E0E0E0; +} + +.menu_item:before { + content: ''; + width: 22px; + height: 22px; + margin: auto 8px auto 0; + background-color: var(--ifm-color-content); +} + +.menu_item_desktop:before { + background: url("/icon/remote-desktop.svg"); +} + +.menu_item_commandline:before { + background: url("/icon/console.svg"); +} + +.menu_item_demoversion:before { + background: url("/icon/openremote.svg"); +} + +.menu_item_productionready:before { + -webkit-mask-image: url("/icon/package-variant-closed.svg"); + mask-image: url("/icon/package-variant-closed.svg"); +} + +.menu_item_customproject:before { + -webkit-mask-image: url("/icon/tools.svg"); + mask-image: url("/icon/tools.svg"); +} + +.bottom_navigation_container { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 12px; +} + +.bottom_navigation_container > * { + flex: 1; +} + +/* +.theme-code-block { + background: blue; +}*/ diff --git a/docs/how-to-install/using-aws-marketplace.mdx b/docs/how-to-install/using-aws-marketplace.mdx new file mode 100644 index 0000000..b780621 --- /dev/null +++ b/docs/how-to-install/using-aws-marketplace.mdx @@ -0,0 +1,9 @@ +--- +sidebar_position: 4 +sidebar_label: Using AWS Marketplace +unlisted: true +--- + +# Install using AWS Marketplace + +WIP \ No newline at end of file diff --git a/docs/how-to-install/using-docker.mdx b/docs/how-to-install/using-docker.mdx new file mode 100644 index 0000000..5061a55 --- /dev/null +++ b/docs/how-to-install/using-docker.mdx @@ -0,0 +1,190 @@ +--- +sidebar_position: 1 +sidebar_label: Using Docker +--- +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; +import OpenRemoteDemo from '@site/static/img/install-demo.png'; +import InsightsDashboard from '@site/static/img/insights-dashboard.png'; +import OpenRemoteIcon from '@site/static/icon/openremote.svg'; +import DockerIcon from '@site/static/icon/docker-mark-blue.svg'; +import OpenInTabIcon from '@site/static/icon/open-in-new.svg'; +import DownloadIcon from '@site/static/icon/download.svg'; +import ChevronRight from '@site/static/icon/chevron-right.svg'; +import styles from './styles.module.css'; +import Admonition from '@theme/Admonition'; +import {CardElement} from "../util/card-element"; + +# Install using Docker + +The most common installation method for OpenRemote is using [Docker](https://www.docker.com).
+It is the most popular tool for providing containerization, which runs our software in its own isolated environment.
+ +We provide easy-to-install configurations using [Docker Compose](https://docs.docker.com/compose/) profiles.
+All of our distributions, for both ARM64 and AMD64, are available on [Docker Hub](https://hub.docker.com/u/openremote).
+ +## Prerequisites + + + Install Docker Engine + Version 18 or higher + +
+You'll need access to the Docker CLI during the setup, to start containers using [Docker Compose](https://docs.docker.com/compose/).
+ +{/* + + - **Install Docker Desktop**
+ You can install Docker Desktop on [Windows](https://docs.docker.com/desktop/setup/install/windows-install/), [Mac](https://docs.docker.com/desktop/setup/install/mac-install/) or [Linux](https://docs.docker.com/desktop/setup/install/linux/).
+ It provides a straightforward GUI (Graphical User Interface) that lets you manage your containers, applications,
+ and images directly from your machine. All necessary tools for installing OpenRemote come preinstalled. +
+ + - **Install Docker Engine for Linux**
+ Users can install [Docker Engine](https://docs.docker.com/engine/install/) on any Linux distribution for running OpenRemote.
+ It includes all necessary CLI tools (like Docker Compose) for a smooth installation process.
+ Other platforms will have to use the [desktop environment](./using-docker?prerequisites=desktop) instead. +
+
*/} + +## Installing OpenRemote + +Depending on your project, and the amount of customization you need, we provide steps below. + + + + OpenRemote Demo + *Figure 1. Screenshot of the Manager UI Map page filled with the assets of this setup.* + + We distribute a demo version of OpenRemote that includes several assets with simulated data.
+ It includes automation rules, dashboards, and full administrator control of the software.
+ The easy setup allows users to discover platform features, without needing additional setup.
+
+ + ### 1. Download the `docker-compose.yml` file + + docker-compose.yml + +
+ By default, we expose port `80` (HTTP), `443` (HTTPS) and `8883` (MQTT) to the local network.
+ Make sure the correct firewall routing is set up for public access on these ports.
+ Alternatively, you can adjust port mapping within the `docker-compose.yml` file; see [here](https://docs.docker.com/compose/how-tos/networking/).
+
+ + ### 2. Start the OpenRemote stack + Open a terminal in the folder you downloaded the `docker-compose.yml` file in, and run the following command; + ```bash + docker-compose -p openremote up -d + ``` +
+ + ### Complete! + You can now visit the Manager UI on **https://localhost**, and log in with username `admin`, and password `secret`.
+ + + It is referring to an self-signed SSL certificate that needs to be accepted, as we're running a local demo version.
+ You can bypass this error, see more information on this [here](https://www.guidingtech.com/top-ways-to-fix-your-connection-is-not-private-in-chrome/). + + For a production deployment, with an SSL certificate, check the [production guide](./using-docker?install=production) +
+
+ +
+ + OpenRemote Production demo + *Figure 2. Screenshot of the Manager UI Insights page filled with simulated data.* + + This guide will help you setting up a production-ready OpenRemote instance, together with an included proxy service.
+ It comes without any pre-installed assets or realms, and includes minor tweaks to optimize for production use.
+
+ + ### 1. Download the `docker-compose.yml` file + + docker-compose.yml + +
+ By default, we expose port `80` (HTTP), `443` (HTTPS) and `8883` (MQTT) to the local network.
+ Make sure the correct firewall routing is set up for public access on these ports.
+ Alternatively, you can adjust port mapping within the `docker-compose.yml` file; see [here](https://docs.docker.com/compose/how-tos/networking/).
+
+ + ### 2. Create an `.env` file in the same folder + You can configure the OpenRemote instance using environment variables.
+ We create an `.env` file, where we add variables in `ENV_VARIABLE=VALUE` format. See this example here; + ```env + OR_HOSTNAME=demo.openremote.app + OR_ADMIN_PASSWORD=secret + ``` + The most common environment variables are: + - `OR_HOSTNAME` - Configures the accessible hostname URL for all services. + - `OR_ADMIN_PASSWORD` - Sets the initial password for the `admin` username. + - `OR_EMAIL_***` - Configures the mail server to send emails from; full list [here](https://github.com/openremote/openremote/blob/1.3.0/profile/deploy.yml#L172). + - `OR_ADDITIONAL_HOSTNAMES` - Allow additional hostname URLs on top of `OR_HOSTNAME`. + + A full list of variables can be viewed [here](https://github.com/openremote/openremote/blob/1.3.0/profile/deploy.yml).
+
+ + ### 3. Optional steps +
+ Configure a wildcard SSL certificate for your custom domain + + By default, we ship a self-signed SSL certificate based on the `OR_HOSTNAME` environment variable.
+ You can bring your own by including the full certificate chain in a `.pem` file.
+ + Place your `.pem` file in the same folder as your `docker-compose.yml` is located.
+ + After that, you need to modify the `docker-compose.yml` file, to include the following line; + ```yml + services: + proxy: + image: openremote/proxy:${PROXY_VERSION:-latest} + // ... + volumes: + - proxy-data:/deployment + - ./cert.pem:/etc/haproxy/certs/00-custom + ``` +
+
+ + ### 4. Start the OpenRemote stack + Open a terminal in the same folder, and run the following command; + ```bash + docker-compose -p openremote up -d + ``` +
+ + ### Complete! + You can now visit the Manager UI on **https://[yourhostname].com**, and log in with username `admin`, and your password.
+
+ +
+ + Work in progress + +
+ +## Frequently asked questions +
+ **Error:** "We are sorry... Invalid parameter: redirect_uri" + + This is a common error when using an unexpected URL to access the Manager.
+ By default, only `localhost` is accepted, and other hostnames are rejected from access.
+ + You can use the `OR_HOSTNAME` and `OR_ADDITIONAL_HOSTNAMES` environment variables for this.
+ Check Step 2 of the [Production ready guide](./using-docker?install=production#2-create-an-env-file-in-the-same-folder) for more details on setting these up. +
+ +If your question is not listed, feel free to ask on our [community forum](https://forum.openremote.io)! + +## Up next + +
+ + Manager UI Guide + Learn more about the User Interface + + + Custom Deployment + Style the Manager UI to your brand + +
\ No newline at end of file diff --git a/docs/how-to-install/using-kubernetes.mdx b/docs/how-to-install/using-kubernetes.mdx new file mode 100644 index 0000000..21bca47 --- /dev/null +++ b/docs/how-to-install/using-kubernetes.mdx @@ -0,0 +1,9 @@ +--- +sidebar_position: 2 +sidebar_label: Using Kubernetes +unlisted: true +--- + +# Install using Kubernetes + +WIP \ No newline at end of file diff --git a/docs/how-to-install/using-openremote-cli.mdx b/docs/how-to-install/using-openremote-cli.mdx new file mode 100644 index 0000000..d735d62 --- /dev/null +++ b/docs/how-to-install/using-openremote-cli.mdx @@ -0,0 +1,9 @@ +--- +sidebar_position: 3 +sidebar_label: Using the OpenRemote CLI +unlisted: true +--- + +# Install using OpenRemote CLI + +WIP \ No newline at end of file diff --git a/docs/util/card-element.jsx b/docs/util/card-element.jsx new file mode 100644 index 0000000..ff197a2 --- /dev/null +++ b/docs/util/card-element.jsx @@ -0,0 +1,18 @@ +import styles from './util.module.css'; + +export const CardElement = ({prefix: PrefixIcon, suffix: SuffixIcon, children, url, wide}) => ( + + {PrefixIcon && } +
+
+ {children?.length ? children[0] : children} +
+ {children?.length && +
+ {children[1]} +
+ } +
+ {SuffixIcon && } +
+); \ No newline at end of file diff --git a/docs/util/util.module.css b/docs/util/util.module.css new file mode 100644 index 0000000..0360fb8 --- /dev/null +++ b/docs/util/util.module.css @@ -0,0 +1,57 @@ +html[data-theme='dark'] .card_container { + background-color: var(--ifm-color-secondary); +} + +.card_container { + display: flex; + align-items: center; + gap: 12px; + background-color: var(--ifm-color-secondary-lightest); + transition: background-color var(--ifm-transition-fast) var(--ifm-transition-timing-default); + padding: 16px 24px; + border-left: 4px solid var(--ifm-color-primary); + border-radius: 2px; + cursor: pointer; + text-decoration: none; +} + +html[data-theme='dark'] .card_container:hover { + background-color: var(--ifm-color-secondary-light); +} + +.card_container:hover { + background-color: var(--ifm-color-secondary-dark); + text-decoration: none; +} + +.card_container > .card_icon_prefix { + color: var(--ifm-color-content); + height: 24px; +} + +.card_container > .card_icon_suffix { + color: var(--ifm-color-content); + margin-left: 48px; + height: 24px; +} + +.card_container > .card_content { + flex: 1; +} + +.card_content { + display: flex; + flex-direction: column; +} + +.card_content > .card_title { + font-size: 20px; + font-weight: bold; + color: var(--ifm-color-content); +} + +.card_content > .card_subtitle { + font-size: 14px; + font-weight: 400; + color: var(--ifm-color-content); +} \ No newline at end of file diff --git a/docusaurus.config.ts b/docusaurus.config.ts index b7e6611..74b3e94 100644 --- a/docusaurus.config.ts +++ b/docusaurus.config.ts @@ -2,6 +2,7 @@ import type {Config} from '@docusaurus/types'; import type * as Preset from '@docusaurus/preset-classic'; import type * as Plugin from "@docusaurus/types/src/plugin"; import type * as OpenApiPlugin from "docusaurus-plugin-openapi-docs"; +import {themes as prismThemes} from 'prism-react-renderer'; const config: Config = { title: 'OpenRemote Documentation', @@ -47,7 +48,7 @@ const config: Config = { theme: { customCss: [ './src/css/styles.css', - './src/css/openapi-docs.css', + './src/css/openapi-docs.css' ] }, gtag: { @@ -240,6 +241,8 @@ const config: Config = { ], prism: { additionalLanguages: ['bash', 'cpp', 'csharp', 'docker', 'groovy', 'java', 'javascript', 'json', 'python', 'ruby'], + theme: prismThemes.github, + darkTheme: prismThemes.dracula }, algolia: { apiKey: '18c8ff9992cf5a0b37acb9b008fa7cd9', diff --git a/sidebars.ts b/sidebars.ts index a4f7ae3..b5aa9b9 100644 --- a/sidebars.ts +++ b/sidebars.ts @@ -16,6 +16,19 @@ const sidebars: SidebarsConfig = { docsSidebar: [ 'introduction', 'quick-start', + { + type: "category", + label: "How to install", + link: { + type: "generated-index", + }, + items: [ + { + type: 'autogenerated', + dirName: 'how-to-install', + }, + ] + }, { type: "category", label: "User Guide", diff --git a/src/css/styles.css b/src/css/styles.css index 4ed375b..139d069 100644 --- a/src/css/styles.css +++ b/src/css/styles.css @@ -7,13 +7,18 @@ /* You can override the default Infima variables here. */ :root { --ifm-color-primary: #2e8555; + --ifm-color-primary-rgb: 46, 133, 85; --ifm-color-primary-dark: #29784c; --ifm-color-primary-darker: #277148; --ifm-color-primary-darkest: #205d3b; --ifm-color-primary-light: #33925d; --ifm-color-primary-lighter: #359962; --ifm-color-primary-lightest: #3cad6e; + --ifm-color-secondary-lightest: rgb(246, 248, 250); --ifm-code-font-size: 95%; + --ifm-color-info-dark: var(--ifm-color-primary); + --ifm-color-info-contrast-foreground: var(--ifm-color-content); + --ifm-color-info-contrast-background: var(--ifm-color-secondary-lightest); /*rgba(var(--ifm-color-primary-rgb), 0.07);*/ --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1); } @@ -26,6 +31,14 @@ --ifm-color-primary-light: #29d5b0; --ifm-color-primary-lighter: #32d8b4; --ifm-color-primary-lightest: #4fddbf; + --ifm-color-secondary: rgb(40, 42, 54); + --ifm-color-secondary-dark: #242631; + --ifm-color-secondary-darker: #20222b; + --ifm-color-secondary-darkest: #1c1d26; + --ifm-color-secondary-light: #3e3f4a; + --ifm-color-secondary-lighter: #53555e; + --ifm-color-secondary-lightest: #696a72; + --ifm-color-info-contrast-background: var(--ifm-color-secondary) !important; --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3); } diff --git a/static/icon/chevron-right.svg b/static/icon/chevron-right.svg new file mode 100644 index 0000000..27be400 --- /dev/null +++ b/static/icon/chevron-right.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/icon/console.svg b/static/icon/console.svg new file mode 100644 index 0000000..b68678f --- /dev/null +++ b/static/icon/console.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/icon/docker-mark-blue.svg b/static/icon/docker-mark-blue.svg new file mode 100644 index 0000000..eba6cc4 --- /dev/null +++ b/static/icon/docker-mark-blue.svg @@ -0,0 +1,12 @@ + + + + + + + \ No newline at end of file diff --git a/static/icon/download.svg b/static/icon/download.svg new file mode 100644 index 0000000..9c00317 --- /dev/null +++ b/static/icon/download.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/icon/open-in-new.svg b/static/icon/open-in-new.svg new file mode 100644 index 0000000..c6e365e --- /dev/null +++ b/static/icon/open-in-new.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/static/icon/openremote.svg b/static/icon/openremote.svg new file mode 100644 index 0000000..aa28822 --- /dev/null +++ b/static/icon/openremote.svg @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file diff --git a/static/icon/package-variant-closed.svg b/static/icon/package-variant-closed.svg new file mode 100644 index 0000000..c042e29 --- /dev/null +++ b/static/icon/package-variant-closed.svg @@ -0,0 +1,4 @@ + + + \ No newline at end of file diff --git a/static/icon/remote-desktop.svg b/static/icon/remote-desktop.svg new file mode 100644 index 0000000..f3f3936 --- /dev/null +++ b/static/icon/remote-desktop.svg @@ -0,0 +1,4 @@ + + + \ No newline at end of file diff --git a/static/icon/tools.svg b/static/icon/tools.svg new file mode 100644 index 0000000..ecb950e --- /dev/null +++ b/static/icon/tools.svg @@ -0,0 +1,4 @@ + + + \ No newline at end of file diff --git a/static/img/insights-dashboard.png b/static/img/insights-dashboard.png new file mode 100644 index 0000000..958da89 Binary files /dev/null and b/static/img/insights-dashboard.png differ diff --git a/static/img/install-demo.png b/static/img/install-demo.png new file mode 100644 index 0000000..d429d18 Binary files /dev/null and b/static/img/install-demo.png differ