Review #220 (review)

- readded .github folder
- changed netlify.toml indentation
- fixed usage of dynamic Tailwind class not being present in the css output

Signed-off-by: Jean-Baptiste Bianchi <[email protected]>

Author: JBBianchi

.github/CODEOWNERS

@@ -0,0 +1 @@
+*       @ricardozanini @cdavernas

.github/ISSUE_TEMPLATE/website.md

@@ -0,0 +1,10 @@
+---
+name: Website Enhancement Request
+about: Suggest an enhancement to the Serverless Workflow Specification Website
+labels: kind/feature
+
+---
+
+**What would you like to be added**:
+
+**Why is this needed**:

.github/OWNERS

@@ -0,0 +1,8 @@
+reviewers:
+  - ricardozanini
+  - cdavernas
+approvers:
+  - ricardozanini
+  - cdavernas
+labels:
+  - sig/contributor-experience

.github/PULL_REQUEST_TEMPLATE.md

@@ -0,0 +1,7 @@
+**Many thanks for submitting your Pull Request :heart:!**
+
+**What this PR does / why we need it**:
+
+**Special notes for reviewers**:
+
+**Additional information (if needed):**

netlify.toml

@@ -1,3 +1,3 @@
 [build]
-  command = "npm run build"
-  publish = "dist"
+command = "npm run build"
+publish = "dist"

src/components/Card.astro

@@ -16,26 +16,50 @@ const {
 } = Astro.props;
 ---
 
-<div class:list={['card', `text-${alignment}`]}>
+<div class:list={[
+  'card', 
+  (
+    alignment === 'start' ? `text-start` :
+    alignment === 'end' ? `text-end` :
+    `text-center`
+  ),
+]}>
   <div class="card-body">
     { image && 
-      <div class:list={['my-4', 'flex', `justify-${alignment}`]}>
-        <img src={image} class={`img-logo-${imageSize}`} />
+      <div class:list={[
+        'my-4', 
+        'flex', 
+        (
+          alignment === 'start' ? `justify-start` :
+          alignment === 'end' ? `justify-end` :
+          `justify-center`
+        ),
+      ]}>
+        <img src={image} class={`img--${imageSize}`} />
       </div>
     }
     { icon && <i class={icon}></i> }
-    <h3 class:list={['card-title', `justify-${alignment}`]}>{ title }</h3>
+    <h3 class:list={[
+      'card-title',
+      (
+          alignment === 'start' ? `justify-start` :
+          alignment === 'end' ? `justify-end` :
+          `justify-center`
+        ),
+    ]}>
+      { title }
+    </h3>
     <slot />
   </div>
 </div>
 
 <style>
-  .img-logo-small {
+  .img--small {
     height: 50px;
     max-width: none;
   }
 
-  .img-logo-medium {
+  .img--medium {
     height: 75px;
     max-width: none;
   }

src/components/Section.astro

@@ -1,38 +1,50 @@
 ---
 type colorBase = 'primary' | 'secondary' | 'accent' | 'neutral';
-type textColor = colorBase | 'base';
-type bgColor = colorBase | 'base-100' | 'base-200' | 'base-300';
+type size = 'small' | 'medium' | 'large';
 interface Props {
-  paddingY?: '4' | '8' | '16',
-  paddingX?: '4' | '8 '| '16',
-  bg?: bgColor;
-  color?: textColor;
+  paddingY?: size;
+  paddingX?: size;
   isGrid?: boolean;
-  width?: '3' | '5' | '7' | 'full',
+  width?: size | 'full';
   title?: string;
   subTitle?:string;
+  class?: string;
 }
 
 const {
-  paddingY = '16',
-  paddingX = '4',
+  paddingY,
+  paddingX,
   isGrid = false,
-  bg,
-  color,
   width = '7',
   title,
   subTitle,
+  class: className
 } = Astro.props;
 ---
 
 <div class:list={[
-    `py-${paddingY}`, 
-    `px-${paddingX}`, 
-    bg ? `bg-${bg}` : '',
-    color ? `text-${color}-content` : ''
+    className,
+    (
+      paddingY === 'small' ? `py-4` :
+      paddingY === 'medium' ? `py-8` : 
+      `py-16`
+    ),
+    (
+      paddingX === 'large' ? `px-16` :
+      paddingX === 'medium' ? `px-8` : 
+      `px-4`
+    ),
   ]}
 >
-  <div class:list={['mx-auto', `max-w-${width}xl` ]}>
+  <div class:list={[
+    'mx-auto', 
+    (
+      width === 'full' ? `max-w-full` :
+      width === 'small' ? `max-w-3xl` :
+      width === 'medium' ? `max-w-5xl` :
+      `max-w-7xl`
+    ),
+    ]}>
     { title && <h2 class:list={['text-3xl', 'font-bold', 'text-center', !subTitle ? 'mb-12' : '']}>{ title }</h2> }
     { subTitle && <p class="text-1xl text-center mb-4">{ subTitle }</p> }
     { isGrid ?

src/pages/index.astro

@@ -24,7 +24,7 @@ import { Code } from 'astro:components';
     </div>
   </div>
   <!-- Sub Hero -->
-  <Section width="3" bg="primary" color="primary">
+  <Section width="small" class="bg-primary text-primary-content">
     <p class="text-2xl text-center font-bold">The Serverless Workflow DSL is a high-level language that reshapes the terrain of workflow creation, boasting a design that is ubiquitous, intuitive, imperative, and fluent.</p>
   </Section>
 
@@ -51,7 +51,7 @@ import { Code } from 'astro:components';
   </Section>
 
   <!-- Samples -->
-  <Section title="User-Friendly DSL: Workflows Made Simple" bg="base-200">
+  <Section title="User-Friendly DSL: Workflows Made Simple" class="bg-base-200">
       <div role="tablist" class="tabs tabs-lifted">
         <input type="radio" name="code_tabs" role="tab" class="tab" aria-label="Minimal" checked />
         <div role="tabpanel" class="tab-content bg-base-100 border-base-300 rounded-box p-6">
@@ -112,7 +112,7 @@ do:
   </Section>
 
   <!-- Projects -->
-  <Section title="Open Source projects supporting our DSL" bg="base-200" isGrid={true}>
+  <Section title="Open Source projects supporting our DSL" class="bg-base-200" isGrid={true}>
     <Card title="Apache EventMesh Workflow" image="img/logos/eventmesh.png">
       <p>Apache EventMesh Workflow is a cloud vendor-independent, cloud-native-oriented Serverless Workflow Runtime based on Serverless Workflow specification, and provides durability, reliability, scalability, and observability capabilities.</p>
       <a class="link link-primary" href="https://github.com/apache/eventmesh-workflow" target="_blank" rel="noopener">Get Started</a>
@@ -160,7 +160,7 @@ do:
   </Section>
 
   <!-- Sponsors -->
-  <Section title="Support our Project" subTitle="Our sponsors, along with our community, help our project grow and stay vendor-neutral through their donations." bg="base-200">
+  <Section title="Support our Project" subTitle="Our sponsors, along with our community, help our project grow and stay vendor-neutral through their donations." class="bg-base-200">
     <div class="mx-auto w-full md:w-1/2 lg:w-1/3 card text-center">
       <Card title="Neuroglia" image="img/logos/neuroglia.png" imageSize="medium">
         <p>Neuroglia is a consultancy and solution design company for the digital transformation of companies and their services.</p>