feat: Support news in home page

xmcl-keystone-ui/package.json

@@ -46,6 +46,7 @@
         "vue-router": "^3.6.5",
         "vue-virtual-scroll-list": "^2.3.4",
         "vuetify": "^2.6.13",
+        "vue-grid-layout": "^2.4.0",
         "vuex": "^3.6.2"
     },
     "devDependencies": {
@@ -77,4 +78,4 @@
         "vue-tsc": "^1.0.13",
         "windicss": "^3.5.6"
     }
-}
+}

xmcl-keystone-ui/src/composables/mojangNews.ts

@@ -0,0 +1,54 @@
+import { useRefreshable } from './refreshable'
+
+export interface PlayPageImage {
+  title: string
+  url: string
+}
+
+export interface NewsPageImage {
+  title: string
+  url: string
+  dimensions: {
+    width: number
+    height: number
+  }
+
+}
+export interface NewsItem {
+  title: string
+  tag: string
+  category: string
+  date: string
+  text: string
+  playPageImage: PlayPageImage
+  newsPageImage: NewsPageImage
+  readMoreLink: string
+  cardBorder: boolean
+  newsType: string[]
+  id: string
+}
+export function useMojangNews() {
+  const news = ref([] as NewsItem[])
+
+  const { refresh, refreshing, error } = useRefreshable(async() => {
+    const resp = await fetch('https://launchercontent.mojang.com/news.json')
+    const result: { version: number; entries: NewsItem[] } = await resp.json()
+    if (result.version === 1) {
+      const entries = result.entries.filter(e => e.category === 'Minecraft: Java Edition')
+      for (const e of entries) {
+        e.newsPageImage.url = new URL(e.newsPageImage.url, 'https://launchercontent.mojang.com').toString()
+        e.playPageImage.url = new URL(e.playPageImage.url, 'https://launchercontent.mojang.com').toString()
+      }
+      news.value = entries
+    } else {
+    // error
+    }
+  })
+
+  return {
+    news,
+    refresh,
+    refreshing,
+    error,
+  }
+}

xmcl-keystone-ui/src/global.d.ts

@@ -8,6 +8,11 @@ declare module 'vue-virtual-scroll-list' {
   export = component
 }
 
