How to Publish "A Week of A Frame"

This guide will go through how to create and publish a post of A Week of A-Frame.

Start from a Template

Run npm run awoa to create A Week of A-Frame template in src/_posts/. This command will infer the week number (e.g., A Week of A-Frame 50) and the date of the post given that A Week of A-Frame is usually posted on Fridays.

Curate

We can curate social mentions from the #bots channel in the A-Frame Slack. Skim through the mentions that happened on the week for the post, find good mentions, and add them to the post. Ideally, mentions have media attached to the Tweet to make it more visual.

Alternatively, if you have access, you can filter the week at the true source web.mention.com.

Add Tweets to the Post

Within <div class="tweets">, we can simply paste Twitter links. We do not have to grab the embeds, we will have a script do that at the end. Add the Tweets under the appropriate category. The top Tweets div is reserved for featured Tweets. We usually feature four Tweets in this section.

Add Non-Tweet Materials

If there is something that someone made that wasn't shared through Twitter, we can add a normal link and image. The script at the end can automatically add links for Twitter and GitHub usernames if we do twitter:username or github:username. This saves some work in adding links.

## Projects

<div class="tweets">
</div>

[Foo Project](https://foo.bar) by twitter:bazman - A qux project.

![Foo Project](foo.jpg)

Create GIFs

If you need to create a GIF, take a video capture of your screen, then use ffmpeg and gifsicle:

ffmpeg -i in.mp4 -s 600x400 -pix_fmt rgb24 -r 7 -f gif - | gifsicle --optimize=3 --delay=6 > out.gif

Process the Post

Make a backup of the Markdown file. Then do npm run generateawoa src/_posts/awoa-xx.md where xx is the week number. This will expand all the Twitter links to Twitter embeds and expand Twitter and GitHub usernames to links.

Add Collage Image

Create a collage image of projects from that week. Take screenshots of various images from the post, make a collage (I use CollageFactory Free on OS X) using 3x3 grid with no margin or shadows. Upload the collage image to GitHub CDN (i.e., just drag-and-drop the image into any random issue). Add the image to the post's YAML front-matter:

title: "A Week of A-Frame XX"
image:
  src: https://cloud.githubusercontent.com/assets/foo.png

This will be used as the meta image for Twitter and Facebook cards.

Publish the Post

Git commit and push the post. a-frobot will automatically deploy the site.

Tweet

Tweet on @aframevr. A format for the Tweet might be:

A Week of A-Frame XX. This thing <emoji>, that thing <emoji>, some other thing <emoji>. https://aframe.io/blog/awoa-xx

Try not to Tweet too cheesy, too cheery, or have too many emojis.

Attach Collage Image

Attach the collage image created before as media to the Tweet, to give it an image.

Tag People

Now that we have an image, tag ten people on the Tweet that were featured in the post.