Built in react and redux, this is a blade that provides the capability to add dynamic content any host site
Перейти к файлу
Eric Langland 0d95ad77cc
Merge pull request #30 from Microsoft/readme-split
Breaking out the CONTRIBUTIONS blerb into it's own file per new standards.
2019-03-01 11:23:39 -08:00
src Move the hash files generated by url-loader to a subfolder in dist 2018-12-21 10:06:45 -08:00
.gitignore Initial commit 2018-06-25 12:52:39 -07:00
.npmrc adding right scripts 2018-12-04 11:41:36 -08:00
CONTRIBUTING.md Splitting out the Readme.md 2019-02-28 17:45:23 -08:00
LICENSE Clean commit. 2018-08-22 14:39:27 -07:00
README.md upper case 2019-02-28 22:58:15 -08:00
SiteInspector.sln Renaming to getting started tab 2018-12-05 12:05:02 -08:00
install.js Updating tab title 2018-12-10 11:27:59 -08:00
package.json merged master -> npm-install-remove-prefix 2018-12-07 16:43:55 -08:00

README.md

Welcome to SiteInspector.js!    Build status

Robot SiteInspector.js is a framework for a lightweight pane that slides out from the side of your browser window and can be used to enhance any web site or portal with additional, contextual content. Use it to display usage statistics, expose diagnostic tools, show performance analytics, or any other useful information to help you manage and maintain your site.

Running the demo

To quickly see SiteInspector in action, try out this demo. Clone the project and install npm if you don't have it already.

Then run:

npm run demo

This will launch a test server (http://localhost:3000) with an example of the SiteInspector.JS shell embedded in the page. The small laptop logo tab on the left of the page can be clicked to slide out the blade framework as shown on the right.

Building and hosting your own files

The SiteInspector framework has the ability to be hosted anywhere you chose. You can include the shell (siteinspector.js) and tab (yourcustomertab1.js, yourcustomertab2.js) files in a folder in your website, or they can be hosted externally to your site in a blob store or another HTTP location.

To use SiteInspector on your site, all you need is to include the loader script at the top of the pages on your website. Heres an example of a SiteInspector site using Azure blob store to hosts its files.


    <script>
            (function (d, s, si) {
                let m = d.getElementsByTagName(s)[0];
            let j = d.createElement(s);
            j.src = si; j.async = 1;
            m.parentNode.insertBefore(j, m);
                j.onload = function () {
                window.siteInspector.init({
                    title: 'SiteInspector.JS',
                    aboutUrl: 'https://github.com/microsoft/siteinspector',
                    tabs: [
                        {
                            title: 'My Custom Tab',
                            id: 'gettingstartedtab',
                            location: 'https://redir.blob.core.windows.net/assets/gettingStartedTab.js',
                        }
                    ],
                });
            };
        })(document, "script", "https://redir.blob.core.windows.net/assets/siteinspector.js");
    </script>

To generate the shell, navigate to the src/SiteInspector folder and run the following npm command.

npm run build

This will output a SiteInspector.js file in the ./dist folder.

Next, you'll need to build the tabs in a similar fashion.

For instructions on writing your own customer tabs, see the doc for the Getting Started Tab.

Once you've built the shell and the tabs, you can upload them to a blob store, CDN, or your website and use the loader script shown above to start using SiteInspector.

Contributing

See contributing.