Skip to content

Commit

Permalink
Add new "About" section in docs
Browse files Browse the repository at this point in the history
  • Loading branch information
simonihmig committed Sep 27, 2024
1 parent 43d44bc commit e172e3c
Show file tree
Hide file tree
Showing 5 changed files with 83 additions and 1 deletion.
23 changes: 23 additions & 0 deletions apps/docs/.vitepress/config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,29 @@ export default defineConfig({
text: 'Image CDNs',
link: '/cdn/',
},

{
text: 'About',
// link: '/usage/concepts',
items: [
{
text: 'Releases',
link: 'https://github.com/simonihmig/responsive-image/releases',
},
{
text: 'Me',
link: '/me',
},
{
text: 'History',
link: '/history',
},
{
text: 'Credits',
link: '/credits',
},
],
},
],

sidebar: [
Expand Down
11 changes: 11 additions & 0 deletions apps/docs/src/credits.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
# Credit where credit is due...

I would like to thank the following people for their direct or indirect contributions to this project:

- [Andreas Schacht](https://github.com/andreasschacht) for his fantastic work on the initial version of `ember-responsive-image`, the predecessor of this project.

- [Malte Ubl](https://github.com/cramforce) for his blog post [Maximally optimizing image loading for the web in 2021](https://www.industrialempathy.com/posts/image-optimizations/) that inspired many of the image optimization techniques used here.

- [Lovell Fuller](https://github.com/lovell) for [sharp](https://github.com/lovell/sharp), the library that is powering all image processing of local images.

- [Jonas Kruckenberg](https://github.com/JonasKruckenberg) for [imagetools](https://github.com/JonasKruckenberg/imagetools) to support (query) parameter based image adjustments and effects.
2 changes: 1 addition & 1 deletion apps/docs/src/frameworks/index.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
# Frontend frameworks

The [image component](../usage/component.md) and other utilities are proved with framework specific packages:
The [image component](../usage/component.md) and other utilities are provided with framework specific packages:

- [Ember](./ember.md)

Expand Down
17 changes: 17 additions & 0 deletions apps/docs/src/history.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
# History of the project

This project has its roots in late 2016, when Andreas Schacht, my then co-worker, and [me](./me.md) started to work on `ember-responsive-image`. This came out of the need to render optimized responsive images in our framkework of choice [Ember.js](https://emberjs.com/), for client projects at [kaliber5](https://www.kaliber5.de), the consultancy that I co-founded.

As strong believers in open source software, and as this proved to be useful for others as well, we started the project in the open on GitHub, see the [first commit](https://github.com/simonihmig/responsive-image/commit/1718f0c6d113d21309cb3800338c944d5ba90943). Don't look too closely at the code though, 2016 was different! 😅

Over time it matured and improved. Feature-wise by adding support for e.g. next-gen image formats, Image CDNs or SSR (aka FastBoot in Ember world). Also much of the underlying implementation evolved, moving from invoking `ImageMagick` to using [`sharp`](https://sharp.pixelplumbing.com/), adopting Ember's [Octane](https://blog.emberjs.com/octane-is-here/) patterns (native classes, Glimmer components) and TypeScript.

But at some point it become obvious that we were running into a more fundamental technical problem, when [Embroider](https://github.com/embroider-build/embroider), Ember's next-gen build system, which is building a bridge towards adopting popular ecosystem build tools like webpack or Vite, was going to take over the very Ember-specific build system of Ember CLI. Alongside that came a new [v2 format](https://rfcs.emberjs.com/id/0507-embroider-v2-package-format/) to publish Ember addons. Previously, `ember-responsive-image` had the privilege of using the superpowers that v1 addons gave us, by being able to provide Ember runtime code (the component to render responsive images) _and_ plugging into the (legacy) Ember CLI build (for processing local images) _at the same time_. With the new v2 format, which are basically just static npm packages now that you import _runtime_ code from, this was not possible anymore. So what's next?

As Embroider embraced off-the-shelve build tools like [webpack](https://webpack.js.org/) and later [Vite](https://vitejs.dev/), this project basically had to do the same. Instead of tying our image processing into the legacy build system, we started to offer native [build-plugins](./build/index.md) for what Embroider uses already: webpack and Vite. These are now doing the heavy lifting, albeit in a completely frontend framework agnostic way!

This opened up the way to rethink the scope of this project: instead of being coupled to one specific framework, [Ember](https://emberjs.com/) (which I still love btw and encourage you to check out if you haven't lately!), this project started to move into a multi-framework project. Gone is the `ember-responsive-image` package, say hello to `@responsive-image/ember`, which is now a fully static lightweight v2 addon. Support for other frameworks is planned. Have ideas, or want to contribute? Feel free to raise an [issue](https://github.com/simonihmig/responsive-image/issues), [PR](https://github.com/simonihmig/responsive-image/pulls)'s are certainly very welcome as well! 😀

So stay tuned, the future is hopefully bright!

_PS. none of this would have been possible without the help of other people and building on the shoulders of giants, which I want to give [credit](credits.md) here!_
31 changes: 31 additions & 0 deletions apps/docs/src/me.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
<script setup>
import {
VPTeamPage,
VPTeamPageTitle,
VPTeamMembers
} from 'vitepress/theme'

const members = [
{
avatar: 'https://www.github.com/simonihmig.png',
name: 'Simon Ihmig',
title: 'Senior Engineer',
org: 'CrowdStrike',
links: [
{ icon: 'github', link: 'https://github.com/simonihmig' },
{ icon: 'linkedin', link: 'https://www.linkedin.com/in/simon-ihmig/' },
{ icon: { svg: '<svg width="568" height="501" viewBox="0 0 568 501" xmlns="http://www.w3.org/2000/svg"><path d="M123.121 33.6637C188.241 82.5526 258.281 181.681 284 234.873C309.719 181.681 379.759 82.5526 444.879 33.6637C491.866 -1.61183 568 -28.9064 568 57.9464C568 75.2916 558.055 203.659 552.222 224.501C531.947 296.954 458.067 315.434 392.347 304.249C507.222 323.8 536.444 388.56 473.333 453.32C353.473 576.312 301.061 422.461 287.631 383.039C285.169 375.812 284.017 372.431 284 375.306C283.983 372.431 282.831 375.812 280.369 383.039C266.939 422.461 214.527 576.312 94.6667 453.32C31.5556 388.56 60.7778 323.8 175.653 304.249C109.933 315.434 36.0535 296.954 15.7778 224.501C9.94525 203.659 0 75.2916 0 57.9464C0 -28.9064 76.1345 -1.61183 123.121 33.6637Z" /></svg>'}, link: 'https://bsky.app/profile/simonihmig.bsky.social' },
{ icon: 'mastodon', link: 'https://fosstodon.org/@simonihmig' },
{ icon: 'x', link: 'https://x.com/simonihmig' },
]
},
]
</script>

# About me

This project is brought to you by... me! 🙃

<VPTeamMembers
:members="members"
/>

0 comments on commit e172e3c

Please sign in to comment.