Svelte Markdoc: A Markdoc Preprocessor for Svelte

svelte-markdoc

A Markdoc preprocessor for Svelte. Supports SvelteKit.

Setup

Create a SvelteKit project:

mkdir my-markdoc-project
cd my-markdoc-project

pnpm init svelte@next

Install the svelte-markdoc package:

pnpm install -D svelte-markdoc

Create a markdoc.config.js in the root folder to hold your markdoc config:

export default {
  variables: {
    title: 'My awesome site'
  }
}

Then, configure the preprocessor in svelte.config.js:

import preprocessMarkdoc from 'svelte-markdoc'
import markdocConfig from './markdoc.config.js'

const config = {
  extensions: ['.svelte', '.markdoc'],
  preprocess: {
    markup: preprocessMarkdoc(markdocConfig)
  },
  kit: {
    // ...
  }
}

export default config

Now you can create pages with the .markdoc extension in src/routes:

---
title: Hello from Markdoc
---

# {% $markdoc.frontmatter.title %}

This is *super* cool.

FAQ

How is this different than MDX?

MDX is great! It's very flexible, this is a more contrained editing system where docs are treated as data, whereas with mdx, it's more like code. More info here: https://markdoc.io/docs/faq#why-not-mdx

Download details:

Author: joshnuss
Source code: https://github.com/joshnuss/svelte-markdoc
License:

#svelte #javascript

What is GEEK

Buddha Community

Svelte Markdoc: A Markdoc Preprocessor for Svelte

Joseph Murray

1659440595

Svelte Markdoc: A Markdoc Preprocessor for Svelte

svelte-markdoc

A Markdoc preprocessor for Svelte. Supports SvelteKit.

Setup

Create a SvelteKit project:

mkdir my-markdoc-project
cd my-markdoc-project

pnpm init svelte@next

Install the svelte-markdoc package:

pnpm install -D svelte-markdoc

Create a markdoc.config.js in the root folder to hold your markdoc config:

export default {
  variables: {
    title: 'My awesome site'
  }
}

Then, configure the preprocessor in svelte.config.js:

import preprocessMarkdoc from 'svelte-markdoc'
import markdocConfig from './markdoc.config.js'

const config = {
  extensions: ['.svelte', '.markdoc'],
  preprocess: {
    markup: preprocessMarkdoc(markdocConfig)
  },
  kit: {
    // ...
  }
}

export default config

Now you can create pages with the .markdoc extension in src/routes:

---
title: Hello from Markdoc
---

# {% $markdoc.frontmatter.title %}

This is *super* cool.

FAQ

How is this different than MDX?

MDX is great! It's very flexible, this is a more contrained editing system where docs are treated as data, whereas with mdx, it's more like code. More info here: https://markdoc.io/docs/faq#why-not-mdx

Download details:

Author: joshnuss
Source code: https://github.com/joshnuss/svelte-markdoc
License:

#svelte #javascript

Poppy Cooke

1600073509

Svelte Tutorial - Create a Svelte Project

In this Svelte tutorial we’ll be taking a look at creating a Svelte project using the Svelte template. We’ll go over the file structure, install a VS Code extension and look at starting the built-in development server.

For your reference, check this out:
https://svelte.dev/tutorial/basics

#svelte #web-development #svelte

Keven Konopelski

1626301860

5 Reasons Why Svelte is Improving UI Development (Svelte.JS)

Svelte can be used anywhere and for anything you’d use Angular, React or Vue for. It’s a JavaScript tool used for building fast web applications, with a big focus on super slick and interactive user interfaces that are not only incredibly easy to build within the Svelte framework, but are also highly code efficient – never a bad thing.

There’s no performance cost associated with the framework’s abstractions, nor is there that initial dip in performance when an app first opens that’s usually attributed to the DOM diffing version update checking process.

Better yet, there is the flexibility to either build the entire app in Svelte, or to add in segments incrementally to an already existing base of code. Components made in Svelte can operate as stand-alone packages that don’t require the overhead of a conventional framework dependency, and can be used anywhere really.

SUBSCRIBE to Kofi Group: https://www.youtube.com/channel/UC1mBXiJnLtiDHMtpga0Ugaw?view_as=subscriber

00:00 - Intro
02:49 - What is Svelte
04:22 - What is Svelte used for
06:01 - Svelte pros
09:08 - Svelte cons
11:00 - Who’s using Svelte
*

Website: https://www.kofi-group.com/

Blog article version: https://www.kofi-group.com/5-reasons-why-svelte-is-improving-ui-development/

