ScrewFast

ScrewFast

ScrewFast is an open-source website template built with Astro, Tailwind CSS, and Preline UI. You get a landing page, blog, product pages, and a full documentation site in one repo, so you can launch a complete web presence by editing content and props instead of building pages from scratch. Unlike single-purpose landing or blog themes, it ships with SEO metadata, i18n, security headers, and CI already wired up.

Live demo: screwfast.uk

• Four site types in one. Landing page, blog, product catalog, and Starlight docs, all sharing one layout, navbar, and footer.
• 79 ready-made components. 19 page sections (hero, features, pricing, testimonials, FAQ, mega menu) and 57 UI pieces (cards, forms, modals, buttons, icons).
• Multilingual out of the box. English and French marketing pages; docs in 7 languages (en, de, es, fa, fr, ja, zh-CN) with RTL support.
• SEO handled. Centralized title/description/Open Graph config, JSON-LD structured data, generated sitemap and robots.txt.
• Production-hardened. Content Security Policy and other security headers via vercel.json, post-build HTML minification, and a CI pipeline that type-checks, builds, and smoke-tests every push.
• Current stack. Astro 7, Tailwind CSS 4, Preline 5, TypeScript 6. Dependabot keeps it that way.
• AI-assistant friendly. AI_GUIDE.md tells Cursor, Copilot, and Claude where things live and which conventions to follow.
• MIT licensed. 1.4k stars and 380+ forks on GitHub.

Pages are composed from sections with plain props:

1
---
2
import MainLayout from '@/layouts/MainLayout.astro';
3
import HeroSection from '@components/sections/landing/HeroSection.astro';
4
---
5

6
<MainLayout title="Acme Tools">
7
  <HeroSection
8
    title="Equip Your Projects with Acme"
9
    subTitle="Top-quality hardware tools for every project need."
10
    primaryBtn="Start Exploring"
11
    primaryBtnURL="/products"
12
  />
13
</MainLayout>
14
<!-- Renders a full page with navbar, hero, and footer -->

---

Table of Contents

• Getting Started
• Make It Yours
  • Site name, SEO, and Open Graph
  • Navigation and footer
  • Pages and sections
  • Blog, products, and insights
  • Documentation (Starlight)
  • Languages
  • Icons
• Deployment
• Project Structure
• Under the Hood
  • Smooth scrolling (Lenis)
  • Animations (GSAP)
  • Hidden scrollbar
  • SEO and structured data
  • robots.txt and sitemap
  • Markdown, MDX, and image pasting
  • HTML minification
  • Security headers
  • Formatting
• Contributing
• License

---

Getting Started

You need Node.js 22 and pnpm 9 or newer (the versions CI uses).

1. Create your repo. Click Use this template at the top of the GitHub page, or clone directly:

1
git clone https://github.com/mearashadowfax/ScrewFast.git my-site
2
cd my-site

2. Install dependencies:

1
pnpm install

3. Start the dev server:

1
pnpm dev

Open http://localhost:4321. Edits to any file reload the page.

4. Build for production:

1
pnpm build

This runs astro check (type-checking), builds the site into dist/, and minifies the HTML. Preview the result with pnpm preview, or run pnpm test:smoke to serve dist/ and verify the key routes respond.

[!TIP] Only need one language? The monolingual-site branch has the French pages and i18n plumbing removed.

---

Make It Yours

Site name, SEO, and Open Graph

Everything site-wide lives in src/data_files/constants.ts:

1
export const SITE = {
2
  title: 'ScrewFast',
3
  tagline: 'Top-quality Hardware Tools',
4
  description: '...',
5
  url: 'https://screwfast.uk',
6
  author: 'Emil Gulamov',
7
};
8

9
export const SEO = { title: SITE.title, description: SITE.description, structuredData: { ... } };
10
export const OG = { locale: 'en_US', type: 'website', title: `${SITE.title}: ...`, image: ogImageSrc, ... };

Change SITE, and the <Meta> component picks it up on every page. Also update site in astro.config.mjs so the sitemap and robots.txt point at your domain.

