diff --git a/.github/workflows/mkdocs.yml b/.github/workflows/mkdocs.yml index af7d57df..e090fa81 100644 --- a/.github/workflows/mkdocs.yml +++ b/.github/workflows/mkdocs.yml @@ -1,21 +1,74 @@ name: Build & Deploy Docs on: push: - branches: - - master - paths: - - 'docs/**' - - 'mkdocs.yml' + # To trigger the workflow once you push to the `main` branch + # Replace `main` with your branch’s name + branches: ["main"] + # Specify to run a workflow manually from the Actions tab on GitHub + workflow_dispatch: + +permissions: + id-token: write + pages: write + +env: + # Name of module and id separated by a slash + INSTANCE: Writerside/fd + # Replace XX with the ID of the instance in capital letters + ARTIFACT: webHelpFD2-all.zip + # Docker image version + DOCKER_VERSION: 241.15989 jobs: build: - name: Deploy docs runs-on: ubuntu-latest + + steps: + - name: Checkout repository + uses: actions/checkout@v4 + with: + fetch-depth: 0 + + - name: Build Writerside docs using Docker + uses: JetBrains/writerside-github-action@v4 + with: + instance: ${{ env.INSTANCE }} + artifact: ${{ env.ARTIFACT }} + docker-version: ${{ env.DOCKER_VERSION }} + + - name: Upload artifact + uses: actions/upload-artifact@v4 + with: + name: docs + path: | + artifacts/${{ env.ARTIFACT }} + retention-days: 7 + + deploy: + environment: + name: github-pages + url: ${{ steps.deployment.outputs.page_url }} + # Requires build job results + needs: build + runs-on: ubuntu-latest + steps: - - name: Checkout master - uses: actions/checkout@v1 + - name: Download artifact + uses: actions/download-artifact@v4 + with: + name: docs + + - name: Unzip artifact + run: unzip -O UTF-8 -qq ${{ env.ARTIFACT }} -d dir + + - name: Setup Pages + uses: actions/configure-pages@v4.0.0 + + - name: Upload artifact + uses: actions/upload-pages-artifact@v3.0.1 + with: + path: dir - - name: Deploy docs - uses: mhausenblas/mkdocs-deploy-gh-pages@master - env: - GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} + - name: Deploy to GitHub Pages + id: deployment + uses: actions/deploy-pages@v4.0.4 diff --git a/Writerside/c.list b/Writerside/c.list new file mode 100644 index 00000000..c4c77a29 --- /dev/null +++ b/Writerside/c.list @@ -0,0 +1,6 @@ + + + + + \ No newline at end of file diff --git a/Writerside/cfg/buildprofiles.xml b/Writerside/cfg/buildprofiles.xml new file mode 100644 index 00000000..5404e8ec --- /dev/null +++ b/Writerside/cfg/buildprofiles.xml @@ -0,0 +1,12 @@ + + + + + + + true + + + + diff --git a/Writerside/fd.tree b/Writerside/fd.tree new file mode 100644 index 00000000..75d6c9b5 --- /dev/null +++ b/Writerside/fd.tree @@ -0,0 +1,71 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/docs/media/ace_integration_dialog.png b/Writerside/images/media/ace_integration_dialog.png similarity index 100% rename from docs/media/ace_integration_dialog.png rename to Writerside/images/media/ace_integration_dialog.png diff --git a/docs/media/basic-use-2.mp4 b/Writerside/images/media/basic-use-2.mp4 similarity index 100% rename from docs/media/basic-use-2.mp4 rename to Writerside/images/media/basic-use-2.mp4 diff --git a/docs/media/basic-use.mp4 b/Writerside/images/media/basic-use.mp4 similarity index 100% rename from docs/media/basic-use.mp4 rename to Writerside/images/media/basic-use.mp4 diff --git a/docs/media/create-element.png b/Writerside/images/media/create-element.png similarity index 100% rename from docs/media/create-element.png rename to Writerside/images/media/create-element.png diff --git a/docs/media/fred-in-use.png b/Writerside/images/media/fred-in-use.png similarity index 100% rename from docs/media/fred-in-use.png rename to Writerside/images/media/fred-in-use.png diff --git a/docs/media/fred-loaded.png b/Writerside/images/media/fred-loaded.png similarity index 100% rename from docs/media/fred-loaded.png rename to Writerside/images/media/fred-loaded.png diff --git a/docs/media/fred-overview.png b/Writerside/images/media/fred-overview.png similarity index 100% rename from docs/media/fred-overview.png rename to Writerside/images/media/fred-overview.png diff --git a/docs/media/fred-sidebar.png b/Writerside/images/media/fred-sidebar.png similarity index 100% rename from docs/media/fred-sidebar.png rename to Writerside/images/media/fred-sidebar.png diff --git a/docs/media/front-end-element.png b/Writerside/images/media/front-end-element.png similarity index 100% rename from docs/media/front-end-element.png rename to Writerside/images/media/front-end-element.png diff --git a/docs/media/toolbar.png b/Writerside/images/media/toolbar.png similarity index 100% rename from docs/media/toolbar.png rename to Writerside/images/media/toolbar.png diff --git a/docs/themer/cmp/img/categories_grid.png b/Writerside/images/themer/cmp/img/categories_grid.png similarity index 100% rename from docs/themer/cmp/img/categories_grid.png rename to Writerside/images/themer/cmp/img/categories_grid.png diff --git a/docs/themer/cmp/img/element_panel.png b/Writerside/images/themer/cmp/img/element_panel.png similarity index 100% rename from docs/themer/cmp/img/element_panel.png rename to Writerside/images/themer/cmp/img/element_panel.png diff --git a/docs/themer/cmp/img/element_panel_options.png b/Writerside/images/themer/cmp/img/element_panel_options.png similarity index 100% rename from docs/themer/cmp/img/element_panel_options.png rename to Writerside/images/themer/cmp/img/element_panel_options.png diff --git a/docs/themer/cmp/img/media-sources.png b/Writerside/images/themer/cmp/img/media-sources.png similarity index 100% rename from docs/themer/cmp/img/media-sources.png rename to Writerside/images/themer/cmp/img/media-sources.png diff --git a/docs/themer/cmp/img/option_sets_edit_panel.png b/Writerside/images/themer/cmp/img/option_sets_edit_panel.png similarity index 100% rename from docs/themer/cmp/img/option_sets_edit_panel.png rename to Writerside/images/themer/cmp/img/option_sets_edit_panel.png diff --git a/docs/themer/cmp/img/option_sets_grid.png b/Writerside/images/themer/cmp/img/option_sets_grid.png similarity index 100% rename from docs/themer/cmp/img/option_sets_grid.png rename to Writerside/images/themer/cmp/img/option_sets_grid.png diff --git a/docs/themer/cmp/img/rte_configs_grid.png b/Writerside/images/themer/cmp/img/rte_configs_grid.png similarity index 100% rename from docs/themer/cmp/img/rte_configs_grid.png rename to Writerside/images/themer/cmp/img/rte_configs_grid.png diff --git a/docs/themer/cmp/img/update-media-source.png b/Writerside/images/themer/cmp/img/update-media-source.png similarity index 100% rename from docs/themer/cmp/img/update-media-source.png rename to Writerside/images/themer/cmp/img/update-media-source.png diff --git a/docs/blueprints.md b/Writerside/topics/blueprints.md similarity index 100% rename from docs/blueprints.md rename to Writerside/topics/blueprints.md diff --git a/docs/collab/index.md b/Writerside/topics/collab/collab_index.md similarity index 92% rename from docs/collab/index.md rename to Writerside/topics/collab/collab_index.md index 9e2b7fac..f997e795 100644 --- a/docs/collab/index.md +++ b/Writerside/topics/collab/collab_index.md @@ -9,7 +9,7 @@ Collaborating on Themes can be a great way to build a robust solution you can sh ## The Simple Way -The easiest way to collaborate on a Theme is to simply invite a group of people to a site and to have them work away. [Export your Theme](../themer/cmp/themes) when your happy with the results, and you’re done! +The easiest way to collaborate on a Theme is to simply invite a group of people to a site and to have them work away. [Export your Theme](themes.md) when your happy with the results, and you’re done! ## The “Right” Way diff --git a/docs/collab/gitify.md b/Writerside/topics/collab/gitify.md similarity index 94% rename from docs/collab/gitify.md rename to Writerside/topics/collab/gitify.md index 6ec8e0ce..4f12d429 100644 --- a/docs/collab/gitify.md +++ b/Writerside/topics/collab/gitify.md @@ -18,7 +18,7 @@ Start by creating a blank MODX instance using the latest version. You’ll also Once the instance is created, `ssh` into it and execute the following commands starting in the home directory. This will install Composer and copy Gitify to your site. -```plain +```bash cd www; curl http://modx.co/scripts/install.sh | sh mkdir ../gitify; cd ../gitify git clone https://github.com/modmore/Gitify.git ./ @@ -30,7 +30,7 @@ Now exit the SSH session, and log back in so you can use Composer. Alternately, From an SSH connection in the Cloud home directory: -```plain +```bash cd ~/gitify composer install chmod +x Gitify; cd ~/.bin; ln -s ../gitify/Gitify gitify @@ -48,20 +48,20 @@ To start a new Theme project, see the [Setting up a Theme to work with Gitify](i Because you cannot `git clone` into a directory with anything in it, we’ll use a temporary location and move the files to the web root. To get the URL to clone, click the down-arrow on the green `Clone or download` button on a Theme Github project and copy the SSH URL which looks like `git@github.com:modxcms/fred-theme-starter.git` -```plain +```bash cd ~/www git clone git@github.com:modxcms/fred-theme-starter.git tmp ``` This will download the theme repository into a `~/www/tmp/` directory in the Cloud. Next, move the contents of `tmp/` to the correct location under `www/`: -```plain +```bash rsync -av ./tmp ./ ``` Make sure the `.git/` directory and files are move under `www/`. Once you confirm things are in the right place, go ahead and remove `tmp/`: -```plain +```bash rm -rf ./tmp ``` @@ -69,13 +69,13 @@ rm -rf ./tmp Now it’s time to load the Theme into your MODX instance. This will most likely include several Extras and take a a minute or longer depending on the speed of your connection. You’ll see messages about downloading and installing Extras during this process: -```plain +```bash cd ~/www gitify package:install --all gitify build ``` -You should see a green one-word message `Done!` if the install is successful, and the same but with memory and timing stats if the build is successful. +You should see a green one-word message `Done!` if the installation is successful, and the same but with memory and timing stats if the build is successful. ### Step 6: Login to the Manager to view your Theme diff --git a/docs/collab/gitify_in_action.md b/Writerside/topics/collab/gitify_in_action.md similarity index 98% rename from docs/collab/gitify_in_action.md rename to Writerside/topics/collab/gitify_in_action.md index 99bf44b3..2e13eab4 100644 --- a/docs/collab/gitify_in_action.md +++ b/Writerside/topics/collab/gitify_in_action.md @@ -12,7 +12,7 @@ For the purpose of this tutorial, we’ll assume all users can commit directly t It’s critical to make sure that you don’t lose work when collaborating with a team. To prevent accidental overwrites, always perform the following before pulling from or pushing to the orign repository. -```plain +```bash cd ~/www gitify extract git status @@ -26,7 +26,7 @@ This step and step 4 below can be skipped if ther are no changes to commit. If you do have changes, first commit them to your local repository before continuing: -```plain +```bash git add --all # or git add on files you want to commit git commit -m "Your commit message here" # please write your own message ``` @@ -35,7 +35,7 @@ git commit -m "Your commit message here" # please write your own message Now it is time to sync all the latest updates from the upstream origin repository. From webroot, enter the following command: -```plain +```bash git pull origin master ``` @@ -43,7 +43,7 @@ This may result in conflicts that will be noted. If there are conflicts, they mu Once you resolve conflicts, or after you have pulled from the origin, build the changes and make sure everything is functioning as expected in MODX: -```plain +```bash gitify package:install --all gitify build ``` @@ -54,7 +54,7 @@ If you are only pulling remote changes, skip this step as in step 2 above. Now you can safely push your changes. You’ll see messages about Extracting various Fred-related things. If you delay pushing your changes, you may see an error message about (new) conflicts due to other collaborators pushing changes before you: -```plain +```bash git push origin master ``` diff --git a/docs/collab/initial_extract.md b/Writerside/topics/collab/initial_extract.md similarity index 99% rename from docs/collab/initial_extract.md rename to Writerside/topics/collab/initial_extract.md index 2e79e23e..33d1fc4d 100644 --- a/docs/collab/initial_extract.md +++ b/Writerside/topics/collab/initial_extract.md @@ -8,7 +8,7 @@ Note the URL for this project, by clicking the down-arrow on the green `Clone or SSH into your Cloud, and switch to the `www/` webroot directory. Then initialize git with the following command, using the SSH URL from above: -```plain +```bash git init git remote add origin git@github.com:your_name/example_theme.git ``` @@ -17,7 +17,7 @@ git remote add origin git@github.com:your_name/example_theme.git Create a `.gitingnore` file to exclude MODX and other files that are not needed with the following content. Make sure to change `!/assets/themes/{{your-theme-name}}` to its actual name like `!/assets/themes/lightcoral`: -```plain +```text # MODX & Gitify # ################# /_backup @@ -95,7 +95,7 @@ This will instruct Gitify to include all Elements and categories, their Option S Now it’s time to push the code to the source repo. Once you’ve reached a point where you are ready to share and collaborate on a theme, execute the following: -```plain +```bash cd ~/www gitify extract git add --all # or git add on files you want to commit diff --git a/docs/collab/pr_workflow.md b/Writerside/topics/collab/pr_workflow.md similarity index 98% rename from docs/collab/pr_workflow.md rename to Writerside/topics/collab/pr_workflow.md index 90eca56f..c09cef0a 100644 --- a/docs/collab/pr_workflow.md +++ b/Writerside/topics/collab/pr_workflow.md @@ -18,14 +18,14 @@ Click the down-arrow on the green `Clone or download` button on a source Github Because `git clone` only works in empty directories, we’ll use a temporary `tmp/` directory and move the files to the web root when done. Open an SSH connection to your working Cloud instance and execute: -```plain +```bash cd ~/www git clone git@github.com:your_username/your-fork-name.git tmp ``` This will download the theme repository into a `~/www/tmp/` directory in the Cloud. Next, move the contents of `tmp/` to the correct location under `www/`: -```plain +```bash rsync -av ./tmp ./ ``` @@ -35,7 +35,7 @@ Make sure the `.git/` directory and files are moved under webroot `www/` directo This is the original project. Use its HTTPS clone URL from step 1 of this tutorial to set the remote upstream: -```plain +```bash git remote add upstream https://github.com/modxcms/fred-theme-starter.git ``` @@ -49,7 +49,7 @@ For the purposes of working with PRs, you should _never_ commit directly to your Before pushing any work to a feature branch, you should sync your local repository with the upstream. For more information on syncing forks see the [Syncing a fork](https://help.github.com/articles/syncing-a-fork/) guide: -```plain +```bash git checkout master git fetch upstream git merge --ff-only upstream/master # only merges if local is clean @@ -64,7 +64,7 @@ These commands are only needed when there is a differnce between the commit vers The following commands create your local feature branch, and commits them to the local git repo. -```plain +```bash cd ~/www git checkout -b my-feature # checkout to a new branch named `my-feature`, # or any other name you decide for your work @@ -75,7 +75,7 @@ git commit -m "My Changes" # Use a more reasonable commit message Next, we sync upstream master branch with your fork. -```plain +```bash git checkout master git fetch upstream git merge --ff-only upstream/master @@ -84,7 +84,7 @@ git push origin master Now, we sync the feature branch with any changes from the master branch of the fork from the previous merge step. -```plain +```bash git checkout my-feature # checkout your `my-feature` branch again git rebase master # this pulls from your forked master``` ``` @@ -93,14 +93,14 @@ This may result in conflicts that will be noted. If there are conflicts, they mu Finally, we build all the changes into your working MODX instance with Gitify. -```plain +```bash gitify package:install --all gitify build ``` Double check to make sure the Theme and the changes still work as expected. Then commit them to your Github fork, where it can then be submitted as a PR to the original upstream project: -```plain +```bash git push origin my-feature # push to your `my-feature` branch on Github to # submit as a PR, per the next section below git checkout master # return to the master branch to start your next diff --git a/docs/credits.md b/Writerside/topics/credits.md similarity index 100% rename from docs/credits.md rename to Writerside/topics/credits.md diff --git a/docs/developer/index.md b/Writerside/topics/developer/developer_index.md similarity index 100% rename from docs/developer/index.md rename to Writerside/topics/developer/developer_index.md diff --git a/docs/developer/modx_events.md b/Writerside/topics/developer/modx_events.md similarity index 94% rename from docs/developer/modx_events.md rename to Writerside/topics/developer/modx_events.md index 72b08ada..12f5f850 100644 --- a/docs/developer/modx_events.md +++ b/Writerside/topics/developer/modx_events.md @@ -18,7 +18,7 @@ $modx->event->_output = [ String of HTML markup that will get appended after Fred's CSS & JS file includes. -#### Example +#### Example {id="example_1"} ```php $includes = ' @@ -30,7 +30,7 @@ $includes = ' String of JS commands that will get added to Fred's `beforeRender` function. Could be used to register Fred plugins. -#### Example +#### Example {id="example_2"} ```php $beforeRender = ' @@ -42,7 +42,7 @@ $beforeRender = ' An array of additional lexicons that Fred should load. -#### Example +#### Example {id="example_3"} ```php $lexicons = ['fredrtetinymce:default']; @@ -52,7 +52,7 @@ $lexicons = ['fredrtetinymce:default']; String of JS commands that will get added to Fred's `modifyPermissions` function where `permissions` parameter is available as an object of all available permissions for the current user. -#### Example +#### Example {id="example_4"} ```php $modifyPermissions = ' diff --git a/docs/developer/sidebar_plugins.md b/Writerside/topics/developer/sidebar_plugins.md similarity index 97% rename from docs/developer/sidebar_plugins.md rename to Writerside/topics/developer/sidebar_plugins.md index 43f12399..ad5341a9 100644 --- a/docs/developer/sidebar_plugins.md +++ b/Writerside/topics/developer/sidebar_plugins.md @@ -23,7 +23,7 @@ To initialise your plugin start by creating an `init` function that will be call The `init` function must return a class that extends the SidebarPlugin. -### Example +### Example {id="example_1"} ```javascript var TestSidebarPluginInit = function(fred, SidebarPlugin, pluginTools) { @@ -99,14 +99,14 @@ The buttons registered to the sidebar are always added before the `More` button. When you have the `init` function returning your plugin's class, you need to register it for Fred by creating a MODX Plugin on the `[FredBeforeRender](/developer/modx_events#fredbeforerender)` event. -Include the JS file containing the init function using [includes](/developer/modx_events#includes) and registering the Plugin using [`beforeRender`](/developer/modx_events#beforerender). +Include the JS file containing the init function using [includes](modx_events.#includes) and registering the Plugin using [`beforeRender`](modx_events.#beforerender). To register the toolbar Plugin, you call the `registerSidebarPlugin` function from Fred with two arguments: - `name` - a unique name for your plugin. Fred cannot register multiple Plugins with the same name. - `init function` - the `TestSidebarPluginInit` function we created in [`Init function`](#init-function) step, above -### Example +### Example {id="example_2"} ```php $includes = ' diff --git a/docs/developer/toolbar_plugins.md b/Writerside/topics/developer/toolbar_plugins.md similarity index 96% rename from docs/developer/toolbar_plugins.md rename to Writerside/topics/developer/toolbar_plugins.md index dd8e9a5b..a15fb381 100644 --- a/docs/developer/toolbar_plugins.md +++ b/Writerside/topics/developer/toolbar_plugins.md @@ -2,7 +2,7 @@ Fred supports adding functionality to individual Elements by registering new buttons in the toolbar above each Element. -![Element Toolbar](/media/toolbar.png) +![Element Toolbar](toolbar.png) Plugins are distributed as MODX Transport Packages, which can be submitted to the [MODX Extras repository](https://modx.com/extras) or uploaded manually from the Installer inside the Manager. You can learn more about [how to build Transport Packages](https://docs.modx.com/revolution/2.x/case-studies-and-tutorials/developing-an-extra-in-modx-revolution) in the MODX Documentation, or use a tool like [Git Package Management](https://theboxer.github.io/Git-Package-Management/) to help create Transport Packages. @@ -25,7 +25,7 @@ To initialise your plugin start by creating an `init` function that will be call The `init` function must return a class that extends the ToolbarPlugin. -### Example +### Example {id="example_1"} ```javascript var TestToolbarPluginInit = function(fred, ToolbarPlugin, pluginTools) { @@ -76,7 +76,7 @@ The buttons registered to the toolbars are always added after the built-in defau ## Limiting Plugins for Elements -By default, all Toolbar Plugins will register for every Element. To specify the order and/or omit some plugins, modify an Element’s [Option Set](/themer/options/settings.md) setting to either include or exclude specific Fred Plugins with a `plugins-include` or `plugins-exclude` attribute. +By default, all Toolbar Plugins will register for every Element. To specify the order and/or omit some plugins, modify an Element’s [Option Set](option_sets.md) setting to either include or exclude specific Fred Plugins with a `plugins-include` or `plugins-exclude` attribute. **Note:** The plugins are unique names of the class created for the plugins. As a general rule, this should match the plugin name used for the MODX Package Provider. @@ -164,14 +164,14 @@ To prevent all Plugins from registering on an Element completely, specify an emp When you have the `init` function returning your plugin's class, you need to register it for Fred by creating a MODX Plugin on the `[FredBeforeRender](/developer/modx_events#fredbeforerender)` event. -Include the JS file containing the init function using [includes](/developer/modx_events#includes) and registering the Plugin using [`beforeRender`](/developer/modx_events#beforerender). +Include the JS file containing the init function using [includes](modx_events.md#includes) and registering the Plugin using [`beforeRender`](modx_events.md#beforerender). To register the toolbar Plugin, you call the `registerToolbarPlugin` function from Fred with two arguments: - `name` - a unique name for your plugin. Fred cannot register multiple Plugins with the same name. - `init function` - the `TestToolbarPluginInit` function we created in [`Init function`](#init-function) step, above -### Example +### Example {id="example_2"} ```php $includes = ' diff --git a/docs/elements.md b/Writerside/topics/elements.md similarity index 93% rename from docs/elements.md rename to Writerside/topics/elements.md index 90dc431a..cc5c8018 100644 --- a/docs/elements.md +++ b/Writerside/topics/elements.md @@ -14,4 +14,4 @@ Elements can be organized to aid content creators in finding different types of ## Creating Fred Elements -To learn more about creating Template for Fred, see the [themers documentation](themer/elements/index.md). +To learn more about creating Template for Fred, see the [themers documentation](elements_index.md). diff --git a/docs/fred_for_existing_modxers.md b/Writerside/topics/fred_for_existing_modxers.md similarity index 78% rename from docs/fred_for_existing_modxers.md rename to Writerside/topics/fred_for_existing_modxers.md index abae4b91..1a9d3289 100644 --- a/docs/fred_for_existing_modxers.md +++ b/Writerside/topics/fred_for_existing_modxers.md @@ -6,15 +6,15 @@ Websites powered by Fred can co-exist with traditional MODX Manager controlled p When logged into a site as a Fred editor, you will see several circular icons overlaid on the page that give you access to the Fred controls: -![Fred when loaded on fred.modx.com](media/fred-loaded.png) +![Fred when loaded on fred.modx.com](fred-loaded.png) When hovering parts of a Fred-enabled page, you will see sections highlighted with a blue border. These are the Elements used to create the page. The name of the Element used for that section will show in on the bottom left when hovered, and positioning and settings controls will be at the bottom-right: -![Fred when hovering an Element](media/fred-in-use.png) +![Fred when hovering an Element](fred-in-use.png) Users will frequently interact with the Sidebar, accessed by clicking the main MODX icon. Depending on how the site owners or developers have Fred configured, these main Fred controls will be located in one of the corners on the page. -![Fred Sidebar](media/fred-sidebar.png) +![Fred Sidebar](fred-sidebar.png) The “Site” menus is like the Manager tree, but only shows Fred-enabled pages. @@ -34,9 +34,9 @@ The “Save” icon (check mark) saves the page. ## Elements -[Elements](themer/elements/index.md) are the basic building block of Fred. These can be as simple as a headline, or much more complex like a complete product layout used in an e-commerce store. +[Elements](elements_index.md) are the basic building block of Fred. These can be as simple as a headline, or much more complex like a complete product layout used in an e-commerce store. -When logged into a site as a Fred editor, hovering parts of the page will highlight sections with a blue box, the boundary of the Element itself. Elements are configured by [Option Sets](themer/options/index.md) which are accessed by clicking the gear icon then the “Open Settings & Plugins” in the lower-right of the Element when hovered. +When logged into a site as a Fred editor, hovering parts of the page will highlight sections with a blue box, the boundary of the Element itself. Elements are configured by [Option Sets](options_index.md) which are accessed by clicking the gear icon then the “Open Settings & Plugins” in the lower-right of the Element when hovered. Elements can be duplicated or used more than one time on Fred pages. @@ -44,9 +44,9 @@ Elements can be duplicated or used more than one time on Fred pages. When hovering an Element, a set of positioning controls at the bottom, with a gear icon for the Element's settings appears in the lower-right. -![Fred in use on fred.modx.com](media/fred-overview.png) +![Fred in use on fred.modx.com](fred-overview.png) -The [Option Set menu](themer/options/index.md) is generated from a JSON text array managed through the [Fred Third-party Component](themer/cmp/elements/). +The [Option Set menu](options_index.md) is generated from a JSON text array managed through the [Fred Third-party Component](elements.md). #### Settings Menu Trigger @@ -56,7 +56,7 @@ The Option Sets attached to an Element are revealed by clicking the gear icon, j The Settings Menu allows users (with appropriate permissions to perform several actions on an Element): -- Take a screenshot of the current state of the Element used when [creating themes](themer/index.md) +- Take a screenshot of the current state of the Element used when [creating themes](themer_index.md) - Create a [partial Blueprint](blueprints.md) based on the current state of the Element - Open the Settings panel for configuring the Element - Duplicating the Element immediately after the current one @@ -72,7 +72,7 @@ What sets Fred apart from traditional MODX templates is the lack of reliance on This brings the benefit of greater simplicity and possibly faster performance without sacrificing the flexibility that TVs brought to MODX in the first place. -In Fred, TVs are often replaced by [Option Sets](themer/options/index.md), and can be an effective substitue in many cases without the added complexity and database overhead of TVs. The current limitation for Option Sets is that they can only contain text values, so they only best used for things like text, textarea, richtext, numbers, etc. +In Fred, TVs are often replaced by [Option Sets](options_index.md), and can be an effective substitue in many cases without the added complexity and database overhead of TVs. The current limitation for Option Sets is that they can only contain text values, so they only best used for things like text, textarea, richtext, numbers, etc. ## Where TVs make sense in Fred @@ -82,7 +82,7 @@ TVs also are also useful for segregating content into searchable vs non-searchab ### What replaces TVs -In Fred, [Option Sets](themer/options/index.md) can effectively replace many use cases that previously would have required TVs in the MODX Manager. +In Fred, [Option Sets](options_index.md) can effectively replace many use cases that previously would have required TVs in the MODX Manager. Option settings are the controls that appear when you click the gear icon for each MODX Element on a page. The gear icon also gives content authors and editors access ot the typical MODX page settings like scheduled publishing, show/hid from menu, etc. diff --git a/docs/getting_started.md b/Writerside/topics/getting_started.md similarity index 94% rename from docs/getting_started.md rename to Writerside/topics/getting_started.md index 9245acff..62a13972 100644 --- a/docs/getting_started.md +++ b/Writerside/topics/getting_started.md @@ -6,7 +6,7 @@ The easiest way to start with Fred is to install a Fred Theme. 2. Add a new page to your site. Choose one of the Templates from the Theme and save the Page. 3. Click the `Preview` button to visit this page from the front-end to start building with Fred. -If you’re interested in creating Themes from scratch, please see the [Theme Creation Tutorial](themer/themes.md). +If you’re interested in creating Themes from scratch, please see the [Theme Creation Tutorial](themes.md). ## PHP Requirements diff --git a/docs/index.md b/Writerside/topics/index.md similarity index 100% rename from docs/index.md rename to Writerside/topics/index.md diff --git a/docs/site_admin/acls/howto.md b/Writerside/topics/site_admin/acls/howto.md similarity index 98% rename from docs/site_admin/acls/howto.md rename to Writerside/topics/site_admin/acls/howto.md index f4e97c45..ab8648cd 100644 --- a/docs/site_admin/acls/howto.md +++ b/Writerside/topics/site_admin/acls/howto.md @@ -1,4 +1,4 @@ -# Permissions in Fred +# Permissions Overview When installing Fred the first time, it adds a `Fred Admin` policy to all contexts for the `Administrators` User Group. This policy enables any member with a `Super User` Role full access to Fred both in the Manager and in all front-end Contexts. diff --git a/docs/site_admin/acls/permissions.md b/Writerside/topics/site_admin/acls/permissions.md similarity index 99% rename from docs/site_admin/acls/permissions.md rename to Writerside/topics/site_admin/acls/permissions.md index e2a2c232..0c5a6971 100644 --- a/docs/site_admin/acls/permissions.md +++ b/Writerside/topics/site_admin/acls/permissions.md @@ -1,4 +1,4 @@ -# Permissions +# Permissions Detailed The following sections list the permissions available for Fred. The subhead is the permission key used in code, followed by a brief description of where and what those permissions control Most of these permissions can be used both with the `mgr` context and front-end contexts like `web`. However there are few that only apply to `mgr` or front-end contexts. diff --git a/docs/site_admin/acls/policies.md b/Writerside/topics/site_admin/acls/policies.md similarity index 100% rename from docs/site_admin/acls/policies.md rename to Writerside/topics/site_admin/acls/policies.md diff --git a/docs/templates.md b/Writerside/topics/templates.md similarity index 94% rename from docs/templates.md rename to Writerside/topics/templates.md index 5014efcf..4ccc20d9 100644 --- a/docs/templates.md +++ b/Writerside/topics/templates.md @@ -8,4 +8,4 @@ Most templates will have a *content* Dropzone. Fred also supports multiple Dropz ## Creating Fred Templates -To learn more about creating Template for Fred, see the [themers documentation](themer/templates/index.md). +To learn more about creating Template for Fred, see the [themers documentation](templates_index.md). diff --git a/docs/themer/cmp/blueprint_categories.md b/Writerside/topics/themer/cmp/blueprint_categories.md similarity index 100% rename from docs/themer/cmp/blueprint_categories.md rename to Writerside/topics/themer/cmp/blueprint_categories.md diff --git a/Writerside/topics/themer/cmp/cmp_blueprints.md b/Writerside/topics/themer/cmp/cmp_blueprints.md new file mode 100644 index 00000000..b4840443 --- /dev/null +++ b/Writerside/topics/themer/cmp/cmp_blueprints.md @@ -0,0 +1,7 @@ +# Blueprints + +Blueprints can only be [created from the front-end](blueprints.md). Theme developers can use Blueprints as sample pages which users in turn use to start building a site more quickly. Blueprints function as a “replace the placeholders” way to create content, comprised of one or more Elements with sample content and images in place. + +## Managing Blueprints + +Blueprints can be managed from the Manager’s `Extras` top menu > `Fred` > `Blueprints` tab > `Blueprints` sidebar section. Right-click or click the gear icon to Quick Update the Blueprint in a modal, Update it the page itself, or Remove it to delete it from your Theme. diff --git a/docs/themer/cmp/elements.md b/Writerside/topics/themer/cmp/cmp_elements.md similarity index 90% rename from docs/themer/cmp/elements.md rename to Writerside/topics/themer/cmp/cmp_elements.md index a0f329d8..19bb2648 100644 --- a/docs/themer/cmp/elements.md +++ b/Writerside/topics/themer/cmp/cmp_elements.md @@ -11,13 +11,13 @@ The following are the properties for an Element: - **Image** - Required. If you do not specify an image, a default gray box with the Element name will be created for you. Images are used as the sources for dragging and dropping Elements into your Layouts. - **Category** - Required. Which category to place this Element under. - **Rank** - Optional. The order you wish this Element to show in its category. -- **Markup** - Optional. HTML + Twig markup for the Element, including [Fred-specific attributes](../elements/attributes.md) which allow you to control things like save targets, visibility when creating or viewing content, etc. +- **Markup** - Optional. HTML + Twig markup for the Element, including [Fred-specific attributes](attributes.md) which allow you to control things like save targets, visibility when creating or viewing content, etc. - **Option Set** - Optional. Complete Option Set can be selected here - **Options Override** - Optional. Override selected Option Set, or define one time options for this Element -![Element Panel](img/element_panel.png) +![Element Panel](element_panel.png) -![Element Panel Options](img/element_panel_options.png) +![Element Panel Options](element_panel_options.png) ## Element Preview Images diff --git a/docs/themer/cmp/themes.md b/Writerside/topics/themer/cmp/cmp_themes.md similarity index 93% rename from docs/themer/cmp/themes.md rename to Writerside/topics/themer/cmp/cmp_themes.md index 19529b48..44664b11 100644 --- a/docs/themer/cmp/themes.md +++ b/Writerside/topics/themer/cmp/cmp_themes.md @@ -1,4 +1,5 @@ -# About Fred Themes +# Themes +{id="about-fred-themes"} While most users will typically only have a single theme, you can have many installed in a site. Themes include all the things needed to create a site _except_ example pages (caveat: see Blueprints below). @@ -6,7 +7,7 @@ Being able to have multiple Themes allows Theme Builders to create and release a ## What makes up a Theme -Themes are made of of multple things: +Themes are made of multiple things: - [About Fred Themes](#about-fred-themes) - [What makes up a Theme](#what-makes-up-a-theme) @@ -32,11 +33,11 @@ If you aren't finding the identification number of the Fred Element, right-click ### Elements -A Theme Builder will automatically include all Element Categories attached to the Theme with all their [Elements](elements.md). All [Option Sets](option_sets.md) and [RTE Configs](rte_configs.md) attached to the Theme will be also included. +A Theme Builder will automatically include all Element Categories attached to the Theme with all their [Elements](cmp_elements.md). All [Option Sets](option_sets.md) and [RTE Configs](rte_configs.md) attached to the Theme will be also included. ### Blueprints -A Theme Builder will automatically include **public** Blueprint Categories attached to the THeme with all their **public** [Blueprints](blueprints.md). +A Theme Builder will automatically include **public** Blueprint Categories attached to the THeme with all their **public** [Blueprints](cmp_blueprints.md). ### Templates and TVs diff --git a/docs/themer/cmp/element_categories.md b/Writerside/topics/themer/cmp/element_categories.md similarity index 91% rename from docs/themer/cmp/element_categories.md rename to Writerside/topics/themer/cmp/element_categories.md index b1ebcd83..db5dd916 100644 --- a/docs/themer/cmp/element_categories.md +++ b/Writerside/topics/themer/cmp/element_categories.md @@ -13,6 +13,6 @@ Categories are an organizational strucure for Fred to group items with similar u Under the Categories leftside tab on main Elements tab you can manage all Categories for Elements in Fred. -![Categories Grid](img/categories_grid.png) +![Categories Grid](categories_grid.png) **Please note that if you remove a category, all Elements attached to it will be removed as well, which may break your site.** diff --git a/docs/themer/cmp/media_sources.md b/Writerside/topics/themer/cmp/media_sources.md similarity index 87% rename from docs/themer/cmp/media_sources.md rename to Writerside/topics/themer/cmp/media_sources.md index 2ee44f61..9c9fcc56 100644 --- a/docs/themer/cmp/media_sources.md +++ b/Writerside/topics/themer/cmp/media_sources.md @@ -2,10 +2,10 @@ Like when used in the MODX Manager, Media Sources allow Theme Authors to help site owners keep uploads organized in specific locations for Fred-powered sites. Different Fred Elements that allow uploading images may need to store files in different locations, for example article content vs. catalog images vs. team bio photos. -![Media Sources in Fred](img/media-sources.png) +![Media Sources in Fred](media-sources.png) When editing a Media Source, Theme authors must explicitly set Media Sources to be accessible to Fred via the `fred` toggle; they can optionally be made read-only for Fred, by specifying this in the `fredReadOnly` toggle. -![Update a Media Source](img/update-media-source.png) +![Update a Media Source](update-media-source.png) Learn more about Media Sources in the [MODX Media Source documentation](https://docs.modx.com/revolution/2.x/administering-your-site/media-sources). diff --git a/docs/themer/cmp/option_sets.md b/Writerside/topics/themer/cmp/option_sets.md similarity index 50% rename from docs/themer/cmp/option_sets.md rename to Writerside/topics/themer/cmp/option_sets.md index e0ee0b64..a0ef084f 100644 --- a/docs/themer/cmp/option_sets.md +++ b/Writerside/topics/themer/cmp/option_sets.md @@ -1,8 +1,8 @@ # Option Sets -[Option Sets](../options/index.md) allow you to create common configurations and frequently used sub-configs (e.g., color swatch pickers or a list of fonts) for use across multiple Elements. +[Option Sets](options_index.md) allow you to create common configurations and frequently used sub-configs (e.g., color swatch pickers or a list of fonts) for use across multiple Elements. -![Option Sets Grid](img/option_sets_grid.png) +![Option Sets Grid](option_sets_grid.png) ## Creating Option Set @@ -11,6 +11,6 @@ The following are the avaialble Option Set properties: - **Name** - Required, has to be unique - **Description** - Optional - **Complete** - Yes/No flag, if set to Yes, the Option Set will appear in select box when creating/updating Element. Setting it to No is usefull for partial Option Sets for import only purpose. -- **Data** - JSON with [Element options](../options/index.md) +- **Data** - JSON with [Element options](options_index.md) -![Option Sets Edit Panel](img/option_sets_edit_panel.png) +![Option Sets Edit Panel](option_sets_edit_panel.png) diff --git a/docs/themer/cmp/rebuild.md b/Writerside/topics/themer/cmp/rebuild.md similarity index 100% rename from docs/themer/cmp/rebuild.md rename to Writerside/topics/themer/cmp/rebuild.md diff --git a/docs/themer/cmp/rte_configs.md b/Writerside/topics/themer/cmp/rte_configs.md similarity index 62% rename from docs/themer/cmp/rte_configs.md rename to Writerside/topics/themer/cmp/rte_configs.md index 2bdff1c1..ce683684 100644 --- a/docs/themer/cmp/rte_configs.md +++ b/Writerside/topics/themer/cmp/rte_configs.md @@ -2,16 +2,16 @@ Under the RTE Configs tab you can manage all configuration sets for any installed RTEs. -![RTE Configs Grid](img/rte_configs_grid.png) +![RTE Configs Grid](rte_configs_grid.png) -RTE configs must have a unique name, which is used in [data-fred-rte-config](../elements/attributes.md#data-fred-rte-config) attribute to determin which RTE to use, if any. +RTE configs must have a unique name, which is used in [data-fred-rte-config](attributes.md#data-fred-rte-config) attribute to determin which RTE to use, if any. Make sure RTE configs are valid JSON; you can use [JSON Lint](https://jsonlint.com/) as an external service or the [ACE editor](https://modx.com/extras/package/ace) MODX Extra which shows invalid JSON in the line-number columns as a white X in a red box. ## Default Configs -If you create a config with a same name as your RTE, for example `TinyMCE`, this config will be used as a default one, overriding its defaults. To learn more about creating RTE configurations, and to see sample configurations for the TinyMCE for Fred Extra, see the [RTE examples](../rte_configs/index.md) documentation. +If you create a config with a same name as your RTE, for example `TinyMCE`, this config will be used as a default one, overriding its defaults. To learn more about creating RTE configurations, and to see sample configurations for the TinyMCE for Fred Extra, see the [RTE examples](rte_configs_index.md) documentation. ### Overriding Default Configs -Fred option sets can specify the RTE configuration to use for each Element. In addition, a [data-fred-rte-config](../elements/attributes.md#data-fred-rte-config) attribute on an HTML Element with a `data-fred-name` attribue (as long as data-fred-editable is not set to false) will override both the Default and option set specific settings. +Fred option sets can specify the RTE configuration to use for each Element. In addition, a [data-fred-rte-config](attributes.md#data-fred-rte-config) attribute on an HTML Element with a `data-fred-name` attribue (as long as data-fred-editable is not set to false) will override both the Default and option set specific settings. diff --git a/docs/themer/cmp/theme_settings_and_resolvers.md b/Writerside/topics/themer/cmp/theme_settings_and_resolvers.md similarity index 100% rename from docs/themer/cmp/theme_settings_and_resolvers.md rename to Writerside/topics/themer/cmp/theme_settings_and_resolvers.md diff --git a/docs/themer/cmp/themed_templates.md b/Writerside/topics/themer/cmp/themed_templates.md similarity index 93% rename from docs/themer/cmp/themed_templates.md rename to Writerside/topics/themer/cmp/themed_templates.md index e774dbbd..95d8c58e 100644 --- a/docs/themer/cmp/themed_templates.md +++ b/Writerside/topics/themer/cmp/themed_templates.md @@ -1,4 +1,4 @@ -# Themed Tempaltes +# Themed Templates Fred works by assigning Templates to Fred themes. If a page in a MODX site uses a template which is assigned to a Fred Theme, it will show Fred controls when working from the front-end and logged into the MODX Manager. diff --git a/docs/themer/convert-to-fred.md b/Writerside/topics/themer/convert-to-fred.md similarity index 95% rename from docs/themer/convert-to-fred.md rename to Writerside/topics/themer/convert-to-fred.md index 6fb2134f..380c49f0 100644 --- a/docs/themer/convert-to-fred.md +++ b/Writerside/topics/themer/convert-to-fred.md @@ -8,7 +8,7 @@ Here are some tips for converting your site to Fred. ### Default Element -When converting existing pages to Fred, you will want to specify a *Default Element* in the Themes grid, [see documentation](cmp/themes.md). Without a default element set, your content will disappear when switching a resource to Fred. +When converting existing pages to Fred, you will want to specify a *Default Element* in the Themes grid, [see documentation](cmp_themes.md). Without a default element set, your content will disappear when switching a resource to Fred. The Default Element works by detecting there are no Fred elements currently in place, then selecting the default element and putting any content from the resource into the object specified by the `data-fred-name` option. diff --git a/docs/themer/elements/attributes.md b/Writerside/topics/themer/elements/attributes.md similarity index 93% rename from docs/themer/elements/attributes.md rename to Writerside/topics/themer/elements/attributes.md index 85ae5cae..e5294759 100644 --- a/docs/themer/elements/attributes.md +++ b/Writerside/topics/themer/elements/attributes.md @@ -6,7 +6,7 @@ The following are the currently available attributes for Fred Elements. This defines a Drop Zone where Fred Elements can be dragged from the sidebar and dropped into to create pages. This attribute cannot be empty and must be unique within an Element. While you can create an unlimited number of Dropzones, more than a few might become cumbersome and fragile. Good use cases for multiple Dropzones includes alternate layouts like full width, split pages, pages with sidebars, etc. -### Example +### Example {id="example_1"} ```html
@@ -21,7 +21,7 @@ The value of this attribute has to be unique in each Element, but you can have m **Note:** Because Fred wraps all Elements in a `
`, you cannot currently use Fred to build elements that would break HTML validation such as table rows, list items, definition lists, etc. This will be solved in a future release. -### Examples +### Examples {id="examples_1"} ```html @@ -35,7 +35,7 @@ The value of this attribute has to be unique in each Element, but you can have m When set to `false` the content inside of the HTML Element will not be editable for end users, including any nested Dropzone content. This attribute only works when used with `data-fred-name`. -### Example +### Example {id="example_2"} ```html

