YunoHost/apps
1
0
Fork 0
mirror of https://github.com/YunoHost/apps.git synced 2024-09-03 20:06:07 +02:00
Code Projects Activity

appstore: replace tailwind huge JS play CDN with some actual minimal css build

Browse source
This commit is contained in:
Alexandre Aubin 2023-09-19 18:40:44 +02:00
parent 0a6e0b0165
commit 0fb538c6e7
5 changed files with 60 additions and 38 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
store/assets/fetch_assets
View file

@ -1,4 +1,7 @@
curl -L https://cdn.tailwindcss.com?plugins=forms > tailwindcss.js
# Download standalone tailwind to compile what we need
wget https://github.com/tailwindlabs/tailwindcss/releases/download/v3.3.3/tailwindcss-linux-x64
chmod +x tailwindcss-linux-x64
./tailwindcss-linux-x64 --input tailwind-local.css --output tailwind.css --minify
curl https://cdn.jsdelivr.net/npm/fork-awesome@1.2.0/css/fork-awesome.min.css > fork-awesome.min.css
sed -i 's@../fonts/@@g' ./fork-awesome.min.css

37
store/assets/tailwind-local.css Normal file
View file

@ -0,0 +1,37 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer utilities {
.btn {
@apply text-sm font-medium rounded-md px-4 py-2 transition;
}
.btn-sm {
@apply text-xs font-medium rounded-md px-2 py-2 transition;
}
.btn-success {
@apply text-white bg-green-500 hover:bg-green-700;
}
.btn-primary {
@apply text-white bg-blue-500 hover:bg-blue-700;
}
.btn-link {
@apply bg-gray-100 hover:bg-gray-200;
}
.btn-primary-outline {
@apply border text-blue-600 border-blue-500 hover:text-blue-400;
}
.from-markdown p {
@apply mb-2;
}
.from-markdown h3 {
@apply text-xl mb-1 font-semibold;
}
.from-markdown ul {
padding: revert;
list-style: disc;
}
.from-markdown a {
@apply text-blue-600;
}
}

17
store/assets/tailwind.config.js Normal file
View file

@ -0,0 +1,17 @@
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ['../templates/*.html'],
theme: {
extend: {},
},
plugins: [
require('@tailwindcss/forms'),
],
safelist: [
'safelisted',
{
pattern: /^(text-[a-z]+-600|border-[a-z]+-400)$/,
},
]
}

2
store/templates/app.html
View file

@ -19,7 +19,7 @@
<h1 class="flex-0 pl-2 pt-3 {% if infos["manifest"]["name"]|length > 12 %}text-2xl{% else %}text-3xl{% endif %} font-bold text-gray-900">{{ infos["manifest"]["name"] }}</h1>
{% if infos['category'] %}
<span class="ml-2 mb-1 rounded-full px-2.5 py-0.5 text-[10px] border text-{{ catalog['categories'][infos['category']]['color'] }}-500 border-{{ catalog['categories'][infos['category']]['color'] }}-400 ">
<span class="ml-2 mb-1 rounded-full px-2.5 py-0.5 text-[10px] border text-{{ catalog['categories'][infos['category']]['color'] }}-600 border-{{ catalog['categories'][infos['category']]['color'] }}-400 ">
{{ catalog['categories'][infos['category']]['title']|localize|lower }}
</span>
{% endif %}

37
store/templates/base.html
View file

@ -5,43 +5,8 @@
<title>{{ _("YunoHost app store") }} | {% block title %}{% endblock %} </title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="{{ url_for('static', filename='tailwindcss.js') }}"></script>
<link rel="stylesheet" href="{{ url_for('static', filename='fork-awesome.min.css') }}">
<style type="text/tailwindcss">
@layer utilities {
.btn {
@apply text-sm font-medium rounded-md px-4 py-2 transition;
}
.btn-sm {
@apply text-xs font-medium rounded-md px-2 py-2 transition;
}
.btn-success {
@apply text-white bg-green-500 hover:bg-green-700;
}
.btn-primary {
@apply text-white bg-blue-500 hover:bg-blue-700;
}
.btn-link {
@apply bg-gray-100 hover:bg-gray-200;
}
.btn-primary-outline {
@apply border text-blue-600 border-blue-500 hover:text-blue-400;
}
.from-markdown p {
@apply mb-2;
}
.from-markdown h3 {
@apply text-xl mb-1 font-semibold;
}
.from-markdown ul {
padding: revert;
list-style: disc;
}
.from-markdown a {
@apply text-blue-600;
}
}
</style>
<link rel="stylesheet" href="{{ url_for('static', filename='tailwind.css') }}">
</head>
<body>