Merge branch 'dev' into deploy-stage

Author: davedbase

src/pages/Articles/introducing-solidstart.mdx

@@ -1,3 +1,9 @@
+<Notice>
+  SolidStart has been through some major changes since this announcement. On May 21, 2024 SolidStart
+  1.0 was officially released with breaking changes. Hence the code examples and APIs shown in this
+  post may be outdated. Visit start.solidjs.com for the most up to date SolidStart docs.
+</Notice>
+
 We've been working on SolidJS for a while. The first couple of years were just for me to prove something. The next couple was about spreading the knowledge of what I'd learned.
 
 The last 2 years have been a lot of: "Solid looks really great, I look forward to trying it when you get `_____________`". Let me tell you, that blank is an always moving target. But it has seemed to settle on a "Next.js"-like framework as of late. And finally, we've got an answer for you.

src/pages/Blog.data.ts

@@ -8,6 +8,7 @@ export type MDXComponent = Component<{
     Twitch?: Component<TwitchProps>;
     YouTube?: Component<YouTubeProps>;
     Spotify?: Component<SpotifyProps>;
+    Notice?: Component<any>
   };
 }>;
 

src/pages/BlogArticle.tsx

@@ -7,7 +7,7 @@ import { YouTube, Tweet, Twitch, Spotify } from 'solid-social';
 import type { BlogArticleData } from './BlogArticle.data';
 import { Title } from '@solidjs/meta';
 
-export const BlogArticle: Component<{data:BlogArticleData}> = (props) => {
+export const BlogArticle: Component<{ data: BlogArticleData }> = (props) => {
   const data = props.data;
   const ctx = useAppState();
 
@@ -46,6 +46,9 @@ export const BlogArticle: Component<{data:BlogArticleData}> = (props) => {
                         Tweet: (props) => (
                           <Tweet {...props} theme={ctx.isDark ? 'dark' : 'light'} align="center" />
                         ),
+                        Notice: (props) => (
+                          <div class="rounded-md bg-amber-400 px-6 py-1">{props.children}</div>
+                        ),
                         YouTube,
                         Twitch: (props) => <Twitch {...props} parent={location.hostname} />,
                         Spotify: (props) => (