Slideshow component #99

pomber · 2021-12-26T16:30:32Z

📦 Published PR as canary version: 0.3.0--canary.99.4abcdea.0

✨ Test out this PR locally via:

npm install @code-hike/classer@0.3.0--canary.99.4abcdea.0
npm install @code-hike/highlighter@0.3.0--canary.99.4abcdea.0
npm install @code-hike/mdx@0.3.0--canary.99.4abcdea.0
npm install @code-hike/mini-browser@0.3.0--canary.99.4abcdea.0
npm install @code-hike/mini-editor@0.3.0--canary.99.4abcdea.0
npm install @code-hike/mini-frame@0.3.0--canary.99.4abcdea.0
npm install @code-hike/mini-terminal@0.3.0--canary.99.4abcdea.0
npm install @code-hike/player@0.3.0--canary.99.4abcdea.0
npm install @code-hike/playground@0.3.0--canary.99.4abcdea.0
npm install @code-hike/script@0.3.0--canary.99.4abcdea.0
npm install @code-hike/scroller@0.3.0--canary.99.4abcdea.0
npm install @code-hike/scrollycoding@0.3.0--canary.99.4abcdea.0
npm install @code-hike/sim-user@0.3.0--canary.99.4abcdea.0
npm install @code-hike/smooth-code@0.3.0--canary.99.4abcdea.0
npm install @code-hike/smooth-column@0.3.0--canary.99.4abcdea.0
npm install storybook@0.3.0--canary.99.4abcdea.0
npm install @code-hike/utils@0.3.0--canary.99.4abcdea.0
# or 
yarn add @code-hike/classer@0.3.0--canary.99.4abcdea.0
yarn add @code-hike/highlighter@0.3.0--canary.99.4abcdea.0
yarn add @code-hike/mdx@0.3.0--canary.99.4abcdea.0
yarn add @code-hike/mini-browser@0.3.0--canary.99.4abcdea.0
yarn add @code-hike/mini-editor@0.3.0--canary.99.4abcdea.0
yarn add @code-hike/mini-frame@0.3.0--canary.99.4abcdea.0
yarn add @code-hike/mini-terminal@0.3.0--canary.99.4abcdea.0
yarn add @code-hike/player@0.3.0--canary.99.4abcdea.0
yarn add @code-hike/playground@0.3.0--canary.99.4abcdea.0
yarn add @code-hike/script@0.3.0--canary.99.4abcdea.0
yarn add @code-hike/scroller@0.3.0--canary.99.4abcdea.0
yarn add @code-hike/scrollycoding@0.3.0--canary.99.4abcdea.0
yarn add @code-hike/sim-user@0.3.0--canary.99.4abcdea.0
yarn add @code-hike/smooth-code@0.3.0--canary.99.4abcdea.0
yarn add @code-hike/smooth-column@0.3.0--canary.99.4abcdea.0
yarn add storybook@0.3.0--canary.99.4abcdea.0
yarn add @code-hike/utils@0.3.0--canary.99.4abcdea.0

Version

Published prerelease version: v0.3.0-next.17

Changelog

🚀 Enhancement

@code-hike/mdx, @code-hike/mini-browser, @code-hike/playground, @code-hike/smooth-code, storybook
- Slideshow component #99 (@pomber)
@code-hike/classer, @code-hike/highlighter, @code-hike/mdx, @code-hike/mini-browser, @code-hike/mini-editor, @code-hike/mini-frame, @code-hike/mini-terminal, @code-hike/player, @code-hike/playground, @code-hike/script, @code-hike/scroller, @code-hike/scrollycoding, @code-hike/smooth-code, @code-hike/smooth-column, storybook, @code-hike/utils
- Use shiki #77 (@pomber)
@code-hike/mini-editor, @code-hike/mini-frame, @code-hike/scrollycoding, storybook
- Split editor #67 (@pomber)

🐛 Bug Fix

