From 42d51c3e6597d574c0dc22b1658096b5e9ff2c92 Mon Sep 17 00:00:00 2001 From: Simon C Date: Tue, 1 Feb 2022 12:12:58 +0100 Subject: [PATCH 01/36] fix: Update style and resize image --- assets/styles/main.sass | 6 ++++++ config/_default/config.yml | 1 + themes/hugo-theme-lowtech | 2 +- 3 files changed, 8 insertions(+), 1 deletion(-) diff --git a/assets/styles/main.sass b/assets/styles/main.sass index a7ae72e..a738f97 100644 --- a/assets/styles/main.sass +++ b/assets/styles/main.sass @@ -33,6 +33,12 @@ body --tile: 1rem font-size: .9rem +img + max-width: 100% + @media screen and (max-width: $size-small) + max-width: calc(100% + 1rem) + margin-left: -.5rem + hr border: 0 border-bottom: var(--border-size) var(--border-style) var(--color-highlight) diff --git a/config/_default/config.yml b/config/_default/config.yml index bd2860d..716f94a 100644 --- a/config/_default/config.yml +++ b/config/_default/config.yml @@ -16,6 +16,7 @@ permalinks: params: FaviconFile: logo.svg + ImageSize: 800x minify: tdewolff: diff --git a/themes/hugo-theme-lowtech b/themes/hugo-theme-lowtech index 2b026a0..ae3473d 160000 --- a/themes/hugo-theme-lowtech +++ b/themes/hugo-theme-lowtech @@ -1 +1 @@ -Subproject commit 2b026a00ab899b33187b043a36e569973a3adb49 +Subproject commit ae3473dcea1a4bf11ccb887f1209324267f7c028 -- 2.40.1 From 6c9efab92bcb5743ea7c221da51ec18d87ff9fd3 Mon Sep 17 00:00:00 2001 From: Simon C Date: Tue, 1 Feb 2022 11:10:24 +0100 Subject: [PATCH 02/36] feat: Add auto build website with Drone --- .drone.yml | 117 +++++++++++++++++++++++++++++++++++++ docker-compose.prod.yml | 2 + docker-compose.staging.yml | 2 + 3 files changed, 121 insertions(+) create mode 100644 .drone.yml diff --git a/.drone.yml b/.drone.yml new file mode 100644 index 0000000..8130050 --- /dev/null +++ b/.drone.yml @@ -0,0 +1,117 @@ +--- + # drone encrypt resilien/resilien.fr $REGISTRY_PASSWORD +kind: secret +name: REGISTRY_PASSWORD +data: dYAxgJzu+Ic48OIWSFSy1fIG/Z9UUb7ErEyN+3KyI3DaVl1HKWIjdhd6HQZNcgjyKqxZh+smR7CeklVTO2cJhAfQfXIu8ENfGW1QEiFM + +--- +# drone encrypt resilien/resilien.fr $REGISTRY_USER +kind: secret +name: REGISTRY_USER +data: Y/LGloHcxShJGmqXaGvFJYLSCDbG7wWZap8oywddPdJfcw== + +--- +# drone encrypt resilien/resilien.fr "{\"auths\":{\"https://registry.weko.io\":{\"auth\":\"$(echo -n "$REGISTRY_USER:$REGISTRY_PASSWORD" | base64)\",\"email\":\"$REGISTRY_USER\"}}}" +kind: secret +name: REGISTRY_CONFIG +data: ICKt0HnBLKDrCNUH1xJnOKCwOMn/R+xMqtO8AxQ8ZorJO/J1O3hUFx3gYH6uKe3y3qa73zGPjSHnTGFv43eGBS0K8L0qQtXdLqIKTOQiIMK9CENN+w8uULCKSls01XHv7zY0bGR5FjmniXCLNYHiWHnJOi8xbAkDorhy6GwhBBpsumsZ6uzA5I0NfHTs+gplvQh6H+6Dmh03ygx39pMfE+P1F2D5VS9OiieS + +--- +kind: pipeline +type: docker +name: prod + +platform: + os: linux + arch: arm64 + +steps: +- name: install submodule + image: drone/git + commands: + - git submodule update --init + +- name: install npm + image: node:current-alpine + commands: + - (cd themes/hugo-theme-lowtech && npm i) + +- name: build website + image: jakejarvis/hugo-extended + commands: + - hugo --minify --environment production + +- name: typo + image: node:current-alpine + commands: + - node themes/hugo-theme-lowtech/scripts/typo + +- name: build and push docker image on registry + image: plugins/docker + settings: + username: + from_secret: REGISTRY_USER + password: + from_secret: REGISTRY_PASSWORD + repo: registry.weko.io/resilien_fr + registry: registry.weko.io + tags: + - latest + +image_pull_secrets: +- REGISTRY_CONFIG + +trigger: + event: + - push + branch: + - main + +--- +kind: pipeline +type: docker +name: staging + +platform: + os: linux + arch: arm64 + +steps: +- name: install submodule + image: drone/git + commands: + - git submodule update --init + +- name: install npm + image: node:current-alpine + commands: + - (cd themes/hugo-theme-lowtech && npm i) + +- name: build website + image: jakejarvis/hugo-extended + commands: + - hugo --minify --buildDrafts --buildFuture --environment staging + +- name: typo + image: node:current-alpine + commands: + - node themes/hugo-theme-lowtech/scripts/typo + +- name: push docker image on registry + image: plugins/docker + settings: + username: + from_secret: REGISTRY_USER + password: + from_secret: REGISTRY_PASSWORD + repo: registry.weko.io/resilien_fr + registry: registry.weko.io + tags: + - staging + +image_pull_secrets: +- REGISTRY_CONFIG + +trigger: + event: + - push diff --git a/docker-compose.prod.yml b/docker-compose.prod.yml index 463e8c7..56ed7bf 100644 --- a/docker-compose.prod.yml +++ b/docker-compose.prod.yml @@ -10,11 +10,13 @@ services: resilien-prod: container_name: resilien-prod build: . + image: registry.weko.io/resilien_fr:prod restart: always labels: traefik.enable: "true" traefik.http.routers.resilien.rule: "Host(`${URL}`)" traefik.http.routers.resilien.entrypoints: "web" + com.centurylinklabs.watchtower.enable: true volumes: - resilien-log:/var/log/nginx - resilien-stats:/usr/share/nginx/html/stats diff --git a/docker-compose.staging.yml b/docker-compose.staging.yml index 507754a..d52a9a2 100644 --- a/docker-compose.staging.yml +++ b/docker-compose.staging.yml @@ -8,11 +8,13 @@ services: resilien-staging: container_name: resilien-staging build: . + image: registry.weko.io/resilien_fr:staging restart: always labels: traefik.enable: "true" traefik.http.routers.resilien-staging.rule: "Host(`staging.${URL}`)" traefik.http.routers.resilien-staging.entrypoints: "web" + com.centurylinklabs.watchtower.enable: true volumes: - /etc/timezone:/etc/timezone:ro - /etc/localtime:/etc/localtime:ro -- 2.40.1 From 7879d8559e901ab03d8ac23cee3eb8a9af8a9727 Mon Sep 17 00:00:00 2001 From: Simon C Date: Thu, 3 Feb 2022 11:14:03 +0100 Subject: [PATCH 03/36] feat(Drone): Add npm folder cache --- .drone.yml | 22 ++++++++++++++++++++++ 1 file changed, 22 insertions(+) diff --git a/.drone.yml b/.drone.yml index 8130050..05eab5f 100644 --- a/.drone.yml +++ b/.drone.yml @@ -33,6 +33,9 @@ steps: - name: install npm image: node:current-alpine + volumes: + - name: hugo-theme-lowtech_node_modules + path: /drone/src/themes/hugo-theme-lowtech/node_modules commands: - (cd themes/hugo-theme-lowtech && npm i) @@ -43,6 +46,9 @@ steps: - name: typo image: node:current-alpine + volumes: + - name: hugo-theme-lowtech_node_modules + path: /drone/src/themes/hugo-theme-lowtech/node_modules commands: - node themes/hugo-theme-lowtech/scripts/typo @@ -67,6 +73,11 @@ trigger: branch: - main +volumes: +- name: hugo-theme-lowtech_node_modules + host: + path: /tmp/drone/cache/resilien/resilien_fr/themes/hugo-theme-lowtech + --- kind: pipeline type: docker @@ -84,6 +95,9 @@ steps: - name: install npm image: node:current-alpine + volumes: + - name: hugo-theme-lowtech_node_modules + path: /drone/src/themes/hugo-theme-lowtech/node_modules commands: - (cd themes/hugo-theme-lowtech && npm i) @@ -94,6 +108,9 @@ steps: - name: typo image: node:current-alpine + volumes: + - name: hugo-theme-lowtech_node_modules + path: /drone/src/themes/hugo-theme-lowtech/node_modules commands: - node themes/hugo-theme-lowtech/scripts/typo @@ -115,3 +132,8 @@ image_pull_secrets: trigger: event: - push + +volumes: +- name: hugo-theme-lowtech_node_modules + host: + path: /tmp/drone/cache/resilien/resilien_fr/themes/hugo-theme-lowtech -- 2.40.1 From a2ce87050ef1c80f1ca7ceb8796790646e29eef5 Mon Sep 17 00:00:00 2001 From: Simon C Date: Fri, 4 Feb 2022 15:59:24 +0100 Subject: [PATCH 04/36] feat: Add theme variables --- assets/styles/main.sass | 112 ++++++++++++++++++++++++++++++++++++---- content/_index.md | 2 +- 2 files changed, 104 insertions(+), 10 deletions(-) diff --git a/assets/styles/main.sass b/assets/styles/main.sass index a738f97..c76181f 100644 --- a/assets/styles/main.sass +++ b/assets/styles/main.sass @@ -8,11 +8,109 @@ html p, li line-height: 1.4 -body - --color-background: #fff8eb - --color-paragraph: #2d3824 - --color-highlight: #c14508 +// COLOR +$color-darkest: #001e1d +$color-darken: #0f3433 +$color-dark: #004643 +$color-main: #abd1c6 +$color-light: #e8e4e6 +$color-lightest: #fffffe +$color-secondary: #f9bc60 +$color-tertiary: #e16162 + +@mixin theme + // https://www.happyhues.co/palettes/10 + --color-stroke: #{$color-darkest} + --color-main: #{$color-light} + --color-highlight: #{$color-secondary} + --color-secondary: #{$color-main} + --color-tertiary: #{$color-tertiary} + + --color-background: #{$color-dark} + --color-headline: #{$color-lightest} + --color-paragraph: var(--color-secondary) + --color-link: var(--color-highlight) + --color-button: var(--color-highlight) + --color-button-text: var(--color-stroke) + + --color-card-background: var(--color-main) + --color-card-headline: var(--color-stroke) + --color-card-paragraph: #{$color-darken} + --color-card-link: var(--color-background) + --color-card-button: var(--color-background) + --color-card-button-text: var(--color-headline) + + + --color-secondary-background: var(--color-secondary) + --color-secondary-headline: var(--color-darkest) + --color-secondary-paragraph: #{$color-darken} + + --color-secondary-link: var(--color-highlight) + --color-secondary-button: var(--color-highlight) + --color-secondary-button-text: var(--color-stroke) + + --color-secondary-card-background: var(--color-background) + --color-secondary-card-headline: var(--color-headline) + --color-secondary-card-paragraph: var(--color-paragraph) + --color-secondary-card-link: var(--color-link) + --color-secondary-card-button: var(--color-button) + --color-secondary-card-button-text: var(--color-button-text) + +@mixin theme-primary + color: var(--color-paragraph) + background: var(--color-background) + h1, h2, h3, h4, h5, h6 + color: var(--color-headline) + button, .button + background: var(--color-button) + color: var(--color-button-text) + a + color: var(--color-link) + .card, .cards > * + color: var(--color-card-paragraph) + background: var(--color-card-background) + h1, h2, h3, h4, h5, h6 + color: var(--color-card-headline) + button, .button + background: var(--color-card-button) + color: var(--color-card-button-text) + a + color: var(--color-card-link) + +@mixin theme-secondary + color: var(--color-secondary-paragraph) + background: var(--color-secondary-background) + h1, h2, h3, h4, h5, h6 + color: var(--color-secondary-headline) + button, .button + background: var(--color-secondary-button) + color: var(--color-secondary-button-text) + a + color: var(--color-secondary-link) + .card + color: var(--color-secondary-card-paragraph) + background: var(--color-secondary-card-background) + h1, h2, h3, h4, h5, h6 + color: var(--color-secondary-card-headline) + button, .button + background: var(--color-secondary-card-button) + color: var(--color-secondary-card-button-text) + a + color: var(--color-secondary-card-link) + +body + @include theme + @include theme-primary + +.theme-secondary + @include theme-secondary + +.card, .cards > * + padding: 1rem + margin: 1rem + +body --border-style: dashed --border-size: 4px --link-style: dotted @@ -21,8 +119,7 @@ body font-size: 1.125rem font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol" - color: var(--color-paragraph) - background: var(--color-background) + margin: 0 auto padding: 0 var(--tile) max-width: 800px @@ -70,9 +167,6 @@ ul.no-style padding: 0 line-height: $line-height -a, h1, h2, h3 - color: var(--color-highlight) - a text-decoration: underline var(--link-style) &:hover diff --git a/content/_index.md b/content/_index.md index 9313562..5a40b84 100644 --- a/content/_index.md +++ b/content/_index.md @@ -31,7 +31,7 @@ RésiLien est géré par un **collectif** d'entreprises de l'**Économie Sociale - ![Éco-conception de site internet](/icons/website.svg) #### Site web statique Avec le logiciel libre Hugo, l'équipe de RésiLien peut concevoir un site web selon votre demande et l'héberger sur son infrastructure. -{ .flex .services } +{ .flex .services .cards } ### Comment bénéficier des services de RésiLien ? {.center .frame} -- 2.40.1 From 12c1d8ffc6a4a798ed59c32da428e7dcefb3d217 Mon Sep 17 00:00:00 2001 From: Simon C Date: Fri, 4 Feb 2022 18:14:17 +0100 Subject: [PATCH 05/36] feat: Adapt layout to the theme --- assets/styles/main.sass | 36 +- content/_index.md | 23 +- layouts/partials/footer.html | 2 +- layouts/partials/header.html | 630 ++++++++++++++++++++++++++++++++++- static/logo.svg | 313 ++++++++++++++++- 5 files changed, 989 insertions(+), 15 deletions(-) diff --git a/assets/styles/main.sass b/assets/styles/main.sass index c76181f..c1e3f2a 100644 --- a/assets/styles/main.sass +++ b/assets/styles/main.sass @@ -17,7 +17,7 @@ $color-main: #abd1c6 $color-light: #e8e4e6 $color-lightest: #fffffe $color-secondary: #f9bc60 -$color-tertiary: #e16162 +$color-tertiary: #A91804 @mixin theme // https://www.happyhues.co/palettes/10 @@ -43,10 +43,10 @@ $color-tertiary: #e16162 --color-secondary-background: var(--color-secondary) - --color-secondary-headline: var(--color-darkest) + --color-secondary-headline: var(--color-stroke) --color-secondary-paragraph: #{$color-darken} - --color-secondary-link: var(--color-highlight) + --color-secondary-link: var(--color-tertiary) --color-secondary-button: var(--color-highlight) --color-secondary-button-text: var(--color-stroke) @@ -78,6 +78,15 @@ $color-tertiary: #e16162 a color: var(--color-card-link) + .quote + color: var(--color-paragraph) + + h1, h2, h3, h4, h5, h6 + color: var(--color-paragraph) + + strong + color: var(--color-link) + @mixin theme-secondary color: var(--color-secondary-paragraph) background: var(--color-secondary-background) @@ -88,7 +97,7 @@ $color-tertiary: #e16162 color: var(--color-secondary-button-text) a color: var(--color-secondary-link) - .card + .card, .cards > * color: var(--color-secondary-card-paragraph) background: var(--color-secondary-card-background) h1, h2, h3, h4, h5, h6 @@ -99,6 +108,13 @@ $color-tertiary: #e16162 a color: var(--color-secondary-card-link) +svg + height: 120px + .st0 + fill: var(--color-paragraph) + .st1 + fill: var(--color-link) + body @include theme @include theme-primary @@ -120,9 +136,8 @@ body font-size: 1.125rem font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol" - margin: 0 auto - padding: 0 var(--tile) - max-width: 800px + margin: 0 + padding: 0 overflow-y: scroll @media screen and (max-width: $size-small) @@ -130,6 +145,11 @@ body --tile: 1rem font-size: .9rem +.content + max-width: 800px + padding: var(--tile) + margin: 0 auto + img max-width: 100% @media screen and (max-width: $size-small) @@ -230,11 +250,9 @@ h3 text-align: center h2 - color: var(--color-paragraph) margin: 0 strong - color: var(--color-highlight) font-size: 130% .blogDate diff --git a/content/_index.md b/content/_index.md index 5a40b84..4ffeee2 100644 --- a/content/_index.md +++ b/content/_index.md @@ -3,7 +3,10 @@ title: RésiLien, Hébergeur de services numériques Open Source description: RésiLien est un hébergeur de services numériques localisé en France dont l'infrastructure est décentralisée. --- -> ## **Accompagner**
les organisations
qui ont une **conscience sociétale**
vers la réappropriation de
leurs **outils numériques**. +
+
+ + > ## **Accompagner**
les organisations
qui ont une **conscience sociétale**
vers la réappropriation de
leurs **outils numériques**. {.quote} **RésiLien** est un hébergeur de services numériques localisé en France 🇫🇷 dont l'infrastructure est décentralisée. Nous respectons [la charte](https://www.chatons.org/charte) du [Collectif des Hébergeurs Alternatifs, Transparents, Ouverts, Neutres et Solidaires](https://chatons.org/) et sommes membres du collectif depuis [décembre 2021](https://www.chatons.org/chatons/resilien). @@ -16,6 +19,11 @@ Si vous avez une connexion Internet suffisante, hébergez dans votre local votre RésiLien est géré par un **collectif** d'entreprises de l'**Économie Sociale et Solidaire**. Aujourd'hui, ce collectif est composé de **[Weko](https://weko.io)** et de **[Libenume](https://libenume.fr)**. +
+
+
+
+ ### Quels services propose RésiLien ? {.center .frame} @@ -33,6 +41,11 @@ RésiLien est géré par un **collectif** d'entreprises de l'**Économie Sociale Avec le logiciel libre Hugo, l'équipe de RésiLien peut concevoir un site web selon votre demande et l'héberger sur son infrastructure. { .flex .services .cards } +
+
+
+
+ ### Comment bénéficier des services de RésiLien ? {.center .frame} @@ -48,6 +61,11 @@ Pour tous les services hébergés par RésiLien, ce sera l'entreprise Weko (dép Ayant à cœur d'avoir une **relation de proximité**, nous vous conseillons de contacter l'entreprise la plus proche. Celle-ci vous enverra une proposition commerciale en fonction de vos besoins. Chaque prestation inclut une **période d'accompagnement pour l'utilisation des services**. +
+
+
+
+ ### Blog {.center .frame} @@ -56,3 +74,6 @@ Voici nos derniers articles de blog : {{< blog-article-last >}} [Voir tous les articles](/blog/) + +
+
diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html index 80db7c9..3ce865c 100644 --- a/layouts/partials/footer.html +++ b/layouts/partials/footer.html @@ -1,5 +1,5 @@
- -{{ if eq hugo.Environment "production" }} - +{{ if or (eq hugo.Environment "production") (eq hugo.Environment "staging") }} + + {{ end }} diff --git a/layouts/partials/header.html b/layouts/partials/header.html index ce65e06..00ccd2b 100644 --- a/layouts/partials/header.html +++ b/layouts/partials/header.html @@ -8,7 +8,7 @@ {{ printf "" $tag | safeHTML }}