Dev (#169)

* 📦 ci(.github): refactored release-please workflow and readded the npm-publish workflow (not tested)

* 🧪 test(index.njk): readded the generated home content to the home page

also refactored markup to loop back a more sensible layout

* 📦 ci(.github): fixed npm publish and release please actions to release when PR is merged

* 📦 ci(.github): fixed errors in indentation and syntax in workflows for releasing package

* 📦 ci(release-please.yml): fixed syntax and indentation

.github/workflows/npm-publish.yml

@@ -0,0 +1,32 @@
+
+name: NPM package
+
+on : 
+ release:
+   types:
+     - "created"
+
+jobs:
+      build:
+        runs-on: ubuntu-latest
+        steps:
+        - uses: actions/checkout@v4
+        - uses: actions/setup-node@v4    
+          with: 
+            node-version: 20
+        - run: npm i && npm run code:publish
+
+      publish-npm:
+        needs: build
+        runs-on: ubuntu-latest
+        steps:
+         - uses: actions/checkout@v4
+         - uses: actions/setup-node@v4
+           with: 
+              node-version: 20
+              registry-url: https://registry.npmjs.org/
+         - run: |
+            npm i
+            npm test
+             env:
+              NPM_TOKEN: ${{secrets.NPM_PUBLISH}}    

.github/workflows/release-please.yml

@@ -0,0 +1,42 @@
+on:
+  push:
+    branches:
+      - main
+name: release-please
+jobs:
+  release-please:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: google-github-actions/release-please-action@v4
+        id: release
+        with:
+          release-type: node
+          package-name: release-please-action
+    # The logic below handles the npm publication:
+      - uses: actions/checkout@v4
+      # these if statements ensure that a publication only occurs when
+      # a new release is created:
+        if: ${{ steps.release.outputs.release_created }}
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+         node-version: 20
+
+        if: ${{ steps.release.outputs.release_created }}
+      - run: npm i
+        if: ${{ steps.release.outputs.release_created }}
+      - run: |
+         cat << EOF > "$HOME/.npmrc" //registry.npmjs.org/:_authToken=$NPM_PUBLISH EOF
+        env:
+         NPM_TOKEN:${{secrets.NPM_PUBLISH}}  
+        if: ${{ steps.release.outputs.release_created }}
+      - name: Build package
+        run: cd huetiful
+        if: ${{ steps.release.outputs.release_created }}
+      - name: Run NPM publish
+        run: |
+          npm run code:publish
+          npm run publish
+        env:
+          NPM_TOKEN:${{secrets.NPM_PUBLISH}}  
+        if: ${{ steps.release.outputs.release_created }}

docs/assets/xml/views/index.njk

@@ -1,11 +1,13 @@
 {% extends "./layouts/base.njk" %}
 
 {% block content %}
-
+{{home.content}}
 {% for mod, prop in home.demoData %}
 
+<h2 class="font-mono text-slate-600 text-left text-lg font-semibold">Demos</h2>
+
 <section class="flex-col bg-slate-100 my-3">
-    <h2 class="font-mono text-slate-600 text-left text-lg">Demos</h2>
+
 
     <h3 class="font-sans text-xl font-semibold dark:text-slate-300 text-slate-700">{{mod}}</h3>
 
@@ -15,9 +17,9 @@
     <h4 class="font-sans text-slate-700  dark:text-slate-300 font-semibold text-base">{{func}}</h4>
     <p class="pt-3 font-sans text-slate-500 text-sm ">{{props.description}}</p>
 
-    <hr class="divide-y">
+    <hr class="divide-y-[1.75px] divide-slate-300 ">
 
-    <div class="flex space-x-2 p-2 flex-wrap">
+    <div class="flex space-x-2 flex-wrap">
         {% if home.isColorCollection(props.expect) %}
         {% for color in props.expect %}
         <div class="flex-row space-y-2 flex-wrap items-start">