fix broken image links + setup retreival of live code snippets

Author: jansenbe

.openpublishing.publish.config.json

@@ -38,6 +38,12 @@
       "url": "https://github.com/Microsoft/templates.docs.msft",
       "branch": "master",
       "branch_mapping": {}
+    },
+    {
+      "path_to_root": "PnP-Tools",
+      "url": "https://github.com/SharePoint/PnP-Tools.git",
+      "branch": "master",
+      "branch_mapping": {}
     }
   ],
   "branch_target_mapping": {},

docs/transform/modernize-classic-sites.md

@@ -20,7 +20,7 @@ If you scan over your site you'll however notice that following pages are still
 - Home page and all other site pages
 - List and library pages for certain lists and libraries
 
-If you want to maximize the use of the modern user interface for your site pages plus list and library pages then checkout the [Modernize your user interface](modernize-userinterface.md) article.
+If you want to maximize the use of the modern user interface for your site pages plus list and library pages then checkout the [Modernize your user interface](modernize-userinterface.md) article. During this user interface you'll modernization you will also have to handle the modernization of your customizations as explained in [Modernize your customizations](modernize-customizations.md).
 
 ### Connect your sites to Office 365 Groups
 

docs/transform/modernize-connect-to-office365-group.md

@@ -23,7 +23,7 @@ A first approach to connect an Office 365 to your site is to use the option avai
 
 Site Actions | Wizard
 ---------|---------
- ![Site Actions](/media/modernize/groupifyusingui_1.png) | ![Wizard](/media/modernize/groupifyusingui_3.png)
+ ![Site Actions](media/modernize/groupifyusingui_1.png) | ![Wizard](media/modernize/groupifyusingui_3.png)
 
 ## Programmatically connecting an Office 365 group
 
@@ -112,8 +112,7 @@ To help you verify this file before using it you can use below PowerShell script
 - **[ERROR] _siteUrl_ : Alias [_siteAlias_] was already marked as approved alias for another site in this file**: The proposed site alias was already defined for another site in earlier input lines of the bulk "groupify" CSV file
 - **[ERROR] _siteUrl_ : Site does not exist or is not available (status = _site.Status_)**: The provided site URL does not represent a reachable site collection
 
-```PowerShell
-```
+[!code-powershell[validategroupifyinput](../../PnP-Tools/Solutions/SharePoint.Modernization/Scripts/Groupify/ValidateInput.ps1 "Validate groupify input file")]
 
 During script execution a log file will be generated combined with an error file which contains a subset of the log file (only the errors).
 
@@ -135,7 +134,6 @@ Now that we've an input file that's defining the sites that need to be "groupifi
 
 Running the below PowerShell script requires you to update the tenant admin center URL and at run time provide credentials and the CSV input file.
 
-```PowerShell
-```
+[!code-powershell[bulkgroupify](../../PnP-Tools/Solutions/SharePoint.Modernization/Scripts/Groupify/GroupifySite.ps1 "Bulk groupify sites")]
 
 During script execution a log file will be generated combined with an error file which contains a subset of the log file (only the errors).

docs/transform/modernize-customizations.md

@@ -15,10 +15,10 @@ A very common model to control how a field is represented in the SharePoint user
 You can use column formatting to customize how fields in SharePoint lists and libraries are displayed. To do this, you construct a JSON object that describes the elements that are displayed when a field is included in a list view, and the styles to be applied to those elements. The column formatting does not change the data in the list item or file; it only changes how it’s displayed to users who browse the list. Anyone who can create and manage views in a list can use column formatting to configure how view fields are displayed.
 
 For example, a list with the fields Title, Effort, Assigned To, and Status with no customizations applied might look like this:
-![Before column formatter](/media/modernize/sp-columnformatting-none.png)
+![Before column formatter](media/modernize/sp-columnformatting-none.png)
 
 A list with the appearance of the Effort, Assigned To, and Status fields customized via column formatting might look like this:
-![After column formatter](/media/modernize/sp-columnformatting-all.png)
+![After column formatter](media/modernize/sp-columnformatting-all.png)
 
 To learn more about column formatting check out these resources:
 
@@ -29,7 +29,7 @@ To learn more about column formatting check out these resources:
 
 SharePoint Framework Extensions enable you to extend the SharePoint user experience within modern pages and document libraries, while using the familiar SharePoint Framework tools and libraries for client-side development. Specifically Field Customizers allow you fully control how field data is presented in your list or library views. Below you'll see an example of a percent column.
 
-![Field customizer](/media/modernize/spfx-field-customizer-percent-field-graphic.png)
+![Field customizer](media/modernize/spfx-field-customizer-percent-field-graphic.png)
 
 To learn more about SharePoint Framework (field customizer) extensions check out these resources:
 
@@ -44,7 +44,7 @@ To learn more about SharePoint Framework (field customizer) extensions check out
 
 Using a list user custom action that adds custom menu options or embeds JavaScript is next to JSLink a very common customization pattern which does not work anymore for the modern list and library experience. Luckily using SharePoint Framework Extensions you can realize similar customizations, more in particular via command set extension which allows you to add custom ECB menu items or custom buttons to the command bar of a list view for a list or a library. You can associate any JavaScript (TypeScript) action to these commands.
 
-![List view command set](/media/modernize/spfx-listview-commandset-doc-select.png)
+![List view command set](media/modernize/spfx-listview-commandset-doc-select.png)
 
 To learn more about SharePoint Framework (list view command set) extensions check out these resources:
 
@@ -64,7 +64,7 @@ SharePoint has multiple flavors of classic site pages, there's wiki pages, web p
 
 SharePoint has many out-of-the-box web parts that do work on classic pages...but are not compatible with modern pages. There's also a nice set of modern, 1st party, client side web parts available that offer similar functionality for some of the classic web parts...however, there's no feature parity. If you need the functionality of a classic web part as a modern client side equivalent you'll need to either roll your own version based on the SharePoint Framework or alternatively consume a web part from the large list of open source SharePoint Framework web parts which you can find in the [sp-dev-fx-webparts](https://github.com/SharePoint/sp-dev-fx-webparts) GitHub repository.
 
-![SPFX Web Part sample](/media/modernize/spfx-react-image-magnifier.gif)
+![SPFX Web Part sample](media/modernize/spfx-react-image-magnifier.gif)
 
 To learn more about SharePoint Framework client side web parts check out these resources:
 
@@ -77,7 +77,7 @@ To learn more about SharePoint Framework client side web parts check out these r
 
 In the introduction we mentioned the common pattern of adding a site banner by embedding JavaScript via a site/web scoped user custom action. As this pattern is not compatible with the modern user interface you'll need to rework this type of customization based upon the SharePoint Framework Application Customizer extensions. Using application customizers you can insert custom script that can be used to embed HTML into the SharePoint modern user interface at predefined extension points at the top/bottom of the page.
 
-![SPFX Application Customizer sample](/media/modernize/spfx-application-customizer-sample.png)
+![SPFX Application Customizer sample](media/modernize/spfx-application-customizer-sample.png)
 
 To learn more about SharePoint Framework (application customizer) extensions check out these resources: