pages-landing-page/src/lib/instructions.svelte

<script lang="ts">
	import { browser } from '$app/environment';
	import { gitDomain, ipv4, ipv6, pagesDomain } from '$lib';
	import { Accordion, AccordionItem, CodeBlock, Step, Stepper } from '@skeletonlabs/skeleton';

	let username = '';
	let repository = '';
	let branch = '';

	$: navDomain = `https://${username}.${pagesDomain}${!repository ? '' : `/${repository}`}${!branch ? '' : `/@${branch}`}`;
	$: dnsDomain = `${!branch ? '' : `${branch}.`}${!repository ? '' : `${repository}.`}${username}.${pagesDomain}`;

	function codebergDocs() {
		if (browser) {
			window.open('https://docs.codeberg.org/codeberg-pages/', '_blank');
		}
	}
</script>

<Stepper
	on:complete={codebergDocs}
	buttonCompleteLabel="Open Documentation"
	buttonComplete="variant-filled-success"
>
	<Step>
		<svelte:fragment slot="navigation">
			<a href="https://{gitDomain}/repo/create" target="_blank" class="btn variant-filled-secondary"
				>Create a repository!</a
			>
		</svelte:fragment>
		<svelte:fragment slot="header">1 - Make a repository</svelte:fragment>
		<div class="space-y-2">
			<p>
				Create a public repository named <code class="code">pages</code> to make the site available on
				the main subdomain.
			</p>
			<hr />
		</div>
		<p>Or, create a branch named <code class="code">pages</code> in any public repository.</p>
		<p>
			<code class="code">git switch --orphan pages</code><br /><code class="code"
				>git rm --cached -r .</code
			>
		</p>
		<CodeBlock
			buttonCopied="Copied!"
			lineNumbers={true}
			language="shell"
			code={`git switch --orphan pages
git rm --cached -r .`}
		></CodeBlock>
	</Step>
	<Step>
		<svelte:fragment slot="header">2 - Add your files</svelte:fragment>
		<p>Push your static content. HTML, CSS, fonts, images or anything else.</p>
	</Step>
	<Step>
		<svelte:fragment slot="header">3 - You're Done!</svelte:fragment>
		<div class="space-y-4">
			<p>Access your new website with this link:</p>
			<code class="code">https://USERNAME.{pagesDomain}[/REPOSITORY][/@BRANCH]</code>
			<p>or, use this handy form that can navigate for you!</p>
			<div class="space-y-1">
				<div class="input-group input-group-divider grid-cols-4">
					<input
						bind:value={username}
						class="input variant-form-material {username ? '' : 'input-error'}"
						title="Username"
						type="text"
						placeholder="Username (required)"
						required
					/>
					<div class="input-group-shim">.{pagesDomain}/</div>
					<input
						bind:value={repository}
						class="input variant-form-material"
						title="Repository"
						type="text"
						placeholder="Repository"
					/>
					<input
						bind:value={branch}
						class="input variant-form-material"
						title="Branch"
						type="text"
						placeholder="Branch"
					/>
				</div>
				<a href={navDomain} class="btn variant-filled-secondary">Take me there!</a>
			</div>
			<hr />
			<div>
				<h3 class="h3">What about custom domains?</h3>
				<p>
					To use custom domains, create a <code class="code">.domains</code> in the root of your repository
					with the domain name you would like to use.
				</p>
				<br />
				<p>Then, add a DNS record for that domain:</p>
				<em>(note): use the above form to auto-generate your DNS records!</em>
				<Accordion autocollapse>
					<AccordionItem open>
						<svelte:fragment slot="summary">CNAME (Prefered)</svelte:fragment>
						<svelte:fragment slot="content">
							<code class="code">CNAME [[branch.]repo.]user.{pagesDomain}.</code>
							<CodeBlock buttonCopied="Copied!" language="dns" code={`CNAME ${dnsDomain}.`}
							></CodeBlock>
						</svelte:fragment>
					</AccordionItem>
					<AccordionItem>
						<svelte:fragment slot="summary">ALIAS (If available)</svelte:fragment>
						<svelte:fragment slot="content">
							<p>For apex domains where CNAME does not work.</p>
							<p>
								<code class="code">ALIAS {pagesDomain}.</code><br /><code class="code"
									>TXT $[[branch.]repo.]user.{pagesDomain}</code
								>
							</p>
							<CodeBlock
								buttonCopied="Copied!"
								language="dns"
								code={`ALIAS ${pagesDomain}.
TXT ${dnsDomain}`}
							></CodeBlock>
						</svelte:fragment>
					</AccordionItem>
					<AccordionItem>
						<svelte:fragment slot="summary">A/AAAA (Old reliable)</svelte:fragment>
						<svelte:fragment slot="content">
							<p>If CNAME will not work and ALIAS is not available</p>
							<p>
								<code class="code">A {ipv4}</code><br /><code class="code">AAAA {ipv6}</code><br
								/><code class="code">TXT $[[branch.]repo.]user.{pagesDomain}</code>
							</p>
							<CodeBlock
								buttonCopied="Copied!"
								language="dns"
								code={`A ${ipv4}
AAAA ${ipv6}
TXT ${dnsDomain}`}
							></CodeBlock>
						</svelte:fragment>
					</AccordionItem>
				</Accordion>
			</div>
		</div>
	</Step>
</Stepper>