npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

gatsby-theme-agora

v1.0.28

Published

A minimalist theme for creating landing pages for conferences and meetups

Downloads

2

Readme

CircleCI Lighthouse accessibility Lighthouse best practices Lighthouse performance

Gatsby theme Ágora

A Gatsby theme to generate simple events and conferences landings pages.

See the live demo generated from the template repository!

Features:

  • Customize the design (based in bootstrap5) by overwriting the components in the gatsby site that uses this theme
  • Different agendas for different days based in a yaml file
  • Speakers detail and summary based in markdown files
  • Organizers summary in a yaml file
  • Static pages as markdown files
  • Talks with none or more than one speaker based in markdown files
  • Venue in GoogleMaps (without a GoogleMap key)

Not yet but prioritized:

  • Sponsors
  • Different venues per agenda (partially implemented)
  • i18n and support for different languages
  • PostEvent documentation (images, videos, etc)
  • Stats in the home

You can open a PR with the label "proposal" to ask for more features!

Getting started

Option 1 (recommended): Using the template

You can use the template repository of the demo site that is fully configured and ready to be used.

Option 2: Follow the following steps

Install the theme

Install the theme dependency in your gatsby site

yarn add gatsby-theme-agora

Add the theme in your gatsby-config.js file

module.exports = {
  plugins: [
    {
      resolve: "gatsby-theme-agora",
      options: {
        siteUrl: "https://yourdomain.com",
      },
    },
  ],
};

Configure and add content to your conference site

All the configuration and content resides in the /content directory in the root of the gatsby project.
The structure should be similar to this:

content
├── agenda.yaml
├── links.yaml
├── organizers.yaml
├── config
    ├── config.yaml
    └── images
        ├── banner.png
        └── logo.png
├── pages
    └── your-page.md
├── speakers
    ├── speaker-1.md
    └── speaker-2.md
└── talks
    ├── talk-1.md
    └── talk-2.md
Add the Configuration file

The general configuration can be set in the content/config/config.yaml file, the default information is

Important note with images: if your received the error "Cannot return null for non-nullable field ConfigYamlConferenceInfo.xxxImage", check if the relative path for the image is correct. This happens when the image can't be found.

siteInfo:
  # optional, the language of the site
  language: en
  # required, the site url
  url: https://conference.com
  # optional, the footer notes. You can specify null to remove all the footer notes.
  # They can be written in markdown
  footerNotes: Created with [Gatsby Theme Agora](https://github.com/asiermarques/gatsby-theme-agora)

conferenceInfo:
  # required
  name: Awesome Conference
  # required
  claim: A great conference for developers and other mystical creatures
  # required
  date: 5th May, Bilbao
  # required
  logoImage: images/logo.png
  # required
  hashTag: "#conference"
  # required
  shareImage: images/banner.png
  # optional
  ticketsCta:
    text: Get your ticket!
    link: "https://example.com"

summary:
  # required
  description: A little description for the conference, what is the audience, why is interesting to the people and this kind of stuff
  # optional
  cta:
    text: Agenda
    link: "#agenda"

location:
  # required
  mapIframeUrl: https://www.openstreetmap.org/export/embed.html?bbox=-3.0432558059692383%2C43.273112177849896%2C-2.9591417312622075%2C43.31212645126047&layer=mapnik
  # required
  venueInformation: |
    Jardin Botánico s/n
    48902 Barakaldo, España
Adding an speaker

You can create a markdown file with the speaker data in the content/speakers directory.
The markdown file should have the following meta structure:

---
key: required, the key for the speaker
name: required, the name of the speaker
title: optional, the company title
image: required, the path to the image file, for example images/speaker.png
social:
  twitter: optional, the twitter username
  linkedin: optional, the linkedin username
  github: optional, the github username
---

Text for the bio
Adding a talk

You can create a markdown file with the speaker data in the content/talks directory.
The markdown file should have the following meta structure:

---
key: required, the key for the talk
speakers: required, an array for the speakers, for example [ speaker ]
title: required, the title for the talk
---

The talk description

####3 Adding the talk for an agenda slot

You should add the talk to the content/agenda.yaml file in order to be shown in the agenda.
The talk is added by its key, for example:

content:
  - type: talk
    track: 1
    key: the_talk_key
    slot: "16:30 - 17:10"

Websites using this theme