REPL blog post (#1385)
* REPL blog post * some edits * some edits Co-authored-by: Fred K. Schott <fkschott@gmail.com>
This commit is contained in:
Drew Powers
GitHub
parent
2f64c3a9cd
commit
6a541fd991
8 changed files with 74 additions and 17 deletions
BIN
www/public/assets/blog/astro-repl/astro-repl-hero.jpg
Normal file
BIN
www/public/assets/blog/astro-repl/astro-repl-hero.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 237 KiB |
BIN
www/public/assets/blog/astro-repl/astro-repl.png
Normal file
BIN
www/public/assets/blog/astro-repl/astro-repl.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 34 KiB |
BIN
www/public/assets/blog/astro-repl/compiler.jpg
Normal file
BIN
www/public/assets/blog/astro-repl/compiler.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 83 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 270 KiB After Width: | Height: | Size: 125 KiB |
|
|
@ -13,8 +13,7 @@ const { title, author, publishDate, heroImage } = Astro.props;
|
|||
---
|
||||
|
||||
<div class="layout">
|
||||
<article class="content">
|
||||
<div>
|
||||
<article>
|
||||
<header>
|
||||
{heroImage && <img width="720" height="420" class="hero-image" loading="lazy" src={heroImage} />}
|
||||
<p class="publish-date">{publishDate}</p>
|
||||
|
|
@ -22,13 +21,13 @@ const { title, author, publishDate, heroImage } = Astro.props;
|
|||
{author && <Author authorId={author} />}
|
||||
<GithubStarButton />
|
||||
</header>
|
||||
<main>
|
||||
<main class="content">
|
||||
<slot />
|
||||
</main>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
<style lang="scss">
|
||||
.hero-image {
|
||||
width: 100vw;
|
||||
object-fit: cover;
|
||||
|
|
@ -36,26 +35,44 @@ const { title, author, publishDate, heroImage } = Astro.props;
|
|||
margin-top: 2rem;
|
||||
margin-bottom: 4rem;
|
||||
max-width: 1280px;
|
||||
}
|
||||
|
||||
@media (max-width: 50em) {
|
||||
.hero-image {
|
||||
@media (max-width: 50em) {
|
||||
height: 260px;
|
||||
margin-top: 0;
|
||||
margin-bottom: 2rem;
|
||||
margin-top: 0;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
margin-bottom: 8rem;
|
||||
}
|
||||
|
||||
.content :global(main > * + *) {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
:global(> * + *) {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.content :global(h2) {
|
||||
margin-top: 4rem;
|
||||
:global(h2) {
|
||||
margin-top: 4rem;
|
||||
}
|
||||
|
||||
:global(img) {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
:global(figure) {
|
||||
background-color: var(--theme-bg-accent);
|
||||
margin: 2.5rem 0;
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
// hack until <figcaption> parsing fixed
|
||||
:global(figcaption *) {
|
||||
display: inline;
|
||||
|
||||
& + :global(*) {
|
||||
margin-left: 0.3em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
header {
|
||||
|
|
|
|||
|
|
@ -1,4 +1,8 @@
|
|||
{
|
||||
"drew": {
|
||||
"name": "Drew Powers",
|
||||
"twitter": "drwpow"
|
||||
},
|
||||
"fred": {
|
||||
"name": "Fred K. Schott",
|
||||
"twitter": "FredKSchott"
|
||||
|
|
@ -6,5 +10,9 @@
|
|||
"matthew": {
|
||||
"name": "Matthew Phillips",
|
||||
"twitter": "matthewcp"
|
||||
},
|
||||
"nate": {
|
||||
"name": "Nate Moore",
|
||||
"twitter": "n_moore"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
32
www/src/pages/blog/astro-repl.astro
Normal file
32
www/src/pages/blog/astro-repl.astro
Normal file
|
|
@ -0,0 +1,32 @@
|
|||
---
|
||||
import { Markdown } from 'astro/components';
|
||||
import BaseHead from '../../components/BaseHead.astro';
|
||||
import BlogHeader from '../../components/BlogHeader.astro';
|
||||
import BlogPost from '../../components/BlogPost.astro';
|
||||
|
||||
let title = 'Introducing the Astro REPL';
|
||||
let description = 'The power of Astro, right in your browser.';
|
||||
let publishDate = 'September 17, 2021';
|
||||
let permalink = 'https://astro.build/blog/astro-repl/astro-repl.png';
|
||||
let lang = 'en';
|
||||
---
|
||||
|
||||
<html lang={ lang ?? 'en' }>
|
||||
<head>
|
||||
<BaseHead title={title} description={description} permalink={permalink} />
|
||||
<link rel="stylesheet" href={Astro.resolve('../../scss/blog.css')} />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<BlogHeader />
|
||||
<BlogPost title={title} author="drew" heroImage="/assets/blog/astro-repl/astro-repl-hero.jpg" publishDate={publishDate}>
|
||||
<Markdown>
|
||||
The Astro team proudly presents the new Astro REPL: compile Astro right in your browser. Use it to explore Astro's HTML-based component language, debug issues, or even prototype an entire webpage. It's all powered by Astro’s new WASM compiler (written in Go) that can rebuild any Astro file in an instant.
|
||||
|
||||
Try out the new Astro REPL today at [astro.build/play](https://astro.build/play).
|
||||
|
||||
[Join us on Discord](https://astro.build/chat) and tune in for [Astro Demo Days](https://www.youtube.com/watch?v=-ExcBJrXOd8) (next Monday, September 20, 2021 at 11am PST) to learn more about our new compiler.
|
||||
</Markdown>
|
||||
</BlogPost>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -51,8 +51,8 @@ let lang = 'en';
|
|||
|
||||
<br/>
|
||||
|
||||
<a class="action-button" href="/blog/astro-019">
|
||||
New Blog Post - Astro 0.19 Release
|
||||
<a class="action-button" href="/blog/astro-repl">
|
||||
New Blog Post - Introducing the Astro REPL
|
||||
<span style="float: right;">→</span>
|
||||
</a>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue