Skip to content

Getting Started (for Collective members)

Jump to bottom
Samuel Chan edited this page Mar 8, 2023 · 11 revisions

Developer Profile

If you've been invited to create a Developer Profile, please follow the instructions below.

Creating a Developer Profile

  1. Create a new branch with the name profile-<your-name> where <your-name> is your name in lowercase, with hyphens instead of spaces. For example, profile-dwightsch. This should correspond to the name of the file you will create in the pages/p directory and will be the slug for your profile page. Anyone will be able to see your profile page at https://collective.supertype.ai/p/<your-name>.

    • <your-name> must be unique. If your name is already taken, you can use your GitHub username instead. It should be 5 characters or more, and should not contain any special characters.
    • Please note that the branch name should start with profile- and not feature- or bugfix- or any other prefix
    • Use your real name. Do not use an offensive or inappropriate name. If you are not comfortable using your real name, you can use your GitHub username

  2. Create a new file in the src/pages/p directory with the name <your-name>.js. This is where you will write the code for your profile page. You can copy the contents of src/pages/p/_template.js (empty template) into your new file and start editing. You can also copy the contents of any other profile page in the src/pages/p directory and edit it to your liking.

    • All the profile pages are written in React and use the Tailwind CSS framework. You can use any of the existing profile pages as a reference.
    • You should ever only need to edit the <Profile> and <MyStack> component in <your-name>.js. The Layout component is used to wrap the Profile component with the header and footer. You can use any of the existing profile pages as a reference. Do not include any links in your Developer Profile as that is a violation of the terms of use (we don't want to turn this platform into a spammy linkfest with rampant sales links).
    • All pull requests starting with a branch name profile-<your-name> will be assumed to only contain changes to:
      • src/data/profiles/<your-name>.json
      • src/pages/p/<your-name>.js
    • ✨ Update 5th March '23: You can now use the generateStack() function to generate your stacks directly from your json file. You can see an example of this template and an example of the corresponding json data. If you want more control over the ordering and layout, use the _template.js as your starting point; if you're doing this as part of the Supertype Fellowship challenge, use _template.js as your starting point. Otherwise, choose whichever works for you.

  3. The data for your profile page is stored in the data/profiles directory. Create a new file in this directory with the name <your-name>.json. This is where you will write the data for your profile page. You can copy the contents of data/profiles/_template.json (empty template) into your new file and start editing. You can use any of the existing profile data files as a reference.

    • You may also be writing articles for your personal blog, or an organization. In that case, you can stream these articles into your Developer Profile by inserting the url of a WordPress site and the corresponding author id using the wp_blog_root_url and wp_blog_author_id key respectively. See /data/profiles/samuel.json for an example.
    • If you're using the generateStack() function, include stack in your JSON following this example. If you're building your stack out using the pre-made blocks, feel free to omit stack from your json file.

  4. Once you are done with your profile page, do a yarn build to make sure everything works and that there is no warnings. Commit your changes and push them to GitHub. Then, create a pull request ("PR") to merge your branch into the main branch. Once your pull request is merged, your profile page will be live on the Collective website and accessible at https://collective.supertype.ai/p/<your-name>.

If you are a member of Supertype Fellowship, you may be doing this as part of the Front End Development Challenge. If so, please follow the instructions on the Wiki page related to this section after your PR has been merged.

Contributing Code / Icons

We welcome contributions from all members of the Collective. If you want to improve Supertype Collective as a code contributor, please do not do so under a PR from a profile--prefixed branch. Follow the Wiki entry on improving Collective as a contributor on instructions to do so. A common scenario for this is when a particular skill or technology is missing an icon from the existing tech icons library. In which case, the kind thing to do is to submit a PR with dev- prefix to include said icons following the guidelines as a code contributor. Icons should be 50x50 pixels, in PNG, and ideally under 500 bytes (maximum 5kb). It should come in a pair of full-white and full-black, and follow the minimalistic style of the existing icons. Submit your Developer Profile in a separate PR prefixed with profile- to keep each Pull Requests focused.

Building Blocks

Supertype Collective comes with a set of React components that can be used to build your profile. We call them "blocks". They are built with Tailwind CSS and are available in the blocks directory.

Below is a complete example. You can see the output of these blocks on Supertype's co-founder Samuel Chan's Developer Profile using these pre-made blocks:

import me from '@/data/profiles/<your-name>.json'

export async function getStaticProps() {
    ...
    return {
        props: {
            data: me
        },
    }
}

const MyStack = () => {
    return (
        <Stack>
            <StackSection sectionName="AI &#38; Data">
                <IconRow tags={['pytorch', 'r', 'sql']} />
                <IconRow tags={['numpy', 'pandas', 'sklearn']} />
                <IconRow tags={['tidyverse', 'jupyter', 'selenium']} />
            </StackSection>
            ...
        </Stack>
    )
}

const Profile = ({ data }) => {    
    return (
        <Mainframe data={data}>
            <Toprow />
            <Body stack={<MyStack />} affiliations={<Affiliations />} />
        </Mainframe>
    )
}

You should never need to directly edit anything in the blocks directory, and focus on using these recycable components to build your profile. In practice, this means most of your changes are to the <MyStack /> component and to the data/profiles/<your-name>.json file. This makes your Pull Request (PR) more focused, which ease the review process.

All pull requests starting with a branch name profile-<your-name> will be assumed to only contain changes to:

  • data/profiles/<your-name>.json
  • pages/p/<your-name>.js
Clone this wiki locally