feat: improve Release Notes display with cleaner parsing and anchor link

src/pages/Download.jsx

@@ -88,30 +88,50 @@ function formatDate(dateString) {
   });
 }
 
-// Clean release body - filter out auto-generated GitHub content
-function cleanReleaseBody(body) {
-  if (!body) return null;
+// Parse release body and extract clean changes
+function parseReleaseChanges(body) {
+  if (!body) return [];
   
-  // Filter out lines that are auto-generated or not useful
-  const filteredLines = body
-    .split('\n')
-    .filter(line => {
-      const trimmed = line.trim();
-      // Skip HTML comments
-      if (trimmed.startsWith('<!--') || trimmed.endsWith('-->')) return false;
-      // Skip "Full Changelog" links
-      if (trimmed.startsWith('**Full Changelog**:')) return false;
-      // Skip generic placeholder messages
-      if (trimmed === 'See the assets to download this version and install.') return false;
-      return true;
-    })
-    .join('\n')
-    .trim();
+  const changes = [];
+  const lines = body.split('\n');
   
-  // If nothing meaningful left, return null
-  if (!filteredLines || filteredLines.length < 10) return null;
+  for (const line of lines) {
+    const trimmed = line.trim();
+    
+    // Skip empty lines, headers, and meta content
+    if (!trimmed) continue;
+    if (trimmed.startsWith('##')) continue; // Skip all headers (## What's Changed, etc.)
+    if (trimmed.startsWith('**Full Changelog**')) continue;
+    if (trimmed.startsWith('**New Contributors**')) continue;
+    if (trimmed.includes('made their first contribution')) continue;
+    if (trimmed.startsWith('<!--') || trimmed.endsWith('-->')) continue;
+    if (trimmed === 'See the assets to download this version and install.') continue;
+    
+    // Parse change lines (starting with * or -)
+    if (trimmed.startsWith('*') || trimmed.startsWith('-')) {
+      let change = trimmed.replace(/^[\*\-]\s*/, '');
+      
+      // Extract the description from markdown links: "fix: description by @user in https://..."
+      // We want to keep: "fix: description"
+      const byMatch = change.match(/^(.+?)\s+by\s+@\w+/i);
+      if (byMatch) {
+        change = byMatch[1].trim();
+      }
+      
+      // Remove trailing "in https://..." links
+      change = change.replace(/\s+in\s+https:\/\/[^\s]+$/i, '');
+      
+      // Clean up any remaining markdown link syntax [text](url) -> text
+      change = change.replace(/\[([^\]]+)\]\([^)]+\)/g, '$1');
+      
+      // Skip if it's just a contributor line or empty after cleaning
+      if (change && change.length > 3 && !change.includes('first contribution')) {
+        changes.push(change);
+      }
+    }
+  }
   
-  return filteredLines;
+  return changes;
 }
 
 // Windows Icon
