Live Editing an Eleventy Project in CloudCannon with Bookshop
November 30, 2023
Watch in 9 minutes
Update December 7, 2023: There is also a blog post for this one, if you prefer reading to watching:
- Learn more about Eleventy and CloudCannon CMS
- CloudCannon Documentation: Introduction to Bookshop with Eleventy
Searchable Transcript
all right what's up everybody today Iwant to talk to you about live editingin Cloud Canon now the way that cloudCanon enables live editing in your
project is it uses a plugin calledBookshop and to learn about that we'llgo out to the cloud Cannon documentationwe'll go to the guide section if you
scroll down to the bottom you'll see thetwo Bookshop guides that cloud Canonprovides there's one for Astro and thenthere's one for 11d and we'll go through
the 11d one today to build a micro blogproject and to show you what the finalproduct looks like like here it is umit's just a very simple micro blogging
project that includes uh any arbitarycontent that you want to put into it andhas a stream of posts postPages tags and tag pages and inside of
the cloud Cannon app you can see theediting experience as well we havecontent blocks here now these are ourBookshop components and I'll go through
those um and importantly these are liveeditable you can reorder them and clickthrough to edit thetext you can click on the text to edit
it and to get even fancier we have alink component which shows a screenshotof our external URL that we're linkingout to and it has it wrapped in a web
component as well so if we link to adifferent URL automatically updates thatand renders that web component for us solet's let's go through how to wire
Bookshop up to our l0 project there is ascaffolding command that we want to runhere that will create a new Bookshopcomponent library for us in our 11d
project and I've run this scaffoldingcommand inside of an empty directory toshow you what the output looks like wehave our Bookshop configuration file we
have a sample component that wasgenerated for us the configuration yoincludes Some Cloud Cannon specificconfiguration in it the blueprint
section really determines sort ofdefault placeholder values for ourcontent the liquid file is the liquidHTML the output for the component and
then we have any styles for thecomponent we can put in our SAS file aswell we have a page helper that sort ofiterates over uh the components on the
page and renders them and any GlobalStyles will go into this Global SAS fileall right so we've sort of run thescaffolding command we also want to wire
this up to our 11d configuration file aswell so 11d will render our componentsas expected and you can see how to dothat down below we want to run an mpm
install command we want to require the11d Bookshop plugin here and we alsowant to use ld's configuration API theadd plug-in method same as you would any
other 11d plugin to add this to our 11dconfiguration file as well importantlythe Bookshop location here should matchuncore component D Library the same
folder that we specified above in ourscaffolding command and you can see thatsame code in action on the micro blogproject as well now one other thing I
like to do is to add a watch Target forour underscore component-- Libraryfolder so that 110 will rerun even whenwe make changes to the liquid template
files as well the other important thingwhen we're enabling our localdevelopment experience is that we wantto also wire up Bookshop to build our
SAS files as well so you can see that inaction here we have a Bookshop D SAScommand points to the Bookshop folderwrites directly to to our output folder
and then we'll watch those SAS files aswell to rebuild automatically and youcan see the 11y command here and thenthis start command which runs both of
these commands in parallel so that'skind of all we need to enable Bookshoplocally and this is what it looks likein our local development environment all
right so now that we got our localdevelopment running let's go ahead andlook at some of the Bookshop componentsthat we're using inside of this project
you can kind of see that we have a textcomponent here this is kind of thesimplest one let's look at our textcomponent it's just plain text HTML uh
just put in any arbitrary content hereit's rendered in a liquid template thatlooks like this not much to it if youscroll down you can see we have a couple
of code blocks down here as well this isa code Bookshop component it's using 11dsyntax highlighter and it has threedifferent sort of inputs to it has a
code block language and an extra commentattached to the code and then maybe thefanciest component here is that we havea link component which shows an external
URL we sort of have the URL here we havethe type of preview that we're showingwe have we can do a screenshot or anopen graph image we can also have an
some arbitrary content associated withthis one as well and then we can dolight or dark mode on the fake browserwindow that renders there so I think the
next best thing to look at here is aBookshop template file so we have ourindividual posts inside of our MichaelBlog the file name select for those are
associated with the current date so ifwe go out to the Bookshop app and gointo our posts section of our projectyou can see can look at existing posts
and here is the one from November 20thit's got again a uh link component totext Bookshop components in there and ifyou look at the markdown representation
of that you can see those serializedinto yaml so you can see the textcomponent text component component linkcomponent and Bookshop iterates over
these in the content blocks section andif you remember we go back into ourcomponent Library folder in our sharedfolder and in 110 you can look at this
page. 11. liquid and see this contentorblocks data referenced here we'reiterating over the content blocks we'rerendering each as a Bookshop component
using the Bookshop shortcut code andeach one of these is rendered live inthe cloud Cannon app when the editing istaking place it's rendering using an 11d
layout called post. liquid and you cansee that in theore includes folderthere's a post. liquid file nowimportantly this is using another
Bookshop short code called book Bookshopuncore include which then is alsoreferencing our 110 page helper insideof our component Library so Bookshop
include here is calling page which isreferencing this other page. 11d liquidfile this is all mapping the componentsinside of cloud Cannon so that we can
get that live editing experience allright so we have our Bookshop componentswe have our rendered content files whichare using Bookshop helpers to render
those in 11d and before we get the fullediting experience in Cloud Canonthere's just one more addition setupstep that we have to do and that is to
add Cloud Cannon postbuild and pre-buildcommands now these are Cloud Cannonspecific files that run as sort of buildhooks for your system so the pre-build
shell script will run before your buildruns and if we look inside of ourpre-build you can see that we run npminstall we run npm run build style so if
we go back to our package.json we cansee build style this is the sameBookshop command to bundle our componentSAS files into a single output file so
that's the pre-build file the postu fileis a Bookshop generate file now thissort of wires up additional metadataaround your Bookshop components to allow
Cloud Cannon to hook in for a liveediting experience at some point thismight go away I don't know but Bookshopas is today you do need to run this post
build script and all of thesedevelopment dependencies are documentedon step five of the walkth through so ifyou go out and copy this you'll get the
correct dependencies installed and itwill sort of describe the Bookshopgenerate post build script for you aswell and there's a there's a lot more to
it uh Bookshop has a uh sort of acomponent browser functionality built inwe can go through some of that in inlater videos um but I think it's
important to know that that's basicallyall you need to do to get a full liveediting experience inside of your 11dproject
um in the cloud Cannon app which I thinkis great and as we sort of know liveediting is kind of table Stakes for amodern CMS workflow we really want as
much power in the hands of our editorsas we can give them so that they canfeel confident when they're buildingcontent inside of the CMS and when
they're pushing that content toproduction we want those live edits tomatch the production builds as much aspossible and book really allows you to
dothat
