Back

# Today We Learned

The more you know...

# VuePress image hack

Problem: VuePress only bundles files that are statically imported or added to the .vuepress/public folder.

Solution: Pass the image to a hidden slot and extract source value

<!-- README.md -->
<Feature> <img src="./feature.jpg" /> </Feature>
1
2



 










 




 
 
 




























<!-- .vuepress/components/Feature.vue -->

<template>
  <div class="feature" ref="feature" :style="featureStyles"><slot /></div>
</template>

<script>
export default {
  data: () => ({
    image: null
  }),
  computed: {
    featureStyles() {
      return {
        backgroundImage: `url(${this.image})`
      };
    }
  },
  mounted() {
    // usually I'm not a fan of reaching directly into the DOM,
    // but a hack is a hack
    this.image = this.$refs.feature.querySelector('img').attributes.src.value;
  }
};
</script>

<style scoped>
.feature {
  width: 100%;
  max-width: 800px;
  margin: 0 0 40px 0;
  height: 350px;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  border-radius: 10px;
  box-shadow: 0 20px 50px hsla(0, 0%, 0%, 20%);
  padding: 0 20px 30px 20px;
  box-sizing: border-box;
}
/* You can probably just use display: none; here,
   but I wanted to preserve the render of the img tag */
.feature img {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

# Run a command on files change

Problem: We need to run a generic command every time any of the matching files change

Soltuion: ag and entr

ag -l --js | entr -s '<your command / commands>'
1

ag respects .gitignore and things like that, it also supports many file extensions, and not just js, just use other flags, like --php.

Both commands are available in brew if you're using macOS.

Problem: npm link and, by some extent, yarn link are a bit too unreliable for complex build processes.

Solution: Use npm pack -> npm install <path-to-tarball> combo. This is a bit more cumbersome to use, but when combined with the command from above can be easily automated.