Private blog, portfolio and speakers page

Stefan · February 14, 2018, 6:30pm

I use Contentful to power my private website and I put everything on my site these days.

It includes:

a person
blog posts
“today I learned” posts
events
screencasts
random resources

I didn’t couple entries too much yet because it works quite nicely right now.

My site:

Content model:

The raw content model export can be found here.

susowiki · March 19, 2018, 9:53am

HI Stefan!

Your project looks great! But I’m not able to run it on my local.

When I run ‘npm run dev’, I get this error:

ERROR Failed to compile with 1 errors

This dependency was not found:

~/plugins/image-map.js in ./node_modules/babel-loader/lib?{“babelrc”:false,“cacheDirectory”:true,“presets”:[[“/home/jtalavera/Workspace/stefan-judis-website/node_modules/babel-preset-vue-app/dist/index.common.js”,{“targets”:{“ie”:9,“uglify”:true}}]]}!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./components/LazyImage.vue

To install it, you can run: npm install --save ~/plugins/image-map.js

Stefan · March 19, 2018, 10:00am

Mmmmh… I broke that last week I think. Sorry about that…

I’m now generating preview images with https://github.com/technopagan/sqip and these preview images will be generated and written to this js map (and also cached in S3) that you’re missing now. It’s the sqip-it script you see in here https://github.com/stefanjudis/stefan-judis-website/blob/master/scripts/build-it.

If you want to I could walk you through it make it work for you.

I assume that reverting LazyImage to this version should do the trick.

github.com

stefanjudis/stefan-judis-website/blob/a0648f69fc7bf4877f97e7481b1ceeb933891bc0/components/LazyImage.vue

<template>
  <figure role="group" class="c-lazyImage" :style="{ paddingTop: `${ratio * 100}%` }">
    <div class="c-lazyImage--bg">
      <svg role="presentation" width="872" height="872" viewBox="0 0 872 872" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M436 0C195.582 0 0 195.582 0 436c0 240.381 195.582 436 436 436 240.381 0 436-195.619 436-436C872 195.582 676.381 0 436 0zm10.682 653.419c-6.504 4.687-15.042 4.578-21.4 0C416.852 647.279 218 501.327 218 385.75c0-80.442 59.55-128.511 117.102-128.511 34.553 0 75.21 17.876 100.898 64.819 25.615-46.943 66.308-64.819 100.861-64.819C594.45 257.24 654 305.309 654 385.751c0 115.576-198.889 261.527-207.318 267.668z"></path></svg>
      <p>Loading ...</p>
    </div>
    <img v-if="ready" :src="imageSrc" :alt="asset.fields.title">
  </figure>
</template>

<script>
  import {supportsWebp} from '~/plugins/feature-detects.js'

  export default {
    mounted () {
      supportsWebp().then(supportsWebp => {
        const neededImageWidth = Math.floor(this.$el.getBoundingClientRect().width * window.devicePixelRatio)
        this.imageSrc = `${this.asset.fields.file.url}?w=${neededImageWidth}&h=${Math.round(neededImageWidth * this.ratio)}&fit=fill${supportsWebp ? '&fm=webp' : ''}`

        if (window.IntersectionObserver) {

This file has been truncated. show original

susowiki · March 19, 2018, 10:16am

Thank you Stefan!

Reverting LazyImage worked for me.

Stefan-Judis · March 19, 2018, 10:31am

Oh this is awesome!!!

Please let me know what you come up with!

Topic		Replies	Views
Blog posts from contentful not showing on my nuxt project Authors & Editors	1	398	August 28, 2020
Show us your content model! Show us your content model!	2	1058	February 8, 2018
New contentful-backup console app and module for node 8.x+ users Tools & Libraries	1	665	April 20, 2018
Creating comment with contentful APIs content_modeling	0	444	March 16, 2020
Contentful-local-schema: A JS/TS library for syncing Contentful content and querying it locally Tools & Libraries js , graphql	0	331	April 21, 2023

Private blog, portfolio and speakers page

Related Topics