DOCSEARCHbyAlgolia
Submit Docs

ScrewFast Documentation

repository·main·Indexed 23 days ago

https://github.com/mearashadowfax/screwfast

An open-source Astro template for creating landing pages, blogs, and documentation sites. ScrewFast integrates Tailwind CSS, Preline UI, and GSAP for animations, and includes features like Lenis smooth scrolling, centralized SEO configuration via constants.ts, and support for multiple locales.

Tokens
11.2K
Snippets
30
Records
48
Agent score
79%

What's inside ScrewFast

  1. Navigate ScrewFast Documentation

    main

    The ScrewFast documentation hub is organized into four primary categories to help you find information based on your needs:

    • Quick Start Guides: Concise guides designed for both new users and experienced experts to get up and running quickly.
    • Tools & Equipment: Detailed specifications, usage instructions, and maintenance tips for the ScrewFast tool lineup.
    • Construction Services: Information regarding service offerings and project support.
    • Advanced Topics: In-depth technical documentation for complex implementations.

  2. Understand the ScrewFast Project Structure

    main

    The project follows a modular Astro structure:

    • src/assets/: Contains scripts/ (JS) and styles/ (CSS).
    • src/components/: Reusable components, including sections/, ui/, and ThemeIcon.astro for theme toggling.
    • src/content/: Markdown files organized by collection (e.g., blog/, docs/, insights/, products/).
    • src/data_files/: JSON files containing strings.
    • src/images/: Static image assets.
    • src/layouts/: Layout templates, such as MainLayout.astro.
    • src/pages/: Astro files representing routes (e.g., index.astro, contact.astro, blog/).
    • src/utils/: Shared utility functions.
    • src/content.config.ts: Configuration for content collections.
    • public/: Static files served directly (e.g., banner-pattern.svg).
    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/  
│ └── services.astro
├── utils/ # Shared utility functions and helpers
└── content.config.ts # Contains content collections configuration options

public/
└── banner-pattern.svg

  3. Handle localization for marketing and docs

    main

    ScrewFast supports multiple locales with different implementation patterns:

    Marketing Pages

    Marketing locales are en and fr. Routes are file-based under src/pages/ and src/pages/fr/. Important: Do not rely solely on Astro.currentLocale for marketing pages. Instead, use getMarketingLocale() from src/utils/locale.ts to handle navigation, footers, and forms.

    Documentation (Starlight)

    Docs support en, de, es, fa, fr, ja, and zh-cn. While guides and welcome pages are translated, the construction/, tools/, and advanced/ directories fall back to English for non-root locales.

  4. Understand the project structure and key folders

    main

    ScrewFast uses a specific folder structure to separate concerns. Use these locations when adding or modifying files:

    • src/components/: Reusable UI. Use sections/ for large page blocks (e.g., Hero, Pricing) and ui/ for small elements (e.g., Buttons, Cards).
    • src/layouts/: Page wrappers. MainLayout.astro is the primary layout.
    • src/pages/: File-based routing. Marketing pages use src/pages/ (English) and src/pages/fr/ (French).
    • src/content/: Content collections (blog, products, insights, docs).
    • src/data_files/: Site configuration and JSON data (constants, FAQs, pricing).
    • src/utils/: Navigation and UI helpers. navigation.ts handles links for the Navbar and Footer.
    • src/assets/: Styles (styles/) and scripts (scripts/).
    • src/images/: Processed images used via the @images/ alias.
    • public/: Static assets served as-is.

  5. Optimize site performance with HTML minification

    main

    The project uses a custom post-build script process-html.mjs to minify HTML files. This reduces file size and improves load times by processing files after the initial build phase is complete.

    /process-html.mjs
// Post-build HTML minification script snippet
// ...
await Promise.all(
  files.map(async (file) => {
    // File processing and minification logic
  })
);

  6. Getting Started with ScrewFast

    main

    ScrewFast is an open-source Astro template designed for landing pages, blogs, and documentation. It uses Tailwind CSS and Preline UI for styling and GSAP for animations.

    To start a new project, you can use the GitHub 'Use this template' button to create a new repository from this template in your account.

  7. Clone and Install ScrewFast

    main

    After creating your repository from the template, clone it to your local machine and install dependencies using pnpm.

    # Clone your repository
git clone https://github.com/[YOUR_USERNAME]/[YOUR_REPO_NAME].git
cd [YOUR_REPO_NAME]

# Install dependencies
pnpm install
    git clone https://github.com/[YOUR_USERNAME]/[YOUR_REPO_NAME].git
cd [YOUR_REPO_NAME]
pnpm install

  9. Hide or show the default scrollbar

    main

    The template visually hides the default scrollbar for a cleaner design.

    To return to the default scrollbar:

    1. Remove or comment out the CSS in src/layouts/MainLayout.astro targeting .scrollbar-hide.
    2. Remove the scrollbar-hide class from the <html> tag in src/layouts/MainLayout.astro.
    <html lang="en" class="scroll-pt-16"></html>

  10. Initial Setup and Safety for ScrewFast Tools

    main

    Follow these steps to prepare your ScrewFast tools for their first use:

    1. Unboxing: Open packaging and verify all components and accessories are present.
    2. Safety Check: Read the safety manual, inspect for shipping damage, and ensure all safety guards are correctly positioned.
    3. Calibration and Preparation: Calibrate tools according to manufacturer instructions. Ensure batteries are fully charged or electrical connections are secure.

  11. Customize GSAP animations on product and insight pages

    main

    GSAP is integrated to provide animations when product or insight pages load. You can modify or remove these animations in the script sections of:

    • src/pages/products/[id].astro
    • src/pages/insights/[id].astro

    To modify an animation, update the properties within the gsap.from() method. To remove animations entirely, delete the GSAP script segment.

    <script>
  import { gsap } from 'gsap';
  // Initialize GSAP animations...
</script>

  12. Prepare your first project with the ScrewFast checklist

    main

    Before starting a new project, follow these preparation steps to ensure success:

    1. Define Scope and Objectives

    • Clarify the project's scope, deliverables, and desired outcomes.
    • Define clear objectives and success criteria for project completion.

    2. Audit Tools and Equipment

    • List all required ScrewFast tools and equipment.
    • Verify inventory availability and condition before starting.

    3. Arrange Services

    • If additional expertise or manpower is needed, arrange for ScrewFast construction services in advance.
    • Clarify service level agreements (SLAs) and timelines with your ScrewFast representative.