Skip to content

docs(mobile): add Mobile App documentation section (EN + PT-BR) #77

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
mtlouzada wants to merge 3 commits into
base: main
Choose a base branch
from
Open

docs(mobile): add Mobile App documentation section (EN + PT-BR) #77

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
c895e49
feat: add new docs section to profile customization
mtlouzada Dec 1, 2025
3e233cf
Merge branch 'SkateHive:main' into main
mtlouzada Apr 9, 2026
9b8d3eb
docs(mobile): add Mobile App documentation section (EN + PT-BR)
mtlouzada Jun 8, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
305 changes: 305 additions & 0 deletions docs/Advance/profile-customization.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,305 @@
# Profile Customization Guide

Learn how to personalize your SkateHive profile with custom images, information, and your own magazine cover.

## Table of Contents

- [Accessing Profile Settings](#accessing-profile-settings)
- [Basic Profile Information](#basic-profile-information)
- [Custom Magazine Cover](#custom-magazine-cover)
- [Profile Images](#profile-images)
- [Connecting Wallets](#connecting-wallets)
- [Troubleshooting](#troubleshooting)

---

## Accessing Profile Settings

1. **Navigate to your profile**
- Click on your avatar in the top navigation bar
- Or visit `https://skatehive.app/user/[your-username]`

2. **Open Edit Profile Modal**
- Click the **"Edit Profile"** button on your profile page
- The edit modal will appear with all customization options

---

## Basic Profile Information

### Name (Display Name)
Your public display name shown throughout SkateHive.

**To update:**
- Find the **"Name"** field in the edit modal
- Enter your preferred display name
- This appears on your magazine cover and profile

### About / Bio
A short description about yourself or your motto.

**To update:**
- Find **"Words to live by? (optional)"**
- Enter a personal bio or skateboarding motto
- Maximum recommended length: 200 characters

### Location
Select your country to connect with local skaters.

**To update:**
- Click the **"Location"** dropdown
- Search or scroll to find your country
- Format: `US - United States`, `BR - Brazil`, etc.

### Website
Link to your personal website, Instagram, or portfolio.

**To update:**
- Enter your website URL in the **"Website"** field
- Must include `https://` or `http://`
- Example: `https://instagram.com/yourname`

---

## Custom Magazine Cover

Create a personalized magazine cover for your profile's flipbook magazine view! This feature gives you a unique, professional-looking magazine with your own cover image.

### What is the Magazine Cover?

When viewers visit your profile and click the **"Magazine"** view, they'll see your posts displayed in an interactive flipbook format. The cover page features:

- **Your custom cover image** (full-page background)
- **Your display name** (horizontal text at top left)
- **Vertical "ZINE" text** (left side, skateboarding magazine style)
- **Your profile picture** (bottom left corner)
- **3D page effect** with realistic shadows

### Setting Your Magazine Cover

#### Method 1: Upload and Crop (Recommended)

1. **Open Edit Profile modal**
2. Scroll to **"Mag Cover (optional)"**
3. Click the green **"Upload"** button
4. Select an image from your device
- Recommended: High-resolution photos (1000x1300px or larger)
- Supported formats: JPG, PNG, GIF, WEBP
- Best results: Action skateboarding photos, skatepark shots, or lifestyle images

5. **Crop your image**
- The cropper modal will appear
- Adjust the crop area by dragging
- Use the **"Zoom"** slider to fine-tune (1x to 3x)
- The aspect ratio is locked to magazine dimensions (1000x1300px)
- Preview shows exactly how your cover will look

6. **Upload to IPFS**
- Click **"Crop & Upload"**
- Wait for upload (shows "Uploading to IPFS...")
- Success notification appears
- The cropper closes automatically
- Your IPFS URL appears in the input field

7. **Save your changes**
- Click the **"Save Changes"** button at the top
- Confirm the transaction in Keychain
- Your magazine cover is now live!

#### Method 2: Paste Image URL

If you already have an image hosted online:

1. Copy the direct image URL (must end in .jpg, .png, etc.)
2. Paste it into the **"Mag Cover"** input field
3. Click **"Save Changes"**

**Recommended image specs:**
- **Dimensions:** 1000px × 1300px (portrait orientation)
- **Aspect ratio:** 0.77:1 (magazine cover ratio)
- **File size:** Under 5MB for faster loading

@coderabbitai coderabbitai Bot Jun 8, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor | ⚡ Quick win

Inconsistent file size guidance: 5MB vs 10MB.

Line 120 recommends "Under 5MB for faster loading" but line 219 in the Troubleshooting section states "max 10MB." This creates user confusion about the actual file size limit.

📐 Proposed fix to clarify the limit 
-- **File size:** Under 5MB for faster loading
+- **File size:** Under 5MB recommended (10MB maximum)
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
- **File size:** Under 5MB for faster loading
- **File size:** Under 5MB recommended (10MB maximum)
🤖 Prompt for AI Agents 
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@docs/Advance/profile-customization.md` at line 120, Update the inconsistent
file-size guidance so both the "File size" bullet that currently says "Under 5MB
for faster loading" and the "Troubleshooting" section that says "max 10MB" use a
single, consistent limit and recommendation; decide whether the hard limit is
10MB and the recommended size is under 5MB (or make both 5MB/10MB as
appropriate), then edit the "File size" bullet text and the "Troubleshooting"
entry to match that choice and add a short clarifier like "max XMB (recommended
under YMB)".

- **Format:** JPEG (best for photos), PNG (for graphics/text)

### Design Tips for Great Magazine Covers

**Photography:**
- Use high-quality, well-lit photos
- Action shots work great (skating, tricks, parks)
- Lifestyle photos showing personality
- Street photography with urban vibes

**Composition:**
- Leave space at top left for your name
- Leave space on left side for "ZINE" text
- Avoid important content in the bottom left (profile picture area)
- High contrast images work best with the green text overlay

**Style inspiration:**
- Classic skateboarding magazines (Thrasher, Transworld)
- Skateboarder magazine covers (vintage style)
- Modern skate zines and independent publications

### Viewing Your Magazine

1. Go to your profile
2. Click the **"Magazine"** view tab
3. Your custom cover displays on the first page
4. Flip through to see your posts in magazine format
5. Share your magazine link: `https://skatehive.app/user/[username]?view=magazine`

### Updating Your Cover

You can change your magazine cover anytime:

1. Open Edit Profile
2. Upload a new image or paste a new URL
3. The cropper remembers your preferences
4. Save changes to update

**Pro tip:** Match your cover to seasons, events, or your latest skate video!

---

## Profile Images

### Profile Picture

Your avatar shown across SkateHive.

**To update:**
1. Find **"Profile Picture"** section
2. Click **"Upload"** button or paste image URL
3. Recommended size: 400x400px (square)
4. Auto-displays in navigation, posts, and comments

### Profile Background

Header image on your profile page.

**To update:**
1. Find **"Profile Background"** section
2. Click **"Upload"** button or paste image URL
3. Recommended size: 1500x500px (wide banner)
4. Appears at the top of your profile

**Upload options for all images:**
- **Direct Upload:** Click "Upload" → Select file → Auto-uploads to IPFS
- **URL Method:** Paste direct image URL from any source

---

## Connecting Wallets

### Ethereum Wallet

Link your Ethereum address for Web3 features and rewards.

**To connect:**
1. Find **"Ethereum Wallet"** section
2. Click **"Connect Ethereum Wallet"**
3. Click the RainbowKit "Connect Wallet" button
4. Select your wallet provider (MetaMask, Coinbase, etc.)
5. Approve the connection
6. Click **"Link Address"** to save
7. Click **"Save Changes"**

**Features enabled:**
- $SKATEHIVE token rewards
- NFT integration
- Web3 authentication
- Cross-chain identity

---

## Troubleshooting

### Magazine Cover Issues

**❌ "Cropping failed"**
- Check image file size (max 10MB)
- Try a different image format
- Ensure stable internet connection
- Close and reopen the cropper

**❌ "Upload failed"**
- IPFS network might be slow, try again
- Check browser console for errors
- Use a different image file
- Try the URL paste method instead

**❌ Cover not showing**
- Clear browser cache
- Ensure you clicked "Save Changes"
- Check that the IPFS URL is valid
- Wait a few minutes for IPFS propagation

**❌ Text not visible on cover**
- Choose images with good contrast
- Avoid very light or very green backgrounds
- The text has black shadows for readability
- Test different zoom levels in the cropper

### General Profile Issues

**❌ Changes not saving**
- Ensure you're logged in with Keychain
- Check your Hive Resource Credits (RC)
- Approve the transaction popup
- Don't close the page during save

**❌ Images not loading**
- Wait 30-60 seconds for IPFS upload
- Check image URL is valid
- Try a different image host
- Use IPFS-hosted images for permanence




## Best Practices



Comment on lines +259 to +262

@coderabbitai coderabbitai Bot Jun 8, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor | ⚡ Quick win

Empty section: Best Practices.

The "Best Practices" heading has no content below it, creating a confusing user experience. Either add content or remove the empty section header.

🧹 Proposed fix

Option 1: Remove the empty section entirely

-
-
-
-## Best Practices
-
-
-
 ## FAQ

Option 2: Add placeholder content

 ## Best Practices

+- Use high-quality images (at least 1000px width for covers)
+- Update your profile regularly to keep content fresh
+- Test your magazine cover on different devices
+- Keep your bio concise and engaging

 ## FAQ
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
## Best Practices
## FAQ
Suggested change
## Best Practices
## Best Practices
- Use high-quality images (at least 1000px width for covers)
- Update your profile regularly to keep content fresh
- Test your magazine cover on different devices
- Keep your bio concise and engaging
## FAQ
🤖 Prompt for AI Agents 
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@docs/Advance/profile-customization.md` around lines 259 - 262, The "Best
Practices" section header in profile-customization.md is empty; either remove
the "## Best Practices" header entirely or populate it with brief guidance
(e.g., a short paragraph or bullet list of recommended practices for profile
customization such as privacy tips, naming conventions, image sizing, and
accessibility notes) so the heading is not left blank; update the content under
the "## Best Practices" header accordingly.

## FAQ

**Q: How much does it cost to update my profile?**
A: It uses Hive Resource Credits (RC), which regenerate over time. No monetary cost.

**Q: Can I change my magazine cover multiple times?**
A: Yes! Update it as often as you want (respecting RC limits).

**Q: Are my images stored forever?**
A: Images uploaded to IPFS are permanent and decentralized.

**Q: Can others see my magazine?**
A: Yes! Anyone can view your personalized magazine by visiting your profile.

**Q: What if I don't set a custom cover?**
A: Your magazine will use the default SkateHive cover with Matrix effect.

**Q: Can I remove my magazine cover?**
A: Yes, clear the URL field and save changes to revert to default.


---

## Video Tutorial

🎥 **Coming Soon:** Watch our step-by-step video guide on YouTube!

---

## Next Steps

Now that your profile is customized:

1. **Create content** - Share your skate videos and photos
2. **Connect with skaters** - Follow and engage with the community
3. **Explore features** - Try the magazine view, spot map, and DAO

**Happy skating!** 🛹

---

*Last updated: December 2025*
*SkateHive Team*
Comment on lines +1 to +305

@coderabbitai coderabbitai Bot Jun 8, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
# Check all Advance docs and their sidebar presence

echo "=== Files in docs/Advance/ ==="
fd -e md . docs/Advance/

echo -e "\n=== Sidebar Advance section ==="
rg -A 10 "label: '🛹 Advance'" sidebars.js

echo -e "\n=== SUMMARY.md Advance section ==="
rg -A 10 "^\* \[Advance\]" docs/SUMMARY.md

Repository: SkateHive/skatehive-docs

Length of output: 1132

🏁 Script executed:

#!/bin/bash
set -euo pipefail

echo "=== sidebars.js: 🛹 Advance block (more context) ==="
rg -n "label: '🛹 Advance'" -n sidebars.js
rg -n -C 5 "label: '🛹 Advance'" sidebars.js

echo -e "\n=== docs/Advance/_category_.json (if present) ==="
if [ -f "docs/Advance/_category_.json" ]; then
  echo "Found docs/Advance/_category_.json"
  wc -l docs/Advance/_category_.json
  cat -n docs/Advance/_category_.json
else
  echo "No docs/Advance/_category_.json"
fi

echo -e "\n=== Search for generated-index usage mentioning Advance ==="
rg -n "generated-index" -S docs | head -n 50

echo -e "\n=== Any other navigation config referencing profile-customization ==="
rg -n "profile-customization" -S . | head -n 50

Repository: SkateHive/skatehive-docs

Length of output: 1176

Add profile-customization to the 🛹 Advance sidebar and Summary lists for consistency.

docs/Advance/profile-customization.md exists, but it’s missing from the explicit 🛹 Advance category items in sidebars.js and from the Advance section in docs/SUMMARY.md, while other docs/Advance/* pages are listed. Since docs/Advance/_category_.json uses generated-index, it may appear on the category landing page, but the left-nav/summary won’t include it. Add Advance/profile-customization to the 🛹 Advance items in sidebars.js (and to docs/SUMMARY.md if that list is intended to mirror the sidebar).

🧰 Tools
🪛 LanguageTool

[style] ~39-~39: Consider using the synonym “brief” (= concise, using a few words, not lasting long) to strengthen your wording.
Context: ...ne cover and profile ### About / Bio A short description about yourself or your mott...

(QUICK_BRIEF)

🤖 Prompt for AI Agents 
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@docs/Advance/profile-customization.md` around lines 1 - 305, The
profile-customization doc exists but is not listed in the Advance sidebar or
SUMMARY; update sidebars.js to add "Advance/profile-customization" into the 🛹
Advance category's items array (match ordering with other docs/Advance/*
entries) and also add an entry "Advance/profile-customization" (or
"Advance/profile-customization.md" if SUMMARY uses filenames) into
docs/SUMMARY.md Advance section so the left-nav and summary mirror each other;
confirm _category_.json remains as generated-index and does not need changes.

8 changes: 8 additions & 0 deletions docs/Mobile/_category_.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
{
"label": "📱 Mobile App",
"position": 5,
"link": {
"type": "generated-index",
"description": "Everything you need to know about the Skatehive mobile app — available on iOS and Android."
}
}
Loading