Skip to content

Commit 494653c

Browse files
pbekpbek
committed
#3414 webpage: fix screenshot carousel loading
Signed-off-by: Patrizio Bekerle <[email protected]>
1 parent 68ab845 commit 494653c

File tree

3 files changed

+191
-136
lines changed

3 files changed

+191
-136
lines changed

‎webpage/src/.vuepress/client.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ import Poll from './components/Poll.vue'
1616
import BlogDate from './components/BlogDate.vue'
1717
import BlogIndex from './components/BlogIndex.vue'
1818
import ProfileCard from './components/ProfileCard.vue'
19+
import ScreenshotCarousel from './components/ScreenshotCarousel.vue'
1920

2021
export default defineClientConfig({
2122
enhance({ app, router, siteData }) {
@@ -36,6 +37,7 @@ export default defineClientConfig({
3637
app.component('BlogDate', BlogDate)
3738
app.component('BlogIndex', BlogIndex)
3839
app.component('ProfileCard', ProfileCard)
40+
app.component('ScreenshotCarousel', ScreenshotCarousel)
3941

4042
// Initialize Matomo Analytics (replaces vuepress-plugin-matomo)
4143
// Only run in browser environment

‎webpage/src/.vuepress/components/ScreenshotCarousel.vue‎

Lines changed: 188 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,188 @@
1+
<template>
2+
<v-carousel
3+
v-if="isMounted"
4+
:key="carouselKey"
5+
cycle
6+
show-arrows-on-hover
7+
height="auto"
8+
>
9+
<v-carousel-item>
10+
<img src="/screenshots/screenshot.png" alt="QOwnNotes screenshot" />
11+
<div class="sheet">
12+
Edit your notes with markdown highlighting, colored tags and subfolders
13+
</div>
14+
</v-carousel-item>
15+
<v-carousel-item>
16+
<img src="/screenshots/screenshot-minimal.png" alt="Minimal view" />
17+
<div class="sheet">
18+
Minimal default user interface that can be stripped even more
19+
</div>
20+
</v-carousel-item>
21+
<v-carousel-item>
22+
<img src="/screenshots/screenshot-vertical.png" alt="Vertical view" />
23+
<div class="sheet">
24+
View your notes in a vertical markdown view by moving the panels
25+
</div>
26+
</v-carousel-item>
27+
<v-carousel-item>
28+
<img
29+
src="/screenshots/screenshot-note-relations.png"
30+
alt="Note relations"
31+
/>
32+
<div class="sheet">Note relations panel</div>
33+
</v-carousel-item>
34+
<v-carousel-item>
35+
<img
36+
src="/screenshots/screenshot-portable-mode.png"
37+
alt="Portable mode"
38+
/>
39+
<div class="sheet">Portable mode for USB sticks</div>
40+
</v-carousel-item>
41+
<v-carousel-item>
42+
<img src="/screenshots/screenshot-1col.png" alt="One column" />
43+
<div class="sheet">All panels can be placed wherever you want</div>
44+
</v-carousel-item>
45+
<v-carousel-item>
46+
<img
47+
src="/screenshots/screenshot-darkmode.png"
48+
alt="screenshot darkmode"
49+
/>
50+
<div class="sheet">Dark mode</div>
51+
</v-carousel-item>
52+
<v-carousel-item>
53+
<img
54+
src="/screenshots/screenshot-distraction-free-mode.png"
55+
alt="screenshot-distraction-free-mode"
56+
/>
57+
<div class="sheet">Distraction free mode</div>
58+
</v-carousel-item>
59+
<v-carousel-item>
60+
<img
61+
src="/screenshots/screenshot-encrypted-note-decrypted.png"
62+
alt="Note encryption"
63+
/>
64+
<div class="sheet">Optional AES note encryption (also scriptable)</div>
65+
</v-carousel-item>
66+
<v-carousel-item>
67+
<img
68+
src="/screenshots/screenshot-encrypted-note.png"
69+
alt="Encrypted note"
70+
/>
71+
<div class="sheet">Encrypted notes are still text</div>
72+
</v-carousel-item>
73+
<v-carousel-item>
74+
<img src="/screenshots/screenshot-diff.png" alt="screenshot diff" />
75+
<div class="sheet">
76+
Show the difference between notes when it was changed externally
77+
</div>
78+
</v-carousel-item>
79+
<v-carousel-item>
80+
<img
81+
src="/screenshots/screenshot-export-print.png"
82+
alt="screenshot-export-print"
83+
/>
84+
<div class="sheet">Note PDF export and printing</div>
85+
</v-carousel-item>
86+
<v-carousel-item>
87+
<img
88+
src="/screenshots/screenshot-freedesktop-theme.png"
89+
alt="screenshot-freedesktop-theme"
90+
/>
91+
<div class="sheet">Icons via Freedesktop theme</div>
92+
</v-carousel-item>
93+
<v-carousel-item>
94+
<img
95+
src="/screenshots/screenshot-other-workspace.png"
96+
alt="screenshot-other-workspace"
97+
/>
98+
<div class="sheet">You can have different workspaces</div>
99+
</v-carousel-item>
100+
<v-carousel-item>
101+
<img src="/screenshots/screenshot-qml.png" alt="screenshot-qml" />
102+
<div class="sheet">Scriptable</div>
103+
</v-carousel-item>
104+
<v-carousel-item>
105+
<img src="/screenshots/screenshot-russian.png" alt="screenshot-russian" />
106+
<div class="sheet">Translated to many languages</div>
107+
</v-carousel-item>
108+
<v-carousel-item>
109+
<img
110+
src="/screenshots/screenshot-search-in-all-notes.png"
111+
alt="screenshot-search-in-all-notes"
112+
/>
113+
<div class="sheet">Search over all notes</div>
114+
</v-carousel-item>
115+
<v-carousel-item>
116+
<img
117+
src="/screenshots/screenshot-search-in-current-note.png"
118+
alt="screenshot-search-in-current-note"
119+
/>
120+
<div class="sheet">Search in the current note</div>
121+
</v-carousel-item>
122+
<v-carousel-item>
123+
<img
124+
src="/screenshots/screenshot-settings-note-folders.png"
125+
alt="screenshot-settings-note-folders"
126+
/>
127+
<div class="sheet">Able to use multiple note folders</div>
128+
</v-carousel-item>
129+
<v-carousel-item>
130+
<img src="/screenshots/screenshot-todo.png" alt="screenshot-todo" />
131+
<div class="sheet">Manage your Todo lists via CalDAV</div>
132+
</v-carousel-item>
133+
<v-carousel-item>
134+
<img src="/screenshots/screenshot-trash.png" alt="screenshot-trash" />
135+
<div class="sheet">Manage trashed notes on your Nextcloud server</div>
136+
</v-carousel-item>
137+
<v-carousel-item>
138+
<img
139+
src="/screenshots/screenshot-versioning.png"
140+
alt="screenshot-versioning"
141+
/>
142+
<div class="sheet">
143+
Manage your note versions on your Nextcloud server
144+
</div>
145+
</v-carousel-item>
146+
</v-carousel>
147+
</template>
148+
149+
<script setup>
150+
import { ref, onMounted, nextTick } from "vue";
151+
152+
const isMounted = ref(false);
153+
const carouselKey = ref(0);
154+
155+
onMounted(() => {
156+
// Use nextTick to ensure DOM is fully ready
157+
nextTick(() => {
158+
// Small delay to ensure Vuetify is fully initialized
159+
setTimeout(() => {
160+
isMounted.value = true;
161+
carouselKey.value = Date.now(); // Unique key to force re-render
162+
}, 100);
163+
});
164+
});
165+
</script>
166+
167+
<style scoped>
168+
.v-carousel {
169+
margin: 2rem 0;
170+
}
171+
172+
.v-carousel img {
173+
width: 100%;
174+
height: auto;
175+
display: block;
176+
}
177+
178+
.sheet {
179+
background: rgba(0, 0, 0, 0.7);
180+
color: white;
181+
padding: 1rem;
182+
text-align: center;
183+
position: absolute;
184+
bottom: 0;
185+
left: 0;
186+
right: 0;
187+
}
188+
</style>

‎webpage/src/getting-started/overview.md‎

Lines changed: 1 addition & 136 deletions
Original file line numberDiff line numberDiff line change
@@ -1,141 +1,6 @@
11
# Overview
22

3-
<template>
4-
<v-carousel cycle show-arrows-on-hover>
5-
<v-carousel-item>
6-
<img src="/screenshots/screenshot.png" alt="QOwnNotes screenshot" />
7-
<div class="sheet">
8-
Edit your notes with markdown highlighting, colored tags and subfolders
9-
</div>
10-
</v-carousel-item>
11-
<v-carousel-item>
12-
<img src="/screenshots/screenshot-minimal.png" alt="Minimal view" />
13-
<div class="sheet">
14-
Minimal default user interface that can be stripped even more
15-
</div>
16-
</v-carousel-item>
17-
<v-carousel-item>
18-
<img src="/screenshots/screenshot-vertical.png" alt="Vertical view" />
19-
<div class="sheet">
20-
View your notes in a vertical markdown view by moving the panels
21-
</div>
22-
</v-carousel-item>
23-
<v-carousel-item>
24-
<img src="/screenshots/screenshot-note-relations.png" alt="Note relations" />
25-
<div class="sheet">
26-
Note relations panel
27-
</div>
28-
</v-carousel-item>
29-
<v-carousel-item>
30-
<img src="/screenshots/screenshot-portable-mode.png" alt="Portable mode" />
31-
<div class="sheet">
32-
Portable mode for USB sticks
33-
</div>
34-
</v-carousel-item>
35-
<v-carousel-item>
36-
<img src="/screenshots/screenshot-1col.png" alt="One column" />
37-
<div class="sheet">
38-
All panels can be placed wherever you want
39-
</div>
40-
</v-carousel-item>
41-
<v-carousel-item>
42-
<img src="/screenshots/screenshot-darkmode.png" alt="screenshot darkmode" />
43-
<div class="sheet">
44-
Dark mode
45-
</div>
46-
</v-carousel-item>
47-
<v-carousel-item>
48-
<img src="/screenshots/screenshot-distraction-free-mode.png" alt="screenshot-distraction-free-mode" />
49-
<div class="sheet">
50-
Distraction free mode
51-
</div>
52-
</v-carousel-item>
53-
<v-carousel-item>
54-
<img src="/screenshots/screenshot-encrypted-note-decrypted.png" alt="Note encryption" />
55-
<div class="sheet">
56-
Optional AES note encryption (also scriptable)
57-
</div>
58-
</v-carousel-item>
59-
<v-carousel-item>
60-
<img src="/screenshots/screenshot-encrypted-note.png" alt="Encrypted note" />
61-
<div class="sheet">
62-
Encrypted notes are still text
63-
</div>
64-
</v-carousel-item>
65-
<v-carousel-item>
66-
<img src="/screenshots/screenshot-diff.png" alt="screenshot diff" />
67-
<div class="sheet">
68-
Show the difference between notes when it was changed externally
69-
</div>
70-
</v-carousel-item>
71-
<v-carousel-item>
72-
<img src="/screenshots/screenshot-export-print.png" alt="screenshot-export-print" />
73-
<div class="sheet">
74-
Note PDF export and printing
75-
</div>
76-
</v-carousel-item>
77-
<v-carousel-item>
78-
<img src="/screenshots/screenshot-freedesktop-theme.png" alt="screenshot-freedesktop-theme" />
79-
<div class="sheet">
80-
Icons via Freedesktop theme
81-
</div>
82-
</v-carousel-item>
83-
<v-carousel-item>
84-
<img src="/screenshots/screenshot-other-workspace.png" alt="screenshot-other-workspace" />
85-
<div class="sheet">
86-
You can have different workspaces
87-
</div>
88-
</v-carousel-item>
89-
<v-carousel-item>
90-
<img src="/screenshots/screenshot-qml.png" alt="screenshot-qml" />
91-
<div class="sheet">
92-
Scriptable
93-
</div>
94-
</v-carousel-item>
95-
<v-carousel-item>
96-
<img src="/screenshots/screenshot-russian.png" alt="screenshot-russian" />
97-
<div class="sheet">
98-
Translated to many languages
99-
</div>
100-
</v-carousel-item>
101-
<v-carousel-item>
102-
<img src="/screenshots/screenshot-search-in-all-notes.png" alt="screenshot-search-in-all-notes" />
103-
<div class="sheet">
104-
Search over all notes
105-
</div>
106-
</v-carousel-item>
107-
<v-carousel-item>
108-
<img src="/screenshots/screenshot-search-in-current-note.png" alt="screenshot-search-in-current-note" />
109-
<div class="sheet">
110-
Search in the current note
111-
</div>
112-
</v-carousel-item>
113-
<v-carousel-item>
114-
<img src="/screenshots/screenshot-settings-note-folders.png" alt="screenshot-settings-note-folders" />
115-
<div class="sheet">
116-
Able to use multiple note folders
117-
</div>
118-
</v-carousel-item>
119-
<v-carousel-item>
120-
<img src="/screenshots/screenshot-todo.png" alt="screenshot-todo" />
121-
<div class="sheet">
122-
Manage your Todo lists via CalDAV
123-
</div>
124-
</v-carousel-item>
125-
<v-carousel-item>
126-
<img src="/screenshots/screenshot-trash.png" alt="screenshot-trash" />
127-
<div class="sheet">
128-
Manage trashed notes on your Nextcloud server
129-
</div>
130-
</v-carousel-item>
131-
<v-carousel-item>
132-
<img src="/screenshots/screenshot-versioning.png" alt="screenshot-versioning" />
133-
<div class="sheet">
134-
Manage your note versions on your Nextcloud server
135-
</div>
136-
</v-carousel-item>
137-
</v-carousel>
138-
</template>
3+
<ScreenshotCarousel />
1394

1405
<v-divider />
1416

0 commit comments

Comments
 (0)