feat: link to root page

Author: DrJume

.github/workflows/deploy.yml

@@ -0,0 +1,45 @@
+name: Deploy
+
+on:
+  push:
+    branches: [$default-branch]
+  workflow_dispatch:
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+concurrency:
+  group: 'deploy'
+  cancel-in-progress: false
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: pnpm install
+        uses: falcondev-it/.github/actions/pnpm-install@master
+
+      - name: Setup Pages
+        uses: actions/configure-pages@v5
+
+      - name: Build
+        run: pnpm run build
+
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: ./dist
+
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+
+    runs-on: ubuntu-latest
+    needs: build
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4

.prettierignore

@@ -1,10 +1,5 @@
 dist/
-.nuxt/
-.nitro/
-.output/
-.temp/
+.vitepress/cache/
 node_modules/
-.data/
-drizzle/
 
-pnpm-lock.yaml
+pnpm-lock.yaml

.vitepress/config.ts

@@ -40,4 +40,5 @@ export default defineConfigWithDefaults({
   themeConfig: {
     logo: '/logo.svg',
   },
+  srcExclude: ['./packages/'],
 })

.vitepress/theme/CustomLayout.vue

@@ -7,12 +7,10 @@ import DefaultTheme, { VPFeatures } from 'vitepress/theme'
 const { Layout } = DefaultTheme
 
 const { frontmatter: fm } = useData()
-
-const origin = window.location.origin
-console.log('origin', origin, fm.value['grouped-features'])
+const origin = import.meta.env.SSR ? '' : window.location.origin
 const groupedFeatures = computed(() =>
   groupBy(
-    fm.value['grouped-features'].map((feature) => ({
+    ((fm.value['groupedFeatures'] as any[])?.map((feature) => ({
       ...feature,
       link: origin + feature.link,
       target: '_self',
@@ -21,20 +19,38 @@ const groupedFeatures = computed(() =>
         ...feature.icon,
         src: origin + feature.icon.src,
       },
-    })) as { group?: string }[],
+    })) ?? []) as { group?: string }[],
     prop('group'),
   ),
 )
 </script>
 
 <template>
   <Layout>
+    <template #nav-bar-title-before>
+      <div class="header-title-prefix" v-if="!fm['hideRootLink']">
+        <a href="/" target="_self">@falcondev-oss</a>
+        <span style="font-size: 1.5rem">/</span>
+      </div>
+    </template>
     <template #home-features-after>
-      <VPFeatures
-        v-for="(features, idx) of groupedFeatures"
-        :features="features"
-        :style="{ marginTop: idx === 0 ? 0 : '8px' }"
-      />
+      <VPFeatures v-for="(features, group) of groupedFeatures" :features="features" />
     </template>
   </Layout>
 </template>
+
+<style>
+.header-title-prefix {
+  display: flex;
+  gap: 0.25rem;
+  color: var(--vp-c-text-3);
+  font-weight: 600;
+  margin-right: 0.75rem;
+}
+
+.header-title-prefix > a:hover {
+  text-underline-offset: 0.4rem;
+  text-decoration-thickness: 0.1rem !important;
+  text-decoration: underline;
+}
+</style>

.vitepress/theme/custom.css

@@ -0,0 +1,13 @@
+:root {
+  --vp-home-hero-name-color: transparent;
+  --vp-home-hero-name-background: -webkit-linear-gradient(120deg, #7e2ffc 30%, #59befe);
+
+  --vp-c-brand-1: #7356fd;
+  --vp-c-brand-2: var(--vp-c-purple-2);
+  --vp-c-brand-3: var(--vp-c-purple-3);
+  --vp-c-brand-soft: var(--vp-c-purple-soft);
+}
+
+@view-transition {
+  navigation: auto;
+}

.vitepress/theme/index.ts

@@ -1,4 +1,5 @@
 import DefaultTheme from 'vitepress/theme'
+import './custom.css'
 import 'virtual:group-icons.css'
 import CustomLayout from './CustomLayout.vue'
 

default-config.ts

@@ -6,7 +6,9 @@ export function defineConfigWithDefaults(config: UserConfig<DefaultTheme.Config>
   return defu(
     config,
     defineConfig({
+      outDir: new URL('./dist' + (config.base ?? ''), import.meta.url).pathname,
       vite: {
+        // @ts-expect-error plugin type
         plugins: [groupIconVitePlugin()],
       },
       markdown: {

eslint.config.js

@@ -1,22 +1,9 @@
 // @ts-check
 import eslintConfig from '@louishaftmann/eslint-config'
-import tanstackQueryPlugin from '@tanstack/eslint-plugin-query'
 
 export default eslintConfig({
-  nuxt: true,
+  nuxt: false,
   tsconfigPath: './tsconfig.json',
+}).append({
+  ignores: ['node_modules/', 'dist/', './**/.vitepress/cache/', 'pnpm-lock.yaml'],
 })
-  .append(tanstackQueryPlugin.configs['flat/recommended'])
-  .append({
-    ignores: [
-      'node_modules/',
-      'dist/',
-      '.nuxt/',
-      '.nitro/',
-      '.output/',
-      '.temp/',
-      '.data/',
-      'drizzle/',
-      'pnpm-lock.yaml',
-    ],
-  })

index.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="vite/client" />
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv
+}

index.md

@@ -3,8 +3,8 @@ layout: home
 
 hero:
   name: falconDev
-  text: Open-Source packages
-  tagline: Focusing on type safety and developer experience
+  text: Open-Source
+  tagline: Outstanding Type-Safety and Developer Experience without compromise.
   image:
     src: /logo.svg
     alt: falconDev
@@ -16,25 +16,28 @@ hero:
       text: Sponsors
       link: https://github.com/sponsors/falcondev-oss
 
-grouped-features:
+hideRootLink: true
+groupedFeatures:
   - title: Caps
-    details: Type-safe access control made simple
+    details: Readable access control logic with generators
     link: '/caps/'
     linkText: Learn more
     group: 0
     icon:
       src: /caps/logo.svg
       alt: Caps
+
   - title: Form
-    details: Type-safe form handling made simple
+    details: Reactive form state management & validation
     link: '/form/'
     linkText: Learn more
     group: 0
     icon:
       src: /form/logo.svg
       alt: Form
+
   - title: Lang
-    details: Type-safe form handling made simple
+    details: i18n with convenient in-editor preview
     link: '/lang/'
     linkText: Learn more
     group: 0
@@ -43,7 +46,7 @@ grouped-features:
       alt: Lang
 
   - title: tRPC Vue Query
-    details: Type-safe form handling made simple
+    details: TanStack Vue-Query client for tRPC
     link: '/trpc-vue-query/'
     linkText: Learn more
     group: 1
@@ -52,15 +55,16 @@ grouped-features:
       alt: tRPC Vue Query
 
   - title: GHA Cache Server
-    details: Type-safe form handling made simple
+    details: Self-Hosted Cache Server for GitHub Actions
     link: '/gha-cache-server/'
     linkText: Learn more
     group: 1
     icon:
       src: /gha-cache-server/logo.svg
       alt: GHA Cache Server
+
   - title: util
-    details: Type-safe form handling made simple
+    details: Collection of utility functions and types
     link: '/util/'
     linkText: Learn more
     group: 2
@@ -69,15 +73,16 @@ grouped-features:
       alt: util
 
   - title: configs
-    details: Type-safe form handling made simple
+    details: Our opinionated configs for development tools
     link: '/configs/'
     linkText: Learn more
     group: 2
     icon:
       src: /configs/logo.svg
       alt: configs
+
   - title: nitro-trpc-event-handler
-    details: Type-safe form handling made simple
+    details: tRPC integration for Nitro backends
     link: '/nitro-trpc-event-handler/'
     linkText: Learn more
     group: 2
@@ -86,7 +91,7 @@ grouped-features:
       alt: nitro-trpc-event-handler
 
   - title: expo-event-source-polyfill
-    details: Type-safe form handling made simple
+    details: A polyfill for the EventSource API in Expo using `expo/fetch`
     link: '/expo-event-source-polyfill/'
     linkText: Learn more
     group: 2