sveltekit blog mdx

Iniciador do blog SvelteKit MDsvex

sveltekit-blog-mdx

Iniciador do blog SvelteKit para ajudá-lo a começar seu próximo blog Svelte. O projeto cria um Progressive Web App (PWA) pronto para uso. Você só precisa personalizar com seus logotipos, etc.

Consulte a postagem do blog Sveltekit Blog Starter no site do Rodney Lab para obter algumas explicações sobre o que há dentro e como personalizar. Por favor, deixe as perguntas em um comentário na parte inferior da página.

Aqui está o início rápido:

Tudo que você precisa para construir um blog Svelte, desenvolvido com sveltekit-blog-mdx .

Criando seu próprio blog MDsveX

Se você está vendo isso, provavelmente já realizou esta etapa. Parabéns!

git clone https://github.com/rodneylab/sveltekit-blog-mdx.git my-new-mdsvex-blog
cd my-new-mdsvex-blog
pnpm install # or npm install
npm run dev

Imagens responsivas

O starter cria e armazena em cache imagens responsivas usando o plugin vite-imagetools . Isso é fácil de usar quando você sabe com antecedência qual imagem deseja incluir. Basta importá-lo na página em que deseja usá-lo:

 import featuredImageSrc from '$lib/assets/home/home.jpg' ;

O plugin vite-imagetools irá então gerar e fazer o hash da imagem. Veja exemplos em src/routes/index.svelte .

O exemplo em que você deseja ter uma imagem em destaque diferente para cada postagem do blog é um pouco mais complicado, embora gerenciável. Nesse caso, você pode executar um script (consulte generate-responsive-image-data.js ) para iterar todas as postagens do blog, obtendo a imagem em destaque do assunto inicial da postagem do blog. Este script pode então gerar as importações necessárias em um arquivo JavaScript gerado, um para cada postagem do blog (consulte o diretório src/lib/generated ). Finalmente, você pode importar dinamicamente esse arquivo JavaScript na função de carregamento do modelo de blog.

Para executar o script incluído no comando, digite:

pnpm run gen:images

Isso deve ser feito sempre que você adicionar novas postagens no blog. Ele também gera um espaço reservado de baixa resolução para minimizar a mudança do layout do conteúdo durante o carregamento da página.

Para que o script encontre as imagens da postagem do seu blog, adicione-as à pasta src/lib/assets/blog . Nessa pasta, crie uma nova pasta cujo nome corresponda ao post slug e adicione as imagens à nova pasta. O nome do arquivo precisa corresponder ao nome que você usa no post frontmatter (para featureImage, por exemplo).

O script pode precisar de alguns ajustes para o seu caso de uso. Deixe-me saber como isso pode ser melhorado.

Mapa do site XML

• O mapa do site XML é gerado na rota do servidor src/routes/sitemap.xml/+server.js . Ajuste este arquivo para ajustar a saída.

Certifique-se de que o URL do seu site esteja definido em .env como a variável PUBLIC_SITE_URL para que os URLs corretos sejam exibidos no mapa do site.

Aplicativo Web Progressivo (PWA)

O starter gera principalmente a configuração do PWA automaticamente, incluindo o service worker para disponibilidade offline e adicionando meta à seção HTML head. Um PWA precisa de um arquivo de manifesto detalhando logotipos (para favicons) em diferentes tamanhos, compatíveis com vários dispositivos. Você precisará gerar um conjunto de ícones em assets/ :

• apple-touch-icon.png
• favicon.ico
• ícone.svg
• ícone-192.png
• icon-512.png

Você pode usar ferramentas gratuitas de código aberto para gerá-las e otimizá-las a partir de um SVG de entrada. Esse recurso inclui um script de shell que você pode executar para automatizar a geração.

A meta HTML para PWAs é adicionada no componente em src/lib/components/PWA.svelte .

Você pode personalizar o manifesto (incluindo o caminho do arquivo do ícone) editando src/lib/config/website.js . As seguintes variáveis ​​alimentam o arquivo manifest.json gerado:

• siteTitle ,
• siteShortTitle ,
• siteUrl ,
• backgroundColor ,
• themeColor .

Consulte o artigo sobre Progressive Web Apps no SvelteKit para obter mais informações.

Prédio

npm run build

