Skip to content

Commit

Permalink
refactor: update BarBottom to display any icon
Browse files Browse the repository at this point in the history 
the component uses slots

icons availables:
  - https://icones.js.org/

slidev docs:
  - https://sli.dev/guide/syntax.html#icons
  • Loading branch information
@moudev
moudev committed Oct 27, 2021
1 parent 89cc3db commit 9e72f47
Show file tree
Hide file tree
Showing 4 changed files with 122 additions and 108 deletions.
8 changes: 1 addition & 7 deletions components/BarBottom.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,6 @@ export default {
title: {
type: String,
},
social: {
type: Array
}
}
}
</script>
Expand All @@ -17,10 +14,7 @@ export default {
{{ title }}
</div>
<div class="w-1/2 flex justify-end">
<div v-for="type in social" :key="type.type" class="flex justify-center items-center ml-4">
<span><LogoIcon :type="type.type" /></span>
<span class="ml-0.5">{{type.username}}</span>
</div>
<slot />
</div>
</div>
</template>
22 changes: 22 additions & 0 deletions components/Item.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
<script>
export default {
props: {
text: {
type: String,
required: true,
default: '@username'
},
},
}
</script>

<template>
<div class="flex justify-center items-center ml-4">
<span class="flex justify-center item-center">
<slot />
</span>
<span class="ml-0.5">
{{text}}
</span>
</div>
</template>
29 changes: 0 additions & 29 deletions components/LogoIcon.vue
View file

This file was deleted.

171 changes: 99 additions & 72 deletions example.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,14 +12,17 @@ Presentation slides for developers
</span>
</div>

<BarBottom
title="Slidev theme purplin"
:social="[
{ type: 'gh', username: 'slidevjs/slidev' },
{ type: 'tw', username: 'Slidevjs' },
{ type: 'wb', username: 'sli.dev' }
]"
/>
<BarBottom title="Slidev theme purplin">
<Item text="slidevjs/slidev">
<carbon:logo-github />
</Item>
<Item text="Slidevjs">
<carbon:logo-twitter />
</Item>
<Item text="sli.dev">
<carbon:link />
</Item>
</BarBottom>

---
layout: intro
Expand Down Expand Up @@ -70,14 +73,17 @@ layout: intro
</div>
</div>

<BarBottom
title="Slidev theme purplin"
:social="[
{ type: 'gh', username: 'slidevjs/slidev' },
{ type: 'tw', username: 'Slidevjs' },
{ type: 'wb', username: 'sli.dev' }
]"
/>
<BarBottom title="Slidev theme purplin">
<Item text="slidevjs/slidev">
<carbon:logo-github />
</Item>
<Item text="Slidevjs">
<carbon:logo-twitter />
</Item>
<Item text="sli.dev">
<carbon:link />
</Item>
</BarBottom>

---
layout: image-x
Expand All @@ -91,14 +97,17 @@ imageOrder: 1

image 600x600

<BarBottom
title="Slidev theme purplin"
:social="[
{ type: 'gh', username: 'slidevjs/slidev' },
{ type: 'tw', username: 'Slidevjs' },
{ type: 'wb', username: 'sli.dev' }
]"
/>
<BarBottom title="Slidev theme purplin">
<Item text="slidevjs/slidev">
<carbon:logo-github />
</Item>
<Item text="Slidevjs">
<carbon:logo-twitter />
</Item>
<Item text="sli.dev">
<carbon:link />
</Item>
</BarBottom>

---
layout: image-x
Expand All @@ -112,14 +121,17 @@ imageOrder: 2

image 1080x1920

<BarBottom
title="Slidev theme purplin"
:social="[
{ type: 'gh', username: 'slidevjs/slidev' },
{ type: 'tw', username: 'Slidevjs' },
{ type: 'wb', username: 'sli.dev' }
]"
/>
<BarBottom title="Slidev theme purplin">
<Item text="slidevjs/slidev">
<carbon:logo-github />
</Item>
<Item text="Slidevjs">
<carbon:logo-twitter />
</Item>
<Item text="sli.dev">
<carbon:link />
</Item>
</BarBottom>

---
layout: quote
Expand All @@ -131,14 +143,17 @@ position: center

'position' variants: left (default), center, right

<BarBottom
title="Slidev theme purplin"
:social="[
{ type: 'gh', username: 'slidevjs/slidev' },
{ type: 'tw', username: 'Slidevjs' },
{ type: 'wb', username: 'sli.dev' }
]"
/>
<BarBottom title="Slidev theme purplin">
<Item text="slidevjs/slidev">
<carbon:logo-github />
</Item>
<Item text="Slidevjs">
<carbon:logo-twitter />
</Item>
<Item text="sli.dev">
<carbon:link />
</Item>
</BarBottom>

---

Expand All @@ -159,14 +174,17 @@ Slidev is a slides maker and presenter designed for developers, consist of the f

Read more about [Why Slidev?](https://sli.dev/guide/why)

<BarBottom
title="Slidev theme purplin"
:social="[
{ type: 'gh', username: 'slidevjs/slidev' },
{ type: 'tw', username: 'Slidevjs' },
{ type: 'wb', username: 'sli.dev' }
]"
/>
<BarBottom title="Slidev theme purplin">
<Item text="slidevjs/slidev">
<carbon:logo-github />
</Item>
<Item text="Slidevjs">
<carbon:logo-twitter />
</Item>
<Item text="sli.dev">
<carbon:link />
</Item>
</BarBottom>

---

Expand All @@ -183,14 +201,17 @@ Hover on the bottom-left corner to see the navigation's controls panel
| <kbd>up</kbd> | previous slide |
| <kbd>down</kbd> | next slide |

<BarBottom
title="Slidev theme purplin"
:social="[
{ type: 'gh', username: 'slidevjs/slidev' },
{ type: 'tw', username: 'Slidevjs' },
{ type: 'wb', username: 'sli.dev' }
]"
/>
<BarBottom title="Slidev theme purplin">
<Item text="slidevjs/slidev">
<carbon:logo-github />
</Item>
<Item text="Slidevjs">
<carbon:logo-twitter />
</Item>
<Item text="sli.dev">
<carbon:link />
</Item>
</BarBottom>

---
layout: image-right
Expand All @@ -216,14 +237,17 @@ function updateUser(id: number, update: Partial<User>) {
}
```

<BarBottom
title="Slidev theme purplin"
:social="[
{ type: 'gh', username: 'slidevjs/slidev' },
{ type: 'tw', username: 'Slidevjs' },
{ type: 'wb', username: 'sli.dev' }
]"
/>
<BarBottom title="Slidev theme purplin">
<Item text="slidevjs/slidev">
<carbon:logo-github />
</Item>
<Item text="Slidevjs">
<carbon:logo-twitter />
</Item>
<Item text="sli.dev">
<carbon:link />
</Item>
</BarBottom>

---
layout: center
Expand All @@ -234,11 +258,14 @@ class: "text-center"

[Documentations](https://sli.dev) / [GitHub Repo](https://github.com/slidevjs/slidev)

<BarBottom
title="Slidev theme purplin"
:social="[
{ type: 'gh', username: 'slidevjs/slidev' },
{ type: 'tw', username: 'Slidevjs' },
{ type: 'wb', username: 'sli.dev' }
]"
/>
<BarBottom title="Slidev theme purplin">
<Item text="slidevjs/slidev">
<carbon:logo-github />
</Item>
<Item text="Slidevjs">
<carbon:logo-twitter />
</Item>
<Item text="sli.dev">
<carbon:link />
</Item>
</BarBottom>

0 comments on commit 9e72f47

Please sign in to comment.