Compare commits
4 commits
b1f0116c6a
...
903d146683
| Author | SHA1 | Date | |
|---|---|---|---|
|
903d146683 | ||
|
|
55a18e0b6d | ||
|
|
0f3256febf | ||
|
|
65ad06a7c0 |
21 changed files with 142 additions and 442 deletions
7
LICENSE
7
LICENSE
|
|
@ -0,0 +1,7 @@
|
|||
Copyright 2023-2024 SudoVanilla
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
||||
47
README.md
47
README.md
|
|
@ -1,47 +0,0 @@
|
|||
# Astro Starter Kit: Minimal
|
||||
|
||||
```sh
|
||||
npm create astro@latest -- --template minimal
|
||||
```
|
||||
|
||||
[](https://stackblitz.com/github/withastro/astro/tree/latest/examples/minimal)
|
||||
[](https://codesandbox.io/p/sandbox/github/withastro/astro/tree/latest/examples/minimal)
|
||||
[](https://codespaces.new/withastro/astro?devcontainer_path=.devcontainer/minimal/devcontainer.json)
|
||||
|
||||
> 🧑🚀 **Seasoned astronaut?** Delete this file. Have fun!
|
||||
|
||||
## 🚀 Project Structure
|
||||
|
||||
Inside of your Astro project, you'll see the following folders and files:
|
||||
|
||||
```text
|
||||
/
|
||||
├── public/
|
||||
├── src/
|
||||
│ └── pages/
|
||||
│ └── index.astro
|
||||
└── package.json
|
||||
```
|
||||
|
||||
Astro looks for `.astro` or `.md` files in the `src/pages/` directory. Each page is exposed as a route based on its file name.
|
||||
|
||||
There's nothing special about `src/components/`, but that's where we like to put any Astro/React/Vue/Svelte/Preact components.
|
||||
|
||||
Any static assets, like images, can be placed in the `public/` directory.
|
||||
|
||||
## 🧞 Commands
|
||||
|
||||
All commands are run from the root of the project, from a terminal:
|
||||
|
||||
| Command | Action |
|
||||
| :------------------------ | :----------------------------------------------- |
|
||||
| `npm install` | Installs dependencies |
|
||||
| `npm run dev` | Starts local dev server at `localhost:4321` |
|
||||
| `npm run build` | Build your production site to `./dist/` |
|
||||
| `npm run preview` | Preview your build locally, before deploying |
|
||||
| `npm run astro ...` | Run CLI commands like `astro add`, `astro check` |
|
||||
| `npm run astro -- --help` | Get help using the Astro CLI |
|
||||
|
||||
## 👀 Want to learn more?
|
||||
|
||||
Feel free to check [our documentation](https://docs.astro.build) or jump into our [Discord server](https://astro.build/chat).
|
||||
BIN
bun.lockb
BIN
bun.lockb
Binary file not shown.
File diff suppressed because one or more lines are too long
15
package.json
15
package.json
|
|
@ -15,25 +15,16 @@
|
|||
"@astrojs/markdoc": "^0.11.5",
|
||||
"@astrojs/mdx": "^3.1.9",
|
||||
"@astrojs/node": "^8.3.4",
|
||||
"@astrojs/partytown": "^2.1.2",
|
||||
"@astrojs/vue": "^4.5.2",
|
||||
"@astrojs/vue": "^4.5.3",
|
||||
"@iconoir/vue": "^7.10.0",
|
||||
"@meilisearch/instant-meilisearch": "^0.22.0",
|
||||
"@minpluto/zorn": "^0.4.64",
|
||||
"@playform/compress": "^0.1.6",
|
||||
"@unpic/astro": "^0.0.47",
|
||||
"astro": "^4.16.13",
|
||||
"astro-auto-import": "^0.4.4",
|
||||
"@tryghost/content-api": "^1.11.21",
|
||||
"astro": "^4.16.14",
|
||||
"astro-better-image-service": "^2.0.37",
|
||||
"astro-color-mode": "^0.7.1",
|
||||
"astro-json-element": "^1.1.4",
|
||||
"astro-robots-txt": "^1.0.0",
|
||||
"astro-tooltips": "^0.6.2",
|
||||
"docs-searchbar.js": "^2.5.0",
|
||||
"json-truncate": "^3.0.0",
|
||||
"meilisearch": "^0.45.0",
|
||||
"reshaped": "^3.2.7",
|
||||
"untruncate-json": "^0.0.1",
|
||||
"vue": "^3.5.13"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
|
|
|||
39
search-sh.sh
39
search-sh.sh
|
|
@ -1,39 +0,0 @@
|
|||
# If the docs were updated, this script can update
|
||||
# the databases for Meilisearch.
|
||||
# JSON is used in Astro to create these databases.
|
||||
# For whatever reason, Astro does not generate a
|
||||
# valid JSON response, so the commands below `wget`
|
||||
# will modify the file to remove "'" at the start
|
||||
# and end, along with "\" at each part.
|
||||
|
||||
# So, this scripts helps generates a valid JSON file
|
||||
# for Meiliseach to use.
|
||||
|
||||
# Meilisearch requires each item to have an ID, I don't
|
||||
# setup my stuff like this. So Astro will just assign
|
||||
# a random number to each item using the Math.random()
|
||||
# function. I do not care for assigning the correct number.
|
||||
|
||||
# Example
|
||||
## Script will download:
|
||||
### "[{\"id\":26,\"title\":\"Introduction\"},{\"id\":88,\"title\":\"Self-Hosting\"}]" <-- This is NOT a valid JSON format
|
||||
## Script will output:
|
||||
### [{"id":26,"title":"Introduction"},{"id":88,"title":"Self-Hosting"}] <-- This is a valid JSON format
|
||||
|
||||
wget "http://localhost:2014/docs/json/minpluto.json"
|
||||
mv minpluto.json minpluto-search.json
|
||||
sed -i '$ s/.$//' minpluto-search.json
|
||||
sed -i '0,/./s/^.//' minpluto-search.json
|
||||
sed -i 's|[\]||g' minpluto-search.json
|
||||
|
||||
|
||||
|
||||
wget "http://localhost:2014/docs/json/zorn.json"
|
||||
mv zorn.json zorn-search.json
|
||||
sed -i '$ s/.$//' zorn-search.json
|
||||
sed -i '0,/./s/^.//' zorn-search.json
|
||||
sed -i 's|[\]||g' zorn-search.json
|
||||
|
||||
# Update Meilisearch
|
||||
# Using "node" does not work, use "bun"
|
||||
bun ./search.js
|
||||
13
search.js
13
search.js
|
|
@ -1,13 +0,0 @@
|
|||
import { MeiliSearch } from 'meilisearch'
|
||||
import MinPluto from './minpluto-search.json'
|
||||
import Zorn from './zorn-search.json'
|
||||
|
||||
const client = new MeiliSearch({
|
||||
host: process.env.MeilisearchHost,
|
||||
apiKey: process.env.MeilisearchApiKey
|
||||
})
|
||||
|
||||
client.index('MinPluto').delete(MinPluto).then((res) => console.log(res))
|
||||
client.index('MinPluto').addDocuments(MinPluto).then((res) => console.log(res))
|
||||
client.index('Zorn').delete(Zorn).then((res) => console.log(res))
|
||||
client.index('Zorn').addDocuments(Zorn).then((res) => console.log(res))
|
||||
|
|
@ -7,9 +7,6 @@ const {
|
|||
Source,
|
||||
Link
|
||||
} = Astro.props
|
||||
|
||||
// Icons
|
||||
import {CheckCircleSolid, XmarkCircleSolid} from '@iconoir/vue'
|
||||
---
|
||||
|
||||
<div class="service">
|
||||
|
|
|
|||
|
|
@ -1,47 +1,91 @@
|
|||
---
|
||||
// Properties
|
||||
const {
|
||||
GetPosts,
|
||||
PrefixSlug
|
||||
} = Astro.props
|
||||
|
||||
|
||||
|
||||
// Sort the posts in descending order (newest to oldest)
|
||||
GetPosts.sort((a, b) => Date.parse(b.data.date) - Date.parse(a.data.date))
|
||||
|
||||
// Show Author in "Recommended Reading"
|
||||
if (Astro.url.pathname = '/blog/recommended-reading/') {
|
||||
var ShowAuthor = true
|
||||
} else {
|
||||
var ShowAuthor = false
|
||||
}
|
||||
|
||||
// Use External URL in "Recommended Reading"
|
||||
if (Astro.url.pathname = '/blog/recommended-reading/') {
|
||||
var ExternalURL = true
|
||||
} else {
|
||||
var ExternalURL = false
|
||||
}
|
||||
import { ghostClient } from "@library/ghost";
|
||||
const posts = await ghostClient.posts
|
||||
.browse({
|
||||
limit: "all",
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error(err);
|
||||
});
|
||||
---
|
||||
|
||||
<div class="posts">
|
||||
{
|
||||
GetPosts.map((post) => (
|
||||
<a href={PrefixSlug + post.data.url + '/'} class="card-post">
|
||||
<img id="bg" src={post.data.image} />
|
||||
<img src={post.data.image} />
|
||||
posts.map((post) => (
|
||||
<a href={"/blog/" + post.slug} class="card-post">
|
||||
<img id="bg" src={post.custom_excerpt.image} />
|
||||
<img src={post.custom_excerpt} />
|
||||
<div class="card-post-content">
|
||||
<p>
|
||||
<strong>{post.data.title}</strong>
|
||||
<strong>{post.title}</strong>
|
||||
</p>
|
||||
{ShowAuthor ?
|
||||
<p id="date">{post.data.author}</p>
|
||||
:
|
||||
<p id="date">{new Date(post.data.date).toLocaleDateString()}</p>
|
||||
}
|
||||
<p id="date">{new Date(post.published_at).toLocaleDateString()}</p>
|
||||
</div>
|
||||
</a>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
.posts {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
|
||||
grid-gap: 12px;
|
||||
.card-post {
|
||||
border-radius: 6px;
|
||||
border: 1px var(--border-color) solid;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
&:hover {
|
||||
border-color: var(--border-color-hover);
|
||||
}
|
||||
img {
|
||||
width: 100%;
|
||||
border-radius: 6px 6px 0px 0px;
|
||||
aspect-ratio: 16/9;
|
||||
object-fit: cover;
|
||||
}
|
||||
#bg {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
object-position: center;
|
||||
opacity: 1;
|
||||
z-index: -1;
|
||||
border-radius: 8px;
|
||||
}
|
||||
.card-post-content {
|
||||
padding: 12px 16px 32px 16px;
|
||||
backdrop-filter: blur(24px) brightness(0.3);
|
||||
height: 100%;
|
||||
border-radius: 0px 0px 6px 6px;
|
||||
p {
|
||||
margin: 0px;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
}
|
||||
#date {
|
||||
font-size: 12px;
|
||||
text-align: right;
|
||||
color: gray;
|
||||
font-weight: normal;
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
right: 0px;
|
||||
margin: 6px 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<br />
|
||||
<style>
|
||||
body {
|
||||
background-color: black;
|
||||
color: white;
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,199 +0,0 @@
|
|||
---
|
||||
// Components
|
||||
import MeiliSearch from "@components/docs/search";
|
||||
|
||||
// Is this thing on?
|
||||
let EnableSearch = true
|
||||
---
|
||||
|
||||
{EnableSearch ?
|
||||
<backdrop id="search-modal"/>
|
||||
<div class="search-modal">
|
||||
<MeiliSearch client:load/>
|
||||
</div>
|
||||
:
|
||||
null
|
||||
}
|
||||
|
||||
<script is:inline>
|
||||
/*
|
||||
@licstart The following is the entire license notice for the
|
||||
JavaScript code in this page.
|
||||
|
||||
Copyright (C) 2024 SudoVanilla
|
||||
|
||||
The JavaScript code in this page is free software: you can
|
||||
redistribute it and/or modify it under the terms of the GNU
|
||||
General Public License (GNU GPL) as published by the Free Software
|
||||
Foundation, either version 3 of the License, or (at your option)
|
||||
any later version. The code is distributed WITHOUT ANY WARRANTY;
|
||||
without even the implied warranty of MERCHANTABILITY or FITNESS
|
||||
FOR A PARTICULAR PURPOSE. See the GNU GPL for more details.
|
||||
|
||||
As additional permission under GNU GPL version 3 section 7, you
|
||||
may distribute non-source (e.g., minimized or compacted) forms of
|
||||
that code without the copy of the GNU GPL normally required by
|
||||
section 4, provided you include this license notice and a URL
|
||||
through which recipients can access the Corresponding Source.
|
||||
|
||||
|
||||
@licend The above is the entire license notice
|
||||
for the JavaScript code in this page.
|
||||
*/
|
||||
function ToggleSearch() {
|
||||
var SearchModal = document.querySelector(".search-modal");
|
||||
if (SearchModal.style.display === "block") {
|
||||
SearchModal.style.display = "none";
|
||||
} else {
|
||||
SearchModal.style.display = "block";
|
||||
document.querySelector(".ais-SearchBox-input").focus();
|
||||
}
|
||||
}
|
||||
function ToggleSearchBackdrop() {
|
||||
var SearchModalBackdrop = document.querySelector(
|
||||
"backdrop#search-modal",
|
||||
);
|
||||
if (SearchModalBackdrop.style.display === "block") {
|
||||
SearchModalBackdrop.style.display = "none";
|
||||
} else {
|
||||
SearchModalBackdrop.style.display = "block";
|
||||
document.querySelector(".ais-SearchBox-input").focus();
|
||||
}
|
||||
}
|
||||
function ToggleSearchKeypress(e) {
|
||||
if (e.ctrlKey && e.code === "Slash") {
|
||||
ToggleSearch();
|
||||
ToggleSearchBackdrop();
|
||||
}
|
||||
}
|
||||
function ToggleSearchOnclick() {
|
||||
ToggleSearch()
|
||||
ToggleSearchBackdrop()
|
||||
}
|
||||
document.addEventListener("keyup", ToggleSearchKeypress, false);
|
||||
</script>
|
||||
|
||||
<style lang="scss" is:global>
|
||||
backdrop {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 51;
|
||||
backdrop-filter: blur(6px) contrast(0.9);
|
||||
}
|
||||
.search-modal {
|
||||
position: fixed;
|
||||
top: 160px;
|
||||
left: 50%;
|
||||
transform: translate(-50%);
|
||||
background: #131212;
|
||||
max-width: 600px;
|
||||
width: 100%;
|
||||
border-radius: 10px;
|
||||
border: 1px var(--border-color) solid;
|
||||
z-index: 52;
|
||||
padding: 12px;
|
||||
display: none;
|
||||
.ais-Hits {
|
||||
margin-top: 32px;
|
||||
}
|
||||
.ais-Hits-list {
|
||||
list-style: none;
|
||||
padding: 70px 0px 0px 0px;
|
||||
overflow: scroll;
|
||||
max-height: 400px;
|
||||
margin: -44px 0px -12px 0px;
|
||||
}
|
||||
.ais-SearchBox-form {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 6px;
|
||||
button {
|
||||
display: none;
|
||||
color: white;
|
||||
fill: white;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
aspect-ratio: 1;
|
||||
border-radius: 3rem;
|
||||
border: 1px var(--border-color) solid;
|
||||
svg {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
}
|
||||
}
|
||||
.ais-SearchBox-input {
|
||||
border-bottom: 1px var(--border-color) solid !important;
|
||||
border-radius: 6px 6px 0px 0px !important;
|
||||
padding: 16px 12px !important;
|
||||
border: none;
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
z-index: 53;
|
||||
margin: -12px;
|
||||
font-size: 24px;
|
||||
background: transparent;
|
||||
backdrop-filter: blur(12px) contrast(0.8);
|
||||
&:focus {
|
||||
border-bottom: 1px var(--border-color-hover) solid !important;
|
||||
outline: none;
|
||||
}
|
||||
&:hover {
|
||||
border-bottom: 1px var(--border-color-hover) solid !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
.search.document-item {
|
||||
border: 1px var(--border-color) solid;
|
||||
border-radius: 6px;
|
||||
padding: 6px 12px;
|
||||
font-size: 14px;
|
||||
margin-top: 6px;
|
||||
text-decoration: none;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
h2,
|
||||
p {
|
||||
margin: 6px;
|
||||
}
|
||||
p {
|
||||
overflow: scroll;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
max-height: 60px;
|
||||
pointer-events: none;
|
||||
mask-image: linear-gradient(#000 75%, transparent);
|
||||
}
|
||||
.item-title {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.item-project {
|
||||
overflow: inherit;
|
||||
height: inherit;
|
||||
width: inherit;
|
||||
max-width: inherit;
|
||||
max-height: inherit;
|
||||
mask-image: inherit;
|
||||
|
||||
background: rgb(69, 63, 63);
|
||||
padding: 6px 12px;
|
||||
border-radius: 6px;
|
||||
font-size: 12px;
|
||||
}
|
||||
.item-tags {
|
||||
font-size: 10px;
|
||||
opacity: 0.5;
|
||||
}
|
||||
&:hover {
|
||||
background: rgb(69, 63, 63);
|
||||
border: 1px var(--border-color-hover) solid;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,34 +0,0 @@
|
|||
// ew, React ;-;
|
||||
import React from 'react'
|
||||
|
||||
// Meilisearch Components
|
||||
import { InstantSearch, SearchBox, Hits, Highlight } from 'react-instantsearch'
|
||||
import { instantMeiliSearch } from '@meilisearch/instant-meilisearch'
|
||||
|
||||
|
||||
const { searchClient } = instantMeiliSearch(
|
||||
'http://localhost:7700',
|
||||
'aSampleMasterKe1'
|
||||
)
|
||||
|
||||
const App = () => (
|
||||
<InstantSearch
|
||||
indexName="MinPluto"
|
||||
searchClient={searchClient}
|
||||
>
|
||||
<SearchBox value={"Search"}/>
|
||||
<Hits hitComponent={Documents} />
|
||||
</InstantSearch>
|
||||
)
|
||||
|
||||
const Documents = ({hit}) => (
|
||||
<a className='search document-item' href={hit.link}>
|
||||
<div className='item-title'>
|
||||
<h2><Highlight attribute="title" hit={hit}/></h2>
|
||||
<p className='item-project'>{hit.project}</p>
|
||||
</div>
|
||||
<p><Highlight attribute="content" hit={hit}/></p>
|
||||
</a>
|
||||
)
|
||||
|
||||
export default App
|
||||
|
|
@ -4,8 +4,7 @@ const {
|
|||
title,
|
||||
developer,
|
||||
homepage,
|
||||
source,
|
||||
screenshot
|
||||
source
|
||||
} = Astro.props
|
||||
---
|
||||
|
||||
|
|
|
|||
|
|
@ -1,8 +0,0 @@
|
|||
---
|
||||
const {
|
||||
Alt,
|
||||
Source
|
||||
} = Astro.props;
|
||||
---
|
||||
|
||||
<img alt={Alt} src={Source} loading="lazy" decoding="async"/>
|
||||
3
src/env.d.ts
vendored
3
src/env.d.ts
vendored
|
|
@ -1,2 +1,5 @@
|
|||
/// <reference path="../.astro/types.d.ts" />
|
||||
/// <reference types="astro/client" />
|
||||
interface ImportMetaEnv {
|
||||
readonly CONTENT_API_KEY: string;
|
||||
}
|
||||
|
|
@ -7,9 +7,6 @@ const {
|
|||
// Layout
|
||||
import Default from "@layouts/Default.astro";
|
||||
|
||||
// Components
|
||||
import Sidebar from "@components/docs/sidebar.astro";
|
||||
|
||||
// Icons
|
||||
import {
|
||||
WarningTriangleSolid
|
||||
|
|
|
|||
7
src/library/ghost.ts
Normal file
7
src/library/ghost.ts
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
import GhostContentAPI from '@tryghost/content-api'
|
||||
|
||||
export const ghostClient = new GhostContentAPI({
|
||||
url: 'https://blog.ghost.sudovanilla.org',
|
||||
key: import.meta.env.CONTENT_API_KEY,
|
||||
version: 'v5.0',
|
||||
})
|
||||
|
|
@ -2,34 +2,60 @@
|
|||
// Layout
|
||||
import Default from "@layouts/Default.astro";
|
||||
|
||||
// Components
|
||||
import Hero from "@components/Hero.astro";
|
||||
import Heading from "@components/Heading.astro";
|
||||
import Posts from "@components/blog/posts.astro";
|
||||
import LargeCard from "@components/Feature.astro";
|
||||
import {Zorn} from "@minpluto/zorn"
|
||||
// Fetch Post (Ghost)
|
||||
import { ghostClient } from "@library/ghost";
|
||||
|
||||
export async function getStaticPaths() {
|
||||
const posts = await ghostClient.posts
|
||||
.browse({
|
||||
limit: "all",
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error(err);
|
||||
});
|
||||
|
||||
return posts.map((post) => {
|
||||
return {
|
||||
params: {
|
||||
slug: post.slug,
|
||||
},
|
||||
props: {
|
||||
post: post,
|
||||
},
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
const { post } = Astro.props;
|
||||
export const prerender = true;
|
||||
|
||||
// Icons
|
||||
import { Calendar } from "@iconoir/vue";
|
||||
|
||||
const Id = Astro.url.href.split("?postid=").pop();
|
||||
const GhostPostFetch = 'https://blog.ghost.sudovanilla.org/ghost/api/content/posts/' + Id + '/?key=bef2ed15d9e38f7703be9412b3'
|
||||
const GhostPostFetch =
|
||||
"https://blog.ghost.sudovanilla.org/ghost/api/content/posts/" +
|
||||
Id +
|
||||
"/?key=bef2ed15d9e38f7703be9412b3";
|
||||
const GhostPostResponse = await fetch(GhostPostFetch);
|
||||
const GhostPost = await GhostPostResponse.json();
|
||||
---
|
||||
|
||||
|
||||
<Default MobileTitle="Blog" NoSubHeader>
|
||||
<slot slot="body">
|
||||
<div class="blog-post">
|
||||
<img width="100%" class="blog-banner" src={GhostPost.posts[0].custom_excerpt} />
|
||||
<h1>{GhostPost.posts[0].title}</h1>
|
||||
<img
|
||||
width="100%"
|
||||
class="blog-banner"
|
||||
src={post.custom_excerpt}
|
||||
/>
|
||||
<h1>{post.title}</h1>
|
||||
<p id="date">
|
||||
<Calendar />
|
||||
{new Date(GhostPost.posts[0].published_at).toLocaleDateString()}
|
||||
{new Date(post.published_at).toLocaleDateString()}
|
||||
</p>
|
||||
<div class="blog-post-content">
|
||||
<Fragment set:html={GhostPost.posts[0].html}/>
|
||||
<Fragment set:html={post.html} />
|
||||
</div>
|
||||
</div>
|
||||
</slot>
|
||||
|
|
|
|||
|
|
@ -3,11 +3,7 @@
|
|||
import Default from "@layouts/Default.astro";
|
||||
|
||||
// Components
|
||||
import Hero from "@components/Hero.astro";
|
||||
import Heading from "@components/Heading.astro";
|
||||
import Posts from "@components/blog/posts.astro";
|
||||
import LargeCard from "@components/Feature.astro";
|
||||
import {Zorn} from "@minpluto/zorn"
|
||||
|
||||
// List Posts
|
||||
const GhostFetch = 'https://blog.ghost.sudovanilla.org/ghost/api/content/posts/?key=bef2ed15d9e38f7703be9412b3'
|
||||
|
|
@ -20,18 +16,7 @@ import { BookmarkBook, ReportColumns } from "@iconoir/vue";
|
|||
|
||||
<Default MobileTitle="SudoVanilla" NoSubHeader>
|
||||
<Fragment slot="body">
|
||||
<div class="posts">
|
||||
{Ghost.posts.map((post) =>
|
||||
<a href={'/blog/' + post.slug + '?postid=' + post.id} class="card-post">
|
||||
<img id="bg" src={post.custom_excerpt.image} />
|
||||
<img src={post.custom_excerpt} />
|
||||
<div class="card-post-content">
|
||||
<p><strong>{post.title}</strong></p>
|
||||
<p id="date">{new Date(post.published_at).toLocaleDateString()}</p>
|
||||
</div>
|
||||
</a>
|
||||
)}
|
||||
</div>
|
||||
<Posts/>
|
||||
</Fragment>
|
||||
</Default>
|
||||
|
||||
|
|
|
|||
|
|
@ -7,12 +7,6 @@ import Hero from "@components/Hero.astro";
|
|||
import Heading from "@components/Heading.astro";
|
||||
import Posts from "@components/blog/posts.astro";
|
||||
import LargeCard from "@components/Feature.astro";
|
||||
import {Zorn} from "@minpluto/zorn"
|
||||
|
||||
// List Posts
|
||||
const GhostFetch = 'https://blog.ghost.sudovanilla.org/ghost/api/content/posts/?key=bef2ed15d9e38f7703be9412b3'
|
||||
const GhostResponse = await fetch(GhostFetch);
|
||||
const Ghost = await GhostResponse.json();
|
||||
|
||||
// Icons
|
||||
import { BookmarkBook, ReportColumns } from "@iconoir/vue";
|
||||
|
|
@ -32,18 +26,7 @@ import { BookmarkBook, ReportColumns } from "@iconoir/vue";
|
|||
<BookmarkBook width={32} height={32} />
|
||||
</slot>
|
||||
</Heading>
|
||||
<div class="posts">
|
||||
{Ghost.posts.map((post) =>
|
||||
<a href={'/blog/' + post.slug + '?postid=' + post.id} class="card-post">
|
||||
<img id="bg" src={post.custom_excerpt.image} />
|
||||
<img src={post.custom_excerpt} />
|
||||
<div class="card-post-content">
|
||||
<p><strong>{post.title}</strong></p>
|
||||
<p id="date">{new Date(post.published_at).toLocaleDateString()}</p>
|
||||
</div>
|
||||
</a>
|
||||
)}
|
||||
</div>
|
||||
<Posts/>
|
||||
<Heading Title="Projects" Description="What I've Made">
|
||||
<slot slot="icon">
|
||||
<ReportColumns width={32} height={32} />
|
||||
|
|
|
|||
|
|
@ -5,6 +5,9 @@
|
|||
"@components/*": [
|
||||
"src/components/*"
|
||||
],
|
||||
"@library/*": [
|
||||
"src/library/*"
|
||||
],
|
||||
"@layouts/*": [
|
||||
"src/layouts/*"
|
||||
],
|
||||
|
|
|
|||
|
|
@ -1 +0,0 @@
|
|||
[{"id":75,"title":"Introduction","body":"**Zorn is currently in beta stages. Not everything listed below, as in it’s feature set, is not not done or hasn’t been worked on yet.**nn## IntroductionnnZorn is a customizable HTML5 video player. The player is originally built for a SudoVanilla project called MinPluto, a privacy frontend for YouTube.nn### What is a HTML5 Video Player?nnHTML5 introduced the video player element in the late 2010s, which is embeded as `<video>`. It was intended by the creators of it to be the new standard to show video content on the web, instead of Adobe Flash which reached end-of-life in 2020. So, as of 2020, the HTML5 video is the only widely supported video playerback technology for modern browsers, with the Flash plugin being phased out.nnYou can see this in your browser as the built-in video player by [viewing this video](https://sudovanilla.com/content/videos/webm/Ennie-and-Yoyki.webm) or viewing in it’s own tab.nn### Why not use the built-in player?nnWhile you can build website or a video platform and having your visitors rely on their web browser’s built-in video player, it can be quite limited if you want or your visitors want certain features. Features such as quality selector, subtitles, seek, and more. The built-in player does not, usually, include those. Another reason is why a company or a project may want to use a custom player such as Zorn is to have a curated player for their website that fits the style and needs.n","url":"/docs/zorn/introduction"}]
|
||||
Loading…
Reference in a new issue