Merge branch 'main' into feat/hamburger-menu

Author: heem42

src/components/AuthorCard/index.astro

@@ -16,17 +16,20 @@ const { author } = Astro.props;
 const BLOG_URL = Astro.site?.href;
 
 // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-const { data: { avatar, avatarAlt, name }, body } = (await getEntry('authors', author))!;
+const { data: { avatar, avatarAlt, name, pronouns }, body } = (await getEntry('authors', author))!;
 const description = await parseMarkdown(body);
 ---
 <div class="author-card" itemprop="author" itemscope itemtype="https://schema.org/Person">
 	<a class="author-picture" href={`${BLOG_URL}authors/${author}`}>
 		<Avatar image={avatar} imageAlt={avatarAlt} />
 	</a>
 
-	<a class="p-author h-card author-name" rel="author" itemprop="url" href={`${BLOG_URL}authors/${author}`}>
-		<h2 itemprop="name">{name}</h2>
-	</a>
+	<div class="author-name">
+		<a class="p-author h-card" rel="author" itemprop="url" href={`${BLOG_URL}authors/${author}`}>
+			<h2 itemprop="name">{name}</h2>
+		</a>
+		{pronouns && (<small>{pronouns}</small>)}
+	</div>
 
 	<div class="author-bio">
 		{/* eslint-disable-next-line astro/no-set-html-directive */}

src/components/PageHeader/index.astro

@@ -2,7 +2,11 @@
 import './styles.css';
 ---
 <header id="page-header">
+	<slot name="header-picture"></slot>
 	<h1>
 		<slot></slot>
 	</h1>
+	<aside>
+		<slot name="header-extra"></slot>
+	</aside>
 </header>

src/components/PageHeader/styles.css

@@ -3,14 +3,37 @@
 	margin: 1.25rem auto;
 	padding: 0 1rem;
 	text-align: center;
+	gap: var(--size-3);
+	display: grid;
+	grid-template-columns: auto auto;
+	grid-template-rows: auto auto;
+	grid-template-areas:
+		'picture title'
+		'picture aside'
+	;
+}
+
+#page-header > *:not(h1):not(aside) { grid-area: picture; }
+#page-header > h1 { grid-area: title; }
+#page-header > aside { grid-area: aside; }
 
-	@media (min-width: 1024px) {
-    .desktop\:px-9 {
-        padding-left: 2.25rem;
-        padding-right: 2.25rem;
-		font-size: 2rem;
-		font-weight: 300;
-    }
+#page-header:has(> h1:first-child) {
+	grid-template-columns: auto;
+	grid-template-rows: auto auto;
+	grid-template-areas:
+		'title'
+		'aside'
+	;
 }
 
+@media (max-width: 550px) {
+	#page-header {
+		grid-template-columns: auto;
+		grid-template-rows: repeat(3, auto);
+		grid-template-areas:
+			'picture'
+			'title'
+			'aside'
+		;
+	}
 }

src/components/SiteFooter/index.astro

@@ -21,7 +21,7 @@ import './styles.css';
 				class="footer-items"
 				target="_blank"
 			>
-				Join Discord!
+				Join Discord
 			</a>
 		</li>
 		<li>

src/content/authors/drey.md

@@ -1,6 +1,7 @@
 ---
 name: drey moreau
 avatar: ./assets/drey.jpg
+pronouns: they/them
 avatarAlt: A picture of drey's face at sunrise.
 email: drey@torontojs.com
 website: https://dreymoreau.netlify.app

src/content/authors/marco.md

@@ -1,6 +1,7 @@
 ---
 name: Marco Campos
 avatar: ./assets/marco.jpg
+pronouns: he/him
 avatarAlt: A picture of my face with a smile looking at the camera. I'm wearing aviator glasses, a fake fur winter hat and an orange scarf.
 email: me@madcampos.dev
 website: https://madcampos.dev/

src/content/blog/2024/08/assets/giphy.gif src/content/blog/2024/09/assets/giphy.gif

@@ -1,8 +1,7 @@
 ---
 title: New Blog!
 summary: TorontoJS community content has a new home, this blog!
-createdAt: 2024-08-08T17:00:22.476-04:00
-draft: true
+createdAt: 2024-09-13T23:23:53.689Z
 tags:
   - Community
   - blog
@@ -15,44 +14,38 @@ We have a new home! Expect more frequent content and more of the nice and quirky
 
 ![A gif of a TV test image saying "Please stand by"](./assets/giphy.gif)
 
-It is very much needed a sorry for all the time that it took us to put the blog together, but also an explanation of everything that happened.
-
 ## The why
 
 Last year we were writing the TL;DR newsletter in a very nice trio using the substack platform. In a turn of events we found out that the platform was _supporting neo-nazi propaganda_ by keeping newsletters up and running and even monetizing them!
 
