nuxt-themes / alpine Goto Github PK

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
  

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

Correct tailwind config for prose and non prose

configure prose to respect figma (ex: h2 underline)

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']
})

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

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.

• Change link order : About Articles Contact
  

• Background light = white

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?

about page spacing between <Gallery> and text

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

Or in card-mode:

404 error en / when no index.md

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 ?

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

Links should be generated from content navigation level 1

need to refresh the page to get article load

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

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

add configurable primary colors for text and background

Default layout

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

Blocked by #9

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

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

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:

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

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

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

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.

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

Customizable logo in config

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

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

• Change title size to 32px
  

**Mobile **

• Spacing should be the same everywhere
  

• 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
  
  

Back button and arrow on same line

Image spacing on left layout when on mobile

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

Blocked by #10 #11

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

Blocked by #12 #13

What could we use as content for Alpine?

Can we use some Lorem Ipsum? cc @clemcode

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.

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

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