From 514136c99af6f1807f07d23640405764f1c674df Mon Sep 17 00:00:00 2001 From: William Carroll Date: Fri, 27 Mar 2020 10:52:13 +0000 Subject: Run Prettier across projects Problem: Prettier was not running when I saved Emacs buffers. Why? - prettier-js-mode needs needs node; lorri exposes node to direnv; direnv exposes node to Emacs; lorri was not working as expected. Solution: Now that I'm using nix-buffer, I can properly expose node (and other dependencies) to my Emacs buffers. Now Prettier is working. Commentary: Since prettier hadn't worked for so long, I stopped thinking about it. As such, I did not include it as a dependency in boilerplate/typescript. I added it now. I retroactively ran prettier across a few of my frontend projects to unify the code styling. I may need to run... ```shell $ cd ~/briefcase $ nix-shell $ npx prettier --list-different "**/*.{js,ts,jsx,tsx,html,css,json}" ``` ...to see which files I should have formatted. --- website/goals/package.json | 4 +- website/goals/postcss.config.js | 8 +- website/goals/src/App.tsx | 134 ++++++++++++++------------ website/goals/src/index.html | 4 +- website/goals/tailwind.config.js | 2 +- website/goals/tsconfig.json | 10 +- website/goals/yarn.lock | 5 + website/learn/static/index.html | 56 ++++++++--- website/sandbox/contentful/postcss.config.js | 8 +- website/sandbox/contentful/src/App.tsx | 11 ++- website/sandbox/contentful/src/contentful.ts | 10 +- website/sandbox/contentful/src/index.html | 4 +- website/sandbox/contentful/src/store.ts | 6 +- website/sandbox/contentful/tailwind.config.js | 2 +- website/sandbox/contentful/tsconfig.json | 10 +- website/sandbox/index.html | 2 +- 16 files changed, 158 insertions(+), 118 deletions(-) (limited to 'website') diff --git a/website/goals/package.json b/website/goals/package.json index ced454a8a315..c812e9a38ecd 100644 --- a/website/goals/package.json +++ b/website/goals/package.json @@ -4,11 +4,13 @@ "main": "index.js", "license": "MIT", "scripts": { - "dev": "npx parcel src/index.html & npx tsc --watch --noEmit" + "dev": "parcel src/index.html & npx tsc --watch --noEmit", + "prettier": "prettier --ignore-path .gitignore --write \"**/*.{js,ts,jsx,tsx,html,css.json}\"" }, "devDependencies": { "@types/node": "^13.9.3", "parcel-bundler": "^1.12.4", + "prettier": "^2.0.2", "tailwindcss": "^1.2.0", "typescript": "^3.8.3" }, diff --git a/website/goals/postcss.config.js b/website/goals/postcss.config.js index d68fa618664e..a23795075b11 100644 --- a/website/goals/postcss.config.js +++ b/website/goals/postcss.config.js @@ -1,7 +1,5 @@ -const tailwindcss = require('tailwindcss') +const tailwindcss = require("tailwindcss"); module.exports = { - plugins: [ - tailwindcss('./tailwind.config.js') - ] -} + plugins: [tailwindcss("./tailwind.config.js")], +}; diff --git a/website/goals/src/App.tsx b/website/goals/src/App.tsx index 078a75460181..53195d9af98f 100644 --- a/website/goals/src/App.tsx +++ b/website/goals/src/App.tsx @@ -1,74 +1,84 @@ -import React from "react"; +import React from "react"; function ProgressBar(props: { - done: number, - total: number, - units: string, - color: string, + done: number; + total: number; + units: string; + color: string; }) { - const { done, total, units, color } = props - const width = Math.floor(done / total * 100) - const rest = 100 - width + const { done, total, units, color } = props; + const width = Math.floor((done / total) * 100); + const rest = 100 - width; - let [fg, bg] = [`bg-${color}-600`, `bg-${color}-100`] + let [fg, bg] = [`bg-${color}-600`, `bg-${color}-100`]; - if (color === 'white') { - [fg, bg] = ['bg-gray-600', 'bg-gray-100'] + if (color === "white") { + [fg, bg] = ["bg-gray-600", "bg-gray-100"]; } return (
-
-

{done} of {total} {units}

+
+

+ {done} of {total} {units} +

- ) + ); } function Goal(props: { - subject: string, - goal: string, - done: number, - total: number, - units: string, - color: string, + subject: string; + goal: string; + done: number; + total: number; + units: string; + color: string; }) { - const { subject, goal, done, total, units, color } = props - const width = "6em" + const { subject, goal, done, total, units, color } = props; + const width = "6em"; const Tr = (props: { - label: string, - value: string, - valueComponent?: React.ReactElement, + label: string; + value: string; + valueComponent?: React.ReactElement; }) => ( - {props.label} + + {props.label} + {props.valueComponent ? props.valueComponent : props.value} - ) + ); return ( - - }/> + + } + />
- ) + ); } -function Copy(props: { - children: React.ReactNode -}) { - return ( -

- {props.children} -

- ) +function Copy(props: { children: React.ReactNode }) { + return

{props.children}

; } function App() { @@ -78,7 +88,7 @@ function App() {

Goals

For me, a goal is something that is difficult for me to complete but - easy for me to measure. I tend to add new goals as time progresses, + easy for me to measure. I tend to add new goals as time progresses, mistakenly assuming that I can support additional goals for free. To counterbalance my tendancy to casually accumulate goals, I aim to only have three goals; I will not add a new goal until I complete an @@ -90,27 +100,33 @@ function App() {
- - - + + +
- ) + ); } export default App; diff --git a/website/goals/src/index.html b/website/goals/src/index.html index 05dd7ad95e79..91752af916a4 100644 --- a/website/goals/src/index.html +++ b/website/goals/src/index.html @@ -1,8 +1,8 @@ - - + +
diff --git a/website/goals/tailwind.config.js b/website/goals/tailwind.config.js index af829e20f9cb..3da6fa0dc7b7 100644 --- a/website/goals/tailwind.config.js +++ b/website/goals/tailwind.config.js @@ -4,4 +4,4 @@ module.exports = { }, variants: {}, plugins: [], -} +}; diff --git a/website/goals/tsconfig.json b/website/goals/tsconfig.json index 013f34fdf0b1..fe07ec1da4d4 100644 --- a/website/goals/tsconfig.json +++ b/website/goals/tsconfig.json @@ -1,11 +1,7 @@ { "compilerOptions": { "target": "es5", - "lib": [ - "dom", - "dom.iterable", - "esnext" - ], + "lib": ["dom", "dom.iterable", "esnext"], "allowJs": true, "skipLibCheck": true, "esModuleInterop": true, @@ -19,7 +15,5 @@ "noEmit": true, "jsx": "react" }, - "include": [ - "src/**/*" - ] + "include": ["src/**/*"] } diff --git a/website/goals/yarn.lock b/website/goals/yarn.lock index 558b9c5cd9ca..358922838b16 100644 --- a/website/goals/yarn.lock +++ b/website/goals/yarn.lock @@ -4287,6 +4287,11 @@ prelude-ls@~1.1.2: resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.1.2.tgz#21932a549f5e52ffd9a827f570e04be62a97da54" integrity sha1-IZMqVJ9eUv/ZqCf1cOBL5iqX2lQ= +prettier@^2.0.2: + version "2.0.2" + resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.0.2.tgz#1ba8f3eb92231e769b7fcd7cb73ae1b6b74ade08" + integrity sha512-5xJQIPT8BraI7ZnaDwSbu5zLrB6vvi8hVV58yHQ+QK64qrY40dULy0HSRlQ2/2IdzeBpjhDkqdcFBnFeDEMVdg== + pretty-hrtime@^1.0.3: version "1.0.3" resolved "https://registry.yarnpkg.com/pretty-hrtime/-/pretty-hrtime-1.0.3.tgz#b7e3ea42435a4c9b2759d99e0f201eb195802ee1" diff --git a/website/learn/static/index.html b/website/learn/static/index.html index e28869ca1854..1c421a43d715 100644 --- a/website/learn/static/index.html +++ b/website/learn/static/index.html @@ -4,7 +4,10 @@ - + Learn to code @@ -42,33 +45,58 @@

