playroom 0.34.0 → 0.34.2

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # playroom
 
+## 0.34.2
+
+### Patch Changes
+
+- 88bd204: Fix `playroom build` by making favicon path relative to webpack config
+
+## 0.34.1
+
+### Patch Changes
+
+- e3b820b: Add favicon to Playroom site.
+- 4fb69cb: Improve affordance of error marker detail
+
 ## 0.34.0
 
 ### Minor Changes

package/lib/makeWebpackConfig.js

@@ -141,6 +141,10 @@ module.exports = async (playroomConfig, options) => {
           include: path.dirname(require.resolve('codemirror/package.json')),
           use: [MiniCssExtractPlugin.loader, require.resolve('css-loader')],
         },
+        {
+          test: /\.png$/i,
+          type: 'asset/resource',
+        },
       ],
     },
     optimization: {
@@ -163,6 +167,7 @@ module.exports = async (playroomConfig, options) => {
         chunksSortMode: 'none',
         chunks: ['index'],
         filename: 'index.html',
+        favicon: path.join(__dirname, '../images/favicon.png'),
         base: playroomConfig.baseUrl,
       }),
       new HtmlWebpackPlugin({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "playroom",
-  "version": "0.34.0",
+  "version": "0.34.2",
   "description": "Design with code, powered by your own component library",
   "main": "utils/index.js",
   "types": "utils/index.d.ts",

package/src/Playroom/CodeEditor/CodeEditor.css.ts

@@ -23,6 +23,9 @@ export const errorMarker = style([
     opacity: 0,
   }),
   {
+    ':hover': {
+      cursor: 'help',
+    },
     backgroundColor: colorPaletteVars.background.critical,
     color: colorPaletteVars.foreground.critical,
     minWidth: minimumLineNumberWidth,

package/src/index.js

@@ -2,6 +2,8 @@ import { renderElement } from './render';
 import Playroom from './Playroom/Playroom';
 import { StoreProvider } from './StoreContext/StoreContext';
 import playroomConfig from './config';
+import faviconPath from '../images/favicon.png';
+import faviconInvertedPath from '../images/favicon-inverted.png';
 
 const polyfillIntersectionObserver = () =>
   typeof window.IntersectionObserver !== 'undefined'
@@ -14,6 +16,15 @@ polyfillIntersectionObserver().then(() => {
   const outlet = document.createElement('div');
   document.body.appendChild(outlet);
 
+  const selectedElement = document.head.querySelector('link[rel="icon"]');
+  const favicon = window.matchMedia('(prefers-color-scheme: dark)').matches
+    ? faviconInvertedPath
+    : faviconPath;
+
+  if (selectedElement) {
+    selectedElement.setAttribute('href', favicon);
+  }
+
   const renderPlayroom = ({
     themes = require('./themes'),
     components = require('./components'),