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 {children}; -} - -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(); +--- + + + 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 ( - - ); -} -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 @@ + + + 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 ( - - ); -} -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; +--- + +
+
+

{frontmatter.title}

+
+
+

{frontmatter.description}

+
+ Tagged: + {frontmatter.tags.map((t) => ( +
+ {t} +
+ ))} +
+ + View + +
+
+ + 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 ( -
-
-

{frontmatter.title}

-
-
-

{frontmatter.description}

-
- Tagged: - {frontmatter.tags.map((t) => ( -
- {t} -
- ))} -
- - View - -
-
- ); -} - -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; - @@ -73,18 +86,16 @@ const { content } = Astro.props;

{content.title}

-
+
{content.tags.map((t) => {t})}

{content.description}

-
+
-