-As hate speech goes against our [Code of Conduct](https://torontojs.com/code_of_conduct) and two of the writers are queer, continuing to use the platform created an ethical problem. To resolve that we wrapped the content for 2023 for the newsletter and went searching for another platform.
+As hate speech goes against our [Code of Conduct](https://torontojs.com/code_of_conduct) continuing to use the platform created an ethical problem. To resolve that we wrapped the content for 2023 for the newsletter and went searching for another platform.
 
 ## Combining ideas
 
 At the same time two other things happened in parallel:
-- Discussions about a blog for general posts from and to the community.
-- A RFC style proposals system for improvements.
+- Discussions about a blog for general posts from and to the community
+- A Request For Comment (RFC) style proposals system for improvements
 
-On the organizers group, we started discussing that it may be very nice and useful to have a blog to post the newsletter there and then fire email notifications to people.
+On the organizers group, we started discussing that it may be very nice and useful to have a blog to post the newsletter, as well as a way to send emails!!!
 
 That also gives us a venue to post community content, from anyone that is interested in writing something cool and sharing that with others. Basically a more permanent and longer form version of the `#show-and-tell` channel on Slack.
 
 The blog also opens up space to post reports and pictures of events that we run, along with summaries. Very old school and [Indie Web](https://indieweb.org/) style. (Keep an eye out for a webring haha)
 
 Along side to that, the organizers group changed, we saw the departure of Jen Chan as the main organizer and the succession by Dann Toliver on that role. At the same time we saw an influx of people who were _de facto_ organizers getting the title.
 
-All the change brought with it exciting new ideas and we wanted a way to organize and be more open for improving the community. Because we are very influenced by the engineering side of things (although it is changing) the best idea on how to implement "proposals for improving the community" was a Request For Comments (RFC) process.
-
-To test out the proposals system, we thought it would be a good idea use the blog. So we could have a first proposal and see it to completion.
-
-## Writing a blog
+The change brought exciting new ideas and we wanted a way to organize and be more open for improving the community. Since we are very influenced by the engineering side of things (although it is changing), the best idea on how to implement "proposals for improving the community" was a RFC process.
 
-Based on the experience I had building my blog and testing tools, we decided to go with [Astro](https://astro.build/) for two reasons:
-1. It builds statically, so no JS on the client (ironic that we are Toronto... _**JS**_ and try to get rid of JS).
-2. It has nice components so we are not maintaining a thousand times the same lines of code and repeating ourselves.
+To test out the proposals system, we thought it would be a good idea use the blog.
 
-To make things easier, we used the structure and some code of my personal blog and then went to design how the TorontoJS blog would look like. Turns out it is very hard to design things and our shade of red is _very difficult_ to pair with other colours. To make things even worse it is not a very accessible shade.
+## Building a blog
 
-With all of those problems, actually building the blog took some time.
+We decided to go with [Astro](https://astro.build/) for two reasons:
+1. It builds statically, so no JS on the client (ironic that we are Toronto... _**JS**_ and try to get rid of JS) hehe.
+2. It has nice built in components, so we are not having to maintain the same lines of code.
 
 ## What now?
 
 The blog is live, welcome to it and enjoy!
 
-Now we have an open place to share ideas and write articles. If you would be interested in doing so, please reach us on Slack!
+Now we have an open place to share ideas and write articles. If you would be interested in doing so, please reach out to us on Slack!

src/content/blog/2024/08/new-blog.md src/content/blog/2024/09/new-blog.md

@@ -8,7 +8,7 @@ If you are looking for instructions on how to _write posts_ for the blog, please
 
 We recommend creating a fork of the project, that can be easily done by clicking the "Fork" button on the top right corner of the repository page.
 
-![A closeup screenshot showing the "Fork" button on Github.](./assets/Pasted image 20240325194226.png)
+![A closeup screenshot showing the "Fork" button on Github.](./assets/fork-button.png)
 
 After forking the project, you can clone your forked repository to your local machine by running the following command:
 
@@ -18,7 +18,7 @@ git clone <your forked repository URL>
 
 Replace `<your forked repository URL>` with the URL of your forked repository. You can find the URL by clicking the "Code" button on the top right corner of your forked repository page.
 
-![A close up screenshot of the "Code" button on Github showing the popup with the URL for cloning your local fork.](./assets/Pasted image 20240325194352.png)
+![A close up screenshot of the "Code" button on Github showing the popup with the URL for cloning your local fork.](./assets/code-button.png)
 
 ## Creating a branch
 
@@ -38,10 +38,10 @@ Once you have made your changes, commit them all and push your branch to the rem
 
 Open your fork's page on GitHub and you will see a message with a button saying "Compare & pull request"
 
-![A screenshot showing the top of the page of a fork from TorontoJS' blog. It shows a message suggesting the creation of a Pull Request.](./assets/Pasted image 20240325194853.png)
+![A screenshot showing the top of the page of a fork from TorontoJS' blog. It shows a message suggesting the creation of a Pull Request.](./assets/pull-request-button.png)
 
 You can also create a Pull Request by going to the [original repository](https://github.com/torontojs/blog), going to the "Pull Requests" tab and then clicking "New Pull Request". Once there, click on the link called "compare across forks" and it will allow you to see the changes between your fork and the original repository.
 
-![A screenshot showcasing the "compare across forks" option on GitHub, with the TorontoJS as base and the fork as the head branch.](assets/Pasted image 20240325195441.png)
+![A screenshot showcasing the "compare across forks" option on GitHub, with the TorontoJS as base and the fork as the head branch.](./assets/compare-across-forks.png)
 
 After creating the Pull Request, we will review your changes and merge them into the main branch if they are approved.

src/content/docs/assets/Pasted image 20240325195426.png

@@ -48,7 +48,9 @@ const {
 	<SkipToContent slot="header" />
 	<SiteNav slot="header" />
 	<PageHeader slot="header">
+		<slot name="header-picture" slot="header-picture"></slot>
 		<slot name="header"></slot>
+		<slot name="header-extra" slot="header-extra"></slot>
 	</PageHeader>
 
 	<div id="contents">

src/content/docs/assets/Pasted image 20240325194352.png src/content/docs/assets/code-button.png

@@ -20,7 +20,9 @@ export const getStaticPaths = (async () => (await getCollection('authors')).map(
 const {
 	name,
 	body,
-	avatar, avatarAlt
+	avatar, avatarAlt,
+	pronouns,
+	socialMedia
 } = Astro.props;
 const description = await parseMarkdown(body);
 
@@ -35,11 +37,22 @@ const description = await parseMarkdown(body);
 	pageSchema="ProfilePage"
 >
 
-<Fragment slot="header">
-	<a id="author-picture" class="p-author h-card author-name" rel="author" itemprop="url" href={Astro.url}>
-		<Avatar image={avatar} imageAlt={avatarAlt} />
-	</a>
-	<a href={Astro.url}>{name}</a>
+<a
+	slot="header-picture"
+	id="author-picture"
+	class="p-author h-card author-name"
+	rel="author"
+	itemprop="url"
+	href={Astro.url}
+>
+	<Avatar image={avatar} imageAlt={avatarAlt} />
+</a>
+<a slot="header" href={Astro.url}>{name}</a>
+<Fragment slot="header-extra">
+	{pronouns && (<p>{pronouns}</p>)}
+	<ul>
+		{Object.entries(socialMedia ?? {}).map(([name, url]) => (<li><a href={url} rel="nofollow noopener noreferrer">{name}</a></li>))}
+	</ul>
 </Fragment>
 
 <div id="contents" itemprop="about mainEntity" itemscope itemtype="https://schema.org/Person">

src/content/docs/assets/Pasted image 20240325195441.png src/content/docs/assets/compare-across-forks.png

@@ -2,6 +2,7 @@ import { type SchemaContext, z as zod } from 'astro:content';
 
 export const authorsSchema = ({ image }: SchemaContext) => zod.object({
 	name: zod.string().describe('The author\'s name.'),
+	pronouns: zod.string().optional().describe('The author\'s pronouns.'),
 	avatar: image().describe('The avatar image to use when displaying cards.'),
 	avatarAlt: zod.string().describe('The avatar image alt text.'),
 	email: zod.string().email().optional().describe('The author\'s email, if they want to share.'),

src/content/docs/assets/Pasted image 20240325194226.png src/content/docs/assets/fork-button.png

@@ -10,21 +10,22 @@
 	padding: var(--size-2);
 }
 
-#page-header h1 {
-	display: flex;
-	gap: var(--size-3);
-}
-
 #page-header a {
 	color: var(--title-color);
 	text-shadow: var(--size-1) var(--size-1) var(--size-1) var(--gray-12);
 	text-decoration-color: var(--tjs-red-7);
 	text-underline-offset: var(--size-2);
 }
 
-@media (max-width: 550px) {
-	#page-header h1 {
-		flex-direction: column;
-		align-items: center;
-	}
+#page-header ul {
+	display: flex;
+	flex-wrap: wrap;
+	padding: 0;
+	justify-content: center;
+	gap: var(--size-3);
+}
+
+#page-header li {
+	list-style: none;
+	padding: 0;
 }