About Us

Developed by: Donald Boulton Living in OKC. Follow Him on Twitter.🙌 0
Nov 9, 20197 min readAbout  Category:  Tech

Technical Notes

🎁 Code Coverage

LICENSE Tip Me via PayPal Join the community on Spectrum style: styled-components Netlify Status


No added external Style sheets no more Bluma which as of March 1, 2020 to March 6th I removed and, used the below to style my site. That was fun! my first attempt at my styling Globally.

Styled Components

💅 with custom React Hooks screen window.matchMedia mediaQuery's 💍

Beautiful media queries better than CSS @media for styled-components with ability to specify custom breakpoints.

Gallery and Logo Grids with custom-screen mediaQuerys 🍱 Masonry Post 💅.

Photos Layout

styled-css-grid 🍱

A tiny (~2kb) [CSS grid] layout for React, built with [styled-components] 💅.

JavaScript Standard


Just Having Fun

🍸 This website is built as static HTML with React component-modular Docker Container builds using React components and GraphQL, Built with WebPack. Including a user data, todo's and site reviews backend. I am just now working on the data structure using FaunaDB.

Served on Netlify via a continuous deployment (CD) workflow. Pull requests are automatically built into preview apps, while commits to the master branch trigger the production build and deploy onto Netlify CDN edge node infrastructure. Since the whole site is just a bunch of static files copied onto multiple CDN nodes around the world, time to first byte (TTFB) is consistently fast at around 1ms to 2ms. Instant Notifications through my Slack Bots or GMail and phone notifications using Netlify Functions for my Mansbooks.com publiuslogic.com workspace.

Starter Publius

🚀 This 🔗 Repo v5 powers the React site hosted at publiuslogic.com. I use it to write about my personal interests, ranging from theoretical physics and spiritual learning to A Human Basic Instructions Abstract, web development and spending time outdoors... oh and not to forget breaking conventions like a React Site with Json-Ld per template for SEO, Internet Positioning.

The site is built with React, Bulma and styled-components. It's fully responsive, relies heavily on React Hooks for stateful components such as Image Gallery's, Modal's and ToTop. Prism for syntax highlighting, GitHub issues using withUtterances as blog post comments and utilizing Lunr for custom search.

Feel free to reuse any part of this repo to create your own React site.

A 🔗 React v2 and 🔗 Netlify CMS powered generic business website starter based on gatsby-starter-netlify-cms


🔥 No run time dependency or vulnerable server stack required Pre-built pages served over a CDN for fastest time to first byte Fast and cheap CDN scaling results in ultra-high availability worldwide Server-side processes abstracted into microservice APIs for reduced attack surface areas Modern Continuous Deployment (CD) Git workflows with instant rollbacks Headless CMS for complete separation from your app/site and with full version control Modern authentication methods such as OAuth 2 for ultimate security.



I am using FaunaDB with Netlify Identity for Auth for my CMS, Users Profile Backend and for ToDos's, Notes and Email Subscriptions which offers secure membership with roles for user authentication and attribute-based access control (ABAC) out of the box.

What makes FaunaDB’s ABAC even more powerful is that changes to access rights are reflected immediately because ABAC is evaluated for every query. This means that access can be granted or revoked without requiring a user to re-login.

Identity Widget

🔐 A Custom Styled and Build for Publius, a component used to authenticate with Netlify's Identity service. 🆔 🔗 Live demo

For a lower level library to the underlying 🔗 GoTrue API, see 🔗 gotrue-js

Utilizing Netlify Identity in React to make public and private pages easily.

What is Identity

⁉️ Netlify’s Identity service is a plug-and-play microservice for handling site functionalities like signup's, logins, password recovery, user metadata, and roles. You can use it from single page apps instead of rolling your own, and integrate with any service that understands JSON Web Tokens (JWTs).

Learn more about this service from this 🔗 blog post

It follows the 🔗 JAMstack architecture by using Git as a single source of truth, and 🔗 Netlify for continuous deployment, and CDN distribution.

Netlify CMS

🔗 Static + content management = ❤️

🖥️ Netlify CMS is Always the latest Netlify CMS GitHub repo pull, with my custom Webpack hashed build, not the React plugin and netlify-cms node module way; which builds it into the frontend = slowing React way down; TEST it to see for yourself.

My custom light, dark build of the Netlify Identity Widget is used on the React frontend and in my git-gateway back-end.

Get the speed, security, and scalability of a static site, while still providing a convenient editing interface for content.

An integrated part of your Git workflow Content is stored in your Git repository along side your code for easier versioning, multi-channel publishing, and the option to handle content updates directly in Git.

Extensible CMS

❤️ Netlify CMS is built as a single-page React app. Create custom-styled previews, UI widgets, and editor plugins or add backend's to support different Git platform APIs. My Netlify CMS backend will build and add Pages, Posts, My layout components with Event data for Bulma GCal fullCalendar localized events, Notifications, Authors, Products, Site Updates and charts data using charts.js displaying build, sales and analytics charts data on individual pages and posts. All edited from a CMS Backend on a Static Website!


PubliusLogic is a complex React Site and not for React programing beginners.

✔️ Complete Website Suite - Pages = Home, Blog, About, Privacy, Sitemap and Contact

  • 🚋Serverless Functions
  • 🔏Authentication (with Netlify Identity)
  • 🔐Authenticated Serverless Functions (FaunaDB)
  • 😻External Provider login with GitHub, Bitbucket, Google, etc.
  • 🏠Protected Routes
  • 👋🏼Dynamic Clientside Pages in React (enabling all the above)
  • 🕵🏼‍♂️Hide API Secrets from being exposed to Frontend
  • Algolia Instant Search
  • Netlify CMS for Content Management
  • FaunaDB Users Backend and Admin
  • SEO Friendly (Sitemap, Schemas, Meta Tags, GTM etc.)
  • Styled Components, Styled Media Query & Bulma for styling
  • Progressive Web App & Offline Support
  • Tags, Categories and a RSS Feed for Blog
  • Time to Read and a Table Of Contents
  • Comments with GitHub Issues
  • Follow, Mention, Star and Fork GitHub buttons
  • Share Support
  • Pagination
  • Contact Form (Lambda Netlify Forms)
  • Easy Configuration using config.js file

Context Wrapper

PubliusLogic has a GlobalContextProvider wrapper for its light and dark Theme, Users{CTX} and FaunaDB{CTX}


A custom React Hook to help you implement a "dark mode" component for your application. The user setting persists to localStorage.

❤️ it? ⭐️ it on GitHub or Tweet about it.

PubliusLogic is using use-dark-mode and its suggested install instructions with gatsby-plugin-dark-mode | GatsbyJS, plugin for React integration injecting noflash.js.

☀️🌜 This Site is an example of the above's usage.


Bring your team together with Slack, Work collaboration hub.

MailChimp Newsletters
MailChimp Newsletters

Enjoyed this post? Subscribe!
Css Tricks

Front-End UI, Javascript & Functions, HTML Tips, and More!