✨ Add examples, add iframes to /users

ortfo · Apr 17, 2024 · c34e700 · c34e700
1 parent e52ffc1
commit c34e700
Show file tree

Hide file tree

Showing 21 changed files with 28,039 additions and 11 deletions.
diff --git a/.vitepress/config.mts b/.vitepress/config.mts
@@ -227,7 +227,7 @@ export default defineConfig({
           items: [
             { text: "What is ortfo?", link: "/guide/what-is-ortfo" },
             { text: "Quick start", link: "/guide/getting-started" },
-            { text: "Who's using ortfo?", link: "/guide/users" },
+            { text: "Who's using ortfo?", link: "/users" },
           ],
         },
         {

diff --git a/.vitepress/theme/custom.css b/.vitepress/theme/custom.css
@@ -17,9 +17,21 @@ h1, h2, h3, h4, h5, h6, :is(h1, h2, h3, h4, h5, h6) * {
 	font-family: 'IBM Plex Sans' !important;
 } */
 
-video, img:not([src^="https://img.shields.io"]), table {
+video, img:not([src^="https://img.shields.io"]), table, iframe, .iframe-container {
 	border-radius: 8px;
 }
+
+iframe {
+	border: none;
+	background: var(--vp-c-gray-soft);
+}
+
+.iframe-container {
+	height: 100%;
+	width: 100%;
+	padding: 1rem;
+	background: var(--vp-c-gray-soft);
+}
 /*
 .vp-doc td {
 	border: 3px solid var(--vp-c-brand-1);
@@ -44,3 +56,27 @@ dd {
 	margin-top: 0.25em;
 	margin-left: 2.5em;
 }
+
+figure {
+	margin: 0;
+	display: flex;
+	flex-direction: column;
+	gap: 1.5rem;
+	align-items: center;
+	text-align: center;
+}
+
+figure figcaption {
+	opacity: 0.75;
+}
+
+.side-by-side {
+	display: flex;
+	gap: 1em;
+	flex-wrap: wrap;
+}
+
+.side-by-side figure {
+	flex: 1;
+	min-width: 200px;
+}
diff --git a/db/colors.md b/db/colors.md
@@ -2,6 +2,13 @@
 
 ortfo/db supports extracting the most proeminent colors from the works' images. This can be useful to give a 🎀 colorful touch 🎀 to your website
 
+## Usage example
+
+<figure>
+  <video src="/examples/color-extraction.mp4" autoplay muted loop></video>
+  <figcaption>On <a href="https://ewen.works">ewen.works</a></figcaption>
+</figure>
+
 ## Configuration
 
 Enable it in [`ortfodb.yaml`](/db/configuration.md):

diff --git a/db/exporters/introduction.md b/db/exporters/introduction.md
@@ -7,6 +7,34 @@ next:
 
 ortfo/db includes a plugin-like system that allows you to run shell commands at various stages of the build process.
 
+## Usage example
+
+Running a build with the [copy](/db/exporters/misc.md#copy), [ssh](/db/exporters/uploading.md#ssh) and [cloud](/db/exporters/uploading.md#cloud) exporters enabled
+
+
+```ansi{11-99}
+[1m[2m$[0m ortfodb build[0m
+[1m[35m          Using[0m[0m exporter [1mcopy:[0m [2mcopy the output database file to one or more locations[0m
+[1m[35m          Using[0m[0m exporter [1mssh:[0m [2mupload the database to an SSH server using scp or rsync.[0m
+[1m[35m          Using[0m[0m exporter [1mcloud:[0m [2mexport the database to a cloud storage service using rclone.[0m
+[1m[2m        Reusing[0m smooth-cursorify[0m
+[1m[2m        Reusing[0m spotify-playlist-covers[0m
+[1m[2m        Reusing[0m subfeed-for-spotify[0m
+[1m[2m        Reusing[0m trigonometry-synth[0m
+[1m[2m        Reusing[0m 雨と雪[0m
+[1m[32m       Finished[0m[0m compiling to database.json in 0s
+[1m[36m        Copying[0m[0m database to [1m~/projects/database.json, ~/projects/ortfo/website/public/example-database.json[0m[0m
+[1m[34m      Uploading[0m[0m database.json to [[email protected]:~/www/media.ewen.works/works.json [2musing rsync  [0m[0m
+[1m[34m              >[0m[0m 1.181.355 100%  187,11MB/s    0:00:00 (xfr#1, to-chk=0/1)
+[1m[34m      Uploading[0m[0m database.json to googledrive:projects/database.json, [2mwith rclone[0m
+[1m[34m              >[0m[0m Transferring:
+[1m[34m              >[0m[0m  *  database.json:100% /1.127Mi, 1.126Mi/s, 0s
+[1m[34m              >[0m[0m Transferred:            1 / 1, 100%
+[1m[34m              >[0m[0m Elapsed time:         3.0s
+```
+
+
+
 ## Usage
 
 To enable and configure exporters, add an `exporters` field to your `ortfodb.yaml` configuration file:

diff --git a/db/features.md b/db/features.md
@@ -25,7 +25,7 @@ features:
     icon: 🛠️
   - icon: 🗃️
     title: Scattered mode
-    details: Put your portfolio's articles alongside your projects themselves
+    details: Store your portfolio's articles alongside the projects themselves
     link: /db/scattered-mode
   - title: Thumbnail generation
     details: Automatically generate thumbnails for your projects' media files
@@ -44,6 +44,7 @@ features:
     icon: 🌐
   - title: Client libraries
     details: Use the generated database in your code with autocompletion and type safety
+    link: /db/client-libraries
     icon: 📚
   - title: Exporters
     details: Send your database file to a web server, a cloud storage service, or use it in your favorite static site generator

diff --git a/db/internationalization.md b/db/internationalization.md
@@ -2,6 +2,20 @@
 
 To share your works with the world, and with your future job, you might want to translate your works' descriptions to multiple languages. ortfo/db has _first-class_ support for this by allowing you to define your works' descriptions in multiple languages.
 
+## Usage example
+
+<div class="side-by-side">
+  <figure>
+    <img src="/examples/internationalization-en.png"></img>
+    <figcaption>A work in English <a href="https://en.ewen.works/spotify-playlist-covers">on en.ewen.works</a></figcaption>
+  </figure>
+
+  <figure>
+    <img src="/examples/internationalization-fr.png"></img>
+    <figcaption>The same work in French <a href="https://fr.ewen.works/spotify-playlist-covers">at fr.ewen.works</a></figcaption>
+  </figure>
+</div>
+
 ## Language markers
 
 Simply add a _language marker_ in your description file on its own line. Everything that you write after this marker, and before the next marker, is considered to be written in that language.
@@ -33,7 +47,7 @@ Une manière simple de gérer _beaucoup_ de projets pour un site web de portfoli
 
 :: ja
 
-私の日本語は悪いですから、知らないwwww
+私の日本語は悪いですから、知らない wwww
 ```
 
 ## Untranslated content

diff --git a/db/layouts.md b/db/layouts.md
@@ -2,6 +2,14 @@
 
 ortfo/db allows you to declare that some [content blocks](/db/your-first-description-file.md#blocks) are arranged in a more interesting way than just one after the other.
 
+## Usage example
+
+<figure>
+  <img src="/examples/complex-layouts.png" autoplay muted loop></img>
+  <figcaption><a href="https://ewen.works/subfeed-for-spotify">On ewen.works</a></figcaption>
+</figure>
+
+
 ## Declaring layouts
 
 Layouts are declared in the metadata frontmatter of your description file:

diff --git a/db/tags.md b/db/tags.md
@@ -6,6 +6,14 @@
 
 Tags are a way to categorize your different projects.
 
+## Usage example
+
+<figure>
+  <img src="/examples/tags-index.png"></img>
+  <figcaption>Show all works tagged "command-line" <a href="https://ewen.works/command-line">on ewen.works</a></figcaption>
+</figure>
+
+
 ## Declaration
 
 You can define all valid tags for your works in a central place with a `tags.yaml` file.

diff --git a/db/technologies.md b/db/technologies.md
@@ -1,10 +1,25 @@
 <script setup>
   import schema from '/schemas/latest/technologies.schema.json';
 </script>
+
 # Technologies
 
 ortfo/db has a concept of _technologies_. This allows you to specify with what tools the work was made. Note that the term is intended to be very broad-reaching: if you are describing a painting, for example, “oil paint” and “canvas” would be considered technologies. If you are describing a website, “HTML” and “CSS” would be considered technologies.
 
+## Usage example
+
+<div class="side-by-side">
+  <figure>
+    <img src="/examples/technologies.png"></img>
+    <figcaption>Showing technologies used to make a work <a href="https://ewen.works/distilatex">on ewen.works</a></figcaption>
+  </figure>
+
+  <figure>
+    <img src="/examples/technologies-index.png"></img>
+    <figcaption>Showing all works made with Photoshop at <a href="https://ewen.works/using/photoshop">ewen.works/using/photoshop</a></figcaption>
+  </figure>
+</div>
+
 ## Declaration
 
 You can define all valid technologies for your works in a central place with a `technologies.yaml` file.
@@ -53,10 +68,8 @@ See [Declaring JSON Schemas on files](/db/json-schemas.md#on-files-directly)
 
 ### Properties
 
-
 <JSONSchema :schema :headings="4" type="Technology" />
 
-
 ## Usage
 
 In your work's description file, refer to technologies names by their `slug`, `name` or any of the `aliases`:

diff --git a/guide/users.md b/guide/users.md
diff --git a/index.md b/index.md
@@ -6,13 +6,19 @@ hero:
   name: "ortfo:"
   text: A portfolio website creation system that <em>scales</em>
   tagline: Keeping a portfolio website up to date, with 100+ projects? Never been that easy.
+  image:
+    src: /logo.png
+    alt: A demo of ortfo/db's features
   actions:
     - theme: brand
       text: What is ortfo?
       link: /guide/what-is-ortfo
     - theme: alt
       text: Getting Started
       link: /guide/getting-started
+    - theme: alt
+      text: See it in action
+      link: /users
 
 features:
   - icon: 📦