{ "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 {\n  &:hover,\n  &:focus-within {\n    background-color: #eee;\n  }\n\n  a {\n    position: relative;\n    z-index: 1;\n  }\n\n  h2 {\n    a {\n      position: static;\n\n      &:hover,\n      &:focus {\n        color: blue;\n      }\n\n      &:before {\n        content: '';\n        display: block;\n        position: absolute;\n        z-index: 0;\n        width: 100%;\n        height: 100%;\n        top: 0;\n        left: 0;\n        transition: background-color 0.1s ease-out;\n        background-color: transparent;\n      }\n    }\n  }\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>\n<html lang=\"en\" data-theme=\"light\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    ...\n    <script>\n      // If there's a theme stored in localStorage, use it on the <html>\n      const localStorageTheme = localStorage.getItem('theme');\n      if (localStorageTheme) {\n        document.documentElement.setAttribute('data-theme', localStorageTheme);\n      }\n    </script>\n  </head>\n  <body>\n    <div class=\"theme-toggle\">\n      <button\n        class=\"theme-toggle-btn js-theme-toggle\"\n        aria-label=\"Activate dark mode\"\n        title=\"Activate dark mode\"\n      >\n        <!--\n        <svg class=\"light-mode\">\n          <use xlink:href=\"#sun\"></use>\n        </svg>\n        <svg class=\"dark-mode\">\n          <use xlink:href=\"#moon\"></use>\n        </svg>\n        -->\n      </button>\n    </div>\n\n    <script src=\"app.js\"></script>\n  </body>\n</html>
\n

CSS Variables

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

JavaScript

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

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": ["1354109751","1994492073","2009693873","3825832676"]}