Add doc webpage

.github/workflows/publish-docs.yml

@@ -0,0 +1,31 @@
+on:
+    push:
+      branches: [main, master]
+    release:
+        types: [published]
+    workflow_dispatch: {}
+
+name: demo-website
+
+jobs:
+    demo-page:
+        runs-on: ubuntu-latest
+        # Only restrict concurrency for non-PR jobs
+        concurrency:
+          group: quarto-publish-${{ github.event_name != 'pull_request' || github.run_id }}
+        permissions:
+          contents: write
+        steps:
+        - name: "Check out repository"
+          uses: actions/checkout@v4
+
+        - name: "Set up Quarto"
+          uses: quarto-dev/quarto-actions/setup@v2
+          with:
+            version: "pre-release"
+
+        - name: Publish to GitHub Pages (and render)
+          uses: quarto-dev/quarto-actions/publish@v2
+          with:
+              target: gh-pages
+              path: docs

docs/.gitignore

@@ -0,0 +1 @@
+/.quarto/

docs/_extensions

@@ -0,0 +1 @@
+../_extensions

docs/_quarto.yml

@@ -0,0 +1,30 @@
+project:
+  type: website
+
+website:
+  title: "custom-callout"
+  reader-mode: true
+  repo-url: https://github.com/coatless-quarto/custom-callout/
+  repo-actions: [edit, issue]
+  sidebar:
+    style: "floating"
+    search: true
+    tools:
+      - icon: github
+        href: https://github.com/coatless-quarto/custom-callout/
+    contents: 
+      - text: "Home"
+        file: index.qmd
+      - section: "Support"
+        contents:
+        - text: "FAQ"
+          href: qcustom-callout-faq.qmd
+        - text: "Submit an issue"
+          href: https://github.com/coatless-quarto/custom-callout/issues/new/choose
+      - section: "Extra"
+        contents:
+        - qcustom-callout-release-notes.qmd
+
+format: 
+  html:
+    toc: true

docs/index.qmd

@@ -0,0 +1,89 @@
+---
+title: "Custom Callout Extension"
+format: 
+  html:
+    toc: false
+custom-callout:
+  todo:
+    icon-symbol: "📝"
+    color: "pink"
+  test:
+    title: "Testing Note"
+    icon-symbol: "⚠️"
+    color: "#FFA500"
+filters:
+- custom-callout
+---
+
+The `custom-callout` extension enhances Quarto's built-in callout functionality by allowing you to
+create and use custom callouts in your Quarto documents. With this extension, you can define your 
+own callout types with custom colors, icons, and appearances.
+
+## Installation
+
+To install the `custom-callout` extension, follow these steps:
+
+1. Open your terminal.
+2. Navigate to your Quarto project directory.
+3. Execute the following command:
+
+```bash
+quarto add username/custom-callout
+```
+
+This command will download and install the extension under the `_extensions` subdirectory of your Quarto project. 
+If you're using version control, make sure to include this directory in your repository.
+
+## Usage
+
+The `custom-callout` extension allows you to define custom callouts in your YAML front matter and then use them in your Quarto documents.
+Here's a quick overview of the available YAML options:
+
+| Option | Description | Example |
+|--------|-------------|---------|
+| `title` | Default title for the callout (optional) | `title: "Important Note"` |
+| `icon` | Use a default icon (optional) | `icon: true` |
+| `icon-symbol` | Custom symbol or text for the icon | `icon-symbol: "📝"` |
+| `color` | Color for the callout's left border and icon | `color: "#FFA500"` |
+| `appearance` | Callout appearance (optional) | `appearance: simple` |
+| `collapse` | Make the callout collapsible (optional) | `collapse: true` |
+
+You can start using custom callouts in your Quarto project immediately after installation. First, define your custom callouts in the YAML front matter:
+
+```yaml
+custom-callout:
+  todo:
+    icon-symbol: "📝"
+    color: "pink"
+  test:
+    title: "Testing Note"
+    icon-symbol: "⚠️"
+    color: "#FFA500"
+```
+
+
+Then, use the custom callouts in your Markdown content:
+
+```markdown
+::: todo
+Remember to complete this section.
+:::
+
+::: test
+This information is crucial for understanding the concept.
+:::
+```
+
+## Examples
+
+Here are some examples of custom callouts in action:
+
+::: {.todo}
+This is a custom 'todo' callout with a pink border and a pencil icon.
+:::
+
+::: {.test}
+This is a custom 'test' callout with an orange border and a warning icon.
+:::
+
+For more detailed information on how to use and customize the `custom-callout` extension, please refer to our [FAQ](qcustom-callout-faq.qmd).

docs/qcustom-callout-faq.qmd

