@imiobe/plonetheme-smartweb-base 0.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
File without changes
@@ -0,0 +1,7 @@
1
+ {
2
+ "extends": [
3
+ "stylelint-config-standard",
4
+ "stylelint-config-idiomatic-order",
5
+ "stylelint-config-prettier"
6
+ ]
7
+ }
package/README.rst ADDED
@@ -0,0 +1,89 @@
1
+ =================
2
+ Theme Development
3
+ =================
4
+
5
+
6
+ Tooling
7
+ =======
8
+
9
+
10
+ Install dependencies
11
+ --------------------
12
+
13
+ Run `npm install` to add dependencies from package.json::
14
+
15
+ .. code-block:: shell
16
+
17
+ $ npm install
18
+
19
+
20
+ Compile resources
21
+ -----------------
22
+
23
+ Run `npm run build` to add dependencies from package.json::
24
+
25
+ .. code-block:: shell
26
+
27
+ $ npm run build
28
+
29
+ This will compile your `scss/theme.scss` into `css/theme.css`. A minified
30
+ version () will be created as well. Check out the scripts section from
31
+ `package.json` so see what happens exactly.
32
+
33
+
34
+ Watch for changes
35
+ -----------------
36
+
37
+ Run `npm run watch` to automatically compile when a file has been changed::
38
+
39
+ .. code-block:: shell
40
+
41
+ $ npm run watch
42
+
43
+ With `npm run watch` you start the build process automatically when you save a file.
44
+
45
+
46
+ Configuring Plone within the theme package
47
+ ==========================================
48
+
49
+ To configure Plone when this package is installed, you can use GenericSetup profiles in profiles/default.
50
+ To revert the settings when the package is being uninstalled, place the default Plone configurations inside the profiles/uninstall folder.
51
+
52
+
53
+ Providing new template or override existing once
54
+ ================================================
55
+
56
+ Providing new templates
57
+ -----------------------
58
+
59
+ To add new views with your package, you can use plonecli.
60
+
61
+ .. code-block:: shell
62
+
63
+ plonecli add view
64
+
65
+ Depending how you answered the questions, you will now have a new view, which can have a Python file for the logic and a template for the presentation.
66
+
67
+
68
+ Overriding existing templates
69
+ -----------------------------
70
+
71
+ To override a template, you place the template into the browser/overrides folder.
72
+
73
+ The name of the template has to be the dotted namespace + templatename.
74
+
75
+ .. code-block:: shell
76
+
77
+ browser/overrides/plone.app.layout.viewlets.logo.pt
78
+
79
+ More info here:
80
+ https://pypi.org/project/z3c.jbot/
81
+
82
+
83
+
84
+ Providing new templates and Python Scripts, alternative solutions
85
+ =================================================================
86
+
87
+ - `collective.themefragments <https://pypi.python.org/pypi/collective.themefragments/>`_
88
+ - `plone.app.themingplugins <https://pypi.python.org/pypi/plone.app.themingplugins/>`_
89
+ - `collective.themesidesetup <https://pypi.python.org/pypi/collective.themesidesetup/>`_
Binary file
Binary file
package/index.html ADDED
@@ -0,0 +1,69 @@
1
+ <!doctype html>
2
+ <html>
3
+ <head>
4
+ <title>Plone Theme</title>
5
+ <link rel="shortcut icon" type="image/x-icon"
6
+ href="barceloneta-favicon.ico" />
7
+ <link rel="apple-touch-icon"
8
+ href="barceloneta-apple-touch-icon.png" />
9
+ <link rel="apple-touch-icon-precomposed" sizes="144x144"
10
+ href="barceloneta-apple-touch-icon-144x144-precomposed.png" />
11
+ <link rel="apple-touch-icon-precomposed" sizes="114x114"
12
+ href="barceloneta-apple-touch-icon-114x114-precomposed.png" />
13
+ <link rel="apple-touch-icon-precomposed" sizes="72x72"
14
+ href="barceloneta-apple-touch-icon-72x72-precomposed.png" />
15
+ <link rel="apple-touch-icon-precomposed" sizes="57x57"
16
+ href="barceloneta-apple-touch-icon-57x57-precomposed.png" />
17
+ <link rel="apple-touch-icon-precomposed"
18
+ href="barceloneta-apple-touch-icon-precomposed.png" />
19
+ </head>
20
+ <body>
21
+ <section id="portal-toolbar">
22
+ </section>
23
+ <div class="outer-wrapper">
24
+ <header id="content-header">
25
+ <div class="container">
26
+ <header id="portal-top">
27
+ </header>
28
+ <div id="anonymous-actions">
29
+ </div>
30
+ </div>
31
+ </header>
32
+ <div id="mainnavigation-wrapper">
33
+ <div id="mainnavigation">
34
+ </div>
35
+ </div>
36
+ <div id="hero" class="principal">
37
+ <div class="container">
38
+ <div class="gigantic">
39
+ </div>
40
+ </div>
41
+ </div>
42
+ <div id="above-content-wrapper">
43
+ <div id="above-content">
44
+ </div>
45
+ </div>
46
+ <div class="container">
47
+ <div class="row">
48
+ <aside id="global_statusmessage" class="col-12"></aside>
49
+ </div>
50
+ <main id="main-container" class="row">
51
+ <section id="portal-column-content">
52
+ </section>
53
+ <aside id="portal-column-one">
54
+ </aside>
55
+ <aside id="portal-column-two" role="complementary">
56
+ </aside>
57
+ </main><!--/row-->
58
+ </div><!--/container-->
59
+ </div> <!--/outer-wrapper -->
60
+ <footer id="portal-footer-wrapper">
61
+ <div class="container" id="portal-footer">
62
+ <div class="doormat row"></div>
63
+ <div class="copyright row"><div class="col-12"></div></div>
64
+ <div class="colophon row"><div class="col-12"></div></div>
65
+ <div class="site-actions row"><div class="col-12"></div></div>
66
+ </div>
67
+ </footer>
68
+ </body>
69
+ </html>
package/manifest.cfg ADDED
@@ -0,0 +1,21 @@
1
+ [theme]
2
+ title = Smartweb base theme
3
+ description = A Diazo based Plone theme
4
+ preview = preview.png
5
+ rules = /++theme++smartweb/rules.xml
6
+ prefix = /++theme++smartweb
7
+ doctype = <!DOCTYPE html>
8
+
9
+ enabled-bundles =
10
+ disabled-bundles =
11
+
12
+ production-js = /++theme++smartweb/js/main.js
13
+ production-css = /++theme++smartweb/styles/main.min.css
14
+ tinymce-content-css = /++theme++smartweb/styles/main.min.css
15
+
16
+
17
+ #[theme:overrides]
18
+ #directory = template-overrides
19
+
20
+ [theme:parameters]
21
+ # portal_url = python: portal.absolute_url()
package/package.json ADDED
@@ -0,0 +1,65 @@
1
+ {
2
+ "name": "@imiobe/plonetheme-smartweb-base",
3
+ "description": "iA.Smartweb base theme for Plone",
4
+ "private": false,
5
+ "publishConfig": {
6
+ "access": "public"
7
+ },
8
+ "maintainers": [
9
+ {
10
+ "name": "Thomas Lambert (iMio)",
11
+ "email": "thomas.lambert@imio.be",
12
+ "url": "https://imio.be"
13
+ },
14
+ {
15
+ "name": "Antoine Duchêne (iMio)",
16
+ "email": "adu@imio.be",
17
+ "url": "https://imio.be"
18
+ }
19
+ ],
20
+ "homepage": "https://imio.be",
21
+ "keywords": [
22
+ "imio",
23
+ "plone",
24
+ "smartweb"
25
+ ],
26
+ "version": "0.0.2",
27
+ "license": "GPL version 2",
28
+ "scripts": {
29
+ "stylelint": "npx stylelint 'src/**/*.{css,less}' 'src/**/*.{css,less}",
30
+ "stylelint:fix": "npx stylelint 'src/**/*.{css,less}' --fix",
31
+ "prettier": "npx prettier --single-quote --check 'src/**/*.{js,jsx,ts,tsx,json,css,scss,sass}'",
32
+ "prettier:fix": "npx prettier --single-quote --write 'src/**/*.{js,jsx,ts,tsx,json,css,scss,sass}'",
33
+ "build": "webpack --mode=production --progress --stats",
34
+ "build:dev": "webpack --mode=production --progress --stats",
35
+ "webpack-serve": "webpack serve --mode=development --progress",
36
+ "watch": "concurrently --names \"PLONE,WEBPACK\" -c \"bgBlue.bold,bgMagenta.bold\" \"../../../bin/instance fg\" \"npm:webpack-serve\""
37
+ },
38
+ "devDependencies": {
39
+ "@plone/plonetheme-barceloneta-base": "^3.0.0-alpha9",
40
+ "autoprefixer": "^10.4.2",
41
+ "babel-loader": "^8.2.3",
42
+ "clean-webpack-plugin": "^4.0.0",
43
+ "concurrently": "^7.0.0",
44
+ "copy-webpack-plugin": "^10.2.4",
45
+ "css-loader": "^6.6.0",
46
+ "css-minimizer-webpack-plugin": "^3.4.1",
47
+ "file-loader": "^6.2.0",
48
+ "mini-css-extract-plugin": "^2.5.3",
49
+ "postcss": "^8.4.7",
50
+ "postcss-loader": "^6.2.1",
51
+ "prettier": "^2.5.1",
52
+ "release-it": "^14.12.5",
53
+ "sass": "^1.49.9",
54
+ "sass-loader": "^12.6.0",
55
+ "style-loader": "^3.3.1",
56
+ "stylelint": "^14.5.3",
57
+ "stylelint-config-idiomatic-order": "^8.1.0",
58
+ "stylelint-config-prettier-scss": "^0.0.1",
59
+ "stylelint-config-standard-scss": "^3.0.0",
60
+ "webpack": "^5.69.1",
61
+ "webpack-cli": "^4.9.2",
62
+ "webpack-dev-server": "^4.7.4",
63
+ "zip-webpack-plugin": "^4.0.1"
64
+ }
65
+ }
@@ -0,0 +1,7 @@
1
+ const autoprefixer = require('autoprefixer')
2
+
3
+ module.exports = {
4
+ plugins: [
5
+ autoprefixer
6
+ ]
7
+ }
package/preview.png ADDED
Binary file
package/rules.xml ADDED
@@ -0,0 +1,143 @@
1
+ <?xml version="1.0" encoding="utf-8"?>
2
+ <rules xmlns="http://namespaces.plone.org/diazo"
3
+ xmlns:css="http://namespaces.plone.org/diazo/css"
4
+ xmlns:xhtml="http://www.w3.org/1999/xhtml"
5
+ xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
6
+ xmlns:xi="http://www.w3.org/2001/XInclude">
7
+
8
+ <!-- <xi:include href="++theme++barceloneta/grid-col-marker.xml"/> -->
9
+
10
+ <theme href="index.html" />
11
+ <notheme css:if-not-content="#visual-portal-wrapper" />
12
+
13
+ <rules css:if-content="#portal-top">
14
+ <!-- Attributes -->
15
+ <copy attributes="*" css:theme="html" css:content="html" />
16
+ <!-- Base tag -->
17
+ <before css:theme="title" css:content="base" />
18
+ <!-- Title -->
19
+ <replace css:theme="title" css:content="title" />
20
+ <!-- Pull in Plone Meta -->
21
+ <after css:theme-children="head" css:content="head meta" />
22
+ <!-- Don't use Plone icons, use the theme's -->
23
+ <drop css:content="head link[rel='apple-touch-icon']" />
24
+ <drop css:content="head link[rel='shortcut icon']" />
25
+ <!-- CSS -->
26
+ <after css:theme-children="head" css:content="head link" />
27
+ <after css:theme-children="head" css:content="head style" />
28
+ <!-- Script -->
29
+ <after css:theme-children="head" css:content="head script" />
30
+ </rules>
31
+
32
+ <!-- Copy over the id/class attributes on the body tag. This is important for per-section styling -->
33
+ <copy attributes="*" css:content="body" css:theme="body" />
34
+
35
+ <!-- move global nav -->
36
+ <replace css:theme-children="#mainnavigation" css:content-children="#portal-mainnavigation" method="raw" />
37
+
38
+ <!-- Content header -->
39
+ <replace css:theme="#portal-top" css:content-children="#portal-top" />
40
+
41
+ <!-- full-width breadcrumb -->
42
+ <replace css:theme="#above-content" css:content="#viewlet-above-content" />
43
+
44
+ <!-- Central column -->
45
+ <replace css:theme-children="#portal-column-content" css:content-children="#portal-column-content"></replace>
46
+
47
+ <!-- Alert message -->
48
+ <replace css:theme-children="#global_statusmessage" css:content-children="#global_statusmessage" />
49
+
50
+ <!-- Left column -->
51
+ <after css:theme-children="#portal-column-one" css:content-children="#portal-column-one"></after>
52
+ <drop css:theme="#portal-column-one" css:if-not-content="#portal-column-one" />
53
+
54
+ <!-- Right column -->
55
+ <after css:theme-children="#portal-column-two" css:content-children="#portal-column-two"></after>
56
+ <drop css:theme="#portal-column-two" css:if-not-content="#portal-column-two" />
57
+
58
+
59
+ <!-- Footer -->
60
+ <xsl:variable name="footer_portlets" select="//footer[@id='portal-footer-wrapper']//div[@class='portletWrapper']/*[not(contains(@id,'portal-colophon')) and not(contains(@id,'portal-footer-signature')) and not(contains(@class,'portletActions'))]"></xsl:variable>
61
+ <xsl:variable name="footer_portlets_count" select="count($footer_portlets)"></xsl:variable>
62
+
63
+
64
+ <!-- Replace footer information with Plone version. -->
65
+ <replace
66
+ css:theme-children="#portal-footer .copyright > div"
67
+ css:content-children="#portal-footer-wrapper #portal-footer-signature .card-body"
68
+ />
69
+ <drop css:theme="#portal-footer .copyright" css:if-not-content="#portal-footer-wrapper #portal-footer-signature" />
70
+
71
+ <!-- Replace colophon information with Plone version. -->
72
+ <replace
73
+ css:theme-children="#portal-footer .colophon > div"
74
+ css:content-children="#portal-footer-wrapper #portal-colophon .card-body"
75
+ />
76
+ <drop css:theme="#portal-footer .colophon" css:if-not-content="#portal-footer-wrapper #portal-colophon" />
77
+
78
+ <!-- Replace site-actions with Plone version. -->
79
+ <replace
80
+ css:theme-children="#portal-footer .site-actions > div"
81
+ css:content="#portal-footer-wrapper .actions-site_actions"
82
+ />
83
+ <drop css:theme="#portal-footer .site-actions" css:if-not-content="#portal-footer-wrapper .actions-site_actions" />
84
+
85
+ <!-- Move all other footer portlets into doormat area. -->
86
+ <replace css:theme-children="#portal-footer .doormat">
87
+ <xsl:variable name="columns">
88
+ <xsl:if test="$footer_portlets_count=1">col-md-12</xsl:if>
89
+ <xsl:if test="$footer_portlets_count=2">col-md-6</xsl:if>
90
+ <xsl:if test="$footer_portlets_count=3">col-md-4</xsl:if>
91
+ <xsl:if test="$footer_portlets_count=4">col-md-3</xsl:if>
92
+ <xsl:if test="$footer_portlets_count>4">col-md-4</xsl:if>
93
+ </xsl:variable>
94
+ <xsl:for-each select="$footer_portlets">
95
+ <div class="col-xs-12 {$columns}">
96
+ <xsl:for-each select=".">
97
+ <xsl:choose>
98
+ <xsl:when css:test=".card">
99
+ <xsl:choose>
100
+ <xsl:when css:test=".card-header:not(.titleless)">
101
+ <div class="headline"><h2><xsl:value-of css:select=".card-header" /></h2></div>
102
+ </xsl:when>
103
+ </xsl:choose>
104
+ <xsl:choose>
105
+ <xsl:when css:test=".portletCollection">
106
+ <ul>
107
+ <xsl:for-each css:select=".portletItem">
108
+ <li>
109
+ <a><xsl:copy-of select="a/attribute::*" /><xsl:apply-templates select="./a/text()" /></a>
110
+ <small><xsl:value-of css:select=".portletItemDetails" /></small>
111
+ </li>
112
+ </xsl:for-each>
113
+ </ul>
114
+ </xsl:when>
115
+ <xsl:otherwise>
116
+ <xsl:apply-templates css:select=".card-body" />
117
+ </xsl:otherwise>
118
+ </xsl:choose>
119
+ <xsl:if css:test=".card-footer">
120
+ <p><xsl:apply-templates select="./node()[@class='card-footer']/node()" /></p>
121
+ </xsl:if>
122
+ </xsl:when>
123
+ <xsl:otherwise>
124
+ <xsl:apply-templates select="./node()" />
125
+ </xsl:otherwise>
126
+ </xsl:choose>
127
+ </xsl:for-each>
128
+ </div>
129
+ </xsl:for-each>
130
+ </replace>
131
+
132
+ <!-- Add additional footer content, like script tags (from site settings). -->
133
+ <after
134
+ css:theme-children="html body"
135
+ content="//footer[@id='portal-footer-wrapper']/*[not(@class='row')]"
136
+ />
137
+
138
+ <!-- toolbar -->
139
+ <replace css:theme="#portal-toolbar" css:content="#edit-bar" css:if-not-content=".ajax_load" css:if-content=".userrole-authenticated" />
140
+ <drop css:theme="#portal-toolbar" css:if-content=".userrole-anonymous" />
141
+ <replace css:theme="#anonymous-actions" css:content-children="#portal-personaltools-wrapper" css:if-not-content=".ajax_load" css:if-content=".userrole-anonymous" />
142
+
143
+ </rules>
package/src/index.js ADDED
@@ -0,0 +1 @@
1
+ import "./styles/main.scss"
@@ -0,0 +1,15 @@
1
+ //// VARIABLES
2
+ // ... add your variables here
3
+
4
+
5
+ $plone-link-color: red;
6
+ $enable-roboto-webfont: false;
7
+
8
+ //// IMPORTS
9
+ // Import barceloneta files from node_modules --load-path=node_modules
10
+ @import "@plone/plonetheme-barceloneta-base/scss/barceloneta.scss";
11
+
12
+
13
+ //// STYLES
14
+ // ... add your styles here
15
+
@@ -0,0 +1,169 @@
1
+ const path = require("path");
2
+
3
+ //const { CleanWebpackPlugin } = require("clean-webpack-plugin");
4
+ const MiniCssExtractPlugin = require("mini-css-extract-plugin");
5
+ const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
6
+ const TerserPlugin = require("terser-webpack-plugin");
7
+ const ZipPlugin = require("zip-webpack-plugin");
8
+ const CopyPlugin = require("copy-webpack-plugin");
9
+ const {CleanWebpackPlugin} = require("clean-webpack-plugin");
10
+
11
+ const THEME_ID = "smartweb";
12
+ const BASE_PATH = path.resolve(__dirname, "./src")
13
+
14
+ module.exports = (env, argv) => {
15
+ const mode = argv.mode ? argv.mode : "development";
16
+ const BUNDLE_NAME = `++theme++${THEME_ID}`;
17
+
18
+ return {
19
+ mode: mode,
20
+ entry: [path.resolve(BASE_PATH, "index.js")],
21
+ output: {
22
+ path: path.resolve(__dirname, "./dist"),
23
+ filename: "js/main.js"
24
+ },
25
+ plugins: [
26
+ mode === "production" && new CleanWebpackPlugin(),
27
+ mode === "production" && new CopyPlugin({
28
+ patterns: [
29
+ {from: "*.png", to: "."},
30
+ {from: "*.cfg", to: "."},
31
+ {from: "*.html", to: "."},
32
+ {from: "*.ico", to: "."},
33
+ ],
34
+ }),
35
+ mode === "production" && new ZipPlugin({
36
+ path: '.',
37
+ filename: 'smartweb.zip',
38
+ exclude: [/node_modules/],
39
+ }),
40
+ new MiniCssExtractPlugin({
41
+ filename: "styles/main.min.css",
42
+ }),
43
+ ].filter(Boolean),
44
+ module: {
45
+ rules: [
46
+ {
47
+ test: /\.s[ac]ss$/i,
48
+ use: [
49
+ // In production, creates CSS files
50
+ // In development serve CSS through JS 'with style-loader'
51
+ {
52
+ loader:
53
+ mode === "development"
54
+ ? "style-loader"
55
+ : MiniCssExtractPlugin.loader,
56
+ },
57
+ // Translates CSS into CommonJS
58
+ {
59
+ loader: "css-loader",
60
+ options: {
61
+ sourceMap: mode === "development",
62
+ },
63
+ },
64
+ // Use postcss to add vendor prefixes and various transforms to the css
65
+ {
66
+ loader: "postcss-loader",
67
+ options: {
68
+ sourceMap: mode === "development",
69
+ },
70
+ },
71
+ {
72
+ loader: "sass-loader",
73
+ options: {
74
+ sourceMap: mode === "development",
75
+ },
76
+ },
77
+ ],
78
+ },
79
+ {
80
+ test: /\.css$/i,
81
+ use: [
82
+ // In production, creates CSS files
83
+ // In development serve CSS through JS 'with style-loader'
84
+ {
85
+ loader:
86
+ mode === "development"
87
+ ? "style-loader"
88
+ : MiniCssExtractPlugin.loader,
89
+ },
90
+ // Translates CSS into CommonJS
91
+ {
92
+ loader: "css-loader",
93
+ options: {
94
+ sourceMap: mode === "development",
95
+ },
96
+ },
97
+ ],
98
+ },
99
+ {
100
+ // Use @svgr/webpack to import svg directly in .js files
101
+ test: /\.svg$/i,
102
+ issuer: /\.(js|mjs|jsx|ts|tsx)$/,
103
+ loader: "@svgr/webpack",
104
+ },
105
+ {
106
+ // Use file-loader to import img files in other files
107
+ test: /\.(png|jpg|gif|jpeg|svg)$/i,
108
+ loader: "file-loader",
109
+ options: {
110
+ name: "[name].[hash].[ext]",
111
+ outputPath: "assets",
112
+ },
113
+ },
114
+ {
115
+ test: /\.(eot|woff|woff2|ttf)([?]?.*)$/,
116
+ loader: "file-loader",
117
+ options: {
118
+ name: "[name].[ext]",
119
+ outputPath: "assets/fonts",
120
+ },
121
+ },
122
+ ],
123
+ },
124
+ optimization: {
125
+ usedExports: true,
126
+ minimizer: [
127
+ new CssMinimizerPlugin(),
128
+ new TerserPlugin({
129
+ parallel: true,
130
+ }),
131
+ ],
132
+ },
133
+ devServer: {
134
+ port: 3000,
135
+ hot: true,
136
+ watchFiles: {
137
+ paths: ["./../**/*.pt"], // Also watch for .pt file change
138
+ },
139
+ // De-comment this when new resources registry is out.
140
+ // Python webresource module adds a integrity token so we need to write to disk so it can be recomputed
141
+ // devMiddleware: {
142
+ // writeToDisk: true,
143
+ //},
144
+
145
+ // Proxy everything to the Plone Backend EXCEPT our bundle as
146
+ // Webpack Dev Server will serve it.
147
+ proxy: [
148
+ {
149
+ context: ["/**", `!**/${BUNDLE_NAME}/**`],
150
+ target: "http://localhost:8080",
151
+ },
152
+ {
153
+ context: [`**/${BUNDLE_NAME}/**`],
154
+ target: "http://localhost:3000",
155
+ pathRewrite: function (path) {
156
+ if (path.includes("++unique++")) {
157
+ // We need to rewrite the path as Plone 5 add some crap timestamp
158
+ // to it and doesn't provide a way of disabling it.
159
+ const reg = /\/\+\+unique\+\+[^/]+/; // Strip ++unique++ part
160
+ path = path.replace(reg, "");
161
+ }
162
+ path = path.split(BUNDLE_NAME)[1]; // Keep only the path after our bundle name
163
+ return path;
164
+ },
165
+ },
166
+ ],
167
+ },
168
+ };
169
+ };