Skip to content
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

Jump to bottom

Add TailwindCSS plugin for Prettier #458

Merged
merged 2 commits into from
Aug 12, 2023
Merged

Add TailwindCSS plugin for Prettier #458

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
5870f99
style: add tailwindcss prettier plugin
MindTooth Aug 12, 2023
512450b
style: apply prettier changes
MindTooth Aug 12, 2023
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
4 changes: 0 additions & 4 deletions .prettierrc.js
View file
Open in desktop

This file was deleted.

6 changes: 5 additions & 1 deletion .eslintrc.js → eslint.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
module.exports = {
// ESLint Config

const config = {
env: {
browser: true,
node: true,
Expand All @@ -14,3 +16,5 @@ module.exports = {
"no-unused-vars": "warn",
},
};

export default config;
2 changes: 2 additions & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@
},
"license": "MIT",
"author": "Srcery Team",
"type": "module",
"scripts": {
"build": "vite build --emptyOutDir",
"clean": "rm -f src/github.json",
Expand All @@ -34,6 +35,7 @@
"postcss": "^8.4.27",
"prettier": "^3.0.1",
"prettier-plugin-packagejson": "^2.4.5",
"prettier-plugin-tailwindcss": "^0.5.2",
"tailwindcss": "^3.3.3",
"vite": "^4.3.4",
"vite-plugin-handlebars": "^1.6.0"
Expand Down
58 changes: 58 additions & 0 deletions pnpm-lock.yaml
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

6 changes: 5 additions & 1 deletion postcss.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,11 @@
// PostCSS Config
module.exports = {

/** @type {import('postcss-load-config').Config} */
const config = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
};

export default config;
8 changes: 8 additions & 0 deletions prettier.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
// Prettier Config

/** @type {import("prettier").Config} */
const config = {
plugins: ["prettier-plugin-packagejson", "prettier-plugin-tailwindcss"],
};

export default config;
30 changes: 15 additions & 15 deletions src/community/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,21 +11,21 @@
<title>Srcery Theme - Community activities and communications</title>
</head>
<body
class="font-iosevka bg-black text-bright_white flex justify-center p-4 w-100"
class="w-100 flex justify-center bg-black p-4 font-iosevka text-bright_white"
>
{{> octocat }}
<main
x-data="state"
class="flex items-center flex-col grow sm:grow-0 width-[448px] sm:w-[780px] min-w-0"
class="width-[448px] flex min-w-0 grow flex-col items-center sm:w-[780px] sm:grow-0"
>
{{> header community=true }}
<section class="w-full">
<div class="mb-8">
<h2 class="text-xl mb-3 text-center sm:text-left uppercase">
<h2 class="mb-3 text-center text-xl uppercase sm:text-left">
<!-- <div class="svg w-8 mr-2" x-html="icon"></div> -->
Discord
</h2>
<p class="text-justify mb-3">
<p class="mb-3 text-justify">
We run a Discord server for those interested. You're welcome to join
us there if you have any burning questions or just wanna say hi.
</p>
Expand All @@ -41,10 +41,10 @@ <h2 class="text-xl mb-3 text-center sm:text-left uppercase">
</div>

<div class="mb-8">
<h2 class="text-xl mb-3 text-center sm:text-left uppercase">
<h2 class="mb-3 text-center text-xl uppercase sm:text-left">
Merchandise
</h2>
<p class="text-justify mb-3">
<p class="mb-3 text-justify">
Get our brand new merchandise featuring the Srcery color scheme!
We're not making any profit from the sales, so you are instead
showing your support by wearing and using the merch. Thank you for
Expand All @@ -57,7 +57,7 @@ <h2 class="text-xl mb-3 text-center sm:text-left uppercase">
</div>
</div>
<div class="mb-8">
<h2 class="text-xl mb-3 text-center sm:text-left uppercase">
<h2 class="mb-3 text-center text-xl uppercase sm:text-left">
Community
</h2>
<p class="text-justify">
Expand All @@ -67,45 +67,45 @@ <h2 class="text-xl mb-3 text-center sm:text-left uppercase">
</p>
</div>
<div class="mb-8">
<h2 class="text-xl mb-4 text-center sm:text-left uppercase">
<h2 class="mb-4 text-center text-xl uppercase sm:text-left">
Core team
</h2>
<div
class="grid grid-cols-2 justify-items-center sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-5"
class="grid grid-cols-2 justify-items-center gap-5 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5"
>
<template x-for="user in github.members">
<a
:href="user.html_url"
target="_blank"
class="flex flex-col items-center border-2 border-bright_black hover:border-bright_white hover:cursor-pointer p-4"
class="flex flex-col items-center border-2 border-bright_black p-4 hover:cursor-pointer hover:border-bright_white"
>
<img
:src="user.avatar_url"
alt="github user avatar"
class="p-1 border-4 border-bright_black w-1/2 rounded-full mb-2"
class="mb-2 w-1/2 rounded-full border-4 border-bright_black p-1"
/>
<div x-text="user.login"></div>
</a>
</template>
</div>
</div>
<div class="mb-8">
<h2 class="text-xl mb-4 text-center sm:text-left uppercase">
<h2 class="mb-4 text-center text-xl uppercase sm:text-left">
Contributors
</h2>
<div
class="grid grid-cols-2 justify-items-center sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-5"
class="grid grid-cols-2 justify-items-center gap-5 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5"
>
<template x-for="user in github.contributors">
<a
:href="user.html_url"
target="_blank"
class="flex break-all flex-col items-center border-2 border-bright_black hover:border-bright_white hover:cursor-pointer p-4"
class="flex flex-col items-center break-all border-2 border-bright_black p-4 hover:cursor-pointer hover:border-bright_white"
>
<img
:src="user.avatar_url"
alt="github user avatar"
class="p-1 w-1/2 border-4 border-bright_black rounded-full mb-2"
class="mb-2 w-1/2 rounded-full border-4 border-bright_black p-1"
/>
<div class="break-word" x-text="user.login"></div>
</a>
Expand Down
12 changes: 6 additions & 6 deletions src/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,16 +12,16 @@
</title>
</head>
<body
class="font-iosevka bg-black text-bright_white flex justify-center p-4 w-100"
class="w-100 flex justify-center bg-black p-4 font-iosevka text-bright_white"
>
{{> octocat }}
<main
x-data="state"
class="flex items-center flex-col grow sm:grow-0 width-[448px] sm:w-[780px] min-w-0"
class="width-[448px] flex min-w-0 grow flex-col items-center sm:w-[780px] sm:grow-0"
>
{{> header }}
<section class="w-full">
<div class="text-justify mb-8">
<div class="mb-8 text-justify">
<p class="mb-4">
Srcery is dark syntax highlighting color scheme with clearly defined
contrasting colors and a slightly earthy tone.
Expand All @@ -35,7 +35,7 @@
</p>
</div>
<div class="w-full">
<h2 class="uppercase mb-4">Preview</h2>
<h2 class="mb-4 uppercase">Preview</h2>
<p class="mb-8">
Here's a few
<a class="link" href="https://rosettacode.org/wiki/Rosetta_Code"
Expand All @@ -48,7 +48,7 @@ <h2 class="uppercase mb-4">Preview</h2>
for details about a specific editor/IDE.
</p>
<ul
class="flex overflow-x-auto overflow-y-hidden text-center border-bright_black"
class="flex overflow-x-auto overflow-y-hidden border-bright_black text-center"
>
<template x-for="(value, key) in languages">
<li class="flex flex-1">
Expand All @@ -70,7 +70,7 @@ <h2 class="uppercase mb-4">Preview</h2>
</template>
</ul>
<div
class="border-b-2 border-x-2 border-bright_black overflow-x-auto"
class="overflow-x-auto border-x-2 border-b-2 border-bright_black"
>
<pre id="preview" class="flex p-4">
<code class="font-iosevka" x-html="languages[activeTab].html">
Expand Down
22 changes: 11 additions & 11 deletions src/partials/header.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,42 +1,42 @@
<header class="min-w-auto sm:min-w-[640px] sm:max-w-[640px] mb-8">
<header class="min-w-auto mb-8 sm:min-w-[640px] sm:max-w-[640px]">
<a
href="/"
class="min-h-auto pt-2 sm:pt-0 sm:min-h-[546px] flex flex-col items-center mb-2"
class="min-h-auto mb-2 flex flex-col items-center pt-2 sm:min-h-[546px] sm:pt-0"
>
<div
class="flex sm:hidden p-5 rounded-full border-2 border-bright_black justify-center items-center"
class="flex items-center justify-center rounded-full border-2 border-bright_black p-5 sm:hidden"
>
<img
alt="Srcery glyph"
src="/svg/glyph.svg"
class="glyph w-logo h-logo"
class="glyph h-logo w-logo"
/>
</div>
<div
class="bg-triangle bg-no-repeat min-h-[546px] pt-[30%] hidden sm:flex min-w-full bg-center align-center justify-center"
class="align-center hidden min-h-[546px] min-w-full justify-center bg-triangle bg-center bg-no-repeat pt-[30%] sm:flex"
>
<img
alt="Srcery glyph"
src="/svg/glyph.svg"
class="glyph w-logo h-logo"
class="glyph h-logo w-logo"
/>
</div>
<div class="mt-4 sm:mt-[-18%] flex items-center">
<div class="flex mr-2">
<div class="mt-4 flex items-center sm:mt-[-18%]">
<div class="mr-2 flex">
<div class="dot bg-xgray2"></div>
<div class="dot bg-xgray7"></div>
<div class="dot bg-xgray10"></div>
</div>
<h1 class="uppercase text-6xl">Srcery</h1>
<div class="flex ml-2">
<h1 class="text-6xl uppercase">Srcery</h1>
<div class="ml-2 flex">
<div class="dot bg-xgray10"></div>
<div class="dot bg-xgray7"></div>
<div class="dot bg-xgray2"></div>
</div>
</div>
</a>
<nav
class="flex justify-center max-w-[384px] sm:max-w-full flex grow justify-between"
class="flex flex max-w-[384px] grow justify-center justify-between sm:max-w-full"
>
<span class="w-full text-left">
<a href="/themes/" class="link uppercase {{#if themes}}sel{{/if}}"
Expand Down
2 changes: 1 addition & 1 deletion src/partials/octocat.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
aria-label="View source on Github"
>
<svg
class="text-bright_white fill-hard_black"
class="fill-hard_black text-bright_white"
viewBox="0 0 250 250"
aria-hidden="true"
>
Expand Down
Loading
Loading