Enable website development (#2490)

.devcontainer/devcontainer.json

@@ -0,0 +1,8 @@
+// For format details, see https://aka.ms/devcontainer.json. For config options, see the
+// README at: https://github.com/devcontainers/templates/tree/main/src/python
+{
+	"name": "Privacy Guides",
+	"image": "ghcr.io/squidfunk/mkdocs-material:9.5.17",
+	"forwardPorts": [8000],
+  "postCreateCommand": "git submodule init; git submodule update theme/assets/brand; mkdocs serve --dev-addr=0.0.0.0:8000 --config-file config/mkdocs.en.yml"
+}

.devcontainer/team/devcontainer.json

@@ -0,0 +1,8 @@
+// For format details, see https://aka.ms/devcontainer.json. For config options, see the
+// README at: https://github.com/devcontainers/templates/tree/main/src/python
+{
+	"name": "Privacy Guides Team",
+	"image": "ghcr.io/privacyguides/privacyguides.org:main",
+	"forwardPorts": [8000],
+  "postCreateCommand": "git submodule init; git submodule update theme/assets/brand; MKDOCS_INHERIT=mkdocs-production.yml mkdocs serve --dev-addr=0.0.0.0:8000 --config-file config/mkdocs.en.yml"
+}

.github/dependabot.yml

@@ -49,6 +49,16 @@ updates:
       interval: "monthly"
     labels:
       - "fix:submodules"
+
+  - package-ecosystem: "devcontainers"
+    directory: "/"
+    schedule:
+      interval: weekly
+
+  - package-ecosystem: "docker"
+    directory: "/"
+    schedule:
+      interval: weekly
 # Disabled because some updates tend to remove needed dependencies for some reason
 
 #  # Maintain dependencies for pipenv

.github/workflows/build-container.yml

@@ -0,0 +1,93 @@
+#
+name: ☁️ Build Container
+
+# Configures this workflow to run every time a change is pushed to the branch called `release`.
+on:
+  push:
+    branches: ['main']
+  release:
+    types: [published]
+  workflow_dispatch:
+
+concurrency:
+  group: container-build
+  cancel-in-progress: true
+
+permissions:
+  contents: read
+  packages: write
+
+# Defines two custom environment variables for the workflow. These are used for the Container registry domain, and a name for the Docker image that this workflow builds.
+env:
+  REGISTRY: ghcr.io
+  IMAGE_NAME: ${{ github.repository }}
+
+# There is a single job in this workflow. It's configured to run on the latest available version of Ubuntu.
+jobs:
+  submodule:
+    strategy:
+      matrix:
+        repo: [mkdocs-material-insiders, brand]
+    uses: privacyguides/.github/.github/workflows/download-repo.yml@main
+    with:
+      repo: ${{ matrix.repo }}
+    secrets:
+      ACTIONS_SSH_KEY: ${{ secrets.ACTIONS_SSH_KEY }}
+
+  build-and-push-image:
+    needs: submodule
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - uses: actions/download-artifact@v4
+        with:
+          pattern: repo-*
+          path: modules
+
+      - run: |
+          rm -rf modules/mkdocs-material
+          mv modules/repo-mkdocs-material-insiders modules/mkdocs-material
+          rm -rf theme/assets/brand
+          mv modules/repo-brand theme/assets/brand
+
+      # Uses the `docker/login-action` action to log in to the Container registry registry using the account and password that will publish the packages. Once published, the packages are scoped to the account defined here.
+      - name: Log in to the Container registry
+        uses: docker/login-action@v3.1.0
+        with:
+          registry: ${{ env.REGISTRY }}
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+
+      # This step uses [docker/metadata-action](https://github.com/docker/metadata-action#about) to extract tags and labels that will be applied to the specified image. The `id` "meta" allows the output of this step to be referenced in a subsequent step. The `images` value provides the base name for the tags and labels.
+      - name: Extract metadata (tags, labels) for Docker
+        id: meta
+        uses: docker/metadata-action@v5.5.1
+        with:
+          images: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}
+          tags: |
+            type=ref,event=branch
+            type=ref,event=tag
+            type=ref,event=pr
+            type=sha
+          flavor: |
+            latest=${{ github.event_name == 'release' }}
+
+      # This step uses the `docker/build-push-action` action to build the image, based on your repository's `Dockerfile`. If the build succeeds, it pushes the image to GitHub Packages.
+      # It uses the `context` parameter to define the build's context as the set of files located in the specified path. For more information, see "[Usage](https://github.com/docker/build-push-action#usage)" in the README of the `docker/build-push-action` repository.
+      # It uses the `tags` and `labels` parameters to tag and label the image with the output from the "meta" step.
+      - name: Build and push Docker image
+        uses: docker/build-push-action@v5.3.0
+        with:
+          context: .
+          push: true
+          tags: ${{ steps.meta.outputs.tags }}
+          labels: ${{ steps.meta.outputs.labels }}
+
+  cleanup:
+    if: ${{ always() }}
+    needs: build-and-push-image
+    uses: privacyguides/.github/.github/workflows/cleanup.yml@main

.github/workflows/build.yml

@@ -3,6 +3,9 @@ name: Build Website
 on:
   workflow_call:
     inputs:
+      base_config:
+        type: string
+        default: mkdocs-production.yml
       ref:
         required: true
         type: string
@@ -90,6 +93,7 @@ jobs:
       - env:
           GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           CONTEXT: ${{ inputs.context }}
+          MKDOCS_INHERIT: ${{ inputs.base_config }}
           PRODUCTION: true
         run: |
           pipenv run mkdocs build --config-file config/mkdocs.${{ inputs.lang }}.yml

.github/workflows/publish-release.yml

@@ -25,6 +25,10 @@ on:
     tags:
       - "*"
 
+concurrency:
+  group: release-deployment
+  cancel-in-progress: true
+
 permissions:
   contents: write
   pages: write

.github/workflows/test-lint.yml

@@ -63,7 +63,7 @@ jobs:
           # ADD YOUR CUSTOM ENV VARIABLES HERE OR DEFINE THEM IN A FILE .mega-linter.yml AT THE ROOT OF YOUR REPOSITORY
           DISABLE: COPYPASTE,SPELL,HTML
           DISABLE_LINTERS: JSON_JSONLINT,MARKDOWN_MARKDOWN_TABLE_FORMATTER
-          DISABLE_ERRORS_LINTERS: CSS_STYLELINT,MARKDOWN_MARKDOWN_LINK_CHECK,YAML_YAMLLINT
+          DISABLE_ERRORS_LINTERS: CSS_STYLELINT,MARKDOWN_MARKDOWN_LINK_CHECK,YAML_YAMLLINT,DOCKERFILE_HADOLINT,REPOSITORY_TRIVY
           EDITORCONFIG_EDITORCONFIG_CHECKER_ARGUMENTS: -disable-indentation
           ENV_DOTENV_LINTER_ARGUMENTS: "--skip QuoteCharacter"
           MARKDOWN_MARKDOWN_LINK_CHECK_FILTER_REGEX_INCLUDE: (docs)

.gitignore

@@ -20,3 +20,6 @@ site
 # Local Netlify folder
 .netlify
 node_modules
+
+# Python
+.venv

Dockerfile

