fix(demos/narcissus-astro): 💫 switch to using path aliases

demos/narcissus-astro/astro.config.mjs

@@ -1,4 +1,5 @@
 import { vanillaExtractPlugin } from '@vanilla-extract/vite-plugin';
+import path from 'node:path';
 import { imagetools } from 'vite-imagetools';
 
 export default {
@@ -7,7 +8,7 @@ export default {
   // dist: './dist',       // When running `astro build`, path to final static output
   // public: './public',   // A folder of static files Astro will copy to the root. Useful for favicons, images, and other files that don’t need processing.
   buildOptions: {
-    // site: 'http://example.com',           // Your public domain, e.g.: https://my-site.dev/. Used to generate sitemaps and canonical URLs.
+    site: 'https://narcissus-astro.rodneylab.com', // Your public domain, e.g.: https://my-site.dev/. Used to generate sitemaps and canonical URLs.
     sitemap: true, // Generate sitemap (set to "false" to disable)
   },
   devOptions: {
@@ -17,6 +18,17 @@ export default {
   },
   renderers: ['@astrojs/renderer-react', '@astrojs/renderer-svelte'],
   vite: {
+    resolve: {
+      alias: {
+        $components: path.resolve('./src/components'),
+        $configuration: path.resolve('./src/configuration'),
+        $constants: path.resolve('./src/constants'),
+        $hooks: path.resolve('./src/hooks'),
+        $layouts: path.resolve('./src/layouts'),
+        $pages: path.resolve('./src/pages'),
+        $styles: path.resolve('./src/styles'),
+      },
+    },
     plugins: [vanillaExtractPlugin(), imagetools({ force: true })],
   },
 };

demos/narcissus-astro/src/components/AboutCard.tsx

@@ -6,8 +6,8 @@ import {
   extraSummaryText,
   summaryHeading,
   summaryText,
-} from './AboutCard.css';
-import Card from './Card';
+} from '$components/AboutCard.css';
+import Card from '$components/Card';
 
 interface AboutCardProps {}
 

demos/narcissus-astro/src/components/BlogPostSummary.tsx

@@ -1,7 +1,7 @@
 import dayjs from 'dayjs';
 import React from 'react';
 import type { FC } from 'react';
-import { H_ELLIPSIS_ENTITY } from '../constants/entities';
+import { H_ELLIPSIS_ENTITY } from '$constants/entities';
 import {
   container,
   content,
@@ -12,8 +12,8 @@ import {
   postMeta,
   viewsLikesContainer,
   viewsLikesContent,
-} from './BlogPostSummary.css';
-import PostViewsLikes from './PostViewsLikes';
+} from '$components/BlogPostSummary.css';
+import PostViewsLikes from '$components/PostViewsLikes';
 
 interface BlogPostSummaryProps {
   postTitle: string;

demos/narcissus-astro/src/components/BlogRoll.tsx

@@ -1,8 +1,8 @@
 import type { FC } from 'react';
 import React, { useState } from 'react';
-import { postSummary } from './BlogRoll.css';
-import { H_ELLIPSIS_ENTITY } from '../constants/entities';
-import BlogPostSummary from './BlogPostSummary';
+import { postSummary } from '$components/BlogRoll.css';
+import { H_ELLIPSIS_ENTITY } from '$constants/entities';
+import BlogPostSummary from '$components/BlogPostSummary';
 
 interface BlogRollProps {
   initialPosts?: number;

demos/narcissus-astro/src/components/CommentForm.tsx

@@ -8,16 +8,16 @@ import {
   formField,
   formLink,
   heading,
-} from './CommentForm.css';
-import Card from './Card';
-import TextInputField from './TextInputField';
-import TextArea from './TextArea';
-import { useTheme } from '../hooks/themeContext';
-import { ThemeProvider } from '../hooks/themeContext';
-import website from '../configuration/website';
+} from '$components/CommentForm.css';
+import Card from '$components/Card';
+import TextInputField from '$components/TextInputField';
+import TextArea from '$components/TextArea';
+import { ThemeProvider, useTheme } from '$hooks/themeContext';
+import website from '$configuration/website';
 import { useForm } from 'react-hook-form';
 
-const ssr = import.meta.env.SSR;
+// const ssr = import.meta.env.SSR;
+const ssr = typeof window === 'undefined';
 
 interface CommentFormProps {
   slug: string;
@@ -50,9 +50,9 @@ const CommentForm: FC<CommentFormProps> = function CommentForm({ slug }) {
     comment = '';
   }
 
-  function validateInputs() {
-    errors = { ...errors, ...validName(name), ...validEmail(email), ...validComment(comment) };
-  }
+  // function validateInputs() {
+  //   errors = { ...errors, ...validName(name), ...validEmail(email), ...validComment(comment) };
+  // }
 
   const onSubmit = async () => {
     try {

demos/narcissus-astro/src/components/Comments.tsx

@@ -1,13 +1,13 @@
 import React from 'react';
 import type { FC, ReactNode } from 'react';
-import Card from './Card';
+import Card from '$components/Card';
 import {
   authorText,
   commentContainer,
   commentContent,
   commentListItem,
   dateText,
-} from './Comments.css';
+} from '$components/Comments.css';
 import dayjs from 'dayjs';
 import 'dayjs/locale/en-gb.js';
 import localizedFormat from 'dayjs/plugin/localizedFormat.js';

demos/narcissus-astro/src/components/ContactsCard.tsx

@@ -1,18 +1,18 @@
 import React from 'react';
 import type { FC } from 'react';
-import SocialIcons from './SocialIcons';
+import SocialIcons from '$components/SocialIcons';
 import {
   cardContainer,
   cardContent,
   contactAddress,
   contactDetails,
   contactDetailsList,
   contactDetailsListItem,
-} from './ContactsCard.css';
-import website from '../configuration/website';
-import { ThemeProvider, useTheme } from '../hooks/themeContext';
-import Card from './Card';
-import ExternalLink from './ExternalLink';
+} from '$components/ContactsCard.css';
+import website from '$configuration/website';
+import { ThemeProvider, useTheme } from '$hooks/themeContext';
+import Card from '$components/Card';
+import ExternalLink from '$components/ExternalLink';
 
 const width = 36;
 const height = 36;
@@ -93,11 +93,6 @@ const ContactsCard: FC<ContactsCardProps> = function ContactsCard() {
   );
 };
 
-Card.defaultProps = {
-  containerClass: '',
-  contentClass: '',
-};
-
 const ThemeWrapper: FC<{}> = function ThemeWrapper() {
   return (
     <ThemeProvider>

demos/narcissus-astro/src/components/Icons/SocialNetwork.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import type { FC } from 'react';
 import { SocialIcon } from 'react-social-icons';
-import { useTheme } from '../../hooks/themeContext';
+import { useTheme } from '$hooks/themeContext';
 
 const BUTTON_SIZE = 48;
 

demos/narcissus-astro/src/components/Layout/Footer.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import type { FC } from 'react';
-import SocialNetworkIcon from '../../components/Icons/SocialNetwork';
-import website from '../../configuration/website';
-import { COPYRIGHT_ENTITY } from '../../constants/entities';
+import SocialNetworkIcon from '$components/Icons/SocialNetwork';
+import website from '$configuration/website';
+import { COPYRIGHT_ENTITY } from '$constants/entities';
 import {
   container,
   content,
@@ -11,8 +11,8 @@ import {
   footerIconsList,
   footerIconsListItem,
   footerLink,
-} from './Footer.css';
-import RodneyLabCredit from './RodneyLabCredit';
+} from '$components/Layout/Footer.css';
+import RodneyLabCredit from '$components/Layout/RodneyLabCredit';
 
 interface FooterProps {
   slug: string;

demos/narcissus-astro/src/components/Layout/Header.tsx

@@ -1,9 +1,9 @@
 import React, { useEffect } from 'react';
 import type { FC } from 'react';
-import { screenReaderText } from '../../styles/styles.css';
-import { themeButton, themeButtonContainer } from './Header.css.ts';
-import MoonIcon from '../Icons/Moon';
-import SunIcon from '../Icons/Sun';
+import { screenReaderText } from '$styles/styles.css';
+import { themeButton, themeButtonContainer } from '$components/Layout/Header.css.ts';
+import MoonIcon from '$components/Icons/Moon';
+import SunIcon from '$components/Icons/Sun';
 import {
   container,
   content,

demos/narcissus-astro/src/components/Layout/RodneyLabCredit.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import type { FC } from 'react';
-import { container, link, logo, rodneyLabText } from './RodneyLabCredit.css';
+import { container, link, logo, rodneyLabText } from '$components/Layout/RodneyLabCredit.css';
 
 const RodneyLabCredit: FC<{}> = () => (
   <div className={container}>

demos/narcissus-astro/src/components/Layout/index.tsx

@@ -12,14 +12,14 @@ import '@fontsource/slabo-13px';
 // [normal]
 import '@fontsource/slabo-27px';
 import type { FC, ReactElement, ReactNode } from 'react';
-import { ThemeProvider, useTheme } from '../../hooks/themeContext';
-import '../../styles/normalise.css';
-import '../../styles/styles.css';
-import darkTheme from '../../styles/themes/dark.css';
-import lightTheme from '../../styles/themes/light.css';
-import Footer from './Footer';
-import Header from './Header';
-import { container, main } from './layout.css';
+import { ThemeProvider, useTheme } from '$hooks/themeContext';
+import '$styles/normalise.css';
+import '$styles/styles.css';
+import darkTheme from '$styles/themes/dark.css';
+import lightTheme from '$styles/themes/light.css';
+import Footer from '$components/Layout/Footer';
+import Header from '$components/Layout/Header';
+import { container, main } from '$components/Layout/layout.css';
 
 interface LayoutProps {
   children: ReactNode;

demos/narcissus-astro/src/components/MessageForm.tsx

@@ -1,9 +1,9 @@
 import type { FC } from 'react';
 import React, { useEffect, useState } from 'react';
 import { useForm } from 'react-hook-form';
-import website from '../configuration/website';
-import { ThemeProvider, useTheme } from '../hooks/themeContext';
-import Card from './Card';
+import website from '$configuration/website';
+import { ThemeProvider, useTheme } from '$hooks/themeContext';
+import Card from '$components/Card';
 import {
   button,
   buttonContainer,
@@ -14,9 +14,9 @@ import {
   formField,
   formLink,
   heading,
-} from './MessageForm.css';
-import TextArea from './TextArea';
-import TextInputField from './TextInputField';
+} from '$components/MessageForm.css';
+import TextArea from '$components/TextArea';
+import TextInputField from '$components/TextInputField';
 
 const ssr = typeof window === 'undefined';
 

demos/narcissus-astro/src/components/PostViewsLikes.tsx

@@ -1,7 +1,7 @@
 import type { FC } from 'react';
 import React from 'react';
-import PostViewsLikesPure from './PostViewsLikesPure';
-import website from '../configuration/website';
+import PostViewsLikesPure from '$components/PostViewsLikesPure';
+import website from '$configuration/website';
 
 interface PostViewsLikesProps {
   likes: number;

demos/narcissus-astro/src/components/PostViewsLikesPure.tsx

@@ -1,12 +1,19 @@
 import type { FC } from 'react';
 import React, { useEffect, useLayoutEffect, useState } from 'react';
-import website from '../configuration/website';
-import { container, content, icon, likeButton, link, meta } from './PostViewsLikesPure.css';
-import NotYetLikedIcon from './Icons/HeartOutline';
-import LikedIcon from './Icons/HeartSolid';
-import ViewsIcon from './Icons/View';
-import CommentIcon from './Icons/Comment';
-import { LikedViewedProvider, useLikedViewed } from '../hooks/postLikedViewedContext';
+import website from '$configuration/website';
+import {
+  container,
+  content,
+  icon,
+  likeButton,
+  link,
+  meta,
+} from '$components/PostViewsLikesPure.css';
+import NotYetLikedIcon from '$components/Icons/HeartOutline';
+import LikedIcon from '$components/Icons/HeartSolid';
+import ViewsIcon from '$components/Icons/View';
+import CommentIcon from '$components/Icons/Comment';
+import { LikedViewedProvider, useLikedViewed } from '$hooks/postLikedViewedContext';
 
 interface PostViewsLikesPureProps {
   likes: number;
@@ -37,7 +44,8 @@ const PostViewsLikesPure: FC<PostViewsLikesPureProps> = function PostViewsLikesP
   const [freshCommentCount] = useState(null);
   const [likeButtonHover, setLikeButtonHover] = useState(false);
 
-  const ssr = import.meta.env.SSR;
+  // const ssr = import.meta.env.SSR;
+  const ssr = typeof window === 'undefined';
 
   function postViewed() {
     return viewed.includes(slug);

demos/narcissus-astro/src/components/TextArea.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import type { FC } from 'react';
-import { screenReaderText } from '../styles/styles.css';
-import { container, input } from './TextArea.css';
+import { screenReaderText } from '$styles/styles.css';
+import { container, input } from '$components/TextArea.css';
 
 interface TextAreaProps {
   id: string;

demos/narcissus-astro/src/components/TextInputField.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import type { FC } from 'react';
-import { screenReaderText } from '../styles/styles.css';
-import { container, input } from './TextInputField.css';
+import { screenReaderText } from '$styles/styles.css';
+import { container, input } from '$components/TextInputField.css';
 
 interface TextInputFieldProps {
   id: string;