Updated Core Concepts

netlify.toml

@@ -11,7 +11,11 @@
 
   [[redirects]]
     from = "/en/core-concepts/component-hydration"
-    to = "/en/core-concepts/partial-hydration"
+    to = "/en/concepts/islands"
+
+  [[redirects]]
+    from = "/en/core-concepts/partial-hydration"
+    to = "/en/concepts/islands"
 
   [[redirects]]
     from = "/en/guides/debugging"
@@ -29,3 +33,4 @@
     from = "/:lang/*"
     to = "/:lang/404/"
     status = 404
+

public/index.css

@@ -84,17 +84,6 @@ nav ul {
 	margin-top: 1.25rem;
 }
 
-.content > section > :is(ul, ol) > li > * + * {
-	margin-bottom: 1.25rem;
-}
-
-.content > section > :is(ul, ol) > li,
-.content > section > :is(ul, ol) > li > * + *,
-.content > section > :is(ul, ol) > li > :is(ul, ol) > li,
-.content > section > :is(ul, ol) > li > :is(ul, ol) > li > * + * {
-	margin-top: 0.5rem;
-}
-
 .content > section > :first-child {
 	margin-top: 0;
 }

scripts/lint-slugcheck.mjs

@@ -1,6 +1,15 @@
 import glob from 'fast-glob';
 import kleur from 'kleur';
 
