skoch

Add Prettier to your project!

The following process will get you all setup with a new project.

The objective is to have prettier setup from the get-go so that anything that's staged will be checked and fixed according to your defined styles. This depends on pretty-quick as well as husky.

Strategies

One thing you could do would be to create a .prettierignore file and add specific directories (or even the entire project!) and incrementally add in directories and/or single files. By doing this, you don't need to deal with your git history getting messed up, certain parts of larger codebases can be completely ignored (but why?), and certain parts can be updated by their respective maintainers.

If you are adding to an existing project, and aren't concerned about your git history, you can follow along Fix existing codebase to add and then you will need to "

skoch

// Icon.js
import React from 'react';
import PropTypes from 'prop-types';

const Icon = (props) => {
  const {
    children,
    size,
    fill,
  } = props;

skoch

import React, { ReactNode } from 'react';

interface Props {
  width?: string;
  height?: string;
  viewBox?: string;
  children: ReactNode;
}

const SVGIcon = ({ width = '20px', height = '20px', viewBox = '0 0 20 20', children }: Props) => (

skoch

body {
  background-image: linear-gradient(
    45deg,
    #fff 25%,
    transparent 25%,
    transparent 75%,
    #fff 75%
  ),
  linear-gradient(45deg, #fff 25%, #000 25%, #000 75%, #fff 75%);

skoch

title	description	tabs
Button	Buttons are used to initialize an action. Button labels express what action will occur when the user interacts with it.```	Usage Style Code Accessibility

Some mdx text, with a component

skoch

select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='10' viewBox='0 0 17 10'%3E%3Cpolyline fill='none' stroke='%233194E0' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' points='1 1 8.5 8.5 16 1'/%3E%3C/svg%3E%0A");
  background-position: calc(100% - 2rem) 2.6rem;
  background-repeat: no-repeat;
  
  &:hover {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='10' viewBox='0 0 17 10'%3E%3Cpolyline fill='none' stroke='%23C9EEFE' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' points='1 1 8.5 8.5 16 1'/%3E%3C/svg%3E%0A");
  }
}

skoch

const markerSvg = {
  url: 'data:image/svg+xml,%3Csvg width="39" height="49" xmlns="http://www.w3.org/2000/svg"%3E%3Cg fill="none" fill-rule="evenodd"%3E%3Cpath d="M19.5 2C29.165 2 37 9.835 37 19.5c0 13.933-15.267 26.984-17.5 26.984C16.982 46.484 2 33.433 2 19.5 2 9.835 9.835 2 19.5 2zm.126 25.18a6.715 6.715 0 1 0 0-13.43 6.715 6.715 0 0 0 0 13.43z" fill="%23000" fill-rule="nonzero"/%3E%3Cpath d="M19.5 1C29.717 1 38 9.283 38 19.5c0 6.465-3.099 13.192-8.139 19.35-3.85 4.706-8.608 8.634-10.361 8.634-1.878 0-6.608-3.876-10.47-8.637C4.06 32.723 1 25.977 1 19.5 1 9.283 9.283 1 19.5 1zm.126 25.18a5.715 5.715 0 1 0 0-11.43 5.715 5.715 0 0 0 0 11.43z" stroke="%23FFF" stroke-width="2" fill="%231D5FE2"/%3E%3C/g%3E%3C/svg%3E',
};

const markerSvgOver = {
  url: 'data:image/svg+xml,%3Csvg width="39" height="49" xmlns="http://www.w3.org/2000/svg"%3E%3Cg fill="none" fill-rule="evenodd"%3E%3Cpath d="M19.5 2C29.165 2 37 9.835 37 19.5c0 13.933-15.267 26.984-17.5 26.984C16.982 46.484 2 33.433 2 19.5 2 9.835 9.835 2 19.5 2zm.12

skoch

Verifying my Blockstack ID is secured with the address 1HzrXKqibTwf8TzEM76fCoTAseCoxpPf4Q https://explorer.blockstack.org/address/1HzrXKqibTwf8TzEM76fCoTAseCoxpPf4Q

skoch

server {
    listen 80 default_server;
    listen [::]:80 default_server;
    server_name example.com www.example.com;
    return 301 https://$server_name$request_uri;
}

server {
    # listen 80;

skoch

# see: https://www.digitalocean.com/community/tutorials/how-to-implement-browser-caching-with-nginx-s-header-module-on-centos-7

# Expires map
map $sent_http_content_type $expires {
    default                    off;
    text/html                  epoch;
    text/css                   max;
    application/javascript     max;
    ~image/                    max;
}