silberengel
/
gc-alexandria
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Merges pull request #30 

Bring back styles
master
silberengel 11 months ago
parent
2cf4dccda2 fabd54fde7
commit
22dbaa290f
No known key found for this signature in database
GPG Key ID: 962BEC8725790894
2 changed files with 249 additions and 149 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 308
      src/routes/about/+page.svelte
  2. 90
      src/styles/publications.css

308
src/routes/about/+page.svelte
Unescape View File

@ -1,118 +1,214 @@ @@ -1,118 +1,214 @@
<script lang='ts'>
<script lang="ts">
import { Heading, Img, P, A } from "flowbite-svelte";
// Get the git tag version from environment variables
const appVersion = import.meta.env.APP_VERSION || 'development';
const isVersionKnown = appVersion !== 'development';
const appVersion = import.meta.env.APP_VERSION || "development";
const isVersionKnown = appVersion !== "development";
</script>
<div class='w-full flex justify-center'>
<main class='main-leather flex flex-col space-y-6 max-w-2xl w-full my-6 px-4'>
<div class="w-full flex justify-center">
<main class="main-leather flex flex-col space-y-6 max-w-2xl w-full my-6 px-4">
<div class="flex justify-between items-center">
<Heading tag='h1' class='h-leather mb-2'>About the Library of Alexandria</Heading>
<Heading tag="h1" class="h-leather mb-2"
>About the Library of Alexandria</Heading
>
{#if isVersionKnown}
<span class="text-sm bg-gray-100 dark:bg-gray-800 px-2 py-1 rounded text-nowrap">Version: {appVersion}</span>
<span
class="text-sm bg-gray-100 dark:bg-gray-800 px-2 py-1 rounded text-nowrap"
>Version: {appVersion}</span
>
{/if}
</div>
<Img src="/screenshots/old_books.jpg" alt="Alexandria icon" />
<P class="mb-3">
Alexandria is a reader and writer for <A href="/publication?d=gitcitadel-project-documentation-curated-publications-specification-7-by-stella-v-1">curated publications</A> (in Asciidoc), wiki pages (Asciidoc), and will eventually also support long-form articles (Markdown). It is produced by the <A href="/publication?d=gitcitadel-project-documentation-gitcitadel-project-1-by-stella-v-1">GitCitadel project team</A>.
</P>
<P class="mb-3">
Please submit support issues on the <A href="https://gitcitadel.com/r/naddr1qvzqqqrhnypzquqjyy5zww7uq7hehemjt7juf0q0c9rgv6lv8r2yxcxuf0rvcx9eqy88wumn8ghj7mn0wvhxcmmv9uq3wamnwvaz7tmjv4kxz7fwdehhxarj9e3xzmny9uqsuamnwvaz7tmwdaejumr0dshsqzjpd3jhsctwv3exjcgtpg0n0/issues" target="_blank">Alexandria repo page</A> and follow us on <A href="https://github.com/ShadowySupercode/gitcitadel" target="_blank">GitHub</A> and <A href="https://geyser.fund/project/gitcitadel" target="_blank">Geyserfund</A>.
</P>
<P>
We are easiest to contact over our Nostr address <A href="https://njump.me/nprofile1qqsggm4l0xs23qfjwnkfwf6fqcs66s3lz637gaxhl4nwd2vtle8rnfqprfmhxue69uhhg6r9vehhyetnwshxummnw3erztnrdaks5zhueg" title="npub1s3ht77dq4zqnya8vjun5jp3p44pr794ru36d0ltxu65chljw8xjqd975wz" target="_blank">npub1s3h…75wz</A>.
</P>
<Heading tag='h2' class='h-leather mt-4 mb-2'>Overview</Heading>
<P class="mb-4">
Alexandria opens up to the <A href="./">landing page</A>, where the user can: login (top-right), select whether to only view the publications hosted on the <A href="https://thecitadel.nostr1.com/" target="_blank">thecitadel document relay</A> or add in their own relays, and scroll/search the publications.
</P>
<div class="flex flex-col items-center space-y-4 my-4">
<Img src="/screenshots/LandingPage.png" alt="Landing page" class='image-border rounded-lg' width="400" />
<Img src="/screenshots/YourRelays.png" alt="Relay selection" class='image-border rounded-lg' width="400" />
</div>
<P class="mb-3">
There is also the ability to view the publications as a diagram, if you click on "Visualize", and to publish an e-book or other document (coming soon).
</P>
<P class="mb-3">
If you click on a card, which represents a 30040 index event, the associated reading view opens to the publication. The app then pulls all of the content events (30041s and 30818s for wiki pages), in the order in which they are indexed, and displays them as a single document.
</P>
<P class="mb-3">
Each content section (30041 or 30818) is also a level in the table of contents, which can be accessed from the floating icon top-left in the reading view. This allows for navigation within the publication. (This functionality has been temporarily disabled.)
</P>
<div class="flex flex-col items-center space-y-4 my-4">
<Img src="/screenshots/ToC_icon.png" alt="ToC icon" class='image-border rounded-lg' width="400" />
<Img src="/screenshots/TableOfContents.png" alt="Table of contents example" class='image-border rounded-lg' width="400" />
</div>
<Heading tag='h2' class='h-leather mt-4 mb-2'>Typical use cases</Heading>
<Heading tag='h3' class='h-leather mb-3'>For e-books</Heading>
<P class="mb-3">
The most common use for Alexandria is for e-books: both those users have written themselves and those uploaded to Nostr from other sources. The first minor version of the app, Gutenberg, is focused on displaying and producing these publications.
</P>
<P class="mb-3">
An example of a book is <A href="/publication?d=jane-eyre-an-autobiography-by-charlotte-bront%C3%AB-v-3rd-edition">Jane Eyre</A>
</P>
<div class="flex justify-center my-4">
<Img src="/screenshots/JaneEyre.png" alt="Jane Eyre, by Charlotte Brontë" class='image-border rounded-lg' width="400" />
</div>
<Heading tag='h3' class='h-leather mb-3'>For scientific papers</Heading>
<P class="mb-3">
Alexandria will also display research papers with Asciimath and LaTeX embedding, and the normal advanced formatting options available for Asciidoc. In addition, we will be implementing special citation events, which will serve as an alternative or addition to the normal footnotes.
</P>
<P class="mb-3">
Correctly displaying such papers, integrating citations, and allowing them to be reviewed (with kind 1111 comments), and annotated (with highlights) by users, is the focus of the second minor version, Euler.
</P>
<P class="mb-3">
Euler will also pioneer the HTTP-based (rather than websocket-based) e-paper compatible version of the web app.
</P>
<P class="mb-3">
An example of a research paper is <A href="/publication?d=less-partnering-less-children-or-both-by-j.i.s.-hellstrand-v-1">Less Partnering, Less Children, or Both?</A>
</P>
<div class="flex justify-center my-4">
<Img src="/screenshots/ResearchPaper.png" alt="Research paper" class='image-border rounded-lg' width="400" />
</div>
<Heading tag='h3' class='h-leather mb-3'>For documentation</Heading>
<P class="mb-3">
Our own team uses Alexandria to document the app, to display our <A href="/publication?d=the-gitcitadel-blog-by-stella-v-1">blog entries</A>, as well as to store copies of our most interesting <A href="/publication?d=gitcitadel-project-documentation-by-stella-v-1">technical specifications</A>.
</P>
<div class="flex justify-center my-4">
<Img src="/screenshots/Documentation.png" alt="Documentation" class='image-border rounded-lg' width="400" />
</div>
<Heading tag='h3' class='h-leather mb-3'>For wiki pages</Heading>
<P class="mb-3">
Alexandria now supports wiki pages (kind 30818), allowing for collaborative knowledge bases and documentation. Wiki pages use the same Asciidoc format as other publications but are specifically designed for interconnected, evolving content.
</P>
<P class="mb-3">
Wiki pages can be linked to from other publications and can contain links to other wiki pages, creating a web of knowledge that can be navigated and explored.
</P>
</main>
Alexandria is a reader and writer for <A
href="/publication?d=gitcitadel-project-documentation-curated-publications-specification-7-by-stella-v-1"
>curated publications</A
> (in Asciidoc), wiki pages (Asciidoc), and will eventually also support long-form
articles (Markdown). It is produced by the <A
href="/publication?d=gitcitadel-project-documentation-gitcitadel-project-1-by-stella-v-1"
>GitCitadel project team</A
>.
</P>
<P class="mb-3">
Please submit support issues on the <A
href="https://gitcitadel.com/r/naddr1qvzqqqrhnypzquqjyy5zww7uq7hehemjt7juf0q0c9rgv6lv8r2yxcxuf0rvcx9eqy88wumn8ghj7mn0wvhxcmmv9uq3wamnwvaz7tmjv4kxz7fwdehhxarj9e3xzmny9uqsuamnwvaz7tmwdaejumr0dshsqzjpd3jhsctwv3exjcgtpg0n0/issues"
target="_blank">Alexandria repo page</A
> and follow us on <A
href="https://github.com/ShadowySupercode/gitcitadel"
target="_blank">GitHub</A
> and <A href="https://geyser.fund/project/gitcitadel" target="_blank"
>Geyserfund</A
>.
</P>
<P>
We are easiest to contact over our Nostr address <A
href="https://njump.me/nprofile1qqsggm4l0xs23qfjwnkfwf6fqcs66s3lz637gaxhl4nwd2vtle8rnfqprfmhxue69uhhg6r9vehhyetnwshxummnw3erztnrdaks5zhueg"
title="npub1s3ht77dq4zqnya8vjun5jp3p44pr794ru36d0ltxu65chljw8xjqd975wz"
target="_blank">npub1s3h…75wz</A
>.
</P>
<Heading tag="h2" class="h-leather mt-4 mb-2">Overview</Heading>
<P class="mb-4">
Alexandria opens up to the <A href="./">landing page</A>, where the user
can: login (top-right), select whether to only view the publications
hosted on the <A href="https://thecitadel.nostr1.com/" target="_blank"
>thecitadel document relay</A
> or add in their own relays, and scroll/search the publications.
</P>
<div class="flex flex-col items-center space-y-4 my-4">
<Img
src="/screenshots/LandingPage.png"
alt="Landing page"
class="image-border rounded-lg"
width="400"
/>
<Img
src="/screenshots/YourRelays.png"
alt="Relay selection"
class="image-border rounded-lg"
width="400"
/>
</div>
<P class="mb-3">
There is also the ability to view the publications as a diagram, if you
click on "Visualize", and to publish an e-book or other document (coming
soon).
</P>
<P class="mb-3">
If you click on a card, which represents a 30040 index event, the
associated reading view opens to the publication. The app then pulls all
of the content events (30041s and 30818s for wiki pages), in the order in
which they are indexed, and displays them as a single document.
</P>
<P class="mb-3">
Each content section (30041 or 30818) is also a level in the table of
contents, which can be accessed from the floating icon top-left in the
reading view. This allows for navigation within the publication. (This
functionality has been temporarily disabled.)
</P>
<div class="flex flex-col items-center space-y-4 my-4">
<Img
src="/screenshots/ToC_icon.png"
alt="ToC icon"
class="image-border rounded-lg"
width="400"
/>
<Img
src="/screenshots/TableOfContents.png"
alt="Table of contents example"
class="image-border rounded-lg"
width="400"
/>
</div>
<Heading tag="h2" class="h-leather mt-4 mb-2">Typical use cases</Heading>
<Heading tag="h3" class="h-leather mb-3">For e-books</Heading>
<P class="mb-3">
The most common use for Alexandria is for e-books: both those users have
written themselves and those uploaded to Nostr from other sources. The
first minor version of the app, Gutenberg, is focused on displaying and
producing these publications.
</P>
<P class="mb-3">
An example of a book is <A
href="/publication?d=jane-eyre-an-autobiography-by-charlotte-bront%C3%AB-v-3rd-edition"
>Jane Eyre</A
>
</P>
<div class="flex justify-center my-4">
<Img
src="/screenshots/JaneEyre.png"
alt="Jane Eyre, by Charlotte Brontë"
class="image-border rounded-lg"
width="400"
/>
</div>
<Heading tag="h3" class="h-leather mb-3">For scientific papers</Heading>
<P class="mb-3">
Alexandria will also display research papers with Asciimath and LaTeX
embedding, and the normal advanced formatting options available for
Asciidoc. In addition, we will be implementing special citation events,
which will serve as an alternative or addition to the normal footnotes.
</P>
<P class="mb-3">
Correctly displaying such papers, integrating citations, and allowing them
to be reviewed (with kind 1111 comments), and annotated (with highlights)
by users, is the focus of the second minor version, Euler.
</P>
<P class="mb-3">
Euler will also pioneer the HTTP-based (rather than websocket-based)
e-paper compatible version of the web app.
</P>
<P class="mb-3">
An example of a research paper is <A
href="/publication?d=less-partnering-less-children-or-both-by-julia-hellstrand-v-1"
>Less Partnering, Less Children, or Both?</A
>
</P>
<div class="flex justify-center my-4">
<Img
src="/screenshots/ResearchPaper.png"
alt="Research paper"
class="image-border rounded-lg"
width="400"
/>
</div>
<Heading tag="h3" class="h-leather mb-3">For documentation</Heading>
<P class="mb-3">
Our own team uses Alexandria to document the app, to display our <A
href="/publication?d=the-gitcitadel-blog-by-stella-v-1">blog entries</A
>, as well as to store copies of our most interesting <A
href="/publication?d=gitcitadel-project-documentation-by-stella-v-1"
>technical specifications</A
>.
</P>
<div class="flex justify-center my-4">
<Img
src="/screenshots/Documentation.png"
alt="Documentation"
class="image-border rounded-lg"
width="400"
/>
</div>
<Heading tag="h3" class="h-leather mb-3">For wiki pages</Heading>
<P class="mb-3">
Alexandria now supports wiki pages (kind 30818), allowing for
collaborative knowledge bases and documentation. Wiki pages, such as this
one about the <A href="/publication?d=sybil">Sybil utility</A> use the same
Asciidoc format as other publications but are specifically designed for interconnected,
evolving content.
</P>
<P class="mb-3">
Wiki pages can be linked to from other publications and can contain links
to other wiki pages, creating a web of knowledge that can be navigated and
explored.
</P>
</main>
</div>

90
src/styles/publications.css
Unescape View File

@ -53,7 +53,7 @@ @@ -53,7 +53,7 @@
@apply p-3 text-wrap break-words;
}
.note-leather .listingblock pre {
.publication-leather .listingblock pre {
@apply overflow-x-auto;
}
@ -62,24 +62,24 @@ @@ -62,24 +62,24 @@
@apply space-y-1 list-disc list-inside;
}
.note-leather .olist ol {
.publication-leather .olist ol {
@apply space-y-1 list-inside;
}
.note-leather ol.arabic {
.publication-leather ol.arabic {
@apply list-decimal;
}
.note-leather ol.loweralpha {
.publication-leather ol.loweralpha {
@apply list-lower-alpha;
}
.note-leather ol.upperalpha {
.publication-leather ol.upperalpha {
@apply list-upper-alpha;
}
.note-leather li ol,
.note-leather li ul {
.publication-leather li ol,
.publication-leather li ul {
@apply ps-5 my-2;
}
@ -93,25 +93,25 @@ @@ -93,25 +93,25 @@
@apply my-2 font-thin text-lg;
}
.note-leather li p {
.publication-leather li p {
@apply inline;
}
/* blockquote; prose and poetry quotes */
.note-leather .quoteblock,
.note-leather .verseblock {
.publication-leather .quoteblock,
.publication-leather .verseblock {
@apply p-4 my-4 border-s-4 rounded border-primary-300 bg-primary-50 dark:border-primary-500 dark:bg-primary-700;
}
.note-leather .verseblock pre.content {
.publication-leather .verseblock pre.content {
@apply text-base font-sans;
}
.note-leather .attribution {
.publication-leather .attribution {
@apply mt-3 italic clear-both;
}
.note-leather cite {
.publication-leather cite {
@apply text-sm;
}
@ -120,94 +120,98 @@ @@ -120,94 +120,98 @@
}
/* admonition */
.note-leather .admonitionblock .title {
.publication-leather .admonitionblock .title {
@apply font-semibold;
}
.note-leather .admonitionblock table {
.publication-leather .admonitionblock table {
@apply w-full border-collapse;
}
.note-leather .admonitionblock tr {
@apply flex flex-col;
.publication-leather .admonitionblock tr {
@apply flex flex-col border-none;
}
.note-leather .admonitionblock p:has(code) {
.publication-leather .admonitionblock td {
@apply border-none;
}
.publication-leather .admonitionblock p:has(code) {
@apply my-3;
}
.note-leather .admonitionblock {
.publication-leather .admonitionblock {
@apply rounded overflow-hidden border;
}
.note-leather .admonitionblock .icon,
.note-leather .admonitionblock .content {
.publication-leather .admonitionblock .icon,
.publication-leather .admonitionblock .content {
@apply p-4;
}
.note-leather .admonitionblock .content {
.publication-leather .admonitionblock .content {
@apply pt-0;
}
.note-leather .admonitionblock.tip {
.publication-leather .admonitionblock.tip {
@apply rounded overflow-hidden border border-success-100 dark:border-success-800;
}
.note-leather .admonitionblock.tip .icon,
.note-leather .admonitionblock.tip .content {
.publication-leather .admonitionblock.tip .icon,
.publication-leather .admonitionblock.tip .content {
@apply bg-success-100 dark:bg-success-800;
}
.note-leather .admonitionblock.note {
.publication-leather .admonitionblock.note {
@apply rounded overflow-hidden border border-info-100 dark:border-info-700;
}
.note-leather .admonitionblock.note .icon,
.note-leather .admonitionblock.note .content {
.publication-leather .admonitionblock.note .icon,
.publication-leather .admonitionblock.note .content {
@apply bg-info-100 dark:bg-info-800;
}
.note-leather .admonitionblock.important {
.publication-leather .admonitionblock.important {
@apply rounded overflow-hidden border border-primary-200 dark:border-primary-700;
}
.note-leather .admonitionblock.important .icon,
.note-leather .admonitionblock.important .content {
.publication-leather .admonitionblock.important .icon,
.publication-leather .admonitionblock.important .content {
@apply bg-primary-200 dark:bg-primary-700;
}
.note-leather .admonitionblock.caution {
.publication-leather .admonitionblock.caution {
@apply rounded overflow-hidden border border-warning-200 dark:border-warning-700;
}
.note-leather .admonitionblock.caution .icon,
.note-leather .admonitionblock.caution .content {
.publication-leather .admonitionblock.caution .icon,
.publication-leather .admonitionblock.caution .content {
@apply bg-warning-200 dark:bg-warning-700;
}
.note-leather .admonitionblock.warning {
.publication-leather .admonitionblock.warning {
@apply rounded overflow-hidden border border-danger-200 dark:border-danger-800;
}
.note-leather .admonitionblock.warning .icon,
.note-leather .admonitionblock.warning .content {
.publication-leather .admonitionblock.warning .icon,
.publication-leather .admonitionblock.warning .content {
@apply bg-danger-200 dark:bg-danger-800;
}
/* listingblock, literalblock */
.note-leather .listingblock,
.note-leather .literalblock {
.publication-leather .listingblock,
.publication-leather .literalblock {
@apply p-4 rounded bg-highlight dark:bg-primary-700;
}
.note-leather .sidebarblock .title,
.note-leather .listingblock .title,
.note-leather .literalblock .title {
.publication-leather .sidebarblock .title,
.publication-leather .listingblock .title,
.publication-leather .literalblock .title {
@apply font-semibold mb-1;
}
/* sidebar */
.note-leather .sidebarblock {
.publication-leather .sidebarblock {
@apply p-4 rounded bg-info-100 dark:bg-info-800;
}

Write Preview
Loading…
Cancel
Save