Você pode visualizar o aplicativo criado com npm run preview , independentemente de ter instalado um adaptador. Isso não deve ser usado para veicular seu aplicativo em produção.

O que há dentro?

 .
├── README.md
├── generate-responsive-image-data.js
├── jsconfig.json
├── netlify.toml
├── package.json
├── src
│   ├── app.html
│   ├── content
│   │   └── blog
│   │       ├── best-medium-format-camera-for-starting-out
│   │       ├── folding-camera
│   │       └── twin-lens-reflex-camera
│   ├── global.d.ts
│   ├── hooks.server.js
│   ├── lib
│   │   ├── assets
│   │   │   ├── blog
│   │   │   └── home
│   │   ├── components
│   │   │   ├── BannerImage.svelte
│   │   │   └── ...
│   │   ├── config
│   │   │   └── website.js
│   │   ├── constants
│   │   │   └── entities.js
│   │   ├── generated
│   │   │   └── posts
│   │   ├── styles
│   │   └── utilities
│   │       ├── blog.js
│   │       ├── file.js
│   │       └── image.js
│   ├── routes
│   │   ├── +error.svelte
│   │   ├── +layout.js
│   │   ├── +layout.svelte
│   │   ├── +page.js
│   │   ├── +page.svelte
│   │   ├── [slug]
│   │   │   ├── +layout.svelte
│   │   │   ├── +page.js
│   │   │   └── +page.svelte
│   │   ├── contact
│   │   │   └── +page.svelte
│   │   ├── manifest.webmanifest
│   │   │   └── +server.js
│   │   └── sitemap.xml
│   │       └── +server.js
│   └── service-worker.js
├── static
│   ├── assets
│   ├── favicon.png
│   ├── icon.svg
│   ├── robots.txt
│   └── sitemap.xml
└── svelte.config.js

src/content

• O src/content/blog é onde precisamos colocar nossas postagens de blog. Basta limpar o conteúdo de amostra e substituí-lo pela sua visão do mundo! Existe uma pasta separada para cada postagem, o que permite manter imagens, vídeos e outras mídias relacionadas específicas a uma postagem mais bem organizadas. Definimos o caminho do navegador a partir deste nome de pasta, portanto, lembre-se disso ao nomear as pastas. Escreva a postagem real em um arquivo chamado index.md dentro da pasta da postagem. Embora o arquivo tenha uma extensão .md , você pode escrever Svelte nele.

src

• hooks.server.js definimos a Política de Segurança de Conteúdo (CSP) e outros cabeçalhos de segurança HTTP aqui, eficazes para aplicativos renderizados no lado do servidor. Consulte a postagem nos cabeçalhos HTTP de sites estáticos do SvelteKit para ver como configurar CSP etc.

src/components

• src/lib/components estes são os componentes que usamos nas páginas.

src/lib

• src/lib/config/website.js por conveniência, definimos propriedades para o site aqui, como título do site, endereços de e-mail de contato e contas de mídia social. Algumas propriedades são alimentadas por variáveis ​​de ambiente. Veja uma postagem sobre como começar a usar o SvelteKit para saber mais sobre variáveis ​​de ambiente no SvelteKit.

• src/lib/styles faz o que você espera! Usamos SCSS para estilizar e fornecer fontes auto-hospedadas nos layouts.

src/utilities

• src/utilities/blog.js este arquivo contém algum código para nos ajudar a transformar a redução nas postagens do blog para Svelte. Além disso, ajudam a extrair campos no frontmatter (esses são os metadados que incluímos no topo dos arquivos index.md da postagem do blog).

src/routes

• src/routes/[slug]/+page.js este é essencialmente um modelo para dados de postagem de blog. Um desses arquivos é gerado na construção para cada postagem do blog. É utilizado para extrair os dados necessários no arquivo Svelte utilizado para gerar o HTML do post.

• src/routes/[slug]/+page.svelte semelhante ao arquivo anterior, um deles é gerado para cada postagem do blog. Desta vez é o código Svelte que o SvelteKit usa para gerar HTML e JavaScript para nossas postagens no blog.

Mencionei a maioria dos outros arquivos na postagem do blog Primeiros passos com o SvelteKit, mas deixe-me saber se perdi alguma coisa que precise de mais explicações.

Sinta-se à vontade para entrar na sala de bate-papo da matriz do Rodney Lab.