Merge branch 'main' into feat/SSR

Rule-34 · Apr 1, 2024 · 778056e · 778056e
2 parents 8745656 + 6f197d1
commit 778056e
Show file tree

Hide file tree

Showing 61 changed files with 4,853 additions and 4,517 deletions.
diff --git a/.env.example b/.env.example
@@ -6,8 +6,6 @@ APP_DOMAIN=r34.app
 
 API_URL=https://api.r34.app
 
-PROXY_URL=https://cors-proxy.r34.app/?q=
-
 MATOMO_API_KEY=
 
 SENTRY_DSN=

diff --git a/app.vue b/app.vue
@@ -1,13 +1,13 @@
 <script setup>
-  const config = useRuntimeConfig()
+  const route = useRoute()
 
   useHead({
     htmlAttrs: {
       lang: 'en'
     },
 
     titleTemplate: (titleChunk) => {
-      return titleChunk ? `${titleChunk} | Rule 34 App` : 'Rule 34 App'
+      return titleChunk ? `${titleChunk} | R34.app` : 'Rule 34 App | R34.app'
     },
 
     link: [
@@ -44,25 +44,33 @@
     themeColor: '#000',
 
     monetization: '$ilp.uphold.com/Hf3zAn3pQ7fD'
+
+    // ogImage: () => ({
+    //   url:
+    //     'https://screenshot.akbal.dev/v1/capture?width=1200&height=630&url=' +
+    //     encodeURIComponent('https://r34.app' + route.fullPath),
+    //   width: 1200,
+    //   height: 630
+    // })
   })
 
-  useSchemaOrg([
-    defineWebSite({
-      name: 'Rule 34 App'
-    }),
-    defineWebPage(),
-    defineOrganization({
-      name: 'Rule 34 App',
-      logo: '/icon.svg',
-      sameAs: [
-        'https://rule34.app',
-        'https://twitter.com/Rule34App',
-        'https://twitter.com/Rule34App',
-        'https://discord.gg/fUhYHSZ',
-        'https://github.com/Rule-34/App'
-      ]
-    })
-  ])
+  // useSchemaOrg([
+  //   defineWebSite({
+  //     name: 'Rule 34 App'
+  //   }),
+  //   defineWebPage(),
+  //   defineOrganization({
+  //     name: 'Rule 34 App',
+  //     logo: '/icon.svg',
+  //     sameAs: [
+  //       'https://rule34.app',
+  //       'https://twitter.com/Rule34App',
+  //       'https://twitter.com/Rule34App',
+  //       'https://discord.gg/fUhYHSZ',
+  //       'https://github.com/Rule-34/App'
+  //     ]
+  //   })
+  // ])
 </script>
 
 <template>

diff --git a/app/spa-loading-template.html b/app/spa-loading-template.html
@@ -0,0 +1,59 @@
+<style>
+  html {
+    background-color: black;
+  }
+
+  .loader-container {
+
+    position: fixed;
+
+    inset: 0;
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .loader {
+    display: block;
+
+    width: 30vw;
+    height: 30vw;
+
+    // TODO: Add a max-width and max-height to specific display sizes
+    max-width: 300px;
+    max-height: 300px;
+
+    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+  }
+
+  @keyframes pulse {
+    0%, 100% {
+      opacity: 1;
+    }
+    50% {
+      opacity: .6;
+    }
+  }
+</style>
+
+<div class='loader-container'>
+
+  <!-- icon.svg -->
+  <svg class='loader' fill="#fff" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+    <!-- Filters -->
+    <filter id="shadow">
+      <feDropShadow dx="0" dy="0" flood-color="#fff" stdDeviation="1"/>
+    </filter>
+
+    <g filter="url(#shadow)">
+
+      <!-- Star -->
+      <path clip-rule="evenodd"
+            d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.007 5.404.433c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.433 2.082-5.006z"
+            fill-rule="evenodd"/>
+    </g>
+  </svg>
+
+  <!-- TODO: Add screenreader text -->
+</div>
diff --git a/assets/css/cookieconsent.css b/assets/css/cookieconsent.css
@@ -1,7 +1,8 @@
 .cc--custom {
   color-scheme: dark;
 
-  --cc-font-family: InterVariable, ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+  /* TODO: Change to inter var */
+  --cc-font-family: 'Inter', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
 
   --cc-bg: #000;
   /* .text-base-content-highlight */

diff --git a/assets/css/main.css b/assets/css/main.css
@@ -5,23 +5,6 @@
 /* Improved defaults */
 @layer base {
 
-  /* Self-hosted font */
-  /* Used in tailwind.config.js */
-  @font-face {
-    font-family: InterVariable;
-    font-style: normal;
-    font-weight: 100 900;
-    font-display: swap;
-    src: url('~/assets/fonts/InterVariable.V4.woff2') format('woff2');
-  }
-  @font-face {
-    font-family: InterVariable;
-    font-style: italic;
-    font-weight: 100 900;
-    font-display: swap;
-    src: url('~/assets/fonts/InterVariable-Italic.V4.woff2') format('woff2');
-  }
-
   html {
     @apply bg-base-1000 text-base-content;
 

diff --git a/assets/fonts/InterVariable-Italic.V4.woff2 b/assets/fonts/InterVariable-Italic.V4.woff2
diff --git a/assets/fonts/InterVariable.V4.woff2 b/assets/fonts/InterVariable.V4.woff2
diff --git a/assets/js/BackupHelper.ts b/assets/js/BackupHelper.ts
@@ -1,18 +1,13 @@
-import { db as postsDb, type ISavedPost } from '~/store/SavedPosts'
-import type { ITagCollection } from '~/assets/js/tagCollection.dto'
-import type { VuexUser } from '~/assets/js/oldLocalStorage.dto'
-import { cloneDeep, toLower, union, unionWith } from 'lodash-es'
 import type { Domain } from '~/assets/js/domain'
-import { booruTypeList } from '~/assets/lib/rule-34-shared-resources/src/util/BooruUtils'
-import type { IPost } from '~/assets/js/post'
 import type { IOldBackupState } from '~/assets/js/oldBackup'
+import type { ITagCollection } from '~/assets/js/tagCollection.dto'
+import { booruTypeList } from '~/assets/lib/rule-34-shared-resources/src/util/BooruUtils'
 
 export interface IBackupState {
   version: number
 
   boorus: Domain[]
   tag_collections: ITagCollection[]
-  saved_posts: ISavedPost[]
 
   settings: {
     [key: string]: any
@@ -22,7 +17,6 @@ export interface IBackupState {
 export async function createBackupState(): Promise<IBackupState> {
   const { userBooruList } = useBooruList()
   const { tagCollections } = useTagCollections()
-  const savedPosts = await postsDb.posts.toArray()
   const userSettings = useUserSettings()
 
   // TODO: Only save data that is not defaulted
@@ -32,7 +26,6 @@ export async function createBackupState(): Promise<IBackupState> {
 
     boorus: userBooruList.value,
     tag_collections: tagCollections.value,
-    saved_posts: savedPosts,
 
     settings: userSettings
   }
@@ -53,14 +46,6 @@ async function restoreV3Backup(backupState: IBackupState) {
     tagCollections.value = backupState.tag_collections
   }
 
-  if (backupState.saved_posts?.length) {
-    const { posts } = postsDb
-
-    await posts.clear()
-
-    await posts.bulkAdd(backupState.saved_posts)
-  }
-
   if (backupState.settings) {
     const userSettings = useUserSettings()
 
@@ -100,43 +85,6 @@ function restoreV2Backup(backupState: IOldBackupState) {
     tagCollections.value = backupState.user.custom.tagCollections
   }
 
-  if (backupState.user.custom.savedPosts?.length) {
-    const { posts } = postsDb
-
-    const oldSavedPostsAsNewSavedPosts = backupState.user.custom.savedPosts.map((oldSavedPost) => {
-      // Restore date too
-
-      const newSavedPost: ISavedPost = {
-        original_id: oldSavedPost.data.id,
-        original_domain: oldSavedPost.meta_data.booru_domain,
-
-        data: {
-          id: oldSavedPost.data.id,
-
-          score: oldSavedPost.data.score,
-
-          high_res_file: oldSavedPost.data.high_res_file,
-          low_res_file: oldSavedPost.data.low_res_file,
-          preview_file: oldSavedPost.data.preview_file,
-
-          tags: oldSavedPost.data.tags,
-
-          rating: oldSavedPost.data.rating,
-
-          media_type: oldSavedPost.data.media_type as IPost['media_type'],
-
-          sources: oldSavedPost.data.sources
-        }
-      }
-
-      return newSavedPost
-    })
-
-    posts.clear()
-
-    posts.bulkAdd(oldSavedPostsAsNewSavedPosts)
-  }
-
   // TODO: Restore settings
 }
 
@@ -159,128 +107,3 @@ export async function tryToRestoreV2OrV3Backup(backup: any): Promise<void> {
 
   await restoreV3Backup(backup)
 }
-
-export function doesBrowserHaveOldVersionState(): boolean {
-  if (localStorage.getItem('vuex-user')) {
-    return true
-  }
-
-  return false
-}
-
-export function removeBrowserOldVersionState() {
-  localStorage.removeItem('vuex-root')
-  localStorage.removeItem('vuex-user')
-  localStorage.removeItem('vuex-booru')
-  localStorage.removeItem('vuex-notifications')
-}
-
-/**
- * Migrates the old (V2) browser state to the new one (V3)
- * Merges the data
- */
-export async function migrateBrowserOldVersionState(): Promise<void> {
-  const { tagCollections } = useTagCollections()
-  const userSettings = useUserSettings()
-  const { userBooruList } = useBooruList()
-
-  if (!doesBrowserHaveOldVersionState()) {
-    return
-  }
-
-  const vuexUser: VuexUser = JSON.parse(localStorage.getItem('vuex-user')!)
-
-  // === Migrate settings
-  if (vuexUser.user.settings.fullSizeImages)
-    userSettings.postFullSizeImages = vuexUser.user.settings.fullSizeImages.value
-
-  if (vuexUser.user.settings.postsPerPage) userSettings.postsPerPage = vuexUser.user.settings.postsPerPage.value
-
-  // === Migrate tag collections
-  if (vuexUser.user.custom.tagCollections?.length) {
-    tagCollections.value = mergeBlocklists(tagCollections.value, vuexUser.user.custom.tagCollections)
-  }
-
-  // === Migrate Boorus
-  if (vuexUser.user.custom.boorus?.length) {
-    const vuexUserBoorusMigrated = vuexUser.user.custom.boorus.map((booru) => {
-      return {
-        domain: booru.domain,
-
-        type: booruTypeList.find((type) => type.type === booru.type),
-
-        config: booru.config,
-
-        // Doesnt matter if its Premium or not, API is protected
-        isPremium: false
-      }
-    }) as Domain[]
-
-    const uniqueBoorus = unionWith(userBooruList.value, vuexUserBoorusMigrated, (obj1, obj2) => {
-      return obj1.domain === obj2.domain
-    })
-
-    userBooruList.value = uniqueBoorus
-  }
-
-  // === Migrate saved posts
-  if (vuexUser.user.custom.savedPosts?.length) {
-    const { posts } = postsDb
-
-    const oldSavedPostsAsNewSavedPosts = vuexUser.user.custom.savedPosts.map((oldSavedPost) => {
-      const newSavedPost: ISavedPost = {
-        original_id: oldSavedPost.data.id,
-        original_domain: oldSavedPost.meta_data.booru_domain,
-
-        data: {
-          id: oldSavedPost.data.id,
-
-          score: oldSavedPost.data.score,
-
-          high_res_file: oldSavedPost.data.high_res_file,
-          low_res_file: oldSavedPost.data.low_res_file,
-          preview_file: oldSavedPost.data.preview_file,
-
-          tags: oldSavedPost.data.tags,
-
-          rating: oldSavedPost.data.rating,
-
-          media_type: oldSavedPost.data.media_type as IPost['media_type'],
-
-          sources: oldSavedPost.data.sources
-        }
-      }
-
-      return newSavedPost
-    })
-
-    await posts.clear()
-
-    await posts.bulkAdd(oldSavedPostsAsNewSavedPosts)
-  }
-
-  removeBrowserOldVersionState()
-}
-
-function mergeTags(tags1: string[], tags2: string[]): string[] {
-  return union(tags1, tags2)
-}
-
-function mergeBlocklists(list1: ITagCollection[], list2: ITagCollection[]): ITagCollection[] {
-  const mergedList: ITagCollection[] = cloneDeep(list1)
-
-  list2.forEach((item2) => {
-    const existingItem = mergedList.find((item1) => toLower(item1.name) === toLower(item2.name))
-
-    // If an item with the same name exists, merge their tags
-    if (existingItem) {
-      existingItem.tags = mergeTags(existingItem.tags, item2.tags)
-
-      // Otherwise, add the new item to the merged list
-    } else {
-      mergedList.push(item2)
-    }
-  })
-
-  return mergedList
-}