greglobinski/react-website-themes

A collection of sets of styled ready-to-use React components to build a website. Built for Gatsby Starter Kit.

greglobinski.com

That's the code of my website (greglobinski.com). My first production-use of the Gatsby-React tandem.

Screenshots

Build with

• Gatsby
• React

Starting point

• gatsby-starter-hello-world

Additional plugins and packages

• gatsby-plugin-postcss-sass
• gatsby-plugin-react-helmet
• gatsby-plugin-netlify
• gatsby-plugin-nprogress
• react-redux
• redux
• autoprefixer
• react-icons
• react-obfuscate
• Exo and Roboto fonts through typefaces

Setup

1. Install gatsby-cli (docs)
2. Clone the repository to your localhost
3. Install dependencies (yarn install)
4. Use gatsby-cli to start in development mode (docs)
5. Have fun.

react-website-themes's Issues

Handle external links in menu component

Hey Greg,

I'm looking to handle external links in menu component (like my github/twitter for personal site). Would you accept a PR like the following or prefer a different approach?

<ul>
        {items.map(item => {
          const { label, to, icon: Icon, external, linkProps } = item;

          return (
            <li key={label}>
            {external ? 
                <a href={to} target="_blank">
                    {Icon && <Icon />}
                    <span>{label}</span>
                </a>
            :
                <Link to={to} activeClassName="active" {...linkProps}>
                    {Icon && <Icon />}
                    <span>{label}</span>
                </Link>
            }
            </li>
          );
        })}
</ul>

in menu config you can pass external property like

const menu = [
  { label: 'Home', to: '/', icon: HomeIcon },
  { label: 'Blog', to: '/blog', icon: BlogIcon },
  { label: 'GitHub', to: 'http://github.com/jkornblum', icon: GitHubIcon, external: true },
];

schema.org templates

Hello there,

Can we add schema.org jsonLD template for BlogPosting. I use your blog starter (v1) and i changed Seo.js, created an condition for postSEO and changed original code like below;

If is that possible, i will fork this repo & try to update base SEO.js

const Seo = props => {
  const { data, facebook, postSEO } = props;
  const postTitle = ((data || {}).frontmatter || {}).title;
  const postDescription = ((data || {}).frontmatter || {}).subTitle;
  const postCover = ((data || {}).frontmatter || {}).original;
  const postSlug = ((data || {}).fields || {}).slug;
  const okat = ((data || {}).frontmatter || {}).category;
  const date = ((data || {}).fields || {}).prefix;

  const title = postTitle ? `${postTitle} - ${config.shortSiteTitle}` : config.siteTitle;
  const description = postDescription ? postDescription : config.siteDescription;
  const image = postCover ? postCover.childImageSharp.resize.src : config.siteImage;
  const url = config.siteUrl + config.pathPrefix + postSlug;

  const schemaOrgJSONLD = [
    {
      "@context": "http://schema.org",
      "@type": "WebSite",
      url: config.siteUrl,
      name: config.siteTitle,
      alternateName: config.shortSiteTitle ? config.shortSiteTitle : "",
      description: postSEO ? postDescription : config.siteDescription
    }
  ];

  if (postSEO) {
    schemaOrgJSONLD.push({
      "@context": "http://schema.org",
      "@type": "BlogPosting",
      url: url,
      mainEntityOfPage: url,
      name: title,
      articleBody: data.html,
      alternateName: config.shortSiteTitle ? config.shortSiteTitle : "",
      headline: title,
      author: config.authorName,
      datePublished: date,
      dateModified: date,
      publisher: {
        "@type": "Organization",
        name: config.authorName,
        logo: {
          "@type": "imageObject",
          url: "https://serkanalgur.com" + image
        }
      },
      image: {
        "@type": "ImageObject",
        url: "https://serkanalgur.com" + image
      },
      description
    });
  }

  return (
    <Helmet
      htmlAttributes={{
        lang: config.siteLanguage,
        prefix: "og: http://ogp.me/ns#"
      }}
    >
      {/* General tags */}
      <title>{title}</title>
      <meta name="description" content={description} />
      {/* OpenGraph tags */}
      <meta property="og:url" content={url} />
      <meta property="og:title" content={title} />
      <meta property="og:site_name" content={config.siteTitle} />
      <meta property="og:description" content={description} />
      <meta property="og:locale" content={config.siteLanguage} />
      <meta property="og:image" content={"https://serkanalgur.com" + image} />
      <meta property="og:type" content={postSEO ? "article" : "website"} />
      {postSEO ? (
        <meta property="article:author" content="https://facebook.com/serkan.algur" />
      ) : (
        ""
      )}
      {postSEO ? (
        <meta property="article:publisher" content="https://facebook.com/serkan.algur" />
      ) : (
        ""
      )}
      {postSEO ? <meta property="article:section" content={okat} /> : ""}
      <meta property="fb:app_id" content={facebook.appId} />
      {/* Twitter Card tags */}
      <meta name="twitter:card" content="summary_large_image" />
      <meta
        name="twitter:creator"
        content={config.authorTwitterAccount ? config.authorTwitterAccount : ""}
      />
      <script type="application/ld+json">{JSON.stringify(schemaOrgJSONLD)}</script>
    </Helmet>
  );
};

Seo.propTypes = {
  data: PropTypes.object,
  facebook: PropTypes.object.isRequired,
  postSEO: PropTypes.bool,
  date: PropTypes.any
};

export default Seo;

Comma renders after time, even with no location set

Even if a location is not provided (e.g. by default in gatsby-starter-kit#clean-diary), the ,{' '} still renders, leaving a trailing comma after the time.

react-website-themes/packages/clean-diary/src/components/Blog.js

Line 52 in fe6f41f

{format(itemDate, 'dddd [at] h:mm a')},{' '}