diff --git a/.nojekyll b/.nojekyll deleted file mode 100644 index e69de29..0000000 diff --git a/DEPLOYMENT.html b/DEPLOYMENT.html deleted file mode 100644 index 39a1722..0000000 --- a/DEPLOYMENT.html +++ /dev/null @@ -1,264 +0,0 @@ - - - - CL-web-components - - - - - - -
-Caltech Library logo -
- - -
-

Deployment Workflows

-

This guide explains how to deploy CL-web-components -depending on what changed.

-
-

Prerequisites

-

A media.env file must exist in the project root before -deploying to S3.

-

It must contain:

-
BUCKET_NAME
-BASE_URL
-DISTRIBUTION_ID
-

This file is included in gitignore and is not committed to -git.

-
-

Deploy Documentation Changes

-

Use this workflow when only documentation (.md) -files have changed.

-

Step 1. Convert -mardown files to html files

-
make website
-

This command:

- -

Step 2. Save and push -your working branch

-

If you added new files, stage them first:

-
git add <filename>
-

Then commit and push:

-
make save msg="your commit message"
-

make save uses git commit -am which only -commits already-tracked files. New files must be staged with -git add first.

-

Step 3. Publish html -files to GitHub Pages

-
./publish.bash
-

This script will prompt you:

-
You're in main branch
-You need to pull in changes to the gh-pages branch to publish
-process Y/n
-

Enter y to proceed.

-

It will:

- -
-

Deploy Updated Web Component -Code

-

Use this workflow when component code in src/ -has changed and needs to be deployed to the CDN.

-

Step 1. Build compiled -JavaScript

-
make build
-

This command runs deno task build and bundles:

- -

Step 2. Preview the S3 -upload (optional)

-
./publish_to_s3.bash dry-run
-

This shows which files will be uploaded without making changes.

-

Step 3. Build the -documentation website

-
make website
-

Step 4. Save and push -your working branch

-

If you added new files, stage them first:

-
git add <filename>
-

Then commit and push:

-
make save msg="your commit message"
-
-

make save uses git commit -am which only -commits already-tracked files. New files must be staged with -git add first.

-
-

Step 5. Deploy to S3 -and refresh the CDN

-
./publish_to_s3.bash
-

This script:

- -

Step 6. Publish html -files to GitHub Pages

-
./publish.bash
-

This script will prompt you:

-
You're in main branch
-You need to pull in changes to the gh-pages branch to publish
-process Y/n
-

Enter y to proceed.

-
-

Deploy a New Release

-

Use this workflow when creating a versioned GitHub -release.

-

Step 1. Update release -metadata

-

Edit codemeta.json and update:

- -

Step 2. Build compiled -output

-
make build
-

This command also regenerates several files from -codemeta.json:

- -

Step 3. Build the -distribution bundle

-
make dist
-

This command:

- -
cl-web-components-<version>.zip
-

Step 4. Save and -push your working branch

-

If you added new files, stage them first:

-
git add <filename>
-

Then commit and push:

-
make save msg="your commit message"
-
-

make save uses git commit -am which only -commits already-tracked files. New files must be staged with -git add first.

-
-

Step 5. Create a draft -GitHub release

-
./release.bash
-

This script:

- -

Step 6. Publish the release

-

Open the GitHub releases page and publish the draft:

-

https://github.com/caltechlibrary/CL-web-components/releases

-
-

Command Reference

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
TaskCommand
Compile source codemake build
Build documentation websitemake website
Save and push working branchmake save msg="your message"
Publish docs to GitHub Pages./publish.bash
Preview S3 deployment./publish_to_s3.bash dry-run
Deploy JS to S3 and invalidate CDN cache./publish_to_s3.bash
Invalidate CDN cache only./invalidate_cdn.bash
Build distribution bundlemake dist
Create GitHub release./release.bash
-
-
- - - diff --git a/DEVELOPERS.html b/DEVELOPERS.html deleted file mode 100644 index 8f1f424..0000000 --- a/DEVELOPERS.html +++ /dev/null @@ -1,53 +0,0 @@ - - - - CL-web-components - - - - - - -
-Caltech Library logo -
- - -
-

Developer Notes

-

This is a new endeavor for Caltech Library. Our practices are -evolving as we develop this project. You should expected periodically -make course corrections. The following documentation will highlight our -approaches and techniques to solving the challenges of developing a web -component library for libraries, archives and museums.

-

See the user manual for developer -documentation.

-

Adding new components

-

New web components should be placed in the src -directory. This is so they can be bundled into the complete -cl-web-components.js. It also allows us to leverage other -JavaScript or type script packages hosted at jsr.io. Bundled versions of the components are -presented in the root repository along side the mod.js -file.

-

Updating existing web -components

-

If you need to update an existing web components you should do so in -the src directory. If you “fix” the one in the root -directory it’ll get overwritten the next time the bundler is run.

-
- - - diff --git a/INSTALL.html b/INSTALL.html deleted file mode 100644 index 74e5bc0..0000000 --- a/INSTALL.html +++ /dev/null @@ -1,58 +0,0 @@ - - - - CL-web-components - - - - - - -
-Caltech Library logo -
- - -
-

CL-web-components

-

The CL-web-components repository provide web components for Library, -Archive and Museum related projects implemented at Caltech Library. They -are available for import from https://caltechlibrary.github.io/CL-web-components using -the following import statement, `import * as clwc from -“https://caltechlibrary.github.io/CL-web-compents/mod.js”.

-

It recommended that you download the Zip file containing the -individual components as well as the bundled components from https://github.com/caltechlibrary/CL-web-components/releases. -Each component is bundled individually as well as all together in the -file cl-web-components.js.

-

The zip files are provided for each release. They include the release -number in the filename. The combined bundle includes the version, -releaseDate, releaseHash and licenseText in the bundle.

-

Here’s an example of getting the v0.0.11 -cl-web-components.js combined bundled from the release on -macOS or Linux.

-
curl -L -O https://github.com/caltechlibrary/CL-web-components/releases/download/v0.0.10/cl-web-components-0.0.11.zip
-unzip cl-web-components-0.0.11.zip cl-web-components.js
-

And on Windows using PowerShell.

