Skip to content

Commit c9b9b45

Browse files
bglwbglw
committed
feat: components can determine whether they are being live edited
1 parent 6c35587 commit c9b9b45

File tree

9 files changed

+222
-10
lines changed

9 files changed

+222
-10
lines changed

‎guides/eleventy.adoc

+52-3
Original file line numberDiff line numberDiff line change
@@ -1644,6 +1644,9 @@ Bookshop's Jekyll live editing is built on top of the liquidjs package. As such,
16441644

16451645
|Accessing `site.data` and `site.<collection>`
16461646
|ℹ️ Iterating through collections and data files should be possible when live editing Bookshop components.
1647+
1648+
|Jekyll plugins
1649+
|❌ — See <<Rendering Different Content When Live Editing>>
16471650
|===
16481651

16491652
++++
@@ -1665,8 +1668,12 @@ Bookshop's Eleventy live editing is built on top of the liquidjs package. As suc
16651668

16661669
|Filters: `url`
16671670
|✅
1671+
16681672
|Accessing `site.data` and `site.<collection>`
16691673
|ℹ️ Iterating through collections and data files should be possible when live editing Bookshop components.
1674+
1675+
|Eleventy plugins
1676+
|❌ — See <<Rendering Different Content When Live Editing>>
16701677
|===
16711678

16721679
++++
@@ -1695,6 +1702,8 @@ NOTE: Work is underway to expand support for many of the functions below. Open a
16951702
|❌
16961703
|===
16971704

1705+
For unsupported functions, see <<Rendering Different Content When Live Editing>>
1706+
16981707
[cols="1,1"]
16991708
|===
17001709
|Template Function |Supported in Bookshop
@@ -1875,9 +1884,51 @@ NOTE: Work is underway to expand support for many of the functions below. Open a
18751884

18761885
endif::hugo[]
18771886

1887+
=== Rendering Different Content When Live Editing
1888+
1889+
You can render special content in the live editing environment by checking the Bookshop Live Editor flag. This can be useful to show extra information to your editors, or to use a feature that isn't supported while live editing.
1890+
1891+
ifdef::hugo[]
1892+
```go
1893+
{{ if isset . "env_bookshop_live" }}
1894+
<p>I am being edited live!</p>
1895+
<h1>Fallback {{ .my_page }} title</h1>
1896+
{{ else }}
1897+
<p>Standard build output</p>
1898+
<h1>{{ with site.GetPage .my_page }}{{ .Title }}{{ end }}</h1>
1899+
{{ end }}
1900+
```
1901+
endif::hugo[]
1902+
ifdef::eleventy[]
1903+
```liquid
1904+
{% if env_bookshop_live %}
1905+
<p>I am being edited live!</p>
1906+
<h1>Fallback Title</h1>
1907+
{% else %}
1908+
<p>Standard build output</p>
1909+
<h1>{% my_plugin %}</h1>
1910+
{% endif %}
1911+
```
1912+
endif::eleventy[]
1913+
ifdef::jekyll[]
1914+
```liquid
1915+
{% if env_bookshop_live %}
1916+
<p>I am being edited live!</p>
1917+
<h1>Fallback Title</h1>
1918+
{% else %}
1919+
<p>Standard build output</p>
1920+
<h1>{% my_plugin %}</h1>
1921+
{% endif %}
1922+
```
1923+
endif::jekyll[]
1924+
18781925
=== Disabling Live Editing
18791926

1880-
Some components won't be compatible with live editing, in this case you can disable live editing with on a flag in the component's data. Bookshop will look for any of the following keys:
1927+
Some components won't be compatible with live editing, in this case you can disable live editing with on a flag in the component's data. This is intended for components such as navigation and footer blocks that aren't connected to live editing. In most scenarios, you should use the templating flags in <<Rendering Different Content When Live Editing>>.
1928+
1929+
IMPORTANT: This setting will only apply if the component is rendered directly from a site layout. If this component is within another component, it will still update live (as the parent re-rendering will encapsulate it).
1930+
1931+
Bookshop will look for any of the following keys on a **top-level** component:
18811932