+/** 
+ *  Ignore these slugs, usually because the page is deprecated in English
+ *  and no longer needs to be maintained. 
+ **/
+const IGNORE_SLUGS = [
+	// NOTE(fks, 07-11-2022): Migrated to "concepts/islands.md"
+	'core-concepts/partial-hydration.md'
+];
+
 /** Makes sure that all translations’ slugs match the English slugs. */
 class SlugChecker {
 	async run() {
@@ -10,7 +19,7 @@ class SlugChecker {
 
 	/** Load all Markdown pages and check non-English pages have counterparts in `pages/en/`. */
 	async #findMismatchedSlugs() {
-		const enSlugs = new Set();
+		const enSlugs = new Set(IGNORE_SLUGS);
 		/** @type {Record<string, string[]>} */
 		const errorMap = {};
 		(await glob('./src/pages/**/*.md'))
@@ -20,6 +29,7 @@ class SlugChecker {
 				return [lang, slug];
 			})
 			.forEach(([lang, slug]) => {
+				console.log(enSlugs);
 				if (enSlugs.has(slug)) return;
 				if (!errorMap[lang]) errorMap[lang] = [];
 				errorMap[lang].push(slug);

src/components/IslandsDiagram.astro

@@ -8,7 +8,6 @@ function slotDefault (slotName: string) {
 	<div class="sidebar app"><slot name="sidebarApp">{slotDefault('sidebarApp')}</slot></div>
 	<div class="main"><slot name="main">{slotDefault('main')}</slot></div>
 	<div class="carousel app"><slot name="carouselApp">{slotDefault('carouselApp')}</slot></div>
-	<div class="adv"><slot name="advertisement">{slotDefault('advertisement')}</slot></div>
 	<div class="footer"><slot name="footer">{slotDefault('footer')}</slot></div>
 </div>
 
@@ -19,7 +18,7 @@ function slotDefault (slotName: string) {
 			'header header header'
 			'sidebar main main'
 			'sidebar carousel carousel'
-			'adv footer footer';
+			'footer footer footer';
 		grid-gap: 0.75rem;
 		padding: 0.75rem;
 		background: var(--theme-bg);
@@ -47,12 +46,10 @@ function slotDefault (slotName: string) {
 	}
 	.diagram .sidebar {
 		grid-area: sidebar;
-		background: hsla(210, 90%, 50%, 0.2);
-		border-color: hsla(210, 60%, 35%, 0.8);
-		color: hsl(210, 60%, 35%);
 	}
 	.diagram .main {
 		grid-area: main;
+		height: 320px;
 	}
 	.diagram .carousel {
 		grid-area: carousel;

src/i18n/de/nav.ts

@@ -12,7 +12,6 @@ export default NavDictionary({
 
 	// Core Concepts
 	coreConcepts: 'Kernkonzepte',
-	'core-concepts/partial-hydration': 'Partielle Hydratation',
 
 	// Basics
 	basics: 'Grundlagen',

src/i18n/en/nav.ts

@@ -13,13 +13,11 @@ export default [
 	{ text: 'Installation', slug: 'install/auto', key: 'install' },
 	{ text: 'Editor Setup', slug: 'editor-setup', key: 'editor-setup' },
 	{ text: 'Migration Guide', slug: 'migrate', key: 'migrate' },
-	// REMOVE "Built with Astro": (Move into astro.build)
-	{ text: 'Built with Astro', slug: 'integrations/integrations', key: 'integrations/integrations' },
-	{ text: 'Astro vs. X', slug: 'comparing-astro-vs-other-tools', key: 'comparing-astro-vs-other-tools' },
 
 	{ text: 'Core Concepts', header: true, type: 'learn', key: 'coreConcepts' },
-	// ADD: Why Astro?
-	{ text: 'Partial Hydration', slug: 'core-concepts/partial-hydration', key: 'core-concepts/partial-hydration' },
+	{ text: 'Why Astro', slug: 'concepts/why-astro', key: 'concepts/why-astro' },
+	{ text: 'MPA vs. SPA', slug: 'concepts/mpa-vs-spa', key: 'concepts/mpa-vs-spa' },
+	{ text: 'Astro Islands', slug: 'concepts/islands', key: 'concepts/islands' },
 
 	{ text: 'Basics', header: true, type: 'learn', key: 'basics' },
 	{ text: 'Project Structure', slug: 'core-concepts/project-structure', key: 'core-concepts/project-structure' },
@@ -33,7 +31,7 @@ export default [
 	{ text: 'Deploy', slug: 'guides/deploy', key: 'guides/deploy' },
 
 
-	{ text: 'Features', header: true, type: 'learn', key: 'features' },
+	{ text: 'Guides', header: true, type: 'learn', key: 'features' },
 	{ text: 'Configuring Astro', slug: 'guides/configuring-astro', key: 'guides/configuring-astro' },
 	{ text: 'CSS & Styling', slug: 'guides/styling', key: 'guides/styling' },
 	{ text: 'Data Fetching', slug: 'guides/data-fetching', key: 'guides/data-fetching' },

src/i18n/es/nav.ts

@@ -13,7 +13,6 @@ export default NavDictionary({
 	'core-concepts/astro-pages': 'Páginas',
 	'core-concepts/project-structure': 'Estructura de proyecto',
 	'core-concepts/routing': 'Enrutamiento',
-	'core-concepts/partial-hydration': 'Hidratación parcial',
 	'core-concepts/framework-components': 'Componentes de framework',
 	'core-concepts/astro-components': 'Componentes',
 	'core-concepts/layouts': 'Plantillas de página',

src/i18n/fr/nav.ts

@@ -12,7 +12,6 @@ export default NavDictionary({
 
 	// Core Concepts
 	coreConcepts: 'Concepts Principaux',
-	'core-concepts/partial-hydration': 'Hydratation partielle',
 
 	// Basics
 	basics: 'Les Bases',

src/i18n/ja/nav.ts

@@ -11,7 +11,6 @@ export default NavDictionary({
 
 	// Core Concepts
 	coreConcepts: 'コアコンセプト',
-	'core-concepts/partial-hydration': 'パーシャルハイドレーション',
 
 	// Basics
 	basics: '基本',

src/i18n/pt-br/nav.ts

@@ -9,7 +9,6 @@ export default NavDictionary({
 	migrate: 'Guia de Migração',
 	'integrations/integrations': 'Feito com Astro',
 	coreConcepts: 'Principais Conceitos',
-	'core-concepts/partial-hydration': 'Hidratação Parcial',
 	basics: 'Fundamentos',
 	'core-concepts/project-structure': 'Estrutura de Projetos',
 	'core-concepts/astro-components': 'Componentes',

src/i18n/zh-cn/nav.ts

@@ -9,7 +9,6 @@ export default NavDictionary({
 	'integrations/integrations': '集成',
 	'comparing-astro-vs-other-tools': 'Astro 与其他工具比较',
 	'coreConcepts': '核心理念',
-	'core-concepts/partial-hydration': '极简耦合',
 	'basics': '基础内容',
 	'core-concepts/project-structure': '项目结构',
 	'core-concepts/astro-components': '组件',

src/pages/en/comparing-astro-vs-other-tools.md

@@ -11,7 +11,7 @@ This guide was written to help answer that question for several popular site bui
 
 Two key features make Astro different from most alternatives:
 
-- [Partial hydration](/en/core-concepts/partial-hydration/)
+- [Partial hydration](/en/concepts/islands/)
 - [Use your favorite framework(s)](/en/core-concepts/framework-components/)
 
 For more details, you can see our in-depth comparisons on this page.
@@ -26,7 +26,7 @@ Docusaurus was designed to build documentation websites and has some built-in, d
 
 #### Comparing Docusaurus vs. Astro Performance
 
-In most cases, Astro websites will load significantly faster than Docusaurus websites. This is because Astro automatically strips unnecessary JavaScript from the page, hydrating only the individual components that need it. This feature is called [partial hydration](/en/core-concepts/partial-hydration/).
+In most cases, Astro websites will load significantly faster than Docusaurus websites. This is because Astro automatically strips unnecessary JavaScript from the page, hydrating only the individual components that need it. This feature is called [partial hydration](/en/concepts/islands/).
 
 Docusaurus doesn't support partial hydration, and instead makes the user load and rehydrate the entire page in the browser, even if most of the page content is static. This creates a slower page load and worse performance for your website. There is no way to disable this behavior in Docusaurus.
 
@@ -45,7 +45,7 @@ Docusaurus doesn't support partial hydration, and instead makes the user load an
 
 Elder.js uses Svelte to render your website. Astro is more flexible: you are free to build UI with any popular component library (React, Preact, Vue, Svelte, Solid and others) or Astro’s HTML-like component syntax which is similar to HTML + JSX.
 
-Elder.js is unique on this list as the only other site builder to support [partial hydration](/en/core-concepts/partial-hydration/). Both Astro and Elder.js automatically strip unnecessary JavaScript from the page, hydrating only the individual components that need it. Elder’s API for partial hydration is a bit different and Astro supports a few features that Elder.js doesn't (like `client:media`). However performance-wise, both projects will build very similar sites.
+Elder.js is unique on this list as the only other site builder to support [partial hydration](/en/concepts/islands/). Both Astro and Elder.js automatically strip unnecessary JavaScript from the page, hydrating only the individual components that need it. Elder’s API for partial hydration is a bit different and Astro supports a few features that Elder.js doesn't (like `client:media`). However performance-wise, both projects will build very similar sites.
 
 Elder.js uses a custom routing solution that may feel unfamiliar to new developers. Astro uses [file-based routing](/en/core-concepts/routing/) which should feel familiar to anyone coming from Next.js, SvelteKit, and even other static site builders like Eleventy.
 
@@ -65,7 +65,7 @@ Conceptually, Eleventy is aligned with Astro’s "minimal client-side JavaScript
 
 Eleventy achieves this by pushing you to avoid JavaScript entirely. Eleventy sites are often written with little to no JavaScript at all. This becomes an issue when you do need client-side JavaScript. It is up to you to create your own asset build pipeline for Eleventy. This can be time consuming and forces you to set up bundling, minification, and other complex optimizations yourself.
 
-By contrast, Astro automatically builds your client-side JavaScript & CSS for you. Astro automatically strips unnecessary JavaScript from the page, hydrating only the individual components that need it. This feature is called [partial hydration](/en/core-concepts/partial-hydration/). While it is possible to achieve this yourself in Eleventy, Astro offers it built-in by default.
+By contrast, Astro automatically builds your client-side JavaScript & CSS for you. Astro automatically strips unnecessary JavaScript from the page, hydrating only the individual components that need it. This feature is called [partial hydration](/en/concepts/islands/). While it is possible to achieve this yourself in Eleventy, Astro offers it built-in by default.
 
 #### Case Study: Building a Documentation Website
 
@@ -86,7 +86,7 @@ Gatsby requires a custom GraphQL API for working with all of your site content.
 
 #### Comparing Gatsby vs. Astro Performance
 
-In most cases, Astro websites will load significantly faster than Gatsby websites. This is because Astro automatically strips unnecessary JavaScript from the page, hydrating only the individual components that need it. This feature is called [partial hydration](/en/core-concepts/partial-hydration/).
+In most cases, Astro websites will load significantly faster than Gatsby websites. This is because Astro automatically strips unnecessary JavaScript from the page, hydrating only the individual components that need it. This feature is called [partial hydration](/en/concepts/islands/).
 
 Gatsby doesn't support partial hydration, and instead makes the user load and rehydrate the entire page in the browser, even if most of the page content is static. This creates a slower page load and worse performance for your website. Gatsby has [a community plugin](https://www.gatsbyjs.com/plugins/gatsby-plugin-no-javascript/) for removing all JavaScript from the page, but this would break many websites. This leaves you with an all-or-nothing decision for interactivity on each page.
 
@@ -111,7 +111,7 @@ Hugo uses a custom [templating language](https://gohugo.io/templates/introductio
 
 Conceptually, Hugo is aligned with Astro’s "minimal client-side JavaScript" approach to web development. Hugo and Astro both offer similar, zero-JavaScript-by-default performance baselines.
 
-Both Hugo and Astro offers built-in support for building, bundling and minifying JavaScript. Astro automatically strips unnecessary JavaScript from the page, hydrating only the individual components that need it. This feature is called [partial hydration](/en/core-concepts/partial-hydration/). While it is possible to achieve this yourself in Hugo, Astro offers it built-in by default.
+Both Hugo and Astro offers built-in support for building, bundling and minifying JavaScript. Astro automatically strips unnecessary JavaScript from the page, hydrating only the individual components that need it. This feature is called [partial hydration](/en/concepts/islands/). While it is possible to achieve this yourself in Hugo, Astro offers it built-in by default.
 
 #### Case Study: Building a Documentation Website
 
@@ -154,7 +154,7 @@ SvelteKit supports both Static Site Generation (SSG) and Server-Side Rendering (
 
 #### Comparing SvelteKit vs. Astro Performance
 
-In most cases, Astro websites will load faster than SvelteKit websites. This is because Astro automatically strips unnecessary JavaScript from the page, hydrating only the individual components that need it. This feature is called [partial hydration](/en/core-concepts/partial-hydration/).
+In most cases, Astro websites will load faster than SvelteKit websites. This is because Astro automatically strips unnecessary JavaScript from the page, hydrating only the individual components that need it. This feature is called [partial hydration](/en/concepts/islands/).
 
 SvelteKit doesn't support partial hydration, and instead makes the user load and rehydrate the entire page in the browser, even if most of the page content is static. This creates a slower page load and worse performance for your website. SvelteKit does offer support for [page-level static, zero-JavaScript pages](https://kit.svelte.dev/docs#ssr-and-javascript-hydrate). However, there is no planned support for hydrating individual components on the page. This leaves you with an all-or-nothing decision for interactivity on each page.
 
@@ -181,7 +181,7 @@ Next.js supports both Static Site Generation (SSG) and Server-Side Rendering (SS
 
 #### Comparing Next.js vs. Astro Performance
 
-In most cases, Astro websites will load significantly faster than Next.js websites. This is because Astro automatically strips unnecessary JavaScript from the page, hydrating only the individual components that need it. This feature is called [partial hydration](/en/core-concepts/partial-hydration/).
+In most cases, Astro websites will load significantly faster than Next.js websites. This is because Astro automatically strips unnecessary JavaScript from the page, hydrating only the individual components that need it. This feature is called [partial hydration](/en/concepts/islands/).
 
 Next.js doesn't support partial hydration, and instead makes the user load and rehydrate the entire page in the browser, even if most of the page content is static. This creates a slower page load and worse performance for your website. Next.js has [experimental support](https://piccalil.li/blog/new-year-new-website/#heading-no-client-side-react-code) for fully-static, zero-JavaScript pages. However, there is no planned support for hydrating individual components on the page. This leaves you with an all-or-nothing decision for interactivity on each page.
 
@@ -208,7 +208,7 @@ Nuxt supports both Static Site Generation (SSG) and Server-Side Rendering (SSR).
 
 #### Comparing Nuxt vs. Astro Performance
 
-In most cases, Astro websites will load significantly faster than Nuxt websites. This is because Astro automatically strips unnecessary JavaScript from the page, hydrating only the individual components that need it. This feature is called [partial hydration](/en/core-concepts/partial-hydration/).
+In most cases, Astro websites will load significantly faster than Nuxt websites. This is because Astro automatically strips unnecessary JavaScript from the page, hydrating only the individual components that need it. This feature is called [partial hydration](/en/concepts/islands/).
 
 Nuxt doesn't support partial hydration, and instead makes the user load and rehydrate the entire page in the browser, even if most of the page content is static. This creates a slower page load and worse performance for your website. There is no way to disable this behavior in Nuxt.
 
@@ -248,7 +248,7 @@ Evan You (creator of Vue.js) is currently working on a new version of Vuepress c
 
 #### Comparing VuePress vs. Astro Performance
 
-In most cases, Astro websites will load significantly faster than VuePress websites. This is because Astro automatically strips unnecessary JavaScript from the page, hydrating only the individual components that need it. This feature is called [partial hydration](/en/core-concepts/partial-hydration/).
+In most cases, Astro websites will load significantly faster than VuePress websites. This is because Astro automatically strips unnecessary JavaScript from the page, hydrating only the individual components that need it. This feature is called [partial hydration](/en/concepts/islands/).
 
 VuePress doesn't support partial hydration, and instead makes the user load and rehydrate the entire page in the browser, even if most of the page content is static. This creates a slower page load and worse performance for your website. There is no way to disable this behavior in VuePress.
 
@@ -271,7 +271,7 @@ Zola uses [Tera](https://tera.netlify.app/) to render your website. Astro lets y
 
 Conceptually, Zola is aligned with Astro’s "minimal client-side JavaScript" approach to web development. Zola and Astro both offer similar, zero-JavaScript-by-default performance baselines.
 
-Astro offers built-in support for building, bundling and minifying JavaScript. Zola requires using another build tool like Webpack to bundle and process JavaScript. Astro automatically strips unnecessary JavaScript from the page, hydrating only the individual components that need it. This feature is called [partial hydration](/en/core-concepts/partial-hydration/). While it is possible to achieve this yourself in Zola, Astro offers it built-in by default.
+Astro offers built-in support for building, bundling and minifying JavaScript. Zola requires using another build tool like Webpack to bundle and process JavaScript. Astro automatically strips unnecessary JavaScript from the page, hydrating only the individual components that need it. This feature is called [partial hydration](/en/concepts/islands/). While it is possible to achieve this yourself in Zola, Astro offers it built-in by default.
 
 #### Case Study: Building a Documentation Website