Compare commits

..

4 Commits

Author SHA1 Message Date
konnorrogers
c7a3397d90 fix logged out user stuff 2025-06-30 11:58:14 -04:00
Cory LaViska
f1e09856a6 show based on currentUser.hasPro 2025-06-30 11:29:17 -04:00
Cory LaViska
4de90e84ff add isPro flag to palettes 2025-06-30 11:29:05 -04:00
Cory LaViska
8d96aca8bd add pro badge to themer 2025-06-30 11:28:52 -04:00
11 changed files with 41 additions and 89 deletions

10
package-lock.json generated
View File

@@ -589,10 +589,6 @@
"node": ">=12.17"
}
},
"node_modules/@awesome.me/webawesome": {
"resolved": "packages/webawesome",
"link": true
},
"node_modules/@babel/code-frame": {
"version": "7.23.5",
"resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.23.5.tgz",
@@ -2488,6 +2484,10 @@
"resolved": "https://registry.npmjs.org/@shoelace-style/localize/-/localize-3.2.1.tgz",
"integrity": "sha512-r4C9C/5kSfMBIr0D9imvpRdCNXtUNgyYThc4YlS6K5Hchv1UyxNQ9mxwj+BTRH2i1Neits260sR3OjKMnplsFA=="
},
"node_modules/@shoelace-style/webawesome": {
"resolved": "packages/webawesome",
"link": true
},
"node_modules/@shoelace-style/webawesome-pro": {
"resolved": "packages/webawesome-pro",
"link": true
@@ -13974,7 +13974,7 @@
}
},
"packages/webawesome": {
"name": "@awesome.me/webawesome",
"name": "@shoelace-style/webawesome",
"version": "3.0.0-beta.1",
"license": "MIT",
"dependencies": {

View File

@@ -1 +0,0 @@
Visit our documentation! <https://webawesome.com>

View File

@@ -123,9 +123,6 @@ export default async function (eleventyConfig) {
/** This largely mimics what an app would do and just stubs out what we don't care about. */
return nunjucks.renderString(content, {
// Stub the server EJS shortcodes.
currentUser: {
hasPro: false,
},
server: {
head: '',
loginOrAvatar: '',

View File

@@ -12,7 +12,6 @@
<h2>Resources</h2>
<ul>
<li><a href="https://github.com/shoelace-style/webawesome/discussions" target="_blank">Help &amp; Support</a></li>
<li><a href="https://github.com/shoelace-style/webawesome/">Source Code</a></li>
<li><a href="/docs/resources/community">Community</a></li>
<li><a href="/docs/resources/accessibility">Accessibility</a></li>
<li><a href="/docs/resources/browser-support">Browser Support</a></li>

View File

@@ -26,8 +26,8 @@ If you're using a bundler, make sure it comes _before_ any components are import
// Make sure this import is first.
import '@lit-labs/ssr-client/lit-element-hydrate-support.js';
import '@awesome.me/webawesome/dist/components/button/button.js';
import '@awesome.me/webawesome/dist/components/input/input.js';
import 'webawesome/dist/components/button/button.js';
import 'webawesome/dist/components/input/input.js';
```
## Enable Server Rendering
@@ -43,7 +43,7 @@ import litPlugin from '@lit-labs/eleventy-plugin-lit';
eleventyConfig.addPlugin(litPlugin, {
mode: 'worker',
componentModules: ['@awesome.me/webawesome/dist/components/button/button.js', '@awesome.me/webawesome/dist/components/input/input.js'],
componentModules: ['webawesome/dist/components/button/button.js', 'webawesome/dist/components/input/input.js'],
});
```
@@ -114,4 +114,4 @@ Here are some known issues and things we're still working on.
- `@shoelace-style/localize` (our localization library) has no way to set a language currently so it always falls back to `en`.
- `<wa-icon>` has no fallback if there's no JS besides a blank `<svg>`. There's perhaps some backend mechanisms we can use to fetch. But requires altering APIs. Should also have a way to set height / widths, but we don't want to increase pain for SSR users.
- `<wa-qr-code>` QR Code will not error on the backend and will render a blank canvas at the appropriate size, but will not render the canvas until the client component connects.
- `setBasePath` and `kit codes` may need reconfiguring to work with SSR.
- `setBasePath` and `kit codes` may need reconfiguring to work with SSR.

View File

@@ -14,7 +14,9 @@ Thank you so much for backing us!
- [Get help / ask a question](https://github.com/shoelace-style/webawesome/discussions)
- [See what's new since the last version](/docs/resources/changelog)
Welcome to Web Awesome beta! [Learn more](https://webawesome.com/) about this project and [how to contribute to it.](https://webawesome.com/docs/resources/contributing)
:::warning
As a Web Awesome backer, this beta release is _just for you_. Please refrain from sharing it for the time being!
:::
---
@@ -58,7 +60,11 @@ Font Awesome users can set their kit code to unlock Font Awesome Pro icons. You
The autoloader is the easiest way to use Web Awesome, but different projects (or your own preferences!) may require different installation methods.
### Cherry Picking from CDN
### Installing via npm
An npm package isn't yet available, but we'll have one soon! For now, please enjoy [Web Awesome from the CDN](#quick-start-autoloading-via-cdn).
### Cherry Picking
Cherry picking will only load the components you need up front, while limiting the number of files the browser has to download. The disadvantage is that you need to import each individual component on each page it's used. You'll still need to include the default theme (`styles/themes/default.css`) or another theme to style any imported components.
@@ -80,32 +86,6 @@ You can copy and paste the code to import a component from the "Importing" secti
You will see files named `chunk.[hash].js` in the `chunks` directory. Never import these files directly, as they are generated and change from version to version.
:::
### Installing via npm
```bash
npm install @awesome.me/webawesome
```
And then in your JavaScript files, import the components you need.
:::warning
Web Awesome does not a provide a single import with all Web Awesome components. Instead, you must "cherry pick" the components you want to use.
:::
```js
// import the Web Awesome base stylesheet
import "@awesome.me/webawesome/dist/styles/webawesome.css"
// import the default "theme"
import "@awesome.me/webawesome/dist/styles/themes/default.css"
// <wa-button>
import "@awesome.me/webawesome/dist/components/button/button.js"
// <wa-input>
import "@awesome.me/webawesome/dist/components/input/input.js"
```
Once they've been imported, you can use them in your HTML normally. Component imports are located in the "Importing" section of each component's documentation.
### Setting the Base Path
@@ -115,12 +95,12 @@ Some components rely on assets (icons, images, etc.) and Web Awesome needs to kn
```html
<!-- Option 1: the data-webawesome attribute -->
<script src="bundle.js" data-webawesome="/path/to/webawesome/dist"></script>
<script src="bundle.js" data-webawesome="/path/to/web-awesome/dist"></script>
<!-- Option 2: the setBasePath() method -->
<script type="module">
import { setBasePath } from '/path/to/webawesome/dist/webawesome.js';
setBasePath('/path/to/webawesome/dist');
import { setBasePath } from '/path/to/web-awesome/dist/webawesome.js';
setBasePath('/path/to/web-awesome/dist');
</script>
```
@@ -130,7 +110,7 @@ Most of the magic behind assets is handled internally by Web Awesome, but if you
```html
<script type="module">
import { getBasePath, setBasePath } from '/path/to/webawesome/dist/webawesome.js';
import { getBasePath, setBasePath } from '/path/to/web-awesome/dist/webawesome.js';
setBasePath('/path/to/assets');
@@ -143,14 +123,3 @@ Most of the magic behind assets is handled internally by Web Awesome, but if you
const assetPath = getBasePath('file.ext');
</script>
```
## The difference between `/dist` and `/dist-cdn`
If you have Web Awesome installed locally via NPM, you'll notice 2 directories. `/dist-cdn` and `/cdn`.
The `/dist-cdn` files are bundled differently than the `/dist` files. The `/dist-cdn` files come pre-bundled, which means all dependencies are "inlined" so there are no "bare" references like `import "lit"`. The `/dist` files **DO NOT** come pre-bundled, allowing your bundler of choice to more efficiently de-duplicate dependencies, resulting in smaller bundles and optimal code sharing.
TLDR:
- `@awesome.me/webawesome/dist-cdn` is for CDNs or people not using a bundler.
- `@awesome.me/webawesome/dist` is for bundlers or importmaps.

View File

@@ -45,4 +45,4 @@ Follow [@webawesomer](https://twitter.com/webawesomer) on Twitter for general up
<wa-button variant="brand" href="https://twitter.com/webawesomer" target="_blank" style="margin-block-end: var(--wa-flow-spacing);">
<wa-icon name="twitter" family="brands" slot="start"></wa-icon>
Follow on Twitter
</wa-button>
</wa-button>

View File

@@ -15,13 +15,11 @@ layout: page
</div>
<div id="theme-viewer">
{% raw %}
{% if not currentUser.hasPro %}
<p>
Additional themes are available to pro users. Please <a href="/login">login to view pro themes</a>.
</p>
{% endif %}
{% endraw %}
{% if not currentUser.hasPro %}
<p>
Additional themes are available to pro users. Please <a href="/login">login to view pro themes</a>.
</p>
{% endif %}
<wa-radio-group id="theme-picker" label="Theme Selector" value="default" orientation="horizontal">
{% for theme in themer.themes %}

View File

@@ -100,7 +100,7 @@ layout: false
<div class="wa-flank">
<wa-avatar
shape="rounded"
style="background-color: var(--wa-color-green-60); color: var(--wa-color-green-95)"
style="--background-color: var(--wa-color-green-60); --text-color: var(--wa-color-green-95)"
>
<wa-icon slot="icon" name="sword-laser"></wa-icon>
</wa-avatar>
@@ -119,7 +119,7 @@ layout: false
<div class="wa-flank">
<wa-avatar
shape="rounded"
style="background-color: var(--wa-color-cyan-60); color: var(--wa-color-cyan-95)"
style="--background-color: var(--wa-color-cyan-60); --text-color: var(--wa-color-cyan-95)"
>
<wa-icon slot="icon" name="robot-astromech"></wa-icon>
</wa-avatar>
@@ -403,7 +403,7 @@ layout: false
<a href="" class="wa-flank wa-link-plain" tabindex="-1">
<wa-avatar
shape="rounded"
style="background-color: var(--wa-color-yellow-90); color: var(--wa-color-yellow-50)"
style="--background-color: var(--wa-color-yellow-90); --text-color: var(--wa-color-yellow-50)"
>
<wa-icon slot="icon" name="egg-fried"></wa-icon>
</wa-avatar>
@@ -435,7 +435,7 @@ layout: false
<a href="" class="wa-flank wa-align-items-start wa-link-plain" tabindex="-1">
<wa-avatar
shape="rounded"
style="background-color: var(--wa-color-blue-90); color: var(--wa-color-blue-50)"
style="--background-color: var(--wa-color-blue-90); color: var(--wa-color-blue-50)"
>
<wa-icon slot="icon" name="shield"></wa-icon>
</wa-avatar>
@@ -449,7 +449,7 @@ layout: false
<a href="" class="wa-flank wa-align-items-start wa-link-plain" tabindex="-1">
<wa-avatar
shape="rounded"
style="background-color: var(--wa-color-green-90); color: var(--wa-color-green-50)"
style="--background-color: var(--wa-color-green-90); color: var(--wa-color-green-50)"
>
<wa-icon slot="icon" name="chevrons-up"></wa-icon>
</wa-avatar>
@@ -463,7 +463,7 @@ layout: false
<a href="" class="wa-flank wa-align-items-start wa-link-plain" tabindex="-1">
<wa-avatar
shape="rounded"
style="background-color: var(--wa-color-red-90); color: var(--wa-color-red-50)"
style="--background-color: var(--wa-color-red-90); color: var(--wa-color-red-50)"
>
<wa-icon slot="icon" name="explosion"></wa-icon>
</wa-avatar>
@@ -477,7 +477,7 @@ layout: false
<a href="" class="wa-flank wa-align-items-start wa-link-plain" tabindex="-1">
<wa-avatar
shape="rounded"
style="background-color: var(--wa-color-yellow-90); color: var(--wa-color-yellow-50)"
style="--background-color: var(--wa-color-yellow-90); color: var(--wa-color-yellow-50)"
>
<wa-icon slot="icon" name="moon-stars"></wa-icon>
</wa-avatar>

View File

@@ -266,17 +266,11 @@ layout: page
</div>
<h1 class="brand-font">Make something <span class="emphasis">awesome</span> with open-source web components</h1>
<div class="hero-cta">
{%- raw -%}
{% if currentUser.hasPro %}
<span style="text-align: center; width: 100%; font-size: var(--wa-font-size-l);">Thanks for being a Web Awesome Pro subscriber!</span>
{% else %}
<span><em>Psst!</em> You can pre-order Web Awesome Pro at a low, guaranteed-for-life price &mdash; but not for long. Get in while the gettins good.</span>
<wa-button class="wa-dark" size="small" href="https://www.kickstarter.com/projects/fontawesome/web-awesome">
<wa-icon slot="start" name="person-running"></wa-icon>
Pre-order WA Pro
</wa-button>
{% endif %}
{% endraw %}
<span><em>Psst!</em> You can pre-order Web Awesome Pro at a low, guaranteed-for-life price &mdash; but not for long. Get in while the gettins good.</span>
<wa-button class="wa-dark" size="small" href="https://www.kickstarter.com/projects/fontawesome/web-awesome">
<wa-icon slot="start" name="person-running"></wa-icon>
Pre-order WA Pro
</wa-button>
</div>
</div>
</div>

View File

@@ -1,8 +1,5 @@
{
"name": "@awesome.me/webawesome",
"publishConfig": {
"access": "public"
},
"name": "@shoelace-style/webawesome",
"description": "A forward-thinking library of web components.",
"version": "3.0.0-beta.1",
"homepage": "https://webawesome.com/",
@@ -31,9 +28,8 @@
"./dist/translations/*": "./dist/translations/*"
},
"files": [
"README.md",
"dist",
"dist-cdn"
"cdn"
],
"keywords": [
"web components",