Turn onlyPublishWithReleaseLabel on #34 (@pomber)
Remove submodule (@pomber)
Update (@pomber)
Remove code-sections (@pomber)
Update sections (@pomber)
v0.0.0 (@pomber)
Update site submodule (@pomber)
Add site submodule (@pomber)
Remove more submodules (@pomber)
Remove some submodules (@pomber)
Yarn upgrade (@pomber)
Change root scripts (@pomber)
Add update version command (@pomber)
Update screencast (@pomber)
Focus opacity (@pomber)
Fix zoom (@pomber)
Use line height (@pomber)
Make line width dynamic (@pomber)
Remove theme from storybook (@pomber)
Remove extra prev key (@pomber)
Add wsrun (@pomber)
Add code story (@pomber)
Add code map (@pomber)
Add jest (@pomber)
Update storybook (@pomber)
Add scale (@pomber)
Add easing (@pomber)
Add stagger (@pomber)
Add smooth-lines package (@pomber)
Add demo (@pomber)
Add module (@pomber)
@code-hike/mini-editor, @code-hike/playground, storybook
- Smarter editor height #98 (@pomber)
@code-hike/mdx, @code-hike/playground
- Stop assuming comment annotations #97 (@pomber)
@code-hike/highlighter, @code-hike/playground, @code-hike/smooth-code, storybook, @code-hike/utils
- Fix multi-annotation focus string #94 (@pomber)
@code-hike/mdx, @code-hike/mini-editor, @code-hike/playground
- Make tabs clickable #86 (@pomber)
@code-hike/classer, @code-hike/mini-browser, @code-hike/mini-editor, @code-hike/mini-frame, @code-hike/mini-terminal, @code-hike/player, @code-hike/scroller, @code-hike/scrollycoding, @code-hike/sim-user, @code-hike/smooth-code, @code-hike/smooth-column, storybook
- Add spring config #75 (@pomber)
@code-hike/mini-editor
- Fix copy paste #63 (@pomber)
- Start code-walk refactor (@pomber)
- Remove console logs (@pomber)
- Add stateful editor (@pomber)
- Focus by column (@pomber)
- Remove code-surfer (@pomber)
- Change editor padding (@pomber)
- Add minColumns prop (@pomber)
- Use vscode theme (@pomber)
- Add min col width (@pomber)
- Use line height (@pomber)
- Change line padding (@pomber)
- Remove line outline (@pomber)
- Fix null code (@pomber)
- Measure longest line for each step (@pomber)
- Add useMemo (@pomber)
- Recalculate code height (@pomber)
- Fix transition index (@pomber)
- Focus extremes (@pomber)
- Add focus to transtion (@pomber)
- Add useDimensions (@pomber)
- Start removing code-surfer (@pomber)
@code-hike/mini-editor, storybook
- Fix line jumps #61 (@pomber)
- Add horizontal center prop #58 (@pomber)
- Add scrollbars #49 (@pomber)
- Improve editor tab styles #38 (@pomber)
- Add button property to mini-editor (@pomber)
- Add stateful editor stories (@pomber)
- Add focus by column story (@pomber)
- Add mini-editor stories (@pomber)
@code-hike/mini-browser, @code-hike/scrollycoding
- Optional browser transition #59 (@pomber)
- Use link instead of hash to avoid double updates (@pomber)
- Extract mini browser (@pomber)
- Browser props (@pomber)
@code-hike/scrollycoding, storybook
- Use new sandpack #47 (@pomber)
- Make steps clickable (@pomber)
- Add hidden param to files (@pomber)
- Extend files from previous step (@pomber)
- Remove preset param from mdx steps (@pomber)
- Update to sandpack to alpha-27 (@pomber)
- Fix scrollytelling story (@pomber)
- Rename stepCode (@pomber)
- Add sandpack (@pomber)
- Add small screen styles (@pomber)
- Add scrollycoding story (@pomber)
storybook
- Better centering logic #45 (@pomber)
- Add storybook actions (@pomber)
- Move storybook (@pomber)
@code-hike/script
- Add release workflow #32 (@pomber)
@code-hike/classer, @code-hike/mini-browser, @code-hike/mini-editor, @code-hike/mini-frame, @code-hike/mini-terminal, @code-hike/player, @code-hike/scroller, @code-hike/scrollycoding, @code-hike/sim-user, @code-hike/smooth-column, storybook
- v0.0.0-4333a8b (@pomber)
- v0.0.0-6a4ea1c (@pomber)
- v0.0.0-e48fa74 (@pomber)
- v0.0.0-1f0ad83 (@pomber)
- v0.0.0-cde697c (@pomber)
@code-hike/scrollycoding
- Remove comments (@pomber)
- Fix links without href (@pomber)
- Add anchor component (@pomber)
- Add sandpack colors for loading screen (@pomber)
- Add links to csb (@pomber)
- Sandpack alpha-31 (@pomber)
- Split layouts (@pomber)
- Update to sandpack alpha-26 (@pomber)
- Fix focus margin (@pomber)
- Focus redesign (@pomber)
- Fix media query (@pomber)
- Add media query (@pomber)
- Add props (@pomber)
- Make sticker flex (@pomber)
- Refactor scrollycoding (@pomber)
- Bump sandpack (@pomber)
- Use sandpack alpha-15 (@pomber)
- Add docs (@pomber)
- Remove console log (@pomber)
- Add presets (@pomber)
- Read filenames and lang from mdx (@pomber)
- Extract hike (@pomber)
- Remove extra styles (@pomber)
- Add class to focus icon (@pomber)
@code-hike/mini-editor, @code-hike/scrollycoding, storybook
- Add scrollycoding mdx (@pomber)
@code-hike/classer
- Add link to thread (@pomber)
- Add readme (@pomber)
@code-hike/classer, @code-hike/mini-browser, @code-hike/mini-editor, @code-hike/mini-frame, @code-hike/scrollycoding, @code-hike/utils
- Add classer (@pomber)
@code-hike/scroller, storybook
- Fix intersection observer in Safari (@pomber)
@code-hike/mini-browser, @code-hike/mini-editor, @code-hike/mini-frame, @code-hike/mini-terminal, @code-hike/player, @code-hike/scroller, @code-hike/scrollycoding, @code-hike/sim-user, @code-hike/smooth-column, storybook, @code-hike/utils
- v0.0.0-aa6efee (@pomber)
- v0.0.0-b57b267 (@pomber)
- v0.0.0-33f17eb (@pomber)
- v0.0.0-211ab01 (@pomber)
- v0.0.0-6dfbe3d (@pomber)
- v0.0.0-133ab88 (@pomber)
- v0.0.0-4adbd70 (@pomber)
- Add scrollycoding package (@pomber)
@code-hike/mini-editor, @code-hike/scrollycoding
- Add file name to focus component (@pomber)
- New smooshpack version (@pomber)
- Auto resize (@pomber)
- Cascade code and preview props (@pomber)
- Add scrollycoding slots (@pomber)
@code-hike/mini-browser, @code-hike/scrollycoding, storybook
- Change focus style (@pomber)
@code-hike/mini-browser, storybook
- Add back mini browser (@pomber)
- Add browser transition (@pomber)
- Fix browser default url (@pomber)
@code-hike/mini-browser
- Add url tests (@pomber)
@code-hike/mini-editor, @code-hike/mini-frame
- Full width lines for easier text selection (@pomber)
@code-hike/mini-browser, @code-hike/mini-editor, @code-hike/mini-frame, @code-hike/mini-terminal, @code-hike/script, @code-hike/scrollycoding, storybook
- Use sass (@pomber)
@code-hike/mini-browser, @code-hike/mini-editor, @code-hike/mini-frame, @code-hike/mini-terminal, @code-hike/player, @code-hike/scroller, @code-hike/scrollycoding, @code-hike/sim-user, @code-hike/smooth-column, @code-hike/utils
- v0.0.0-8cbbd89 (@pomber)
@code-hike/mini-browser, @code-hike/mini-editor, @code-hike/mini-frame, storybook, @code-hike/utils
- Change styles (@pomber)
@code-hike/mini-browser, @code-hike/mini-editor, @code-hike/mini-frame, @code-hike/mini-terminal, @code-hike/player, @code-hike/scroller, @code-hike/sim-user, @code-hike/smooth-column
- v0.0.0-a3f5be4 (@pomber)
- Remove site (@pomber)
- Refactor scripts (@pomber)
- Change canary version (@pomber)
@code-hike/mini-browser, @code-hike/mini-editor, @code-hike/scroller
- Fix component types (@pomber)
@code-hike/mini-frame, storybook
- Make height required for mini-frames (@pomber)
- Run prettier (@pomber)
@code-hike/mini-browser, @code-hike/mini-editor, @code-hike/mini-frame, @code-hike/mini-terminal, @code-hike/player, @code-hike/script, @code-hike/scroller, @code-hike/sim-user, @code-hike/smooth-column
- v0.0.0-6a7ffe8 (@pomber)
- v0.0.0+6aadf0c (@pomber)
- Rename build to script (@pomber)
@code-hike/smooth-column, storybook
- Change smooth-column easing (@pomber)
@code-hike/scroller
- Fix intersection observer on Firefox (@pomber)
@code-hike/smooth-column
- Fix overshot (@pomber)
- Dynamic height in column (@pomber)
- Implement column (@pomber)
- Add column package (@pomber)
@code-hike/mini-editor, @code-hike/smooth-column
- Tween item height (@pomber)
@code-hike/mini-browser, @code-hike/smooth-column
- Remove warnings (@pomber)
@code-hike/player
- Add tokenizer (@pomber)
- Wrap video component (@pomber)

