Giter VIP home page Giter VIP logo

mdworld-jackson's Introduction

mdworld theme "Jackson"

Modern stack for mdworld.nl. Uses JAMstack with GatsbyJS (PWA traits), React, TypeScript and API calls to medium.com. Hosting on Github Pages and SSL with Cloudflare.

Naming theme

http://nl.wikipedia.org/wiki/USA_for_Africa

Adding React components to Markdown posts

Add to render function in src/templates/post.jsx See also https://github.com/gatsbyjs/gatsby/blob/master/examples/using-remark/src/pages/2018-01-27---custom-components/index.md

Readme

Code Climate Issue Count Codacy Badge

Logo

Gatsby Material Starter

A blog starter with Material design in mind for Gatsby.

Demo website.

Screenshot

GatsbyJS V1

This starter is based on GatsbyJS V1, which brings progressive web app features such as automatic code and data splitting (by route), prefetching, with service worker/offline-first support and PRPL pattern.

More information in the announcement.

Features

  • Blazing fast loading times thanks to pre-rendered HTML and automatic chunk loading of JS files
  • React-MD for Material design
    • Integrated FontAwesome support
    • Integrated Material Icons support
  • SASS/SCSS styling
  • Separate components for everything
  • High configurability:
    • User information
    • User social profiles
    • Copyright information
    • More!
  • Author segment
    • Name
    • Location
    • Description
    • Links
    • Follow Me button
  • Posts in Markdown
    • Code syntax highlighting
    • Embedded YouTube videos
    • Embedded Tweets
  • Tags
    • Seprate page for posts under each tag
  • Categories
    • Separate page for posts under each category
  • Suggested posts segment
  • Disqus support
    • Notifications about new disqus comments
  • Google Analytics support
  • Responsive design
    • On mobile, Disqus is loaded only after expanding comments for better performance
  • Social features
    • Twitter tweet button
    • Facebook share/share count
    • Reddit share/share count
    • Google+ share button
    • LinkedIn share button
    • Telegram share button
  • SEO
    • Sitemap generation
    • robots.txt
    • General description tags
    • Schema.org JSONLD (Google Rich Snippets)
    • OpenGraph Tags (Facebook/Google+/Pinterest)
    • Twitter Tags (Twitter Cards)
  • RSS feeds
  • Loading progress for slow networks
  • Offline support
  • Web App Manifest support
  • Development tools
    • ESLint for linting
    • Prettier for code style
    • Remark-Lint for linting Markdown
    • write-good for linting English prose
    • gh-pages for deploying to GitHub pages
    • CodeClimate configuration file and badge

NOTE: Take a look at gatsby-advanced-starter if you prefer building UI from scratch and/or only interested in fundamental features.

You can also visit my personal blog if you want to see a fully implemented blog based on this starter.

Article Screenshot Mobile Screenshot

Getting Started

Install this starter (assuming Gatsby is installed and updated) by running from your CLI:

gatsby new YourProjectName https://github.com/Vagr9K/gatsby-material-starter
npm install # or yarn install
npm run develop # or gatsby develop

Or you can fork the project, make your changes there and merge new features when needed.

Alternatively:

git clone https://github.com/Vagr9K/gatsby-material-starter YourProjectName # Clone the project
cd YourProjectname
rm -rf .git # So you can have your own changes stored in VCS.
npm install # or yarn install
npm run develop # or gatsby develop

Configuration

Edit the export object in data/SiteConfig:

module.exports = {
  blogPostDir: "sample-posts", // The name of directory that contains your posts.
  siteTitle: "Gatsby Material Starter", // Site title.
  siteTitleAlt: "GatsbyJS Material Starter", // Alternative site title for SEO.
  siteLogo: "/logos/logo-1024.png", // Logo used for SEO and manifest.
  siteUrl: "https://vagr9k.github.io", // Domain of your website without pathPrefix.
  pathPrefix: "/gatsby-material-starter", // Prefixes all links. For cases when deployed to example.github.io/gatsby-material-starter/.
  siteDescription: "A GatsbyJS stater with Material design in mind.", // Website description used for RSS feeds/meta description tag.
  siteRss: "/rss.xml", // Path to the RSS file.
  siteFBAppID: "1825356251115265", // FB Application ID for using app insights
  siteGATrackingID: "UA-47311644-4", // Tracking code ID for google analytics.
  disqusShortname: "https-vagr9k-github-io-gatsby-material-starter", // Disqus shortname.
  postDefaultCategoryID: "Tech", // Default category for posts.
  userName: "Material User", // Username to display in the author segment.
  userTwitter: "", // Optionally renders "Follow Me" in the UserInfo segment.
  userLocation: "North Pole, Earth", // User location to display in the author segment.
  userAvatar: "https://api.adorable.io/avatars/150/test.png", // User avatar to display in the author segment.
  userDescription:
    "Yeah, I like animals better than people sometimes... Especially dogs. Dogs are the best. Every time you come home, they act like they haven't seen you in a year. And the good thing about dogs... is they got different dogs for different people.", // User description to display in the author segment.
  // Links to social profiles/projects you want to display in the author segment/navigation bar.
  userLinks: [
    {
      label: "GitHub",
      url: "https://github.com/Vagr9K/gatsby-material-starter",
      iconClassName: "fa fa-github"
    },
    {
      label: "Twitter",
      url: "https://twitter.com/Vagr9K",
      iconClassName: "fa fa-twitter"
    },
    {
      label: "Email",
      url: "mailto:[email protected]",
      iconClassName: "fa fa-envelope"
    }
  ],
  copyright: "Copyright © 2017. Material User" // Copyright string for the footer of the website and RSS feed.
};