Pricing

I charge £50 per hour for video lessons - and £100 per hour for in-person - sessions. I am currently based in South Kensington, London. + and £100 per hour for in-person sessions. + I am currently based in South Kensington, London.

Contact

Whether you want to sign-up or simply want to learn more, send me an - email at wpcarro@gmail.com. + email at + wpcarro@gmail.com.

Why delay? Start today.

- + diff --git a/website/sandbox/contentful/postcss.config.js b/website/sandbox/contentful/postcss.config.js index d68fa618664e..a23795075b11 100644 --- a/website/sandbox/contentful/postcss.config.js +++ b/website/sandbox/contentful/postcss.config.js @@ -1,7 +1,5 @@ -const tailwindcss = require('tailwindcss') +const tailwindcss = require("tailwindcss"); module.exports = { - plugins: [ - tailwindcss('./tailwind.config.js') - ] -} + plugins: [tailwindcss("./tailwind.config.js")], +}; diff --git a/website/sandbox/contentful/src/App.tsx b/website/sandbox/contentful/src/App.tsx index 6342bfc98dd6..288f03321804 100644 --- a/website/sandbox/contentful/src/App.tsx +++ b/website/sandbox/contentful/src/App.tsx @@ -8,7 +8,7 @@ import type { Book } from "./store"; const App: React.FC = () => { const dispatch = useDispatch(); - const { isLoading, books } = useTypedSelector(state => ({ + const { isLoading, books } = useTypedSelector((state) => ({ isLoading: state.isLoading, books: state.books, })); @@ -16,7 +16,7 @@ const App: React.FC = () => { useEffect(() => { async function fetchData() { const entries = await getClient().getEntries(); - const books = entries.items.map(x => x.fields) as Book[]; + const books = entries.items.map((x) => x.fields) as Book[]; dispatch(actions.setBooks(books)); } @@ -30,9 +30,12 @@ const App: React.FC = () => {

Books

diff --git a/website/sandbox/contentful/src/contentful.ts b/website/sandbox/contentful/src/contentful.ts index e09cd8fc4ad3..02ebc92b68df 100644 --- a/website/sandbox/contentful/src/contentful.ts +++ b/website/sandbox/contentful/src/contentful.ts @@ -8,10 +8,10 @@ let client: ContentfulClientApi; // Idempotent way to get a reference to the Contentful client. export const getClient = (): ContentfulClientApi => { - if (typeof client !== 'undefined') { + if (typeof client !== "undefined") { return client; } else { - if (typeof space === 'string' && typeof accessToken === 'string') { + if (typeof space === "string" && typeof accessToken === "string") { let client = createClient({ space, accessToken, @@ -19,7 +19,9 @@ export const getClient = (): ContentfulClientApi => { return client; } else { - throw new Error('Please set CONTENTFUL_SPACE_ID and CONTENTFUL_ACCESS_TOKEN'); + throw new Error( + "Please set CONTENTFUL_SPACE_ID and CONTENTFUL_ACCESS_TOKEN" + ); } } -} +}; diff --git a/website/sandbox/contentful/src/index.html b/website/sandbox/contentful/src/index.html index 05dd7ad95e79..91752af916a4 100644 --- a/website/sandbox/contentful/src/index.html +++ b/website/sandbox/contentful/src/index.html @@ -1,8 +1,8 @@ - - + +
diff --git a/website/sandbox/contentful/src/store.ts b/website/sandbox/contentful/src/store.ts index c4396d681a17..b02053d302b6 100644 --- a/website/sandbox/contentful/src/store.ts +++ b/website/sandbox/contentful/src/store.ts @@ -22,9 +22,9 @@ export const { actions, reducer } = createSlice({ name: "application", initialState, reducers: { - toggleIsLoading: state => ({ ...state, isLoading: !state.isLoading }), - setBooks: (state, action) => ({ ... state, books: action.payload }), - } + toggleIsLoading: (state) => ({ ...state, isLoading: !state.isLoading }), + setBooks: (state, action) => ({ ...state, books: action.payload }), + }, }); /** diff --git a/website/sandbox/contentful/tailwind.config.js b/website/sandbox/contentful/tailwind.config.js index af829e20f9cb..3da6fa0dc7b7 100644 --- a/website/sandbox/contentful/tailwind.config.js +++ b/website/sandbox/contentful/tailwind.config.js @@ -4,4 +4,4 @@ module.exports = { }, variants: {}, plugins: [], -} +}; diff --git a/website/sandbox/contentful/tsconfig.json b/website/sandbox/contentful/tsconfig.json index 013f34fdf0b1..fe07ec1da4d4 100644 --- a/website/sandbox/contentful/tsconfig.json +++ b/website/sandbox/contentful/tsconfig.json @@ -1,11 +1,7 @@ { "compilerOptions": { "target": "es5", - "lib": [ - "dom", - "dom.iterable", - "esnext" - ], + "lib": ["dom", "dom.iterable", "esnext"], "allowJs": true, "skipLibCheck": true, "esModuleInterop": true, @@ -19,7 +15,5 @@ "noEmit": true, "jsx": "react" }, - "include": [ - "src/**/*" - ] + "include": ["src/**/*"] } diff --git a/website/sandbox/index.html b/website/sandbox/index.html index b549bf443e07..ecd5475af266 100644 --- a/website/sandbox/index.html +++ b/website/sandbox/index.html @@ -1,7 +1,7 @@ - + sandbox.wpcarro.dev -- cgit 1.4.1