1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
|
---
import BaseHead from '../components/BaseHead.astro';
import Space from '../components/Space.astro';
import Main from '../components/Main.astro';
import Logo from '../components/Logo.astro';
import Article from '../components/Article.astro';
import Tagline from '../components/Tagline.astro';
import MainHeader from '../components/MainHeader.astro';
import YouTube from '../components/YouTube.astro';
import "../components/YouTube.css";
let title = 'Astro';
let description = 'Build faster websites with less client-side JavaScript';
let permalink = 'https://astro.build/';
let lang = 'en';
---
<html lang={ lang ?? 'en' }>
<head>
<BaseHead title={title} description={description} permalink={permalink} />
<link rel="stylesheet" href={Astro.resolve('../scss/global.css')} />
</head>
<body>
<Space />
<Main>
<MainHeader />
<Article>
<YouTube v="dsTXcSeAZq8" alt="Astro in 100 Seconds" />
<Tagline />
<p>
For a technology built on top of three different languages, the modern web seems to focus an awful lot on JavaScript. We don’t think it has to—and that’s certainly <a href="https://css-tricks.com/the-great-divide/">not</a> <a href="https://bradfrost.com/blog/post/front-of-the-front-end-and-back-of-the-front-end-web-development/">a</a> <a href="https://macwright.com/2020/05/10/spa-fatigue.html">revolutionary</a> <a href="https://css-tricks.com/whats-old-is-new/">concept</a>.
</p>
<p>
We’ll eagerly jump at the chance to sing JavaScript’s praises, but HTML and CSS are pretty great too. There aren’t enough modern tools which reflect that, which is why we're building Astro.
</p>
<p>
While we’re at it, it’s time to accept that the framework wars won’t have a winner—that’s why Astro lets you use any framework you want (or none at all).
And if most sites only have <a href="https://jasonformat.com/islands-architecture/">islands</a> of interactivity, shouldn’t our tools optimize for that?
We’re not <a href="https://markojs.com/">the first</a> to ask the question, but we might be the first with an answer for every framework.
</p>
<p>We're hard at work on Astro! Keep your eyes to the skies, astronauts.</p>
<br/>
<a class="action-button" href="/blog/astro-019">
New Blog Post - Astro 0.19 Release
<span style="float: right;">→</span>
</a>
<div class="hint">
<p>Psst... <a href="https://astro.build/chat">get early access to new features</a> by joining our Discord community.</p>
</div>
</Article>
</Main>
<style lang="scss">
.hint {
font-size: 13px;
opacity: 0.8;
margin-top: 2em;
padding: 2em 0;
}
.hint > p:first-child {
margin-bottom: 2em;
}
.action-button {
border: 1px solid var(--color-green);
padding: 1rem;
font-weight: 600;
}
code {
font-size: 11px;
font-family: var(--font-mono);
border: 1px solid rgba(255, 255, 255, 0.4);
border-radius: 2px;
padding: 0.1em 0.2em;
}
.videoWrapper {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
height: 0;
background:rgba(255, 255, 255, 0.1);
margin-bottom: 1rem;
}
.videoWrapper > iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>
<script>
console.log('%cGet early Astro access 👉 https://astro.build/chat', "color:#17c083; font-size: 1.2em; padding: 1em;");
</script>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-130280175-15"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-130280175-15');
</script>
</body>
</html>
|
