How to Contribute to the ACM @ OSU Blog

contributing.md

Introduction

Welcome! I assume if you've found this gist, you're planning on adding your content to our blog.

We'd love to have you add your content to our chapter's site and greater EECS community hub.

Getting Started

The main things to note before getting started are:

• We're using Astro.js. Astro makes building content-heavy sites like ours extremely easy.
• You'll need to fork and create a new branch for you to work on, as this is an open-source project.

Development

Once you have the code on your local machine and created a branch to start making changes, navigate to src/content/

Here, there are two main things to call out.

• posts/ - A subdirectory where we store all the .mdx/.md blog post content. It's dynamically rendered according to the content collection.
• config.ts - Our content collection. This is an astro-specific way to maintain type-safety for our content and dynamically render our content.

You can learn more about content collections (important) here.

Now that you're familiar with content collections, our config.ts file holds the schema for our content.

const postsCollection = defineCollection({
  type: "content",
  schema: z.object({
    title: z.string(),
    pubDate: z.date(),
    description: z.string(),
    author: z.string(),
    image: z.object({
      url: z.string(),
      alt: z.string(),
    }),
    tags: z.array(z.string()),
  }),
});

Above is the schema that we use. Each post will have a schema that it conforms to, which is required when you write the content in the front matter.

For instance, if you take a look at welcome.mdx, you'll see this at the very top:

---
title: An Example Blog Post
author: Tom Nyuma
description: "This is an example description for a post. Ideally, it should be a few sentences containing keywords and information that describe the article. Be sure to always include one!"
image:
  url: "https://docs.astro.build/default-og-image.png"
  alt: "An Example Image"
pubDate: 2024-01-04
tags: ["example", "init"]
---

Here, we see the relationship between the post itself and the collection we've created.

If you want to add your own, custom fields, we ask that you create a SEPARATE pull request to do so.

Whenever you're writing a post, be sure to run npx astro sync before starting to generate the content collection types. This will make it so there's type-safety and your editor won't yell at you when adding content. You'll see the generated code in a .astro/ directory in the root of the repository.

Below the frontmatter, you're now able to start writing normal markdown and developing your post.

Good luck! 😁

If you have any questions, comments, or concerns, reach out to our Webmaster, Tom on Discord.