Skip to content
This repository has been archived by the owner on Dec 15, 2023. It is now read-only.

build: dialtone vue styles #936

Merged
merged 3 commits into from
Aug 15, 2023
Merged

build: dialtone vue styles #936

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
0768265
build: concat dialtone-vue styles
juliodialpad Aug 14, 2023
1c55f4c
chore: add blog post
juliodialpad Aug 14, 2023
56ea1d6
chore: update README
juliodialpad Aug 14, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 3 additions & 7 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,13 +10,9 @@ To add Dialtone into your project, you can install it via NPM:
npm install @dialpad/dialtone
```

Once installed, add the following line in your Less file:
Once installed, add the following line in your CSS/LESS file:
```
@import "node_modules/@dialpad/dialtone/lib/build/less/dialtone.less";
```
If you only need access to Dialtone's variables and customizations to build a file and don't need the whole library exported, use this line instead in your Less file:
```
@import (reference) "node_modules/@dialpad/dialtone/lib/build/less/dialtone.less";
@import "node_modules/@dialpad/dialtone/lib/dist/css/dialtone.css";
```

## Building Dialtone locally
Expand All @@ -35,4 +31,4 @@ Requesting a feature or reporting a bug? Please do so at the below links:
- [Report Bug](https://dialpad.atlassian.net/secure/CreateIssue.jspa?issuetype=10878&pid=12428)


Please also feel free to contact us via the [#dialtone slack channel](https://dialpad.slack.com/messages/dialtone/) with any questions
Please also feel free to contact us via the [#dialtone Slack channel](https://dialpad.slack.com/messages/dialtone/) with any questions
1 change: 0 additions & 1 deletion docs/.vuepress/theme/client.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@ import NotFound from './layouts/NotFound.vue';
import './assets/css/dialtone.css';
import './assets/less/dialtone-docs.less';
import './assets/less/dialtone-syntax.less';
import '@/../node_modules/@dialpad/dialtone-vue/dist/style.css';
import { onBeforeMount, provide, ref } from 'vue';

export default defineClientConfig({
Expand Down
34 changes: 34 additions & 0 deletions docs/about/whats-new/posts/2023-8-14.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
---
heading: Dialtone Vue CSS bundled in Dialtone
author: Tico Ortega
posted: '2023-8-14'
---
<!-- Note the date must be in this format YYYY-M-D and wrapped in single quotes -->

<BlogPost :author="$frontmatter.author" :posted="parse($frontmatter.posted, 'y-M-d', new Date())" :heading="$frontmatter.heading">

Hey everyone, I'd like communicate some recent updates to Dialtone's infrastructure.
There is one small breaking change that consumers of Dialtone Vue will need to make after this update.

The Dialtone developers will make this update in Dialpad, but if you maintain an app separate from Dialpad you'll have to make this update yourself.

## Breaking change

Dialtone Vue's CSS file is now bundled into Dialtone's CSS file, so you no longer need to import Dialtone Vue's CSS file into your code, please remove any of the following lines:

```js
import '@dialpad/dialtone-vue/css';
```

or within another css file:

```css
@import 'node_modules/@dialpad/dialtone-vue/dist/style.css';
```

</BlogPost>

<script setup>
import BlogPost from '@baseComponents/BlogPost.vue';
import { parse } from 'date-fns';
</script>
99 changes: 9 additions & 90 deletions gulpfile.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,8 +65,8 @@ const postCSSResponsify = settings.styles
? require('@dialpad/postcss-responsive-variations')({ breakpoints, classes })
: null;
const postCSSDialtoneGenerator = settings.styles ? require('./postcss/dialtone-generators') : null;
const sourcemaps = require('gulp-sourcemaps');
const autoprefixer = require('autoprefixer');
const sourcemaps = settings.styles ? require('gulp-sourcemaps') : null;
const autoprefixer = settings.styles ? require('autoprefixer') : null;

// @@ SVGS
const path = settings.svgs ? require('path') : null;
Expand Down Expand Up @@ -115,6 +115,7 @@ const paths = {
styles: {
inputLib: './lib/build/less/dialtone.less',
outputLib: './lib/dist/css/',
dialtoneVue: './node_modules/@dialpad/dialtone-vue/dist/style.css',
},
svgs: {
sysInput: './lib/build/svg/system/**/*.svg',
Expand Down Expand Up @@ -214,7 +215,9 @@ const libStyles = function (done) {
.pipe(less()) // compile less to css
.pipe(replace('../../fonts/', '../fonts/'))
.pipe(postCSS([postCSSDialtoneGenerator, postCSSResponsify]))
.pipe(src(paths.styles.dialtoneVue))
.pipe(postCSS([autoprefixer()]))
.pipe(concat('dialtone.css'))
.pipe(dest(paths.styles.outputLib))
.pipe(postCSS([postCSSNano]))
.pipe(rename({ suffix: '.min' }))
Expand All @@ -230,12 +233,13 @@ const libStylesDev = function (done) {
.pipe(sourcemaps.init())
.pipe(less()) // compile less to css
.pipe(postCSS([postCSSDialtoneGenerator, postCSSResponsify]))
.pipe(src(paths.styles.dialtoneVue))
.pipe(postCSS([autoprefixer()]))
.pipe(concat('dialtone.css'))
.pipe(sourcemaps.mapSources(function (sourcePath) {
return '../../build/less/' + sourcePath;
}))
.pipe(sourcemaps.write())
.pipe(postCSS([autoprefixer()]))
.pipe(concat('dialtone.css')) // concat the css into a single file
.pipe(dest(paths.styles.outputLib));
};

Expand Down Expand Up @@ -422,89 +426,6 @@ const buildSpotIllustrationSVGs = function (done) {
.pipe(dest(paths.spot.outputVue));
};

// ================================================================================
// @@ FAVICONS
// ================================================================================
// -- Build Favicon Task
// const generateFavicons = (type, input, output) => {
// // Make sure this feature is activated before running
// if (!settings.favicons) return done();
//
// if (type === 'dp') {
// var favInput = paths.favicons.dpInput + input;
// var favOutput = paths.favicons.dpOutput + output;
// }
// else if (type === 'uc') {
// var favInput = paths.favicons.ucInput + input;
// var favOutput = output;
// }
// else if (type === 'docs') {
// var favInput = paths.favicons.docsInput + input;
// var favOutput = output;
// }
//
// return src(favInput)
// .pipe(favicon({
// appName: 'Dialpad',
// appShortName: null,
// appDescription: null,
// developerName: 'Dialpad',
// developerURL: 'https://dialpad.com/',
// background: null,
// theme_color: "#fff",
// url: 'https://dialpad.com/',
// display: 'standalone',
// orientation: 'portrait',
// scope: '/',
// start_url: '/',
// version: null,
// logging: false,
// html: '/',
// pipeHTML: false,
// replace: true,
// pixel_art: true,
// icons: {
// appleStartup: false,
// firefox: false,
// yandex: false
// }
// }))
// .pipe(dest(favOutput));
// };

// // -- ALL THE FAVICONS TO CREATE
// // --------------------------------------------------------------------------------
// // DIALPAD
// // --------------------------------------------------------------------------------
// const faviconDp = () => { return generateFavicons('dp', paths.favicons.dp, 'default/'); }
// const faviconDpNotify = () => { return generateFavicons('dp', paths.favicons.dpNotify, 'default-notify/'); }
//
// // DIALPAD BETA
// // --------------------------------------------------------------------------------
// const faviconDpBeta = () => { return generateFavicons('dp', paths.favicons.dpBeta, 'beta/'); }
// const faviconDpBetaNotify = () => { return generateFavicons('dp', paths.favicons.dpBetaNotify, 'beta/'); }
//
// // DIALPAD CSR
// // --------------------------------------------------------------------------------
// const faviconDpCsr = () => { return generateFavicons('dp', paths.favicons.dpCsr, 'csr/'); }
//
// // DIALPAD STAGING
// // --------------------------------------------------------------------------------
// const faviconDpStaging = () => { return generateFavicons('dp', paths.favicons.dpStaging, 'staging/'); }
// const faviconDpStagingNotify = () => {
// return generateFavicons('dp', paths.favicons.dpStagingNotify, 'staging-notify/');
// }
//
// // UBERCONFERENCE
// // --------------------------------------------------------------------------------
// const faviconUberConference = () => { return generateFavicons('uc', paths.favicons.uc, paths.favicons.ucOutput); }
//
// // DIALTONE
// // --------------------------------------------------------------------------------
// const faviconDialtone = () => {
// return generateFavicons('docs', paths.favicons.docsIcon, paths.favicons.docsOutput);
// }

// ================================================================================
// @@ FONTS
// ================================================================================
Expand Down Expand Up @@ -688,9 +609,7 @@ exports.docsite = series(
exports.clean,
webfonts,
exports.svg,
parallel(
libStyles,
),
libStyles,
buildDocs,
copyNoJekyll,
);
Expand Down
13 changes: 7 additions & 6 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -126,6 +126,7 @@
"gulp-svgmin": "^4.1.0",
"husky": "^8.0.3",
"jest": "^29.5.0",
"less": "^4.2.0",
"lesshint": "^6.3.7",
"lint-staged": "^13.2.3",
"markdownlint": "^0.29.0",
Expand Down