feat: expired certs blog

sreez/src/app.rs

@@ -7,6 +7,7 @@ use chrono::Utc;
 use crate::config::get_discord_webhook_url;
 use crate::pages::ShortLandingPage;
 use crate::pages::OkdInstallationOverview1;
+use crate::pages::OkdRecoverFromExpiredCerts;
 use crate::pages::HomePage;
 use crate::pages::InitialOffer;
 use crate::components::Matomo;
@@ -34,6 +35,7 @@ pub fn App() -> impl IntoView {
                     <Route path="/home-page" view=HomePage/>
                     <Route path="/initial-offer" view=InitialOffer/>
                     <Route path="/okd-installation-overview-1" view=OkdInstallationOverview1/>
+                    <Route path="/okd-recover-from-expired-certs" view=OkdRecoverFromExpiredCerts/>
                     <Route path="/*any" view=NotFound/>
                 </Routes>
             </main>

sreez/src/pages/mod.rs

@@ -2,7 +2,9 @@ mod home_page;
 mod initial_offer;
 mod short_landing_page;
 mod okd_installation_overview_1;
+mod okd_recover_from_expired_certs;
 pub use short_landing_page::*;
 pub use home_page::*;
 pub use initial_offer::*;
 pub use okd_installation_overview_1::*;
+pub use okd_recover_from_expired_certs::*;

sreez/style/main.scss

@@ -1,3 +1,7 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
 @font-face {
   font-family: "Fira Mono";
   src:
@@ -513,6 +517,92 @@ ol.huge-list-markers li{
   max-height: 900px;
 }
 
+.code-block {
+  background-color: #2d2d2d;  // Dark background color
+  color: #f8f8f2;  // Light text color
+  padding: 1rem;  // Padding around the code block
+  margin: 4rem 2.5rem;
+  border-radius: 0.5rem;  // Rounded corners
+  overflow-x: auto;  // Horizontal scroll for long lines
+  font-family: 'Courier New', Courier, monospace;  // Monospace font
+  font-size: 1rem;
+}
+
+.code-block .token.comment,
+.code-block .token.prolog,
+.code-block .token.doctype,
+.code-block .token.cdata {
+  color: #75715e;  // Color for comments
+}
+
+.code-block .token.punctuation {
+  color: #f8f8f2;  // Color for punctuation
+}
+
+.code-block .token.namespace {
+  opacity: .7;  // Reduced opacity for namespaces
+}
+
+.code-block .token.property,
+.code-block .token.tag,
+.code-block .token.constant,
+.code-block .token.symbol,
+.code-block .token.deleted {
+  color: #f92672;  // Color for properties, tags, etc.
+}
+
+.code-block .token.boolean,
+.code-block .token.number {
+  color: #ae81ff;  // Color for booleans and numbers
+}
+
+.code-block .token.selector,
+.code-block .token.attr-name,
+.code-block .token.string,
+.code-block .token.char,
+.code-block .token.builtin,
+.code-block .token.inserted {
+  color: #a6e22e;  // Color for selectors, attributes, etc.
+}
+
+.code-block .token.operator,
+.code-block .token.entity,
+.code-block .token.url,
+.code-block .language-css .token.string,
+.code-block .style .token.string,
+.code-block .token.variable {
+  color: #f8f8f2;  // Color for operators, entities, URLs, etc.
+}
+
+.code-block .token.atrule,
+.code-block .token.attr-value,
+.code-block .token.function,
+.code-block .token.class-name {
+  color: #e6db74;  // Color for at-rules, attribute values, etc.
+}
+
+.code-block .token.keyword {
+  color: #66d9ef;  // Color for keywords
+}
+
+.code-block .token.regex,
+.code-block .token.important {
+  color: #fd971f;  // Color for regex and important
+}
+
+.code-block .token.important,
+.code-block .token.bold {
+  font-weight: bold;  // Bold font weight for important and bold
+}
+
+.code-block .token.italic {
+  font-style: italic;  // Italic font style
+}
+
+.code-block .token.entity {
+  cursor: help;  // Cursor style for entities
+}
+
 @media screen and (max-width: 768px) {
   .sm-margin-top-2 {
     margin-top: 2rem;