mirror of
https://github.com/avinal/avinal.github.io.git
synced 2026-07-03 23:30:09 +05:30
add markdown loader
Signed-off-by: Avinal Kumar <avinal.xlvii@gmail.com>
This commit is contained in:
@@ -9,10 +9,14 @@
|
||||
"elm/browser": "1.0.2",
|
||||
"elm/core": "1.0.5",
|
||||
"elm/html": "1.0.0",
|
||||
"elm/http": "2.0.0",
|
||||
"elm/url": "1.0.0",
|
||||
"elm-explorations/markdown": "1.0.0",
|
||||
"hecrj/html-parser": "2.4.0"
|
||||
},
|
||||
"indirect": {
|
||||
"elm/bytes": "1.0.8",
|
||||
"elm/file": "1.0.5",
|
||||
"elm/json": "1.1.3",
|
||||
"elm/parser": "1.1.0",
|
||||
"elm/time": "1.0.0",
|
||||
|
||||
+26
-43
@@ -7,62 +7,45 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="/website/post-style.css">
|
||||
<link rel="stylesheet" href="/website/foo-style.css">
|
||||
<link rel="preload" as="style" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css"
|
||||
crossorigin="anonymous" onload="this.onload=null;this.rel='stylesheet'" />
|
||||
<!-- <link rel="preload" as="style" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css"
|
||||
crossorigin="anonymous" onload="this.onload=null;this.rel='stylesheet'" /> -->
|
||||
<link rel="stylesheet"
|
||||
href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.6.0/build/styles/github-dark.min.css">
|
||||
<script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.6.0/build/highlight.min.js"></script>
|
||||
<title>Document</title>
|
||||
<script src="/website/redirect.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
|
||||
|
||||
<script src="/website/app.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" crossorigin="anonymous"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.7/clipboard.min.js"
|
||||
crossorigin="anonymous"></script>
|
||||
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" crossorigin="anonymous"></script> -->
|
||||
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.7/clipboard.min.js"
|
||||
crossorigin="anonymous"></script> -->
|
||||
<script>
|
||||
var app = Elm.Main.init({ node: document.getElementById("app") });
|
||||
|
||||
$(function () {
|
||||
// copy-btn HTML
|
||||
var btn = "<span class=\"btn-copy tooltipped tooltipped-sw\" aria-label=\"Copy to clipboard!\">";
|
||||
btn += '<i class="far fa-clone"></i>';
|
||||
btn += '</span>';
|
||||
// mount it!
|
||||
$(".highlight table").before(btn);
|
||||
var clip = new ClipboardJS('.btn-copy', {
|
||||
text: function (trigger) {
|
||||
return Array.from(trigger.nextElementSibling.querySelectorAll('.code')).reduce((str, it) => str + it.innerText + '\n', '')
|
||||
}
|
||||
});
|
||||
clip.on('success', function (e) {
|
||||
e.trigger.setAttribute('aria-label', "Copied!");
|
||||
e.clearSelection();
|
||||
})
|
||||
});
|
||||
// $(function () {
|
||||
// // copy-btn HTML
|
||||
// var btn = "<span class=\"btn-copy tooltipped tooltipped-sw\" aria-label=\"Copy to clipboard!\">";
|
||||
// btn += '<i class="far fa-clone"></i>';
|
||||
// btn += '</span>';
|
||||
// // mount it!
|
||||
// $(".highlight table").before(btn);
|
||||
// var clip = new ClipboardJS('.btn-copy', {
|
||||
// text: function (trigger) {
|
||||
// return Array.from(trigger.nextElementSibling.querySelectorAll('.code')).reduce((str, it) => str + it.innerText + '\n', '')
|
||||
// }
|
||||
// });
|
||||
// clip.on('success', function (e) {
|
||||
// e.trigger.setAttribute('aria-label', "Copied!");
|
||||
// e.clearSelection();
|
||||
// })
|
||||
// });
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
<!-- <script type="text/javascript">
|
||||
$(function () {
|
||||
// copy-btn HTML
|
||||
var btn = "<span class=\"btn-copy tooltipped tooltipped-sw\" aria-label=\"Copy to clipboard!\">";
|
||||
btn += '<i class="far fa-clone"></i>';
|
||||
btn += '</span>';
|
||||
// mount it!
|
||||
$(".highlight table").before(btn);
|
||||
var clip = new ClipboardJS('.btn-copy', {
|
||||
text: function (trigger) {
|
||||
return Array.from(trigger.nextElementSibling.querySelectorAll('.code')).reduce((str, it) => str + it.innerText + '\n', '')
|
||||
}
|
||||
});
|
||||
clip.on('success', function (e) {
|
||||
e.trigger.setAttribute('aria-label', "Copied!");
|
||||
e.clearSelection();
|
||||
})
|
||||
})
|
||||
</script> -->
|
||||
</body>
|
||||
|
||||
</html>
|
||||
+80
-130
@@ -1,9 +1,13 @@
|
||||
module Blog exposing (..)
|
||||
|
||||
import Html exposing (..)
|
||||
import Html.Attributes exposing (class)
|
||||
import Html.Attributes exposing (class, placeholder, value)
|
||||
import Html.Events exposing (onClick, onInput)
|
||||
import Html.Parser
|
||||
import Html.Parser.Util
|
||||
import Http exposing (Error(..))
|
||||
import Markdown exposing (defaultOptions)
|
||||
import Url exposing (Protocol(..))
|
||||
|
||||
|
||||
|
||||
@@ -12,6 +16,9 @@ import Html.Parser.Util
|
||||
|
||||
type alias Model =
|
||||
{ blog : Blog
|
||||
, markDownUrl : String
|
||||
, markDown : String
|
||||
, success : Bool
|
||||
}
|
||||
|
||||
|
||||
@@ -30,18 +37,37 @@ type alias Blog =
|
||||
}
|
||||
|
||||
|
||||
view : Model -> Html msg
|
||||
view : Model -> Html Msg
|
||||
view model =
|
||||
div [ class "foo-interface" ]
|
||||
[ div [ class "max-width mx-auto px3 ltr" ]
|
||||
[ div [ class "content index py4" ]
|
||||
(textToHtml postString)
|
||||
[ div [ class "foo-console foo-terminal foo-active" ]
|
||||
[ div [ class "max-width mx-auto px3 ltr" ]
|
||||
[ div
|
||||
[ class "foo-term-story" ]
|
||||
[ input
|
||||
[ placeholder "Enter URL to a markdown file"
|
||||
, value model.markDownUrl
|
||||
, onInput StoreInput
|
||||
]
|
||||
[]
|
||||
, button [ onClick GetMarkdown ] [ text "Get Markdown" ]
|
||||
]
|
||||
, div [ class "content index py4" ]
|
||||
[ if model.success then
|
||||
markdownToHtml model
|
||||
|
||||
else
|
||||
div [ class "foo-error" ] [ text model.markDown ]
|
||||
]
|
||||
]
|
||||
]
|
||||
]
|
||||
|
||||
|
||||
type Msg
|
||||
= Nothing
|
||||
= GetMarkdown
|
||||
| StoreInput String
|
||||
| DataReceived (Result Http.Error String)
|
||||
|
||||
|
||||
init : () -> ( Model, Cmd Msg )
|
||||
@@ -51,10 +77,13 @@ init _ =
|
||||
, url = "my-first-blog-post"
|
||||
, description = "This is my first blog post"
|
||||
, content = "This is the content of my first blog post"
|
||||
, category = "blog"
|
||||
, category = "category"
|
||||
, tags = [ "elm", "blog" ]
|
||||
, date = "2018-01-01"
|
||||
}
|
||||
, markDownUrl = ""
|
||||
, markDown = ""
|
||||
, success = True
|
||||
}
|
||||
, Cmd.none
|
||||
)
|
||||
@@ -63,8 +92,42 @@ init _ =
|
||||
update : Msg -> Model -> ( Model, Cmd Msg )
|
||||
update msg model =
|
||||
case msg of
|
||||
Nothing ->
|
||||
( model, Cmd.none )
|
||||
GetMarkdown ->
|
||||
( model, Http.get { url = model.markDownUrl, expect = Http.expectString DataReceived } )
|
||||
|
||||
DataReceived (Ok data) ->
|
||||
( { model | markDown = data, success = True }, Cmd.none )
|
||||
|
||||
DataReceived (Err err) ->
|
||||
( { model | success = False, markDown = errorToString err }, Cmd.none )
|
||||
|
||||
StoreInput input ->
|
||||
( { model | markDownUrl = input }, Cmd.none )
|
||||
|
||||
|
||||
errorToString : Http.Error -> String
|
||||
errorToString error =
|
||||
case error of
|
||||
BadUrl url ->
|
||||
"The URL " ++ url ++ " was invalid"
|
||||
|
||||
Timeout ->
|
||||
"Unable to reach the server, try again"
|
||||
|
||||
NetworkError ->
|
||||
"Unable to reach the server, check your network connection"
|
||||
|
||||
BadStatus 500 ->
|
||||
"The server had a problem, try again later"
|
||||
|
||||
BadStatus 400 ->
|
||||
"Verify your information and try again"
|
||||
|
||||
BadStatus _ ->
|
||||
"Unknown error"
|
||||
|
||||
BadBody errorMessage ->
|
||||
errorMessage
|
||||
|
||||
|
||||
textToHtml : String -> List (Html.Html msg)
|
||||
@@ -77,124 +140,11 @@ textToHtml text =
|
||||
[]
|
||||
|
||||
|
||||
testString : String
|
||||
testString =
|
||||
"""
|
||||
<div id="header">
|
||||
<a href="/">
|
||||
<div id="logo" style="background-image: url(/images/logo.png);"></div>
|
||||
<div id="title">
|
||||
<h1>Hexo</h1>
|
||||
</div>
|
||||
</a>
|
||||
<div id="nav">
|
||||
<ul>
|
||||
<li class="icon">
|
||||
<a href="#" aria-label="Menu"><i class="fas fa-bars fa-2x"></i></a>
|
||||
</li>
|
||||
<li><a href="/">Home</a></li>
|
||||
<li><a href="/about/">About</a></li>
|
||||
<li><a href="/archives/">Writing</a></li>
|
||||
<li><a target="_blank" rel="noopener" href="http://github.com/probberechts">Projects</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<section id="about">
|
||||
<p>
|
||||
Find me on
|
||||
<a class="icon" target="_blank" rel="noopener" href="http://github.com/probberechts/cactus-dark"
|
||||
aria-label="github">
|
||||
<i class="fab fa-github"></i>
|
||||
</a>
|
||||
<a class="icon" target="_blank" rel="noopener" href="/" aria-label="twitter">
|
||||
<i class="fab fa-twitter"></i>
|
||||
</a>
|
||||
<a class="icon" target="_blank" rel="noopener" href="/" aria-label="facebook">
|
||||
<i class="fab fa-facebook"></i>
|
||||
</a>
|
||||
<a class="icon" target="_blank" rel="noopener" href="/" aria-label="linkedin">
|
||||
<i class="fab fa-linkedin"></i>
|
||||
</a>and
|
||||
<a class="icon" target="_blank" rel="noopener" href="mailto:name@email.com" aria-label="mail">
|
||||
<i class="fas fa-envelope"></i>
|
||||
</a>
|
||||
</p>
|
||||
</section>
|
||||
<section id="writing">
|
||||
<span class="h1"><a href="/archives/">Writing</a></span>
|
||||
<ul class="post-list">
|
||||
<li class="post-item">
|
||||
<div class="meta">
|
||||
<time datetime="2022-09-15T17:21:59.000Z" itemprop="datePublished">2022-09-15</time>
|
||||
</div>
|
||||
<span>
|
||||
<a class="" href="/posts/techtest/hey-world">Hello</a>
|
||||
</span>
|
||||
</li>
|
||||
<li class="post-item">
|
||||
<div class="meta">
|
||||
<time datetime="2022-09-05T17:21:59.000Z" itemprop="datePublished">2022-09-05</time>
|
||||
</div>
|
||||
<span>
|
||||
<a class="" href="/posts/tech/hello-world">Hello World</a>
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
"""
|
||||
|
||||
|
||||
postString : String
|
||||
postString =
|
||||
"""
|
||||
<article class="post" itemscope itemtype="http://schema.org/BlogPosting">
|
||||
<div>
|
||||
|
||||
<h1 class="posttitle" itemprop="name headline">
|
||||
Hello World
|
||||
</h1>
|
||||
|
||||
|
||||
|
||||
<div class="meta">
|
||||
<span class="author" itemprop="author" itemscope itemtype="http://schema.org/Person">
|
||||
<span itemprop="name"></span>
|
||||
</span>
|
||||
|
||||
<div class="postdate">
|
||||
|
||||
<time datetime="2016-11-14T12:19:32.000Z" itemprop="datePublished">2016-11-14</time>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="article-category">
|
||||
<i class="fas fa-archive"></i>
|
||||
<a class="category-link" href="/categories/tech/">tech<span class="category-count">2</span></a>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="content" itemprop="articleBody">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec at dolor a sem consequat facilisis ut et augue. Vestibulum vestibulum lectus erat, id tincidunt sapien laoreet non. Ut nec ante eu lorem posuere fringilla sit amet in tortor.</p>
|
||||
<h2 id="This-is-a-subtitle"><a href="#This-is-a-subtitle" class="headerlink" title="This is a subtitle"></a>This is a subtitle</h2><p>Quisque ac maximus ligula, sed sagittis est. Integer venenatis pellentesque elit. Donec molestie turpis sit amet sodales cursus. Sed at risus cursus, feugiat lacus sit amet, rutrum sem. Vestibulum accumsan dui urna, vel feugiat lectus malesuada id. Quisque in interdum turpis, et pulvinar tortor. Vivamus tincidunt purus eu libero viverra, at posuere dolor gravida.</p>
|
||||
<figure class="highlight python"><figcaption><span>Hello world</span><a target="_blank" rel="noopener" href="http://github.com">hello_world.py</a></figcaption><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">print</span> <span class="string">"Hello World!"</span></span><br><span class="line">=> <span class="string">"Hello World!"</span></span><br></pre></td></tr></table></figure>
|
||||
|
||||
<h2 id="This-is-a-second-subtitle"><a href="#This-is-a-second-subtitle" class="headerlink" title="This is a second subtitle"></a>This is a second subtitle</h2><p>Donec venenatis eu nunc non accumsan. Etiam elementum dapibus urna, ac mattis tortor volutpat a. Pellentesque eu purus metus. Curabitur vel nulla ut odio congue vulputate. Morbi lacinia tellus sit amet facilisis dictum. Nullam a erat felis. Vestibulum nec diam ac nisi pharetra tincidunt. Ut vitae ullamcorper ipsum. Sed vehicula vehicula dolor. Quisque ac tortor a neque scelerisque venenatis.</p>
|
||||
<img src="/assets/wallpaper-878514.jpg" class="" title="Wallpaper">
|
||||
|
||||
<blockquote class="pullquote right"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque hendrerit lacus ut purus iaculis feugiat.</p>
|
||||
</blockquote>
|
||||
|
||||
<p>Mauris quis lorem id arcu lobortis finibus in quis mauris. Cras lacinia neque arcu, id viverra nunc pretium eget. Aenean eu luctus diam. Maecenas blandit eros in fermentum cursus. Pellentesque hendrerit ipsum orci, tempor facilisis est maximus at. Suspendisse potenti. Sed eleifend ullamcorper eleifend. Nullam tincidunt eget ex vitae blandit. Donec molestie iaculis elementum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas in suscipit ex. Integer molestie felis mi, in commodo dolor fermentum a. Cras blandit auctor enim, eu rhoncus turpis ullamcorper id.</p>
|
||||
|
||||
</div>
|
||||
</article>
|
||||
"""
|
||||
markdownToHtml : Model -> Html Msg
|
||||
markdownToHtml model =
|
||||
Markdown.toHtmlWith
|
||||
{ defaultOptions
|
||||
| githubFlavored = Just { tables = True, breaks = False }
|
||||
}
|
||||
[]
|
||||
model.markDown
|
||||
|
||||
+15
-6
@@ -4,7 +4,7 @@ import Blog as Blog
|
||||
import Browser exposing (Document)
|
||||
import Browser.Navigation as Nav
|
||||
import Html exposing (Html, a, div, footer, header, img, li, text, ul)
|
||||
import Html.Attributes exposing (class, href, src)
|
||||
import Html.Attributes exposing (class, href, src, target)
|
||||
import Html.Lazy exposing (lazy)
|
||||
import Splash as Splash
|
||||
import Static as Static
|
||||
@@ -35,10 +35,10 @@ type alias Model =
|
||||
|
||||
{-| Page designs
|
||||
|
||||
BlogPage: Page design for blogs
|
||||
TerminalPage: Page design for terminal
|
||||
StaticPage: Page design for static pages
|
||||
NotFound: Page design for 404 page
|
||||
BlogPage: Page design for blogs
|
||||
TerminalPage: Page design for terminal
|
||||
StaticPage: Page design for static pages
|
||||
NotFound: Page design for 404 page
|
||||
|
||||
-}
|
||||
type Page
|
||||
@@ -106,7 +106,7 @@ viewHeader page =
|
||||
|
||||
_ ->
|
||||
header [ class "foo-logo" ]
|
||||
[ img [ src "/website/logo-static.svg" ]
|
||||
[ img [ src "/website/logo-static.svg", target urlPrefix ]
|
||||
[]
|
||||
]
|
||||
in
|
||||
@@ -220,12 +220,18 @@ type Route
|
||||
| Static
|
||||
|
||||
|
||||
|
||||
-- | BlogPost String String
|
||||
|
||||
|
||||
parser : Parser (Route -> a) a
|
||||
parser =
|
||||
Parser.oneOf
|
||||
[ Parser.map Splash Parser.top
|
||||
, Parser.map Splash (s urlPrefix)
|
||||
, Parser.map Blog (s urlPrefix </> s "posts")
|
||||
|
||||
-- , Parser.map BlogPost (s urlPrefix </> s "posts" </> Parser.string </> Parser.string)
|
||||
, Parser.map Static (s urlPrefix </> s "pages")
|
||||
, Parser.map Terminal (s urlPrefix </> s "terminal")
|
||||
]
|
||||
@@ -242,6 +248,9 @@ updateUrl model =
|
||||
Blog.init ()
|
||||
|> toBlog model
|
||||
|
||||
-- Just (BlogPost category slug) ->
|
||||
-- Blog.init { category = category, slug = slug }
|
||||
-- |> toBlog model
|
||||
Just Terminal ->
|
||||
Terminal.init ()
|
||||
|> toTerminal model
|
||||
|
||||
Reference in New Issue
Block a user