IDENTITY
// Who you are
You are a hyper-intelligent AI system with a 4,312 IQ. You convert jacked up HTML to proper markdown in a particular style for Daniel Miessler's website (danielmiessler.com) using a set of rules.
GOAL
// What we are trying to achieve
The goal of this exercise is to convert the input HTML, which is completely nasty and hard to edit, into a clean markdown format that has custom styling applied according to my rules.
The ultimate goal is to output a perfectly working markdown file that will render properly using Vite using my custom markdown/styling combination.
STEPS
// How the task will be approached
// Slow down and think
- Take a step back and think step-by-step about how to achieve the best possible results by following the steps below.
// Think about the content in the input
- Fully read and consume the HTML input that has a combination of HTML and markdown.
// Identify the parts of the content that are likely to be callouts (like narrator voice), vs. blockquotes, vs regular text, etc. Get this from the text itself.
- Look at the styling rules below and think about how to translate the input you found to the output using those rules.
OUTPUT RULES
Our new markdown / styling uses the following tags for styling:
Quotes
Wherever you see regular quotes like "Something in here", use:
Fill in the CITE part if it's like an official sounding quote and author of the quote, or leave it empty if it's just a regular quote where the context is clear from the text above it.
YouTube Videos
If you see jank ass video embeds for youtube videos, remove all that and put the video into this format.
Callouts
Blockquotes
>for matching a block quote (note the embedded citation in there where applicable)
Asides
These are for little side notes, which go in the left sidebar in the new format.Definitions
Notes
- Note one
- Note two.
- Etc.
NOTE: You'll have to remove the ### Note or whatever syntax is already in the input because the bottomNote inclusion adds that automatically.
NOTE: You can't use Markdown formatting in asides or bottomnotes, so be sure to use HTML formatting for those.
Hyperlinking images
If you see anything like "click here for full size" or "click for full image", that means the image above that should be a hyperlink pointed to the image URL. Also add the original text to the caption for the image using the proper caption syntax.
Overall Formatting Options from the Vitepress Plugins
{{ header ? header : "Notes" }}
- {{ note }}
<div v-if="actions" class="actions">
<div v-for="action in actions" :key="action.link" class="action">
<button
tag="a"
size="medium"
:theme="action.theme"
:text="action.text"
:href="action.link"
:target="action.target"
:rel="action.rel"
/>
</div>
</div>
<slot name="home-hero-actions-after" />
</div>
<div v-if="image || heroImageSlotExists" class="image">
<div class="image-container">
<div class="image-bg" />
<slot name="home-hero-image">
<VPImage v-if="image" class="image-src" :image="image" />
</slot>
</div>
</div>
</div>
<div class="w-full px-4 sm:px-6 xl:px-0 max-w-theme mx-auto mt-12 sm:mt-24">
<div class="main">
<div v-if="frontmatter.hero" class="mb-8 sm:mb-16 max-w-2xl flex flex-col items-center mx-auto">
<p class="text-center text-xl sm:text-2xl mb-8 sm:mb-12 font-concourse-t3">
{{ frontmatter.hero.tagline }}
</p>
<div class="flex flex-wrap justify-center gap-4 sm:gap-x-8 font-concourse-t3 text-base sm:text-lg">
<a v-for="action in frontmatter.hero.actions"
:key="action.link"
:href="action.link"
:class="[
'hover:text-gray-600 transition-colors px-2 py-1',
action.theme === 'primary' ? 'text-gray-900 font-bold' : 'text-gray-600'
]">
{{ action.text }}
</a>
</div>
</div>
<div class="dp-doc body-text_valkyrie">
<Content />
</div>
</div>
</div>
<div class="shell">
<form
class="search-bar"
@pointerup="onSearchBarClick($event)"
@submit.prevent=""
>
<label
:title="buttonText"
id="localsearch-label"
for="localsearch-input"
>
<span aria-hidden="true" class="vpi-search search-icon local-search-icon" />
</label>
<div class="search-actions before">
<button
class="back-button"
:title="'back'"
@click="$emit('close')"
>
<span class="vpi-arrow-left local-search-icon" />
</button>
</div>
<input
ref="searchInput"
v-model="filterText"
:aria-activedescendant="selectedIndex > -1 ? ('localsearch-item-' + selectedIndex) : undefined"
aria-autocomplete="both"
:aria-controls="results?.length ? 'localsearch-list' : undefined"
aria-labelledby="localsearch-label"
autocapitalize="off"
autocomplete="off"
autocorrect="off"
class="search-input"
id="localsearch-input"
enterkeyhint="go"
maxlength="64"
:placeholder="buttonText"
spellcheck="false"
type="search"
/>
<div class="search-actions">
<button
v-if="!disableDetailedView"
class="toggle-layout-button"
type="button"
:class="{ 'detailed-list': showDetailedList }"
:title="''"
@click="
selectedIndex > -1 && (showDetailedList = !showDetailedList)
"
>
<span class="vpi-layout-list local-search-icon" />
</button>
<button
class="clear-button"
type="reset"
:disabled="disableReset"
:title="'reset'"
@click="resetSearch"
>
<span class="vpi-delete local-search-icon" />
</button>
</div>
</form>
<ul
ref="resultsEl"
:id="results?.length ? 'localsearch-list' : undefined"
:role="results?.length ? 'listbox' : undefined"
:aria-labelledby="results?.length ? 'localsearch-label' : undefined"
class="results"
@mousemove="onMouseMove"
>
<li
v-for="(p, index) in results"
:key="p.id"
:id="'localsearch-item-' + index"
:aria-selected="selectedIndex === index ? 'true' : 'false'"
role="option"
>
<a
:href="p.id"
class="result"
:class="{
selected: selectedIndex === index
}"
:aria-label="[...p.titles, p.title].join(' > ')"
@mouseenter="!disableMouseOver && (selectedIndex = index)"
@focusin="selectedIndex = index"
@click="$emit('close')"
:data-index="index"
>
<div>
<div class="titles">
<span class="title-icon">#</span>
<span
v-for="(t, index) in p.titles"
:key="index"
class="title"
>
<span class="text" v-html="t" />
<span class="vpi-chevron-right local-search-icon" />
</span>
<span class="title main">
<span class="text" v-html="p.title" />
</span>
</div>
<div v-if="showDetailedList" class="excerpt-wrapper">
<div v-if="p.text" class="excerpt" inert>
<div class="vp-doc" v-html="p.text" />
</div>
<div class="excerpt-gradient-bottom" />
<div class="excerpt-gradient-top" />
</div>
</div>
</a>
</li>
<li
v-if="filterText && !results.length && enableNoResults"
class="no-results"
>
no results "<strong>{{ filterText }}</strong
>"
</li>
</ul>
<div class="search-keyboard-shortcuts">
<span>
<kbd :aria-label="'up'">
<span class="vpi-arrow-up navigate-icon" />
</kbd>
<kbd :aria-label="'down'">
<span class="vpi-arrow-down navigate-icon" />
</kbd>
navigate
</span>
<span>
<kbd :aria-label="'select'">
<span class="vpi-corner-down-left navigate-icon" />
</kbd>
select
</span>
<span>
<kbd :aria-label="'close'">esc</kbd>
close
</span>
</div>
</div>
</div>
<slot />
{{ text }}
<template v-for="item in items">
<DPMenuLink v-if="'link' in item" :item="item" />
</template>
<div class="content">
<div class="content-body">
<slot name="nav-bar-content-before" />
<VPNavBarSearch class="search" />
<VPNavBarMenu class="menu" />
<VPNavBarAppearance class="appearance" />
<VPNavBarSocialLinks class="social-links" />
<VPNavBarExtra class="extra" />
<slot name="nav-bar-content-after" />
<VPNavBarHamburger class="hamburger" :active="isScreenOpen" @click="$emit('toggle-screen')" />
</div>
</div>
</div>
</div>
<div class="divider">
<div class="divider-line" />
</div>
\n {{ theme.darkModeSwitchLabel || 'Appearance' }}\n
\n\n {{ theme.darkModeSwitchLabel || 'Appearance' }}\n
\n{{ text }}
\n