2d:null 2e:["$","title",null,{"children":"Using React95 | Benjamin | Observable"}] 33:[] 31:{"id":"fd6cddc63ca90f31","slug":"using-react95","title":"Using React95","thumbnail":"64a97b84f80d87700dec5d6991cb82c2a2975747ef66dfbee8be8270b50e8c67","access_level":"public","create_time":"$D2020-10-15T16:33:47.691Z","update_time":"$D2020-10-23T03:37:36.075Z","view_time":null,"first_public_time":"$D2020-10-15T16:41:48.296Z","fork":false,"stars":2,"starred":false,"owner":{"type":"team","id":"8a1645a08dfd342c","login":"hastebrot","name":"Benjamin","avatar_url":"https://avatars-next.observableusercontent.com/0b9afaf0bc47ae18ca1173624214fe43ca87fad77cea4fb734a8b0e1b8cfe919","tier":"starter_2024"},"version":120,"publish_version":120,"role":null,"authored":false,"authors":[{"type":"individual","id":"ca28e2692a714a78","login":"hastebrot","name":"Benjamin","avatar_url":"https://avatars-next.observableusercontent.com/0b9afaf0bc47ae18ca1173624214fe43ca87fad77cea4fb734a8b0e1b8cfe919","tier":null}],"members":[{"type":"individual","id":"ca28e2692a714a78","login":"hastebrot","name":"Benjamin","avatar_url":"https://avatars-next.observableusercontent.com/0b9afaf0bc47ae18ca1173624214fe43ca87fad77cea4fb734a8b0e1b8cfe919","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"title":"Using React95","cells":[{"id":0,"value":"md`# Using React95\n\n- Program (full screen): https://observablehq.com/embed/@hastebrot/using-react95?cell=program\n- React95 (style guide): https://storybook.react95.io/?path=/story/tabs--default\n- Bitmap font by Lou Huang licensed under Creative Commons License ([CC BY-SA 3.0](https://creativecommons.org/licenses/by-sa/3.0/)): https://github.com/arturbien/React95/tree/v3.1.0/src/assets/fonts/src/ms-sans-serif\n---\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":64,"value":"program = React.render(htm`<${Program} />`)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":59,"value":"Program = () => {\n const { List, ListItem, Divider } = react95\n return htm`\n <${WinContainer}>\n <${List}>\n <${ListItem} size=\"sm\">View\n <${Divider} />\n <${ListItem} size=\"sm\">Paste\n <${ListItem} size=\"sm\">Paste Shortcut\n <${ListItem} size=\"sm\">Undo Copy\n <${Divider} />\n <${ListItem} size=\"sm\">Properties\n \n \n `\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":56,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"WinContainer = ({ children, theme = react95_theme, ...otherProps }) => {\n const { createGlobalStyle, ThemeProvider } = styled\n const { styleReset } = react95\n //const GlobalStyle = createGlobalStyle`\n // ${styleReset};\n //`\n return htm`\n <${WinStyleContainer} backgroundColor=${theme.backgroundColor} ...${otherProps}>\n <${ThemeProvider} theme=${theme}>\n ${children}\n \n \n `\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"WinStyleContainer = styled.div`\n ${winFontFaces};\n\n font-family: 'MS Sans Serif', sans-serif;\n background: ${props => props.backgroundColor} none repeat scroll 0% 0%;\n padding: 2rem;\n\n & {\n hr { padding: unset; }\n }\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":81,"value":"winFontFaces = styled.css`\n @font-face {\n font-family: 'MS Sans Serif';\n src: url('${react95_font_normal_url}') format('woff2');\n font-weight: normal; /* 400 */\n font-style: normal;\n }\n @font-face {\n font-family: 'MS Sans Serif';\n src: url('${react95_font_bold_url}') format('woff2');\n font-weight: bold; /* 700 */\n font-style: normal;\n }\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"import { React, ReactDOM, htm, styled } from \"@hastebrot/react@356\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"react95_version = \"3.3.0\" // https://github.com/arturbien/React95/releases","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"react95 = {\n const requires = require.alias({\n \"react95\": `https://unpkg.com/react95@${react95_version}/dist/cjs/index.js`,\n })\n const modules = {\n \"react\": React,\n \"react-dom\": ReactDOM,\n \"styled-components\": { ...styled, default: styled },\n }\n const _exports = window.exports = {}\n const _require = window.require = name => modules[name]\n return requires(\"react95\").catch(() => _exports)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"react95_theme = ({\n name: 'original',\n backgroundColor: 'teal',\n anchor: '#1034a6',\n anchorVisited: '#440381',\n borderDark: '#848584',\n borderDarkest: '#0a0a0a',\n borderLight: '#dfdfdf',\n borderLightest: '#fefefe',\n canvas: '#ffffff',\n canvasText: '#0a0a0a',\n canvasTextDisabled: '#848584',\n canvasTextDisabledShadow: '#fefefe',\n canvasTextInvert: '#fefefe',\n checkmark: '#0a0a0a',\n checkmarkDisabled: '#848584',\n flatDark: '#9e9e9e',\n flatLight: '#d8d8d8',\n focusSecondary: '#fefe03',\n headerBackground: '#060084',\n headerNotActiveBackground: '#7f787f',\n headerNotActiveText: '#c6c6c6',\n headerText: '#fefefe',\n hoverBackground: '#060084',\n material: '#c6c6c6',\n materialDark: '#9a9e9c',\n materialText: '#0a0a0a',\n materialTextDisabled: '#848584',\n materialTextDisabledShadow: '#fefefe',\n materialTextInvert: '#fefefe',\n progress: '#060084',\n tooltip: '#fefbcc',\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":99,"value":"react95_theme_2k = ({\n name: 'millenium',\n backgroundColor: '#3a6ea5',\n anchor: '#1034a6',\n anchorVisited: '#440381',\n borderDark: '#828282',\n borderDarkest: 'black',\n borderLight: '#e5e5e5',\n borderLightest: '#ffffff',\n canvas: '#ffffff',\n canvasText: 'black',\n canvasTextDisabled: '#828282',\n canvasTextDisabledShadow: '#ffffff',\n canvasTextInvert: '#ffffff',\n checkmark: 'black',\n checkmarkDisabled: '#828282',\n flatDark: '#9e9e9e',\n flatLight: '#d8d8d8',\n focusSecondary: '#fefe03',\n headerBackground: 'linear-gradient(to right, #012470, #a5c7e7)',\n headerNotActiveBackground: '#7f7f7f',\n headerNotActiveText: '#d6cfc7',\n headerText: '#ffffff',\n hoverBackground: '#00256e',\n material: '#d6cfc7',\n materialDark: '#9a9e9c',\n materialText: 'black',\n materialTextDisabled: '#828282',\n materialTextDisabledShadow: '#ffffff',\n materialTextInvert: '#ffffff',\n progress: '#00256e',\n tooltip: '#fefbcc',\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"react95_theme_original_url = `https://unpkg.com/react95@${react95_version}/dist/themes/original.js`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"react95_font_normal_url = `https://unpkg.com/react95@${react95_version}/dist/fonts/ms_sans_serif.woff2`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"react95_font_bold_url = `https://unpkg.com/react95@${react95_version}/dist/fonts/ms_sans_serif_bold.woff2`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 32:"$31:body"