From 186a06eb0258b14fe60ab47136ff639554229827 Mon Sep 17 00:00:00 2001 From: Dan Jutan Date: Tue, 6 Sep 2022 11:56:09 -0400 Subject: [PATCH] Update portfolio, removing Sass and Preact (#4556) * remove sass and preact from portfolio example * add back public folder * remove lockfile * Update examples/portfolio/src/layouts/project.astro Co-authored-by: Ben Holmes * run prettier * Update examples/portfolio/src/pages/index.astro Co-authored-by: Ben Holmes * remove wrapper class * remove button component; fix padding * improve mobile layout * lockfile * Revert "lockfile" This reverts commit e32518f4443d0b16cf0ec2301bac8690d57c2360. * Update examples/portfolio/src/pages/index.astro Co-authored-by: Sarah Rainsberger * Update examples/portfolio/src/components/Nav.astro Co-authored-by: Sarah Rainsberger * update astro * lockfile (again) Co-authored-by: Ben Holmes Co-authored-by: Sarah Rainsberger --- examples/portfolio/astro.config.mjs | 5 +- examples/portfolio/package.json | 5 +- .../portfolio/src/components/Button/index.jsx | 8 - .../src/components/Button/styles.module.scss | 7 - .../portfolio/src/components/Footer.astro | 25 +++ .../portfolio/src/components/Footer/index.jsx | 12 -- .../src/components/Footer/styles.module.scss | 15 -- .../portfolio/src/components/MainHead.astro | 2 +- examples/portfolio/src/components/Nav.astro | 99 +++++++++ .../portfolio/src/components/Nav/index.jsx | 41 ---- .../src/components/Nav/styles.module.scss | 65 ------ .../src/components/PortfolioPreview.astro | 135 +++++++++++++ .../src/components/PortfolioPreview/index.jsx | 29 --- .../PortfolioPreview/styles.module.scss | 102 ---------- examples/portfolio/src/layouts/project.astro | 55 +++-- examples/portfolio/src/pages/404.astro | 16 +- examples/portfolio/src/pages/about.astro | 19 +- examples/portfolio/src/pages/index.astro | 115 ++++++----- examples/portfolio/src/pages/projects.astro | 14 +- .../src/styles/{global.scss => global.css} | 88 +------- pnpm-lock.yaml | 189 ++++++++---------- 21 files changed, 483 insertions(+), 563 deletions(-) delete mode 100644 examples/portfolio/src/components/Button/index.jsx delete mode 100644 examples/portfolio/src/components/Button/styles.module.scss create mode 100644 examples/portfolio/src/components/Footer.astro delete mode 100644 examples/portfolio/src/components/Footer/index.jsx delete mode 100644 examples/portfolio/src/components/Footer/styles.module.scss create mode 100644 examples/portfolio/src/components/Nav.astro delete mode 100644 examples/portfolio/src/components/Nav/index.jsx delete mode 100644 examples/portfolio/src/components/Nav/styles.module.scss create mode 100644 examples/portfolio/src/components/PortfolioPreview.astro delete mode 100644 examples/portfolio/src/components/PortfolioPreview/index.jsx delete mode 100644 examples/portfolio/src/components/PortfolioPreview/styles.module.scss rename examples/portfolio/src/styles/{global.scss => global.css} (61%) diff --git a/examples/portfolio/astro.config.mjs b/examples/portfolio/astro.config.mjs index 08916b1fea..882e6515a6 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 80548ef9d2..a1c002dc7f 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 d8e04aa711..0000000000 --- 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 f0e39df3ff..0000000000 --- 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 0000000000..f238d6b6f1 --- /dev/null +++ b/examples/portfolio/src/components/Footer.astro @@ -0,0 +1,25 @@ +--- +const currentYear = new Date().getFullYear(); +--- + +
+ © {currentYear} Jeanine White + 🚀 Built by Astro +
+ diff --git a/examples/portfolio/src/components/Footer/index.jsx b/examples/portfolio/src/components/Footer/index.jsx deleted file mode 100644 index 42953c367c..0000000000 --- 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 ( -
- © {new Date().getFullYear()} Jeanine White - 🚀 Built by Astro -
- ); -} -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 9e76a6a2ff..0000000000 --- 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 5e4e49b976..d7757af2a4 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 0000000000..ea75625714 --- /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 b7cd28f362..0000000000 --- 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 ecbe5585ed..0000000000 --- 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 0000000000..3d0a915229 --- /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 4f16276049..0000000000 --- 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 bded615474..0000000000 --- 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 aba14a5ac6..f02f89c746 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}

-
+
-