Skip to content
Gatsby + Are.na + Theme UI + MDX
JavaScript
Branch: master
Clone or download
Pull request Compare This branch is 59 commits ahead of jlengstorf:master.
Latest commit d752d70 Jul 28, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
demo SEO Jul 25, 2019
gatsby-theme-portfolio-are.na Update README.md Jul 29, 2019
.gitignore chore: ignore local Netlify stuff Jul 3, 2019
README.md Update README.md Jul 29, 2019
package.json SEO Jul 22, 2019
yarn.lock React-spring Jul 22, 2019

README.md

gatsby-theme-portfolio-are.na

A Gatsby theme for creating a portfolio with are.na.

View Live Demo

Features

Getting started

1. Generate a personal access token

You will first need to generate an access token from dev.are.na.

2. Make your are.na channel

You will need to create a single are.na channel which contains all projects as "inner" channels. You will then pass the slug of this single are.na channel to plugin config (details in the next step).

Example

my-awesome-arena-channel
  inner-channel-1
    image-1
    image-2
    ...
  inner-channel-2
    image-3
    image-4
    ...
  1. Install gatsby-theme-portfolio-are.na as a dependency to your project.
yarn add gatsby-theme-portfolio-are.na

or

npm install --save gatsby-theme-portfolio-are.na

4. Edit your gatsby-config.js

Add gatsby-theme-portfolio-are.na to your plugins in gatsby-config.js and update your siteMetaData.

module.exports = {
  siteMetadata: {
    indexTitle: "A Gatsby theme for creating a portfolio with are.na",
    indexDescription: "Gatsby + Are.na + Theme UI + MDX",
    social: [
      {
        name: "Github",
        url: "https://github.com",
      },
    ],
    navItems: [
      {
        name: "Contact",
        slug: "/contact",
      },
    ],
  },
  plugins: [
    {
      resolve: "gatsby-theme-portfolio-are.na",
      options: {
        accessToken: YOUR_PERSONAL_ACCESS_TOKEN,
        channelSlug: SLUG_OF_ARENA_CHANNEL,
      },
    },
  ],
}

Note: You will need to substitute out YOUR_PERSONAL_ACCESS_TOKEN and SLUG_OF_ARENA_CHANNEL.

5. Adding non-project pages (/about, /contact etc)

Simply create a .mdx file in the your /src/pages/ directory. For example /src/pages/contact.mdx will create the /contact page.

If you would like specific pages to show in the navigation, you can edit navItems in the gatsby-config.js (see previous step).

// /src/pages/contact.mdx

---
title: Contact
description: How to contact me
---

<div>

# Hello World

</div>

Customising through Component Shadowing

You can override components from this theme using Component Shadowing

Shadow Components

All of the files below are available for customising through shadow components.

AnimatedContent.js

Button.js

Footer.js

Header.js

Layout.js

PageTitle.js

ProjectsGrid.js

ProjectsGridItem.js

SEO.js

Theme UI

Because this theme uses Theme UI, you can customise colours, spacing, fonts, color modes, MDX styles and more by shadowing gatsby-plugin-theme-ui.

You can’t perform that action at this time.