18821933
* live_render
18831934
* liveRender
@@ -1919,8 +1970,6 @@ If you have a specific component that you never want to live edit, you can set `
19191970

19201971
NOTE: Since the blueprint only affects the creation of new components, you will need to add the `_live_render` flag to any existing component data in your front matter.
19211972

1922-
IMPORTANT: This flag will only apply if the component is rendered directly from a site layout. If this component is within another component, it will still update live (as the parent re-rendering will encapsulate it).
1923-
19241973
////
19251974
//
19261975
//

‎guides/hugo.adoc

+52-3
Original file line numberDiff line numberDiff line change
@@ -1644,6 +1644,9 @@ Bookshop's Jekyll live editing is built on top of the liquidjs package. As such,
16441644

16451645
|Accessing `site.data` and `site.<collection>`
16461646
|ℹ️ Iterating through collections and data files should be possible when live editing Bookshop components.
1647+
1648+
|Jekyll plugins
1649+
|❌ — See <<Rendering Different Content When Live Editing>>
16471650
|===
16481651

16491652
++++
@@ -1665,8 +1668,12 @@ Bookshop's Eleventy live editing is built on top of the liquidjs package. As suc
16651668

16661669
|Filters: `url`
16671670
|✅
1671+
16681672
|Accessing `site.data` and `site.<collection>`
16691673
|ℹ️ Iterating through collections and data files should be possible when live editing Bookshop components.
1674+
1675+
|Eleventy plugins
1676+
|❌ — See <<Rendering Different Content When Live Editing>>
16701677
|===
16711678

16721679
++++
@@ -1695,6 +1702,8 @@ NOTE: Work is underway to expand support for many of the functions below. Open a
16951702
|❌
16961703
|===
16971704

1705+
For unsupported functions, see <<Rendering Different Content When Live Editing>>
1706+
16981707
[cols="1,1"]
16991708
|===
17001709
|Template Function |Supported in Bookshop
@@ -1875,9 +1884,51 @@ NOTE: Work is underway to expand support for many of the functions below. Open a
18751884

18761885
endif::hugo[]
18771886

1887+
=== Rendering Different Content When Live Editing
1888+
1889+
You can render special content in the live editing environment by checking the Bookshop Live Editor flag. This can be useful to show extra information to your editors, or to use a feature that isn't supported while live editing.
1890+
1891+
ifdef::hugo[]
1892+
```go
1893+
{{ if isset . "env_bookshop_live" }}
1894+
<p>I am being edited live!</p>
1895+
<h1>Fallback {{ .my_page }} title</h1>
1896+
{{ else }}
1897+
<p>Standard build output</p>
1898+
<h1>{{ with site.GetPage .my_page }}{{ .Title }}{{ end }}</h1>
1899+
{{ end }}
1900+
```
1901+
endif::hugo[]
1902+
ifdef::eleventy[]
1903+
```liquid
1904+
{% if env_bookshop_live %}
1905+
<p>I am being edited live!</p>
1906+
<h1>Fallback Title</h1>
1907+
{% else %}
1908+
<p>Standard build output</p>
1909+
<h1>{% my_plugin %}</h1>
1910+
{% endif %}
1911+
```
1912+
endif::eleventy[]
1913+
ifdef::jekyll[]
1914+
```liquid
1915+
{% if env_bookshop_live %}
1916+
<p>I am being edited live!</p>
1917+
<h1>Fallback Title</h1>
1918+
{% else %}
1919+
<p>Standard build output</p>
1920+
<h1>{% my_plugin %}</h1>
1921+
{% endif %}
1922+
```
1923+
endif::jekyll[]
1924+
18781925
=== Disabling Live Editing
18791926

1880-
Some components won't be compatible with live editing, in this case you can disable live editing with on a flag in the component's data. Bookshop will look for any of the following keys:
1927+
Some components won't be compatible with live editing, in this case you can disable live editing with on a flag in the component's data. This is intended for components such as navigation and footer blocks that aren't connected to live editing. In most scenarios, you should use the templating flags in <<Rendering Different Content When Live Editing>>.
1928+
1929+
IMPORTANT: This setting will only apply if the component is rendered directly from a site layout. If this component is within another component, it will still update live (as the parent re-rendering will encapsulate it).
1930+
1931+
Bookshop will look for any of the following keys on a **top-level** component:
18811932

18821933
* live_render
18831934
* liveRender
@@ -1919,8 +1970,6 @@ If you have a specific component that you never want to live edit, you can set `
19191970

19201971
NOTE: Since the blueprint only affects the creation of new components, you will need to add the `_live_render` flag to any existing component data in your front matter.
19211972

1922-
IMPORTANT: This flag will only apply if the component is rendered directly from a site layout. If this component is within another component, it will still update live (as the parent re-rendering will encapsulate it).
1923-
19241973
////
19251974
//
19261975
//

‎guides/jekyll.adoc

+52-3
Original file line numberDiff line numberDiff line change
@@ -1644,6 +1644,9 @@ Bookshop's Jekyll live editing is built on top of the liquidjs package. As such,
16441644

