Introducing Community Notes

Hello from Sanity!

Short guide

• Request access from me through our Techlabs Community on Slack or LinkedIn if you're an outsider.
• You will gain the ability to create notes but not publish them.
• Use the Studio to create your notes.
• Log in with the email you sent me.
• Use H3 and H4 headers to separate sections when writing your note.
• Follow the Less is More philosophy while designing your note.

That's it! Happy writing.

What is Sanity?

Sanity is a Content Management System. It's a React app that can live anywhere. I'm hosting this instance on Sanity's own network of servers.

How are you doing this?

The content for my blog lives in a repository on GitHub. It's structured into two sections.

The blog is hosted with CloudFlare and builds automatically when I commit to the repository.

11ty (root folder)
 -- cms 
 -- web (html, css, js)

All I did was define a "schema" for the type of content I wanted to create.

I pull the new data every time I rebuild the blog. I use 11ty. It's a static site generator.

---js
{
    pagination: {
        data: "posts", // uses return of /_data/posts.js as data
        size: 1, // Creates a page for each post
        alias: "community", // Makes accessing data easier
        addAllPagesToCollections: true // Adds pages to Collections based on tags
    }
    ,
    tags: ['note'], // The tag for collections,
    layout: "note.njk", // Which layout?
    eleventyComputed: {
        title: data => data.community.title, // Post title from data
        permalink: data => `/code/${data.community.slug.current}/index.html`, // Slug and permalink creation
        type: data => "Community",
        date: data => data.community.date,
        creator: data => data.community.author 
    }
}
---


{{ community.body }}

This is a markdown file. 11ty looks at it to figure out how to pull data from Sanity. As you can see it needs a file called posts.js.

const client = createClient({
  projectId,
  dataset: 'production',
  useCdn: false, // set to `false` to bypass the edge cache
  apiVersion: '2022-03-07', 
})

// I need the data to be markdown friendly.
function prepPost(data) {    
    data.body = blocksToMd(data.body,{serializers})
    data.date = data.publishedAt
    return data
}


const serializers = {
    // Convert code blocks inherent to Portable Text into something 11ty understands
    types: {
        code: props => '```' + props.node.language + '\n' + props.node.code + '\n```'
    }
}


module.exports = async function () {
 try {
  const query = `
  *[_type == "post"]
  `
  const params = {}
 
  const data = await client.fetch(query, params)
  const preppedData = data.map(prepPost)

  return preppedData

 } catch (e) {
  console.log(e)
 }
}

I didn't even write this code myself. I happened to stumble upon it while researching how to integrate Sanity with 11ty.

Then all that's left is how to properly render the data.

<section class=" w-full  ">
  <table class="journal-table w-full">
    <thead>
      <tr>
      <th class="journal__date">date
      </th><th class="journal__title">title
      </th>
      <th class="journal__author">author</th>
      <th class="journal__type">type</th>
      </tr>
    </thead>
    <tbody>
    {{ blogposts }}
    {% set blogposts = collections.note | reverse  %}
    {# you have access to front matter data here #}     
    {% for blog in blogposts %}
    {% if blog.data.type == "Note" %}
    <tr class="journal__item">
      <td class="journal__date">{{ blog.date | asPostDate }}</td>
      <td class="journal__title"><a href="{{ blog.url }}" class="text-husky-500 font-bold ">{{ blog.data.title }}</a></td>
      <td class="journal__author">{{blog.data.creator }}</td>   
      <td class="journal__type">{{blog.data.type }}</td>   
    </tr>
    {% elif blog.data.type == "Community"  %}
      <tr class="journal__item">
        <td class="journal__date">{{ blog.data.date | formatPostDate  }}</td>
        <td class="journal__title"><a href="{{ blog.url }}" class="text-husky-500 font-bold ">{{ blog.data.title }}</a></td>
        <td class="journal__author">{{blog.data.creator }}</td>   
        <td class="journal__type">{{blog.data.type }}</td>   
      </tr>
      {% endif %}
    {% endfor %}
    </tbody>
  </table>
</section>

Why are you doing this?

The course covers a lot of material but only a fraction of it is worth reviewing, especially if you already have some programming experience.

The course material isn't catered to minds like mine. When I create notes I try to look only at the bare essentials that I need to learn how to think with this new knowledge I'm gaining. I commit to paper only what I think is necessary to be productive.

I do not want to write comprehensive notes. I spend too much time reading as it is and not enough time actually creating. I want future cohort members to use this work to become productive much faster.

The course materials have you read a lot and watch a lot, but you need to be doing a lot to actually learn much of anything. If I need a comprehensive explanation of some concept I'll pick up a textbook. That's what they're for.

The ultimate goal is to curate an improved learning path.