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

[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 easy link copying.
[x] 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.
[x] Post Feedback Component:
- Collects user feedback at the end of blog posts.
- Serves as a UI demonstration (no back-end integration currently).
[x] 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.
[x] 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.
[x] 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.
[x] 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:

pnpm 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 pnpm scripts to manage your project's development lifecycle:

pnpm dev: Starts a local development server with hot reloading enabled.
pnpm preview: Serves your build output locally for preview before deployment.
pnpm 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:

pnpm 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/         
│   ├── robo