+declare module 'vue-grid-layout' {
+  export const GridLayout: import('vue').Component<any, any, any, { size: number; remain: number }>
+  export const GridItem: import('vue').Component<any, any, any, { w: number }>
+}
+
 declare module '@/assets/locales/index.json' {
   type Locale = {
     [range: string]: string

xmcl-keystone-ui/src/views/Home.vue

@@ -3,30 +3,21 @@
     class="flex flex-col home-page flex-1 min-h-0 overflow-auto max-h-full"
   >
     <HomeHeader
-      class="pt-10 pb-5 px-10"
+      class="pt-10 pb-5 px-10 sticky top-0 z-10"
+      :focus-mode="isFocusMode"
     />
+
     <template
       v-if="!isFocusMode"
     >
-      <v-divider class="mx-4" />
       <!-- This is to fix strange hover color issue... -->
       <v-divider
         class="border-transparent"
       />
-      <span
-        class="flex flex-wrap p-10 flex-grow-0 gap-3 items-start"
-      >
-        <HomeModCard />
-        <HomeResourcePacksCard />
-        <HomeShaderPackCard />
-        <HomeSavesCard />
-        <HomeServerStatusBar v-if="isServer" />
-      <!-- <HomeModrinthCard
-        v-if="instance.upstream && instance.upstream.type === 'modrinth-modpack'"
-        :path="instance.path"
-        :upstream="instance.upstream"
-        /> -->
-      </span>
+      <HomeCardHost
+        :is-server="isServer"
+        :instance="instance"
+      />
     </template>
 
     <HomeFocusFooter
@@ -40,8 +31,7 @@
     <HomeLaunchMultiInstanceDialog />
     <HomeLaunchStatusDialog />
     <HomeJavaIssueDialog />
-    <!-- <home-sync-dialog /> -->
-    <HomeInstallInstanceDialog />
+    <HomeInstanceUpdateDialog />
   </div>
 </template>
 
@@ -52,18 +42,14 @@ import { useInstanceIsServer } from '../composables/instance'
 import { useInstanceServerStatus } from '../composables/serverStatus'
 import AppGameExitDialog from './AppGameExitDialog.vue'
 import AppLaunchBlockedDialog from './AppLaunchBlockedDialog.vue'
+import HomeCardHost from './HomeCardHost.vue'
 import HomeFocusFooter from './HomeFocusFooter.vue'
 import HomeHeader from './HomeHeader.vue'
-import HomeInstallInstanceDialog from './HomeInstallInstanceDialog.vue'
+import HomeInstanceUpdateDialog from './HomeInstanceUpdateDialog.vue'
 import HomeJavaIssueDialog from './HomeJavaIssueDialog.vue'
 import HomeLaunchMultiInstanceDialog from './HomeLaunchMultiInstanceDialog.vue'
 import HomeLaunchStatusDialog from './HomeLaunchStatusDialog.vue'
 import HomeLogDialog from './HomeLogDialog.vue'
-import HomeModCard from './HomeModCard.vue'
-import HomeResourcePacksCard from './HomeResourcePacksCard.vue'
-import HomeSavesCard from './HomeSavesCard.vue'
-import HomeServerStatusBar from './HomeServerStatusBar.vue'
-import HomeShaderPackCard from './HomeShaderPackCard.vue'
 
 const router = useRouter()
 

xmcl-keystone-ui/src/views/HomeHeader.vue

@@ -23,7 +23,7 @@
       />
     </div>
     <div
-      class="flex align-end gap-3 flex-grow-0 flex-1 mt-4 "
+      class="flex gap-3 flex-grow-0 flex-1 mt-4 lg:flex-row flex-col "
     >
       <div
         class="flex flex-row items-start gap-3 flex-wrap flex-grow-0"
@@ -156,7 +156,6 @@
           </template>
           {{ t('baseSetting.title', 2) }}
         </v-tooltip>
-
         <HomeLaunchButton
           class="ml-4"
           :issue="issue"
@@ -166,6 +165,8 @@
         />
       </div>
     </div>
+
+    <v-divider />
   </div>
 </template>
 
@@ -184,6 +185,8 @@ import HomeHeaderMinecraftLabel from './HomeHeaderMinecraftLabel.vue'
 import HomeHeaderQuiltLabel from './HomeHeaderQuiltLabel.vue'
 import HomeLaunchButton from './HomeLaunchButton.vue'
 
+defineProps<{ focusMode: boolean }>()
+
 const { issue, task, path, refreshing, name, version, localVersion } = injection(kInstanceContext)
 const isInFocusMode = useInFocusMode()
 const { total, progress, pause, resume, status, name: taskName } = task

xmcl-keystone-ui/src/views/HomeNewsCard.vue

@@ -0,0 +1,26 @@
+<template>
+  <v-card
+    class="flex flex-col h-full max-h-full"
+  >
+    <v-img
+      :src="news.newsPageImage.url"
+    />
+    <v-card-title>
+      {{ news.title }}
+    </v-card-title>
+    <v-card-subtitle>
+      {{ news.date }}
+    </v-card-subtitle>
+    <v-card-text class="flex-grow">
+      {{ news.text }}
+    </v-card-text>
+  </v-card>
+</template>
+<script lang="ts" setup>
+import { NewsItem } from '@/composables/mojangNews'
+
+defineProps<{
+  news: NewsItem
+}>()
+
+</script>

xmcl-keystone-ui/src/windows/main/store.ts

@@ -15,6 +15,7 @@ export function createStore(): Store<any> {
     mutations: {
       syncStart(state: any, service: string) { },
     },
+    strict: import.meta.env.DEV,
   }
   const store = new Vuex.Store(options)
   return store

xmcl-keystone-ui/src/windows/main/vuetify.ts

@@ -1,17 +1,16 @@
-import { InjectionKey } from 'vue'
-import Vuetify, { Framework } from 'vuetify'
 import 'vuetify/dist/vuetify.min.css'
-import colors from 'vuetify/es5/util/colors'
 import CurseforgeIcon from '@/components/CurseforgeIcon.vue'
 import FabricIcon from '@/components/FabricIcon.vue'
 import ForgeIcon from '@/components/ForgeIcon.vue'
+import FTBIcon from '@/components/FTBIcon.vue'
 import JarFileIcon from '@/components/JarFileIcon.vue'
 import ModrinthIcon from '@/components/ModrinthIcon.vue'
 import PackageFileIcon from '@/components/PackageFileIcon.vue'
 import ZipFileIcon from '@/components/ZipFileIcon.vue'
-import zhHans from 'vuetify/src/locale/zh-Hans'
+import Vuetify from 'vuetify'
+import colors from 'vuetify/es5/util/colors'
 import ru from 'vuetify/src/locale/ru'
-import FTBIcon from '@/components/FTBIcon.vue'
+import zhHans from 'vuetify/src/locale/zh-Hans'
 
 const vuetify = new Vuetify({
   lang: {