Fix merge conflict

docs/devGuide/projectManagement.md

@@ -99,17 +99,21 @@ For general best practices, refer to the guide [_Working with PRs_ @SE-EDU](http
 
 ## Doing a Release
 
-<box type="important" seamless>
-
-**Attention new maintainers!** Ensure that:
-
-* You have the rights to push to master branch on [MarkBind's repository](https://github.com/MarkBind/markbind), and also to make new releases.
-  * You can check by running `git push --dry-run` to check if you have the correct permissions
-* You have the rights on [npm](https://www.npmjs.com/) to make a new release.
-* You have logged in to npm on your terminal with `npm login` (necessary to publish packages to npm).
-</box>
-
-<br>
+1. **Make sure you have the correct permissions** for [MarkBind's GitHub repository](https://github.com/MarkBind/markbind) and [npm organization](https://www.npmjs.com/org/markbind).
+    * For GitHub, you need rights to **push to master branch** and **make new releases**.
+        * To check if you can make a new release and push to master branch, go to the [release page](https://github.com/MarkBind/markbind/releases) and check for the "Draft a new release" button. 
+          If missing, you may not have permissions for a release.
+
+    * For npm, you need to be in the [MarkBind organization](https://www.npmjs.com/org/markbind).
+
+      * To check if you are in the MarkBind organization, go to your npm profile and check if MarkBind is listed under organizations.
+        <pic src="/images/npm-profile.jpg" width="100%" alt="npm profile">
+        Example of profile that has been added to Markbind organisation
+        </pic>
+      * There should be 4 packages listed under the organization, `markbind-cli`, `@markbind/core`, `@markbind/core-web` and `@markbind/vue_components`. 
+      * Notably, the first three are packages that we publish every release while the last one has since become a private package consumed internally.
+
+1. **Login to your npm account in your terminal** by running `npm login`.
 
 1. **Make sure to start with a "clean slate"** by running `npx lerna clean` and then `npm run setup` in the root MarkBind directory.
 
@@ -378,4 +382,4 @@ Note that:
   * Result: 'tlylt' will be updated to have both icons(code and doc)
 
 {% from "njk/common.njk" import previous_next %}
-{{ previous_next('githubActions/markbindReusableWorkflows', 'styleGuides') }}
+{{ previous_next('githubActions/markbindReusableWorkflows', 'styleGuides') }}

docs/userGuide/syntax/annotations.md

@@ -14,7 +14,7 @@ The x and y coordinates of each Annotate Point are relative to the image and are
 <variable name="highlightStyle">html</variable>
 <variable name="code">
 
-<annotate src="../../images/annotateSampleImage.png" width="500" alt="Sample Image">
+<annotate src="../../images/annotateSampleImage.png" width="500" alt="Sample Image" lazy>
   <!-- Minimal Point -->
   <a-point x="25%" y="25%" content="This point is 25% from the left and 25% from the top" />
   <!-- Customize Point Size (default size is 40px) -->
@@ -191,11 +191,12 @@ Here we showcase some use cases of the Annotate feature.
 This is effectively the same as the options used for the [picture](#pictures) component.
 
 | Name   | Type      | Default | Description                                                                                                                                                                                                           |
-| ------ | --------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+|--------| --------- | ------- |-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
 | alt    | `string`  |         | **This must be specified.**<br>The alternative text of the image.                                                                                                                                                     |
 | src    | `string`  |         | **This must be specified.**<br>The URL of the image.<br>The URL can be specified as absolute or relative references. More info in: _[Intra-Site Links]({{baseUrl}}/userGuide/formattingContents.html#intraSiteLinks)_ |
 | height | `string`  |`''`| The height of the image in pixels.                                                                                                                                                                                    |
 | width  | `string`  |`''`| The width of the image in pixels.<br>If both width and height are specified, width takes priority over height. It is to maintain the image's aspect ratio.                                                            |
+| lazy   | `boolean` | false | The `<annotate>` component lazy loads if this attribute is specified.<br>**Either the height or width should be specified to avoid layout shifts while lazy loading images.**                                         |
 
 </div>
 

docs/userGuide/syntax/code.md

@@ -281,7 +281,17 @@ A _wrap text_ button can be added to code blocks using the `codeBlockWrapButtons
 ##### Printing optimization
 
 <div id="code-print-optimization">
-Markbind enhances the readability of your code blocks for printing by applying soft wrapping, ensuring code doesn't get cut off. Additionally, line numbers are added to maintain context when wrapping occurs.
+Markbind enhances the readability of your code blocks for printing by 
+
+- Applying soft wrapping, ensuring code doesn't get cut off
+- Adding line numbers to maintain context when wrapping occurs
+- Automatically changing dark code theme to light
+- Removing [codeBlockCopyButtons]({{baseUrl}}/userGuide/formattingContents.html#copy-button) and [codeBlockWrapButtons]({{baseUrl}}/userGuide/formattingContents.html#wrap-text-button)
+
+<box type="warning" seamless> 
+    There are some issues with printing in Firefox. Please use other browsers such as Chrome if these issues persist.
+</box>
+
 </div>
 <br>
 

docs/userGuide/syntax/footnotes.md

@@ -46,5 +46,6 @@ belong to the previous footnote.
 ```
 </div>
 <div id="examples" class="d-none">
+
 1 + 1 = 2 ^[Math]
 </div>

docs/userGuide/syntax/pictures.md

@@ -5,7 +5,7 @@
 <include src="codeAndOutput.md" boilerplate >
 <variable name="highlightStyle">html</variable>
 <variable name="code">
-<pic src="https://markbind.org/images/logo-lightbackground.png" width="300" alt="Logo">
+<pic src="https://markbind.org/images/logo-lightbackground.png" width="300" alt="Logo" lazy>
   MarkBind Logo
 </pic>
 </variable>
@@ -18,11 +18,12 @@ alt | `string` | | **This must be specified.**<br>The alternative text of the im
 height | `string` | | The height of the image in pixels.
 src | `string` | | **This must be specified.**<br>The URL of the image.<br>The URL can be specified as absolute or relative references. More info in: _[Intra-Site Links]({{baseUrl}}/userGuide/formattingContents.html#intraSiteLinks)_
 width | `string` | | The width of the image in pixels.<br>If both width and height are specified, width takes priority over height. It is to maintain the image's aspect ratio.
+lazy | `boolean` | false | The `<pic>` component lazy loads if this attribute is specified.<br>**Either the height or width should be specified to avoid layout shifts while lazy loading images.**
 
 <div id="short" class="d-none">
 
 ```html
-<pic src="https://markbind.org/images/logo-lightbackground.png" width="300" alt="Logo">
+<pic src="https://markbind.org/images/logo-lightbackground.png" width="300" alt="Logo" lazy>
   MarkBind Logo
 </pic>
 ```

packages/cli/test/functional/test_site/expected/index.html

@@ -237,6 +237,11 @@ <h3 id="testing-site-nav">Testing Site-Nav<a class="fa fa-anchor" href="#testing
               Here is an inline note.<trigger for="pop:footnotefn-1-3"><sup class="footnote-ref"><a aria-describedby="footnote-label" href="#fn-1-3">[3]</a></sup></trigger>
             </p>
           </div>
+          <p><strong>Test include footnotes from hash</strong></p>
+          <div>
+            <p>text<trigger for="pop:footnotefn-2-1"><sup class="footnote-ref"><a aria-describedby="footnote-label" href="#fn-2-1">[1]</a></sup></trigger>, text2<trigger for="pop:footnotefn-2-2"><sup class="footnote-ref"><a aria-describedby="footnote-label" href="#fn-2-2">[2]</a></sup></trigger>
+            </p>
+          </div>
           <p><strong>Nunjucks SetExt</strong></p>
           <div> front back </div>
           <p>arrayVarItem1</p>
@@ -789,6 +794,29 @@ <h6 class="always-index" id="level-6-header-outside-headingsearchindex-with-alwa
                 note.</p>
             </li>
 
+
+            <popover id="pop:footnotefn-2-1">
+              <template #content>
+                <div>
+                  <p>footnote1</p>
+
+                </div>
+              </template>
+            </popover>
+            <popover id="pop:footnotefn-2-2">
+              <template #content>
+                <div>
+                  <p>footnote2</p>
+
+                </div>
+              </template>
+            </popover>
+            <li id="fn-2-1" class="footnote-item">
+              <p>footnote1</p>
+            </li>
+            <li id="fn-2-2" class="footnote-item">
+              <p>footnote2</p>
+            </li>
           </ol>
         </section>
 

packages/cli/test/functional/test_site/index.md

@@ -37,6 +37,10 @@ Hence, the contained markdown should be parsed and output as is, without any par
 
 <include src="testFootnotes.md" />
 
+**Test include footnotes from hash**
+
+<include src="testHashFootnotes.md#import" />
+
 **Nunjucks SetExt**
 
 {% ext externalVar = "_markbind/variable.json" %}

packages/cli/test/functional/test_site/testHashFootnotes.md

@@ -0,0 +1,4 @@
+<div id="import">
+
+text^[footnote1], text2^[footnote2]
+</div>

packages/core-web/src/styles/markbind.css

@@ -1,3 +1,5 @@
+@import url("../../asset/css/codeblock-light.min.css") print;
+
 :root {
     --sticky-header-height: 0;
 }
@@ -27,7 +29,7 @@ pre.hljs > code {
     background: none;
 }
 
-pre > code.hljs { 
+pre > code.hljs {
     background-clip: padding-box;
     border-radius: 5px;
     counter-reset: line;
@@ -63,24 +65,13 @@ pre > code.hljs[heading] {
     display: block;
 }
 
-/* switch to light style on print view */
 @media print {
     pre > code.hljs {
         white-space: pre-wrap;
         word-wrap: break-word;
         word-break: break-all;
     }
 
-    code.hljs.inline {
-        background: ghostwhite;
-        color: #333;
-        border: 0.5px solid #d4d4d4;
-    }
-
-    code span.highlighted {
-        background: lavender;
-    }
-
     .hljs:not(.inline).line-numbers-print > span {
         padding: 0 0.5em 0 3.5em;
         position: relative;
@@ -102,6 +93,12 @@ pre > code.hljs[heading] {
         width: 3em;
         height: 100%;
     }
+
+    /* force printing the highlighting colour */
+    .hljs span.highlighted{
+        -webkit-print-color-adjust:exact;
+        background:#e6e6fa !important;
+    }
 }
 
 kbd {

packages/core/src/html/NodeProcessor.ts

@@ -265,6 +265,20 @@ export class NodeProcessor {
          */
         if (!_.has(node.attribs, 'v-pre')) { node.attribs['v-pre'] = ''; }
         break;
+      case 'pic':
+      case 'annotate':
+        if (_.has(node.attribs, 'lazy')
+            && !(_.has(node.attribs, 'width') || _.has(node.attribs, 'height'))) {
+          const filePath = context.callStack.length > 0 ? context.callStack[context.callStack.length - 1]
+            : context.cwf;
+          logger.warn(
+            `${filePath} --- `
+              + 'Both width and height are not specified when using lazy loading in the file and'
+              + ' it might cause shifting in page layouts. '
+              + 'To ensure proper functioning of lazy loading, please specify either one or both.\n',
+          );
+        }
+        break;
       default:
         break;
       }

packages/core/src/html/includePanelProcessor.ts

@@ -165,6 +165,15 @@ function _deleteIncludeAttributes(node: MbNode) {
   delete node.attribs.omitFrontmatter;
 }
 
+function buildGetNextFootnodeNumber() {
+  let footnoteNumber = 0;
+  function getFootnoteNumber() {
+    footnoteNumber += 1;
+    return footnoteNumber;
+  }
+  return getFootnoteNumber;
+}
+
 /**
  * PreProcesses includes.
  * Replaces it with an error node if the specified src is invalid,
@@ -173,7 +182,8 @@ function _deleteIncludeAttributes(node: MbNode) {
 export function processInclude(node: MbNode, context: Context, pageSources: PageSources,
                                variableProcessor: VariableProcessor, renderMd: (text: string) => string,
                                renderMdInline: (text: string) => string,
-                               config: Record<string, any>): Context {
+                               config: Record<string, any>,
+                               getNextFootnodeNumber: () => number = buildGetNextFootnodeNumber()): Context {
   if (_.isEmpty(node.attribs.src)) {
     const error = new Error(`Empty src attribute in include in: ${context.cwf}`);
     logger.error(error);
@@ -230,6 +240,27 @@ export function processInclude(node: MbNode, context: Context, pageSources: Page
     const $ = cheerio.load(actualContent);
     const actualContentOrNull = $(hash).html();
     actualContent = actualContentOrNull || '';
+    if (actualContent !== '') {
+      const hashNode = $(hash);
+      const footnodeHrefs = hashNode.find('a[aria-describedby="footnote-label"]')
+        .map(function (this: any) {
+          $(this).text(`[${getNextFootnodeNumber()}]`);
+          return $(this).attr('href');
+        })
+        .get();
+      if (footnodeHrefs.length > 0) {
+        const tempFootnotes = $('<mb-temp-footnotes></mb-temp-footnotes>');
+        footnodeHrefs.forEach((href) => {
+          // substring function called to remove the # from the href
+          const listItem = $('<li></li>').attr('id', href.substring(1))
+            .addClass('footnote-item')
+            .html($(`${href}.footnote-item`).html()!);
+          tempFootnotes.append(listItem);
+        });
+        hashNode.append(tempFootnotes);
+        actualContent = hashNode.html()!;
+      }
+    }
 
     if (actualContentOrNull === null && !isOptional) {
       const error = new Error(`No such segment '${hash}' in file: ${actualFilePath}\n`

packages/core/src/plugins/codeBlockCopyButtons.ts

@@ -23,7 +23,7 @@ const COPY_ICON = `
 `;
 
 function getButtonHTML() {
-  const html = `<button onclick="copyCodeBlock(this)" class="function-btn">
+  const html = `<button onclick="copyCodeBlock(this)" class="function-btn d-print-none">
     <div class="function-btn-body">
     ${COPY_ICON}
     </div>

packages/core/src/plugins/codeBlockWrapButtons.ts

@@ -28,7 +28,7 @@ const WRAP_ICON = `
 `;
 
 function getButtonHTML() {
-  const html = `<button onclick="toggleCodeBlockWrap(this)" class="function-btn">
+  const html = `<button onclick="toggleCodeBlockWrap(this)" class="function-btn d-print-none">
     <div class="function-btn-body">
       ${WRAP_ICON}
     </div>

packages/core/src/utils/fsUtil.ts

@@ -43,7 +43,10 @@ export function copySyncWithOptions(src: string, dest: string, options: CopyOpti
   const files = fs.readdirSync(src);
   files.forEach((file) => {
     const curSource = path.join(src, file);
-    const curDest = path.join(dest, file);
+    let curDest = path.join(dest, file);
+    if (file === 'gitignore') {
+      curDest = path.join(dest, '.gitignore');
+    }
 
     if (fs.lstatSync(curSource).isDirectory()) {
       if (!fs.existsSync(curDest)) {

packages/core/template/default/.gitignore → packages/core/template/default/gitignore

@@ -20,4 +20,4 @@ _site/
 # IDE configs
 .vscode/
 .idea/*
-*.iml
+*.iml