Fedeorlandau / contentful-svelte-tailwind

Contentful + Svelte + Tailwind + Graphql starter kit

Home Page:https://contentful-svelte-tailwind.vercel.app

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Contentful + SvelteKit + Tailwind CSS + GraphQL

Example project using SvelteKit with the Contentful Delivery API along with GraphQL, deployed to Vercel. If you don't want to use GraphQL please refer to the nographql branch which uses Contentful's SDK.

web

Live Example: https://contentful-svelte-tailwind.vercel.app/

Live Example: https://contentful-svelte-tailwind.vercel.app/test

Developing

Env variables

Remember to set up a .env file with your contentful keys

VITE_CONTENTFUL_SPACE_ID=""
VITE_CONTENTFUL_TOKEN=""
VITE_CONTENTFUL_ENVIRONMENT="" // usually "production" or "master"

Once you've created a project and installed dependencies with npm install, start a development server:

npm run dev

# or start the server and open the app in a new browser tab
npm run dev -- --open

Building

This uses the Vercel Adapter for SvelteKit.

npm run build

Content types

This starter kit relies on the following content models.

Page

Page content model

  • Title, short text.
  • Slug, short text
  • Components, References - many.

Hero

Hero content model

  • Title, short text.
  • Description, short text
  • CTA Text, short text
  • CTA Link, short text

Lighthouse score

Lighthouse score

About

Contentful + Svelte + Tailwind + Graphql starter kit

https://contentful-svelte-tailwind.vercel.app


Languages

Language:Svelte 86.4%Language:TypeScript 6.6%Language:JavaScript 4.0%Language:HTML 2.6%Language:Shell 0.2%Language:CSS 0.2%