diff --git a/README.md b/README.md index 8524bb7fc..50e25762d 100644 --- a/README.md +++ b/README.md @@ -11,11 +11,11 @@ Built by the folks behind [Font Awesome](https://fontawesome.com/). --- -Documentation: [shoelace.style](https://shoelace.style) +Documentation: [webawesome.com](https://webawesome.com) -Source: [github.com/shoelace-style/shoelace](https://github.com/shoelace-style/shoelace) +Source: [github.com/shoelace-style/webawesome](https://github.com/shoelace-style/webawesome) -Twitter: [@shoelace_style](https://twitter.com/shoelace_style) +Twitter: [@webawesomer](https://twitter.com/webawesomer) --- @@ -25,7 +25,7 @@ Developers can use this documentation to learn how to build Web Awesome from sou **You don't need to do any of this to use Web Awesome!** This page is for people who want to contribute to the project, tinker with the source, or create a custom build of Web Awesome. -If that's not what you're trying to do, the [documentation website](https://shoelace.style) is where you want to be. +If that's not what you're trying to do, the [documentation website](https://webawesome.com) is where you want to be. ### What are you using to build Web Awesome? @@ -33,7 +33,7 @@ Components are built with [LitElement](https://lit-element.polymer-project.org/) ### Forking the Repo -Start by [forking the repo](https://github.com/shoelace-style/shoelace/fork) on GitHub, then clone it locally and install dependencies. +Start by [forking the repo](https://github.com/shoelace-style/webawesome/fork) on GitHub, then clone it locally and install dependencies. ```bash git clone https://github.com/YOUR_GITHUB_USERNAME/webawesome diff --git a/cspell.json b/cspell.json index 609a19323..cab3879cd 100644 --- a/cspell.json +++ b/cspell.json @@ -18,7 +18,6 @@ "CACHEABLE", "callout", "callouts", - "cdndir", "chatbubble", "checkmark", "Clippy", @@ -109,7 +108,6 @@ "noopener", "noreferrer", "novalidate", - "npmdir", "Numberish", "oklab", "oklch", @@ -178,6 +176,7 @@ "Vuejs", "WCAG", "webawesome", + "webawesomer", "WEBP", "Webpacker", "xmark" diff --git a/docs/.eleventy.js b/docs/.eleventy.js index bf260e63b..c5f2a9fc7 100644 --- a/docs/.eleventy.js +++ b/docs/.eleventy.js @@ -40,9 +40,7 @@ export default function (eleventyConfig) { // Shortcodes - {% shortCode arg1, arg2 %} eleventyConfig.addShortcode('cdnUrl', location => { - return ( - `https://cdn.jsdelivr.net/npm/@shoelace-style/webawesome@${packageData.version}/` + location.replace(/^\//, '') - ); + return `https://early.webawesome.com/webawesome@${packageData.version}/` + location.replace(/^\//, ''); }); // Helpers diff --git a/docs/_includes/base.njk b/docs/_includes/base.njk index ee1a348bb..cb3e468e9 100644 --- a/docs/_includes/base.njk +++ b/docs/_includes/base.njk @@ -1,5 +1,5 @@ - + diff --git a/docs/_layouts/component.njk b/docs/_layouts/component.njk index 57d5fe5f7..2980ce651 100644 --- a/docs/_layouts/component.njk +++ b/docs/_layouts/component.njk @@ -274,6 +274,7 @@ CDN + npm React

@@ -281,11 +282,17 @@ 

import '{% cdnUrl component.path %}';
 + + Coming soon! + + Coming soon! + {# NOTE - disabled for alpha

To manually import this component from React, use the following code. 

import '@shoelace-style/webawesome/react/{{ component.tagName | stripPrefix }}';
+ #} {% endblock %} diff --git a/docs/assets/scripts/code-examples.js b/docs/assets/scripts/code-examples.js index 34f67c694..0347bc21c 100644 --- a/docs/assets/scripts/code-examples.js +++ b/docs/assets/scripts/code-examples.js @@ -15,12 +15,13 @@ document.addEventListener('click', event => { if (pen) { const codeExample = pen.closest('.code-example'); const code = codeExample.querySelector('code'); - const version = document.documentElement.dataset.version; + const cdnUrl = document.documentElement.dataset.cdnUrl; const html = - `` + + `` + `\n\n` + `${code.textContent}`; + const css = + `import '${cdnUrl}/dist/themes/default.css';` + `\n\n` + - `${code.textContent}`; - const css = 'body {\n font: 16px sans-serif;\n padding: 1rem;\n}\n'; + `body {\n font: 16px sans-serif;\n padding: 1rem;\n}\n`; const js = ''; const form = document.createElement('form'); diff --git a/docs/docs/installation.md b/docs/docs/installation.md index da4e275c1..ec38d9a1d 100644 --- a/docs/docs/installation.md +++ b/docs/docs/installation.md @@ -4,15 +4,26 @@ description: Choose the installation method that works best for you. layout: page --- -You can load Web Awesome via CDN or by installing it locally. If you're using a framework, make sure to check out the pages for [React](/frameworks/react), [Vue](/frameworks/vue), and [Angular](/frameworks/angular) for additional information. +Welcome to the Web Awesome alpha release for early backers! 👋 + +==This is a very early alpha release!== For this preview, we're only offering access to the free components through a temporary CDN. Please be aware: Things can change Things can break. You probably shouldn't be using this software in production yet! But fear not, we're working hard to polish up the free stuff you see here _plus_ all the great stuff we have planned for Web Awesome Pro! + +==To be clear, this release _only_ includes a preview the components in Web Awesome Free!== + +Thank you so much for backing us! + +- [Report a bug](https://github.com/shoelace-style/webawesome-alpha/issues) +- [Get help / ask a question](https://github.com/shoelace-style/webawesome-alpha/discussions) + +--- ## Autoloading via CDN (Easiest) The autoloader is the easiest way to use Web Awesome. A lightweight script watches the DOM for unregistered Web Awesome elements and lazy loads them for you — even if they're added dynamically. ```html - - + + ``` Now you can [start using Web Awesome!](/getting-started/usage) @@ -25,16 +36,16 @@ While convenient, autoloading may lead to a [Flash of Undefined Custom Elements] Some components rely on assets (icons, images, etc.) and Web Awesome needs to know where they're located. For convenience, Web Awesome will try to auto-detect the correct location based on the script you've loaded it from. This assumes assets are colocated with `autoloader.js` and will "just work" for most users. -If you're using the CDN, you can skip this section. However, if you're [cherry picking](#cherry-picking) or bundling Web Awesome, you'll need to set the base path. You can do this one of two ways. +==If you're using the CDN, you can skip this section.== However, if you're [cherry picking](#cherry-picking) or bundling Web Awesome, you'll need to set the base path. You can do this one of two ways. ```html - + ``` @@ -44,7 +55,7 @@ Most of the magic behind assets is handled internally by Web Awesome, but if you ```html ``` @@ -80,10 +91,10 @@ Cherry picking will only the components you need up front, while limiting the nu Here's an example that loads only the button component. ```html - + - diff --git a/docs/docs/localization.md b/docs/docs/localization.md index 047644209..394cef22a 100644 --- a/docs/docs/localization.md +++ b/docs/docs/localization.md @@ -22,12 +22,43 @@ Through the magic of a mutation observer, changing the `lang` attribute will aut ## Available Translations -Web Awesome ships with a number of translations. The default is English (US), which also serves as the fallback locale. As such, you do not need to import the English translation. To see a list of all available translations in the latest version, [refer to this directory](https://github.com/shoelace-style/shoelace/tree/current/src/translations). +Web Awesome ships with a number of translations. The default is English (US), which also serves as the fallback locale. As such, you do not need to import the English translation. -The location of translations depends on how you're consuming Web Awesome. +Available translations include: -- If you're using the CDN, [import them from the CDN](https://www.jsdelivr.com/package/npm/@shoelace-style/shoelace?path=%CDNDIR%%2Ftranslations) -- If you're using a bundler, import them from `@shoelace-style/shoelace/%NPMDIR%/translations/[lang].js` +
+ +- ar +- da +- de-ch +- de +- en-gb +- en +- es +- fa +- fr +- he +- hr +- hu +- id +- ja +- nl +- pl +- pt +- ru +- sl +- sv +- tr +- zh-cn +- zh-tw + +
+ +You can import translations using the following syntax, where `` is replaced with any language code shown above. + +```js +import '{% cdnUrl "dist/translations/.js" %}'; +``` You do not need to load translations up front. You can import them dynamically even after updating the `lang` attribute. Once a translation is registered, localized components will update automatically. @@ -98,9 +129,9 @@ You can provide your own translations if you have specific needs or if you don't Let's create a Spanish translation as an example. The following assumes you're using TypeScript, but you can also create translations with regular JavaScript. -```js -import { registerTranslation } from '@shoelace-style/shoelace/dist/utilities/localize'; -import type { Translation } from '@shoelace-style/shoelace/dist/utilities/localize'; +```ts +import { registerTranslation } from 'path/to/webawesome/dist/utilities/localize'; +import type { Translation } from 'path/to/webawesome/dist/utilities/localize'; const translation: Translation = { $code: 'es', diff --git a/docs/docs/themes.md b/docs/docs/themes.md index 9ee0c345e..f57bf2d59 100644 --- a/docs/docs/themes.md +++ b/docs/docs/themes.md @@ -9,7 +9,7 @@ Web Awesome is designed to be highly customizable through pure CSS. Out of the b In essence, a theme is a stylesheet that uses the Web Awesome API to define custom properties and apply custom styles to components. To create a theme, you will need a decent understanding of CSS, including [CSS Custom Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) and the [`::part` selector](https://developer.mozilla.org/en-US/docs/Web/CSS/::part). :::info -For component developers, built-in themes are also available as JavaScript modules that export [Lit CSSResult](https://lit.dev/docs/api/styles/#CSSResult) objects. You can find them in `/%NPMDIR%/themes/*.styles.js`. +For component developers, built-in themes are also available as JavaScript modules that export [Lit CSSResult](https://lit.dev/docs/api/styles/#CSSResult) objects. You can find them in `/dist/themes/*.styles.js`. ::: ## Theme Basics @@ -34,7 +34,7 @@ To activate a theme, import it and apply the theme's class to the `` eleme ```html - + @@ -54,7 +54,7 @@ You can activate different themes and styles on various containers throughout th ```html - + diff --git a/package.json b/package.json index a4b7a3161..15b145747 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "@shoelace-style/shoelace", "description": "A forward-thinking library of web components.", - "version": "2.8.0", + "version": "3.0.0-alpha.1", "homepage": "https://github.com/shoelace-style/shoelace", "author": "Web Awesome", "license": "MIT",