Skip to content
This repository has been archived by the owner on Oct 18, 2023. It is now read-only.
/ SiteInspector Public archive

Built in react and redux, this is a blade that provides the capability to add dynamic content any host site

License

Notifications You must be signed in to change notification settings

microsoft/SiteInspector

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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. Here’s an example of a SiteInspector site using Azure blob store to hosts it’s 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.

About

Built in react and redux, this is a blade that provides the capability to add dynamic content any host site

Resources

License

Code of conduct

Security policy

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published