Merge pull request #553 from veggiemonk/improve-css

Improve CSS
This commit is contained in:
Julien Bisconti 2018-04-07 14:58:58 +02:00 committed by GitHub
commit 1e95378e21
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 215 additions and 46 deletions

View File

@ -23,7 +23,8 @@ module.exports = {
"prettier/prettier": [
"error",
{
"singleQuote": true
"singleQuote": true,
"trailingComma": "all",
}
]
}

View File

@ -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:

View File

@ -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();
};

View File

@ -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>

1
website/style.css vendored
View File

@ -318,3 +318,4 @@ a:hover { text-decoration: underline; }
.site-footer-owner { display: block; font-weight: bold; }
.site-footer-credits { color: #819198; }