Navigation and footer

Edit src/utils/navigation.ts (and src/utils/fr/navigation.ts for French):

1
const navBarLinks = [
2
  { name: 'Home', url: '/' },
3
  { name: 'Products', url: '/products' },
4
  { name: 'Blog', url: '/blog' },
5
];
6

7
const footerLinks = [
8
  { section: 'Ecosystem', links: [{ name: 'Documentation', url: '/welcome-to-docs/' }] },
9
  { section: 'Company', links: [{ name: 'About us', url: '#' }] },
10
];
11

12
const socialLinks = { facebook: '#', x: '#', github: '#', ... };

Two navbars are included in src/components/sections/navbar&footer/: Navbar.astro (standard) and NavbarMegaMenu.astro (mega menu, links in src/data_files/mega_link.ts). Swap them in src/layouts/MainLayout.astro.

Pages and sections

Pages in src/pages/ compose sections from src/components/sections/ and pass content as props, exactly like the example above. Open src/pages/index.astro to see the full homepage, then edit the props or remove sections you don't need.

Sections take all their copy as props, so page files are the single place to edit text. Reusable data such as FAQs, features, and pricing tiers lives as JSON in src/data_files/ and is passed in the same way.

Blog, products, and insights

Content is Markdown/MDX in src/content/{blog,products,insights}/{en,fr}/. Schemas are defined in src/content.config.ts. A blog post looks like:

1
---
2
title: "Maximizing Efficiency with ScrewFast's Cutting-Edge Tools"
3
description: 'Innovating Construction Efficiency with Precision Tools & Support'
4
author: 'Jacob'
5
authorImage: '@/images/blog/jacob.avif'
6
pubDate: 2024-02-06
7
cardImage: '@/images/blog/post-1.avif'
8
readTime: 4
9
tags: ['tools', 'construction', 'workflow']
10
---
11

12
Post body here.

Blog posts get social share buttons, a localStorage bookmark button, and a feedback widget (UI only, no back end). Insight pages get a table of contents with a scroll-progress indicator.

Documentation (Starlight)

Docs live in src/content/docs/ and are served by Starlight at /welcome-to-docs/. Sidebar, locales, and custom components are configured in the starlight() block of astro.config.mjs. Starlight brings search, dark mode, code highlighting, and responsive navigation.

[!IMPORTANT] If the docs sidebar won't scroll, remove the Lenis <script> from src/components/ui/starlight/Head.astro.

Languages

Marketing pages are file-based: src/pages/ for English, src/pages/fr/ for French. A LanguagePicker component switches between them. Use getMarketingLocale() from src/utils/locale.ts when you need the current locale in a component. Docs locales are configured in Starlight; guides and the welcome page are translated, other docs sections fall back to English.

Icons

SVG icons are centralized in src/components/ui/icons/icons.ts (38 included). Render one with:

1
<Icon name="tools" />

Add an entry to icons.ts to register a new icon.

---

Deployment

pnpm build produces a static site in dist/ that any static host can serve.

• Vercel: Deploy with Vercel. The included vercel.json adds security headers and caching rules.
• Netlify: Deploy to Netlify.

---

Project Structure

1
src/
2
├── assets/
3
│   ├── scripts/            # Lenis smooth scroll, demo form handlers
4
│   └── styles/             # global.css, lenis.css, Starlight overrides
5
├── components/
6
│   ├── Meta.astro          # SEO, Open Graph, JSON-LD
7
│   ├── ThemeIcon.astro     # Light/dark toggle
8
│   ├── sections/           # Page sections: landing, features, pricing, navbar&footer, ...
9
│   └── ui/                 # Buttons, cards, forms, icons, banners, ...
10
├── content/
11
│   ├── blog/  products/  insights/   # en/ and fr/ subfolders
12
│   └── docs/                          # Starlight docs + translated locales
13
├── data_files/             # constants.ts (SITE/SEO/OG), faqs.json, features.json, pricing.json
14
├── images/                 # Imported and optimized by Astro
15
├── layouts/
16
│   └── MainLayout.astro    # Navbar + slot + footer, Meta, Lenis, Preline
17
├── pages/                  # File-based routes; fr/ for French
18
│   ├── index.astro  blog/  products/  insights/  contact.astro  services.astro
19
│   ├── 404.astro
20
│   └── robots.txt.ts  manifest.json.ts  favicon.ico.ts
21
├── utils/                  # navigation.ts, locale.ts, helpers
22
└── content.config.ts       # Content collection schemas
23

