Initial commit

Author: jessarcher

Diff for: .editorconfig

@@ -0,0 +1,15 @@
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+insert_final_newline = true
+indent_style = space
+indent_size = 4
+trim_trailing_whitespace = true
+
+[*.md]
+trim_trailing_whitespace = false
+
+[*.{yml,yaml}]
+indent_size = 2

Diff for: .gitattributes

@@ -0,0 +1,7 @@
+* text=auto
+
+/.github export-ignore
+/tests export-ignore
+.editorconfig export-ignore
+.gitattributes export-ignore
+.gitignore export-ignore

Diff for: .gitignore

@@ -0,0 +1,3 @@
+vendor/
+.phpunit.result.cache
+composer.lock

Diff for: LICENSE.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

Diff for: README.md

@@ -0,0 +1,74 @@
+# Unfenced
+
+Unleash your fenced code.
+
+An extension for [`league/commonmark`](https://github.com/thephpleague/commonmark/).
+
+## Installation
+
+After installing the package, you will need to register the extension.
+
+### Using `graham-campbell/markdown`
+
+In your `config/markdown.php` file, add the extension somewhere after the `CommonMarkCoreExtension`:
+
+```diff
+  return [
+      // ...
+      'extensions' => [
+          League\CommonMark\Extension\CommonMark\CommonMarkCoreExtension::class,
+          League\CommonMark\Extension\GithubFlavoredMarkdownExtension::class,
++         Laravel\Unfenced\UnfencedExtension::class,
+      ],
+  ];
+```
+
+### Manually
+
+```php
+use Laravel\Unfenced\UnfencedExtension;
+use League\CommonMark\Environment\Environment;
+use League\CommonMark\Extension\CommonMark\CommonMarkCoreExtension;
+use League\CommonMark\MarkdownConverter;
+
+$environment = new Environment();
+$environment->addExtension(new CommonMarkCoreExtension());
+$environment->addExtension(new UnfencedExtension());
+
+$converter = new MarkdownConverter($environment);
+echo $converter->convert('...');
+```
+
+## Usage
+
+Features are enabled via the "info" string of the code fence.
+
+Note that this extension does not include any CSS.
+
+### Adding file names
+
+To display a file name above your code, add the `filename` attribute:
+
+    ```php filename=src/Hello.php
+    // ...
+    ```
+
+### Adding tabs
+
+Adjacent code fences can be grouped into a tabbed view by specifying the `tab` attribute:
+
+    ```vue tab=Vue
+    // ...
+    ```
+
+    ```javascript tab=React
+    // ...
+    ```
+
+You may also include the `filename` attribute, which is especially helpful when providing code samples where the file name differs depending on the language.
+
+The extension will inject JavaScript into your page when tabs are used. The JavaScript enables the following features:
+
+* It will apply an `active` class to the active tab button and tab content. You may use CSS to highlight the active tab, and hide the inactive tab content.
+* If multiple tabbed sections are found, and they contain identical tab names, they will be synchronized. I.e, clicking the "React" tab in one section, will switch to that tab in all sections.
+* The active tab is saved to the browsers local storage so that is can persist between pages and even visits.

Diff for: composer.json

@@ -0,0 +1,23 @@
+{
+    "name": "laravel/unfenced",
+    "type": "library",
+    "license": "MIT",
+    "autoload": {
+        "psr-4": {
+            "Laravel\\Unfenced\\": "src/",
+            "Tests\\": "tests/"
+        }
+    },
+    "authors": [
+        {
+            "name": "Jess Archer",
+            "email": "[email protected]"
+        }
+    ],
+    "require": {
+        "league/commonmark": "^2.3"
+    },
+    "require-dev": {
+        "phpunit/phpunit": "^9.5"
+    }
+}

Diff for: js/tabbed-code.js

@@ -0,0 +1,38 @@
+function setTab(tab, group, save) {
+    save = typeof save === 'undefined' ? true : save
+
+    document
+        .querySelectorAll(`.tabbed-code[data-group="${group}"] .tabbed-code-nav-button`)
+        .forEach(el => el.classList.remove('active'))
+    document
+        .querySelectorAll(`.tabbed-code[data-group="${group}"] .code-container`)
+        .forEach(el => el.classList.remove('active'))
+    document
+        .querySelectorAll(`.tabbed-code[data-group="${group}"] [data-tab="${tab}"]`)
+        .forEach(el => el.classList.add('active'))
+
+    if (save) {
+        saveTab(tab, group)
+    }
+}
+
+function getTabs() {
+    try {
+        return JSON.parse(localStorage.tabs)
+    } catch {
+        return {}
+    }
+}
+
+function saveTab(tab, group) {
+    localStorage.tabs = JSON.stringify({
+        ...getTabs(),
+        [group]: tab,
+    })
+}
+
+function restoreTabs() {
+    Object.entries(getTabs()).forEach(([group, tab]) => setTab(tab, group, false))
+}
+
+restoreTabs()

Diff for: phpunit.xml

@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<phpunit xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+         xsi:noNamespaceSchemaLocation="./vendor/phpunit/phpunit/phpunit.xsd"
+         colors="true"
+>
+    <testsuites>
+        <testsuite name="Tests">
+            <directory suffix="Test.php">./tests</directory>
+        </testsuite>
+    </testsuites>
+    <coverage processUncoveredFiles="true">
+        <include>
+            <directory suffix=".php">./src</directory>
+        </include>
+    </coverage>
+</phpunit>

Diff for: src/Node/FencedCodeContainer.php

@@ -0,0 +1,44 @@
+<?php
+
+namespace Laravel\Unfenced\Node;
+
+use Laravel\Unfenced\Parser\FencedCodeAttributeParser;
+use League\CommonMark\Extension\CommonMark\Node\Block\FencedCode;
+use League\CommonMark\Node\Block\AbstractBlock;
+
+class FencedCodeContainer extends AbstractBlock
+{
+    public array $attributes;
+
+    public function __construct(FencedCode $fencedCode)
+    {
+        $this->attributes = $this->parseAttributes($fencedCode);
+
+        $this->appendChild($fencedCode);
+    }
+
+    public function filename(): ?string
+    {
+        return $this->attributes['filename'] ?? null;
+    }
+
+    public function hasFilename(): bool
+    {
+        return isset($this->attributes['filename']);
+    }
+
+    public function tab(): ?string
+    {
+        return $this->attributes['tab'] ?? null;
+    }
+
+    public function hasTab(): bool
+    {
+        return isset($this->attributes['tab']);
+    }
+
+    protected function parseAttributes(FencedCode $fencedCode)
+    {
+        return (new FencedCodeAttributeParser())->parse($fencedCode);
+    }
+}

Diff for: src/Node/TabbedCode.php

@@ -0,0 +1,28 @@
+<?php
+
+namespace Laravel\Unfenced\Node;
+
+use League\CommonMark\Node\Block\AbstractBlock;
+
+class TabbedCode extends AbstractBlock
+{
+    public readonly string $group;
+
+    /**
+     * @param array<FencedCodeContainer> $children
+     */
+    public function __construct(array $children)
+    {
+        $this->group = $this->generateTabHash($children);
+
+        $this->replaceChildren($children);
+    }
+
+    /**
+     * @param array<FencedCodeContainer> $children
+     */
+    protected function generateTabHash(array $children)
+    {
+        return md5(implode('', array_map(fn (FencedCodeContainer $child) => $child->tab(), $children)));
+    }
+}

Diff for: src/Node/TabbedCodeScript.php

@@ -0,0 +1,9 @@
+<?php
+
+namespace Laravel\Unfenced\Node;
+
+use League\CommonMark\Node\Node;
+
+class TabbedCodeScript extends Node
+{
+}

Diff for: src/Parser/FencedCodeAttributeParser.php

@@ -0,0 +1,52 @@
+<?php
+
+namespace Laravel\Unfenced\Parser;
+
+use League\CommonMark\Extension\CommonMark\Node\Block\FencedCode;
+
+class FencedCodeAttributeParser
+{
+    /**
+     * @return array<string, string|bool>
+     */
+    public function parse(FencedCode $node): array
+    {
+        $info = $node->getInfo();
+
+        if ($info === null) {
+            return [];
+        }
+
+        preg_match('/^(\w+\b(?!=))(?:\s(.*))?/', $info, $matches);
+
+        $language = $matches[1] ?? null;
+        $attributes = $matches[2] ?? null;
+
+        if ($attributes === null) {
+            return [];
+        }
+
+        return $this->parseAttributes($attributes);
+    }
+
+    /**
+     * @return array<string, string|bool>
+     */
+    protected function parseAttributes(string $attributes): array
+    {
+        preg_match_all(
+            '/([^=\s]+)(?:=(?:["\']?((?:.(?!["\']?\s+(?:\S+)=|\s*\/?[>"\']))+.)["\']?))?/',
+            $attributes,
+            $matches,
+            PREG_UNMATCHED_AS_NULL
+        );
+
+        $result = [];
+
+        foreach ($matches[1] as $i => $key) {
+            $result[$key] = $matches[2][$i] ?? true;
+        }
+
+        return $result;
+    }
+}

Diff for: src/Renderer/FencedCodeContainerRenderer.php

@@ -0,0 +1,49 @@
+<?php
+
+namespace Laravel\Unfenced\Renderer;
+
+use Laravel\Unfenced\Node\FencedCodeContainer;
+use League\CommonMark\Node\Node;
+use League\CommonMark\Renderer\ChildNodeRendererInterface;
+use League\CommonMark\Renderer\NodeRendererInterface;
+use League\CommonMark\Util\HtmlElement;
+
+class FencedCodeContainerRenderer implements NodeRendererInterface
+{
+    public function render(Node $node, ChildNodeRendererInterface $childRenderer)
+    {
+        assert($node instanceof FencedCodeContainer);
+
+        $separator = $childRenderer->getInnerSeparator();
+
+        return new HtmlElement(
+            'div',
+            array_filter([
+                'class' => 'code-container',
+                'data-tab' => $node->tab(),
+            ]),
+            [
+                $separator,
+                $this->renderFilename($node, $separator),
+                $node->hasFilename() ? $separator : null,
+                $childRenderer->renderNodes($node->children()),
+                $separator,
+            ]
+        );
+    }
+
+    protected function renderFilename(FencedCodeContainer $node)
+    {
+        if (! $node->hasFilename()) {
+            return null;
+        }
+
+        return new HtmlElement(
+            'div',
+            ['class' => 'code-container-filename'],
+            [
+                $node->filename()
+            ],
+        );
+    }
+}