chore: update website
* display tweets * big github button * display new users
This commit is contained in:
Juan Picado @jotadeveloper
parent
62d30333d8
commit
78ef24d79b
|
|
@ -8,7 +8,7 @@ The verdaccio CLI is your go start the application.
|
|||
## Commands
|
||||
|
||||
```bash
|
||||
$ verdaccio --listen 4000 --config ~./config.yaml
|
||||
verdaccio --listen 4000 --config ~./config.yaml
|
||||
```
|
||||
|
||||
Command | Default | Example | Description
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@
|
|||
"ansible": "Installing with Ansible",
|
||||
"authentification": "Authentification",
|
||||
"build": "Build the source code",
|
||||
"chef": "Chef Cookbook",
|
||||
"ci": "Continuous Integration",
|
||||
"cli": "Command Line Tool",
|
||||
"configuration": "Configuration File",
|
||||
|
|
@ -22,6 +23,7 @@
|
|||
"packages": "Package Access",
|
||||
"plugins": "Plugins",
|
||||
"protect-your-dependencies": "Protecting packages",
|
||||
"puppet": "Puppet",
|
||||
"source-code": "Source Code",
|
||||
"reverse-proxy": "Reverse Proxy Setup",
|
||||
"server-configuration": "Server Configuration",
|
||||
|
|
@ -61,10 +63,8 @@
|
|||
"This project is maintained by the Verdaccio community.|no description given": "This project is maintained by the Verdaccio community.",
|
||||
"Get Started|no description given": "Get Started",
|
||||
"Contribute|no description given": "Contribute",
|
||||
"Easy to Install|no description given": "Easy to Install",
|
||||
"Easy to Set Up|no description given": "Easy to Set Up",
|
||||
"Easy to Use|no description given": "Easy to Use",
|
||||
"That’s it ! Enjoy your private package manager.|no description given": "That’s it ! Enjoy your private package manager.",
|
||||
"Many great developers are already enjoying Verdaccio, join the community!|no description given": "Many great developers are already enjoying Verdaccio, join the community!",
|
||||
"**npm**, **yarn** and **pnpm** are part of any development workflow we try to catch up with the latest updates.|no description given": "**npm**, **yarn** and **pnpm** are part of any development workflow we try to catch up with the latest updates.",
|
||||
"The most popular npm clients are supported|no description given": "The most popular npm clients are supported",
|
||||
"We have an official **Docker** image ready to use|no description given": "We have an official **Docker** image ready to use",
|
||||
|
|
@ -81,6 +81,12 @@
|
|||
"Add your company|no description given": "Add your company",
|
||||
"Help Translate|recruit community translators for your project": "Help Translate",
|
||||
"Edit this Doc|recruitment message asking to edit the doc source": "Edit",
|
||||
"Translate this Doc|recruitment message asking to translate the docs": "Translate"
|
||||
"Translate this Doc|recruitment message asking to translate the docs": "Translate",
|
||||
"Many great developers are already enjoying Verdaccio, join the club!|no description given": "Many great developers are already enjoying Verdaccio, join the club!",
|
||||
"Easy to Install|no description given": "Easy to Install",
|
||||
"Easy to Set Up|no description given": "Easy to Set Up",
|
||||
"Easy to Use|no description given": "Easy to Use",
|
||||
"What developers are saying|no description given": "What developers are saying",
|
||||
"Many great developers are already enjoying Verdaccio, join the community!": "Many great developers are already enjoying Verdaccio, join the community!"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
{
|
||||
"version": "3.2.0",
|
||||
"scripts": {
|
||||
"examples": "docusaurus-examples",
|
||||
"examples": "verdaccio-website",
|
||||
"start": "docusaurus-start",
|
||||
"build": "docusaurus-build",
|
||||
"publish-gh-pages": "docusaurus-publish",
|
||||
|
|
@ -8,6 +9,7 @@
|
|||
"version": "docusaurus-version",
|
||||
"rename-version": "docusaurus-rename-version"
|
||||
},
|
||||
"license": "MIT",
|
||||
"devDependencies": {
|
||||
"docusaurus": "1.2.0"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,21 +1,78 @@
|
|||
/**
|
||||
* Copyright (c) 2017-present, Facebook, Inc.
|
||||
*
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*/
|
||||
|
||||
const React = require('react');
|
||||
|
||||
const CompLibrary = require('../../core/CompLibrary.js');
|
||||
const translate = require("../../server/translate.js").translate;
|
||||
const translation = require('../../server/translation.js');
|
||||
const MarkdownBlock = CompLibrary.MarkdownBlock; /* Used to read markdown */
|
||||
const Container = CompLibrary.Container;
|
||||
const GridBlock = CompLibrary.GridBlock;
|
||||
|
||||
const siteConfig = require(process.cwd() + '/siteConfig.js');
|
||||
|
||||
class TweetsSection extends React.Component {
|
||||
render() {
|
||||
return(
|
||||
<div className="tweets-section">
|
||||
<div>
|
||||
{this.renderTweetUpRight()}
|
||||
</div>
|
||||
<div>
|
||||
{this.renderTweetUpLeft()}
|
||||
</div>
|
||||
<div>
|
||||
{this.renderTweetDownRight()}
|
||||
</div>
|
||||
<div>
|
||||
{this.renderTweetDownLeft()}
|
||||
</div>
|
||||
</div>);
|
||||
}
|
||||
|
||||
renderTweetUpRight() {
|
||||
return (<blockquote className="twitter-tweet" data-cards="hidden" data-lang="es"><p lang="en" dir="ltr">In a world
|
||||
where <a href="https://twitter.com/npmjs?ref_src=twsrc%5Etfw">@npmjs</a> and other core infrastructure fully
|
||||
embraced the "move fast and break things" mindset, it's great to see other people care deeply about
|
||||
stability. <a href="https://t.co/uVk7xFeiwU">https://t.co/uVk7xFeiwU</a> "just works" and has saved us
|
||||
countless headaches. Thanks <a href="https://twitter.com/verdaccio_npm?ref_src=twsrc%5Etfw">@verdaccio_npm</a> !
|
||||
</p>— Sheet JS (@SheetJS) <a
|
||||
href="https://twitter.com/SheetJS/status/1002609907370250241?ref_src=twsrc%5Etfw">1 de junio de 2018</a>
|
||||
</blockquote>);
|
||||
}
|
||||
|
||||
renderTweetUpLeft() {
|
||||
return (
|
||||
<blockquote className="twitter-tweet" data-lang="es"><p lang="en" dir="ltr">Woke up to <a
|
||||
href="https://twitter.com/timer150?ref_src=twsrc%5Etfw">@timer150</a> fixing end-to-end test flakiness in Create
|
||||
React App 👏 Background: we have a Lerna monorepo and used very complex hacks for integration testing of
|
||||
generated projects. Solution: run a local npm registry to simulate a publish 😁 <a
|
||||
href="https://t.co/ggNfS4PpFv">https://t.co/ggNfS4PpFv</a></p>— Dan Abramov (@dan_abramov) <a
|
||||
href="https://twitter.com/dan_abramov/status/951427300070916096?ref_src=twsrc%5Etfw">11 de enero de 2018</a>
|
||||
</blockquote>);
|
||||
}
|
||||
|
||||
renderTweetDownRight() {
|
||||
return (
|
||||
<blockquote className="twitter-tweet" data-lang="es"><p lang="en" dir="ltr">Verdaccio is my personal hero. A
|
||||
lightweight npm registry & cache. Just two commands to install + use it. <a
|
||||
href="https://twitter.com/hashtag/incredibile?src=hash&ref_src=twsrc%5Etfw">#incredibile</a> <a
|
||||
href="https://t.co/X0uNgS6UMz">https://t.co/X0uNgS6UMz</a></p>— Manfred Steyer (@ManfredSteyer) <a
|
||||
href="https://twitter.com/ManfredSteyer/status/1002153128140136448?ref_src=twsrc%5Etfw">31 de mayo de 2018</a>
|
||||
</blockquote>)
|
||||
}
|
||||
|
||||
renderTweetDownLeft() {
|
||||
return (
|
||||
<blockquote className="twitter-tweet" data-conversation="none" data-cards="hidden" data-lang="es">
|
||||
<p lang="en" dir="ltr">
|
||||
<a href="https://twitter.com/verdaccio_npm?ref_src=twsrc%5Etfw">@verdaccio_npm</a> is a pretty good open-source
|
||||
tool and seems to be growing. We're currently using them at NodeSource for some internal caching and
|
||||
modules, and are happy so far. Easy to setup for both business and use.<br/><br/>🔗
|
||||
<a href="https://t.co/ow5JRgZYrU">https://t.co/ow5JRgZYrU</a>
|
||||
</p>— Tierney Cyren (@bitandbang) <a
|
||||
href="https://twitter.com/bitandbang/status/1001297542779424768?ref_src=twsrc%5Etfw">29 de mayo de 2018</a>
|
||||
</blockquote>);
|
||||
}
|
||||
}
|
||||
|
||||
class Button extends React.Component {
|
||||
render() {
|
||||
return (
|
||||
|
|
@ -32,6 +89,32 @@ Button.defaultProps = {
|
|||
target: '_self',
|
||||
};
|
||||
|
||||
class HeaderButtons extends React.Component {
|
||||
buildUrl(relativePath) {
|
||||
return `${siteConfig.baseUrl}docs/${this.props.language}${relativePath}`;
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div className="pluginRowBlock">
|
||||
<Button href={this.buildUrl('/what-is-verdaccio.html')}>
|
||||
<translate>
|
||||
Get Started
|
||||
</translate>
|
||||
</Button>
|
||||
<Button href="https://github.com/verdaccio">
|
||||
Github
|
||||
</Button>
|
||||
<Button href={this.buildUrl('/contributing.html')}>
|
||||
<translate>
|
||||
Contribute
|
||||
</translate>
|
||||
</Button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
class HomeSplash extends React.Component {
|
||||
render() {
|
||||
return (
|
||||
|
|
@ -39,57 +122,27 @@ class HomeSplash extends React.Component {
|
|||
<div className="homeSplashFade">
|
||||
<div className="wrapper homeWrapper">
|
||||
<div className="inner">
|
||||
<h2 className="projectTitle">
|
||||
<img title={siteConfig.title} src={siteConfig.baseUrl + 'img/verdaccio@2x.png'} />
|
||||
<h1 className="projectTitle">
|
||||
<img title={siteConfig.title} alt={siteConfig.title} src={siteConfig.baseUrl + 'img/verdaccio@2x.png'} />
|
||||
<small>
|
||||
{
|
||||
translation[this.props.language]['localized-strings']
|
||||
.tagline
|
||||
translation[this.props.language]['localized-strings'].tagline
|
||||
}
|
||||
</small>
|
||||
</h2>
|
||||
</h1>
|
||||
<div className="section promoSection">
|
||||
<div className="promoRow">
|
||||
<div className="pluginRowBlock">
|
||||
<Button
|
||||
href={
|
||||
siteConfig.baseUrl +
|
||||
'docs/' +
|
||||
this.props.language +
|
||||
'/what-is-verdaccio.html'
|
||||
}>
|
||||
<translate>
|
||||
Get Started
|
||||
</translate>
|
||||
</Button>
|
||||
<Button href="https://github.com/verdaccio">Github</Button>
|
||||
<Button
|
||||
href={
|
||||
siteConfig.baseUrl +
|
||||
'docs/' +
|
||||
this.props.language +
|
||||
'/contributing.html'
|
||||
}>
|
||||
<translate>
|
||||
Contribute
|
||||
</translate>
|
||||
</Button>
|
||||
</div>
|
||||
<HeaderButtons language={this.props.language}/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="githubButton" style={{minHeight: '20px'}}>
|
||||
<a
|
||||
className="github-button"
|
||||
href={siteConfig.repoUrl}
|
||||
data-icon="octicon-star"
|
||||
data-count-href="/verdaccio/verdaccio/stargazers"
|
||||
data-show-count={true}
|
||||
data-count-aria-label="# stargazers on GitHub"
|
||||
aria-label="Star verdaccio/verdaccio on GitHub"
|
||||
>
|
||||
Star
|
||||
</a>
|
||||
</div>
|
||||
<iframe
|
||||
src={"https://ghbtns.com/github-btn.html?user=verdaccio&repo=verdaccio&type=star&count=true&size=large"}
|
||||
frameBorder="0"
|
||||
scrolling="0"
|
||||
width="160px"
|
||||
height="30px"
|
||||
style={{marginTop: '8px'}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -98,6 +151,32 @@ class HomeSplash extends React.Component {
|
|||
}
|
||||
}
|
||||
|
||||
const FeatureSection = () => (
|
||||
<GridBlock
|
||||
align="center"
|
||||
contents={[
|
||||
{
|
||||
content: '```bash\n' +
|
||||
'npm install --global verdaccio'
|
||||
}
|
||||
]}
|
||||
layout="twoColumn"
|
||||
/>
|
||||
);
|
||||
|
||||
const MiddleTitle = (props) => {
|
||||
return (
|
||||
<div className="productShowcaseSection paddingBottom"
|
||||
style={{textAlign: 'center'}}>
|
||||
<h2>
|
||||
{props.children}
|
||||
</h2>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
|
||||
class Index extends React.Component {
|
||||
render() {
|
||||
let language = this.props.language || 'en';
|
||||
|
|
@ -108,7 +187,7 @@ class Index extends React.Component {
|
|||
.map(user => {
|
||||
return (
|
||||
<a href={user.infoLink}>
|
||||
<img src={user.image} title={user.caption} />
|
||||
<img src={user.image} alt={user.caption} title={user.caption} />
|
||||
</a>
|
||||
);
|
||||
});
|
||||
|
|
@ -117,51 +196,22 @@ class Index extends React.Component {
|
|||
<div>
|
||||
<HomeSplash language={language} />
|
||||
<div className="mainContainer">
|
||||
<Container padding={['bottom', 'top']}>
|
||||
<GridBlock
|
||||
align="center"
|
||||
contents={[
|
||||
{
|
||||
content: '```bash\n' +
|
||||
'$> npm install --global verdaccio \n' +
|
||||
'$> yarn global add verdaccio\n' +
|
||||
'```',
|
||||
title: <translate>Easy to Install</translate>,
|
||||
},
|
||||
{
|
||||
content: '```bash\n' +
|
||||
'$> npm set registry http://localhost:4873 \n' +
|
||||
'$> npm adduser --registry http://localhost:4873\n' +
|
||||
'```',
|
||||
title: <translate>Easy to Set Up</translate>,
|
||||
}
|
||||
]}
|
||||
layout="fourColumn"
|
||||
/>
|
||||
<Container padding={['top']}>
|
||||
<FeatureSection/>
|
||||
</Container>
|
||||
|
||||
<div
|
||||
className="productShowcaseSection paddingBottom"
|
||||
style={{textAlign: 'center'}}>
|
||||
<h2>
|
||||
<translate>
|
||||
Easy to Use
|
||||
</translate>
|
||||
</h2>
|
||||
<MarkdownBlock>
|
||||
```bash

|
||||
$> verdaccio 

|
||||
warn --- config file - /home/.config/verdaccio/config.yaml 

|
||||
warn --- http address - http://localhost:4873/ - verdaccio/3.0.0

|
||||
```
|
||||
</MarkdownBlock>
|
||||
<h2>
|
||||
<MiddleTitle>
|
||||
<translate>
|
||||
That’s it ! Enjoy your private package manager.
|
||||
</translate>
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
</MiddleTitle>
|
||||
<Container>
|
||||
<TweetsSection/>
|
||||
</Container>
|
||||
<MiddleTitle>
|
||||
<translate>
|
||||
Many great developers are already enjoying Verdaccio, join the community!
|
||||
</translate>
|
||||
</MiddleTitle>
|
||||
<Container padding={['bottom', 'top']} background="light">
|
||||
<GridBlock
|
||||
contents={[
|
||||
|
|
@ -169,6 +219,7 @@ class Index extends React.Component {
|
|||
content: <translate>**npm**, **yarn** and **pnpm** are part of any development workflow
|
||||
we try to catch up with the latest updates.</translate>,
|
||||
image: siteConfig.baseUrl + 'img/package_managers_grey.png',
|
||||
imageAlt: 'The most popular npm clients are supported',
|
||||
imageAlign: 'right',
|
||||
title: <translate>The most popular npm clients are supported</translate>,
|
||||
},
|
||||
|
|
|
|||
|
|
@ -9,17 +9,45 @@
|
|||
const users = [
|
||||
{
|
||||
caption: "Filiosoft",
|
||||
image: "/img/filiosoft.png",
|
||||
image: "/img/users/filiosoft.png",
|
||||
infoLink: "https://filiosoft.com/",
|
||||
fbOpenSource: false,
|
||||
pinned: false,
|
||||
},
|
||||
{
|
||||
caption: "SheetJS",
|
||||
image: "/img/sheetjs.png",
|
||||
image: "/img/users/sheetjs.png",
|
||||
infoLink: "https://sheetjs.com/",
|
||||
fbOpenSource: false,
|
||||
pinned: true,
|
||||
},
|
||||
{
|
||||
caption: "Mozilla Neutrino",
|
||||
image: "/img/users/neutrino.png",
|
||||
infoLink: "https://neutrinojs.org/",
|
||||
fbOpenSource: false,
|
||||
pinned: true,
|
||||
},
|
||||
{
|
||||
caption: "pnpm",
|
||||
image: "/img/users/pnpm.svg",
|
||||
infoLink: "https://pnpm.js.org/",
|
||||
fbOpenSource: false,
|
||||
pinned: true,
|
||||
},
|
||||
{
|
||||
caption: "nodesource",
|
||||
image: "/img/users/nodesource.jpg",
|
||||
infoLink: "https://nodesource.com/",
|
||||
fbOpenSource: false,
|
||||
pinned: true,
|
||||
},
|
||||
{
|
||||
caption: "Strapi",
|
||||
image: "/img/users/strapijs.jpg",
|
||||
infoLink: "https://strapi.io/",
|
||||
fbOpenSource: false,
|
||||
pinned: true,
|
||||
}
|
||||
];
|
||||
|
||||
|
|
@ -33,31 +61,28 @@ const siteConfig = {
|
|||
baseUrl: '/' /* base url for your project */,
|
||||
projectName: 'verdaccio',
|
||||
headerLinks: [
|
||||
{doc: 'installation', label: 'Docs'},
|
||||
{page: 'help', label: 'Help'},
|
||||
{ doc: 'installation', label: 'Docs'},
|
||||
{ page: 'help', label: 'Help'},
|
||||
{ href: "https://medium.com/verdaccio", label: 'Blog'},
|
||||
{ href: "https://github.com/verdaccio", label: "GitHub" }
|
||||
],
|
||||
users,
|
||||
/* path to images for header/footer */
|
||||
headerIcon: 'img/verdaccio-tiny.png',
|
||||
footerIcon: 'img/verdaccio-blackwhite.png',
|
||||
favicon: 'img/favicon.ico',
|
||||
/* colors for website */
|
||||
colors: {
|
||||
primaryColor: '#4B5E40',
|
||||
secondaryColor: '#205C3B',
|
||||
},
|
||||
translationRecruitingLink: 'https://crowdin.com/project/verdaccio',
|
||||
// This copyright info is used in /core/Footer.js and blog rss/atom feeds.
|
||||
copyright:
|
||||
'Copyright © ' +
|
||||
new Date().getFullYear() +
|
||||
' Verdaccio community',
|
||||
'Copyright © ' + new Date().getFullYear() + ' Verdaccio community',
|
||||
// organizationName: 'deltice', // or set an env variable ORGANIZATION_NAME
|
||||
// projectName: 'test-site', // or set an env variable PROJECT_NAME
|
||||
usePrism: ['jsx'],
|
||||
highlight: {
|
||||
// Highlight.js theme to use for syntax highlighting in code blocks
|
||||
theme: 'default',
|
||||
theme: 'atom-one-dark',
|
||||
},
|
||||
algolia: {
|
||||
apiKey: 'a8b4d117e513cd8d71d6a95e3d9d4a91',
|
||||
|
|
@ -65,9 +90,21 @@ const siteConfig = {
|
|||
},
|
||||
gaTrackingId: 'UA-2527438-21',
|
||||
twitter: true,
|
||||
scripts: ['https://buttons.github.io/buttons.js'],
|
||||
scripts: [
|
||||
'https://buttons.github.io/buttons.js',
|
||||
'https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.0/clipboard.min.js',
|
||||
'/js/code-blocks-buttons.js',
|
||||
],
|
||||
stylesheets: [
|
||||
'/css/code-blocks-buttons.css',
|
||||
],
|
||||
// You may provide arbitrary config keys to be used as needed by your template.
|
||||
repoUrl: 'https://github.com/verdaccio/verdaccio',
|
||||
cleanUrl: true,
|
||||
scrollToTop: true,
|
||||
scrollToTopOptions: {
|
||||
zIndex: 100,
|
||||
},
|
||||
};
|
||||
|
||||
module.exports = siteConfig;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,39 @@
|
|||
/* "Copy" code block button */
|
||||
pre {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
pre .btnIcon {
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
z-index: 2;
|
||||
cursor: pointer;
|
||||
border: 1px solid transparent;
|
||||
padding: 0;
|
||||
color: #fff;
|
||||
background-color: transparent;
|
||||
height: 30px;
|
||||
transition: all .25s ease-out;
|
||||
}
|
||||
|
||||
pre .btnIcon:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.btnIcon__body {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.btnIcon svg {
|
||||
fill: currentColor;
|
||||
margin-right: .4em;
|
||||
}
|
||||
|
||||
.btnIcon__label {
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.btnClipboard {
|
||||
right: 10px;
|
||||
}
|
||||
|
|
@ -1,5 +1,10 @@
|
|||
/* your custom css */
|
||||
|
||||
/*.mainContainer .wrapper code {*/
|
||||
/*padding: 2px;*/
|
||||
/*font-family: inherit;*/
|
||||
/*}*/
|
||||
|
||||
.mainContainer .wrapper a,
|
||||
.inner .projectIntro a {
|
||||
background-color: rgba(10, 78, 31, 0.15);
|
||||
|
|
@ -18,17 +23,36 @@
|
|||
margin-left: initial;
|
||||
}
|
||||
|
||||
@media only screen and (min-device-width: 360px) and (max-device-width: 736px) {
|
||||
.tweets-section {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 1024px) {
|
||||
.tweets-section > div {
|
||||
padding: 20px;
|
||||
flex: 2;
|
||||
box-sizing:border-box;
|
||||
text-align: center;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1023px) {
|
||||
.tweets-section > div .twitter-tweet {
|
||||
margin: 0 auto !important;
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 1400px) {
|
||||
}
|
||||
/*@media only screen and (min-device-width: 360px) and (max-device-width: 736px) {*/
|
||||
/*}*/
|
||||
|
||||
@media only screen and (min-width: 1500px) {
|
||||
}
|
||||
/*@media only screen and (min-width: 1024px) {*/
|
||||
/*}*/
|
||||
|
||||
/*@media only screen and (max-width: 1023px) {*/
|
||||
/*}*/
|
||||
|
||||
/*@media only screen and (min-width: 1400px) {*/
|
||||
/*}*/
|
||||
|
||||
/*@media only screen and (min-width: 1500px) {*/
|
||||
/*}*/
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 16 KiB After Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
|
|
@ -0,0 +1,3 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid meet" viewBox="76.58987244897958 44 164.00775510204068 164" width="160.01" height="160"><defs><path d="M237.6 95L187.6 95L187.6 45L237.6 45L237.6 95Z" id="a7nkpY5fFy"></path><path d="M182.59 95L132.59 95L132.59 45L182.59 45L182.59 95Z" id="b21kvNK4d7"></path><path d="M127.59 95L77.59 95L77.59 45L127.59 45L127.59 95Z" id="en4AbanYM"></path><path d="M237.6 150L187.6 150L187.6 100L237.6 100L237.6 150Z" id="a3fjOVtiTl"></path><path d="M182.59 150L132.59 150L132.59 100L182.59 100L182.59 150Z" id="ceoxWhMH1"></path><path d="M182.59 205L132.59 205L132.59 155L182.59 155L182.59 205Z" id="a6qEju1"></path><path d="M237.6 205L187.6 205L187.6 155L237.6 155L237.6 205Z" id="adUpTWfSm"></path><path d="M127.59 205L77.59 205L77.59 155L127.59 155L127.59 205Z" id="b1mjaQmkkR"></path></defs><g><g><use xlink:href="#a7nkpY5fFy" opacity="1" fill="#f9ad00" fill-opacity="1"></use></g><g><use xlink:href="#b21kvNK4d7" opacity="1" fill="#f9ad00" fill-opacity="1"></use></g><g><use xlink:href="#en4AbanYM" opacity="1" fill="#f9ad00" fill-opacity="1"></use></g><g><use xlink:href="#a3fjOVtiTl" opacity="1" fill="#f9ad00" fill-opacity="1"></use></g><g><use xlink:href="#ceoxWhMH1" opacity="1" fill="#ffffff" fill-opacity="1"></use></g><g><use xlink:href="#a6qEju1" opacity="1" fill="#ffffff" fill-opacity="1"></use></g><g><use xlink:href="#adUpTWfSm" opacity="1" fill="#ffffff" fill-opacity="1"></use></g><g><use xlink:href="#b1mjaQmkkR" opacity="1" fill="#ffffff" fill-opacity="1"></use></g></g></svg>
|
||||
|
After Width: | Height: | Size: 1.7 KiB |
|
Before Width: | Height: | Size: 94 KiB After Width: | Height: | Size: 94 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
|
|
@ -0,0 +1,47 @@
|
|||
/* global ClipboardJS */
|
||||
|
||||
window.addEventListener('load', function() {
|
||||
function button(label, ariaLabel, icon, className) {
|
||||
const btn = document.createElement('button');
|
||||
btn.classList.add('btnIcon', className);
|
||||
btn.setAttribute('aria-label', ariaLabel);
|
||||
btn.innerHTML =
|
||||
'<div class="btnIcon__body">' +
|
||||
icon +
|
||||
'<strong class="btnIcon__label">' +
|
||||
label +
|
||||
'</strong>' +
|
||||
'</div>' +
|
||||
'</button>';
|
||||
return btn;
|
||||
}
|
||||
|
||||
function addButtons(codeBlockSelector, btn) {
|
||||
document.querySelectorAll(codeBlockSelector).forEach(function(code) {
|
||||
code.parentNode.appendChild(btn.cloneNode(true));
|
||||
});
|
||||
}
|
||||
|
||||
const copyIcon =
|
||||
'<svg width="12" height="12" viewBox="340 364 14 15" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M342 375.974h4v.998h-4v-.998zm5-5.987h-5v.998h5v-.998zm2 2.994v-1.995l-3 2.993 3 2.994v-1.996h5v-1.995h-5zm-4.5-.997H342v.998h2.5v-.997zm-2.5 2.993h2.5v-.998H342v.998zm9 .998h1v1.996c-.016.28-.11.514-.297.702-.187.187-.422.28-.703.296h-10c-.547 0-1-.452-1-.998v-10.976c0-.546.453-.998 1-.998h3c0-1.107.89-1.996 2-1.996 1.11 0 2 .89 2 1.996h3c.547 0 1 .452 1 .998v4.99h-1v-2.995h-10v8.98h10v-1.996zm-9-7.983h8c0-.544-.453-.996-1-.996h-1c-.547 0-1-.453-1-.998 0-.546-.453-.998-1-.998-.547 0-1 .452-1 .998 0 .545-.453.998-1 .998h-1c-.547 0-1 .452-1 .997z" fill-rule="evenodd"/></svg>';
|
||||
|
||||
addButtons(
|
||||
'.hljs',
|
||||
button('Copy', 'Copy code to clipboard', copyIcon, 'btnClipboard')
|
||||
);
|
||||
|
||||
const clipboard = new ClipboardJS('.btnClipboard', {
|
||||
target: function(trigger) {
|
||||
return trigger.parentNode.querySelector('code');
|
||||
},
|
||||
});
|
||||
|
||||
clipboard.on('success', function(event) {
|
||||
event.clearSelection();
|
||||
const textEl = event.trigger.querySelector('.btnIcon__label');
|
||||
textEl.textContent = 'Copied';
|
||||
setTimeout(function() {
|
||||
textEl.textContent = 'Copy';
|
||||
}, 2000);
|
||||
});
|
||||
});
|
||||
Loading…
Reference in New Issue