npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

wch-site-developer-tools

v0.2.2

Published

A developer application to display and preview all components in a WCH site.

Downloads

21

Vulnerabilities

Powered byPowered by Snyk
  • 0High
  • 0Medium
  • 0Low

Links

Maintainers

willizardwillizardmcgivanmcgivannikodem.graczewski.acousticnikodem.graczewski.acousticmarcin-pasiewiczmarcin-pasiewiczthurekthurekllpomerlllpomerl

Keywords

Readme

wch-site-developer-tools

A developer application to display and preview all components in a WCH site.

Table of contents

Introduction

A standalone developer application to list, preview and create layouts is included in this SPA source code. It displays a gallery of all the components (ie: type and layout combination) in your WCH site. Each type can be previewed using all of its layouts. To get started, just start the app by following the steps below.

Screenshots

Component gallery

component gallery

Layout preview

layout preview

Prerequisites

  • A WCH tenant in Trial or Standard Tier
  • wchtools-cli v2.0.3 or above
  • Node.js v6.11.1 or above

Install and deploy the sample

Update the SDK CLI

  1. Install the @ibm-wch-sdk/cli package globally via npm install -g @ibm-wch-sdk/cli.
  2. If it is already installed, update with npm update -g @ibm-wch-sdk/cli.

Update your site application

To get component preview capabilities:

  1. (Optional) Update your SPA from wch-site-application, sample-site-react or sample-site-vue.
  2. Make sure it is building correctly with the npm run build command.

Configure and start the application

  1. Make sure CORS is enabled in WCH at Hub Setup > General Setting > Security.
  2. Use the npm run start-dev-tools command start the application from your SPA directory. It can be accessed at http://localhost:3000/ in your browser.

Using the application

The first time the application is opened, you will be prompted to fill in your WCH API URL, username and password. These options can be updated at any time by clicking on the Configure button in the application header.

configure the application

A gallery of your components and associated layouts will display in your browser. Click on a layout name to preview the sample content. The preview is created by pointing to a special URL in your live WCH site. Only components that have at least 1 layout and 1 piece of content can be previewed. The piece of content tagged with "IBM tools" will be used for preview, otherwise a piece of content is randomly selected.

Here you see the Design page component being previewed using both its left and right versions:

left layout preview

right layout preview

Gallery thumbnail options

By default, the thumbnail for each type card is a static image from WCH. To use a rendered live version in a scaled iframe instead, open the Configure dialog, check the box marked Use live thumbnails, and save. It is not recommended to do this if you have many components in the gallery, for browser performance.

You can also configure the Maximum number of Types to display option, to control how many type cards are shown on the page at one time.

If you are running your SPA locally (eg: http://localhost:4200/, http://localhost:4201/, http://localhost:4202/), you can point the layout preview to that URL with the Local preview port option.

Creating thumbnails for types

The component previews each contain a button for capturing a thumbnail. A small version (max 300x600 pixels) of what is currently seen on the screen will be generated, and you can save it to your computer. This image can then be uploaded in WCH as a thumbnail for the associated type.

Creating new layouts

Use the "New layout" button to create a layout for a Type. Just input a name, and the new layout will be created, built and deployed from your site application directory. Only one layout can be created at a time.

new layout dialog

After developing your new layout in your SPA code base, use npm run build-deploy to push it to your content hub.

WCH helper package

This sample uses the js helper for querying WCH.

License

See the included license file License.

back to top