https://www.figma.com/file/dhrEiktsTcXAXHiULKy4ND/Alpine---Blog?node-id=3609%3A504

• Test with horizontal scroll
• Add shadow
• align color switch

See on https://github.com/nuxt-themes/starter

What could we use as content for Alpine?

Can we use some Lorem Ipsum? cc @clemcode

I would like to explore the possibility of using slots for Markdown, see

Transforming:

<h1 class="text-3xl font-bold text-primary-900 dark:text-primary-100">
  <Markdown v-if="$slots.title" :use="$slots.title" unwrap="p" class="!my-0" />
  <span v-else>Default title</span>
</h1>

Into

<h1 class="text-3xl font-bold text-primary-900 dark:text-primary-100">
  <Markdown :use="$slots.title" unwrap="p" class="!my-0">Default title</Markdown>
</h1>

Also, with the current Hero implementation, I have this warning:

https://www.figma.com/file/dhrEiktsTcXAXHiULKy4ND/Alpine---Blog?node-id=13%3A4699

The theme config should have at least:

• title
• description
• image (used as global og:image)

The title can be used for the header.logo.alt by default.

You can use useContentHead(theme.value) in AppLayout.vue in order to give directly the meta data and let it handle the meta tags.

about page spacing between <Gallery> and text

• Change link order : About Articles Contact
  

• Background light = white

Desktop, Tablet & Mobile

• There is no label inside the input :
  

• Reduce margin top & bottom of all the inputs a bit :
  

• There is a bug on mobile with safari : needs border radius on the inputs :
  

• DarkMode : change colors of inputs : bg=gray/900 and stroke=gray/800

Right now we don't have any social preview when sharing https://alpine.nuxt.dev

You can see it using this Chrome extension

Could we design a social preview card for Alpine @SarahM19 ?

Customizable logo in config

• Try to align the icon with text :
  
• Try to fix the bug for the underline
  
• Problem on the code block : add spacing between code and Yarn
  
• Remove some spacing between title and list
  
• Remove some spacing
  
• Can you try to add a video :
  
• Add border-radius on all medias :
  
• Can you try to add an image here :
  

Tablet & Mobile

• Add more line height on the title : 1 -> 1.25rem
  
  

The Markdown line break does not work in the Hero component.

Reproduction: https://stackblitz.com/edit/nuxt-starter-w3hmbt?file=content%2Findex.md

reduce spacing between desc and date on mobile

https://www.figma.com/file/dhrEiktsTcXAXHiULKy4ND/Alpine---Blog?node-id=2%3A27

• Default (header + footer + container with prose)
• Page (header + footer + container)

Blocked by #10 #11

add configurable primary colors for text and background

404 error en / when no index.md

page background on bottom or when over-scroll on top / bottom

https://www.figma.com/file/dhrEiktsTcXAXHiULKy4ND/Alpine---Blog?node-id=20%3A2378

This component should have a prop highlight to render in full-mode:

Or in card-mode:

Image spacing on left layout when on mobile

need to refresh the page to get article load

https://www.figma.com/file/dhrEiktsTcXAXHiULKy4ND/Alpine---Blog?node-id=2%3A4174

Blocked by #9

With the latest updates I made on content-wind: https://github.com/Atinux/content-wind/blob/main/components/content/Icon.vue

Example: https://github.com/Atinux/content-wind/blob/main/app.vue#L12-L14

Since we cannot have app.vue, you need to create a global CSS file: assets/css/main.css

And add it in the nuxt.config.ts:

export default defineNuxtConfig({
  css: ['~/assets/css/main.css']
})

Back button and arrow on same line

Make icons follow dark mode and accent color in token.config.ts

Reproduction: yarn play in dev branch

Current error:

Following with this page on localhost:3000

Note that yarn dev works perfectly as a normal Nuxt 3 app.

https://www.figma.com/file/dhrEiktsTcXAXHiULKy4ND/Alpine---Blog?node-id=20%3A148

Links should be generated from content navigation level 1

https://tailwindui.com/documentation#optional-add-the-inter-font-family

Correct tailwind config for prose and non prose

Default layout

https://www.figma.com/file/dhrEiktsTcXAXHiULKy4ND/Alpine---Blog?node-id=2%3A4073

Blocked by #9

Desktop

• Title line height : 2.25 -> 2.5rem
• Padding bottom : add 2.25rem
  
• Add more margin-top : 1.25 -> 2.25rem
  
• Same here : 1.25 -> 2.25 rem
  

Tablet & Mobile

• Add padding bottom on the image and padding top on the text
  

Seems a regression, would love you to take a look @Tahul

https://www.figma.com/file/dhrEiktsTcXAXHiULKy4ND/Alpine---Blog?node-id=2%3A4098

Blocked by #12 #13

This component should fetch the content/articles/ dir and render <ArticlesItem> components.

When iterating on articles, the highlight prop should be set automatically on the first item.

• Date color : should be one color lighter than the blog excerpt
  

• Change title size to 32px
  

**Mobile **

• Spacing should be the same everywhere
  

configure prose to respect figma (ex: h2 underline)

What should we display when there is no articles yet?

So far it will be an empty page: https://github.com/nuxt-themes/alpine/blob/dev/components/content/ArticlesList.vue#L2

Can we at least display an instruction about creating an article in the articles/ directory?