@@ -0,0 +1,71 @@
+FROM python:3.12-alpine as base
+
+LABEL org.opencontainers.image.source="https://github.com/privacyguides/privacyguides.org"
+
+# Setup env
+ENV LANG C.UTF-8
+ENV LC_ALL C.UTF-8
+ENV PYTHONDONTWRITEBYTECODE 1
+ENV PYTHONFAULTHANDLER 1
+
+FROM base AS python-deps
+
+# Install pipenv and compilation dependencies
+RUN pip install pipenv
+RUN \
+  apk upgrade --update-cache -a \
+&& \
+  apk add --no-cache \
+    gcc \
+    libffi-dev \
+    musl-dev
+
+# Install python dependencies in /.venv
+COPY modules/mkdocs-material ./modules/mkdocs-material
+COPY Pipfile .
+COPY Pipfile.lock .
+RUN PIPENV_VENV_IN_PROJECT=1 pipenv install --deploy
+
+FROM base AS runtime
+
+# Install runtime dependencies
+RUN \
+  apk upgrade --update-cache -a \
+&& \
+  apk add --no-cache \
+    cairo \
+    freetype-dev \
+    git \
+    git-fast-import \
+    jpeg-dev \
+    openssh \
+    pngquant \
+    tini \
+    zlib-dev \
+    libffi-dev \
+    musl-dev
+
+# Copy virtual env from python-deps stage
+COPY --from=python-deps /.venv /.venv
+COPY --from=python-deps /modules/mkdocs-material /modules/mkdocs-material
+ENV PATH="/.venv/bin:$PATH"
+
+# Create and switch to a new user
+RUN mkdir /site
+WORKDIR /site
+
+COPY docs docs
+COPY theme theme
+COPY includes includes
+COPY config/*.yml config/
+COPY config/layouts config/layouts
+COPY config/.cache/plugin/social/fonts config/.cache/plugin/social/fonts
+
+EXPOSE 8000
+
+ENV MKDOCS_INHERIT mkdocs-production.yml
+
+HEALTHCHECK NONE
+
+ENTRYPOINT ["mkdocs"]
+CMD ["serve", "--dev-addr=0.0.0.0:8000", "--config-file=config/mkdocs.en.yml"]

Pipfile.lock

@@ -45,7 +45,6 @@
                 "sha256:432531d72347291b9a9ebfb6777026b607563fd8719c46ee742db0aef7271ba0",
                 "sha256:8a5222d4e6c3f86f1f7046b63246877a63b49923a1cd202184c3a634ef546b3b"
             ],
-            "markers": "python_version >= '3.5'",
             "version": "==2.7.1"
         },
         "certifi": {
@@ -399,6 +398,7 @@
                 "sha256:b070bbe8d3f0f6147689bed981d19bbb33070225373338df755a46893528104a",
                 "sha256:b0b58fbfa1bf7367dde8a557994e3b1637294be6cf2169810375caf8571a085c",
                 "sha256:b560e3aa4b1d49e0e6c847d72665384db35b2f5d45f8e6a5c0072e0283430533",
+                "sha256:b6241d4eee5f89453307c2f2bfa03b50362052ca0af1efecf9fef9a41a22bb4f",
                 "sha256:b6787b643356111dfd4032b5bffe26d2f8331556ecb79e15dacb9275da02866e",
                 "sha256:bcbf4af004f98793a95355980764b3d80d47117678118a44a80b721c9913436a",
                 "sha256:beb72935a941965c52990f3a32d7f07ce869fe21c6af8b34bf6a277b33a345d3",
@@ -569,6 +569,7 @@
             "extras": [
                 "imaging"
             ],
+            "markers": "python_version >= '3.8'",
             "path": "./modules/mkdocs-material"
         },
         "mkdocs-material-extensions": {
@@ -673,7 +674,6 @@
                 "sha256:fdcbb4068117dfd9ce0138d068ac512843c52295ed996ae6dd1faf537b6dbc27",
                 "sha256:ff61bfd9253c3915e6d41c651d5f962da23eda633cf02262990094a18a55371a"
             ],
-            "markers": "python_version >= '3.8'",
             "version": "==10.3.0"
         },
         "platformdirs": {

README.md

@@ -86,7 +86,14 @@ When you contribute to this repository you are doing so under the above licenses
 
 Committing to this repository requires [signing your commits](https://docs.github.com/en/authentication/managing-commit-signature-verification/signing-commits) (`git config commit.gpgsign true`) unless you are making edits via the GitHub.com text editor interface. As of August 2022 the preferred signing method is [SSH commit signatures](https://docs.github.com/en/authentication/managing-commit-signature-verification/about-commit-signature-verification#ssh-commit-signature-verification), but GPG signing is also acceptable. You should add your signing key to your GitHub profile.
 
-This website uses [`mkdocs-material-insiders`](https://squidfunk.github.io/mkdocs-material/insiders) which offers additional functionality over the open-source `mkdocs-material` project. For obvious reasons we cannot distribute access to the insiders repository. Running this website locally without access to insiders is unsupported. If you are submitting a PR, please ensure the automatic preview generated for your PR looks correct, as that site will be built with the production insiders build.
+### With `mkdocs-material`
+
+1. Install required packages: `pip install mkdocs-material`
+2. Run a local preview of the English site: `mkdocs serve --config-file config/mkdocs.en.yml`
+
+### With `mkdocs-material-insiders`
+
+This website uses [`mkdocs-material-insiders`](https://squidfunk.github.io/mkdocs-material/insiders) which offers additional functionality over the open-source `mkdocs-material` project. For obvious reasons we cannot distribute access to the insiders repository. If you are submitting a PR, please ensure the automatic preview generated for your PR looks correct, as that site will be built with the production insiders build.
 
 **Team members** should clone the repository with `mkdocs-material-insiders` directly. This method is identical to production:
 
@@ -95,9 +102,9 @@ This website uses [`mkdocs-material-insiders`](https://squidfunk.github.io/mkdoc
 3. Install Python **3.12**.
 4. Install **pipenv**: `pip install pipenv`
 5. Install dependencies: `pipenv install --dev` (install [Pillow and CairoSVG](https://squidfunk.github.io/mkdocs-material/setup/setting-up-social-cards/#dependencies) as well to generate social cards)
-6. Serve the site locally: `pipenv run mkdocs serve --config-file config/mkdocs.en.yml` (set `CARDS=true` to generate social cards)
+6. Serve the site locally: `MKDOCS_INHERIT=mkdocs-production.yml pipenv run mkdocs serve --config-file config/mkdocs.en.yml` (set `CARDS=true` to generate social cards)
     - The site will be available at `http://localhost:8000`
-    - You can build the site locally with `pipenv run mkdocs build --config-file config/mkdocs.en.yml`
+    - You can build the site locally with `MKDOCS_INHERIT=mkdocs-production.yml pipenv run mkdocs build --config-file config/mkdocs.en.yml`
     - This version of the site should be identical to the live, production version
 
 If you commit to `main` with commits signed with your SSH key, you should add your SSH key to [`.allowed_signers`](/.allowed_signers) in this repo.

config/mkdocs-common.yml

@@ -307,36 +307,12 @@ watch:
 plugins:
   tags: {}
   search: {}
-  macros: {}
-  meta: {}
-  git-committers:
-    enabled: !ENV [GITCOMMITTERS, PRODUCTION, NETLIFY, false]
-    repository: privacyguides/privacyguides.org
-    branch: main
-  git-revision-date-localized:
-    enabled: !ENV [GITREVISIONDATE, PRODUCTION, NETLIFY, false]
-    exclude:
-      - index.md
-    fallback_to_build_date: true
   privacy:
     assets_exclude:
       - cdn.jsdelivr.net/npm/mathjax@3/*
-  optimize:
-    enabled: !ENV [OPTIMIZE, PRODUCTION, NETLIFY, false]
-  typeset: {}
-  social:
-    cards: !ENV [CARDS, PRODUCTION, NETLIFY, true]
-    cards_dir: assets/img/social
-    cards_layout_dir: config/layouts
-    cards_layout: page
-    # cards_layout: pride
 
 markdown_extensions:
   admonition: {}
-  material.extensions.preview:
-    sources:
-      exclude:
-        - tools.md
   pymdownx.details: {}
   pymdownx.superfences:
     custom_fences:

config/mkdocs-offline.yml

@@ -18,7 +18,7 @@
 # FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
 # IN THE SOFTWARE.
 
-INHERIT: mkdocs-common.yml
+INHERIT: !ENV [MKDOCS_INHERIT, mkdocs-common.yml]
 
 # Disable any GitHub integrations
 repo_url: ""

config/mkdocs-production.yml

@@ -0,0 +1,29 @@
+INHERIT: mkdocs-common.yml
+
+plugins:
+  macros: {}
+  meta: {}
+  git-committers:
+    enabled: !ENV [GITCOMMITTERS, PRODUCTION, NETLIFY, false]
+    repository: privacyguides/privacyguides.org
+    branch: main
+  git-revision-date-localized:
+    enabled: !ENV [GITREVISIONDATE, PRODUCTION, NETLIFY, false]
+    exclude:
+      - index.md
+    fallback_to_build_date: true
+  optimize:
+    enabled: !ENV [OPTIMIZE, PRODUCTION, NETLIFY, false]
+  typeset: {}
+  social:
+    cards: !ENV [CARDS, PRODUCTION, NETLIFY, true]
+    cards_dir: assets/img/social
+    cards_layout_dir: config/layouts
+    cards_layout: page
+    # cards_layout: pride
+
+markdown_extensions:
+  material.extensions.preview:
+    sources:
+      exclude:
+        - tools.md

config/mkdocs.en.yml

@@ -18,7 +18,7 @@
 # FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
 # IN THE SOFTWARE.
 
-INHERIT: mkdocs-common.yml
+INHERIT: !ENV [MKDOCS_INHERIT, mkdocs-common.yml]
 site_url: "https://www.privacyguides.org/en/"
 site_dir: "../site/en"
 

config/mkdocs.es.yml

@@ -18,7 +18,7 @@
 # FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
 # IN THE SOFTWARE.
 
-INHERIT: mkdocs-common.yml
+INHERIT: !ENV [MKDOCS_INHERIT, mkdocs-common.yml]
 docs_dir: "../i18n/es"
 site_url: "https://www.privacyguides.org/es/"
 site_dir: "../site/es"

config/mkdocs.fr.yml

@@ -18,7 +18,7 @@
 # FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
 # IN THE SOFTWARE.
 
-INHERIT: mkdocs-common.yml
+INHERIT: !ENV [MKDOCS_INHERIT, mkdocs-common.yml]
 docs_dir: "../i18n/fr"
 site_url: "https://www.privacyguides.org/fr/"
 site_dir: "../site/fr"

config/mkdocs.he.yml

@@ -18,7 +18,7 @@
 # FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
 # IN THE SOFTWARE.
 
-INHERIT: mkdocs-common.yml
+INHERIT: !ENV [MKDOCS_INHERIT, mkdocs-common.yml]
 docs_dir: "../i18n/he"
 site_url: "https://www.privacyguides.org/he/"
 site_dir: "../site/he"

config/mkdocs.it.yml

@@ -18,7 +18,7 @@
 # FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
 # IN THE SOFTWARE.
 
-INHERIT: mkdocs-common.yml
+INHERIT: !ENV [MKDOCS_INHERIT, mkdocs-common.yml]
 docs_dir: "../i18n/it"
 site_url: "https://www.privacyguides.org/it/"
 site_dir: "../site/it"

config/mkdocs.nl.yml

@@ -18,7 +18,7 @@
 # FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
 # IN THE SOFTWARE.
 
-INHERIT: mkdocs-common.yml
+INHERIT: !ENV [MKDOCS_INHERIT, mkdocs-common.yml]
 docs_dir: "../i18n/nl"
 site_url: "https://www.privacyguides.org/nl/"
 site_dir: "../site/nl"

config/mkdocs.ru.yml

@@ -18,7 +18,7 @@
 # FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
 # IN THE SOFTWARE.
 
-INHERIT: mkdocs-common.yml
+INHERIT: !ENV [MKDOCS_INHERIT, mkdocs-common.yml]
 docs_dir: "../i18n/ru"
 site_url: "https://www.privacyguides.org/ru/"
 site_dir: "../site/ru"

config/mkdocs.zh-Hant.yml

@@ -18,7 +18,7 @@
 # FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
 # IN THE SOFTWARE.
 
-INHERIT: mkdocs-common.yml
+INHERIT: !ENV [MKDOCS_INHERIT, mkdocs-common.yml]
 docs_dir: "../i18n/zh-Hant"
 site_url: "https://www.privacyguides.org/zh-Hant/"
 site_dir: "../site/zh-Hant"

theme/assets/stylesheets/extra.css

@@ -484,7 +484,7 @@ path[d="M20.71 7.04c.39-.39.39-1.04 0-1.41l-2.34-2.34c-.37-.39-1.02-.39-1.41 0l-
 }
 
 /* Cover images */