16451645
|Accessing `site.data` and `site.<collection>`
16461646
|ℹ️ Iterating through collections and data files should be possible when live editing Bookshop components.
1647+
1648+
|Jekyll plugins
1649+
|❌ — See <<Rendering Different Content When Live Editing>>
16471650
|===
16481651

16491652
++++
@@ -1665,8 +1668,12 @@ Bookshop's Eleventy live editing is built on top of the liquidjs package. As suc
16651668

16661669
|Filters: `url`
16671670
|✅
1671+
16681672
|Accessing `site.data` and `site.<collection>`
16691673
|ℹ️ Iterating through collections and data files should be possible when live editing Bookshop components.
1674+
1675+
|Eleventy plugins
1676+
|❌ — See <<Rendering Different Content When Live Editing>>
16701677
|===
16711678

16721679
++++
@@ -1695,6 +1702,8 @@ NOTE: Work is underway to expand support for many of the functions below. Open a
16951702
|❌
16961703
|===
16971704

1705+
For unsupported functions, see <<Rendering Different Content When Live Editing>>
1706+
16981707
[cols="1,1"]
16991708
|===
17001709
|Template Function |Supported in Bookshop
@@ -1875,9 +1884,51 @@ NOTE: Work is underway to expand support for many of the functions below. Open a
18751884

18761885
endif::hugo[]
18771886

1887+
=== Rendering Different Content When Live Editing
1888+
1889+
You can render special content in the live editing environment by checking the Bookshop Live Editor flag. This can be useful to show extra information to your editors, or to use a feature that isn't supported while live editing.
1890+
1891+
ifdef::hugo[]
1892+
```go
1893+
{{ if isset . "env_bookshop_live" }}
1894+
<p>I am being edited live!</p>
1895+
<h1>Fallback {{ .my_page }} title</h1>
1896+
{{ else }}
1897+
<p>Standard build output</p>
1898+
<h1>{{ with site.GetPage .my_page }}{{ .Title }}{{ end }}</h1>
1899+
{{ end }}
1900+
```
1901+
endif::hugo[]
1902+
ifdef::eleventy[]
1903+
```liquid
1904+
{% if env_bookshop_live %}
1905+
<p>I am being edited live!</p>
1906+
<h1>Fallback Title</h1>
1907+
{% else %}
1908+
<p>Standard build output</p>
1909+
<h1>{% my_plugin %}</h1>
1910+
{% endif %}
1911+
```
1912+
endif::eleventy[]
1913+
ifdef::jekyll[]
1914+
```liquid
1915+
{% if env_bookshop_live %}
1916+
<p>I am being edited live!</p>
1917+
<h1>Fallback Title</h1>
1918+
{% else %}
1919+
<p>Standard build output</p>
1920+
<h1>{% my_plugin %}</h1>
1921+
{% endif %}
1922+
```
1923+
endif::jekyll[]
1924+
18781925
=== Disabling Live Editing
18791926

1880-
Some components won't be compatible with live editing, in this case you can disable live editing with on a flag in the component's data. Bookshop will look for any of the following keys:
1927+
Some components won't be compatible with live editing, in this case you can disable live editing with on a flag in the component's data. This is intended for components such as navigation and footer blocks that aren't connected to live editing. In most scenarios, you should use the templating flags in <<Rendering Different Content When Live Editing>>.
1928+
1929+
IMPORTANT: This setting will only apply if the component is rendered directly from a site layout. If this component is within another component, it will still update live (as the parent re-rendering will encapsulate it).
1930+
1931+
Bookshop will look for any of the following keys on a **top-level** component:
18811932

