├── .babelrc ├── .editorconfig ├── .env.example ├── .eslintignore ├── .eslintrc ├── .gitignore ├── _redirects ├── package-lock.json ├── package.json ├── postcss.config.js ├── src ├── .DS_Store ├── browserconfig.xml ├── favicon │ ├── android-icon-144x144.png │ ├── android-icon-192x192.png │ ├── android-icon-36x36.png │ ├── android-icon-48x48.png │ ├── android-icon-72x72.png │ ├── android-icon-96x96.png │ ├── apple-icon-114x114.png │ ├── apple-icon-120x120.png │ ├── apple-icon-144x144.png │ ├── apple-icon-152x152.png │ ├── apple-icon-180x180.png │ ├── apple-icon-57x57.png │ ├── apple-icon-60x60.png │ ├── apple-icon-72x72.png │ ├── apple-icon-76x76.png │ ├── apple-icon-precomposed.png │ ├── apple-icon.png │ ├── browserconfig.xml │ ├── favicon-16x16.png │ ├── favicon-32x32.png │ ├── favicon-96x96.png │ ├── favicon.ico │ ├── favicon.png │ ├── manifest.json │ ├── ms-icon-144x144.png │ ├── ms-icon-150x150.png │ ├── ms-icon-310x310.png │ ├── ms-icon-70x70.png │ └── og.png ├── fonts │ └── montserrat │ │ ├── montserrat-v10-latin-700.woff │ │ ├── montserrat-v10-latin-700.woff2 │ │ ├── montserrat-v10-latin-italic.woff │ │ ├── montserrat-v10-latin-italic.woff2 │ │ ├── montserrat-v10-latin-regular.woff │ │ └── montserrat-v10-latin-regular.woff2 ├── images │ ├── .DS_Store │ ├── Schematics.sketch │ ├── audio-node.svg │ ├── audio-prop.svg │ ├── compose.jpg │ ├── conf.jpg │ ├── create.jpg │ ├── delay.svg │ ├── devtools.png │ ├── distortion.svg │ ├── effects.jpg │ ├── envelope-schema-custom.png │ ├── envelope-schema-custom.svg │ ├── envelope-schema-exponential.png │ ├── envelope-schema-exponential.svg │ ├── envelope-schema.png │ ├── envelope-schema.svg │ ├── envelope.png │ ├── envelope.svg │ ├── flanger.svg │ ├── graphics.sketch │ ├── guitar.jpg │ ├── mic.png │ ├── mic.svg │ ├── midi-contoller.jpg │ ├── osc-gain-prop.svg │ ├── osc-gain.svg │ ├── pedalboard.jpg │ ├── play.jpg │ ├── remote.png │ ├── reverb.svg │ ├── sam.jpg │ ├── sam2.jpg │ ├── sawtooth.png │ ├── sawtooth.svg │ ├── sine.png │ ├── sine.svg │ ├── square.png │ ├── square.svg │ ├── triangle.png │ ├── triangle.svg │ ├── twitter.png │ ├── twitter.svg │ └── volume.svg ├── index.html ├── js │ ├── components │ │ ├── Code │ │ │ ├── Code.js │ │ │ ├── code.scss │ │ │ ├── index.js │ │ │ └── prism.css │ │ ├── Columns │ │ │ ├── Columns.js │ │ │ ├── columns.scss │ │ │ └── index.js │ │ ├── Deck │ │ │ ├── Deck.js │ │ │ └── index.js │ │ ├── Icon │ │ │ ├── Icon.js │ │ │ └── index.js │ │ ├── Image │ │ │ ├── Image.js │ │ │ ├── image.scss │ │ │ └── index.js │ │ ├── List │ │ │ ├── List.js │ │ │ ├── index.js │ │ │ └── list.scss │ │ ├── Slide │ │ │ ├── Slide.js │ │ │ ├── index.js │ │ │ └── slide.scss │ │ ├── Sound │ │ │ ├── Sound.js │ │ │ ├── index.js │ │ │ └── sound.scss │ │ ├── Subtitle │ │ │ ├── Subtitle.js │ │ │ ├── index.js │ │ │ └── subtitle.scss │ │ ├── Text │ │ │ ├── Text.js │ │ │ ├── index.js │ │ │ └── text.scss │ │ ├── Title │ │ │ ├── Title.js │ │ │ ├── index.js │ │ │ └── title.scss │ │ ├── Twitter │ │ │ ├── Twitter.js │ │ │ ├── index.js │ │ │ └── twitter.scss │ │ ├── Volume │ │ │ ├── Volume.js │ │ │ ├── index.js │ │ │ └── volume.scss │ │ └── Wave │ │ │ ├── Wave.js │ │ │ ├── index.js │ │ │ └── wave.scss │ ├── index.js │ ├── services │ │ ├── Composer.js │ │ └── Keyboard.js │ └── slides │ │ ├── About │ │ ├── About.js │ │ └── index.js │ │ ├── Compose │ │ ├── Code │ │ │ ├── Code.js │ │ │ └── index.js │ │ ├── Intro │ │ │ ├── Intro.js │ │ │ └── index.js │ │ ├── Musicfns │ │ │ ├── Fns.js │ │ │ ├── Fns2.js │ │ │ └── index.js │ │ ├── Random │ │ │ ├── Random.js │ │ │ └── index.js │ │ ├── Scale │ │ │ ├── Scale.js │ │ │ └── index.js │ │ └── Simple │ │ │ ├── Simple.js │ │ │ └── index.js │ │ ├── Create │ │ ├── Envelopes │ │ │ ├── Envelopes.js │ │ │ └── index.js │ │ ├── EnvelopesCode │ │ │ ├── EnvelopesCode.js │ │ │ └── index.js │ │ ├── EnvelopesCodeExponential │ │ │ ├── EnvelopesCodeExponential.js │ │ │ └── index.js │ │ ├── EnvelopesCodeFrequency │ │ │ ├── EnvelopesCodeFrequency.js │ │ │ └── index.js │ │ ├── EnvelopesCodeRelease │ │ │ ├── EnvelopesCodeRelease.js │ │ │ └── index.js │ │ ├── EnvelopesExponential │ │ │ ├── EnvelopesExponential.js │ │ │ └── index.js │ │ ├── EnvelopesFrequency │ │ │ ├── EnvelopesFrequency.js │ │ │ └── index.js │ │ ├── EnvelopesSchema │ │ │ ├── EnvelopesSchema.js │ │ │ └── index.js │ │ ├── EnvelopesSchemaExponential │ │ │ ├── EnvelopesSchemaExponential.js │ │ │ └── index.js │ │ ├── Frequency │ │ │ ├── Frequency.js │ │ │ └── index.js │ │ ├── Intro │ │ │ ├── Intro.js │ │ │ └── index.js │ │ ├── Nodes │ │ │ ├── Nodes.js │ │ │ └── index.js │ │ ├── NodesDetail │ │ │ ├── Nodes.js │ │ │ └── index.js │ │ ├── NodesIntro │ │ │ ├── NodesIntro.js │ │ │ └── index.js │ │ ├── NodesProps │ │ │ ├── Nodes.js │ │ │ └── index.js │ │ ├── NodesPropsDetail │ │ │ ├── Nodes.js │ │ │ └── index.js │ │ ├── Oscillator │ │ │ ├── Oscillator.js │ │ │ └── index.js │ │ ├── OscillatorCode │ │ │ ├── OscillatorCode.js │ │ │ └── index.js │ │ ├── OscillatorTypes │ │ │ ├── OscillatorTypes.js │ │ │ └── index.js │ │ ├── OscillatorTypesCode │ │ │ ├── OscillatorTypesCode.js │ │ │ └── index.js │ │ ├── Sawtooth │ │ │ ├── Sawtooth.js │ │ │ └── index.js │ │ ├── Sine │ │ │ ├── Sine.js │ │ │ └── index.js │ │ ├── Square │ │ │ ├── Square.js │ │ │ └── index.js │ │ ├── Synth │ │ │ ├── Atom.js │ │ │ ├── Synth.js │ │ │ └── index.js │ │ └── Triangle │ │ │ ├── Triangle.js │ │ │ └── index.js │ │ ├── Devtools │ │ ├── DevTools.js │ │ └── index.js │ │ ├── DevtoolsImage │ │ ├── DevtoolsImage.js │ │ └── index.js │ │ ├── Effects │ │ ├── AudioEffects │ │ │ ├── AudioEffects.js │ │ │ └── index.js │ │ ├── AudioEffectsCode │ │ │ ├── AudioEffectsCode.js │ │ │ └── index.js │ │ ├── DelayCode │ │ │ ├── DelayCode.js │ │ │ └── index.js │ │ ├── DelayPreview │ │ │ ├── DelayPreview.js │ │ │ └── index.js │ │ ├── DelaySchema │ │ │ ├── DelaySchema.js │ │ │ └── index.js │ │ ├── Distortion │ │ │ ├── Distortion.js │ │ │ └── index.js │ │ ├── DistortionCode │ │ │ ├── DistortionCode.js │ │ │ └── index.js │ │ ├── DistortionPreview │ │ │ ├── DistortionPreview.js │ │ │ └── index.js │ │ ├── DistortionSchema │ │ │ ├── DistortionSchema.js │ │ │ └── index.js │ │ ├── FlangerCode │ │ │ ├── FlangerCode.js │ │ │ └── index.js │ │ ├── FlangerPreview │ │ │ ├── FlangerPreview.js │ │ │ └── index.js │ │ ├── FlangerSchema │ │ │ ├── FlangerSchema.js │ │ │ └── index.js │ │ ├── Intro │ │ │ ├── Intro.js │ │ │ └── index.js │ │ ├── Other │ │ │ ├── Other.js │ │ │ └── index.js │ │ ├── Pedalboard │ │ │ ├── Pedalboard.js │ │ │ └── index.js │ │ ├── ReverbCode │ │ │ ├── ReverbCode.js │ │ │ └── index.js │ │ ├── ReverbPreview │ │ │ ├── ReverbPreview.js │ │ │ └── index.js │ │ ├── ReverbSchema │ │ │ ├── ReverbSchema.js │ │ │ └── index.js │ │ ├── Volume │ │ │ ├── Volume.js │ │ │ └── index.js │ │ ├── VolumeCode │ │ │ ├── VolumeCode.js │ │ │ └── index.js │ │ └── VolumeSchema │ │ │ ├── VolumeSchema.js │ │ │ └── index.js │ │ ├── Fun │ │ ├── Demo │ │ │ ├── Demo.js │ │ │ └── index.js │ │ ├── Fun │ │ │ ├── Fun.js │ │ │ └── index.js │ │ ├── Intro │ │ │ ├── Intro.js │ │ │ └── index.js │ │ └── Remote │ │ │ ├── Remote.js │ │ │ └── index.js │ │ ├── Links │ │ ├── Links.js │ │ └── index.js │ │ ├── Midi │ │ ├── MidiCode │ │ │ ├── MidiCode.js │ │ │ └── index.js │ │ ├── MidiCodeSend │ │ │ ├── MidiCodeSend.js │ │ │ └── index.js │ │ ├── MidiController │ │ │ ├── MidiController.js │ │ │ └── index.js │ │ ├── MidiIntro │ │ │ ├── MidiIntro.js │ │ │ └── index.js │ │ └── MidiTest │ │ │ ├── MidiTest.js │ │ │ └── index.js │ │ ├── Play │ │ ├── Buffer │ │ │ ├── Buffer.js │ │ │ └── index.js │ │ ├── Fetch │ │ │ ├── Fetch.js │ │ │ └── index.js │ │ ├── Input │ │ │ ├── Input.js │ │ │ └── index.js │ │ ├── Intro │ │ │ ├── Intro.js │ │ │ └── index.js │ │ └── Tag │ │ │ ├── Tag.js │ │ │ └── index.js │ │ ├── Summary │ │ ├── Summary.js │ │ └── index.js │ │ ├── Thanks │ │ ├── Thanks.js │ │ └── index.js │ │ └── Title │ │ ├── ConfIntro.js │ │ ├── Title.js │ │ └── index.js ├── manifest.json ├── scss │ ├── _colors.scss │ ├── _font.scss │ ├── _normalize.scss │ └── styles.scss └── sound │ └── hall-reverb.ogg ├── webpack.config.babel.js └── yarn.lock /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["latest", "stage-0"], 3 | "plugins": [["transform-react-jsx", { "pragma": "h" }]] 4 | } 5 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # EditorConfig is awesome: http://EditorConfig.org 2 | 3 | # top-most EditorConfig file 4 | root = true 5 | 6 | # Unix-style newlines with a newline ending every file 7 | [*] 8 | end_of_line = lf 9 | insert_final_newline = true 10 | 11 | # Matches multiple files with brace expansion notation 12 | # Set default charset 13 | [*.{js,scss,html}] 14 | charset = utf-8 15 | indent_style = space 16 | indent_size = 4 17 | 18 | # Matches the exact files either package.json or .travis.yml 19 | [{package.json,.babelrc, manifest.json}] 20 | indent_style = space 21 | indent_size = 2 22 | -------------------------------------------------------------------------------- /.env.example: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sambego/deep-dive/2fc52a7bb35e196681189d1f47dbc08b9ceee0fe/.env.example -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | # Ignore vendor files 2 | src/js/Vendor/* 3 | -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "parser": "babel-eslint", 3 | "env": { 4 | "browser": true, 5 | "es6": true, 6 | "node": true, 7 | }, 8 | "globals": { 9 | __BROWSER__: true, 10 | }, 11 | "rules": { 12 | 'arrow-body-style': 0, 13 | 'arrow-parens': [2, 'as-needed'], 14 | 'arrow-spacing': 2, 15 | 'constructor-super': 2, 16 | 'generator-star-spacing': 2, 17 | 'no-class-assign': 2, 18 | 'no-confusing-arrow': 2, 19 | 'no-const-assign': 2, 20 | 'no-dupe-class-members': 2, 21 | 'no-duplicate-imports': 2, 22 | 'no-new-symbol': 2, 23 | 'no-restricted-imports': 2, 24 | 'no-this-before-super': 2, 25 | 'no-useless-computed-key': 2, 26 | 'no-useless-constructor': 2, 27 | 'no-useless-rename': 2, 28 | 'no-var': 2, 29 | 'object-shorthand': 2, 30 | 'prefer-arrow-callback': 2, 31 | 'prefer-const': 2, 32 | 'prefer-numeric-literals': 2, 33 | 'prefer-rest-params': 2, 34 | 'prefer-spread': 2, 35 | 'prefer-template': 2, 36 | 'require-yield': 2, 37 | 'rest-spread-spacing': 2, 38 | 'sort-imports': 0, 39 | 'symbol-description': 2, 40 | 'template-curly-spacing': 2, 41 | 'yield-star-spacing': 2, 42 | 'block-spacing': 2, 43 | 'brace-style': 2, 44 | 'camelcase': [2, {properties: 'never'}], 45 | 'comma-dangle': [2, 'always-multiline'], 46 | 'comma-spacing': 2, 47 | 'comma-style': 2, 48 | 'computed-property-spacing': 2, 49 | 'consistent-this': 2, 50 | 'eol-last': 2, 51 | 'func-call-spacing': 2, 52 | 'func-names': 2, 53 | 'func-style': 0, 54 | 'id-blacklist': 2, 55 | 'id-length': 0, 56 | 'id-match': 2, 57 | 'indent': [2, 4, {SwitchCase: 1}], 58 | 'jsx-quotes': 2, 59 | 'key-spacing': 2, 60 | 'keyword-spacing': 2, 61 | 'line-comment-position': 2, 62 | 'linebreak-style': 2, 63 | 'lines-around-comment': 0, 64 | 'lines-around-directive': 2, 65 | 'max-depth': 2, 66 | 'max-len': 0, 67 | 'max-lines': 0, 68 | 'max-nested-callbacks': 2, 69 | 'max-params': 0, 70 | 'max-statements': 0, 71 | 'max-statements-per-line': 2, 72 | 'multiline-ternary': 0, 73 | 'new-parens': 2, 74 | 'newline-after-var': 0, 75 | 'newline-before-return': 2, 76 | 'newline-per-chained-call': 0, 77 | 'no-array-constructor': 2, 78 | 'no-bitwise': 2, 79 | 'no-continue': 2, 80 | 'no-inline-comments': 2, 81 | 'no-lonely-if': 2, 82 | 'no-mixed-operators': 2, 83 | 'no-mixed-spaces-and-tabs': 2, 84 | 'no-multiple-empty-lines': 2, 85 | 'no-negated-condition': 2, 86 | 'no-nested-ternary': 2, 87 | 'no-new-object': 2, 88 | 'no-plusplus': 0, 89 | 'no-restricted-syntax': 2, 90 | 'no-tabs': 2, 91 | 'no-ternary': 0, 92 | 'no-trailing-spaces': 2, 93 | 'no-underscore-dangle': 2, 94 | 'no-unneeded-ternary': 2, 95 | 'no-whitespace-before-property': 2, 96 | 'object-curly-newline': 0, 97 | 'object-property-newline': 0, 98 | 'one-var': 0, 99 | 'one-var-declaration-per-line': 2, 100 | 'operator-assignment': 2, 101 | 'operator-linebreak': 2, 102 | 'padded-blocks': [2, 'never'], 103 | 'quote-props': [2, 'consistent-as-needed'], 104 | 'quotes': [2, 'single'], 105 | 'require-jsdoc': 0, 106 | 'semi': 2, 107 | 'semi-spacing': 2, 108 | 'sort-keys': 0, 109 | 'sort-vars': 2, 110 | 'space-before-blocks': 2, 111 | 'space-before-function-paren': [2, {anonymous: 'always', named: 'never'}], 112 | 'space-in-parens': 2, 113 | 'space-infix-ops': 2, 114 | 'space-unary-ops': 2, 115 | 'spaced-comment': 0, 116 | 'unicode-bom': 2, 117 | 'wrap-regex': 2, 118 | } 119 | } 120 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | dist/ 3 | .env 4 | csr.pem 5 | key.pem 6 | server.crt 7 | yarn-error.log 8 | -------------------------------------------------------------------------------- /_redirects: -------------------------------------------------------------------------------- 1 | 2 | # Redirect sambego.be to sambeg.tech 3 | https://audio.sambego.be/* https://audio.sambego.tech/:splat 301! 4 | 5 | # Suport the history API 6 | /* /index.html 200 7 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "scripts": { 3 | "build:prod": "NODE_ENV=production rm -rf dist/ && webpack -p --env production", 4 | "build:dev": "webpack-dev-server --content-base dist --inline --hot --progress", 5 | "git:clean": "git fetch -p", 6 | "lint": "eslint src/js", 7 | "test:jest": "jest", 8 | "rebuild:sass": "npm rebuild node-sass" 9 | }, 10 | "dependencies": { 11 | "audio-effects": "^1.2.4", 12 | "autoprefixer": "^7.1.4", 13 | "babel-core": "^6.26.0", 14 | "babel-eslint": "^8.0.1", 15 | "babel-loader": "^7.1.2", 16 | "babel-plugin-transform-react-jsx": "^6.24.1", 17 | "babel-preset-env": "^1.6.0", 18 | "babel-preset-latest": "^6.24.1", 19 | "babel-preset-stage-0": "^6.24.1", 20 | "classnames": "^2.2.5", 21 | "copy-webpack-plugin": "^4.0.1", 22 | "css-loader": "^0.28.7", 23 | "eslint": "^4.7.2", 24 | "eslint-loader": "^1.9.0", 25 | "extract-text-webpack-plugin": "^3.0.0", 26 | "file-loader": "^0.11.2", 27 | "frequency-calculator": "^0.0.8", 28 | "html-webpack-include-assets-plugin": "^1.0.0", 29 | "html-webpack-plugin": "^2.30.1", 30 | "keycode": "^2.1.8", 31 | "linkref": "^1.0.1", 32 | "node-sass": "^4.5.3", 33 | "postcss-loader": "^2.0.6", 34 | "preact": "^8.2.5", 35 | "preact-render-to-string": "^3.6.3", 36 | "preact-router": "^2.5.7", 37 | "prismjs": "^1.8.1", 38 | "proptypes": "^1.1.0", 39 | "raw-loader": "^0.5.1", 40 | "sass-loader": "^6.0.6", 41 | "style-loader": "^0.18.2", 42 | "svg-inline-loader": "^0.8.0", 43 | "webpack": "^3.6.0", 44 | "webpack-dev-server": "^2.8.2", 45 | "webpack-dotenv-plugin": "^2.0.2" 46 | } 47 | } 48 | -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: [require('autoprefixer')()], 3 | }; 4 | -------------------------------------------------------------------------------- /src/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sambego/deep-dive/2fc52a7bb35e196681189d1f47dbc08b9ceee0fe/src/.DS_Store -------------------------------------------------------------------------------- /src/browserconfig.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | #5FB3B3 10 | 11 | 12 | -------------------------------------------------------------------------------- /src/favicon/android-icon-144x144.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sambego/deep-dive/2fc52a7bb35e196681189d1f47dbc08b9ceee0fe/src/favicon/android-icon-144x144.png -------------------------------------------------------------------------------- /src/favicon/android-icon-192x192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sambego/deep-dive/2fc52a7bb35e196681189d1f47dbc08b9ceee0fe/src/favicon/android-icon-192x192.png -------------------------------------------------------------------------------- /src/favicon/android-icon-36x36.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sambego/deep-dive/2fc52a7bb35e196681189d1f47dbc08b9ceee0fe/src/favicon/android-icon-36x36.png -------------------------------------------------------------------------------- /src/favicon/android-icon-48x48.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sambego/deep-dive/2fc52a7bb35e196681189d1f47dbc08b9ceee0fe/src/favicon/android-icon-48x48.png -------------------------------------------------------------------------------- /src/favicon/android-icon-72x72.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sambego/deep-dive/2fc52a7bb35e196681189d1f47dbc08b9ceee0fe/src/favicon/android-icon-72x72.png -------------------------------------------------------------------------------- /src/favicon/android-icon-96x96.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sambego/deep-dive/2fc52a7bb35e196681189d1f47dbc08b9ceee0fe/src/favicon/android-icon-96x96.png -------------------------------------------------------------------------------- /src/favicon/apple-icon-114x114.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sambego/deep-dive/2fc52a7bb35e196681189d1f47dbc08b9ceee0fe/src/favicon/apple-icon-114x114.png -------------------------------------------------------------------------------- /src/favicon/apple-icon-120x120.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sambego/deep-dive/2fc52a7bb35e196681189d1f47dbc08b9ceee0fe/src/favicon/apple-icon-120x120.png -------------------------------------------------------------------------------- /src/favicon/apple-icon-144x144.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sambego/deep-dive/2fc52a7bb35e196681189d1f47dbc08b9ceee0fe/src/favicon/apple-icon-144x144.png -------------------------------------------------------------------------------- /src/favicon/apple-icon-152x152.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sambego/deep-dive/2fc52a7bb35e196681189d1f47dbc08b9ceee0fe/src/favicon/apple-icon-152x152.png -------------------------------------------------------------------------------- /src/favicon/apple-icon-180x180.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sambego/deep-dive/2fc52a7bb35e196681189d1f47dbc08b9ceee0fe/src/favicon/apple-icon-180x180.png -------------------------------------------------------------------------------- /src/favicon/apple-icon-57x57.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sambego/deep-dive/2fc52a7bb35e196681189d1f47dbc08b9ceee0fe/src/favicon/apple-icon-57x57.png -------------------------------------------------------------------------------- /src/favicon/apple-icon-60x60.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sambego/deep-dive/2fc52a7bb35e196681189d1f47dbc08b9ceee0fe/src/favicon/apple-icon-60x60.png -------------------------------------------------------------------------------- /src/favicon/apple-icon-72x72.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sambego/deep-dive/2fc52a7bb35e196681189d1f47dbc08b9ceee0fe/src/favicon/apple-icon-72x72.png -------------------------------------------------------------------------------- /src/favicon/apple-icon-76x76.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sambego/deep-dive/2fc52a7bb35e196681189d1f47dbc08b9ceee0fe/src/favicon/apple-icon-76x76.png -------------------------------------------------------------------------------- /src/favicon/apple-icon-precomposed.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sambego/deep-dive/2fc52a7bb35e196681189d1f47dbc08b9ceee0fe/src/favicon/apple-icon-precomposed.png -------------------------------------------------------------------------------- /src/favicon/apple-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sambego/deep-dive/2fc52a7bb35e196681189d1f47dbc08b9ceee0fe/src/favicon/apple-icon.png -------------------------------------------------------------------------------- /src/favicon/browserconfig.xml: -------------------------------------------------------------------------------- 1 | 2 | #ffffff -------------------------------------------------------------------------------- /src/favicon/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sambego/deep-dive/2fc52a7bb35e196681189d1f47dbc08b9ceee0fe/src/favicon/favicon-16x16.png -------------------------------------------------------------------------------- /src/favicon/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sambego/deep-dive/2fc52a7bb35e196681189d1f47dbc08b9ceee0fe/src/favicon/favicon-32x32.png -------------------------------------------------------------------------------- /src/favicon/favicon-96x96.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sambego/deep-dive/2fc52a7bb35e196681189d1f47dbc08b9ceee0fe/src/favicon/favicon-96x96.png -------------------------------------------------------------------------------- /src/favicon/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sambego/deep-dive/2fc52a7bb35e196681189d1f47dbc08b9ceee0fe/src/favicon/favicon.ico -------------------------------------------------------------------------------- /src/favicon/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sambego/deep-dive/2fc52a7bb35e196681189d1f47dbc08b9ceee0fe/src/favicon/favicon.png -------------------------------------------------------------------------------- /src/favicon/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "App", 3 | "icons": [ 4 | { 5 | "src": "\/android-icon-36x36.png", 6 | "sizes": "36x36", 7 | "type": "image\/png", 8 | "density": "0.75" 9 | }, 10 | { 11 | "src": "\/android-icon-48x48.png", 12 | "sizes": "48x48", 13 | "type": "image\/png", 14 | "density": "1.0" 15 | }, 16 | { 17 | "src": "\/android-icon-72x72.png", 18 | "sizes": "72x72", 19 | "type": "image\/png", 20 | "density": "1.5" 21 | }, 22 | { 23 | "src": "\/android-icon-96x96.png", 24 | "sizes": "96x96", 25 | "type": "image\/png", 26 | "density": "2.0" 27 | }, 28 | { 29 | "src": "\/android-icon-144x144.png", 30 | "sizes": "144x144", 31 | "type": "image\/png", 32 | "density": "3.0" 33 | }, 34 | { 35 | "src": "\/android-icon-192x192.png", 36 | "sizes": "192x192", 37 | "type": "image\/png", 38 | "density": "4.0" 39 | } 40 | ] 41 | } -------------------------------------------------------------------------------- /src/favicon/ms-icon-144x144.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sambego/deep-dive/2fc52a7bb35e196681189d1f47dbc08b9ceee0fe/src/favicon/ms-icon-144x144.png -------------------------------------------------------------------------------- /src/favicon/ms-icon-150x150.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sambego/deep-dive/2fc52a7bb35e196681189d1f47dbc08b9ceee0fe/src/favicon/ms-icon-150x150.png -------------------------------------------------------------------------------- /src/favicon/ms-icon-310x310.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sambego/deep-dive/2fc52a7bb35e196681189d1f47dbc08b9ceee0fe/src/favicon/ms-icon-310x310.png -------------------------------------------------------------------------------- /src/favicon/ms-icon-70x70.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sambego/deep-dive/2fc52a7bb35e196681189d1f47dbc08b9ceee0fe/src/favicon/ms-icon-70x70.png -------------------------------------------------------------------------------- /src/favicon/og.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sambego/deep-dive/2fc52a7bb35e196681189d1f47dbc08b9ceee0fe/src/favicon/og.png -------------------------------------------------------------------------------- /src/fonts/montserrat/montserrat-v10-latin-700.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sambego/deep-dive/2fc52a7bb35e196681189d1f47dbc08b9ceee0fe/src/fonts/montserrat/montserrat-v10-latin-700.woff -------------------------------------------------------------------------------- /src/fonts/montserrat/montserrat-v10-latin-700.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sambego/deep-dive/2fc52a7bb35e196681189d1f47dbc08b9ceee0fe/src/fonts/montserrat/montserrat-v10-latin-700.woff2 -------------------------------------------------------------------------------- /src/fonts/montserrat/montserrat-v10-latin-italic.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sambego/deep-dive/2fc52a7bb35e196681189d1f47dbc08b9ceee0fe/src/fonts/montserrat/montserrat-v10-latin-italic.woff -------------------------------------------------------------------------------- /src/fonts/montserrat/montserrat-v10-latin-italic.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sambego/deep-dive/2fc52a7bb35e196681189d1f47dbc08b9ceee0fe/src/fonts/montserrat/montserrat-v10-latin-italic.woff2 -------------------------------------------------------------------------------- /src/fonts/montserrat/montserrat-v10-latin-regular.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sambego/deep-dive/2fc52a7bb35e196681189d1f47dbc08b9ceee0fe/src/fonts/montserrat/montserrat-v10-latin-regular.woff -------------------------------------------------------------------------------- /src/fonts/montserrat/montserrat-v10-latin-regular.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sambego/deep-dive/2fc52a7bb35e196681189d1f47dbc08b9ceee0fe/src/fonts/montserrat/montserrat-v10-latin-regular.woff2 -------------------------------------------------------------------------------- /src/images/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sambego/deep-dive/2fc52a7bb35e196681189d1f47dbc08b9ceee0fe/src/images/.DS_Store -------------------------------------------------------------------------------- /src/images/Schematics.sketch: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sambego/deep-dive/2fc52a7bb35e196681189d1f47dbc08b9ceee0fe/src/images/Schematics.sketch -------------------------------------------------------------------------------- /src/images/compose.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sambego/deep-dive/2fc52a7bb35e196681189d1f47dbc08b9ceee0fe/src/images/compose.jpg -------------------------------------------------------------------------------- /src/images/conf.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sambego/deep-dive/2fc52a7bb35e196681189d1f47dbc08b9ceee0fe/src/images/conf.jpg -------------------------------------------------------------------------------- /src/images/create.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sambego/deep-dive/2fc52a7bb35e196681189d1f47dbc08b9ceee0fe/src/images/create.jpg -------------------------------------------------------------------------------- /src/images/delay.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Delay 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | -------------------------------------------------------------------------------- /src/images/devtools.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sambego/deep-dive/2fc52a7bb35e196681189d1f47dbc08b9ceee0fe/src/images/devtools.png -------------------------------------------------------------------------------- /src/images/distortion.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Distortion 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | -------------------------------------------------------------------------------- /src/images/effects.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sambego/deep-dive/2fc52a7bb35e196681189d1f47dbc08b9ceee0fe/src/images/effects.jpg -------------------------------------------------------------------------------- /src/images/envelope-schema-custom.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sambego/deep-dive/2fc52a7bb35e196681189d1f47dbc08b9ceee0fe/src/images/envelope-schema-custom.png -------------------------------------------------------------------------------- /src/images/envelope-schema-custom.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | envelope-schema-custom 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | Attack 14 | 15 | 16 | Time 17 | 18 | 19 | Volume 20 | 21 | 22 | 23 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /src/images/envelope-schema-exponential.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sambego/deep-dive/2fc52a7bb35e196681189d1f47dbc08b9ceee0fe/src/images/envelope-schema-exponential.png -------------------------------------------------------------------------------- /src/images/envelope-schema-exponential.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | envelope-schema-exponential 5 | Created with Sketch. 6 | 7 | 8 | 9 | Attack 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /src/images/envelope-schema.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sambego/deep-dive/2fc52a7bb35e196681189d1f47dbc08b9ceee0fe/src/images/envelope-schema.png -------------------------------------------------------------------------------- /src/images/envelope-schema.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | envelope-schema 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | Attack 11 | 12 | 13 | Release 14 | 15 | 16 | -------------------------------------------------------------------------------- /src/images/envelope.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sambego/deep-dive/2fc52a7bb35e196681189d1f47dbc08b9ceee0fe/src/images/envelope.png -------------------------------------------------------------------------------- /src/images/envelope.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Path 5 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /src/images/graphics.sketch: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sambego/deep-dive/2fc52a7bb35e196681189d1f47dbc08b9ceee0fe/src/images/graphics.sketch -------------------------------------------------------------------------------- /src/images/guitar.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sambego/deep-dive/2fc52a7bb35e196681189d1f47dbc08b9ceee0fe/src/images/guitar.jpg -------------------------------------------------------------------------------- /src/images/mic.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sambego/deep-dive/2fc52a7bb35e196681189d1f47dbc08b9ceee0fe/src/images/mic.png -------------------------------------------------------------------------------- /src/images/mic.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Fill 48 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /src/images/midi-contoller.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sambego/deep-dive/2fc52a7bb35e196681189d1f47dbc08b9ceee0fe/src/images/midi-contoller.jpg -------------------------------------------------------------------------------- /src/images/pedalboard.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sambego/deep-dive/2fc52a7bb35e196681189d1f47dbc08b9ceee0fe/src/images/pedalboard.jpg -------------------------------------------------------------------------------- /src/images/play.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sambego/deep-dive/2fc52a7bb35e196681189d1f47dbc08b9ceee0fe/src/images/play.jpg -------------------------------------------------------------------------------- /src/images/remote.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sambego/deep-dive/2fc52a7bb35e196681189d1f47dbc08b9ceee0fe/src/images/remote.png -------------------------------------------------------------------------------- /src/images/sam.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sambego/deep-dive/2fc52a7bb35e196681189d1f47dbc08b9ceee0fe/src/images/sam.jpg -------------------------------------------------------------------------------- /src/images/sam2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sambego/deep-dive/2fc52a7bb35e196681189d1f47dbc08b9ceee0fe/src/images/sam2.jpg -------------------------------------------------------------------------------- /src/images/sawtooth.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sambego/deep-dive/2fc52a7bb35e196681189d1f47dbc08b9ceee0fe/src/images/sawtooth.png -------------------------------------------------------------------------------- /src/images/sawtooth.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | sawtooth 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /src/images/sine.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sambego/deep-dive/2fc52a7bb35e196681189d1f47dbc08b9ceee0fe/src/images/sine.png -------------------------------------------------------------------------------- /src/images/sine.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | sine 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /src/images/square.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sambego/deep-dive/2fc52a7bb35e196681189d1f47dbc08b9ceee0fe/src/images/square.png -------------------------------------------------------------------------------- /src/images/square.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | square 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /src/images/triangle.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sambego/deep-dive/2fc52a7bb35e196681189d1f47dbc08b9ceee0fe/src/images/triangle.png -------------------------------------------------------------------------------- /src/images/triangle.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | triangle 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /src/images/twitter.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sambego/deep-dive/2fc52a7bb35e196681189d1f47dbc08b9ceee0fe/src/images/twitter.png -------------------------------------------------------------------------------- /src/images/twitter.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Twitter_Logo_Blue 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /src/images/volume.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | volume 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | -------------------------------------------------------------------------------- /src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | A deep dive into the web-audio API. 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 70 | 71 | 72 | 73 | 80 | 81 | 82 | 83 | -------------------------------------------------------------------------------- /src/js/components/Code/Code.js: -------------------------------------------------------------------------------- 1 | import { h, render, cloneElement } from 'preact'; 2 | import propTypes from 'proptypes'; 3 | import Prism from 'prismjs'; 4 | import styles from './code.scss'; 5 | import './prism.css'; 6 | 7 | const Code = ({ code, lang }) => { 8 | return ( 9 |
10 |
11 | 12 | 13 | 14 |
15 |
16 | 
17 |                     
22 |
23 |
24 |
25 | ); 26 | }; 27 | 28 | Code.propTypes = { 29 | children: propTypes.string.isRequired, 30 | }; 31 | 32 | Code.defaultProps = { 33 | lang: 'javascript', 34 | }; 35 | 36 | export default Code; 37 | -------------------------------------------------------------------------------- /src/js/components/Code/code.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * Code styles 3 | */ 4 | 5 | .code { 6 | padding: 1rem; 7 | min-width: 50vw; 8 | 9 | background: #1b2b34; 10 | 11 | border-radius: 0.5rem; 12 | box-shadow: 1.5rem 1.5rem 5rem 0 rgba(#000, 0.2), 13 | -1.5rem -1.5rem 5rem 0 rgba(#000, 0.2), 14 | -1.5rem 1.5rem 5rem 0 rgba(#000, 0.2), 15 | 1.5rem -1.5rem 5rem 0 rgba(#000, 0.2); 16 | 17 | text-align: left; 18 | 19 | code { 20 | display: block; 21 | } 22 | 23 | pre { 24 | padding: 0; 25 | margin: 0; 26 | 27 | text-align: left; 28 | 29 | background: none; 30 | } 31 | } 32 | 33 | .header { 34 | padding: 0 1rem; 35 | 36 | text-align: left; 37 | } 38 | 39 | .red, 40 | .yellow, 41 | .green { 42 | display: inline-block; 43 | width: 1.2rem; 44 | height: 1.2rem; 45 | margin: 0 0.5rem 0 0; 46 | 47 | border-radius: 50%; 48 | } 49 | 50 | .red { 51 | background: #ec5f67; 52 | } 53 | 54 | .yellow { 55 | background: yellow; 56 | } 57 | 58 | .green { 59 | background: #99c794; 60 | } 61 | 62 | .snippet { 63 | padding: 1rem; 64 | 65 | code, 66 | pre { 67 | color: #cdd3de; 68 | font-size: 2vw; 69 | line-height: 120%; 70 | } 71 | } 72 | -------------------------------------------------------------------------------- /src/js/components/Code/index.js: -------------------------------------------------------------------------------- 1 | import Code from './Code'; 2 | export default Code; 3 | -------------------------------------------------------------------------------- /src/js/components/Code/prism.css: -------------------------------------------------------------------------------- 1 | code[class*='language-'], 2 | pre[class*='language-'] { 3 | font-family: Consolas, Menlo, Monaco, 'Andale Mono WT', 'Andale Mono', 4 | 'Lucida Console', 'Lucida Sans Typewriter', 'DejaVu Sans Mono', 5 | 'Bitstream Vera Sans Mono', 'Liberation Mono', 'Nimbus Mono L', 6 | 'Courier New', Courier, monospace; 7 | font-size: 14px; 8 | line-height: 1.375; 9 | direction: ltr; 10 | text-align: left; 11 | white-space: pre; 12 | word-spacing: normal; 13 | word-break: normal; 14 | -moz-tab-size: 4; 15 | -o-tab-size: 4; 16 | tab-size: 4; 17 | -webkit-hyphens: none; 18 | -moz-hyphens: none; 19 | -ms-hyphens: none; 20 | hyphens: none; 21 | background: #2b303b; 22 | color: #cdd3de; 23 | } 24 | pre[class*='language-']::-moz-selection, 25 | pre[class*='language-'] ::-moz-selection, 26 | code[class*='language-']::-moz-selection, 27 | code[class*='language-'] ::-moz-selection { 28 | text-shadow: none; 29 | background: #cdd3de; 30 | } 31 | pre[class*='language-']::selection, 32 | pre[class*='language-'] ::selection, 33 | code[class*='language-']::selection, 34 | code[class*='language-'] ::selection { 35 | text-shadow: none; 36 | background: #cdd3de; 37 | } 38 | pre[class*='language-'] { 39 | padding: 1em; 40 | margin: 0.5em 0; 41 | overflow: auto; 42 | } 43 | :not(pre) > code[class*='language-'] { 44 | padding: 0.1em; 45 | border-radius: 0.3em; 46 | } 47 | .token.comment, 48 | .token.prolog, 49 | .token.doctype, 50 | .token.cdata { 51 | color: #65737e; 52 | } 53 | .token.punctuation { 54 | color: #c0c5ce; 55 | } 56 | .token.namespace { 57 | opacity: 0.7; 58 | } 59 | .token.operator, 60 | .token.boolean, 61 | .token.number { 62 | color: #d08770; 63 | } 64 | .token.property { 65 | color: #ebcb8b; 66 | } 67 | .token.tag { 68 | color: #8fa1b3; 69 | } 70 | .token.string { 71 | color: #96b5b4; 72 | } 73 | .token.selector { 74 | color: #b48ead; 75 | } 76 | .token.attr-name { 77 | color: #d08770; 78 | } 79 | .token.entity, 80 | .token.url, 81 | .language-css .token.string, 82 | .style .token.string { 83 | color: #96b5b4; 84 | } 85 | .token.attr-value, 86 | .token.keyword, 87 | .token.control, 88 | .token.directive, 89 | .token.unit { 90 | color: #a3be8c; 91 | } 92 | .token.statement, 93 | .token.regex, 94 | .token.atrule { 95 | color: #96b5b4; 96 | } 97 | .token.placeholder, 98 | .token.variable, 99 | .token.function { 100 | color: #6699cc; 101 | } 102 | .token.deleted { 103 | text-decoration: line-through; 104 | } 105 | .token.inserted { 106 | border-bottom: 1px dotted #eff1f5; 107 | text-decoration: none; 108 | } 109 | .token.italic { 110 | font-style: italic; 111 | } 112 | .token.important, 113 | .token.bold { 114 | font-weight: bold; 115 | } 116 | .token.important { 117 | color: #bf616a; 118 | } 119 | .token.entity { 120 | cursor: help; 121 | } 122 | pre > code.highlight { 123 | outline: 0.4em solid #bf616a; 124 | outline-offset: 0.4em; 125 | } 126 | -------------------------------------------------------------------------------- /src/js/components/Columns/Columns.js: -------------------------------------------------------------------------------- 1 | import { h, render, cloneElement } from 'preact'; 2 | import propTypes from 'proptypes'; 3 | import styles from './columns.scss'; 4 | 5 | const Columns = ({ children }) => { 6 | const renderColumns = () => { 7 | return children.map(child => { 8 | return cloneElement(child, { 9 | className: styles.column, 10 | }); 11 | }); 12 | }; 13 | 14 | return
{renderColumns()}
; 15 | }; 16 | 17 | Columns.propTypes = { 18 | children: propTypes.element.isRequired, 19 | }; 20 | 21 | export default Columns; 22 | -------------------------------------------------------------------------------- /src/js/components/Columns/columns.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * Column styles 3 | */ 4 | 5 | .columns { 6 | display: flex; 7 | width: 100%; 8 | } 9 | 10 | .column { 11 | flex: 1; 12 | display: flex; 13 | align-items: center; 14 | justify-content: center; 15 | flex-direction: column; 16 | padding: 4rem; 17 | 18 | text-align: center; 19 | } 20 | -------------------------------------------------------------------------------- /src/js/components/Columns/index.js: -------------------------------------------------------------------------------- 1 | import Columns from './Columns'; 2 | export default Columns; 3 | -------------------------------------------------------------------------------- /src/js/components/Deck/Deck.js: -------------------------------------------------------------------------------- 1 | import { h, render, Component, cloneElement } from 'preact'; 2 | import propTypes from 'proptypes'; 3 | import Twitter from '../Twitter'; 4 | import Keyboard from '../../services/Keyboard'; 5 | 6 | class Deck extends Component { 7 | state = { 8 | slide: parseInt(window.location.pathname.split('/')[1]) || 0, 9 | }; 10 | 11 | componentWillMount() { 12 | this.KeyboardLeftListener = Keyboard.on('left', () => 13 | this.getPreviousSlide() 14 | ); 15 | this.KeyboardRightListener = Keyboard.on('right', () => 16 | this.getNextSlide() 17 | ); 18 | this.KeyboardUpListener = Keyboard.on('page up', () => 19 | this.getPreviousSlide() 20 | ); 21 | this.KeyboardDownListener = Keyboard.on('page down', () => 22 | this.getNextSlide() 23 | ); 24 | } 25 | 26 | componentWillUnmount() { 27 | Keyboard.off(this.KeyboardLeftListener); 28 | Keyboard.off(this.KeyboardRightListener); 29 | Keyboard.off(this.KeyboardUpListener); 30 | Keyboard.off(this.KeyboardDownListener); 31 | } 32 | 33 | getPreviousSlide() { 34 | if (this.state.slide === 0) { 35 | return; 36 | } 37 | 38 | this.setState({ slide: this.state.slide - 1 }); 39 | history.pushState(undefined, undefined, this.state.slide); 40 | } 41 | 42 | getNextSlide() { 43 | if (this.state.slide === this.props.children.length - 1) { 44 | return; 45 | } 46 | 47 | this.setState({ slide: this.state.slide + 1 }); 48 | history.pushState(undefined, undefined, this.state.slide); 49 | } 50 | 51 | renderSlide = () => { 52 | return this.props.children[this.state.slide]; 53 | }; 54 | 55 | render() { 56 | return ( 57 |
58 | {this.renderSlide()} 59 | 60 |
61 | ); 62 | } 63 | } 64 | 65 | Deck.propTypes = { 66 | children: propTypes.element.isRequired, 67 | }; 68 | 69 | export default Deck; 70 | -------------------------------------------------------------------------------- /src/js/components/Deck/index.js: -------------------------------------------------------------------------------- 1 | import Deck from './Deck'; 2 | export default Deck; 3 | -------------------------------------------------------------------------------- /src/js/components/Icon/Icon.js: -------------------------------------------------------------------------------- 1 | import { h, render, cloneElement } from 'preact'; 2 | import propTypes from 'proptypes'; 3 | 4 | const EnvelopesSchema = ({ src, style }) => { 5 | return
; 6 | }; 7 | 8 | EnvelopesSchema.propTypes = { 9 | src: propTypes.element.isRequired, 10 | style: propTypes.object, 11 | }; 12 | 13 | export default EnvelopesSchema; 14 | -------------------------------------------------------------------------------- /src/js/components/Icon/index.js: -------------------------------------------------------------------------------- 1 | import Icon from './Icon'; 2 | export default Icon; 3 | -------------------------------------------------------------------------------- /src/js/components/Image/Image.js: -------------------------------------------------------------------------------- 1 | import { h, render, cloneElement } from 'preact'; 2 | import propTypes from 'proptypes'; 3 | import classnames from 'classnames'; 4 | import styles from './image.scss'; 5 | 6 | const Image = ({ children, src, style, color }) => { 7 | const classes = classnames(styles.image, { 8 | [styles.overlay]: color, 9 | }); 10 | 11 | return ( 12 |
20 | ); 21 | }; 22 | 23 | Image.propTypes = { 24 | children: propTypes.element.isRequired, 25 | src: propTypes.string.isRequired, 26 | }; 27 | 28 | export default Image; 29 | -------------------------------------------------------------------------------- /src/js/components/Image/image.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * Image styles 3 | */ 4 | 5 | .image { 6 | position: relative; 7 | 8 | background-position: 50% !important; 9 | background-size: cover !important; 10 | background: no-repeat; 11 | } 12 | 13 | .overlay { 14 | background-blend-mode: multiply; 15 | } 16 | -------------------------------------------------------------------------------- /src/js/components/Image/index.js: -------------------------------------------------------------------------------- 1 | import Image from './Image'; 2 | export default Image; 3 | -------------------------------------------------------------------------------- /src/js/components/List/List.js: -------------------------------------------------------------------------------- 1 | import { h, render, cloneElement } from 'preact'; 2 | import propTypes from 'proptypes'; 3 | import styles from './list.scss'; 4 | 5 | const List = ({ children }) => { 6 | const renderItems = () => { 7 | return children.map(child => { 8 | return cloneElement(child, { 9 | className: styles.item, 10 | }); 11 | }); 12 | }; 13 | 14 | return
    {renderItems()}
; 15 | }; 16 | 17 | List.propTypes = { 18 | children: propTypes.element.isRequired, 19 | }; 20 | 21 | export default List; 22 | -------------------------------------------------------------------------------- /src/js/components/List/index.js: -------------------------------------------------------------------------------- 1 | import List from './List'; 2 | export default List; 3 | -------------------------------------------------------------------------------- /src/js/components/List/list.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * List styles 3 | */ 4 | 5 | .list { 6 | padding: 0; 7 | margin: 0; 8 | list-style: none; 9 | } 10 | 11 | .item { 12 | padding: 2rem 0; 13 | margin: 0; 14 | list-style: none; 15 | 16 | font-size: 3vw; 17 | } 18 | -------------------------------------------------------------------------------- /src/js/components/Slide/Slide.js: -------------------------------------------------------------------------------- 1 | import { h, render, cloneElement } from 'preact'; 2 | import propTypes from 'proptypes'; 3 | import styles from './slide.scss'; 4 | 5 | const Slide = ({ children }) => { 6 | return
{children}
; 7 | }; 8 | 9 | Slide.propTypes = { 10 | children: propTypes.element.isRequired, 11 | }; 12 | 13 | export default Slide; 14 | -------------------------------------------------------------------------------- /src/js/components/Slide/index.js: -------------------------------------------------------------------------------- 1 | import Slide from './Slide'; 2 | export default Slide; 3 | -------------------------------------------------------------------------------- /src/js/components/Slide/slide.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * Slide styles 3 | */ 4 | 5 | .slide { 6 | display: flex; 7 | width: 100vw; 8 | height: 100vh; 9 | align-items: center; 10 | justify-content: center; 11 | flex-direction: column; 12 | 13 | text-align: center; 14 | } 15 | -------------------------------------------------------------------------------- /src/js/components/Sound/Sound.js: -------------------------------------------------------------------------------- 1 | import { h, render, cloneElement } from 'preact'; 2 | import propTypes from 'proptypes'; 3 | import styles from './sound.scss'; 4 | 5 | const Sound = ({ onClick, style }) => { 6 | return