Remote jobs: https://www.kofi-group.com/search-jobs/

Kofi Group helps startups outcompete FAANG (Facebook, Amazon, Apple, Netflix, Google) and big tech in the highly competitive, war for talent.

Our videos cover hiring tips and strategies for startups, software engineering and machine learning interview preparation, salary negotiation best practices, compensation analysis, computer science basics, artificial intelligence, tips for other recruiters, and much more!

Hit the SUBSCRIBE button and we’ll see you in the comments!

Music - Throwaway 2 by XIAO-NIAO
https://www.youtube.com/watch?v=DqeGWcZ0dMg
https://soundcloud.com/bird-xiao/throwaway-2

#svelte #javasript #softwareengineering #startup #faang #kofigroup

#svelte #javasript #svelte.js

Adolphus Tillman

1652157120

Getting Started Building a Svelte App with SvelteKit

Svelte is a lightweight framework for building web applications. When you use it, it looks and feels a lot like other frontend frameworks like React and Vue, but leaves the virtual DOM behind. That, along with other optimisations means it does far less work in the browser, optimising user experience and load time.

In this guide, we'll be going over how to setup your first Svelte application using SvelteKit. Svelte has a number of different ways to make applications, and SvelteKit is one of the official packages from Svelte for doing that. If you're interested in other frameworks, you might enjoy a similar guide we have on making your first Vue application.

#Creating your first Svelte Application

To get started, open up a new terminal window and initiate your svelte application using the command below. Note if you don't have npm installed, you'll need to get it. You can install npm by installing Node.JS, via the link here.

Once you have Node.JS and NPM installed, run the command below. Before you do that though, make sure you use cd to move into the folder you want to create your new Svelte application in.

npm init svelte@next my-svelte-app

When you run this command, you'll auto generate a Svelte template in a folder called my-svelte-app. Svelte will guide you through a number of options. Select your preferences. The image below shows the one's I have selected. For the purposes of this guide, I will be using the Skeleton project.

Options for Selecting in SvelteKit

Finally, run the following command to cd into your svelte directory:

cd my-svelte-app

And then install all of your dependencies using the following line:

npm i

#Svelte File Structure

If you are familiar with other frameworks, then Svelte will feel familiar. Here is an overview of the file structure in Svelte, for the project we have just made:

static                 <-- where we store all of our public assets like favicons, images, and fonts
|- favicon.png         <-- our favicon
tests                  <-- a folder to store our tests
|- test.js             <-- an example test using @playwright
src                    <-- our main Svelte app files
|- routes              <-- a folder to store all of our routes in
|-- index.svelte       <-- our index route file. This will be the file displayed at the route of the site
|- app.d.ts            <-- our core Svelte app file
|- app.html            <-- our main index file where the app will appear
.gitignore             <-- files we wish to ignore for git
.npmrc                 <-- config file for npm
.prettierrc            <-- config file for prettier
.eslintrc.cjs          <-- config file for eslint
package.json           <-- our NPM installed packages
playwright.config.js   <-- config file for playwright
svelte.config.js       <-- config file for svelte itself
tsconfig.json          <-- config file for typescript

Our basic Svelte application is ready to go. If you want to see how it looks, you can serve it on your local computer on the URL http://localhost:3000 by running the following command in your Svelte application folder:

npm run dev

If you visit http://localhost:3000 in your browser, you should see something like this:

Our first Svelte Application

#Creating new pages or routes in Svelte

To make a new route in Sveltekit, simply make a new file within the routes folder. For example, if you make a file called about.svelte, then it will show up at http://localhost:3000/about. Another way you can do this is to make a new folder called about, and put index.svelte in that folder, http://localhost:3000/about will work.

#Try it yourself

Create a new page within your /src/routes folder, called about.svelte. Now when you go to http://localhost:3000/, you will be able to access that page. Similarly, you can try making a folder called about with a file placed inside called index.svelte

#How to run your SvelteKit App on Node.JS

To run your Svelte application on a server or locally on a Node.JS server, you need to use an adapter. If you want to run your Svelte application on a Node Server, install @sveltejs/adapter-node@next via the following line:

npm i @sveltejs/adapter-node@next

Now we have to change our svelte.config.js file. We need to use the new adapter, and change our kit.adapter object within the config file. You can replace the contents of your svelte.config.js with the code below, but we're only changing two lines - our adapter import, and then adding the build directory in your config:

// We have changed the adapter line to use adapter-node@next
import adapter from '@sveltejs/adapter-node@next';
import preprocess from 'svelte-preprocess';

/** @type {import('@sveltejs/kit').Config} */
const config = {
	// Consult https://github.com/sveltejs/svelte-preprocess
	// for more information about preprocessors
	preprocess: preprocess(),

	kit: {
		// We have changed this to point to a build directory
		adapter: adapter({ out: 'build' })
	}
};

export default config;

#Other SvelteKit adapters

If you want to run your Svelte application on Cloudflare, Netlify, or Vercel, then you need to use one of these adapters, you don't need to do anything. These are all included by default in adapter-auto - so only change your svelte.config.js file if you aren't planning on using a Node.JS server.

#How to build your SvelteKit App for Production

Now that we've configured our adapter, let's build our application. In SvelteKit, it's easy to make your app ready to run in a production environment. Simply run the following command, which will create a new folder called .svelte-kit with all your production ready files in.

npm run build

Now, if you want to preview your production build, simply run the following command:

npm run preview

If you are running your application on a Node.JS server and have updated your adapter, as shown in the previous section, then you can run your new Svelte application locally by running the following command in your Svelte directory:

node build/index.js

Now when you navigate to http://localhost:3000/, your Svelte application should show, only this time it will be ready for production.

#Conclusion

In this guide we've looked at how to use SvelteKit to create your first Svelte application with routes. Let's look at what we've learned:

How to set up SvelteKit and create the basic structure of your Svelte application.

How to use routes in SvelteKit, so you can have multiple pages on your application.

How to update your config file to use the right adapter, based on where you want to deploy your application.

How to build and run your application locally on a Node.JS server.

Next, you can try playing around with Svelte to start customizing your application.

Source: https://hackernoon.com/getting-started-building-a-svelte-app-with-sveltekit

#svelte #sveltekit

Diego Elizondo

1652171940

Introducción A La Creación De Una Aplicación Svelte Con SvelteKit

Svelte es un marco ligero para crear aplicaciones web. Cuando lo usa, se parece mucho a otros marcos frontend como React y Vue, pero deja atrás el DOM virtual. Eso, junto con otras optimizaciones, significa que funciona mucho menos en el navegador, lo que optimiza la experiencia del usuario y el tiempo de carga.

En esta guía, repasaremos cómo configurar su primera aplicación Svelte usando SvelteKit. Svelte tiene varias formas diferentes de crear aplicaciones, y SvelteKit es uno de los paquetes oficiales de Svelte para hacerlo. Si está interesado en otros marcos, puede disfrutar de una guía similar que tenemos sobre cómo crear su primera aplicación Vue .

#Creando tu primera aplicación Svelte

Para comenzar, abra una nueva ventana de terminal e inicie su aplicación esbelta con el siguiente comando. Tenga en cuenta que si no lo tiene npminstalado, deberá obtenerlo. Puede instalar npminstalando Node.JS, a través del enlace aquí .

Una vez que haya instalado Node.JS y NPM, ejecute el siguiente comando. Sin embargo, antes de hacer eso, asegúrese de usar cdpara moverse a la carpeta en la que desea crear su nueva aplicación Svelte.

npm init svelte@next my-svelte-app

Cuando ejecute este comando, generará automáticamente una plantilla Svelte en una carpeta llamada my-svelte-app. Svelte lo guiará a través de una serie de opciones. Seleccione sus preferencias. La siguiente imagen muestra las que he seleccionado. A los efectos de esta guía, utilizaré el proyecto Skeleton.

Opciones para seleccionar en SvelteKit

Finalmente, ejecute el siguiente comando para ingresar a su directorio esbelto:

cd my-svelte-app

Y luego instale todas sus dependencias usando la siguiente línea:

npm i

Estructura de archivo #Svelte

Si está familiarizado con otros marcos, Svelte le resultará familiar. Aquí hay una descripción general de la estructura de archivos en Svelte, para el proyecto que acabamos de hacer:

static                 <-- where we store all of our public assets like favicons, images, and fonts
|- favicon.png         <-- our favicon
tests                  <-- a folder to store our tests
|- test.js             <-- an example test using @playwright
src                    <-- our main Svelte app files
|- routes              <-- a folder to store all of our routes in
|-- index.svelte       <-- our index route file. This will be the file displayed at the route of the site
|- app.d.ts            <-- our core Svelte app file
|- app.html            <-- our main index file where the app will appear
.gitignore             <-- files we wish to ignore for git
.npmrc                 <-- config file for npm
.prettierrc            <-- config file for prettier
.eslintrc.cjs          <-- config file for eslint
package.json           <-- our NPM installed packages
playwright.config.js   <-- config file for playwright
svelte.config.js       <-- config file for svelte itself
tsconfig.json          <-- config file for typescript

Nuestra aplicación Svelte básica está lista para funcionar. Si desea ver cómo se ve, puede publicarlo en su computadora local en la URL http://localhost:3000 ejecutando el siguiente comando en la carpeta de su aplicación Svelte:

npm run dev

Si visita http://localhost:3000 en su navegador, debería ver algo como esto:

Nuestra primera aplicación Svelte

#Creando nuevas páginas o rutas en Svelte

Para hacer una nueva ruta en Sveltekit, simplemente crea un nuevo archivo dentro de la carpeta de rutas. Por ejemplo, si crea un archivo llamado about.svelte, aparecerá en http://localhost:3000/about . Otra forma de hacer esto es crear una nueva carpeta llamada about y poner index.svelte en esa carpeta, http://localhost:3000/about funcionará.

#Inténtalo tú mismo

Cree una nueva página dentro de su carpeta /src/routes, llamada about.svelte. Ahora, cuando vaya a http://localhost:3000/ , podrá acceder a esa página. Del mismo modo, puede intentar crear una carpeta llamada about con un archivo colocado dentro llamado index.svelte

#Cómo ejecutar su aplicación SvelteKit en Node.JS

Para ejecutar su aplicación Svelte en un servidor o localmente en un servidor Node.JS, necesita usar un adaptador. Si desea ejecutar su aplicación Svelte en un servidor de nodos, instale @sveltejs/adapter-node@next a través de la siguiente línea:

npm i @sveltejs/adapter-node@next

Ahora tenemos que cambiar nuestro svelte.config.jsarchivo. Necesitamos usar el nuevo adaptador y cambiar nuestro kit.adapterobjeto dentro del archivo de configuración. Puede reemplazar el contenido de su svelte.config.jscon el código a continuación, pero solo estamos cambiando dos líneas: nuestra importación de adaptador y luego agregando el directorio de compilación en su configuración:

// We have changed the adapter line to use adapter-node@next
import adapter from '@sveltejs/adapter-node@next';
import preprocess from 'svelte-preprocess';

/** @type {import('@sveltejs/kit').Config} */
const config = {
	// Consult https://github.com/sveltejs/svelte-preprocess
	// for more information about preprocessors
	preprocess: preprocess(),

	kit: {
		// We have changed this to point to a build directory
		adapter: adapter({ out: 'build' })
	}
};

export default config;

#Otros adaptadores SvelteKit

Si desea ejecutar su aplicación Svelte en Cloudflare, Netlify o Vercel, entonces necesita usar uno de estos adaptadores, no necesita hacer nada. Todos estos están incluidos de manera predeterminada en adapter-auto, así que solo cambie su archivo svelte.config.js si no planea usar un servidor Node.JS.

#Cómo construir su aplicación SvelteKit para producción

Ahora que hemos configurado nuestro adaptador, construyamos nuestra aplicación. En SvelteKit, es fácil hacer que su aplicación esté lista para ejecutarse en un entorno de producción. Simplemente ejecute el siguiente comando, que creará una nueva carpeta llamada .svelte-kit con todos sus archivos listos para producción.

npm run build

Ahora, si desea obtener una vista previa de su compilación de producción, simplemente ejecute el siguiente comando:

npm run preview

Si está ejecutando su aplicación en un servidor Node.JS y ha actualizado su adaptador , como se muestra en la sección anterior, puede ejecutar su nueva aplicación Svelte localmente ejecutando el siguiente comando en su directorio Svelte:

node build/index.js

Ahora, cuando navegue a http://localhost:3000/ , su aplicación Svelte debería mostrarse, solo que esta vez estará lista para la producción.

#Conclusión

En esta guía, hemos visto cómo usar SvelteKit para crear su primera aplicación Svelte con rutas. Veamos lo que hemos aprendido:

Cómo configurar SvelteKit y crear la estructura básica de su aplicación Svelte.

Cómo usar rutas en SvelteKit, para que pueda tener varias páginas en su aplicación.

Cómo actualizar su archivo de configuración para usar el adaptador correcto, en función de dónde desea implementar su aplicación.

Cómo compilar y ejecutar su aplicación localmente en un servidor Node.JS.

A continuación, puede intentar jugar con Svelte para comenzar a personalizar su aplicación.

Fuente: https://hackernoon.com/getting-started-building-a-svelte-app-with-sveltekit

#svelte #sveltekit