forgejo/webpack.config.js

294 lines
9.4 KiB
JavaScript
Raw Normal View History

import fastGlob from 'fast-glob';
import wrapAnsi from 'wrap-ansi';
2024-08-31 06:36:03 +02:00
import {init as licenseChecker} from 'license-checker-rseidelsohn';
import MiniCssExtractPlugin from 'mini-css-extract-plugin';
import MonacoWebpackPlugin from 'monaco-editor-webpack-plugin';
import {VueLoaderPlugin} from 'vue-loader';
import EsBuildLoader from 'esbuild-loader';
import {parse, dirname} from 'node:path';
import webpack from 'webpack';
import {fileURLToPath} from 'node:url';
import {readFileSync, writeFileSync} from 'node:fs';
import {env} from 'node:process';
Add tailwindcss (#29357) This will get tailwindcss working on a basic level. It provides only the utility classes, e.g. no tailwind base which we don't need because we have our own CSS reset. Without the base, we also do not have their CSS variables so a small amount of features do not work and I removed the generated classes for them. ***Note for future developers: This currently uses a `tw-` prefix, so we use it like `tw-p-3`.*** <details> <summary>Currently added CSS, all false-positives</summary> ``` .\!visible{ visibility: visible !important } .visible{ visibility: visible } .invisible{ visibility: hidden } .collapse{ visibility: collapse } .static{ position: static } .\!fixed{ position: fixed !important } .absolute{ position: absolute } .relative{ position: relative } .sticky{ position: sticky } .left-10{ left: 2.5rem } .isolate{ isolation: isolate } .float-right{ float: right } .float-left{ float: left } .mr-2{ margin-right: 0.5rem } .mr-3{ margin-right: 0.75rem } .\!block{ display: block !important } .block{ display: block } .inline-block{ display: inline-block } .inline{ display: inline } .flex{ display: flex } .inline-flex{ display: inline-flex } .\!table{ display: table !important } .inline-table{ display: inline-table } .table-caption{ display: table-caption } .table-cell{ display: table-cell } .table-column{ display: table-column } .table-column-group{ display: table-column-group } .table-footer-group{ display: table-footer-group } .table-header-group{ display: table-header-group } .table-row-group{ display: table-row-group } .table-row{ display: table-row } .flow-root{ display: flow-root } .inline-grid{ display: inline-grid } .contents{ display: contents } .list-item{ display: list-item } .\!hidden{ display: none !important } .hidden{ display: none } .flex-shrink{ flex-shrink: 1 } .shrink{ flex-shrink: 1 } .flex-grow{ flex-grow: 1 } .grow{ flex-grow: 1 } .border-collapse{ border-collapse: collapse } .select-all{ user-select: all } .resize{ resize: both } .flex-wrap{ flex-wrap: wrap } .overflow-visible{ overflow: visible } .rounded{ border-radius: 0.25rem } .border{ border-width: 1px } .text-justify{ text-align: justify } .uppercase{ text-transform: uppercase } .lowercase{ text-transform: lowercase } .capitalize{ text-transform: capitalize } .italic{ font-style: italic } .text-red{ color: var(--color-red) } .text-shadow{ color: var(--color-shadow) } .underline{ text-decoration-line: underline } .overline{ text-decoration-line: overline } .line-through{ text-decoration-line: line-through } .outline{ outline-style: solid } .ease-in{ transition-timing-function: cubic-bezier(0.4, 0, 1, 1) } .ease-in-out{ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) } .ease-out{ transition-timing-function: cubic-bezier(0, 0, 0.2, 1) } ``` </details> --------- Co-authored-by: Giteabot <teabot@gitea.io> (cherry picked from commit f4b92578b4601bc6e9b631b9a5a5f3766c27b0cb)
2024-02-25 17:46:46 +01:00
import tailwindcss from 'tailwindcss';
import tailwindConfig from './tailwind.config.js';
import tailwindcssNesting from 'tailwindcss/nesting/index.js';
import postcssNesting from 'postcss-nesting';
const {EsbuildPlugin} = EsBuildLoader;
const {SourceMapDevToolPlugin, DefinePlugin} = webpack;
const formatLicenseText = (licenseText) => wrapAnsi(licenseText || '', 80).trim();
const baseDirectory = dirname(fileURLToPath(new URL(import.meta.url)));
const glob = (pattern) => fastGlob.sync(pattern, {
cwd: baseDirectory,
absolute: true,
});
Add Octicon SVG spritemap (#10107) * Add octicon SVG sprite Signed-off-by: jolheiser <john.olheiser@gmail.com> * Static prefix Signed-off-by: jolheiser <john.olheiser@gmail.com> * SVG for all repo icons Signed-off-by: jolheiser <john.olheiser@gmail.com> * make vendor Signed-off-by: jolheiser <john.olheiser@gmail.com> * Swap out octicons Signed-off-by: jolheiser <john.olheiser@gmail.com> * Move octicons to top of less imports Signed-off-by: jolheiser <john.olheiser@gmail.com> * Fix JS Signed-off-by: jolheiser <john.olheiser@gmail.com> * Definitely not a search/replace Signed-off-by: jolheiser <john.olheiser@gmail.com> * Missed regex Signed-off-by: jolheiser <john.olheiser@gmail.com> * Move to more generic calls and webpack Signed-off-by: jolheiser <john.olheiser@gmail.com> * make svg -> make webpack Signed-off-by: jolheiser <john.olheiser@gmail.com> * Remove svg-sprite Signed-off-by: jolheiser <john.olheiser@gmail.com> * Update tests Signed-off-by: jolheiser <john.olheiser@gmail.com> * Missed a test Signed-off-by: jolheiser <john.olheiser@gmail.com> * Remove svg from makefile Signed-off-by: jolheiser <john.olheiser@gmail.com> * Suggestions Signed-off-by: jolheiser <john.olheiser@gmail.com> * Attempt to fix test Signed-off-by: jolheiser <john.olheiser@gmail.com> * Update tests Signed-off-by: jolheiser <john.olheiser@gmail.com> * Revert timetracking test Signed-off-by: jolheiser <john.olheiser@gmail.com> * Swap .octicon for .svg in less Signed-off-by: jolheiser <john.olheiser@gmail.com> * Add aria-hidden Signed-off-by: jolheiser <john.olheiser@gmail.com> * Replace mega-octicon Signed-off-by: jolheiser <john.olheiser@gmail.com> * Fix webpack globbing on Windows Signed-off-by: jolheiser <john.olheiser@gmail.com> * Revert Co-Authored-By: silverwind <me@silverwind.io> * Fix octions from upstream Signed-off-by: jolheiser <john.olheiser@gmail.com> * Fix Vue and missed JS function Signed-off-by: jolheiser <john.olheiser@gmail.com> * Add JS helper and PWA Signed-off-by: jolheiser <john.olheiser@gmail.com> * Preload SVG Signed-off-by: jolheiser <john.olheiser@gmail.com> Co-authored-by: silverwind <me@silverwind.io> Co-authored-by: techknowlogick <matti@mdranta.net>
2020-02-11 18:02:41 +01:00
const themes = {};
for (const path of glob('web_src/css/themes/*.css')) {
themes[parse(path).name] = [path];
}
const isProduction = env.NODE_ENV !== 'development';
if (isProduction) {
2024-08-31 06:36:03 +02:00
licenseChecker({
start: baseDirectory,
production: true,
onlyAllow: 'Apache-2.0; 0BSD; BSD-2-Clause; BSD-3-Clause; BlueOak-1.0.0; MIT; ISC; Unlicense; CC-BY-4.0',
// argparse@2.0.1 - Python-2.0. It's used in the CLI file of markdown-it and js-yaml and not in the library code.
// idiomorph@0.3.0. See https://github.com/bigskysoftware/idiomorph/pull/37
2024-08-24 22:13:16 +02:00
excludePackages: 'argparse@2.0.1;idiomorph@0.3.0',
}, (err, dependencies) => {
if (err) {
throw err;
}
const line = '-'.repeat(80);
const goJson = readFileSync('assets/go-licenses.json', 'utf8');
const goModules = JSON.parse(goJson).map(({name, licenseText}) => {
return {name, body: formatLicenseText(licenseText)};
});
const jsModules = Object.keys(dependencies).map((packageName) => {
const {licenses, licenseFile} = dependencies[packageName];
const licenseText = (licenseFile && !licenseFile.toLowerCase().includes('readme')) ? readFileSync(licenseFile) : '[no license file]';
return {name: packageName, licenseName: licenses, body: formatLicenseText(licenseText)};
});
const modules = [...goModules, ...jsModules];
const licenseTxt = modules.map(({name, licenseName, body}) => {
const title = licenseName ? `${name} - ${licenseName}` : name;
return `${line}\n${title}\n${line}\n${body}`;
}).join('\n');
writeFileSync('public/assets/licenses.txt', licenseTxt);
});
} else {
writeFileSync('public/assets/licenses.txt', 'Licenses are disabled during development');
}
// ENABLE_SOURCEMAP accepts the following values:
// true - all enabled, the default in development
// reduced - minimal sourcemaps, the default in production
// false - all disabled
let sourceMaps;
if ('ENABLE_SOURCEMAP' in env) {
sourceMaps = ['true', 'false'].includes(env.ENABLE_SOURCEMAP) ? env.ENABLE_SOURCEMAP : 'reduced';
} else {
sourceMaps = isProduction ? 'reduced' : 'true';
}
Add `<overflow-menu>`, rename webcomponents (#29400) 1. Add `<overflow-menu>` web component 2. Rename `<gitea-origin-url>` to `<origin-url>` and make filenames match. <img width="439" alt="image" src="https://github.com/go-gitea/gitea/assets/115237/2fbe4ca4-110b-4ad2-8e17-c1e116ccbd74"> <img width="444" alt="Screenshot 2024-03-02 at 21 36 52" src="https://github.com/go-gitea/gitea/assets/115237/aa8f786e-dc8c-4030-b12d-7cfb74bdfd6e"> <img width="537" alt="Screenshot 2024-03-03 at 03 05 06" src="https://github.com/go-gitea/gitea/assets/115237/fddd50aa-adf1-4b4b-bd7f-caf30c7b2245"> ![image](https://github.com/go-gitea/gitea/assets/115237/0f43770c-834c-4a05-8e3d-d30eb8653786) ![image](https://github.com/go-gitea/gitea/assets/115237/4b4c6bd7-843f-4f49-808f-6b3aed5e9f9a) TODO: - [x] Check if removal of `requestAnimationFrame` is possible to avoid flash of content. Likely needs a `MutationObserver`. - [x] Hide tippy when button is removed from DOM. - [x] ~~Implement right-aligned items (https://github.com/go-gitea/gitea/pull/28976)~~. Not going to do it. - [x] Clean up CSS so base element has no background and add background via tailwind instead. - [x] Use it for org and user page. --------- Co-authored-by: Giteabot <teabot@gitea.io> Co-authored-by: wxiaoguang <wxiaoguang@gmail.com> (cherry picked from commit 256a1eeb9a67b18c62a10f5909b584b7b220848a) Conflicts: options/locale/locale_en-US.ini templates/package/content/cargo.tmpl templates/package/content/cran.tmpl templates/package/content/debian.tmpl templates/package/content/maven.tmpl
2024-03-15 03:05:31 +01:00
// define which web components we use for Vue to not interpret them as Vue components
const webComponents = new Set([
// our own, in web_src/js/webcomponents
'overflow-menu',
'origin-url',
'absolute-date',
// from dependencies
'markdown-toolbar',
'relative-time',
'text-expander',
]);
const filterCssImport = (url, ...args) => {
const cssFile = args[1] || args[0]; // resourcePath is 2nd argument for url and 3rd for import
const importedFile = url.replace(/[?#].+/, '').toLowerCase();
if (cssFile.includes('fomantic')) {
if (/brand-icons/.test(importedFile)) return false;
if (/(eot|ttf|otf|woff|svg)$/i.test(importedFile)) return false;
}
if (cssFile.includes('katex') && /(ttf|woff)$/i.test(importedFile)) {
return false;
}
return true;
};
/** @type {import("webpack").Configuration} */
export default {
mode: isProduction ? 'production' : 'development',
entry: {
index: [
fileURLToPath(new URL('web_src/js/jquery.js', import.meta.url)),
fileURLToPath(new URL('web_src/fomantic/build/semantic.js', import.meta.url)),
fileURLToPath(new URL('web_src/js/index.js', import.meta.url)),
fileURLToPath(new URL('node_modules/easymde/dist/easymde.min.css', import.meta.url)),
fileURLToPath(new URL('web_src/fomantic/build/semantic.css', import.meta.url)),
fileURLToPath(new URL('web_src/css/index.css', import.meta.url)),
],
Introduce customized HTML elements, fix incorrect AppUrl usages in templates (#22861) This PR follows: * #21986 * #22831 This PR also introduce customized HTML elements, which would also help problems like: * #17760 * #21429 * #21440 With customized HTML elements, there won't be any load-search-replace operations, and it can avoid page flicking (which @silverwind cares a lot). Browser support: https://developer.mozilla.org/en-US/docs/Web/API/Window/customElements # FAQ ## Why the component has the prefix? As usual, I would strongly suggest to add prefixes for our own/private names. The dedicated prefix will avoid conflicts in the future, and it makes it easier to introduce various 3rd components, like GitHub's `relative-time` component. If there is no prefix, it's impossible to introduce another public component with the same name in the future. ## Why the `custcomp.js` is loaded before HTML body? The `index.js` is after HTML body. Customized components must be registered before the content loading. Otherwise there would be still some flicking. `custcomp.js` should have its own dependencies and should be very light, so it won't affect the page loading time too much. ## Why use `data-url` attribute but not use the `textContent`? According to the standard, the `connectedCallback` occurs on the tag-opening moment. The element's children are not ready yet. ## Why not use `{{.GuessCurrentOrigin $.ctx ...}}` to let backend decide the absolute URL? It's difficult for backend to guess the correct protocol(scheme) correctly with zero configuration. Generating the absolute URL from frontend can guarantee that the URL is 100% correct -- since the user is visiting it. # Screenshot <details> ![image](https://user-images.githubusercontent.com/2114189/218256757-a267c8ba-3108-4755-9ae5-329f1b08f615.png) </details>
2023-02-17 15:02:20 +01:00
webcomponents: [
Add `<overflow-menu>`, rename webcomponents (#29400) 1. Add `<overflow-menu>` web component 2. Rename `<gitea-origin-url>` to `<origin-url>` and make filenames match. <img width="439" alt="image" src="https://github.com/go-gitea/gitea/assets/115237/2fbe4ca4-110b-4ad2-8e17-c1e116ccbd74"> <img width="444" alt="Screenshot 2024-03-02 at 21 36 52" src="https://github.com/go-gitea/gitea/assets/115237/aa8f786e-dc8c-4030-b12d-7cfb74bdfd6e"> <img width="537" alt="Screenshot 2024-03-03 at 03 05 06" src="https://github.com/go-gitea/gitea/assets/115237/fddd50aa-adf1-4b4b-bd7f-caf30c7b2245"> ![image](https://github.com/go-gitea/gitea/assets/115237/0f43770c-834c-4a05-8e3d-d30eb8653786) ![image](https://github.com/go-gitea/gitea/assets/115237/4b4c6bd7-843f-4f49-808f-6b3aed5e9f9a) TODO: - [x] Check if removal of `requestAnimationFrame` is possible to avoid flash of content. Likely needs a `MutationObserver`. - [x] Hide tippy when button is removed from DOM. - [x] ~~Implement right-aligned items (https://github.com/go-gitea/gitea/pull/28976)~~. Not going to do it. - [x] Clean up CSS so base element has no background and add background via tailwind instead. - [x] Use it for org and user page. --------- Co-authored-by: Giteabot <teabot@gitea.io> Co-authored-by: wxiaoguang <wxiaoguang@gmail.com> (cherry picked from commit 256a1eeb9a67b18c62a10f5909b584b7b220848a) Conflicts: options/locale/locale_en-US.ini templates/package/content/cargo.tmpl templates/package/content/cran.tmpl templates/package/content/debian.tmpl templates/package/content/maven.tmpl
2024-03-15 03:05:31 +01:00
fileURLToPath(new URL('web_src/js/webcomponents/index.js', import.meta.url)),
Introduce customized HTML elements, fix incorrect AppUrl usages in templates (#22861) This PR follows: * #21986 * #22831 This PR also introduce customized HTML elements, which would also help problems like: * #17760 * #21429 * #21440 With customized HTML elements, there won't be any load-search-replace operations, and it can avoid page flicking (which @silverwind cares a lot). Browser support: https://developer.mozilla.org/en-US/docs/Web/API/Window/customElements # FAQ ## Why the component has the prefix? As usual, I would strongly suggest to add prefixes for our own/private names. The dedicated prefix will avoid conflicts in the future, and it makes it easier to introduce various 3rd components, like GitHub's `relative-time` component. If there is no prefix, it's impossible to introduce another public component with the same name in the future. ## Why the `custcomp.js` is loaded before HTML body? The `index.js` is after HTML body. Customized components must be registered before the content loading. Otherwise there would be still some flicking. `custcomp.js` should have its own dependencies and should be very light, so it won't affect the page loading time too much. ## Why use `data-url` attribute but not use the `textContent`? According to the standard, the `connectedCallback` occurs on the tag-opening moment. The element's children are not ready yet. ## Why not use `{{.GuessCurrentOrigin $.ctx ...}}` to let backend decide the absolute URL? It's difficult for backend to guess the correct protocol(scheme) correctly with zero configuration. Generating the absolute URL from frontend can guarantee that the URL is 100% correct -- since the user is visiting it. # Screenshot <details> ![image](https://user-images.githubusercontent.com/2114189/218256757-a267c8ba-3108-4755-9ae5-329f1b08f615.png) </details>
2023-02-17 15:02:20 +01:00
],
[API] Forgejo API /api/forgejo/v1 (cherry picked from commit 20b56692693e054bb3c04b4ef12b29b0715b4530) (cherry picked from commit 1574643a6a9634e5b92c033a4bfb69062a86bd05) Update semantic version according to specification (cherry picked from commit 22510f41306f9c133a7e99b61f9c38dabfd4b810) Mise à jour de 'Makefile' (cherry picked from commit c3d85d8409f1bb18a45659a167cf1ffee057f3b6) (cherry picked from commit 5ea23098513c068444226af41faf9be9c4c998e6) (cherry picked from commit ec5217b9d1b94bb04e34ce8c27eecbdc6f3a247a) (cherry picked from commit 14f08e364b2ad7e3176b45d3ec8da5f5605b4315) (cherry picked from commit b4465c67b8737aed9fd79a43046aa3795a298e68) [API] [SEMVER] replace number with version (cherry picked from commit fba48e64977a75e77c9c6cf8e3f8a679a5e7b733) (cherry picked from commit 532ec5d8782703b62d7d02312764e50637cd016e) [API] [SEMVER] [v1.20] less is replaced by css (cherry picked from commit 01ca3a4f4291cf4c62df42cbd12a00638f3cdc70) (cherry picked from commit 1d928c3ab2e1fda6082e1400d89ea96d6605ebaa) (cherry picked from commit a39dc804cd1da86444ed709455857f069475e7db) Conflicts: webpack.config.js (cherry picked from commit adc68578b3eb41215338125edfca91804706f8a1) (cherry picked from commit 9b8d98475fd7efcc15bf0d91b0af6ef3aff64508) (cherry picked from commit 25161039745a63282257eded9616390241af8013) (cherry picked from commit 18e6287963a0e1863cd08fd514a4e732a1904a68) (cherry picked from commit e9694e67ab93ad74f7eae3152d88d95e8493e739) (cherry picked from commit a9763edaf002c8009a2cca4115cb8b926f8cdc85) (cherry picked from commit e2b550f4fba144f9637a212b56bfe30cac1adb3b) (cherry picked from commit 2edac36701e8fa1ff67f87dccfa34cfc00ab66de) [API] Forgejo API /api/forgejo/v1 (squash) Update semver as v1.20 is entering release candidate mode (cherry picked from commit 4995098ec3c6eee19a7ad7bc956b71c6e937c04c) (cherry picked from commit 578ccfdd27d7a280050bdf61d497d07decf98f2f) (cherry picked from commit 1bf6ac09520490f0a56b9b55d7836c2d8ea5d22c) (cherry picked from commit 2fe16b2bfed62c0386d0bfe104f7dcc621d1c3be) (cherry picked from commit 7cd9d027eec5a2b328d06a47f34545943560fe1b) (cherry picked from commit eaed4be2ae88055a15dcc96564440c301a13ba8e) (cherry picked from commit cc94f3115f844a0f16064e49e5eb719d33bc4441) (cherry picked from commit d7a77e35ccfd2d0fc2ba98932296ab7354edd2db) (cherry picked from commit cd8eb68ab7b3e2eaacf78d370c762f43cc19fd6a) (cherry picked from commit 68487ac95f742837e7ff38df902834b6173cd9ab) (cherry picked from commit 616dceb565456d6fac6f58b1c4de43e9d3254090) (cherry picked from commit 545fe5975b47d2eab348a57b87c6fd4590f33442) (cherry picked from commit c042cf8eda2dea805138bd64daa7fbe07865ed5a) (cherry picked from commit ae5e5a7468aa66312055a26841f658574a9b0dd7) (cherry picked from commit 8034ef5fa2648a127f8c84c572bec02a1ff6bb9f) (cherry picked from commit aaf0293034468505449d33ab1483ae65b4175754) (cherry picked from commit daafa8ce58e5e6077da585b13e5190856228a4a3) (cherry picked from commit 7ca3681d3e2ed5ec1ae44364cba476d642e2b557) (cherry picked from commit 39f72cba71ff3f9d2cbb05c88031b34933573a8c) (cherry picked from commit 60a591713097384935ba0ac51a5cd4793f7544a8) (cherry picked from commit 4853bd9e16bc8986ba8159349e93bc3093dc8ab9) [API] Move forgejo api file (squash) - Move the file to accommodate https://codeberg.org/forgejo/forgejo/commit/faa28b5a44912f1c63afddab9396bae9e6fe061c (cherry picked from commit bce89351d251bfa18c677b30bc7da80856d919fb) (cherry picked from commit 11ae7f6e85395b287c6f4108c531aa1a81fd964c) (cherry picked from commit 25e96cfcb28859406329090eb0c7990bea4e73eb) (cherry picked from commit 6d8d19b39156a7f8b4db5022915590593df94f1f) (cherry picked from commit 5afc5c454b7d70f95b83e6c3b4c9e2cb6e2d0ef5) (cherry picked from commit 86d07b4c249211bdb77c0520f99f2c8e5d89b516) (cherry picked from commit e54d869fdae44811faaa80f3757efbc93bf0bce4) (cherry picked from commit ab31ef1bba3bc5188e0f3ce5e5fa33335877cf47) (cherry picked from commit 511cbca2f3799646edf8eae00464b87f43ca280f) (cherry picked from commit 333916fea874509063f9449f07d79e4cafbcf06f) (cherry picked from commit 3802bcd7c9865b77151ef454c0bdc2ce32157a41) (cherry picked from commit 5d0fa034f77388ed21735a22cf1a2a23562245c3) (cherry picked from commit d15627aa0dfb4ffc2eb7ab0ce99b7c5b2bf06dcf) (cherry picked from commit ba0b21b9305b6fecf23aeec213f1a95d96ce72fb) (cherry picked from commit 39ade66aac7f8cccd980d1f435b92465a50be032)
2023-02-07 11:23:49 +01:00
forgejoswagger: [ // Forgejo swagger is OpenAPI 3.0.0 and has specific parameters
fileURLToPath(new URL('web_src/js/standalone/forgejo-swagger.js', import.meta.url)),
fileURLToPath(new URL('web_src/css/standalone/swagger.css', import.meta.url)),
],
swagger: [
fileURLToPath(new URL('web_src/js/standalone/swagger.js', import.meta.url)),
fileURLToPath(new URL('web_src/css/standalone/swagger.css', import.meta.url)),
],
'eventsource.sharedworker': [
fileURLToPath(new URL('web_src/js/features/eventsource.sharedworker.js', import.meta.url)),
],
...(!isProduction && {
devtest: [
fileURLToPath(new URL('web_src/js/standalone/devtest.js', import.meta.url)),
fileURLToPath(new URL('web_src/css/standalone/devtest.css', import.meta.url)),
],
}),
...themes,
},
devtool: false,
output: {
path: fileURLToPath(new URL('public/assets', import.meta.url)),
filename: () => 'js/[name].js',
chunkFilename: ({chunk}) => {
const language = (/monaco.*languages?_.+?_(.+?)_/.exec(chunk.id) || [])[1];
return `js/${language ? `monaco-language-${language.toLowerCase()}` : `[name]`}.[contenthash:8].js`;
},
},
optimization: {
minimize: isProduction,
minimizer: [
new EsbuildPlugin({
target: 'es2020',
minify: true,
css: true,
legalComments: 'none',
}),
],
splitChunks: {
chunks: 'async',
name: (_, chunks) => chunks.map((item) => item.name).join('-'),
},
moduleIds: 'named',
chunkIds: 'named',
},
module: {
rules: [
{
test: /\.vue$/i,
exclude: /node_modules/,
loader: 'vue-loader',
Add `<overflow-menu>`, rename webcomponents (#29400) 1. Add `<overflow-menu>` web component 2. Rename `<gitea-origin-url>` to `<origin-url>` and make filenames match. <img width="439" alt="image" src="https://github.com/go-gitea/gitea/assets/115237/2fbe4ca4-110b-4ad2-8e17-c1e116ccbd74"> <img width="444" alt="Screenshot 2024-03-02 at 21 36 52" src="https://github.com/go-gitea/gitea/assets/115237/aa8f786e-dc8c-4030-b12d-7cfb74bdfd6e"> <img width="537" alt="Screenshot 2024-03-03 at 03 05 06" src="https://github.com/go-gitea/gitea/assets/115237/fddd50aa-adf1-4b4b-bd7f-caf30c7b2245"> ![image](https://github.com/go-gitea/gitea/assets/115237/0f43770c-834c-4a05-8e3d-d30eb8653786) ![image](https://github.com/go-gitea/gitea/assets/115237/4b4c6bd7-843f-4f49-808f-6b3aed5e9f9a) TODO: - [x] Check if removal of `requestAnimationFrame` is possible to avoid flash of content. Likely needs a `MutationObserver`. - [x] Hide tippy when button is removed from DOM. - [x] ~~Implement right-aligned items (https://github.com/go-gitea/gitea/pull/28976)~~. Not going to do it. - [x] Clean up CSS so base element has no background and add background via tailwind instead. - [x] Use it for org and user page. --------- Co-authored-by: Giteabot <teabot@gitea.io> Co-authored-by: wxiaoguang <wxiaoguang@gmail.com> (cherry picked from commit 256a1eeb9a67b18c62a10f5909b584b7b220848a) Conflicts: options/locale/locale_en-US.ini templates/package/content/cargo.tmpl templates/package/content/cran.tmpl templates/package/content/debian.tmpl templates/package/content/maven.tmpl
2024-03-15 03:05:31 +01:00
options: {
compilerOptions: {
isCustomElement: (tag) => webComponents.has(tag),
},
},
},
{
test: /\.js$/i,
exclude: /node_modules/,
use: [
{
loader: 'esbuild-loader',
options: {
loader: 'js',
target: 'es2020',
},
},
],
},
{
test: /\.css$/i,
use: [
{
loader: MiniCssExtractPlugin.loader,
},
{
loader: 'css-loader',
options: {
sourceMap: sourceMaps === 'true',
url: {filter: filterCssImport},
import: {filter: filterCssImport},
importLoaders: 1,
},
},
Add tailwindcss (#29357) This will get tailwindcss working on a basic level. It provides only the utility classes, e.g. no tailwind base which we don't need because we have our own CSS reset. Without the base, we also do not have their CSS variables so a small amount of features do not work and I removed the generated classes for them. ***Note for future developers: This currently uses a `tw-` prefix, so we use it like `tw-p-3`.*** <details> <summary>Currently added CSS, all false-positives</summary> ``` .\!visible{ visibility: visible !important } .visible{ visibility: visible } .invisible{ visibility: hidden } .collapse{ visibility: collapse } .static{ position: static } .\!fixed{ position: fixed !important } .absolute{ position: absolute } .relative{ position: relative } .sticky{ position: sticky } .left-10{ left: 2.5rem } .isolate{ isolation: isolate } .float-right{ float: right } .float-left{ float: left } .mr-2{ margin-right: 0.5rem } .mr-3{ margin-right: 0.75rem } .\!block{ display: block !important } .block{ display: block } .inline-block{ display: inline-block } .inline{ display: inline } .flex{ display: flex } .inline-flex{ display: inline-flex } .\!table{ display: table !important } .inline-table{ display: inline-table } .table-caption{ display: table-caption } .table-cell{ display: table-cell } .table-column{ display: table-column } .table-column-group{ display: table-column-group } .table-footer-group{ display: table-footer-group } .table-header-group{ display: table-header-group } .table-row-group{ display: table-row-group } .table-row{ display: table-row } .flow-root{ display: flow-root } .inline-grid{ display: inline-grid } .contents{ display: contents } .list-item{ display: list-item } .\!hidden{ display: none !important } .hidden{ display: none } .flex-shrink{ flex-shrink: 1 } .shrink{ flex-shrink: 1 } .flex-grow{ flex-grow: 1 } .grow{ flex-grow: 1 } .border-collapse{ border-collapse: collapse } .select-all{ user-select: all } .resize{ resize: both } .flex-wrap{ flex-wrap: wrap } .overflow-visible{ overflow: visible } .rounded{ border-radius: 0.25rem } .border{ border-width: 1px } .text-justify{ text-align: justify } .uppercase{ text-transform: uppercase } .lowercase{ text-transform: lowercase } .capitalize{ text-transform: capitalize } .italic{ font-style: italic } .text-red{ color: var(--color-red) } .text-shadow{ color: var(--color-shadow) } .underline{ text-decoration-line: underline } .overline{ text-decoration-line: overline } .line-through{ text-decoration-line: line-through } .outline{ outline-style: solid } .ease-in{ transition-timing-function: cubic-bezier(0.4, 0, 1, 1) } .ease-in-out{ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) } .ease-out{ transition-timing-function: cubic-bezier(0, 0, 0.2, 1) } ``` </details> --------- Co-authored-by: Giteabot <teabot@gitea.io> (cherry picked from commit f4b92578b4601bc6e9b631b9a5a5f3766c27b0cb)
2024-02-25 17:46:46 +01:00
{
loader: 'postcss-loader',
options: {
postcssOptions: {
plugins: [
tailwindcssNesting(postcssNesting({edition: '2024-02'})),
tailwindcss(tailwindConfig),
],
Add tailwindcss (#29357) This will get tailwindcss working on a basic level. It provides only the utility classes, e.g. no tailwind base which we don't need because we have our own CSS reset. Without the base, we also do not have their CSS variables so a small amount of features do not work and I removed the generated classes for them. ***Note for future developers: This currently uses a `tw-` prefix, so we use it like `tw-p-3`.*** <details> <summary>Currently added CSS, all false-positives</summary> ``` .\!visible{ visibility: visible !important } .visible{ visibility: visible } .invisible{ visibility: hidden } .collapse{ visibility: collapse } .static{ position: static } .\!fixed{ position: fixed !important } .absolute{ position: absolute } .relative{ position: relative } .sticky{ position: sticky } .left-10{ left: 2.5rem } .isolate{ isolation: isolate } .float-right{ float: right } .float-left{ float: left } .mr-2{ margin-right: 0.5rem } .mr-3{ margin-right: 0.75rem } .\!block{ display: block !important } .block{ display: block } .inline-block{ display: inline-block } .inline{ display: inline } .flex{ display: flex } .inline-flex{ display: inline-flex } .\!table{ display: table !important } .inline-table{ display: inline-table } .table-caption{ display: table-caption } .table-cell{ display: table-cell } .table-column{ display: table-column } .table-column-group{ display: table-column-group } .table-footer-group{ display: table-footer-group } .table-header-group{ display: table-header-group } .table-row-group{ display: table-row-group } .table-row{ display: table-row } .flow-root{ display: flow-root } .inline-grid{ display: inline-grid } .contents{ display: contents } .list-item{ display: list-item } .\!hidden{ display: none !important } .hidden{ display: none } .flex-shrink{ flex-shrink: 1 } .shrink{ flex-shrink: 1 } .flex-grow{ flex-grow: 1 } .grow{ flex-grow: 1 } .border-collapse{ border-collapse: collapse } .select-all{ user-select: all } .resize{ resize: both } .flex-wrap{ flex-wrap: wrap } .overflow-visible{ overflow: visible } .rounded{ border-radius: 0.25rem } .border{ border-width: 1px } .text-justify{ text-align: justify } .uppercase{ text-transform: uppercase } .lowercase{ text-transform: lowercase } .capitalize{ text-transform: capitalize } .italic{ font-style: italic } .text-red{ color: var(--color-red) } .text-shadow{ color: var(--color-shadow) } .underline{ text-decoration-line: underline } .overline{ text-decoration-line: overline } .line-through{ text-decoration-line: line-through } .outline{ outline-style: solid } .ease-in{ transition-timing-function: cubic-bezier(0.4, 0, 1, 1) } .ease-in-out{ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) } .ease-out{ transition-timing-function: cubic-bezier(0, 0, 0.2, 1) } ``` </details> --------- Co-authored-by: Giteabot <teabot@gitea.io> (cherry picked from commit f4b92578b4601bc6e9b631b9a5a5f3766c27b0cb)
2024-02-25 17:46:46 +01:00
},
},
},
],
},
Add Octicon SVG spritemap (#10107) * Add octicon SVG sprite Signed-off-by: jolheiser <john.olheiser@gmail.com> * Static prefix Signed-off-by: jolheiser <john.olheiser@gmail.com> * SVG for all repo icons Signed-off-by: jolheiser <john.olheiser@gmail.com> * make vendor Signed-off-by: jolheiser <john.olheiser@gmail.com> * Swap out octicons Signed-off-by: jolheiser <john.olheiser@gmail.com> * Move octicons to top of less imports Signed-off-by: jolheiser <john.olheiser@gmail.com> * Fix JS Signed-off-by: jolheiser <john.olheiser@gmail.com> * Definitely not a search/replace Signed-off-by: jolheiser <john.olheiser@gmail.com> * Missed regex Signed-off-by: jolheiser <john.olheiser@gmail.com> * Move to more generic calls and webpack Signed-off-by: jolheiser <john.olheiser@gmail.com> * make svg -> make webpack Signed-off-by: jolheiser <john.olheiser@gmail.com> * Remove svg-sprite Signed-off-by: jolheiser <john.olheiser@gmail.com> * Update tests Signed-off-by: jolheiser <john.olheiser@gmail.com> * Missed a test Signed-off-by: jolheiser <john.olheiser@gmail.com> * Remove svg from makefile Signed-off-by: jolheiser <john.olheiser@gmail.com> * Suggestions Signed-off-by: jolheiser <john.olheiser@gmail.com> * Attempt to fix test Signed-off-by: jolheiser <john.olheiser@gmail.com> * Update tests Signed-off-by: jolheiser <john.olheiser@gmail.com> * Revert timetracking test Signed-off-by: jolheiser <john.olheiser@gmail.com> * Swap .octicon for .svg in less Signed-off-by: jolheiser <john.olheiser@gmail.com> * Add aria-hidden Signed-off-by: jolheiser <john.olheiser@gmail.com> * Replace mega-octicon Signed-off-by: jolheiser <john.olheiser@gmail.com> * Fix webpack globbing on Windows Signed-off-by: jolheiser <john.olheiser@gmail.com> * Revert Co-Authored-By: silverwind <me@silverwind.io> * Fix octions from upstream Signed-off-by: jolheiser <john.olheiser@gmail.com> * Fix Vue and missed JS function Signed-off-by: jolheiser <john.olheiser@gmail.com> * Add JS helper and PWA Signed-off-by: jolheiser <john.olheiser@gmail.com> * Preload SVG Signed-off-by: jolheiser <john.olheiser@gmail.com> Co-authored-by: silverwind <me@silverwind.io> Co-authored-by: techknowlogick <matti@mdranta.net>
2020-02-11 18:02:41 +01:00
{
test: /\.svg$/i,
include: fileURLToPath(new URL('public/assets/img/svg', import.meta.url)),
type: 'asset/source',
Add Octicon SVG spritemap (#10107) * Add octicon SVG sprite Signed-off-by: jolheiser <john.olheiser@gmail.com> * Static prefix Signed-off-by: jolheiser <john.olheiser@gmail.com> * SVG for all repo icons Signed-off-by: jolheiser <john.olheiser@gmail.com> * make vendor Signed-off-by: jolheiser <john.olheiser@gmail.com> * Swap out octicons Signed-off-by: jolheiser <john.olheiser@gmail.com> * Move octicons to top of less imports Signed-off-by: jolheiser <john.olheiser@gmail.com> * Fix JS Signed-off-by: jolheiser <john.olheiser@gmail.com> * Definitely not a search/replace Signed-off-by: jolheiser <john.olheiser@gmail.com> * Missed regex Signed-off-by: jolheiser <john.olheiser@gmail.com> * Move to more generic calls and webpack Signed-off-by: jolheiser <john.olheiser@gmail.com> * make svg -> make webpack Signed-off-by: jolheiser <john.olheiser@gmail.com> * Remove svg-sprite Signed-off-by: jolheiser <john.olheiser@gmail.com> * Update tests Signed-off-by: jolheiser <john.olheiser@gmail.com> * Missed a test Signed-off-by: jolheiser <john.olheiser@gmail.com> * Remove svg from makefile Signed-off-by: jolheiser <john.olheiser@gmail.com> * Suggestions Signed-off-by: jolheiser <john.olheiser@gmail.com> * Attempt to fix test Signed-off-by: jolheiser <john.olheiser@gmail.com> * Update tests Signed-off-by: jolheiser <john.olheiser@gmail.com> * Revert timetracking test Signed-off-by: jolheiser <john.olheiser@gmail.com> * Swap .octicon for .svg in less Signed-off-by: jolheiser <john.olheiser@gmail.com> * Add aria-hidden Signed-off-by: jolheiser <john.olheiser@gmail.com> * Replace mega-octicon Signed-off-by: jolheiser <john.olheiser@gmail.com> * Fix webpack globbing on Windows Signed-off-by: jolheiser <john.olheiser@gmail.com> * Revert Co-Authored-By: silverwind <me@silverwind.io> * Fix octions from upstream Signed-off-by: jolheiser <john.olheiser@gmail.com> * Fix Vue and missed JS function Signed-off-by: jolheiser <john.olheiser@gmail.com> * Add JS helper and PWA Signed-off-by: jolheiser <john.olheiser@gmail.com> * Preload SVG Signed-off-by: jolheiser <john.olheiser@gmail.com> Co-authored-by: silverwind <me@silverwind.io> Co-authored-by: techknowlogick <matti@mdranta.net>
2020-02-11 18:02:41 +01:00
},
{
test: /\.(ttf|woff2?)$/i,
type: 'asset/resource',
generator: {
filename: 'fonts/[name].[contenthash:8][ext]',
},
},
],
},
plugins: [
new webpack.ProvidePlugin({ // for htmx extensions
htmx: 'htmx.org',
}),
new DefinePlugin({
__VUE_OPTIONS_API__: true, // at the moment, many Vue components still use the Vue Options API
__VUE_PROD_DEVTOOLS__: false, // do not enable devtools support in production
__VUE_PROD_HYDRATION_MISMATCH_DETAILS__: false, // https://github.com/vuejs/vue-cli/pull/7443
}),
new VueLoaderPlugin(),
new MiniCssExtractPlugin({
filename: 'css/[name].css',
chunkFilename: 'css/[name].[contenthash:8].css',
}),
sourceMaps !== 'false' && new SourceMapDevToolPlugin({
filename: '[file].[contenthash:8].map',
...(sourceMaps === 'reduced' && {include: /^js\/index\.js$/}),
}),
new MonacoWebpackPlugin({
filename: 'js/monaco-[name].[contenthash:8].worker.js',
}),
],
performance: {
hints: false,
maxEntrypointSize: Infinity,
maxAssetSize: Infinity,
},
resolve: {
symlinks: false,
},
watchOptions: {
ignored: [
'node_modules/**',
],
},
stats: {
assetsSort: 'name',
assetsSpace: Infinity,
cached: false,
cachedModules: false,
children: false,
chunkModules: false,
chunkOrigins: false,
chunksSort: 'name',
colors: true,
entrypoints: false,
excludeAssets: [
/^js\/monaco-language-.+\.js$/,
!isProduction && /^licenses.txt$/,
].filter(Boolean),
groupAssetsByChunk: false,
groupAssetsByEmitStatus: false,
groupAssetsByInfo: false,
groupModulesByAttributes: false,
modules: false,
reasons: false,
runtimeModules: false,
},
};