Fix frontend build (#509)

* Fix frontend build

* Add frontend CI

* Rename step

* Cache v4

* Fix lints

.github/workflows/frontend.yml

@@ -0,0 +1,52 @@
+name: "Frontend checks"
+
+on:
+  merge_group:
+  pull_request:
+  push:
+    branches:
+      - main
+  workflow_dispatch:
+
+jobs:
+  build:
+    name: Build frontend
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: DeterminateSystems/nix-installer-action@v4
+      - uses: DeterminateSystems/magic-nix-cache-action@main
+      - name: Get yarn cache directory path
+        id: yarn-cache-dir-path
+        run: echo "dir=$(yarn cache dir)" >> $GITHUB_OUTPUT
+      - uses: actions/cache@v4
+        id: yarn-cache
+        with:
+          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
+          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-yarn-
+      - name: Build frontend
+        working-directory: ./kitsune-fe
+        run: nix develop ..#frontend --command bash -c "yarn && yarn build"
+
+  lints:
+    name: Check lints
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: DeterminateSystems/nix-installer-action@v4
+      - uses: DeterminateSystems/magic-nix-cache-action@main
+      - name: Get yarn cache directory path
+        id: yarn-cache-dir-path
+        run: echo "dir=$(yarn cache dir)" >> $GITHUB_OUTPUT
+      - uses: actions/cache@v4
+        id: yarn-cache
+        with:
+          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
+          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-yarn-
+      - name: Run linter
+        working-directory: ./kitsune-fe
+        run: nix develop ..#frontend --command bash -c "yarn && yarn lint"

kitsune-fe/src/components/BaseTimeline.vue

@@ -44,7 +44,7 @@
   import { ref } from 'vue';
   import { DynamicScroller, DynamicScrollerItem } from 'vue-virtual-scroller';
 
-  import Post, { Post as PostType } from './Post.vue';
+  import Post, { Post as PostType } from './PostComponent.vue';
 
   const props = defineProps<{
     posts: PostType[];

kitsune-fe/src/i18n.ts

@@ -2,14 +2,8 @@ import { FluentBundle } from '@fluent/bundle';
 
 import { createFluentVue } from 'fluent-vue';
 
-import enCyberpunkMessages from './locales/en-cyberpunk.ftl';
-import enMessages from './locales/en.ftl';
-
 const enBundle = new FluentBundle('en');
-enBundle.addResource(enMessages);
-
 const enCyberpunkBundle = new FluentBundle('en-cyberpunk');
-enCyberpunkBundle.addResource(enCyberpunkMessages);
 
 const fluent = createFluentVue({
   bundles: [enBundle],

kitsune-fe/src/views/MessagePage.vue

@@ -1,3 +1,5 @@
-<template></template>
+<template>
+  <div class="messages"></div>
+</template>
 
 <script lang="ts" setup></script>

kitsune-fe/src/views/NotificationPage.vue

@@ -1,3 +1,5 @@
-<template></template>
+<template>
+  <div class="notifications"></div>
+</template>
 
 <script lang="ts" setup></script>

kitsune-fe/src/views/PostPage.vue

@@ -14,7 +14,7 @@
 <script lang="ts" setup>
   import { useRoute } from 'vue-router';
 
-  import Post from '../components/Post.vue';
+  import Post from '../components/PostComponent.vue';
   import { getPostById } from '../graphql/post';
 
   const route = useRoute();

kitsune-fe/src/views/timeline/FederatedPage.vue

@@ -6,7 +6,7 @@
   import { ref, watch } from 'vue';
 
   import BaseTimeline from '../../components/BaseTimeline.vue';
-  import { Post } from '../../components/Post.vue';
+  import { Post } from '../../components/PostComponent.vue';
   import { MAX_UUID } from '../../consts';
   import { getPublic } from '../../graphql/timeline';
 

kitsune-fe/src/views/timeline/HomePage.vue

@@ -6,7 +6,7 @@
   import { ref, watch } from 'vue';
 
   import BaseTimeline from '../../components/BaseTimeline.vue';
-  import { Post } from '../../components/Post.vue';
+  import { Post } from '../../components/PostComponent.vue';
   import { MAX_UUID } from '../../consts';
   import { getHome } from '../../graphql/timeline';
 

kitsune-fe/src/views/timeline/LocalPage.vue

@@ -6,7 +6,7 @@
   import { ref, watch } from 'vue';
 
   import BaseTimeline from '../../components/BaseTimeline.vue';
-  import { Post } from '../../components/Post.vue';
+  import { Post } from '../../components/PostComponent.vue';
   import { MAX_UUID } from '../../consts';
   import { getPublic } from '../../graphql/timeline';
 

kitsune-fe/vite.config.ts

@@ -23,6 +23,10 @@ export default defineConfig({
 
       baseDir: path.resolve('src'),
       ftlDir: path.resolve('src/locales'),
+
+      getFtlPath(locale) {
+        return path.join('src/locales', `${locale}.ftl`);
+      },
     }),
   ],
 });