diff --git a/.github/workflows/node.js.yml b/.github/workflows/node.js.yml index ff8b44e35..dbc3a46d1 100644 --- a/.github/workflows/node.js.yml +++ b/.github/workflows/node.js.yml @@ -1,5 +1,36 @@ -# This workflow will do a clean install of node dependencies, cache/restore them, build the source code and run tests across different versions of node -# For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions +# # This workflow will do a clean install of node dependencies, cache/restore them, build the source code and run tests across different versions of node +# # For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions + +# name: Node.js CI + +# on: +# push: +# branches: [next] +# pull_request: +# branches: [next] + +# jobs: +# build: +# runs-on: ubuntu-latest + +# strategy: +# matrix: +# node-version: [20.x] +# # See supported Node.js release schedule at https://nodejs.org/en/about/releases/ + +# steps: +# - uses: actions/checkout@v4 +# - name: Use Node.js ${{ matrix.node-version }} +# uses: actions/setup-node@v4 +# with: +# node-version: ${{ matrix.node-version }} +# cache: 'npm' +# - run: npm ci +# - run: npx playwright install-deps +# - run: npm run verify + +# # This workflow will do a clean install of node dependencies, cache/restore them, build the source code and run tests across different versions of node +# # For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions name: Node.js CI @@ -10,21 +41,61 @@ on: branches: [next] jobs: - build: + lint: runs-on: ubuntu-latest strategy: matrix: - node-version: [18.x] + node-version: [20.x] # See supported Node.js release schedule at https://nodejs.org/en/about/releases/ steps: - - uses: actions/checkout@v3 + - uses: actions/checkout@v4 - name: Use Node.js ${{ matrix.node-version }} - uses: actions/setup-node@v3 + uses: actions/setup-node@v4 with: node-version: ${{ matrix.node-version }} cache: 'npm' - - run: npx playwright install-deps - run: npm ci - - run: npm run verify + - run: npm run prettier && npm run lint + + test_client: + runs-on: ubuntu-latest + + strategy: + matrix: + node-version: [20.x] + # See supported Node.js release schedule at https://nodejs.org/en/about/releases/ + + steps: + - uses: actions/checkout@v4 + - name: Use Node.js ${{ matrix.node-version }} + uses: actions/setup-node@v4 + with: + node-version: ${{ matrix.node-version }} + cache: 'npm' + - run: npm ci + - run: npx playwright uninstall --all && npx playwright install --force chromium firefox webkit --with-deps + - run: npm run build + # --bail to fail on first failing test. + - run: CSR_ONLY="true" npm run test -- --bail + + test_ssr: + runs-on: ubuntu-latest + + strategy: + matrix: + node-version: [20.x] + # See supported Node.js release schedule at https://nodejs.org/en/about/releases/ + + steps: + - uses: actions/checkout@v4 + - name: Use Node.js ${{ matrix.node-version }} + uses: actions/setup-node@v4 + with: + node-version: ${{ matrix.node-version }} + cache: 'npm' + - run: npm ci + - run: npx playwright uninstall --all && npx playwright install --force chromium firefox webkit --with-deps + - run: npm run build + - run: SSR_ONLY="true" npm run test -- --bail diff --git a/.gitignore b/.gitignore index aa943f40d..b5bb02845 100644 --- a/.gitignore +++ b/.gitignore @@ -3,9 +3,10 @@ _site .DS_Store package.json package-lock.json -dist +dist/ +dist-cdn/ docs/public/pagefind node_modules src/react -cdn .astro +cdn/ diff --git a/.gitpod.yml b/.gitpod.yml deleted file mode 100644 index 053d74cee..000000000 --- a/.gitpod.yml +++ /dev/null @@ -1,28 +0,0 @@ -tasks: - - init: npm install && npm run build - command: npm run start - -ports: - - port: 3001 - onOpen: ignore - - port: 4000-4999 - onOpen: open-preview - -github: - prebuilds: - # enable for the master/default branch (defaults to true) - master: true - # enable for all branches in this repo (defaults to false) - branches: true - # enable for pull requests coming from this repo (defaults to true) - pullRequests: true - # enable for pull requests coming from forks (defaults to false) - pullRequestsFromForks: true - # add a check to pull requests (defaults to true) - addCheck: true - # add a "Review in Gitpod" button as a comment to pull requests (defaults to false) - addComment: false - # add a "Review in Gitpod" button to the pull request's description (defaults to false) - addBadge: true - # add a label once the prebuild is ready to pull requests (defaults to false) - addLabel: true diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index eb0332d1a..34ea8f77c 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -2,4 +2,4 @@ Before contributing, please review the contributions guidelines at: -[shoelace.style/resources/contributing](https://shoelace.style/resources/contributing) +[webawesome.com/docs/resources/contributing](https://webawesome.com/docs/resources/contributing) 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..70fcaac16 100644 --- a/cspell.json +++ b/cspell.json @@ -18,7 +18,6 @@ "CACHEABLE", "callout", "callouts", - "cdndir", "chatbubble", "checkmark", "Clippy", @@ -55,6 +54,7 @@ "exportmaps", "exportparts", "fieldsets", + "fontawesome", "formaction", "formdata", "formenctype", @@ -109,7 +109,6 @@ "noopener", "noreferrer", "novalidate", - "npmdir", "Numberish", "oklab", "oklch", @@ -178,6 +177,7 @@ "Vuejs", "WCAG", "webawesome", + "webawesomer", "WEBP", "Webpacker", "xmark" diff --git a/custom-elements-manifest.js b/custom-elements-manifest.js index 03e3f5ab5..2c1853295 100644 --- a/custom-elements-manifest.js +++ b/custom-elements-manifest.js @@ -1,13 +1,13 @@ import { customElementJetBrainsPlugin } from 'custom-element-jet-brains-integration'; import { customElementVsCodePlugin } from 'custom-element-vs-code-integration'; -import { customElementVuejsPlugin } from 'custom-element-vuejs-integration'; +// import { customElementVuejsPlugin } from 'custom-element-vuejs-integration'; import { parse } from 'comment-parser'; import { pascalCase } from 'pascal-case'; import fs from 'fs'; const packageData = JSON.parse(fs.readFileSync('./package.json', 'utf8')); const { name, description, version, author, homepage, license } = packageData; -const outdir = 'dist'; +const outdir = 'dist-cdn'; function replace(string, terms) { terms.forEach(({ from, to }) => { @@ -156,19 +156,19 @@ export default { referencesTemplate: (_, tag) => [ { name: 'Documentation', - url: `https://shoelace.style/components/${tag.replace('wa-', '')}` + url: `https://webawesome.com/docs/components/${tag.replace('wa-', '')}` } ] }), customElementJetBrainsPlugin({ - outdir: './dist', + outdir: './dist-cdn', excludeCss: true, packageJson: false, referencesTemplate: (_, tag) => { return { name: 'Documentation', - url: `https://shoelace.style/components/${tag.replace('wa-', '')}` + url: `https://webawesome.com/docs/components/${tag.replace('wa-', '')}` }; } }) diff --git a/docs/.eleventy.js b/docs/.eleventy.js index c6aaa21cc..1630652d7 100644 --- a/docs/.eleventy.js +++ b/docs/.eleventy.js @@ -11,12 +11,21 @@ import { searchPlugin } from './_utils/search.js'; import { readFile } from 'fs/promises'; import { outlinePlugin } from './_utils/outline.js'; import { getComponents } from './_utils/manifest.js'; +import litPlugin from '@lit-labs/eleventy-plugin-lit'; + import process from 'process'; const packageData = JSON.parse(await readFile('./package.json', 'utf-8')); +const isAlpha = process.argv.includes('--alpha'); const isDeveloping = process.argv.includes('--develop'); export default function (eleventyConfig) { + // NOTE - alpha setting removes certain pages + if (isAlpha) { + eleventyConfig.ignores.add('**/components/page.md'); + eleventyConfig.ignores.add('**/experimental/**'); + } + // Add template data eleventyConfig.addGlobalData('package', packageData); @@ -33,9 +42,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}/dist/` + location.replace(/^\//, ''); }); // Helpers @@ -101,6 +108,26 @@ export default function (eleventyConfig) { ]) ); + const omittedModules = []; + + // problematic components: + // animation (breaks on navigation + ssr with Turbo) + // mutation-observer (why SSR this?) + // resize-observer (why SSR this?) + // tooltip (why SSR this?) + + const componentModules = getComponents() + // .filter(component => !omittedModules.includes(component.tagName.split(/wa-/)[1])) + .map(component => { + const name = component.tagName.split(/wa-/)[1]; + return `./dist/components/${name}/${name}.js`; + }); + + eleventyConfig.addPlugin(litPlugin, { + mode: 'worker', + componentModules + }); + // Build the search index eleventyConfig.addPlugin( searchPlugin({ diff --git a/docs/404.md b/docs/404.md index d80f7b4ea..82e759a75 100644 --- a/docs/404.md +++ b/docs/404.md @@ -1,7 +1,7 @@ --- title: Not Found description: Sorry, I couldn't find that. -layout: page.njk +layout: page permalink: 404.html noindex: true --- diff --git a/docs/_includes/base.njk b/docs/_includes/base.njk index c3d71266b..437ccf0e5 100644 --- a/docs/_includes/base.njk +++ b/docs/_includes/base.njk @@ -1,10 +1,10 @@ - + - + {% if noindex %}{% endif %} {{ title }} @@ -13,18 +13,25 @@ {# Scripts #} + {# Hydration stuff #} + + + + + + + {# Web Awesome #} - + - {# Docs styles #} @@ -33,29 +40,59 @@ {# Set the theme to prevent flashing #} - - + +
- {# Nav toggle #} - - - - {# Logo #} - - - +
+ {# Nav toggle #} + + + + + {% include "logo.njk" %} + {% include "logo-simple.njk" %} + + {{ package.version }} + Alpha +
+ +
+ {# Color scheme selector #} + + + + + Light + Dark + + + Light + Dark + + System + + + + {# Search #} + + + Search + / + +
{# Sidebar #} {% if hasSidebar %}