jalil/achat-maison-albi-fr
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Refactor README.md for improved readability

Browse source
This commit is contained in:
Emil Gulamov 2024-06-29 03:39:21 +04:00
parent 9b4cdac7bb
commit 357087dae4
1 changed files with 132 additions and 129 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

257
README.md
View file

@ -7,111 +7,115 @@ ScrewFast is an open-source template designed for quick and efficient web projec
**[View Live Demo](https://screwfast.uk)** **[View Live Demo](https://screwfast.uk)**
## Table of Contents ## Table of Contents
* [Why Choose ScrewFast?](#why-choose-screwfast)
* [Features](#features) * [Why Choose ScrewFast?](#why-choose-screwfast)
* [What's New](#whats-new) * [Features](#features)
* [Getting Started](#getting-started) * [What's New](#whats-new)
+ [Installation](#installation) * [Getting Started](#getting-started)
+ [Development Commands](#development-commands) * [Installation](#installation)
* [Deployment](#deployment) * [Development Commands](#development-commands)
+ [Building Your Site](#building-your-site) * [Deployment](#deployment)
+ [Deploying to Vercel](#deploying-to-vercel) * [Building Your Site](#building-your-site)
* [Project Structure](#project-structure) * [Deploying to Vercel](#deploying-to-vercel)
* [Static Assets and Public Resources](#static-assets-and-public-resources) * [Project Structure](#project-structure)
* [Customization](#customization) * [Static Assets and Public Resources](#static-assets-and-public-resources)
+ [Editing Component Variables](#editing-component-variables) * [Customization](#customization)
+ [Props in Component Instances](#props-in-component-instances) * [Editing Component Variables](#editing-component-variables)
+ [Customizing Navigation and Footer Links](#customizing-navigation-and-footer-links) * [Props in Component Instances](#props-in-component-instances)
- [Navigation Bar Links](#navigation-bar-links) * [Customizing Navigation and Footer Links](#customizing-navigation-and-footer-links)
- [Footer Links](#footer-links) * [Navigation Bar Links](#navigation-bar-links)
- [Social Media Links](#social-media-links) * [Footer Links](#footer-links)
* [Integrations and Enhancements](#integrations-and-enhancements) * [Social Media Links](#social-media-links)
+ [Starlight Documentation](#starlight-documentation) * [Integrations and Enhancements](#integrations-and-enhancements)
+ [Lenis for Smooth Scrolling](#lenis-for-smooth-scrolling) * [Starlight Documentation](#starlight-documentation)
+ [GSAP Integration](#gsap-integration) * [Lenis for Smooth Scrolling](#lenis-for-smooth-scrolling)
+ [Hiding Scrollbar](#hiding-scrollbar) * [GSAP Integration](#gsap-integration)
+ [SEO Configuration](#seo-configuration) * [Hiding Scrollbar](#hiding-scrollbar)
- [Using constants.ts](#using-constantsts) * [SEO Configuration](#seo-configuration)
- [Applying Metadata in Layouts](#applying-metadata-in-layouts) * [Using constants.ts](#using-constantsts)
- [Passing Individual Schema](#passing-individual-schema) * [Applying Metadata in Layouts](#applying-metadata-in-layouts)
- [Extending Metadata for SEO](#extending-metadata-for-seo) * [Passing Individual Schema](#passing-individual-schema)
- [Structured Data and Rich Snippets](#structured-data-and-rich-snippets) * [Extending Metadata for SEO](#extending-metadata-for-seo)
- [Using Astro SEO Integrations](#using-astro-seo-integrations) * [Structured Data and Rich Snippets](#structured-data-and-rich-snippets)
+ [Robots.txt](#robotstxt) * [Using Astro SEO Integrations](#using-astro-seo-integrations)
+ [Markdown/MDX](#markdownmdx) * [Robots.txt](#robotstxt)
- [Image Integration](#image-integration) * [Markdown/MDX](#markdownmdx)
+ [Astro Integrations](#astro-integrations) * [Image Integration](#image-integration)
+ [Flexibility with Integrations](#flexibility-with-integrations) * [Astro Integrations](#astro-integrations)
* [Tools and Technologies](#tools-and-technologies) * [Flexibility with Integrations](#flexibility-with-integrations)
+ [Preline UI](#preline-ui) * [Tools and Technologies](#tools-and-technologies)
+ [Tailwind CSS](#tailwind-css) * [Preline UI](#preline-ui)
+ [Deployment and Security](#deployment-and-security) * [Tailwind CSS](#tailwind-css)
+ [HTML Minification](#html-minification) * [Deployment and Security](#deployment-and-security)
* [Contributing](#contributing) * [HTML Minification](#html-minification)
* [License](#license) * [Contributing](#contributing)
* [License](#license)
## Why Choose ScrewFast? ## Why Choose ScrewFast?
- **Efficient Architecture:** Deploy faster with a template that's simple to set up and navigate. * **Efficient Architecture:** Deploy faster with a template that's simple to set up and navigate.
- **Optimized for Small Projects:** Perfect for crisp, professional web personas without excess complexity. * **Optimized for Small Projects:** Perfect for crisp, professional web personas without excess complexity.
- **Highly Customizable:** Flexibly adapt and style your site using Astro and Tailwind CSS. * **Highly Customizable:** Flexibly adapt and style your site using Astro and Tailwind CSS.
## Features ## Features
- **Astro-Powered:** Utilize a modern static-site generation framework. * **Astro-Powered:** Utilize a modern static-site generation framework.
- **Tailwind CSS:** Enjoy rapid UI development with a utility-first CSS framework. * **Tailwind CSS:** Enjoy rapid UI development with a utility-first CSS framework.
- **Preline UI:** Implement prebuilt UI components for added elegance. * **Preline UI:** Implement prebuilt UI components for added elegance.
- **GSAP Integration:** Impress with professional and polished animations. * **GSAP Integration:** Impress with professional and polished animations.
- **Markdown Content Collections:** Organize and manage your content seamlessly. * **Markdown Content Collections:** Organize and manage your content seamlessly.
- **Starlight Documentation:** A sleek, user-friendly, full-featured documentation theme. * **Starlight Documentation:** A sleek, user-friendly, full-featured documentation theme.
- **Internationalization (i18n):** Integrates Astro’s internationalization features. * **Internationalization (i18n):** Integrates Astro’s internationalization features.
- **SEO and Responsiveness:** Ensure your site is discoverable and accessible on any device. * **SEO and Responsiveness:** Ensure your site is discoverable and accessible on any device.
## What's New ## What's New
### Added Features ### Added Features
- [x] **Social Share Component**:
- Enables users to share blog posts on social media platforms.
- Provides easy sharing of a blog post's title and URL.
- Integrates Clipboard.js for link URL copy functionality.
- [x] **Bookmark Button Component**: * [x] **Social Share Component**:
- Allows users to bookmark blog posts for later reference. * Enables users to share blog posts on social media platforms.
- Provides a visual indication of whether a post is bookmarked. * Provides easy sharing of a blog post's title and URL.
- Utilizes `localStorage` to store bookmarks locally in the browser. * Integrates Clipboard.js for link URL copy functionality.
- For SSR, replace `localStorage` with cookies to persist bookmarked posts.
- This setup opens up the possibility for the server to dynamically render content based on user-specific bookmarks, should you choose to implement this feature.
- [x] **Post Feedback Component**: * [x] **Bookmark Button Component**:
- Collects user feedback at the end of each blog post. * Allows users to bookmark blog posts for later reference.
- Serves as a UI demonstration with no live back-end integration. * Provides a visual indication of whether a post is bookmarked.
* Utilizes `localStorage` to store bookmarks locally in the browser.
* For SSR, replace `localStorage` with cookies to persist bookmarked posts.
* This setup opens up the possibility for the server to dynamically render content based on user-specific bookmarks, should you choose to implement this feature.
- [x] **Starlight Documentation Theme Integration**: * [x] **Post Feedback Component**:
- A sleek, user-friendly, full-featured documentation theme, which enhances the readability and usability of documentation. * Collects user feedback at the end of each blog post.
- Offers a range of features such as site navigation, built-in search functionality, dark mode, syntax highlighting for code, and improved SEO. * Serves as a UI demonstration with no live back-end integration.
- Seamlessly integrates internationalization (i18n) to provide support for documentation in multiple languages, catering to a global audience.
- Designed to facilitate ease of use while offering a modern aesthetic in both light and dark themes to accommodate user preferences.
- [x] **Icon Set Component**: * [x] **Starlight Documentation Theme Integration**:
- Convenient and reusable Icon component that allows adding icons simply by providing a name prop. * A sleek, user-friendly, full-featured documentation theme, which enhances the readability and usability of documentation.
- Render any pre-defined icon SVG using `<Icon name="iconName" />` in your Astro components. * Offers a range of features such as site navigation, built-in search functionality, dark mode, syntax highlighting for code, and improved SEO.
- The Icon Component offers a centralized location for all SVG Icons across the project in one TypeScript file - allowing unified updates and easy maintenance. * Seamlessly integrates internationalization (i18n) to provide support for documentation in multiple languages, catering to a global audience.
- **Note:** Developers have the option to use other community integrations like [astro-icons](https://github.com/natemoo-re/astro-icon). However, the author decided to create a custom icon set component for managing custom icons. * Designed to facilitate ease of use while offering a modern aesthetic in both light and dark themes to accommodate user preferences.
- [x] **Internationalization (i18n) Features**: * [x] **Icon Set Component**:
- Integrates [Astro’s internationalization (i18n) features](https://docs.astro.build/en/guides/internationalization/). * Convenient and reusable Icon component that allows adding icons simply by providing a name prop.
- Additionally, a custom LanguagePicker component has been developed to facilitate language selection. * Render any pre-defined icon SVG using `<Icon name="iconName" />` in your Astro components.
- Developers can access the monolingual version directly from [`monolingual-site` branch](https://github.com/mearashadowfax/ScrewFast/tree/monolingual-site). * The Icon Component offers a centralized location for all SVG Icons across the project in one TypeScript file - allowing unified updates and easy maintenance.
* **Note:** Developers have the option to use other community integrations like [astro-icons](https://github.com/natemoo-re/astro-icon). However, the author decided to create a custom icon set component for managing custom icons.
- [x] **Dynamic Table of Contents (ToC) with Scroll Progress Indicator**: * [x] **Internationalization (i18n) Features**:
- Enhances ease of navigation in insight posts by highlighting the relevant section in the ToC, and includes a progress indicator to visually represent scroll progress. * Integrates [Astro’s internationalization (i18n) features](https://docs.astro.build/en/guides/internationalization/).
- Developers seeking alternatives might consider the [remark-toc](https://github.com/remarkjs/remark-toc) plugin. * Additionally, a custom LanguagePicker component has been developed to facilitate language selection.
* Developers can access the monolingual version directly from [`monolingual-site` branch](https://github.com/mearashadowfax/ScrewFast/tree/monolingual-site).
* [x] **Dynamic Table of Contents (ToC) with Scroll Progress Indicator**:
* Enhances ease of navigation in insight posts by highlighting the relevant section in the ToC, and includes a progress indicator to visually represent scroll progress.
* Developers seeking alternatives might consider the [remark-toc](https://github.com/remarkjs/remark-toc) plugin.
### Planned Improvements ### Planned Improvements
- Currently, there are no planned improvements. We'll update this section as plans develop.
* Currently, there are no planned improvements. We'll update this section as plans develop.
### Bug Fixes ### Bug Fixes
- Currently, there are no known bugs. If you encounter any issues, please report them on our [issues page](https://github.com/mearashadowfax/ScrewFast/issues).
* Currently, there are no known bugs. If you encounter any issues, please report them on our [issues page](https://github.com/mearashadowfax/ScrewFast/issues).
## Getting Started ## Getting Started
@ -131,9 +135,9 @@ This command will install all the necessary dependencies defined in the `package
With dependencies installed, you can utilize the following npm scripts to manage your project's development lifecycle: With dependencies installed, you can utilize the following npm scripts to manage your project's development lifecycle:
- `npm run dev`: Starts a local development server with hot reloading enabled. * `npm run dev`: Starts a local development server with hot reloading enabled.
- `npm run preview`: Serves your build output locally for preview before deployment. * `npm run preview`: Serves your build output locally for preview before deployment.
- `npm run build`: Bundles your site into static files for production. * `npm run build`: Bundles your site into static files for production.
For detailed help with Astro CLI commands, visit [Astro's documentation](https://docs.astro.build/en/reference/cli-reference/). For detailed help with Astro CLI commands, visit [Astro's documentation](https://docs.astro.build/en/reference/cli-reference/).
@ -201,16 +205,10 @@ Static files served directly to the browser are within the `public` directory at
```md ```md
public/ public/
└── scripts/ └── banner-pattern.svg
└── vendor/
└── gsap/ # Animations powered by GSAP (GreenSock Animation Platform)
└── gsap.min.js
``` ```
The scripts in the `public/scripts/vendor` directory are essential for the interactivity and aesthetic features of the website. Do not remove these unless you plan to replace their functionality.
## Customization ## Customization
ScrewFast allows for easy customization to suit your specific needs. Here are a couple of ways you can configure components and content: ScrewFast allows for easy customization to suit your specific needs. Here are a couple of ways you can configure components and content:
@ -325,6 +323,9 @@ export const socialLinks: SocialLinks = {
> [!NOTE] > [!NOTE]
> Remember to add complete and valid URLs for the navigation to function properly. These customizations will reflect throughout your Astro site, promoting consistency across all pages. > Remember to add complete and valid URLs for the navigation to function properly. These customizations will reflect throughout your Astro site, promoting consistency across all pages.
#### Additional Components
We also have `Navbar.astro` and `NavbarMegaMenu.astro` components located in `src/components/sections/navbar&footer`. Ensure to update these components if additional customization or specific configurations are required for the navigation bar or mega menu.
## Integrations and Enhancements ## Integrations and Enhancements
@ -336,11 +337,11 @@ ScrewFast is now equipped with the Starlight, which is designed to elevate the u
Key Features: Key Features:
- **Site Navigation and Search**: Navigate through the documentation with ease using intuitive sidebar and built-in search functionality. * **Site Navigation and Search**: Navigate through the documentation with ease using intuitive sidebar and built-in search functionality.
- **Internationalization**: Cater to a global audience with the ability to switch languages, making documentation accessible to everyone, everywhere. * **Internationalization**: Cater to a global audience with the ability to switch languages, making documentation accessible to everyone, everywhere.
- **SEO Friendly**: Optimized for search engines to help users quickly find the information they need. * **SEO Friendly**: Optimized for search engines to help users quickly find the information they need.
- **Code Highlighting and Dark Mode**: Enhances code readability with syntax highlighting, and offers a dark mode to reduce eye strain for users. * **Code Highlighting and Dark Mode**: Enhances code readability with syntax highlighting, and offers a dark mode to reduce eye strain for users.
- **Mobile Responsive Design**: Whether you're on a phone, tablet, or desktop, the documentation adapts to your screen size for optimal readability. * **Mobile Responsive Design**: Whether you're on a phone, tablet, or desktop, the documentation adapts to your screen size for optimal readability.
With Starlight, you gain access to a wealth of powerful features and integrations, along with extensive customization options to fit your needs. With Starlight, you gain access to a wealth of powerful features and integrations, along with extensive customization options to fit your needs.
@ -351,13 +352,9 @@ With Starlight, you gain access to a wealth of powerful features and integration
Experience buttery smooth scrolling with [Lenis](https://lenis.studiofreight.com/). We've integrated Lenis to provide an enhanced scrolling experience that's both fluid and responsive. Experience buttery smooth scrolling with [Lenis](https://lenis.studiofreight.com/). We've integrated Lenis to provide an enhanced scrolling experience that's both fluid and responsive.
Here's how we set up Lenis in `src/layouts/MainLayout.astro`: Here's how we set up Lenis in `src/assets/scripts/lenisSmoothScroll.js`:
```astro ```astro
<script>
import "@scripts/lenisSmoothScroll.js";
</script>
// src/assets/scripts/lenisSmoothScroll.js // src/assets/scripts/lenisSmoothScroll.js
import "@styles/lenis.css"; import "@styles/lenis.css";
@ -373,6 +370,14 @@ function raf(time) {
requestAnimationFrame(raf); requestAnimationFrame(raf);
``` ```
And then add it to `MainLayout.astro`:
```astro
<script>
import "@scripts/lenisSmoothScroll.js";
</script>
```
Please note that smooth scrolling can affect accessibility and performance on some devices, so be sure to test it comprehensively across different environments. Please note that smooth scrolling can affect accessibility and performance on some devices, so be sure to test it comprehensively across different environments.
> [!NOTE] > [!NOTE]
@ -380,17 +385,12 @@ Please note that smooth scrolling can affect accessibility and performance on so
### GSAP Integration ### GSAP Integration
For individual product pages, [GSAP](https://gsap.com/) has been integrated to add engaging animations that execute as soon as the product page loads. You can find and modify the GSAP configuration in the script sections of the product page file located at `src/pages/products/[...slug].astro`: For individual product pages, [GSAP](https://gsap.com/) has been integrated to add engaging animations that execute as soon as the product page loads. You can find and modify the GSAP configuration in the script sections of the product page file located at `src/pages/products/[...slug].astro` and the insights page at `src/pages/insights/[...slug].astro`:
```astro ```astro
<script is:inline src="/scripts/vendor/gsap/gsap.min.js"></script>
<script> <script>
window.addEventListener("load", (event) => { import { gsap } from "gsap";
if (window.gsap) { // Initialize GSAP animations...
const gsap = window.gsap;
// Initialize GSAP animations...
}
});
</script> </script>
``` ```
@ -400,8 +400,8 @@ Please tailor the GSAP animations within this script to fit your project's look
**Modifying or Removing Animations:** **Modifying or Removing Animations:**
- To modify an animation, update the properties and parameters within the `gsap.from()` method, or add new GSAP animation calls as required. * To modify an animation, update the properties and parameters within the `gsap.from()` method, or add new GSAP animation calls as required.
- Should GSAP not be needed, or if you prefer a different animation method, simply remove the aforementioned script segment. * Should GSAP not be needed, or if you prefer a different animation method, simply remove the aforementioned script segment.
> [!NOTE] > [!NOTE]
> We've chosen to keep the integration lean and focused, but GSAP's comprehensive documentation can be referred to for more complex animations: [GSAP Documentation](https://gsap.com/docs/v3/). > We've chosen to keep the integration lean and focused, but GSAP's comprehensive documentation can be referred to for more complex animations: [GSAP Documentation](https://gsap.com/docs/v3/).
@ -547,6 +547,7 @@ export const GET: APIRoute = () => {
}); });
}; };
``` ```
### Markdown/MDX ### Markdown/MDX
#### Image Integration #### Image Integration
@ -554,15 +555,17 @@ export const GET: APIRoute = () => {
The addition of `.vscode/settings.json` file in the root directory facilitates image integration directly into content collections within Markdown editors. This feature enables effortless creation of Markdown links with media files and seamless copying into the workspace. The addition of `.vscode/settings.json` file in the root directory facilitates image integration directly into content collections within Markdown editors. This feature enables effortless creation of Markdown links with media files and seamless copying into the workspace.
##### Usage ##### Usage
- **Paste/Drop Images**: Activate by pressing <kbd>Shift</kbd> while dropping the file.
- **Markdown Link**: Image is linked using Markdown syntax `(![alt text](../../images/content/<path>))`. * **Paste/Drop Images**: Activate by pressing <kbd>Shift</kbd> while dropping the file.
- **File Handling**: Images are organized in `src/images/content/<path>`. * **Markdown Link**: Image is linked using Markdown syntax `(![alt text](../../images/content/<path>))`.
* **File Handling**: Images are organized in `src/images/content/<path>`.
##### Example ##### Example
Pasting `getting-started.png` into `src/content/post-1.md` results in: Pasting `getting-started.png` into `src/content/post-1.md` results in:
- Adding `![alt text](../../images/content/post-1/getting-started.png)` to `post-1.md`. * Adding `![alt text](../../images/content/post-1/getting-started.png)` to `post-1.md`.
- Moving the image file to `src/images/content/post-1/getting-started.png`. * Moving the image file to `src/images/content/post-1/getting-started.png`.
> [!NOTE] > [!NOTE]
> Remember to press <kbd>Shift</kbd> while dropping images. > Remember to press <kbd>Shift</kbd> while dropping images.
@ -571,7 +574,7 @@ Pasting `getting-started.png` into `src/content/post-1.md` results in:
Maximize your website's efficiency with these built-in Astro integrations: Maximize your website's efficiency with these built-in Astro integrations:
- [Astro Compressor](https://github.com/sondr3/astro-compressor#readme): Automatically compresses Astro-generated site using gzip or brotli, ensuring faster load times. * [Astro Compressor](https://github.com/sondr3/astro-compressor#readme): Automatically compresses Astro-generated site using gzip or brotli, ensuring faster load times.
Configure the compressor in `astro.config.mjs` file: Configure the compressor in `astro.config.mjs` file:
```mjs ```mjs
@ -581,7 +584,7 @@ Configure the compressor in `astro.config.mjs` file:
}); });
``` ```
- [Astro Sitemap](https://docs.astro.build/en/guides/integrations-guide/sitemap/): Automatically generates a sitemap for a website, which is vital for SEO and helping search engine bots crawl pages effectively. To set up the Astro Sitemap, be sure to specify your site's base URL and any additional options in `astro.config.mjs` file: * [Astro Sitemap](https://docs.astro.build/en/guides/integrations-guide/sitemap/): Automatically generates a sitemap for a website, which is vital for SEO and helping search engine bots crawl pages effectively. To set up the Astro Sitemap, be sure to specify your site's base URL and any additional options in `astro.config.mjs` file:
```mjs ```mjs
export default defineConfig({ export default defineConfig({
@ -591,7 +594,7 @@ Configure the compressor in `astro.config.mjs` file:
}); });
``` ```
- [Bag of Tricks for Astro's View Tran­si­tions](https://github.com/martrapp/astro-vtbot#readme): is a collection of extensions and support aimed at enhancing Astro's view transitions. Whether you're looking to add flair to your website or streamline user experience, this toolkit offers various techniques to elevate your projects. In the template, it was used to add View Transitions to a Starlight docs. * [Bag of Tricks for Astro's View Tran­si­tions](https://github.com/martrapp/astro-vtbot#readme): is a collection of extensions and support aimed at enhancing Astro's view transitions. Whether you're looking to add flair to your website or streamline user experience, this toolkit offers various techniques to elevate your projects. In the template, it was used to add View Transitions to a Starlight docs.
### Flexibility with Integrations ### Flexibility with Integrations
@ -657,10 +660,10 @@ await Promise.all(
We encourage you to refer to the detailed documentation for each tool to fully understand their capabilities and how they contribute to the project: We encourage you to refer to the detailed documentation for each tool to fully understand their capabilities and how they contribute to the project:
- [Preline UI Documentation](https://preline.co/docs) * [Preline UI Documentation](https://preline.co/docs)
- [Tailwind CSS Documentation](https://tailwindcss.com/docs) * [Tailwind CSS Documentation](https://tailwindcss.com/docs)
- [Vercel Documentation](https://vercel.com/docs) * [Vercel Documentation](https://vercel.com/docs)
- [html-minifier Documentation](https://github.com/kangax/html-minifier) * [html-minifier-terser Documentation](https://github.com/terser/html-minifier-terser)
## Contributing ## Contributing