update geting started guid, add a service level doc, created an admonitions short code, as those are all the rage.

config.yaml

@@ -24,13 +24,13 @@ params:
   # Open graph allows easy social sharing. If you don't want it you can set it to false or just delete the variable
   openGraph: true
   images:
-    - /images/illustrations/flow.png
+    - /get_started/illustrations/flow.png
   # Used as meta data; describe your site to make Google Bots happy
   description: Homepage for SpiffWorkflow and SpiffArena - open source projects which seek to improve transparency and understanding in organizations through intuitive executable diagrams.  These projects are based on the OMG's BPMN and DMN standards.
-  # Preloader ensures images are loaded before displaying to the user. If you don't want it uncomment to set it to false
+  # Preloader ensures get_started are loaded before displaying to the user. If you don't want it uncomment to set it to false
   # preloader: false
   navbarlogo:
-  # Logo (from static/images/logos/___)
+  # Logo (from static/get_started/logos/___)
     image: logos/spiffworkflow_logo.png
     link: /
     # Default width/height. Uncomment if you need to change
@@ -48,9 +48,9 @@ params:
     buttontext: Get started
     # Where the main hero button links to
     buttonlink: "/posts/articles/get_started/"
-    # Hero image (from static/images/___)
+    # Hero image (from static/get_started/___)
     image: illustrations/flow.svg
-    # Footer logos (from static/images/logos/clients/___.svg)
+    # Footer logos (from static/get_started/logos/clients/___.svg)
     clientlogos:
     - status
     - uva
@@ -76,7 +76,7 @@ params:
     url: /pages/support/
     button: true
   sidebar:
-    # Logo (from /images/logos/___.svg)
+    # Logo (from /get_started/logos/___.svg)
     logo: spiffworkflow_white
     sections:
     - title: Projects
@@ -123,7 +123,7 @@ params:
       icon: transparency
     - title: Automate The Bots
       text: No one wants 20 applications telling them what to do all day.  In many cases, what we need is a little glue -- a way to pull information from one system and use it in another.  The Service Tasks in our diagrams allows us to talk to services, gather information, send that information to other services, getting ourselves out of the loop.
-      # Icon (from /images/illustrations/icons/___.svg)
+      # Icon (from /get_started/illustrations/icons/___.svg)
       icon: bots
     - title: Deliver on Schedule
       text: Computers make great clock watchers, so let them do it.  We need more time by the fireplace for contemplation and less time responding to our endlessly beeping phones with their often pointless interruptions.    If we can reduce the noise and think in peace, then perhaps we can do something of merit, of consequence -- something worthy of our precious time.
@@ -148,7 +148,7 @@ params:
       img: ron
   section5: true
   footer:
-    # Logo (from /images/logos/___)
+    # Logo (from /get_started/logos/___)
     logo: spiffworkflow_white.svg
     # Social Media Title
     socialmediatitle: Connect
@@ -183,6 +183,8 @@ params:
           link: /pages/privacy_policy/
         - text: Terms of Service
           link: /pages/demo_terms_of_service/
+        - text: Service Level Expectations
+          link: /pages/service_level/
       column3:
         title: "Blog"
         links:

content/pages/service_level.md

