# Certible Static Resources

Service point for resources shared between projects: [https://static.certible.com](https://static.certible.com)

## Open Graph (OG)

[/og](/og)

## Logos

### SVG

```html
  <img src="https://static.certible.com/logos/certible.svg" alt="Certible logo, it contains 'certible' as text at the top and below 'international certification body'. The text is in black and red." />
```

#### Outline and White Text

```html
  <img src="https://static.certible.com/logos/certible_outline_white.svg" alt="Certible logo, it contains 'certible' as text at the top and below 'international certification body'. The text is in white and red." />
```

### High DPI

```html
  <img src="https://static.certible.com/logos/certible_dpi300_w_2048.png" alt="Certible logo, it contains 'certible' as text at the top and below 'international certification body'. The text is in black and red." />
```

### Src Sets

```html
<!--30% of view-port of screens of width >= 768-->
<img
sizes="(max-width: 6827px) 30vw, 2048px"
srcset="
https://static.certible.com/logos/certible_large_w_231.png 231w,
https://static.certible.com/logos/certible_large_w_1398.png 1398w,
https://static.certible.com/logos/certible_large_w_2048.png 2048w"
src="https://static.certible.com/logos/certible_large_w_2048.png"
alt="Certible logo, it contains 'certible' as text at the top and below 'international certification body'. The text is in black and red.">
<!--30% of view-port of screens of width < 767-->
<img
sizes="(max-width: 1540px) 30vw, 462px"
srcset="
https://static.certible.com/logos/certible_small_w_200.png 200w,
https://static.certible.com/logos/certible_small_w_462.png 462w"
src="https://static.certible.com/logos/certible_small_w_462.png"
alt="Certible logo, it contains 'certible' as text at the top and below 'international certification body'. The text is in black and red.">
<!--Picture Tag-->
<picture>
<source
media="(max-width: 767px)"
sizes="(max-width: 1540px) 30vw, 462px"
srcset="
https://static.certible.com/logos/certible_small_w_200.png 200w,
https://static.certible.com/logos/certible_small_w_462.png 462w">
<img
sizes="(max-width: 6827px) 30vw, 2048px"
srcset="
https://static.certible.com/logos/certible_large_w_231.png 231w,
https://static.certible.com/logos/certible_large_w_1398.png 1398w,
https://static.certible.com/logos/certible_large_w_2048.png 2048w"
src="https://static.certible.com/logos/certible_large_w_2048.png"
alt="Certible logo, it contains 'certible' as text at the top and below 'international certification body'. The text is in black and red.">
</picture>
```

## Favicons

```html
 <link
      rel="apple-touch-icon-precomposed"
      sizes="57x57"
      href="https://static.certible.com/icons/apple-touch-icon-57x57.png"
    />
    <link
      rel="apple-touch-icon-precomposed"
      sizes="114x114"
      href="https://static.certible.com/icons/apple-touch-icon-114x114.png"
    />
    <link
      rel="apple-touch-icon-precomposed"
      sizes="72x72"
      href="https://static.certible.com/icons/apple-touch-icon-72x72.png"
    />
    <link
      rel="apple-touch-icon-precomposed"
      sizes="144x144"
      href="https://static.certible.com/icons/apple-touch-icon-144x144.png"
    />
    <link
      rel="apple-touch-icon-precomposed"
      sizes="60x60"
      href="https://static.certible.com/icons/apple-touch-icon-60x60.png"
    />
    <link
      rel="apple-touch-icon-precomposed"
      sizes="120x120"
      href="https://static.certible.com/icons/apple-touch-icon-120x120.png"
    />
    <link
      rel="apple-touch-icon-precomposed"
      sizes="76x76"
      href="https://static.certible.com/icons/apple-touch-icon-76x76.png"
    />
    <link
      rel="apple-touch-icon-precomposed"
      sizes="152x152"
      href="https://static.certible.com/icons/apple-touch-icon-152x152.png"
    />
    <link
      rel="icon"
      type="image/png"
      href="https://static.certible.com/icons/favicon-196x196.png"
      sizes="196x196"
    />
    <link
      rel="icon"
      type="image/png"
      href="https://static.certible.com/icons/favicon-96x96.png"
      sizes="96x96"
    />
    <link
      rel="icon"
      type="image/png"
      href="https://static.certible.com/icons/favicon-32x32.png"
      sizes="32x32"
    />
    <link
      rel="icon"
      type="image/png"
      href="https://static.certible.com/icons/favicon-16x16.png"
      sizes="16x16"
    />
    <link
      rel="icon"
      type="image/png"
      href="https://static.certible.com/icons/favicon-128x128.png"
      sizes="128x128"
    />
    <link
      rel="icon"
      type="image/x-icon"
      href="https://static.certible.com/icons/favicon.ico"
    />
    <link
      rel="icon"
      type="image/svg+xml"
      href="https://static.certible.com/icons/favicon.svg"
    />
    <meta name="msapplication-TileColor" content="#FFFFFF" />
    <meta name="msapplication-TileImage" content="https://static.certible.com/icons/mstile-144x144.png" />
    <meta
      name="msapplication-square70x70logo"
      content="https://static.certible.com/icons/mstile-70x70.png"
    />
    <meta
      name="msapplication-square150x150logo"
      content="https://static.certible.com/icons/mstile-150x150.png"
    />
    <meta
      name="msapplication-wide310x150logo"
      content="https://static.certible.com/icons/mstile-310x150.png"
    />
    <meta
      name="msapplication-square310x310logo"
      content="https://static.certible.com/icons/mstile-310x310.png"
    />
    <!--Update application name to represent the correct frontend, eg. CertibleExam -->
    <meta name="application-name" content="Certible" />
```

## Deployment

The repository will auto-deploy via aws pipeline on `main` branch push. Build stage [buildspec.yml](buildspec.yml) will clear the old files from S3 bucket, before deploy stage. After deployment the cloudfront in front of the S3 bucket will be invalidated.

[https://eu-central-1.console.aws.amazon.com/codesuite/codepipeline/pipelines/static-certible-pipeline](https://eu-central-1.console.aws.amazon.com/codesuite/codepipeline/pipelines/static-certible-pipeline)

### Bucket Policy

```json
{
    "Version": "2008-10-17",
    "Id": "PolicyForCloudFrontPrivateContent",
    "Statement": [
        {
            "Sid": "AllowCloudFrontServicePrincipal",
            "Effect": "Allow",
            "Principal": {
                "Service": "cloudfront.amazonaws.com"
            },
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::static.certible.com/*",
            "Condition": {
                "StringEquals": {
                    "AWS:SourceArn": "arn:aws:cloudfront::xxxxx:distribution/XXXXX"
                }
            }
        },
        {
            "Sid": "AllowAccessCodeBuild",
            "Effect": "Allow",
            "Principal": {
                "AWS": "arn:aws:iam::xxxxx:role/service-role/codebuild-static-certible-pipeline-service-role"
            },
            "Action": [
                "s3:DeleteObject",
                "s3:GetObject",
                "s3:ListBucket"
            ],
            "Resource": [
                "arn:aws:s3:::static.certible.com",
                "arn:aws:s3:::static.certible.com/*"
            ]
        }
    ]
}
```