Update components folder structure to be section-based (#143)

.eslintrc.json

@@ -84,7 +84,8 @@
 
         // Imports and exports order.
         "simple-import-sort/imports": 2,
-        "simple-import-sort/exports": 2
+        "simple-import-sort/exports": 2,
+        "import/order": 0
       }
     }
   ]

src/components/icon-button.astro

@@ -1,7 +1,8 @@
 ---
-import Icon from '@/atoms/icon';
 import type { IconName } from '@/types/icon';
 
+import Icon from './icon';
+
 type IconButtonSize = 'small' | 'large';
 
 export interface Props {

src/components/icon-with-tooltip.tsx

@@ -1,5 +1,4 @@
-import type { IconProps } from './icon';
-import Icon from './icon';
+import Icon, { IconProps } from './icon';
 import Tooltip, { TooltipProps } from './tooltip';
 
 type Props = IconProps & Omit<TooltipProps, 'children'>;

src/components/sidebar-item.tsx

@@ -1,9 +1,9 @@
 import { useLocation } from 'react-use';
 
-import Icon from '@/atoms/icon';
 import type { Section } from '@/types/data';
 import type { IconName } from '@/types/icon';
 
+import Icon from './icon';
 import Tooltip from './tooltip';
 
 export interface SidebarItemProps {

src/components/tag.astro

@@ -1,7 +1,8 @@
 ---
-import Icon from '@/atoms/icon';
 import type { IconName } from '@/types/icon';
 
+import Icon from './icon';
+
 export interface Props {
   name?: IconName;
   color?: string;

src/components/tags-list.astro

@@ -1,7 +1,8 @@
 ---
-import TagComponent from '@/atoms/tag.astro';
 import type { Tag } from '@/types/common';
 
+import TagComponent from './tag.astro';
+
 export interface Props {
   tags: Tag[];
 }

src/components/timestamp.astro

@@ -1,5 +1,5 @@
 ---
-import Typography from '@/atoms/typography.astro';
+import Typography from './typography.astro';
 
 export interface Props {
   startDate: Date;

src/pages/_playground/button.astro

@@ -1,5 +1,5 @@
 ---
-import Button from '@/atoms/button.astro';
+import Button from '@/components/button.astro';
 ---
 
 <div class="p-5">

src/pages/_playground/favorites.astro

@@ -1,9 +1,9 @@
 ---
-import BookTile from '@/atoms/book-tile.astro';
-import MediaTile from '@/atoms/media-tile.astro';
-import PersonTile from '@/atoms/person-tile.astro';
-import Typography from '@/atoms/typography.astro';
-import VideoTile from '@/atoms/video-tile.astro';
+import Typography from '@/components/typography.astro';
+import BookTile from '@/sections/favorites/book-tile.astro';
+import MediaTile from '@/sections/favorites/media-tile.astro';
+import PersonTile from '@/sections/favorites/person-tile.astro';
+import VideoTile from '@/sections/favorites/video-tile.astro';
 import type { Book, Media, Person, Video } from '@/types/favorites-section';
 
 const book: Book = {

src/pages/_playground/icon-button.astro

@@ -1,5 +1,5 @@
 ---
-import IconButton from '@/atoms/icon-button.astro';
+import IconButton from '@/components/icon-button.astro';
 ---
 
 <div class="flex flex-col gap-2 p-5">

src/pages/_playground/icon.astro

@@ -1,5 +1,5 @@
 ---
-import Icon from '@/atoms/icon';
+import Icon from '@/components/icon';
 ---
 
 <div class="p-5">

src/pages/_playground/labelled-value.astro

@@ -1,5 +1,5 @@
 ---
-import LabelledValue from '@/atoms/labelled-value.astro';
+import LabelledValue from '@/components/labelled-value.astro';
 ---
 
 <div class="p-5">

src/pages/_playground/main-section.astro

@@ -1,8 +1,12 @@
 ---
-import MainSection from '@/sections/main-section.astro';
+import MainSection from '@/sections/main/main-section.astro';
 import type { MainSection as MainSectionData } from '@/types/main-section';
 
 const mainSectionData: MainSectionData = {
+  config: {
+    icon: 'fa6-solid:user',
+    title: 'About me',
+  },
   image: import('@/assets/my-image.jpeg'),
   fullName: 'Mark Freeman',
   role: 'Senior React Developer',

src/pages/_playground/projects-timeline.astro

@@ -1,5 +1,5 @@
 ---
-import ProjectTimelineItem from '@/organisms/project-timeline-item.astro';
+import ProjectTimelineItem from '@/sections/portfolio/project-timeline-item.astro';
 import type { I18n } from '@/types/i18n';
 import type { Project } from '@/types/portfolio-section';
 

src/pages/_playground/section-card.astro

@@ -1,7 +1,7 @@
 ---
-import SectionCard from '@/atoms/section-card.astro';
+import SectionCard from '@/components/section-card.astro';
 ---
 
 <div class="p-5">
-  <SectionCard>SectionCard text</SectionCard>
+  <SectionCard section="main">SectionCard text</SectionCard>
 </div>

src/pages/_playground/sidebar-item.astro

@@ -1,5 +1,5 @@
 ---
-import SidebarItem from '@/atoms/sidebar-item';
+import SidebarItem from '@/components/sidebar-item';
 ---
 
 <div class="p-5">

src/pages/_playground/sidebar.astro

@@ -1,6 +1,6 @@
 ---
-import SidebarItem from '@/atoms/sidebar-item';
-import Sidebar from '@/organisms/sidebar.astro';
+import Sidebar from '@/components/sidebar.astro';
+import SidebarItem from '@/components/sidebar-item';
 ---
 
 <div class="relative p-5">

src/pages/_playground/skill.astro

@@ -1,5 +1,5 @@
 ---
-import Skill from '@/organisms/skill.astro';
+import Skill from '@/sections/skills/skill.astro';
 import type { LevelledSkill } from '@/types/skills-section';
 
 const levelledSkill: LevelledSkill = {

src/pages/_playground/skills-section.astro

@@ -1,5 +1,5 @@
 ---
-import SkillsSection from '@/sections/skills-section.astro';
+import SkillsSection from '@/sections/skills/skills-section.astro';
 import type { SkillsSection as SkillsSectionData } from '@/types/skills-section';
 
 const skills: SkillsSectionData = {

src/pages/_playground/tag.astro

@@ -1,5 +1,5 @@
 ---
-import Tag from '@/atoms/tag.astro';
+import Tag from '@/components/tag.astro';
 ---
 
 <div class="p-5">

src/pages/_playground/testimonial.astro

@@ -1,5 +1,5 @@
 ---
-import Testimonial from '@/organisms/testimonial.astro';
+import Testimonial from '@/sections/testimonials/testimonial.astro';
 import type { Testimonial as TestimonialData } from '@/types/testimonials-section';
 
 const testimonial: TestimonialData = {

src/pages/_playground/testimonials-section.astro

@@ -1,5 +1,5 @@
 ---
-import TestimonialsSection from '@/sections/testimonials-section.astro';
+import TestimonialsSection from '@/sections/testimonials/testimonials-section.astro';
 import type { Testimonial } from '@/types/testimonials-section';
 
 const testimonials: Testimonial[] = [

src/pages/_playground/typography.astro

@@ -1,5 +1,5 @@
 ---
-import Typography from '@/atoms/typography.astro';
+import Typography from '@/components/typography.astro';
 
 const text = 'A quick brown fox jumps over the lazy dog';
 ---

src/pages/_playground/work-timeline.astro

@@ -1,5 +1,5 @@
 ---
-import WorkTimelineItem from '@/organisms/work-timeline-item.astro';
+import WorkTimelineItem from '@/sections/experience/work-timeline-item.astro';
 import type { Job } from '@/types/experience-section';
 import type { I18n } from '@/types/i18n';
 

src/pages/index.astro

@@ -1,13 +1,13 @@
 ---
-import SidebarItem from '@/atoms/sidebar-item';
-import ThemeToggle from '@/atoms/theme-icon';
-import Sidebar from '@/organisms/sidebar.astro';
-import ExperienceSection from '@/sections/experience-section.astro';
-import FavoritesSection from '@/sections/favorites-section.astro';
-import MainSection from '@/sections/main-section.astro';
-import PortfolioSection from '@/sections/portfolio-section.astro';
-import SkillsSection from '@/sections/skills-section.astro';
-import TestimonialsSection from '@/sections/testimonials-section.astro';
+import Sidebar from '@/components/sidebar.astro';
+import SidebarItem from '@/components/sidebar-item';
+import ThemeToggle from '@/components/theme-icon';
+import ExperienceSection from '@/sections/experience/experience-section.astro';
+import FavoritesSection from '@/sections/favorites/favorites-section.astro';
+import MainSection from '@/sections/main/main-section.astro';
+import PortfolioSection from '@/sections/portfolio/portfolio-section.astro';
+import SkillsSection from '@/sections/skills/skills-section.astro';
+import TestimonialsSection from '@/sections/testimonials/testimonials-section.astro';
 import getObjectKeys from '@/utils/getObjectKeys';
 
 import data from '../data';

src/sections/experience/experience-section.astro

@@ -1,13 +1,14 @@
 ---
-import DividedList from '@/atoms/divided-list.astro';
-import Divider from '@/atoms/divider.astro';
-import SectionCard from '@/atoms/section-card.astro';
-import WorkTimelineItem from '@/organisms/work-timeline-item.astro';
+import DividedList from '@/components/divided-list.astro';
+import Divider from '@/components/divider.astro';
+import SectionCard from '@/components/section-card.astro';
 import type { Section } from '@/types/data';
 import type { ExperienceSection, Job } from '@/types/experience-section';
 import type { I18n } from '@/types/i18n';
 import removeLast from '@/utils/remove-last';
 
+import WorkTimelineItem from './work-timeline-item.astro';
+
 export interface Props extends ExperienceSection {
   jobs: Job[];
   i18n: I18n;

src/sections/experience/work-timeline-item.astro

@@ -1,12 +1,11 @@
 ---
-import IconButton from '@/atoms/icon-button.astro';
-import Timestamp from '@/atoms/timestamp.astro';
-import Typography from '@/atoms/typography.astro';
+import IconButton from '@/components/icon-button.astro';
+import TagsList from '@/components/tags-list.astro';
+import Timestamp from '@/components/timestamp.astro';
+import Typography from '@/components/typography.astro';
 import type { Job } from '@/types/experience-section';
 import type { I18n } from '@/types/i18n';
 
-import TagsList from '../molecules/tags-list.astro';
-
 export interface Props {
   job: Job;
   i18n: I18n;

src/sections/favorites/book-tile.astro

@@ -1,7 +1,7 @@
 ---
 import { Image } from '@astrojs/image/components';
 
-import Typography from '@/atoms/typography.astro';
+import Typography from '@/components/typography.astro';
 import type { Book } from '@/types/favorites-section';
 
 export interface Props {

src/sections/favorites/favorites-section.astro

@@ -1,15 +1,16 @@
 ---
 import type { ComponentInstance } from 'astro';
 
-import BookTile from '@/atoms/book-tile.astro';
-import MediaTile from '@/atoms/media-tile.astro';
-import PersonTile from '@/atoms/person-tile.astro';
-import SectionCard from '@/atoms/section-card.astro';
-import Typography from '@/atoms/typography.astro';
-import VideoTile from '@/atoms/video-tile.astro';
+import SectionCard from '@/components/section-card.astro';
+import Typography from '@/components/typography.astro';
 import type { Section } from '@/types/data';
 import type { Book, FavoritesSection, Media, Person, Video } from '@/types/favorites-section';
 
+import BookTile from './book-tile.astro';
+import MediaTile from './media-tile.astro';
+import PersonTile from './person-tile.astro';
+import VideoTile from './video-tile.astro';
+
 export interface Props extends FavoritesSection {}
 
 const {

src/sections/favorites/media-tile.astro

@@ -1,7 +1,7 @@
 ---
 import { Image } from '@astrojs/image/components';
 
-import Typography from '@/atoms/typography.astro';
+import Typography from '@/components/typography.astro';
 import type { Media } from '@/types/favorites-section';
 
 export interface Props {

src/sections/favorites/person-tile.astro

@@ -1,7 +1,7 @@
 ---
 import { Image } from '@astrojs/image/components';
 
-import Typography from '@/atoms/typography.astro';
+import Typography from '@/components/typography.astro';
 import type { Person } from '@/types/favorites-section';
 
 export interface Props {

src/sections/favorites/video-tile.astro

@@ -1,7 +1,7 @@
 ---
 import { Image } from '@astrojs/image/components';
 
-import Typography from '@/atoms/typography.astro';
+import Typography from '@/components/typography.astro';
 import type { Video } from '@/types/favorites-section';
 
 export interface Props {

src/sections/main/main-section.astro

@@ -1,15 +1,14 @@
 ---
 import { Image } from '@astrojs/image/components';
 
-import Button from '@/atoms/button.astro';
-import IconButton from '@/atoms/icon-button.astro';
-import SectionCard from '@/atoms/section-card.astro';
-import Typography from '@/atoms/typography.astro';
+import Button from '@/components/button.astro';
+import IconButton from '@/components/icon-button.astro';
+import SectionCard from '@/components/section-card.astro';
+import TagsList from '@/components/tags-list.astro';
+import Typography from '@/components/typography.astro';
 import type { Section } from '@/types/data';
 import type { MainSection } from '@/types/main-section';
 
-import TagsList from '../molecules/tags-list.astro';
-
 export interface Props extends MainSection {}
 
 const {

src/sections/portfolio/portfolio-section.astro

@@ -1,13 +1,14 @@
 ---
-import DividedList from '@/atoms/divided-list.astro';
-import Divider from '@/atoms/divider.astro';
-import SectionCard from '@/atoms/section-card.astro';
-import ProjectTimelineItem from '@/organisms/project-timeline-item.astro';
+import DividedList from '@/components/divided-list.astro';
+import Divider from '@/components/divider.astro';
+import SectionCard from '@/components/section-card.astro';
 import type { Section } from '@/types/data';
 import type { I18n } from '@/types/i18n';
 import type { PortfolioSection } from '@/types/portfolio-section';
 import removeLast from '@/utils/remove-last';
 
+import ProjectTimelineItem from './project-timeline-item.astro';
+
 export interface Props extends PortfolioSection {
   i18n: I18n;
 }

src/sections/portfolio/project-timeline-item.astro

@@ -1,15 +1,14 @@
 ---
 import { Image } from '@astrojs/image/components';
 
-import IconButton from '@/atoms/icon-button.astro';
-import LabelledValue from '@/atoms/labelled-value.astro';
-import Timestamp from '@/atoms/timestamp.astro';
-import Typography from '@/atoms/typography.astro';
+import IconButton from '@/components/icon-button.astro';
+import LabelledValue from '@/components/labelled-value.astro';
+import TagsList from '@/components/tags-list.astro';
+import Timestamp from '@/components/timestamp.astro';
+import Typography from '@/components/typography.astro';
 import type { I18n } from '@/types/i18n';
 import type { Project } from '@/types/portfolio-section';
 
-import TagsList from '../molecules/tags-list.astro';
-
 export interface Props {
   project: Project;
   i18n: I18n;

src/sections/skills/skill-level.astro

@@ -1,5 +1,5 @@
 ---
-import SkillLevelTile from '@/atoms/skill-level-tile.astro';
+import SkillLevelTile from './skill-level-tile.astro';
 
 export interface Props {
   skillLevel: number;

src/sections/skills/skill-subsection.astro

@@ -1,9 +1,9 @@
 ---
-import Typography from '@/atoms/typography.astro';
+import TagsList from '@/components/tags-list.astro';
+import Typography from '@/components/typography.astro';
 import type { Tag } from '@/types/common';
 import type { LevelledSkill, SkillSet } from '@/types/skills-section';
 
-import TagsList from '../molecules/tags-list.astro';
 import LevelledSkillSubsection from './levelled-skill-subsection.astro';
 
 export interface Props {

src/sections/skills/skill.astro

@@ -1,10 +1,10 @@
 ---
-import Icon from '@/atoms/icon';
-import IconWithTooltip from '@/atoms/icon-with-tooltip';
-import Typography from '@/atoms/typography.astro';
+import IconWithTooltip from '@/components/icon-with-tooltip';
+import Typography from '@/components/typography.astro';
 import type { IconName } from '@/types/icon';
 import type { LevelledSkill } from '@/types/skills-section';
 
+import Icon from '../../components/icon';
 import SkillLevel from './skill-level.astro';
 
 export interface Props extends LevelledSkill {}

src/sections/skills/skills-section.astro

@@ -1,9 +1,10 @@
 ---
-import SectionCard from '@/atoms/section-card.astro';
-import SkillSubsection from '@/organisms/skill-subsection.astro';
+import SectionCard from '@/components/section-card.astro';
 import type { Section } from '@/types/data';
 import type { SkillsSection } from '@/types/skills-section';
 
+import SkillSubsection from './skill-subsection.astro';
+
 export interface Props extends SkillsSection {}
 
 const {

src/sections/testimonials/testimonial.astro

@@ -1,8 +1,8 @@
 ---
 import { Image } from '@astrojs/image/components';
 
-import IconButton from '@/atoms/icon-button.astro';
-import Typography from '@/atoms/typography.astro';
+import IconButton from '@/components/icon-button.astro';
+import Typography from '@/components/typography.astro';
 import type { Testimonial } from '@/types/testimonials-section';
 
 export interface Props {

src/sections/testimonials/testimonials-section.astro

@@ -1,12 +1,13 @@
 ---
-import DividedList from '@/atoms/divided-list.astro';
-import Divider from '@/atoms/divider.astro';
-import SectionCard from '@/atoms/section-card.astro';
-import Testimonial from '@/organisms/testimonial.astro';
+import DividedList from '@/components/divided-list.astro';
+import Divider from '@/components/divider.astro';
+import SectionCard from '@/components/section-card.astro';
 import type { Section } from '@/types/data';
 import type { TestimonialsSection } from '@/types/testimonials-section';
 import removeLast from '@/utils/remove-last';
 
+import Testimonial from './testimonial.astro';
+
 export interface Props extends TestimonialsSection {}
 
 const {

tsconfig.json

@@ -32,13 +32,7 @@
     // Add aliases for common paths.
     "baseUrl": ".",
     "paths": {
-      "@/atoms/*": ["src/components/atoms/*"],
-      "@/organisms/*": ["src/components/organisms/*"],
-      "@/sections/*": ["src/components/sections/*"],
-      "@/assets/*": ["src/assets/*"],
-      "@/types/*": ["src/types/*"],
-      "@/constants/*": ["src/constants/*"],
-      "@/utils/*": ["src/utils/*"]
+      "@/*": ["src/*"]
     }
   },
   "include": ["**/*.ts", "**/*.tsx", "**/*.cjs", "**/*.astro"]