7 changed files with 180 additions and 109 deletions
@ -0,0 +1,116 @@ |
||||
<!DOCTYPE html> |
||||
<html lang="en"> |
||||
<head> |
||||
<meta charset="UTF-8" /> |
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
||||
<title>Shareon Demo Page</title> |
||||
|
||||
<style> |
||||
body { |
||||
max-width: 800px; |
||||
margin: 0 auto; |
||||
font-family: sans-serif; |
||||
} |
||||
|
||||
code { |
||||
font-family: monospace; |
||||
font-size: 1em; |
||||
} |
||||
|
||||
.shareon.specimen { |
||||
font-weight: 600; |
||||
} |
||||
</style> |
||||
|
||||
<link rel="stylesheet" href="./src/shareon.css" /> |
||||
</head> |
||||
|
||||
<body> |
||||
<main> |
||||
<h1>Shareon Demo Page</h1> |
||||
<section> |
||||
<h2><code><a></code></h2> |
||||
<div class="shareon"> |
||||
<a class="facebook"></a> |
||||
<a class="linkedin"></a> |
||||
<a class="mastodon"></a> |
||||
<a class="messenger" data-fb-app-id="3619024578167617"></a> |
||||
<a class="odnoklassniki"></a> |
||||
<a class="pinterest"></a> |
||||
<a class="pocket"></a> |
||||
<a class="reddit"></a> |
||||
<a class="telegram"></a> |
||||
<a class="twitter"></a> |
||||
<a class="viber"></a> |
||||
<a class="vkontakte"></a> |
||||
<a class="whatsapp"></a> |
||||
</div> |
||||
</section> |
||||
<section> |
||||
<h2><code><button></code></h2> |
||||
<div class="shareon"> |
||||
<button class="facebook"></button> |
||||
<button class="linkedin"></button> |
||||
<button class="mastodon"></button> |
||||
<button class="messenger" data-fb-app-id="3619024578167617"></button> |
||||
<button class="odnoklassniki"></button> |
||||
<button class="pinterest"></button> |
||||
<button class="pocket"></button> |
||||
<button class="reddit"></button> |
||||
<button class="telegram"></button> |
||||
<button class="twitter"></button> |
||||
<button class="viber"></button> |
||||
<button class="vkontakte"></button> |
||||
<button class="whatsapp"></button> |
||||
</div> |
||||
</section> |
||||
<section> |
||||
<h2><code><a></code> with custom params</h2> |
||||
<div |
||||
class="shareon" |
||||
data-title="shareon demo page test" |
||||
data-url="https://demo.shareon.js.org" |
||||
data-text="hey check this out" |
||||
> |
||||
<a class="facebook"></a> |
||||
<a class="linkedin"></a> |
||||
<a class="mastodon" data-via="@NickKaramoff@fosstodon.org"></a> |
||||
<a class="messenger" data-fb-app-id="3619024578167617"></a> |
||||
<a class="odnoklassniki"></a> |
||||
<a class="pinterest"></a> |
||||
<a class="pocket"></a> |
||||
<a class="reddit"></a> |
||||
<a class="telegram"></a> |
||||
<a class="twitter" data-via="nickkaramoff"></a> |
||||
<a class="viber"></a> |
||||
<a class="vkontakte"></a> |
||||
<a class="whatsapp"></a> |
||||
</div> |
||||
</section> |
||||
<section> |
||||
<h2>Specimen</h2> |
||||
<div class="shareon specimen"> |
||||
<a class="facebook">Share</a> |
||||
<a class="linkedin"></a> |
||||
<a class="mastodon">Toot</a> |
||||
<a class="messenger" data-fb-app-id="3619024578167617"></a> |
||||
<a class="odnoklassniki"></a> |
||||
<a class="pinterest">Pin</a> |
||||
<br /> |
||||
<a class="pocket"></a> |
||||
<a class="reddit"></a> |
||||
<a class="telegram"></a> |
||||
<a class="twitter"></a> |
||||
<a class="viber"></a> |
||||
<a class="vkontakte">Отправить</a> |
||||
<a class="whatsapp"></a> |
||||
</div> |
||||
</section> |
||||
</main> |
||||
|
||||
<script type="module"> |
||||
import initializeShareon from "./src/shareon.js"; |
||||
initializeShareon(); |
||||
</script> |
||||
</body> |
||||
</html> |
||||
@ -0,0 +1,21 @@ |
||||
const pkg = require("./package.json"); |
||||
const bannerText = `${pkg.name} v${pkg.version}`; |
||||
|
||||
module.exports = { |
||||
map: { |
||||
inline: false, |
||||
}, |
||||
plugins: [ |
||||
require("postcss-css-variables"), |
||||
require("postcss-calc"), |
||||
require("cssnano")({ |
||||
preset: "default", |
||||
}), |
||||
require("autoprefixer"), |
||||
require("postcss-banner")({ |
||||
banner: bannerText, |
||||
important: true, |
||||
inline: true, |
||||
}), |
||||
], |
||||
}; |
||||
@ -1,91 +0,0 @@ |
||||
import { join, resolve } from "path"; |
||||
|
||||
import buble from "@rollup/plugin-buble"; |
||||
import strip from "@rollup/plugin-strip"; |
||||
import postcss from "rollup-plugin-postcss"; |
||||
import { terser } from "rollup-plugin-terser"; |
||||
|
||||
const autoprefixer = require("autoprefixer"); |
||||
const banner = require("postcss-banner"); |
||||
const calc = require("postcss-calc"); |
||||
const cssnano = require("cssnano"); |
||||
const cssVariables = require("postcss-css-variables"); |
||||
|
||||
const pkg = require("./package.json"); |
||||
|
||||
const isDev = |
||||
process.env.ROLLUP_WATCH || process.env.NODE_ENV === "development"; |
||||
const outputDir = resolve(".", "dist"); |
||||
const bannerText = `${pkg.name} v${pkg.version}`; |
||||
|
||||
const postcssPlugins = [cssVariables, calc]; |
||||
|
||||
if (!isDev) { |
||||
postcssPlugins.push( |
||||
cssnano({ |
||||
preset: "default", |
||||
}), |
||||
autoprefixer(), |
||||
banner({ |
||||
banner: bannerText, |
||||
important: true, |
||||
inline: true, |
||||
}) |
||||
); |
||||
} |
||||
|
||||
const getPlugins = (css) => [ |
||||
css && |
||||
postcss({ |
||||
extract: resolve(join(outputDir, "shareon.min.css")), |
||||
plugins: postcssPlugins, |
||||
}), |
||||
!isDev && |
||||
strip({ |
||||
debugger: true, |
||||
include: ["**/*.js"], |
||||
functions: ["console.log", "console.debug", "assert.*"], |
||||
sourceMap: false, |
||||
}), |
||||
!isDev && |
||||
buble({ |
||||
transforms: { |
||||
modules: false, |
||||
}, |
||||
}), |
||||
]; |
||||
|
||||
const getOutput = (baseDir) => { |
||||
const defaultParameters = { |
||||
name: pkg.name, |
||||
exports: "default", |
||||
}; |
||||
|
||||
return [ |
||||
{ |
||||
...defaultParameters, |
||||
format: "iife", |
||||
file: join(baseDir, `${pkg.name}${isDev ? "" : ".min"}.js`), |
||||
plugins: isDev ? [] : [terser({ output: { comments: /^!/ } })], |
||||
banner: `/*! ${bannerText} */`, |
||||
}, |
||||
!isDev && { |
||||
...defaultParameters, |
||||
format: "cjs", |
||||
file: join(baseDir, `${pkg.name}.cjs`), |
||||
banner: `/*! ${bannerText} */`, |
||||
}, |
||||
!isDev && { |
||||
...defaultParameters, |
||||
format: "esm", |
||||
file: join(baseDir, `${pkg.name}.mjs`), |
||||
banner: `/*! ${bannerText} */`, |
||||
}, |
||||
]; |
||||
}; |
||||
|
||||
export default { |
||||
input: join(__dirname, "src", "index.js"), |
||||
output: getOutput(outputDir), |
||||
plugins: getPlugins(true), |
||||
}; |
||||
@ -0,0 +1,24 @@ |
||||
import { defineConfig } from "vite"; |
||||
import * as path from "path"; |
||||
import pkg from "./package.json"; |
||||
|
||||
export default defineConfig({ |
||||
esbuild: { |
||||
minify: true, |
||||
}, |
||||
build: { |
||||
sourcemap: true, |
||||
target: "esnext", |
||||
minify: "terser", |
||||
lib: { |
||||
entry: path.resolve("./src/index.js"), |
||||
name: "Shareon", |
||||
formats: ["es", "umd", "iife"], |
||||
}, |
||||
rollupOptions: { |
||||
output: { |
||||
banner: `/*! ${pkg.name} v${pkg.version} */`, |
||||
}, |
||||
}, |
||||
}, |
||||
}); |
||||
Loading…
Reference in new issue