Increases the maximum content container width on larger screens
to provide more breathing room and a better reading experience.
This change was made to improve the overall layout and
visual presentation of the application.
This commit introduces a theme switcher component in the header, allowing users to toggle between light and dark modes. The changes include:
- Added a new `ThemeSwitcher` component in `components/header/theme-switcher.tsx` that handles the theme switching logic and UI.
- Integrated the `ThemeSwitcher` component into the `HeaderToolbar` component.
- Updated the global CSS file (`app/globals.css`) to include styles for the light mode.
- Initialized the theme based on user's previous preference or system preference.
- Saved the user's theme preference in the browser's local storage for persistence.
These changes provide a better user experience by allowing users to switch between light and dark modes, which can improve readability and accessibility, especially in different lighting conditions.
This commit introduces the layout and page components for the blog post feature.
The main changes include:
- Implement the `RootLayout` component in `app/blogpost/layout.tsx` to provide the overall structure and styling for the blog post pages.
- Implement the `PostPage` component in `app/blogpost/page.tsx` to display the content of a specific blog post, including the post title, metadata, and the post body (template).
- Add placeholder content and styling for the blog post page, including the use of the `Image` component to display a featured image.
These changes lay the foundation for the blog post feature, allowing users to view and interact with individual blog posts on the website.
The changes in this commit introduce a new footer component to the application. The footer includes the following sections:
- Socials: Links to the user's social media profiles (Instagram, Mastodon, GitHub, Steam)
- Games: A link to the "Robot Fire" game
- Other Projects: Links to the "cloudberrygames" and "northfamily" projects
The footer is designed to be responsive, with a different layout for larger and smaller screens. The icons in the footer are also inverted to match the overall color scheme of the application.
This commit reorganizes the page structure by moving the main content area and the footer into the layout component. The main content area now only contains the BlogArea component, while the footer has been expanded to include social links, game links, and other project links.
The changes were made to improve the overall structure and organization of the application, making it easier to maintain and extend in the future.
Adds a link to each blog post tag, allowing users to navigate to a
page that displays all posts with the selected tag. This improves the
user experience by providing an easy way to explore related content.
The changes in this commit focus on refactoring the header component and removing the search icon. The main changes are:
- Replaced the `HeaderToolbar` component with a new `MainHeader` component.
- Removed the search icon and its associated code.
- Improved the layout and styling of the header section.
These changes aim to simplify the header structure and remove unnecessary elements, making the page more focused and visually appealing.
Adds a bottom border to the toolbar component to create a more
distinct separation between the toolbar and the content below it.
This change improves the visual hierarchy and overall design of
the page.
The changes in this commit include:
- Add a search icon to the header, which is implemented using the `Image` component from Next.js.
- Update the header layout to have a more balanced and centered design, with the site title and search icon aligned.
- Adjust the spacing and typography of the header elements to improve the overall visual appearance.
These changes are made to enhance the user experience of the header, making it more visually appealing and functional.
Adds a new `tags` field to the `BlogPost` interface and updates the blog post data to include relevant tags.
The `BlogArea` component is updated to display the tags for each blog post.
This change allows users to better understand the topics covered in each blog post and
improves the overall user experience.
This commit introduces several improvements to the blog post UI:
- Adds new icons for tags and calendar using SVG images
- Refines the layout and styling of the blog post tags and publish date
- Adjusts the overall spacing and padding of the blog area and individual blog posts
- Increases the font size of the "Read the article" link for better readability
These changes aim to enhance the visual appeal and user experience of the blog section, making it more visually engaging and informative for the readers.
Adds `AnimatedLink` component to the toolbar, allowing for
animated links to different sections of the website. This
improves the user experience and provides a more visually
appealing way to navigate the site.
Adds a language switcher icon to the header toolbar and updates the email and
RSS icons. This change improves the user experience by providing a way for
users to switch between different language versions of the site.
This commit introduces several improvements to the blog homepage:
- Adds a search icon and link to the Russian version of the blog
- Reduces the font size of the main title to make it more visually balanced
- Updates the blog description to focus on posts about science
- Adjusts the overall layout and spacing for a more polished appearance
These changes aim to enhance the user experience and better communicate the blog's content and focus.
Increases the content width from 24 to 64 to provide a more
comfortable reading experience for users. This change ensures
the blog posts are displayed in a more visually appealing and
readable layout.
This commit adds a new `HeaderToolbar` component to the `app/page.tsx` file. The toolbar includes links to the English and Russian versions of the blog. This change improves the user experience by providing easy access to the different language versions of the blog.
Adds new icons and links to the toolbar component, including email, RSS feed, support, and settings. The icons are now displayed as images using the Next.js `Image` component, and the links are wrapped in `Link` components for better navigation. The overall layout and styling of the toolbar have also been improved.
Adds a new toolbar component to the header section. This component
displays the user's profile information and provides links to various
sections of the application, such as email, RSS, support, and settings.
The toolbar is designed to be responsive and visually appealing, with a
clean and modern layout.
Updates the homepage content and link to the blog page. The changes
include:
- Updated the link in the "AderKI" navigation item to point to the
blog page instead of the main website.
- Updated the description text to better reflect the content and
focus of the website.
These changes are made to provide users with a more accurate and
relevant introduction to the website and its content.
Modify the layout of the blogpost details section to better align the
content vertically. This change ensures the "Posted" date is aligned
with the bottom of the blogpost description, creating a more balanced
and visually appealing design.
The changes in this commit add animated link components to the homepage.
The key changes are:
- Imported the `AnimatedLink` component from the `../components/animatedLink` file.
- Replaced the regular `<a>` tags in the main page with `<AnimatedLink>` components, which apply a smooth animation effect on hover.
Adds a new `AnimatedLink` component that provides a smooth hover animation
effect to links. This component is then used in the `BlogArea` component to
enhance the appearance of the blog post links.
The changes include:
- Creating a new `AnimatedLink` component in `animatedLink.tsx`
- Updating the `BlogArea` component in `blogpost.tsx` to use the new
`AnimatedLink` component instead of the default `Link` component from
Next.js.
Optimize the image loading in the BlogArea component by removing the
unnecessary `blogTestPic` import and using the correct path for the
image. Additionally, refactor the code to improve readability and
maintainability.
Adds the `Image` component from Next.js to display a local image in the
BlogPost component. The local image file `retrofuturism.webp` is added to
the `public/images` directory and referenced in the component.
The changes remove the unused Geist and Geist_Mono font imports from the
layout.tsx file. This simplifies the code and reduces the overall bundle
size of the application.
This commit introduces a new `BlogArea` component that displays a list of blog posts. The changes include:
- Added a new `BlogArea` component in `components/blogpost.tsx` that renders a list of blog posts with their title, description, and a link to the full post.
- Integrated the `BlogArea` component into the `Home` page in `app/page.tsx`.
- Added mock data for the blog posts in `app/page.tsx` to demonstrate the functionality.
This commit updates the site metadata and styling in the `app/layout.tsx` file:
- Changes the title to "AderKI Blog" and the description to "Welcome to AderKI Blog. Explore hoodies, comics, books, and more in my personal store."
- Adds keywords, authors, and Open Graph metadata for better SEO and social sharing.
- Changes the default body styles to use a black background and white text with a sans-serif font.
In the `app/page.tsx` file, the changes include:
- Removes the default Next.js homepage content and replaces it with a simple header section.
- The header includes the site title "AderKI" and a brief description of the store.
- The main content area is left empty, as it will be filled with blog post components in a future commit.
These changes aim to set the foundation for the AderKI Blog, providing a more personalized and focused experience for the users.