18821933
* live_render
18831934
* liveRender
@@ -1919,8 +1970,6 @@ If you have a specific component that you never want to live edit, you can set `
19191970

19201971
NOTE: Since the blueprint only affects the creation of new components, you will need to add the `_live_render` flag to any existing component data in your front matter.
19211972

1922-
IMPORTANT: This flag will only apply if the component is rendered directly from a site layout. If this component is within another component, it will still update live (as the parent re-rendering will encapsulate it).
1923-
19241973
////
19251974
//
19261975
//

‎javascript-modules/engines/eleventy-engine/lib/engine.js

+1
Original file line numberDiff line numberDiff line change
@@ -108,6 +108,7 @@ export class Engine {
108108
collections: this.precomputed_collections,
109109
...(this.info.data || {}),
110110
...props,
111+
env_bookshop_live: true,
111112
};
112113
}
113114

‎javascript-modules/engines/hugo-engine/lib/engine.js

+4-1
Original file line numberDiff line numberDiff line change
@@ -154,7 +154,10 @@ export class Engine {
154154
logger?.log?.(`Rewritten the template for ${name} to:`);
155155
logger?.log?.(source);
156156
if (!globals || typeof globals !== "object") globals = {};
157-
props = { ...globals, ...props };
157+
props = {
158+
...globals, ...props,
159+
env_bookshop_live: true
160+
};
158161

159162
// If we have assigned a root scope we need to pass that in as the context
160163
if (props["."]) props = props["."];

‎javascript-modules/engines/jekyll-engine/lib/engine.js

+1
Original file line numberDiff line numberDiff line change
@@ -134,6 +134,7 @@ export class Engine {
134134
title: this.meta.title || "",
135135
},
136136
...props,
137+
env_bookshop_live: true,
137138
};
138139
}
139140

‎javascript-modules/integration-tests/features/eleventy/live_editing/eleventy_bookshop_live_granules.feature

+20
Original file line numberDiff line numberDiff line change
@@ -91,3 +91,23 @@ Feature: Eleventy Bookshop CloudCannon Live Editing Granular Steps
9191
Then 🌐 There should be no errors
9292
* 🌐 There should be no logs
9393
* 🌐 The selector h1 should contain "Hello There"
94+
95+
@web
96+
Scenario: Bookshop sets a flag when live editing
97+
Given a component-lib/components/single/single.eleventy.liquid file containing:
98+
"""
99+
{% if env_bookshop_live %}
100+
<h1>LIVE! {{ title }}</h1>
101+
{% else %}
102+
<h1>DEAD? {{ title }}</h1>
103+
{% endif %}
104+
"""
105+
Given 🌐 I have loaded my site in CloudCannon
106+
When 🌐 CloudCannon pushes new yaml:
107+
"""
108+
block:
109+
title: "🫑"
110+
"""
111+
Then 🌐 There should be no errors
112+
* 🌐 There should be no logs
113+
* 🌐 The selector h1 should contain "LIVE! 🫑"

‎javascript-modules/integration-tests/features/hugo/live_editing/hugo_bookshop_live_granules.feature

+20
Original file line numberDiff line numberDiff line change
@@ -102,3 +102,23 @@ Feature: Hugo Bookshop CloudCannon Live Editing Granular Steps
102102
Then 🌐 There should be no errors
103103
* 🌐 There should be no logs
104104
* 🌐 The selector h1 should contain "Hello There"
105+
106+
@web
107+
Scenario: Bookshop sets a flag when live editing
108+
Given a component-lib/components/single/single.hugo.html file containing:
109+
"""
110+
{{ if isset . "env_bookshop_live" }}
111+
<h1>LIVE! {{ .title }}</h1>
112+
{{ else }}
113+
<h1>DEAD? {{ .title }}</h1>
114+
{{ end }}
115+
"""
116+
Given 🌐 I have loaded my site in CloudCannon
117+
When 🌐 CloudCannon pushes new yaml:
118+
"""
119+
block:
120+
title: "🫑"
121+
"""
122+
Then 🌐 There should be no errors
123+
* 🌐 There should be no logs
124+
* 🌐 The selector h1 should contain "LIVE! 🫑"

‎javascript-modules/integration-tests/features/jekyll/live_editing/jekyll_bookshop_live_granules.feature

+20
Original file line numberDiff line numberDiff line change
@@ -90,3 +90,23 @@ Feature: Jekyll Bookshop CloudCannon Live Editing Granular Steps
9090
Then 🌐 There should be no errors
9191
* 🌐 There should be no logs
9292
* 🌐 The selector h1 should contain "Hello There"
93+
94+
@web
95+
Scenario: Bookshop sets a flag when live editing
96+
Given a component-lib/components/single/single.jekyll.html file containing:
97+
"""
98+
{% if env_bookshop_live %}
99+
<h1>LIVE! {{ include.title }}</h1>
100+
{% else %}
101+
<h1>DEAD? {{ include.title }}</h1>
102+
{% endif %}
103+
"""
104+
Given 🌐 I have loaded my site in CloudCannon
105+
When 🌐 CloudCannon pushes new yaml:
106+
"""
107+
block:
108+
title: "🫑"
109+
"""
110+
Then 🌐 There should be no errors
111+
* 🌐 There should be no logs
112+
* 🌐 The selector h1 should contain "LIVE! 🫑"

0 commit comments

Comments
 (0)