Skip to content

Format code with prettier & prettier-plugin-tailwindcss #123

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Jan 30, 2022
Merged

Format code with prettier & prettier-plugin-tailwindcss #123

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
format docs
  • Loading branch information
@uiuxarghya
uiuxarghya committed Jan 30, 2022
commit bd9ba1fa6b3e78a4fc2f78bbb53a04d8ed12ca12
1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -76,6 +76,7 @@
"eslint-plugin-flowtype": "8.0.3",
"eslint-plugin-import": "2.25.3",
"prettier": "^2.5.1",
"prettier-plugin-tailwindcss": "^0.1.4",
"typescript": "^4.5.5",
"webpack": "^5.67.0"
}
Expand Down
3 changes: 2 additions & 1 deletion remark/prism-diff-highlight.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
// https://github.com/PrismJS/prism/blob/master/plugins/diff-highlight/prism-diff-highlight.js
module.exports = (Prism) => {
var LANGUAGE_REGEX = /diff-([\w-]+)/i
var HTML_TAG = /<\/?(?!\d)[^\s>\/=$<%]+(?:\s(?:\s*[^\s>\/=]+(?:\s*=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+(?=[\s>]))|(?=[\s/>])))+)?\s*\/?>/gi
var HTML_TAG =
/<\/?(?!\d)[^\s>\/=$<%]+(?:\s(?:\s*[^\s>\/=]+(?:\s*=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+(?=[\s>]))|(?=[\s/>])))+)?\s*\/?>/gi
//this will match a line plus the line break while ignoring the line breaks HTML tags may contain.
var HTML_LINE = RegExp(
/(?:__|[^\r\n<])*(?:\r\n?|\n|(?:__|[^\r\n<])(?![^\r\n]))/.source.replace(/__/g, function () {
Expand Down
3 changes: 2 additions & 1 deletion remark/utils.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,8 @@ const loadLanguages = require('prismjs/components/')
loadLanguages()
require('./prism-diff-highlight')(Prism)

const HTML_TAG = /<\/?(?!\d)[^\s>\/=$<%]+(?:\s(?:\s*[^\s>\/=]+(?:\s*=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+(?=[\s>]))|(?=[\s/>])))+)?\s*\/?>/gi
const HTML_TAG =
/<\/?(?!\d)[^\s>\/=$<%]+(?:\s(?:\s*[^\s>\/=]+(?:\s*=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+(?=[\s>]))|(?=[\s/>])))+)?\s*\/?>/gi
const PSEUDO_CLASSES = [
'active',
'any-link',
Expand Down
4 changes: 3 additions & 1 deletion remark/withSyntaxHighlighting.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,9 @@ module.exports.withSyntaxHighlighting = () => {
if (node.lang !== null) {
node.type = 'html'
node.value = [
`<div class="my-6 rounded-lg overflow-hidden ${colors[node.meta] || 'bg-gray-800 dark:bg-gray-700'}">`,
`<div class="my-6 rounded-lg overflow-hidden ${
colors[node.meta] || 'bg-gray-800 dark:bg-gray-700'
}">`,
`<pre class="language-${node.lang} ${
colors[node.meta] ? 'bg-black bg-opacity-75' : ''
}">`,
Expand Down
2 changes: 1 addition & 1 deletion src/components/Button.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import Link from 'next/link'
export function Button({ children, ...props }) {
return (
<Link {...props}>
<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">
<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">
{children}
<svg viewBox="0 0 24 24" className="ml-2 h-4 w-4 fill-current text-gray-300">
<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" />
Expand Down
31 changes: 14 additions & 17 deletions src/components/ClassTable.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -126,40 +126,40 @@ export const ClassTable = memo(
})

return (
<div className="border-b border-gray-200 overflow-hidden relative">
<div className="relative overflow-hidden border-b border-gray-200">
<Heading level={2} id="class-reference" toc={true} className="relative">
<span className="sr-only">Default class reference</span>
</Heading>
<div
className={clsx(
'overflow-y-auto scrollbar-w-2 scrollbar-track-gray-lighter scrollbar-thumb-rounded scrollbar-thumb-gray scrolling-touch',
'scrollbar-w-2 scrollbar-track-gray-lighter scrollbar-thumb-rounded scrollbar-thumb-gray scrolling-touch overflow-y-auto',
{ 'lg:max-h-sm': Object.keys(utilities).length > 12 }
)}
>
{custom || (
<table className="w-full text-left border-collapse">
<table className="w-full border-collapse text-left">
<thead>
<tr>
<th className="z-20 sticky top-0 text-sm font-semibold text-gray-600 bg-white p-0">
<div className="pb-2 pr-2 border-b border-gray-200">Class</div>
<th className="sticky top-0 z-20 bg-white p-0 text-sm font-semibold text-gray-600">
<div className="border-b border-gray-200 pb-2 pr-2">Class</div>
</th>
<th
className={clsx(
'z-20 sticky top-0 text-sm font-semibold text-gray-600 bg-white p-0',
'sticky top-0 z-20 bg-white p-0 text-sm font-semibold text-gray-600',
{
'hidden sm:table-cell': preview,
}
)}
>
<div
className={clsx('pb-2 pl-2 border-b border-gray-200', { 'pr-2': preview })}
className={clsx('border-b border-gray-200 pb-2 pl-2', { 'pr-2': preview })}
>
Properties
</div>
</th>
{preview && (
<th className="z-20 sticky top-0 text-sm font-semibold text-gray-600 bg-white p-0">
<div className="pb-2 pl-2 border-b border-gray-200">
<th className="sticky top-0 z-20 bg-white p-0 text-sm font-semibold text-gray-600">
<div className="border-b border-gray-200 pb-2 pl-2">
<span className="sr-only">Preview</span>&nbsp;
</div>
</th>
Expand All @@ -176,7 +176,7 @@ export const ClassTable = memo(
<td
translate="no"
className={clsx(
'py-2 pr-2 font-mono text-xs text-violet-600 whitespace-nowrap',
'whitespace-nowrap py-2 pr-2 font-mono text-xs text-violet-600',
{
'border-t border-gray-200': i !== 0,
}
Expand All @@ -186,13 +186,10 @@ export const ClassTable = memo(
</td>
<td
translate="no"
className={clsx(
'py-2 pl-2 font-mono text-xs text-sky-600 whitespace-pre',
{
'border-t border-gray-200': i !== 0,
'hidden sm:table-cell sm:pr-2': preview,
}
)}
className={clsx('whitespace-pre py-2 pl-2 font-mono text-xs text-sky-600', {
'border-t border-gray-200': i !== 0,
'hidden sm:table-cell sm:pr-2': preview,
})}
>
{stringifyProperties(transformProperties({ selector, properties }), {
filter: filterProperties,
Expand Down
12 changes: 6 additions & 6 deletions src/components/CodeSample.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,7 +73,7 @@ function Snippet({ color, snippet }) {
>
<pre
className={clsx(
'scrollbar-none overflow-x-auto p-6 text-sm leading-snug language-html text-white',
'scrollbar-none language-html overflow-x-auto p-6 text-sm leading-snug text-white',
{
'bg-black bg-opacity-75': codeBackground[color],
}
Expand All @@ -87,11 +87,11 @@ function Snippet({ color, snippet }) {

export function CodeSample({ preview, src, snippet, previewClassName, color = 'gray' }) {
return (
<div className="relative overflow-hidden mb-8">
<div className="relative mb-8 overflow-hidden">
{preview ? (
<div
className={clsx(
'rounded-t-xl overflow-hidden',
'overflow-hidden rounded-t-xl',
previewBackground[color],
previewClassName,
{
Expand Down Expand Up @@ -158,15 +158,15 @@ export function ResizableCodeSample({
</div>
<div
ref={constraintsRef}
className="absolute inset-y-0 -right-4 left-80 ml-4 pointer-events-none"
className="pointer-events-none absolute inset-y-0 -right-4 left-80 ml-4"
>
<motion.div
drag="x"
_dragX={x}
dragMomentum={false}
dragElastic={0}
dragConstraints={constraintsRef}
className={`pointer-events-auto absolute top-1/2 -mt-4 w-8 hidden md:flex items-center justify-center cursor-grab active:cursor-grabbing ${
className={`pointer-events-auto absolute top-1/2 -mt-4 hidden w-8 cursor-grab items-center justify-center active:cursor-grabbing md:flex ${
min ? 'right-0 md:left-0 md:right-auto' : 'right-0'
}`}
style={{ x }}
Expand All @@ -180,7 +180,7 @@ export function ResizableCodeSample({
}}
>
<div
className="flex-none rounded bg-white shadow flex items-center justify-center h-8"
className="flex h-8 flex-none items-center justify-center rounded bg-white shadow"
style={{ width: '0.9375rem' }}
>
<svg
Expand Down
32 changes: 16 additions & 16 deletions src/components/CodeWindow.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,21 +27,21 @@ const { tokens: defaultTokens } = tokenize.html(`<div class="flex pa-2 bg-white
export function CodeWindow({ children, lineNumbersBackground = true, className = '' }) {
return (
<div
className={`relative overflow-hidden md:rounded-xl shadow-2xl flex ${styles.root} ${className}`}
className={`relative flex overflow-hidden shadow-2xl md:rounded-xl ${styles.root} ${className}`}
>
<div className="absolute inset-0 bg-black bg-opacity-75" />
<div className="relative w-full flex flex-col">
<div className="flex-none h-11 flex items-center px-4">
<div className="relative flex w-full flex-col">
<div className="flex h-11 flex-none items-center px-4">
<div className="flex space-x-1.5">
<div className="w-3 h-3 border-2 rounded-full border-red-500" />
<div className="w-3 h-3 border-2 rounded-full border-amber-400" />
<div className="w-3 h-3 border-2 rounded-full border-green-400" />
<div className="h-3 w-3 rounded-full border-2 border-red-500" />
<div className="h-3 w-3 rounded-full border-2 border-amber-400" />
<div className="h-3 w-3 rounded-full border-2 border-green-400" />
</div>
</div>
<div className="relative border-t border-white border-opacity-10 min-h-0 flex-auto flex flex-col">
<div className="relative flex min-h-0 flex-auto flex-col border-t border-white border-opacity-10">
{lineNumbersBackground && (
<div
className="hidden md:block absolute inset-y-0 left-0 bg-black bg-opacity-25"
className="absolute inset-y-0 left-0 hidden bg-black bg-opacity-25 md:block"
style={{ width: 50 }}
/>
)}
Expand Down Expand Up @@ -71,17 +71,17 @@ CodeWindow.Code = forwardRef(({ tokens = defaultTokens, initialLineNumber = 1, .
}, [tokens])

return (
<div className="w-full flex-auto flex min-h-0 overflow-auto">
<div ref={ref} className="w-full relative flex-auto">
<div className="flex min-h-0 w-full flex-auto overflow-auto">
<div ref={ref} className="relative w-full flex-auto">
<pre className="flex min-h-full text-xs md:text-sm">
<div
aria-hidden="true"
className="hidden md:block text-white text-opacity-50 flex-none py-4 pr-4 text-right select-none"
className="hidden flex-none select-none py-4 pr-4 text-right text-white text-opacity-50 md:block"
style={{ width: 50 }}
>
{lineNumbers}
</div>
<code className="flex-auto relative block text-white pt-4 pb-4 px-4 overflow-auto">
<code className="relative block flex-auto overflow-auto px-4 pt-4 pb-4 text-white">
<Code tokens={tokens} {...props} />
</code>
</pre>
Expand All @@ -103,15 +103,15 @@ CodeWindow.Code2 = forwardRef(
return (
<div
ref={ref}
className={clsx(className, 'w-full flex-auto flex min-h-0', {
className={clsx(className, 'flex min-h-0 w-full flex-auto', {
'overflow-auto': overflow === true || overflow === 'y',
})}
>
<div className="w-full relative flex-auto">
<div className="relative w-full flex-auto">
<pre className="flex min-h-full text-xs md:text-sm">
<div
aria-hidden="true"
className="hidden md:block text-white text-opacity-50 flex-none py-4 pr-4 text-right select-none"
className="hidden flex-none select-none py-4 pr-4 text-right text-white text-opacity-50 md:block"
style={{ width: 50 }}
>
{Array.from({ length: lines }).map((_, i) =>
Expand All @@ -126,7 +126,7 @@ CodeWindow.Code2 = forwardRef(
)}
</div>
<code
className={clsx('flex-auto relative block text-white pt-4 pb-4 px-4', {
className={clsx('relative block flex-auto px-4 pt-4 pb-4 text-white', {
'overflow-auto': overflow === true || overflow === 'x',
})}
>
Expand Down
14 changes: 7 additions & 7 deletions src/components/Community.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
export function Community() {
return (
<ul className="grid sm:grid-cols-2 gap-4 xl:gap-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" >
<ul className="grid gap-4 sm:grid-cols-2 xl:gap-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">
<a
href="https://github.com/javaistic/javaistic/discussions"
className="flex items-start space-x-4"
>
<svg fill="currentColor" className="flex-none text-gray-900 w-12 h-12">
<svg fill="currentColor" className="h-12 w-12 flex-none text-gray-900">
<rect width="48" height="48" rx="12" />
<path
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"
Expand All @@ -20,9 +20,9 @@ export function Community() {
</div>
</a>
</li>
<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">
<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">
<a href="/discord" className="flex items-start space-x-4">
<svg fill="currentColor" className="flex-none text-indigo-400 w-12 h-12">
<svg fill="currentColor" className="h-12 w-12 flex-none text-indigo-400">
<rect width="48" height="48" rx="12" />
<path
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"
Expand All @@ -41,9 +41,9 @@ export function Community() {
</div>
</a>
</li>
<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">
<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">
<a href="https://twitter.com/javaistic" className="flex items-start space-x-4">
<svg fill="currentColor" className="flex-none text-sky-400 w-12 h-12">
<svg fill="currentColor" className="h-12 w-12 flex-none text-sky-400">
<rect width="48" height="48" rx="12" />
<path
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"
Expand Down
16 changes: 8 additions & 8 deletions src/components/GradientLockup.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,36 +23,36 @@ export function GradientLockup({
<div
className={`col-start-2 col-end-3 lg:col-start-1 lg:col-end-5 ${
left && right ? 'row-start-2 row-end-4' : 'row-start-2 row-end-5'
} lg:row-end-5 lg:py-10 xl:py-16 flex ${
} flex lg:row-end-5 lg:py-10 xl:py-16 ${
pin === 'left' ? '-ml-8 pr-4 sm:ml-0 sm:pr-0' : '-mr-8 pl-4 sm:mr-0 sm:pl-0'
}`}
>
<div className="bg-gray-100 w-full flex-none rounded-3xl" />
<div className="w-full flex-none rounded-3xl bg-gray-100" />
<motion.div
className={`w-full flex-none -ml-full rounded-3xl transform shadow-lg bg-gradient-to-br ${gradients[color][0]} ${rotation[rotate]}`}
className={`-ml-full w-full flex-none transform rounded-3xl bg-gradient-to-br shadow-lg ${gradients[color][0]} ${rotation[rotate]}`}
{...gradientProps}
/>
</div>
{header && (
<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">
<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">
{header}
</div>
)}
{left && right ? (
<>
<div
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 ${
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 ${
pin === 'left' ? 'pr-8' : 'pl-8'
} sm:px-6 md:px-8 pt-6 md:pt-8 lg:px-0 lg:pt-0`}
} pt-6 sm:px-6 md:px-8 md:pt-8 lg:px-0 lg:pt-0`}
>
{left}
</div>
<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">
<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">
{right}
</div>
</>
) : (
<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">
<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">
{left || right}
</div>
)}
Expand Down
Loading
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy