8000 [Proposal] Component morph based on layout · Issue #19 · upash/peco · GitHub
[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content
This repository was archived by the owner on Apr 5, 2019. It is now read-only.

[Proposal] Component morph based on layout #19

Open
imsus opened this issue May 2, 2018 · 1 comment
Open

[Proposal] Component morph based on layout #19

imsus opened this issue May 2, 2018 · 1 comment

Comments

@imsus
Copy link
imsus commented May 2, 2018 •
edited
Loading

Imagine we have this kind of content:

---
title: Hello World
theme: '~layout/default.vue'
---

# Hello World

Here is some image

<Image layout="theme.name" src="~static/image1.jpg" />

Morphing component

We have this <Image /> component inside markdown content. Imagine that the component will change based on the layout provided from front matter.

For Example: Image.vue

<template>
  <div>
	<img v-if="layout === 'default'" :src="src" />

    <amp-img v-if="layout === 'amp'" :src="src"></amp-img>

    <figure v-if="layout === 'instant-article'">
      <img :src="src" />
    </figure>
  </div>
</template>

<script>
  export default {
    name: 'image',
    props: ['layout', 'src']
  }
</script>

The question is, how to retrieve theme object from frontmatter? So this code will work in any content.

<Image layout="theme.name" src="~static/image1.jpg" />
@imsus imsus changed the title [Feature] Component morph based on layout [Proposal] Component morph based on layout May 2, 2018
@egoist
Copy link
Contributor
egoist commented May 2, 2018

ah I think something like this would work for you:

---
title: This is a post
compileTemplate: true
---

<Image :layout="page.attributes.layout" />

https://github.com/egojump/peco/blob/master/docs/using-vue-template-in-markdown.md

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@imsus @egoist
0