Improve CSS
This commit is contained in:
Julien Bisconti
parent
a81402560a
commit
ead9baa117
|
|
@ -23,7 +23,8 @@ module.exports = {
|
|||
"prettier/prettier": [
|
||||
"error",
|
||||
{
|
||||
"singleQuote": true
|
||||
"singleQuote": true,
|
||||
"trailingComma": "all",
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
|
|||
11
README.md
11
README.md
|
|
@ -19,6 +19,8 @@ All the links are monitored and tested with [awesome_bot](https://github.com/dkh
|
|||
|
||||
# Contents
|
||||
|
||||
<!-- TOC -->
|
||||
|
||||
- Introduction
|
||||
- [What is Docker?](#what-is-docker)
|
||||
- [Where to start?](#where-to-start)
|
||||
|
|
@ -44,6 +46,7 @@ All the links are monitored and tested with [awesome_bot](https://github.com/dkh
|
|||
- [Builder](#builder)
|
||||
- [Dockerfile](#dockerfile)
|
||||
- [Linter](#linter)
|
||||
- [Metadata](#metadata)
|
||||
- [Registry](#registry)
|
||||
- [Development with Docker](#development-with-docker)
|
||||
- [API Client](#api-client)
|
||||
|
|
@ -53,14 +56,14 @@ All the links are monitored and tested with [awesome_bot](https://github.com/dkh
|
|||
- [Serverless](#serverless)
|
||||
- [Testing](#testing)
|
||||
- [Wrappers](#wrappers)
|
||||
- [Services based on Docker ($$$)](#services-based-on-docker-)
|
||||
- [Services based on Docker (:heavy_dollar_sign:)](#services-based-on-docker-heavy_dollar_sign)
|
||||
- [CI/CD](#ci-services)
|
||||
- [CaaS](#caas)
|
||||
- [Monitoring](#monitoring-services)
|
||||
- [Monitoring Services](#monitoring-services)
|
||||
- [Useful Resources](#useful-resources)
|
||||
- [Awesome Lists](#awesome-lists)
|
||||
- [Good Tips](#good-tips)
|
||||
- [Raspberry Pi / ARM](#raspberry-pi--arm)
|
||||
- [Raspberry Pi & ARM](#raspberry-pi--arm)
|
||||
- [Security](#security-1)
|
||||
- [Videos](#videos)
|
||||
- [Communities and Meetups](#communities-and-meetups)
|
||||
|
|
@ -69,6 +72,8 @@ All the links are monitored and tested with [awesome_bot](https://github.com/dkh
|
|||
- [English](#english)
|
||||
- [Russian](#russian)
|
||||
|
||||
<!-- /TOC -->
|
||||
|
||||
# Legend
|
||||
|
||||
- Abandoned :skull:
|
||||
|
|
|
|||
66
build.js
66
build.js
|
|
@ -2,11 +2,23 @@ const fs = require('fs');
|
|||
const showdown = require('showdown');
|
||||
const cheerio = require('cheerio');
|
||||
const Parcel = require('parcel-bundler');
|
||||
const critical = require('critical');
|
||||
|
||||
process.env.NODE_ENV = 'production';
|
||||
|
||||
const includeReadme = () => {
|
||||
process.on('unhandledRejection', error => {
|
||||
console.log('unhandledRejection', error.message);
|
||||
});
|
||||
|
||||
const readme = 'README.md';
|
||||
const template = 'website/index.tmpl.html';
|
||||
const merged = 'website/index.html';
|
||||
const destination = 'website/index.html';
|
||||
|
||||
const includeReadme = ({
|
||||
md = readme,
|
||||
templateHTML = template,
|
||||
dest = merged,
|
||||
}) => {
|
||||
const converter = new showdown.Converter({
|
||||
omitExtraWLInCodeBlocks: true,
|
||||
simplifiedAutoLink: true,
|
||||
|
|
@ -24,62 +36,36 @@ const includeReadme = () => {
|
|||
ghMentions: true,
|
||||
backslashEscapesHTMLTags: true,
|
||||
emoji: true,
|
||||
splitAdjacentBlockquotes: true
|
||||
splitAdjacentBlockquotes: true,
|
||||
});
|
||||
// converter.setFlavor('github');
|
||||
|
||||
console.log('Loading files...');
|
||||
const index = fs.readFileSync('website/index.tmpl.html', 'utf8');
|
||||
const readme = fs.readFileSync('README.md', 'utf8');
|
||||
const indexTemplate = fs.readFileSync(templateHTML, 'utf8');
|
||||
const markdown = fs.readFileSync(md, 'utf8');
|
||||
|
||||
console.log('Merging files...');
|
||||
const $ = cheerio.load(index);
|
||||
$('#md').append(converter.makeHtml(readme));
|
||||
const $ = cheerio.load(indexTemplate);
|
||||
$('#md').append(converter.makeHtml(markdown));
|
||||
|
||||
console.log('Writing index.html');
|
||||
fs.writeFileSync('website/index.merged.html', $.html(), 'utf8');
|
||||
return { base: 'website/', src: 'index.merged.html' };
|
||||
fs.writeFileSync(dest, $.html(), 'utf8');
|
||||
console.log('DONE 👍');
|
||||
};
|
||||
|
||||
const css = ({ base, src }) => {
|
||||
console.log('');
|
||||
console.log('Generating critical css above the fold');
|
||||
console.log('');
|
||||
const dimensions = [
|
||||
{
|
||||
height: 200,
|
||||
width: 500
|
||||
},
|
||||
{
|
||||
height: 900,
|
||||
width: 1200
|
||||
}
|
||||
];
|
||||
const options = {
|
||||
inline: true,
|
||||
base,
|
||||
src,
|
||||
dest: 'index.html',
|
||||
dimensions
|
||||
};
|
||||
|
||||
return critical.generate(options);
|
||||
};
|
||||
|
||||
const bundle = () => {
|
||||
const bundle = (dest = destination) => {
|
||||
console.log('');
|
||||
console.log('Bundling with Parcel.js');
|
||||
console.log('');
|
||||
|
||||
new Parcel('website/index.html', {
|
||||
new Parcel(dest, {
|
||||
name: 'build',
|
||||
publicURL: '/'
|
||||
publicURL: '/',
|
||||
}).bundle();
|
||||
};
|
||||
|
||||
const main = async () => {
|
||||
const { base, src } = includeReadme();
|
||||
await css({ base, src });
|
||||
const main = () => {
|
||||
includeReadme({});
|
||||
bundle();
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -9,9 +9,185 @@
|
|||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="theme-color" content="#157878">
|
||||
<meta name="description" content="A curated list of Docker resources and projects.">
|
||||
<meta name="keywords" content="awesome awesome-list container docker dockerfile tools open source projects">
|
||||
<meta name="keywords" content="free and open-source open source projects for docker moby kubernetes linux awesome awesome-list container tools dockerfile list moby docker-container docker-image docker-environment docker-deployment docker-swarm docker-api docker-monitoring docker-machine docker-security docker-registry">
|
||||
<link rel="icon" type="image/png" href="favicon.png">
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<!-- <link rel="stylesheet" href="style.css"> -->
|
||||
<style>
|
||||
* {
|
||||
box-sizing: border-box
|
||||
}
|
||||
|
||||
html {
|
||||
font-family: sans-serif;
|
||||
-ms-text-size-adjust: 100%;
|
||||
-webkit-text-size-adjust: 100%
|
||||
}
|
||||
|
||||
body {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
font-family: Open Sans, Helvetica Neue, Helvetica, Arial, sans-serif;
|
||||
font-size: 16px;
|
||||
line-height: 1.5;
|
||||
color: #606c71
|
||||
}
|
||||
|
||||
section {
|
||||
display: block
|
||||
}
|
||||
|
||||
a {
|
||||
background-color: transparent;
|
||||
color: #1e6bb8;
|
||||
text-decoration: none
|
||||
}
|
||||
|
||||
strong {
|
||||
font-weight: 700
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
margin: .67em 0
|
||||
}
|
||||
|
||||
img {
|
||||
border: 0
|
||||
}
|
||||
|
||||
svg:not(:root) {
|
||||
overflow: hidden
|
||||
}
|
||||
|
||||
.btn {
|
||||
display: inline-block;
|
||||
margin-bottom: 1rem;
|
||||
color: hsla(0, 0%, 100%, .7);
|
||||
background-color: hsla(0, 0%, 100%, .08);
|
||||
border: 1px solid hsla(0, 0%, 100%, .2);
|
||||
border-radius: .3rem
|
||||
}
|
||||
|
||||
.page-header {
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
background-color: #159957;
|
||||
background-image: linear-gradient(120deg, #155799, #159957)
|
||||
}
|
||||
|
||||
.project-name {
|
||||
margin-top: 0;
|
||||
margin-bottom: .1rem
|
||||
}
|
||||
|
||||
.project-tagline {
|
||||
margin-bottom: 2rem;
|
||||
font-weight: 400;
|
||||
opacity: .7
|
||||
}
|
||||
|
||||
.main-content {
|
||||
word-wrap: break-word
|
||||
}
|
||||
|
||||
.main-content :first-child {
|
||||
margin-top: 0
|
||||
}
|
||||
|
||||
.main-content h1,
|
||||
.main-content h4 {
|
||||
margin-top: 2rem;
|
||||
margin-bottom: 1rem;
|
||||
font-weight: 400;
|
||||
color: #159957
|
||||
}
|
||||
|
||||
.main-content p {
|
||||
margin-bottom: 1em
|
||||
}
|
||||
|
||||
.main-content blockquote {
|
||||
padding: 0 1rem;
|
||||
margin-left: 0;
|
||||
color: #819198;
|
||||
border-left: .3rem solid #dce6f0
|
||||
}
|
||||
|
||||
.main-content blockquote>:first-child {
|
||||
margin-top: 0
|
||||
}
|
||||
|
||||
.main-content blockquote>:last-child {
|
||||
margin-bottom: 0
|
||||
}
|
||||
|
||||
.main-content img {
|
||||
max-width: 100%
|
||||
}
|
||||
|
||||
@media screen and (min-width:64em) {
|
||||
.btn {
|
||||
padding: .75rem 1rem
|
||||
}
|
||||
.page-header {
|
||||
padding: 5rem 6rem
|
||||
}
|
||||
.project-name {
|
||||
font-size: 3.25rem
|
||||
}
|
||||
.project-tagline {
|
||||
font-size: 1.25rem
|
||||
}
|
||||
.main-content {
|
||||
max-width: 64rem;
|
||||
padding: 2rem 6rem;
|
||||
margin: 0 auto;
|
||||
font-size: 1.1rem
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width:42em) and (max-width:64em) {
|
||||
.btn {
|
||||
padding: .6rem .9rem;
|
||||
font-size: .9rem
|
||||
}
|
||||
.page-header {
|
||||
padding: 3rem 4rem
|
||||
}
|
||||
.project-name {
|
||||
font-size: 2.25rem
|
||||
}
|
||||
.project-tagline {
|
||||
font-size: 1.15rem
|
||||
}
|
||||
.main-content {
|
||||
padding: 2rem 4rem;
|
||||
font-size: 1.1rem
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width:42em) {
|
||||
.btn {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: .75rem;
|
||||
font-size: .9rem
|
||||
}
|
||||
.page-header {
|
||||
padding: 2rem 1rem
|
||||
}
|
||||
.project-name {
|
||||
font-size: 1.75rem
|
||||
}
|
||||
.project-tagline {
|
||||
font-size: 1rem
|
||||
}
|
||||
.main-content {
|
||||
padding: 2rem 1rem;
|
||||
font-size: 1rem
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
|
|
|||
|
|
@ -318,3 +318,4 @@ a:hover { text-decoration: underline; }
|
|||
.site-footer-owner { display: block; font-weight: bold; }
|
||||
|
||||
.site-footer-credits { color: #819198; }
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue