Files
webawesome/docs/index.md
Konnor Rogers 14914abf65 Initial SSR implementation (#157)
* continued ssr work

* continued ssr work

* prettier

* all components now rendering

* everything finally works

* fix type issues

* working on breadcrumb

* working on breadcrumb

* radio group

* convert all tests to ssr

* prettier

* test suite finally passing

* add layout stuff

* add changelog

* fix TS issue

* fix tests

* fixing deploy stuff

* get QR code displaying

* fix tests

* fix tests

* prettier

* condense hydration stuff

* prettier

* comment out range test

* fixing issues

* use base fixtures

* fixing examples

* dont vendor

* fix import of hydration support

* adding notes

* add notesg

* add ssr loader

* fix build

* prettier

* add notes

* add notes

* prettier

* fixing bundled stuff

* remove cdn

* remove cdn

* prettier

* fiixng tests

* prettier

* split jobs??

* prettier

* fix build stuff

* add reset mouse and await aTimeout

* prettier

* fix improper tests

* prettier

* bail on first

* fix linting

* only test form with client

* redundancy on ssr-loader??

* maybe this will work

* prettier

* try callout now

* fix form.test.ts

* fix form.test.ts

* prettier

* fix forms

* fix forms

* try again

* prettier

* add some awaits

* prettier

* comment out broken SSR tests

* prettier

* comment out broken SSR tests

* prettier

* dont skip in CI

* upgrade playwright to beta

* prettier

* try some trickery

* try some trickery

* await updateComplete

* try to fix form.test.ts

* import hydrateable elements 1 time

* prettier

* fix input defaultValue issues

* fix form controls to behave like their native counterpartS

* add changelog entry

* prettier

* fix unexpected behavior with range / button
2024-09-11 10:25:42 -04:00

11 KiB
Raw Blame History

title, description, layout
title description layout
Web Awesome Build better with Web Awesome, the open source library of web components from Font Awesome. page
<style> .title, .anchor-heading a, #outline-expandable { display: none; } wa-page > main { --content-width: 56rem; --content-padding-inline: 2rem; --content-flow-spacing: 4rem; max-width: 100%; padding: 0 !important; & p, h1, h2, h3, h4, h5, h6 { margin: 0; } } /** this technically relies on insertion order. */ @media screen and (max-width: 768px) { wa-page > main { --content-flow-spacing: 3rem !important; } } .brand-font { font-family: cera-round-pro; } .emphasis { position: relative; &::after { content: ''; position: absolute; bottom: 0; left: 0; background-color: var(--wa-brand-orange); border-radius: var(--wa-border-radius-pill); width: 100%; height: 0.1em; } } .hero-background { background-color: var(--wa-brand-orange); background-image: linear-gradient(color-mix(in oklab, var(--wa-brand-orange), orangered 40%) 1px, transparent 1px), linear-gradient(90deg, color-mix(in oklab, var(--wa-brand-orange), orangered 40%) 1px, transparent 1px); background-size: 2rem 2rem; color: white; padding: calc(var(--content-flow-spacing) * 1.875) 0 var(--content-flow-spacing) 0; } .hero-content { max-width: var(--content-width); margin-inline: auto; padding-inline: var(--content-padding-inline); & > * + * { margin-block-start: 2rem; } & h1 { font-size: clamp(2.5625rem, 13vw, 3.25rem); } & .emphasis::after { background-color: var(--wa-brand-grey); } & .wa-crown svg { width: 4rem; & path { fill: white; } } } .hero-cta { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; background-color: var(--wa-brand-grey); border-radius: 0.75rem; font-size: 0.875rem; padding: 1.5rem; & > *:first-child { flex: 1 1 67%; } & wa-button { --wa-form-control-height-s: 2.5rem; --border-color: black; --border-width: 0.125rem; --box-shadow: 0 0.25rem 0 0 var(--border-color); flex: 1 1 auto; &:active:not([disabled]) { --box-shadow: 0 0 0 0 transparent; transform: translateY(0.25rem); } } } .home-wrapper { max-width: var(--content-width); margin-block: var(--content-flow-spacing); margin-inline: auto; padding-inline: var(--content-padding-inline); } .home-wrapper > * + * { margin-block-start: var(--content-flow-spacing); } .summary { background-color: var(--wa-brand-grey); border-radius: 1.125rem; color: white; padding: var(--content-flow-spacing); & > * + * { margin-block-start: 2rem; } & .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(30ch, 100%), 1fr)); gap: 2rem; & h3 { font-size: 1rem; } & p { font-size: 0.875rem; } } } .split-block { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(30ch, 100%), 1fr)); column-gap: 4rem; row-gap: 2rem; align-items: center; & > * > * + * { margin-block-start: 1rem; } } .link-panel { background-color: var(--wa-color-neutral-fill-quiet); border-radius: 0.75rem; padding: 1.25rem; & h3 { font-size: 1rem; } & .icon-heading wa-icon { background-color: var(--wa-color-neutral-fill-loud); color: var(--wa-color-neutral-on-loud); } & p { font-size: 0.875rem; } } .icon-heading { display: flex; align-items: center; gap: 1rem; margin-block-end: 1rem; & wa-icon { display: flex; align-items: center; justify-content: center; background-color: var(--wa-brand-orange); color: white; border-radius: 0.25rem; height: 2rem; width: 2rem; } & h3 { font-size: 1rem; } } footer { display: flex; flex-direction: column; gap: 1rem; font-size: 0.875rem; & .wa-crown svg { width: 2rem; } & .tagline { font-size: 1rem; } & .attribution { align-self: flex-start; & .button-list { display: flex; flex-wrap: wrap; flex: 1 1 auto; gap: 0.5rem; } & wa-button { --wa-form-control-height-m: 1.5rem; display: inline-flex; font-size: 0.75rem; } } } .alpha-notice { display: flex; flex-wrap: wrap; gap: 1rem; & > * { flex-basis: calc(((30ch * 2 + 1rem) - 100%) * 999); } & > * { flex-grow: 2; } & > * + * { flex-grow: 1; } & wa-callout::part(base), & wa-button::part(base) { height: 100%; width: 100%; } } wa-button.tile::part(base) { border-color: var(--wa-color-surface-border); border-radius: 0.75rem; color: var(--wa-color-text-normal); display: block; height: 100%; line-height: var(--wa-line-height-normal); padding: 1.25rem; text-align: left; white-space: wrap; } wa-button.tile::part(suffix) { display: none; } wa-button.tile { width: 100%; height: 100%; & h3 { font-size: 1rem; } & .icon-heading + wa-icon { color: var(--wa-color-text-quiet); } & p { font-size: 0.875rem; font-weight: var(--wa-font-weight-normal); } &::part(label) { width: 100%; } } wa-callout { --spacing: 1.25rem; height: 100%; & .icon-heading wa-icon { background-color: var(--wa-color-warning-fill-normal); color: var(--wa-color-warning-on-normal); } & p { font-size: 0.875rem; } } </style>
{% include "logo-simple.njk" %}

Make something awesome with open-source web components

Psst! You can pre-order Web Awesome Pro at a low, guaranteed-for-life price — but not for long. Get in while the gettins good. Pre-order WA Pro

You're in alpha territory

What you see may not be perfect (we're only humans!) and is subject to change. We encourage you to report bugs or ask for help!

Get started

Check out our installation guide to start building with Web Awesome.

What's Web Awesome?

Web Awesome is the biggest open-source library of meticulously designed, highly customizable, and framework-agnostic UI components.

Entirely native

Built on web standards to last for years to come. No excess tooling. No third-party bloat.

Fully customizable

Show off your own style with components that consistently adapt to your theme.

Accessibility forward

Build a website that everyone can use. Designed to be inclusive and usable by everyone.

Proudly open source

Use Web Awesome Free however you like. Always free, always open source.

You put the awesome in Web Awesome

Web Awesome started as an open-source project fueled by contributions from an engaged community of developers, and we want to keep it that way. The core of Web Awesome is — and always will be — free and open source.

Whether youre a developer, designer, or budding tech nerd, we want you a part of the conversation.

Get in touch

Have a question? Want to share your feedback? Just stopping by to say 'hi'? Email us at hello@webawesome.com.

Follow us

Keep up with Web Awesome through updates, announcements, and polls. Find us on Twitter (X) and Instagram.

{% include "logo-simple.njk" %}
Let's Make Something Awesome

Web Awesome is the design system platform and open source library of web components from your fellow nerds at Font Awesome.

Special thanks
Lit Custom Elements Manifest 11ty Floating UI animate.css Lunr
© Fonticons, Inc.