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.
This commit is contained in:
Emil Gulamov
parent
d82473b35c
commit
d3212bc62d
3 changed files with 48 additions and 31 deletions
74
README.md
74
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 `<html>` 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 {
|
|||
<Meta meta={meta} />
|
||||
```
|
||||
|
||||
#### 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";
|
||||
---
|
||||
|
||||
<MainLayout meta="Find the perfect hardware tools with ScrewFast for all your construction needs.">
|
||||
<MainLayout
|
||||
title={`Example Page | ${SITE.title}`}
|
||||
structuredData={{
|
||||
"@type": "WebPage",
|
||||
// Other structured data properties...
|
||||
}}
|
||||
>
|
||||
<!-- Page content -->
|
||||
</MainLayout>
|
||||
|
||||
```
|
||||
|
||||
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.
|
||||
|
|
|
|||
|
|
@ -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" : "/";
|
||||
---
|
||||
|
||||
<!-- Main header component -->
|
||||
|
|
@ -23,7 +24,7 @@ const strings = Astro.currentLocale === "fr" ? frStrings : enStrings;
|
|||
<!-- Brand logo -->
|
||||
<a
|
||||
class="flex-none rounded-lg text-xl font-bold outline-none ring-zinc-500 focus-visible:ring dark:ring-zinc-200 dark:focus:outline-none"
|
||||
href="/"
|
||||
href={homeUrl}
|
||||
aria-label="Brand"
|
||||
>
|
||||
<svg class="h-auto w-24" viewBox="0 0 521 226" fill="none">
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ interface Props {
|
|||
<h3 class="text-neutral-700 dark:text-neutral-300">{title}</h3>
|
||||
<button
|
||||
type="button"
|
||||
class="group inline-flex items-center gap-x-2 rounded-lg border border-neutral-400 px-3 py-2 text-sm font-medium text-neutral-700 hover:border-yellow-500 hover:bg-yellow-500 hover:shadow-2xl hover:shadow-yellow-500 dark:border-neutral-500 dark:text-neutral-300 dark:hover:bg-yellow-500 dark:hover:text-neutral-700 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-neutral-600"
|
||||
class="group inline-flex items-center gap-x-2 rounded-lg border border-neutral-400 px-3 py-2 text-sm font-medium text-neutral-700 hover:border-yellow-500 hover:bg-yellow-500 hover:shadow-2xl hover:shadow-yellow-500 dark:border-neutral-500 dark:text-neutral-300 dark:hover:bg-yellow-500 dark:hover:text-neutral-700 dark:hover:border-yellow-500 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-neutral-600"
|
||||
>
|
||||
<svg
|
||||
class="size-4 flex-shrink-0 transition duration-300 group-hover:-translate-y-1 group-focus-visible:-translate-y-1"
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue