msb-public
/
svelte
mirror of https://github.com/sveltejs/svelte
1
0
Code Issues Projects Releases Wiki Activity

Merge branch 'master' of https://github.com/sveltejs/svelte into style-directives

Browse Source
pull/5923/head
Paul Murray 5 years ago
parent f0bc96dff4 c2149e8529
commit 5387b15cb5
22 changed files with 300 additions and 252 deletions
Show Stats Download Patch File Download Diff File

91
site/content/blog/2021-12-01-whats-new-in-svelte-december-2021.md
Unescape View File

@ -0,0 +1,91 @@
---
title: What's new in Svelte: December 2021
description: "Svelte Summit Fall 2021 Recap, Rich Harris joins Vercel, and Kevin goes full-time on Svelte Society"
author: Daniel Sandoval
authorURL: https://desandoval.net
---
With SvelteKit getting more and more stable each day, there's not much to cover in terms of code changes other than bug fixes... So, in this month's newsletter, we'll be covering Svelte Summit Fall 2021!
If you want to dive deep into the last month's worth of bug fixes, check out the [Svelte](https://github.com/sveltejs/svelte/blob/master/CHANGELOG.md) and [SvelteKit](https://github.com/sveltejs/kit/blob/master/packages/kit/CHANGELOG.md) changelogs, respectively.
## What happened at Svelte Summit?
If you missed Svelte Summit, you can watch the entire live stream on [YouTube](https://www.youtube.com/watch?v=1Df-9EKvZr0) and catch a recap in the [#svelte-summit channel on Discord](https://discord.gg/YmHcdnhu).
Here are the highlights:
- [Rich Harris](https://twitter.com/rich_harris) took us through a tour of Svelte's history and announced [his move to Vercel](https://vercel.com/blog/vercel-welcomes-rich-harris-creator-of-svelte) - where he will be helping maintain Svelte full-time! ([20:00](https://www.youtube.com/watch?v=1Df-9EKvZr0&t=1200s))
- [Steph Dietz](https://twitter.com/steph_dietz_) explained how Svelte's simple abstractions makes it easy for beginners and experts alike to learn and use JavaScript - without the boilerplate ([29:00](https://www.youtube.com/watch?v=1Df-9EKvZr0&t=1740s))
- [Kevin Bridges](https://twitter.com/kevinast) dove deep into Svelte's reactivity logic by visualizing it through `ReflectiveCounter` and showing how to "fine tune" it, as needed. A full "syllabus" for the presentation is available on [Kevin's site](https://wiibridges.com/presentations/ResponsiveSvelte/). ([42:55](https://www.youtube.com/watch?v=1Df-9EKvZr0&t=2575s))
- [Mateo Morris](https://twitter.com/_mateomorris) launched [Primo](https://primo.af/), an all-in-one SvelteKit CMS to help build and manage static sites ([1:12:34](https://www.youtube.com/watch?v=1Df-9EKvZr0&t=4354s))
- [Guillermo Rauch](https://vercel.com/about/rauchg) explained Vercel's commitment to Svelte, what it means to have Rich on the team, and what's coming next from the company... ([1:21:54](https://www.youtube.com/watch?v=1Df-9EKvZr0&t=4914s))
- [Geoff Rich](https://twitter.com/geoffrich_) introduced various ways to modify motion and transitions within Svelte to be more accessible to all users of the web. Slides and a full transcription of the talk are available on [Geoff's site](https://geoffrich.net/posts/svelte-summit-2021/). ([1:32:30](https://www.youtube.com/watch?v=1Df-9EKvZr0&t=5550s))
- [Dean Fogarty](https://df.id.au/) demoed a number of different use-cases for custom stores - transforming data to and from storage mechanisms within Svelte. Transcript and code is available on [Dean's GitHub](https://github.com/angrytongan/svelte-summit-2021). ([1:43:06](https://www.youtube.com/watch?v=1Df-9EKvZr0&t=6186s))
- [Kellen Mace](https://twitter.com/kellenmace) shared how we can let content creators keep using WordPress, while leveraging Svelte on the frontend to provide a phenomenal user experience ([1:49:30](https://www.youtube.com/watch?v=1Df-9EKvZr0&t=6570ss))
- [Ben Holmes](https://twitter.com/bholmesdev) explained the "islands" architecture and how 11ty + [Slinkity](https://slinkity.dev/) can bring these islands to any HTML template ([2:17:15](https://www.youtube.com/watch?v=1Df-9EKvZr0&t=8235s))
- [Scott Tolinski](https://twitter.com/stolinski) shared the lessons learned from rewriting the React-based LevelUpTutorials in Svelte and "found developer bliss" ([3:16:35](https://www.youtube.com/watch?v=1Df-9EKvZr0&t=11795s))
- [Svelte Sirens](https://sveltesirens.dev) was announced as the new Svelte community for women, non-binary and allies. Their first event was on November 29th - all future events can be found on [the Svelte Sirens website](https://sveltesirens.dev/events) ([3:50:45](https://www.youtube.com/watch?v=1Df-9EKvZr0&t=13845s))
- [Rich Harris](https://twitter.com/rich_harris) discussed creating libraries with SvelteKit, better ways to link packages when developing, and how SvelteKit helps with modern JavaScript library development ([3:56:00](https://www.youtube.com/watch?v=1Df-9EKvZr0&t=14160s))
- [Ken Kunz](https://twitter.com/kennethkunz) explained how finite state machines (and the svelte-fsm library) can make managing Svelte component states more... manageable. Examples from the talk are available on [Ken's GitHub](https://github.com/kenkunz/svelte-fsm/wiki/Examples). ([4:07:18](https://www.youtube.com/watch?v=1Df-9EKvZr0&t=14838s))
- [Austin Crim](https://twitter.com/crim_codes) connected learning to code on the web to learning how to play an instrument. By giving learners early wins and introducing the fundamentals through real-world apps, learning Svelte (and the fundamentals underneath) doesn't have to be a chore ([4:21:50](https://www.youtube.com/watch?v=1Df-9EKvZr0&t=15710s))
- [Jesse Skinner](https://twitter.com/JesseSkinner) brought our legacy apps into the future by explaining how to use (and reuse) Svelte components within React (and even jQuery!) projects ([4:32:30](https://www.youtube.com/watch?v=1Df-9EKvZr0&t=16350s))
- [Jim Fisk](https://twitter.com/jimafisk) and [Stephanie Luz](https://stephanie-luz.medium.com/) introduced [Plenti](https://plenti.co/) and its theming tools to make building new Svelte sites much faster ([4:59:00](https://www.youtube.com/watch?v=1Df-9EKvZr0&t=17940s))
- [Evyatar Alush](https://twitter.com/evyataral) helped us all make (and maintain) better forms using a powerful validation library called [Vest](https://github.com/ealush/vest) ([5:08:55](https://www.youtube.com/watch?v=1Df-9EKvZr0&t=18535s))
- Dominik G. presented a fresh take on icon libraries - one that reduces the bundle size of applications and opens up the entire iconify library for use in any Svelte app ([5:30:04](https://www.youtube.com/watch?v=1Df-9EKvZr0&t=19804s))
Thanks to [Kevin](https://twitter.com/kevmodrome) and all the Svelte Society volunteers for pulling together such an amazing event! Excitingly, [Kevin announced](https://twitter.com/kevmodrome/status/1463151477174714373) after the event that he will now be working full-time on Svelte Society! You can check out all the talks, broken up into individual videos for convenience, in [this Svelte Society YouTube Playlist](https://www.youtube.com/playlist?list=PL8bMgX1kyZTg2bI9IOMgfBc8lrU3v2itt).
If you have feedback on the Svelte Summit, Kev is [looking for feedback on the Svelte subreddit](https://www.reddit.com/r/sveltejs/comments/qzgo3k/svelte_summit_feedback/) 👀
---
## Community Showcase
**Apps & Sites**
- [pixeldrain](https://github.com/Fornaxian/pixeldrain_web) is a free-to-use file sharing platform
- [LifeHash](http://lifehash.info/) generates beautiful visual hashes from Blockchain Commons
- [simple-cloud-music](https://github.com/dufu1991/simple-cloud-music) is a lightweight third-party NetEase cloud music player for modern browsers (likely only works on Chrome)
- [palette.rocks](https://palette.rocks/) is a color palette generator with contrast-checking built-in
- [Kadium](https://github.com/probablykasper/kadium) is an app for staying on top of YouTube channel uploads
- [Multi-Monitor Calculator](https://multimonitorcalculator.com/) is a tool for planning your multi-monitor setup
- [Your Home](https://yourhome.fb.com/) is an interactive overview of Facebook's privacy settings
- [Svelte Crush](https://svelte-crush.netlify.app/) is a Candy Crush style match-3 game
- [100.000 Corona deaths in Germany](https://twitter.com/h_i_g_s_c_h/status/1463767113563353089?s=20) is a visualization made for Spiegel Gesundheit
**Looking for a Svelte project to work on? Interested in helping make Svelte's presence on the web better?** Check out [the list of open issues](https://github.com/svelte-society/sveltesociety-2021/issues) if you'd like to contribute to the Svelte Society rewrite in SvelteKit.
**Videos, Blogs and Podcasts**
- [How To Make and Publish a Svelte Library](https://www.youtube.com/watch?v=_TymiadmPrc)
- [SvelteKit is now fully supported in WebContainers](https://blog.stackblitz.com/posts/sveltekit-supported-in-webcontainers/)
- [Introducing Svelte, and Comparing Svelte with React and Vue](https://joshcollinsworth.com/blog/introducing-svelte-comparing-with-react-vue)
- [Testing a Svelte app with Jest](https://www.roboleary.net/2021/11/18/svelte-app-testing-jest.html)
- [How to create a toast notification library package with SvelteKit](https://www.sarcevic.dev/blog/toasting-in-svelte)
- [Svelte training: Here you can learn Svelte](https://sustainablewww.org/principles/svelte-training-here-you-can-learn-svelte)
- [Introduction to Svelte Actions](https://blog.logrocket.com/svelte-actions-introduction/)
- [Enjoy making DAPPs using SvelteWeb3](https://chiuzon.medium.com/enjoy-making-dapps-using-svelteweb3-b78dfea1d902)
- [Svelte creator: Web development should be more fun](https://www.infoworld.com/article/3639521/svelte-creator-web-development-should-be-more-fun.html)
- [Svelte Radio: Rich Harris is now working full-time on Svelte 🤯](https://share.transistor.fm/s/d9b04961)
- [Web Rush: Svelte and Elder.js with Nick Reese](https://webrush.io/episodes/episode-158-svelte-and-elderjs-with-nick-reese)
- [Building SvelteKit applications with Serverless Redis](https://blog.upstash.com/svelte-with-serverless-redis)
**Libraries, Tools & Components**
- [svelte-cubed](https://github.com/Rich-Harris/svelte-cubed) is a Three.js component library for Svelte - created by Rich Harris for his presentation at Svelte Summit Fall 2021
- [svelte-fsm](https://github.com/kenkunz/svelte-fsm) is a tiny, simple, expressive, pragmatic Finite State Machine (FSM) library, optimized for Svelte
- [bromb](https://github.com/samuelstroschein/bromb) is a feedback widget for websites/web apps that is small and easy to integration/self-host
- [Spaper](https://github.com/Oli8/spaper) is a set of PaperCSS components for Svelte
- [svelte-intl-precompile](https://github.com/cibernox/svelte-intl-precompile) is an i18n library for Svelte that analyzes and compiles your translations at build time
- [svelte-preprocess-svg](https://github.com/svitejs/svelte-preprocess-svg) automatically optimizes inline svg in Svelte components for better performance and reduced file size
- [svelte-subcomponent-preprocessor](https://github.com/srmullen/svelte-subcomponent-preprocessor) allows you to write more than one component within a svelte file
- [svelte-pdfjs](https://github.com/gtm-nayan/svelte-pdfjs) is a crude implementation of a Svelte PDF viewer component
- [svelte-inview](https://github.com/maciekgrzybek/svelte-inview) is a Svelte action that monitors an element enters or leaves the viewport/parent element
- [sveltekit-adapter-wordpress-shortcode](https://github.com/tomatrow/sveltekit-adapter-wordpress-shortcode) is an adapter for SvelteKit which turns your app into a wordpress shortcode
- [svelte-websocket-store](https://github.com/arlac77/svelte-websocket-store) is a Svelte store with a websocket backend
- [Svelte Auto Form](https://github.com/leveluptuts/auto-form) is a fast and fun form library focused on ease of use, rather than flexibility.
- [set-focus](https://www.npmjs.com/package/@svackages/set-focus) is an Svelte action that will set focus on `<a>` or `<button>` elements as soon as they mount - useful for some experiences and testing
Got an idea for SvelteKit? Check out the new [GitHub Discussions](https://github.com/sveltejs/kit/discussions) in the Svelte repo. You can also join us on [Reddit](https://www.reddit.com/r/sveltejs/) or [Discord](https://discord.com/invite/yy75DKs).
See you next ~~month~~ year!

44
site/content/examples/13-actions/00-actions/App.svelte
Unescape View File

@ -1,39 +1,15 @@
<script>
import { spring } from 'svelte/motion';
import { pannable } from './pannable.js';
import { clickOutside } from "./click_outside.js";
const coords = spring({ x: 0, y: 0 }, {
stiffness: 0.2,
damping: 0.4
});
function handlePanStart() {
coords.stiffness = coords.damping = 1;
}
function handlePanMove(event) {
coords.update($coords => ({
x: $coords.x + event.detail.dx,
y: $coords.y + event.detail.dy
}));
}
function handlePanEnd(event) {
coords.stiffness = 0.2;
coords.damping = 0.4;
coords.set({ x: 0, y: 0 });
}
let showModal = true;
</script>
<div class="box"
use:pannable
on:panstart={handlePanStart}
on:panmove={handlePanMove}
on:panend={handlePanEnd}
style="transform:
translate({$coords.x}px,{$coords.y}px)
rotate({$coords.x * 0.2}deg)"
></div>
<button on:click={() => (showModal = true)}>Show Modal</button>
{#if showModal}
<div class="box" use:clickOutside on:outclick={() => (showModal = false)}>
Click outside me!
</div>
{/if}
<style>
.box {
@ -46,6 +22,8 @@
top: calc(50% - var(--height) / 2);
border-radius: 4px;
background-color: #ff3e00;
cursor: move;
color: #fff;
text-align: center;
font-weight: bold;
}
</style>

15
site/content/examples/13-actions/00-actions/click_outside.js
Unescape View File

@ -0,0 +1,15 @@
export function clickOutside(node) {
const handleClick = (event) => {
if (!node.contains(event.target)) {
node.dispatchEvent(new CustomEvent("outclick"));
}
};
document.addEventListener("click", handleClick, true);
return {
destroy() {
document.removeEventListener("click", handleClick, true);
}
};
}

51
site/content/examples/13-actions/03-actions-pannable/App.svelte
Unescape View File

@ -0,0 +1,51 @@
<script>
import { spring } from 'svelte/motion';
import { pannable } from './pannable.js';
const coords = spring({ x: 0, y: 0 }, {
stiffness: 0.2,
damping: 0.4
});
function handlePanStart() {
coords.stiffness = coords.damping = 1;
}
function handlePanMove(event) {
coords.update($coords => ({
x: $coords.x + event.detail.dx,
y: $coords.y + event.detail.dy
}));
}
function handlePanEnd(event) {
coords.stiffness = 0.2;
coords.damping = 0.4;
coords.set({ x: 0, y: 0 });
}
</script>
<div class="box"
use:pannable
on:panstart={handlePanStart}
on:panmove={handlePanMove}
on:panend={handlePanEnd}
style="transform:
translate({$coords.x}px,{$coords.y}px)
rotate({$coords.x * 0.2}deg)"
></div>
<style>
.box {
--width: 100px;
--height: 100px;
position: absolute;
width: var(--width);
height: var(--height);
left: calc(50% - var(--width) / 2);
top: calc(50% - var(--height) / 2);
border-radius: 4px;
background-color: #ff3e00;
cursor: move;
}
</style>

3
site/content/examples/13-actions/03-actions-pannable/meta.json
Unescape View File

@ -0,0 +1,3 @@
{
"title": "A more complex action"
}

0
site/content/examples/13-actions/00-actions/pannable.js → site/content/examples/13-actions/03-actions-pannable/pannable.js
Unescape View File

6
site/content/tutorial/06-bindings/14-component-this/text.md
Unescape View File

@ -2,9 +2,13 @@
title: Binding to component instances
---
Just as you can bind to DOM elements, you can bind to component instances themselves. For example, we can bind the instance of `<InputField>` to a prop named `field` in the same way we did when binding DOM Elements
Just as you can bind to DOM elements, you can bind to component instances themselves. For example, we can bind the instance of `<InputField>` to a variable named `field` in the same way we did when binding DOM Elements
```html
<script>
let field;
</script>
<InputField bind:this={field} />
```

42
site/content/tutorial/12-actions/01-actions/app-a/App.svelte
Unescape View File

@ -1,29 +1,16 @@
<script>
import { spring } from 'svelte/motion';
const coords = spring({ x: 0, y: 0 }, {
stiffness: 0.2,
damping: 0.4
});
function handlePanStart() {
coords.stiffness = coords.damping = 1;
}
function handlePanMove(event) {
coords.update($coords => ({
x: $coords.x + event.detail.dx,
y: $coords.y + event.detail.dy
}));
}
function handlePanEnd(event) {
coords.stiffness = 0.2;
coords.damping = 0.4;
coords.set({ x: 0, y: 0 });
}
let showModal = true;
</script>
<button on:click={() => (showModal = true)}>Show Modal</button>
{#if showModal}
<div class="box" on:outclick={() => (showModal = false)}>
Click outside me!
</div>
{/if}
<style>
.box {
--width: 100px;
@ -35,15 +22,8 @@
top: calc(50% - var(--height) / 2);
border-radius: 4px;
background-color: #ff3e00;
cursor: move;
color: #fff;
text-align: center;
font-weight: bold;
}
</style>
<div class="box"
on:panstart={handlePanStart}
on:panmove={handlePanMove}
on:panend={handlePanEnd}
style="transform:
translate({$coords.x}px,{$coords.y}px)
rotate({$coords.x * 0.2}deg)"
></div>

2
site/content/tutorial/12-actions/01-actions/app-a/pannable.js → site/content/tutorial/12-actions/01-actions/app-a/click_outside.js
Unescape View File

@ -1,4 +1,4 @@
export function pannable(node) {
export function clickOutside(node) {
// setup work goes here...
return {

46
site/content/tutorial/12-actions/01-actions/app-b/App.svelte
Unescape View File

@ -1,30 +1,16 @@
<script>
import { spring } from 'svelte/motion';
import { pannable } from './pannable.js';
import { clickOutside } from "./click_outside.js";
const coords = spring({ x: 0, y: 0 }, {
stiffness: 0.2,
damping: 0.4
});
function handlePanStart() {
coords.stiffness = coords.damping = 1;
}
function handlePanMove(event) {
coords.update($coords => ({
x: $coords.x + event.detail.dx,
y: $coords.y + event.detail.dy
}));
}
function handlePanEnd(event) {
coords.stiffness = 0.2;
coords.damping = 0.4;
coords.set({ x: 0, y: 0 });
}
let showModal = true;
</script>
<button on:click={() => (showModal = true)}>Show Modal</button>
{#if showModal}
<div class="box" use:clickOutside on:outclick={() => (showModal = false)}>
Click outside me!
</div>
{/if}
<style>
.box {
--width: 100px;
@ -36,16 +22,8 @@
top: calc(50% - var(--height) / 2);
border-radius: 4px;
background-color: #ff3e00;
cursor: move;
color: #fff;
text-align: center;
font-weight: bold;
}
</style>
<div class="box"
use:pannable
on:panstart={handlePanStart}
on:panmove={handlePanMove}
on:panend={handlePanEnd}
style="transform:
translate({$coords.x}px,{$coords.y}px)
rotate({$coords.x * 0.2}deg)"
></div>

15
site/content/tutorial/12-actions/01-actions/app-b/click_outside.js
Unescape View File

@ -0,0 +1,15 @@
export function clickOutside(node) {
const handleClick = (event) => {
if (!node.contains(event.target)) {
node.dispatchEvent(new CustomEvent("outclick"));
}
};
document.addEventListener("click", handleClick, true);
return {
destroy() {
document.removeEventListener("click", handleClick, true);
}
};
}

47
site/content/tutorial/12-actions/01-actions/app-b/pannable.js
Unescape View File

@ -1,47 +0,0 @@
export function pannable(node) {
let x;
let y;
function handleMousedown(event) {
x = event.clientX;
y = event.clientY;
node.dispatchEvent(new CustomEvent('panstart', {
detail: { x, y }
}));
window.addEventListener('mousemove', handleMousemove);
window.addEventListener('mouseup', handleMouseup);
}
function handleMousemove(event) {
const dx = event.clientX - x;
const dy = event.clientY - y;
x = event.clientX;
y = event.clientY;
node.dispatchEvent(new CustomEvent('panmove', {
detail: { x, y, dx, dy }
}));
}
function handleMouseup(event) {
x = event.clientX;
y = event.clientY;
node.dispatchEvent(new CustomEvent('panend', {
detail: { x, y }
}));
window.removeEventListener('mousemove', handleMousemove);
window.removeEventListener('mouseup', handleMouseup);
}
node.addEventListener('mousedown', handleMousedown);
return {
destroy() {
node.removeEventListener('mousedown', handleMousedown);
}
};
}

80
site/content/tutorial/12-actions/01-actions/text.md
Unescape View File

@ -4,85 +4,45 @@ title: The use directive
Actions are essentially element-level lifecycle functions. They're useful for things like:
* interfacing with third-party libraries
* lazy-loaded images
* tooltips
* adding custom event handlers
- interfacing with third-party libraries
- lazy-loaded images
- tooltips
- adding custom event handlers
In this app, we want to make the orange box 'pannable'. It has event handlers for the `panstart`, `panmove` and `panend` events, but these aren't native DOM events. We have to dispatch them ourselves. First, import the `pannable` function...
In this app, we want to make the orange modal close when the user clicks outside it. It has an event handler for the `outclick` event, but it isn't a native DOM event. We have to dispatch it ourselves. First, import the `clickOutside` function...
```js
import { pannable } from './pannable.js';
import { clickOutside } from "./click_outside.js";
```
...then use it with the element:
```html
<div class="box"
use:pannable
on:panstart={handlePanStart}
on:panmove={handlePanMove}
on:panend={handlePanEnd}
style="transform:
translate({$coords.x}px,{$coords.y}px)
rotate({$coords.x * 0.2}deg)"
></div>
<div class="box" use:clickOutside on:outclick="{() => (showModal = false)}">
Click outside me!
</div>
```
Open the `pannable.js` file. Like transition functions, an action function receives a `node` and some optional parameters, and returns an action object. That object can have a `destroy` function, which is called when the element is unmounted.
Open the `click_outside.js` file. Like transition functions, an action function receives a `node` (which is the element that the action is applied to) and some optional parameters, and returns an action object. That object can have a `destroy` function, which is called when the element is unmounted.
We want to fire `panstart` event when the user mouses down on the element, `panmove` events (with `dx` and `dy` properties showing how far the mouse moved) when they drag it, and `panend` events when they mouse up. One possible implementation looks like this:
We want to fire the `outclick` event when the user clicks outside the orange box. One possible implementation looks like this:
```js
export function pannable(node) {
let x;
let y;
function handleMousedown(event) {
x = event.clientX;
y = event.clientY;
node.dispatchEvent(new CustomEvent('panstart', {
detail: { x, y }
}));
window.addEventListener('mousemove', handleMousemove);
window.addEventListener('mouseup', handleMouseup);
}
function handleMousemove(event) {
const dx = event.clientX - x;
const dy = event.clientY - y;
x = event.clientX;
y = event.clientY;
node.dispatchEvent(new CustomEvent('panmove', {
detail: { x, y, dx, dy }
}));
}
function handleMouseup(event) {
x = event.clientX;
y = event.clientY;
node.dispatchEvent(new CustomEvent('panend', {
detail: { x, y }
}));
window.removeEventListener('mousemove', handleMousemove);
window.removeEventListener('mouseup', handleMouseup);
export function clickOutside(node) {
const handleClick = (event) => {
if (!node.contains(event.target)) {
node.dispatchEvent(new CustomEvent("outclick"));
}
};
node.addEventListener('mousedown', handleMousedown);
document.addEventListener("click", handleClick, true);
return {
destroy() {
node.removeEventListener('mousedown', handleMousedown);
}
document.removeEventListener("click", handleClick, true);
},
};
}
```
Update the `pannable` function and try moving the box around.
> This implementation is for demonstration purposes — a more complete one would also consider touch events.
Update the `clickOutside` function, click the button to show the modal and then click outside it to close it.

14
site/package-lock.json generated
Unescape View File

@ -23,7 +23,7 @@
"@sindresorhus/slugify": "^0.9.1",
"@sveltejs/adapter-node": "next",
"@sveltejs/kit": "next",
"@sveltejs/site-kit": "^1.4.0",
"@sveltejs/site-kit": "^1.4.1",
"@sveltejs/svelte-repl": "0.3.0",
"degit": "^2.1.4",
"dotenv": "^10.0.0",
@ -489,9 +489,9 @@
}
},
"node_modules/@sveltejs/site-kit": {
"version": "1.4.0",
"resolved": "https://registry.npmjs.org/@sveltejs/site-kit/-/site-kit-1.4.0.tgz",
"integrity": "sha512-QoIo8KC6G9gInwFyk4+KCzVOiLNdj2aw7T+wGDED+A/SuvICSCyS7W/Ft0WcoAGyQGtgIFRVCcXacubduzA7bg==",
"version": "1.4.1",
"resolved": "https://registry.npmjs.org/@sveltejs/site-kit/-/site-kit-1.4.1.tgz",
"integrity": "sha512-K2HplwTqWS5Jw38+GB1LwnojVfTJPxZ3d9FtjbjXoaJ8pCHTBJ+khAV8zeWLlOWkYpJuGD04EZTS87sW7mfVDA==",
"dev": true,
"dependencies": {
"@sindresorhus/slugify": "^0.9.1",
@ -2652,9 +2652,9 @@
}
},
"@sveltejs/site-kit": {
"version": "1.4.0",
"resolved": "https://registry.npmjs.org/@sveltejs/site-kit/-/site-kit-1.4.0.tgz",
"integrity": "sha512-QoIo8KC6G9gInwFyk4+KCzVOiLNdj2aw7T+wGDED+A/SuvICSCyS7W/Ft0WcoAGyQGtgIFRVCcXacubduzA7bg==",
"version": "1.4.1",
"resolved": "https://registry.npmjs.org/@sveltejs/site-kit/-/site-kit-1.4.1.tgz",
"integrity": "sha512-K2HplwTqWS5Jw38+GB1LwnojVfTJPxZ3d9FtjbjXoaJ8pCHTBJ+khAV8zeWLlOWkYpJuGD04EZTS87sW7mfVDA==",
"dev": true,
"requires": {
"@sindresorhus/slugify": "^0.9.1",

2
site/package.json
Unescape View File

@ -30,7 +30,7 @@
"@sindresorhus/slugify": "^0.9.1",
"@sveltejs/adapter-node": "next",
"@sveltejs/kit": "next",
"@sveltejs/site-kit": "^1.4.0",
"@sveltejs/site-kit": "^1.4.1",
"@sveltejs/svelte-repl": "0.3.0",
"degit": "^2.1.4",
"dotenv": "^10.0.0",

6
site/scripts/get_contributors.js
Unescape View File

@ -20,7 +20,8 @@ if (!force && fs.existsSync(outputFile)) {
const base = `https://api.github.com/repos/sveltejs/svelte/contributors`;
const { GITHUB_CLIENT_ID, GITHUB_CLIENT_SECRET } = process.env;
const SIZE = 64;
const MAX = 20;
const SIZE = 128;
async function main() {
const contributors = [];
@ -37,7 +38,8 @@ async function main() {
const authors = contributors
.filter(({ login }) => !login.includes('[bot]'))
.sort((a, b) => b.contributions - a.contributions);
.sort((a, b) => b.contributions - a.contributions)
.slice(0, MAX);
const sprite = new Jimp(SIZE * authors.length, SIZE);

10
site/scripts/get_donors.js
Unescape View File

@ -17,7 +17,8 @@ if (!force && fs.existsSync(outputFile)) {
process.exit(0);
}
const SIZE = 64;
const MAX = 20;
const SIZE = 128;
async function main() {
const res = await fetch('https://opencollective.com/svelte/members/all.json');
@ -28,12 +29,13 @@ async function main() {
let backers = [...unique.values()]
.filter(({ role }) => role === 'BACKER')
.sort((a, b) => b.totalAmountDonated - a.totalAmountDonated);
.sort((a, b) => b.totalAmountDonated - a.totalAmountDonated)
.slice(0, 3 * MAX);
const included = [];
for (let i = 0; i < backers.length; i += 1) {
for (let i = 0; included.length < MAX; i += 1) {
const backer = backers[i];
console.log(`${i} / ${backers.length}: ${backer.name}`);
console.log(`${included.length + 1} / ${MAX}: ${backer.name}`);
try {
const image_data = await fetch(backer.image);

2
site/src/routes/__error.svelte
Unescape View File

@ -68,7 +68,7 @@
<p>Please try reloading the page.</p>
{/if}
<p>If the error persists, please drop by <a href="chat">Discord chatroom</a> and let us know, or raise an issue on <a href="https://github.com/sveltejs/svelte">GitHub</a>. Thanks!</p>
<p>If the error persists, please drop by the <a rel="external" href="chat">Discord chatroom</a> and let us know, or raise an issue on <a href="https://github.com/sveltejs/svelte">GitHub</a>. Thanks!</p>
{/if}
{:else}
<h1>It looks like you're offline</h1>

18
site/src/routes/_components/Contributors.svelte
Unescape View File

@ -3,24 +3,32 @@
</script>
<style>
#contributors {
margin: 0.4em 0;
}
.contributor {
width: 2.4em;
height: 2.4em;
width: 4.2em;
height: 4.2em;
border-radius: 50%;
text-indent: -9999px;
display: inline-block;
background: no-repeat url(/contributors.jpg);
background-size: auto 102%;
margin: 0 0.5em 0.5em 0;
margin: 0 1.5em 1.5em 0;
border: 2px solid var(--second);
}
</style>
{#each contributors as contributor, i}
<div id="contributors">
{#each contributors as contributor, i}
<a
class="contributor"
style="background-position: {(100 * i) / (contributors.length - 1)}% 0"
href="https://github.com/{contributor}">
{contributor}
</a>
{/each}
{/each}
</div>
<p>And so <a href="https://github.com/sveltejs/svelte/graphs/contributors">many more →</a></p>

18
site/src/routes/_components/Donors.svelte
Unescape View File

@ -3,20 +3,25 @@
</script>
<style>
#donors {
margin: 0.4em 0;
}
.donor {
width: 2.4em;
height: 2.4em;
width: 4.2em;
height: 4.2em;
border-radius: 50%;
text-indent: -9999px;
display: inline-block;
background: no-repeat url(/donors.jpg);
background-size: auto 102%;
margin: 0 0.5em 0.5em 0;
margin: 0 1.5em 1.5em 0;
border: 2px solid var(--second);
}
</style>
{#each donors as donor, i}
<div id="donors">
{#each donors as donor, i}
<a
class="donor"
style="background-position: {(100 * i) / (donors.length - 1)}% 0"
@ -24,4 +29,7 @@
href="https://opencollective.com/svelte">
{donor}
</a>
{/each}
{/each}
</div>
<p>And so <a href="https://opencollective.com/svelte">many more →</a></p>

4
site/src/routes/index.svelte
Unescape View File

@ -120,13 +120,13 @@ npm run dev
<p>Svelte is free and open source software, made possible by the work of hundreds of volunteers and donors. <a href="https://github.com/sveltejs/svelte">Join us</a> or <a href="https://opencollective.com/svelte">give</a>!</p>
<h3>Contributors</h3>
<h4>Contributors</h4>
<Contributors/>
<p></p>
<h3>Donors</h3>
<h4>Donors</h4>
<Donors/>
</Section>

BIN
site/static/examples/thumbnails/actions-pannable.jpg
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.0 KiB

Write Preview
Loading…
Cancel
Save