|
11 | 11 | /> |
12 | 12 |
|
13 | 13 | <v-row align="center" class="text-left" justify="space-between"> |
14 | | - <v-col v-if="latestBlog" cols="12" md="7"> |
| 14 | + <v-col v-if="latestBlogs.length" cols="12" md="7"> |
15 | 15 | <v-card |
| 16 | + v-for="(blog, index) in latestBlogs" |
| 17 | + :key="index" |
| 18 | + :class="{ 'mb-8': index !== latestBlogs.length - 1 }" |
16 | 19 | class="pr-10 overflow-hidden" |
17 | 20 | color="transparent" |
18 | 21 | flat |
19 | 22 | > |
20 | | - <v-img |
21 | | - v-if="latestBlog.image" |
22 | | - :src="latestBlog.image" |
23 | | - gradient="to bottom, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0)" |
24 | | - max-height="150" |
25 | | - rounded="lg" |
26 | | - width="100%" |
27 | | - cover |
28 | | - /> |
29 | 23 |
|
30 | | - <v-card-subtitle class="pt-3 pb-1 text-subtitle-2 pl-0"> |
31 | | - {{ latestBlog.date }} |
| 24 | + <v-card-subtitle class="pt-3 pb-1 text-subtitle-2 pl-0 text-medium-emphasis d-inline-flex align-center ga-1"> |
| 25 | + <v-icon icon="$calendar" size="small" /> |
| 26 | + |
| 27 | + {{ blog.date }} |
32 | 28 | </v-card-subtitle> |
33 | 29 |
|
34 | 30 | <v-card-title class="text-pre-wrap pl-0 pt-0"> |
35 | | - {{ latestBlog.title }} |
| 31 | + {{ blog.title }} |
36 | 32 | </v-card-title> |
37 | 33 |
|
38 | 34 | <div class="text-medium-emphasis text-subtitle-1 pl-0"> |
39 | | - {{ latestBlog.shortDescription }} |
| 35 | + {{ blog.shortDescription }} |
40 | 36 | </div> |
41 | 37 |
|
| 38 | + <!-- <v-img |
| 39 | + v-if="blog.image" |
| 40 | + :src="blog.image" |
| 41 | + gradient="to bottom, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0)" |
| 42 | + max-height="150" |
| 43 | + rounded="lg" |
| 44 | + width="100%" |
| 45 | + cover |
| 46 | + /> --> |
| 47 | + |
42 | 48 | <v-card-text class="pl-0 pt-2"> |
43 | 49 | <div class="d-flex align-center ga-2 text-subtitle-2 text-medium-emphasis"> |
44 | | - <v-icon size="small">mdi-circle-edit-outline</v-icon> |
45 | | - {{ latestBlog.author }} |
| 50 | + <v-avatar :image="blog.avatar" size="32" /> |
| 51 | + |
| 52 | + {{ blog.author }} |
| 53 | + |
| 54 | + <v-spacer /> |
46 | 55 |
|
47 | 56 | <v-btn |
48 | | - :to="latestBlog.to" |
| 57 | + :to="blog.to" |
49 | 58 | append-icon="mdi-page-next" |
50 | 59 | class="text-none px-0 ml-5" |
51 | 60 | color="primary" |
|
66 | 75 | rounded="lg" |
67 | 76 | flat |
68 | 77 | > |
69 | | - <v-card-subtitle class="pt-5 text-body-2"> |
70 | | - {{ item.date }} |
| 78 | + <v-card-subtitle class="pt-5 text-caption text-medium-emphasis d-inline-flex align-center ga-1"> |
| 79 | + <v-icon icon="mdi-calendar" size="16" /> {{ item.date }} |
71 | 80 | </v-card-subtitle> |
72 | 81 |
|
73 | 82 | <v-card-title class="text-subtitle-1 pt-1"> |
74 | 83 | {{ item.title }} |
75 | 84 | </v-card-title> |
76 | 85 |
|
77 | | - <v-card-text :class="{ 'text-truncate': smAndDown}" class="text-medium-emphasis text-subtitle-1 py-0"> |
78 | | - {{ item.shortDescription }} |
| 86 | + <v-card-text |
| 87 | + :class="{ 'text-truncate': smAndDown }" |
| 88 | + class="text-medium-emphasis text-body-2 py-0" |
| 89 | + > |
| 90 | + {{ item.shortDescription?.substring(0, 115) + (item.shortDescription?.length > 300 ? '...' : '') }} |
79 | 91 | </v-card-text> |
80 | 92 |
|
81 | 93 | <v-card-text class="text-body-2 text-medium-emphasis pt-2"> |
82 | 94 | <div class="d-flex align-center ga-2 text-body-2 text-medium-emphasis"> |
83 | | - <v-icon size="small">mdi-circle-edit-outline</v-icon> |
| 95 | + <v-avatar :image="item.avatar" size="22" /> |
| 96 | + |
84 | 97 | {{ item.author }} |
85 | 98 |
|
| 99 | + <v-spacer /> |
| 100 | + |
86 | 101 | <v-btn |
87 | 102 | :to="item.to" |
88 | 103 | append-icon="mdi-page-next" |
89 | 104 | class="text-none px-0 ml-5" |
90 | 105 | color="primary" |
| 106 | + size="small" |
91 | 107 | text="Read more" |
92 | 108 | variant="plain" |
93 | 109 | /> |
|
112 | 128 | text="Read More Posts" |
113 | 129 | variant="flat" |
114 | 130 | /> |
115 | | - |
116 | 131 | </v-container> |
117 | 132 | </v-responsive> |
118 | 133 | </template> |
|
122 | 137 |
|
123 | 138 | const items = [ |
124 | 139 | { |
125 | | - image: 'https://cdn.vuetifyjs.com/docs/images/blog/october-2025-update/october-hero.png', |
| 140 | + title: 'December 2025 Update', |
| 141 | + image: 'https://cdn.vuetifyjs.com/docs/images/blog/december-2025-update/december-hero.png', |
| 142 | + shortDescription: 'December was our most productive month of 2025 with 522 commits across 16 repositories. The month delivered Vuetify 4.0.0-alpha.0 with CSS layers, six v3.11.x patches, the Vuetify CLI public release, Google OAuth for Vuetify One, PWA support across all ecosystem products, and 6 Vuetify0 releases with new composables including usePagination, useClickOutside, and useVirtual...', |
| 143 | + date: 'January 12, 2026', |
| 144 | + author: 'John Leider', |
| 145 | + avatar: 'https://cdn.vuetifyjs.com/docs/images/team/john.png', |
| 146 | + to: rpath('/blog/december-2025-update'), |
| 147 | + }, |
| 148 | + { |
| 149 | + title: 'Vuetify Project baseline with Nuxt and UnoCSS', |
| 150 | + shortDescription: `Let's explore a lean, production-ready setup for Nuxt application that combines Vuetify 3 with UnoCSS. By disabling Vuetify's default CSS bundles (basic colors and utility classes) and generating only the styles actually used, the resulting CSS footprint shrinks dramatically. We will ensure the project foundation works with themes, typography, and breakpoints without compromises...`, |
| 151 | + date: 'December 22, 2025', |
| 152 | + author: 'Jacek Czarniecki', |
| 153 | + avatar: 'https://cdn.vuetifyjs.com/docs/images/team/j-sek.png', |
| 154 | + to: rpath('/blog/building-with-nuxt-and-unocss'), |
| 155 | + }, |
| 156 | + { |
| 157 | + title: 'November 2025 Update', |
| 158 | + image: 'https://cdn.vuetifyjs.com/docs/images/blog/november-2025-update/november-hero.png', |
| 159 | + shortDescription: 'November delivered Vuetify v3.11.0 (Harbinger) with VCalendar and VHotkey promoted from labs, new VTimePicker input variant, VDatePicker MD3 improvements, and significant CLI progress. J-Sek contributed an impressive 14 PRs while the v0 project hit 109 commits across 5 releases...', |
| 160 | + date: 'December 10, 2025', |
| 161 | + author: 'John Leider', |
| 162 | + avatar: 'https://cdn.vuetifyjs.com/docs/images/team/john.png', |
| 163 | + to: rpath('/blog/november-2025-update'), |
| 164 | + }, |
| 165 | + { |
126 | 166 | title: 'October 2025 Update', |
127 | | - shortDescription: 'October\'s development cycle focused on polish and developer experience. We delivered critical accessibility improvements with enhanced focus trap functionality, optimized VDataTable performance, and refined components across the board. The month also saw the launch of Vuetify Link and significant updates to the Vuetify MCP server.', |
| 167 | + image: 'https://cdn.vuetifyjs.com/docs/images/blog/october-2025-update/october-hero.png', |
| 168 | + shortDescription: `October focused on refinement and reliability, delivering critical accessibility improvements with enhanced focus trap functionality, optimized VDataTable performance for large datasets, and refined components across the board. The month also saw the launch of Vuetify Link, our new URL shortening service, and significant updates to the Vuetify MCP server with HTTP transport support. We made substantial progress on v0 composables, laying the groundwork for Vuetify 4.0...`, |
128 | 169 | date: 'Nov 11, 2025', |
129 | 170 | author: 'John Leider', |
| 171 | + avatar: 'https://cdn.vuetifyjs.com/docs/images/team/john.png', |
130 | 172 | to: rpath('/blog/october-2025-update'), |
131 | 173 | }, |
132 | 174 | { |
133 | 175 | title: 'September 2025 Update', |
134 | | - shortDescription: 'Assembling the building blocks for Vuetify\'s next phase with our new Figma UI Kit and foundational v0 composables.', |
| 176 | + image: 'https://cdn.vuetifyjs.com/docs/images/blog/september-2025-update/september-hero.png', |
| 177 | + shortDescription: `September marks significant progress as we assemble the building blocks for Vuetify's next phase. From revolutionary design-to-development workflows with our new Figma UI Kit to foundational v0 composables, September has been about connecting the pieces that will define the future of Vue development. This update includes the release of v3.10.0 (Argo), updated Figma UI Kit, new Vuetify0 composables, and over 60 bug fixes and features...`, |
135 | 178 | date: 'Oct 12, 2025', |
136 | 179 | author: 'John Leider', |
| 180 | + avatar: 'https://cdn.vuetifyjs.com/docs/images/team/john.png', |
137 | 181 | to: rpath('/blog/september-2025-update'), |
138 | 182 | }, |
139 | 183 | { |
140 | 184 | title: 'August 2025 Update', |
141 | | - shortDescription: 'Vuetify0 pre-alpha release, redesigned issues page, and powerful new components.', |
| 185 | + image: 'https://cdn.vuetifyjs.com/docs/images/blog/august-2025-update/august-hero.png', |
| 186 | + shortDescription: `August marks a pivotal moment in Vuetify's evolution as we prepare to release the pre-alpha of Vuetify0 (v0), launch our redesigned issues page, and continue delivering powerful components and improvements. This month brings exciting developments including the "Mastering Vuetify Theming" webinar recap, VEditor final testing phase, free premium themes for personal use, and significant framework updates with 87 merged pull requests...`, |
142 | 187 | date: 'Sep 9, 2025', |
143 | 188 | author: 'John Leider', |
| 189 | + avatar: 'https://cdn.vuetifyjs.com/docs/images/team/john.png', |
144 | 190 | to: rpath('/blog/august-2025-update'), |
145 | 191 | }, |
| 192 | + { |
| 193 | + title: 'July 2025 Update', |
| 194 | + image: 'https://cdn.vuetifyjs.com/docs/images/blog/july-2025-update/july-hero.png', |
| 195 | + shortDescription: 'July was a month of significant advancements in the Vuetify ecosystem, highlighted by the release of v3.9.0 (Zealot) and the promotion of VTreeview and VTimePicker from labs to core components. This update also includes a focus on component stability, bug fixes, and developer experience improvements, with subsequent patches up to v3.9.3...', |
| 196 | + date: 'August 6, 2025', |
| 197 | + author: 'John Leider', |
| 198 | + avatar: 'https://cdn.vuetifyjs.com/docs/images/team/john.png', |
| 199 | + to: rpath('/blog/july-2025-update'), |
| 200 | + }, |
146 | 201 | ] |
147 | 202 |
|
148 | | - const latestBlog = computed(() => smAndDown.value ? null : items[0]) |
149 | | - const remainingBlogs = computed(() => smAndDown.value ? items : items.slice(1)) |
| 203 | + const latestBlogs = computed(() => smAndDown.value ? [] : items.slice(0, 2)) |
| 204 | + const remainingBlogs = computed(() => smAndDown.value ? items.slice(0, 4) : items.slice(2, 6)) |
150 | 205 | </script> |
0 commit comments