From 74f1ab9b6dcebfc81cab9bfc229c0897d35a4fa5 Mon Sep 17 00:00:00 2001 From: yodalightsabr <76178582+YodaLightsabr@users.noreply.github.com> Date: Thu, 31 Oct 2024 14:50:58 -0700 Subject: [PATCH] Run prettier --- .github/dependabot.yml | 6 +- README.md | 19 +- components/Footer.js | 90 +++-- components/Header.js | 341 ++++++++++------ components/Link.js | 50 +-- components/Post.js | 363 ++++++++++-------- components/SignIn.js | 6 +- components/color-switcher.js | 2 +- content/authors/authors.js | 42 +- content/index.js | 95 +++-- content/posts/august-2024-newsletter/post.mdx | 36 +- content/posts/demo/post.mdx | 20 +- content/posts/posts.js | 8 +- content/posts/same-day-ach/post.mdx | 20 +- .../post.mdx | 3 +- jsconfig.json | 12 +- lib/display.js | 23 +- lib/useDocument.js | 16 +- lib/useReferrer.js | 34 +- next.config.js | 2 +- pages/_app.js | 12 +- pages/index.js | 78 ++-- pages/posts/[slug].js | 130 ++++--- styles/font.css | 12 +- styles/global.css | 29 +- 25 files changed, 851 insertions(+), 598 deletions(-) diff --git a/.github/dependabot.yml b/.github/dependabot.yml index e574638..d441f1c 100644 --- a/.github/dependabot.yml +++ b/.github/dependabot.yml @@ -5,7 +5,7 @@ version: 2 updates: - - package-ecosystem: "npm" # See documentation for possible values - directory: "/" # Location of package manifests + - package-ecosystem: 'npm' # See documentation for possible values + directory: '/' # Location of package manifests schedule: - interval: "weekly" + interval: 'weekly' diff --git a/README.md b/README.md index 1474a72..51a49cc 100644 --- a/README.md +++ b/README.md @@ -18,17 +18,16 @@ Follow the following steps to create a new post: import Post from '@/components/Post.js' export const meta = { - title: "My New Post", - id: "my-new-post", // make sure this matches the directory name - category: "new" // one of "new", "newsletter", "improvement" -} - - - # Post content goes here - Using either markdown or JSX - + title: 'My New Post', + id: 'my-new-post', // make sure this matches the directory name + category: 'new' // one of "new", "newsletter", "improvement" +} + +# Post content goes here Using either markdown or JSX ``` + 4. Reference the new post in `/content/posts/posts.js` (this adds it to the website) + ```js export * as z from './my-new-post/post.mdx' ``` @@ -37,4 +36,4 @@ Then you're done! ### `/lib/authors.js` -This file contains all of the authors that can be referenced in posts. \ No newline at end of file +This file contains all of the authors that can be referenced in posts. diff --git a/components/Footer.js b/components/Footer.js index 97c041a..283330d 100644 --- a/components/Footer.js +++ b/components/Footer.js @@ -1,39 +1,61 @@ -import { useRouter } from "next/router"; -import { Box, Container, Heading, Image, Link } from "theme-ui"; +import { useRouter } from 'next/router' +import { Box, Container, Heading, Image, Link } from 'theme-ui' export default function Footer() { - const router = useRouter(); + const router = useRouter() - return ( - - - - - - - {router.pathname != "/" ? - Read more posts from HCB → - : } - - - - Scroll to top ↑ - - - - - + return ( + + + + + + {router.pathname != '/' ? ( + + Read more posts from HCB → + + ) : ( + + )} + + Scroll to top ↑ + + + - ) -} \ No newline at end of file + + + ) +} diff --git a/components/Header.js b/components/Header.js index 613f95f..fa2e781 100644 --- a/components/Header.js +++ b/components/Header.js @@ -1,135 +1,234 @@ -import { Box, Container, Heading, Image, Text, useColorMode } from "theme-ui"; -import Link from "../components/Link"; +import { Box, Container, Heading, Image, Text, useColorMode } from 'theme-ui' +import Link from '../components/Link' import ColorSwitcher from '../components/color-switcher' -import SignIn from "./SignIn"; +import SignIn from './SignIn' function UnstyledLink({ children, ...props }) { - return ( - - {children} - - ) + return ( + + {children} + + ) } export default function Header({ concise }) { - const [colorMode, setColorMode] = useColorMode(); - return ( - <> - - - - HCB Logo - + const [colorMode, setColorMode] = useColorMode() + return ( + <> + + + + HCB Logo + - HCB Blog + + HCB Blog + - {/* */} + {/* */} + + + - - - - - - UI - UI - - + + UI + UI - - - HCB Logo - - - {concise ? <> - - - HCB Blog - - The latest on all-things HCB - - : <> - - HCB Blog - - The latest on all-things HCB - } + + + + HCB Logo + + + {concise ? ( + <> + + + + HCB Blog + + + + The latest on all-things HCB + + + + ) : ( + <> + + + HCB Blog + + + + The latest on all-things HCB + + + )} - {!concise && - - What's HCB? → - - - - } - - - + {!concise && ( + + + What's HCB? → + + + + )} - - ) -} \ No newline at end of file + + + + + ) +} diff --git a/components/Link.js b/components/Link.js index f7b2050..15a75c4 100644 --- a/components/Link.js +++ b/components/Link.js @@ -1,25 +1,31 @@ -import { useRouter } from "next/router"; -import { useEffect } from "react"; -import { Link as TUILink } from "theme-ui"; +import { useRouter } from 'next/router' +import { useEffect } from 'react' +import { Link as TUILink } from 'theme-ui' -export default function Link ({ children, href, ...props }) { - const router = useRouter(); +export default function Link({ children, href, ...props }) { + const router = useRouter() + useEffect(() => { + router.prefetch(href) + }, [href]) - useEffect(() => { - router.prefetch(href); - }, [href]); - - return ( - { - localStorage.setItem("referrer", JSON.stringify({ - path: router.asPath, - time: Date.now() - })); - e.preventDefault(); - router.push(href); - }}> - {children} - - ); -} \ No newline at end of file + return ( + { + localStorage.setItem( + 'referrer', + JSON.stringify({ + path: router.asPath, + time: Date.now() + }) + ) + e.preventDefault() + router.push(href) + }} + > + {children} + + ) +} diff --git a/components/Post.js b/components/Post.js index b7e28da..59c7c38 100644 --- a/components/Post.js +++ b/components/Post.js @@ -1,25 +1,40 @@ -import { useRouter } from "next/router"; -import { Badge, Box, Card, Container, Flex, Grid, Heading, Text, useColorMode } from "theme-ui" -import Link from "../components/Link"; -import { authors } from "@/content/index.js" -import Header from "./Header"; -import Footer from "./Footer"; -import Image from "next/image"; -import { createContext, useContext, useEffect, useState } from "react"; -import { useDisplay } from "@/lib/display"; -import useDocument from "@/lib/useDocument"; +import { useRouter } from 'next/router' +import { + Badge, + Box, + Card, + Container, + Flex, + Grid, + Heading, + Text, + useColorMode +} from 'theme-ui' +import Link from '../components/Link' +import { authors } from '@/content/index.js' +import Header from './Header' +import Footer from './Footer' +import Image from 'next/image' +import { createContext, useContext, useEffect, useState } from 'react' +import { useDisplay } from '@/lib/display' +import useDocument from '@/lib/useDocument' function Tag({ children }) { - return ( - {children} - ) + return ( + + {children} + + ) } -const PostContext = createContext(); +const PostContext = createContext() // for tags, list each type of tag /** @@ -30,166 +45,208 @@ const PostContext = createContext(); * @property {Date} date - The date of the post * @property {Array.<"Ledger"|"Security"|"Cards"|"Receipts"|"Invoices"|"Donations"|"Transfers">} tags - The tags of the post * @property {string} slug - The slug of the post - */ - + */ export function Author({ id, overrideText }) { - const author = authors[id]; - - console.log({ author }); - - return ( - - {author.name} - - {overrideText ? overrideText : author.role ? `${author.name}, ${author.role}` : author.name} - - - ) + const author = authors[id] + + console.log({ author }) + + return ( + + {author.name} + + {overrideText + ? overrideText + : author.role + ? `${author.name}, ${author.role}` + : author.name} + + + ) } function PostHeader({ meta }) { - let { category, title, author, date, tags, slug } = meta; - tags ||= []; - - const router = useRouter(); - const [colorMode] = useColorMode(); - - return ( - - - {router.pathname == "/" ? {title} : title} - - - - {date.toLocaleDateString('en-us', { year: "numeric", month: "long", day: "numeric" })} - - - - - - {category == "new" && New Feature} - {category == "improvement" && Improvement} - {category == "newsletter" && Newsletter} - - {tags.includes("ledger") && Ledger} - {tags.includes("security") && Security} - {tags.includes("cards") && Cards} - {tags.includes("receipts") && Receipts} - {tags.includes("invoices") && Invoices} - {tags.includes("donations") && Donations} - {tags.includes("transfers") && Transfers} - - - - ) + let { category, title, author, date, tags, slug } = meta + tags ||= [] + + const router = useRouter() + const [colorMode] = useColorMode() + + return ( + + + {router.pathname == '/' ? ( + + {title} + + ) : ( + title + )} + + + + {date.toLocaleDateString('en-us', { + year: 'numeric', + month: 'long', + day: 'numeric' + })} + + + + {category == 'new' && New Feature} + {category == 'improvement' && Improvement} + {category == 'newsletter' && Newsletter} + + {tags.includes('ledger') && Ledger} + {tags.includes('security') && Security} + {tags.includes('cards') && Cards} + {tags.includes('receipts') && Receipts} + {tags.includes('invoices') && Invoices} + {tags.includes('donations') && Donations} + {tags.includes('transfers') && Transfers} + + + ) } function PostContent({ children, meta, skipAuthor }) { - let { category, title, author, date, tags, slug } = meta; - tags ||= []; - - const display = useDisplay(); - - if (display == "home") return ( - - - - - - - - {children} - - - {author && !skipAuthor && } - - - - - - ) - else return ( - + let { category, title, author, date, tags, slug } = meta + tags ||= [] - + const display = useDisplay() - - {children} - + if (display == 'home') + return ( + + + + + {children} {author && !skipAuthor && } + + + ) + else + return ( + + + + + {children} + + + {author && !skipAuthor && } + ) } export function Post({ children, meta, skipAuthor }) { - return ( - - {children} - - ); + return ( + + + {children} + + + ) } export function Preview({ children, skipLink }) { - const meta = useContext(PostContext); + const meta = useContext(PostContext) - return ( - <> - {children} - {/* + return ( + <> + {children} + {/* {!skipLink && ( Read more → )} */} - - - {meta.title} - - - - Read more → - - - - - ); + + + {meta.title} + + + + Read more → + + + + ) } -export default Post; \ No newline at end of file +export default Post diff --git a/components/SignIn.js b/components/SignIn.js index fc688a3..3fff3a6 100644 --- a/components/SignIn.js +++ b/components/SignIn.js @@ -7,7 +7,7 @@ export default function SignIn({ color }) { useState(null) ) - const [colorMode] = useColorMode(); + const [colorMode] = useColorMode() useEffect(() => { ;(async () => { @@ -26,7 +26,7 @@ export default function SignIn({ color }) { as="a" href="https://hcb.hackclub.com" variant="outline" - sx={{ color: color || (colorMode == "dark" ? 'white' : 'black') }} + sx={{ color: color || (colorMode == 'dark' ? 'white' : 'black') }} > {user ? ( <> @@ -43,4 +43,4 @@ export default function SignIn({ color }) { )} ) -} \ No newline at end of file +} diff --git a/components/color-switcher.js b/components/color-switcher.js index 9ff99c4..7fcb509 100644 --- a/components/color-switcher.js +++ b/components/color-switcher.js @@ -1,6 +1,6 @@ import { IconButton, useColorMode } from 'theme-ui' -const ColorSwitcher = (props) => { +const ColorSwitcher = props => { const [mode, setMode] = useColorMode() return ( ({ +const posts = Object.entries(rawPosts).map( + ([_, { meta, default: rawComponent }]) => ({ meta, rawComponent, component: props => { - const Component = rawComponent; - return { - return ( - <> - -
- - ) + return ( + <> + +
+ + ) }, - h2: props => , - h3: props => , - h4: props => , - h5: props => , + h2: props => ( + + ), + h3: props => ( + + ), + h4: props => ( + + ), + h5: props => ( + + ), a: props => , - p: props => , - }} {...props} />; + p: props => + }} + {...props} + /> + ) } -})); + }) +) -export { - posts, - authors -} +export { posts, authors } diff --git a/content/posts/august-2024-newsletter/post.mdx b/content/posts/august-2024-newsletter/post.mdx index 27cc442..50db267 100644 --- a/content/posts/august-2024-newsletter/post.mdx +++ b/content/posts/august-2024-newsletter/post.mdx @@ -2,20 +2,20 @@ import { Post, Author, Preview } from '@/components/Post.js' import Image from 'next/image' export const meta = { - title: "📣 HCB August Newsletter", - slug: "newsletter-2024-august", - category: "newsletter", - author: "dylan", - cover: commandBar, - date: new Date('2024-08-21') -}; + title: '📣 HCB August Newsletter', + slug: 'newsletter-2024-august', + category: 'newsletter', + author: 'dylan', + cover: commandBar, + date: new Date('2024-08-21') +} Welcome to the newly revamped HCB monthly newsletter... we got word your inbox was feeling lonely, so we're here to spice things up! We're starting a monthly newsletter to show off what's new on HCB and highlight some of the amazing work our organizations are doing. -import commandBar from "./commandBar.png"; +import commandBar from './commandBar.png' @@ -33,7 +33,6 @@ And y'all are not slowing down at all. Just this year, orgs on HCB have raised a ## 🔎 Zoom around HCB with the Command Bar. - Need to get some where quickly in HCB? Try hitting Ctrl / ⌘ + k to pull up the command bar. @@ -42,7 +41,7 @@ From there you can navigate to all of your organizations or search HCB for a spe ## 🙏 Allow donors to cover fiscal sponsorship fees. -import donorsCoverFees from "./donorsCoverFees.png"; +import donorsCoverFees from './donorsCoverFees.png' @@ -50,10 +49,9 @@ If you've got donors feeling super generous, they can now check a box to cover t That means more money for you! If you'd like this on your organization's donation form, enable it in your Donation settings. - ## 🚨 Notifications for new device sign ins. -import deviceSignInNotifs from "./deviceSignInNotifs.png"; +import deviceSignInNotifs from './deviceSignInNotifs.png' @@ -65,18 +63,17 @@ Shrimple as that 🦐 ## 🔥 Lost a card? Burn it. -import burnCard from "./burnCard.png"; +import burnCard from './burnCard.png' There's nothing worse than checking for your card and realizing it's fallen out of your pocket. Now, when that happens, you can now permanently cancel and prevent any future transactions. - # 🌟 HCB Spotlight ## [The Trail](https://hcb.hackclub.com/the-trail) -import theTrail from "./theTrail.png"; +import theTrail from './theTrail.png' @@ -84,10 +81,9 @@ This summer, 30 Hack Clubbers from 12 states and 9 countries designed their own [View The Trail's transparent finances.](https://hcb.hackclub.com/the-trail) - ## [Campus Climate Network](https://hcb.hackclub.com/campus-climate-network) -import campusClimateNetwork from "./campusClimateNetwork.png"; +import campusClimateNetwork from './campusClimateNetwork.png' @@ -95,14 +91,10 @@ Campus Climate Network, a youth-led organization empowering student activists, h [View Campus Climate Network's transparent finances.](https://hcb.hackclub.com/campus-climate-network) - - -------- - +--- We hope you enjoy these new changes. As always, if you have feedback or feature requests, please reach out to hcb@hackclub.com or reply here. - All the best, diff --git a/content/posts/demo/post.mdx b/content/posts/demo/post.mdx index b5a4bf0..0d38cb7 100644 --- a/content/posts/demo/post.mdx +++ b/content/posts/demo/post.mdx @@ -1,22 +1,24 @@ import Post from '@/components/Post.js' export const meta = { - title: "🔧 Typography & style demo", - slug: "demo", - category: "new", - tags: [ - "receipts", - ], - author: "team", - date: new Date() -}; + title: '🔧 Typography & style demo', + slug: 'demo', + category: 'new', + tags: ['receipts'], + author: 'team', + date: new Date() +} # Heading 1 + ## Heading 2 + ### Heading 3 + #### Heading 4 + ##### Heading 5 This is a paragraph. It's a bit longer than the others. diff --git a/content/posts/posts.js b/content/posts/posts.js index a29fe3b..14c3286 100644 --- a/content/posts/posts.js +++ b/content/posts/posts.js @@ -1,5 +1,5 @@ // export all posts from this file -export * as a from "./same-day-ach/post.mdx"; -export * as b from "./august-2024-newsletter/post.mdx"; -export * as c from "./demo/post.mdx"; -export * as d from "./verify-account-and-routing-number/post.mdx"; \ No newline at end of file +export * as a from './same-day-ach/post.mdx' +export * as b from './august-2024-newsletter/post.mdx' +export * as c from './demo/post.mdx' +export * as d from './verify-account-and-routing-number/post.mdx' diff --git a/content/posts/same-day-ach/post.mdx b/content/posts/same-day-ach/post.mdx index dd7fb2b..7e9b665 100644 --- a/content/posts/same-day-ach/post.mdx +++ b/content/posts/same-day-ach/post.mdx @@ -1,22 +1,20 @@ import Post from '@/components/Post.js' export const meta = { - title: "⚡ We've sped up ACH transfers from three days to one day", - slug: "same-day-ach", - category: "new", - tags: [ - "transfers", - ], - author: "sam", - date: new Date('2024-08-21') -}; + title: "⚡ We've sped up ACH transfers from three days to one day", + slug: 'same-day-ach', + category: 'new', + tags: ['transfers'], + author: 'sam', + date: new Date('2024-08-21') +} -All ACH transfers sent from HCB are now processed [same-day](https://en.wikipedia.org/wiki/ACH_Network#Same-day_ACH)! +All ACH transfers sent from HCB are now processed [same-day](https://en.wikipedia.org/wiki/ACH_Network#Same-day_ACH)! That means, the moment an ACH is approved by HCB, it’ll arrive that day ([view the timing specifics](https://column.com/docs/ach/timing#same-day-timing)). In most cases, this should cut the waiting time for an ACH from three business days to one. -![xmms2okp1p431 \(2\).jpg](https://cloud.headwayapp.co/changelogs_images/images/big/000/132/595-75e17dc2716a09be1af6c63a6b5c9857cb445c11.jpg) +![xmms2okp1p431 (2).jpg](https://cloud.headwayapp.co/changelogs_images/images/big/000/132/595-75e17dc2716a09be1af6c63a6b5c9857cb445c11.jpg) diff --git a/content/posts/verify-account-and-routing-number/post.mdx b/content/posts/verify-account-and-routing-number/post.mdx index 18a5856..1b70e2d 100644 --- a/content/posts/verify-account-and-routing-number/post.mdx +++ b/content/posts/verify-account-and-routing-number/post.mdx @@ -10,6 +10,7 @@ export const meta = { ], author: "manu", date: new Date('2024-08-21') + }; @@ -20,7 +21,7 @@ Luckily for you, sitting right on your documents page is a **verification letter This handy one-pager allows organizations on HCB to prove they have access to their account & routing numbers. -import verificationLetter from "./verificationLetter.png"; +import verificationLetter from './verificationLetter.png' diff --git a/jsconfig.json b/jsconfig.json index 357036c..133ad5f 100644 --- a/jsconfig.json +++ b/jsconfig.json @@ -1,8 +1,8 @@ { - "compilerOptions": { - "baseUrl": ".", - "paths": { - "@/*": ["*"], - } + "compilerOptions": { + "baseUrl": ".", + "paths": { + "@/*": ["*"] } - } \ No newline at end of file + } +} diff --git a/lib/display.js b/lib/display.js index 5622bb0..024bc53 100644 --- a/lib/display.js +++ b/lib/display.js @@ -1,16 +1,15 @@ -import { createContext, useContext } from "react"; +import { createContext, useContext } from 'react' -const DisplayContext = createContext(); +const DisplayContext = createContext() -export function DisplayProvider ({ children, display }) { - return ( - - {children} - - ) +export function DisplayProvider({ children, display }) { + return ( + + {children} + + ) } -export function useDisplay () { - return useContext(DisplayContext); - -} \ No newline at end of file +export function useDisplay() { + return useContext(DisplayContext) +} diff --git a/lib/useDocument.js b/lib/useDocument.js index 8bfc63a..e69ae00 100644 --- a/lib/useDocument.js +++ b/lib/useDocument.js @@ -1,11 +1,11 @@ -import { useEffect, useState } from "react"; +import { useEffect, useState } from 'react' -export default function useDocument () { - const [doc, setDoc] = useState(null); +export default function useDocument() { + const [doc, setDoc] = useState(null) - useEffect(() => { - setDoc(document); - }, []); + useEffect(() => { + setDoc(document) + }, []) - return doc; -} \ No newline at end of file + return doc +} diff --git a/lib/useReferrer.js b/lib/useReferrer.js index 93d63d9..18a3c79 100644 --- a/lib/useReferrer.js +++ b/lib/useReferrer.js @@ -1,20 +1,20 @@ -import { useEffect, useState } from "react"; +import { useEffect, useState } from 'react' -export default function useReferrer () { - const [referrer, setReferrer] = useState(null); +export default function useReferrer() { + const [referrer, setReferrer] = useState(null) - useEffect(() => { - const raw = localStorage.getItem("referrer"); - try { - const { path, time } = JSON.parse(raw); - if (Date.now() - time < 5_000) { - setReferrer(path); - localStorage.removeItem("referrer"); - } - } catch (e) { - console.error(e); - } - }, []); + useEffect(() => { + const raw = localStorage.getItem('referrer') + try { + const { path, time } = JSON.parse(raw) + if (Date.now() - time < 5_000) { + setReferrer(path) + localStorage.removeItem('referrer') + } + } catch (e) { + console.error(e) + } + }, []) - return referrer; -} \ No newline at end of file + return referrer +} diff --git a/next.config.js b/next.config.js index c265f49..6ffcc1f 100644 --- a/next.config.js +++ b/next.config.js @@ -1,2 +1,2 @@ const withMDX = require('@next/mdx')({ extension: /\.mdx?$/ }) -module.exports = withMDX({ pageExtensions: ['js', 'jsx', 'mdx'] }); +module.exports = withMDX({ pageExtensions: ['js', 'jsx', 'mdx'] }) diff --git a/pages/_app.js b/pages/_app.js index 793b51b..ebad99f 100644 --- a/pages/_app.js +++ b/pages/_app.js @@ -1,12 +1,11 @@ import * as React from 'react' import NextApp from 'next/app' -import '../styles/font.css'; +import '../styles/font.css' import theme from '@hackclub/theme' import { ThemeProvider } from 'theme-ui' -import '../styles/global.css'; -import Head from 'next/head'; - +import '../styles/global.css' +import Head from 'next/head' export default class App extends NextApp { render() { @@ -14,7 +13,10 @@ export default class App extends NextApp { return ( - + diff --git a/pages/index.js b/pages/index.js index a99207c..42d2917 100644 --- a/pages/index.js +++ b/pages/index.js @@ -1,42 +1,48 @@ -import { posts } from "../content"; -import { Box, Card, Container, Divider, Flex, Grid, Heading, Image, Link, Text } from "theme-ui"; -import Header from "../components/Header"; -import Footer from "@/components/Footer"; -import { useEffect, useState } from "react"; -import { DisplayProvider } from "@/lib/display"; - +import { posts } from '../content' +import { + Box, + Card, + Container, + Divider, + Flex, + Grid, + Heading, + Image, + Link, + Text +} from 'theme-ui' +import Header from '../components/Header' +import Footer from '@/components/Footer' +import { useEffect, useState } from 'react' +import { DisplayProvider } from '@/lib/display' function PostPreview({ post }) { - const PostBody = post.component; - return ( - - - - ) + const PostBody = post.component + return ( + + + + ) } export default function Home() { - return ( - <> -
- HCB Blog - - - - - {posts.toReversed().map((post, i) => ( - <> - - {i < posts.length - 1 && } - - ))} - - -