@@ -696,14 +716,16 @@ export default function Download() {
             </Button>
           </Box>
 
-          {/* Release Notes - Temporarily hidden
+          {/* Release Notes */}
           {allReleases.length > 0 && (
             <Box
+              id="release-notes"
               sx={{
                 background: 'rgba(255, 255, 255, 0.02)',
                 border: '1px solid rgba(255, 255, 255, 0.06)',
                 borderRadius: 4,
                 p: 4,
+                scrollMarginTop: '100px', // Offset for fixed header
               }}
             >
               <Typography 
@@ -713,131 +735,95 @@ export default function Download() {
                 Release Notes
               </Typography>
               
-              <Stack spacing={3}>
-                {(showAllReleases ? allReleases : allReleases.slice(0, 3)).map((release) => (
-                  <Box 
-                    key={release.id}
-                    sx={{
-                      borderLeft: '2px solid rgba(255, 149, 0, 0.4)',
-                      pl: 3,
-                      py: 1,
-                    }}
-                  >
-                    <Stack direction="row" spacing={2} alignItems="center" sx={{ mb: 1 }}>
-                      <Typography 
-                        variant="subtitle1" 
-                        sx={{ color: 'white', fontWeight: 600 }}
-                      >
-                        {release.name || release.tag_name}
-                      </Typography>
-                      <Chip
-                        label={formatDate(release.published_at)}
-                        size="small"
+              <Stack spacing={2.5}>
+                {(showAllReleases ? allReleases : allReleases.slice(0, 5))
+                  .map((release) => {
+                    const changes = parseReleaseChanges(release.body);
+                    return (
+                      <Box 
+                        key={release.id}
                         sx={{
-                          backgroundColor: 'rgba(255, 255, 255, 0.05)',
-                          color: 'rgba(255,255,255,0.5)',
-                          fontSize: 11,
-                          height: 22,
+                          borderLeft: '2px solid rgba(255, 149, 0, 0.4)',
+                          pl: 3,
+                          py: 0.5,
                         }}
-                      />
-                      {release.prerelease && (
-                        <Chip
-                          label="Pre-release"
-                          size="small"
-                          sx={{
-                            backgroundColor: 'rgba(255, 149, 0, 0.15)',
-                            color: '#FF9500',
-                            fontSize: 11,
-                            height: 22,
-                          }}
-                        />
-                      )}
-                    </Stack>
-                    
-                    {(() => {
-                      const cleanedBody = cleanReleaseBody(release.body);
-                      if (cleanedBody) {
-                        return (
+                      >
+                        <Stack direction="row" spacing={2} alignItems="center" flexWrap="wrap" sx={{ mb: changes.length > 0 ? 1 : 0 }}>
                           <Typography 
-                            variant="body2" 
-                            sx={{ 
-                              color: 'rgba(255,255,255,0.6)',
-                              whiteSpace: 'pre-line',
-                              lineHeight: 1.7,
-                              '& strong, & b': { color: 'rgba(255,255,255,0.8)' },
-                            }}
+                            variant="subtitle2" 
+                            sx={{ color: 'white', fontWeight: 600 }}
                           >
-                            {cleanedBody.split('\n').map((line, i) => {
-                              // Simple markdown parsing for headers and lists
-                              if (line.startsWith('### ')) {
-                                return (
-                                  <Box 
-                                    key={i} 
-                                    component="span" 
-                                    sx={{ 
-                                      display: 'block', 
-                                      fontWeight: 600, 
-                                      color: 'rgba(255,255,255,0.8)',
-                                      mt: i > 0 ? 1.5 : 0,
-                                      mb: 0.5,
-                                    }}
-                                  >
-                                    {line.replace('### ', '')}
-                                  </Box>
-                                );
-                              }
-                              if (line.startsWith('- ')) {
-                                return (
-                                  <Box key={i} component="span" sx={{ display: 'block', pl: 2 }}>
-                                    • {line.replace('- ', '')}
-                                  </Box>
-                                );
-                              }
-                              if (line.trim() === '') return null;
-                              return <Box key={i} component="span" sx={{ display: 'block' }}>{line}</Box>;
-                            })}
+                            {release.tag_name}
                           </Typography>
-                        );
-                      }
-                      // No meaningful release notes - show link to changelog
-                      return (
-                        <Typography 
-                          variant="body2" 
-                          sx={{ color: 'rgba(255,255,255,0.5)' }}
-                        >
-                          Bug fixes and improvements.{' '}
-                          <Box 
-                            component="a" 
-                            href={`https://github.com/pollen-robotics/reachy-mini-desktop-app/compare/${release.tag_name.replace('v', 'v')}...${release.tag_name}`}
-                            target="_blank"
-                            sx={{ color: '#FF9500', textDecoration: 'none', '&:hover': { textDecoration: 'underline' } }}
-                          >
-                            View changes →
+                          <Chip
+                            label={formatDate(release.published_at)}
+                            size="small"
+                            sx={{
+                              backgroundColor: 'rgba(255, 255, 255, 0.05)',
+                              color: 'rgba(255,255,255,0.5)',
+                              fontSize: 10,
+                              height: 20,
+                            }}
+                          />
+                          {release.prerelease && (
+                            <Chip
+                              label="Pre-release"
+                              size="small"
+                              sx={{
+                                backgroundColor: 'rgba(255, 149, 0, 0.15)',
+                                color: '#FF9500',
+                                fontSize: 10,
+                                height: 20,
+                              }}
+                            />
+                          )}
+                        </Stack>
+                        
+                        {changes.length > 0 && (
+                          <Box component="ul" sx={{ m: 0, pl: 2.5, listStyle: 'none' }}>
+                            {changes.map((change, i) => (
+                              <Box 
+                                component="li" 
+                                key={i}
+                                sx={{ 
+                                  color: 'rgba(255,255,255,0.6)',
+                                  fontSize: 13,
+                                  lineHeight: 1.6,
+                                  position: 'relative',
+                                  '&::before': {
+                                    content: '"•"',
+                                    position: 'absolute',
+                                    left: -14,
+                                    color: 'rgba(255, 149, 0, 0.6)',
+                                  }
+                                }}
+                              >
+                                {change}
+                              </Box>
+                            ))}
                           </Box>
-                        </Typography>
-                      );
-                    })()}
-                  </Box>
-                ))}
+                        )}
+                      </Box>
+                    );
+                  })}
               </Stack>
               
-              {allReleases.length > 3 && (
+              {allReleases.length > 5 && (
                 <Button
                   variant="text"
                   onClick={() => setShowAllReleases(!showAllReleases)}
                   endIcon={showAllReleases ? <ExpandLessIcon /> : <ExpandMoreIcon />}
                   sx={{ 
-                    mt: 3,
+                    mt: 2,
                     color: 'rgba(255,255,255,0.5)',
                     '&:hover': { color: 'white' },
                   }}
                 >
-                  {showAllReleases ? 'Show less' : `Show ${allReleases.length - 3} more releases`}
+                  {showAllReleases ? 'Show less' : 'Show older releases'}
                 </Button>
               )}
             </Box>
           )}
-          */}
         </Container>
       </Box>
     </Layout>