Open-source Astro website template with sleek, customizable TailwindCSS components.
ScrewFast is an open-source template designed for quick and efficient web project setup, blending minimalism with functionality. Whether you're showcasing a portfolio, launching a company landing page, or running a blog, ScrewFast provides everything you need. By combining the power of the Astro, Tailwind CSS, and Preline UI, this template offers a functional and aesthetically pleasing solution for your web presence.
Social Share Component:
Bookmark Button Component:
localStorage
to store bookmarks locally in the browser.localStorage
with cookies to persist bookmarked posts.Post Feedback Component:
Starlight Documentation Theme Integration:
Icon Set Component:
<Icon name="iconName" />
in your Astro components.Internationalization (i18n) Features:
monolingual-site
branch.Dynamic Table of Contents (ToC) with Scroll Progress Indicator:
This guide will provide you with the necessary steps to set up and familiarize yourself with the Astro project on your local development machine.
Start by installing the project dependencies. Open your terminal, navigate to the project's root directory, and execute:
npm install
This command will install all the necessary dependencies defined in the package.json
file.
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 preview
: Serves your build output locally for preview before deployment.npm run build
: Bundles your site into static files for production.For detailed help with Astro CLI commands, visit Astro's documentation.
Before deployment, you need to create a production build:
npm run build
This creates a dist/
directory with your built site (configurable via outDir in Astro).
Click the button below to start deploying your project on Vercel:
ScrewFast organizes modular components, content, and layouts to streamline development and content management.
src/├── assets/│ ├── scripts/ # JS scripts│ └── styles/ # CSS styles├── components/ # Reusable components│ ├── Meta.astro # Meta component for SEO│ ├── sections/ # Components for various sections of the website│ ├── ThemeIcon.astro # Component for toggling light/dark themes│ └── ui/ # UI components categorized by functionality├── content/ # Markdown files for blog posts, insights, products, and site configuration│ ├── blog/│ ├── docs/│ ├── insights/│ ├── products/│ └── config.ts # Contains site-wide configuration options├── data_files/ # Strings stored as JSON files├── images/ # Static image assets for use across the website├── layouts/ # Components defining layout templates│ └── MainLayout.astro # The main wrapping layout for all pages├── pages/ # Astro files representing individual pages and website sections│ ├── 404.astro # Custom 404 page│ ├── blog/│ ├── fr/ # Localized content│ ├── contact.astro│ ├── index.astro # The landing/home page│ ├── insights/│ ├── products/│ ├── robots.txt.ts # Dynamically generates robots.txt│ └── services.astro└── utils/ # Shared utility functions and helpers
Static files served directly to the browser are within the public
directory at the root of the project.
public/└── banner-pattern.svg
ScrewFast allows for easy customization to suit your specific needs. Here are a couple of ways you can configure components and content:
Some components have properties defined as TypeScript variables within the component file. Here's an example of customizing the FeaturesGeneral
component:
// Define the string variables title and subTitle for the main heading and sub-heading text.const title: string = "Meeting Industry Demands";const subTitle: string ="At ScrewFast, we tackle the unique challenges encountered in the hardware and construction sectors.";
For collections of content like testimonials or statistics, edit the corresponding array of objects:
// An array of testimonialsconst testimonials: Testimonial[] = [...];// An array of statisticsconst statistics: StatProps[] = [...];
Modify the content within these arrays to reflect your data.
You can pass values to props directly in the page files for components used across pages. Here's an example of a HeroSection
and ClientsSection
component with inline props:
<HeroSectionsubTitle="Top-quality hardware tools and expert construction services for every project need."primaryBtn="Start Exploring"primaryBtnURL="/explore"/><ClientsSectiontitle="Trusted by Industry Leaders"subTitle="Experience the reliability chosen by industry giants."/>
Edit the props such as title
, subTitle
, primaryBtn
, etc., to personalize these sections. Ensure that you maintain the structure and data types of the props.
Edit the navigation.ts
file within the utils
directory to manage navigation bar and footer links:
Edit the navBarLinks
array to adjust navigation bar links:
// An array of links for the navigation barexport const navBarLinks: NavLink[] = [{ name: "Home", url: "/" },{ name: "Products", url: "/products" },{ name: "Services", url: "/services" },{ name: "Blog", url: "/blog" },{ name: "Contact", url: "/contact" },];
Replace name
with the display text and url
with the appropriate path to pages on your site.
Similarly, adjust the links displayed in the footer by editing the footerLinks
array:
// An array of links for the footerexport const footerLinks: FooterLinkSection[] = [{section: "Product",links: [{ name: "Tools & Equipment", url: "/tools-equipment" },{ name: "Construction Services", url: "/construction-services" },{ name: "Pricing", url: "/pricing" },],},{section: "Company",links: [{ name: "About us", url: "/about" },{ name: "Blog", url: "/blog" },{ name: "Careers", url: "/careers" },{ name: "Customers", url: "/customers" },],},];
Each section within the footerLinks
array represents a group of links. Update the section
value for the group heading and modify each link's name
and url
as needed.
Replace the placeholder URLs in the socialLinks
object with your social media profiles:
// An object of links for social iconsexport const socialLinks: SocialLinks = {facebook: "#",twitter: "#",github: "#",linkedin: "#",instagram: "#",};
Additional Components[!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.
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.
ScrewFast leverages the power of Astro — a modern, cutting-edge site building framework — and integrates it seamlessly with the utility-first CSS framework TailwindCSS, to deliver exceptional site performance and a seamless user experience. Here are some notable integrations and enhancements included in the project:
ScrewFast is now equipped with Starlight, designed to elevate the user experience with documentation. This modern and elegant theme includes a suite of features to make content more accessible and enjoyable to navigate.
Key Features:
With Starlight, you gain access to powerful features and integrations, as well as extensive customization options to suit your needs.
[!NOTE] Dive into the Starlight's comprehensive feature list and learn how it can streamline your development process by visiting the theme's documentation site.
[!IMPORTANT] If the sidebar in your Starlight site is not scrolling, and you have to manually drag the scrollbar, remove the script tag related to the Lenis smooth scroll library from
src/components/ui/starlight/Head.astro
.
Experience buttery smooth scrolling with Lenis. 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/assets/scripts/lenisSmoothScroll.js
:
// src/assets/scripts/lenisSmoothScroll.jsimport "@styles/lenis.css";import Lenis from "lenis";const lenis = new Lenis();function raf(time) {lenis.raf(time);requestAnimationFrame(raf);}requestAnimationFrame(raf);
And then add it to MainLayout.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.
[!NOTE] If you would like to remove Lenis and return to the browser's default scrolling behavior, simply comment out or delete these lines from the
MainLayout.astro
file and/starlight/Head.astro
if you are using Docs.
For individual product pages, GSAP 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
:
<script>import { gsap } from "gsap";// Initialize GSAP animations...</script>
Customizing Animations:
Please tailor the GSAP animations within this script to fit your project's look and feel. The provided example is a starting point, representing how to leverage GSAP for immediate visual impact as a product page loads.
Modifying or Removing Animations:
gsap.from()
method, or add new GSAP animation calls as required.[!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.
To achieve a cleaner and more spacious design, the default scrollbar has been visually removed. While this choice fits the aesthetic goals of the project, it's important to consider that hiding scrollbars can sometimes affect accessibility and user experience. We recommend evaluating this design decision within the context of your user base and their needs.
For those who prefer custom-styled scrollbars, we suggest using the tailwind-scrollbar plugin, which adds Tailwind CSS utilities for scrollbar styles, allowing for more controlled customization that can also meet accessibility standards.
[!NOTE] If you wish to return the default scrollbar, you can comment out or remove the following CSS from
src/layouts/MainLayout.astro
:
<style>.scrollbar-hide::-webkit-scrollbar {display: none;}.scrollbar-hide {-ms-overflow-style: none;scrollbar-width: none;}</style>
Additionally, update the <html>
tag to remove the scrollbar-hide
class, resulting in:
<html lang="en" class="scroll-pt-16">
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.
Using constants.tsThe 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.
Applying Metadata in Layouts
// constants.tsexport 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...};
When applying metadata within your layouts, such as MainLayout.astro
, you can pass the desired metadata values as props to the Meta
component:
Passing Individual Schema
---// In MainLayout.astro fileconst { meta } = Astro.props;interface Props {meta?: string;}---<Meta meta={meta} />
For page-specific SEO overrides, developers can pass individual schema properties within specific page files.
---import { SITE } from "@/data_files/constants";---<MainLayouttitle={`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.
For a more robust SEO strategy, you can create additional properties in the Meta.astro
component. For instance, you may want to include specific Open Graph tags for article publishing dates or tags for Twitter-specific metadata.
Structured data in JSON-LD format can be managed by the Meta.astro
component, improving how search engines understand your page content and potentially enhancing search results with rich snippets. Modify the structuredData
property with relevant schema.org types and properties:
Using Astro SEO Integrations
<MainLayoutstructuredData={{"@context": "https://schema.org","@type": "WebSite","name": "ScrewFast","url": "https://screwfast.uk","description": "Discover top-quality hardware tools and services"}}>
While the template provides a custom SEO solution, you may choose to utilize an Astro integration such as Astro SEO for additional SEO features and optimizations. Integrating such a package might provide more automated metadata management and additional SEO-focused functionality.
robots.txt
is dynamically generated using the code found in src/pages/robots.txt.ts. This configuration follows the example from the Astro Docs:
import type { APIRoute } from 'astro';const robotsTxt = `User-agent: *Allow: /Sitemap: ${new URL('sitemap-index.xml', import.meta.env.SITE).href}`.trim();export const GET: APIRoute = () => {return new Response(robotsTxt, {headers: {'Content-Type': 'text/plain; charset=utf-8',},});};
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.
(![alt text](../../images/content/<path>))
.src/images/content/<path>
.Pasting getting-started.png
into src/content/post-1.md
results in:
![alt text](../../images/content/post-1/getting-started.png)
to post-1.md
.src/images/content/post-1/getting-started.png
.[!NOTE] Remember to press Shift while dropping images.
Maximize your website's efficiency with these built-in Astro integrations:
astro.config.mjs
file:
export default defineConfig({// ...other Astro configurationsintegrations: [...other Astro integrations, compressor({ gzip: false, brotli: true })],});
astro.config.mjs
file:
export default defineConfig({// ...site: 'https://example.com',integrations: [sitemap()],});
The great thing about Astro is its rich ecosystem of integrations, allowing you to tailor project functionalities to your exact needs. Feel free to explore Astro integrations page and add additional capabilities as you see fit.
This project is built using a variety of tools and technologies that enhance its performance, maintainability, and developer experience. Below is a list of the key tools and their roles in the project:
Interactive components like navbars, modals, and accordions are built using Preline UI, a comprehensive open-source component library.
Styling across our project leverages the utility-first classes offered by Tailwind CSS. This methodology allows us to create custom layouts and components with speed and efficiency.
To ensure consistent code formatting, particularly for class sorting, we have integrated the prettier-plugin-tailwindcss
plugin. The following configuration is set in the .prettierrc
file at the root of the project:
{"plugins": ["prettier-plugin-tailwindcss"]}
We deploy our project on Vercel, capitalizing on their robust platform for seamless CI/CD workflows. Using vercel.json
, we set stringent security headers and caching policies, ensuring adherence to security and performance best practices:
{"headers": [{"source": "/(.*)","headers": [{"key": "Content-Security-Policy","value": "default-src 'self'; [other-directives]"},"Additional security headers..."]}]}
For optimal site performance, we post-process our HTML files with process-html.mjs
, a custom script that minifies HTML after the build phase to reduce file size and improve load times.
Here is a snippet from our HTML minification script in process-html.mjs
:
/process-html.mjs// Post-build HTML minification script snippet// ...await Promise.all(files.map(async (file) => {// File processing and minification logic}));
We encourage you to refer to the detailed documentation for each tool to fully understand their capabilities and how they contribute to the project:
If you're interested in helping, you can contribute in several ways:
This project is released under the MIT License. Please read the LICENSE file for more details.
Open-source Astro website template with sleek, customizable TailwindCSS components.
ScrewFast is an open-source template designed for quick and efficient web project setup, blending minimalism with functionality. Whether you're showcasing a portfolio, launching a company landing page, or running a blog, ScrewFast provides everything you need. By combining the power of the Astro, Tailwind CSS, and Preline UI, this template offers a functional and aesthetically pleasing solution for your web presence.
Social Share Component:
Bookmark Button Component:
localStorage
to store bookmarks locally in the browser.localStorage
with cookies to persist bookmarked posts.Post Feedback Component:
Starlight Documentation Theme Integration:
Icon Set Component:
<Icon name="iconName" />
in your Astro components.Internationalization (i18n) Features:
monolingual-site
branch.Dynamic Table of Contents (ToC) with Scroll Progress Indicator:
This guide will provide you with the necessary steps to set up and familiarize yourself with the Astro project on your local development machine.
Start by installing the project dependencies. Open your terminal, navigate to the project's root directory, and execute:
npm install
This command will install all the necessary dependencies defined in the package.json
file.
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 preview
: Serves your build output locally for preview before deployment.npm run build
: Bundles your site into static files for production.For detailed help with Astro CLI commands, visit Astro's documentation.
Before deployment, you need to create a production build:
npm run build
This creates a dist/
directory with your built site (configurable via outDir in Astro).
Click the button below to start deploying your project on Vercel:
ScrewFast organizes modular components, content, and layouts to streamline development and content management.
src/├── assets/│ ├── scripts/ # JS scripts│ └── styles/ # CSS styles├── components/ # Reusable components│ ├── Meta.astro # Meta component for SEO│ ├── sections/ # Components for various sections of the website│ ├── ThemeIcon.astro # Component for toggling light/dark themes│ └── ui/ # UI components categorized by functionality├── content/ # Markdown files for blog posts, insights, products, and site configuration│ ├── blog/│ ├── docs/│ ├── insights/│ ├── products/│ └── config.ts # Contains site-wide configuration options├── data_files/ # Strings stored as JSON files├── images/ # Static image assets for use across the website├── layouts/ # Components defining layout templates│ └── MainLayout.astro # The main wrapping layout for all pages├── pages/ # Astro files representing individual pages and website sections│ ├── 404.astro # Custom 404 page│ ├── blog/│ ├── fr/ # Localized content│ ├── contact.astro│ ├── index.astro # The landing/home page│ ├── insights/│ ├── products/│ ├── robots.txt.ts # Dynamically generates robots.txt│ └── services.astro└── utils/ # Shared utility functions and helpers
Static files served directly to the browser are within the public
directory at the root of the project.
public/└── banner-pattern.svg
ScrewFast allows for easy customization to suit your specific needs. Here are a couple of ways you can configure components and content:
Some components have properties defined as TypeScript variables within the component file. Here's an example of customizing the FeaturesGeneral
component:
// Define the string variables title and subTitle for the main heading and sub-heading text.const title: string = "Meeting Industry Demands";const subTitle: string ="At ScrewFast, we tackle the unique challenges encountered in the hardware and construction sectors.";
For collections of content like testimonials or statistics, edit the corresponding array of objects:
// An array of testimonialsconst testimonials: Testimonial[] = [...];// An array of statisticsconst statistics: StatProps[] = [...];
Modify the content within these arrays to reflect your data.
You can pass values to props directly in the page files for components used across pages. Here's an example of a HeroSection
and ClientsSection
component with inline props:
<HeroSectionsubTitle="Top-quality hardware tools and expert construction services for every project need."primaryBtn="Start Exploring"primaryBtnURL="/explore"/><ClientsSectiontitle="Trusted by Industry Leaders"subTitle="Experience the reliability chosen by industry giants."/>
Edit the props such as title
, subTitle
, primaryBtn
, etc., to personalize these sections. Ensure that you maintain the structure and data types of the props.
Edit the navigation.ts
file within the utils
directory to manage navigation bar and footer links:
Edit the navBarLinks
array to adjust navigation bar links:
// An array of links for the navigation barexport const navBarLinks: NavLink[] = [{ name: "Home", url: "/" },{ name: "Products", url: "/products" },{ name: "Services", url: "/services" },{ name: "Blog", url: "/blog" },{ name: "Contact", url: "/contact" },];
Replace name
with the display text and url
with the appropriate path to pages on your site.
Similarly, adjust the links displayed in the footer by editing the footerLinks
array:
// An array of links for the footerexport const footerLinks: FooterLinkSection[] = [{section: "Product",links: [{ name: "Tools & Equipment", url: "/tools-equipment" },{ name: "Construction Services", url: "/construction-services" },{ name: "Pricing", url: "/pricing" },],},{section: "Company",links: [{ name: "About us", url: "/about" },{ name: "Blog", url: "/blog" },{ name: "Careers", url: "/careers" },{ name: "Customers", url: "/customers" },],},];
Each section within the footerLinks
array represents a group of links. Update the section
value for the group heading and modify each link's name
and url
as needed.
Replace the placeholder URLs in the socialLinks
object with your social media profiles:
// An object of links for social iconsexport const socialLinks: SocialLinks = {facebook: "#",twitter: "#",github: "#",linkedin: "#",instagram: "#",};
Additional Components[!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.
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.
ScrewFast leverages the power of Astro — a modern, cutting-edge site building framework — and integrates it seamlessly with the utility-first CSS framework TailwindCSS, to deliver exceptional site performance and a seamless user experience. Here are some notable integrations and enhancements included in the project:
ScrewFast is now equipped with Starlight, designed to elevate the user experience with documentation. This modern and elegant theme includes a suite of features to make content more accessible and enjoyable to navigate.
Key Features:
With Starlight, you gain access to powerful features and integrations, as well as extensive customization options to suit your needs.
[!NOTE] Dive into the Starlight's comprehensive feature list and learn how it can streamline your development process by visiting the theme's documentation site.
[!IMPORTANT] If the sidebar in your Starlight site is not scrolling, and you have to manually drag the scrollbar, remove the script tag related to the Lenis smooth scroll library from
src/components/ui/starlight/Head.astro
.
Experience buttery smooth scrolling with Lenis. 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/assets/scripts/lenisSmoothScroll.js
:
// src/assets/scripts/lenisSmoothScroll.jsimport "@styles/lenis.css";import Lenis from "lenis";const lenis = new Lenis();function raf(time) {lenis.raf(time);requestAnimationFrame(raf);}requestAnimationFrame(raf);
And then add it to MainLayout.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.
[!NOTE] If you would like to remove Lenis and return to the browser's default scrolling behavior, simply comment out or delete these lines from the
MainLayout.astro
file and/starlight/Head.astro
if you are using Docs.
For individual product pages, GSAP 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
:
<script>import { gsap } from "gsap";// Initialize GSAP animations...</script>
Customizing Animations:
Please tailor the GSAP animations within this script to fit your project's look and feel. The provided example is a starting point, representing how to leverage GSAP for immediate visual impact as a product page loads.
Modifying or Removing Animations:
gsap.from()
method, or add new GSAP animation calls as required.[!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.
To achieve a cleaner and more spacious design, the default scrollbar has been visually removed. While this choice fits the aesthetic goals of the project, it's important to consider that hiding scrollbars can sometimes affect accessibility and user experience. We recommend evaluating this design decision within the context of your user base and their needs.
For those who prefer custom-styled scrollbars, we suggest using the tailwind-scrollbar plugin, which adds Tailwind CSS utilities for scrollbar styles, allowing for more controlled customization that can also meet accessibility standards.
[!NOTE] If you wish to return the default scrollbar, you can comment out or remove the following CSS from
src/layouts/MainLayout.astro
:
<style>.scrollbar-hide::-webkit-scrollbar {display: none;}.scrollbar-hide {-ms-overflow-style: none;scrollbar-width: none;}</style>
Additionally, update the <html>
tag to remove the scrollbar-hide
class, resulting in:
<html lang="en" class="scroll-pt-16">
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.
Using constants.tsThe 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.
Applying Metadata in Layouts
// constants.tsexport 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...};
When applying metadata within your layouts, such as MainLayout.astro
, you can pass the desired metadata values as props to the Meta
component:
Passing Individual Schema
---// In MainLayout.astro fileconst { meta } = Astro.props;interface Props {meta?: string;}---<Meta meta={meta} />
For page-specific SEO overrides, developers can pass individual schema properties within specific page files.
---import { SITE } from "@/data_files/constants";---<MainLayouttitle={`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.
For a more robust SEO strategy, you can create additional properties in the Meta.astro
component. For instance, you may want to include specific Open Graph tags for article publishing dates or tags for Twitter-specific metadata.
Structured data in JSON-LD format can be managed by the Meta.astro
component, improving how search engines understand your page content and potentially enhancing search results with rich snippets. Modify the structuredData
property with relevant schema.org types and properties:
Using Astro SEO Integrations
<MainLayoutstructuredData={{"@context": "https://schema.org","@type": "WebSite","name": "ScrewFast","url": "https://screwfast.uk","description": "Discover top-quality hardware tools and services"}}>
While the template provides a custom SEO solution, you may choose to utilize an Astro integration such as Astro SEO for additional SEO features and optimizations. Integrating such a package might provide more automated metadata management and additional SEO-focused functionality.
robots.txt
is dynamically generated using the code found in src/pages/robots.txt.ts. This configuration follows the example from the Astro Docs:
import type { APIRoute } from 'astro';const robotsTxt = `User-agent: *Allow: /Sitemap: ${new URL('sitemap-index.xml', import.meta.env.SITE).href}`.trim();export const GET: APIRoute = () => {return new Response(robotsTxt, {headers: {'Content-Type': 'text/plain; charset=utf-8',},});};
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.
(![alt text](../../images/content/<path>))
.src/images/content/<path>
.Pasting getting-started.png
into src/content/post-1.md
results in:
![alt text](../../images/content/post-1/getting-started.png)
to post-1.md
.src/images/content/post-1/getting-started.png
.[!NOTE] Remember to press Shift while dropping images.
Maximize your website's efficiency with these built-in Astro integrations:
astro.config.mjs
file:
export default defineConfig({// ...other Astro configurationsintegrations: [...other Astro integrations, compressor({ gzip: false, brotli: true })],});
astro.config.mjs
file:
export default defineConfig({// ...site: 'https://example.com',integrations: [sitemap()],});
The great thing about Astro is its rich ecosystem of integrations, allowing you to tailor project functionalities to your exact needs. Feel free to explore Astro integrations page and add additional capabilities as you see fit.
This project is built using a variety of tools and technologies that enhance its performance, maintainability, and developer experience. Below is a list of the key tools and their roles in the project:
Interactive components like navbars, modals, and accordions are built using Preline UI, a comprehensive open-source component library.
Styling across our project leverages the utility-first classes offered by Tailwind CSS. This methodology allows us to create custom layouts and components with speed and efficiency.
To ensure consistent code formatting, particularly for class sorting, we have integrated the prettier-plugin-tailwindcss
plugin. The following configuration is set in the .prettierrc
file at the root of the project:
{"plugins": ["prettier-plugin-tailwindcss"]}
We deploy our project on Vercel, capitalizing on their robust platform for seamless CI/CD workflows. Using vercel.json
, we set stringent security headers and caching policies, ensuring adherence to security and performance best practices:
{"headers": [{"source": "/(.*)","headers": [{"key": "Content-Security-Policy","value": "default-src 'self'; [other-directives]"},"Additional security headers..."]}]}
For optimal site performance, we post-process our HTML files with process-html.mjs
, a custom script that minifies HTML after the build phase to reduce file size and improve load times.
Here is a snippet from our HTML minification script in process-html.mjs
:
/process-html.mjs// Post-build HTML minification script snippet// ...await Promise.all(files.map(async (file) => {// File processing and minification logic}));
We encourage you to refer to the detailed documentation for each tool to fully understand their capabilities and how they contribute to the project:
If you're interested in helping, you can contribute in several ways:
This project is released under the MIT License. Please read the LICENSE file for more details.