From f6439113329db2875b07724b1c1ab0faaa7f93e6 Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Thu, 20 Dec 2018 23:15:27 -0500 Subject: [PATCH] front page stuff --- site/src/routes/index.html | 180 ++++++++++++++----------------------- site/src/template.html | 2 +- site/static/global.css | 1 - 3 files changed, 69 insertions(+), 114 deletions(-) diff --git a/site/src/routes/index.html b/site/src/routes/index.html index 8ec6287e32..26e1886f78 100644 --- a/site/src/routes/index.html +++ b/site/src/routes/index.html @@ -2,110 +2,70 @@ import Icon from '../components/icon.html'; import Logo from '../components/logo.html'; import Iso from '../components/isometry.html'; + + let sy = 0; Svelte • The magical disappearing UI framework + +
- + - - - - +

What if web apps could write themselves?

+

Svelte

-
+
  • - -

    Solved: The web's JavaScript bloat crisis

    -

    Svelte turns your templates into tiny, framework-less vanilla JavaScript

    +

    Write less code

    +

    Write boilerplate-free components using languages you already know — HTML, CSS and JavaScript

    + + learn more
    • +
  • - -

    Simple and familiar

    -

    Build apps out of composable, easy-to-write blocks using languages you already know

    +

    No virtual DOM overhead

    +

    Svelte compiles your code to tiny, framework-less vanilla JS — your app starts fast and stays fast

    + + learn more
    • +
  • - -

    Super fast, rock solid

    -

    Compile-time static analysis ensures the browser does no more work than it needs to

    -
    • -
-
+

Truly reactive

+

No more complex state management libraries — Svelte brings reactivity to JavaScript itself

-
-
    -
  • -

    The why-headline here

    -

    Copyplat – We captured the WHAT? above. Why another framework. Some facts, the reasons behind. Why is svelte better. OK, we link to @Richs post on this for more Details, but here we extract it in three sentences and some illustrations or charts.

    -
    • -
  • - - - -

    – fig 1 –
    informative grafics here

    + learn more
-
NOTE
I didn't spend much time on contents or the right Illustrations here. Let's - discuss look'n'feel first.
-
-
    -
  • - - - -

    – fig 2 –
    informative grafics here

    -
    • -
  • -

    The how-headline here

    -

    - Copyplat – How did svelte accomplish this? Why better than others? - Blindtext. Fera voluptatis debitis aut laut harum sitiandus. Ant labo. Nequod modisquia illabo. Nametur sequis ut - entiberibeat facerfe rovitatemqui beatis minvenis consequi quid quo et. -

    -
    • -
-
+
+
+

Svelte is a radical new approach to building user interfaces. Whereas traditional frameworks like React and Vue do the bulk of their work in the browser, Svelte shifts that work into a compile step that happens when you build your app.

-
-
    -
  • -

    The benefits-headline here

    -

    - Copyplat – Blindtext. Fera voluptatis debitis aut laut harum sitiandus. Ant labo. Nequod modisquia illabo. Nametur sequis ut entiberibeat facerfe rovitatemqui beatis minvenis consequi quid quo et. -

    -
    • -
  • - - - -

    – fig 3 –
    informative grafics here

    -
    • -
+

Instead of using techniques like virtual DOM diffing, Svelte writes code that surgically updates the DOM when the state of your app changes.

+
+ +
+

TODO a video intro

+
-
- - - +
+

TODO finish building this page. Ideas: Who's using Svelte? Example code (interactive, ideally). What else?

+ + \ No newline at end of file diff --git a/site/src/template.html b/site/src/template.html index 2e68c15b2c..c7dafc73dc 100644 --- a/site/src/template.html +++ b/site/src/template.html @@ -12,7 +12,7 @@ - +