moxdev

/*! Flickity v2.1.2
https://flickity.metafizzy.co
---------------------------------------------- */

.flickity-enabled {
	position: relative;
}

.flickity-enabled:focus {
	outline: none;

moxdev

module.exports = {
  plugins: [
    require("tailwindcss"),
    require("autoprefixer"),
    process.env.NODE_ENV === "production" && require("cssnano"),
  ].filter(Boolean),
};

moxdev

/**
 * For debugging focus in Gatsby
 * @ https://flaviocopes.com/gatsby-load-external-js/
 * @ https://hiddedevries.nl/en/blog/2019-01-30-console-logging-the-focused-element-as-it-changes
 * @ https://stackoverflow.com/questions/1197575/can-scripts-be-inserted-with-innerhtml
 */
const addScript = () => {
  const html = `<script>
      document.body.addEventListener('focus', function() {
        console.log('focused: ', document.activeElement)

moxdev

/* 
  ##Device = Desktops
  ##Screen = 1281px to higher resolution desktops
*/

@media (min-width: 1281px) {
  
  /* CSS */
  

moxdev

<img src="<?php echo esc_url( $sm_img ); ?>" alt="<?php echo esc_attr( $alt ); ?>"
	srcset="
	<?php echo esc_url( get_the_post_thumbnail_url( get_the_ID(), 'listing-thumb-sm' ) ); ?> 250w,
	<?php echo esc_url( get_the_post_thumbnail_url( get_the_ID(), 'listing-thumb-md' ) ); ?> 550w,
	<?php echo esc_url( get_the_post_thumbnail_url( get_the_ID(), 'listing-thumb-lg' ) ); ?> 850w,
	<?php echo esc_url( get_the_post_thumbnail_url( get_the_ID(), 'listing-thumb-xlg' ) ); ?> 1150w">

moxdev

Gastby with ESLint, Prettier, Stylelint, Emotion Styled Components, Tailwindcss

basic configs for a new Gatsby build

Install Prettier & ESLint Dev Dependencies

npm i -D babel-eslint babel-preset-gatsby eslint eslint-config-airbnb eslint-config-prettier eslint-config-wesbos eslint-plugin-html eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-prettier eslint-plugin-react eslint-plugin-react-hooks prettier

Install Tailwind, Emotion, Emotion Styled Components & Twin Macro Dependencies

moxdev

import { FaListAlt } from 'react-icons/lib/fa'

export default {
    title: "Category",
    name: "category",
    type: "document",
    icon: FaListAlt,
    fields: [
        {
            title: "Name",

moxdev

import S from "@sanity/desk-tool/structure-builder"
import { FaFileText, FaEdit, FaComment, FaPlayCircle, FaQuestionCircle, FaCheckCircle } from 'react-icons/lib/fa'
 
export default () =>
    S.list()
        .title("App")
        .items([
            S.listItem()
                .title("Content")
                .icon(FaFileText)

moxdev

/**
 * Sets img title of uploaded attachment.
 * If no title, will use the alt as a defualt title.
 *
 * @param array   $attr Image tag attributes.
 * @param WP_Post $attachment The WP_Post object for the attachment.
 * @link https://developer.wordpress.org/reference/hooks/wp_get_attachment_image_attributes/
 *
 * @return array (maybe) filtered image tag attributes.
 */

moxdev

<?xml version="1.0"?>
<root>
    <item>
      <name>Evoluent VerticalMouse</name>
      <appendix>All customizations only apply for the Evoluent VerticalMouse.</appendix>
      <appendix>Note: button 4 (the mouse scroll button) and button 5 are swapped in Karabiner. I still use the default Evoluent labeling.</appendix>
      <devicevendordef>
        <vendorname>EVOLUENT</vendorname>
        <vendorid>0x1a7c</vendorid>
      </devicevendordef>