diff options
21 files changed, 483 insertions, 563 deletions
diff --git a/examples/portfolio/astro.config.mjs b/examples/portfolio/astro.config.mjs index 08916b1fe..882e6515a 100644 --- a/examples/portfolio/astro.config.mjs +++ b/examples/portfolio/astro.config.mjs @@ -1,7 +1,4 @@ import { defineConfig } from 'astro/config'; -import preact from '@astrojs/preact'; // https://astro.build/config -export default defineConfig({ - integrations: [preact()], -}); +export default defineConfig({}); diff --git a/examples/portfolio/package.json b/examples/portfolio/package.json index 80548ef9d..a1c002dc7 100644 --- a/examples/portfolio/package.json +++ b/examples/portfolio/package.json @@ -10,9 +10,6 @@ "astro": "astro" }, "dependencies": { - "preact": "^10.7.3", - "@astrojs/preact": "^1.0.2", - "astro": "^1.1.5", - "sass": "^1.52.2" + "astro": "^1.1.5" } } diff --git a/examples/portfolio/src/components/Button/index.jsx b/examples/portfolio/src/components/Button/index.jsx deleted file mode 100644 index d8e04aa71..000000000 --- a/examples/portfolio/src/components/Button/index.jsx +++ /dev/null @@ -1,8 +0,0 @@ -import { h } from 'preact'; -import Styles from './styles.module.scss'; - -function Button({ children }) { - 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 deleted file mode 100644 index f0e39df3f..000000000 --- a/examples/portfolio/src/components/Button/styles.module.scss +++ /dev/null @@ -1,7 +0,0 @@ -.button { - 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.astro b/examples/portfolio/src/components/Footer.astro new file mode 100644 index 000000000..f238d6b6f --- /dev/null +++ b/examples/portfolio/src/components/Footer.astro @@ -0,0 +1,25 @@ +--- +const currentYear = new Date().getFullYear(); +--- + +<footer> + © {currentYear} Jeanine White + <small class="byline">🚀 Built by Astro</small> +</footer> +<style> + footer { + 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; + } +</style> diff --git a/examples/portfolio/src/components/Footer/index.jsx b/examples/portfolio/src/components/Footer/index.jsx deleted file mode 100644 index 42953c367..000000000 --- a/examples/portfolio/src/components/Footer/index.jsx +++ /dev/null @@ -1,12 +0,0 @@ -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> - ); -} -export default Footer; diff --git a/examples/portfolio/src/components/Footer/styles.module.scss b/examples/portfolio/src/components/Footer/styles.module.scss deleted file mode 100644 index 9e76a6a2f..000000000 --- a/examples/portfolio/src/components/Footer/styles.module.scss +++ /dev/null @@ -1,15 +0,0 @@ -.footer { - 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; -} diff --git a/examples/portfolio/src/components/MainHead.astro b/examples/portfolio/src/components/MainHead.astro index 5e4e49b97..d7757af2a 100644 --- a/examples/portfolio/src/components/MainHead.astro +++ b/examples/portfolio/src/components/MainHead.astro @@ -1,5 +1,5 @@ --- -import '../styles/global.scss'; +import '../styles/global.css'; const { title = 'Jeanine White: Personal Site', description = 'The personal site of Jeanine White', diff --git a/examples/portfolio/src/components/Nav.astro b/examples/portfolio/src/components/Nav.astro new file mode 100644 index 000000000..ea7562571 --- /dev/null +++ b/examples/portfolio/src/components/Nav.astro @@ -0,0 +1,99 @@ +<nav> + <a class="link" href="/"> + <div class="monogram">JW</div> + </a> + <a class="link" href="/projects/"> Portfolio</a> + <a class="link" href="/about/"> About</a> + <div class="socials"> + <a class="social" href="https://twitter.com/me"> + <svg class="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" + ></path> + </svg> + </a> + <a class="social" href="https://github.com/me"> + <svg class="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" + ></path> + </svg> + </a> + <a class="social" href="https://dev.to/me"> + <svg + class="socialIcon" + xmlns="http://www.w3.org/2000/svg" + viewBox="0 0 50 40" + style="enable-background:new 0 0 50 40" + xml:space="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> + <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" + ></path> + </svg> + </a> + </div> +</nav> + +<style> + nav { + display: flex; + gap: 1rem; + align-items: center; + padding: 1rem; + } + + .link { + color: var(--t-subdue); + display: block; + text-decoration: none; + font-size: var(--f-d1); + text-transform: uppercase; + padding-top: 0.75em; + padding-bottom: 0.75em; + } + + .link:hover, + .link:focus { + 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%; + } + + .socials { + display: flex; + gap: 0.75em; + margin-left: auto; + } + + .social { + display: block; + } + + .socialIcon { + display: block; + width: 1.25rem; + height: 1.25rem; + fill: var(--t-subdue); + transition: fill linear 150ms; + } + + .socialIcon:hover { + fill: var(--t-active); + } +</style> diff --git a/examples/portfolio/src/components/Nav/index.jsx b/examples/portfolio/src/components/Nav/index.jsx deleted file mode 100644 index b7cd28f36..000000000 --- a/examples/portfolio/src/components/Nav/index.jsx +++ /dev/null @@ -1,41 +0,0 @@ -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> - ); -} -export default Nav; diff --git a/examples/portfolio/src/components/Nav/styles.module.scss b/examples/portfolio/src/components/Nav/styles.module.scss deleted file mode 100644 index ecbe5585e..000000000 --- a/examples/portfolio/src/components/Nav/styles.module.scss +++ /dev/null @@ -1,65 +0,0 @@ -.nav { - 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; -} - -.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; - - &: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%; -} - -.social { - display: block; - margin-left: auto; - - + .social { - margin-left: 0.75rem; - } -} - -.socialicon { - display: block; - width: 1.25rem; - height: 1.25rem; - fill: var(--t-subdue); - transition: fill linear 150ms; - - &:hover { - fill: var(--t-active); - } -} diff --git a/examples/portfolio/src/components/PortfolioPreview.astro b/examples/portfolio/src/components/PortfolioPreview.astro new file mode 100644 index 000000000..3d0a91522 --- /dev/null +++ b/examples/portfolio/src/components/PortfolioPreview.astro @@ -0,0 +1,135 @@ +--- +const { frontmatter, url } = Astro.props.project; +--- + +<div class="card"> + <div class="titleCard" style={`background-image:url(${frontmatter.img})`}> + <h1 class="title">{frontmatter.title}</h1> + </div> + <div class="descCard"> + <p class="desc">{frontmatter.description}</p> + <div class="tags"> + Tagged: + {frontmatter.tags.map((t) => ( + <div class="tag" data-tag={t}> + {t} + </div> + ))} + </div> + <a class="link" href={url}> + <span class="linkInner">View</span> + </a> + </div> +</div> + +<style> + .card { + 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; + } + + .titleCard { + position: relative; + background-size: cover; + background-position: 50% 100%; + padding-top: 37.5%; + } + + .descCard { + padding: 1.5em; + } + + .desc { + font-size: var(--f-u1); + line-height: 1.4; + margin-top: 0em; + margin-bottom: 1em; + } + + .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; + } + + .link:focus, + .link:hover { + opacity: 1; + } + + .link:focus, + .link:hover .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%); + } + + .nav { + display: flex; + justify-content: flex-end; + } + + .tags { + font-size: var(--f-d2); + text-transform: uppercase; + } + + .tag { + display: inline-block; + color: var(--c-yellow); + text-transform: uppercase; + margin-left: 0.5em; + } + + .tag:nth-of-type(1n) { + color: var(--c-green); + } + .tag:nth-of-type(2n) { + color: var(--c-orange); + } + .tag:nth-of-type(3n) { + color: var(--c-blue); + } + .tag:nth-of-type(4n) { + color: var(--c-pink); + } +</style> diff --git a/examples/portfolio/src/components/PortfolioPreview/index.jsx b/examples/portfolio/src/components/PortfolioPreview/index.jsx deleted file mode 100644 index 4f1627604..000000000 --- a/examples/portfolio/src/components/PortfolioPreview/index.jsx +++ /dev/null @@ -1,29 +0,0 @@ -import { h } from 'preact'; -import Styles from './styles.module.scss'; - -function PortfolioPreview({ project }) { - const { frontmatter } = project; - return ( - <div className={Styles.card}> - <div className={Styles.titleCard} style={`background-image:url(${frontmatter.img})`}> - <h1 className={Styles.title}>{frontmatter.title}</h1> - </div> - <div className="pa3"> - <p className={`${Styles.desc} mt0 mb2`}>{frontmatter.description}</p> - <div className={Styles.tags}> - Tagged: - {frontmatter.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 deleted file mode 100644 index bded61547..000000000 --- a/examples/portfolio/src/components/PortfolioPreview/styles.module.scss +++ /dev/null @@ -1,102 +0,0 @@ -.card { - 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; -} - -.titleCard { - position: relative; - background-size: cover; - background-position: 50% 100%; - padding-top: 37.5%; -} - -.desc { - 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; - - &:focus, - &:hover { - opacity: 1; - - .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%); -} - -.nav { - display: flex; - justify-content: flex-end; -} - -.tags { - font-size: var(--f-d2); - text-transform: uppercase; -} - -.tag { - 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); - } -} diff --git a/examples/portfolio/src/layouts/project.astro b/examples/portfolio/src/layouts/project.astro index aba14a5ac..f02f89c74 100644 --- a/examples/portfolio/src/layouts/project.astro +++ b/examples/portfolio/src/layouts/project.astro @@ -1,8 +1,7 @@ --- import MainHead from '../components/MainHead.astro'; -import Button from '../components/Button/index.jsx'; -import Footer from '../components/Footer/index.jsx'; -import Nav from '../components/Nav/index.jsx'; +import Footer from '../components/Footer.astro'; +import Nav from '../components/Nav.astro'; const { content } = Astro.props; --- @@ -10,7 +9,7 @@ const { content } = Astro.props; <html lang={content.lang || 'en'}> <head> <MainHead title={content.title} description={content.description} /> - <style lang="scss"> + <style> .hero { padding: 8rem; display: flex; @@ -28,19 +27,19 @@ const { content } = Astro.props; margin-left: 0.5em; margin-right: 0.5em; text-transform: uppercase; + } - &: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:nth-of-type(1n) { + color: var(--c-green); + } + .tag:nth-of-type(2n) { + color: var(--c-orange); + } + .tag:nth-of-type(3n) { + color: var(--c-blue); + } + .tag:nth-of-type(4n) { + color: var(--c-pink); } .title { @@ -51,8 +50,10 @@ const { content } = Astro.props; } .leadIn { + padding-top: 4em; color: var(--t-bg); background-color: var(--t-fg); + text-align: center; } .tagline { @@ -64,6 +65,18 @@ const { content } = Astro.props; .content { font-size: var(--f-u1); line-height: 2.2; + max-width: 50em; + margin: auto; + } + + .wrapper { + padding-bottom: 4em; + margin-bottom: 4em; + } + + footer { + text-align: center; + margin-top: 3rem; } </style> </head> @@ -73,18 +86,16 @@ const { content } = Astro.props; <h1 class="title">{content.title}</h1> </header> <div class="leadIn"> - <div class="wrapper pt8 pb8 mb8 tac"> + <div class="wrapper"> {content.tags.map((t) => <span class="tag">{t}</span>)} <h3 class="tagline">{content.description}</h3> </div> </div> - <div class="wrapper wrapper__readable"> + <div class="wrapper"> <div class="content"><slot /></div> </div> - <footer class="tac mt6"> - <a href="/projects"> - <Button>View More</Button> - </a> + <footer> + <a href="/projects" class="button">View More</a> </footer> <Footer /> </body> diff --git a/examples/portfolio/src/pages/404.astro b/examples/portfolio/src/pages/404.astro index a2feb4158..f776936af 100644 --- a/examples/portfolio/src/pages/404.astro +++ b/examples/portfolio/src/pages/404.astro @@ -1,19 +1,25 @@ --- import MainHead from '../components/MainHead.astro'; -import Footer from '../components/Footer/index.jsx'; -import Nav from '../components/Nav/index.jsx'; +import Footer from '../components/Footer.astro'; +import Nav from '../components/Nav.astro'; --- <html lang="en"> <head> <MainHead title="Not Found" /> + <style> + .wrapper { + margin-top: 2em; + margin-bottom: 2em; + } + </style> </head> <body> - <nav></nav> - <div class="wrapper mt4 mb4"> + <Nav /> + <div class="wrapper"> <h1>Page Not Found</h1> <p>Not found</p> </div> - <footer></footer> + <Footer /> </body> </html> diff --git a/examples/portfolio/src/pages/about.astro b/examples/portfolio/src/pages/about.astro index a4205bb00..8772b3a1c 100644 --- a/examples/portfolio/src/pages/about.astro +++ b/examples/portfolio/src/pages/about.astro @@ -1,26 +1,31 @@ --- import MainHead from '../components/MainHead.astro'; -import Footer from '../components/Footer/index.jsx'; -import Nav from '../components/Nav/index.jsx'; +import Footer from '../components/Footer.astro'; +import Nav from '../components/Nav.astro'; --- <html lang="en"> <head> <MainHead title="About | Jeanine White" description="About Jeanine White Lorem Ipsum" /> - <style lang="scss"> + <style> .heroImg { max-height: 24rem; object-fit: cover; overflow: hidden; + } - img { - width: 100%; - } + .heroImg img { + width: 100%; } .bio { font-size: var(--f-u1); line-height: 2; + margin-top: 4em; + } + + .wrapper.bio { + max-width: 50em; } </style> </head> @@ -35,7 +40,7 @@ import Nav from '../components/Nav/index.jsx'; 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"> + <div class="bio wrapper"> <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 diff --git a/examples/portfolio/src/pages/index.astro b/examples/portfolio/src/pages/index.astro index 174bd1896..2d636de51 100644 --- a/examples/portfolio/src/pages/index.astro +++ b/examples/portfolio/src/pages/index.astro @@ -1,10 +1,9 @@ --- // Component Imports import MainHead from '../components/MainHead.astro'; -import Button from '../components/Button/index.jsx'; -import Nav from '../components/Nav/index.jsx'; -import Footer from '../components/Footer/index.jsx'; -import PortfolioPreview from '../components/PortfolioPreview/index.jsx'; +import Nav from '../components/Nav.astro'; +import Footer from '../components/Footer.astro'; +import PortfolioPreview from '../components/PortfolioPreview.astro'; // Data Fetching: List all Markdown posts in the repo. const projects = await Astro.glob('./project/**/*.md'); @@ -20,14 +19,19 @@ const featuredProject = projects[0]; title="Jeanine White: Personal Site" description="Jeanine White: Developer, Speaker, and Writer..." /> - <style lang="scss"> - $w-s: 750px; + <style> + .wrapper { + margin-top: 2em; + margin-bottom: 2em; + } .hero { position: relative; overflow: hidden; + } - @media (min-width: $w-s) { + @media (min-width: 750px) { + .hero { height: 45vw; } } @@ -69,19 +73,23 @@ const featuredProject = projects[0]; align-items: flex-start; justify-content: center; padding-left: 2rem; + } - @media (min-width: $w-s) { + @media (min-width: 750px) { + .overlay { padding-left: 4rem; } } .title { font-weight: 900; - font-size: var(--f-u8); + font-size: var(--f-u6); margin-bottom: 0.5rem; margin-top: 0; + } - @media (min-width: $w-s) { + @media (min-width: 750px) { + .title { font-size: var(--f-u12); } } @@ -89,8 +97,10 @@ const featuredProject = projects[0]; .grid { display: grid; grid-gap: 2rem; + } - @media (min-width: 1200px) { + @media (min-width: 1200px) { + .grid { grid-template-columns: 2fr 1fr; } } @@ -102,46 +112,44 @@ const featuredProject = projects[0]; margin-bottom: 2rem; } + .roles { + display: flex; + flex-wrap: wrap; + gap: 0.5em; + font-size: var(--f-d1); + } + .role { position: relative; display: inline-block; + white-space: nowrap; 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) { + @media (min-width: 750px) { + .role { font-size: var(--f-u3); } + } - + .role { - margin-left: 1em; - } - - &:nth-of-type(1) { - .invert { - background-color: var(--c-pink); - } - } + .role:nth-of-type(1) .invert { + background-color: var(--c-pink); + } - &:nth-of-type(2) { - .invert { - background-color: var(--c-blue); - } - } + .role:nth-of-type(2) .invert { + background-color: var(--c-blue); + } - &:nth-of-type(3) { - .invert { - background-color: var(--c-green); - } - } + .role:nth-of-type(3) .invert { + background-color: var(--c-green); + } - &:hover { - .invert { - clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); - } - } + .role:hover .invert { + clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); } .invert { @@ -160,7 +168,7 @@ const featuredProject = projects[0]; } .desc { - font-size: var(--f-u2); + font-size: var(--f-u1); margin-top: 1.5rem; margin-bottom: 0; } @@ -175,14 +183,19 @@ const featuredProject = projects[0]; .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); - } + .bio > span:first-of-type { + line-height: 1; + margin-bottom: 0.5em; + display: block; + font-weight: 700; + font-size: var(--f-u4); + } + + .buttonContainer { + text-align: center; + margin-top: 2em; } </style> </head> @@ -203,23 +216,21 @@ const featuredProject = projects[0]; <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> + <div class="roles"> + <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"> + <main class="wrapper"> <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 class="buttonContainer"> + <a href="/products/" class="button">View All</a> </div> </div> <div class="section"> diff --git a/examples/portfolio/src/pages/projects.astro b/examples/portfolio/src/pages/projects.astro index a52f7e203..415e7aeeb 100644 --- a/examples/portfolio/src/pages/projects.astro +++ b/examples/portfolio/src/pages/projects.astro @@ -1,8 +1,8 @@ --- import MainHead from '../components/MainHead.astro'; -import Footer from '../components/Footer/index.jsx'; -import Nav from '../components/Nav/index.jsx'; -import PortfolioPreview from '../components/PortfolioPreview/index.jsx'; +import Footer from '../components/Footer.astro'; +import Nav from '../components/Nav.astro'; +import PortfolioPreview from '../components/PortfolioPreview.astro'; const projects = (await Astro.glob('./project/**/*.md')) .filter(({ frontmatter }) => !!frontmatter.publishDate) @@ -18,17 +18,21 @@ const projects = (await Astro.glob('./project/**/*.md')) title="All Projects | Jeanine White" description="Learn about Jeanine White's most recent projects" /> - <style lang="scss"> + <style> .grid { display: grid; grid-gap: 3rem; } + .title { + margin-top: 2rem; + margin-bottom: 2rem; + } </style> </head> <body> <Nav /> <div class="wrapper"> - <h1 class="title mt4 mb4">All Projects</h1> + <h1 class="title">All Projects</h1> <div class="grid"> {projects.map((project) => <PortfolioPreview project={project} />)} </div> diff --git a/examples/portfolio/src/styles/global.scss b/examples/portfolio/src/styles/global.css index 453adadbe..f1eceb91b 100644 --- a/examples/portfolio/src/styles/global.scss +++ b/examples/portfolio/src/styles/global.css @@ -1,6 +1,6 @@ -// Tokens +/* Global variables */ :root { - // (c)olor + /* Colors */ --c-black: #05091e; --c-blue: #46b4ff; --c-gray: #90aab7; @@ -10,7 +10,7 @@ --c-yellow: #ffdace; --c-white: #fff; - // (f)ont + /* Fonts */ --f-u18: 11.390625em; --f-u17: 9.950627481136905em; --f-u16: 8.692673779389363em; @@ -48,15 +48,12 @@ --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); } -// Base - body { margin: 0; color: var(--t-fg); @@ -80,77 +77,14 @@ h1 { font-size: var(--f-u8); } -// Utils - -// 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}); - } -} - -// 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}); - } -} - -// 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; - } +.button { + display: inline-block; + border: 3px solid currentColor; + padding: 0.5em 1em; + font-weight: 700; + text-transform: uppercase; } -// text align -.tac { - text-align: center; -} -.tal { - text-align: left; -} -.tar { - text-align: right; -} - -// wrapper .wrapper { max-width: 80em; margin-left: auto; @@ -158,6 +92,4 @@ $colors: 'black', 'blue', 'white'; padding-left: 2rem; padding-right: 2rem; } -.wrapper__readable { - max-width: 50em; -} + diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 35cea9fc7..df76eaa37 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -108,21 +108,15 @@ importers: '@astrojs/preact': link:../../packages/integrations/preact '@astrojs/react': link:../../packages/integrations/react '@docsearch/css': 3.2.1 - '@docsearch/react': 3.2.1_kdydlnxq43jbqimy6lw2whzu34 + '@docsearch/react': 3.2.1_h2q7ltx4sqgye5xvrbnj7n2sfm '@types/node': 18.7.15 - '@types/react': 17.0.49 + '@types/react': 17.0.48 '@types/react-dom': 18.0.6 astro: link:../../packages/astro preact: 10.10.6 react: 18.2.0 react-dom: 18.2.0_react@18.2.0 - examples/env-vars: - specifiers: - astro: ^1.1.5 - dependencies: - astro: link:../../packages/astro - examples/framework-alpine: specifiers: '@astrojs/alpinejs': ^0.1.1 @@ -195,7 +189,7 @@ importers: react-dom: ^18.1.0 dependencies: '@astrojs/react': link:../../packages/integrations/react - '@types/react': 18.0.18 + '@types/react': 18.0.17 '@types/react-dom': 18.0.6 astro: link:../../packages/astro react: 18.2.0 @@ -245,15 +239,9 @@ importers: examples/portfolio: specifiers: - '@astrojs/preact': ^1.0.2 astro: ^1.1.5 - preact: ^10.7.3 - sass: ^1.52.2 dependencies: - '@astrojs/preact': link:../../packages/integrations/preact astro: link:../../packages/astro - preact: 10.10.6 - sass: 1.54.8 examples/ssr: specifiers: @@ -275,18 +263,6 @@ importers: unocss: 0.15.6 vite-imagetools: 4.0.9 - examples/subpath: - specifiers: - '@astrojs/react': ^1.1.0 - astro: ^1.1.5 - react: ^18.1.0 - react-dom: ^18.1.0 - dependencies: - '@astrojs/react': link:../../packages/integrations/react - astro: link:../../packages/astro - react: 18.2.0 - react-dom: 18.2.0_react@18.2.0 - examples/with-markdown-plugins: specifiers: '@astrojs/markdown-remark': ^1.1.0 @@ -507,7 +483,7 @@ importers: tsconfig-resolver: 3.0.1 unist-util-visit: 4.1.1 vfile: 5.3.4 - vite: 3.0.9_sass@1.54.8 + vite: 3.0.9_sass@1.54.6 yargs-parser: 21.1.1 zod: 3.19.0 devDependencies: @@ -537,7 +513,7 @@ importers: chai: 4.3.6 cheerio: 1.0.0-rc.12 mocha: 9.2.2 - sass: 1.54.8 + sass: 1.54.6 srcset-parse: 1.1.0 packages/astro-prism: @@ -629,7 +605,7 @@ importers: sass: ^1.52.2 dependencies: astro: link:../../.. - sass: 1.54.8 + sass: 1.54.6 packages/astro/e2e/fixtures/errors: specifiers: @@ -2310,7 +2286,7 @@ importers: astro: link:../../astro astro-scripts: link:../../../scripts cheerio: 1.0.0-rc.12 - sass: 1.54.8 + sass: 1.54.6 packages/integrations/mdx: specifiers: @@ -2556,7 +2532,7 @@ importers: '@babel/core': 7.19.0 '@babel/plugin-transform-react-jsx': 7.19.0_@babel+core@7.19.0 devDependencies: - '@types/react': 17.0.49 + '@types/react': 17.0.48 '@types/react-dom': 17.0.17 astro: link:../../astro astro-scripts: link:../../../scripts @@ -2911,10 +2887,10 @@ importers: dependencies: node-fetch: 3.2.10 devDependencies: - '@rollup/plugin-alias': 3.1.9_rollup@2.79.0 - '@rollup/plugin-inject': 4.0.4_rollup@2.79.0 - '@rollup/plugin-node-resolve': 13.3.0_rollup@2.79.0 - '@rollup/plugin-typescript': 8.5.0_ppxule2mhlgb6ds3e4gxjflaqy + '@rollup/plugin-alias': 3.1.9_rollup@2.78.1 + '@rollup/plugin-inject': 4.0.4_rollup@2.78.1 + '@rollup/plugin-node-resolve': 13.3.0_rollup@2.78.1 + '@rollup/plugin-typescript': 8.5.0_5zsqiitiqqdgwm4iemtywlnhku '@types/chai': 4.3.3 '@types/mocha': 9.1.1 '@types/node': 14.18.27 @@ -2926,8 +2902,8 @@ importers: formdata-polyfill: 4.0.10 magic-string: 0.25.9 mocha: 9.2.2 - rollup: 2.79.0 - rollup-plugin-terser: 7.0.2_rollup@2.79.0 + rollup: 2.78.1 + rollup-plugin-terser: 7.0.2_rollup@2.78.1 tslib: 2.4.0 typescript: 4.7.4 urlpattern-polyfill: 1.0.0-rc5 @@ -3212,14 +3188,14 @@ packages: dependencies: '@vscode/emmet-helper': 2.8.4 prettier: 2.7.1 - prettier-plugin-astro: 0.5.4 + prettier-plugin-astro: 0.5.3 source-map: 0.7.4 typescript: 4.6.4 vscode-css-languageservice: 6.1.0 vscode-html-languageservice: 5.0.1 vscode-languageserver: 8.0.2 vscode-languageserver-protocol: 3.17.2 - vscode-languageserver-textdocument: 1.0.7 + vscode-languageserver-textdocument: 1.0.5 vscode-languageserver-types: 3.17.2 vscode-uri: 3.0.3 dev: false @@ -5006,7 +4982,7 @@ packages: resolution: {integrity: sha512-gaP6TxxwQC+K8D6TRx5WULUWKrcbzECOPA2KCVMuI+6C7dNiGUk5yXXzVhc5sld79XKYLnO9DRTI4mjXDYkh+g==} dev: false - /@docsearch/react/3.2.1_kdydlnxq43jbqimy6lw2whzu34: + /@docsearch/react/3.2.1_h2q7ltx4sqgye5xvrbnj7n2sfm: resolution: {integrity: sha512-EzTQ/y82s14IQC5XVestiK/kFFMe2aagoYFuTAIfIb/e+4FU7kSMKonRtLwsCiLQHmjvNQq+HO+33giJ5YVtaQ==} peerDependencies: '@types/react': '>= 16.8.0 < 19.0.0' @@ -5023,7 +4999,7 @@ packages: '@algolia/autocomplete-core': 1.7.1 '@algolia/autocomplete-preset-algolia': 1.7.1_qs6lk5nhygj2o3hj4sf6xnr724 '@docsearch/css': 3.2.1 - '@types/react': 17.0.49 + '@types/react': 17.0.48 algoliasearch: 4.14.2 react: 18.2.0 react-dom: 18.2.0_react@18.2.0 @@ -5590,7 +5566,7 @@ packages: resolution: {integrity: sha512-/USkK4cioY209wXRpund6HZzHo9GmjakpV9ycOkpMcMxMk7QVcVFVyCMtzvXYiHsB2crgDgrtNYSELYFBXhhaA==} engines: {node: '>= 14'} dependencies: - '@octokit/types': 7.2.0 + '@octokit/types': 7.1.1 dev: true /@octokit/core/3.6.0: @@ -5679,8 +5655,8 @@ packages: '@octokit/openapi-types': 12.11.0 dev: true - /@octokit/types/7.2.0: - resolution: {integrity: sha512-pYQ/a1U6mHptwhGyp6SvsiM4bWP2s3V95olUeTxas85D/2kN78yN5C8cGN+P4LwJSWUqIEyvq0Qn2WUn6NQRjw==} + /@octokit/types/7.1.1: + resolution: {integrity: sha512-Dx6cNTORyVaKY0Yeb9MbHksk79L8GXsihbG6PtWqTpkyA2TY1qBWE26EQXVG3dHwY9Femdd/WEeRUEiD0+H3TQ==} dependencies: '@octokit/openapi-types': 13.8.0 dev: true @@ -8541,7 +8517,7 @@ packages: react: 18.2.0 dev: false - /@rollup/plugin-alias/3.1.9_rollup@2.79.0: + /@rollup/plugin-alias/3.1.9_rollup@2.78.1: resolution: {integrity: sha512-QI5fsEvm9bDzt32k39wpOwZhVzRcL5ydcffUHMyLVaVaLeC70I8TJZ17F1z1eMoLu4E/UOcH9BWVkKpIKdrfiw==} engines: {node: '>=8.0.0'} peerDependencies: @@ -8550,11 +8526,11 @@ packages: rollup: optional: true dependencies: - rollup: 2.79.0 + rollup: 2.78.1 slash: 3.0.0 dev: true - /@rollup/plugin-babel/5.3.1_b6woseefyuugm6lsnk4tw7iz2e: + /@rollup/plugin-babel/5.3.1_o3fvycpalvsydbhpdgqv4wrrry: resolution: {integrity: sha512-WFfdLWU/xVWKeRQnKmIAQULUI7Il0gZnBIH/ZFO069wYIfPu+8zrfp/KMW0atmELoRDq8FbiP3VCss9MhCut7Q==} engines: {node: '>= 10.0.0'} peerDependencies: @@ -8571,11 +8547,11 @@ packages: dependencies: '@babel/core': 7.19.0 '@babel/helper-module-imports': 7.18.6 - '@rollup/pluginutils': 3.1.0_rollup@2.79.0 - rollup: 2.79.0 + '@rollup/pluginutils': 3.1.0_rollup@2.78.1 + rollup: 2.78.1 dev: false - /@rollup/plugin-inject/4.0.4_rollup@2.79.0: + /@rollup/plugin-inject/4.0.4_rollup@2.78.1: resolution: {integrity: sha512-4pbcU4J/nS+zuHk+c+OL3WtmEQhqxlZ9uqfjQMQDOHOPld7PsCd8k5LWs8h5wjwJN7MgnAn768F2sDxEP4eNFQ==} peerDependencies: rollup: ^1.20.0 || ^2.0.0 @@ -8583,13 +8559,13 @@ packages: rollup: optional: true dependencies: - '@rollup/pluginutils': 3.1.0_rollup@2.79.0 + '@rollup/pluginutils': 3.1.0_rollup@2.78.1 estree-walker: 2.0.2 magic-string: 0.25.9 - rollup: 2.79.0 + rollup: 2.78.1 dev: true - /@rollup/plugin-node-resolve/11.2.1_rollup@2.79.0: + /@rollup/plugin-node-resolve/11.2.1_rollup@2.78.1: resolution: {integrity: sha512-yc2n43jcqVyGE2sqV5/YCmocy9ArjVAP/BeXyTtADTBBX6V0e5UMqwO8CdQ0kzjb6zu5P1qMzsScCMRvE9OlVg==} engines: {node: '>= 10.0.0'} peerDependencies: @@ -8598,16 +8574,16 @@ packages: rollup: optional: true dependencies: - '@rollup/pluginutils': 3.1.0_rollup@2.79.0 + '@rollup/pluginutils': 3.1.0_rollup@2.78.1 '@types/resolve': 1.17.1 builtin-modules: 3.3.0 deepmerge: 4.2.2 is-module: 1.0.0 resolve: 1.22.1 - rollup: 2.79.0 + rollup: 2.78.1 dev: false - /@rollup/plugin-node-resolve/13.3.0_rollup@2.79.0: + /@rollup/plugin-node-resolve/13.3.0_rollup@2.78.1: resolution: {integrity: sha512-Lus8rbUo1eEcnS4yTFKLZrVumLPY+YayBdWXgFSHYhTT2iJbMhoaaBL3xl5NCdeRytErGr8tZ0L71BMRmnlwSw==} engines: {node: '>= 10.0.0'} peerDependencies: @@ -8616,16 +8592,16 @@ packages: rollup: optional: true dependencies: - '@rollup/pluginutils': 3.1.0_rollup@2.79.0 + '@rollup/pluginutils': 3.1.0_rollup@2.78.1 '@types/resolve': 1.17.1 deepmerge: 4.2.2 is-builtin-module: 3.2.0 is-module: 1.0.0 resolve: 1.22.1 - rollup: 2.79.0 + rollup: 2.78.1 dev: true - /@rollup/plugin-replace/2.4.2_rollup@2.79.0: + /@rollup/plugin-replace/2.4.2_rollup@2.78.1: resolution: {integrity: sha512-IGcu+cydlUMZ5En85jxHH4qj2hta/11BHq95iHEyb2sbgiN0eCdzvUcHw5gt9pBL5lTi4JDYJ1acCoMGpTvEZg==} peerDependencies: rollup: ^1.20.0 || ^2.0.0 @@ -8633,12 +8609,12 @@ packages: rollup: optional: true dependencies: - '@rollup/pluginutils': 3.1.0_rollup@2.79.0 + '@rollup/pluginutils': 3.1.0_rollup@2.78.1 magic-string: 0.25.9 - rollup: 2.79.0 + rollup: 2.78.1 dev: false - /@rollup/plugin-typescript/8.5.0_ppxule2mhlgb6ds3e4gxjflaqy: + /@rollup/plugin-typescript/8.5.0_5zsqiitiqqdgwm4iemtywlnhku: resolution: {integrity: sha512-wMv1/scv0m/rXx21wD2IsBbJFba8wGF3ErJIr6IKRfRj49S85Lszbxb4DCo8iILpluTjk2GAAu9CoZt4G3ppgQ==} engines: {node: '>=8.0.0'} peerDependencies: @@ -8651,14 +8627,14 @@ packages: tslib: optional: true dependencies: - '@rollup/pluginutils': 3.1.0_rollup@2.79.0 + '@rollup/pluginutils': 3.1.0_rollup@2.78.1 resolve: 1.22.1 - rollup: 2.79.0 + rollup: 2.78.1 tslib: 2.4.0 typescript: 4.7.4 dev: true - /@rollup/pluginutils/3.1.0_rollup@2.79.0: + /@rollup/pluginutils/3.1.0_rollup@2.78.1: resolution: {integrity: sha512-GksZ6pr6TpIjHm8h9lSQ8pi8BE9VeubNT0OMJ3B5uZJ8pz73NPiqOtCog/x2/QzM1ENChPKxMDhiQuRHsqc+lg==} engines: {node: '>= 8.0.0'} peerDependencies: @@ -8670,7 +8646,7 @@ packages: '@types/estree': 0.0.39 estree-walker: 1.0.1 picomatch: 2.3.1 - rollup: 2.79.0 + rollup: 2.78.1 /@rollup/pluginutils/4.2.1: resolution: {integrity: sha512-iKnFXr7NkdZAIHiIWE+BX5ULi/ucVFYWD6TbAV+rZctiRTY2PL6tsIKhoIOaoskiWAkgu+VsbXgUVDNLHf+InQ==} @@ -8878,10 +8854,10 @@ packages: resolution: {integrity: sha512-J/rMZa7RqiH/rT29TEVZO4nBoDP9XJOjnbbIofg7GQKs4JIduEO3WLpte+6WeUz/TcrXKlY+bM7FYrp8yFB+3g==} dev: true - /@types/glob/8.0.0: - resolution: {integrity: sha512-l6NQsDDyQUVeoTynNpC9uRvCUint/gSUXQA2euwmTuWGvPY5LSDUu6tkCtJB2SvGQlJQzLaKqcGZP4//7EDveA==} + /@types/glob/7.2.0: + resolution: {integrity: sha512-ZUxbzKl0IfJILTS6t7ip5fQQM/J3TJYubDm3nMbgubNNYS62eXeUpoLUC8/7fJNiFYHTrGPQn7hspDUzIHX3UA==} dependencies: - '@types/minimatch': 5.1.2 + '@types/minimatch': 5.1.1 '@types/node': 18.7.15 dev: true @@ -8929,8 +8905,8 @@ packages: resolution: {integrity: sha512-Jus9s4CDbqwocc5pOAnh8ShfrnMcPHuJYzVcSUU7lrh8Ni5HuIqX3oilL86p3dlTrk0LzHRCgA/GQ7uNCw6l2Q==} dev: true - /@types/minimatch/5.1.2: - resolution: {integrity: sha512-K0VQKziLUWkVKiRVrx4a40iPaxTUefQmjtkQofBkYRcoaaL/8rhwDWww9qWbrgicNOgnpIsMxyNIUM4+n6dUIA==} + /@types/minimatch/5.1.1: + resolution: {integrity: sha512-v55NF6Dz0wrj14Rn8iEABTWrhYRmgkJYuokduunSiq++t3hZ9VZ6dvcDt+850Pm5sGJZk8RaHzkFCXPxVINZ+g==} dev: true /@types/minimist/1.2.2: @@ -9003,24 +8979,24 @@ packages: /@types/react-dom/17.0.17: resolution: {integrity: sha512-VjnqEmqGnasQKV0CWLevqMTXBYG9GbwuE6x3VetERLh0cq2LTptFE73MrQi2S7GkKXCf2GgwItB/melLnxfnsg==} dependencies: - '@types/react': 17.0.49 + '@types/react': 17.0.48 dev: true /@types/react-dom/18.0.6: resolution: {integrity: sha512-/5OFZgfIPSwy+YuIBP/FgJnQnsxhZhjjrnxudMddeblOouIodEQ75X14Rr4wGSG/bknL+Omy9iWlLo1u/9GzAA==} dependencies: - '@types/react': 17.0.49 + '@types/react': 18.0.17 dev: false - /@types/react/17.0.49: - resolution: {integrity: sha512-CCBPMZaPhcKkYUTqFs/hOWqKjPxhTEmnZWjlHHgIMop67DsXywf9B5Os9Hz8KSacjNOgIdnZVJamwl232uxoPg==} + /@types/react/17.0.48: + resolution: {integrity: sha512-zJ6IYlJ8cYYxiJfUaZOQee4lh99mFihBoqkOSEGV+dFi9leROW6+PgstzQ+w3gWTnUfskALtQPGHK6dYmPj+2A==} dependencies: '@types/prop-types': 15.7.5 '@types/scheduler': 0.16.2 csstype: 3.1.0 - /@types/react/18.0.18: - resolution: {integrity: sha512-6hI08umYs6NaiHFEEGioXnxJ+oEhY3eRz8VCUaudZmGdtvPviCJB8mgaMxaDWAdPSYd4eFavrPk2QIolwbLYrg==} + /@types/react/18.0.17: + resolution: {integrity: sha512-38ETy4tL+rn4uQQi7mB81G7V1g0u2ryquNmsVIOKUAEIDK+3CUjZ6rSRpdvS99dNBnkLFL83qfmtLacGOTIhwQ==} dependencies: '@types/prop-types': 15.7.5 '@types/scheduler': 0.16.2 @@ -9030,7 +9006,7 @@ packages: /@types/resolve/1.17.1: resolution: {integrity: sha512-yy7HuzQhj0dhGpD8RLXSZWEkLsV9ibvxvi6EiJ3bkqLAO1RGo0WbkWQiwpRlSFymTJRz0d3k5LM3kkx8ArDbLw==} dependencies: - '@types/node': 14.18.27 + '@types/node': 18.7.15 /@types/resolve/1.20.2: resolution: {integrity: sha512-60BCwRFOZCQhDncwQdxxeOEEkbc5dIMccYLwbxsS4TUNeVECQ/pBJ0j09mrHOl/JJvpRPGwO9SvE4nR2Nb/a4Q==} @@ -9038,7 +9014,7 @@ packages: /@types/rimraf/3.0.2: resolution: {integrity: sha512-F3OznnSLAUxFrCEu/L5PY8+ny8DtcFRjx7fZZ9bycvXRi3KPTRS9HOitGZwvPg0juRhXFWIeKX58cnX5YqLohQ==} dependencies: - '@types/glob': 8.0.0 + '@types/glob': 7.2.0 '@types/node': 18.7.15 dev: true @@ -9395,7 +9371,7 @@ packages: dependencies: emmet: 2.3.6 jsonc-parser: 2.3.1 - vscode-languageserver-textdocument: 1.0.7 + vscode-languageserver-textdocument: 1.0.5 vscode-languageserver-types: 3.17.2 vscode-nls: 5.2.0 vscode-uri: 2.1.2 @@ -10722,7 +10698,7 @@ packages: dependencies: domelementtype: 2.3.0 domhandler: 5.0.3 - entities: 4.4.0 + entities: 4.3.1 dev: true /domelementtype/2.3.0: @@ -10815,6 +10791,11 @@ packages: ansi-colors: 4.1.3 dev: true + /entities/4.3.1: + resolution: {integrity: sha512-o4q/dYJlmyjP2zfnaWDUC6A3BQFmVTX+tZPezK7k0GLSU9QYCauscf5Y+qcEPzKL+EixVouYDgLQK5H9GrLpkg==} + engines: {node: '>=0.12'} + dev: true + /entities/4.4.0: resolution: {integrity: sha512-oYp7156SP8LkeGD0GF85ad1X9Ai79WtRsZ2gxJqtBuzH+98YUV6jkHEKlZkMbcrjJjIVJNIDP/3WL9wQkoPbWA==} engines: {node: '>=0.12'} @@ -12468,7 +12449,7 @@ packages: domelementtype: 2.3.0 domhandler: 5.0.3 domutils: 3.0.1 - entities: 4.4.0 + entities: 4.3.1 dev: true /http-cache-semantics/4.1.0: @@ -15111,8 +15092,8 @@ packages: synckit: 0.7.3 dev: true - /prettier-plugin-astro/0.5.4: - resolution: {integrity: sha512-ILs/WgUYtKBOn3Zh217/PwjCFtUWEKQjcCFJDevri0hGEBwEnnda9aqSLL0/nhCOmQn/UE7M9zLQvThu970ZHw==} + /prettier-plugin-astro/0.5.3: + resolution: {integrity: sha512-g4uJ/7k1rJeIWBifeBgTqzgV5gmMTG+lOmOvUZvtIh1R91aqa+yYMzbysIlsJKRaRyWefejrOpvpIuEePBDAyw==} engines: {node: ^14.15.0 || >=16.0.0, npm: '>=6.14.0'} dependencies: '@astrojs/compiler': 0.23.4 @@ -15718,7 +15699,7 @@ packages: rollup-plugin-inject: 3.0.2 dev: true - /rollup-plugin-terser/7.0.2_rollup@2.79.0: + /rollup-plugin-terser/7.0.2_rollup@2.78.1: resolution: {integrity: sha512-w3iIaU4OxcF52UUXiZNsNeuXIMDvFrr+ZXK6bFZ0Q60qyVfq4uLptoS4bbq3paG3x216eQllFZX7zt6TIImguQ==} peerDependencies: rollup: ^2.0.0 @@ -15728,7 +15709,7 @@ packages: dependencies: '@babel/code-frame': 7.18.6 jest-worker: 26.6.2 - rollup: 2.79.0 + rollup: 2.78.1 serialize-javascript: 4.0.0 terser: 5.15.0 @@ -15751,14 +15732,6 @@ packages: hasBin: true optionalDependencies: fsevents: 2.3.2 - dev: false - - /rollup/2.79.0: - resolution: {integrity: sha512-x4KsrCgwQ7ZJPcFA/SUu6QVcYlO7uRLfLAy0DSA4NS2eG8japdbpM50ToH7z4iObodRYOJ0soneF0iaQRJ6zhA==} - engines: {node: '>=10.0.0'} - hasBin: true - optionalDependencies: - fsevents: 2.3.2 /run-parallel/1.2.0: resolution: {integrity: sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==} @@ -15804,8 +15777,8 @@ packages: dependencies: suf-log: 2.5.3 - /sass/1.54.8: - resolution: {integrity: sha512-ib4JhLRRgbg6QVy6bsv5uJxnJMTS2soVcCp9Y88Extyy13A8vV0G1fAwujOzmNkFQbR3LvedudAMbtuNRPbQww==} + /sass/1.54.6: + resolution: {integrity: sha512-DUqJjR2WxXBcZjRSZX5gCVyU+9fuC2qDfFzoKX9rV4rCOcec5mPtEafTcfsyL3YJuLONjWylBne+uXVh5rrmFw==} engines: {node: '>=12.0.0'} hasBin: true dependencies: @@ -17233,7 +17206,7 @@ packages: debug: 4.3.4 fast-glob: 3.2.11 pretty-bytes: 5.6.0 - rollup: 2.79.0 + rollup: 2.78.1 workbox-build: 6.5.4 workbox-window: 6.5.4 transitivePeerDependencies: @@ -17241,7 +17214,7 @@ packages: - supports-color dev: false - /vite/3.0.9_sass@1.54.8: + /vite/3.0.9_sass@1.54.6: resolution: {integrity: sha512-waYABTM+G6DBTCpYAxvevpG50UOlZuynR0ckTK5PawNVt7ebX6X7wNXHaGIO6wYYFXSM7/WcuFuO2QzhBB6aMw==} engines: {node: ^14.18.0 || >=16.0.0} hasBin: true @@ -17264,7 +17237,7 @@ packages: postcss: 8.4.16 resolve: 1.22.1 rollup: 2.77.3 - sass: 1.54.8 + sass: 1.54.6 optionalDependencies: fsevents: 2.3.2 dev: false @@ -17359,7 +17332,7 @@ packages: /vscode-html-languageservice/5.0.1: resolution: {integrity: sha512-OYsyn5HGAhxs0OIG+M0jc34WnftLtD67Wg7+TfrYwvf0waOkkr13zUqtdrVm2JPNQ6fJx+qnuM+vTbq7o1dCdQ==} dependencies: - vscode-languageserver-textdocument: 1.0.7 + vscode-languageserver-textdocument: 1.0.5 vscode-languageserver-types: 3.17.2 vscode-nls: 5.2.0 vscode-uri: 3.0.3 @@ -17377,6 +17350,10 @@ packages: vscode-languageserver-types: 3.17.2 dev: false + /vscode-languageserver-textdocument/1.0.5: + resolution: {integrity: sha512-1ah7zyQjKBudnMiHbZmxz5bYNM9KKZYz+5VQLj+yr8l+9w3g+WAhCkUkWbhMEdC5u0ub4Ndiye/fDyS8ghIKQg==} + dev: false + /vscode-languageserver-textdocument/1.0.7: resolution: {integrity: sha512-bFJH7UQxlXT8kKeyiyu41r22jCZXG8kuuVVA33OEJn1diWOZK5n8zBSPZFHVBOu8kXZ6h0LIRhf5UnCo61J4Hg==} dev: false @@ -17536,9 +17513,9 @@ packages: '@babel/core': 7.19.0 '@babel/preset-env': 7.19.0_@babel+core@7.19.0 '@babel/runtime': 7.19.0 - '@rollup/plugin-babel': 5.3.1_b6woseefyuugm6lsnk4tw7iz2e - '@rollup/plugin-node-resolve': 11.2.1_rollup@2.79.0 - '@rollup/plugin-replace': 2.4.2_rollup@2.79.0 + '@rollup/plugin-babel': 5.3.1_o3fvycpalvsydbhpdgqv4wrrry + '@rollup/plugin-node-resolve': 11.2.1_rollup@2.78.1 + '@rollup/plugin-replace': 2.4.2_rollup@2.78.1 '@surma/rollup-plugin-off-main-thread': 2.2.3 ajv: 8.11.0 common-tags: 1.8.2 @@ -17547,8 +17524,8 @@ packages: glob: 7.2.3 lodash: 4.17.21 pretty-bytes: 5.6.0 - rollup: 2.79.0 - rollup-plugin-terser: 7.0.2_rollup@2.79.0 + rollup: 2.78.1 + rollup-plugin-terser: 7.0.2_rollup@2.78.1 source-map: 0.8.0-beta.0 stringify-object: 3.3.0 strip-comments: 2.0.1 |