bumping up to 0.0.8

.drone.yml

@@ -63,6 +63,9 @@ steps:
 
   - name: build-image
     image: docker:24
+    environment:
+      API_BASE_URL:
+        from_secret: API_BASE_URL
     volumes:
       - name: dockersock
         path: /var/run/docker.sock
@@ -70,7 +73,12 @@ steps:
       - IMAGE_TAG=$(cat /drone/src/LATEST_TAG.txt | tr -d '\n')
 
       - echo "🔨 Building Docker image apps/blog:$IMAGE_TAG ..."
-      - docker build --network=host -t apps/blog:$IMAGE_TAG -t apps/blog:latest /drone/src
+      - |
+        docker build --network=host \
+        --build-arg VITE_API_BASE_URL="$API_BASE_URL" \
+        -t apps/blog:$IMAGE_TAG \
+        -t apps/blog:latest \
+        /drone/src
 
   - name: push-image
     image: docker:24
@@ -108,9 +116,6 @@ steps:
 
   - name: run-container
     image: docker:24
-    environment:
-      API_BASE_URL:
-        from_secret: API_BASE_URL
     volumes:
       - name: dockersock
         path: /var/run/docker.sock
@@ -123,7 +128,6 @@ steps:
           --name blog \
           -p 3002:3000 \
           -e NODE_ENV=production \
-          -e VITE_API_BASE_URL=$API_BASE_URL \
           --restart always \
           apps/blog:$IMAGE_TAG
 

Dockerfile

@@ -14,7 +14,8 @@ RUN npm ci
 COPY . .
 
 # Build the app
-RUN npm run build
+ARG VITE_API_BASE_URL
+RUN VITE_API_BASE_URL=$VITE_API_BASE_URL npm run build
 
 # Stage 2: Static file server (BusyBox)
 FROM busybox:latest

package.json

@@ -1,6 +1,6 @@
 {
   "name": "aetoskia-blog-app",
-  "version": "0.0.4",
+  "version": "0.0.8",
   "private": true,
   "scripts": {
     "dev": "vite",

src/blog/Blog.tsx

@@ -56,10 +56,20 @@ export default function Blog(props: { disableCustomTheme?: boolean }) {
       <Container
         maxWidth="lg"
         component="main"
-        sx={{ display: 'flex', flexDirection: 'column', my: 16, gap: 4 }}
+        sx={{ display: 'flex', flexDirection: 'column', my: 4, gap: 4 }}
       >
         {selectedArticle === null ? (
+          <>
             <MainContent articles={articles} onSelectArticle={handleSelectArticle} />
+            <Latest
+              articles={articles}
+              onSelectArticle={handleSelectArticle}
+              onLoadMore={async (offset, limit) => {
+                // Optional: fetch more from API (if you want true pagination)
+                // await fetchMoreArticles(offset, limit);
+              }}
+            />
+          </>
         ) : (
           <Article article={articles[selectedArticle]} onBack={handleBack} />
         )}

src/blog/components/Latest.tsx

@@ -3,92 +3,13 @@ import Avatar from '@mui/material/Avatar';
 import AvatarGroup from '@mui/material/AvatarGroup';
 import Box from '@mui/material/Box';
 import Grid from '@mui/material/Grid';
-import Pagination from '@mui/material/Pagination';
 import Typography from '@mui/material/Typography';
 import { styled } from '@mui/material/styles';
 import NavigateNextRoundedIcon from '@mui/icons-material/NavigateNextRounded';
+import CircularProgress from '@mui/material/CircularProgress';
+import type { Article } from '../providers/Article'; // ✅ import type for correctness
+import Fade from '@mui/material/Fade'; // ✅ for smooth appearance
 
-const articleInfo = [
-  {
-    tag: 'Engineering',
-    title: 'The future of AI in software engineering',
-    description:
-      'Artificial intelligence is revolutionizing software engineering. Explore how AI-driven tools are enhancing development processes and improving software quality.',
-    authors: [
-      { name: 'Remy Sharp', avatar: '/static/images/avatar/1.jpg' },
-      { name: 'Travis Howard', avatar: '/static/images/avatar/2.jpg' },
-    ],
-  },
-  {
-    tag: 'Product',
-    title: 'Driving growth with user-centric product design',
-    description:
-      'Our user-centric product design approach is driving significant growth. Learn about the strategies we employ to create products that resonate with users.',
-    authors: [{ name: 'Erica Johns', avatar: '/static/images/avatar/6.jpg' }],
-  },
-  {
-    tag: 'Design',
-    title: 'Embracing minimalism in modern design',
-    description:
-      'Minimalism is a key trend in modern design. Discover how our design team incorporates minimalist principles to create clean and impactful user experiences.',
-    authors: [{ name: 'Kate Morrison', avatar: '/static/images/avatar/7.jpg' }],
-  },
-  {
-    tag: 'Company',
-    title: 'Cultivating a culture of innovation',
-    description:
-      'Innovation is at the heart of our company culture. Learn about the initiatives we have in place to foster creativity and drive groundbreaking solutions.',
-    authors: [{ name: 'Cindy Baker', avatar: '/static/images/avatar/3.jpg' }],
-  },
-  {
-    tag: 'Engineering',
-    title: 'Advancing cybersecurity with next-gen solutions',
-    description:
-      'Our next-generation cybersecurity solutions are setting new standards in the industry. Discover how we protect our clients from evolving cyber threats.',
-    authors: [
-      { name: 'Agnes Walker', avatar: '/static/images/avatar/4.jpg' },
-      { name: 'Trevor Henderson', avatar: '/static/images/avatar/5.jpg' },
-    ],
-  },
-  {
-    tag: 'Product',
-    title: 'Enhancing customer experience through innovation',
-    description:
-      'Our innovative approaches are enhancing customer experience. Learn about the new features and improvements that are delighting our users.',
-    authors: [{ name: 'Travis Howard', avatar: '/static/images/avatar/2.jpg' }],
-  },
-  {
-    tag: 'Engineering',
-    title: 'Pioneering sustainable engineering solutions',
-    description:
-      "Learn about our commitment to sustainability and the innovative engineering solutions we're implementing to create a greener future. Discover the impact of our eco-friendly initiatives.",
-    authors: [
-      { name: 'Agnes Walker', avatar: '/static/images/avatar/4.jpg' },
-      { name: 'Trevor Henderson', avatar: '/static/images/avatar/5.jpg' },
-    ],
-  },
-  {
-    tag: 'Product',
-    title: 'Maximizing efficiency with our latest product updates',
-    description:
-      'Our recent product updates are designed to help you maximize efficiency and achieve more. Get a detailed overview of the new features and improvements that can elevate your workflow.',
-    authors: [{ name: 'Travis Howard', avatar: '/static/images/avatar/2.jpg' }],
-  },
-  {
-    tag: 'Design',
-    title: 'Designing for the future: trends and insights',
-    description:
-      'Stay ahead of the curve with the latest design trends and insights. Our design team shares their expertise on creating intuitive and visually stunning user experiences.',
-    authors: [{ name: 'Kate Morrison', avatar: '/static/images/avatar/7.jpg' }],
-  },
-  {
-    tag: 'Company',
-    title: "Our company's journey: milestones and achievements",
-    description:
-      "Take a look at our company's journey and the milestones we've achieved along the way. From humble beginnings to industry leader, discover our story of growth and success.",
-    authors: [{ name: 'Cindy Baker', avatar: '/static/images/avatar/3.jpg' }],
-  },
-];
 
 const StyledTypography = styled(Typography)({
   display: '-webkit-box',
@@ -160,35 +81,81 @@ function Author({ authors }: { authors: { name: string; avatar: string }[] }) {
           ))}
         </AvatarGroup>
         <Typography variant="caption">
-          {authors.map((author) => author.name).join(', ')}
+          {authors.map((a) => a.name).join(', ')}
         </Typography>
       </Box>
-      <Typography variant="caption">July 14, 2021</Typography>
+      <Typography variant="caption">Recently Updated</Typography>
     </Box>
   );
 }
 
-export default function Latest() {
-  const [focusedCardIndex, setFocusedCardIndex] = React.useState<number | null>(
-    null,
+// ---- Latest component ---- //
+interface LatestProps {
+  articles: Article[];
+  onSelectArticle?: (index: number) => void;
+  onLoadMore?: (offset: number, limit: number) => Promise<void>; // optional async callback
+}
+
+export default function Latest({ articles, onSelectArticle, onLoadMore }: LatestProps) {
+  const [visibleCount, setVisibleCount] = React.useState(2);
+  const [loadingMore, setLoadingMore] = React.useState(false);
+  const [animating, setAnimating] = React.useState(false);
+  const loaderRef = React.useRef<HTMLDivElement | null>(null);
+
+  const displayedArticles = articles.slice(0, visibleCount);
+
+  React.useEffect(() => {
+    if (!loaderRef.current) return;
+
+    const observer = new IntersectionObserver(
+      async (entries) => {
+        const first = entries[0];
+        if (first.isIntersecting && !loadingMore && visibleCount < articles.length) {
+          console.log('🟡 Intersection triggered — loading more blogs...');
+          setLoadingMore(true);
+
+          // simulate API load delay
+          await new Promise((resolve) => setTimeout(resolve, 1000));
+
+          if (onLoadMore) {
+            console.log(`📡 Calling onLoadMore(offset=${visibleCount}, limit=2)`);
+            await onLoadMore(visibleCount, 2);
+          }
+
+          setAnimating(true);
+          setVisibleCount((prev) => {
+            const newCount = prev + 2;
+            console.log(`✅ Increasing visibleCount from ${prev} → ${newCount}`);
+            return newCount;
+          });
+
+          setTimeout(() => setAnimating(false), 600);
+          setLoadingMore(false);
+        }
+      },
+      { threshold: 0.5 }
     );
 
-  const handleFocus = (index: number) => {
-    setFocusedCardIndex(index);
-  };
+    const current = loaderRef.current;
+    observer.observe(current);
 
-  const handleBlur = () => {
-    setFocusedCardIndex(null);
+    console.log('👀 IntersectionObserver attached to loaderRef:', loaderRef.current);
+
+    return () => {
+      if (current) observer.unobserve(current);
+      console.log('🧹 IntersectionObserver detached');
     };
+  }, [loadingMore, visibleCount, articles.length, onLoadMore]);
 
   return (
-    <div>
+    <Box>
       <Typography variant="h2" gutterBottom>
         Latest
       </Typography>
       <Grid container spacing={8} columns={12} sx={{ my: 4 }}>
-        {articleInfo.map((article, index) => (
+        {displayedArticles.map((article, index) => (
           <Grid key={index} size={{ xs: 12, sm: 6 }}>
+            <Fade in timeout={animating ? 700 : 0}>
               <Box
                 sx={{
                   display: 'flex',
@@ -196,37 +163,51 @@ export default function Latest() {
                   justifyContent: 'space-between',
                   gap: 1,
                   height: '100%',
+                  transition: 'transform 0.3s ease',
+                  '&:hover': { transform: 'translateY(-3px)' },
                 }}
               >
                 <Typography gutterBottom variant="caption" component="div">
                   {article.tag}
                 </Typography>
+
                 <TitleTypography
                   gutterBottom
                   variant="h6"
-                onFocus={() => handleFocus(index)}
-                onBlur={handleBlur}
                   tabIndex={0}
-                className={focusedCardIndex === index ? 'Mui-focused' : ''}
+                  onClick={() => onSelectArticle?.(index)}
                 >
                   {article.title}
-                <NavigateNextRoundedIcon
-                  className="arrow"
-                  sx={{ fontSize: '1rem' }}
-                />
+                  <NavigateNextRoundedIcon className="arrow" sx={{ fontSize: '1rem' }} />
                 </TitleTypography>
+
                 <StyledTypography variant="body2" color="text.secondary" gutterBottom>
                   {article.description}
                 </StyledTypography>
 
                 <Author authors={article.authors} />
               </Box>
+            </Fade>
           </Grid>
         ))}
       </Grid>
-      <Box sx={{ display: 'flex', flexDirection: 'row', pt: 4 }}>
-        <Pagination hidePrevButton hideNextButton count={10} boundaryCount={10} />
+
+      <Box
+        ref={loaderRef}
+        sx={{
+          display: 'flex',
+          justifyContent: 'center',
+          py: 3,
+          opacity: loadingMore ? 1 : 0.6,
+          transition: 'opacity 0.4s ease',
+        }}
+      >
+        {loadingMore ? (
+          <CircularProgress size={32} thickness={5} />
+        ) : (
+          <Typography variant="caption">Scroll to load more...</Typography>
+        )}
+      </Box>
     </Box>
-    </div>
   );
 }

src/blog/components/MainContent.tsx

@@ -16,7 +16,6 @@ import { styled } from '@mui/material/styles';
 import SearchRoundedIcon from '@mui/icons-material/SearchRounded';
 import RssFeedRoundedIcon from '@mui/icons-material/RssFeedRounded';
 
-import { useArticles } from '../providers/Article';
 
 const StyledCard = styled(Card)(({ theme }) => ({
   display: 'flex',