Skip to content

Commit d579e1f

Browse files
chacha912chacha912
authored
Add base path to render images properly with github pages baseurl (yorkie-team#14)
1 parent 6208294 commit d579e1f

16 files changed

+1163
-47
lines changed

‎.env.production

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
NEXT_PUBLIC_BASE_PATH='/homepage'

‎.github/workflows/nextjs.yml

+2
Original file line numberDiff line numberDiff line change
@@ -76,6 +76,8 @@ jobs:
7676
run: ${{ steps.detect-package-manager.outputs.runner }} next build
7777
- name: Static HTML export with Next.js
7878
run: ${{ steps.detect-package-manager.outputs.runner }} next export
79+
- name: Optimize all static images after the Next.js static export
80+
run: ${{ steps.detect-package-manager.outputs.runner }} next-image-export-optimizer
7981
- name: Upload artifact
8082
uses: actions/upload-pages-artifact@v1
8183
with:

‎components/Image.tsx

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import { ImageProps } from 'next/image';
2+
import ExportedImage from 'next-image-export-optimizer';
3+
import { prefix } from '@/utils/prefix';
4+
5+
export function Image({ src, alt, width, height, ...rest }: ImageProps) {
6+
return (
7+
<ExportedImage src={`${prefix}${src}`} alt={alt} className='next_image' width={width} height={height} {...rest} />
8+
);
9+
}

‎components/index.ts

+1
Original file line numberDiff line numberDiff line change
@@ -2,3 +2,4 @@ export * from './Layout';
22
export * from './CustomLink';
33
export * from './Navigator';
44
export * from './CodeBlock';
5+
export * from './Image';

‎docs/examples.mdx

+2-2
Original file line numberDiff line numberDiff line change
@@ -9,10 +9,10 @@ order: 60
99

1010
[CodePair](https://codepair.yorkie.dev) is Real-time collaborative code editor with brush tools for online coding interviews or meetings.
1111

12-
<img width='100%' alt='Yorkie CodePair' src='/assets/images/codepair.png' />
12+
![Yorkie CodePair](/assets/images/codepair.png)
1313

1414
### TodoMVC example
1515

1616
[TodoMVC Example](https://github.com/yorkie-team/yorkie-react-todomvc) is a realtime collaborative [TodoMVC](https://todomvc.com/) example using [CreateReactApp](https://reactjs.org/docs/create-a-new-react-app.html) and [Yorkie JS SDK](https://github.com/yorkie-team/yorkie-js-sdk).
1717

18-
<img width='100%' alt='TodoMVC Example' src='/assets/images/todomvc.gif' />
18+
![TodoMVC Example](/assets/images/todomvc.gif)

‎docs/internals/garbage-collection.mdx

+32-5
Original file line numberDiff line numberDiff line change
@@ -19,26 +19,53 @@ An example of garbage collection:
1919

2020
State 1:
2121

22-
<img src='/assets/images/garbage-collection-1.png' alt='state1' width='100%' style={{ maxWidth: '600px' }} />
22+
<Image
23+
alt='state1'
24+
src='/assets/images/garbage-collection-1.png'
25+
width={600}
26+
height={312}
27+
style={{ maxWidth: '600px' }}
28+
/>
2329

2430
In the initial state, both clients have `"ab"`.
2531

2632
State 2:
2733

28-
<img src='/assets/images/garbage-collection-2.png' alt='state2' width='100%' style={{ maxWidth: '600px' }} />
34+
<Image
35+
alt='state2'
36+
src='/assets/images/garbage-collection-2.png'
37+
width={600}
38+
height={318}
39+
style={{ maxWidth: '600px' }}
40+
/>
2941

30-
Client `c1` deletes `"b"`, which is recorded as a change with logical timestamp `3`. The text node of `"b"` can be referenced by remote, so it is only marked as tombstone. And the client `c1` sends change `3` to server through PushPull API and receives as a response that `min_synced_seq` is `2`. Since all clients did not receive the deletion `change 3`, the text node is not purged by garbage collection.
42+
Client `c1` deletes `"b"`, which is recorded as a change with logical timestamp `3`. The text node of `"b"` can be referenced
43+
by remote, so it is only marked as tombstone. And the client `c1` sends change `3` to server through PushPull API and receives
44+
as a response that `min_synced_seq` is `2`. Since all clients did not receive the deletion `change 3`, the text node is not
45+
purged by garbage collection.
3146

3247
Meanwhile, client `c2` inserts `"c"` after textnode `"b"`.
3348

3449
State 3:
3550

36-
<img src='/assets/images/garbage-collection-3.png' alt='state3' width='100%' style={{ maxWidth: '600px' }} />
51+
<Image
52+
alt='state3'
53+
src='/assets/images/garbage-collection-3.png'
54+
width={600}
55+
height={317}
56+
style={{ maxWidth: '600px' }}
57+
/>
3758

3859
Client `c2` pushes change `4` to server and receives as a response that `min_synced_seq` is `3`. After the client applies change `4`, the contents of document are changed to `ac`. This time, all clients have received change `3`, so textnode `"b"` is completely removed.
3960

4061
State 4:
4162

42-
<img src='/assets/images/garbage-collection-4.png' alt='state4' width='100%' style={{ maxWidth: '600px' }} />
63+
<Image
64+
alt='state4'
65+
src='/assets/images/garbage-collection-4.png'
66+
width={600}
67+
height={302}
68+
style={{ maxWidth: '600px' }}
69+
/>
4370

4471
Finally, after client `c1` receives change `4` from server, purges textnode `"b"` because it is no longer referenced remotely.

‎docs/tasks/monitoring-server.mdx

+1-1
Original file line numberDiff line numberDiff line change
@@ -50,4 +50,4 @@ Then, import the [default Yorkie dashboard template](https://github.com/yorkie-t
5050

5151
Sample dashboard:
5252

53-
<img src='/assets/images/dashboard.png' alt='dashboard' width='100%' style={{ maxWidth: '600px' }} />
53+
<Image alt='dashboard' src='/assets/images/dashboard.png' width={600} height={626} style={{ maxWidth: '600px' }} />

‎docs/tasks/peer-awareness.mdx

+7-1
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,13 @@ order: 53
77

88
Peer Awareness is a feature often required in collaborative applications. With Peer Awareness, we can display information such as names and colors of peers who are editing a Document together in the application. Example of Peer Awareness in [CodePair](https://codepair.yorkie.dev/):
99

10-
<img src='/assets/images/peer-awareness.png' alt='peer awareness' width='100%' style={{ maxWidth: '400px' }} />
10+
<Image
11+
alt='peer awareness'
12+
src='/assets/images/peer-awareness.png'
13+
width={400}
14+
height={136}
15+
style={{ maxWidth: '400px' }}
16+
/>
1117

1218
This page shows how to implement Peer Awareness in your application.
1319

‎next.config.js

+13
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,19 @@
22
const nextConfig = {
33
reactStrictMode: true,
44
swcMinify: true,
5+
images: {
6+
loader: 'custom',
7+
imageSizes: [128, 256, 384],
8+
deviceSizes: [640, 750, 1080, 1200, 1920, 2048, 3840],
9+
},
10+
env: {
11+
nextImageExportOptimizer_imageFolderPath: 'public/assets/images',
12+
nextImageExportOptimizer_exportFolderPath: 'out',
13+
nextImageExportOptimizer_quality: 75,
14+
nextImageExportOptimizer_storePicturesInWEBP: true,
15+
nextImageExportOptimizer_generateAndUseBlurImages: true,
16+
},
17+
basePath: process.env.NEXT_PUBLIC_BASE_PATH || '',
518
webpack: (config) => {
619
config.module.rules.push({
720
test: /\.svg$/i,

0 commit comments

Comments
 (0)