🪐🌌 ↝ Sailing with 🦔̦ 👽, 🦉, 🤖 & 🐛 in our 🛸. AKA, first release ready

.github/workflows/supabaseStorage.yml

@@ -0,0 +1,42 @@
+name: SupaStorage-backup
+on:
+    push:
+        branches: [ main ]
+    pull_request:
+        branches: [ main ]
+    workflow_dispatch:
+    schedule:
+        - cron: '0 8,20 * * *'
+
+    jobs:
+        backup:
+            runs-on: ubuntu-latest
+            env:
+                SUPABASE_URL: https://qwbufbmxkjfaikoloudl.supabase.co
+                SUPABASE_SERVICE_ROLE: eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6InF3YnVmYm14a2pmYWlrb2xvdWRsIiwicm9sZSI6ImFub24iLCJpYXQiOjE2Njk5NDE3NTksImV4cCI6MTk4NTUxNzc1OX0.RNz5bvsVwLvfYpZtUjy0vBPcho53_VS2AIVzT8Fm-lk
+            permissions:
+                contents: write
+            steps:
+                - name: Checkout code
+                  uses: actions/checkout@v3
+                  with:
+                    ref: ${{ gtihub.head_ref }}
+                - name: Set up Python
+                  uses: actions/setup-python@v4
+                  with:
+                    python-version: '3.10'
+
+                - name: Install dependencies and perform backup
+                  run: |
+                    pip install supabase
+                    [[ -d supabase_storage_backup ]] | mkdir supabase_storage_backup
+                    cd supabase_storage_backup
+                    wget https://raw.githubusercontent.com/signal-k/client/main/storage-backup.py
+                    chmod +x storage-backup.py
+                    python storage-backup.py
+                    rm storage-backup.py
+                shell: bash
+
+            - name: Set current date as env variable
+              run: echo "NOW=$(date + '%Y -%m-%dT%H:%M:%S')" >> $GITHUB_ENV
+            - uses: 

components/AccountAvatar.tsx

@@ -84,11 +84,13 @@ export default function AccountAvatar ({
 export function PostCardAvatar ({
     url,
     size,
-    //onUpload
+    //uid,
+    //onUpload,
 }: {
     url: Profiles['avatar_url']
-    size: number
-    //onUpload: (url: string) => void
+    size: number,
+    //onUpload: (url: string) => void,
+    //uid: string
 }) {
     let width = 'w-12';
     //width = 'w-24 md:w-36';
@@ -100,6 +102,33 @@ export function PostCardAvatar ({
         if (url) downloadImage(url);
     }, [url]);
 
+    /*const uploadAvatar: React.ChangeEventHandler<HTMLInputElement> = async (event) => {
+        try {
+            setUploading(true);
+            if (!event.target.files || event.target.files.length === 0) { // If there is no file selected
+                throw new Error('You must select an image to upload');
+            };
+
+            const file = event.target.files[0];
+            const fileExt = file.name.split('.').pop();
+            const fileName = `${uid}.${fileExt}`;
+            const filePath = `${fileName}`;
+            let { error: uploadError } = await supabase.storage
+                .from('avatars')
+                .upload(filePath, file, { upsert: true })
+            if (uploadError) {
+                throw uploadError;
+            };
+
+            onUpload(filePath);
+        } catch (error) {
+            alert('Error uploading avatar, check console');
+            console.log(error);
+        } finally {
+            setUploading(false);
+        }
+    }*/
+
     async function downloadImage(path: string) { // Get the avatar url from Supabase for the user (if it exists)
         try {
             const { data, error } = await supabase.storage.from('avatars').download(path);
@@ -187,6 +216,91 @@ export function AccountAvatarV1 ({
         }
     }
 
+    return (
+        <div>
+            {avatarUrl ? (
+                <img
+                    src={avatarUrl}
+                    alt='Avatar'
+                    className="avatar image"
+                    style={{ height: size, width: size }}
+                />
+            ) : (
+                <div className="avatar no-image" style={{ height: size, width: size }} />
+            )}
+            <div style={{ width: size }}>
+                <label className="button primary block" htmlFor='single'>
+                    {uploading ? 'Uploading ...': 'Upload new avatar'}
+                </label>
+                <input
+                    style={{
+                        visibility: 'hidden',
+                        position: 'absolute',
+                    }}
+                    type='file'
+                    id='single'
+                    accept='image/*'
+                    onChange={uploadAvatar}
+                    disabled={uploading} // Disabled once upload button/process clicked/initiated
+                />
+            </div>
+        </div>
+    );
+}
+
+export function AccountAvatarV2 ({
+    uid,
+    url,
+    size,
+    onUpload
+}) {
+    const supabase = useSupabaseClient<Database>();
+    const [avatarUrl, setAvatarUrl] = useState<Profiles['avatar_url']>(null);
+    const [uploading, setUploading] = useState(false);
+    useEffect(() => {
+        if (url) downloadImage(url);
+    }, [url]);
+
+    async function downloadImage(path: string) { // Get the avatar url from Supabase for the user (if it exists)
+        try {
+            const { data, error } = await supabase.storage.from('avatars').download(path);
+            if (error) {
+                throw error;
+            };
+            const url = URL.createObjectURL(data);
+            setAvatarUrl(url);
+        } catch (error) {
+            console.log('Error downloading image: ', error)
+        }
+    }
+
+    const uploadAvatar: React.ChangeEventHandler<HTMLInputElement> = async (event) => {
+        try {
+            setUploading(true);
+            if (!event.target.files || event.target.files.length === 0) { // If there is no file selected
+                throw new Error('You must select an image to upload');
+            };
+
+            const file = event.target.files[0];
+            const fileExt = file.name.split('.').pop();
+            const fileName = `${uid}.${fileExt}`;
+            const filePath = `${fileName}`;
+            let { error: uploadError } = await supabase.storage
+                .from('avatars')
+                .upload(filePath, file, { upsert: true })
+            if (uploadError) {
+                throw uploadError;
+            };
+
+            onUpload(filePath);
+        } catch (error) {
+            alert('Error uploading avatar, check console');
+            console.log(error);
+        } finally {
+            setUploading(false);
+        }
+    }
+
     return (
         <div>
             {avatarUrl ? (

components/Core/Footer.tsx

@@ -14,4 +14,26 @@ export default function Footer () {
             </button></Link>
         </div>
     )
+}
+
+export function FooterPlanetPage () {
+    function editPlanet() {
+        if (/planets/.test(window.location.href)) {
+  alert("The URL contains the string 'URL'");
+}
+    }
+
+    return (
+        <div className="btm-nav">
+            <Link href='/planets'><button >
+                <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" /></svg>
+            </button></Link>
+            <Link href='/'><button className="active">
+                <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
+            </button></Link>
+            <Link href='/governance/vote'><button>
+                <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" /></svg>
+            </button></Link>
+        </div>
+    )
 }

components/Core/Layout.jsx

@@ -6,7 +6,7 @@ import Footer from "./Footer";
 
 export default function CoreLayout ( { children } ) {
     // Handling responsive UI
-    const [showNav, setShowNav] = useState(true);
+    const [showNav, setShowNav] = useState(false);
     const [isMobile, setIsMobile] = useState(false);
 
     function handleResize () {
@@ -57,7 +57,7 @@ export default function CoreLayout ( { children } ) {
 
 export function GameplayLayout ( { children } ) {
     // Handling responsive UI
-    const [showNav, setShowNav] = useState(true);
+    const [showNav, setShowNav] = useState(false);
     const [isMobile, setIsMobile] = useState(false);
 
     function handleResize () {