Local metadata link commit at 2025-06-06 15:40:57 — file:///home/mrhavens/git-local-repos/git-sigil.git
This commit is contained in:
commit
b548318725
134 changed files with 15789 additions and 0 deletions
65
src/content/blog/introducing-astro-2.mdx
Normal file
65
src/content/blog/introducing-astro-2.mdx
Normal file
|
@ -0,0 +1,65 @@
|
|||
---
|
||||
title: Astro 2.0 - 100% Type-safe MD and MDX Experience
|
||||
description: There's a simple secret to building a faster website — just ship less.
|
||||
tags:
|
||||
- astro
|
||||
- jam-stack
|
||||
- srr
|
||||
author: Fred K Schott
|
||||
authorTwitter: FredKSchott
|
||||
date: "2023-01-25T10:23:31.210Z"
|
||||
image: https://astro.build/_astro/cover_Z1RYPju.webp
|
||||
category: design
|
||||
---
|
||||
|
||||
Unfortunately, modern web development has been trending in the opposite direction—towards more. More JavaScript, more features, more moving parts, and ultimately more complexity needed to keep it all running smoothly.
|
||||
|
||||
Today I'm excited to publicly share Astro: a new kind of static site builder that delivers lightning-fast performance with a modern developer experience. To design Astro, we borrowed the best parts of our favorite tools and then added a few innovations of our own, including:
|
||||
|
||||
- Bring Your Own Framework (BYOF): Build your site using React, Svelte, Vue, Preact, web components, or just plain ol' HTML + JavaScript.
|
||||
- 100% Static HTML, No JS: Astro renders your entire page to static HTML, removing all JavaScript from your final build by default.
|
||||
- On-Demand Components: Need some JS? Astro can automatically hydrate interactive components when they become visible on the page. If the user never sees it, they never load it.
|
||||
- Fully-Featured: Astro supports TypeScript, Scoped CSS, CSS Modules, Sass, Tailwind, Markdown, MDX, and any of your favorite npm packages.
|
||||
- SEO Enabled: Automatic sitemaps, RSS feeds, pagination and collections take the pain out of SEO and syndication.
|
||||
|
||||
## H1 is good
|
||||
|
||||
### H2 is good too
|
||||
|
||||
> links are better
|
||||
|
||||
[I know](they-are-better)
|
||||
|
||||
This post marks the first public beta release of Astro. Missing features and bugs are still to be expected at this early stage. There are still some months to go before an official 1.0 release, but there are already several fast sites built with Astro in production today. We would love your early feedback as we move towards a v1.0 release later this year.
|
||||
|
||||
> To learn more about Astro and start building your first site, check out the project README.
|
||||
|
||||
# Example - Syntax Highlighting
|
||||
|
||||
## Shell(Bash)
|
||||
|
||||
```bash
|
||||
# make a new project directory and jump into it
|
||||
mkdir my-astro-project && cd $_
|
||||
|
||||
# create a new project with npm
|
||||
npm create astro@latest
|
||||
|
||||
# or yarn
|
||||
yarn create astro
|
||||
|
||||
# or pnpm
|
||||
pnpm create astro@latest
|
||||
```
|
||||
|
||||
## Python
|
||||
|
||||
```python
|
||||
print('hello world')
|
||||
```
|
||||
|
||||
## Javascript
|
||||
|
||||
```js
|
||||
const func = () => {alert("hello")}
|
||||
```
|
64
src/content/blog/introducing-astro-ship-less-javascript.mdx
Normal file
64
src/content/blog/introducing-astro-ship-less-javascript.mdx
Normal file
|
@ -0,0 +1,64 @@
|
|||
---
|
||||
title: Introducing Astro - Ship Less JavaScript
|
||||
description: There's a simple secret to building a faster website — just ship less.
|
||||
tags:
|
||||
- astro
|
||||
- jam-stack
|
||||
author: Fred K. Schott
|
||||
authorTwitter: FredKSchott
|
||||
date: "2022-09-18T13:10:23.402Z"
|
||||
image: https://images.unsplash.com/photo-1589409514187-c21d14df0d04?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1650&q=80
|
||||
category: design
|
||||
---
|
||||
|
||||
Unfortunately, modern web development has been trending in the opposite direction—towards more. More JavaScript, more features, more moving parts, and ultimately more complexity needed to keep it all running smoothly.
|
||||
|
||||
Today I'm excited to publicly share Astro: a new kind of static site builder that delivers lightning-fast performance with a modern developer experience. To design Astro, we borrowed the best parts of our favorite tools and then added a few innovations of our own, including:
|
||||
|
||||
- Bring Your Own Framework (BYOF): Build your site using React, Svelte, Vue, Preact, web components, or just plain ol' HTML + JavaScript.
|
||||
- 100% Static HTML, No JS: Astro renders your entire page to static HTML, removing all JavaScript from your final build by default.
|
||||
- On-Demand Components: Need some JS? Astro can automatically hydrate interactive components when they become visible on the page. If the user never sees it, they never load it.
|
||||
- Fully-Featured: Astro supports TypeScript, Scoped CSS, CSS Modules, Sass, Tailwind, Markdown, MDX, and any of your favorite npm packages.
|
||||
- SEO Enabled: Automatic sitemaps, RSS feeds, pagination and collections take the pain out of SEO and syndication.
|
||||
|
||||
## H1 is good
|
||||
|
||||
### H2 is good too
|
||||
|
||||
> links are better
|
||||
|
||||
[I know](they-are-better)
|
||||
|
||||
This post marks the first public beta release of Astro. Missing features and bugs are still to be expected at this early stage. There are still some months to go before an official 1.0 release, but there are already several fast sites built with Astro in production today. We would love your early feedback as we move towards a v1.0 release later this year.
|
||||
|
||||
> To learn more about Astro and start building your first site, check out the project README.
|
||||
|
||||
# Example - Syntax Highlighting
|
||||
|
||||
## Shell(Bash)
|
||||
|
||||
```bash
|
||||
# make a new project directory and jump into it
|
||||
mkdir my-astro-project && cd $_
|
||||
|
||||
# create a new project with npm
|
||||
npm create astro@latest
|
||||
|
||||
# or yarn
|
||||
yarn create astro
|
||||
|
||||
# or pnpm
|
||||
pnpm create astro@latest
|
||||
```
|
||||
|
||||
## Python
|
||||
|
||||
```python
|
||||
print('hello world')
|
||||
```
|
||||
|
||||
## Javascript
|
||||
|
||||
```js
|
||||
const func = () => {alert("hello")}
|
||||
```
|
35
src/content/blog/introducing-astro.mdx
Normal file
35
src/content/blog/introducing-astro.mdx
Normal file
|
@ -0,0 +1,35 @@
|
|||
---
|
||||
title: Introducing Astro - Ship Less JavaScript
|
||||
date: "2021-06-08"
|
||||
image: https://images.unsplash.com/photo-1589409514187-c21d14df0d04?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1650&q=80
|
||||
author: Fred K. Schott
|
||||
authorTwitter: FredKSchott
|
||||
authorImage: https://pbs.twimg.com/profile_images/1272979356529221632/sxvncugt_400x400.jpg
|
||||
category: design
|
||||
tags:
|
||||
- astro
|
||||
- jam-stack
|
||||
description: There's a simple secret to building a faster website — just ship less.
|
||||
---
|
||||
|
||||
Unfortunately, modern web development has been trending in the opposite direction—towards more. More JavaScript, more features, more moving parts, and ultimately more complexity needed to keep it all running smoothly.
|
||||
|
||||
Today I'm excited to publicly share Astro: a new kind of static site builder that delivers lightning-fast performance with a modern developer experience. To design Astro, we borrowed the best parts of our favorite tools and then added a few innovations of our own, including:
|
||||
|
||||
- Bring Your Own Framework (BYOF): Build your site using React, Svelte, Vue, Preact, web components, or just plain ol' HTML + JavaScript.
|
||||
- 100% Static HTML, No JS: Astro renders your entire page to static HTML, removing all JavaScript from your final build by default.
|
||||
- On-Demand Components: Need some JS? Astro can automatically hydrate interactive components when they become visible on the page. If the user never sees it, they never load it.
|
||||
- Fully-Featured: Astro supports TypeScript, Scoped CSS, CSS Modules, Sass, Tailwind, Markdown, MDX, and any of your favorite npm packages.
|
||||
- SEO Enabled: Automatic sitemaps, RSS feeds, pagination and collections take the pain out of SEO and syndication.
|
||||
|
||||
## H1 is good
|
||||
|
||||
### H2 is good too
|
||||
|
||||
> links are better
|
||||
|
||||
[I know](they-are-better)
|
||||
|
||||
This post marks the first public beta release of Astro. Missing features and bugs are still to be expected at this early stage. There are still some months to go before an official 1.0 release, but there are already several fast sites built with Astro in production today. We would love your early feedback as we move towards a v1.0 release later this year.
|
||||
|
||||
> To learn more about Astro and start building your first site, check out the project README.
|
15
src/content/blog/islands-architecture.mdx
Normal file
15
src/content/blog/islands-architecture.mdx
Normal file
|
@ -0,0 +1,15 @@
|
|||
---
|
||||
title: Islands Architecture
|
||||
date: "2021-05-08"
|
||||
image: https://images.unsplash.com/photo-1502085671122-2d218cd434e6?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1698&q=80
|
||||
author: Jason Miller
|
||||
authorTwitter: _developit
|
||||
category: development
|
||||
tags:
|
||||
- astro
|
||||
- jam-stack
|
||||
- architecture
|
||||
- front-end
|
||||
description: Render HTML pages on the server, and inject placeholders or slots around highly dynamic regions.
|
||||
---
|
||||
https://jasonformat.com/islands-architecture/
|
97
src/content/blog/markdoc-integration.mdoc
Normal file
97
src/content/blog/markdoc-integration.mdoc
Normal file
|
@ -0,0 +1,97 @@
|
|||
---
|
||||
title: Markdoc integration for Astro Ink
|
||||
date: "2023-03-08"
|
||||
image: https://user-images.githubusercontent.com/62121649/167893184-a2b69260-ca9e-4a77-a5bc-63b8135ae5db.png
|
||||
author: Aftab Alam
|
||||
authorTwitter: aftabbuddy
|
||||
category: design
|
||||
tags:
|
||||
- architecture
|
||||
- front-end
|
||||
- spa
|
||||
description: Markdoc extends the markdown syntax you love to offer you authoring superpowers... 💪
|
||||
---
|
||||
[Markdoc](https://markdoc.dev/docs/overview) extends the markdown syntax you know and love to offer you authoring superpowers... 💪.
|
||||
|
||||
Tags are the heart of Markdoc system. You can use native Markdoc tags, like tables(example below), conditionals, and partials...
|
||||
|
||||
## Table in Markdoc
|
||||
{% table %}
|
||||
* Foo
|
||||
* Bar
|
||||
* Baz
|
||||
---
|
||||
*
|
||||
```
|
||||
puts "Some code here."
|
||||
```
|
||||
*
|
||||
<!-- {% list type="checkmark" %}
|
||||
* Bulleted list in table
|
||||
* Second item in bulleted list
|
||||
{% /list %} -->
|
||||
* Text in a table
|
||||
---
|
||||
*
|
||||
A "loose" list with
|
||||
|
||||
multiple line items
|
||||
* Test 2
|
||||
* Test 3
|
||||
---
|
||||
* Test 1
|
||||
* A cell that spans two columns {% colspan=2 %}
|
||||
{% /table %}
|
||||
|
||||
or create custom components.
|
||||
|
||||
## Tags available out of Ink
|
||||
Astro Ink ships with the following tags with more coming soon...
|
||||
|
||||
### Callout
|
||||
|
||||
#### Note
|
||||
{% callout type="note" title="title goes here..." %}
|
||||
lorem ipsum doler sit amet lorem
|
||||
{% /callout %}
|
||||
|
||||
#### Error
|
||||
{% callout type="error" title="title goes here..." %}
|
||||
lorem ipsum doler sit amet
|
||||
{% /callout %}
|
||||
|
||||
#### Warning
|
||||
{% callout type="warning" title="title goes here..." %}
|
||||
lorem ipsum doler sit amet
|
||||
{% /callout %}
|
||||
|
||||
#### Check
|
||||
{% callout type="check" title="title goes here..." %}
|
||||
lorem ipsum doler sit amet
|
||||
{% /callout %}
|
||||
|
||||
### Link
|
||||
|
||||
{% link href="/blog" title="take care" %}
|
||||
Go to blog
|
||||
{% /link %}
|
||||
|
||||
### Tweet Embed
|
||||
{% tweet url="https://twitter.com/aftabbuddy/status/1630403326406959105" %}
|
||||
{% /tweet %}
|
||||
|
||||
|
||||
|
||||
{% yt url="https://www.youtube.com/embed/ADnaRwQZfqw" title="SvelteKit + GraphQL with Houdini | Intro, Setup and Project Overview" %}
|
||||
{% /yt %}
|
||||
|
||||
### Tabs
|
||||
|
||||
{% tabs heading="some" tabs=[{title: "tab1", body: "tab1"}, {title: "tab2", body: "tab2"}] %}
|
||||
{% /tabs %}
|
||||
|
||||
...more tags coming soon!
|
||||
|
||||
## Functions (from official example)
|
||||
|
||||
¡Hola {% getCountryEmoji("spain") %}!
|
14
src/content/blog/spa-fatigue.mdx
Normal file
14
src/content/blog/spa-fatigue.mdx
Normal file
|
@ -0,0 +1,14 @@
|
|||
---
|
||||
title: Second-guessing the modern web
|
||||
date: "2021-04-10"
|
||||
image: https://images.unsplash.com/photo-1501772418-b33899635bca?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1650&q=80
|
||||
author: Tom MacWright
|
||||
authorTwitter: tmcw
|
||||
category: design
|
||||
tags:
|
||||
- architecture
|
||||
- front-end
|
||||
- spa
|
||||
description: There is a sweet spot of React - in moderately interactive interfaces..
|
||||
---
|
||||
https://macwright.com/2020/05/10/spa-fatigue.html
|
21
src/content/config.ts
Normal file
21
src/content/config.ts
Normal file
|
@ -0,0 +1,21 @@
|
|||
import { z, defineCollection } from "astro:content";
|
||||
|
||||
const blogCollection = defineCollection({
|
||||
schema: z.object({
|
||||
title: z
|
||||
.string()
|
||||
.max(100, "The title length must be less than or equal to 100 chars"),
|
||||
description: z.string(),
|
||||
tags: z.array(z.string()),
|
||||
author: z.string(),
|
||||
authorImage: z.string().optional(),
|
||||
authorTwitter: z.string(),
|
||||
date: z.string(),
|
||||
image: z.string().optional(),
|
||||
category: z.string(),
|
||||
}),
|
||||
});
|
||||
|
||||
export const collections = {
|
||||
blog: blogCollection,
|
||||
};
|
Loading…
Add table
Add a link
Reference in a new issue