Work in progress. ๐จโ๐ป
Live: https://sveltekit-headless-wp-rest-demo.vercel.app/
Content is fetched from WordPress demo backend https://nature-blog.mandrasch.eu/. Please use your own backend if you run big tests. The backend API URL can be configured in .env
-file.
npm install
# Copy .env.example to .env
npm run dev -- --open
See https://github.com/mandrasch/sveltekit-headless-wp-rest-demo-backend and switch in .env
-file to the following:
# .env
PUBLIC_WP_REST_API_DOMAIN=https://sveltekit-headless-wp-rest-demo.ddev.site
- Vercel (SSR hosting)
- Just add environment variable, see
.env.example
and deploy
- Just add environment variable, see
- adapter-static (static site)
- TODO: Not yet implemented / how to deploy both simultaneously? See e.g. https://github.com/mandrasch/aktuelle-erderhitzung for example of static site generator
- adapter-node
- Not implemented here, see e.g. https://dev.to/mandrasch/host-sveltekit-apps-with-ssr-support-via-ploiio-on-hetzner-cloud-1cpa
- Add post list with pagination
- Add acf fields, custom post type + search filter for CPTs
- Add cookie / 2 click privacy solution for embeds, see: https://github.com/mandrasch/wie-steht-es-um-das-klima-so, https://orestbida.com/demo-projects/cookieconsent/
- Add gmaps (or similiar) example, gdpr-compatible
- Add forms example - submit via REST API
- Add forms example (CF7) with captcha
- Add sitemap, https://www.npmjs.com/package/svelte-sitemap?
- Add search?
- Add loading animation - there a lib for that? https://dev.to/shajidhasan/add-a-youtube-like-page-loading-animation-in-sveltekit-58kp
- Follow trac ticket for "Sorry, you are not allowed to do that." " on some media files -> https://core.trac.wordpress.org/ticket/41445
# Frontend - SvelteKit
npm create svelte@latest frontend
cd frontend
npm install
npm i @picocss/pico
# Add picocss - https://joyofcode.xyz/using-pico-css-with-svelte
npm i -D sass
npm i -D svelte-preprocess
# Gutenberg styles:
npm install @wordpress/block-library --save
- https://kit.svelte.dev/
- https://picocss.com/
- https://www.npmjs.com/package/@wordpress/block-library
- https://codepen.io/HenrikFricke/pen/GRNYrXK
My own work (mostly config stuff) is available as CC0 / Public Domain, no need for attribution. Due to compatibility to SvelteKit and other packages, I also licensed this as MIT license.
Please see package.json
for a list of all used Open Source libraries and their respective licenses.