Skip to content

Commit

Permalink
feat(website): Move blog to CC and fix RSS (#937)
Browse files Browse the repository at this point in the history
Co-authored-by: Emanuele Stoppa <[email protected]>
  • Loading branch information
yanthomasdev and ematipico committed Nov 29, 2023
1 parent d7a5d8c commit c449679
Show file tree
Hide file tree
Showing 15 changed files with 467 additions and 293 deletions.
77 changes: 52 additions & 25 deletions website/src/components/BlogPostInfo.astro
Original file line number Diff line number Diff line change
@@ -1,36 +1,63 @@
---
import "@src/styles/blog/index.scss";
import { getEntry, type CollectionEntry } from "astro:content";
export interface Props {
frontmatter: {
coauthorName?: string;
coauthorAvatar?: string;
authorName: string;
authorUrl?: string;
authorAvatar?: string;
pubDate: string;
};
post: CollectionEntry<"blog">["data"];
}
async function getAuthorsData(
authors: CollectionEntry<"authors">["id"][]
): Promise<CollectionEntry<"authors">[]> {
const authorsData = await Promise.all(
authors.map((author) => getEntry("authors", author))
);
return authorsData;
}
const {coauthorName, coauthorAvatar, authorName, authorUrl, authorAvatar, pubDate} = Astro.props.frontmatter;
const { post } = Astro.props;
const authors = await getAuthorsData(
post.authors as CollectionEntry<"authors">["id"][]
);
---

<div class="blog-info">
<div>

<span class="avatar-stack">
<span class="avatar"><img src={authorAvatar}></span>
{coauthorAvatar && <span class="avatar"><img src={coauthorAvatar}></span>}
</span>

{authorUrl ? <a href={authorUrl}><span>{authorName}</span></a> : <span>{authorName}</span>}
<span class="avatar-stack">
{
authors.map(({ data: author }) => (
<span class="avatar">
<img src={author.avatar} />
</span>
))
}
</span>

{coauthorName && <span> &amp; {coauthorName}</span>}
</div>
<div class="author-list">
{
authors.map((author, index) => (
<>
{author.data.url ? (
<a href={author.data.url}>
<span>{author.data.name}</span>
</a>
) : (
<span>{author.data.name}</span>
)}
{authors.length > 1 && index + 1 == authors.length - 1 ? " & " : ""}
{authors.length > 1 && index + 1 < authors.length - 1 ? ", " : ""}
</>
))
}
</div>

<time datetime={pubDate}>{new Date(pubDate).toLocaleDateString(undefined, {
year: "numeric",
month: "long",
day: "numeric",
timeZone: "UTC",
})}</time>
<time datetime={post.pubDate.toString()}
>{
post.pubDate.toLocaleDateString(undefined, {
year: "numeric",
month: "long",
day: "numeric",
timeZone: "UTC",
})
}</time
>
</div>
36 changes: 23 additions & 13 deletions website/src/components/PostsList.astro
Original file line number Diff line number Diff line change
@@ -1,22 +1,32 @@
---
import InlineSVG from "@src/components/InlineSVG.astro";
import BlogPostInfo from "@src/components/BlogPostInfo.astro";
import "@src/styles/blog/index.scss";
import { getCollection } from "astro:content";
let posts = await Astro.glob("../content/docs/blog/**/*.(mdx|md)");
posts = posts.sort((a, b) => {
return new Date(b.frontmatter.pubDate).valueOf() - new Date(a.frontmatter.pubDate).valueOf();
});
const posts = (await getCollection("blog")).sort(
(a, b) =>
new Date(b.data.pubDate).valueOf() - new Date(a.data.pubDate).valueOf()
);
---

<div class="blog">
<a href="/feed.xml" class="rss-icon"><InlineSVG src="rss" /><span class="sr-only">RSS</span></a>
<a href="/feed.xml" class="rss-icon"
><InlineSVG src="rss" /><span class="sr-only">RSS</span></a
>

<section class="blog"></section>
{posts.filter(post => post.frontmatter.url).map((post) => <article>
<h2><a href={post.frontmatter.url}>{post.frontmatter.title}</a></h2>
<BlogPostInfo frontmatter={post.frontmatter} />
<Fragment set:html={post.frontmatter.summary} />
<p><a href={post.frontmatter.url}>Read more</a></p>
</article>)}
<section class="blog"></section>
{
posts.map(async (post) => (
<article>
<h2>
<a href={`blog/${post.slug}`}>{post.data.title}</a>
</h2>
<BlogPostInfo post={post.data} />
<Fragment set:html={post.data.summary} />
<p>
<a href={`blog/${post.slug}`}>Read more</a>
</p>
</article>
))
}
</div>
4 changes: 4 additions & 0 deletions website/src/content/authors/core.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
{
"name": "Biome Core Team",
"avatar": "/img/circle-indent-logo.svg"
}
5 changes: 5 additions & 0 deletions website/src/content/authors/ema.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
{
"name": "Emanuele Stoppa",
"avatar": "https://avatars.githubusercontent.com/u/602478?v=4",
"url": "https://twitter.com/ematipico"
}
4 changes: 4 additions & 0 deletions website/src/content/authors/team.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
{
"name": "Biome Core Team, Biome Maintainers",
"avatar": "/img/circle-indent-logo.svg"
}
Original file line number Diff line number Diff line change
@@ -1,18 +1,14 @@
---
title: Announcing Biome
template: splash
url: /blog/annoucing-biome
description: Biome continues Rome's legacy; in this blog post, we explain why the fork, with some context and history.
summary: Biome continues Rome's legacy; in this blog post, we explain why the fork, with some context and history.
authorName: Emanuele Stoppa
authorAvatar: https://avatars.githubusercontent.com/u/602478?v=4
authorUrl: https://twitter.com/ematipico
coauthorName: Biome Core Team
coauthorAvatar: /img/circle-indent-logo.svg
authors:
- ema
- core
pubDate: 2023-08-29
layout: ../../../layouts/Blog.astro
coverImage: blog/announcing-biome/biome-logo-slogan.png
coverImageAltText: The name of the project - "Biome", with the slogan underneath that says "Toolchain of the web"
coverImage:
src: blog/announcing-biome/biome-logo-slogan.png
alt: The name of the project - "Biome", with the slogan underneath that says "Toolchain of the web"
socialImage: blog/announcing-biome/biome-logo-slogan.png
---

Expand All @@ -23,12 +19,12 @@ Biome is the **official** fork of Rome and it will continue to be Rome's legacy.
Biome is **led and maintained** by the same people that maintained Rome so far.

**Follow us**:

- [Github organization](https://github.com/biomejs)
- [Official repository](https://github.com/biomejs/biome)
- [Official discord server](https://discord.gg/BypW39g6Yc)
- [Official twitter account](https://twitter.com/biomejs)


## Background

I want to give you some background and context, which could help you to get why the core team created a new project with a new name. If you're not interested, feel free to jump to the [next section](#enters-biome)
Expand Down Expand Up @@ -64,13 +60,18 @@ A few new [OSS contributors](#the-core-team) joined the cause and helped in cont

In June, I [gave a talk](https://portal.gitnation.org/contents/rome-a-modern-toolchain) about Rome at JsNation 2023.

<img src="/img/blog/announcing-biome/JsNation_2023.jpg" width="100%" alt="Emanuele Stoppa on the stage of JsNation" />
<img
src="/img/blog/announcing-biome/JsNation_2023.jpg"
width="100%"
alt="Emanuele Stoppa on the stage of JsNation"
/>

So, the project is still alive, but maintaining it has become challenging:

- I don't have admin rights on Discord, so I can't delegate moderation rights to other people;
- I don't have access to the hosting platform of the website;
- I don't have access to any registry (npm, VSCode, etc.);
- the project is still under the MIT license of Rome Tools Inc., which makes attributions and contributions seem foggy from a legal point of view (where's the company? I don't know).
- the project is still under the MIT license of Rome Tools Inc., which makes attributions and contributions seem foggy from a legal point of view (where's the company? I don't know).

Many attempts to reach out to the current owner were all void. There was only one thing I could do. **[We could do](#the-core-team).**

Expand All @@ -79,6 +80,7 @@ Many attempts to reach out to the current owner were all void. There was only on
We created Biome. After weeks of discussions among the members of the core team and conversations with some friends, we thought that a clean slate was the best course of action.

We pondered the idea of keeping the "rome" name in the new fork, but that was proven difficult:

- Sebastian has registered tons of stuff with the "rome" name (GitHub organizations, website domains, open collectives, npm organizations). Finding the right combination wasn't easy;
- without the proper rights in the Discord server, we couldn't delegate the moderation rights. Discord is a very important asset for community building;
- keeping the name would have caused some attribution to Rome Tools Inc., making things still foggy when it comes to the legal aspects of the source code;
Expand All @@ -89,8 +91,11 @@ Given all these difficulties, the core team settled for a new project.

### "New is always better."

<div style={{"minWidth": "200px"}}>
<img src="https://media.giphy.com/media/7EamSGumESd0Y/giphy.gif" width="100%" />
<div style={{ minWidth: "200px" }}>
<img
src="https://media.giphy.com/media/7EamSGumESd0Y/giphy.gif"
width="100%"
/>
</div>

Biome will embrace the same [philosophy](https://biomejs.dev/internals/philosophy) of the old Rome and the same mission. Although, the roadmap will likely change, and the core team could decide to focus on making the current features more stable instead of releasing new ones.
Expand All @@ -99,13 +104,14 @@ Still, the primary mission is alive, and Biome wants to be a 360° toolchain; we

### Why Biome

The team wanted to create a second "Rome", a second version of it. So we fused the words "Bis" and "Rome". **Biome"".
The team wanted to create a second "Rome", a second version of it. So we fused the words "Bis" and "Rome". \*\*Biome"".

## I still use the `rome` package. What should I do?

The `rome` package **_won't be maintained anymore_** by the core team, so you won't get any more releases.

1. You should use the `@biomejs/biome` package. Note that Biome also comes with a lot of new features and fixes. We've just prepared a [blog post](/blog/biome-v1) for that.

```diff
{
- "rome": "12.1.3"
Expand All @@ -114,41 +120,41 @@ The `rome` package **_won't be maintained anymore_** by the core team, so you wo
```

2. And change the CLI name in your scripts:
```diff
```diff
{
"scripts": {
"scripts": {
- "format": "rome format --write ./src",
+ "format": "biome format --write ./src"
}
}
}
```
```
3. In your `rome.json` file, update the URL of the `$schema` field:

```diff
{
- "$schema": "https://docs.rome.tools/schemas/12.1.3/schema.json",
+ "$schema": "https://biomejs.dev/schemas/1.0.0/schema.json"
}
```
```diff
{
- "$schema": "https://docs.rome.tools/schemas/12.1.3/schema.json",
+ "$schema": "https://biomejs.dev/schemas/1.0.0/schema.json"
}
```

4. Then install the new official [VSCode](https://marketplace.visualstudio.com/items?itemName=biomejs.biome) or [open VSX](https://open-vsx.org/extension/biomejs/biome) extension. That's an important step if you use these extensions.

5. After the installation of the extension, open the `settings.json`. If you have some Rome related settings there, you'll have to update them:

```diff
{
"[javascript]": {
- "editor.defaultFormatter": "rome.rome"
+ "editor.defaultFormatter": "biomejs.biome"
},
"editor.codeActionsOnSave": {
- "quickfix.rome": true,
- "source.organizeImports.rome": true
+ "quickfix.biome": true,
+ "source.organizeImports.biome": true
}
}
```
```diff
{
"[javascript]": {
- "editor.defaultFormatter": "rome.rome"
+ "editor.defaultFormatter": "biomejs.biome"
},
"editor.codeActionsOnSave": {
- "quickfix.rome": true,
- "source.organizeImports.rome": true
+ "quickfix.biome": true,
+ "source.organizeImports.biome": true
}
}
```

Biome **still accepts the `rome.json` file** as a configuration, so you don't need to do anything yet. Biome also takes `biome.json` as a configuration file.

Expand Down
Loading

0 comments on commit c449679

Please sign in to comment.