1658581560
Como construir um site de portfólio com SvelteKit
Neste tutorial, você aprenderá a criar um site de portfólio com o SvelteKit. Implante o aplicativo Sveltekit no Netlify. Por que a mudança do Sapper para o Sveltekit e como consumir a API REST no Sveltekit
Aprenda a implantar seu primeiro aplicativo SvelteKit com este tutorial passo a passo
A equipe da svelte apresentou o Sveltekit há alguns meses. É uma estrutura mais nova que substitui o Sapper. É a maneira mais rápida de criar aplicativos elegantes com belas experiências de desenvolvimento e roteamento flexível baseado em sistema de arquivos. Este artigo explorará como o Sveltekit funciona criando um site de portfólio de exemplo com todas as atualizações necessárias na estrutura. Você aprenderá todos os conceitos fundamentais sobre como criar um aplicativo da Web com o Sveltekit, por que mudar do Sapper para o Sveltekit e como consumir a API REST no Sveltekit criando um blog de demonstração em seu aplicativo. Além disso, você aprenderá como implantar o aplicativo Sveltekit no Netlify.
O que é Sveltekit
Para quem é novo no Svelte, de acordo com o site svelte :
Svelte is a radical new approach to building user interfaces. Whereas traditional
frameworks like React and Vue do the bulk of their work in the browser, Svelte shifts that
work into a compile step that happens when you build your app.
Instead of using techniques like virtual DOM diffing, Svelte writes code that surgically
updates the DOM when the state of your app changes.
Svelte is a component-based Javascript framework - much like React, Vue, or angular and is
used for building web applications in Javascript.Pelo contrário, o Sveltekit é um framework para construir aplicativos elegantes de todos os tamanhos; ele permite que você crie aplicativos mais significativos com um espaço menor. Ele vem com uma bela experiência de desenvolvimento, roteamento flexível baseado em sistema de arquivos, renderização no lado do servidor (SSR), hidratação no lado do cliente e alguns outros recursos exclusivos.
Razões para mudar do Sapper para o Sveltekit
Richard Harris, o criador do Svelte, menciona alguns dos motivos que influenciaram a mudança do Sapper para o sveltekit, que são:
- Sapper parecia ser um pouco complicado; a distinção entre sveltejs/template e sveltejs/sapper-templated parece um pouco confusa, principalmente para os recém-chegados ao Svelte.
- Desde que o projeto Sapper começou em 2017, a base de código ficou um pouco descuidada ao longo dos anos. E porque a web mudou drasticamente ao longo dos anos, surge a necessidade de repensar uma abordagem mais nova.
- Além disso, a ideia de ter uma única maneira recomendada de criar aplicativos com svelte trará benefícios significativos. Isso simplificaria o processo de integração, reduziria a manutenção e suportaria a carga.
Introdução ao Sveltekit
O Sveltekit remove todos os gargalos da construção de aplicativos web modernos; ele faz todas as coisas chatas para você enquanto você se concentra na parte criativa. Ele é alimentado por Snowpack sob o capô, uma ferramenta de construção de front-end ultrarrápida projetada para a web moderna. Ele usa o plug-in Vite com Svelte para fornecer uma experiência de desenvolvimento extremamente rápida e rica em recursos com Hot Module Replacement (HMR). As alterações no seu código são refletidas instantaneamente no navegador.
Para configurar um projeto com o Sveltekit, você deve ter o NodeJS configurado em seu computador. Execute o seguinte comando abaixo para montar nosso projeto de demonstração do sveltekit e, em seguida, vá para a pasta para instalar todas as dependências necessárias.
npm init svelte@next my_portfolio_website
cd my_portfolio_website
npm install
npm run devO primeiro comando criará um novo projeto no diretório 'my_portfolio_website' perguntando se você gostaria de configurar algumas ferramentas básicas, como o TypeScript. Por favor, escolha 'Não' porque não usaremos Typescript neste projeto. Os comandos subsequentes instalarão suas dependências e iniciarão um servidor em localhost:3000 .
Abaixo está uma demonstração de amostra do que estamos construindo.
Para acompanhar este artigo, você pode conferir o repositório do GitHub .
Páginas e Composição de Componentes
Um dos recursos fantásticos do Sveltekit é seu roteador baseado em sistema de arquivos . Isso significa que a estrutura de sua base de código define a estrutura de seu aplicativo. Temos dois tipos de rotas que são: páginas e endpoints. As páginas geralmente geram HTML, CSS e JavaScript necessários para que a página seja exibida ao usuário, enquanto os Endpoints são executados apenas no servidor (ou quando você cria seu site, se pré- renderizar ).
Como qualquer outra estrutura baseada em componentes, as Páginas são componentes Svelte escritos em .sveltearquivos (ou arquivos com uma extensão listada em config.extension . Quando os usuários visitam o aplicativo pela primeira vez, eles receberão uma versão renderizada do servidor da página em questão por padrão A partir daí, a navegação para outras páginas fica a cargo do cliente.
O nome do arquivo determina as rotas. Por exemplo, src/routes/index.svelte é a raiz do nosso site de demonstração.
Abra a pasta do projeto com o editor de código de sua escolha e navegue até src/routes/index.svelte . Insira o seguinte código abaixo:
<!-- src/routes/index.svelte -->
<svelte:head>
<title>David Adeneye</title>
</svelte:head>
<div class="container">
<div class="info">
<div class="animate-background">
<div class="container info-container">
<div class="info-text">
<h1,
<p class="animate-text-1">School-taught Computer Scientist,</p>
<p class="text-2">Self-taught Software Engineer</p>
</h1>
</div>
<h2 class="subtitle">
On a mission to help SMEs across the globe do businesses
seamlessly and digitally.
</h2>
<div style="color:black" class="scroll-button animate-scroll" tabindex="0">
<a href="/about">Click Here</a><div class="arrow">→</div>
</div>
</div>
</div>
</div>
</div>
<div class="background-div"></div>O <svelte:head>elemento tag na segunda linha permite inserir elementos dentro <head>do seu documento. O resto do código é nossa estrutura de página Html para a página de índice. A próxima seção examinará como o estilo funciona no Sveltekit.
Estilizando nosso aplicativo no SvelteKit
A forma como o estilo funciona no Sveltekit é praticamente o mesmo processo que nossos projetos regulares de HTML&CSS. Você pode fazer referência a arquivos CSS externos ou estilos raiz aplicados a todas as páginas na tag head do seu app.html e aplicar os estilos anexando seletores a tags de documento.
Para estilizar nossos arquivos index.svelte acima, adicione o seguinte estilo abaixo do último código.
<style>
.info {
text-align: center;
position: relative;
}
.info-container {
height: 100%;
display:flex;
flex-direction: column;
justify-content: center;
text-align: left;
align-items: start;
}
.container {
max-width: 1400px;
margin: 190px 0 0 2.5rem;
}
.info h1 {
font-size: 4rem;
margin: 0;
}
.info h1 p {
position: relative;
font: inherit;
margin: 0;
text-align: left;
line-height: 130%;
width: fit-content;
font-weight: 800;
letter-spacing: -0.03em;
}
.info h2 {
max-width: 65ch;
font-weight: 200;
margin-top: 0.50rem;
}
.background-div {
background-color: var(--background);
width: 100%;
height: 56vh;
margin: -155px auto;
}
.info .info-text {
position: relative;
}
.scroll-button {
display: flex;
border: none;
outline: none;
cursor: pointer;
}
.scroll-button .arrow {
margin-left: 0.50rem;
}
</style>Além disso, para que nosso estilo global funcione em outras páginas, abra o app.html e insira o seguinte estilo abaixo da tag de fechamento html.
<style>
body {
background-position: left top;
font-family: "Inter", sans-serif;
margin: 0;
background-repeat: no-repeat;
}
* {
box-sizing: border-box;
}
a {
text-decoration: none;
color: black;
}
:root{
--background: #ecebe8;
}
nav {
position: sticky;
top: 0;
left: 0;
right: 0;
margin: 0 80px 0 80px;
padding-top: 2rem;
padding-bottom: 2rem;
}
nav .nav-container {
display: flex;
justify-content: space-between;
align-items: center;
}
.nav-links {
display: flex;
justify-content: flex-end;
align-items: center;
margin: -1em 0;
flex: 1 0 auto;
}
.nav-links .link {
position: relative;
margin: 1em;
font-size: 0.85rem;
letter-spacing: 1px;
color: black;
}
.nav-logo {
position: relative;
line-height: 1;
font-size: 1.1rem;
color: black;
}
</style>Além disso, observe que cada estilo de componente tem escopo interno ao importar componentes no Svelte. Isso significa que o estilo aplicado a um componente importado afetará apenas o próprio componente.
Layout e navegação no Sveltekit
Conforme explicado anteriormente, as páginas são tratadas como componentes totalmente independentes. Assim, na navegação, o componente existente será destruído e um novo assumirá o controle. No entanto, elementos ou componentes precisam estar visíveis em todas as páginas em muitos aplicativos, como um menu de navegação ou rodapé. Então, em vez de repeti-los em todas as páginas, podemos usar um componente de layout.
Para criar um componente de layout que se aplique a todas as páginas do nosso site, crie um arquivo chamado src/routes/__layout.svelte e cole o seguinte código abaixo.
<!-- src/routes/__layout.svelte -->
<nav>
<div class="nav-container">
<a href="/" class="nav-logo" title="Back to Homepage">David Adeneye</a>
<div class="nav-links">
<a href="/about" class="link">About</a>
<a href="/blog" class="link">Blog</a>
<a href="/projects" class="link">Projects</a>
<a href="/contact" class="link">Contact</a>
</div>
</div>
</nav>
<div class="container">
<!-- Pages will be injected below -->
<slot></slot>
</div>
<style>
.container {
max-width: 1400px;
margin: 50px auto;
}
</style>Este código acima é a nossa barra de menu de navegação que se aplica a todas as páginas do nosso site de portfólio. O componente de layout padrão que o Sveltekit usa, se você não incluir o seu, se parece com isso:
<slot></slot>Além disso, podemos usar qualquer marcação, estilo e comportamento de nossa escolha; o único requisito é que o componente inclua a <slot>para o conteúdo da página como fizemos acima no arquivo __layout.svelte .
Roteamento no Sveltekit
Como qualquer outra solução SSR popular, o Sveltekit possui um ótimo sistema de roteamento baseado em arquivo. As páginas em seu aplicativo são armazenadas por padrão dentro da pasta src/routes ; isso significa que a estrutura de seu aplicativo é definida pela estrutura de sua base de código, especificamente o conteúdo de src/routes .
Nosso site de portfólio contém cerca de seis páginas:
- Home -
index.svelte(já criei isso acima) - Sobre -
about.svelte(nós criaríamos isso nesta seção) - Blog -
blog.svelte(nós criaríamos isso na próxima seção) - Projetos -
projects.svelte(copie o arquivo de código no repositório do github) - Contact -
contact.svelte(copie o arquivo de código no repositório do github) - [id].svelte - Rotas dinâmicas (copie o arquivo de código no repositório do github)
Como criamos nossa estrutura de cabeçalho de navegação para essas páginas acima no src/routes/__layout.svelte . Abra o about.svelte e insira o seguinte código abaixo:
<!-- src/routes/about.svelte -->
<svelte:head>
<title>About</title>
</svelte:head>
<div class="main_container">
<section>
<div class="inner-container">
<h2 class="about-title">I'm David Adeneye👋</h2>
<div class="about-subtitle">
<p>
Software Engineer and a Technical Writer with a solid
background in Computer Science, I'm passionate about making
the web accessible for everyone. I design and develop visually compell ing applications with user-friendly interaction that drive business g owth and improve user experience. When I'm not solving problems,
I love to create technical content for engineers and tech
startups across the globe.
</p>
<p>
Creating magic daily on the internet. You can send me
an email at <span class="info-text">adeneyeabiodun@gmail.com</span>
</p>
</div>
</div>
</section>
</div>
<style>
.main_container {
margin: 0 80px 0 65px;
}
.about-title {
font-size: 4.2rem;
font-weight: bold;
margin-top: 11rem;
}
.about-subtitle {
margin-top: -2rem;
}
.about-subtitle >p {
width: 60%;
font-weight: normal;
font-size: 1rem;
line-height: 2rem;
}
.info-text {
font-style: italic;
font-weight: bold;
}
</style>O componente de navegação estará sempre visível e clicar entre as páginas sempre substituirá o conteúdo da página. Agora dirija-se para ver nosso site de portfólio em ação. Sua página sobre deve ficar assim abaixo.
Reprodução de sessão de código aberto
O OpenReplay é um conjunto de reprodução de sessão de código aberto que permite ver o que os usuários fazem em seu aplicativo da Web, ajudando você a solucionar problemas mais rapidamente. O OpenReplay é auto-hospedado para controle total sobre seus dados.
Comece a aproveitar sua experiência de depuração - comece a usar o OpenReplay gratuitamente .
Consumindo API REST no Sveltekit
Para aprender como buscar dados de uma API REST e o conceito de carregamento no Sveltekit, construiríamos uma postagem de demonstração no blog em nosso site. Estaremos interagindo com uma API REST falsa gratuita chamada JSONPlaceholder , é uma API REST online gratuita para testes e prototipagem.
Para começar, abra src/routes/blog.svelte e cole o código a seguir ou leia junto com o código-fonte que o acompanha.
<!-- src/routes/blog.svelte -->
<svelte:head>
<title>Blog</title>
</svelte:head>
<script context="module">
export const load = async ({ fetch }) => {
const res = await fetch("https://jsonplaceholder.typicode.com/posts");
const blogposts = await res.json();
return {
props: {
blogposts,
}
}
}
</script>
<script>
export let blogposts;
</script>
<div class="container">
<h1>My Articles</h1>
<div class="blogposts">
{#each blogposts as post}
<div class="post">
<h2>{post.title.substring(0, 20)}</h2>
<p>{post.body.substring(0, 80)}</p>
<p class="readmore">
<a style=" color: rgb(10, 10, 139);" href={`/blog/${post.id}`}>
Read More
</a>
</p>
</div>
{/each}
</div>
</div>Vamos analisar o código acima. Tome nota da <script context="module">linha 6 - é necessário porque loadé executado antes do componente ser renderizado. O código de instância por componente deve estar em uma segunda <script>tag. Em seguida, usamos a loadfunção para buscar nossas postagens de blog de demonstração da api falsa jsonplaceholder para serem exibidas em nosso site.
A loadfunção no sveltekit é semelhante a getStaticPropsou getServerSidePropsem Next.js, exceto que é executada no cliente e no servidor.
Além disso, não se esqueça de copiar o código CSS que o acompanha dentro do bloco de código se você estiver construindo junto com este tutorial para o estilo da sua página.
Seu blog.svelte deve ficar assim abaixo:
Usando rotas dinâmicas no Sveltekit
Construindo um blog como este, precisaríamos de rotas geradas dinamicamente. O Sveltekit nos permite implementar isso facilmente por meio de rotas dinâmicas.
Para implementar isso, crie uma nova pasta chamada blog . Os parâmetros dinâmicos no Sveltekit são codificados usando [bracket]. Por exemplo, crie um arquivo chamado [id].svelte dentro da pasta do seu blog. Abra o arquivo e cole o código a seguir ou acompanhe o código-fonte.
<script context="module">
export const load = async ({ page, fetch }) => {
const id = page.params.id;
const res = await fetch(`https://jsonplaceholder.typicode.com/posts/${id}`);
const post = await res.json();
return {
props: {
post,
}
}
}
</script>A partir do código, acessamos o parâmetro dentro da função load e o armazenamos com a variável id; o parâmetro foi então usado para buscar a postagem de blog exata desse id. Suponha que você volte ao blog.svelte você verá como acessamos as páginas geradas dinamicamente com um hrefna linha 33 abaixo:
<p class="readmore">
<a style="color: rgb(10, 10, 139);" href={`/blog/${post.id}`}>
Read More
</a>
</p>Você pode ver como acessamos a postagem exata do blog com a extensão post.id. Então, quando você clicar em Leia mais , ele carregará uma nova página para ler todo o blog.
Implantação do aplicativo Sveltekit
No Sveltekit, antes de implantar seu aplicativo, você precisará adaptá-lo ao seu destino de desenvolvimento. Ele ajuda a simplificar seu processo de implantação fornecendo vários plug-ins conhecidos como adaptadores. Os adaptadores são pequenos plug-ins que usam o aplicativo criado como entrada e geram saída para implantação.
O Sveltekit fornece alguns adaptadores com suporte oficial:
Adaptador Estático : Este é um adaptador para o aplicativo Sveltekit que pré-renderiza seu site como uma coleção de arquivos estáticos compatíveis com serviços de hospedagem como páginas do Github e similares.
Adapter Vercel : Um Adapter para aplicativos Svelte que criam um aplicativo Vercel, usando uma função para renderização dinâmica do servidor. Ele é usado para implantar seu aplicativo na plataforma de hospedagem Vercel.
Adapter Netlify : Adaptador para aplicativos Svelte que criam um aplicativo Netlify, usando funções de serviços para gerar páginas dinamicamente. Ele é usado para implantar seu aplicativo na plataforma Netlify.
Vamos dar uma olhada em como implantar nosso aplicativo de demonstração no Netlify.
Implantando o Sveltekit no Netlify
Para implantar o Sveltekit no Netlify, você precisa usar o adaptador netlify-sveltekit .
Vamos instalar o adaptador em nosso projeto com o seguinte comando abaixo:
npm install -D @sveltejs/adapter-netlify@nextApós a conclusão da instalação, inclua o adaptador no arquivo svelte.config.js de seu projeto. Insira o seguinte código abaixo no arquivo.
import adapter from '@sveltejs/adapter-netlify';
export default {
kit: {
adapter: adapter(),
target: '#svelte'
}
};Em seguida, crie um arquivo netlify.toml no diretório base do seu projeto e especifique um comando de compilação e um diretório de publicação. Insira o seguinte código abaixo no arquivo.
[build]
command = "npm run build"
publish = "build"Depois de toda essa configuração, implante seu projeto no Netlify com o Git ou a CLI do Netlify.
Este é o link ( jolly-franklin-11e50c.netlify.app ) para o site final implantado no Netlify
Conclusão
Espero que você tenha gostado de trabalhar com este tutorial. Exploramos o conceito fundamental do Sveltekit criando um site de portfólio de exemplo e, o mais importante, como consumir a API REST com nosso blog de demonstração dentro do aplicativo e também como implantar o aplicativo sveltekit no Netlify. Você pode tentar colocar em prática o que aprendeu construindo outras páginas ou atualizar esta demonstração ao seu gosto, se estiver procurando criar um site de portfólio para si mesmo.
O repositório de suporte para este artigo está disponível no Github .
Fonte do artigo original em https://blog.openreplay.com
#sveltekit #svelte #webdev #javascript
What is GEEK
Buddha Community
1658581560
Como construir um site de portfólio com SvelteKit
Neste tutorial, você aprenderá a criar um site de portfólio com o SvelteKit. Implante o aplicativo Sveltekit no Netlify. Por que a mudança do Sapper para o Sveltekit e como consumir a API REST no Sveltekit
Aprenda a implantar seu primeiro aplicativo SvelteKit com este tutorial passo a passo
A equipe da svelte apresentou o Sveltekit há alguns meses. É uma estrutura mais nova que substitui o Sapper. É a maneira mais rápida de criar aplicativos elegantes com belas experiências de desenvolvimento e roteamento flexível baseado em sistema de arquivos. Este artigo explorará como o Sveltekit funciona criando um site de portfólio de exemplo com todas as atualizações necessárias na estrutura. Você aprenderá todos os conceitos fundamentais sobre como criar um aplicativo da Web com o Sveltekit, por que mudar do Sapper para o Sveltekit e como consumir a API REST no Sveltekit criando um blog de demonstração em seu aplicativo. Além disso, você aprenderá como implantar o aplicativo Sveltekit no Netlify.
O que é Sveltekit
Para quem é novo no Svelte, de acordo com o site svelte :
Svelte is a radical new approach to building user interfaces. Whereas traditional
frameworks like React and Vue do the bulk of their work in the browser, Svelte shifts that
work into a compile step that happens when you build your app.
Instead of using techniques like virtual DOM diffing, Svelte writes code that surgically
updates the DOM when the state of your app changes.
Svelte is a component-based Javascript framework - much like React, Vue, or angular and is
used for building web applications in Javascript.Pelo contrário, o Sveltekit é um framework para construir aplicativos elegantes de todos os tamanhos; ele permite que você crie aplicativos mais significativos com um espaço menor. Ele vem com uma bela experiência de desenvolvimento, roteamento flexível baseado em sistema de arquivos, renderização no lado do servidor (SSR), hidratação no lado do cliente e alguns outros recursos exclusivos.
Razões para mudar do Sapper para o Sveltekit
Richard Harris, o criador do Svelte, menciona alguns dos motivos que influenciaram a mudança do Sapper para o sveltekit, que são:
- Sapper parecia ser um pouco complicado; a distinção entre sveltejs/template e sveltejs/sapper-templated parece um pouco confusa, principalmente para os recém-chegados ao Svelte.
- Desde que o projeto Sapper começou em 2017, a base de código ficou um pouco descuidada ao longo dos anos. E porque a web mudou drasticamente ao longo dos anos, surge a necessidade de repensar uma abordagem mais nova.
- Além disso, a ideia de ter uma única maneira recomendada de criar aplicativos com svelte trará benefícios significativos. Isso simplificaria o processo de integração, reduziria a manutenção e suportaria a carga.
Introdução ao Sveltekit
O Sveltekit remove todos os gargalos da construção de aplicativos web modernos; ele faz todas as coisas chatas para você enquanto você se concentra na parte criativa. Ele é alimentado por Snowpack sob o capô, uma ferramenta de construção de front-end ultrarrápida projetada para a web moderna. Ele usa o plug-in Vite com Svelte para fornecer uma experiência de desenvolvimento extremamente rápida e rica em recursos com Hot Module Replacement (HMR). As alterações no seu código são refletidas instantaneamente no navegador.
Para configurar um projeto com o Sveltekit, você deve ter o NodeJS configurado em seu computador. Execute o seguinte comando abaixo para montar nosso projeto de demonstração do sveltekit e, em seguida, vá para a pasta para instalar todas as dependências necessárias.
npm init svelte@next my_portfolio_website
cd my_portfolio_website
npm install
npm run devO primeiro comando criará um novo projeto no diretório 'my_portfolio_website' perguntando se você gostaria de configurar algumas ferramentas básicas, como o TypeScript. Por favor, escolha 'Não' porque não usaremos Typescript neste projeto. Os comandos subsequentes instalarão suas dependências e iniciarão um servidor em localhost:3000 .
Abaixo está uma demonstração de amostra do que estamos construindo.
Para acompanhar este artigo, você pode conferir o repositório do GitHub .
Páginas e Composição de Componentes
Um dos recursos fantásticos do Sveltekit é seu roteador baseado em sistema de arquivos . Isso significa que a estrutura de sua base de código define a estrutura de seu aplicativo. Temos dois tipos de rotas que são: páginas e endpoints. As páginas geralmente geram HTML, CSS e JavaScript necessários para que a página seja exibida ao usuário, enquanto os Endpoints são executados apenas no servidor (ou quando você cria seu site, se pré- renderizar ).
Como qualquer outra estrutura baseada em componentes, as Páginas são componentes Svelte escritos em .sveltearquivos (ou arquivos com uma extensão listada em config.extension . Quando os usuários visitam o aplicativo pela primeira vez, eles receberão uma versão renderizada do servidor da página em questão por padrão A partir daí, a navegação para outras páginas fica a cargo do cliente.
O nome do arquivo determina as rotas. Por exemplo, src/routes/index.svelte é a raiz do nosso site de demonstração.
Abra a pasta do projeto com o editor de código de sua escolha e navegue até src/routes/index.svelte . Insira o seguinte código abaixo:
<!-- src/routes/index.svelte -->
<svelte:head>
<title>David Adeneye</title>
</svelte:head>
<div class="container">
<div class="info">
<div class="animate-background">
<div class="container info-container">
<div class="info-text">
<h1,
<p class="animate-text-1">School-taught Computer Scientist,</p>
<p class="text-2">Self-taught Software Engineer</p>
</h1>
</div>
<h2 class="subtitle">
On a mission to help SMEs across the globe do businesses
seamlessly and digitally.
</h2>
<div style="color:black" class="scroll-button animate-scroll" tabindex="0">
<a href="/about">Click Here</a><div class="arrow">→</div>
</div>
</div>
</div>
</div>
</div>
<div class="background-div"></div>O <svelte:head>elemento tag na segunda linha permite inserir elementos dentro <head>do seu documento. O resto do código é nossa estrutura de página Html para a página de índice. A próxima seção examinará como o estilo funciona no Sveltekit.
Estilizando nosso aplicativo no SvelteKit
A forma como o estilo funciona no Sveltekit é praticamente o mesmo processo que nossos projetos regulares de HTML&CSS. Você pode fazer referência a arquivos CSS externos ou estilos raiz aplicados a todas as páginas na tag head do seu app.html e aplicar os estilos anexando seletores a tags de documento.
Para estilizar nossos arquivos index.svelte acima, adicione o seguinte estilo abaixo do último código.
<style>
.info {
text-align: center;
position: relative;
}
.info-container {
height: 100%;
display:flex;
flex-direction: column;
justify-content: center;
text-align: left;
align-items: start;
}
.container {
max-width: 1400px;
margin: 190px 0 0 2.5rem;
}
.info h1 {
font-size: 4rem;
margin: 0;
}
.info h1 p {
position: relative;
font: inherit;
margin: 0;
text-align: left;
line-height: 130%;
width: fit-content;
font-weight: 800;
letter-spacing: -0.03em;
}
.info h2 {
max-width: 65ch;
font-weight: 200;
margin-top: 0.50rem;
}
.background-div {
background-color: var(--background);
width: 100%;
height: 56vh;
margin: -155px auto;
}
.info .info-text {
position: relative;
}
.scroll-button {
display: flex;
border: none;
outline: none;
cursor: pointer;
}
.scroll-button .arrow {
margin-left: 0.50rem;
}
</style>Além disso, para que nosso estilo global funcione em outras páginas, abra o app.html e insira o seguinte estilo abaixo da tag de fechamento html.
<style>
body {
background-position: left top;
font-family: "Inter", sans-serif;
margin: 0;
background-repeat: no-repeat;
}
* {
box-sizing: border-box;
}
a {
text-decoration: none;
color: black;
}
:root{
--background: #ecebe8;
}
nav {
position: sticky;
top: 0;
left: 0;
right: 0;
margin: 0 80px 0 80px;
padding-top: 2rem;
padding-bottom: 2rem;
}
nav .nav-container {
display: flex;
justify-content: space-between;
align-items: center;
}
.nav-links {
display: flex;
justify-content: flex-end;
align-items: center;
margin: -1em 0;
flex: 1 0 auto;
}
.nav-links .link {
position: relative;
margin: 1em;
font-size: 0.85rem;
letter-spacing: 1px;
color: black;
}
.nav-logo {
position: relative;
line-height: 1;
font-size: 1.1rem;
color: black;
}
</style>Além disso, observe que cada estilo de componente tem escopo interno ao importar componentes no Svelte. Isso significa que o estilo aplicado a um componente importado afetará apenas o próprio componente.
Layout e navegação no Sveltekit
Conforme explicado anteriormente, as páginas são tratadas como componentes totalmente independentes. Assim, na navegação, o componente existente será destruído e um novo assumirá o controle. No entanto, elementos ou componentes precisam estar visíveis em todas as páginas em muitos aplicativos, como um menu de navegação ou rodapé. Então, em vez de repeti-los em todas as páginas, podemos usar um componente de layout.
Para criar um componente de layout que se aplique a todas as páginas do nosso site, crie um arquivo chamado src/routes/__layout.svelte e cole o seguinte código abaixo.
<!-- src/routes/__layout.svelte -->
<nav>
<div class="nav-container">
<a href="/" class="nav-logo" title="Back to Homepage">David Adeneye</a>
<div class="nav-links">
<a href="/about" class="link">About</a>
<a href="/blog" class="link">Blog</a>
<a href="/projects" class="link">Projects</a>
<a href="/contact" class="link">Contact</a>
</div>
</div>
</nav>
<div class="container">
<!-- Pages will be injected below -->
<slot></slot>
</div>
<style>
.container {
max-width: 1400px;
margin: 50px auto;
}
</style>Este código acima é a nossa barra de menu de navegação que se aplica a todas as páginas do nosso site de portfólio. O componente de layout padrão que o Sveltekit usa, se você não incluir o seu, se parece com isso:
<slot></slot>Além disso, podemos usar qualquer marcação, estilo e comportamento de nossa escolha; o único requisito é que o componente inclua a <slot>para o conteúdo da página como fizemos acima no arquivo __layout.svelte .
Roteamento no Sveltekit
Como qualquer outra solução SSR popular, o Sveltekit possui um ótimo sistema de roteamento baseado em arquivo. As páginas em seu aplicativo são armazenadas por padrão dentro da pasta src/routes ; isso significa que a estrutura de seu aplicativo é definida pela estrutura de sua base de código, especificamente o conteúdo de src/routes .
Nosso site de portfólio contém cerca de seis páginas:
- Home -
index.svelte(já criei isso acima) - Sobre -
about.svelte(nós criaríamos isso nesta seção) - Blog -
blog.svelte(nós criaríamos isso na próxima seção) - Projetos -
projects.svelte(copie o arquivo de código no repositório do github) - Contact -
contact.svelte(copie o arquivo de código no repositório do github) - [id].svelte - Rotas dinâmicas (copie o arquivo de código no repositório do github)
Como criamos nossa estrutura de cabeçalho de navegação para essas páginas acima no src/routes/__layout.svelte . Abra o about.svelte e insira o seguinte código abaixo:
<!-- src/routes/about.svelte -->
<svelte:head>
<title>About</title>
</svelte:head>
<div class="main_container">
<section>
<div class="inner-container">
<h2 class="about-title">I'm David Adeneye👋</h2>
<div class="about-subtitle">
<p>
Software Engineer and a Technical Writer with a solid
background in Computer Science, I'm passionate about making
the web accessible for everyone. I design and develop visually compell ing applications with user-friendly interaction that drive business g owth and improve user experience. When I'm not solving problems,
I love to create technical content for engineers and tech
startups across the globe.
</p>
<p>
Creating magic daily on the internet. You can send me
an email at <span class="info-text">adeneyeabiodun@gmail.com</span>
</p>
</div>
</div>
</section>
</div>
<style>
.main_container {
margin: 0 80px 0 65px;
}
.about-title {
font-size: 4.2rem;
font-weight: bold;
margin-top: 11rem;
}
.about-subtitle {
margin-top: -2rem;
}
.about-subtitle >p {
width: 60%;
font-weight: normal;
font-size: 1rem;
line-height: 2rem;
}
.info-text {
font-style: italic;
font-weight: bold;
}
</style>O componente de navegação estará sempre visível e clicar entre as páginas sempre substituirá o conteúdo da página. Agora dirija-se para ver nosso site de portfólio em ação. Sua página sobre deve ficar assim abaixo.
Reprodução de sessão de código aberto
O OpenReplay é um conjunto de reprodução de sessão de código aberto que permite ver o que os usuários fazem em seu aplicativo da Web, ajudando você a solucionar problemas mais rapidamente. O OpenReplay é auto-hospedado para controle total sobre seus dados.
Comece a aproveitar sua experiência de depuração - comece a usar o OpenReplay gratuitamente .
Consumindo API REST no Sveltekit
Para aprender como buscar dados de uma API REST e o conceito de carregamento no Sveltekit, construiríamos uma postagem de demonstração no blog em nosso site. Estaremos interagindo com uma API REST falsa gratuita chamada JSONPlaceholder , é uma API REST online gratuita para testes e prototipagem.
Para começar, abra src/routes/blog.svelte e cole o código a seguir ou leia junto com o código-fonte que o acompanha.
<!-- src/routes/blog.svelte -->
<svelte:head>
<title>Blog</title>
</svelte:head>
<script context="module">
export const load = async ({ fetch }) => {
const res = await fetch("https://jsonplaceholder.typicode.com/posts");
const blogposts = await res.json();
return {
props: {
blogposts,
}
}
}
</script>
<script>
export let blogposts;
</script>
<div class="container">
<h1>My Articles</h1>
<div class="blogposts">
{#each blogposts as post}
<div class="post">
<h2>{post.title.substring(0, 20)}</h2>
<p>{post.body.substring(0, 80)}</p>
<p class="readmore">
<a style=" color: rgb(10, 10, 139);" href={`/blog/${post.id}`}>
Read More
</a>
</p>
</div>
{/each}
</div>
</div>Vamos analisar o código acima. Tome nota da <script context="module">linha 6 - é necessário porque loadé executado antes do componente ser renderizado. O código de instância por componente deve estar em uma segunda <script>tag. Em seguida, usamos a loadfunção para buscar nossas postagens de blog de demonstração da api falsa jsonplaceholder para serem exibidas em nosso site.
A loadfunção no sveltekit é semelhante a getStaticPropsou getServerSidePropsem Next.js, exceto que é executada no cliente e no servidor.
Além disso, não se esqueça de copiar o código CSS que o acompanha dentro do bloco de código se você estiver construindo junto com este tutorial para o estilo da sua página.
Seu blog.svelte deve ficar assim abaixo:
Usando rotas dinâmicas no Sveltekit
Construindo um blog como este, precisaríamos de rotas geradas dinamicamente. O Sveltekit nos permite implementar isso facilmente por meio de rotas dinâmicas.
Para implementar isso, crie uma nova pasta chamada blog . Os parâmetros dinâmicos no Sveltekit são codificados usando [bracket]. Por exemplo, crie um arquivo chamado [id].svelte dentro da pasta do seu blog. Abra o arquivo e cole o código a seguir ou acompanhe o código-fonte.
<script context="module">
export const load = async ({ page, fetch }) => {
const id = page.params.id;
const res = await fetch(`https://jsonplaceholder.typicode.com/posts/${id}`);
const post = await res.json();
return {
props: {
post,
}
}
}
</script>A partir do código, acessamos o parâmetro dentro da função load e o armazenamos com a variável id; o parâmetro foi então usado para buscar a postagem de blog exata desse id. Suponha que você volte ao blog.svelte você verá como acessamos as páginas geradas dinamicamente com um hrefna linha 33 abaixo:
<p class="readmore">
<a style="color: rgb(10, 10, 139);" href={`/blog/${post.id}`}>
Read More
</a>
</p>Você pode ver como acessamos a postagem exata do blog com a extensão post.id. Então, quando você clicar em Leia mais , ele carregará uma nova página para ler todo o blog.
Implantação do aplicativo Sveltekit
No Sveltekit, antes de implantar seu aplicativo, você precisará adaptá-lo ao seu destino de desenvolvimento. Ele ajuda a simplificar seu processo de implantação fornecendo vários plug-ins conhecidos como adaptadores. Os adaptadores são pequenos plug-ins que usam o aplicativo criado como entrada e geram saída para implantação.
O Sveltekit fornece alguns adaptadores com suporte oficial:
Adaptador Estático : Este é um adaptador para o aplicativo Sveltekit que pré-renderiza seu site como uma coleção de arquivos estáticos compatíveis com serviços de hospedagem como páginas do Github e similares.
Adapter Vercel : Um Adapter para aplicativos Svelte que criam um aplicativo Vercel, usando uma função para renderização dinâmica do servidor. Ele é usado para implantar seu aplicativo na plataforma de hospedagem Vercel.
Adapter Netlify : Adaptador para aplicativos Svelte que criam um aplicativo Netlify, usando funções de serviços para gerar páginas dinamicamente. Ele é usado para implantar seu aplicativo na plataforma Netlify.
Vamos dar uma olhada em como implantar nosso aplicativo de demonstração no Netlify.
Implantando o Sveltekit no Netlify
Para implantar o Sveltekit no Netlify, você precisa usar o adaptador netlify-sveltekit .
Vamos instalar o adaptador em nosso projeto com o seguinte comando abaixo:
npm install -D @sveltejs/adapter-netlify@nextApós a conclusão da instalação, inclua o adaptador no arquivo svelte.config.js de seu projeto. Insira o seguinte código abaixo no arquivo.
import adapter from '@sveltejs/adapter-netlify';
export default {
kit: {
adapter: adapter(),
target: '#svelte'
}
};Em seguida, crie um arquivo netlify.toml no diretório base do seu projeto e especifique um comando de compilação e um diretório de publicação. Insira o seguinte código abaixo no arquivo.
[build]
command = "npm run build"
publish = "build"Depois de toda essa configuração, implante seu projeto no Netlify com o Git ou a CLI do Netlify.
Este é o link ( jolly-franklin-11e50c.netlify.app ) para o site final implantado no Netlify
Conclusão
Espero que você tenha gostado de trabalhar com este tutorial. Exploramos o conceito fundamental do Sveltekit criando um site de portfólio de exemplo e, o mais importante, como consumir a API REST com nosso blog de demonstração dentro do aplicativo e também como implantar o aplicativo sveltekit no Netlify. Você pode tentar colocar em prática o que aprendeu construindo outras páginas ou atualizar esta demonstração ao seu gosto, se estiver procurando criar um site de portfólio para si mesmo.
O repositório de suporte para este artigo está disponível no Github .
Fonte do artigo original em https://blog.openreplay.com
#sveltekit #svelte #webdev #javascript
1660716028
Como construir um encurtador de URL com SvelteKit
Este tutorial mostra como construir um encurtador de URL com SvelteKit. Use um endpoint SvelteKit para redirecionar as solicitações feitas a ele. Isso redirecionará o URL de origem para o URL de destino ou destino.
Encurtadores de URL, use-os quando quiser compartilhar um link fácil de lembrar. Você pode usar um serviço como Bitly ou TinyURL ou qualquer um dos outros já existentes, ou você pode torná-lo algo que gostaria de usar e ter um pouco mais de conexão com ele, criando o seu próprio!
No passado, fiz encurtadores de URL pessoais com um _redirectsarquivo Netlify e com um arquivo Vercel vercel.json. Neste post vou fazer um encurtador de URL com o SvelteKit.
Usarei um endpoint SvelteKit para redirecionar as solicitações feitas a ele. Isso redirecionará a sourceURL para o destino ou destinationURL.
Um exemplo pode ser o URL fornecido a este projeto, digamos https://svort.li. qualquer coisa após o TLD( .li) será o redirecionado para a sourceURL dessa fonte .https://svort.li/medestinationhttps://scottspence.com
Nos dois projetos anteriores que fiz não havia nada de framework front-end, pois eram apenas arquivos de configuração para fazer os redirecionamentos no servidor.
Isso ainda é praticamente o mesmo, pois receberá uma solicitação de entrada no servidor (no ponto de extremidade SvelteKit) e a redirecionará.
Configure o projeto
Vou montar um esqueleto SvelteKit usando o seguinte comando:
npm init svelte@next svort-urlsVou seguir as instruções, serei sim para todas as instruções lá. Que são.
? Which Svelte app template? › - Use arrow-keys. Return to submit.
SvelteKit demo app
❯ Skeleton project
✔ Which Svelte app template? › Skeleton project
✔ Use TypeScript? … Yes
✔ Add ESLint for code linting? … Yes
✔ Add Prettier for code formatting? … Yes
✔ Add Playwright for browser testing? … YesCriar o ponto de extremidade
Na routespasta vou criar um novo [slug].tsarquivo.
touch src/routes/'[slug]'.tsO [slug].tsarquivo é um endpoint, um endpoint HTTP no SvelteKit você pode usar métodos HTTP em endpoints. Então, se eu quiser GETalguns dados em uma rota, posso acessá-los por meio desses arquivos especiais do SvelteKit.
Nesse caso, estou usando um GETmétodo para que o sourcearquivo possa ser redirecionado para o arquivo destination.
export const get = async () => {
return {
headers: { Location: '/' },
status: 301,
}
}Isto irá aceitar qualquer coisa após o caminho raiz ( /) e redirecioná-lo no momento de volta para a página inicial /.
Então, indo para localhost:3000/meredirecionará para localhost:3000/.
É mais ou menos isso!
Para a lista de links, estarei usando um arquivo de configuração local, mas você pode usar algo como um CMS ou um banco de dados para controlar isso.
Adicionar URLs de origem e destino
Vou adicionar os URLs de origem e destino a um arquivo de configuração. No SvelteKit o local para isso seria em uma libpasta.
# create the lib folder
mkdir src/lib
# create a file for the urls
touch src/lib/urls-list.tsNo urls-list.tsarquivo eu vou adicionar as URLs de origem e destino que eu quero, vou adicionar um exemplo aqui.
export const urls = [
{
source: '/me',
destination: 'https://scottspence.com',
},
{
source: '/twitter',
destination: 'https://twitter.com/spences10',
},
{
source: '/git',
destination: 'https://github.com/spences10',
},
]Redirecionar para o URL de destino
Com minha lista de links curtos, posso usá-los no [slug].tsendpoint. então indo localhost:3000/meagora vou querer redirecionar para https://scottspence.com.
Vou precisar de uma maneira de saber qual é a URL de origem no endpoint para que eu possa desestruturar isso fora do contexto passado para o endpoint.
Vamos dar uma olhada rápida no que obtemos no objeto context(ou ).ctx
export const get = async ctx => {
console.log(ctx)
return {
headers: { Location: '/' },
status: 301,
}
}Então, agora, se eu navegar localhost:3000/something, verei a seguinte saída no terminal:
{
request: Request {
size: 0,
follow: 20,
compress: true,
counter: 0,
agent: undefined,
highWaterMark: 16384,
insecureHTTPParser: false,
[Symbol(Body internals)]: {
body: null,
stream: null,
boundary: null,
disturbed: false,
error: null
},
[Symbol(Request internals)]: {
method: 'GET',
redirect: 'follow',
headers: [Object],
parsedURL: [URL],
signal: null,
referrer: undefined,
referrerPolicy: ''
}
},
url: URL {
href: 'http://localhost:3000/something',
origin: 'http://localhost:3000',
protocol: 'http:',
username: '',
password: '',
host: 'localhost:3000',
hostname: 'localhost',
port: '3000',
pathname: '/something',
search: '',
searchParams: URLSearchParams {},
hash: ''
},
params: { slug: 'something' },
locals: {},
platform: undefined
}Então, o que me interessa aqui é o urlobjeto, mais especificamente o url.pathname. Isso vai me ajudar a identificar para onde quero que a solicitação seja redirecionada.
url: URL {
href: 'http://localhost:3000/something',
origin: 'http://localhost:3000',
protocol: 'http:',
username: '',
password: '',
host: 'localhost:3000',
hostname: 'localhost',
port: '3000',
pathname: '/something',
search: '',
searchParams: URLSearchParams {},
hash: ''
}Eu também poderia usar params.slugobject para isso também.
params: { slug: 'something' },Neste exemplo eu estarei usando o urlobjeto. Então vou desestruturar o urlobjeto fora do objeto de contexto e importar o urls-listarquivo.
import { urls } from '$lib/urls-list'
export const get = async ({ url }) => {
return {
headers: { Location: '/' },
status: 301,
}
}Então eu posso obter um redirecionamento para fora da urlsmatriz. Vou declarar isso como uma [redirect]variável.
Então, vou ver o que recebo se eu desconectar o conteúdo de [redirect]now, vou querer filtrar qualquer coisa que corresponda ao arquivo url.pathnamefrom , então, por enquanto, exibirei os resultados:urls-listconsole.log
import { urls } from '$lib/urls-list'
export const get = async ({ url }) => {
const [redirect] = urls.filter(item => {
console.log(item)
})
return {
headers: { Location: '/' },
status: 301,
}
}Agora, se eu navegar até localhost:3000/something, verei o seguinte no terminal:
{ source: '/me', destination: 'https://scottspence.com' }
{ source: '/twitter', destination: 'https://twitter.com/spences10' }
{ source: '/git', destination: 'https://github.com/spences10' }Doce! Então agora eu posso usar alguma lógica para determinar se url.pathnamecorresponde ao que está na urlsmatriz.
Então, com o itemque estou usando no filtro, posso comparar com o url.pathname. Se houver uma correspondência válida, posso obter o destinationda urlsmatriz.
import { urls } from '$lib/urls-list'
export const get = async ({ url }) => {
const [redirect] = urls.filter(item => item.source === url.pathname)
if (redirect) {
return {
headers: { Location: redirect.destination },
status: 301,
}
} else if (!redirect && url.pathname.length > 1) {
return {
headers: { Location: '/' },
status: 301,
}
} else return {}
}Eu posso usar um ifpara verificar se há uma correspondência válida. Se houver uma correspondência válida, defina o headers.Locationpara o destinationda urlsmatriz.
Se não corresponder, redirecionarei para a página inicial ( /) e terei uma captura final para retornar um objeto vazio.
Conclusão
É isso! Eu criei um redirecionamento simples no SvelteKit que pegará um URL de entrada e redirecionará para um URL de destino.
Agora posso usar a página inicial como uma página de destino para meus URLs curtos para que qualquer pessoa que acesse o site possa conferir qualquer um dos links disponíveis.
Fonte do artigo original em https://scottspence.com
#sveltekit #svelte #javascript
1618254581
Activate a Device - Netflix.com/activate, roku.com/link, amazon.com/mytv
geeksquad.com/chat-with-an-agent
walmart.capitalone.com/activate
#netflix.com/activate #roku.com/link #amazon.com/mytv #primevideo.com/mytv #samsung.com/printersetup
1611609121
Quick Pay Portal | www.quickpayportal.com | www.quickpayportal.com
Pay Medical Bills your bills @https://sites.google.com/view/www-quickpayportal-com/
It is really very easy to pay your bills at [priviabillpay.com](https://sites.google.com/view/www-quickpayportal-com/ "priviabillpay.com"). First of all, patients will have to go to the official Privia Medical Community Online portal . Patients can use the quick pay code of priviabillpay.com to make a one-time payment. On the first page of your statement, the QuickPay code is found. Using Priviabillpay to follow a few steps to get paid.
First of all, you must visit the official portal at [www.priviabillpay.com](https://sites.google.com/view/www-quickpayportal-com/ "www.priviabillpay.com")
In the box, fill out the QuickPay Code and tap Make a Payment.
You will be redirected to a page showing all your current rates.
Now select the fees you want to pay and click the check box that you want to accept quickly.
Finally, click on the payment option button.
Your payment details will be asked on the screen.
Fill out the field required and submit your payment.
Our Official Website : https://sites.google.com/view/www-quickpayportal-com/#www.priviabillpay.com #www-quickpayportal-com #quickpayportal.com #www.quickpayportal.com. #quickpayportal.com.
1618639156
Responsive Personal Portfolio Website HTML CSS and JavaScript
Demo: https://cutt.ly/TvxhH2T
#portfolio website html css #personal portfolio website tutorial #portfolio website #responsive personal portfolio website #portfolio website html css javascript #responsive portfolio website html css javascript