{"id":16211895,"url":"https://github.com/ryanwiemer/gatsby-theme-amsterdam","last_synced_at":"2025-05-11T22:32:16.154Z","repository":{"id":45640478,"uuid":"198571294","full_name":"ryanwiemer/gatsby-theme-amsterdam","owner":"ryanwiemer","description":"A Gatsby theme for artists, photographers and other creative folks 👨‍🎨","archived":false,"fork":false,"pushed_at":"2021-12-03T06:01:46.000Z","size":4571,"stargazers_count":140,"open_issues_count":2,"forks_count":34,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-05-07T20:36:37.035Z","etag":null,"topics":["gatsby","gatsby-theme","static-site","theme","theme-development"],"latest_commit_sha":null,"homepage":"https://amsterdam.netlify.app/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ryanwiemer.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-07-24T06:20:23.000Z","updated_at":"2025-04-23T15:46:34.000Z","dependencies_parsed_at":"2022-09-13T15:25:51.983Z","dependency_job_id":null,"html_url":"https://github.com/ryanwiemer/gatsby-theme-amsterdam","commit_stats":null,"previous_names":[],"tags_count":24,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ryanwiemer%2Fgatsby-theme-amsterdam","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ryanwiemer%2Fgatsby-theme-amsterdam/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ryanwiemer%2Fgatsby-theme-amsterdam/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ryanwiemer%2Fgatsby-theme-amsterdam/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ryanwiemer","download_url":"https://codeload.github.com/ryanwiemer/gatsby-theme-amsterdam/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253645434,"owners_count":21941315,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["gatsby","gatsby-theme","static-site","theme","theme-development"],"created_at":"2024-10-10T10:49:35.055Z","updated_at":"2025-05-11T22:32:16.078Z","avatar_url":"https://github.com/ryanwiemer.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Gatsby Theme Amsterdam\n\n\u003cp\u003e\n  \u003ca href=\"https://github.com/ryanwiemer/gatsby-theme-amsterdam/blob/master/LICENSE\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/license-MIT-blue.svg\" alt=\"Gatsby Theme Amsterdam is released under the MIT license.\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/package/gatsby-theme-amsterdam\"\u003e\n    \u003cimg src=\"https://img.shields.io/npm/v/gatsby-theme-amsterdam.svg\" alt=\"Current npm package version.\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://npmcharts.com/compare/gatsby-theme-amsterdam?minimal=true\"\u003e\n    \u003cimg src=\"https://img.shields.io/npm/dm/gatsby-theme-amsterdam.svg\" alt=\"Downloads per month on npm.\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://npmcharts.com/compare/gatsby-theme-amsterdam?minimal=true\"\u003e\n    \u003cimg src=\"https://img.shields.io/npm/dt/gatsby-theme-amsterdam.svg\" alt=\"Total downloads on npm.\" /\u003e\n  \u003c/a\u003e\n  \u003cimg src=\"https://img.shields.io/badge/PRs-welcome-brightgreen.svg\" alt=\"PRs welcome!\" /\u003e\n  \u003ca href=\"https://twitter.com/intent/follow?screen_name=ryanwiemer\"\u003e\n      \u003cimg src=\"https://img.shields.io/twitter/follow/ryanwiemer.svg?label=Follow%20@ryanwiemer\" alt=\"Follow @ryanwiemer\" /\u003e\n    \u003c/a\u003e\n\u003c/p\u003e\n\nA Gatsby theme for artists, photographers and other creative folks.\n\n[Demo Website](https://amsterdam.netlify.com/)\n\n![](screenshots/demo.jpg)\n\n## Features\n\n- Minimal responsive design\n- Optional page transitions\n- Multiple grid options to display posts\n- Customizable theme colors and typography with Theme UI\n- MDX support\n- SEO friendly component\n- Mobile menu\n- Optional scroll progress indicator\n- Optional toggle to switch color modes\n- Emotion using styled-components syntax\n- Tags\n- Pagination\n- Offline support\n\n## Installation\n\n### Use [Gatsby Starter Amsterdam](https://github.com/ryanwiemer/gatsby-starter-amsterdam)\n\nThis will generate a new site pre-configured to use Gatsby Theme Amsterdam.\n\n```sh\ngatsby new your-themed-site https://github.com/ryanwiemer/gatsby-starter-amsterdam\n```\n\n### Manually Add To Your Site\n\n1. Install the theme\n\n```sh\nnpm install --save gatsby-theme-amsterdam\n```\n\nor\n\n```sh\nyarn add gatsby-theme-amsterdam\n```\n\n2. Add the theme to your `gatsby-config.js`\n\n```javascript\n// gatsby-config.js\nmodule.exports = {\n  plugins: [\n    {\n      resolve: 'gatsby-theme-amsterdam',\n      options: {\n        // See theme options section for more information\n      },\n    },\n  ],\n}\n```\n\n## Usage\n\n### Theme Options\n\n| Key                 | Default Value | Description                                                                                                 |\n| ------------------- | ------------- | ----------------------------------------------------------------------------------------------------------- |\n| `basePath`          | `/`           | Root URL for all posts.                                                                                     |\n| `contentPath`       | `content`     | Location of markdown files used for the posts.                                                              |  |\n| `transitions`       | `true`        | Include simple page transitions powered with [framer-motion](https://github.com/framer/motion)              |\n| `postsPerPage`      | `6`           | Determines the number of posts shown on each page. This effects both the posts and tag template.            |\n| `grid`              | `basic`       | Determines the type of grid used on the posts and tag templates. Two available options: `basic` and `list`. |\n| `progressIndicator` | `true`        | Include a progress indicator on the post template.                                                          |\n| `colorToggle`       | `true`        | Include a button in the menu to toggle the color modes.                                                     |\n\n#### Example Usage\n\n```javascript\n// gatsby-config.js\nmodule.exports = {\n  plugins: [\n    {\n      resolve: 'gatsby-theme-amsterdam',\n      options: {\n        // basePath defaults to '/'\n        basePath: 'photography',\n        // grid defaults to 'basic'\n        grid: 'list',\n      },\n    },\n  ],\n}\n```\n\n### Additional Configuration\n\nIn addition to the theme options, there are a handful of items you can customize via the `siteMetadata` object in your site's `gatsby-config.js`.\n\n```javascript\n// gatsby-config.js\nmodule.exports = {\n  siteMetadata: {\n    // Used for the site title and SEO\n    title: 'My Site Title',\n    // Used for SEO\n    description: 'My site description...',\n    // Used for SEO. Do not include a trailing slash\n    url: 'https://www.example.com',\n    // Used for SEO. Must be the full URL for the default image\n    image: 'https://www.example.com/og-image.jpg',\n    // Used for SEO\n    author: 'John Doe',\n    // Used for an optional intro section at the top of the posts template\n    intro: 'John Doe is a photographer....',\n    // Used for the links in the menu\n    menuLinks: [\n      {\n        name: 'Home',\n        slug: '/',\n      },\n      {\n        name: 'About',\n        slug: '/about/',\n      },\n      {\n        name: 'Contact',\n        slug: '/contact/',\n      },\n    ],\n    // Used for the links in the footer\n    footerLinks: [\n      {\n        name: 'Dribbble',\n        url: 'https://www.dribbble.com/johndoe',\n      },\n      {\n        name: 'Instagram',\n        url: 'https://www.instagram.com/johndoe',\n      },\n    ],\n  },\n}\n```\n\n### Customization\n\nGatsby Theme Amsterdam utilizes [Theme UI](https://theme-ui.com/). In order to customize the theme styling you must create a theme file and then override the default `amsterdamTheme` values. If you're familiar with Styled Components or Emotion it's the same as adapting the theme you pass to `ThemeProvider`.\n\nAll default values can be viewed [here](https://github.com/ryanwiemer/gatsby-theme-amsterdam/blob/master/theme/src/gatsby-plugin-theme-ui/index.js).\n\n```javascript\n// src/gatsby-plugin-theme-ui/index.js\n\nimport amsterdamTheme from 'gatsby-theme-amsterdam/src/gatsby-plugin-theme-ui'\n\nexport default {\n  ...amsterdamTheme,\n  colors: {\n    ...amsterdamTheme.colors,\n    background: '#FCD5C0',\n  },\n}\n```\n\n### Writing Content\n\nPosts are written in markdown / mdx format with either `.md` or `.mdx` and placed in the `content` directory at the root of the site unless a different `contentPath` is defined in the theme options. There are four front matter variables used in the theme which are shown below.\n\n```markdown\n---\ntitle: Hello World\ndate: 2019-07-06\ncover: cover.jpg\ntags: [greeting, blog]\n---\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fryanwiemer%2Fgatsby-theme-amsterdam","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fryanwiemer%2Fgatsby-theme-amsterdam","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fryanwiemer%2Fgatsby-theme-amsterdam/lists"}