After a weekish of playing around im got a pretty good feel of how ghost is working its not perfect, and a few things drives me batty (you guessed it its about controlling markup) But it do a ton of the heavylifting for a membership based newssite with comments & newsletters.
A statup theme is in the making
got curious and wanted to see how Ghost is working install it on pikapods.
Its an interesting platform for publications
So now its the usual fun setup on local, can i hook it up to git, how do i push visual changes, what can be done from the editors experience, can we build a design / frontend that makes it work for a project
Well so far so good its local installed gonna be super interesting to see if how well it can work with 11ty - NERD ON!
…
Today to the horror i learned that my lighthouse score was not four-hundo
Aparantly i had set up tracking for webtraffic … huh anyhow i found out how to remove it and kill it with fire /beacon.min.js begone !
remove cloudflare beacon.min.js
Set a new record today of moving dns and making everything work again, this domain morten.dk is also used for mortendk.dev but apparently somehow 2 weeks ago the mx records dissapeared and now the main dns as well - love is a 4 letter word and so it fuck - anyhow now everything got moved over to cloudflare and is pointed to netlify, and it works
I remember back when this would take “a few days” it felt like pigeons were sending the signal
Also Now i understand the nice silence of spam in my mail box … but also goddamn had a pretty important follow up
Im not the smartest man but at least today i figured out how to send settings from a block down to an included snippiet file
{% render 'the-file-in-snippets',
settings: block.settings,
shopify_attributes: block.shopify_attributes %}
Now the attributes can be used so we dont break the layout display
<div {{ shopify_attributes }}>
Got the change the color in shopifys UI to then create the colors as css variables so i can use them in tailwind
From tailwind.config.js get the designtokens eeem colors
(const colors = require("./tailwind/designToken-color");
module.exports = {
extend: {
colors: colors
}
}designtoke-colors.js
module.exports = {
"primary-50": 'rgb(var(--color-primary-50) / <alpha-value>)',
}Create a snippet in snippets/cssvariables.liquid
{% style %}
:root {
{% assign color_primary_50 = settings.color_primary | color_lighten: 45 %}
--color-primary-50: {{ color_primary_50.rgb }};
};
{% endstyle %}
Voila Ready to go
<div class="bg-primary-50 h-12 w-12"> BAM! </div>Got my instagram feed to work with no tracking a smooth import from https://behold.so and then using 11ty fetch to make it happen
const EleventyFetch = require("@11ty/eleventy-fetch");
module.exports = async function() {
let url = "https://feeds.behold.so/[...]";
return EleventyFetch(url, {
duration: "15m", //
type: "json"
});
};
Decap is begging to move so today i upgraded to the new version 3 on morten.dk
Gonna wait a few days before im gonna upgrade https://saga11.dev to the new version just in case ;)
<script src="https://unpkg.com/decap-cms@^3.0.0/dist/decap-cms.js"></script>