fixes URLs

Specy · Apr 9, 2024 · 3f96351 · 3f96351
1 parent 739d0cb
commit 3f96351
Show file tree

Hide file tree

Showing 10 changed files with 33 additions and 28 deletions.
diff --git a/public/manifest.json b/public/manifest.json
@@ -21,7 +21,7 @@
   ],
   "file_handlers": [
     {
-      "action": ".",
+      "action": "/",
       "name": "Import file in sky music",
       "accept": {
         "application/json": [
@@ -33,17 +33,17 @@
       },
       "icons": [
         {
-          "src": "favicon.ico",
+          "src": "/favicon.ico",
           "sizes": "48x48",
           "type": "image/x-icon"
         },
         {
-          "src": "logo192.png",
+          "src": "/logo192.png",
           "type": "image/png",
           "sizes": "192x192"
         },
         {
-          "src": "logo512.png",
+          "src": "/logo512.png",
           "type": "image/png",
           "sizes": "512x512"
         }
@@ -72,4 +72,4 @@
   "orientation": "landscape",
   "theme_color": "#63aea7",
   "background_color": "#495466"
-}
+}
diff --git a/public/service-worker.js b/public/service-worker.js
diff --git a/src/components/pages/blog/BaseBlogPost.tsx b/src/components/pages/blog/BaseBlogPost.tsx
@@ -6,7 +6,7 @@ import {Header} from "$cmp/shared/header/Header";
 import {PageMeta} from "$cmp/shared/Miscellaneous/PageMeta";
 import Link from "next/link";
 import {useEffect, useMemo, useState} from "react";
-import {APP_NAME} from "$config";
+import {APP_NAME, BASE_PATH} from "$config";
 import {Row} from "$cmp/shared/layout/Row";
 import {BlogAuthorRenderer, BlogTagsRenderer} from "$cmp/pages/blog/BlogMetadataRenderers";
 
@@ -17,7 +17,7 @@ interface BaseBlogPostProps {
 
 export const SpecyAuthor = {
     name: "Specy",
-    picture: '/assets/images/specy.png'
+    picture: BASE_PATH + '/assets/images/specy.png'
 } satisfies BlogAuthor
 
 

diff --git a/src/components/pages/blog/BlogMetadataRenderers.tsx b/src/components/pages/blog/BlogMetadataRenderers.tsx
@@ -1,5 +1,6 @@
 import {BlogAuthor} from "$cmp/pages/blog/types";
 import {Row} from "$cmp/shared/layout/Row";
+import {BASE_PATH} from "$config";
 
 interface BlogAuthorProps {
     author: BlogAuthor
@@ -13,7 +14,7 @@ export function BlogAuthorRenderer({author, size = '2.5rem', noName = false}: Bl
         align={'center'}
     >
         <img
-            src={author.picture ?? '/assets/images/specy.png'}
+            src={author.picture ?? `${BASE_PATH}/assets/images/specy.png`}
             alt={`${author.name} picture`}
             style={{
                 width: size,

diff --git a/src/pages/blog/posts/connect-midi-device.tsx b/src/pages/blog/posts/connect-midi-device.tsx
@@ -3,13 +3,14 @@ import {BaseBlogPost, SpecyAuthor} from "$cmp/pages/blog/BaseBlogPost";
 import {Header} from "$cmp/shared/header/Header";
 import {AppLink} from "$cmp/shared/link/AppLink";
 import {BlogP} from "$cmp/pages/blog/BlogUl";
+import {BASE_PATH} from "$config";
 
 
 export const _midiDeviceMetadata: BlogMetadata = {
     title: "🎹 Use a MIDI keyboard/device",
     tags: ["Guide"],
     relativeUrl: "connect-midi-device",
-    image: '/assets/blog/zen-keyboard.webp',
+    image: BASE_PATH + '/assets/blog/zen-keyboard.webp',
     description: "How to connect a MIDI keyboard/device to the app, and how to use it in the player and composer.",
     createdAt: new Date("2024/03/19"),
     author: SpecyAuthor,

diff --git a/src/pages/blog/posts/how-to-use-composer.tsx b/src/pages/blog/posts/how-to-use-composer.tsx
@@ -3,7 +3,7 @@ import {BaseBlogPost, SpecyAuthor} from "$cmp/pages/blog/BaseBlogPost";
 import {AppLink} from "$cmp/shared/link/AppLink";
 import {Header} from "$cmp/shared/header/Header";
 import {BlogImage} from "$cmp/pages/blog/BlogImage";
-import {APP_NAME} from "$config";
+import {APP_NAME, BASE_PATH} from "$config";
 import {BlogB, BlogLi, BlogOl, BlogP} from "$cmp/pages/blog/BlogUl";
 import {ShortcutsTable} from "$cmp/pages/Index/HelpTab/ShortcutsHelp";
 import {useConfig} from "$lib/Hooks/useConfig";
@@ -15,7 +15,7 @@ export const _composerTutorialMetadata: BlogMetadata = {
     title: "📀 How to use the composer",
     tags: ["Guide"],
     relativeUrl: "how-to-use-composer",
-    image: '/assets/blog/help-composer.webp',
+    image: BASE_PATH + '/assets/blog/help-composer.webp',
     description: "This is a guide to help you learn how to use the song composer to create and edit songs!",
     createdAt: new Date("2024/03/19"),
     author: SpecyAuthor,
@@ -39,7 +39,7 @@ export default function BlogPage() {
         {APP_NAME !== "Genshin" && <BlogP>
             The images below are from the genshin version of the app, but the functionality is the same
         </BlogP>}
-        <BlogImage src={'/assets/blog/help-composer.webp'} alt={"Composer UI"}/>
+        <BlogImage src={BASE_PATH + '/assets/blog/help-composer.webp'} alt={"Composer UI"}/>
         <BlogOl>
             <BlogLi>Go to the next / previous breakpoint, a breakpoint can be added from the button in the timeline,
                 it's
@@ -84,7 +84,7 @@ export default function BlogPage() {
         <BlogP>
             This next tools are the ones available by clicking the "tools" button on the right of the composer
         </BlogP>
-        <BlogImage src={'/assets/blog/help-composer-2.webp'} alt={"Composer tools UI"}/>
+        <BlogImage src={BASE_PATH + '/assets/blog/help-composer-2.webp'} alt={"Composer tools UI"}/>
         <BlogOl>
             <BlogLi>
                 This is the currently selected columns, the initial operations like copy/erase/delete will be applied to
@@ -121,7 +121,7 @@ export default function BlogPage() {
                 that whole selection.
             </BlogLi>
         </BlogOl>
-        <BlogImage src={'/assets/blog/help-composer-3.webp'} alt={"Composer tools selected notes UI"}/>
+        <BlogImage src={BASE_PATH + '/assets/blog/help-composer-3.webp'} alt={"Composer tools selected notes UI"}/>
         <BlogP>
             Once having copied the notes you want, you will be inside the "insert" mode.
         </BlogP>
@@ -137,7 +137,7 @@ export default function BlogPage() {
                 this will also make you exit the insert mode.
             </BlogLi>
         </BlogOl>
-        <BlogImage src={'/assets/blog/help-composer-4.webp'} alt={"Composer settings"}/>
+        <BlogImage src={BASE_PATH + '/assets/blog/help-composer-4.webp'} alt={"Composer settings"}/>
         <BlogP>
             Those are the settings of the composer, you can open it by pressing the settings button in the side menu
         </BlogP>
@@ -206,7 +206,7 @@ export default function BlogPage() {
                 href={'/blog/connect-midi-device'}>connect MIDI device</AppLink> guide.
             </BlogLi>
         </BlogOl>
-        <BlogImage src={'/assets/blog/help-composer-5.webp'} alt={"Instrument settings"}/>
+        <BlogImage src={BASE_PATH + '/assets/blog/help-composer-5.webp'} alt={"Instrument settings"}/>
         <BlogP>
             This is the layer settings, on the left there is the layer selection, the highlighted one is the currently
             selected

diff --git a/src/pages/blog/posts/how-to-use-player.tsx b/src/pages/blog/posts/how-to-use-player.tsx
@@ -3,7 +3,7 @@ import {BaseBlogPost, SpecyAuthor} from "$cmp/pages/blog/BaseBlogPost";
 import {AppLink} from "$cmp/shared/link/AppLink";
 import {Header} from "$cmp/shared/header/Header";
 import {BlogImage} from "$cmp/pages/blog/BlogImage";
-import {APP_NAME} from "$config";
+import {APP_NAME, BASE_PATH} from "$config";
 import {BlogB, BlogLi, BlogOl, BlogP} from "$cmp/pages/blog/BlogUl";
 import {ShortcutsTable} from "$cmp/pages/Index/HelpTab/ShortcutsHelp";
 import {useConfig} from "$lib/Hooks/useConfig";
@@ -15,7 +15,7 @@ export const _playerTutorialMetadata: BlogMetadata = {
     relativeUrl: "how-to-use-player",
     tags: ["Guide"],
 
-    image: '/assets/blog/help-player.webp',
+    image: BASE_PATH + '/assets/blog/help-player.webp',
     description: "This is a guide to help you learn how to use the player to learn, record and play songs!",
     createdAt: new Date("2024/03/19"),
     author: SpecyAuthor,
@@ -50,7 +50,7 @@ export default function BlogPage() {
         {APP_NAME !== "Genshin" && <BlogP>
             The images below are from the genshin version of the app, but the functionality is the same
         </BlogP>}
-        <BlogImage src={'/assets/blog/help-player.webp'} alt={"Player UI"}/>
+        <BlogImage src={BASE_PATH + '/assets/blog/help-player.webp'} alt={"Player UI"}/>
         <BlogOl>
             <BlogLi>Pressing this button will start an audio recording, everything you play from that moment will be
                 recorded, then downloaded as an audio file </BlogLi>
@@ -73,7 +73,7 @@ export default function BlogPage() {
             <BlogLi>Opens the menu of the app where you can go to all the other pages</BlogLi>
             <BlogLi>Visual sheet of the song</BlogLi>
         </BlogOl>
-        <BlogImage src={'/assets/blog/help-player-2.webp'} alt={"Player menu help"}/>
+        <BlogImage src={BASE_PATH + '/assets/blog/help-player-2.webp'} alt={"Player menu help"}/>
         <BlogP>
             When you open the "song menu", you will be shown this window. Your songs will be split between recorded and
             composed
@@ -123,7 +123,7 @@ export default function BlogPage() {
         <Header margin={'1rem 0'}>
             Player settings
         </Header>
-        <BlogImage src={'/assets/blog/help-player-3.webp'} alt={"Player settings"}/>
+        <BlogImage src={BASE_PATH + '/assets/blog/help-player-3.webp'} alt={"Player settings"}/>
         <BlogOl>
             <BlogLi>
                 <BlogB>Instrument</BlogB>: This is the instrument of the keyboard, you can change the volume

diff --git a/src/pages/blog/posts/how-to-use-vsrg-composer.tsx b/src/pages/blog/posts/how-to-use-vsrg-composer.tsx
@@ -8,6 +8,7 @@ import {BlogB, BlogLi, BlogOl, BlogP} from "$cmp/pages/blog/BlogUl";
 import {Header} from "$cmp/shared/header/Header";
 import {BlogImage} from "$cmp/pages/blog/BlogImage";
 import {AppLink} from "$cmp/shared/link/AppLink";
+import {BASE_PATH} from "$config";
 
 export const _howUseVsrgComposer: BlogMetadata = {
     title: "🥁 How to use the VSRG composer",
@@ -43,7 +44,7 @@ export default function BlogPost() {
                 related to it.
                 Let's start off exploring all the settings in the VSRG composer!
             </BlogP>
-            <BlogImage src={'/assets/blog/help-vsrg-composer-2.webp'} alt={'VSRG composer settings'}/>
+            <BlogImage src={BASE_PATH + '/assets/blog/help-vsrg-composer-2.webp'} alt={'VSRG composer settings'}/>
             <BlogOl>
                 <BlogLi>
                     <BlogB>Keys</BlogB>: This is the number of tracks you want the beatmap to have, choose this wisely

diff --git a/src/pages/blog/posts/midi-transpose.tsx b/src/pages/blog/posts/midi-transpose.tsx
@@ -4,13 +4,14 @@ import {BlogImage} from "$cmp/pages/blog/BlogImage";
 import {Header} from "$cmp/shared/header/Header";
 import {AppLink} from "$cmp/shared/link/AppLink";
 import {BlogLi, BlogOl, BlogP} from "$cmp/pages/blog/BlogUl";
+import {BASE_PATH} from "$config";
 
 
 export const _midiTransposeMetadata: BlogMetadata = {
     title: "🎛️ MIDI music transposition",
     relativeUrl: "midi-transpose",
     tags: ["Guide"],
-    image: '/assets/blog/midi-1.webp',
+    image: BASE_PATH + '/assets/blog/midi-1.webp',
     description: "Use MIDI songs to transpose music into the app's sheet",
     createdAt: new Date("2024/03/19"),
     author: SpecyAuthor,
@@ -38,7 +39,7 @@ export default function BlogPage() {
         pressing the
         "Open MIDI/Audio/Video file" button. If you want to import a video or audio file instead, visit the <AppLink
         href={'/blog/posts/video-audio-transpose'}> Ai transpose guide </AppLink>.
-        <BlogImage src={'/assets/blog/midi-btn.webp'} alt={"MIDI button"}/>
+        <BlogImage src={BASE_PATH + '/assets/blog/midi-btn.webp'} alt={"MIDI button"}/>
         <Header margin={'1rem 0'}>
             Transpose a MIDI file
         </Header>
@@ -49,7 +50,7 @@ export default function BlogPage() {
             best fit the song.
         </BlogP>
 
-        <BlogImage src={'/assets/blog/midi-1.webp'} alt={"MIDI import settings"}/>
+        <BlogImage src={BASE_PATH + '/assets/blog/midi-1.webp'} alt={"MIDI import settings"}/>
         <BlogOl>
             <BlogLi>This is the button to press to select the MIDI file.</BlogLi>
             <BlogLi>
@@ -85,7 +86,7 @@ export default function BlogPage() {
                 This opens the setting of the track, where you can see more information, and override the global values.
             </BlogLi>
         </BlogOl>
-        <BlogImage src={'/assets/blog/midi-2.webp'} alt={"MIDI track settings"}/>
+        <BlogImage src={BASE_PATH + '/assets/blog/midi-2.webp'} alt={"MIDI track settings"}/>
         <BlogOl>
             <BlogLi>
                 With this you can override the note offset that you wrote in the global settings, leave it blank to use

diff --git a/src/pages/blog/posts/video-audio-transpose.tsx b/src/pages/blog/posts/video-audio-transpose.tsx
@@ -3,13 +3,14 @@ import {BaseBlogPost, SpecyAuthor} from "$cmp/pages/blog/BaseBlogPost";
 import {Header} from "$cmp/shared/header/Header";
 import {AppLink} from "$cmp/shared/link/AppLink";
 import {BlogP} from "$cmp/pages/blog/BlogUl";
+import {BASE_PATH} from "$config";
 
 
 export const _aiTransposeMetadata: BlogMetadata = {
     title: "🔬 Video/audio to music transposition",
     tags: ["Guide"],
     relativeUrl: "video-audio-transpose",
-    image: '/assets/blog/midi-btn.webp',
+    image: BASE_PATH +  '/assets/blog/midi-btn.webp',
     description: "Use the new feature in the composer to (try to) convert a audio/video into a music sheet. This is an experimental feature",
     createdAt: new Date("2024/03/19"),
     author: SpecyAuthor,