Skip to content

Commit d3b1e9d

Browse files
bhdicairebhdicaire
committed
docs: feature felix page carousel
1 parent d895be9 commit d3b1e9d

2 files changed

Lines changed: 32 additions & 36 deletions

File tree

‎content/blog/felix-leger-custom-theme.en.md‎

Lines changed: 16 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,22 @@ The regular vanityURLs look is intentionally easy to ship. You configure the dom
1111

1212
For `f-l.ca`, I wanted something else. I wanted the short-link domain to feel like a small personal surface, not only a redirect utility. That is harder, because a custom theme means owning the public HTML, CSS, JavaScript, localized pages, icons, and all the little states that people only notice when they break. But it also makes the domain feel unmistakably mine.
1313

14-
![f-l.ca homepage with a minimal cream background, large monospace domain prefix, and a small yellow mark in the lower-left corner](/blog/felix-flca-home.png)
14+
Here is the set of customized web and status pages I tested on `a6z.link` before sending the theme to `f-l.ca`. The host in the screenshots is the test instance; the same custom files read the current host at runtime.
15+
16+
{{< carousel label="Félix custom page screenshots" >}}
17+
/blog/felix-en-home.png|English home page using the custom redirect shell|English home page
18+
/blog/felix-en-lookup.png|English lookup page using the same custom shell|English lookup page
19+
/blog/felix-en-not-found.png|English 404 page using the home-style fallback shell|English 404 fallback
20+
/blog/felix-en-expired.png|English expired-link status page using the custom shell|English expired status
21+
/blog/felix-en-disabled.png|English disabled-link status page using the custom shell|English disabled status
22+
/blog/felix-en-maintenance.png|English maintenance status page using the custom shell|English maintenance status
23+
/blog/felix-fr-home.png|French home page using the custom redirect shell|French home page
24+
/blog/felix-fr-lookup.png|French lookup page using the same custom shell|French lookup page
25+
/blog/felix-fr-not-found.png|French 404 page using the home-style fallback shell|French 404 fallback
26+
/blog/felix-fr-expired.png|French expired-link status page using the custom shell|French expired status
27+
/blog/felix-fr-disabled.png|French disabled-link status page using the custom shell|French disabled status
28+
/blog/felix-fr-maintenance.png|French maintenance status page using the custom shell|French maintenance status
29+
{{< /carousel >}}
1530

1631
## The URL Is The Interface
1732

@@ -43,23 +58,6 @@ The default vanityURLs pages absorb most of that maintenance for you. A custom t
4358

4459
![f-l.ca trust and safety page using the same cream background, bold wordmark, and custom typography as the redirect surface](/blog/felix-flca-trust.png)
4560

46-
Here is the set of customized web and status pages I tested on `a6z.link` before sending the theme to `f-l.ca`. The host in the screenshots is the test instance; the same custom files read the current host at runtime.
47-
48-
{{< carousel label="Félix custom page screenshots" >}}
49-
/blog/felix-en-home.png|English home page using the custom redirect shell|English home page
50-
/blog/felix-en-lookup.png|English lookup page using the same custom shell|English lookup page
51-
/blog/felix-en-not-found.png|English 404 page using the home-style fallback shell|English 404 fallback
52-
/blog/felix-en-expired.png|English expired-link status page using the custom shell|English expired status
53-
/blog/felix-en-disabled.png|English disabled-link status page using the custom shell|English disabled status
54-
/blog/felix-en-maintenance.png|English maintenance status page using the custom shell|English maintenance status
55-
/blog/felix-fr-home.png|French home page using the custom redirect shell|French home page
56-
/blog/felix-fr-lookup.png|French lookup page using the same custom shell|French lookup page
57-
/blog/felix-fr-not-found.png|French 404 page using the home-style fallback shell|French 404 fallback
58-
/blog/felix-fr-expired.png|French expired-link status page using the custom shell|French expired status
59-
/blog/felix-fr-disabled.png|French disabled-link status page using the custom shell|French disabled status
60-
/blog/felix-fr-maintenance.png|French maintenance status page using the custom shell|French maintenance status
61-
{{< /carousel >}}
62-
6361
## Keep Product Names Out Of Custom Files
6462

6563
One line I would not cross is file naming. My custom pages use names like `flstyle.css` and `script.js`, because those are mine. I would not create custom files named like the product-managed assets in `defaults/public`, especially the `v8s-*` CSS and JavaScript files such as `v8s-style.css`, `v8s-script.js`, `v8s-status.css`, `v8s-lookup.js`, or `v8s-theme.js`.

‎content/blog/felix-leger-custom-theme.fr.md‎

Lines changed: 16 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,22 @@ L'apparence normale de vanityURLs est volontairement facile à publier. On confi
1111

1212
Pour `f-l.ca`, je voulais autre chose. Je voulais que le domaine de liens courts ressemble à une petite surface personnelle, pas seulement à un outil de redirection. C'est plus difficile, parce qu'un thème personnalisé veut dire posséder le HTML public, le CSS, le JavaScript, les pages localisées, les icônes et tous les petits états que les gens remarquent seulement quand ils cassent. Mais cela rend aussi le domaine immédiatement reconnaissable.
1313

