diff options
Diffstat (limited to 'examples')
159 files changed, 4588 insertions, 4535 deletions
diff --git a/examples/blog-multiple-authors/astro.config.mjs b/examples/blog-multiple-authors/astro.config.mjs index 68499b3fa..a1516f292 100644 --- a/examples/blog-multiple-authors/astro.config.mjs +++ b/examples/blog-multiple-authors/astro.config.mjs @@ -8,6 +8,6 @@ // @ts-check export default /** @type {import('astro').AstroUserConfig} */ ({ - // Enable the Preact renderer to support Preact JSX components. - renderers: ['@astrojs/renderer-preact'], + // Enable the Preact renderer to support Preact JSX components. + renderers: ['@astrojs/renderer-preact'], }); diff --git a/examples/blog-multiple-authors/src/components/MainHead.astro b/examples/blog-multiple-authors/src/components/MainHead.astro index 0bf1ec4b0..ffdc0f1c7 100644 --- a/examples/blog-multiple-authors/src/components/MainHead.astro +++ b/examples/blog-multiple-authors/src/components/MainHead.astro @@ -1,45 +1,45 @@ --- export interface Props { - title: string; - description: string; - image?: string; - type?: string; - next?: string; - prev?: string; - canonicalURL?: string | URL; + title: string; + description: string; + image?: string; + type?: string; + next?: string; + prev?: string; + canonicalURL?: string | URL; } const { title, description, image, type, next, prev, canonicalURL } = Astro.props as Props; --- <!-- Common --> -<meta charset="UTF-8"> +<meta charset="UTF-8" /> <title>{title}</title> -<meta name="description" content={description}> -<link rel="preconnect" href="https://fonts.gstatic.com"> -<link href="https://fonts.googleapis.com/css2?family=Spectral:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet"> +<meta name="description" content={description} /> +<link rel="preconnect" href="https://fonts.gstatic.com" /> +<link href="https://fonts.googleapis.com/css2?family=Spectral:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet" /> <link rel="stylesheet" href={Astro.resolve('../styles/global.css')} /> <!-- Sitemap --> -<link rel="sitemap" href="/sitemap.xml"> +<link rel="sitemap" href="/sitemap.xml" /> <!-- RSS --> -<link rel="alternate" type="application/rss+xml" href="/feed/posts.xml"> +<link rel="alternate" type="application/rss+xml" href="/feed/posts.xml" /> <!-- Favicon --> <link rel="icon" type="image/x-icon" href="/favicon.ico" /> <!-- SEO --> -<link rel="canonical" href={canonicalURL}> +<link rel="canonical" href={canonicalURL} /> {next && <link rel="next" aria-label="Previous Page" href={new URL(next, canonicalURL).href}>} {prev && <link rel="prev" aria-label="Next Page" href={new URL(prev, canonicalURL).href}>} <!-- OpenGraph --> -<meta property="og:title" content={title}> -<meta property="og:description" content={description}> +<meta property="og:title" content={title} /> +<meta property="og:description" content={description} /> {image && (<meta property="og:image" content={new URL(image, canonicalURL)}>)} <!-- Twitter --> -<meta name="twitter:card" content={image ? 'summary_large_image' : 'summary'}> -<meta name="twitter:site" content="@astro"> -<meta name="twitter:title" content={title}> -<meta name="twitter:description" content={description}> +<meta name="twitter:card" content={image ? 'summary_large_image' : 'summary'} /> +<meta name="twitter:site" content="@astro" /> +<meta name="twitter:title" content={title} /> +<meta name="twitter:description" content={description} /> {image && (<meta name="twitter:image" content={image}>)} diff --git a/examples/blog-multiple-authors/src/components/Nav.astro b/examples/blog-multiple-authors/src/components/Nav.astro index 04a537f87..a2a5fc3a3 100644 --- a/examples/blog-multiple-authors/src/components/Nav.astro +++ b/examples/blog-multiple-authors/src/components/Nav.astro @@ -1,63 +1,63 @@ --- export interface Props { - title: string; + title: string; } const { title } = Astro.props; --- -<style lang="scss"> -.header { - text-align: center; - - @media (min-width: 600px) { - display: flex; - align-items: center; - padding: 2rem; - } -} - -.title { - margin: 0; - font-size: 1.2em; - letter-spacing: -0.03em; - font-weight: 400; - margin-right: 1em; -} - -.nav { - text-align: center; - - @media (min-width: 600px) { - display: flex; - } -} - -ul { - list-style: none; - margin: 0; - padding: 0; -} - -li { - margin: 0; -} - -a { - display: block; - font-size: 1.2em; - letter-spacing: -0.02em; - margin-left: 0.75em; - margin-right: 0.75em; -} -</style> - <nav class="header"> - <h1 class="title">Don’s Blog</h1> - <ul class="nav"> - <li><a href="/">Home</a></li> - <li><a href="/posts">All Posts</a></li> - <li><a href="/authors/don">Author: Don</a></li> - <li><a href="/authors/sancho">Author: Sancho</a></li> - <li><a href="/about">About</a></li> - </ul> + <h1 class="title">Don’s Blog</h1> + <ul class="nav"> + <li><a href="/">Home</a></li> + <li><a href="/posts">All Posts</a></li> + <li><a href="/authors/don">Author: Don</a></li> + <li><a href="/authors/sancho">Author: Sancho</a></li> + <li><a href="/about">About</a></li> + </ul> </nav> + +<style lang="scss"> + .header { + text-align: center; + + @media (min-width: 600px) { + display: flex; + align-items: center; + padding: 2rem; + } + } + + .title { + margin: 0; + font-size: 1.2em; + letter-spacing: -0.03em; + font-weight: 400; + margin-right: 1em; + } + + .nav { + text-align: center; + + @media (min-width: 600px) { + display: flex; + } + } + + ul { + list-style: none; + margin: 0; + padding: 0; + } + + li { + margin: 0; + } + + a { + display: block; + font-size: 1.2em; + letter-spacing: -0.02em; + margin-left: 0.75em; + margin-right: 0.75em; + } +</style> diff --git a/examples/blog-multiple-authors/src/components/Pagination.astro b/examples/blog-multiple-authors/src/components/Pagination.astro index 401931c07..8cc3941f6 100644 --- a/examples/blog-multiple-authors/src/components/Pagination.astro +++ b/examples/blog-multiple-authors/src/components/Pagination.astro @@ -1,44 +1,44 @@ --- export interface Props { - prevUrl: string; - nextUrl: string; + prevUrl: string; + nextUrl: string; } const { prevUrl, nextUrl } = Astro.props; --- +<div class="wrapper"> + <nav class="nav"> + <a class="prev" href={prevUrl || '#'} aria-label="Previous Page">Prev</a> + <a class="next" href={nextUrl || '#'} aria-label="Next Page">Next</a> + </nav> +</div> + <style lang="scss"> -.nav { - display: flex; - margin-right: auto; - margin-left: auto; - padding-top: 4rem; - padding-bottom: 4rem; -} + .nav { + display: flex; + margin-right: auto; + margin-left: auto; + padding-top: 4rem; + padding-bottom: 4rem; + } -.prev, -.next { - display: block; - text-transform: uppercase; - font-size: 0.8em; + .prev, + .next { + display: block; + text-transform: uppercase; + font-size: 0.8em; - &[href="#"] { - display: none; - } -} + &[href='#'] { + display: none; + } + } -.prev { - margin-right: auto; -} + .prev { + margin-right: auto; + } -.next { - margin-left: auto; -} + .next { + margin-left: auto; + } </style> - -<div class="wrapper"> - <nav class="nav"> - <a class="prev" href={prevUrl || '#'} aria-label="Previous Page">Prev</a> - <a class="next" href={nextUrl || '#'} aria-label="Next Page">Next</a> - </nav> -</div> diff --git a/examples/blog-multiple-authors/src/components/PostPreview.astro b/examples/blog-multiple-authors/src/components/PostPreview.astro index 19e1362e5..81e80ba6c 100644 --- a/examples/blog-multiple-authors/src/components/PostPreview.astro +++ b/examples/blog-multiple-authors/src/components/PostPreview.astro @@ -1,66 +1,65 @@ --- export interface Props { - post: any; - author: string; + post: any; + author: string; } const { post, author } = Astro.props; function formatDate(date) { - return new Date(date).toUTCString().replace(/(\d\d\d\d) .*/, '$1'); // remove everything after YYYY + return new Date(date).toUTCString().replace(/(\d\d\d\d) .*/, '$1'); // remove everything after YYYY } --- +<article class="post"> + <div class="data"> + <h2>{post.title}</h2> + <a class="author" href={`/authors/${post.author}`}>{author.name}</a> + <time class="date" datetime={post.date}>{formatDate(post.date)}</time> + <p class="description"> + {post.description} + <a class="link" href={post.url} aria-label={`Read ${post.title}`}>Read</a> + </p> + </div> +</article> + <style lang="scss"> -.post { - padding-top: 6rem; - padding-bottom: 6rem; - border-bottom: 1px solid rgba(black, 0.25); - text-align: center; -} + .post { + padding-top: 6rem; + padding-bottom: 6rem; + border-bottom: 1px solid rgba(black, 0.25); + text-align: center; + } -.author { - text-transform: uppercase; -} + .author { + text-transform: uppercase; + } -.date { - font-style: italic; -} + .date { + font-style: italic; + } -.description { - font-size: 1.25em; -} + .description { + font-size: 1.25em; + } -.link { - text-transform: uppercase; - font-size: 0.8em; - margin-left: 1em; -} + .link { + text-transform: uppercase; + font-size: 0.8em; + margin-left: 1em; + } -h2 { - font-weight: 700; - font-size: 2.75em; - line-height: 1; - letter-spacing: -0.04em; - margin-top: 0; - margin-bottom: 0; -} + h2 { + font-weight: 700; + font-size: 2.75em; + line-height: 1; + letter-spacing: -0.04em; + margin-top: 0; + margin-bottom: 0; + } -time { - display: block; - margin-top: 0.25rem; - margin-bottom: 0.5em; -} + time { + display: block; + margin-top: 0.25rem; + margin-bottom: 0.5em; + } </style> - -<article class="post"> - - <div class="data"> - <h2>{post.title}</h2> - <a class="author" href={`/authors/${post.author}`}>{author.name}</a> - <time class="date" datetime={post.date}>{formatDate(post.date)}</time> - <p class="description"> - {post.description} - <a class="link" href={post.url} aria-label={`Read ${post.title}`}>Read</a> - </p> - </div> -</article> diff --git a/examples/blog-multiple-authors/src/layouts/post.astro b/examples/blog-multiple-authors/src/layouts/post.astro index 64ad9fabd..fd8fcefa6 100644 --- a/examples/blog-multiple-authors/src/layouts/post.astro +++ b/examples/blog-multiple-authors/src/layouts/post.astro @@ -7,73 +7,72 @@ const { content } = Astro.props; let canonicalURL = Astro.request.canonicalURL; --- -<html lang={ content.lang || 'en' }> - <head> - <title>{content.title}</title> - <MainHead title={content.title} description={content.description} image={content.image} canonicalURL={canonicalURL} /> - <style lang="scss"> - .title { - margin-top: 4rem; - margin-bottom: 4rem; - font-size: 3em; - letter-spacing: -0.04em; - text-align: center; - } +<html lang={content.lang || 'en'}> + <head> + <title>{content.title}</title> + <MainHead title={content.title} description={content.description} image={content.image} {canonicalURL} /> + <style lang="scss"> + .title { + margin-top: 4rem; + margin-bottom: 4rem; + font-size: 3em; + letter-spacing: -0.04em; + text-align: center; + } - .description { - margin-bottom: 4rem; - font-size: 1.4em; - font-weight: 400; - text-align: justify; - text-transform: uppercase; - } + .description { + margin-bottom: 4rem; + font-size: 1.4em; + font-weight: 400; + text-align: justify; + text-transform: uppercase; + } - .img { - display: block; - width: 100%; - height: auto; - } + .img { + display: block; + width: 100%; + height: auto; + } - .article { - margin-top: 4rem; - margin-bottom: 6rem; + .article { + margin-top: 4rem; + margin-bottom: 6rem; - :global(p) { - font-size: 1.3em; - line-height: 2; - margin-top: 2em; - margin-bottom: 2em; - } - } + :global(p) { + font-size: 1.3em; + line-height: 2; + margin-top: 2em; + margin-bottom: 2em; + } + } - .posts { - text-transform: uppercase; - } + .posts { + text-transform: uppercase; + } - .footer { - margin-top: 6rem; - padding-bottom: 6rem; - text-align: center; - } - </style> - </head> + .footer { + margin-top: 6rem; + padding-bottom: 6rem; + text-align: center; + } + </style> + </head> - <body> - <Nav /> + <body> + <Nav /> - <main class="wrapper"> - <h2 class="title">{content.title}</h2> - <p class="description">{content.description}</p> - <img class="img" src={content.image} alt=""> - <article class="article"> - <slot /> - </article> - <footer class="footer"> - <a class="posts" href="/posts">All Posts</a> - </footer> - </main> + <main class="wrapper"> + <h2 class="title">{content.title}</h2> + <p class="description">{content.description}</p> + <img class="img" src={content.image} alt="" /> + <article class="article"> + <slot /> + </article> + <footer class="footer"> + <a class="posts" href="/posts">All Posts</a> + </footer> + </main> - <footer> - </footer> - </body> + <footer></footer> + </body> </html> diff --git a/examples/blog-multiple-authors/src/pages/about.astro b/examples/blog-multiple-authors/src/pages/about.astro index 69124a3fa..ad101368b 100644 --- a/examples/blog-multiple-authors/src/pages/about.astro +++ b/examples/blog-multiple-authors/src/pages/about.astro @@ -2,65 +2,69 @@ import MainHead from '../components/MainHead.astro'; import Nav from '../components/Nav.astro'; -let title = "About"; -let description = "About page of an example blog on Astro"; +let title = 'About'; +let description = 'About page of an example blog on Astro'; let canonicalURL = Astro.request.canonicalURL; --- -<html lang="en"> - <head> - <MainHead - title={title} - description={description} - canonicalURL={canonicalURL} - /> - <style lang="scss"> - - .text { - padding-bottom: 6rem; - p { - font-size: 1.2em; - line-height: 2; - margin-top: 2em; - margin-bottom: 2em; - } - } +<html lang="en"> + <head> + <MainHead {title} {description} {canonicalURL} /> + <style lang="scss"> + .text { + padding-bottom: 6rem; - .hero { - display: block; - height: 16rem; - overflow: hidden; - margin: 4rem 0; + p { + font-size: 1.2em; + line-height: 2; + margin-top: 2em; + margin-bottom: 2em; + } + } - &-img { - width: 100%; - height: 100%; - object-fit: cover; - } - } + .hero { + display: block; + height: 16rem; + overflow: hidden; + margin: 4rem 0; - .title { - font-size: 3em; - letter-spacing: -0.04em; - margin-top: 2rem; - margin-bottom: 0; - text-align: center; - } - </style> - </head> - <body> - <Nav title={title} /> + &-img { + width: 100%; + height: 100%; + object-fit: cover; + } + } - <main class="wrapper"> - <h2 class="title">{title}</h2> - <div class="hero"> - <img class="hero-img" src="/images/chapter-01.jpg" alt=""> - </div> - <div class="text"> - <p>The book cover and spine above and the images which follow were not part of the original Ormsby translation—they are taken from the 1880 edition of J. W. Clark, illustrated by Gustave Doré. Clark in his edition states that, “The English text of ‘Don Quixote’ adopted in this edition is that of Jarvis, with occasional corrections from Motteaux.”</p> - <p>See in the introduction below John Ormsby’s critique of both the Jarvis and Motteaux translations. It has been elected in the present Project Gutenberg edition to attach the famous engravings of Gustave Doré to the Ormsby translation instead of the Jarvis/Motteaux. The detail of many of the Doré engravings can be fully appreciated only by utilizing the “Full Size” button to expand them to their original dimensions. Ormsby in his Preface has criticized the fanciful nature of Doré’s illustrations; others feel these woodcuts and steel engravings well match Quixote’s dreams.</p> - </div> - </main> + .title { + font-size: 3em; + letter-spacing: -0.04em; + margin-top: 2rem; + margin-bottom: 0; + text-align: center; + } + </style> + </head> + <body> + <Nav {title} /> - </body> + <main class="wrapper"> + <h2 class="title">{title}</h2> + <div class="hero"> + <img class="hero-img" src="/images/chapter-01.jpg" alt="" /> + </div> + <div class="text"> + <p> + The book cover and spine above and the images which follow were not part of the original Ormsby translation—they are taken from the 1880 edition of J. W. Clark, + illustrated by Gustave Doré. Clark in his edition states that, “The English text of ‘Don Quixote’ adopted in this edition is that of Jarvis, with occasional corrections + from Motteaux.” + </p> + <p> + See in the introduction below John Ormsby’s critique of both the Jarvis and Motteaux translations. It has been elected in the present Project Gutenberg edition to attach + the famous engravings of Gustave Doré to the Ormsby translation instead of the Jarvis/Motteaux. The detail of many of the Doré engravings can be fully appreciated only by + utilizing the “Full Size” button to expand them to their original dimensions. Ormsby in his Preface has criticized the fanciful nature of Doré’s illustrations; others + feel these woodcuts and steel engravings well match Quixote’s dreams. + </p> + </div> + </main> + </body> </html> diff --git a/examples/blog-multiple-authors/src/pages/authors/[author].astro b/examples/blog-multiple-authors/src/pages/authors/[author].astro index a4dbeb129..21aab27a5 100644 --- a/examples/blog-multiple-authors/src/pages/authors/[author].astro +++ b/examples/blog-multiple-authors/src/pages/authors/[author].astro @@ -1,5 +1,4 @@ --- - import MainHead from '../../components/MainHead.astro'; import Nav from '../../components/Nav.astro'; import PostPreview from '../../components/PostPreview.astro'; @@ -7,16 +6,16 @@ import Pagination from '../../components/Pagination.astro'; import authorData from '../../data/authors.json'; export function getStaticPaths() { - const allPosts = Astro.fetchContent<MarkdownFrontmatter>('../post/*.md'); - let allAuthorsUnique = [...new Set(allPosts.map(p => p.author))]; - return allAuthorsUnique.map(author => ({params: {author}, props: {allPosts}})); + const allPosts = Astro.fetchContent<MarkdownFrontmatter>('../post/*.md'); + let allAuthorsUnique = [...new Set(allPosts.map((p) => p.author))]; + return allAuthorsUnique.map((author) => ({ params: { author }, props: { allPosts } })); } interface MarkdownFrontmatter { - date: number; - description: string; - title: string; - author: string; + date: number; + description: string; + title: string; + author: string; } const { allPosts } = Astro.props; @@ -25,65 +24,58 @@ const title = 'Don’s Blog'; const description = 'An example blog on Astro'; /** filter posts by author, sort by date */ -const posts = allPosts - .filter((post) => post.author === params.author) - .sort((a, b) => new Date(b.date).valueOf() - new Date(a.date).valueOf()); +const posts = allPosts.filter((post) => post.author === params.author).sort((a, b) => new Date(b.date).valueOf() - new Date(a.date).valueOf()); const author = authorData[posts[0].author]; --- <html lang="en"> - <head> - <title>{title}</title> - <MainHead - title={title} - description={description} - image={posts[0].image} - canonicalURL={canonicalURL.toString()} - /> + <head> + <title>{title}</title> + <MainHead {title} {description} image={posts[0].image} canonicalURL={canonicalURL.toString()} /> - <style lang="scss"> - .title { - display: flex; - align-items: center; - justify-content: center; - font-size: 3em; - letter-spacing: -0.04em; - margin-top: 2rem; - margin-bottom: 0; - } + <style lang="scss"> + .title { + display: flex; + align-items: center; + justify-content: center; + font-size: 3em; + letter-spacing: -0.04em; + margin-top: 2rem; + margin-bottom: 0; + } - .avatar { - width: 1em; - height: 1em; - margin-right: 0.5em; - border-radius: 50%; - overflow:hidden; + .avatar { + width: 1em; + height: 1em; + margin-right: 0.5em; + border-radius: 50%; + overflow: hidden; - &-img { - display: block; - width: 100%; - height: 100%; - object-fit: cover; - } - } + &-img { + display: block; + width: 100%; + height: 100%; + object-fit: cover; + } + } - .count { - font-size: 1em; - display: block; - text-align: center; - } - </style> - </head> + .count { + font-size: 1em; + display: block; + text-align: center; + } + </style> + </head> - <body> - <Nav title={title} /> + <body> + <Nav {title} /> - <main class="wrapper"> - <h2 class="title"> - <div class="avatar"><img class="avatar-img" src={author.image} alt="" /></div> - {author.name} - </h2> - {posts.map((post) => <PostPreview post={post} author={author} />)} - </main> - </body> + <main class="wrapper"> + <h2 class="title"> + <div class="avatar"><img class="avatar-img" src={author.image} alt="" /></div> + {author.name} + </h2> + {posts.map((post) => <PostPreview post={post} author={author} />)} + </main> + </body> </html> diff --git a/examples/blog-multiple-authors/src/pages/index.astro b/examples/blog-multiple-authors/src/pages/index.astro index 5c18a87f0..8ad01c190 100644 --- a/examples/blog-multiple-authors/src/pages/index.astro +++ b/examples/blog-multiple-authors/src/pages/index.astro @@ -7,9 +7,9 @@ import Pagination from '../components/Pagination.astro'; import authorData from '../data/authors.json'; interface MarkdownFrontmatter { - date: number; - image: string; - author: string; + date: number; + image: string; + author: string; } // Component Script: @@ -28,26 +28,22 @@ let firstPage = allPosts.slice(0, 2); // Full Astro Component Syntax: // https://docs.astro.build/core-concepts/astro-components/ --- + <html lang="en"> - <head> - <title>{title}</title> - <MainHead - title={title} - description={description} - image={allPosts[0].image} - canonicalURL={canonicalURL} - /> - </head> - - <body> - <Nav title={title} /> - - <main class="wrapper"> - {allPosts.map((post) => <PostPreview post={post} author={authorData[post.author]} />)} - </main> - - <footer> - <Pagination prevUrl="/posts" nextUrl="/posts/2" /> - </footer> - </body> + <head> + <title>{title}</title> + <MainHead {title} {description} image={allPosts[0].image} {canonicalURL} /> + </head> + + <body> + <Nav {title} /> + + <main class="wrapper"> + {allPosts.map((post) => <PostPreview post={post} author={authorData[post.author]} />)} + </main> + + <footer> + <Pagination prevUrl="/posts" nextUrl="/posts/2" /> + </footer> + </body> </html> diff --git a/examples/blog-multiple-authors/src/pages/posts/[...page].astro b/examples/blog-multiple-authors/src/pages/posts/[...page].astro index b615d762f..d0f95ce5b 100644 --- a/examples/blog-multiple-authors/src/pages/posts/[...page].astro +++ b/examples/blog-multiple-authors/src/pages/posts/[...page].astro @@ -5,26 +5,26 @@ import PostPreview from '../../components/PostPreview.astro'; import Pagination from '../../components/Pagination.astro'; import authorData from '../../data/authors.json'; -export async function getStaticPaths({paginate, rss}) { - const allPosts = Astro.fetchContent<MarkdownFrontmatter>('../post/*.md'); - const sortedPosts = allPosts.sort((a, b) => new Date(b.date).valueOf() - new Date(a.date).valueOf()); +export async function getStaticPaths({ paginate, rss }) { + const allPosts = Astro.fetchContent<MarkdownFrontmatter>('../post/*.md'); + const sortedPosts = allPosts.sort((a, b) => new Date(b.date).valueOf() - new Date(a.date).valueOf()); - // Generate an RSS feed from this collection of posts. - // NOTE: This is disabled by default, since it requires `buildOptions.site` to be set in your "astro.config.mjs" file. - // rss({ - // title: 'Don’s Blog', - // description: 'An example blog on Astro', - // customData: `<language>en-us</language>`, - // items: sortedPosts.map(item => ({ - // title: item.title, - // description: item.description, - // link: item.url, - // pubDate: item.date, - // })), - // }); + // Generate an RSS feed from this collection of posts. + // NOTE: This is disabled by default, since it requires `buildOptions.site` to be set in your "astro.config.mjs" file. + // rss({ + // title: 'Don’s Blog', + // description: 'An example blog on Astro', + // customData: `<language>en-us</language>`, + // items: sortedPosts.map(item => ({ + // title: item.title, + // description: item.description, + // link: item.url, + // pubDate: item.date, + // })), + // }); - // Return a paginated collection of paths for all posts - return paginate(sortedPosts, {pageSize: 1}); + // Return a paginated collection of paths for all posts + return paginate(sortedPosts, { pageSize: 1 }); } // page @@ -34,55 +34,47 @@ let canonicalURL = Astro.request.canonicalURL; // collection interface MarkdownFrontmatter { - date: number; - description: string; - title: string; + date: number; + description: string; + title: string; } - const { page } = Astro.props; --- <html lang="en"> - <head> - <title>{title}</title> - <MainHead - title={title} - description={description} - image={page.data[0].image} - canonicalURL={canonicalURL.toString()} - prev={page.url.prev} - next={page.url.next} - /> + <head> + <title>{title}</title> + <MainHead {title} {description} image={page.data[0].image} canonicalURL={canonicalURL.toString()} prev={page.url.prev} next={page.url.next} /> - <style lang="scss"> - .title { - font-size: 3em; - letter-spacing: -0.04em; - margin-top: 2rem; - margin-bottom: 0; - text-align: center; - } + <style lang="scss"> + .title { + font-size: 3em; + letter-spacing: -0.04em; + margin-top: 2rem; + margin-bottom: 0; + text-align: center; + } - .count { - font-size: 1em; - display: block; - text-align: center; - } - </style> - </head> + .count { + font-size: 1em; + display: block; + text-align: center; + } + </style> + </head> - <body> - <Nav title={title} /> + <body> + <Nav {title} /> - <main class="wrapper"> - <h2 class="title">All Posts</h2> - <small class="count">{page.start + 1}–{page.end + 1} of {page.total}</small> - {page.data.map((post) => <PostPreview post={post} author={authorData[post.author]} />)} - </main> + <main class="wrapper"> + <h2 class="title">All Posts</h2> + <small class="count">{page.start + 1}–{page.end + 1} of {page.total}</small> + {page.data.map((post) => <PostPreview post={post} author={authorData[post.author]} />)} + </main> - <footer> - <Pagination prevUrl={page.url.prev} nextUrl={page.url.next} /> - </footer> - </body> + <footer> + <Pagination prevUrl={page.url.prev} nextUrl={page.url.next} /> + </footer> + </body> </html> diff --git a/examples/blog-multiple-authors/src/styles/global.css b/examples/blog-multiple-authors/src/styles/global.css index d5891f6b4..408d2b9de 100644 --- a/examples/blog-multiple-authors/src/styles/global.css +++ b/examples/blog-multiple-authors/src/styles/global.css @@ -1,25 +1,25 @@ body { - font-family: 'Spectral', serif; - line-height: 1.4; + font-family: 'Spectral', serif; + line-height: 1.4; } p { - line-height: 2; + line-height: 2; } a { - color: crimson; + color: crimson; } img { - max-width: 100%; - height: auto; + max-width: 100%; + height: auto; } .wrapper { - max-width: 60rem; - margin-left: auto; - margin-right: auto; - padding-left: 2rem; - padding-right: 2rem; + max-width: 60rem; + margin-left: auto; + margin-right: auto; + padding-left: 2rem; + padding-right: 2rem; } diff --git a/examples/blog/astro.config.mjs b/examples/blog/astro.config.mjs index 68499b3fa..a1516f292 100644 --- a/examples/blog/astro.config.mjs +++ b/examples/blog/astro.config.mjs @@ -8,6 +8,6 @@ // @ts-check export default /** @type {import('astro').AstroUserConfig} */ ({ - // Enable the Preact renderer to support Preact JSX components. - renderers: ['@astrojs/renderer-preact'], + // Enable the Preact renderer to support Preact JSX components. + renderers: ['@astrojs/renderer-preact'], }); diff --git a/examples/blog/src/components/Author.astro b/examples/blog/src/components/Author.astro index 87cb48c45..3b29e0e76 100644 --- a/examples/blog/src/components/Author.astro +++ b/examples/blog/src/components/Author.astro @@ -1,16 +1,18 @@ --- export interface Props { - name: string; - href: string; + name: string; + href: string; } const { name, href } = Astro.props; --- -<style> - .author { - margin-bottom: 0.75rem; - } -</style> + <div class="author"> - <p><a href={href}>{name}</a></p> + <p><a {href}>{name}</a></p> </div> + +<style> + .author { + margin-bottom: 0.75rem; + } +</style> diff --git a/examples/blog/src/components/BaseHead.astro b/examples/blog/src/components/BaseHead.astro index a5e199a29..e5745e196 100644 --- a/examples/blog/src/components/BaseHead.astro +++ b/examples/blog/src/components/BaseHead.astro @@ -1,8 +1,8 @@ --- export interface Props { - title: string; - description: string; - permalink: string; + title: string; + description: string; + permalink: string; } const { title, description, permalink } = Astro.props; --- @@ -12,7 +12,6 @@ const { title, description, permalink } = Astro.props; <meta name="viewport" content="width=device-width" /> <link rel="icon" type="image/x-icon" href="/favicon.ico" /> - <!-- Primary Meta Tags --> <title>{title}</title> <meta name="title" content={title} /> @@ -34,4 +33,4 @@ const { title, description, permalink } = Astro.props; <!-- Fonts --> <link rel="preconnect" href="https://fonts.gstatic.com" /> -<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono&family=IBM+Plex+Sans:wght@400;700&display=swap"> +<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono&family=IBM+Plex+Sans:wght@400;700&display=swap" /> diff --git a/examples/blog/src/components/BlogHeader.astro b/examples/blog/src/components/BlogHeader.astro index 92d0cbfb1..4d32e87d8 100644 --- a/examples/blog/src/components/BlogHeader.astro +++ b/examples/blog/src/components/BlogHeader.astro @@ -1,90 +1,90 @@ +<header class="wrapper"> + <article> + <h1> + <a href="/"> + <svg class="logo" width="32" height="32" viewBox="0 0 256 256" fill="none" xmlns="http://www.w3.org/2000/svg"> + <style> + #flame { + fill: #ff5d01; + } + #a { + fill: #000014; + } + </style> + <title>Logo</title> + <path + id="a" + fill-rule="evenodd" + clip-rule="evenodd" + d="M163.008 18.929c1.944 2.413 2.935 5.67 4.917 12.181l43.309 142.27a180.277 180.277 0 00-51.778-17.53l-28.198-95.29a3.67 3.67 0 00-7.042.01l-27.857 95.232a180.225 180.225 0 00-52.01 17.557l43.52-142.281c1.99-6.502 2.983-9.752 4.927-12.16a15.999 15.999 0 016.484-4.798c2.872-1.154 6.271-1.154 13.07-1.154h31.085c6.807 0 10.211 0 13.086 1.157a16.004 16.004 0 016.487 4.806z" + ></path> + <path + id="flame" + fill-rule="evenodd" + clip-rule="evenodd" + d="M168.19 180.151c-7.139 6.105-21.39 10.268-37.804 10.268-20.147 0-37.033-6.272-41.513-14.707-1.602 4.835-1.961 10.367-1.961 13.902 0 0-1.056 17.355 11.015 29.426 0-6.268 5.081-11.349 11.349-11.349 10.743 0 10.731 9.373 10.721 16.977v.679c0 11.542 7.054 21.436 17.086 25.606a23.27 23.27 0 01-2.339-10.2c0-11.008 6.463-15.107 13.974-19.87 5.976-3.79 12.616-8.001 17.192-16.449a31.024 31.024 0 003.743-14.82c0-3.299-.513-6.479-1.463-9.463z" + ></path> + </svg> + <span>My Blog</span> + </a> + </h1> + </article> +</header> + <style> -header { - padding-top: 1rem; - padding-bottom: 1rem; - height: 5rem; -} -article { - display: flex; - align-items: center; - justify-content: space-between; -} -.header-subitem { - display: flex; - flex-grow: 0; - gap: 0.5em; - align-items: center; - justify-content: center; - color: var(--theme-text-lighter); - font-size: initial; - padding: 0.5rem; -} -.header-subitem:hover { - color: var(--theme-accent); -} -.header-subitem svg { - width: 1.5rem; - height: 1.5rem; -} + header { + padding-top: 1rem; + padding-bottom: 1rem; + height: 5rem; + } + article { + display: flex; + align-items: center; + justify-content: space-between; + } + .header-subitem { + display: flex; + flex-grow: 0; + gap: 0.5em; + align-items: center; + justify-content: center; + color: var(--theme-text-lighter); + font-size: initial; + padding: 0.5rem; + } + .header-subitem:hover { + color: var(--theme-accent); + } + .header-subitem svg { + width: 1.5rem; + height: 1.5rem; + } -@media (max-width: 32em) { - .header-subitem { - display: none; - } -} + @media (max-width: 32em) { + .header-subitem { + display: none; + } + } -h1 { - margin: 0; - font-size: 1.5rem; - max-width: 100%; - display: flex; - flex-grow: 1; -} + h1 { + margin: 0; + font-size: 1.5rem; + max-width: 100%; + display: flex; + flex-grow: 1; + } -.logo { - transform: translateY(0.25rem); -} + .logo { + transform: translateY(0.25rem); + } -svg { - width: 2.5rem; - height: 2.5rem; -} + svg { + width: 2.5rem; + height: 2.5rem; + } -h1 a { - text-decoration: none; - display: inline-flex; -} + h1 a { + text-decoration: none; + display: inline-flex; + } </style> - -<header class="wrapper"> - <article> - <h1> - <a href="/"> - <svg class="logo" width="32" height="32" viewBox="0 0 256 256" fill="none" xmlns="http://www.w3.org/2000/svg"> - <style> - #flame { - fill: #ff5d01; - } - #a { - fill: #000014; - } - </style> - <title>Logo</title> - <path - id="a" - fill-rule="evenodd" - clip-rule="evenodd" - d="M163.008 18.929c1.944 2.413 2.935 5.67 4.917 12.181l43.309 142.27a180.277 180.277 0 00-51.778-17.53l-28.198-95.29a3.67 3.67 0 00-7.042.01l-27.857 95.232a180.225 180.225 0 00-52.01 17.557l43.52-142.281c1.99-6.502 2.983-9.752 4.927-12.16a15.999 15.999 0 016.484-4.798c2.872-1.154 6.271-1.154 13.07-1.154h31.085c6.807 0 10.211 0 13.086 1.157a16.004 16.004 0 016.487 4.806z" - /> - <path - id="flame" - fill-rule="evenodd" - clip-rule="evenodd" - d="M168.19 180.151c-7.139 6.105-21.39 10.268-37.804 10.268-20.147 0-37.033-6.272-41.513-14.707-1.602 4.835-1.961 10.367-1.961 13.902 0 0-1.056 17.355 11.015 29.426 0-6.268 5.081-11.349 11.349-11.349 10.743 0 10.731 9.373 10.721 16.977v.679c0 11.542 7.054 21.436 17.086 25.606a23.27 23.27 0 01-2.339-10.2c0-11.008 6.463-15.107 13.974-19.87 5.976-3.79 12.616-8.001 17.192-16.449a31.024 31.024 0 003.743-14.82c0-3.299-.513-6.479-1.463-9.463z" - /> - </svg> - <span>My Blog</span> - </a> - </h1> - </article> -</header> diff --git a/examples/blog/src/components/BlogPost.astro b/examples/blog/src/components/BlogPost.astro index 9f7ac9efe..2dba32c3d 100644 --- a/examples/blog/src/components/BlogPost.astro +++ b/examples/blog/src/components/BlogPost.astro @@ -2,87 +2,87 @@ import Author from './Author.astro'; export interface Props { - title: string; - author: string; - publishDate: string; - heroImage: string; - alt: string; + title: string; + author: string; + publishDate: string; + heroImage: string; + alt: string; } const { title, author, publishDate, heroImage, alt } = Astro.props; --- <div class="layout"> - <article class="content"> - <div> - <header> - {heroImage && <img width="720" height="420" class="hero-image" loading="lazy" src={heroImage} alt={alt} />} - <p class="publish-date">{publishDate}</p> - <h1 class="title">{title}</h1> - <Author name="@FredKSchott" href="https://twitter.com/FredKSchott" /> - </header> - <main> - <slot /> - </main> - </div> - </article> + <article class="content"> + <div> + <header> + {heroImage && <img width="720" height="420" class="hero-image" loading="lazy" src={heroImage} alt={alt} />} + <p class="publish-date">{publishDate}</p> + <h1 class="title">{title}</h1> + <Author name="@FredKSchott" href="https://twitter.com/FredKSchott" /> + </header> + <main> + <slot /> + </main> + </div> + </article> </div> <style> -.hero-image { - width: 100vw; - object-fit: cover; - object-position: center; - margin-top: 2rem; - margin-bottom: 4rem; - max-width: 1280px; -} + .hero-image { + width: 100vw; + object-fit: cover; + object-position: center; + margin-top: 2rem; + margin-bottom: 4rem; + max-width: 1280px; + } -@media (max-width: 50em) { - .hero-image { - height: 260px; - margin-top: 0; - margin-bottom: 2rem; - } -} + @media (max-width: 50em) { + .hero-image { + height: 260px; + margin-top: 0; + margin-bottom: 2rem; + } + } -.content { - margin-bottom: 8rem; -} + .content { + margin-bottom: 8rem; + } -.content :global(main > * + *) { - margin-top: 1rem; -} + .content :global(main > * + *) { + margin-top: 1rem; + } -.content :global(h2) { - margin-top: 4rem; -} + .content :global(h2) { + margin-top: 4rem; + } -header { - display: flex; - flex-direction: column; - text-align: center; - align-items: center; - justify-content: center; + header { + display: flex; + flex-direction: column; + text-align: center; + align-items: center; + justify-content: center; - padding-bottom: 2rem; - margin-bottom: 2rem; - border-bottom: 4px solid var(--theme-divider); -} + padding-bottom: 2rem; + margin-bottom: 2rem; + border-bottom: 4px solid var(--theme-divider); + } -.title, -.author, -.publish-date { - margin: 0; -} + .title, + .author, + .publish-date { + margin: 0; + } -.publish-date, -.author { - color: var(--theme-text-lighter); -} + .publish-date, + .author { + color: var(--theme-text-lighter); + } -.title { - font-size: 2.25rem; - font-weight: 700; -} + .title { + font-size: 2.25rem; + font-weight: 700; + } </style> diff --git a/examples/blog/src/components/BlogPostPreview.astro b/examples/blog/src/components/BlogPostPreview.astro index 96d1190c7..4841d3a65 100644 --- a/examples/blog/src/components/BlogPostPreview.astro +++ b/examples/blog/src/components/BlogPostPreview.astro @@ -1,54 +1,55 @@ --- export interface Props { - post: any; + post: any; } const { post } = Astro.props; --- + <article class="post-preview"> - <header> - <p class="publish-date">{post.publishDate}</p> - <a href={post.url}><h1 class="title">{post.title}</h1></a> - </header> - <p>{post.description}</p> - <a href={post.url}>Read more</a> + <header> + <p class="publish-date">{post.publishDate}</p> + <a href={post.url}><h1 class="title">{post.title}</h1></a> + </header> + <p>{post.description}</p> + <a href={post.url}>Read more</a> </article> <style> -.content :global(main > * + *) { - margin-top: 1rem; -} + .content :global(main > * + *) { + margin-top: 1rem; + } -.post-preview { - padding-bottom: 2rem; - margin-bottom: 2rem; - border-bottom: 4px solid var(--theme-divider); -} + .post-preview { + padding-bottom: 2rem; + margin-bottom: 2rem; + border-bottom: 4px solid var(--theme-divider); + } -header { - align-items: flex-start; - display: flex; - flex-direction: column; - justify-content: center; - padding-bottom: 2rem; - text-align: left; -} + header { + align-items: flex-start; + display: flex; + flex-direction: column; + justify-content: center; + padding-bottom: 2rem; + text-align: left; + } -.title, -.author, -.publish-date { - margin: 0; -} + .title, + .author, + .publish-date { + margin: 0; + } -.publish-date, -.author { - font-size: 1.25rem; - color: var(--theme-text-lighter); -} + .publish-date, + .author { + font-size: 1.25rem; + color: var(--theme-text-lighter); + } -.title { - font-size: 2.25rem; - font-weight: 700; - color: var(--theme-text); -} + .title { + font-size: 2.25rem; + font-weight: 700; + color: var(--theme-text); + } </style> diff --git a/examples/blog/src/components/Heading.astro b/examples/blog/src/components/Heading.astro index f1805aaf7..fec49b538 100644 --- a/examples/blog/src/components/Heading.astro +++ b/examples/blog/src/components/Heading.astro @@ -1,9 +1,9 @@ <h1> - <slot/> + <slot /> </h1> <style> - h1 { - color: red; - } + h1 { + color: red; + } </style> diff --git a/examples/blog/src/components/Logo.astro b/examples/blog/src/components/Logo.astro index 7926dab4d..a92927536 100644 --- a/examples/blog/src/components/Logo.astro +++ b/examples/blog/src/components/Logo.astro @@ -1,56 +1,86 @@ <svg class="logo" width="158" height="170" viewBox="0 0 158 170" fill="none" xmlns="http://www.w3.org/2000/svg"> - <path fill-rule="evenodd" clip-rule="evenodd" d="M96.5039 9.46441C97.4758 10.671 97.9714 12.2991 98.9626 15.5553L120.617 86.6902C112.611 82.5368 103.907 79.5413 94.7281 77.9252L80.6289 30.2798C80.3982 29.5002 79.6822 28.9654 78.8692 28.9654C78.0541 28.9654 77.3367 29.503 77.1079 30.2853L63.1795 77.9011C53.9579 79.51 45.2146 82.5109 37.1741 86.6793L58.9347 15.5388C59.929 12.2882 60.4262 10.6629 61.3981 9.45854C62.2562 8.39532 63.3723 7.56959 64.64 7.06003C66.076 6.48285 67.7756 6.48285 71.1749 6.48285H86.7174C90.1211 6.48285 91.823 6.48285 93.2603 7.06124C94.5291 7.575 95.6459 8.39925 96.5039 9.46441Z" fill="white" /> - <path fill-rule="evenodd" clip-rule="evenodd" d="M99.0951 90.0755C95.5253 93.1279 88.4002 95.2097 80.1929 95.2097C70.1197 95.2097 61.6767 92.0737 59.4363 87.8561C58.6354 90.2733 58.4558 93.0397 58.4558 94.8069C58.4558 94.8069 57.9281 103.485 63.9636 109.52C63.9636 106.386 66.5042 103.846 69.6381 103.846C75.0097 103.846 75.0036 108.532 74.9987 112.334C74.9986 112.448 74.9984 112.561 74.9984 112.673C74.9984 118.444 78.5255 123.391 83.5416 125.477C82.7924 123.936 82.3721 122.205 82.3721 120.377C82.3721 114.873 85.6034 112.823 89.3588 110.441C92.3469 108.546 95.6668 106.441 97.9548 102.217C99.1486 100.013 99.8265 97.4893 99.8265 94.8069C99.8265 93.1573 99.5702 91.5676 99.0951 90.0755Z" fill="#FF5D01" /> - <path fill-rule="evenodd" clip-rule="evenodd" d="M99.0951 90.0755C95.5253 93.1279 88.4002 95.2097 80.1929 95.2097C70.1197 95.2097 61.6767 92.0737 59.4363 87.8561C58.6354 90.2733 58.4558 93.0397 58.4558 94.8069C58.4558 94.8069 57.9281 103.485 63.9636 109.52C63.9636 106.386 66.5042 103.846 69.6381 103.846C75.0097 103.846 75.0036 108.532 74.9987 112.334C74.9986 112.448 74.9984 112.561 74.9984 112.673C74.9984 118.444 78.5255 123.391 83.5416 125.477C82.7924 123.936 82.3721 122.205 82.3721 120.377C82.3721 114.873 85.6034 112.823 89.3588 110.441C92.3469 108.546 95.6668 106.441 97.9548 102.217C99.1486 100.013 99.8265 97.4893 99.8265 94.8069C99.8265 93.1573 99.5702 91.5676 99.0951 90.0755Z" fill="url(#paint1_linear)" /> - <path d="M11.9957 169.024C20.0117 169.024 24.8597 167.104 27.6917 163.12C27.6917 164.896 27.7877 166.576 28.0277 168.112H32.7797C32.3477 165.616 32.2517 163.984 32.2517 159.472V153.328C32.2517 146.704 27.1157 143.2 17.3237 143.2C7.8677 143.2 1.7237 146.848 0.955701 152.128H5.9957C6.7637 148.576 10.7477 146.704 17.3237 146.704C23.8037 146.704 27.6437 148.96 27.6437 152.8V153.28L12.6677 154.144C6.5717 154.48 4.3157 155.344 2.5877 156.592C0.955701 157.792 0.0437012 159.664 0.0437012 161.824C0.0437012 166.384 4.7477 169.024 11.9957 169.024ZM13.5317 165.616C7.9637 165.616 4.8917 164.32 4.8917 161.728C4.8917 158.944 6.8117 157.696 13.5797 157.264L27.6437 156.4V157.504C27.6437 162.544 21.7397 165.616 13.5317 165.616Z" fill="white" /> - <path d="M55.9352 169.024C65.8712 169.024 69.8552 165.76 69.8552 161.008C69.8552 157.072 67.4072 155.056 61.1672 154.528L49.5032 153.616C46.3352 153.376 44.5592 152.464 44.5592 150.496C44.5592 148 47.2952 146.704 53.1992 146.704C59.9192 146.704 63.4232 148.048 65.7272 151.024L69.6152 149.152C67.2152 145.408 61.8872 143.2 53.6312 143.2C45.1352 143.2 40.0472 146.032 40.0472 150.688C40.0472 154.864 43.0712 156.88 48.7832 157.36L60.3512 158.272C64.1432 158.56 65.2952 159.328 65.2952 161.296C65.2952 164.128 62.3672 165.472 56.5592 165.472C49.5032 165.472 45.0392 163.552 42.8792 160.048L39.0872 162.112C42.0152 166.528 47.1512 169.024 55.9352 169.024Z" fill="white" /> - <path d="M79.6765 147.712V159.28C79.6765 164.032 81.3085 168.784 90.1885 168.784C92.4445 168.784 95.1805 168.352 96.3805 167.824V163.936C94.7005 164.32 92.6845 164.608 90.7165 164.608C86.5405 164.608 84.2845 162.976 84.2845 158.848V147.712H96.2845V144.112H84.2845V136L79.6765 137.872V144.112H72.1404V147.712H79.6765Z" fill="white" /> - <path d="M107.728 144.112H103.504V168.112H108.064V159.136C108.064 155.68 108.736 152.752 110.656 150.736C112.336 148.864 114.496 147.808 118.288 147.808C119.584 147.808 120.4 147.904 121.504 148.096V143.68C120.496 143.44 119.632 143.392 118.336 143.392C113.2 143.392 109.12 146.416 107.728 151.072V144.112Z" fill="white" /> - <path d="M140.724 169.024C150.948 169.024 157.956 163.84 157.956 156.112C157.956 148.384 150.948 143.2 140.724 143.2C130.5 143.2 123.492 148.384 123.492 156.112C123.492 163.84 130.5 169.024 140.724 169.024ZM140.724 165.232C133.188 165.232 128.34 161.68 128.34 156.112C128.34 150.544 133.188 146.992 140.724 146.992C148.212 146.992 153.108 150.544 153.108 156.112C153.108 161.68 148.212 165.232 140.724 165.232Z" fill="white" /> - <defs> - <linearGradient id="paint1_linear" x1="115.168" y1="65.245" x2="94.0326" y2="109.491" gradientUnits="userSpaceOnUse"> - <stop stop-color="#FF1639" /> - <stop offset="1" stop-color="#FF1639" stop-opacity="0" /> - </linearGradient> - </defs> + <path + fill-rule="evenodd" + clip-rule="evenodd" + d="M96.5039 9.46441C97.4758 10.671 97.9714 12.2991 98.9626 15.5553L120.617 86.6902C112.611 82.5368 103.907 79.5413 94.7281 77.9252L80.6289 30.2798C80.3982 29.5002 79.6822 28.9654 78.8692 28.9654C78.0541 28.9654 77.3367 29.503 77.1079 30.2853L63.1795 77.9011C53.9579 79.51 45.2146 82.5109 37.1741 86.6793L58.9347 15.5388C59.929 12.2882 60.4262 10.6629 61.3981 9.45854C62.2562 8.39532 63.3723 7.56959 64.64 7.06003C66.076 6.48285 67.7756 6.48285 71.1749 6.48285H86.7174C90.1211 6.48285 91.823 6.48285 93.2603 7.06124C94.5291 7.575 95.6459 8.39925 96.5039 9.46441Z" + fill="white" + /> + <path + fill-rule="evenodd" + clip-rule="evenodd" + d="M99.0951 90.0755C95.5253 93.1279 88.4002 95.2097 80.1929 95.2097C70.1197 95.2097 61.6767 92.0737 59.4363 87.8561C58.6354 90.2733 58.4558 93.0397 58.4558 94.8069C58.4558 94.8069 57.9281 103.485 63.9636 109.52C63.9636 106.386 66.5042 103.846 69.6381 103.846C75.0097 103.846 75.0036 108.532 74.9987 112.334C74.9986 112.448 74.9984 112.561 74.9984 112.673C74.9984 118.444 78.5255 123.391 83.5416 125.477C82.7924 123.936 82.3721 122.205 82.3721 120.377C82.3721 114.873 85.6034 112.823 89.3588 110.441C92.3469 108.546 95.6668 106.441 97.9548 102.217C99.1486 100.013 99.8265 97.4893 99.8265 94.8069C99.8265 93.1573 99.5702 91.5676 99.0951 90.0755Z" + fill="#FF5D01" + /> + <path + fill-rule="evenodd" + clip-rule="evenodd" + d="M99.0951 90.0755C95.5253 93.1279 88.4002 95.2097 80.1929 95.2097C70.1197 95.2097 61.6767 92.0737 59.4363 87.8561C58.6354 90.2733 58.4558 93.0397 58.4558 94.8069C58.4558 94.8069 57.9281 103.485 63.9636 109.52C63.9636 106.386 66.5042 103.846 69.6381 103.846C75.0097 103.846 75.0036 108.532 74.9987 112.334C74.9986 112.448 74.9984 112.561 74.9984 112.673C74.9984 118.444 78.5255 123.391 83.5416 125.477C82.7924 123.936 82.3721 122.205 82.3721 120.377C82.3721 114.873 85.6034 112.823 89.3588 110.441C92.3469 108.546 95.6668 106.441 97.9548 102.217C99.1486 100.013 99.8265 97.4893 99.8265 94.8069C99.8265 93.1573 99.5702 91.5676 99.0951 90.0755Z" + fill="url(#paint1_linear)" + /> + <path + d="M11.9957 169.024C20.0117 169.024 24.8597 167.104 27.6917 163.12C27.6917 164.896 27.7877 166.576 28.0277 168.112H32.7797C32.3477 165.616 32.2517 163.984 32.2517 159.472V153.328C32.2517 146.704 27.1157 143.2 17.3237 143.2C7.8677 143.2 1.7237 146.848 0.955701 152.128H5.9957C6.7637 148.576 10.7477 146.704 17.3237 146.704C23.8037 146.704 27.6437 148.96 27.6437 152.8V153.28L12.6677 154.144C6.5717 154.48 4.3157 155.344 2.5877 156.592C0.955701 157.792 0.0437012 159.664 0.0437012 161.824C0.0437012 166.384 4.7477 169.024 11.9957 169.024ZM13.5317 165.616C7.9637 165.616 4.8917 164.32 4.8917 161.728C4.8917 158.944 6.8117 157.696 13.5797 157.264L27.6437 156.4V157.504C27.6437 162.544 21.7397 165.616 13.5317 165.616Z" + fill="white" + /> + <path + d="M55.9352 169.024C65.8712 169.024 69.8552 165.76 69.8552 161.008C69.8552 157.072 67.4072 155.056 61.1672 154.528L49.5032 153.616C46.3352 153.376 44.5592 152.464 44.5592 150.496C44.5592 148 47.2952 146.704 53.1992 146.704C59.9192 146.704 63.4232 148.048 65.7272 151.024L69.6152 149.152C67.2152 145.408 61.8872 143.2 53.6312 143.2C45.1352 143.2 40.0472 146.032 40.0472 150.688C40.0472 154.864 43.0712 156.88 48.7832 157.36L60.3512 158.272C64.1432 158.56 65.2952 159.328 65.2952 161.296C65.2952 164.128 62.3672 165.472 56.5592 165.472C49.5032 165.472 45.0392 163.552 42.8792 160.048L39.0872 162.112C42.0152 166.528 47.1512 169.024 55.9352 169.024Z" + fill="white" + /> + <path + d="M79.6765 147.712V159.28C79.6765 164.032 81.3085 168.784 90.1885 168.784C92.4445 168.784 95.1805 168.352 96.3805 167.824V163.936C94.7005 164.32 92.6845 164.608 90.7165 164.608C86.5405 164.608 84.2845 162.976 84.2845 158.848V147.712H96.2845V144.112H84.2845V136L79.6765 137.872V144.112H72.1404V147.712H79.6765Z" + fill="white" + /> + <path + d="M107.728 144.112H103.504V168.112H108.064V159.136C108.064 155.68 108.736 152.752 110.656 150.736C112.336 148.864 114.496 147.808 118.288 147.808C119.584 147.808 120.4 147.904 121.504 148.096V143.68C120.496 143.44 119.632 143.392 118.336 143.392C113.2 143.392 109.12 146.416 107.728 151.072V144.112Z" + fill="white" + /> + <path + d="M140.724 169.024C150.948 169.024 157.956 163.84 157.956 156.112C157.956 148.384 150.948 143.2 140.724 143.2C130.5 143.2 123.492 148.384 123.492 156.112C123.492 163.84 130.5 169.024 140.724 169.024ZM140.724 165.232C133.188 165.232 128.34 161.68 128.34 156.112C128.34 150.544 133.188 146.992 140.724 146.992C148.212 146.992 153.108 150.544 153.108 156.112C153.108 161.68 148.212 165.232 140.724 165.232Z" + fill="white" + /> + <defs> + <linearGradient id="paint1_linear" x1="115.168" y1="65.245" x2="94.0326" y2="109.491" gradientUnits="userSpaceOnUse"> + <stop stop-color="#FF1639" /> + <stop offset="1" stop-color="#FF1639" stop-opacity="0" /> + </linearGradient> + </defs> </svg> <style lang="scss"> - .logo { - margin: 2rem auto; - } + .logo { + margin: 2rem auto; + } - .title { - font-family: var(--font-sans); - font-size: 1rem; - } - .title svg { - margin-right: -100%; - } - .title svg text { - font-size: 16px; - font-family: var(--font-sans); - } - .title svg text.span { - fill: white; - font-size: 16.2px; - transform: translate(0, 18px); - } - .title svg text.em { - fill: var(--color-green); - transform: translate(0, 36px); - } + .title { + font-family: var(--font-sans); + font-size: 1rem; + } + .title svg { + margin-right: -100%; + } + .title svg text { + font-size: 16px; + font-family: var(--font-sans); + } + .title svg text.span { + fill: white; + font-size: 16.2px; + transform: translate(0, 18px); + } + .title svg text.em { + fill: var(--color-green); + transform: translate(0, 36px); + } - @media (min-width: 40em) { - .title svg { - margin-right: 0; - margin-bottom: -40px; - } - .title svg text.span { - font-size: 16px; - } - .title svg text.em { - transform: translate(190px, 18px); - } - } + @media (min-width: 40em) { + .title svg { + margin-right: 0; + margin-bottom: -40px; + } + .title svg text.span { + font-size: 16px; + } + .title svg text.em { + transform: translate(190px, 18px); + } + } </style> diff --git a/examples/blog/src/layouts/BlogPost.astro b/examples/blog/src/layouts/BlogPost.astro index b227d5222..e6bb0a6c7 100644 --- a/examples/blog/src/layouts/BlogPost.astro +++ b/examples/blog/src/layouts/BlogPost.astro @@ -3,23 +3,22 @@ import BaseHead from '../components/BaseHead.astro'; import BlogHeader from '../components/BlogHeader.astro'; import BlogPost from '../components/BlogPost.astro'; -const {content} = Astro.props; -const {title, description, publishDate, author, heroImage, permalink, alt} = content; +const { content } = Astro.props; +const { title, description, publishDate, author, heroImage, permalink, alt } = content; --- -<html lang={ content.lang || 'en' }> - <head> - <BaseHead title={title} description={description} permalink={permalink} /> - <link rel="stylesheet" href={Astro.resolve('../styles/blog.css')} /> - </head> +<html lang={content.lang || 'en'}> + <head> + <BaseHead {title} {description} {permalink} /> + <link rel="stylesheet" href={Astro.resolve('../styles/blog.css')} /> + </head> - <body> - <BlogHeader /> - <div class="wrapper"> - <BlogPost title={title} author={author} heroImage={heroImage} publishDate={publishDate} alt={alt}> - <slot /> - </BlogPost> - </div> - </body> + <body> + <BlogHeader /> + <div class="wrapper"> + <BlogPost {title} {author} {heroImage} {publishDate} {alt}> + <slot /> + </BlogPost> + </div> + </body> </html> - diff --git a/examples/blog/src/pages/index.astro b/examples/blog/src/pages/index.astro index cd839d382..9a2178ed0 100644 --- a/examples/blog/src/pages/index.astro +++ b/examples/blog/src/pages/index.astro @@ -5,7 +5,7 @@ import BlogHeader from '../components/BlogHeader.astro'; import BlogPostPreview from '../components/BlogPostPreview.astro'; interface MarkdownFrontmatter { - publishDate: number; + publishDate: number; } // Component Script: @@ -24,59 +24,60 @@ allPosts = allPosts.sort((a, b) => new Date(b.publishDate).valueOf() - new Date( // Full Astro Component Syntax: // https://docs.astro.build/core-concepts/astro-components/ --- + <html lang="en"> - <head> - <BaseHead title={title} description={description} permalink={permalink} /> - <link rel="stylesheet" href={Astro.resolve('../styles/blog.css')} /> + <head> + <BaseHead {title} {description} {permalink} /> + <link rel="stylesheet" href={Astro.resolve('../styles/blog.css')} /> - <style> - header { - width: 100%; - height: 100%; - background-color: var(--theme-bg-offset); - display: flex; - align-items: center; - justify-content: center; - } + <style> + header { + width: 100%; + height: 100%; + background-color: var(--theme-bg-offset); + display: flex; + align-items: center; + justify-content: center; + } - .content { - margin-top: 4rem; - margin-bottom: 8rem; - } + .content { + margin-top: 4rem; + margin-bottom: 8rem; + } - .content :global(main > * + *) { - margin-top: 1rem; - } + .content :global(main > * + *) { + margin-top: 1rem; + } - .intro { - padding-bottom: 4rem; - margin-bottom: 2rem; - border-bottom: 4px solid var(--theme-divider); - } + .intro { + padding-bottom: 4rem; + margin-bottom: 2rem; + border-bottom: 4px solid var(--theme-divider); + } - .intro > * { - margin: 0; - } + .intro > * { + margin: 0; + } - .latest { - font-size: 2.5rem; - font-weight: 700; - } - </style> - </head> + .latest { + font-size: 2.5rem; + font-weight: 700; + } + </style> + </head> - <body> - <BlogHeader /> - <div class="wrapper"> - <main class="content"> - <section class="intro"> - <h1 class="latest">{title}</h1> - <p>{description}</p> - </section> - <section aria-label="Blog post list"> - {allPosts.map(p => <BlogPostPreview post={p} />)} - </section> - </main> - </div> - </body> + <body> + <BlogHeader /> + <div class="wrapper"> + <main class="content"> + <section class="intro"> + <h1 class="latest">{title}</h1> + <p>{description}</p> + </section> + <section aria-label="Blog post list"> + {allPosts.map((p) => <BlogPostPreview post={p} />)} + </section> + </main> + </div> + </body> </html> diff --git a/examples/blog/src/styles/blog.css b/examples/blog/src/styles/blog.css index 319cdbc6f..f086aea0c 100644 --- a/examples/blog/src/styles/blog.css +++ b/examples/blog/src/styles/blog.css @@ -1,284 +1,284 @@ :root { - --font-fallback: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji; - --font-body: 'IBM Plex Sans', var(--font-fallback); - --font-mono: 'IBM Plex Mono', Consolas, 'Andale Mono WT', 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', - 'Liberation Mono', 'Nimbus Mono L', Monaco, 'Courier New', Courier, monospace; - - --color-white: #fff; - --color-black: #000014; - - --color-gray-50: #f9fafb; - --color-gray-100: #f3f4f6; - --color-gray-200: #e5e7eb; - --color-gray-300: #d1d5db; - --color-gray-400: #9ca3af; - --color-gray-500: #6b7280; - --color-gray-600: #4b5563; - --color-gray-700: #374151; - --color-gray-800: #1f2937; - --color-gray-900: #111827; - - --color-blue: #3894ff; - --color-blue-rgb: 56, 148, 255; - --color-green: #17c083; - --color-green-rgb: 23, 192, 131; - --color-orange: #ff5d01; - --color-orange-rgb: 255, 93, 1; - --color-purple: #882de7; - --color-purple-rgb: 136, 45, 231; - --color-red: #ff1639; - --color-red-rgb: 255, 22, 57; - --color-yellow: #ffbe2d; - --color-yellow-rgb: 255, 190, 45; + --font-fallback: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji; + --font-body: 'IBM Plex Sans', var(--font-fallback); + --font-mono: 'IBM Plex Mono', Consolas, 'Andale Mono WT', 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', + 'Liberation Mono', 'Nimbus Mono L', Monaco, 'Courier New', Courier, monospace; + + --color-white: #fff; + --color-black: #000014; + + --color-gray-50: #f9fafb; + --color-gray-100: #f3f4f6; + --color-gray-200: #e5e7eb; + --color-gray-300: #d1d5db; + --color-gray-400: #9ca3af; + --color-gray-500: #6b7280; + --color-gray-600: #4b5563; + --color-gray-700: #374151; + --color-gray-800: #1f2937; + --color-gray-900: #111827; + + --color-blue: #3894ff; + --color-blue-rgb: 56, 148, 255; + --color-green: #17c083; + --color-green-rgb: 23, 192, 131; + --color-orange: #ff5d01; + --color-orange-rgb: 255, 93, 1; + --color-purple: #882de7; + --color-purple-rgb: 136, 45, 231; + --color-red: #ff1639; + --color-red-rgb: 255, 22, 57; + --color-yellow: #ffbe2d; + --color-yellow-rgb: 255, 190, 45; } :root { - color-scheme: light; - --theme-accent: var(--color-orange); - --theme-accent-rgb: var(--color-orange-rgb); - --theme-accent-opacity: 0.1; - --theme-divider: var(--color-gray-100); - --theme-text: var(--color-gray-800); - --theme-text-light: var(--color-gray-600); - --theme-text-lighter: var(--color-gray-400); - --theme-bg: var(--color-white); - --theme-bg-offset: var(--color-gray-100); - --theme-bg-accent: rgba(var(--theme-accent-rgb), var(--theme-accent-opacity)); - --theme-code-inline-bg: var(--color-gray-100); - --theme-code-text: var(--color-gray-100); - --theme-code-bg: var(--color-gray-700); + color-scheme: light; + --theme-accent: var(--color-orange); + --theme-accent-rgb: var(--color-orange-rgb); + --theme-accent-opacity: 0.1; + --theme-divider: var(--color-gray-100); + --theme-text: var(--color-gray-800); + --theme-text-light: var(--color-gray-600); + --theme-text-lighter: var(--color-gray-400); + --theme-bg: var(--color-white); + --theme-bg-offset: var(--color-gray-100); + --theme-bg-accent: rgba(var(--theme-accent-rgb), var(--theme-accent-opacity)); + --theme-code-inline-bg: var(--color-gray-100); + --theme-code-text: var(--color-gray-100); + --theme-code-bg: var(--color-gray-700); } body { - background: var(--theme-bg); - color: var(--theme-text); + background: var(--theme-bg); + color: var(--theme-text); } :root.theme-dark { - color-scheme: dark; - --theme-accent-opacity: 0.3; - --theme-divider: var(--color-gray-900); - --theme-text: var(--color-gray-200); - --theme-text-light: var(--color-gray-400); - --theme-text-lighter: var(--color-gray-600); - --theme-bg: var(--color-black); - --theme-bg-offset: var(--color-gray-900); - --theme-code-inline-bg: var(--color-gray-800); - --theme-code-text: var(--color-gray-200); - --theme-code-bg: var(--color-gray-900); + color-scheme: dark; + --theme-accent-opacity: 0.3; + --theme-divider: var(--color-gray-900); + --theme-text: var(--color-gray-200); + --theme-text-light: var(--color-gray-400); + --theme-text-lighter: var(--color-gray-600); + --theme-bg: var(--color-black); + --theme-bg-offset: var(--color-gray-900); + --theme-code-inline-bg: var(--color-gray-800); + --theme-code-text: var(--color-gray-200); + --theme-code-bg: var(--color-gray-900); } ::selection { - color: var(--theme-accent); - background-color: rgba(var(--theme-accent-rgb), var(--theme-accent-opacity)); + color: var(--theme-accent); + background-color: rgba(var(--theme-accent-rgb), var(--theme-accent-opacity)); } * { - box-sizing: border-box; - margin: 0; + box-sizing: border-box; + margin: 0; } :root { - --user-font-scale: 1rem - 16px; - --max-width: calc(100% - 2rem); + --user-font-scale: 1rem - 16px; + --max-width: calc(100% - 2rem); } @media (min-width: 50em) { - :root { - --max-width: 40em; - } + :root { + --max-width: 40em; + } } body { - font-family: var(--font-body); - font-size: 1rem; - font-size: clamp(0.875rem, 0.4626rem + 1.0309vw + var(--user-font-scale), 1.125rem); - line-height: 1.625; + font-family: var(--font-body); + font-size: 1rem; + font-size: clamp(0.875rem, 0.4626rem + 1.0309vw + var(--user-font-scale), 1.125rem); + line-height: 1.625; } .wrapper { - margin-left: auto; - margin-right: auto; - max-width: 65em; - padding-left: 2rem; - padding-right: 2rem; - width: 100%; + margin-left: auto; + margin-right: auto; + max-width: 65em; + padding-left: 2rem; + padding-right: 2rem; + width: 100%; } nav ul { - list-style: none; - padding: 0; + list-style: none; + padding: 0; } /* Typography */ :is(h1, h2, h3, h4, h5, h6) { - margin-bottom: 1.38rem; - font-weight: 400; - line-height: 1.3; + margin-bottom: 1.38rem; + font-weight: 400; + line-height: 1.3; } :is(h1, h2) { - max-width: 40ch; + max-width: 40ch; } :is(h2, h3):not(:first-child) { - margin-top: 3rem; + margin-top: 3rem; } h1 { - font-size: clamp(2.488rem, 1.924rem + 1.41vw, 3.052rem); + font-size: clamp(2.488rem, 1.924rem + 1.41vw, 3.052rem); } h2 { - font-size: clamp(2.074rem, 1.707rem + 0.9175vw, 2.441rem); + font-size: clamp(2.074rem, 1.707rem + 0.9175vw, 2.441rem); } h3 { - font-size: clamp(1.728rem, 1.503rem + 0.5625vw, 1.953rem); + font-size: clamp(1.728rem, 1.503rem + 0.5625vw, 1.953rem); } h4 { - font-size: clamp(1.44rem, 1.317rem + 0.3075vw, 1.563rem); + font-size: clamp(1.44rem, 1.317rem + 0.3075vw, 1.563rem); } h5 { - font-size: clamp(1.2rem, 1.15rem + 0.125vw, 1.25rem); + font-size: clamp(1.2rem, 1.15rem + 0.125vw, 1.25rem); } p { - color: var(--theme-text-light); + color: var(--theme-text-light); } small, .text_small { - font-size: 0.833rem; + font-size: 0.833rem; } a { - color: var(--theme-accent); - font-weight: 400; - text-underline-offset: 0.08em; - text-decoration: none; - align-items: center; - gap: 0.5rem; + color: var(--theme-accent); + font-weight: 400; + text-underline-offset: 0.08em; + text-decoration: none; + align-items: center; + gap: 0.5rem; } a > code:not([class*='language']) { - position: relative; - color: var(--theme-accent); - background: transparent; - text-underline-offset: var(--padding-block); + position: relative; + color: var(--theme-accent); + background: transparent; + text-underline-offset: var(--padding-block); } a > code:not([class*='language'])::before { - content: ''; - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - display: block; - background: var(--theme-accent); - opacity: var(--theme-accent-opacity); - border-radius: var(--border-radius); + content: ''; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + display: block; + background: var(--theme-accent); + opacity: var(--theme-accent-opacity); + border-radius: var(--border-radius); } a:hover, a:focus { - text-decoration: underline; + text-decoration: underline; } a:focus { - outline: 2px solid currentColor; - outline-offset: 0.25em; + outline: 2px solid currentColor; + outline-offset: 0.25em; } strong { - font-weight: 600; - color: inherit; + font-weight: 600; + color: inherit; } /* Supporting Content */ code:not([class*='language']) { - --border-radius: 3px; - --padding-block: 0.2rem; - --padding-inline: 0.33rem; + --border-radius: 3px; + --padding-block: 0.2rem; + --padding-inline: 0.33rem; - font-family: var(--font-mono); - font-size: 0.85em; - color: inherit; - background-color: var(--theme-code-inline-bg); - padding: var(--padding-block) var(--padding-inline); - margin: calc(var(--padding-block) * -1) -0.125em; - border-radius: var(--border-radius); - word-break: break-word; + font-family: var(--font-mono); + font-size: 0.85em; + color: inherit; + background-color: var(--theme-code-inline-bg); + padding: var(--padding-block) var(--padding-inline); + margin: calc(var(--padding-block) * -1) -0.125em; + border-radius: var(--border-radius); + word-break: break-word; } pre > code:not([class*='language']) { - background-color: transparent; - padding: 0; - margin: 0; - border-radius: 0; - color: inherit; + background-color: transparent; + padding: 0; + margin: 0; + border-radius: 0; + color: inherit; } pre { - position: relative; - background-color: var(--theme-code-bg); - color: var(--theme-code-text); - --padding-block: 1rem; - --padding-inline: 2rem; - padding: var(--padding-block) var(--padding-inline); - padding-right: calc(var(--padding-inline) * 2); - margin-left: calc(50vw - var(--padding-inline)); - transform: translateX(-50vw); - - line-height: 1.414; - width: calc(100vw + (var(--padding-inline) * 2)); - max-width: calc(100% + (var(--padding-inline) * 2)); - overflow-y: hidden; - overflow-x: auto; + position: relative; + background-color: var(--theme-code-bg); + color: var(--theme-code-text); + --padding-block: 1rem; + --padding-inline: 2rem; + padding: var(--padding-block) var(--padding-inline); + padding-right: calc(var(--padding-inline) * 2); + margin-left: calc(50vw - var(--padding-inline)); + transform: translateX(-50vw); + + line-height: 1.414; + width: calc(100vw + (var(--padding-inline) * 2)); + max-width: calc(100% + (var(--padding-inline) * 2)); + overflow-y: hidden; + overflow-x: auto; } @media (min-width: 37.75em) { - pre { - --padding-inline: 1.25rem; - border-radius: 8px; - } + pre { + --padding-inline: 1.25rem; + border-radius: 8px; + } } .flex { - display: flex; - align-items: center; + display: flex; + align-items: center; } img.cover { - width: 100%; - max-height: 50vh; - object-fit: cover; + width: 100%; + max-height: 50vh; + object-fit: cover; } blockquote { - font-size: 1.5rem; - --padding-block: 1rem; - --padding-inline: 1.25rem; - --color: var(--theme-divider); + font-size: 1.5rem; + --padding-block: 1rem; + --padding-inline: 1.25rem; + --color: var(--theme-divider); - display: flex; - flex-direction: column; + display: flex; + flex-direction: column; - padding: var(--padding-block) var(--padding-inline); - margin-left: calc(var(--padding-inline) * -1); - margin-right: calc(var(--padding-inline) * -1); + padding: var(--padding-block) var(--padding-inline); + margin-left: calc(var(--padding-inline) * -1); + margin-right: calc(var(--padding-inline) * -1); - background: transparent; - border-left: calc(var(--padding-inline) / 2) solid var(--color); - border-radius: 0; + background: transparent; + border-left: calc(var(--padding-inline) / 2) solid var(--color); + border-radius: 0; } blockquote .source { - font-weight: 500; - color: var(--color); - font-size: 1rem; + font-weight: 500; + color: var(--color); + font-size: 1rem; } diff --git a/examples/component/astro.config.mjs b/examples/component/astro.config.mjs index 94846abde..d68cea82c 100644 --- a/examples/component/astro.config.mjs +++ b/examples/component/astro.config.mjs @@ -8,6 +8,6 @@ // @ts-check export default /** @type {import('astro').AstroUserConfig} */ ({ - // Comment out "renderers: []" to enable Astro's default component support. - renderers: [], + // Comment out "renderers: []" to enable Astro's default component support. + renderers: [], }); diff --git a/examples/component/demo/src/pages/index.astro b/examples/component/demo/src/pages/index.astro index 96ca814e3..211c2f5e3 100644 --- a/examples/component/demo/src/pages/index.astro +++ b/examples/component/demo/src/pages/index.astro @@ -1,29 +1,24 @@ --- -import * as Component from '@example/my-component' +import * as Component from '@example/my-component'; --- -<html lang="en"> - -<head> - <meta charset="utf-8" /> - <meta name="viewport" content="width=device-width" /> - <title>Welcome to Astro</title> - <style global> - h { - display: block; - font-size: 2em; - font-weight: bold; - margin-block: 0.67em; - } - </style> -</head> -<body> - <Component.Heading> - Welcome to Astro - </Component.Heading> - <Component.Button> - Plain Button - </Component.Button> -</body> +<html lang="en"> + <head> + <meta charset="utf-8" /> + <meta name="viewport" content="width=device-width" /> + <title>Welcome to Astro</title> + <style global> + h { + display: block; + font-size: 2em; + font-weight: bold; + margin-block: 0.67em; + } + </style> + </head> -</html>
\ No newline at end of file + <body> + <Component.Heading>Welcome to Astro</Component.Heading> + <Component.Button>Plain Button</Component.Button> + </body> +</html> diff --git a/examples/component/packages/my-component/Button.astro b/examples/component/packages/my-component/Button.astro index d853628a1..5f32ce4e8 100644 --- a/examples/component/packages/my-component/Button.astro +++ b/examples/component/packages/my-component/Button.astro @@ -1,15 +1,13 @@ --- export interface Props extends Record<any, any> { - type?: string + type?: string; } -const { - type, - ...props -} = { - ...Astro.props -} as Props +const { type, ...props } = { + ...Astro.props, +} as Props; -props.type = type || 'button' +props.type = type || 'button'; --- -<button {...props}><slot /></button>
\ No newline at end of file + +<button {...props}><slot /></button> diff --git a/examples/component/packages/my-component/Heading.astro b/examples/component/packages/my-component/Heading.astro index f27e74b3d..813c0c11b 100644 --- a/examples/component/packages/my-component/Heading.astro +++ b/examples/component/packages/my-component/Heading.astro @@ -1,18 +1,15 @@ --- export interface Props extends Record<any, any> { - level?: number | string - role?: string + level?: number | string; + role?: string; } -const { - level, - role, - ...props -} = { - ...Astro.props -} as Props +const { level, role, ...props } = { + ...Astro.props, +} as Props; -props.role = role || 'heading' -props['aria-level'] = level || '1' +props.role = role || 'heading'; +props['aria-level'] = level || '1'; --- -<h {...props}><slot /></h>
\ No newline at end of file + +<h {...props}><slot /></h> diff --git a/examples/docs/astro.config.mjs b/examples/docs/astro.config.mjs index 120106f3e..075ab81fe 100644 --- a/examples/docs/astro.config.mjs +++ b/examples/docs/astro.config.mjs @@ -8,10 +8,10 @@ // @ts-check export default /** @type {import('astro').AstroUserConfig} */ ({ - renderers: [ - // Enable the Preact renderer to support Preact JSX components. - '@astrojs/renderer-preact', - // Enable the React renderer, for the Algolia search component - '@astrojs/renderer-react', - ], + renderers: [ + // Enable the Preact renderer to support Preact JSX components. + '@astrojs/renderer-preact', + // Enable the React renderer, for the Algolia search component + '@astrojs/renderer-react', + ], }); diff --git a/examples/docs/public/make-scrollable-code-focusable.js b/examples/docs/public/make-scrollable-code-focusable.js index 35f104923..f2b7030f7 100644 --- a/examples/docs/public/make-scrollable-code-focusable.js +++ b/examples/docs/public/make-scrollable-code-focusable.js @@ -1,3 +1,3 @@ Array.from(document.getElementsByTagName('pre')).forEach((element) => { - element.setAttribute('tabindex', '0'); + element.setAttribute('tabindex', '0'); }); diff --git a/examples/docs/src/components/Footer/AvatarList.astro b/examples/docs/src/components/Footer/AvatarList.astro index 429676990..c57ee2eb1 100644 --- a/examples/docs/src/components/Footer/AvatarList.astro +++ b/examples/docs/src/components/Footer/AvatarList.astro @@ -1,151 +1,149 @@ --- // fetch all commits for just this page's path -const path = "docs/" + Astro.props.path; +const path = 'docs/' + Astro.props.path; const url = `https://api.github.com/repos/withastro/astro/commits?path=${path}`; const commitsURL = `https://github.com/withastro/astro/commits/main/${path}`; async function getCommits(url) { - try { - const token = import.meta.env.SNOWPACK_PUBLIC_GITHUB_TOKEN; - if (!token) { - throw new Error( - 'Cannot find "SNOWPACK_PUBLIC_GITHUB_TOKEN" used for escaping rate-limiting.' - ); - } - - const auth = `Basic ${Buffer.from(token, "binary").toString("base64")}`; - - const res = await fetch(url, { - method: "GET", - headers: { - Authorization: auth, - "User-Agent": "astro-docs/1.0", - }, - }); - - const data = await res.json(); - - if (!res.ok) { - throw new Error( - `Request to fetch commits failed. Reason: ${res.statusText} + try { + const token = import.meta.env.SNOWPACK_PUBLIC_GITHUB_TOKEN; + if (!token) { + throw new Error('Cannot find "SNOWPACK_PUBLIC_GITHUB_TOKEN" used for escaping rate-limiting.'); + } + + const auth = `Basic ${Buffer.from(token, 'binary').toString('base64')}`; + + const res = await fetch(url, { + method: 'GET', + headers: { + Authorization: auth, + 'User-Agent': 'astro-docs/1.0', + }, + }); + + const data = await res.json(); + + if (!res.ok) { + throw new Error( + `Request to fetch commits failed. Reason: ${res.statusText} Message: ${data.message}` - ); - } + ); + } - return data; - } catch (e) { - console.warn(`[error] /src/components/AvatarList.astro + return data; + } catch (e) { + console.warn(`[error] /src/components/AvatarList.astro ${e?.message ?? e}`); - return new Array(); - } + return new Array(); + } } function removeDups(arr) { - if (!arr) { - return new Array(); - } - let map = new Map(); - - for (let item of arr) { - let author = item.author; - // Deduplicate based on author.id - map.set(author.id, { login: author.login, id: author.id }); - } - - return Array.from(map.values()); + if (!arr) { + return new Array(); + } + let map = new Map(); + + for (let item of arr) { + let author = item.author; + // Deduplicate based on author.id + map.set(author.id, { login: author.login, id: author.id }); + } + + return Array.from(map.values()); } const data = await getCommits(url); const unique = removeDups(data); const recentContributors = unique.slice(0, 3); // only show avatars for the 3 most recent contributors const additionalContributors = unique.length - recentContributors.length; // list the rest of them as # of extra contributors - --- + <!-- Thanks to @5t3ph for https://smolcss.dev/#smol-avatar-list! --> <div class="contributors"> -<ul class="avatar-list" style={`--avatar-count: ${recentContributors.length}`}> - -{recentContributors.map((item) => ( - <li><a href={`https://github.com/${item.login}`}><img alt={`Contributor ${item.login}`} title={`Contributor ${item.login}`} width="64" height="64" src={`https://avatars.githubusercontent.com/u/${item.id}`}/></a></li> - -))} - </ul> - {additionalContributors > 0 && <span><a href={commitsURL}>{`and ${additionalContributors} additional contributor${additionalContributors > 1 ? 's' : ''}.`}</a></span>} - {unique.length === 0 && <a href={commitsURL}>Contributors</a>} + <ul class="avatar-list" style={`--avatar-count: ${recentContributors.length}`}> + {recentContributors.map((item) => ( + <li> + <a href={`https://github.com/${item.login}`}> + <img alt={`Contributor ${item.login}`} title={`Contributor ${item.login}`} width="64" height="64" src={`https://avatars.githubusercontent.com/u/${item.id}`} /> + </a> + </li> + ))} + </ul> + {additionalContributors > 0 && ( + <span> + <a href={commitsURL}>{`and ${additionalContributors} additional contributor${additionalContributors > 1 ? 's' : ''}.`}</a> + </span> + )} + {unique.length === 0 && <a href={commitsURL}>Contributors</a>} </div> <style> -.avatar-list { - --avatar-size: 2.5rem; - --avatar-count: 3; + .avatar-list { + --avatar-size: 2.5rem; + --avatar-count: 3; - display: grid; - list-style: none; - /* Default to displaying most of the avatar to + display: grid; + list-style: none; + /* Default to displaying most of the avatar to enable easier access on touch devices, ensuring the WCAG touch target size is met or exceeded */ - grid-template-columns: repeat( - var(--avatar-count), - max(44px, calc(var(--avatar-size) / 1.15)) - ); - /* `padding` matches added visual dimensions of + grid-template-columns: repeat(var(--avatar-count), max(44px, calc(var(--avatar-size) / 1.15))); + /* `padding` matches added visual dimensions of the `box-shadow` to help create a more accurate computed component size */ - padding: 0.08em; - font-size: var(--avatar-size); -} + padding: 0.08em; + font-size: var(--avatar-size); + } -@media (any-hover: hover) and (any-pointer: fine) { - .avatar-list { - /* We create 1 extra cell to enable the computed + @media (any-hover: hover) and (any-pointer: fine) { + .avatar-list { + /* We create 1 extra cell to enable the computed width to match the final visual width */ - grid-template-columns: repeat( - calc(var(--avatar-count) + 1), - calc(var(--avatar-size) / 1.75) - ); - } -} - -.avatar-list li { - width: var(--avatar-size); - height: var(--avatar-size); -} - -.avatar-list li:hover ~ li a, -.avatar-list li:focus-within ~ li a { - transform: translateX(33%); -} - -.avatar-list img, -.avatar-list a { - display: block; - border-radius: 50%; -} - -.avatar-list a { - transition: transform 180ms ease-in-out; -} - -.avatar-list img { - width: 100%; - height: 100%; - object-fit: cover; - background-color: #fff; - box-shadow: 0 0 0 0.05em #fff, 0 0 0 0.08em rgba(0, 0, 0, 0.15); -} - -.avatar-list a:focus { - outline: 2px solid transparent; - /* Double-layer trick to work for dark and light backgrounds */ - box-shadow: 0 0 0 0.08em var(--theme-accent), 0 0 0 0.12em white; -} - -.contributors { - display: flex; - align-items: center; -} - -.contributors > * + * { - margin-left: .75rem; -} + grid-template-columns: repeat(calc(var(--avatar-count) + 1), calc(var(--avatar-size) / 1.75)); + } + } + + .avatar-list li { + width: var(--avatar-size); + height: var(--avatar-size); + } + + .avatar-list li:hover ~ li a, + .avatar-list li:focus-within ~ li a { + transform: translateX(33%); + } + + .avatar-list img, + .avatar-list a { + display: block; + border-radius: 50%; + } + + .avatar-list a { + transition: transform 180ms ease-in-out; + } + + .avatar-list img { + width: 100%; + height: 100%; + object-fit: cover; + background-color: #fff; + box-shadow: 0 0 0 0.05em #fff, 0 0 0 0.08em rgba(0, 0, 0, 0.15); + } + + .avatar-list a:focus { + outline: 2px solid transparent; + /* Double-layer trick to work for dark and light backgrounds */ + box-shadow: 0 0 0 0.08em var(--theme-accent), 0 0 0 0.12em white; + } + + .contributors { + display: flex; + align-items: center; + } + + .contributors > * + * { + margin-left: 0.75rem; + } </style> diff --git a/examples/docs/src/components/Footer/Footer.astro b/examples/docs/src/components/Footer/Footer.astro index 48de51054..d13f832e5 100644 --- a/examples/docs/src/components/Footer/Footer.astro +++ b/examples/docs/src/components/Footer/Footer.astro @@ -4,13 +4,13 @@ const { path } = Astro.props; --- <footer> - <AvatarList path={path} /> + <AvatarList {path} /> </footer> <style> -footer { - margin-top: auto; - padding: 2rem 0; - border-top: 3px solid var(--theme-divider); -} + footer { + margin-top: auto; + padding: 2rem 0; + border-top: 3px solid var(--theme-divider); + } </style> diff --git a/examples/docs/src/components/HeadCommon.astro b/examples/docs/src/components/HeadCommon.astro index fd24a81d8..289aa23aa 100644 --- a/examples/docs/src/components/HeadCommon.astro +++ b/examples/docs/src/components/HeadCommon.astro @@ -1,11 +1,11 @@ <!-- Global Metadata --> -<meta charset="utf-8"> -<meta name="viewport" content="width=device-width"> +<meta charset="utf-8" /> +<meta name="viewport" content="width=device-width" /> <link rel="icon" type="image/svg+xml" href="/favicon.svg" /> <link rel="alternate icon" type="image/x-icon" href="/favicon.ico" /> -<link rel="sitemap" href="/sitemap.xml"/> +<link rel="sitemap" href="/sitemap.xml" /> <!-- Global CSS --> <link rel="stylesheet" href={Astro.resolve('../styles/theme.css')} /> @@ -13,22 +13,22 @@ <link rel="stylesheet" href={Astro.resolve('../styles/index.css')} /> <!-- Preload Fonts --> -<link rel="preconnect" href="https://fonts.googleapis.com"> -<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> -<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital@0;1&display=swap" rel="stylesheet"> +<link rel="preconnect" href="https://fonts.googleapis.com" /> +<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> +<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital@0;1&display=swap" rel="stylesheet" /> <!-- Scrollable a11y code helper --> -<script type="module" src="/make-scrollable-code-focusable.js" /> +<script type="module" src="/make-scrollable-code-focusable.js"></script> <!-- This is intentionally inlined to avoid FOUC --> <script> - const root = document.documentElement; - const theme = localStorage.getItem('theme'); - if (theme === 'dark' || (!theme) && window.matchMedia('(prefers-color-scheme: dark)').matches) { - root.classList.add('theme-dark'); - } else { - root.classList.remove('theme-dark'); - } + const root = document.documentElement; + const theme = localStorage.getItem('theme'); + if (theme === 'dark' || (!theme && window.matchMedia('(prefers-color-scheme: dark)').matches)) { + root.classList.add('theme-dark'); + } else { + root.classList.remove('theme-dark'); + } </script> <!-- Global site tag (gtag.js) - Google Analytics --> @@ -38,4 +38,4 @@ function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-TEL60V1WM9'); -</script> -->
\ No newline at end of file +</script> --> diff --git a/examples/docs/src/components/HeadSEO.astro b/examples/docs/src/components/HeadSEO.astro index 3add09b7d..003872bc9 100644 --- a/examples/docs/src/components/HeadSEO.astro +++ b/examples/docs/src/components/HeadSEO.astro @@ -1,36 +1,37 @@ --- -import {SITE, OPEN_GRAPH} from '../config.ts'; +import { SITE, OPEN_GRAPH } from '../config.ts'; export interface Props { - content: any, - site: any, - canonicalURL: URL | string, -}; + content: any; + site: any; + canonicalURL: URL | string; +} const { content = {}, canonicalURL } = Astro.props; const formattedContentTitle = content.title ? `${content.title} 🚀 ${SITE.title}` : SITE.title; const imageSrc = content?.image?.src ?? OPEN_GRAPH.image.src; const canonicalImageSrc = new URL(imageSrc, Astro.site); const imageAlt = content?.image?.alt ?? OPEN_GRAPH.image.alt; --- + <!-- Page Metadata --> -<link rel="canonical" href={canonicalURL}/> +<link rel="canonical" href={canonicalURL} /> <!-- OpenGraph Tags --> -<meta property="og:title" content={formattedContentTitle}/> -<meta property="og:type" content="article"/> -<meta property="og:url" content={canonicalURL}/> -<meta property="og:locale" content={content.ogLocale ?? SITE.defaultLanguage}/> -<meta property="og:image" content={canonicalImageSrc}/> -<meta property="og:image:alt" content={imageAlt}/> -<meta name="description" property="og:description" content={content.description ? content.description : SITE.description}/> -<meta property="og:site_name" content={SITE.title}/> +<meta property="og:title" content={formattedContentTitle} /> +<meta property="og:type" content="article" /> +<meta property="og:url" content={canonicalURL} /> +<meta property="og:locale" content={content.ogLocale ?? SITE.defaultLanguage} /> +<meta property="og:image" content={canonicalImageSrc} /> +<meta property="og:image:alt" content={imageAlt} /> +<meta name="description" property="og:description" content={content.description ? content.description : SITE.description} /> +<meta property="og:site_name" content={SITE.title} /> <!-- Twitter Tags --> -<meta name="twitter:card" content="summary_large_image"/> -<meta name="twitter:site" content={OPEN_GRAPH.twitter}/> -<meta name="twitter:title" content={formattedContentTitle}/> -<meta name="twitter:description" content={content.description ? content.description : SITE.description}/> -<meta name="twitter:image" content={canonicalImageSrc}/> -<meta name="twitter:image:alt" content={imageAlt}/> +<meta name="twitter:card" content="summary_large_image" /> +<meta name="twitter:site" content={OPEN_GRAPH.twitter} /> +<meta name="twitter:title" content={formattedContentTitle} /> +<meta name="twitter:description" content={content.description ? content.description : SITE.description} /> +<meta name="twitter:image" content={canonicalImageSrc} /> +<meta name="twitter:image:alt" content={imageAlt} /> <!-- TODO: Add json+ld data, maybe https://schema.org/APIReference makes sense? diff --git a/examples/docs/src/components/Header/AstroLogo.astro b/examples/docs/src/components/Header/AstroLogo.astro index 124865f1b..7d6891dcb 100644 --- a/examples/docs/src/components/Header/AstroLogo.astro +++ b/examples/docs/src/components/Header/AstroLogo.astro @@ -1,18 +1,27 @@ --- -const {size} = Astro.props; +const { size } = Astro.props; --- + <svg class="logo" width={size} height={size} viewBox="0 0 256 256" fill="none" xmlns="http://www.w3.org/2000/svg"> - <style> - #flame { - fill: var(--theme-text-accent); - } - #a { - fill: var(--theme-text-accent); - } - </style> - <title>Logo</title> - <path id="a" fill-rule="evenodd" clip-rule="evenodd" - d="M163.008 18.929c1.944 2.413 2.935 5.67 4.917 12.181l43.309 142.27a180.277 180.277 0 00-51.778-17.53l-28.198-95.29a3.67 3.67 0 00-7.042.01l-27.857 95.232a180.225 180.225 0 00-52.01 17.557l43.52-142.281c1.99-6.502 2.983-9.752 4.927-12.16a15.999 15.999 0 016.484-4.798c2.872-1.154 6.271-1.154 13.07-1.154h31.085c6.807 0 10.211 0 13.086 1.157a16.004 16.004 0 016.487 4.806z" /> - <path id="flame" fill-rule="evenodd" clip-rule="evenodd" - d="M168.19 180.151c-7.139 6.105-21.39 10.268-37.804 10.268-20.147 0-37.033-6.272-41.513-14.707-1.602 4.835-1.961 10.367-1.961 13.902 0 0-1.056 17.355 11.015 29.426 0-6.268 5.081-11.349 11.349-11.349 10.743 0 10.731 9.373 10.721 16.977v.679c0 11.542 7.054 21.436 17.086 25.606a23.27 23.27 0 01-2.339-10.2c0-11.008 6.463-15.107 13.974-19.87 5.976-3.79 12.616-8.001 17.192-16.449a31.024 31.024 0 003.743-14.82c0-3.299-.513-6.479-1.463-9.463z" /> -</svg>
\ No newline at end of file + <style> + #flame { + fill: var(--theme-text-accent); + } + #a { + fill: var(--theme-text-accent); + } + </style> + <title>Logo</title> + <path + id="a" + fill-rule="evenodd" + clip-rule="evenodd" + d="M163.008 18.929c1.944 2.413 2.935 5.67 4.917 12.181l43.309 142.27a180.277 180.277 0 00-51.778-17.53l-28.198-95.29a3.67 3.67 0 00-7.042.01l-27.857 95.232a180.225 180.225 0 00-52.01 17.557l43.52-142.281c1.99-6.502 2.983-9.752 4.927-12.16a15.999 15.999 0 016.484-4.798c2.872-1.154 6.271-1.154 13.07-1.154h31.085c6.807 0 10.211 0 13.086 1.157a16.004 16.004 0 016.487 4.806z" + ></path> + <path + id="flame" + fill-rule="evenodd" + clip-rule="evenodd" + d="M168.19 180.151c-7.139 6.105-21.39 10.268-37.804 10.268-20.147 0-37.033-6.272-41.513-14.707-1.602 4.835-1.961 10.367-1.961 13.902 0 0-1.056 17.355 11.015 29.426 0-6.268 5.081-11.349 11.349-11.349 10.743 0 10.731 9.373 10.721 16.977v.679c0 11.542 7.054 21.436 17.086 25.606a23.27 23.27 0 01-2.339-10.2c0-11.008 6.463-15.107 13.974-19.87 5.976-3.79 12.616-8.001 17.192-16.449a31.024 31.024 0 003.743-14.82c0-3.299-.513-6.479-1.463-9.463z" + ></path> +</svg> diff --git a/examples/docs/src/components/Header/Header.astro b/examples/docs/src/components/Header/Header.astro index a6c82d7bb..46677b481 100644 --- a/examples/docs/src/components/Header/Header.astro +++ b/examples/docs/src/components/Header/Header.astro @@ -5,128 +5,133 @@ import AstroLogo from './AstroLogo.astro'; import SkipToContent from './SkipToContent.astro'; import SidebarToggle from './SidebarToggle.tsx'; import LanguageSelect from './LanguageSelect.tsx'; -import Search from "./Search.tsx"; +import Search from './Search.tsx'; -const {currentPage} = Astro.props; +const { currentPage } = Astro.props; const lang = currentPage && getLanguageFromURL(currentPage); --- -<style> - header { - z-index: 11; - height: var(--theme-navbar-height); - width: 100%; - background-color: var(--theme-navbar-bg); - display: flex; - align-items: center; - justify-content: center; - overflow: hidden; - position: sticky; - top: 0; - } +<header> + <SkipToContent /> + <nav class="nav-wrapper" title="Top Navigation"> + <div class="menu-toggle"> + <SidebarToggle client:idle /> + </div> + <div class="logo flex"> + <AstroLogo size={40} /> + <a href="/"> + <h1>Documentation</h1> + </a> + </div> + <div style="flex-grow: 1;"></div> + {KNOWN_LANGUAGE_CODES.length > 1 && <LanguageSelect lang={lang} client:idle />} + {CONFIG.ALGOLIA && ( + <div class="search-item"> + <Search client:idle /> + </div> + )} + </nav> +</header> - .logo { - display: flex; - overflow: hidden; - width: 30px; - font-size: 2rem; - flex-shrink: 0; - font-weight: 600; - line-height: 1; - color: hsla(var(--color-base-white), 100%, 1); - gap: 0.25em; - z-index: -1; - } +<style> + header { + z-index: 11; + height: var(--theme-navbar-height); + width: 100%; + background-color: var(--theme-navbar-bg); + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: sticky; + top: 0; + } - .logo a { - padding: 0.5em 0.25em; - margin: -0.5em -0.25em; - text-decoration: none; - font-weight: bold; - } + .logo { + display: flex; + overflow: hidden; + width: 30px; + font-size: 2rem; + flex-shrink: 0; + font-weight: 600; + line-height: 1; + color: hsla(var(--color-base-white), 100%, 1); + gap: 0.25em; + z-index: -1; + } - .logo a { - transition: color 100ms ease-out; - color: var(--theme-text); - } + .logo a { + padding: 0.5em 0.25em; + margin: -0.5em -0.25em; + text-decoration: none; + font-weight: bold; + } - .logo a:hover, - .logo a:focus { - color: var(--theme-text-accent); - } + .logo a { + transition: color 100ms ease-out; + color: var(--theme-text); + } - .logo h1 { - font: inherit; - color: inherit; - margin: 0; - } + .logo a:hover, + .logo a:focus { + color: var(--theme-text-accent); + } - .nav-wrapper { - display: flex; - align-items: center; - justify-content: flex-end; - gap: 1em; - width: 100%; - max-width: 82em; - padding: 0 1rem; - } + .logo h1 { + font: inherit; + color: inherit; + margin: 0; + } - @media (min-width: 50em) { - header { - position: static; - padding: 2rem 0rem; - } - .logo { - width: auto; - margin: 0; - z-index: 0; - } - .menu-toggle { - display: none; - } - .logo { - width: auto; - } - } + .nav-wrapper { + display: flex; + align-items: center; + justify-content: flex-end; + gap: 1em; + width: 100%; + max-width: 82em; + padding: 0 1rem; + } - /** Style Algolia */ - :root { - --docsearch-primary-color: var(--theme-accent); - --docsearch-logo-color: var(--theme-text); - } + @media (min-width: 50em) { + header { + position: static; + padding: 2rem 0rem; + } + .logo { + width: auto; + margin: 0; + z-index: 0; + } + .menu-toggle { + display: none; + } + .logo { + width: auto; + } + } - .search-item { - display: none; - position: relative; - z-index: 10; - flex-grow: 1; - padding-right: 0.7rem; - display: flex; - max-width: 200px; - } - :global(.search-item > *) { - flex-grow: 1; - } - @media (min-width: 50em) { - .search-item { - max-width: 400px; - } - } + /** Style Algolia */ + :root { + --docsearch-primary-color: var(--theme-accent); + --docsearch-logo-color: var(--theme-text); + } + + .search-item { + display: none; + position: relative; + z-index: 10; + flex-grow: 1; + padding-right: 0.7rem; + display: flex; + max-width: 200px; + } + :global(.search-item > *) { + flex-grow: 1; + } + @media (min-width: 50em) { + .search-item { + max-width: 400px; + } + } </style> -<header> - <SkipToContent /> - <nav class="nav-wrapper" title="Top Navigation"> - <div class="menu-toggle"> - <SidebarToggle client:idle/> - </div> - <div class="logo flex"> - <AstroLogo size={40} /> - <a href="/"> - <h1>Documentation</h1> - </a> - </div> - <div style="flex-grow: 1;"></div> - {KNOWN_LANGUAGE_CODES.length > 1 && <LanguageSelect lang={lang} client:idle />} - {CONFIG.ALGOLIA && <div class="search-item"><Search client:idle /></div>} - </nav> -</header>
\ No newline at end of file diff --git a/examples/docs/src/components/Header/LanguageSelect.css b/examples/docs/src/components/Header/LanguageSelect.css index 4e878714b..9e0ae7ce1 100644 --- a/examples/docs/src/components/Header/LanguageSelect.css +++ b/examples/docs/src/components/Header/LanguageSelect.css @@ -1,47 +1,47 @@ .language-select { - flex-grow: 1; - width: 48px; - box-sizing: border-box; - margin: 0; - padding: 0.33em 0.5em; - overflow: visible; - font-weight: 500; - font-size: 1rem; - font-family: inherit; - line-height: inherit; - background-color: var(--theme-bg); - border-color: var(--theme-text-lighter); - color: var(--theme-text-light); - border-style: solid; - border-width: 1px; - border-radius: 0.25rem; - outline: 0; - cursor: pointer; - transition-timing-function: ease-out; - transition-duration: 0.2s; - transition-property: border-color, color; - -webkit-font-smoothing: antialiased; - padding-left: 30px; - padding-right: 1rem; + flex-grow: 1; + width: 48px; + box-sizing: border-box; + margin: 0; + padding: 0.33em 0.5em; + overflow: visible; + font-weight: 500; + font-size: 1rem; + font-family: inherit; + line-height: inherit; + background-color: var(--theme-bg); + border-color: var(--theme-text-lighter); + color: var(--theme-text-light); + border-style: solid; + border-width: 1px; + border-radius: 0.25rem; + outline: 0; + cursor: pointer; + transition-timing-function: ease-out; + transition-duration: 0.2s; + transition-property: border-color, color; + -webkit-font-smoothing: antialiased; + padding-left: 30px; + padding-right: 1rem; } .language-select-wrapper .language-select:hover, .language-select-wrapper .language-select:focus { - color: var(--theme-text); - border-color: var(--theme-text-light); + color: var(--theme-text); + border-color: var(--theme-text-light); } .language-select-wrapper { - color: var(--theme-text-light); - position: relative; + color: var(--theme-text-light); + position: relative; } .language-select-wrapper > svg { - position: absolute; - top: 7px; - left: 10px; - pointer-events: none; + position: absolute; + top: 7px; + left: 10px; + pointer-events: none; } @media (min-width: 50em) { - .language-select { - width: 100%; - } + .language-select { + width: 100%; + } } diff --git a/examples/docs/src/components/Header/LanguageSelect.tsx b/examples/docs/src/components/Header/LanguageSelect.tsx index 8b9807fe8..7fd3af229 100644 --- a/examples/docs/src/components/Header/LanguageSelect.tsx +++ b/examples/docs/src/components/Header/LanguageSelect.tsx @@ -4,35 +4,35 @@ import './LanguageSelect.css'; import { KNOWN_LANGUAGES, langPathRegex } from '../../languages'; const LanguageSelect: FunctionalComponent<{ lang: string }> = ({ lang }) => { - return ( - <div class="language-select-wrapper"> - <svg aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 88.6 77.3" height="1.2em" width="1.2em"> - <path fill="currentColor" d="M61,24.6h7.9l18.7,51.6h-7.7l-5.4-15.5H54.3l-5.6,15.5h-7.2L61,24.6z M72.6,55l-8-22.8L56.3,55H72.6z" /> - <path - fill="currentColor" - d="M53.6,60.6c-10-4-16-9-22-14c0,0,1.3,1.3,0,0c-6,5-20,13-20,13l-4-6c8-5,10-6,19-13c-2.1-1.9-12-13-13-19h8 c4,9,10,14,10,14c10-8,10-19,10-19h8c0,0-1,13-12,24l0,0c5,5,10,9,19,13L53.6,60.6z M1.6,16.6h56v-8h-23v-7h-9v7h-24V16.6z" - /> - </svg> - <select - class="language-select" - value={lang} - onChange={(e) => { - const newLang = e.target.value; - let actualDest = window.location.pathname.replace(langPathRegex, '/'); - if (actualDest == '/') actualDest = `/introduction`; - window.location.pathname = '/' + newLang + actualDest; - }} - > - {Object.keys(KNOWN_LANGUAGES).map((key) => { - return ( - <option value={KNOWN_LANGUAGES[key]}> - <span>{key}</span> - </option> - ); - })} - </select> - </div> - ); + return ( + <div class="language-select-wrapper"> + <svg aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 88.6 77.3" height="1.2em" width="1.2em"> + <path fill="currentColor" d="M61,24.6h7.9l18.7,51.6h-7.7l-5.4-15.5H54.3l-5.6,15.5h-7.2L61,24.6z M72.6,55l-8-22.8L56.3,55H72.6z" /> + <path + fill="currentColor" + d="M53.6,60.6c-10-4-16-9-22-14c0,0,1.3,1.3,0,0c-6,5-20,13-20,13l-4-6c8-5,10-6,19-13c-2.1-1.9-12-13-13-19h8 c4,9,10,14,10,14c10-8,10-19,10-19h8c0,0-1,13-12,24l0,0c5,5,10,9,19,13L53.6,60.6z M1.6,16.6h56v-8h-23v-7h-9v7h-24V16.6z" + /> + </svg> + <select + class="language-select" + value={lang} + onChange={(e) => { + const newLang = e.target.value; + let actualDest = window.location.pathname.replace(langPathRegex, '/'); + if (actualDest == '/') actualDest = `/introduction`; + window.location.pathname = '/' + newLang + actualDest; + }} + > + {Object.keys(KNOWN_LANGUAGES).map((key) => { + return ( + <option value={KNOWN_LANGUAGES[key]}> + <span>{key}</span> + </option> + ); + })} + </select> + </div> + ); }; export default LanguageSelect; diff --git a/examples/docs/src/components/Header/Search.css b/examples/docs/src/components/Header/Search.css index 2056c2c8f..9a0c7f303 100644 --- a/examples/docs/src/components/Header/Search.css +++ b/examples/docs/src/components/Header/Search.css @@ -1,69 +1,69 @@ /** Style Algolia */ :root { - --docsearch-primary-color: var(--theme-accent); - --docsearch-logo-color: var(--theme-text); + --docsearch-primary-color: var(--theme-accent); + --docsearch-logo-color: var(--theme-text); } .search-input { - flex-grow: 1; - box-sizing: border-box; - width: 100%; - margin: 0; - padding: 0.33em 0.5em; - overflow: visible; - font-weight: 500; - font-size: 1rem; - font-family: inherit; - line-height: inherit; - background-color: var(--theme-divider); - border-color: var(--theme-divider); - color: var(--theme-text-light); - border-style: solid; - border-width: 1px; - border-radius: 0.25rem; - outline: 0; - cursor: pointer; - transition-timing-function: ease-out; - transition-duration: 0.2s; - transition-property: border-color, color; - -webkit-font-smoothing: antialiased; + flex-grow: 1; + box-sizing: border-box; + width: 100%; + margin: 0; + padding: 0.33em 0.5em; + overflow: visible; + font-weight: 500; + font-size: 1rem; + font-family: inherit; + line-height: inherit; + background-color: var(--theme-divider); + border-color: var(--theme-divider); + color: var(--theme-text-light); + border-style: solid; + border-width: 1px; + border-radius: 0.25rem; + outline: 0; + cursor: pointer; + transition-timing-function: ease-out; + transition-duration: 0.2s; + transition-property: border-color, color; + -webkit-font-smoothing: antialiased; } .search-input:hover, .search-input:focus { - color: var(--theme-text); - border-color: var(--theme-text-light); + color: var(--theme-text); + border-color: var(--theme-text-light); } .search-input:hover::placeholder, .search-input:focus::placeholder { - color: var(--theme-text-light); + color: var(--theme-text-light); } .search-input::placeholder { - color: var(--theme-text-light); + color: var(--theme-text-light); } .search-hint { - position: absolute; - top: 7px; - right: 19px; - padding: 3px 5px; - display: none; - display: none; - align-items: center; - justify-content: center; - letter-spacing: 0.125em; - font-size: 13px; - font-family: var(--font-mono); - pointer-events: none; - border-color: var(--theme-text-lighter); - color: var(--theme-text-light); - border-style: solid; - border-width: 1px; - border-radius: 0.25rem; - line-height: 14px; + position: absolute; + top: 7px; + right: 19px; + padding: 3px 5px; + display: none; + display: none; + align-items: center; + justify-content: center; + letter-spacing: 0.125em; + font-size: 13px; + font-family: var(--font-mono); + pointer-events: none; + border-color: var(--theme-text-lighter); + color: var(--theme-text-light); + border-style: solid; + border-width: 1px; + border-radius: 0.25rem; + line-height: 14px; } @media (min-width: 50em) { - .search-hint { - display: flex; - } + .search-hint { + display: flex; + } } /* ------------------------------------------------------------ *\ @@ -71,6 +71,6 @@ \* ------------------------------------------------------------ */ .DocSearch-Modal .DocSearch-Hit a { - box-shadow: none; - border: 1px solid var(--theme-accent); + box-shadow: none; + border: 1px solid var(--theme-accent); } diff --git a/examples/docs/src/components/Header/Search.tsx b/examples/docs/src/components/Header/Search.tsx index 158f6fe29..cfee83d04 100644 --- a/examples/docs/src/components/Header/Search.tsx +++ b/examples/docs/src/components/Header/Search.tsx @@ -7,71 +7,71 @@ import '@docsearch/css/dist/style.css'; import './Search.css'; export default function Search() { - const [isOpen, setIsOpen] = useState(false); - const searchButtonRef = useRef(); - const [initialQuery, setInitialQuery] = useState(null); + const [isOpen, setIsOpen] = useState(false); + const searchButtonRef = useRef(); + const [initialQuery, setInitialQuery] = useState(null); - const onOpen = useCallback(() => { - setIsOpen(true); - }, [setIsOpen]); + const onOpen = useCallback(() => { + setIsOpen(true); + }, [setIsOpen]); - const onClose = useCallback(() => { - setIsOpen(false); - }, [setIsOpen]); + const onClose = useCallback(() => { + setIsOpen(false); + }, [setIsOpen]); - const onInput = useCallback( - (e) => { - setIsOpen(true); - setInitialQuery(e.key); - }, - [setIsOpen, setInitialQuery] - ); + const onInput = useCallback( + (e) => { + setIsOpen(true); + setInitialQuery(e.key); + }, + [setIsOpen, setInitialQuery] + ); - useDocSearchKeyboardEvents({ - isOpen, - onOpen, - onClose, - onInput, - searchButtonRef, - }); + useDocSearchKeyboardEvents({ + isOpen, + onOpen, + onClose, + onInput, + searchButtonRef, + }); - return ( - <> - <button type="button" ref={searchButtonRef} onClick={onOpen} className="search-input"> - <svg width="24" height="24" fill="none"> - <path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" /> - </svg> - <span>Search</span> - <span className="search-hint"> - <span className="sr-only">Press </span> - <kbd>/</kbd> - <span className="sr-only"> to search</span> - </span> - </button> - {isOpen && - createPortal( - <DocSearchModal - initialQuery={initialQuery} - initialScrollY={window.scrollY} - onClose={onClose} - indexName={(CONFIG as any).ALGOLIA.indexName} - apiKey={(CONFIG as any).ALGOLIA.apiKey} - transformItems={(items) => { - return items.map((item) => { - // We transform the absolute URL into a relative URL to - // work better on localhost, preview URLS. - const a = document.createElement('a'); - a.href = item.url; - const hash = a.hash === '#overview' ? '' : a.hash; - return { - ...item, - url: `${a.pathname}${hash}`, - }; - }); - }} - />, - document.body - )} - </> - ); + return ( + <> + <button type="button" ref={searchButtonRef} onClick={onOpen} className="search-input"> + <svg width="24" height="24" fill="none"> + <path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" /> + </svg> + <span>Search</span> + <span className="search-hint"> + <span className="sr-only">Press </span> + <kbd>/</kbd> + <span className="sr-only"> to search</span> + </span> + </button> + {isOpen && + createPortal( + <DocSearchModal + initialQuery={initialQuery} + initialScrollY={window.scrollY} + onClose={onClose} + indexName={(CONFIG as any).ALGOLIA.indexName} + apiKey={(CONFIG as any).ALGOLIA.apiKey} + transformItems={(items) => { + return items.map((item) => { + // We transform the absolute URL into a relative URL to + // work better on localhost, preview URLS. + const a = document.createElement('a'); + a.href = item.url; + const hash = a.hash === '#overview' ? '' : a.hash; + return { + ...item, + url: `${a.pathname}${hash}`, + }; + }); + }} + />, + document.body + )} + </> + ); } diff --git a/examples/docs/src/components/Header/SidebarToggle.tsx b/examples/docs/src/components/Header/SidebarToggle.tsx index 97fece6b2..90b180461 100644 --- a/examples/docs/src/components/Header/SidebarToggle.tsx +++ b/examples/docs/src/components/Header/SidebarToggle.tsx @@ -3,25 +3,25 @@ import { h, Fragment } from 'preact'; import { useState, useEffect } from 'preact/hooks'; const MenuToggle: FunctionalComponent = () => { - const [sidebarShown, setSidebarShown] = useState(false); + const [sidebarShown, setSidebarShown] = useState(false); - useEffect(() => { - const body = document.getElementsByTagName('body')[0]; - if (sidebarShown) { - body.classList.add('mobile-sidebar-toggle'); - } else { - body.classList.remove('mobile-sidebar-toggle'); - } - }, [sidebarShown]); + useEffect(() => { + const body = document.getElementsByTagName('body')[0]; + if (sidebarShown) { + body.classList.add('mobile-sidebar-toggle'); + } else { + body.classList.remove('mobile-sidebar-toggle'); + } + }, [sidebarShown]); - return ( - <button type="button" aria-pressed={sidebarShown ? 'true' : 'false'} id="menu-toggle" onClick={() => setSidebarShown(!sidebarShown)}> - <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="none" viewBox="0 0 24 24" stroke="currentColor"> - <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" /> - </svg> - <span className="sr-only">Toggle sidebar</span> - </button> - ); + return ( + <button type="button" aria-pressed={sidebarShown ? 'true' : 'false'} id="menu-toggle" onClick={() => setSidebarShown(!sidebarShown)}> + <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="none" viewBox="0 0 24 24" stroke="currentColor"> + <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" /> + </svg> + <span className="sr-only">Toggle sidebar</span> + </button> + ); }; export default MenuToggle; diff --git a/examples/docs/src/components/Header/SkipToContent.astro b/examples/docs/src/components/Header/SkipToContent.astro index 6df3a72ed..91df15b93 100644 --- a/examples/docs/src/components/Header/SkipToContent.astro +++ b/examples/docs/src/components/Header/SkipToContent.astro @@ -1,21 +1,22 @@ +<a href="#article" class="sr-only skiplink"><span>Skip to Content</span></a> + <style> -.skiplink, -.skiplink:focus, -.skiplink:focus-visible { - position: absolute; - padding: 0.25em; - font-size: larger; - top: 0; - left: 0; - right: 0; - z-index: 9; - display: block; - text-align: center; - background-color: var(--theme-text-accent); - color: var(--theme-bg); - border-radius: 0.25em; - outline: var(--theme-bg) solid 1px; - outline-offset: 0; -} + .skiplink, + .skiplink:focus, + .skiplink:focus-visible { + position: absolute; + padding: 0.25em; + font-size: larger; + top: 0; + left: 0; + right: 0; + z-index: 9; + display: block; + text-align: center; + background-color: var(--theme-text-accent); + color: var(--theme-bg); + border-radius: 0.25em; + outline: var(--theme-bg) solid 1px; + outline-offset: 0; + } </style> -<a href="#article" class="sr-only skiplink"><span>Skip to Content</span></a> diff --git a/examples/docs/src/components/LeftSidebar/LeftSidebar.astro b/examples/docs/src/components/LeftSidebar/LeftSidebar.astro index e979dc80e..dd7b34e0f 100644 --- a/examples/docs/src/components/LeftSidebar/LeftSidebar.astro +++ b/examples/docs/src/components/LeftSidebar/LeftSidebar.astro @@ -1,109 +1,111 @@ --- import { getLanguageFromURL } from '../../languages.ts'; import { SIDEBAR } from '../../config.ts'; -const {currentPage} = Astro.props; +const { currentPage } = Astro.props; const currentPageMatch = currentPage.slice(1); const langCode = getLanguageFromURL(currentPage); -// SIDEBAR is a flat array. Group it by sections to properly render. +// SIDEBAR is a flat array. Group it by sections to properly render. const sidebarSections = SIDEBAR[langCode].reduce((col, item) => { - if (item.header) { - col.push({...item, children: []}); - } else { - col[col.length-1].children.push(item); - } - return col; + if (item.header) { + col.push({ ...item, children: [] }); + } else { + col[col.length - 1].children.push(item); + } + return col; }, []); - --- <nav aria-labelledby="grid-left"> - <ul class="nav-groups"> - {sidebarSections.map(section => ( - <li> - <div class="nav-group"> - <h2 class="nav-group-title">{section.text}</h2> - <ul> - {section.children.map(child => ( - <li class="nav-link"><a href={`${Astro.site.pathname}${child.link}`} aria-current={`${currentPageMatch === child.link ? 'page' : 'false'}`}>{child.text}</a></li> - ))} - </ul> - </div> - </li> - ))} - </ul> + <ul class="nav-groups"> + {sidebarSections.map((section) => ( + <li> + <div class="nav-group"> + <h2 class="nav-group-title">{section.text}</h2> + <ul> + {section.children.map((child) => ( + <li class="nav-link"> + <a href={`${Astro.site.pathname}${child.link}`} aria-current={`${currentPageMatch === child.link ? 'page' : 'false'}`}> + {child.text} + </a> + </li> + ))} + </ul> + </div> + </li> + ))} + </ul> </nav> <script> - window.addEventListener('DOMContentLoaded', (event) => { - var target = document.querySelector('[aria-current="page"]'); - if (target && (target.offsetTop > (window.innerHeight - 100))) { - document.querySelector('.nav-groups').scrollTop = target.offsetTop; - } - }); + window.addEventListener('DOMContentLoaded', (event) => { + var target = document.querySelector('[aria-current="page"]'); + if (target && target.offsetTop > window.innerHeight - 100) { + document.querySelector('.nav-groups').scrollTop = target.offsetTop; + } + }); </script> <style> - nav { - width: 100%; - margin-right: 1rem; - } - .nav-groups { - height: 100%; - padding: 2rem 0; - overflow-x: visible; - overflow-y: auto; - max-height: 100vh; - } - - .nav-groups > li + li { - margin-top: 2rem; - } + nav { + width: 100%; + margin-right: 1rem; + } + .nav-groups { + height: 100%; + padding: 2rem 0; + overflow-x: visible; + overflow-y: auto; + max-height: 100vh; + } - .nav-groups > :first-child { - padding-top: var(--doc-padding); - } + .nav-groups > li + li { + margin-top: 2rem; + } - .nav-groups > :last-child { - padding-bottom: 2rem; - margin-bottom: var(--theme-navbar-height); - } + .nav-groups > :first-child { + padding-top: var(--doc-padding); + } - .nav-group-title { - font-size: 1.0rem; - font-weight: 700; - padding: 0.1rem 1rem; - text-transform: uppercase; - margin-bottom: 0.5rem; - } + .nav-groups > :last-child { + padding-bottom: 2rem; + margin-bottom: var(--theme-navbar-height); + } - .nav-link a { - font-size: 1.0rem; - margin: 1px; - padding: 0.3rem 1rem; - font: inherit; - color: inherit; - text-decoration: none; - display: block; - } - .nav-link a:hover, - .nav-link a:focus { - background-color: var(--theme-bg-hover); - } + .nav-group-title { + font-size: 1rem; + font-weight: 700; + padding: 0.1rem 1rem; + text-transform: uppercase; + margin-bottom: 0.5rem; + } - .nav-link a[aria-current="page"] { - color: var(--theme-text-accent); - background-color: var(--theme-bg-accent); - font-weight: 600; - } + .nav-link a { + font-size: 1rem; + margin: 1px; + padding: 0.3rem 1rem; + font: inherit; + color: inherit; + text-decoration: none; + display: block; + } + .nav-link a:hover, + .nav-link a:focus { + background-color: var(--theme-bg-hover); + } - :global(:root.theme-dark) .nav-link a[aria-current="page"] { - color: hsla(var(--color-base-white), 100%, 1); - } + .nav-link a[aria-current='page'] { + color: var(--theme-text-accent); + background-color: var(--theme-bg-accent); + font-weight: 600; + } - @media (min-width: 50em) { - .nav-groups { - padding: 0; - } - } + :global(:root.theme-dark) .nav-link a[aria-current='page'] { + color: hsla(var(--color-base-white), 100%, 1); + } + @media (min-width: 50em) { + .nav-groups { + padding: 0; + } + } </style> diff --git a/examples/docs/src/components/PageContent/PageContent.astro b/examples/docs/src/components/PageContent/PageContent.astro index 4d904852a..32db5cd58 100644 --- a/examples/docs/src/components/PageContent/PageContent.astro +++ b/examples/docs/src/components/PageContent/PageContent.astro @@ -2,41 +2,43 @@ import MoreMenu from '../RightSidebar/MoreMenu.astro'; import TableOfContents from '../RightSidebar/TableOfContents.tsx'; -const {content, githubEditUrl} = Astro.props; +const { content, githubEditUrl } = Astro.props; const title = content.title; const headers = content.astro.headers; --- + +<article id="article" class="content"> + <section class="main-section"> + <h1 class="content-title" id="overview">{title}</h1> + <nav class="block sm:hidden"> + <TableOfContents client:media="(max-width: 50em)" {headers} /> + </nav> + <slot /> + </section> + <nav class="block sm:hidden"> + <MoreMenu editHref={githubEditUrl} /> + </nav> +</article> + <style> - .content { - padding: 0; - max-width: 75ch; - width: 100%; - height: 100%; - display: flex; - flex-direction: column; - } - .content > section { - margin-bottom: 4rem; - } - .block { - display: block; - } + .content { + padding: 0; + max-width: 75ch; + width: 100%; + height: 100%; + display: flex; + flex-direction: column; + } + .content > section { + margin-bottom: 4rem; + } + .block { + display: block; + } - @media (min-width: 50em) { - .sm\:hidden { - display: none; - } - } + @media (min-width: 50em) { + .sm\:hidden { + display: none; + } + } </style> -<article id="article" class="content"> - <section class="main-section"> - <h1 class="content-title" id="overview">{title}</h1> - <nav class="block sm:hidden"> - <TableOfContents client:media="(max-width: 50em)" headers={headers} /> - </nav> - <slot /> - </section> - <nav class="block sm:hidden"> - <MoreMenu editHref={githubEditUrl}/> - </nav> -</article>
\ No newline at end of file diff --git a/examples/docs/src/components/RightSidebar/MoreMenu.astro b/examples/docs/src/components/RightSidebar/MoreMenu.astro index c822aaee9..649e02c29 100644 --- a/examples/docs/src/components/RightSidebar/MoreMenu.astro +++ b/examples/docs/src/components/RightSidebar/MoreMenu.astro @@ -1,68 +1,70 @@ --- import ThemeToggleButton from './ThemeToggleButton.tsx'; import * as CONFIG from '../../config'; -const {editHref} = Astro.props; -const showMoreSection = (CONFIG.COMMUNITY_INVITE_URL || editHref); +const { editHref } = Astro.props; +const showMoreSection = CONFIG.COMMUNITY_INVITE_URL || editHref; --- -<style> - .edit-on-github { - text-decoration: none; - font: inherit; - color: inherit; - font-size: 1rem; - } -</style> + {showMoreSection && <h2 class="heading">More</h2>} <ul> - {editHref && - <li class={`header-link depth-2`}> - <a class="edit-on-github" href={editHref} target="_blank"> - <svg - aria-hidden="true" - focusable="false" - data-prefix="fas" - data-icon="pen" - class="svg-inline--fa fa-pen fa-w-16" - role="img" - xmlns="http://www.w3.org/2000/svg" - viewBox="0 0 512 512" - height="1em" - width="1em" - > - <path - fill="currentColor" - d="M290.74 93.24l128.02 128.02-277.99 277.99-114.14 12.6C11.35 513.54-1.56 500.62.14 485.34l12.7-114.22 277.9-277.88zm207.2-19.06l-60.11-60.11c-18.75-18.75-49.16-18.75-67.91 0l-56.55 56.55 128.02 128.02 56.55-56.55c18.75-18.76 18.75-49.16 0-67.91z" - ></path> - </svg> - <span>Edit this page</span> - </a> - </li> - } - {CONFIG.COMMUNITY_INVITE_URL && - <li class={`header-link depth-2`}> - <a href={CONFIG.COMMUNITY_INVITE_URL} target="_blank"> - <svg - aria-hidden="true" - focusable="false" - data-prefix="fas" - data-icon="comment-alt" - class="svg-inline--fa fa-comment-alt fa-w-16" - role="img" - xmlns="http://www.w3.org/2000/svg" - viewBox="0 0 512 512" - height="1em" - width="1em" - > - <path - fill="currentColor" - d="M448 0H64C28.7 0 0 28.7 0 64v288c0 35.3 28.7 64 64 64h96v84c0 9.8 11.2 15.5 19.1 9.7L304 416h144c35.3 0 64-28.7 64-64V64c0-35.3-28.7-64-64-64z" - ></path> - </svg> - <span>Join our community</span> - </a> - </li> - } + {editHref && ( + <li class={`header-link depth-2`}> + <a class="edit-on-github" href={editHref} target="_blank"> + <svg + aria-hidden="true" + focusable="false" + data-prefix="fas" + data-icon="pen" + class="svg-inline--fa fa-pen fa-w-16" + role="img" + xmlns="http://www.w3.org/2000/svg" + viewBox="0 0 512 512" + height="1em" + width="1em" + > + <path + fill="currentColor" + d="M290.74 93.24l128.02 128.02-277.99 277.99-114.14 12.6C11.35 513.54-1.56 500.62.14 485.34l12.7-114.22 277.9-277.88zm207.2-19.06l-60.11-60.11c-18.75-18.75-49.16-18.75-67.91 0l-56.55 56.55 128.02 128.02 56.55-56.55c18.75-18.76 18.75-49.16 0-67.91z" + ></path> + </svg> + <span>Edit this page</span> + </a> + </li> + )} + {CONFIG.COMMUNITY_INVITE_URL && ( + <li class={`header-link depth-2`}> + <a href={CONFIG.COMMUNITY_INVITE_URL} target="_blank"> + <svg + aria-hidden="true" + focusable="false" + data-prefix="fas" + data-icon="comment-alt" + class="svg-inline--fa fa-comment-alt fa-w-16" + role="img" + xmlns="http://www.w3.org/2000/svg" + viewBox="0 0 512 512" + height="1em" + width="1em" + > + <path + fill="currentColor" + d="M448 0H64C28.7 0 0 28.7 0 64v288c0 35.3 28.7 64 64 64h96v84c0 9.8 11.2 15.5 19.1 9.7L304 416h144c35.3 0 64-28.7 64-64V64c0-35.3-28.7-64-64-64z" + ></path> + </svg> + <span>Join our community</span> + </a> + </li> + )} </ul> <div style="margin: 2rem 0; text-align: center;"> - <ThemeToggleButton client:visible /> + <ThemeToggleButton client:visible /> </div> + +<style> + .edit-on-github { + text-decoration: none; + font: inherit; + color: inherit; + font-size: 1rem; + } +</style> diff --git a/examples/docs/src/components/RightSidebar/RightSidebar.astro b/examples/docs/src/components/RightSidebar/RightSidebar.astro index 5e0a86b78..a0b5779dc 100644 --- a/examples/docs/src/components/RightSidebar/RightSidebar.astro +++ b/examples/docs/src/components/RightSidebar/RightSidebar.astro @@ -1,25 +1,27 @@ --- import TableOfContents from './TableOfContents.tsx'; import MoreMenu from './MoreMenu.astro'; -const {content, githubEditUrl} = Astro.props; +const { content, githubEditUrl } = Astro.props; const headers = content.astro.headers; --- + +<nav class="sidebar-nav" aria-labelledby="grid-right"> + <div class="sidebar-nav-inner"> + <TableOfContents client:media="(min-width: 50em)" {headers} /> + <MoreMenu editHref={githubEditUrl} /> + </div> +</nav> + <style> - .sidebar-nav { - width: 100%; - position: sticky; - top: 0; - } - .sidebar-nav-inner { - height: 100%; - padding: 0; - padding-top: var(--doc-padding); - overflow: auto; - } + .sidebar-nav { + width: 100%; + position: sticky; + top: 0; + } + .sidebar-nav-inner { + height: 100%; + padding: 0; + padding-top: var(--doc-padding); + overflow: auto; + } </style> -<nav class="sidebar-nav" aria-labelledby="grid-right"> - <div class="sidebar-nav-inner"> - <TableOfContents client:media="(min-width: 50em)" headers={headers} /> - <MoreMenu editHref={githubEditUrl} /> - </div> -</nav>
\ No newline at end of file diff --git a/examples/docs/src/components/RightSidebar/TableOfContents.tsx b/examples/docs/src/components/RightSidebar/TableOfContents.tsx index d8ea998d4..578d2aa98 100644 --- a/examples/docs/src/components/RightSidebar/TableOfContents.tsx +++ b/examples/docs/src/components/RightSidebar/TableOfContents.tsx @@ -3,43 +3,43 @@ import { h, Fragment } from 'preact'; import { useState, useEffect, useRef } from 'preact/hooks'; const TableOfContents: FunctionalComponent<{ headers: any[] }> = ({ headers = [] }) => { - const itemOffsets = useRef([]); - const [activeId, setActiveId] = useState<string>(undefined); + const itemOffsets = useRef([]); + const [activeId, setActiveId] = useState<string>(undefined); - useEffect(() => { - const getItemOffsets = () => { - const titles = document.querySelectorAll('article :is(h1, h2, h3, h4)'); - itemOffsets.current = Array.from(titles).map((title) => ({ - id: title.id, - topOffset: title.getBoundingClientRect().top + window.scrollY, - })); - }; + useEffect(() => { + const getItemOffsets = () => { + const titles = document.querySelectorAll('article :is(h1, h2, h3, h4)'); + itemOffsets.current = Array.from(titles).map((title) => ({ + id: title.id, + topOffset: title.getBoundingClientRect().top + window.scrollY, + })); + }; - getItemOffsets(); - window.addEventListener('resize', getItemOffsets); + getItemOffsets(); + window.addEventListener('resize', getItemOffsets); - return () => { - window.removeEventListener('resize', getItemOffsets); - }; - }, []); + return () => { + window.removeEventListener('resize', getItemOffsets); + }; + }, []); - return ( - <> - <h2 class="heading">On this page</h2> - <ul> - <li class={`header-link depth-2 ${activeId === 'overview' ? 'active' : ''}`.trim()}> - <a href="#overview">Overview</a> - </li> - {headers - .filter(({ depth }) => depth > 1 && depth < 4) - .map((header) => ( - <li class={`header-link depth-${header.depth} ${activeId === header.slug ? 'active' : ''}`.trim()}> - <a href={`#${header.slug}`}>{header.text}</a> - </li> - ))} - </ul> - </> - ); + return ( + <> + <h2 class="heading">On this page</h2> + <ul> + <li class={`header-link depth-2 ${activeId === 'overview' ? 'active' : ''}`.trim()}> + <a href="#overview">Overview</a> + </li> + {headers + .filter(({ depth }) => depth > 1 && depth < 4) + .map((header) => ( + <li class={`header-link depth-${header.depth} ${activeId === header.slug ? 'active' : ''}`.trim()}> + <a href={`#${header.slug}`}>{header.text}</a> + </li> + ))} + </ul> + </> + ); }; export default TableOfContents; diff --git a/examples/docs/src/components/RightSidebar/ThemeToggleButton.css b/examples/docs/src/components/RightSidebar/ThemeToggleButton.css index 7de231d1b..dc5ba46d9 100644 --- a/examples/docs/src/components/RightSidebar/ThemeToggleButton.css +++ b/examples/docs/src/components/RightSidebar/ThemeToggleButton.css @@ -1,37 +1,37 @@ .theme-toggle { - display: inline-flex; - align-items: center; - gap: 0.25em; - padding: 0.33em 0.67em; - border-radius: 99em; - background-color: var(--theme-code-inline-bg); + display: inline-flex; + align-items: center; + gap: 0.25em; + padding: 0.33em 0.67em; + border-radius: 99em; + background-color: var(--theme-code-inline-bg); } .theme-toggle > label:focus-within { - outline: 2px solid transparent; - box-shadow: 0 0 0 0.08em var(--theme-accent), 0 0 0 0.12em white; + outline: 2px solid transparent; + box-shadow: 0 0 0 0.08em var(--theme-accent), 0 0 0 0.12em white; } .theme-toggle > label { - color: var(--theme-code-inline-text); - position: relative; - display: flex; - align-items: center; - justify-content: center; - opacity: 0.5; + color: var(--theme-code-inline-text); + position: relative; + display: flex; + align-items: center; + justify-content: center; + opacity: 0.5; } .theme-toggle .checked { - color: var(--theme-accent); - opacity: 1; + color: var(--theme-accent); + opacity: 1; } input[name='theme-toggle'] { - position: absolute; - opacity: 0; - top: 0; - right: 0; - bottom: 0; - left: 0; - z-index: -1; + position: absolute; + opacity: 0; + top: 0; + right: 0; + bottom: 0; + left: 0; + z-index: -1; } diff --git a/examples/docs/src/components/RightSidebar/ThemeToggleButton.tsx b/examples/docs/src/components/RightSidebar/ThemeToggleButton.tsx index 75ea775f4..6bdf45f02 100644 --- a/examples/docs/src/components/RightSidebar/ThemeToggleButton.tsx +++ b/examples/docs/src/components/RightSidebar/ThemeToggleButton.tsx @@ -6,66 +6,66 @@ import './ThemeToggleButton.css'; const themes = ['light', 'dark']; const icons = [ - <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="currentColor"> - <path - fillRule="evenodd" - d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z" - clipRule="evenodd" - /> - </svg>, - <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="currentColor"> - <path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z" /> - </svg>, + <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="currentColor"> + <path + fillRule="evenodd" + d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z" + clipRule="evenodd" + /> + </svg>, + <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="currentColor"> + <path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z" /> + </svg>, ]; const ThemeToggle: FunctionalComponent = () => { - const [theme, setTheme] = useState(() => { - if (import.meta.env.SSR) { - return undefined; - } - if (typeof localStorage !== 'undefined' && localStorage.getItem('theme')) { - return localStorage.getItem('theme'); - } - if (window.matchMedia('(prefers-color-scheme: dark)').matches) { - return 'dark'; - } - return 'light'; - }); + const [theme, setTheme] = useState(() => { + if (import.meta.env.SSR) { + return undefined; + } + if (typeof localStorage !== 'undefined' && localStorage.getItem('theme')) { + return localStorage.getItem('theme'); + } + if (window.matchMedia('(prefers-color-scheme: dark)').matches) { + return 'dark'; + } + return 'light'; + }); - useEffect(() => { - const root = document.documentElement; - if (theme === 'light') { - root.classList.remove('theme-dark'); - } else { - root.classList.add('theme-dark'); - } - }, [theme]); + useEffect(() => { + const root = document.documentElement; + if (theme === 'light') { + root.classList.remove('theme-dark'); + } else { + root.classList.add('theme-dark'); + } + }, [theme]); - return ( - <div class="theme-toggle"> - {themes.map((t, i) => { - const icon = icons[i]; - const checked = t === theme; - return ( - <label className={checked ? ' checked' : ''}> - {icon} - <input - type="radio" - name="theme-toggle" - checked={checked} - value={t} - title={`Use ${t} theme`} - aria-label={`Use ${t} theme`} - onChange={() => { - localStorage.setItem('theme', t); - setTheme(t); - }} - /> - </label> - ); - })} - </div> - ); + return ( + <div class="theme-toggle"> + {themes.map((t, i) => { + const icon = icons[i]; + const checked = t === theme; + return ( + <label className={checked ? ' checked' : ''}> + {icon} + <input + type="radio" + name="theme-toggle" + checked={checked} + value={t} + title={`Use ${t} theme`} + aria-label={`Use ${t} theme`} + onChange={() => { + localStorage.setItem('theme', t); + setTheme(t); + }} + /> + </label> + ); + })} + </div> + ); }; export default ThemeToggle; diff --git a/examples/docs/src/config.ts b/examples/docs/src/config.ts index ae4321f48..5953dd97a 100644 --- a/examples/docs/src/config.ts +++ b/examples/docs/src/config.ts @@ -1,19 +1,19 @@ export const SITE = { - title: 'Your Documentation Website', - description: 'Your website description.', - defaultLanguage: 'en_US', + title: 'Your Documentation Website', + description: 'Your website description.', + defaultLanguage: 'en_US', }; export const OPEN_GRAPH = { - image: { - src: 'https://github.com/withastro/astro/blob/main/assets/social/banner.jpg?raw=true', - alt: 'astro logo on a starry expanse of space,' + ' with a purple saturn-like planet floating in the right foreground', - }, - twitter: 'astrodotbuild', + image: { + src: 'https://github.com/withastro/astro/blob/main/assets/social/banner.jpg?raw=true', + alt: 'astro logo on a starry expanse of space,' + ' with a purple saturn-like planet floating in the right foreground', + }, + twitter: 'astrodotbuild', }; export const KNOWN_LANGUAGES = { - English: 'en', + English: 'en', }; // Uncomment this to add an "Edit this page" button to every page of documentation. @@ -30,14 +30,14 @@ export const KNOWN_LANGUAGES = { // } export const SIDEBAR = { - en: [ - { text: '', header: true }, - { text: 'Section Header', header: true }, - { text: 'Introduction', link: 'en/introduction' }, - { text: 'Page 2', link: 'en/page-2' }, - { text: 'Page 3', link: 'en/page-3' }, + en: [ + { text: '', header: true }, + { text: 'Section Header', header: true }, + { text: 'Introduction', link: 'en/introduction' }, + { text: 'Page 2', link: 'en/page-2' }, + { text: 'Page 3', link: 'en/page-3' }, - { text: 'Another Section', header: true }, - { text: 'Page 4', link: 'en/page-4' }, - ], + { text: 'Another Section', header: true }, + { text: 'Page 4', link: 'en/page-4' }, + ], }; diff --git a/examples/docs/src/languages.ts b/examples/docs/src/languages.ts index 069413fd2..ffc680954 100644 --- a/examples/docs/src/languages.ts +++ b/examples/docs/src/languages.ts @@ -5,6 +5,6 @@ export const KNOWN_LANGUAGE_CODES = Object.values(KNOWN_LANGUAGES); export const langPathRegex = /\/([a-z]{2}-?[A-Z]{0,2})\//; export function getLanguageFromURL(pathname: string) { - const langCodeMatch = pathname.match(langPathRegex); - return langCodeMatch ? langCodeMatch[1] : 'en'; + const langCodeMatch = pathname.match(langPathRegex); + return langCodeMatch ? langCodeMatch[1] : 'en'; } diff --git a/examples/docs/src/layouts/MainLayout.astro b/examples/docs/src/layouts/MainLayout.astro index cdadebe61..92e0bcf44 100644 --- a/examples/docs/src/layouts/MainLayout.astro +++ b/examples/docs/src/layouts/MainLayout.astro @@ -1,122 +1,122 @@ --- -import HeadCommon from "../components/HeadCommon.astro"; -import HeadSEO from "../components/HeadSEO.astro"; +import HeadCommon from '../components/HeadCommon.astro'; +import HeadSEO from '../components/HeadSEO.astro'; import Header from '../components/Header/Header.astro'; import Footer from '../components/Footer/Footer.astro'; import PageContent from '../components/PageContent/PageContent.astro'; import LeftSidebar from '../components/LeftSidebar/LeftSidebar.astro'; import RightSidebar from '../components/RightSidebar/RightSidebar.astro'; -import * as CONFIG from "../config"; +import * as CONFIG from '../config'; const { content = {} } = Astro.props; const currentPage = Astro.request.url.pathname; -const currentFile = `src/pages${currentPage.replace(/\/$/, "")}.md`; -const githubEditUrl = CONFIG.GITHUB_EDIT_URL && (CONFIG.GITHUB_EDIT_URL + currentFile); +const currentFile = `src/pages${currentPage.replace(/\/$/, '')}.md`; +const githubEditUrl = CONFIG.GITHUB_EDIT_URL && CONFIG.GITHUB_EDIT_URL + currentFile; --- <html dir={content.dir ?? 'ltr'} lang={content.lang ?? 'en-us'} class="initial"> - <head> - <HeadCommon /> - <HeadSEO {content} canonicalURL={Astro.request.canonicalURL} /> - <title>{content.title ? `${content.title} 🚀 ${CONFIG.SITE.title}` : CONFIG.SITE.title}</title> - <style> - body { - width: 100%; - display: grid; - grid-template-rows: var(--theme-navbar-height) 1fr; - --gutter: 0.5rem; - --doc-padding: 2rem; - } - .layout { - display: grid; - grid-auto-flow: column; - grid-template-columns: - minmax(var(--gutter), 1fr) - minmax(0, var(--max-width)) - minmax(var(--gutter), 1fr); - overflow-x: hidden; - } - .layout :global(> *) { - width: 100%; - height: 100%; - } - .grid-sidebar { - height: 100vh; - position: sticky; - top: 0; - padding: 0; - } - #grid-left { - position: fixed; - background-color: var(--theme-bg); - z-index: 10; - display: none; - } - #grid-main { - padding: var(--doc-padding) var(--gutter); - grid-column: 2; - display: flex; - flex-direction: column; - height: 100%; - } - #grid-right { - display: none; - } - :global(.mobile-sidebar-toggle) { - overflow: hidden; - } - :global(.mobile-sidebar-toggle) #grid-left { - display: block; - top: 2rem; - } - @media (min-width: 50em) { - .layout { - overflow: initial; - grid-template-columns: - 20rem - minmax(0, var(--max-width)); - gap: 1em; - } - #grid-left { - display: flex; - padding-left: 2rem; - position: sticky; - grid-column: 1; - } - } + <head> + <HeadCommon /> + <HeadSEO {content} canonicalURL={Astro.request.canonicalURL} /> + <title>{content.title ? `${content.title} 🚀 ${CONFIG.SITE.title}` : CONFIG.SITE.title}</title> + <style> + body { + width: 100%; + display: grid; + grid-template-rows: var(--theme-navbar-height) 1fr; + --gutter: 0.5rem; + --doc-padding: 2rem; + } + .layout { + display: grid; + grid-auto-flow: column; + grid-template-columns: + minmax(var(--gutter), 1fr) + minmax(0, var(--max-width)) + minmax(var(--gutter), 1fr); + overflow-x: hidden; + } + .layout :global(> *) { + width: 100%; + height: 100%; + } + .grid-sidebar { + height: 100vh; + position: sticky; + top: 0; + padding: 0; + } + #grid-left { + position: fixed; + background-color: var(--theme-bg); + z-index: 10; + display: none; + } + #grid-main { + padding: var(--doc-padding) var(--gutter); + grid-column: 2; + display: flex; + flex-direction: column; + height: 100%; + } + #grid-right { + display: none; + } + :global(.mobile-sidebar-toggle) { + overflow: hidden; + } + :global(.mobile-sidebar-toggle) #grid-left { + display: block; + top: 2rem; + } + @media (min-width: 50em) { + .layout { + overflow: initial; + grid-template-columns: + 20rem + minmax(0, var(--max-width)); + gap: 1em; + } + #grid-left { + display: flex; + padding-left: 2rem; + position: sticky; + grid-column: 1; + } + } - @media (min-width: 72em) { - .layout { - grid-template-columns: - 20rem - minmax(0, var(--max-width)) - 18rem; - padding-left: 0; - padding-right: 0; - margin: 0 auto; - } - #grid-right { - grid-column: 3; - display: flex; - } - } - </style> - </head> + @media (min-width: 72em) { + .layout { + grid-template-columns: + 20rem + minmax(0, var(--max-width)) + 18rem; + padding-left: 0; + padding-right: 0; + margin: 0 auto; + } + #grid-right { + grid-column: 3; + display: flex; + } + } + </style> + </head> - <body> - <Header currentPage={currentPage} /> - <main class="layout"> - <aside id="grid-left" class="grid-sidebar" title="Site Navigation"> - <LeftSidebar currentPage={currentPage} /> - </aside> - <div id="grid-main"> - <PageContent content={content} githubEditUrl={githubEditUrl}> - <slot /> - </PageContent> - </div> - <aside id="grid-right" class="grid-sidebar" title="Table of Contents"> - <RightSidebar content={content} githubEditUrl={githubEditUrl} /> - </aside> - </main> - </body> + <body> + <Header {currentPage} /> + <main class="layout"> + <aside id="grid-left" class="grid-sidebar" title="Site Navigation"> + <LeftSidebar {currentPage} /> + </aside> + <div id="grid-main"> + <PageContent {content} {githubEditUrl}> + <slot /> + </PageContent> + </div> + <aside id="grid-right" class="grid-sidebar" title="Table of Contents"> + <RightSidebar {content} {githubEditUrl} /> + </aside> + </main> + </body> </html> diff --git a/examples/docs/src/pages/index.astro b/examples/docs/src/pages/index.astro index 7f660ada0..4ce893162 100644 --- a/examples/docs/src/pages/index.astro +++ b/examples/docs/src/pages/index.astro @@ -1,5 +1,5 @@ <script> - // Redirect your homepage to the first page of documentation. - // If you have a landing page, remove this script and add it here! - window.location.pathname = `/en/introduction`; + // Redirect your homepage to the first page of documentation. + // If you have a landing page, remove this script and add it here! + window.location.pathname = `/en/introduction`; </script> diff --git a/examples/docs/src/styles/code.css b/examples/docs/src/styles/code.css index 3fbb26626..b4275adab 100644 --- a/examples/docs/src/styles/code.css +++ b/examples/docs/src/styles/code.css @@ -1,29 +1,29 @@ .language-css > code, .language-sass > code, .language-scss > code { - color: #fd9170; + color: #fd9170; } [class*='language-'] .namespace { - opacity: 0.7; + opacity: 0.7; } .token.plain-text, [class*='language-bash'] span.token, [class*='language-shell'] span.token { - color: hsla(var(--color-gray-90), 1); + color: hsla(var(--color-gray-90), 1); } [class*='language-bash'] span.token, [class*='language-shell'] span.token { - font-style: bold; + font-style: bold; } .token.prolog, .token.comment, [class*='language-bash'] span.token.comment, [class*='language-shell'] span.token.comment { - color: hsla(var(--color-gray-70), 1); + color: hsla(var(--color-gray-70), 1); } .token.selector, @@ -33,7 +33,7 @@ .token.variable, .token.entity, .token.deleted { - color: #fa5e5b; + color: #fa5e5b; } .token.boolean, @@ -46,7 +46,7 @@ .token.hexcode, .token.class-name, .token.attr-name { - color: hsla(var(--color-yellow), 1); + color: hsla(var(--color-yellow), 1); } .token.atrule, @@ -56,41 +56,41 @@ .token.pseudo-class, .token.pseudo-element, .token.string { - color: hsla(var(--color-green), 1); + color: hsla(var(--color-green), 1); } .token.symbol, .token.function, .token.id, .token.important { - color: hsla(var(--color-blue), 1); + color: hsla(var(--color-blue), 1); } .token.important, .token.id { - font-weight: bold; + font-weight: bold; } .token.cdata, .token.char, .token.property { - color: #23b1af; + color: #23b1af; } .token.inserted { - color: hsla(var(--color-green), 1); + color: hsla(var(--color-green), 1); } .token.keyword { - color: #ff657c; - font-style: italic; + color: #ff657c; + font-style: italic; } .token.operator { - color: hsla(var(--color-gray-70), 1); + color: hsla(var(--color-gray-70), 1); } .token.attr-value .token.attr-equals, .token.punctuation { - color: hsla(var(--color-gray-80), 1); + color: hsla(var(--color-gray-80), 1); } diff --git a/examples/docs/src/styles/index.css b/examples/docs/src/styles/index.css index e1e2e96c6..ad0a5adf7 100644 --- a/examples/docs/src/styles/index.css +++ b/examples/docs/src/styles/index.css @@ -1,46 +1,46 @@ * { - box-sizing: border-box; - margin: 0; + box-sizing: border-box; + margin: 0; } /* Global focus outline reset */ *:focus:not(:focus-visible) { - outline: none; + outline: none; } :root { - --user-font-scale: 1rem - 16px; - --max-width: calc(100% - 1rem); + --user-font-scale: 1rem - 16px; + --max-width: calc(100% - 1rem); } @media (min-width: 50em) { - :root { - --max-width: 46em; - } + :root { + --max-width: 46em; + } } body { - display: flex; - flex-direction: column; - min-height: 100vh; - font-family: var(--font-body); - font-size: 1rem; - font-size: clamp(0.9rem, 0.75rem + 0.375vw + var(--user-font-scale), 1rem); - line-height: 1.5; - max-width: 100vw; + display: flex; + flex-direction: column; + min-height: 100vh; + font-family: var(--font-body); + font-size: 1rem; + font-size: clamp(0.9rem, 0.75rem + 0.375vw + var(--user-font-scale), 1rem); + line-height: 1.5; + max-width: 100vw; } nav ul { - list-style: none; - padding: 0; + list-style: none; + padding: 0; } .content > section > * + * { - margin-top: 1.25rem; + margin-top: 1.25rem; } .content > section > :first-child { - margin-top: 0; + margin-top: 0; } /* Typography */ @@ -50,339 +50,339 @@ h3, h4, h5, h6 { - margin-bottom: 1rem; - font-weight: bold; - line-height: 1; + margin-bottom: 1rem; + font-weight: bold; + line-height: 1; } h1, h2 { - max-width: 40ch; + max-width: 40ch; } :is(h2, h3):not(:first-child) { - margin-top: 3rem; + margin-top: 3rem; } :is(h4, h5, h6):not(:first-child) { - margin-top: 2rem; + margin-top: 2rem; } h1 { - font-size: 3.25rem; - font-weight: 800; + font-size: 3.25rem; + font-weight: 800; } h2 { - font-size: 2.5rem; + font-size: 2.5rem; } h3 { - font-size: 1.75rem; + font-size: 1.75rem; } h4 { - font-size: 1.3rem; + font-size: 1.3rem; } h5 { - font-size: 1rem; + font-size: 1rem; } p { - line-height: 1.65em; + line-height: 1.65em; } .content ul { - line-height: 1.1em; + line-height: 1.1em; } p, .content ul { - color: var(--theme-text-light); + color: var(--theme-text-light); } small, .text_small { - font-size: 0.833rem; + font-size: 0.833rem; } a { - color: var(--theme-text-accent); - font-weight: 400; - text-underline-offset: 0.08em; - align-items: center; - gap: 0.5rem; + color: var(--theme-text-accent); + font-weight: 400; + text-underline-offset: 0.08em; + align-items: center; + gap: 0.5rem; } article > section :is(ul, ol) > * + * { - margin-top: 0.75rem; + margin-top: 0.75rem; } article > section nav :is(ul, ol) > * + * { - margin-top: inherit; + margin-top: inherit; } article > section li > :is(p, pre, blockquote):not(:first-child) { - margin-top: 1rem; + margin-top: 1rem; } article > section :is(ul, ol) { - padding-left: 1em; + padding-left: 1em; } article > section nav :is(ul, ol) { - padding-left: inherit; + padding-left: inherit; } article > section nav { - margin-top: 1rem; - margin-bottom: 2rem; + margin-top: 1rem; + margin-bottom: 2rem; } article > section ::marker { - font-weight: bold; - color: var(--theme-text-light); + font-weight: bold; + color: var(--theme-text-light); } article > section iframe { - width: 100%; - height: auto; - aspect-ratio: 16 / 9; + width: 100%; + height: auto; + aspect-ratio: 16 / 9; } a > code:not([class*='language']) { - position: relative; - color: var(--theme-text-accent); - background: transparent; - text-underline-offset: var(--padding-block); + position: relative; + color: var(--theme-text-accent); + background: transparent; + text-underline-offset: var(--padding-block); } a > code:not([class*='language'])::before { - content: ''; - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - display: block; - background: var(--theme-accent); - opacity: var(--theme-accent-opacity); - border-radius: var(--border-radius); + content: ''; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + display: block; + background: var(--theme-accent); + opacity: var(--theme-accent-opacity); + border-radius: var(--border-radius); } a:hover, a:focus { - text-decoration: underline; + text-decoration: underline; } a:focus { - outline: 2px solid currentColor; - outline-offset: 0.25em; + outline: 2px solid currentColor; + outline-offset: 0.25em; } strong { - font-weight: 600; - color: inherit; + font-weight: 600; + color: inherit; } /* Supporting Content */ code { - font-family: var(--font-mono); - font-size: 0.85em; + font-family: var(--font-mono); + font-size: 0.85em; } code:not([class*='language']) { - --border-radius: 3px; - --padding-block: 0.2rem; - --padding-inline: 0.4rem; - color: var(--theme-code-inline-text); - background-color: var(--theme-code-inline-bg); - padding: var(--padding-block) var(--padding-inline); - margin: calc(var(--padding-block) * -1) -0.125em; - border-radius: var(--border-radius); - box-shadow: 0 2px 1px 0 rgba(0, 0, 0, 0.08); - word-break: break-word; + --border-radius: 3px; + --padding-block: 0.2rem; + --padding-inline: 0.4rem; + color: var(--theme-code-inline-text); + background-color: var(--theme-code-inline-bg); + padding: var(--padding-block) var(--padding-inline); + margin: calc(var(--padding-block) * -1) -0.125em; + border-radius: var(--border-radius); + box-shadow: 0 2px 1px 0 rgba(0, 0, 0, 0.08); + word-break: break-word; } pre > code:not([class*='language']) { - background-color: transparent; - padding: 0; - margin: 0; - border-radius: 0; - color: inherit; + background-color: transparent; + padding: 0; + margin: 0; + border-radius: 0; + color: inherit; } pre > code { - font-size: 1em; + font-size: 1em; } table, pre { - position: relative; - --padding-block: 1rem; - --padding-inline: 2rem; - padding: var(--padding-block) var(--padding-inline); - padding-right: calc(var(--padding-inline) * 2); - margin-left: calc(var(--padding-inline) * -1); - margin-right: calc(var(--padding-inline) * -1); - font-family: var(--font-mono); + position: relative; + --padding-block: 1rem; + --padding-inline: 2rem; + padding: var(--padding-block) var(--padding-inline); + padding-right: calc(var(--padding-inline) * 2); + margin-left: calc(var(--padding-inline) * -1); + margin-right: calc(var(--padding-inline) * -1); + font-family: var(--font-mono); - line-height: 1.5; - font-size: 0.85em; - overflow-y: hidden; - overflow-x: auto; + line-height: 1.5; + font-size: 0.85em; + overflow-y: hidden; + overflow-x: auto; } table { - width: 100%; - padding: var(--padding-block) 0; - margin: 0; - border-collapse: collapse; + width: 100%; + padding: var(--padding-block) 0; + margin: 0; + border-collapse: collapse; } /* Zebra striping */ tr:nth-of-type(odd) { - background: var(--theme-bg-hover); + background: var(--theme-bg-hover); } th { - background: var(--color-black); - color: var(--theme-color); - font-weight: bold; + background: var(--color-black); + color: var(--theme-color); + font-weight: bold; } td, th { - padding: 6px; - text-align: left; + padding: 6px; + text-align: left; } pre { - background-color: var(--theme-code-bg); - color: var(--theme-code-text); + background-color: var(--theme-code-bg); + color: var(--theme-code-text); } blockquote code:not([class*='language']) { - background-color: var(--theme-bg); + background-color: var(--theme-bg); } @media (min-width: 37.75em) { - pre { - --padding-inline: 1.25rem; - border-radius: 8px; - margin-left: 0; - margin-right: 0; - } + pre { + --padding-inline: 1.25rem; + border-radius: 8px; + margin-left: 0; + margin-right: 0; + } } blockquote { - margin: 2rem 0; - padding: 1.25em 1.5rem; - border-left: 3px solid var(--theme-text-light); - background-color: var(--theme-bg-offset); - border-radius: 0 0.25rem 0.25rem 0; - line-height: 1.7; + margin: 2rem 0; + padding: 1.25em 1.5rem; + border-left: 3px solid var(--theme-text-light); + background-color: var(--theme-bg-offset); + border-radius: 0 0.25rem 0.25rem 0; + line-height: 1.7; } img { - max-width: 100%; + max-width: 100%; } .flex { - display: flex; - align-items: center; + display: flex; + align-items: center; } button { - display: flex; - align-items: center; - justify-items: center; - gap: 0.25em; - padding: 0.33em 0.67em; - border: 0; - background: var(--theme-bg); - display: flex; - font-size: 1rem; - align-items: center; - gap: 0.25em; - border-radius: 99em; - color: var(--theme-text); - background-color: var(--theme-bg); + display: flex; + align-items: center; + justify-items: center; + gap: 0.25em; + padding: 0.33em 0.67em; + border: 0; + background: var(--theme-bg); + display: flex; + font-size: 1rem; + align-items: center; + gap: 0.25em; + border-radius: 99em; + color: var(--theme-text); + background-color: var(--theme-bg); } h2.heading { - font-size: 1rem; - font-weight: 700; - padding: 0.1rem 1rem; - text-transform: uppercase; - margin-bottom: 0.5rem; + font-size: 1rem; + font-weight: 700; + padding: 0.1rem 1rem; + text-transform: uppercase; + margin-bottom: 0.5rem; } .header-link { - font-size: 1rem; - padding: 0.1rem 0 0.1rem 1rem; - border-left: 4px solid var(--theme-divider); + font-size: 1rem; + padding: 0.1rem 0 0.1rem 1rem; + border-left: 4px solid var(--theme-divider); } .header-link:hover, .header-link:focus { - border-left-color: var(--theme-accent); - color: var(--theme-accent); + border-left-color: var(--theme-accent); + color: var(--theme-accent); } .header-link:focus-within { - color: var(--theme-text-light); - border-left-color: hsla(var(--color-gray-40), 1); + color: var(--theme-text-light); + border-left-color: hsla(var(--color-gray-40), 1); } .header-link svg { - opacity: 0.6; + opacity: 0.6; } .header-link:hover svg { - opacity: 0.8; + opacity: 0.8; } .header-link a { - display: inline-flex; - gap: 0.5em; - width: 100%; - padding: 0.15em 0 0.15em 0; + display: inline-flex; + gap: 0.5em; + width: 100%; + padding: 0.15em 0 0.15em 0; } .header-link.depth-3 { - padding-left: 2rem; + padding-left: 2rem; } .header-link.depth-4 { - padding-left: 3rem; + padding-left: 3rem; } .header-link a { - font: inherit; - color: inherit; - text-decoration: none; + font: inherit; + color: inherit; + text-decoration: none; } /* Screenreader Only Text */ .sr-only { - position: absolute; - width: 1px; - height: 1px; - padding: 0; - margin: -1px; - overflow: hidden; - clip: rect(0, 0, 0, 0); - white-space: nowrap; - border-width: 0; + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border-width: 0; } .focus\:not-sr-only:focus, .focus\:not-sr-only:focus-visible { - position: static; - width: auto; - height: auto; - padding: 0; - margin: 0; - overflow: visible; - clip: auto; - white-space: normal; + position: static; + width: auto; + height: auto; + padding: 0; + margin: 0; + overflow: visible; + clip: auto; + white-space: normal; } :target { - scroll-margin: calc(var(--theme-sidebar-offset, 5rem) + 2rem) 0 2rem; + scroll-margin: calc(var(--theme-sidebar-offset, 5rem) + 2rem) 0 2rem; } diff --git a/examples/docs/src/styles/theme.css b/examples/docs/src/styles/theme.css index 1bd29c2f6..830bed8dd 100644 --- a/examples/docs/src/styles/theme.css +++ b/examples/docs/src/styles/theme.css @@ -1,10 +1,10 @@ :root { - --font-fallback: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji; - --font-body: system-ui, var(--font-fallback); - --font-mono: 'IBM Plex Mono', Consolas, 'Andale Mono WT', 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', - 'Liberation Mono', 'Nimbus Mono L', Monaco, 'Courier New', Courier, monospace; + --font-fallback: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji; + --font-body: system-ui, var(--font-fallback); + --font-mono: 'IBM Plex Mono', Consolas, 'Andale Mono WT', 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', + 'Liberation Mono', 'Nimbus Mono L', Monaco, 'Courier New', Courier, monospace; - /* + /* * Variables with --color-base prefix define * the hue, and saturation values to be used for * hsla colors. @@ -15,109 +15,109 @@ * */ - --color-base-white: 0, 0%; - --color-base-black: 240, 100%; - --color-base-gray: 215, 14%; - --color-base-blue: 212, 100%; - --color-base-blue-dark: 212, 72%; - --color-base-green: 158, 79%; - --color-base-orange: 22, 100%; - --color-base-purple: 269, 79%; - --color-base-red: 351, 100%; - --color-base-yellow: 41, 100%; + --color-base-white: 0, 0%; + --color-base-black: 240, 100%; + --color-base-gray: 215, 14%; + --color-base-blue: 212, 100%; + --color-base-blue-dark: 212, 72%; + --color-base-green: 158, 79%; + --color-base-orange: 22, 100%; + --color-base-purple: 269, 79%; + --color-base-red: 351, 100%; + --color-base-yellow: 41, 100%; - /* + /* * Color palettes are made using --color-base * variables, along with a lightness value to * define different variants. * */ - --color-gray-5: var(--color-base-gray), 5%; - --color-gray-10: var(--color-base-gray), 10%; - --color-gray-20: var(--color-base-gray), 20%; - --color-gray-30: var(--color-base-gray), 30%; - --color-gray-40: var(--color-base-gray), 40%; - --color-gray-50: var(--color-base-gray), 50%; - --color-gray-60: var(--color-base-gray), 60%; - --color-gray-70: var(--color-base-gray), 70%; - --color-gray-80: var(--color-base-gray), 80%; - --color-gray-90: var(--color-base-gray), 90%; - --color-gray-95: var(--color-base-gray), 95%; + --color-gray-5: var(--color-base-gray), 5%; + --color-gray-10: var(--color-base-gray), 10%; + --color-gray-20: var(--color-base-gray), 20%; + --color-gray-30: var(--color-base-gray), 30%; + --color-gray-40: var(--color-base-gray), 40%; + --color-gray-50: var(--color-base-gray), 50%; + --color-gray-60: var(--color-base-gray), 60%; + --color-gray-70: var(--color-base-gray), 70%; + --color-gray-80: var(--color-base-gray), 80%; + --color-gray-90: var(--color-base-gray), 90%; + --color-gray-95: var(--color-base-gray), 95%; - --color-blue: var(--color-base-blue), 61%; - --color-blue-dark: var(--color-base-blue-dark), 39%; - --color-green: var(--color-base-green), 42%; - --color-orange: var(--color-base-orange), 50%; - --color-purple: var(--color-base-purple), 54%; - --color-red: var(--color-base-red), 54%; - --color-yellow: var(--color-base-yellow), 59%; + --color-blue: var(--color-base-blue), 61%; + --color-blue-dark: var(--color-base-blue-dark), 39%; + --color-green: var(--color-base-green), 42%; + --color-orange: var(--color-base-orange), 50%; + --color-purple: var(--color-base-purple), 54%; + --color-red: var(--color-base-red), 54%; + --color-yellow: var(--color-base-yellow), 59%; } :root { - color-scheme: light; - --theme-accent: hsla(var(--color-blue), 1); - --theme-text-accent: hsla(var(--color-blue), 1); - --theme-accent-opacity: 0.15; - --theme-divider: hsla(var(--color-gray-95), 1); - --theme-text: hsla(var(--color-gray-10), 1); - --theme-text-light: hsla(var(--color-gray-40), 1); - /* @@@: not used anywhere */ - --theme-text-lighter: hsla(var(--color-gray-80), 1); - --theme-bg: hsla(var(--color-base-white), 100%, 1); - --theme-bg-hover: hsla(var(--color-gray-95), 1); - --theme-bg-offset: hsla(var(--color-gray-90), 1); - --theme-bg-accent: hsla(var(--color-blue), var(--theme-accent-opacity)); - --theme-code-inline-bg: hsla(var(--color-gray-95), 1); - --theme-code-inline-text: var(--theme-text); - --theme-code-bg: hsla(217, 19%, 27%, 1); - --theme-code-text: hsla(var(--color-gray-95), 1); - --theme-navbar-bg: hsla(var(--color-base-white), 100%, 1); - --theme-navbar-height: 6rem; - --theme-selection-color: hsla(var(--color-blue), 1); - --theme-selection-bg: hsla(var(--color-blue), var(--theme-accent-opacity)); + color-scheme: light; + --theme-accent: hsla(var(--color-blue), 1); + --theme-text-accent: hsla(var(--color-blue), 1); + --theme-accent-opacity: 0.15; + --theme-divider: hsla(var(--color-gray-95), 1); + --theme-text: hsla(var(--color-gray-10), 1); + --theme-text-light: hsla(var(--color-gray-40), 1); + /* @@@: not used anywhere */ + --theme-text-lighter: hsla(var(--color-gray-80), 1); + --theme-bg: hsla(var(--color-base-white), 100%, 1); + --theme-bg-hover: hsla(var(--color-gray-95), 1); + --theme-bg-offset: hsla(var(--color-gray-90), 1); + --theme-bg-accent: hsla(var(--color-blue), var(--theme-accent-opacity)); + --theme-code-inline-bg: hsla(var(--color-gray-95), 1); + --theme-code-inline-text: var(--theme-text); + --theme-code-bg: hsla(217, 19%, 27%, 1); + --theme-code-text: hsla(var(--color-gray-95), 1); + --theme-navbar-bg: hsla(var(--color-base-white), 100%, 1); + --theme-navbar-height: 6rem; + --theme-selection-color: hsla(var(--color-blue), 1); + --theme-selection-bg: hsla(var(--color-blue), var(--theme-accent-opacity)); } body { - background: var(--theme-bg); - color: var(--theme-text); + background: var(--theme-bg); + color: var(--theme-text); } :root.theme-dark { - color-scheme: dark; - --theme-accent-opacity: 0.15; - --theme-accent: hsla(var(--color-blue), 1); - --theme-text-accent: hsla(var(--color-blue), 1); - --theme-divider: hsla(var(--color-gray-10), 1); - --theme-text: hsla(var(--color-gray-90), 1); - --theme-text-light: hsla(var(--color-gray-80), 1); + color-scheme: dark; + --theme-accent-opacity: 0.15; + --theme-accent: hsla(var(--color-blue), 1); + --theme-text-accent: hsla(var(--color-blue), 1); + --theme-divider: hsla(var(--color-gray-10), 1); + --theme-text: hsla(var(--color-gray-90), 1); + --theme-text-light: hsla(var(--color-gray-80), 1); - /* @@@: not used anywhere */ - --theme-text-lighter: hsla(var(--color-gray-40), 1); - --theme-bg: hsla(215, 28%, 17%, 1); - --theme-bg-hover: hsla(var(--color-gray-40), 1); - --theme-bg-offset: hsla(var(--color-gray-5), 1); - --theme-code-inline-bg: hsla(var(--color-gray-10), 1); - --theme-code-inline-text: hsla(var(--color-base-white), 100%, 1); - --theme-code-bg: hsla(var(--color-gray-5), 1); - --theme-code-text: hsla(var(--color-base-white), 100%, 1); - --theme-navbar-bg: hsla(215, 28%, 17%, 1); - --theme-selection-color: hsla(var(--color-base-white), 100%, 1); - --theme-selection-bg: hsla(var(--color-purple), var(--theme-accent-opacity)); + /* @@@: not used anywhere */ + --theme-text-lighter: hsla(var(--color-gray-40), 1); + --theme-bg: hsla(215, 28%, 17%, 1); + --theme-bg-hover: hsla(var(--color-gray-40), 1); + --theme-bg-offset: hsla(var(--color-gray-5), 1); + --theme-code-inline-bg: hsla(var(--color-gray-10), 1); + --theme-code-inline-text: hsla(var(--color-base-white), 100%, 1); + --theme-code-bg: hsla(var(--color-gray-5), 1); + --theme-code-text: hsla(var(--color-base-white), 100%, 1); + --theme-navbar-bg: hsla(215, 28%, 17%, 1); + --theme-selection-color: hsla(var(--color-base-white), 100%, 1); + --theme-selection-bg: hsla(var(--color-purple), var(--theme-accent-opacity)); - /* DocSearch [Algolia] */ - --docsearch-modal-background: var(--theme-bg); - --docsearch-searchbox-focus-background: var(--theme-divider); - --docsearch-footer-background: var(--theme-divider); - --docsearch-text-color: var(--theme-text); - --docsearch-hit-background: var(--theme-divider); - --docsearch-hit-shadow: none; - --docsearch-hit-color: var(--theme-text); - --docsearch-footer-shadow: inset 0 2px 10px #000; - --docsearch-modal-shadow: inset 0 0 8px #000; + /* DocSearch [Algolia] */ + --docsearch-modal-background: var(--theme-bg); + --docsearch-searchbox-focus-background: var(--theme-divider); + --docsearch-footer-background: var(--theme-divider); + --docsearch-text-color: var(--theme-text); + --docsearch-hit-background: var(--theme-divider); + --docsearch-hit-shadow: none; + --docsearch-hit-color: var(--theme-text); + --docsearch-footer-shadow: inset 0 2px 10px #000; + --docsearch-modal-shadow: inset 0 0 8px #000; } ::selection { - color: var(--theme-selection-color); - background-color: var(--theme-selection-bg); + color: var(--theme-selection-color); + background-color: var(--theme-selection-bg); } diff --git a/examples/fast-build/astro.config.mjs b/examples/fast-build/astro.config.mjs index 38a4a1140..f40bc1cca 100644 --- a/examples/fast-build/astro.config.mjs +++ b/examples/fast-build/astro.config.mjs @@ -2,8 +2,8 @@ import { imagetools } from 'vite-imagetools'; // @ts-check export default /** @type {import('astro').AstroUserConfig} */ ({ - renderers: ['@astrojs/renderer-vue'], - vite: { - plugins: [imagetools()], - }, + renderers: ['@astrojs/renderer-vue'], + vite: { + plugins: [imagetools()], + }, }); diff --git a/examples/fast-build/src/components/Greeting.vue b/examples/fast-build/src/components/Greeting.vue index 69fa4fbca..a94f586bf 100644 --- a/examples/fast-build/src/components/Greeting.vue +++ b/examples/fast-build/src/components/Greeting.vue @@ -1,20 +1,20 @@ <script> export default { - data() { - return { - greeting: 'Hello World!', - }; - }, + data() { + return { + greeting: 'Hello World!', + }; + }, }; </script> <template> - <p class="greeting">{{ greeting }}</p> + <p class="greeting">{{ greeting }}</p> </template> <style> .greeting { - color: red; - font-weight: bold; + color: red; + font-weight: bold; } </style> diff --git a/examples/fast-build/src/pages/index.astro b/examples/fast-build/src/pages/index.astro index b5b9785da..2bdadbf5b 100644 --- a/examples/fast-build/src/pages/index.astro +++ b/examples/fast-build/src/pages/index.astro @@ -5,28 +5,30 @@ import Greeting from '../components/Greeting.vue'; --- <html> -<head> - <title>Demo app</title> - <style> - h1 { color: salmon; } - </style> -</head> -<body> - <section> - <h1>Images</h1> + <head> + <title>Demo app</title> + <style> + h1 { + color: salmon; + } + </style> + </head> + <body> + <section> + <h1>Images</h1> - <h2>Imported in JS</h2> - <img src={imgUrl} /> - </section> + <h2>Imported in JS</h2> + <img src={imgUrl} /> + </section> - <section> - <h1>Component CSS</h1> - <Greeting /> - </section> + <section> + <h1>Component CSS</h1> + <Greeting /> + </section> - <section> - <h1>ImageTools</h1> - <img src={grayscaleUrl} /> - </section> -</body> -</html>
\ No newline at end of file + <section> + <h1>ImageTools</h1> + <img src={grayscaleUrl} /> + </section> + </body> +</html> diff --git a/examples/fast-build/src/styles/global.css b/examples/fast-build/src/styles/global.css index 9f52e094e..ab5ca9bfe 100644 --- a/examples/fast-build/src/styles/global.css +++ b/examples/fast-build/src/styles/global.css @@ -1,3 +1,3 @@ body { - background: lightcoral; + background: lightcoral; } diff --git a/examples/framework-alpine/astro.config.mjs b/examples/framework-alpine/astro.config.mjs index 015eeff7c..05fc24b01 100644 --- a/examples/framework-alpine/astro.config.mjs +++ b/examples/framework-alpine/astro.config.mjs @@ -8,6 +8,6 @@ // @ts-check export default /** @type {import('astro').AstroUserConfig} */ ({ - // No renderers are needed for AlpineJS support, just use Astro components! - renderers: [], + // No renderers are needed for AlpineJS support, just use Astro components! + renderers: [], }); diff --git a/examples/framework-alpine/src/components/Counter.astro b/examples/framework-alpine/src/components/Counter.astro index 24140ca16..4d0b62a60 100644 --- a/examples/framework-alpine/src/components/Counter.astro +++ b/examples/framework-alpine/src/components/Counter.astro @@ -6,24 +6,24 @@ const { initialCount = 0 } = Astro.props; --- <div class="counter" x-data=`{ count: ${initialCount} }`> - <button x-on:click="count--">-</button> - <pre x-text="count">{ initialCount }</pre> - <button x-on:click="count++">+</button> + <button x-on:click="count--">-</button> + <pre x-text="count">{ initialCount }</pre> + <button x-on:click="count++">+</button> </div> <div class="counter-message"> - <slot /> + <slot /> </div> <style> -.counter { - display: grid; - font-size: 2em; - grid-template-columns: repeat(3, minmax(0, 1fr)); - margin-top: 2em; - place-items: center; -} -.counter-message { - text-align: center; -} + .counter { + display: grid; + font-size: 2em; + grid-template-columns: repeat(3, minmax(0, 1fr)); + margin-top: 2em; + place-items: center; + } + .counter-message { + text-align: center; + } </style> diff --git a/examples/framework-alpine/src/pages/index.astro b/examples/framework-alpine/src/pages/index.astro index 3046c0aa6..c72e41187 100644 --- a/examples/framework-alpine/src/pages/index.astro +++ b/examples/framework-alpine/src/pages/index.astro @@ -1,40 +1,41 @@ --- // Component Imports -import Counter from '../components/Counter.astro' +import Counter from '../components/Counter.astro'; // Full Astro Component Syntax: // https://docs.astro.build/core-concepts/astro-components/ --- + <html lang="en"> - <head> - <meta charset="utf-8" /> - <meta name="viewport" content="width=device-width" /> - <link rel="icon" type="image/x-icon" href="/favicon.ico" /> - <style> - html, - body { - font-family: system-ui; - margin: 0; - } - body { - padding: 2rem; - } - </style> + <head> + <meta charset="utf-8" /> + <meta name="viewport" content="width=device-width" /> + <link rel="icon" type="image/x-icon" href="/favicon.ico" /> + <style> + html, + body { + font-family: system-ui; + margin: 0; + } + body { + padding: 2rem; + } + </style> - <!-- Be sure to include AlpineJS --> - <script src="//unpkg.com/alpinejs" defer></script> - </head> - <body> - <main> - <!-- Note: no `client:load` necessary since AlpineJS is always included --> - <Counter> - <h1>Hello, AlpineJS!</h1> - </Counter> + <!-- Be sure to include AlpineJS --> + <script src="//unpkg.com/alpinejs" defer></script> + </head> + <body> + <main> + <!-- Note: no `client:load` necessary since AlpineJS is always included --> + <Counter> + <h1>Hello, AlpineJS!</h1> + </Counter> - <!-- Note: pass props to Astro components to initialize Alpine with a certain state --> - <Counter initialCount={5}> - <h2>Use Astro to pass in server-side props</h2> - </Counter> - </main> - </body> + <!-- Note: pass props to Astro components to initialize Alpine with a certain state --> + <Counter initialCount={5}> + <h2>Use Astro to pass in server-side props</h2> + </Counter> + </main> + </body> </html> diff --git a/examples/framework-lit/astro.config.mjs b/examples/framework-lit/astro.config.mjs index 6a053bcc5..0e5346799 100644 --- a/examples/framework-lit/astro.config.mjs +++ b/examples/framework-lit/astro.config.mjs @@ -8,6 +8,6 @@ // @ts-check export default /** @type {import('astro').AstroUserConfig} */ ({ - // Enable the lit renderer to support LitHTML components and templates. - renderers: ['@astrojs/renderer-lit'], + // Enable the lit renderer to support LitHTML components and templates. + renderers: ['@astrojs/renderer-lit'], }); diff --git a/examples/framework-lit/src/components/Counter.js b/examples/framework-lit/src/components/Counter.js index 063d338e4..35fa8dbbb 100644 --- a/examples/framework-lit/src/components/Counter.js +++ b/examples/framework-lit/src/components/Counter.js @@ -3,32 +3,32 @@ import { LitElement, html } from 'lit'; export const tagName = 'my-counter'; class Counter extends LitElement { - static get properties() { - return { - count: { - type: Number, - }, - }; - } + static get properties() { + return { + count: { + type: Number, + }, + }; + } - constructor() { - super(); - this.count = 0; - } + constructor() { + super(); + this.count = 0; + } - increment() { - this.count++; - } + increment() { + this.count++; + } - render() { - return html` - <div> - <p>Count: ${this.count}</p> + render() { + return html` + <div> + <p>Count: ${this.count}</p> - <button type="button" @click=${this.increment}>Increment</button> - </div> - `; - } + <button type="button" @click=${this.increment}>Increment</button> + </div> + `; + } } customElements.define(tagName, Counter); diff --git a/examples/framework-lit/src/components/Lorem.astro b/examples/framework-lit/src/components/Lorem.astro index 1b03755e3..b4040980e 100644 --- a/examples/framework-lit/src/components/Lorem.astro +++ b/examples/framework-lit/src/components/Lorem.astro @@ -1,31 +1,58 @@ - -<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi quam arcu, rhoncus et dui at, volutpat viverra augue. Suspendisse placerat libero tellus, ut consequat ligula rutrum id. Vestibulum lectus libero, viverra in lacus eget, porttitor tincidunt leo. Integer sit amet turpis et felis fringilla lacinia in id nibh. Proin vitae dapibus odio. Mauris ornare eget urna id volutpat. Duis tellus nisi, hendrerit id sodales in, rutrum a quam. Proin tempor velit turpis, et tempor lacus sagittis in. Sed congue mauris quis nibh posuere, nec semper lacus auctor. Morbi sit amet enim sit amet arcu ullamcorper sollicitudin. Donec dignissim posuere tincidunt. Donec ultrices quam nec orci venenatis suscipit. - -Maecenas sapien quam, pretium sit amet ullamcorper at, vulputate sit amet urna. Suspendisse potenti. Integer in sapien turpis. Nulla accumsan viverra diam, quis convallis magna finibus eget. Integer sed eros bibendum, consequat velit sit amet, tincidunt orci. Mauris varius id metus in fringilla. Vestibulum dignissim massa eget erat luctus, ac congue mauris pellentesque. In et tempor dolor. Cras blandit congue lorem at facilisis. Aenean vel lacinia quam. Pellentesque luctus metus ut scelerisque efficitur. - -Mauris laoreet sodales libero eget luctus. Proin at congue dui, a cursus risus. Pellentesque lorem sem, rhoncus fermentum arcu ut, euismod fermentum ligula. Nullam eu orci posuere, laoreet leo in, commodo dolor. Fusce at felis elementum, commodo justo at, placerat justo. Nam feugiat scelerisque arcu, ut fermentum tellus elementum in. Sed ut vulputate ante. - -Morbi cursus arcu quis odio convallis egestas. Donec vulputate vestibulum dolor eget tristique. Nullam tempor semper augue, vitae lobortis neque tempor ac. Pellentesque massa leo, congue id ligula auctor, sollicitudin pharetra lorem. Curabitur a lacus porttitor, venenatis est quis, mattis velit. Fusce hendrerit lobortis mi ac efficitur. Mauris ornare, lorem sed varius faucibus, nisi dui pretium urna, sit amet lacinia nibh ligula in ipsum. Phasellus gravida, metus eget ornare ultrices, dolor ipsum consectetur erat, ac aliquet eros metus sed lectus. Nullam eleifend posuere rhoncus. Curabitur semper ligula vel ante posuere, at blandit orci accumsan. - -Vivamus accumsan metus in lorem laoreet, a luctus arcu tempus. Donec posuere sollicitudin nulla at vulputate. Nulla condimentum imperdiet purus, et lobortis ligula iaculis in. Donec suscipit viverra neque, ut elementum eros lacinia ut. Fusce at odio enim. Donec rutrum lectus sit amet est auctor, ac rhoncus lorem imperdiet. Curabitur commodo ex est, non tempus massa pulvinar nec. Sed fermentum, lectus eget ultricies luctus, enim sem sodales quam, sed laoreet tortor sem feugiat nisi. Morbi molestie vehicula viverra. Integer accumsan mi in orci ultrices posuere. - -Integer mi quam, faucibus et aliquet imperdiet, ornare ac ex. Nunc mattis molestie nisi, eu venenatis nibh vehicula at. Aliquam ut elit consectetur, finibus lorem sed, condimentum sapien. Praesent fermentum iaculis orci, vitae tincidunt est viverra nec. Morbi semper turpis sed lectus ornare tristique. Sed congue dui ex. Maecenas orci ligula, imperdiet sit amet accumsan et, finibus a velit. Ut vitae blandit eros. Nam gravida nec ipsum non volutpat. - -Integer quam metus, porttitor id ante sed, rutrum porta quam. Aenean at mattis ante. Morbi id libero eget risus sagittis gravida. Proin consequat sapien a dignissim posuere. Ut luctus sed metus ut elementum. Mauris tincidunt condimentum risus at bibendum. Aenean a sapien justo. Morbi vel neque in eros venenatis scelerisque vitae nec justo. Vestibulum lacinia, dui eu sollicitudin ornare, est elit vestibulum arcu, nec ultrices augue turpis in massa. Duis commodo lectus sed est posuere, et mollis nisi dapibus. Sed id ultrices arcu. - -Praesent tempor sodales aliquet. Donec suscipit ipsum eu odio cursus, quis sodales metus sodales. Nunc vestibulum massa at felis ullamcorper cursus. Pellentesque facilisis ante ut lectus vulputate vestibulum. Nullam pharetra felis ac lacus sodales, vel suscipit metus faucibus. Donec facilisis imperdiet risus, in volutpat odio tincidunt a. Aliquam vitae leo lorem. Proin scelerisque efficitur velit, vel cursus ipsum accumsan id. Morbi nibh nulla, pretium quis venenatis et, pharetra et sapien. Cras lobortis, massa sit amet blandit pulvinar, mi magna condimentum ex, quis commodo ipsum est quis metus. Maecenas pulvinar, leo sit amet congue pulvinar, neque magna ultrices mi, et rhoncus massa sapien quis libero. Etiam a nunc et ipsum faucibus pretium. Nulla facilisi. Nunc nec dolor velit. In semper semper mi non condimentum. Pellentesque vehicula volutpat odio, a semper sem porta a. - -In sit amet lectus rutrum, sollicitudin augue auctor, maximus quam. Mauris congue, nisl non fermentum iaculis, leo erat interdum lorem, quis bibendum arcu eros et elit. Fusce tortor ante, gravida a arcu in, lacinia finibus ante. Phasellus facilisis lectus vitae sapien feugiat laoreet. Curabitur ultricies libero sit amet condimentum suscipit. Duis at vestibulum mi. Suspendisse at neque augue. Duis ornare a mauris id efficitur. Suspendisse in dui nec dolor dignissim venenatis. Curabitur a magna turpis. Aliquam at commodo tellus. - -In id sem interdum, suscipit felis at, mattis velit. Proin accumsan sodales felis a lacinia. Curabitur at magna a massa varius maximus. Vestibulum in auctor ante. Donec aliquam tortor sed nulla rutrum, et egestas mi efficitur. Sed viverra quam tellus, quis vulputate felis ultrices sed. Mauris sagittis, neque quis laoreet gravida, nisi est ultrices mi, at tempus nunc justo non dui. Suspendisse porttitor tortor nulla, eget luctus quam finibus id. Proin sodales eros mollis tellus euismod luctus a eu mi. Quisque consectetur iaculis nibh, at mollis tellus volutpat eu. Aenean a nulla vel lectus rhoncus aliquam. Donec vitae lacinia neque. Donec non lectus eget sem finibus ultrices vel nec felis. - -Proin fringilla mi a leo rhoncus aliquam sit amet quis augue. Duis congue ligula at est suscipit fringilla. Proin aliquam erat ut consequat dapibus. Suspendisse non nisi orci. Donec ac erat vel libero egestas laoreet. Nullam felis odio, tincidunt eget eleifend a, porttitor eu nisi. Suspendisse tristique eros at dolor scelerisque hendrerit. Etiam id dignissim lectus. Fusce lacinia metus eu risus placerat, et eleifend nunc ultrices. Ut gravida a dui sed volutpat. Sed semper quis erat sed ornare. Pellentesque sapien sem, fermentum vel nunc at, auctor posuere nisl. Maecenas aliquet lobortis leo. Vivamus tellus urna, dignissim consectetur sapien vitae, hendrerit varius sem. Nunc dictum tristique fermentum. Duis eu suscipit odio. - -Curabitur quis egestas neque. Fusce eu fringilla orci, vitae euismod sapien. Donec sit amet iaculis urna. Phasellus maximus nisl in libero bibendum volutpat. Nulla at vehicula lorem. Phasellus varius, elit ac suscipit pretium, turpis ipsum porttitor lectus, vitae ullamcorper orci velit ut ligula. Proin mollis, orci vel commodo auctor, sapien ipsum vulputate enim, sit amet aliquam nulla sapien ut sapien. Proin tincidunt ex non massa aliquet, quis aliquam nulla egestas. Maecenas mollis turpis dapibus, dignissim lectus tincidunt, egestas ligula. Suspendisse in lobortis purus. Sed tellus tellus, mollis eget tempor sed, interdum ut lectus. Nulla sed ex efficitur, porta dui cursus, tristique elit. Maecenas tincidunt tortor vitae massa laoreet ultricies. Mauris ac elit vitae orci eleifend ornare non eu ligula. Curabitur venenatis nulla ut neque tristique, non tincidunt justo pretium. Suspendisse mattis semper dui, eget vestibulum risus elementum sed. - -In consequat nisi sit amet nulla euismod, at convallis tortor tincidunt. Aliquam hendrerit venenatis risus in interdum. Duis ullamcorper imperdiet elit sit amet blandit. Mauris placerat lacinia velit id pharetra. Nam nec iaculis dui. Etiam odio mi, fringilla in rutrum in, viverra quis tellus. Aliquam egestas mauris id nisi facilisis, in laoreet nibh malesuada. Ut eu dui laoreet, venenatis tellus ac, feugiat mauris. Nunc in velit laoreet, venenatis tellus quis, blandit dolor. Nulla ultrices et neque id placerat. Nulla eu interdum nulla. Aliquam molestie enim quis rutrum finibus. Nulla bibendum orci vel scelerisque posuere. Praesent quis magna molestie, luctus tortor tincidunt, gravida neque. - -Quisque et ligula eget magna viverra interdum at a sapien. Mauris ornare efficitur nunc sed vulputate. Praesent laoreet mollis tincidunt. Vestibulum id arcu vulputate, eleifend enim vel, accumsan turpis. Morbi faucibus convallis tellus, semper laoreet justo lacinia nec. Sed sodales ligula consectetur dui rhoncus, et convallis metus accumsan. Sed ullamcorper non ex sit amet ultricies. Donec finibus nulla nec blandit porttitor. Etiam aliquam quis leo a imperdiet. Cras at lobortis est. In convallis semper enim, ac porta ligula fringilla at. Donec augue est, facilisis et odio sit amet, viverra ullamcorper nisl. Ut porta velit nec sem lacinia, sit amet mollis magna auctor. Nulla lobortis lacinia mauris nec sagittis. Suspendisse rutrum ex vel nisi interdum hendrerit et ut purus. - -Sed consectetur sodales nibh eget tempus. Aenean egestas luctus viverra. Integer fermentum tincidunt tellus, nec rhoncus velit hendrerit vitae. Proin quis neque porttitor, scelerisque risus gravida, volutpat sem. Fusce nec ex rhoncus, tempor libero nec, pellentesque ex. Integer quis iaculis purus. Nullam vitae imperdiet orci. Sed sit amet eros condimentum, scelerisque turpis facilisis, dignissim ante. Proin quis tristique lacus, sed sagittis nisl. Cras pharetra ultrices purus, sed ullamcorper nisi fringilla eu. Praesent risus turpis, auctor in fringilla a, fringilla eu dolor. Phasellus auctor tristique enim, eleifend molestie diam venenatis ut. Mauris dapibus, enim eget pharetra semper, nulla dui porttitor mi, auctor hendrerit augue nulla quis urna. Aliquam in cursus justo. -</p>
\ No newline at end of file +<p> + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi quam arcu, rhoncus et dui at, volutpat viverra augue. Suspendisse placerat libero tellus, ut consequat ligula + rutrum id. Vestibulum lectus libero, viverra in lacus eget, porttitor tincidunt leo. Integer sit amet turpis et felis fringilla lacinia in id nibh. Proin vitae dapibus odio. + Mauris ornare eget urna id volutpat. Duis tellus nisi, hendrerit id sodales in, rutrum a quam. Proin tempor velit turpis, et tempor lacus sagittis in. Sed congue mauris quis nibh + posuere, nec semper lacus auctor. Morbi sit amet enim sit amet arcu ullamcorper sollicitudin. Donec dignissim posuere tincidunt. Donec ultrices quam nec orci venenatis suscipit. + Maecenas sapien quam, pretium sit amet ullamcorper at, vulputate sit amet urna. Suspendisse potenti. Integer in sapien turpis. Nulla accumsan viverra diam, quis convallis magna + finibus eget. Integer sed eros bibendum, consequat velit sit amet, tincidunt orci. Mauris varius id metus in fringilla. Vestibulum dignissim massa eget erat luctus, ac congue + mauris pellentesque. In et tempor dolor. Cras blandit congue lorem at facilisis. Aenean vel lacinia quam. Pellentesque luctus metus ut scelerisque efficitur. Mauris laoreet + sodales libero eget luctus. Proin at congue dui, a cursus risus. Pellentesque lorem sem, rhoncus fermentum arcu ut, euismod fermentum ligula. Nullam eu orci posuere, laoreet leo + in, commodo dolor. Fusce at felis elementum, commodo justo at, placerat justo. Nam feugiat scelerisque arcu, ut fermentum tellus elementum in. Sed ut vulputate ante. Morbi cursus + arcu quis odio convallis egestas. Donec vulputate vestibulum dolor eget tristique. Nullam tempor semper augue, vitae lobortis neque tempor ac. Pellentesque massa leo, congue id + ligula auctor, sollicitudin pharetra lorem. Curabitur a lacus porttitor, venenatis est quis, mattis velit. Fusce hendrerit lobortis mi ac efficitur. Mauris ornare, lorem sed + varius faucibus, nisi dui pretium urna, sit amet lacinia nibh ligula in ipsum. Phasellus gravida, metus eget ornare ultrices, dolor ipsum consectetur erat, ac aliquet eros metus + sed lectus. Nullam eleifend posuere rhoncus. Curabitur semper ligula vel ante posuere, at blandit orci accumsan. Vivamus accumsan metus in lorem laoreet, a luctus arcu tempus. + Donec posuere sollicitudin nulla at vulputate. Nulla condimentum imperdiet purus, et lobortis ligula iaculis in. Donec suscipit viverra neque, ut elementum eros lacinia ut. Fusce + at odio enim. Donec rutrum lectus sit amet est auctor, ac rhoncus lorem imperdiet. Curabitur commodo ex est, non tempus massa pulvinar nec. Sed fermentum, lectus eget ultricies + luctus, enim sem sodales quam, sed laoreet tortor sem feugiat nisi. Morbi molestie vehicula viverra. Integer accumsan mi in orci ultrices posuere. Integer mi quam, faucibus et + aliquet imperdiet, ornare ac ex. Nunc mattis molestie nisi, eu venenatis nibh vehicula at. Aliquam ut elit consectetur, finibus lorem sed, condimentum sapien. Praesent fermentum + iaculis orci, vitae tincidunt est viverra nec. Morbi semper turpis sed lectus ornare tristique. Sed congue dui ex. Maecenas orci ligula, imperdiet sit amet accumsan et, finibus a + velit. Ut vitae blandit eros. Nam gravida nec ipsum non volutpat. Integer quam metus, porttitor id ante sed, rutrum porta quam. Aenean at mattis ante. Morbi id libero eget risus + sagittis gravida. Proin consequat sapien a dignissim posuere. Ut luctus sed metus ut elementum. Mauris tincidunt condimentum risus at bibendum. Aenean a sapien justo. Morbi vel + neque in eros venenatis scelerisque vitae nec justo. Vestibulum lacinia, dui eu sollicitudin ornare, est elit vestibulum arcu, nec ultrices augue turpis in massa. Duis commodo + lectus sed est posuere, et mollis nisi dapibus. Sed id ultrices arcu. Praesent tempor sodales aliquet. Donec suscipit ipsum eu odio cursus, quis sodales metus sodales. Nunc + vestibulum massa at felis ullamcorper cursus. Pellentesque facilisis ante ut lectus vulputate vestibulum. Nullam pharetra felis ac lacus sodales, vel suscipit metus faucibus. + Donec facilisis imperdiet risus, in volutpat odio tincidunt a. Aliquam vitae leo lorem. Proin scelerisque efficitur velit, vel cursus ipsum accumsan id. Morbi nibh nulla, pretium + quis venenatis et, pharetra et sapien. Cras lobortis, massa sit amet blandit pulvinar, mi magna condimentum ex, quis commodo ipsum est quis metus. Maecenas pulvinar, leo sit amet + congue pulvinar, neque magna ultrices mi, et rhoncus massa sapien quis libero. Etiam a nunc et ipsum faucibus pretium. Nulla facilisi. Nunc nec dolor velit. In semper semper mi + non condimentum. Pellentesque vehicula volutpat odio, a semper sem porta a. In sit amet lectus rutrum, sollicitudin augue auctor, maximus quam. Mauris congue, nisl non fermentum + iaculis, leo erat interdum lorem, quis bibendum arcu eros et elit. Fusce tortor ante, gravida a arcu in, lacinia finibus ante. Phasellus facilisis lectus vitae sapien feugiat + laoreet. Curabitur ultricies libero sit amet condimentum suscipit. Duis at vestibulum mi. Suspendisse at neque augue. Duis ornare a mauris id efficitur. Suspendisse in dui nec + dolor dignissim venenatis. Curabitur a magna turpis. Aliquam at commodo tellus. In id sem interdum, suscipit felis at, mattis velit. Proin accumsan sodales felis a lacinia. + Curabitur at magna a massa varius maximus. Vestibulum in auctor ante. Donec aliquam tortor sed nulla rutrum, et egestas mi efficitur. Sed viverra quam tellus, quis vulputate + felis ultrices sed. Mauris sagittis, neque quis laoreet gravida, nisi est ultrices mi, at tempus nunc justo non dui. Suspendisse porttitor tortor nulla, eget luctus quam finibus + id. Proin sodales eros mollis tellus euismod luctus a eu mi. Quisque consectetur iaculis nibh, at mollis tellus volutpat eu. Aenean a nulla vel lectus rhoncus aliquam. Donec + vitae lacinia neque. Donec non lectus eget sem finibus ultrices vel nec felis. Proin fringilla mi a leo rhoncus aliquam sit amet quis augue. Duis congue ligula at est suscipit + fringilla. Proin aliquam erat ut consequat dapibus. Suspendisse non nisi orci. Donec ac erat vel libero egestas laoreet. Nullam felis odio, tincidunt eget eleifend a, porttitor + eu nisi. Suspendisse tristique eros at dolor scelerisque hendrerit. Etiam id dignissim lectus. Fusce lacinia metus eu risus placerat, et eleifend nunc ultrices. Ut gravida a dui + sed volutpat. Sed semper quis erat sed ornare. Pellentesque sapien sem, fermentum vel nunc at, auctor posuere nisl. Maecenas aliquet lobortis leo. Vivamus tellus urna, dignissim + consectetur sapien vitae, hendrerit varius sem. Nunc dictum tristique fermentum. Duis eu suscipit odio. Curabitur quis egestas neque. Fusce eu fringilla orci, vitae euismod + sapien. Donec sit amet iaculis urna. Phasellus maximus nisl in libero bibendum volutpat. Nulla at vehicula lorem. Phasellus varius, elit ac suscipit pretium, turpis ipsum + porttitor lectus, vitae ullamcorper orci velit ut ligula. Proin mollis, orci vel commodo auctor, sapien ipsum vulputate enim, sit amet aliquam nulla sapien ut sapien. Proin + tincidunt ex non massa aliquet, quis aliquam nulla egestas. Maecenas mollis turpis dapibus, dignissim lectus tincidunt, egestas ligula. Suspendisse in lobortis purus. Sed tellus + tellus, mollis eget tempor sed, interdum ut lectus. Nulla sed ex efficitur, porta dui cursus, tristique elit. Maecenas tincidunt tortor vitae massa laoreet ultricies. Mauris ac + elit vitae orci eleifend ornare non eu ligula. Curabitur venenatis nulla ut neque tristique, non tincidunt justo pretium. Suspendisse mattis semper dui, eget vestibulum risus + elementum sed. In consequat nisi sit amet nulla euismod, at convallis tortor tincidunt. Aliquam hendrerit venenatis risus in interdum. Duis ullamcorper imperdiet elit sit amet + blandit. Mauris placerat lacinia velit id pharetra. Nam nec iaculis dui. Etiam odio mi, fringilla in rutrum in, viverra quis tellus. Aliquam egestas mauris id nisi facilisis, in + laoreet nibh malesuada. Ut eu dui laoreet, venenatis tellus ac, feugiat mauris. Nunc in velit laoreet, venenatis tellus quis, blandit dolor. Nulla ultrices et neque id placerat. + Nulla eu interdum nulla. Aliquam molestie enim quis rutrum finibus. Nulla bibendum orci vel scelerisque posuere. Praesent quis magna molestie, luctus tortor tincidunt, gravida + neque. Quisque et ligula eget magna viverra interdum at a sapien. Mauris ornare efficitur nunc sed vulputate. Praesent laoreet mollis tincidunt. Vestibulum id arcu vulputate, + eleifend enim vel, accumsan turpis. Morbi faucibus convallis tellus, semper laoreet justo lacinia nec. Sed sodales ligula consectetur dui rhoncus, et convallis metus accumsan. + Sed ullamcorper non ex sit amet ultricies. Donec finibus nulla nec blandit porttitor. Etiam aliquam quis leo a imperdiet. Cras at lobortis est. In convallis semper enim, ac porta + ligula fringilla at. Donec augue est, facilisis et odio sit amet, viverra ullamcorper nisl. Ut porta velit nec sem lacinia, sit amet mollis magna auctor. Nulla lobortis lacinia + mauris nec sagittis. Suspendisse rutrum ex vel nisi interdum hendrerit et ut purus. Sed consectetur sodales nibh eget tempus. Aenean egestas luctus viverra. Integer fermentum + tincidunt tellus, nec rhoncus velit hendrerit vitae. Proin quis neque porttitor, scelerisque risus gravida, volutpat sem. Fusce nec ex rhoncus, tempor libero nec, pellentesque + ex. Integer quis iaculis purus. Nullam vitae imperdiet orci. Sed sit amet eros condimentum, scelerisque turpis facilisis, dignissim ante. Proin quis tristique lacus, sed sagittis + nisl. Cras pharetra ultrices purus, sed ullamcorper nisi fringilla eu. Praesent risus turpis, auctor in fringilla a, fringilla eu dolor. Phasellus auctor tristique enim, eleifend + molestie diam venenatis ut. Mauris dapibus, enim eget pharetra semper, nulla dui porttitor mi, auctor hendrerit augue nulla quis urna. Aliquam in cursus justo. +</p> diff --git a/examples/framework-lit/src/components/Test.js b/examples/framework-lit/src/components/Test.js index 182755c79..7f565f777 100644 --- a/examples/framework-lit/src/components/Test.js +++ b/examples/framework-lit/src/components/Test.js @@ -3,17 +3,17 @@ import { LitElement, html } from 'lit'; export const tagName = 'calc-add'; class CalcAdd extends LitElement { - static get properties() { - return { - num: { - type: Number, - }, - }; - } + static get properties() { + return { + num: { + type: Number, + }, + }; + } - render() { - return html` <div>Number: ${this.num}</div> `; - } + render() { + return html` <div>Number: ${this.num}</div> `; + } } customElements.define(tagName, CalcAdd); diff --git a/examples/framework-lit/src/pages/index.astro b/examples/framework-lit/src/pages/index.astro index ec4a7f73d..6b825848e 100644 --- a/examples/framework-lit/src/pages/index.astro +++ b/examples/framework-lit/src/pages/index.astro @@ -4,16 +4,16 @@ import '../components/Test.js'; import '../components/Counter.js'; --- -<!doctype html> +<!DOCTYPE html> <html lang="en"> - <head> - <link rel="icon" type="image/x-icon" href="/favicon.ico" /> - <title>Demo</title> - </head> - <body> - <h1>Test app</h1> - <my-counter client:load /> - <Lorem /> - <calc-add num={33} /> - </body> + <head> + <link rel="icon" type="image/x-icon" href="/favicon.ico" /> + <title>Demo</title> + </head> + <body> + <h1>Test app</h1> + <my-counter client:load></my-counter> + <Lorem /> + <calc-add num={33}></calc-add> + </body> </html> diff --git a/examples/framework-multiple/astro.config.mjs b/examples/framework-multiple/astro.config.mjs index b5fe6a073..ce173ed92 100644 --- a/examples/framework-multiple/astro.config.mjs +++ b/examples/framework-multiple/astro.config.mjs @@ -8,6 +8,6 @@ // @ts-check export default /** @type {import('astro').AstroUserConfig} */ ({ - // Enable many renderers to support all different kinds of components. - renderers: ['@astrojs/renderer-preact', '@astrojs/renderer-react', '@astrojs/renderer-svelte', '@astrojs/renderer-vue', '@astrojs/renderer-solid'], + // Enable many renderers to support all different kinds of components. + renderers: ['@astrojs/renderer-preact', '@astrojs/renderer-react', '@astrojs/renderer-svelte', '@astrojs/renderer-vue', '@astrojs/renderer-solid'], }); diff --git a/examples/framework-multiple/src/components/A.astro b/examples/framework-multiple/src/components/A.astro index 702a4be35..2b7bd482a 100644 --- a/examples/framework-multiple/src/components/A.astro +++ b/examples/framework-multiple/src/components/A.astro @@ -1,3 +1,3 @@ <div class="children"> - <h1>Hello Astro (A)</h1> + <h1>Hello Astro (A)</h1> </div> diff --git a/examples/framework-multiple/src/components/B.astro b/examples/framework-multiple/src/components/B.astro index 9022cb372..3640fe831 100644 --- a/examples/framework-multiple/src/components/B.astro +++ b/examples/framework-multiple/src/components/B.astro @@ -1,3 +1,3 @@ <div class="children"> - <h1>Hello Astro (B)</h1> + <h1>Hello Astro (B)</h1> </div> diff --git a/examples/framework-multiple/src/components/PreactCounter.tsx b/examples/framework-multiple/src/components/PreactCounter.tsx index 9c9bf73a1..261f275a1 100644 --- a/examples/framework-multiple/src/components/PreactCounter.tsx +++ b/examples/framework-multiple/src/components/PreactCounter.tsx @@ -2,18 +2,18 @@ import { useState } from 'preact/hooks'; /** a counter written in Preact */ export function PreactCounter({ children }) { - const [count, setCount] = useState(0); - const add = () => setCount((i) => i + 1); - const subtract = () => setCount((i) => i - 1); + const [count, setCount] = useState(0); + const add = () => setCount((i) => i + 1); + const subtract = () => setCount((i) => i - 1); - return ( - <> - <div class="counter"> - <button onClick={subtract}>-</button> - <pre>{count}</pre> - <button onClick={add}>+</button> - </div> - <div class="counter-message">{children}</div> - </> - ); + return ( + <> + <div class="counter"> + <button onClick={subtract}>-</button> + <pre>{count}</pre> + <button onClick={add}>+</button> + </div> + <div class="counter-message">{children}</div> + </> + ); } diff --git a/examples/framework-multiple/src/components/PreactSFC.tsx b/examples/framework-multiple/src/components/PreactSFC.tsx index 3638caebd..60d0fe836 100644 --- a/examples/framework-multiple/src/components/PreactSFC.tsx +++ b/examples/framework-multiple/src/components/PreactSFC.tsx @@ -2,9 +2,9 @@ /** a counter written in Preact */ export default function PreactSFC({ children }) { - return ( - <> - <div className="counter">Hello from Preact!</div> - </> - ); + return ( + <> + <div className="counter">Hello from Preact!</div> + </> + ); } diff --git a/examples/framework-multiple/src/components/ReactCounter.jsx b/examples/framework-multiple/src/components/ReactCounter.jsx index eca3cd2f7..cdd42bee2 100644 --- a/examples/framework-multiple/src/components/ReactCounter.jsx +++ b/examples/framework-multiple/src/components/ReactCounter.jsx @@ -2,18 +2,18 @@ import { useState } from 'react'; /** a counter written in React */ export function Counter({ children }) { - const [count, setCount] = useState(0); - const add = () => setCount((i) => i + 1); - const subtract = () => setCount((i) => i - 1); + const [count, setCount] = useState(0); + const add = () => setCount((i) => i + 1); + const subtract = () => setCount((i) => i - 1); - return ( - <> - <div className="counter"> - <button onClick={subtract}>-</button> - <pre>{count}</pre> - <button onClick={add}>+</button> - </div> - <div className="counter-message">{children}</div> - </> - ); + return ( + <> + <div className="counter"> + <button onClick={subtract}>-</button> + <pre>{count}</pre> + <button onClick={add}>+</button> + </div> + <div className="counter-message">{children}</div> + </> + ); } diff --git a/examples/framework-multiple/src/components/SolidCounter.tsx b/examples/framework-multiple/src/components/SolidCounter.tsx index 63fe5cb11..b16a463d5 100644 --- a/examples/framework-multiple/src/components/SolidCounter.tsx +++ b/examples/framework-multiple/src/components/SolidCounter.tsx @@ -2,18 +2,18 @@ import { createSignal } from 'solid-js'; /** a counter written with Solid */ export default function SolidCounter({ children }) { - const [count, setCount] = createSignal(0); - const add = () => setCount(count() + 1); - const subtract = () => setCount(count() - 1); + const [count, setCount] = createSignal(0); + const add = () => setCount(count() + 1); + const subtract = () => setCount(count() - 1); - return ( - <> - <div id="solid" class="counter"> - <button onClick={subtract}>-</button> - <pre>{count()}</pre> - <button onClick={add}>+</button> - </div> - <div class="counter-message">{children}</div> - </> - ); + return ( + <> + <div id="solid" class="counter"> + <button onClick={subtract}>-</button> + <pre>{count()}</pre> + <button onClick={add}>+</button> + </div> + <div class="counter-message">{children}</div> + </> + ); } diff --git a/examples/framework-multiple/src/components/VueCounter.vue b/examples/framework-multiple/src/components/VueCounter.vue index 6c04c401a..bd801ca81 100644 --- a/examples/framework-multiple/src/components/VueCounter.vue +++ b/examples/framework-multiple/src/components/VueCounter.vue @@ -1,27 +1,27 @@ <template> - <div class="counter"> - <button @click="subtract()">-</button> - <pre>{{ count }}</pre> - <button @click="add()">+</button> - </div> - <div class="counter-message"> - <slot /> - </div> + <div class="counter"> + <button @click="subtract()">-</button> + <pre>{{ count }}</pre> + <button @click="add()">+</button> + </div> + <div class="counter-message"> + <slot /> + </div> </template> <script> import { ref } from 'vue'; export default { - setup() { - const count = ref(0); - const add = () => (count.value = count.value + 1); - const subtract = () => (count.value = count.value - 1); + setup() { + const count = ref(0); + const add = () => (count.value = count.value + 1); + const subtract = () => (count.value = count.value - 1); - return { - count, - add, - subtract, - }; - }, + return { + count, + add, + subtract, + }; + }, }; </script> diff --git a/examples/framework-multiple/src/pages/index.astro b/examples/framework-multiple/src/pages/index.astro index e27a5466d..3864b6430 100644 --- a/examples/framework-multiple/src/pages/index.astro +++ b/examples/framework-multiple/src/pages/index.astro @@ -11,41 +11,40 @@ import SvelteCounter from '../components/SvelteCounter.svelte'; // Full Astro Component Syntax: // https://docs.astro.build/core-concepts/astro-components/ --- + <html lang="en"> - <head> - <meta charset="utf-8"> - <meta name="viewport" content="width=device-width"> - <link rel="icon" type="image/x-icon" href="/favicon.ico"> - <link rel="stylesheet" type="text/css" href={Astro.resolve('../styles/global.css')}> - </head> - <body> - <main> - - <react.Counter client:visible> - <h1>Hello React!</h1> - <p>What's up?</p> - </react.Counter> - - <PreactCounter client:visible> - <h1>Hello Preact!</h1> - </PreactCounter> - - <SolidCounter client:visible> - <h1>Hello Solid!</h1> - </SolidCounter> - - <VueCounter client:visible> - <h1>Hello Vue!</h1> - </VueCounter> - - <SvelteCounter client:visible> - <h1>Hello Svelte!</h1> - </SvelteCounter> - - <A /> - - <Renamed /> - - </main> - </body> + <head> + <meta charset="utf-8" /> + <meta name="viewport" content="width=device-width" /> + <link rel="icon" type="image/x-icon" href="/favicon.ico" /> + <link rel="stylesheet" type="text/css" href={Astro.resolve('../styles/global.css')} /> + </head> + <body> + <main> + <react.Counter client:visible> + <h1>Hello React!</h1> + <p>What's up?</p> + </react.Counter> + + <PreactCounter client:visible> + <h1>Hello Preact!</h1> + </PreactCounter> + + <SolidCounter client:visible> + <h1>Hello Solid!</h1> + </SolidCounter> + + <VueCounter client:visible> + <h1>Hello Vue!</h1> + </VueCounter> + + <SvelteCounter client:visible> + <h1>Hello Svelte!</h1> + </SvelteCounter> + + <A /> + + <Renamed /> + </main> + </body> </html> diff --git a/examples/framework-multiple/src/styles/global.css b/examples/framework-multiple/src/styles/global.css index 5997a5afd..4912b4c39 100644 --- a/examples/framework-multiple/src/styles/global.css +++ b/examples/framework-multiple/src/styles/global.css @@ -1,21 +1,21 @@ html, body { - font-family: system-ui; - margin: 0; + font-family: system-ui; + margin: 0; } body { - padding: 2rem; + padding: 2rem; } .counter { - display: grid; - font-size: 2em; - grid-template-columns: repeat(3, minmax(0, 1fr)); - margin-top: 2em; - place-items: center; + display: grid; + font-size: 2em; + grid-template-columns: repeat(3, minmax(0, 1fr)); + margin-top: 2em; + place-items: center; } .counter-message { - text-align: center; + text-align: center; } diff --git a/examples/framework-preact/astro.config.mjs b/examples/framework-preact/astro.config.mjs index 68499b3fa..a1516f292 100644 --- a/examples/framework-preact/astro.config.mjs +++ b/examples/framework-preact/astro.config.mjs @@ -8,6 +8,6 @@ // @ts-check export default /** @type {import('astro').AstroUserConfig} */ ({ - // Enable the Preact renderer to support Preact JSX components. - renderers: ['@astrojs/renderer-preact'], + // Enable the Preact renderer to support Preact JSX components. + renderers: ['@astrojs/renderer-preact'], }); diff --git a/examples/framework-preact/src/components/Counter.css b/examples/framework-preact/src/components/Counter.css index 5d3de4803..fb21044d7 100644 --- a/examples/framework-preact/src/components/Counter.css +++ b/examples/framework-preact/src/components/Counter.css @@ -1,11 +1,11 @@ .counter { - display: grid; - font-size: 2em; - grid-template-columns: repeat(3, minmax(0, 1fr)); - margin-top: 2em; - place-items: center; + display: grid; + font-size: 2em; + grid-template-columns: repeat(3, minmax(0, 1fr)); + margin-top: 2em; + place-items: center; } .counter-message { - text-align: center; + text-align: center; } diff --git a/examples/framework-preact/src/components/Counter.tsx b/examples/framework-preact/src/components/Counter.tsx index a2ed0277d..61a9f9d5a 100644 --- a/examples/framework-preact/src/components/Counter.tsx +++ b/examples/framework-preact/src/components/Counter.tsx @@ -3,18 +3,18 @@ import { useState } from 'preact/hooks'; import './Counter.css'; export default function Counter({ children }) { - const [count, setCount] = useState(0); - const add = () => setCount((i) => i + 1); - const subtract = () => setCount((i) => i - 1); + const [count, setCount] = useState(0); + const add = () => setCount((i) => i + 1); + const subtract = () => setCount((i) => i - 1); - return ( - <> - <div class="counter"> - <button onClick={subtract}>-</button> - <pre>{count}</pre> - <button onClick={add}>+</button> - </div> - <div class="counter-message">{children}</div> - </> - ); + return ( + <> + <div class="counter"> + <button onClick={subtract}>-</button> + <pre>{count}</pre> + <button onClick={add}>+</button> + </div> + <div class="counter-message">{children}</div> + </> + ); } diff --git a/examples/framework-preact/src/pages/index.astro b/examples/framework-preact/src/pages/index.astro index 4811f6e31..77ce1c2c7 100644 --- a/examples/framework-preact/src/pages/index.astro +++ b/examples/framework-preact/src/pages/index.astro @@ -1,31 +1,32 @@ --- // Component Imports -import Counter from '../components/Counter.tsx' +import Counter from '../components/Counter.tsx'; // Full Astro Component Syntax: // https://docs.astro.build/core-concepts/astro-components/ --- + <html lang="en"> - <head> - <meta charset="utf-8" /> - <meta name="viewport" content="width=device-width" /> - <link rel="icon" type="image/x-icon" href="/favicon.ico" /> - <style> - html, - body { - font-family: system-ui; - margin: 0; - } - body { - padding: 2rem; - } - </style> - </head> - <body> - <main> - <Counter client:visible> - <h1>Hello, Preact!</h1> - </Counter> - </main> - </body> + <head> + <meta charset="utf-8" /> + <meta name="viewport" content="width=device-width" /> + <link rel="icon" type="image/x-icon" href="/favicon.ico" /> + <style> + html, + body { + font-family: system-ui; + margin: 0; + } + body { + padding: 2rem; + } + </style> + </head> + <body> + <main> + <Counter client:visible> + <h1>Hello, Preact!</h1> + </Counter> + </main> + </body> </html> diff --git a/examples/framework-react/astro.config.mjs b/examples/framework-react/astro.config.mjs index 1d13cb140..443a69232 100644 --- a/examples/framework-react/astro.config.mjs +++ b/examples/framework-react/astro.config.mjs @@ -8,6 +8,6 @@ // @ts-check export default /** @type {import('astro').AstroUserConfig} */ ({ - // Enable the React renderer to support React JSX components. - renderers: ['@astrojs/renderer-react'], + // Enable the React renderer to support React JSX components. + renderers: ['@astrojs/renderer-react'], }); diff --git a/examples/framework-react/src/components/Counter.css b/examples/framework-react/src/components/Counter.css index 5d3de4803..fb21044d7 100644 --- a/examples/framework-react/src/components/Counter.css +++ b/examples/framework-react/src/components/Counter.css @@ -1,11 +1,11 @@ .counter { - display: grid; - font-size: 2em; - grid-template-columns: repeat(3, minmax(0, 1fr)); - margin-top: 2em; - place-items: center; + display: grid; + font-size: 2em; + grid-template-columns: repeat(3, minmax(0, 1fr)); + margin-top: 2em; + place-items: center; } .counter-message { - text-align: center; + text-align: center; } diff --git a/examples/framework-react/src/components/Counter.jsx b/examples/framework-react/src/components/Counter.jsx index e222d680f..97ddf34c7 100644 --- a/examples/framework-react/src/components/Counter.jsx +++ b/examples/framework-react/src/components/Counter.jsx @@ -2,18 +2,18 @@ import React, { useState } from 'react'; import './Counter.css'; export default function Counter({ children, count: initialCount }) { - const [count, setCount] = useState(initialCount); - const add = () => setCount((i) => i + 1); - const subtract = () => setCount((i) => i - 1); + const [count, setCount] = useState(initialCount); + const add = () => setCount((i) => i + 1); + const subtract = () => setCount((i) => i - 1); - return ( - <> - <div className="counter"> - <button onClick={subtract}>-</button> - <pre>{count}</pre> - <button onClick={add}>+</button> - </div> - <div className="counter-message">{children}</div> - </> - ); + return ( + <> + <div className="counter"> + <button onClick={subtract}>-</button> + <pre>{count}</pre> + <button onClick={add}>+</button> + </div> + <div className="counter-message">{children}</div> + </> + ); } diff --git a/examples/framework-react/src/pages/index.astro b/examples/framework-react/src/pages/index.astro index dd2950782..39a15a797 100644 --- a/examples/framework-react/src/pages/index.astro +++ b/examples/framework-react/src/pages/index.astro @@ -1,34 +1,35 @@ --- // Component Imports -import Counter from '../components/Counter.jsx' +import Counter from '../components/Counter.jsx'; const someProps = { - count: 0, -} + count: 0, +}; // Full Astro Component Syntax: // https://docs.astro.build/core-concepts/astro-components/ --- + <html lang="en"> - <head> - <meta charset="utf-8" /> - <meta name="viewport" content="width=device-width" /> - <link rel="icon" type="image/x-icon" href="/favicon.ico" /> - <style> - html, - body { - font-family: system-ui; - margin: 0; - } - body { - padding: 2rem; - } - </style> - </head> - <body> - <main> - <Counter {...someProps} client:visible> - <h1>Hello, React!</h1> - </Counter> - </main> - </body> + <head> + <meta charset="utf-8" /> + <meta name="viewport" content="width=device-width" /> + <link rel="icon" type="image/x-icon" href="/favicon.ico" /> + <style> + html, + body { + font-family: system-ui; + margin: 0; + } + body { + padding: 2rem; + } + </style> + </head> + <body> + <main> + <Counter {...someProps} client:visible> + <h1>Hello, React!</h1> + </Counter> + </main> + </body> </html> diff --git a/examples/framework-solid/astro.config.mjs b/examples/framework-solid/astro.config.mjs index afb71e071..72c154cb3 100644 --- a/examples/framework-solid/astro.config.mjs +++ b/examples/framework-solid/astro.config.mjs @@ -8,6 +8,6 @@ // @ts-check export default /** @type {import('astro').AstroUserConfig} */ ({ - // Enable the Solid renderer to support Solid JSX components. - renderers: ['@astrojs/renderer-solid'], + // Enable the Solid renderer to support Solid JSX components. + renderers: ['@astrojs/renderer-solid'], }); diff --git a/examples/framework-solid/src/components/Counter.css b/examples/framework-solid/src/components/Counter.css index 3ee017965..cffdbda7b 100644 --- a/examples/framework-solid/src/components/Counter.css +++ b/examples/framework-solid/src/components/Counter.css @@ -1,11 +1,11 @@ .counter { - display: grid; - font-size: 2em; - grid-template-columns: repeat(3, minmax(0, 1fr)); - margin-top: 3em; - place-items: center; + display: grid; + font-size: 2em; + grid-template-columns: repeat(3, minmax(0, 1fr)); + margin-top: 3em; + place-items: center; } .counter-message { - text-align: center; + text-align: center; } diff --git a/examples/framework-solid/src/components/Counter.jsx b/examples/framework-solid/src/components/Counter.jsx index bbd435f09..1255fa399 100644 --- a/examples/framework-solid/src/components/Counter.jsx +++ b/examples/framework-solid/src/components/Counter.jsx @@ -2,18 +2,18 @@ import { createSignal } from 'solid-js'; import './Counter.css'; export default function Counter({ children }) { - const [count, setCount] = createSignal(0); - const add = () => setCount(count() + 1); - const subtract = () => setCount(count() - 1); + const [count, setCount] = createSignal(0); + const add = () => setCount(count() + 1); + const subtract = () => setCount(count() - 1); - return ( - <> - <div class="counter"> - <button onClick={subtract}>-</button> - <pre>{count()}</pre> - <button onClick={add}>+</button> - </div> - <div class="counter-message">{children}</div> - </> - ); + return ( + <> + <div class="counter"> + <button onClick={subtract}>-</button> + <pre>{count()}</pre> + <button onClick={add}>+</button> + </div> + <div class="counter-message">{children}</div> + </> + ); } diff --git a/examples/framework-solid/src/pages/index.astro b/examples/framework-solid/src/pages/index.astro index af4669816..feb30a401 100644 --- a/examples/framework-solid/src/pages/index.astro +++ b/examples/framework-solid/src/pages/index.astro @@ -1,27 +1,28 @@ --- import Counter from '../components/Counter.jsx'; --- + <html> - <head> - <meta charset="utf-8" /> - <meta name="viewport" content="width=device-width" /> - <link rel="icon" type="image/x-icon" href="/favicon.ico" /> - <style> - html, - body { - font-family: system-ui; - margin: 0; - } - body { - padding: 2rem; - } - </style> - </head> - <body> - <main> - <Counter client:visible> - <h1>Hello, Solid!</h1> - </Counter> - </main> - </body> + <head> + <meta charset="utf-8" /> + <meta name="viewport" content="width=device-width" /> + <link rel="icon" type="image/x-icon" href="/favicon.ico" /> + <style> + html, + body { + font-family: system-ui; + margin: 0; + } + body { + padding: 2rem; + } + </style> + </head> + <body> + <main> + <Counter client:visible> + <h1>Hello, Solid!</h1> + </Counter> + </main> + </body> </html> diff --git a/examples/framework-svelte/astro.config.mjs b/examples/framework-svelte/astro.config.mjs index 3e7d4acdb..a22ba9c95 100644 --- a/examples/framework-svelte/astro.config.mjs +++ b/examples/framework-svelte/astro.config.mjs @@ -8,6 +8,6 @@ // @ts-check export default /** @type {import('astro').AstroUserConfig} */ ({ - // Enable the Svelte renderer to support Svelte components. - renderers: ['@astrojs/renderer-svelte'], + // Enable the Svelte renderer to support Svelte components. + renderers: ['@astrojs/renderer-svelte'], }); diff --git a/examples/framework-svelte/src/pages/index.astro b/examples/framework-svelte/src/pages/index.astro index e5e7883d0..2cc0fed69 100644 --- a/examples/framework-svelte/src/pages/index.astro +++ b/examples/framework-svelte/src/pages/index.astro @@ -1,32 +1,32 @@ --- // Component Imports -import Counter from '../components/Counter.svelte' - +import Counter from '../components/Counter.svelte'; // Full Astro Component Syntax: // https://docs.astro.build/core-concepts/astro-components/ --- + <html lang="en"> - <head> - <meta charset="utf-8" /> - <meta name="viewport" content="width=device-width" /> - <link rel="icon" type="image/x-icon" href="/favicon.ico" /> - <style> - html, - body { - font-family: system-ui; - margin: 0; - } - body { - padding: 2rem; - } - </style> - </head> - <body> - <main> - <Counter client:visible> - <h1>Hello, Svelte!</h1> - </Counter> - </main> - </body> + <head> + <meta charset="utf-8" /> + <meta name="viewport" content="width=device-width" /> + <link rel="icon" type="image/x-icon" href="/favicon.ico" /> + <style> + html, + body { + font-family: system-ui; + margin: 0; + } + body { + padding: 2rem; + } + </style> + </head> + <body> + <main> + <Counter client:visible> + <h1>Hello, Svelte!</h1> + </Counter> + </main> + </body> </html> diff --git a/examples/framework-vue/astro.config.mjs b/examples/framework-vue/astro.config.mjs index c60760357..950355760 100644 --- a/examples/framework-vue/astro.config.mjs +++ b/examples/framework-vue/astro.config.mjs @@ -8,6 +8,6 @@ // @ts-check export default /** @type {import('astro').AstroUserConfig} */ ({ - // Enable the Vue renderer to support Vue components. - renderers: ['@astrojs/renderer-vue'], + // Enable the Vue renderer to support Vue components. + renderers: ['@astrojs/renderer-vue'], }); diff --git a/examples/framework-vue/src/components/Counter.vue b/examples/framework-vue/src/components/Counter.vue index 155717ea4..d5d5215f7 100644 --- a/examples/framework-vue/src/components/Counter.vue +++ b/examples/framework-vue/src/components/Counter.vue @@ -1,40 +1,40 @@ <template> - <div class="counter"> - <button @click="subtract()">-</button> - <pre>{{ count }}</pre> - <button @click="add()">+</button> - </div> - <div class="counter-message"> - <slot /> - </div> + <div class="counter"> + <button @click="subtract()">-</button> + <pre>{{ count }}</pre> + <button @click="add()">+</button> + </div> + <div class="counter-message"> + <slot /> + </div> </template> <script> import { ref } from 'vue'; export default { - setup() { - const count = ref(0); - const add = () => (count.value = count.value + 1); - const subtract = () => (count.value = count.value - 1); + setup() { + const count = ref(0); + const add = () => (count.value = count.value + 1); + const subtract = () => (count.value = count.value - 1); - return { - count, - add, - subtract, - }; - }, + return { + count, + add, + subtract, + }; + }, }; </script> <style> .counter { - display: grid; - font-size: 2em; - grid-template-columns: repeat(3, minmax(0, 1fr)); - margin-top: 2em; - place-items: center; + display: grid; + font-size: 2em; + grid-template-columns: repeat(3, minmax(0, 1fr)); + margin-top: 2em; + place-items: center; } .counter-message { - text-align: center; + text-align: center; } </style> diff --git a/examples/framework-vue/src/pages/index.astro b/examples/framework-vue/src/pages/index.astro index 449c3a614..98a667f77 100644 --- a/examples/framework-vue/src/pages/index.astro +++ b/examples/framework-vue/src/pages/index.astro @@ -1,32 +1,32 @@ --- // Component Imports -import Counter from '../components/Counter.vue' - +import Counter from '../components/Counter.vue'; // Full Astro Component Syntax: // https://docs.astro.build/core-concepts/astro-components/ --- + <html lang="en"> - <head> - <meta charset="utf-8" /> - <meta name="viewport" content="width=device-width" /> - <link rel="icon" type="image/x-icon" href="/favicon.ico" /> - <style> - html, - body { - font-family: system-ui; - margin: 0; - } - body { - padding: 2rem; - } - </style> - </head> - <body> - <main> - <Counter client:visible> - <h1>Hello, Vue!</h1> - </Counter> - </main> - </body> + <head> + <meta charset="utf-8" /> + <meta name="viewport" content="width=device-width" /> + <link rel="icon" type="image/x-icon" href="/favicon.ico" /> + <style> + html, + body { + font-family: system-ui; + margin: 0; + } + body { + padding: 2rem; + } + </style> + </head> + <body> + <main> + <Counter client:visible> + <h1>Hello, Vue!</h1> + </Counter> + </main> + </body> </html> diff --git a/examples/minimal/astro.config.mjs b/examples/minimal/astro.config.mjs index 94846abde..d68cea82c 100644 --- a/examples/minimal/astro.config.mjs +++ b/examples/minimal/astro.config.mjs @@ -8,6 +8,6 @@ // @ts-check export default /** @type {import('astro').AstroUserConfig} */ ({ - // Comment out "renderers: []" to enable Astro's default component support. - renderers: [], + // Comment out "renderers: []" to enable Astro's default component support. + renderers: [], }); diff --git a/examples/minimal/src/pages/index.astro b/examples/minimal/src/pages/index.astro index 3ce40a78a..e1e7a987b 100644 --- a/examples/minimal/src/pages/index.astro +++ b/examples/minimal/src/pages/index.astro @@ -3,20 +3,18 @@ --- <html lang="en"> + <head> + <meta charset="utf-8" /> + <link rel="icon" type="image/x-icon" href="/favicon.ico" /> + <meta name="viewport" content="width=device-width" /> + <title>Welcome to Astro</title> + <style> + /* scoped CSS styles go here: */ + /* h1 { ... } */ + </style> + </head> -<head> - <meta charset="utf-8" /> - <link rel="icon" type="image/x-icon" href="/favicon.ico" /> - <meta name="viewport" content="width=device-width" /> - <title>Welcome to Astro</title> - <style> - /* scoped CSS styles go here: */ - /* h1 { ... } */ - </style> -</head> - -<body> - <h1>Welcome to <a href="https://astro.build/">Astro</a></h1> -</body> - + <body> + <h1>Welcome to <a href="https://astro.build/">Astro</a></h1> + </body> </html> diff --git a/examples/portfolio-svelte/astro.config.mjs b/examples/portfolio-svelte/astro.config.mjs index 3e7d4acdb..a22ba9c95 100644 --- a/examples/portfolio-svelte/astro.config.mjs +++ b/examples/portfolio-svelte/astro.config.mjs @@ -8,6 +8,6 @@ // @ts-check export default /** @type {import('astro').AstroUserConfig} */ ({ - // Enable the Svelte renderer to support Svelte components. - renderers: ['@astrojs/renderer-svelte'], + // Enable the Svelte renderer to support Svelte components. + renderers: ['@astrojs/renderer-svelte'], }); diff --git a/examples/portfolio-svelte/src/components/MainHead.astro b/examples/portfolio-svelte/src/components/MainHead.astro index ae2eb1d1f..0597b178f 100644 --- a/examples/portfolio-svelte/src/components/MainHead.astro +++ b/examples/portfolio-svelte/src/components/MainHead.astro @@ -2,12 +2,12 @@ const { title = 'Jeanine White: Personal Site', description = 'The personal site of Jeanine White' } = Astro.props; --- -<meta charset="UTF-8"> -<meta name="description" property="og:description" content={description}> -<meta name="viewport" content="width=device-width"> +<meta charset="UTF-8" /> +<meta name="description" property="og:description" content={description} /> +<meta name="viewport" content="width=device-width" /> <title>{title}</title> <link rel="icon" type="image/x-icon" href="/favicon.ico" /> -<link rel="stylesheet" type="text/css" href={Astro.resolve('../styles/global.scss')}> -<link rel="preconnect" href="https://fonts.gstatic.com"> -<link href="https://fonts.googleapis.com/css2?family=Inter:wght@200;400;700;900&display=swap" rel="stylesheet"> +<link rel="stylesheet" type="text/css" href={Astro.resolve('../styles/global.scss')} /> +<link rel="preconnect" href="https://fonts.gstatic.com" /> +<link href="https://fonts.googleapis.com/css2?family=Inter:wght@200;400;700;900&display=swap" rel="stylesheet" /> diff --git a/examples/portfolio-svelte/src/layouts/project.astro b/examples/portfolio-svelte/src/layouts/project.astro index da2a4741b..e60be99ae 100644 --- a/examples/portfolio-svelte/src/layouts/project.astro +++ b/examples/portfolio-svelte/src/layouts/project.astro @@ -6,87 +6,86 @@ import Nav from '../components/Nav.svelte'; const { content } = Astro.props; --- -<html lang={ content.lang || 'en' }> - <head> - <MainHead title={content.title} description={content.description} /> - <style lang="scss"> - .hero { - padding: 8rem; - display: flex; - background-color: var(--t-fg); - background-repeat: no-repeat; - background-size: cover; - min-height: 25vw; - color: white; - flex-direction: column; - align-items: center; - justify-content: center; - } - .tag { - margin-left: 0.5em; - margin-right: 0.5em; - text-transform: uppercase; +<html lang={content.lang || 'en'}> + <head> + <MainHead title={content.title} description={content.description} /> + <style lang="scss"> + .hero { + padding: 8rem; + display: flex; + background-color: var(--t-fg); + background-repeat: no-repeat; + background-size: cover; + min-height: 25vw; + color: white; + flex-direction: column; + align-items: center; + justify-content: center; + } - &:nth-of-type(1n) { - color: var(--c-green); - } - &:nth-of-type(2n) { - color: var(--c-orange); - } - &:nth-of-type(3n) { - color: var(--c-blue); - } - &:nth-of-type(4n) { - color: var(--c-pink); - } - } + .tag { + margin-left: 0.5em; + margin-right: 0.5em; + text-transform: uppercase; - .title { - font-size: var(--f-u10); - font-weight: 900; - text-transform: uppercase; - letter-spacing: 0.0625em; - } + &:nth-of-type(1n) { + color: var(--c-green); + } + &:nth-of-type(2n) { + color: var(--c-orange); + } + &:nth-of-type(3n) { + color: var(--c-blue); + } + &:nth-of-type(4n) { + color: var(--c-pink); + } + } - .leadIn { - color: var(--t-bg); - background-color: var(--t-fg); - } + .title { + font-size: var(--f-u10); + font-weight: 900; + text-transform: uppercase; + letter-spacing: 0.0625em; + } - .tagline { - font-weight: 300; - font-size: var(--f-u3); - line-height: 1.5; - } + .leadIn { + color: var(--t-bg); + background-color: var(--t-fg); + } - .content { - font-size: var(--f-u1); - line-height: 2.2; - } - </style> - </head> - <body> - <Nav /> - <header style={`background-image:url(${content.img})`} class="hero"> - <h1 class="title">{content.title}</h1> - </header> - <div class="leadIn"> - <div class="wrapper pt8 pb8 mb8 tac"> - {content.tags.map((t) => ( - <span class="tag">{t}</span> - ))} - <h3 class="tagline">{content.description}</h3> - </div> - </div> - <div class="wrapper wrapper__readable"> - <div class="content"><slot></slot></div> - </div> - <footer class="tac mt6"> - <a href="/projects"> - <Button>View More</Button> - </a> - </footer> - <Footer /> - </body> + .tagline { + font-weight: 300; + font-size: var(--f-u3); + line-height: 1.5; + } + + .content { + font-size: var(--f-u1); + line-height: 2.2; + } + </style> + </head> + <body> + <Nav /> + <header style={`background-image:url(${content.img})`} class="hero"> + <h1 class="title">{content.title}</h1> + </header> + <div class="leadIn"> + <div class="wrapper pt8 pb8 mb8 tac"> + {content.tags.map((t) => <span class="tag">{t}</span>)} + <h3 class="tagline">{content.description}</h3> + </div> + </div> + <div class="wrapper wrapper__readable"> + <div class="content"><slot /></div> + </div> + <footer class="tac mt6"> + <a href="/projects"> + <Button>View More</Button> + </a> + </footer> + <Footer /> + </body> </html> diff --git a/examples/portfolio-svelte/src/pages/404.astro b/examples/portfolio-svelte/src/pages/404.astro index e886c2514..b379c181b 100644 --- a/examples/portfolio-svelte/src/pages/404.astro +++ b/examples/portfolio-svelte/src/pages/404.astro @@ -2,19 +2,18 @@ import MainHead from '../components/MainHead.astro'; import Footer from '../components/Footer.svelte'; import Nav from '../components/Nav.svelte'; - --- <html lang="en"> - <head> - <MainHead title="Not Found" /> - </head> - <body> - <Nav /> - <div class="wrapper mt4 mb4"> - <h1>Page Not Found</h1> - <p>Not found</p> - </div> - <Footer /> - </body> + <head> + <MainHead title="Not Found" /> + </head> + <body> + <nav /> + <div class="wrapper mt4 mb4"> + <h1>Page Not Found</h1> + <p>Not found</p> + </div> + <footer /> + </body> </html> diff --git a/examples/portfolio-svelte/src/pages/about.astro b/examples/portfolio-svelte/src/pages/about.astro index 0d1375040..6ecb645d9 100644 --- a/examples/portfolio-svelte/src/pages/about.astro +++ b/examples/portfolio-svelte/src/pages/about.astro @@ -2,59 +2,58 @@ import MainHead from '../components/MainHead.astro'; import Footer from '../components/Footer.svelte'; import Nav from '../components/Nav.svelte'; - --- <html lang="en"> - <head> - <MainHead title="About | Jeanine White" description="About Jeanine White Lorem Ipsum" /> - <style lang="scss"> - .heroImg { - object-fit: cover; + <head> + <MainHead title="About | Jeanine White" description="About Jeanine White Lorem Ipsum" /> + <style lang="scss"> + .heroImg { + object-fit: cover; - img { - width: 100%; - height: 100%; - } - } + img { + width: 100%; + height: 100%; + } + } - .bio { - font-size: var(--f-u1); - line-height: 2; - } - </style> - </head> - <body> - <Nav /> - <div class="wrapper"> - <h1>About Jeanine</h1> - <div class="heroImg"> - <img width="1400" height="350" src="https://images.unsplash.com/photo-1581977012607-4091712d36f9?auto=format&fit=crop&w=1400&h=350&q=75" /> - </div> - <div class="bio wrapper wrapper__readable mt8"> - <p> - Cream cheese say cheese stinking bishop. Brie fondue hard cheese bocconcini feta camembert de normandie babybel airedale. Red leicester swiss manchego mascarpone pepper - jack airedale fromage frais ricotta. Cheese and biscuits cauliflower cheese boursin. - </p> - <p> - Pepper jack cheesy feet cheese slices. Halloumi port-salut queso caerphilly roquefort cheese slices cheesy feet rubber cheese. Cheese slices smelly cheese pecorino - macaroni cheese feta blue castello roquefort edam. Babybel pepper jack airedale cheddar fromage frais manchego. - </p> - <p> - Cauliflower cheese lancashire macaroni cheese. Cheeseburger babybel cheese on toast airedale cauliflower cheese who moved my cheese roquefort paneer. Stinking bishop - cheddar taleggio port-salut port-salut stinking bishop cheesy grin babybel. Blue castello feta everyone loves brie. - </p> - <p> - Goat squirty cheese cut the cheese. Cheese and wine cheddar fondue airedale cottage cheese camembert de normandie feta babybel. Rubber cheese melted cheese pecorino - port-salut fondue gouda cheese on toast cheesy feet. Feta edam everyone loves cheese strings camembert de normandie. - </p> - <p> - Caerphilly monterey jack goat. Squirty cheese cheesy grin hard cheese cheese strings cheese and biscuits croque monsieur smelly cheese danish fontina. Swiss cheese - triangles everyone loves mascarpone cheese on toast who moved my cheese lancashire cheeseburger. Fromage frais fromage frais cheese and biscuits stinking bishop - cauliflower cheese. - </p> - </div> - </div> - <Footer /> -</body> + .bio { + font-size: var(--f-u1); + line-height: 2; + } + </style> + </head> + <body> + <Nav /> + <div class="wrapper"> + <h1>About Jeanine</h1> + <div class="heroImg"> + <img width="1400" height="350" src="https://images.unsplash.com/photo-1581977012607-4091712d36f9?auto=format&fit=crop&w=1400&h=350&q=75" /> + </div> + <div class="bio wrapper wrapper__readable mt8"> + <p> + Cream cheese say cheese stinking bishop. Brie fondue hard cheese bocconcini feta camembert de normandie babybel airedale. Red leicester swiss manchego mascarpone pepper + jack airedale fromage frais ricotta. Cheese and biscuits cauliflower cheese boursin. + </p> + <p> + Pepper jack cheesy feet cheese slices. Halloumi port-salut queso caerphilly roquefort cheese slices cheesy feet rubber cheese. Cheese slices smelly cheese pecorino + macaroni cheese feta blue castello roquefort edam. Babybel pepper jack airedale cheddar fromage frais manchego. + </p> + <p> + Cauliflower cheese lancashire macaroni cheese. Cheeseburger babybel cheese on toast airedale cauliflower cheese who moved my cheese roquefort paneer. Stinking bishop + cheddar taleggio port-salut port-salut stinking bishop cheesy grin babybel. Blue castello feta everyone loves brie. + </p> + <p> + Goat squirty cheese cut the cheese. Cheese and wine cheddar fondue airedale cottage cheese camembert de normandie feta babybel. Rubber cheese melted cheese pecorino + port-salut fondue gouda cheese on toast cheesy feet. Feta edam everyone loves cheese strings camembert de normandie. + </p> + <p> + Caerphilly monterey jack goat. Squirty cheese cheesy grin hard cheese cheese strings cheese and biscuits croque monsieur smelly cheese danish fontina. Swiss cheese + triangles everyone loves mascarpone cheese on toast who moved my cheese lancashire cheeseburger. Fromage frais fromage frais cheese and biscuits stinking bishop + cauliflower cheese. + </p> + </div> + </div> + <Footer /> + </body> </html> diff --git a/examples/portfolio-svelte/src/pages/index.astro b/examples/portfolio-svelte/src/pages/index.astro index 60e8dc411..f2b76224e 100644 --- a/examples/portfolio-svelte/src/pages/index.astro +++ b/examples/portfolio-svelte/src/pages/index.astro @@ -13,235 +13,234 @@ const featuredProject = projects[0]; // Full Astro Component Syntax: // https://docs.astro.build/core-concepts/astro-components/ --- + <html lang="en"> - <head> - <MainHead title="Jeanine White: Personal Site" description="Jeanine White: Developer, Speaker, and Writer..." /> - <style lang="scss"> - $w-s: 750px; - - .hero { - position: relative; - overflow: hidden; - - @media (min-width: $w-s) { - height: 45vw; - } - } - - .img { - display: block; - width: 100%; - height: auto; - } - - .gradient, - .gradient2 { - background-image: url('/assets/mesh-gradient.jpg'); - background-size: cover; - pointer-events: none; - mix-blend-mode: screen; - width: 100%; - height: 100%; - position: absolute; - top: 0; - left: 0; - z-index: 2; - } - - .gradient2 { - mix-blend-mode: multiply; - background-size: cover; - } - - .overlay { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - z-index: 10; - display: flex; - flex-direction: column; - align-items: flex-start; - justify-content: center; - padding-left: 2rem; - - @media (min-width: $w-s) { - padding-left: 4rem; - } - } - - .title { - font-weight: 900; - font-size: var(--f-u8); - margin-bottom: 0.5rem; - margin-top: 0; - - @media (min-width: $w-s) { - font-size: var(--f-u12); - } - } - - .grid { - display: grid; - grid-gap: 2rem; - - @media (min-width: 1200px) { - grid-template-columns: 2fr 1fr; - } - } - - .sectionTitle { - font-weight: 700; - font-size: var(--f-u8); - margin-top: 4rem; - margin-bottom: 2rem; - } - - .role { - position: relative; - display: inline-block; - font-weight: 900; - color: var(--t-bg); - background-color: var(--t-fg); - padding: 0.25em 0.5em; - z-index: 2; - - @media (min-width: $w-s) { - font-size: var(--f-u3); - } - - + .role { - margin-left: 1em; - } - - &:nth-of-type(1) { - .invert { - background-color: var(--c-pink); - } - } - - &:nth-of-type(2) { - .invert { - background-color: var(--c-blue); - } - } - - &:nth-of-type(3) { - .invert { - background-color: var(--c-green); - } - } - - &:hover { - .invert { - clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); - } - } - } - - .invert { - position: absolute; - color: var(--t-fg); - display: flex; - align-items: center; - justify-content: center; - width: 100%; - height: 100%; - top: 0; - left: 0; - pointer-events: none; - clip-path: polygon(0% 100%, 100% 100%, 100% 200%, 0% 200%); - transition: clip-path cubic-bezier(0.4, 0, 0.5, 1) 150ms; - } - - .desc { - font-size: var(--f-u2); - margin-top: 1.5rem; - margin-bottom: 0; - } - - .subtitle { - display: block; - font-weight: 400; - font-size: var(--f-d6); - letter-spacing: -0.0625em; - } - - .bio { - line-height: 2; - margin-bottom: 2rem; - - > span:first-of-type { - line-height: 1; - margin-bottom: 0.5em; - display: block; - font-weight: 700; - font-size: var(--f-u4); - } - } - </style> - </head> - <body> - <Nav /> - <header class="hero"> - <img - width="1600" - height="1131" - class="img" - src="https://images.unsplash.com/photo-1469854523086-cc02fe5d8800?w=1200&q=75" - srcSet="https://images.unsplash.com/photo-1469854523086-cc02fe5d8800?w=1200&q=75 800w, + <head> + <MainHead title="Jeanine White: Personal Site" description="Jeanine White: Developer, Speaker, and Writer..." /> + <style lang="scss"> + $w-s: 750px; + + .hero { + position: relative; + overflow: hidden; + + @media (min-width: $w-s) { + height: 45vw; + } + } + + .img { + display: block; + width: 100%; + height: auto; + } + + .gradient, + .gradient2 { + background-image: url('/assets/mesh-gradient.jpg'); + background-size: cover; + pointer-events: none; + mix-blend-mode: screen; + width: 100%; + height: 100%; + position: absolute; + top: 0; + left: 0; + z-index: 2; + } + + .gradient2 { + mix-blend-mode: multiply; + background-size: cover; + } + + .overlay { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: 10; + display: flex; + flex-direction: column; + align-items: flex-start; + justify-content: center; + padding-left: 2rem; + + @media (min-width: $w-s) { + padding-left: 4rem; + } + } + + .title { + font-weight: 900; + font-size: var(--f-u8); + margin-bottom: 0.5rem; + margin-top: 0; + + @media (min-width: $w-s) { + font-size: var(--f-u12); + } + } + + .grid { + display: grid; + grid-gap: 2rem; + + @media (min-width: 1200px) { + grid-template-columns: 2fr 1fr; + } + } + + .sectionTitle { + font-weight: 700; + font-size: var(--f-u8); + margin-top: 4rem; + margin-bottom: 2rem; + } + + .role { + position: relative; + display: inline-block; + font-weight: 900; + color: var(--t-bg); + background-color: var(--t-fg); + padding: 0.25em 0.5em; + z-index: 2; + + @media (min-width: $w-s) { + font-size: var(--f-u3); + } + + + .role { + margin-left: 1em; + } + + &:nth-of-type(1) { + .invert { + background-color: var(--c-pink); + } + } + + &:nth-of-type(2) { + .invert { + background-color: var(--c-blue); + } + } + + &:nth-of-type(3) { + .invert { + background-color: var(--c-green); + } + } + + &:hover { + .invert { + clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); + } + } + } + + .invert { + position: absolute; + color: var(--t-fg); + display: flex; + align-items: center; + justify-content: center; + width: 100%; + height: 100%; + top: 0; + left: 0; + pointer-events: none; + clip-path: polygon(0% 100%, 100% 100%, 100% 200%, 0% 200%); + transition: clip-path cubic-bezier(0.4, 0, 0.5, 1) 150ms; + } + + .desc { + font-size: var(--f-u2); + margin-top: 1.5rem; + margin-bottom: 0; + } + + .subtitle { + display: block; + font-weight: 400; + font-size: var(--f-d6); + letter-spacing: -0.0625em; + } + + .bio { + line-height: 2; + margin-bottom: 2rem; + + > span:first-of-type { + line-height: 1; + margin-bottom: 0.5em; + display: block; + font-weight: 700; + font-size: var(--f-u4); + } + } + </style> + </head> + <body> + <Nav /> + <header class="hero"> + <img + width="1600" + height="1131" + class="img" + src="https://images.unsplash.com/photo-1469854523086-cc02fe5d8800?w=1200&q=75" + srcSet="https://images.unsplash.com/photo-1469854523086-cc02fe5d8800?w=1200&q=75 800w, https://images.unsplash.com/photo-1469854523086-cc02fe5d8800?w=1200&q=75 1200w, https://images.unsplash.com/photo-1469854523086-cc02fe5d8800?w=1600&q=75 1600w, https://images.unsplash.com/photo-1469854523086-cc02fe5d8800?w=2400&q=75 2400w," - sizes="(max-width: 800px) 800px, (max-width: 1200px) 1200px, (max-width: 1600px) 1600px, (max-width: 2400px) 2400px, 1200px" - /> - <div class="gradient" /> - <div class="gradient2" /> - <div class="overlay"> - <h1 class="title"> - <small class="subtitle">The personal site of </small>Jeanine White - </h1> - <div> - <span class="role"> - 👩💻 Developer <span class="invert">👩💻 Developer</span> - </span> - <span class="role"> - 🎤 Speaker <span class="invert">🎤 Speaker</span> - </span> - <span class="role"> - ✏️ Writer <span class="invert">✏️ Writer</span> - </span> - </div> - <p class="desc">Lover of dogs, roadtrips, and poetry.</p> - </div> - </header> - <main class="wrapper mt4 mb4"> - <div class="grid"> - <div class="section"> - <h3 class="sectionTitle">Selected Work</h3> - <PortfolioPreview project={featuredProject} /> - <div class="tac mt4"> - <a href="/projects"> - <Button>View All</Button> - </a> - </div> - </div> - <div class="section"> - <h3 class="sectionTitle">About me</h3> - <p class="bio"> - <span>Hello!</span> I’m Jeanine, and this is my website. It was made using{' '} - <a href="https://github.com/withastro/astro" target="_blank" rel="nofollow"> - Astro - </a> - , a new way to build static sites. This is just an example template for you to modify. - </p> - <p> - <a href="/about">Read more</a> - </p> - </div> - </div> - </main> - <Footer /> - </body> + sizes="(max-width: 800px) 800px, (max-width: 1200px) 1200px, (max-width: 1600px) 1600px, (max-width: 2400px) 2400px, 1200px" + /> + <div class="gradient"></div> + <div class="gradient2"></div> + <div class="overlay"> + <h1 class="title"> + <small class="subtitle">The personal site of </small>Jeanine White + </h1> + <div> + <span class="role"> + 👩💻 Developer <span class="invert">👩💻 Developer</span> + </span> + <span class="role"> + 🎤 Speaker <span class="invert">🎤 Speaker</span> + </span> + <span class="role"> + ✏️ Writer <span class="invert">✏️ Writer</span> + </span> + </div> + <p class="desc">Lover of dogs, roadtrips, and poetry.</p> + </div> + </header> + <main class="wrapper mt4 mb4"> + <div class="grid"> + <div class="section"> + <h3 class="sectionTitle">Selected Work</h3> + <PortfolioPreview project={featuredProject} /> + <div class="tac mt4"> + <a href="/projects"> + <Button>View All</Button> + </a> + </div> + </div> + <div class="section"> + <h3 class="sectionTitle">About me</h3> + <p class="bio"> + <span>Hello!</span> I’m Jeanine, and this is my website. It was made using{' '} + <a href="https://github.com/withastro/astro" target="_blank" rel="nofollow"> Astro </a> + , a new way to build static sites. This is just an example template for you to modify. + </p> + <p> + <a href="/about">Read more</a> + </p> + </div> + </div> + </main> + <Footer /> + </body> </html> diff --git a/examples/portfolio-svelte/src/pages/projects.astro b/examples/portfolio-svelte/src/pages/projects.astro index 0c639a13d..dea004128 100644 --- a/examples/portfolio-svelte/src/pages/projects.astro +++ b/examples/portfolio-svelte/src/pages/projects.astro @@ -5,34 +5,32 @@ import Nav from '../components/Nav.svelte'; import PortfolioPreview from '../components/PortfolioPreview.svelte'; interface MarkdownFrontmatter { - publishDate: number; + publishDate: number; } const projects = Astro.fetchContent<MarkdownFrontmatter>('./project/**/*.md') - .filter(({ publishDate }) => !!publishDate) - .sort((a, b) => new Date(b.publishDate).valueOf() - new Date(a.publishDate).valueOf()); + .filter(({ publishDate }) => !!publishDate) + .sort((a, b) => new Date(b.publishDate).valueOf() - new Date(a.publishDate).valueOf()); --- <html lang="en"> - <head> - <MainHead title="All Projects | Jeanine White" description="Learn about Jenine White's most recent projects" /> - <style lang="scss"> - .grid { - display: grid; - grid-gap: 3rem; - } - </style> - </head> - <body> - <Nav /> - <div class="wrapper"> - <h1 class="title mt4 mb4">All Projects</h1> - <div class="grid"> - {projects.map((project) => ( - <PortfolioPreview project={project} /> - ))} - </div> - </div> - <Footer /> - </body> + <head> + <MainHead title="All Projects | Jeanine White" description="Learn about Jenine White's most recent projects" /> + <style lang="scss"> + .grid { + display: grid; + grid-gap: 3rem; + } + </style> + </head> + <body> + <Nav /> + <div class="wrapper"> + <h1 class="title mt4 mb4">All Projects</h1> + <div class="grid"> + {projects.map((project) => <PortfolioPreview project={project} />)} + </div> + </div> + <Footer /> + </body> </html> diff --git a/examples/portfolio-svelte/src/styles/global.scss b/examples/portfolio-svelte/src/styles/global.scss index b5a95caf2..453adadbe 100644 --- a/examples/portfolio-svelte/src/styles/global.scss +++ b/examples/portfolio-svelte/src/styles/global.scss @@ -1,83 +1,83 @@ // Tokens :root { - // (c)olor - --c-black: #05091e; - --c-blue: #46b4ff; - --c-gray: #90aab7; - --c-green: #9ef2cb; - --c-pink: #ffb8d9; - --c-orange: #ffb7a3; - --c-yellow: #ffdace; - --c-white: #fff; + // (c)olor + --c-black: #05091e; + --c-blue: #46b4ff; + --c-gray: #90aab7; + --c-green: #9ef2cb; + --c-pink: #ffb8d9; + --c-orange: #ffb7a3; + --c-yellow: #ffdace; + --c-white: #fff; - // (f)ont - --f-u18: 11.390625em; - --f-u17: 9.950627481136905em; - --f-u16: 8.692673779389363em; - --f-u15: 7.59375em; - --f-u14: 6.63375165409127em; - --f-u13: 5.795115852926242em; - --f-u12: 5.0625em; - --f-u11: 4.422501102727513em; - --f-u10: 3.8634105686174953em; - --f-u9: 3.375em; - --f-u8: 2.9483340684850083em; - --f-u7: 2.575607045744997em; - --f-u6: 2.25em; - --f-u5: 1.9655560456566725em; - --f-u4: 1.7170713638299977em; - --f-u3: 1.5em; - --f-u2: 1.3103706971044482em; - --f-u1: 1.1447142425533319em; - --f-d1: 0.8735804647362989em; - --f-d2: 0.7631428283688879em; - --f-d3: 0.6666666666666666em; - --f-d4: 0.5823869764908659em; - --f-d5: 0.5087618855792586em; - --f-d6: 0.4444444444444444em; - --f-d7: 0.3882579843272439em; - --f-d8: 0.3391745903861724em; - --f-d9: 0.2962962962962963em; - --f-d10: 0.2588386562181626em; - --f-d11: 0.22611639359078162em; - --f-d12: 0.19753086419753085em; - --f-d13: 0.17255910414544176em; - --f-d14: 0.15074426239385438em; - --f-d15: 0.13168724279835392em; - --f-d16: 0.11503940276362785em; - --f-d17: 0.10049617492923625em; - --f-d18: 0.0877914951989026em; + // (f)ont + --f-u18: 11.390625em; + --f-u17: 9.950627481136905em; + --f-u16: 8.692673779389363em; + --f-u15: 7.59375em; + --f-u14: 6.63375165409127em; + --f-u13: 5.795115852926242em; + --f-u12: 5.0625em; + --f-u11: 4.422501102727513em; + --f-u10: 3.8634105686174953em; + --f-u9: 3.375em; + --f-u8: 2.9483340684850083em; + --f-u7: 2.575607045744997em; + --f-u6: 2.25em; + --f-u5: 1.9655560456566725em; + --f-u4: 1.7170713638299977em; + --f-u3: 1.5em; + --f-u2: 1.3103706971044482em; + --f-u1: 1.1447142425533319em; + --f-d1: 0.8735804647362989em; + --f-d2: 0.7631428283688879em; + --f-d3: 0.6666666666666666em; + --f-d4: 0.5823869764908659em; + --f-d5: 0.5087618855792586em; + --f-d6: 0.4444444444444444em; + --f-d7: 0.3882579843272439em; + --f-d8: 0.3391745903861724em; + --f-d9: 0.2962962962962963em; + --f-d10: 0.2588386562181626em; + --f-d11: 0.22611639359078162em; + --f-d12: 0.19753086419753085em; + --f-d13: 0.17255910414544176em; + --f-d14: 0.15074426239385438em; + --f-d15: 0.13168724279835392em; + --f-d16: 0.11503940276362785em; + --f-d17: 0.10049617492923625em; + --f-d18: 0.0877914951989026em; - // (t)heme - --t-fg: var(--c-black); - --t-bg: var(--c-white); - --t-subdue: var(--c-gray); - --t-active: var(--c-blue); + // (t)heme + --t-fg: var(--c-black); + --t-bg: var(--c-white); + --t-subdue: var(--c-gray); + --t-active: var(--c-blue); } // Base body { - margin: 0; - color: var(--t-fg); - font-family: 'Inter', 'system-ui', sans-serif; + margin: 0; + color: var(--t-fg); + font-family: 'Inter', 'system-ui', sans-serif; } * { - box-sizing: content-box; + box-sizing: content-box; } img { - max-width: 100%; - height: auto; + max-width: 100%; + height: auto; } a { - color: var(--t-active); + color: var(--t-active); } h1 { - font-size: var(--f-u8); + font-size: var(--f-u8); } // Utils @@ -85,79 +85,79 @@ h1 { // color $colors: 'black', 'blue', 'white'; @each $color in $colors { - // text color - .tc-#{$color} { - color: var(--c-#{color}); - } - // background color - .bg-#{$color} { - background-color: var(--c-#{color}); - } + // text color + .tc-#{$color} { + color: var(--c-#{color}); + } + // background color + .bg-#{$color} { + background-color: var(--c-#{color}); + } } // font size @for $i from 0 through 18 { - .f-u#{$i} { - font-size: var(--f-u#{$i}); - } - .f-d#{$i} { - font-size: var(--f-d#{$i}); - } + .f-u#{$i} { + font-size: var(--f-u#{$i}); + } + .f-d#{$i} { + font-size: var(--f-d#{$i}); + } } // margin & padding @for $i from 0 through 36 { - .ma#{$i} { - margin: #{0.5 * $i}rem; - } - .mt#{$i} { - margin-top: #{0.5 * $i}rem; - } - .mr#{$i} { - margin-right: #{0.5 * $i}rem; - } - .mb#{$i} { - margin-bottom: #{0.5 * $i}rem; - } - .ml#{$i} { - margin-left: #{0.5 * $i}rem; - } - .pa#{$i} { - padding: #{0.5 * $i}rem; - } - .pt#{$i} { - padding-top: #{0.5 * $i}rem; - } - .pr#{$i} { - padding-right: #{0.5 * $i}rem; - } - .pb#{$i} { - padding-bottom: #{0.5 * $i}rem; - } - .pl#{$i} { - padding-left: #{0.5 * $i}rem; - } + .ma#{$i} { + margin: #{0.5 * $i}rem; + } + .mt#{$i} { + margin-top: #{0.5 * $i}rem; + } + .mr#{$i} { + margin-right: #{0.5 * $i}rem; + } + .mb#{$i} { + margin-bottom: #{0.5 * $i}rem; + } + .ml#{$i} { + margin-left: #{0.5 * $i}rem; + } + .pa#{$i} { + padding: #{0.5 * $i}rem; + } + .pt#{$i} { + padding-top: #{0.5 * $i}rem; + } + .pr#{$i} { + padding-right: #{0.5 * $i}rem; + } + .pb#{$i} { + padding-bottom: #{0.5 * $i}rem; + } + .pl#{$i} { + padding-left: #{0.5 * $i}rem; + } } // text align .tac { - text-align: center; + text-align: center; } .tal { - text-align: left; + text-align: left; } .tar { - text-align: right; + text-align: right; } // wrapper .wrapper { - max-width: 80em; - margin-left: auto; - margin-right: auto; - padding-left: 2rem; - padding-right: 2rem; + max-width: 80em; + margin-left: auto; + margin-right: auto; + padding-left: 2rem; + padding-right: 2rem; } .wrapper__readable { - max-width: 50em; + max-width: 50em; } diff --git a/examples/portfolio/astro.config.mjs b/examples/portfolio/astro.config.mjs index 68499b3fa..a1516f292 100644 --- a/examples/portfolio/astro.config.mjs +++ b/examples/portfolio/astro.config.mjs @@ -8,6 +8,6 @@ // @ts-check export default /** @type {import('astro').AstroUserConfig} */ ({ - // Enable the Preact renderer to support Preact JSX components. - renderers: ['@astrojs/renderer-preact'], + // Enable the Preact renderer to support Preact JSX components. + renderers: ['@astrojs/renderer-preact'], }); diff --git a/examples/portfolio/src/components/Button/index.jsx b/examples/portfolio/src/components/Button/index.jsx index 0e1b6a4c8..d8e04aa71 100644 --- a/examples/portfolio/src/components/Button/index.jsx +++ b/examples/portfolio/src/components/Button/index.jsx @@ -2,7 +2,7 @@ import { h } from 'preact'; import Styles from './styles.module.scss'; function Button({ children }) { - return <span className={Styles.button}>{children}</span>; + return <span className={Styles.button}>{children}</span>; } export default Button; diff --git a/examples/portfolio/src/components/Button/styles.module.scss b/examples/portfolio/src/components/Button/styles.module.scss index 67a343bdf..f0e39df3f 100644 --- a/examples/portfolio/src/components/Button/styles.module.scss +++ b/examples/portfolio/src/components/Button/styles.module.scss @@ -1,7 +1,7 @@ .button { - display: inline-block; - border: 3px solid currentColor; - padding: 0.5em 1em; - font-weight: 700; - text-transform: uppercase; + display: inline-block; + border: 3px solid currentColor; + padding: 0.5em 1em; + font-weight: 700; + text-transform: uppercase; } diff --git a/examples/portfolio/src/components/Footer/index.jsx b/examples/portfolio/src/components/Footer/index.jsx index 8e15a2d8e..42953c367 100644 --- a/examples/portfolio/src/components/Footer/index.jsx +++ b/examples/portfolio/src/components/Footer/index.jsx @@ -2,11 +2,11 @@ import { h } from 'preact'; import Styles from './styles.module.scss'; function Footer() { - return ( - <footer className={Styles.footer}> - © {new Date().getFullYear()} Jeanine White - <small className={Styles.byline}>🚀 Built by Astro</small> - </footer> - ); + return ( + <footer className={Styles.footer}> + © {new Date().getFullYear()} Jeanine White + <small className={Styles.byline}>🚀 Built by Astro</small> + </footer> + ); } export default Footer; diff --git a/examples/portfolio/src/components/Footer/styles.module.scss b/examples/portfolio/src/components/Footer/styles.module.scss index 0e77ee206..9e76a6a2f 100644 --- a/examples/portfolio/src/components/Footer/styles.module.scss +++ b/examples/portfolio/src/components/Footer/styles.module.scss @@ -1,15 +1,15 @@ .footer { - text-align: center; - padding-top: 8rem; - padding-right: 2rem; - padding-bottom: 4rem; - padding-left: 2rem; + text-align: center; + padding-top: 8rem; + padding-right: 2rem; + padding-bottom: 4rem; + padding-left: 2rem; } .byline { - display: block; - margin-top: 1rem; - color: var(--t-subdue); - font-size: var(--f-d2); - text-transform: uppercase; + display: block; + margin-top: 1rem; + color: var(--t-subdue); + font-size: var(--f-d2); + text-transform: uppercase; } diff --git a/examples/portfolio/src/components/MainHead.astro b/examples/portfolio/src/components/MainHead.astro index ae2eb1d1f..0597b178f 100644 --- a/examples/portfolio/src/components/MainHead.astro +++ b/examples/portfolio/src/components/MainHead.astro @@ -2,12 +2,12 @@ const { title = 'Jeanine White: Personal Site', description = 'The personal site of Jeanine White' } = Astro.props; --- -<meta charset="UTF-8"> -<meta name="description" property="og:description" content={description}> -<meta name="viewport" content="width=device-width"> +<meta charset="UTF-8" /> +<meta name="description" property="og:description" content={description} /> +<meta name="viewport" content="width=device-width" /> <title>{title}</title> <link rel="icon" type="image/x-icon" href="/favicon.ico" /> -<link rel="stylesheet" type="text/css" href={Astro.resolve('../styles/global.scss')}> -<link rel="preconnect" href="https://fonts.gstatic.com"> -<link href="https://fonts.googleapis.com/css2?family=Inter:wght@200;400;700;900&display=swap" rel="stylesheet"> +<link rel="stylesheet" type="text/css" href={Astro.resolve('../styles/global.scss')} /> +<link rel="preconnect" href="https://fonts.gstatic.com" /> +<link href="https://fonts.googleapis.com/css2?family=Inter:wght@200;400;700;900&display=swap" rel="stylesheet" /> diff --git a/examples/portfolio/src/components/Nav/index.jsx b/examples/portfolio/src/components/Nav/index.jsx index da0914fd1..d74961d6d 100644 --- a/examples/portfolio/src/components/Nav/index.jsx +++ b/examples/portfolio/src/components/Nav/index.jsx @@ -2,34 +2,34 @@ import { h } from 'preact'; import Styles from './styles.module.scss'; function Nav() { - return ( - <nav className={Styles.nav}> - <a className={Styles.logolink} href="/"> - <div className={Styles.monogram}>JW</div> - </a> - <a className={Styles.link} href="/projects"> - Portfolio - </a> - <a className={Styles.link} href="/about"> - About - </a> - <a className={Styles.social} href="https://twitter.com/me"> - <svg className={Styles.socialicon} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"> - <path d="M5.026 15c6.038 0 9.341-5.003 9.341-9.334 0-.14 0-.282-.006-.422A6.685 6.685 0 0 0 16 3.542a6.658 6.658 0 0 1-1.889.518 3.301 3.301 0 0 0 1.447-1.817 6.533 6.533 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.325 9.325 0 0 1-6.767-3.429 3.289 3.289 0 0 0 1.018 4.382A3.323 3.323 0 0 1 .64 6.575v.045a3.288 3.288 0 0 0 2.632 3.218 3.203 3.203 0 0 1-.865.115 3.23 3.23 0 0 1-.614-.057 3.283 3.283 0 0 0 3.067 2.277A6.588 6.588 0 0 1 .78 13.58a6.32 6.32 0 0 1-.78-.045A9.344 9.344 0 0 0 5.026 15z" /> - </svg> - </a> - <a className={Styles.social} href="https://github.com/me"> - <svg className={Styles.socialicon} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"> - <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z" /> - </svg> - </a> - <a className={Styles.social} href="https://dev.to/me"> - <svg className={Styles.socialicon} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 40" style="enable-background:new 0 0 50 40" xmlSpace="preserve"> - <path d="M15.7 15.5c-.4-.3-.7-.4-1.1-.4h-1.7v10.1h1.7c.4 0 .8-.1 1.1-.4.4-.3.6-.7.6-1.3v-6.7c0-.6-.2-1-.6-1.3z" /> - <path d="M47 0H3C1.3 0 0 1.3 0 3v34c0 1.7 1.3 3 3 3h44c1.7 0 3-1.3 3-3V3c0-1.7-1.3-3-3-3zM19.1 23.5c0 1.3-.4 2.4-1.3 3.2-.8.9-1.9 1.3-3.3 1.3h-4.4V12.3h4.5c1.3 0 2.4.4 3.2 1.3.8.8 1.3 1.9 1.3 3.2v6.7zm9.1-8.4h-5.1v3.6h3.1v2.8h-3.1v3.7h5.1V28h-5.9c-.6 0-1-.2-1.4-.6-.4-.4-.6-.8-.6-1.4V14.2c0-.6.2-1 .6-1.4.4-.4.8-.6 1.4-.6h5.9v2.9zM37.5 26c-.6 1.3-1.3 2-2.2 2-.9 0-1.7-.7-2.2-2l-3.7-13.8h3.1L35.3 23l2.8-10.8h3.1L37.5 26z" /> - </svg> - </a> - </nav> - ); + return ( + <nav className={Styles.nav}> + <a className={Styles.logolink} href="/"> + <div className={Styles.monogram}>JW</div> + </a> + <a className={Styles.link} href="/projects"> + Portfolio + </a> + <a className={Styles.link} href="/about"> + About + </a> + <a className={Styles.social} href="https://twitter.com/me"> + <svg className={Styles.socialicon} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"> + <path d="M5.026 15c6.038 0 9.341-5.003 9.341-9.334 0-.14 0-.282-.006-.422A6.685 6.685 0 0 0 16 3.542a6.658 6.658 0 0 1-1.889.518 3.301 3.301 0 0 0 1.447-1.817 6.533 6.533 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.325 9.325 0 0 1-6.767-3.429 3.289 3.289 0 0 0 1.018 4.382A3.323 3.323 0 0 1 .64 6.575v.045a3.288 3.288 0 0 0 2.632 3.218 3.203 3.203 0 0 1-.865.115 3.23 3.23 0 0 1-.614-.057 3.283 3.283 0 0 0 3.067 2.277A6.588 6.588 0 0 1 .78 13.58a6.32 6.32 0 0 1-.78-.045A9.344 9.344 0 0 0 5.026 15z" /> + </svg> + </a> + <a className={Styles.social} href="https://github.com/me"> + <svg className={Styles.socialicon} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"> + <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z" /> + </svg> + </a> + <a className={Styles.social} href="https://dev.to/me"> + <svg className={Styles.socialicon} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 40" style="enable-background:new 0 0 50 40" xmlSpace="preserve"> + <path d="M15.7 15.5c-.4-.3-.7-.4-1.1-.4h-1.7v10.1h1.7c.4 0 .8-.1 1.1-.4.4-.3.6-.7.6-1.3v-6.7c0-.6-.2-1-.6-1.3z" /> + <path d="M47 0H3C1.3 0 0 1.3 0 3v34c0 1.7 1.3 3 3 3h44c1.7 0 3-1.3 3-3V3c0-1.7-1.3-3-3-3zM19.1 23.5c0 1.3-.4 2.4-1.3 3.2-.8.9-1.9 1.3-3.3 1.3h-4.4V12.3h4.5c1.3 0 2.4.4 3.2 1.3.8.8 1.3 1.9 1.3 3.2v6.7zm9.1-8.4h-5.1v3.6h3.1v2.8h-3.1v3.7h5.1V28h-5.9c-.6 0-1-.2-1.4-.6-.4-.4-.6-.8-.6-1.4V14.2c0-.6.2-1 .6-1.4.4-.4.8-.6 1.4-.6h5.9v2.9zM37.5 26c-.6 1.3-1.3 2-2.2 2-.9 0-1.7-.7-2.2-2l-3.7-13.8h3.1L35.3 23l2.8-10.8h3.1L37.5 26z" /> + </svg> + </a> + </nav> + ); } export default Nav; diff --git a/examples/portfolio/src/components/Nav/styles.module.scss b/examples/portfolio/src/components/Nav/styles.module.scss index d39a65a5b..ecbe5585e 100644 --- a/examples/portfolio/src/components/Nav/styles.module.scss +++ b/examples/portfolio/src/components/Nav/styles.module.scss @@ -1,65 +1,65 @@ .nav { - display: flex; - align-items: center; - padding-top: 1rem; - padding-right: 2rem; - padding-bottom: 1rem; - padding-left: 2rem; + display: flex; + align-items: center; + padding-top: 1rem; + padding-right: 2rem; + padding-bottom: 1rem; + padding-left: 2rem; } .logolink { - display: block; - color: var(--t-fg); - text-decoration: none; + display: block; + color: var(--t-fg); + text-decoration: none; } .link { - color: var(--t-subdue); - display: block; - margin-left: 1rem; - text-decoration: none; - font-size: var(--f-d1); - text-transform: uppercase; - padding-top: 0.75em; - padding-bottom: 0.75em; + color: var(--t-subdue); + display: block; + margin-left: 1rem; + text-decoration: none; + font-size: var(--f-d1); + text-transform: uppercase; + padding-top: 0.75em; + padding-bottom: 0.75em; - &:focus, - &:hover { - color: var(--t-active); - } + &:focus, + &:hover { + color: var(--t-active); + } } .monogram { - display: flex; - align-items: center; - justify-content: center; - width: 2em; - height: 2em; - margin-right: 0.5rem; - color: var(--c-black); - font-weight: 900; - letter-spacing: -0.125rem; - border: 3px solid currentColor; - border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + width: 2em; + height: 2em; + margin-right: 0.5rem; + color: var(--c-black); + font-weight: 900; + letter-spacing: -0.125rem; + border: 3px solid currentColor; + border-radius: 50%; } .social { - display: block; - margin-left: auto; + display: block; + margin-left: auto; - + .social { - margin-left: 0.75rem; - } + + .social { + margin-left: 0.75rem; + } } .socialicon { - display: block; - width: 1.25rem; - height: 1.25rem; - fill: var(--t-subdue); - transition: fill linear 150ms; + display: block; + width: 1.25rem; + height: 1.25rem; + fill: var(--t-subdue); + transition: fill linear 150ms; - &:hover { - fill: var(--t-active); - } + &:hover { + fill: var(--t-active); + } } diff --git a/examples/portfolio/src/components/PortfolioPreview/index.jsx b/examples/portfolio/src/components/PortfolioPreview/index.jsx index 7918008c6..6957e5884 100644 --- a/examples/portfolio/src/components/PortfolioPreview/index.jsx +++ b/examples/portfolio/src/components/PortfolioPreview/index.jsx @@ -2,27 +2,27 @@ import { h } from 'preact'; import Styles from './styles.module.scss'; function PortfolioPreview({ project }) { - return ( - <div className={Styles.card}> - <div className={Styles.titleCard} style={`background-image:url(${project.img})`}> - <h1 className={Styles.title}>{project.title}</h1> - </div> - <div className="pa3"> - <p className={`${Styles.desc} mt0 mb2`}>{project.description}</p> - <div className={Styles.tags}> - Tagged: - {project.tags.map((t) => ( - <div className={Styles.tag} data-tag={t}> - {t} - </div> - ))} - </div> - <a className={Styles.link} href={project.url}> - <span className={Styles.linkInner}>View</span> - </a> - </div> - </div> - ); + return ( + <div className={Styles.card}> + <div className={Styles.titleCard} style={`background-image:url(${project.img})`}> + <h1 className={Styles.title}>{project.title}</h1> + </div> + <div className="pa3"> + <p className={`${Styles.desc} mt0 mb2`}>{project.description}</p> + <div className={Styles.tags}> + Tagged: + {project.tags.map((t) => ( + <div className={Styles.tag} data-tag={t}> + {t} + </div> + ))} + </div> + <a className={Styles.link} href={project.url}> + <span className={Styles.linkInner}>View</span> + </a> + </div> + </div> + ); } export default PortfolioPreview; diff --git a/examples/portfolio/src/components/PortfolioPreview/styles.module.scss b/examples/portfolio/src/components/PortfolioPreview/styles.module.scss index ce169c2fc..bded61547 100644 --- a/examples/portfolio/src/components/PortfolioPreview/styles.module.scss +++ b/examples/portfolio/src/components/PortfolioPreview/styles.module.scss @@ -1,102 +1,102 @@ .card { - position: relative; - color: var(--t-bg); - background: var(--t-fg); - border: 1px solid #f0f0f0; + position: relative; + color: var(--t-bg); + background: var(--t-fg); + border: 1px solid #f0f0f0; } .title { - position: absolute; - top: 0; - width: 100%; - height: 100%; - display: flex; - align-items: center; - justify-content: center; - margin: 0; - color: white; - flex-direction: column; - font-size: var(--f-u4); - font-weight: 900; - text-transform: uppercase; - letter-spacing: 0.0625em; + position: absolute; + top: 0; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + margin: 0; + color: white; + flex-direction: column; + font-size: var(--f-u4); + font-weight: 900; + text-transform: uppercase; + letter-spacing: 0.0625em; } .titleCard { - position: relative; - background-size: cover; - background-position: 50% 100%; - padding-top: 37.5%; + position: relative; + background-size: cover; + background-position: 50% 100%; + padding-top: 37.5%; } .desc { - font-size: var(--f-u1); - line-height: 1.4; + font-size: var(--f-u1); + line-height: 1.4; } .link { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - color: var(--t-bg); - font-size: var(--f-u2); - font-weight: 700; - background: rgba(0, 0, 0, 0.25); - opacity: 0; - text-decoration: none; - text-transform: uppercase; - transition: opacity 150ms linear; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + color: var(--t-bg); + font-size: var(--f-u2); + font-weight: 700; + background: rgba(0, 0, 0, 0.25); + opacity: 0; + text-decoration: none; + text-transform: uppercase; + transition: opacity 150ms linear; - &:focus, - &:hover { - opacity: 1; + &:focus, + &:hover { + opacity: 1; - .linkInner { - transform: translateY(0); - border-color: rgba(255, 255, 255, 0.625); - } - } + .linkInner { + transform: translateY(0); + border-color: rgba(255, 255, 255, 0.625); + } + } } .linkInner { - padding: 0.375em 1em; - border: 2px solid rgba(255, 255, 255, 0); - transition: transform 300ms cubic-bezier(0, 0.4, 0.6, 1), border-color 1s linear; - transform: translateY(25%); + padding: 0.375em 1em; + border: 2px solid rgba(255, 255, 255, 0); + transition: transform 300ms cubic-bezier(0, 0.4, 0.6, 1), border-color 1s linear; + transform: translateY(25%); } .nav { - display: flex; - justify-content: flex-end; + display: flex; + justify-content: flex-end; } .tags { - font-size: var(--f-d2); - text-transform: uppercase; + font-size: var(--f-d2); + text-transform: uppercase; } .tag { - display: inline-block; - color: var(--c-yellow); - text-transform: uppercase; - margin-left: 0.5em; + display: inline-block; + color: var(--c-yellow); + text-transform: uppercase; + margin-left: 0.5em; - &:nth-of-type(1n) { - color: var(--c-green); - } - &:nth-of-type(2n) { - color: var(--c-orange); - } - &:nth-of-type(3n) { - color: var(--c-blue); - } - &:nth-of-type(4n) { - color: var(--c-pink); - } + &:nth-of-type(1n) { + color: var(--c-green); + } + &:nth-of-type(2n) { + color: var(--c-orange); + } + &:nth-of-type(3n) { + color: var(--c-blue); + } + &:nth-of-type(4n) { + color: var(--c-pink); + } } diff --git a/examples/portfolio/src/layouts/project.astro b/examples/portfolio/src/layouts/project.astro index 6ad043a4e..aba14a5ac 100644 --- a/examples/portfolio/src/layouts/project.astro +++ b/examples/portfolio/src/layouts/project.astro @@ -6,87 +6,86 @@ import Nav from '../components/Nav/index.jsx'; const { content } = Astro.props; --- -<html lang={ content.lang || 'en' }> - <head> - <MainHead title={content.title} description={content.description} /> - <style lang="scss"> - .hero { - padding: 8rem; - display: flex; - background-color: var(--t-fg); - background-repeat: no-repeat; - background-size: cover; - min-height: 25vw; - color: white; - flex-direction: column; - align-items: center; - justify-content: center; - } - .tag { - margin-left: 0.5em; - margin-right: 0.5em; - text-transform: uppercase; +<html lang={content.lang || 'en'}> + <head> + <MainHead title={content.title} description={content.description} /> + <style lang="scss"> + .hero { + padding: 8rem; + display: flex; + background-color: var(--t-fg); + background-repeat: no-repeat; + background-size: cover; + min-height: 25vw; + color: white; + flex-direction: column; + align-items: center; + justify-content: center; + } - &:nth-of-type(1n) { - color: var(--c-green); - } - &:nth-of-type(2n) { - color: var(--c-orange); - } - &:nth-of-type(3n) { - color: var(--c-blue); - } - &:nth-of-type(4n) { - color: var(--c-pink); - } - } + .tag { + margin-left: 0.5em; + margin-right: 0.5em; + text-transform: uppercase; - .title { - font-size: var(--f-u10); - font-weight: 900; - text-transform: uppercase; - letter-spacing: 0.0625em; - } + &:nth-of-type(1n) { + color: var(--c-green); + } + &:nth-of-type(2n) { + color: var(--c-orange); + } + &:nth-of-type(3n) { + color: var(--c-blue); + } + &:nth-of-type(4n) { + color: var(--c-pink); + } + } - .leadIn { - color: var(--t-bg); - background-color: var(--t-fg); - } + .title { + font-size: var(--f-u10); + font-weight: 900; + text-transform: uppercase; + letter-spacing: 0.0625em; + } - .tagline { - font-weight: 300; - font-size: var(--f-u3); - line-height: 1.5; - } + .leadIn { + color: var(--t-bg); + background-color: var(--t-fg); + } - .content { - font-size: var(--f-u1); - line-height: 2.2; - } - </style> - </head> - <body> - <Nav /> - <header style={`background-image:url(${content.img})`} class="hero"> - <h1 class="title">{content.title}</h1> - </header> - <div class="leadIn"> - <div class="wrapper pt8 pb8 mb8 tac"> - {content.tags.map((t) => ( - <span class="tag">{t}</span> - ))} - <h3 class="tagline">{content.description}</h3> - </div> - </div> - <div class="wrapper wrapper__readable"> - <div class="content"><slot></slot></div> - </div> - <footer class="tac mt6"> - <a href="/projects"> - <Button>View More</Button> - </a> - </footer> - <Footer /> - </body> + .tagline { + font-weight: 300; + font-size: var(--f-u3); + line-height: 1.5; + } + + .content { + font-size: var(--f-u1); + line-height: 2.2; + } + </style> + </head> + <body> + <Nav /> + <header style={`background-image:url(${content.img})`} class="hero"> + <h1 class="title">{content.title}</h1> + </header> + <div class="leadIn"> + <div class="wrapper pt8 pb8 mb8 tac"> + {content.tags.map((t) => <span class="tag">{t}</span>)} + <h3 class="tagline">{content.description}</h3> + </div> + </div> + <div class="wrapper wrapper__readable"> + <div class="content"><slot /></div> + </div> + <footer class="tac mt6"> + <a href="/projects"> + <Button>View More</Button> + </a> + </footer> + <Footer /> + </body> </html> diff --git a/examples/portfolio/src/pages/404.astro b/examples/portfolio/src/pages/404.astro index 48ec8d310..39f5994ae 100644 --- a/examples/portfolio/src/pages/404.astro +++ b/examples/portfolio/src/pages/404.astro @@ -2,19 +2,18 @@ import MainHead from '../components/MainHead.astro'; import Footer from '../components/Footer/index.jsx'; import Nav from '../components/Nav/index.jsx'; - --- <html lang="en"> - <head> - <MainHead title="Not Found" /> - </head> - <body> - <Nav /> - <div class="wrapper mt4 mb4"> - <h1>Page Not Found</h1> - <p>Not found</p> - </div> - <Footer /> - </body> + <head> + <MainHead title="Not Found" /> + </head> + <body> + <nav /> + <div class="wrapper mt4 mb4"> + <h1>Page Not Found</h1> + <p>Not found</p> + </div> + <footer /> + </body> </html> diff --git a/examples/portfolio/src/pages/about.astro b/examples/portfolio/src/pages/about.astro index 36f4fe942..fad3d6ad3 100644 --- a/examples/portfolio/src/pages/about.astro +++ b/examples/portfolio/src/pages/about.astro @@ -2,60 +2,59 @@ import MainHead from '../components/MainHead.astro'; import Footer from '../components/Footer/index.jsx'; import Nav from '../components/Nav/index.jsx'; - --- <html lang="en"> - <head> - <MainHead title="About | Jeanine White" description="About Jeanine White Lorem Ipsum" /> - <style lang="scss"> - .heroImg { - max-height: 24rem; - object-fit: cover; - overflow: hidden; + <head> + <MainHead title="About | Jeanine White" description="About Jeanine White Lorem Ipsum" /> + <style lang="scss"> + .heroImg { + max-height: 24rem; + object-fit: cover; + overflow: hidden; - img { - width: 100%; - } - } + img { + width: 100%; + } + } - .bio { - font-size: var(--f-u1); - line-height: 2; - } - </style> - </head> - <body> - <Nav /> - <div class="wrapper"> - <h1>About Jeanine</h1> - <div class="heroImg"> - <img width="1400" height="350" src="https://images.unsplash.com/photo-1581977012607-4091712d36f9?auto=format&fit=crop&w=1400&h=350&q=75" /> - </div> - <div class="bio wrapper wrapper__readable mt8"> - <p> - Cream cheese say cheese stinking bishop. Brie fondue hard cheese bocconcini feta camembert de normandie babybel airedale. Red leicester swiss manchego mascarpone pepper - jack airedale fromage frais ricotta. Cheese and biscuits cauliflower cheese boursin. - </p> - <p> - Pepper jack cheesy feet cheese slices. Halloumi port-salut queso caerphilly roquefort cheese slices cheesy feet rubber cheese. Cheese slices smelly cheese pecorino - macaroni cheese feta blue castello roquefort edam. Babybel pepper jack airedale cheddar fromage frais manchego. - </p> - <p> - Cauliflower cheese lancashire macaroni cheese. Cheeseburger babybel cheese on toast airedale cauliflower cheese who moved my cheese roquefort paneer. Stinking bishop - cheddar taleggio port-salut port-salut stinking bishop cheesy grin babybel. Blue castello feta everyone loves brie. - </p> - <p> - Goat squirty cheese cut the cheese. Cheese and wine cheddar fondue airedale cottage cheese camembert de normandie feta babybel. Rubber cheese melted cheese pecorino - port-salut fondue gouda cheese on toast cheesy feet. Feta edam everyone loves cheese strings camembert de normandie. - </p> - <p> - Caerphilly monterey jack goat. Squirty cheese cheesy grin hard cheese cheese strings cheese and biscuits croque monsieur smelly cheese danish fontina. Swiss cheese - triangles everyone loves mascarpone cheese on toast who moved my cheese lancashire cheeseburger. Fromage frais fromage frais cheese and biscuits stinking bishop - cauliflower cheese. - </p> - </div> - </div> - <Footer /> -</body> + .bio { + font-size: var(--f-u1); + line-height: 2; + } + </style> + </head> + <body> + <Nav /> + <div class="wrapper"> + <h1>About Jeanine</h1> + <div class="heroImg"> + <img width="1400" height="350" src="https://images.unsplash.com/photo-1581977012607-4091712d36f9?auto=format&fit=crop&w=1400&h=350&q=75" /> + </div> + <div class="bio wrapper wrapper__readable mt8"> + <p> + Cream cheese say cheese stinking bishop. Brie fondue hard cheese bocconcini feta camembert de normandie babybel airedale. Red leicester swiss manchego mascarpone pepper + jack airedale fromage frais ricotta. Cheese and biscuits cauliflower cheese boursin. + </p> + <p> + Pepper jack cheesy feet cheese slices. Halloumi port-salut queso caerphilly roquefort cheese slices cheesy feet rubber cheese. Cheese slices smelly cheese pecorino + macaroni cheese feta blue castello roquefort edam. Babybel pepper jack airedale cheddar fromage frais manchego. + </p> + <p> + Cauliflower cheese lancashire macaroni cheese. Cheeseburger babybel cheese on toast airedale cauliflower cheese who moved my cheese roquefort paneer. Stinking bishop + cheddar taleggio port-salut port-salut stinking bishop cheesy grin babybel. Blue castello feta everyone loves brie. + </p> + <p> + Goat squirty cheese cut the cheese. Cheese and wine cheddar fondue airedale cottage cheese camembert de normandie feta babybel. Rubber cheese melted cheese pecorino + port-salut fondue gouda cheese on toast cheesy feet. Feta edam everyone loves cheese strings camembert de normandie. + </p> + <p> + Caerphilly monterey jack goat. Squirty cheese cheesy grin hard cheese cheese strings cheese and biscuits croque monsieur smelly cheese danish fontina. Swiss cheese + triangles everyone loves mascarpone cheese on toast who moved my cheese lancashire cheeseburger. Fromage frais fromage frais cheese and biscuits stinking bishop + cauliflower cheese. + </p> + </div> + </div> + <Footer /> + </body> </html> diff --git a/examples/portfolio/src/pages/index.astro b/examples/portfolio/src/pages/index.astro index 9388834ab..ce11119b5 100644 --- a/examples/portfolio/src/pages/index.astro +++ b/examples/portfolio/src/pages/index.astro @@ -7,231 +7,231 @@ import Footer from '../components/Footer/index.jsx'; import PortfolioPreview from '../components/PortfolioPreview/index.jsx'; // Data Fetching: List all Markdown posts in the repo. -const projects = Astro.fetchContent("./project/**/*.md"); +const projects = Astro.fetchContent('./project/**/*.md'); const featuredProject = projects[0]; // Full Astro Component Syntax: // https://docs.astro.build/core-concepts/astro-components/ --- + <html lang="en"> - <head> - <MainHead title="Jeanine White: Personal Site" description="Jeanine White: Developer, Speaker, and Writer..." /> - <style lang="scss"> - $w-s: 750px; - - .hero { - position: relative; - overflow: hidden; - - @media (min-width: $w-s) { - height: 45vw; - } - } - - .img { - display: block; - width: 100%; - height: auto; - } - - .gradient, - .gradient2 { - background-image: url('/assets/mesh-gradient.jpg'); - background-size: cover; - pointer-events: none; - mix-blend-mode: screen; - width: 100%; - height: 100%; - position: absolute; - top: 0; - left: 0; - z-index: 2; - } - - .gradient2 { - mix-blend-mode: multiply; - background-size: cover; - } - - .overlay { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - z-index: 10; - display: flex; - flex-direction: column; - align-items: flex-start; - justify-content: center; - padding-left: 2rem; - - @media (min-width: $w-s) { - padding-left: 4rem; - } - } - - .title { - font-weight: 900; - font-size: var(--f-u8); - margin-bottom: 0.5rem; - margin-top: 0; - - @media (min-width: $w-s) { - font-size: var(--f-u12); - } - } - - .grid { - display: grid; - grid-gap: 2rem; - - @media (min-width: 1200px) { - grid-template-columns: 2fr 1fr; - } - } - - .sectionTitle { - font-weight: 700; - font-size: var(--f-u8); - margin-top: 4rem; - margin-bottom: 2rem; - } - - .role { - position: relative; - display: inline-block; - font-weight: 900; - color: var(--t-bg); - background-color: var(--t-fg); - padding: 0.25em 0.5em; - z-index: 2; - - @media (min-width: $w-s) { - font-size: var(--f-u3); - } - - + .role { - margin-left: 1em; - } - - &:nth-of-type(1) { - .invert { - background-color: var(--c-pink); - } - } - - &:nth-of-type(2) { - .invert { - background-color: var(--c-blue); - } - } - - &:nth-of-type(3) { - .invert { - background-color: var(--c-green); - } - } - - &:hover { - .invert { - clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); - } - } - } - - .invert { - position: absolute; - color: var(--t-fg); - display: flex; - align-items: center; - justify-content: center; - width: 100%; - height: 100%; - top: 0; - left: 0; - pointer-events: none; - clip-path: polygon(0% 100%, 100% 100%, 100% 200%, 0% 200%); - transition: clip-path cubic-bezier(0.4, 0, 0.5, 1) 150ms; - } - - .desc { - font-size: var(--f-u2); - margin-top: 1.5rem; - margin-bottom: 0; - } - - .subtitle { - display: block; - font-weight: 400; - font-size: var(--f-d6); - letter-spacing: -0.0625em; - } - - .bio { - line-height: 2; - margin-bottom: 2rem; - - > span:first-of-type { - line-height: 1; - margin-bottom: 0.5em; - display: block; - font-weight: 700; - font-size: var(--f-u4); - } - } - </style> - </head> - <body> - <Nav /> - <header class="hero"> - <img - width="1600" - height="1131" - class="img" - src="https://images.unsplash.com/photo-1469854523086-cc02fe5d8800?w=1200&q=75" - srcSet="https://images.unsplash.com/photo-1469854523086-cc02fe5d8800?w=1200&q=75 800w,https://images.unsplash.com/photo-1469854523086-cc02fe5d8800?w=1200&q=75 1200w,https://images.unsplash.com/photo-1469854523086-cc02fe5d8800?w=1600&q=75 1600w,https://images.unsplash.com/photo-1469854523086-cc02fe5d8800?w=2400&q=75 2400w" - sizes="(max-width: 800px) 800px, (max-width: 1200px) 1200px, (max-width: 1600px) 1600px, (max-width: 2400px) 2400px, 1200px" - > - <div class="gradient"></div> - <div class="gradient2"></div> - <div class="overlay"> - <h1 class="title"> - <small class="subtitle">The personal site of </small>Jeanine White - </h1> - <div> - <span class="role">👩💻 Developer <span class="invert">👩💻 Developer</span></span> - <span class="role">🎤 Speaker <span class="invert">🎤 Speaker</span></span> - <span class="role">✏️ Writer <span class="invert">✏️ Writer</span></span> - </div> - <p class="desc">Lover of dogs, roadtrips, and poetry.</p> - </div> - </header> - <main class="wrapper mt4 mb4"> - <div class="grid"> - <div class="section"> - <h3 class="sectionTitle">Selected Work</h3> - <PortfolioPreview project={featuredProject} /> - <div class="tac mt4"> - <a href="/projects"> - <Button>View All</Button> - </a> - </div> - </div> - <div class="section"> - <h3 class="sectionTitle">About me</h3> - <p class="bio"> - <span>Hello!</span> I’m Jeanine, and this is my website. It was made using{' '} - <a href="https://github.com/withastro/astro" target="_blank" rel="nofollow"> - Astro - </a>, a new way to build static sites. This is just an example template for you to modify. - </p> - <p> - <a href="/about">Read more</a> - </p> - </div> - </div> - </main> - <Footer /> - </body> + <head> + <MainHead title="Jeanine White: Personal Site" description="Jeanine White: Developer, Speaker, and Writer..." /> + <style lang="scss"> + $w-s: 750px; + + .hero { + position: relative; + overflow: hidden; + + @media (min-width: $w-s) { + height: 45vw; + } + } + + .img { + display: block; + width: 100%; + height: auto; + } + + .gradient, + .gradient2 { + background-image: url('/assets/mesh-gradient.jpg'); + background-size: cover; + pointer-events: none; + mix-blend-mode: screen; + width: 100%; + height: 100%; + position: absolute; + top: 0; + left: 0; + z-index: 2; + } + + .gradient2 { + mix-blend-mode: multiply; + background-size: cover; + } + + .overlay { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: 10; + display: flex; + flex-direction: column; + align-items: flex-start; + justify-content: center; + padding-left: 2rem; + + @media (min-width: $w-s) { + padding-left: 4rem; + } + } + + .title { + font-weight: 900; + font-size: var(--f-u8); + margin-bottom: 0.5rem; + margin-top: 0; + + @media (min-width: $w-s) { + font-size: var(--f-u12); + } + } + + .grid { + display: grid; + grid-gap: 2rem; + + @media (min-width: 1200px) { + grid-template-columns: 2fr 1fr; + } + } + + .sectionTitle { + font-weight: 700; + font-size: var(--f-u8); + margin-top: 4rem; + margin-bottom: 2rem; + } + + .role { + position: relative; + display: inline-block; + font-weight: 900; + color: var(--t-bg); + background-color: var(--t-fg); + padding: 0.25em 0.5em; + z-index: 2; + + @media (min-width: $w-s) { + font-size: var(--f-u3); + } + + + .role { + margin-left: 1em; + } + + &:nth-of-type(1) { + .invert { + background-color: var(--c-pink); + } + } + + &:nth-of-type(2) { + .invert { + background-color: var(--c-blue); + } + } + + &:nth-of-type(3) { + .invert { + background-color: var(--c-green); + } + } + + &:hover { + .invert { + clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); + } + } + } + + .invert { + position: absolute; + color: var(--t-fg); + display: flex; + align-items: center; + justify-content: center; + width: 100%; + height: 100%; + top: 0; + left: 0; + pointer-events: none; + clip-path: polygon(0% 100%, 100% 100%, 100% 200%, 0% 200%); + transition: clip-path cubic-bezier(0.4, 0, 0.5, 1) 150ms; + } + + .desc { + font-size: var(--f-u2); + margin-top: 1.5rem; + margin-bottom: 0; + } + + .subtitle { + display: block; + font-weight: 400; + font-size: var(--f-d6); + letter-spacing: -0.0625em; + } + + .bio { + line-height: 2; + margin-bottom: 2rem; + + > span:first-of-type { + line-height: 1; + margin-bottom: 0.5em; + display: block; + font-weight: 700; + font-size: var(--f-u4); + } + } + </style> + </head> + <body> + <Nav /> + <header class="hero"> + <img + width="1600" + height="1131" + class="img" + src="https://images.unsplash.com/photo-1469854523086-cc02fe5d8800?w=1200&q=75" + srcSet="https://images.unsplash.com/photo-1469854523086-cc02fe5d8800?w=1200&q=75 800w,https://images.unsplash.com/photo-1469854523086-cc02fe5d8800?w=1200&q=75 1200w,https://images.unsplash.com/photo-1469854523086-cc02fe5d8800?w=1600&q=75 1600w,https://images.unsplash.com/photo-1469854523086-cc02fe5d8800?w=2400&q=75 2400w" + sizes="(max-width: 800px) 800px, (max-width: 1200px) 1200px, (max-width: 1600px) 1600px, (max-width: 2400px) 2400px, 1200px" + /> + <div class="gradient"></div> + <div class="gradient2"></div> + <div class="overlay"> + <h1 class="title"> + <small class="subtitle">The personal site of </small>Jeanine White + </h1> + <div> + <span class="role">👩💻 Developer <span class="invert">👩💻 Developer</span></span> + <span class="role">🎤 Speaker <span class="invert">🎤 Speaker</span></span> + <span class="role">✏️ Writer <span class="invert">✏️ Writer</span></span> + </div> + <p class="desc">Lover of dogs, roadtrips, and poetry.</p> + </div> + </header> + <main class="wrapper mt4 mb4"> + <div class="grid"> + <div class="section"> + <h3 class="sectionTitle">Selected Work</h3> + <PortfolioPreview project={featuredProject} /> + <div class="tac mt4"> + <a href="/projects"> + <Button>View All</Button> + </a> + </div> + </div> + <div class="section"> + <h3 class="sectionTitle">About me</h3> + <p class="bio"> + <span>Hello!</span> I’m Jeanine, and this is my website. It was made using{' '} + <a href="https://github.com/withastro/astro" target="_blank" rel="nofollow"> Astro </a>, a new way to build static sites. This is just an example template for you to + modify. + </p> + <p> + <a href="/about">Read more</a> + </p> + </div> + </div> + </main> + <Footer /> + </body> </html> diff --git a/examples/portfolio/src/pages/projects.astro b/examples/portfolio/src/pages/projects.astro index 44047117a..991c254bc 100644 --- a/examples/portfolio/src/pages/projects.astro +++ b/examples/portfolio/src/pages/projects.astro @@ -5,34 +5,32 @@ import Nav from '../components/Nav/index.jsx'; import PortfolioPreview from '../components/PortfolioPreview/index.jsx'; interface MarkdownFrontmatter { - publishDate: number; + publishDate: number; } const projects = Astro.fetchContent<MarkdownFrontmatter>('./project/**/*.md') - .filter(({ publishDate }) => !!publishDate) - .sort((a, b) => new Date(b.publishDate).valueOf() - new Date(a.publishDate).valueOf()); + .filter(({ publishDate }) => !!publishDate) + .sort((a, b) => new Date(b.publishDate).valueOf() - new Date(a.publishDate).valueOf()); --- <html lang="en"> - <head> - <MainHead title="All Projects | Jeanine White" description="Learn about Jenine White's most recent projects" /> - <style lang="scss"> - .grid { - display: grid; - grid-gap: 3rem; - } - </style> - </head> - <body> - <Nav /> - <div class="wrapper"> - <h1 class="title mt4 mb4">All Projects</h1> - <div class="grid"> - {projects.map((project) => ( - <PortfolioPreview project={project} /> - ))} - </div> - </div> - <Footer /> - </body> + <head> + <MainHead title="All Projects | Jeanine White" description="Learn about Jenine White's most recent projects" /> + <style lang="scss"> + .grid { + display: grid; + grid-gap: 3rem; + } + </style> + </head> + <body> + <Nav /> + <div class="wrapper"> + <h1 class="title mt4 mb4">All Projects</h1> + <div class="grid"> + {projects.map((project) => <PortfolioPreview project={project} />)} + </div> + </div> + <Footer /> + </body> </html> diff --git a/examples/portfolio/src/styles/global.scss b/examples/portfolio/src/styles/global.scss index b5a95caf2..453adadbe 100644 --- a/examples/portfolio/src/styles/global.scss +++ b/examples/portfolio/src/styles/global.scss @@ -1,83 +1,83 @@ // Tokens :root { - // (c)olor - --c-black: #05091e; - --c-blue: #46b4ff; - --c-gray: #90aab7; - --c-green: #9ef2cb; - --c-pink: #ffb8d9; - --c-orange: #ffb7a3; - --c-yellow: #ffdace; - --c-white: #fff; + // (c)olor + --c-black: #05091e; + --c-blue: #46b4ff; + --c-gray: #90aab7; + --c-green: #9ef2cb; + --c-pink: #ffb8d9; + --c-orange: #ffb7a3; + --c-yellow: #ffdace; + --c-white: #fff; - // (f)ont - --f-u18: 11.390625em; - --f-u17: 9.950627481136905em; - --f-u16: 8.692673779389363em; - --f-u15: 7.59375em; - --f-u14: 6.63375165409127em; - --f-u13: 5.795115852926242em; - --f-u12: 5.0625em; - --f-u11: 4.422501102727513em; - --f-u10: 3.8634105686174953em; - --f-u9: 3.375em; - --f-u8: 2.9483340684850083em; - --f-u7: 2.575607045744997em; - --f-u6: 2.25em; - --f-u5: 1.9655560456566725em; - --f-u4: 1.7170713638299977em; - --f-u3: 1.5em; - --f-u2: 1.3103706971044482em; - --f-u1: 1.1447142425533319em; - --f-d1: 0.8735804647362989em; - --f-d2: 0.7631428283688879em; - --f-d3: 0.6666666666666666em; - --f-d4: 0.5823869764908659em; - --f-d5: 0.5087618855792586em; - --f-d6: 0.4444444444444444em; - --f-d7: 0.3882579843272439em; - --f-d8: 0.3391745903861724em; - --f-d9: 0.2962962962962963em; - --f-d10: 0.2588386562181626em; - --f-d11: 0.22611639359078162em; - --f-d12: 0.19753086419753085em; - --f-d13: 0.17255910414544176em; - --f-d14: 0.15074426239385438em; - --f-d15: 0.13168724279835392em; - --f-d16: 0.11503940276362785em; - --f-d17: 0.10049617492923625em; - --f-d18: 0.0877914951989026em; + // (f)ont + --f-u18: 11.390625em; + --f-u17: 9.950627481136905em; + --f-u16: 8.692673779389363em; + --f-u15: 7.59375em; + --f-u14: 6.63375165409127em; + --f-u13: 5.795115852926242em; + --f-u12: 5.0625em; + --f-u11: 4.422501102727513em; + --f-u10: 3.8634105686174953em; + --f-u9: 3.375em; + --f-u8: 2.9483340684850083em; + --f-u7: 2.575607045744997em; + --f-u6: 2.25em; + --f-u5: 1.9655560456566725em; + --f-u4: 1.7170713638299977em; + --f-u3: 1.5em; + --f-u2: 1.3103706971044482em; + --f-u1: 1.1447142425533319em; + --f-d1: 0.8735804647362989em; + --f-d2: 0.7631428283688879em; + --f-d3: 0.6666666666666666em; + --f-d4: 0.5823869764908659em; + --f-d5: 0.5087618855792586em; + --f-d6: 0.4444444444444444em; + --f-d7: 0.3882579843272439em; + --f-d8: 0.3391745903861724em; + --f-d9: 0.2962962962962963em; + --f-d10: 0.2588386562181626em; + --f-d11: 0.22611639359078162em; + --f-d12: 0.19753086419753085em; + --f-d13: 0.17255910414544176em; + --f-d14: 0.15074426239385438em; + --f-d15: 0.13168724279835392em; + --f-d16: 0.11503940276362785em; + --f-d17: 0.10049617492923625em; + --f-d18: 0.0877914951989026em; - // (t)heme - --t-fg: var(--c-black); - --t-bg: var(--c-white); - --t-subdue: var(--c-gray); - --t-active: var(--c-blue); + // (t)heme + --t-fg: var(--c-black); + --t-bg: var(--c-white); + --t-subdue: var(--c-gray); + --t-active: var(--c-blue); } // Base body { - margin: 0; - color: var(--t-fg); - font-family: 'Inter', 'system-ui', sans-serif; + margin: 0; + color: var(--t-fg); + font-family: 'Inter', 'system-ui', sans-serif; } * { - box-sizing: content-box; + box-sizing: content-box; } img { - max-width: 100%; - height: auto; + max-width: 100%; + height: auto; } a { - color: var(--t-active); + color: var(--t-active); } h1 { - font-size: var(--f-u8); + font-size: var(--f-u8); } // Utils @@ -85,79 +85,79 @@ h1 { // color $colors: 'black', 'blue', 'white'; @each $color in $colors { - // text color - .tc-#{$color} { - color: var(--c-#{color}); - } - // background color - .bg-#{$color} { - background-color: var(--c-#{color}); - } + // text color + .tc-#{$color} { + color: var(--c-#{color}); + } + // background color + .bg-#{$color} { + background-color: var(--c-#{color}); + } } // font size @for $i from 0 through 18 { - .f-u#{$i} { - font-size: var(--f-u#{$i}); - } - .f-d#{$i} { - font-size: var(--f-d#{$i}); - } + .f-u#{$i} { + font-size: var(--f-u#{$i}); + } + .f-d#{$i} { + font-size: var(--f-d#{$i}); + } } // margin & padding @for $i from 0 through 36 { - .ma#{$i} { - margin: #{0.5 * $i}rem; - } - .mt#{$i} { - margin-top: #{0.5 * $i}rem; - } - .mr#{$i} { - margin-right: #{0.5 * $i}rem; - } - .mb#{$i} { - margin-bottom: #{0.5 * $i}rem; - } - .ml#{$i} { - margin-left: #{0.5 * $i}rem; - } - .pa#{$i} { - padding: #{0.5 * $i}rem; - } - .pt#{$i} { - padding-top: #{0.5 * $i}rem; - } - .pr#{$i} { - padding-right: #{0.5 * $i}rem; - } - .pb#{$i} { - padding-bottom: #{0.5 * $i}rem; - } - .pl#{$i} { - padding-left: #{0.5 * $i}rem; - } + .ma#{$i} { + margin: #{0.5 * $i}rem; + } + .mt#{$i} { + margin-top: #{0.5 * $i}rem; + } + .mr#{$i} { + margin-right: #{0.5 * $i}rem; + } + .mb#{$i} { + margin-bottom: #{0.5 * $i}rem; + } + .ml#{$i} { + margin-left: #{0.5 * $i}rem; + } + .pa#{$i} { + padding: #{0.5 * $i}rem; + } + .pt#{$i} { + padding-top: #{0.5 * $i}rem; + } + .pr#{$i} { + padding-right: #{0.5 * $i}rem; + } + .pb#{$i} { + padding-bottom: #{0.5 * $i}rem; + } + .pl#{$i} { + padding-left: #{0.5 * $i}rem; + } } // text align .tac { - text-align: center; + text-align: center; } .tal { - text-align: left; + text-align: left; } .tar { - text-align: right; + text-align: right; } // wrapper .wrapper { - max-width: 80em; - margin-left: auto; - margin-right: auto; - padding-left: 2rem; - padding-right: 2rem; + max-width: 80em; + margin-left: auto; + margin-right: auto; + padding-left: 2rem; + padding-right: 2rem; } .wrapper__readable { - max-width: 50em; + max-width: 50em; } diff --git a/examples/starter/astro.config.mjs b/examples/starter/astro.config.mjs index c92bf4e72..7c835f30a 100644 --- a/examples/starter/astro.config.mjs +++ b/examples/starter/astro.config.mjs @@ -8,8 +8,8 @@ // @ts-check export default /** @type {import('astro').AstroUserConfig} */ ( - { - // Set "renderers" to "[]" to disable all default, builtin component support. - // renderers: [], - } + { + // Set "renderers" to "[]" to disable all default, builtin component support. + // renderers: [], + } ); diff --git a/examples/starter/src/components/Tour.astro b/examples/starter/src/components/Tour.astro index 16919a74a..0dd21ed75 100644 --- a/examples/starter/src/components/Tour.astro +++ b/examples/starter/src/components/Tour.astro @@ -1,85 +1,85 @@ --- import { Markdown } from 'astro/components'; --- -<article> - <div class="banner"> - <p><strong>🧑🚀 Seasoned astronaut?</strong> Delete this file. Have fun!</p> - </div> - <section> - <Markdown> - ## 🚀 Project Structure +<article> + <div class="banner"> + <p><strong>🧑🚀 Seasoned astronaut?</strong> Delete this file. Have fun!</p> + </div> - Inside of your Astro project, you'll see the following folders and files: + <section> + <Markdown> + ## 🚀 Project Structure - ``` - / - ├── public/ - │ ├── robots.txt - │ └── favicon.ico - ├── src/ - │ ├── components/ - │ │ └── Tour.astro - │ └── pages/ - │ └── index.astro - └── package.json - ``` + Inside of your Astro project, you'll see the following folders and files: - Astro looks for `.astro` or `.md` files in the `src/pages/` directory. - Each page is exposed as a route based on its file name. + ``` + / + ├── public/ + │ ├── robots.txt + │ └── favicon.ico + ├── src/ + │ ├── components/ + │ │ └── Tour.astro + │ └── pages/ + │ └── index.astro + └── package.json + ``` - There's nothing special about `src/components/`, but that's where we like to put any Astro/React/Vue/Svelte/Preact components. + Astro looks for `.astro` or `.md` files in the `src/pages/` directory. + Each page is exposed as a route based on its file name. - Any static assets, like images, can be placed in the `public/` directory. - </Markdown> - </section> + There's nothing special about `src/components/`, but that's where we like to put any Astro/React/Vue/Svelte/Preact components. - <section> - <h2>👀 Want to learn more?</h2> - <p>Feel free to check <a href="https://github.com/withastro/astro">our documentation</a> or jump into our <a href="https://astro.build/chat">Discord server</a>.</p> - </section> + Any static assets, like images, can be placed in the `public/` directory. + </Markdown> + </section> + <section> + <h2>👀 Want to learn more?</h2> + <p>Feel free to check <a href="https://github.com/withastro/astro">our documentation</a> or jump into our <a href="https://astro.build/chat">Discord server</a>.</p> + </section> </article> <style> - article { - padding-top: 2em; - line-height: 1.5; - } - section { - margin-top: 2em; - display: flex; - flex-direction: column; - gap: 1em; - max-width: 70ch; - } + article { + padding-top: 2em; + line-height: 1.5; + } + section { + margin-top: 2em; + display: flex; + flex-direction: column; + gap: 1em; + max-width: 70ch; + } - .banner { - text-align: center; - font-size: 1.2rem; - background: var(--color-light); - padding: 1em 1.5em; - padding-left: 0.75em; - border-radius: 4px; - } + .banner { + text-align: center; + font-size: 1.2rem; + background: var(--color-light); + padding: 1em 1.5em; + padding-left: 0.75em; + border-radius: 4px; + } - pre, - code { - font-family: var(--font-mono); - background: var(--color-light); - border-radius: 4px; - } + pre, + code { + font-family: var(--font-mono); + background: var(--color-light); + border-radius: 4px; + } - pre { - padding: 1em 1.5em; - } + pre { + padding: 1em 1.5em; + } - .tree { - line-height: 1.2; - } + .tree { + line-height: 1.2; + } - code:not(.tree) { - padding: 0.125em; - margin: 0 -0.125em; - } + code:not(.tree) { + padding: 0.125em; + margin: 0 -0.125em; + } </style> diff --git a/examples/starter/src/pages/index.astro b/examples/starter/src/pages/index.astro index fea66e595..85c0f6e0d 100644 --- a/examples/starter/src/pages/index.astro +++ b/examples/starter/src/pages/index.astro @@ -15,44 +15,46 @@ let title = 'My Astro Site'; --- <html lang="en"> <head> - <meta charset="UTF-8"> - <meta name="viewport" content="width=device-width"> - <title>{title}</title> - - <link rel="icon" type="image/x-icon" href="/favicon.ico" /> - - <link rel="stylesheet" href={Astro.resolve('../styles/global.css')}> - <link rel="stylesheet" href={Astro.resolve('../styles/home.css')}> - - <style> - header { - display: flex; - flex-direction: column; - gap: 1em; - max-width: min(100%, 68ch); - } - </style> + <meta charset="UTF-8"> + <meta name="viewport" content="width=device-width"> + <title>{title}</title> + + <link rel="icon" type="image/x-icon" href="/favicon.ico" /> + <link rel="stylesheet" href={Astro.resolve('../styles/global.css')}> + <link rel="stylesheet" href={Astro.resolve('../styles/home.css')}> + + <style> + header { + display: flex; + flex-direction: column; + gap: 1em; + max-width: min(100%, 68ch); + } + </style> </head> <body> - <main> - <header> - <div> - <img width="60" height="80" src="/assets/logo.svg" alt="Astro logo"> - <h1>Welcome to <a href="https://astro.build/">Astro</a></h1> - </div> - </header> - - <Tour /> - - <!-- - - You can also use imported framework components directly in your markup! - - - - Note: by default, these components are NOT interactive on the client. - - The `:visible` directive tells Astro to make it interactive. - - - - See https://docs.astro.build/core-concepts/component-hydration/ - --> - <!-- ASTRO:COMPONENT_MARKUP --> - </main> + <main> + <header> + <div> + <img width="60" height="80" src="/assets/logo.svg" alt="Astro logo"> + <h1>Welcome to <a href="https://astro.build/">Astro</a></h1> + </div> + </header> + + <Tour /> + + <!-- + + You can also use imported framework components directly in your markup! + + Note: by default, these components are NOT interactive on the client. + The `:visible` directive tells Astro to make it interactive. + + See https://docs.astro.build/core-concepts/component-hydration/ + + --> + + <!-- ASTRO:COMPONENT_MARKUP --> + </main> </body> </html> diff --git a/examples/starter/src/styles/global.css b/examples/starter/src/styles/global.css index e1a3a6bd1..a9f830eda 100644 --- a/examples/starter/src/styles/global.css +++ b/examples/starter/src/styles/global.css @@ -1,28 +1,28 @@ * { - box-sizing: border-box; - margin: 0; + box-sizing: border-box; + margin: 0; } :root { - font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji; - font-size: 1rem; - --user-font-scale: 1rem - 16px; - font-size: clamp(0.875rem, 0.4626rem + 1.0309vw + var(--user-font-scale), 1.125rem); + font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji; + font-size: 1rem; + --user-font-scale: 1rem - 16px; + font-size: clamp(0.875rem, 0.4626rem + 1.0309vw + var(--user-font-scale), 1.125rem); } body { - padding: 4rem 2rem; - width: 100%; - min-height: 100vh; - display: grid; - justify-content: center; - background: #f9fafb; - color: #111827; + padding: 4rem 2rem; + width: 100%; + min-height: 100vh; + display: grid; + justify-content: center; + background: #f9fafb; + color: #111827; } @media (prefers-color-scheme: dark) { - body { - background: #111827; - color: #fff; - } + body { + background: #111827; + color: #fff; + } } diff --git a/examples/starter/src/styles/home.css b/examples/starter/src/styles/home.css index 39de76a44..b3cbd02d0 100644 --- a/examples/starter/src/styles/home.css +++ b/examples/starter/src/styles/home.css @@ -1,53 +1,53 @@ :root { - --font-mono: Consolas, 'Andale Mono WT', 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Liberation Mono', - 'Nimbus Mono L', Monaco, 'Courier New', Courier, monospace; - --color-light: #f3f4f6; + --font-mono: Consolas, 'Andale Mono WT', 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Liberation Mono', + 'Nimbus Mono L', Monaco, 'Courier New', Courier, monospace; + --color-light: #f3f4f6; } @media (prefers-color-scheme: dark) { - :root { - --color-light: #1f2937; - } + :root { + --color-light: #1f2937; + } } a { - color: inherit; + color: inherit; } header > div { - font-size: clamp(2rem, -0.4742rem + 6.1856vw, 2.75rem); + font-size: clamp(2rem, -0.4742rem + 6.1856vw, 2.75rem); } header > div { - display: flex; - flex-direction: column; - align-items: center; + display: flex; + flex-direction: column; + align-items: center; } header h1 { - font-size: 1em; - font-weight: 500; + font-size: 1em; + font-weight: 500; } header img { - width: 2em; - height: 2.667em; + width: 2em; + height: 2.667em; } h2 { - font-weight: 500; - font-size: clamp(1.5rem, 1rem + 1.25vw, 2rem); + font-weight: 500; + font-size: clamp(1.5rem, 1rem + 1.25vw, 2rem); } .counter { - display: grid; - grid-auto-flow: column; - gap: 1em; - font-size: 2rem; - justify-content: center; - padding: 2rem 1rem; + display: grid; + grid-auto-flow: column; + gap: 1em; + font-size: 2rem; + justify-content: center; + padding: 2rem 1rem; } .counter > pre { - text-align: center; - min-width: 3ch; + text-align: center; + min-width: 3ch; } diff --git a/examples/subpath/astro.config.mjs b/examples/subpath/astro.config.mjs index 7a7a3ed2d..2b41e4ce7 100644 --- a/examples/subpath/astro.config.mjs +++ b/examples/subpath/astro.config.mjs @@ -8,9 +8,9 @@ // @ts-check export default /** @type {import('astro').AstroUserConfig} */ ({ - // Comment out "renderers: []" to enable Astro's default component support. - buildOptions: { - site: 'http://example.com/blog', - }, - renderers: ['@astrojs/renderer-react'], + // Comment out "renderers: []" to enable Astro's default component support. + buildOptions: { + site: 'http://example.com/blog', + }, + renderers: ['@astrojs/renderer-react'], }); diff --git a/examples/subpath/src/components/Time.jsx b/examples/subpath/src/components/Time.jsx index 8b5837c85..9a89669cb 100644 --- a/examples/subpath/src/components/Time.jsx +++ b/examples/subpath/src/components/Time.jsx @@ -1,7 +1,7 @@ import React from 'react'; export default function () { - const date = new Date(); - const format = new Intl.DateTimeFormat('en-US'); - return <time>{format.format(date)}</time>; + const date = new Date(); + const format = new Intl.DateTimeFormat('en-US'); + return <time>{format.format(date)}</time>; } diff --git a/examples/subpath/src/pages/index.astro b/examples/subpath/src/pages/index.astro index b08f2e06f..44cb83358 100644 --- a/examples/subpath/src/pages/index.astro +++ b/examples/subpath/src/pages/index.astro @@ -1,32 +1,30 @@ --- -import Time from '../components/Time.jsx' +import Time from '../components/Time.jsx'; --- <html lang="en"> + <head> + <meta charset="utf-8" /> + <link rel="icon" type="image/x-icon" href="/favicon.ico" /> + <link rel="stylesheet" href={Astro.resolve('../styles/main.scss')} /> + <meta name="viewport" content="width=device-width" /> + <title>Welcome to Astro</title> + </head> -<head> - <meta charset="utf-8" /> - <link rel="icon" type="image/x-icon" href="/favicon.ico" /> - <link rel="stylesheet" href={Astro.resolve('../styles/main.scss')}> - <meta name="viewport" content="width=device-width" /> - <title>Welcome to Astro</title> -</head> + <body> + <h1>Welcome to <a href="https://astro.build/">Astro</a></h1> -<body> - <h1>Welcome to <a href="https://astro.build/">Astro</a></h1> + <main id="app"> + Today: <Time client:idle /> + </main> - <main id="app"> - Today: <Time client:idle /> - </main> - - <article> - <h2>Animals</h2> - - <figure> - <img src="/blog/images/penguin.png" /> - <figcaption>A penguin</figcaption> - </figure> - </article> -</body> + <article> + <h2>Animals</h2> + <figure> + <img src="/blog/images/penguin.png" /> + <figcaption>A penguin</figcaption> + </figure> + </article> + </body> </html> diff --git a/examples/subpath/src/styles/main.scss b/examples/subpath/src/styles/main.scss index a54a15f01..2118ed2a0 100644 --- a/examples/subpath/src/styles/main.scss +++ b/examples/subpath/src/styles/main.scss @@ -1,5 +1,5 @@ body { - #app { - color: tomato; - } + #app { + color: tomato; + } } diff --git a/examples/with-markdown-plugins/astro.config.mjs b/examples/with-markdown-plugins/astro.config.mjs index d68232fae..eb7011933 100644 --- a/examples/with-markdown-plugins/astro.config.mjs +++ b/examples/with-markdown-plugins/astro.config.mjs @@ -9,19 +9,19 @@ import astroRemark from '@astrojs/markdown-remark'; // @ts-check export default /** @type {import('astro').AstroUserConfig} */ ({ - // Enable Custom Markdown options, plugins, etc. - markdownOptions: { - render: [ - astroRemark, - { - remarkPlugins: ['remark-code-titles'], - rehypePlugins: [ - ['rehype-autolink-headings', { behavior: 'prepend' }], - ['rehype-toc', { headings: ['h2', 'h3'] }], - ['rehype-add-classes', { 'h1,h2,h3': 'title' }], - 'rehype-slug', - ], - }, - ], - }, + // Enable Custom Markdown options, plugins, etc. + markdownOptions: { + render: [ + astroRemark, + { + remarkPlugins: ['remark-code-titles'], + rehypePlugins: [ + ['rehype-autolink-headings', { behavior: 'prepend' }], + ['rehype-toc', { headings: ['h2', 'h3'] }], + ['rehype-add-classes', { 'h1,h2,h3': 'title' }], + 'rehype-slug', + ], + }, + ], + }, }); diff --git a/examples/with-markdown-plugins/src/layouts/main.astro b/examples/with-markdown-plugins/src/layouts/main.astro index 467f16951..745f70d86 100644 --- a/examples/with-markdown-plugins/src/layouts/main.astro +++ b/examples/with-markdown-plugins/src/layouts/main.astro @@ -2,34 +2,34 @@ const { content } = Astro.props; --- -<html lang={ content.lang || 'en' }> - <head> - <meta charset="utf-8" /> +<html lang={content.lang || 'en'}> + <head> + <meta charset="utf-8" /> - <link rel="icon" type="image/x-icon" href="/favicon.ico" /> + <link rel="icon" type="image/x-icon" href="/favicon.ico" /> - <title>{content.title}</title> - <link rel="stylesheet" href={Astro.resolve('../styles/global.css')}> - <style> - .nav { - border-bottom: 1px solid #ccc; - margin-bottom: 40px; - padding-bottom: 20px; - } - .nav > * + * { - margin-left: 10px; - } - </style> - </head> - <body> - <main class="content"> - <header> - <nav class="nav"> - <a href="/">Home</a> - <a href="/about">About</a> - </nav> - </header> - <slot /> - </main> - </body> + <title>{content.title}</title> + <link rel="stylesheet" href={Astro.resolve('../styles/global.css')} /> + <style> + .nav { + border-bottom: 1px solid #ccc; + margin-bottom: 40px; + padding-bottom: 20px; + } + .nav > * + * { + margin-left: 10px; + } + </style> + </head> + <body> + <main class="content"> + <header> + <nav class="nav"> + <a href="/">Home</a> + <a href="/about">About</a> + </nav> + </header> + <slot /> + </main> + </body> </html> diff --git a/examples/with-markdown-plugins/src/pages/about.astro b/examples/with-markdown-plugins/src/pages/about.astro index c313f98a9..1115fcb8c 100644 --- a/examples/with-markdown-plugins/src/pages/about.astro +++ b/examples/with-markdown-plugins/src/pages/about.astro @@ -1,20 +1,20 @@ --- import { Markdown } from 'astro/components'; -import MainLayout from '../layouts/main.astro' +import MainLayout from '../layouts/main.astro'; --- -<MainLayout content={{ title: "About" }}> - <Markdown> - # About +<MainLayout content={{ title: 'About' }}> + <Markdown> + # About - Sint ullamco sint ut irure laborum occaecat anim minim tempor enim dolore reprehenderit Lorem. Sit qui nisi in quis ut consequat minim. Ad commodo officia nisi culpa proident duis culpa eu reprehenderit incididunt do fugiat proident tempor. Et velit dolor aliqua dolor ipsum. Sunt eiusmod amet enim ut. + Sint ullamco sint ut irure laborum occaecat anim minim tempor enim dolore reprehenderit Lorem. Sit qui nisi in quis ut consequat minim. Ad commodo officia nisi culpa proident duis culpa eu reprehenderit incididunt do fugiat proident tempor. Et velit dolor aliqua dolor ipsum. Sunt eiusmod amet enim ut. - Sint ullamco sint ut irure laborum occaecat anim minim tempor enim dolore reprehenderit Lorem. Sit qui nisi in quis ut consequat minim. Ad commodo officia nisi culpa proident duis culpa eu reprehenderit incididunt do fugiat proident tempor. Et velit dolor aliqua dolor ipsum. Sunt eiusmod amet enim ut. + Sint ullamco sint ut irure laborum occaecat anim minim tempor enim dolore reprehenderit Lorem. Sit qui nisi in quis ut consequat minim. Ad commodo officia nisi culpa proident duis culpa eu reprehenderit incididunt do fugiat proident tempor. Et velit dolor aliqua dolor ipsum. Sunt eiusmod amet enim ut. - ## My story + ## My story - Sint ullamco sint ut irure laborum occaecat anim minim tempor enim dolore reprehenderit Lorem. Sit qui nisi in quis ut consequat minim. Ad commodo officia nisi culpa proident duis culpa eu reprehenderit incididunt do fugiat proident tempor. Et velit dolor aliqua dolor ipsum. Sunt eiusmod amet enim ut. - - Sint ullamco sint ut irure laborum occaecat anim minim tempor enim dolore reprehenderit Lorem. Sit qui nisi in quis ut consequat minim. Ad commodo officia nisi culpa proident duis culpa eu reprehenderit incididunt do fugiat proident tempor. Et velit dolor aliqua dolor ipsum. Sunt eiusmod amet enim ut. - </Markdown> + Sint ullamco sint ut irure laborum occaecat anim minim tempor enim dolore reprehenderit Lorem. Sit qui nisi in quis ut consequat minim. Ad commodo officia nisi culpa proident duis culpa eu reprehenderit incididunt do fugiat proident tempor. Et velit dolor aliqua dolor ipsum. Sunt eiusmod amet enim ut. + + Sint ullamco sint ut irure laborum occaecat anim minim tempor enim dolore reprehenderit Lorem. Sit qui nisi in quis ut consequat minim. Ad commodo officia nisi culpa proident duis culpa eu reprehenderit incididunt do fugiat proident tempor. Et velit dolor aliqua dolor ipsum. Sunt eiusmod amet enim ut. + </Markdown> </MainLayout> diff --git a/examples/with-markdown-plugins/src/styles/global.css b/examples/with-markdown-plugins/src/styles/global.css index ea585d269..ced30f0a2 100644 --- a/examples/with-markdown-plugins/src/styles/global.css +++ b/examples/with-markdown-plugins/src/styles/global.css @@ -1,53 +1,53 @@ body { - font-family: system-ui; + font-family: system-ui; } .content { - max-width: 640px; - margin: 40px auto; - padding: 0 20px; + max-width: 640px; + margin: 40px auto; + padding: 0 20px; } .title { - position: relative; + position: relative; } .title a { - position: absolute; - display: block; - height: 100%; - width: 100%; - color: inherit; + position: absolute; + display: block; + height: 100%; + width: 100%; + color: inherit; } .title a:before { - position: absolute; - right: 100%; - display: block; - content: '#'; - margin-right: 0.2em; - visibility: hidden; - opacity: 0.5; + position: absolute; + right: 100%; + display: block; + content: '#'; + margin-right: 0.2em; + visibility: hidden; + opacity: 0.5; } .title:hover a:before { - visibility: visible; + visibility: visible; } .remark-code-title, pre[class^='language-'] { - padding: 10px; - margin: 0; + padding: 10px; + margin: 0; } .remark-code-title { - border-bottom: 1px solid rgba(0, 0, 0, 0.05); - border-radius: 4px 4px 0 0; - background: rgba(0, 0, 0, 0.08); - font-family: monospace; - font-weight: bold; + border-bottom: 1px solid rgba(0, 0, 0, 0.05); + border-radius: 4px 4px 0 0; + background: rgba(0, 0, 0, 0.08); + font-family: monospace; + font-weight: bold; } pre[class^='language-'] { - background: rgba(0, 0, 0, 0.05); - border-radius: 0 0 4px 4px; + background: rgba(0, 0, 0, 0.05); + border-radius: 0 0 4px 4px; } diff --git a/examples/with-markdown/astro.config.mjs b/examples/with-markdown/astro.config.mjs index c92bf4e72..7c835f30a 100644 --- a/examples/with-markdown/astro.config.mjs +++ b/examples/with-markdown/astro.config.mjs @@ -8,8 +8,8 @@ // @ts-check export default /** @type {import('astro').AstroUserConfig} */ ( - { - // Set "renderers" to "[]" to disable all default, builtin component support. - // renderers: [], - } + { + // Set "renderers" to "[]" to disable all default, builtin component support. + // renderers: [], + } ); diff --git a/examples/with-markdown/src/components/PreactCounter.tsx b/examples/with-markdown/src/components/PreactCounter.tsx index e3761643f..e67afb4fe 100644 --- a/examples/with-markdown/src/components/PreactCounter.tsx +++ b/examples/with-markdown/src/components/PreactCounter.tsx @@ -3,18 +3,18 @@ import { useState } from 'preact/hooks'; /** a counter written in Preact */ export default function PreactCounter({ children }) { - const [count, setCount] = useState(0); - const add = () => setCount((i) => i + 1); - const subtract = () => setCount((i) => i - 1); + const [count, setCount] = useState(0); + const add = () => setCount((i) => i + 1); + const subtract = () => setCount((i) => i - 1); - return ( - <> - <div className="counter"> - <button onClick={subtract}>-</button> - <pre>{count}</pre> - <button onClick={add}>+</button> - </div> - <div className="children">{children}</div> - </> - ); + return ( + <> + <div className="counter"> + <button onClick={subtract}>-</button> + <pre>{count}</pre> + <button onClick={add}>+</button> + </div> + <div className="children">{children}</div> + </> + ); } diff --git a/examples/with-markdown/src/components/ReactCounter.jsx b/examples/with-markdown/src/components/ReactCounter.jsx index 92871a8d8..e322f7050 100644 --- a/examples/with-markdown/src/components/ReactCounter.jsx +++ b/examples/with-markdown/src/components/ReactCounter.jsx @@ -2,18 +2,18 @@ import React, { useState } from 'react'; /** a counter written in React */ export default function ReactCounter({ children }) { - const [count, setCount] = useState(0); - const add = () => setCount((i) => i + 1); - const subtract = () => setCount((i) => i - 1); + const [count, setCount] = useState(0); + const add = () => setCount((i) => i + 1); + const subtract = () => setCount((i) => i - 1); - return ( - <> - <div className="counter"> - <button onClick={subtract}>-</button> - <pre>{count}</pre> - <button onClick={add}>+</button> - </div> - <div className="children">{children}</div> - </> - ); + return ( + <> + <div className="counter"> + <button onClick={subtract}>-</button> + <pre>{count}</pre> + <button onClick={add}>+</button> + </div> + <div className="children">{children}</div> + </> + ); } diff --git a/examples/with-markdown/src/components/VueCounter.vue b/examples/with-markdown/src/components/VueCounter.vue index 2703b8b9b..2f25066dc 100644 --- a/examples/with-markdown/src/components/VueCounter.vue +++ b/examples/with-markdown/src/components/VueCounter.vue @@ -1,27 +1,27 @@ <template> - <div class="counter"> - <button @click="subtract()">-</button> - <pre>{{ count }}</pre> - <button @click="add()">+</button> - </div> - <div class="children"> - <slot /> - </div> + <div class="counter"> + <button @click="subtract()">-</button> + <pre>{{ count }}</pre> + <button @click="add()">+</button> + </div> + <div class="children"> + <slot /> + </div> </template> <script> import { ref } from 'vue'; export default { - setup() { - const count = ref(0); - const add = () => (count.value = count.value + 1); - const subtract = () => (count.value = count.value - 1); + setup() { + const count = ref(0); + const add = () => (count.value = count.value + 1); + const subtract = () => (count.value = count.value - 1); - return { - count, - add, - subtract, - }; - }, + return { + count, + add, + subtract, + }; + }, }; </script> diff --git a/examples/with-markdown/src/layouts/main.astro b/examples/with-markdown/src/layouts/main.astro index ae7f04565..b3fdb345e 100644 --- a/examples/with-markdown/src/layouts/main.astro +++ b/examples/with-markdown/src/layouts/main.astro @@ -2,16 +2,16 @@ const { content } = Astro.props; --- -<html lang={ content.lang || 'en' }> - <head> - <meta charset="utf-8"> +<html lang={content.lang || 'en'}> + <head> + <meta charset="utf-8" /> - <link rel="icon" type="image/x-icon" href="/favicon.ico" /> + <link rel="icon" type="image/x-icon" href="/favicon.ico" /> - <title>{content.title}</title> - <link rel="stylesheet" href={Astro.resolve('../styles/global.css')}> - </head> - <body> - <slot/> - </body> + <title>{content.title}</title> + <link rel="stylesheet" href={Astro.resolve('../styles/global.css')} /> + </head> + <body> + <slot /> + </body> </html> diff --git a/examples/with-markdown/src/pages/external.astro b/examples/with-markdown/src/pages/external.astro index 1149666b2..82cac13d4 100644 --- a/examples/with-markdown/src/pages/external.astro +++ b/examples/with-markdown/src/pages/external.astro @@ -7,11 +7,13 @@ const content = `Markdown *content* to render`; --- <Layout content={{ title }}> - <main> - <div> - <Markdown {content} /> - <p>Some other stuff</p> - </div> - <p>Lastly...</p> - </main> + <main> + <div> + <Markdown {content}> + + </Markdown> + <p>Some other stuff</p> + </div> + <p>Lastly...</p> + </main> </Layout> diff --git a/examples/with-markdown/src/pages/index.astro b/examples/with-markdown/src/pages/index.astro index 7249f07cd..e70e12f35 100644 --- a/examples/with-markdown/src/pages/index.astro +++ b/examples/with-markdown/src/pages/index.astro @@ -18,48 +18,48 @@ const items = ['A', 'B', 'C']; // Full Astro Component Syntax: // https://docs.astro.build/core-concepts/astro-components/ --- -<Layout content={{ title }}> - <Markdown> - # Introducing {title} - **Astro Markdown** brings native Markdown support to HTML! +<Layout content={{ title }}> + <Markdown> + # Introducing {title} - > It's inspired by [`MDX`](https://mdxjs.com/) and powered by [`remark`](https://github.com/remarkjs/remark). + **Astro Markdown** brings native Markdown support to HTML! - The best part? It comes with all the Astro features you expect. + > It's inspired by [`MDX`](https://mdxjs.com/) and powered by [`remark`](https://github.com/remarkjs/remark). - [Other example](./other) + The best part? It comes with all the Astro features you expect. - ## Embed framework components + [Other example](./other) - <ReactCounter client:visible /> - <PreactCounter client:visible /> - <VueCounter client:visible /> - <SvelteCounter client:visible /> + ## Embed framework components - ## Use Expressions + <ReactCounter client:visible /> + <PreactCounter client:visible /> + <VueCounter client:visible /> + <SvelteCounter client:visible /> - You can use any {variable} in scope and use JavaScript for templating ({items.join(', ')}) + ## Use Expressions - ## Oh yeah... + You can use any {variable} in scope and use JavaScript for templating ({items.join(', ')}) - <ReactCounter client:visible> + ## Oh yeah... - 🤯 It's also _recursive_! + <ReactCounter client:visible> - ### Markdown can be embedded in any child component + 🤯 It's also _recursive_! - </ReactCounter> + ### Markdown can be embedded in any child component - ## Code + </ReactCounter> - Should work! + ## Code - ```js - import Something from './another'; + Should work! - const thing = new Something(); - ``` + ```js + import Something from './another'; - </Markdown> + const thing = new Something(); + ``` + </Markdown> </Layout> diff --git a/examples/with-markdown/src/styles/global.css b/examples/with-markdown/src/styles/global.css index 16cd4577e..577e06182 100644 --- a/examples/with-markdown/src/styles/global.css +++ b/examples/with-markdown/src/styles/global.css @@ -1,69 +1,69 @@ pre, code { - color: #d4d4d4; - font-size: 14px; - font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; - line-height: 1.5; - direction: ltr; - white-space: pre; - text-align: left; - text-shadow: none; - word-break: normal; - word-spacing: normal; - -moz-tab-size: 4; - -o-tab-size: 4; - tab-size: 4; - -webkit-hyphens: none; - -moz-hyphens: none; - -ms-hyphens: none; - hyphens: none; + color: #d4d4d4; + font-size: 14px; + font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; + line-height: 1.5; + direction: ltr; + white-space: pre; + text-align: left; + text-shadow: none; + word-break: normal; + word-spacing: normal; + -moz-tab-size: 4; + -o-tab-size: 4; + tab-size: 4; + -webkit-hyphens: none; + -moz-hyphens: none; + -ms-hyphens: none; + hyphens: none; } pre::selection, code::selection { - text-shadow: none; - background: #b3d4fc; + text-shadow: none; + background: #b3d4fc; } @media print { - pre, - code { - text-shadow: none; - } + pre, + code { + text-shadow: none; + } } pre { - margin: 0.5rem 0 16px; - padding: 0.8rem 1rem 0.9rem; - overflow: auto; - background: #282a36; - border-radius: 4px; + margin: 0.5rem 0 16px; + padding: 0.8rem 1rem 0.9rem; + overflow: auto; + background: #282a36; + border-radius: 4px; } :not(pre) > code { - padding: 0.1em 0.3em; - color: #db4c69; - background: #f9f2f4; - border-radius: 0.3em; - white-space: pre-wrap; + padding: 0.1em 0.3em; + color: #db4c69; + background: #f9f2f4; + border-radius: 0.3em; + white-space: pre-wrap; } /********************************************************* * Tokens */ .namespace { - opacity: 0.7; + opacity: 0.7; } .token.comment, .token.prolog, .token.doctype, .token.cdata { - color: #6a9955; + color: #6a9955; } .token.punctuation { - color: #d4d4d4; + color: #d4d4d4; } .token.property, @@ -73,7 +73,7 @@ pre { .token.constant, .token.symbol, .token.deleted { - color: #b5cea8; + color: #b5cea8; } .token.selector, @@ -82,7 +82,7 @@ pre { .token.char, .token.builtin, .token.inserted { - color: #ce9178; + color: #ce9178; } .token.operator, @@ -90,86 +90,86 @@ pre { .token.url, .language-css .token.string, .style .token.string { - color: #d4d4d4; - background: #2d3748; + color: #d4d4d4; + background: #2d3748; } .token.atrule, .token.attr-value, .token.keyword { - color: #c586c0; + color: #c586c0; } .token.function { - color: #dcdcaa; + color: #dcdcaa; } .token.regex, .token.important, .token.variable { - color: #d16969; + color: #d16969; } .token.important, .token.bold { - font-weight: bold; + font-weight: bold; } .token.italic { - font-style: italic; + font-style: italic; } .token.constant { - color: #9cdcfe; + color: #9cdcfe; } .token.class-name { - color: #4ec9b0; + color: #4ec9b0; } .token.parameter { - color: #9cdcfe; + color: #9cdcfe; } .token.interpolation { - color: #9cdcfe; + color: #9cdcfe; } .token.punctuation.interpolation-punctuation { - color: #569cd6; + color: #569cd6; } .token.boolean { - color: #569cd6; + color: #569cd6; } .token.property { - color: #9cdcfe; + color: #9cdcfe; } .token.selector { - color: #d7ba7d; + color: #d7ba7d; } .token.tag { - color: #569cd6; + color: #569cd6; } .token.attr-name { - color: #9cdcfe; + color: #9cdcfe; } .token.attr-value { - color: #ce9178; + color: #ce9178; } .token.entity { - color: #4ec9b0; - cursor: unset; + color: #4ec9b0; + cursor: unset; } .token.namespace { - color: #4ec9b0; + color: #4ec9b0; } /********************************************************* @@ -177,58 +177,58 @@ pre { */ pre[class*='language-javascript'], code[class*='language-javascript'] { - color: #4ec9b0; + color: #4ec9b0; } pre[class*='language-css'], code[class*='language-css'] { - color: #ce9178; + color: #ce9178; } pre[class*='language-html'], code[class*='language-html'] { - color: #d4d4d4; + color: #d4d4d4; } .language-html .token.punctuation { - color: #808080; + color: #808080; } /********************************************************* * Line highlighting */ pre[data-line] { - position: relative; + position: relative; } pre > code { - position: relative; - z-index: 1; + position: relative; + z-index: 1; } .line-highlight { - position: absolute; - right: 0; - left: 0; - z-index: 0; - margin-top: 1em; - padding: inherit 0; - line-height: inherit; - white-space: pre; - background: #f7ebc6; - box-shadow: inset 5px 0 0 #f7d87c; - pointer-events: none; + position: absolute; + right: 0; + left: 0; + z-index: 0; + margin-top: 1em; + padding: inherit 0; + line-height: inherit; + white-space: pre; + background: #f7ebc6; + box-shadow: inset 5px 0 0 #f7d87c; + pointer-events: none; } pre[class*='language-bash'] .token.function { - color: #d4d4d4; + color: #d4d4d4; } .token.comment { - color: #fff7; + color: #fff7; } body { - max-width: 900px; - margin: auto; + max-width: 900px; + margin: auto; } diff --git a/examples/with-nanostores/astro.config.mjs b/examples/with-nanostores/astro.config.mjs index b5fe6a073..ce173ed92 100644 --- a/examples/with-nanostores/astro.config.mjs +++ b/examples/with-nanostores/astro.config.mjs @@ -8,6 +8,6 @@ // @ts-check export default /** @type {import('astro').AstroUserConfig} */ ({ - // Enable many renderers to support all different kinds of components. - renderers: ['@astrojs/renderer-preact', '@astrojs/renderer-react', '@astrojs/renderer-svelte', '@astrojs/renderer-vue', '@astrojs/renderer-solid'], + // Enable many renderers to support all different kinds of components. + renderers: ['@astrojs/renderer-preact', '@astrojs/renderer-react', '@astrojs/renderer-svelte', '@astrojs/renderer-vue', '@astrojs/renderer-solid'], }); diff --git a/examples/with-nanostores/src/components/AdminsPreact.jsx b/examples/with-nanostores/src/components/AdminsPreact.jsx index 327d82846..2f93ed437 100644 --- a/examples/with-nanostores/src/components/AdminsPreact.jsx +++ b/examples/with-nanostores/src/components/AdminsPreact.jsx @@ -5,26 +5,26 @@ import { admins } from '../store/admins.js'; import { counter, increaseCounter, decreaseCounter } from '../store/counter.js'; const AdminsPreact = () => { - const list = useStore(admins); - const count = useStore(counter); + const list = useStore(admins); + const count = useStore(counter); - return ( - <> - <h1>Preact</h1> - <ul> - {list.map((admin) => ( - <li key={admin.id}>{JSON.stringify(admin, null, 2)}</li> - ))} - </ul> - <div> - <h3>Counter</h3> - <p>{count.value}</p> - <button onClick={decreaseCounter}>-1</button> - <button onClick={increaseCounter}>+1</button> - </div> - <br /> - </> - ); + return ( + <> + <h1>Preact</h1> + <ul> + {list.map((admin) => ( + <li key={admin.id}>{JSON.stringify(admin, null, 2)}</li> + ))} + </ul> + <div> + <h3>Counter</h3> + <p>{count.value}</p> + <button onClick={decreaseCounter}>-1</button> + <button onClick={increaseCounter}>+1</button> + </div> + <br /> + </> + ); }; export default AdminsPreact; diff --git a/examples/with-nanostores/src/components/AdminsReact.jsx b/examples/with-nanostores/src/components/AdminsReact.jsx index dfddd3e83..f2b38a3cd 100644 --- a/examples/with-nanostores/src/components/AdminsReact.jsx +++ b/examples/with-nanostores/src/components/AdminsReact.jsx @@ -5,26 +5,26 @@ import { admins } from '../store/admins.js'; import { counter, increaseCounter, decreaseCounter } from '../store/counter.js'; const AdminsReact = () => { - const list = useStore(admins); - const count = useStore(counter); + const list = useStore(admins); + const count = useStore(counter); - return ( - <> - <h1>React</h1> - <ul> - {list.map((admin) => ( - <li key={admin.id}>{JSON.stringify(admin, null, 2)}</li> - ))} - </ul> - <div> - <h3>Counter</h3> - <p>{count.value}</p> - <button onClick={decreaseCounter}>-1</button> - <button onClick={increaseCounter}>+1</button> - </div> - <br /> - </> - ); + return ( + <> + <h1>React</h1> + <ul> + {list.map((admin) => ( + <li key={admin.id}>{JSON.stringify(admin, null, 2)}</li> + ))} + </ul> + <div> + <h3>Counter</h3> + <p>{count.value}</p> + <button onClick={decreaseCounter}>-1</button> + <button onClick={increaseCounter}>+1</button> + </div> + <br /> + </> + ); }; export default AdminsReact; diff --git a/examples/with-nanostores/src/components/AdminsSolid.jsx b/examples/with-nanostores/src/components/AdminsSolid.jsx index 360961a98..8ad2756a3 100644 --- a/examples/with-nanostores/src/components/AdminsSolid.jsx +++ b/examples/with-nanostores/src/components/AdminsSolid.jsx @@ -5,26 +5,26 @@ import { admins } from '../store/admins.js'; import { counter, increaseCounter, decreaseCounter } from '../store/counter.js'; const AdminsSolid = () => { - const list = useStore(admins); - const count = useStore(counter); + const list = useStore(admins); + const count = useStore(counter); - return ( - <> - <h1>Solid</h1> - <ul> - {list.map((admin) => ( - <li key={admin.id}>{JSON.stringify(admin, null, 2)}</li> - ))} - </ul> - <div> - <h3>Counter</h3> - <p>{count.value}</p> - <button onClick={decreaseCounter}>-1</button> - <button onClick={increaseCounter}>+1</button> - </div> - <br /> - </> - ); + return ( + <> + <h1>Solid</h1> + <ul> + {list.map((admin) => ( + <li key={admin.id}>{JSON.stringify(admin, null, 2)}</li> + ))} + </ul> + <div> + <h3>Counter</h3> + <p>{count.value}</p> + <button onClick={decreaseCounter}>-1</button> + <button onClick={increaseCounter}>+1</button> + </div> + <br /> + </> + ); }; export default AdminsSolid; diff --git a/examples/with-nanostores/src/components/AdminsVue.vue b/examples/with-nanostores/src/components/AdminsVue.vue index 2f83e9fc1..5eb73dd3d 100644 --- a/examples/with-nanostores/src/components/AdminsVue.vue +++ b/examples/with-nanostores/src/components/AdminsVue.vue @@ -1,19 +1,19 @@ <template> - <div> - <h1>Vue</h1> - <ul> - <li v-for="admin in list" :key="admin.id"> - {{ JSON.stringify(admin, null, 2) }} - </li> - </ul> - <div> - <h3>Counter</h3> - <p>{{ count.value }}</p> - <button @click="decreaseCounter">-1</button> - <button @click="increaseCounter">+1</button> - </div> - <br /> - </div> + <div> + <h1>Vue</h1> + <ul> + <li v-for="admin in list" :key="admin.id"> + {{ JSON.stringify(admin, null, 2) }} + </li> + </ul> + <div> + <h3>Counter</h3> + <p>{{ count.value }}</p> + <button @click="decreaseCounter">-1</button> + <button @click="increaseCounter">+1</button> + </div> + <br /> + </div> </template> <script> @@ -23,11 +23,11 @@ import { admins } from '../store/admins.js'; import { counter, increaseCounter, decreaseCounter } from '../store/counter.js'; export default { - setup() { - const list = useStore(admins); - const count = useStore(counter); + setup() { + const list = useStore(admins); + const count = useStore(counter); - return { list, count, increaseCounter, decreaseCounter }; - }, + return { list, count, increaseCounter, decreaseCounter }; + }, }; </script> diff --git a/examples/with-nanostores/src/pages/index.astro b/examples/with-nanostores/src/pages/index.astro index 1a579f0f8..e25769138 100644 --- a/examples/with-nanostores/src/pages/index.astro +++ b/examples/with-nanostores/src/pages/index.astro @@ -9,40 +9,43 @@ import AdminsSolid from '../components/AdminsSolid.jsx'; // Full Astro Component Syntax: // https://docs.astro.build/core-concepts/astro-components/ --- + <html lang="en"> -<head> - <meta charset="UTF-8"> - <meta name="viewport" content="width=device-width"> - <title>Astro</title> + <head> + <meta charset="UTF-8" /> + <meta name="viewport" content="width=device-width" /> + <title>Astro</title> - <link rel="icon" type="image/x-icon" href="/favicon.ico" /> + <link rel="icon" type="image/x-icon" href="/favicon.ico" /> - <link rel="stylesheet" href={Astro.resolve('../styles/global.css')}> - <link rel="stylesheet" href={Astro.resolve('../styles/home.css')}> + <link rel="stylesheet" href={Astro.resolve('../styles/global.css')} /> + <link rel="stylesheet" href={Astro.resolve('../styles/home.css')} /> - <style> - header { - display: flex; - flex-direction: column; - gap: 1em; - max-width: min(100%, 68ch); - } - </style> -</head> -<body> - <main> - <header> - <div> - <img width="60" height="80" src="/assets/logo.svg" alt="Astro logo"> - <h1>Welcome to <a href="https://astro.build/">Astro</a> - - <a href="https://github.com/nanostores/nanostores">nanostores</a></h1> - </div> - </header> - <AdminsReact client:load /> - <AdminsSvelte client:load /> - <AdminsVue client:load /> - <AdminsPreact client:load /> - <AdminsSolid client:load /> - </main> -</body> + <style> + header { + display: flex; + flex-direction: column; + gap: 1em; + max-width: min(100%, 68ch); + } + </style> + </head> + <body> + <main> + <header> + <div> + <img width="60" height="80" src="/assets/logo.svg" alt="Astro logo" /> + <h1> + Welcome to <a href="https://astro.build/">Astro</a> - + <a href="https://github.com/nanostores/nanostores">nanostores</a> + </h1> + </div> + </header> + <AdminsReact client:load /> + <AdminsSvelte client:load /> + <AdminsVue client:load /> + <AdminsPreact client:load /> + <AdminsSolid client:load /> + </main> + </body> </html> diff --git a/examples/with-nanostores/src/store/counter.js b/examples/with-nanostores/src/store/counter.js index 42e82fff2..d4c29ad62 100644 --- a/examples/with-nanostores/src/store/counter.js +++ b/examples/with-nanostores/src/store/counter.js @@ -5,11 +5,11 @@ const initialValue = { value: 0 }; const counter = atom(initialValue); function increaseCounter() { - counter.set({ value: counter.get().value + 1 }); + counter.set({ value: counter.get().value + 1 }); } function decreaseCounter() { - counter.set({ value: counter.get().value - 1 }); + counter.set({ value: counter.get().value - 1 }); } export { counter, increaseCounter, decreaseCounter }; diff --git a/examples/with-nanostores/src/store/users.js b/examples/with-nanostores/src/store/users.js index f00aa83bd..7a2e23e9d 100644 --- a/examples/with-nanostores/src/store/users.js +++ b/examples/with-nanostores/src/store/users.js @@ -1,30 +1,30 @@ import { atom } from 'nanostores'; const initialValue = [ - { - id: 1, - name: 'User Admin', - age: 28, - isAdmin: true, - }, - { - id: 2, - name: 'NOT Admin', - age: 35, - isAdmin: false, - }, - { - id: 3, - name: 'Another Admin', - age: 46, - isAdmin: true, - }, + { + id: 1, + name: 'User Admin', + age: 28, + isAdmin: true, + }, + { + id: 2, + name: 'NOT Admin', + age: 35, + isAdmin: false, + }, + { + id: 3, + name: 'Another Admin', + age: 46, + isAdmin: true, + }, ]; const users = atom(initialValue); const addUser = function addUser(user) { - users.set([...users.get(), user]); + users.set([...users.get(), user]); }; export { users, addUser }; diff --git a/examples/with-nanostores/src/styles/global.css b/examples/with-nanostores/src/styles/global.css index e1a3a6bd1..a9f830eda 100644 --- a/examples/with-nanostores/src/styles/global.css +++ b/examples/with-nanostores/src/styles/global.css @@ -1,28 +1,28 @@ * { - box-sizing: border-box; - margin: 0; + box-sizing: border-box; + margin: 0; } :root { - font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji; - font-size: 1rem; - --user-font-scale: 1rem - 16px; - font-size: clamp(0.875rem, 0.4626rem + 1.0309vw + var(--user-font-scale), 1.125rem); + font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji; + font-size: 1rem; + --user-font-scale: 1rem - 16px; + font-size: clamp(0.875rem, 0.4626rem + 1.0309vw + var(--user-font-scale), 1.125rem); } body { - padding: 4rem 2rem; - width: 100%; - min-height: 100vh; - display: grid; - justify-content: center; - background: #f9fafb; - color: #111827; + padding: 4rem 2rem; + width: 100%; + min-height: 100vh; + display: grid; + justify-content: center; + background: #f9fafb; + color: #111827; } @media (prefers-color-scheme: dark) { - body { - background: #111827; - color: #fff; - } + body { + background: #111827; + color: #fff; + } } diff --git a/examples/with-nanostores/src/styles/home.css b/examples/with-nanostores/src/styles/home.css index 280398c17..5770429d1 100644 --- a/examples/with-nanostores/src/styles/home.css +++ b/examples/with-nanostores/src/styles/home.css @@ -1,39 +1,39 @@ :root { - --font-mono: Consolas, 'Andale Mono WT', 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Liberation Mono', - 'Nimbus Mono L', Monaco, 'Courier New', Courier, monospace; - --color-light: #f3f4f6; + --font-mono: Consolas, 'Andale Mono WT', 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Liberation Mono', + 'Nimbus Mono L', Monaco, 'Courier New', Courier, monospace; + --color-light: #f3f4f6; } @media (prefers-color-scheme: dark) { - :root { - --color-light: #1f2937; - } + :root { + --color-light: #1f2937; + } } a { - color: inherit; + color: inherit; } header > div { - font-size: clamp(2rem, -0.4742rem + 6.1856vw, 2.75rem); + font-size: clamp(2rem, -0.4742rem + 6.1856vw, 2.75rem); } header > div { - display: flex; - flex-direction: column; - align-items: center; + display: flex; + flex-direction: column; + align-items: center; } header h1 { - font-size: 1em; - font-weight: 500; + font-size: 1em; + font-weight: 500; } header img { - width: 2em; - height: 2.667em; + width: 2em; + height: 2.667em; } h2 { - font-weight: 500; - font-size: clamp(1.5rem, 1rem + 1.25vw, 2rem); + font-weight: 500; + font-size: clamp(1.5rem, 1rem + 1.25vw, 2rem); } diff --git a/examples/with-tailwindcss/astro.config.mjs b/examples/with-tailwindcss/astro.config.mjs index 68499b3fa..a1516f292 100644 --- a/examples/with-tailwindcss/astro.config.mjs +++ b/examples/with-tailwindcss/astro.config.mjs @@ -8,6 +8,6 @@ // @ts-check export default /** @type {import('astro').AstroUserConfig} */ ({ - // Enable the Preact renderer to support Preact JSX components. - renderers: ['@astrojs/renderer-preact'], + // Enable the Preact renderer to support Preact JSX components. + renderers: ['@astrojs/renderer-preact'], }); diff --git a/examples/with-tailwindcss/postcss.config.js b/examples/with-tailwindcss/postcss.config.js index 7cffbeb55..c3a002bfe 100644 --- a/examples/with-tailwindcss/postcss.config.js +++ b/examples/with-tailwindcss/postcss.config.js @@ -1,10 +1,10 @@ const path = require('path'); module.exports = { - plugins: { - tailwindcss: { - config: path.join(__dirname, 'tailwind.config.js'), // update this if your path differs! - }, - autoprefixer: {}, - }, + plugins: { + tailwindcss: { + config: path.join(__dirname, 'tailwind.config.js'), // update this if your path differs! + }, + autoprefixer: {}, + }, }; diff --git a/examples/with-tailwindcss/src/components/Button.astro b/examples/with-tailwindcss/src/components/Button.astro index 966c613aa..5e241c44f 100644 --- a/examples/with-tailwindcss/src/components/Button.astro +++ b/examples/with-tailwindcss/src/components/Button.astro @@ -1,6 +1,10 @@ --- let { type = 'button' } = Astro.props; --- -<button class="py-2 px-4 bg-purple-500 text-white font-semibold rounded-lg shadow-md hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-purple-400 focus:ring-opacity-75" type={type}> - <slot /> + +<button + class="py-2 px-4 bg-purple-500 text-white font-semibold rounded-lg shadow-md hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-purple-400 focus:ring-opacity-75" + {type} +> + <slot /> </button> diff --git a/examples/with-tailwindcss/src/pages/index.astro b/examples/with-tailwindcss/src/pages/index.astro index 28d5f3dec..07262b870 100644 --- a/examples/with-tailwindcss/src/pages/index.astro +++ b/examples/with-tailwindcss/src/pages/index.astro @@ -5,15 +5,16 @@ import Button from '../components/Button.astro'; // Full Astro Component Syntax: // https://docs.astro.build/core-concepts/astro-components/ --- + <html lang="en"> - <head> - <meta charset="UTF-8" /> - <link rel="icon" type="image/x-icon" href="/favicon.ico" /> - <title>Astro + TailwindCSS</title> - <link rel="stylesheet" type="text/css" href={Astro.resolve("../styles/global.css")}> - </head> + <head> + <meta charset="UTF-8" /> + <link rel="icon" type="image/x-icon" href="/favicon.ico" /> + <title>Astro + TailwindCSS</title> + <link rel="stylesheet" type="text/css" href={Astro.resolve('../styles/global.css')} /> + </head> - <body> - <Button>I’m a Tailwind Button!</Button> - </body> + <body> + <Button>I’m a Tailwind Button!</Button> + </body> </html> diff --git a/examples/with-tailwindcss/tailwind.config.js b/examples/with-tailwindcss/tailwind.config.js index 627a00ab2..30b9aff01 100644 --- a/examples/with-tailwindcss/tailwind.config.js +++ b/examples/with-tailwindcss/tailwind.config.js @@ -1,3 +1,3 @@ module.exports = { - content: ['./src/**/*.{astro,html,js,jsx,svelte,ts,tsx,vue}'], + content: ['./src/**/*.{astro,html,js,jsx,svelte,ts,tsx,vue}'], }; diff --git a/examples/with-vite-plugin-pwa/astro.config.mjs b/examples/with-vite-plugin-pwa/astro.config.mjs index d8fc2ac26..05dac6602 100644 --- a/examples/with-vite-plugin-pwa/astro.config.mjs +++ b/examples/with-vite-plugin-pwa/astro.config.mjs @@ -10,7 +10,7 @@ import { VitePWA } from 'vite-plugin-pwa'; // @ts-check export default /** @type {import('astro').AstroUserConfig} */ ({ - vite: { - plugins: [VitePWA()], - }, + vite: { + plugins: [VitePWA()], + }, }); diff --git a/examples/with-vite-plugin-pwa/src/index.ts b/examples/with-vite-plugin-pwa/src/index.ts index 187159528..2595fe3a8 100644 --- a/examples/with-vite-plugin-pwa/src/index.ts +++ b/examples/with-vite-plugin-pwa/src/index.ts @@ -1,10 +1,10 @@ import { registerSW } from 'virtual:pwa-register'; const updateSW = registerSW({ - onNeedRefresh() {}, - onOfflineReady() { - console.log('Offline ready'); - }, + onNeedRefresh() {}, + onOfflineReady() { + console.log('Offline ready'); + }, }); updateSW(); diff --git a/examples/with-vite-plugin-pwa/src/pages/index.astro b/examples/with-vite-plugin-pwa/src/pages/index.astro index 008442824..7fdcc305e 100644 --- a/examples/with-vite-plugin-pwa/src/pages/index.astro +++ b/examples/with-vite-plugin-pwa/src/pages/index.astro @@ -2,17 +2,15 @@ --- <html lang="en"> + <head> + <meta charset="utf-8" /> + <link rel="icon" type="image/x-icon" href="/favicon.ico" /> + <meta name="viewport" content="width=device-width" /> + <title>Welcome to Astro</title> + </head> -<head> - <meta charset="utf-8" /> - <link rel="icon" type="image/x-icon" href="/favicon.ico" /> - <meta name="viewport" content="width=device-width" /> - <title>Welcome to Astro</title> -</head> - -<body> - <h1>Welcome to <a href="https://astro.build/">Astro</a></h1> - <script src={Astro.resolve('../index.ts')} type="module" hoist /> -</body> - + <body> + <h1>Welcome to <a href="https://astro.build/">Astro</a></h1> + <script src={Astro.resolve('../index.ts')} type="module" hoist></script> + </body> </html> diff --git a/examples/with-vite-plugin-pwa/src/vite-env.d.ts b/examples/with-vite-plugin-pwa/src/vite-env.d.ts index 6b53adfef..1a947fad0 100644 --- a/examples/with-vite-plugin-pwa/src/vite-env.d.ts +++ b/examples/with-vite-plugin-pwa/src/vite-env.d.ts @@ -1,11 +1,11 @@ declare module 'virtual:pwa-register' { - export type RegisterSWOptions = { - immediate?: boolean; - onNeedRefresh?: () => void; - onOfflineReady?: () => void; - onRegistered?: (registration: ServiceWorkerRegistration | undefined) => void; - onRegisterError?: (error: any) => void; - }; + export type RegisterSWOptions = { + immediate?: boolean; + onNeedRefresh?: () => void; + onOfflineReady?: () => void; + onRegistered?: (registration: ServiceWorkerRegistration | undefined) => void; + onRegisterError?: (error: any) => void; + }; - export function registerSW(options?: RegisterSWOptions): (reloadPage?: boolean) => Promise<void>; + export function registerSW(options?: RegisterSWOptions): (reloadPage?: boolean) => Promise<void>; } |