add initial documentation files

README.md

@@ -0,0 +1,41 @@
+# Website
+
+This website is built using [Docusaurus](https://docusaurus.io/), a modern static website generator.
+
+### Installation
+
+```
+$ yarn
+```
+
+### Local Development
+
+```
+$ yarn start
+```
+
+This command starts a local development server and opens up a browser window. Most changes are reflected live without having to restart the server.
+
+### Build
+
+```
+$ yarn build
+```
+
+This command generates static content into the `build` directory and can be served using any static contents hosting service.
+
+### Deployment
+
+Using SSH:
+
+```
+$ USE_SSH=true yarn deploy
+```
+
+Not using SSH:
+
+```
+$ GIT_USER=<Your GitHub username> yarn deploy
+```
+
+If you are using GitHub pages for hosting, this command is a convenient way to build the website and push to the `gh-pages` branch.

babel.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  presets: [require.resolve('@docusaurus/core/lib/babel/preset')],
+};

docs/analytics/_category_.json

@@ -0,0 +1,9 @@
+{
+    "label": "Analytics",
+    "position": 4,
+    "link": {
+      "type": "generated-index",
+      "description": "How to add your own Google Analytics account"
+    }
+}
+

docs/analytics/add-your-own-analytics-account.md

@@ -0,0 +1,23 @@
+---
+sidebar_position: 1
+---
+
+# Add your own Google Analytics account
+
+Website Pro has a built-in dashboard that displays highlights of your site’s visitor information using [Google Analytics.](https://www.google.com/analytics/analytics/) However, we understand that you may want to dig deeper using your own account. That’s why Website Pro provides an easy way to do just that.
+
+_Note: Plugins meant to support Google Analytics are available, but these often fail to track gather data in the Website Pro environment._ 
+
+1.  [Sign up](https://analytics.google.com/analytics/web/) for Google Analytics and configure it for your site, or just log in if you’ve already completed that step.
+2.  Click [Admin](https://support.google.com/analytics/answer/6132368)
+3.  Select your site’s account from the menu in the _ACCOUNT_ column
+4.  Select a property from the menu in the _PROPERTY_ column
+5.  Under _PROPERTY_, click **Tracking Info > Tracking Code**. Your [tracking ID](https://support.google.com/analytics/answer/7372977) is displayed at the top of the page
+6.  Copy that Tracking ID
+7.  Sign into to your Website Pro site’s WordPress admin panel
+8.  Navigate to **Settings > General Code** and scroll to the bottom
+9.  Paste that Tracking ID into the **Custom Google Analytics Tracking ID** and click **Save Changes**
+
+Please keep in mind that this ID will run concurrently with Website Pro’s built-in analytic tracking, which will remain on the Website Pro dashboard.
+
+![Under "Settings > General" you can enter a Google Analytics Tracking ID connected to your own Google Analytics Account.](/img/smaller_GA_tracking_id.png)

docs/divi-builder/_category_.json

@@ -0,0 +1,9 @@
+{
+    "label": "Divi Builder",
+    "position": 2,
+    "link": {
+      "type": "generated-index",
+      "description": "Edit your site with the Divi Builder"
+    }
+}
+

docs/divi-builder/edit-your-site-with-divi-builder.md

@@ -0,0 +1,94 @@
+---
+sidebar_position: 1
+---
+
+# Edit your site with Divi Builder
+Getting your business up and selling is possible with Website Pro. This powerful product allows you to quickly and easily create a website and online store powered by WordPress and WooCommerce. To make the transition to ecommerce seamless, we also have a visual builder, called Divi Builder, within every Website Pro account. This allows you to design and create beautiful websites without having to write a single line of code. 
+
+Before we jump in, let’s make sure we’re familiar with Divi Builder.
+
+<iframe width="795" height="315" src="https://www.youtube.com/embed/q9XI0Lo-SWE?si=PoxWAbFQBiDS4Mut" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
+
+Divi Builder is a WordPress plugin that allows you to insert, remove, and edit content blocks on the front end of your website. It boasts unlimited layout possibilities, and its fluid content areas are perfect for a responsive design approach. It allows those site owners with little or no design, or development experience, to create beautiful sites, with a simple drag and drop interface.
+
+Let’s start editing your website using Divi Builder! 
+
+Accessing Divi Builder
+----------------------
+
+On the Website Express/Pro dashboard, there is a button, “**Edit My Site**“. Click it to start editing the front end, or the content of your website.
+
+<video width="795" height="448" controls>
+  <source src="/video/Jumping-into-Divi-Builder.mp4" type="video/mp4" />
+  Your browser does not support the video tag.
+</video>
+
+
+Editing text and images on your website
+-----------------------------------------------------------------------------------------------------------
+
+*   It’s time to customize your site! Let’s start with text elements. Click on the text box you’d like to edit and start making changes.
+*   Alternatively, when you hover over an element, a small dark toolbar will appear. Click on the **gear icon** to pull up a window that provides more options for editing and customization. Click on the window’s green checkmark to save any changes.
+
+![](/img/text-settings.png)
+
+*   This same process also works with any buttons on the page. However, as buttons have more options, you’ll need to open the editing modal to further customize it. You can do this by double-clicking the button, or opening it by clicking the gear icon in the same way that you did with the text box.
+*   Now it’s time for images! Many templates will have a large picture set as the background or banner across the top of the website. To change the image, simply hover over it (while not interfering with text or other elements) and double-click. An editing modal should pop up. Click on the “**Background”** section. Your current background image should be showing. Click the garbage can icon to delete the placeholder image and then click “**Add image**”. You can either drag the image from a file on your computer or click to browse your files. 
+
+![](/img/section-settings.png)
+
+*   To edit other images on the site, simply double-click the image and replace it with your own. 
+
+<video width="795" height="448" controls>
+  <source src="/video/Editing-text-and-images.mp4" type="video/mp4" />
+  Your browser does not support the video tag.
+</video>
+
+Adding and removing elements on your website
+--------------------------------------------
+
+*   If there are any elements (text blocks, images, etc.) that you don’t want on your website, simply hover over the element and select the garbage can icon.
+*   If you want to add elements to your page, either:
+    *   Hover over the area you’d like to add an element and click the grey “+”,
+    *   Hover over the element above the spot you’d like your new element to be placed, and look for a green “+”. _You may have to actually click on the element above for it to appear_. 
+
+![](/img/elements.png)
+
+*   This will bring up an “**add row**” selector with different options as to the number of columns in your new element. Perhaps you would like three blocks of text side-by-side? Choose the row with three columns. Maybe a wide picture on the right and a narrow text box on the left? Choose the row that shows the corresponding spacing. Just want something to go straight across your entire page? Simply choose the first option available, the one with a single column.
+*   A window will appear with several different element options. Search for the **Image** option to add a picture, the **Text** option for adding text, or browse to see what other options are available.
+
+<video width="795" height="448" controls>
+  <source src="/video/Adding_Deleting-Elements.mp4" type="video/mp4" />
+  Your browser does not support the video tag.
+</video>
+
+Saving your work and moving on to edit another page
+---------------------------------------------------
+
+*   Once you’re happy with how your website looks, or every so often along the way, you’ll want to save your progress. Look for the purple icon with three dots at the bottom of your page and click it. The icon should multiply and you’ll now have several purple icons. You’ll also have a green “**Save**” button in the bottom right corner. Click it to save your changes.
+*   To edit another page (_ex. the Shop page_), click “**Exit Visual Builder**” at the top of your page. Once you’ve done so, you’ll see your page exactly as your customers will see it. Next, navigate to the page you’d like to edit next and then re-enable the visual builder using the button at the top of the screen. 
+
+<video width="795" height="448" controls>
+  <source src="/video/Saving-your-work.mp4" type="video/mp4" />
+  Your browser does not support the video tag.
+</video>
+
+Changing the logo and contact information on your website
+---------------------------------------------------------
+
+*   To change the logo and contact information in the top bar of the website you will need to navigate to the **WordPress Dashboard**. Click the name of your business in the top left corner of the screen. Once in your WordPress dashboard, in the left navigation bar click the Divi tab (towards the bottom of the side navigation menu). 
+*   You are now on the **General Divi Settings tab**. The top row is where you are able to change the logo. Click the “Upload” button.
+
+*   Once you’ve uploaded your logo, scroll all the way to the bottom of the page and click the green “**Save changes**” button.
+*   Next, we’ll input your business’ contact information. Back in the left navigation. You may notice that the Divi Builder tab has extended to include several sub-headings. Click on “**Theme Customizer**”.
+*   A new page will load. This is an alternative editor. Click on the “**Header and Navigation**” section, and then “**Header Elements**”. The navigation bar should now contain two text bars for you to insert your business’ information.
+*   Click the blue “**Publish**” button at the top of the page to save your changes to your webpage.
+
+<video width="795" height="448" controls>
+  <source src="/video/Changing-the-logo.mp4" type="video/mp4" />
+  Your browser does not support the video tag.
+</video>
+
+**Congratulations, you now have the knowledge you need to edit your website!**
+
+_[WooCommerce](https://docs.woocommerce.com/) and [Divi Builder](https://www.elegantthemes.com/blog/theme-releases/divi-3)_ _have extensive documentation and tutorials on how to set up, edit, manage, and operate your store._

docs/divi-builder/troubleshooting.md

@@ -0,0 +1,18 @@
+---
+sidebar_position: 2
+---
+
+# Troubleshooting: CSS changes not updating
+Problem
+-------
+
+The Divi theme provides a lot of very powerful features, including a visual editor mode allowing you to drag and drop page elements. Newer versions of Divi generate static CSS files (and possibly other files) by default. This means that while making edits to a site using newer versions of Divi that have the **Static CSS File Generation** setting turned on, the changes won’t be made live immediately.
+
+Solution
+--------
+
+To solve this problem, you will need to turn the static file generation off. The following blog on Divi’s site provides a more thorough explanation of this feature:
+
+https://www.elegantthemes.com/blog/theme-releases/divi-performance-enhancement-introducing-static-css-file-generation-for-divi
+
+Enabling this feature after you are done developing or making edits will increase performance because the files can be served statically rather than on request.

docs/gettingstarted.md

@@ -0,0 +1,48 @@
+---
+id: gettingstarted
+title: Getting Started
+sidebar_label: Getting Started
+sidebar_position: 1
+sidebar_exclude: true  // This line instructs Docusaurus to exclude it from the autogenerated
+---
+
+# Getting Started
+
+Welcome to your quick start guide for setting up your website! Whether you’re looking to build a new site from scratch or import an existing site, follow these step-by-step instructions to get your website up and running smoothly.
+
+All of these templates come installed with WooCommerce and Divi Builder. 
+
+## Select a Template
+
+1. **Pick a starting point**: Explore the variety of templates offered. These templates are tailored to various business needs and aesthetics. Take your time to browse through the gallery to find one that aligns with your vision.
+
+2. **Choose a domain**: After initiating your website setup, you will need to define some key elements that identify your website:
+
+- **Site Name**: This is the name that appears at the top of your browser window or tab and is often the same as your business name. Choose a name that reflects your business and is easily recognizable.
+
+- **Business Tagline**: A tagline is a short phrase or sentence that summarizes your business's mission or the services you offer. It helps visitors understand what your business does at a glance.
+
+- **Domain**: While you will be provided with a default domain hosted at `websitepro.hosting`, you have the option to customize your domain. A custom domain looks more professional and is easier for customers to remember. If you decide to use a custom domain, you'll need to register it through a domain registrar or check if it can be managed directly through your website platform.
+
+3. **Launch your site**: Your site will be setup and when complete you will be directed to the admin dashboard. 
+
+## Import an Existing Site
+
+To import a website, you first need to create a placeholder website. Once the site is created, select 'Import' from the side navigation menu and follow these steps:
+
+1. We recommend you upgrade the WordPress core, all plugins, and all themes before importing. Older versions of some plugins are incompatible with PHP 7 and might prevent your site from working properly in the new environment.
+
+2. Install and activate the [All-in-One WP Migration Plugin](https://en-ca.wordpress.org/plugins/all-in-one-wp-migration/)
+ on both your new and existing websites.
+
+3. Use the All-in-One WP Migration plugin to export your old site. This plugin will export your entire WordPress site, including the database, media, plugins, and themes.
+
+```
+All-in-One WP Migration > Export > Export To > File > Save File
+```
+
+4. Use the All-in-One WP Migration plugin to import on your new site.
+
+```
+All-in-One WP Migration > Import > Import From > File > Select file exported from old site
+```

docs/web-chat-widget/_category_.json

@@ -0,0 +1,8 @@
+{
+    "label": "Web Chat Widget",
+    "position": 4,
+    "link": {
+      "type": "generated-index",
+      "description": "Inbox Pro web chat widget installation and troubleshooting"
+    }
+}