Skip to content

Instantly share code, notes, and snippets.

@reggi
Last active August 29, 2015 13:56
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save reggi/9274914 to your computer and use it in GitHub Desktop.
Save reggi/9274914 to your computer and use it in GitHub Desktop.

Mindful Matter Documentation

Mindful Matter the new Holstee "Monthly Themed Content Magazine" is up and running. I'm expecting the design to grow and evolve with the more uses we come up with, and I built it in a way that it's super flexible to do that. Please share any thoughts with me that you have about the design, and fight for features you want.

Writing Posts

Tags

I created an associative way of managing a string. What that means is it's one value that computes to two. I created special tag prefixes. When a tag has this special prefix and a colin after it the value after is set to that prefix variable. All the images are controlled by tags like image:http://website.com/image.png that image becomes the banner image. There's also type tag if you put type:playlist it will preface the title of the post with something like "Playlist: The essence of clarity". These associative tags are really easy to create so if anyone comes up with any others let me know (e.g. read time)

List of Known Tags

  • author:Mullica Zudsiri
  • author_link:https://twitter.com/mzudsiri
  • author_info:intern at holstee
  • image:http://www.123callingalldogs.com/savedimages/macexplorer_com-puppy-dog-26.jpg
  • type:playlist
  • main (applied to the main post for the month)

Images

Images automatically resize, so we can't promise that the a whole image will ever show as you intend. There's a great list of stock photography there (ironically on medium who's design we we're inspired by). So we shouldn't ever put text in these images because it will likely get cut off.

Posts

I suggest that you use Mou to write blog posts. It uses the markdown syntax, which is very easy to learn and very versatile. It has a nifty "copy html" feature. Then you just paste that in as the source of the post. The native Shopify admin editor doesn't support blockquote tags, it's pretty flawed in general, so I'd advise never using it directly. I created a "Mindful Matter Articles" folder in Dropbox within Modsquad. This also would allow us to have backup copies of every article.

Excerpt

Every post needs an excerpt, this just needs to be some kind of primer about the article. It can be edited here in the shopify admin.

Troubleshooting

Image Color

The images that are chosen for the blog posts need to not have white space on top or else the nav disappears. The same thing goes for the title I think that generally darker / images without white need to be picked. If this is way to inconvenient an image could be darkened quickly in the Mac Preview app and uploaded to shopify and linked in the post. If this gets to the point where its way to inconvenient we can try to figure something out / some alternative.

Image White Space

The woman on the hey bail image has actual blocks white strips causing this space this is in the image and not an issue with the image heres the bad image and heres the good image.

Post Blockquotes

The <blockquote>html tag or > in markdown is what is causing the text to be huge here. <blockquote> tags should never be put next to each other.

Post Lists

A list or <li> tag should be used to list out this recipe. In markdown it would look like this and render out to to a html list.

* 4 cups of vegetable stock (heated)
* 1 cup of arborio rice
* 1 small onion (finely chopped)
* 1 medium carrot (finely chopped)
* 1 stalk of celery (finely chopped)
* 2 cloves garlic (minced)
* 1 teaspoon oregano
* 2/3 cup fresh tomato sauce
* 2 tablespoons butter
* 2-4 tablespoons grated Parmesan (plus more for garnish)
* 2 cups cherry tomatoes (halved)
* olive oil
* salt and pepper to taste

Post Wonky Spacing

The spacing is wonky here because the shopify editor sucks and can't tell when a new paragraph starts or ends, which is why I recommend Mou / markdown because it is smart and predictable, and it doesn't insert anything that shouldn't be in there.

Post Spotify Embed Code

Spotify has a little generator here in its docs where you can paste the "Shopify URI" in and it gives you the embed code.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment