8000 Navigations (#46) · NativePHP/nativephp.com@8db2d0f · GitHub
[go: up one dir, main page]
Skip to content

Commit 8db2d0f

Browse files
SRWieZSRWieZ
authored
Navigations (#46)
1 parent 42f23d2 commit 8db2d0f

16 files changed

+251
-97
lines changed

‎app/Extensions/TorchlightWithCopyExtension.php

+38
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
<?php
2+
3+
namespace App\Extensions;
4+
5+
use Torchlight\Block;
6+
use Torchlight\Commonmark\V2\TorchlightExtension;
7+
8+
class TorchlightWithCopyExtension extends TorchlightExtension
9+
{
10+
public function defaultBlockRenderer()
11+
{
12+
return function (Block $block) {
13+
$torchlight = parent::defaultBlockRenderer();
14+
15+
return <<<HTML
16+
<div x-data="codeBlock" class="torchlight-with-copy relative md:rounded-md">
17+
<div class="flex space-x items-center absolute top-0 right-0">
18+
<div x-cloak x-show="showMessage" x-transition class="py-1 transition duration-300 text-indigo-400 font-bold">Copied!</div>
19+
<button
20+
type="button"
21+
title="Copy to clipboard"
22+
class="hidden sm:block p-2 transition duration-300"
23+
@click.prevent="copyToClipboard"
24+
:class="{
25+
'text-white/20 hover:text-white/60': !showMessage,
26+
'text-indigo-400 hover:text-indigo-400': showMessage,
27+
}">
28+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="block size-6">
29+
<path stroke-linecap="round" stroke-linejoin="round" d="M11.35 3.836c-.065.21-.1.433-.1.664 0 .414.336.75.75.75h4.5a.75.75 0 00.75-.75 2.25 2.25 0 00-.1-.664m-5.8 0A2.251 2.251 0 0113.5 2.25H15c1.012 0 1.867.668 2.15 1.586m-5.8 0c-.376.023-.75.05-1.124.08C9.095 4.01 8.25 4.973 8.25 6.108V8.25m8.9-4.414c.376.023.75.05 1.124.08 1.131.094 1.976 1.057 1.976 2.192V16.5A2.25 2.25 0 0118 18.75h-2.25m-7.5-10.5H4.875c-.621 0-1.125.504-1.125 1.125v11.25c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V18.75m-7.5-10.5h6.375c.621 0 1.125.504 1.125 1.125v9.375m-8.25-3l1.5 1.5 3-3.75" />
30+
</svg>
31+
</button>
32+
</div>
33+
{$torchlight($block)}
34+
</div>
35+
HTML;
36+
};
37+
}
38+
}

‎app/Support/CommonMark/CommonMark.php

+2-4
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,10 @@
22

33
namespace App\Support\CommonMark;
44

5+
use App\Extensions\TorchlightWithCopyExtension;
56
use League\CommonMark\CommonMarkConverter;
6-
use League\CommonMark\Extension\CommonMark\Node\Block\FencedCode;
77
use League\CommonMark\Extension\CommonMark\Node\Block\Heading;
8-
use League\CommonMark\Extension\CommonMark\Node\Block\IndentedCode;
98
use League\CommonMark\Extension\Table\TableExtension;
10-
use Torchlight\Commonmark\V2\TorchlightExtension;
119

1210
class CommonMark
1311
{
@@ -16,7 +14,7 @@ public static function convertToHtml(string $markdown): string
1614
$converter = new CommonMarkConverter();
1715
$converter->getEnvironment()->addRenderer(Heading::class, new HeadingRenderer());
1816
$converter->getEnvironment()->addExtension(new TableExtension());
19-
$converter->getEnvironment()->addExtension(new TorchlightExtension());
17+
$converter->getEnvironment()->addExtension(new TorchlightWithCopyExtension());
2018

2119
return $converter->convert($markdown);
2220
}

‎config/torchlight.php

+3
Original file line numberDiff line numberDiff line change
@@ -62,5 +62,8 @@
6262
// When lines are collapsed, this is the text that will
6363
// be shown to indicate that they can be expanded.
6464
// 'summaryCollapsedIndicator' => '...',
65+
66+
// Show or hide the copy button on code blocks.
67+
'copyable' => true,
6568
]
6669
];

