OPEN web

🎨 1. Define the New Design and Style Guidelines

  • Audit the current design (visual flaws, UX issues).
  • Define a new visual identity:
  • Color palette, typography, spacing, layout rules
  • Icons, image styles, button styles, light/dark theme
  • Create a design system (Figma or similar).
  • Decide between using a UI kit or building custom components.

✅ 2. Audit the Existing Site Content and Structure

  • List all content types:
  • Static pages (Markdown, HTML)
  • Blog posts
  • Jupyter notebooks
  • Media and static assets
  • Review current features (tags, categories, plugins).
  • Map out the current site navigation and URL structure.

🗂️ 3. Design the New Site Architecture

  • Define top-level sections (e.g. Home, Blog, Notebooks, About, Resources).
  • Map how content will be grouped:
  • Where to place notebooks?
  • Will blog posts and notebooks be cross-linked or separate?
  • Should there be categories or tags?
  • Design the new URL structure:
  • Use clean, SEO-friendly, logical URLs (e.g. /notebooks/topic-name/, /blog/year/title/)
  • Sketch the navigation system:
  • Main menu, footer links, sidebars if needed
  • Define where dynamic behavior may be needed (filters, pagination, search, etc.)
  • Plan the integration of Sphinx documentation:
  • Ensure the documentation is easily accessible from the main navigation.
  • Decide whether to embed or link to the Sphinx-generated site.

🚀 4. Set Up the Astro Project

  • Initialize a new Astro project.
  • Install required integrations (MDX, Tailwind).
  • Prepare folders based on the planned site structure.

🔄 5. Migrate Content from Pelican

For Markdown and HTML

  • Export and clean content, convert metadata to frontmatter.
  • Match content placement with the new architecture.

For Notebooks

  • Convert .ipynb files to Markdown or embed them.
  • Clean and adapt content for Astro styling.

**For Sphinx Documentation

  • Sync the existing Sphinx documentation.
  • Customize its styling to align with the new site design.
  • Integrate it into the site architecture (embed or link).

🧱 6. Implement Layouts and Components

  • Build the site layout(s) based on the new structure and design.
  • Create reusable UI components.
  • Apply the style guide across all templates and components.

⚙️ 7. Configure GitLab Pages Deployment

  • Write .gitlab-ci.yml to handle Node + Astro build.
  • Ensure that the site is published from the dist/ directory.
  • Deploy and test on GitLab Pages.

🔍 8. Quality Assurance & Accessibility

  • Run audits (Lighthouse).
  • Test all screen sizes.
  • Verify rendering of converted notebooks.
  • Add proper metadata and optimize assets.
  • Test the accessibility and presentation of the Sphinx documentation.

📈 9. Optional Improvements

  • Add full-text search.
  • Enable RSS feeds.
  • Integrate a headless CMS.
  • Enable interactivity in notebooks if needed.