From 2e20b6536381dad9edf6f0f9d1b82eebf3d7d2af Mon Sep 17 00:00:00 2001 From: prplwtf Date: Sun, 26 May 2024 22:20:50 +0200 Subject: [PATCH] feat `Posts`: Add posts section rendered from a yaml file --- .gitignore | 3 +- configuration/Posts.example.yml | 5 +++ .../elements/MissingConfigurationElement.js | 8 ++--- .../elements/NavigationBarElement.js | 9 ++++++ .../elements/posts/BlogListElement.js | 31 +++++++++++++++++++ src/components/sections/BlogSection.js | 1 + src/configuration/FetchBlogs.js | 24 ++++++++++++++ src/configuration/FetchConfiguration.js | 11 +++---- src/configuration/RenderConfiguration.js | 4 --- src/imports/ImportConfigurations.js | 1 + src/imports/ImportElements.js | 1 + 11 files changed, 82 insertions(+), 16 deletions(-) create mode 100644 configuration/Posts.example.yml create mode 100644 src/components/elements/posts/BlogListElement.js create mode 100644 src/configuration/FetchBlogs.js diff --git a/.gitignore b/.gitignore index 619f628..d4feea9 100644 --- a/.gitignore +++ b/.gitignore @@ -1 +1,2 @@ -configuration/Configuration.yml \ No newline at end of file +configuration/Configuration.yml +configuration/Posts.yml \ No newline at end of file diff --git a/configuration/Posts.example.yml b/configuration/Posts.example.yml new file mode 100644 index 0000000..76d958c --- /dev/null +++ b/configuration/Posts.example.yml @@ -0,0 +1,5 @@ +- Title: Introducing Gravity, a new way to write blogs. + Description: Lorem ipsum or whatever + +- Title: Meet Nebula - Pterodactyl takes flight! + Description: I create stuff! \ No newline at end of file diff --git a/src/components/elements/MissingConfigurationElement.js b/src/components/elements/MissingConfigurationElement.js index 9dad1dc..303abeb 100644 --- a/src/components/elements/MissingConfigurationElement.js +++ b/src/components/elements/MissingConfigurationElement.js @@ -1,11 +1,11 @@ -function MissingConfigurationElement() { +function MissingConfigurationElement(OldConfiguration, NewConfiguration) { return ` -
+

- Configuration.example.yml + ${OldConfiguration}

@@ -17,7 +17,7 @@ function MissingConfigurationElement() {

- Configuration.yml + ${NewConfiguration}

diff --git a/src/components/elements/NavigationBarElement.js b/src/components/elements/NavigationBarElement.js index e0d4392..0701eb2 100644 --- a/src/components/elements/NavigationBarElement.js +++ b/src/components/elements/NavigationBarElement.js @@ -3,8 +3,17 @@ function NavigationBarElement() { if(window.location.hash != "#blog") { ButtonClass = "btn-danger" } + + let ConfigurationReminder = "" + if(ExampleConfiguration) { + ConfigurationReminder = MissingConfigurationElement("Configuration.example.yml", "Configuration.yml") + } + if(ExampleBlogs && window.location.hash == "#blog") { + ConfigurationReminder = MissingConfigurationElement("Posts.example.yml", "Posts.yml") + } return ` + ${ConfigurationReminder}

diff --git a/src/components/elements/posts/BlogListElement.js b/src/components/elements/posts/BlogListElement.js new file mode 100644 index 0000000..ef12cdb --- /dev/null +++ b/src/components/elements/posts/BlogListElement.js @@ -0,0 +1,31 @@ +function BlogListSection() { + let Posts = "" + window.Blogs.forEach(Post => { + Posts = ` + ${Posts} + +
+
+
+
+ + ${Post.Title} + + + ${Post.Description} + +
+
+ +
+
+
+
+ ` + }); + return ` +
+ ${Posts} +
+ ` +} \ No newline at end of file diff --git a/src/components/sections/BlogSection.js b/src/components/sections/BlogSection.js index 56c9ead..06d7f83 100644 --- a/src/components/sections/BlogSection.js +++ b/src/components/sections/BlogSection.js @@ -3,6 +3,7 @@ function BlogSection() { ${NavigationBarElement()}

blog section + ${BlogListSection()}

${FooterElement()} ` diff --git a/src/configuration/FetchBlogs.js b/src/configuration/FetchBlogs.js new file mode 100644 index 0000000..453e811 --- /dev/null +++ b/src/configuration/FetchBlogs.js @@ -0,0 +1,24 @@ +let BlogsURL = "./configuration/Posts.yml" +let ExampleBlogs = false + +async function FetchBlogs() { + var xhr = new XMLHttpRequest() + xhr.open("GET", BlogsURL, true) + xhr.onreadystatechange = async function () { + if (xhr.readyState == 4 && xhr.status == 200) { + var res = jsyaml.load(xhr.responseText) + window.Blogs = res + return; + } + if (xhr.readyState == 4 && xhr.status == 404) { + if(BlogsURL != "./configuration/Posts.example.yml") { + ExampleBlogs = true + BlogsURL = "./configuration/Posts.example.yml" + FetchBlogs() + } else { + return console.error("Posts.yml could not be found!") + } + } + } + xhr.send() +} \ No newline at end of file diff --git a/src/configuration/FetchConfiguration.js b/src/configuration/FetchConfiguration.js index 1fbba70..433c467 100644 --- a/src/configuration/FetchConfiguration.js +++ b/src/configuration/FetchConfiguration.js @@ -1,4 +1,5 @@ let ConfigurationURL = "./configuration/Configuration.yml" +let ExampleConfiguration = false async function FetchConfiguration() { var xhr = new XMLHttpRequest() @@ -12,13 +13,9 @@ async function FetchConfiguration() { } if (xhr.readyState == 4 && xhr.status == 404) { if(ConfigurationURL != "./configuration/Configuration.example.yml") { - ProgressBar(99.99, 5) - App.innerHTML = `${MissingConfigurationElement()}` - setTimeout(() => { - ProgressBar(100) - ConfigurationURL = "./configuration/Configuration.example.yml" - FetchConfiguration() - }, 5000); + ExampleConfiguration = true + ConfigurationURL = "./configuration/Configuration.example.yml" + FetchConfiguration() } else { await RenderConfiguration() return console.error("Configuration.yml could not be found!") diff --git a/src/configuration/RenderConfiguration.js b/src/configuration/RenderConfiguration.js index c7c0def..e8fb343 100644 --- a/src/configuration/RenderConfiguration.js +++ b/src/configuration/RenderConfiguration.js @@ -1,9 +1,5 @@ async function RenderConfiguration() { // Render values - if(!window.Configuration) { - AppTitle.innerHTML = "welcome to gravity" - return; - } AppTitle.innerHTML = window.Configuration.Application.Title || "gravity" return; } \ No newline at end of file diff --git a/src/imports/ImportConfigurations.js b/src/imports/ImportConfigurations.js index f8d63bd..73e68bc 100644 --- a/src/imports/ImportConfigurations.js +++ b/src/imports/ImportConfigurations.js @@ -1,4 +1,5 @@ async function ImportConfigurations() { Import("./src/configuration/RenderConfiguration.js", "RenderConfiguration") Import("./src/configuration/FetchConfiguration.js", "FetchConfiguration", function() { FetchConfiguration() }) + Import("./src/configuration/FetchBlogs.js", "FetchBlogs", function() { FetchBlogs() }) } \ No newline at end of file diff --git a/src/imports/ImportElements.js b/src/imports/ImportElements.js index 619f81a..4737e9d 100644 --- a/src/imports/ImportElements.js +++ b/src/imports/ImportElements.js @@ -5,6 +5,7 @@ async function ImportElements() { { Identifier: "LinkElement", Path: "LinkElement.js" }, { Identifier: "ConnectionElement", Path: "ConnectionElement.js" }, { Identifier: "MissingConfigurationElement", Path: "MissingConfigurationElement.js" }, + { Identifier: "BlogListElement", Path: "posts/BlogListElement.js" }, ] for (let i = Elements.length - 1; i >= 0; i--) {