⚠️ Pushed to `next`

Update readme (@pomber)
Update readme.md (@pomber)
Add set up instructions (@pomber)
Add link (@pomber)
@code-hike/player, @code-hike/scrollycoding, @code-hike/sim-user, @code-hike/smooth-column
- Make old packages private (@pomber)
@code-hike/classer, @code-hike/mini-browser, @code-hike/mini-editor, @code-hike/mini-frame, @code-hike/mini-terminal, @code-hike/player, @code-hike/scroller, @code-hike/scrollycoding, @code-hike/sim-user, @code-hike/smooth-column
- v0.3.0-next.0 (@pomber)
storybook
- Make storybook private (@pomber)
@code-hike/script
- Add auto (@pomber)
@code-hike/classer, @code-hike/mini-browser, @code-hike/mini-editor, @code-hike/mini-frame, @code-hike/mini-terminal, @code-hike/player, @code-hike/script, @code-hike/scroller, @code-hike/scrollycoding, @code-hike/sim-user, @code-hike/smooth-column
- Add lerna (@pomber)

🏠 Internal

Bump auto version #35 (@pomber)
storybook
- Add Chromatic #70 (@pomber)
@code-hike/mini-editor, @code-hike/smooth-code
- Extract smooth-code package #69 (@pomber)
@code-hike/mini-editor, @code-hike/scrollycoding, storybook
- Rename editor components #56 (@pomber)
@code-hike/classer, @code-hike/mini-browser, @code-hike/mini-editor, @code-hike/mini-frame, @code-hike/mini-terminal, @code-hike/player, @code-hike/script, @code-hike/scroller, @code-hike/scrollycoding, @code-hike/sim-user, @code-hike/smooth-column
- Better release log #41 (@pomber)

📝 Documentation

@code-hike/mini-browser, storybook
- Add storybook docs #71 (@pomber)

Authors: 1

Rodrigo Pombo (@pomber)

rotev · 2021-12-26T19:51:54Z

Thanks @pomber! I tried to embed the package in my project, and it seems to be working sort of, although the steps descriptions are placed underneath the controls – I don't know if that's intended.

Also, I simply pasted all the npm install commands in the terminal and most of them failed. It still worked though 🤷‍♀️

It's good to see a different way of composing the beautiful code transitions. Personally I'm looking for something different. If I'll have time I might try to hack it next week. This PR seems like a good inspiration.

pomber · 2021-12-27T14:06:45Z

Hi @rotev, not sure what are you talking about. What npm install? what are you trying to do?

github-actions · 2022-03-03T18:18:20Z

🚀 PR was released in v0.3.0 🚀

Add slideshow component

1f33495

pomber added minor release PR created automatically for new releases labels Dec 26, 2021

pomber added 2 commits December 27, 2021 22:19

Fix zoom

dea83e9

Better small mini-browser

4abcdea

pomber merged commit 9d682d6 into next Dec 27, 2021

pomber deleted the slides branch December 27, 2021 21:46

github-actions bot added the prerelease label Dec 27, 2021

This was referenced Jan 7, 2022

Allow empty lang #103

Merged

Fix annotation regex #105

Merged

github-actions bot mentioned this pull request Jan 16, 2022

Line numbers #111

Merged

This was referenced Feb 5, 2022

Better default styles #116

Merged

Fix firefox copypasting #124

Merged

Handle invalid language #126

Merged

This was referenced Feb 15, 2022

Add color-scheme CSS #129

Merged

Changes style property to fix 'Unsupported style property color-scheme' #134

Merged

This was referenced Feb 22, 2022

Better errors #135

Merged

Add autoImport setting #137

Merged

Better sections #139

Merged

github-actions bot mentioned this pull request Mar 3, 2022

Fix quirks mode height #143

Merged

github-actions bot added released and removed prerelease labels Mar 3, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Slideshow component #99

Slideshow component #99

pomber commented Dec 26, 2021 •

edited by github-actions bot

Loading

rotev commented Dec 26, 2021

pomber commented Dec 27, 2021

github-actions bot commented Mar 3, 2022

Slideshow component #99

Slideshow component #99

Conversation

pomber commented Dec 26, 2021 • edited by github-actions bot Loading

Version

🚀 Enhancement

🐛 Bug Fix

⚠️ Pushed to next

🏠 Internal

📝 Documentation

Authors: 1

rotev commented Dec 26, 2021

pomber commented Dec 27, 2021

github-actions bot commented Mar 3, 2022

pomber commented Dec 26, 2021 •

edited by github-actions bot

Loading

⚠️ Pushed to `next`