Skip to content
JavaScript CSS
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
config Update typography.js May 31, 2019
content
src header text changed Jul 3, 2019
static new favicon Feb 25, 2019
.eslintignore added editor config and not using .jsx extensions Jan 23, 2019
.firebaserc removed project names May 2, 2019
.gitignore added firebase and firebase to gitignore Jan 31, 2019
.prettierrc changed prettier config Mar 20, 2019
LICENSE initial commit Jan 22, 2019
README.md
firebase.json added prettier config and formating Feb 4, 2019
gatsby-config.js
gatsby-node.js
package-lock.json
package.json added mdc-snackbar to contactform Jul 3, 2019

README.md

Netlify Status

ANOUN

Gatsby Starter by ANOUN | Material Business - Markdown

Features

  • MDC React Components
  • MDC Theming
  • Modern Design
  • Home Page
  • About Page
  • Contact Page
  • Blog
    • Featured images for blog posts
    • Markdown post format
  • SEO
    • Open Graph Tags
    • Dynamic Titles and Descriptions
    • Sitemap.xml
  • Prettier code formatting
  • CSS Fluid Typography
  • PWA Support
  • Google Analytics Support

Performance Test

View Lighthouse Test Results

Deploy to Netlify

Deploy to Netlify

Customization

Website Data

Edit config/website.js

module.exports = {
  // SEO
  title: "Gatsby Starter #1 | ANOUN | Markdown", // Navigation and Site Title
  titleTemplate: "%s · Gatsby Starter #1", // Template for Page Titles
  description: "This is Gatsby Starter #1 by ANOUN with content sourcing from Markdown files. Don't be shy, clone it on Github if you'd like!",
  siteUrl: "https://gatsby-starter-anoun-1-markdown.netlify.com", // Domain of your site. No trailing slash!
  image: "/images/anoun-share-image.png", // Used for SEO Share Image

  // Manifest
  icon: "src/favicon.png", // Used for manifest favicon generation
  short_name: "ANOUN", // shortname for manifest. MUST be shorter than 12 characters
  owner: "ANOUN", // Author
  theme_color: "#663399",
  background_color: "#ffffff",

  // Social and Analytics
  twitterUsername: "@anouncompany", // Twitter Username
  googleAnalyticsID: "", // Google Analytics Tag ID
}

Theme

Edit src/styles/theme.scss

:root {
    --mdc-theme-primary: #663399;
    --mdc-theme-on-primary: #ffffff;
    --mdc-theme-secondary: #000000;
    --mdc-theme-on-secondary: #ffffff;
    --mdc-theme-surface: #fefefe;
    --mdc-theme-background: #ffffff;
    --mdc-theme-on-background: #000000;
}

Typography

Edit config/typography.js

import Typography from "typography"

const typography = new Typography({
  title: "Gatsby Starter Material Business",
  baseFontSize: "18px",
  baseLineHeight: 1.666,
  headerFontFamily: [
    "Lora",
    "-apple-system",
    "BlinkMacSystemFont",
    "Segoe UI",
    "Roboto",
    "Helvetica",
    "Arial",
    "sans-serif",
    "Apple Color Emoji",
    "Segoe UI Emoji",
    "Segoe UI Symbol",
  ],
  bodyFontFamily: [
    "Lato",
    "-apple-system",
    "BlinkMacSystemFont",
    "Segoe UI",
    "Roboto",
    "Helvetica",
    "Arial",
    "sans-serif",
    "Apple Color Emoji",
    "Segoe UI Emoji",
    "Segoe UI Symbol",
  ],
  scaleRatio: 3.157,
  headerWeight: 400,
  overrideStyles: () => ({
    img: {
      marginBottom: 0,
    },
  }),
})

export default typography

About Page

Edit content/pages/about.md

# About

Welcome to the Material Business Starter by <span class="anoun-title">[ANOUN](https://anoun.company)</span>! This is the first in our series of Gatsby Starters inspired by Google's [Material Design](https://material.io). The Material Business starter features all the basics for a typical business' website such as a home page, about page, contact page with an email form, and a fully featured blog. This one is sourced from Markdown but we'll have others that use a headless CMS (stay tuned). So don't be shy, feel free to clone the [Github Repo](https://github.com/ANOUN/gatsby-starter-material-business-markdown) and get started!

...

Contact Form

Create a form at Formspark.io

Replace "YOUR-FORM-ID" with your formspark form's ID in src/components/ContactForm/ContactForm.js

...

  handleSubmit = event => {
    event.preventDefault()
    fetch('https://submit-form.com/YOUR-FORM-ID', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        Accept: 'application/json'
      },
      body: JSON.stringify(this.state)
    })
      .then(this.handleSuccess)
      .catch(function(error) {
        console.error(error)
      })
  }
...

Credits

Designed by ANOUN

Made in Idaho

You can’t perform that action at this time.