Skip to content

Commit bd9ba1f

Browse files
arghyaxcodesarghyaxcodes
committed
format docs
1 parent 3ae5887 commit bd9ba1f

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

43 files changed

+673
-537
lines changed

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -76,6 +76,7 @@
7676
"eslint-plugin-flowtype": "8.0.3",
7777
"eslint-plugin-import": "2.25.3",
7878
"prettier": "^2.5.1",
79+
"prettier-plugin-tailwindcss": "^0.1.4",
7980
"typescript": "^4.5.5",
8081
"webpack": "^5.67.0"
8182
}

‎remark/prism-diff-highlight.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
// https://github.com/PrismJS/prism/blob/master/plugins/diff-highlight/prism-diff-highlight.js
22
module.exports = (Prism) => {
33
var LANGUAGE_REGEX = /diff-([\w-]+)/i
4-
var HTML_TAG = /<\/?(?!\d)[^\s>\/=$<%]+(?:\s(?:\s*[^\s>\/=]+(?:\s*=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+(?=[\s>]))|(?=[\s/>])))+)?\s*\/?>/gi
4+
var HTML_TAG =
5+
/<\/?(?!\d)[^\s>\/=$<%]+(?:\s(?:\s*[^\s>\/=]+(?:\s*=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+(?=[\s>]))|(?=[\s/>])))+)?\s*\/?>/gi
56
//this will match a line plus the line break while ignoring the line breaks HTML tags may contain.
67
var HTML_LINE = RegExp(
78
/(?:__|[^\r\n<])*(?:\r\n?|\n|(?:__|[^\r\n<])(?![^\r\n]))/.source.replace(/__/g, function () {

‎remark/utils.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,8 @@ const loadLanguages = require('prismjs/components/')
33
loadLanguages()
44
require('./prism-diff-highlight')(Prism)
55

6-
const HTML_TAG = /<\/?(?!\d)[^\s>\/=$<%]+(?:\s(?:\s*[^\s>\/=]+(?:\s*=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+(?=[\s>]))|(?=[\s/>])))+)?\s*\/?>/gi
6+
const HTML_TAG =
7+
/<\/?(?!\d)[^\s>\/=$<%]+(?:\s(?:\s*[^\s>\/=]+(?:\s*=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+(?=[\s>]))|(?=[\s/>])))+)?\s*\/?>/gi
78
const PSEUDO_CLASSES = [
89
'active',
910
'any-link',

‎remark/withSyntaxHighlighting.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,9 @@ module.exports.withSyntaxHighlighting = () => {
1717
if (node.lang !== null) {
1818
node.type = 'html'
1919
node.value = [
20-
`<div class="my-6 rounded-lg overflow-hidden ${colors[node.meta] || 'bg-gray-800 dark:bg-gray-700'}">`,
20+
`<div class="my-6 rounded-lg overflow-hidden ${
21+
colors[node.meta] || 'bg-gray-800 dark:bg-gray-700'
22+
}">`,
2123
`<pre class="language-${node.lang} ${
2224
colors[node.meta] ? 'bg-black bg-opacity-75' : ''
2325
}">`,

‎src/components/Button.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import Link from 'next/link'
33
export function Button({ children, ...props }) {
44
return (
55
<Link {...props}>
6-
<a className="inline-flex items-center bg-gray-800 hover:bg-gray-700 focus:outline-none focus:bg-gray-700 px-6 py-3 rounded-lg text-white font-medium shadow text-lg no-underline">
6+
<a className="focus:outline-none inline-flex items-center rounded-lg bg-gray-800 px-6 py-3 text-lg font-medium text-white no-underline shadow hover:bg-gray-700 focus:bg-gray-700">
77
{children}
88
<svg viewBox="0 0 24 24" className="ml-2 h-4 w-4 fill-current text-gray-300">
99
<path d="M18.59 13H3a1 1 0 0 1 0-2h15.59l-5.3-5.3a1 1 0 1 1 1.42-1.4l7 7a1 1 0 0 1 0 1.4l-7 7a1 1 0 0 1-1.42-1.4l5.3-5.3z" />

‎src/components/ClassTable.js‎

Lines changed: 14 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -126,40 +126,40 @@ export const ClassTable = memo(
126126
})
127127

128128
return (
129-
<div className="border-b border-gray-200 overflow-hidden relative">
129+
<div className="relative overflow-hidden border-b border-gray-200">
130130
<Heading level={2} id="class-reference" toc={true} className="relative">
131131
<span className="sr-only">Default class reference</span>
132132
</Heading>
133133
<div
134134
className={clsx(
135-
'overflow-y-auto scrollbar-w-2 scrollbar-track-gray-lighter scrollbar-thumb-rounded scrollbar-thumb-gray scrolling-touch',
135+
'scrollbar-w-2 scrollbar-track-gray-lighter scrollbar-thumb-rounded scrollbar-thumb-gray scrolling-touch overflow-y-auto',
136136
{ 'lg:max-h-sm': Object.keys(utilities).length > 12 }
137137
)}
138138
>
139139
{custom || (
140-
<table className="w-full text-left border-collapse">
140+
<table className="w-full border-collapse text-left">
141141
<thead>
142142
<tr>
143-
<th className="z-20 sticky top-0 text-sm font-semibold text-gray-600 bg-white p-0">
144-
<div className="pb-2 pr-2 border-b border-gray-200">Class</div>
143+
<th className="sticky top-0 z-20 bg-white p-0 text-sm font-semibold text-gray-600">
144+
<div className="border-b border-gray-200 pb-2 pr-2">Class</div>
145145
</th>
146146
<th
147147
className={clsx(
148-
'z-20 sticky top-0 text-sm font-semibold text-gray-600 bg-white p-0',
148+
'sticky top-0 z-20 bg-white p-0 text-sm font-semibold text-gray-600',
149149
{
150150
'hidden sm:table-cell': preview,
151151
}
152152
)}
153153
>
154154
<div
155-
className={clsx('pb-2 pl-2 border-b border-gray-200', { 'pr-2': preview })}
155+
className={clsx('border-b border-gray-200 pb-2 pl-2', { 'pr-2': preview })}
156156
>
157157
Properties
158158
</div>
159159
</th>
160160
{preview && (
161-
<th className="z-20 sticky top-0 text-sm font-semibold text-gray-600 bg-white p-0">
162-
<div className="pb-2 pl-2 border-b border-gray-200">
161+
<th className="sticky top-0 z-20 bg-white p-0 text-sm font-semibold text-gray-600">
162+
<div className="border-b border-gray-200 pb-2 pl-2">
163163
<span className="sr-only">Preview</span>&nbsp;
164164
</div>
165165
</th>
@@ -176,7 +176,7 @@ export const ClassTable = memo(
176176
<td
177177
translate="no"
178178
className={clsx(
179-
'py-2 pr-2 font-mono text-xs text-violet-600 whitespace-nowrap',
179+
'whitespace-nowrap py-2 pr-2 font-mono text-xs text-violet-600',
180180
{
181181
'border-t border-gray-200': i !== 0,
182182
}
@@ -186,13 +186,10 @@ export const ClassTable = memo(
186186
</td>
187187
<td
188188
translate="no"
189-
className={clsx(
190-
'py-2 pl-2 font-mono text-xs text-sky-600 whitespace-pre',
191-
{
192-
'border-t border-gray-200': i !== 0,
193-
'hidden sm:table-cell sm:pr-2': preview,
194-
}
195-
)}
189+
className={clsx('whitespace-pre py-2 pl-2 font-mono text-xs text-sky-600', {
190+
'border-t border-gray-200': i !== 0,
191+
'hidden sm:table-cell sm:pr-2': preview,
192+
})}
196193
>
197194
{stringifyProperties(transformProperties({ selector, properties }), {
198195
filter: filterProperties,

‎src/components/CodeSample.js‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -73,7 +73,7 @@ function Snippet({ color, snippet }) {
7373
>
7474
<pre
7575
className={clsx(
76-
'scrollbar-none overflow-x-auto p-6 text-sm leading-snug language-html text-white',
76+
'scrollbar-none language-html overflow-x-auto p-6 text-sm leading-snug text-white',
7777
{
7878
'bg-black bg-opacity-75': codeBackground[color],
7979
}
@@ -87,11 +87,11 @@ function Snippet({ color, snippet }) {
8787

8888
export function CodeSample({ preview, src, snippet, previewClassName, color = 'gray' }) {
8989
return (
90-
<div className="relative overflow-hidden mb-8">
90+
<div className="relative mb-8 overflow-hidden">
9191
{preview ? (
9292
<div
9393
className={clsx(
94-
'rounded-t-xl overflow-hidden',
94+
'overflow-hidden rounded-t-xl',
9595
previewBackground[color],
9696
previewClassName,
9797
{
@@ -158,15 +158,15 @@ export function ResizableCodeSample({
158158
</div>
159159
<div
160160
ref={constraintsRef}
161-
className="absolute inset-y-0 -right-4 left-80 ml-4 pointer-events-none"
161+
className="pointer-events-none absolute inset-y-0 -right-4 left-80 ml-4"
162162
>
163163
<motion.div
164164
drag="x"
165165
_dragX={x}
166166
dragMomentum={false}
167167
dragElastic={0}
168168
dragConstraints={constraintsRef}
169-
className={`pointer-events-auto absolute top-1/2 -mt-4 w-8 hidden md:flex items-center justify-center cursor-grab active:cursor-grabbing ${
169+
className={`pointer-events-auto absolute top-1/2 -mt-4 hidden w-8 cursor-grab items-center justify-center active:cursor-grabbing md:flex ${
170170
min ? 'right-0 md:left-0 md:right-auto' : 'right-0'
171171
}`}
172172
style={{ x }}
@@ -180,7 +180,7 @@ export function ResizableCodeSample({
180180
}}
181181
>
182182
<div
183-
className="flex-none rounded bg-white shadow flex items-center justify-center h-8"
183+
className="flex h-8 flex-none items-center justify-center rounded bg-white shadow"
184184
style={{ width: '0.9375rem' }}
185185
>
186186
<svg

‎src/components/CodeWindow.js‎

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -27,21 +27,21 @@ const { tokens: defaultTokens } = tokenize.html(`<div class="flex pa-2 bg-white
2727
export function CodeWindow({ children, lineNumbersBackground = true, className = '' }) {
2828
return (
2929
<div
30-
className={`relative overflow-hidden md:rounded-xl shadow-2xl flex ${styles.root} ${className}`}
30+
className={`relative flex overflow-hidden shadow-2xl md:rounded-xl ${styles.root} ${className}`}
3131
>
3232
<div className="absolute inset-0 bg-black bg-opacity-75" />
33-
<div className="relative w-full flex flex-col">
34-
<div className="flex-none h-11 flex items-center px-4">
33+
<div className="relative flex w-full flex-col">
34+
<div className="flex h-11 flex-none items-center px-4">
3535
<div className="flex space-x-1.5">
36-
<div className="w-3 h-3 border-2 rounded-full border-red-500" />
37-
<div className="w-3 h-3 border-2 rounded-full border-amber-400" />
38-
<div className="w-3 h-3 border-2 rounded-full border-green-400" />
36+
<div className="h-3 w-3 rounded-full border-2 border-red-500" />
37+
<div className="h-3 w-3 rounded-full border-2 border-amber-400" />
38+
<div className="h-3 w-3 rounded-full border-2 border-green-400" />
3939
</div>
4040
</div>
41-
<div className="relative border-t border-white border-opacity-10 min-h-0 flex-auto flex flex-col">
41+
<div className="relative flex min-h-0 flex-auto flex-col border-t border-white border-opacity-10">
4242
{lineNumbersBackground && (
4343
<div
44-
className="hidden md:block absolute inset-y-0 left-0 bg-black bg-opacity-25"
44+
className="absolute inset-y-0 left-0 hidden bg-black bg-opacity-25 md:block"
4545
style={{ width: 50 }}
4646
/>
4747
)}
@@ -71,17 +71,17 @@ CodeWindow.Code = forwardRef(({ tokens = defaultTokens, initialLineNumber = 1, .
7171
}, [tokens])
7272

7373
return (
74-
<div className="w-full flex-auto flex min-h-0 overflow-auto">
75-
<div ref={ref} className="w-full relative flex-auto">
74+
<div className="flex min-h-0 w-full flex-auto overflow-auto">
75+
<div ref={ref} className="relative w-full flex-auto">
7676
<pre className="flex min-h-full text-xs md:text-sm">
7777
<div
7878
aria-hidden="true"
79-
className="hidden md:block text-white text-opacity-50 flex-none py-4 pr-4 text-right select-none"
79+
className="hidden flex-none select-none py-4 pr-4 text-right text-white text-opacity-50 md:block"
8080
style={{ width: 50 }}
8181
>
8282
{lineNumbers}
8383
</div>
84-
<code className="flex-auto relative block text-white pt-4 pb-4 px-4 overflow-auto">
84+
<code className="relative block flex-auto overflow-auto px-4 pt-4 pb-4 text-white">
8585
<Code tokens={tokens} {...props} />
8686
</code>
8787
</pre>
@@ -103,15 +103,15 @@ CodeWindow.Code2 = forwardRef(
103103
return (
104104
<div
105105
ref={ref}
106-
className={clsx(className, 'w-full flex-auto flex min-h-0', {
106+
className={clsx(className, 'flex min-h-0 w-full flex-auto', {
107107
'overflow-auto': overflow === true || overflow === 'y',
108108
})}
109109
>
110-
<div className="w-full relative flex-auto">
110+
<div className="relative w-full flex-auto">
111111
<pre className="flex min-h-full text-xs md:text-sm">
112112
<div
113113
aria-hidden="true"
114-
className="hidden md:block text-white text-opacity-50 flex-none py-4 pr-4 text-right select-none"
114+
className="hidden flex-none select-none py-4 pr-4 text-right text-white text-opacity-50 md:block"
115115
style={{ width: 50 }}
116116
>
117117
{Array.from({ length: lines }).map((_, i) =>
@@ -126,7 +126,7 @@ CodeWindow.Code2 = forwardRef(
126126
)}
127127
</div>
128128
<code
129-
className={clsx('flex-auto relative block text-white pt-4 pb-4 px-4', {
129+
className={clsx('relative block flex-auto px-4 pt-4 pb-4 text-white', {
130130
'overflow-auto': overflow === true || overflow === 'x',
131131
})}
132132
>

‎src/components/Community.js‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
export function Community() {
22
return (
3-
<ul className="grid sm:grid-cols-2 gap-4 xl:gap-4">
4-
<li className="bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700 px-4 py-4 rounded-xl transition ease-in-out duration-200" >
3+
<ul className="grid gap-4 sm:grid-cols-2 xl:gap-4">
4+
<li className="rounded-xl bg-gray-100 px-4 py-4 transition duration-200 ease-in-out hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700">
55
<a
66
href="https://github.com/javaistic/javaistic/discussions"
77
className="flex items-start space-x-4"
88
>
9-
<svg fill="currentColor" className="flex-none text-gray-900 w-12 h-12">
9+
<svg fill="currentColor" className="h-12 w-12 flex-none text-gray-900">
1010
<rect width="48" height="48" rx="12" />
1111
<path
1212
d="M23.997 12a12 12 0 00-3.792 23.388c.6.12.816-.264.816-.576l-.012-2.04c-3.336.72-4.044-1.608-4.044-1.608-.552-1.392-1.332-1.764-1.332-1.764-1.08-.744.084-.72.084-.72 1.2.084 1.836 1.236 1.836 1.236 1.08 1.824 2.808 1.296 3.492.996.12-.78.42-1.308.756-1.608-2.664-.3-5.46-1.332-5.46-5.928 0-1.32.468-2.388 1.236-3.228a4.32 4.32 0 01.12-3.168s1.008-.324 3.3 1.224a11.496 11.496 0 016 0c2.292-1.56 3.3-1.224 3.3-1.224.66 1.644.24 2.88.12 3.168.768.84 1.236 1.92 1.236 3.228 0 4.608-2.808 5.616-5.484 5.916.432.372.816 1.104.816 2.22l-.012 3.3c0 .312.216.696.828.576A12 12 0 0023.997 12z"
@@ -20,9 +20,9 @@ export function Community() {
2020
</div>
2121
</a>
2222
</li>
23-
<li className="bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700 px-4 py-4 rounded-xl transition ease-in-out duration-200">
23+
<li className="rounded-xl bg-gray-100 px-4 py-4 transition duration-200 ease-in-out hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700">
2424
<a href="/discord" className="flex items-start space-x-4">
25-
<svg fill="currentColor" className="flex-none text-indigo-400 w-12 h-12">
25+
<svg fill="currentColor" className="h-12 w-12 flex-none text-indigo-400">
2626
<rect width="48" height="48" rx="12" />
2727
<path
2828
d="M21.637 23.57c-.745 0-1.332.653-1.332 1.45 0 .797.6 1.45 1.332 1.45.744 0 1.332-.653 1.332-1.45.013-.797-.588-1.45-1.332-1.45zm4.767 0c-.744 0-1.332.653-1.332 1.45 0 .797.6 1.45 1.332 1.45.745 0 1.332-.653 1.332-1.45 0-.797-.587-1.45-1.332-1.45z"
@@ -41,9 +41,9 @@ export function Community() {
4141
</div>
4242
</a>
4343
</li>
44-
<li className="bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700 px-4 py-4 rounded-xl transition ease-in-out duration-200">
44+
<li className="rounded-xl bg-gray-100 px-4 py-4 transition duration-200 ease-in-out hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700">
4545
<a href="https://twitter.com/javaistic" className="flex items-start space-x-4">
46-
<svg fill="currentColor" className="flex-none text-sky-400 w-12 h-12">
46+
<svg fill="currentColor" className="h-12 w-12 flex-none text-sky-400">
4747
<rect width="48" height="48" rx="12" />
4848
<path
4949
d="M37.127 15.989h-.001a11.04 11.04 0 01-3.093.836 5.336 5.336 0 002.37-2.932 10.815 10.815 0 01-3.421 1.284 5.42 5.42 0 00-3.933-1.679c-2.976 0-5.385 2.373-5.385 5.3-.003.406.044.812.138 1.207a15.351 15.351 0 01-11.102-5.54 5.235 5.235 0 00-.733 2.663c0 1.837.959 3.461 2.406 4.413a5.338 5.338 0 01-2.449-.662v.066c0 2.57 1.86 4.708 4.32 5.195a5.55 5.55 0 01-1.418.186c-.34 0-.68-.033-1.013-.099.684 2.106 2.676 3.637 5.034 3.68a10.918 10.918 0 01-6.69 2.269 11.21 11.21 0 01-1.285-.077 15.237 15.237 0 008.242 2.394c9.918 0 15.337-8.077 15.337-15.083 0-.23-.006-.459-.017-.683a10.864 10.864 0 002.686-2.746l.007.008z"

‎src/components/GradientLockup.js‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -23,36 +23,36 @@ export function GradientLockup({
2323
<div
2424
className={`col-start-2 col-end-3 lg:col-start-1 lg:col-end-5 ${
2525
left && right ? 'row-start-2 row-end-4' : 'row-start-2 row-end-5'
26-
} lg:row-end-5 lg:py-10 xl:py-16 flex ${
26+
} flex lg:row-end-5 lg:py-10 xl:py-16 ${
2727
pin === 'left' ? '-ml-8 pr-4 sm:ml-0 sm:pr-0' : '-mr-8 pl-4 sm:mr-0 sm:pl-0'
2828
}`}
2929
>
30-
<div className="bg-gray-100 w-full flex-none rounded-3xl" />
30+
<div className="w-full flex-none rounded-3xl bg-gray-100" />
3131
<motion.div
32-
className={`w-full flex-none -ml-full rounded-3xl transform shadow-lg bg-gradient-to-br ${gradients[color][0]} ${rotation[rotate]}`}
32+
className={`-ml-full w-full flex-none transform rounded-3xl bg-gradient-to-br shadow-lg ${gradients[color][0]} ${rotation[rotate]}`}
3333
{...gradientProps}
3434
/>
3535
</div>
3636
{header && (
37-
<div className="relative col-start-1 col-end-4 px-4 sm:px-6 md:px-8 lg:px-0 lg:col-start-2 lg:col-end-4 xl:col-end-3 row-start-1 row-end-2 xl:row-end-3 pb-8 lg:pb-11 xl:pb-0">
37+
<div className="relative col-start-1 col-end-4 row-start-1 row-end-2 px-4 pb-8 sm:px-6 md:px-8 lg:col-start-2 lg:col-end-4 lg:px-0 lg:pb-11 xl:col-end-3 xl:row-end-3 xl:pb-0">
3838
{header}
3939
</div>
4040
)}
4141
{left && right ? (
4242
<>
4343
<div
44-
className={`relative col-start-2 col-end-3 lg:col-end-3 row-start-2 row-end-3 lg:row-start-3 lg:row-end-4 self-center ${
44+
className={`relative col-start-2 col-end-3 row-start-2 row-end-3 self-center lg:col-end-3 lg:row-start-3 lg:row-end-4 ${
4545
pin === 'left' ? 'pr-8' : 'pl-8'
46-
} sm:px-6 md:px-8 pt-6 md:pt-8 lg:px-0 lg:pt-0`}
46+
} pt-6 sm:px-6 md:px-8 md:pt-8 lg:px-0 lg:pt-0`}
4747
>
4848
{left}
4949
</div>
50-
<div className="relative w-full lg:w-auto col-start-1 col-end-4 md:px-8 lg:px-0 lg:col-start-3 lg:col-end-4 row-start-3 row-end-4 lg:row-start-2 lg:row-end-5 self-center pb-8 lg:pb-0">
50+
<div className="relative col-start-1 col-end-4 row-start-3 row-end-4 w-full self-center pb-8 md:px-8 lg:col-start-3 lg:col-end-4 lg:row-start-2 lg:row-end-5 lg:w-auto lg:px-0 lg:pb-0">
5151
{right}
5252
</div>
5353
</>
5454
) : (
55-
<div className="relative w-full col-start-1 lg:col-start-2 col-end-4 row-start-2 row-end-5 py-8 md:px-8 lg:p-0">
55+
<div className="relative col-start-1 col-end-4 row-start-2 row-end-5 w-full py-8 md:px-8 lg:col-start-2 lg:p-0">
5656
{left || right}
5757
</div>
5858
)}

0 commit comments

Comments
 (0)