From d3212bc62dc718de60ed54a68287f1ff8a342aa7 Mon Sep 17 00:00:00 2001
From: Emil Gulamov <125820963+mearashadowfax@users.noreply.github.com>
Date: Fri, 29 Mar 2024 00:47:11 +0400
Subject: [PATCH] Update UI styles and improve navigation and SEO features
This commit introduces several UI behavior improvements, particularly enhancing the hover states of buttons in dark mode, and tweaking language-specific navigation. It also includes significant enhancements to the project's SEO configuration by revising the README documentation and transitioning the management of SEO-related data to a centralized `constants.ts` file for more structured and manageable SEO settings.
---
README.md | 74 +++++++++++--------
src/components/sections/Navbar.astro | 3 +-
src/components/ui/feedback/PostFeedback.astro | 2 +-
3 files changed, 48 insertions(+), 31 deletions(-)
diff --git a/README.md b/README.md
index d7ce089..fc0369e 100644
--- a/README.md
+++ b/README.md
@@ -191,19 +191,19 @@ Static files served directly to the browser are within the `public` directory at
```md
public/
-├── scripts/
-│ └── vendor/
-│ ├── gsap/ # Animations powered by GSAP (GreenSock Animation Platform)
-│ │ └── gsap.min.js
-│ ├── lenis/ # Lenis script for smooth scrolling effects
-│ │ └── lenis.js
-│ └── preline/ # Preline UI plugins
-│ ├── accordion/
-│ ├── collapse/
-│ ├── dropdown/
-│ ├── overlay/
-│ └── tabs/
-└── social.png # Image used for social media sharing previews
+└── scripts/
+ └── vendor/
+ ├── gsap/ # Animations powered by GSAP (GreenSock Animation Platform)
+ │ └── gsap.min.js
+ ├── lenis/ # Lenis script for smooth scrolling effects
+ │ └── lenis.js
+ └── preline/ # Preline UI plugins
+ ├── accordion/
+ ├── collapse/
+ ├── dropdown/
+ ├── overlay/
+ └── tabs/
+
```
@@ -451,21 +451,32 @@ Additionally, update the `` tag to remove the `scrollbar-hide` class, resu
### SEO Configuration
-The ScrewFast template incorporates a flexible SEO configuration that empowers you to effectively optimize each page for search engines as well as social media platforms. By utilizing the `Meta.astro` component, you can easily customize important metadata such as page titles, descriptions, author information, and social media images to improve your site's visibility and engagement.
+The SEO Configuration in the ScrewFast template is designed to empower users in optimizing their website's visibility on search engines and social media platforms. This documentation outlines the implementation details and usage instructions for effectively managing SEO settings.
-#### Customizing Metadata with Meta.astro
+#### Using constants.ts
-The `Meta.astro` component is pre-configured with default metadata values that should be defined to align with your website's content, ensuring out-of-the-box SEO readiness. These defaults can be overridden on a per-page basis:
+The SEO configuration has been centralized using the `constants.ts` file. This file manages SEO-related data such as page titles, descriptions, structured data, and Open Graph tags, providing a more structured and manageable approach to SEO management.
+
+To customize SEO settings, modify the values in the `constants.ts` file. Key configurations include SITE, SEO, and OG, allowing developers to define site-wide SEO parameters.
```astro
----
-// In Meta.astro component
-const defaultDescription = "ScrewFast offers top-tier hardware tools and expert construction services.";
-const { meta = defaultDescription } = Astro.props;
----
-```
+// constants.ts
-By setting the `defaultDescription` to a value that accurately reflects the content of your website, you ensure that all pages will have a relevant default meta description unless otherwise specified.
+export const SITE = {
+ title: "ScrewFast",
+ // Other SITE properties...
+};
+
+export const SEO = {
+ title: SITE.title,
+ // Other SEO properties...
+};
+
+export const OG = {
+ title: `${SITE.title}: Hardware Tools & Construction Services`,
+ // Other OG properties...
+};
+```
#### Applying Metadata in Layouts
@@ -484,19 +495,24 @@ interface Props {
```
-#### Customizing Metadata on Individual Pages
+#### Passing Individual Schema
-Finally, custom metadata can be passed to your layout component within individual page files, allowing for page-specific overrides:
+For page-specific SEO overrides, developers can pass individual schema properties within specific page files.
```astro
---
-// In your individual page file
-import MainLayout from '../layouts/MainLayout.astro';
+import { SITE } from "@/data_files/constants";
---
-
-
+
+
```
With this setup, the Meta component receives the custom meta description and applies it to the page's metadata. If no custom value is passed, the default from `Meta.astro` will be used instead.
diff --git a/src/components/sections/Navbar.astro b/src/components/sections/Navbar.astro
index 93356d7..4adadf0 100644
--- a/src/components/sections/Navbar.astro
+++ b/src/components/sections/Navbar.astro
@@ -8,6 +8,7 @@ import frStrings from "@/utils/fr/navigation.ts";
// Select the correct translation based on the page's lang prop:
const strings = Astro.currentLocale === "fr" ? frStrings : enStrings;
+const homeUrl = Astro.currentLocale === "fr" ? "/fr" : "/";
---
@@ -23,7 +24,7 @@ const strings = Astro.currentLocale === "fr" ? frStrings : enStrings;