-.center-cropped {
+.cover.center-cropped {
     width: 100%;
     height: 200px;
     background-position: center center;
@@ -497,19 +497,15 @@ path[d="M20.71 7.04c.39-.39.39-1.04 0-1.41l-2.34-2.34c-.37-.39-1.02-.39-1.41 0l-
 }
 
 /* Set the image to fill its parent and make transparent */
-.center-cropped img {
-    min-height: 100%;
-    min-width: 100%;
-    opacity: 0;
+.cover.center-cropped img {
+    height: 100%;
+    width: 100%;
+    object-fit: cover;
 }
 
-.center-cropped h1 {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    color: white;
-    z-index: 1;
+.cover ~ h1 {
+    margin: 1.25em 0 0;
+    text-align: center;
 }
 
 /* Social share button */

theme/partials/content.html

@@ -22,10 +22,10 @@
 -->
 
 {% if page and page.meta and page.meta.cover %}
-  <div class="center-cropped" style="background-image:linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('/en/assets/img/cover/{{ page.meta.cover }}');">
+  <div class="cover center-cropped">
       <img src="/en/assets/img/cover/{{ page.meta.cover }}" alt="">
   </div>
-  <h1 style="margin-top: 50px; text-align: center">{{ page.title | d(config.site_name, true)}}</h1>
+  <h1>{{ page.title | d(config.site_name, true)}}</h1>
 {% endif %}
 
 <!-- Tags -->