{ "componentChunkName": "component---src-pages-pensieve-index-js", "path": "/pensieve/", "result": {"data":{"allMarkdownRemark":{"edges":[{"node":{"frontmatter":{"title":"Accessible Clickable Cards","description":"Clickable cards with multiple child links","slug":"/pensieve/clickable-cards","date":"2021-04-21T00:00:00.000Z","tags":["Accessibility","CSS"],"draft":false},"html":"

Codepen Demo

\n

Card layout where the card itself isn't an anchor link, but the whole card is clickable (with a :before pseudo element on the main <a>). Links inside of the card are still clickable.

\n

CSS

\n
.grid__item {\r\n  &:hover,\r\n  &:focus-within {\r\n    background-color: #eee;\r\n  }\r\n\r\n  a {\r\n    position: relative;\r\n    z-index: 1;\r\n  }\r\n\r\n  h2 {\r\n    a {\r\n      position: static;\r\n\r\n      &:hover,\r\n      &:focus {\r\n        color: blue;\r\n      }\r\n\r\n      &:before {\r\n        content: '';\r\n        display: block;\r\n        position: absolute;\r\n        z-index: 0;\r\n        width: 100%;\r\n        height: 100%;\r\n        top: 0;\r\n        left: 0;\r\n        transition: background-color 0.1s ease-out;\r\n        background-color: transparent;\r\n      }\r\n    }\r\n  }\r\n}
"}},{"node":{"frontmatter":{"title":"Dark Mode Toggle","description":"Dark mode without the flash of default theme","slug":"/pensieve/dark-mode-toggle","date":"2021-04-21T00:00:00.000Z","tags":["Theming","Dark Mode"],"draft":false},"html":"

Dark mode toggle without the flash of default theme. Important bits:

\n\n

HTML

\n
<!DOCTYPE html>\r\n<html lang=\"en\" data-theme=\"light\">\r\n  <head>\r\n    <meta charset=\"utf-8\" />\r\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\r\n    ...\r\n    <script>\r\n      // If there's a theme stored in localStorage, use it on the <html>\r\n      const localStorageTheme = localStorage.getItem('theme');\r\n      if (localStorageTheme) {\r\n        document.documentElement.setAttribute('data-theme', localStorageTheme);\r\n      }\r\n    </script>\r\n  </head>\r\n  <body>\r\n    <div class=\"theme-toggle\">\r\n      <button\r\n        class=\"theme-toggle-btn js-theme-toggle\"\r\n        aria-label=\"Activate dark mode\"\r\n        title=\"Activate dark mode\"\r\n      >\r\n        <!--\r\n        <svg class=\"light-mode\">\r\n          <use xlink:href=\"#sun\"></use>\r\n        </svg>\r\n        <svg class=\"dark-mode\">\r\n          <use xlink:href=\"#moon\"></use>\r\n        </svg>\r\n        -->\r\n      </button>\r\n    </div>\r\n\r\n    <script src=\"app.js\"></script>\r\n  </body>\r\n</html>
\n

CSS Variables

\n
:root {\r\n  --bg: #ffffff;\r\n  --text: #000000;\r\n}\r\n\r\n[data-theme='dark'] {\r\n  --bg: #000000;\r\n  --text: #ffffff;\r\n}
\n

JavaScript

\n
app.js
\n
const themeToggleBtn = document.querySelector('.js-theme-toggle');\r\n\r\nthemeToggleBtn.addEventListener('click', () => onToggleClick());\r\n\r\nconst onToggleClick = () => {\r\n  const { theme } = document.documentElement.dataset;\r\n  const themeTo = theme && theme === 'light' ? 'dark' : 'light';\r\n  const label = `Activate ${theme} mode`;\r\n\r\n  document.documentElement.setAttribute('data-theme', themeTo);\r\n  localStorage.setItem('theme', themeTo);\r\n\r\n  themeToggleBtn.setAttribute('aria-label', label);\r\n  themeToggleBtn.setAttribute('title', label);\r\n};
\n

Resources

\n"}},{"node":{"frontmatter":{"title":"Docker Compose Error","description":"docker-compose version discrepancies","slug":"/pensieve/docker-error","date":"2019-12-13","tags":["WordPress","Docker"],"draft":false},"html":"

Problem

\n

Recently while updating with Skela with webpack, I encountered a weird error where I wasn't able to run a simple script:

\n
bin/composer
\n
#!/bin/bash\r\ndocker-compose exec -w /var/www/html/wp-content/themes/skela wordpress composer \"$@\"
\n

When trying to run this script via ./bin/composer install, I got this error in my terminal:

\n
ERROR: Setting workdir for exec is not supported in API < 1.35 (1.30)
\n

The error was coming from the -w flag in the docker-compose exec command in the composer script.

\n

Solution

\n

Turns The fix was to update the version in my docker-compose.yml file to from version 3.5 to 3.6. It's strange because 3.5 isn't anywhere close to the API version 1.35 from the error message 🤷‍♀️

\n
docker-compose.yml
\n
version: '3.6'\rservices:\r\n  wordpress:\r\n    build:
"}},{"node":{"frontmatter":{"title":"WordPress Publishing Error","description":"Trying to create a simple post in WordPress","slug":"/pensieve/wordpress-publish-error","date":"2019-12-03T00:00:00.000Z","tags":["WordPress"],"draft":false},"html":"

Problem

\n

Recently while working on a WordPress project with Ups Dock, I encountered a weird error where I wasn't able to update or publish a simple post in my local WP admin.

\n

It looked something like this:

\n

\n \n \n \n \n

\n

Sometimes the error message would be slightly more helpful: Publishing failed. Error message: The response is not a valid JSON response.

\n

\n \n \n \n \n

\n

And if I popped open the console, I saw these errors:

\n

\n \n \n \n \n

\n

Solution

\n

Since the error message had to do with a JSON response, I initially thought it was a Gutenberg or ACF issue. But it turned out this was happening because I was on the https WP admin (i.e. https://project.ups.dock/wp-admin), not the unsecure WP admin (http://project.ups.dock/wp-admin).

\n

It was a CORS error!! I was trying to modify a non-https domain from a https domain. Switching to a non-https WP admin allowed me to publish posts with no problem.

"}}]}},"pageContext":{}}, "staticQueryHashes": ["1994492073","3391063840","604461682","956832748"]}