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

@salesforce/wes-for-ec

v1.0.21

Published

Website Experience Subsystem theme created to support a new design system on Experience Cloud

Downloads

458

Vulnerabilities

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

Links

Git

Maintainers

lwc-adminlwc-admindme722dme722nolanlawsonnolanlawsonire-npm-team-userire-npm-team-userjburniejburnieabirchfieldsfdcabirchfieldsfdcdlouvtondlouvtonmobifymobifyjmsjtujmsjtujasonschroeder-sfdcjasonschroeder-sfdcpackagellamapackagellamamawardmawarddanielshoxdanielshoxduane.chewduane.chewdferrodferrojcourtnerjcourtnerjye-sfjye-sfadirasanamadirasanamhkiihkiiiamaziziamazizdbreese-salesforcedbreese-salesforceashokrudrarajuashokrudrarajudhersamdhersamdemianbrechtdemianbrechtmbettiombettiodamilareolowoniyidamilareolowoniyimmadialaganmmadialaganmjrustmjrustsalesforce-releasessalesforce-releaseskevinv11nkevinv11nbyaobyaopmdartuspmdartusekashidaekashidaravi.jayaramapparavi.jayaramappaapapkoapapkojleen-sfdcjleen-sfdcjqianjqiancwallsfcwallsfdhagberg-sfdhagberg-sfkhawkinskhawkinsamphroamphrojodarovejodarovesfdctakasfdctakafernomacfernomacjimjagjimjagivarleyivarleyjbartolotta-sfdcjbartolotta-sfdc

Keywords

wesWebsite Experience SubsystemExperience CloudSalesforceBusiness Technology Design

Readme

Website Experience Subsystem for Experience Cloud (WES for EC)

What is WES for EC?

This project aims to bring the Website Experience Subsystem (WES) to Experience Cloud. By installing WES for Experience Cloud on a LWR site, you will gain access to WES grids, design tokens and utilities. The theme also slightly swaps some base Out-of-the-box components styles with design tokens from the Website Experience System. The Website Experience Subsystem provides a branded Salesforce experience and is currently recommended for Salesforce experiences that sit outside the core platform like websites, experience cloud communities and landing pages.

=> Check the WES for EC Website for instructions.

Installation on an Experience Cloud LWR Site

Method 1: Static Resources

  1. Download the wes_for_ec.css file.
  2. Upload the WES for EC styles (wes_for_ec.css) as a static resource to your experience cloud site and call it wesforec.
  3. Inside experience builder, go to the Advanced tab and click on "Edit Head Markup"
  4. Import the WES for EC bundle just before the end of the </head> tag using <link rel="stylesheet" href="{ basePath }/sfsites/c/resource/wesforec.css" />
  5. Reload your site on Experience Builder and it should now display WES styles.

Installation on Open Source Projects

Method 1: Import Resources

  1. Download the wes_for_ec.css file.
  2. Import the file to your project's <head> section <link rel="stylesheet" href="wesforec.css" />

Method 2: NPM Package (with Experience Cloud global hooks)

  1. On the terminal type npm i @salesforce/wes-for-ec
  2. Import the dist/wes_for_ec.css file to your project. **The private package will only be visible if you are a member of the Salesforce organization on NPM.

Local Installation

Install the wes-to-ec project in your local environment to modify, contribute or test.

  1. Clone the project git clone [email protected]:salesforce-ux/wes-for-ec.git
  2. Install dependencies npm install
  3. Run demo site npm run dev
  4. Build the wes_for_ec.css bundle npm build

FAQ

Can I use this bundle on non-LWR Experience Cloud sites?

This project was created and tested to support WES in LWR Experience Cloud sites. If you with to install WES in any other environment please refer directly to Website Experience Subsystem (WES).

Can I use WES components?

WES components are not currently supported on Experience Cloud due to icompatibility with the Lightning Web Component framework. However, you can use WES design tokens to build your own custom LWC components.