remanso-space/remanso
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: no more after for repos

Browse Source
This commit is contained in:
Julien Calixte
2026-04-22 23:01:40 +02:00
parent 29c22a9b0f
commit 1f272bc3e2
1 changed files with 342 additions and 279 deletions
Download Patch File Download Diff File Expand all files Collapse all files

205
src/components/WelcomeWorld.vue
View File

@@ -60,7 +60,9 @@ const today = computed(() =>
const offsetHighlighted = ref(false) const offsetHighlighted = ref(false)
const flashOffset = () => { const flashOffset = () => {
offsetHighlighted.value = true offsetHighlighted.value = true
setTimeout(() => { offsetHighlighted.value = false }, 900) setTimeout(() => {
offsetHighlighted.value = false
}, 900)
} }
const reviewRepo = computed(() => savedFavoriteRepos.value[0] ?? null) const reviewRepo = computed(() => savedFavoriteRepos.value[0] ?? null)
@@ -91,7 +93,10 @@ const showReviewCard = computed(
>Public&nbsp;notes</router-link >Public&nbsp;notes</router-link
> >
<router-link <router-link
:to="{ name: 'FluxNoteView', params: { user: 'remanso-space', repo: 'getting-started' } }" :to="{
name: 'FluxNoteView',
params: { user: 'remanso-space', repo: 'getting-started' }
}"
class="navlink" class="navlink"
>Getting&nbsp;started</router-link >Getting&nbsp;started</router-link
> >
@@ -111,7 +116,11 @@ const showReviewCard = computed(
</span> </span>
<span class="profile-name">{{ displayUsername }}</span> <span class="profile-name">{{ displayUsername }}</span>
</button> </button>
<button v-else class="hw-btn hw-btn-ghost" onclick="profile_modal.showModal()"> <button
v-else
class="hw-btn hw-btn-ghost"
onclick="profile_modal.showModal()"
>
Sign in Sign in
</button> </button>
</div> </div>
@@ -157,7 +166,9 @@ const showReviewCard = computed(
autocapitalize="off" autocapitalize="off"
/> />
</label> </label>
<button type="submit" class="hw-btn hw-btn-pink gh-go">→</button> <button type="submit" class="hw-btn hw-btn-pink gh-go">
→
</button>
</form> </form>
</div> </div>
</div> </div>
@@ -182,7 +193,7 @@ const showReviewCard = computed(
:class="{ :class="{
'size-xl': i === 0 && savedFavoriteRepos.length > 1, 'size-xl': i === 0 && savedFavoriteRepos.length > 1,
'size-lg': i > 0 || savedFavoriteRepos.length === 1, 'size-lg': i > 0 || savedFavoriteRepos.length === 1,
'featured': i === 0 && savedFavoriteRepos.length > 1 featured: i === 0 && savedFavoriteRepos.length > 1
}" }"
:style="tileStyle(`${repo.name}-${username}`)" :style="tileStyle(`${repo.name}-${username}`)"
href="#" href="#"
@@ -251,9 +262,14 @@ const showReviewCard = computed(
:key="`${repo.user}-${repo.repo}`" :key="`${repo.user}-${repo.repo}`"
> >
<router-link <router-link
:to="{ name: 'FluxNoteView', params: { user: repo.user, repo: repo.repo } }" :to="{
name: 'FluxNoteView',
params: { user: repo.user, repo: repo.repo }
}"
>
<span class="r-path mono"
>{{ repo.user }} / {{ repo.repo }}</span
> >
<span class="r-path mono">{{ repo.user }} / {{ repo.repo }}</span>
</router-link> </router-link>
</li> </li>
</ul> </ul>
@@ -307,7 +323,8 @@ const showReviewCard = computed(
<p class="lede"> <p class="lede">
Point it at any markdown — a GitHub repo of your own, or public Point it at any markdown — a GitHub repo of your own, or public
notes from the open ATProto network — and Remanso turns it into a notes from the open ATProto network — and Remanso turns it into a
calm, stackable notebook with backlinks where your thinking finally runs clear. calm, stackable notebook with backlinks where your thinking
finally runs clear.
</p> </p>
<div class="hero-ed-paths"> <div class="hero-ed-paths">
<!-- CTA 01: GitHub repo --> <!-- CTA 01: GitHub repo -->
@@ -341,7 +358,9 @@ const showReviewCard = computed(
autocapitalize="off" autocapitalize="off"
/> />
</label> </label>
<button type="submit" class="hw-btn hw-btn-pink gh-go">→</button> <button type="submit" class="hw-btn hw-btn-pink gh-go">
→
</button>
</form> </form>
</div> </div>
<!-- CTA 02: Public notes --> <!-- CTA 02: Public notes -->
@@ -351,9 +370,8 @@ const showReviewCard = computed(
<div> <div>
<div class="hep-t">From the open network</div> <div class="hep-t">From the open network</div>
<div class="hep-d"> <div class="hep-d">
Your `.pub.md` files become public. Your `.pub.md` files become public. Read public notes
Read public notes published via ATProto — no account published via ATProto — no account needed.
needed.
</div> </div>
</div> </div>
</div> </div>
@@ -368,7 +386,10 @@ const showReviewCard = computed(
<div class="hero-ed-sample mono"> <div class="hero-ed-sample mono">
new here? new here?
<router-link <router-link
:to="{ name: 'FluxNoteView', params: { user: 'remanso-space', repo: 'getting-started' } }" :to="{
name: 'FluxNoteView',
params: { user: 'remanso-space', repo: 'getting-started' }
}"
> >
try remanso-space/getting-started → try remanso-space/getting-started →
</router-link> </router-link>
@@ -395,28 +416,29 @@ const showReviewCard = computed(
<div class="manifesto-inner"> <div class="manifesto-inner">
<div class="section-label mono">§ 01 — what is remanso</div> <div class="section-label mono">§ 01 — what is remanso</div>
<p class="drop-cap manifesto-p"> <p class="drop-cap manifesto-p">
<em>Remanso</em> is a Portuguese word for the still pool that <em>Remanso</em> is a Portuguese word for the still pool that forms
forms where a river slows. The current still moves through — but for a moment, it is calm enough to see the bottom. where a river slows. The current still moves through — but for a
This is what notes should feel like. A Remanso takes your moment, it is calm enough to see the bottom. This is what notes
markdown files and lays them out as a linked notebook you can should feel like. A Remanso takes your markdown files and lays them
read, follow, and add to. No lock-in. Your notes stay in Git. out as a linked notebook you can read, follow, and add to. No
lock-in. Your notes stay in Git.
</p> </p>
<div class="feature-row"> <div class="feature-row">
<div class="feat"> <div class="feat">
<span class="feat-icon">≣</span> <span class="feat-icon">≣</span>
<h4>Stacked notes</h4> <h4>Stacked notes</h4>
<p> <p>
Click a link and the next note slides in beside the current Click a link and the next note slides in beside the current one.
one. Your train of thought stays visible — never lose where Your train of thought stays visible — never lose where you came
you came from. from.
</p> </p>
</div> </div>
<div class="feat"> <div class="feat">
<span class="feat-icon">↹</span> <span class="feat-icon">↹</span>
<h4>Automatic backlinks</h4> <h4>Automatic backlinks</h4>
<p> <p>
Every mention becomes a two-way link. See every note that Every mention becomes a two-way link. See every note that points
points back at the one you're reading. back at the one you're reading.
</p> </p>
</div> </div>
<div class="feat"> <div class="feat">
@@ -452,27 +474,34 @@ const showReviewCard = computed(
<div class="note-body"> <div class="note-body">
<p> <p>
A note should be small enough to hold one idea and A note should be small enough to hold one idea and
<a class="note-link" href="#" @click.prevent="flashOffset">durable enough</a> <a class="note-link" href="#" @click.prevent="flashOffset"
>durable enough</a
>
to outlive the day it was written. to outlive the day it was written.
</p> </p>
<p> <p>
Luhmann called this the Luhmann called this the
<a class="note-link" href="#" @click.prevent>zettelkasten</a>: a slip-box <a class="note-link" href="#" @click.prevent>zettelkasten</a>:
of thoughts you converse with, rather than a hoard of pages a slip-box of thoughts you converse with, rather than a hoard
you re-read. of pages you re-read.
</p> </p>
</div> </div>
<div class="note-backlinks"> <div class="note-backlinks">
<div class="backlinks-h mono">↖ linked from</div> <div class="backlinks-h mono">↖ linked from</div>
<ul> <ul>
<li> <li>
<a @click.prevent href="#">why links are better than folders</a> <a @click.prevent href="#"
>why links are better than folders</a
>
</li> </li>
<li><a @click.prevent href="#">a reading diary</a></li> <li><a @click.prevent href="#">a reading diary</a></li>
</ul> </ul>
</div> </div>
</article> </article>
<article class="note-preview note-preview-offset" :class="{ 'note-preview--flash': offsetHighlighted }"> <article
class="note-preview note-preview-offset"
:class="{ 'note-preview--flash': offsetHighlighted }"
>
<div class="note-header"> <div class="note-header">
<span class="mono note-breadcrumb" <span class="mono note-breadcrumb"
>remanso-space / getting-started</span >remanso-space / getting-started</span
@@ -481,9 +510,8 @@ const showReviewCard = computed(
<h3 class="note-title">Durable enough</h3> <h3 class="note-title">Durable enough</h3>
<div class="note-body"> <div class="note-body">
<p> <p>
A durable note survives its own context. You should be able A durable note survives its own context. You should be able to
to pick it up six months from now and still know what it pick it up six months from now and still know what it means.
means.
</p> </p>
<p> <p>
Rule of thumb: write the title as the claim, and the body as Rule of thumb: write the title as the claim, and the body as
@@ -519,7 +547,8 @@ const showReviewCard = computed(
<h4>Link, don't nest.</h4> <h4>Link, don't nest.</h4>
<p> <p>
Folders calcify. Links compound. Every Folders calcify. Links compound. Every
<code>[like this](new-idea.md)</code> becomes a door to a new idea. <code>[like this](new-idea.md)</code> becomes a door to a new
idea.
</p> </p>
</div> </div>
</li> </li>
@@ -528,8 +557,8 @@ const showReviewCard = computed(
<div> <div>
<h4>Let the web emerge.</h4> <h4>Let the web emerge.</h4>
<p> <p>
Don't plan the structure. Write, link, re-read. Structure is Don't plan the structure. Write, link, re-read. Structure is a
a consequence of attention. consequence of attention.
</p> </p>
</div> </div>
</li> </li>
@@ -558,11 +587,16 @@ const showReviewCard = computed(
<div> <div>
<div class="footer-h">Product</div> <div class="footer-h">Product</div>
<router-link <router-link
:to="{ name: 'FluxNoteView', params: { user: 'remanso-space', repo: 'getting-started' } }" :to="{
name: 'FluxNoteView',
params: { user: 'remanso-space', repo: 'getting-started' }
}"
class="footer-link" class="footer-link"
>Getting started</router-link >Getting started</router-link
> >
<router-link :to="{ name: 'PublicNoteListView' }" class="footer-link" <router-link
:to="{ name: 'PublicNoteListView' }"
class="footer-link"
>Public notes</router-link >Public notes</router-link
> >
<router-link :to="{ name: 'RepoList' }" class="footer-link" <router-link :to="{ name: 'RepoList' }" class="footer-link"
@@ -580,7 +614,8 @@ const showReviewCard = computed(
<div class="footer-fine"> <div class="footer-fine">
<theme-swap /> <theme-swap />
<span> <span>
made with <span style="color: var(--hw-pink-deep)">♥</span> by <a made with <span style="color: var(--hw-pink-deep)">♥</span> by
<a
href="https://apoena.dev" href="https://apoena.dev"
target="_blank" target="_blank"
rel="noreferrer" rel="noreferrer"
@@ -633,9 +668,21 @@ const showReviewCard = computed(
--hw-paper: var(--color-base-200); --hw-paper: var(--color-base-200);
--hw-paper-warm: var(--color-base-300); --hw-paper-warm: var(--color-base-300);
--hw-ink: var(--color-base-content); --hw-ink: var(--color-base-content);
--hw-ink-soft: color-mix(in oklch, var(--color-base-content) 65%, var(--color-base-200)); --hw-ink-soft: color-mix(
--hw-ink-faint: color-mix(in oklch, var(--color-base-content) 38%, var(--color-base-200)); in oklch,
--hw-rule: color-mix(in oklch, var(--color-base-content) 12%, var(--color-base-200)); var(--color-base-content) 65%,
var(--color-base-200)
);
--hw-ink-faint: color-mix(
in oklch,
var(--color-base-content) 38%,
var(--color-base-200)
);
--hw-rule: color-mix(
in oklch,
var(--color-base-content) 12%,
var(--color-base-200)
);
/* Brand accent — intentionally fixed, not derived from the active theme */ /* Brand accent — intentionally fixed, not derived from the active theme */
--hw-pink: #e36598; --hw-pink: #e36598;
@@ -664,7 +711,8 @@ const showReviewCard = computed(
position: fixed; position: fixed;
inset: 0; inset: 0;
pointer-events: none; pointer-events: none;
background-image: radial-gradient( background-image:
radial-gradient(
circle at 20% 10%, circle at 20% 10%,
rgba(227, 101, 152, 0.04), rgba(227, 101, 152, 0.04),
transparent 40% transparent 40%
@@ -691,7 +739,10 @@ main {
background: transparent; background: transparent;
color: var(--hw-ink); color: var(--hw-ink);
cursor: pointer; cursor: pointer;
transition: background 0.15s, color 0.15s, transform 0.1s; transition:
background 0.15s,
color 0.15s,
transform 0.1s;
text-decoration: none; text-decoration: none;
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
@@ -826,7 +877,9 @@ main {
cursor: pointer; cursor: pointer;
font-family: var(--hw-serif); font-family: var(--hw-serif);
color: var(--hw-ink); color: var(--hw-ink);
transition: border-color 0.15s, background 0.15s; transition:
border-color 0.15s,
background 0.15s;
&:hover { &:hover {
border-color: var(--hw-pink); border-color: var(--hw-pink);
@@ -885,16 +938,20 @@ main {
border: 1px solid var(--hw-rule); border: 1px solid var(--hw-rule);
border-right: none; border-right: none;
border-radius: 999px 0 0 999px; border-radius: 999px 0 0 999px;
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.02), box-shadow:
0 1px 0 rgba(0, 0, 0, 0.02),
0 6px 18px -10px rgba(201, 74, 125, 0.15); 0 6px 18px -10px rgba(201, 74, 125, 0.15);
cursor: text; cursor: text;
transition: border-color 0.15s, box-shadow 0.15s; transition:
border-color 0.15s,
box-shadow 0.15s;
height: auto; height: auto;
outline: none; outline: none;
&:focus-within { &:focus-within {
border-color: var(--hw-pink); border-color: var(--hw-pink);
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.02), box-shadow:
0 1px 0 rgba(0, 0, 0, 0.02),
0 10px 28px -10px rgba(201, 74, 125, 0.25); 0 10px 28px -10px rgba(201, 74, 125, 0.25);
outline: none; outline: none;
} }
@@ -1000,7 +1057,10 @@ main {
background: var(--hw-surface); background: var(--hw-surface);
border: 1px solid var(--hw-rule); border: 1px solid var(--hw-rule);
border-radius: 6px; border-radius: 6px;
transition: border-color 0.15s, box-shadow 0.2s, transform 0.15s; transition:
border-color 0.15s,
box-shadow 0.2s,
transform 0.15s;
&:hover { &:hover {
border-color: var(--hw-pink-wash-2); border-color: var(--hw-pink-wash-2);
@@ -1218,7 +1278,9 @@ main {
border: 1px solid var(--hw-rule); border: 1px solid var(--hw-rule);
border-radius: 4px; border-radius: 4px;
padding: 1.5rem 1.75rem 1.25rem; padding: 1.5rem 1.75rem 1.25rem;
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.02), 0 20px 40px -25px rgba(0, 0, 0, 0.15); box-shadow:
0 1px 0 rgba(0, 0, 0, 0.02),
0 20px 40px -25px rgba(0, 0, 0, 0.15);
max-width: 420px; max-width: 420px;
font-size: 0.95rem; font-size: 0.95rem;
line-height: 1.6; line-height: 1.6;
@@ -1227,7 +1289,9 @@ main {
.note-preview-offset { .note-preview-offset {
margin-top: 2.5rem; margin-top: 2.5rem;
transform: rotate(0.4deg); transform: rotate(0.4deg);
transition: box-shadow 0.15s ease, outline-color 0.15s ease; transition:
box-shadow 0.15s ease,
outline-color 0.15s ease;
outline: 2px solid transparent; outline: 2px solid transparent;
outline-offset: 3px; outline-offset: 3px;
} }
@@ -1237,9 +1301,23 @@ main {
} }
@keyframes note-flash { @keyframes note-flash {
0% { box-shadow: 0 0 0 3px var(--hw-pink-wash-2), 0 1px 0 rgba(0,0,0,.02), 0 20px 40px -25px rgba(0,0,0,.15); } 0% {
25% { box-shadow: 0 0 0 6px var(--hw-pink-wash-2), 0 1px 0 rgba(0,0,0,.02), 0 20px 40px -25px rgba(0,0,0,.15); } box-shadow:
100% { box-shadow: 0 1px 0 rgba(0,0,0,.02), 0 20px 40px -25px rgba(0,0,0,.15); } 0 0 0 3px var(--hw-pink-wash-2),
0 1px 0 rgba(0, 0, 0, 0.02),
0 20px 40px -25px rgba(0, 0, 0, 0.15);
}
25% {
box-shadow:
0 0 0 6px var(--hw-pink-wash-2),
0 1px 0 rgba(0, 0, 0, 0.02),
0 20px 40px -25px rgba(0, 0, 0, 0.15);
}
100% {
box-shadow:
0 1px 0 rgba(0, 0, 0, 0.02),
0 20px 40px -25px rgba(0, 0, 0, 0.15);
}
} }
.note-header { .note-header {
@@ -1476,26 +1554,14 @@ img {
padding: 1rem 1.1rem; padding: 1rem 1.1rem;
border-radius: 6px; border-radius: 6px;
border: 1px solid rgba(0, 0, 0, 0.04); border: 1px solid rgba(0, 0, 0, 0.04);
transition: transform 0.15s ease, box-shadow 0.2s ease; transition:
transform 0.15s ease,
box-shadow 0.2s ease;
min-height: 110px; min-height: 110px;
position: relative; position: relative;
overflow: hidden; overflow: hidden;
text-decoration: none; text-decoration: none;
&::after {
content: "";
position: absolute;
inset: auto -20% -40% auto;
width: 80%;
height: 80%;
background: radial-gradient(
circle,
rgba(255, 255, 255, 0.5),
transparent 60%
);
pointer-events: none;
}
&:hover { &:hover {
transform: translateY(-2px); transform: translateY(-2px);
box-shadow: 0 10px 20px -10px rgba(0, 0, 0, 0.15); box-shadow: 0 10px 20px -10px rgba(0, 0, 0, 0.15);
@@ -1883,8 +1949,5 @@ img {
grid-column: span 1; grid-column: span 1;
} }
} }
} }
</style> </style>