lukegb/depot
1
0
Fork 0
Code Issues1 Pull requests Projects Packages Activity Actions

web/quotes: update for django-tailwind 2.0.1

Browse source
This commit is contained in:
Luke Granger-Brown 2021-04-29 12:16:35 +00:00
parent e08a6a9169
commit 8837939f5e
11 changed files with 2720 additions and 1255 deletions

2
web/quotes/default.nix
View file

@ -30,7 +30,7 @@ pkgs.stdenvNoCC.mkDerivation rec {
name = "quotes-node_modules";
src = builtins.filterSource filterSourcePred ./theme/static_src;
outputHash = "sha256:15q41in79p753y85qwbbd6v6fyays9q28cpqp0dc3pnvma096whq";
outputHash = "sha256:1bm4vb19ikxsdllj80sqnj9s9d2cpp7f5b37gdwfh8i6kk5m0n1x";
outputHashMode = "recursive";
buildInputs = with pkgs; [ nodejs ];

2
web/quotes/templates/base.html
View file

@ -8,7 +8,7 @@
<title>{% block fulltitle %}{% block title %}{% endblock title %} | BFOB Quotes{% endblock %}</title>
<link rel="stylesheet" href="{% static 'webfonts/fonts.css' %}" type="text/css">
<link rel="stylesheet" href="{% static 'css/styles.css' %}">
{% tailwind_css %}
</head>
<body class="bg-bfobGray-dark text-bfobGray font-sans leading-normal tracking-normal">

1
web/quotes/theme/static_src/.gitignore vendored Normal file
View file

@ -0,0 +1 @@
node_modules

27
web/quotes/theme/static_src/bs.config.js Normal file
View file

@ -0,0 +1,27 @@
/*
|--------------------------------------------------------------------------
| Browser-sync config file
|--------------------------------------------------------------------------
|
| For up-to-date information about the options:
| http://www.browsersync.io/docs/options/
|
| There are more options than you see here, these are just the ones that are
| set internally. See the website for more info.
|
|
*/
const tailwindConfig = require('./tailwind.config.js');
module.exports = {
port: 8383,
ui: false,
logSnippet: false,
open: false,
reloadOnRestart: true,
files: [
'../static/css/dist/styles.css',
...tailwindConfig.purge
]
};

3814
web/quotes/theme/static_src/package-lock.json generated
View file

File diff suppressed because it is too large Load diff

43
web/quotes/theme/static_src/package.json
View file

@ -1,29 +1,38 @@
{
"name": "django_tailwind",
"name": "quotes.theme",
"version": "2.0.1",
"description": "",
"scripts": {
"start": "npm run dev",
"build": "npm run build:clean && npm run build:sass && npm run build:postcss && npm run build:cleancss",
"build:clean": "rimraf ../static/css",
"build:sass": "node-sass --output-style compressed src/styles.scss ../static/css/styles.css",
"build:postcss": "NODE_ENV=production postcss --config . --map false --output ../static/css/styles.css ../static/css/styles.css",
"build:cleancss": "cleancss -o ../static/css/styles.css ../static/css/styles.css",
"dev": "watch \"npm run dev:sass && npm run dev:postcss\" ./src",
"dev:sass": "node-sass --output-style expanded --source-map true src/styles.scss ../static/css/styles.css",
"dev:postcss": "postcss --config . --map true --output ../static/css/styles.css ../static/css/styles.css"
"build": "npm run build:clean && npm run build:postcss && npm run build:cleancss",
"build:clean": "rimraf ../static/css/dist",
"build:postcss": "cross-env NODE_ENV=production postcss --config . --map false --output ../static/css/dist/styles.css ./src/styles.css",
"build:cleancss": "cleancss -o ../static/css/dist/styles.css ../static/css/dist/styles.css",
"sync": "browser-sync start --config bs.config.js",
"dev:postcss": "cross-env NODE_ENV=development postcss --config . --map true --output ../static/css/dist/styles.css -w ./src/styles.css",
"dev:sync": "run-p dev:postcss sync",
"dev": "nodemon -x \"npm run dev:sync\" -w tailwind.config.js -w postcss.config.js -w bs.config.js -e js"
},
"keywords": [],
"author": "",
"license": "MIT",
"devDependencies": {
"autoprefixer": "^10.0.2",
"clean-css-cli": "^4.3.0",
"node-sass": "^5.0.0",
"postcss": "^8.1.9",
"postcss-cli": "^8.3.0",
"postcss-scss": "^3.0.4",
"@tailwindcss/aspect-ratio": "^0.2.0",
"@tailwindcss/forms": "^0.3.2",
"@tailwindcss/line-clamp": "^0.2.0",
"@tailwindcss/typography": "^0.4.0",
"autoprefixer": "^10.2.5",
"browser-sync": "^2.26.14",
"clean-css-cli": "^5.2.2",
"cross-env": "^7.0.3",
"nodemon": "^2.0.7",
"npm-run-all": "^4.1.5",
"postcss": "^8.2.9",
"postcss-cli": "^8.3.1",
"postcss-import": "^14.0.1",
"postcss-nested": "^5.0.5",
"postcss-simple-vars": "^6.0.3",
"rimraf": "^3.0.2",
"tailwindcss": "^2.0.1",
"watch": "^1.0.2"
"tailwindcss": "^2.1.1"
}
}

3
web/quotes/theme/static_src/postcss.config.js
View file

@ -1,5 +1,8 @@
module.exports = {
plugins: {
"postcss-import": {},
"postcss-simple-vars": {},
"postcss-nested": {},
tailwindcss: {},
autoprefixer: {},
},

0
web/quotes/theme/static_src/src/styles.scss → web/quotes/theme/static_src/src/src/styles.scss
View file

3
web/quotes/theme/static_src/src/styles.css Normal file
View file

@ -0,0 +1,3 @@
@tailwind base;
@tailwind components;
@tailwind utilities;

61
web/quotes/theme/static_src/tailwind.config.js
View file

@ -1,10 +1,53 @@
// This is a minimal config.
// If you need the full config, get it from here:
// https://unpkg.com/browse/tailwindcss@latest/stubs/defaultConfig.stub.js
/**
* This is a minimal config.
*
* If you need the full config, get it from here:
* https://unpkg.com/browse/tailwindcss@latest/stubs/defaultConfig.stub.js
*/
module.exports = {
/**
* Stylesheet generation mode.
*
* Set mode to "jit" if you want to generate your styles on-demand as you author your templates;
* Set mode to "aot" if you want to generate the stylesheet in advance and purge later (aka legacy mode).
*/
mode: "jit",
purge: [
/**
* HTML. Paths to Django template files that will contain Tailwind CSS classes.
*/
/* Templates within theme app (<tailwind_app_name>/templates), e.g. base.html. */
'../templates/**/*.html',
/*
* Main templates directory of the project (BASE_DIR/templates).
* Adjust the following line to match your project structure.
*/
'../../templates/**/*.html',
/*
* Templates in other django apps (BASE_DIR/<any_app_name>/templates).
* Adjust the following line to match your project structure.
*/
'../../**/templates/**/*.html',
/**
* JS: If you use Tailwind CSS in JavaScript, uncomment the following lines and make sure
* patterns match your project structure.
*/
/* JS 1: Ignore any JavaScript in node_modules folder. */
// '!../../**/node_modules',
/* JS 2: Process all JavaScript files in the project. */
// '../../**/*.js',
/**
* Python: If you use Tailwind CSS classes in Python, uncomment the following line
* and make sure the pattern below matches your project structure.
*/
// '../../**/*.py'
],
darkMode: false, // or 'media' or 'class'
theme: {
@ -28,5 +71,15 @@ module.exports = {
variants: {
extend: {},
},
plugins: [],
plugins: [
/**
* '@tailwindcss/forms' is the forms plugin that provides a minimal styling
* for forms. If you don't like it or have own styling for forms,
* comment the line below to disable '@tailwindcss/forms'.
*/
//require('@tailwindcss/forms'),
require('@tailwindcss/typography'),
require('@tailwindcss/line-clamp'),
require('@tailwindcss/aspect-ratio'),
],
}

19
web/quotes/theme/templates/base.html Normal file
View file

@ -0,0 +1,19 @@
{% load static tailwind_tags %}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Django Tailwind</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
{% tailwind_css %}
</head>
<body class="bg-grey-lightest font-serif leading-normal tracking-normal">
<div class="container mx-auto">
<section class="flex items-center justify-center h-screen">
<h1 class="text-5xl">Django + Tailwind = ❤️</h1>
</section>
</div>
</body>
</html>