Skip to content

Commit

Permalink
refactor(docs): use common layout for guides and references
Browse files Browse the repository at this point in the history
  • Loading branch information
@BastiDood
BastiDood committed Dec 15, 2024
1 parent 57ce402 commit 16b9fc6
Show file tree
Hide file tree
Showing 5 changed files with 138 additions and 117 deletions.
6 changes: 4 additions & 2 deletions src/lib/layouts/DocsLayout.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@
>
<Icon icon={RoundMenu} height="24" />
</button>
<div class="grid grid-cols-[auto_1fr]">
<div class="grid w-full grid-cols-[auto_1fr]">
<div
role="none"
onclick={hideSidebar}
Expand All @@ -39,7 +39,9 @@
{@render navigation(hideSidebar)}
</ul>
</div>
<div class="overflow-y-auto">
<div
class="prose max-w-full overflow-y-auto p-10 prose-headings:scroll-mt-10 prose-h2:border-b prose-h2:border-neutral prose-h2:pb-3"
>
{@render content()}
</div>
</div>
10 changes: 10 additions & 0 deletions src/routes/(docs)/guides/+layout.svelte
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
<script>
import DocsLayout from '$lib/layouts/DocsLayout.svelte';
const { children } = $props();
</script>

<DocsLayout content={children}>
{#snippet navigation(onclick)}
<li><a {onclick} href="#invite">Hello World!</a></li>
{/snippet}
</DocsLayout>
4 changes: 1 addition & 3 deletions src/routes/(docs)/guides/+page.svelte
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1 @@
<div class="prose prose-headings:scroll-mt-10 prose-h2:border-b prose-h2:border-neutral prose-h2:pb-3">
<p>Hello world!</p>
</div>
<h1 id="invite" class="font-medium">Hello World!</h1>
14 changes: 7 additions & 7 deletions src/routes/(docs)/reference/+layout.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,19 +4,19 @@
</script>

<DocsLayout content={children}>
{#snippet navigation(hideSidebar)}
{#snippet navigation(onclick)}
<li>
<a href="#basic-usage" onclick={hideSidebar}>Basic Usage</a>
<a {onclick} href="#basic-usage">Basic Usage</a>
<ul>
<li><a href="#confess" onclick={hideSidebar}>Confessions</a></li>
<li><a href="#reply" onclick={hideSidebar}>Anonymous Replies</a></li>
<li><a {onclick} href="#confess">Confessions</a></li>
<li><a {onclick} href="#reply">Anonymous Replies</a></li>
</ul>
</li>
<li>
<a href="#moderation" onclick={hideSidebar}>Moderation</a>
<a {onclick} href="#moderation">Moderation</a>
<ul>
<li><a href="#channel-setup" onclick={hideSidebar}>Channel Setup</a></li>
<li><a href="#manage-confessions" onclick={hideSidebar}>Manage Confessions</a></li>
<li><a {onclick} href="#channel-setup">Channel Setup</a></li>
<li><a {onclick} href="#manage-confessions">Manage Confessions</a></li>
</ul>
</li>
{/snippet}
Expand Down
221 changes: 116 additions & 105 deletions src/routes/(docs)/reference/+page.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
<div class="badge badge-info badge-outline place-self-center">Required permissions: {perms}</div>
{/snippet}

<div class="prose max-w-full p-10 prose-headings:scroll-mt-10 prose-h2:border-b prose-h2:border-neutral prose-h2:pb-3">
<section>
<h1 class="font-medium">Documentation</h1>
<div class="alert alert-warning gap-2 text-sm text-warning-content">
<Icon icon="tabler:barrier-block-filled" height="24" />
Expand All @@ -17,116 +17,127 @@
<strong>Spectro</strong> enables your community members to post anonymous confessions and replies to moderator-configured
channels. However, for the sake of moderation, confessions are still logged for later viewing.
</p>

</section>
<section>
<h2 id="basic-usage">Basic Usage</h2>
<div class="flex flex-col items-center gap-2 lg:flex-row lg:items-start">
<div
class="w-fit self-center rounded-md bg-base-300 px-4 py-2 font-mono text-lg font-bold text-primary drop-shadow-md"
>
<span>/help</span>
<CommandOption tooltip="Message visibility.">preview</CommandOption>
<section>
<div class="flex flex-col items-center gap-2 lg:flex-row lg:items-start">
<div
class="w-fit self-center rounded-md bg-base-300 px-4 py-2 font-mono text-lg font-bold text-primary drop-shadow-md"
>
<span>/help</span>
<CommandOption tooltip="Message visibility.">preview</CommandOption>
</div>
</div>
</div>
<p class="mb-10">
<strong>Open the help page to show a list of commands.</strong> By default, the help page is shown privately,
but you can enable the
<code>public</code> message mode. This command can be run anywhere: server channels, private DMs, etc.
</p>
<div class="flex flex-col items-center gap-2 lg:flex-row lg:items-start">
<div
class="w-fit self-center rounded-md bg-base-300 px-4 py-2 font-mono text-lg font-bold text-primary drop-shadow-md"
>
<span>/info</span>
<CommandOption tooltip="Message visibility.">public</CommandOption>
<p class="mb-10">
<strong>Open the help page to show a list of commands.</strong> By default, the help page is shown
privately, but you can enable the
<code>public</code> message mode. This command can be run anywhere: server channels, private DMs, etc.
</p>
</section>
<section>
<div class="flex flex-col items-center gap-2 lg:flex-row lg:items-start">
<div
class="w-fit self-center rounded-md bg-base-300 px-4 py-2 font-mono text-lg font-bold text-primary drop-shadow-md"
>
<span>/info</span>
<CommandOption tooltip="Message visibility.">public</CommandOption>
</div>
</div>
</div>
<p class="mb-10">
<strong>View important information and links about Spectro,</strong> including links for reporting bugs and
viewing the source code. By default, the information page is shown privately, but you can enable the
<code>public</code> message mode. This command can be run anywhere: server channels, private DMs, etc.
</p>
<div id="confess" class="flex scroll-mt-10 flex-col items-center gap-2 lg:flex-row lg:items-start">
<div
class="w-fit self-center rounded-md bg-base-300 px-4 py-2 font-mono text-lg font-bold text-primary drop-shadow-md"
>
<span>/confess</span>
<CommandOption required tooltip="Content of the confession message.">content</CommandOption>
<p class="mb-10">
<strong>View important information and links about Spectro,</strong> including links for reporting bugs and
viewing the source code. By default, the information page is shown privately, but you can enable the
<code>public</code> message mode. This command can be run anywhere: server channels, private DMs, etc.
</p>
</section>
<section>
<div id="confess" class="flex scroll-mt-10 flex-col items-center gap-2 lg:flex-row lg:items-start">
<div
class="w-fit self-center rounded-md bg-base-300 px-4 py-2 font-mono text-lg font-bold text-primary drop-shadow-md"
>
<span>/confess</span>
<CommandOption required tooltip="Content of the confession message.">content</CommandOption>
</div>
{@render permissionBadge('Send Messages')}
</div>
{@render permissionBadge('Send Messages')}
</div>
<p class="mb-10">
<strong>Send a confession to the current channel.</strong> This command fails if the current channel has not yet
been configured to receive confessions.
</p>

<div id="reply" class="flex scroll-mt-10 flex-col items-center gap-2 lg:flex-row lg:items-start">
<div
class="w-fit self-center rounded-md bg-base-300 px-4 py-2 font-mono text-lg font-bold text-primary drop-shadow-md"
>
<span>Apps &gt; Reply Anonymously</span>
<p class="mb-10">
<strong>Send a confession to the current channel.</strong> This command fails if the current channel has not
yet been configured to receive confessions.
</p>
</section>
<section>
<div id="reply" class="flex scroll-mt-10 flex-col items-center gap-2 lg:flex-row lg:items-start">
<div
class="w-fit self-center rounded-md bg-base-300 px-4 py-2 font-mono text-lg font-bold text-primary drop-shadow-md"
>
<span>Apps &gt; Reply Anonymously</span>
</div>
{@render permissionBadge('Send Messages')}
</div>
{@render permissionBadge('Send Messages')}
</div>
<p class="mb-10">
<strong>Anonymously reply</strong> to any message (in a confessions-enabled channel) by
<strong>right-clicking</strong>
on that message and invoking the <code class="whitespace-nowrap">Apps &gt; Reply Anonymously</code> command.
</p>

<p class="mb-10">
<strong>Anonymously reply</strong> to any message (in a confessions-enabled channel) by
<strong>right-clicking</strong>
on that message and invoking the <code class="whitespace-nowrap">Apps &gt; Reply Anonymously</code> command.
</p>
</section>
</section>
<section>
<h2 id="moderation">Moderation</h2>
<h3 id="channel-setup" class="scroll-mt-10">Channel Setup</h3>
<div class="flex flex-col items-center gap-2 lg:flex-row lg:items-start">
<div
class="w-fit self-center rounded-md bg-base-300 px-4 py-2 font-mono text-lg font-bold text-primary drop-shadow-md"
>
<span>/setup</span>
<CommandOption required tooltip="Moderator-only channel for confession logs">channel</CommandOption>
<CommandOption tooltip="Custom title for confession messages.">label</CommandOption>
<CommandOption tooltip="Custom hex color for confession messages.">color</CommandOption>
<CommandOption tooltip="Should prior approvals be required?">approval</CommandOption>
<section>
<h3 id="channel-setup" class="scroll-mt-10">Channel Setup</h3>
<div class="flex flex-col items-center gap-2 lg:flex-row lg:items-start">
<div
class="w-fit self-center rounded-md bg-base-300 px-4 py-2 font-mono text-lg font-bold text-primary drop-shadow-md"
>
<span>/setup</span>
<CommandOption required tooltip="Moderator-only channel for confession logs">channel</CommandOption>
<CommandOption tooltip="Custom title for confession messages.">label</CommandOption>
<CommandOption tooltip="Custom hex color for confession messages.">color</CommandOption>
<CommandOption tooltip="Should prior approvals be required?">approval</CommandOption>
</div>
{@render permissionBadge('Manage Channels')}
</div>
{@render permissionBadge('Manage Channels')}
</div>
<p>
<strong>Enable confessions for the current channel where the command is being run.</strong> All confessions,
along with the sender's username, will be logged in a separate provided
<code>channel</code> ideally only accessed by server moderators. You may set whether to require moderator
<code>approval</code>
before publishing a confession (not required by default). If enabled, confessions can be approved or rejected in
the logs
<code>channel</code>. Running this command again will simply overwrite the affected previous settings.
</p>
<p class="mb-10">
<strong>Customization.</strong>
Optionally, you can set a <code>label</code> to be used for the embed title (e.g., "Confession" by default). You
may also set the RGB <code>color </code> hex code that will be used for the embeds.
</p>

<h3 id="manage-confessions" class="scroll-mt-10">Manage Confessions</h3>
<div class="flex flex-col items-center gap-2 lg:flex-row lg:items-start">
<div
class="w-fit self-center rounded-md bg-base-300 px-4 py-2 font-mono text-lg font-bold text-primary drop-shadow-md"
>
<span>/lockdown</span>
<p>
<strong>Enable confessions for the current channel where the command is being run.</strong> All confessions,
along with the sender's username, will be logged in a separate provided
<code>channel</code> ideally only accessed by server moderators. You may set whether to require moderator
<code>approval</code>
before publishing a confession (not required by default). If enabled, confessions can be approved or rejected
in the logs
<code>channel</code>. Running this command again will simply overwrite the affected previous settings.
</p>
<p class="mb-10">
<strong>Customization.</strong>
Optionally, you can set a <code>label</code> to be used for the embed title (e.g., "Confession" by default).
You may also set the RGB <code>color </code> hex code that will be used for the embeds.
</p>
</section>
<section>
<h3 id="manage-confessions" class="scroll-mt-10">Manage Confessions</h3>
<div class="flex flex-col items-center gap-2 lg:flex-row lg:items-start">
<div
class="w-fit self-center rounded-md bg-base-300 px-4 py-2 font-mono text-lg font-bold text-primary drop-shadow-md"
>
<span>/lockdown</span>
</div>
{@render permissionBadge('Manage Channels')}
</div>
{@render permissionBadge('Manage Channels')}
</div>

<p class="mb-10">
<strong>Temporarily disable anonymous confessions for the current channel.</strong> Previous settings are
preserved for the next time <code>/setup</code> is run.
</p>
<div class="flex flex-col items-center gap-2 lg:flex-row lg:items-start">
<div
class="w-fit self-center rounded-md bg-base-300 px-4 py-2 font-mono text-lg font-bold text-primary drop-shadow-md"
>
<span>/resend</span>
<CommandOption required tooltip="ID of confession to resend.">confession</CommandOption>
<p class="mb-10">
<strong>Temporarily disable anonymous confessions for the current channel.</strong> Previous settings are
preserved for the next time <code>/setup</code> is run.
</p>
<div class="flex flex-col items-center gap-2 lg:flex-row lg:items-start">
<div
class="w-fit self-center rounded-md bg-base-300 px-4 py-2 font-mono text-lg font-bold text-primary drop-shadow-md"
>
<span>/resend</span>
<CommandOption required tooltip="ID of confession to resend.">confession</CommandOption>
</div>
{@render permissionBadge('Manage Messages')}
</div>
{@render permissionBadge('Manage Messages')}
</div>
<p class="mb-10">
<strong>Resend an existing confession by its <code>id</code>.</strong> This is useful for times when a confession
message has been accidentally deleted. Note that the current channel settings are still enforced.
</p>
</div>
<p class="mb-10">
<strong>Resend an existing confession by its <code>id</code>.</strong> This is useful for times when a confession
message has been accidentally deleted. Note that the current channel settings are still enforced.
</p>
</section>
</section>

0 comments on commit 16b9fc6

Please sign in to comment.