‎resources/css/app.css

+20-3
Original file line numberDiff line numberDiff line change
@@ -6,12 +6,30 @@
66
display: none;
77
}
88

9+
/* Look cool on safari */
10+
.blur-background {
11+
backdrop-filter: blur(20px);
12+
}
13+
914
nav a {
1015
@apply no-underline;
1116
}
17+
nav .active > a {
18+
@apply text-[#00aaa6];
19+
}
20+
21+
/*nav .active {*/
22+
/* @apply bg-gray-50;*/
23+
/*}*/
24+
25+
26+
27+
nav ul li ul li.exact-active a {
28+
@apply text-[#00aaa6];
29+
}
1230

1331
nav a:hover {
14-
@apply text-gray-600;
32+
@apply text-gray-400;
1533
}
1634

1735
nav ul {
@@ -81,7 +99,7 @@ nav ul li ul {
8199
overflow-x-auto is recommended.
82100
*/
83101
.prose pre {
84-
@apply p-0 my-4 overflow-x-auto bg-transparent rounded;
102+
@apply p-0 my-4 overflow-x-auto bg-transparent rounded-md;
85103
}
86104

87105
/*
@@ -123,7 +141,6 @@ nav ul li ul {
123141
}
124142
nav ul li ul li a {
125143
@apply w-full;
126-
@apply py-2;
127144
@apply flex flex-1;
128145
}
129146
}

‎resources/js/alpine/codeBlock.js

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
2+
export default () => ({
3+
showMessage: false,
4+
copyToClipboard() {
5+
navigator.clipboard.writeText(
6+
// This requires torchlight.options.copyable to be "true" on the PHP side.
7+
this.$root.querySelector('.torchlight-copy-target').textContent
8+
).then(() => this.showMessage = true)
9+
10+
setTimeout(() => (this.showMessage = false), 2000)
11+
},
12+
})

‎resources/js/app.js

+7
Original file line numberDiff line numberDiff line change
@@ -1 +1,8 @@
11
import './bootstrap';
2+
import Alpine from 'alpinejs'
3+
import codeBlock from "./alpine/codeBlock.js";
4+
5+
window.Alpine = Alpine;
6+
7+
Alpine.data('codeBlock', codeBlock)
8+
Alpine.start()

‎resources/js/bootstrap.js

-6
Original file line numberDiff line numberDiff line change
@@ -9,12 +9,6 @@ window.axios = axios;
99

1010
window.axios.defaults.headers.common["X-Requested-With"] = "XMLHttpRequest";
1111

12-
import Alpine from "alpinejs";
13-
14-
window.Alpine = Alpine;
15-
16-
Alpine.start();
17-
1812
/**
1913
* Echo exposes an expressive API for subscribing to channels and listening
2014
* for events that are broadcast by Laravel. Echo and event broadcasting

‎resources/views/components/banner.blade.php

+37-10
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
1-
<div class="relative text-white bg-gray-50 dark:bg-gray-800">
2-
<div
3-
class="flex items-center justify-between gap-6 px-6 py-3 mx-auto max-w-7xl sm:py-4"
4-
>
1+
<div class="sticky top-0 blur-background text-white bg-gray-50/85 border-b border-gray-100 z-50 dark:bg-gray-800/85 dark:border-0">
2+
3+
<div class="hidden lg:block">
4+
<x-alert/>
5+
</div>
6+
<div class="lg:relative flex top-0 left-0 z-50 md:flex items-center justify-between gap-6 px-6 py-3 mx-auto max-w-screen-xl sm:py-4">
57
<a
68
href="/"
79
class="inline-flex items-center gap-3 transition rounded hover:text-white/80 focus:outline-none focus-visible:ring-2 focus-visible:ring-white/80 focus-visible:ring-offset-2 focus-visible:ring-offset-red-600"
@@ -10,17 +12,42 @@ class="inline-flex items-center gap-3 transition rounded hover:text-white/80 foc
1012
<img src="{{ asset('logo-dark.svg') }}" class="hidden h-8 dark:block">
1113
<span class="sr-only">NativePHP</span>
1214
</a>
15+
<div id="docsearch"></div>
16+
17+
<div class="hidden lg:flex items-center space-x-5">
18+
19+
<a href="https://www.linkedin.com/company/nativephp/" title="NativePHP on LinkedIn">
20+
<x-icons.linkedin class="size-5 text-black dark:text-white hover:text-[#00aaa6]" />
21+
</a>
1322

14-
<div class="flex items-center space-x-12">
15-
<div id="docsearch"></div>
23+
<a href="https://discord.gg/X62tWNStZK" title="Go to discord server">
24+
<x-icons.discord class="size-5 dark:fill-white hover:fill-[#00aaa6]" />
25+
</a>
26+
27+
<a href="https://pinkary.com/@nativephp" title="NativePHP on Pinkary">
28+
<x-icons.pinkary class="size-5 text-black dark:invert hover:text-[#00aaa6] hover:invert-0" />
29+
</a>
1630

17-
<a href="https://discord.gg/X62tWNStZK">
18-
<x-icons.discord class="w-5 h-5 dark:fill-white" />
31+
<a href="https://opencollective.com/nativephp" title="NativePHP on LinkedIn">
32+
<x-icons.opencollective class="size-5 text-black dark:invert hover:text-[#00aaa6] hover:invert-0" />
1933
</a>
2034

21-
<a href="https://github.com/nativephp">
22-
<x-icons.github class="w-5 h-5 dark:fill-white" />
35+
<a href="https://github.com/nativephp" title="Source code of NativePHP">
36+
<x-icons.github class="size-5 dark:fill-white hover:fill-[#00aaa6]" />
2337
</a>
2438
</div>
39+
<div class="lg:hidden flex justify-end pl-4">
40+
<button type="button" class="" @click="showDocsNavigation = !showDocsNavigation">
41+
<div x-show="!showDocsNavigation">
42+
<x-icons.menu class="w-6 h-6 text-teal-600 dark:text-red-300"/>
43+
</div>
44+
<div x-show="showDocsNavigation">
45+
<x-icons.close class="w-6 h-6 text-teal-600"/>
46+
</div>
47+
</button>
48+
</div>
2549
</div>
2650
</div>
51+
<div class="block lg:hidden">
52+
<x-alert/>
53+
</div>

‎resources/views/components/footer.blade.php

+37-11
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,39 @@
1-
<footer class="justify-end p-12 md:px-0 text-sm text-center md:text-xs space-y-4">
2-
<p>
3-
© {{ date('Y') }} NativePHP.
4-
</p>
5-
<p>
6-
NativePHP is a copyright of and maintained by <a href="https://twitter.com/marcelpociot">Marcel Pociot</a>
7-
and <a href="https://twitter.com/simonhamp">Simon Hamp</a>.
8-
</p>
9-
<p>
10-
Logo by <a href="https://twitter.com/caneco" target="_blank">Caneco</a>.
11-
</p>
1+
<footer class="justify-end p-12 md:px-0max-w-prose mx-auto">
2+
<div class="text-sm text-center md:text-xs space-y-4">
3+
4+
<p>
5+
© {{ date('Y') }} NativePHP.
6+
</p>
7+
<p>
8+
NativePHP is a copyright of and maintained by <a href="https://twitter.com/marcelpociot">Marcel Pociot</a>
9+
and <a href="https://twitter.com/simonhamp">Simon Hamp</a>.
10+
</p>
11+
<p>
12+
Logo by <a href="https://twitter.com/caneco" target="_blank">Caneco</a>.
13+
</p>
14+
</div>
15+
16+
17+
<div class="flex items-center justify-center space-x-6 mt-12">
18+
<a href="https://www.linkedin.com/company/nativephp/" title="NativePHP on LinkedIn">
19+
<x-icons.linkedin class="size-5 text-black dark:text-white hover:text-[#00aaa6]" />
20+
</a>
21+
22+
<a href="https://discord.gg/X62tWNStZK" title="Go to discord server">
23+
<x-icons.discord class="size-5 dark:fill-white hover:fill-[#00aaa6]" />
24+
</a>
25+
26+
<a href="https://pinkary.com/@nativephp" title="NativePHP on Pinkary">
27+
<x-icons.pinkary class="size-5 text-black dark:invert hover:text-[#00aaa6] hover:invert-0" />
28+
</a>
29+
30+
<a href="https://opencollective.com/nativephp" title="NativePHP on LinkedIn">
31+
<x-icons.opencollective class="size-5 text-black dark:invert hover:text-[#00aaa6] hover:invert-0" />
32+
</a>
33+
34+
<a href="https://github.com/nativephp" title="Source code of NativePHP">
35+
<x-icons.github class="size-5 dark:fill-white hover:fill-[#00aaa6]" />
36+
</a>
37+
</div>
1238

1339
</footer>

‎resources/views/components/icons/linkedin.blade.php

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
<svg {{ $attributes }} xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs" viewBox="0 0 16 16" width="16" height="16"><g transform="matrix(0.6666666666666666,0,0,0.6666666666666666,0,0)"><path d="M2.5,8.5h4C6.776,8.5,7,8.724,7,9v13c0,0.276-0.224,0.5-0.5,0.5h-4C2.224,22.5,2,22.276,2,22V9C2,8.724,2.224,8.5,2.5,8.5z M4.48,1.5c1.37,0,2.48,1.119,2.48,2.5S5.85,6.5,4.48,6.5S2,5.381,2,4S3.11,1.5,4.48,1.5z M18.5,22.5h3c0.276,0,0.5-0.224,0.5-0.5 v-8.4C22,9.83,19.87,8,16.89,8c-1.189-0.043-2.34,0.418-3.17,1.27c-0.148,0.171-0.407,0.19-0.578,0.042C13.051,9.233,13,9.12,13,9 c0-0.276-0.224-0.5-0.5-0.5h-3C9.224,8.5,9,8.724,9,9v13c0,0.276,0.224,0.5,0.5,0.5h3c0.276,0,0.5-0.224,0.5-0.5v-7.5 c0-1.381,1.119-2.5,2.5-2.5s2.5,1.119,2.5,2.5V22C18,22.276,18.224,22.5,18.5,22.5z" stroke="none" fill="currentColor" stroke-width="0" stroke-linecap="round" stroke-linejoin="round"></path></g></svg>

‎resources/views/components/icons/opencollective.blade.php

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
<svg {{ $attributes }} viewBox="0 0 256 256" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid">
2+
<g>
3+
<path d="M209.765144,128.149979 C209.765144,144.1633 204.864381,159.48989 196.498747,172.725072 L229.945675,206.171999 C246.682105,183.856759 255.729307,156.715152 255.729307,128.821102 C255.729307,99.5569917 245.974603,73.0710207 229.258944,51.4858128 L196.48314,84.214794 C205.122561,97.2224683 209.736907,112.48781 209.749537,128.103156 L209.765144,128.149979 Z" fill="currentColor"></path>
4+
<path d="M127.513484,210.354816 C82.1460872,210.268958 45.3875094,173.517358 45.2930393,128.149979 C45.3617502,82.7643138 82.1278487,45.984257 127.513484,45.8983186 C144.244752,45.8983186 159.571342,50.7990817 172.119792,59.1647154 L204.864381,26.3889116 C182.54365,9.66665129 155.403429,0.630863298 127.513484,0.636494403 C57.1235437,0.636494403 0,57.7600381 0,128.149979 C0,198.508704 57.1235437,255.663463 127.513484,255.663463 C155.537352,255.740876 182.775989,246.40851 204.864381,229.161884 L171.417454,195.730564 C159.555734,205.485268 144.260359,210.354816 127.513484,210.354816 L127.513484,210.354816 Z" fill="currentColor"></path>
5+
</g>
6+
</svg>

‎resources/views/components/icons/pinkary.blade.php

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<svg
2+
{{ $attributes }}
3+
viewBox="0 0 1024 1024" fill="none">
4+
<circle cx="512" cy="512" r="512" fill="currentColor"/>
5+
<path fill-rule="evenodd" clip-rule="evenodd" d="M375.022 782.938H385.585L388.504 772.787C398.2 739.062 408.734 701.557 420.107 660.277L420.117 660.242C430.551 621.984 441.163 583.726 451.952 545.468C459.439 545.219 468.939 544.603 480.341 543.653C496.01 542.347 513.484 539.967 532.73 536.546C552.862 533.044 572.949 527.799 592.987 520.829C613.395 513.731 632.329 504.389 649.748 492.785C668.139 480.818 683.061 465.944 694.293 448.16C706.045 429.552 711.61 407.7 711.61 383.228C711.61 360.057 705.43 339.287 692.671 321.539C680.899 304.178 665.246 290.011 646.011 278.988C627.549 267.755 607.365 259.479 585.534 254.119C563.876 248.384 542.511 245.479 521.468 245.479C501.989 245.479 482.531 247.471 463.109 251.444C444.074 255.338 426.237 260.117 409.618 265.802L409.563 265.821L409.509 265.84C393.722 271.387 379.742 276.759 367.603 281.962L359.101 285.605V294.855C359.101 302.344 362.725 308.746 366.475 313.567C370.135 318.273 374.328 322.466 379.035 326.127L379.314 326.344L379.603 326.546C382.092 328.289 384.664 329.879 387.238 331.08C389.608 332.186 393.095 333.5 397.115 333.5C401.138 333.5 405.052 332.434 408.337 331.251C411.797 330.005 415.532 328.268 419.459 326.189L419.737 326.042L420.008 325.883C426.54 322.04 435.277 317.652 446.368 312.723L446.563 312.636L446.756 312.544C449.831 311.063 453.133 309.652 456.668 308.316C445.353 334.018 434.841 358.926 425.133 383.039L425.104 383.112L425.075 383.185C412.412 415.687 400.171 448.189 388.351 480.694L388.333 480.742L388.316 480.791C376.911 512.894 365.511 546.462 354.116 581.491C342.751 616.005 330.546 653.252 317.501 693.23L317.464 693.343L317.429 693.456C315.782 698.808 313.922 704.595 311.847 710.82L311.712 711.227L311.601 711.642C309.662 718.912 308.603 726.031 308.603 732.931C308.603 749.453 317.664 762.126 331.69 770.758L331.79 770.819L331.891 770.879C345.313 778.833 359.763 782.938 375.022 782.938ZM615.889 423.985C605.825 438.893 592.099 451.594 574.375 462.004C556.626 472.253 536.548 480.43 514.052 486.456C498.109 490.726 482.19 493.892 466.291 495.961C477.084 459.602 488.321 424.611 500.001 390.987L500.016 390.944C512.485 354.67 525.4 323.063 538.731 296.052C553.277 297.171 567.056 300.298 580.123 305.398L580.176 305.418L580.229 305.438C595.921 311.416 608.16 319.997 617.399 331.012L617.483 331.112L617.569 331.211C626.251 341.179 631.163 354.709 631.163 373.128C631.163 392.812 626.014 409.517 616.024 423.788L615.955 423.886L615.889 423.985Z" fill="white"/>
6+
<path d="M560.932 743.369C560.932 766.565 542.128 785.369 518.932 785.369C495.736 785.369 476.932 766.565 476.932 743.369C476.932 720.173 495.736 701.369 518.932 701.369C542.128 701.369 560.932 720.173 560.932 743.369Z" fill="white"/>
7+
</svg>

‎resources/views/components/layout.blade.php

+4-2
Original file line numberDiff line numberDiff line change
@@ -23,8 +23,10 @@
2323
<script src="https://cdn.usefathom.com/script.js" data-site="HALHTNZU" defer></script>
2424
<!-- / Fathom -->
2525
</head>
26-
<body class="min-h-screen font-sans antialiased bg-white dark:bg-gray-900 dark:text-white">
27-
<x-alert />
26+
<body class="min-h-screen font-sans antialiased bg-white dark:bg-gray-900 dark:text-white"
27+
x-data="{ showDocsNavigation: false }"
28+
>
29+
2830
<x-banner />
2931
{{ $slot }}
3032
<script src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script>

0 commit comments

Comments
 (0)
0