Merge pull request #361 from fluxcd/fix-update-kubecon

Fix update kubecon

Author: kingdonb

KUBECON.md

@@ -3,14 +3,17 @@
 # KubeCon activities!
 
 
-{{< figure src="/img/flux-horizontal-color.png" alt="Flux Logo" class="flux-logo-inner-header-left" >}}
+<div class="clearfix">
+<div class="flux-logo-inner-header-left">
+{{< figure src="/img/flux-horizontal-color.png" alt="Flux Logo" >}}
+</div>
 
-# KubeCon Paris 2024
+<div class="float-header-kubecon"><h1>KubeCon Paris 2024</h1><p>March 19-22, 2024</p></div>
 
-March 19-22, 2024
 
-
-{{< figure src="/img/blob-waving.gif" alt="Blob Waving" class="inner-header-right-align" >}}
+<div class="inner-header-right-align">
+{{< figure src="/img/blob-waving.gif" alt="Blob Waving" >}}
+</div></div>
 
 # Flux news!
 
@@ -19,13 +22,13 @@ March 19-22, 2024
 [Second Security audit: No CVEs!](https://fluxcd.io/blog/2023/11/flux-security-audit/)
 
 
-{{< figure src="/img/flux-cuttlefish-stickers.jpeg" alt="Custom printed stickers with cuttlefish mascot and Flux logos" class="stickers-float-left" >}}
-
-# Flux Booth fun!
+<div class="clearfix">
+  <div class="stickers-float-left">
+{{< figure src="/img/flux-cuttlefish-stickers.jpeg" alt="Custom printed stickers with cuttlefish mascot and Flux logos" >}}
+</div>
 
-Want a bespoke unique all-your-own cuttlefish sticker? Complete the challenge and pick up a human-intelligence or artificial-intelligence Flux sticker! Deploy [the podinfo sample app](https://github.com/stefanprodan/podinfo) and change the text to something like "Cuttlefish playing tennis" and then come by the Flux booth at KubeCon. 😸👩🏻‍🎨🎨
 
-Visit the Flux booth in the KubeCon Project Pavilion to meet the Flux maintainers and contributors for demos and fun!
+<div class="float-booth-fun"><h1>Flux Booth fun!</h1><p>Want a bespoke unique all-your-own cuttlefish sticker? Complete the challenge and pick up a human-intelligence or artificial-intelligence Flux sticker! Deploy [the podinfo sample app](https://github.com/stefanprodan/podinfo) and change the text to something like "Cuttlefish playing tennis" and then come by the Flux booth at KubeCon. 😸👩🏻‍🎨🎨</p><p>Visit the Flux booth in the KubeCon Project Pavilion to meet the Flux maintainers and contributors for demos and fun!</p></div></div>
 
 # Flux talks @ KubeCon Paris!
 

script/update-kubecon.sh

@@ -10,6 +10,14 @@
 TEMP_FILE=kubecon.html
 OUT_FILE=KUBECON.md
 
+sed=sed
+head=head
+
+if [[ "$OSTYPE" == "darwin"* ]]; then
+  sed=gsed
+  head=ghead
+fi
+
 if [[ -z "$DEBUG" ]]; then
   wget https://github.com/suntong/html2md/releases/download/${HTML2MD_VER}/${HTML2MD}.tar.gz -O ${HTML2MD}.tar.gz
   tar xvf ${HTML2MD}.tar.gz
@@ -21,17 +29,30 @@ fi
 # sed 2: make site top-link self-referential, it should point at /kubecon
 # sed 3: remove empty image alt ref with no significance (branding logo)
 # sed 4-6: detect the images from their alt tags, then replace with figure refs
+# sed 7: the header which is meant to float between images must also have float
+# sed 8: flux booth fun (a caption with a heading h1 followed by two paragraphs!)
 wget ${SOURCE_SITE} -O ${TEMP_FILE} \
-  && ${HTML2MD_BIN} -i ${TEMP_FILE} |sed '1,6d'|head -n -13 \
-  | sed 's_# \[Copy heading link\](\\#h\.[a-z0-9]*)[[:space:]]*_# _' \
-  | sed 's_/view/flux-kubecon-paris-2024/home_/kubecon_' \
-  | sed -E 's_\[!\[\]\([^)]+\)_[_g' \
-  | sed -E 's_!\[flux-logo-inner-header-left[^)]+\)_\
-{{< figure src="/img/flux-horizontal-color.png" alt="Flux Logo" class="flux-logo-inner-header-left" >}}_g' \
-  | sed -E 's_!\[inner-header-right-align[^)]+\)_\
-{{< figure src="/img/blob-waving.gif" alt="Blob Waving" class="inner-header-right-align" >}}_g' \
-  | sed -E 's_!\[stickers-float-left[^)]+\)_\
-{{< figure src="/img/flux-cuttlefish-stickers.jpeg" alt="Custom printed stickers with cuttlefish mascot and Flux logos" class="stickers-float-left" >}}_g' \
+  && ${HTML2MD_BIN} -i ${TEMP_FILE} |$sed '1,6d'|$head -n -13 \
+  | $sed 's_# \[Copy heading link\](\\#h\.[a-z0-9]*)[[:space:]]*_# _' \
+  | $sed 's_/view/flux-kubecon-paris-2024/home_/kubecon_' \
+  | $sed -E 's_\[!\[\]\([^)]+\)_[_g' \
+  | $sed -E 's_!\[flux-logo-inner-header-left[^)]+\)_\
+<div class="clearfix">\
+<div class="flux-logo-inner-header-left">\
+{{< figure src="/img/flux-horizontal-color.png" alt="Flux Logo" >}}\
+</div>_g' \
+  | $sed -E 's_!\[inner-header-right-align[^)]+\)_\
+<div class="inner-header-right-align">\
+{{< figure src="/img/blob-waving.gif" alt="Blob Waving" >}}\
+</div></div>_g' \
+  | $sed -E 's_!\[stickers-float-left[^)]+\)_\
+<div class="clearfix">\
+  <div class="stickers-float-left">\
+{{< figure src="/img/flux-cuttlefish-stickers.jpeg" alt="Custom printed stickers with cuttlefish mascot and Flux logos" >}}\
+</div>_g' \
+  | $sed -z 's_# KubeCon Paris 2024\n\nMarch 19-22, 2024_<div class="float-header-kubecon"><h1>KubeCon Paris 2024</h1><p>March 19-22, 2024</p></div>_' \
+  | $sed -Ez 's_# Flux Booth fun!\n\n([^\n]+)\n\n([^\n]+)\n\n#_\
+<div class="float-booth-fun"><h1>Flux Booth fun!</h1><p>\1</p><p>\2</p></div></div>\n\n#_' \
     > ${OUT_FILE}
 
 if [[ -z "$DEBUG" ]]; then