diff --git a/www/public/assets/blog/astro-018/lit-element.jpeg b/www/public/assets/blog/astro-018/lit-element.jpeg
new file mode 100644
index 000000000..adcfac6bd
Binary files /dev/null and b/www/public/assets/blog/astro-018/lit-element.jpeg differ
diff --git a/www/public/assets/blog/astro-018/lit-logo.svg b/www/public/assets/blog/astro-018/lit-logo.svg
new file mode 100644
index 000000000..a09b15cdf
--- /dev/null
+++ b/www/public/assets/blog/astro-018/lit-logo.svg
@@ -0,0 +1,18 @@
+
diff --git a/www/public/assets/blog/astro-018/named-slots.png b/www/public/assets/blog/astro-018/named-slots.png
new file mode 100644
index 000000000..01c805261
Binary files /dev/null and b/www/public/assets/blog/astro-018/named-slots.png differ
diff --git a/www/public/assets/blog/astro-018/responsive-hydration.jpg b/www/public/assets/blog/astro-018/responsive-hydration.jpg
new file mode 100644
index 000000000..ee98e769c
Binary files /dev/null and b/www/public/assets/blog/astro-018/responsive-hydration.jpg differ
diff --git a/www/public/assets/blog/astro-018/solid-logo-dark.svg b/www/public/assets/blog/astro-018/solid-logo-dark.svg
new file mode 100644
index 000000000..5917b2292
--- /dev/null
+++ b/www/public/assets/blog/astro-018/solid-logo-dark.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/www/public/blog.scss b/www/public/blog.scss
index f74c02692..3be4f48ec 100644
--- a/www/public/blog.scss
+++ b/www/public/blog.scss
@@ -1,3 +1,5 @@
+@use './code.scss';
+
:root {
--font-fallback: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;
--font-body: 'IBM Plex Sans', var(--font-fallback);
@@ -168,7 +170,6 @@ small,
a {
color: var(--theme-accent);
- font-weight: 400;
text-underline-offset: 0.08em;
text-decoration: none;
align-items: center;
diff --git a/www/public/code.scss b/www/public/code.scss
new file mode 100644
index 000000000..ec735a676
--- /dev/null
+++ b/www/public/code.scss
@@ -0,0 +1,155 @@
+.language-css > code,
+.language-sass > code,
+.language-scss > code {
+ color: #fd9170;
+}
+
+[class*='language-'] .namespace {
+ opacity: 0.7;
+}
+
+.token.atrule {
+ color: #c792ea;
+}
+
+.token.attr-name {
+ color: #ffcb6b;
+}
+
+.token.attr-value {
+ color: #a5e844;
+}
+
+.token.attribute {
+ color: #a5e844;
+}
+
+.token.boolean {
+ color: #c792ea;
+}
+
+.token.builtin {
+ color: #ffcb6b;
+}
+
+.token.cdata {
+ color: #80cbc4;
+}
+
+.token.char {
+ color: #80cbc4;
+}
+
+.token.class {
+ color: #ffcb6b;
+}
+
+.token.class-name {
+ color: #f2ff00;
+}
+
+.token.comment {
+ color: #616161;
+}
+
+.token.constant {
+ color: #c792ea;
+}
+
+.token.deleted {
+ color: #ff6666;
+}
+
+.token.doctype {
+ color: #616161;
+}
+
+.token.entity {
+ color: #ff6666;
+}
+
+.token.function {
+ color: #c792ea;
+}
+
+.token.hexcode {
+ color: #f2ff00;
+}
+
+.token.id {
+ color: #c792ea;
+ font-weight: bold;
+}
+
+.token.important {
+ color: #c792ea;
+ font-weight: bold;
+}
+
+.token.inserted {
+ color: #80cbc4;
+}
+
+.token.keyword {
+ color: #c792ea;
+}
+
+.token.number {
+ color: #fd9170;
+}
+
+.token.operator {
+ color: #89ddff;
+}
+
+.token.prolog {
+ color: #616161;
+}
+
+.token.property {
+ color: #80cbc4;
+}
+
+.token.pseudo-class {
+ color: #a5e844;
+}
+
+.token.pseudo-element {
+ color: #a5e844;
+}
+
+.token.punctuation {
+ color: #89ddff;
+}
+
+.token.regex {
+ color: #f2ff00;
+}
+
+.token.selector {
+ color: #ff6666;
+}
+
+.token.string {
+ color: #a5e844;
+}
+
+.token.symbol {
+ color: #c792ea;
+}
+
+.token.tag {
+ color: #ff6666;
+}
+
+.token.unit {
+ color: #fd9170;
+}
+
+.token.url {
+ color: #ff6666;
+}
+
+.token.variable {
+ color: #ff6666;
+}
diff --git a/www/src/components/BlogHead.astro b/www/src/components/BlogHead.astro
new file mode 100644
index 000000000..866929725
--- /dev/null
+++ b/www/src/components/BlogHead.astro
@@ -0,0 +1,7 @@
+---
+import BaseHead from './BaseHead.astro';
+
+const { title, description, permalink } = Astro.props;
+---
+
+
\ No newline at end of file
diff --git a/www/src/components/GoogleAnalytics.astro b/www/src/components/GoogleAnalytics.astro
new file mode 100644
index 000000000..bdc8fedda
--- /dev/null
+++ b/www/src/components/GoogleAnalytics.astro
@@ -0,0 +1,9 @@
+
+
+
\ No newline at end of file
diff --git a/www/src/config.ts b/www/src/config.ts
index 6b6ce3fdc..32fafac7a 100644
--- a/www/src/config.ts
+++ b/www/src/config.ts
@@ -7,3 +7,8 @@ export const sidebar = [
],
},
];
+
+export const mediaQueries = {
+ mobile: '(max-width: 600px)',
+ desktop: '(min-width: 601px)'
+}
\ No newline at end of file
diff --git a/www/src/data/authors.json b/www/src/data/authors.json
index 958d9effd..20e7f74ba 100644
--- a/www/src/data/authors.json
+++ b/www/src/data/authors.json
@@ -2,5 +2,9 @@
"fred": {
"name": "Fred K. Schott",
"twitter": "FredKSchott"
+ },
+ "matthew": {
+ "name": "Matthew Phillips",
+ "twitter": "matthewcp"
}
}
diff --git a/www/src/pages/blog/astro-018.astro b/www/src/pages/blog/astro-018.astro
new file mode 100644
index 000000000..5d5943dd7
--- /dev/null
+++ b/www/src/pages/blog/astro-018.astro
@@ -0,0 +1,105 @@
+---
+import { Markdown, Prism } from 'astro/components';
+import BlogHead from '../../components/BlogHead.astro';
+import BlogHeader from '../../components/BlogHeader.astro';
+import BlogPost from '../../components/BlogPost.astro';
+import BlockQuote from '../../components/BlockQuote.astro';
+import GoogleAnalytics from '../../components/GoogleAnalytics.astro';
+import Note from '../../components/Note.astro';
+import Shell from '../../components/Shell.astro';
+import { mediaQueries } from '../../config.js';
+
+let title = 'Astro 0.18 Release';
+let description = `Astro 0.18 is our biggest release since Astro launch. It includes a new responsive hydrator, named slots, global stylesheets, and two new renderers. Ready on to learn more on this release.`;
+let publishDate = 'Tuesday, July 27 2021';
+let author = 'matthew';
+let heroImage = '/social.jpg';
+let permalink = 'https://astro.build/blog/astro-0-18';
+let lang = 'en';
+---
+
+
+
+
+
+
+
+
+
+
+
+ A little over a month ago, the first public beta for Astro was released to the world. Since then, we have been fixing bugs and gathering your feedback on what to tackle next. Today, we are excited to announce the release of some of our most requested features.
+
+ We are excited to introduce Astro v0.18, featuring:
+
+ * __[Responsive partial hydration:](#responsive-component-hydration)__ Hydrate components with CSS media queries.
+ * __[Named slots:](#named-slots)__ Support multiple content entrypoints inside of Astro components.
+ * __[Solid.js support:](#solid-support)__ Use [Solid.js](https://www.solidjs.com/) components in Astro.
+ * __[Lit support:](#solid-support)__ Use [Lit SSR](https://lit.dev/) to get server-side rendering for web components.
+ * [`