Merge pull request #15 from dogeorg/component-directories

Component Directories
dogeorg · Mar 12, 2024 · 146b04a · 146b04a
2 parents 6fa87a7 + fdedc03
commit 146b04a
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 23 deletions.
diff --git a/build-docs.sh b/build-docs.sh
@@ -1,16 +1,41 @@
 #!/bin/bash
 
+# Build the component manifest file (lists all components with demo directories)
+# Write a HTML file that redirects users from fetch.dogecoin.org/<component> to <component>/demo
+
+DIST_COMPONENTS_BASE_DIR="dist"
+
 # Find all component demo directories.
 DEMO_DIRS=$(find src/components -type d -name "demo")
-
-# Collect every component demo directory
-# Copy it to /dist/<component>/demo
 for demo_dir in $DEMO_DIRS
 do
-  component_dirname=$(basename "$(dirname "$demo_dir")")
+  # Get the parent directory of the demo, which is the component directory
+  component_dir="$(dirname "$demo_dir")"
+
+  # Get the basename of the component directory
+  component_dirname=$(basename "$component_dir")
+
   echo "DEMO Dir: $component_dirname"
-  mkdir -p "dist/$component_dirname"
-  cp -R "src/components/$component_dirname/demo/." "dist/$component_dirname/."
+
+  # Define the filename for the component's index.html in the dist directory
+  filename="${DIST_COMPONENTS_BASE_DIR}/${component_dirname}/index.html"
+
+  # Write the HTML content to the file
+  cat << 'EOF' > "$filename"
+<!DOCTYPE html>
+<html>
+  <head>
+    <script type="text/javascript">
+    if (!window.location.pathname.endsWith('/')) {
+      window.location.href = window.location.pathname + '/demo/';
+    }
+    </script>
+  </head>
+<body>
+  <!-- Content here -->
+</body>
+</html>
+EOF
 
   # Append component name to COMPONENTS_JSON
   COMPONENTS_JSON+="\"$component_dirname\": {},"
@@ -23,4 +48,4 @@ COMPONENTS_JSON=${COMPONENTS_JSON%,}
 COMPONENTS_JSON="{\"components\": {$COMPONENTS_JSON}}"
 
 # Write the JSON object to manifest.json
-echo "$COMPONENTS_JSON" > "dist/manifest.json"
+echo "$COMPONENTS_JSON" > "${DIST_COMPONENTS_BASE_DIR}/manifest.json"
diff --git a/build.sh b/build.sh
@@ -4,22 +4,22 @@
 rm -rf dist
 mkdir -p dist
 
-# Find all JavaScript files within src/components directory
-JS_FILES=$(find src/components -type f -name "doge-*.js")
-CSS_FILES=$(find src/components -type f -name "*initial.css")
+# Copy all folders and subfolders within src/components to dist, excluding test files
+rsync -av --exclude='*test.html' --exclude='*test.js' src/components/ dist/
 
-# For each JS file, copy it to the root for convenient
+# For each component, create a file within the root for ease of
 # consumption from fetch.dogecoin.org/<component>.js
-for file in $JS_FILES
-do
-   filename=$(basename "$file")
-   echo "JS File: $filename"
-   cp "$file" "dist/$filename"
+for dir in src/components/*; do
+  if [ -d "$dir" ]; then
+      component_name=$(basename "$dir")
+      echo "export * from \"./${component_name}/${component_name}.js\"" > "dist/${component_name}.js"
+  fi
 done
 
 # For each css file, concatinate and create a single file
 # for component consumers to include within the <head>
 # of their webpage, to reduce flash of unstyled content.
+CSS_FILES=$(find src/components -type f -name "*initial.css")
 for file in $CSS_FILES
 do
    echo "CSS File: $file"

diff --git a/src/components/doge-qr/demo/index.html b/src/components/doge-qr/demo/index.html
@@ -1,12 +1,6 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <script type="text/javascript">
-    if (!window.location.pathname.endsWith('/')) {
-      window.location.href = window.location.pathname + '/';
-    }
-    </script>
-
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="icon" href="../../../../resources/img/favicon.ico" type="image/x-icon">
     <title>Doge Web Components | doge-qr</title>
@@ -48,7 +42,7 @@
 
     <div class="page">
       <header>
-        <a href="../">← Back</a>
+        <a href="/">← Back</a>
         <h1><span class="sans">&lt;doge-qr&gt; </span><span class="soft comic">web component</span></h1>
       </header>