24
public/                     # Served as-is
25
process-html.mjs            # Post-build HTML minifier
26
scripts/smoke.mjs           # Serves dist/ and checks key routes
27
vercel.json                 # Security headers and caching
28
AI_GUIDE.md                 # Conventions for AI coding assistants

Path aliases (@components/*, @data/*, @images/*, @scripts/*, @styles/*, @utils/*, @/*) are defined in tsconfig.json.

---

Under the Hood

Smooth scrolling (Lenis)

Lenis is loaded from src/assets/scripts/lenisSmoothScroll.js in MainLayout.astro and in src/components/ui/starlight/Head.astro. Smooth scrolling can affect accessibility and performance on some devices, so test it with your audience.

To go back to native scrolling, delete this from both files:

1
<script>
2
  import '@scripts/lenisSmoothScroll.js';
3
</script>

Animations (GSAP)

GSAP animates product and insight detail pages on load. The setup is in the <script> blocks of src/components/sections/products/ProductDetail.astro and src/components/sections/insights/InsightDetail.astro. Tweak the gsap.from() calls, or delete the script blocks to drop GSAP.

Hidden scrollbar

The scrollbar is hidden for a cleaner look. This can hurt usability for some users; to restore it, remove the scrollbar-hide class from <html> in MainLayout.astro and delete the .scrollbar-hide styles at the bottom of that file. For styled scrollbars, tailwind-scrollbar is a good fit.

SEO and structured data

MainLayout passes title, meta, structuredData, customDescription, and customOgTitle to Meta.astro, falling back to constants.ts when a page doesn't override them:

1
---
2
import { SITE } from '@data/constants';
3
---
4

5
<MainLayout
6
  title={`Example Page | ${SITE.title}`}
7
  structuredData={{
8
    '@context': 'https://schema.org',
9
    '@type': 'WebPage',
10
    name: 'Example Page',
11
    url: `${SITE.url}/example`,
12
  }}
13
>
14
  ...
15
</MainLayout>

Add more tags to Meta.astro (article dates, Twitter-specific fields) if you need them, or swap in an integration like astro-seo.

robots.txt and sitemap

src/pages/robots.txt.ts generates robots.txt at build time and links to the sitemap produced by @astrojs/sitemap. Both derive the domain from site in astro.config.mjs.

Markdown, MDX, and image pasting

@astrojs/mdx is enabled, so content files can be .md or .mdx. The included .vscode/settings.json lets you paste or drag an image into a content file while holding Shift: VS Code copies it to src/images/content/<file-name>/ and inserts the Markdown link.

HTML minification

pnpm build finishes by running process-html.mjs, which minifies every HTML file in the build output with html-minifier-terser.

Security headers

vercel.json sets Content-Security-Policy, X-Frame-Options, X-Content-Type-Options, Referrer-Policy, Permissions-Policy, and caching headers. Adjust the CSP if you add third-party scripts or image hosts.

Formatting

Prettier with prettier-plugin-astro and prettier-plugin-tailwindcss (class sorting) is configured in .prettierrc. Run pnpm format:fix locally; CI runs pnpm format:check.

---

Contributing

• Bugs and ideas: open an issue or start a discussion.
• Pull requests: welcome. Run pnpm format:fix and pnpm build before submitting.

See CODE_OF_CONDUCT.md.

License

MIT. See LICENSE.

The company, products, and logos shown are fictional or used for demonstration only and should be replaced in your site.