@@ -0,0 +1,99 @@
+---
+title: "Service Level Expectations"
+subtitle: "Our SLA and Commercial Support Options"
+date: 2023-06-21T01:33:00-05:00
+draft: false
+description: We offer these Service Level Expectations to our end users, and provide paid support options for organizations that need guaranteed availability, fast response times to questions, and resources to assure their system remains stable, up to date and free of major security vulnerabilities.
+---
+
+This SLE seeks to outline the basic expectations for a Support Contract or Service Level Agreement between [Sartography](https://sartography.com) and an organization seeking to self-host the SpiffArena Application or use the SpiffWorkflow library in a production environment.  It seeks to offer clarification on the following major areas:
+1. **Level of support** you can expect from [Sartography](https://sartography.com). This includes but is not limited to things like availability, response time, and resolution time.
+2. **Framework for resolving disputes.** If there is a problem with the service, this can be used to determine who is responsible and how the problem will be resolved.
+3. **Measure of performance.** The SLA can be used to track the Provider's performance over time.
+
+
+### Terms:
+| Term             | Definition                                                                                                                                                                   |
+|------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
+| Availability     | The percentage of time that our support services will actually be available during support hours. (we hope to be available 100% of the time, but that isn’t always possible) |
+| Response time    | The time it takes for us to respond to a question or support request.                                                                                                        |
+| Penalty          | A financial or other sanction that is imposed on a service provider for failing to meet the terms of an SLA.                                                                 |
+| Software release | A new version of the software application that is made available to users and that includes new features, bug fixes, or performance improvements.                            |
+| Severe Incident  | any incident that results in the unavailability of the service for more than two hours or that affects more than 10% of the users of the service.                            |
+
+## 1. Scope of Service
+
+[Sartography](https://sartography.com) strives to provide all SpiffWorkflow users with the following:
+
+* Releasing new versions of the project on a regular basis
+* Creating Security updates and bug fixes for the latest version of the project
+* Providing a public chat room for users to discuss the project
+* Creating and maintaining basic documentation
+
+### Paid Support
+Commercial companies with mission-critical installations of SpiffArena and SpiffWorkflow may require enhanced Provider availability including fast response times to questions, and regular checkups to ensure their systems remain stable, up to date, and are protected against major security vulnerabilities.  For these cases [Sartography](https://sartography.com) offers paid support plans to provide these organizations and groups with priority responses via chat rooms and GitHub, and  allow them direct access to [Sartography](https://sartography.com) personnel through phone, video, email, and private chat.
+
+Please refer to the chart below for a comparison of service levels.
+
+Paid support contracts are offered at three levels - Bronze, Silver and Gold:
+
+|                       | Community | Bronze               | Silver            | Gold       |
+|-----------------------|-----------|----------------------|-------------------|------------|
+| Regular Releases      | ✓         | ✓                    | ✓                 | ✓          |
+| Security Patches      | ✓         | ✓                    | ✓                 | ✓          |
+| GitHub Ticket Support | ✓         | 24 hrs\*             | 24 hrs\*          | 24 hrs\*   |
+| Discord Channel       | ✓         | 24 hrs\*             | 24 hrs\*          | 24 hrs\*   |
+| Email Security Alerts |           | ✓                    | ✓                 | ✓          |
+| Direct Support\*\*    |           | 8am-12pm EST\* M/W/F | 6am-6pm EST\* M-F | 24/7       |
+| Installation Review   |           |                      | ✓                 | ✓          |
+| Annual Health Check   |           |                      | ✓                 | ✓          |
+| VPN Support           |           |                      | ✓                 | ✓          |
+| Monitored Upgrades    |           |                      | ✓                 | ✓          |
+| Security Hot Patches  |           |                      |                   | On Request |
+
+```
+* On normal business days - not counting weekends and national holidays.  
+** We can do video calls, phone calls, text messages, private chats, we'll even share a tmux terminal with you. 
+```
+
+#### Pricing
+Pricing may change at any time.  Some plans can be altered to meet a specific circumstance.  Please contact us for more information.
+
+|        | Base Cost  | Min Contract | Support Hours / Month |
+| ------ |------------| ------------ |-----------------------|
+| Bronze | $640.00    | 6 months     | 4                     |
+| Silver | $1,900.00  | 6 months     | 8                     |
+| Gold   | Contact Us | 6 months     | 16                    |
+
+Additional hours are charged at $200/hr.  Please note that our support hours are not cumulative, unused hours will not be carried over to the next month.  These rates are for paid support.  We offer different rates for Software Development and Consulting Services.  Please contact us for more information. 
+
+
+# 2. Limitations
+To receive support of any kind, you must remain on a supported version of the platform. Major versions will be supported for 12 months after the release of the next major version.  Minor versions will be supported for 6 months after the release of the next minor version.  Patch versions will be supported for 3 months after the release of the next patch version.
+
+# 3. Service Level Indicators
+
+| Service Level | Availability | Response Time (chat/email) | Response Time (Phone/Text)     |
+| ------------- |--------------|----------------------------|--------------------------------|
+| Bronze        | 90%          | 48 hours                   | 1 hour - MWF - 8am to Noon EST |
+| Silver        | 90%          | 24 hours                   | 1 hour - M-F - 6am to 6pm EST  |
+| Gold          | 95%          | 4 hours                    | 1 hour - 24/7                  |
+
+### How to read this chart:
+Availability is the percentage of time that [Sartography](https://sartography.com) will be available within the agreed time windows. For example, Bronze members can expect us to respond to messages within 48 hours, and to phone calls and text messages within an hour (if the request is made within the service window) at least 90% of the time.
+
+### Limitations
+* Except for Gold Members, support is not offered on weekends or national holidays in the U.S.  In such a case our response times will be measured from the next business day.
+
+
+# 4. Penalties
+In the event that we fail to meet the above Service Level Indicators the following penalty will apply:
+
+
+* Initial Response time for support requests: If the Provider does not respond to a support ticket within the availability and time frame limits outlined in the Support Level Indicators section above, Client will be entitled to a refund of 10% of the monthly service fees.
+* Resolution time for severe incidents: If the Provider fails to resolve a severe incident within 24 hours, the Client will be entitled to a refund of 10% of the monthly service fees if the incident is related to a defect or security vulnerability in the Provider’s software. If the incident is related to a defect or security vulnerability in a third-party software package, the Client will be entitled to a refund of 5% of the monthly service fees. If the incident is related to a defect or security vulnerability in the Client’s software, hardware or infrastructure, the Client will not be entitled to a refund.
+
+**Refunds and credits**: Refunds and credits will be applied to the next monthly invoice.
+
+**Waiver**: The Provider may waive any penalty if it can demonstrate that the failure to meet the service levels was due to circumstances beyond its reasonable control.
+

content/pages/support.md

@@ -1,16 +1,19 @@
 ---
 title: "Get Support Now"
-subtitle: "Outcome Based Consulting Services"
+subtitle: "Outcome Based Consulting Services and Service Agreements"
 date: 2023-01-02T10:05:00-05:00
 draft: false
 no_comments: true
 description:  How to get support for SpiffWorkflow and SpiffArena. 
 ---
 
-Support and consulting services are available from the team of people who created, maintain, and continue to contribute to SpiffArena, SpiffWorkflow, and our other open source projects.
+Support and consulting services are available through Sartography, LLC - the team of people who develop, maintain, document, and support SpiffArena and SpiffWorkflow.
 
-Reach out to learn how our SpiffWorkflow Consulting Services can help you design a winning strategy to meet your business goals with simplicity, clarity, and shared vision.
+Reach out to learn how our SpiffWorkflow Consulting Services can help you design a winning strategy to meet your business goals with simplicity, clarity, and shared vision.  
+
+If you are looking specifically for a support contract, please check out our [Service Level Expectations and Commercial Support Options](/pages/service_level/).
 
 {{% contact_us %}}
 
 You can also reach out directly to Dan Funk, Founder, at (540) 457-0024, or contact him via email at dan@sartography.com.
+

content/posts/articles/get_started.md

@@ -1,171 +1,106 @@
 ---
-title: "Getting Started"
-date: 2022-12-27T13:15:00-05:00
+title: "Getting Started with SpiffDemo.org"
+date: 2023-06-23T13:15:00-05:00
 draft: false
 author: Dan Funk
-images: 
- - /images/articles/get_started_thumbnail.png
-description: Detailed directions on how to install SpiffArena and create and run your first executable SpiffWorkflow diagram.
---- 
-In this article (and accompanying video) you will create and run your first executable SpiffWorkflow diagram.  We'll be using a brand new open source application called SpiffArena that wraps the SpiffWorkflow library in an easier to use interface that provides a host of important tools.  Let's get started and you can see for yourself ...
+images:
+  - /images/articles/get_started_demo_thumbnail.png
+description: How to use our demonstration site to view and execute diagrams and get a basic understanding of SpiffWorkflow's features.
+---
+
+This guild will get you started instantly thanks to our newly released demo site. Log in and immediately start executing diagrams and learn a powerful new way to do collaborate with collegues and solve problems with your teammates.
+
+{{< admonition title="Running SpiffArena Locally" type="note">}}
+Note: The original getting started guide, which provided details on how to install and use SpiffArena is still available [here](../get_started_docker/).` 
+{{< /admonition >}}
 
 ## Video Instructions
-You can follow the directions below, or you can watch this 10-minute video and follow along. 
-{{< youtube id="Fjdqb2tdxHg" autoplay="0" rel="0"  >}}
 
-## Install and Start SpiffArena
+You can follow the directions below, or you can watch this 6-minute video where we take you step by step 
+through how to use the site.
 
-### Prerequisites:
-You will need to install Docker and Docker-Compose.  Please follow [the Docker Installation instructions](https://docs.docker.com/compose/install/) if you do not have these already.  
-Docker is a way for you to run on your laptop what was designed to run on larger computers and be accessible to many people throughout an organization.  It will not alter your computer, and you can fully remove all the files with a few commands provided at the end of this article.
+{{< youtube id="fhEPyA3d4mE" autoplay="0" rel="0"  >}}
+
+### **Visit Spiffdemo & Login**
+
+To begin your journey, open your web browser and navigate to the [official demo website](http://spiffdemo.org). On the login screen, you will find the option and select "Sign in With Google".  If you do not have a Google account, please [contact us](mailto:dan@sartography.com) and let us know what other sign-on options you would like to use.  We can also create an account for you if needed.
+
+![login](image3.png)
+
+### **Explore the Home Section**
+
+Upon successful login, you will be greeted by our home screen. The home page will be empty at this stage since no processes are assigned to you. Take a moment to familiarize yourself with the layout and available features.
+
+![home page](image5.png)
+
+### **Move to the Process Section**
+
+Go to the "Process" section from the top menu. Within the "Process" section, you will find two main sections: "Example" and "Playground".
+
+![Process Selection](image7.png)
+
+### **Explore Example Processes**
+
+Click on the "Example" option to explore pre-built workflow examples that showcase various functionalities and use cases. In the "Example" section, you will find a list of top-level process models and groups. These examples represent complete workflows with predefined steps and tasks.
+
+Select one of the top-level examples, such as "Minimal Example" or "Essential Example", to view the corresponding process model and diagram.
+
+![Minimal Example](image4.png "image_tooltip")
 
 
-### Downloading and Starting SpiffArena
-From Mac0S, Linux Command Line, or Windows Powershell, run the following commands:
-{{< highlight Bash "linenos=false" >}}
-mkdir spiffworkflow
-cd spiffworkflow
-wget https://raw.githubusercontent.com/sartography/spiff-arena/main/docker-compose.yml
-docker-compose pull
-docker-compose up -d
-{{< / highlight >}}
+Upon clicking on the process, a new window will open with details and a list of associated files.
+
+![alt_text](image8.png "image_tooltip")
+
+### **Explore BPMN Editor**
+
+If you wish to view and make changes to the process diagram. Open a .bpmn file and you will have a visual diagram representing the workflow. Take a closer look at the diagram and familiarize yourself with the elements, such as start events, tasks, and end events.
 
 
-Please note that it may take a few minutes to download and install the docker images.  Nothing permanent is happening here.  You can delete these images at any time using the Docker Desktop application.   It’s also worth noting that subsequent starts are much faster.
+![BPMN Editor](image9.png)
 
-**Macs**:  Please note that you may need to use curl rather than wget
+You can access detailed information and properties in the right sidebar by clicking on individual tasks. Make modifications to the diagram by adding or modifying tasks, connecting elements, or updating properties.
 
-{{< highlight Bash "linenos=false" >}}
-curl -o docker-compose.yml https://raw.githubusercontent.com/sartography/spiff-arena/main/docker-compose.yml
-{{< / highlight >}}
+![Launch Markdown Editor](image1.png)
 
-### Open SpiffArena in a browser
-After a few minutes, all processes should be up and running, and you can view the system through your web browser.
 
-  1. Visit http://localhost:8001 in your browser.  
-  2. Log in as admin/admin
+To modify the instructions displayed for manual tasks, navigate to the "Instructions" field. For example, if you wish to update the information in the manual task named "Show Example Manual Task" below, click "Launch Editor." This action will open the editor, allowing you to change the displayed content.
 
-Congratulations!  You have SpiffWorkflow up and running locally! Now what!?    Let’s start with a simple example.
+![Markdown Editor](image2.png)
 
-## Building and running your first Workflow Process
-Let’s build and run a very simple workflow to get familiar with the interface, and then we will follow up with larger and more complex examples. 
+**Note:** In order to save any changes, you must have an editor role. To acquire this role, you must request access to a playground. Once you have the editor role, you can save your modifications successfully.
 
-**Select “Processes” from the Main Menu**
 
-![main menu image](select_processes.png)
+### **Requesting a Playground**
 
-**Select “Add a process group”**
+To access the editor role and create your own diagrams, start by requesting a playground.
 
-![add process button](add_process.png)
+![alt_text](image6.png "image_tooltip")
 
-**Provide the following information:**
-  1. Display Name:  “Playground”  _The identifier will automatically be set to “playground”.    We will cover other fields and options at another time._
-  2. Description:  “These are my test processes.”
-  3. Click “Submit”
+Follow the instructions within the "Request a Playground" process, providing the necessary information. This process will guide you through the steps required to complete the request and grant you access as an editor.
 
-![process group form](process_goup_form.png)
-
-**Select “Add a process model” (the second button)**
-
-![add_process_model](add_process_model.png)
-
-**Provide the following information:**
-
-1. Display Name:  “Simple Example” 
-2. The identifier will automatically be set to “simple-example”.  We will cover other fields and options at another time. 
-3. Description:  “My first SpiffWorkflow Process Model” 
-4. Click “Submit” 
-5. Click “New BPMN File”
-
-**Welcome to the Diagram Editor!** 
-
-Let’s draw a simple functional BPMN Diagram
-
-Every new BPMN diagram is initially populated with a Start Event, which looks like an open circle.  Click on it and it will show a blue outline and a “context menu” – find the “Task” icon in the menu (the rectangle with rounded corners) and click it to “Append Task”.
-
-![append task](append_task.png)
-
-Your diagram should now look like this:
-
-![diagram 1](diagram_1.png)
-
-Now let’s turn the “Task” (the rectangle) into a Script Task, and we will add a bit of Python code to our diagram. Click the Task, to get the context menu up again. Click the wrench icon {{< inline_image src="wrench.png" alt="wrench icon" >}}, and select {{< inline_image src="script_task.png" alt="Script Task icon" >}}“Script Task” from the list of options.
-
-At this point your cursor will be blinking inside of the Task icon, allowing you to enter the name of the Task.  For this time we will use an alternative method, described in the next step
-Click anywhere off the Task and your diagram should now look like this:
-
-![diagram 2](diagram_2.png)
-
-Select the Script Task (the rectangle should have a blue outline around it) and then take a look at the options in the Properties Panel on the right.  You should see something like the image below.  There are three sections.  When you click on a section it will expand.
-
-![Script Properties Panel](prop_panel_script.png)
-
-Click General so it is expanded, we can give the Task a name.  Let’s call it “Set  Name”.  Your diagram should now look like this:
-
-![diagram 3](diagram_3.png)
-
-For this exercise we’ll need two Tasks, so similar to how you added the first Task after the Start Event click on the Script Task you just added, and append a second task,
-
-![diagram 4](diagram_4.png)
-
-so the diagram looks like this:
-
-![diagram 5](diagram_5.png)
-
-Take advantage of the blinking cursor in the middle of the newly added Task and name it “Display Message”.  Next click on the wrench icon and select “Manual Task” .  And to complete the diagram, click on the bolded circle at the top left, it should say “Append EndEvent” as shown below.
-
-![diagram 6](diagram_6.png)
-
-Your diagram should now look like this:
-
-![diagram 7](diagram_7.png)
-
-Now let’s add a bit of Python code to execute.  Click in the Script Task and expand the “Script” Section and click the “Launch Editor” button – which will bring up a python editor.  Paste in the following code, and click the Close Button.
-{{< highlight Python "linenos=true" >}}
-my_name = "World"
-{{< / highlight >}}
-
-Now, in the second task, let’s add some text and Jinja code to display a message.  Click on the Manual Task and in the Property Panel on the right side, expand the Instructions section and add the following:
-
-{{< highlight Jinja2 "linenos=true" >}}
-Hello {{my_name}}!
---------------------------
-Welcome to SpiffWorkflow!
-{{< / highlight >}}
+![Playground Form](image11.png)
 
 
 
-The right hand Property Panel should look like this (you may need to grab the bottom left of the Instruction box and drag it down to see everything you pasted in there).
+### **Access the Playground**
 
-![Manual Properties Panel](prop_panel_manual.png)
-
-Save the diagram using the save button in the upper left.  When it asks for a name call it “hello_world”
-
-Now click on the “Simple Example” in the breadcrumbs at the top of the page to go back to the process model.
-
-Click the Start button, and you should be greeted with your “Hello World!” message:
-
-Click the Continue button to return to the Home page and then the Completed tab to see your first completed process instance!
-
-![Hello World Run](final_screen.png)
+When your account is set up, select the "**Playground**" option in the process section, and gain the ability to create and modify your own workflows.
 
 
-### Shutting it all down
-{{< highlight Bash "linenos=false" >}}
-$ docker-compose down
-$ docker ps
-{{< / highlight >}}
+![alt_text](image10.png "image_tooltip")
 
 
-## What you have learned
-Today you learned a great deal about SpiffWorkflow and the new SpiffArena application, but it’s just the tip of the iceberg.  Here are few things we covered today:
- 1. How to get SpiffArena running locally on your computer.  You can stop it using the DockerDesktop application, or by running docker container down at the command line.
- 2. How to create a new Process Model
- 3. How to create a simple executable BPMN diagram
- 4. How to add start events, tasks, and end events to a diagram.
- 5. How to create a Script Task that contains a bit of python.
- 6. How to create a Manual Task with a message that people can see.
+Within the playground, you will find a container assigned to your name. Inside this container, you will have access to multiple tasks and process models. You can utilize this environment to create your own process models and make necessary modifications to the diagrams. This includes adding or modifying tasks, connecting elements, and updating properties. Furthermore, you can save these changes to ensure your progress is preserved.
 
-Remember that the real power of SpiffWorkflow is its ability to help create transparency around complex rules of a business, government agency, or any other organization.  This isn’t just some quick and easy way to write code.  It is a tool for building consensus and for offering a guarantee that what you see is truly what you get.  Additional tutorials will cover some of the powerful ways that Spiffworkflow helps you create transparency by using seemingly simple diagrams to describe complex processes, critical decision points, and to coordinate parallel actions and the handoff of responsibility from one person or application to the next – all in a way everyone can see and understand.
+![Access Playground](image10.png)
 
-Don’t let this simple tutorial fool you.  There is some substantial power within your reach to create change and improve the world in which you live.  We post tutorials frequently to help you explore this power and understand how others are using SpiffWorkflow to transform their organizations and incorporate more people in the software development life cycle.
+### **Explore Additional Diagrams**
+
+In addition to the top-level examples, our demo site provides a wide range of additional diagrams and workflows for exploration. To delve deeper into various workflow scenarios, you can navigate through the "Essential Examples" and Process groups section.
+
+These sections covers a wealth of resources covering both basic concepts and more advanced topics, allowing you to discover diverse and intricate workflow scenarios.
+
+![explore more models](image12.png)
+
+By following these detailed steps, you will gain a solid understanding of SpiffWorkflow and its features. Enjoy exploring, creating, and executing workflows within the platform, and leverage its capabilities to streamline your business processes effectively.

content/posts/articles/get_started_docker.md

@@ -0,0 +1,171 @@
+---
+title: "Running SpiffWorkflow Locally with Docker"
+date: 2022-12-27T13:15:00-05:00
+draft: false
+author: Dan Funk
+images: 
+ - /images/articles/get_started_thumbnail.png
+description: Detailed directions on how to install SpiffArena and create and run your first executable SpiffWorkflow diagram.
+--- 
+In this article (and accompanying video) you will create and run your first executable SpiffWorkflow diagram.  We'll be using a brand new open source application called SpiffArena that wraps the SpiffWorkflow library in an easier to use interface that provides a host of important tools.  Let's get started and you can see for yourself ...
+
+## Video Instructions
+You can follow the directions below, or you can watch this 10-minute video and follow along. 
+{{< youtube id="Fjdqb2tdxHg" autoplay="0" rel="0"  >}}
+
+## Install and Start SpiffArena
+
+### Prerequisites:
+You will need to install Docker and Docker-Compose.  Please follow [the Docker Installation instructions](https://docs.docker.com/compose/install/) if you do not have these already.  
+Docker is a way for you to run on your laptop what was designed to run on larger computers and be accessible to many people throughout an organization.  It will not alter your computer, and you can fully remove all the files with a few commands provided at the end of this article.
+
+
+### Downloading and Starting SpiffArena
+From Mac0S, Linux Command Line, or Windows Powershell, run the following commands:
+{{< highlight Bash "linenos=false" >}}
+mkdir spiffworkflow
+cd spiffworkflow
+wget https://raw.githubusercontent.com/sartography/spiff-arena/main/docker-compose.yml
+docker-compose pull
+docker-compose up -d
+{{< / highlight >}}
+
+
+Please note that it may take a few minutes to download and install the docker images.  Nothing permanent is happening here.  You can delete these images at any time using the Docker Desktop application.   It’s also worth noting that subsequent starts are much faster.
+
+**Macs**:  Please note that you may need to use curl rather than wget
+
+{{< highlight Bash "linenos=false" >}}
+curl -o docker-compose.yml https://raw.githubusercontent.com/sartography/spiff-arena/main/docker-compose.yml
+{{< / highlight >}}
+
+### Open SpiffArena in a browser
+After a few minutes, all processes should be up and running, and you can view the system through your web browser.
+
+  1. Visit http://localhost:8001 in your browser.  
+  2. Log in as admin/admin
+
+Congratulations!  You have SpiffWorkflow up and running locally! Now what!?    Let’s start with a simple example.
+
+## Building and running your first Workflow Process
+Let’s build and run a very simple workflow to get familiar with the interface, and then we will follow up with larger and more complex examples. 
+
+**Select “Processes” from the Main Menu**
+
+![main menu image](select_processes.png)
+
+**Select “Add a process group”**
+
+![add process button](add_process.png)
+
+**Provide the following information:**
+  1. Display Name:  “Playground”  _The identifier will automatically be set to “playground”.    We will cover other fields and options at another time._
+  2. Description:  “These are my test processes.”
+  3. Click “Submit”
+
+![process group form](process_goup_form.png)
+
+**Select “Add a process model” (the second button)**
+
+![add_process_model](add_process_model.png)
+
+**Provide the following information:**
+
+1. Display Name:  “Simple Example” 
+2. The identifier will automatically be set to “simple-example”.  We will cover other fields and options at another time. 
+3. Description:  “My first SpiffWorkflow Process Model” 
+4. Click “Submit” 
+5. Click “New BPMN File”
+
+**Welcome to the Diagram Editor!** 
+
+Let’s draw a simple functional BPMN Diagram
+
+Every new BPMN diagram is initially populated with a Start Event, which looks like an open circle.  Click on it and it will show a blue outline and a “context menu” – find the “Task” icon in the menu (the rectangle with rounded corners) and click it to “Append Task”.
+
+![append task](append_task.png)
+
+Your diagram should now look like this:
+
+![diagram 1](diagram_1.png)
+
+Now let’s turn the “Task” (the rectangle) into a Script Task, and we will add a bit of Python code to our diagram. Click the Task, to get the context menu up again. Click the wrench icon {{< inline_image src="wrench.png" alt="wrench icon" >}}, and select {{< inline_image src="script_task.png" alt="Script Task icon" >}}“Script Task” from the list of options.
+
+At this point your cursor will be blinking inside of the Task icon, allowing you to enter the name of the Task.  For this time we will use an alternative method, described in the next step
+Click anywhere off the Task and your diagram should now look like this:
+
+![diagram 2](diagram_2.png)
+
+Select the Script Task (the rectangle should have a blue outline around it) and then take a look at the options in the Properties Panel on the right.  You should see something like the image below.  There are three sections.  When you click on a section it will expand.
+
+![Script Properties Panel](prop_panel_script.png)
+
+Click General so it is expanded, we can give the Task a name.  Let’s call it “Set  Name”.  Your diagram should now look like this:
+
+![diagram 3](diagram_3.png)
+
+For this exercise we’ll need two Tasks, so similar to how you added the first Task after the Start Event click on the Script Task you just added, and append a second task,
+
+![diagram 4](diagram_4.png)
+
+so the diagram looks like this:
+
+![diagram 5](diagram_5.png)
+
+Take advantage of the blinking cursor in the middle of the newly added Task and name it “Display Message”.  Next click on the wrench icon and select “Manual Task” .  And to complete the diagram, click on the bolded circle at the top left, it should say “Append EndEvent” as shown below.
+
+![diagram 6](diagram_6.png)
+
+Your diagram should now look like this:
+
+![diagram 7](diagram_7.png)
+
+Now let’s add a bit of Python code to execute.  Click in the Script Task and expand the “Script” Section and click the “Launch Editor” button – which will bring up a python editor.  Paste in the following code, and click the Close Button.
+{{< highlight Python "linenos=true" >}}
+my_name = "World"
+{{< / highlight >}}
+
+Now, in the second task, let’s add some text and Jinja code to display a message.  Click on the Manual Task and in the Property Panel on the right side, expand the Instructions section and add the following:
+
+{{< highlight Jinja2 "linenos=true" >}}
+Hello {{my_name}}!
+--------------------------
+Welcome to SpiffWorkflow!
+{{< / highlight >}}
+
+
+
+The right hand Property Panel should look like this (you may need to grab the bottom left of the Instruction box and drag it down to see everything you pasted in there).
+
+![Manual Properties Panel](prop_panel_manual.png)
+
+Save the diagram using the save button in the upper left.  When it asks for a name call it “hello_world”
+
+Now click on the “Simple Example” in the breadcrumbs at the top of the page to go back to the process model.
+
+Click the Start button, and you should be greeted with your “Hello World!” message:
+
+Click the Continue button to return to the Home page and then the Completed tab to see your first completed process instance!
+
+![Hello World Run](final_screen.png)
+
+
+### Shutting it all down
+{{< highlight Bash "linenos=false" >}}
+$ docker-compose down
+$ docker ps
+{{< / highlight >}}
+
+
+## What you have learned
+Today you learned a great deal about SpiffWorkflow and the new SpiffArena application, but it’s just the tip of the iceberg.  Here are few things we covered today:
+ 1. How to get SpiffArena running locally on your computer.  You can stop it using the DockerDesktop application, or by running docker container down at the command line.
+ 2. How to create a new Process Model
+ 3. How to create a simple executable BPMN diagram
+ 4. How to add start events, tasks, and end events to a diagram.
+ 5. How to create a Script Task that contains a bit of python.
+ 6. How to create a Manual Task with a message that people can see.
+
+Remember that the real power of SpiffWorkflow is its ability to help create transparency around complex rules of a business, government agency, or any other organization.  This isn’t just some quick and easy way to write code.  It is a tool for building consensus and for offering a guarantee that what you see is truly what you get.  Additional tutorials will cover some of the powerful ways that Spiffworkflow helps you create transparency by using seemingly simple diagrams to describe complex processes, critical decision points, and to coordinate parallel actions and the handoff of responsibility from one person or application to the next – all in a way everyone can see and understand.
+
+Don’t let this simple tutorial fool you.  There is some substantial power within your reach to create change and improve the world in which you live.  We post tutorials frequently to help you explore this power and understand how others are using SpiffWorkflow to transform their organizations and incorporate more people in the software development life cycle.

content/posts/articles/low_code.md

@@ -5,7 +5,7 @@ date: 2023-01-05T15:06:00-05:00
 draft: false
 author: Dan Funk
 images:
- - /images/articles/lowcode2_thumbnail.png
+  - /images/articles/lowcode2_thumbnail.png
 description: A business level introduction to SpiffWorkflow and why we adopted this open source platform and are building a suite of tools around it.
 ---
 

layouts/shortcodes/admonition.html

@@ -0,0 +1,4 @@
+<div class="admonition {{ .Get "type" | lower }}">
+<p class="first admonition-title">{{ .Get "title" }}</p>
+<p>{{ string .Inner | markdownify }}</p>
+</div>

static/css/custom.css

@@ -81,4 +81,33 @@
     #cookie-notice span { display: block; padding-top: 3px; margin-bottom: 1rem; }
     #cookie-notice a { position: relative; bottom: 4px; }
     #cookie-notice { left: 0px; }
-}
+}
+
+
+div.admonition {
+    margin: 20px 0px;
+    padding: 10px 20px;
+    background-color: #e5f7fb;
+    border-left: 5px solid #6c757d;;
+}
+
+div.admonition tt.xref, div.admonition a tt {
+    border-bottom: 1px solid #fafafa;
+}
+
+dd div.admonition {
+    margin-left: -60px;
+    padding-left: 60px;
+}
+
+div.admonition p.admonition-title {
+    font-weight: 500;
+    font-size: 1.2em;
+    margin: 0 0 10px 0;
+    padding: 0;
+    line-height: 1;
+}
+
+div.admonition p.last {
+    margin-bottom: 0;
+}

themes/fresh/docs/content/landingpage.md

@@ -16,7 +16,7 @@ Define the logo of the navigation bar in the upper left corner.
 
 ```yaml
 navbarlogo:
- image: logos/fresh.svg # Logo (from static/images/logos/)
+ image: logos/fresh.svg # Logo (from static/get_started/logos/)
  link: /
 ```
 
@@ -49,7 +49,7 @@ hero:
   buttontext: Get started
   buttonlink: "#"
   image: illustrations/worker.svg
-  # Footer logos (from static/images/logos/clients/*.svg)
+  # Footer logos (from static/get_started/logos/clients/*.svg)
   clientlogos:
   - systek
   - tribe
@@ -98,7 +98,7 @@ The sidebar is an optional parameter where you can place even more navigation it
 
 ```yaml
 sidebar:
-  # Logo (from /images/logos/___.svg)
+  # Logo (from /get_started/logos/___.svg)
   logo: fresh-square
   sections:
   - title: User
@@ -178,7 +178,7 @@ section2:
   features:
   - title: Powerful and unified interface
     text: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.
-    # Icon (from /images/illustrations/icons/___.svg)
+    # Icon (from /get_started/illustrations/icons/___.svg)
     icon: laptop-globe
   - title: Cross-device synchronisation
     text: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.
@@ -221,7 +221,7 @@ section4:
   - name: Irma Walters
     quote: Lorem ipsum dolor sit amet, elit deleniti dissentias quo eu, hinc minim appetere te usu, ea case duis scribentur has. Duo te consequat elaboraret, has quando suavitate at.
     job: Accountant
-    img: 1 # From (static/images/illustrations/faces)
+    img: 1 # From (static/get_started/illustrations/faces)
   - name: John Bradley
     quote: Lorem ipsum dolor sit amet, elit deleniti dissentias quo eu, hinc minim appetere te usu, ea case duis scribentur has. Duo te consequat elaboraret, has quando suavitate at.
     job: Financial Analyst

themes/fresh/docs/content/singlepage.md

@@ -19,7 +19,7 @@ If you'd like to have the footer displayed on your single page include `include_
 ---
 title: AGB
 sidebar: true # or false to display the sidebar
-sidebarlogo: fresh-white-alt # From (static/images/logo/)
+sidebarlogo: fresh-white-alt # From (static/get_started/logo/)
 include_footer: true # or false to display the footer
 ---
 ```

themes/fresh/exampleSite/config.yaml

@@ -17,10 +17,10 @@ params:
   openGraph: true
   # Used as meta data; describe your site to make Google Bots happy
   description:
-  # Preloader ensures images are loaded before displaying to the user. If you don't want it uncomment to set it to false
+  # Preloader ensures get_started are loaded before displaying to the user. If you don't want it uncomment to set it to false
   # preloader: false
   navbarlogo:
-  # Logo (from static/images/logos/___)
+  # Logo (from static/get_started/logos/___)
     image: logos/fresh.svg
     link: /
     # Default width/height. Uncomment if you need to change
@@ -38,9 +38,9 @@ params:
     buttontext: Get started
     # Where the main hero button links to
     buttonlink: "#"
-    # Hero image (from static/images/___)
+    # Hero image (from static/get_started/___)
     image: illustrations/worker.svg
-    # Footer logos (from static/images/logos/clients/___.svg)
+    # Footer logos (from static/get_started/logos/clients/___.svg)
     clientlogos:
     - systek
     - tribe
@@ -67,7 +67,7 @@ params:
     url: /
     button: true
   sidebar:
-    # Logo (from /images/logos/___.svg)
+    # Logo (from /get_started/logos/___.svg)
     logo: fresh-square
     sections:
     - title: User
@@ -125,7 +125,7 @@ params:
     features:
     - title: Powerful and unified interface
       text: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.
-      # Icon (from /images/illustrations/icons/___.svg)
+      # Icon (from /get_started/illustrations/icons/___.svg)
       icon: laptop-globe
     - title: Cross-device synchronisation
       text: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.
@@ -157,7 +157,7 @@ params:
       img: 3
   section5: true
   footer:
-    # Logo (from /images/logos/___)
+    # Logo (from /get_started/logos/___)
     logo: fresh-white-alt.svg
     # Social Media Title
     socialmediatitle: Follow Us