@@ -0,0 +1,145 @@
+---
+title: Custom Callout Extension FAQ
+custom-callout:
+  todo:
+    icon-symbol: "📝"
+    color: "pink"
+  jjb:
+    title: "fix for JJB"
+    icon-symbol: "⚠️"
+    color: "#FFA500"
+filters:
+    - custom-callout
+---
+
+## What is the custom-callout extension?
+
+The custom-callout extension is a Quarto filter that allows you to create and use custom callouts in your Quarto documents.
+It extends the built-in callout functionality, enabling you to define your own callout types with custom colors, icons, and appearances.
+
+:::{.callout-important}
+The custom-callout extension only works with Quarto HTML documents currently. We're looking into expanding support for other output formats in the future.
+:::
+
+## How do I install the custom-callout extension?
+
+To use the custom-callout extension, you need to:
+
+1. Download and install the Quarto extension from GitHub by running the following command in your Termainal:
+
+```bash
+quarto add coatless-quarto/custom-callout
+```
+
+2. Add `custom-callout` to the `filters` list in your YAML front matter or `_quarto.yml` file.
+
+3. Define your custom callouts in the YAML front matter of your Quarto document or in your `_quarto.yml` file.
+
+
+
+## How do I define custom callouts?
+
+Define custom callouts in the YAML front matter of your Quarto document or in your `_quarto.yml` file using the `custom-callout` key. For example:
+
+```yaml
+custom-callout:
+  todo:
+    icon-symbol: "📝"
+    color: "pink"
+  bug:
+    title: "Bug Report"
+    icon: false
+    color: "#FFA500"
+
+filters:
+- custom-callout
+```
+
+
+## What options can I set for each custom callout?
+
+For each custom callout, you can set the following options:
+
+- `title`: The default title for the callout (optional)
+- `icon`: Set to `true` to use a default icon, or omit for no icon
+- `icon-symbol`: A custom symbol or text to use as the icon
+- `color`: The color for the callout's left border and icon (can be a named color or hex code)
+- `appearance`: The callout appearance (optional)
+- `collapse`: Whether the callout should be collapsible (optional)
+
+## How do I use a custom callout in my document?
+
+Use custom callouts in your Markdown content with the following syntax:
+
+```markdown
+::: todo
+This is a todo item.
+:::
+
+::: bug
+Please fix this issue.
+:::
+```
+
+::: todo
+This is a todo item.
+:::
+
+::: bug
+Please fix this issue.
+:::
+
+## Can I override a property for a specific callout instance?
+
+Yes, you can override various properties title for a specific callout instance by adding them as attributes to the callout block. 
+
+For example, to set a custom title for a todo item, you can use the `title` attribute:
+
+```markdown
+::: {.todo title="Urgent Task"}
+This needs to be done ASAP.
+:::
+```
+
+::: {.todo title="Urgent Task"}
+This needs to be done ASAP.
+:::
+
+## Do custom callouts support collapsible content?
+
+Yes, custom callouts support collapsible content. You can set the `collapse` option to `true` in your callout definition to make it collapsible.
+
+## Can I use custom callouts alongside built-in Quarto callouts?
+
+Yes, you can use custom callouts alongside Quarto's built-in callouts. The custom-callout extension doesn't interfere with the standard callout syntax.
+
+## How are custom callout styles applied?
+
+The extension automatically generates CSS for your custom callouts based on the defined colors and icons. 
+This CSS is included in the document's header, ensuring that your custom callouts are styled correctly.
+
+## What if I want to change the appearance of all my custom callouts?
+
+You can modify the `generateCustomCSS` function in the `custom-callout.lua` file to change the default styling for all custom callouts.
+However, be careful when making changes to the Lua script, as it may affect the functionality of the extension.
+Alternatively, you can add custom CSS to your document to override the default styles.
+
+## Is this extension compatible with all Quarto output formats?
+
+The custom-callout extension is primarily designed for HTML output. While it may work with other formats to some extent, 
+the full range of customization options (especially custom icons and colors) might not be available in non-HTML outputs.
+
+
+## How does the custom-callout extension compare to the quarto-custom-numbered-blocks extension?
+
+The [quarto-custom-numbered-blocks](https://github.com/ute/custom-numbered-blocks) extension by [Ute Hahn](https://github.com/ute) is a complementary tool that offers different functionality:
+
+- It creates numbered blocks (e.g., theorems, examples) with automatic numbering and cross-referencing.
+- Features include: 
+  - Automatic numbering and cross-referencing
+  - Grouping of block types with shared styling and numbering
+  - Generation of lists of specific block types
+  - Support for both PDF and HTML output
+- This makes it great for academic or technical documents requiring numbered theorems, examples, or exercises.
+
+Both extensions can be used in the same document if needed, but be mindful of potential styling conflicts and filter ordering.

docs/qcustom-callout-release-notes.qmd

@@ -0,0 +1,16 @@
+---
+title: "Release Notes"
+date: "10-18-2024"
+date-modified: last-modified
+engine: markdown
+format: 
+  html:
+    toc: true
+---
+
+# 0.0.0-dev.1:  ???? (??-??-????)
+
+## Features
+
+- `custom-callout` enables the creation of custom callouts. 
+