compartmentalize + make look a tiny bit better
All checks were successful
continuous-integration/drone/push Build is passing
All checks were successful
continuous-integration/drone/push Build is passing
Signed-off-by: Sam Therapy <sam@samtherapy.net>
This commit is contained in:
parent
3971f4171f
commit
52c00952b2
GPG key ID:
4D8B07C18F31ACBD
2 changed files with 162 additions and 152 deletions
150
src/lib/instructions.svelte
Normal file
150
src/lib/instructions.svelte
Normal file
|
|
@ -0,0 +1,150 @@
|
|||
<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>
|
||||
|
|
@ -1,161 +1,21 @@
|
|||
<script lang="ts">
|
||||
import { browser } from '$app/environment';
|
||||
import { gitDomain, gitName, ipv4, ipv6, pagesDomain, pagesName } 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');
|
||||
}
|
||||
}
|
||||
import { gitDomain, gitName, pagesName } from '$lib';
|
||||
import Instructions from '$lib/instructions.svelte';
|
||||
</script>
|
||||
|
||||
<div class="container mx-auto flex justify-center items-center w-full">
|
||||
<div class="space-y-10 h-full text-center flex flex-col items-center w-full">
|
||||
<br />
|
||||
<h2 class="h2">Host <strong>static websites</strong> with {pagesName}!</h2>
|
||||
<p>
|
||||
<div class="container mx-auto text-left p-4 md:text-center">
|
||||
<div class="relative z-[1] space-y-6 pt-32 pb-24">
|
||||
<div class="font-bold text-4xl tracking-tight">
|
||||
Host <span class="text-tertiary-500">static websites</span> with {pagesName}!
|
||||
</div>
|
||||
<p class="max-w-lg opacity-90 md:mx-auto">
|
||||
It's quick, easy, free & fast - just put your project's homepage, developer blog or web
|
||||
experiment into a Git repository at <a class="anchor" href="https://{gitDomain}">{gitName}</a>
|
||||
and we'll do the rest.
|
||||
</p>
|
||||
<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>
|
||||
<br />
|
||||
<div class="flex flex-col gap-3 md:space-x-3 md:block mx-auto md:w-6/12">
|
||||
<Instructions />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in a new issue