Versatile Landing, Blog & Docs Template for a Simplified Web Presence

ScrewFast

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.

Why Choose ScrewFast?
What's New
Getting Started
- Installation
- Development Commands
Deployment
Project Structure
Static Assets and Public Resources
Customization
Integrations and Enhancements
Tools and Technologies
Contributing
License

Why Choose ScrewFast?

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.
Highly Customizable: Flexibly adapt and style your site using Astro and Tailwind CSS.

Features

Astro-Powered: Utilize a modern static-site generation framework.
Tailwind CSS: Enjoy rapid UI development with a utility-first CSS framework.
Preline UI: Implement prebuilt UI components for added elegance.
GSAP Integration: Impress with professional and polished animations.
Markdown Content Collections: Organize and manage your content seamlessly.
Starlight Documentation: A sleek, user-friendly, full-featured documentation theme.
Internationalization (i18n): Integrates Astro’s internationalization features.
SEO and Responsiveness: Ensure your site is discoverable and accessible on any device.

What's New

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 easy link copying.
Bookmark Button Component:
- Allows users to bookmark blog posts for later reference using localStorage.
- Provides a visual indication of whether a post is bookmarked.
- 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.
Post Feedback Component:
- Collects user feedback at the end of blog posts.
- Serves as a UI demonstration (no back-end integration currently).
Starlight Documentation Theme Integration:
- A sleek, user-friendly, full-featured documentation theme, which enhances the readability and usability of documentation.
- Enhances readability and usability of documentation with features like site navigation, search, dark mode, code highlighting, and internationalization support.
Icon Set Component:
- Centralizes SVG icons for easy management and updates.
- Render any pre-defined icon SVG using <Icon name="iconName" /> in your Astro components.
- Note: Developers have the option to use other community integrations like astro-icons. However, the author decided to create a custom icon set component for managing custom icons.
Internationalization (i18n) Features:
- Integrates Astro's i18n features and includes a custom LanguagePicker component.
- Developers can access the monolingual version directly from monolingual-site branch.
Dynamic Table of Contents (ToC) with Scroll Progress Indicator:
- Highlights the relevant section in the ToC with a scroll progress indicator.
- Developers seeking alternatives might consider the remark-toc plugin.

[!NOTE] Currently, there are no planned improvements or known bugs. If you encounter any issues, please report them on our issues page or start a discussion to share ideas, suggestions, or ask questions.

Getting Started

This guide will provide you with the necessary steps to set up and familiarize yourself with the Astro project on your local development machine.

Use This Template

To get started, click the Use this template button (the big green one at the top right) to create your own repo from this template in your GitHub account.

Clone the Repository

Once your repository is created, you can clone it to your local machine using the following commands:

git clone https://github.com/[YOUR_USERNAME]/[YOUR_REPO_NAME].git
cd [YOUR_REPO_NAME]

Installation

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.

Development Commands

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.

Deployment

Building Your Site

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).

Deploying to Vercel

Click the button below to start deploying your project on Vercel:

Deploying to Netlify

Click the button below to start deploying your project on Netlify:

Project Structure

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/         
├── 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
└── content.config.ts     # Contains content collections configuration options

Static Assets and Public Resources

Static files served directly to the browser are within the public directory at the root of the project.


public/
└── banner-pattern.svg

Customization

ScrewFast allows for easy customization to suit your specific needs. Here are a couple of ways you can configure components and content:

Editing Component Variables

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 testimonials
const testimonials: Testimonial[] = [...];

// An array of statistics
const statistics: StatProps[] = [...];

Modify the content within these arrays to reflect your data.

Props in Component Instances

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:

<HeroSection
  subTitle="Top-quality hardware tools and expert construction services for every project need."
  primaryBtn="Start Exploring"
  primaryBtnURL="/explore"
/>

<ClientsSection
  title="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.

Customizing Navigation and Footer Links

Edit the navigation.ts file within the utils directory to manage navigation bar and footer links:

Navigation Bar Links

Edit the navBarLinks array to adjust navigation bar links:

// An array of links for the navigation bar
export const navBarLinks: NavLink[] = [
  { name: "Home\