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-ghost-contact

v2.0.2

Published

Gatsby theme to easily add a contact form page to gatsby-theme-try-ghost

Downloads

39

Readme

gatsby-theme-ghost-contact

Released under MIT license. gatsby-theme-ghost-contact npm package version. PRs welcome!

Adds a contact form page to gatsby-theme-try-ghost. This theme makes use of latent-component-shadowing and showcases best practices for adding custom themes to gatsby-theme-try-ghost.

Install

yarn add gatsby-theme-ghost-contact

Dependencies

This theme is an add-on theme designed to seamlessly integrate with gatsby-theme-try-ghost. The theme uses functions provided by gatsby-theme-try-ghost, so installing gatsby-theme-try-ghost is required.

yarn add gatsby-theme-try-ghost

How to use

// In your gatsby-config.js
plugins: [
    {
        resolve: `gatsby-theme-ghost-contact`,
        options: {
            siteMetadata: {
                // This will be added to your navigation menu
                navigation: [{ label: `Contact` }],
            },
            //For netlify users only: remove serviceConfig or read section on netlify below.
            serviceConfig: {
                // This is the endpoint where your form data is sent to (optional, default: `/`)
                url: `https://api.your-server.com/contact`,
                // Must match the content type your service endpoint is expecting
                // optional, default: `application/x-www-form-urlencoded`
                contentType: `application/json`,
            },
            // Customize your page content here
            pageContext: {
                title: `Contact Us`,
                path: `/contact/`,
                custom_excerpt: `Just drop us a line!`,
                feature_image: `https://static.gotsby.org/v1/assets/images/gatsby-ghost-contact.png`,
                // Can be disabled by providing an empty list []
                form_topics: [`Feedback`, `Question`],
                meta_title: `Contact Us`,
                meta_description: `A contact form page.`,
                // All content below the contact form
                html: ``,
            },
        },
    },
]

Details

This plugin provides a simple contact page to your Gatsby-Ghost static website. The page style is inherited from the base theme and the form is styled using styled components. The plugin also does form validations. All configuration can be done in one place, namely in your gatsby-config.js. If you provide the navigation data shown above, a menu entry will be automatically added to your navigation bar.

You will have to change the serviceConfig.url to connect to your backend. The backend receives the form data and initiates an action such as sending you an email. Some guidance about your backend options can be found below.

If you want to integrate other pages or if you want to customize the base theme provided with gatsby-theme-try-ghost, please inspect the source code of gatsby-theme-ghost-contact closely. The latent-component-shadowing approach used here is very general and is an amazing concept. All additions to gatsby-theme-try-ghost will be based on these principles.

Validations

Form validations are currently hard-coded and cannot be changed by configuration. The following restrictions have been chosen which should cover a wide range of use cases:

  • Name: Number of characters must be in the range of 3 to 20.
  • Email: Must conform to the standard.
  • Subject: A subject must be chosen, if configured.
  • Message: Number of characters must be in the range of 10 to 4000.

In addition, the honeyspot is only visible to robots and must be left empty.

Backends

All backend options described in the Gatsby Docs should work with this theme as well. One of the following two options should get you started quickly:

Netlify

If you deploy your site to netlify, this may be the easiest approach for you. As all necessary netlify fields have been added to the form, you will automatically see form submissions in your netlify dashboards. The serviceConfig defaults have been set to match what netlify expects. Easiest is therefore to remove the serviceConfig object in the above configuration. If you want to explicitly see or control the values used, here are the default values for netlify:

    serviceConfig: {
        url: `/`,
        contentType: `application/x-www-form-urlencoded`,
    }

Run your own server

Running your own server will give you most control of the data and how it is processed. An initial implementation of such a micro-service is explained in this tutorial: Contact Forms in Ghost — Without External Services. Note that only chapters on the node micro-service are relevant here. Once your micro-service is up and running, just change serviceConfig to point to your endpoint. The micro-service described in the tutorial expects json, so the settings should look like:

    serviceConfig: {
        url: `https://api.your-server.com/contact`,
        contentType: `application/json`,
    }

Encoding

By selecting a content type, the form data json object is automatically encoded before being sent to the backend. If you choose application/x-www-form-urlencoded, data is url encoded. For application/json we use JSON.stringify(data) to convert the json object into a string. For all other content types, no encoding is performed.

Contributions

PRs are welcome! Consider contributing to this project if you are missing feature that is also useful for others. Explore this guide, to get some more ideas.

Copyright & License

Copyright (c) 2020 styxlab - Released under the MIT license.