The value from the description field goes here

@@ -45,7 +45,7 @@ When set to `false` the content inside of the HTML Element will not be editable Defines other HTML attributes (comma separated) to save with the content of the HTML element where supported by the editor, such as alt and title attributes with images. -### Example +### Example {id="example_3"} ```html Default Alt @@ -55,7 +55,7 @@ Defines other HTML attributes (comma separated) to save with the content of the This allows developers to create user-friendly, self-documenting Elements that inform users what they need to do in order to create content. When set to `false` these Element only appear when Fred is active. -### Example +### Example {id="example_4"} ```html

Add a *Link Location* setting for this Element to make a call to action button appear. (This block is only visible when using Fred.)

@@ -91,7 +91,7 @@ This defines the Resource field or TV in which to store content. Content of the If set to `true` the Rich Text Editor will be loaded for editing the content inside this Element. -### Example +### Example {id="example_5"} ```html
Default Content
@@ -99,9 +99,9 @@ If set to `true` the Rich Text Editor will be loaded for editing the content ins ## data-fred-rte-config -This is useful when you need a limited or expanded set of rich text editor controls than provided by the default configuration, allowing you to specify an overriding [alternate RTE config](../rte_configs/index.md) than the default RTE config. +This is useful when you need a limited or expanded set of rich text editor controls than provided by the default configuration, allowing you to specify an overriding [alternate RTE config](rte_configs_index.md) than the default RTE config. -### Example +### Example {id="example_6"} ```html
The RTE for this content will only show the bold and italics buttons
@@ -111,7 +111,7 @@ This is useful when you need a limited or expanded set of rich text editor contr This option defines a specific Media Source for Elements, using the names of one or more Media Sources, separated by commas for all file types. -### Example +### Example {id="example_7"} ```html download our brochure @@ -121,7 +121,7 @@ This option defines a specific Media Source for Elements, using the names of one Identical to `data-fred-media-source` but only for images. -### Example +### Example {id="example_8"} ```html @@ -131,7 +131,7 @@ Identical to `data-fred-media-source` but only for images. Allows you to specify an additional class which is added to the wrapping `div.fred--block` added around Elements when Fred is loaded. This can be useful when JavaScript libraries or CSS styling techniques require specific wrapper classes. When Fred is not loaded, the attribute will be added to the classes of the element itself. -### Example +### Example {id="example_9"} Element Markup: ```html @@ -157,7 +157,7 @@ When Fred is _not_ loaded, the processed markup for the element will look as fol The value of this attribute will be added to class for this element only when Fred is _not_ loaded. -## Example +## Example {id="example_10"} Element Markup: ```html @@ -180,7 +180,7 @@ When Fred is _not_ loaded, the class is added: This allows you to bind the value of another part of the page to another location within one Element. -### Example +### Example {id="example_11"} Element Markup: @@ -207,7 +207,7 @@ The name of a globally-accessible JavaScript function to be called when the Elem You can use this to trigger a JavaScript function, for example, calling a slider initialise script that you normally have `document.ready` function call. Without using this attribute, you would need to save and reload the page to initialise the newly dropped slider item. -### Example +### Example {id="example_12"} ```html
@@ -217,7 +217,7 @@ You can use this to trigger a JavaScript function, for example, calling a slider The name of a globally-accessible JavaScript function to be called when an Element setting changes. The function will receive fredEl as its first attribute. -### Example +### Example {id="example_13"} ```html
@@ -228,7 +228,7 @@ The name of a globally-accessible JavaScript function to be called when an Eleme Used by the TinyMCE RTE with a `data-fred-link-page` attribute to create links in the MODX format of `[[~2]]`. These links are processed into the href target before generating content. -### Example +### Example {id="example_14"} ```html Fred @@ -238,7 +238,7 @@ Used by the TinyMCE RTE with a `data-fred-link-page` attribute to create links i Applicable for dropzones. When set, the value used in this attribute will be set in the dropzone's style min-height. -### Example +### Example {id="example_15"} ```html
@@ -248,7 +248,7 @@ Applicable for dropzones. When set, the value used in this attribute will be set Applicable for dropzones. When set, the value used in this attribute will be set in the dropzone's style min-width. -### Example +### Example {id="example_16"} ```html
diff --git a/Writerside/topics/themer/elements/elements_index.md b/Writerside/topics/themer/elements/elements_index.md new file mode 100644 index 00000000..112dccc7 --- /dev/null +++ b/Writerside/topics/themer/elements/elements_index.md @@ -0,0 +1,4 @@ +# Elements + +Elements are the building blocks or design patterns that you use to create sites and themes. Elements usually include HTML markup and a corresponding group of controls (“[Settings](options_index.md)”) accessed from the gear icon in the front-end. Elements can include Twig logic in the markup to do things like show or hide parts of a page depending on the conditions you set in the Settings. + diff --git a/docs/themer/elements/js_events.md b/Writerside/topics/themer/elements/js_events.md similarity index 97% rename from docs/themer/elements/js_events.md rename to Writerside/topics/themer/elements/js_events.md index c30d158d..ecb8b8e9 100644 --- a/docs/themer/elements/js_events.md +++ b/Writerside/topics/themer/elements/js_events.md @@ -4,7 +4,7 @@ This event will trigger when any Element is dropped to a dropzone. You can access fredEl from the `event.detail.fredEl` object. -### Example +### Example {id="example_1"} ```javascript document.body.addEventListener("FredElementDrop", function(){ @@ -16,7 +16,7 @@ document.body.addEventListener("FredElementDrop", function(){ This event will trigger when Element setting on any Element is changed. You can access fredEl from the `event.detail.fredEl` object. -### Example +### Example {id="example_2"} ```javascript document.body.addEventListener("FredElementSettingChange", function(){ diff --git a/docs/themer/elements/markup.md b/Writerside/topics/themer/elements/markup.md similarity index 91% rename from docs/themer/elements/markup.md rename to Writerside/topics/themer/elements/markup.md index 0c1cda70..1912c630 100644 --- a/docs/themer/elements/markup.md +++ b/Writerside/topics/themer/elements/markup.md @@ -1,6 +1,6 @@ # HTML Markup in Fred Elements -Fred Elements are made of HTML with specific attributes. The markup can be enhanced using Twig and Element [Settings](../options/index.md). +Fred Elements are made of HTML with specific attributes. The markup can be enhanced using Twig and Element [Settings](options_index.md). ## Custom Tags diff --git a/docs/themer/media_sources/index.md b/Writerside/topics/themer/media_sources/media_sources_index.md similarity index 98% rename from docs/themer/media_sources/index.md rename to Writerside/topics/themer/media_sources/media_sources_index.md index 1fc72045..cfed1fc9 100644 --- a/docs/themer/media_sources/index.md +++ b/Writerside/topics/themer/media_sources/media_sources_index.md @@ -1,3 +1,5 @@ +# Media Sources + Media Sources can either be assigned globally via a setting in the Media Source itself, or in an Element’s settings by referencing the Media Source Name(s). On install two new settings are added to each Media Source. If you'll want to access Media Sources from Fred, you will need to manually add these settings. NOTE: Fred does not currently check a specific user’s Media Source permissions, and only reviews the following permissions. ## Media Source Settings diff --git a/docs/themer/options/import.md b/Writerside/topics/themer/options/import.md similarity index 100% rename from docs/themer/options/import.md rename to Writerside/topics/themer/options/import.md diff --git a/docs/themer/options/index.md b/Writerside/topics/themer/options/options_index.md similarity index 90% rename from docs/themer/options/index.md rename to Writerside/topics/themer/options/options_index.md index 23686f97..13de8d77 100644 --- a/docs/themer/options/index.md +++ b/Writerside/topics/themer/options/options_index.md @@ -1,4 +1,4 @@ -# Options +# Options Overview Options are what defines the controls given to end users when configuring Elements. They are defined in a Option Sets that are attached to Elements. @@ -8,7 +8,7 @@ Option Sets allow you to create Element configuration settings and frequently us ### Complete Option Sets -Option Sets with the `complete` flag set to `Yes` can be assigned to individual [Element](../elements/index.md). Option Sets can also be assigned to more than one Element, making it easier to reuse common settings across Elements. +Option Sets with the `complete` flag set to `Yes` can be assigned to individual [Element](elements_index.md). Option Sets can also be assigned to more than one Element, making it easier to reuse common settings across Elements. ### Partial Option Sets diff --git a/docs/themer/options/override.md b/Writerside/topics/themer/options/override.md similarity index 96% rename from docs/themer/options/override.md rename to Writerside/topics/themer/options/override.md index 759d288d..32dc301d 100644 --- a/docs/themer/options/override.md +++ b/Writerside/topics/themer/options/override.md @@ -16,7 +16,7 @@ When setting `merge` to `true`, the override will get recursively merged to curr ### rteConfig -You can override or define new [RTE Configs](../rte_configs/index.md) through this option. +You can override or define new [RTE Configs](rte_configs_index.md) through this option. ## Example diff --git a/docs/themer/options/settings.md b/Writerside/topics/themer/options/settings.md similarity index 99% rename from docs/themer/options/settings.md rename to Writerside/topics/themer/options/settings.md index d2f092e6..c16d4db6 100644 --- a/docs/themer/options/settings.md +++ b/Writerside/topics/themer/options/settings.md @@ -1,4 +1,4 @@ -# Options +# Options Detailed Option Sets can have global settings for things like Media Sources and controlling whether or not dynamic asynchronous XHR calls should occur. The visual Settings that display in the browser, can also have sub-sets that serve to keep things organized. diff --git a/docs/themer/rte_configs/index.md b/Writerside/topics/themer/rte_configs/rte_configs_index.md similarity index 100% rename from docs/themer/rte_configs/index.md rename to Writerside/topics/themer/rte_configs/rte_configs_index.md diff --git a/docs/themer/system_settings/index.md b/Writerside/topics/themer/system_settings/system_settings_index.md similarity index 99% rename from docs/themer/system_settings/index.md rename to Writerside/topics/themer/system_settings/system_settings_index.md index 95d37646..efd197b2 100644 --- a/docs/themer/system_settings/index.md +++ b/Writerside/topics/themer/system_settings/system_settings_index.md @@ -1,3 +1,5 @@ +# System Settings + Fred system settings control how your site reacts. Since Fred is loaded on the frontend, you can change how these works per-context, user, or group. ### Blueprint Sort (fred.blueprint_sort) diff --git a/docs/themer/templates/index.md b/Writerside/topics/themer/templates/templates_index.md similarity index 100% rename from docs/themer/templates/index.md rename to Writerside/topics/themer/templates/templates_index.md diff --git a/docs/themer/index.md b/Writerside/topics/themer/themer_index.md similarity index 93% rename from docs/themer/index.md rename to Writerside/topics/themer/themer_index.md index 41903bb6..a2480eaa 100644 --- a/docs/themer/index.md +++ b/Writerside/topics/themer/themer_index.md @@ -4,7 +4,7 @@ Fred themers should have a basic understanding of MODX, be proficient with HTML/ Intermediate Fred themers will use [Twig](https://twig.symfony.com/doc/2.x/) to create conditional logic in Elements. This can be used to show or hide things based on the settings of the controls in Option Sets. -Advanced Fred themers will need to know Javascript to advanced elements with [JS Events](elements/js_events.md). +Advanced Fred themers will need to know Javascript to advanced elements with [JS Events](js_events.md). ## Suggested Workflow @@ -16,4 +16,4 @@ We strongly suggest installing the [Ace Extra](https://modx.com/extras/package/a If you have Ace installed as suggested above, attribute-completion and code hints are available when working in the Manager for Fred by installing the [Fred Ace Integration](https://modx.com/extras/package/fredaceintegration) Extra. When creating or editing an Element, start typing `data-` or `fred` and the press `ctrl+space` to show list of all available Fred attributes. -![Ace Integration](/media/ace_integration_dialog.png) +![Ace Integration](ace_integration_dialog.png) diff --git a/docs/themer/themes.md b/Writerside/topics/themer/themes.md similarity index 90% rename from docs/themer/themes.md rename to Writerside/topics/themer/themes.md index 38e37d57..ae497d3a 100644 --- a/docs/themer/themes.md +++ b/Writerside/topics/themer/themes.md @@ -1,4 +1,4 @@ -# Theme Creation Tutorial +# Basic Tutorial Tutorial Once you have created a design you are happy with, it is straightforward to build a Theme to share. To start creating a theme, follow the steps below: @@ -20,11 +20,13 @@ After your Fred Extras finish downloading, install them from the Packages grid. Fred needs a “dropzone” to know where content can go, indicated by adding a `data-fred-dropzone` attribute to an HTML entity, often a `div` tag. For example, where the `[[*content]]` tag would normally be in a Template, add the following: +```html
[[*content]]
+``` -Note the value of the `data-fred-dropzone="content"` attribute indicates where to render your content once you save a page in Fred, in this case, the `[[*content]]`. Fred also supports multiple Dropzones; see the [templates documentation](templates/index.md) for more information. +Note the value of the `data-fred-dropzone="content"` attribute indicates where to render your content once you save a page in Fred, in this case, the `[[*content]]`. Fred also supports multiple Dropzones; see the [templates documentation](templates_index.md) for more information. ## Step 3: Assign a Template to a Fred Theme @@ -58,19 +60,17 @@ Switch to the `Elements` tab in Element’s CMP (`Extras` > `Fred` > `Elements`) Add the following markup: ```html -

H1 Heading

+

H1 Heading

``` -![Element Creation 3PC Screenshot](/media/create-element.png) +![Element Creation 3PC Screenshot](create-element.png) Save this Element, go back to the front-end of your Resource, and refresh the page. Click on the orange Elements stacked boxes icon or the MODX icon in the launcher at the bottom left of the page. In the sidebar Elements tab, you should now see the categories you created earlier in step 4. Hover the `Text` category to see your freshly created `H1 Heading` Element and drag it into the empty dropzone. - + +