Skip to content

Commit

Permalink
docs(readme): Update repos
Browse files Browse the repository at this point in the history
  • Loading branch information
anibalsanchez committed Aug 9, 2020
1 parent 2b20cdb commit bb899c3
Show file tree
Hide file tree
Showing 6 changed files with 22 additions and 110 deletions.
2 changes: 1 addition & 1 deletion .env
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ EXTENSION_DESC=XT Tailwind - My Blog template, based on Tailwind CSS.
EXTENSION_CDN=http://cdn.extly.com
TRANSLATION_KEY=XTTAILWIND

RELEASE_VERSION=3.7.0
RELEASE_VERSION=4.0.0

LICENSE=GNU General Public License version 3 or later; see LICENSE.txt
LICENSE_CODE=GNU/GPLv3 www.gnu.org/licenses/gpl-3.0.html
Expand Down
118 changes: 14 additions & 104 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,10 +8,12 @@ For future reference:

**Prerequisites**: Before you use this template, you must install [Node.js](https://nodejs.org/).

The project has two levels:
The project has two repositories:

- The Joomla extension build files at the `root` folder
- The Tailwind template in the `template` folder
- **The Joomla extension build files**, in this repository: [anibalsanchez/xt-tailwind-css](https://github.com/anibalsanchez/XT-Tailwind-for-Joomla)
- **The Tailwind template itself**, in this repository: [anibalsanchez/xt-tailwind-for-joomla-template](https://github.com/anibalsanchez/xt-tailwind-for-joomla-template). The dependency is managed with the composer plugin [mnsami/composer-custom-directory-installer](https://github.com/mnsami/composer-custom-directory-installer) to download the template files in the the `template` folder.

To develop and design in the context of the template, please go to [anibalsanchez/xt-tailwind-for-joomla-template](https://github.com/anibalsanchez/xt-tailwind-for-joomla-template).

## The Joomla extension build files

Expand All @@ -25,117 +27,25 @@ npm install
npm run build
```

As an alternative, there is a script with everything that must be done for each build:
There is a also a script with everything that must be done for each build to be sure that everything is updated to the latest version:

```bash
./build/build_core.sh
```

These steps create the installable package in the `build/release` directory.

The original XT build files, used to manage the extension development, can be found here [anibalsanchez/extly-buildfiles-for-joomla](https://github.com/anibalsanchez/extly-buildfiles-for-joomla).

## The Tailwind template

Tailwind CSS framework is used in the development context of [Node.js](https://nodejs.org/en/). So, Node.js must be installed to continue.

The Tailwind template can be executed in the following modes:

- Development Mode
- Proxy Server Mode for Joomla
- Development Build
- Production Build

### Development Mode

From the source (src/) directory, the live server is executed to design the template interactively. The objective of this mode is to create as many HTML files as necessary to develop the prototypes. In our case:

- Blog Home Page, index.html
- Blog Post, blog-post.html

The HTML pages must be declared in `webpack.config.js`.

To get started, clone the project and install the dependencies:

```bash
# Access to the repo folder where the template is developed
cd template
# Using npm
npm install
```

After the dependencies installation step, start the Webpack Development Server:

```bash
cd template
npm i
npm run dev
```

The page is rendered here `http://localhost:8080/`.

Webpack Development Server will watch `/src/styles.css` and `/tailwind.config.js` and rebuild your stylesheet on every change. You can play around with `/src/index.html` (or the rest of the pages) to design the template.

### Proxy Server Mode for Joomla

Beyond the basic development alternatives, now I'm adding the choice to develop the template in **Proxy Server Mode**. In the proxy mode, the Tailwind CSS template can be installed on the Joomla site and reloaded automatically from Joomla and tested dynamically.

So, first, create the template as an installable extension:

```bash
cd template
npm i
npm run prod
```
The original XT build files, used to build the extension, can be found here [anibalsanchez/extly-buildfiles-for-joomla](https://github.com/anibalsanchez/extly-buildfiles-for-joomla).

Then, zip all files (exclude the node_modules folder), install it on the Joomla site, and adjust the proxy `proxyURL` in the installed `templates/xttailwind/package.json`:

```bash
"config": {
"proxyURL": "http://jed.lndo.site/index.php"
}
```

On our development server, the site runs on `http://jed.lndo.site/index.php`. Finally, execute the command to activate the Webpack development proxy. After the proxy is active, the generated site is rendered on `http://localhost:3000/index.php` so you can change the source style interactively in `templates/xttailwind/src` and navigate the final output simultaneously.

```bash
# Access to the site folder where the template is developed in Proxy Mode
cd templates/xttailwind
npm i
npm run dev-proxy
```

When you are done, remember to copy the changes back from the site to the repository and commit to making them permanent. Of course, if the repository is mapped to the site, you can commit the changes.

### Development Build

This is almost the final step. It compiles all files, but it does not compress and optimize the styles. It is useful to test the template on different sites.

```bash
npm i
npm run dev-build
```

After that, you will have a ready to deploy bundle at `/dist`. Then, zip all files (exclude the node_modules folder), and install it on a Joomla site.

### Production Build

This is the final step to produce the compressed and optimized template. To build a production bundle run:

```bash
npm i
npm run prod
```

After that, you will have a ready to deploy bundle at `/dist`. Then, zip all files (exclude the node_modules folder) and install it on a Joomla site.

To build everything and produce the installable template:
## Changelog

```bash
./build/build_core.sh
```
### 4.0.0

## Changelog
- Reorganization of the project in two repositories
- Update @tailwindcss/custom-forms 0.2.1
- Update @tailwindcss/typography 0.2.0
- Update @tailwindcss/ui 0.5.0
- Update Tailwind CSS 1.6.2

### 3.7.0

Expand Down
2 changes: 2 additions & 0 deletions build/build_core.sh
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
#!/bin/sh

composer update

cd template
npm i
npm run prod
Expand Down
2 changes: 1 addition & 1 deletion composer.json
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,7 @@
"minimum-stability": "dev",
"prefer-stable": true,
"scripts": {
"post-update-cmd": [
"disabled_post-update-cmd": [
"composer normalize"
]
}
Expand Down
4 changes: 2 additions & 2 deletions library/lib_xttailwind.xml
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,8 @@
<extension method="upgrade" type="library" version="1.0">
<name>XT Tailwind CSS Library</name>
<libraryname>xttailwind</libraryname>
<version>3.7.0</version>
<creationDate>2020-08-08</creationDate>
<version>4.0.0</version>
<creationDate>2020-08-09</creationDate>

<author>Extly, CB</author>
<authorEmail>[email protected]</authorEmail>
Expand Down
4 changes: 2 additions & 2 deletions package/pkg_xttailwind.xml
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,8 @@
<packagerurl>https://www.extly.com</packagerurl>
<name>XT Tailwind CSS</name>
<description>XT Tailwind - My Blog template, based on Tailwind CSS.</description>
<version>3.7.0</version>
<creationDate>2020-08-08</creationDate>
<version>4.0.0</version>
<creationDate>2020-08-09</creationDate>

<author>Extly, CB</author>
<authorEmail>[email protected]</authorEmail>
Expand Down

0 comments on commit bb899c3

Please sign in to comment.