14-
![Page d'accueil f-l.ca avec fond crème minimal, grand préfixe de domaine monospace et petite marque jaune en bas à gauche](/blog/felix-flca-home.png)
14+
Voici l'ensemble des pages web et d'état personnalisées que j'ai testées sur `a6z.link` avant d'envoyer le thème vers `f-l.ca`. Le domaine dans les captures est l'instance de test; les mêmes fichiers personnalisés lisent le domaine courant au runtime.
15+
16+
{{< carousel label="Captures des pages personnalisées de Félix" >}}
17+
/blog/felix-en-home.png|Page d'accueil anglaise avec la surface de redirection personnalisée|Accueil anglais
18+
/blog/felix-en-lookup.png|Page de consultation anglaise avec la même surface personnalisée|Consultation anglaise
19+
/blog/felix-en-not-found.png|Page 404 anglaise avec le fallback de style accueil|Fallback 404 anglais
20+
/blog/felix-en-expired.png|Page anglaise de lien expiré avec la surface personnalisée|État expiré anglais
21+
/blog/felix-en-disabled.png|Page anglaise de lien désactivé avec la surface personnalisée|État désactivé anglais
22+
/blog/felix-en-maintenance.png|Page anglaise de maintenance avec la surface personnalisée|État maintenance anglais
23+
/blog/felix-fr-home.png|Page d'accueil française avec la surface de redirection personnalisée|Accueil français
24+
/blog/felix-fr-lookup.png|Page de consultation française avec la même surface personnalisée|Consultation française
25+
/blog/felix-fr-not-found.png|Page 404 française avec le fallback de style accueil|Fallback 404 français
26+
/blog/felix-fr-expired.png|Page française de lien expiré avec la surface personnalisée|État expiré français
27+
/blog/felix-fr-disabled.png|Page française de lien désactivé avec la surface personnalisée|État désactivé français
28+
/blog/felix-fr-maintenance.png|Page française de maintenance avec la surface personnalisée|État maintenance français
29+
{{< /carousel >}}
1530

1631
## L'URL Est L'Interface
1732

@@ -43,23 +58,6 @@ Les pages par défaut de vanityURLs absorbent la majorité de cette maintenance
4358

4459
![Page confiance et sécurité de f-l.ca avec le même fond crème, le même wordmark fort et la même typographie personnalisée que la surface de redirection](/blog/felix-flca-trust.png)
4560

46-
Voici l'ensemble des pages web et d'état personnalisées que j'ai testées sur `a6z.link` avant d'envoyer le thème vers `f-l.ca`. Le domaine dans les captures est l'instance de test; les mêmes fichiers personnalisés lisent le domaine courant au runtime.
47-
48-
{{< carousel label="Captures des pages personnalisées de Félix" >}}
49-
/blog/felix-en-home.png|Page d'accueil anglaise avec la surface de redirection personnalisée|Accueil anglais
50-
/blog/felix-en-lookup.png|Page de consultation anglaise avec la même surface personnalisée|Consultation anglaise
51-
/blog/felix-en-not-found.png|Page 404 anglaise avec le fallback de style accueil|Fallback 404 anglais
52-
/blog/felix-en-expired.png|Page anglaise de lien expiré avec la surface personnalisée|État expiré anglais
53-
/blog/felix-en-disabled.png|Page anglaise de lien désactivé avec la surface personnalisée|État désactivé anglais
54-
/blog/felix-en-maintenance.png|Page anglaise de maintenance avec la surface personnalisée|État maintenance anglais
55-
/blog/felix-fr-home.png|Page d'accueil française avec la surface de redirection personnalisée|Accueil français
56-
/blog/felix-fr-lookup.png|Page de consultation française avec la même surface personnalisée|Consultation française
57-
/blog/felix-fr-not-found.png|Page 404 française avec le fallback de style accueil|Fallback 404 français
58-
/blog/felix-fr-expired.png|Page française de lien expiré avec la surface personnalisée|État expiré français
59-
/blog/felix-fr-disabled.png|Page française de lien désactivé avec la surface personnalisée|État désactivé français
60-
/blog/felix-fr-maintenance.png|Page française de maintenance avec la surface personnalisée|État maintenance français
61-
{{< /carousel >}}
62-
6361
## Garder Les Noms Produit Hors Des Fichiers Custom
6462

6563
Une frontière que je ne franchirais pas concerne les noms de fichiers. Mes pages personnalisées utilisent des noms comme `flstyle.css` et `script.js`, parce qu'ils m'appartiennent. Je ne créerais pas de fichiers custom portant les mêmes noms que les assets produit dans `defaults/public`, surtout les fichiers CSS et JavaScript `v8s-*` comme `v8s-style.css`, `v8s-script.js`, `v8s-status.css`, `v8s-lookup.js` ou `v8s-theme.js`.

0 commit comments

Comments
 (0)