Addlord
This commit is contained in:
commit
d77eaebfdb
19
.github/workflows/main.yml
vendored
Normal file
19
.github/workflows/main.yml
vendored
Normal file
@ -0,0 +1,19 @@
|
|||||||
|
on:
|
||||||
|
schedule:
|
||||||
|
- cron: "0 0 * * *"
|
||||||
|
|
||||||
|
jobs:
|
||||||
|
issue-manager:
|
||||||
|
runs-on: ubuntu-latest
|
||||||
|
steps:
|
||||||
|
- uses: tiangolo/issue-manager@master
|
||||||
|
with:
|
||||||
|
token: ${{ secrets.GITHUB_TOKEN }}
|
||||||
|
config: >
|
||||||
|
{
|
||||||
|
"answered": {
|
||||||
|
"users": ["tiangolo"],
|
||||||
|
"delay": 864000,
|
||||||
|
"message": "Assuming the original issue was solved, it will be automatically closed now. But feel free to add more comments or create new issues."
|
||||||
|
}
|
||||||
|
}
|
||||||
61
Dockerfile
Normal file
61
Dockerfile
Normal file
@ -0,0 +1,61 @@
|
|||||||
|
FROM buildpack-deps:stretch
|
||||||
|
|
||||||
|
LABEL maintainer="Sebastian Ramirez <tiangolo@gmail.com>"
|
||||||
|
|
||||||
|
# Versions of Nginx and nginx-rtmp-module to use
|
||||||
|
ENV NGINX_VERSION nginx-1.15.0
|
||||||
|
ENV NGINX_RTMP_MODULE_VERSION 1.2.1
|
||||||
|
|
||||||
|
# Install dependencies
|
||||||
|
RUN apt-get update && \
|
||||||
|
apt-get install -y ca-certificates openssl libssl-dev && \
|
||||||
|
rm -rf /var/lib/apt/lists/*
|
||||||
|
|
||||||
|
# Download and decompress Nginx
|
||||||
|
RUN mkdir -p /tmp/build/nginx && \
|
||||||
|
cd /tmp/build/nginx && \
|
||||||
|
wget -O ${NGINX_VERSION}.tar.gz https://nginx.org/download/${NGINX_VERSION}.tar.gz && \
|
||||||
|
tar -zxf ${NGINX_VERSION}.tar.gz
|
||||||
|
|
||||||
|
# Download and decompress RTMP module
|
||||||
|
RUN mkdir -p /tmp/build/nginx-rtmp-module && \
|
||||||
|
cd /tmp/build/nginx-rtmp-module && \
|
||||||
|
wget -O nginx-rtmp-module-${NGINX_RTMP_MODULE_VERSION}.tar.gz https://github.com/arut/nginx-rtmp-module/archive/v${NGINX_RTMP_MODULE_VERSION}.tar.gz && \
|
||||||
|
tar -zxf nginx-rtmp-module-${NGINX_RTMP_MODULE_VERSION}.tar.gz && \
|
||||||
|
cd nginx-rtmp-module-${NGINX_RTMP_MODULE_VERSION}
|
||||||
|
|
||||||
|
# Build and install Nginx
|
||||||
|
# The default puts everything under /usr/local/nginx, so it's needed to change
|
||||||
|
# it explicitly. Not just for order but to have it in the PATH
|
||||||
|
RUN cd /tmp/build/nginx/${NGINX_VERSION} && \
|
||||||
|
./configure \
|
||||||
|
--sbin-path=/usr/local/sbin/nginx \
|
||||||
|
--conf-path=/etc/nginx/nginx.conf \
|
||||||
|
--error-log-path=/var/log/nginx/error.log \
|
||||||
|
--pid-path=/var/run/nginx/nginx.pid \
|
||||||
|
--lock-path=/var/lock/nginx/nginx.lock \
|
||||||
|
--http-log-path=/var/log/nginx/access.log \
|
||||||
|
--http-client-body-temp-path=/tmp/nginx-client-body \
|
||||||
|
--with-http_ssl_module \
|
||||||
|
--with-threads \
|
||||||
|
--with-ipv6 \
|
||||||
|
--add-module=/tmp/build/nginx-rtmp-module/nginx-rtmp-module-${NGINX_RTMP_MODULE_VERSION} && \
|
||||||
|
make -j $(getconf _NPROCESSORS_ONLN) && \
|
||||||
|
make install && \
|
||||||
|
mkdir /var/lock/nginx && \
|
||||||
|
rm -rf /tmp/build
|
||||||
|
|
||||||
|
# Forward logs to Docker
|
||||||
|
RUN ln -sf /dev/stdout /var/log/nginx/access.log && \
|
||||||
|
ln -sf /dev/stderr /var/log/nginx/error.log
|
||||||
|
|
||||||
|
# Set up config file
|
||||||
|
COPY nginx.conf /etc/nginx/nginx.conf
|
||||||
|
|
||||||
|
COPY stat.xsl /tmp/stat.xsl
|
||||||
|
|
||||||
|
COPY webpage/* /usr/share/nginx/html/
|
||||||
|
|
||||||
|
EXPOSE 1935
|
||||||
|
EXPOSE 80
|
||||||
|
CMD ["nginx", "-g", "daemon off;"]
|
||||||
21
LICENSE
Normal file
21
LICENSE
Normal file
@ -0,0 +1,21 @@
|
|||||||
|
MIT License
|
||||||
|
|
||||||
|
Copyright (c) 2016-2018 Sebastián Ramírez
|
||||||
|
|
||||||
|
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||||
|
of this software and associated documentation files (the "Software"), to deal
|
||||||
|
in the Software without restriction, including without limitation the rights
|
||||||
|
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||||
|
copies of the Software, and to permit persons to whom the Software is
|
||||||
|
furnished to do so, subject to the following conditions:
|
||||||
|
|
||||||
|
The above copyright notice and this permission notice shall be included in all
|
||||||
|
copies or substantial portions of the Software.
|
||||||
|
|
||||||
|
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||||
|
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||||
|
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||||
|
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||||
|
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||||
|
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||||
|
SOFTWARE.
|
||||||
103
README.md
Normal file
103
README.md
Normal file
@ -0,0 +1,103 @@
|
|||||||
|
## Supported tags and respective `Dockerfile` links
|
||||||
|
|
||||||
|
* [`latest` _(Dockerfile)_](https://github.com/tiangolo/nginx-rtmp-docker/blob/master/Dockerfile)
|
||||||
|
|
||||||
|
# nginx-rtmp
|
||||||
|
|
||||||
|
[**Docker**](https://www.docker.com/) image with [**Nginx**](http://nginx.org/en/) using the [**nginx-rtmp-module**](https://github.com/arut/nginx-rtmp-module) module for live multimedia (video) streaming.
|
||||||
|
|
||||||
|
## Description
|
||||||
|
|
||||||
|
This [**Docker**](https://www.docker.com/) image can be used to create an RTMP server for multimedia / video streaming using [**Nginx**](http://nginx.org/en/) and [**nginx-rtmp-module**](https://github.com/arut/nginx-rtmp-module), built from the current latest sources (Nginx 1.15.0 and nginx-rtmp-module 1.2.1).
|
||||||
|
|
||||||
|
This was inspired by other similar previous images from [dvdgiessen](https://hub.docker.com/r/dvdgiessen/nginx-rtmp-docker/), [jasonrivers](https://hub.docker.com/r/jasonrivers/nginx-rtmp/), [aevumdecessus](https://hub.docker.com/r/aevumdecessus/docker-nginx-rtmp/) and by an [OBS Studio post](https://obsproject.com/forum/resources/how-to-set-up-your-own-private-rtmp-server-using-nginx.50/).
|
||||||
|
|
||||||
|
The main purpose (and test case) to build it was to allow streaming from [**OBS Studio**](https://obsproject.com/) to different clients at the same time.
|
||||||
|
|
||||||
|
**GitHub repo**: <https://github.com/tiangolo/nginx-rtmp-docker>
|
||||||
|
|
||||||
|
**Docker Hub image**: <https://hub.docker.com/r/tiangolo/nginx-rtmp/>
|
||||||
|
|
||||||
|
## Details
|
||||||
|
|
||||||
|
## How to use
|
||||||
|
|
||||||
|
* For the simplest case, just run a container with this image:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
docker run -d -p 1935:1935 --name nginx-rtmp tiangolo/nginx-rtmp
|
||||||
|
```
|
||||||
|
|
||||||
|
## How to test with OBS Studio and VLC
|
||||||
|
|
||||||
|
* Run a container with the command above
|
||||||
|
|
||||||
|
|
||||||
|
* Open [OBS Studio](https://obsproject.com/)
|
||||||
|
* Click the "Settings" button
|
||||||
|
* Go to the "Stream" section
|
||||||
|
* In "Stream Type" select "Custom Streaming Server"
|
||||||
|
* In the "URL" enter the `rtmp://<ip_of_host>/live` replacing `<ip_of_host>` with the IP of the host in which the container is running. For example: `rtmp://192.168.0.30/live`
|
||||||
|
* In the "Stream key" use a "key" that will be used later in the client URL to display that specific stream. For example: `test`
|
||||||
|
* Click the "OK" button
|
||||||
|
* In the section "Sources" click de "Add" button (`+`) and select a source (for example "Screen Capture") and configure it as you need
|
||||||
|
* Click the "Start Streaming" button
|
||||||
|
|
||||||
|
|
||||||
|
* Open a [VLC](http://www.videolan.org/vlc/index.html) player (it also works in Raspberry Pi using `omxplayer`)
|
||||||
|
* Click in the "Media" menu
|
||||||
|
* Click in "Open Network Stream"
|
||||||
|
* Enter the URL from above as `rtmp://<ip_of_host>/live/<key>` replacing `<ip_of_host>` with the IP of the host in which the container is running and `<key>` with the key you created in OBS Studio. For example: `rtmp://192.168.0.30/live/test`
|
||||||
|
* Click "Play"
|
||||||
|
* Now VLC should start playing whatever you are transmitting from OBS Studio
|
||||||
|
|
||||||
|
## Debugging
|
||||||
|
|
||||||
|
If something is not working you can check the logs of the container with:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
docker logs nginx-rtmp
|
||||||
|
```
|
||||||
|
|
||||||
|
## Extending
|
||||||
|
|
||||||
|
If you need to modify the configurations you can create a file `nginx.conf` and replace the one in this image using a `Dockerfile` that is based on the image, for example:
|
||||||
|
|
||||||
|
```Dockerfile
|
||||||
|
FROM tiangolo/nginx-rtmp
|
||||||
|
|
||||||
|
COPY nginx.conf /etc/nginx/nginx.conf
|
||||||
|
```
|
||||||
|
|
||||||
|
The current `nginx.conf` contains:
|
||||||
|
|
||||||
|
```Nginx
|
||||||
|
worker_processes auto;
|
||||||
|
rtmp_auto_push on;
|
||||||
|
events {}
|
||||||
|
rtmp {
|
||||||
|
server {
|
||||||
|
listen 1935;
|
||||||
|
listen [::]:1935 ipv6only=on;
|
||||||
|
|
||||||
|
application live {
|
||||||
|
live on;
|
||||||
|
record off;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
You can start from it and modify it as you need. Here's the [documentation related to `nginx-rtmp-module`](https://github.com/arut/nginx-rtmp-module/wiki/Directives).
|
||||||
|
|
||||||
|
## Technical details
|
||||||
|
|
||||||
|
* This image is built from the same base official images that most of the other official images, as Python, Node, Postgres, Nginx itself, etc. Specifically, [buildpack-deps](https://hub.docker.com/_/buildpack-deps/) which is in turn based on [debian](https://hub.docker.com/_/debian/). So, if you have any other image locally you probably have the base image layers already downloaded.
|
||||||
|
|
||||||
|
* It is built from the official sources of **Nginx** and **nginx-rtmp-module** without adding anything else. (Surprisingly, most of the available images that include **nginx-rtmp-module** are made from different sources, old versions or add several other components).
|
||||||
|
|
||||||
|
* It has a simple default configuration that should allow you to send one or more streams to it and have several clients receiving multiple copies of those streams simultaneously. (It includes `rtmp_auto_push` and an automatic number of worker processes).
|
||||||
|
|
||||||
|
## License
|
||||||
|
|
||||||
|
This project is licensed under the terms of the MIT License.
|
||||||
8
docker-compose.yml
Normal file
8
docker-compose.yml
Normal file
@ -0,0 +1,8 @@
|
|||||||
|
version: '3'
|
||||||
|
|
||||||
|
services:
|
||||||
|
nginx-rtmp:
|
||||||
|
build: .
|
||||||
|
ports:
|
||||||
|
- 1935:1935
|
||||||
|
- 80:80
|
||||||
55
nginx.conf
Normal file
55
nginx.conf
Normal file
@ -0,0 +1,55 @@
|
|||||||
|
worker_processes auto;
|
||||||
|
rtmp_auto_push on;
|
||||||
|
events {}
|
||||||
|
rtmp {
|
||||||
|
server {
|
||||||
|
listen 1935;
|
||||||
|
listen [::]:1935 ipv6only=on;
|
||||||
|
|
||||||
|
application live {
|
||||||
|
live on;
|
||||||
|
hls on;
|
||||||
|
hls_path /tmp/hls;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
http {
|
||||||
|
|
||||||
|
server {
|
||||||
|
|
||||||
|
autoindex on;
|
||||||
|
listen 80;
|
||||||
|
|
||||||
|
# Frontpage
|
||||||
|
location / {
|
||||||
|
root /usr/share/nginx/html/;
|
||||||
|
}
|
||||||
|
|
||||||
|
# This URL provides RTMP statistics in XML
|
||||||
|
location /stat {
|
||||||
|
rtmp_stat all;
|
||||||
|
|
||||||
|
# Use this stylesheet to view XML as web page
|
||||||
|
# in browser
|
||||||
|
rtmp_stat_stylesheet stat.xsl;
|
||||||
|
}
|
||||||
|
|
||||||
|
location /stat.xsl {
|
||||||
|
# XML stylesheet to view RTMP stats.
|
||||||
|
# Copy stat.xsl wherever you want
|
||||||
|
# and put the full directory path here
|
||||||
|
root /tmp;
|
||||||
|
}
|
||||||
|
|
||||||
|
location /hls {
|
||||||
|
# Serve HLS fragments
|
||||||
|
types {
|
||||||
|
application/vnd.apple.mpegurl m3u8;
|
||||||
|
video/mp2t ts;
|
||||||
|
}
|
||||||
|
root /tmp;
|
||||||
|
add_header Cache-Control no-cache;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
355
stat.xsl
Normal file
355
stat.xsl
Normal file
@ -0,0 +1,355 @@
|
|||||||
|
<?xml version="1.0" encoding="utf-8" ?>
|
||||||
|
|
||||||
|
|
||||||
|
<!--
|
||||||
|
Copyright (C) Roman Arutyunyan
|
||||||
|
-->
|
||||||
|
|
||||||
|
|
||||||
|
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
|
||||||
|
|
||||||
|
|
||||||
|
<xsl:template match="/">
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>RTMP statistics</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<xsl:apply-templates select="rtmp"/>
|
||||||
|
<hr/>
|
||||||
|
Generated by <a href='https://github.com/arut/nginx-rtmp-module'>
|
||||||
|
nginx-rtmp-module</a> <xsl:value-of select="/rtmp/nginx_rtmp_version"/>,
|
||||||
|
<a href="http://nginx.org">nginx</a> <xsl:value-of select="/rtmp/nginx_version"/>,
|
||||||
|
pid <xsl:value-of select="/rtmp/pid"/>,
|
||||||
|
built <xsl:value-of select="/rtmp/built"/> <xsl:value-of select="/rtmp/compiler"/>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
</xsl:template>
|
||||||
|
|
||||||
|
<xsl:template match="rtmp">
|
||||||
|
<table cellspacing="1" cellpadding="5">
|
||||||
|
<tr bgcolor="#999999">
|
||||||
|
<th>RTMP</th>
|
||||||
|
<th>#clients</th>
|
||||||
|
<th colspan="4">Video</th>
|
||||||
|
<th colspan="4">Audio</th>
|
||||||
|
<th>In bytes</th>
|
||||||
|
<th>Out bytes</th>
|
||||||
|
<th>In bits/s</th>
|
||||||
|
<th>Out bits/s</th>
|
||||||
|
<th>State</th>
|
||||||
|
<th>Time</th>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td colspan="2">Accepted: <xsl:value-of select="naccepted"/></td>
|
||||||
|
<th bgcolor="#999999">codec</th>
|
||||||
|
<th bgcolor="#999999">bits/s</th>
|
||||||
|
<th bgcolor="#999999">size</th>
|
||||||
|
<th bgcolor="#999999">fps</th>
|
||||||
|
<th bgcolor="#999999">codec</th>
|
||||||
|
<th bgcolor="#999999">bits/s</th>
|
||||||
|
<th bgcolor="#999999">freq</th>
|
||||||
|
<th bgcolor="#999999">chan</th>
|
||||||
|
<td>
|
||||||
|
<xsl:call-template name="showsize">
|
||||||
|
<xsl:with-param name="size" select="bytes_in"/>
|
||||||
|
</xsl:call-template>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<xsl:call-template name="showsize">
|
||||||
|
<xsl:with-param name="size" select="bytes_out"/>
|
||||||
|
</xsl:call-template>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<xsl:call-template name="showsize">
|
||||||
|
<xsl:with-param name="size" select="bw_in"/>
|
||||||
|
<xsl:with-param name="bits" select="1"/>
|
||||||
|
<xsl:with-param name="persec" select="1"/>
|
||||||
|
</xsl:call-template>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<xsl:call-template name="showsize">
|
||||||
|
<xsl:with-param name="size" select="bw_out"/>
|
||||||
|
<xsl:with-param name="bits" select="1"/>
|
||||||
|
<xsl:with-param name="persec" select="1"/>
|
||||||
|
</xsl:call-template>
|
||||||
|
</td>
|
||||||
|
<td/>
|
||||||
|
<td>
|
||||||
|
<xsl:call-template name="showtime">
|
||||||
|
<xsl:with-param name="time" select="/rtmp/uptime * 1000"/>
|
||||||
|
</xsl:call-template>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<xsl:apply-templates select="server"/>
|
||||||
|
</table>
|
||||||
|
</xsl:template>
|
||||||
|
|
||||||
|
<xsl:template match="server">
|
||||||
|
<xsl:apply-templates select="application"/>
|
||||||
|
</xsl:template>
|
||||||
|
|
||||||
|
<xsl:template match="application">
|
||||||
|
<tr bgcolor="#999999">
|
||||||
|
<td>
|
||||||
|
<b><xsl:value-of select="name"/></b>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<xsl:apply-templates select="live"/>
|
||||||
|
<xsl:apply-templates select="play"/>
|
||||||
|
</xsl:template>
|
||||||
|
|
||||||
|
<xsl:template match="live">
|
||||||
|
<tr bgcolor="#aaaaaa">
|
||||||
|
<td>
|
||||||
|
<i>live streams</i>
|
||||||
|
</td>
|
||||||
|
<td align="middle">
|
||||||
|
<xsl:value-of select="nclients"/>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<xsl:apply-templates select="stream"/>
|
||||||
|
</xsl:template>
|
||||||
|
|
||||||
|
<xsl:template match="play">
|
||||||
|
<tr bgcolor="#aaaaaa">
|
||||||
|
<td>
|
||||||
|
<i>vod streams</i>
|
||||||
|
</td>
|
||||||
|
<td align="middle">
|
||||||
|
<xsl:value-of select="nclients"/>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<xsl:apply-templates select="stream"/>
|
||||||
|
</xsl:template>
|
||||||
|
|
||||||
|
<xsl:template match="stream">
|
||||||
|
<tr valign="top">
|
||||||
|
<xsl:attribute name="bgcolor">
|
||||||
|
<xsl:choose>
|
||||||
|
<xsl:when test="active">#cccccc</xsl:when>
|
||||||
|
<xsl:otherwise>#dddddd</xsl:otherwise>
|
||||||
|
</xsl:choose>
|
||||||
|
</xsl:attribute>
|
||||||
|
<td>
|
||||||
|
<a href="">
|
||||||
|
<xsl:attribute name="onclick">
|
||||||
|
var d=document.getElementById('<xsl:value-of select="../../name"/>-<xsl:value-of select="name"/>');
|
||||||
|
d.style.display=d.style.display=='none'?'':'none';
|
||||||
|
return false
|
||||||
|
</xsl:attribute>
|
||||||
|
<xsl:value-of select="name"/>
|
||||||
|
<xsl:if test="string-length(name) = 0">
|
||||||
|
[EMPTY]
|
||||||
|
</xsl:if>
|
||||||
|
</a>
|
||||||
|
</td>
|
||||||
|
<td align="middle"> <xsl:value-of select="nclients"/> </td>
|
||||||
|
<td>
|
||||||
|
<xsl:value-of select="meta/video/codec"/> <xsl:value-of select="meta/video/profile"/> <xsl:value-of select="meta/video/level"/>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<xsl:call-template name="showsize">
|
||||||
|
<xsl:with-param name="size" select="bw_video"/>
|
||||||
|
<xsl:with-param name="bits" select="1"/>
|
||||||
|
<xsl:with-param name="persec" select="1"/>
|
||||||
|
</xsl:call-template>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<xsl:apply-templates select="meta/video/width"/>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<xsl:value-of select="meta/video/frame_rate"/>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<xsl:value-of select="meta/audio/codec"/> <xsl:value-of select="meta/audio/profile"/>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<xsl:call-template name="showsize">
|
||||||
|
<xsl:with-param name="size" select="bw_audio"/>
|
||||||
|
<xsl:with-param name="bits" select="1"/>
|
||||||
|
<xsl:with-param name="persec" select="1"/>
|
||||||
|
</xsl:call-template>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<xsl:apply-templates select="meta/audio/sample_rate"/>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<xsl:value-of select="meta/audio/channels"/>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<xsl:call-template name="showsize">
|
||||||
|
<xsl:with-param name="size" select="bytes_in"/>
|
||||||
|
</xsl:call-template>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<xsl:call-template name="showsize">
|
||||||
|
<xsl:with-param name="size" select="bytes_out"/>
|
||||||
|
</xsl:call-template>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<xsl:call-template name="showsize">
|
||||||
|
<xsl:with-param name="size" select="bw_in"/>
|
||||||
|
<xsl:with-param name="bits" select="1"/>
|
||||||
|
<xsl:with-param name="persec" select="1"/>
|
||||||
|
</xsl:call-template>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<xsl:call-template name="showsize">
|
||||||
|
<xsl:with-param name="size" select="bw_out"/>
|
||||||
|
<xsl:with-param name="bits" select="1"/>
|
||||||
|
<xsl:with-param name="persec" select="1"/>
|
||||||
|
</xsl:call-template>
|
||||||
|
</td>
|
||||||
|
<td><xsl:call-template name="streamstate"/></td>
|
||||||
|
<td>
|
||||||
|
<xsl:call-template name="showtime">
|
||||||
|
<xsl:with-param name="time" select="time"/>
|
||||||
|
</xsl:call-template>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr style="display:none">
|
||||||
|
<xsl:attribute name="id">
|
||||||
|
<xsl:value-of select="../../name"/>-<xsl:value-of select="name"/>
|
||||||
|
</xsl:attribute>
|
||||||
|
<td colspan="16" ngcolor="#eeeeee">
|
||||||
|
<table cellspacing="1" cellpadding="5">
|
||||||
|
<tr>
|
||||||
|
<th>Id</th>
|
||||||
|
<th>State</th>
|
||||||
|
<th>Address</th>
|
||||||
|
<th>Flash version</th>
|
||||||
|
<th>Page URL</th>
|
||||||
|
<th>SWF URL</th>
|
||||||
|
<th>Dropped</th>
|
||||||
|
<th>Timestamp</th>
|
||||||
|
<th>A-V</th>
|
||||||
|
<th>Time</th>
|
||||||
|
</tr>
|
||||||
|
<xsl:apply-templates select="client"/>
|
||||||
|
</table>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</xsl:template>
|
||||||
|
|
||||||
|
<xsl:template name="showtime">
|
||||||
|
<xsl:param name="time"/>
|
||||||
|
|
||||||
|
<xsl:if test="$time > 0">
|
||||||
|
<xsl:variable name="sec">
|
||||||
|
<xsl:value-of select="floor($time div 1000)"/>
|
||||||
|
</xsl:variable>
|
||||||
|
|
||||||
|
<xsl:if test="$sec >= 86400">
|
||||||
|
<xsl:value-of select="floor($sec div 86400)"/>d
|
||||||
|
</xsl:if>
|
||||||
|
|
||||||
|
<xsl:if test="$sec >= 3600">
|
||||||
|
<xsl:value-of select="(floor($sec div 3600)) mod 24"/>h
|
||||||
|
</xsl:if>
|
||||||
|
|
||||||
|
<xsl:if test="$sec >= 60">
|
||||||
|
<xsl:value-of select="(floor($sec div 60)) mod 60"/>m
|
||||||
|
</xsl:if>
|
||||||
|
|
||||||
|
<xsl:value-of select="$sec mod 60"/>s
|
||||||
|
</xsl:if>
|
||||||
|
</xsl:template>
|
||||||
|
|
||||||
|
<xsl:template name="showsize">
|
||||||
|
<xsl:param name="size"/>
|
||||||
|
<xsl:param name="bits" select="0" />
|
||||||
|
<xsl:param name="persec" select="0" />
|
||||||
|
<xsl:variable name="sizen">
|
||||||
|
<xsl:value-of select="floor($size div 1024)"/>
|
||||||
|
</xsl:variable>
|
||||||
|
<xsl:choose>
|
||||||
|
<xsl:when test="$sizen >= 1073741824">
|
||||||
|
<xsl:value-of select="format-number($sizen div 1073741824,'#.###')"/> T</xsl:when>
|
||||||
|
|
||||||
|
<xsl:when test="$sizen >= 1048576">
|
||||||
|
<xsl:value-of select="format-number($sizen div 1048576,'#.###')"/> G</xsl:when>
|
||||||
|
|
||||||
|
<xsl:when test="$sizen >= 1024">
|
||||||
|
<xsl:value-of select="format-number($sizen div 1024,'#.##')"/> M</xsl:when>
|
||||||
|
<xsl:when test="$sizen >= 0">
|
||||||
|
<xsl:value-of select="$sizen"/> K</xsl:when>
|
||||||
|
</xsl:choose>
|
||||||
|
<xsl:if test="string-length($size) > 0">
|
||||||
|
<xsl:choose>
|
||||||
|
<xsl:when test="$bits = 1">b</xsl:when>
|
||||||
|
<xsl:otherwise>B</xsl:otherwise>
|
||||||
|
</xsl:choose>
|
||||||
|
<xsl:if test="$persec = 1">/s</xsl:if>
|
||||||
|
</xsl:if>
|
||||||
|
</xsl:template>
|
||||||
|
|
||||||
|
<xsl:template name="streamstate">
|
||||||
|
<xsl:choose>
|
||||||
|
<xsl:when test="active">active</xsl:when>
|
||||||
|
<xsl:otherwise>idle</xsl:otherwise>
|
||||||
|
</xsl:choose>
|
||||||
|
</xsl:template>
|
||||||
|
|
||||||
|
|
||||||
|
<xsl:template name="clientstate">
|
||||||
|
<xsl:choose>
|
||||||
|
<xsl:when test="publishing">publishing</xsl:when>
|
||||||
|
<xsl:otherwise>playing</xsl:otherwise>
|
||||||
|
</xsl:choose>
|
||||||
|
</xsl:template>
|
||||||
|
|
||||||
|
|
||||||
|
<xsl:template match="client">
|
||||||
|
<tr>
|
||||||
|
<xsl:attribute name="bgcolor">
|
||||||
|
<xsl:choose>
|
||||||
|
<xsl:when test="publishing">#cccccc</xsl:when>
|
||||||
|
<xsl:otherwise>#eeeeee</xsl:otherwise>
|
||||||
|
</xsl:choose>
|
||||||
|
</xsl:attribute>
|
||||||
|
<td><xsl:value-of select="id"/></td>
|
||||||
|
<td><xsl:call-template name="clientstate"/></td>
|
||||||
|
<td>
|
||||||
|
<a target="_blank">
|
||||||
|
<xsl:attribute name="href">
|
||||||
|
http://apps.db.ripe.net/search/query.html?searchtext=<xsl:value-of select="address"/>
|
||||||
|
</xsl:attribute>
|
||||||
|
<xsl:attribute name="title">whois</xsl:attribute>
|
||||||
|
<xsl:value-of select="address"/>
|
||||||
|
</a>
|
||||||
|
</td>
|
||||||
|
<td><xsl:value-of select="flashver"/></td>
|
||||||
|
<td>
|
||||||
|
<a target="_blank">
|
||||||
|
<xsl:attribute name="href">
|
||||||
|
<xsl:value-of select="pageurl"/>
|
||||||
|
</xsl:attribute>
|
||||||
|
<xsl:value-of select="pageurl"/>
|
||||||
|
</a>
|
||||||
|
</td>
|
||||||
|
<td><xsl:value-of select="swfurl"/></td>
|
||||||
|
<td><xsl:value-of select="dropped"/></td>
|
||||||
|
<td><xsl:value-of select="timestamp"/></td>
|
||||||
|
<td><xsl:value-of select="avsync"/></td>
|
||||||
|
<td>
|
||||||
|
<xsl:call-template name="showtime">
|
||||||
|
<xsl:with-param name="time" select="time"/>
|
||||||
|
</xsl:call-template>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</xsl:template>
|
||||||
|
|
||||||
|
<xsl:template match="publishing">
|
||||||
|
publishing
|
||||||
|
</xsl:template>
|
||||||
|
|
||||||
|
<xsl:template match="active">
|
||||||
|
active
|
||||||
|
</xsl:template>
|
||||||
|
|
||||||
|
<xsl:template match="width">
|
||||||
|
<xsl:value-of select="."/>x<xsl:value-of select="../height"/>
|
||||||
|
</xsl:template>
|
||||||
|
|
||||||
|
</xsl:stylesheet>
|
||||||
10
webpage/.editorconfig
Normal file
10
webpage/.editorconfig
Normal file
@ -0,0 +1,10 @@
|
|||||||
|
# editorconfig.org
|
||||||
|
|
||||||
|
root = true
|
||||||
|
|
||||||
|
[*]
|
||||||
|
charset = utf-8
|
||||||
|
indent_size = 2
|
||||||
|
indent_style = space
|
||||||
|
insert_final_newline = true
|
||||||
|
trim_trailing_whitespace = true
|
||||||
194
webpage/.gitattributes
vendored
Normal file
194
webpage/.gitattributes
vendored
Normal file
@ -0,0 +1,194 @@
|
|||||||
|
## GITATTRIBUTES FOR WEB PROJECTS
|
||||||
|
#
|
||||||
|
# These settings are for any web project.
|
||||||
|
#
|
||||||
|
# Details per file setting:
|
||||||
|
# text These files should be normalized (i.e. convert CRLF to LF).
|
||||||
|
# binary These files are binary and should be left untouched.
|
||||||
|
#
|
||||||
|
# Note that binary is a macro for -text -diff.
|
||||||
|
######################################################################
|
||||||
|
|
||||||
|
## AUTO-DETECT
|
||||||
|
## Handle line endings automatically for files detected as
|
||||||
|
## text and leave all files detected as binary untouched.
|
||||||
|
## This will handle all files NOT defined below.
|
||||||
|
* text=auto
|
||||||
|
|
||||||
|
## SOURCE CODE
|
||||||
|
*.bat text eol=crlf
|
||||||
|
*.coffee text
|
||||||
|
*.css text
|
||||||
|
*.htm text
|
||||||
|
*.html text
|
||||||
|
*.inc text
|
||||||
|
*.ini text
|
||||||
|
*.js text
|
||||||
|
*.json text
|
||||||
|
*.jsx text
|
||||||
|
*.less text
|
||||||
|
*.od text
|
||||||
|
*.onlydata text
|
||||||
|
*.php text
|
||||||
|
*.pl text
|
||||||
|
*.py text
|
||||||
|
*.rb text
|
||||||
|
*.sass text
|
||||||
|
*.scm text
|
||||||
|
*.scss text
|
||||||
|
*.sh text eol=lf
|
||||||
|
*.sql text
|
||||||
|
*.styl text
|
||||||
|
*.tag text
|
||||||
|
*.ts text
|
||||||
|
*.tsx text
|
||||||
|
*.xml text
|
||||||
|
*.xhtml text
|
||||||
|
|
||||||
|
## DOCKER
|
||||||
|
*.dockerignore text
|
||||||
|
Dockerfile text
|
||||||
|
|
||||||
|
## DOCUMENTATION
|
||||||
|
*.markdown text
|
||||||
|
*.md text
|
||||||
|
*.mdwn text
|
||||||
|
*.mdown text
|
||||||
|
*.mkd text
|
||||||
|
*.mkdn text
|
||||||
|
*.mdtxt text
|
||||||
|
*.mdtext text
|
||||||
|
*.txt text
|
||||||
|
AUTHORS text
|
||||||
|
CHANGELOG text
|
||||||
|
CHANGES text
|
||||||
|
CONTRIBUTING text
|
||||||
|
COPYING text
|
||||||
|
copyright text
|
||||||
|
*COPYRIGHT* text
|
||||||
|
INSTALL text
|
||||||
|
license text
|
||||||
|
LICENSE text
|
||||||
|
NEWS text
|
||||||
|
readme text
|
||||||
|
*README* text
|
||||||
|
TODO text
|
||||||
|
|
||||||
|
## TEMPLATES
|
||||||
|
*.dot text
|
||||||
|
*.ejs text
|
||||||
|
*.haml text
|
||||||
|
*.handlebars text
|
||||||
|
*.hbs text
|
||||||
|
*.hbt text
|
||||||
|
*.jade text
|
||||||
|
*.latte text
|
||||||
|
*.mustache text
|
||||||
|
*.njk text
|
||||||
|
*.phtml text
|
||||||
|
*.tmpl text
|
||||||
|
*.tpl text
|
||||||
|
*.twig text
|
||||||
|
|
||||||
|
## LINTERS
|
||||||
|
.babelrc text
|
||||||
|
.csslintrc text
|
||||||
|
.eslintrc text
|
||||||
|
.htmlhintrc text
|
||||||
|
.jscsrc text
|
||||||
|
.jshintrc text
|
||||||
|
.jshintignore text
|
||||||
|
.prettierrc text
|
||||||
|
.stylelintrc text
|
||||||
|
|
||||||
|
## CONFIGS
|
||||||
|
*.bowerrc text
|
||||||
|
*.cnf text
|
||||||
|
*.conf text
|
||||||
|
*.config text
|
||||||
|
.browserslistrc text
|
||||||
|
.editorconfig text
|
||||||
|
.gitattributes text
|
||||||
|
.gitconfig text
|
||||||
|
.gitignore text
|
||||||
|
.htaccess text
|
||||||
|
*.npmignore text
|
||||||
|
*.yaml text
|
||||||
|
*.yml text
|
||||||
|
browserslist text
|
||||||
|
Makefile text
|
||||||
|
makefile text
|
||||||
|
|
||||||
|
## HEROKU
|
||||||
|
Procfile text
|
||||||
|
.slugignore text
|
||||||
|
|
||||||
|
## GRAPHICS
|
||||||
|
*.ai binary
|
||||||
|
*.bmp binary
|
||||||
|
*.eps binary
|
||||||
|
*.gif binary
|
||||||
|
*.ico binary
|
||||||
|
*.jng binary
|
||||||
|
*.jp2 binary
|
||||||
|
*.jpg binary
|
||||||
|
*.jpeg binary
|
||||||
|
*.jpx binary
|
||||||
|
*.jxr binary
|
||||||
|
*.pdf binary
|
||||||
|
*.png binary
|
||||||
|
*.psb binary
|
||||||
|
*.psd binary
|
||||||
|
*.svg text
|
||||||
|
*.svgz binary
|
||||||
|
*.tif binary
|
||||||
|
*.tiff binary
|
||||||
|
*.wbmp binary
|
||||||
|
*.webp binary
|
||||||
|
|
||||||
|
## AUDIO
|
||||||
|
*.kar binary
|
||||||
|
*.m4a binary
|
||||||
|
*.mid binary
|
||||||
|
*.midi binary
|
||||||
|
*.mp3 binary
|
||||||
|
*.ogg binary
|
||||||
|
*.ra binary
|
||||||
|
|
||||||
|
## VIDEO
|
||||||
|
*.3gpp binary
|
||||||
|
*.3gp binary
|
||||||
|
*.as binary
|
||||||
|
*.asf binary
|
||||||
|
*.asx binary
|
||||||
|
*.fla binary
|
||||||
|
*.flv binary
|
||||||
|
*.m4v binary
|
||||||
|
*.mng binary
|
||||||
|
*.mov binary
|
||||||
|
*.mp4 binary
|
||||||
|
*.mpeg binary
|
||||||
|
*.mpg binary
|
||||||
|
*.ogv binary
|
||||||
|
*.swc binary
|
||||||
|
*.swf binary
|
||||||
|
*.webm binary
|
||||||
|
|
||||||
|
## ARCHIVES
|
||||||
|
*.7z binary
|
||||||
|
*.gz binary
|
||||||
|
*.jar binary
|
||||||
|
*.rar binary
|
||||||
|
*.tar binary
|
||||||
|
*.zip binary
|
||||||
|
|
||||||
|
## FONTS
|
||||||
|
*.ttf binary
|
||||||
|
*.eot binary
|
||||||
|
*.otf binary
|
||||||
|
*.woff binary
|
||||||
|
*.woff2 binary
|
||||||
|
|
||||||
|
## EXECUTABLES
|
||||||
|
*.exe binary
|
||||||
|
*.pyc binary
|
||||||
3
webpage/.gitignore
vendored
Normal file
3
webpage/.gitignore
vendored
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
# Include your project-specific ignores in this file
|
||||||
|
# Read about how to use .gitignore: https://help.github.com/articles/ignoring-files
|
||||||
|
# Useful .gitignore templates: https://github.com/github/gitignore
|
||||||
1218
webpage/.htaccess
Normal file
1218
webpage/.htaccess
Normal file
File diff suppressed because it is too large
Load Diff
62
webpage/404.html
Normal file
62
webpage/404.html
Normal file
@ -0,0 +1,62 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>Page Not Found</title>
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<style>
|
||||||
|
* {
|
||||||
|
line-height: 1.2;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
color: #888;
|
||||||
|
display: table;
|
||||||
|
font-family: sans-serif;
|
||||||
|
height: 100%;
|
||||||
|
text-align: center;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
display: table-cell;
|
||||||
|
vertical-align: middle;
|
||||||
|
margin: 2em auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
color: #555;
|
||||||
|
font-size: 2em;
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
margin: 0 auto;
|
||||||
|
width: 280px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (max-width: 280px) {
|
||||||
|
|
||||||
|
body,
|
||||||
|
p {
|
||||||
|
width: 95%;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: 1.5em;
|
||||||
|
margin: 0 0 0.3em;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<h1>Page Not Found</h1>
|
||||||
|
<p>Sorry, but the page you were trying to view does not exist.</p>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
|
<!-- IE needs 512+ bytes: https://blogs.msdn.microsoft.com/ieinternals/2010/08/18/friendly-http-error-pages/ -->
|
||||||
19
webpage/LICENSE.txt
Normal file
19
webpage/LICENSE.txt
Normal file
@ -0,0 +1,19 @@
|
|||||||
|
Copyright (c) HTML5 Boilerplate
|
||||||
|
|
||||||
|
Permission is hereby granted, free of charge, to any person obtaining a copy of
|
||||||
|
this software and associated documentation files (the "Software"), to deal in
|
||||||
|
the Software without restriction, including without limitation the rights to
|
||||||
|
use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
|
||||||
|
of the Software, and to permit persons to whom the Software is furnished to do
|
||||||
|
so, subject to the following conditions:
|
||||||
|
|
||||||
|
The above copyright notice and this permission notice shall be included in all
|
||||||
|
copies or substantial portions of the Software.
|
||||||
|
|
||||||
|
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||||
|
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||||
|
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||||
|
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||||
|
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||||
|
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||||
|
SOFTWARE.
|
||||||
12
webpage/browserconfig.xml
Normal file
12
webpage/browserconfig.xml
Normal file
@ -0,0 +1,12 @@
|
|||||||
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
|
<!-- Please read: https://msdn.microsoft.com/en-us/library/ie/dn455106.aspx -->
|
||||||
|
<browserconfig>
|
||||||
|
<msapplication>
|
||||||
|
<tile>
|
||||||
|
<square70x70logo src="tile.png"/>
|
||||||
|
<square150x150logo src="tile.png"/>
|
||||||
|
<wide310x150logo src="tile-wide.png"/>
|
||||||
|
<square310x310logo src="tile.png"/>
|
||||||
|
</tile>
|
||||||
|
</msapplication>
|
||||||
|
</browserconfig>
|
||||||
265
webpage/css/main.css
Normal file
265
webpage/css/main.css
Normal file
@ -0,0 +1,265 @@
|
|||||||
|
/*! HTML5 Boilerplate v7.3.0 | MIT License | https://html5boilerplate.com/ */
|
||||||
|
|
||||||
|
/* main.css 2.0.0 | MIT License | https://github.com/h5bp/main.css#readme */
|
||||||
|
/*
|
||||||
|
* What follows is the result of much research on cross-browser styling.
|
||||||
|
* Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
|
||||||
|
* Kroc Camen, and the H5BP dev community and team.
|
||||||
|
*/
|
||||||
|
|
||||||
|
/* ==========================================================================
|
||||||
|
Base styles: opinionated defaults
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
html {
|
||||||
|
color: #222;
|
||||||
|
font-size: 1em;
|
||||||
|
line-height: 1.4;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Remove text-shadow in selection highlight:
|
||||||
|
* https://twitter.com/miketaylr/status/12228805301
|
||||||
|
*
|
||||||
|
* Vendor-prefixed and regular ::selection selectors cannot be combined:
|
||||||
|
* https://stackoverflow.com/a/16982510/7133471
|
||||||
|
*
|
||||||
|
* Customize the background color to match your design.
|
||||||
|
*/
|
||||||
|
|
||||||
|
::-moz-selection {
|
||||||
|
background: #b3d4fc;
|
||||||
|
text-shadow: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
::selection {
|
||||||
|
background: #b3d4fc;
|
||||||
|
text-shadow: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* A better looking default horizontal rule
|
||||||
|
*/
|
||||||
|
|
||||||
|
hr {
|
||||||
|
display: block;
|
||||||
|
height: 1px;
|
||||||
|
border: 0;
|
||||||
|
border-top: 1px solid #ccc;
|
||||||
|
margin: 1em 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Remove the gap between audio, canvas, iframes,
|
||||||
|
* images, videos and the bottom of their containers:
|
||||||
|
* https://github.com/h5bp/html5-boilerplate/issues/440
|
||||||
|
*/
|
||||||
|
|
||||||
|
audio,
|
||||||
|
canvas,
|
||||||
|
iframe,
|
||||||
|
img,
|
||||||
|
svg,
|
||||||
|
video {
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Remove default fieldset styles.
|
||||||
|
*/
|
||||||
|
|
||||||
|
fieldset {
|
||||||
|
border: 0;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Allow only vertical resizing of textareas.
|
||||||
|
*/
|
||||||
|
|
||||||
|
textarea {
|
||||||
|
resize: vertical;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ==========================================================================
|
||||||
|
Browser Upgrade Prompt
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
.browserupgrade {
|
||||||
|
margin: 0.2em 0;
|
||||||
|
background: #ccc;
|
||||||
|
color: #000;
|
||||||
|
padding: 0.2em 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ==========================================================================
|
||||||
|
Author's custom styles
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
/* ==========================================================================
|
||||||
|
Helper classes
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Hide visually and from screen readers
|
||||||
|
*/
|
||||||
|
|
||||||
|
.hidden {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Hide only visually, but have it available for screen readers:
|
||||||
|
* https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
|
||||||
|
*
|
||||||
|
* 1. For long content, line feeds are not interpreted as spaces and small width
|
||||||
|
* causes content to wrap 1 word per line:
|
||||||
|
* https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
|
||||||
|
*/
|
||||||
|
|
||||||
|
.sr-only {
|
||||||
|
border: 0;
|
||||||
|
clip: rect(0, 0, 0, 0);
|
||||||
|
height: 1px;
|
||||||
|
margin: -1px;
|
||||||
|
overflow: hidden;
|
||||||
|
padding: 0;
|
||||||
|
position: absolute;
|
||||||
|
white-space: nowrap;
|
||||||
|
width: 1px;
|
||||||
|
/* 1 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Extends the .sr-only class to allow the element
|
||||||
|
* to be focusable when navigated to via the keyboard:
|
||||||
|
* https://www.drupal.org/node/897638
|
||||||
|
*/
|
||||||
|
|
||||||
|
.sr-only.focusable:active,
|
||||||
|
.sr-only.focusable:focus {
|
||||||
|
clip: auto;
|
||||||
|
height: auto;
|
||||||
|
margin: 0;
|
||||||
|
overflow: visible;
|
||||||
|
position: static;
|
||||||
|
white-space: inherit;
|
||||||
|
width: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Hide visually and from screen readers, but maintain layout
|
||||||
|
*/
|
||||||
|
|
||||||
|
.invisible {
|
||||||
|
visibility: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Clearfix: contain floats
|
||||||
|
*
|
||||||
|
* For modern browsers
|
||||||
|
* 1. The space content is one way to avoid an Opera bug when the
|
||||||
|
* `contenteditable` attribute is included anywhere else in the document.
|
||||||
|
* Otherwise it causes space to appear at the top and bottom of elements
|
||||||
|
* that receive the `clearfix` class.
|
||||||
|
* 2. The use of `table` rather than `block` is only necessary if using
|
||||||
|
* `:before` to contain the top-margins of child elements.
|
||||||
|
*/
|
||||||
|
|
||||||
|
.clearfix:before,
|
||||||
|
.clearfix:after {
|
||||||
|
content: " ";
|
||||||
|
/* 1 */
|
||||||
|
display: table;
|
||||||
|
/* 2 */
|
||||||
|
}
|
||||||
|
|
||||||
|
.clearfix:after {
|
||||||
|
clear: both;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ==========================================================================
|
||||||
|
EXAMPLE Media Queries for Responsive Design.
|
||||||
|
These examples override the primary ('mobile first') styles.
|
||||||
|
Modify as content requires.
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
@media only screen and (min-width: 35em) {
|
||||||
|
/* Style adjustments for viewports that meet the condition */
|
||||||
|
}
|
||||||
|
|
||||||
|
@media print,
|
||||||
|
(-webkit-min-device-pixel-ratio: 1.25),
|
||||||
|
(min-resolution: 1.25dppx),
|
||||||
|
(min-resolution: 120dpi) {
|
||||||
|
/* Style adjustments for high resolution devices */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ==========================================================================
|
||||||
|
Print styles.
|
||||||
|
Inlined to avoid the additional HTTP request:
|
||||||
|
https://www.phpied.com/delay-loading-your-print-css/
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
@media print {
|
||||||
|
*,
|
||||||
|
*:before,
|
||||||
|
*:after {
|
||||||
|
background: transparent !important;
|
||||||
|
color: #000 !important;
|
||||||
|
/* Black prints faster */
|
||||||
|
box-shadow: none !important;
|
||||||
|
text-shadow: none !important;
|
||||||
|
}
|
||||||
|
a,
|
||||||
|
a:visited {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
a[href]:after {
|
||||||
|
content: " (" attr(href) ")";
|
||||||
|
}
|
||||||
|
abbr[title]:after {
|
||||||
|
content: " (" attr(title) ")";
|
||||||
|
}
|
||||||
|
/*
|
||||||
|
* Don't show links that are fragment identifiers,
|
||||||
|
* or use the `javascript:` pseudo protocol
|
||||||
|
*/
|
||||||
|
a[href^="#"]:after,
|
||||||
|
a[href^="javascript:"]:after {
|
||||||
|
content: "";
|
||||||
|
}
|
||||||
|
pre {
|
||||||
|
white-space: pre-wrap !important;
|
||||||
|
}
|
||||||
|
pre,
|
||||||
|
blockquote {
|
||||||
|
border: 1px solid #999;
|
||||||
|
page-break-inside: avoid;
|
||||||
|
}
|
||||||
|
/*
|
||||||
|
* Printing Tables:
|
||||||
|
* https://web.archive.org/web/20180815150934/http://css-discuss.incutio.com/wiki/Printing_Tables
|
||||||
|
*/
|
||||||
|
thead {
|
||||||
|
display: table-header-group;
|
||||||
|
}
|
||||||
|
tr,
|
||||||
|
img {
|
||||||
|
page-break-inside: avoid;
|
||||||
|
}
|
||||||
|
p,
|
||||||
|
h2,
|
||||||
|
h3 {
|
||||||
|
orphans: 3;
|
||||||
|
widows: 3;
|
||||||
|
}
|
||||||
|
h2,
|
||||||
|
h3 {
|
||||||
|
page-break-after: avoid;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
349
webpage/css/normalize.css
vendored
Normal file
349
webpage/css/normalize.css
vendored
Normal file
@ -0,0 +1,349 @@
|
|||||||
|
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
|
||||||
|
|
||||||
|
/* Document
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 1. Correct the line height in all browsers.
|
||||||
|
* 2. Prevent adjustments of font size after orientation changes in iOS.
|
||||||
|
*/
|
||||||
|
|
||||||
|
html {
|
||||||
|
line-height: 1.15; /* 1 */
|
||||||
|
-webkit-text-size-adjust: 100%; /* 2 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Sections
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Remove the margin in all browsers.
|
||||||
|
*/
|
||||||
|
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Render the `main` element consistently in IE.
|
||||||
|
*/
|
||||||
|
|
||||||
|
main {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Correct the font size and margin on `h1` elements within `section` and
|
||||||
|
* `article` contexts in Chrome, Firefox, and Safari.
|
||||||
|
*/
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: 2em;
|
||||||
|
margin: 0.67em 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Grouping content
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 1. Add the correct box sizing in Firefox.
|
||||||
|
* 2. Show the overflow in Edge and IE.
|
||||||
|
*/
|
||||||
|
|
||||||
|
hr {
|
||||||
|
box-sizing: content-box; /* 1 */
|
||||||
|
height: 0; /* 1 */
|
||||||
|
overflow: visible; /* 2 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 1. Correct the inheritance and scaling of font size in all browsers.
|
||||||
|
* 2. Correct the odd `em` font sizing in all browsers.
|
||||||
|
*/
|
||||||
|
|
||||||
|
pre {
|
||||||
|
font-family: monospace, monospace; /* 1 */
|
||||||
|
font-size: 1em; /* 2 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Text-level semantics
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Remove the gray background on active links in IE 10.
|
||||||
|
*/
|
||||||
|
|
||||||
|
a {
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 1. Remove the bottom border in Chrome 57-
|
||||||
|
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
|
||||||
|
*/
|
||||||
|
|
||||||
|
abbr[title] {
|
||||||
|
border-bottom: none; /* 1 */
|
||||||
|
text-decoration: underline; /* 2 */
|
||||||
|
text-decoration: underline dotted; /* 2 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Add the correct font weight in Chrome, Edge, and Safari.
|
||||||
|
*/
|
||||||
|
|
||||||
|
b,
|
||||||
|
strong {
|
||||||
|
font-weight: bolder;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 1. Correct the inheritance and scaling of font size in all browsers.
|
||||||
|
* 2. Correct the odd `em` font sizing in all browsers.
|
||||||
|
*/
|
||||||
|
|
||||||
|
code,
|
||||||
|
kbd,
|
||||||
|
samp {
|
||||||
|
font-family: monospace, monospace; /* 1 */
|
||||||
|
font-size: 1em; /* 2 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Add the correct font size in all browsers.
|
||||||
|
*/
|
||||||
|
|
||||||
|
small {
|
||||||
|
font-size: 80%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Prevent `sub` and `sup` elements from affecting the line height in
|
||||||
|
* all browsers.
|
||||||
|
*/
|
||||||
|
|
||||||
|
sub,
|
||||||
|
sup {
|
||||||
|
font-size: 75%;
|
||||||
|
line-height: 0;
|
||||||
|
position: relative;
|
||||||
|
vertical-align: baseline;
|
||||||
|
}
|
||||||
|
|
||||||
|
sub {
|
||||||
|
bottom: -0.25em;
|
||||||
|
}
|
||||||
|
|
||||||
|
sup {
|
||||||
|
top: -0.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Embedded content
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Remove the border on images inside links in IE 10.
|
||||||
|
*/
|
||||||
|
|
||||||
|
img {
|
||||||
|
border-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Forms
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 1. Change the font styles in all browsers.
|
||||||
|
* 2. Remove the margin in Firefox and Safari.
|
||||||
|
*/
|
||||||
|
|
||||||
|
button,
|
||||||
|
input,
|
||||||
|
optgroup,
|
||||||
|
select,
|
||||||
|
textarea {
|
||||||
|
font-family: inherit; /* 1 */
|
||||||
|
font-size: 100%; /* 1 */
|
||||||
|
line-height: 1.15; /* 1 */
|
||||||
|
margin: 0; /* 2 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Show the overflow in IE.
|
||||||
|
* 1. Show the overflow in Edge.
|
||||||
|
*/
|
||||||
|
|
||||||
|
button,
|
||||||
|
input { /* 1 */
|
||||||
|
overflow: visible;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Remove the inheritance of text transform in Edge, Firefox, and IE.
|
||||||
|
* 1. Remove the inheritance of text transform in Firefox.
|
||||||
|
*/
|
||||||
|
|
||||||
|
button,
|
||||||
|
select { /* 1 */
|
||||||
|
text-transform: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Correct the inability to style clickable types in iOS and Safari.
|
||||||
|
*/
|
||||||
|
|
||||||
|
button,
|
||||||
|
[type="button"],
|
||||||
|
[type="reset"],
|
||||||
|
[type="submit"] {
|
||||||
|
-webkit-appearance: button;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Remove the inner border and padding in Firefox.
|
||||||
|
*/
|
||||||
|
|
||||||
|
button::-moz-focus-inner,
|
||||||
|
[type="button"]::-moz-focus-inner,
|
||||||
|
[type="reset"]::-moz-focus-inner,
|
||||||
|
[type="submit"]::-moz-focus-inner {
|
||||||
|
border-style: none;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Restore the focus styles unset by the previous rule.
|
||||||
|
*/
|
||||||
|
|
||||||
|
button:-moz-focusring,
|
||||||
|
[type="button"]:-moz-focusring,
|
||||||
|
[type="reset"]:-moz-focusring,
|
||||||
|
[type="submit"]:-moz-focusring {
|
||||||
|
outline: 1px dotted ButtonText;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Correct the padding in Firefox.
|
||||||
|
*/
|
||||||
|
|
||||||
|
fieldset {
|
||||||
|
padding: 0.35em 0.75em 0.625em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 1. Correct the text wrapping in Edge and IE.
|
||||||
|
* 2. Correct the color inheritance from `fieldset` elements in IE.
|
||||||
|
* 3. Remove the padding so developers are not caught out when they zero out
|
||||||
|
* `fieldset` elements in all browsers.
|
||||||
|
*/
|
||||||
|
|
||||||
|
legend {
|
||||||
|
box-sizing: border-box; /* 1 */
|
||||||
|
color: inherit; /* 2 */
|
||||||
|
display: table; /* 1 */
|
||||||
|
max-width: 100%; /* 1 */
|
||||||
|
padding: 0; /* 3 */
|
||||||
|
white-space: normal; /* 1 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Add the correct vertical alignment in Chrome, Firefox, and Opera.
|
||||||
|
*/
|
||||||
|
|
||||||
|
progress {
|
||||||
|
vertical-align: baseline;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Remove the default vertical scrollbar in IE 10+.
|
||||||
|
*/
|
||||||
|
|
||||||
|
textarea {
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 1. Add the correct box sizing in IE 10.
|
||||||
|
* 2. Remove the padding in IE 10.
|
||||||
|
*/
|
||||||
|
|
||||||
|
[type="checkbox"],
|
||||||
|
[type="radio"] {
|
||||||
|
box-sizing: border-box; /* 1 */
|
||||||
|
padding: 0; /* 2 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Correct the cursor style of increment and decrement buttons in Chrome.
|
||||||
|
*/
|
||||||
|
|
||||||
|
[type="number"]::-webkit-inner-spin-button,
|
||||||
|
[type="number"]::-webkit-outer-spin-button {
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 1. Correct the odd appearance in Chrome and Safari.
|
||||||
|
* 2. Correct the outline style in Safari.
|
||||||
|
*/
|
||||||
|
|
||||||
|
[type="search"] {
|
||||||
|
-webkit-appearance: textfield; /* 1 */
|
||||||
|
outline-offset: -2px; /* 2 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Remove the inner padding in Chrome and Safari on macOS.
|
||||||
|
*/
|
||||||
|
|
||||||
|
[type="search"]::-webkit-search-decoration {
|
||||||
|
-webkit-appearance: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 1. Correct the inability to style clickable types in iOS and Safari.
|
||||||
|
* 2. Change font properties to `inherit` in Safari.
|
||||||
|
*/
|
||||||
|
|
||||||
|
::-webkit-file-upload-button {
|
||||||
|
-webkit-appearance: button; /* 1 */
|
||||||
|
font: inherit; /* 2 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Interactive
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Add the correct display in Edge, IE 10+, and Firefox.
|
||||||
|
*/
|
||||||
|
|
||||||
|
details {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Add the correct display in all browsers.
|
||||||
|
*/
|
||||||
|
|
||||||
|
summary {
|
||||||
|
display: list-item;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Misc
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Add the correct display in IE 10+.
|
||||||
|
*/
|
||||||
|
|
||||||
|
template {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Add the correct display in IE 10.
|
||||||
|
*/
|
||||||
|
|
||||||
|
[hidden] {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
34
webpage/doc/TOC.md
Normal file
34
webpage/doc/TOC.md
Normal file
@ -0,0 +1,34 @@
|
|||||||
|
[HTML5 Boilerplate homepage](https://html5boilerplate.com/)
|
||||||
|
|
||||||
|
## Getting started
|
||||||
|
|
||||||
|
* [Usage](usage.md) — Overview of the project contents.
|
||||||
|
* [FAQ](faq.md) — Frequently asked questions along with their answers.
|
||||||
|
|
||||||
|
## HTML5 Boilerplate core
|
||||||
|
|
||||||
|
* [HTML](html.md) — Guide to the default HTML.
|
||||||
|
* [CSS](css.md) — Guide to the default CSS.
|
||||||
|
* [JavaScript](js.md) — Guide to the default JavaScript.
|
||||||
|
* [Everything else](misc.md).
|
||||||
|
|
||||||
|
## Development
|
||||||
|
|
||||||
|
* [Extending and customizing HTML5 Boilerplate](extend.md) — Going further
|
||||||
|
with the boilerplate.
|
||||||
|
|
||||||
|
## Related projects
|
||||||
|
|
||||||
|
The [H5BP organization](https://github.com/h5bp) maintains several projects
|
||||||
|
that complement HTML5 Boilerplate, projects that can help you improve different
|
||||||
|
aspects of your website/web app (e.g.: the performance, security, etc.).
|
||||||
|
|
||||||
|
* [Server Configs](https://github.com/h5bp/server-configs) — Fast and
|
||||||
|
smart configurations for web servers such as Apache and Nginx.
|
||||||
|
* [Apache](https://github.com/h5bp/server-configs-apache)
|
||||||
|
* [Google App Engine (GAE)](https://github.com/h5bp/server-configs-gae)
|
||||||
|
* [Internet Information Services (IIS)](https://github.com/h5bp/server-configs-iis)
|
||||||
|
* [lighttpd](https://github.com/h5bp/server-configs-lighttpd)
|
||||||
|
* [Nginx](https://github.com/h5bp/server-configs-nginx)
|
||||||
|
* [Node.js](https://github.com/h5bp/server-configs-node)
|
||||||
|
* [Front-end Developer Interview Questions](https://github.com/h5bp/Front-end-Developer-Interview-Questions)
|
||||||
49
webpage/doc/css.md
Normal file
49
webpage/doc/css.md
Normal file
@ -0,0 +1,49 @@
|
|||||||
|
[HTML5 Boilerplate homepage](https://html5boilerplate.com/) | [Documentation
|
||||||
|
table of contents](TOC.md)
|
||||||
|
|
||||||
|
# The CSS
|
||||||
|
|
||||||
|
HTML5 Boilerplate's CSS includes:
|
||||||
|
|
||||||
|
* [Normalize.css](#normalizecss)
|
||||||
|
* [main.css](#maincss)
|
||||||
|
|
||||||
|
This starting CSS does not rely on the presence of
|
||||||
|
[conditional class names](https://www.paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/),
|
||||||
|
[conditional style sheets](https://css-tricks.com/how-to-create-an-ie-only-stylesheet/),
|
||||||
|
or [Modernizr](https://modernizr.com/), and it is ready to use no matter what
|
||||||
|
your development preferences happen to be.
|
||||||
|
|
||||||
|
|
||||||
|
## Normalize.css
|
||||||
|
|
||||||
|
In order to make browsers render all elements more consistently and in line
|
||||||
|
with modern standards, we include Normalize.css — a modern, HTML5-ready
|
||||||
|
alternative to CSS resets.
|
||||||
|
|
||||||
|
As opposed to CSS resets, Normalize.css:
|
||||||
|
|
||||||
|
* targets only the styles that need normalizing
|
||||||
|
* preserves useful browser defaults rather than erasing them
|
||||||
|
* corrects bugs and common browser inconsistencies
|
||||||
|
* improves usability with subtle improvements
|
||||||
|
* doesn't clutter the debugging tools
|
||||||
|
* has better documentation
|
||||||
|
|
||||||
|
For more information about Normalize.css, please refer to its [project
|
||||||
|
page](https://necolas.github.io/normalize.css/).
|
||||||
|
|
||||||
|
|
||||||
|
## main.css
|
||||||
|
|
||||||
|
Several base styles are included that build upon `Normalize.css`. These
|
||||||
|
styles:
|
||||||
|
|
||||||
|
* provide basic typography settings that improve text readability
|
||||||
|
* protect against unwanted `text-shadow` during text highlighting
|
||||||
|
* tweak the default alignment of some elements (e.g.: `img`, `video`,
|
||||||
|
`fieldset`, `textarea`)
|
||||||
|
* style the prompt that is displayed to users using an outdated browser
|
||||||
|
* and more...
|
||||||
|
|
||||||
|
These styles are included in [main.css](https://github.com/h5bp/html5-boilerplate/blob/master/dist/css/main.css). See the [main.css](https://github.com/h5bp/main.css) project [documentation](https://github.com/h5bp/main.css/blob/master/README.md#features) for a full discussion of these styles.
|
||||||
639
webpage/doc/extend.md
Normal file
639
webpage/doc/extend.md
Normal file
@ -0,0 +1,639 @@
|
|||||||
|
[HTML5 Boilerplate homepage](https://html5boilerplate.com) | [Documentation
|
||||||
|
table of contents](TOC.md)
|
||||||
|
|
||||||
|
# Extend and customise HTML5 Boilerplate
|
||||||
|
|
||||||
|
Here is some useful advice for how you can make your project with HTML5
|
||||||
|
Boilerplate even better. We don't want to include it all by default, as
|
||||||
|
not everything fits with everyone's needs.
|
||||||
|
|
||||||
|
|
||||||
|
* [App Stores](#app-stores)
|
||||||
|
* [DNS prefetching](#dns-prefetching)
|
||||||
|
* [Google Universal Analytics](#google-universal-analytics)
|
||||||
|
* [Internet Explorer](#internet-explorer)
|
||||||
|
* [Miscellaneous](#miscellaneous)
|
||||||
|
* [News Feeds](#news-feeds)
|
||||||
|
* [Search](#search)
|
||||||
|
* [Social Networks](#social-networks)
|
||||||
|
* [URLs](#urls)
|
||||||
|
* [Web Apps](#web-apps)
|
||||||
|
* [security.txt](#security.txt)
|
||||||
|
|
||||||
|
## App Stores
|
||||||
|
|
||||||
|
### Smart App Banners in iOS 6+ Safari
|
||||||
|
|
||||||
|
Stop bothering everyone with gross modals advertising your entry in the
|
||||||
|
App Store. Including the following [meta tag](https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/PromotingAppswithAppBanners/PromotingAppswithAppBanners.html) will unobtrusively give the user the option to download your iOS app, or open it with some data about the user's current state on the website.
|
||||||
|
|
||||||
|
```html
|
||||||
|
<meta name="apple-itunes-app" content="app-id=APP_ID,app-argument=SOME_TEXT">
|
||||||
|
```
|
||||||
|
|
||||||
|
## DNS prefetching
|
||||||
|
|
||||||
|
In short, DNS Prefetching is a method of informing the browser of domain names
|
||||||
|
referenced on a site so that the client can resolve the DNS for those hosts,
|
||||||
|
cache them, and when it comes time to use them, have a faster turn around on
|
||||||
|
the request.
|
||||||
|
|
||||||
|
### Implicit prefetches
|
||||||
|
|
||||||
|
There is a lot of prefetching done for you automatically by the browser. When
|
||||||
|
the browser encounters an anchor in your html that does not share the same
|
||||||
|
domain name as the current location the browser requests, from the client OS,
|
||||||
|
the IP address for this new domain. The client first checks its cache and
|
||||||
|
then, lacking a cached copy, makes a request from a DNS server. These requests
|
||||||
|
happen in the background and are not meant to block the rendering of the
|
||||||
|
page.
|
||||||
|
|
||||||
|
The goal of this is that when the foreign IP address is finally needed it will
|
||||||
|
already be in the client cache and will not block the loading of the foreign
|
||||||
|
content. Fewer requests result in faster page load times. The perception of this
|
||||||
|
is increased on a mobile platform where DNS latency can be greater.
|
||||||
|
|
||||||
|
#### Disable implicit prefetching
|
||||||
|
|
||||||
|
```html
|
||||||
|
<meta http-equiv="x-dns-prefetch-control" content="off">
|
||||||
|
```
|
||||||
|
|
||||||
|
Even with X-DNS-Prefetch-Control meta tag (or http header) browsers will still
|
||||||
|
prefetch any explicit dns-prefetch links.
|
||||||
|
|
||||||
|
**_WARNING:_** THIS MAY MAKE YOUR SITE SLOWER IF YOU RELY ON RESOURCES FROM
|
||||||
|
FOREIGN DOMAINS.
|
||||||
|
|
||||||
|
### Explicit prefetches
|
||||||
|
|
||||||
|
Typically the browser only scans the HTML for foreign domains. If you have
|
||||||
|
resources that are outside of your HTML (a javascript request to a remote
|
||||||
|
server or a CDN that hosts content that may not be present on every page of
|
||||||
|
your site, for example) then you can queue up a domain name to be prefetched.
|
||||||
|
|
||||||
|
```html
|
||||||
|
<link rel="dns-prefetch" href="//example.com">
|
||||||
|
<link rel="dns-prefetch" href="https://ajax.googleapis.com">
|
||||||
|
```
|
||||||
|
|
||||||
|
You can use as many of these as you need, but it's best if they are all
|
||||||
|
immediately after the [Meta
|
||||||
|
Charset](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta#attr-charset)
|
||||||
|
element (which should go right at the top of the `head`), so the browser can
|
||||||
|
act on them ASAP.
|
||||||
|
|
||||||
|
#### Common Prefetch Links
|
||||||
|
|
||||||
|
Amazon S3:
|
||||||
|
|
||||||
|
```html
|
||||||
|
<link rel="dns-prefetch" href="//s3.amazonaws.com">
|
||||||
|
```
|
||||||
|
|
||||||
|
Google APIs:
|
||||||
|
|
||||||
|
```html
|
||||||
|
<link rel="dns-prefetch" href="https://ajax.googleapis.com">
|
||||||
|
```
|
||||||
|
|
||||||
|
Microsoft Ajax Content Delivery Network:
|
||||||
|
|
||||||
|
```html
|
||||||
|
<link rel="dns-prefetch" href="//ajax.microsoft.com">
|
||||||
|
<link rel="dns-prefetch" href="//ajax.aspnetcdn.com">
|
||||||
|
```
|
||||||
|
|
||||||
|
### Further reading about DNS prefetching
|
||||||
|
|
||||||
|
* https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-DNS-Prefetch-Control
|
||||||
|
* https://dev.chromium.org/developers/design-documents/dns-prefetching
|
||||||
|
* https://blogs.msdn.microsoft.com/ie/2011/03/17/internet-explorer-9-network-performance-improvements/
|
||||||
|
|
||||||
|
|
||||||
|
## Google Universal Analytics
|
||||||
|
|
||||||
|
### More tracking settings
|
||||||
|
|
||||||
|
The [optimized Google Universal Analytics
|
||||||
|
snippet](https://mathiasbynens.be/notes/async-analytics-snippet#universal-analytics)
|
||||||
|
included with HTML5 Boilerplate includes something like this:
|
||||||
|
|
||||||
|
```js
|
||||||
|
ga('create', 'UA-XXXXX-X', 'auto'); ga('send', 'pageview');
|
||||||
|
```
|
||||||
|
|
||||||
|
To customize further, see Google's [Advanced
|
||||||
|
Setup](https://developers.google.com/analytics/devguides/collection/analyticsjs/),
|
||||||
|
[Pageview](https://developers.google.com/analytics/devguides/collection/analyticsjs/pages),
|
||||||
|
and [Event](https://developers.google.com/analytics/devguides/collection/analyticsjs/events) Docs.
|
||||||
|
|
||||||
|
### Anonymize IP addresses
|
||||||
|
|
||||||
|
In some countries, no personal data may be transferred outside jurisdictions
|
||||||
|
that do not have similarly strict laws (i.e. from Germany to outside the EU).
|
||||||
|
Thus a webmaster using the Google Universal Analytics may have to ensure that
|
||||||
|
no personal (trackable) data is transferred to the US. You can do that with
|
||||||
|
[the `ga('set', 'anonymizeIp', true);`
|
||||||
|
parameter](https://developers.google.com/analytics/devguides/collection/analyticsjs/advanced#anonymizeip)
|
||||||
|
before sending any events/pageviews. In use it looks like this:
|
||||||
|
|
||||||
|
```js
|
||||||
|
ga('create', 'UA-XXXXX-X', 'auto');
|
||||||
|
ga('set', 'anonymizeIp', true);
|
||||||
|
ga('send', 'pageview');
|
||||||
|
```
|
||||||
|
|
||||||
|
### Track jQuery AJAX requests in Google Analytics
|
||||||
|
|
||||||
|
An article by @JangoSteve explains how to [track jQuery AJAX requests in Google
|
||||||
|
Analytics](https://www.alfajango.com/blog/track-jquery-ajax-requests-in-google-analytics/).
|
||||||
|
|
||||||
|
Add this to `plugins.js`:
|
||||||
|
|
||||||
|
```js
|
||||||
|
/*
|
||||||
|
* Log all jQuery AJAX requests to Google Analytics
|
||||||
|
* See: https://www.alfajango.com/blog/track-jquery-ajax-requests-in-google-analytics/
|
||||||
|
*/
|
||||||
|
if (typeof ga !== "undefined" && ga !== null) {
|
||||||
|
$(document).ajaxSend(function(event, xhr, settings){
|
||||||
|
ga('send', 'pageview', settings.url);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### Track JavaScript errors in Google Analytics
|
||||||
|
|
||||||
|
Add this function after `ga` is defined:
|
||||||
|
|
||||||
|
```js
|
||||||
|
(function(window){
|
||||||
|
var undefined,
|
||||||
|
link = function (href) {
|
||||||
|
var a = window.document.createElement('a');
|
||||||
|
a.href = href;
|
||||||
|
return a;
|
||||||
|
};
|
||||||
|
window.onerror = function (message, file, line, column) {
|
||||||
|
var host = link(file).hostname;
|
||||||
|
ga('send', {
|
||||||
|
'hitType': 'event',
|
||||||
|
'eventCategory': (host == window.location.hostname || host == undefined || host == '' ? '' : 'external ') + 'error',
|
||||||
|
'eventAction': message,
|
||||||
|
'eventLabel': (file + ' LINE: ' + line + (column ? ' COLUMN: ' + column : '')).trim(),
|
||||||
|
'nonInteraction': 1
|
||||||
|
});
|
||||||
|
};
|
||||||
|
}(window));
|
||||||
|
```
|
||||||
|
|
||||||
|
### Track page scroll
|
||||||
|
|
||||||
|
Add this function after `ga` is defined:
|
||||||
|
|
||||||
|
```js
|
||||||
|
$(function(){
|
||||||
|
var isDuplicateScrollEvent,
|
||||||
|
scrollTimeStart = new Date,
|
||||||
|
$window = $(window),
|
||||||
|
$document = $(document),
|
||||||
|
scrollPercent;
|
||||||
|
|
||||||
|
$window.scroll(function() {
|
||||||
|
scrollPercent = Math.round(100 * ($window.height() + $window.scrollTop())/$document.height());
|
||||||
|
if (scrollPercent > 90 && !isDuplicateScrollEvent) { //page scrolled to 90%
|
||||||
|
isDuplicateScrollEvent = 1;
|
||||||
|
ga('send', 'event', 'scroll',
|
||||||
|
'Window: ' + $window.height() + 'px; Document: ' + $document.height() + 'px; Time: ' + Math.round((new Date - scrollTimeStart )/1000,1) + 's'
|
||||||
|
);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
```
|
||||||
|
|
||||||
|
## Internet Explorer
|
||||||
|
|
||||||
|
### IE Pinned Sites
|
||||||
|
|
||||||
|
Enabling your application for pinning will allow IE users to add it to their
|
||||||
|
Windows Taskbar and Start Menu. This comes with a range of new tools that you
|
||||||
|
can easily configure with the elements below. See more [documentation on IE
|
||||||
|
Pinned Sites](https://docs.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-developer/samples/gg491731(v%3dvs.85)).
|
||||||
|
|
||||||
|
### Name the Pinned Site for Windows
|
||||||
|
|
||||||
|
Without this rule, Windows will use the page title as the name for your
|
||||||
|
application.
|
||||||
|
|
||||||
|
```html
|
||||||
|
<meta name="application-name" content="Sample Title">
|
||||||
|
```
|
||||||
|
|
||||||
|
### Give your Pinned Site a tooltip
|
||||||
|
|
||||||
|
You know — a tooltip. A little textbox that appears when the user holds their
|
||||||
|
mouse over your Pinned Site's icon.
|
||||||
|
|
||||||
|
```html
|
||||||
|
<meta name="msapplication-tooltip" content="A description of what this site does.">
|
||||||
|
```
|
||||||
|
|
||||||
|
### Set a default page for your Pinned Site
|
||||||
|
|
||||||
|
If the site should go to a specific URL when it is pinned (such as the
|
||||||
|
homepage), enter it here. One idea is to send it to a special URL so you can
|
||||||
|
track the number of pinned users, like so:
|
||||||
|
`https://www.example.com/index.html?pinned=true`
|
||||||
|
|
||||||
|
```html
|
||||||
|
<meta name="msapplication-starturl" content="https://www.example.com/index.html?pinned=true">
|
||||||
|
```
|
||||||
|
|
||||||
|
### Recolor IE's controls manually for a Pinned Site
|
||||||
|
|
||||||
|
IE will automatically use the overall color of your Pinned Site's favicon to
|
||||||
|
shade its browser buttons. UNLESS you give it another color here. Only use
|
||||||
|
named colors (`red`) or hex colors (`#ff0000`).
|
||||||
|
|
||||||
|
```html
|
||||||
|
<meta name="msapplication-navbutton-color" content="#ff0000">
|
||||||
|
```
|
||||||
|
|
||||||
|
### Manually set the window size of a Pinned Site
|
||||||
|
|
||||||
|
If the site should open at a certain window size once pinned, you can specify
|
||||||
|
the dimensions here. It only supports static pixel dimensions. 800x600
|
||||||
|
minimum.
|
||||||
|
|
||||||
|
```html
|
||||||
|
<meta name="msapplication-window" content="width=800;height=600">
|
||||||
|
```
|
||||||
|
|
||||||
|
### Jump List "Tasks" for Pinned Sites
|
||||||
|
|
||||||
|
Add Jump List Tasks that will appear when the Pinned Site's icon gets a
|
||||||
|
right-click. Each Task goes to the specified URL, and gets its own mini icon
|
||||||
|
(essentially a favicon, a 16x16 .ICO). You can add as many of these as you
|
||||||
|
need.
|
||||||
|
|
||||||
|
```html
|
||||||
|
<meta name="msapplication-task" content="name=Task 1;action-uri=http://host/Page1.html;icon-uri=http://host/icon1.ico">
|
||||||
|
<meta name="msapplication-task" content="name=Task 2;action-uri=http://microsoft.com/Page2.html;icon-uri=http://host/icon2.ico">
|
||||||
|
```
|
||||||
|
|
||||||
|
### (Windows 8) High quality visuals for Pinned Sites
|
||||||
|
|
||||||
|
Windows 8 adds the ability for you to provide a PNG tile image and specify the
|
||||||
|
tile's background color. [Full details on the IE
|
||||||
|
blog](https://blogs.msdn.microsoft.com/ie/2012/06/08/high-quality-visuals-for-pinned-sites-in-windows-8/).
|
||||||
|
|
||||||
|
* Create a 144x144 image of your site icon, filling all of the canvas, and
|
||||||
|
using a transparent background.
|
||||||
|
* Save this image as a 32-bit PNG and optimize it without reducing
|
||||||
|
colour-depth. It can be named whatever you want (e.g. `metro-tile.png`).
|
||||||
|
* To reference the tile and its color, add the HTML `meta` elements described
|
||||||
|
in the IE Blog post.
|
||||||
|
|
||||||
|
### (Windows 8) Badges for Pinned Sites
|
||||||
|
|
||||||
|
IE will poll an XML document for badge information to display on your app's
|
||||||
|
tile in the Start screen. The user will be able to receive these badge updates
|
||||||
|
even when your app isn't actively running. The badge's value can be a number,
|
||||||
|
or one of a predefined list of glyphs.
|
||||||
|
|
||||||
|
* [Tutorial on IEBlog with link to badge XML schema](https://blogs.msdn.microsoft.com/ie/2012/04/03/pinned-sites-in-windows-8/)
|
||||||
|
* [Available badge values](https://docs.microsoft.com/en-us/uwp/schemas/tiles/badgeschema/element-badge)
|
||||||
|
|
||||||
|
```html
|
||||||
|
<meta name="msapplication-badge" value="frequency=NUMBER_IN_MINUTES;polling-uri=https://www.example.com/path/to/file.xml">
|
||||||
|
```
|
||||||
|
|
||||||
|
### Disable link highlighting upon tap in IE10
|
||||||
|
|
||||||
|
Similar to [-webkit-tap-highlight-color](https://davidwalsh.name/mobile-highlight-color)
|
||||||
|
in iOS Safari. Unlike that CSS property, this is an HTML meta element, and its
|
||||||
|
value is boolean rather than a color. It's all or nothing.
|
||||||
|
|
||||||
|
```html
|
||||||
|
<meta name="msapplication-tap-highlight" content="no" />
|
||||||
|
```
|
||||||
|
|
||||||
|
You can read about this useful element and more techniques in
|
||||||
|
[Microsoft's documentation on adapting WebKit-oriented apps for IE10](https://blogs.windows.com/buildingapps/2012/11/15/adapting-your-webkit-optimized-site-for-internet-explorer-10/)
|
||||||
|
|
||||||
|
## Search
|
||||||
|
|
||||||
|
### Direct search spiders to your sitemap
|
||||||
|
|
||||||
|
After creating a [sitemap](https://www.sitemaps.org/protocol.html)
|
||||||
|
|
||||||
|
Submit it to search engine tool:
|
||||||
|
* [Google](https://www.google.com/webmasters/tools/sitemap-list)
|
||||||
|
* [Bing](https://www.bing.com/toolbox/webmaster)
|
||||||
|
* [Yandex](https://webmaster.yandex.com/)
|
||||||
|
* [Baidu](https://zhanzhang.baidu.com/)
|
||||||
|
OR
|
||||||
|
Insert the following line anywhere in your robots.txt file, specifying the path to your sitemap:
|
||||||
|
```
|
||||||
|
Sitemap: https://example.com/sitemap_location.xml
|
||||||
|
```
|
||||||
|
|
||||||
|
### Hide pages from search engines
|
||||||
|
|
||||||
|
According to Heather Champ, former community manager at Flickr, you should not
|
||||||
|
allow search engines to index your "Contact Us" or "Complaints" page if you
|
||||||
|
value your sanity. This is an HTML-centric way of achieving that.
|
||||||
|
|
||||||
|
```html
|
||||||
|
<meta name="robots" content="noindex">
|
||||||
|
```
|
||||||
|
|
||||||
|
**_WARNING:_** DO NOT INCLUDE ON PAGES THAT SHOULD APPEAR IN SEARCH ENGINES.
|
||||||
|
|
||||||
|
### Firefox and IE Search Plugins
|
||||||
|
|
||||||
|
Sites with in-site search functionality should be strongly considered for a
|
||||||
|
browser search plugin. A "search plugin" is an XML file which defines how your
|
||||||
|
plugin behaves in the browser. [How to make a browser search
|
||||||
|
plugin](https://www.google.com/search?ie=UTF-8&q=how+to+make+browser+search+plugin).
|
||||||
|
|
||||||
|
```html
|
||||||
|
<link rel="search" title="" type="application/opensearchdescription+xml" href="">
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
## Miscellaneous
|
||||||
|
|
||||||
|
* Use [polyfills](https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills).
|
||||||
|
|
||||||
|
* Use [Microformats](http://microformats.org/wiki/Main_Page) (via
|
||||||
|
[microdata](http://microformats.org/wiki/microdata)) for optimum search
|
||||||
|
results
|
||||||
|
[visibility](https://webmasters.googleblog.com/2009/05/introducing-rich-snippets.html).
|
||||||
|
|
||||||
|
* If you're building a web app you may want [native style momentum scrolling in
|
||||||
|
iOS 5+](https://www.johanbrook.com/writings/native-style-momentum-scrolling-to-arrive-in-ios-5/)
|
||||||
|
using `-webkit-overflow-scrolling: touch`.
|
||||||
|
|
||||||
|
* If you want to disable the translation prompt in Chrome or block Google
|
||||||
|
Translate from translating your web page, use [`<meta name="google"
|
||||||
|
content="notranslate">`](https://support.google.com/webmasters/answer/79812).
|
||||||
|
To disable translation for a particular section of the web page, add
|
||||||
|
[`class="notranslate"`](https://support.google.com/translate/?hl=en#2641276).
|
||||||
|
|
||||||
|
* If you want to disable the automatic detection and formatting of possible
|
||||||
|
phone numbers in Safari on iOS, use [`<meta name="format-detection"
|
||||||
|
content="telephone=no">`](https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html).
|
||||||
|
|
||||||
|
* Avoid development/stage websites "leaking" into SERPs (search engine results
|
||||||
|
page) by [implementing X-Robots-tag
|
||||||
|
headers](https://github.com/h5bp/html5-boilerplate/issues/804).
|
||||||
|
|
||||||
|
|
||||||
|
## News Feeds
|
||||||
|
|
||||||
|
### RSS
|
||||||
|
|
||||||
|
Have an RSS feed? Link to it here. Want to [learn how to write an RSS feed from
|
||||||
|
scratch](http://www.rssboard.org/rss-specification)?
|
||||||
|
|
||||||
|
```html
|
||||||
|
<link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml">
|
||||||
|
```
|
||||||
|
|
||||||
|
### Atom
|
||||||
|
|
||||||
|
Atom is similar to RSS, and you might prefer to use it instead of or in
|
||||||
|
addition to it. [See what Atom's all
|
||||||
|
about](https://en.wikipedia.org/wiki/Atom_(Web_standard)).
|
||||||
|
|
||||||
|
```html
|
||||||
|
<link rel="alternate" type="application/atom+xml" title="Atom" href="/atom.xml">
|
||||||
|
```
|
||||||
|
|
||||||
|
### Pingbacks
|
||||||
|
|
||||||
|
Your server may be notified when another site links to yours. The href
|
||||||
|
attribute should contain the location of your pingback service.
|
||||||
|
|
||||||
|
```html
|
||||||
|
<link rel="pingback" href="">
|
||||||
|
```
|
||||||
|
|
||||||
|
* High-level explanation: https://codex.wordpress.org/Introduction_to_Blogging#Pingbacks
|
||||||
|
* Step-by-step example case: https://www.hixie.ch/specs/pingback/pingback-1.0#TOC5
|
||||||
|
* PHP pingback service: https://web.archive.org/web/20131211032834/http://blog.perplexedlabs.com/2009/07/15/xmlrpc-pingbacks-using-php/
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## Social Networks
|
||||||
|
|
||||||
|
### Facebook Open Graph data
|
||||||
|
|
||||||
|
You can control the information that Facebook and others display when users
|
||||||
|
share your site. Below are just the most basic data points you might need. For
|
||||||
|
specific content types (including "website"), see [Facebook's built-in Open
|
||||||
|
Graph content
|
||||||
|
templates](https://developers.facebook.com/docs/sharing/opengraph/using-objects).
|
||||||
|
Take full advantage of Facebook's support for complex data and activity by
|
||||||
|
following the [Open Graph
|
||||||
|
tutorial](https://developers.facebook.com/docs/sharing/webmasters/getting-started).
|
||||||
|
|
||||||
|
For a reference of Open Graph's markup and properties, you may check
|
||||||
|
[Facebook's Open Graph Protocol reference](https://ogp.me). Finally,
|
||||||
|
you can validate your markup with the [Facebook Object
|
||||||
|
Debugger](https://developers.facebook.com/tools/debug/) (needs
|
||||||
|
registration to Facebook).
|
||||||
|
|
||||||
|
```html
|
||||||
|
<meta property="fb:app_id" content="123456789">
|
||||||
|
<meta property="og:url" content="https://www.example.com/path/to/page.html">
|
||||||
|
<meta property="og:type" content="website">
|
||||||
|
<meta property="og:title" content="">
|
||||||
|
<meta property="og:image" content="https://www.example.com/path/to/image.jpg">
|
||||||
|
<meta property="og:description" content="">
|
||||||
|
<meta property="og:site_name" content="">
|
||||||
|
<meta property="article:author" content="">
|
||||||
|
```
|
||||||
|
|
||||||
|
### Twitter Cards
|
||||||
|
|
||||||
|
Twitter provides a snippet specification that serves a similar purpose to Open
|
||||||
|
Graph. In fact, Twitter will use Open Graph when Cards is not available. You
|
||||||
|
can read more about the various snippet formats and application process in the
|
||||||
|
[official Twitter Cards documentation](https://developer.twitter.com/en/docs/tweets/optimize-with-cards/overview/abouts-cards),
|
||||||
|
and you can validate your markup with the [Card validator](https://cards-dev.twitter.com/validator)
|
||||||
|
(needs registration to Twitter).
|
||||||
|
|
||||||
|
```html
|
||||||
|
<meta name="twitter:card" content="summary">
|
||||||
|
<meta name="twitter:site" content="@site_account">
|
||||||
|
<meta name="twitter:creator" content="@individual_account">
|
||||||
|
<meta name="twitter:url" content="https://www.example.com/path/to/page.html">
|
||||||
|
<meta name="twitter:title" content="">
|
||||||
|
<meta name="twitter:description" content="">
|
||||||
|
<meta name="twitter:image" content="https://www.example.com/path/to/image.jpg">
|
||||||
|
```
|
||||||
|
|
||||||
|
### Schema.org
|
||||||
|
|
||||||
|
Google also provides a snippet specification that serves a similar
|
||||||
|
purpose to Facebook's Open Graph or Twitter Cards. This metadata is a subset
|
||||||
|
of [schema.org's microdata vocabulary](https://schema.org/), which
|
||||||
|
covers many other schemas that can describe the content of your pages
|
||||||
|
to search engines. For this reason, this metadata is more generic for
|
||||||
|
SEO, notably for Google's search-engine, although this vocabulary is
|
||||||
|
also used by Microsoft, Pinterest and Yandex.
|
||||||
|
|
||||||
|
You can validate your markup with the [Structured Data Testing
|
||||||
|
Tool](https://developers.google.com/structured-data/testing-tool/).
|
||||||
|
Also, please note that this markup requires to add attributes to your
|
||||||
|
top `html` tag.
|
||||||
|
|
||||||
|
```html
|
||||||
|
<html class="no-js" lang="" itemscope itemtype="https://schema.org/Article">
|
||||||
|
<head>
|
||||||
|
|
||||||
|
<link rel="author" href="">
|
||||||
|
<link rel="publisher" href="">
|
||||||
|
<meta itemprop="name" content="">
|
||||||
|
<meta itemprop="description" content="">
|
||||||
|
<meta itemprop="image" content="">
|
||||||
|
```
|
||||||
|
|
||||||
|
## URLs
|
||||||
|
|
||||||
|
### Canonical URL
|
||||||
|
|
||||||
|
Signal to search engines and others "Use this URL for this page!" Useful when
|
||||||
|
parameters after a `#` or `?` is used to control the display state of a page.
|
||||||
|
`https://www.example.com/cart.html?shopping-cart-open=true` can be indexed as
|
||||||
|
the cleaner, more accurate `https://www.example.com/cart.html`.
|
||||||
|
|
||||||
|
```html
|
||||||
|
<link rel="canonical" href="">
|
||||||
|
```
|
||||||
|
|
||||||
|
### Separate mobile URLs
|
||||||
|
|
||||||
|
If you use separate URLs for desktop and mobile users, you should consider
|
||||||
|
helping search engine algorithms better understand the configuration on your
|
||||||
|
web site.
|
||||||
|
|
||||||
|
This can be done by adding the following annotations in your HTML pages:
|
||||||
|
|
||||||
|
* on the desktop page, add the `link rel="alternate"` tag pointing to the
|
||||||
|
corresponding mobile URL, e.g.:
|
||||||
|
|
||||||
|
`<link rel="alternate" media="only screen and (max-width: 640px)" href="https://m.example.com/page.html" >`
|
||||||
|
|
||||||
|
* on the mobile page, add the `link rel="canonical"` tag pointing to the
|
||||||
|
corresponding desktop URL, e.g.:
|
||||||
|
|
||||||
|
`<link rel="canonical" href="https://www.example.com/page.html">`
|
||||||
|
|
||||||
|
For more information please see:
|
||||||
|
|
||||||
|
* https://developers.google.com/search/mobile-sites/mobile-seo/separate-urls
|
||||||
|
|
||||||
|
|
||||||
|
## Web Apps
|
||||||
|
|
||||||
|
There are a couple of meta tags that provide information about a web app when
|
||||||
|
added to the Home Screen on iOS:
|
||||||
|
|
||||||
|
* Adding `apple-mobile-web-app-capable` will make your web app chrome-less and
|
||||||
|
provide the default iOS app view. You can control the color scheme of the
|
||||||
|
default view by adding `apple-mobile-web-app-status-bar-style`.
|
||||||
|
|
||||||
|
```html
|
||||||
|
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||||
|
<meta name="apple-mobile-web-app-status-bar-style" content="black">
|
||||||
|
```
|
||||||
|
|
||||||
|
* You can use `apple-mobile-web-app-title` to add a specific sites name for the
|
||||||
|
Home Screen icon. This works since iOS 6.
|
||||||
|
|
||||||
|
```html
|
||||||
|
<meta name="apple-mobile-web-app-title" content="">
|
||||||
|
```
|
||||||
|
|
||||||
|
For further information please read the [official
|
||||||
|
documentation](https://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html)
|
||||||
|
on Apple's site.
|
||||||
|
|
||||||
|
|
||||||
|
### Apple Touch Icons
|
||||||
|
|
||||||
|
Apple touch icons are used as icons when a user adds your webapp to the home
|
||||||
|
screen of aniOS devices.
|
||||||
|
|
||||||
|
Though the dimensions of the icon can vary between iOS devices and versions
|
||||||
|
one `180×180px` touch icon named `icon.png` and including the following in
|
||||||
|
the `<head>` of the page is enough:
|
||||||
|
|
||||||
|
```html
|
||||||
|
<link rel="apple-touch-icon" href="icon.png">
|
||||||
|
```
|
||||||
|
|
||||||
|
For a more comprehensive overview, please refer to Mathias' [article on Touch
|
||||||
|
Icons](https://mathiasbynens.be/notes/touch-icons).
|
||||||
|
|
||||||
|
|
||||||
|
### Apple Touch Startup Image
|
||||||
|
|
||||||
|
Apart from that it is possible to add start-up screens for web apps on iOS. This
|
||||||
|
basically works by defining `apple-touch-startup-image` with an according link
|
||||||
|
to the image. Since iOS devices have different screen resolutions it maybe
|
||||||
|
necessary to add media queries to detect which image to load. Here is an
|
||||||
|
example for an iPhone:
|
||||||
|
|
||||||
|
```html
|
||||||
|
<link rel="apple-touch-startup-image" media="(max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2)" href="img/startup.png">
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
### Chrome Mobile web apps
|
||||||
|
|
||||||
|
Chrome Mobile has a specific meta tag for making apps [installable to the
|
||||||
|
homescreen](https://developer.chrome.com/multidevice/android/installtohomescreen)
|
||||||
|
which tries to be a more generic replacement to Apple's proprietary meta tag:
|
||||||
|
|
||||||
|
```html
|
||||||
|
<meta name="mobile-web-app-capable" content="yes">
|
||||||
|
```
|
||||||
|
|
||||||
|
Same applies to the touch icons:
|
||||||
|
|
||||||
|
```html
|
||||||
|
<link rel="icon" sizes="192x192" href="highres-icon.png">
|
||||||
|
```
|
||||||
|
|
||||||
|
### Theme Color
|
||||||
|
|
||||||
|
You can add the [`theme-color` meta extension](https://html.spec.whatwg.org/multipage/semantics.html#meta-theme-color)
|
||||||
|
in the `<head>` of your pages to suggest the color that browsers and
|
||||||
|
OSes should use if they customize the display of individual pages in
|
||||||
|
their UIs with varying colors.
|
||||||
|
|
||||||
|
```html
|
||||||
|
<meta name="theme-color" content="#ff69b4">
|
||||||
|
```
|
||||||
|
|
||||||
|
The `content` attribute extension can take any valid CSS color.
|
||||||
|
|
||||||
|
Currently, the `theme-color` meta extension is supported by [Chrome 39+
|
||||||
|
for Android Lollipop](https://developers.google.com/web/updates/2014/11/Support-for-theme-color-in-Chrome-39-for-Android).
|
||||||
|
|
||||||
|
|
||||||
|
## security.txt
|
||||||
|
|
||||||
|
When security risks in web services are discovered by users they often lack the
|
||||||
|
channels to disclose them properly. As a result, security issues may be left unreported.
|
||||||
|
|
||||||
|
Security.txt defines a standard to help organizations define the process for
|
||||||
|
users to disclose security vulnerabilities securely. Include a text
|
||||||
|
file on your server at `.well-known/security.txt` with the relevant contact details.
|
||||||
|
|
||||||
|
Check [https://securitytxt.org/](https://securitytxt.org/) for more details.
|
||||||
40
webpage/doc/faq.md
Normal file
40
webpage/doc/faq.md
Normal file
@ -0,0 +1,40 @@
|
|||||||
|
[HTML5 Boilerplate homepage](https://html5boilerplate.com/) | [Documentation
|
||||||
|
table of contents](TOC.md)
|
||||||
|
|
||||||
|
# Frequently asked questions
|
||||||
|
|
||||||
|
* [Why is the Google Analytics code at the bottom? Google recommends it be
|
||||||
|
placed in the `<head>`.](#why-is-the-google-analytics-code-at-the-bottom-google-recommends-it-be-placed-in-the-head)
|
||||||
|
* [Do I need to upgrade my site each time a new version of HTML5 Boilerplate is
|
||||||
|
released?](#do-i-need-to-upgrade-my-site-each-time-a-new-version-of-html5-boilerplate-is-released)
|
||||||
|
* [Where can I get help with support
|
||||||
|
questions?](#where-can-i-get-help-with-support-questions)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Why is the Google Analytics code at the bottom? Google recommends it be placed in the `<head>`.
|
||||||
|
|
||||||
|
The main advantage of placing it in the `<head>` is that you will track the
|
||||||
|
user's `pageview` even if they leave the page before it has been fully loaded.
|
||||||
|
|
||||||
|
Here's a handy quote from [Mathias Bynens](https://mathiasbynens.be/notes/async-analytics-snippet#comment-50) about our placement choice.
|
||||||
|
>I should point out that it’s Google — not me — recommending to place this
|
||||||
|
script before all other scripts in the document. The only real advantage is to
|
||||||
|
catch a pageView call if your page fails to load completely (for example, if
|
||||||
|
the user aborts loading, or quickly closes the page, etc.). Personally, I
|
||||||
|
wouldn’t count that as a page view, so I actually prefer to place this script
|
||||||
|
at the bottom, after all other scripts. This keeps all the scripts together and
|
||||||
|
reinforces that scripts at the bottom are the right move. (Usually I
|
||||||
|
concatenate and minify all my scripts into one .js file — the GA snippet being
|
||||||
|
the suffix.)
|
||||||
|
|
||||||
|
### Do I need to upgrade my site each time a new version of HTML5 Boilerplate is released?
|
||||||
|
|
||||||
|
No, just as you don't normally replace the foundation of a house once it
|
||||||
|
was built. However, there is nothing stopping you from trying to work in the
|
||||||
|
latest changes, but you'll have to assess the costs/benefits of doing so.
|
||||||
|
|
||||||
|
### Where can I get help with support questions?
|
||||||
|
|
||||||
|
Please ask for help on
|
||||||
|
[StackOverflow](https://stackoverflow.com/questions/tagged/html5boilerplate).
|
||||||
205
webpage/doc/html.md
Normal file
205
webpage/doc/html.md
Normal file
@ -0,0 +1,205 @@
|
|||||||
|
[HTML5 Boilerplate homepage](https://html5boilerplate.com/) | [Documentation
|
||||||
|
table of contents](TOC.md)
|
||||||
|
|
||||||
|
# The HTML
|
||||||
|
|
||||||
|
By default, HTML5 Boilerplate provides two `html` pages:
|
||||||
|
|
||||||
|
* [`index.html`](#indexhtml) - a default HTML skeleton that should form the
|
||||||
|
basis of all pages on your website
|
||||||
|
* `404.html` - a placeholder 404 error page
|
||||||
|
|
||||||
|
|
||||||
|
## `index.html`
|
||||||
|
|
||||||
|
|
||||||
|
### The `no-js` Class
|
||||||
|
|
||||||
|
The `no-js` class is provided in order to allow you to more easily and
|
||||||
|
explicitly add custom styles based on whether JavaScript is disabled
|
||||||
|
(`.no-js`) or enabled (`.js`). Using this technique also helps [avoid the
|
||||||
|
FOUC](https://www.paulirish.com/2009/avoiding-the-fouc-v3/).
|
||||||
|
|
||||||
|
|
||||||
|
## Language Attribute
|
||||||
|
|
||||||
|
Please consider specifying the language of your content by adding a [value](https://www.iana.org/assignments/language-subtag-registry/language-subtag-registry) to the `lang`
|
||||||
|
attribute in the `<html>` as in this example:
|
||||||
|
|
||||||
|
```html
|
||||||
|
<html class="no-js" lang="en">
|
||||||
|
```
|
||||||
|
|
||||||
|
### The order of the `<title>` and `<meta>` tags
|
||||||
|
|
||||||
|
The charset declaration (`<meta charset="utf-8">`) must be included completely
|
||||||
|
within the [first 1024 bytes of the document](https://www.whatwg.org/specs/web-apps/current-work/multipage/semantics.html#charset)
|
||||||
|
and should be specified as early as possible (before any content that could
|
||||||
|
be controlled by an attacker, such as a `<title>` element) in order to avoid a
|
||||||
|
potential [encoding-related security issue](https://code.google.com/archive/p/doctype-mirror/wikis/ArticleUtf7.wiki)
|
||||||
|
in Internet Explorer
|
||||||
|
|
||||||
|
## Meta Description
|
||||||
|
|
||||||
|
The `description` meta tag provides a short description of the page.
|
||||||
|
In some situations this description is used as a part of the snippet
|
||||||
|
shown in the search results.
|
||||||
|
|
||||||
|
```html
|
||||||
|
<meta name="description" content="This is a description">
|
||||||
|
```
|
||||||
|
|
||||||
|
Google's [Create good meta descriptions](https://support.google.com/webmasters/answer/35624?hl=en#meta-descriptions)
|
||||||
|
documentation has useful tips on creating an effective description.
|
||||||
|
|
||||||
|
## Mobile Viewport
|
||||||
|
|
||||||
|
There are a few different options that you can use with the [`viewport` meta
|
||||||
|
tag](https://docs.google.com/present/view?id=dkx3qtm_22dxsrgcf4 "Viewport and
|
||||||
|
Media Queries - The Complete Idiot's Guide"). You can find out more in [the
|
||||||
|
MDN Web Docs](https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag).
|
||||||
|
HTML5 Boilerplate comes with a simple setup that strikes a good balance for general use cases.
|
||||||
|
|
||||||
|
```html
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
```
|
||||||
|
|
||||||
|
If you want to take advantage of edge-to-edge displays of iPhone X/XS/XR you can do
|
||||||
|
so with additional viewport parameters. [Check the WebKit blog](https://webkit.org/blog/7929/designing-websites-for-iphone-x/)
|
||||||
|
for details.
|
||||||
|
|
||||||
|
## Web App Manifest
|
||||||
|
|
||||||
|
HTML5 Boilerplate includes a simple web app manifest file.
|
||||||
|
|
||||||
|
The web app manifest is a simple JSON file that allows you to control how your
|
||||||
|
app appears on a device's home screen, what it looks like when it launches
|
||||||
|
in that context and what happens when it is launched. This allows for much greater
|
||||||
|
control over the UI of a saved site or web app on a mobile device.
|
||||||
|
|
||||||
|
It's linked to from the HTML as follows:
|
||||||
|
|
||||||
|
```html
|
||||||
|
<link rel="manifest" href="site.webmanifest">
|
||||||
|
```
|
||||||
|
Our [site.webmanifest](https://github.com/h5bp/html5-boilerplate/blob/master/src/site.webmanifest) contains a very skeletal "app" definition, just to show the basic usage.
|
||||||
|
You should fill this file out with [more information about your site or application](https://developer.mozilla.org/en-US/docs/Web/Manifest)
|
||||||
|
|
||||||
|
## Favicons and Touch Icon
|
||||||
|
|
||||||
|
The shortcut icons should be put in the root directory of your site. `favicon.ico`
|
||||||
|
is automatically picked up by browsers if it's placed in the root. HTML5
|
||||||
|
Boilerplate comes with a default set of icons (include favicon and one Apple
|
||||||
|
Touch Icon) that you can use as a baseline to create your own.
|
||||||
|
|
||||||
|
Please refer to the more detailed description in the [Extend section](extend.md)
|
||||||
|
of these docs.
|
||||||
|
|
||||||
|
## The Content Area
|
||||||
|
|
||||||
|
The central part of the boilerplate template is pretty much empty. This is
|
||||||
|
intentional, in order to make the boilerplate suitable for both web page and
|
||||||
|
web app development.
|
||||||
|
|
||||||
|
### Browser Upgrade Prompt
|
||||||
|
|
||||||
|
The main content area of the boilerplate includes a prompt to install an up to
|
||||||
|
date browser for users of IE 9 and lower. If you intended to support IE, then you
|
||||||
|
should edit or remove the snippet of code.
|
||||||
|
|
||||||
|
## Modernizr
|
||||||
|
|
||||||
|
HTML5 Boilerplate uses a custom build of Modernizr.
|
||||||
|
|
||||||
|
[Modernizr](https://modernizr.com/) is a JavaScript library which adds classes to
|
||||||
|
the `html` element based on the results of feature test and which ensures that
|
||||||
|
all browsers can make use of HTML5 elements (as it includes the HTML5 Shiv).
|
||||||
|
This allows you to target parts of your CSS and JavaScript based on the
|
||||||
|
features supported by a browser.
|
||||||
|
|
||||||
|
Starting with version 3 Modernizr can be customized using the [modernizr-config.json](https://github.com/h5bp/html5-boilerplate/blob/master/modernizr-config.json) and the
|
||||||
|
[Modernizr command line utility](https://www.npmjs.com/package/modernizr-cli).
|
||||||
|
|
||||||
|
## What About Polyfills?
|
||||||
|
|
||||||
|
If you need to include [polyfills](https://remysharp.com/2010/10/08/what-is-a-polyfill)
|
||||||
|
in your project, you must make sure those load before any other JavaScript. If you're
|
||||||
|
using a polyfill CDN service, like [cdn.polyfill.io](https://cdn.polyfill.io/),
|
||||||
|
just put it before the other scripts in the bottom of the page:
|
||||||
|
|
||||||
|
```html
|
||||||
|
<script src="js/vendor/modernizr-3.8.0.min.js"></script>
|
||||||
|
<script src="https://cdn.polyfill.io/v3/polyfill.min.js"></script>
|
||||||
|
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
|
||||||
|
<script>window.jQuery || document.write('<script src="js/vendor/jquery-3.4.1.min.js"><\/script>')</script>
|
||||||
|
<script src="js/plugins.js"></script>
|
||||||
|
<script src="js/main.js"></script>
|
||||||
|
</body>
|
||||||
|
```
|
||||||
|
|
||||||
|
If you like to just include the polyfills yourself, you could include them in
|
||||||
|
`js/plugins.js`. When you have a bunch of polyfills to load in, you could
|
||||||
|
also create a `polyfills.js` file in the `js/vendor` directory or include the files
|
||||||
|
individually and combine them using a build tool. Always ensure that the polyfills
|
||||||
|
are all loaded before any other JavaScript.
|
||||||
|
|
||||||
|
There are some misconceptions about Modernizr and polyfills. It's important
|
||||||
|
to understand that Modernizr just handles feature checking, not polyfilling
|
||||||
|
itself. The only thing Modernizr does regarding polyfills is that the team
|
||||||
|
maintains [a huge list of cross Browser polyfills](https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills).
|
||||||
|
|
||||||
|
### jQuery CDN for jQuery
|
||||||
|
|
||||||
|
The jQuery CDN version of the jQuery JavaScript library is referenced towards
|
||||||
|
the bottom of the page. A local fallback of jQuery is included for rare instances
|
||||||
|
when the CDN version might not be available, and to facilitate offline
|
||||||
|
development.
|
||||||
|
|
||||||
|
The jQuery CDN version was chosen over other potential candidates
|
||||||
|
([like Google's Hosted Libraries](https://developers.google.com/speed/libraries/))
|
||||||
|
because it's fast ([comparable or faster than Google by some
|
||||||
|
measures](https://www.cdnperf.com/#jsdelivr,cdnjs,google,yandex,microsoft,jquery,bootstrapcdn/https/90))
|
||||||
|
and, (unlike Google's CDN) is available to China's hundreds of millions of internet users.
|
||||||
|
For many years we [chose](https://github.com/h5bp/html5-boilerplate/issues/1191)
|
||||||
|
the Google Hosted version over the jQuery CDN because it was available
|
||||||
|
over HTTPS (the jQuery CDN was not,) and it offered a better chance of
|
||||||
|
hitting the cache lottery owing to the popularity of the Google CDN.
|
||||||
|
The first issue is no longer valid and the second is far outweighed by
|
||||||
|
being able to serve jQuery to users in China.
|
||||||
|
|
||||||
|
While the jQuery CDN is a strong default solution your site or application may
|
||||||
|
require a different configuration. Testing your site with services like
|
||||||
|
[WebPageTest](https://www.webpagetest.org/) and browser tools like
|
||||||
|
[PageSpeed Insights](https://developers.google.com/speed/pagespeed/insights/) will help you examine the real
|
||||||
|
world performance of your site and can show where you can optimize your specific
|
||||||
|
site or application.
|
||||||
|
|
||||||
|
### Google Universal Analytics Tracking Code
|
||||||
|
|
||||||
|
Finally, an optimized version of the Google Universal Analytics tracking code is
|
||||||
|
included.
|
||||||
|
|
||||||
|
We use `analytics.js` rather than the newer `gtag.js` as
|
||||||
|
[it's faster and supports tasks and plugins](https://github.com/philipwalton/analyticsjs-boilerplate/issues/19#issuecomment-333714370)
|
||||||
|
|
||||||
|
The beacon transport mechanism is used to send all hits [which saves HTTP requests and improves performance](https://philipwalton.com/articles/the-google-analytics-setup-i-use-on-every-site-i-build/#loading-analytics.js).
|
||||||
|
|
||||||
|
Google recommends that this script be placed at the top of the page.
|
||||||
|
Factors to consider: if you place this script at the top of the page, you’ll
|
||||||
|
be able to count users who don’t fully load the page, and you’ll incur the max
|
||||||
|
number of simultaneous connections of the browser.
|
||||||
|
|
||||||
|
Further information:
|
||||||
|
|
||||||
|
- [Introduction to
|
||||||
|
Analytics.js](https://developers.google.com/analytics/devguides/collection/analyticsjs/)
|
||||||
|
- [Google Analytics Demos & Tools](https://ga-dev-tools.appspot.com/)
|
||||||
|
|
||||||
|
**N.B.** The Google Analytics snippet is included by default mainly
|
||||||
|
because Google Analytics is [currently one of the most popular tracking
|
||||||
|
solutions](https://trends.builtwith.com/analytics/Google-Analytics) out there.
|
||||||
|
However, its usage isn't set in stone, and you SHOULD consider exploring the
|
||||||
|
[alternatives](https://en.wikipedia.org/wiki/List_of_web_analytics_software)
|
||||||
|
and use whatever suits your needs best.
|
||||||
|
|
||||||
|
|
||||||
36
webpage/doc/js.md
Normal file
36
webpage/doc/js.md
Normal file
@ -0,0 +1,36 @@
|
|||||||
|
[HTML5 Boilerplate homepage](https://html5boilerplate.com/) | [Documentation
|
||||||
|
table of contents](TOC.md)
|
||||||
|
|
||||||
|
# The JavaScript
|
||||||
|
|
||||||
|
Information about the default JavaScript included in the project.
|
||||||
|
|
||||||
|
## main.js
|
||||||
|
|
||||||
|
This file can be used to contain or reference your site/app JavaScript code.
|
||||||
|
If you're working on something more advanced you might replace this file
|
||||||
|
entirely. That's cool.
|
||||||
|
|
||||||
|
## plugins.js
|
||||||
|
|
||||||
|
This file can be used to contain all your plugins, such as jQuery plugins and
|
||||||
|
other 3rd party scripts for a simple site.
|
||||||
|
|
||||||
|
One approach is to put jQuery plugins inside of a `(function($){ ...
|
||||||
|
})(jQuery);` closure to make sure they're in the jQuery namespace safety
|
||||||
|
blanket. Read more about [jQuery plugin
|
||||||
|
authoring](https://learn.jquery.com/plugins/#Getting_Started).
|
||||||
|
|
||||||
|
By default the `plugins.js` file contains a small script to avoid `console`
|
||||||
|
errors in browsers that lack a `console`. The script will make sure that, if
|
||||||
|
a console method isn't available, that method will have the value of empty
|
||||||
|
function, thus, preventing the browser from throwing an error.
|
||||||
|
|
||||||
|
## vendor
|
||||||
|
|
||||||
|
This directory can be used to contain all 3rd party library code.
|
||||||
|
|
||||||
|
Minified versions of the latest jQuery and Modernizr libraries are included by
|
||||||
|
default. You may wish to create your own [custom Modernizr
|
||||||
|
build with the online builder](https://modernizr.com/download/) or [command
|
||||||
|
line tool](https://modernizr.com/docs#command-line-config).
|
||||||
173
webpage/doc/misc.md
Normal file
173
webpage/doc/misc.md
Normal file
@ -0,0 +1,173 @@
|
|||||||
|
[HTML5 Boilerplate homepage](https://html5boilerplate.com/) | [Documentation
|
||||||
|
table of contents](TOC.md)
|
||||||
|
|
||||||
|
# Miscellaneous
|
||||||
|
|
||||||
|
* [.gitignore](#gitignore)
|
||||||
|
* [.editorconfig](#editorconfig)
|
||||||
|
* [Server Configuration](#server-configuration)
|
||||||
|
* [robots.txt](#robotstxt)
|
||||||
|
* [humans.txt](#humanstxt)
|
||||||
|
* [browserconfig.xml](#browserconfigxml)
|
||||||
|
|
||||||
|
--
|
||||||
|
|
||||||
|
## .gitignore
|
||||||
|
|
||||||
|
HTML5 Boilerplate includes a basic project-level `.gitignore`. This should
|
||||||
|
primarily be used to avoid certain project-level files and directories from
|
||||||
|
being kept under source control. Different development-environments will
|
||||||
|
benefit from different collections of ignores.
|
||||||
|
|
||||||
|
OS-specific and editor-specific files should be ignored using a "global
|
||||||
|
ignore" that applies to all repositories on your system.
|
||||||
|
|
||||||
|
For example, add the following to your `~/.gitconfig`, where the `.gitignore`
|
||||||
|
in your HOME directory contains the files and directories you'd like to
|
||||||
|
globally ignore:
|
||||||
|
|
||||||
|
```gitignore
|
||||||
|
[core]
|
||||||
|
excludesfile = ~/.gitignore
|
||||||
|
```
|
||||||
|
|
||||||
|
* More on global ignores: https://help.github.com/articles/ignoring-files/
|
||||||
|
* Comprehensive set of ignores on GitHub: https://github.com/github/gitignore
|
||||||
|
|
||||||
|
|
||||||
|
## .editorconfig
|
||||||
|
|
||||||
|
The `.editorconfig` file is provided in order to encourage and help you and
|
||||||
|
your team define and maintain consistent coding styles between different
|
||||||
|
editors and IDEs.
|
||||||
|
|
||||||
|
By default, `.editorconfig` includes some basic
|
||||||
|
[properties](https://editorconfig.org/#supported-properties) that reflect the
|
||||||
|
coding styles from the files provided by default, but you can easily change
|
||||||
|
them to better suit your needs.
|
||||||
|
|
||||||
|
In order for your editor/IDE to apply the
|
||||||
|
[properties](https://editorconfig.org/#supported-properties) from the
|
||||||
|
`.editorconfig` file, you may need to [install a
|
||||||
|
plugin]( https://editorconfig.org/#download).
|
||||||
|
|
||||||
|
__N.B.__ If you aren't using the server configurations provided by HTML5
|
||||||
|
Boilerplate, we highly encourage you to configure your server to block
|
||||||
|
access to `.editorconfig` files, as they can disclose sensitive information!
|
||||||
|
|
||||||
|
For more details, please refer to the [EditorConfig
|
||||||
|
project](https://editorconfig.org/).
|
||||||
|
|
||||||
|
|
||||||
|
## Server Configuration
|
||||||
|
|
||||||
|
H5BP includes a [`.htaccess`](#htaccess) file for the [Apache HTTP
|
||||||
|
server](https://httpd.apache.org/docs/). If you are not using Apache
|
||||||
|
as your web server, then you are encouraged to download a
|
||||||
|
[server configuration](https://github.com/h5bp/server-configs) that
|
||||||
|
corresponds to your web server and environment.
|
||||||
|
|
||||||
|
A `.htaccess` (hypertext access) file is an [Apache HTTP server
|
||||||
|
configuration file](https://github.com/h5bp/server-configs-apache).
|
||||||
|
The `.htaccess` file is mostly used for:
|
||||||
|
|
||||||
|
* Rewriting URLs
|
||||||
|
* Controlling cache
|
||||||
|
* Authentication
|
||||||
|
* Server-side includes
|
||||||
|
* Redirects
|
||||||
|
* Gzipping
|
||||||
|
|
||||||
|
If you have access to the main server configuration file (usually called
|
||||||
|
`httpd.conf`), you should add the logic from the `.htaccess` file in, for
|
||||||
|
example, a <Directory> section in the main configuration file. This is usually
|
||||||
|
the recommended way, as using .htaccess files slows down Apache!
|
||||||
|
|
||||||
|
To enable Apache modules locally, please see:
|
||||||
|
https://github.com/h5bp/server-configs-apache#enable-apache-httpd-modules.
|
||||||
|
|
||||||
|
In the repo the `.htaccess` is used for:
|
||||||
|
|
||||||
|
* Allowing cross-origin access to web fonts
|
||||||
|
* CORS header for images when browsers request it
|
||||||
|
* Enable `404.html` as 404 error document
|
||||||
|
* Making the website experience better for IE users better
|
||||||
|
* Media UTF-8 as character encoding for `text/html` and `text/plain`
|
||||||
|
* Enabling the rewrite URLs engine
|
||||||
|
* Forcing or removing the `www.` at the begin of a URL
|
||||||
|
* It blocks access to directories without a default document
|
||||||
|
* It blocks access to files that can expose sensitive information.
|
||||||
|
* It reduces MIME type security risks
|
||||||
|
* It forces compressing (gzipping)
|
||||||
|
* It tells the browser whether they should request a specific file from the
|
||||||
|
server or whether they should grab it from the browser's cache
|
||||||
|
|
||||||
|
When using `.htaccess` we recommend reading all inline comments (the rules after
|
||||||
|
a `#`) in the file once. There is a bunch of optional stuff in it.
|
||||||
|
|
||||||
|
If you want to know more about the `.htaccess` file check out the
|
||||||
|
[Apache HTTP server docs](https://httpd.apache.org/docs/) or more
|
||||||
|
specifically the [htaccess
|
||||||
|
section](https://httpd.apache.org/docs/current/howto/htaccess.html).
|
||||||
|
|
||||||
|
Notice that the original repo for the `.htaccess` file is [this
|
||||||
|
one](https://github.com/h5bp/server-configs-apache).
|
||||||
|
|
||||||
|
|
||||||
|
## robots.txt
|
||||||
|
|
||||||
|
The `robots.txt` file is used to give instructions to web robots on what can
|
||||||
|
be crawled from the website.
|
||||||
|
|
||||||
|
By default, the file provided by this project includes the next two lines:
|
||||||
|
|
||||||
|
* `User-agent: *` - the following rules apply to all web robots
|
||||||
|
* `Disallow:` - everything on the website is allowed to be crawled
|
||||||
|
|
||||||
|
If you want to disallow certain pages you will need to specify the path in a
|
||||||
|
`Disallow` directive (e.g.: `Disallow: /path`) or, if you want to disallow
|
||||||
|
crawling of all content, use `Disallow: /`.
|
||||||
|
|
||||||
|
The `/robots.txt` file is not intended for access control, so don't try to
|
||||||
|
use it as such. Think of it as a "No Entry" sign, rather than a locked door.
|
||||||
|
URLs disallowed by the `robots.txt` file might still be indexed without being
|
||||||
|
crawled, and the content from within the `robots.txt` file can be viewed by
|
||||||
|
anyone, potentially disclosing the location of your private content! So, if
|
||||||
|
you want to block access to private content, use proper authentication instead.
|
||||||
|
|
||||||
|
For more information about `robots.txt`, please see:
|
||||||
|
|
||||||
|
* [robotstxt.org](https://www.robotstxt.org/)
|
||||||
|
* [How Google handles the `robots.txt` file](https://developers.google.com/webmasters/control-crawl-index/docs/robots_txt)
|
||||||
|
|
||||||
|
## humans.txt
|
||||||
|
|
||||||
|
The `humans.txt` file is used to provide information about people involved with
|
||||||
|
the website.
|
||||||
|
|
||||||
|
The provided file contains three sections:
|
||||||
|
|
||||||
|
* `TEAM` - this is intended to list the group of people responsible for the website
|
||||||
|
* `THANKS` - this is intended to list the group of people that have contributed
|
||||||
|
to the website
|
||||||
|
* `TECHNOLOGY COLOPHON` - the section lists technologies used to make the website
|
||||||
|
|
||||||
|
For more information about `humans.txt`, please see: http://humanstxt.org/
|
||||||
|
|
||||||
|
|
||||||
|
## browserconfig.xml
|
||||||
|
|
||||||
|
The `browserconfig.xml` file is used to customize the tile displayed when users
|
||||||
|
pin your site to the Windows 8.1 start screen. In there you can define custom
|
||||||
|
tile colors, custom images or even [live tiles](https://msdn.microsoft.com/library/dn455106.aspx#CreatingLiveTiles).
|
||||||
|
|
||||||
|
By default, the file points to 2 placeholder tile images:
|
||||||
|
|
||||||
|
* `tile.png` (558x558px): used for `Small`, `Medium` and `Large` tiles.
|
||||||
|
This image resizes automatically when necessary.
|
||||||
|
* `tile-wide.png` (558x270px): user for `Wide` tiles.
|
||||||
|
|
||||||
|
Notice that IE11 uses the same images when adding a site to the `favorites`.
|
||||||
|
|
||||||
|
For more in-depth information about the `browserconfig.xml` file, please
|
||||||
|
see [MSDN](https://docs.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-developer/platform-apis/dn320426(v=vs.85)).
|
||||||
130
webpage/doc/usage.md
Normal file
130
webpage/doc/usage.md
Normal file
@ -0,0 +1,130 @@
|
|||||||
|
[HTML5 Boilerplate homepage](https://html5boilerplate.com/) | [Documentation
|
||||||
|
table of contents](TOC.md)
|
||||||
|
|
||||||
|
# Usage
|
||||||
|
|
||||||
|
The most basic usage of HTML5 Boilerplate is to create a static site or simple
|
||||||
|
app. Once you've downloaded or cloned the project, that process looks something
|
||||||
|
like this:
|
||||||
|
|
||||||
|
1. Set up the basic structure of the site.
|
||||||
|
2. Add some content, style, and functionality.
|
||||||
|
3. Run your site locally to see how it looks.
|
||||||
|
4. Deploy your site.
|
||||||
|
|
||||||
|
Cool, right? _It is_. That said, the smart defaults, baseline elements, default
|
||||||
|
attribute values and various other utilities that HTML5 Boilerplate offers can
|
||||||
|
serve as the foundation for whatever you're interested in building.
|
||||||
|
|
||||||
|
Even the basic use-case of a simple static site can be enhanced by manipulating
|
||||||
|
the code through an automated build process. Moving up in complexity HTML5
|
||||||
|
Boilerplate can be integrated with whatever front-end framework, CMS or
|
||||||
|
e-commerce platform you're working with. Mix-and-match to your heart's content.
|
||||||
|
Use what you need (toss it in a blender if you need to) and discard the rest.
|
||||||
|
HTML5 Boilerplate is a starting point, not a destination.
|
||||||
|
|
||||||
|
## Basic structure
|
||||||
|
|
||||||
|
A basic HTML5 Boilerplate site initially looks something like this:
|
||||||
|
|
||||||
|
```
|
||||||
|
.
|
||||||
|
├── css
|
||||||
|
│ ├── main.css
|
||||||
|
│ └── normalize.css
|
||||||
|
├── doc
|
||||||
|
├── img
|
||||||
|
├── js
|
||||||
|
│ ├── main.js
|
||||||
|
│ ├── plugins.js
|
||||||
|
│ └── vendor
|
||||||
|
│ ├── jquery.min.js
|
||||||
|
│ └── modernizr.min.js
|
||||||
|
├── .editorconfig
|
||||||
|
├── .htaccess
|
||||||
|
├── 404.html
|
||||||
|
├── browserconfig.xml
|
||||||
|
├── favicon.ico
|
||||||
|
├── humans.txt
|
||||||
|
├── icon.png
|
||||||
|
├── index.html
|
||||||
|
├── robots.txt
|
||||||
|
├── site.webmanifest
|
||||||
|
├── tile.png
|
||||||
|
└── tile-wide.png
|
||||||
|
```
|
||||||
|
|
||||||
|
What follows is a general overview of each major part and how to use them.
|
||||||
|
|
||||||
|
### css
|
||||||
|
|
||||||
|
This directory should contain all your project's CSS files. It includes some
|
||||||
|
initial CSS to help get you started from a solid foundation. [About the
|
||||||
|
CSS](css.md).
|
||||||
|
|
||||||
|
### doc
|
||||||
|
|
||||||
|
This directory contains all the HTML5 Boilerplate documentation. You can use it
|
||||||
|
as the location and basis for your own project's documentation.
|
||||||
|
|
||||||
|
### js
|
||||||
|
|
||||||
|
This directory should contain all your project's JS files. Libraries, plugins,
|
||||||
|
and custom code can all be included here. It includes some initial JS to help
|
||||||
|
get you started. [About the JavaScript](js.md).
|
||||||
|
|
||||||
|
### .htaccess
|
||||||
|
|
||||||
|
The default web server configs are for Apache. For more information, please
|
||||||
|
refer to the [Apache Server Configs
|
||||||
|
repository](https://github.com/h5bp/server-configs-apache).
|
||||||
|
|
||||||
|
Host your site on a server other than Apache? You're likely to find the
|
||||||
|
corresponding server configs project listed in our [Server Configs
|
||||||
|
](https://github.com/h5bp/server-configs/blob/master/README.md) repository.
|
||||||
|
|
||||||
|
### 404.html
|
||||||
|
|
||||||
|
A helpful custom 404 to get you started.
|
||||||
|
|
||||||
|
### browserconfig.xml
|
||||||
|
|
||||||
|
This file contains all settings regarding custom tiles for IE11 and Edge.
|
||||||
|
|
||||||
|
For more info on this topic, please refer to
|
||||||
|
[Microsoft's Docs](https://docs.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-developer/platform-apis/dn320426(v=vs.85)).
|
||||||
|
|
||||||
|
### .editorconfig
|
||||||
|
|
||||||
|
The `.editorconfig` file is provided in order to encourage and help you and
|
||||||
|
your team to maintain consistent coding styles between different
|
||||||
|
editors and IDEs. [Read more about the `.editorconfig` file](misc.md#editorconfig).
|
||||||
|
|
||||||
|
### index.html
|
||||||
|
|
||||||
|
This is the default HTML skeleton that should form the basis of all pages on
|
||||||
|
your site. If you are using a server-side templating framework, then you will
|
||||||
|
need to integrate this starting HTML with your setup.
|
||||||
|
|
||||||
|
Make sure that you update the URLs for the referenced CSS and JavaScript if you
|
||||||
|
modify the directory structure at all.
|
||||||
|
|
||||||
|
If you are using Google Universal Analytics, make sure that you edit the
|
||||||
|
corresponding snippet at the bottom to include your analytics ID.
|
||||||
|
|
||||||
|
### humans.txt
|
||||||
|
|
||||||
|
Edit this file to include the team that worked on your site/app, and the
|
||||||
|
technology powering it.
|
||||||
|
|
||||||
|
### robots.txt
|
||||||
|
|
||||||
|
Edit this file to include any pages you need hidden from search engines.
|
||||||
|
|
||||||
|
### Icons
|
||||||
|
|
||||||
|
Replace the default `favicon.ico`, `tile.png`, `tile-wide.png` and Apple
|
||||||
|
Touch Icon with your own.
|
||||||
|
|
||||||
|
If you want to use different Apple Touch Icons for different resolutions please
|
||||||
|
refer to the [according documentation](extend.md#apple-touch-icons).
|
||||||
BIN
webpage/favicon.ico
Normal file
BIN
webpage/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 766 B |
15
webpage/humans.txt
Normal file
15
webpage/humans.txt
Normal file
@ -0,0 +1,15 @@
|
|||||||
|
# humanstxt.org/
|
||||||
|
# The humans responsible & technology colophon
|
||||||
|
|
||||||
|
# TEAM
|
||||||
|
|
||||||
|
<name> -- <role> -- <twitter>
|
||||||
|
|
||||||
|
# THANKS
|
||||||
|
|
||||||
|
<name>
|
||||||
|
|
||||||
|
# TECHNOLOGY COLOPHON
|
||||||
|
|
||||||
|
CSS3, HTML5
|
||||||
|
Apache Server Configs, jQuery, Modernizr, Normalize.css
|
||||||
BIN
webpage/icon.png
Normal file
BIN
webpage/icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.9 KiB |
0
webpage/img/.gitignore
vendored
Normal file
0
webpage/img/.gitignore
vendored
Normal file
78
webpage/index.html
Normal file
78
webpage/index.html
Normal file
@ -0,0 +1,78 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html class="no-js" lang="">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title></title>
|
||||||
|
<meta name="description" content="">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
|
||||||
|
<link rel="manifest" href="site.webmanifest">
|
||||||
|
<link rel="apple-touch-icon" href="icon.png">
|
||||||
|
<!-- Place favicon.ico in the root directory -->
|
||||||
|
|
||||||
|
<link rel="stylesheet" href="css/normalize.css">
|
||||||
|
<link rel="stylesheet" href="css/main.css">
|
||||||
|
|
||||||
|
<link href="https://vjs.zencdn.net/7.7.5/video-js.css" rel="stylesheet" />
|
||||||
|
<meta name="theme-color" content="#fafafa">
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<!--[if IE]>
|
||||||
|
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="https://browsehappy.com/">upgrade your browser</a> to improve your experience and security.</p>
|
||||||
|
<![endif]-->
|
||||||
|
|
||||||
|
<!-- Add your site or application content here -->
|
||||||
|
<p>Hello world! This is HTML5 Boilerplate.</p>
|
||||||
|
<script src="js/vendor/modernizr-3.8.0.min.js"></script>
|
||||||
|
<script src="https://code.jquery.com/jquery-3.4.1.min.js"
|
||||||
|
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
|
||||||
|
<script>window.jQuery || document.write('<script src="js/vendor/jquery-3.4.1.min.js"><\/script>')</script>
|
||||||
|
<script src="js/plugins.js"></script>
|
||||||
|
<script src="js/main.js"></script>
|
||||||
|
|
||||||
|
<video id="my-video" class="video-js" controls preload="auto" width="640" height="264" poster="MY_VIDEO_POSTER.jpg autoplay"
|
||||||
|
data-setup="{}">
|
||||||
|
<source
|
||||||
|
src="http://localhost/hls/hls1.m3u8"
|
||||||
|
type="application/x-mpegURL">
|
||||||
|
<p class="vjs-no-js">
|
||||||
|
To view this video please enable JavaScript, and consider upgrading to a
|
||||||
|
web browser that
|
||||||
|
<a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
|
||||||
|
</p>
|
||||||
|
</video>
|
||||||
|
|
||||||
|
<video id="my-video" class="video-js" controls preload="auto" width="640" height="264" poster="MY_VIDEO_POSTER.jpg autoplay"
|
||||||
|
data-setup="{}">
|
||||||
|
<source
|
||||||
|
src="http://localhost/hls/hls2.m3u8"
|
||||||
|
type="application/x-mpegURL">
|
||||||
|
<p class="vjs-no-js">
|
||||||
|
To view this video please enable JavaScript, and consider upgrading to a
|
||||||
|
web browser that
|
||||||
|
<a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
|
||||||
|
</p>
|
||||||
|
</video>
|
||||||
|
|
||||||
|
|
||||||
|
<video id="my-video" class="video-js" controls preload="auto" width="640" height="264" poster="MY_VIDEO_POSTER.jpg autoplay"
|
||||||
|
data-setup="{}">
|
||||||
|
<source
|
||||||
|
src="http://localhost/hls/hls3.m3u8"
|
||||||
|
type="application/x-mpegURL">
|
||||||
|
<p class="vjs-no-js">
|
||||||
|
To view this video please enable JavaScript, and consider upgrading to a
|
||||||
|
web browser that
|
||||||
|
<a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
|
||||||
|
</p>
|
||||||
|
</video>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<script src="https://vjs.zencdn.net/7.7.5/video.js"></script>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
0
webpage/js/main.js
Normal file
0
webpage/js/main.js
Normal file
24
webpage/js/plugins.js
Normal file
24
webpage/js/plugins.js
Normal file
@ -0,0 +1,24 @@
|
|||||||
|
// Avoid `console` errors in browsers that lack a console.
|
||||||
|
(function() {
|
||||||
|
var method;
|
||||||
|
var noop = function () {};
|
||||||
|
var methods = [
|
||||||
|
'assert', 'clear', 'count', 'debug', 'dir', 'dirxml', 'error',
|
||||||
|
'exception', 'group', 'groupCollapsed', 'groupEnd', 'info', 'log',
|
||||||
|
'markTimeline', 'profile', 'profileEnd', 'table', 'time', 'timeEnd',
|
||||||
|
'timeline', 'timelineEnd', 'timeStamp', 'trace', 'warn'
|
||||||
|
];
|
||||||
|
var length = methods.length;
|
||||||
|
var console = (window.console = window.console || {});
|
||||||
|
|
||||||
|
while (length--) {
|
||||||
|
method = methods[length];
|
||||||
|
|
||||||
|
// Only stub undefined methods.
|
||||||
|
if (!console[method]) {
|
||||||
|
console[method] = noop;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}());
|
||||||
|
|
||||||
|
// Place any jQuery/helper plugins in here.
|
||||||
2
webpage/js/vendor/jquery-3.4.1.min.js
vendored
Normal file
2
webpage/js/vendor/jquery-3.4.1.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
3
webpage/js/vendor/modernizr-3.8.0.min.js
vendored
Normal file
3
webpage/js/vendor/modernizr-3.8.0.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
5
webpage/robots.txt
Normal file
5
webpage/robots.txt
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
# www.robotstxt.org/
|
||||||
|
|
||||||
|
# Allow crawling of all content
|
||||||
|
User-agent: *
|
||||||
|
Disallow:
|
||||||
12
webpage/site.webmanifest
Normal file
12
webpage/site.webmanifest
Normal file
@ -0,0 +1,12 @@
|
|||||||
|
{
|
||||||
|
"short_name": "",
|
||||||
|
"name": "",
|
||||||
|
"icons": [{
|
||||||
|
"src": "icon.png",
|
||||||
|
"type": "image/png",
|
||||||
|
"sizes": "192x192"
|
||||||
|
}],
|
||||||
|
"start_url": "/?utm_source=homescreen",
|
||||||
|
"background_color": "#fafafa",
|
||||||
|
"theme_color": "#fafafa"
|
||||||
|
}
|
||||||
BIN
webpage/tile-wide.png
Normal file
BIN
webpage/tile-wide.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
BIN
webpage/tile.png
Normal file
BIN
webpage/tile.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.4 KiB |
Loading…
Reference in New Issue
Block a user