Features for a Professional Looking News Website

1. Post are writen with .mdx

2. Search working in prod, not in dev when running npm run dev

It uses pagefind, similarly to the astroverse/visvrs theme

npm install astro-pagefind pagefind

3. Image optimizations to .webp

4. OpenGraph images working when sharing the web (and also considering the post images)

• Icons: https://lucide.dev/

MIT | Beautiful & consistent icon toolkit made by the community. Open-source project and a fork of Feather Icons.

5. RSS Feed and sitemap!

• Very modular implementation of which posts goes where thanks to isBigHeadline and isSmallHeadline
• Base path is present at index.ts

curl https://beyondajourney.pages.dev/rss.xml
curl https://beyondajourney.pages.dev/sitemap-index.xml

{
  href: "https://beyondajourney.pages.dev/rss.xml",
  text: "RSS",
},
{
  href: "https://beyondajourney.pages.dev/sitemap-index.xml",
  text: "Sitemap",
},
//....

sudo apt install liferea

What could be better?

1. The header could follow the users when its scrolling
2. It could bring multilanguage support out of the box…

Based on my exploration of the theme, here’s how the gallery system is structured and functions:

1. Gallery Configuration (YAML-based) The gallery is primarily defined in /src/gallery/gallery.yaml, which contains:

Collections: Categories for organizing photos (nature, travel, street) Images: Individual image entries with: Path to the image file Metadata (title, description) Collection assignments (including “featured” for highlighted images)

2. Image Management System The theme handles images through:

imageStore.ts: Core logic for loading and processing images Glob Imports: Images are loaded dynamically using import.meta.glob(’/src/**/*.{jpg,jpeg,png,gif}’) Collection-based Filtering: getImagesByCollection() function retrieves images belonging to specific collections

3. Gallery Rendering Components The gallery is displayed using:

PhotoGrid.astro: Main component that creates the image grid layout FeaturedGallery.astro: Shows selected “featured” works GLightbox Integration: Provides lightbox functionality when images are clicked

4. Image Display Process When the gallery renders:

Images are loaded from the specified directories Metadata from the YAML file is applied to each image Images are displayed in a responsive grid Clicking an image opens it in a lightbox with title/description

5. Directory Structure Images are organized in collection-based folders:

/src/gallery/nature/ /src/gallery/travel/ /src/gallery/street/ This architecture makes it easy to add new images by:

Adding the image file to the appropriate directory Adding an entry in the gallery.yaml file with metadata and collection assignments Would you like me to explain any specific aspect of the gallery system in more detail?

• Post are writen with .mdx
• Search working in prod
• Cool post index that follows you when in a PC (not at a phone)

What could be better?

• The header could follow the users when its scrolling

• Search working in prod and also in Dev! Using lucide-react:

npm install lucide-react