Routes for community

spx-gui/src/pages/.eslintrc.cjs

@@ -0,0 +1,9 @@
+/* eslint-env node */
+module.exports = {
+  extends: ['../../.eslintrc.cjs'],
+  rules: {
+    // Page components will not be used by name in other components' template.
+    // Disable this rule to simplify naming of page components.
+    'vue/multi-word-component-names': 'off'
+  }
+}

spx-gui/src/pages/community/explore.vue

@@ -0,0 +1,3 @@
+<template>
+  <div>Explore</div>
+</template>

spx-gui/src/pages/community/home.vue

@@ -0,0 +1,3 @@
+<template>
+  <div>Home</div>
+</template>

spx-gui/src/pages/community/index.vue

@@ -0,0 +1,4 @@
+<template>
+  <header>Community Navbar</header>
+  <router-view />
+</template>

spx-gui/src/pages/community/project.vue

@@ -0,0 +1,22 @@
+<template>
+  <RunnerContainer v-if="project != null" mode="share" :project="project" />
+  <UILoading :visible="project == null" cover />
+</template>
+
+<script setup lang="ts">
+import { useAsyncComputed } from '@/utils/utils'
+import { Project } from '@/models/project'
+import RunnerContainer from '@/components/project/runner/RunnerContainer.vue'
+import { UILoading } from '@/components/ui'
+
+const props = defineProps<{
+  owner: string
+  name: string
+}>()
+
+const project = useAsyncComputed(async () => {
+  const p = new Project()
+  await p.loadFromCloud(props.owner, props.name)
+  return p
+})
+</script>

spx-gui/src/pages/community/projects.vue

@@ -0,0 +1,3 @@
+<template>
+  <div>Projects</div>
+</template>

spx-gui/src/pages/community/user/followers.vue

@@ -0,0 +1,3 @@
+<template>
+  <div>Followers</div>
+</template>

spx-gui/src/pages/community/user/following.vue

@@ -0,0 +1,3 @@
+<template>
+  <div>Following</div>
+</template>

spx-gui/src/pages/community/user/index.vue

@@ -0,0 +1,10 @@
+<template>
+  <h2>User {{ name }}</h2>
+  <router-view />
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  name: string
+}>()
+</script>

spx-gui/src/pages/community/user/likes.vue

@@ -0,0 +1,3 @@
+<template>
+  <div>Likes</div>
+</template>

spx-gui/src/pages/community/user/overview.vue

@@ -0,0 +1,3 @@
+<template>
+  <div>Overview</div>
+</template>

spx-gui/src/pages/community/user/projects.vue

@@ -0,0 +1,3 @@
+<template>
+  <div>Projects</div>
+</template>

spx-gui/src/components/editor/EditorHomepage.vue → spx-gui/src/pages/editor/index.vue

@@ -18,6 +18,7 @@
         </EditorContextProvider>
       </template>
       <template v-else>
+        <!-- TODO: remove me -->
         <div class="my-projects">
           <div class="header">
             {{ $t({ en: 'My projects', zh: '我的项目' }) }}
@@ -43,13 +44,8 @@ import { useRouter } from 'vue-router'
 import type { ProjectData } from '@/apis/project'
 import { useUserStore } from '@/stores'
 import { AutoSaveMode, Project } from '@/models/project'
-import TopNav from '@/components/top-nav/TopNav.vue'
-import ProjectList from '@/components/project/ProjectList.vue'
-import { useCreateProject } from '@/components/project'
 import { getProjectEditorRoute } from '@/router'
 import { useMessageHandle, useQuery } from '@/utils/exception'
-import EditorContextProvider from './EditorContextProvider.vue'
-import ProjectEditor from './ProjectEditor.vue'
 import { clear } from '@/models/common/local'
 import {
   UIButton,
@@ -61,6 +57,11 @@ import {
 } from '@/components/ui'
 import { useI18n } from '@/utils/i18n'
 import { useNetwork } from '@/utils/network'
+import TopNav from '@/components/top-nav/TopNav.vue'
+import EditorContextProvider from '@/components/editor/EditorContextProvider.vue'
+import ProjectEditor from '@/components/editor/ProjectEditor.vue'
+import ProjectList from '@/components/project/ProjectList.vue'
+import { useCreateProject } from '@/components/project'
 
 const LOCAL_CACHE_KEY = 'GOPLUS_BUILDER_CACHED_PROJECT'
 

spx-gui/src/router.ts

@@ -5,27 +5,92 @@ export function getProjectEditorRoute(projectName: string) {
   return `/editor/${projectName}`
 }
 
+export function getProjectPageRoute(owner: string, name: string) {
+  return `/project/${encodeURIComponent(owner)}/${encodeURIComponent(name)}`
+}
+
+export type UserTab = 'overview' | 'projects' | 'likes' | 'followers' | 'following'
+
+export function getUserPageRoute(name: string, tab: UserTab = 'overview') {
+  const base = `/user/${encodeURIComponent(name)}`
+  if (tab === 'overview') return base
+  return `${base}/${tab}`
+}
+
 export function getProjectShareRoute(owner: string, name: string) {
-  return `/share/${encodeURIComponent(owner)}/${encodeURIComponent(name)}`
+  return getProjectPageRoute(owner, name)
 }
 
 const routes: Array<RouteRecordRaw> = [
-  { path: '/', redirect: '/editor' },
+  {
+    path: '/',
+    component: () => import('@/pages/community/index.vue'),
+    children: [
+      {
+        path: '/',
+        component: () => import('@/pages/community/home.vue')
+      },
+      {
+        path: '/explore',
+        component: () => import('@/pages/community/explore.vue')
+      },
+      {
+        path: '/projects',
+        component: () => import('@/pages/community/projects.vue')
+      },
+      {
+        path: '/user/:name',
+        component: () => import('@/pages/community/user/index.vue'),
+        props: true,
+        children: [
+          {
+            path: '',
+            component: () => import('@/pages/community/user/overview.vue')
+          },
+          {
+            path: 'projects',
+            component: () => import('@/pages/community/user/projects.vue')
+          },
+          {
+            path: 'likes',
+            component: () => import('@/pages/community/user/likes.vue')
+          },
+          {
+            path: 'followers',
+            component: () => import('@/pages/community/user/followers.vue')
+          },
+          {
+            path: 'following',
+            component: () => import('@/pages/community/user/following.vue')
+          }
+        ]
+      },
+      {
+        path: '/project/:owner/:name',
+        component: () => import('@/pages/community/project.vue'),
+        props: true
+      }
+    ]
+  },
   {
     path: '/editor',
-    component: () => import('@/components/editor/EditorHomepage.vue')
+    redirect: '/'
   },
   {
     path: '/editor/:projectName',
-    component: () => import('@/components/editor/EditorHomepage.vue')
+    component: () => import('@/pages/editor/index.vue')
+  },
+  {
+    path: '/callback', // TODO: remove me
+    redirect: '/sign-in/callback'
   },
   {
-    path: '/callback',
-    component: () => import('@/components/SigninCallback.vue')
+    path: '/sign-in/callback',
+    component: () => import('@/pages/sign-in/callback.vue')
   },
   {
     path: '/share/:owner/:name',
-    component: () => import('@/components/share/SharePage.vue')
+    redirect: (to) => getProjectPageRoute(to.params.owner as string, to.params.name as string)
   }
 ]