You can also optionally set pathPrefix:

module.exports = {
  // Note: it must *not* have a trailing slash.
  pathPrefix: "/gatsby-material-starter" // Prefixes all links. For cases when deployed to example.github.io/gatsby-material-starter/.
};

NOTE: user*, disqusShortname and copyright are optional and won't render if omitted.

WARNING: Make sure to edit static/robots.txt to include your domain for the sitemap!

Theming

Edit src/layouts/theme.scss to suit your needs. You can use Material color palette provided by React-MD.

@import "~react-md/src/scss/react-md";
$md-primary-color: $md-grey-400;
$md-secondary-color: $md-red-800;
$md-tertiary-color: $md-grey-300;

mdworld-jackson's People

Contributors

mdvanes avatar

Watchers

James Cloos avatar  avatar

mdworld-jackson's Issues

Do not set ./cover/image.png as path

newNode.frontmatter.cover = `./cover/${hash}.png`;

because on the post page, it does not resolve, e.g. https://mdworld.nl/site-updated/cover/1573bdd328cdab4afbc80a8a38f582bcb07880d6.png

In fact, just use /cover/image.png because an URL starting with / is prefixed with a root path in the PostCover component.

This does build to be run with gatsby build --prefix-paths see https://www.gatsbyjs.org/docs/path-prefix/

pwa

  • do not force homescreen installation
  • title bar color
  • when running on local server, error GET http://localhost:8000/logos/manifest.json 404 (Not Found)

Cancel and move hosting

Cancel old hosting and move to new hosting.

  • Setup redirects for subdomains and mail
  • Setup lift.mdworld.nl redirect (see #20), trivial on new hosting

Hero logo as Canvas

3D Logo from ImpossibleObjects if webgl is supported
Separate (repo, npm module, and) React component

Run JS in a MD post

It is great that adding a post in Gatsby is just a matter of adding a markdown file with some frontmatter, and you can still
run custom scripts in a post with mdx? gatsbyjs/gatsby#312 (comment)

See 2018-05-10-site-updated.md

Replace header images by procedurally generated art based on a hash function

hash of the content or title+date of the article

Shapes:

Emulate pencil drawing with fuzzy mesh

NPM package name: pg-post-cover (pg is procedurally generated)
On-hover of each cover image: show info about the name and how it was created

Redirect lift subdomain

Redirect lift.mdworld.nl to https://mdvanes.github.io/mdworld-simon/scriptie/

VDX does not allow this directly, Namecheap does.

Another solution would be to make a tld repo for scriptie e.g. scriptie-mdworld.github.io because a CNAME record can be created with value scriptie-mdworld.github.io.

Another solution would be an intermediairy page that detects the URL and redirect. E.g. a CNAME record for subdomain lift to mdworld.nl and detect that lift.mdworld.nl was used with JavaScript and redirect.

Another solution would be to redirect to an IP on home server and redirect with PHP to https://mdvanes.github.io/mdworld-simon/scriptie/ (prefer not to have a dependency to non-cloud server)

Fix performance

Note: Run audits against build:pp (with https on http-server -S -C -K)

  • App scores low on performance audit with Lighthouse. Score 42 with first meaningful paint after 4960 ms

  • Without any post previews: Score 72 with first meaningful paint after 2180 ms

  • Without any post previews, without mappings: Score 72 with first meaningful paint after 2190 ms

  • With post previews, but all the same cover images: Score 48 with first meaningful paint after 4830 ms

  • With post previews, but no cover images: Score 53 with first meaningful paint after 4580 ms

  • Only normal post previews (not retro), but no cover images: Score 57 with first meaningful paint after 4590 ms

  • Only normal post previews (not retro), only Card/CardText: Score 72 with first meaningful paint after 2240 ms

  • Only normal post previews (not retro), minus Media: Score 54 with first meaningful paint after 4580 ms

  • Only normal post previews (not retro), minus GatsbyLink: Score 58 with first meaningful paint after 4540 ms

  • Only normal post previews (not retro), minus CardTitle (w avatar): Score 67 with first meaningful paint after 2450 ms

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.