alihan/gitignore.io
1
0
Fork 0
mirror of https://github.com/toptal/gitignore.io.git synced 2021-05-12 18:32:24 +03:00
Code Issues Projects Releases Wiki Activity

[TRA-1262] GitIgnore: add <iframe> for internal linking page (#528)

Browse Source 
* [TRA-1262] GitIgnore: add <iframe> for internal linking page

* getting internal linking page from same domain

* adding LESS documentation

* adding border to iframe instead of on the page

* fix for correct link
This commit is contained in:
Diego Henrique
2021-03-29 12:12:34 -03:00
committed by GitHub
parent 4c28e131eb
commit 8728d982e0
4 changed files with 408 additions and 366 deletions
Download Patch File Download Diff File Expand all files Collapse all files

269
Public/css/app.css
View File

@@ -3,128 +3,120 @@
font-weight: 100;
font-family: "Proxima Nova";
font-style: normal;
src: url("./fonts/ProximaNova-Thin.woff2") format("woff2"),
url("./fonts/ProximaNova-Thin.woff") format("woff"),
url("./fonts/ProximaNova-Thin.otf") format("opentype");
src: url("./fonts/ProximaNova-Thin.woff2") format("woff2"), url("./fonts/ProximaNova-Thin.woff") format("woff"), url("./fonts/ProximaNova-Thin.otf") format("opentype");
}
@font-face {
font-display: swap;
font-weight: 300;
font-family: "Proxima Nova";
font-style: normal;
src: url("./fonts/ProximaNova-Light.woff2") format("woff2"),
url("./fonts/ProximaNova-Light.woff") format("woff"),
url("./fonts/ProximaNova-Light.otf") format("opentype");
src: url("./fonts/ProximaNova-Light.woff2") format("woff2"), url("./fonts/ProximaNova-Light.woff") format("woff"), url("./fonts/ProximaNova-Light.otf") format("opentype");
}
@font-face {
font-display: swap;
font-weight: 400;
font-family: "Proxima Nova";
font-style: normal;
src: url("./fonts/ProximaNova-Regular.woff2") format("woff2"),
url("./fonts/ProximaNova-Regular.woff") format("woff"),
url("./fonts/ProximaNova-Regular.otf") format("opentype");
src: url("./fonts/ProximaNova-Regular.woff2") format("woff2"), url("./fonts/ProximaNova-Regular.woff") format("woff"), url("./fonts/ProximaNova-Regular.otf") format("opentype");
}
@font-face {
font-display: swap;
font-weight: 600;
font-family: "Proxima Nova";
font-style: normal;
src: url("./fonts/ProximaNova-Semibold.woff2") format("woff2"),
url("./fonts/ProximaNova-Semibold.woff") format("woff"),
url("./fonts/ProximaNova-Semibold.otf") format("opentype");
src: url("./fonts/ProximaNova-Semibold.woff2") format("woff2"), url("./fonts/ProximaNova-Semibold.woff") format("woff"), url("./fonts/ProximaNova-Semibold.otf") format("opentype");
}
@font-face {
font-display: swap;
font-weight: 700;
font-family: "Proxima Nova";
font-style: normal;
src: url("./fonts/ProximaNova-Bold.woff2") format("woff2"),
url("./fonts/ProximaNova-Bold.woff") format("woff"),
url("./fonts/ProximaNova-Bold.otf") format("opentype");
src: url("./fonts/ProximaNova-Bold.woff2") format("woff2"), url("./fonts/ProximaNova-Bold.woff") format("woff"), url("./fonts/ProximaNova-Bold.otf") format("opentype");
}
body, html {
height: 100%;
background-color: transparent;
body,
html {
height: 100%;
background-color: transparent;
}
body {
min-width: 320px;
color: #000000;
margin: 0;
font-family: "Proxima Nova", Arial, sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 1.5;
display: flex;
flex-direction: column;
min-width: 320px;
color: #000000;
margin: 0;
font-family: "Proxima Nova", Arial, sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 1.5;
display: flex;
flex-direction: column;
}
a {
color: #204ecf;
text-decoration: none;
color: #204ecf;
text-decoration: none;
}
a:hover, a:focus {
text-decoration: underline;
a:hover,
a:focus {
text-decoration: underline;
}
.content-wrapper {
min-height: 100%;
display: flex;
flex-direction: column;
position: relative;
padding-top: 72px;
min-height: 100%;
display: flex;
flex-direction: column;
position: relative;
padding-top: 72px;
}
/* --------- header --------- */
header {
background: #204ecf;
color: #ffffff;
height: 72px;
position: fixed;
top: 0;
width: 100%;
overflow-x: hidden;
z-index: 1100;
background: #204ecf;
color: #ffffff;
height: 72px;
position: fixed;
top: 0;
width: 100%;
overflow-x: hidden;
z-index: 1100;
}
header .container {
display: flex;
justify-content: space-between;
align-items: center;
height: 100%;
display: flex;
justify-content: space-between;
align-items: center;
height: 100%;
}
header a {
display: block;
line-height: 0;
display: block;
line-height: 0;
}
header .header-left-column {
display: flex;
align-items: center;
padding: 0 10px;
display: flex;
align-items: center;
padding: 0 10px;
}
header .header-left-column a {
padding-right: 16px;
padding-right: 16px;
}
header .header-left-column a img {
min-width: 100px;
height: 30px;
min-width: 100px;
height: 30px;
}
header .header-left-column h1 {
font-size: 17px;
line-height: 28px;
border-left: 1px solid #ebeced;
padding-left: 16px;
margin: 0;
font-size: 17px;
line-height: 28px;
border-left: 1px solid #ebeced;
padding-left: 16px;
margin: 0;
}
header .header-right-column img {
height: 24px;
height: 24px;
}
/* --------- END of header --------- */
/* --------- main --------- */
main {
width: 100%;
flex: 1 0 400px;
width: 100%;
flex: 1 0 400px;
}
@media (min-width: 768px) {
main {
display: flex;
}
main {
display: flex;
}
}
main .masthead {
margin: 0 auto;
@@ -133,101 +125,109 @@ main .masthead {
text-align: center;
}
main .masthead-top {
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 25px;
margin-top: 120px;
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 25px;
margin-top: 120px;
}
@media (min-width: 768px) {
main .masthead-top {
margin-top: 180px;
}
main .masthead-top {
margin-top: 180px;
}
}
main .masthead-top img {
width: 100%;
max-width: 370px;
width: 100%;
max-width: 370px;
}
main .masthead-top h2 {
color: #455065;
margin: 20px 0;
font-size: 16px;
line-height: 16px;
color: #455065;
margin: 20px 0;
font-size: 16px;
line-height: 16px;
}
main .input-group {
overflow: auto;
overflow: auto;
}
main .masthead-bottom {
margin-top: 40px;
margin-bottom: 60px;
margin-top: 40px;
margin-bottom: 60px;
}
main .masthead-bottom ul {
display: flex;
flex-direction: column;
justify-content: center;
list-style: none;
margin: 0;
padding: 0;
justify-content: center;
list-style: none;
margin: 0;
padding: 0;
}
main .masthead-bottom ul li {
margin-bottom: 16px;
margin-bottom: 16px;
}
main .masthead-bottom ul li a {
font-size: 16px;
line-height: 16px;
padding-bottom: 8px;
font-size: 16px;
line-height: 16px;
padding-bottom: 8px;
}
main .masthead-bottom ul li a:hover, main .masthead-bottom ul li a:focus {
text-decoration: none;
border-bottom: 1px solid #204ecf;
main .masthead-bottom ul li a:hover,
main .masthead-bottom ul li a:focus {
text-decoration: none;
border-bottom: 1px solid #204ecf;
}
/* --------- END of main --------- */
/* --------- footer --------- */
footer {
height: 142px;
color: #000000;
padding-bottom: 64px;
height: 142px;
color: #000000;
padding-bottom: 64px;
}
footer > div {
width: 100%;
max-width: 624px;
width: 100%;
max-width: 624px;
margin: 0 auto;
padding: 0 16px;
}
footer .carbon-wrap {
display: flex;
align-items: center;
justify-content: center;
display: flex;
align-items: center;
justify-content: center;
}
footer a.carbon-img {
height: 78px;
height: 78px;
}
footer a.carbon-img img {
height: 100%;
height: 100%;
}
footer a.carbon-text {
font-size: 12px;
line-height: 20px;
padding-left: 8px;
font-size: 12px;
line-height: 20px;
padding-left: 8px;
}
footer .carbon-poweredby {
display: none;
display: none;
}
/* --------- END of footer --------- */
/* --------- responsiveness --------- */
.container {
position: relative;
max-width: 100%;
padding-right: 16px;
padding-left: 16px;
margin-right: auto;
margin-left: auto;
max-width: 100%;
padding-right: 16px;
padding-left: 16px;
margin-right: auto;
margin-left: auto;
}
@media (min-width: 1200px) {
.container {
max-width: 1344px;
}
}
@media (min-width: 576px) {
.container {
.container {
width: 540px;
}
main .masthead-bottom ul {
flex-direction: row;
}
main .masthead-bottom ul li:not(:first-child)::before {
display: inline-block;
content: "";
@@ -238,31 +238,40 @@ footer .carbon-poweredby {
}
}
@media (min-width: 768px) {
.container {
width: 720px;
.container {
width: 720px;
}
}
@media (min-width: 992px) {
.container {
width: 960px;
.container {
width: 960px;
}
}
@media (min-width: 1200px) {
.container {
width: 1376px;
.container {
width: 1376px;
}
header .header-right-column {
padding-right: 98px;
}
}
/* --------- END of responsiveness --------- */
#input-gitignore {
-webkit-appearance: none;
border: 1px solid #d8d9dc;
border-radius: 0;
height: 46px;
border: 1px solid #d8d9dc;
}
#input-gitignore::-ms-expand {
display: none;
display: none;
}
#internal-linking {
border: 0;
height: 56px;
box-shadow: 0px -1px 3px 0px rgba(0, 0, 0, 0.1);
}
@media (max-width: 768px) {
#internal-linking {
height: 32px;
}
}

473
Public/css/app.less
View File

@@ -1,317 +1,328 @@
@import "variables.less";
@font-face {
font-display: swap;
font-weight: 100;
font-family: "Proxima Nova";
font-style: normal;
src: url("./fonts/ProximaNova-Thin.woff2") format("woff2"),
url("./fonts/ProximaNova-Thin.woff") format("woff"),
url("./fonts/ProximaNova-Thin.otf") format("opentype");
font-display: swap;
font-weight: 100;
font-family: "Proxima Nova";
font-style: normal;
src: url("./fonts/ProximaNova-Thin.woff2") format("woff2"),
url("./fonts/ProximaNova-Thin.woff") format("woff"),
url("./fonts/ProximaNova-Thin.otf") format("opentype");
}
@font-face {
font-display: swap;
font-weight: 300;
font-family: "Proxima Nova";
font-style: normal;
src: url("./fonts/ProximaNova-Light.woff2") format("woff2"),
url("./fonts/ProximaNova-Light.woff") format("woff"),
url("./fonts/ProximaNova-Light.otf") format("opentype");
font-display: swap;
font-weight: 300;
font-family: "Proxima Nova";
font-style: normal;
src: url("./fonts/ProximaNova-Light.woff2") format("woff2"),
url("./fonts/ProximaNova-Light.woff") format("woff"),
url("./fonts/ProximaNova-Light.otf") format("opentype");
}
@font-face {
font-display: swap;
font-weight: 400;
font-family: "Proxima Nova";
font-style: normal;
src: url("./fonts/ProximaNova-Regular.woff2") format("woff2"),
url("./fonts/ProximaNova-Regular.woff") format("woff"),
url("./fonts/ProximaNova-Regular.otf") format("opentype");
font-display: swap;
font-weight: 400;
font-family: "Proxima Nova";
font-style: normal;
src: url("./fonts/ProximaNova-Regular.woff2") format("woff2"),
url("./fonts/ProximaNova-Regular.woff") format("woff"),
url("./fonts/ProximaNova-Regular.otf") format("opentype");
}
@font-face {
font-display: swap;
font-weight: 600;
font-family: "Proxima Nova";
font-style: normal;
src: url("./fonts/ProximaNova-Semibold.woff2") format("woff2"),
url("./fonts/ProximaNova-Semibold.woff") format("woff"),
url("./fonts/ProximaNova-Semibold.otf") format("opentype");
font-display: swap;
font-weight: 600;
font-family: "Proxima Nova";
font-style: normal;
src: url("./fonts/ProximaNova-Semibold.woff2") format("woff2"),
url("./fonts/ProximaNova-Semibold.woff") format("woff"),
url("./fonts/ProximaNova-Semibold.otf") format("opentype");
}
@font-face {
font-display: swap;
font-weight: 700;
font-family: "Proxima Nova";
font-style: normal;
src: url("./fonts/ProximaNova-Bold.woff2") format("woff2"),
url("./fonts/ProximaNova-Bold.woff") format("woff"),
url("./fonts/ProximaNova-Bold.otf") format("opentype");
font-display: swap;
font-weight: 700;
font-family: "Proxima Nova";
font-style: normal;
src: url("./fonts/ProximaNova-Bold.woff2") format("woff2"),
url("./fonts/ProximaNova-Bold.woff") format("woff"),
url("./fonts/ProximaNova-Bold.otf") format("opentype");
}
body,
html {
height: 100%;
background-color: @background;
height: 100%;
background-color: @background;
}
body {
min-width: 320px;
color: @text;
margin: 0;
font-family: "Proxima Nova", Arial, sans-serif;
font-size: 16px;
font-weight: @weight-regular;
line-height: 1.5;
display: flex;
flex-direction: column;
min-width: 320px;
color: @text;
margin: 0;
font-family: "Proxima Nova", Arial, sans-serif;
font-size: 16px;
font-weight: @weight-regular;
line-height: 1.5;
display: flex;
flex-direction: column;
}
a {
color: @link;
text-decoration: none;
color: @link;
text-decoration: none;
&:hover,
&:focus {
text-decoration: underline;
}
&:hover,
&:focus {
text-decoration: underline;
}
}
.content-wrapper {
min-height: 100%;
display: flex;
flex-direction: column;
position: relative;
padding-top: 72px;
min-height: 100%;
display: flex;
flex-direction: column;
position: relative;
padding-top: 72px;
}
/* --------- header --------- */
header {
background: @blue;
color: @white;
height: 72px;
position: fixed;
top: 0;
width: 100%;
overflow-x: hidden;
z-index: 1100;
background: @blue;
color: @white;
height: 72px;
position: fixed;
top: 0;
width: 100%;
overflow-x: hidden;
z-index: 1100;
.container {
display: flex;
justify-content: space-between;
align-items: center;
height: 100%;
}
.container {
display: flex;
justify-content: space-between;
align-items: center;
height: 100%;
}
a {
display: block;
line-height: 0;
}
.header-left-column {
display: flex;
align-items: center;
padding: 0 10px;
a {
display: block;
line-height: 0;
padding-right: 16px;
img {
min-width: 100px;
height: 30px;
}
}
.header-left-column {
display: flex;
align-items: center;
padding: 0 10px;
a {
padding-right: 16px;
img {
min-width: 100px;
height: 30px;
}
}
h1 {
font-size: 17px;
line-height: 28px;
border-left: 1px solid @logo-divider;
padding-left: 16px;
margin: 0;
}
h1 {
font-size: 17px;
line-height: 28px;
border-left: 1px solid @logo-divider;
padding-left: 16px;
margin: 0;
}
}
.header-right-column {
img {
height: 24px;
}
.header-right-column {
img {
height: 24px;
}
}
}
/* --------- END of header --------- */
/* --------- main --------- */
main {
width: 100%;
flex: 1 0 400px;
width: 100%;
flex: 1 0 400px;
@media (min-width: 768px) {
display: flex;
}
.masthead {
margin: 0 auto;
max-width: 580px;
overflow-y: auto;
text-align: center;
}
.masthead-top {
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 25px;
margin-top: 120px;
@media (min-width: 768px) {
display: flex;
margin-top: 180px;
}
.masthead {
margin: 0 auto;
max-width: 580px;
overflow-y: auto;
text-align: center;
img {
width: 100%;
max-width: 370px;
}
.masthead-top {
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 25px;
margin-top: 120px;
h2 {
color: @text-secondary;
margin: 20px 0;
font-size: 16px;
line-height: 16px;
}
}
@media (min-width: 768px) {
margin-top: 180px;
}
img {
width: 100%;
max-width: 370px;
}
h2 {
color: @text-secondary;
margin: 20px 0;
font-size: 16px;
line-height: 16px;
}
}
.input-group {
overflow: auto;
}
.masthead-bottom {
margin-top: 40px;
margin-bottom: 60px;
ul {
display: flex;
flex-direction: column;
justify-content: center;
list-style: none;
margin: 0;
padding: 0;
li {
margin-bottom: 16px;
a {
font-size: 16px;
line-height: 16px;
padding-bottom: 8px;
&:hover,
&:focus {
text-decoration: none;
border-bottom: 1px solid @link;
}
}
}
.input-group {
overflow: auto;
}
.masthead-bottom {
margin-top: 40px;
margin-bottom: 60px;
ul {
display: flex;
flex-direction: column;
justify-content: center;
list-style: none;
margin: 0;
padding: 0;
li {
margin-bottom: 16px;
a {
font-size: 16px;
line-height: 16px;
padding-bottom: 8px;
&:hover,
&:focus {
text-decoration: none;
border-bottom: 1px solid @link;
}
}
}
}
}
}
/* --------- END of main --------- */
/* --------- footer --------- */
footer {
height: 142px;
color: @text;
padding-bottom: 64px;
height: 142px;
color: @text;
padding-bottom: 64px;
& > div {
width: 100%;
max-width: 624px;
margin: 0 auto;
padding: 0 16px;
& > div {
width: 100%;
max-width: 624px;
margin: 0 auto;
padding: 0 16px;
}
.carbon-wrap {
display: flex;
align-items: center;
justify-content: center;
}
a.carbon-img {
height: 78px;
img {
height: 100%;
}
}
.carbon-wrap {
display: flex;
align-items: center;
justify-content: center;
}
a.carbon-text {
font-size: 12px;
line-height: 20px;
padding-left: 8px;
}
a.carbon-img {
height: 78px;
img {
height: 100%;
}
}
a.carbon-text {
font-size: 12px;
line-height: 20px;
padding-left: 8px;
}
.carbon-poweredby {
display: none;
}
.carbon-poweredby {
display: none;
}
}
/* --------- END of footer --------- */
/* --------- responsiveness --------- */
.container {
position: relative;
max-width: 100%;
padding-right: 16px;
padding-left: 16px;
margin-right: auto;
margin-left: auto;
position: relative;
max-width: 100%;
padding-right: 16px;
padding-left: 16px;
margin-right: auto;
margin-left: auto;
@media (min-width: 1200px) {
max-width: 1344px;
}
@media (min-width: 1200px) {
max-width: 1344px;
}
}
@media (min-width: 576px) {
.container {
width: 540px;
}
.container {
width: 540px;
}
main .masthead-bottom ul {
flex-direction: row;
main .masthead-bottom ul {
flex-direction: row;
li:not(:first-child) {
&::before {
display: inline-block;
content: "";
width: 1px;
height: 12px;
background-color: @nav-divider;
margin: 0 21px;
}
}
li:not(:first-child) {
&::before {
display: inline-block;
content: "";
width: 1px;
height: 12px;
background-color: @nav-divider;
margin: 0 21px;
}
}
}
}
@media (min-width: 768px) {
.container {
width: 720px;
}
.container {
width: 720px;
}
}
@media (min-width: 992px) {
.container {
width: 960px;
}
.container {
width: 960px;
}
}
@media (min-width: 1200px) {
.container {
width: 1376px;
}
.container {
width: 1376px;
}
header .header-right-column {
padding-right: 98px;
}
header .header-right-column {
padding-right: 98px;
}
}
/* --------- END of responsiveness --------- */
#input-gitignore {
-webkit-appearance: none;
border: 1px solid @lightgray;
border-radius: 0;
height: 46px;
-webkit-appearance: none;
border: 1px solid @lightgray;
border-radius: 0;
height: 46px;
}
#input-gitignore::-ms-expand {
display: none;
display: none;
}
#internal-linking {
border: 0;
height: 56px;
box-shadow: 0px -1px 3px 0px rgba(0, 0, 0, 0.1);
@media (max-width: 768px) {
height: 32px;
}
}

23
README.md
View File

@@ -28,7 +28,6 @@ Source templates for gitignore.io: https://github.com/toptal/gitignore
Complete gitignore.io documentation: https://docs.gitignore.io/
## Docker Container
### Prerequisites
@@ -38,6 +37,7 @@ Complete gitignore.io documentation: https://docs.gitignore.io/
### Build
#### Production
```
$ docker-compose up --build
```
@@ -48,14 +48,27 @@ $ docker-compose up --build
$ docker-compose -f ./docker-compose-dev.yml build
$ docker-compose -f ./docker-compose-dev.yml up
```
It will start the web server running on [http://localhost:8080](http://localhost:8080)
Development mode mounts the following directories to docker volumes:
- `/Public`
- `/Resources `
## LESS and CSS
The app uses [LESS](http://lesscss.org/) as his CSS preprocessor for the files in `Public/css`.
To process the less file you need to:
- Install less compiler `yarn global add less`
- Process the less file with `lessc app.less app.css`
## Environment Variables
Please set your environment variables to docker configurations. All are optional.
```
...
services:
@@ -68,23 +81,31 @@ services:
...
...
```
### HOST_ORIGIN
Origin of your web server, falls back to https://www.toptal.com
```
HOST_ORIGIN: http://www.example.com
```
### BASE_PREFIX
If you want to host this web server under a subdirectory (http://www.example.com/foo/bar for example), please set this variable.
```
BASE_PREFIX: /foo/bar
```
### GOOGLE_ANALYTICS_UID
User ID for Google Tag Manager snippet
```
GOOGLE_ANALYTICS_UID: UA-XXXXXXXX-X
```
## E2E Tests
Tests are located in `e2e-tests` folder with:

1
Resources/Views/index.leaf
View File

@@ -97,6 +97,7 @@
</div>
</div>
</main>
<iframe id="internal-linking" src="/internal-linking?site=GitIgnore">
</div>
<!-- Footer Scripts -->