progress

kitsune-fe/.prettierrc

@@ -3,7 +3,10 @@
   "importOrder": ["^\\w", "^[./|~/]"],
   "importOrderSeparation": true,
   "importOrderParserPlugins": ["typescript"],
-  "plugins": ["@trivago/prettier-plugin-sort-imports"],
+  "plugins": [
+    "@trivago/prettier-plugin-sort-imports",
+    "prettier-plugin-css-order"
+  ],
   "semi": true,
   "singleQuote": true,
   "vueIndentScriptAndStyle": true

kitsune-fe/package.json

@@ -57,6 +57,7 @@
     "eslint-plugin-prettier": "^5.0.0",
     "eslint-plugin-vue": "^9.17.0",
     "prettier": "^3.0.3",
+    "prettier-plugin-css-order": "^2.0.1",
     "sass": "^1.69.0",
     "typescript": "^5.2.2",
     "vite": "^4.4.11",

kitsune-fe/src/components/AuthForms.vue

@@ -161,54 +161,54 @@
   }
 
   .formkit-form {
-    background-color: $dark2;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
-    width: 90%;
     margin: 0 auto;
-    padding: 3vh;
-    border-radius: 5px;
     border: 0.2px solid $shade1dark;
+    border-radius: 5px;
+    background-color: $dark2;
+    padding: 3vh;
+    width: 90%;
   }
 
   .formkit-wrapper {
     margin: 10px auto;
   }
 
   .formkit-input[type='submit'] {
+    transition: 0.5s;
+    cursor: pointer;
     border: 0;
-    background-color: $shade1dark;
     border-radius: 5px;
+    background-color: $shade1dark;
     padding: 10px;
-    font-size: 16px;
     width: 100px;
-    cursor: pointer;
-    transition: 0.5s;
+    font-size: 16px;
 
     &:hover {
       background-color: $shade2dark;
     }
   }
 
   .formkit-input:not([type='submit']) {
-    width: 100%;
     border: 0.5px solid $shade1dark;
-    background-color: $dark1;
     border-radius: 2px;
-    font-size: 20px;
-    color: white;
+    background-color: $dark1;
     padding: 5px;
+    width: 100%;
+    color: white;
+    font-size: 20px;
   }
 
   .forms {
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: flex-end;
-    width: 40%;
-    padding: 1vw;
     gap: 20px;
+    padding: 1vw;
+    width: 40%;
 
     @media only screen and (max-width: 1367px) {
       align-items: center;
@@ -221,13 +221,13 @@
   }
 
   .formkit-messages {
+    padding-left: 0;
     color: red;
     list-style: none;
-    padding-left: 0;
   }
 
   .formkit-label {
-    text-transform: uppercase;
     margin-bottom: 5px;
+    text-transform: uppercase;
   }
 </style>

kitsune-fe/src/components/BaseTimeline.vue

@@ -1,11 +1,11 @@
 <template>
-  <fieldset class="timeline" ref="scroller">
+  <fieldset ref="scroller" class="timeline">
     <legend class="timeline-legend">
       {{ $t('messages.timeline.title') }}
     </legend>
     <DynamicScroller class="scroller" :items="posts" :min-item-size="50">
       <template
-        v-slot="{
+        #default="{
           item,
           index,
           active,
@@ -62,9 +62,9 @@
   .timeline {
     margin: auto;
     border-color: grey;
+    max-width: 100ch;
 
     max-height: 82vh;
-    max-width: 100ch;
     overflow-y: scroll;
 
     &-legend {

kitsune-fe/src/components/CaptchaComponent.vue

@@ -77,7 +77,7 @@
   @use '../styles/colours' as *;
 
   #mcaptcha__widget-container {
-    height: 80px;
     border: 1px solid $shade1dark;
+    height: 80px;
   }
 </style>

kitsune-fe/src/components/GenericFooter.vue

@@ -26,8 +26,8 @@
     display: flex;
     justify-content: center;
     align-items: flex-end;
-    padding: 10px 0;
     gap: 25px;
     margin: 25px 0;
+    padding: 10px 0;
   }
 </style>

kitsune-fe/src/components/NavBar.vue

@@ -13,9 +13,9 @@
 
       <div class="nav-bar-element">
         <font-awesome-icon
-          @click="showPostModal = true"
           class="icon create-status"
           icon="fa-pen-to-square fa-solid"
+          @click="showPostModal = true"
         />
       </div>
     </div>
@@ -69,18 +69,18 @@
   @use '../styles/mixins' as *;
 
   .nav-bar {
+    display: flex;
     position: fixed;
     top: 0;
-    left: 0;
     right: 0;
-    background-color: $dark2;
-    padding: 0 25px;
-    padding-top: 5px;
-    margin-bottom: 100px;
-    display: flex;
+    left: 0;
     justify-content: space-between;
     align-items: center;
     z-index: 999;
+    margin-bottom: 100px;
+    background-color: $dark2;
+    padding: 0 25px;
+    padding-top: 5px;
 
     @include only-on-mobile {
       padding: 0;
@@ -100,14 +100,14 @@
       gap: 10px;
 
       .create-status {
-        height: 25px;
         cursor: pointer;
+        height: 25px;
       }
 
       .profile-menu-button {
-        border-radius: 4px;
         display: flex;
         align-items: center;
+        border-radius: 4px;
 
         img {
           height: 30px;

kitsune-fe/src/components/NavBarLink.vue

@@ -28,14 +28,14 @@
 
   .nav-bar-link {
     display: inline-block;
-    padding: 15px;
-    color: $shade1dark;
 
     cursor: pointer;
-    user-select: none;
 
     border-bottom: 4px solid;
     border-color: transparent;
+    padding: 15px;
+    color: $shade1dark;
+    user-select: none;
 
     &:hover {
       color: white;
@@ -56,9 +56,9 @@
     }
 
     &.router-link-active {
-      color: $shade2light;
-      border-image-slice: 1;
       border-image-source: linear-gradient(to left, $shade2light, $shade2dark);
+      border-image-slice: 1;
+      color: $shade2light;
     }
   }
 </style>

kitsune-fe/src/components/Post.vue

@@ -30,7 +30,11 @@
     <span class="post-content" v-html="content" />
 
     <div class="post-attachments">
-      <div v-for="attachment in attachments" :title="attachment.description!">
+      <div
+        v-for="attachment in attachments"
+        :key="attachment.url"
+        :title="attachment.description!"
+      >
         <audio
           v-if="attachment.contentType.startsWith('audio')"
           :src="attachment.url"
@@ -94,17 +98,17 @@
   .post {
     border: 1px solid white;
     border-radius: 3px;
-    padding: 1em;
 
     background-color: $dark2;
+    padding: 1em;
 
     & .account-info {
       display: flex;
       align-items: center;
       gap: 0.5em;
-      line-height: 100%;
 
       width: fit-content;
+      line-height: 100%;
 
       &-profile-picture {
         width: 3em;

kitsune-fe/src/components/modal/BaseModal.vue

@@ -33,20 +33,20 @@
   @use '../../styles/colours' as *;
 
   .modal {
-    position: absolute;
     display: flex;
-    justify-content: center;
-    align-items: center;
+    position: absolute;
 
     top: 0;
+    right: 0;
     bottom: 0;
     left: 0;
-    right: 0;
-
-    background-color: rgba(0, 0, 0, 0.75);
+    justify-content: center;
+    align-items: center;
 
     z-index: 999;
 
+    background-color: rgba(0, 0, 0, 0.75);
+
     &-title {
       text-transform: uppercase;
     }

kitsune-fe/src/components/modal/NewPostModal.vue

@@ -1,20 +1,20 @@
 <template>
   <BaseModal
     :model-value="modelValue"
-    @update:model-value="$emit('update:modelValue', $event)"
     :title="$t('messages.newPost.title')"
+    @update:model-value="$emit('update:modelValue', $event)"
   >
     <BubbleMenu v-if="editor" :editor="editor" :tippy-options="tippyOptions">
       <button
-        @click="editor.chain().focus().toggleBold().run()"
         :class="{ 'is-active': editor.isActive('bold') }"
+        @click="editor.chain().focus().toggleBold().run()"
       >
         Bold
       </button>
 
       <button
-        @click="editor.chain().focus().toggleCodeBlock().run()"
         :class="{ 'is-active': editor.isActive('codeBlock') }"
+        @click="editor.chain().focus().toggleCodeBlock().run()"
       >
         Code block
       </button>
@@ -70,6 +70,9 @@
   import { useInstanceInfo } from '../../graphql/instance-info';
   import BaseModal from './BaseModal.vue';
 
+  defineEmits<{
+    (event: 'update:modelValue', modelValue: boolean): void;
+  }>();
   defineProps<{
     modelValue: boolean;
   }>();
@@ -90,13 +93,13 @@
 
 <style lang="scss" scoped>
   .editor {
-    width: 500px;
-    max-width: 90vw;
-    height: fit-content;
+    margin-bottom: 1em;
     border: 1px solid white;
 
     padding: 0 1em;
-    margin-bottom: 1em;
+    width: 500px;
+    max-width: 90vw;
+    height: fit-content;
   }
 
   .controls {

kitsune-fe/src/i18n/en-cyberpunk.ts

@@ -1,5 +1,9 @@
 export default {
   messages: {
+    mainPage: {
+      whoAuthored: 'who broadcasted',
+      aboutInstance: "Deets 'bout this megacorp",
+    },
     newPost: {
       title: 'New Transmission',
     },
@@ -11,4 +15,9 @@ export default {
       title: 'Incoming Transmissions',
     },
   },
+  stats: {
+    instance: 'megacorp | megacorps',
+    post: 'transmission | transmissions',
+    user: 'choom | chooms',
+  },
 };

kitsune-fe/src/i18n/en.ts

@@ -1,5 +1,10 @@
 export default {
   messages: {
+    mainPage: {
+      isHomeTo: 'is home to',
+      whoAuthored: 'who authored',
+      aboutInstance: 'About this instance',
+    },
     newPost: {
       title: 'New Post',
     },
@@ -11,4 +16,10 @@ export default {
       title: 'Posts',
     },
   },
+  stats: {
+    title: 'statistics',
+    instance: 'instance | instances',
+    post: 'post | posts',
+    user: 'user | users',
+  },
 };

kitsune-fe/src/styles/_breakpoints.scss

@@ -0,0 +1,9 @@
+// Source: Tailwind <https://tailwindcss.com/docs/screens>
+
+$breakpoints: (
+  sm: 640px,
+  md: 768px,
+  lg: 1024px,
+  xl: 1280px,
+  xxl: 1536px,
+);