cgartlab.github.io
1.0.0
O ScrewFast é um modelo de código aberto projetado para configuração rápida e eficiente do projeto da web, misturando o minimalismo com a funcionalidade . Esteja você mostrando um portfólio, lançando uma página de destino da empresa ou executando um blog, o ScrewFast fornece tudo o que você precisa. Ao combinar o poder do Astro, do Tailwind CSS e do PRELINE UI, este modelo oferece uma solução funcional e esteticamente agradável para sua presença na Web.
Veja a demonstração ao vivo
Componente de participação social :
Componente de botão de marcador :
localStorage .localStorage por cookies para persistir postagens marcadas.Publique componente de feedback :
Integração do tema da documentação da Starlight :
Componente do conjunto de ícones :
<Icon name="iconName" /> em seus componentes astro.Recursos de internacionalização (I18N) :
LanguagePicker personalizado.monolingual-site . Índice dinâmico de tabela (TOC) com indicador de progresso de rolagem :
Observação
Atualmente, não há melhorias planejadas ou bugs conhecidos. Se você encontrar algum problema, denuncie -os sobre nossa página de problemas ou inicie uma discussão para compartilhar idéias, sugestões ou fazer perguntas.
Este guia fornecerá as etapas necessárias para configurar e familiarizar -se com o projeto Astro em sua máquina de desenvolvimento local.
Para começar, clique no botão Use this template (o grande verde no canto superior direito) para criar seu próprio repositório a partir deste modelo na sua conta do GitHub.
Depois que seu repositório for criado, você pode cloná -lo para a máquina local usando os seguintes comandos:
git clone https://github.com/[YOUR_USERNAME]/[YOUR_REPO_NAME].git
cd [YOUR_REPO_NAME]Comece instalando as dependências do projeto. Abra seu terminal, navegue até o diretório raiz do projeto e execute:
npm install Este comando instalará todas as dependências necessárias definidas no arquivo package.json .
Com as dependências instaladas, você pode utilizar os seguintes scripts da NPM para gerenciar o ciclo de vida de desenvolvimento do seu projeto:
npm run dev : inicia um servidor de desenvolvimento local com recarregamento a quente ativado.npm run preview : serve sua saída de compilação localmente para visualização antes da implantação.npm run build : Pacotes seu site em arquivos estáticos para produção.Para obter ajuda detalhada com os comandos da Astro CL, visite a documentação do Astro.
Antes da implantação, você precisa criar uma construção de produção:
npm run build Isso cria um diretório dist/ com o seu site construído (configurável por meio do UPLIR em Astro).
Clique no botão abaixo para começar a implantar seu projeto no Vercel:
Clique no botão abaixo para começar a implantar seu projeto no netlify:
O ScrewFast organiza componentes, conteúdo e layouts modulares para otimizar o desenvolvimento e o gerenciamento de conteúdo.
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
Os arquivos estáticos servidos diretamente ao navegador estão dentro do diretório public na raiz do projeto.
public/
└── banner-pattern.svg
O ScrewFast permite fácil personalização para atender às suas necessidades específicas. Aqui estão algumas maneiras de configurar componentes e conteúdo:
Alguns componentes possuem propriedades definidas como variáveis de tipscript dentro do arquivo de componente. Aqui está um exemplo de personalização do componente FeaturesGeneral :
// 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." ;Para coleções de conteúdo como depoimentos ou estatísticas, edite a matriz correspondente de objetos:
// An array of testimonials
const testimonials : Testimonial [ ] = [ ... ] ;
// An array of statistics
const statistics : StatProps [ ] = [ ... ] ;Modifique o conteúdo nessas matrizes para refletir seus dados.
Você pode passar valores para adereços diretamente nos arquivos da página para componentes usados nas páginas. Aqui está um exemplo de um componente de HeroSection e ClientsSection com adereços embutidos:
< 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. "
/> Edite os adereços como title , subTitle , primaryBtn , etc., para personalizar essas seções. Certifique -se de manter a estrutura e os tipos de dados dos adereços.
Edite o arquivo de navigation.ts no diretório utils para gerenciar links de barra de navegação e rodapé:
Edite a matriz navBarLinks para ajustar os links da barra de navegação:
// An array of links for the navigation bar
export const navBarLinks : NavLink [ ] = [
{ name : "Home" , url : "/" } ,
{ name : "Products" , url : "/products" } ,
{ name : "Services" , url : "/services" } ,
{ name : "Blog" , url : "/blog" } ,
{ name : "Contact" , url : "/contact" } ,
] ; Substitua name pelo texto de exibição e url pelo caminho apropriado para as páginas do seu site.
Da mesma forma, ajuste os links exibidos no rodapé editando a matriz footerLinks :
// An array of links for the footer
export 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" } ,
] ,
} ,
] ; Cada seção dentro da matriz footerLinks representa um grupo de links. Atualize o valor section para o cabeçalho do grupo e modifique name e url de cada link, conforme necessário.
Substitua os URLs de espaço reservado no objeto socialLinks pelos seus perfis de mídia social:
// An object of links for social icons
export const socialLinks : SocialLinks = {
facebook : "#" ,
twitter : "#" ,
github : "#" ,
linkedin : "#" ,
instagram : "#" ,
} ; Observação
Lembre -se de adicionar URLs completos e válidos para que a navegação funcione corretamente. Essas personalizações refletirão em todo o site Astro, promovendo consistência em todas as páginas.
Temos duas opções para os componentes da barra de navegação: Navbar.astro para um marinho regular e NavbarMegaMenu.astro para um mega menu. Ambos estão localizados em src/components/sections/navbar&footer .
Os componentes Navbar.astro e NavbarMegaMenu.astro podem ser configurados no MainLayout.astro , permitindo que você escolha o estilo de navegação que melhor se adequa ao seu projeto. Para personalizar esses componentes, você pode modificá -los diretamente em src/components/sections/navbar&footer para aplicar configurações específicas ou atualizações de design.
O ScrewFast agora está equipado com Starlight, projetado para elevar a experiência do usuário com a documentação. Esse tema moderno e elegante inclui um conjunto de recursos para tornar o conteúdo mais acessível e agradável de navegar.
Principais recursos:
Com a Starlight, você obtém acesso a recursos e integrações poderosos, além de extensas opções de personalização para atender às suas necessidades.
Observação
Mergulhe na lista abrangente de recursos da Starlight e saiba como ela pode otimizar seu processo de desenvolvimento visitando o site de documentação do tema.
Importante
Se a barra lateral no seu site Starlight não estiver rolando e você precisar arrastar manualmente a barra de rolagem, remova a etiqueta de script relacionada à biblioteca Lenis Smooth Scroll da src/components/ui/starlight/Head.astro .
Experimente rolagem suave amanteigada com Lenis. Integramos a Lenis para fornecer uma experiência de rolagem aprimorada que seja fluida e responsiva.
Veja como configuramos Lenis em src/assets/scripts/lenisSmoothScroll.js :
// src/assets/scripts/lenisSmoothScroll.js
import "@styles/lenis.css" ;
import Lenis from "lenis" ;
const lenis = new Lenis ( ) ;
function raf ( time ) {
lenis . raf ( time ) ;
requestAnimationFrame ( raf ) ;
}
requestAnimationFrame ( raf ) ; E depois adicione -o a MainLayout.astro :
< script >
import "@scripts/lenisSmoothScroll.js";
</ script >Observe que a rolagem suave pode afetar a acessibilidade e o desempenho em alguns dispositivos; portanto, certifique -se de testá -lo de maneira abrangente em diferentes ambientes.
Observação
Se você deseja remover Lenis e retornar ao comportamento de rolagem padrão do navegador, basta comentar ou excluir essas linhas do arquivo MainLayout.astro e /starlight/Head.astro se você estiver usando documentos.
Para páginas de produtos individuais, o GSAP foi integrado para adicionar animações envolventes que executam assim que a página do produto carregar. Você pode encontrar e modificar a configuração do GSAP nas seções de script do arquivo de página do produto localizado em src/pages/products/[...slug].astro e a página Insights em src/pages/insights/[...slug].astro :
< script >
import { gsap } from "gsap";
// Initialize GSAP animations...
</ script >Personalizando animações:
Por favor, adapte as animações do GSAP nesse script para se encaixar na aparência e na sensação do seu projeto. O exemplo fornecido é um ponto de partida, representando como aproveitar o GSAP para o impacto visual imediato como uma página do produto carrega.
Modificando ou removendo animações:
gsap.from() ou adicione novas chamadas de animação GSAP, conforme necessário.Observação
Optamos para manter a integração enxuta e focada, mas a documentação abrangente do GSAP pode ser referida para animações mais complexas: documentação do GSAP.
Para obter um design mais limpo e espaçoso, a barra de rolagem padrão foi removida visualmente. Embora essa opção se encaixe nos objetivos estéticos do projeto, é importante considerar que as barras de rolagem ocultar às vezes podem afetar a acessibilidade e a experiência do usuário. Recomendamos avaliar essa decisão de design no contexto da sua base de usuários e de suas necessidades.
Para aqueles que preferem barras de rolagem de estilo personalizado, sugerimos o uso do plug-in Tailwind-ScrollBar, que adiciona utilitários CSS do Tailwind CSS para estilos de barra de rolagem, permitindo uma personalização mais controlada que também pode atender aos padrões de acessibilidade.
Observação
Se você deseja devolver a barra de rolagem padrão, pode comentar ou remover o seguinte CSS de src/layouts/MainLayout.astro :
< style >
.scrollbar-hide::-webkit-scrollbar {
display: none;
}
.scrollbar-hide {
-ms-overflow-style: none;
scrollbar-width: none;
}
</ style > Além disso, atualize a tag <html> para remover a classe scrollbar-hide , resultando em:
< html lang =" en " class =" scroll-pt-16 " >A configuração de SEO no modelo de parafuso foi projetada para capacitar os usuários a otimizar a visibilidade de seus site em mecanismos de pesquisa e plataformas de mídia social. Esta documentação descreve os detalhes da implementação e as instruções de uso para gerenciar efetivamente as configurações de SEO.
A configuração do SEO foi centralizada usando o arquivo constants.ts . Esse arquivo gerencia dados relacionados ao SEO, como títulos de página, descrições, dados estruturados e tags gráficos abertos, fornecendo uma abordagem mais estruturada e gerenciável ao gerenciamento de SEO.
Para personalizar as configurações de SEO, modifique os valores no arquivo constants.ts . As principais configurações incluem site, SEO e OG, permitindo que os desenvolvedores defina os parâmetros de SEO em todo o local.
// constants.ts
export 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...
} ; Ao aplicar metadados em seus layouts, como MainLayout.astro , você pode passar os valores de metadados desejados como adereços para o componente Meta :
---
// In MainLayout.astro file
const { meta } = Astro . props ;
interface Props {
meta ? : string ;
}
---
< Meta meta = { meta } />Para substituições de SEO específicas de página, os desenvolvedores podem passar por propriedades de esquema individuais dentro de arquivos de página específicos.
---
import { SITE } from " @/data_files/constants " ;
---
< MainLayout
title = { ` Example Page | ${ SITE . title } ` }
structuredData = { {
" @type " : " WebPage " ,
// Other structured data properties...
} }
>
<!-- Page content -->
</ MainLayout >
Com essa configuração, o componente Meta recebe a meta descrição personalizada e a aplica aos metadados da página. Se nenhum valor personalizado for passado, o padrão do Meta.astro será usado.
Para uma estratégia de SEO mais robusta, você pode criar propriedades adicionais no componente Meta.astro . Por exemplo, convém incluir tags gráficas abertas específicas para datas de publicação de artigos ou tags para metadados específicos do Twitter.
Os dados estruturados no formato JSON-LD podem ser gerenciados pelo componente Meta.astro , melhorando como os mecanismos de pesquisa entendem o conteúdo da sua página e aprimorando potencialmente os resultados da pesquisa com snippets ricos. Modifique a propriedade structuredData com esquema relevante.org Tipos e propriedades:
< MainLayout
structuredData = { {
" @context " : " https://schema.org " ,
" @type " : " WebSite " ,
" name " : " ScrewFast " ,
" url " : " https://screwfast.uk " ,
" description " : " Discover top-quality hardware tools and services "
} }
>Embora o modelo forneça uma solução de SEO personalizada, você pode optar por utilizar uma integração Astro, como o Astro SEO, para recursos e otimizações adicionais de SEO. A integração desse pacote pode fornecer mais gerenciamento de metadados automatizados e funcionalidade adicional focada em SEO.
robots.txt é gerado dinamicamente usando o código encontrado em src/páginas/robots.txt.ts. Esta configuração segue o exemplo do 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' ,
} ,
} ) ;
} ; A adição do arquivo .vscode/settings.json no diretório raiz facilita a integração de imagem diretamente nas coleções de conteúdo nos editores de marcação. Esse recurso permite a criação sem esforço dos links de marcação com arquivos de mídia e cópia contínua no espaço de trabalho.
() .src/images/content/<path> . Colar getting-started.png em src/content/post-1.md resulta em:
 para post-1.md .src/images/content/post-1/getting-started.png . Observação
Lembre -se de pressionar o Shift enquanto solta imagens.
Maximize a eficiência do seu site com estas integrações Astro integradas:
astro.config.mjs : export default defineConfig ( {
// ...other Astro configurations
integrations : [ ... other Astro integrations , compressor ( { gzip : false , brotli : true } ) ] ,
} ) ;astro.config.mjs : export default defineConfig ( {
// ...
site : 'https://example.com' ,
integrations : [ sitemap ( ) ] ,
} ) ;O melhor do Astro é o seu rico ecossistema de integrações, permitindo que você adapte as funcionalidades do projeto às suas necessidades exatas. Sinta -se à vontade para explorar a página de integrações do Astro e adicionar recursos adicionais à medida que você achar adequado.
Este projeto é construído usando uma variedade de ferramentas e tecnologias que aprimoram seu desempenho, manutenção e experiência do desenvolvedor. Abaixo está uma lista das principais ferramentas e seus papéis no projeto:
Componentes interativos como barbas, modais e acordeões são construídos usando a interface do usuário do Preline, uma biblioteca de componentes de código aberto abrangente.
O estilo de nosso projeto aproveita as classes de utilitário oferecidas pelo Tailwind CSS. Essa metodologia nos permite criar layouts e componentes personalizados com velocidade e eficiência.
Para garantir a formatação consistente do código, principalmente para a classificação de classe, integramos o plug-in prettier-plugin-tailwindcss . A configuração a seguir é definida no arquivo .prettierrc na raiz do projeto:
{
"plugins" : [ " prettier-plugin-tailwindcss " ]
} Implantamos nosso projeto no Vercel, capitalizando sua plataforma robusta para fluxos de trabalho com CI/CD sem costura. Usando vercel.json , definimos cabeçalhos de segurança rigorosos e políticas de cache, garantindo a adesão à segurança e das melhores práticas de desempenho:
{
"headers" : [
{
"source" : " /(.*) " ,
"headers" : [
{
"key" : " Content-Security-Policy " ,
"value" : " default-src 'self'; [other-directives] "
},
" Additional security headers... "
]
}
]
} Para o desempenho ideal do site, pós-processo de nossos arquivos HTML com process-html.mjs , um script personalizado que minifica o HTML após a fase de construção para reduzir o tamanho do arquivo e melhorar os tempos de carregamento.
Aqui está um trecho do nosso script de minificação HTML em process-html.mjs :
/ process-html.mjs
// Post-build HTML minification script snippet
// ...
await Promise . all (
files . map ( async ( file ) => {
// File processing and minification logic
} )
) ;Incentivamos você a se referir à documentação detalhada de cada ferramenta para entender completamente suas capacidades e como elas contribuem para o projeto:
Se você estiver interessado em ajudar, pode contribuir de várias maneiras:
Este projeto é divulgado sob a licença do MIT. Leia o arquivo de licença para obter mais detalhes.
Nota: Este modelo de site não possui afiliação às empresas exibidas. Os logotipos são usados apenas para fins de demonstração e devem ser substituídos em versões personalizadas.
