hackatime/app/views/docs/show.html.erb
2026-01-25 13:11:22 -05:00

115 lines
6.7 KiB
Text

<% content_for :title, "#{@title} - Hackatime Documentation" %>
<% content_for :meta_description, generate_doc_description(@content, @title) %>
<% content_for :meta_keywords, generate_doc_keywords(@doc_path, @title) %>
<% content_for :canonical_url, doc_url(@doc_path) %>
<% content_for :og_type, "article" %>
<% content_for :og_title, "#{@title} - Hackatime Documentation" %>
<!-- JSON-LD Structured Data -->
<% content_for :head do %>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "TechArticle",
"headline": <%= @title.to_json %>,
"description": <%= generate_doc_description(@content, @title).to_json %>,
"url": <%= doc_url(@doc_path).to_json %>,
"dateModified": <%= (File.mtime(safe_docs_path("#{@doc_path}.md")).iso8601 rescue Time.current.iso8601).to_json %>,
"author": {
"@type": "Organization",
"name": "Hack Club",
"url": "https://hackclub.com"
},
"publisher": {
"@type": "Organization",
"name": "Hack Club",
"url": "https://hackclub.com"
},
"mainEntityOfPage": {
"@type": "WebPage",
"@id": <%= doc_url(@doc_path).to_json %>
},
"about": {
"@type": "SoftwareApplication",
"name": "Hackatime",
"description": "Free and open source time tracking alternative to WakaTime"
}
}
</script>
<style>
.prose a {
color: var(--color-primary) !important;
text-decoration: underline !important;
font-weight: 500 !important;
}
.prose a:hover {
color: var(--color-red) !important;
}
</style>
<% end %>
<div class="min-h-screen text-white">
<div class="max-w-6xl mx-auto px-6 py-8">
<nav class="mb-8">
<% @breadcrumbs.each_with_index do |crumb, index| %>
<% if index == @breadcrumbs.length - 1 %>
<span class="text-primary"><%= crumb[:name] %></span>
<% else %>
<% if crumb[:is_link] && crumb[:path] %>
<%= link_to crumb[:name], crumb[:path], class: "text-secondary hover:text-primary" %>
<% else %>
<span class="text-secondary"><%= crumb[:name] %></span>
<% end %>
<span class="text-secondary mx-2">/</span>
<% end %>
<% end %>
</nav>
<div class="bg-dark rounded-lg p-8 mb-8 prose prose-invert prose-lg max-w-none
prose-headings:text-primary prose-headings:font-bold prose-headings:leading-tight
prose-h1:text-4xl prose-h1:mb-6 prose-h1:text-primary prose-h1:mt-0
prose-h2:text-2xl prose-h2:mt-10 prose-h2:mb-4 prose-h2:text-primary prose-h2:border-b prose-h2:border-primary/20 prose-h2:pb-2
prose-h3:text-xl prose-h3:mt-8 prose-h3:mb-3 prose-h3:text-primary
prose-h4:text-lg prose-h4:mt-4 prose-h4:mb-2 prose-h4:text-white prose-h4:font-semibold
prose-p:text-white prose-p:leading-7 prose-p:mb-5
prose-a:text-primary prose-a:hover:text-red prose-a:underline prose-a:font-medium
prose-strong:text-white prose-strong:font-semibold
prose-em:text-secondary prose-em:italic
prose-code:bg-darkless prose-code:text-primary prose-code:px-2 prose-code:py-1 prose-code:rounded prose-code:text-sm prose-code:font-mono
prose-pre:bg-darkless prose-pre:border prose-pre:border-primary/20 prose-pre:rounded-lg prose-pre:p-4 prose-pre:overflow-x-auto
prose-pre:text-white prose-pre:text-sm
prose-blockquote:border-l-4 prose-blockquote:border-primary prose-blockquote:bg-darkless prose-blockquote:pl-6 prose-blockquote:py-4 prose-blockquote:rounded-r-lg
prose-blockquote:text-secondary prose-blockquote:italic prose-blockquote:font-normal prose-blockquote:my-6
prose-ul:text-white prose-ul:mb-4 prose-ul:pl-6
prose-ol:text-white prose-ol:mb-4 prose-ol:pl-6
prose-li:text-white prose-li:mb-3 prose-li:leading-7 prose-li:pl-2
prose-table:border-collapse prose-table:border prose-table:border-primary/20 prose-table:rounded-lg prose-table:overflow-hidden prose-table:my-6
prose-th:bg-darkless prose-th:text-primary prose-th:font-semibold prose-th:p-3 prose-th:border prose-th:border-primary/20
prose-td:text-white prose-td:p-3 prose-td:border prose-td:border-primary/20
prose-img:rounded-lg prose-img:shadow-lg prose-img:mx-auto prose-img:block prose-img:max-w-24 prose-img:h-auto prose-img:my-4
prose-hr:border-primary/20 prose-hr:my-8
[&_ol>li::marker]:text-primary [&_ol>li::marker]:font-semibold
[&_ul>li::marker]:text-primary
[&_ol>li]:mb-3 [&_ol>li]:pl-2
[&_h2:not(:first-child)]:mt-10
[&_h3:not(:first-child)]:mt-8
[&_p_strong:first-child]:text-primary
[&_pre[class*='language-json']]:bg-darkless [&_pre[class*='language-json']]:border [&_pre[class*='language-json']]:border-primary/10
[&_pre[class*='language-bash']]:bg-darkless [&_pre[class*='language-bash']]:border [&_pre[class*='language-bash']]:border-primary/10
[&_img[alt*='PyCharm']]:w-16 [&_img[alt*='PyCharm']]:h-16 [&_img[alt*='PyCharm']]:mx-auto [&_img[alt*='PyCharm']]:block [&_img[alt*='PyCharm']]:my-4
[&_img[alt*='VS_Code']]:w-16 [&_img[alt*='VS_Code']]:h-16 [&_img[alt*='VS_Code']]:mx-auto [&_img[alt*='VS_Code']]:block [&_img[alt*='VS_Code']]:my-4
[&_img[alt*='IntelliJ']]:w-16 [&_img[alt*='IntelliJ']]:h-16 [&_img[alt*='IntelliJ']]:mx-auto [&_img[alt*='IntelliJ']]:block [&_img[alt*='IntelliJ']]:my-4
[&_img[src*='/images/editor-icons/']]:w-16 [&_img[src*='/images/editor-icons/']]:h-16 [&_img[src*='/images/editor-icons/']]:mx-auto [&_img[src*='/images/editor-icons/']]:block [&_img[src*='/images/editor-icons/']]:my-4
[&_.editor-steps]:bg-darkless [&_.editor-steps]:p-6 [&_.editor-steps]:rounded-lg [&_.editor-steps]:my-4
[&_.editor-steps_ol]:m-0
[&_.editor-steps_li]:mb-2">
<%= sanitize @rendered_content, tags: %w[h1 h2 h3 h4 h5 h6 p a ul ol li code pre strong em img div span table thead tbody tr th td hr br blockquote], attributes: %w[href src alt title class id] %>
</div>
<div class="text-center bg-darkless rounded-lg p-6">
<p class="text-secondary">
Found an issue with this page?
<a href="https://github.com/hackclub/hackatime/edit/main/docs/<%= @doc_path %>.md" target="_blank" class="text-primary hover:text-red underline">Edit it on GitHub</a> - we'd love your help making the docs better!
</p>
</div>
</div>
</div>