diff --git a/bun.lockb b/bun.lockb index 2c8ca85..1e44f84 100755 Binary files a/bun.lockb and b/bun.lockb differ diff --git a/package.json b/package.json index 9c20233..8683305 100644 --- a/package.json +++ b/package.json @@ -5,6 +5,7 @@ "@sveltejs/adapter-auto": "^3.0.0", "@sveltejs/kit": "^2.0.0", "@sveltejs/vite-plugin-svelte": "^3.0.0", + "@tailwindcss/typography": "^0.5.12", "autoprefixer": "^10.4.19", "postcss": "^8.4.38", "prettier": "^3.1.1", @@ -29,6 +30,7 @@ }, "type": "module", "dependencies": { - "@sveltejs/enhanced-img": "^0.2.0" + "@sveltejs/enhanced-img": "^0.2.0", + "svelte-markdown": "^0.4.1" } } diff --git a/src/app.css b/src/app.css index 10d594c..e30be15 100644 --- a/src/app.css +++ b/src/app.css @@ -15,7 +15,7 @@ body { } .hero { - background-image: url(/background.jpg); + background-image: url(/img/background.jpg); background-repeat: no-repeat; background-attachment: fixed; background-position: center; diff --git a/src/lib/blog.json b/src/lib/blog.json index 646d30e..bcb79b8 100644 --- a/src/lib/blog.json +++ b/src/lib/blog.json @@ -1,5 +1,17 @@ [ - { "id": 1, "slug": "hello-world", "title": "Hello, World!", "image": "/img/blogtest1.gif" }, - { "id": 2, "slug": "hardware", "title": "Hardware", "image": "/img/blogtest2.gif" }, - { "id": 3, "slug": "test-post", "title": "Test Post", "image": "/img/blogtest3.gif" } + { + "slug": "hello-world", + "title": "Hello, World!", + "image": "/img/blog/hello-world.gif" + }, + { + "slug": "hardware", + "title": "Hardware", + "image": "/img/blog/hardware.gif" + }, + { + "slug": "test-post", + "title": "Test Post", + "image": "/img/blog/test-post.gif" + } ] diff --git a/src/lib/components/Footer.svelte b/src/lib/components/Footer.svelte index eda692f..1506d72 100644 --- a/src/lib/components/Footer.svelte +++ b/src/lib/components/Footer.svelte @@ -69,7 +69,7 @@ class="flex space-x-0.5 text-[#8c52ff] underline underline-offset-[3px]" >
- +

Coolify

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index bc3cf65..ca04994 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -102,13 +102,13 @@
- - - - + + + - - + +
diff --git a/src/routes/blog/+page.svelte b/src/routes/blog/+page.svelte index dff933b..cbeafed 100644 --- a/src/routes/blog/+page.svelte +++ b/src/routes/blog/+page.svelte @@ -21,10 +21,8 @@ while (page.length < 16) { page.push({ - id: -1, - title: '', - image: '', - slug: '' + // @ts-ignore + filler: true }); } @@ -45,7 +43,7 @@
{#key posts} {#each posts as post, i} - {#if post.id === -1} + {#if post.filler} {:else} diff --git a/src/routes/blog/[slug]/+page.js b/src/routes/blog/[slug]/+page.js new file mode 100644 index 0000000..4ea6a99 --- /dev/null +++ b/src/routes/blog/[slug]/+page.js @@ -0,0 +1,5 @@ +export function load({ params }) { + return { + slug: params.slug + }; +} diff --git a/src/routes/blog/[slug]/+page.svelte b/src/routes/blog/[slug]/+page.svelte new file mode 100644 index 0000000..75ade24 --- /dev/null +++ b/src/routes/blog/[slug]/+page.svelte @@ -0,0 +1,46 @@ + + +
+
+
+
+

+ {thisPost?.title} +

+
+
+
+ + + + {#key markdown} +
+ +
+ {/key} +
diff --git a/static/blog/hardware.md b/static/blog/hardware.md new file mode 100644 index 0000000..213ee11 --- /dev/null +++ b/static/blog/hardware.md @@ -0,0 +1 @@ +There doesn't appear to be anything here yet... diff --git a/static/blog/hello-world.md b/static/blog/hello-world.md new file mode 100644 index 0000000..213ee11 --- /dev/null +++ b/static/blog/hello-world.md @@ -0,0 +1 @@ +There doesn't appear to be anything here yet... diff --git a/static/blog/test-post.md b/static/blog/test-post.md new file mode 100644 index 0000000..7dae036 --- /dev/null +++ b/static/blog/test-post.md @@ -0,0 +1,281 @@ +## Overview + +### Philosophy + +Markdown is intended to be as easy-to-read and easy-to-write as is feasible. + +Readability, however, is emphasized above all else. A Markdown-formatted +document should be publishable as-is, as plain text, without looking +like it's been marked up with tags or formatting instructions. While +Markdown's syntax has been influenced by several existing text-to-HTML +filters -- including [Setext](http://docutils.sourceforge.net/mirror/setext.html), [atx](http://www.aaronsw.com/2002/atx/), [Textile](http://textism.com/tools/textile/), [reStructuredText](http://docutils.sourceforge.net/rst.html), +[Grutatext](http://www.triptico.com/software/grutatxt.html), and [EtText](http://ettext.taint.org/doc/) -- the single biggest source of +inspiration for Markdown's syntax is the format of plain text email. + +## Block Elements + +### Paragraphs and Line Breaks + +A paragraph is simply one or more consecutive lines of text, separated +by one or more blank lines. (A blank line is any line that looks like a +blank line -- a line containing nothing but spaces or tabs is considered +blank.) Normal paragraphs should not be indented with spaces or tabs. + +The implication of the "one or more consecutive lines of text" rule is +that Markdown supports "hard-wrapped" text paragraphs. This differs +significantly from most other text-to-HTML formatters (including Movable +Type's "Convert Line Breaks" option) which translate every line break +character in a paragraph into a `
` tag. + +When you _do_ want to insert a `
` break tag using Markdown, you +end a line with two or more spaces, then type return. + +### Headers + +Markdown supports two styles of headers, [Setext] [1] and [atx] [2]. + +Optionally, you may "close" atx-style headers. This is purely +cosmetic -- you can use this if you think it looks better. The +closing hashes don't even need to match the number of hashes +used to open the header. (The number of opening hashes +determines the header level.) + +### Blockquotes + +Markdown uses email-style `>` characters for blockquoting. If you're +familiar with quoting passages of text in an email message, then you +know how to create a blockquote in Markdown. It looks best if you hard +wrap the text and put a `>` before every line: + +> This is a blockquote with two paragraphs. Lorem ipsum dolor sit amet, +> consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus. +> Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus. +> +> Donec sit amet nisl. Aliquam semper ipsum sit amet velit. Suspendisse +> id sem consectetuer libero luctus adipiscing. + +Markdown allows you to be lazy and only put the `>` before the first +line of a hard-wrapped paragraph: + +> This is a blockquote with two paragraphs. Lorem ipsum dolor sit amet, +> consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus. +> Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus. + +> Donec sit amet nisl. Aliquam semper ipsum sit amet velit. Suspendisse +> id sem consectetuer libero luctus adipiscing. + +Blockquotes can be nested (i.e. a blockquote-in-a-blockquote) by +adding additional levels of `>`: + +> This is the first level of quoting. +> +> > This is nested blockquote. +> +> Back to the first level. + +Blockquotes can contain other Markdown elements, including headers, lists, +and code blocks: + +> ## This is a header. +> +> 1. This is the first list item. +> 2. This is the second list item. +> +> Here's some example code: +> +> return shell_exec("echo $input | $markdown_script"); + +Any decent text editor should make email-style quoting easy. For +example, with BBEdit, you can make a selection and choose Increase +Quote Level from the Text menu. + +### Lists + +Markdown supports ordered (numbered) and unordered (bulleted) lists. + +Unordered lists use asterisks, pluses, and hyphens -- interchangably +-- as list markers: + +- Red +- Green +- Blue + +is equivalent to: + +- Red +- Green +- Blue + +and: + +- Red +- Green +- Blue + +Ordered lists use numbers followed by periods: + +1. Bird +2. McHale +3. Parish + +It's important to note that the actual numbers you use to mark the +list have no effect on the HTML output Markdown produces. The HTML +Markdown produces from the above list is: + +If you instead wrote the list in Markdown like this: + +1. Bird +1. McHale +1. Parish + +or even: + +3. Bird +1. McHale +1. Parish + +you'd get the exact same HTML output. The point is, if you want to, +you can use ordinal numbers in your ordered Markdown lists, so that +the numbers in your source match the numbers in your published HTML. +But if you want to be lazy, you don't have to. + +To make lists look nice, you can wrap items with hanging indents: + +- Lorem ipsum dolor sit amet, consectetuer adipiscing elit. + Aliquam hendrerit mi posuere lectus. Vestibulum enim wisi, + viverra nec, fringilla in, laoreet vitae, risus. +- Donec sit amet nisl. Aliquam semper ipsum sit amet velit. + Suspendisse id sem consectetuer libero luctus adipiscing. + +But if you want to be lazy, you don't have to: + +- Lorem ipsum dolor sit amet, consectetuer adipiscing elit. + Aliquam hendrerit mi posuere lectus. Vestibulum enim wisi, + viverra nec, fringilla in, laoreet vitae, risus. +- Donec sit amet nisl. Aliquam semper ipsum sit amet velit. + Suspendisse id sem consectetuer libero luctus adipiscing. + +List items may consist of multiple paragraphs. Each subsequent +paragraph in a list item must be indented by either 4 spaces +or one tab: + +1. This is a list item with two paragraphs. Lorem ipsum dolor + sit amet, consectetuer adipiscing elit. Aliquam hendrerit + mi posuere lectus. + + Vestibulum enim wisi, viverra nec, fringilla in, laoreet + vitae, risus. Donec sit amet nisl. Aliquam semper ipsum + sit amet velit. + +2. Suspendisse id sem consectetuer libero luctus adipiscing. + +It looks nice if you indent every line of the subsequent +paragraphs, but here again, Markdown will allow you to be +lazy: + +- This is a list item with two paragraphs. + + This is the second paragraph in the list item. You're + + only required to indent the first line. Lorem ipsum dolor + sit amet, consectetuer adipiscing elit. + +- Another item in the same list. + +To put a blockquote within a list item, the blockquote's `>` +delimiters need to be indented: + +- A list item with a blockquote: + + > This is a blockquote + > inside a list item. + +To put a code block within a list item, the code block needs +to be indented _twice_ -- 8 spaces or two tabs: + +- A list item with a code block: + + + +### Code Blocks + +Pre-formatted code blocks are used for writing about programming or +markup source code. Rather than forming normal paragraphs, the lines +of a code block are interpreted literally. Markdown wraps a code block +in both `
` and `` tags.
+
+To produce a code block in Markdown, simply indent every line of the
+block by at least 4 spaces or 1 tab.
+
+This is a normal paragraph:
+
+    This is a code block.
+
+Here is an example of AppleScript:
+
+    tell application "Foo"
+        beep
+    end tell
+
+A code block continues until it reaches a line that is not indented
+(or the end of the article).
+
+Within a code block, ampersands (`&`) and angle brackets (`<` and `>`)
+are automatically converted into HTML entities. This makes it very
+easy to include example HTML source code using Markdown -- just paste
+it and indent it, and Markdown will handle the hassle of encoding the
+ampersands and angle brackets. For example, this:
+
+    
+
+Regular Markdown syntax is not processed within code blocks. E.g.,
+asterisks are just literal asterisks within a code block. This means
+it's also easy to use Markdown to write about Markdown's own syntax.
+
+```
+tell application "Foo"
+    beep
+end tell
+```
+
+## Span Elements
+
+### Links
+
+Markdown supports two style of links: _inline_ and _reference_.
+
+In both styles, the link text is delimited by [square brackets].
+
+To create an inline link, use a set of regular parentheses immediately
+after the link text's closing square bracket. Inside the parentheses,
+put the URL where you want the link to point, along with an _optional_
+title for the link, surrounded in quotes. For example:
+
+This is [an example](http://example.com/) inline link.
+
+[This link](http://example.net/) has no title attribute.
+
+### Emphasis
+
+Markdown treats asterisks (`*`) and underscores (`_`) as indicators of
+emphasis. Text wrapped with one `*` or `_` will be wrapped with an
+HTML `` tag; double `*`'s or `_`'s will be wrapped with an HTML
+`` tag. E.g., this input:
+
+_single asterisks_
+
+_single underscores_
+
+**double asterisks**
+
+**double underscores**
+
+### Code
+
+To indicate a span of code, wrap it with backtick quotes (`` ` ``).
+Unlike a pre-formatted code block, a code span indicates code within a
+normal paragraph. For example:
+
+Use the `printf()` function.
diff --git a/static/background.jpg b/static/img/background.jpg
similarity index 100%
rename from static/background.jpg
rename to static/img/background.jpg
diff --git a/static/img/blogtest3.gif b/static/img/blog/hardware.gif
similarity index 100%
rename from static/img/blogtest3.gif
rename to static/img/blog/hardware.gif
diff --git a/static/img/blogtest2.gif b/static/img/blog/hello-world.gif
similarity index 100%
rename from static/img/blogtest2.gif
rename to static/img/blog/hello-world.gif
diff --git a/static/img/blogtest1.gif b/static/img/blog/test-post.gif
similarity index 100%
rename from static/img/blogtest1.gif
rename to static/img/blog/test-post.gif
diff --git a/static/buttons/cirro.png b/static/img/buttons/cirro.png
similarity index 100%
rename from static/buttons/cirro.png
rename to static/img/buttons/cirro.png
diff --git a/static/buttons/firefox.gif b/static/img/buttons/firefox.gif
similarity index 100%
rename from static/buttons/firefox.gif
rename to static/img/buttons/firefox.gif
diff --git a/static/buttons/lol.gif b/static/img/buttons/lol.gif
similarity index 100%
rename from static/buttons/lol.gif
rename to static/img/buttons/lol.gif
diff --git a/static/buttons/rovin.png b/static/img/buttons/rovin.png
similarity index 100%
rename from static/buttons/rovin.png
rename to static/img/buttons/rovin.png
diff --git a/static/buttons/split.png b/static/img/buttons/split.png
similarity index 100%
rename from static/buttons/split.png
rename to static/img/buttons/split.png
diff --git a/static/buttons/twopaws.png b/static/img/buttons/twopaws.png
similarity index 100%
rename from static/buttons/twopaws.png
rename to static/img/buttons/twopaws.png
diff --git a/static/icons/coolify-transparent.png b/static/img/icons/coolify-transparent.png
similarity index 100%
rename from static/icons/coolify-transparent.png
rename to static/img/icons/coolify-transparent.png
diff --git a/tailwind.config.js b/tailwind.config.js
index 087d32b..e3350a2 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -20,5 +20,5 @@ export default {
 			}
 		}
 	},
-	plugins: []
+	plugins: [require('@tailwindcss/typography')]
 };