diff --git a/.eslintrc.js b/.eslintrc.js
index 2e9f3fc..cd70472 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -2,29 +2,24 @@ module.exports = {
globals: {
__PATH_PREFIX__: true,
},
- 'parser': 'babel-eslint', // uses babel-eslint transforms
- 'settings': {
- 'react': {
- 'version': 'detect', // detect react version
+ parser: "babel-eslint", // uses babel-eslint transforms
+ settings: {
+ react: {
+ version: "detect", // detect react version
},
},
- 'env': {
- 'node': true, // defines things like process.env when generating through node
- 'browser': true
+ env: {
+ node: true, // defines things like process.env when generating through node
+ browser: true,
},
- 'extends': [
- 'eslint:recommended', // use recommended configs
- 'plugin:react/recommended',
- 'plugin:react-hooks/recommended',
+ extends: [
+ "eslint:recommended", // use recommended configs
+ "plugin:react/recommended",
+ "plugin:react-hooks/recommended",
],
- 'rules': {
- 'react/prop-types': 0,
- 'quotes': ['warn', 'single'],
- 'semi': 1,
- 'indent': ['warn', 2],
- 'comma-dangle': ['warn', 'always-multiline'],
- 'no-unused-vars': 1,
- 'jsx-quotes': 1,
- 'react/jsx-sort-props': 1,
+ rules: {
+ "react/prop-types": 0,
+ "no-unused-vars": 1,
+ "react/jsx-sort-props": 1,
},
};
diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
index f27c930..5ddaf2e 100644
--- a/.github/workflows/main.yml
+++ b/.github/workflows/main.yml
@@ -6,9 +6,9 @@ name: deploy
# events but only for the master branch
on:
push:
- branches: [ master ]
+ branches: [master]
pull_request:
- branches: [ master ]
+ branches: [master]
# A workflow run is made up of one or more jobs that can run sequentially or in parallel
jobs:
@@ -18,24 +18,24 @@ jobs:
runs-on: ubuntu-latest
# Steps represent a sequence of tasks that will be executed as part of the job
steps:
- # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it
- - uses: actions/checkout@v2
- - name: Set Node.js
- uses: actions/setup-node@master
- with:
- node-version: 16.x
- - name: Install dependencies
- run: yarn install --prod --pure-lockfile
- - name: Lint
- run: yarn run lint
- - name: Build
- run: yarn run build
- - name: upload
- uses: burnett01/rsync-deployments@4.1
- with:
- switches: -zr --delete --exclude node_modules --exclude '.git*'
- path: ./public/
- remote_path: www/personal-website
- remote_host: droplet.chuckdries.com
- remote_user: ${{ secrets.CI_USER }}
- remote_key: ${{ secrets.CI_SSH_KEY }}
+ # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it
+ - uses: actions/checkout@v2
+ - name: Set Node.js
+ uses: actions/setup-node@master
+ with:
+ node-version: 16.x
+ - name: Install dependencies
+ run: yarn install --prod --pure-lockfile
+ - name: Lint
+ run: yarn run lint
+ - name: Build
+ run: yarn run build
+ - name: upload
+ uses: burnett01/rsync-deployments@4.1
+ with:
+ switches: -zr --delete --exclude node_modules --exclude '.git*'
+ path: ./public/
+ remote_path: www/personal-website
+ remote_host: droplet.chuckdries.com
+ remote_user: ${{ secrets.CI_USER }}
+ remote_key: ${{ secrets.CI_SSH_KEY }}
diff --git a/.prettierignore b/.prettierignore
new file mode 100644
index 0000000..18055b9
--- /dev/null
+++ b/.prettierignore
@@ -0,0 +1,5 @@
+.cache
+node_modules
+old\ website
+public
+gatsby
\ No newline at end of file
diff --git a/.prettierrc.json b/.prettierrc.json
new file mode 100644
index 0000000..0967ef4
--- /dev/null
+++ b/.prettierrc.json
@@ -0,0 +1 @@
+{}
diff --git a/.vscode/launch.json b/.vscode/launch.json
index 3020d97..837b529 100644
--- a/.vscode/launch.json
+++ b/.vscode/launch.json
@@ -1,71 +1,68 @@
-{
- "version": "0.2.0",
- "configurations": [{
- "name": "Launch Chrome",
- "type": "chrome",
- "request": "launch",
- "url": "http://localhost:3000",
- "sourceMaps": true,
- "webRoot": "${workspaceRoot}"
- },
- {
- "name": "Launch Unix",
- "type": "node",
- "request": "launch",
- "program": "/usr/local/bin/lite-server",
- "stopOnEntry": false,
- "args": [],
- "cwd": "${workspaceRoot}",
- "preLaunchTask": null,
- "runtimeExecutable": null,
- "runtimeArgs": [
- "--nolazy"
- ],
- "env": {
- "NODE_ENV": "development"
- },
- "externalConsole": false,
- "sourceMaps": false,
- "outDir": null
- },
- {
- "name": "Launch on Windows",
- "type": "node",
- "request": "launch",
- "program": "C:\\Users\\chuckdries\\AppData\\Roaming\\npm\\node_modules\\lite-server\\index.js",
- "stopOnEntry": false,
- "args": [],
- "cwd": "${workspaceRoot}",
- "preLaunchTask": null,
- "runtimeExecutable": null,
- "runtimeArgs": [
- "--nolazy"
- ],
- "env": {
- "NODE_ENV": "development"
- },
- "console": "internalConsole",
- "sourceMaps": true,
- "outDir": null
- },
-
- {
- "name": "Attach Chrome",
- "type": "chrome",
- "request": "attach",
- "port": 9222
- },
- {
- "name": "Attach",
- "type": "node",
- "request": "attach",
- "port": 3000,
- "address": "localhost",
- "restart": false,
- "sourceMaps": false,
- "outDir": null,
- "localRoot": "${workspaceRoot}",
- "remoteRoot": null
- }
- ]
-}
\ No newline at end of file
+{
+ "version": "0.2.0",
+ "configurations": [
+ {
+ "name": "Launch Chrome",
+ "type": "chrome",
+ "request": "launch",
+ "url": "http://localhost:3000",
+ "sourceMaps": true,
+ "webRoot": "${workspaceRoot}"
+ },
+ {
+ "name": "Launch Unix",
+ "type": "node",
+ "request": "launch",
+ "program": "/usr/local/bin/lite-server",
+ "stopOnEntry": false,
+ "args": [],
+ "cwd": "${workspaceRoot}",
+ "preLaunchTask": null,
+ "runtimeExecutable": null,
+ "runtimeArgs": ["--nolazy"],
+ "env": {
+ "NODE_ENV": "development"
+ },
+ "externalConsole": false,
+ "sourceMaps": false,
+ "outDir": null
+ },
+ {
+ "name": "Launch on Windows",
+ "type": "node",
+ "request": "launch",
+ "program": "C:\\Users\\chuckdries\\AppData\\Roaming\\npm\\node_modules\\lite-server\\index.js",
+ "stopOnEntry": false,
+ "args": [],
+ "cwd": "${workspaceRoot}",
+ "preLaunchTask": null,
+ "runtimeExecutable": null,
+ "runtimeArgs": ["--nolazy"],
+ "env": {
+ "NODE_ENV": "development"
+ },
+ "console": "internalConsole",
+ "sourceMaps": true,
+ "outDir": null
+ },
+
+ {
+ "name": "Attach Chrome",
+ "type": "chrome",
+ "request": "attach",
+ "port": 9222
+ },
+ {
+ "name": "Attach",
+ "type": "node",
+ "request": "attach",
+ "port": 3000,
+ "address": "localhost",
+ "restart": false,
+ "sourceMaps": false,
+ "outDir": null,
+ "localRoot": "${workspaceRoot}",
+ "remoteRoot": null
+ }
+ ]
+}
diff --git a/.vscode/settings.json b/.vscode/settings.json
index fe71598..1cf3971 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,3 +1,3 @@
{
- "python.linting.pylintEnabled": false
-}
\ No newline at end of file
+ "python.linting.pylintEnabled": false
+}
diff --git a/.vscode/tasks.json b/.vscode/tasks.json
index 5cfa26c..7e7f519 100644
--- a/.vscode/tasks.json
+++ b/.vscode/tasks.json
@@ -1,16 +1,16 @@
-{
- // See https://go.microsoft.com/fwlink/?LinkId=733558
- // for the documentation about the tasks.json format
- "version": "2.0.0",
- "command": "gulp",
- "tasks": [
- {
- "label": "default",
- "type": "gulp",
- "task": "default",
- "isBackground": true,
- "problemMatcher": [],
- "group": "build"
- }
- ]
-}
\ No newline at end of file
+{
+ // See https://go.microsoft.com/fwlink/?LinkId=733558
+ // for the documentation about the tasks.json format
+ "version": "2.0.0",
+ "command": "gulp",
+ "tasks": [
+ {
+ "label": "default",
+ "type": "gulp",
+ "task": "default",
+ "isBackground": true,
+ "problemMatcher": [],
+ "group": "build"
+ }
+ ]
+}
diff --git a/TODO.md b/TODO.md
index 0938d47..82277b0 100644
--- a/TODO.md
+++ b/TODO.md
@@ -1,10 +1,12 @@
- Gallery
+
- [x] Custom image metadata
- [ ] add metadata to image files
- [ ] image details page (modal route?)
- [ ] gallery page
- Homepage
+
- [ ] homepage basic layout
- [ ] homepage aesthetics
- [ ] homepage to gallery page transition
@@ -14,6 +16,7 @@
- [ ] About page?
- Portfolio/Projects page
+
- basic layout
- source data
- aesthetics
@@ -21,4 +24,4 @@
- [x] tailwind (done-ish)
- [ ] typescript
- [ ] graphql codegen
-- [ ] static files (resume)
\ No newline at end of file
+- [ ] static files (resume)
diff --git a/gatsby-browser.js b/gatsby-browser.js
index 4fee747..1496df7 100644
--- a/gatsby-browser.js
+++ b/gatsby-browser.js
@@ -1,17 +1,17 @@
-import './src/styles/global.css';
-import posthog from 'posthog-js';
+import "./src/styles/global.css";
+import posthog from "posthog-js";
-const env = process.env.GATSBY_ACTIVE_ENV || process.env.NODE_ENV || 'development';
-if (env === 'production') {
- posthog.init('HR8Gte105aCHNx2BqhL1XkbvH9kzKGptxjkbhuTj6Ek', { api_host: 'https://posthog.chuckdries.com' });
+const env =
+ process.env.GATSBY_ACTIVE_ENV || process.env.NODE_ENV || "development";
+if (env === "production") {
+ posthog.init("HR8Gte105aCHNx2BqhL1XkbvH9kzKGptxjkbhuTj6Ek", {
+ api_host: "https://posthog.chuckdries.com",
+ });
}
export const onRouteUpdate = function () {
- if (
- env === 'production' &&
- typeof window.plausible === 'object'
- ) {
- window.plausible('pageview');
- posthog.capture('$pageview');
+ if (env === "production" && typeof window.plausible === "object") {
+ window.plausible("pageview");
+ posthog.capture("$pageview");
}
};
// import * as React from 'react';
diff --git a/gatsby-config.js b/gatsby-config.js
index 70fd045..9f16039 100644
--- a/gatsby-config.js
+++ b/gatsby-config.js
@@ -1,56 +1,56 @@
module.exports = {
siteMetadata: {
- title: 'Chuck Dries',
- siteUrl: 'https://chuckdries.com',
+ title: "Chuck Dries",
+ siteUrl: "https://chuckdries.com",
},
plugins: [
- 'gatsby-plugin-sass',
- 'gatsby-plugin-image',
- 'gatsby-plugin-react-helmet',
+ "gatsby-plugin-sass",
+ "gatsby-plugin-image",
+ "gatsby-plugin-react-helmet",
{
- resolve: 'gatsby-plugin-manifest',
+ resolve: "gatsby-plugin-manifest",
options: {
- icon: 'src/images/glasses-outline.svg',
+ icon: "src/images/glasses-outline.svg",
},
},
- 'gatsby-plugin-mdx',
- 'gatsby-plugin-sharp',
- 'gatsby-transformer-sharp',
- 'gatsby-plugin-postcss',
+ "gatsby-plugin-mdx",
+ "gatsby-plugin-sharp",
+ "gatsby-transformer-sharp",
+ "gatsby-plugin-postcss",
{
- resolve: 'gatsby-source-filesystem',
+ resolve: "gatsby-source-filesystem",
options: {
- name: 'images',
- path: './src/images/',
+ name: "images",
+ path: "./src/images/",
},
- __key: 'images',
+ __key: "images",
},
{
- resolve: 'gatsby-source-filesystem',
+ resolve: "gatsby-source-filesystem",
options: {
- name: 'gallery',
- path: './data/gallery/',
+ name: "gallery",
+ path: "./data/gallery/",
},
- __key: 'gallery',
+ __key: "gallery",
},
{
- resolve: 'gatsby-source-filesystem',
+ resolve: "gatsby-source-filesystem",
options: {
- name: 'pages',
- path: './src/pages/',
+ name: "pages",
+ path: "./src/pages/",
},
- __key: 'pages',
+ __key: "pages",
},
{
- resolve: 'gatsby-plugin-eslint',
+ resolve: "gatsby-plugin-eslint",
options: {
- stages: ['develop'],
- extensions: ['js', 'jsx'],
- exclude: ['node_modules', '.cache', 'public'],
+ stages: ["develop"],
+ extensions: ["js", "jsx"],
+ exclude: ["node_modules", ".cache", "public"],
// Any eslint-webpack-plugin options below
},
},
- 'gatsby-plugin-preval',
- 'gatsby-plugin-robots-txt',
+ "gatsby-plugin-preval",
+ "gatsby-plugin-robots-txt",
],
};
diff --git a/gatsby-node.js b/gatsby-node.js
index 37926c7..c05253d 100644
--- a/gatsby-node.js
+++ b/gatsby-node.js
@@ -1,12 +1,12 @@
-const fs = require('fs');
-const util = require('util');
-const path = require('path');
-const { read } = require('fast-exif');
-const iptc = require('node-iptc');
-const Vibrant = require('node-vibrant');
-const chroma = require('chroma-js');
-const chalk = require('chalk');
-const R = require('ramda');
+const fs = require("fs");
+const util = require("util");
+const path = require("path");
+const { read } = require("fast-exif");
+const iptc = require("node-iptc");
+const Vibrant = require("node-vibrant");
+const chroma = require("chroma-js");
+const chalk = require("chalk");
+const R = require("ramda");
const readFile = util.promisify(fs.readFile);
@@ -15,9 +15,11 @@ const badContrast = (color1, color2) => chroma.contrast(color1, color2) < 4.5;
const logColorsWithContrast = (color1, color2, text) => {
const c1hex = color1.hex();
const c2hex = color2.hex();
- console.log(chalk.hex(c1hex).bgHex(c2hex)(
- `${text} ${c1hex}/${c2hex} ${chroma.contrast(color1, color2)}`
- ));
+ console.log(
+ chalk.hex(c1hex).bgHex(c2hex)(
+ `${text} ${c1hex}/${c2hex} ${chroma.contrast(color1, color2)}`
+ )
+ );
};
function processColors(vibrantData, imagePath) {
@@ -29,7 +31,10 @@ function processColors(vibrantData, imagePath) {
let LightMuted = chroma(vibrantData.LightMuted.getRgb());
// first pass - darken bg and lighten relevant fg colors
- if (badContrast(DarkVibrant, Vibrant) || badContrast(DarkVibrant, LightMuted)) {
+ if (
+ badContrast(DarkVibrant, Vibrant) ||
+ badContrast(DarkVibrant, LightMuted)
+ ) {
DarkVibrant = DarkVibrant.darken();
if (badContrast(DarkVibrant, Vibrant)) {
Vibrant = Vibrant.brighten();
@@ -39,7 +44,10 @@ function processColors(vibrantData, imagePath) {
}
}
// second pass - first doesn't always do enough
- if (badContrast(DarkVibrant, Vibrant) || badContrast(DarkVibrant, LightMuted)) {
+ if (
+ badContrast(DarkVibrant, Vibrant) ||
+ badContrast(DarkVibrant, LightMuted)
+ ) {
// DarkVibrant = DarkVibrant.darken();
if (badContrast(DarkVibrant, Vibrant)) {
Vibrant = Vibrant.brighten(2);
@@ -49,16 +57,15 @@ function processColors(vibrantData, imagePath) {
}
}
- if (badContrast(DarkVibrant, Vibrant)){
- console.warn('contrast still too low', imagePath);
- logColorsWithContrast(Vibrant, DarkVibrant, 'V-DV');
+ if (badContrast(DarkVibrant, Vibrant)) {
+ console.warn("contrast still too low", imagePath);
+ logColorsWithContrast(Vibrant, DarkVibrant, "V-DV");
}
- if (badContrast(DarkVibrant, LightMuted)){
- console.warn('contrast still too low', imagePath);
- logColorsWithContrast(LightMuted, DarkVibrant, 'LM-DV');
+ if (badContrast(DarkVibrant, LightMuted)) {
+ console.warn("contrast still too low", imagePath);
+ logColorsWithContrast(LightMuted, DarkVibrant, "LM-DV");
}
-
return {
Vibrant: Vibrant.rgb(),
DarkVibrant: DarkVibrant.rgb(),
@@ -82,25 +89,20 @@ function transformMetaToNodeData(exifData, iptcData, vibrantData, imagePath) {
const gps = { longitude: null, latitude: null };
if (exifData) {
- if (
- exifData.gps &&
- exifData.gps.GPSLongitude &&
- exifData.gps.GPSLatitude
- ) {
+ if (exifData.gps && exifData.gps.GPSLongitude && exifData.gps.GPSLatitude) {
gps.longitude = convertDMSToDD(
exifData.gps.GPSLongitude,
- exifData.gps.GPSLongitudeRef === 'E'
+ exifData.gps.GPSLongitudeRef === "E"
);
gps.latitude = convertDMSToDD(
exifData.gps.GPSLatitude,
- exifData.gps.GPSLatitudeRef === 'N'
+ exifData.gps.GPSLatitudeRef === "N"
);
}
}
const vibrant = vibrantData ? processColors(vibrantData, imagePath) : null;
-
return {
exif: exifData?.exif,
gps,
@@ -110,10 +112,9 @@ function transformMetaToNodeData(exifData, iptcData, vibrantData, imagePath) {
};
}
-
exports.onCreateNode = async function ({ node, actions }) {
const { createNodeField } = actions;
- if (node.internal.type === 'File' && node.sourceInstanceName === 'gallery') {
+ if (node.internal.type === "File" && node.sourceInstanceName === "gallery") {
const file = await readFile(node.absolutePath);
const iptcData = iptc(file);
const exifData = await read(node.absolutePath);
@@ -123,8 +124,13 @@ exports.onCreateNode = async function ({ node, actions }) {
createNodeField({
node,
- name: 'imageMeta',
- value: transformMetaToNodeData(exifData, iptcData, vibrantData, node.absolutePath),
+ name: "imageMeta",
+ value: transformMetaToNodeData(
+ exifData,
+ iptcData,
+ vibrantData,
+ node.absolutePath
+ ),
});
}
};
@@ -135,45 +141,46 @@ exports.createPages = async ({ graphql, actions, reporter }) => {
const { createPage } = actions;
// get all images
const galleryImages = await graphql(`
- {
- allFile(filter: {
- sourceInstanceName: { eq: "gallery" }}
- ) {
- edges {
- node {
- relativePath,
- base,
- fields {
- imageMeta {
- dateTaken
- }
+ {
+ allFile(filter: { sourceInstanceName: { eq: "gallery" } }) {
+ edges {
+ node {
+ relativePath
+ base
+ fields {
+ imageMeta {
+ dateTaken
}
}
}
}
}
- `);
+ }
+ `);
// Handle errors
if (galleryImages.errors) {
- reporter.panicOnBuild('Error while running GraphQL query.');
+ reporter.panicOnBuild("Error while running GraphQL query.");
return;
}
// Create pages for each markdown file.
- const galleryImageTemplate = path.resolve('src/components/GalleryImage/GalleryImage.js');
- // const diffDate = (a, b) =>
+ const galleryImageTemplate = path.resolve(
+ "src/components/GalleryImage/GalleryImage.js"
+ );
+ // const diffDate = (a, b) =>
// new Date(R.path(['node', 'childImageSharp', 'fields', 'imageMeta', 'dateTaken'], a)).getTime() - new Date(R.path(['node', 'childImageSharp', 'fields', 'imageMeta', 'dateTaken'],b)).getTime();
-
- const edges = R.sort(R.descend((edge) =>
- new Date(R.path(['node', 'fields', 'imageMeta', 'dateTaken'], edge))),
- galleryImages.data.allFile.edges);
+
+ const edges = R.sort(
+ R.descend(
+ (edge) =>
+ new Date(R.path(["node", "fields", "imageMeta", "dateTaken"], edge))
+ ),
+ galleryImages.data.allFile.edges
+ );
edges.forEach(({ node }, index) => {
- const nextImage = index === edges.length - 1
- ? null
- : edges[index + 1].node.base;
- const prevImage = index === 0
- ? null
- : edges[index - 1].node.base;
+ const nextImage =
+ index === edges.length - 1 ? null : edges[index + 1].node.base;
+ const prevImage = index === 0 ? null : edges[index - 1].node.base;
const page = {
path: `photogallery/${node.base}`,
component: galleryImageTemplate,
diff --git a/gatsby-ssr.js b/gatsby-ssr.js
index 387e300..aa2bdc3 100644
--- a/gatsby-ssr.js
+++ b/gatsby-ssr.js
@@ -1 +1 @@
-import './src/styles/global.css';
\ No newline at end of file
+import "./src/styles/global.css";
diff --git a/package.json b/package.json
index e7d9a6c..7d63a95 100644
--- a/package.json
+++ b/package.json
@@ -17,7 +17,8 @@
"lint": "eslint --ext .jsx,.js src",
"upload": "rsync -rz --delete public/ ci@droplet.chuckdries.com:www/personal-website",
"upload-staging": "rsync -rz --delete public/ ci@droplet.chuckdries.com:www/personal-website-staging",
- "deploy": "yarn build && yarn upload"
+ "deploy": "yarn build && yarn upload",
+ "pretty": "prettier --write ."
},
"dependencies": {
"@mdx-js/mdx": "^1.6.22",
@@ -64,5 +65,7 @@
"tailwindcss": "^2.1.2",
"use-breakpoint": "^2.0.1"
},
- "devDependencies": {}
+ "devDependencies": {
+ "prettier": "2.3.2"
+ }
}
diff --git a/postcss.config.js b/postcss.config.js
index 996d458..8665375 100644
--- a/postcss.config.js
+++ b/postcss.config.js
@@ -1,7 +1,7 @@
module.exports = {
plugins: {
tailwindcss: {},
- 'postcss-nested': {},
+ "postcss-nested": {},
autoprefixer: {},
},
};
diff --git a/src/breakpoints.js b/src/breakpoints.js
index 4ff08b7..97aca46 100644
--- a/src/breakpoints.js
+++ b/src/breakpoints.js
@@ -1,4 +1,4 @@
-import preval from 'babel-plugin-preval/macro';
+import preval from "babel-plugin-preval/macro";
const themeBreakpoints = preval`
const R = require('ramda')
const resolveConfig = require('tailwindcss/resolveConfig');
@@ -7,4 +7,4 @@ const {theme} = resolveConfig(tailwindConfig);
module.exports = R.map(size => parseInt(size, 10), theme.screens);
`;
-export default themeBreakpoints;
\ No newline at end of file
+export default themeBreakpoints;
diff --git a/src/components/GalleryImage/GalleryImage.js b/src/components/GalleryImage/GalleryImage.js
index 7594e5d..785fa69 100644
--- a/src/components/GalleryImage/GalleryImage.js
+++ b/src/components/GalleryImage/GalleryImage.js
@@ -1,5 +1,5 @@
-import React from 'react';
-import { graphql, navigate, Link } from 'gatsby';
+import React from "react";
+import { graphql, navigate, Link } from "gatsby";
import {
getAspectRatio,
getMeta,
@@ -8,19 +8,21 @@ import {
getVibrant,
getVibrantToHelmetSafeBodyStyle,
hasName,
-} from '../../utils';
-import { GatsbyImage, getImage } from 'gatsby-plugin-image';
-import { Helmet } from 'react-helmet';
-import classnames from 'classnames';
-import posthog from 'posthog-js';
-import MetadataItem from './MetadataItem';
+} from "../../utils";
+import { GatsbyImage, getImage } from "gatsby-plugin-image";
+import { Helmet } from "react-helmet";
+import classnames from "classnames";
+import posthog from "posthog-js";
+import MetadataItem from "./MetadataItem";
const logKeyShortcut = (keyCode) => {
try {
// eslint-disable-next-line
- posthog.capture('[key shortcut]', { keyCode });
- window.plausible('KeyShortcut', {props: { keyCode }});
- } catch (e) {/* do nothing */}
+ posthog.capture("[key shortcut]", { keyCode });
+ window.plausible("KeyShortcut", { props: { keyCode } });
+ } catch (e) {
+ /* do nothing */
+ }
};
const GalleryImage = ({ data, pageContext }) => {
@@ -29,32 +31,31 @@ const GalleryImage = ({ data, pageContext }) => {
React.useEffect(() => {
const keyListener = (e) => {
-
switch (e.code) {
- case 'ArrowRight': {
- logKeyShortcut(e.code);
- if (pageContext.nextImage) {
- navigate(`/photogallery/${pageContext.nextImage}/`);
+ case "ArrowRight": {
+ logKeyShortcut(e.code);
+ if (pageContext.nextImage) {
+ navigate(`/photogallery/${pageContext.nextImage}/`);
+ }
+ return;
}
- return;
- }
- case 'ArrowLeft': {
- logKeyShortcut(e.code);
- if (pageContext.prevImage) {
- navigate(`/photogallery/${pageContext.prevImage}/`);
+ case "ArrowLeft": {
+ logKeyShortcut(e.code);
+ if (pageContext.prevImage) {
+ navigate(`/photogallery/${pageContext.prevImage}/`);
+ }
+ return;
+ }
+ case "Escape":
+ case "KeyG": {
+ logKeyShortcut(e.code);
+ navigate("/photogallery/");
}
- return;
- }
- case 'Escape':
- case 'KeyG': {
- logKeyShortcut(e.code);
- navigate('/photogallery/');
- }
}
};
- document.addEventListener('keydown', keyListener);
+ document.addEventListener("keydown", keyListener);
return () => {
- document.removeEventListener('keydown', keyListener);
+ document.removeEventListener("keydown", keyListener);
};
}, [pageContext]);
@@ -62,128 +63,193 @@ const GalleryImage = ({ data, pageContext }) => {
const meta = getMeta(image);
let locationString;
if (meta.iptc.city || meta.iptc.province_or_state) {
- const location = [meta.iptc.city, meta.iptc.province_or_state].filter(Boolean);
- locationString = location.join(', ');
+ const location = [meta.iptc.city, meta.iptc.province_or_state].filter(
+ Boolean
+ );
+ locationString = location.join(", ");
}
const vibrant = getVibrant(image, true);
- const orientationClasses = ar > 1 ? 'flex-col mx-auto' : 'portrait:mx-auto landscape:mx-5 landscape:flex-row-reverse portrait:flex-col';
- const shutterSpeed = React.useMemo(() => getShutterFractionFromExposureTime(meta.exif.ExposureTime || 0), [meta]);
+ const orientationClasses =
+ ar > 1
+ ? "flex-col mx-auto"
+ : "portrait:mx-auto landscape:mx-5 landscape:flex-row-reverse portrait:flex-col";
+ const shutterSpeed = React.useMemo(
+ () => getShutterFractionFromExposureTime(meta.exif.ExposureTime || 0),
+ [meta]
+ );
const dateTaken = React.useMemo(() => new Date(meta.dateTaken), [meta]);
- return (<>
-
{image.base}
- {hasName(image) &&{meta.iptc.caption}
+ return ( + <> ++ {image.base} +
+ {hasName(image) && ( +{meta.iptc.caption}
+
- Sorry{' '}
+ Sorry{" "}
😔
- {' '}
+ {" "}
we couldn’t find what you were looking for.
- {process.env.NODE_ENV === 'development' ? (
+ {process.env.NODE_ENV === "development" ? (
<>
Try creating a page in src/pages/
.
diff --git a/src/pages/asdf-resume.mdx b/src/pages/asdf-resume.mdx
index 34607a8..996738a 100644
--- a/src/pages/asdf-resume.mdx
+++ b/src/pages/asdf-resume.mdx
@@ -2,8 +2,8 @@
title: Charles Dries Resume
---
-import ResumeLayout from '../components/resume/ResumeLayout'
-export default ResumeLayout
+import ResumeLayout from "../components/resume/ResumeLayout";
+export default ResumeLayout;
# Hello, World!
diff --git a/src/pages/index.js b/src/pages/index.js
index de031a8..4b487ff 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -175,7 +175,7 @@ const IndexPage = ({
title="view image details"
to={`/photogallery/${image.base}/`}
>
-
- This paragraph is editable, as is the style tag below. Edit it to see the layout change in real time. + This paragraph is editable, as is the style tag below. Edit it to see the + layout change in real time.
- + - - + + - - + diff --git a/static/learn.html b/static/learn.html index 028cd7a..4b308b9 100644 --- a/static/learn.html +++ b/static/learn.html @@ -1,19 +1,16 @@ - - - - - -Document - - - - - a tags are for links -p tags are for paragraphs
-h1 through h6 are for headers
--
divs are just boxes- - - - \ No newline at end of file + + + + +Document + + + + + a tags are for links +p tags are for paragraphs
+h1 through h6 are for headers
++
divs are just boxes+ + diff --git a/static/roboticchuck.html b/static/roboticchuck.html index 53ae0ef..1e2c063 100644 --- a/static/roboticchuck.html +++ b/static/roboticchuck.html @@ -1,77 +1,101 @@ - - - - - + + + +Robotic Chuck - + body { + margin: auto; + max-width: 800px; + line-height: 1.5; + } - + code, + #output { + padding: 5px; + background: #eee; + border: 1px solid #ccc; + border-radius: 3px; + display: inline-block; + } + + p { + max-width: 800px; + } + + input, + textarea { + width: 100%; + padding: 5px; + /*max-width: 800px;*/ + } + + #genbutton { + color: white; + background: #01c106; + padding: 1em; + border: 1px solid #1e7931; + font-size: 1em; + border-radius: 3px; + } + + + + -Title of box:
+Title of box:
+Description text:
- +Enter the links to generate according to this format:
-[ { @@ -87,20 +111,37 @@ "url": "yet-another-url" } ]
This format is known as JSON, it's an internet standard that's supposed to be easy for humans and computers to read. - Note how commas are used to separate multiple items but are never used after the last item in a set. This is important, - it will not work if you include a trailing comma where there should not be one.
- - ++ This format is known as JSON, it's an internet standard that's supposed to + be easy for humans and computers to read. Note how commas are used to + separate multiple items but are never used after the last item in a set. + This is important, it will not work if you include a trailing comma where + there should not be one. +
+ ++ Generate Code +
Paste the following code into a safeembed
-Don't forget: For each page you embed on, add the following bit of code just before the
+</h4>
at the end of the line on the line that corresponds to the current page.+ Don't forget: For each page you embed on, add the following bit + of code just before the
</h4>
at the end of the line on + the line that corresponds to the current page. +- -<span class="here">(You are here)</span>
The code generated will look roughly like this:
- -Gryphon overrides certain styles by default, so make sure to test on your article.
- - - \ No newline at end of file +The code generated will look roughly like this:
+ ++ Gryphon overrides certain styles by default, so make sure to test on your + article. +
+ + diff --git a/tailwind.config.js b/tailwind.config.js index 10bcf23..d33f474 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -1,34 +1,34 @@ -const defaultTheme = require('tailwindcss/defaultTheme'); +const defaultTheme = require("tailwindcss/defaultTheme"); module.exports = { - purge: ['./src/**/*.{js,jsx,ts,tsx}'], + purge: ["./src/**/*.{js,jsx,ts,tsx}"], // darkMode: 'media', // or 'media' or 'class' theme: { screens: { - 'sm': '640px', - 'md': '768px', - 'lg': '1024px', - 'xl': '1280px', - '2xl': '1536px', - 'portrait': {'raw': '(orientation: portrait)'}, - 'landscape': {'raw': '(orientation: landscape)'}, + sm: "640px", + md: "768px", + lg: "1024px", + xl: "1280px", + "2xl": "1536px", + portrait: { raw: "(orientation: portrait)" }, + landscape: { raw: "(orientation: landscape)" }, }, spacing: { - '0': '0px', - '1': '4px', - '2': '8px', - '3': '12px', - '4': '16px', - '5': '24px', - '6': '32px', - '7': '48px', - '8': '80px', - '9': '800px', + 0: "0px", + 1: "4px", + 2: "8px", + 3: "12px", + 4: "16px", + 5: "24px", + 6: "32px", + 7: "48px", + 8: "80px", + 9: "800px", }, fontFamily: { ...defaultTheme.fontFamily, // serif: ['Didot', 'Didot LT', 'STD', 'Hoefler Text' , 'Garamond', 'Times New Roman', 'serif'] - serif: ['Playfair Display', 'serif'], + serif: ["Playfair Display", "serif"], }, extend: { dropShadow: { @@ -43,7 +43,7 @@ module.exports = { if (opacityVariable !== undefined) { return `rgba(var(--vibrant), var(${opacityVariable}, 1))`; } - return 'rgb(var(--vibrant))'; + return "rgb(var(--vibrant))"; }, light: ({ opacityVariable, opacityValue }) => { if (opacityValue !== undefined) { @@ -52,7 +52,7 @@ module.exports = { if (opacityVariable !== undefined) { return `rgba(var(--light-vibrant), var(${opacityVariable}, 1))`; } - return 'rgb(var(--light-vibrant))'; + return "rgb(var(--light-vibrant))"; }, dark: ({ opacityVariable, opacityValue }) => { if (opacityValue !== undefined) { @@ -61,7 +61,7 @@ module.exports = { if (opacityVariable !== undefined) { return `rgba(var(--dark-vibrant), var(${opacityVariable}, 1))`; } - return 'rgb(var(--dark-vibrant))'; + return "rgb(var(--dark-vibrant))"; }, }, muted: { @@ -72,7 +72,7 @@ module.exports = { if (opacityVariable !== undefined) { return `rgba(var(--muted), var(${opacityVariable}, 1))`; } - return 'rgb(var(--muted))'; + return "rgb(var(--muted))"; }, light: ({ opacityVariable, opacityValue }) => { if (opacityValue !== undefined) { @@ -81,7 +81,7 @@ module.exports = { if (opacityVariable !== undefined) { return `rgba(var(--light-muted), var(${opacityVariable}, 1))`; } - return 'rgb(var(--light-muted))'; + return "rgb(var(--light-muted))"; }, dark: ({ opacityVariable, opacityValue }) => { if (opacityValue !== undefined) { @@ -90,7 +90,7 @@ module.exports = { if (opacityVariable !== undefined) { return `rgba(var(--dark-muted), var(${opacityVariable}, 1))`; } - return 'rgb(var(--dark-muted))'; + return "rgb(var(--dark-muted))"; }, }, }, diff --git a/yarn.lock b/yarn.lock index 68bad93..bcaaa47 100644 --- a/yarn.lock +++ b/yarn.lock @@ -11144,7 +11144,7 @@ prepend-http@^2.0.0: resolved "https://registry.yarnpkg.com/prepend-http/-/prepend-http-2.0.0.tgz#e92434bfa5ea8c19f41cdfd401d741a3c819d897" integrity sha1-6SQ0v6XqjBn0HN/UAddBo8gZ2Jc= -prettier@^2.0.5: +prettier@2.3.2, prettier@^2.0.5: version "2.3.2" resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.3.2.tgz#ef280a05ec253712e486233db5c6f23441e7342d" integrity sha512-lnJzDfJ66zkMy58OL5/NY5zp70S7Nz6KqcKkXYzn2tMVrNxvbqaBpg7H3qHaLxCJ5lNMsGuM8+ohS7cZrthdLQ==