-
irm -OutFile recipes.jsonl `
-  https://github.com/caltechlibrary/CL-web-components/releases/download/v0.0.10/cl-web-components-0.0.11.zip
-Expand-Archive -Path "cl-web-components-0.0.11.zip" -Item "cl-web-components.js"
-
- - - diff --git a/INSTALL_NOTES_Windows.html b/INSTALL_NOTES_Windows.html deleted file mode 100644 index c2ab345..0000000 --- a/INSTALL_NOTES_Windows.html +++ /dev/null @@ -1,95 +0,0 @@ - - - - CL-web-components - - - - - - -
-Caltech Library logo -
- - -
-

Installing an unsigned executable on Windows can also pose security -risks, as Windows has built-in mechanisms to protect users from -potentially harmful software. Here’s a general guide on how to do -it:

-

Steps to -Install an Unsigned Executable on Windows

-
    -

  1. Download the Executable: Download the unsigned -executable file you want to install from a trusted source.

    2. -

  2. Locate the File: Use File Explorer to locate the -downloaded file, which is often in the Downloads folder -unless you specified a different location.

    3. -

  3. Attempt to Open the File: Double-click the file -to open it. Windows may show a warning that the file is not commonly -downloaded and could harm your computer.

    4. -

  4. Override Security Settings:

    -
      -
    • Option 1: Run Anyway -
        -
      • When you see the warning, click on More info in the -dialog box.
        • -
      • A new option will appear to Run anyway. Click this to -proceed with the installation.
        • -
      • -
    • Option 2: Disable Windows Defender SmartScreen -(Temporarily) -
        -
      • Open the Start menu and go to Settings.
        • -
      • Navigate to Update & Security > -Windows Security > -App & browser control.
        • -
      • Under Check apps and files, select Off. -This will disable SmartScreen temporarily.
        • -
      • Try running the executable again.
        • -
      • Remember to turn SmartScreen back on after installation for -continued protection.
        • -
      • -
    5. -

  5. Use Command Prompt (Advanced Users): If the -above methods don’t work, you can use the Command Prompt to run the -executable directly:

    -
      -
    • Open Command Prompt as an administrator.
      • -
    • Navigate to the directory where the file is located using the -cd command.
      • -
    • Run the file by typing its name and pressing Enter.
      • -
    6. -
-

Important Considerations

- -

If you’re unsure about any of these steps or the safety of the file, -it’s best to consult with someone who has more experience with Windows -or to contact the software developer for support.

-
- - - diff --git a/INSTALL_NOTES_Windows.md b/INSTALL_NOTES_Windows.md deleted file mode 100644 index 159ce8a..0000000 --- a/INSTALL_NOTES_Windows.md +++ /dev/null @@ -1,35 +0,0 @@ - -Installing an unsigned executable on Windows can also pose security risks, as Windows has built-in mechanisms to protect users from potentially harmful software. Here's a general guide on how to do it: - -### Steps to Install an Unsigned Executable on Windows - -1. **Download the Executable**: Download the unsigned executable file you want to install from a trusted source. - -2. **Locate the File**: Use File Explorer to locate the downloaded file, which is often in the `Downloads` folder unless you specified a different location. - -3. **Attempt to Open the File**: Double-click the file to open it. Windows may show a warning that the file is not commonly downloaded and could harm your computer. - -4. **Override Security Settings**: - - **Option 1: Run Anyway** - - When you see the warning, click on `More info` in the dialog box. - - A new option will appear to `Run anyway`. Click this to proceed with the installation. - - - **Option 2: Disable Windows Defender SmartScreen (Temporarily)** - - Open the Start menu and go to `Settings`. - - Navigate to `Update & Security` > `Windows Security` > `App & browser control`. - - Under `Check apps and files`, select `Off`. This will disable SmartScreen temporarily. - - Try running the executable again. - - Remember to turn SmartScreen back on after installation for continued protection. - -5. **Use Command Prompt (Advanced Users)**: If the above methods don't work, you can use the Command Prompt to run the executable directly: - - Open Command Prompt as an administrator. - - Navigate to the directory where the file is located using the `cd` command. - - Run the file by typing its name and pressing Enter. - -### Important Considerations - -- **Security Risks**: Running unsigned executables can expose your system to malware and other security risks. Only proceed if you trust the source of the software. -- **User Account Control (UAC)**: UAC might prompt you for permission to run the executable. Ensure you have administrative rights to proceed. -- **Antivirus Software**: Your antivirus software might also block unsigned executables. You may need to temporarily disable it or add an exception for the file. - -If you're unsure about any of these steps or the safety of the file, it's best to consult with someone who has more experience with Windows or to contact the software developer for support. \ No newline at end of file diff --git a/INSTALL_NOTES_macOS.html b/INSTALL_NOTES_macOS.html deleted file mode 100644 index 5cdcace..0000000 --- a/INSTALL_NOTES_macOS.html +++ /dev/null @@ -1,102 +0,0 @@ - - - - CL-web-components - - - - - - -
-Caltech Library logo -
- - -
-

Installing an unsigned executable on macOS can be a bit tricky due to -macOS’s security features designed to protect users from potentially -harmful software. Here’s a general guide on how to do it:

-
    -

  1. Download the Executable: First, download the -unsigned executable file you want to install.

    2. -

  2. Locate the File: Use Finder to locate the -downloaded file. It’s often in the Downloads folder unless -you specified a different location.

    3. -

  3. Attempt to Open the File: Double-click the file -to open it. macOS will likely show a warning that the file cannot be -opened because it is from an unidentified developer.

    4. -

  4. Override Security Settings:

    -
      -
    • Option 1: Open via Context Menu -
        -
      • Right-click (or Control-click) the file.
        • -
      • Select Open from the context menu.
        • -
      • You’ll see another warning, but this time there will be an option to -Open the file anyway. Click Open.
        • -
      • -
    • Option 2: Allow Apps from Anywhere (Temporarily) -
        -
      • Open System Preferences and go to -Security & Privacy.
        • -
      • Click the lock icon in the bottom left corner and enter your -password to make changes.
        • -
      • Under the General tab, you might see a message about -the app being blocked. Click Open Anyway.
        • -
      • If you don’t see this option, you can temporarily change the setting -to allow apps downloaded from Anywhere. However, this -option is not available in the latest versions of macOS by default. You -may need to use the Terminal to do this: -
          -
        • Open Terminal and type: -sudo spctl --master-disable
          • -
        • Press Enter and provide your password.
          • -
        • This will allow you to run apps from anywhere, but it’s recommended -to re-enable security by typing sudo spctl --master-enable -after installing your app.
          • -
        • -
      • -
    5. -

  5. Use Terminal (Advanced Users): If the above -methods don’t work, you can use the Terminal to run the executable -directly:

    -
      -
    • Open Terminal.
      • -
    • Navigate to the directory where the file is located using the -cd command.
      • -
    • Make the file executable by typing: -chmod +x filename
      • -
    • Run the file by typing: ./filename
      • -
    6. -

  6. Check for Updates: Sometimes, developers will -sign their apps later. Check if there’s a signed version available to -avoid these steps in the future.

    7. -
-

Important Considerations

- -

If you’re unsure about any of these steps or the safety of the file, -it’s best to consult with someone who has more experience with macOS or -to contact the software developer for support.

-
- - - diff --git a/INSTALL_NOTES_macOS.md b/INSTALL_NOTES_macOS.md deleted file mode 100644 index 46ba6f1..0000000 --- a/INSTALL_NOTES_macOS.md +++ /dev/null @@ -1,38 +0,0 @@ - -Installing an unsigned executable on macOS can be a bit tricky due to macOS's security features designed to protect users from potentially harmful software. Here's a general guide on how to do it: - -1. **Download the Executable**: First, download the unsigned executable file you want to install. - -2. **Locate the File**: Use Finder to locate the downloaded file. It's often in the `Downloads` folder unless you specified a different location. - -3. **Attempt to Open the File**: Double-click the file to open it. macOS will likely show a warning that the file cannot be opened because it is from an unidentified developer. - -4. **Override Security Settings**: - - **Option 1: Open via Context Menu** - - Right-click (or Control-click) the file. - - Select `Open` from the context menu. - - You'll see another warning, but this time there will be an option to `Open` the file anyway. Click `Open`. - - - **Option 2: Allow Apps from Anywhere (Temporarily)** - - Open `System Preferences` and go to `Security & Privacy`. - - Click the lock icon in the bottom left corner and enter your password to make changes. - - Under the `General` tab, you might see a message about the app being blocked. Click `Open Anyway`. - - If you don't see this option, you can temporarily change the setting to allow apps downloaded from `Anywhere`. However, this option is not available in the latest versions of macOS by default. You may need to use the Terminal to do this: - - Open Terminal and type: `sudo spctl --master-disable` - - Press Enter and provide your password. - - This will allow you to run apps from anywhere, but it's recommended to re-enable security by typing `sudo spctl --master-enable` after installing your app. - -5. **Use Terminal (Advanced Users)**: If the above methods don't work, you can use the Terminal to run the executable directly: - - Open Terminal. - - Navigate to the directory where the file is located using the `cd` command. - - Make the file executable by typing: `chmod +x filename` - - Run the file by typing: `./filename` - -6. **Check for Updates**: Sometimes, developers will sign their apps later. Check if there's a signed version available to avoid these steps in the future. - -### Important Considerations - -- **Security Risks**: Running unsigned executables can expose your system to malware and other security risks. Only proceed if you trust the source of the software. -- **System Integrity Protection (SIP)**: Some steps might be restricted by SIP, which is designed to protect your system. Disabling SIP is not recommended unless absolutely necessary. - -If you're unsure about any of these steps or the safety of the file, it's best to consult with someone who has more experience with macOS or to contact the software developer for support. diff --git a/about.html b/about.html deleted file mode 100644 index e115a8b..0000000 --- a/about.html +++ /dev/null @@ -1,111 +0,0 @@ - - - - CL-web-components - - - - - - -
-Caltech Library logo -
- - -
-

About this software

-

CL-web-components 0.0.16

-

This release adds a new <card-layout> component -for displaying three-card layouts with images, titles, descriptions, and -links. The component is responsive and uses attributes to set the -content values.

-

Authors

- -

Maintainers

- -

CL-web-components provides a collection of Web Components used by -Caltech Library across sites and projects.

-

The following are the components currently provided.

-
-
`footer-global`
-
-This component provides a standard footer with detailed information -about the library -
-
`footer-global-lite`
-
-This component provides a lighter weight version of the `footer-global` -component -
-
`ul-a-to-z`
-
-This component takes an innerHTML containing a UL list. The UL list is -then turned into an A to Z navigatable UL List. If JavaScript is -unavailable then the innerHTML UL remains as a fallback. -
-
`textarea-csv`
-
-This is a textarea like component who's innerHTML content is CSV data. -The component will display this as an editable table. -
-
`textarea-agent-list`
-
-This element wraps a textarea containing a list of agents expressed as -JSON. -
-
`table-sortable`
-
-This is a component that takes an innerHTML containing table. It makes -the table sortable by the column headings and provides a filter input -that lets you enter text to filter by and pick a column to filter on. -
-
- -

Programming languages

- -

Software Requirements

- -

Software Suggestions

- -
- - - \ No newline at end of file diff --git a/building_web_components_with_deno.html b/building_web_components_with_deno.html deleted file mode 100644 index b17939b..0000000 --- a/building_web_components_with_deno.html +++ /dev/null @@ -1,84 +0,0 @@ - - - - CL-web-components - - - - - - -
-Caltech Library logo -
- - -
-

Building Web Components with -Deno

-

Web components run in the browser as JavaScript. Generally speaking -their built as independent modules. There is a growing library of -standard modules at https://jsr.io. The standard modules work in Deno as -well as the browser. This includes useful libraries like -@std/csv, @std/path and -@std/yaml. The referencing an import of these by full URLs -is not ideal. It makes much more sense to take advantage Deno which -provides additional functionality like check, lint, fmt and bundle. The -last item is important for web components. With bundle we can generate a -a web component including it’s dependent modules. This gives us much -more reliability in deployments and flexibility of moving code between -browser and server.

-

Un-bundled sources

-

If you are working on a web component the un-bundled source should be -placed in the src/ directory. This allows you to include -remote and local modules easily. The build process maintains the -version.js module which includes the versioning of this -repository as well as license text.

-

Current the following component(s) require bundling -due to external dependencies.

- -

You can build local bundles and test versions using the following -Deno task command.

-
deno task build
-

Building CL-web-components

-

The process to build a release is a little more complex than is -convenient for a Deno task. If your are on macOS or Linux you can use -GNU Make to run the Makefile.

-
make build
-make website
-web release
-

On Windows you can use the related PowerShell scripts that replace -make. Example,

-
make.ps1 build
-make.ps1 website
-make.ps1 release
-

The “release” option makes the zip files needed for a GitHub release. -If you are on macOS or Linux you can run the ./replace.bash -script to perform those chores if you have gh -installed.

-

NOTE: The bundled JavaScript files are in the root directory. The -source are in the src directory. If you need to fix -something, add something, etc. It should go in the src/ -directory. You may need to either add or edit the tasks in -deno.json, Makefile or -make.ps1.

-
- - - diff --git a/card-layout.html b/card-layout.html deleted file mode 100644 index 43385b5..0000000 --- a/card-layout.html +++ /dev/null @@ -1,296 +0,0 @@ - - - - CL-web-components - - - - - - -
-Caltech Library logo -
- - -
-

Card Layout

-

A three-card layout component for displaying featured content with -images, titles, descriptions, and links.

-

View Demo

-

Key Features

- -

Installing

-
<!-- Add the component -->
-<card-layout
-  card1-title="Card One"
-  card1-description="Your description here."
-  card1-link="/page1"
-
-  card2-title="Card Two"
-  card2-description="Another description."
-  card2-link="/page2"
-
-  card3-title="Card Three"
-  card3-description="Third description."
-  card3-link="/page3"
-></card-layout>
-
-<!-- Include the JavaScript -->
-<script type="module" src="https://media.library.caltech.edu/cl-webcomponents/card-layout.js"></script>
-

Basic Usage

-

At minimum, provide a title and description for each card:

-
<card-layout
-  card1-title="Sherman Fairchild Library"
-  card1-description="Study spaces, course reserves, and technology lending."
-  card1-link="https://library.caltech.edu/locations/sfl"
-
-  card2-title="Caltech Archives"
-  card2-description="Explore Caltech's rich history and scientific legacy."
-  card2-link="https://library.caltech.edu/archives"
-
-  card3-title="Research Support"
-  card3-description="Get help with data management, publishing, and more."
-  card3-link="https://library.caltech.edu/publish"
-></card-layout>
-

When no image is provided, a placeholder is displayed.

-

Layout Options

-

By default, cards display horizontally in a row. Use the -layout attribute to switch to a vertical stacked -layout:

-
<!-- Horizontal layout (default) -->
-<card-layout
-  card1-title="Card One"
-  card1-description="First card."
-  card2-title="Card Two"
-  card2-description="Second card."
-  card3-title="Card Three"
-  card3-description="Third card."
-></card-layout>
-
-<!-- Vertical layout (image left, content right) -->
-<card-layout
-  layout="vertical"
-  card1-image="https://example.com/image1.jpg"
-  card1-title="Card One"
-  card1-description="First card description here."
-  card1-link="/page1"
-  card2-image="https://example.com/image2.jpg"
-  card2-title="Card Two"
-  card2-description="Second card description here."
-  card2-link="/page2"
-  card3-image="https://example.com/image3.jpg"
-  card3-title="Card Three"
-  card3-description="Third card description here."
-  card3-link="/page3"
-></card-layout>
-

The vertical layout displays cards stacked on top of each other, with -each card showing the image on the left and the title, description, and -link on the right. This is useful for listing items or displaying -priority content.

-

Adding Images

-

Add images to each card using the card[1-3]-image -attributes. Images are automatically scaled and cropped to fit the card -layout, so you don’t need exact dimensions.

-

Image sizing notes: - Images are scaled using -object-fit: cover, which crops to fit while maintaining -aspect ratio - For horizontal layout, use images at least 400px wide - -For vertical layout, images display at 120px × 100px, so 200px+ wide -works well - Landscape orientation recommended; keep important content -centered as edges may be cropped

-
<card-layout
-  card1-image="https://example.com/image1.jpg"
-  card1-title="Digital Collections"
-  card1-description="Browse digitized rare books, photographs, and manuscripts."
-  card1-link="https://library.caltech.edu/archives/collections"
-
-  card2-image="https://example.com/image2.jpg"
-  card2-title="Workshops & Events"
-  card2-description="Join us for research skills workshops and special events."
-  card2-link="https://library.caltech.edu/events"
-
-  card3-image="https://example.com/image3.jpg"
-  card3-title="Course Reserves"
-  card3-description="Access textbooks and materials for your courses."
-  card3-link="https://library.caltech.edu/borrow/reserves"
-></card-layout>
-

Image Alt Text

-

For accessibility, you can provide custom alt text for each image -using card[1-3]-alt. If not specified, the card title is -used as the alt text.

-
<card-layout
-  card1-image="https://example.com/library-interior.jpg"
-  card1-alt="Students studying at tables in the Sherman Fairchild Library reading room"
-  card1-title="Study Spaces"
-  card1-description="Find quiet study areas and group collaboration rooms."
-  card1-link="/spaces"
-
-  card2-image="https://example.com/archives-photo.jpg"
-  card2-alt="Historical photograph of Caltech's Throop Hall circa 1920"
-  card2-title="Caltech Archives"
-  card2-description="Explore Caltech's rich history."
-  card2-link="/archives"
-
-  card3-image="https://example.com/workshop.jpg"
-  card3-alt="Librarian presenting research tools to a group of graduate students"
-  card3-title="Workshops"
-  card3-description="Learn new research skills."
-  card3-link="/workshops"
-></card-layout>
-

Custom Link Text

-

By default, links display “Read more”. Customize with -card[1-3]-link-text:

-
<card-layout
-  card1-title="Digital Collections"
-  card1-description="Browse our digitized materials."
-  card1-link="https://library.caltech.edu/archives/collections"
-  card1-link-text="Explore collections"
-
-  card2-title="Workshops & Events"
-  card2-description="Join us for upcoming events."
-  card2-link="https://library.caltech.edu/events"
-  card2-link-text="View calendar"
-
-  card3-title="Course Reserves"
-  card3-description="Access course materials."
-  card3-link="https://library.caltech.edu/borrow/reserves"
-  card3-link-text="Find reserves"
-></card-layout>
- -

If you don’t provide a card[1-3]-link attribute, the -link will be hidden for that card:

-
<card-layout
-  card1-title="Information Only"
-  card1-description="This card has no link."
-
-  card2-title="With Link"
-  card2-description="This card has a link."
-  card2-link="/some-page"
-
-  card3-title="Also No Link"
-  card3-description="Another card without a link."
-></card-layout>
-

Complete Example

-

Here’s a fully configured card layout using all available -options:

-
<card-layout
-  card1-image="https://example.com/collections.jpg"
-  card1-title="Digital Collections"
-  card1-description="Browse digitized rare books, photographs, and manuscripts from Caltech's history."
-  card1-link="https://library.caltech.edu/archives/collections"
-  card1-link-text="Explore collections"
-
-  card2-image="https://example.com/events.jpg"
-  card2-title="Workshops & Events"
-  card2-description="Join us for research skills workshops, author talks, and special events."
-  card2-link="https://library.caltech.edu/events"
-  card2-link-text="View calendar"
-
-  card3-image="https://example.com/reserves.jpg"
-  card3-title="Course Reserves"
-  card3-description="Access textbooks, readings, and other materials for your courses."
-  card3-link="https://library.caltech.edu/borrow/reserves"
-  card3-link-text="Find reserves"
-></card-layout>
-

Attribute Reference

- ----- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
AttributeDescriptionDefault
layoutCard arrangement: horizontal or -verticalhorizontal
card[1-3]-imageURL for the card imagePlaceholder shown
card[1-3]-altAlt text for the card image (for accessibility)Uses card title
card[1-3]-titleCard heading text“Card One/Two/Three”
card[1-3]-descriptionBrief description text“Add your content here.”
card[1-3]-linkURL for the linkLink hidden if not set
card[1-3]-link-textCustom text for the link“Read more”
-

Replace [1-3] with the card number (1, 2, or 3).

-

Responsive Behavior

- -

The component handles responsive behavior automatically with no -additional configuration needed.

-
- - - diff --git a/docs/building_web_components_with_deno.md b/docs/building_web_components_with_deno.md index 64cd220..e0e2a7f 100644 --- a/docs/building_web_components_with_deno.md +++ b/docs/building_web_components_with_deno.md @@ -28,14 +28,6 @@ make website web release ~~~ -On Windows you can use the related PowerShell scripts that replace make. Example, - -~~~pwsh -make.ps1 build -make.ps1 website -make.ps1 release -~~~ - The "release" option makes the zip files needed for a GitHub release. If you are on macOS or Linux you can run the `./replace.bash` script to perform those chores if you have `gh` installed. -NOTE: The bundled JavaScript files are in the root directory. The source are in the `src` directory. If you need to fix something, add something, etc. It should go in the `src/` directory. You may need to either add or edit the tasks in `deno.json`, `Makefile` or `make.ps1`. +NOTE: The bundled JavaScript files are in the root directory. The source are in the `src` directory. If you need to fix something, add something, etc. It should go in the `src/` directory. You may need to add or edit the tasks in `deno.json`. diff --git a/enhance_code_blocks.html b/enhance_code_blocks.html deleted file mode 100644 index de18495..0000000 --- a/enhance_code_blocks.html +++ /dev/null @@ -1,238 +0,0 @@ - - - - CL-web-components - - - - - - -
-Caltech Library logo -
- - -
-

Enhancing code -blocks with CSS and JavaScript

-

This document describes how to use the code-blocks.css -and copyToClipboard.js files to style code blocks and add a -“Copy to Clipboard” button to them.

-

Overview

-

The provided CSS and JavaScript files allow you to style -<pre> and <code> elements and add -a button to copy the code to the clipboard. This is useful for -displaying code snippets on a webpage with a consistent style and -enhanced functionality.

-

Files

-
-
code-blocks.css
-
-A CSS file that styles the <pre> and -<code> elements and the copy button. -
-
copyToClipboard.js
-
-A JavaScript module that adds a “Copy to Clipboard” button to each -<pre> block containing a <code> -element. -
-
-

CSS Variables

-

The code-blocks.css file uses CSS variables to define -the styling properties. These variables can be easily overridden to -customize the appearance of the code blocks and the copy button.

-

Code Block Variables

-
-
--code-font-family
-
-Font family for the code block. Default is monospace. -
-
--code-border-color
-
-Border color for the code block. Default is #ccc. -
-
--code-background-color
-
-Background color for the code block. Default is #f5f5f5. -
-
-

Copy Button Variables

-
-
--copy-button-bg-color
-
-Background color for the copy button. Default is #fff. -
-
--copy-button-border-color
-
-Border color for the copy button. Default is #ccc. -
-
--copy-button-text-color
-
-Text color for the copy button. Default is #000. -
-
--copy-button-hover-bg-color
-
-Background color for the copy button on hover. Default is -#f0f0f0. -
-
-

Usage

-

Step 1: Include the CSS File

-

Link the code-blocks.css file in the -<head> section of your HTML document:

-
<link rel="stylesheet" href="path/to/code-blocks.css">
-

Step 2: Include the -JavaScript Module

-

Include the copyToClipboard.js module in your HTML -document. This script should be included at the end of the -<body> section or use the -DOMContentLoaded event to ensure the DOM is fully loaded -before executing the script.

-
<script type="module" src="path/to/copyToClipboard.js"></script>
-

Step 3: Add Code Blocks to -Your HTML

-

Add <pre> and <code> elements -to your HTML document. The JavaScript module will automatically add a -“Copy to Clipboard” button to each <pre> block -containing a <code> element.

-
<pre><code>public class HelloWorld {
-    public static void main(String[] args) {
-        System.out.println("Hello, world!");
-    }
-}</code></pre>
-
-<pre><code>public class AnotherExample {
-    public static void main(String[] args) {
-        System.out.println("Another example!");
-    }
-}</code></pre>
-

Example: Full HTML Document

-

Here is an example of a complete HTML document that includes the CSS -and JavaScript files:

-
<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Code Blocks Example</title>
-  <link rel="stylesheet" href="path/to/code-blocks.css">
-</head>
-<body>
-
-<h1>Code Examples</h1>
-
-<pre><code>public class HelloWorld {
-    public static void main(String[] args) {
-        System.out.println("Hello, world!");
-    }
-}</code></pre>
-
-<pre><code>public class AnotherExample {
-    public static void main(String[] args) {
-        System.out.println("Another example!");
-    }
-}</code></pre>
-
-<script type="module" src="path/to/copyToClipboard.js"></script>
-</body>
-</html>
-

Step 4: Customize the -Styling (Optional)

-

You can override the CSS variables to customize the appearance of the -code blocks and the copy button. Add a <style> block -to your HTML document and redefine the variables as needed.

-
<style>
-  :root {
-    --code-font-family: 'Courier New', monospace;
-    --code-border-color: #ff5733;
-    --copy-button-bg-color: #e7e7e7;
-    --copy-button-border-color: #ff5733;
-  }
-</style>
-

JavaScript Functionality

-

The copyToClipboard.js module performs the following -actions:

-
    -
  1. Waits for the DOMContentLoaded event to ensure the DOM -is fully loaded.
    2. -
  2. Finds all <pre> elements in the document.
    3. -
  3. For each <pre> element, checks if it contains a -<code> element.
    4. -
  4. Creates a button with the clipboard emoji (📋) and appends it to the -<pre> element.
    5. -
  5. Adds an event listener to the button to copy the text content of the -<code> element to the clipboard when clicked.
    6. -
  6. Provides feedback by changing the button text to “Copied!” for a -short period after copying.
    7. -
-

Conclusion

-

By following these steps, you can style code blocks and add a “Copy -to Clipboard” button to them using the provided CSS and JavaScript -files. This enhances the user experience by making it easy to copy code -snippets from your webpage.

-

Example: Customized HTML -Document

-

Here is an example of a complete HTML document with customized -styling:

-
<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Customized Code Blocks Example</title>
-  <link rel="stylesheet" href="path/to/code-blocks.css">
-  <style>
-    :root {
-      --code-font-family: 'Courier New', monospace;
-      --code-border-color: #ff5733;
-      --copy-button-bg-color: #e7e7e7;
-      --copy-button-border-color: #ff5733;
-    }
-  </style>
-</head>
-<body>
-
-<h1>Customized Code Examples</h1>
-
-<pre><code>public class CustomHelloWorld {
-    public static void main(String[] args) {
-        System.out.println("Custom Hello, world!");
-    }
-}</code></pre>
-
-<pre><code>public class CustomExample {
-    public static void main(String[] args) {
-        System.out.println("Another customized example!");
-    }
-}</code></pre>
-
-<script type="module" src="path/to/copyToClipboard.js"></script>
-</body>
-</html>
-

This setup allows you to maintain a clean and organized stylesheet -with reusable variables and provides the flexibility to override these -variables as needed.

-
- - - diff --git a/footer-global.html b/footer-global.html deleted file mode 100644 index 2becbf2..0000000 --- a/footer-global.html +++ /dev/null @@ -1,431 +0,0 @@ - - - - CL-web-components - - - - - - -
-Caltech Library logo -
- - -
-

Footer Global & Footer -Global Lite

-

This web component adds a branded footer to applications maintained -by the library.

-

Versions

-

There are two versions of the footer:

- -

Key Features

- -

Installing

- -
<!-- Add the component -->
-<footer-global></footer-global>
-
-<!-- Include the JavaScript -->
-<script type="module" src="https://media.library.caltech.edu/cl-webcomponents/footer-global.js"></script>
- -
<!-- Add the component -->
-<footer-global-lite></footer-global-lite>
-
-<!-- Include the JavaScript -->
-<script type="module" src="https://media.library.caltech.edu/cl-webcomponents/footer-global-lite.js"></script>
-

Quick Start with Presets

-

The footer defaults to library settings, or you can use the -archives attribute to automatically configure all contact -information, branding, and social media links for archives.

-

Library Default Values

-

Default Values: - Email: library@caltech.edu - -Phone: 626-395-3405 - Library Name: Caltech Library - Mail Code: Mail -Code 1-43 - Logo: Library logo - Instagram: @caltechlibrary - YouTube: Caltech -Library channel - Donate Link: -https://library.caltech.edu/about/support

-

Archives Preset

-
<footer-global archives></footer-global>
-

Default Values: - Email: archives@caltech.edu - -Phone: (626) 395-2704 - Library Name: Caltech Library
Archives & -Special Collections - Mail Code: Mail Code B215A-74 - Logo: Archives -logo - Instagram: @caltecharchives - YouTube: Caltech -Library channel - Donate Link: -https://library.caltech.edu/archives/about/donate

-

Overriding Preset Values

-

You can use a preset and override specific values:

-
<footer-global archives
-  phone="626-555-1234"
-  donate-link="https://example.com/donate">
-  <a slot="custom-links" class="custom-links" href="/about">About</a>
-  <a slot="custom-links" class="custom-links" href="/contact">Contact</a>
-</footer-global>
-

Full Customization

-

For application-specific footers or unique configurations, use the -custom attribute to take full control over the first -column.

-
-

Note: The customization examples below use -footer-global, but the same attributes work for -footer-global-lite. The only difference is the component -name.

-
-

Understanding the -custom Attribute

-

The custom attribute is a special flag that: - -Hides the default library hours content in column 1 - -Hides the “Hours” heading (unless you provide a custom -header attribute) - Adjusts column widths -for better layout with custom content

-

Behavior: - <footer-global> → -Shows “Hours” heading + library hours - -<footer-global custom> → Column 1 is completely empty -(no heading, no hours) - -<footer-global custom header="Links"> → Shows “Links” -heading, no hours

-

This gives you a clean slate to add your own content without the -default library hours appearing.

-

Custom Heading

-

Add a custom heading to the first column:

-
<footer-global
-  custom
-  header="Digital Collections">
-</footer-global>
-
-

Tip: If you don’t provide a header -attribute, the heading will be hidden entirely, giving you maximum -flexibility for your custom content.

-
- -

The first column displays custom links specific to your -application.

-

Default Content (without customization): - Footer -Global: Library Hours - Footer Global Lite: Default links for Home and -Return to Top

-

To add custom links:

-
<footer-global
-  custom
-  header="Quick Links">
-
-  <a slot="custom-links" class="custom-links" href="/about">About</a>
-  <a slot="custom-links" class="custom-links" href="/help">Help</a>
-  <a slot="custom-links" class="custom-links" href="/contact">Contact</a>
-
-</footer-global>
-

Required attributes on each link: - -slot="custom-links" - Pulls content into Shadow DOM - -class="custom-links" - Applies proper styling and hover -states

-

Custom Phone and Email

-

Override the default contact information:

-
<footer-global
-  custom
-  header="Digital Collections"
-  phone="626-555-0100"
-  email="digcoll@caltech.edu">
-
-  <a slot="custom-links" class="custom-links" href="/about">About</a>
-
-</footer-global>
- -

Customize Instagram, YouTube, and RSS links (Footer Global only):

-

Default behavior: - Instagram and YouTube default to -library profiles - RSS has no default; icon only appears if URL is -provided

-
<footer-global
-  custom
-  header="Your Application"
-  instagram="https://instagram.com/yourprofile"
-  youtube="https://youtube.com/yourchannel"
-  rss="https://yoursite.edu/feed">
-
-  <a slot="custom-links" class="custom-links" href="#">Link 1</a>
-
-</footer-global>
- -

Change the library name and where it links to (Footer Global -only):

-

Default: “Caltech Library” linking to -https://library.caltech.edu/

-
<footer-global
-  custom
-  library-name="Special Collections"
-  library-link="https://library.caltech.edu/special-collections">
-</footer-global>
-

For multi-line library names, use -<br> in the value:

-
<footer-global
-  custom
-  library-name="Caltech Library<br>Special Collections">
-</footer-global>
-

Custom Mail Code

-

Override the mail code while keeping the standard Caltech address -(Footer Global only):

-

Default: Library mail code (Mail Code 1-43)

-

Address (always the same): 1200 E California Blvd, -Pasadena, CA 91125-4300

-
<footer-global
-  custom
-  mail-code="Mail Code 555-01">
-</footer-global>
- -

Switch between library and archives branding:

-
<!-- Library logo (default) -->
-<footer-global logo="library"></footer-global>
-
-<!-- Archives logo -->
-<footer-global logo="archives"></footer-global>
- -

Override the donate link URL:

-

Default: - Library: -https://library.caltech.edu/about/support - Archives: -https://library.caltech.edu/archives/about/donate

-
<footer-global
-  custom
-  donate-link="https://example.com/custom-donate">
-</footer-global>
-

Library Website-Specific -Features

-

These features are designed specifically for LibGuides and library -website integration.

- -

Adds a staff login link to the bottom right of the footer:

-
<footer-global
-  library
-  libguides-login="true">
-</footer-global>
-

Requirements: - Page must have element with -id="s-lib-footer-login-link" containing the login link - -The footer will mirror this link into the component

- -

Displays LibGuides breadcrumb navigation in the footer:

-
<footer-global
-  library
-  breadcrumbs="true">
-</footer-global>
-

Requirements: - Page must have breadcrumb navigation -with id="s-lib-bc" - The footer will clone this breadcrumb -trail into the component - Breadcrumbs automatically align with the -first column

-

Complete Example

-

Here’s a fully customized footer using all available options:

-
<footer-global
-  custom
-  header="Digital Collections"
-  phone="626-555-0100"
-  email="digcoll@caltech.edu"
-  instagram="https://instagram.com/yourprofile"
-  youtube="https://youtube.com/yourchannel"
-  rss="https://yoursite.edu/feed"
-  library-name="Caltech Library<br>Digital Collections"
-  library-link="https://library.caltech.edu/digital"
-  mail-code="Mail Code DC-123"
-  logo="library"
-  libguides-login="true"
-  breadcrumbs="true">
-
-  <a slot="custom-links" class="custom-links" href="/about">About</a>
-  <a slot="custom-links" class="custom-links" href="/browse">Browse</a>
-  <a slot="custom-links" class="custom-links" href="/search">Search</a>
-  <a slot="custom-links" class="custom-links" href="/help">Help</a>
-
-</footer-global>
-

Debugging

-

The component includes console logging for troubleshooting. Messages -include:

- -

Check your browser’s developer console for these messages if content -isn’t displaying as expected.

-

Attribute Reference

- ------ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
AttributeValuesApplies ToDescription
librarybooleanBothUse library preset configuration (default)
archivesbooleanBothUse archives preset configuration
custombooleanBothHide default hours and heading; enable full column 1 -customization
headerstringBothCustom heading for first column (use with custom)
phonestringBothContact phone number
emailstringBothContact email address
library-namestring (HTML allowed)GlobalLibrary/department name
library-linkURLGlobalLibrary/department website
mail-codestringGlobalCaltech mail code
donate-linkURLBothDonate page URL
instagramURLGlobalInstagram profile URL
youtubeURLGlobalYouTube channel URL
rssURLGlobalRSS feed URL
logolibrary or archivesBothLogo variant
libguides-login"true"GlobalShow staff login link
breadcrumbs"true"GlobalShow breadcrumb navigation
-

Slots

- ---- - - - - - - - - - - - - -
Slot NameDescription
custom-linksLinks for the first column (remember to add -class="custom-links")
-
- - - diff --git a/index.html b/index.html deleted file mode 100644 index af99165..0000000 --- a/index.html +++ /dev/null @@ -1,114 +0,0 @@ - - - - CL-web-components - - - - - - -
-Caltech Library logo -
- - -
-

CL-web-components

-

CL-web-components provides a collection of Web Components used by -Caltech Library across sites and projects.

-

The following are the components currently provided.

-
-
footer-global
-
-This component provides a standard footer with detailed information -about the library -
-
footer-global-lite
-
-This component provides a lighter weight version of the -footer-global component -
-
ul-a-to-z
-
-This component takes an innerHTML containing a UL list. The UL list is -then turned into an A to Z navigatable UL List. If JavaScript is -unavailable then the innerHTML UL remains as a fallback. -
-
textarea-csv
-
-This is a textarea like component who’s innerHTML content is CSV data. -The component will display this as an editable table. -
-
textarea-agent-list
-
-This element wraps a textarea containing a list of agents expressed as -JSON. -
-
table-sortable
-
-This is a component that takes an innerHTML containing table. It makes -the table sortable by the column headings and provides a filter input -that lets you enter text to filter by and pick a column to filter on. -
-
-

Release Notes

- -

This release adds a new `<card-layout>` component for -displaying three-card layouts with images, titles, descriptions, and -links. The component is responsive and uses attributes to set the -content values.

-

Authors

- -

Maintainers

- -

Software Requirements

- -

Software Suggestions

- -

Runtime platform

-

HTML5-compatible web browser**

- - -
- - - diff --git a/integrating_CSS_in_web_components.html b/integrating_CSS_in_web_components.html deleted file mode 100644 index 16f5b8c..0000000 --- a/integrating_CSS_in_web_components.html +++ /dev/null @@ -1,271 +0,0 @@ - - - - CL-web-components - - - - - - -
-Caltech Library logo -
- - -
-

Web Component CSS -Implementation

-

One challenge and feature of web components is that they encapsulate -the component as a single HTML element. This is a design feature of web -components that insure safe default behaviors. If the web component -itself contains HTML elements, the isolation may be important for -component rendering and behavior. On the other hand, if the web -component itself contains standard HTML elements and they should inherit -form the page level style sheet you have a problem. The safety of an -encapsulated component becomes a barrier to how we traditionally expect -CSS to apply.

-

Adding inheritance inside the web component should be weighed -carefully. If it is desirable to inherit an external CSS rule set, you -have several options. First is to include the reference as an import in -the HTML template for the object. This is useful where the component -will be used in a design system and the design system specifies the -required CSS files and their locations.

-

Another approach is to pass in styling or style sheet references via -the web component’s attributes. This can be done by defining the -attributes style and css-href (or something -similar). Having the style attributes is the practice used -generally with standard HTML elements. The style passed in can be vetted -to make senses in the context of the whole component’s rendering. A use -case that fits this approach is here you might want the color scheme or -font choice to pass through to the component. The css-href -approach is slightly more complex. Before the HTML template text is -instantiated, you need to include the references to the CSS being -included. It remains unclear if the web component can take advantage of -the page’s own CSS cache or if it will require an additional explicit -download of the CSS. This area needs exploration and testing to confirm -behaviors.

-

All the approaches are reasonable assuming the trade offs and -limitations are understood.

-

Master style sheet approach

-

Here’s are some use case examples of in using a master style sheet -approach (explicitly include an @import rule in the -component’s style element).

-

CSS Custom Properties -(Variables)

-

Use CSS custom properties (also known as CSS variables) in your -master CSS file. These variables can be defined globally and accessed -within your web components.

-
/* master.css */
-:root {
-  --primary-color: #4285f4;
-  --secondary-color: #34a853;
-  --font-family: 'Roboto', sans-serif;
-}
-

In your web component, you can use these variables:

-
/* Inside your web component's styles */
-.my-element {
-  color: var(--primary-color);
-  font-family: var(--font-family);
-}
-

External Stylesheets in -Shadow DOM:

-

You can include external Stylesheets within your Shadow DOM by using -JavaScript to clone the styles and append them to the Shadow DOM.

-
const template = document.createElement('template');
-template.innerHTML = `
-  <style>
-    @import url('master.css');
-  </style>
-  <div class="my-element">Styled content</div>
-`;
-
-class MyElement extends HTMLElement {
-  constructor() {
-    super();
-    this.attachShadow({ mode: 'open' }).appendChild(template.content.cloneNode(true));
-  }
-}
-
-customElements.define('my-element', MyElement);
-

Constructable Stylesheets:

-

Use Constructable Stylesheets to share styles across multiple shadow -roots. This allows you to define styles once and use them in multiple -components.

-
const sheet = new CSSStyleSheet();
-sheet.replaceSync(`
-  .my-element {
-    color: var(--primary-color);
-  }
-`);
-
-class MyElement extends HTMLElement {
-  constructor() {
-    super();
-    this.attachShadow({ mode: 'open' });
-    this.shadowRoot.adoptedStyleSheets = [sheet];
-  }
-}
-
-customElements.define('my-element', MyElement);
-

CSS Inheritance:

-

Some CSS properties are inherited by default (e.g., font-family, -color). You can leverage these properties to style your web components -without piercing the Shadow DOM.

-
/* master.css */
-body {
-  font-family: var(--font-family);
-  color: var(--primary-color);
-}
-

These styles will be inherited by the elements inside your web -component unless explicitly overridden.

-

::part and -::theme:

-

Use the ::part and ::theme pseudo-elements -to style specific parts of your web components from outside the Shadow -DOM.

-
/* master.css */
-my-element::part(button) {
-  background-color: var(--primary-color);
-}
-

In your web component:

-
<button part="button">Click me</button>
-

By using these strategies, you can effectively integrate a master CSS -file with your web components while respecting the encapsulation -provided by the Shadow DOM.

-

Configurable CSS via -component attributes

-

You can conditionally include CSS and supply default styles for web -components. This can be achieved through a combination of JavaScript -logic and CSS management. Here are some strategies to accomplish -this:

-

Dynamic Stylesheet Loading:

-

You can use JavaScript to dynamically load stylesheets based on -certain conditions. This allows you to include different stylesheets -depending on the context or user preferences.

-
function loadStylesheet(href, id) {
-  const link = document.createElement('link');
-  link.rel = 'stylesheet';
-  link.href = href;
-  link.id = id;
-  document.head.appendChild(link);
-}
-
-// Conditionally load stylesheet
-if (someCondition) {
-  loadStylesheet('special-styles.css', 'special-styles');
-} else {
-  loadStylesheet('default-styles.css', 'default-styles');
-}
-

Inline Default Styles:

-

Provide default styles inline within your web component. You can then -override these styles by conditionally loading external stylesheets.

-
const template = document.createElement('template');
-template.innerHTML = `
-  <style>
-    /* Default styles */
-    .my-element {
-      color: black;
-      font-family: Arial, sans-serif;
-    }
-  </style>
-  <div class="my-element">Styled content</div>
-`;
-
-class MyElement extends HTMLElement {
-  constructor() {
-    super();
-    this.attachShadow({ mode: 'open' }).appendChild(template.content.cloneNode(true));
-  }
-
-  connectedCallback() {
-    // Conditionally load external stylesheet
-    if (this.hasAttribute('special')) {
-      const link = document.createElement('link');
-      link.rel = 'stylesheet';
-      link.href = 'special-styles.css';
-      this.shadowRoot.appendChild(link);
-    }
-  }
-}
-
-customElements.define('my-element', MyElement);
-

CSS Custom Properties with -Fallbacks:

-

Use CSS custom properties with fallback values to provide default -styles. You can then conditionally override these properties.

-
/* Default styles using CSS custom properties with fallbacks */
-.my-element {
-  color: var(--my-element-color, black);
-  font-family: var(--my-element-font, Arial, sans-serif);
-}
-
// Conditionally override CSS custom properties
-if (someCondition) {
-  document.documentElement.style.setProperty('--my-element-color', 'blue');
-  document.documentElement.style.setProperty('--my-element-font', 'Helvetica, sans-serif');
-}
-

Using JavaScript to Toggle -Classes:

-

Apply different classes to your web component based on conditions and -define styles for these classes in your CSS.

-
class MyElement extends HTMLElement {
-  constructor() {
-    super();
-    this.attachShadow({ mode: 'open' });
-    this.shadowRoot.innerHTML = `
-      <style>
-        .default-style {
-          color: black;
-          font-family: Arial, sans-serif;
-        }
-        .special-style {
-          color: blue;
-          font-family: Helvetica, sans-serif;
-        }
-      </style>
-      <div class="my-element">Styled content</div>
-    `;
-  }
-
-  connectedCallback() {
-    const element = this.shadowRoot.querySelector('.my-element');
-    if (this.hasAttribute('special')) {
-      element.classList.add('special-style');
-    } else {
-      element.classList.add('default-style');
-    }
-  }
-}
-
-customElements.define('my-element', MyElement);
-

By using these techniques, you can conditionally include CSS and -supply default styles for your web components, making them more flexible -and adaptable to different contexts and user preferences.

-
- - - diff --git a/llm_notes/a_to_z_ul_llm_prompts.html b/llm_notes/a_to_z_ul_llm_prompts.html deleted file mode 100644 index 6c3f5b1..0000000 --- a/llm_notes/a_to_z_ul_llm_prompts.html +++ /dev/null @@ -1,67 +0,0 @@ - - - - CL-web-components - - - - -
-

Write an A to Z web component call a-to-z-ul who’s -innerHTML contains HTML5 UL list. That list will be used to structure -our links between our A to Z menu and the contents of the list.

-

The web component will be in a file called “a_to_z_ul.js”. Three -example HTML files will demonstate the web component. The first example -HTML with a short UL list. The second example HTML file with a long UL -list demonostrating how the optional “back to the menu” anchor will -work. The third HTML file that include two separate -a-to-z-ul lists on the same page. One will be short and one -will be long. The goal is to demonstrate that each A to Z UL list -functions independently.

-

The A to Z index should use a “menu” element for UL list navigate. -Each menu’s LI elements should contain anchors element representing the -alphabetical starting letters found in the UL list. That menu’s li’s -anchor will link into the UL list to the where the list’s items start -with the same alphabetical character.

-

The A to Z web component use all the same attributes supported by -HTML5 UL elements. In addition there is an optional attribute called -“long”. If “long” is true then an anchor element iss added after the UL -list that will take you back to the menu.

-

The web component should use HTML templates for structure and -CSS.

-

The UL items should be taken form the a-to-z-ul -innerHTML. The a-to-z-ul web component will need to detect -when the alphabetical starting letters changes. For each new letter it -needs to insert a new li that has a heading and identifying the -alphabetical section it is starting. The heading should contain an -anchor that links back to the menu.

-

The a-to-z-ul menu’s items should not contain bullets. -The Letter section headings don’t need bullets. The UL list’s menu items -should inherit the bullets from the page.

-

The a-to-z-ul web component may exist multiple times on -a page.

-

The a-to-z-ul web component should be implemented as an -ES6 module.

-

–

-

NOTE: The following is prompts added after the initial prompt -generated code.

-

When you click on the letter in the menu the browser should center -the virtial scroll so that section of the list is visible.

-

The innerHTML of a-to-z-ul is a UL list not a list of -text one per line.

-

Update the HTML examples to use innerHTML UL elements

-

The back to menu link should scroll the menu into view.

-
- - \ No newline at end of file diff --git a/llm_notes/a_to_z_ul_llm_specification.html b/llm_notes/a_to_z_ul_llm_specification.html deleted file mode 100644 index 56f0340..0000000 --- a/llm_notes/a_to_z_ul_llm_specification.html +++ /dev/null @@ -1,128 +0,0 @@ - - - - CL-web-components - - - - -
-

This JavaScript code defines a custom HTML element using the Web -Components API. This custom element, named -<a-to-z-ul>, is designed to create an alphabetical -menu from a list of items. Here’s a detailed specification of the -module:

-

Module Specification

-

Class: AToZUL

- -
Constructor
- -
Lifecycle Methods
- -
Methods
- -
Attributes
- -
Styles
- -
Event Listeners
- -
Usage
- -

Summary

-

The AToZUL component is a reusable web component that -organizes a list of items into alphabetical sections with a navigable -menu. It uses Shadow DOM for encapsulation and provides smooth scrolling -between sections. The component can be extended or modified to fit -different use cases by adjusting styles, attributes, or event -listeners.

-
- - \ No newline at end of file diff --git a/llm_notes/csvtextarea_llm_generated_specification.html b/llm_notes/csvtextarea_llm_generated_specification.html deleted file mode 100644 index 2af310a..0000000 --- a/llm_notes/csvtextarea_llm_generated_specification.html +++ /dev/null @@ -1,200 +0,0 @@ - - - - CL-web-components - - - - -
-

CSVTextarea Web -Component Specification

-

Overview

-

The CSVTextarea web component is designed to manage and -display tabular data in an editable HTML table format. It supports CSV -data input and output, autocomplete functionality, and various -customization options. The component is built using the Web Components -API and leverages Shadow DOM for encapsulation.

-

Dependencies

- -

HTML Structure

- -

Attributes

- -

Methods

-
    -
  1. Lifecycle Methods -
      -
    • constructor(): Initializes the -component and attaches a Shadow DOM.
      • -
    • connectedCallback(): Called when the -component is added to the DOM. Initializes the component and sets up -event listeners.
      • -
    • attributeChangedCallback(name, old, newVal): -Called when an observed attribute is added, removed, or changed.
      • -
    2. -
  2. Initialization Methods -
      -
    • initializeComponent(): Sets up the -component’s template and styles. Returns a promise that resolves when -the component is fully initialized.
      • -
    • initializeTable(): Initializes the -table structure based on the column-headings attribute and -populates the table body.
      • -
    3. -
  3. Event Handling -
      -
    • setupEventListeners(): Sets up event -listeners for the component’s buttons and table cells.
      • -
    4. -
  4. Table Management -
      -
    • rowCount(): Returns the number of rows -in the table body.
      • -
    • columnCount(): Returns the number of -columns in the table headings.
      • -
    • isEmptyRow(rowIndex): Checks if a row -is empty.
      • -
    • appendRow(): Adds an empty row to the -table body.
      • -
    • cleanupTable(): Removes empty rows -from the table body.
      • -
    5. -
  5. Data Conversion -
      -
    • toCSV(): Converts the table body to a -CSV string.
      • -
    • fromCSV(csvText): Populates the table -body from a CSV string.
      • -
    • toObjects(): Converts the table body -to an array of objects representing each cell.
      • -
    • fromObjects(objects): Populates the -table body from an array of objects.
      • -
    • toJSON(): Converts the table body to a -JSON string.
      • -
    • fromJSON(jsonString): Populates the -table body from a JSON string.
      • -
    6. -
  6. Textarea Integration -
      -
    • fromTextarea(): Reads CSV data from an -inner <textarea> and populates the table body.
      • -
    • toTextarea(): Writes the table body’s -CSV data to an inner <textarea>.
      • -
    7. -
  7. Cell Management -
      -
    • getCellValue(rowIndex, colIndexOrName): -Gets the value of a cell.
      • -
    • setCellValue(rowIndex, colIndexOrName, value): -Sets the value of a cell.
      • -
    8. -
  8. Autocomplete Functionality -
      -
    • setAutocomplete(colIndexOrName, options): -Associates a datalist with a column’s input elements.
      • -
    • getAutocomplete(colIndexOrName): -Returns the options associated with a column’s datalist.
      • -
    9. -
  9. Utility Methods -
      -
    • getColumnIndexByName(colName): Gets -the index of a column by its name.
      • -
    10. -
-

Events

- -

Accessibility

- -

Customization

- -

Usage Example

-
<csv-textarea id="my-csv" column-headings="Name,Age,City" class="csv-component" title="CSV Editor" placeholder="Enter CSV data" caption="CSV Table" debug>
-  <datalist id="city">
-    <option value="Azusa">
-    <option value="Cocomo">
-    <option value="Malibu">
-    <option value="Topanga">
-    <option value="Rancho Cucamonga">
-    <option value="Zuma">
-  </datalist>
-  <textarea>
-    "Doe, Jane", 20, Rancho Cucamonga
-    "Doe, John", 25, Cocomo
-  </textarea>
-</csv-textarea>
-

Detailed Behavior

- -
- - \ No newline at end of file diff --git a/llm_notes/csvtextarea_llm_prompts.html b/llm_notes/csvtextarea_llm_prompts.html deleted file mode 100644 index 968a377..0000000 --- a/llm_notes/csvtextarea_llm_prompts.html +++ /dev/null @@ -1,182 +0,0 @@ - - - - CL-web-components - - - - -
-

CSVTextarea Web Component

-

I would like to implement a web component in JavaScript called -CSVTextarea.

-

The CSVTextarea uses an editable HTML5 table element to manage the -tabular data. The CSVTextarea uses an HTML template to structure the -table and provide default CSS.

-

“parseCSV” and “parseCSVRow” are imported from a module called -“./parseCSV.js”;

-

The CSVTextarea element has an attribute called “column-headings”. -This is a required attribute. This is a comma delimited list that use an -imported “parseCSVRow” method to produce a list of headings that will be -used for the HTML5 table.

-

The CSVTextarea may of the following attributes, “id”, “class”, -“caption”, “text”, “placeholder”, “css-href”.

-

The CSVTextarea “css-href” attribute is used to fetch custom CSS for -the CSVTextarea and replaces the default CSS provided by the HTML -Template.

-

If the CSVTextarea’s innerHTML includes one or more datalist HTML -elements those to be cloned into the HTML Template.

-

The CSVTextarea the async initializeComponent should instantiate the -HTML template and return a promise if successfully complete.

-

The CSVTextarea initializeTable method is called after -initializeComponent has completed and it should populate the HTML5 -table. The HTML5 table heading should be populated from by using the -imported “parseCSVRow” method on the “column-headings” attribute. Each -string in the array should become a column heading.

-

The CSVTextarea’s table body’s TD elements should use input elements -to hold editable content. If there is a datalist associated with the -column of the TD then each input element in the column should point to -the datalist with it’s “list” attribute.

-

The CSVTextarea emits a “cell-change” event consisting of the row -index, column index and value for the editable HTML5 table body TD’s -input element change.

-

The CSVTextarea emits a “cell-focus” event consisting of the row -index, column index and value for the editable HTML5 table body TD’s -recieves focus.

-

The CSVTextarea has a debug attribute that is false by default. If -debug is true the CSVTextarea will use the “toCSV” method to display -contents of the HTML5 table’s body in the console when CSVTextarea is -instantiated in the web page. CSVTextarea should emit events when the -HTML5 table body’s TD are edited. If debug is true events are displayed -in the console.

-

The CSVTextarea has a method called “rowCount” that returns the -number of rows in the HTML5 table body. The minimum number of rows is -zero when only the HTML5 table’s headings are populated.

-

The CSVTextarea has a method called “columnCount” that returns the -number of columns in the HTML5 table headings. The minimum column count -is one. A HTML5 table must have at least one column heading.

-

The CSVTextarea HTML5 table body must have the same number of columns -as the heading columns.

-

The CSVTextarea has a method called “isEmptyRow”. It takes a row -index. The method scans each TD of the row and if each TD has an enpty -innerHTML then it returns true. If a TD’s innerHTML has content true is -returned.

-

The CSVTextarea has a method “appendRow” that adds an row of empty TD -at the bottom of the HTML5 table body. Set the input fosuc to the first -TD in the added row.

-

The CSVTextarea has a method “cleanupTable” that looks at each row in -the HTML5 table’s body and removes it if “isEmptyRow” returns true. It -should start checking for the empty rows from the bottom and work it’s -way to the top.

-

The CSVTextarea has a method “toCSV” method that returns the HTML5 -table’s body and a CSV text. The toCSV method should use “stringifyCSV” -imported from “./parseCSV.js” to encode the rows array in CSV -format.

-

The CSVTextarea has a method “fromCSV” that takes CSV text, uses the -imported “parseCSV” function and result rows into the HTML5 table -body.

-

The CSVTextarea has a method “toObjects”. The method returns a array -objects representing each TD in the HTML5 table’s body. The objects will -have the row index, column index and value of the TDs.

-

The CSVTextarea has a method “fromObjects”. The method takes an array -of objects that have the row index, column index and value. It maps the -objects into the HTML5 table body replacing or creating TD has -needed.

-

When the CSVTextarea’s inner TEXTAREA’s innerText is an empty string -then display the HTML5 table with a single empty row with the same -number of cells as the number of column headings.

-

CSVTextarea should have methods the correspond to a HTML5 table’s -methods.

-

CSVTextarea web component must follow W3C accessibilty -guidelines.

-

Multiple CSVTextarea may occur in a web page.

-

The CSVTextarea will normally be used to wrap a TEXTAREA element. The -innerHTML of the TEXTAREA element will provide CSV content used to -initial the editable HTML5 table element’s body.

-

The CSVTextarea has a method “fromTextarea” that reads an innerHTML’s -TEXTAREA, parses the content using “parseCSV” method and updates the -HTML5 table body.

-

The CSVTextarea has a method “toTextarea” that takes the contents of -the HTML5 table body and uses “stringifyCSV” when setting the -innerHTML’s of TEXTAREA.

-

Example usage of the CSVTextarea should look like this.

-
<csv-textarea id="my-csv" name="csv-table" class="csv-component" title="CSV Editor" placeholder="Enter CSV data" caption="CSV Table" column-headings="Name,Age,City" cols="3" rows="5">
-<datalist id="city">
-<option value="Azuza">
-<option value="Cocomo">
-<option value="Malibu">
-<option vlaue="Topanga">
-<option value="Rancho Cucamonga">
-<option vlaue="Zuma">
-</datalist>
-<textarea>
-"Doe, Jane", 20, Rancho Cucamonga
-"Doe, John", 25, Cocomo
-</textarea>
-</csv-textarea>
-

When the CSVTextarea is initialized it reads the wrapped TEXTAREA’s -innerText and has the Table object parse the CSV content and populate -the table. There should not be a TEXTAREA rendered by the CSVTextarea -web component.

-

The CSVTextarea has two buttons below the HTML5 table. The first -button is labeled “Append Row”, it triggers the “appendRow” action. The -second button is called “Cleanup” it triggers the “cleanupTable” action. -If “debug” is true then those events are shown in the console.

-

If the CSVTextarea “debug” attribute is true then a third button with -a label “Debug”. When clicked the the current fucus information and the -content CSVTextarea’s TEXTAREA’s innerHTML will be display the results -for toCSV in the console.

-

Please display the ES6 module, “csvtextarea.js”.

-

When text in a TD is selected and the backspace key is pressed delete -the selected text. If not text is selected and the backspace key is -pressed delete the character before the cursor.

-

When CSVTextarea is initialized without any CSV data the HTML5 table -the header and use the appendRow method to add an empty row to the HTML5 -table’s body.

-

CSVTextarea should include “getCellValue” method that take a row -index and column index or name. It should return the value of the -corresponding input element contained in the TD of the table’s body -corresponding row and index. If column index is not a number the column -index value is dereved by matching the string against a -column-heading.

-

CSVTextarea should include a “setCellValue” method that takes a row -index, column index or name, and a value. It sets the value of the input -element contained in the TD corresponding the the row and column index. -If column index is not a number the column index value is dereved by -matching the string against a column-heading.

-

CSVTextarea should include a method toJSON that uses -toObjects and returns the results by using -JSON.stringify.

-

CSVTextarea should include a method fromJSON that takes -a JSON string and used JSON.parse and -fromObjects to update the CSVTextarea table.

-

CSVTextarea should include a method called -setAutocomplete that will associated a datalist in the HTML -Template with a column’s input elements. The -setAutocomplate takes a column index or name and an array -of objects where each object’s value is used when creating the -datalist’s options.

-

CSVTextarea should include a method called -getAutocomplete. This method takes a column index or name. -It returns an array of objects representing the options associated with -the column’s datalist. If no datalist is found it returns undefined.

-

If the CSVTextarea as a title attribute, “help-description” attribute -a clickable “ⓘ” should be included after the buttons. Clicking toggles -the a help message. The help message is composed from the CSVTextarea’s -title if available, the value in a “help-text” attribute if available -and should describe navigating and editing the table.

-
- - \ No newline at end of file diff --git a/llm_notes/parseCSV_llm_generated_specification.html b/llm_notes/parseCSV_llm_generated_specification.html deleted file mode 100644 index 2d78539..0000000 --- a/llm_notes/parseCSV_llm_generated_specification.html +++ /dev/null @@ -1,139 +0,0 @@ - - - - CL-web-components - - - - -
-

Function Specifications

-

1. parseCSVRow

- -

2. parseCSV

- -

3. stringifyCSVRow

- -

4. stringifyCSV

- -

General Requirements

- -

This specification can be used to guide an LLM in generating -functionally equivalent code in another programming language or to -rewrite the JavaScript code with the same functionality.

-
- - \ No newline at end of file diff --git a/llm_notes/parseCSV_llm_prompts.html b/llm_notes/parseCSV_llm_prompts.html deleted file mode 100644 index 960cee9..0000000 --- a/llm_notes/parseCSV_llm_prompts.html +++ /dev/null @@ -1,63 +0,0 @@ - - - - CL-web-components - - - - -
-

parseCSV JavaScript -module

-
-

I generated the Javacript Generated with the DuckDuckGo Anthromophic -Claude LLM, it did better than Mistral LLM.

-
-

This is a JavaScript module with a single exported function called -“parseCSV”.

-

This “parseCSV” function returns a two dimensional array of rows and -columns. It takes a single string as a parameter. It is intended to -accurately process CSV data.

-

“parseCSV” takes a string containing zero or more lines of text. It -treats each line as a row. Each row may contain zero or more columns of -data. Each column in the row may contain any valid UTF8 character. When -evaluating a row it is scanned for column data. A column starts with the -first non space character. A column starts with double quotes then the -column will not end until a matching double quote is encountered. Commas -are used to eparate the value of each column. Here is an example, this -row as three columns "Doe, Jane", 20, "Rancho Cucamonga" -the first column’s value is Doe, Jane, the second column -value is 20 and the third column value is -Rancho Cucamonga. When the rows are evaluated the highest -column count should be remembered. Whan all rows have been processed -make sure they call have the same number of columns, if not add the -necessary columns for them to match. The parseCSV function should avoid -using regular expressions.

-

Here is an example of using the “parseCSV” function.

-
let data = parseCSV(`one,two,three
-"Dean, Joe", 22, "And what?"
-    to, "tell, the", something
-or other, in , may
-`);
-(data.length === 4) ? console.log(`${data.length}$ lines read successfuly`) : console.log(`error: ${data.length} lines read, expected 4`);
-let i = 0;
-for (let row of data) {
-    (row.length === 3) ? '' : console.log(`row ${i} is wrong length, ${row}`);
-}
-

The “data” variable should be a two dimensional array of rows and -columns.

-
- - \ No newline at end of file diff --git a/llm_notes/prompt_to_generate_llm_specitication.html b/llm_notes/prompt_to_generate_llm_specitication.html deleted file mode 100644 index 212dac9..0000000 --- a/llm_notes/prompt_to_generate_llm_specitication.html +++ /dev/null @@ -1,26 +0,0 @@ - - - - CL-web-components - - - - -
-

What follows is the JavaScript ES6 moduled. Please analyze it and -provide a comprehensive and detailed specification suitable to recreate -it using an large langauge model.

-
- - \ No newline at end of file diff --git a/llm_notes/sortable_table_llm_prompts.html b/llm_notes/sortable_table_llm_prompts.html deleted file mode 100644 index a055163..0000000 --- a/llm_notes/sortable_table_llm_prompts.html +++ /dev/null @@ -1,48 +0,0 @@ - - - - CL-web-components - - - - -
-

I need to created a web component called sortable-table. -that wraps an HTML table element. The web component will -allow you to sort the table descending or ascending by clicking the -column heads. The column headings and rows are determined by the table -being wrapped by the web component.

-

Here’s an example of using the web component.

-
<storable-table>
-    <table>
-        <thead>
-            <tr><th>name</th><th>university</th><th>grad year</th></tr>
-        </thead>
-        <tbody>
-            <tr><td>Alice</td><td>Mills College</td><td>1922</td></tr>
-            <tr><td>Sr. Mary</td><td>Mount Saint Mary's College</td><td>1919</td></tr>
-            <tr><td>Goergina</td><td>Smith College</td><td>1925</td></tr>
-        </tbody>
-    </table>
-</sortable-table>
-

When the sortable-table web component instantiates it -recreated the innerHTML table representation but makes the table -sortable. When you click on a column it sorts the table by that column. -There is also a search column form at the top of the table that will -filter the table results by the column select and the text typed in.

-

Please generate the JavaScript to created this component.

-
- - \ No newline at end of file diff --git a/make.ps1 b/make.ps1 deleted file mode 100644 index 0e79f88..0000000 --- a/make.ps1 +++ /dev/null @@ -1,113 +0,0 @@ -# Simple PowerShell script for a Web Component Project - -$PROJECT = "CL-web-components" -$GIT_GROUP = "caltechlibrary" -$WEB_COMPONENTS = @("ul-a-to-z-list.js", "textarea-agent-list.js", "textarea-csv.js", "table-sortable.js") -$RELEASE_DATE = Get-Date -Format "yyyy-MM-dd" -$RELEASE_HASH = git log --pretty=format:'%h' -n 1 -$HTML_PAGES = Get-ChildItem -Recurse -Filter *.html | Where-Object { $_.Name -notmatch 'test?.html' } | ForEach-Object { $_.FullName } -$DOCS = Get-ChildItem -Filter *.md | ForEach-Object { $_.Name } -$PACKAGE = Get-ChildItem -Filter *.go | ForEach-Object { $_.Name } -$VERSION = (Get-Content codemeta.json | ConvertFrom-Json).version -$BRANCH = git branch | Select-String '\*' | ForEach-Object { $_.Line.Split(' ')[-1] } -$OS = $env:OS -$PREFIX = $HOME -$EXT = if ($OS -eq "Windows_NT") { ".exe" } else { "" } - -function Build { - deno task build -} - -function Hash { - git log --pretty=format:'%h' -n 1 -} - -function Generate-Readme { - cmt codemeta.json README.md -} - -function Generate-VersionJs { - cmt codemeta.json version.js -} - -function Generate-Citation { - cmt codemeta.json CITATION.cff -} - -function Generate-About { - cmt codemeta.json about.md -} - -function Website { - & .\website.ps1 clean - & .\website.ps1 build -} - -function Status { - git status -} - -function Save { - param([string]$msg = "Quick Save") - git commit -am $msg - git push origin $BRANCH -} - -function Refresh { - git fetch origin - git pull origin $BRANCH -} - -function Publish { - Website - .\publish.bash -} - -function Clean { - Remove-Item -Force *.bak -ErrorAction SilentlyContinue - if (Test-Path dist) { Remove-Item -Recurse -Force dist } - if (Test-Path testout) { Remove-Item -Recurse -Force testout } -} - -function Dist { - Build - Remove-Item -Recurse -Force dist\* -ErrorAction SilentlyContinue - - deno task release - - # Define the list of files to copy - $filesToCopy = @("INSTALL.md", "LICENSE", "about.md", "README.md", "codemeta.json", "CITATION.cff") - Copy-Item -Path $filesToCopy -Destination dist - - # Define the list of files to compress - $filesToCompress = @("*.md", "LICENSE", "CITATION.cff", "codemeta.json") + $WEB_COMPONENTS + "cl-web-components.js" - - # Change to the dist directory and compress the files - Set-Location dist - Compress-Archive -Path $filesToCompress -DestinationPath "cl-web-components-$VERSION.zip" - Set-Location .. -} - -function Release { - Dist - Write-Host "`nReady for release.`n" -} - -# Main execution -switch ($args[0]) { - "build" { Build } - "hash" { Hash } - "README.md" { Generate-Readme } - "version.js" { Generate-VersionJs } - "CITATION.cff" { Generate-Citation } - "about.md" { Generate-About } - "website" { Website } - "status" { Status } - "save" { Save $args[1] } - "refresh" { Refresh } - "publish" { Publish } - "clean" { Clean } - "dist" { Dist } - "release" { Release } - default { Write-Host "No valid target specified." } -} diff --git a/publish_to_s3.bash.1.html b/publish_to_s3.bash.1.html deleted file mode 100644 index 85dde57..0000000 --- a/publish_to_s3.bash.1.html +++ /dev/null @@ -1,74 +0,0 @@ - - - - CL-web-components - - - - - - -
-Caltech Library logo -
- - -
-

Loading environment from media.env %publish_to_s3.bash(1) user manual -% R. S. Doiel % 2025-08-06

-

NAME

-

publish_to_s3.bash

-

SYNOPSIS

-

publish_to_s3.bash [OPTION]

-

DESCRIPTION

-

publish_to_s3.bash copies the web components and related CSS to the -s3 bucket based on the ENVIRONMENT defined “media.env”.

-

ENVIRONMENT

-

The environment required includes the following

-
-
BUCKET_NAME
-
-S3 bucket name, e.g. “s3://media.example.edu” -
-
BASE_URL
-
-The base URL of the website, e.g. “https://media.example.edu” -
-
DISTRIBUTION_ID
-
-The AWS assigned identifier for the bucket. Looks like a long string of -uppercase letters with numbers. -
-
-

OPTIONS

-
-
help, -h, –help
-
-Display this help page -
-
dry-run, -dry-run, –dry-run
-
-Do a dry run of the copying process without actually copying the -content. -
-
-

EXAMPLES

-
publish_to_s3.bash help
-publish_to_s3.bash dry-run
-publish_to_s3.bash
-
- - - diff --git a/search.html b/search.html deleted file mode 100644 index 9aa5abd..0000000 --- a/search.html +++ /dev/null @@ -1,61 +0,0 @@ - - - - CL-web-components - - - - - - -
-Caltech Library logo -
- - -
-

CL-web-components

- - - - -
- - - \ No newline at end of file diff --git a/table-sortable.html b/table-sortable.html deleted file mode 100644 index 74bbd88..0000000 --- a/table-sortable.html +++ /dev/null @@ -1,82 +0,0 @@ - - - - CL-web-components - - - - - - -
-Caltech Library logo -
- - -
-

Table Sortable Web Component

-

This web component wraps a standard HTML table. It displays the table -and makes it sortable by the column headings and provides a search -filter element that operates on the table by column.

-

Example

-

This is a standard table without the web component.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameUniversityGraduation Year
AliceMills College1922
Sr. MaryMount Saint Mary's College1919
GeorginaSmith College1925
EvelynBarnard College1920
-
-

The sortable of version is here.

-
- - -

See a the Table Sortable -Demo

-
- - - diff --git a/textarea-agent-list.html b/textarea-agent-list.html deleted file mode 100644 index 6ed8bf6..0000000 --- a/textarea-agent-list.html +++ /dev/null @@ -1,142 +0,0 @@ - - - - CL-web-components - - - - - - -
-Caltech Library logo -
- - -
-

TextareaAgentList

-

This is a web component targets a textarea that hold JSON of a list -of agents. Agents are either people or organizations. People have a -family and given names along with an ORCID. Organizations have a name -along with a ROR. The list can contain either type of Agent.

-

Overview

-

Library and Archives often of lists of people and organizations. In -bibliographic material this would be the case for authors or -contributors to a book or other published material. Lists are not -natively supported in HTML web forms. The closest native element is a -textarea which can contain an arbitrary number of lines. An early -practice before JavaScript was invented was to teach people how to type -in delimited text. After the introduction of JavaScript the JSON -notation became a native browser structured data representation. For -complex metadata objects describing a person or organization JSON -provides a reasonably effective representation. How typing JSON into a -textarea is error prone, hence this web component. If web components are -not supported by the browser then an inner textarea element functions as -a fallback. Otherwise the wrapping web component provide a reasonable -interface for managing the list of agents.

-

Key Features

- -

Attributes

- -

Usage

-
    -

  1. Include the Component: Ensure the component’s -JavaScript file is included in your HTML.

    2. -

  2. HTML Structure: Use the -<textarea-agent-list> tag and include a -<textarea> element inside it. The textarea can have -JSON expressing a list of agents (people and organizations).

    3. -
-

Example

-

Here’s an example of how to use the -<textarea-agent-list> component in an HTML file:

-
<textarea-agent-list>
-    <textarea name="agentListJson" rows="11" cols="46">
-[
-    {
-        "family_name": "Doe",
-        "given_name": "John",
-        "orcid": "0000-0000-0000-0000"
-    },
-    {
-        "name": "Example Organization",
-        "ror": "https://ror.org/05dxps055"
-    }
-]
-    </textarea>
-</textarea-agent-list>
-

This is how the standard textarea for that would look.

-

- -

-
-This is how the component version looks -
- - -

Explanation

- -

Customization

- -

Conclusion

-

The TextareaAgentList component simplifies the creation -of metadata applications that contain lists of people and -organizations.

-
- - - diff --git a/textarea-csv.html b/textarea-csv.html deleted file mode 100644 index 9673802..0000000 --- a/textarea-csv.html +++ /dev/null @@ -1,148 +0,0 @@ - - - - CL-web-components - - - - - - -
-Caltech Library logo -
- - -
-

TextareaCSV

-

This is a web component intended to wrap a textarea where people -would enter CSV encoded text. By wrapping the textarea element we -provide a fallback should JavaScript be unavailable.

-

Overview

-

The TextareaCSV web component is designed to create an -interactive table from CSV data, allowing users to edit the data -directly in the table. It supports features like appending rows, -cleaning up empty rows, and converting table data to and from CSV -format.

-

Key Features

- -

Attributes

- -

Usage

-
    -

  1. Include the Component: Ensure the component’s -JavaScript file is included in your HTML.

    2. -

  2. HTML Structure: Use the -<textarea-csv> tag and include a -<textarea> with CSV data inside it.

    3. -
-

Example

-

Here’s an example of how to use the TextareaCSV -component in an HTML file:

-
  <textarea-csv id="people-table" name="people-table" column-headings="Name,Age,City" debug>
-    <textarea id="people-table" name="people-table" rows="2" cols="36>
-      John Doe,30,New York
-      Jane Smith,25,Los Angeles
-    </textarea>
-  </textarea-csv>
-

Here is what that standard textarea looks like.

-

- -

-

-Here’s the tablized version. -

-

- - -

Explanation

- -

Customization

- -

Conclusion

-

The TextareaCSV component simplifies the creation of -editable tables from CSV data, making it easier to manage and interact -with tabular data in web applications. By following the usage guidelines -and customizing as needed, you can integrate this component into your -web projects seamlessly.

- -
- - - diff --git a/ul-a-to-z-list.html b/ul-a-to-z-list.html deleted file mode 100644 index c2564de..0000000 --- a/ul-a-to-z-list.html +++ /dev/null @@ -1,123 +0,0 @@ - - - - CL-web-components - - - - - - -
-Caltech Library logo -
- - -
-

ULAtoZList

-

This is a web component targeting simple A to Z lists derived from UL -lists. It wraps an innerHTML that contains a UL list as the fallback if -JavaScript is unavailable.

-

Overview

-

The ULAToZList web component is designed to create an -alphabetical menu from a list of items. It organizes the items into -sections based on their initial letter and provides navigation between -these sections.

-

Key Features

- -

Attributes

- -

Usage

-
    -

  1. Include the Component: Ensure the component’s -JavaScript file is included in your HTML.

    2. -

  2. HTML Structure: Use the -<ul-a-to-z-list> tag and include a -<ul> with <li> items inside -it.

    3. -
-

Example

-

Implementation

-

Here’s an example of how to use the ULAToZList component -in an HTML file:

-
  <ul-a-to-z-list>
-    <ul>
-      <li>Apple</li>
-      <li>Banana</li>
-      <li>Cherry</li>
-      <li>Date</li>
-      <li>Elderberry</li>
-    </ul>
-  </ul-a-to-z-list>
-

Here’s that UL list without the web component wraping it

- -
-Here’s the version with an A to Z list integrated. -
- - -

Explanation

- -

Customization

- -

Conclusion

-

The ULAToZList component simplifies the creation of -alphabetical navigation menus, making it easier to organize and navigate -large lists of items. By following the usage guidelines and customizing -as needed, you can integrate this component into your web projects -seamlessly.

-
- - - diff --git a/user_manual.html b/user_manual.html deleted file mode 100644 index 46f9aba..0000000 --- a/user_manual.html +++ /dev/null @@ -1,105 +0,0 @@ - - - - CL-web-components - - - - - - -
-Caltech Library logo -
- - -
-

User Manual

- -
- - - diff --git a/web_component_naming.html b/web_component_naming.html deleted file mode 100644 index d07c48b..0000000 --- a/web_component_naming.html +++ /dev/null @@ -1,68 +0,0 @@ - - - - CL-web-components - - - - - - -
-Caltech Library logo -
- - -
-

Web Component Naming

-

Naming things is one of the biggest problems in computer science. -Picking good names for web components falls clearly in this problem -space. A successful component may be used to years or longer. The name -should make it clear what the component does and how it might be -used.

-

The history of web components suggest an important naming convention, -two or more words separate by a dash. We can take advantage of this to -make our HTML use of the component clearer. In this spirit the consensus -of the DLD team in Summer 2025 is to start a component name using the -standard element you’re extending along with descriptive word or -phrase.

-

Our textarea extending element that presents a table -view of CSV text content starts with textarea as the prefix -in the name. It then adds csv, the data it is presenting to -manage. Thus the element should be named textarea-csv. Our -A to Z list element that wraps a UL list follows this approach too, -ul-a-to-z-list. When you see the markup below it looks like -standard HTML and you can see what is being extended.

-

textarea-csv example:

-
<textarea-csc>
-    <textarea>A,B
-one,two
-three,four
-    </textarea>
-</textarea-csv>
-

ul-a-to-z-list example:

-
<ul-a-to-z-list>
-    <uL>
-        <li>A item</li>
-        <li>B item</li>
-        <li>Z item</li>
-    </ul>
-</ul-a-to-z-list>
-
- - -