diff --git a/src/components/NucleusBlogPostCard.astro b/src/components/NucleusBlogPostCard.astro new file mode 100644 index 000000000..8bade589c --- /dev/null +++ b/src/components/NucleusBlogPostCard.astro @@ -0,0 +1,59 @@ +--- +const { article } = Astro.props; +const imageURL = article["preview_image"]; +--- + +
+
+ +
+
+ +
+

{article.subtitle}...

+
+
+ +
+
+
+ + \ No newline at end of file diff --git a/src/components/NucleusBlogsLayout.astro b/src/components/NucleusBlogsLayout.astro new file mode 100644 index 000000000..a7497c2a7 --- /dev/null +++ b/src/components/NucleusBlogsLayout.astro @@ -0,0 +1,25 @@ +--- +import { blogArticles } from '@scripts/blog'; +import NucleusBlogPostCard from './NucleusBlogPostCard.astro'; + +const blogs = await blogArticles(); +--- +
+ + + + +
+ + \ No newline at end of file diff --git a/src/content/docs/index.mdx b/src/content/docs/index.mdx index 85a94ead9..a09da2588 100644 --- a/src/content/docs/index.mdx +++ b/src/content/docs/index.mdx @@ -30,6 +30,7 @@ hero: import SignPost from '@components/SignPost.astro'; import HeroAction from '@components/HeroAction.astro'; +import NucleusBlogsLayout from '@components/NucleusBlogsLayout.astro'; import { CardGrid } from '@astrojs/starlight/components'; @@ -75,48 +76,7 @@ import { CardGrid } from '@astrojs/starlight/components'; ## Latest Nucleus blog articles -
-
-
- Using accessible colours in a design system -
-
-

Using accessible colours in a design system

-

Why it is important and how to make it work.

-

7 July 2023

-
-
-
-
- Exposing the problem with CSS custom properties in a Design System. -
-
-

Be aware of using CSS custom properties

-

Exposing the problem with CSS custom properties in a Design System.

-

1 December 2022

-
-
-
-
- Drafting the new Nucleus logo -
-
-

Creating the Nucleus logo

-

How we created our logo and why we needed to.

-

29 April 2022

-
-
-
-
- A selection of chocolates used as a metaphor for components. -
-
-

Creating a new Sketch library for Nucleus

-

Understanding the requirements of UX designers.

-

4 March 2022

-
-
-
+ diff --git a/src/scripts/blog.js b/src/scripts/blog.js new file mode 100644 index 000000000..9714479ed --- /dev/null +++ b/src/scripts/blog.js @@ -0,0 +1,7 @@ +const blogArticles = async () => { + return fetch('https://feature-posts-api.nucleus-blog.pages.dev/articles.json') + .then((response) => response.json()) + .then(response => response.articles); +}; + +export { blogArticles }; diff --git a/src/styles/custom.css b/src/styles/custom.css index 31a82b85e..1923a1d51 100644 --- a/src/styles/custom.css +++ b/src/styles/custom.css @@ -367,50 +367,7 @@ main { } } - .blog { - display: grid; - grid-template-columns: repeat(2, 1fr); - gap: 1.5rem; - padding-block-start: 2rem; - - @media (width >= 50rem) { - grid-template-columns: repeat(4, 1fr); - } - - .card { - margin-block-start: 0; - border-radius: 0.5rem; - overflow: clip; - background-color: var(--sl-color-gray-7); - box-shadow: 0 0 0 1px var(--sl-color-gray-6); - transition: box-shadow 0.25s ease-in-out; - - .media { - aspect-ratio: 16 / 9; - overflow: clip; - } - - .body { - margin-block-start: 0; - padding-block-start: 1rem; - padding-block-end: 1rem; - padding-inline-start: 1rem; - padding-inline-end: 1rem; - - h3 { - font-size: var(--sl-text-h4); - font-weight: 500; - color: var(--sl-color-gray-3); - } - p { - margin-block-start: 1rem; - font-size: var(--sl-text-base); - color: var(--sl-color-gray-3); - } - } - } - } .endpage { margin-top: 0;