templates/page.html.erb in cosensee-0.6.0 vs templates/page.html.erb in cosensee-0.8.0
- old
+ new
@@ -1,59 +1,115 @@
<!DOCTYPE html>
<html>
<head>
- <meta charset="utf-8"/>
- <meta name="referrer" content="same-origin"/>
- <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0"/>
- <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible"/>
- <meta name="format-detection" content="email=no,telephone=no,address=no,date=no"/>
- <title><%= title %></title>
- <script src="https://cdn.tailwindcss.com"></script>
+ <meta charset="utf-8">
+ <meta name="referrer" content="same-origin">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
+ <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
+ <meta name="format-detection" content="email=no,telephone=no,address=no,date=no">
+ <title><%= title %> | <%= project.name %></title>
+ <link href="./<%= css_dir %>/tailwind.css" rel="stylesheet">
+ <script type="module">
+ import { createSearch } from '/js/search.js';
+ document.addEventListener('alpine:init', () => Alpine.data('searchComponent', createSearch));
+ </script>
+ <script src="https://cdn.jsdelivr.net/npm/alpinejs@3.14.8/dist/cdn.min.js" defer></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.18/dist/katex.min.css" integrity="sha384-veTAhWILPOotXm+kbR5uY7dRamYLJf58I7P+hJhjeuc7hsMAkJHTsPahAl0hBST0" crossorigin="anonymous">
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.18/dist/katex.min.js" integrity="sha384-v6mkHYHfY/4BWq54f7lQAdtIsoZZIByznQ3ZqN38OL4KCsrxo31SLlPiak7cj/Mg" crossorigin="anonymous"></script>
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.18/dist/contrib/auto-render.min.js" integrity="sha384-hCXGrW6PitJEwbkoStFjeJxv+fSOOQKOPbJxSfM6G5sWZjAyWhXiTIIAmQqnlLlh" crossorigin="anonymous"></script>
-
- <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,600,600i,700,700i|Roboto:400,400i,500,500i,700,700i"/>
- <style>
- p.pagetitle {
- display: -webkit-box;
- -webkit-line-clamp: 3;
- -webkit-box-orient: vertical;
- }
- </style>
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,600,600i,700,700i|Roboto:400,400i,500,500i,700,700i">
+ <meta property="og:title" content="<%= title %>">
+ <meta property="og:type" content="article">
+ <meta property="og:url" content="<%= page.full_url(base_url:) %>">
+ <% if page.ogp_image_url %>
+ <meta property="og:image" content="<%= page.ogp_image_url %>">
+ <% end %>
+ <meta property="og:description" content="<%= page.description %>">
+ <meta property="og:site_name" content="<%= project.display_name %>">
+ <meta property="og:locale" content="ja_JP">
+ <meta name="twitter:card" content="summary">
+ <meta name="twitter:title" content="<%= title %>">
+ <meta name="twitter:description" content="<%= page.description %>">
+ <% if page.ogp_image_url %>
+ <meta name="twitter:image" content="<%= page.ogp_image_url %>">
+ <% end %>
</head>
<body class="bg-slate-100">
- <div class="max-w-screen-lg mx-auto p-4 m-4">
- <nav>
- <a href="/"><%= project.name %></a>
- </nav>
- <div class="max-w-screen bg-white">
- <h1 class="text-3xl py-4 my-4"><%= title %></h1>
- <div>
- <%= page&.to_html %>
+ <div class="max-w-screen-lg mx-auto p-4">
+ <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between my-4" x-data="searchComponent">
+ <nav class="my-4 font-extralight text-2xl">
+ <span id="project-name"><a href="/"><%= project.name %></a></span>
+ </nav>
+ <form action="/" method="GET" class="mt-2 sm:mt-0 w-full sm:w-[32rem] relative">
+ <div class="flex">
+ <input
+ id="searchInput"
+ type="text"
+ placeholder="Search..."
+ x-model="query"
+ @input="search"
+ @keydown.escape="clearResults"
+ @click="restoreResults"
+ class="flex-grow px-4 py-2 border rounded-l-md shadow-sm focus:outline-none focus:ring focus:ring-blue-300">
+ </div>
+ <ul id="resultsList" class="absolute bg-white shadow-md mt-2 w-full rounded-md z-10" x-show="results.length > 0" @click.away="results = []">
+ <template x-for="result in results" :key="result.item.link">
+ <li class="px-4 py-2 hover:bg-gray-100 cursor-pointer">
+ <a :href="result.item.link" class="block">
+ <span class="block text-sm font-medium text-ellipsis whitespace-nowrap overflow-hidden" x-text="result.item.title.slice(0, 50)"></span>
+ <p class="text-xs text-gray-500 text-ellipsis whitespace-nowrap overflow-hidden" x-text="result.item.summary.slice(0, 50)"></p>
+ </a>
+ </li>
+ </template>
+ </ul>
+ </form>
+ </div>
+
+ <div class="max-w-screen bg-white p-4">
+ <h1 class="text-3xl mb-8"><%= title %></h1>
+ <div class="leading-7">
+ <%== page&.to_html(project:) %>
</div>
</div>
<div class="grid grid-cols-6 gap-2 py-8">
<div class="bg-blue-400 shadow-md rounded-md aspect-square flex items-center justify-center p-2 overflow-hidden">
<div class="text-lg text-center text-gray-100">
Links<br>🔗
</div>
</div>
- <% project.page_store.find_link_pages_by_title(title).each do |page|%>
+ <% project.page_store.find_link_pages_by_title(title).each do |page| %>
<div class="bg-white shadow-md rounded-md aspect-square flex items-start justify-center p-2 overflow-hidden">
<div class="break-words text-xs w-full">
<a href="<%= page.link_path %>">
- <p class="pagetitle font-bold overflow-hidden"><%= page.title %></p>
+ <p class="line-clamp-3 font-semibold"><%= page.title %></p>
</a>
<a href="<%= page.link_path %>">
- <% page.body_lines.each do |line| %>
- <p class="inline text-xs"><%= line.to_s %></p>
- <% end %>
+ <p class="inline text-xs"><%== page.summary %></p>
</a>
</div>
</div>
<% end %>
</div>
</div>
</body>
+ <script>
+ document.addEventListener('keydown', function(event) {
+ if (window.location.hostname === 'localhost' && event.key === 'o' && event.ctrlKey) {
+ event.preventDefault();
+ const projectName = document.querySelector('#project-name');
+ if (projectName) {
+ const currentPath = window.location.pathname.replace('.html', '');
+ const newUrl = `https://scrapbox.io/${projectName.textContent}${currentPath}`;
+ window.open(newUrl, 'scrapbox');
+ }
+ }
+ });
+ const padding = 20;
+ for (const svg of document.querySelectorAll("svg.svg-text")) {
+ const text = svg.querySelector("text.text");
+ const bbox = text.getBBox();
+ svg.setAttribute("width", bbox.width);
+ svg.setAttribute("height", bbox.height + padding);
+ };
+ </script>
</html>