Layout y estructura principal de nuestro blog

Clase 5 de 35 • Curso de Desarrollo Web con Svelte y Sapper

Eric Gomez

student•

Main.svelte

<main class="Main">
  <div class="Main-container">
    <div class="Main-content">
      <slot />
      <div class="Sidebar">Sidebar </div>
    </div>
  </div>
</main>

<style>
  .Main-container {
    display: grid;
    grid-template-columns: minmax(auto, 1024px);
    justify-content: center;
    align-items: center;
  }

  .Main-content {
    margin: 2em 0 0;
    display: grid;
    grid-auto-columns: 3fr 1fr;
    gap: 68px;
    justify-content: space-between;
  }

</style>

Wilmion Navarrete

student•

heroe sin capa

Jose Morales Varon

student•

Recuerden que el grid-gap ya no es una etiqueta válida, actualmente es solo gap ✌

Naldo Duran

student•

👌

William Glaffo

student•

Armando la estructura del proyecto. Sigamos

Giancarlo Zevallos Lecca

student•

SvelteKit https://github.com/giancarlo92/curso-sapper-sveltekit/releases/tag/Layout-estructura-principal

Sapper https://github.com/giancarlo92/curso-sapper-sapper/releases/tag/Layout-estructura-principal

Diego Artiles

student•

Como se llama esa terminal Oscar?

Gonzalo Alfaro

student•

Hola!

Es terminal WSL2.

Te dejo este tutorial de un compañero de Platzi, para que puedas instalarla.

https://platzi.com/tutoriales/1650-prework/5895-aprende-a-instalar-wsl-2-de-la-manera-sencilla/

Diego Artiles

student•

Muchisimas gracias @gonzaloalfaro

Jesús David Emiliano Reynoso Sarmiento

student•

Hola tengo el siguiente error


(node:8340) UnhandledPromiseRejectionWarning: WebpackOptionsValidationError: Invalid configura
tion object. Webpack has been initialised using a configuration object that does not match the
 API schema.
 - configuration.output.path: The provided value "undefined/client" is not an absolute path!
   -> The output directory as **absolute path** (required).
    at webpack (C:\Users\jesus\documents\blog\svelteblog\node_modules\webpack\lib\webpack.js:3
1:9)
    at new WebpackCompiler (C:\Users\jesus\Documents\blog\svelteblog\node_modules\sapper\dist\
create_manifest_data.js:4481:18)
    at Object.<anonymous> (C:\Users\jesus\Documents\blog\svelteblog\node_modules\sapper\dist\c
reate_manifest_data.js:4534:25)
    at Generator.next (<anonymous>)
    at C:\Users\jesus\Documents\blog\svelteblog\node_modules\sapper\dist\_commonjsHelpers.js:3
0:71
    at new Promise (<anonymous>)
    at Object.__awaiter (C:\Users\jesus\Documents\blog\svelteblog\node_modules\sapper\dist\_co
mmonjsHelpers.js:26:12)
    at Object.create_compilers (C:\Users\jesus\Documents\blog\svelteblog\node_modules\sapper\d
ist\create_manifest_data.js:4512:29)
    at Watcher.<anonymous> (C:\Users\jesus\Documents\blog\svelteblog\node_modules\sapper\dist\
dev.js:137:58)
    at Generator.next (<anonymous>)
(Use `node --trace-warnings ...` to show where the warning was created)
(node:8340) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originat
ed either by throwing inside of an async function without a catch block, or by rejecting a pro
mise which was not handled with .catch(). To terminate the node process on unhandled promise r
ejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.htm
l#cli_unhandled_rejections_mode). (rejection id: 2)
(node:8340) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the
future, promise rejections that are not handled will terminate the Node.js process with a non-
zero exit code.

Jesús David Emiliano Reynoso Sarmiento

student•

Al hacer node--trace-warnings ... me sale esto

node --trace-warnings ...
internal/modules/cjs/loader.js:1032
  throw err;
  ^

Error: Cannot find module 'C:\Users\jesus\documents\blog\svelteblog\...'
?[90m    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:1029:15)?[39m
?[90m    at Function.Module._load (internal/modules/cjs/loader.js:898:27)?[39m
?[90m    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:71:12)?[
39m
?[90m    at internal/main/run_main_module.js:17:47?[39m {
  code: ?[32m'MODULE_NOT_FOUND'?[39m,
  requireStack: []
}

Jesús David Emiliano Reynoso Sarmiento

student•

Estuve investigando un poco pero no encontré mucho. Creo que voy a usar rollup... O comprarme una Macbook 🤣

Layout y estructura principal de nuestro blog

Herramientas para trabajar con Svelte profesionalmente

Proyecto del curso y estado del arte de Svelte

Setup inicial con Sapper

Estructura de un proyecto en Sapper

Estructura de rutas con Sapper

Sistema de rutas y rutas dinámicas en Sapper

Layout y estructura principal de nuestro blog

Ruta 404 con animaciones

Rutas principales del blog: about, contact y tags

Construye el Layout y Newsletter del blog

Diseño y maquetación del Header

Diseño y maquetación del Nav

Diseño y maquetación del Sidebar y Footer

Construye un Newsletter para el blog

Estructura de los blogposts

Sección principal del blog y blogposts

Integración de analytics, comentarios y tiempo de lectura en tu blog

Integración con Google Analytics

Calcula el tiempo de lectura de cada blogpost

Muestra un emoji aleatorio en cada blogpost

Manejo de fechas dentro del blog con JavaScript Vainilla

Estructura del blogpost con comentarios

Integración con Disqus para agregar comentarios

Construye tu API usando Ghost CMS

Instalación de Ghost

Configuración de Ghost en Heroku

Ghost Core API

Integra la API de Ghost en tu blog con Svelte

Guardando la información de nuestros blogposts

Terminando la integración

Despliega tu aplicación

Compra de un dominio y manejo del DNS con Cloudflare

Deploy a Netlify

Deploy a Heroku

SEO y optimización de tu sitio web

Metadatos y optimización del SEO

Transforma tu blog en una PWA

RSS

Terminando el RSS

Sitemap

Agrega pruebas de integración con Cypress

Cómo continúa tu camino profesional con Svelte

Siguientes pasos con Svelte